Skip to content

G
gitlab-ce
Commit 9d02731f authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch '284471-show-loading-spinner-for-security-dashboard' into 'master' 

Show loading spinner for security dashboard charts

See merge request gitlab-org/gitlab!56493
parents eb42531d ccb1ff62
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 81 deletions
ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_chart.vue
View file @ 9d02731f
<script>
import { GlTooltipDirective, GlTable } from '@gitlab/ui';
import { GlTooltipDirective, GlTable, GlLoadingIcon } from '@gitlab/ui';
import { GlSparklineChart } from '@gitlab/ui/dist/charts';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import { firstAndLastY } from '~/lib/utils/chart_utils';
......@@ -14,12 +14,17 @@ import { SEVERITY_LEVELS, DAYS } from '../store/constants';
import ChartButtons from './vulnerability_chart_buttons.vue';
const ISO_DATE = 'isoDate';
const TH_CLASS = 'gl-bg-white!';
const TD_CLASS = 'gl-border-none!';
const TH_CLASS_TEXT_RIGHT = `${TH_CLASS} gl-text-right`;
const TD_CLASS_TEXT_RIGHT = `${TD_CLASS} gl-text-right`;
export default {
components: {
ChartButtons,
GlSparklineChart,
GlTable,
GlLoadingIcon,
SeverityBadge,
},
directives: {
......@@ -38,14 +43,29 @@ export default {
},
days: Object.values(DAYS),
fields: [
{ key: 'severityLevel', label: s__('VulnerabilityChart|Severity'), tdClass: 'border-0' },
{ key: 'chartData', label: '', tdClass: 'border-0 w-100' },
{ key: 'changeInPercent', label: '%', thClass: 'text-right', tdClass: 'border-0 text-right' },
{
key: 'severityLevel',
label: s__('VulnerabilityChart|Severity'),
thClass: TH_CLASS,
tdClass: TD_CLASS,
},
{
key: 'chartData',
label: '',
thClass: TH_CLASS,
tdClass: `${TD_CLASS} gl-w-full`,
},
{
key: 'changeInPercent',
label: '%',
thClass: TH_CLASS_TEXT_RIGHT,
tdClass: TD_CLASS_TEXT_RIGHT,
},
{
key: 'currentVulnerabilitiesCount',
label: '#',
thClass: 'text-right',
tdClass: 'border-0 text-right',
thClass: TH_CLASS_TEXT_RIGHT,
tdClass: TD_CLASS_TEXT_RIGHT,
},
],
severityLevels: [
......@@ -114,6 +134,9 @@ export default {
[formattedEndDate, 0],
];
},
isLoadingHistory() {
return this.$apollo.queries.vulnerabilitiesHistory.loading;
},
},
watch: {
startDate() {
......@@ -162,29 +185,35 @@ export default {
</script>
<template>
<section class="border rounded p-0">
<div class="p-3">
<section class="gl-border-solid gl-rounded-base gl-border-1 gl-border-gray-100">
<div class="gl-p-5">
<header id="vulnerability-chart-header">
<h4 class="my-0">
<h4 class="gl-my-0">
{{ __('Vulnerabilities over time') }}
</h4>
<p ref="timeInfo" class="text-secondary mt-0 js-vulnerabilities-chart-time-info">
<p
v-if="!isLoadingHistory"
data-testid="timeInfo"
class="gl-text-gray-500 js-vulnerabilities-chart-time-info"
>
{{ dateInfo }}
</p>
</header>
<chart-buttons
v-if="!isLoadingHistory"
:days="$options.days"
:active-day="vulnerabilitiesHistoryDayRange"
@click="setVulnerabilitiesHistoryDayRange"
/>
</div>
<gl-loading-icon v-if="isLoadingHistory" size="lg" class="gl-my-12" />
<gl-table
v-else
:fields="$options.fields"
:items="charts"
:borderless="true"
thead-class="thead-white"
class="js-vulnerabilities-chart-severity-level-breakdown mb-2"
borderless
class="js-vulnerabilities-chart-severity-level-breakdown gl-mb-3"
>
<template #head(changeInPercent)="{ label }">
<span v-gl-tooltip :title="__('Difference between start date and now')">{{ label }}</span>
......@@ -198,14 +227,14 @@ export default {
<severity-badge :ref="`severityBadge${value}`" :severity="value" />
</template>
<template #cell(chartData)="{ item }">
<div class="position-relative h-32-px">
<div class="gl-relative gl-p-5">
<gl-sparkline-chart
:ref="`sparklineChart${item.severityLevel}`"
:height="32"
:data="item.chartData"
:tooltip-label="__('Vulnerabilities')"
:show-last-y-value="false"
class="position-absolute w-100 position-top-0 position-left-0"
class="gl-absolute gl-w-full gl-top-0 gl-left-0"
/>
</div>
</template>
......
ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_severities.vue
View file @ 9d02731f
<script>
import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { GlLink, GlTooltipDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
import {
severityGroupTypes,
severityLevels,
......@@ -28,7 +28,7 @@ export default {
},
},
accordionItemsContentMaxHeight: '445px',
components: { Accordion, AccordionItem, GlLink, GlIcon },
components: { Accordion, AccordionItem, GlLink, GlIcon, GlLoadingIcon },
directives: {
'gl-tooltip': GlTooltipDirective,
},
......@@ -69,6 +69,9 @@ export default {
},
},
computed: {
isLoadingGrades() {
return this.$apollo.queries.vulnerabilityGrades.loading;
},
severityGroups() {
return SEVERITY_GROUPS.map((group) => ({
...group,
......@@ -137,7 +140,7 @@ export default {
<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-p-5">
<h4 class="gl-my-0">
{{ __('Project security status') }}
<gl-link
......@@ -148,11 +151,16 @@ export default {
><gl-icon name="question"
/></gl-link>
</h4>
<p class="gl-text-gray-500 gl-m-0">
<p v-if="!isLoadingGrades" class="gl-text-gray-500 gl-m-0">
{{ __('Projects are graded based on the highest severity vulnerability present') }}
</p>
</header>
<accordion class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1">
<gl-loading-icon v-if="isLoadingGrades" size="lg" class="gl-my-12" />
<accordion
v-else
class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
>
<template #default="{ accordionId }">
<accordion-item
v-for="severityGroup in severityGroups"
......
ee/changelogs/unreleased/284471-show-loading-spinner-for-security-dashboard.yml 0 → 100644
View file @ 9d02731f
---
title: Show loading spinner for security dashboard
merge_request: 56493
author:
type: fixed
ee/spec/frontend/security_dashboard/components/first_class_vulnerability_chart_spec.js
View file @ 9d02731f
import { GlLoadingIcon, GlTable } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart';
import ChartButtons from 'ee/security_dashboard/components/vulnerability_chart_buttons.vue';
import stubChildren from 'helpers/stub_children';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
describe('First class vulnerability chart component', () => {
let wrapper;
......@@ -16,29 +17,33 @@ describe('First class vulnerability chart component', () => {
},
};
const findTimeInfo = () => wrapper.find({ ref: 'timeInfo' });
const findChartButtons = () => wrapper.find(ChartButtons);
const findActiveChartButton = () => findChartButtons().find('.selected');
const findTimeInfo = () => wrapper.findByTestId('timeInfo');
const findChartButtons = () => wrapper.findComponent(ChartButtons);
const findSelectedChartButton = () => findChartButtons().find('.selected');
const find90DaysChartButton = () => findChartButtons().find('[data-days="90"]');
const createComponent = ({ $apollo, propsData, stubs, data, provide } = {}) => {
const instance = shallowMount(VulnerabilityChart, {
$apollo,
propsData: { query: {}, ...propsData },
provide: { groupFullPath: undefined, ...provide },
stubs: {
...stubChildren(VulnerabilityChart),
...stubs,
const mockApollo = (options) => {
return {
queries: {
vulnerabilitiesHistory: { ...options },
},
data,
});
instance.vm.$apollo = { queries: { vulnerabilitiesHistory: { refetch: jest.fn() } } };
return instance;
};
};
const createComponent = ({ $apollo, propsData, stubs, data, provide } = {}) => {
return extendedWrapper(
shallowMount(VulnerabilityChart, {
propsData: { query: {}, ...propsData },
provide: { groupFullPath: undefined, ...provide },
mocks: { $apollo: mockApollo($apollo) },
stubs,
data,
}),
);
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('header', () => {
......@@ -63,7 +68,10 @@ describe('First class vulnerability chart component', () => {
describe('date range selectors', () => {
beforeEach(() => {
wrapper = createComponent({ stubs: { ChartButtons } });
wrapper = createComponent({
stubs: { ChartButtons },
$apollo: { refetch: jest.fn() },
});
});
it('should contain the chart buttons', () => {
......@@ -73,10 +81,10 @@ describe('First class vulnerability chart component', () => {
});
it('should change the actively selected chart button and refetch the new data', () => {
expect(findActiveChartButton().text()).toContain('30 Days');
expect(findSelectedChartButton().text()).toContain('30 Days');
find90DaysChartButton().vm.$emit('click');
return wrapper.vm.$nextTick(() => {
expect(findActiveChartButton().text()).toContain('90 Days');
expect(findSelectedChartButton().text()).toContain('90 Days');
expect(wrapper.vm.$apollo.queries.vulnerabilitiesHistory.refetch).toHaveBeenCalledTimes(1);
});
});
......@@ -86,9 +94,6 @@ describe('First class vulnerability chart component', () => {
beforeEach(() => {
wrapper = createComponent({
provide: { groupFullPath: 'gitlab-org' },
$apollo: {
queries: { vulnerabilitiesHistory: { group: responseData } },
},
});
});
......@@ -102,11 +107,7 @@ describe('First class vulnerability chart component', () => {
describe('when loading the history chart for instance level dashboard', () => {
beforeEach(() => {
wrapper = createComponent({
$apollo: {
queries: { vulnerabilitiesHistory: responseData },
},
});
wrapper = createComponent();
});
it('should process the data returned from GraphQL properly', () => {
......@@ -116,4 +117,20 @@ describe('First class vulnerability chart component', () => {
});
});
});
describe('when query is loading', () => {
beforeEach(() => {
wrapper = createComponent({
$apollo: { loading: true },
});
});
it('only shows the header and loading icon', () => {
expect(wrapper.find('h4').exists()).toBe(true);
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
expect(findTimeInfo().exists()).toBe(false);
expect(findChartButtons().exists()).toBe(false);
expect(wrapper.findComponent(GlTable).exists()).toBe(false);
});
});
});
ee/spec/frontend/security_dashboard/components/first_class_vulnerability_severities_spec.js
View file @ 9d02731f
import { GlLink } from '@gitlab/ui';
import { GlLink, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import VulnerabilitySeverity from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
......@@ -29,25 +29,19 @@ describe('Vulnerability Severity component', () => {
.findAll('[data-testid="vulnerability-severity-groups"]')
.wrappers.map((item) => trimText(item.text()));
const createApolloProvider = (...queries) => {
return createMockApollo([...queries]);
};
const createComponent = ({ propsData, data, apolloProvider, provide }) => {
const createComponent = ({ provide, query, mockData } = {}) => {
return shallowMount(VulnerabilitySeverity, {
localVue,
apolloProvider,
apolloProvider: createMockApollo([[query, jest.fn().mockResolvedValue(mockData)]]),
propsData: {
query: {},
query,
helpPagePath,
...propsData,
},
provide: { groupFullPath: undefined, ...provide },
stubs: {
Accordion,
AccordionItem,
},
data,
});
};
......@@ -59,20 +53,14 @@ describe('Vulnerability Severity component', () => {
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when loading the project severity component for group level dashboard', () => {
beforeEach(() => {
const apolloProvider = createApolloProvider([
groupVulnerabilityGradesQuery,
jest.fn().mockResolvedValue(mockGroupVulnerabilityGrades()),
]);
wrapper = createComponent({
propsData: { query: groupVulnerabilityGradesQuery },
provide: { groupFullPath: 'gitlab-org' },
apolloProvider,
query: groupVulnerabilityGradesQuery,
mockData: mockGroupVulnerabilityGrades(),
});
return wrapper.vm.$nextTick();
......@@ -91,14 +79,9 @@ describe('Vulnerability Severity component', () => {
describe('when loading the project severity component for instance level dashboard', () => {
beforeEach(() => {
const apolloProvider = createApolloProvider([
instanceVulnerabilityGradesQuery,
jest.fn().mockResolvedValue(mockInstanceVulnerabilityGrades()),
]);
wrapper = createComponent({
propsData: { query: instanceVulnerabilityGradesQuery },
apolloProvider,
query: instanceVulnerabilityGradesQuery,
mockData: mockInstanceVulnerabilityGrades(),
});
return wrapper.vm.$nextTick();
......@@ -117,7 +100,10 @@ describe('Vulnerability Severity component', () => {
describe('for all cases', () => {
beforeEach(() => {
wrapper = createComponent({});
wrapper = createComponent({
query: instanceVulnerabilityGradesQuery,
mockData: mockInstanceVulnerabilityGrades(),
});
});
it('has the link to the help page', () => {
......@@ -151,14 +137,9 @@ describe('Vulnerability Severity component', () => {
beforeEach(async () => {
// Here instance or group does not matter. We just need some data to test
// common functionality.
const apolloProvider = createApolloProvider([
instanceVulnerabilityGradesQuery,
jest.fn().mockResolvedValue(mockInstanceVulnerabilityGrades()),
]);
wrapper = createComponent({
propsData: { query: instanceVulnerabilityGradesQuery },
apolloProvider,
query: instanceVulnerabilityGradesQuery,
mockData: mockInstanceVulnerabilityGrades(),
});
await wrapper.vm.$nextTick();
......@@ -194,4 +175,18 @@ describe('Vulnerability Severity component', () => {
});
},
);
describe('when query is loading', () => {
it('only shows the header and loading icon', () => {
wrapper = createComponent({
query: instanceVulnerabilityGradesQuery,
mockData: mockInstanceVulnerabilityGrades(),
});
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
expect(findHeader().exists()).toBe(true);
expect(findDescription().exists()).toBe(false);
expect(wrapper.findComponent(Accordion).exists()).toBe(false);
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7