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

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

@@ -102,6 +102,8 @@ const CreateAPIToken = ({
         userRoleGroups,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
     const [customDate, setCustomDate] = useState<Date>(dayjs().add(1, 'day').toDate())
     const [tokenResponse, setTokenResponse] = useState<TokenResponseType>({
@@ -180,7 +182,15 @@ const CreateAPIToken = ({
     }
 
     const handleGenerateAPIToken = async () => {
-        if (!validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid) {
+        if (
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
+        ) {
             return
         }
 
@@ -226,6 +236,7 @@ const CreateAPIToken = ({
                     k8sPermission,
                     permissionType,
                     userGroups: [],
+                    observabilityPermission,
                     canManageAllAccess: allowManageAllAccess,
                     ...getDefaultUserStatusAndTimeout(),
                 })

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

@@ -83,6 +83,8 @@ const EditAPIToken = ({
         userRoleGroups,
         isSaveDisabled,
         allowManageAllAccess,
+        observabilityPermission,
+        setObservabilityPermission,
     } = usePermissionConfiguration()
 
     const navigate = useNavigate()
@@ -106,7 +108,15 @@ const EditAPIToken = ({
     }
 
     const handleUpdatedToken = async (tokenId) => {
-        if (!validateDirectPermissionForm(directPermission, setDirectPermission, allowManageAllAccess).isValid) {
+        if (
+            !validateDirectPermissionForm(
+                directPermission,
+                setDirectPermission,
+                observabilityPermission,
+                setObservabilityPermission,
+                allowManageAllAccess,
+            ).isValid
+        ) {
             return
         }
 
@@ -135,6 +145,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 @@
     GenericSectionErrorState,
     logExceptionToSentry,
     mapByKey,
+    ObservabilityPermissionFilter,
     ReactSelectInputAction,
     showError,
     stringComparatorBySortOrder,
@@ -34,6 +35,7 @@
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import { importComponentFromFELibrary } from '@Components/common'
 import {
     getUserAccessAllWorkflows,
     getUserAccessChartGroups,
@@ -74,11 +76,15 @@
     getRoleConfigForRoleFilter,
 } from './utils'
 
+const ObservabilityPermissions = importComponentFromFELibrary('ObservabilityPermissions', null, 'function')
+
 const AppPermissions = () => {
     const { serverMode } = useMainContext()
     const {
         directPermission,
         setDirectPermission,
+        observabilityPermission,
+        setObservabilityPermission,
         setChartPermission,
         setK8sPermission,
         currentK8sPermissionRef,
@@ -656,6 +662,21 @@
             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)
     }
 
@@ -921,6 +942,8 @@
         const { accessTypeToErrorMap: _accessTypeToErrorMap } = validateDirectPermissionForm(
             directPermission,
             setDirectPermission,
+            observabilityPermission,
+            setObservabilityPermission,
             allowManageAllAccess,
             false,
         )
@@ -1026,6 +1049,17 @@
                     {isNonEAMode && (
                         <Route path="chart-groups" element={<ChartPermission chartGroupsList={chartGroupsList} />} />
                     )}
+                    {ObservabilityPermissions && (
+                        <Route
+                            path="observability"
+                            element={
+                                <ObservabilityPermissions
+                                    observabilityPermission={observabilityPermission}
+                                    setObservabilityPermission={setObservabilityPermission}
+                                />
+                            }
+                        />
+                    )}
                     <Route
                         path="*"
                         element={

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 = (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 @@
         ...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 @@
             setDirectPermission,
             chartPermission,
             setChartPermission,
+            observabilityPermission,
+            setObservabilityPermission,
             k8sPermission,
             setK8sPermission,
             currentK8sPermissionRef,
@@ -148,6 +157,8 @@
             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 @@
     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 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 @@
     DeleteConfirmationModalProps,
     EntityTypes,
     K8sResourceListPayloadType,
+    ObservabilityPermissionFilter,
     OptionType,
     ResourceKindType,
     UserGroupDTO,
@@ -51,7 +52,12 @@
 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 @@
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resource?: any
     workflow?: string
+    tenant?: string
     status: UserStatusDto
     timeoutWindowExpression: string
     /**
@@ -277,7 +284,7 @@
 
 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 @@
     chartPermission: ChartGroupPermissionsFilter
     k8sPermission: K8sPermissionFilter[]
     permissionType: PermissionType
+    observabilityPermission: ObservabilityPermissionFilter[]
 }
 
 export interface DeleteUserPermissionProps