Skip to content

G
gitlab-ce
Commit dee95b0d authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 141 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ dee95b0d
......@@ -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>
app/assets/javascripts/monitoring/components/empty_state.vue
View file @ dee95b0d
<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>
locale/gitlab.pot
View file @ dee95b0d
......@@ -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 ""
......
spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap 0 → 100644
View file @ dee95b0d
// 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"
/>
`;
spec/frontend/monitoring/dashboard_state_spec.js 0 → 100644
View file @ dee95b0d
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();
});
});
spec/javascripts/monitoring/dashboard_state_spec.js deleted 100644 → 0
View file @ 5f28a80a
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7