Commit 0fadbb61 authored by Bryan  BRANCOTTE's avatar Bryan BRANCOTTE
Browse files

Add queue status as a menu entry, remove it from projects, add dedicated page

parent 92bf5d2f
<template>
<div>
<v-speed-dial v-model="dialShare" absolute right bottom direction="left" open-on-hover>
<v-speed-dial v-model="dialShare" absolute top right direction="left" open-on-hover>
<template v-slot:activator>
<v-btn fab bottom small color="primary">
<v-icon v-if="dialShare">mdi-close</v-icon>
......@@ -23,8 +22,6 @@
<v-icon>mdi-clipboard</v-icon>
</v-btn>
</v-speed-dial>
</div>
</template>
<script>
......
......@@ -20,10 +20,25 @@
></v-img>
</v-app-bar>
<v-tabs fixed-tabs dark>
<span class="hidden-xs-only" style="width:280px"></span>
<v-tab v-for="(item, i) in items"
:key="i"
:to="item.to" v-text="item.title">
</v-tab>
<v-tab to="/workload" style="max-width:280px;margin-right: inherit;margin-left: auto;">
Workload
<v-progress-linear
:value="this.activeTask/(this.activeTask+this.pendingTask)*100"
:background-color="(this.activeTask==0)&&(this.pendingTask==0)?'#fffb':undefined"
:buffer-value="this.activeTask === null ? 0 : 100"
height="20"
:stream="this.activeTask === null"
:striped="this.activeTask !== null"
color="rgb(45, 150, 250)"
:title="'Task: '+this.activeTask +' running and ' +this.pendingTask+' pending.'"
class="hidden-xs-only ml-2"
><small>{{textProgressBar}}</small></v-progress-linear>
</v-tab>
</v-tabs>
<v-main>
<v-container>
......@@ -38,6 +53,8 @@
export default {
data () {
return {
activeTask: null,
pendingTask: null,
clipped: false,
drawer: false,
fixed: false,
......@@ -125,6 +142,36 @@ export default {
],
},
}
},
created(){
this.getQueueStatus();
},
methods:{
async getQueueStatus(){
if (this.isready)
return;
await this.$axios.$get('/queue_status').then((function (resultStatus) {
console.log(resultStatus);
this.activeTask = resultStatus.active;
this.pendingTask = resultStatus.reserved;
setTimeout(this.getQueueStatus, 5000);
}).bind(this)).catch((function () {
setTimeout(this.getQueueStatus, 10000);
}).bind(this));
},
},
computed:{
textProgressBar(){
if (this.activeTask === null)
return ''
if (this.pendingTask === 0){
if (this.activeTask ===0 ){
return 'no load';
}
return this.activeTask + " running";
}
return this.activeTask + " + " + this.pendingTask;
},
}
}
</script>
......
......@@ -29,26 +29,18 @@
<strong style="color:white; text-transform:capitalize;">{{progress}} %</strong>
</v-progress-linear>
</v-col>
<v-col
class="text-subtitle-1 text-center"
cols="12"
v-if="(activeTask == 0) || (pendingTask != 0)"
>
Task: {{activeTask}} running and {{pendingTask}} pending.
</v-col>
</v-row>
<v-row v-show="isready" align="center">
<v-col cols="12">
<v-card >
<ShareLink :pageUrl="sharedUrl"/>
</v-card>
<v-card>
<ShareLink :pageUrl="sharedUrl" style="top:-1em"/>
<div class="row" style="text-align:left;padding:12px;margin:0;">
<h1 style="text-transform:none;">Results for :</h1>
<PhenotypeCard v-for="pheno in phenotypesDict" :key="pheno.id" :phe="pheno"/>
</div>
</v-card>
<v-card style="margin-top:10px; margin-bottom:10px;" outlined tile no-gutter>
<v-card-title class="text-h5">
<v-row justify="start" no-gutters>
......@@ -308,8 +300,6 @@ export default {
isready: false,
isready2: false,
progress:0,
activeTask: 1,
pendingTask: 0,
gencov:null,
metadata:{"nb_phenotypes":0,"nb_snps":0},
summary:{"JASSSignif":{"MinUnivNotSignif":0,"MinUnivSignif":0},"JASSNotSignif":{"MinUnivNotSignif":0,"MinUnivSignif":0}},
......@@ -320,7 +310,6 @@ export default {
created(){
this.status = this.getStatus();
this.getQueueStatus();
},
......@@ -574,19 +563,6 @@ methods:{
this.Regions=this.manhattan.data.datarows
},
async getQueueStatus(){
if (this.isready)
return;
await this.$axios.$get('/queue_status').then((function (resultStatus) {
console.log(resultStatus);
this.activeTask = resultStatus.active;
this.pendingTask = resultStatus.reserved;
setTimeout(this.getQueueStatus, 5000);
}).bind(this)).catch((function () {
setTimeout(this.getQueueStatus, 10000);
}).bind(this));
},
async getStatus(){
......
<template>
<v-row>
<v-col cols=12 style="text-align:center">
<h1>Server workload</h1>
</v-col>
<v-col cols=12 >
<v-row>
<v-col cols=6 style="text-align:right">
<h4>Compute node:</h4>
</v-col>
<v-col cols=6 >
<h4>{{this.worker}}</h4>
</v-col>
</v-row>
</v-col>
<v-col cols=12 >
<v-row>
<v-col cols=6 style="text-align:right">
<h4>Tasks being processed:</h4>
</v-col>
<v-col cols=6 >
<h4>{{this.activeTask}}</h4>
</v-col>
</v-row>
</v-col>
<v-col cols=12 >
<v-row>
<v-col cols=6 style="text-align:right">
<h4>Pending tasks to be computed</h4>
</v-col>
<v-col cols=6 >
<h4>{{this.pendingTask}}</h4>
</v-col>
</v-row>
</v-col>
<v-col
v-if="activeTask===0"
style="text-align:center"
cols=12>
Your analysis would start right away.
</v-col>
<v-col
v-else-if="activeTask>0"
style="text-align:center"
cols=12>
Your analysis would be queued, and processed as soon as possible.
</v-col>
<v-col
v-else
cols=12>
&nbsp;
</v-col>
</v-row>
</template>
<script>
export default {
data () {
return {
activeTask: '_',
pendingTask: '_',
worker: '_',
}
},
created(){
this.getQueueStatus();
},
methods:{
async getQueueStatus(){
await this.$axios.$get('/queue_status').then((function (resultStatus) {
console.log(resultStatus);
this.activeTask = resultStatus.active;
this.worker = resultStatus.worker;
this.pendingTask = resultStatus.reserved;
setTimeout(this.getQueueStatus, 5000);
}).bind(this)).catch((function () {
setTimeout(this.getQueueStatus, 10000);
}).bind(this));
},
}
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment