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>