feat: Add Observability navigation and route, and refactor calendar and date utilities to use the common library.

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.21.0",
+        "@devtron-labs/devtron-fe-common-lib": "1.21.0-beta-14",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

@@ -102,6 +102,8 @@ const CreateAPIToken = ({
         userRoleGroups,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
     const [customDate, setCustomDate] = useState<Moment>(null)
     const [tokenResponse, setTokenResponse] = useState<TokenResponseType>({
@@ -177,7 +179,15 @@ const CreateAPIToken = ({
     }
 
     const handleGenerateAPIToken = async () => {
-        if (!validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid) {
+        if (
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
+        ) {
             return
         }
 
@@ -223,6 +233,7 @@ const CreateAPIToken = ({
                     k8sPermission,
                     permissionType,
                     userGroups: [],
+                    observabilityPermission,
                     canManageAllAccess: allowManageAllAccess,
                     ...getDefaultUserStatusAndTimeout(),
                 })

src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx

@@ -80,6 +80,8 @@ const EditAPIToken = ({
         userRoleGroups,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
 
     const history = useHistory()
@@ -104,7 +106,15 @@ const EditAPIToken = ({
     }
 
     const handleUpdatedToken = async (tokenId) => {
-        if (!validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid) {
+        if (
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
+        ) {
             return
         }
 
@@ -133,6 +143,7 @@ const EditAPIToken = ({
                     permissionType,
                     userGroups: [],
                     canManageAllAccess: allowManageAllAccess,
+                    observabilityPermission,
                     ...getDefaultUserStatusAndTimeout(),
                 })
 

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx

@@ -60,6 +60,8 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
         data: permissionGroup,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
     const _permissionGroup = permissionGroup as PermissionGroup
 
@@ -103,7 +105,13 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
         }
         if (
             !isSuperAdminPermission &&
-            !validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
         ) {
             return
         }
@@ -114,6 +122,7 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
             directPermission,
             serverMode,
             chartPermission,
+            observabilityPermission,
         })
 
         const payload: PermissionGroupCreateOrUpdatePayload = {

src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx

@@ -26,6 +26,7 @@ import {
     GenericSectionErrorState,
     logExceptionToSentry,
     mapByKey,
+    ObservabilityPermissionFilter,
     ReactSelectInputAction,
     showError,
     stringComparatorBySortOrder,
@@ -34,6 +35,7 @@ import {
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import { importComponentFromFELibrary } from '@Components/common'
 import {
     getUserAccessAllWorkflows,
     getUserAccessChartGroups,
@@ -74,11 +76,15 @@ import {
     getRoleConfigForRoleFilter,
 } from './utils'
 
+const ObservabilityPermissions = importComponentFromFELibrary('ObservabilityPermissions', null, 'function')
+
 const AppPermissions = () => {
     const { serverMode } = useMainContext()
     const {
         directPermission,
         setDirectPermission,
+        observabilityPermission,
+        setObservabilityPermission,
         setChartPermission,
         setK8sPermission,
         currentK8sPermissionRef,
@@ -657,6 +663,21 @@ const AppPermissions = () => {
             setK8sPermission(_k8sPermission)
         }
 
+        // Observability Permissions
+        const _observabilityPermission: ObservabilityPermissionFilter[] = (roleFilters ?? [])
+            .filter((roleFilter) => roleFilter.entity === EntityTypes.OBSERVABILITY)
+            .map(({ action, entityName, tenant, status, timeToLive }) => ({
+                action: action as ActionTypes.ADMIN | ActionTypes.VIEW,
+                tenant: { label: tenant, value: tenant },
+                entityName: entityName?.split(',')?.map((entity) => ({ value: entity, label: entity })) || [],
+                status,
+                timeToLive,
+            }))
+
+        if (_observabilityPermission.length) {
+            setObservabilityPermission(_observabilityPermission)
+        }
+
         setIsLoading(false)
     }
 
@@ -928,6 +949,8 @@ const AppPermissions = () => {
         const { accessTypeToErrorMap: _accessTypeToErrorMap } = validateDirectPermissionForm(
             directPermission,
             setDirectPermission,
+            observabilityPermission,
+            setObservabilityPermission,
             allowManageAllAccess,
             false,
         )
@@ -1030,6 +1053,14 @@ const AppPermissions = () => {
                             <ChartPermission chartGroupsList={chartGroupsList} />
                         </Route>
                     )}
+                    {ObservabilityPermissions && (
+                        <Route path={`${path}/observability`}>
+                            <ObservabilityPermissions
+                                observabilityPermission={observabilityPermission}
+                                setObservabilityPermission={setObservabilityPermission}
+                            />
+                        </Route>
+                    )}
                     <Redirect
                         // Preserving the search params
                         to={{

src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/utils.ts

@@ -88,6 +88,12 @@ export const getNavLinksConfig = (serverMode: SERVER_MODE, superAdmin: boolean,
             label: 'Chart Groups',
             isHidden: serverMode === SERVER_MODE.EA_ONLY,
         },
+        {
+            accessType: 'observability',
+            tabName: 'observability',
+            label: 'Observability',
+            isHidden: !getAccessManagerRoles, // Check for FE-LIB
+        },
     ] as const
 
 export const getAppPermissionDetailConfig = (path: string, serverMode: SERVER_MODE) =>

src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/PermissionConfigurationFormProvider.tsx

@@ -16,7 +16,13 @@
 
 import React, { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 
-import { ActionTypes, EntityTypes, useGetUserRoles, UserStatus } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ActionTypes,
+    EntityTypes,
+    ObservabilityPermissionFilter,
+    useGetUserRoles,
+    UserStatus,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '../../../../../../components/common'
 import { PermissionType } from '../../../constants'
@@ -60,6 +66,7 @@ export const PermissionConfigurationFormProvider = ({
         ...getDefaultStatusAndTimeout(),
     })
     const [k8sPermission, setK8sPermission] = useState<K8sPermissionFilter[]>([])
+    const [observabilityPermission, setObservabilityPermission] = useState<ObservabilityPermissionFilter[]>([])
 
     const currentK8sPermissionRef = useRef<K8sPermissionFilter[]>([])
     const [userRoleGroups, _setUserRoleGroups] = useState<User['userRoleGroups']>([])
@@ -123,6 +130,8 @@ export const PermissionConfigurationFormProvider = ({
             setDirectPermission,
             chartPermission,
             setChartPermission,
+            observabilityPermission,
+            setObservabilityPermission,
             k8sPermission,
             setK8sPermission,
             currentK8sPermissionRef,
@@ -148,6 +157,8 @@ export const PermissionConfigurationFormProvider = ({
             setDirectPermission,
             chartPermission,
             setChartPermission,
+            observabilityPermission,
+            setObservabilityPermission,
             k8sPermission,
             setK8sPermission,
             currentK8sPermissionRef,

src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/types.ts

@@ -16,6 +16,8 @@
 
 import React from 'react'
 
+import { ObservabilityPermissionFilter } from '@devtron-labs/devtron-fe-common-lib'
+
 import { PermissionType } from '../../../constants'
 import {
     ChartGroupPermissionsFilter,
@@ -52,6 +54,8 @@ export interface PermissionConfigurationFormContext {
     k8sPermission?: K8sPermissionFilter[]
     setK8sPermission?: React.Dispatch<React.SetStateAction<K8sPermissionFilter[]>>
     currentK8sPermissionRef?: React.MutableRefObject<K8sPermissionFilter[]>
+    observabilityPermission: ObservabilityPermissionFilter[]
+    setObservabilityPermission: React.Dispatch<React.SetStateAction<ObservabilityPermissionFilter[]>>
     /**
      * Flag to control if status should be shown in the form
      *
@@ -82,6 +86,6 @@ export interface PermissionConfigurationFormContext {
 }
 
 export type AccessTypeToErrorMapType = Record<
-    PermissionConfigurationFormContext['directPermission'][number]['accessType'],
+    PermissionConfigurationFormContext['directPermission'][number]['accessType'] | 'observability',
     boolean
 >

src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx

@@ -81,6 +81,8 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
         showStatus,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
     const _userData = userData as User
 
@@ -135,7 +137,13 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
     const handleSubmit = async () => {
         if (
             !validateForm() ||
-            !validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
         ) {
             return
         }
@@ -153,6 +161,7 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
             permissionType,
             userGroups: selectedUserGroups,
             canManageAllAccess: allowManageAllAccess,
+            observabilityPermission,
             ...getDefaultUserStatusAndTimeout(),
         })
 

src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -60,4 +60,5 @@ export const DEFAULT_ACCESS_TYPE_TO_ERROR_MAP: AccessTypeToErrorMapType = {
     [ACCESS_TYPE_MAP.DEVTRON_APPS]: false,
     [ACCESS_TYPE_MAP.HELM_APPS]: false,
     [ACCESS_TYPE_MAP.JOBS]: false,
+    observability: false,
 } as const

src/Pages/GlobalConfigurations/Authorization/types.ts

@@ -25,6 +25,7 @@ import {
     DeleteConfirmationModalProps,
     EntityTypes,
     K8sResourceListPayloadType,
+    ObservabilityPermissionFilter,
     OptionType,
     ResourceKindType,
     UserGroupDTO,
@@ -51,7 +52,12 @@ export interface UserAndGroupPermissionsWrapProps {
 type PermissionStatusAndTimeout = Pick<UserRoleGroup, 'status' | 'timeToLive'>
 
 export interface APIRoleFilterDto {
-    entity: EntityTypes.DIRECT | EntityTypes.CHART_GROUP | EntityTypes.CLUSTER | EntityTypes.JOB
+    entity:
+        | EntityTypes.DIRECT
+        | EntityTypes.CHART_GROUP
+        | EntityTypes.CLUSTER
+        | EntityTypes.JOB
+        | EntityTypes.OBSERVABILITY
     team?: string
     entityName?: string
     environment?: string
@@ -72,6 +78,7 @@ export interface APIRoleFilterDto {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resource?: any
     workflow?: string
+    tenant?: string
     status: UserStatusDto
     timeoutWindowExpression: string
     /**
@@ -277,7 +284,7 @@ interface RoleFilter {
 
 export interface DirectPermissionsRoleFilter extends RoleFilter, PermissionStatusAndTimeout {
     entity: EntityTypes.DIRECT | EntityTypes.JOB
-    accessType: ACCESS_TYPE_MAP.DEVTRON_APPS | ACCESS_TYPE_MAP.HELM_APPS | ACCESS_TYPE_MAP.JOBS
+    accessType: ACCESS_TYPE_MAP
     team: OptionType
     entityName: OptionType[]
     entityNameError?: string
@@ -319,6 +326,7 @@ export interface CreateUserPermissionPayloadParams
     chartPermission: ChartGroupPermissionsFilter
     k8sPermission: K8sPermissionFilter[]
     permissionType: PermissionType
+    observabilityPermission: ObservabilityPermissionFilter[]
 }
 
 export interface DeleteUserPermissionProps