debian-mirror-gitlab/app/assets/javascripts/alert_management/components/alert_details.vue

339 lines
11 KiB
Vue
Raw Normal View History

2020-05-24 23:13:21 +05:30
<script>
import * as Sentry from '@sentry/browser';
import {
GlAlert,
2020-06-23 00:09:42 +05:30
GlBadge,
2020-05-24 23:13:21 +05:30
GlIcon,
GlLoadingIcon,
GlSprintf,
GlTabs,
GlTab,
GlButton,
GlTable,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import query from '../graphql/queries/details.query.graphql';
import { fetchPolicies } from '~/lib/graphql';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
2020-06-23 00:09:42 +05:30
import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
import initUserPopovers from '~/user_popovers';
import { ALERTS_SEVERITY_LABELS, trackAlertsDetailsViewsOptions } from '../constants';
import createIssueQuery from '../graphql/mutations/create_issue_from_alert.graphql';
import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
import Tracking from '~/tracking';
import { toggleContainerClasses } from '~/lib/utils/dom_utils';
import SystemNote from './system_notes/system_note.vue';
import AlertSidebar from './alert_sidebar.vue';
const containerEl = document.querySelector('.page-with-contextual-sidebar');
2020-05-24 23:13:21 +05:30
export default {
i18n: {
errorMsg: s__(
'AlertManagement|There was an error displaying the alert. Please refresh the page to try again.',
),
fullAlertDetailsTitle: s__('AlertManagement|Alert details'),
overviewTitle: s__('AlertManagement|Overview'),
reportedAt: s__('AlertManagement|Reported %{when}'),
reportedAtWithTool: s__('AlertManagement|Reported %{when} by %{tool}'),
},
severityLabels: ALERTS_SEVERITY_LABELS,
components: {
2020-06-23 00:09:42 +05:30
GlBadge,
2020-05-24 23:13:21 +05:30
GlAlert,
GlIcon,
GlLoadingIcon,
GlSprintf,
GlTab,
GlTabs,
GlButton,
GlTable,
TimeAgoTooltip,
2020-06-23 00:09:42 +05:30
AlertSidebar,
SystemNote,
2020-05-24 23:13:21 +05:30
},
props: {
alertId: {
type: String,
required: true,
},
projectPath: {
type: String,
required: true,
},
2020-06-23 00:09:42 +05:30
projectIssuesPath: {
2020-05-24 23:13:21 +05:30
type: String,
required: true,
},
},
apollo: {
alert: {
fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
query,
variables() {
return {
fullPath: this.projectPath,
alertId: this.alertId,
};
},
update(data) {
return data?.project?.alertManagementAlerts?.nodes?.[0] ?? null;
},
error(error) {
this.errored = true;
Sentry.captureException(error);
},
},
},
data() {
2020-06-23 00:09:42 +05:30
return {
alert: null,
errored: false,
isErrorDismissed: false,
createIssueError: '',
issueCreationInProgress: false,
sidebarCollapsed: false,
sidebarErrorMessage: '',
};
2020-05-24 23:13:21 +05:30
},
computed: {
loading() {
return this.$apollo.queries.alert.loading;
},
reportedAtMessage() {
return this.alert?.monitoringTool
? this.$options.i18n.reportedAtWithTool
: this.$options.i18n.reportedAt;
},
showErrorMsg() {
return this.errored && !this.isErrorDismissed;
},
},
2020-06-23 00:09:42 +05:30
mounted() {
this.trackPageViews();
toggleContainerClasses(containerEl, {
'issuable-bulk-update-sidebar': true,
'right-sidebar-expanded': true,
});
},
updated() {
this.$nextTick(() => {
highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'));
initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
});
},
2020-05-24 23:13:21 +05:30
methods: {
dismissError() {
this.isErrorDismissed = true;
2020-06-23 00:09:42 +05:30
this.sidebarErrorMessage = '';
2020-05-24 23:13:21 +05:30
},
2020-06-23 00:09:42 +05:30
toggleSidebar() {
this.sidebarCollapsed = !this.sidebarCollapsed;
toggleContainerClasses(containerEl, {
'right-sidebar-collapsed': this.sidebarCollapsed,
'right-sidebar-expanded': !this.sidebarCollapsed,
});
},
handleAlertSidebarError(errorMessage) {
this.errored = true;
this.sidebarErrorMessage = errorMessage;
},
createIssue() {
this.issueCreationInProgress = true;
2020-05-24 23:13:21 +05:30
this.$apollo
.mutate({
2020-06-23 00:09:42 +05:30
mutation: createIssueQuery,
2020-05-24 23:13:21 +05:30
variables: {
2020-06-23 00:09:42 +05:30
iid: this.alert.iid,
2020-05-24 23:13:21 +05:30
projectPath: this.projectPath,
},
})
2020-06-23 00:09:42 +05:30
.then(({ data: { createAlertIssue: { errors, issue } } }) => {
if (errors?.length) {
[this.createIssueError] = errors;
this.issueCreationInProgress = false;
} else if (issue) {
visitUrl(this.issuePath(issue.iid));
}
})
.catch(error => {
this.createIssueError = error;
this.issueCreationInProgress = false;
2020-05-24 23:13:21 +05:30
});
},
2020-06-23 00:09:42 +05:30
issuePath(issueId) {
return joinPaths(this.projectIssuesPath, issueId);
},
trackPageViews() {
const { category, action } = trackAlertsDetailsViewsOptions;
Tracking.event(category, action);
},
alertRefresh() {
this.$apollo.queries.alert.refetch();
},
2020-05-24 23:13:21 +05:30
},
};
</script>
2020-06-23 00:09:42 +05:30
2020-05-24 23:13:21 +05:30
<template>
<div>
<gl-alert v-if="showErrorMsg" variant="danger" @dismiss="dismissError">
2020-06-23 00:09:42 +05:30
{{ sidebarErrorMessage || $options.i18n.errorMsg }}
</gl-alert>
<gl-alert
v-if="createIssueError"
variant="danger"
data-testid="issueCreationError"
@dismiss="createIssueError = null"
>
{{ createIssueError }}
2020-05-24 23:13:21 +05:30
</gl-alert>
<div v-if="loading"><gl-loading-icon size="lg" class="gl-mt-5" /></div>
2020-06-23 00:09:42 +05:30
<div
v-if="alert"
class="alert-management-details gl-relative"
:class="{ 'pr-sm-8': sidebarCollapsed }"
>
2020-05-24 23:13:21 +05:30
<div
class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid flex-column flex-sm-row"
>
<div
data-testid="alert-header"
class="gl-display-flex gl-align-items-center gl-justify-content-center"
>
<div
class="gl-display-inline-flex gl-align-items-center gl-justify-content-space-between"
>
2020-06-23 00:09:42 +05:30
<gl-badge class="gl-mr-3">
<strong>{{ s__('AlertManagement|Alert') }}</strong>
</gl-badge>
2020-05-24 23:13:21 +05:30
</div>
2020-06-23 00:09:42 +05:30
<span>
<gl-sprintf :message="reportedAtMessage">
<template #when>
<time-ago-tooltip :time="alert.createdAt" />
</template>
<template #tool>{{ alert.monitoringTool }}</template>
</gl-sprintf>
</span>
2020-05-24 23:13:21 +05:30
</div>
<gl-button
2020-06-23 00:09:42 +05:30
v-if="alert.issueIid"
class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-issue-button"
data-testid="viewIssueBtn"
:href="issuePath(alert.issueIid)"
category="primary"
variant="success"
>
{{ s__('AlertManagement|View issue') }}
</gl-button>
<gl-button
v-else
class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-issue-button"
2020-05-24 23:13:21 +05:30
data-testid="createIssueBtn"
2020-06-23 00:09:42 +05:30
:loading="issueCreationInProgress"
2020-05-24 23:13:21 +05:30
category="primary"
variant="success"
2020-06-23 00:09:42 +05:30
@click="createIssue()"
2020-05-24 23:13:21 +05:30
>
{{ s__('AlertManagement|Create issue') }}
</gl-button>
2020-06-23 00:09:42 +05:30
<gl-button
:aria-label="__('Toggle sidebar')"
category="primary"
variant="default"
class="d-sm-none gl-absolute toggle-sidebar-mobile-button"
type="button"
@click="toggleSidebar"
>
<i class="fa fa-angle-double-left"></i>
</gl-button>
2020-05-24 23:13:21 +05:30
</div>
<div
v-if="alert"
class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
>
<h2 data-testid="title">{{ alert.title }}</h2>
</div>
<gl-tabs v-if="alert" data-testid="alertDetailsTabs">
<gl-tab data-testid="overviewTab" :title="$options.i18n.overviewTitle">
2020-06-23 00:09:42 +05:30
<div v-if="alert.severity" class="gl-mt-3 gl-mb-5 gl-display-flex">
<div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3">
{{ s__('AlertManagement|Severity') }}:
</div>
<div class="gl-pl-2" data-testid="severity">
<span>
<gl-icon
class="gl-vertical-align-middle"
:size="12"
:name="`severity-${alert.severity.toLowerCase()}`"
:class="`icon-${alert.severity.toLowerCase()}`"
/>
</span>
{{ $options.severityLabels[alert.severity] }}
</div>
</div>
<div v-if="alert.startedAt" class="gl-my-5 gl-display-flex">
<div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3">
{{ s__('AlertManagement|Start time') }}:
</div>
<div class="gl-pl-2">
2020-05-24 23:13:21 +05:30
<time-ago-tooltip data-testid="startTimeItem" :time="alert.startedAt" />
2020-06-23 00:09:42 +05:30
</div>
</div>
<div v-if="alert.eventCount" class="gl-my-5 gl-display-flex">
<div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3">
{{ s__('AlertManagement|Events') }}:
</div>
<div class="gl-pl-2" data-testid="eventCount">{{ alert.eventCount }}</div>
</div>
<div v-if="alert.monitoringTool" class="gl-my-5 gl-display-flex">
<div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3">
{{ s__('AlertManagement|Tool') }}:
</div>
<div class="gl-pl-2" data-testid="monitoringTool">{{ alert.monitoringTool }}</div>
</div>
<div v-if="alert.service" class="gl-my-5 gl-display-flex">
<div class="bold gl-w-13 gl-text-right gl-pr-3">
{{ s__('AlertManagement|Service') }}:
</div>
<div class="gl-pl-2" data-testid="service">{{ alert.service }}</div>
</div>
<template>
<div v-if="alert.notes.nodes" class="issuable-discussion py-5">
<ul class="notes main-notes-list timeline">
<system-note v-for="note in alert.notes.nodes" :key="note.id" :note="note" />
</ul>
</div>
</template>
2020-05-24 23:13:21 +05:30
</gl-tab>
<gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle">
<gl-table
class="alert-management-details-table"
:items="[{ key: 'Value', ...alert }]"
:show-empty="true"
:busy="loading"
stacked
>
<template #empty>
{{ s__('AlertManagement|No alert data to display.') }}
</template>
<template #table-busy>
<gl-loading-icon size="lg" color="dark" class="mt-3" />
</template>
</gl-table>
</gl-tab>
</gl-tabs>
2020-06-23 00:09:42 +05:30
<alert-sidebar
:project-path="projectPath"
:alert="alert"
:sidebar-collapsed="sidebarCollapsed"
@alert-refresh="alertRefresh"
@toggle-sidebar="toggleSidebar"
@alert-sidebar-error="handleAlertSidebarError"
/>
2020-05-24 23:13:21 +05:30
</div>
</div>
</template>