From 8c1b065fca6ef094606c3fc1414d6e88a71b2001 Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@suse.com>
Date: Mon, 27 Apr 2026 14:11:31 -0700
Subject: [PATCH] feat(#218): Add Critical CVE Severity to support CVSS v3
 scores 9.0-10.0

Adds Critical labeling to all `Severity`-related data and filtering options
---
 .../Dashboard/buttons/ExposureReport.vue      |  1 +
 .../BarChart4TopVulnerableContainers.vue      | 13 +++++++
 .../charts/BarChart4TopVulnerableHosts.vue    | 13 +++++++
 .../Dashboard/grids/ExposureGrid.vue          | 13 ++++---
 .../components/Dashboard/panels/Exposures.vue |  1 +
 .../charts/TopVulnerableImagesBarChart.vue    | 13 +++++++
 .../charts/TopVulnerableNodesBarChart.vue     | 13 +++++++
 .../contents/VulnerabilityItemsChart.vue      |  7 ++--
 .../dialogs/AdvancedFilterModal.vue           |  1 +
 .../VulnerabilityScoreCellComponent.vue       | 36 +++++++++++++++++--
 .../components/common/dialogs/NodeInfo.vue    |  8 ++++-
 .../components/common/dialogs/PodInfo.vue     |  8 ++++-
 .../components/ImpactModalNodeBrief.vue       |  7 +++-
 .../components/ImpactModalWorkloadBrief.vue   |  7 +++-
 .../common/grids/VulnerabilitiesGrid.vue      |  9 +++--
 .../formatters/NodeVulnerabilitySummary.vue   |  1 +
 pkg/neuvector-ui-ext/l10n/en-us.yaml          | 12 +++++--
 .../plugins/vulnerabilities-csv-class.js      |  4 +++
 pkg/neuvector-ui-ext/styles/neuvector.scss    |  4 +++
 pkg/neuvector-ui-ext/types/neuvector.ts       |  6 ++--
 pkg/neuvector-ui-ext/types/vulnerabilities.ts |  2 ++
 pkg/neuvector-ui-ext/utils/response-rules.ts  |  2 +-
 22 files changed, 160 insertions(+), 21 deletions(-)

diff --git a/pkg/neuvector-ui-ext/components/Dashboard/buttons/ExposureReport.vue b/pkg/neuvector-ui-ext/components/Dashboard/buttons/ExposureReport.vue
index b8eb2f1f..71c61845 100644
--- a/pkg/neuvector-ui-ext/components/Dashboard/buttons/ExposureReport.vue
+++ b/pkg/neuvector-ui-ext/components/Dashboard/buttons/ExposureReport.vue
@@ -36,6 +36,7 @@ export default {
                 Direction: direction,
                 Service: exposure.service,
                 Pod: exposure.pod_name,
+                'Critical Vuls': exposure.critical,
                 'High Vuls': exposure.high,
                 'Medium Vuls': exposure.medium,
                 'Policy Mode': exposure.policy_mode,
diff --git a/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue b/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue
index b2ee18d8..a47cc807 100644
--- a/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue
+++ b/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue
@@ -41,9 +41,11 @@
       setup(props) {
         let isEmptyData = ref(false);
         let topVulnerableAssetsLabel = new Array(5);
+        let topCriticalVulnerableAssetsData = new Array(5);
         let topHighVulnerableAssetsData = new Array(5);
         let topMediumVulnerableAssetsData = new Array(5);
         topVulnerableAssetsLabel.fill('');
+        topCriticalVulnerableAssetsData.fill(0);
         topHighVulnerableAssetsData.fill(0);
         topMediumVulnerableAssetsData.fill(0);
         if (props.topVulContainers.top5Containers.length === 0) {
@@ -52,6 +54,7 @@
           isEmptyData.value = false;
           props.topVulContainers.top5Containers.forEach((asset, index) => {
             topVulnerableAssetsLabel[index] = asset.display_name;
+            topCriticalVulnerableAssetsData[index] = asset.critical4Dashboard;
             topHighVulnerableAssetsData[index] = asset.high4Dashboard;
             topMediumVulnerableAssetsData[index] = asset.medium4Dashboard;
           });
@@ -59,6 +62,16 @@
         const chartData = ref({
           labels: topVulnerableAssetsLabel,
           datasets: [
+            {
+              data: topCriticalVulnerableAssetsData,
+              label: props.parentContext.t('enum.CRITICAL'),
+              backgroundColor: 'rgba(233, 30, 99, 0.3)',
+              borderColor: '#e91e63',
+              hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
+              hoverBorderColor: '#e91e63',
+              barThickness: 8,
+              borderWidth: 2,
+            },
             {
               data: topHighVulnerableAssetsData,
               label: props.parentContext.t('enum.HIGH'),
diff --git a/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableHosts.vue b/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableHosts.vue
index e1e3d42c..d040421c 100644
--- a/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableHosts.vue
+++ b/pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableHosts.vue
@@ -34,9 +34,11 @@
       setup(props) {
         let isEmptyData = ref(false);
         let topVulnerableAssetsLabel = new Array(5);
+        let topCriticalVulnerableAssetsData = new Array(5);
         let topHighVulnerableAssetsData = new Array(5);
         let topMediumVulnerableAssetsData = new Array(5);
         topVulnerableAssetsLabel.fill('');
+        topCriticalVulnerableAssetsData.fill(0);
         topHighVulnerableAssetsData.fill(0);
         topMediumVulnerableAssetsData.fill(0);
         if (props.topVulHosts.top5Nodes.length === 0) {
@@ -45,6 +47,7 @@
           isEmptyData.value = false;
           props.topVulHosts.top5Nodes.forEach((asset, index) => {
             topVulnerableAssetsLabel[index] = asset.name;
+            topCriticalVulnerableAssetsData[index] = asset.scan_summary.critical;
             topHighVulnerableAssetsData[index] = asset.scan_summary.high;
             topMediumVulnerableAssetsData[index] = asset.scan_summary.medium;
           });
@@ -52,6 +55,16 @@
         const chartData = ref({
           labels: topVulnerableAssetsLabel,
           datasets: [
+            {
+              data: topCriticalVulnerableAssetsData,
+              label: props.parentContext.t('enum.CRITICAL'),
+              backgroundColor: 'rgba(233, 30, 99, 0.3)',
+              borderColor: '#e91e63',
+              hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
+              hoverBorderColor: '#e91e63',
+              barThickness: 8,
+              borderWidth: 2,
+            },
             {
               data: topHighVulnerableAssetsData,
               label: props.parentContext.t('enum.HIGH'),
diff --git a/pkg/neuvector-ui-ext/components/Dashboard/grids/ExposureGrid.vue b/pkg/neuvector-ui-ext/components/Dashboard/grids/ExposureGrid.vue
index 3c10b829..bb283442 100644
--- a/pkg/neuvector-ui-ext/components/Dashboard/grids/ExposureGrid.vue
+++ b/pkg/neuvector-ui-ext/components/Dashboard/grids/ExposureGrid.vue
@@ -78,15 +78,16 @@ const vueApp = createApp({});
           cellRenderer: params => {
             if (params && params.data) {
               return (
-                `<span class="nv-badge nv-badge-danger">${params.data.high}</span>
+                `<span class="nv-badge nv-badge-critical">${params.data.critical}</span>
+                <span class="nv-badge nv-badge-danger">${params.data.high}</span>
                 <span class="nv-badge nv-badge-warning">${params.data.medium}</span>`
               );
             }
             return '';
           },
-          width: 110,
-          maxWidth: 110,
-          minWidth: 110,
+          width: 130,
+          maxWidth: 130,
+          minWidth: 130,
           sortable: false,
         },
         {
@@ -186,6 +187,10 @@ const vueApp = createApp({});
     margin-left: 8px;
     padding: 4px 8px;
   }
+  .nv-badge-critical {
+    background-color: #E91E63;
+    color: #fff;
+  }
   .nv-badge-danger {
     background-color: #c5161f;
     color: #fff;
diff --git a/pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue b/pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue
index 0021431a..21ae130f 100644
--- a/pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue
+++ b/pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue
@@ -76,6 +76,7 @@ export default {
                     peerEndpoint: '',
                     service: k,
                     policy_mode: v[0].policy_mode,
+                    critical: v[0].critical,
                     high: v[0].high,
                     medium: v[0].medium,
                     workload: '',
diff --git a/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableImagesBarChart.vue b/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableImagesBarChart.vue
index 057bff55..c3a54add 100644
--- a/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableImagesBarChart.vue
+++ b/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableImagesBarChart.vue
@@ -27,15 +27,18 @@
         },
         setup(props) {
             let topVulnerableAssetsLabel = new Array(5);
+            let topCriticalVulnerableAssetsData = new Array(5);
             let topHighVulnerableAssetsData = new Array(5);
             let topMediumVulnerableAssetsData = new Array(5);
             let topLowVulnerableAssetsData = new Array(5);
             topVulnerableAssetsLabel.fill('');
+            topCriticalVulnerableAssetsData.fill(0);
             topHighVulnerableAssetsData.fill(0);
             topMediumVulnerableAssetsData.fill(0);
             topLowVulnerableAssetsData.fill(0);
             props.topVulImages.forEach((asset, index) => {
                 topVulnerableAssetsLabel[index] = asset.display_name;
+                topCriticalVulnerableAssetsData[index] = asset.critical;
                 topHighVulnerableAssetsData[index] = asset.high;
                 topMediumVulnerableAssetsData[index] = asset.medium;
                 topLowVulnerableAssetsData[index] = asset.low;
@@ -43,6 +46,16 @@
             const chartData = ref({
                 labels: topVulnerableAssetsLabel,
                 datasets: [
+                {
+                    data: topCriticalVulnerableAssetsData,
+                    label: props.parentContext.t('enum.CRITICAL'),
+                    backgroundColor: 'rgba(233, 30, 99, 0.3)',
+                    borderColor: '#e91e63',
+                    hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
+                    hoverBorderColor: '#e91e63',
+                    barThickness: 8,
+                    borderWidth: 2,
+                },
                 {
                     data: topHighVulnerableAssetsData,
                     label: props.parentContext.t('enum.HIGH'),
diff --git a/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableNodesBarChart.vue b/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableNodesBarChart.vue
index b9c88ff0..571f5b7b 100644
--- a/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableNodesBarChart.vue
+++ b/pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableNodesBarChart.vue
@@ -27,15 +27,18 @@
         },
         setup(props) {
             let topVulnerableAssetsLabel = new Array(5);
+            let topCriticalVulnerableAssetsData = new Array(5);
             let topHighVulnerableAssetsData = new Array(5);
             let topMediumVulnerableAssetsData = new Array(5);
             let topLowVulnerableAssetsData = new Array(5);
             topVulnerableAssetsLabel.fill('');
+            topCriticalVulnerableAssetsData.fill(0);
             topHighVulnerableAssetsData.fill(0);
             topMediumVulnerableAssetsData.fill(0);
             topLowVulnerableAssetsData.fill(0);
             props.topVulHosts.forEach((asset, index) => {
                 topVulnerableAssetsLabel[index] = asset.display_name;
+                topCriticalVulnerableAssetsData[index] = asset.critical;
                 topHighVulnerableAssetsData[index] = asset.high;
                 topMediumVulnerableAssetsData[index] = asset.medium;
                 topLowVulnerableAssetsData[index] = asset.low;
@@ -43,6 +46,16 @@
             const chartData = ref({
                 labels: topVulnerableAssetsLabel,
                 datasets: [
+                {
+                    data: topCriticalVulnerableAssetsData,
+                    label: props.parentContext.t('enum.CRITICAL'),
+                    backgroundColor: 'rgba(233, 30, 99, 0.3)',
+                    borderColor: '#e91e63',
+                    hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
+                    hoverBorderColor: '#e91e63',
+                    barThickness: 8,
+                    borderWidth: 2,
+                },
                 {
                     data: topHighVulnerableAssetsData,
                     label: props.parentContext.t('enum.HIGH'),
diff --git a/pkg/neuvector-ui-ext/components/Vulnerabilities/contents/VulnerabilityItemsChart.vue b/pkg/neuvector-ui-ext/components/Vulnerabilities/contents/VulnerabilityItemsChart.vue
index d555f511..5f44e5a3 100644
--- a/pkg/neuvector-ui-ext/components/Vulnerabilities/contents/VulnerabilityItemsChart.vue
+++ b/pkg/neuvector-ui-ext/components/Vulnerabilities/contents/VulnerabilityItemsChart.vue
@@ -14,12 +14,13 @@ export default  defineComponent({
     },
     setup(props) {
         const targetDistChartData = ref({
-            labels: [['High'], ['Medium'], ['Low']],
+            labels: [['Critical'], ['High'], ['Medium'], ['Low']],
             datasets: [
                 {
-                    hoverBackgroundColor: ['#ef5350', '#ff9800', '#4caf50'],
-                    backgroundColor: ['#ef5350', '#ff9800', '#4caf50'],
+                    hoverBackgroundColor: ['#e91e63', '#ef5350', '#ff9800', '#4caf50'],
+                    backgroundColor: ['#e91e63', '#ef5350', '#ff9800', '#4caf50'],
                     data: [
+                        props.countDistribution.critical,
                         props.countDistribution.high,
                         props.countDistribution.medium,
                         props.countDistribution.low,
diff --git a/pkg/neuvector-ui-ext/components/Vulnerabilities/dialogs/AdvancedFilterModal.vue b/pkg/neuvector-ui-ext/components/Vulnerabilities/dialogs/AdvancedFilterModal.vue
index 2fe9e819..12bc5228 100644
--- a/pkg/neuvector-ui-ext/components/Vulnerabilities/dialogs/AdvancedFilterModal.vue
+++ b/pkg/neuvector-ui-ext/components/Vulnerabilities/dialogs/AdvancedFilterModal.vue
@@ -103,6 +103,7 @@
             ],
             severityOptions: [
               { label: this.t('setting.ALL'), value: 'all' },
+              { label: this.t('enum.CRITICAL'), value: 'critical' },
               { label: this.t('enum.HIGH'), value: 'high' },
               { label: this.t('enum.MEDIUM'), value: 'medium' },
               { label: this.t('enum.LOW'), value: 'low' },
diff --git a/pkg/neuvector-ui-ext/components/Vulnerabilities/grids/components/VulnerabilityScoreCellComponent.vue b/pkg/neuvector-ui-ext/components/Vulnerabilities/grids/components/VulnerabilityScoreCellComponent.vue
index b05002ae..face66e2 100644
--- a/pkg/neuvector-ui-ext/components/Vulnerabilities/grids/components/VulnerabilityScoreCellComponent.vue
+++ b/pkg/neuvector-ui-ext/components/Vulnerabilities/grids/components/VulnerabilityScoreCellComponent.vue
@@ -2,7 +2,21 @@
 <template>
     <div v-if="params.node.data">
         <template v-if="params.type === 'V3'">
-            <template v-if="params.node.data.severity === 'High'">
+            <template v-if="params.node.data.severity === 'Critical'">
+                <div class="progress">
+                    <div
+                    :aria-valuenow="params.node.data.score_v3"
+                    :style="'width: ' + params.node.data.score_v3 * 10 + '%'"
+                    aria-valuemax="10"
+                    aria-valuemin="0"
+                    aria-label="Score(V3)"
+                    class="progress-bar bg-pink"
+                    role="progressbar">
+                        {{ params.node.data.score_v3 }}
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="params.node.data.severity === 'High'">
                 <div class="progress">
                     <div
                     :aria-valuenow="params.node.data.score_v3"
@@ -46,7 +60,21 @@
             </template>
         </template>
         <template v-else-if="params.type === 'V2'">
-            <template v-if="params.node.data.severity === 'High'">
+            <template v-if="params.node.data.severity === 'Critical'">
+                <div class="progress">
+                    <div
+                    :aria-valuenow="params.node.data.score"
+                    :style="'width: ' + params.node.data.score * 10 + '%'"
+                    aria-valuemax="10"
+                    aria-valuemin="0"
+                    aria-label="Score"
+                    class="progress-bar bg-pink"
+                    role="progressbar">
+                        {{ params.node.data.score }}
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="params.node.data.severity === 'High'">
                 <div class="progress">
                     <div
                     :aria-valuenow="params.node.data.score"
@@ -136,6 +164,10 @@ export default {
         background-color: #f44336 !important;
     }
 
+    .bg-pink {
+        background-color: #E91E63 !important;
+    }
+
     .bg-warning {
         background-color: #ff9800 !important;
     }
diff --git a/pkg/neuvector-ui-ext/components/common/dialogs/NodeInfo.vue b/pkg/neuvector-ui-ext/components/common/dialogs/NodeInfo.vue
index 37bfdb4a..82861fbd 100644
--- a/pkg/neuvector-ui-ext/components/common/dialogs/NodeInfo.vue
+++ b/pkg/neuvector-ui-ext/components/common/dialogs/NodeInfo.vue
@@ -139,6 +139,11 @@ import { capitalize, getSSOUrl, parseDatetimeStr } from '../../../utils/common';
                                     {{ t('group.gridHeader.VULNERABILITIES') }}:
                                 </span>
                                 <div class="d-inline">
+                                    <span
+                                        v-if="host.scan_summary?.critical"
+                                        class="badge badge-critical mr-sm">
+                                        {{ host.scan_summary.critical }}
+                                    </span>
                                     <span
                                         v-if="host.scan_summary?.high"
                                         class="badge badge-danger mr-sm">
@@ -151,13 +156,14 @@ import { capitalize, getSSOUrl, parseDatetimeStr } from '../../../utils/common';
                                         {{ host.scan_summary.low }}
                                     </span>
                                     <a
-                                        v-if="host.scan_summary?.high || host.scan_summary?.medium"
+                                        v-if="host.scan_summary?.critical || host.scan_summary?.high || host.scan_summary?.medium"
                                         style="display: table-cell; font-size: 11px; line-height: 15px">
                                         <em class="icon-external-link" target="_blank" @click="goToNvNodes()"></em>
                                     </a>
                                     <label
                                         v-if="
                                         host.scan_summary?.scanned_at &&
+                                        host.scan_summary?.critical === 0 &&
                                         host.scan_summary?.high === 0 &&
                                         host.scan_summary?.medium === 0
                                         "
diff --git a/pkg/neuvector-ui-ext/components/common/dialogs/PodInfo.vue b/pkg/neuvector-ui-ext/components/common/dialogs/PodInfo.vue
index 31846ccd..42be927f 100644
--- a/pkg/neuvector-ui-ext/components/common/dialogs/PodInfo.vue
+++ b/pkg/neuvector-ui-ext/components/common/dialogs/PodInfo.vue
@@ -233,6 +233,11 @@ import { shortenString } from '../../../utils/common';
                                         {{ t('group.gridHeader.VULNERABILITIES') }}:
                                     </span>
                                     <div class="pod-item-value d-inline">
+                                        <span
+                                            v-if="workload.scan_summary.critical"
+                                            class="badge badge-critical mr-sm">
+                                            {{ workload.scan_summary.critical }}
+                                        </span>
                                         <span
                                             v-if="workload.scan_summary.high"
                                             class="badge badge-danger mr-sm">
@@ -242,7 +247,7 @@ import { shortenString } from '../../../utils/common';
                                             {{ workload.scan_summary.medium }}
                                         </span>
                                         <a
-                                            v-if="workload.scan_summary.high || workload.scan_summary.medium"
+                                            v-if="workload.scan_summary.critical || workload.scan_summary.high || workload.scan_summary.medium"
                                             style="display: table-cell; font-size: 11px; line-height: 15px">
                                             <em class="fa fa-external-link ml-lg"></em>
                                         </a>
@@ -250,6 +255,7 @@ import { shortenString } from '../../../utils/common';
                                         <span
                                             v-if="
                                             workload.scan_summary.scanned_at &&
+                                            workload.scan_summary.critical === 0 &&
                                             workload.scan_summary.high === 0 &&
                                             workload.scan_summary.medium === 0
                                             "
diff --git a/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalNodeBrief.vue b/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalNodeBrief.vue
index edad40bd..526746e6 100644
--- a/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalNodeBrief.vue
+++ b/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalNodeBrief.vue
@@ -128,6 +128,10 @@ export default {
                         {{ t('group.gridHeader.VULNERABILITIES') }}:
                     </span>
                     <div class="d-inline">
+                        <span v-if="host.scan_summary?.critical"
+                            class="badge badge-critical mr-sm">
+                            {{ host.scan_summary.critical }}
+                        </span>
                         <span v-if="host.scan_summary?.high"
                             class="badge badge-danger mr-sm">
                             {{ host.scan_summary.high }}
@@ -138,12 +142,13 @@ export default {
                         <span v-if="host.scan_summary?.low" class="badge badge-success">
                             {{ host.scan_summary.low }}
                         </span>
-                        <a v-if="host.scan_summary?.high || host.scan_summary?.medium"
+                        <a v-if="host.scan_summary?.critical || host.scan_summary?.high || host.scan_summary?.medium"
                             @click="goToNvHosts()"
                             style="display: table-cell; font-size: 11px; line-height: 15px; cursor: pointer;">
                             <EOS_LAUNCH_FILLED size="base" color="#3D98D3"></EOS_LAUNCH_FILLED>
                         </a>
                         <label v-if="host.scan_summary?.scanned_at &&
+                                host.scan_summary?.critical === 0 &&
                                 host.scan_summary?.high === 0 &&
                                 host.scan_summary?.medium === 0"
                             class="label label-success-tran">
diff --git a/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalWorkloadBrief.vue b/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalWorkloadBrief.vue
index a6202e5e..5d4a706b 100644
--- a/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalWorkloadBrief.vue
+++ b/pkg/neuvector-ui-ext/components/common/dialogs/components/ImpactModalWorkloadBrief.vue
@@ -209,6 +209,10 @@ export default {
                             {{ t('group.gridHeader.VULNERABILITIES') }}:
                         </span>
                         <div class="pod-item-value d-inline">
+                            <span v-if="workload.scan_summary.critical"
+                                class="badge badge-critical mr-sm">
+                                {{ workload.scan_summary.critical }}
+                            </span>
                             <span v-if="workload.scan_summary.high"
                                 class="badge badge-danger mr-sm">
                                 {{ workload.scan_summary.high }}
@@ -216,11 +220,12 @@ export default {
                             <span v-if="workload.scan_summary.medium" class="badge badge-warning">
                                 {{ workload.scan_summary.medium }}
                             </span>
-                            <a v-if="workload.scan_summary.high || workload.scan_summary.medium"
+                            <a v-if="workload.scan_summary.critical || workload.scan_summary.high || workload.scan_summary.medium"
                                 style="display: table-cell; font-size: 11px; line-height: 15px">
                                 <em class="fa fa-external-link ml-lg"></em>
                             </a>
                             <span v-if="workload.scan_summary.scanned_at &&
+                                    workload.scan_summary.critical === 0 &&
                                     workload.scan_summary.high === 0 &&
                                     workload.scan_summary.medium === 0"
                                 class="badge badge-success">
diff --git a/pkg/neuvector-ui-ext/components/common/grids/VulnerabilitiesGrid.vue b/pkg/neuvector-ui-ext/components/common/grids/VulnerabilitiesGrid.vue
index 6a63957e..feb586e7 100644
--- a/pkg/neuvector-ui-ext/components/common/grids/VulnerabilitiesGrid.vue
+++ b/pkg/neuvector-ui-ext/components/common/grids/VulnerabilitiesGrid.vue
@@ -92,10 +92,11 @@
         computed: {
           vulnerbilityCount() {
             return this.vulnerabilities.reduce((cnt, vul) => {
+              cnt.critical += vul.severity.toLowerCase() === 'critical' ? 1 : 0;
               cnt.high += vul.severity.toLowerCase() === 'high' ? 1 : 0;
               cnt.medium += vul.severity.toLowerCase() === 'medium' ? 1 : 0;
               return cnt;
-            }, {high: 0, medium: 0});
+            }, {critical: 0, high: 0, medium: 0});
           }
         }
     };
@@ -106,6 +107,10 @@
     <div v-if="vulnerabilities.length > 0" class="download-btn">
       <DownloadVulnerabilititesCSV class="pull-left" :csvFileName="csvFileName" :vulnerabilities="vulnerabilities"></DownloadVulnerabilititesCSV>
       <div class="pull-left" style="margin-top: -3px;">
+        <div class="vul-cnt row">
+          <span class="pl-2 pr-2 col-6 badge badge-critical">Critical</span>
+          <span class="col-6">{{ vulnerbilityCount.critical }}</span>
+        </div>
         <div class="vul-cnt row">
           <span class="pl-2 pr-2 col-6 badge badge-danger">High</span>
           <span class="col-6">{{ vulnerbilityCount.high }}</span>
@@ -135,7 +140,7 @@
 
       <template #col:severity="{row}">
         <td>
-          <span :class="'pl-2 pr-2 badge ' + (row.severity.toLowerCase() === 'high' ? 'badge-danger' : 'badge-warning')">{{ row.severity || '-' }}</span>
+          <span :class="'pl-2 pr-2 badge ' + (row.severity.toLowerCase() === 'critical' ? 'badge-critical' : row.severity.toLowerCase() === 'high' ? 'badge-danger' : 'badge-warning')">{{ row.severity || '-' }}</span>
         </td>
       </template>
 
diff --git a/pkg/neuvector-ui-ext/formatters/NodeVulnerabilitySummary.vue b/pkg/neuvector-ui-ext/formatters/NodeVulnerabilitySummary.vue
index 192d66f0..f91d566d 100644
--- a/pkg/neuvector-ui-ext/formatters/NodeVulnerabilitySummary.vue
+++ b/pkg/neuvector-ui-ext/formatters/NodeVulnerabilitySummary.vue
@@ -43,6 +43,7 @@ export default {
 <template>
   <div v-if="canShow && embededRow && embededRow.scanSummary">
     <div class="link" @click="openNodeDetailsDialog()">
+      <span class="badge badge-critical">{{ embededRow.scanSummary.critical }}</span>
       <span class="badge badge-danger">{{ embededRow.scanSummary.high }}</span>
       <span class="badge badge-warning">{{ embededRow.scanSummary.medium }}</span>
     </div>
diff --git a/pkg/neuvector-ui-ext/l10n/en-us.yaml b/pkg/neuvector-ui-ext/l10n/en-us.yaml
index afa4a20f..ccf55622 100644
--- a/pkg/neuvector-ui-ext/l10n/en-us.yaml
+++ b/pkg/neuvector-ui-ext/l10n/en-us.yaml
@@ -1407,6 +1407,7 @@ scan:
     IMAGE: Image
     STATUS: Scan Status
     RESULT: Result
+    CRITICAL: Critical
     HIGH: High
     MEDIUM: Medium
     SEVERITY: Severity
@@ -1866,6 +1867,8 @@ audit:
     VERSION: Version
     HIGH_VUL_CNT: High
     MEDIUM_VUL_CNT: Medium
+    CRITICAL_VUL_CNT: Critical
+    CRITICAL_VUL: Critical Vulnerabilities
     HIGH_VUL: High Vulnerabilities
     MEDIUM_VUL: Medium Vulnerabilities
     CVE_DB_VERSION: CVE DB Version
@@ -2910,9 +2913,13 @@ admissionControl:
     BASE_IMAGE: Base Image
     CVE_NAMES: CVE names
     CVE_SEVERITY: CVE severity
-    CVE_HIGH_COUNT: Count of high severity CVE
-    CVE_HIGH_WITH_FIX_COUNT: Count of high severity CVE with fix
+    CVE_HIGH_COUNT: Count of critical and high severity CVE
+    CVE_HIGH_WITH_FIX_COUNT: Count of critical and high severity CVE with fix
     CVE_MEDIUM_COUNT: Count of medium severity CVE
+    CVE_CRITICAL_COUNT: Count of critical severity CVE
+    CVE_CRITICAL_WITH_FIX_COUNT: Count of critical severity CVE with fix
+    CVE_HIGH_COUNT_NO_CRITICAL: Count of high severity CVE
+    CVE_HIGH_WITH_FIX_COUNT_NO_CRITICAL: Count of high severity CVE with fix
     CVE_SCORE: CVE score
     IMAGE_SCANNED: Image scanned
     IMAGE_SIGNED: Image signed
@@ -2985,6 +2992,7 @@ admissionControl:
     HIGH: high
     MEDIUM: medium
     LOW: low
+    CRITICAL: critical
     NONE: none
     DAYS: days
     CORE: Core(s)
diff --git a/pkg/neuvector-ui-ext/plugins/vulnerabilities-csv-class.js b/pkg/neuvector-ui-ext/plugins/vulnerabilities-csv-class.js
index ea168861..cecebb92 100644
--- a/pkg/neuvector-ui-ext/plugins/vulnerabilities-csv-class.js
+++ b/pkg/neuvector-ui-ext/plugins/vulnerabilities-csv-class.js
@@ -303,6 +303,7 @@ const prepareContainersData = (workloads) => {
             'Policy Mode': workload.policy_mode,
             'Image': workload.image,
             'Applications': workload.applications,
+            'Critical': workload.critical,
             'High': workload.high,
             'Medium': workload.medium,
             'Low': workload.low,
@@ -323,6 +324,7 @@ const prepareNodesData = (nodes) => {
             'Kernel': node.kernel,
             'Memory': formatBytes(node.memory),
             'Policy Mode': node.policy_mode,
+            'Critical': node.critical,
             'High': node.high,
             'Medium': node.medium,
             'Low': node.low,
@@ -338,6 +340,7 @@ const preparePlatformsData = (platforms) => {
             'Name': platform.name,
             'Version': platform.version,
             'Base OS': platform.base_os,
+            'Critical': platform.critical,
             'High': platform.high,
             'Medium': platform.medium,
             'Low': platform.low,
@@ -352,6 +355,7 @@ const prepareImagesData = (images) => {
         return {
             'Name': image.platform,
             'ID': image.id,
+            'Critical': image.critical,
             'High': image.high,
             'Medium': image.medium,
             'Low': image.low,
diff --git a/pkg/neuvector-ui-ext/styles/neuvector.scss b/pkg/neuvector-ui-ext/styles/neuvector.scss
index aed7da2f..4ed0f253 100644
--- a/pkg/neuvector-ui-ext/styles/neuvector.scss
+++ b/pkg/neuvector-ui-ext/styles/neuvector.scss
@@ -168,6 +168,10 @@
   }
 
 
+.badge-critical {
+  background-color: #E91E63;
+  color: #fff;
+}
 .badge-danger {
   background-color: $mdc-red-400;
   color: #fff;
diff --git a/pkg/neuvector-ui-ext/types/neuvector.ts b/pkg/neuvector-ui-ext/types/neuvector.ts
index fd420ee0..43bd9f79 100644
--- a/pkg/neuvector-ui-ext/types/neuvector.ts
+++ b/pkg/neuvector-ui-ext/types/neuvector.ts
@@ -515,8 +515,8 @@ export const NV_MAP = {
     error: 'pink',
     Error: 'pink',
     ERROR: 'pink',
-    Critical: 'danger',
-    critical: 'danger',
+    Critical: 'pink',
+    critical: 'pink',
     Alert: 'pink',
     Emergency: 'danger',
     Low: 'success',
@@ -624,7 +624,7 @@ export const NV_MAP = {
   responseRuleCriteriaSampleMap: {
     'security-event': 'level:Critical, name:Container.Suspicious.Process',
     'cve-report':
-      'name:Container.Scan.Report, cve-name:cve-2018-12345, cve-high:1, cve-medium:1, cve-high-with-fix:23 (fixed high vulnerability > 23), cve-high-with-fix:23/30 (fixed high vulnerability > 23 and reported 30 days ago)',
+      'name:Container.Scan.Report, cve-name:cve-2018-12345, cve-critical:1, cve-high:1 (Legacy severity level including critical and high), cve-high-only:1, cve-medium:1, cve-high-with-fix:23 (fixed high vulnerability >= 23), cve-high-with-fix:23/30 (fixed high vulnerability >= 23 and reported 30 days ago)',
     event: 'name:Container.Stop, level:Emergency',
     compliance: 'level:Warning, name:D.5.4, name:Compliance.Image.Violation',
     'admission-control':
diff --git a/pkg/neuvector-ui-ext/types/vulnerabilities.ts b/pkg/neuvector-ui-ext/types/vulnerabilities.ts
index 2214b1f6..a899101e 100644
--- a/pkg/neuvector-ui-ext/types/vulnerabilities.ts
+++ b/pkg/neuvector-ui-ext/types/vulnerabilities.ts
@@ -14,12 +14,14 @@ export interface VulnerabilitiesQuerySummary {
 export interface VulnerabilitiesQuerySummaryTopAsset {
   index: number;
   display_name: string;
+  critical: number;
   high: number;
   medium: number;
   low: number;
 }
 
 export interface VulnerabilitiesQuerySummaryDistribution {
+  critical: number;
   high: number;
   medium: number;
   low: number;
diff --git a/pkg/neuvector-ui-ext/utils/response-rules.ts b/pkg/neuvector-ui-ext/utils/response-rules.ts
index 23ba90e8..f64eeb66 100644
--- a/pkg/neuvector-ui-ext/utils/response-rules.ts
+++ b/pkg/neuvector-ui-ext/utils/response-rules.ts
@@ -29,7 +29,7 @@ export function getPattern(event: string, store: Store<any>) {
     let conditionOptions = store.getters['neuvector/responseRuleConditionOptions'];
     conditionOptions[event].types.forEach((type: string) => {
         if (type !== 'level' && type !== 'name') {
-            if (type === 'cve-high' || type === 'item') {
+            if (type === 'cve-critical' || type === 'cve-high' || type === 'item') {
                 pattern.push(`^${type}:[0-9]+[\.][0-9]+$|^${type}:[0-9]+$`);
             } else {
                 pattern.push(`^${type}:.+$`);