Refactor vulnerability count query

* Refactor graphql query to support different scopes
* Change severity count component to accept `scope` and `fullPath`

doc/user/application_security/security_dashboard/index.md

@@ -249,7 +249,7 @@ to configure daily security scans.
 Each vulnerability report contains vulnerabilities from the latest scans that were merged
 into the default branch.
 
-![Vulnerability Report](img/group_vulnerability_report_v13_4.png)
+![Vulnerability Report](img/group_vulnerability_report_v13_7.png)
 
 You can filter which vulnerabilities the vulnerability report displays by:
 

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard.vue

@@ -6,6 +6,8 @@ import Filters from 'ee/security_dashboard/components/first_class_vulnerability_
 import CsvExportButton from './csv_export_button.vue';
 import vulnerableProjectsQuery from '../graphql/vulnerable_projects.query.graphql';
 import DashboardNotConfigured from './empty_states/group_dashboard_not_configured.vue';
+import VulnerabilitiesCountList from './vulnerability_count_list.vue';
+import { vulnerabilitiesSeverityCountScopes } from '../constants';
 
 export default {
   components: {
@@ -15,6 +17,7 @@ export default {
     CsvExportButton,
     DashboardNotConfigured,
     GlLoadingIcon,
+    VulnerabilitiesCountList,
   },
   props: {
     groupFullPath: {
@@ -60,6 +63,7 @@ export default {
       this.filters = filters;
     },
   },
+  vulnerabilitiesSeverityCountScopes,
 };
 </script>
 
@@ -69,12 +73,19 @@ export default {
     <dashboard-not-configured v-if="isNotYetConfigured" />
     <security-dashboard-layout v-else :class="{ 'gl-display-none': !projectsWereFetched }">
       <template #header>
-        <header class="page-title-holder flex-fill d-flex align-items-center">
-          <h2 class="page-title flex-grow">
-            {{ s__('SecurityReports|Vulnerability Report') }}
-          </h2>
-          <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
-        </header>
+        <div>
+          <header class="gl-my-6 gl-display-flex gl-align-items-center">
+            <h2 class="gl-flex-grow-1 gl-my-0">
+              {{ s__('SecurityReports|Vulnerability Report') }}
+            </h2>
+            <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
+          </header>
+          <vulnerabilities-count-list
+            :scope="$options.vulnerabilitiesSeverityCountScopes.group"
+            :full-path="groupFullPath"
+            :filters="filters"
+          />
+        </div>
       </template>
       <template #sticky>
         <filters :projects="projects" @filterChange="handleFilterChange" />

ee/changelogs/unreleased/262109-fe-add-severity-counters-to-group-and-instance-vulnerability-re.yml

+---
+title: Add vulnerability severities count to group report
+merge_request: 47861
+author:
+type: added

ee/spec/frontend/security_dashboard/components/first_class_group_security_dashboard_spec.js

@@ -6,6 +6,7 @@ import FirstClassGroupDashboard from 'ee/security_dashboard/components/first_cla
 import FirstClassGroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
+import VulnerabilitiesCountList from 'ee/security_dashboard/components/vulnerability_count_list.vue';
 
 describe('First Class Group Dashboard Component', () => {
   let wrapper;
@@ -21,6 +22,7 @@ describe('First Class Group Dashboard Component', () => {
   const findFilters = () => wrapper.find(Filters);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findEmptyState = () => wrapper.find(DashboardNotConfigured);
+  const findVulnerabilitiesCountList = () => wrapper.find(VulnerabilitiesCountList);
 
   const createWrapper = ({ data } = {}) => {
     return shallowMount(FirstClassGroupDashboard, {
@@ -108,6 +110,14 @@ describe('First Class Group Dashboard Component', () => {
     it('should not display the dashboard not configured component', () => {
       expect(findEmptyState().exists()).toBe(false);
     });
+
+    it('should display the vulnerability count list with the correct data', () => {
+      expect(findVulnerabilitiesCountList().props()).toMatchObject({
+        scope: 'group',
+        fullPath: groupFullPath,
+        filters: wrapper.vm.filters,
+      });
+    });
   });
 
   describe('when has no projects', () => {