From 5beb5b60e28294369987ab1421a63cd126ae2245 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 5 Jun 2020 19:31:14 +0800
Subject: [PATCH] =?UTF-8?q?temp:=20alert-rule=E4=B8=B4=E6=97=B6=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=EF=BC=8C=E5=91=A8=E6=9C=AB=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      | 18 +++--
 .../src/components/charts/chart.scss          |  3 +
 .../components/common/bottomBox/bottomBox.vue |  2 +-
 .../common/bottomBox/tabs/alertMessageTab.vue |  2 +-
 .../common/bottomBox/tabs/panelTab.vue        | 67 +++++++++++--------
 .../src/components/page/alert/config.vue      |  2 +-
 6 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 90ae9fe57..f6acfdf78 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -50,11 +50,12 @@
                  ghostClass:'chart-ghost',
                  chosenClass:'choose-class',
                  scroll:true,
+                 filter: '.drag-disabled',
                  scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
                  animation:150,
-                 handle:'.chartTitle',
+                 handle:'.chartTitle'
                }"  >
-      <div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title">
+      <div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable}">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
                           :ref="'editChart'+item.id"
                           @on-refresh-data="refreshChart"
@@ -150,7 +151,8 @@
     name: 'chartList',
     props: {
       isModel: {type: Boolean, default: false},
-      additionalInfo:{}
+      additionalInfo:{},
+      draggable: {type: Boolean, default: true}
     },
     components: {
       chartAlertList,
@@ -319,19 +321,14 @@
         let chartTitle = item.querySelector('.chartTitle');
         chartTitle.style.background = '';
       },
-      move (event, orgin) {
-        //console.log('move', event, orgin);
+      move(event, orgin) {
         let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-        //console.log('move---class', dragClass);
-        //dragClass.style.opacity = 1;
-        //dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
 
         let chartTitle = dragClass.querySelector('.chartTitle');
-        //console.log('move-title',chartTitle);
         chartTitle.style.background = '#d8dce1';
 
       },
-      choose(event ){
+      choose(event){
         console.log('choose', event);
         let chartTitle = event.item.querySelector('.chartTitle');
       },
@@ -529,6 +526,7 @@
       },
       // 获取panel详情数据,获取panel下所有chart列表
       getData(params) {
+        console.info(params)
         //param   目前没有用
         const param = {
           panelId: params.panelId,
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 4348e3d9f..8394bcc2e 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -164,6 +164,9 @@
   border: 1px solid #b7d0f7;
   box-shadow: 1px 1px 1px #d3e1f8;
 }
+.drag-disabled .el-dropdown-link {
+  cursor: default !important;
+}
 .resize-box {
   .pagination {
     padding-top: 0;
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index baaeeb685..bb496aaa8 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -39,7 +39,7 @@
       </template>
 
       <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
+      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
                  @changeTab="changeTab" :targetTab.sync="targetTab"></panel-tab>
 
     </div>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 8aca9897c..860498163 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -6,7 +6,7 @@
           <template v-if="from == 'asset'">{{obj.host}}</template>
           <template v-if="from == 'alertRule'">{{obj.alertName}}</template>
         </div><div
-        class="sub-list-tab" @click="changeTab(from == 'asset' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab(from == 'asset' || from == 'alertRule' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
         class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
         class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
       </div>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index f89e2c9af..576c12ad2 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -6,22 +6,26 @@
         <div class="sub-list-tab-title">
           <template v-if="from == 'model'">{{obj.name}}</template>
           <template v-else-if="from == 'asset'">{{obj.host}}</template>
+          <template v-else-if="from == 'alertRule'">{{obj.alertName}}</template>
         </div><div class="sub-list-tab sub-list-tab-active" v-if="from == 'model'">{{$t("dashboard.panel.title")}}</div><template v-if="from == 'asset'"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
           class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
+        </template><template v-if="from == 'alertRule'"><div
+          class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
+          class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
         </template>
       </div>
       <div class="top-tool-right">
-        <div class="top-tool-search margin-r-20">
+        <div class="top-tool-search margin-r-20" v-if="from != 'alertRule'">
           <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
             <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
           </el-input>
         </div>
-        <div class="panel-calendar margin-r-20" v-if="from != 'model'">
+        <div class="panel-calendar margin-r-20" v-if="from == 'asset'">
           <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange" style="height: 26px; margin-top: -1px;"></time-picker>
         </div>
-        <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from != 'model'">
+        <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from == 'asset'">
           <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
             <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
@@ -39,7 +43,7 @@
             </button>
           </el-popover>
         </div>
-        <button @click="toAddChart" :title="$t('overall.createChart')"
+        <button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -95,7 +99,7 @@
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
+          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable"
                       ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
         </div>
       </el-scrollbar>
@@ -116,7 +120,8 @@
     name: "panel",
     props: {
       from: String,
-      obj: Object
+      obj: Object,
+      draggable: {type: Boolean, default: true}
     },
     data() {
       return {
@@ -316,31 +321,35 @@
       /*时间条件查询--end*/
       //公用操作
       getTableData(linkId) {
-        this.$get('panel', {type: this.from, link: linkId}).then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list;
-            if (this.panelData.length > 0) {
-              this.panelId = this.filter.panelId = this.panelData[0].id;
-              this.getData(this.filter);
-            }
-          }else {
-            if(response.msg){
-              console.error(response.msg);
-              this.$message.error(response.msg);
-            }else if(response.error){
-              console.error(response.error);
-              this.$message.error(response.error);
+        if (this.from == "alertRule") {
+
+        } else {
+          this.$get('panel', {type: this.from, link: linkId}).then(response => {
+            if (response.code === 200) {
+              this.panelData = response.data.list;
+              if (this.panelData.length > 0) {
+                this.panelId = this.filter.panelId = this.panelData[0].id;
+                this.getData(this.filter);
+              }
             }else {
-              console.error(response);
-              this.$message.error(response);
+              if(response.msg){
+                console.error(response.msg);
+                this.$message.error(response.msg);
+              }else if(response.error){
+                console.error(response.error);
+                this.$message.error(response.error);
+              }else {
+                console.error(response);
+                this.$message.error(response);
+              }
             }
-          }
-        }).catch((error) => {
-          if (error) {
-            console.error(error);
-            this.$message.error(error.toString());
-          }
-        });
+          }).catch((error) => {
+            if (error) {
+              console.error(error);
+              this.$message.error(error.toString());
+            }
+          });
+        }
       },
       //定期刷新
       selectInterval(val) {
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index c4f44f8bc..0cbd54b29 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -374,7 +374,7 @@
       },
       detail: function (u) {
         this.alertRuleForMessage = Object.assign({}, u);
-        this.targetTab = "detail";
+        this.targetTab = "panel";
         this.showSubList = true;
       },
       messageStyle(e) {