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

<template>
  <div class="full-width-height">
   <nz-bottom-data-list
      :showTitle='showTitle'
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
      :layout="['searchInput', 'elementSet']"
      :search-msg="searchMsg"
      :tabs="tabs"
      :targetTab="targetTab"
      @search="search"
      @changeTab="changeTab"
      class="full-width-height"
    >
      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
      <template v-slot>
        <endpoint-table
          ref="dataTable"
          v-loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
          :height="subTableHeight"
          :now-time="nowTime"
          :table-data="tableData"
          :endpointTab="true"
          @del="del"
          @edit="edit"
          @copy="copy"
          @orderBy="tableDataSort"
          @addSilence="addSilence"
          @reload="getTableData"
          @selectionChange="selectionChange"
        ></endpoint-table>
      </template>
      <template v-slot:pagination>
        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
      </template>
    </nz-bottom-data-list>
    <transition name="right-box">
      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :optionType="'edit'"></edit-endpoint-box-new>
    </transition>
    <transition name="right-box">
      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightEditBox" :disabled="false" :optionType="'add'"></edit-endpoint-box-new>
    </transition>
    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box></transition>
  </div>
</template>

<script>
import dataListMixin from '@/components/common/mixin/dataList'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import endpointTable from '@/components/common/table/settings/endpointTable'
import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
import { fromRoute } from '@/components/common/js/constants'
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

export default {
  name: 'terminalLogTab',
  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    endpointTable,
    EditEndpointBoxNew,
    alertSilenceBox
  },
  watch: {
    obj: {
      immediate: true,
      handler (n) {
        if (n) {
          this.getTableData()
        }
      }
    }
  },
  data () {
    return {
      url: 'monitor/endpoint',
      tableId: 'endpointTab', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        zheze_none: true,
        searchLabelList: [{
          id: 13,
          name: this.$t('project.endpoint.endpointId'),
          type: 'input',
          label: 'ids',
          disabled: false
        },
        {
          id: 12,
          name: this.$t('project.endpoint.endpointName'),
          type: 'input',
          label: 'name',
          disabled: false
        }
        ]
      },
      blankSilenceObject: {
        startAt: ''
      },
      objectSilence: {},
      silenceBoxShow: false,
      nowTime: '',
      rightBox: {
        editShow: false,
        show: false
      },
      fromBottom: true
    }
  },
  methods: {
    getTableData () {
      const params = {
        ...this.searchLabel,
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      if (this.from === fromRoute.module) {
        params.moduleIds = this.obj.id
      } else if (this.from === fromRoute.asset) {
        params.assetIds = this.obj.id
      }
      this.$get(this.url, params).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
          for (let i = 0; i < response.data.list.length; i++) {
            response.data.list[i].configs.forEach(item => {
              item.config = JSON.parse(item.config)
            })
          }
          this.tableData = response.data.list
          this.nowTime = this.utcTimeToTimezoneStr(response.time)
          this.pageObj.total = response.data.total
          if (!this.scrollbarWrap) {
            this.$nextTick(() => {
              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
              this.toTopBtnHandler(this.scrollbarWrap)
            })
          }
        }
      })
    },
    edit (row, copyFlag) {
      this.$get('monitor/endpoint/' + row.id).then(res => {
        this.object = JSON.parse(JSON.stringify(res.data))
        if (copyFlag) {
          this.object.id = ''
          this.object.name = this.object.name + '-copy'
          if (this.object.name.length > 64) {
            const length = this.object.name.length - 64
            this.object.name = row.name.substring(0, row.name.length - length) + '-copy'
          }
        }
        this.object.configs.forEach(item => {
          item.config = JSON.parse(item.config)
        })
        this.object.paramObj = []
        this.object.labelModule = []
        if (!this.object.configs[0].config.relabel_config) {
          this.object.configs[0].config.relabel_config = []
        }
        this.object.configs[0].config.relabel_config && this.object.configs[0].config.relabel_config.forEach(item => {
          item.showAllRelabelOption = false
          item.tags = ''
        })
        this.object.configs[1].config.forEach(item => {
          item.labelModule = []
          if (JSON.stringify(item.labels) !== '{}' && item.labels) {
            Object.keys(item.labels).forEach(key => {
              item.labelModule.push({ key, value: item.labels[key] })
            })
          } else {
            item.labelModule.push({ key: '', value: '' })
          }
          item.pipeline && item.pipeline.forEach((pipeline) => {
            if (pipeline.type === 'labels') {
              const labelsArr = []
              if (JSON.stringify(pipeline.labels) !== '{}' && pipeline.labels) {
                Object.keys(pipeline.labels).forEach(key => {
                  labelsArr.push({ key, value: pipeline.labels[key] })
                })
              } else {
                labelsArr.push({ key: '', value: '' })
              }
              pipeline.labels = labelsArr
            }
            if (pipeline.type === 'json') {
              const expressionsArr = []
              if (JSON.stringify(pipeline.expressions) !== '{}' && pipeline.expressions) {
                Object.keys(pipeline.expressions).forEach(key => {
                  expressionsArr.push({ key, value: pipeline.expressions[key] })
                })
              } else {
                expressionsArr.push({ key: '', value: '' })
              }
              pipeline.expressions = expressionsArr
            }
          })
          if (item.type === 'file') {
            item.unit = ''
            item.appName = ''
            item.listenAddress = ''
          } else if (item.type === 'journal') {
            item.fileName = ''
            item.appName = ''
            item.listenAddress = ''
          } else if (item.type === 'syslog') {
            item.fileName = ''
            item.unit = ''
          }
        })
        if (JSON.stringify(this.object.configs[0].config.labels) !== '{}' && this.object.configs[0].config.labels) {
          Object.keys(this.object.configs[0].config.labels).forEach(key => {
            this.object.labelModule.push({ key, value: this.object.configs[0].config.labels[key] })
          })
        } else {
          this.object.labelModule.push({ key: '', value: '' })
        }
        if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
          Object.keys(this.object.configs[0].config.params).forEach(key => {
            this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
          })
        } else {
          this.object.paramObj.push({ key: '', value: [] })
        }
        this.object.assetName = this.object.asset ? this.object.asset.name : ''
        this.object.assetId = this.object.asset ? this.object.asset.id + '' : ''
        this.object.projectId = this.object.project.id
        this.object.moduleId = this.object.module.id
        this.object.type = this.object.module.type
        if (copyFlag) {
          this.rightBox.show = true
        } else {
          this.rightBox.editShow = true
        }
      })
    },
    copy (row) {
      this.edit(row, true)
    },
    closeRightEditBox (refresh) {
      this.rightBox.editShow = false
      this.rightBox.show = false
      if (refresh) {
        this.delFlag = true
        this.getTableData()
      }
    }
  }
}
</script>
<style scoped>
  .full-width-height{
    width: 100%;
    height: 100%;
  }
</style>