From b2e4dfbe498bcce7c50005230b6109388a8ffb23 Mon Sep 17 00:00:00 2001
From: Milan <111341101+milan-deepfence@users.noreply.github.com>
Date: Tue, 11 Jun 2024 18:28:08 +0530
Subject: [PATCH] Added missing severity check and posture status (#2197)

---
 .../dashboard/components/TopRisks.tsx         |  5 +-
 .../components/IntegrationForm.tsx            | 23 +++++----
 .../components/landing/TopNMalwareCard.tsx    | 14 +++---
 .../MalwareScanResultsPieChart.tsx            |  5 +-
 .../pages/landing/MalwareCountsCard.tsx       |  5 +-
 .../onboard/pages/ComplianceScanSummary.tsx   | 50 ++++++++++++++-----
 .../components/landing/SecretsCountsCard.tsx  |  5 +-
 .../components/landing/TopNSecretCard.tsx     | 12 ++---
 .../SecretScanResultsPieChart.tsx             |  5 +-
 .../VulnerabilityScanResultsPieChart.tsx      |  5 +-
 .../components/landing/TopNVulnerableCard.tsx | 12 ++---
 .../landing/VulnerabilitiesCountsCard.tsx     |  9 +++-
 .../apps/dashboard/src/utils/enum.ts          | 24 +++++++++
 13 files changed, 119 insertions(+), 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
index 4b8fda635c..db6784f0d9 100644
--- 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
index e9be01e22c..ebb6b25173 100644
--- 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/deepfence_frontend/apps/dashboard/src/features/malwares/components/landing/TopNMalwareCard.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/components/landing/TopNMalwareCard.tsx
index 5b0b55ebde..86129754eb 100644
--- a/deepfence_frontend/apps/dashboard/src/features/malwares/components/landing/TopNMalwareCard.tsx
+++ b/deepfence_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/deepfence_frontend/apps/dashboard/src/features/malwares/components/scan-results/MalwareScanResultsPieChart.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/components/scan-results/MalwareScanResultsPieChart.tsx
index 5860e1243d..cb0a07477f 100644
--- a/deepfence_frontend/apps/dashboard/src/features/malwares/components/scan-results/MalwareScanResultsPieChart.tsx
+++ b/deepfence_frontend/apps/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
index c6859c2f10..af8f8c0341 100644
--- 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
index f3b472ff59..7042564348 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanSummary.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanSummary.tsx
@@ -3,7 +3,10 @@ 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';
@@ -11,6 +14,7 @@ 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/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/SecretsCountsCard.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/SecretsCountsCard.tsx
index c0801e9295..6a5ef27049 100644
--- a/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/SecretsCountsCard.tsx
+++ b/deepfence_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
index 73a19f861d..f58143c2eb 100644
--- 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/deepfence_frontend/apps/dashboard/src/features/secrets/components/scan-results/SecretScanResultsPieChart.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/components/scan-results/SecretScanResultsPieChart.tsx
index 6aeb04b0bd..835fcc553e 100644
--- a/deepfence_frontend/apps/dashboard/src/features/secrets/components/scan-results/SecretScanResultsPieChart.tsx
+++ b/deepfence_frontend/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],
             },
           };
         }),
diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/ScanResults/VulnerabilityScanResultsPieChart.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/ScanResults/VulnerabilityScanResultsPieChart.tsx
index ec5446ae3b..eda667ad76 100644
--- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/ScanResults/VulnerabilityScanResultsPieChart.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/ScanResults/VulnerabilityScanResultsPieChart.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 { VulnerabilitySeverityType } 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 VulnerabilitySeverityType] ??
-                getSeverityChartInnerColorMap(theme)['unknown'],
+                getSeverityChartInnerColorMap(theme)[SeverityEnum.Unknown],
             },
           };
         }),
@@ -87,7 +88,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/vulnerabilities/components/landing/TopNVulnerableCard.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/TopNVulnerableCard.tsx
index d9a08faeb7..d4eaf2bed2 100644
--- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/TopNVulnerableCard.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/TopNVulnerableCard.tsx
@@ -13,7 +13,7 @@ import { getSeverityColorMap } from '@/constants/charts';
 import { CardHeader } from '@/features/vulnerabilities/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';
 
@@ -51,23 +51,23 @@ function getChartOptions({
         },
         {
           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/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx
index e6d0baf54d..0fe1e6fd58 100644
--- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/VulnerabilitiesCountsCard.tsx
@@ -11,6 +11,7 @@ import { CardHeader } from '@/features/vulnerabilities/components/landing/CardHe
 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';
 
@@ -56,7 +57,9 @@ function getChartOptions({
             value: data[key],
             name: key,
             itemStyle: {
-              color: colorMap[key as VulnerabilitySeverityType] ?? colorMap['unknown'],
+              color:
+                colorMap[key as VulnerabilitySeverityType] ??
+                colorMap[SeverityEnum.Unknown],
             },
           };
         }),
@@ -92,7 +95,9 @@ function getChartOptions({
             value: data[key],
             name: key,
             itemStyle: {
-              color: colorMap[key as VulnerabilitySeverityType] ?? colorMap['unknown'],
+              color:
+                colorMap[key as VulnerabilitySeverityType] ??
+                colorMap[SeverityEnum.Unknown],
             },
           };
         }),
diff --git a/deepfence_frontend/apps/dashboard/src/utils/enum.ts b/deepfence_frontend/apps/dashboard/src/utils/enum.ts
index a719beb4e6..db28513513 100644
--- a/deepfence_frontend/apps/dashboard/src/utils/enum.ts
+++ b/deepfence_frontend/apps/dashboard/src/utils/enum.ts
@@ -20,6 +20,10 @@ export const SeverityEnumList = [
   SeverityEnum.Low,
   SeverityEnum.Unknown,
 ] as const;
+
+type SeverityKeyType = keyof typeof SeverityEnum;
+export type SeverityValueType = (typeof SeverityEnum)[SeverityKeyType];
+
 export function getBenchmarkPrettyName(backendBenchmark: ModelBenchmarkType) {
   switch (backendBenchmark) {
     case ModelBenchmarkType.Cis:
@@ -71,3 +75,23 @@ export function getPostureStatusPrettyName(
       throw new Error(`Unhandled case: ${_exhaustiveCheck}`);
   }
 }
+
+export function getSeverityPrettyName(severity: SeverityValueType) {
+  switch (severity) {
+    case SeverityEnum.Critical:
+      return 'Critical';
+    case SeverityEnum.High:
+      return 'High';
+    case SeverityEnum.Medium:
+      return 'Medium';
+    case SeverityEnum.Low:
+      return 'Low';
+    case SeverityEnum.Unknown:
+      return 'Unknown';
+
+    default:
+      // eslint-disable-next-line no-case-declarations
+      const _exhaustiveCheck: never = severity;
+      throw new Error(`Unhandled case: ${_exhaustiveCheck}`);
+  }
+}