perf: chart侧滑新增panel选项等

1.chart侧滑新增panel选项
2.project-queryendpoint样式调整

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

@@ -53,6 +53,18 @@ li{
 .margin-b-20 {
   margin-bottom: 20px !important;
 }
+.margin-l-30 {
+  margin-left: 30px !important;
+}
+.margin-r-30 {
+  margin-right: 30px !important;
+}
+.margin-t-30 {
+  margin-top: 30px !important;
+}
+.margin-b-30 {
+  margin-bottom: 30px !important;
+}
 .float-left {
   float: left;
 }
@@ -986,3 +998,20 @@ li{
 .el-date-table td.end-date span, .el-date-table td.start-date span {
   background-color: $global-text-color-active !important;
 }
+
+/* --begin--复选框自定义颜色 */
+.el-checkbox__input.is-focus .el-checkbox__inner,
+.el-checkbox__input .el-checkbox__inner:hover,
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  border-color: $global-text-color-active;
+}
+
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: $global-text-color-active;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $global-text-color-active;
+}
+/* --end--复选框自定义颜色 */

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

@@ -24,7 +24,11 @@ const cn = {
     select: '选择',
     ok: 'Ok',
     all: '全选',
-    other: "其他"
+    other: "其他",
+    query: '查询',
+    back: '返回',
+    unavailable: '不可用',
+    available: '可用'
   },
   dashboard:{
     title:'仪表盘',
@@ -335,7 +339,8 @@ const cn = {
       promId: "Prometheus Server ID",
       createProm: "新增Prometheus Server",
       editProm: "修改Prometheus Server",
-      type: "类别"
+      type: "类别",
+      checkTime: '检查时间'
     },
   },
   alert: {

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

@@ -32,7 +32,9 @@ const en = {
     all: 'All',//'全选'
     other: 'Others',//"其他"
     query: 'Query', //查询
-    back: 'Back' //返回
+    back: 'Back', //返回
+    unavailable: 'Unavailable',
+    available: 'Available'
   },
   dashboard:{
     title:'Dashboard',
@@ -342,7 +344,8 @@ const en = {
       promId: 'Prometheus server ID',//"Prometheus Server ID"
       createProm: 'New prometheus server',//"新增Prometheus Server"
       editProm: 'Edit prometheus server',//"修改Prometheus Server"
-      type: 'Type'//"类别"
+      type: 'Type',//"类别"
+      checkTime: 'Check time'
     },
   },
   alert: {

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

@@ -95,7 +95,7 @@
                 if (response.code === 200) {
                   this.esc();
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$emit("reload");
+                  this.$emit("reload", this.panel.name);
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -125,6 +125,6 @@
 
 <style scoped>
   .z-top{
-    z-index: 50;
+    z-index: 51 !important;
   }
 </style>

nezha-fronted/src/components/page/asset/asset.vue

@@ -703,20 +703,3 @@
     margin-right:6px;
   }
 </style>
-<style lang="scss">
-  .asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,
-  .asset .content-left .el-checkbox__input .el-checkbox__inner:hover,
-  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner,
-  .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    border-color: $global-text-color-active;
-  }
-
-  .asset .content-left .el-checkbox__input.is-checked + .el-checkbox__label {
-    color: $global-text-color-active;
-  }
-
-  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: $global-text-color-active;
-  }
-
-</style>

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

@@ -63,6 +63,10 @@
                 {{scope.row[item.prop] == '1' ? 'Global' : ''}}
                 {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
             </span>
+            <span v-else-if="item.prop == 'status'">
+                {{scope.row[item.prop] == '1' ? $t('overall.available') : ''}}
+                {{scope.row[item.prop] == '0' ? $t('overall.unavailable') : ''}}
+            </span>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
                           <span @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i
                             class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
@@ -115,14 +119,16 @@
                   <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name"
                              :value="item" :id="'prom-edit-idc-op-'+item.id">
                     <span class="config-dropdown-label-txt">{{item.name}}</span>
+                    <div class="config-dropdown-label-icons">
+                       <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"
+                             :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
                       <idc-config-box :post-idc="item" placement="left" @after="getIdcData"
                                       :button-class="'config-dropdown-btn'">
                         <template v-slot:optionZone>
-                        <i class="el-icon-edit-outline"></i>
+                          <i class="nz-icon nz-icon-edit"></i>
                         </template>
                       </idc-config-box>
-                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"
+                    </div>
-                          :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
                   </el-option>
                 </el-select>
 
@@ -247,6 +253,14 @@
             label: this.$t("config.promServer.type"),
             prop: 'type',
             show: true,
+          }, {
+            label: this.$t('asset.createAssetTab.state'),
+            prop: 'status',
+            show: true
+          }, {
+            label: this.$t('config.promServer.checkTime'),
+            prop: 'checkTime',
+            show: true
           }, {
             label: this.$t('config.account.option'),
             prop: 'option',

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

@@ -46,11 +46,15 @@
   .label-center{
     margin-top:6px;
   }
+
   .z-top {
-    z-index: 50;
+    z-index: 49;
   }
 </style>
 <template key="chartBox">
+<div>
+  <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
+
   <transition name="right-box">
     <div class="right-box right-box-add-chart z-top" v-if="rightBox.show" >
       <!-- begin--顶部按钮-->
@@ -69,6 +73,27 @@
       <!-- begin--表单-->
       <el-scrollbar class="right-box-form-box">
         <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
+          <el-form-item :label="$t('dashboard.panel.title')">
+            <div class="right-box-form-content">
+              <el-select class="right-box-row-with-btn" popper-class="config-dropdown"
+                         v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
+                <el-option v-for="item in panelData" :key="item.id" :label="item.name"
+                           :value="item.id" :id="'chart-box-panel-'+item.id">
+                  <span class="config-dropdown-label-txt">{{item.name}}</span>
+                  <div class="config-dropdown-label-icons">
+                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop=""
+                          :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
+                    <span class="config-dropdown-btn" @click.stop=""
+                    :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
+                  </div>
+                </el-option>
+              </el-select>
+
+              <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
+                <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+              </div>
+            </div>
+          </el-form-item>
           <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
             <el-input size="mini" maxlength="64" show-word-limit v-model="chart.title"></el-input>
           </el-form-item>
@@ -148,6 +173,8 @@
       </div>
     </div>
   </transition>
+
+</div>
 </template>
 
 <script>
@@ -157,7 +184,7 @@
   export default {
     name: "chartBox",
     props: {
-
+      panelData: Array
     },
     data() {
       return {
@@ -176,12 +203,13 @@
             id: '',
             expression: '',
             type: ''
-          }
+          },
+          panel: ''
         },
         rules: {
           title: [
             {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
-          ],
+          ]
          /*
           heigh: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -209,19 +237,36 @@
         isedit: false,
         //productId: 0,//不需要这个参数，可以删除
         panelId: 0,
+        panelName: '',
         metricList: [], // metric列表
         metricCascaderList:[],//metric级联列表
         deleteIndex: '', // 要删除的指标模块
         subCount: 0, // subSave保存data到bus计数器
+        panel: {
+          id: '',
+          name: ''
+        },
       }
     },
     components:{
-      'chart-metric':ChartMetric
+      'chart-metric':ChartMetric,
     },
     methods: {
       show(show) {
         this.rightBox.show = show;
       },
+      toAddPanel() {
+        this.$refs.panelBox2.show(true);
+        this.panel = {
+          id: '',
+          name: ''
+        };
+        this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle"));
+      },
+      panelReload(panelName) {
+        this.panelName = panelName;
+        this.$emit("reloadOnlyPanel");
+      },
       setTitle(title) {
         this.rightBox.title = title;
       },
@@ -542,7 +587,19 @@
 
     },
     watch: {
-
+      panelData: {
+        deep: true,
+        immediate: true,
+        handler(n, o) {
+          if (this.panelName) {
+            for (let i = 0; i < n.length; i++) {
+              if (n[i].name == this.panelName) {
+                this.panelId = n[i].id;
+              }
+            }
+          }
+        }
+      }
     }
   }
 </script>

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

@@ -106,12 +106,12 @@
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
-      <el-col span="16">
+      <el-col :span="16">
         <!-- <span  class="star-red">*</span>&nbsp; -->
         {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
 
-      <el-col span="8">
+      <el-col :span="8">
         <div class="nz-tab-chart-item-box">
           <div @click="clickTabelShow(1,'normal')" class="nz-tab-style nz-tab-chart-style-left" :class="{'nz-tab-style-light' : tableShow == 1}">
             <span>{{$t('dashboard.metric.normal')}}</span>
@@ -132,7 +132,7 @@
       </el-form-item>
     </template>
     <template v-if="tableShow == 1">
-      <el-form-item class="right-box-form-content" :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+      <el-form-item class="right-box-form-content" label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
         <el-cascader ref="metricSelect" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="" size="small"
                  v-model="elementInfo.metric"
                  :options="metricCascaderList"
@@ -149,7 +149,7 @@
 <!-- create chart组件显示框 -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
 
-      <el-col span="8">
+      <el-col :span="8">
         <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -163,12 +163,12 @@
         </div>
       </el-col>
 
-      <el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
+      <el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
 
-      <el-col span="14">
+      <el-col :span="14">
         <div class="li-list-part-label-val-list" >
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
               <el-select  v-model="item.value" ref="tagSelect" size="mini"
                           placeholder=""
                           collapse-tags
@@ -201,7 +201,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    metricCascaderList:[],
+    metricCascaderList:Array,
     countTotal: {
       type: Number,
       default: 1,

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

@@ -72,7 +72,7 @@
     </div>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
-    <chart-box ref="addChartModal" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+    <chart-box ref="addChartModal" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
   </div>
 </template>
 
@@ -407,6 +407,13 @@
           }
         });
       },
+      panelReloadOnlyPanel() { //仅刷新panel数据
+        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list;
+          }
+        });
+      },
       getTableData: function () {
         this.$get('panel?pageNo=1&pageSize=-1').then(response => {
           if (response.code === 200) {

nezha-fronted/src/components/page/project/project.vue

@@ -1,5 +1,11 @@
 <style lang="scss">
-  @import '../../charts/line-chart-block';
+  .project-calendar .el-input__inner {
+    height: 26px !important;
+    border-color: #d8d8d8;
+  }
+  .project .nz-table .el-table__row td:first-of-type {
+    padding-left: 0;
+  }
 </style>
 <template>
   <div class="project">
@@ -136,8 +142,8 @@
     <!--endpoint query-->
     <div class="content-right" v-show="tableShow == 3">
       <div class="top-tools">
-        <div class="top-tool-search float-left">
+        <div>
-          <div @click="backToEdpTab" class="nz-tab-item-box">
+          <div @click="backToEdpTab">
             <button  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
           <span class='top-tool-btn-txt'>
             {{$t('overall.back')}}</span>
@@ -145,12 +151,13 @@
           </div>
         </div>
         <!--时间选择器-->
-        <div class="float-right" style="position: relative;left: 450px">
+        <div>
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-small nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
+          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
           <el-date-picker
             v-model="formatTime"
             type="datetime"
             size="mini"
+            class="project-calendar"
             clearable
             :time-arrow-control="true"
             placeholder="Moment"
@@ -158,10 +165,8 @@
             @change="pickTime"
             >
           </el-date-picker>
-          <button @click="changeTime(10)" class="nz-btn nz-btn-size-small nz-btn-style-light"><i class="el-icon-d-arrow-right"></i></button>
+          <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-20"><i class="el-icon-d-arrow-right"></i></button>
-        </div>
+          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
-        <div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
-          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
             <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>
           </button>
         </div>
@@ -176,7 +181,7 @@
         style="width: 100%;">
         <el-table-column
           type="selection"
-          width="55"
+          width="38"
           align="center"
           :selectable="selectable"
         >