1 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.vue b/app/assets/javascripts/pipelines/components/navigation_tabs.vue
new file mode 100644
index 00000000000..d2f6d47f043
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/navigation_tabs.vue
@@ -0,0 +1,76 @@
+<script>
+export default {
+  name: 'PipelineNavigationTabs',
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+    count: {
+      type: Object,
+      required: true,
+    },
+    paths: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+};
+</script>
+<template>
+  <ul class="nav-links scrolling-tabs">
+    <li
+      class="js-pipelines-tab-all"
+      :class="{ active: scope === 'all'}">
+      <a :href="paths.allPath">
+        All
+        <span class="badge js-totalbuilds-count">
+          {{count.all}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-pending"
+      :class="{ active: scope === 'pending'}">
+      <a :href="paths.pendingPath">
+        Pending
+        <span class="badge">
+          {{count.pending}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-running"
+      :class="{ active: scope === 'running'}">
+      <a :href="paths.runningPath">
+        Running
+        <span class="badge">
+          {{count.running}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-finished"
+      :class="{ active: scope === 'finished'}">
+      <a :href="paths.finishedPath">
+        Finished
+        <span class="badge">
+          {{count.finished}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-branches"
+      :class="{ active: scope === 'branches'}">
+      <a :href="paths.branchesPath">Branches</a>
+    </li>
+    <li
+      class="js-pipelines-tab-tags"
+      :class="{ active: scope === 'tags'}">
+      <a :href="paths.tagsPath">Tags</a>
+    </li>
+  </ul>
+</template>