added spider stats

frontend/src/components/Stats/MetricCard.vue

@@ -27,7 +27,6 @@ export default {
       default: ''
     },
     value: {
-      type: String,
       default: ''
     },
     type: {

frontend/src/components/Stats/SpiderStats.vue

@@ -17,20 +17,14 @@
                      type="success"/>
         <metric-card :label="$t('Avg Duration (sec)')"
                      icon="fa fa-hourglass"
-                     :value="getDecimal(overviewStats.avg_duration)"
+                     :value="getDecimal(overviewStats.avg_runtime_duration)"
                      type="warning"/>
       </div>
     </el-row>
     <!--./overall stats-->
 
     <el-row>
-      <el-col :span="8">
-        <el-card class="chart-wrapper" style="margin-right: 20px;">
-          <h4>{{$t('Tasks by Status')}}</h4>
-          <div id="task-pie-status" class="chart"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="16">
+      <el-col :span="24">
         <el-card class="chart-wrapper">
           <h4>{{$t('Daily Tasks')}}</h4>
           <div id="task-line" class="chart"></div>
@@ -39,13 +33,7 @@
     </el-row>
 
     <el-row>
-      <el-col :span="8">
-        <el-card class="chart-wrapper" style="margin-right: 20px;">
-          <h4>{{$t('Tasks by Node')}}</h4>
-          <div id="task-pie-node" class="chart"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="16">
+      <el-col :span="24">
         <el-card class="chart-wrapper">
           <h4>{{$t('Daily Avg Duration (sec)')}}</h4>
           <div id="duration-line" class="chart"></div>
@@ -71,64 +59,6 @@ export default {
     }
   },
   methods: {
-    renderTaskPieStatus () {
-      const chart = echarts.init(this.$el.querySelector('#task-pie-status'))
-      const option = {
-        tooltip: {
-          show: true
-        },
-        series: [{
-          name: '',
-          type: 'pie',
-          // radius: ['50%', '70%'],
-          data: this.statusStats.map(d => {
-            let color
-            if (d.name === 'SUCCESS') {
-              color = '#67c23a'
-            } else if (d.name === 'STARTED') {
-              color = '#e6a23c'
-            } else if (d.name === 'FAILURE') {
-              color = '#f56c6c'
-            } else {
-              color = 'grey'
-            }
-            return {
-              name: this.$t(d.name),
-              value: d.value,
-              itemStyle: {
-                color
-              }
-            }
-          })
-        }]
-      }
-      chart.setOption(option)
-    },
-
-    renderTaskPieNode () {
-      const chart = echarts.init(this.$el.querySelector('#task-pie-node'))
-      const option = {
-        tooltip: {
-          show: true
-        },
-        series: [{
-          name: '',
-          type: 'pie',
-          // radius: ['50%', '70%'],
-          data: this.nodeStats.map(d => {
-            return {
-              name: d.name,
-              value: d.value
-              // itemStyle: {
-              //   color
-              // }
-            }
-          })
-        }]
-      }
-      chart.setOption(option)
-    },
-
     renderTaskLine () {
       const chart = echarts.init(this.$el.querySelector('#task-line'))
       const option = {
@@ -145,7 +75,7 @@ export default {
         },
         series: [{
           type: 'line',
-          data: this.dailyStats.map(d => d.count),
+          data: this.dailyStats.map(d => d.task_count),
           areaStyle: {},
           smooth: true
         }],
@@ -173,7 +103,7 @@ export default {
         },
         series: [{
           type: 'line',
-          data: this.dailyStats.map(d => d.duration),
+          data: this.dailyStats.map(d => d.avg_runtime_duration),
           areaStyle: {},
           smooth: true
         }],
@@ -186,9 +116,7 @@ export default {
     },
 
     render () {
-      this.renderTaskPieStatus()
       this.renderTaskLine()
-      this.renderTaskPieNode()
       this.renderDurationLine()
     },