Commit f0543d2c authored by Phil Hughes's avatar Phil Hughes

Merge branch '207415-update-severity-counters' into 'master'

Update colors and switch filters with counts

See merge request gitlab-org/gitlab!27791
parents 07eaa105 34de91c8
......@@ -159,12 +159,12 @@ export default {
:illustrations="loadingErrorIllustrations"
/>
<template v-else>
<vulnerability-count-list v-if="shouldShowCountList" />
<header>
<filters />
</header>
<vulnerability-count-list v-if="shouldShowCountList" class="mb-0" />
<div class="row mt-4">
<article class="col" :class="{ 'col-xl-7': !isLockedToProject }">
<security-dashboard-table>
......
<script>
import { SEVERITY_LEVELS } from '../store/constants';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
export default {
name: 'VulnerabilityCount',
components: {
SeverityBadge,
},
props: {
severity: {
type: String,
......@@ -18,80 +20,16 @@ export default {
default: false,
},
},
computed: {
className() {
return `vulnerability-count-${this.severity}`;
},
severityTitle() {
return SEVERITY_LEVELS[this.severity] || this.severity;
},
},
};
</script>
<template>
<div class="vulnerability-count" :class="className">
<div class="vulnerability-count-header">{{ severityTitle }}</div>
<div class="vulnerability-count-body">
<div class="rounded font-weight-bold border">
<div class="p-2 bg-gray-light d-flex justify-content-center">
<severity-badge :severity="severity" />
</div>
<div ref="body" class="pt-3 pb-3 gl-font-size-20 text-center">
<span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
</div>
</div>
</template>
<style>
.vulnerability-count {
background-color: #fafafa;
border-radius: 0.6em;
color: #505050;
display: block;
font-weight: bold;
margin-bottom: 1em;
overflow: hidden;
text-align: center;
}
.vulnerability-count-header {
background-color: #f2f2f2;
display: block;
padding: 0.4em;
text-transform: capitalize;
}
.vulnerability-count-body {
display: block;
font-size: 2em;
padding: 0.8em;
}
.vulnerability-count-critical {
background-color: #fff6f5;
color: #c0341e;
}
.vulnerability-count-critical .vulnerability-count-header {
background-color: #fae5e1;
}
.vulnerability-count-high {
background-color: #fffaf3;
color: #de7e00;
}
.vulnerability-count-high .vulnerability-count-header {
background-color: #fff1de;
}
.vulnerability-count-medium {
background-color: #f9f7fd;
color: #6d49cb;
}
.vulnerability-count-medium .vulnerability-count-header {
background-color: #ede8fb;
}
.vulnerability-count-unknown {
background-color: #ffffff;
border: 1px solid;
color: #707070;
}
.vulnerability-count-unknown .vulnerability-count-header {
background-color: #ffffff;
border-bottom: 1px solid;
}
</style>
......@@ -6,7 +6,6 @@ import { CRITICAL, HIGH, MEDIUM, LOW } from '../store/modules/vulnerabilities/co
const SEVERITIES = [CRITICAL, HIGH, MEDIUM, LOW];
export default {
name: 'VulnerabilityCountList',
components: {
VulnerabilityCount,
},
......@@ -24,7 +23,7 @@ export default {
</script>
<template>
<div class="vulnerabilities-count-list">
<div class="vulnerabilities-count-list mb-5 mt-4">
<div class="flash-container">
<div v-if="dashboardError" class="flash-alert">
<div class="flash-text container-fluid container-limited limit-container-width">
......@@ -60,12 +59,3 @@ export default {
</div>
</div>
</template>
<style>
.vulnerabilities-count-list {
display: block;
padding: 2.5em 0 1.5em;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 3px;
}
</style>
import Vue from 'vue';
import component from 'ee/security_dashboard/components/vulnerability_count.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import VulnerabilityCount from 'ee/security_dashboard/components/vulnerability_count.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
describe('Vulnerability Count', () => {
const Component = Vue.extend(component);
let vm;
let props;
let wrapper;
const findBadge = () => wrapper.find(SeverityBadge);
const findBody = () => wrapper.find({ ref: 'body' });
beforeEach(() => {
const severity = 'high';
const count = 100;
props = { severity, count };
vm = mountComponent(Component, props);
wrapper = shallowMount(VulnerabilityCount, {
propsData: {
severity: 'high',
count: 100,
},
});
afterEach(() => {
vm.$destroy();
});
it('should render the severity label', () => {
const header = vm.$el.querySelector('.vulnerability-count-header');
expect(header.textContent.toLowerCase()).toMatch(props.severity);
afterEach(() => {
wrapper.destroy();
});
it('should render the count', () => {
const body = vm.$el.querySelector('.vulnerability-count-body');
expect(body.textContent).toMatch(props.count.toString());
it('should render correctly', () => {
const header = findBadge();
const body = findBody();
expect(header.props('severity')).toBe('high');
expect(body.text()).toBe('100');
});
});
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