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

<template>
  <div class="right-box right-box-modify-endpoint" v-clickoutside="{obj:batchEndpoint,func:clickOutside}">
    <div class="right-box__header">
      <!-- begin--标题-->
      <div class="header__title">{{$t("overall.batchAddEndpoint")}}</div>
      <!-- end--标题-->
      <div class="header__operation">
        <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
      </div>
    </div>

    <!-- begin--表单-->
    <div class="right-box-form-box right-box__container" style="overflow: hidden;padding-left: 20px;margin-top: 0">
      <div class="container__form" style="display: flex; flex-direction: column;height: 100%">
        <el-form class="right-box-form" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
          <el-form-item :label="$t('project.module.module')" prop="ChartTemplate">
            <v-selectpage
              :data="moduleList"
              :tb-columns="ChartSearchShowFields"
              :params="{
                varType: 2, panelId: 0,
                returnChildren:0,groupId:0,
              }"
              :multiple="true"
              :language="language"
              title="ChartSearch"
              key-field="id"
              show-field="name"
              v-model="batchEndpoint.moduleIds"
              class="form-control"
              :result-format="resultFormat"
            ></v-selectpage>
          </el-form-item>
          <el-form-item :label="$t('asset.asset')" prop="ChartTemplate">
            <v-selectpage
              :data="assetDataList"
              :tb-columns="columns"
              :params="{
                varType: 2, panelId: 0,
                returnChildren:0,groupId:0,
              }"
              :multiple="true"
              :language="language"
              title="ChartSearch"
              key-field="id"
              show-field="name"
              v-model="batchEndpoint.assetIds"
              class="form-control"
              :result-format="resultFormat"
            ></v-selectpage>
          </el-form-item>
        </el-form>

        <div class="right-box-sub-title">{{ $t("overall.configEndpoint") }}</div>
        <div class="right-box-line"></div>

        <el-table
          :data="batchEndpoint.tableData"
          :class="showError?'error' : ''"
          :height="'calc(100% - 400px)'"
          style="width:calc(100% - 70px);margin-left: 15px;min-height:400px;flex: 1"
          border>
          <el-table-column
            v-for="(item, index) in endpointTableTitle"
            v-if="item.show"
            :key="`col-${index}`"
            :fixed="item.fixed"
            :label="item.label"
            :min-width="`${item.minWidth}`"
            :prop="item.prop"
            :resizable="true"
            :sort-orders="['ascending', 'descending']"
            :width="`${item.width}`"
            class="data-column"
          >
            <template slot="header">
              <span>{{item.label}}</span>
              <div class="col-resize-area"></div>
            </template>
            <template slot-scope="scope" :column="item">
              <template v-if="item.prop === 'name'">
                {{scope.row[item.prop]}}
              </template>
              <template v-else-if="item.prop === 'asset'">
                {{scope.row.asset?scope.row.asset.name : '' }}
              </template>
              <template v-else-if="item.prop === 'project'">
                {{scope.row.project?scope.row.project.name : '' }}
              </template>
              <template v-else-if="item.prop === 'module'">
                {{scope.row.module?scope.row.module.name : '' }}
              </template>
              <template v-else-if="item.prop == 'configs'">
<!--                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">-->
<!--                  <span class="configs-endpoint metrics">{ Metrics }</span>-->
<!--                  <div class="endpointConfigsTips" slot="content">-->
<!--                    <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
<!--                  </div>-->
<!--                </el-tooltip>-->
<!--                <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">-->
<!--                  <span class="configs-endpoint logs">{ Logs }</span>-->
<!--                  <div class="endpointConfigsTips" slot="content">-->
<!--                    <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
<!--                  </div>-->
<!--                </el-tooltip>-->
                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
                  <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
                  <div class="endpointConfigsTips" slot="content">
                    <pre >{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
                  </div>
                </el-tooltip>
              </template>
              <template v-else>1</template>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            :width="90"
            fixed="right">
            <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
            <div slot-scope="scope" class="table-operation-items">
              <span class="table-operation-item" v-has="'model_edit'" @click="del(scope.$index)"><i class="nz-icon nz-icon-minus"></i></span>
              <span class="table-operation-item"  @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></span>
            </div>
          </el-table-column>
        </el-table>
        <div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
      </div>
    </div>

    <!--底部按钮-->
    <div class="right-box__footer">
      <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="footer__btn footer__btn--light">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button @click="generate" id="ep-generate" class="footer__btn">
        <span>{{$t('overall.generate')}}</span>
      </button>
      <button @click="save" class="footer__btn" id="ep-add" :class="!batchEndpoint.tableData.length?'nz-btn-disabled':''" :disabled="!batchEndpoint.tableData.length">
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
    <!--    edit endpoint-->
    <transition name="right-box">
      <edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'" :optionType="optionType"></edit-endpoint-box-new>
    </transition>
  </div>
</template>

<script>
import editEndpointBoxNew from './editEndpointBoxNew'
import editRigthBox from '@/components/common/mixin/editRigthBox'
export default {
  name: 'batchAddEndpointBox',
  props: {
    currentProject: Object,
    currentModule: Object,
    selectEndpointList: Array
  },
  mixins: [editRigthBox],
  components: {
    'edit-endpoint-box-new': editEndpointBoxNew
  },
  data () {
    return {
      showError: false,
      rules: {
        projectId: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
        moduleId: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ]
      },
      batchEndpoint: {
        moduleIds: '',
        assetIds: '',
        tableData: []
      },
      assetDataList: [],
      moduleList: [],
      language: localStorage.getItem('nz-language'),
      ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
        { title: 'ID', data: 'id' },
        {
          title: this.$t('config.model.titleName'),
          data: function (row) {
            if (row.name.length > 15) {
              return row.name.substring(0, 12) + '...'
            }
            return row.name
          }
        },
        {
          title: this.$t('project.project.projectName'),
          data: function (row) {
            if (row.project && row.project.name.length > 15) {
              return row.project.name.substring(0, 12) + '...'
            }
            return ''
          }
        },
        {
          title: this.$t('overall.remark'),
          data: function (row) {
            if (row.remark && row.remark.length > 15) {
              return row.remark.substring(0, 12) + '...'
            }
            return row.remark
          }
        }
      ],
      columns: [
        { title: 'id', data: 'id' },
        {
          title: 'name',
          data: function (row) {
            if (row.name.length > 15) {
              return row.name.substring(0, 12) + '...'
            }
            return row.name
          }
        },
        { title: 'Manage Ip', data: 'manageIp' },
        {
          title: 'Type',
          data: (row) => {
            return row.type ? row.type.name : ''
          }
        },
        {
          title: 'Model',
          data: (row) => {
            return row.model ? row.model.name : ''
          }
        },
        {
          title: 'Datacenter',
          data: (row) => {
            return row.dc ? row.dc.name : ''
          }
        }
      ],
      object: {},
      vendorAndModelOptionData: [],
      paramBorderColor: '#dcdfe6',
      endpointTouch: false,
      endpoint: { projectId: '', moduleId: '', endpointList: [] },
      currentModuleCopy: {},
      currentProjectCopy: { id: '' },
      tempParamObj: [],
      tempLabelModule: [],
      inputKeyErr: [],
      tempEndpoint: {},
      tempEndpoint2: {},
      assetLoading: true,
      rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
      optionType: 'batchAdd',
      endpointTableTitle: [ // 原始table列
        {
          label: this.$t('project.endpoint.name'),
          prop: 'name',
          show: true
        },
        {
          label: this.$t('overall.project'),
          prop: 'project',
          show: true
        },
        {
          label: this.$t('project.module.module'),
          prop: 'module',
          show: true
        },
        {
          label: this.$t('project.endpoint.asset'),
          prop: 'asset',
          show: true
        },
        {
          label: this.$t('project.endpoint.configs'),
          prop: 'configs',
          show: true,
          width: 150
        }
      ],
      endpointIndex: ''
    }
  },
  methods: {
    clickOutside () {
      this.esc(false)
    },

    /* 关闭弹框 */
    esc (refresh, importResult) {
      this.prevent_opt.save = false
      this.$emit('close', refresh, importResult)
    },
    // 获取endpoint弹框中module下拉框数据
    getModuleList () {
      this.$get('monitor/module', { projectIds: '', pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.moduleList = response.data.list
        }
      })
    },
    // 获取endpoint弹框中的asset子弹框里asset列表数据
    getAssetList () {
      this.assetLoading = true
      const params = {
        pageSize: -1
      }
      this.$get('asset/asset', params).then(response => {
        if (response.code === 200) {
          this.assetDataList = response.data.list
        }
      }).finally(() => {
        setTimeout(() => {
          this.assetLoading = false
        }, 200)
      })
    },
    generate () {
      if (!this.batchEndpoint.assetIds || !this.batchEndpoint.moduleIds) {
        this.$message.error('Please select module or asset')
      }
      this.$post('/monitor/endpoint/render', { moduleIds: this.batchEndpoint.moduleIds, assetIds: this.batchEndpoint.assetIds }).then(res => {
        res.data.list.forEach(item => {
          item.configs = JSON.parse(item.configs)
          item.moduleId = item.module.id
          item.assetId = item.asset.id
        })
        this.batchEndpoint.tableData = res.data.list
      })
    },
    // 保存endpoint
    save () {
      if (this.prevent_opt.save) { return } ;
      this.prevent_opt.save = true
      this.showError = false
      if (!this.batchEndpoint.tableData.length) {
        this.prevent_opt.save = false
        this.showError = true
        return
      }
      // 对endpointList进行处理，避免携带过多无用数据
      this.$refs.addEndpoint.validate((valid) => {
        if (valid) {
          const paramsArr = this.batchEndpoint.tableData.map(item => {
            const obj = JSON.parse(JSON.stringify(item))
            obj.configs = JSON.stringify(obj.configs)
            return {
              ...obj
            }
          })
          this.$post('/monitor/endpoint/bulk', paramsArr).then(response => {
            this.prevent_opt.save = false
            if (response.code === 200) {
              // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
              response.data.failDetail.forEach(item => {
                item.info = 'AssetId：' + this.batchEndpoint.tableData[item.lineNo - 1].asset.id + ' ModuleId：' + this.batchEndpoint.tableData[item.lineNo - 1].module.id + ' '
              })
              this.esc(true, response.data)
            } 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
      }
    },
    closeRightBox (isEdit, endpoint, isAll) {
      this.rightBox.show = false
      if (!isEdit) { return }
      this.batchEndpoint.tableData.forEach((item, index) => {
        if (index === this.endpointIndex) {
          this.batchEndpoint.tableData[index] = { ...endpoint }
        }
      })
      this.batchEndpoint.tableData = [...this.batchEndpoint.tableData]
    },
    del (index) {
      this.batchEndpoint.tableData.splice(index, 1)
    },
    edit (row, endpointIndex) {
      this.endpointIndex = endpointIndex
      this.object = row
      // this.object.configs = JSON.parse(this.object.configs)
      this.object.projectId = this.object.project.id
      this.object.moduleId = this.object.module.id
      this.object.assetName = this.object.asset.name
      // this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
      // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
      this.object.paramObj = []
      this.object.labelModule = []
      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.pipeline) {
          item.pipeline = []
        }
      })
      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: [] })
      }
      // if (!this.object.chartIds && this.object.module.chartIds) {
      //   this.object.chartIds = this.object.module.chartIds
      // } else {
      //   this.object.chartIds = ''
      // }
      this.rightBox.show = true
    },
    clConfigs (item) {
      const str = []
      if (item.configs[0].enable) {
        str.push(item.configs[0])
      }
      if (item.configs[1].enable) {
        str.push(item.configs[1])
      }
      return str
    }
  },
  created () {
    this.isEdit = true
    this.getModuleList()
    this.getAssetList()
  },
  watch: {
    'batchEndpoint.tableData': {
      deep: true,
      handler (n) {
        this.showError = false
      }
    }
  }
}
</script>
<style scoped>
  .error{
    border: 1px solid #F56C6C !important;
  }
  .right-box-sub-title{
    width: calc(100% - 70px);
    margin-left: 15px;
  }
  /deep/ .el-table thead .cell{
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 14px;
    font-weight: 400;
    padding: 5px;
  }
  .table-operation-items{
    display: flex;
    justify-content: space-around;
  }
  /deep/ .el-table th{
    padding: 7px 0;
  }
  .configs-endpoint{
    border-radius: 4px;
    padding: 2px 7px;
  }
  .configs-endpoint.metrics{
    color: #3C92F1;
  }
  .configs-endpoint.logs{
    color: #25BF9A;
  }
</style>