added analytics for spider

frontend/src/components/Stats/MetricCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-card class="metric-card">
+    <el-col :span="6" class="icon-col">
+      <i :class="icon" :style="{color:color}"></i>
+    </el-col>
+    <el-col :span="18" class="text-col">
+      <el-row>
+        <label class="label">{{$t(label)}}</label>
+      </el-row>
+      <el-row>
+        <div class="value">{{value}}</div>
+      </el-row>
+    </el-col>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'MetricCard',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    color () {
+      if (this.type === 'primary') {
+        return '#409EFF'
+      } else if (this.type === 'warning') {
+        return '#e6a23c'
+      } else if (this.type === 'success') {
+        return '#67c23a'
+      } else if (this.type === 'danger') {
+        return '#f56c6c'
+      } else {
+        return 'grey'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .metric-card {
+    margin-right: 20px;
+  }
+
+  .metric-card:last-child {
+    margin-right: 0;
+  }
+
+  .metric-card .icon-col i {
+    margin-bottom: 15px;
+    font-size: 56px;
+  }
+
+  .metric-card .text-col {
+    padding-left: 10px;
+    height: 76px;
+    text-align: center;
+  }
+
+  .metric-card .text-col label {
+    font-size: 16px;
+    display: block;
+    height: 24px;
+    color: grey;
+    font-weight: 900;
+  }
+
+  .metric-card .text-col .value {
+    font-size: 24px;
+    display: block;
+    height: 32px;
+  }
+</style>

frontend/src/components/Stats/SpiderStats.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="spider-stats">
+    <!--overall stats-->
+    <el-row>
+      <div class="metric-list">
+        <metric-card :label="$t('30-Day Tasks')"
+                     icon="fa fa-play"
+                     :value="overviewStats.task_count"
+                     type="danger"/>
+        <metric-card :label="$t('30-Day Results')"
+                     icon="fa fa-table"
+                     :value="overviewStats.result_count"
+                     type="primary"/>
+        <metric-card :label="$t('Success Rate')"
+                     icon="fa fa-check"
+                     :value="getPercentStr(overviewStats.success_rate)"
+                     type="success"/>
+        <metric-card :label="$t('Avg Duration (sec)')"
+                     icon="fa fa-hourglass"
+                     :value="getDecimal(overviewStats.avg_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" class="chart"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card class="chart-wrapper">
+          <h4>{{$t('Daily Tasks')}}</h4>
+          <div id="task-line" class="chart"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="8">
+        <el-card class="chart-wrapper" style="margin-right: 20px;">
+          <h4>{{$t('Tasks by Status')}}</h4>
+          <el-table class="table"></el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card class="chart-wrapper">
+          <h4>{{$t('Tasks by Status')}}</h4>
+          <div id="duration-line" class="chart"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  mapState
+} from 'vuex'
+import MetricCard from './MetricCard'
+import echarts from 'echarts'
+
+export default {
+  name: 'SpiderStats',
+  components: { MetricCard },
+  methods: {
+    renderTaskPie () {
+      const chart = echarts.init(this.$el.querySelector('#task-pie'))
+      const option = {
+        series: [{
+          name: '',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.statusStats.map(d => {
+            return {
+              name: this.$t(d.name),
+              value: d.value
+            }
+          })
+        }]
+      }
+      chart.setOption(option)
+    },
+
+    renderTaskLine () {
+      const chart = echarts.init(this.$el.querySelector('#task-line'))
+      const option = {
+        grid: {
+          top: 20,
+          bottom: 40
+        },
+        xAxis: {
+          type: 'category',
+          data: this.dailyStats.map(d => d.date)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          type: 'line',
+          data: this.dailyStats.map(d => d.count),
+          areaStyle: {},
+          smooth: true
+        }],
+        tooltip: {
+          trigger: 'axis',
+          show: true
+        }
+      }
+      chart.setOption(option)
+    },
+
+    render () {
+      this.renderTaskPie()
+      this.renderTaskLine()
+    },
+
+    update () {
+      this.$store.dispatch('spider/getSpiderStats')
+        .then(() => {
+          this.render()
+        })
+    },
+
+    getPercentStr (value) {
+      if (value === undefined) return 'NA'
+      return (value * 100).toFixed(2) + '%'
+    },
+
+    getDecimal (value) {
+      if (value === undefined) return 'NA'
+      return value.toFixed(2)
+    }
+  },
+  computed: {
+    ...mapState('spider', [
+      'overviewStats',
+      'statusStats',
+      'dailyStats'
+    ])
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style scoped>
+  .metric-list {
+    display: flex;
+  }
+
+  .metric-list .metric-card {
+    flex-basis: 25%;
+  }
+
+  .chart-wrapper {
+    margin-top: 20px;
+  }
+
+  .chart {
+    width: 100%;
+    height: 240px;
+  }
+
+  .table {
+    height: 240px;
+  }
+
+  h4 {
+    display: inline-block;
+    margin: 0
+  }
+</style>