1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
new file mode 100644
index 00000000000..9c3d39ce011
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -0,0 +1,54 @@
+<script>
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
+
+export default {
+  props: {
+    items: Array,
+    stage: Object,
+  },
+  computed: {
+    iconBuildStatus() {
+      return iconBuildStatus;
+    },
+    iconBranch() {
+      return iconBranch;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="events-description">
+      {{ stage.description }}
+      <limit-warning :count="items.length" />
+    </div>
+    <ul class="stage-event-list">
+      <li
+        v-for="(build, i) in items"
+        :key="i"
+        class="stage-event-item item-build-component">
+        <div class="item-details">
+          <h5 class="item-title">
+            <span class="icon-build-status" v-html="iconBuildStatus"></span>
+            <a :href="build.url" class="item-build-name">{{ build.name }}</a>
+            &middot;
+            <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
+            <i class="fa fa-code-fork"></i>
+            <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
+            <span class="icon-branch" v-html="iconBranch"></span>
+            <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
+          </h5>
+          <span>
+            <a :href="build.url" class="issue-date">
+              {{ build.date }}
+            </a>
+          </span>
+        </div>
+        <div class="item-time">
+          <total-time :time="build.totalTime"/>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>