Skip to content
Snippets Groups Projects
Commit 14fadb27 authored by Sonia Zorba's avatar Sonia Zorba
Browse files

UI: implemented jobs listing

parent 9da22b03
Branches
Tags
No related merge requests found
......@@ -28,6 +28,9 @@ export default {
}),
components: {
TopMenu
},
mounted() {
this.$store.dispatch('loadJobs');
}
}
</script>
......
{
"id": "1234",
"status": "EXECUTING"
"status": "EXECUTING",
"read": true
}
[{
"id": "1",
"status": "COMPLETED",
"read": true
},
{
"id": "2",
"status": "COMPLETED",
"read": true
}
]
......@@ -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);
}
}
<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>
<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>
<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;
......
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
}]
})
......@@ -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));
}
}
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment