1 files changed, 57 insertions, 8 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
index ec101fd943f..400e1f0b725 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
@@ -1,21 +1,70 @@
 <script>
-import { GlTab, GlButton } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlTab } from '@gitlab/ui';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_ISSUE } from '~/graphql_shared/constants';
+import { fetchPolicies } from '~/lib/graphql';
+import getTimelineEvents from './graphql/queries/get_timeline_events.query.graphql';
+import { displayAndLogError } from './utils';
+
+import IncidentTimelineEventsList from './timeline_events_list.vue';
 
 export default {
   components: {
+    GlEmptyState,
+    GlLoadingIcon,
     GlTab,
-    GlButton,
+    IncidentTimelineEventsList,
+  },
+  inject: ['fullPath', 'issuableId'],
+  data() {
+    return {
+      timelineEvents: [],
+    };
+  },
+  apollo: {
+    timelineEvents: {
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      query: getTimelineEvents,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          incidentId: convertToGraphQLId(TYPE_ISSUE, this.issuableId),
+        };
+      },
+      update(data) {
+        return data.project.incidentManagementTimelineEvents.nodes;
+      },
+      error(error) {
+        displayAndLogError(error);
+      },
+    },
+  },
+  computed: {
+    timelineEventLoading() {
+      return this.$apollo.queries.timelineEvents.loading;
+    },
+    hasTimelineEvents() {
+      return Boolean(this.timelineEvents.length);
+    },
+    showEmptyState() {
+      return !this.timelineEventLoading && !this.hasTimelineEvents;
+    },
   },
 };
 </script>
 
 <template>
   <gl-tab :title="s__('Incident|Timeline')">
-    <div class="gl-my-4">
-      <p>{{ s__('Incident|No timeline items have been added yet.') }}</p>
-    </div>
-    <gl-button class="gl-my-3">
-      {{ s__('Incident|Add new timeline event') }}
-    </gl-button>
+    <gl-loading-icon v-if="timelineEventLoading" size="lg" color="dark" class="gl-mt-5" />
+    <gl-empty-state
+      v-else-if="showEmptyState"
+      :compact="true"
+      :description="s__('Incident|No timeline items have been added yet.')"
+    />
+    <incident-timeline-events-list
+      v-if="hasTimelineEvents"
+      :timeline-event-loading="timelineEventLoading"
+      :timeline-events="timelineEvents"
+    />
   </gl-tab>
 </template>