Merge branch 'develop' of https://github.com/devtron-labs/dashboard into feat/tree-view

AbhishekA1509 · AbhishekA1509 · commit 484766f1cafa · 2025-07-10T17:10:26.000+05:30
diff --git a/.env b/.env
@@ -73,5 +73,6 @@ FEATURE_ASK_DEVTRON_EXPERT=false
 FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false
 FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false
+FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE=false
 FEATURE_FLUX_DEPLOYMENTS_ENABLE=false
 FEATURE_LINK_EXTERNAL_FLUX_ENABLE=false
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-0",
+        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/components/app/list-new/AppListFilters.tsx b/src/components/app/list-new/AppListFilters.tsx
diff --git a/src/components/app/list-new/AppListType.ts b/src/components/app/list-new/AppListType.ts
@@ -16,6 +16,7 @@
 
 import {
     EnvironmentListHelmResponse,
+    GroupedFilterSelectPickerProps,
     ResponseType,
     SERVER_MODE,
     SortingOrder,
@@ -210,3 +211,15 @@ export interface GetDevtronHelmAppListParamsType {
 export interface AskToClearFiltersProps extends Pick<DevtronAppListProps, 'clearAllFilters'> {
     showTipToSelectCluster?: boolean
 }
+
+export type AppListFilterMenuItemType =
+    GroupedFilterSelectPickerProps<AppListUrlFilters>['options'][number]['items'][number]
+
+export interface GetAppListFiltersParams {
+    clusterIdsCsv: string
+    isExternalArgo: boolean
+    isExternalFlux: boolean
+    isArgoInstalled: boolean
+    serverMode: SERVER_MODE
+    selectedEnvironments: { label: string; value: string }[]
+}
diff --git a/src/components/app/list-new/Constants.ts b/src/components/app/list-new/Constants.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { GroupBase } from 'react-select'
+
 import { OptionType, SelectPickerOptionType, UseUrlFiltersProps } from '@devtron-labs/devtron-fe-common-lib'
 
 import { URLS } from '@Config/routes'
@@ -73,13 +75,18 @@ export const TEMPLATE_TYPE_FILTER_OPTIONS: SelectPickerOptionType[] = [
     { label: FluxCDTemplateType.KUSTOMIZATION, value: FluxCDTemplateType.KUSTOMIZATION },
 ]
 
-export const APP_STATUS_FILTER_OPTIONS: SelectPickerOptionType[] = [
-    { label: AppStatuses.DEGRADED, value: AppStatusesDTO.DEGRADED },
-    { label: AppStatuses.HEALTHY, value: AppStatusesDTO.HEALTHY },
-    { label: AppStatuses.HIBERNATING, value: AppStatusesDTO.HIBERNATING },
-    { label: AppStatuses.MISSING, value: AppStatusesDTO.MISSING },
-    { label: AppStatuses.NOT_DEPLOYED, value: AppStatusesDTO.NOT_DEPLOYED },
-    { label: AppStatuses.PROGRESSING, value: AppStatusesDTO.PROGRESSING },
+export const APP_STATUS_FILTER_OPTIONS: GroupBase<SelectPickerOptionType>[] = [
+    {
+        label: 'App Status',
+        options: [
+            { label: AppStatuses.DEGRADED, value: AppStatusesDTO.DEGRADED },
+            { label: AppStatuses.HEALTHY, value: AppStatusesDTO.HEALTHY },
+            { label: AppStatuses.HIBERNATING, value: AppStatusesDTO.HIBERNATING },
+            { label: AppStatuses.MISSING, value: AppStatusesDTO.MISSING },
+            { label: AppStatuses.NOT_DEPLOYED, value: AppStatusesDTO.NOT_DEPLOYED },
+            { label: AppStatuses.PROGRESSING, value: AppStatusesDTO.PROGRESSING },
+        ],
+    },
 ]
 
 export const APPS_WITH_NO_PROJECT_OPTION: OptionType = {
diff --git a/src/components/app/list-new/list.utils.ts b/src/components/app/list-new/list.utils.ts
@@ -15,12 +15,15 @@
  */
 
 import { useMemo } from 'react'
+import { GroupBase } from 'react-select'
 
 import {
     AppListConstants,
+    GroupedFilterSelectPickerProps,
     GroupedOptionsType,
     OptionType,
     SelectPickerOptionType,
+    SERVER_MODE,
     stringComparatorBySortOrder,
     Teams,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -31,13 +34,15 @@ import { Cluster } from '@Services/service.types'
 
 import { URLS } from '../../../config'
 import {
+    AppListFilterMenuItemType,
     AppListUrlFilters,
     AppListUrlFiltersType,
     AppStatuses,
     AppStatusesDTO,
+    GetAppListFiltersParams,
     useFilterOptionsProps,
 } from './AppListType'
-import { APPS_WITH_NO_PROJECT_OPTION } from './Constants'
+import { APPS_WITH_NO_PROJECT_OPTION, SELECT_CLUSTER_TIPPY } from './Constants'
 
 export const getChangeAppTabURL = (appTabType) => {
     switch (appTabType) {
@@ -170,11 +175,15 @@ export const useFilterOptions = ({
             }))
             .sort((a, b) => stringComparatorBySortOrder(a.label, b.label))
 
-    const clusterOptions: SelectPickerOptionType[] = useMemo(
-        () =>
-            appListFiltersResponse?.isFullMode
-                ? getClusterOptions(appListFiltersResponse?.appListFilters.result.clusters)
-                : getClusterOptions(appListFiltersResponse?.clusterList.result),
+    const clusterOptions: GroupBase<SelectPickerOptionType>[] = useMemo(
+        () => [
+            {
+                label: 'Cluster',
+                options: appListFiltersResponse?.isFullMode
+                    ? getClusterOptions(appListFiltersResponse?.appListFilters.result.clusters)
+                    : getClusterOptions(appListFiltersResponse?.clusterList.result),
+            },
+        ],
         [appListFiltersResponse, isExternalArgo, isExternalFlux],
     )
 
@@ -212,3 +221,80 @@ export const getFilterChipConfig = (
             return { ...filterConfig, templateType: [] }
     }
 }
+
+export const getAppListFilters = ({
+    clusterIdsCsv,
+    isExternalArgo,
+    isExternalFlux,
+    isArgoInstalled,
+    serverMode,
+    selectedEnvironments,
+}: GetAppListFiltersParams): GroupedFilterSelectPickerProps<AppListUrlFilters>['options'] => [
+    {
+        items: [
+            ...((!(isExternalArgo || isExternalFlux)
+                ? [
+                      ...((isArgoInstalled
+                          ? [
+                                {
+                                    id: AppListUrlFilters.appStatus,
+                                    label: 'App Status',
+                                    startIcon: { name: 'ic-activity' },
+                                },
+                            ]
+                          : []) as AppListFilterMenuItemType[]),
+                      {
+                          id: AppListUrlFilters.project,
+                          label: 'Project',
+                          startIcon: { name: 'ic-folder' },
+                      },
+                      ...((serverMode === SERVER_MODE.FULL
+                          ? [
+                                {
+                                    id: AppListUrlFilters.environment,
+                                    label: 'Environment',
+                                    startIcon: { name: 'ic-environment' },
+                                    isDisabled: !!clusterIdsCsv,
+                                    tooltipProps: {
+                                        content: clusterIdsCsv
+                                            ? 'Remove cluster filters to use environment filter'
+                                            : null,
+                                    },
+                                },
+                            ]
+                          : []) as AppListFilterMenuItemType[]),
+                  ]
+                : []) as AppListFilterMenuItemType[]),
+            ...((isExternalFlux
+                ? [
+                      {
+                          id: AppListUrlFilters.templateType,
+                          label: 'Template Type',
+                          startIcon: { name: 'ic-cube' },
+                          isDisabled: !clusterIdsCsv,
+                          tooltipProps: { content: !clusterIdsCsv ? SELECT_CLUSTER_TIPPY : null },
+                      },
+                  ]
+                : []) as AppListFilterMenuItemType[]),
+            {
+                id: AppListUrlFilters.cluster,
+                label: 'Cluster',
+                startIcon: { name: 'ic-cluster' },
+                isDisabled: !(isExternalArgo || isExternalFlux) && !!selectedEnvironments.length,
+                tooltipProps: {
+                    content:
+                        !(isExternalArgo || isExternalFlux) && !!selectedEnvironments.length
+                            ? 'Remove environment filters to use cluster filter'
+                            : null,
+                },
+            },
+            {
+                id: AppListUrlFilters.namespace,
+                label: 'Namespace',
+                startIcon: { name: 'ic-namespace' },
+                isDisabled: !clusterIdsCsv,
+                tooltipProps: { content: !clusterIdsCsv ? SELECT_CLUSTER_TIPPY : null },
+            },
+        ],
+    },
+]
diff --git a/src/css/base.scss b/src/css/base.scss
@@ -4813,6 +4813,20 @@ textarea::placeholder {
     animation-timing-function: linear;
 }
 
+// TODO: rename this to `dc__pulsating-dot` and remove existing `dc__pulsating-dot`(above class) when removing `FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE` flag
+.dc__pulsating-dot-new {
+    width: 12px;
+    height: 12px;
+    background-color: var(--O500);
+    top: -6px;
+    right: -6px;
+    border-radius: 50%;
+    animation-name: pulse;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
 .security-policy--whitelist,
 .security-policy--whitelisted {
     color: var(--G500);
diff --git a/src/css/colorPalette.scss b/src/css/colorPalette.scss
@@ -263,6 +263,7 @@ $black: 0, 0, 0;
     --shadow-10: 0px 0px 4px 0px var(--black-20);
     --shadow-20: 0px 0px 7px 0px var(--black-20);
     --shadow-30: 0px 0px 10px 0px var(--black-20);
+    --shadow-key: 0px 2px 0px 0px rgba(7, 17, 26, 0.15);
 
     &.theme {
         &__light {
diff --git a/src/css/themeUtils.scss b/src/css/themeUtils.scss
@@ -131,6 +131,10 @@
         box-shadow: var(--shadow-drawer);
     }
 
+    &__key {
+        box-shadow: var(--shadow-key);
+    }
+
     &__card {
         &--10 {
             box-shadow: var(--shadow-10);
diff --git a/src/index.tsx b/src/index.tsx
@@ -175,6 +175,7 @@ if (!window || !window._env_) {
         FEATURE_MANAGE_TRAFFIC_ENABLE: true,
         FEATURE_REDFISH_NODE_ENABLE: false,
         FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE: false,
+        FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE: true,
         FEATURE_FLUX_DEPLOYMENTS_ENABLE: false,
         FEATURE_LINK_EXTERNAL_FLUX_ENABLE: false,
     }
diff --git a/yarn.lock b/yarn.lock
@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-0":
-  version: 1.17.0-pre-0
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-0"
+"@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-1":
+  version: 1.17.0-pre-1
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-1"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1773,7 +1773,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/b73859860e959e79fcc358de6611c6a3501cd35c8fd7ea743f488e9f89bc605abb4e691f2f52c709c434d12b65fda3bd42e4b216b061378e0ebee61af25e7b75
+  checksum: 10c0/a8992c133a9ed656d6bf9fad0c6b502684d97b48456c8ff6593076f2350c52626b963e79d8f47ee8e77bd8b193d6a2ea7a8ec9afa9ae9bb4247faef2265810a8
   languageName: node
   linkType: hard
 
@@ -5685,7 +5685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.0-pre-0"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.0-pre-1"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"

Original file line number	Diff line number	Diff line change
`@@ -175,6 +175,7 @@ if (!window \|\| !window._env_) {`
`175`	`175`	`FEATURE_MANAGE_TRAFFIC_ENABLE: true,`
`176`	`176`	`FEATURE_REDFISH_NODE_ENABLE: false,`
`177`	`177`	`FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE: false,`
	`178`	`+ FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE: true,`
`178`	`179`	`FEATURE_FLUX_DEPLOYMENTS_ENABLE: false,`
`179`	`180`	`FEATURE_LINK_EXTERNAL_FLUX_ENABLE: false,`
`180`	`181`	`}`