* 增加Docker开发环境

* 更新Dockerfile构建文件，升级NodeJS依赖版本。
 * 遵循ESLint重新格式化代码，修复部分警告
 * 登录Token失效增加登出提示
 * 网络请求问题增加错误错误提示
 * 升级UI依赖库

frontend/src/components/Stats/MetricCard.vue

@@ -1,55 +1,56 @@
 <template>
   <el-card class="metric-card">
     <el-col :span="6" class="icon-col">
-      <i :class="icon" :style="{color:color}"></i>
+      <i :class="icon" :style="{color:color}" />
     </el-col>
     <el-col :span="18" class="text-col">
       <el-row>
-        <label class="label">{{$t(label)}}</label>
+        <label class="label">{{ $t(label) }}</label>
       </el-row>
       <el-row>
-        <div class="value">{{value}}</div>
+        <div class="value">{{ value }}</div>
       </el-row>
     </el-col>
   </el-card>
 </template>
 
 <script>
-export default {
-  name: 'MetricCard',
-  props: {
-    icon: {
-      type: String,
-      default: ''
+  export default {
+    name: 'MetricCard',
+    props: {
+      icon: {
+        type: String,
+        default: ''
+      },
+      label: {
+        type: String,
+        default: ''
+      },
+      value: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'default'
+      }
     },
-    label: {
-      type: String,
-      default: ''
-    },
-    value: {
-      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'
+    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>

frontend/src/components/Stats/SpiderStats.vue

@@ -1,24 +1,32 @@
 <template>
-  <div class="spider-stats" v-loading="loading">
+  <div v-loading="loading" class="spider-stats">
     <!--overall stats-->
     <el-row>
       <div class="metric-list">
-        <metric-card label="30-Day Tasks"
-                     icon="fa fa-play"
-                     :value="overviewStats.task_count"
-                     type="danger"/>
-        <metric-card label="30-Day Results"
-                     icon="fa fa-table"
-                     :value="overviewStats.result_count"
-                     type="primary"/>
-        <metric-card label="Success Rate"
-                     icon="fa fa-check"
-                     :value="getPercentStr(overviewStats.success_rate)"
-                     type="success"/>
-        <metric-card label="Avg Duration (sec)"
-                     icon="fa fa-hourglass"
-                     :value="getDecimal(overviewStats.avg_runtime_duration)"
-                     type="warning"/>
+        <metric-card
+          label="30-Day Tasks"
+          icon="fa fa-play"
+          :value="overviewStats.task_count"
+          type="danger"
+        />
+        <metric-card
+          label="30-Day Results"
+          icon="fa fa-table"
+          :value="overviewStats.result_count"
+          type="primary"
+        />
+        <metric-card
+          label="Success Rate"
+          icon="fa fa-check"
+          :value="getPercentStr(overviewStats.success_rate)"
+          type="success"
+        />
+        <metric-card
+          label="Avg Duration (sec)"
+          icon="fa fa-hourglass"
+          :value="getDecimal(overviewStats.avg_runtime_duration)"
+          type="warning"
+        />
       </div>
     </el-row>
     <!--./overall stats-->
@@ -26,8 +34,8 @@
     <el-row>
       <el-col :span="24">
         <el-card class="chart-wrapper">
-          <h4>{{$t('Daily Tasks')}}</h4>
-          <div id="task-line" class="chart"></div>
+          <h4>{{ $t('Daily Tasks') }}</h4>
+          <div id="task-line" class="chart" />
         </el-card>
       </el-col>
     </el-row>
@@ -35,8 +43,8 @@
     <el-row>
       <el-col :span="24">
         <el-card class="chart-wrapper">
-          <h4>{{$t('Daily Avg Duration (sec)')}}</h4>
-          <div id="duration-line" class="chart"></div>
+          <h4>{{ $t('Daily Avg Duration (sec)') }}</h4>
+          <div id="duration-line" class="chart" />
         </el-card>
       </el-col>
     </el-row>
@@ -44,117 +52,120 @@
 </template>
 
 <script>
-import {
-  mapState
-} from 'vuex'
-import MetricCard from './MetricCard'
-import echarts from 'echarts'
+  import {
+    mapState
+  } from 'vuex'
+  import MetricCard from './MetricCard'
+  import echarts from 'echarts'
 
-export default {
-  name: 'SpiderStats',
-  components: { MetricCard },
-  data () {
-    return {
-      loading: false
-    }
-  },
-  methods: {
-    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.task_count),
-          areaStyle: {},
-          smooth: true
-        }],
-        tooltip: {
-          trigger: 'axis',
-          show: true
-        }
+  export default {
+    name: 'SpiderStats',
+    components: { MetricCard },
+    data() {
+      return {
+        loading: false
       }
-      chart.setOption(option)
+    },
+    computed: {
+      ...mapState('spider', [
+        'overviewStats',
+        'statusStats',
+        'nodeStats',
+        'dailyStats'
+      ])
     },
 
-    renderDurationLine () {
-      const chart = echarts.init(this.$el.querySelector('#duration-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.avg_runtime_duration),
-          areaStyle: {},
-          smooth: true
-        }],
-        tooltip: {
-          trigger: 'axis',
-          show: true
+    mounted() {
+    },
+
+    methods: {
+      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.task_count),
+            areaStyle: {},
+            smooth: true
+          }],
+          tooltip: {
+            trigger: 'axis',
+            show: true
+          }
         }
+        chart.setOption(option)
+      },
+
+      renderDurationLine() {
+        const chart = echarts.init(this.$el.querySelector('#duration-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.avg_runtime_duration),
+            areaStyle: {},
+            smooth: true
+          }],
+          tooltip: {
+            trigger: 'axis',
+            show: true
+          }
+        }
+        chart.setOption(option)
+      },
+
+      render() {
+        this.renderTaskLine()
+        this.renderDurationLine()
+      },
+
+      update() {
+        this.loading = true
+        this.$store.dispatch('spider/getSpiderStats')
+          .then(() => {
+            this.render()
+          })
+          .catch(() => {
+            this.$message.error(this.$t('An error happened when fetching the data'))
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      },
+
+      getPercentStr(value) {
+        if (value === undefined) return 'NA'
+        return (value * 100).toFixed(2) + '%'
+      },
+
+      getDecimal(value) {
+        if (value === undefined) return 'NA'
+        return value.toFixed(2)
       }
-      chart.setOption(option)
-    },
-
-    render () {
-      this.renderTaskLine()
-      this.renderDurationLine()
-    },
-
-    update () {
-      this.loading = true
-      this.$store.dispatch('spider/getSpiderStats')
-        .then(() => {
-          this.render()
-        })
-        .catch(() => {
-          this.$message.error(this.$t('An error happened when fetching the data'))
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-
-    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',
-      'nodeStats',
-      'dailyStats'
-    ])
-  },
-  mounted () {
+
   }
-}
 </script>
 
 <style scoped>