Commit 8a76f4ca authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

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

Create new security charts page and layout

See merge request gitlab-org/gitlab!37770
parents 440be5dd 3e1ce664
<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>
<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>
......@@ -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"
......
......@@ -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,
......
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 });
},
});
};
......@@ -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;
}
......@@ -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"
......
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: '',
});
});
});
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment