|
|
|
<script>
|
|
|
|
import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
|
|
|
|
import {
|
|
|
|
GlButton,
|
|
|
|
GlDropdown,
|
|
|
|
GlDropdownItem,
|
|
|
|
GlModal,
|
|
|
|
GlModalDirective,
|
|
|
|
GlLink,
|
|
|
|
} from '@gitlab/ui';
|
|
|
|
import _ from 'underscore';
|
|
|
|
import { s__ } from '~/locale';
|
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
| ... | ... | @@ -27,8 +34,11 @@ export default { |
|
|
|
GlDropdown,
|
|
|
|
GlDropdownItem,
|
|
|
|
GlLink,
|
|
|
|
GlModal,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlModalDirective,
|
|
|
|
},
|
|
|
|
|
|
|
|
props: {
|
|
|
|
externalDashboardPath: {
|
|
|
|
type: String,
|
| ... | ... | @@ -102,6 +112,19 @@ export default { |
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
customMetricsAvailable: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
customMetricsPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
validateQueryPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
| ... | ... | @@ -111,8 +134,14 @@ export default { |
|
|
|
elWidth: 0,
|
|
|
|
selectedTimeWindow: '',
|
|
|
|
selectedTimeWindowKey: '',
|
|
|
|
formIsValid: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
canAddMetrics() {
|
|
|
|
return this.customMetricsAvailable && this.customMetricsPath.length;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.service = new MonitoringService({
|
|
|
|
metricsEndpoint: this.metricsEndpoint,
|
| ... | ... | @@ -193,11 +222,20 @@ export default { |
|
|
|
this.state = 'unableToConnect';
|
|
|
|
});
|
|
|
|
},
|
|
|
|
hideAddMetricModal() {
|
|
|
|
this.$refs.addMetricModal.hide();
|
|
|
|
},
|
|
|
|
onSidebarMutation() {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.elWidth = this.$el.clientWidth;
|
|
|
|
}, sidebarAnimationDuration);
|
|
|
|
},
|
|
|
|
setFormValidity(isValid) {
|
|
|
|
this.formIsValid = isValid;
|
|
|
|
},
|
|
|
|
submitCustomMetricsForm() {
|
|
|
|
this.$refs.customMetricsForm.submit();
|
|
|
|
},
|
|
|
|
activeTimeWindow(key) {
|
|
|
|
return this.timeWindows[key] === this.selectedTimeWindow;
|
|
|
|
},
|
| ... | ... | @@ -205,11 +243,16 @@ export default { |
|
|
|
return `?time_window=${key}`;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
addMetric: {
|
|
|
|
title: s__('Metrics|Add metric'),
|
|
|
|
modalId: 'add-metric',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
|
|
|
|
<div v-if="!showEmptyState" class="prometheus-graphs">
|
|
|
|
<div class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between">
|
|
|
|
<div
|
|
|
|
v-if="environmentsEndpoint"
|
|
|
|
class="dropdowns d-flex align-items-center justify-content-between"
|
| ... | ... | @@ -225,7 +268,6 @@ export default { |
|
|
|
<gl-dropdown-item
|
|
|
|
v-for="environment in store.environmentsData"
|
|
|
|
:key="environment.id"
|
|
|
|
:href="environment.metrics_path"
|
|
|
|
:active="environment.name === currentEnvironmentName"
|
|
|
|
active-class="is-active"
|
|
|
|
>{{ environment.name }}</gl-dropdown-item
|
| ... | ... | @@ -247,9 +289,44 @@ export default { |
|
|
|
>
|
|
|
|
</gl-dropdown>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex">
|
|
|
|
<div v-if="isEE && canAddMetrics">
|
|
|
|
<gl-button
|
|
|
|
v-gl-modal-directive="$options.addMetric.modalId"
|
|
|
|
class="js-add-metric-button text-success border-success"
|
|
|
|
>
|
|
|
|
{{ $options.addMetric.title }}
|
|
|
|
</gl-button>
|
|
|
|
<gl-modal
|
|
|
|
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>
|
|
|
|
</div>
|
|
|
|
<gl-button
|
|
|
|
v-if="externalDashboardPath.length"
|
|
|
|
class="js-external-dashboard-link"
|
|
|
|
class="js-external-dashboard-link prepend-left-8"
|
|
|
|
variant="primary"
|
|
|
|
:href="externalDashboardPath"
|
|
|
|
>
|
| ... | ... | @@ -257,6 +334,7 @@ export default { |
|
|
|
<icon name="external-link" />
|
|
|
|
</gl-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<graph-group
|
|
|
|
v-for="(groupData, index) in store.groups"
|
|
|
|
:key="index"
|
| ... | ... | |
| ... | ... | |