Commit dbd0a23a authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch '230412-create-instance-security-vulnerability-charts' into 'master'

Create instance-level security charts component

See merge request gitlab-org/gitlab!40046
parents f690ca41 b4d5b7b1
...@@ -138,7 +138,9 @@ export default { ...@@ -138,7 +138,9 @@ export default {
</script> </script>
<template> <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"> <header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5">
<h4 class="gl-my-0"> <h4 class="gl-my-0">
{{ __('Project security status') }} {{ __('Project security status') }}
...@@ -154,7 +156,7 @@ export default { ...@@ -154,7 +156,7 @@ export default {
{{ __('Projects are graded based on the highest severity vulnerability present') }} {{ __('Projects are graded based on the highest severity vulnerability present') }}
</p> </p>
</header> </header>
<accordion class="gl-px-5"> <accordion class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1">
<template #default="{ accordionId }"> <template #default="{ accordionId }">
<accordion-item <accordion-item
v-for="severityGroup in severityGroups" v-for="severityGroup in severityGroups"
...@@ -164,6 +166,7 @@ export default { ...@@ -164,6 +166,7 @@ export default {
:accordion-id="accordionId" :accordion-id="accordionId"
:disabled="shouldAccordionItemBeDisabled(severityGroup)" :disabled="shouldAccordionItemBeDisabled(severityGroup)"
:max-height="$options.accordionItemsContentMaxHeight" :max-height="$options.accordionItemsContentMaxHeight"
class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
> >
<template #title="{ isExpanded, isDisabled }"> <template #title="{ isExpanded, isDisabled }">
<h5 <h5
...@@ -184,7 +187,7 @@ export default { ...@@ -184,7 +187,7 @@ export default {
</h5> </h5>
</template> </template>
<template #subTitle> <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> </template>
<div class="gl-ml-7 gl-pb-3"> <div class="gl-ml-7 gl-pb-3">
<ul class="list-unstyled gl-py-2"> <ul class="list-unstyled gl-py-2">
...@@ -198,7 +201,7 @@ export default { ...@@ -198,7 +201,7 @@ export default {
<span <span
v-if="project.mostSevereVulnerability" v-if="project.mostSevereVulnerability"
ref="mostSevereCount" ref="mostSevereCount"
class="d-block text-lowercase" class="gl-display-block text-lowercase"
:class="cssForMostSevereVulnerability(project.mostSevereVulnerability)" :class="cssForMostSevereVulnerability(project.mostSevereVulnerability)"
>{{ project.mostSevereVulnerability.count }} >{{ project.mostSevereVulnerability.count }}
{{ severityText(project.mostSevereVulnerability.level) }} {{ severityText(project.mostSevereVulnerability.level) }}
......
<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>
...@@ -6,6 +6,7 @@ import createRouter from './router'; ...@@ -6,6 +6,7 @@ import createRouter from './router';
import apolloProvider from './graphql/provider'; import apolloProvider from './graphql/provider';
import GroupSecurityCharts from './components/group_security_charts.vue'; import GroupSecurityCharts from './components/group_security_charts.vue';
import InstanceSecurityCharts from './components/instance_security_charts.vue';
export default (el, dashboardType) => { export default (el, dashboardType) => {
if (!el) { if (!el) {
...@@ -33,6 +34,8 @@ export default (el, dashboardType) => { ...@@ -33,6 +34,8 @@ export default (el, dashboardType) => {
if (dashboardType === DASHBOARD_TYPES.GROUP) { if (dashboardType === DASHBOARD_TYPES.GROUP) {
component = GroupSecurityCharts; component = GroupSecurityCharts;
props.groupFullPath = el.dataset.groupFullPath; props.groupFullPath = el.dataset.groupFullPath;
} else if (dashboardType === DASHBOARD_TYPES.INSTANCE) {
component = InstanceSecurityCharts;
} }
const router = createRouter(); const router = createRouter();
......
---
title: Create instance-level security charts component and update severity widget
CSS
merge_request: 40046
author:
type: changed
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: '',
});
});
});
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