From 6eb567a13e3dc284fb51617f1cc831aef2777a02 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 3 Dec 2021 11:44:45 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=20placeholde?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss | 21 ++++++++++
 .../common/rightBox/chart/chartConfig.vue     | 38 +++++++++----------
 .../rightBox/chart/otherChartConfig.vue       |  2 +-
 .../common/rightBox/chart/publicConfig.js     | 12 ++++--
 .../rightBox/chart/systemChartConfig.vue      |  6 +--
 5 files changed, 51 insertions(+), 28 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 21b13621a..8d4a8728c 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
@@ -18,6 +18,23 @@
         width: 100%;
       }
     }
+    .metrics-input-box{
+      .input-box .el-textarea .el-textarea__inner {
+        width: 508px;
+      }
+      .metric-selector-input-box{
+        line-height: 32px;
+        .el-input__count{
+          right: -38px !important;
+        }
+      }
+      .el-col-24{
+        line-height: 32px;
+      }
+      .el-input--small{
+        line-height: 32px;
+      }
+    }
     .chart-title-config {
       border: 1px solid $--border-color-light;
       border-radius: 2px;
@@ -29,6 +46,9 @@
       margin-bottom: 10px;
       box-sizing: border-box;
       height: 32px;
+      .nz-icon{
+        cursor: pointer;
+      }
       .title-content-left{
         display: inline-flex;
         align-items: center;
@@ -58,6 +78,7 @@
       justify-items: center;
       .el-form-item__content{
         display: flex;
+        line-height: 32px;
         align-items: center;
         justify-items: center;
         width: 100%;
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 33351df95..61e4c7241 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -9,6 +9,7 @@
     >
       <div
         v-if="chartConfig.elements"
+        class="metrics-input-box"
       >
         <el-form-item
           :key="index"
@@ -27,14 +28,14 @@
               </span>
             </span>
             <span>
-              <span @click="addExpression('')">
+              <span @click="addExpression('')" style="margin-right: 5px">
                   <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 @click="copyExpression(index - 1)" style="margin-right: 5px">
+                  <i  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 @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px">
+                  <i  class="nz-icon nz-icon-minus"></i>
               </span>
             </span>
           </div>
@@ -56,7 +57,7 @@
                 @change="expressionChange"
                 @removeExpression="removeExpression"
               ></promql-input>
-              <el-row style="margin-top: 18px">
+              <el-row style="margin-top: 18px;display: flex">
                 <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">
@@ -64,7 +65,7 @@
                     <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-col style="flex: 1">
                   <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
                 </el-col>
               </el-row>
@@ -150,7 +151,7 @@
           prop="param.limit">
           <el-input-number
             size="small"
-            placeholder=""
+            :placeholder="$t('placeholder.log.limit')"
             v-model="chartConfig.param.limit"
             :controls="false"
             @change="change"/>
@@ -319,7 +320,7 @@
                 v-model="chartConfig.param.legend.values"
                 multiple
                 collapse-tags
-                placeholder=""
+                :placeholder="$t('el.select.placeholder')"
                 popper-class="right-box-select-top prevent-clickoutside"
                 size="small"
                 @change="change, $forceUpdate()"
@@ -363,7 +364,7 @@
               <el-input-number
                 size="small"
                 style="margin-top: 3px"
-                placeholder=""
+                :placeholder="$t('placeholder.chart.threshold')"
                 v-model="item.value"
                 :controls="false"
                 @blur="sortThresholds"
@@ -419,14 +420,14 @@
                   </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 @click="addMapping('')" style="margin-right: 5px">
+                      <i class="nz-icon nz-icon-create-square"></i>
                   </span>
-                  <span class="nz-icon-copy">
-                      <i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
+                  <span @click="copyMapping(index)" style="margin-right: 5px">
+                      <i  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 @click="removeMapping(index)" style="margin-right: 5px">
+                      <i  class="nz-icon nz-icon-minus"></i>
                   </span>
                 </span>
               </div>
@@ -507,7 +508,7 @@
                     <div class='mapping-display'>Display</div>
                   </div>
                   <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-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" 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>
@@ -618,9 +619,6 @@ export default {
   data () {
     return {
       rules: {
-        'param.limit': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ]
       },
       promqlType: 'log',
       chartTypeList: [
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 4ff8594c7..410cc486d 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -22,7 +22,7 @@
             id="chart-box-type"
             v-model="chartConfig.type"
             :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
-            placeholder=""
+            :placeholder="$t('el.select.placeholder')"
             popper-class="right-box-select-top prevent-clickoutside"
             size="small"
             value-key="chartType"
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index f652d1792..3de620231 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -251,7 +251,7 @@ export default {
       this.chartConfig.param.valueMapping.mapping.push({
         type: 'value',
         show: true,
-        value: '',
+        value: undefined,
         display: '',
         color: {
           bac: '#FFFFFFFF',
@@ -276,21 +276,25 @@ export default {
       if (mapping.type === 'value') {
         this.chartConfig.param.valueMapping.mapping[index] = {
           ...mapping,
-          value: ''
+          value: undefined
         }
       }
+      this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'value')
       if (mapping.type === 'range') {
         this.chartConfig.param.valueMapping.mapping[index] = {
           ...mapping,
-          from: '',
-          to: ''
+          from: undefined,
+          to: undefined
         }
+        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'from')
+        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'to')
       }
       if (mapping.type === 'regx') {
         this.chartConfig.param.valueMapping.mapping[index] = {
           ...mapping,
           regx: ''
         }
+        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'regx')
       }
       this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
       this.change()
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 3973f3fa0..91cdc3296 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -26,7 +26,7 @@
               class="form-item--half-width"
               prop="param.systemGroup"
             >
-              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags>
+              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')">
                   <el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
               </el-select>
             </el-form-item>
@@ -36,7 +36,7 @@
               class="form-item--half-width"
               prop="param.systemSelect"
             >
-              <el-select size="small" v-model="chartConfig.param.systemSelect">
+              <el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')">
                 <el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
               </el-select>
             </el-form-item>
@@ -67,7 +67,7 @@
               class="form-item--half-width"
               prop="param.limit"
             >
-              <el-input-number :controls="false" v-model="chartConfig.param.limit"  size="small"/>
+              <el-input-number :controls="false" v-model="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')"  size="small"/>
             </el-form-item>
           </div>
         </div>