From 9529c639b9f0ce61fa31f9850d2ca539e4970aba Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Mon, 4 Aug 2025 23:00:54 +0200
Subject: [PATCH 01/10] WIP

---
 .../charts/open_vulnerabilities_over_time.vue | 41 +++++++++++-
 .../group_vulnerabilities_over_time_panel.vue | 63 +++++++++++++++++--
 2 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
index eee49d656745b8..080d00eb7f49df 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
@@ -58,9 +58,48 @@ export default {
       };
     },
   },
+  watch: {
+    chartSeries: {
+      handler(newSeries, oldSeries) {
+        if (!this.chart) return;
+
+        // // Check if series were removed (length decreased or series names changed)
+        const hasSeriesRemoved = newSeries.length < oldSeries?.length;
+
+        if (hasSeriesRemoved) {
+          //   // Force a complete chart update when series are removed
+          this.chart.setOption(
+            {
+              series: newSeries,
+            },
+            { lazyUpdate: false, replaceMerge: ['series'] },
+          );
+        } else {
+          // Use lazy update for data changes only
+          this.chart.setOption(
+            {
+              series: newSeries,
+            },
+            { lazyUpdate: true },
+          );
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    onChartCreated(chart) {
+      this.chart = chart;
+    },
+  },
 };
 </script>
 
 <template>
-  <gl-line-chart :data="chartSeries" :option="chartOptions" :include-legend-avg-max="false" />
+  <gl-line-chart
+    :data="chartSeries"
+    :option="chartOptions"
+    :include-legend-avg-max="false"
+    @created="onChartCreated"
+  />
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index f71ecf2b36de55..a40015013be16c 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlButtonGroup } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlCollapsibleListbox } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
 import { fetchPolicies } from '~/lib/graphql';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
@@ -8,11 +9,35 @@ import getVulnerabilitiesOverTime from 'ee/security_dashboard/graphql/queries/ge
 import { formatVulnerabilitiesOverTimeData } from 'ee/security_dashboard/utils/chart_formatters';
 import { DASHBOARD_LOOKBACK_DAYS } from 'ee/security_dashboard/constants';
 
+const SEVERITIES = [
+  {
+    text: s__('SecurityReports|Critical'),
+    value: 'CRITICAL',
+  },
+  {
+    text: s__('SecurityReports|High'),
+    value: 'HIGH',
+  },
+  {
+    text: s__('SecurityReports|Medium'),
+    value: 'MEDIUM',
+  },
+  {
+    text: s__('SecurityReports|Low'),
+    value: 'LOW',
+  },
+  {
+    text: s__('SecurityReports|Unknown'),
+    value: 'UNKNOWN',
+  },
+];
+
 export default {
   name: 'GroupVulnerabilitiesOverTimePanel',
   components: {
     GlButton,
     GlButtonGroup,
+    GlCollapsibleListbox,
     ExtendedDashboardPanel,
     VulnerabilitiesOverTimeChart,
   },
@@ -43,9 +68,7 @@ export default {
         };
       },
       update(data) {
-        const rawData = data.group?.securityMetrics?.vulnerabilitiesOverTime?.nodes || [];
-
-        return formatVulnerabilitiesOverTimeData(rawData, this.groupedBy);
+        return data.group?.securityMetrics?.vulnerabilitiesOverTime?.nodes || [];
       },
       error() {
         this.fetchError = true;
@@ -53,16 +76,29 @@ export default {
     },
   },
   data() {
+    const defaultSeverities = this.$options.SEVERITIES.map(({ value }) => value);
+
     return {
       vulnerabilitiesOverTime: [],
       fetchError: false,
       groupedBy: 'severity',
+      panelLevelFilters: {
+        severity: defaultSeverities,
+      },
     };
   },
   computed: {
     hasChartData() {
       return this.vulnerabilitiesOverTime.length > 0;
     },
+    formattedVulnerabilitiesOverTime() {
+      return formatVulnerabilitiesOverTimeData(this.vulnerabilitiesOverTime, this.groupedBy);
+    },
+    filteredVulnerabilitiesOverTime() {
+      return this.formattedVulnerabilitiesOverTime.filter(({ name }) =>
+        this.panelLevelFilters.severity.includes(name.toUpperCase()),
+      );
+    },
   },
   methods: {
     isGroupedBy(group) {
@@ -71,7 +107,11 @@ export default {
     groupBy(group) {
       this.groupedBy = group;
     },
+    deselectAllPanelLevelSeverities() {
+      this.panelLevelFilters.severity = [];
+    },
   },
+  SEVERITIES,
 };
 </script>
 
@@ -82,6 +122,19 @@ export default {
     :show-alert-state="fetchError"
   >
     <template #filters>
+      <gl-collapsible-listbox
+        v-model="panelLevelFilters.severity"
+        multiple
+        :fluid-width="false"
+        class="gl-mr-2"
+        size="small"
+        :items="$options.SEVERITIES"
+        :toggle-text="__('Filter')"
+        :show-select-all-button-label="__('All severities')"
+        :reset-button-label="__('Clear')"
+        :header-text="__('Severity')"
+        @reset="deselectAllPanelLevelSeverities"
+      />
       <gl-button-group>
         <gl-button
           data-testid="severity-button"
@@ -107,7 +160,7 @@ export default {
       <vulnerabilities-over-time-chart
         v-if="!fetchError && hasChartData"
         class="gl-h-full gl-overflow-hidden gl-p-2"
-        :chart-series="vulnerabilitiesOverTime"
+        :chart-series="filteredVulnerabilitiesOverTime"
       />
       <p
         v-else
-- 
GitLab


From 63fb160a1cf704c0b4ef2414605ed9672bdedc55 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Mon, 4 Aug 2025 23:11:10 +0200
Subject: [PATCH 02/10] WIP

---
 .../charts/open_vulnerabilities_over_time.vue | 29 -------------------
 .../group_vulnerabilities_over_time_panel.vue | 17 ++++-------
 ...up_vulnerabilities_over_time.query.graphql |  3 +-
 locale/gitlab.pot                             | 18 ++++++++++++
 4 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
index 080d00eb7f49df..6c63f4cd9ed1fa 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
@@ -58,35 +58,6 @@ export default {
       };
     },
   },
-  watch: {
-    chartSeries: {
-      handler(newSeries, oldSeries) {
-        if (!this.chart) return;
-
-        // // Check if series were removed (length decreased or series names changed)
-        const hasSeriesRemoved = newSeries.length < oldSeries?.length;
-
-        if (hasSeriesRemoved) {
-          //   // Force a complete chart update when series are removed
-          this.chart.setOption(
-            {
-              series: newSeries,
-            },
-            { lazyUpdate: false, replaceMerge: ['series'] },
-          );
-        } else {
-          // Use lazy update for data changes only
-          this.chart.setOption(
-            {
-              series: newSeries,
-            },
-            { lazyUpdate: true },
-          );
-        }
-      },
-      deep: true,
-    },
-  },
   methods: {
     onChartCreated(chart) {
       this.chart = chart;
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index a40015013be16c..ef0a4685c5d314 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -65,10 +65,13 @@ export default {
           fullPath: this.groupFullPath,
           includeBySeverity: this.isGroupedBy('severity'),
           includeByReportType: this.isGroupedBy('reportType'),
+          severity: this.panelLevelFilters.severity,
         };
       },
       update(data) {
-        return data.group?.securityMetrics?.vulnerabilitiesOverTime?.nodes || [];
+        const rawData = data.group?.securityMetrics?.vulnerabilitiesOverTime?.nodes || [];
+
+        this.vulnerabilitiesOverTime = formatVulnerabilitiesOverTimeData(rawData, this.groupedBy);
       },
       error() {
         this.fetchError = true;
@@ -89,15 +92,7 @@ export default {
   },
   computed: {
     hasChartData() {
-      return this.vulnerabilitiesOverTime.length > 0;
-    },
-    formattedVulnerabilitiesOverTime() {
-      return formatVulnerabilitiesOverTimeData(this.vulnerabilitiesOverTime, this.groupedBy);
-    },
-    filteredVulnerabilitiesOverTime() {
-      return this.formattedVulnerabilitiesOverTime.filter(({ name }) =>
-        this.panelLevelFilters.severity.includes(name.toUpperCase()),
-      );
+      return this.vulnerabilitiesOverTime?.length > 0;
     },
   },
   methods: {
@@ -160,7 +155,7 @@ export default {
       <vulnerabilities-over-time-chart
         v-if="!fetchError && hasChartData"
         class="gl-h-full gl-overflow-hidden gl-p-2"
-        :chart-series="filteredVulnerabilitiesOverTime"
+        :chart-series="vulnerabilitiesOverTime"
       />
       <p
         v-else
diff --git a/ee/app/assets/javascripts/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql b/ee/app/assets/javascripts/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql
index c6a9771a2068e1..64c2bbdb0cc6f4 100644
--- a/ee/app/assets/javascripts/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql
+++ b/ee/app/assets/javascripts/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql
@@ -6,11 +6,12 @@ query getGroupVulnerabilitiesOverTime(
   $endDate: ISO8601Date!
   $includeBySeverity: Boolean!
   $includeByReportType: Boolean!
+  $severity: [VulnerabilitySeverity!]
 ) {
   group(fullPath: $fullPath) {
     id
     securityMetrics(projectId: $projectId, reportType: $reportType) {
-      vulnerabilitiesOverTime(startDate: $startDate, endDate: $endDate) {
+      vulnerabilitiesOverTime(startDate: $startDate, endDate: $endDate, severity: $severity) {
         nodes {
           date
           ... @include(if: $includeBySeverity) {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0f955029792611..4621e4443cdc2f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6824,6 +6824,9 @@ msgstr ""
 msgid "All required approvals must be given."
 msgstr ""
 
+msgid "All severities"
+msgstr ""
+
 msgid "All threads resolved!"
 msgstr ""
 
@@ -58489,6 +58492,9 @@ msgstr ""
 msgid "SecurityReports|Create issue"
 msgstr ""
 
+msgid "SecurityReports|Critical"
+msgstr ""
+
 msgid "SecurityReports|Detected in external sources such as running containers and URLs. These vulnerabilities are not necessarily associated with your GitLab project."
 msgstr ""
 
@@ -58591,6 +58597,9 @@ msgstr ""
 msgid "SecurityReports|Has merge request"
 msgstr ""
 
+msgid "SecurityReports|High"
+msgstr ""
+
 msgid "SecurityReports|Historical view of open vulnerabilities in the default branch. Excludes vulnerabilities that were resolved or dismissed. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""
 
@@ -58621,6 +58630,9 @@ msgstr ""
 msgid "SecurityReports|Learn more about setting up your dashboard"
 msgstr ""
 
+msgid "SecurityReports|Low"
+msgstr ""
+
 msgid "SecurityReports|Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured and a pipeline has been run on the default branch."
 msgstr ""
 
@@ -58633,6 +58645,9 @@ msgstr ""
 msgid "SecurityReports|Maximum selected projects limit reached"
 msgstr ""
 
+msgid "SecurityReports|Medium"
+msgstr ""
+
 msgid "SecurityReports|Merge Request"
 msgstr ""
 
@@ -58857,6 +58872,9 @@ msgstr ""
 msgid "SecurityReports|Undo dismiss"
 msgstr ""
 
+msgid "SecurityReports|Unknown"
+msgstr ""
+
 msgid "SecurityReports|Vulnerabilities over time"
 msgstr ""
 
-- 
GitLab


From 35405ecd59b93b59cb1d4c850c25fe7726716374 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Mon, 4 Aug 2025 23:19:47 +0200
Subject: [PATCH 03/10] WIP

---
 .../shared/charts/open_vulnerabilities_over_time.vue          | 2 ++
 .../shared/group_vulnerabilities_over_time_panel.vue          | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
index 6c63f4cd9ed1fa..283470ef08b46d 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
@@ -71,6 +71,8 @@ export default {
     :data="chartSeries"
     :option="chartOptions"
     :include-legend-avg-max="false"
+    responsive
+    height="auto"
     @created="onChartCreated"
   />
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index ef0a4685c5d314..2b4b62a6e2a48c 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -71,7 +71,7 @@ export default {
       update(data) {
         const rawData = data.group?.securityMetrics?.vulnerabilitiesOverTime?.nodes || [];
 
-        this.vulnerabilitiesOverTime = formatVulnerabilitiesOverTimeData(rawData, this.groupedBy);
+        return formatVulnerabilitiesOverTimeData(rawData, this.groupedBy);
       },
       error() {
         this.fetchError = true;
@@ -92,7 +92,7 @@ export default {
   },
   computed: {
     hasChartData() {
-      return this.vulnerabilitiesOverTime?.length > 0;
+      return this.vulnerabilitiesOverTime.length > 0;
     },
   },
   methods: {
-- 
GitLab


From c5dd5781d66bee111eec67aa65656a801b8b5414 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 5 Aug 2025 11:15:27 +0200
Subject: [PATCH 04/10] WIP: Remove unnecessary changes

---
 .../shared/charts/open_vulnerabilities_over_time.vue        | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
index 283470ef08b46d..428796964e72dc 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
@@ -58,11 +58,6 @@ export default {
       };
     },
   },
-  methods: {
-    onChartCreated(chart) {
-      this.chart = chart;
-    },
-  },
 };
 </script>
 
@@ -73,6 +68,5 @@ export default {
     :include-legend-avg-max="false"
     responsive
     height="auto"
-    @created="onChartCreated"
   />
 </template>
-- 
GitLab


From f78b6d4d99a58996a4612d6d9e82531ad0ce34d5 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 5 Aug 2025 11:39:39 +0200
Subject: [PATCH 05/10] WIP: fix up listbox

---
 .../charts/open_vulnerabilities_over_time.vue |  1 +
 .../group_vulnerabilities_over_time_panel.vue | 85 ++++++++-----------
 2 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
index 428796964e72dc..a6ff737ffbdc49 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue
@@ -25,6 +25,7 @@ export default {
     },
     chartOptions() {
       return {
+        animation: false,
         // Note: This is a workaround to remove the extra whitespace when the chart has no title
         // Once https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2199 has been fixed, this can be removed
         grid: {
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index 2b4b62a6e2a48c..e9663b90aaa31a 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlButtonGroup, GlCollapsibleListbox } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
 import { fetchPolicies } from '~/lib/graphql';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
@@ -8,6 +8,8 @@ import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/share
 import getVulnerabilitiesOverTime from 'ee/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql';
 import { formatVulnerabilitiesOverTimeData } from 'ee/security_dashboard/utils/chart_formatters';
 import { DASHBOARD_LOOKBACK_DAYS } from 'ee/security_dashboard/constants';
+import { getSelectedOptionsText } from '~/lib/utils/listbox_helpers';
+import { ALL_ID } from 'ee/security_dashboard/components/shared/filters/constants';
 
 const SEVERITIES = [
   {
@@ -79,18 +81,31 @@ export default {
     },
   },
   data() {
-    const defaultSeverities = this.$options.SEVERITIES.map(({ value }) => value);
-
     return {
       vulnerabilitiesOverTime: [],
       fetchError: false,
       groupedBy: 'severity',
       panelLevelFilters: {
-        severity: defaultSeverities,
+        severity: [],
       },
     };
   },
   computed: {
+    severityFilterItems() {
+      const allOption = { value: ALL_ID, text: __('All severities') };
+
+      return [allOption, ...this.$options.SEVERITIES];
+    },
+    severityFilterToggleText() {
+      return getSelectedOptionsText({
+        options: this.severityFilterItems,
+        selected: this.panelLevelFilters.severity,
+        placeholder: __('All severities'),
+      });
+    },
+    selectedSeverities() {
+      return this.panelLevelFilters.severity.length ? this.panelLevelFilters.severity : [ALL_ID];
+    },
     hasChartData() {
       return this.vulnerabilitiesOverTime.length > 0;
     },
@@ -102,8 +117,12 @@ export default {
     groupBy(group) {
       this.groupedBy = group;
     },
-    deselectAllPanelLevelSeverities() {
-      this.panelLevelFilters.severity = [];
+    updateSelected(selected) {
+      if (selected.at(-1) === ALL_ID) {
+        this.panelLevelFilters.severity = [];
+      } else {
+        this.panelLevelFilters.severity = selected.filter((s) => s !== ALL_ID);
+      }
     },
   },
   SEVERITIES,
@@ -111,57 +130,27 @@ export default {
 </script>
 
 <template>
-  <extended-dashboard-panel
-    :title="s__('SecurityReports|Vulnerabilities over time')"
-    :loading="$apollo.queries.vulnerabilitiesOverTime.loading"
-    :show-alert-state="fetchError"
-  >
+  <extended-dashboard-panel :title="s__('SecurityReports|Vulnerabilities over time')"
+    :loading="$apollo.queries.vulnerabilitiesOverTime.loading" :show-alert-state="fetchError">
     <template #filters>
-      <gl-collapsible-listbox
-        v-model="panelLevelFilters.severity"
-        multiple
-        :fluid-width="false"
-        class="gl-mr-2"
-        size="small"
-        :items="$options.SEVERITIES"
-        :toggle-text="__('Filter')"
-        :show-select-all-button-label="__('All severities')"
-        :reset-button-label="__('Clear')"
-        :header-text="__('Severity')"
-        @reset="deselectAllPanelLevelSeverities"
-      />
+      <gl-collapsible-listbox :items="severityFilterItems" :selected="selectedSeverities" block multiple
+        class="gl-w-18 gl-mr-2" size="small" :toggle-text="severityFilterToggleText" @select="updateSelected" />
       <gl-button-group>
-        <gl-button
-          data-testid="severity-button"
-          size="small"
-          category="secondary"
-          :selected="isGroupedBy('severity')"
-          @click="groupBy('severity')"
-        >
+        <gl-button data-testid="severity-button" size="small" category="secondary" :selected="isGroupedBy('severity')"
+          @click="groupBy('severity')">
           {{ s__('SecurityReports|Severity') }}
         </gl-button>
-        <gl-button
-          data-testid="report-type-button"
-          size="small"
-          category="secondary"
-          :selected="isGroupedBy('reportType')"
-          @click="groupBy('reportType')"
-        >
+        <gl-button data-testid="report-type-button" size="small" category="secondary"
+          :selected="isGroupedBy('reportType')" @click="groupBy('reportType')">
           {{ s__('SecurityReports|Report Type') }}
         </gl-button>
       </gl-button-group>
     </template>
     <template #body>
-      <vulnerabilities-over-time-chart
-        v-if="!fetchError && hasChartData"
-        class="gl-h-full gl-overflow-hidden gl-p-2"
-        :chart-series="vulnerabilitiesOverTime"
-      />
-      <p
-        v-else
-        class="gl-m-0 gl-flex gl-h-full gl-w-full gl-items-center gl-justify-center gl-p-0 gl-text-center"
-        data-testid="vulnerabilities-over-time-empty-state"
-      >
+      <vulnerabilities-over-time-chart v-if="!fetchError && hasChartData" class="gl-h-full gl-overflow-hidden gl-p-2"
+        :chart-series="vulnerabilitiesOverTime" />
+      <p v-else class="gl-m-0 gl-flex gl-h-full gl-w-full gl-items-center gl-justify-center gl-p-0 gl-text-center"
+        data-testid="vulnerabilities-over-time-empty-state">
         <template v-if="fetchError">{{ __('Something went wrong. Please try again.') }}</template>
         <template v-else>{{ __('No data available.') }}</template>
       </p>
-- 
GitLab


From debb177bc35de9ebea2a9207c7c4c787dcbb88e2 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 5 Aug 2025 18:05:44 +0200
Subject: [PATCH 06/10] Fix linting errors

---
 .../group_vulnerabilities_over_time_panel.vue | 51 ++++++++++++++-----
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index e9663b90aaa31a..0ca9dac3447db2 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -130,27 +130,54 @@ export default {
 </script>
 
 <template>
-  <extended-dashboard-panel :title="s__('SecurityReports|Vulnerabilities over time')"
-    :loading="$apollo.queries.vulnerabilitiesOverTime.loading" :show-alert-state="fetchError">
+  <extended-dashboard-panel
+    :title="s__('SecurityReports|Vulnerabilities over time')"
+    :loading="$apollo.queries.vulnerabilitiesOverTime.loading"
+    :show-alert-state="fetchError"
+  >
     <template #filters>
-      <gl-collapsible-listbox :items="severityFilterItems" :selected="selectedSeverities" block multiple
-        class="gl-w-18 gl-mr-2" size="small" :toggle-text="severityFilterToggleText" @select="updateSelected" />
+      <gl-collapsible-listbox
+        :items="severityFilterItems"
+        :selected="selectedSeverities"
+        block
+        multiple
+        class="gl-w-18 gl-mr-2"
+        size="small"
+        :toggle-text="severityFilterToggleText"
+        @select="updateSelected"
+      />
       <gl-button-group>
-        <gl-button data-testid="severity-button" size="small" category="secondary" :selected="isGroupedBy('severity')"
-          @click="groupBy('severity')">
+        <gl-button
+          data-testid="severity-button"
+          size="small"
+          category="secondary"
+          :selected="isGroupedBy('severity')"
+          @click="groupBy('severity')"
+        >
           {{ s__('SecurityReports|Severity') }}
         </gl-button>
-        <gl-button data-testid="report-type-button" size="small" category="secondary"
-          :selected="isGroupedBy('reportType')" @click="groupBy('reportType')">
+        <gl-button
+          data-testid="report-type-button"
+          size="small"
+          category="secondary"
+          :selected="isGroupedBy('reportType')"
+          @click="groupBy('reportType')"
+        >
           {{ s__('SecurityReports|Report Type') }}
         </gl-button>
       </gl-button-group>
     </template>
     <template #body>
-      <vulnerabilities-over-time-chart v-if="!fetchError && hasChartData" class="gl-h-full gl-overflow-hidden gl-p-2"
-        :chart-series="vulnerabilitiesOverTime" />
-      <p v-else class="gl-m-0 gl-flex gl-h-full gl-w-full gl-items-center gl-justify-center gl-p-0 gl-text-center"
-        data-testid="vulnerabilities-over-time-empty-state">
+      <vulnerabilities-over-time-chart
+        v-if="!fetchError && hasChartData"
+        class="gl-h-full gl-overflow-hidden gl-p-2"
+        :chart-series="vulnerabilitiesOverTime"
+      />
+      <p
+        v-else
+        class="gl-m-0 gl-flex gl-h-full gl-w-full gl-items-center gl-justify-center gl-p-0 gl-text-center"
+        data-testid="vulnerabilities-over-time-empty-state"
+      >
         <template v-if="fetchError">{{ __('Something went wrong. Please try again.') }}</template>
         <template v-else>{{ __('No data available.') }}</template>
       </p>
-- 
GitLab


From d6466eb3dbd9596ef4eba6cb35b3e7f1a6ac9eec Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 5 Aug 2025 18:24:46 +0200
Subject: [PATCH 07/10] WIP: Fix failing specs

---
 .../shared/group_vulnerabilities_over_time_panel_spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js b/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
index b9c41b00da91a7..d9c4feca07d223 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
@@ -156,6 +156,8 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
         endDate: todayInIsoFormat,
         includeBySeverity: true,
         includeByReportType: false,
+        severity: [],
+        reportType: undefined,
       });
     });
 
@@ -175,6 +177,9 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
           [availableFilterType]: ['filterValue'],
           includeBySeverity: true,
           includeByReportType: false,
+          projectId: availableFilterType === 'projectId' ? ['filterValue'] : undefined,
+          reportType: availableFilterType === 'reportType' ? ['filterValue'] : undefined,
+          severity: [],
         });
       },
     );
@@ -196,6 +201,8 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
         endDate: todayInIsoFormat,
         includeBySeverity: true,
         includeByReportType: false,
+        severity: [],
+        reportType: undefined,
       });
     });
 
@@ -212,6 +219,8 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
         endDate: todayInIsoFormat,
         includeBySeverity: false,
         includeByReportType: true,
+        severity: [],
+        reportType: undefined,
       });
     });
   });
-- 
GitLab


From d2d86274018087a676199d50467889dcd292ad40 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 5 Aug 2025 18:38:01 +0200
Subject: [PATCH 08/10] WIP: Update specs

---
 ...up_vulnerabilities_over_time_panel_spec.js | 132 ++++++++++++++++++
 1 file changed, 132 insertions(+)

diff --git a/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js b/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
index d9c4feca07d223..d09610aab028ea 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/group_vulnerabilities_over_time_panel_spec.js
@@ -1,5 +1,6 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
 import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue';
@@ -8,6 +9,7 @@ import getVulnerabilitiesOverTime from 'ee/security_dashboard/graphql/queries/ge
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { useFakeDate } from 'helpers/fake_date';
+import { ALL_ID } from 'ee/security_dashboard/components/shared/filters/constants';
 
 Vue.use(VueApollo);
 jest.mock('~/alert');
@@ -93,6 +95,7 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
   const findSeverityButton = () => wrapper.findByTestId('severity-button');
   const findReportTypeButton = () => wrapper.findByTestId('report-type-button');
   const findEmptyState = () => wrapper.findByTestId('vulnerabilities-over-time-empty-state');
+  const findSeverityListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
   beforeEach(() => {
     createComponent();
@@ -359,4 +362,133 @@ describe('GroupVulnerabilitiesOverTimePanel', () => {
       });
     });
   });
+
+  describe('severity filter listbox', () => {
+    const SEVERITY_OPTIONS = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'UNKNOWN'];
+
+    const expectSelectedSeverities = (severities) => {
+      expect(findSeverityListbox().props('selected')).toMatchObject(severities);
+    };
+
+    beforeEach(async () => {
+      await waitForPromises();
+    });
+
+    it('renders the severity filter listbox in the filters slot', () => {
+      expect(findSeverityListbox().exists()).toBe(true);
+    });
+
+    it('has correct props for the severity filter listbox', () => {
+      const listbox = findSeverityListbox();
+
+      expect(listbox.props()).toMatchObject({
+        multiple: true,
+        block: true,
+        size: 'small',
+      });
+    });
+
+    it('shows all severity options including "All severities"', () => {
+      const listbox = findSeverityListbox();
+      const items = listbox.props('items');
+
+      expect(items).toHaveLength(6); // 5 severities + "All severities"
+      expect(items[0]).toEqual({ value: ALL_ID, text: 'All severities' });
+
+      SEVERITY_OPTIONS.forEach((severity, index) => {
+        expect(items[index + 1].value).toBe(severity);
+      });
+    });
+
+    it('selects "All severities" by default', () => {
+      expectSelectedSeverities([ALL_ID]);
+    });
+
+    it('shows "All severities" as toggle text when no specific severities are selected', () => {
+      const listbox = findSeverityListbox();
+      expect(listbox.props('toggleText')).toBe('All severities');
+    });
+
+    it.each(SEVERITY_OPTIONS)('allows %s to be selected', async (severity) => {
+      const listbox = findSeverityListbox();
+
+      listbox.vm.$emit('select', [severity]);
+      await nextTick();
+
+      expectSelectedSeverities([severity]);
+    });
+
+    it('deselects "All severities" when a specific severity is selected', async () => {
+      const listbox = findSeverityListbox();
+
+      await listbox.vm.$emit('select', ['CRITICAL']);
+
+      expectSelectedSeverities(['CRITICAL']);
+    });
+
+    it('selects "All severities" and deselects everything else when "All severities" is clicked', async () => {
+      const listbox = findSeverityListbox();
+
+      // First select some specific severities
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH']);
+      expectSelectedSeverities(['CRITICAL', 'HIGH']);
+
+      // Then click "All severities"
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH', ALL_ID]);
+      await nextTick();
+
+      expectSelectedSeverities([ALL_ID]);
+    });
+
+    it('updates the GraphQL query variables when severity filter changes', async () => {
+      const { vulnerabilitiesOverTimeHandler } = createComponent();
+      await waitForPromises();
+
+      const listbox = findSeverityListbox();
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH']);
+      await waitForPromises();
+
+      expect(vulnerabilitiesOverTimeHandler).toHaveBeenCalledWith({
+        fullPath: mockGroupFullPath,
+        projectId: mockFilters.projectId,
+        startDate: ninetyDaysAgoInIsoFormat,
+        endDate: todayInIsoFormat,
+        includeBySeverity: true,
+        includeByReportType: false,
+        severity: ['CRITICAL', 'HIGH'],
+        reportType: undefined,
+      });
+    });
+
+    it('passes empty severity array to GraphQL when "All severities" is selected', async () => {
+      const { vulnerabilitiesOverTimeHandler } = createComponent();
+      await waitForPromises();
+
+      const listbox = findSeverityListbox();
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH']);
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH', ALL_ID]);
+      await waitForPromises();
+
+      expect(vulnerabilitiesOverTimeHandler).toHaveBeenCalledWith({
+        fullPath: mockGroupFullPath,
+        projectId: mockFilters.projectId,
+        startDate: ninetyDaysAgoInIsoFormat,
+        endDate: todayInIsoFormat,
+        includeBySeverity: true,
+        includeByReportType: false,
+        severity: [],
+        reportType: undefined,
+      });
+    });
+
+    it('updates toggle text when specific severities are selected', async () => {
+      const listbox = findSeverityListbox();
+
+      await listbox.vm.$emit('select', ['CRITICAL']);
+      expect(listbox.props('toggleText')).toBe('Critical');
+
+      await listbox.vm.$emit('select', ['CRITICAL', 'HIGH']);
+      expect(listbox.props('toggleText')).toBe('Critical +1 more');
+    });
+  });
 });
-- 
GitLab


From ae361796b3edb616621c90f1f77cacdd9fea69b9 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Thu, 7 Aug 2025 11:41:13 +0200
Subject: [PATCH 09/10] WIP

---
 .../group_vulnerabilities_over_time_panel.vue | 43 ++++++-------------
 .../utils/chart_formatters.js                 | 21 ++++++---
 2 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
index 0ca9dac3447db2..9406a66670272e 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/group_vulnerabilities_over_time_panel.vue
@@ -1,38 +1,23 @@
 <script>
 import { GlButton, GlButtonGroup, GlCollapsibleListbox } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import { __ } from '~/locale';
 import ExtendedDashboardPanel from '~/vue_shared/components/customizable_dashboard/extended_dashboard_panel.vue';
 import { fetchPolicies } from '~/lib/graphql';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/charts/open_vulnerabilities_over_time.vue';
 import getVulnerabilitiesOverTime from 'ee/security_dashboard/graphql/queries/get_group_vulnerabilities_over_time.query.graphql';
-import { formatVulnerabilitiesOverTimeData } from 'ee/security_dashboard/utils/chart_formatters';
+import {
+  formatVulnerabilitiesOverTimeData,
+  SEVERITY_LEVELS,
+} from 'ee/security_dashboard/utils/chart_formatters';
 import { DASHBOARD_LOOKBACK_DAYS } from 'ee/security_dashboard/constants';
 import { getSelectedOptionsText } from '~/lib/utils/listbox_helpers';
 import { ALL_ID } from 'ee/security_dashboard/components/shared/filters/constants';
 
-const SEVERITIES = [
-  {
-    text: s__('SecurityReports|Critical'),
-    value: 'CRITICAL',
-  },
-  {
-    text: s__('SecurityReports|High'),
-    value: 'HIGH',
-  },
-  {
-    text: s__('SecurityReports|Medium'),
-    value: 'MEDIUM',
-  },
-  {
-    text: s__('SecurityReports|Low'),
-    value: 'LOW',
-  },
-  {
-    text: s__('SecurityReports|Unknown'),
-    value: 'UNKNOWN',
-  },
-];
+const SEVERITY_FILTER_LISTBOX_ITEMS = Object.entries(SEVERITY_LEVELS).map(([key, value]) => ({
+  text: value,
+  value: key,
+}));
 
 export default {
   name: 'GroupVulnerabilitiesOverTimePanel',
@@ -91,14 +76,14 @@ export default {
     };
   },
   computed: {
-    severityFilterItems() {
+    severityFilterListboxItems() {
       const allOption = { value: ALL_ID, text: __('All severities') };
 
-      return [allOption, ...this.$options.SEVERITIES];
+      return [allOption, ...this.$options.SEVERITY_FILTER_LISTBOX_ITEMS];
     },
     severityFilterToggleText() {
       return getSelectedOptionsText({
-        options: this.severityFilterItems,
+        options: this.severityFilterListboxItems,
         selected: this.panelLevelFilters.severity,
         placeholder: __('All severities'),
       });
@@ -125,7 +110,7 @@ export default {
       }
     },
   },
-  SEVERITIES,
+  SEVERITY_FILTER_LISTBOX_ITEMS,
 };
 </script>
 
@@ -137,7 +122,7 @@ export default {
   >
     <template #filters>
       <gl-collapsible-listbox
-        :items="severityFilterItems"
+        :items="severityFilterListboxItems"
         :selected="selectedSeverities"
         block
         multiple
diff --git a/ee/app/assets/javascripts/security_dashboard/utils/chart_formatters.js b/ee/app/assets/javascripts/security_dashboard/utils/chart_formatters.js
index 2b5d27680bd3ea..711504de9ba339 100644
--- a/ee/app/assets/javascripts/security_dashboard/utils/chart_formatters.js
+++ b/ee/app/assets/javascripts/security_dashboard/utils/chart_formatters.js
@@ -1,5 +1,14 @@
 import { s__ } from '~/locale';
 
+export const SEVERITY_LEVELS = {
+  CRITICAL: s__('severity|Critical'),
+  HIGH: s__('severity|High'),
+  MEDIUM: s__('severity|Medium'),
+  LOW: s__('severity|Low'),
+  INFO: s__('severity|Info'),
+  UNKNOWN: s__('severity|Unknown'),
+};
+
 /**
  * Formats vulnerability data by severity for chart visualization
  *
@@ -8,12 +17,12 @@ import { s__ } from '~/locale';
  */
 const formatVulnerabilitiesBySeverity = (vulnerabilitiesOverTime) => {
   const chartSeriesDataBySeverity = {
-    CRITICAL: { name: s__('severity|Critical'), data: [] },
-    HIGH: { name: s__('severity|High'), data: [] },
-    MEDIUM: { name: s__('severity|Medium'), data: [] },
-    LOW: { name: s__('severity|Low'), data: [] },
-    INFO: { name: s__('severity|Info'), data: [] },
-    UNKNOWN: { name: s__('severity|Unknown'), data: [] },
+    CRITICAL: { name: SEVERITY_LEVELS.CRITICAL, data: [] },
+    HIGH: { name: SEVERITY_LEVELS.HIGH, data: [] },
+    MEDIUM: { name: SEVERITY_LEVELS.MEDIUM, data: [] },
+    LOW: { name: SEVERITY_LEVELS.LOW, data: [] },
+    INFO: { name: SEVERITY_LEVELS.INFO, data: [] },
+    UNKNOWN: { name: SEVERITY_LEVELS.UNKNOWN, data: [] },
   };
 
   vulnerabilitiesOverTime.forEach((node) => {
-- 
GitLab


From 5ddf8e8638dea5c970ea6b0f4d501eb2b20bcf0e Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Thu, 7 Aug 2025 11:44:46 +0200
Subject: [PATCH 10/10] Update translations

---
 locale/gitlab.pot | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4621e4443cdc2f..b4bedc1557d2e6 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -58492,9 +58492,6 @@ msgstr ""
 msgid "SecurityReports|Create issue"
 msgstr ""
 
-msgid "SecurityReports|Critical"
-msgstr ""
-
 msgid "SecurityReports|Detected in external sources such as running containers and URLs. These vulnerabilities are not necessarily associated with your GitLab project."
 msgstr ""
 
@@ -58597,9 +58594,6 @@ msgstr ""
 msgid "SecurityReports|Has merge request"
 msgstr ""
 
-msgid "SecurityReports|High"
-msgstr ""
-
 msgid "SecurityReports|Historical view of open vulnerabilities in the default branch. Excludes vulnerabilities that were resolved or dismissed. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""
 
@@ -58630,9 +58624,6 @@ msgstr ""
 msgid "SecurityReports|Learn more about setting up your dashboard"
 msgstr ""
 
-msgid "SecurityReports|Low"
-msgstr ""
-
 msgid "SecurityReports|Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured and a pipeline has been run on the default branch."
 msgstr ""
 
@@ -58645,9 +58636,6 @@ msgstr ""
 msgid "SecurityReports|Maximum selected projects limit reached"
 msgstr ""
 
-msgid "SecurityReports|Medium"
-msgstr ""
-
 msgid "SecurityReports|Merge Request"
 msgstr ""
 
@@ -58872,9 +58860,6 @@ msgstr ""
 msgid "SecurityReports|Undo dismiss"
 msgstr ""
 
-msgid "SecurityReports|Unknown"
-msgstr ""
-
 msgid "SecurityReports|Vulnerabilities over time"
 msgstr ""
 
-- 
GitLab