From 160c3e12f244a799f27e15dd867c46c5205a83c3 Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Wed, 26 Aug 2020 11:28:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aproject=E9=A0=81=E9=9D=A2=20alertt?=
 =?UTF-8?q?able=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/project/addLine.vue |   1 +
 .../common/project/popData/alertTable.vue     | 659 ++++++++----------
 .../components/common/project/topology.vue    |   6 +-
 3 files changed, 304 insertions(+), 362 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 7954ae3fe..124115f0e 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -309,6 +309,7 @@
     height: 100vh;
     top: 0;
     left: 0;
+    z-index: 11;
   }
   .color-content{
     height: 0;
diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index 4b806fc6c..8731c6b73 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mc" @click.self="clickOutside">
-    <div class="right-box right-box-edit-endpoint">
+    <div class="right-box right-box-project-alert">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
@@ -11,154 +11,337 @@
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
-      <div class="right-box-title">Add Line</div>
+      <div class="right-box-title">alert List</div>
       <!-- end--标题-->
 
       <!-- begin--表格-->
       <el-scrollbar class="right-box-form-box">
-        12313212313
-      </el-scrollbar>
+        <el-table
+          class="nz-table tabelH100"
+          :data="tableData"
+          border
+          ref="alertListTable"
+          tooltip-effect="light"
+          :height="tableHeight"
+          v-scrollBar:el-table="'large'"
+          v-loading="loading"
+          :cell-class-name="labelsClassName"
+          @selection-change="selectChange"
+          style="width: 100%;height: 100%"
+          @sort-change="tableDataSort"
+          :id="projectId"
+        >
+          <!--<el-table-column-->
+            <!--:resizable="false"-->
+            <!--type="selection"-->
+            <!--width="38"-->
+            <!--align="center"-->
+          <!--&gt;-->
+          <!--</el-table-column>-->
+          <el-table-column
+            :resizable="false"
+            v-for="(item, index) in tableTitle"
+            v-if="item.show"
+            :width="item.width"
+            :minWidth="item.minWidth"
+            :key="`col-${index}`"
+            :label="item.label"
+            :show-overflow-tooltip="item.prop != 'labels'"
+            min-width="110px"
+            :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
+            :prop="$tableSet.propTitle(item.prop,'alertMessage')"
+            :sort-orders="['ascending', 'descending']"
+          >
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop == 'alertRule'">
+            <span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
+                    <el-tooltip
+                      :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
+                      effect="light">
+                      <alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
+                      <span>{{scope.row[item.prop].alertName}}</span>
+                    </el-tooltip>
+                  </span>
+                <template v-else>-</template>
+              </template>
+              <template v-else-if="item.prop == 'summary'">
+                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                <template v-else>-</template>
+              </template>
+              <template v-else-if="item.prop == 'description'">
+                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                <span v-else>-</span>
+              </template>
+              <span v-else-if="item.prop == 'severity'">
+                <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
+                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
+                <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
+              </span>
+              <template v-else-if="item.prop == 'labels'" class="labels">
+                <el-tooltip
+                  v-for="(item,i) in labelsSort(scope.row.labels)"
+                  :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
+                  effect="light"
+                  :disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"
+                  :key="item.label"
+                >
+                  <alertLabel
+                    v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"
+                    slot="content"
+                    :id="scope.row[item.label].id"
+                    :type="item.label"
+                    :labelLoading="scope.row[item.label].loading"
+                  ></alertLabel>
+                  <span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
+                     <nz-alert-tag
+                       :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
+                       :cursor-point="tagType(item.label) == 'info' ? false : true"
+                       :key="item.label"
+                       v-if="item.label != 'alertname' && item.label != 'severity'"
+                     >
+                       {{item.value}}
+                     </nz-alert-tag>
+              </span>
+                </el-tooltip>
+              </template>
+              <div v-else-if="item.prop == 'state'">
+                <span class="">
+                  {{scope.row['state'] == 1 ? "Pending" : ""}}
+                  {{scope.row['state'] == 2 ? "Expired" : ""}}
+                </span>
+              </div>
+              <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
+                <span v-if="!scope.row.current">-</span>
+                <el-popover v-else placement="right" trigger="hover">
+                  <div slot="reference">
+                    <span class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
+                    <span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
+                  </div>
+                  <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
+                </el-popover>
+              </div>
+              <div v-else-if="item.prop == 'option'" class="content-right-options">
+                <span :title="$t('overall.delete')" @click="toDeleteMessage(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>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
 
+          <!--<el-table-column width="28" :resizable="false">-->
+            <!--<template slot="header" slot-scope="scope">-->
+          <!--<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">-->
+            <!--<i class="nz-icon nz-icon-gear"></i>-->
+          <!--</span>-->
+            <!--</template>-->
+            <!--<template v-slot="scope">-->
+              <!--<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && tools.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>-->
+            <!--</template>-->
+          <!--</el-table-column>-->
+        </el-table>
+      </el-scrollbar>
       <!-- end--表格-->
 
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
+      <!--底部分頁-->
+      <div class="pagination-bottom">
+        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  var rz = {
-    methods: {
-      rz(e) {
-        resetZIndex(e);
-      }
-    }
-  };
+  import bus from '@/libs/bus';
+  import axios from 'axios';
+  import nzAlertTag from '@/components/page/alert/nzAlertTag';
+  import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
+  import alertLabel from '@/components/common/alert/alertLabel'
   export default {
-    name:"addLine",
+    name:"alertTable",
     props:{
       moduleId:{},
       projectId:{},
     },
-    components:{
-      'promql-input': promqlInput,
+    components: {
+      'nz-alert-tag': nzAlertTag,
+      'alertRuleInfo':alertRuleInfo,
+      'alertLabel':alertLabel,
     },
-    mixins: [rz],
     watch:{
-      lineData:{
-        handler(n){
-          this.form={
-            arrows:n.arrows,
-            color:n.color,
-            lineId:n.id,
+    },
+    computed: {
+      tagType() {
+        return (key) => {
+          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+            return "normal";
+          } else {
+            return "info";
           }
-        },
-        immediate: true,
-        deep: true,
+        }
+      },
+      tagValue() {
+        return (key, value) => {
+          if (key == 'type') {
+            if (value ==  1) {
+              value = this.$t("project.project.project");
+            } else if (value == 2) {
+              value = this.$t("module.module.module");
+            } else if (value == 3) {
+              value = this.$t("asset.asset");
+            }
+          }
+          return key + "：" + value;
+        }
       }
     },
     data(){
       return{
-        form:{
-          arrows:'',
-          label:'',
-          color:'#1e90ff',
-          lineName:'',
-          lineId:'',
-          width:'',
-          type:'',
-          roundness:'',
+        pageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
         },
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
+        tableTitle: [
+          {
+            label: this.$t("alert.alertName"),
+            prop: 'alertRule',
+            show: true,
+            width: 180
+          }, {
+            label: this.$t("alert.list.labels"),
+            prop: 'labels',
+            show: true,
+            NotSet:true,
+            minWidth:200
+          }, {
+            label: this.$t("alert.severity"),
+            prop: 'severity',
+            show: true,
+            width: 110,
+          }, {
+            label: this.$t('alert.summary'),
+            prop: 'summary',
+            show: true,
+            minWidth:200
+          },  {
+            label: this.$t('alert.list.state'),
+            prop: 'state',
+            show: true,
+            width: 100
+          }, {
+            label: this.$t("alert.startAt"),
+            prop: 'startAt',
+            show: true,
+            width: 150
+          },
         ],
-        unitOptions: chartDataFormat.unitOptions(),
-        promqlKeys:[],
-        expressions: [],
-        promqlCount:0,
-        elementIds:[],
-        legends:[],
-        name:[],
-        unit:[],
-        rules:{
-          arrows: [
-            { required: true, message: '', trigger: 'change' },
-          ],
-          lineName: [
-            { required: true, message: '', trigger: 'change' },
-          ],
-        }
+        tableData:[],
+        loading:false,
+        tableHeight:'100%',
+        searchLabel:{
+
+        },
+        deleteBox:{}
       }
     },
     mounted(){
-      this.addExpression();
+      this.getAlertList();
     },
     methods:{
-      onSubmit(){
-        this.$refs['form'].validate((valid) => {
-          if (valid) {
-            let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
-            model.width = parseInt(model.width) || 4;
-            model.smooth={
-              roundness:model.roundness,
-              type:model.type ,
-            };
-            model.expressions=[];
-            this.promqlKeys.forEach((item,index)=>{
-              model.expressions.push({
-                "name": this.name[index],
-                "unit": this.unit[index],
-                "metric": this.expressions[index],
-                "legend": this.legends[index],
-              })
+      getAlertList: function () {
+        this.loading=true;
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.$set(this.searchLabel, "moduleId", this.moduleId);
+        this.$get('alert/message', {...this.searchLabel}).then(response => {
+          this.loading=false;
+          if (response.code == 200) {
+            this.tableData = response.data.list;
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels);
             });
-            this.$emit('addLine',model);
+            this.deleteBox.ids='';
+            this.pageObj.total = response.data.total;
           }
         });
       },
-      expressionChange: function () {
-
-      },
-      addExpression() {
-        this.expressions.push('');
-        this.legends.push('');
-        this.name.push('');
-        this.unit.push('');
-        this.promqlKeys.push(getUUID());
-        this.elementIds.push("");
-        this.promqlCount++;
-      },
-      removeExpression(index) {
-        if (this.promqlCount > 1) {
-          this.expressions.splice(index, 1);
-          this.legends.splice(index, 1);
-          this.name.splice(index, 1);
-          this.unit.splice(index, 1);
-          this.promqlKeys.splice(index, 1);
-          this.elementIds.splice(index, 1);
-          this.promqlCount--;
-          this.$nextTick(() => {
-            this.expressions.forEach((ex, index) => {
-              if (ex) {
-                this.$refs[`promql-${index}`][0].metricChange(ex);
-              }
-            });
-          });
+      labelsSort:function(obj){
+        let buildIn=['asset','endpoint','module','project','datacenter']
+        let labels=JSON.parse(JSON.stringify(obj));
+        let result=[];
+        for(let key of buildIn){
+          if(key in labels){
+            result.push({label:key,value:labels[key]})
+            delete labels[key]
+          }
         }
+        Object.keys(labels).sort().forEach(key=>{
+          result.push({label:key,value:labels[key]})
+        });
+        return result;
+      },
+      labelsClassName(row) {
+        if (row.column.label == this.$t("alert.list.labels")) {
+          return "alert-message-list-labels";
+        } else {
+          return "";
+        }
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getAlertList();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getAlertList();
+      },
+      selectChange(s) {
+        let ids = [];
+        this.deleteBox.ids = "";
+        s.forEach(item => {
+          ids.push(item.id);
+        });
+        this.deleteBox.ids = ids.join(",");
+      },
+      // alertNmae鼠标划入
+      alertMessagehover(item,index){
+        item.loading=true;
+        this.$set(this.tableData,index,item);// 调用父组件
+      },
+      // label 鼠标划入
+      labelHover(item,index,type){
+        if(this.labelToolTipDis(type)){
+          return
+        }
+        item[type].loading=true;
+        this.$set(this.tableData,index,item);// 调用父组件
+      },
+      // label tooltip是否显示
+      labelToolTipDis(labelType){
+        switch(labelType){
+          case 'asset':
+          case 'module':
+          case 'project':
+            return false;
+          default: return true;
+        }
+      },
+      // Severity Label
+      returnSeverityLabel(key){
+        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
+      },
+      tableDataSort(item){
+        let orderBy='';
+        if(item.order==='ascending'){
+          orderBy=item.prop;
+        }
+        if(item.order==='descending'){
+          orderBy='-'+item.prop;
+        }
+        this.pageObj.orderBy=orderBy;
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getAlertList();
       },
       /*关闭弹框*/
       esc(refresh) {
@@ -167,267 +350,23 @@
       clickOutside() {
         this.esc(false);
       },
-      del(){
-        this.$emit('del');
-        this.esc();
-      },
-      colorPickerClick(){
-        this.$refs['colorPicker'].showPicker=true;
-      },
-      colorChange(val){
-        this.form.color=this.colorRGBtoHex(val)
-      },
-      colorRGBtoHex(color) {
-        let rgb = color.split(',');
-        let r = parseInt(rgb[0].split('(')[1]);
-        let g = parseInt(rgb[1]);
-        let b = parseInt(rgb[2].split(')')[0]);
-        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-        return hex;
-      }
-
     },
 
   }
 </script>
 
 <style scoped>
+  .right-box-project-alert{
+    width: 1220px;
+  }
   .mc{
     position: fixed;
     width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
-  }
-  .color-content{
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 140px;
-  }
-  .color{
-    position: relative;
-  }
-  .color-show{
-    border: 1px solid #E7EAED;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    width: calc(100% - 30px);
-  }
-  .color-show-left{
-    width: 18px;
-    height: 18px;
-    border: 1px solid #E7EAED;
-    border-radius: 5px;
-    margin: 0 5px;
-  }
-  .line-name{
-    width: calc(100% - 30px);
-  }
-  .form-title{
-    font-size: 14px;
-    color: #333333;
-    padding-left: 28px;
-    margin-bottom: 15px;
-  }
-  /deep/ .el-form-item__label{
-    font-size: 14px;
-    color: #666666;
-    opacity: 0.6;
-  }
-  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
-    border: 1px solid #DCDFE6;
-    height: 41px;
-    width: calc(100% - 30px);
-  }
-  .arrows /deep/ .el-input__inner{
-    display: none;
-  }
-  /deep/ .el-select{
-    width: 262px;
-  }
-  .nz-btn-edit-ok{
-    position: absolute;
-    bottom: 0;
-    right:0;
-  }
-  .nz-btn-edit-esc{
-    position: absolute;
-    bottom: 0;
-    left:0;
-  }
-
-  /* begin--搜索框*/
-  .endpoint-asset-search {
-    display: inline-block;
-    position: relative;
-    margin-top: -16px;
-  }
-  .endpoint-asset-search button {
-    height: 22px !important;
-  }
-  .endpoint-asset-search-dropdown {
-    position: absolute;
-    top: 25px;
-    background-color: #444;
-    border-radius: 4px;
-    width: 44px;
-    left: 0;
-  }
-  .endpoint-asset-search-dropdown-item {
-    text-align: center;
-    line-height: 22px;
-    height: 22px;
-    cursor: default;
-    color: white;
-    font-size: 12px;
-  }
-  .endpoint-asset-label-txt {
-    display: inline-block;
-    width: 19px;
-    text-align: center;
-  }
-  .endpoint-asset-search-dropdown-item:first-of-type {
-    border-radius: 4px 4px 0 0;
-  }
-  .endpoint-asset-search-dropdown-item:last-of-type {
-    border-radius: 0 0 4px 4px;
-  }
-  .endpoint-asset-search-dropdown-item:hover {
-    background-color: #222;
-    color: #ff9900;
-  }
-  .endpoint-asset-search-input {
-    display: inline-block;
-    width: 150px;
-    vertical-align: top;
-  }
-  /* end--搜索框*/
-
-  /* begin--table*/
-  .endpoint-sub-table {
-    padding-top: 30px;
-    height: 440px;
-  }
-  .line-100 {
-    margin-bottom: 3px;
-  }
-  .endpoint-sub-table-head {
-    line-height: 28px;
-    height: 30px;
-  }
-  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
-    line-height: 28px;
-    height: 30px;
-    color: #656565;
-  }
-  .endpoint-sub-table-row:hover {
-    background-color: #dadada;
-    cursor: default;
-  }
-  .endpoint-sub-table-row-active {
-    background-color: #dadada;
-  }
-  .endpoint-sub-table-row-selected {
-    background-color: #656565;
-    color: white;
-  }
-  .endpoint-sub-table-col {
-    display: inline-block;
-    width: calc(50% - 15px);
-    padding-left: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .endpoint-sub-table-paginate-all {
-    position: absolute;
-    left: 10px;
-    bottom: 17px;
-    color: #5a5a5a;
-  }
-  .endpoint-sub-table-body {
-    font-size: 15px;
-    position: relative;
-    overflow: auto;
-    height: calc(100% - 34px);
-  }
-  .endpoint-sub-table-body-dialog {
-    width: 100%;
-    height: 100%;
-    background-color: #e9ebec;
-    position: absolute;
-    opacity: 0.2;
-  }
-  .endpoints-clear-btn {
-    margin: 6px 0 0 7px;
+    z-index: 11;
   }
   /* end--table*/
 </style>
 
-<style lang="scss">
-  .right-box-edit-endpoint .el-pagination__total {
-    float: left;
-  }
-  right-box-edit-endpoint .pagination {
-    padding-top: 12px;
-    text-align: center;
-  }
-
-  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
-    font-size: 13px;
-    min-width: 20px !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: white !important;
-  }
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: #666;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pager li.number{
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pager li.number.active{
-    font-family: NotoSansSC-Regular;
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: $global-text-color-active;
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
-    height: 20px;
-    border-color: rgba(154,154,154,0.20);
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
-    border-color: rgba(154,154,154,0.20);
-  }
-</style>
-
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index a3283fb28..1b8cef9c5 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -107,11 +107,11 @@
     </transition>
     <!--endpoint-->
     <transition name="right-box">
-      <div v-if="popDataShow.asset">asset</div>
+      <div v-if="popDataShow.asset" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id">asset</div>
     </transition>
     <!--alert-->
     <transition name="right-box">
-      <div v-if="popDataShow.alert">alert</div>
+      <alertTable v-if="popDataShow.alert" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate">alert</alertTable>
     </transition>
   </div>
 </template>
@@ -123,10 +123,12 @@
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
   import TotalChart from "./popData/totalChart";
+  import alertTable from "./popData/alertTable";
 	export default {
 		name:"topology",
     components: {
       TotalChart,
+      alertTable,
       'add-model':addNode,
       'add-line':addLine,
       'popDataMain':popDataMain,