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

nezha-fronted/src/assets/css/common.scss

@@ -100,6 +100,10 @@
   line-height: 20px;
   font-weight: 400;
   margin-top: 3px;
+  max-width: 30%;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
 }
 .timezone-offset{
   display: inline-block;

nezha-fronted/src/components/charts/chartPreview.vue

@@ -182,6 +182,7 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
+import moment from "moment-timezone";
 export default {
   name: 'chartPreview',
   components: {
@@ -878,7 +879,8 @@ export default {
               const tip = legend[item.seriesIndex]
               const color = self.bgColorList[item.seriesIndex]
               if (i === 0) {
-                const tData = new Date(item.data[0])
+                const value = bus.computeTimezone(item.data[0])
+                const tData = new Date(value)
                 str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
                     [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
                 str += '<br/>'

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -199,6 +199,7 @@ import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
 import { getMetricTypeValue } from '../common/js/tools'
+import moment from 'moment-timezone'
 
 export default {
   name: 'lineChartBlock',
@@ -742,7 +743,7 @@ export default {
               const tip = legend[item.seriesIndex]
               const color = self.bgColorList[item.seriesIndex]
               if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                const value = item.data[0]
+                const value = bus.computeTimezone(item.data[0])
                 const tData = new Date(value)
                 str += '<div style="margin-bottom: 5px">'
                 str += bus.timeFormate(tData)
@@ -752,7 +753,7 @@ export default {
                 if (i !== 0) {
                   str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
                 }
-                const value = item.data[0] - self.minusTime
+                const value = bus.computeTimezone(item.data[0])
                 const tData = new Date(value)
                 str += '<div style="margin-bottom: 5px;margin-top: 5px">'
                 str += bus.timeFormate(tData)
@@ -834,7 +835,11 @@ export default {
             show: true,
             fontSize: 10,
             formatter: function (value) {
-              const tData = new Date(value)
+              let offset = localStorage.getItem('nz-sys-timezone')
+              offset = moment.tz(offset).format('Z')
+              offset = Number.parseInt(offset)
+              const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
+              const tData = new Date(value - localOffset + offset * 60 * 60 * 1000)
               let hour = tData.getHours()
               hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
               let minute = tData.getMinutes()
@@ -1011,7 +1016,7 @@ export default {
                       const tip = self.legendMagicType[item.seriesIndex]
                       const color = self.bgColorList[item.seriesIndex]
                       if (i === 0) {
-                        const value = item.data[0]
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px">'
                         str += bus.timeFormate(tData)
@@ -1179,7 +1184,7 @@ export default {
                       const tip = self.legendMagicType[item.seriesIndex]
                       const color = self.bgColorList[item.seriesIndex]
                       if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                        const value = item.data[0]
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px">'
                         str += bus.timeFormate(tData)
@@ -1189,7 +1194,7 @@ export default {
                         if (i !== 0) {
                           str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
                         }
-                        const value = item.data[0] - self.minusTime
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px;margin-top: 5px">'
                         str += bus.timeFormate(tData)

nezha-fronted/src/components/cli/webSSH.vue

@@ -201,7 +201,7 @@
             <el-form-item :label='$t("overall.asset")' prop="assetId" class="flex">
               <v-selectpage
                 style="flex: 1"
-                :data="assetData"
+                data="asset/asset"
                 :tb-columns="columns"
                 key-field="id"
                 show-field="manageIp"
@@ -835,11 +835,16 @@ export default {
       })
     },
     resultFormat (resp) {
-      if (resp && resp.data) return resp.data.values.gridResult
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
     },
     assetShowChange () {
       this.assetShow = true
-      this.getAssetData()
+      // this.getAssetData()
     },
     getAssetData () {
       this.assetLoading = true

nezha-fronted/src/components/common/js/tools.js

@@ -2,6 +2,7 @@ import { getChart } from './common'
 import MessageBox from 'element-ui/packages/message-box/src/main'
 import i18n from '../i18n'
 import bus from '@/libs/bus'
+import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
 const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
@@ -281,7 +282,13 @@ export const bottomBoxWindow = {
   }
 }
 export function stringTimeParseToUnix (stringTime) {
-  const time = new Date(stringTime).getTime()
+  let time = new Date(stringTime).getTime()
+  let offset = localStorage.getItem('nz-sys-timezone')
+  offset = moment.tz(offset).format('Z')
+  offset = Number.parseInt(offset)
+  const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
+  console.log(offset,localOffset, time)
+  time = time + localOffset - offset * 60 * 60 * 1000
   return time / 1000
 }
 export function getTime (size, unit) { // 计算时间

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

@@ -290,7 +290,7 @@ const cn = {
         tooltip: 'Tooltip',
         displayChart: '图表',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart 模板',
         selectAsset: '请选择Asset',
         selectEndpoint: '请选择Endpoint'
@@ -1040,12 +1040,12 @@ const cn = {
       create: '创建表达式模板',
       expressionError: '请填写表达式',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart 模板',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
@@ -1107,6 +1107,7 @@ const cn = {
       }
     },
     silence: {
+      name:'名称',
       silence: '告警静默',
       create: '创建告警静默',
       edit: '修改告警静默',

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

@@ -299,7 +299,7 @@ const en = {
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart template',
         selectAsset: 'Please select the Asset',
         selectEndpoint: 'Please select the Endpoint'
@@ -1060,12 +1060,12 @@ const en = {
       create: 'New expression template',
       expressionError: 'Please fill in the "expression" value',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart template',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
@@ -1127,6 +1127,7 @@ const en = {
       },
     },
     silence: {
+      name:'Name',
       silence: 'Alert silence',
       create: 'New alert silence',
       edit: 'Edit alert silence',

nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue

@@ -169,8 +169,8 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
 <!--        <el-button-->
 <!--          size="mini"-->
 <!--          type="text"-->

nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue

@@ -123,8 +123,8 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <el-button
           size="mini"
           type="text"

nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue

@@ -73,8 +73,8 @@
           </div>
         </div>
         <div class="el-picker-panel__footer" v-if="showTime">
-          <span class="timezone-area">{{timezone}}</span>
+          <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-          <span class="timezone-offset">{{timezoneOffset}}</span>
+          <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         </div>
       </div>
     </div>

nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue

@@ -41,8 +41,8 @@
         </div>
       </div>
       <div class="el-time-panel__footer">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue

@@ -16,8 +16,8 @@
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
-<!--        <span class="timezone-area">{{timezone}}</span>-->
+<!--        <span class="timezone-area" :title='timezone'>{{timezone}}</span>-->
-<!--        <span class="timezone-offset">{{timezoneOffset}}</span>-->
+<!--        <span class="timezone-offset">UTC {{timezoneOffset}}</span>-->
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/rightBox/administration/modelBox.vue

@@ -22,8 +22,11 @@
           <!-- ChartTemplate -->
           <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
             <v-selectpage
-            :data="chartlList"
+            :data="'visual/panel/chart'"
             :tb-columns="ChartSearchShowFields"
+            :params="{
+              varType: 1, panelId: 0
+            }"
             :multiple="true"
             language="en"
             title="ChartSearch"
@@ -32,6 +35,7 @@
             show-field="name"
             class="form-control"
             @values="(data) => {editModel.chartIds = data.map(d => d.id).join(',')}"
+            :result-format="resultFormat"
           ></v-selectpage>
           </el-form-item>
           <!--remark-->
@@ -109,7 +113,7 @@ export default {
   },
   created () {
     this.getBrandList()
-    this.ChartTemplateList()
+    // this.ChartTemplateList()
   },
   methods: {
     clickOutside () {
@@ -185,13 +189,21 @@ export default {
         })
       })
     },
-    /* 获取chart列表数据 */
+    resultFormat (resp) {
-    ChartTemplateList () {
+      if (resp && resp.data) {
-      this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
+        const assetData = {}
-        this.chartlList = res.data.list
+        assetData.list = resp.data.list
-      })
+        assetData.totalRow = resp.data.total
+        return assetData
       }
     }
+    /* 获取chart列表数据 */
+    // ChartTemplateList () {
+    //   this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
+    //     this.chartlList = res.data.list
+    //   })
+    // }
+  }
 }
 </script>
 <style lang="scss">

nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue

@@ -13,6 +13,13 @@
     <div class="right-box-form-box right-box__container">
       <el-form class="right-box-form right-box-form-left" :model="editAlertSilence" label-position="top"
                label-width="120px" :rules="rules" ref="alertSilenceForm">
+        <el-form-item :label='$t("alert.silence.name")' prop="name" class="range-name">
+          <el-input
+            :placeholder="''"
+            size="small"
+            v-model="editAlertSilence.name">
+          </el-input>
+        </el-form-item>
         <el-form-item :label='$t("alert.silence.time")' prop="time" class="range-time">
           <div>
             <el-radio-group v-model="rangeTime" size="small" @change="rangeTimeChange">
@@ -28,7 +35,7 @@
           <div class="datepicker">
             <div class="datepicker-box">
               <span class="datepicker-title">start time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
                               type="datetime"
                               :clearable="false"
@@ -40,7 +47,7 @@
             </div>
             <div class="datepicker-box">
               <span class="datepicker-title">end time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
                               type="datetime"
                               :clearable="false"
@@ -66,8 +73,8 @@
             </el-form-item>
             <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeMatcher(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
           </div>
-          <div style="text-align: center">
+          <div style="text-align: center;" class="">
-               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label" style="margin-right: 140px">
+               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">
               <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
             </span>
           </div>
@@ -166,6 +173,9 @@ export default {
           { required: true, trigger: 'change' },
           { validator: validate, trigger: 'change' }
         ],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+        ],
       },
       rangeTime: '',
       ruleList: [],
@@ -322,7 +332,7 @@ export default {
       width: 14.2%
     }
 
-    /deep/ .el-date-editor.el-range-editor.el-input__inner.panel-time-picker-hidden.el-date-editor--datetimerange.el-range-editor--mini {
+    /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
       width: 100%;
     }
 
@@ -397,4 +407,15 @@ export default {
   /deep/ .param-box-row-value{
     width: 50%;
   }
+  .module-add-label{
+    display: inline-block;
+    width: 300px;
+    height: 18px;
+    background: #FFFCF9;
+    border: 1px solid #FFE0BD;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 18px;
+    margin-right: 80px;
+  }
 </style>

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -831,13 +831,13 @@ export default {
     min-height: 30px;
     overflow-x: hidden;
     border-radius: 2px;
-    padding: 0;
+    padding: 0 !important;
   }
   /deep/ .ti-tag{
     background-color: #f4f4f5;
     border-color: #e9e9eb;
     color: #909399;
-    padding: 2px 4px;
+    padding: 2px 4px!important;;
   }
 </style>
 <style>

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -245,10 +245,8 @@ export default {
           const metricMap = new Map()
           metrics.forEach((item) => {
             let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+            if (/^[a-zA-Z_:][a-zA-Z0-9_:]*/.test(item)) {
-              key = item.split('_')[0]
+              key = item.split(/[_:]/, 1)[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
             } else {
               key = item
             }

nezha-fronted/src/main.js

@@ -33,7 +33,18 @@ import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from 'v-selectpage'
-Vue.use(vSelectPage)
+Vue.use(vSelectPage, {
+  dataLoad: function (vue, url, params) {
+    if (params.pageNumber) {
+      params.pageNo = params.pageNumber
+    }
+    return new Promise((resolve, reject) => {
+      get(url, params).then(res => {
+        resolve(res)
+      }, e => reject(e))
+    })
+  }
+})
 Vue.use(myDatePicker)
 Vue.component('Pagination', Pagination)
 Vue.component('searchInput', searchInput)