update applied filters text

deepfence · Jul 8, 2024 · 57d2691 · 57d2691
1 parent b9da98a
commit 57d2691
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 8 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx
@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { useIsFetching } from '@tanstack/react-query';
-import { capitalize } from 'lodash-es';
+import { capitalize, startCase } from 'lodash-es';
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActionFunctionArgs,
@@ -326,6 +326,21 @@ const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
     return prev + searchParams.getAll(curr).length;
   }, 0);
 };
+const getPrettyNameForAppliedFilters = ({
+  key,
+  value,
+}: {
+  key: string;
+  value: string;
+}) => {
+  switch (key) {
+    case 'status':
+      return startCase(value);
+
+    default:
+      return value;
+  }
+};
 const Filters = () => {
   const { nodeType } = useParams() as {
     nodeType: string;
@@ -592,7 +607,10 @@ const Filters = () => {
               <FilterBadge
                 key={`${key}-${value}`}
                 onRemove={onFilterRemove({ key, value })}
-                text={value}
+                text={getPrettyNameForAppliedFilters({
+                  key,
+                  value,
+                })}
                 label={FILTER_SEARCHPARAMS[key]}
               />
             );

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx
@@ -37,6 +37,7 @@ import { getScanResultsApiClient } from '@/api/api';
 import {
   ModelBenchmarkType,
   ModelCloudCompliance,
+  ModelCloudComplianceStatusEnum,
   ModelScanInfo,
   ModelScanResultsMaskRequestMaskActionEnum,
   UtilsReportFiltersNodeTypeEnum,
@@ -103,7 +104,11 @@ import {
 import { get403Message, getResponseErrors } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import { formatMilliseconds } from '@/utils/date';
-import { getBenchmarkPrettyName } from '@/utils/enum';
+import {
+  getBenchmarkPrettyName,
+  getMaskedUnmaskedPrettyName,
+  getPostureStatusPrettyName,
+} from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import {
   isScanComplete,
@@ -996,6 +1001,23 @@ const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
     return prev + searchParams.getAll(curr).length;
   }, 0);
 };
+
+const getPrettyNameForAppliedFilters = ({
+  key,
+  value,
+}: {
+  key: string;
+  value: string;
+}) => {
+  switch (key) {
+    case 'visibility':
+      return getMaskedUnmaskedPrettyName(value);
+    case 'status':
+      return getPostureStatusPrettyName(value as ModelCloudComplianceStatusEnum);
+    default:
+      return value;
+  }
+};
 const Filters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [maskedQuery, setMaskedQuery] = useState('');
@@ -1236,7 +1258,7 @@ const Filters = () => {
               <FilterBadge
                 key={`${key}-${value}`}
                 onRemove={onFilterRemove({ key, value })}
-                text={`${FILTER_SEARCHPARAMS[key]}: ${value}`}
+                text={`${FILTER_SEARCHPARAMS[key]}: ${getPrettyNameForAppliedFilters({ key, value })}`}
               />
             );
           })}

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx
@@ -104,7 +104,11 @@ import {
 import { get403Message, getResponseErrors } from '@/utils/403';
 import { apiWrapper } from '@/utils/api';
 import { formatMilliseconds } from '@/utils/date';
-import { getBenchmarkPrettyName } from '@/utils/enum';
+import {
+  getBenchmarkPrettyName,
+  getMaskedUnmaskedPrettyName,
+  getPostureStatusPrettyName,
+} from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import {
   isScanComplete,
@@ -991,6 +995,23 @@ const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   }, 0);
 };
 
+const getPrettyNameForAppliedFilters = ({
+  key,
+  value,
+}: {
+  key: string;
+  value: string;
+}) => {
+  switch (key) {
+    case 'visibility':
+      return getMaskedUnmaskedPrettyName(value);
+    case 'status':
+      return getPostureStatusPrettyName(value as ModelComplianceStatusEnum);
+    default:
+      return value;
+  }
+};
+
 const Filters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [maskedQuery, setMaskedQuery] = useState('');
@@ -1213,7 +1234,7 @@ const Filters = () => {
               <FilterBadge
                 key={`${key}-${value}`}
                 onRemove={onFilterRemove({ key, value })}
-                text={`${FILTER_SEARCHPARAMS[key]}: ${value}`}
+                text={`${FILTER_SEARCHPARAMS[key]}: ${getPrettyNameForAppliedFilters({ key, value })}`}
               />
             );
           })}

diff --git a/...ntend/apps/dashboard/src/features/topology/data-components/tables/CloudResourcesTable.tsx b/...ntend/apps/dashboard/src/features/topology/data-components/tables/CloudResourcesTable.tsx
@@ -122,6 +122,22 @@ function getCloudProviderPrettyName(provider: ModelCloudResourceCloudProviderEnu
   }
 }
 
+const getPrettyNameForAppliedFilters = ({
+  key,
+  value,
+}: {
+  key: string;
+  value: string;
+}) => {
+  switch (key) {
+    case 'cloudProvider':
+      return getCloudProviderPrettyName(value as ModelCloudResourceCloudProviderEnum);
+
+    default:
+      return value;
+  }
+};
+
 function SearchableServiceType() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchText, setSearchText] = useState('');
@@ -358,7 +374,10 @@ function Filters() {
                 <FilterBadge
                   key={`${key}-${value}`}
                   onRemove={onFilterRemove({ key, value })}
-                  text={`${FILTER_SEARCHPARAMS[key]}: ${value}`}
+                  text={`${FILTER_SEARCHPARAMS[key]}: ${getPrettyNameForAppliedFilters({
+                    key,
+                    value,
+                  })}`}
                 />
               );
             })}

diff --git a/...fence_frontend/apps/dashboard/src/features/topology/data-components/tables/HostsTable.tsx b/...fence_frontend/apps/dashboard/src/features/topology/data-components/tables/HostsTable.tsx
@@ -266,6 +266,22 @@ const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   }, 0);
 };
 
+const getPrettyNameForAppliedFilters = ({
+  key,
+  value,
+}: {
+  key: string;
+  value: string;
+}) => {
+  switch (key) {
+    case 'cloudProvider':
+      return CLOUD_PROVIDERS.find((item) => item.value === value)?.label ?? '';
+
+    default:
+      return value;
+  }
+};
+
 function Filters() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [vulnerabilityScanStatusSearchText, setVulnerabilityScanStatusSearchText] =
@@ -591,7 +607,10 @@ function Filters() {
               <FilterBadge
                 key={`${key}-${value}`}
                 onRemove={onFilterRemove({ key, value })}
-                text={value}
+                text={getPrettyNameForAppliedFilters({
+                  key,
+                  value,
+                })}
                 label={FILTER_SEARCHPARAMS[key]}
               />
             );