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

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

@@ -605,7 +605,8 @@ const cn = {
     confirmCancel: '您所做的修改将不会被保存？',
     copySuccess: '复制成功',
     lnglatError: '经纬度格式错误',
-    tagError: '不符合正则 /^[a-zA-Z_][a-zA-Z0-9_]*/!'
+    tagError: '不符合正则 /^[a-zA-Z_][a-zA-Z0-9_]*/!',
+    syntaxError: '语法错误'
   },
   asset: {
     asset: '资产',
@@ -980,6 +981,7 @@ const cn = {
     system: {
       system: '系统设置',
       basic: {
+        title: '基本信息',
         basic: '基础设置',
         alertApi: '告警API',
         assetPingSwith: '资产Ping开关',
@@ -995,7 +997,7 @@ const cn = {
         minute: '分',
         second: '秒',
         day: '天',
-        maxSeries: '指标查询最大条数',
+        maxSeries: '查询最大条数',
         unsaved: '未保存提示',
         mapConfig: '地图中心点',
         mapTitle: '配置地图',
@@ -1011,22 +1013,24 @@ const cn = {
       },
       monitor: {
         monitor: '监控',
+        metricsTitle: '指标配置',
+        logsTitle: '日志配置',
         alertApi: 'Alert api',
         prometheusFederation: 'Prometheus federation',
         asset_ping_from: 'Asset ping from',
-        metrics_storage_retention: '指标存储天数',
+        metrics_storage_retention: '保存天数',
-        metrics_storage_type: '指标存储模式',
+        metrics_storage_type: '保存模式',
-        metrics_storage_s3_endpoint: '指标 s3 endpoint',
+        metrics_storage_s3_endpoint: 'Endpoint',
-        metrics_storage_s3_bucket: '指标 s3 bucket',
+        metrics_storage_s3_bucket: 'Bucket name',
-        metrics_storage_s3_access_key: '指标 s3 access',
+        metrics_storage_s3_access_key: 'Access key',
-        metrics_storage_s3_secret_access_key: '指标 s3 secret access',
+        metrics_storage_s3_secret_access_key: 'Secret key',
-        logs_storage_retention: '日志存储天数',
+        logs_storage_retention: '保存天数',
-        logs_storage_type: '日志存储模式',
+        logs_storage_type: '保存模式',
-        logs_storage_s3_endpoint: '日志 s3 endpoint',
+        logs_storage_s3_endpoint: 'Endpoint',
-        logs_storage_s3_bucket: '日志 s3 bucket',
+        logs_storage_s3_bucket: 'Bucket name',
-        logs_storage_s3_access_key: '日志 s3 access',
+        logs_storage_s3_access_key: 'Access key',
-        logs_storage_s3_secret_access_key: '日志 s3 secret access',
+        logs_storage_s3_secret_access_key: 'Secret key',
-        logs_query_range_default_limit: '日志查询最大条数',
+        logs_query_range_default_limit: '查询最大条数',
         local: '本地文件存储',
         s3: 'S3对象存储'
       },

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

@@ -612,7 +612,9 @@ const en = {
     confirmCancel: 'Changes you made are not saved?',
     copySuccess: 'Copy success',
     lnglatError: 'Wrong format of latitude and longitude',
-    tagError: 'Does not conform to regular expressions /^[a-zA-Z_][a-zA-Z0-9_]*/!'
+    tagError: 'Does not conform to regular expressions /^[a-zA-Z_][a-zA-Z0-9_]*/!',
+    syntaxError: 'Syntax error',
+    errorInRow: 'There are some syntax errors in rows'
   },
   asset: {
     asset: 'Asset ',
@@ -972,6 +974,7 @@ const en = {
     system: {
       system: 'System',
       basic: {
+        title: 'Basic info',
         basic: 'Basic',
         alertApi: 'Alert API',
         assetPingSwith: 'Asset ping',
@@ -987,7 +990,7 @@ const en = {
         day: 'day',
         sessionTimeout: 'Session timeout',
         minute: 'minute',
-        maxSeries: 'Metrics query max series',
+        maxSeries: 'Query max series',
         unsaved: 'Unsaved prompt',
         mapConfig: 'Map center',
         mapTitle: 'Configurate map',
@@ -1003,22 +1006,24 @@ const en = {
       },
       monitor: {
         monitor: 'Monitor',
+        metricsTitle: 'Metrics configuration',
+        logsTitle: 'Logs configuration',
         alertApi: 'Alert api',
         prometheusFederation: 'Prometheus federation',
         asset_ping_from: 'Asset ping from',
-        metrics_storage_retention: 'Metrics storage days',
+        metrics_storage_retention: 'Retention days',
-        metrics_storage_type: 'Metrics storage mode',
+        metrics_storage_type: 'Storage backend',
-        metrics_storage_s3_endpoint: 'Metrics s3 endpoint',
+        metrics_storage_s3_endpoint: 'Endpoint',
-        metrics_storage_s3_bucket: 'Metrics s3 bucket',
+        metrics_storage_s3_bucket: 'Bucket',
-        metrics_storage_s3_access_key: 'Metrics s3 access',
+        metrics_storage_s3_access_key: 'Access key',
-        metrics_storage_s3_secret_access_key: 'Metrics s3 secret access',
+        metrics_storage_s3_secret_access_key: 'Secret key',
-        logs_storage_retention: 'Logs storage days',
+        logs_storage_retention: 'Retention days',
-        logs_storage_type: 'Logs storage mode',
+        logs_storage_type: 'Storage backend',
-        logs_storage_s3_endpoint: 'Logs s3 endpoint',
+        logs_storage_s3_endpoint: 'Endpoint',
-        logs_storage_s3_bucket: 'Logs s3 bucket',
+        logs_storage_s3_bucket: 'Bucket',
-        logs_storage_s3_access_key: 'Logs s3 access',
+        logs_storage_s3_access_key: 'Access key',
-        logs_storage_s3_secret_access_key: 'Logs s3 secret access',
+        logs_storage_s3_secret_access_key: 'Secret key',
-        logs_query_range_default_limit: 'Logs query max series',
+        logs_query_range_default_limit: 'Query line limit',
         local: 'LocalStorage',
         s3: 'S3 object storage'
       },

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

@@ -118,6 +118,7 @@ export default {
           if (this.editDc.id) {
             const param = { ...this.editDc }
             const attr = this.$refs.latlngPicker.getAttribute()
+            console.log(attr)
             param.latitude = attr.latitude
             param.longitude = attr.longitude
             this.$put('/dc', param).then(response => {
@@ -134,6 +135,9 @@ export default {
             if (param.area) {
               param.areaId = param.area.id
             }
+            const attr = this.$refs.latlngPicker.getAttribute()
+            param.latitude = attr.latitude
+            param.longitude = attr.longitude
             if (!regNum.test(param.longitude)) {
               param.longitude = null
             }

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

@@ -532,7 +532,7 @@
                       </div>
                     </div>
                     <div style="text-align: center">
-                      <div class="value-mapping-add" style="text-align: center;width: 25px;display: inline-block;margin-right: 44px">
+                      <div class="value-mapping-add" style="text-align: center;width: 25px;display: inline-block;">
                         <pipelineSelect :index="item.pipeline.length - 1" :father-pipeline="item.pipeline" @addPipeline="(pipelineIndex,obj)=>{addPipeline(obj,index,pipelineIndex,'push')}" :type="'push'"/>
                       </div>
                     </div>
@@ -548,7 +548,7 @@
               <i class="nz-icon nz-icon-minus" @click="removeLogsArr(index)"></i>
           </span>
               </div>
-              <div class="value-mapping-add" style="text-align: center;margin: 10px 180px 10px 144px;" @click="logsLogsArrAdd()">
+              <div class="value-mapping-add" style="text-align: center;margin: 10px 144px 10px 144px;" @click="logsLogsArrAdd()">
                 <i class="nz-icon nz-icon-plus"></i>
               </div>
             </div>
@@ -1619,7 +1619,7 @@ export default {
     line-height: 21px;
   }
   .half-form-item {
-    width: calc(50% - 21px);
+    width: calc(50% - 5px);
     display: inline-block;
     padding: 0 0px 0 0px;
   }
@@ -1667,7 +1667,6 @@ export default {
     border-radius: 2px;
     text-align: center;
     line-height: 18px;
-    margin-right: 55px;
   }
   .configs-copy-value{
     opacity: 0.9;

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

@@ -512,7 +512,7 @@
                     </div>
                   </div>
                   <div style="text-align: center">
-                    <div class="value-mapping-add" style="text-align: center;width: 25px;display: inline-block;margin-right: 44px">
+                    <div class="value-mapping-add" style="text-align: center;width: 25px;display: inline-block;">
                       <pipelineSelect :index="item.pipeline.length - 1" :father-pipeline="item.pipeline" @addPipeline="(pipelineIndex,obj)=>{addPipeline(obj,index,pipelineIndex,'push')}" :type="'push'"/>
                     </div>
                   </div>
@@ -528,7 +528,7 @@
               <i class="nz-icon nz-icon-minus" @click="removeLogsArr(index)"></i>
           </span>
             </div>
-            <div class="value-mapping-add" style="text-align: center;margin: 10px 180px 10px 144px;" @click="logsLogsArrAdd()">
+            <div class="value-mapping-add" style="text-align: center;margin: 10px 144px 10px 144px;" @click="logsLogsArrAdd()">
               <i class="nz-icon nz-icon-plus"></i>
             </div>
           </div>
@@ -1430,7 +1430,7 @@ export default {
     line-height: 21px;
   }
   .half-form-item {
-    width: calc(50% - 21px);
+    width: calc(50% - 5px);
     display: inline-block;
     padding: 0 0px 0 0px;
   }
@@ -1478,7 +1478,6 @@ export default {
     border-radius: 2px;
     text-align: center;
     line-height: 18px;
-    margin-right: 55px;
   }
   .configs-copy-value{
     opacity: 0.9;

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

@@ -4,6 +4,7 @@
       <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
         <div class="system-config-form basicForm" v-if="activeTab === 'basic'">
           <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basicRules" :validate-on-rule-change="false">
+            <div class="system-title">{{$t('config.system.basic.title')}}</div>
 <!--            <el-form-item :label="$t('config.system.basic.sysLogo')" prop="system_logo">-->
 <!--              <el-upload-->
 <!--                class="avatar-uploader"-->
@@ -66,6 +67,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.monitor.monitor')" name="monitor">
         <div class="system-config-form basicForm" v-if="activeTab === 'monitor'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="monitor"  label-width="208px" size="small" ref="monitorForm" :rules="monitorRules" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.monitor.alertApi')" prop="asset_ping_interval">
               <el-input v-model="monitor.alert_api" id="monitor-alert-api"></el-input>
@@ -96,6 +98,7 @@
               </el-select>
             </el-form-item>
             <!--metrics-->
+            <div class="system-title system-title-border">{{$t('config.system.monitor.metricsTitle')}}</div>
             <el-form-item :label="$t('config.system.monitor.metrics_storage_retention')" prop="metrics_storage_retention">
               <el-input v-model.number="monitor.metrics_storage_retention" id="monitor-metrics_storage_retention">
                 <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
@@ -128,6 +131,7 @@
             </el-form-item>
 
             <!--logs-->
+            <div class="system-title system-title-border">{{$t('config.system.monitor.logsTitle')}}</div>
             <el-form-item :label="$t('config.system.monitor.logs_storage_retention')" prop="logs_storage_retention">
               <el-input v-model.number="monitor.logs_storage_retention" id="monitor-logs_storage_retention">
                 <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
@@ -171,6 +175,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.email.email')" name="email" >
         <div class="system-config-form" v-if="activeTab === 'email'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
               <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"  @change="switchChange('emailForm')" id="system-email-email_enable"></el-checkbox>
@@ -218,6 +223,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
         <div class="system-config-form terminal" v-if="activeTab === 'terminal'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
 <!--            <el-form-item :label="$t('config.system.terminal.timeout')" prop="terminal_timeout">-->
 <!--              <el-input v-model="terminal.terminal_timeout" controls-position="right" :min="1"  id="system-terminal-max_terminal_num">-->
@@ -243,6 +249,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
         <div class="system-config-form" v-if="activeTab === 'ldap'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
             <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
               <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')" id="system-ldap-ldap_enable"></el-checkbox>
@@ -293,6 +300,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
         <div class="system-config-form" v-if="activeTab === 'reset'">
+          <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
             <el-form-item  prop="type" :label="$t('config.system.reset.type')">
 <!--              <div class="el-checkbox-group">-->
@@ -1082,6 +1090,21 @@ export default {
     color: #999999;
     font-size: 12px;
   }
+  .system-title{
+    ont-family: Roboto-Medium;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    text-align: left;
+    padding-left: 20px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+  .system-title-border{
+    border-top: 1px dashed #E7EAED;
+    padding-top: 30px;
+    width: 699px;
+  }
 </style>
 <style lang="scss">
   .system {

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

@@ -2,6 +2,7 @@
   <div class="explores">
     <explore-item
       v-for="item in exploreItems"
+      ref="exploreItem"
       :key="item"
       :closable="closable"
       :tab-index="item"
@@ -38,6 +39,12 @@ export default {
         } else {
           this.exploreItems.push(index === 0 ? 1 : 0)
         }
+        this.$nextTick(() => {
+          this.$refs.exploreItem.forEach(e => {
+            const component = e.$refs.logDetail
+            component && component.resizeChart()
+          })
+        })
       }
     }
   }

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

@@ -130,7 +130,7 @@
                 </div>
               </el-collapse-item>
               <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
-                <log-tab ref="logDetail" :log-data="logData" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+                <log-tab ref="logDetail" :log-data="logData" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
               </el-collapse-item>
             </template>
           </el-collapse>
@@ -530,7 +530,7 @@ export default {
     },
     queryLogData (limit) { // log的chart和table是一个请求
       if (!limit) {
-        limit = this.$refs.logDetail.getLimit()
+        limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 1000
       }
       if (this.expressions.length > 0) {
         const requestArr = []
@@ -544,6 +544,17 @@ export default {
           this.saveDisabled = false
         }
         axios.all(requestArr).then(res => {
+          const errorRowIndex = []
+          res.forEach((r, i) => {
+            if (typeof r === 'string') {
+              errorRowIndex.push(i)
+            }
+          })
+          if (errorRowIndex.length > 0) {
+            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
+            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
+          }
+          if (res.length > 0) {
             this.logData = res.map(r => r.data)
             const hasGraph = this.logData.some(d => d.resultType === 'matrix')
             const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
@@ -570,6 +581,9 @@ export default {
             this.$nextTick(() => {
               hasGraph && this.loadLogGraph()
             })
+          }
+        }).catch(e => {
+          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
         })
       }
     },

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

@@ -1,6 +1,6 @@
 <template>
   <div class="log-detail">
-    <div id="logChart" class="log-chart"></div>
+    <div :id="`logChart${tabIndex}`" class="log-chart"></div>
     <div class="log-operations">
       <div class="log-operation">
         <span class="operation-label">{{$t('overall.time')}}</span>
@@ -77,7 +77,8 @@ import * as echarts from 'echarts'
 export default {
   name: 'logTab',
   props: {
-    logData: Array
+    logData: Array,
+    tabIndex: Number
   },
   computed: {
     tableTimeFormat () {
@@ -175,7 +176,8 @@ export default {
       return this.timezoneToUtcTimeStr(this.toMillisecondTime(timestamp))
     },
     loadChart () {
-      const dom = document.getElementById('logChart')
+      const vm = this
+      const dom = document.getElementById(`logChart${this.tabIndex}`)
       if (!dom) {
         return
       }
@@ -222,7 +224,9 @@ export default {
             axisLabel: {
               rotate: 0,
               fontSize: 13 * window.devicePixelRatio,
-              formatter: '{HH}:{mm}:{ss}'
+              formatter (value) {
+                return vm.$unixTimeParseToString(vm.toMillisecondTime(value) / 1000, 'hh:mm')
+              }
             },
             boundaryGap: [0, '1%']
           },
@@ -388,6 +392,9 @@ export default {
     },
     getLimit () {
       return this.limit
+    },
+    resizeChart () {
+      this.myChart.resize()
     }
   },
   watch: {