perf: chart侧滑新增panel选项等

1.chart侧滑新增panel选项 2.project-queryendpoint样式调整
2020-02-06 18:50:40 +08:00
parent 400370de2d
commit b014b70dbb
10 changed files with 200 additions and 97 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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--复选框自定义颜色 */
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/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: {
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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: {
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/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)"
-                          :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>
+                    </div>
                  </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',
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -46,11 +46,15 @@
  .label-center{
    margin-top:6px;
  }
-  .z-top{
-    z-index: 50;
+
+  .z-top {
+    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>
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/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,
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/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 @click="backToEdpTab" class="nz-tab-item-box">
+        <div>
+          <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">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-small nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
+        <div>
+          <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>
-        </div>
-        <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">
+          <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>
+          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal 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"
        >