Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0

nezha-fronted/src/components/common/language/cn.js

@@ -605,7 +605,8 @@ const cn = {
     confirmCancel: '您所做的修改将不会被保存？',
     copySuccess: '复制成功',
     lnglatError: '经纬度格式错误',
-    tagError: '不符合正则 /^[a-zA-Z_][a-zA-Z0-9_]*/!'
+    tagError: '不符合正则 /^[a-zA-Z_][a-zA-Z0-9_]*/!',
+    syntaxError: '语法错误'
   },
   asset: {
     asset: '资产',

nezha-fronted/src/components/common/language/en.js

@@ -612,7 +612,9 @@ const en = {
     confirmCancel: 'Changes you made are not saved?',
     copySuccess: 'Copy success',
     lnglatError: 'Wrong format of latitude and longitude',
-    tagError: 'Does not conform to regular expressions /^[a-zA-Z_][a-zA-Z0-9_]*/!'
+    tagError: 'Does not conform to regular expressions /^[a-zA-Z_][a-zA-Z0-9_]*/!',
+    syntaxError: 'Syntax error',
+    errorInRow: 'There are some syntax errors in rows'
   },
   asset: {
     asset: 'Asset ',

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -2,6 +2,7 @@
   <div class="explores">
     <explore-item
       v-for="item in exploreItems"
+      ref="exploreItem"
       :key="item"
       :closable="closable"
       :tab-index="item"
@@ -38,6 +39,12 @@ export default {
         } else {
           this.exploreItems.push(index === 0 ? 1 : 0)
         }
+        this.$nextTick(() => {
+          this.$refs.exploreItem.forEach(e => {
+            const component = e.$refs.logDetail
+            component && component.resizeChart()
+          })
+        })
       }
     }
   }

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -130,7 +130,7 @@
                 </div>
               </el-collapse-item>
               <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
-                <log-tab ref="logDetail" :log-data="logData" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+                <log-tab ref="logDetail" :log-data="logData" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
               </el-collapse-item>
             </template>
           </el-collapse>
@@ -530,7 +530,7 @@ export default {
     },
     queryLogData (limit) { // log的chart和table是一个请求
       if (!limit) {
-        limit = this.$refs.logDetail.getLimit()
+        limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 1000
       }
       if (this.expressions.length > 0) {
         const requestArr = []
@@ -544,32 +544,46 @@ export default {
           this.saveDisabled = false
         }
         axios.all(requestArr).then(res => {
-          this.logData = res.map(r => r.data)
-          const hasGraph = this.logData.some(d => d.resultType === 'matrix')
-          const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
-          const graphTabIndex = this.showTab.indexOf('1')
-          if (hasGraph) {
-            if (graphTabIndex === -1) {
-              this.showTab.push('1')
+          const errorRowIndex = []
+          res.forEach((r, i) => {
+            if (typeof r === 'string') {
+              errorRowIndex.push(i)
             }
-          } else {
-            if (graphTabIndex > -1) {
-              this.showTab.splice(graphTabIndex, 1)
-            }
-          }
-          const logTabIndex = this.showTab.indexOf('2')
-          if (hasLog) {
-            if (logTabIndex === -1) {
-              this.showTab.push('1')
-            }
-          } else {
-            if (logTabIndex > -1) {
-              this.showTab.splice(logTabIndex, 1)
-            }
-          }
-          this.$nextTick(() => {
-            hasGraph && this.loadLogGraph()
           })
+          if (errorRowIndex.length > 0) {
+            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
+            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
+          }
+          if (res.length > 0) {
+            this.logData = res.map(r => r.data)
+            const hasGraph = this.logData.some(d => d.resultType === 'matrix')
+            const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
+            const graphTabIndex = this.showTab.indexOf('1')
+            if (hasGraph) {
+              if (graphTabIndex === -1) {
+                this.showTab.push('1')
+              }
+            } else {
+              if (graphTabIndex > -1) {
+                this.showTab.splice(graphTabIndex, 1)
+              }
+            }
+            const logTabIndex = this.showTab.indexOf('2')
+            if (hasLog) {
+              if (logTabIndex === -1) {
+                this.showTab.push('1')
+              }
+            } else {
+              if (logTabIndex > -1) {
+                this.showTab.splice(logTabIndex, 1)
+              }
+            }
+            this.$nextTick(() => {
+              hasGraph && this.loadLogGraph()
+            })
+          }
+        }).catch(e => {
+          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
         })
       }
     },

nezha-fronted/src/components/page/dashboard/explore/logTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="log-detail">
-    <div id="logChart" class="log-chart"></div>
+    <div :id="`logChart${tabIndex}`" class="log-chart"></div>
     <div class="log-operations">
       <div class="log-operation">
         <span class="operation-label">{{$t('overall.time')}}</span>
@@ -77,7 +77,8 @@ import * as echarts from 'echarts'
 export default {
   name: 'logTab',
   props: {
-    logData: Array
+    logData: Array,
+    tabIndex: Number
   },
   computed: {
     tableTimeFormat () {
@@ -175,7 +176,8 @@ export default {
       return this.timezoneToUtcTimeStr(this.toMillisecondTime(timestamp))
     },
     loadChart () {
-      const dom = document.getElementById('logChart')
+      const vm = this
+      const dom = document.getElementById(`logChart${this.tabIndex}`)
       if (!dom) {
         return
       }
@@ -222,7 +224,9 @@ export default {
             axisLabel: {
               rotate: 0,
               fontSize: 13 * window.devicePixelRatio,
-              formatter: '{HH}:{mm}:{ss}'
+              formatter (value) {
+                return vm.$unixTimeParseToString(vm.toMillisecondTime(value) / 1000, 'hh:mm')
+              }
             },
             boundaryGap: [0, '1%']
           },
@@ -388,6 +392,9 @@ export default {
     },
     getLimit () {
       return this.limit
+    },
+    resizeChart () {
+      this.myChart.resize()
     }
   },
   watch: {