Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0

nezha-fronted/src/assets/stylus/main.scss

@@ -362,7 +362,7 @@ li{
 .nz-btn-disabled {
   background-image: none;
   opacity: .6;
-  cursor: default;
+  cursor: default !important;
 }
 .nz-btn-group {
   border-radius: 2px;

nezha-fronted/src/components/common/language/cn.js

@@ -1121,7 +1121,7 @@ const cn = {
       create: '创建告警静默',
       edit: '修改告警静默',
       time: '时间',
-      matchers: 'matchers',
+      matchers: '规则',
       remark: '描述',
       selectTime: '请选择时间',
       selectMather: '必填项',
@@ -1148,7 +1148,7 @@ const cn = {
       endpointInfo: 'Endpoint信息'
     },
     project: {
-      project: '系统',
+      project: '名称',
       projectName: '系统名称',
       editProject: '编辑系统',
       description: '描述',
@@ -1175,7 +1175,7 @@ const cn = {
       authProtocol: '认证协议',
       privProtocol: '隐私协议',
       contextName: '内容名称',
-      alerts: 'Alerts',
+      alerts: '告警',
       privpin: '隐私密码',
       asset: 'Asset',
       editEndpoint: '编辑 Endpoint',

nezha-fronted/src/components/common/language/en.js

@@ -1143,7 +1143,7 @@ const en = {
       create: 'New alert silence',
       edit: 'Edit alert silence',
       time: 'Time',
-      matchers: 'matchers',
+      matchers: 'Matchers',
       remark: 'Description',
       selectTime: 'Please select time',
       selectMather: 'Required',
@@ -1194,7 +1194,7 @@ const en = {
       privProtocol: 'Priv protocol',
       contextName: 'Context name',
       privpin: 'Priv password',
-      alerts: 'Alerts',
+      alerts: 'Alert',
       asset: 'Asset',
       editEndpoint: 'Edit endpoint',
       createEndpoint: 'New endpoint',

nezha-fronted/src/components/common/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login" @click="langListShow = false">
     <div class="model"></div>
-    <div class="logo"><img height="155" src="../../assets/img/logo-big.png"></div>
+    <div class="logo"><img src="../../assets/img/logo-big.png"></div>
     <div class='login-box'>
       <div class="login-label"></div>
       <div class="login-input">
@@ -14,7 +14,7 @@
         <input v-model="loginData.pin" type="password" name="password" autocomplete="on" :placeholder="$t('login.pin')"></input>
       </div>
       <div class="login-foot">
-        <button @click="login" class="login-btn" id="login" v-loading="loading" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed':!license.valid}">{{$t("login.login")}}</button>
+        <button id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
         <div class="login-foot-lang" @click.stop="langListShow = !langListShow">
           <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
           <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
@@ -27,7 +27,7 @@
       </div>
       <div class="login-license">
         <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
-        <div class="license-info" v-if="!license.valid">INSTALLATION ID:{{license.token}}</div>
+        <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>
         <div class="license-upload" v-if="!license.valid">
           <el-upload
             ref="upload"
@@ -50,7 +50,6 @@
 
 <script>
 import { mapActions } from 'vuex'
-import moment from 'moment-timezone'
 export default {
   name: 'login',
   data () {
@@ -75,7 +74,7 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading) {
+      if (this.loading || !this.license.valid) {
         return
       }
       // if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
@@ -112,9 +111,12 @@ export default {
         return true
       }
     },
-    licenseStat: function () {
+    licenseStat () {
+      /*this.license.valid = false
+      this.license.warnInfo = 'hehehe'
+      this.license.token = 'dRqrWja/PzI8FrWVJeGqLw=='*/
       this.$get('/sys/license/state').then(response => {
-        if (response.code === 200) {
+        if (response.code && response.code === 200) {
           this.license.warnInfo = ''
           this.license.valid = true
         } else {
@@ -124,7 +126,7 @@ export default {
         this.license.token = response.token
       })
     },
-    handleChange: function (file, fileList) {
+    handleChange (file, fileList) {
       if (fileList.length > 0) {
         this.uploadFileList = [fileList[fileList.length - 1]]
       }
@@ -144,7 +146,7 @@ export default {
     }
   },
   watch: {
-    /* 'loginData.username': function(n, o) {
+    /* 'loginData.username'(n, o) {
       let lang = localStorage.getItem('nz-language-' + n);
       if (lang) {
         this.lang = lang;
@@ -168,9 +170,13 @@ export default {
 
 <style scoped lang="scss">
 .login {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
   background-image: url("../../assets/img/login-background.png");
   background-size: cover;
-  position: relative;
 }
 .model {
   height: 100%;
@@ -183,24 +189,20 @@ export default {
 }
 
 .logo {
-  position: absolute;
-  top: 25%;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 2;
+  width: 460px;
+  img{
+    width: 100%;
+  }
 }
 
 .login-box {
-  width: 460px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 50%;
   z-index: 2;
+  width: 460px;
 }
 
 .login-box .login-input {
-  padding: 20px 0;
+  padding: 12px 0;
   height: 60px;
   position: relative;
 }
@@ -233,15 +235,18 @@ export default {
 
 .login-btn {
   color: white;
-  border-radius: 3px;
+  border-radius: $--button-border-radius;
-  background-image: $btn-normal-background-color;
+  background-color: var(--theme-color-light-20);
   border: none;
   outline: none;
   height: 44px;
   width: 320px;
   cursor: pointer;
   font-size: 14px;
-  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.30);
+  transition: all linear .2s;
+}
+.login-btn:not(.nz-btn-disabled):hover {
+  background-color: var(--theme-color-light-30);
 }
 
 .login-foot-lang {
@@ -288,7 +293,8 @@ export default {
   position: absolute;
   bottom: 20px;
   z-index: 100;
-  left: calc(50% - 90px);
+  left: 50%;
+  transform: translateX(-50%);
   a{
     font-size: 14px;
     color: #eee;
@@ -309,23 +315,21 @@ export default {
   text-align: center;
   line-height: 30px;
   .license-warn{
-    color: #EF7458;
+    color: #d92926;
+    text-shadow: 1px 1px 3px #ddd;
   }
   .license-info {
+    margin-bottom: 10px;
+    color: white;
+    text-shadow: 1px 1px 3px #333;
     white-space: nowrap;
   }
   .login-btn{
-    height: 30px;
+    height: 40px;
-    width: 120px;
+    width: auto;
+    padding: 0 20px;
   }
 }
-.login-btn.nz-btn-disabled{
-  background-image: none;
-  color: #e5e5e5;
-  background-color: #ffffff;
-  border-color: #e5e5e5 ;
-  cursor: default;
-}
 </style>
 <style>
   .license-upload .el-upload-list{

nezha-fronted/src/components/common/mixin/dataList.js

@@ -234,9 +234,12 @@ export default {
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
+    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
-      : this.$refs.dataTable.tableTitle
+    this.tools.customTableTitle = localStorageTableTitle.map((item, index) => { // 修复切换中英文的问题
+      item.label = this.$refs.dataTable.tableTitle[index].label
+      return item
+    })
     if (!this.fromBottom) {
       this.getTableData()
     }

nezha-fronted/src/components/common/popBox/guide.vue

@@ -1,12 +1,9 @@
 <template>
-  <div>
   <el-dialog
     :title="$t('guide.title')"
     :visible.sync="visible"
     custom-class="guild-pop"
     width="1000px"
-      @closed="dialogClosed"
-      @open="dialogOpened"
   >
     <div class="guide-list">
       <div ref="guideShadow" class="guide-shadow"></div>
@@ -64,7 +61,6 @@
       </template>
     </div>
   </el-dialog>
-  </div>
 </template>
 
 <script>
@@ -122,14 +118,6 @@ export default {
     }
   },
   methods: {
-    dialogOpened () {
-      if (this.$refs.changePinForm) {
-        this.$refs.changePinForm.resetFields()
-      }
-    },
-    dialogClosed () {
-      this.$emit('dialogClosed')
-    },
     close () {
       this.visible = false
     },
@@ -142,10 +130,10 @@ export default {
       this.interval && clearInterval(this.interval)
     },
     downloadAgent () {
-
+      // TODO
     },
     openTerminal () {
-
+      // TODO
     },
     jump (route) {
       this.visible = false

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -160,7 +160,7 @@ export default {
       } else if (this.importUrl.indexOf('rule') > -1) {
         url = '/alert/rule/cancelImport'
       } else if (this.importUrl.indexOf('panel') > -1) {
-        url = '/panel/cancelImport'
+        url = 'visual/panel/cancelImport'
       } else if (this.importUrl.indexOf('tmpl') > -1) {
         url = '/expression/tmpl/cancelImport'
       }
@@ -227,7 +227,7 @@ export default {
       } else if (this.importUrl.indexOf('rule') > -1) {
         url = '/alert/rule/template'
       } else if (this.importUrl.indexOf('panel') > -1) {
-        url = '/panel/template'
+        url = 'visual/panel/template'
       } else if (this.importUrl.indexOf('endpoint') > -1) {
         url = '/monitor/endpoint/template'
       } else if (this.importUrl.indexOf('tmpl') > -1) {

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -127,12 +127,12 @@ export default {
           sortable: 'custom'
         },
         {
-          label: 'Name',
+          label: this.$t('alert.silence.name'),
           prop: 'name',
           show: true,
           width: 150
         }, {
-          label: 'Matchers',
+          label: this.$t('alert.silence.matchers'),
           prop: 'matchers',
           show: true,
           sortable: 'custom'

nezha-fronted/src/components/page/alert/alertRule.vue

@@ -12,15 +12,16 @@
       <template v-slot:top-tool-right>
         <export-excel
           id="alert-rule"
+          :permissions="{import: 'alertRule_add'}"
           :params="searchLabel"
-          :permissions="{import: 'rule_import', export: 'rule_export'}"
+          class="top-tool-export margin-r-10"
           export-file-name="AlertRule"
           export-url="/alert/rule/export"
           import-url="/alert/rule/import"
           @afterImport="getTableData"
         >
           <template slot="optionZone">
-            <button id="alert-add" v-has="'alertRule_add'" :title="$t('overall.createAlertRule')" class="top-tool-btn margin-r-10"
+            <button id="alert-add" v-has="'alertRule_add'" :title="$t('overall.createAlertRule')" class="top-tool-btn"
                     @click="add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>

nezha-fronted/src/components/page/config/menus.vue

@@ -125,6 +125,12 @@ export default {
         }]
       }
     }
+  },
+  methods: {
+    edit (u) {
+      this.object ={...u}
+      this.rightBox.show = true
+    },
   }
 }
 </script>

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nz-data-list
+    <nzDataList
       ref="dataList"
       :api="url"
       :layout="['searchInput', 'elementSet']"
@@ -58,7 +58,7 @@
       <template v-slot:pagination>
         <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
-    </nz-data-list>
+    </nzDataList>
     <transition name="right-box">
       <chart-box :chart="object" :show-panel="showPanel" :from="'temp'"  @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
@@ -70,7 +70,6 @@ import bus from '@/libs/bus'
 import exportXLSX from '@/components/common/exportXLSX'
 import chartBox from '@/components/page/dashboard/chartBox'
 import deleteButton from '@/components/common/deleteButton'
-import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
 
@@ -79,7 +78,6 @@ export default {
   components: {
     chartBox,
     deleteButton,
-    nzDataList,
     chartTmplTable,
     'export-excel': exportXLSX
   },

nezha-fronted/src/components/page/config/template/exprTemp.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nz-data-list
+    <nzDataList
       ref="dataList"
       :api="url"
       :layout="['searchInput', 'elementSet']"
@@ -37,7 +37,8 @@
         </export-excel>
 
         <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
-                       id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button></template>
+                       id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button>
+      </template>
       <template v-slot:default="slotProps">
         <expr-tmpl-table
           ref="dataTable"
@@ -58,7 +59,7 @@
       <template v-slot:pagination>
         <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
-    </nz-data-list>
+    </nzDataList>
     <transition name="right-box">
       <expr-tmpl-box v-if="rightBox.show" :exprTemp="object" @close="closeRightBox"></expr-tmpl-box>
     </transition>
@@ -84,7 +85,6 @@ import bus from '@/libs/bus'
 import exportXLSX from '@/components/common/exportXLSX'
 import exprTmplBox from '@/components/common/rightBox/exprTmplBox'
 import deleteButton from '@/components/common/deleteButton'
-import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import exprTmplTable from '@/components/common/table/settings/exprTmplTable'
 
@@ -93,7 +93,6 @@ export default {
   components: {
     deleteButton,
     exprTmplBox,
-    nzDataList,
     exprTmplTable,
     'export-excel': exportXLSX
   },

nezha-fronted/src/components/page/config/template/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="temp">
-    <exprTemp class="template-tab" :show-tab="showTab" v-show="showTab == 'exprTemp'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></exprTemp>
+    <exprTemp class="template-tab" :show-tab="showTab" v-if="showTab == 'exprTemp'" @changeShowTab="changeShowTab"></exprTemp>
-    <chartTemp class="template-tab" :show-tab="showTab" v-if="showTab == 'chartTemp'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></chartTemp>
+    <chartTemp class="template-tab" :show-tab="showTab" v-if="showTab == 'chartTemp'" @changeShowTab="changeShowTab"></chartTemp>
   </div>
 </template>
 
@@ -9,14 +9,14 @@
 import exprTemp from './exprTemp'
 import chartTemp from './chartTemp'
 export default {
-  name: 'template',
+  name: 'v-template',
   components: {
     exprTemp,
     chartTemp
   },
   data () {
     return {
-      showTab: 'exprTemp'
+      showTab: ''
     }
   },
   methods: {
@@ -45,16 +45,10 @@ export default {
       this.showTab = showTab
     }
   },
-  watch: {
+  mounted () {
-    $routePath: {
+    this.$nextTick(()=>{
-
+      this.showTab = 'exprTemp'
-      immediate: true,
+    })
-      handler (n, o) {
-        if (n.indexOf('mib') != -1 && this.$route.params.tab) {
-          this.$set(this, 'showTab', this.$route.params.tab)
-        }
-      }
-    }
   }
 }
 </script>

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -57,7 +57,7 @@
                 </template>
                 <template v-slot:after>
                   <el-dropdown-item v-has="'panel_chart_add'">
-                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add by template</div>
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>Add by template</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>

nezha-fronted/src/main.js

@@ -33,6 +33,7 @@ import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from 'v-selectpage'
+import nzDataList from '@/components/common/table/nzDataList'
 Vue.use(vSelectPage, {
   dataLoad: function (vue, url, params) {
     if (params.pageNumber) {
@@ -52,6 +53,7 @@ Vue.component('element-set', elementSet)
 Vue.component('loading', loading)
 Vue.component('pick-time', pickTime)
 Vue.component('myDatePicker', myDatePicker)
+Vue.component('nzDataList', nzDataList)
 
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post

nezha-fronted/src/permission.js

@@ -1,6 +1,6 @@
 import router from './router'
 import store from './store'
-import { post } from './http'
+import { get, post } from './http'
 import ElementUI from 'element-ui'
 import Vue from 'vue'
 import i18n from './components/common/i18n'
@@ -8,19 +8,32 @@ import VueResource from 'vue-resource'
 
 Vue.use(VueResource)
 
-const loginWhiteList = ['/login', '/setup', '/sys/license/upload', '/sys/license/state'] // 免登陆白名单
+const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state'] // 免登陆白名单
 const permissionWhiteList = ['/menu', ...loginWhiteList] // 权限白名单
 
 router.beforeEach((to, from, next) => {
-  if (sessionStorage.getItem('nz-token')) {
+  if (to.path === '/login') { // 拦截登录页面，系统初始化检查
+    const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
+    Vue.http.get(configUrl).then(config => {
+      get(config.body.baseUrl + 'setup/inited').then(res => {
+        if (res.code === 200) {
+          if (res.inited === 0) {
+            next({ path: '/setup' })
+          } else {
+            next()
+          }
+        }
+      })
+    })
+  } else if (sessionStorage.getItem('nz-token')) {
     if (permissionWhiteList.indexOf(to.path) !== -1) {
       next()
     } else {
       new Promise(resolve => {
         if (store.getters.menuList.length === 0) {
           const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
-          Vue.http.get(configUrl).then(res => {
+          Vue.http.get(configUrl).then(config => {
-            post(res.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
+            post(config.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
               store.commit('setMenuList', sortByOrderNum(res.data.menus))
               store.commit('setButtonList', res.data.buttons)
               store.commit('setRoleList', res.data.roles)