From ad5ff9706234a8e07d069437752ae33f44b12a91 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Mon, 28 Jul 2025 16:04:17 +0200
Subject: [PATCH] POC

---
 .../shared/project_security_dashboard_new.vue | 13 ++++-
 .../vulnerabilities_severity_count_panel.vue  | 50 +++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 ee/app/assets/javascripts/security_dashboard/components/shared/vulnerabilities_severity_count_panel.vue

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
index 0de6b407c1d8bc..254450bafbfee9 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_dashboard_new.vue
@@ -3,6 +3,7 @@ import { GlDashboardLayout } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { markRaw } from '~/lib/utils/vue3compat/mark_raw';
 import ProjectVulnerabilitiesOverTimePanel from 'ee/security_dashboard/components/shared/project_vulnerabilities_over_time_panel.vue';
+import VulnerabilitiesSeverityCountPanel from 'ee/security_dashboard/components/shared/vulnerabilities_severity_count_panel.vue';
 
 export default {
   components: {
@@ -17,13 +18,23 @@ export default {
           'SecurityReports|This dashboard provides an overview of your security vulnerabilities.',
         ),
         panels: [
+          {
+            id: '2',
+            component: markRaw(VulnerabilitiesSeverityCountPanel),
+            gridAttributes: {
+              width: 12,
+              height: 1,
+              yPos: 0,
+              xPos: 0,
+            },
+          },
           {
             id: '1',
             component: markRaw(ProjectVulnerabilitiesOverTimePanel),
             gridAttributes: {
               width: 6,
               height: 4,
-              yPos: 0,
+              yPos: 1,
               xPos: 0,
             },
           },
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerabilities_severity_count_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerabilities_severity_count_panel.vue
new file mode 100644
index 00000000000000..05d8126cac726b
--- /dev/null
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerabilities_severity_count_panel.vue
@@ -0,0 +1,50 @@
+<script>
+import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
+import { SEVERITIES } from 'ee/vulnerabilities/constants';
+
+export default {
+  name: 'VulnerabilitiesSeverityCountPanel',
+  components: {
+    ExtendedDashboardPanel,
+  },
+  data() {
+    return {
+      counts: {
+        critical: 5,
+        high: 12,
+        medium: 28,
+        low: 45,
+        info: 8,
+        unknown: 2,
+      },
+    };
+  },
+  computed: {
+    severityCounts() {
+      return SEVERITIES.map((severity) => ({
+        severity,
+        count: this.counts[severity] || 0,
+      }));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-gap-2">
+    <extended-dashboard-panel
+      v-for="severity in severityCounts"
+      :key="severity.severity"
+      :title="severity.severity"
+      :loading="false"
+      :show-alert-state="false"
+      class="gl-flex-1"
+    >
+      <template #body>
+        <div>
+          <span>{{ severity.count }}</span>
+        </div>
+      </template>
+    </extended-dashboard-panel>
+  </div>
+</template>
-- 
GitLab