diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/alert_details.vue')
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_details.vue | 54 |
1 files changed, 31 insertions, 23 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index ed6b4b7fdb2..0731349630c 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -12,18 +12,21 @@ import { GlTable, } from '@gitlab/ui'; import { s__ } from '~/locale'; -import query from '../graphql/queries/details.query.graphql'; +import alertQuery from '../graphql/queries/details.query.graphql'; +import sidebarStatusQuery from '../graphql/queries/sidebar_status.query.graphql'; import { fetchPolicies } from '~/lib/graphql'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; 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 createIssueMutation from '../graphql/mutations/create_issue_from_alert.mutation.graphql'; +import toggleSidebarStatusMutation from '../graphql/mutations/toggle_sidebar_status.mutation.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'; +import AlertMetrics from './alert_metrics.vue'; const containerEl = document.querySelector('.page-with-contextual-sidebar'); @@ -34,6 +37,7 @@ export default { ), fullAlertDetailsTitle: s__('AlertManagement|Alert details'), overviewTitle: s__('AlertManagement|Overview'), + metricsTitle: s__('AlertManagement|Metrics'), reportedAt: s__('AlertManagement|Reported %{when}'), reportedAtWithTool: s__('AlertManagement|Reported %{when} by %{tool}'), }, @@ -51,25 +55,29 @@ export default { TimeAgoTooltip, AlertSidebar, SystemNote, + AlertMetrics, }, - props: { + inject: { + projectPath: { + default: '', + }, alertId: { type: String, - required: true, + default: '', }, - projectPath: { + projectId: { type: String, - required: true, + default: '', }, projectIssuesPath: { type: String, - required: true, + default: '', }, }, apollo: { alert: { fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, - query, + query: alertQuery, variables() { return { fullPath: this.projectPath, @@ -84,15 +92,18 @@ export default { Sentry.captureException(error); }, }, + sidebarStatus: { + query: sidebarStatusQuery, + }, }, data() { return { alert: null, errored: false, + sidebarStatus: false, isErrorDismissed: false, createIssueError: '', issueCreationInProgress: false, - sidebarCollapsed: false, sidebarErrorMessage: '', }; }, @@ -128,10 +139,10 @@ export default { this.sidebarErrorMessage = ''; }, toggleSidebar() { - this.sidebarCollapsed = !this.sidebarCollapsed; + this.$apollo.mutate({ mutation: toggleSidebarStatusMutation }); toggleContainerClasses(containerEl, { - 'right-sidebar-collapsed': this.sidebarCollapsed, - 'right-sidebar-expanded': !this.sidebarCollapsed, + 'right-sidebar-collapsed': !this.sidebarStatus, + 'right-sidebar-expanded': this.sidebarStatus, }); }, handleAlertSidebarError(errorMessage) { @@ -143,7 +154,7 @@ export default { this.$apollo .mutate({ - mutation: createIssueQuery, + mutation: createIssueMutation, variables: { iid: this.alert.iid, projectPath: this.projectPath, @@ -169,9 +180,6 @@ export default { const { category, action } = trackAlertsDetailsViewsOptions; Tracking.event(category, action); }, - alertRefresh() { - this.$apollo.queries.alert.refetch(); - }, }, }; </script> @@ -179,7 +187,7 @@ export default { <template> <div> <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="dismissError"> - {{ sidebarErrorMessage || $options.i18n.errorMsg }} + <p v-html="sidebarErrorMessage || $options.i18n.errorMsg"></p> </gl-alert> <gl-alert v-if="createIssueError" @@ -193,10 +201,10 @@ export default { <div v-if="alert" class="alert-management-details gl-relative" - :class="{ 'pr-sm-8': sidebarCollapsed }" + :class="{ 'pr-sm-8': sidebarStatus }" > <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" + 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-100 gl-border-b-solid flex-column flex-sm-row" > <div data-testid="alert-header" @@ -324,14 +332,14 @@ export default { </template> </gl-table> </gl-tab> + <gl-tab data-testId="metricsTab" :title="$options.i18n.metricsTitle"> + <alert-metrics :dashboard-url="alert.metricsDashboardUrl" /> + </gl-tab> </gl-tabs> <alert-sidebar - :project-path="projectPath" :alert="alert" - :sidebar-collapsed="sidebarCollapsed" - @alert-refresh="alertRefresh" @toggle-sidebar="toggleSidebar" - @alert-sidebar-error="handleAlertSidebarError" + @alert-error="handleAlertSidebarError" /> </div> </div> |