1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
new file mode 100644
index 00000000000..6a0d3cce1f3
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
@@ -0,0 +1,57 @@
+<script>
+import { isEmpty } from 'lodash';
+import { GlAlert } from '@gitlab/ui';
+import JobPill from './job_pill.vue';
+import StagePill from './stage_pill.vue';
+
+export default {
+  components: {
+    GlAlert,
+    JobPill,
+    StagePill,
+  },
+  props: {
+    pipelineData: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    isPipelineDataEmpty() {
+      return isEmpty(this.pipelineData);
+    },
+    emptyClass() {
+      return !this.isPipelineDataEmpty ? 'gl-py-7' : '';
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-bg-gray-50 gl-px-4 gl-overflow-auto" :class="emptyClass">
+    <gl-alert v-if="isPipelineDataEmpty" variant="tip" :dismissible="false">
+      {{ __('No content to show') }}
+    </gl-alert>
+    <template v-else>
+      <div
+        v-for="(stage, index) in pipelineData.stages"
+        :key="`${stage.name}-${index}`"
+        class="gl-flex-direction-column"
+      >
+        <div
+          class="gl-display-flex gl-align-items-center gl-bg-white gl-w-full gl-px-8 gl-py-4 gl-mb-5"
+          :class="{
+            'stage-left-rounded': index === 0,
+            'stage-right-rounded': index === pipelineData.stages.length - 1,
+          }"
+        >
+          <stage-pill :stage-name="stage.name" :is-empty="stage.groups.length === 0" />
+        </div>
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full gl-px-8"
+        >
+          <job-pill v-for="group in stage.groups" :key="group.name" :job-name="group.name" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>