UI: implemented jobs listing

vospace-ui-frontend/src/App.vue

@@ -28,6 +28,9 @@ export default {
   }),
   components: {
     TopMenu
+  },
+  mounted() {
+    this.$store.dispatch('loadJobs');
   }
 }
 </script>

vospace-ui-frontend/src/api/mock/data/job.json

 {
   "id": "1234",
-  "status": "EXECUTING"
+  "status": "EXECUTING",
+  "read": true
 }

vospace-ui-frontend/src/api/mock/data/jobs.json

+[{
+    "id": "1",
+    "status": "COMPLETED",
+    "read": true
+  },
+  {
+    "id": "2",
+    "status": "COMPLETED",
+    "read": true
+  }
+]

vospace-ui-frontend/src/api/mock/index.js

@@ -2,6 +2,7 @@ import root from 'raw-loader!./data/nodes/root.html';
 import folder1 from 'raw-loader!./data/nodes/folder1.html';
 import folder2 from 'raw-loader!./data/nodes/folder2.html';
 import job from './data/job';
+import jobs from './data/jobs';
 import store from '../../store';
 
 const fetch = (mockData, showLoading = true, time = 500) => {
@@ -36,5 +37,8 @@ export default {
   },
   startRecallFromTapeJob() {
     return fetch(job);
+  },
+  loadJobs() {
+    return fetch(jobs, false);
   }
 }

vospace-ui-frontend/src/components/Jobs.vue

+<template>
+<table class="table b-table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>Id</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="job in jobs" :key="job.id">
+      <td>{{job.id}}</td>
+      <td>{{job.status}}</td>
+    </tr>
+  </tbody>
+</table>
+</template>
+
+<script>
+export default {
+  computed: {
+    jobs() { return this.$store.state.jobs }
+  }
+}
+</script>

vospace-ui-frontend/src/components/JobsMenuItem.vue

+<template>
+<b-navbar-nav>
+  <b-nav-item href="#/jobs">
+    <strong>Jobs</strong>&nbsp;
+    <b-badge variant="light">{{jobs.length}} <span class="sr-only">unread messages</span></b-badge>
+  </b-nav-item>
+</b-navbar-nav>
+</template>
+
+<script>
+export default {
+  computed: {
+    jobs() { return this.$store.state.jobs }
+  }
+}
+</script>

vospace-ui-frontend/src/components/TopMenu.vue

 <template>
 <div>
   <b-navbar toggleable="lg" type="dark" id="top-menu">
-    <b-navbar-brand href="#" class="d-none d-md-block">VOSpace</b-navbar-brand>
+    <b-navbar-brand href="#/" class="d-none d-md-block">VOSpace</b-navbar-brand>
+    <JobsMenuItem />
   </b-navbar>
 </div>
 </template>
 
+<script>
+import JobsMenuItem from './JobsMenuItem.vue';
+
+export default {
+  components: {
+    JobsMenuItem
+  }
+}
+</script>
+
 <style>
 #top-menu {
   background-color: #093784;

vospace-ui-frontend/src/router.js

 import VueRouter from 'vue-router';
 
 import Main from './components/Main.vue';
+import Jobs from './components/Jobs.vue';
 
 export default new VueRouter({
   routes: [{
@@ -10,5 +11,8 @@ export default new VueRouter({
     name: 'nodes',
     path: '/nodes/:path(.*)',
     component: Main
+  }, {
+    path: '/jobs',
+    component: Jobs
   }]
 })

vospace-ui-frontend/src/store.js

@@ -11,7 +11,8 @@ export default new Vuex.Store({
   state: {
     path: '',
     loading: true,
-    tapeButtonEnabled: false
+    tapeButtonEnabled: false,
+    jobs: []
   },
   mutations: {
     setLoading(state, loading) {
@@ -25,6 +26,17 @@ export default new Vuex.Store({
     },
     setTapeButtonEnabled(state, value) {
       state.tapeButtonEnabled = value;
+    },
+    setJobs(state, jobs) {
+      // empty the array
+      state.jobs.splice(0, jobs.length);
+      // fill again
+      for (let i = 0; i < jobs.length; i++) {
+        state.jobs.push(jobs[i]);
+      }
+    },
+    addJob(state, job) {
+      state.jobs.push(job);
     }
   },
   actions: {
@@ -45,16 +57,21 @@ export default new Vuex.Store({
     computeButtonVisibility({ commit }) {
       commit('setTapeButtonEnabled', document.querySelectorAll('#nodes input.tape:checked').length > 0);
     },
-    startRecallFromTapeJob() {
+    startRecallFromTapeJob({ commit }) {
       let tapeCheckboxes = document.querySelectorAll('#nodes input.tape:checked');
       let paths = [];
       for (let i = 0; i < tapeCheckboxes.length; i++) {
         paths.push(tapeCheckboxes[i].getAttribute('data-node'));
       }
       client.startRecallFromTapeJob(paths)
-        .then(() => {
+        .then(job => {
           main.showInfo('Job started');
+          commit('addJob', job);
         });
+    },
+    loadJobs({ commit }) {
+      client.loadJobs()
+        .then(jobs => commit('setJobs', jobs));
     }
   }
 });