added tab component

2 files changed, 107 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/pipelines/jobs.vue b/app/assets/javascripts/ide/components/pipelines/jobs.vue
new file mode 100644
index 00000000000..d69945b617c
--- /dev/null
+++ b/app/assets/javascripts/ide/components/pipelines/jobs.vue
@@ -0,0 +1,40 @@
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import Tabs from '../../../vue_shared/components/tabs/tabs';
+import Tab from '../../../vue_shared/components/tabs/tab.vue';
+
+export default {
+  components: {
+    Tabs,
+    Tab,
+  },
+  computed: {
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobs']),
+  },
+  mounted() {
+    this.fetchJobs();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobs']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <tabs>
+      <tab active>
+        <template slot="title">
+          Jobs <span class="badge">{{ jobsCount }}</span>
+        </template>
+        List all jobs here
+      </tab>
+      <tab>
+        <template slot="title">
+          Failed Jobs <span class="badge">{{ failedJobs.length }}</span>
+        </template>
+        List all failed jobs here
+      </tab>
+    </tabs>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
new file mode 100644
index 00000000000..e76ea0b50af
--- /dev/null
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -0,0 +1,67 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import JobsList from './jobs.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    CiIcon,
+    JobsList,
+  },
+  computed: {
+    ...mapGetters(['currentProject']),
+    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline']),
+    statusIcon() {
+      return {
+        group: this.latestPipeline.status,
+        icon: `status_${this.latestPipeline.status}`,
+      };
+    },
+  },
+  mounted() {
+    this.fetchLatestPipeline();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchLatestPipeline']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <loading-icon
+      v-if="isLoadingPipeline"
+      class="prepend-top-default"
+      size="2"
+    />
+    <template v-else-if="latestPipeline">
+      <header
+        class="ide-tree-header ide-pipeline-header"
+      >
+        <ci-icon
+          :status="statusIcon"
+        />
+        <span class="prepend-left-8">
+          <strong>
+            Pipeline
+          </strong>
+          <a
+            :href="currentProject.web_url + '/pipelines/' + latestPipeline.id"
+            target="_blank"
+          >
+            #{{ latestPipeline.id }}
+          </a>
+        </span>
+      </header>
+      <jobs-list />
+    </template>
+  </div>
+</template>
+
+<style>
+.ide-pipeline-header .ci-status-icon {
+  display: flex;
+}
+</style>