Added missing severity check and posture status (#2197)

deepfence · Jun 11, 2024 · b2e4dfb · b2e4dfb
1 parent c94c612
commit b2e4dfb
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 55 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/dashboard/components/TopRisks.tsx b/deepfence_frontend/apps/dashboard/src/features/dashboard/components/TopRisks.tsx
@@ -13,6 +13,7 @@ import { CardHeader } from '@/features/dashboard/components/CardHeader';
 import { queries } from '@/queries';
 import { Mode, THEME_DARK, useTheme } from '@/theme/ThemeContext';
 import { VulnerabilitySeverityType } from '@/types/common';
+import { SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
@@ -174,7 +175,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityChartInnerColorMap(theme)[key as VulnerabilitySeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -211,7 +212,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityColorMap(theme)[key as VulnerabilitySeverityType] ??
-                getSeverityColorMap(theme)['unknown'],
+                getSeverityColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx
@@ -26,7 +26,11 @@ import { SearchableImageList } from '@/components/forms/SearchableImageList';
 import { FieldSelection } from '@/features/integrations/components/report-form/FieldSelection';
 import { SuccessModalContent } from '@/features/settings/components/SuccessModalContent';
 import { ScanTypeEnum } from '@/types/common';
-import { getPostureStatusPrettyName } from '@/utils/enum';
+import {
+  getPostureStatusPrettyName,
+  getSeverityPrettyName,
+  SeverityEnumList,
+} from '@/utils/enum';
 
 import {
   ActionEnumType,
@@ -217,13 +221,11 @@ const AdvancedFilters = ({
   const statusFilter = fieldFilters?.contains_filter?.filter_in?.['status'];
 
   const [selectedSeverity, setSelectedSeverity] = useState<string[]>(
-    severityFilter?.map((severity) => upperFirst(severity)) ?? [],
+    severityFilter ?? [],
   );
 
   // status
-  const [selectedStatus, setSelectedStatus] = useState<string[]>(
-    statusFilter?.map((status) => upperFirst(status)) ?? [],
-  );
+  const [selectedStatus, setSelectedStatus] = useState<string[]>(statusFilter ?? []);
 
   // to main clear state for combobox
   const [hosts, setHosts] = useState<string[]>(getHostsFilter(filters?.node_ids));
@@ -423,10 +425,13 @@ const AdvancedFilters = ({
                 return value && value.length ? `${value.length} selected` : '';
               }}
             >
-              <ListboxOption value={'Critical'}>Critical</ListboxOption>
-              <ListboxOption value={'High'}>High</ListboxOption>
-              <ListboxOption value={'Medium'}>Medium</ListboxOption>
-              <ListboxOption value={'Low'}>Low</ListboxOption>
+              {SeverityEnumList.map((severity) => {
+                return (
+                  <ListboxOption key={severity} value={severity}>
+                    {getSeverityPrettyName(severity)}
+                  </ListboxOption>
+                );
+              })}
             </Listbox>
           </>
         ) : null}

diff --git a/...ence_frontend/apps/dashboard/src/features/malwares/components/landing/TopNMalwareCard.tsx b/...ence_frontend/apps/dashboard/src/features/malwares/components/landing/TopNMalwareCard.tsx
@@ -13,7 +13,7 @@ import { getSeverityColorMap } from '@/constants/charts';
 import { CardHeader } from '@/features/malwares/pages/landing/CardHeader';
 import { queries } from '@/queries';
 import { Mode, useTheme } from '@/theme/ThemeContext';
-import { SeverityEnum } from '@/utils/enum';
+import { getSeverityPrettyName, SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
@@ -44,23 +44,23 @@ function getChartOptions({ data, theme }: { data: TopNMalwareChartData[]; theme:
         },
         {
           name: SeverityEnum.Critical,
-          displayName: 'Critical',
+          displayName: getSeverityPrettyName(SeverityEnum.Critical),
         },
         {
           name: SeverityEnum.High,
-          displayName: 'High',
+          displayName: getSeverityPrettyName(SeverityEnum.High),
         },
         {
           name: SeverityEnum.Medium,
-          displayName: 'Medium',
+          displayName: getSeverityPrettyName(SeverityEnum.Medium),
         },
         {
           name: SeverityEnum.Low,
-          displayName: 'Low',
+          displayName: getSeverityPrettyName(SeverityEnum.Low),
         },
         {
           name: SeverityEnum.Unknown,
-          displayName: 'Unknown',
+          displayName: getSeverityPrettyName(SeverityEnum.Unknown),
         },
       ],
       source: [...data].reverse(),
@@ -156,7 +156,7 @@ function getChartOptions({ data, theme }: { data: TopNMalwareChartData[]; theme:
       {
         type: 'bar',
         stack: 'total',
-        color: getSeverityColorMap(theme)['unknown'],
+        color: getSeverityColorMap(theme)[SeverityEnum.Unknown],
         cursor: 'pointer',
         barMaxWidth: 20,
       },

diff --git a/...ps/dashboard/src/features/malwares/components/scan-results/MalwareScanResultsPieChart.tsx b/...ps/dashboard/src/features/malwares/components/scan-results/MalwareScanResultsPieChart.tsx
@@ -4,6 +4,7 @@ import { ECOption, ReactECharts } from '@/components/ReactEcharts';
 import { getSeverityChartInnerColorMap, getSeverityColorMap } from '@/constants/charts';
 import { Mode, THEME_DARK, useTheme } from '@/theme/ThemeContext';
 import { MalwareSeverityType } from '@/types/common';
+import { SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 
 function getChartOptions({
@@ -47,7 +48,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityChartInnerColorMap(theme)[key as MalwareSeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -87,7 +88,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityColorMap(theme)[key as MalwareSeverityType] ??
-                getSeverityColorMap(theme)['unknown'],
+                getSeverityColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/landing/MalwareCountsCard.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/landing/MalwareCountsCard.tsx
@@ -11,6 +11,7 @@ import { CardHeader } from '@/features/malwares/pages/landing/CardHeader';
 import { queries } from '@/queries';
 import { Mode, THEME_DARK, useTheme } from '@/theme/ThemeContext';
 import { MalwareSeverityType } from '@/types/common';
+import { SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
@@ -57,7 +58,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityChartInnerColorMap(theme)[key as MalwareSeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -94,7 +95,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityColorMap(theme)[key as MalwareSeverityType] ??
-                getSeverityColorMap(theme)['unknown'],
+                getSeverityColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanSummary.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanSummary.tsx
@@ -3,14 +3,18 @@ import { Suspense, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { createColumnHelper, Table, TableSkeleton } from 'ui-components';
 
-import { ModelCloudComplianceStatusEnum } from '@/api/generated';
+import {
+  ModelCloudComplianceStatusEnum,
+  ModelComplianceStatusEnum,
+} from '@/api/generated';
 import { DFLink } from '@/components/DFLink';
 import { TruncatedText } from '@/components/TruncatedText';
 import { getPostureColor } from '@/constants/charts';
 import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
 import { queries } from '@/queries';
 import { useTheme } from '@/theme/ThemeContext';
 import { ScanTypeEnum } from '@/types/common';
+import { getPostureStatusPrettyName } from '@/utils/enum';
 
 const DEFAULT_PAGE_SIZE = 10;
 
@@ -159,81 +163,101 @@ export const useTableColumn = () => {
         return _columns;
       } else if (nodeType === 'host') {
         return [
-          columnHelper.accessor('info', {
+          columnHelper.accessor(ModelComplianceStatusEnum.Info, {
             cell: (info) => {
               return (
                 <div className="flex items-center gap-x-2 tabular-nums">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{
-                      backgroundColor: getPostureColor(mode)['info'],
+                      backgroundColor:
+                        getPostureColor(mode)[ModelComplianceStatusEnum.Info],
                     }}
                   ></div>
                   <span>{info.getValue() ?? 0}</span>
                 </div>
               );
             },
-            header: () => <TruncatedText text="Info" />,
+            header: () => (
+              <TruncatedText
+                text={getPostureStatusPrettyName(ModelComplianceStatusEnum.Info)}
+              />
+            ),
             minSize: 80,
             size: 80,
             maxSize: 80,
             enableResizing: false,
           }),
-          columnHelper.accessor('pass', {
+          columnHelper.accessor(ModelComplianceStatusEnum.Pass, {
             cell: (info) => {
               return (
                 <div className="flex items-center gap-x-2 tabular-nums">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{
-                      backgroundColor: getPostureColor(mode)['pass'],
+                      backgroundColor:
+                        getPostureColor(mode)[ModelComplianceStatusEnum.Pass],
                     }}
                   ></div>
                   <span>{info.getValue() ?? 0}</span>
                 </div>
               );
             },
-            header: () => <TruncatedText text="Pass" />,
+            header: () => (
+              <TruncatedText
+                text={getPostureStatusPrettyName(ModelComplianceStatusEnum.Pass)}
+              />
+            ),
             minSize: 80,
             size: 80,
             maxSize: 80,
             enableResizing: false,
           }),
-          columnHelper.accessor('warn', {
+          columnHelper.accessor(ModelComplianceStatusEnum.Warn, {
             cell: (info) => {
               return (
                 <div className="flex items-center gap-x-2 tabular-nums">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{
-                      backgroundColor: getPostureColor(mode)['warn'],
+                      backgroundColor:
+                        getPostureColor(mode)[ModelComplianceStatusEnum.Warn],
                     }}
                   ></div>
                   <span>{info.getValue() ?? 0}</span>
                 </div>
               );
             },
-            header: () => <TruncatedText text="Warn" />,
+            header: () => (
+              <TruncatedText
+                text={getPostureStatusPrettyName(ModelComplianceStatusEnum.Warn)}
+              />
+            ),
             minSize: 80,
             size: 80,
             maxSize: 80,
             enableResizing: false,
           }),
-          columnHelper.accessor('note', {
+          columnHelper.accessor(ModelComplianceStatusEnum.Note, {
             cell: (info) => {
               return (
                 <div className="flex items-center gap-x-2 tabular-nums">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{
-                      backgroundColor: getPostureColor(mode)['note'],
+                      backgroundColor:
+                        getPostureColor(mode)[ModelComplianceStatusEnum.Note],
                     }}
                   ></div>
                   <span>{info.getValue() ?? 0}</span>
                 </div>
               );
             },
-            header: () => <TruncatedText text="Note" />,
+            header: () => (
+              <TruncatedText
+                text={getPostureStatusPrettyName(ModelComplianceStatusEnum.Note)}
+              />
+            ),
             minSize: 80,
             size: 80,
             maxSize: 80,

diff --git a/...nce_frontend/apps/dashboard/src/features/secrets/components/landing/SecretsCountsCard.tsx b/...nce_frontend/apps/dashboard/src/features/secrets/components/landing/SecretsCountsCard.tsx
@@ -11,6 +11,7 @@ import { CardHeader } from '@/features/secrets/components/landing/CardHeader';
 import { queries } from '@/queries';
 import { Mode, THEME_DARK, useTheme } from '@/theme/ThemeContext';
 import { SecretSeverityType } from '@/types/common';
+import { SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
@@ -57,7 +58,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityChartInnerColorMap(theme)[key as SecretSeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -94,7 +95,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityColorMap(theme)[key as SecretSeverityType] ??
-                getSeverityColorMap(theme)['unknown'],
+                getSeverityColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/TopNSecretCard.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/TopNSecretCard.tsx
@@ -13,7 +13,7 @@ import { getSeverityColorMap } from '@/constants/charts';
 import { CardHeader } from '@/features/secrets/components/landing/CardHeader';
 import { queries } from '@/queries';
 import { Mode, useTheme } from '@/theme/ThemeContext';
-import { SeverityEnum } from '@/utils/enum';
+import { getSeverityPrettyName, SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
@@ -45,23 +45,23 @@ function getChartOptions({ data, theme }: { data: TopNSecretChartData[]; theme:
         },
         {
           name: SeverityEnum.Critical,
-          displayName: 'Critical',
+          displayName: getSeverityPrettyName(SeverityEnum.Critical),
         },
         {
           name: SeverityEnum.High,
-          displayName: 'High',
+          displayName: getSeverityPrettyName(SeverityEnum.High),
         },
         {
           name: SeverityEnum.Medium,
-          displayName: 'Medium',
+          displayName: getSeverityPrettyName(SeverityEnum.Medium),
         },
         {
           name: SeverityEnum.Low,
-          displayName: 'Low',
+          displayName: getSeverityPrettyName(SeverityEnum.Low),
         },
         {
           name: SeverityEnum.Unknown,
-          displayName: 'Unknown',
+          displayName: getSeverityPrettyName(SeverityEnum.Unknown),
         },
       ],
       source: [...data].reverse(),

diff --git a/...apps/dashboard/src/features/secrets/components/scan-results/SecretScanResultsPieChart.tsx b/...apps/dashboard/src/features/secrets/components/scan-results/SecretScanResultsPieChart.tsx
@@ -4,6 +4,7 @@ import { ECOption, ReactECharts } from '@/components/ReactEcharts';
 import { getSeverityChartInnerColorMap, getSeverityColorMap } from '@/constants/charts';
 import { Mode, THEME_DARK, useTheme } from '@/theme/ThemeContext';
 import { SecretSeverityType } from '@/types/common';
+import { SeverityEnum } from '@/utils/enum';
 import { abbreviateNumber } from '@/utils/number';
 
 function getChartOptions({
@@ -47,7 +48,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityChartInnerColorMap(theme)[key as SecretSeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -87,7 +88,7 @@ function getChartOptions({
             itemStyle: {
               color:
                 getSeverityColorMap(theme)[key as SecretSeverityType] ??
-                getSeverityColorMap(theme)['unknown'],
+                getSeverityColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),