Commit dee95b0d authored by Phil Hughes's avatar Phil Hughes

Merge branch 'little-cluster-health-charts-ce' into 'master'

Use gl-empty-state for monitor charts

See merge request gitlab-org/gitlab-ce!30268
parents 5f28a80a 824ec018
......@@ -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>
<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>
......@@ -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 ""
......
// 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