From bc90a4fdaa15b51f0fa37bd9addb289dcdc09644 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 10 May 2021 19:47:29 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-604=20fix:=20alert-message=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel2.vue   |  6 ++--
 .../bottomBox/tabs/alertMessageTabNew.vue     | 36 ++++++++++++++++---
 .../common/table/alert/alertMessageTable.vue  |  6 ++--
 .../components/page/alert/alertMessage.vue    | 17 ++++++---
 4 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
index 711687920..8014f41bb 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']" :style="{top:that.position.top+'px',left:that.position.left+'px','--mt': that.position.mt+'px',}" ref="alertLabels">
+  <div ref="alertLabels" :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']" :style="{top:that.position.top,left:that.position.left,'--mt': that.position.mt+'px',}">
     <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
@@ -204,12 +204,12 @@ export default {
         const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
         if (position.top + elHeight > clientHeight) {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + 120}px`,
             top: `${position.top - elHeight - 20}px`
           }
         } else {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + 120}px`,
             top: `${position.top - 20}px`
           }
         }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index 750f4d6cd..c06d514e9 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -32,32 +32,49 @@
           @selectionChange="selectionChange"
           @showBottomBox="(target, item) => { $refs.dataList.showBottomBox(target, item) }"
           @toDelete="toDeleteMessage"
+          @messageDetail="messageDetail"
         ></alertMessageTable>
       </template>
       <template v-slot:pagination>
         <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
     </nz-bottom-data-list>
+    <el-dialog id="viewGraphDialog"
+               :modal-append-to-body='false'
+               :title="$t('overall.detail')"
+               :visible.sync="graphShow"
+               class="line-chart-block-modal nz-dialog endpoint-dialog"
+               width="90%"
+               @close="dialogClose">
+      <div slot="title">
+        {{$t("project.endpoint.dialogTitle")}}
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+          <pick-time v-model="searchTime" :refresh-data-func="queryChartDate" :use-chart-unit="false" :use-refresh="false" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
+        </div>
+      </div>
+      <chart ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getTime } from '@/components/common/js/tools'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
+import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
-// import {getTime} from "@/components/common/js/tools";
-// import chartDataFormat from "@/components/charts/chartDataFormat";
 
 export default {
   name: 'alertMessageTab',
   mixins: [dataListMixin, subDataListMixin],
   components: {
     nzBottomDataList,
-    alertMessageTable
+    alertMessageTable,
+    chart
   },
   props: {
     from: String
@@ -161,8 +178,10 @@ export default {
     },
     queryChartDate () {
       const $temp = this
-      const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
+      // const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
+      // const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
+      const start = this.currentMsg.startAt
+      const end = this.currentMsg.endAt
       this.searchTime = [start, end]
       const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
       let step = '15s'
@@ -387,6 +406,13 @@ export default {
       }
       this.deleteBox.show = true
     },
+    messageDetail (row) {
+      this.currentMsg = { ...row }
+      this.graphShow = true
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
     deleteMessage () {
       this.$refs.remarkForm.validate(valid => {
         if (valid) {
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 697d6ee3c..fa8a6fd82 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -128,7 +128,7 @@ import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
 import chartDataFormat from '../../../charts/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
-import alertLabel from '../../alert/alertLabel'
+import alertLabel from '../../alert/alertLabel2'
 import { calcDurationByStringTimeB } from '../../js/tools'
 export default {
   name: 'alertMessageTable',
@@ -260,9 +260,9 @@ export default {
           delete labels[key]
         }
       }
-      Object.keys(labels).sort().forEach(key => {
+      /* Object.keys(labels).sort().forEach(key => {
         result.push({ label: key, value: labels[key] })
-      })
+      }) */
       return result
     },
     chartUnitChange: function (unit) {
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 270a525f0..22e601463 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -106,12 +106,14 @@ import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import chartDataFormat from '@/components/charts/chartDataFormat'
+import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
 export default {
   name: 'alertList',
   components: {
     alertMessageTable,
     pickTime,
+    chart,
     nzDataList,
     deleteButton
   },
@@ -226,7 +228,10 @@ export default {
     },
     messageDetail (row) {
       this.currentMsg = { ...row }
-      this.queryChartDate()
+      this.graphShow = true
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
     },
     queryMessage (alertMessage) {
       if (!this.hasButton('alertMessage_view')) {
@@ -236,8 +241,10 @@ export default {
     },
     queryChartDate () {
       const $temp = this
-      const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
+      // const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
+      // const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
+      const start = this.currentMsg.startAt
+      const end = this.currentMsg.endAt
       this.searchTime = [start, end]
       const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
       let step = '15s'
@@ -260,8 +267,8 @@ export default {
         axios.all(axiosArr).then(res => {
           try {
             res.forEach((response, promIndex) => {
-              if (response.status == 200) {
-                if (response.data.status == 'success') {
+              if (response.status === 200) {
+                if (response.data.status === 'success') {
                   const queryData = response.data.data.result[0]
                   if (queryData) {
                     const chartData = {