From 7e90752e3e046160f397ac16f20c82d0a330e1e1 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 17 Dec 2021 09:47:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0chart=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/components/charts/chart.scss   |  4 +--
 nezha-fronted/src/components/chart/chart.vue  |  5 +--
 .../src/components/chart/chartHeader.vue      | 31 ++++++++++++++++++-
 .../src/components/chart/panelChart.vue       |  8 ++++-
 nezha-fronted/src/components/common/login.vue |  2 +-
 .../rightBox/chart/systemChartConfig.vue      |  2 +-
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 83e3873d5..a18f52f38 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -115,8 +115,8 @@
 }
 .panel-info-corner .fa {
   position: relative;
-  top: -6px;
-  left: -6px;
+  top: -10px;
+  left: 0px;
   font-size: 75%;
   z-index: 3;
 }
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 15961d59a..fa79c4b96 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/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 () {
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index 12bfce975..ec3bed9b1 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/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>
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 3c406e277..a11527aae 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 2cf2c5af5..51adf7a78 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/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()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 60f59da07..3fa7341ab 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/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"
             >