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 += ","
               }
             }
-            group = group.substring(0, group.length-1);
+            if(intoLabels){
-            group += "})";
+              group = group.substring(0, group.length-1);
-            by = by.substring(0, by.length-1);
+              by = by.substring(0, by.length-1);
-            by += ")";
+              group += "})";
+              by += ")";
+              return group + by + ")";
+            }else{
+              return ''
+            }
 
-            return group + by + ")";
           }();
         }
         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;
-              this.tableData.forEach((item) => {
+              let axiosAll=[]
-                item.labels = JSON.parse(item.labels);
+              this.$nextTick(() => {
-                if(item.alertRule.buildIn != 1) {
+                this.tableData.forEach((item) => {
-                  let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+                  item.labels = JSON.parse(item.labels);
-                  this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+                  if(item.alertRule.buildIn != 1){
+                    let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+                    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;
+                    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.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 += ","
               }
             }
-            group = group.substring(0, group.length-1);
+            if(intoLabels){
-            group += "})";
+              group = group.substring(0, group.length-1);
-            by = by.substring(0, by.length-1);
+              by = by.substring(0, by.length-1);
-            by += ")";
+              group += "})";
+              by += ")";
+              return group + by + ")";
+            }else{
+              return ''
+            }
 
-            return group + by + ")";
           }();
         }
         return r;
-        /*return "(" + obj.alertRule.expr + ") and (" + function(){
+        /*let result="(" + obj.alertRule.expr + ")";
-          let q = "{";
+        if(obj.labels){
-          for (let k in obj.labels) {
+          if(obj.labels.alertname){
-            if (k != 'alertname' && k != 'severity') {
+            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) {
               q += k;
               q += "=";
               q += ("'" + obj.labels[k] + "',");
+            };
+            if (q.length > 1) {
+              q = q.substring(0, q.length-1);
             }
-          };
+            q += "}";
-          if (q.length > 1) {
+            return q;
-            q = q.substring(0, q.length-1);
+          }() + ")";
-          }
+        }
-          q += "}";
+        return result;*/
-          return q;
-        }() + ")";*/
       },
       pageNo(val) {
         this.pageObj.pageNo = val;

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

@@ -362,33 +362,36 @@
           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, "")))
-                    let current = [];
+                }else{
-                    if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  axiosAll.push('')
-                      current = response2.data.result[0].value.map((item, i) => {
-                        if (i == 0) {
-                          return bus.computeTimezone(item);
-                        } else {
-                          return parseFloat(item).toFixed(2);
-                        }
-                      });
-                    }else{
-                      current=[null,null]
-                    }
-                    this.requestIndex+=1;
-                    item.current=current;
-                    if(this.requestIndex===this.tableData.length){
-                      this.$set(item, "current", current);
-                      this.requestIndex=0;
-                    }
-                  });
                 }
               });
+              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) {
+                        return bus.computeTimezone(item);
+                      } else {
+                        return parseFloat(item).toFixed(2);
+                      }
+                    });
+                  }else{
+                    current=[null,null]
+                  }
+                  this.tableData[index].current=current;
+                })
+                this.tableData=[...this.tableData];
+              })
             });
             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 += ","
               }
             }
-            group = group.substring(0, group.length-1);
+            if(intoLabels){
-            group += "})";
+              group = group.substring(0, group.length-1);
-            by = by.substring(0, by.length-1);
+              by = by.substring(0, by.length-1);
-            by += ")";
+              group += "})";
+              by += ")";
+              return group + by + ")";
+            }else{
+              return ''
+            }
 
-            return group + by + ")";
           }();
         }
         return r;