NEZ-2445 feat：新增通过dashboard template创建

2022-12-06 22:45:30 +08:00
parent 90238815c9
commit 7ea4e0494d
6 changed files with 393 additions and 19 deletions
--- a/nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss
@@ -122,25 +122,39 @@
      }
    }
    .dashboard-select-tail{
+      width: 162px;
+      background: #FF9219;
+      margin: 0 auto;
      border: none;
      display: flex;
      justify-content: center;
+      border-radius: 2px;
+      cursor: pointer;
      .dashboard-select-add{
-        width: 88%;
+        flex: 1;
        height: 30px;
-        background: #FF9219;
-        border-radius: 2px;
+        font-size: 14px;
        color: #fff;
        display: flex;
-        font-size: 14px;
        justify-content: center;
        align-items: center;
-        cursor: pointer;
        i{
          color: #fff;
          padding-left: 0;
        }
      }
+      .dashboard-addBy-template{
+        width: 30px;
+        height: 30px;
+        font-size: 14px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-left: 1px solid #fff;
+        box-sizing: border-box;
+        position: relative;
+      }
    }
  }
  .pop-item-wider{
@@ -166,3 +180,12 @@
    background: none;
  }
 }
+
+.dashboard-addBy-template-menu{
+  width: 162px;
+  // padding: 8px 0;
+  box-sizing: border-box;
+  .el-dropdown-menu__item{
+    line-height: 32px;
+  }
+}
--- a/nezha-fronted/src/components/common/popBox/selectDashboard.vue
+++ b/nezha-fronted/src/components/common/popBox/selectDashboard.vue
@@ -9,9 +9,7 @@
          </li>
        </ul>
        <div class="dashboard-select-tail">
-          <span class="dashboard-select-add" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd">
-            <i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t('overall.addDashboard')}}
-          </span>
+          <slot name="button"></slot>
        </div>
      </div>
      <div class="pop-item-wider">
@@ -165,14 +163,11 @@ export default {
      // 其他tab的数据（我的收藏、我的创建、最近浏览数据）
      otherData: [],
      // 收藏列表
-      starredList: []
+      starredList: [],
+      visible: false
    }
  },
  methods: {
-    // 新增仪表盘
-    toAdd () {
-      this.$parent.toAdd()
-    },
    // 左侧tab点击
    tabChange (value) {
      if (this.currentTab !== value) {
--- a/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue
@@ -0,0 +1,317 @@
+<template>
+  <div v-clickoutside="{obj: editDashboard, func: esc}" class="right-box right-box-dashboard-temp">
+    <div class="right-box__header">
+      <div class="header__title">{{$t("dashboard.panel.createPanelTitle")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editDashboard, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="form" :model="editDashboard" :rules="rules" label-position="top" label-width="120px">
+          <!-- name -->
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input v-model="editDashboard.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+          </el-form-item>
+          <!-- dashboardTemplate -->
+          <el-form-item :label="$t('upload.template')" prop="tmplId">
+            <v-selectpage
+              :data="dashboardList"
+              :tb-columns="ChartSearchShowFields"
+              :multiple="false"
+              :language="language"
+              key-field="id"
+              show-field="name"
+              :width="640"
+              v-model="editDashboard.tmplId"
+              class="form-control"
+              :result-format="resultFormat"
+              @values="tempChange"
+            ></v-selectpage>
+          </el-form-item>
+          <!-- link(asset) -->
+          <el-form-item :label="$t('asset.asset')" prop="link" v-if="selectedTemp.varType==1" key="asset">
+            <v-selectpage
+              :data="dataList"
+              :tb-columns="assetColumns"
+              :multiple="false"
+              :language="language"
+              key-field="id"
+              show-field="name"
+              :width="640"
+              v-model="editDashboard.link"
+              class="form-control"
+              :result-format="resultFormat"
+              @values="linkChange"
+            ></v-selectpage>
+          </el-form-item>
+          <!-- link(endpoint) -->
+          <el-form-item :label="$t('asset.endpoint')" prop="link" v-else-if="selectedTemp.varType==2" key="endpoint">
+            <v-selectpage
+              :data="dataList"
+              :tb-columns="endpointColumns"
+              :multiple="false"
+              :language="language"
+              key-field="id"
+              show-field="name"
+              :width="640"
+              v-model="editDashboard.link"
+              class="form-control"
+              :result-format="resultFormat"
+              @values="linkChange"
+            ></v-selectpage>
+          </el-form-item>
+          <!--description-->
+          <el-form-item :label='$t("overall.remark")' prop="description">
+            <el-input
+              v-model="editDashboard.description"
+              maxlength="256"
+              :rows="2"
+              show-word-limit
+              size="small"
+              type="textarea">
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editDashboard, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+export default {
+  props: {
+  },
+  data () {
+    return {
+      url: 'visual/panel/fromTmpl',
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        tmplId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        link: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
+        { title: 'ID', data: 'id' },
+        {
+          title: this.$t('overall.name'),
+          data: function (row) {
+            if (row.name.length > 15) {
+              return row.name.substring(0, 12) + '...'
+            }
+            return row.name
+          }
+        },
+        {
+          title: this.$t('dashboard.panel.chartForm.varType'),
+          data: function (row) {
+            let str
+            switch (row.varType) {
+              case 0 : str = 'None'; break
+              case 1 : str = 'Asset'; break
+              case 2 : str = 'Endpoint'; break
+            }
+            return str
+          }
+        },
+        {
+          title: this.$t('overall.remark'),
+          data: function (row) {
+            if (row.remark && row.remark.length > 15) {
+              return row.remark.substring(0, 12) + '...'
+            }
+            return row.remark
+          }
+        }
+      ],
+      // asset表头
+      assetColumns: [
+        { title: 'id', data: 'id' },
+        {
+          title: this.$t('overall.name'),
+          data: function (row) {
+            if (row.name.length > 15) {
+              return row.name.substring(0, 12) + '...'
+            }
+            return row.name
+          }
+        },
+        { title: 'Manage Ip', data: 'manageIp' },
+        {
+          title: this.$t('overall.type'),
+          data: (row) => {
+            return row.type ? row.type.name : ''
+          }
+        },
+        {
+          title: this.$t('asset.model'),
+          data: (row) => {
+            return row.model ? row.model.name : ''
+          }
+        },
+        {
+          title: this.$t('overall.dc'),
+          data: (row) => {
+            return row.dc ? row.dc.name : ''
+          }
+        }
+      ],
+      // endpoint表头
+      endpointColumns: [
+        { title: 'ID', data: 'id' },
+        {
+          title: this.$t('overall.name'),
+          data: function (row) {
+            if (row.name.length > 15) {
+              return row.name.substring(0, 12) + '...'
+            }
+            return row.name
+          }
+        },
+        {
+          title: this.$t('overall.project'),
+          data: (row) => {
+            return row.project ? row.project.name : ''
+          }
+        },
+        {
+          title: this.$t('asset.asset'),
+          data: (row) => {
+            return row.asset ? row.asset.name : ''
+          }
+        },
+        {
+          title: this.$t('overall.module'),
+          data: (row) => {
+            return row.module ? row.module.name : ''
+          }
+        }
+      ],
+      editDashboard: {
+        name: '',
+        type: 'dashboard',
+        tmplId: '',
+        link: '',
+        description: ''
+      },
+      dashboardList: [],
+      dataList: [],
+      selectedTemp: {} // 选中的dashboard模板
+    }
+  },
+  computed: {
+    language () { return this.$store.getters.getLanguage }
+  },
+  mounted () {
+    this.getDashboardTempData()
+  },
+  methods: {
+    // 选中的模板变化
+    tempChange: bus.debounce(function (val) {
+      this.editDashboard.link = ''
+      const newValue = val.length ? val[0] : {}
+      const oldValue = this.$loadsh.cloneDeep(this.selectedTemp)
+      this.selectedTemp = this.$loadsh.cloneDeep(newValue)
+      // 判断varType是否变化
+      if (oldValue.varType != newValue.varType) {
+        this.getTableData()
+      }
+      this.$refs.form.validateField('tmplId')
+    }, 50),
+    // 校验
+    linkChange: bus.debounce(function () {
+      this.$refs.form.validateField('link')
+    }, 50),
+    // 获取dashboard模板列表
+    getDashboardTempData () {
+      this.$get('visual/panel', { type: 'template', pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.dashboardList = response.data.list
+        }
+      })
+    },
+    // 根据选中模板vartype请求数据
+    getTableData () {
+      this.dataList = []
+      if (this.selectedTemp.varType === 1) {
+        this.getAssetData()
+      } else if (this.selectedTemp.varType === 2) {
+        this.getEndpointData()
+      }
+    },
+    // 获取asset列表
+    getAssetData () {
+      this.$get('asset/asset', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.dataList = response.data.list
+        }
+      })
+    },
+    // 获取endpoint列表
+    getEndpointData () {
+      this.$get('monitor/endpoint', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.dataList = response.data.list
+        }
+      })
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      this.prevent_opt.save = true
+      const params = this.$loadsh.cloneDeep(this.editDashboard)
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // 模板varType ≠ 0时有效且必填
+          if (this.selectedTemp.varType == 0) {
+            delete params.link
+          }
+          this.$post(this.url, params).then(response => {
+            this.prevent_opt.save = false
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    resultFormat (resp) {
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    }
+  }
+}
+</script>
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -21,8 +21,8 @@
          </el-form-item>

          <!--varType-->
-          <el-form-item v-if="from==='dashboardTemp'" :label="$t('dashboard.panel.chartForm.varType')" clearable class="item-receivers" prop="varType">
-            <el-select  v-model="editPanel.varType" :disabled="!!editPanel.id" clearable popper-class="right-box-select-top prevent-clickoutside" placeholder="" size="small">
+          <el-form-item v-if="from==='dashboardTemp'" :label="$t('dashboard.panel.chartForm.varType')" class="item-receivers" prop="varType">
+            <el-select v-model="editPanel.varType" clearable :disabled="!!editPanel.id" popper-class="right-box-select-top prevent-clickoutside" placeholder="" size="small">
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
@@ -389,6 +389,9 @@ export default {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
+        varType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
        'param.report.range.unit': [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
--- a/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
@@ -74,7 +74,7 @@
    </nzDataList>

    <transition name="right-box">
-      <panel-box v-if="rightBox.show" ref="panelBox" :obj="object" from="dashboardTemp" @close="closePanelBox" panelType="template"></panel-box>
+      <panel-box v-if="rightBox.show" :from="fromRoute.dashboardTemp" ref="panelBox" :obj="object" @close="closePanelBox" panelType="template"></panel-box>
    </transition>
  </div>
 </template>
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -29,6 +29,23 @@
                  <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred===1" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i>
                  <i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i>
                </template>
+                <!-- 按钮插槽 -->
+                <template slot="button">
+                  <span class="dashboard-select-add" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd">
+                    <i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t('overall.addDashboard')}}
+                  </span>
+                  <!-- 通过dashboard模板创建 -->
+                  <el-dropdown v-has="['main_add']" trigger="click">
+                    <span :title='$t("dashboard.panel.addByTemplate")' class="dashboard-addBy-template">
+                      <i class="el-icon-more tool__icon"></i>
+                    </span>
+                    <el-dropdown-menu class="dashboard-addBy-template-menu">
+                      <el-dropdown-item @click.native="addByTemplate">
+                        <span>{{$t("dashboard.panel.addByTemplate")}}</span>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
              </select-dashboard>
            </div>

@@ -140,9 +157,13 @@
      <chart-temp-box v-if="rightBox.chartTemp.show" :from="fromRoute.panel" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess"></chart-temp-box>
    </transition>
    <transition name="right-box">
-      <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" @reload="panelReload" @reloadForDel="panelReloadForDel" ></panel-box>
+      <panel-box v-if="rightBox.panel.show" :from="fromRoute.panel" ref="panelBox" :obj="panel" @close="closePanelBox" @reload="panelReload" @reloadForDel="panelReloadForDel" ></panel-box>
    </transition>
-
+    <!-- dashboard模板 -->
+    <transition name="right-box">
+      <dashboardTempBox v-if="rightBox.dashboardTemp.show" :from="fromRoute.panel" @close="closeDashboardTempBox"></dashboardTempBox>
+    </transition>
+    <!-- 快照进度 -->
    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
  </div>
 </template>
@@ -165,6 +186,7 @@ import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
 import panelVariables from '@/components/common/panel/panelVariables'
 import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
+import dashboardTempBox from '@/components/common/rightBox/dashboardTempBox'
 // import FileSaver from 'file-saver'
 // import chartData from './testData'
 export default {
@@ -184,6 +206,7 @@ export default {
      rightBox: { // 面板弹出框相关
        chart: { show: false },
        chartTemp: { show: false },
+        dashboardTemp: { show: false },
        panel: { show: false },
        loading: false
      },
@@ -324,7 +347,8 @@ export default {
    chartTempBox,
    chartRightBox,
    panelVariables, // 处理panel变量的组件
-    snapshotProgress // 快照进度
+    snapshotProgress, // 快照进度
+    dashboardTempBox // dashboard模板
  },
  computed: {
    chartRightBoxShow () {
@@ -338,6 +362,18 @@ export default {
    }
  },
  methods: {
+    closeDashboardTempBox (refresh) {
+      this.rightBox.dashboardTemp.show = false
+      if (refresh) {
+        this.getTableData()
+      }
+    },
+    // 通过dashboard模板创建
+    addByTemplate () {
+      this.rightBox.dashboardTemp.show = true
+      // 关闭selectDashboard弹框
+      this.$refs.selectDashboard && this.$refs.selectDashboard.esc()
+    },
    // 新增收藏
    addStarred (data) {
      this.$refs.selectDashboard.addStarred(data)