debian-mirror-gitlab/app/assets/javascripts/monitoring/components/dashboard.vue

538 lines
16 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2019-10-12 21:52:04 +05:30
import {
GlButton,
GlDropdown,
GlDropdownItem,
GlFormGroup,
GlModal,
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
2019-07-07 11:18:12 +05:30
import _ from 'underscore';
2019-09-04 21:01:54 +05:30
import { mapActions, mapState } from 'vuex';
2019-10-12 21:52:04 +05:30
import { __, s__ } from '~/locale';
2018-11-08 19:23:39 +05:30
import Icon from '~/vue_shared/components/icon.vue';
2019-10-12 21:52:04 +05:30
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
2019-09-04 21:01:54 +05:30
import invalidUrl from '~/lib/utils/invalid_url';
2019-12-04 20:38:33 +05:30
import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
import MonitorTimeSeriesChart from './charts/time_series.vue';
2019-09-30 21:07:59 +05:30
import MonitorSingleStatChart from './charts/single_stat.vue';
2018-05-09 12:01:36 +05:30
import GraphGroup from './graph_group.vue';
import EmptyState from './empty_state.vue';
2019-10-12 21:52:04 +05:30
import { sidebarAnimationDuration, timeWindows } from '../constants';
import { getTimeDiff, getTimeWindow } from '../utils';
2019-03-02 22:35:43 +05:30
let sidebarMutationObserver;
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
components: {
2019-12-04 20:38:33 +05:30
MonitorTimeSeriesChart,
2019-09-30 21:07:59 +05:30
MonitorSingleStatChart,
PanelType,
2018-05-09 12:01:36 +05:30
GraphGroup,
EmptyState,
2018-11-08 19:23:39 +05:30
Icon,
2019-07-31 22:56:46 +05:30
GlButton,
2019-07-07 11:18:12 +05:30
GlDropdown,
GlDropdownItem,
2019-10-12 21:52:04 +05:30
GlFormGroup,
2019-07-31 22:56:46 +05:30
GlModal,
},
directives: {
2019-10-12 21:52:04 +05:30
GlModal: GlModalDirective,
GlTooltip: GlTooltipDirective,
2018-05-09 12:01:36 +05:30
},
props: {
2019-09-04 21:01:54 +05:30
externalDashboardUrl: {
2019-07-31 22:56:46 +05:30
type: String,
required: false,
default: '',
},
2018-05-09 12:01:36 +05:30
hasMetrics: {
type: Boolean,
required: false,
default: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
showPanels: {
type: Boolean,
required: false,
default: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
documentationPath: {
type: String,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
settingsPath: {
type: String,
required: true,
},
clustersPath: {
type: String,
required: true,
},
tagsPath: {
type: String,
required: true,
},
projectPath: {
type: String,
required: true,
},
metricsEndpoint: {
type: String,
required: true,
},
2019-09-04 21:01:54 +05:30
deploymentsEndpoint: {
2018-05-09 12:01:36 +05:30
type: String,
required: false,
default: null,
},
emptyGettingStartedSvgPath: {
type: String,
required: true,
},
emptyLoadingSvgPath: {
type: String,
required: true,
},
emptyNoDataSvgPath: {
type: String,
required: true,
},
emptyUnableToConnectSvgPath: {
type: String,
required: true,
},
2018-11-08 19:23:39 +05:30
environmentsEndpoint: {
type: String,
required: true,
},
currentEnvironmentName: {
type: String,
required: true,
},
2019-07-31 22:56:46 +05:30
customMetricsAvailable: {
type: Boolean,
required: false,
default: false,
},
customMetricsPath: {
type: String,
2019-09-30 21:07:59 +05:30
required: false,
default: invalidUrl,
2019-07-31 22:56:46 +05:30
},
validateQueryPath: {
type: String,
2019-09-30 21:07:59 +05:30
required: false,
default: invalidUrl,
2019-07-31 22:56:46 +05:30
},
2019-09-04 21:01:54 +05:30
dashboardEndpoint: {
type: String,
required: false,
default: invalidUrl,
},
2019-09-30 21:07:59 +05:30
currentDashboard: {
type: String,
required: false,
default: '',
},
smallEmptyState: {
type: Boolean,
required: false,
default: false,
},
2019-12-04 20:38:33 +05:30
alertsEndpoint: {
type: String,
required: false,
default: null,
},
prometheusAlertsAvailable: {
type: Boolean,
required: false,
default: false,
},
2018-05-09 12:01:36 +05:30
},
data() {
return {
state: 'gettingStarted',
2018-12-05 23:21:45 +05:30
elWidth: 0,
2019-07-07 11:18:12 +05:30
selectedTimeWindow: '',
2019-07-31 22:56:46 +05:30
selectedTimeWindowKey: '',
formIsValid: null,
2019-10-12 21:52:04 +05:30
timeWindows: {},
2018-05-09 12:01:36 +05:30
};
},
2019-07-31 22:56:46 +05:30
computed: {
canAddMetrics() {
return this.customMetricsAvailable && this.customMetricsPath.length;
},
2019-09-04 21:01:54 +05:30
...mapState('monitoringDashboard', [
'groups',
'emptyState',
'showEmptyState',
'environments',
'deploymentData',
'metricsWithData',
'useDashboardEndpoint',
2019-09-30 21:07:59 +05:30
'allDashboards',
'multipleDashboardsEnabled',
'additionalPanelTypesEnabled',
2019-09-04 21:01:54 +05:30
]),
2019-10-12 21:52:04 +05:30
firstDashboard() {
return this.allDashboards[0] || {};
2019-09-04 21:01:54 +05:30
},
2019-09-30 21:07:59 +05:30
selectedDashboardText() {
2019-10-12 21:52:04 +05:30
return this.currentDashboard || this.firstDashboard.display_name;
2019-09-30 21:07:59 +05:30
},
addingMetricsAvailable() {
return IS_EE && this.canAddMetrics && !this.showEmptyState;
},
alertWidgetAvailable() {
return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint;
},
2019-07-31 22:56:46 +05:30
},
2018-05-09 12:01:36 +05:30
created() {
2019-09-04 21:01:54 +05:30
this.setEndpoints({
2018-05-09 12:01:36 +05:30
metricsEndpoint: this.metricsEndpoint,
2018-11-08 19:23:39 +05:30
environmentsEndpoint: this.environmentsEndpoint,
2019-09-04 21:01:54 +05:30
deploymentsEndpoint: this.deploymentsEndpoint,
dashboardEndpoint: this.dashboardEndpoint,
2019-09-30 21:07:59 +05:30
currentDashboard: this.currentDashboard,
projectPath: this.projectPath,
2018-05-09 12:01:36 +05:30
});
},
beforeDestroy() {
2019-03-02 22:35:43 +05:30
if (sidebarMutationObserver) {
sidebarMutationObserver.disconnect();
}
2018-05-09 12:01:36 +05:30
},
mounted() {
if (!this.hasMetrics) {
2019-09-04 21:01:54 +05:30
this.setGettingStartedEmptyState();
2018-05-09 12:01:36 +05:30
} else {
2019-10-12 21:52:04 +05:30
const defaultRange = getTimeDiff();
const start = getParameterValues('start')[0] || defaultRange.start;
const end = getParameterValues('end')[0] || defaultRange.end;
const range = {
start,
end,
};
this.timeWindows = timeWindows;
this.selectedTimeWindowKey = getTimeWindow(range);
this.selectedTimeWindow = this.timeWindows[this.selectedTimeWindowKey];
this.fetchData(range);
2019-09-04 21:01:54 +05:30
2019-03-02 22:35:43 +05:30
sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
attributes: true,
childList: false,
subtree: false,
});
2018-05-09 12:01:36 +05:30
}
},
methods: {
2019-09-04 21:01:54 +05:30
...mapActions('monitoringDashboard', [
'fetchData',
'setGettingStartedEmptyState',
'setEndpoints',
'setDashboardEnabled',
]),
chartsWithData(charts) {
if (!this.useDashboardEndpoint) {
return charts;
}
return charts.filter(chart =>
chart.metrics.some(metric => this.metricsWithData.includes(metric.metric_id)),
);
},
2019-10-12 21:52:04 +05:30
csvText(graphData) {
const chartData = graphData.queries[0].result[0].values;
const yLabel = graphData.y_label;
const header = `timestamp,${yLabel}\r\n`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
return chartData.reduce((csv, data) => {
const row = data.join(',');
return `${csv}${row}\r\n`;
}, header);
},
downloadCsv(graphData) {
const data = new Blob([this.csvText(graphData)], { type: 'text/plain' });
return window.URL.createObjectURL(data);
},
2019-09-30 21:07:59 +05:30
// TODO: BEGIN, Duplicated code with panel_type until feature flag is removed
2019-12-04 20:38:33 +05:30
// Issue number: https://gitlab.com/gitlab-org/gitlab-foss/issues/63845
2019-07-07 11:18:12 +05:30
getGraphAlerts(queries) {
if (!this.allAlerts) return {};
const metricIdsForChart = queries.map(q => q.metricId);
return _.pick(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId));
},
getGraphAlertValues(queries) {
return Object.values(this.getGraphAlerts(queries));
2019-02-15 15:39:39 +05:30
},
2019-10-12 21:52:04 +05:30
showToast() {
this.$toast.show(__('Link copied to clipboard'));
},
2019-09-30 21:07:59 +05:30
// TODO: END
2019-10-12 21:52:04 +05:30
generateLink(group, title, yLabel) {
const dashboard = this.currentDashboard || this.firstDashboard.path;
const params = _.pick({ dashboard, group, title, y_label: yLabel }, value => value != null);
return mergeUrlParams(params, window.location.href);
},
2019-07-31 22:56:46 +05:30
hideAddMetricModal() {
this.$refs.addMetricModal.hide();
2019-07-07 11:18:12 +05:30
},
2019-03-02 22:35:43 +05:30
onSidebarMutation() {
setTimeout(() => {
this.elWidth = this.$el.clientWidth;
}, sidebarAnimationDuration);
2018-03-17 18:26:18 +05:30
},
2019-07-31 22:56:46 +05:30
setFormValidity(isValid) {
this.formIsValid = isValid;
},
submitCustomMetricsForm() {
this.$refs.customMetricsForm.submit();
},
2019-07-07 11:18:12 +05:30
activeTimeWindow(key) {
return this.timeWindows[key] === this.selectedTimeWindow;
},
2019-07-31 22:56:46 +05:30
setTimeWindowParameter(key) {
2019-10-12 21:52:04 +05:30
const { start, end } = getTimeDiff(key);
return `?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
},
groupHasData(group) {
return this.chartsWithData(group.metrics).length > 0;
2019-07-31 22:56:46 +05:30
},
},
addMetric: {
title: s__('Metrics|Add metric'),
modalId: 'add-metric',
2018-05-09 12:01:36 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2019-09-30 21:07:59 +05:30
<div class="prometheus-graphs">
2019-10-12 21:52:04 +05:30
<div class="gl-p-3 pb-0 border-bottom bg-gray-light">
<div class="row">
<template v-if="environmentsEndpoint">
<gl-form-group
v-if="multipleDashboardsEnabled"
:label="__('Dashboard')"
label-size="sm"
label-for="monitor-dashboards-dropdown"
class="col-sm-12 col-md-4 col-lg-2"
2019-09-30 21:07:59 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown
id="monitor-dashboards-dropdown"
class="mb-0 d-flex js-dashboards-dropdown"
toggle-class="dropdown-menu-toggle"
:text="selectedDashboardText"
2019-09-30 21:07:59 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown-item
v-for="dashboard in allDashboards"
:key="dashboard.path"
:active="dashboard.path === currentDashboard"
active-class="is-active"
:href="`?dashboard=${dashboard.path}`"
>{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
>
</gl-dropdown>
</gl-form-group>
<gl-form-group
:label="s__('Metrics|Environment')"
label-size="sm"
label-for="monitor-environments-dropdown"
class="col-sm-6 col-md-4 col-lg-2"
2019-07-07 11:18:12 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown
id="monitor-environments-dropdown"
class="mb-0 d-flex js-environments-dropdown"
toggle-class="dropdown-menu-toggle"
:text="currentEnvironmentName"
:disabled="environments.length === 0"
2019-07-31 22:56:46 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown-item
v-for="environment in environments"
:key="environment.id"
:active="environment.name === currentEnvironmentName"
active-class="is-active"
:href="environment.metrics_path"
>{{ environment.name }}</gl-dropdown-item
>
</gl-dropdown>
</gl-form-group>
<gl-form-group
v-if="!showEmptyState"
:label="s__('Metrics|Show last')"
label-size="sm"
label-for="monitor-time-window-dropdown"
class="col-sm-6 col-md-4 col-lg-2"
2019-07-31 22:56:46 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown
id="monitor-time-window-dropdown"
class="mb-0 d-flex js-time-window-dropdown"
toggle-class="dropdown-menu-toggle"
:text="selectedTimeWindow"
2019-07-31 22:56:46 +05:30
>
2019-10-12 21:52:04 +05:30
<gl-dropdown-item
v-for="(value, key) in timeWindows"
:key="key"
:active="activeTimeWindow(key)"
:href="setTimeWindowParameter(key)"
active-class="active"
>{{ value }}</gl-dropdown-item
2019-07-31 22:56:46 +05:30
>
2019-10-12 21:52:04 +05:30
</gl-dropdown>
</gl-form-group>
</template>
<gl-form-group
v-if="addingMetricsAvailable || externalDashboardUrl.length"
label-for="prometheus-graphs-dropdown-buttons"
class="dropdown-buttons col-lg d-lg-flex align-items-end"
2019-07-31 22:56:46 +05:30
>
2019-10-12 21:52:04 +05:30
<div id="prometheus-graphs-dropdown-buttons">
<gl-button
v-if="addingMetricsAvailable"
v-gl-modal="$options.addMetric.modalId"
class="mr-2 mt-1 js-add-metric-button text-success border-success"
>
{{ $options.addMetric.title }}
</gl-button>
<gl-modal
v-if="addingMetricsAvailable"
ref="addMetricModal"
:modal-id="$options.addMetric.modalId"
:title="$options.addMetric.title"
>
<form ref="customMetricsForm" :action="customMetricsPath" method="post">
<custom-metrics-form-fields
:validate-query-path="validateQueryPath"
form-operation="post"
@formValidation="setFormValidity"
/>
</form>
<div slot="modal-footer">
<gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
<gl-button
:disabled="!formIsValid"
variant="success"
@click="submitCustomMetricsForm"
>
{{ __('Save changes') }}
</gl-button>
</div>
</gl-modal>
<gl-button
v-if="externalDashboardUrl.length"
class="mt-1 js-external-dashboard-link"
variant="primary"
:href="externalDashboardUrl"
target="_blank"
rel="noopener noreferrer"
>
{{ __('View full dashboard') }}
<icon name="external-link" />
</gl-button>
</div>
</gl-form-group>
2018-11-08 19:23:39 +05:30
</div>
</div>
2019-10-12 21:52:04 +05:30
2019-09-30 21:07:59 +05:30
<div v-if="!showEmptyState">
<graph-group
2019-10-12 21:52:04 +05:30
v-for="(groupData, index) in groups"
:key="`${groupData.group}.${groupData.priority}`"
2019-09-30 21:07:59 +05:30
:name="groupData.group"
:show-panels="showPanels"
2019-10-12 21:52:04 +05:30
:collapse-group="groupHasData(groupData)"
2019-07-07 11:18:12 +05:30
>
2019-09-30 21:07:59 +05:30
<template v-if="additionalPanelTypesEnabled">
<panel-type
2019-10-12 21:52:04 +05:30
v-for="(graphData, graphIndex) in groupData.metrics"
2019-09-30 21:07:59 +05:30
:key="`panel-type-${graphIndex}`"
2019-12-04 20:38:33 +05:30
class="col-12 col-lg-6 pb-3"
2019-10-12 21:52:04 +05:30
:clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
2019-09-30 21:07:59 +05:30
:graph-data="graphData"
:dashboard-width="elWidth"
2019-12-04 20:38:33 +05:30
:alerts-endpoint="alertsEndpoint"
:prometheus-alerts-available="prometheusAlertsAvailable"
2019-10-12 21:52:04 +05:30
:index="`${index}-${graphIndex}`"
2019-09-30 21:07:59 +05:30
/>
</template>
<template v-else>
2019-12-04 20:38:33 +05:30
<monitor-time-series-chart
2019-09-30 21:07:59 +05:30
v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
:key="graphIndex"
2019-12-04 20:38:33 +05:30
class="col-12 col-lg-6 pb-3"
2019-09-30 21:07:59 +05:30
:graph-data="graphData"
:deployment-data="deploymentData"
:thresholds="getGraphAlertValues(graphData.queries)"
:container-width="elWidth"
:project-path="projectPath"
2019-12-04 20:38:33 +05:30
group-id="monitor-time-series-chart"
2019-09-30 21:07:59 +05:30
>
2019-10-12 21:52:04 +05:30
<div class="d-flex align-items-center">
<alert-widget
v-if="alertWidgetAvailable && graphData"
:modal-id="`alert-modal-${index}-${graphIndex}`"
:alerts-endpoint="alertsEndpoint"
:relevant-queries="graphData.queries"
:alerts-to-manage="getGraphAlerts(graphData.queries)"
@setAlerts="setAlerts"
/>
<gl-dropdown
v-gl-tooltip
class="mx-2"
toggle-class="btn btn-transparent border-0"
:right="true"
:no-caret="true"
:title="__('More actions')"
>
<template slot="button-content">
<icon name="ellipsis_v" class="text-secondary" />
</template>
<gl-dropdown-item :href="downloadCsv(graphData)" download="chart_metrics.csv">
{{ __('Download CSV') }}
</gl-dropdown-item>
<gl-dropdown-item
class="js-chart-link"
:data-clipboard-text="
generateLink(groupData.group, graphData.title, graphData.y_label)
"
@click="showToast"
>
{{ __('Generate link to chart') }}
</gl-dropdown-item>
<gl-dropdown-item
v-if="alertWidgetAvailable"
v-gl-modal="`alert-modal-${index}-${graphIndex}`"
>
{{ __('Alerts') }}
</gl-dropdown-item>
</gl-dropdown>
</div>
2019-12-04 20:38:33 +05:30
</monitor-time-series-chart>
2019-09-30 21:07:59 +05:30
</template>
</graph-group>
</div>
<empty-state
v-else
:selected-state="emptyState"
:documentation-path="documentationPath"
:settings-path="settingsPath"
:clusters-path="clustersPath"
:empty-getting-started-svg-path="emptyGettingStartedSvgPath"
:empty-loading-svg-path="emptyLoadingSvgPath"
:empty-no-data-svg-path="emptyNoDataSvgPath"
:empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
:compact="smallEmptyState"
/>
2018-03-17 18:26:18 +05:30
</div>
</template>