From c4ed46e956d88d122631ccc85ca6d20e8e128d0d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 2 Jun 2022 10:26:32 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Apromql=20=E8=A1=A8=E8=BE=BE?=
 =?UTF-8?q?=E5=BC=8F=E8=BE=93=E5=85=A5=E6=A1=86=20=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/alertRuleBox.scss         |  2 +-
 .../components/page/dashboard/chartBox.scss   | 13 ++++++---
 .../components/common/mixin/editRigthBox.js   |  1 -
 .../src/components/common/nezhaColor.vue      | 16 +++++++++-
 .../common/project/L5/CanvasProps.vue         | 29 ++++++++++++-------
 .../components/common/project/topologyL5.vue  |  7 +++--
 .../src/components/common/searchInput.vue     |  1 -
 .../page/dashboard/explore/promqlInput.vue    | 16 ++++++++--
 .../page/monitor/endpoint/endpointList.vue    | 13 +++++++--
 9 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
index 15c0219c8..bcaf315f8 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
@@ -60,7 +60,7 @@
     width: 100%;
   }
   .query-row .metric-selector-input-box {
-    width: calc(100% - 120px);
+    width: calc(100% - 120px) !important;
   }
 
   .el-input-number--small {
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
index 883f38fd6..a0f267a6b 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
@@ -137,9 +137,14 @@
   z-index: 10;
 }
 /* metric input */
-.metric-selector-input-box {
-  width: calc(100% - 160px) !important;
-  .input-box {
-    margin: 0 !important;
+.right-box {
+  .el-form{
+    .metric-selector-input-box {
+      width: calc(100% - 120px);
+      .input-box {
+        margin: 0 !important;
+      }
+    }
   }
 }
+
diff --git a/nezha-fronted/src/components/common/mixin/editRigthBox.js b/nezha-fronted/src/components/common/mixin/editRigthBox.js
index c359d9aa5..b1e37f64e 100644
--- a/nezha-fronted/src/components/common/mixin/editRigthBox.js
+++ b/nezha-fronted/src/components/common/mixin/editRigthBox.js
@@ -33,7 +33,6 @@ export default {
       assetAdd.addEventListener('click', this.saveNext)
     },
     saveNext () {
-      console.log(this.assetId)
       this.$router.push({
         path: this.messageParams.route,
         query: this.messageParams.params
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 37de7d08a..c41cda962 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -75,9 +75,23 @@ export default {
     showText: {
       type: Boolean,
       default: true
+    },
+    isTopo: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    valueArr: {
+      handler (n) {
+        if (this.isTopo) {
+          this.keyName = this.valueArr[0].name
+          this.colors = this.valueArr[0].value || randomcolor() + 'FF'
+        }
+      },
+      deep: true
     }
   },
-  watch: {},
   data () {
     return {
       colors: '#ffffff',
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 92c896490..2a7b80abc 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -106,7 +106,7 @@
                     <el-col :span="4" class="thresholds-cell">
                       <span v-if="item.level!==0">
                         <div style="display: inline-block">
-                          <nezhaColor
+                          <nezhaColor :isTopo="true"
                             :color-val="item.color"
                             :presetColors="predefineColors" :single="false"
                             :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/>
@@ -224,6 +224,7 @@
                   :from-father-data="true"
                   :metricOptionsParent="metricOptions"
                   :id="index"
+                  :pqid="'vm'"
                   :key="index"
                   :ref="'promql-'+index"
                   :expression-list="selection.pen.data.expressAllArr"
@@ -401,7 +402,7 @@
               <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
                 <div>{{ $t('project.topology.bac') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -409,7 +410,7 @@
               <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily">
                 <div>{{ $t('project.topology.iconColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -430,7 +431,7 @@
                     <!--el-input__inner-->
                   </el-select>
                   <div class="gradient-to-color">
-                    <nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
+                    <nezhaColor :isTopo="true" :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
                                 @colorChange="colorChange"/>
                   </div>
                 </div>
@@ -636,14 +637,14 @@
               <div class="props-pen-item">
                 <div>{{ $t('project.topology.lineColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
               <div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
                 <div>{{ $t('project.topology.arrowColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -678,7 +679,7 @@
               <div class="props-pen-item">
                 <div>{{ $t('project.topology.fontColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -862,7 +863,7 @@
         <!--          <div class="project-content-item half">-->
         <!--            <label>{{$t('project.topology.fontColor')}}</label>-->
         <!--            <div class="full pr10 h32">-->
-        <!--              <nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
+        <!--              <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
         <!--                changeTopologyOpt(val,key,true)-->
         <!--                }"/>-->
         <!--            </div>-->
@@ -909,7 +910,7 @@
           <div class="project-content-item half">
             <label>{{ $t('project.topology.bac') }}</label>
             <div class="full pr10 h32">
-              <nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
+              <nezhaColor :isTopo="true" :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
                 changeTopologyOpt(val,key,true)
                 }"/>
             </div>
@@ -1423,7 +1424,7 @@ export default {
     //   immediate:false,
     // },
     selection: {
-      handler () {
+      handler (n) {
         // this.loading = false
         if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
           this.selection.pen.data.expressAllArr = ['']
@@ -1433,6 +1434,14 @@ export default {
       deep: true,
       immediate: true
     },
+    'selection.pen.data': {
+      handler (n) {
+        // this.loading = false
+        if (this.selection.pen && JSON.stringify(this.selection.pen.type)) {
+          this.$emit('change', this.selection.pen)
+        }
+      }
+    },
     fromDiagram: {
       handler () {
         if (this.selection.pen && this.selection.pen.data) {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index d169e8b33..ebf26251c 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1201,6 +1201,9 @@ export default {
       }
       if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
         if (data.type === 0 && !data.data.moduleId) {
+          if (!data.fillStyle) {
+            data.fillStyle = '#FFFFFF00'
+          }
           data.data = {
             ...data.data,
             moduleId: '',
@@ -1208,8 +1211,8 @@ export default {
             show: false,
             error: false,
             animatePlay: false,
-            fillStyle: data.fillStyle,
-            strokeStyle: data.strokeStyle,
+            fillStyle: data.fillStyle || '#ffffff',
+            strokeStyle: data.strokeStyle || '#ffffff',
             gradientColor: '#bae7ff',
             gradientType: 0,
             lineWidth: this.nodeDefaultWidth(data.name),
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 22b398ee1..8b315e1b1 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -930,7 +930,6 @@ export default {
           } else if (val.type === 'project') {
             objectInfo.projectIds = val.valnum
           } else if (val.label === 'assetState') {
-            console.log(val)
             objectInfo.state = val.valnum
           } else if (val.label === 'assetType') {
             objectInfo.typeIds = val.valnum
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 16d9d83ac..e111b634f 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -235,7 +235,7 @@
               v-if="plugins.indexOf('metric-input') > -1"
             >
             <div
-              :id="'editor'+index"
+              :id="pqid + 'editor'+index"
               v-if="type !== 'log'"
               class="not-fixed-height no-resize no-close"
         >
@@ -435,6 +435,9 @@ export default {
   },
   props: {
     index: { type: Number },
+    pqid: {
+      type: String, default: ''
+    },
     expressionList: {},
     plugins: { type: Array },
     styleType: Number,
@@ -654,7 +657,7 @@ export default {
         const view = new EditorView({
           state: EditorViewstate,
           // parent: document.getElementById('editor')
-          parent: document.getElementById('editor' + self.index)
+          parent: document.getElementById(this.pqid + 'editor' + self.index)
         })
         self.newView = view
       } else {
@@ -663,7 +666,6 @@ export default {
         // const to = self.codeMirrorValue.length
         const to = self.oldcCodeLength
         const from = self.oldcCodeLength
-        // console.log(from, to)
         self.newView.dispatch(
           self.newView.state.update({
             effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
@@ -1096,6 +1098,14 @@ export default {
       handler (n, o) {
         // console.log(n, n[this.index])
         this.codeMirrorValue[this.index] = n[this.index]
+        setTimeout(() => {
+          const text = this.newView.state.doc.toString()
+          this.newView.dispatch(
+            this.newView.state.update({
+              changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
+            })
+          )
+        }, 200)
       }
     },
 
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index c0d2587d0..7b88b9084 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -106,10 +106,13 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div>
               </el-dropdown-item>
               <el-dropdown-item>
-                <div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div>
+                <div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
               </el-dropdown-item>
             </div>
           </template>
@@ -365,7 +368,8 @@ export default {
         editShow: false,
         show: false,
         batchModify: false,
-        batchAdd: false
+        batchAdd: false,
+        batchShow: false
       },
       titleSearch: {},
       titleSearchList: {
@@ -795,6 +799,9 @@ export default {
     batchAdd () {
       this.rightBox.batchAdd = true
     },
+    batchEdit () {
+      this.rightBox.batchShow = true
+    },
     rollbackImport () {
       this.$delete('monitor/endpoint/cancelImport' + '?seq=' + this.importResult.seq).then(response => {
         if (response.code == 200) {