debian-mirror-gitlab/app/assets/javascripts/monitoring/components/alert_widget.vue
2020-10-24 23:57:45 +05:30

282 lines
8.8 KiB
Vue

<script>
import { GlBadge, GlLoadingIcon, GlModalDirective, GlIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
import { values, get } from 'lodash';
import { s__ } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import AlertWidgetForm from './alert_widget_form.vue';
import AlertsService from '../services/alerts_service';
import { alertsValidator, queriesValidator } from '../validators';
import { OPERATORS } from '../constants';
export default {
components: {
AlertWidgetForm,
GlBadge,
GlLoadingIcon,
GlIcon,
GlTooltip,
GlSprintf,
},
directives: {
GlModal: GlModalDirective,
},
props: {
alertsEndpoint: {
type: String,
required: true,
},
showLoadingState: {
type: Boolean,
required: false,
default: true,
},
// { [alertPath]: { alert_attributes } }. Populated from subsequent API calls.
// Includes only the metrics/alerts to be managed by this widget.
alertsToManage: {
type: Object,
required: false,
default: () => ({}),
validator: alertsValidator,
},
// [{ metric+query_attributes }]. Represents queries (and alerts) we know about
// on intial fetch. Essentially used for reference.
relevantQueries: {
type: Array,
required: true,
validator: queriesValidator,
},
modalId: {
type: String,
required: true,
},
},
data() {
return {
service: null,
errorMessage: null,
isLoading: false,
apiAction: 'create',
};
},
i18n: {
alertsCountMsg: s__('PrometheusAlerts|%{count} alerts applied'),
singleFiringMsg: s__('PrometheusAlerts|Firing: %{alert}'),
multipleFiringMsg: s__('PrometheusAlerts|%{firingCount} firing'),
firingAlertsTooltip: s__('PrometheusAlerts|Firing: %{alerts}'),
},
computed: {
singleAlertSummary() {
return {
message: this.isFiring ? this.$options.i18n.singleFiringMsg : this.thresholds[0],
alert: this.thresholds[0],
};
},
multipleAlertsSummary() {
return {
message: this.isFiring
? `${this.$options.i18n.alertsCountMsg}, ${this.$options.i18n.multipleFiringMsg}`
: this.$options.i18n.alertsCountMsg,
count: this.thresholds.length,
firingCount: this.firingAlerts.length,
};
},
shouldShowLoadingIcon() {
return this.showLoadingState && this.isLoading;
},
thresholds() {
const alertsToManage = Object.keys(this.alertsToManage);
return alertsToManage.map(this.formatAlertSummary);
},
hasAlerts() {
return Boolean(Object.keys(this.alertsToManage).length);
},
hasMultipleAlerts() {
return this.thresholds.length > 1;
},
isFiring() {
return Boolean(this.firingAlerts.length);
},
firingAlerts() {
return values(this.alertsToManage).filter(alert =>
this.passedAlertThreshold(this.getQueryData(alert), alert),
);
},
formattedFiringAlerts() {
return this.firingAlerts.map(alert => this.formatAlertSummary(alert.alert_path));
},
configuredAlert() {
return this.hasAlerts ? values(this.alertsToManage)[0].metricId : '';
},
},
created() {
this.service = new AlertsService({ alertsEndpoint: this.alertsEndpoint });
this.fetchAlertData();
},
methods: {
fetchAlertData() {
this.isLoading = true;
const queriesWithAlerts = this.relevantQueries.filter(query => query.alert_path);
return Promise.all(
queriesWithAlerts.map(query =>
this.service
.readAlert(query.alert_path)
.then(alertAttributes => this.setAlert(alertAttributes, query.metricId)),
),
)
.then(() => {
this.isLoading = false;
})
.catch(() => {
createFlash(s__('PrometheusAlerts|Error fetching alert'));
this.isLoading = false;
});
},
setAlert(alertAttributes, metricId) {
this.$emit('setAlerts', alertAttributes.alert_path, { ...alertAttributes, metricId });
},
removeAlert(alertPath) {
this.$emit('setAlerts', alertPath, null);
},
formatAlertSummary(alertPath) {
const alert = this.alertsToManage[alertPath];
const alertQuery = this.relevantQueries.find(query => query.metricId === alert.metricId);
return `${alertQuery.label} ${alert.operator} ${alert.threshold}`;
},
passedAlertThreshold(data, alert) {
const { threshold, operator } = alert;
switch (operator) {
case OPERATORS.greaterThan:
return data.some(value => value > threshold);
case OPERATORS.lessThan:
return data.some(value => value < threshold);
case OPERATORS.equalTo:
return data.some(value => value === threshold);
default:
return false;
}
},
getQueryData(alert) {
const alertQuery = this.relevantQueries.find(query => query.metricId === alert.metricId);
return get(alertQuery, 'result[0].values', []).map(value => get(value, '[1]', null));
},
showModal() {
this.$root.$emit('bv::show::modal', this.modalId);
},
hideModal() {
this.errorMessage = null;
this.$root.$emit('bv::hide::modal', this.modalId);
},
handleSetApiAction(apiAction) {
this.apiAction = apiAction;
},
handleCreate({ operator, threshold, prometheus_metric_id, runbookUrl }) {
const newAlert = { operator, threshold, prometheus_metric_id, runbookUrl };
this.isLoading = true;
this.service
.createAlert(newAlert)
.then(alertAttributes => {
this.setAlert(alertAttributes, prometheus_metric_id);
this.isLoading = false;
this.hideModal();
})
.catch(() => {
this.errorMessage = s__('PrometheusAlerts|Error creating alert');
this.isLoading = false;
});
},
handleUpdate({ alert, operator, threshold, runbookUrl }) {
const updatedAlert = { operator, threshold, runbookUrl };
this.isLoading = true;
this.service
.updateAlert(alert, updatedAlert)
.then(alertAttributes => {
this.setAlert(alertAttributes, this.alertsToManage[alert].metricId);
this.isLoading = false;
this.hideModal();
})
.catch(() => {
this.errorMessage = s__('PrometheusAlerts|Error saving alert');
this.isLoading = false;
});
},
handleDelete({ alert }) {
this.isLoading = true;
this.service
.deleteAlert(alert)
.then(() => {
this.removeAlert(alert);
this.isLoading = false;
this.hideModal();
})
.catch(() => {
this.errorMessage = s__('PrometheusAlerts|Error deleting alert');
this.isLoading = false;
});
},
},
};
</script>
<template>
<div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
<gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" />
<span v-else-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
errorMessage
}}</span>
<span
v-else-if="hasAlerts"
ref="alertCurrentSetting"
class="alert-current-setting cursor-pointer d-flex"
@click="showModal"
>
<gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
<gl-icon name="warning" :size="16" class="flex-shrink-0" />
<span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
<gl-sprintf
:message="
hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message
"
>
<template #alert>
{{ singleAlertSummary.alert }}
</template>
<template #count>
{{ multipleAlertsSummary.count }}
</template>
<template #firingCount>
{{ multipleAlertsSummary.firingCount }}
</template>
</gl-sprintf>
</span>
</gl-badge>
<gl-tooltip v-if="hasMultipleAlerts && isFiring" :target="() => $refs.alertCurrentSetting">
<gl-sprintf :message="$options.i18n.firingAlertsTooltip">
<template #alerts>
<div v-for="alert in formattedFiringAlerts" :key="alert.alert_path">
{{ alert }}
</div>
</template>
</gl-sprintf>
</gl-tooltip>
</span>
<alert-widget-form
ref="widgetForm"
:disabled="isLoading"
:alerts-to-manage="alertsToManage"
:relevant-queries="relevantQueries"
:error-message="errorMessage"
:configured-alert="configuredAlert"
:modal-id="modalId"
@create="handleCreate"
@update="handleUpdate"
@delete="handleDelete"
@cancel="hideModal"
@setAction="handleSetApiAction"
/>
</div>
</template>