From 7ca6d2f8a3855b8d261d9ad7886bfc5d300b433e Mon Sep 17 00:00:00 2001 From: xusongfu Date: Wed, 6 Jul 2022 17:23:24 +0800 Subject: [PATCH] fix: fix some resource items to select-table Fix some resource items to select-table in magnum template Change-Id: Ie134d76cbb845aaa763cc444fda72f5511af1870 --- src/components/FormItem/SelectTable/index.jsx | 10 +- .../actions/StepCreate/StepNetwork/index.jsx | 180 ++++++++++++------ .../actions/StepCreate/StepNodeSpec/index.jsx | 105 +++++++--- .../actions/StepCreate/index.jsx | 25 ++- 4 files changed, 230 insertions(+), 90 deletions(-) diff --git a/src/components/FormItem/SelectTable/index.jsx b/src/components/FormItem/SelectTable/index.jsx index de08cc47..e3b8dd5b 100644 --- a/src/components/FormItem/SelectTable/index.jsx +++ b/src/components/FormItem/SelectTable/index.jsx @@ -83,6 +83,7 @@ export default class SelectTable extends React.Component { defaultSortOrder: PropTypes.string, onRow: PropTypes.func, childrenColumnName: PropTypes.string, + imageTabAuto: PropTypes.bool, }; static defaultProps = { @@ -107,6 +108,7 @@ export default class SelectTable extends React.Component { defaultSortKey: '', defaultSortOrder: '', childrenColumnName: 'children', + imageTabAuto: false, }; constructor(props) { @@ -706,12 +708,16 @@ export default class SelectTable extends React.Component { } renderImageTabs() { - const { tabs, defaultTabValue } = this.props; + const { tabs, defaultTabValue, imageTabAuto } = this.props; const { tab } = this.state; const items = tabs.map((it) => { const { value, image, component, label } = it; return ( - + {image && {label}} {component} {label} diff --git a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNetwork/index.jsx b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNetwork/index.jsx index b4248ff1..21d3845b 100644 --- a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNetwork/index.jsx +++ b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNetwork/index.jsx @@ -12,14 +12,19 @@ // See the License for the specific language governing permissions and // limitations under the License. +import React from 'react'; import Base from 'components/Form'; import { inject, observer } from 'mobx-react'; -import globalNetworkStore from 'src/stores/neutron/network'; -import globalSubnetStore from 'src/stores/neutron/subnet'; +import { NetworkStore } from 'src/stores/neutron/network'; +import { SubnetStore } from 'src/stores/neutron/subnet'; +import { getLinkRender } from 'utils/route-map'; +import { networkColumns } from 'resources/neutron/network'; export class StepNetwork extends Base { async init() { - this.getNetworkList(); + this.externalNetworkStore = new NetworkStore(); + this.privateNetworkStore = new NetworkStore(); + this.subnetNetworkStore = new SubnetStore(); this.getSubnetList(); } @@ -39,48 +44,16 @@ export class StepNetwork extends Base { return !!this.props.extra; } - async getNetworkList() { - await globalNetworkStore.fetchList(); - } - - get externalNetworks() { - return (globalNetworkStore.list.data || []) - .filter( - (it) => - it['router:external'] === true && - it.project_id === this.currentProjectId - ) - .map((it) => ({ - value: it.id, - label: it.name, - })); - } - - get privateNetworks() { - return (globalNetworkStore.list.data || []) - .filter( - (it) => - it['router:external'] === false && - it.project_id === this.currentProjectId - ) - .map((it) => ({ - value: it.id, - label: it.name, - })); - } - async getSubnetList() { - await globalSubnetStore.fetchList(); + await this.subnetNetworkStore.fetchList(); + this.updateDefaultValue(); } get subnetList() { - const { fixed_network } = this.state; - return (globalSubnetStore.list.data || []) - .filter((it) => fixed_network === it.network_id) - .map((it) => ({ - value: it.id, - label: it.name, - })); + const { fixedNetwork: { selectedRowKeys = [] } = {} } = this.state; + return (this.subnetNetworkStore.list.data || []).filter( + (it) => selectedRowKeys[0] === it.network_id + ); } get networkDrivers() { @@ -103,7 +76,7 @@ export class StepNetwork extends Base { } get nameForStateUpdate() { - return ['fixed_network']; + return ['fixedNetwork']; } get defaultValue() { @@ -129,19 +102,40 @@ export class StepNetwork extends Base { http_proxy, https_proxy, no_proxy, - external_network_id, + externalNetwork: { + selectedRowKeys: [external_network_id], + }, fixed_network, fixed_subnet, dns_nameserver, master_lb_enabled, floating_ip_enabled, }; + if (fixed_network) { + values.fixedNetwork = { + selectedRowKeys: [fixed_network], + }; + } + if (fixed_subnet) { + const { subnetInitValue } = this.state; + + if (subnetInitValue) { + values.fixedSubnet = subnetInitValue; + } else { + values.fixedSubnet = { + selectedRowKeys: [fixed_subnet], + }; + } + } } + return values; } get formItems() { const { extra: { network_driver } = {} } = this.props; + const { subnetInitValue } = this.state; + return [ { name: 'network_driver', @@ -170,30 +164,100 @@ export class StepNetwork extends Base { type: 'input', }, { - name: 'external_network_id', + name: 'externalNetwork', label: t('External Network'), - placeholder: t('Choose a External Network'), - type: 'select', - options: this.externalNetworks, - disabled: this.isEdit, + type: 'select-table', + backendPageStore: this.externalNetworkStore, + extraParams: { + 'router:external': true, + project_id: this.currentProjectId, + }, required: true, + loading: this.externalNetworkStore.list.isLoading, + filterParams: [ + { + label: t('Name'), + name: 'name', + }, + ], + columns: networkColumns(this), }, { - name: 'fixed_network', + name: 'fixedNetwork', label: t('Fixed Network'), - placeholder: t('Choose a Private Network'), - type: 'select', - options: this.privateNetworks, - onChange: () => { - this.updateFormValue('fixed_subnet', null); + type: 'select-table', + backendPageStore: this.privateNetworkStore, + extraParams: { + 'router:external': false, + project_id: this.currentProjectId, + }, + loading: this.privateNetworkStore.list.isLoading, + header: ( +
+ {t(' You can go to the console to ')} + {getLinkRender({ + key: 'network', + value: `${t('create a new network/subnet')} > `, + })} +
+ ), + filterParams: [ + { + label: t('Name'), + name: 'name', + }, + ], + columns: networkColumns(this), + onChange: (value) => { + this.setState( + { + fixedNetwork: value, + subnetInitValue: { + selectedRowKeys: [], + selectedRows: [], + }, + }, + () => { + this.formRef.current.resetFields(['fixedSubnet']); + } + ); }, }, { - name: 'fixed_subnet', + name: 'fixedSubnet', label: t('Fixed Subnet'), - placeholder: t('Choose a Private Network at first'), - type: 'select', - options: this.subnetList, + type: 'select-table', + data: this.subnetList, + initValue: subnetInitValue, + filterParams: [ + { + label: t('Name'), + name: 'name', + }, + ], + columns: [ + { + title: t('Name'), + dataIndex: 'name', + }, + { + title: t('CIDR'), + dataIndex: 'cidr', + }, + { + title: t('Gateway IP'), + dataIndex: 'gateway_ip', + }, + { + title: t('IP Version'), + dataIndex: 'ip_version', + }, + { + title: t('Created At'), + dataIndex: 'created_at', + valueRender: 'toLocalTime', + }, + ], }, { name: 'dns_nameserver', diff --git a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNodeSpec/index.jsx b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNodeSpec/index.jsx index 7ec4be62..faa0c99f 100644 --- a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNodeSpec/index.jsx +++ b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/StepNodeSpec/index.jsx @@ -12,17 +12,21 @@ // See the License for the specific language governing permissions and // limitations under the License. +import React from 'react'; +import { inject, observer } from 'mobx-react'; +import Base from 'components/Form'; import globalImageStore from 'src/stores/glance/image'; import globalKeypairStore from 'src/stores/nova/keypair'; -import Base from 'components/Form'; -import { inject, observer } from 'mobx-react'; -import React from 'react'; import FlavorSelectTable from 'src/pages/compute/containers/Instance/components/FlavorSelectTable'; +import { + getImageColumns, + getImageSystemTabs, + getImageOS, +} from 'resources/glance/image'; export class StepNodeSpec extends Base { init() { this.getImageList(); - this.getKeypairsList(); } get title() { @@ -43,9 +47,10 @@ export class StepNodeSpec extends Base { async getImageList() { await globalImageStore.fetchList(); + this.updateDefaultValue(); } - get imageList() { + get acceptedImageOs() { const { context: { coe = '' } = {} } = this.props; let acceptedOs = []; if (coe === 'kubernetes') { @@ -55,28 +60,33 @@ export class StepNodeSpec extends Base { } else if (['mesos', 'dcos'].includes(coe)) { acceptedOs = ['ubuntu']; } + return acceptedOs; + } + get imageColumns() { + return getImageColumns(this); + } + + get systemTabs() { + const imageTabs = getImageSystemTabs(); + return imageTabs.filter((it) => this.acceptedImageOs.includes(it.value)); + } + + onImageTabChange = (value) => { + this.setState({ + imageTab: value, + }); + }; + + get imageList() { + const { imageTab } = this.state; return (globalImageStore.list.data || []) .filter( (it) => it.owner === this.currentProjectId && - acceptedOs.includes(it.os_distro) + this.acceptedImageOs.includes(it.os_distro) ) - .map((it) => ({ - value: it.id, - label: it.name, - })); - } - - async getKeypairsList() { - await globalKeypairStore.fetchList(); - } - - get keypairsList() { - return (globalKeypairStore.list.data || []).map((it) => ({ - value: it.name, - label: it.name, - })); + .filter((it) => getImageOS(it) === imageTab); } get volumeDrivers() { @@ -112,8 +122,6 @@ export class StepNodeSpec extends Base { } = {}, } = this.props; values = { - image_id, - keypair_id, volume_driver, docker_storage_driver, docker_volume_size, @@ -124,6 +132,12 @@ export class StepNodeSpec extends Base { if (master_flavor_id) { values.masterFlavor = { selectedRowKeys: [master_flavor_id] }; } + if (image_id) { + values.images = { selectedRowKeys: [image_id] }; + } + if (keypair_id) { + values.keypairs = { selectedRowKeys: [keypair_id] }; + } } return values; } @@ -140,17 +154,49 @@ export class StepNodeSpec extends Base { get formItems() { return [ { - name: 'image_id', + name: 'images', label: t('Image'), - type: 'select', - options: this.imageList, + type: 'select-table', + data: this.imageList, required: true, + isLoading: globalImageStore.list.isLoading, + filterParams: [ + { + label: t('Name'), + name: 'name', + }, + ], + columns: this.imageColumns, + tabs: this.systemTabs, + defaultTabValue: this.systemTabs[0].value, + onTabChange: this.onImageTabChange, + imageTabAuto: true, }, { - name: 'keypair_id', + name: 'keypairs', label: t('Keypair'), - type: 'select', - options: this.keypairsList, + type: 'select-table', + data: this.keypairsList, + isLoading: globalKeypairStore.list.isLoading, + tip: t( + 'The SSH key is a way to remotely log in to the instance. The cloud platform only helps to keep the public key. Please keep your private key properly.' + ), + filterParams: [ + { + label: t('Name'), + name: 'name', + }, + ], + columns: [ + { + title: t('Name'), + dataIndex: 'name', + }, + { + title: t('Fingerprint'), + dataIndex: 'fingerprint', + }, + ], }, { name: 'flavor', @@ -197,6 +243,7 @@ export class StepNodeSpec extends Base { label: t('Docker Volume Size (GiB)'), type: 'input-int', min: this.minVolumeSize, + required: this.minVolumeSize === 3, placeholder: t('Spec'), validator: (rule, value) => { if ( diff --git a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/index.jsx b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/index.jsx index e84e460c..eee2a492 100644 --- a/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/index.jsx +++ b/src/pages/container-infra/containers/ClusterTemplates/actions/StepCreate/index.jsx @@ -93,7 +93,17 @@ export class StepCreate extends StepAction { } onSubmit = (values) => { - const { flavor, masterFlavor, additionalLabels, ...rest } = values; + const { + flavor, + masterFlavor, + additionalLabels, + images, + keypairs, + externalNetwork, + fixedNetwork, + fixedSubnet, + ...rest + } = values; const requestLabels = {}; if (additionalLabels) { additionalLabels.forEach((item) => { @@ -105,6 +115,7 @@ export class StepCreate extends StepAction { const body = { labels: requestLabels, + external_network_id: externalNetwork.selectedRowKeys[0], ...rest, }; if (flavor) { @@ -113,6 +124,18 @@ export class StepCreate extends StepAction { if (masterFlavor) { body.master_flavor_id = masterFlavor.selectedRowKeys[0]; } + if (images) { + body.image_id = images.selectedRowKeys[0]; + } + if (keypairs) { + body.keypair_id = keypairs.selectedRowKeys[0]; + } + if (fixedNetwork) { + body.fixed_network = fixedNetwork.selectedRowKeys[0]; + } + if (fixedSubnet) { + body.fixed_subnet = fixedSubnet.selectedRowKeys[0]; + } if (this.isEdit) { return this.store.update({ id: this.params.id }, body); }