From ae266d3d74f3d93af894857cc5fd4f07f77d1a20 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Wed, 22 Sep 2021 15:06:54 +0800 Subject: [PATCH] refactor: Refactor project detail quota codes 1. Refactor project quota in project detail page 2. Add keypair quota display in overview/project detail quota page Change-Id: I40e5925909d767a87eadd09cfb9c11ea1624cead --- src/locales/en.json | 3 +- src/locales/zh.json | 3 +- .../Overview/components/QuotaOverview.jsx | 34 ++-- src/pages/base/containers/Overview/style.less | 132 ++++++------- .../containers/Project/Detail/Quota.jsx | 181 +++--------------- .../containers/Project/Detail/index.less | 2 +- .../containers/Project/Detail/style.less | 164 ---------------- 7 files changed, 114 insertions(+), 405 deletions(-) delete mode 100644 src/pages/identity/containers/Project/Detail/style.less diff --git a/src/locales/en.json b/src/locales/en.json index 03628ae6..c24e15f0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -885,6 +885,7 @@ "Kernel ID": "Kernel ID", "Kernel Image": "Kernel Image", "Key": "Key", + "Key Pair": "Key Pair", "Key Pairs": "Key Pairs", "Key Size (bits)": "Key Size (bits)", "Keypair": "Keypair", @@ -1791,7 +1792,6 @@ "compute hosts": "compute hosts", "compute services": "compute services", "connect subnet": "connect subnet", - "core": "core", "create DSCP marking rule": "create DSCP marking rule", "create a new network/subnet": "create a new network/subnet", "create a new security group": "create a new security group", @@ -1925,7 +1925,6 @@ "qoS policy": "qoS policy", "qos specs": "qos specs", "quota set to -1 means there is no quota limit on the current resource": "quota set to -1 means there is no quota limit on the current resource", - "ram": "ram", "reboot instance": "reboot instance", "rebuild instance": "rebuild instance", "recover instance": "recover instance", diff --git a/src/locales/zh.json b/src/locales/zh.json index 7b776eae..d30d400d 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -885,6 +885,7 @@ "Kernel ID": "内核ID", "Kernel Image": "Kernel镜像", "Key": "键", + "Key Pair": "密钥", "Key Pairs": "密钥", "Key Size (bits)": "密钥大小(比特)", "Keypair": "SSH密钥对", @@ -1791,7 +1792,6 @@ "compute hosts": "计算节点", "compute services": "计算服务", "connect subnet": "连接子网", - "core": "虚拟CPU", "create DSCP marking rule": "创建DSCP标记规则", "create a new network/subnet": "新建网络/子网", "create a new security group": "新建安全组", @@ -1925,7 +1925,6 @@ "qoS policy": "QoS策略", "qos specs": "QoS规格", "quota set to -1 means there is no quota limit on the current resource": "配额为设为 -1 时表示当前资源无配额限制", - "ram": "内存(GB)", "reboot instance": "重启云主机", "rebuild instance": "重建云主机", "recover instance": "恢复云主机", diff --git a/src/pages/base/containers/Overview/components/QuotaOverview.jsx b/src/pages/base/containers/Overview/components/QuotaOverview.jsx index 09025d74..3f0a8d6a 100644 --- a/src/pages/base/containers/Overview/components/QuotaOverview.jsx +++ b/src/pages/base/containers/Overview/components/QuotaOverview.jsx @@ -16,7 +16,6 @@ import React, { Component } from 'react'; import { Badge, Card, Col, List, Progress, Row, Spin, Tooltip } from 'antd'; import { inject, observer } from 'mobx-react'; import globalVolumeTypeStore from 'stores/cinder/volume-type'; -import globalKeypairStore from 'stores/nova/keypair'; import globalProjectStore from 'stores/keystone/project'; import { isNumber } from 'lodash'; import styles from '../style.less'; @@ -36,6 +35,7 @@ export const quotaCardList = [ { text: t('vCPUs'), key: 'cores' }, { text: t('Memory'), key: 'ram' }, { text: t('Server Group'), key: 'server_groups' }, + { text: t('Key Pair'), key: 'key_pairs' }, ], }, { @@ -85,6 +85,9 @@ export class QuotaOverview extends Component { this.state = { isLoading: true, }; + const { projectStore, volumeTypeStore } = props; + this.projectStore = projectStore || globalProjectStore; + this.volumeTypeStore = volumeTypeStore || globalVolumeTypeStore; } componentDidMount() { @@ -92,20 +95,29 @@ export class QuotaOverview extends Component { } async getData() { - const { user } = this.props.rootStore; - const { project: { id: projectId = '' } = {} } = user; - await Promise.all([ - globalProjectStore.fetchProjectQuota({ project_id: projectId }), - globalVolumeTypeStore.fetchList(), - globalKeypairStore.fetchList(), - ]); + const { getData } = this.props; + if (getData) { + await getData(); + } else { + const { user } = this.props.rootStore; + const { project: { id: projectId = '' } = {} } = user; + await Promise.all([ + this.projectStore.fetchProjectQuota({ project_id: projectId }), + this.volumeTypeStore.fetchList(), + ]); + } this.setState({ isLoading: false, }); } + get volumeTypeData() { + const { volumeTypeData } = this.props; + return volumeTypeData || this.volumeTypeStore.list.data; + } + get volumeTypesQuota() { - const volumeTypes = globalVolumeTypeStore.list.data.map((item, index) => { + const volumeTypes = this.volumeTypeData.map((item, index) => { return { index, value: [ @@ -211,7 +223,7 @@ export class QuotaOverview extends Component { return ; } return this.renderQuotaCart( - globalProjectStore.quota, + this.projectStore.quota, this.getFilteredValue(item.value) ); } @@ -238,7 +250,7 @@ export class QuotaOverview extends Component { {item.value.map((i) => ( - {this.getItemInfo(globalProjectStore.quota, i)} + {this.getItemInfo(this.projectStore.quota, i)} ))} diff --git a/src/pages/base/containers/Overview/style.less b/src/pages/base/containers/Overview/style.less index 8164de37..f06bb1f5 100644 --- a/src/pages/base/containers/Overview/style.less +++ b/src/pages/base/containers/Overview/style.less @@ -55,72 +55,6 @@ } } } - - .bottom { - //margin: 16px 0; - - :global { - .ant-card { - box-shadow: unset; - } - } - - .title { - .text { - font-size: 16px; - color: #252525; - } - - .badge { - margin-left: 22px; - - :global { - .ant-badge-status-dot { - width: 10px; - height: 10px; - } - - .ant-badge-status-text { - font-size: 14px; - } - } - } - } - - .action { - font-size: 12px; - color: #0068ff; - float: right; - margin-top: 6px; - cursor: pointer; - } - - .content { - .card { - padding: 8px; - - :global { - .ant-card-head { - border-bottom: none; - - .ant-card-head-title { - font-size: 16px; - font-weight: 500; - color: #565656; - padding-bottom: 0; - } - } - } - - .progress_title { - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } } .right { @@ -176,3 +110,69 @@ display: none; } } + +.bottom { + //margin: 16px 0; + + :global { + .ant-card { + box-shadow: unset; + } + } + + .title { + .text { + font-size: 16px; + color: #252525; + } + + .badge { + margin-left: 22px; + + :global { + .ant-badge-status-dot { + width: 10px; + height: 10px; + } + + .ant-badge-status-text { + font-size: 14px; + } + } + } + } + + .action { + font-size: 12px; + color: #0068ff; + float: right; + margin-top: 6px; + cursor: pointer; + } + + .content { + .card { + padding: 8px; + + :global { + .ant-card-head { + border-bottom: none; + + .ant-card-head-title { + font-size: 16px; + font-weight: 500; + color: #565656; + padding-bottom: 0; + } + } + } + + .progress_title { + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } +} \ No newline at end of file diff --git a/src/pages/identity/containers/Project/Detail/Quota.jsx b/src/pages/identity/containers/Project/Detail/Quota.jsx index ee9895b0..3d0b23b2 100644 --- a/src/pages/identity/containers/Project/Detail/Quota.jsx +++ b/src/pages/identity/containers/Project/Detail/Quota.jsx @@ -12,180 +12,43 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React from 'react'; -import { observer, inject } from 'mobx-react'; - -import globalProjectStore from 'stores/keystone/project'; -import { Card, Col, Row, List } from 'antd'; -import Progress from 'components/ProjectProgress'; -import classnames from 'classnames'; +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import QuotaOverview from 'pages/base/containers/Overview/components/QuotaOverview'; import { VolumeTypeStore } from 'stores/cinder/volume-type'; +import { ProjectStore } from 'stores/keystone/project'; import styles from './index.less'; -export class Quota extends React.Component { +export class Quota extends Component { constructor(props) { super(props); - this.state = {}; - this.init(); + this.projectStore = new ProjectStore(); + this.volumeTypeStore = new VolumeTypeStore(); } - componentDidMount() { - this.getData(); + get volumeTypeData() { + return this.volumeTypeStore.projectVolumeTypes; } getData = async () => { const { id: project_id } = this.props.match.params; - await this.store.fetchProjectQuota({ - project_id, - }); - await this.volumeTypeStore.fetchProjectVolumeTypes(project_id); + return Promise.all([ + this.projectStore.fetchProjectQuota({ + project_id, + }), + this.volumeTypeStore.fetchProjectVolumeTypes(project_id), + ]); }; - getItemInfo = (i) => { - const { quota } = this.store; - const resource = quota[i.key]; - return ; - }; - - init() { - this.store = globalProjectStore; - this.volumeTypeStore = new VolumeTypeStore(); - } - - renderVolumeTypes = (listData) => ( - ( - - {item.value.map((i) => ( - - {this.getItemInfo(i)} - - ))} - - )} - /> - ); - render() { - const { quota } = this.store; - const volumeTypes = []; - this.volumeTypeStore.projectVolumeTypes.forEach((item, index) => { - volumeTypes.push({ - index, - value: [ - { - text: t('{name} type', { name: item.name }), - key: `volumes_${item.name}`, - }, - { - text: t('{name} type gigabytes(GB)', { name: item.name }), - key: `gigabytes_${item.name}`, - }, - { - text: t('{name} type snapshots', { name: item.name }), - key: `snapshots_${item.name}`, - }, - ], - }); - }); - return ( -
- - {quota.instances ? ( -
- - -
- {t('Compute')} -
- - - - {/* */} -
-

- （ {t('Member in group')} :{' '} - {quota.server_group_members && - quota.server_group_members.limit === -1 - ? t('Unlimit') - : quota.server_group_members.limit}{' '} - ） -

- -
- {/* */} - - -
- ) : null} - {quota.volumes ? ( -
- - -
- {t('Storage')} -
- - - - - - - -
- {t('Network')} -
- - - - - - - - - -
- ) : null} - {volumeTypes[0] ? ( -
- - -
- {t('Storage Types')} -
- {this.renderVolumeTypes(volumeTypes)} - - -
- ) : null} - +
+
); } diff --git a/src/pages/identity/containers/Project/Detail/index.less b/src/pages/identity/containers/Project/Detail/index.less index a489506f..25ead048 100644 --- a/src/pages/identity/containers/Project/Detail/index.less +++ b/src/pages/identity/containers/Project/Detail/index.less @@ -2,5 +2,5 @@ .wrapper { min-height: calc(100vh - 108px); - padding: 0 @body-padding; + padding: 0 @body-padding @body-padding @body-padding; } \ No newline at end of file diff --git a/src/pages/identity/containers/Project/Detail/style.less b/src/pages/identity/containers/Project/Detail/style.less deleted file mode 100644 index 28aa6e4e..00000000 --- a/src/pages/identity/containers/Project/Detail/style.less +++ /dev/null @@ -1,164 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.container { - height: 100%; - padding: 16px 12px; - overflow: auto; - - :global { - .ant-card { - box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09); - } - } - - .left { - height: 100%; - - .top { - - .title { - display: table-cell; - vertical-align: bottom; - - .text { - font-size: 21px; - color: #252525; - } - - .action { - font-size: 16px; - color: #000000; - margin-left: 40px; - } - } - } - - .bottom { - margin: 16px 0; - - :global { - .ant-card { - box-shadow: unset; - } - } - - .title { - .text { - font-size: 16px; - color: #252525; - } - - .badge { - margin-left: 22px; - - :global { - .ant-badge-status-dot { - width: 10px; - height: 10px; - } - - .ant-badge-status-text { - font-size: 14px; - } - } - } - } - - .action { - font-size: 12px; - color: #0068FF; - float: right; - margin-top: 6px; - cursor: pointer; - } - - .content { - - .card { - padding: 8px; - - :global { - .ant-card-head { - font-size: 14px; - } - } - - .progress_title { - font-size: 14px; - } - } - } - } - } - - .right { - height: 100%; - - .top { - .meta { - padding-bottom: 16px; - margin-bottom: 16px; - border-bottom: 1px dashed #e8e8e8; - } - - :global { - .ant-descriptions-item-label { - width: 130px; - } - } - - .money { - color: #0068FF; - line-height: 42px; - font-size: 30px; - } - } - - .middle { - margin-top: 1.33rem; - background-color: #ffffff; - - .row { - text-align: center; - - .alert_value { - font-size: 56px; - } - - .alert_key { - color: #252525; - font-size: 16px; - } - - span { - display: block; - } - } - } - - .bottom { - margin-top: 1.33rem; - background-color: #ffffff; - - .timeline { - - .time { - font-size: 14px; - color: #0068FF; - margin-bottom: 6px; - } - - .bulletin { - font-size: 14px; - color: #252525; - } - } - } - } - - :global { - .ant-card-head { - font-size: 16px; - } - } -} \ No newline at end of file