NEZ-324 feat: endpoint-detail

nezha-fronted/src/components/charts/chart-detail.vue

@@ -149,7 +149,7 @@
                       <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
                     </div>
                     <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
+                      <template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
                       <template v-else-if="endpointKey[key]">
                         <span class="content-text">{{value ? value : "&nbsp;"}}</span>
                         <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
@@ -196,6 +196,7 @@
   import loading from "../common/loading";
   import timePicker from '../common/timePicker';
   import chartPreview from './chartPreview';
+  import echarts from 'echarts';
 
   export default {
     name: 'chartDetail',
@@ -400,11 +401,63 @@
         this.panelIdInner = panelId;
         this.data = chartItem;
         this.detail = detail;
+        if (this.detail[0] && this.detail[0].type && this.detail[0].type == "endpointInfo") { //endpointInfo的小图表
+          this.$nextTick(() => {
+            this.initChart(this.detail[0].data.stateSeries);
+          });
+        }
         this.$nextTick(() => {
           this.$refs.scrollbar.update();
         });
         this.endLoading();
       },
+      initChart(series) {
+        let vm = this;
+        let option = {
+          title:{
+            show: false,
+          },
+          tooltip: {
+            show: false
+          },
+          grid: {
+            left: 40
+          },
+          legend: {
+            show: false
+          },
+          xAxis: {
+            show: false,
+            type: 'time'
+          },
+          yAxis: {
+            type: 'value',
+            minInterval: 1,
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              formatter: function (value, index) {
+                if (value == 1) {
+                  return "up";
+                } else {
+                  return "down";
+                }
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          useUTC: false,//使用本地时间
+          series: series
+        };
+        let chart = echarts.init(document.querySelector("#littleChart"));
+        chart.setOption(option);//创建图表
+      }
     },
     mounted() {
       this.firstLoad = false;

nezha-fronted/src/components/charts/chart-list.vue

@@ -1133,14 +1133,6 @@
             // 将秒改为毫秒
             //alert('table=='+JSON.stringify(queryItem))
             seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-              /*曲线汇总暂不需要
-            if (sumData.data[dpsIndex]) {
-              const sumNum = sumData.data[dpsIndex][1] || 0;
-              sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-            } else {
-              sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-            }
-            */
               let t_date = new Date(dpsItem[0] * 1000);
               let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
               tableData.push({//表格数据
@@ -1203,12 +1195,13 @@
         let detail = [];
         this.$refs['editChart'+chartInfo.id][0].showLoad();
         chartInfo.title = this.$t("project.chart.endpointInfo");
+
         let basicInfo = JSON.parse(JSON.stringify(this.detail));
         let basicInfoReq = new Promise((resolve, reject) => {
           let now = new Date();
-          let startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let startTime = bus.timeFormate(new Date(now).setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-          let step = bus.getStep(startTime,endTime);
+          let step = bus.getStep(startTime, endTime);
           this.$nextTick(() => {
             let query = chartInfo.elements[0].expression;
             this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => {
@@ -1233,192 +1226,16 @@
                       return [dpsItem[0] * 1000, dpsItem[1]];
                     });
                   });
+                  basicInfo.stateSeries = [series];
+                  basicInfo.state = "";
+                  detail.push({title: this.$t("project.chart.basicTitle"), data: basicInfo, type: "endpointInfo"});
+                  resolve(true);
                 }
               }
             });
-            // 一个图表的所有element单独获取数据
-            /*axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = [];
-                let singleStatRlt = '';
-                const legend = [];
-                const tableData = [];
-                const sumData = {
-                  name: 'sum',
-                  data: [],
-                  visible: true,
-                  threshold: null,
-                };
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    this.isError = false;
-                    this.errorContent = "";
-                    if (response.data.result) {
-                      if(chartItem.type==='singleStat'){
-                        if(response.data.result.length===1){
-                          let statistics = chartItem.param.statistics;
-                          if(response.data.result[0].values){
-                            singleStatRlt  = bus.getSingleStatRlt(statistics,response.data.result[0].values);
-                            this.noData=false
-                          }else{
-                            this.noData=true;
-                          }
-                        }else if(response.data.result.length > 1){
-                          this.noData=true;
-                          singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
-                        }
-                      }else {
-                        // 循环处理每个elements下获取的数据列
-                        response.data.result.forEach((queryItem, resInnerPos) => {
-                          const seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle',  //去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2,  //曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              type: chartItem.type,
-                              lineStyle: {
-                                width: 1,
-                                opacity: 0.9
-                              },
-                            },
-                            metric_name: '',
-                          };
-                          if (chartItem.type === 'stackArea') {
-                            seriesItem.theData.type = 'line';
-                            seriesItem.theData.stack = chartItem.title;
-                            seriesItem.theData.areaStyle = {"opacity": 0.3};
-                          }
-                          if (chartItem.type === "endpointInfo") {
-                            seriesItem.theData.type = 'line';
-                          }
-                          // 图表中每条线的名字,后半部分
-                          let host = '';//up,
-                          if (queryItem.metric.__name__) {
-                            host = `${queryItem.metric.__name__}{`;//up,
-                          }
-                          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`;
-                              }
-                            });
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1);
-                            }
-                            if (queryItem.metric.__name__) {
-                              host += "}";
-                            }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression;
-                            }
-                            //处理legend别名
-                            let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                            if (!alias || alias === '') {
-                              alias = host;
-                            }
-                            legend.push({name: host + resInnerPos, alias: alias});
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                            seriesItem.theData.name = host + resInnerPos;
-                            seriesItem.metric_name = seriesItem.theData.name;
-                            // 将秒改为毫秒
-                            //alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                              let t_date = new Date(dpsItem[0] * 1000);
-                              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                              tableData.push({//表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: {element: host, alias: alias},
-                                time: timeTmp,//采集时间
-                                value: dpsItem[1],//数值
-                              });
-                              return [dpsItem[0] * 1000, dpsItem[1]];
-                            });
-                            series.push(seriesItem.theData);
-
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /!*
-                            const currentInfo = chartItem.elements[innerPos];
-                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                            this.$message.warning({
-                              duration: 15,
-                              content: errorMsg,
-                              closable: true,
-                            });
-                            *!/
-                          }
-                        });
-                      }
-                    }
-                  }else{
-                    this.isError = true;
-                    if(response.msg){
-                      this.errorContent = response.msg;
-                    }else if(response.error){
-                      this.errorContent = response.error;
-                    }else {
-                      this.errorContent = response;
-                    }
-                  }
-                });
-                //if(this.$refs.editChart&&this.$refs.editChart[index]) {
-                if (chartItem.type === 'table') {//表格
-                  this.setTableData(tableData);
-                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == "endpoint") {
-                  if (series.length && chartItem.type === 4) {//曲线汇总
-                  }
-                  if(series.length<1){
-                    this.noData=true;
-                  }else{
-                    this.noData=false;
-                  }
-                  let _chartItem = JSON.parse(JSON.stringify(chartItem));
-                  if (chartItem.from == "endpoint") {
-                    _chartItem.type = "line";
-                  }
-                  this.setData(_chartItem, series, legend);
-                }else if(chartItem.type ==='singleStat'){
-                  if(Number(singleStatRlt)){
-                    let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
-                    this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-                  }else {
-                    this.serieSingleStat =singleStatRlt;
-                  }
-                  this.$refs.loadingPreview.endLoading();
-                }
-                //}
-              } else {
-                const type = chartItem.type;
-                //if(this.$refs.editChart[index]) {
-                if (type === 'table') {
-                  this.setTableData([]);
-                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
-                  this.setData(chartItem, []);
-                }else if(chartItem.type ==='singleStat'){
-                  this.serieSingleStat = "";
-                  this.$refs.loadingPreview.endLoading();
-                }
-                //}
-              }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString());
-                console.error(error)
-              }
-            });*/
           });
         });
 
-
-        detail.push({title: this.$t("project.chart.basicTitle"), data: this.detail});
         let endpointId = this.additionalInfo.id;
         let alertMsg = new Promise((resolve, reject) => {
           this.$get('/alert/message?endpointId=' + endpointId).then(response => {
@@ -1445,10 +1262,8 @@
             }
           });
         });
-        alertMsg.then(result => {
+        Promise.all([basicInfoReq, alertMsg]).then(resolves => {
           this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
-        }, err => {
-
         });
       },
       getAssetInfoChartData(chartInfo){

nezha-fronted/src/components/charts/chartPreview.vue

@@ -850,7 +850,7 @@
             // boundaryGap: false,//line-false; bar-true;
             //data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
             axisLabel: {
-              intervale: 0,
+              interval: 0,
               rotate: 0,
               formatter: function (value) {
                 value = bus.computeTimezone(value);