feat: alert-message 请求参数encode

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

@@ -104,6 +104,11 @@
               {{scope.row['state'] == 2 ? "Expired" : ""}}
             </span>
           </div>
+          <div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'sub-alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'sub-alert-list-delete-'+scope.row.id"><i  class="el-icon-delete"></i></span>
+            </div>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
         </template>
@@ -147,7 +152,7 @@
         </div>
       </el-dialog>
     </div>
-    <!--删除确认提示-->
+    <!--export-->
     <div class="export-xlsx">
       <el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="deleteBox.show = false" class="nz-message">
         <div class="upload-body">
@@ -163,6 +168,21 @@
         </div>
       </el-dialog>
     </div>
+
+    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+               :title="$t('overall.detail')"
+               :visible.sync="graphShow"
+               width="90%"
+               id="viewGraphDialog"
+               @close="dialogClose">
+      <div slot="title">
+        {{$t("project.endpoint.dialogTitle")}}
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;"></pick-time>
+        </div>
+      </div>
+      <chart ref="messageChart" ></chart>
+    </el-dialog>
   </span>
 </template>
 
@@ -180,6 +200,12 @@
     },
     data() {
       return {
+        //详情相关
+        graphShow: false,
+        chartDatas: [],
+        legend: [],
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+
         defaultSearchValue: this.obj.alertNum ? 1 : 0,
         showElementSet: false,
         tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
@@ -237,6 +263,15 @@
             label: this.$t('alert.endAt'),
             prop: 'endAt',
             show: true,
+          }, {
+            label: this.$t('alert.list.current'),
+            prop: 'current',
+            show: true
+          }, {
+            label: this.$t('overall.option'),
+            prop: 'option',
+            show: true,
+            width: 90
           }
         ],
         searchMsg: { //给搜索框子组件传递的信息
@@ -432,6 +467,112 @@
           }
         })
       },
+      queryChartDate(obj) {
+        let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
+        let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
+        this.searchTime = [start, end];
+        let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
+        let step = '15s';
+        if(timeDiff< 1){
+          step='15s';
+        }else if(timeDiff < 7){
+          step='5m';
+        }else if(timeDiff<30){
+          step='10m';
+        }else{
+          step='30m';
+        }
+        let axiosArr=[];
+        let queryParam = this.promQueryParamConvert(obj);
+        axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step));
+        this.legend = [];
+        this.chartDatas = [];
+        axios.all(axiosArr).then(res =>{
+          res.forEach((response,promIndex)=>{
+            console.info(response);
+            if (response.status == 200) {
+              if(response.data.status == 'success'){
+                let queryData=response.data.data.result[0];
+                /*if(queryData){
+                  let chartData={
+                    type:"line",
+                    symbol:'none',  //去掉点
+                    smooth:true,  //曲线变平滑
+                  };
+                  chartData.name=queryData.metric.__name__;
+                  let alias=queryData.metric.__name__;
+                  delete queryData.metric.__name__;
+                  chartData.name+="{";
+                  alias+="{";
+                  Object.keys(queryData.metric).forEach((item,index)=>{
+                    let label=item;
+                    let value=queryData.metric[label];
+                    chartData.name+=label +"='"+value+"',";
+                    if(!this.sameLabels.some((i)=>{return i == label})){
+                      alias+=label +"='"+value+"',";
+                    }
+                  })
+                  chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name;
+                  alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias;
+                  chartData.name+="}";
+                  alias+="}";
+                  if(!/.+\{.+\}/.test(alias)){
+                    alias=alias.substr(0,alias.length-2);
+                  }
+                  let legend={
+                    name:chartData.name,
+                    alias:alias,
+                    // showText:this.formatLegend(chartData.name),
+                    isGray:false
+                  }
+                  this.legend.push(legend);
+                  chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
+                    return [dpsItem[0] * 1000, Number(dpsItem[1])];
+                  });
+                  this.chartDatas.push(chartData);
+                }*/
+              }else{
+                this.$message.error(response.data.error)
+                console.error(response.data)
+              }
+            }
+          });
+          this.$nextTick(()=>{
+            this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+            this.$refs.messageChart.setLegend(this.legend)
+            this.$refs.messageChart.setSeries(this.chartDatas);
+            this.$refs.messageChart.endLoading();
+          });
+        })
+      },
+      detail(obj) {
+        this.chartDatas = [];
+        this.legend = [];
+        this.graphShow = true;
+        this.$nextTick(() => {
+          this.$refs.messageChart.startLoading();
+          this.queryChartDate(obj);
+        });
+      },
+      dialogClose() {
+        this.graphShow = false;
+      },
+      del(u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("alert/message?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getAlertList();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
       getAlertList() {
         this.tableData = [];
         this.loading = true;
@@ -444,12 +585,33 @@
               this.tableData = response.data.list;
               this.tableData.forEach((item) => {
                 item.labels = JSON.parse(item.labels);
+                let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+                this.$get('/prom/api/v1/query' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")).then(response2 => {
+                  console.info(response2)
+                });
               });
               this.pageObj.total = response.data.total;
             }
           });
         }, 1000);
       },
+      promQueryParamConvert(obj) {
+        return "(" + obj.alertRule.expr + ") 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;
+        }() + ")";
+      },
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getAlertList();

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

@@ -120,7 +120,7 @@
               </div>
               <div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
                 <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i  class="el-icon-delete"></i></span>
               </div>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -476,8 +476,8 @@
           step='30m';
         }
         let axiosArr=[];
-        let queryParam = this.promQueryParamConvert(obj);
+        let paramStr = JSON.stringify(this.promQueryParamConvert(obj));
-        axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step));
+        axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")+"&start="+start+"&end="+end+"&step="+step));
         this.legend = [];
         this.chartDatas = [];
         axios.all(axiosArr).then(res =>{
@@ -486,7 +486,7 @@
             if (response.status == 200) {
               if(response.data.status == 'success'){
                 let queryData=response.data.data.result[0];
-                /*if(queryData){
+                if(queryData){
                   let chartData={
                     type:"line",
                     symbol:'none',  //去掉点
@@ -523,7 +523,7 @@
                     return [dpsItem[0] * 1000, Number(dpsItem[1])];
                   });
                   this.chartDatas.push(chartData);
-                }*/
+                }
               }else{
                 this.$message.error(response.data.error)
                 console.error(response.data)
@@ -576,7 +576,8 @@
             this.tableData = response.data.list;
             this.tableData.forEach((item) => {
               item.labels = JSON.parse(item.labels);
-              this.$get('/prom/api/v1/query', {query: this.promQueryParamConvert(item)}).then(response2 => {
+              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")).then(response2 => {
                 console.info(response2)
               });
             });
@@ -588,9 +589,11 @@
         return "(" + obj.alertRule.expr + ") and (" + function(){
           let q = "{";
           for (let k in obj.labels) {
-            q += k;
+            if (k != 'alertname' && k != 'severity') {
-            q += "=";
+              q += k;
-            q += ("'" + obj.labels[k] + "',");
+              q += "=";
+              q += ("'" + obj.labels[k] + "',");
+            }
           };
           if (q.length > 1) {
             q = q.substring(0, q.length-1);