Cloudpods/frontend/containers/Compute/views/vminstance/dialogs/ChangeBandwidth.vue

<template>
  <base-dialog @cancel="cancelDialog">
    <div slot="header">{{$t('compute.text_1185')}}</div>
    <div slot="body">
      <dialog-selected-tips :name="$t('dictionary.server')" :count="params.data.length" :action="$t('compute.text_1185')" />
      <dialog-table :data="params.data" :columns="params.columns.slice(0, 3)" />
      <a-form :form="form.fc" hideRequiredMark v-bind="formItemLayout">
        <a-form-item :label="$t('compute.bandwidth.symmetric.title')">
          <a-checkbox v-model="symmetricBandwidth" />
        </a-form-item>
        <a-form-item :label="$t('compute.bandwidth.title')" v-if="symmetricBandwidth">
          <a-tooltip placement="top" :title="$t('compute.text_1338', [[bandwidthMax]])">
            <a-input-number v-decorator="decorators.bandwidth" :parser="getParser" :min="0" :max="bandwidthMax" />
            Mbps
          </a-tooltip>
        </a-form-item>
        <a-form-item :label="$t('compute.bandwidth.tx.title')" v-if="!symmetricBandwidth">
          <a-tooltip placement="top" :title="$t('compute.text_1338', [[bandwidthMax]])">
            <a-input-number v-decorator="decorators.tx_bw_limit" :parser="getParser" :min="0" :max="bandwidthMax" />
            Mbps
          </a-tooltip>
        </a-form-item>
        <a-form-item :label="$t('compute.bandwidth.rx.title')" v-if="!symmetricBandwidth">
          <a-tooltip placement="top" :title="$t('compute.text_1338', [[bandwidthMax]])">
            <a-input-number v-decorator="decorators.rx_bw_limit" :parser="getParser" :min="0" :max="bandwidthMax" />
            Mbps
          </a-tooltip>
        </a-form-item>
        <a-form-item :label="$t('compute.text_1041')" v-if="isOpenWorkflow">
          <a-input v-decorator="decorators.reason" :placeholder="$t('compute.text_1105')" />
        </a-form-item>
      </a-form>
    </div>
    <div slot="footer">
      <a-button type="primary" @click="handleConfirm" :loading="loading">{{ $t('dialog.ok') }}</a-button>
      <a-button @click="cancelDialog">{{ $t('dialog.cancel') }}</a-button>
    </div>
  </base-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import DialogMixin from '@/mixins/dialog'
import WindowsMixin from '@/mixins/windows'
import WorkflowMixin from '@/mixins/workflow'

export default {
  name: 'VmChangeBandwidthDialog',
  mixins: [DialogMixin, WindowsMixin, WorkflowMixin],
  data () {
    return {
      loading: false,
      form: {
        fc: this.$form.createForm(this),
      },
      decorators: {
        bandwidth: [
          'bandwidth',
          {
            initialValue: this.params.data[0].bw_limit || 0,
            rules: [
              { required: true, message: this.$t('compute.text_1188') },
            ],
          },
        ],
        tx_bw_limit: [
          'tx_bw_limit',
          {
            initialValue: this.params.data[0].tx_bw_limit || 0,
          },
        ],
        rx_bw_limit: [
          'rx_bw_limit',
          {
            initialValue: this.params.data[0].rx_bw_limit || 0,
          },
        ],
        reason: [
          'reason',
          {
            initialValue: '',
          },
        ],
      },
      formItemLayout: {
        wrapperCol: {
          span: 21,
        },
        labelCol: {
          span: 3,
        },
      },
      bandwidthMax: 100000,
      symmetricBandwidth: !this.params.data[0].tx_bw_limit || !this.params.data[0].rx_bw_limit,
    }
  },
  computed: {
    ...mapGetters(['isAdminMode', 'scope', 'userInfo']),
    selectedItems () {
      return this.params.data
    },
    isOpenWorkflow () {
      return this.checkWorkflowEnabled(this.WORKFLOW_TYPES.APPLY_SERVER_CHANGECONFIG)
    },
  },
  methods: {
    async doChangeBandwidth (values) {
      const manager = new this.$Manager('servers')
      const ids = this.params.data.map(item => item.guest_id)
      const data = {
        bandwidth: values.bandwidth,
        tx_bw_limit: values.tx_bw_limit,
        rx_bw_limit: values.rx_bw_limit,
        mac: this.params.data[0].mac_addr,
      }
      return manager.batchPerformAction({
        ids,
        action: 'change-bandwidth',
        data,
      })
    },
    async doChangeBandwidthByWorkflow (values) {
      const curData = this.params.data[0]
      const params = {
        bandwidth: values.bandwidth,
        mac: curData.mac_addr,
      }
      const resData = this.params.resData
      const serverConf = resData.map((item) => {
        return {
          name: item.name,
          project: item.tenant,
          ip_addr: curData.ip_addr,
          before: {
            bw_limit: curData.bw_limit,
            tx_bw_limit: curData.tx_bw_limit,
            rx_bw_limit: curData.rx_bw_limit,
          },
          after: {
            bw_limit: values.bandwidth,
            tx_bw_limit: values.tx_bw_limit,
            rx_bw_limit: values.rx_bw_limit,
          },
        }
      })
      params.project_id = this.userInfo.projectId
      params.domain = this.userInfo.projectDomainId
      const variables = {
        change_type: 'change-bandwidth',
        project: resData[0].tenant_id,
        project_domain: resData[0].domain_id,
        process_definition_key: this.WORKFLOW_TYPES.APPLY_SERVER_CHANGECONFIG,
        initiator: this.userInfo.id,
        'change-bandwidth-paramter': JSON.stringify(params),
        ids: resData[0].id,
        serverConf: JSON.stringify(serverConf),
        description: values.reason,
      }
      await this.createWorkflow(variables)
      this.$message.success(this.$t('common.worflow_tip', [this.$t('compute.text_1185')]))
      this.$router.push('/workflow')
    },
    async handleConfirm () {
      this.loading = true
      try {
        const values = await this.form.fc.validateFields()
        if (this.isOpenWorkflow) {
          await this.doChangeBandwidthByWorkflow(values)
        } else {
          await this.doChangeBandwidth(values)
        }
        this.params.refresh()
        this.cancelDialog()
        this.$message.success(this.$t('compute.text_423'))
      } finally {
        this.loading = false
      }
    },
    getParser (val) {
      if (isNaN(val)) {
        return 0
      }
      return Math.round(val)
    },
  },
}
</script>