diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx index 98d525b4..5bfac9bd 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx @@ -145,11 +145,11 @@ export class BaseStep extends Base { } get imageSourceType() { - return this.sourceTypes[0]; + return this.sourceTypes.find((it) => it.value === 'image'); } get volumeSourceType() { - return this.sourceTypes[1]; + return this.sourceTypes.find((it) => it.value === 'bootableVolume'); } allowed = () => Promise.resolve(); @@ -198,7 +198,7 @@ export class BaseStep extends Base { } else { await this.volumeStore.fetchList({ sortKey: 'bootable', - sortDir: 'ascend', + sortOrder: 'ascend', }); } if (volume) { @@ -219,26 +219,6 @@ export class BaseStep extends Base { return getImageSystemTabs(); } - get specTabs() { - return [ - { - label: t('General Computing Type'), - // value: 'general' - value: 1, - }, - { - label: t('Optimized Computing Type'), - // value: 'computing' - value: 5, - }, - { - label: t('GPU Accelerated Computing Type'), - // value: 'gpu' - value: 10, - }, - ]; - } - checkSystemDisk = (rule, value) => { if (!value.type) { // eslint-disable-next-line prefer-promise-reject-errors @@ -312,6 +292,48 @@ export class BaseStep extends Base { }); }; + get imageColumns() { + return getImageColumns(this); + } + + get volumeColumns() { + return [ + { + title: t('Name'), + dataIndex: 'name', + }, + { + title: t('Size'), + dataIndex: 'size', + render: (value) => `${value}GB`, + width: 80, + }, + { + title: t('Status'), + dataIndex: 'status', + render: (value) => volumeStatus[value] || '-', + width: 80, + }, + { + title: t('Type'), + dataIndex: 'volume_type', + }, + { + title: t('Created At'), + dataIndex: 'created_at', + valueRender: 'sinceTime', + }, + ]; + } + + get showSystemDisk() { + return this.sourceTypeIsImage; + } + + getFlavorComponent() { + return ; + } + get formItems() { const { image } = this.locationParams; const imageLoading = image @@ -341,7 +363,7 @@ export class BaseStep extends Base { { name: 'flavor', label: t('Specification'), - component: , + component: this.getFlavorComponent(), required: true, wrapperCol: { xs: { @@ -362,7 +384,9 @@ export class BaseStep extends Base { tip: t( 'The start source is a template used to create an instance. You can choose an image or a bootable volume.' ), - onChange: this.onSourceChange, + onChange: (value) => { + this.onSourceChange(value); + }, }, { name: 'image', @@ -372,7 +396,7 @@ export class BaseStep extends Base { isLoading: imageLoading, required: this.sourceTypeIsImage, isMulti: false, - hidden: !this.sourceTypeIsImage, + display: this.sourceTypeIsImage, extra: this.getImageExtraWords(), filterParams: [ { @@ -380,7 +404,7 @@ export class BaseStep extends Base { name: 'name', }, ], - columns: getImageColumns(this), + columns: this.imageColumns, tabs: this.systemTabs, defaultTabValue: this.locationParams.os_distro || this.systemTabs[0].value, @@ -395,7 +419,7 @@ export class BaseStep extends Base { isLoading: this.volumeStore.list.isLoading, required: this.sourceTypeIsVolume, isMulti: false, - hidden: !this.sourceTypeIsVolume, + display: this.sourceTypeIsVolume, onChange: this.onBootableVolumeChange, filterParams: [ { @@ -403,33 +427,7 @@ export class BaseStep extends Base { name: 'name', }, ], - columns: [ - { - title: t('Name'), - dataIndex: 'name', - }, - { - title: t('Size'), - dataIndex: 'size', - render: (value) => `${value}GB`, - width: 80, - }, - { - title: t('Status'), - dataIndex: 'status', - render: (value) => volumeStatus[value] || '-', - width: 80, - }, - { - title: t('Type'), - dataIndex: 'volume_type', - }, - { - title: t('Created At'), - dataIndex: 'created_at', - valueRender: 'sinceTime', - }, - ], + columns: this.volumeColumns, }, { type: 'divider', @@ -439,8 +437,8 @@ export class BaseStep extends Base { label: t('System Disk'), type: 'instance-volume', options: this.volumeTypes, - required: !this.sourceTypeIsVolume, - hidden: this.sourceTypeIsVolume, + required: this.showSystemDisk, + hidden: !this.showSystemDisk, validator: this.checkSystemDisk, minSize: this.getSystemDiskMinSize(), extra: t('Disk size is limited by the min disk of flavor, image, etc.'), diff --git a/src/stores/base.js b/src/stores/base.js index d08d85e4..9bf733a3 100644 --- a/src/stores/base.js +++ b/src/stores/base.js @@ -370,6 +370,7 @@ export default class BaseStore { // todo: no page, no limit, fetch all const { tab, all_projects, ...rest } = filters; const params = { ...rest }; + this.updateParamsSort(params, sortKey, sortOrder); if (all_projects) { if (!this.listFilterByProject) { params.all_projects = true; diff --git a/src/stores/cinder/volume.js b/src/stores/cinder/volume.js index 5c52a1fe..3e5e4c40 100644 --- a/src/stores/cinder/volume.js +++ b/src/stores/cinder/volume.js @@ -89,6 +89,8 @@ export class VolumeStore extends Base { } }; + updateParamsSort = this.updateParamsSortPage; + async listDidFetch(items, _, filters) { if (items.length === 0) { return items;