NEZ-2015 fix： asset / entpoint detail 页面操作 增加 Edit dashboard 按钮

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -46,7 +46,7 @@
     }
   }
   &>.bottom-panel{
-    padding: 15px 10px 10px 10px !important;
+    padding: 15px 10px 0px 10px !important;
   }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{

nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss

@@ -150,6 +150,15 @@
     button:hover {
       background: $--background-color-empty;
     }
+    .footer__btn {
+      background-color: $--color-primary;
+      border: none;
+    }
+    .footer__btn.footer__btn--light {
+      background-color: $--button-light-hover-background-color;
+      border: 1px solid $--button-light-border-color;
+      color: $--button-light-color;
+    }
   }
   .date-range-panel{
     .el-button--primary{

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -174,31 +174,31 @@ export default {
         },
         asset: {
           panel: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: true },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           alertMessage: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           endpoint: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           log: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: true }
           ],
           alertMessageSub: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false },
@@ -214,7 +214,7 @@ export default {
         },
         endpoint: {
           endpointTabTitle: [
-            { prop: 'panelTab', name: this.$t('overall.detail') },
+            { prop: 'panelTab', name: this.$t('overall.dashboard') },
             { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
             { prop: 'Metrics', name: this.$t('overall.metric') },
             { prop: 'log', name: this.$t('overall.logs') }
@@ -272,7 +272,7 @@ export default {
       const config = this.obj.configs.find(c => c.type === 'logs')
       const hasLog = config && config.enable === 1
       const tabs = [
-        { prop: 'panelTab', name: this.$t('overall.detail') },
+        { prop: 'panelTab', name: this.$t('overall.dashboard') },
         { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
         { prop: 'Metrics', name: this.$t('overall.metric') }
       ]

nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue

@@ -99,6 +99,7 @@
       <div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
         <div id="dashboardScrollbar" class="table-list-box">
           <div class="box-content"  ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column">
+            <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
             <chart-list
               ref="chartList"
               name="panel"
@@ -113,6 +114,7 @@
               @on-remove-chart="delChart"
               @on-add-group-item-chart="addGroupItem"
               @refreshPanel="refreshPanel"
+              :variablesInit="variablesInit"
               :loading="chartListLoading"
               :chart-detail-info="chartDetailInfo"
             ></chart-list>
@@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
+import panelVariables from "@/components/common/panel/panelVariables";
 export default {
   name: 'panelTabNew',
   mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -275,7 +278,9 @@ export default {
       panelDataList: [],
       batchDeleteObjs: [],
       nowTimeType: {},
-      chartDetailInfo: {}
+      chartDetailInfo: {},
+      variables: [],
+      variablesInit: false
     }
   },
   components: {
@@ -283,7 +288,8 @@ export default {
     chartList,
     nzBottomDataList,
     topToolMoreOptions,
-    chartTempBox
+    chartTempBox,
+    panelVariables // 处理panel变量的组件
   },
   methods: {
     // 刷新
@@ -544,10 +550,13 @@ export default {
     },
     // 公用操作
     getTableData (linkId) {
+      this.variablesInit = false
       if (this.from === this.fromRoute.alertRule) {
+        this.variablesInit = true
         this.getData(this.filter)
       } else {
         if (this.from === this.fromRoute.chartTemp) {
+          this.variablesInit = true
           if (this.obj.type === 'group') {
             this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
               this.panelDataList = res.data.list
@@ -564,11 +573,13 @@ export default {
             this.getData(this.filter)
           }
         } else {
-          this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
+          this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => {
+            console.log(response)
             if (response.code === 200) {
               this.panelData = response.data.list
               if (this.panelData.length > 0) {
                 this.showPanel.id = this.filter.panelId = this.panelData[0].id
+                this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
                 this.getData(this.filter)
               }
             } else {
@@ -787,6 +798,10 @@ export default {
       } else {
         this.exportToHtml(this.obj.name)
       }
+    },
+    getPanelData () {
+      this.variablesInit = true
+      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
     }
   },
   mounted () {

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -1,9 +1,13 @@
 <template>
+  <div>
     <el-dropdown trigger="click" :size="size">
       <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
         <i class="nz-icon nz-icon-more2"></i>
       </button>
       <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+        <el-dropdown-item  v-if="showLock">
+          <div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+        </el-dropdown-item>
         <el-dropdown-item  v-if="showLock">
           <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
         </el-dropdown-item>
@@ -121,13 +125,21 @@
         </div>
       </el-dialog>
     </el-dropdown>
+    <transition name="right-box">
+      <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
+    </transition>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
+import panelBox from '@/components/common/rightBox/panelBox'
 let timeout
 export default {
   name: 'topToolMoreOptions',
+  components: {
+    panelBox
+  },
   props: {
     size: {
       type: String,
@@ -179,7 +191,12 @@ export default {
         { name: 'CSV', value: 2 },
         { name: 'JSON', value: 3 }
       ],
-      suffix: '.xlsx'
+      suffix: '.xlsx',
+      panel: {},
+      rightBox: { // 面板弹出框相关
+        panel: { show: false },
+        loading: false
+      }
     }
   },
   mounted () {
@@ -528,7 +545,57 @@ export default {
     },
     formatNum (num) {
       return num > 9 ? num : '0' + num
+    },
+    editPanel () {
+      this.$get('visual/panel/' + this.params.panelId).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data
+          if (!this.$loadsh.get(this.panel, 'param.report', '')) {
+            this.panel = {
+              ...this.panel,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: 'day'
+                  },
+                  schedule: {
+                    type: '2',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
               }
+            }
+          }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
+          this.rightBox.panel.show = true
+        }
+      })
+      // this.panel = Object.assign({}, u)panelType
+    },
+    closePanelBox (refresh) {
+      this.rightBox.panel.show = false
+      if (refresh) {
+        this.$emit('afterImport')
+      }
+    },
   },
   watch: {
     panelLock: {

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

@@ -12,7 +12,7 @@
       <div class="container__form">
         <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
           <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
           </el-form-item>
           <!--remark-->
            <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
@@ -317,6 +317,14 @@ export default {
   props: {
     obj: {
       type: Object
+    },
+    isBottom: {
+      type: Boolean,
+      default: false
+    },
+    panelType: {
+      type: String,
+      default: 'dashboard'
     }
   },
   mixins: [editRigthBox],
@@ -506,7 +514,7 @@ export default {
         ...this.editPanel,
         id: this.editPanel.id ? this.editPanel.id : '',
         name: this.editPanel.name,
-        type: 'dashboard',
+        type: this.panelType,
         remark: this.editPanel.remark,
         param: {
           report: {
@@ -612,12 +620,7 @@ export default {
         this.editPanel = JSON.parse(JSON.stringify(n))
         // 如果是空数组 则添加一条变量数据
         if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
-          const temp = [{
+          const temp = []
-            show: true,
-            type: 'query',
-            multi: false,
-            allOption: false
-          }]
           this.$set(this.editPanel.param, 'variables', temp)
         }
       }