added tab component

4 files changed, 93 insertions, 16 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index d61ed36a757..318e7aa5716 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -6,7 +6,7 @@ import RepoTabs from './repo_tabs.vue';
 import IdeStatusBar from './ide_status_bar.vue';
 import RepoEditor from './repo_editor.vue';
 import FindFile from './file_finder/index.vue';
-import RightSidebar from './right_sidebar/index.vue';
+import RightPane from './panes/right.vue';
 
 const originalStopCallback = Mousetrap.stopCallback;
 
@@ -17,7 +17,7 @@ export default {
     IdeStatusBar,
     RepoEditor,
     FindFile,
-    RightSidebar,
+    RightPane,
   },
   computed: {
     ...mapState([
@@ -125,7 +125,7 @@ export default {
           </div>
         </template>
       </div>
-      <right-sidebar
+      <right-pane
         v-if="currentProjectId"
       />
     </div>
diff --git a/app/assets/javascripts/ide/components/right_sidebar/index.vue b/app/assets/javascripts/ide/components/panes/right.vue
index 2417e3976aa..7ac79347225 100644
--- a/app/assets/javascripts/ide/components/right_sidebar/index.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -1,7 +1,9 @@
 <script>
+import { mapActions, mapState } from 'vuex';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
-import Pipelines from './pipelines.vue';
+import { rightSidebarViews } from '../../constants';
+import PipelinesList from '../pipelines/list.vue';
 
 export default {
   directives: {
@@ -9,8 +11,15 @@ export default {
   },
   components: {
     Icon,
-    Pipelines,
+    PipelinesList,
   },
+  computed: {
+    ...mapState(['rightPane']),
+  },
+  methods: {
+    ...mapActions(['setRightPane']),
+  },
+  rightSidebarViews,
 };
 </script>
 
@@ -18,25 +27,31 @@ export default {
   <div
     class="multi-file-commit-panel ide-right-sidebar"
   >
-    <div class="multi-file-commit-panel-inner">
-      <pipelines />
+    <div
+      class="multi-file-commit-panel-inner"
+      v-if="rightPane"
+    >
+      <keep-alive>
+        <component :is="rightPane" />
+      </keep-alive>
     </div>
     <nav class="ide-activity-bar">
       <ul class="list-unstyled">
         <li v-once>
-          <a
+          <button
             v-tooltip
             data-container="body"
             data-placement="left"
             :title="__('Pipelines')"
             class="ide-sidebar-link"
-            href="a"
+            type="button"
+            @click="setRightPane($options.rightSidebarViews.pipelines)"
           >
             <icon
               :size="16"
-              name="log"
+              name="pipeline"
             />
-          </a>
+          </button>
         </li>
       </ul>
     </nav>
@@ -55,6 +70,7 @@ export default {
 
 .ide-right-sidebar .multi-file-commit-panel-inner {
   width: 300px;
+  padding: 8px 16px;
   background-color: #fff;
   border-left: 1px solid #eaeaea;
 }
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/right_sidebar/pipelines.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 0ff78242e6a..e76ea0b50af 100644
--- a/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,14 +1,17 @@
 <script>
-import { mapActions, mapState } from 'vuex';
+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 {
@@ -34,13 +37,31 @@ export default {
       size="2"
     />
     <template v-else-if="latestPipeline">
-      <ci-icon
-        :status="statusIcon"
-      />
-      #{{ latestPipeline.id }}
+      <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>