fix：修改alertMessage 异步加载的问题

nezha-fronted/src/components/common/alert/alertMessageTable.vue

@@ -566,13 +566,15 @@
       },
       promQueryParamConvert(obj){
         let r = "(" + obj.alertRule.expr + ")";
+        let intoLabels=false
         if (Object.keys(obj.labels).length > 0) {
-          r += " and " + function(){
+          r += function(){
-            let group = "(group({";
+            let group =" and " +  "(group({";
             let by = " by (";
 
             for (let k in obj.labels) {
               if (k != 'alertname' && k != 'severity') {
+                intoLabels=true;
                 group += k;
                 group += "=";
                 group += ("'" + obj.labels[k] + "',");
@@ -580,12 +582,16 @@
                 by += ","
               }
             }
+            if(intoLabels){
               group = group.substring(0, group.length-1);
-            group += "})";
               by = by.substring(0, by.length-1);
+              group += "})";
               by += ")";
-
               return group + by + ")";
+            }else{
+              return ''
+            }
+
           }();
         }
         return r;

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -524,12 +524,21 @@
           this.$get('alert/message', this.searchLabel).then(response => {
             if (response.code == 200) {
               this.tableData = response.data.list;
+              let axiosAll=[]
+              this.$nextTick(() => {
                 this.tableData.forEach((item) => {
                   item.labels = JSON.parse(item.labels);
-                if(item.alertRule.buildIn != 1) {
+                  if(item.alertRule.buildIn != 1){
                     let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                  this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+                    axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
+                  }else{
+                    axiosAll.push('')
+                  }
+                });
+                axios.all(axiosAll).then(res=>{
+                  res.forEach((item,index)=>{
                     let current = [];
+                    let response2 = item.data;
                     if (response2.data && response2.data.result && response2.data.result.length > 0) {
                       current = response2.data.result[0].value.map((item, i) => {
                         if (i == 0) {
@@ -539,16 +548,12 @@
                         }
                       });
                     }else{
-                      current=[null,null];
+                      current=[null,null]
-                    }
-                    this.requestIndex += 1;
-                    item.current = current;
-                    if (this.requestIndex === this.tableData.length) {
-                    this.$set(item, "current", current);
-                    this.requestIndex = 0;
-                    }
-                  });
                     }
+                    this.tableData[index].current=current;
+                  })
+                  this.tableData=[...this.tableData];
+                })
               });
               this.pageObj.total = response.data.total;
               this.loading = false;
@@ -556,15 +561,17 @@
           });
         }, 1000);
       },
-      promQueryParamConvert(obj) {
+      promQueryParamConvert(obj){
         let r = "(" + obj.alertRule.expr + ")";
-        if (Object.keys(obj.labels).length > 2) {
+        let intoLabels=false
-          r += " and " + function(){
+        if (Object.keys(obj.labels).length > 0) {
-            let group = "(group({";
+          r += function(){
+            let group =" and " +  "(group({";
             let by = " by (";
 
             for (let k in obj.labels) {
               if (k != 'alertname' && k != 'severity') {
+                intoLabels=true;
                 group += k;
                 group += "=";
                 group += ("'" + obj.labels[k] + "',");
@@ -572,30 +579,44 @@
                 by += ","
               }
             }
+            if(intoLabels){
               group = group.substring(0, group.length-1);
-            group += "})";
               by = by.substring(0, by.length-1);
+              group += "})";
               by += ")";
-
               return group + by + ")";
+            }else{
+              return ''
+            }
+
           }();
         }
         return r;
-        /*return "(" + obj.alertRule.expr + ") and (" + function(){
+        /*let result="(" + obj.alertRule.expr + ")";
+        if(obj.labels){
+          if(obj.labels.alertname){
+            delete obj.labels.alertname;
+          }
+          if(obj.labels.severity){
+            delete obj.labels.severity;
+          }
+        }
+        if(Object.keys(obj.labels).length>0){
+          result+=" and ("+function(){
             let q = "{";
             for (let k in obj.labels) {
-            if (k != 'alertname' && k != 'severity') {
               q += k;
               q += "=";
               q += ("'" + obj.labels[k] + "',");
-            }
             };
             if (q.length > 1) {
               q = q.substring(0, q.length-1);
             }
             q += "}";
             return q;
-        }() + ")";*/
+          }() + ")";
+        }
+        return result;*/
       },
       pageNo(val) {
         this.pageObj.pageNo = val;

nezha-fronted/src/components/page/alert/list.vue

@@ -362,13 +362,21 @@
           this.tools.loading = false;
           if (response.code == 200) {
             this.tableData = response.data.list;
+            let axiosAll=[]
             this.$nextTick(() => {
               this.tableData.forEach((item) => {
                 item.labels = JSON.parse(item.labels);
                 if(item.alertRule.buildIn != 1){
                   let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                  this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+                  axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
+                }else{
+                  axiosAll.push('')
+                }
+              });
+              axios.all(axiosAll).then(res=>{
+                res.forEach((item,index)=>{
                   let current = [];
+                  let response2 = item.data;
                   if (response2.data && response2.data.result && response2.data.result.length > 0) {
                     current = response2.data.result[0].value.map((item, i) => {
                       if (i == 0) {
@@ -380,15 +388,10 @@
                   }else{
                     current=[null,null]
                   }
-                    this.requestIndex+=1;
+                  this.tableData[index].current=current;
-                    item.current=current;
+                })
-                    if(this.requestIndex===this.tableData.length){
+                this.tableData=[...this.tableData];
-                      this.$set(item, "current", current);
+              })
-                      this.requestIndex=0;
-                    }
-                  });
-                }
-              });
             });
             this.deleteBox.ids='';
             this.pageObj.total = response.data.total;
@@ -397,13 +400,15 @@
       },
       promQueryParamConvert(obj){
         let r = "(" + obj.alertRule.expr + ")";
+        let intoLabels=false
         if (Object.keys(obj.labels).length > 0) {
-          r += " and " + function(){
+          r += function(){
-            let group = "(group({";
+            let group =" and " +  "(group({";
             let by = " by (";
 
             for (let k in obj.labels) {
               if (k != 'alertname' && k != 'severity') {
+                intoLabels=true;
                 group += k;
                 group += "=";
                 group += ("'" + obj.labels[k] + "',");
@@ -411,12 +416,16 @@
                 by += ","
               }
             }
+            if(intoLabels){
               group = group.substring(0, group.length-1);
-            group += "})";
               by = by.substring(0, by.length-1);
+              group += "})";
               by += ")";
-
               return group + by + ")";
+            }else{
+              return ''
+            }
+
           }();
         }
         return r;