Add latest changes from gitlab-org/gitlab@master

4 files changed, 84 insertions, 7 deletions

diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar/graphql/queries/get_highlight_bar_info.graphql b/app/assets/javascripts/issue_show/components/incidents/highlight_bar/graphql/queries/get_highlight_bar_info.graphql
new file mode 100644
index 00000000000..fe299adf53e
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar/graphql/queries/get_highlight_bar_info.graphql
@@ -0,0 +1,12 @@
+query getHighlightBarInfo($iid: String!, $fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
+      alertManagementAlert {
+        title
+        detailsUrl
+        createdAt
+        eventCount
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar/higlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar/higlight_bar.vue
new file mode 100644
index 00000000000..dbef301856d
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar/higlight_bar.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import getHighlightBarInfo from './graphql/queries/get_highlight_bar_info.graphql';
+
+export default {
+  components: {
+    GlLink,
+  },
+  inject: ['fullPath', 'iid'],
+  apollo: {
+    alert: {
+      query: getHighlightBarInfo,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+        };
+      },
+      update: data => data.project?.issue?.alertManagementAlert,
+    },
+  },
+  computed: {
+    startTime() {
+      return formatDate(this.alert.createdAt, 'yyyy-mm-dd Z');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="alert"
+    class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between"
+  >
+    <div class="text-truncate gl-pr-3">
+      <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span>
+      <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link>
+    </div>
+
+    <div class="gl-pr-3 gl-white-space-nowrap">
+      <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span>
+      {{ startTime }}
+    </div>
+
+    <div class="gl-white-space-nowrap">
+      <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span>
+      <span>{{ alert.eventCount }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/incident_tabs.vue b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue
index f6e82cfaa74..e5dde1aaca6 100644
--- a/app/assets/javascripts/issue_show/components/incident_tabs.vue
+++ b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue
@@ -1,24 +1,23 @@
 <script>
 import { GlTab, GlTabs } from '@gitlab/ui';
-import DescriptionComponent from './description.vue';
+import DescriptionComponent from '../description.vue';
+import HighlightBar from './highlight_bar/higlight_bar.vue';
 
 export default {
   components: {
     GlTab,
     GlTabs,
     DescriptionComponent,
+    HighlightBar,
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-tabs
-      content-class="gl-reset-line-height gl-mt-3"
-      class="gl-mt-n3"
-      data-testid="incident-tabs"
-    >
+    <gl-tabs content-class="gl-reset-line-height" class="gl-mt-n3" data-testid="incident-tabs">
       <gl-tab :title="__('Summary')">
+        <highlight-bar />
         <description-component v-bind="$attrs" />
       </gl-tab>
     </gl-tabs>
diff --git a/app/assets/javascripts/issue_show/incident.js b/app/assets/javascripts/issue_show/incident.js
index 82b862a2195..a34e75ee64a 100644
--- a/app/assets/javascripts/issue_show/incident.js
+++ b/app/assets/javascripts/issue_show/incident.js
@@ -1,13 +1,28 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import issuableApp from './components/app.vue';
-import incidentTabs from './components/incident_tabs.vue';
+import incidentTabs from './components/incidents/incident_tabs.vue';
+
+Vue.use(VueApollo);
 
 export default function initIssuableApp(issuableData = {}) {
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  const { projectNamespace, projectPath, iid } = issuableData;
+
   return new Vue({
     el: document.getElementById('js-issuable-app'),
+    apolloProvider,
     components: {
       issuableApp,
     },
+    provide: {
+      fullPath: `${projectNamespace}/${projectPath}`,
+      iid,
+    },
     render(createElement) {
       return createElement('issuable-app', {
         props: {