From e9478cdeddb49a8d580d16fa7bbc3666fccbadff Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 6 Dec 2019 17:36:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=8A=E8=AD=A6=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.告警信息
2.告警规则配置
---
 nezha-fronted/src/App.vue                     |   2 +-
 nezha-fronted/src/assets/css/main.css         |   3 +
 .../src/components/common/header.vue          |  18 +-
 .../src/components/common/language/cn.js      |  24 +
 .../src/components/common/language/en.js      |  35 +
 .../src/components/page/alarm/config.vue      | 625 ++++++++++++++++++
 .../src/components/page/alarm/list.vue        | 325 +++++++++
 .../src/components/page/config/account.vue    |  55 +-
 .../src/components/page/config/promServer.vue |  61 +-
 9 files changed, 1126 insertions(+), 22 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/alarm/config.vue
 create mode 100644 nezha-fronted/src/components/page/alarm/list.vue

diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue
index 9be7b615f..e768e0fce 100644
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view style="height: 100%"/>
   </div>
 </template>
 
diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css
index cabd0edfc..f1153c45f 100644
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -9,6 +9,9 @@ body {
 html {
     height: 100%;
 }
+.content-box {
+  height: 100%;
+}
 /*侧滑文字*/
 .el-form-item .el-form-item__label{
     font-size: 10px;
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index ce3d18d6b..932d0931b 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -27,11 +27,17 @@
                         </el-menu-item>
                     </template>
                 </el-submenu>
-                <!--<el-submenu index="4">
-                    <template slot="title">
-                        <div @click="jumpTo('alarm')">{{$t('overall.alarm')}}</div>
-                    </template>
-                </el-submenu>-->
+              <el-submenu index="4">
+                <template slot="title">
+                  <div @click="jumpTo('alarmList')">{{$t('overall.alarm')}}</div>
+                </template>
+                <el-menu-item index="1">
+                  <div @click="jumpTo('alarmList')">{{$t('alarm.alarmList')}}</div>
+                </el-menu-item>
+                <el-menu-item index="2">
+                  <div @click="jumpTo('alarmConfig')">{{$t('alarm.alarmConfig')}}</div>
+                </el-menu-item>
+              </el-submenu>
                 <el-submenu index="5">
                     <template slot="title">
                         <div @click="jumpTo('account')">{{$t('overall.config')}}</div>
@@ -136,7 +142,7 @@ export default {
 <style scoped>
 .submenu {
     padding-left: 50%;
-    width: 400px;
+    width: 500px;
     float: left;
 }
 
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 8627cac8a..8ca1c7fcf 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -3,6 +3,7 @@ const cn = {
   overall: {
     dashboard: '仪表盘',
     project: '工程',
+    alarm: "告警",
     asset: '资产',
     config: '设置',
     create: '新增',
@@ -61,6 +62,29 @@ const cn = {
       editProm: "修改Prometheus Server"
     },
   },
+  alarm: {
+    alarmList: "告警列表",
+    alarmConfig: "告警设置",
+    list: {
+      alarmName: "告警名称",
+      linkedId: "关联ID",
+      severity: "告警级别",
+      type: "类型",
+      summary: "摘要",
+      description: "描述",
+      state: "状态",
+      startAt: "时间",
+      endAt: "消除时间",
+      charts: "图表",
+
+      //表内容
+      projectAlarm: "Project Alarm",
+      moduleAlarm: "Module Alarm",
+      deviceAlarm: "Device Alarm",
+      pending: "Pending",
+      expired: "Expired"
+    }
+  },
   ...zhLocale
 }
 
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index b3dcd30f1..dc122dd34 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -3,6 +3,7 @@ const en = {
   overall:{
     dashboard:'dashboard',
     project:'project',
+    alarm: "alarm",
     asset:'asset',
     config:'config',
     create: 'Create',
@@ -61,6 +62,40 @@ const en = {
       editProm: "Edit Prometheus Server"
     },
   },
+  alarm: {
+    alarmList: "Alarm List",
+    alarmConfig: "Alarm Config",
+    alarmName: "Alarm Name",
+    severity: "Severity",
+    description: "Desc",
+    summary: "Summary",
+    startAt: "Time",
+    endAt: "End Time",
+    list: {
+      //表头
+      linkedId: "Linked ID",
+      type: "Type",
+      state: "Status",
+      charts: "Charts",
+
+      //表内容
+      projectAlarm: "Project Alarm",
+      moduleAlarm: "Module Alarm",
+      deviceAlarm: "Device Alarm",
+      pending: "Pending",
+      expired: "Expired"
+    },
+    config: {
+      name: "Name",
+      receiver: "Receiver",
+      expr: "Expr",
+      for: "For",
+      option: "Option",
+      alarmConfig: "Alarm Config",
+      createAlarmConfig: "Create Alarm Config",
+      editAlarmConfig: "Edit Alarm Config",
+    }
+  },
   ...enLocale
 }
 
diff --git a/nezha-fronted/src/components/page/alarm/config.vue b/nezha-fronted/src/components/page/alarm/config.vue
new file mode 100644
index 000000000..62e074345
--- /dev/null
+++ b/nezha-fronted/src/components/page/alarm/config.vue
@@ -0,0 +1,625 @@
+<style scoped>
+  .account {
+    height: 100%;
+  }
+  .content-left {
+    float: left;
+    width: 370px;
+    height: 100%;
+  }
+  .sidebar-title {
+    padding-left: 30px;
+    padding-top: 20px;
+  }
+
+  .sidebar-info {
+    margin-top: 20px;
+    border: 1px solid #acacac;
+    border-radius: 8px;
+    height: calc(90vh - 55px);
+    width: calc(100% - 30px);
+  }
+
+  .sidebar-info-header {
+    background: #acacac;
+    text-align: center;
+    line-height: 50px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 60px;
+    width: 100%;
+  }
+
+  .sidebar-info-footer {
+    padding-top: 15px;
+    padding-left: 15px;
+  }
+  .account-list {
+    height: calc(100% - 131px);
+    margin-left: 370px;
+    padding: 0 15px 0 0;
+  }
+  .account-list-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+  .account-list-option .el-icon-delete {
+    color: #F98D9A;
+  }
+  .account-list-option .el-icon-delete:hover {
+    color: #D96D7A;
+  }
+  .account-list-option .el-icon-view {
+    color: #60BEFF;
+  }
+  .account-list-option .el-icon-view:hover {
+    color: #409EFF;
+  }
+  .account-list-search {
+    float: right;
+    width: 220px;
+    margin: 15px 0;
+  }
+  /* begin--右侧弹框*/
+  .right-box {
+    position: fixed;
+    top: 80px;
+    right: 15px;
+    z-index: 1;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ccc;
+    background-color: white;
+    padding: 0 20px;
+  }
+  .right-box-account {
+    width: 550px;
+    height: calc(100% - 100px);
+  }
+  /* begin--右侧弹框--顶部按钮*/
+  .right-box-top-btns {
+    text-align: center;
+  }
+  .right-box-top-btn {
+    border-radius: 0 0 9px 9px;
+    float: right;
+    color: #656565;
+    height: 30px;
+    font-size: 12px;
+    padding: 3px 8px 1px 8px;
+    border: 1px solid #aaaaaa;
+    border-top: none;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+  .right-box-top-btn-full {
+    background-color: #656565;
+    border: 1px solid #656565;
+    border-top: none;
+    color: white;
+   }
+  /* end--右侧弹框--顶部按钮*/
+
+  /* begin--右侧弹框--内容*/
+  .right-box-title {
+    height: 30px;
+    line-height: 40px;
+    text-align: left;
+  }
+  .right-box-form {
+    margin-top: 35px;
+  }
+  .right-box-form-row {
+    margin-top: 25px;
+  }
+  .right-box-form-label {
+    margin-bottom: 8px;
+    text-align: left;
+  }
+  .right-box-form-content {
+    line-height: 32px;
+    text-align: left;
+    width: 100%;
+  }
+  .right-box-form-content-txt {
+    padding-left: 11px;
+  }
+  .right-box-form-content .el-select {
+    width: calc(100% - 38px);
+    vertical-align: top;
+  }
+  .el-select-add-btn {
+    width: 33px;
+    height: 33px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 5px;
+    border: 1px solid #DCDFE6;
+    box-sizing: border-box;
+    color: #C7C9CE;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  }
+  .el-select-add-btn:hover {
+    border: 1px solid #C0C4CC;
+    cursor: pointer;
+  }
+  /* end--右侧弹框--内容*/
+
+  /* begin--右侧弹框--底部按钮*/
+  .right-box-bottom-btns {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    left: 0;
+    text-align: center;
+  }
+  .right-box-bottom-btn:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+  .right-box-bottom-btn:last-of-type{
+    border-bottom-right-radius: 8px;
+  }
+  .right-box-bottom-btn {
+    display: inline-block;
+    background-color: #656565;
+    color: white;
+    height: 100%;
+    line-height: 40px;
+    cursor: pointer;
+    width: 100%;
+  }
+  .config-dropdown-label-input {
+    width: 50%;
+    display: inline-block;
+  }
+  .right-box-bottom-btn-cancel {
+    background-color: #DADADA;
+    color: #656565;
+  }
+  .right-box-bottom-btn-50 {
+    width: 50%;
+  }
+  /* end--右侧弹框--底部按钮*/
+  /* end--右侧弹框*/
+
+  /* begin--右弹框滑入滑出动画*/
+  @keyframes slide-in-from-right {
+    from {right: -800px}
+    to {right: 0}
+  }
+  @keyframes slide-out-to-right {
+    from {right: 0}
+    to {right: -800px}
+  }
+  .right-box-enter-active {
+    animation: slide-in-from-right 0.4s;
+  }
+  .right-box-leave-active {
+    animation: slide-out-to-right 0.4s;
+  }
+  /* end--右弹框滑入滑出动画*/
+</style>
+<template>
+    <div class="account">
+      <div class="content-left">
+        <div class="sidebar-title">
+          <div>Config</div>
+          <div class="sidebar-info">
+            <div class="sidebar-info-footer" v-if="sidebarState">
+            </div>
+          </div>
+        </div>
+      </div>
+        <div class="account-list">
+            <el-input
+              class="account-list-search"
+              type="text"
+              :placeholder="$t('overall.search')"
+              size="small"
+            ></el-input>
+            <el-table
+                  :data="tableData"
+                  border
+                  height="calc(100% - 65px)"
+                  style="width: 100%;">
+                <el-table-column
+                  v-for="(item, index) in tableTitle"
+                  v-if="item.show"
+                  :width="item.width"
+                  :key="`col-${index}`"
+                  :label="item.label"
+                  show-overflow-tooltip
+                >
+                    <template slot-scope="scope" :column="item">
+                        <div v-if="item.prop == 'option'" class="account-list-options">
+                            <span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span>
+                            <span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
+                            <span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
+                        </div>
+                      <!--<span v-else-if="item.prop == 'lang'">
+                          {{scope.row[item.prop] == 'en' ? 'English' : ''}}
+                          {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
+                          {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
+                      </span>
+                      <span v-else-if="item.prop == 'receiver'">
+                          <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
+                      </span>
+                      <span v-else-if="item.prop == 'status'">
+                          <el-switch
+                            v-model="scope.row[item.prop]"
+                            active-value="1"
+                            inactive-value="0">
+                          </el-switch>
+                      </span>-->
+                        <span v-else>{{scope.row[item.prop]}}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        </div>
+
+        <transition name="right-box">
+            <div class="right-box right-box-account" v-if="rightBox.show">
+                <!-- begin--顶部按钮-->
+                <div class="right-box-top-btns">
+                    <div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-close"></i>
+                        </div>
+                        <span>{{$t('overall.esc')}}</span>
+                    </div>
+                    <div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-edit-outline"></i>
+                        </div>
+                        <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
+                        <span v-else>{{$t('overall.edit')}}</span>
+                    </div>
+                    <div class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
+                        <div class="right-box-btn-icon">
+                            <i class="el-icon-delete"></i>
+                        </div>
+                        <span>{{$t('overall.delete')}}</span>
+                    </div>
+                </div>
+                <!-- end--顶部按钮-->
+
+                <!-- begin--标题-->
+                <div class="right-box-title">{{rightBox.title}}</div>
+                <!-- end--标题-->
+
+                <!-- begin--表单-->
+                <div class="right-box-form">
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.config.name')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              v-if="rightBox.isEdit"
+                              type="text"
+                              placeholder=""
+                              v-model="alertRule.alertName"
+                              maxlength="64"
+                              show-word-limit
+                              size="small"
+                            ></el-input>
+                            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.config.expr')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              type="textarea"
+                              v-if="rightBox.isEdit"
+                              placeholder=""
+                              v-model="alertRule.expr"
+                              size="small"
+                            ></el-input>
+                          <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.config.for')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              type="text"
+                              v-if="rightBox.isEdit"
+                              placeholder=""
+                              v-model="alertRule.last"
+                              size="small"
+                            ></el-input>
+                          <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.severity')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              type="text"
+                              v-if="rightBox.isEdit"
+                              placeholder=""
+                              v-model="alertRule.severity"
+                              size="small"
+                            ></el-input>
+                          <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.summary')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              type="text"
+                              v-if="rightBox.isEdit"
+                              placeholder=""
+                              v-model="alertRule.summary"
+                              size="small"
+                            ></el-input>
+                          <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('alarm.description')}}</div>
+                        <div class="right-box-form-content">
+                            <el-input
+                              type="textarea"
+                              v-if="rightBox.isEdit"
+                              placeholder=""
+                              v-model="alertRule.description"
+                              size="small"
+                            ></el-input>
+                            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
+                        </div>
+                    </div>
+                    <div class="right-box-form-row">
+                        <div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
+                        <div class="right-box-form-content">
+                            <el-select value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
+                                <el-option
+                                  @click.native="blurEditReceiver()"
+                                  v-for="item in receiverData"
+                                  :key="item.id"
+                                  :label="item.name"
+                                  :value="item">
+                                    <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
+                                    <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
+                                        <el-input
+                                          type="text"
+                                          v-model="item.name"
+                                          size="mini"
+                                        ></el-input>
+                                    </span>
+                                    <span class="config-dropdown-error-message">{{item.errorMessage}}</span>
+                                    <span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
+                                        <i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
+                                        <i class="el-icon-check" v-if="item.isEdit"></i>
+                                    </span>
+                                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
+                                </el-option>
+                            </el-select>
+                            <div class="el-select-add-btn" v-if="rightBox.isEdit">
+                                <span class="el-icon-plus"></span>
+                            </div>
+                            <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- end--表单-->
+
+                <!-- begin--底部按钮-->
+                <div class="right-box-bottom-btns">
+                    <div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+                </div>
+                <!-- end--底部按钮-->
+
+            </div>
+        </transition>
+    </div>
+
+</template>
+<script>
+export default {
+  name: "account",
+  data() {
+    return {
+      rightBox: { //弹出框相关
+        show: false,
+        isEdit: false, //false查看，true编辑
+        title: ''
+      },
+      alertRule: {
+        id: '',
+        alertName: '',
+        type: '',
+        linkId: '',
+        expr: '',
+        last: '',
+        severity: '',
+        summary: '',
+        description: '',
+        receiver: '',
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total:9
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t("alarm.alarmName"),
+          prop: 'alertName',
+          show: true,
+        }, {
+          label: this.$t("alarm.config.expr"),
+          prop: 'expr',
+          show: true,
+        }, {
+          label: this.$t("alarm.config.for"),
+          prop: 'last',
+          show: true,
+        }, {
+          label: this.$t('alarm.severity'),
+          prop: 'severity',
+          show: true,
+        }, {
+          label: this.$t('alarm.description'),
+          prop: 'description',
+          show: true,
+        }, {
+          label: this.$t('alarm.config.receiver'),
+          prop: 'receiver',
+          show: true,
+        }, {
+          label: this.$t('alarm.config.option'),
+          prop: 'option',
+          show: true,
+        }
+      ],
+      receiverData: [{
+        id: '1',
+        name: 'group1',
+        description: '小组1desc'
+      }, {
+        id: '2',
+        name: 'group2',
+        description: '小组2desc'
+      }, {
+        id: '3',
+        name: '小组3',
+        description: '小组3desc'
+      }, {
+        id: '4',
+        name: '小组4',
+        description: '小组4desc'
+      }, {
+        id: '5',
+        name: '小组啊小组5',
+        description: '小组5desc'
+      }, {
+        id: '6',
+        name: '小组6',
+        description: '小组6desc'
+      }],
+      tableData: []
+    }
+  },
+  methods: {
+    edit: function(u) {
+      this.alertRule = Object.assign({}, u);
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + "  ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    del: function(u) {
+    },
+    detail: function(u) {
+      this.alertRule = Object.assign({}, u);
+      this.rightBox.isEdit = false;
+      this.rightBox.title = this.$t("alarm.config.alarmConfig") + "  ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    add: function() {
+      this.cleanAlertRule();
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("alarm.config.createAlarmConfig");
+      this.rightBox.show = true;
+    },
+    saveOrToEdit: function() {
+      if (!this.rightBox.isEdit) {
+        this.rightBox.isEdit = true;
+        this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + "  ID：" + this.alertRule.id;
+      }
+    },
+    toEditReceiver: function(item) {
+      if (!item.isEdit) {
+        //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
+        this.blurEditReceiver();
+        item.isEdit = true;
+      } else {
+        //如果已在编辑状态，判断name是否有变更，有变更则发请求
+        if (item.name != item.oldName) {
+          if (this.updateReceiverName(item) == 200) {
+            item.isEdit = false;
+          }
+        } else {
+          item.errorMessage = '';
+          item.isEdit = false;
+        }
+      }
+    },
+    blurEditReceiver: function() {
+      for (var i = 0; i < this.receiverData.length; i++) {
+        if (this.receiverData[i].isEdit) {
+          this.receiverData[i].name = this.receiverData[i].oldName;
+          this.receiverData[i].isEdit = false;
+          this.receiverData[i].errorMessage = '';
+          break;
+        }
+      }
+    },
+    toDelReceiver: function(item) {
+      this.blurEditReceiver();
+      //TODO 请求后台，删除组
+    },
+    initReceiverData: function() {
+      for (var i = 0; i < this.receiverData.length; i++) {
+        this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
+        this.$set(this.receiverData[i], 'isEdit', false);
+      }
+    },
+    getTableData: function() {
+      this.$get('alert/rule', this.pageObj).then(response => {
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    esc: function() {
+      this.rightBox.show = false;
+    },
+    stopFun: function() {
+
+    },
+    updateReceiverName: function(item) {
+      //TODO 请求接口改名
+      var code = 200;
+      //this.$set(item, 'errorMessage', 'err');
+      item.errorMessage = '';
+      item.oldName = item.name;
+      return code;
+    },
+    cleanAlertRule: function() {
+      this.alertRule = {
+        id: '',
+        alertName: '',
+        type: '',
+        linkId: '',
+        expr: '',
+        last: '',
+        severity: '',
+        summary: '',
+        description: '',
+        receiver: '',
+      }
+    },
+    pageNo(val) {
+      this.pageObj.pageNo = val;
+      this.getTableData()
+    },
+    pageSize(val) {
+      this.pageObj.pageSize = val;
+      this.getTableData()
+    }
+  },
+  mounted() {
+    this.getTableData();
+    this.initReceiverData();
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/alarm/list.vue b/nezha-fronted/src/components/page/alarm/list.vue
new file mode 100644
index 000000000..f136ed9ad
--- /dev/null
+++ b/nezha-fronted/src/components/page/alarm/list.vue
@@ -0,0 +1,325 @@
+<style scoped>
+  .account {
+    height: 100%;
+  }
+  .content-left {
+    float: left;
+    width: 370px;
+    height: 100%;
+  }
+  .sidebar-title {
+    padding-left: 30px;
+    padding-top: 20px;
+  }
+
+  .sidebar-info {
+    margin-top: 20px;
+    border: 1px solid #acacac;
+    border-radius: 8px;
+    height: calc(90vh - 55px);
+    width: calc(100% - 30px);
+  }
+
+  .sidebar-info-header {
+    background: #acacac;
+    text-align: center;
+    line-height: 50px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 60px;
+    width: 100%;
+  }
+
+  .sidebar-info-footer {
+    padding-top: 15px;
+    padding-left: 15px;
+  }
+  .account-list {
+    height: calc(100% - 131px);
+    margin-left: 370px;
+    padding: 0 15px 0 0;
+  }
+  .account-list-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+  .account-list-option .el-icon-delete {
+    color: #F98D9A;
+  }
+  .account-list-option .el-icon-delete:hover {
+    color: #D96D7A;
+  }
+  .account-list-option .el-icon-view {
+    color: #60BEFF;
+  }
+  .account-list-option .el-icon-view:hover {
+    color: #409EFF;
+  }
+  .account-list-search {
+    float: right;
+    width: 220px;
+    margin: 15px 0;
+  }
+  /* begin--右侧弹框*/
+  .right-box {
+    position: fixed;
+    top: 80px;
+    right: 15px;
+    z-index: 1;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ccc;
+    background-color: white;
+    padding: 0 20px;
+  }
+  .right-box-account {
+    width: 550px;
+    height: calc(100% - 100px);
+  }
+  /* begin--右侧弹框--顶部按钮*/
+  .right-box-top-btns {
+    text-align: center;
+  }
+  .right-box-top-btn {
+    border-radius: 0 0 9px 9px;
+    float: right;
+    color: #656565;
+    height: 30px;
+    font-size: 12px;
+    padding: 3px 8px 1px 8px;
+    border: 1px solid #aaaaaa;
+    border-top: none;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+  .right-box-top-btn-full {
+    background-color: #656565;
+    border: 1px solid #656565;
+    border-top: none;
+    color: white;
+   }
+  /* end--右侧弹框--顶部按钮*/
+
+  /* begin--右侧弹框--内容*/
+  .right-box-title {
+    height: 30px;
+    line-height: 40px;
+    text-align: left;
+  }
+  .right-box-form {
+    margin-top: 35px;
+  }
+  .right-box-form-row {
+    margin-top: 25px;
+  }
+  .right-box-form-label {
+    margin-bottom: 8px;
+    text-align: left;
+  }
+  .right-box-form-content {
+    line-height: 32px;
+    text-align: left;
+    width: 100%;
+  }
+  .right-box-form-content-txt {
+    padding-left: 11px;
+  }
+  .right-box-form-content .el-select {
+    width: calc(100% - 38px);
+    vertical-align: top;
+  }
+  .el-select-add-btn {
+    width: 33px;
+    height: 33px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 5px;
+    border: 1px solid #DCDFE6;
+    box-sizing: border-box;
+    color: #C7C9CE;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  }
+  .el-select-add-btn:hover {
+    border: 1px solid #C0C4CC;
+    cursor: pointer;
+  }
+  /* end--右侧弹框--内容*/
+
+  /* begin--右侧弹框--底部按钮*/
+  .right-box-bottom-btns {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    left: 0;
+    text-align: center;
+  }
+  .right-box-bottom-btn:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+  .right-box-bottom-btn:last-of-type{
+    border-bottom-right-radius: 8px;
+  }
+  .right-box-bottom-btn {
+    display: inline-block;
+    background-color: #656565;
+    color: white;
+    height: 100%;
+    line-height: 40px;
+    cursor: pointer;
+    width: 100%;
+  }
+  .config-dropdown-label-input {
+    width: 50%;
+    display: inline-block;
+  }
+  .right-box-bottom-btn-cancel {
+    background-color: #DADADA;
+    color: #656565;
+  }
+  .right-box-bottom-btn-50 {
+    width: 50%;
+  }
+  /* end--右侧弹框--底部按钮*/
+  /* end--右侧弹框*/
+
+  /* begin--右弹框滑入滑出动画*/
+  @keyframes slide-in-from-right {
+    from {right: -800px}
+    to {right: 0}
+  }
+  @keyframes slide-out-to-right {
+    from {right: 0}
+    to {right: -800px}
+  }
+  .right-box-enter-active {
+    animation: slide-in-from-right 0.4s;
+  }
+  .right-box-leave-active {
+    animation: slide-out-to-right 0.4s;
+  }
+  /* end--右弹框滑入滑出动画*/
+</style>
+<template>
+    <div class="account">
+      <div class="content-left">
+        <div class="sidebar-title">
+          <div>Config</div>
+          <div class="sidebar-info">
+            <div class="sidebar-info-footer" v-if="sidebarState">
+            </div>
+          </div>
+        </div>
+      </div>
+        <div class="account-list">
+            <el-input
+              class="account-list-search"
+              type="text"
+              :placeholder="$t('overall.search')"
+              size="small"
+            ></el-input>
+            <el-table
+                  :data="tableData"
+                  border
+                  height="calc(100% - 65px)"
+                  style="width: 100%;">
+                <el-table-column
+                  v-for="(item, index) in tableTitle"
+                  v-if="item.show"
+                  :width="item.width"
+                  :key="`col-${index}`"
+                  :label="item.label"
+                >
+                    <template slot-scope="scope" :column="item">
+                        <div v-if="item.prop == 'type'" class="account-list-options">
+                            <span v-if="scope.row[item.prop] == 1" class="account-list-option">Project Alarm</span>
+                            <span v-if="scope.row[item.prop] == 2" class="account-list-option">Module Alarm</span>
+                            <span v-if="scope.row[item.prop] == 3" class="account-list-option">Device Alarm</span>
+                        </div>
+                        <div v-else-if="item.prop == 'linkObject'">
+                            <span v-if="scope.row['type'] == 1 || scope.row['type'] == 2" class="account-list-option">{{scope.row[item.prop].name}}</span>
+                            <span v-if="scope.row['type'] == 3" class="account-list-option">{{scope.row[item.prop].host}}</span>
+                        </div>
+                        <div v-else-if="item.prop == 'state'">
+                            <span class="account-list-option">
+                                {{scope.row['state'] == 1 ? "Pending" : ""}}
+                                {{scope.row['state'] == 2 ? "Expired" : ""}}
+                            </span>
+                        </div>
+                        <span v-else>{{scope.row[item.prop]}}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        </div>
+
+    </div>
+
+</template>
+<script>
+export default {
+  name: "alarmList",
+  data() {
+    return {
+      pageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total:13
+      },
+      tableTitle: [
+        {
+          label: this.$t("alarm.alarmName"),
+          prop: 'alertName',
+          show: true
+        }, {
+          label: this.$t("alarm.startAt"),
+          prop: 'startAt',
+          show: true,
+        }, {
+          label: this.$t("alarm.list.type"),
+          prop: 'type',
+          show: true,
+        }, {
+          label: this.$t("alarm.list.linkedId"),
+          prop: 'linkObject',
+          show: true,
+        }, {
+          label: this.$t("alarm.severity"),
+          prop: 'severity',
+          show: true,
+        }, {
+          label: this.$t('alarm.summary'),
+          prop: 'summary',
+          show: true,
+        }, {
+          label: this.$t('alarm.description'),
+          prop: 'description',
+          show: true,
+        }, {
+          label: this.$t('alarm.list.state'),
+          prop: 'state',
+          show: true,
+        }, {
+          label: this.$t('alarm.endAt'),
+          prop: 'endAt',
+          show: true,
+        }
+      ],
+      tableData: []
+    }
+  },
+  methods: {
+    getAlarmList: function() {
+      this.$get('alert/message', this.pageObj).then(response => {
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+        }
+      })
+    }
+  },
+  mounted() {
+    this.getAlarmList();
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 96d3d7fef..736a951d7 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -2,8 +2,42 @@
   .account {
     height: 100%;
   }
+  .content-left {
+    float: left;
+    width: 370px;
+    height: 100%;
+  }
+  .sidebar-title {
+    padding-left: 30px;
+    padding-top: 20px;
+  }
+
+  .sidebar-info {
+    margin-top: 20px;
+    border: 1px solid #acacac;
+    border-radius: 8px;
+    height: calc(90vh - 55px);
+    width: calc(100% - 30px);
+  }
+
+  .sidebar-info-header {
+    background: #acacac;
+    text-align: center;
+    line-height: 50px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 60px;
+    width: 100%;
+  }
+
+  .sidebar-info-footer {
+    padding-top: 15px;
+    padding-left: 15px;
+  }
   .account-list {
-    height: calc(100% - 51px);
+    height: calc(100% - 131px);
+    margin-left: 370px;
+    padding: 0 15px 0 0;
   }
   .account-list-option {
     cursor: pointer;
@@ -30,8 +64,8 @@
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
-    top: 20px;
-    right: 0;
+    top: 80px;
+    right: 15px;
     z-index: 1;
     border-radius: 8px;
     box-shadow: 0 0 15px #ccc;
@@ -40,7 +74,7 @@
   }
   .right-box-account {
     width: 550px;
-    height: calc(100% - 61px);
+    height: calc(100% - 100px);
   }
   /* begin--右侧弹框--顶部按钮*/
   .right-box-top-btns {
@@ -83,7 +117,6 @@
     text-align: left;
   }
   .right-box-form-content {
-    height: 32px;
     line-height: 32px;
     text-align: left;
     width: 100%;
@@ -169,6 +202,15 @@
 </style>
 <template>
     <div class="account">
+        <div class="content-left">
+            <div class="sidebar-title">
+                <div>Config</div>
+                <div class="sidebar-info">
+                    <div class="sidebar-info-footer" v-if="sidebarState">
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="account-list">
             <el-input
               class="account-list-search"
@@ -213,8 +255,9 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+
         <transition name="right-box">
             <div class="right-box right-box-account" v-if="rightBox.show">
                 <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 30c9b4e6b..4b599bb5b 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -2,8 +2,42 @@
   .prom {
     height: 100%;
   }
+  .content-left {
+    float: left;
+    width: 370px;
+    height: 100%;
+  }
+  .sidebar-title {
+    padding-left: 30px;
+    padding-top: 20px;
+  }
+
+  .sidebar-info {
+    margin-top: 20px;
+    border: 1px solid #acacac;
+    border-radius: 8px;
+    height: calc(90vh - 55px);
+    width: calc(100% - 30px);
+  }
+
+  .sidebar-info-header {
+    background: #acacac;
+    text-align: center;
+    line-height: 50px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 60px;
+    width: 100%;
+  }
+
+  .sidebar-info-footer {
+    padding-top: 15px;
+    padding-left: 15px;
+  }
   .prom-list {
-    height: calc(100% - 51px);
+    height: calc(100% - 131px);
+    margin-left: 370px;
+    padding: 0 15px 0 0;
   }
   .prom-list-option {
     cursor: pointer;
@@ -30,8 +64,8 @@
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
-    top: 20px;
-    right: 0;
+    top: 80px;
+    right: 15px;
     z-index: 1;
     border-radius: 8px;
     box-shadow: 0 0 15px #ccc;
@@ -40,7 +74,7 @@
   }
   .right-box-prom {
     width: 550px;
-    height: calc(100% - 61px);
+    height: calc(100% - 100px);
   }
   /* begin--右侧弹框--顶部按钮*/
   .right-box-top-btns {
@@ -83,7 +117,6 @@
     text-align: left;
   }
   .right-box-form-content {
-    height: 32px;
     line-height: 32px;
     text-align: left;
     width: 100%;
@@ -169,6 +202,15 @@
 </style>
 <template>
     <div class="prom">
+        <div class="content-left">
+            <div class="sidebar-title">
+                <div>Config</div>
+                <div class="sidebar-info">
+                    <div class="sidebar-info-footer" v-if="sidebarState">
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="prom-list">
             <el-input
               class="prom-list-search"
@@ -203,8 +245,9 @@
                   </template>
                 </el-table-column>
             </el-table>
+            <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+
         <transition name="right-box">
             <div class="right-box right-box-prom" v-if="rightBox.show">
                 <!-- begin--顶部按钮-->
@@ -381,7 +424,7 @@ export default {
     edit: function(u) {
       this.promServer = Object.assign({}, u);
       this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("config.prom.editProm") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + u.id;
       this.rightBox.show = true;
     },
     del: function(u) {
@@ -395,13 +438,13 @@ export default {
     add: function() {
       this.cleanPromServer();
       this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("config.prom.createProm");
+      this.rightBox.title = this.$t("config.promServer.createProm");
       this.rightBox.show = true;
     },
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
         this.rightBox.isEdit = true;
-        this.rightBox.title = this.$t("config.prom.editProm") + "  ID：" + this.promServer.id;
+        this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + this.promServer.id;
       }
     },
     toEditIdc: function(item) {