109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script>
|
|
import { GlEmptyState, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
|
|
import { __, sprintf } from '~/locale';
|
|
import { metricStates } from '../constants';
|
|
|
|
export default {
|
|
components: {
|
|
GlEmptyState,
|
|
},
|
|
directives: {
|
|
SafeHtml,
|
|
},
|
|
props: {
|
|
documentationPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
settingsPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
selectedState: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
svgPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
const documentationLink = `<a href="${this.documentationPath}">${__('More information')}</a>`;
|
|
return {
|
|
states: {
|
|
[metricStates.NO_DATA]: {
|
|
title: __('No data to display'),
|
|
slottedDescription: sprintf(
|
|
__(
|
|
'The data source is connected, but there is no data to display. %{documentationLink}',
|
|
),
|
|
{ documentationLink },
|
|
false,
|
|
),
|
|
},
|
|
[metricStates.TIMEOUT]: {
|
|
title: __('Connection timed out'),
|
|
slottedDescription: sprintf(
|
|
__(
|
|
"Charts can't be displayed as the request for data has timed out. %{documentationLink}",
|
|
),
|
|
{ documentationLink },
|
|
false,
|
|
),
|
|
},
|
|
[metricStates.CONNECTION_FAILED]: {
|
|
title: __('Connection failed'),
|
|
description: __(`We couldn't reach the Prometheus server.
|
|
Either the server no longer exists or the configuration details need updating.`),
|
|
buttonText: __('Verify configuration'),
|
|
buttonPath: this.settingsPath,
|
|
},
|
|
[metricStates.BAD_QUERY]: {
|
|
title: __('Query cannot be processed'),
|
|
slottedDescription: sprintf(
|
|
__(
|
|
`The Prometheus server responded with "bad request".
|
|
Please check your queries are correct and are supported in your Prometheus version. %{documentationLink}`,
|
|
),
|
|
{ documentationLink },
|
|
false,
|
|
),
|
|
buttonText: __('Verify configuration'),
|
|
buttonPath: this.settingsPath,
|
|
},
|
|
[metricStates.LOADING]: {
|
|
title: __('Waiting for performance data'),
|
|
description: __(`Creating graphs uses the data from the Prometheus server.
|
|
If this takes a long time, ensure that data is available.`),
|
|
},
|
|
[metricStates.UNKNOWN_ERROR]: {
|
|
title: __('An error has occurred'),
|
|
description: __('An error occurred while loading the data. Please try again.'),
|
|
},
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
currentState() {
|
|
return this.states[this.selectedState] || this.states[metricStates.UNKNOWN_ERROR];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<gl-empty-state
|
|
:title="currentState.title"
|
|
:primary-button-text="currentState.buttonText"
|
|
:primary-button-link="currentState.buttonPath"
|
|
:description="currentState.description"
|
|
:svg-path="svgPath"
|
|
:compact="true"
|
|
>
|
|
<template v-if="currentState.slottedDescription" #description>
|
|
<div v-safe-html="currentState.slottedDescription"></div>
|
|
</template>
|
|
</gl-empty-state>
|
|
</template>
|