kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use gl-empty-state for monitor charts 

Move a unit test to jest and use snapshot tests
This commit is contained in:
Simon Knox 2019-07-03 00:51:32 +10:00
parent 19dc110552
commit 824ec018a1
6 changed files with 117 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/monitoring/components/dashboard.vue
View File

@ -124,6 +124,11 @@ export default {
required: false,
default: '',
},
smallEmptyState: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
@ -386,6 +391,7 @@ export default {
:empty-loading-svg-path="emptyLoadingSvgPath"
:empty-no-data-svg-path="emptyNoDataSvgPath"
:empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
:compact="smallEmptyState"
/>
</div>
</template>

65
app/assets/javascripts/monitoring/components/empty_state.vue
View File

@ -1,7 +1,11 @@
<script>
import { __ } from '~/locale';
import { GlEmptyState } from '@gitlab/ui';
export default {
components: {
GlEmptyState,
},
props: {
documentationPath: {
type: String,
@ -37,6 +41,11 @@ export default {
type: String,
required: true,
},
compact: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
@ -58,6 +67,8 @@ export default {
If this takes a long time, ensure that data is available.`),
buttonText: __('View documentation'),
buttonPath: this.documentationPath,
secondaryButtonText: '',
secondaryButtonPath: '',
},
noData: {
svgUrl: this.emptyNoDataSvgPath,
@ -66,13 +77,19 @@ export default {
no data to display.`),
buttonText: __('Configure Prometheus'),
buttonPath: this.settingsPath,
secondaryButtonText: '',
secondaryButtonPath: '',
},
unableToConnect: {
svgUrl: this.emptyUnableToConnectSvgPath,
title: __('Unable to connect to Prometheus server'),
description: 'Ensure connectivity is available from the GitLab server to the ',
description: __(
'Ensure connectivity is available from the GitLab server to the Prometheus server',
),
buttonText: __('View documentation'),
buttonPath: this.documentationPath,
secondaryButtonText: __('Configure Prometheus'),
secondaryButtonPath: this.settingsPath,
},
},
};
@ -81,45 +98,19 @@ export default {
currentState() {
return this.states[this.selectedState];
},
showButtonDescription() {
if (this.selectedState === 'unableToConnect') return true;
return false;
},
},
};
</script>
<template>
<div class="row empty-state js-empty-state">
<div class="col-12">
<div class="state-svg svg-content">
<img :src="currentState.svgUrl" />
</div>
</div>
<div class="col-12">
<div class="text-content">
<h4 class="state-title text-center">{{ currentState.title }}</h4>
<p class="state-description">
{{ currentState.description }}
<a v-if="showButtonDescription" :href="settingsPath">{{ __('Prometheus server') }}</a>
</p>
<div class="text-center">
<a
v-if="currentState.buttonPath"
:href="currentState.buttonPath"
class="btn btn-success"
>{{ currentState.buttonText }}</a
>
<a
v-if="currentState.secondaryButtonPath"
:href="currentState.secondaryButtonPath"
class="btn"
>{{ currentState.secondaryButtonText }}</a
>
</div>
</div>
</div>
</div>
<gl-empty-state
:title="currentState.title"
:description="currentState.description"
:primary-button-text="currentState.buttonText"
:primary-button-link="currentState.buttonPath"
:secondary-button-text="currentState.secondaryButtonText"
:secondary-button-link="currentState.secondaryButtonPath"
:svg-path="currentState.svgUrl"
:compact="compact"
/>
</template>

6
locale/gitlab.pot
View File

@ -3995,6 +3995,9 @@ msgstr ""
msgid "Enforce DNS rebinding attack protection"
msgstr ""
msgid "Ensure connectivity is available from the GitLab server to the Prometheus server"
msgstr ""
msgid "Enter at least three characters to search"
msgstr ""
@ -8330,9 +8333,6 @@ msgstr ""
msgid "ProjectsDropdown|This feature requires browser localStorage support"
msgstr ""
msgid "Prometheus server"
msgstr ""
msgid "PrometheusService|%{exporters} with %{metrics} were found"
msgstr ""

37
spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap Normal file
View File

@ -0,0 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EmptyState shows gettingStarted state 1`] = `
<glemptystate-stub
description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
primarybuttonlink="/clustersPath"
primarybuttontext="Install on clusters"
secondarybuttonlink="/settingsPath"
secondarybuttontext="Configure existing installation"
svgpath="/path/to/getting-started.svg"
title="Get started with performance monitoring"
/>
`;
exports[`EmptyState shows loading state 1`] = `
<glemptystate-stub
description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
primarybuttonlink="/documentationPath"
primarybuttontext="View documentation"
secondarybuttonlink=""
secondarybuttontext=""
svgpath="/path/to/loading.svg"
title="Waiting for performance data"
/>
`;
exports[`EmptyState shows unableToConnect state 1`] = `
<glemptystate-stub
description="Ensure connectivity is available from the GitLab server to the Prometheus server"
primarybuttonlink="/documentationPath"
primarybuttontext="View documentation"
secondarybuttonlink="/settingsPath"
secondarybuttontext="Configure Prometheus"
svgpath="/path/to/unable-to-connect.svg"
title="Unable to connect to Prometheus server"
/>
`;

43
spec/frontend/monitoring/dashboard_state_spec.js Normal file
View File

@ -0,0 +1,43 @@
import { shallowMount } from '@vue/test-utils';
import EmptyState from '~/monitoring/components/empty_state.vue';
function createComponent(props) {
return shallowMount(EmptyState, {
propsData: {
...props,
settingsPath: '/settingsPath',
clustersPath: '/clustersPath',
documentationPath: '/documentationPath',
emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
emptyLoadingSvgPath: '/path/to/loading.svg',
emptyNoDataSvgPath: '/path/to/no-data.svg',
emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
},
});
}
describe('EmptyState', () => {
it('shows gettingStarted state', () => {
const wrapper = createComponent({
selectedState: 'gettingStarted',
});
expect(wrapper.element).toMatchSnapshot();
});
it('shows loading state', () => {
const wrapper = createComponent({
selectedState: 'loading',
});
expect(wrapper.element).toMatchSnapshot();
});
it('shows unableToConnect state', () => {
const wrapper = createComponent({
selectedState: 'unableToConnect',
});
expect(wrapper.element).toMatchSnapshot();
});
});

101
spec/javascripts/monitoring/dashboard_state_spec.js
View File

@ -1,101 +0,0 @@
import Vue from 'vue';
import EmptyState from '~/monitoring/components/empty_state.vue';
import { statePaths } from './mock_data';
function createComponent(props) {
const Component = Vue.extend(EmptyState);
return new Component({
propsData: {
...props,
settingsPath: statePaths.settingsPath,
clustersPath: statePaths.clustersPath,
documentationPath: statePaths.documentationPath,
emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
emptyLoadingSvgPath: '/path/to/loading.svg',
emptyNoDataSvgPath: '/path/to/no-data.svg',
emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
},
}).$mount();
}
function getTextFromNode(component, selector) {
return component.$el.querySelector(selector).firstChild.nodeValue.trim();
}
describe('EmptyState', () => {
describe('Computed props', () => {
it('currentState', () => {
const component = createComponent({
selectedState: 'gettingStarted',
});
expect(component.currentState).toBe(component.states.gettingStarted);
});
it('showButtonDescription returns a description with a link for the unableToConnect state', () => {
const component = createComponent({
selectedState: 'unableToConnect',
});
expect(component.showButtonDescription).toEqual(true);
});
it('showButtonDescription returns the description without a link for any other state', () => {
const component = createComponent({
selectedState: 'loading',
});
expect(component.showButtonDescription).toEqual(false);
});
});
it('should show the gettingStarted state', () => {
const component = createComponent({
selectedState: 'gettingStarted',
});
expect(component.$el.querySelector('svg')).toBeDefined();
expect(getTextFromNode(component, '.state-title')).toEqual(
component.states.gettingStarted.title,
);
expect(getTextFromNode(component, '.state-description')).toEqual(
component.states.gettingStarted.description,
);
expect(getTextFromNode(component, '.btn-success')).toEqual(
component.states.gettingStarted.buttonText,
);
});
it('should show the loading state', () => {
const component = createComponent({
selectedState: 'loading',
});
expect(component.$el.querySelector('svg')).toBeDefined();
expect(getTextFromNode(component, '.state-title')).toEqual(component.states.loading.title);
expect(getTextFromNode(component, '.state-description')).toEqual(
component.states.loading.description,
);
expect(getTextFromNode(component, '.btn-success')).toEqual(component.states.loading.buttonText);
});
it('should show the unableToConnect state', () => {
const component = createComponent({
selectedState: 'unableToConnect',
});
expect(component.$el.querySelector('svg')).toBeDefined();
expect(getTextFromNode(component, '.state-title')).toEqual(
component.states.unableToConnect.title,
);
expect(component.$el.querySelector('.state-description a')).toBeDefined();
expect(getTextFromNode(component, '.btn-success')).toEqual(
component.states.unableToConnect.buttonText,
);
});
});