Commit 824ec018 authored by Simon Knox's avatar Simon Knox

Use gl-empty-state for monitor charts

Move a unit test to jest and use snapshot tests
parent 19dc1105
...@@ -124,6 +124,11 @@ export default { ...@@ -124,6 +124,11 @@ export default {
required: false, required: false,
default: '', default: '',
}, },
smallEmptyState: {
type: Boolean,
required: false,
default: false,
},
}, },
data() { data() {
return { return {
...@@ -386,6 +391,7 @@ export default { ...@@ -386,6 +391,7 @@ export default {
:empty-loading-svg-path="emptyLoadingSvgPath" :empty-loading-svg-path="emptyLoadingSvgPath"
:empty-no-data-svg-path="emptyNoDataSvgPath" :empty-no-data-svg-path="emptyNoDataSvgPath"
:empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath" :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
:compact="smallEmptyState"
/> />
</div> </div>
</template> </template>
<script> <script>
import { __ } from '~/locale'; import { __ } from '~/locale';
import { GlEmptyState } from '@gitlab/ui';
export default { export default {
components: {
GlEmptyState,
},
props: { props: {
documentationPath: { documentationPath: {
type: String, type: String,
...@@ -37,6 +41,11 @@ export default { ...@@ -37,6 +41,11 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
compact: {
type: Boolean,
required: false,
default: false,
},
}, },
data() { data() {
return { return {
...@@ -58,6 +67,8 @@ export default { ...@@ -58,6 +67,8 @@ export default {
If this takes a long time, ensure that data is available.`), If this takes a long time, ensure that data is available.`),
buttonText: __('View documentation'), buttonText: __('View documentation'),
buttonPath: this.documentationPath, buttonPath: this.documentationPath,
secondaryButtonText: '',
secondaryButtonPath: '',
}, },
noData: { noData: {
svgUrl: this.emptyNoDataSvgPath, svgUrl: this.emptyNoDataSvgPath,
...@@ -66,13 +77,19 @@ export default { ...@@ -66,13 +77,19 @@ export default {
no data to display.`), no data to display.`),
buttonText: __('Configure Prometheus'), buttonText: __('Configure Prometheus'),
buttonPath: this.settingsPath, buttonPath: this.settingsPath,
secondaryButtonText: '',
secondaryButtonPath: '',
}, },
unableToConnect: { unableToConnect: {
svgUrl: this.emptyUnableToConnectSvgPath, svgUrl: this.emptyUnableToConnectSvgPath,
title: __('Unable to connect to Prometheus server'), 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'), buttonText: __('View documentation'),
buttonPath: this.documentationPath, buttonPath: this.documentationPath,
secondaryButtonText: __('Configure Prometheus'),
secondaryButtonPath: this.settingsPath,
}, },
}, },
}; };
...@@ -81,45 +98,19 @@ export default { ...@@ -81,45 +98,19 @@ export default {
currentState() { currentState() {
return this.states[this.selectedState]; return this.states[this.selectedState];
}, },
showButtonDescription() {
if (this.selectedState === 'unableToConnect') return true;
return false;
},
}, },
}; };
</script> </script>
<template> <template>
<div class="row empty-state js-empty-state"> <gl-empty-state
<div class="col-12"> :title="currentState.title"
<div class="state-svg svg-content"> :description="currentState.description"
<img :src="currentState.svgUrl" /> :primary-button-text="currentState.buttonText"
</div> :primary-button-link="currentState.buttonPath"
</div> :secondary-button-text="currentState.secondaryButtonText"
:secondary-button-link="currentState.secondaryButtonPath"
<div class="col-12"> :svg-path="currentState.svgUrl"
<div class="text-content"> :compact="compact"
<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>
</template> </template>
...@@ -3995,6 +3995,9 @@ msgstr "" ...@@ -3995,6 +3995,9 @@ msgstr ""
msgid "Enforce DNS rebinding attack protection" msgid "Enforce DNS rebinding attack protection"
msgstr "" msgstr ""
msgid "Ensure connectivity is available from the GitLab server to the Prometheus server"
msgstr ""
msgid "Enter at least three characters to search" msgid "Enter at least three characters to search"
msgstr "" msgstr ""
...@@ -8330,9 +8333,6 @@ msgstr "" ...@@ -8330,9 +8333,6 @@ msgstr ""
msgid "ProjectsDropdown|This feature requires browser localStorage support" msgid "ProjectsDropdown|This feature requires browser localStorage support"
msgstr "" msgstr ""
msgid "Prometheus server"
msgstr ""
msgid "PrometheusService|%{exporters} with %{metrics} were found" msgid "PrometheusService|%{exporters} with %{metrics} were found"
msgstr "" msgstr ""
......
// 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"
/>
`;
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();
});
});
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,
);
});
});
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