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

2021-05-07 19:10:46 +08:00
parent fbf4de1c69 31c169d8e1
commit cee2c32e59
17 changed files with 113 additions and 46 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/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;
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/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/>'
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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)
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/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
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/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) { // 计算时间
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/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: '修改告警静默',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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',
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
+++ b/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-offset">{{timezoneOffset}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
 <!--        <el-button-->
 <!--          size="mini"-->
 <!--          type="text"-->
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
+++ b/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-offset">{{timezoneOffset}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
        <el-button
          size="mini"
          type="text"
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
+++ b/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-offset">{{timezoneOffset}}</span>
+          <span class="timezone-area" :title='timezone'>{{timezone}}</span>
+          <span class="timezone-offset">UTC {{timezoneOffset}}</span>
        </div>
      </div>
    </div>
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
+++ b/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-offset">{{timezoneOffset}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
        <button
          type="button"
          class="el-time-panel__btn cancel"
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
+++ b/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-offset">{{timezoneOffset}}</span>-->
+<!--        <span class="timezone-area" :title='timezone'>{{timezone}}</span>-->
+<!--        <span class="timezone-offset">UTC {{timezoneOffset}}</span>-->
        <button
          type="button"
          class="el-time-panel__btn cancel"
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/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,12 +189,20 @@ export default {
        })
      })
    },
-    /* 获取chart列表数据 */
-    ChartTemplateList () {
-      this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
-        this.chartlList = res.data.list
-      })
+    resultFormat (resp) {
+      if (resp && resp.data) {
+        const assetData = {}
+        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>
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/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">
-               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label" style="margin-right: 140px">
+          <div style="text-align: center;" class="">
+               <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>
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/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)) {
-              key = item.split('_')[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
+            if (/^[a-zA-Z_:][a-zA-Z0-9_:]*/.test(item)) {
+              key = item.split(/[_:]/, 1)[0]
            } else {
              key = item
            }
--- a/nezha-fronted/src/main.js
+++ b/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)