From 9496d7f8ed37a05078d16a9beb8529c101c17c5c Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 1 Dec 2021 15:40:07 +0800
Subject: [PATCH 1/8] =?UTF-8?q?style:=20endpoint=20=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/batchAddEndpoint.vue    | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
index 20bc1fc51..e08d07dc6 100644
--- a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
@@ -10,9 +10,9 @@
     </div>
 
     <!-- begin--表单-->
-    <div class="right-box-form-box right-box__container" style="overflow: hidden;padding-left: 20px;margin-top: 0">
+    <div class="right-box__container">
       <div class="container__form" style="display: flex; flex-direction: column;height: 100%">
-        <el-form class="right-box-form" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
+        <el-form label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
           <el-form-item :label="$t('project.module.module')" prop="ChartTemplate">
             <v-selectpage
               :data="moduleList"
@@ -60,7 +60,7 @@
           :data="batchEndpoint.tableData"
           :class="showError?'error' : ''"
           :height="'calc(100% - 400px)'"
-          style="width:calc(100% - 70px);margin-left: 15px;min-height:400px;flex: 1"
+          style="width:100%;min-height:400px;flex: 1"
           border>
           <el-table-column
             v-for="(item, index) in endpointTableTitle"
@@ -504,10 +504,6 @@ export default {
   .error{
     border: 1px solid #F56C6C !important;
   }
-  .right-box-sub-title{
-    width: calc(100% - 70px);
-    margin-left: 15px;
-  }
   /deep/ .el-table thead .cell{
     font-size: 14px;
     color: #333333;

From 64023fdbb016595390f9006214de1e46a61c65e0 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Dec 2021 11:14:27 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat=20=EF=BC=9A=20logs=20=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8=20=E4=BB=A5=E5=8F=8A=20=E6=B7=BB=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |   7 +
 .../common/rightBox/chart/chartRightBox.vue   |  78 +--
 .../common/rightBox/chart/chartTypeShow.js    |  95 ++++
 .../common/rightBox/chart/logsChartConfig.vue | 493 +++++++++++++++++-
 .../rightBox/chart/metricsChartConfig.vue     | 166 +++---
 .../common/rightBox/chart/publicConfig.js     |  29 +-
 6 files changed, 743 insertions(+), 125 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 7f2318218..d10c6b6c1 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -90,5 +90,12 @@
       border-bottom: none;
       margin-bottom: 10px;
     }
+    .vue-tags-input{
+      display: inline-block;
+      width: 100%;
+      .ti-input{
+        padding: 1px 3px;
+      }
+    }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 50ae6d165..2103fcdea 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -15,7 +15,7 @@
     <!-- begin--表单-->
     <div class="right-box-form-box right-box__container chart-right-box">
       <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
-        <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
+        <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name">
           <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
         </el-form-item>
 
@@ -59,16 +59,16 @@
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
           <el-tab-pane label="Metrics" name="1">
-            <metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
+            <metrics-chart-config ref="childrenFrom1" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="Logs" name="2">
-            <logs-chart-config  v-if="editChart.datasource == 2" :params.sync="editChart"/>
+            <logs-chart-config ref="childrenFrom2" v-if="editChart.datasource == 2" :params.sync="editChart"/>
           </el-tab-pane>
           <el-tab-pane label="System" name="3">
-            <system-chart-config  v-if="editChart.datasource == 3" :params.sync="editChart"/>
+            <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
           </el-tab-pane>
           <el-tab-pane label="Other" name="4">
-            <other-chart-config  v-if="editChart.datasource == 4" :params.sync="editChart"/>
+            <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -84,7 +84,7 @@
       <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn">
         <span>{{$t('overall.preview')}}</span>
       </button>
-      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn">
+      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -156,6 +156,8 @@ export default {
       groupArr: [],
       panelName: '',
       rules: {
+        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
       }
     }
   },
@@ -171,36 +173,42 @@ export default {
     },
     // 保存endpoint
     save () {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      // 对endpointList进行处理，避免携带过多无用数据
-      const endpointList = []
-      this.endpointTableData.forEach((item, index) => {
-        const endpoint = {
-          moduleId: item.moduleId,
-          assetId: item.assetId,
-          name: item.name,
-          configs: JSON.stringify(item.configs),
-          id: item.id
-        }
-        endpointList.push(endpoint)
-      })
-      this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
-          this.$put('monitor/endpoint', endpointList).then(response => {
-            this.prevent_opt.save = false
-            if (response.code === 200) {
-              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
-            } else {
-              this.$message.error(response.msg)
-            }
-          })
-        } else {
-          this.prevent_opt.save = false
-          return false
-        }
+      console.log(123132213)
+      const arr = [this.$refs.chartForm.validate()]
+      arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
+      Promise.all(arr).then(res => {
+        console.log(res)
+      }).catch(res => {
+        console.log(res)
       })
+
+      // this.$refs.chartForm.validate((valid) => {
+      //   if (valid) {
+      //     if (this.editChart.id) { // 修改
+      //       this.editChart.param.collapse = this.chartSwitch
+      //       this.$put('visual/panel/chart', this.editChart).then(response => {
+      //         if (response.code === 200) {
+      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+      //           this.esc(true)
+      //         } else {
+      //           this.$message.error(response.msg)
+      //         }
+      //       })
+      //     } else { // 新增
+      //       this.$post('visual/panel/chart', this.editChart).then(response => {
+      //         if (response.code === 200) {
+      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+      //           this.esc(true)
+      //         } else {
+      //           this.$message.error(response.msg)
+      //         }
+      //       })
+      //     }
+      //   } else {
+      //     console.error('error submit!!')
+      //     return false
+      //   }
+      // })
     },
     selectPanel (panel) {
       this.panelName = panel.name
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
new file mode 100644
index 000000000..3086ee0ac
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -0,0 +1,95 @@
+export default {
+  methods: {
+    isStackShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isStatisticsShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return false
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isShowLegend (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isShowValueMapping (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'table':
+          return false
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isTable (type) {
+      switch (type) {
+        case 'table':
+          return true
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isLog (type) {
+      switch (type) {
+        case 'log':
+          return true
+        case 'table':
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
index b53662a50..30e0f2d6f 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
@@ -1,12 +1,499 @@
 <template>
-  <div>
-    logs
+  <div class="chart-config">
+    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
+      <div v-if="chartConfig.elements">
+        <el-form-item
+          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+        >
+          <div class="chart-title chart-title-config">
+            <span class="endpoint-title-content">
+              <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1]?'':'is-active'" @click="showExpression(index)"></i>
+              <span>
+                {{expressionName[index-1]}}
+                <!--                名称修改 暂未实现-->
+              </span>
+            </span>
+            <span>
+              <span @click="addExpression('')">
+                  <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+              </span>
+              <span class="nz-icon-copy">
+                  <i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
+              </span>
+              <span class="nz-icon-minus-medium">
+                  <i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
+              </span>
+            </span>
+          </div>
+          <transition name="el-zoom-in-top">
+            <el-row v-show="expressionsShow[index-1]">
+              <promql-input
+                :from-father-data="true"
+                :metricOptionsParent="metricOptions"
+                :expression-list="expressions"
+                :id="promqlKeys[index-1]"
+                :index="index-1"
+                :required = 'true'
+                :type="promqlType"
+                :key="promqlKeys[index-1]"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                :ref="'promql-'+(index-1)"
+                :showRemove="false"
+                :styleType="2"
+                @change="expressionChange"
+                @removeExpression="removeExpression"
+              ></promql-input>
+              <el-row style="margin-top: 18px">
+                <el-col class="legend-title">
+                  <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
+                  <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                    <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 160px);">
+                  <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
+                </el-col>
+              </el-row>
+            </el-row>
+          </transition>
+        </el-form-item>
+      </div>
+
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && chartConfig.isGroup" :label="item.name" :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- unit -->
+        <el-form-item v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+          <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                       placeholder=""
+                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                       size="small"
+                       style="width: 100%"
+                       @change="unitSelected"
+          >
+          </el-cascader>
+        </el-form-item>
+
+        <!-- index -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.index">
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
+        <!-- limit -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.limit">
+          <el-input-number size="small" placeholder="" v-model="chartConfig.param.limit" :controls="false" @change="change"/>
+        </el-form-item>
+
+        <!--width-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
+          <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--height-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
+          <!-- 由px改为span -->
+          <el-select id="chart-box-height"  v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--stack-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.stack')" class="form-item--half-width"  prop="param.stack" v-if="isStackShow(chartConfig.type)">
+          <el-select id="chart-box-height" v-model="chartConfig.param.stack" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option :value="1" label="true">
+            </el-option>
+            <el-option :value="0" label="false">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--statistics-->
+        <el-form-item v-if="isStatisticsShow(chartConfig.type)" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
+          <el-select id="chart-box-statistics" v-model="chartConfig.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+            <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+              <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--   nullType     -->
+        <el-form-item  :label='"Null value"' class="form-item--half-width"  prop="param.nullType" v-if="!isLog(chartConfig.type)">
+          <el-select id="chart-box-nullType" v-model="chartConfig.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()" >
+            <el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div v-if="isShowLegend(chartConfig.type)">
+        <!--legendConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
+          <el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
+              <el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="param.legend.values">
+              <el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+
+        <!--thresholdConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
+          <el-switch v-model="chartConfig.param.thresholdShow" size="small" @change="thresholdShowChange"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.thresholdShow">
+            <div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
+              <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
+                          @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
+              <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
+              <span @click="delThresholds(index)" class="del-thresholds-icon">
+              <i class="nz-icon nz-icon-delete" />
+            </span>
+            </div>
+            <div @click="addThresholds" class="thresholds-add">
+              Add thresholds
+            </div>
+          </el-row>
+        </transition>
+      </div>
+      <!--      valueMapping  -->
+      <div v-if="isShowValueMapping(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+          <el-switch v-model="chartConfig.param.valueMapping.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.valueMapping.show">
+            <div v-for="(item,index) in chartConfig.param.valueMapping.mapping" :key="index">
+              <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span v-if="item.type === 'value'">
+                      {{item.value}}
+                    </span>
+                    <span v-if="item.type === 'range'">
+                      {{item.from}} -> {{item.to}}
+                    </span>
+                    <span v-if="item.type === 'regx'">
+                      {{item.regx}}
+                    </span>
+                     <div :style="{background:item.color.bac}" class="prev-mapping-box">
+                        <span :style="{color:item.color.text}">
+                          {{item.display || "T"}}
+                        </span>
+                      </div>
+                  </span>
+                </span>
+                <span>
+                  <span @click="addMapping('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+              </div>
+              <transition-group appear tag="div" name="el-zoom-in-top">
+                <el-row v-show="item.show" :key="1" class="thresholds-item">
+                  <div>
+                    <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
+                      <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
+                    </el-select>
+                  </div>
+                  <el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
+                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
+                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
+                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                </el-row>
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
+                  <div>
+                    <div class='mapping-display'>Display</div>
+                  </div>
+                  <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
+                </el-row>
+              </transition-group>
+            </div>
+            <div @click="addMapping" class="thresholds-add">
+              Add valueMapping
+            </div>
+          </el-row>
+        </transition>
+      </div>
+
+      <!--      table column-->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+          <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
+import promqlInput from '@/components/page/dashboard/explore/promqlInput'
+import nezhaColor from '@/components/common/nezhaColor'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
-  name: 'metricsChartConfig'
+  name: 'metricsChartConfig',
+  props: {
+    params: {}
+  },
+  components: {
+    promqlInput,
+    nezhaColor,
+    VueTagsInput
+  },
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
+  computed: {},
+  data () {
+    return {
+      rules: {},
+      promqlType: 'log',
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      // 重置相关属性
+      this.promqlCount = 0
+      this.promqlKeys = []
+      this.elementIds = []
+      this.expressions = []
+      this.expressionsShow = []
+      this.legends = []
+      if (!this.chartConfig.elements.length) {
+        this.addExpression()
+      } else {
+        this.chartConfig.elements.forEach(item => {
+          this.addExpression(item)
+        })
+      }
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          this.chartConfig.param = {
+            stack: 0,
+            nullType: this.chartConfig.param.nullType,
+            legend: { placement: 'bottom', values: [], show: true },
+            thresholdShow: true,
+            thresholds: []
+          }
+          this.$nextTick(() => {
+            this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
+          })
+          break
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
+          }
+          break
+        case 'table':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            columns: [],
+            tags: [],
+            indexs: ''
+          }
+          break
+      }
+      this.change()
+    },
+    sortThresholds () {
+      if (this.param && this.param.thresholds.length > 1) {
+        this.param.thresholds = this.chartConfig.param.thresholds.sort((a, b) => {
+          const value1 = a.value
+          const value2 = b.value
+          return value1 - value2
+        })
+      }
+      this.change()
+    },
+    thresholdShowChange () {
+      // if (this.chartConfig.param.thresholdShow) {
+      //
+      // } else {
+      //
+      // }
+      this.change()
+    },
+    addThresholds () {
+      this.chartConfig.param.thresholds.push({
+        value: '',
+        color: '#eeeeeeff'
+      })
+      this.change()
+    },
+    delThresholds (index) {
+      if (this.chartConfig.param.thresholds.length === 1) {
+        return
+      }
+      this.chartConfig.param.thresholds.splice(index, 1)
+      this.change()
+    }
+  },
+  created () {
+    this.init()
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
index 561454c67..f8cd59f5f 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="chart-config">
-    <el-form ref="metricschartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
+    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
       <div v-if="chartConfig.elements">
-          <el-row
-          :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+        <el-form-item
+          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
         >
           <div class="chart-title chart-title-config">
             <span class="endpoint-title-content">
@@ -57,7 +59,7 @@
               </el-row>
             </el-row>
           </transition>
-        </el-row>
+        </el-form-item>
       </div>
 
 <!--title-->
@@ -83,7 +85,7 @@
         </el-form-item>
 
         <!-- unit -->
-        <el-form-item v-show="chartConfig.type !='text' && chartConfig.type !=='url'&& chartConfig.type !=='group'&& chartConfig.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+        <el-form-item v-show="!isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
           <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
                        placeholder=""
                        popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
@@ -94,6 +96,17 @@
           </el-cascader>
         </el-form-item>
 
+        <!-- index -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="unit">
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
         <!--width-->
         <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
           <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
@@ -236,7 +249,7 @@
                   <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
                   <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
                 </el-row>
-                <el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
@@ -254,7 +267,60 @@
 
 <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
-
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+          <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
       </div>
     </el-form>
   </div>
@@ -265,6 +331,8 @@ import promqlInput from '@/components/page/dashboard/explore/promqlInput'
 import nezhaColor from '@/components/common/nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
   name: 'metricsChartConfig',
   props: {
@@ -272,9 +340,10 @@ export default {
   },
   components: {
     promqlInput,
-    nezhaColor
+    nezhaColor,
+    VueTagsInput
   },
-  mixins: [promqlInputMixin, publicConfig],
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
   computed: {},
   data () {
     return {
@@ -372,7 +441,9 @@ export default {
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
-            column: []
+            columns: [],
+            tags: [],
+            indexs: ''
           }
           break
       }
@@ -410,81 +481,6 @@ export default {
       this.chartConfig.param.thresholds.splice(index, 1)
       this.change()
     },
-    isStackShow (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return true
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isStatisticsShow (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return false
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isShowLegend (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return true
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isShowValueMapping (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'table':
-          return false
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isTable (type) {
-      switch (type) {
-        case 'table':
-          return true
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    }
   },
   created () {
     this.init()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 1d908c8b3..3c16fc54c 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -141,7 +141,8 @@ export default {
       this.expressions.push(this.expressions[index])
       this.legends.push(this.legends[index])
       this.promqlKeys.push(getUUID())
-      this.expressionName(this.transformNumToLetter(0))
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
       this.elementIds.push('')
       this.expressionsShow.push(true)
       this.promqlCount++
@@ -210,6 +211,7 @@ export default {
       this.change()
     },
     colorChange (val, key, index) {
+      console.log(val, key, index)
       if (key === 'thresholds') {
         this.chartConfig.param.thresholds[index].color = val
       }
@@ -228,6 +230,29 @@ export default {
       this.$nextTick(() => {
         this.$emit('change', this.chartConfig)
       })
-    }
+    },
+    addColumns () {
+      this.chartConfig.param.columns.push({
+        title: '',
+        show: true,
+        unit: 2,
+        display: ''
+      })
+      this.change()
+    },
+    copyColumns (index) {
+      this.chartConfig.param.columns.push({ ...this.chartConfig.param.columns[index] })
+      this.change()
+    },
+    removeColumns (index) {
+      this.chartConfig.param.columns.splice(index, 1)
+      this.change()
+    },
+    showColumns (index) {
+      this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
+    },
+    tagsChange (newTags) {
+      // this.chartConfig.param.indexs = newTags.map(item => item.text)
+    },
   }
 }

From 758eb6cea877d6a8b09610c8be9d863dc19e1ab8 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 2 Dec 2021 13:59:38 +0800
Subject: [PATCH 3/8] =?UTF-8?q?style:=20=E9=A2=9C=E8=89=B2=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 19 +++++++++++++--
 .../page/monitor/project/project.scss         | 23 ++++++++-----------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index eefa8cd62..0d44c5092 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -186,14 +186,14 @@ td .nz-icon-gear:before{
   box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color !important;
 }
 .el-input__count-inner {
-  background-color: $--input-background-color !important;
+  background-color: $--background-color-empty !important;
 }
 .el-textarea {
   .el-textarea__inner {
     background-color: $--background-color-empty !important;
   }
   .el-input__count {
-    background-color: $--input-background-color !important;
+    background-color: $--background-color-empty !important;
   }
 }
 
@@ -219,6 +219,7 @@ td .nz-icon-gear:before{
 }
 .el-message-box {
   background-color: $--background-color-empty !important;
+  border: 1px solid $--border-color-light;
   .el-button:nth-of-type(1) {
     background-color: $--button-light-hover-background-color;
     border: 1px solid $--button-light-border-color;
@@ -327,3 +328,17 @@ td .nz-icon-gear:before{
   background-color: $--background-color-empty;
   border-color: $--border-color-light;
 }
+/* 颜色选择器 */
+.vc-sketch {
+  background-color: $--background-color-empty;
+  border: 1px solid $--border-color-light;
+  margin-top: 6px;
+  .vc-input__input {
+    background-color: $--project-input-background-color;
+    color: $--color-text-regular;
+    box-shadow: inset 0 0 0 1px $--border-color-light;
+  }
+  .vc-sketch-presets {
+    border-top: none;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 7270705eb..44e5b9fa2 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -77,19 +77,6 @@
     height: 36px;
     color: $--color-text-primary;
   }
-  .vc-sketch {
-    background-color: $--background-color-empty;
-    border: 1px solid $--border-color-light;
-    margin-top: 6px;
-    .vc-input__input {
-      background-color: $--project-input-background-color;
-      color: $--color-text-regular;
-      box-shadow: inset 0 0 0 1px $--border-color-light;
-    }
-    .vc-sketch-presets {
-      border-top: none;
-    }
-  }
 }
 .project-calendar .el-input__inner {
   height: 24px;
@@ -131,3 +118,13 @@
   background-color: $--background-color-empty;
   border: 1px solid $--border-color-light;
 }
+.el-collapse {
+  border-bottom: 1px solid $--border-color-light;
+  border-top: 1px solid $--border-color-light;
+}
+.el-collapse-item__header:nth-of-type(1) {
+  border-bottom: none;
+}
+.el-collapse-item__header {
+  border-bottom: 1px solid $--border-color-light;
+}

From 3f010f5da075f580015e621950a7bb071425db3c Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Dec 2021 14:09:49 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat=EF=BC=9A=20=E4=BF=AE=E6=94=B9=20log-ch?=
 =?UTF-8?q?art-box=20=20=E5=92=8Cmetrics-chart-box=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=90=8C=E4=B8=80=E4=B8=AArightbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |  13 +
 .../{logsChartConfig.vue => chartConfig.vue}  | 390 +++++++++++++++---
 .../common/rightBox/chart/chartRightBox.vue   |  29 +-
 .../rightBox/chart/metricsChartConfig.vue     |  57 ++-
 .../common/rightBox/chart/publicConfig.js     |  86 +++-
 .../src/components/page/dashboard/panel.vue   |   2 +-
 6 files changed, 491 insertions(+), 86 deletions(-)
 rename nezha-fronted/src/components/common/rightBox/chart/{logsChartConfig.vue => chartConfig.vue} (56%)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index d10c6b6c1..19928980b 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -7,6 +7,13 @@
     font-size: 14px;
     .el-form {
       padding-top: 0px;
+      .thresholds-from-item{
+        margin-bottom: 0;
+        flex: 1;
+      }
+      .el-form-item__error {
+        padding-top: 0;
+      }
     }
     .chart-title-config {
       border: 1px solid $--border-color-light;
@@ -46,6 +53,12 @@
       margin-bottom: 10px;
       align-items: center;
       justify-items: center;
+      .el-form-item__content{
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        width: 100%;
+      }
       .el-input-number--small{
         display: inline-block;
         flex: 1;
diff --git a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
similarity index 56%
rename from nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
rename to nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 30e0f2d6f..a5738eccb 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="chart-config">
-    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
-      <div v-if="chartConfig.elements">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <div
+        v-if="chartConfig.elements"
+      >
         <el-form-item
-          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :key="index"
+          class="element-item form-row-item thresholds-from-item"
+          style=""
+          v-for="index of chartConfig.elements.length"
           :prop="'elements.' + (index -1) + '.expression'"
           :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
         >
@@ -68,7 +79,11 @@
       </div>
       <div class="form-items--half-width-group">
         <!-- type -->
-        <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
+        >
           <el-select
             id="chart-box-type"
             v-model="chartConfig.type"
@@ -78,15 +93,30 @@
             size="small"
             value-key="chartType"
             @change="chartTypeChange">
-            <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && chartConfig.isGroup" :label="item.name" :value="item.id">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="
+               item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
               <span class="panel-dropdown-label-txt" >{{item.name}}</span>
             </el-option>
           </el-select>
         </el-form-item>
 
         <!-- unit -->
-        <el-form-item v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
-          <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+        <el-form-item
+          v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.unit')"
+          class="form-item--half-width"
+          prop="unit"
+        >
+          <el-cascader id="chart-box-unit"
+                       v-model="chartConfig.unit"
+                       :options="unitOptions"
+                       :props="{ expandTrigger: 'hover',emitPath:false }"
+                       :show-all-levels="false" filterable
                        placeholder=""
                        popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
                        size="small"
@@ -97,7 +127,12 @@
         </el-form-item>
 
         <!-- index -->
-        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.index">
+        <el-form-item
+          v-show="isTable(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.tableIndex')"
+          class="form-item--half-width"
+          prop="param.index"
+        >
           <vue-tags-input
             v-model="chartConfig.param.indexs"
             :maxlength="32"
@@ -108,32 +143,87 @@
         </el-form-item>
 
         <!-- limit -->
-        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.limit">
-          <el-input-number size="small" placeholder="" v-model="chartConfig.param.limit" :controls="false" @change="change"/>
+        <el-form-item
+          v-show="isLog(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.limit')"
+          class="form-item--half-width"
+          prop="param.limit">
+          <el-input-number
+            size="small"
+            placeholder=""
+            v-model="chartConfig.param.limit"
+            :controls="false"
+            @change="change"/>
         </el-form-item>
 
         <!--width-->
-        <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
-          <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
-            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.width')"
+          class="form-item--half-width"
+          prop="span">
+          <el-select
+            id="chart-box-span"
+            v-model="chartConfig.span"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item">
               <span class="panel-dropdown-label-txt" > span-{{item}}</span>
             </el-option>
           </el-select>
         </el-form-item>
 
         <!--height-->
-        <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.high')"
+          class="form-item--half-width"
+          prop="height">
           <!-- 由px改为span -->
-          <el-select id="chart-box-height"  v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
-            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.height"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item"
+            >
               <span class="panel-dropdown-label-txt" > span-{{item}}</span>
             </el-option>
           </el-select>
         </el-form-item>
 
         <!--stack-->
-        <el-form-item :label="$t('dashboard.panel.chartForm.stack')" class="form-item--half-width"  prop="param.stack" v-if="isStackShow(chartConfig.type)">
-          <el-select id="chart-box-height" v-model="chartConfig.param.stack" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.stack')"
+          class="form-item--half-width"
+          prop="param.stack"
+          v-if="isStackShow(chartConfig.type)"
+        >
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.param.stack"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
             <el-option :value="1" label="true">
             </el-option>
             <el-option :value="0" label="false">
@@ -142,8 +232,20 @@
         </el-form-item>
 
         <!--statistics-->
-        <el-form-item v-if="isStatisticsShow(chartConfig.type)" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
-          <el-select id="chart-box-statistics" v-model="chartConfig.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+        <el-form-item
+          v-if="isStatisticsShow(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.statistics')"
+          class="form-item--half-width"
+          prop="param.statistics"
+        >
+          <el-select
+            id="chart-box-statistics"
+            v-model="chartConfig.param.statistics"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            @change="change, $forceUpdate()"
+          >
             <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
               <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
             </el-option>
@@ -151,9 +253,26 @@
         </el-form-item>
 
         <!--   nullType     -->
-        <el-form-item  :label='"Null value"' class="form-item--half-width"  prop="param.nullType" v-if="!isLog(chartConfig.type)">
-          <el-select id="chart-box-nullType" v-model="chartConfig.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()" >
-            <el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+        <el-form-item
+          :label='"Null value"'
+          class="form-item--half-width"
+          prop="param.nullType"
+          v-if="!isLog(chartConfig.type)"
+        >
+          <el-select
+            id="chart-box-nullType"
+            v-model="chartConfig.param.nullType"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            @change="change, $forceUpdate()"
+          >
+            <el-option
+              v-for="item in nullTypeList"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
       </div>
@@ -165,15 +284,52 @@
           <el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
         </div>
         <transition name="el-zoom-in-top">
-          <div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
-            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
-              <el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
-                <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          <div
+            v-if="chartConfig.param.legend.show"
+            class="form-items--half-width-group"
+          >
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.legendPosition')"
+              class="form-item--half-width"
+              prop="param.legend.placement"
+            >
+              <el-select
+                id="chart-box-legend-show"
+                v-model="chartConfig.param.legend.placement"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change, $forceUpdate()"
+              >
+                <el-option
+                  v-for="item in legendPositionList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                ></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="param.legend.values">
-              <el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
-                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.legendValues')"
+              class="form-item--half-width"
+              prop="param.legend.values"
+            >
+              <el-select
+                id="chart-box-legend-value"
+                v-model="chartConfig.param.legend.values"
+                multiple
+                collapse-tags
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change, $forceUpdate()"
+              >
+                <el-option
+                  v-for="item in statisticsList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
@@ -183,18 +339,42 @@
         <!--thresholdConfig-->
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
-          <el-switch v-model="chartConfig.param.thresholdShow" size="small" @change="thresholdShowChange"></el-switch>
+          <el-switch
+            v-model="chartConfig.param.thresholdShow"
+            size="small"
+            @change="thresholdShowChange"
+          ></el-switch>
         </div>
         <transition name="el-zoom-in-top">
           <el-row v-if="chartConfig.param.thresholdShow">
-            <div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
-              <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
-                          @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
-              <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
-              <span @click="delThresholds(index)" class="del-thresholds-icon">
+            <el-form-item
+              v-for="(item,index) in chartConfig.param.thresholds"
+              :key="index"
+              class="thresholds-item"
+              :prop="'param.thresholds.' + index + '.value'"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <nezhaColor
+                :value-arr="[{name:'thresholds',value:item.color}]"
+                :show-text="false"
+                :color-val="item.color"
+                @colorChange="(color,key)=>{colorChange(color,key,index)}"
+              />
+              <el-input-number
+                size="small"
+                placeholder=""
+                v-model="item.value"
+                :controls="false"
+                @blur="sortThresholds"
+                @change="change"
+              />
+              <span
+                @click="delThresholds(index)"
+                class="del-thresholds-icon"
+              >
               <i class="nz-icon nz-icon-delete" />
             </span>
-            </div>
+            </el-form-item>
             <div @click="addThresholds" class="thresholds-add">
               Add thresholds
             </div>
@@ -205,11 +385,18 @@
       <div v-if="isShowValueMapping(chartConfig.type)">
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
-          <el-switch v-model="chartConfig.param.valueMapping.show" size="small" @change="change"></el-switch>
+          <el-switch
+            v-model="chartConfig.param.valueMapping.show"
+            size="small"
+            @change="change"
+          ></el-switch>
         </div>
         <transition name="el-zoom-in-top">
           <el-row v-if="chartConfig.param.valueMapping.show">
-            <div v-for="(item,index) in chartConfig.param.valueMapping.mapping" :key="index">
+            <div
+              v-for="(item,index) in chartConfig.param.valueMapping.mapping"
+              :key="index"
+            >
               <div class="chart-title chart-title-config">
                 <span class="endpoint-title-content">
                   <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
@@ -243,22 +430,84 @@
                 </span>
               </div>
               <transition-group appear tag="div" name="el-zoom-in-top">
-                <el-row v-show="item.show" :key="1" class="thresholds-item">
+                <el-row
+                  v-show="item.show"
+                  :key="1"
+                  class="thresholds-item"
+                >
                   <div>
-                    <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
-                      <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
+                    <el-select
+                      v-model="item.type"
+                      size="small"
+                      style="width: 100px"
+                      @change="(val)=>{mappingItemChange(index,val)}"
+                    >
+                      <el-option
+                        v-for="item in mappingTypeList"
+                        :value="item.value"
+                        :label="item.label"
+                        :key="item.value"/>
                     </el-select>
                   </div>
-                  <el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
-                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
-                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
-                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                  <el-form-item
+                    v-if="item.type === 'value'"
+                    :prop="'param.valueMapping.mapping.' + index + 'value'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.value"
+                      placeholder="value"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + 'from'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.from"
+                      placeholder="from"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + 'to'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.to"
+                      placeholder="to"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'regx'"
+                    :prop="'param.valueMapping.mapping.' + index + 'regx'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input
+                      size="small"
+                      v-model="item.regx"
+                      placeholder="regx"
+                    ></el-input>
+                  </el-form-item>
                 </el-row>
                 <el-row v-show="item.show" :key="2" class="thresholds-item">
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
-                  <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  </el-form-item>
                   <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
                 </el-row>
               </transition-group>
@@ -302,7 +551,9 @@
               <div>
                 <div class='mapping-display'>Title</div>
               </div>
-              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>
               </div>
@@ -319,7 +570,9 @@
               <div>
                 <div class='mapping-display'>Display</div>
               </div>
-              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              <el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              </el-form-item>
             </el-row>
           </transition-group>
         </div>
@@ -339,20 +592,36 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import VueTagsInput from '@johmun/vue-tags-input'
 export default {
-  name: 'metricsChartConfig',
-  props: {
-    params: {}
-  },
+  name: 'chartConfig',
   components: {
     promqlInput,
     nezhaColor,
     VueTagsInput
   },
+  props: {
+    params: {},
+    type: {
+      type: String,
+      default: 'metrics'
+    }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler (n) {
+        this.beforeInit()
+      }
+    }
+  },
   mixins: [promqlInputMixin, publicConfig, chartTypeShow],
   computed: {},
   data () {
     return {
-      rules: {},
+      rules: {
+        'param.limit': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
       promqlType: 'log',
       chartTypeList: [
         {
@@ -400,6 +669,10 @@ export default {
     }
   },
   methods: {
+    beforeInit () {
+      this.promqlType = this.type
+      this.chartTypeList = this[this.type + 'ChartTypeList']
+    },
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
       // 重置相关属性
@@ -430,7 +703,7 @@ export default {
             thresholds: []
           }
           this.$nextTick(() => {
-            this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
+            this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
           })
           break
         case 'singleStat':
@@ -455,6 +728,11 @@ export default {
             indexs: ''
           }
           break
+        case 'log':
+          this.chartConfig.param = {
+            limit: 100
+          }
+          break
       }
       this.change()
     },
@@ -478,7 +756,7 @@ export default {
     },
     addThresholds () {
       this.chartConfig.param.thresholds.push({
-        value: '',
+        value: undefined,
         color: '#eeeeeeff'
       })
       this.change()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 2103fcdea..90be05677 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -59,10 +59,10 @@
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
           <el-tab-pane label="Metrics" name="1">
-            <metrics-chart-config ref="childrenFrom1" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
+            <chart-config  ref="childrenFrom1" :type="'metrics'" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="Logs" name="2">
-            <logs-chart-config ref="childrenFrom2" v-if="editChart.datasource == 2" :params.sync="editChart"/>
+            <chart-config ref="childrenFrom2" :type="'log'" v-if="editChart.datasource == 2" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="System" name="3">
             <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
@@ -102,8 +102,7 @@ import richTextEditor from '@/components/charts/richTextEditor'
 import selectPanel from '@/components/common/popBox/selectPanel'
 import nezhaColor from '@/components/common/nezhaColor'
 import diagram from '@/components/common/ChartDiagram/diagram'
-import metricsChartConfig from '@/components/common/rightBox/chart/metricsChartConfig'
-import logsChartConfig from '@/components/common/rightBox/chart/logsChartConfig'
+import chartConfig from '@/components/common/rightBox/chart/chartConfig'
 import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
 import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
 const rz = {
@@ -136,8 +135,7 @@ export default {
     selectPanel,
     nezhaColor,
     diagram,
-    metricsChartConfig,
-    logsChartConfig,
+    chartConfig,
     systemChartConfig,
     otherChartConfig
   },
@@ -173,7 +171,6 @@ export default {
     },
     // 保存endpoint
     save () {
-      console.log(123132213)
       const arr = [this.$refs.chartForm.validate()]
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
@@ -243,8 +240,7 @@ export default {
         }
       })
     },
-    datasourceChange (val, e) {
-      console.log(val, e, this.editChart.datasource)
+    datasourceChange () {
       if (this.editChart.datasource == 1) {
         this.editChart = {
           ...this.editChart,
@@ -258,7 +254,20 @@ export default {
             nullType: 'null',
             legend: { placement: 'bottom', values: [], show: true },
             thresholdShow: true,
-            thresholds: [{ value: '', color: '#eeeeeeff' }]
+            thresholds: [{ value: undefined, color: '#eeeeeeff' }]
+          }
+        }
+      }
+      if (this.editChart.datasource == 2) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'log',
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+          param: {
+            limit: 100
           }
         }
       }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
index f8cd59f5f..4e01efdee 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -3,7 +3,7 @@
     <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
       <div v-if="chartConfig.elements">
         <el-form-item
-          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :key="index" class="element-item form-row-item thresholds-from-item" style="" v-for="index of chartConfig.elements.length"
           :prop="'elements.' + (index -1) + '.expression'"
           :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
         >
@@ -161,12 +161,12 @@
         </div>
         <transition name="el-zoom-in-top">
           <div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
-            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="nullType">
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
               <el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
                 <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="nullType">
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="param.legend.values">
               <el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
                 <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
                 </el-option>
@@ -182,14 +182,20 @@
         </div>
         <transition name="el-zoom-in-top">
           <el-row v-if="chartConfig.param.thresholdShow">
-            <div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
+            <el-form-item
+              v-for="(item,index) in chartConfig.param.thresholds"
+              :key="index"
+              class="thresholds-item"
+              :prop="'param.thresholds.' + index + '.value'"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
               <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
                           @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
               <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
               <span @click="delThresholds(index)" class="del-thresholds-icon">
               <i class="nz-icon nz-icon-delete" />
             </span>
-            </div>
+            </el-form-item>
             <div @click="addThresholds" class="thresholds-add">
               Add thresholds
             </div>
@@ -238,22 +244,36 @@
                 </span>
               </div>
               <transition-group appear tag="div" name="el-zoom-in-top">
-                <el-row v-show="item.show" :key="1" class="thresholds-item">
+                <el-row
+                  v-show="item.show"
+                  :key="1"
+                  class="thresholds-item"
+                >
                   <div>
                     <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
                       <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
                     </el-select>
                   </div>
-                  <el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
-                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
-                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
-                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                  <el-form-item v-if="item.type === 'value'" :prop="'param.valueMapping.mapping.' + index + 'value'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input-number :controls="false" size="small" v-model="item.value" placeholder="value"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'from'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input-number :controls="false"  size="small" v-model="item.from" placeholder="from"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'to'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input-number :controls="false"  size="small" v-model="item.to" placeholder="to"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'regx'" :prop="'param.valueMapping.mapping.' + index + 'regx'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input size="small" v-model="item.regx" placeholder="regx"></el-input>
+                  </el-form-item>
                 </el-row>
                 <el-row v-show="item.show" :key="2" class="thresholds-item">
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
-                  <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  </el-form-item>
                   <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
                 </el-row>
               </transition-group>
@@ -297,7 +317,9 @@
               <div>
                 <div class='mapping-display'>Title</div>
               </div>
-              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>
               </div>
@@ -305,7 +327,6 @@
                            placeholder=""
                            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
                            size="small"
-                           style="width: 100%"
                            @change="unitSelected"
               >
               </el-cascader>
@@ -314,7 +335,9 @@
               <div>
                 <div class='mapping-display'>Display</div>
               </div>
-              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              <el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              </el-form-item>
             </el-row>
           </transition-group>
         </div>
@@ -421,7 +444,7 @@ export default {
             thresholds: []
           }
           this.$nextTick(() => {
-            this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
+            this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
           })
           break
         case 'singleStat':
@@ -469,7 +492,7 @@ export default {
     },
     addThresholds () {
       this.chartConfig.param.thresholds.push({
-        value: '',
+        value: undefined,
         color: '#eeeeeeff'
       })
       this.change()
@@ -480,7 +503,7 @@ export default {
       }
       this.chartConfig.param.thresholds.splice(index, 1)
       this.change()
-    },
+    }
   },
   created () {
     this.init()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 3c16fc54c..391407884 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -61,6 +61,88 @@ export default {
         'H', 'I', 'J', 'K', 'L', 'M', 'N',
         'O', 'P', 'Q', 'R', 'S', 'T',
         'U', 'V', 'W', 'X', 'Y', 'Z'
+      ],
+      metricsChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
+      ],
+      logChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
       ]
     }
   },
@@ -216,7 +298,7 @@ export default {
         this.chartConfig.param.thresholds[index].color = val
       }
       if (key === 'bac') {
-        console.log(this.chartConfig.param.valueMapping.mapping,this.chartConfig.param.valueMapping.mapping[0],this.chartConfig.param.valueMapping.mapping[index])
+        console.log(this.chartConfig.param.valueMapping.mapping, this.chartConfig.param.valueMapping.mapping[0], this.chartConfig.param.valueMapping.mapping[index])
         this.chartConfig.param.valueMapping.mapping[index].color.bac = val
         this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
       }
@@ -253,6 +335,6 @@ export default {
     },
     tagsChange (newTags) {
       // this.chartConfig.param.indexs = newTags.map(item => item.text)
-    },
+    }
   }
 }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a455b77a4..448db2356 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -200,7 +200,7 @@ export default {
           nullType: 'null',
           legend: { placement: 'bottom', values: [], show: true },
           thresholdShow: true,
-          thresholds: [{ value: '', color: '#eeeeeeff' }]
+          thresholds: [{ value: undefined, color: '#eeeeeeff' }]
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
         panel: '',

From 8cca94f74f4e85c1cd8346e6f43b11c2b2072929 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Dec 2021 14:56:14 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85chartBox=20other?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |   3 +
 .../common/rightBox/chart/chartConfig.vue     |   2 +-
 .../common/rightBox/chart/chartRightBox.vue   |  12 ++
 .../common/rightBox/chart/chartTypeShow.js    |  28 +++
 .../rightBox/chart/otherChartConfig.vue       | 190 +++++++++++++++++-
 .../common/rightBox/chart/publicConfig.js     |   3 +
 6 files changed, 234 insertions(+), 4 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 19928980b..977bb863a 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -14,6 +14,9 @@
       .el-form-item__error {
         padding-top: 0;
       }
+      .el-input-number--small {
+        width: 100%;
+      }
     }
     .chart-title-config {
       border: 1px solid $--border-color-light;
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index a5738eccb..9d120da90 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -362,6 +362,7 @@
               />
               <el-input-number
                 size="small"
+                style="margin-top: 3px"
                 placeholder=""
                 v-model="item.value"
                 :controls="false"
@@ -599,7 +600,6 @@ export default {
     VueTagsInput
   },
   props: {
-    params: {},
     type: {
       type: String,
       default: 'metrics'
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 90be05677..b7f9d1472 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -271,6 +271,18 @@ export default {
           }
         }
       }
+      console.log(this.editChart.datasource)
+      if (this.editChart.datasource == 4) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          type: 'url',
+          param: {
+            url: ''
+          }
+        }
+      }
     },
     editChartChange (newEditChart) {
       this.editChart = JSON.parse(JSON.stringify(newEditChart))
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
index 3086ee0ac..138c18788 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -90,6 +90,34 @@ export default {
           return false
         default: return false
       }
+    },
+    isUrl (type) {
+      switch (type) {
+        case 'url':
+          return true
+        default: return false
+      }
+    },
+    isDiagram (type) {
+      switch (type) {
+        case 'diagram':
+          return true
+        default: return false
+      }
+    },
+    isText (type) {
+      switch (type) {
+        case 'text':
+          return true
+        default: return false
+      }
+    },
+    isGroup (type) {
+      switch (type) {
+        case 'group':
+          return true
+        default: return false
+      }
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 6e31823f1..df7092dfc 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -1,12 +1,196 @@
 <template>
-  <div>
-    other
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
+        >
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="form-items--half-width-group">
+        <!--width-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.width')"
+          class="form-item--half-width"
+          prop="span">
+          <el-select
+            id="chart-box-span"
+            v-model="chartConfig.span"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--height-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.high')"
+          class="form-item--half-width"
+          prop="height">
+          <!-- 由px改为span -->
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.height"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item"
+            >
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <!--content-->
+      <div v-if="!isGroup(chartConfig.type)" class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.content')}}</span>
+        <span style="cursor: pointer" v-if="isDiagram(chartConfig.type)"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
+      </div>
+      <!--url-->
+      <el-form-item v-if="isUrl(chartConfig.type)" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
+        <el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
+      </el-form-item>
+      <!--topoData-->
+      <el-form-item v-if="isDiagram(chartConfig.type)" >
+        <div class="topology-box">
+          <div class="topology-mc"></div>
+          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
+        </div>
+      </el-form-item>
+      <!--topplogy-->
+      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
+      <!--text-->
+      <rich-text-editor v-if="isText(chartConfig.type)" ref="richTextEditor" :edit-data="chartConfig.param.text"></rich-text-editor>
+    </el-form>
   </div>
 </template>
 
 <script>
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import diagram from '@/components/common/ChartDiagram/diagram'
+import richTextEditor from '@/components/charts/richTextEditor'
 export default {
-  name: 'otherChartConfig'
+  name: 'otherChartConfig',
+  mixins: [publicConfig, chartTypeShow],
+  components: {
+    diagram,
+    richTextEditor
+  },
+  data () {
+    return {
+      rules: {
+        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
+      },
+      topologyDialog: false,
+      chartTypeList: [
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'diagram',
+          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'group':
+          this.chartConfig.param = {}
+          break
+        case 'text':
+          this.chartConfig.param = {
+            text: ''
+          }
+          break
+        case 'diagram':
+          this.chartConfig.param = {
+            topo: ''
+          }
+          break
+        case 'url':
+          this.chartConfig.param = {
+            url: ''
+          }
+          break
+      }
+      this.change()
+    },
+    topologyDialogChange (flag, data) {
+      this.topologyDialog = flag
+      if (data) {
+        this.chartConfig.param.topo = data
+        this.change()
+      }
+    }
+  },
+  created () {
+    this.init()
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 391407884..f652d1792 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -8,6 +8,9 @@ const rz = {
   }
 }
 export default {
+  props: {
+    params: {}
+  },
   data () {
     return {
       language: localStorage.getItem('nz-language'),

From 0ce1797524defb3f5ee42679ed4eb725148cb789 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Dec 2021 15:36:01 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat=EF=BC=9A=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/chart/chartRightBox.vue   |  49 ++-
 .../rightBox/chart/otherChartConfig.vue       |  14 +-
 .../rightBox/chart/systemChartConfig.vue      | 181 ++++++++++-
 .../common/rightBox/chart/systemConfigJson.js | 295 ++++++++++++++++++
 4 files changed, 504 insertions(+), 35 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js

diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index b7f9d1472..c37bf16e9 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -174,38 +174,28 @@ export default {
       const arr = [this.$refs.chartForm.validate()]
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
-        console.log(res)
+        if (this.editChart.id) { // 修改
+          this.$put('visual/panel/chart', this.editChart).then(response => {
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else { // 新增
+          this.$post('visual/panel/chart', this.editChart).then(response => {
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        }
       }).catch(res => {
         console.log(res)
       })
-
-      // this.$refs.chartForm.validate((valid) => {
-      //   if (valid) {
-      //     if (this.editChart.id) { // 修改
-      //       this.editChart.param.collapse = this.chartSwitch
-      //       this.$put('visual/panel/chart', this.editChart).then(response => {
-      //         if (response.code === 200) {
-      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-      //           this.esc(true)
-      //         } else {
-      //           this.$message.error(response.msg)
-      //         }
-      //       })
-      //     } else { // 新增
-      //       this.$post('visual/panel/chart', this.editChart).then(response => {
-      //         if (response.code === 200) {
-      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-      //           this.esc(true)
-      //         } else {
-      //           this.$message.error(response.msg)
-      //         }
-      //       })
-      //     }
-      //   } else {
-      //     console.error('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     selectPanel (panel) {
       this.panelName = panel.name
@@ -271,7 +261,6 @@ export default {
           }
         }
       }
-      console.log(this.editChart.datasource)
       if (this.editChart.datasource == 4) {
         this.editChart = {
           ...this.editChart,
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index df7092dfc..105b849b1 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -37,6 +37,14 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <!--Default collapse-->
+        <el-form-item class="form-item--half-width" v-if="isGroup(chartConfig.type)" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
+          <el-switch id="chart-box-collapse"
+                     v-model="chartConfig.param.collapse"
+                     :active-value="true"
+                     :inactive-value="false"
+                     size="small"/>
+        </el-form-item>
       </div>
       <div class="form-items--half-width-group">
         <!--width-->
@@ -160,7 +168,11 @@ export default {
     chartTypeChange (type) {
       switch (type) {
         case 'group':
-          this.chartConfig.param = {}
+          this.chartConfig.height = ''
+          this.chartConfig.span = 12
+          this.chartConfig.param = {
+            collapse: false
+          }
           break
         case 'text':
           this.chartConfig.param = {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index a95c7954d..90e6c285d 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -1,12 +1,185 @@
 <template>
-  <div>
-    system
-  </div>
+  <el-form
+    ref="chartForm"
+    :model="chartConfig"
+    :rules="rules"
+    label-position= "top"
+    label-width="120px"
+  >
+    content
+    <!--title-->
+    <div class="form__sub-title">
+      <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+    </div>
+    <div class="form-items--half-width-group">
+      <!-- type -->
+      <el-form-item
+        :label="$t('dashboard.panel.chartForm.type')"
+        class="form-item--half-width"
+        prop="type"
+      >
+        <el-select
+          id="chart-box-type"
+          v-model="chartConfig.type"
+          :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+          placeholder=""
+          popper-class="right-box-select-top prevent-clickoutside"
+          size="small"
+          value-key="chartType"
+          @change="chartTypeChange">
+          <el-option
+            v-for="item in chartTypeList"
+            :key="item.id"
+            :disabled="item.id==='group' && chartConfig.isGroup"
+            :label="item.name"
+            :value="item.id">
+            <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!--refer-->
+      <el-form-item
+        :label="$t('dashboard.panel.chartForm.refer')"
+        class="form-item--half-width"
+        prop="param.stack"
+      >
+        <el-select
+          id="chart-box-height"
+          v-model="chartConfig.param.refer"
+          placeholder=""
+          popper-class="right-box-select-top prevent-clickoutside"
+          size="small"
+          value-key="chartSpan"
+          @change="change"
+        >
+          <el-option :value="1" label="true">
+          </el-option>
+          <el-option :value="0" label="false">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </div>
+    <div class="form-items--half-width-group">
+      <!--width-->
+      <el-form-item
+        :label="$t('dashboard.panel.chartForm.width')"
+        class="form-item--half-width"
+        prop="span">
+        <el-select
+          id="chart-box-span"
+          v-model="chartConfig.span"
+          :disabled="chartConfig.type === 'group'"
+          placeholder=""
+          popper-class="right-box-select-top prevent-clickoutside"
+          size="small"
+          value-key="chartSpan"
+          @change="change"
+        >
+          <el-option
+            v-for="item in spanList"
+            :key="item"
+            :label="'span-' + item"
+            :value="item">
+            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!--height-->
+      <el-form-item
+        :label="$t('dashboard.panel.chartForm.high')"
+        class="form-item--half-width"
+        prop="height">
+        <!-- 由px改为span -->
+        <el-select
+          id="chart-box-height"
+          v-model="chartConfig.height"
+          :disabled="chartConfig.type === 'group'"
+          placeholder=""
+          popper-class="right-box-select-top prevent-clickoutside"
+          size="small"
+          value-key="chartSpan"
+          @change="change"
+        >
+          <el-option
+            v-for="item in spanList"
+            :key="item"
+            :label="'span-' + item"
+            :value="item"
+          >
+            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </div>
+  </el-form>
 </template>
 
 <script>
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import mockData from './systemConfigJson'
 export default {
-  name: 'systemChartConfig'
+  name: 'systemChartConfig',
+  mixins: [publicConfig, chartTypeShow],
+  data () {
+    return {
+      mockData,
+      rules: {
+        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
+      },
+      chartTypeList: [
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'diagram',
+          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'group':
+          this.chartConfig.height = ''
+          this.chartConfig.span = 12
+          this.chartConfig.param = {
+            collapse: false
+          }
+          break
+        case 'text':
+          this.chartConfig.param = {
+            text: ''
+          }
+          break
+        case 'diagram':
+          this.chartConfig.param = {
+            topo: ''
+          }
+          break
+        case 'url':
+          this.chartConfig.param = {
+            url: ''
+          }
+          break
+      }
+      this.change()
+    },
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js b/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js
new file mode 100644
index 000000000..dadbbc8b6
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js
@@ -0,0 +1,295 @@
+const data = [{
+  name: 'asset',
+  datasql: 'SELECT t.*,atc.vm,atc.vmh,atc.NAME as type,assc.NAME as state,ab.NAME as brand,am.NAME as model,dc.NAME as datacenterName,cabinet.NAME as cabinet,ap.`status` as ping FROM asset_asset t LEFT JOIN asset_type_conf atc ON t.type_id = atc.id LEFT JOIN asset_state_conf assc ON t.state_id = assc.id LEFT JOIN asset_brand ab ON t.brand_id = ab.id LEFT JOIN asset_model am ON t.model_id = am.id LEFT JOIN dc ON t.dc_id = dc.id LEFT JOIN cabinet ON t.cabinet_id = cabinet.id LEFT JOIN asset_ping ap ON t.id = ap.asset_id',
+  group: [{
+    name: 'datacenter',
+    expr: 'datacenterName',
+    type: 2
+  }, {
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'vm',
+    expr: 'vm',
+    type: 2
+  }, {
+    name: 'vmh',
+    expr: 'vmh',
+    type: 2
+  }, {
+    name: 'type',
+    expr: 'type',
+    type: 2
+  }, {
+    name: 'state',
+    expr: 'state',
+    type: 2
+  }, {
+    name: 'brand',
+    expr: 'brand',
+    type: 2
+  }, {
+    name: 'model',
+    expr: 'model',
+    type: 2
+  }, {
+    name: 'cabinet',
+    expr: 'cabinet',
+    type: 2
+  }, {
+    name: 'status',
+    expr: 'ping',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'datacenter',
+  datasql: 'select t.* from dc t',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'project',
+  datasql: 'select t.* from monitor_project t',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'module',
+  datasql: 'select t.*,mp.name as project from monitor_module t left join monitor_project mp on t.project_id = mp.id',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'project',
+    expr: 'project',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'endpoint',
+  datasql: 'select t.*,mm.name as module,mp.name as project,dc.name as datacenter,aa.name as asset,atc.vm,atc.vmh,atc.name as type,assc.name as state,ab.name as brand,am.name as model,cabinet.name as cabinet from monitor_endpoint t left join monitor_module mm on t.module_id = mm.id left join monitor_project mp on mm.project_id = mp.id left join asset_asset aa on t.asset_id = aa.id left join asset_type_conf atc on aa.type_id = atc.id left join asset_state_conf assc on aa.state_id = assc.id left join asset_brand ab on aa.brand_id = ab.id left join asset_model am on aa.model_id = am.id left join dc on aa.dc_id = dc.id left join cabinet on aa.cabinet_id = cabinet.id left join asset_ping ap on aa.id = ap.asset_id',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'module',
+    expr: 'module',
+    type: 2
+  }, {
+    name: 'project',
+    expr: 'project',
+    type: 2
+  }, {
+    name: 'datacenter',
+    expr: 'datacenter',
+    type: 2
+  }, {
+    name: 'asset',
+    expr: 'asset',
+    type: 2
+  }, {
+    name: 'vm',
+    expr: 'vm',
+    type: 2
+  }, {
+    name: 'vmh',
+    expr: 'vmh',
+    type: 2
+  }, {
+    name: 'type',
+    expr: 'type',
+    type: 2
+  }, {
+    name: 'state',
+    expr: 'state',
+    type: 2
+  }, {
+    name: 'brand',
+    expr: 'brand',
+    type: 2
+  }, {
+    name: 'model',
+    expr: 'model',
+    type: 2
+  }, {
+    name: 'cabinet',
+    expr: 'cabinet',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'alertRule',
+  datasql: 'select t.*,alsc.name as severity from alert_rule t left join alert_severity_conf alsc on t.severity_id = alsc.id',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'type',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'state',
+    expr: 'state',
+    type: 2
+  }, {
+    name: 'severity',
+    expr: 'severity',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'agent',
+  datasql: 'select t.*,dc.name as datacenter from prom_server t left join dc on t.dc_id = dc.id',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'type',
+    expr: 'type',
+    type: 2
+  }, {
+    name: 'state',
+    expr: 'status',
+    type: 2
+  }, {
+    name: 'protocol',
+    expr: 'protocol',
+    type: 2
+  }, {
+    name: 'datacenter',
+    expr: 'datacenter',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}, {
+  name: 'alertMessage',
+  datasql: 'select t.*,alsc.name as severity,ar.name as alert,ar.type as alertType,mp.name as project,mm.name as module,me.name as endpoint,aa.name as asset,atc.vm as vm ,atc.vmh as vmh ,atc.name as assetType,assc.name as assetState,ab.name as brand,am.name as model,cabinet.name as cabinet,dc.name as datacenter from alert_message_active t left join alert_rule ar on t.rule_id = ar.id left join monitor_project mp on t.project_id = mp.id left join monitor_module mm on t.module_id = mm.id left join monitor_endpoint me on t.endpoint_id = me.id left join asset_asset aa on t.asset_id = aa.id left join asset_type_conf atc on aa.type_id = atc.id left join asset_state_conf assc on aa.state_id = assc.id left join asset_brand ab on aa.brand_id = ab.id left join asset_model am on aa.model_id = am.id left join dc on t.dc_id = dc.id left join cabinet on aa.cabinet_id = cabinet.id left join asset_ping ap on t.id = ap.asset_id left join alert_severity_conf alsc on t.severity_id = alsc.id',
+  group: [{
+    name: 'name',
+    expr: 'name',
+    type: 2
+  }, {
+    name: 'severity',
+    expr: 'severity',
+    type: 2
+  }, {
+    name: 'alert',
+    expr: 'alert',
+    type: 2
+  }, {
+    name: 'alertType',
+    expr: 'alertType',
+    type: 2
+  }, {
+    name: 'project',
+    expr: 'project',
+    type: 2
+  }, {
+    name: 'module',
+    expr: 'module',
+    type: 2
+  }, {
+    name: 'endpoint',
+    expr: 'endpoint',
+    type: 2
+  }, {
+    name: 'asset',
+    expr: 'asset',
+    type: 2
+  }, {
+    name: 'vm',
+    expr: 'vm',
+    type: 2
+  }, {
+    name: 'vmh',
+    expr: 'vmh',
+    type: 2
+  }, {
+    name: 'assetType',
+    expr: 'assetType',
+    type: 2
+  }, {
+    name: 'assetState',
+    expr: 'assetState',
+    type: 2
+  }, {
+    name: 'brand',
+    expr: 'brand',
+    type: 2
+  }, {
+    name: 'model',
+    expr: 'model',
+    type: 2
+  }, {
+    name: 'cabinet',
+    expr: 'cabinet',
+    type: 2
+  }, {
+    name: 'datacenter',
+    expr: 'datacenter',
+    type: 2
+  }
+  ],
+  select: [{
+    name: 'count',
+    expr: 'count(1)',
+    type: 1
+  }
+  ]
+}
+]
+export default data

From 1dd2c108912f8f5a2357701ffcf98d0a74160908 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 2 Dec 2021 16:42:37 +0800
Subject: [PATCH 7/8] =?UTF-8?q?NEZ-1378=20fix:=20Module=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E8=BF=87=E9=95=BF=E6=97=B6=E9=BC=A0=E6=A0=87=E6=82=AC=E6=B5=AE?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=EF=BC=8C=E8=A1=A5=E5=85=85=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/administration/modelBox.vue      |  6 +--
 .../common/rightBox/batchAddEndpoint.vue      | 37 ++++++++++++-------
 .../components/common/rightBox/moduleBox.vue  |  8 ++--
 .../common/v-selectpagenew/Table.js           |  2 +-
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
index e41313ff9..5a3c2d066 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
@@ -90,9 +90,9 @@ export default {
       chartlList: [], // chart 列表数据
       ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
         { title: 'ID', data: 'id' },
-        { title: this.$t('config.model.titleName'), data: 'name' },
-        { title: this.$t('config.model.titleType'), data: 'type' },
-        { title: this.$t('overall.remark'), data: 'remark' }
+        { title: this.$t('config.model.titleName'), data: 'name', key: 'name' },
+        { title: this.$t('config.model.titleType'), data: 'type', key: 'type' },
+        { title: this.$t('overall.remark'), data: 'remark', key: 'remark' }
       ],
       url: 'asset/model',
       brandUrl: 'asset/brand',
diff --git a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
index e08d07dc6..9ca5d7a03 100644
--- a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
@@ -193,7 +193,8 @@ export default {
               return row.name.substring(0, 12) + '...'
             }
             return row.name
-          }
+          },
+          key: 'name'
         },
         {
           title: this.$t('project.project.projectName'),
@@ -203,7 +204,9 @@ export default {
             } else {
               return row.project.name
             }
-          }
+          },
+          deep: true,
+          orjinNME: 'project'
         },
         {
           title: this.$t('overall.remark'),
@@ -211,39 +214,47 @@ export default {
             if (row.remark && row.remark.length > 15) {
               return row.remark.substring(0, 12) + '...'
             }
-            return row.remark
-          }
+            return row.remark = row.remark ? row.remark : ''
+          },
+          key: 'remark'
         }
       ],
       columns: [
         { title: 'id', data: 'id' },
         {
-          title: 'name',
+          title: this.$t('config.model.titleName'),
           data: function (row) {
             if (row.name.length > 15) {
               return row.name.substring(0, 12) + '...'
             }
             return row.name
-          }
+          },
+          key: 'name'
         },
-        { title: 'Manage Ip', data: 'manageIp' },
+        { title: 'Manage Ip', data: 'manageIp', key: 'manageIp' },
         {
-          title: 'Type',
+          title: this.$t('overall.type'),
           data: (row) => {
             return row.type ? row.type.name : ''
-          }
+          },
+          deep: true,
+          orjinNME: 'type'
         },
         {
-          title: 'Model',
+          title: this.$t('overall.model'),
           data: (row) => {
             return row.model ? row.model.name : ''
-          }
+          },
+          deep: true,
+          orjinNME: 'model'
         },
         {
-          title: 'Datacenter',
+          title: this.$t('overall.dc'),
           data: (row) => {
             return row.dc ? row.dc.name : ''
-          }
+          },
+          deep: true,
+          orjinNME: 'dc'
         }
       ],
       object: {},
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 5a1c2fcd5..af96e62c2 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -606,9 +606,10 @@ export default {
               return row.name.substring(0, 12) + '...'
             }
             return row.name
-          }
+          },
+          key: 'name'
         },
-        { title: this.$t('config.model.titleType'), data: 'type' },
+        { title: this.$t('config.model.titleType'), data: 'type', key: 'type' },
         {
           title: this.$t('overall.remark'),
           data: function (row) {
@@ -616,7 +617,8 @@ export default {
               return row.remark.substring(0, 12) + '...'
             }
             return row.remark
-          }
+          },
+          key: 'remark'
         }
       ],
       showAllBasicOption: false,
diff --git a/nezha-fronted/src/components/common/v-selectpagenew/Table.js b/nezha-fronted/src/components/common/v-selectpagenew/Table.js
index 8fdb63c68..5f2d25af3 100644
--- a/nezha-fronted/src/components/common/v-selectpagenew/Table.js
+++ b/nezha-fronted/src/components/common/v-selectpagenew/Table.js
@@ -33,7 +33,7 @@ export default {
             key: idx,
             domProps: {
               innerHTML: this.renderColumn(val, col),
-              title: val[col.title]
+              title: col.deep ? val[col.orjinNME].name : val[col.key]
             }
           })
         }))

From 2410d94d70e4ebd1df6dd9c1f40463564a95ec92 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Dec 2021 18:33:28 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat=EF=BC=9A=20system-chart-config(30%)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |  27 ++
 .../common/rightBox/chart/chartRightBox.vue   |  21 +-
 .../rightBox/chart/otherChartConfig.vue       |   7 +-
 .../rightBox/chart/systemChartConfig.vue      | 305 +++++++++++-------
 .../common/rightBox/chart/systemConfigJson.js |  83 ++---
 5 files changed, 272 insertions(+), 171 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 977bb863a..015663356 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -113,5 +113,32 @@
         padding: 1px 3px;
       }
     }
+    .system-chart-config {
+      display: flex;
+      height: 150px;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .system-chart-config-left{
+      width: 40%;
+      height: 100%;
+      overflow-y: auto;
+      .system-chart-item {
+        font-size: 14px;
+        padding: 3px 5px;
+      }
+      .system-chart-item:hover{
+        color: $--color-primary;
+        background: $--background-color-base !important;
+      }
+      .system-chart-item.is-select{
+        color: $--color-text-secondary;
+      }
+    }
+    .system-chart-config-right{
+      flex: 1;
+      margin-left: 10px;
+      height: 100%;
+    }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index c37bf16e9..1d206fa5c 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -67,7 +67,7 @@
           <el-tab-pane label="System" name="3">
             <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
           </el-tab-pane>
-          <el-tab-pane label="Other" name="4">
+          <el-tab-pane label="Misc" name="4">
             <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
           </el-tab-pane>
         </el-tabs>
@@ -261,6 +261,24 @@ export default {
           }
         }
       }
+      if (this.editChart.datasource == 3) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'stat',
+          param: {
+            refer: 1,
+            system: '',
+            systemGroup: '',
+            systemSelect: '',
+            sort: 'desc',
+            limit: 100
+          }
+        }
+        delete this.editChart.elements
+      }
       if (this.editChart.datasource == 4) {
         this.editChart = {
           ...this.editChart,
@@ -271,6 +289,7 @@ export default {
             url: ''
           }
         }
+        delete this.editChart.elements
       }
     },
     editChartChange (newEditChart) {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 105b849b1..4ff8594c7 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -46,7 +46,7 @@
                      size="small"/>
         </el-form-item>
       </div>
-      <div class="form-items--half-width-group">
+      <div class="form-items--half-width-group" v-if="!isGroup(chartConfig.type)">
         <!--width-->
         <el-form-item
           :label="$t('dashboard.panel.chartForm.width')"
@@ -137,9 +137,7 @@ export default {
   },
   data () {
     return {
-      rules: {
-        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
-      },
+      rules: {},
       topologyDialog: false,
       chartTypeList: [
         {
@@ -168,7 +166,6 @@ export default {
     chartTypeChange (type) {
       switch (type) {
         case 'group':
-          this.chartConfig.height = ''
           this.chartConfig.span = 12
           this.chartConfig.param = {
             collapse: false
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 90e6c285d..f0013391a 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -1,118 +1,178 @@
 <template>
-  <el-form
-    ref="chartForm"
-    :model="chartConfig"
-    :rules="rules"
-    label-position= "top"
-    label-width="120px"
-  >
-    content
-    <!--title-->
-    <div class="form__sub-title">
-      <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
-    </div>
-    <div class="form-items--half-width-group">
-      <!-- type -->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.type')"
-        class="form-item--half-width"
-        prop="type"
-      >
-        <el-select
-          id="chart-box-type"
-          v-model="chartConfig.type"
-          :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartType"
-          @change="chartTypeChange">
-          <el-option
-            v-for="item in chartTypeList"
-            :key="item.id"
-            :disabled="item.id==='group' && chartConfig.isGroup"
-            :label="item.name"
-            :value="item.id">
-            <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <!--refer-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.refer')"
-        class="form-item--half-width"
-        prop="param.stack"
-      >
-        <el-select
-          id="chart-box-height"
-          v-model="chartConfig.param.refer"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
-        >
-          <el-option :value="1" label="true">
-          </el-option>
-          <el-option :value="0" label="false">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </div>
-    <div class="form-items--half-width-group">
-      <!--width-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.width')"
-        class="form-item--half-width"
-        prop="span">
-        <el-select
-          id="chart-box-span"
-          v-model="chartConfig.span"
-          :disabled="chartConfig.type === 'group'"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
-        >
-          <el-option
-            v-for="item in spanList"
-            :key="item"
-            :label="'span-' + item"
-            :value="item">
-            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <div class="system-chart-config">
+        <div class="system-chart-config-left">
+          <ul>
+            <li v-for="(item,index) in mockData" :key="index" class="system-chart-item" :class="''">{{item.name}}</li>
+          </ul>
+        </div>
+        <div class="system-chart-config-right">
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.group')"
+              class="form-item--half-width"
+              prop="param.systemGroup"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-select size="small">
 
-      <!--height-->
-      <el-form-item
-        :label="$t('dashboard.panel.chartForm.high')"
-        class="form-item--half-width"
-        prop="height">
-        <!-- 由px改为span -->
-        <el-select
-          id="chart-box-height"
-          v-model="chartConfig.height"
-          :disabled="chartConfig.type === 'group'"
-          placeholder=""
-          popper-class="right-box-select-top prevent-clickoutside"
-          size="small"
-          value-key="chartSpan"
-          @change="change"
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.select')"
+              class="form-item--half-width"
+              prop="param.stack"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input  size="small"/>
+            </el-form-item>
+          </div>
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.sort')"
+              class="form-item--half-width"
+              prop="param.sort"
+            >
+              <el-select
+                id="chart-box-height"
+                v-model="chartConfig.param.sort"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                value-key="chartSpan"
+                @change="change"
+              >
+                <el-option :value="'desc'" :label="$t('dashboard.explore.descending')">
+                </el-option>
+                <el-option :value="'asc'" :label="$t('dashboard.explore.ascending')">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.limit')"
+              class="form-item--half-width"
+              prop="param.limit"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input-number :controls="false" v-model="chartConfig.param.limit"  size="small"/>
+            </el-form-item>
+          </div>
+        </div>
+      </div>
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
         >
-          <el-option
-            v-for="item in spanList"
-            :key="item"
-            :label="'span-' + item"
-            :value="item"
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!--refer-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.refer')"
+          class="form-item--half-width"
+          prop="param.stack"
+        >
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.param.refer"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
           >
-            <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </div>
-  </el-form>
+            <el-option :value="1" label="true">
+            </el-option>
+            <el-option :value="0" label="false">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="form-items--half-width-group">
+        <!--width-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.width')"
+          class="form-item--half-width"
+          prop="span">
+          <el-select
+            id="chart-box-span"
+            v-model="chartConfig.span"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--height-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.high')"
+          class="form-item--half-width"
+          prop="height">
+          <!-- 由px改为span -->
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.height"
+            :disabled="chartConfig.type === 'group'"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartSpan"
+            @change="change"
+          >
+            <el-option
+              v-for="item in spanList"
+              :key="item"
+              :label="'span-' + item"
+              :value="item"
+            >
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
 </template>
 
 <script>
@@ -125,26 +185,20 @@ export default {
   data () {
     return {
       mockData,
-      rules: {
-        height: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
-      },
+      rules: {},
       chartTypeList: [
         {
-          id: 'url',
-          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
-          id: 'text',
-          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
         },
         {
-          id: 'diagram',
-          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
         },
-        {
-          id: 'group',
-          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
-        }
       ]
     }
   },
@@ -179,6 +233,9 @@ export default {
       }
       this.change()
     },
+  },
+  created () {
+    this.init()
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js b/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js
index dadbbc8b6..b699b61d5 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemConfigJson.js
@@ -1,47 +1,48 @@
 const data = [{
   name: 'asset',
   datasql: 'SELECT t.*,atc.vm,atc.vmh,atc.NAME as type,assc.NAME as state,ab.NAME as brand,am.NAME as model,dc.NAME as datacenterName,cabinet.NAME as cabinet,ap.`status` as ping FROM asset_asset t LEFT JOIN asset_type_conf atc ON t.type_id = atc.id LEFT JOIN asset_state_conf assc ON t.state_id = assc.id LEFT JOIN asset_brand ab ON t.brand_id = ab.id LEFT JOIN asset_model am ON t.model_id = am.id LEFT JOIN dc ON t.dc_id = dc.id LEFT JOIN cabinet ON t.cabinet_id = cabinet.id LEFT JOIN asset_ping ap ON t.id = ap.asset_id',
-  group: [{
-    name: 'datacenter',
-    expr: 'datacenterName',
-    type: 2
-  }, {
-    name: 'name',
-    expr: 'name',
-    type: 2
-  }, {
-    name: 'vm',
-    expr: 'vm',
-    type: 2
-  }, {
-    name: 'vmh',
-    expr: 'vmh',
-    type: 2
-  }, {
-    name: 'type',
-    expr: 'type',
-    type: 2
-  }, {
-    name: 'state',
-    expr: 'state',
-    type: 2
-  }, {
-    name: 'brand',
-    expr: 'brand',
-    type: 2
-  }, {
-    name: 'model',
-    expr: 'model',
-    type: 2
-  }, {
-    name: 'cabinet',
-    expr: 'cabinet',
-    type: 2
-  }, {
-    name: 'status',
-    expr: 'ping',
-    type: 2
-  }
+  group: [
+    {
+      name: 'datacenter',
+      expr: 'datacenterName',
+      type: 2
+    }, {
+      name: 'name',
+      expr: 'name',
+      type: 2
+    }, {
+      name: 'vm',
+      expr: 'vm',
+      type: 2
+    }, {
+      name: 'vmh',
+      expr: 'vmh',
+      type: 2
+    }, {
+      name: 'type',
+      expr: 'type',
+      type: 2
+    }, {
+      name: 'state',
+      expr: 'state',
+      type: 2
+    }, {
+      name: 'brand',
+      expr: 'brand',
+      type: 2
+    }, {
+      name: 'model',
+      expr: 'model',
+      type: 2
+    }, {
+      name: 'cabinet',
+      expr: 'cabinet',
+      type: 2
+    }, {
+      name: 'status',
+      expr: 'ping',
+      type: 2
+    }
   ],
   select: [{
     name: 'count',