Merge "fix: fix some resource items to select-table"
This commit is contained in:
Zuul
Gerrit Code Review
commit
1170f73dd5
@ -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 (
|
||||
<Radio.Button className={styles['image-tab']} value={value} key={value}>
|
||||
<Radio.Button
|
||||
className={imageTabAuto ? '' : styles['image-tab']}
|
||||
value={value}
|
||||
key={value}
|
||||
>
|
||||
{image && <img src={image} alt={label} />}
|
||||
{component}
|
||||
<span className={styles['image-tab-label']}>{label}</span>
|
||||
|
||||
@ -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: (
|
||||
<div>
|
||||
{t(' You can go to the console to ')}
|
||||
{getLinkRender({
|
||||
key: 'network',
|
||||
value: `${t('create a new network/subnet')} > `,
|
||||
})}
|
||||
</div>
|
||||
),
|
||||
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',
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user