feat： 修改 log-chart-box 和metrics-chart-box 使用同一个rightbox

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;

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">
+    <el-form
-      <div v-if="chartConfig.elements">
+      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-form-item
-          <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+          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-form-item
-          <el-input-number size="small" placeholder="" v-model="chartConfig.param.limit" :controls="false" @change="change"/>
+          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-form-item
-          <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">
+          :label="$t('dashboard.panel.chartForm.width')"
-            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+          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-select
-            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+            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-form-item
-          <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">
+          :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-form-item
-          <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()">
+          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-form-item
-          <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()" >
+          :label='"Null value"'
-            <el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          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">
+          <div
-            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
+            v-if="chartConfig.param.legend.show"
-              <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()">
+            class="form-items--half-width-group"
-                <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          >
+            <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-form-item
-              <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()">
+              :label="$t('dashboard.panel.chartForm.legendValues')"
-                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+              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">
+            <el-form-item
-              <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
+              v-for="(item,index) in chartConfig.param.thresholds"
-                          @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
+              :key="index"
-              <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
+              class="thresholds-item"
-              <span @click="delThresholds(index)" class="del-thresholds-icon">
+              :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-select
-                      <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
+                      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-form-item
-                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
+                    v-if="item.type === 'value'"
-                  <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>
+                    :prop="'param.valueMapping.mapping.' + index + 'value'"
-                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                    :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',
+  name: 'chartConfig',
-  props: {
-    params: {}
-  },
   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()

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 chartConfig from '@/components/common/rightBox/chart/chartConfig'
-import logsChartConfig from '@/components/common/rightBox/chart/logsChartConfig'
 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,
+    chartConfig,
-    logsChartConfig,
     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) {
+    datasourceChange () {
-      console.log(val, e, this.editChart.datasource)
       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
           }
         }
       }

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-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" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
+                    <el-input-number :controls="false" 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.to" placeholder="to" style="margin-left: 10px"></el-input-number>
+                  </el-form-item>
-                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                  <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()

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)
-    },
+    }
   }
 }

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: '',