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

2023-06-09 13:44:38 +08:00
parent e1050174fe e41207305b
commit ede2cb386b
14 changed files with 205 additions and 39 deletions
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -1,31 +1,59 @@
 <template>
  <div class="chart-diagram" v-if="chartInfo.loaded">
-    <diagram
-      style="height: 100%;width: 100%"
-      :topoData="chartInfo.param.topo"
-      :fromChart="true"
-      :isScreen="isFullscreen"
-      :topologyIndexF="isFullscreen ? (chartInfo.id + '-' + 'isFullscreen') : chartInfo.id"
-      :isPanel="true"
-      ref="diagram"
-      :chartInfo="chartInfo" />
+<!--    <diagram-->
+<!--      style="height: 100%;width: 100%"-->
+<!--      :topoData="chartInfo.param.topo"-->
+<!--      :fromChart="true"-->
+<!--      :isScreen="isFullscreen"-->
+<!--      :topologyIndexF="isFullscreen ? (chartInfo.id + '-' + 'isFullscreen') : chartInfo.id"-->
+<!--      :isPanel="true"-->
+<!--      ref="diagram"-->
+<!--      :chartInfo="chartInfo" />-->
+    <meta2dMain :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="{ timeType: 5}" :iconArray="iconArray" :isChart="true"/>
  </div>
 </template>

 <script>
-import diagram from '@/components/common/ChartDiagram/diagram'
+import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
+import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
+import { clearTopology } from '@/components/common/js/common'
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
+import bus from '@/libs/bus'
 export default {
  name: 'chart-diagram',
-  mixins: [chartMixin, chartFormat],
+  mixins: [chartMixin, chartFormat, beforeMeta2d],
  components: {
-    diagram
+    meta2dMain
+  },
+  data () {
+    return {
+      isPreview: {
+        show: false,
+        topoData: {},
+        querysArray: {},
+        currentProject: {},
+        params: {}
+      }
+    }
+  },
+  mounted () {
+    bus.$on('showMeta2dPreview', (params) => {
+      this.isPreview = params
+    })
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+    this.reload()
  },
  methods: {
    resize () {
      this.$refs.diagram.winResize()
    }
+  },
+  destroyed () {
+    bus.$off('showMeta2dPreview')
+    clearTopology()
  }
 }
 </script>
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -137,6 +137,7 @@ export const chartTimeSeriesLineOption = {
  ],
  series: [{
    name: '',
+    cursor: 'pointer',
    type: 'line',
    symbol: 'emptyCircle', // 去掉点
    connectNulls: true,
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -32,7 +32,6 @@ export default {
      default: true
    },
    nowTimeType: {
-      type: Number
    },
    hiddenText: { // 隐藏图表的悬浮文字
      type: String
--- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
@@ -83,6 +83,7 @@ export default {
    chartDetailInfo: Object,
    from: String,
    filter: {},
+    currentMsg: Object,
    showHeader: {
      type: Boolean,
      default: true
@@ -325,6 +326,7 @@ export default {
      this.$get('/alert/message/' + this.chartInfo.id).then(res => {
        if (res.code === 200) {
          this.infoData = res.data
+          this.infoData.alertRule = this.currentMsg.alertRule
          this.tabNoData = false
        } else {
          this.tabNoData = true
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -97,6 +97,7 @@
        :chart-info="chartInfo"
        :from="fromRoute.alertMessage"
        :filter="{}"
+        :currentMsg="currentMsg"
        :is-fullscreen="true"
        :time-range="searchTime"
        @showFullscreen="showFullscreen"
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -18,9 +18,8 @@ export default {
  },
  methods: {
    reload () {
-      if (this.currentProject.id) {
+      if (this.currentProject && this.currentProject.id) {
        this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
-
          if (res.data && res.data.topo) {
            this.topoData = res.data.topo || {}
            if (res.data.topo.topo) {
@@ -38,6 +37,26 @@ export default {
            }
          }
        })
+      } else if (this.isChart) {
+        const res = {
+          data: this.chartInfo.param
+        }
+        if (res.data && res.data.topo) {
+          this.topoData = res.data.topo || {}
+          if (res.data.topo.topo) {
+            this.topoData = res.data.topo.topo || {}
+          }
+          this.querysArray = res.data.topo.elements || []
+          this.params = {
+            timeType: res.data.topo.timeType || 5
+          }
+        } else {
+          this.topoData = {}
+          this.querysArray = []
+          this.params = {
+            timeType: 5
+          }
+        }
      }
    }
  }
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -127,11 +127,13 @@ export default {
      const endTime = new Date().getTime()
      const startTime = endTime - 60 * this.params.timeType * 1000
      this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
-        this.clacTopoData(this.topoData, arr).then((data) => {
+        this.clacTopoData(this.$lodash.cloneDeep(this.topoData), arr).then((data) => {
          if (!getTopology(this.meta2dId)) {
            return
          }
-          this.getModule()
+          if (this.project) {
+            this.getModule()
+          }
          getTopology(this.meta2dId).resize()
          getTopology(this.meta2dId).open(data)
          if (this.isChart) {
@@ -439,6 +441,9 @@ export default {
      if (isRefresh) {
        this.$emit('reload')
      }
+      if (this.isChart) {
+        this.$emit('exit', false)
+      }
    },
    beforeEdit () {
      // const endTime = new Date().getTime()
@@ -596,6 +601,9 @@ export default {
      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
        this.showNodeTools()
      }
+    },
+    saveChart (params) {
+      this.$emit('save', params)
    }
  },
  beforeDestroy () {
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="pens-data right-box__container">
    <div class="form-row-box chart-config">
-      <div class="form-row-item form-row-item-full">
+      <div class="form-row-item form-row-item-full" v-if="!isChart">
        <div class="form-row-key">
          {{$t('project.topology.timeRange')}}
        </div>
@@ -197,7 +197,8 @@ export default {
  mixins: [promqlInputMixin, rz],
  props: {
    querysArray: {},
-    params: {}
+    params: {},
+    isChart: {}
  },
  components: {
    draggable,
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -9,7 +9,7 @@
       >
      </topology-top-tool>
    </div>
-    <div v-if="!editFlag" class="top-tool-right">
+    <div v-if="!isChart && !editFlag" class="top-tool-right">
      <pick-time
        v-show="!editFlag"
        ref="pickTime"
@@ -27,7 +27,7 @@
      </button>
    </div>
    <div v-if="editFlag" class="top-tool-right float-right">
-      <button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+      <button @click="previewTopology" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"
              style="margin-right: 20px"
      >
        {{$t('overall.preview')}}
@@ -37,13 +37,13 @@
 <!--      >-->
 <!--        {{$t('project.topology.previewExit')}}-->
 <!--      </button>-->
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveMeta2d"
              :disabled="prevent_opt.save"
              :class="{'nz-btn-disabled':prevent_opt.save}"
              style="margin-right: 20px">
        {{$t('overall.save')}}
      </button>
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" style="margin-right: 20px" @click="cancelTopology">
        {{$t('project.topology.exit')}}
      </button>
    </div>
@@ -117,7 +117,14 @@ export default {
      }
    },
    saveChart () {
-
+      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
+      const params = {
+        ...getTopology(this.meta2dId).data()
+      }
+      params.elements = elements
+      params.timeType = timeType
+      this.$emit('saveChart', params)
    },
    saveProject () {
      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
@@ -174,11 +181,13 @@ export default {
        params: {
          timeType: topoData.timeType || 5
        },
-        currentProject: {
-          id: this.project.id
-        },
        show: true
      }
+      if (this.project) {
+        params.currentProject = {
+          id: this.project.id
+        }
+      }
      bus.$emit('showMeta2dPreview', params)
      // console.log(getTopology(this.meta2dId).data())
      // const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -10,10 +10,11 @@
      @edit="beforeEdit"
      @exitEdit="exitEdit"
      @reload="reload"
+      @saveChart="saveChart"
      @getNodesArr="getNodesArr"
    />
    <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
-      <div v-for="(item,index) in nodesArr" v-if="!editFlag"
+      <div v-for="(item,index) in nodesArr" v-if="!editFlag && project"
           :key="index"
           v-show="(item.y + offsetY - 48 > -20) && (item.x + item.width/2 + offsetX - 24 > - 20)"
           :style="{position: 'absolute',top:item.y + offsetY - 48 + 'px',left:item.x + item.width/2 + offsetX - 24 +'px', 'z-index': 10}"
@@ -51,6 +52,7 @@
      :selectPens.sync="selectPens"
      :querysArray="querysArray"
      :params="params"
+      :is-chart="isChart"
      :meta2dId="meta2dId"
      @updatePens="updatePens"
    />
@@ -110,7 +112,7 @@
 <script>
 import meta2dHeader from '@/components/common/project/meta2d/meta2dHeader'
 import meta2dProps from '@/components/common/project/meta2d/meta2dProps'
-import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain'
+import meta2dMainCalc from '@/components/common/project/meta2d/js/meta2dMainCalc'
 import meta2dTooltip from '@/components/common/project/meta2d/meta2dTooltip'
 import CanvasContextMenu from '@/components/common/project/meta2d/CanvasContextMenu'
 import popDataMain from '@/components/common/project/popData/Main'
@@ -124,7 +126,7 @@ import bus from '@/libs/bus'
 import { globalStore } from '@meta2d/core'
 export default {
  name: 'meta2dMain',
-  mixins: [meta2dMain, topoUtil],
+  mixins: [meta2dMainCalc, topoUtil],
  props: {
    meta2dId: {}, // 唯一id 不可重复
    iconArray: {
@@ -167,6 +169,7 @@ export default {
    topoData: {
      immediate: false,
      handler () {
+        console.log(123213)
        if (!this.isChart) {
          this.reload()
        }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -8,7 +8,7 @@
        <meta2dCanvas :canvasProps="canvasProps"  :params.sync="params" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
      </el-tab-pane>
      <el-tab-pane :label="$t('project.topology.data')" name="data">
-        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
+        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData" :isChart="isChart"/>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -33,7 +33,8 @@ export default {
    querysArray: {},
    params: {},
    meta2dId: {},
-    modules: {}
+    modules: {},
+    isChart: {}
  },
  components: {
    meta2dElement,
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -141,11 +141,25 @@
      <el-form-item v-if="isDiagram(chartConfig.type)" >
        <div class="topology-box">
          <div class="topology-mc"></div>
-          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
+<!--          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>-->
+          <meta2dMain :meta2dId="'rightBoxChart'" :topoData="chartConfig.param.topo" :querysArray="querysArray" :params="{timeType: 5}" :iconArray="iconArray" @reload="reloadTopo" :isChart="true"/>
        </div>
      </el-form-item>
      <!--topplogy-->
-      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
+      <meta2dMain
+        @save="saveTopo"
+        class="topology-dialog"
+        v-if="topologyDialog"
+        ref="rightBoxChartEdit"
+        :meta2dId="'rightBoxChartEdit'"
+        :topoData="chartConfig.param.topo"
+        :querysArray="querysArray"
+        :params="{timeType: 5}"
+        :iconArray="iconArray"
+        @reload="reloadTopo"
+        @exit="topologyDialogChange"
+        :isChart="true"
+      />
      <!--text-->
      <el-form-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
        <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
@@ -290,20 +304,47 @@
      </div>

    </el-form>
+    <el-dialog
+      :title="this.chartConfig.name || 'Chart'"
+      :visible.sync="isPreview.show"
+      fullscreen
+      class="no-transform-dialog"
+      custom-class="nz-new-dialog meta2d-preview"
+      :append-to-body="false"
+      :modal-append-to-body="false"
+      @close="isPreview.show = false"
+      destroy-on-close
+    >
+      <div v-if="isPreview.show" style="width: 100%;height: 100%">
+        <meta2dMain
+          :meta2dId="'projectIdIsPreview'"
+          :is-preview="true"
+          :name="'preview'"
+          :topoData="isPreview.topoData"
+          :querysArray="isPreview.querysArray"
+          :project="isPreview.currentProject"
+          :params="isPreview.params"
+          :iconArray="iconArray"
+        />
+      </div>
+    </el-dialog>
  </div>
 </template>

 <script>
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
-import diagram from '@/components/common/ChartDiagram/diagram'
 import richTextEditor from '@/components/chart/richTextEditor'
+import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
+import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
+import { clearTopology } from '@/components/common/js/common'
+import bus from "@/libs/bus";
 export default {
  name: 'otherChartConfig',
  mixins: [publicConfig, chartTypeShow],
  components: {
-    diagram,
-    richTextEditor
+    richTextEditor,
+    meta2dMain
  },
  watch: {
    // 'chartConfig.param.text': {
@@ -346,12 +387,27 @@ export default {
          id: 'clock',
          name: this.$t('dashboard.dashboard.chartForm.typeVal.clock.label')
        }
-      ]
+      ],
+      topoData: {},
+      querysArray: [],
+      meta2dType: '',
+      iconArray: [],
+      isPreview: {
+        show: false,
+        topoData: {},
+        querysArray: {},
+        currentProject: {},
+        params: {}
+      }
    }
  },
  methods: {
    init () {
      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      this.reloadTopo()
+      bus.$on('showMeta2dPreview', (params) => {
+        this.isPreview = params
+      })
    },
    chartTypeChange (type) {
      switch (type) {
@@ -445,20 +501,56 @@ export default {
    },
    topologyDialogChange (flag, data) {
      this.topologyDialog = flag
+      if (flag) {
+        setTimeout(() => {
+          this.$refs.rightBoxChartEdit.$refs.header.editMeta2d()
+        }, 200)
+      }
      if (data) {
        this.chartConfig.param.topo = data
        this.change()
      }
    },
+    saveTopo (topo) {
+      this.topologyDialogChange(false, topo)
+    },
    textChange (val) {
      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val}</div></div>`
      this.chartConfig.param.text = html
      this.$refs.chartForm.validateField('param.text')
      this.change()
+    },
+    reloadTopo () {
+      const res = {
+        data: this.chartConfig.param
+      }
+      if (res.data && res.data.topo) {
+        this.topoData = res.data.topo || {}
+        if (res.data.topo.topo) {
+          this.topoData = res.data.topo.topo || {}
+        }
+        this.querysArray = res.data.topo.elements || []
+        // this.params = {
+        //   timeType: res.data.topo.timeType || 5
+        // }
+      } else {
+        this.topoData = {}
+        this.querysArray = []
+        // this.params = {
+        //   timeType: 5
+        // }
+      }
    }
  },
  created () {
    this.init()
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+  },
+  destroyed () {
+    clearTopology()
+    bus.$off('showMeta2dPreview')
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/searchBox/searchBox.vue
+++ b/nezha-fronted/src/components/common/searchBox/searchBox.vue
@@ -828,7 +828,7 @@ export default {
        }
      } else {
        this.selectArr.push({
-          i18n: key,
+          i18n: this.$t(findKeyItem.i18n),
          code: findKeyItem.i18n,
          name: name,
          realValue: [realValue],
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -155,6 +155,7 @@
        :chart-info="chartInfo"
        :from="fromRoute.alertMessage"
        :filter="{}"
+        :currentMsg="currentMsg"
        :is-fullscreen="true"
        :time-range="searchTimeDialog"
        @showFullscreen="showFullscreen"
@@ -599,6 +600,7 @@ export default {
      // this.sign = Number(row.alertRule.id)
      this.$get('/alert/rule/' + row.alertRule.id).then(res => {
        this.currentMsg = { ...row, alertRule: { ...res.data } }
+        console.log(this.currentMsg)
        this.$nextTick(() => {
          this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
          this.$store.dispatch('dispatchPanelTime', {