feat: 添加chart报错提示

nezha-fronted/src/assets/css/components/charts/chart.scss

@@ -115,8 +115,8 @@
 }
 .panel-info-corner .fa {
   position: relative;
-  top: -6px;
+  top: -10px;
-  left: -6px;
+  left: 0px;
   font-size: 75%;
   z-index: 3;
 }

nezha-fronted/src/components/chart/chart.vue

@@ -1,7 +1,7 @@
 <template>
   <div :style="chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
-    <chart-no-data v-if="isNoData"></chart-no-data>
+    <chart-no-data v-if="isNoData || isError"></chart-no-data>
     <template v-else>
       <chart-time-series
         v-if="isTimeSeries(chartInfo.type)"
@@ -194,7 +194,8 @@ export default {
     isFullscreen: Boolean,
     loading: Boolean,
     panelLock: Boolean,
-    from: String
+    from: String,
+    isError: Boolean
   },
   computed: {
     isNoData () {

nezha-fronted/src/components/chart/chartHeader.vue

@@ -1,5 +1,18 @@
 <template>
   <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
+    <span v-if="isError">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-error-popper">
+            <div >{{errorText}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+           </span>
+          </el-popover>
+    </span>
     <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
     <div class="chart-header__title" v-else >
       <span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-down': 'nz-icon-arrow-right'"></i></span>
@@ -62,7 +75,12 @@ export default {
     error: {
       type: String,
       default: ''
-    }
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    chartData: {}
   },
   data () {
     return {
@@ -102,6 +120,17 @@ export default {
     groupShow () {
       this.$emit('groupShow', !this.chartInfo.param.collapse)
     }
+  },
+  watch: {
+    isError: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          console.log(this.chartData)
+          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
+        }
+      }
+    }
   }
 }
 </script>

nezha-fronted/src/components/chart/panelChart.vue

@@ -5,6 +5,8 @@
     <chart-header
       v-if="!isFullscreen"
       :is-group="isGroup(chartInfo.type)"
+      :isError="isError"
+      :chartData="chartData"
       :chart-info="chartInfo"
       @edit-chart="$emit('edit-chart', chartInfo)"
       @refresh="refresh"
@@ -19,6 +21,7 @@
       :chart-info="chartInfo"
       :panelLock="panelLock"
       :from="from"
+      :isError="isError"
       :is-fullscreen="isFullscreen"
       :loading="loading"
       v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
@@ -53,7 +56,8 @@ export default {
   data () {
     return {
       chartData: [],
-      loading: true
+      loading: true,
+      isError: false
     }
   },
   computed: {
@@ -95,6 +99,7 @@ export default {
       this.query(elements, startTime, endTime, step)
     },
     query (elements, startTime, endTime, step) {
+      this.isError = false
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':
@@ -142,6 +147,7 @@ export default {
                   chartData.push(r.data.result)
                 } else {
                   chartData.push({ error: r.msg || r.error || r })
+                  this.isError = true
                 }
               })
               this.chartData = chartData

nezha-fronted/src/components/common/login.vue

@@ -355,7 +355,7 @@ export default {
     },
     downloadTxt () {
       const element = document.createElement('a')
-      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponentComponent(this.fileContent))
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.fileContent))
       element.setAttribute('download', 'Nezha recovery codes')
       element.style.display = 'none'
       element.click()

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -66,7 +66,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              :label="$t('dashboard.panel.chartForm.result')"
+              :label="$t('dashboard.panel.chartForm.limit')"
               class="form-item--half-width"
               prop="param.limit"
             >