Merge remote-tracking branch 'origin/codeCheck' into codeCheck

# Conflicts:
#	nezha-fronted/src/components/charts/chart-list.vue

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

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
         <loading  :ref="'localLoading'+chartIndex"></loading>
       <!--
         <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -30,7 +30,7 @@
                 <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" v-show="!isPreview&&firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{data.title}}</span>
@@ -51,9 +51,9 @@
           </el-dropdown>
 
         </div>
-        <div class="mt-10 table-container" v-cloak  v-show="firstShow">
+        <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
           <transition name="el-zoom-in-bottom">
-            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" style="top:10px">
+            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
               <i style="cursor: pointer" class="el-icon-delete"></i>
             </div>
           </transition>
@@ -133,9 +133,9 @@
                 <template v-else>-</template>
               </template>
             </el-table-column>
-            <el-table-column width="28" :resizable="false">
+            <el-table-column width="28" :resizable="false" v-if="!isPreview">
               <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear" >
                 <i class="nz-icon nz-icon-gear"></i>
               </span>
               </template>
@@ -268,6 +268,7 @@
                  :title="$t('overall.detail')"
                  :visible.sync="graphShow"
                  width="90%"
+                 :append-to-body="true"
                  id="viewGraphDialog"
                  @close="dialogClose">
         <div slot="title">
@@ -278,7 +279,7 @@
         </div>
         <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
       </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+      <span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
       <element-set
         path="/alertList"
         :table-title="tableTitle"
@@ -457,6 +458,7 @@ export default {
           chartDatas: [],
           chartUnit:5,
           deleteBox: {show: false, ids: "", remark: '', state: 2},
+          isPreview:false,
         };
     },
     created() {
@@ -633,7 +635,8 @@ export default {
           })
         }
       },
-        getAlertList: function (filterType) {
+        getAlertList: function (filterType,isPreview=false) {
+          this.isPreview = isPreview;
           let queryParam={
             pageSize:this.pageObj.pageSize,
             pageNo:this.pageObj.pageNo,
@@ -1042,64 +1045,7 @@ export default {
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-          if(errorMsg && errorMsg!==''){
-            this.isError = true;
-            this.errorContent = errorMsg;
-          }else {
-            this.isError = false;
-            this.errorContent = '';
-          }
-            if(area==='showFullScreen'){//全屏按时间查询
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-              this.searchTime[1] = filter.end_time;
-              // this.seriesItemScreen = seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
-              this.endLoading('screen');
-            }else{
-              //设置高度 chart-table
-              this.$nextTick(() => {
-                const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
-                let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-                if(height<this.minHeight){
-                  height = this.minHeight;
-                }
-                chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-                const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-                tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
-              });
-              this.divFirstShow = true;
 
-              this.firstShow = true; // 展示操作按键
-
-              this.panelIdInner = panelId;
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              // this.seriesItem = seriesItem;
-              // this.seriesItemScreen = seriesItem;
-              this.storedTableData =seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedTableData=Object.assign([],this.storedTableData.reverse());
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.pageObj.total=this.storedTableData.length;
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
-              this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-              if (filter) { // 保存数据,用于同步时间
-                this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-                this.searchTime[1] = filter.end_time;
-                this.oldSearchTime[0] = this.searchTime[0];
-                this.oldSearchTime[1] = this.searchTime[1];
-              }
-
-              this.endLoading();
-              //this.showTable = true;
-              //this.tableLoading = false;
-            }
         },
 
     },

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

@@ -1192,14 +1192,18 @@
 
           this.currentRecordNum = this.currentRecordNum+1;
           let chartData = this.chartDataCacheGroup.get(chart.id);
-          console.log("__chartItem00__",JSON.stringify(chartData))
+          // console.log("__chartItem00__",JSON.stringify(chartData))
-
+          let duplicateChartData ={};
-          let duplicateChartData = JSON.parse(JSON.stringify(chartData));
+          try{
+            duplicateChartData = JSON.parse(JSON.stringify(chartData));
+          }catch (e) {
+            console.warn(e);
+          }
           duplicateChartData.chartItem = duplicateChart;
           this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
           this.$nextTick(() => {
             if (this.$refs['editChart'+duplicateChartId][0]) {
-              this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
+                this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
             }
 
             let chartType = duplicateChart.type;

nezha-fronted/src/components/charts/chart-url.scss

@@ -133,7 +133,7 @@
       cursor: pointer;
       padding: 5px 15px;
       border-right: 1px solid #ccc;
-      
+
     }
     .set-icon:hover{
       background: $btn-light-background-color-hover;
@@ -192,4 +192,15 @@
     border-top: 1px solid #dfe7f2;
     margin-top:-25px;
   }
+  .center-content{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    margin: auto;
+    text-align: center;
+  }
 }

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

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
         <loading  :ref="'localLoading'+chartIndex"></loading>
 
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
@@ -34,19 +34,24 @@
 
         </div>
         <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
-            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
+            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
                     style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
         </div>
+      <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+        <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
+      </div>
         <!--全屏-->
           <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
             </div>
-            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
+            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                     style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
-
+            <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+              <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
+            </div>
             <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       <span class="vue-resizable-handle" @mousedown="dragResize"></span>
@@ -97,6 +102,7 @@ export default {
             titleHeight:38,//title-height:28,magrin-bottom:10
             paddingBottom:6,
             divFirstShow:false,
+            showStatic:false,
         };
     },
     created() {
@@ -105,6 +111,7 @@ export default {
     watch: {},
     methods: {
       showLoad(chartItem) {
+        console.log(chartItem)
         this.data = chartItem;
         this.panelIdInner = this.panelId;
         //设置高度
@@ -119,14 +126,29 @@ export default {
           urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
         });
         this.startLoading();
-        this.setLoadFrame();
+
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContent();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrame();
+        }
         this.divFirstShow = true;
       },
+      setStaticContent:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainer'+this.chartIndex);
+          staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+          that.firstShow = true;
+          that.endLoading();
+        });
+      },
       setLoadFrame(){
         let that = this;
         this.$nextTick(() => {
           let iframe = document.querySelector('#urlContainer'+this.chartIndex);
-
           // 处理兼容行问题
           if (iframe.attachEvent) {
             iframe.attachEvent('onload', function () {
@@ -143,14 +165,19 @@ export default {
               that.endLoading();
             }
           }
-
           iframe.src = that.data.param.url;
         });
       },
       initDialog(){
         this.startLoading('screen');
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContentFull();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrameFull();
+        }
 
-        this.setLoadFrameFull();
       },
       dragResize:function(e){
         var diffWidth =20; //界面的宽度空白的地方的宽度
@@ -389,6 +416,15 @@ export default {
           iframe.src = this.data.param.url;
         });
       },
+      setStaticContentFull:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainerFull'+this.chartIndex);
+          staticDiv.innerHTML=`<span>${that.data.param.url}</span><span>${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</span>`
+          that.firstShow = true;
+          that.endLoading('screen');
+        });
+      },
     },
     mounted() {
         this.firstLoad = false;
@@ -398,3 +434,13 @@ export default {
     },
 };
 </script>
+<style>
+  .center-content .content-static-url{
+    font-weight: bold;
+    font-size: 24px;
+  }
+  .center-content .content-static-tip{
+    font-size: 18px;
+    color: lightgrey;
+  }
+</style>

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

@@ -128,6 +128,10 @@
         </div>
       </template>
 
+      <template v-if="chart.type === 'alertList'">
+        <chart-alert-list ref="alertListChart"></chart-alert-list>
+      </template>
+
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
 </template>
@@ -139,12 +143,14 @@
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
   import timePicker from '../common/timePicker'
+  import chartAlertList from './chart-alert-list'
 
   export default {
     name: 'chartPreview',
     components: {
       'loading': loading,
-      'time-picker':timePicker
+      'time-picker':timePicker,
+      'chart-alert-list':chartAlertList,
     },
     props: {
       panelId:Number,
@@ -320,9 +326,17 @@
           this.dailogWidth = `${containerWidth*(size / 12)}px`;
         });
       },
+      getAlertListChartData:function(chartInfo,filterType){
+        this.$refs.alertListChart.getAlertList(filterType,true);
+        this.$refs.loadingPreview.endLoading();
+      },
       // 获取一个图表具体数据
       getChartData() {
         const chartItem = this.chart;
+        if(chartItem.type === 'alertList'){
+          this.getAlertListChartData(chartItem,null);
+          return;
+        }
         const len = chartItem.elements.length;
         // 没有数据的设置提示信息暂无数据-针对每一个图
         if (len === 0) {

nezha-fronted/src/components/common/language/cn.js

@@ -131,7 +131,8 @@ const cn = {
             label: "面积图"
           },
           url: {
-            label: "URL"
+            label: "URL",
+            staticTip:'双大括号中的内容将会在asset页面被替换',
           },
           singleStat:{
             label:"SingleStat"

nezha-fronted/src/components/common/language/en.js

@@ -142,7 +142,8 @@ const en = {
             label:"Stack Area"
           },
           url:{
-            label:"URL"
+            label:"URL",
+            staticTip:'The content in the double curly braces will be replaced on the Asset page',
           },
           singleStat:{
             label:"SingleStat"

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -949,6 +949,8 @@
         }else{
           if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
             this.chart.param.threshold=data.param.threshold;
+          }else{
+            this.chart.param.threshold='';
           }
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
@@ -982,6 +984,8 @@
         this.chart.span = 12;
         this.chart.height = 400+'';
         this.chart.unit=2;
+        this.chart.param.url='';
+        this.chart.param.threshold='';
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];