Merge pull request #2833 from devtron-labs/feat/node-search-filters

feat: NodeListSearchFilter - improve node search functionality with SelectPicker search

Author: RohitRaj011

.env

@@ -76,3 +76,4 @@ 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
+FEATURE_CANARY_ROLLOUT_PROGRESS_ENABLE=true

package.json

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

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

@@ -70,7 +70,7 @@ const AppOrJobSelector = ({
                 _permission.entityName.filter((option) => option.value !== SELECT_ALL_VALUE).map((app) => app.label) ??
                 []
             const { appIdWorkflowNamesMapping } = await getUserAccessAllWorkflows({
-                appIds: jobNames,
+                appNames: jobNames,
                 options: { abortControllerRef },
             })
             const workflowOptions = getWorkflowOptions(appIdWorkflowNamesMapping)

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

@@ -345,7 +345,7 @@ const AppPermissions = () => {
     async function setAllWorkflows(jobOptions) {
         const jobNames = jobOptions.filter((job) => job.value !== SELECT_ALL_VALUE).map((job) => job.label)
         try {
-            const result = await getUserAccessAllWorkflows(jobNames)
+            const result = await getUserAccessAllWorkflows({ appNames: jobNames })
 
             const workflowOptions = getWorkflowOptions(result?.appIdWorkflowNamesMapping)
             return [

src/Pages/GlobalConfigurations/Authorization/authorization.service.ts

@@ -312,10 +312,10 @@ export const getUserAccessClusterList = () =>
         payload: { entity: EntityTypes.CLUSTER },
     })
 
-export const getUserAccessAllWorkflows = ({ appIds, options }: GetUserAccessAllWorkflowsParams) =>
+export const getUserAccessAllWorkflows = ({ appNames, options }: GetUserAccessAllWorkflowsParams) =>
     getUserResourceOptions<AppIdWorkflowNamesMapping>({
-        kind: UserAccessResourceKind.JOBS,
-        payload: { entity: EntityTypes.JOB, appIds },
+        kind: UserAccessResourceKind.WORKFLOW,
+        payload: { entity: EntityTypes.JOB, appNames },
         options,
     })
 

src/Pages/GlobalConfigurations/Authorization/types.ts

@@ -347,6 +347,7 @@ export interface GetUserPermissionResourcesPayload
     accessType?: ACCESS_TYPE_MAP.DEVTRON_APPS | ACCESS_TYPE_MAP.HELM_APPS
     teamIds?: number[]
     appIds?: string[]
+    appNames?: string[]
 }
 
 export interface GetUserResourceOptionsProps {
@@ -356,5 +357,5 @@ export interface GetUserResourceOptionsProps {
 }
 
 export interface GetUserAccessAllWorkflowsParams
-    extends Pick<GetUserPermissionResourcesPayload, 'appIds'>,
+    extends Pick<GetUserPermissionResourcesPayload, 'appNames'>,
         Pick<GetUserResourceOptionsProps, 'options'> {}

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx

@@ -328,15 +328,6 @@ export const ConfigMapSecretContainer = ({
         }
     }, [configMapSecretResLoading, configMapSecretRes])
 
-    // CONFIGMAP/SECRET DELETED
-    const configHasBeenDeleted = useMemo(
-        () =>
-            !configMapSecretResLoading && configMapSecretRes
-                ? !configMapSecretData && !inheritedConfigMapSecretData && !draftData
-                : null,
-        [configMapSecretResLoading, configMapSecretRes],
-    )
-
     // CONFIGMAP/SECRET ERROR
     const configMapSecretResErr = useMemo(
         () =>
@@ -348,6 +339,18 @@ export const ConfigMapSecretContainer = ({
         [configMapSecretResLoading, configMapSecretRes],
     )
 
+    // CONFIGMAP/SECRET DELETED
+    const configHasBeenDeleted = useMemo(
+        () =>
+            !configMapSecretResLoading &&
+            configMapSecretRes &&
+            !configMapSecretResErr &&
+            !configMapSecretData &&
+            !inheritedConfigMapSecretData &&
+            !draftData,
+        [configMapSecretResLoading, configMapSecretRes, configMapSecretResErr],
+    )
+
     // ASYNC CALL - CONFIGMAP/SECRET RESOLVED DATA
     const [resolvedScopeVariablesResLoading, resolvedScopeVariablesRes, reloadResolvedScopeVariablesResErr] = useAsync(
         () =>

src/components/ResourceBrowser/Constants.ts

@@ -325,29 +325,13 @@ export const NODE_LIST_HEADERS_TO_KEY_MAP: Record<(typeof NODE_LIST_HEADERS)[num
     unschedulable: 'unschedulable',
 } as const
 
-export const NODE_SEARCH_KEY_OPTIONS = [
-    { value: NODE_SEARCH_KEYS.NAME, label: 'Name' },
-    { value: NODE_SEARCH_KEYS.LABEL, label: 'Label' },
-    { value: NODE_SEARCH_KEYS.NODE_GROUP, label: 'Node group' },
-] as const
-
-export const DEFAULT_NODE_K8S_VERSION = {
-    label: 'K8s version: Any',
-    value: 'K8s version: Any',
-}
-
-export const NODE_SEARCH_KEY_PLACEHOLDER: Record<NODE_SEARCH_KEYS, string> = {
-    [NODE_SEARCH_KEYS.NAME]: 'Search by node name Eg. ip-172-31-2-152.us-east-2.compute.internal',
-    [NODE_SEARCH_KEYS.LABEL]: 'Search by key=value Eg. environment=production, tier=frontend',
-    [NODE_SEARCH_KEYS.NODE_GROUP]: 'Search by node group name Eg. mainnode',
-}
+export const NODE_LIST_HEADER_KEYS_TO_SEARCH = Object.values(NODE_LIST_HEADERS_TO_KEY_MAP)
 
 export const NODE_SEARCH_KEYS_TO_OBJECT_KEYS: Record<
     NODE_SEARCH_KEYS,
     (typeof NODE_LIST_HEADERS_TO_KEY_MAP)[keyof typeof NODE_LIST_HEADERS_TO_KEY_MAP]
 > = {
     [NODE_SEARCH_KEYS.LABEL]: 'labels',
-    [NODE_SEARCH_KEYS.NAME]: 'name',
     [NODE_SEARCH_KEYS.NODE_GROUP]: 'nodeGroup',
 }
 

src/components/ResourceBrowser/ResourceBrowser.scss

@@ -66,12 +66,14 @@
     .resource-list-container {
         .node-listing-search-container {
             display: grid;
-            grid-template-columns: auto 160px 1px 180px;
+            grid-template-columns: 1fr auto 1px 180px;
             column-gap: 8px;
 
-            &__shortcut-key {
-                right: 10px;
-                top: 6px;
+            .grouped-filter-select-picker {
+                width: 350px;
+                > .dc__mxw-250 {
+                    max-width: 350px;
+                }
             }
         }
 
@@ -92,6 +94,7 @@
 .cluster-terminal-hidden {
     visibility: hidden;
     height: 0;
+
     .terminal-action-strip {
         display: none;
     }

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -44,7 +44,7 @@ import {
     updateManifestResourceHelmApps,
 } from '@Components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.api'
 
-import { NODE_LIST_HEADERS_TO_KEY_MAP } from '../Constants'
+import { NODE_LIST_HEADER_KEYS_TO_SEARCH, NODE_LIST_HEADERS_TO_KEY_MAP } from '../Constants'
 import { getResourceData } from '../ResourceBrowser.service'
 import { K8SResourceListType } from '../Types'
 import K8sResourceListTableCellComponent from './K8sResourceListTableCellComponent'
@@ -88,6 +88,7 @@ const K8SResourceListViewWrapper = ({
     updateSearchParams,
     eventType = 'warning',
     filteredRows,
+    rows,
     ...restProps
 }: K8SResourceListViewWrapperProps) => (
     <div className="flexbox-col flex-grow-1 resource-list-container dc__overflow-hidden border__primary--left">
@@ -97,6 +98,9 @@ const K8SResourceListViewWrapper = ({
                 setVisibleColumns={setVisibleColumns}
                 allColumns={allColumns}
                 searchParams={restProps}
+                rows={rows}
+                searchKey={searchKey}
+                handleSearch={handleSearch}
             />
         ) : (
             <ResourceFilterOptions
@@ -218,15 +222,18 @@ export const K8SResourceList = ({
     )
 
     const tableFilter: K8sResourceListTableProps['filter'] = (row, filterData) => {
+        let nodeFilters = true
+
         if (isNodeListing) {
-            return isItemASearchMatchForNodeListing(row.data, filterData)
+            nodeFilters = isItemASearchMatchForNodeListing(row.data, filterData)
         }
 
         const isSearchMatch =
             !filterData.searchKey ||
             Object.entries(row.data).some(
                 ([key, value]) =>
                     key !== 'id' &&
+                    (!isNodeListing || NODE_LIST_HEADER_KEYS_TO_SEARCH.includes(key)) &&
                     value !== null &&
                     value !== undefined &&
                     String(value).toLowerCase().includes(filterData.searchKey.toLowerCase()),
@@ -239,7 +246,7 @@ export const K8SResourceList = ({
             )
         }
 
-        return isSearchMatch
+        return isSearchMatch && nodeFilters
     }
 
     const getDefaultSortKey = () => {