Add severity count to instance vulnerability report

* Add vulnerabilities severity count component to page
* Add specs

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

@@ -7,6 +7,8 @@ import { createProjectLoadingError } from '../helpers';
 import InstanceSecurityVulnerabilities from './first_class_instance_security_dashboard_vulnerabilities.vue';
 import CsvExportButton from './csv_export_button.vue';
 import DashboardNotConfigured from './empty_states/instance_dashboard_not_configured.vue';
+import VulnerabilitiesCountList from './vulnerability_count_list.vue';
+import { vulnerabilitiesSeverityCountScopes } from '../constants';
 
 export default {
   components: {
@@ -15,6 +17,7 @@ export default {
     InstanceSecurityVulnerabilities,
     Filters,
     DashboardNotConfigured,
+    VulnerabilitiesCountList,
   },
   props: {
     vulnerabilitiesExportEndpoint: {
@@ -58,19 +61,29 @@ export default {
       this.filters = filters;
     },
   },
+  vulnerabilitiesSeverityCountScopes,
 };
 </script>
 
 <template>
   <security-dashboard-layout>
     <template #header>
-      <header class="page-title-holder gl-flex-fill-1 gl-display-flex gl-align-items-center">
-        <h2 class="page-title gl-flex-grow-1">{{ s__('SecurityReports|Vulnerability Report') }}</h2>
-        <csv-export-button
+      <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
+            v-if="shouldShowDashboard"
+            :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint"
+          />
+        </header>
+        <vulnerabilities-count-list
           v-if="shouldShowDashboard"
-          :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint"
+          :scope="$options.vulnerabilitiesSeverityCountScopes.instance"
+          :filters="filters"
         />
-      </header>
+      </div>
     </template>
     <template #sticky>
       <filters v-if="shouldShowDashboard" :projects="projects" @filterChange="handleFilterChange" />

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

+---
+title: Add vulnerability severities count to instance report
+merge_request: 47863
+author:
+type: added

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

 import { shallowMount } from '@vue/test-utils';
+import { within } from '@testing-library/dom';
 import CsvExportButton from 'ee/security_dashboard/components/csv_export_button.vue';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/instance_dashboard_not_configured.vue';
 import FirstClassInstanceDashboard from 'ee/security_dashboard/components/first_class_instance_security_dashboard.vue';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_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 Instance Dashboard Component', () => {
   let wrapper;
@@ -19,6 +21,7 @@ describe('First Class Instance Dashboard Component', () => {
   const findCsvExportButton = () => wrapper.find(CsvExportButton);
   const findEmptyState = () => wrapper.find(DashboardNotConfigured);
   const findFilters = () => wrapper.find(Filters);
+  const findVulnerabilitiesCountList = () => wrapper.find(VulnerabilitiesCountList);
 
   const createWrapper = ({ data = {}, stubs, mocks = defaultMocks() }) => {
     return shallowMount(FirstClassInstanceDashboard, {
@@ -74,6 +77,13 @@ describe('First Class Instance Dashboard Component', () => {
         vulnerabilitiesExportEndpoint,
       );
     });
+
+    it('displays the vulnerability count list with the correct data', () => {
+      expect(findVulnerabilitiesCountList().props()).toMatchObject({
+        scope: 'instance',
+        filters: wrapper.vm.filters,
+      });
+    });
   });
 
   describe('when loading projects', () => {
@@ -89,6 +99,10 @@ describe('First Class Instance Dashboard Component', () => {
     it('does not render the export button', () => {
       expect(findCsvExportButton().exists()).toBe(false);
     });
+
+    it('does not render the vulnerabilities count list', () => {
+      expect(findVulnerabilitiesCountList().exists()).toBe(false);
+    });
   });
 
   describe('when uninitialized', () => {
@@ -115,6 +129,10 @@ describe('First Class Instance Dashboard Component', () => {
     it('has no filters', () => {
       expect(findFilters().exists()).toBe(false);
     });
+
+    it('does not render the vulnerabilities count list', () => {
+      expect(findVulnerabilitiesCountList().exists()).toBe(false);
+    });
   });
 
   describe('always', () => {
@@ -123,7 +141,9 @@ describe('First Class Instance Dashboard Component', () => {
     });
 
     it('has the security dashboard title', () => {
-      expect(wrapper.find('.page-title').text()).toBe('Vulnerability Report');
+      expect(
+        within(wrapper.element).getByRole('heading', { name: 'Vulnerability Report' }),
+      ).not.toBe(null);
     });
   });
 });