Merge branch '227878-add-new-security-charts-dashboard' into 'master'

Create new security charts page and layout

See merge request gitlab-org/gitlab!37770

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

+<script>
+import VulnerabilityChart from './first_class_vulnerability_chart.vue';
+import VulnerabilitySeverity from './vulnerability_severity.vue';
+import vulnerabilityHistoryQuery from '../graphql/group_vulnerability_history.graphql';
+import SecurityChartsLayout from './security_charts_layout.vue';
+
+export default {
+  components: {
+    SecurityChartsLayout,
+    VulnerabilitySeverity,
+    VulnerabilityChart,
+  },
+  props: {
+    groupFullPath: {
+      type: String,
+      required: true,
+    },
+    vulnerableProjectsEndpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      vulnerabilityHistoryQuery,
+    };
+  },
+};
+</script>
+
+<template>
+  <security-charts-layout>
+    <vulnerability-chart :query="vulnerabilityHistoryQuery" :group-full-path="groupFullPath" />
+    <vulnerability-severity :endpoint="vulnerableProjectsEndpoint" />
+  </security-charts-layout>
+</template>

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

+<script>
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('SecurityReports|Security Dashboard'),
+  },
+};
+</script>
+
+<template functional>
+  <div>
+    <h1>{{ $options.i18n.title }}</h1>
+    <div class="security-charts gl-display-flex gl-flex-wrap">
+      <slot></slot>
+    </div>
+  </div>
+</template>

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

@@ -71,7 +71,9 @@ export default {
 </script>
 
 <template>
-  <section class="js-projects-security-status border rounded">
+  <section
+    class="gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
+  >
     <header class="border-bottom p-3">
       <h4 class="my-0">
         {{ __('Project security status') }}
@@ -87,7 +89,7 @@ export default {
         {{ __('Projects are graded based on the highest severity vulnerability present') }}
       </p>
     </header>
-    <accordion class="px-3">
+    <accordion class="security-dashboard-accordion gl-px-3 gl-display-flex gl-flex-fill-1">
       <template #default="{ accordionId }">
         <accordion-item
           v-for="severityGroup in severityGroups"
@@ -97,9 +99,10 @@ export default {
           :is-loading="isLoading"
           :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 class="d-flex align-items-center font-weight-normal p-0 m-0">
+          <template #title="{ isExpanded, isDisabled }">
+            <h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
               <span
                 v-gl-tooltip
                 :title="severityGroup.description"

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

@@ -9,16 +9,11 @@ import createStore from './store';
 import createRouter from './router';
 import apolloProvider from './graphql/provider';
 
-const isRequired = message => {
-  throw new Error(message);
-};
+export default (el, dashboardType) => {
+  if (!el) {
+    return null;
+  }
 
-export default (
-  /* eslint-disable @gitlab/require-i18n-strings */
-  el = isRequired('No element was passed to the security dashboard initializer'),
-  dashboardType = isRequired('No dashboard type was passed to the security dashboard initializer'),
-  /* eslint-enable @gitlab/require-i18n-strings */
-) => {
   if (el.dataset.isUnavailable) {
     return new Vue({
       el,

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

+import Vue from 'vue';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import UnavailableState from './components/unavailable_state.vue';
+import createStore from './store';
+import createRouter from './router';
+import apolloProvider from './graphql/provider';
+
+import GroupSecurityCharts from './components/group_security_charts.vue';
+
+export default (el, dashboardType) => {
+  if (!el) {
+    return null;
+  }
+
+  if (el.dataset.isUnavailable) {
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(UnavailableState, {
+          props: {
+            link: el.dataset.dashboardDocumentation,
+            svgPath: el.dataset.emptyStateSvgPath,
+          },
+        });
+      },
+    });
+  }
+
+  const props = {};
+
+  let component;
+
+  if (dashboardType === DASHBOARD_TYPES.GROUP) {
+    component = GroupSecurityCharts;
+    props.groupFullPath = el.dataset.groupFullPath;
+    props.vulnerableProjectsEndpoint = el.dataset.vulnerableProjectsEndpoint;
+  }
+
+  const router = createRouter();
+  const store = createStore({ dashboardType });
+
+  return new Vue({
+    el,
+    store,
+    router,
+    apolloProvider,
+    render(createElement) {
+      return createElement(component, { props });
+    },
+  });
+};

ee/app/assets/stylesheets/pages/security_dashboard.scss

@@ -57,3 +57,13 @@ $selection-summary-height: 68px;
     @include sticky-top-positioning($security-filter-height + $selection-summary-height);
   }
 }
+
+.security-dashboard-accordion > ul {
+  @include gl-display-flex;
+  @include gl-flex-fill-1;
+}
+
+.security-charts > section {
+  flex: 1 1 40%;
+  margin: 1rem;
+}

ee/spec/frontend/security_dashboard/components/__snapshots__/vulnerability_severity_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Vulnerability Severity component when the data has loaded matches snapshot 1`] = `
 <section
-  class="js-projects-security-status border rounded"
+  class="gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
 >
   <header
     class="border-bottom p-3"
@@ -26,13 +26,13 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
   </header>
    
   <div
-    class="px-3"
+    class="security-dashboard-accordion gl-px-3 gl-display-flex gl-flex-fill-1"
   >
     <ul
       class="list-group list-group-flush py-2"
     >
       <li
-        class="list-group-item p-0"
+        class="list-group-item p-0 gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
       >
         <div
           class="d-flex align-items-stretch"
@@ -108,7 +108,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
         </div>
       </li>
       <li
-        class="list-group-item p-0"
+        class="list-group-item p-0 gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
       >
         <div
           class="d-flex align-items-stretch"
@@ -184,7 +184,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
         </div>
       </li>
       <li
-        class="list-group-item p-0"
+        class="list-group-item p-0 gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
       >
         <div
           class="d-flex align-items-stretch"
@@ -260,7 +260,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
         </div>
       </li>
       <li
-        class="list-group-item p-0"
+        class="list-group-item p-0 gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
       >
         <div
           class="d-flex align-items-stretch"
@@ -336,7 +336,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
         </div>
       </li>
       <li
-        class="list-group-item p-0"
+        class="list-group-item p-0 gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
       >
         <div
           class="d-flex align-items-stretch"

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

+import { shallowMount } from '@vue/test-utils';
+import { TEST_HOST } from 'jest/helpers/test_constants';
+import GroupSecurityCharts from 'ee/security_dashboard/components/group_security_charts.vue';
+import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart.vue';
+import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+
+jest.mock('ee/security_dashboard/graphql/group_vulnerability_history.graphql', () => ({}));
+
+describe('Group Security Charts component', () => {
+  let wrapper;
+
+  const groupFullPath = `${TEST_HOST}/group/5`;
+  const vulnerableProjectsEndpoint = `${TEST_HOST}/group/5/projects`;
+
+  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityChartsLayout);
+  const findVulnerabilityChart = () => wrapper.find(VulnerabilityChart);
+  const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
+
+  const createWrapper = () => {
+    wrapper = shallowMount(GroupSecurityCharts, {
+      propsData: { groupFullPath, vulnerableProjectsEndpoint },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders the default page', () => {
+    const securityChartsLayout = findSecurityChartsLayoutComponent();
+    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitySeverity = findVulnerabilitySeverity();
+
+    expect(securityChartsLayout.exists()).toBe(true);
+    expect(vulnerabilityChart.props()).toEqual({ query: {}, groupFullPath });
+    expect(vulnerabilitySeverity.props()).toEqual({
+      endpoint: vulnerableProjectsEndpoint,
+      helpPagePath: '',
+    });
+  });
+});

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

+import { shallowMount } from '@vue/test-utils';
+import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+
+describe('Security Charts Layout component', () => {
+  let wrapper;
+
+  const DummyComponent = {
+    name: 'dummy-component',
+    template: '<p>dummy component</p>',
+  };
+
+  const findSlot = () => wrapper.find('.security-charts');
+
+  const createWrapper = slots => {
+    wrapper = shallowMount(SecurityChartsLayout, { slots });
+  };
+
+  beforeEach(() => {
+    createWrapper({ default: DummyComponent });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render the default slot', () => {
+    const slot = findSlot();
+    expect(slot.find(DummyComponent).exists()).toBe(true);
+  });
+});