1 files changed, 28 insertions, 7 deletions

diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
index a47fe4c84cf..96f187f26dd 100644
--- a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
+++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue
@@ -1,42 +1,63 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 
 export default {
   components: {
     GlLink,
+    IncidentSla: () => import('ee_component/issue_show/components/incidents/incident_sla.vue'),
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     alert: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
+  data() {
+    return { childHasData: false };
+  },
   computed: {
     startTime() {
       return formatDate(this.alert.startedAt, 'yyyy-mm-dd Z');
     },
+    showHighlightBar() {
+      return this.alert || this.childHasData;
+    },
+  },
+  methods: {
+    update(hasData) {
+      this.childHasData = hasData;
+    },
   },
 };
 </script>
 
 <template>
   <div
-    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"
+    v-show="showHighlightBar"
+    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 gl-xs-flex-direction-column"
   >
-    <div class="text-truncate gl-pr-3">
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span>
-      <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link>
+      <gl-link v-gl-tooltip :title="alert.title" :href="alert.detailsUrl">
+        #{{ alert.iid }}
+      </gl-link>
     </div>
 
-    <div class="gl-pr-3 gl-white-space-nowrap">
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span>
       {{ startTime }}
     </div>
 
-    <div class="gl-white-space-nowrap">
+    <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span>
       <span>{{ alert.eventCount }}</span>
     </div>
+
+    <incident-sla @update="update" />
   </div>
 </template>