From 13b0454d0041a8bccf63d74893218d941cc07bf4 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 21 May 2021 19:28:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dalertmsg=E7=9A=84rule?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertRuleInfo.vue |   59 +-
 .../components/common/rightBox/moduleBox.vue  |  447 ++++---
 .../components/common/rightBox/projectBox.vue |   23 +-
 .../common/table/alert/alertMessageTable.vue  |   38 +-
 .../layout/path_navigation/PathNavigation.vue | 1098 -----------------
 5 files changed, 266 insertions(+), 1399 deletions(-)
 delete mode 100644 nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue

diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index cfe028520..869d94f43 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -3,19 +3,24 @@
     <div class="alert-rule-info" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
-        <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
-      </div>
-      <!--<div class="alert-rule-box">-->
-      <!--<div class="alert-rule-title">ID</div>-->
-      <!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
-      <!--</div>-->
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">Expression</div>
-        <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
+        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div>
       </div>
       <div class="alert-rule-box">
-        <div class="alert-rule-title">Level</div>
-        <div class="alert-rule-value severity">
+        <div class="alert-rule-title">{{$t('alert.alertName')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.severity')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
+<!--        <div class="alert-rule-value severity">
           <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
             {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
           </span>
@@ -25,7 +30,7 @@
           <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
             {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
           </span>
-        </div>
+        </div>-->
       </div>
     </div>
   </div>
@@ -38,23 +43,9 @@ export default {
   props: {
     id: {},
     messageLoad: {},
-    that: {}
+    that: {},
+    severityData: Array
   },
-  /* watch:{
-      messageLoad:{
-        handler:function(){
-          this.$get('/alert/rule?id='+this.id).then((res)=>{
-            if(res.msg==='success'){
-              this.loading=false;
-              this.alertRuleData=res.data.list[0];
-            } else{
-              this.$message.error(res.msg);
-            }
-          })
-        },
-        deep:true
-      }
-    }, */
   data () {
     return {
       loading: true,
@@ -72,12 +63,12 @@ export default {
         if (position.top + elHeight > clientHeight) {
           return {
             left: `${position.left + position.width + 20}px`,
-            top: `${position.top - elHeight - 20}px`
+            top: `${position.top - elHeight - 80}px`
           }
         } else {
           return {
             left: `${position.left + position.width + 20}px`,
-            top: `${position.top - 20}px`
+            top: `${position.top - 80}px`
           }
         }
       }
@@ -105,10 +96,10 @@ export default {
     }
   },
   mounted () {
-    this.$get('/alert/rule?id=' + this.id).then((res) => {
+    this.$get('/alert/rule/' + this.id).then((res) => {
       if (res.msg === 'success') {
         this.loading = false
-        this.alertRuleData = res.data.list[0]
+        this.alertRuleData = res.data
       } else {
         this.$message.error(res.msg)
       }
@@ -139,7 +130,7 @@ export default {
     border-style: dashed solid dashed dashed;
     border-color: transparent #fff transparent transparent;
     position: absolute;
-    top: 20px;
+    top: 100px;
     left: 0;
     transform: translate(-100%, -50%);
   }
@@ -163,7 +154,7 @@ export default {
     border-style: dashed solid dashed dashed;
     border-color: transparent #fff transparent transparent;
     position: absolute;
-    bottom: 20px;
+    bottom: 95px;
     left: 0;
     transform: translate(-100%, -50%);
   }
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 6e56aee86..00e1a6758 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-module" v-clickoutside="{obj:editModule,func:clickOutside}">
     <div class="right-box__header">
       <!-- begin--标题-->
-      <div class="right-box-title">{{editModule.id ? $t("project.module.editModule") : $t("project.module.createModule")}}</div>
+      <div class="header__title">{{editModule.id ? $t("project.module.editModule") : $t("project.module.createModule")}}</div>
       <!-- end--标题-->
       <div class="header__operation">
         <span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
@@ -10,250 +10,237 @@
     </div>
 
     <!-- begin--表单-->
-    <div class="right-box-form-box right-box__container" ref="scrollbar">
-      <el-form class="right-box-form right-box-form-left" :model="editModule" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm">
-        <!--name-->
-        <el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="125px">
-          <el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small" id="module-box-input-name"></el-input>
-        </el-form-item>
-        <!--project-->
-        <el-form-item :label='$t("project.project.projectName")' prop="projectId">
-          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.projectId" placeholder="" size="small" id="module-box-input-project" :disabled="!!editModule.id">
-            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <!--remark-->
-        <el-form-item :label='$t("project.module.description")' prop="remark">
-          <el-input
-            type="textarea"
-            placeholder=""
-            maxlength="1024"
-            v-model="editModule.remark"
-            size="small"
-            :autosize="{ minRows: 1, maxRows: 6}"
-            class="not-fixed-height no-resize"
-            id="module-box-input-remark"></el-input>
-        </el-form-item>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="moduleForm" :model="editModule" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label='$t("project.module.moduleName")' label-width="125px" prop="name">
+            <el-input id="module-box-input-name" v-model="editModule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+          </el-form-item>
+          <!--project-->
+          <el-form-item :label='$t("project.project.projectName")' prop="projectId">
+            <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <!--remark-->
+          <el-form-item :label='$t("project.module.description")' prop="remark">
+            <el-input
+              id="module-box-input-remark"
+              v-model="editModule.remark"
+              :autosize="{ minRows: 1, maxRows: 6}"
+              class="not-fixed-height no-resize"
+              maxlength="1024"
+              placeholder=""
+              size="small"
+              type="textarea"></el-input>
+          </el-form-item>
 
-        <!--type-->
-        <el-form-item :label='$t("project.endpoint.type")' prop="type">
-          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.type" placeholder="" size="small" id="module-box-input-type" @change="changeAuthType" :disabled="!!editModule.id">
-            <el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
+          <!--type-->
+          <el-form-item :label='$t("project.endpoint.type")' prop="type">
+            <el-select id="module-box-input-type" v-model="editModule.type" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+              <el-option v-for="item in typetList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
 
-        <!-- snmp表单 -->
-        <span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
-          <div class="right-box-sub-title">SNMP settings
+          <!-- snmp表单 -->
+          <span v-if="editModule.type && editModule.type == 'snmp'" class="snmp-form">
+            <div class="right-box-sub-title">SNMP settings</div>
+            <div class="right-box-line"></div>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item prop="walk">
+                  <select-walk ref="selectWalk" :currentWalk="editModule.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
+                    <template v-slot:trigger>
+                      <div class="el-cascader">
+                        <div class="el-input">
+                          <input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text">
+                        </div>
+                        <div class="el-cascader__tags">
+                          <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
+                            <span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
+                              <span v-html="mibName(item)"></span>
+                              <div class="walk-close-box" @click.stop="removeWalk(item)">
+                                <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
+                              </div>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </select-walk>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <!--credentials-->
+          <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
+            <el-select id="module-box-input-credentials" v-model="editModule.configs.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          </span>
+
+          <!-- ChartTemplate  -->
+          <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
+            <v-selectpage
+              v-model="editModule.chartIds"
+              :data="'visual/panel/chart'"
+              :language="language"
+              :multiple="true"
+              :params="{
+                varType: 2, panelId: 0,
+                returnChildren:0,groupId:0,
+              }"
+              :result-format="resultFormat"
+              :tb-columns="ChartSearchShowFields"
+              class="form-control"
+              key-field="id"
+              show-field="name"
+              title="ChartSearch"
+              @values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
+            ></v-selectpage>
+          </el-form-item>
+          <!--Enpoint template-->
+          <div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
+            <el-tooltip effect="light" placement="top">
+              <div slot="content">
+                {{$t('project.module.tip.defaultEndpointSet')}}
+                <div></div>
+                {{$t('project.module.tip.relation')}}
+              </div>
+              <i class="nz-icon nz-icon-info-normal"></i>
+            </el-tooltip>
           </div>
           <div class="right-box-line"></div>
 
-          <el-row>
-            <el-col :span="6">
-              <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item prop="walk">
-                <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editModule.walk">
-                  <template v-slot:trigger>
-                    <div class="el-cascader">
-                      <div class="el-input">
-                        <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
-                      </div>
-                      <div class="el-cascader__tags">
-                        <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
-                          <span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
-                            <span v-html="mibName(item)"></span>
-                            <div class="walk-close-box" @click.stop="removeWalk(item)">
-                              <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
-                            </div>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </select-walk>
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="Basic" name="Basic">
+              <!--path-->
+              <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
+                <el-input id="module-box-input-path" v-model="editModule.configs.metrics_path" placeholder="" size="small"></el-input>
               </el-form-item>
-            </el-col>
-          </el-row>
-          <!--credentials-->
-        <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.configs.snmpCredentialsId" placeholder="" size="small" id="module-box-input-credentials">
-            <el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        </span>
+              <!--port-->
+              <el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="port">
+                <el-input id="module-box-input-port" v-model.number="editModule.port" placeholder="" size="small"></el-input>
+              </el-form-item>
+              <!--host-->
+              <el-form-item :label='$t("project.endpoint.host")' prop="host">
+                <el-input id="module-box-input-host" v-model="editModule.configs.host" placeholder="" size="small"></el-input>
+              </el-form-item>
+              <transition name="el-zoom-in-top">
+                <div v-show="showAllBasicOption" >
+                  <!--name pattern-->
+                  <el-form-item :label='$t("project.endpoint.pattern")' class="half-form-item" prop="pattern">
+                    <!--              <el-input placeholder="" v-model=""></el-input>-->
+                    <el-autocomplete
+                      id="module-box-input-pattern"
+                      v-model="editModule.endpointNameTmpl"
+                      :fetch-suggestions="querySearch"
+                      :placeholder="$t('overall.placeHolder')"
+                      class="inline-input"
+                      size="small"
+                    ></el-autocomplete>
+                  </el-form-item>
+                  <!--scrape_interval-->
+                  <el-form-item :label='$t("project.endpoint.scrape_interval")' class="half-form-item" prop="scrape_interval">
+                    <el-input id="module-box-input-scrape_interval" v-model.number="editModule.configs.scrape_interval" :placeholder='$t("project.endpoint.scrape_interval_placeholder")' size="small">
+                     <template slot="append">s</template>
+                    </el-input>
+                  </el-form-item>
+                  <!--scrape_timeout-->
+                  <el-form-item :label='$t("project.endpoint.scrape_timeout")' class="half-form-item" prop="scrape_timeout">
+                    <el-input id="module-box-input-scrape_timeout" v-model.number="editModule.configs.scrape_timeout" :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' size="small">
+                      <template slot="append">s</template>
+                    </el-input>
+                  </el-form-item>
+                </div>
+              </transition>
 
-        <!-- ChartTemplate  -->
-        <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
-          <v-selectpage
-            :data="'visual/panel/chart'"
-            :tb-columns="ChartSearchShowFields"
-            :params="{
-              varType: 2, panelId: 0,
-              returnChildren:0,groupId:0,
-            }"
-            :multiple="true"
-            :language="language"
-            title="ChartSearch"
-            key-field="id"
-            v-model="editModule.chartIds"
-            show-field="name"
-            class="form-control"
-            @values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
-            :result-format="resultFormat"
-          ></v-selectpage>
-        </el-form-item>
-        <!--Enpoint template-->
-        <div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
-          <el-tooltip placement="top" effect="light">
-            <div slot="content">
-              {{$t('project.module.tip.defaultEndpointSet')}}
-              <div></div>
-              {{$t('project.module.tip.relation')}}
-            </div>
-            <i class="nz-icon nz-icon-info-normal"></i>
-          </el-tooltip>
-        </div>
-        <div class="right-box-line"></div>
-
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="Basic" name="Basic">
-            <!--path-->
-            <el-form-item :label='$t("project.endpoint.path")' prop="configs.metrics_path" class="half-form-item">
-              <el-input placeholder="" v-model="editModule.configs.metrics_path" size="small" id="module-box-input-path"></el-input>
-            </el-form-item>
-            <!--port-->
-            <el-form-item :label='$t("project.endpoint.port")' prop="port" class="half-form-item">
-              <el-input placeholder="" v-model.number="editModule.port" size="small" id="module-box-input-port"></el-input>
-            </el-form-item>
-            <!--host-->
-            <el-form-item :label='$t("project.endpoint.host")' prop="host">
-              <el-input placeholder="" v-model="editModule.configs.host" size="small" id="module-box-input-host"></el-input>
-            </el-form-item>
-            <transition name="el-zoom-in-top">
-              <div v-show="showAllBasicOption" >
-                <!--name pattern-->
-                <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">
-                  <!--              <el-input placeholder="" v-model=""></el-input>-->
-                  <el-autocomplete
-                    class="inline-input"
-                    size="small"
-                    id="module-box-input-pattern"
-                    v-model="editModule.endpointNameTmpl"
-                    :fetch-suggestions="querySearch"
-                    :placeholder="$t('overall.placeHolder')"
-                  ></el-autocomplete>
-                </el-form-item>
-                <!--scrape_interval-->
-                <el-form-item :label='$t("project.endpoint.scrape_interval")' prop="scrape_interval" class="half-form-item">
-                  <el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editModule.configs.scrape_interval" size="small" id="module-box-input-scrape_interval">
-                   <template slot="append">s</template>
-                  </el-input>
-                </el-form-item>
-                <!--scrape_timeout-->
-                <el-form-item :label='$t("project.endpoint.scrape_timeout")' prop="scrape_timeout" class="half-form-item">
-                  <el-input :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' v-model.number="editModule.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout">
-                    <template slot="append">s</template>
-                  </el-input>
-                </el-form-item>
+              <div style="text-align: center">
+                <span class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none" @click="showAllBasicOption=!showAllBasicOption">
+                  {{$t('overall.moreOption')}}
+                  <i :class="showAllBasicOption?'is-active':''" class="nz-icon nz-icon-arrow-down need-rotate" ></i>
+                </span>
               </div>
-            </transition>
-
-            <div style="text-align: center">
-              <span @click="showAllBasicOption=!showAllBasicOption" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none">
-                {{$t('overall.moreOption')}}
-                <i class="nz-icon nz-icon-arrow-down need-rotate" :class="showAllBasicOption?'is-active':''" ></i>
+            </el-tab-pane>
+            <el-tab-pane label="Parameter" name="Parameter">
+              <div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
+                <div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
+                  <el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key">
+                    <el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
+                  </el-form-item>
+                  <span class="param-box-row-eq">=</span>
+                  <el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
+                    <vue-tags-input
+                      v-model="item.tags"
+                      :maxlength="32"
+                      :placeholder="'add parameter'"
+                      :tags="item.value"
+                      @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                    />
+                  </el-form-item>
+                  <span :id="'moduel-remove-param-'+index" class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+                </div>
+              </div>
+              <div style="text-align: center">
+                 <span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addParam">
+                <span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
               </span>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="Parameter" name="Parameter">
-            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-params">
-              <div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
-                <el-form-item class="param-box-row-key" :prop="'paramObj.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
-<!--                  <el-select-->
-<!--                    v-model=""-->
-<!--                    multiple-->
-<!--                    filterable-->
-<!--                    allow-create-->
-<!--                    :ref="'select'+ index"-->
-<!--                    placeholder="value" size="mini"-->
-<!--                    default-first-option-->
-<!--                    popper-class="config-dropdown hide-element"-->
-<!--                    @change="(val)=>{paramObjchange(val,index)}"-->
-<!--                  >-->
-<!--                    <span slot="empty" class=""></span>-->
-<!--                  </el-select>-->
-                  <vue-tags-input
-                    v-model="item.tags"
-                    :tags="item.value"
-                    :maxlength="32"
-                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
-                    :placeholder="'add parameter'"
-                  />
-
-                </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
-            </div>
-            <div style="text-align: center">
-               <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add module-add-label">
-              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-            </span>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="Labels" name="Labels">
-            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
-              <div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
-                <el-form-item class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :prop="'labelModule.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+            </el-tab-pane>
+            <el-tab-pane label="Labels" name="Labels">
+              <div id="module-box-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
+                <div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
+                  <el-form-item :prop="'labelModule.' + index + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
+                    <el-input v-model="item.key" placeholder="key" size="mini"></el-input>
+                  </el-form-item>
+                  <span class="param-box-row-eq">=</span>
+                  <el-form-item :prop="'labelModule.' + index + '.value'" class="param-box-row-value">
+                    <el-input v-model="item.value" placeholder="value" size="mini"></el-input>
+                  </el-form-item>
+                  <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+                </div>
               </div>
-            </div>
-            <div style="text-align: center">
-               <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add module-add-label">
-              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-            </span>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="Auth" name="Auth" v-if="editModule.type !== 'snmp'">
-            <!--authtype-->
-            <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
-              <el-select @change="changeAuthType" value-key="id" popper-class="config-dropdown" v-model="authType" placeholder="" size="small" id="module-box-input-auth-type">
-                <el-option :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
-              </el-select>
-            </el-form-item>
+              <div style="text-align: center">
+                 <span id="module-add-label" class="right-box-form-add module-add-label" type="button" @click="addLabel">
+                <span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
+              </span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane v-if="editModule.type !== 'snmp'" label="Auth" name="Auth">
+              <!--authtype-->
+              <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
+                <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+                  <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
 
-            <!--authtype 1-->
-            <el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item">
-              <el-input placeholder='' v-model.number="editModule.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input>
-            </el-form-item>
+              <!--authtype 1-->
+              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
+                <el-input id="module-box-input-uername" v-model.number="editModule.configs.basic_auth.username" placeholder='' size="small"></el-input>
+              </el-form-item>
 
-            <el-form-item :label='$t("project.endpoint.pin")' prop="authtype" v-if="authType === 1" class="half-form-item">
-              <el-input placeholder='' v-model.number="editModule.configs.basic_auth.password" size="small" id="module-box-input-password"></el-input>
-            </el-form-item>
+              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
+                <el-input id="module-box-input-password" v-model.number="editModule.configs.basic_auth.password" placeholder='' size="small"></el-input>
+              </el-form-item>
 
-            <!--authtype 2-->
-            <el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2">
-              <el-input placeholder='' v-model.number="editModule.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input>
-            </el-form-item>
+              <!--authtype 2-->
+              <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
+                <el-input id="module-box-input-bearer_token" v-model.number="editModule.configs.bearer_token" placeholder='' size="small"></el-input>
+              </el-form-item>
 
-          </el-tab-pane>
-        </el-tabs>
-        <div class="configs-copy-value">
-          <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-          <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
-        </div>
-      </el-form>
+            </el-tab-pane>
+          </el-tabs>
+          <div class="configs-copy-value">
+            <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
+            <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+          </div>
+        </el-form>
+      </div>
     </div>
 
     <!--底部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index f25f9ab7c..9b9442eec 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -2,23 +2,24 @@
   <div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}">
     <div class="right-box__header">
       <!-- begin--标题-->
-      <div class="right-box-title">{{editProject.id ? $t("project.project.editProject") : $t("overall.createProject")}}</div>
+      <div class="header__title">{{editProject.id ? $t("project.project.editProject") : $t("overall.createProject")}}</div>
       <!-- end--标题-->
 
       <div class="header__operation">
         <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-
     </div>
-    <div class="right-box-form-box right-box__container">
-      <el-form class="right-box-form right-box-form-left" :model="editProject" label-position = "top" label-width="120px" :rules="rules" ref="projectForm">
-        <el-form-item :label='$t("project.project.project")' prop="name">
-          <el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name" id="project-box-input-name"></el-input>
-        </el-form-item>
-        <el-form-item :label='$t("project.project.description")'>
-          <el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark" id="project-box-input-remark"></el-input>
-        </el-form-item>
-      </el-form>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="projectForm" :model="editProject" :rules="rules" label-position = "top" label-width="120px">
+          <el-form-item :label='$t("project.project.project")' prop="name">
+            <el-input id="project-box-input-name" v-model="editProject.name" maxlength="64" show-word-limit size="small"></el-input>
+          </el-form-item>
+          <el-form-item :label='$t("project.project.description")'>
+            <el-input id="project-box-input-remark" v-model="editProject.remark" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
 
     <!--底部按钮-->
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index d46241f27..cddd27a8c 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -41,7 +41,7 @@
                 @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
                 @mouseleave="alertMessageHover(scope.row.alertRule, false)"
               >{{scope.row.alertRule.name}}</span>
-              <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
+              <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule"></alertRuleInfo>
             </div>
             <template v-else>-</template>
           </template>
@@ -162,6 +162,7 @@ export default {
       searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
       currentMsg: {},
       chartUnit: 5,
+      severityData: [],
       tableTitle: [
         {
           label: 'ID',
@@ -248,7 +249,17 @@ export default {
       }
     }
   },
+  mounted () {
+    this.getSeverityData()
+  },
   methods: {
+    getSeverityData () {
+      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.severityData = response.data.list
+        }
+      })
+    },
     labelsSort (obj) {
       const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
       if (typeof obj === 'string') obj = JSON.parse(obj)
@@ -457,31 +468,6 @@ export default {
         }())
       }
       return r
-      /* let result="(" + obj.alertRule.expr + ")";
-        if(obj.labels){
-          if(obj.labels.alertname){
-            delete obj.labels.alertname;
-          }
-          if(obj.labels.severity){
-            delete obj.labels.severity;
-          }
-        }
-        if(Object.keys(obj.labels).length>0){
-          result+=" and ("+function(){
-            let q = "{";
-            for (let k in obj.labels) {
-              q += k;
-              q += "=";
-              q += ("'" + obj.labels[k] + "',");
-            };
-            if (q.length > 1) {
-              q = q.substring(0, q.length-1);
-            }
-            q += "}";
-            return q;
-          }() + ")";
-        }
-        return result; */
     },
     // asset弹框控制
     tabControl (data) {
diff --git a/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue b/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
deleted file mode 100644
index 7e58f6034..000000000
--- a/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
+++ /dev/null
@@ -1,1098 +0,0 @@
-<template>
-  <div class="navigation">
-    <el-dialog title="Get started in 6 steps" :visible.sync="show" center>
-      <el-tabs type="border-card">
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-datacenter1"></i>Datacenter</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addDatacenter">Add Datacenter</el-button>
-          <el-button @click="addCabinet">Add Cabinet</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-agent"></i>Agent</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addAgent">Add Agent</el-button>
-          <el-button @click="DownloadAgent">Download agent</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-menu-assets"></i>Asset</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addAsset">Add Asset</el-button>
-          <el-button @click="importAsset">Import asset</el-button>
-          <el-button @click="webTerminal">Web terminal</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-menu-project"></i> Monitor</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addPeoject">Add Peoject</el-button>
-          <el-button @click="addModule">Add Module</el-button>
-          <el-button @click="addEndpoint">Add Endpoint</el-button>
-          <el-button @click="importEndpoint">Import Endpoint</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-visualization"></i>Visualization</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addPanel">Add panel</el-button>
-          <el-button @click="addCharts">Add chart</el-button>
-        </el-tab-pane>
-        <el-tab-pane>
-          <span slot="label"
-            ><i class="nz-icon nz-icon-terminal-log"></i>Alert</span
-          >
-          <div>
-            <div>1</div>
-            <div>2</div>
-          </div>
-          <el-button @click="addAlertRule">Add alert rule</el-button>
-        </el-tab-pane>
-      </el-tabs>
-    </el-dialog>
-    <!-- dc -->
-    <transition name="right-box">
-      <dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @refresh="getTableData"></dc-box>
-    </transition>
-    <!-- cabinet -->
-    <transition name="right-box">
-      <cabinet-box v-if="rightBox.cabinet.show" :current-dc="cabinet" :cabinet="cabinet" ref="cabinetEditBox" @close="closeCabinetBox"></cabinet-box>
-    </transition>
-    <!-- agent -->
-    <transition name="right-box">
-      <agent-box v-if="rightBox.agents.show" :agents="agents" @close="closeAgentBox"></agent-box>
-    </transition>
-    <el-dialog :title="$t('config.agent.agent.title')" :visible.sync="showAgentDownload" append-to-body class="nz-dialog agent-dialog" width="800px" @close="closeDialog">
-      <div v-if="showAgentDownload" class="agent-box">
-        <el-form v-model="agentParam" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" size="small" style="width: 100%">
-          <div class="right-box-sub-title">{{$t('config.agent.agent.download')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
-          <el-form-item :label="$t('config.agent.agent.osType')" class="half-form-item" prop="osType">
-            <el-select v-model="agentParam.osType" class="right-box-row-with-btn" placeholder="">
-              <el-option v-for="item in osTypes" :key="item.name" :label="item.label" :value="item.name">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item   class="half-form-item">
-            <button class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" @click="downloadAgent">{{$t('config.agent.agent.download')}}</button>
-          </el-form-item>
-          <div class="right-box-sub-title">{{$t('config.agent.agent.autoScript')}}</div>
-          <div style="margin-bottom: 20px;width: 100%"></div>
-
-          <el-form-item :label="$t('config.dc.dc')" class="half-form-item" prop="dc">
-            <el-select v-model="agentParam.dc" class="right-box-row-with-btn" placeholder="">
-              <el-option v-for="item in allDc" :key="item.id" :label="item.name" :value="item.id">
-                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('config.agent.agent.type')" class="half-form-item" prop="type">
-            <el-select v-model="agentParam.type" class="right-box-row-with-btn" placeholder="">
-              <el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="cURL"  v-if="loadFinish" class="download-url">
-            <el-input id="download-url-curl" :disabled="true" v-model="curlUrl">
-              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="curlVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('curl')">
-                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
-              </el-popover>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="Wget"  v-if="loadFinish" class="download-url">
-            <el-input id="download-url-wget" :disabled="true" v-model="wgetUrl">
-              <el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="wgetVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('wget')">
-                <i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
-              </el-popover>
-            </el-input>
-          </el-form-item>
-        </el-form>
-      </div>
-    </el-dialog>
-    <!-- asset -->
-    <transition name="right-box">
-      <asset-box
-        v-if="rightBox.asset.show"
-        ref="assetBox"
-        :asset="asset"
-        :dc-data="dcData"
-        :field-group-data="fieldGroupData"
-        :from="fromRoute.asset"
-        :snmp-credential-data="snmpCredentialData"
-        :state-data="stateData"
-        :type-data="typeData"
-        @close="closeAssetBox"></asset-box>
-    </transition>
-    <!-- project -->
-    <transition name="right-box">
-      <projectBox v-if="rightBox.project.show" :project="project" @close="closeProjectBox"></projectBox>
-    </transition>
-    <transition name="right-box">
-      <moduleBox v-if="rightBox.module.show" :module="moduleList" @close="closeModuleBox"></moduleBox>
-    </transition>
-    <transition name="right-box">
-      <addEndpointBox v-if="rightBox.endpoint.show" :endpoint="endpoint" @close="closeEndpointBox"></addEndpointBox>
-    </transition>
-    <transition name="right-box">
-      <chart-box
-      :charts="charts"
-      :from="$CONSTANTS.fromRoute.panel"
-      :panel-data="panelData"
-      :show-panel="showPanel"
-      @close="closeChartsBox"
-      @delete-chart="delChart"
-      @on-create-success="createSuccess"
-      @on-delete-success="delChartOk"
-      @reload="panelReload"
-      @reloadOnlyPanel="panelReloadOnlyPanel"
-      ref="addChartModal"
-      v-if="rightBox.charts.show"></chart-box>
-    </transition>
-    <transition name="right-box">
-      <alert-rule-box v-if="rightBox.alert.show" :alert-rule="alert" ref="alertConfigBox" :alert="alert" @close="closeAlertBox"></alert-rule-box>
-    </transition>
-    <!--web-->
-    <el-dropdown>
-      <el-dropdown-menu></el-dropdown-menu>
-      <div id="header-open-cli" @click="cli">
-      </div>
-    </el-dropdown>
-    <!--import-->
-    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
-      <div v-if="importBox.type == 1">
-        <div class="upload-body">
-          <el-upload drag class="upload-demo" ref="uploadExcel"  action="" :file-list="importFileList" :on-change="importChange"  :auto-upload="false" accept=".xlsx,.xls" :id="id+'-xlsx-input-file'">
-            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
-            <i class="nz-icon nz-icon-upload"></i>
-            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-          </el-upload>
-        </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns" style="text-align: right;">
-            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
-              <span>{{$t('overall.template')}}</span>
-            </button>
-            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
-              <span>{{$t('overall.importExcel')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.cancel')}}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import DcBox from '@/components/common/rightBox/dcBox'
-import AgentBox from '../../common/rightBox/agentBox'
-import AssetBox from '../../common/rightBox/asset/assetBox'
-import dataListMixin from '@/components/common/mixin/dataList'
-import projectBox from '@/components/common/rightBox/projectBox'
-import moduleBox from '@/components/common/rightBox/moduleBox'
-import addEndpointBox from '@/components/common/rightBox/addEndpointBox'
-import alertRuleBox from '@/components/common/rightBox/alertRuleBox'
-import ChartBox from '../../page/dashboard/chartBox'
-import table from '@/components/common/mixin/table'
-import cabinetBox from '@/components/common/rightBox/setting/cabinetBox'
-import exportXLSX from '@/components/common/exportXLSX'
-
-import { agent, agent2 } from '@/components/common/js/constants'
-import axios from 'axios'
-
-export default {
-  props: {
-    show: Boolean,
-    exportFileName: { type: String },
-    id: { type: String, default: 'export' },
-    currentDc: { type: Object },
-    alertRule: Object
-  },
-  components: {
-    DcBox,
-    ChartBox,
-    AgentBox,
-    AssetBox,
-    projectBox,
-    moduleBox,
-    addEndpointBox,
-    alertRuleBox,
-    cabinetBox,
-    'export-excel': exportXLSX
-  },
-  mixins: [dataListMixin, table],
-  computed: {
-    wgetUrl () {
-      return 'wget -qO- --header="Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
-    },
-    curlUrl () {
-      return 'curl -o- -H "Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
-    }
-  },
-  data () {
-    return {
-      // dc
-      userData: [],
-      // asset
-      dcData: [],
-      typeData: [],
-      stateData: [],
-      fieldGroupData: [],
-      snmpCredentialData: [],
-      // panel
-      panelData: [],
-      showPanel: { // panel下拉列表
-        id: '',
-        name: '',
-        type: 'panel'
-      },
-      // agert
-      osTypes: [{
-        label: 'Centos',
-        name: 'centos'
-      }],
-      agentParam: {
-        osType: 'centos',
-        dc: '',
-        type: 1
-      },
-      allDc: [],
-      agent: agent,
-      agent2: agent2,
-      showAgentDownload: false,
-      // import
-      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1 },
-      importFile: null,
-      importFileList: [],
-      importResult: null,
-      exportShow: false,
-      paramsType: '',
-      assetimportUrl: '/asset/import',
-      endpointimportUrl: '/monitor/endpoint/import',
-      rightBox: {
-        dc: {
-          show: false
-        },
-        asset: {
-          show: false
-        },
-        agents: {
-          show: false
-        },
-        project: {
-          show: false
-        },
-        module: {
-          show: false
-        },
-        endpoint: {
-          show: false
-        },
-        charts: {
-          show: false
-        },
-        alert: {
-          show: false
-        },
-        cabinet: {
-          show: false
-        },
-        panel: {
-          show: false
-        }
-      },
-      dc: {
-        id: '',
-        name: '',
-        location: '',
-        tel: '',
-        principal: '',
-        state: 'ON',
-        longitude: undefined,
-        latitude: undefined
-      },
-      agents: {
-        id: '',
-        host: '',
-        port: 9090,
-        dc: { id: '', name: '', location: '' }
-      },
-      asset: {
-        id: '',
-        name: '',
-        pid: '',
-        sn: '',
-        manageIp: '',
-        stateId: '',
-        purchaseDate: null,
-        dcId: '',
-        cabinetId: '',
-        brandId: '',
-        brand: { id: '', name: '' },
-        modelId: '',
-        model: { id: '', name: '' },
-        type: { name: '', id: '' },
-        brandAndModel: [],
-        typeId: '',
-        authProtocolPort: '',
-        authType: '',
-        authUsername: '',
-        authPin: '',
-        authPriKey: '',
-        authUserTip: '',
-        authPinTip: '',
-        fields: [],
-        accounts: []
-      },
-      project: {
-        id: '',
-        name: '',
-        remark: ''
-      },
-      moduleList: {
-        id: '',
-        projectId: '',
-        name: '',
-        endpointNameTmpl: '{{module.name}}-{{asset.name}}',
-        type: 'http',
-        port: 9100,
-        configs: {
-          walk: [],
-          snmpCredentialsId: '',
-          metrics_path: '',
-          port: '',
-          host: '{{asset.manageIp}}',
-          scrape_interval: '',
-          scrape_timeout: '',
-          params: '',
-          labels: '',
-          basic_auth: {
-            username: '',
-            pin: ''
-          },
-          bearer_token: ''
-        },
-        walk: [],
-        labelModule: [{
-          key: '',
-          value: ''
-        }],
-        paramObj: [{
-          key: '',
-          value: []
-        }]
-      },
-      endpoint: {},
-      charts: {
-        id: '',
-        name: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: 2,
-        param: { url: '', threshold: '' },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
-        panel: '',
-        sync: 0,
-        remark: '',
-        groupId: -1
-      },
-      alert: {
-        id: '',
-        alertName: '',
-        linkObject: { id: '', name: '' },
-        expr: '',
-        unit: 2,
-        operator: '>',
-        last: 60,
-        severityId: '',
-        summary: '',
-        description: '',
-        method: []
-      },
-      cabinet: {
-        id: '',
-        idcId: '',
-        name: '',
-        remark: '',
-        seq: '',
-        uSize: 1
-      },
-      panel: {
-        id: '',
-        title: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: 2,
-        param: {
-          url: '',
-          threshold: ''
-        }
-      }
-    }
-  },
-  mounted () {
-    this.getStateData()
-    this.getTypeTreeData()
-    this.getDcData()
-    this.getSnmpCredentialData()
-    this.getFieldGroupData()
-  },
-  methods: {
-    // Datacenter
-    addDatacenter () {
-      this.rightBox.dc.show = true
-      this.$emit('update:show', false)
-    },
-    addCabinet () {
-      this.rightBox.cabinet.show = true
-      this.$emit('update:show', false)
-    },
-    // Angebt
-    addAgent () {
-      this.rightBox.agents.show = true
-      this.$emit('update:show', false)
-    },
-    DownloadAgent () {
-      this.$emit('update:show', false)
-      this.toDownloadAgent()
-    },
-    // Asset
-    addAsset () {
-      this.rightBox.asset.show = true
-      this.$emit('update:show', false)
-    },
-    importAsset () {
-      this.showImportBox(1)
-      this.$emit('update:show', false)
-    },
-    webTerminal () {
-      this.cli()
-      this.$emit('update:show', false)
-    },
-    // Monitor
-    addPeoject () {
-      this.rightBox.project.show = true
-      this.$emit('update:show', false)
-    },
-    addModule () {
-      this.rightBox.module.show = true
-      this.$emit('update:show', false)
-    },
-    addEndpoint () {
-      this.rightBox.endpoint.show = true
-      this.$emit('update:show', false)
-    },
-    importEndpoint () {
-      this.showImportBox(1)
-      this.$emit('update:show', false)
-    },
-    // Visualization
-    addPanel () {
-      // this.rightBox.panel.show = true
-      this.rightBox.charts.show = true
-      this.$emit('update:show', false)
-    },
-    addCharts () {
-      this.rightBox.charts.show = true
-      this.$emit('update:show', false)
-    },
-    // Alert
-    addAlertRule () {
-      this.rightBox.alert.show = true
-      this.$emit('update:show', false)
-    },
-    cli () {
-      this.$store.commit('openConsole')
-    },
-    // userdata
-    getUserData () {
-      return new Promise(resolve => {
-        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
-          if (response.code === 200) {
-            this.userData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    /** asset */
-    // dcdata
-    getDcData () {
-      return new Promise(resolve => {
-        this.$get('dc', { pageSize: -1 }).then(response => {
-          if (response.code === 200) {
-            this.dcData = response.data.list
-            this.titleSearchList.dc.children = response.data.list.map(d => { return { ...d, value: d.id } })
-          }
-          resolve()
-        })
-      })
-    },
-    // fieldGroupData
-    getFieldGroupData () {
-      return new Promise(resolve => {
-        this.$get('asset/field/group', { pageSize: -1 }).then(response => {
-          if (response.code === 200) {
-            this.fieldGroupData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    // snmpCredentialData
-    getSnmpCredentialData () {
-      return new Promise(resolve => {
-        this.$get('snmp/credential', { pageSize: -1 }).then(response => {
-          if (response.code === 200) {
-            this.snmpCredentialData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    // stateData
-    getStateData () {
-      return new Promise(resolve => {
-        this.$get('asset/stateConf?pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.stateData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    // typeData
-    getTypeTreeData () {
-      return new Promise(resolve => {
-        this.$get('asset/typeConf/tree').then(response => {
-          if (response.code === 200) {
-            this.typeData = response.data.list
-          }
-          resolve()
-        })
-      })
-    },
-    // Download agent
-    toDownloadAgent: function () {
-      this.getAllDc()
-      this.showAgentDownload = true
-      this.token = sessionStorage.getItem('nz-token')
-      axios.get('/healthy').then(response => {
-        const url = response.request.responseURL
-        this.ipAddr = url.split('/healthy')[0]
-      })
-    },
-    closeDialog: function () {
-      this.showAgentDownload = false
-      this.importBox.show = false
-      this.importResult = null
-      this.importFileList = []
-      this.importFile = null
-    },
-    getAllDc () {
-      this.$get('dc?pageSize=-1').then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          this.allDc = response.data.list
-          if (this.allDc && this.allDc.length > 0) {
-            this.loadFinish = true
-            this.agentParam.dc = this.allDc[0].id
-          }
-        }
-      })
-    },
-    downloadAgent: function () {
-      axios.get('agent/download?os=' + this.agentParam.osType, { responseType: 'blob' }).then(data => {
-        let fileName = 'confagent'
-        const disposition = data.headers['content-disposition']
-        if (disposition) {
-          fileName = disposition.split(';')[1].split('filename=')[1]
-        }
-        // 由于ie不支持download属性，故需要做兼容判断
-        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-          // ie独有的msSaveBlob属性，data.data为Blob文件流
-          window.navigator.msSaveBlob(data.data, fileName)
-        } else {
-          // 以下流程即为文章开始的下载流程
-          const url = window.URL.createObjectURL(data.data)
-          const link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.download = fileName
-          document.body.appendChild(link)
-          link.click()
-          window.URL.revokeObjectURL(link.href)
-        }
-      })
-    },
-    /* project */
-
-    /* panel */
-    panelReloadOnlyPanel () { // 仅刷新panel数据
-      if (!this.hasButton('panel_view')) {
-        return
-      }
-      this.$get('visual/panel?pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-          for (let i = 0; i < this.panelData.length; i++) {
-            if (this.panelData[i].id == this.showPanel.id) {
-              this.showPanel.name = this.panelData[i].name
-              break
-            }
-          }
-        }
-      })
-    },
-
-    getTableData (clearShowPanel) {
-      const vm = this
-
-      this.$get('visual/panel?type=dashboard&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-          let isInitData = false
-          if (response.data.list.length > 0) {
-            if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
-              this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
-            }
-            if (clearShowPanel) {
-              this.showPanel.id = ''
-            }
-            if (!this.showPanel.id) {
-              this.showPanel = response.data.list[0]
-              this.filter.panelId = this.showPanel.id
-              this.getData(this.filter)
-              isInitData = true
-            } else {
-              handler(response.data.list)
-              this.filter.panelId = this.showPanel.id
-            }
-            this.$nextTick(() => {
-              this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
-            })
-          } else {
-            this.showPanel.id = ''
-            this.filter.panelId = ''
-          }
-          this.pageObj.total = response.data.total
-          if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
-            this.getData(this.filter)
-          }
-          this.$store.state.showPanel.id = 0
-          this.$store.state.showPanel.name = ''
-          this.$store.state.showPanel.type = 'dashboard'
-        } else {
-          if (response.msg) {
-            this.$message.error(response.msg)
-          } else if (response.error) {
-            this.$message.error(response.error)
-          } else {
-            this.$message.error(response)
-          }
-        }
-      }).catch((error) => {
-        // console.log('error................'+JSON.stringify(error));
-        if (error) {
-          console.error(error)
-          this.$message.error(error.toString())
-        }
-      })
-
-      function handler (panelData) {
-        panelData.forEach(panel => {
-          if (panel.id == vm.showPanel.id) {
-            vm.showPanel = panel
-          } else {
-            if (panel.children && panel.children.length > 0) {
-              handler(panel.children)
-            }
-          }
-        })
-      }
-    },
-    // 面板相关操作
-    panelChange (val) {
-      if (!val) {
-        return false
-      }
-      this.filter.searchName = ''
-      // this.$refs.searchInput.select();
-      this.showPanel = val
-      this.showPanel.type = 'dashboard'
-      this.filter.panelId = this.showPanel.id
-      // let curTime = this.$refs.calendarPanel.getCurrentTime();
-      const curTime = this.searchTime
-      this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
-      // this.$refs.chartList.initCurrentRecordNum();
-      this.$refs.chartList.cleanData()
-      this.getData(this.filter)
-    },
-    panelReloadForDel: function () {
-      if (this.showPanel.id === this.panel.id) {
-        this.showPanel.id = ''
-      }
-      this.getTableData()
-    },
-    /* 图表相关操作--start */
-    addChart () {
-      this.chart = this.newChart()
-      this.chart.panelId = this.showPanel.id
-      this.chart.panelName = this.showPanel.name
-      this.rightBox.chart.show = true
-    },
-    addChartByTemp () {
-      this.chart = Object.assign({}, this.blankChartTemp)
-      this.chart.panelId = this.showPanel.id
-      this.rightBox.chartTemp.show = true
-    },
-    addGroupItem (groupId) {
-      this.chart = this.newChart()
-      this.chart.groupId = groupId
-      this.chart.panelId = this.showPanel.id
-      this.chart.panelName = this.showPanel.name
-      this.chart.isGroup = true
-      this.rightBox.chart.show = true
-    },
-    // 编辑图表信息,打开编辑弹窗
-    editChart (data) {
-      if (!data.param) {
-        data.param = { url: '', threshold: '' }
-      }
-      this.chart = JSON.parse(JSON.stringify(data))
-      this.chart.panelId = this.showPanel.id
-      this.chart.panelName = this.showPanel.name
-      this.rightBox.chart.show = true
-    },
-    delChartOk () {
-      this.filter.panelId = this.showPanel.id
-      this.getData(this.filter)
-    },
-    // 图表创建成功，回调panel页面，进行图表的刷新
-    createSuccess (msg, data, params, panel) {
-      this.filter.panelId = this.showPanel.id
-      this.getData(this.filter)
-    },
-    // 移除图表:弹出确认框询问
-    delChart (data, from) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('visual/panel/chart?ids=' + data.id).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.deleteSuccess')
-            })
-            this.rightBox.chart.show = false
-            const chartList = this.$refs.chartList.dataList
-            for (let i = 0; i < chartList.length; i++) {
-              if (chartList[i].id === data.id) {
-                chartList.splice(i, 1)
-              }
-              if (chartList[i].type === 'group') {
-                chartList[i].children = chartList[i].children.filter((item) => item.id !== data.id)
-              }
-            }
-            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      })
-    },
-    panelReload (clearShowPanel) {
-      this.getTableData(clearShowPanel)
-    },
-    panelReloadOnlyPanel () { // 仅刷新panel数据
-      if (!this.hasButton('panel_view')) {
-        return
-      }
-      this.$get('visual/panel?pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-          for (let i = 0; i < this.panelData.length; i++) {
-            if (this.panelData[i].id == this.showPanel.id) {
-              this.showPanel.name = this.panelData[i].name
-              break
-            }
-          }
-        }
-      })
-    },
-    showImportBox (type) {
-      this.importBox.show = true
-      this.importBox.type = type
-      if (type == 1) { // import
-        this.importBox.title = this.$t('overall.importExcel')
-        this.importBox.width = '600px'
-      }
-    },
-    getTimeString () {
-      const split = '-'
-      const date = new Date()
-      const year = date.getFullYear()
-      const month = this.formatNum(date.getMonth() + 1)
-      const day = this.formatNum(date.getDate())
-      const hours = this.formatNum(date.getHours())
-      const minutes = this.formatNum(date.getMinutes())
-      const seconds = this.formatNum(date.getSeconds())
-      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
-    },
-    formatNum (num) {
-      return num > 9 ? num : '0' + num
-    },
-    importChange (file, fileList) {
-      // console.log(file,filelist)
-      if (fileList.length > 0) {
-        this.importFileList = [fileList[fileList.length - 1]]
-      }
-      this.importFile = this.importFileList[0]
-    },
-    rollbackImport () {
-      let url
-      if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/asset/cancelImport'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/monitor/endpoint/cancelImport'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/alert/rule/cancelImport'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/panel/cancelImport'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/expression/tmpl/cancelImport'
-      }
-      this.$delete(url + '?seq=' + this.importResult.seq).then(response => {
-        if (response.code == 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.$emit('afterImport')
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.closeDialog()
-      })
-    },
-    downloadTemplate () {
-      const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
-      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
-
-      let url = null
-      if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/asset/template'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/alert/rule/template'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/panel/template'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/monitor/endpoint/template'
-      } else if (this.assetimportUrl.indexOf('asset') || this.assetimportUrl.indexOf('asset') > -1) {
-        url = '/expression/tmpl/template'
-      }
-
-      const param = { language: language }
-      if (!url) {
-        console.error('no interface support')
-      }
-      this.exportExcel(url, param, fileName)
-    },
-    exportExcel (url, params, fileName) {
-      if (this.paramsType) {
-        params.type = this.paramsType
-      }
-      axios.get(url, { responseType: 'blob', params: params }).then(res => {
-        if (window.navigator.msSaveOrOpenBlob) {
-          // 兼容ie11
-          const blobObject = new Blob([res.data])
-          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
-        } else {
-          const url = URL.createObjectURL(new Blob([res.data]))
-          const a = document.createElement('a')
-          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
-          a.href = url
-          a.download = fileName
-          a.target = '_blank'
-          a.click()
-          a.remove() // 将a标签移除
-        }
-      }, error => {
-        const $self = this
-        const reader = new FileReader()
-        reader.onload = function (event) {
-          const responseText = reader.result
-          const exception = JSON.parse(responseText)
-          if (exception.message) {
-            $self.$message.error(exception.message)
-          } else {
-            console.error(error)
-          }
-        }
-        reader.readAsText(error.response.data)
-      })
-    },
-    importExcel () {
-      if (this.importFile && this.importFile.raw) {
-        this.prevent_opt.import = true
-        const form = new FormData()
-        form.append('excelFile', this.importFile.raw)
-        if (this.paramsType) {
-          form.append('type', this.paramsType)
-          if (this.paramsType === 'asset' || this.paramsType === 'model') {
-            form.append('linkId', this.link ? this.link.id : '')
-          }
-        }
-        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-        if (this.assetimportUrl) {
-          this.$post(this.assetimportUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
-            if (response.code == 200 && response.msg == 'success') {
-              this.importResult = response.data
-              this.$emit('afterImport')
-              this.importBox.type = 3
-              this.importBox.width = '600px'
-            } else {
-              this.$message.error(response.msg)
-            }
-            this.prevent_opt.import = false
-          })
-        } else if (this.endpointimportUrl) {
-          this.$post(this.endpointimportUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
-            if (response.code == 200 && response.msg == 'success') {
-              this.importResult = response.data
-              this.$emit('afterImport')
-              this.importBox.type = 3
-              this.importBox.width = '600px'
-            } else {
-              this.$message.error(response.msg)
-            }
-            this.prevent_opt.import = false
-          })
-        }
-      } else {
-        this.$message.error(this.$t('tip.noImportFile'))
-      }
-    },
-    // Box 侧滑关闭事件
-    closeDcBox (refresh) {
-      this.rightBox.dc.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeAgentBox (refresh) {
-      this.rightBox.agents.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeAssetBox (refresh) {
-      this.rightBox.asset.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeProjectBox (refresh) {
-      this.rightBox.project.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeModuleBox (refresh) {
-      this.rightBox.module.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeEndpointBox (refresh) {
-      this.rightBox.endpoint.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeChartsBox (refresh) {
-      this.rightBox.charts.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeAlertBox (refresh) {
-      this.rightBox.alert.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    closeCabinetBox (refresh) {
-      this.rightBox.cabinet.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getTableData()
-      }
-    }
-  },
-  watch: {
-
-  }
-}
-</script>
-<style lang="scss">
-.el-dialog__body {
-  background-color: #fff;
-  .el-tab-pane {
-    text-align: center;
-    div {
-      text-align: left;
-      line-height: 20px;
-    }
-    .el-button {
-      width: 156px;
-      height: 46px;
-      border-radius: 2px;
-      margin-top: 40px;
-      background-color: #666;
-      span {
-        color: #fff;
-      }
-    }
-  }
-}
-.right-box{
-  text-align: left;
-}
-</style>