Add pipelines tab

ui/src/App.vue

@@ -9,7 +9,7 @@
           <b-collapse id="nav-collapse" is-nav>
             <b-navbar-nav>
               <b-nav-item :to="{ name: 'collections' }">Collections</b-nav-item>
-              <b-nav-item :to="{ name: 'pipelines' }" v-show="false">Pipelines</b-nav-item>
+              <b-nav-item :to="{ name: 'pipelines' }">Pipelines</b-nav-item>
             </b-navbar-nav>
             <b-navbar-nav class="ml-auto">
               <b-nav-item href="https://enduroproject.netlify.com">Docs</b-nav-item>

ui/src/store/pipeline/index.ts

@@ -6,19 +6,23 @@ import { EnduroCollectionClient, api, EnduroPipelineClient } from '@/client';
 // Getter types.
 export const GET_PIPELINE_ERROR = 'GET_PIPELINE_ERROR';
 export const GET_PIPELINE_RESULT = 'GET_PIPELINE_RESULT';
+export const GET_SEARCH_RESULTS = 'GET_SEARCH_RESULTS';
 
 // Mutation types.
 export const SET_PIPELINE_RESULT = 'SET_PIPELINE_RESULT';
 export const SET_PIPELINE_ERROR = 'SET_PIPELINE_ERROR';
+export const SET_SEARCH_RESULTS = 'SET_SEARCH_RESULTS';
 
 // Action types.
 export const SEARCH_PIPELINE = 'SEARCH_PIPELINE';
+export const SEARCH_PIPELINES = 'SEARCH_PIPELINES';
 
 const namespaced: boolean = true;
 
 interface State {
   error: boolean;
   result: any;
+  results: any;
 }
 
 const getters: GetterTree<State, RootState> = {
@@ -31,6 +35,10 @@ const getters: GetterTree<State, RootState> = {
     return state.result;
   },
 
+  [GET_SEARCH_RESULTS](state): string {
+    return state.results;
+  },
+
 };
 
 const actions: ActionTree<State, RootState> = {
@@ -45,6 +53,15 @@ const actions: ActionTree<State, RootState> = {
     });
   },
 
+  [SEARCH_PIPELINES]({ commit }): Promise<any> {
+    return EnduroPipelineClient.pipelineList({}).then((response) => {
+      commit(SET_SEARCH_RESULTS, response);
+      commit(SET_PIPELINE_ERROR, false);
+    }).catch((err) => {
+      commit(SET_PIPELINE_ERROR, true);
+    });
+  },
+
 };
 
 const mutations: MutationTree<State> = {
@@ -57,12 +74,17 @@ const mutations: MutationTree<State> = {
     state.result = result;
   },
 
+  [SET_SEARCH_RESULTS](state, results: any) {
+    state.results = results;
+  },
+
 };
 
 const getDefaultState = (): State => {
   return {
     error: false,
     result: {},
+    results: [],
   };
 };
 

ui/src/views/Pipeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-container>
-    Pipeline
-  </b-container>
-</template
+    <b-container>
+      Pipeline
+    </b-container>
+  </template>

ui/src/views/PipelineList.vue

@@ -1,5 +1,93 @@
 <template>
+
   <b-container>
-    PipelineList
+
+    <!-- Alert shown when the API client failed. -->
+    <template v-if="error">
+      <b-alert show variant="warning" class="my-3">
+        <h4 class="alert-heading">Search error</h4>
+        We couldn't connect to the API server. You may want to try again in a few seconds.
+        <hr />
+        <b-button @click="retryButtonClicked" class="m-1">Retry</b-button>
+      </b-alert>
+    </template>
+
+    <!-- Search form and results. -->
+    <template v-else>
+
+      <template v-if="results.length > 0">
+        <table class="table table-bordered table-sm mt-4">
+          <thead class="thead">
+            <tr>
+              <th scope="col">Name</th>
+              <th>Capacity</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in results" v-bind:key="item.id">
+              <th scope="row">{{ item.name }}</th>
+              <td>{{ item.current }} / {{ item.capacity }}</td>
+              <td>N / A</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+
+      <div v-if="results.length === 0">
+        <b-alert show variant="info" class="my-3">
+          <h4 class="alert-heading">No results</h4>
+          We couldn’t find any collections matching your search criteria.
+        </b-alert>
+      </div>
+
+    </template>
+
   </b-container>
-</template
+
+</template>
+
+<script lang="ts">
+
+import { Component, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import * as PipelineStore from '../store/pipeline';
+
+const pipelineStoreNs = namespace('pipeline');
+
+@Component
+export default class PipelineList extends Vue {
+
+  @pipelineStoreNs.Getter(PipelineStore.GET_PIPELINE_ERROR)
+  private error?: boolean;
+
+  @pipelineStoreNs.Getter(PipelineStore.GET_SEARCH_RESULTS)
+  private results: any;
+
+  @pipelineStoreNs.Action(PipelineStore.SEARCH_PIPELINES)
+  private search: any;
+
+  private created() {
+    this.search();
+  }
+
+  /**
+   * Perform same search re-using all existing state.
+   */
+  private retryButtonClicked() {
+    this.search();
+  }
+
+  /**
+   * Forward user to the pipeline route.
+   */
+  private rowClicked(id: string) {
+    this.$router.push({ name: 'pipeline', params: {id} });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+

ui/vite.config.js

@@ -34,6 +34,10 @@ export default {
         changeOrigin: false,
         ws: true,
       },
+      "/pipeline": {
+        target: process.env.ENDURO_API_ADDRESS || "http://127.0.0.1:9000",
+        changeOrigin: true,
+      },
     },
   },
 }