Cloudpods/frontend/containers/DB/views/rds/sidepage/Detail.vue

<template>
  <detail
    :on-manager="onManager"
    :base-info="baseInfo"
    status-module="rds"
    :data="data"
    resource="dbinstances"
    :extra-info="extraInfo"
    auto-hidden-columns-key="rds_hidden_columns" />
</template>

<script>
// import BrandIcon from '@/sections/BrandIcon'
import {
  getUserTagColumn,
  // getExtTagColumn,
} from '@/utils/common/detailColumn'
import {
  getBrandTableColumn,
  getSwitchTableColumn,
} from '@/utils/common/tableColumn'
import { sizestr } from '@/utils/utils'
import WindowsMixin from '@/mixins/windows'
import { hasPermission } from '@/utils/auth'
import { DBINSTANCE_CATEGORY, DBINSTANCE_STORAGE_TYPE } from '../constants'

export default {
  name: 'RDSDetail',
  mixins: [WindowsMixin],
  props: {
    onManager: {
      type: Function,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    columns: Array,
  },
  data () {
    const formatPostpaid = (row) => {
      const ret = []
      if (row.billing_type === 'postpaid') {
        ret.push(<div style={{ color: '#0A1F44' }}>{ this.$t('billingType.postpaid') }</div>)
      } else if (row.billing_type === 'prepaid') {
        ret.push(<div style={{ color: '#0A1F44' }}>{ this.$t('billingType.prepaid') }</div>)
      }
      if (row.expired_at) {
        const dateArr = this.$moment(row.expired_at).fromNow().split(' ')
        const date = dateArr.join(' ')
        const seconds = this.$moment(row.expired_at).diff(new Date()) / 1000
        const textColor = seconds / 24 / 60 / 60 < 7 ? '#DD2727' : '#53627C'
        const text = seconds < 0 ? this.$t('db.text_162') : this.$t('db.text_163', [date])
        ret.push(<div style={{ color: textColor }}>{text}</div>)
      }
      return ret
    }
    return {
      baseInfo: [
        getUserTagColumn({ onManager: this.onManager, resource: 'dbinstance', columns: () => this.columns, tipName: this.$t('dictionary.dbinstances') }),
        // getExtTagColumn({ onManager: this.onManager, resource: 'dbinstance', columns: () => this.columns, tipName: this.$t('dictionary.dbinstances') }),
        getBrandTableColumn(),
        {
          field: 'charge_type',
          title: this.$t('db.text_54'),
          slots: {
            default: ({ row }) => {
              return formatPostpaid(row)
            },
          },
        },
        {
          field: 'region',
          title: this.$t('db.text_40'),
          slots: {
            default: ({ row }) => {
              if (!row.region_id) return row.region || '-'
              const p = hasPermission({ key: 'cloudregions_get' })
              let node
              if (p) {
                node = (
                  <list-body-cell-wrap copy row={ row } onManager={ this.onManager } field='region' title={ row.region } hideField={ true }>
                    <side-page-trigger permission='areas_get' name='CloudregionSidePage' id={row.region_id} vm={this}>{ row.region }</side-page-trigger>
                  </list-body-cell-wrap>
                )
              } else {
                node = (
                  <list-body-cell-wrap copy row={ row } onManager={ this.onManager } field='region' title={ row.region } />
                )
              }
              return [
                <div class='text-truncate'>{ node }</div>,
              ]
            },
          },
        },
        {
          field: 'zone',
          hiddenField: 'region',
          title: this.$t('db.text_133'),
          slots: {
            default: ({ row }) => {
              const ret = []
              let i = 0
              for (;;) {
                ++i
                const value = row[`zone${i}_name`]
                if (!value) break
                ret.push(
                  <div>
                    {value}({i > 1 ? this.$t('db.text_164') : this.$t('db.text_165')})
                  </div>,
                )
              }
              return ret
            },
          },
        },
        {
          field: 'ip_addrs',
          title: this.$t('db.intranet_ip'),
          minWidth: 200,
          slots: {
            default: ({ row }) => {
              const ip_addrs = (row.ip_addrs || '').split(',')
              return [
                ...ip_addrs.map(ip => {
                  return (<list-body-cell-wrap hide-field copy message={ip}><span>{ip}</span></list-body-cell-wrap>)
                }),
              ]
            },
          },
          hidden: (row) => {
            return !row.ip_addrs
          },
        },
      ],
      extraInfo: [
        {
          title: this.$t('db.text_166'),
          items: [
            {
              field: 'engine',
              title: this.$t('db.text_57'),
              slots: {
                default: ({ row }) => {
                  return `${row.engine} ${row.engine_version}`
                },
              },
            },
            {
              field: 'maintain_time',
              title: this.$t('db.text_167'),
            },
            {
              field: 'instance_type',
              title: this.$t('db.text_168'),
            },
            {
              field: 'category',
              title: this.$t('db.text_119'),
              slots: {
                default: ({ row }) => {
                  return DBINSTANCE_CATEGORY[row.category] || row.category || '-'
                },
              },
            },
            {
              field: 'storage_type',
              title: this.$t('db.text_120'),
              slots: {
                default: ({ row }) => {
                  return DBINSTANCE_STORAGE_TYPE[row.storage_type] || row.storage_type || '-'
                },
              },
            },
            {
              field: 'vcpu_count',
              title: 'CPU',
              slots: {
                default: ({ row }) => {
                  return this.$t('db.text_170', [row.vcpu_count])
                },
              },
            },
            {
              field: 'vmem_size_mb',
              title: this.$t('db.text_132'),
              slots: {
                default: ({ row }) => {
                  return sizestr(row.vmem_size_mb, 'M', 1024)
                },
              },
            },
            {
              field: 'iops',
              title: 'IOPS',
              slots: {
                default: ({ row }) => {
                  return row.iops || '-'
                },
              },
            },
          ],
          hidden: () => this.$isScopedPolicyMenuHidden('rds_hidden_columns.db_info'),
        },
        {
          title: this.$t('db.text_171'),
          items: [
            {
              field: 'internal_connection_str',
              title: this.$t('db.text_172'),
              slots: {
                default: ({ row }) => {
                  if (row.internal_connection_str) {
                    return row.provider === 'Qcloud' ? row.internal_connection_str : `${row.internal_connection_str}:${row.port}`
                  }
                  return '-'
                },
              },
            },
            {
              field: 'connection_str',
              title: this.$t('db.text_173'),
              slots: {
                default: ({ row }) => {
                  const addr = row.connection_str
                  const btnTxt = addr ? this.$t('db.text_174') : this.$t('db.text_175')
                  const isRunning = row.status === 'running'
                  const notRunninTip = !isRunning ? this.$t('db.text_156') : null
                  let RenderSwitchBtn = null
                  // 华为云不支持开启外网地址和关闭外网地址
                  if (row.provider !== 'Huawei') {
                    if (isRunning) {
                      RenderSwitchBtn = (<a-button type="link" onClick={() => this.handleSwitchPublicAddress(!addr)}>{btnTxt}</a-button>)
                    } else {
                      RenderSwitchBtn = (
                        <a-tooltip placement='top' title={notRunninTip}>
                          <a-button type="link" disabled>{btnTxt}</a-button>
                        </a-tooltip>
                      )
                    }
                  }
                  return (
                    <div>
                      {addr ? row.provider === 'Qcloud' ? addr : `${addr}:${row.port}` : '-'}
                      {RenderSwitchBtn}
                    </div>
                  )
                },
              },
            },
            // {
            //   field: 'port',
            //   title: '数据库端口号',
            // },
            {
              field: 'vpc',
              title: 'VPC',
            },
            {
              field: 'network',
              title: this.$t('db.text_176'),
              slots: {
                default: ({ row }) => {
                  return row.network || '-'
                },
              },
            },
            // {
            //   field: 'secgroup',
            //   title: this.$t('db.text_144'),
            //   slots: {
            //     default: ({ row }) => {
            //       return row.secgroup || '-'
            //     },
            //   },
            // },
            {
              field: 'secgroups',
              title: this.$t('compute.text_105'),
              slots: {
                default: ({ row }) => {
                  if (!row.secgroups) return '-'
                  return row.secgroups.map((item) => {
                    return <list-body-cell-wrap copy hideField={true} field='name' row={item} message={item.name}>
                      <side-page-trigger permission='secgroups_get' name='SecGroupSidePage' id={item.id} vm={this}>{ item.name }</side-page-trigger>
                    </list-body-cell-wrap>
                  })
                },
              },
            },
          ],
          hidden: () => this.$isScopedPolicyMenuHidden('rds_hidden_columns.connection_info'),
        },
        {
          title: this.$t('db.text_177'),
          items: [
            {
              field: 'disk_size_gb',
              title: this.$t('db.text_116'),
              slots: {
                default: ({ row }) => {
                  const { disk_size_gb = 0, disk_size_used_mb = 0 } = row
                  const used = sizestr(disk_size_used_mb, 'M', 1024)
                  return `${this.$t('db.text_178', [disk_size_gb])} (${this.$t('db.used', [used])})`
                },
              },
            },
          ],
          hidden: () => this.$isScopedPolicyMenuHidden('rds_hidden_columns.db_size_gb'),
        },
        {
          title: this.$t('db.text_179'),
          items: [
            getSwitchTableColumn({
              field: 'disable_delete',
              title: this.$t('common.text00076'),
              change: val => {
                this.onManager('update', {
                  id: this.data.id,
                  managerArgs: {
                    data: { disable_delete: val },
                  },
                })
              },
            }),
          ],
          hidden: () => this.$isScopedPolicyMenuHidden('rds_hidden_columns.perform_action'),
        },
      ],
    }
  },
  methods: {
    handleSwitchPublicAddress (bool) {
      const txts = {
        true: {
          title: this.$t('db.text_180'),
        },
        false: {
          title: this.$t('db.text_181'),
          content: this.$t('db.text_182'),
        },
      }
      this.createDialog('ConfirmDialog', {
        ...txts[`${bool}`],
        onOk: () => {
          return this.onManager('performAction', {
            id: this.data.id,
            steadyStatus: ['runing'],
            managerArgs: {
              action: 'public-connection',
              data: {
                open: bool,
              },
            },
          })
        },
      })
    },
  },
}
</script>