Create instance-level security charts component

- create separate components just for the instance-level security
  charts
- modify the init file to use the component
- update CSS of severity component
- add tests

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

@@ -138,7 +138,9 @@ export default {
 </script>
 
 <template>
-  <section class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base">
+  <section
+    class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
+  >
     <header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5">
       <h4 class="gl-my-0">
         {{ __('Project security status') }}
@@ -154,7 +156,7 @@ export default {
         {{ __('Projects are graded based on the highest severity vulnerability present') }}
       </p>
     </header>
-    <accordion class="gl-px-5">
+    <accordion class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1">
       <template #default="{ accordionId }">
         <accordion-item
           v-for="severityGroup in severityGroups"
@@ -164,6 +166,7 @@ export default {
           :accordion-id="accordionId"
           :disabled="shouldAccordionItemBeDisabled(severityGroup)"
           :max-height="$options.accordionItemsContentMaxHeight"
+          class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
         >
           <template #title="{ isExpanded, isDisabled }">
             <h5
@@ -184,7 +187,7 @@ export default {
             </h5>
           </template>
           <template #subTitle>
-            <p class="gl-m-0 ml-5 gl-pb-2 gl-text-gray-500">{{ severityGroup.warning }}</p>
+            <p class="gl-m-0 gl-ml-7 gl-pb-2 gl-text-gray-500">{{ severityGroup.warning }}</p>
           </template>
           <div class="gl-ml-7 gl-pb-3">
             <ul class="list-unstyled gl-py-2">
@@ -198,7 +201,7 @@ export default {
                 <span
                   v-if="project.mostSevereVulnerability"
                   ref="mostSevereCount"
-                  class="d-block text-lowercase"
+                  class="gl-display-block text-lowercase"
                   :class="cssForMostSevereVulnerability(project.mostSevereVulnerability)"
                   >{{ project.mostSevereVulnerability.count }}
                   {{ severityText(project.mostSevereVulnerability.level) }}

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

+<script>
+import SecurityChartsLayout from './security_charts_layout.vue';
+import VulnerabilityChart from './first_class_vulnerability_chart.vue';
+import VulnerabilitySeverities from './first_class_vulnerability_severities.vue';
+import vulnerabilityHistoryQuery from '../graphql/instance_vulnerability_history.query.graphql';
+import vulnerabilityGradesQuery from '../graphql/instance_vulnerability_grades.query.graphql';
+
+export default {
+  components: {
+    SecurityChartsLayout,
+    VulnerabilitySeverities,
+    VulnerabilityChart,
+  },
+  data() {
+    return {
+      vulnerabilityHistoryQuery,
+      vulnerabilityGradesQuery,
+    };
+  },
+};
+</script>
+
+<template>
+  <security-charts-layout>
+    <vulnerability-chart :query="vulnerabilityHistoryQuery" />
+    <vulnerability-severities :query="vulnerabilityGradesQuery" />
+  </security-charts-layout>
+</template>

ee/app/assets/javascripts/security_dashboard/security_charts_init.js

@@ -6,6 +6,7 @@ import createRouter from './router';
 import apolloProvider from './graphql/provider';
 
 import GroupSecurityCharts from './components/group_security_charts.vue';
+import InstanceSecurityCharts from './components/instance_security_charts.vue';
 
 export default (el, dashboardType) => {
   if (!el) {
@@ -33,6 +34,8 @@ export default (el, dashboardType) => {
   if (dashboardType === DASHBOARD_TYPES.GROUP) {
     component = GroupSecurityCharts;
     props.groupFullPath = el.dataset.groupFullPath;
+  } else if (dashboardType === DASHBOARD_TYPES.INSTANCE) {
+    component = InstanceSecurityCharts;
   }
 
   const router = createRouter();

ee/changelogs/unreleased/230412-create-instance-security-vulnerability-charts.yml

+---
+title: Create instance-level security charts component and update severity widget
+  CSS
+merge_request: 40046
+author:
+type: changed

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

+import { shallowMount } from '@vue/test-utils';
+import InstanceSecurityCharts from 'ee/security_dashboard/components/instance_security_charts.vue';
+import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart.vue';
+import VulnerabilitySeverities from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
+import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/instance_vulnerability_grades.query.graphql';
+import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/instance_vulnerability_history.query.graphql';
+
+jest.mock('ee/security_dashboard/graphql/instance_vulnerability_grades.query.graphql', () => ({
+  mockGrades: true,
+}));
+jest.mock('ee/security_dashboard/graphql/instance_vulnerability_history.query.graphql', () => ({
+  mockHistory: true,
+}));
+
+describe('Instance Security Charts component', () => {
+  let wrapper;
+
+  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityChartsLayout);
+  const findVulnerabilityChart = () => wrapper.find(VulnerabilityChart);
+  const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
+
+  const createWrapper = () => {
+    wrapper = shallowMount(InstanceSecurityCharts, {});
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders the default page', () => {
+    const securityChartsLayout = findSecurityChartsLayoutComponent();
+    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitySeverities = findVulnerabilitySeverities();
+
+    expect(securityChartsLayout.exists()).toBe(true);
+    expect(vulnerabilityChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
+    expect(vulnerabilitySeverities.exists()).toBe(true);
+    expect(vulnerabilitySeverities.props()).toEqual({
+      query: vulnerabilityGradesQuery,
+      groupFullPath: undefined,
+      helpPagePath: '',
+    });
+  });
+});