解决业务模板日志列&打平关键字指标阈值和业务配置交互

Alexaa123 · Alexaa123 · commit df202da63c8c · 2024-10-16T17:15:09.000+08:00
diff --git a/monitor-ui/src/views/monitor-config/business-monitor-endpoint.vue b/monitor-ui/src/views/monitor-config/business-monitor-endpoint.vue
@@ -60,7 +60,7 @@
         />
       </div>
     </section>
-    <div v-else class='no-data-class'>{{$t('m_table_noDataTip')}}</div>
+    <!-- <div v-else class='no-data-class'>{{$t('m_table_noDataTip')}}</div> -->
     <Modal
       v-model="ruleModelConfig.isShow"
       :title="$t('m_json_regular')"
@@ -616,6 +616,7 @@ export default {
         }
         this.logAndDataBaseAllDetail.push(tempInfo)
       })
+      this.$emit('feedbackInfo', this.logAndDataBaseAllDetail)
     },
     getDbDetail() {
       return new Promise(resolve => {
diff --git a/monitor-ui/src/views/monitor-config/business-monitor-group.vue b/monitor-ui/src/views/monitor-config/business-monitor-group.vue
@@ -1365,16 +1365,20 @@ export default {
       })
     },
     async getDetail(targetId, metricKey) {
-      if ((metricKey || metricKey === '') && this.metricKey !== metricKey) {
-        this.metricKey = metricKey
-        this.logFileCollapseValue = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+      if (targetId) {
+        if ((metricKey || metricKey === '') && this.metricKey !== metricKey) {
+          this.metricKey = metricKey
+          this.logFileCollapseValue = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+        } else {
+          this.logFileCollapseValue = ['0']
+        }
+        this.targetId = targetId
+        await this.getLogKeyWordDetail()
+        await this.getDbDetail()
+        this.processAllInfo()
       } else {
-        this.logFileCollapseValue = ['0']
+        this.logAndDataBaseAllDetail = []
       }
-      this.targetId = targetId
-      await this.getLogKeyWordDetail()
-      await this.getDbDetail()
-      this.processAllInfo()
     },
     processAllInfo() {
       this.logAndDataBaseAllDetail = []
@@ -1388,6 +1392,7 @@ export default {
         }
         this.logAndDataBaseAllDetail.push(tempInfo)
       })
+      this.$emit('feedbackInfo', this.logAndDataBaseAllDetail)
     },
     getDbDetail() {
       return new Promise(resolve => {
diff --git a/monitor-ui/src/views/monitor-config/business-monitor.vue b/monitor-ui/src/views/monitor-config/business-monitor.vue
@@ -24,6 +24,7 @@
           search()
         }"
         @on-clear="typeChange(false)"
+        @on-open-change="onSelectOpenChange"
       >
         <Option v-for="(option, index) in targetOptions"
                 :value="option.guid"
@@ -50,12 +51,25 @@
         {{$t('m_operationDoc')}}
       </span>
     </div>
+    <div v-if="!targrtId" style="margin: 10px 0">
+      <Alert type="error">
+        <span>{{ $t('m_empty_tip_1') }}</span>
+        <span v-if="type === 'group'">{{ $t('m_field_resourceLevel') }}</span>
+        <span v-if="type === 'endpoint'">{{ $t('m_field_endpoint') }}</span>
+      </Alert>
+    </div>
+    <div v-if="targrtId && isDataEmpty" style="margin: 10px 0">
+      <Alert type="error">
+        <span>{{ $t('m_noData') }}</span>
+      </Alert>
+    </div>
+
     <section v-show="showTargetManagement" class='business-monitor-content' style="margin-top: 16px;">
       <template v-if="type === 'group'">
-        <groupManagement ref="group"></groupManagement>
+        <groupManagement ref="group" @feedbackInfo="onFeedbackInfo"></groupManagement>
       </template>
       <template v-if="type === 'endpoint'">
-        <endpointManagement ref="endpoint"></endpointManagement>
+        <endpointManagement @feedbackInfo="onFeedbackInfo" ref="endpoint"></endpointManagement>
       </template>
     </section>
   </div>
@@ -74,7 +88,8 @@ export default {
       targrtId: '',
       targetOptions: [],
       showTargetManagement: false,
-      metricKey: ''
+      metricKey: '',
+      isDataEmpty: false
     }
   },
 
@@ -114,6 +129,14 @@ export default {
     }, 300),
     openDoc() {
       window.open('https://webankpartners.github.io/wecube-docs/manual-open-monitor-config-metrics/')
+    },
+    onFeedbackInfo(allData) {
+      this.isDataEmpty = allData.length === 0
+    },
+    onSelectOpenChange(open) {
+      if (open) {
+        this.getTargrtList(false)
+      }
     }
   },
   components: {
diff --git a/monitor-ui/src/views/monitor-config/config-detail.vue b/monitor-ui/src/views/monitor-config/config-detail.vue
@@ -1176,39 +1176,43 @@ export default {
       return resData
     },
     getDetail(targetId) {
-      this.targetId = targetId
-      const api = '/monitor/api/v2/alarm/strategy/query'
-      const params = {
-        queryType: this.type,
-        guid: this.targetId,
-        show: this.onlyShowCreated,
-        alarmName: this.alarmName
-      }
-      this.totalPageConfig = []
-      this.request('post', api, params, responseData => {
-        this.$emit('feedbackInfo', responseData.length === 0)
-        const allConfigDetail = responseData
-        allConfigDetail.forEach((item, alarmIndex) => {
-          const strategy = item.strategy || []
-          const tempTableData = strategy.map(s => {
-            s.monitor_type = item.monitor_type
-            return s
-          })
-          const tableData = this.handleTableData(tempTableData, alarmIndex)
-          this.totalPageConfig.push({
-            tableData,
-            endpoint_group: item.endpoint_group,
-            display_name: item.display_name,
-            service_group: item.service_group,
-            monitor_type: item.monitor_type,
-            notify: item.notify,
-            mergeSpanMap: this.mergeSpanMap
+      if (targetId) {
+        this.targetId = targetId
+        const api = '/monitor/api/v2/alarm/strategy/query'
+        const params = {
+          queryType: this.type,
+          guid: this.targetId,
+          show: this.onlyShowCreated,
+          alarmName: this.alarmName
+        }
+        this.totalPageConfig = []
+        this.request('post', api, params, responseData => {
+          this.$emit('feedbackInfo', responseData.length === 0)
+          const allConfigDetail = responseData
+          allConfigDetail.forEach((item, alarmIndex) => {
+            const strategy = item.strategy || []
+            const tempTableData = strategy.map(s => {
+              s.monitor_type = item.monitor_type
+              return s
+            })
+            const tableData = this.handleTableData(tempTableData, alarmIndex)
+            this.totalPageConfig.push({
+              tableData,
+              endpoint_group: item.endpoint_group,
+              display_name: item.display_name,
+              service_group: item.service_group,
+              monitor_type: item.monitor_type,
+              notify: item.notify,
+              mergeSpanMap: this.mergeSpanMap
+            })
+            this.originTotalPageConfig = cloneDeep(this.totalPageConfig)
           })
-          this.originTotalPageConfig = cloneDeep(this.totalPageConfig)
-        })
-      }, {isNeedloading: true})
-      this.getAllRole()
-      this.getWorkFlow()
+        }, {isNeedloading: true})
+        this.getAllRole()
+        this.getWorkFlow()
+      } else {
+        this.totalPageConfig = []
+      }
     },
     onAddIconClick() {
       const metricItem = Object.assign({}, cloneDeep(initFormData.conditions[0]), {
diff --git a/monitor-ui/src/views/monitor-config/keyword-content.vue b/monitor-ui/src/views/monitor-config/keyword-content.vue
@@ -1207,16 +1207,20 @@ export default {
       })
     },
     async getDetail(targetId, alarmName = this.alarmName) {
-      if (this.alarmName !== alarmName) {
-        this.keywordCollapseValue = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
-        this.alarmName = alarmName
+      if (targetId) {
+        if (this.alarmName !== alarmName) {
+          this.keywordCollapseValue = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+          this.alarmName = alarmName
+        } else {
+          this.keywordCollapseValue = ['0']
+        }
+        this.targetId = targetId
+        await this.getLogKeyWordDetail()
+        await this.getDataBaseDetail()
+        this.processAllInfo()
       } else {
-        this.keywordCollapseValue = ['0']
+        this.logAndDataBaseAllDetail = []
       }
-      this.targetId = targetId
-      await this.getLogKeyWordDetail()
-      await this.getDataBaseDetail()
-      this.processAllInfo()
     },
     processAllInfo() {
       this.logAndDataBaseAllDetail = []
@@ -1230,6 +1234,7 @@ export default {
         }
         this.logAndDataBaseAllDetail.push(tempInfo)
       })
+      this.$emit('feedbackInfo', this.logAndDataBaseAllDetail)
     },
     getLogKeyWordDetail() {
       return new Promise(resolve => {
diff --git a/monitor-ui/src/views/monitor-config/log-management.vue b/monitor-ui/src/views/monitor-config/log-management.vue
@@ -18,7 +18,9 @@
         clearable
         remote
         ref="select"
+        @on-clear="onTargetIdClear"
         @on-change="onFilterChange"
+        @on-open-change="onSelectOpenChange"
       >
         <Option v-for="(option, index) in targetOptions" :value="option.guid" :label="option.display_name" :key="index">
           <TagShow :list="targetOptions" name="type" :tagName="option.type" :index="index"></TagShow>
@@ -59,8 +61,25 @@
         </Upload>
       </div>
     </div>
+    <div v-if="!targetId" style="margin: 10px 0">
+      <Alert type="error">
+        <span>{{ $t('m_empty_tip_1') }}</span>
+        <span v-if="type === 'group'">{{ $t('m_field_resourceLevel') }}</span>
+        <span v-if="type === 'endpoint'">{{ $t('m_field_endpoint') }}</span>
+      </Alert>
+    </div>
+    <div v-if="targetId && isDataEmpty" style="margin: 10px 0">
+      <Alert type="error">
+        <span>{{ $t('m_noData') }}</span>
+      </Alert>
+    </div>
     <section v-show="showTargetManagement" class='key-word-content'>
-      <keywordContent ref='keywordContent' :keywordType="typeMap[type]"></keywordContent>
+      <keywordContent
+        ref='keywordContent'
+        :keywordType="typeMap[type]"
+        @feedbackInfo="onFeedbackInfo"
+      >
+      </keywordContent>
     </section>
   </div>
 </template>
@@ -85,7 +104,8 @@ export default {
         endpoint: 'endpoint'
       },
       alarmName: '',
-      token: ''
+      token: '',
+      isDataEmpty: false
     }
   },
   async mounted() {
@@ -102,29 +122,27 @@ export default {
   },
   methods: {
     typeChange() {
-      this.clearTargrt()
       this.getTargrtList()
     },
-    getTargrtList() {
+    getTargrtList(type = 'init') {
       const api = this.$root.apiCenter.getTargetByEndpoint + '/' + this.type
       this.$root.$httpRequestEntrance.httpRequestEntrance('GET', api, '', responseData => {
         this.targetOptions = responseData
-        this.targetId = this.targetOptions[0].guid
-        this.search()
+        if (type === 'init') {
+          this.targetId = this.targetOptions[0].guid
+          this.search()
+        }
       }, {isNeedloading: false})
     },
-    clearTargrt() {
-      this.targetOptions = []
-      this.targetId = ''
-      this.showTargetManagement = false
-      this.$refs.select.query = ''
-    },
     search() {
       if (this.targetId) {
         this.showTargetManagement = true
         this.$refs.keywordContent.getDetail(this.targetId, this.alarmName)
       }
     },
+    onTargetIdClear() {
+      this.$refs.keywordContent.getDetail('', this.alarmName)
+    },
     onFilterChange: debounce(function () {
       this.search()
     }, 300),
@@ -174,6 +192,14 @@ export default {
     },
     uploadFailed(file) {
       this.$Message.warning(file.message)
+    },
+    onSelectOpenChange(open) {
+      if (open) {
+        this.getTargrtList('')
+      }
+    },
+    onFeedbackInfo(allData) {
+      this.isDataEmpty = allData.length === 0
     }
   },
   components: {
diff --git a/monitor-ui/src/views/monitor-config/log-template-config/custom-regex.vue b/monitor-ui/src/views/monitor-config/log-template-config/custom-regex.vue
@@ -80,6 +80,7 @@
             <div>
               <Divider orientation="left" size="small">{{ $t('m_compute_metrics') }}</Divider>
               <Table
+                :key="tableKey"
                 class='compute-metrics-style'
                 size="small"
                 :columns="columnsForComputeMetrics"
@@ -107,7 +108,7 @@
 
 <script>
 import {
-  isEmpty, hasIn, cloneDeep
+  isEmpty, hasIn, cloneDeep, remove
 } from 'lodash'
 import Vue from 'vue'
 import TagMapConfig from './tag-map-config.vue'
@@ -315,7 +316,7 @@ export default {
         },
         {
           title: this.$t('m_metric_key'),
-          key: 'index',
+          key: 'resultMetricKey',
           width: 120,
           renderHeader: () => (
             <span>
@@ -560,7 +561,8 @@ export default {
       isEmpty,
       auto_create_warn: true,
       auto_create_dashboard: true,
-      metricPrefixCode: ''
+      metricPrefixCode: '',
+      tableKey: ''
     }
   },
   computed: {
@@ -619,6 +621,10 @@ export default {
         }
         this.configInfo.log_metric_monitor = parentGuid
       }
+      if (this.isInTemplatePage) {
+        remove(this.columnsForComputeMetrics, item => item.key === 'resultMetricKey')
+        this.tableKey = +new Date() + ''
+      }
       this.showModal = true
     },
     regularCheckValue(arr = [], key) {
diff --git a/monitor-ui/src/views/monitor-config/threshold-management.vue b/monitor-ui/src/views/monitor-config/threshold-management.vue
@@ -17,6 +17,7 @@
           filterable
           clearable
           ref="select"
+          @on-clear="onTargetIdClear"
           @on-query-change="e => {
             getTargetOptionsSearch = e;
             debounceGetTargetOptions()
@@ -266,12 +267,12 @@ export default {
       }
       await this.getTargetOptions()
     }, 400),
-    // filterDataByAlarmName() {
-    //   this.$refs.thresholdDetail.filterData(this.alarmName)
-    // },
     fetchDetailData: debounce(function () {
       this.$refs.thresholdDetail.getDetail(this.targetId)
-    }, 300)
+    }, 300),
+    onTargetIdClear() {
+      this.$refs.thresholdDetail.getDetail('')
+    }
   },
   components: {
     TagShow,
