From df67bd758fed1bcc68bc24873d43998c6630564d Mon Sep 17 00:00:00 2001
From: xusongfu <xu.songfu@99cloud.net>
Date: Thu, 7 Jul 2022 20:47:04 +0800
Subject: [PATCH] fix: fix create zun container

1. Optimization parameters
2. Use select-table for image
3. Fix ZunVolume component

Change-Id: Ic8ce3fb91fd70848766003fe24d782b3347e055b
---
 src/client/client/constants.js                |   2 +-
 src/components/FormItem/ZunVolume/index.jsx   |  60 +++----
 src/locales/en.json                           |  12 +-
 src/locales/zh.json                           |  14 +-
 .../actions/StepCreate/StepInfo/index.jsx     |  59 ++++++-
 .../StepCreate/StepMiscellaneous/index.jsx    |  10 +-
 .../actions/StepCreate/StepNetworks/index.jsx |  54 ++++--
 .../actions/StepCreate/StepSpec/index.jsx     |  38 ++--
 .../actions/StepCreate/StepVolumes/index.jsx  |  22 +--
 .../Containers/actions/StepCreate/index.jsx   | 164 ++++++++++--------
 10 files changed, 263 insertions(+), 172 deletions(-)

diff --git a/src/client/client/constants.js b/src/client/client/constants.js
index be280ed4..5f9da290 100644
--- a/src/client/client/constants.js
+++ b/src/client/client/constants.js
@@ -111,7 +111,7 @@ export const apiVersionMaps = {
   },
   zun: {
     key: 'OpenStack-API-Version',
-    value: 'container 1.7',
+    value: 'container 1.11',
   },
 };
 
diff --git a/src/components/FormItem/ZunVolume/index.jsx b/src/components/FormItem/ZunVolume/index.jsx
index 3a6e5796..1be5cdbe 100644
--- a/src/components/FormItem/ZunVolume/index.jsx
+++ b/src/components/FormItem/ZunVolume/index.jsx
@@ -27,28 +27,28 @@ export default class ZunVolume extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      type: [],
-      source: [],
+      type: '',
+      source: '',
       destination: '',
-      cinderVolumeSize: 0,
-      isCinderVolume: false,
+      size: 0,
+      isNewVolume: false,
     };
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { type, source, cinderVolumeSize, destination } =
-      nextProps.value || {};
+    const { type, source, size, destination } = nextProps.value || {};
     if (
       type !== prevState.type ||
       source !== prevState.source ||
-      cinderVolumeSize !== prevState.cinderVolumeSize ||
+      size !== prevState.size ||
       destination !== prevState.destination
     ) {
       return {
         type,
         source,
-        cinderVolumeSize,
+        size,
         destination,
+        isNewVolume: type === 'volume',
       };
     }
     return null;
@@ -62,20 +62,17 @@ export default class ZunVolume extends React.Component {
   };
 
   onTypeChange = (value) => {
-    if (value === 'cinder-new') {
-      this.setState({
-        isCinderVolume: true,
-      });
-    }
-    if (value === 'cinder-available') {
-      this.setState({
-        isCinderVolume: false,
-      });
-    }
-    this.onChange({
-      ...this.state,
-      type: value,
-    });
+    this.setState(
+      {
+        isNewVolume: value === 'volume',
+      },
+      () => {
+        this.onChange({
+          ...this.state,
+          type: value,
+        });
+      }
+    );
   };
 
   onSourceChange = (value) => {
@@ -85,10 +82,10 @@ export default class ZunVolume extends React.Component {
     });
   };
 
-  onCinderVolumeSizeChange = (e) => {
+  onVolumeSizeChange = (e) => {
     this.onChange({
       ...this.state,
-      cinderVolumeSize: e,
+      size: e,
     });
   };
 
@@ -100,9 +97,7 @@ export default class ZunVolume extends React.Component {
   };
 
   render() {
-    const { type, source, destination, cinderVolumeSize, isCinderVolume } =
-      this.state;
-    const { name } = this.props;
+    const { type, source, destination, size, isNewVolume } = this.state;
     const selectType = (
       <Select
         value={type}
@@ -124,8 +119,8 @@ export default class ZunVolume extends React.Component {
     );
     const inputSize = (
       <InputInt
-        value={cinderVolumeSize}
-        onChange={this.onCinderVolumeSizeChange}
+        value={size}
+        onChange={this.onVolumeSizeChange}
         style={{ maxWidth: '40%' }}
       />
     );
@@ -134,22 +129,23 @@ export default class ZunVolume extends React.Component {
         value={destination}
         onChange={this.onDestinationChange}
         style={{ maxWidth: '60%' }}
+        placeholder={t('Specify mount point.')}
         required
       />
     );
 
     return (
-      <Form.Item className={styles['zun-volume']} name={name}>
+      <Form.Item className={styles['zun-volume']}>
         <Row gutter={24}>
           <Col span={8}>
             <span className={styles.label}>{t('Type')}</span>
             {selectType}
           </Col>
-          <Col span={8} hidden={isCinderVolume}>
+          <Col span={8} hidden={isNewVolume}>
             <span className={styles.label}>{t('Source')}</span>
             {selectSource}
           </Col>
-          <Col span={8} hidden={!isCinderVolume}>
+          <Col span={8} hidden={!isNewVolume}>
             <span className={styles.label}>{t('Size(GiB)')}</span>
             {inputSize}
           </Col>
diff --git a/src/locales/en.json b/src/locales/en.json
index 92fafd89..849c9acd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -71,6 +71,7 @@
   "Add Virtual LAN": "Add Virtual LAN",
   "Add hosts to the aggregate or remove hosts from it. Hosts can be in multiple aggregates.": "Add hosts to the aggregate or remove hosts from it. Hosts can be in multiple aggregates.",
   "Add network": "Add network",
+  "Add scheduler hints": "Add scheduler hints",
   "Additional Labels": "Additional Labels",
   "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)": "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)",
   "Additional routes announced to the instance, one entry per line(e.g. {ip})": "Additional routes announced to the instance, one entry per line(e.g. {ip})",
@@ -323,10 +324,7 @@
   "Checksum": "Checksum",
   "Chile": "Chile",
   "China": "China",
-  "Choose a External Network": "Choose a External Network",
   "Choose a Network Driver": "Choose a Network Driver",
-  "Choose a Private Network": "Choose a Private Network",
-  "Choose a Private Network at first": "Choose a Private Network at first",
   "Choose a host to live migrate instance to. If not selected, the scheduler will auto select target host.": "Choose a host to live migrate instance to. If not selected, the scheduler will auto select target host.",
   "Choose a host to migrate instance to. If not selected, the scheduler will auto select target host.": "Choose a host to migrate instance to. If not selected, the scheduler will auto select target host.",
   "Choosing a QoS policy can limit bandwidth and DSCP": "Choosing a QoS policy can limit bandwidth and DSCP",
@@ -861,6 +859,7 @@
   "Evictions": "Evictions",
   "Execute Command": "Execute Command",
   "Execution Result": "Execution Result",
+  "Existing Volume": "Existing Volume",
   "Exit Policy": "Exit Policy",
   "Expand": "Expand",
   "Expand Advanced Options": "Expand Advanced Options",
@@ -1492,6 +1491,7 @@
   "New Caledonia": "New Caledonia",
   "New Status": "New Status",
   "New Tag": "New Tag",
+  "New Volume": "New Volume",
   "New Zealand": "New Zealand",
   "Next": "Next",
   "Next Hop": "Next Hop",
@@ -1908,7 +1908,7 @@
   "Resume In Progress": "Resume In Progress",
   "Resume Instance": "Resume Instance",
   "Resuming": "Resuming",
-  "Retry times for 'Restart on failure' policy": "Retry times for 'Restart on failure' policy",
+  "Retry times for restart on failure policy": "Retry times for restart on failure policy",
   "Retyping": "Retyping",
   "Reunion": "Reunion",
   "Revert Resize or Migrate": "Revert Resize or Migrate",
@@ -2089,6 +2089,7 @@
   "Spawning": "Spawning",
   "Spec": "Spec",
   "Specification": "Specification",
+  "Specify mount point.": "Specify mount point.",
   "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.": "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.",
   "Specs": "Specs",
   "Sri Lanka": "Sri Lanka",
@@ -2208,6 +2209,7 @@
   "The certificate contains information such as the public key and signature of the certificate. The extension of the certificate is \"pem\" or \"crt\", you can directly enter certificate content or upload certificate file.": "The certificate contains information such as the public key and signature of the certificate. The extension of the certificate is \"pem\" or \"crt\", you can directly enter certificate content or upload certificate file.",
   "The command to execute": "The command to execute",
   "The container memory size in MiB": "The container memory size in MiB",
+  "The container runtime tool to create container with": "The container runtime tool to create container with",
   "The creation instruction has been issued, please refresh to see the actual situation in the list.": "The creation instruction has been issued, please refresh to see the actual situation in the list.",
   "The creation instruction was issued successfully, instance: {name}. \n You can wait for a few seconds to follow the changes of the list data or manually refresh the data to get the final display result.": "The creation instruction was issued successfully, instance: {name}. \n You can wait for a few seconds to follow the changes of the list data or manually refresh the data to get the final display result.",
   "The current operation requires the instance to be shut down:": "The current operation requires the instance to be shut down:",
@@ -2262,7 +2264,6 @@
   "The private key of the certificate, the extension of the private key is \"key\", you can directly enter the content of the private key file or upload a private key that conforms to the format document.": "The private key of the certificate, the extension of the private key is \"key\", you can directly enter the content of the private key file or upload a private key that conforms to the format document.",
   "The resource class of the scheduled node needs to correspond to the resource class name of the flavor used by the ironic instance (for example, the resource class name of the scheduling node is baremetal.with-GPU, and the custom resource class name of the flavor is CUSTOM_BAREMETAL_WITH_GPU=1).": "The resource class of the scheduled node needs to correspond to the resource class name of the flavor used by the ironic instance (for example, the resource class name of the scheduling node is baremetal.with-GPU, and the custom resource class name of the flavor is CUSTOM_BAREMETAL_WITH_GPU=1).",
   "The root and os_admin are default users and cannot be created!": "The root and os_admin are default users and cannot be created!",
-  "The runtime to create container with": "The runtime to create container with",
   "The security group is similar to the firewall function and is used to set up network access control. ": "The security group is similar to the firewall function and is used to set up network access control. ",
   "The security group is similar to the firewall function for setting up network access control, or you can go to the console and create a new security group. (Note: The security group you selected will work on all virtual LANS on the instances.)": "The security group is similar to the firewall function for setting up network access control, or you can go to the console and create a new security group. (Note: The security group you selected will work on all virtual LANS on the instances.)",
   "The selected VPC/ subnet does not have IPv6 enabled.": "The selected VPC/ subnet does not have IPv6 enabled.",
@@ -2333,7 +2334,6 @@
   "Two-way authentication": "Two-way authentication",
   "Type": "Type",
   "Type of datastore": "Type of datastore",
-  "Type to Scheduler Hints and press enter": "Type to Scheduler Hints and press enter",
   "UDPLite": "UDPLite",
   "UNHEALTHY": "UNHEALTHY",
   "UNKNOWN": "UNKNOWN",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index dc8ce959..de1a1939 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -71,6 +71,7 @@
   "Add Virtual LAN": "添加虚拟网卡",
   "Add hosts to the aggregate or remove hosts from it. Hosts can be in multiple aggregates.": "增加主机到这个集合。主机可以加入多个集合。",
   "Add network": "添加网络",
+  "Add scheduler hints": "添加调度程序提示",
   "Additional Labels": "附加标签",
   "Additional routes announced to the instance, one entry per line(e.g. 192.168.200.0/24,10.56.1.254)": "云主机额外路由，每行一条(例如: 192.168.200.0/24,10.56.1.254)",
   "Additional routes announced to the instance, one entry per line(e.g. {ip})": "云主机额外路由，每行一条(例如: {ip})",
@@ -323,10 +324,7 @@
   "Checksum": "校验和",
   "Chile": "智利",
   "China": "中国大陆",
-  "Choose a External Network": "选择外部网络",
   "Choose a Network Driver": "选择网络驱动程序",
-  "Choose a Private Network": "选择专用网络",
-  "Choose a Private Network at first": "首先选择一个专用网络",
   "Choose a host to live migrate instance to. If not selected, the scheduler will auto select target host.": "选择计算节点来热迁移云主机，如果没有选择，调度器会自动选择目标计算节点。",
   "Choose a host to migrate instance to. If not selected, the scheduler will auto select target host.": "选择计算节点来迁移云主机，如果没有选择，调度器会自动选择目标计算节点。",
   "Choosing a QoS policy can limit bandwidth and DSCP": "选择QoS策略可以限制带宽和DSCP",
@@ -861,6 +859,7 @@
   "Evictions": "",
   "Execute Command": "执行命令",
   "Execution Result": "执行结果",
+  "Existing Volume": "已有硬盘",
   "Exit Policy": "退出策略",
   "Expand": "展开",
   "Expand Advanced Options": "展开高级选项",
@@ -1492,6 +1491,7 @@
   "New Caledonia": "新喀里多尼亚",
   "New Status": "新状态",
   "New Tag": "新标签",
+  "New Volume": "新的硬盘",
   "New Zealand": "新西兰",
   "Next": "下一步",
   "Next Hop": "下一跳",
@@ -1908,7 +1908,7 @@
   "Resume In Progress": "正在恢复中",
   "Resume Instance": "恢复云主机",
   "Resuming": "恢复中",
-  "Retry times for 'Restart on failure' policy": "“失败时重新启动”策略的重试次数",
+  "Retry times for restart on failure policy": "重新启动失败策略的重试次数",
   "Retyping": "修改类型中",
   "Reunion": "留尼汪岛",
   "Revert Resize or Migrate": "回滚修改配置/迁移",
@@ -1939,7 +1939,7 @@
   "Running": "运行中",
   "Running Threads": "运行中的线程",
   "Running Time": "运行时间",
-  "Runtime": "运行时间",
+  "Runtime": "运行时",
   "Russia": "俄罗斯",
   "Rwanda": "卢旺达",
   "SCTP": "",
@@ -2089,6 +2089,7 @@
   "Spawning": "孵化中",
   "Spec": "规格",
   "Specification": "规格",
+  "Specify mount point.": "指定挂载点",
   "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.": "指定未来的复制实例是在相同的管理程序（亲和）上创建还是在不同的管理程序（反亲和）上创建。如果要启动的实例是副本，则忽略此值。",
   "Specs": "规格",
   "Sri Lanka": "斯里兰卡",
@@ -2208,6 +2209,7 @@
   "The certificate contains information such as the public key and signature of the certificate. The extension of the certificate is \"pem\" or \"crt\", you can directly enter certificate content or upload certificate file.": "证书包含证书的公钥和签名等信息，证书扩展名为”pem”或”crt”，您可直接输入证书内容或上传证书文件。",
   "The command to execute": "要执行的命令",
   "The container memory size in MiB": "以 MiB 为单位的容器内存大小",
+  "The container runtime tool to create container with": "用于创建容器的容器运行时工具",
   "The creation instruction has been issued, please refresh to see the actual situation in the list.": "创建指令已下发，请刷新查看云主机列表中的实际情况。",
   "The creation instruction was issued successfully, instance: {name}. \n You can wait for a few seconds to follow the changes of the list data or manually refresh the data to get the final display result.": "创建指令下发成功，实例名称：{name}。 \n 您可等待几秒关注列表数据的变更或是手动刷新数据，以获取最终展示结果。",
   "The current operation requires the instance to be shut down:": "当前操作需要云主机在关机状态下进行：",
@@ -2262,7 +2264,6 @@
   "The private key of the certificate, the extension of the private key is \"key\", you can directly enter the content of the private key file or upload a private key that conforms to the format document.": "证书的私钥，私钥扩展名为”key”，您可直接输入私钥文件内容或上传符合格式的私钥文件。",
   "The resource class of the scheduled node needs to correspond to the resource class name of the flavor used by the ironic instance (for example, the resource class name of the scheduling node is baremetal.with-GPU, and the custom resource class name of the flavor is CUSTOM_BAREMETAL_WITH_GPU=1).": "被调度节点的资源类需要与裸机实例使用的云主机类型的资源类名称对应（比如：调度节点的资源类名称为 baremetal.with-GPU，云主机类型的资源类名称为CUSTOM_BAREMETAL_WITH_GPU=1 ）。",
   "The root and os_admin are default users and cannot be created!": "root 和 os_admin 是默认用户，不能创建！",
-  "The runtime to create container with": "用于创建容器的运行时间",
   "The security group is similar to the firewall function and is used to set up network access control. ": "安全组类似防火墙功能，用于设置网络访问控制。",
   "The security group is similar to the firewall function for setting up network access control, or you can go to the console and create a new security group. (Note: The security group you selected will work on all virtual LANS on the instances.)": "安全组类似防火墙功能，用于设置网络访问控制，您也可以前往控制台新建安全组。（注：您所选的安全组将作用于云主机的全部虚拟网卡。）",
   "The selected VPC/ subnet does not have IPv6 enabled.": "所选的VPC/子网未开通IPv6",
@@ -2333,7 +2334,6 @@
   "Two-way authentication": "双向认证",
   "Type": "类型",
   "Type of datastore": "数据存储类型",
-  "Type to Scheduler Hints and press enter": "输入调度程序提示并按回车键",
   "UDPLite": "",
   "UNHEALTHY": "不健康",
   "UNKNOWN": "未知",
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx
index cefe0a3b..ce655a12 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx
@@ -12,8 +12,18 @@
 
 import Base from 'components/Form';
 import { inject, observer } from 'mobx-react';
+import globalImageStore from 'src/stores/glance/image';
+import {
+  getImageColumns,
+  getImageSystemTabs,
+  getImageOS,
+} from 'resources/glance/image';
 
 export class StepInfo extends Base {
+  init() {
+    this.getImageList();
+  }
+
   get title() {
     return t('Info');
   }
@@ -22,24 +32,61 @@ export class StepInfo extends Base {
     return t('Info');
   }
 
+  async getImageList() {
+    await globalImageStore.fetchList();
+    this.updateDefaultValue();
+  }
+
+  get imageList() {
+    const { imageTab } = this.state;
+    return (globalImageStore.list.data || [])
+      .filter((it) => it.owner === this.currentProjectId)
+      .filter((it) => getImageOS(it) === imageTab);
+  }
+
+  get imageColumns() {
+    return getImageColumns(this);
+  }
+
+  get systemTabs() {
+    const imageTabs = getImageSystemTabs();
+    return imageTabs;
+  }
+
+  onImageTabChange = (value) => {
+    this.setState({
+      imageTab: value,
+    });
+  };
+
   get formItems() {
     return [
       {
-        name: 'containerName',
+        name: 'name',
         label: t('Container Name'),
         type: 'input',
         placeholder: t('Container Name'),
-        required: true,
       },
       {
-        name: 'image',
+        name: 'images',
         label: t('Image'),
-        type: 'input',
-        placeholder: t('Name or ID og the container image'),
+        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,
       },
       {
-        name: 'imageDriver',
+        name: 'image_driver',
         label: t('Image Driver'),
         placeholder: t('Image Driver'),
         type: 'select',
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx
index b8610c31..79e5da2b 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx
@@ -26,7 +26,7 @@ export class StepMiscellaneous extends Base {
   get formItems() {
     return [
       {
-        name: 'workingDirectory',
+        name: 'workdir',
         label: t('Working Directory'),
         type: 'input',
         placeholder: t('The working directory for commands to run in'),
@@ -39,7 +39,7 @@ export class StepMiscellaneous extends Base {
         addText: t('Add Environment Variable'),
       },
       {
-        name: 'enableInteractiveMode',
+        name: 'interactive',
         label: t('Enable interactive mode'),
         type: 'check',
       },
@@ -59,9 +59,9 @@ export class StepMiscellaneous extends Base {
       {
         name: 'hints',
         label: t('Scheduler Hints'),
-        type: 'select',
-        mode: 'tags',
-        placeholder: t('Type to Scheduler Hints and press enter'),
+        type: 'add-select',
+        itemComponent: KeyValueInput,
+        addText: t('Add scheduler hints'),
       },
     ];
   }
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx
index 6c521c7f..73104e6d 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx
@@ -10,6 +10,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
 import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
 import Base from 'components/Form';
@@ -19,6 +20,7 @@ import {
   securityGroupColumns,
   securityGroupFilter,
 } from 'src/resources/neutron/security-group';
+import { getLinkRender } from 'utils/route-map';
 
 export class StepNetworks extends Base {
   init() {
@@ -34,27 +36,44 @@ export class StepNetworks extends Base {
     return t('Networks');
   }
 
+  get nameForStateUpdate() {
+    return ['networks'];
+  }
+
+  get defaultValue() {
+    const data = {
+      networks: [],
+    };
+    return data;
+  }
+
   get formItems() {
+    const { networks } = this.state;
+
     return [
       {
-        name: 'networkSelect',
+        name: 'networks',
         label: t('Networks'),
         type: 'network-select-table',
         isMulti: true,
+        onChange: ({ selectedRowKeys = [] }) => {
+          this.setState({
+            networks: selectedRowKeys,
+          });
+        },
       },
       {
         name: 'ports',
         type: 'select-table',
         label: t('Ports'),
-        isMulti: true,
-        columns: portColumns,
-        filterParams: portFilters,
+        extraParams: { project_id: this.currentProjectId, status: 'DOWN' },
         backendPageStore: this.portStore,
-        extraParams: {
-          project_id: this.currentProjectId,
-          device_owner: [''],
-          admin_state_up: [true],
-        },
+        isMulti: true,
+        header: t(
+          'Ports provide extra communication channels to your instances. You can select ports instead of networks or a mix of both (The port executes its own security group rules by default).'
+        ),
+        filterParams: portFilters,
+        columns: portColumns,
       },
       {
         name: 'securityGroup',
@@ -62,9 +81,22 @@ export class StepNetworks extends Base {
         type: 'select-table',
         backendPageStore: this.securityGroupStore,
         extraParams: { project_id: this.currentProjectId },
-        columns: securityGroupColumns,
-        filterParams: securityGroupFilter,
         isMulti: true,
+        hidden: !networks || !networks.length,
+        header: (
+          <div style={{ marginBottom: 8 }}>
+            {t(
+              'The security group is similar to the firewall function and is used to set up network access control. '
+            )}
+            {t(' You can go to the console to ')}
+            {getLinkRender({
+              key: 'securityGroup',
+              value: `${t('create a new security group')}> `,
+            })}
+          </div>
+        ),
+        filterParams: securityGroupFilter,
+        columns: securityGroupColumns,
       },
     ];
   }
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx
index 5df64be8..b3c8b796 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx
@@ -12,12 +12,12 @@
 
 import Base from 'components/Form';
 import { inject, observer } from 'mobx-react';
-import globalAvailabilityZoneStore from 'src/stores/nova/zone';
+import globalAvailabilityZoneStore from 'stores/nova/zone';
 
 export class StepSpec extends Base {
   init() {
     this.getAvailabilityZones();
-    this.state.isMaxRetry = true;
+    this.state.disableRetry = true;
   }
 
   get title() {
@@ -32,7 +32,7 @@ export class StepSpec extends Base {
     await globalAvailabilityZoneStore.fetchListWithoutDetail();
   }
 
-  get getAvailabilityZoneList() {
+  get availabilityZoneList() {
     return (globalAvailabilityZoneStore.list.data || [])
       .filter((it) => it.zoneState.available)
       .map((it) => ({
@@ -41,11 +41,8 @@ export class StepSpec extends Base {
       }));
   }
 
-  onExitPolicyChange(value) {
-    this.setState({ isMaxRetry: value !== 'on-failure' });
-  }
-
   get formItems() {
+    const { disableRetry } = this.state;
     return [
       {
         name: 'hostname',
@@ -57,36 +54,34 @@ export class StepSpec extends Base {
         name: 'runtime',
         label: t('Runtime'),
         type: 'input',
-        placeholder: t('The runtime to create container with'),
+        placeholder: t('The container runtime tool to create container with'),
       },
       {
         name: 'cpu',
         label: t('CPU'),
         type: 'input-int',
-        placeholder: t('The number of virtual cpu for this container'),
+        tip: t('The number of virtual cpu for this container'),
         min: 1,
       },
       {
         name: 'memory',
         label: t('Memory (MiB)'),
         type: 'input-int',
-        placeholder: t('The container memory size in MiB'),
+        tip: t('The container memory size in MiB'),
         min: 4,
       },
       {
         name: 'disk',
         label: t('Disk'),
         type: 'input-int',
-        placeholder: t('The disk size in GiB for per container'),
+        tip: t('The disk size in GiB for per container'),
         min: 1,
       },
       {
-        name: 'availableZone',
+        name: 'availability_zone',
         label: t('Availability Zone'),
         type: 'select',
-        options: this.getAvailabilityZoneList,
-        allowClear: true,
-        showSearch: true,
+        options: this.availabilityZoneList,
       },
       {
         name: 'exitPolicy',
@@ -110,20 +105,21 @@ export class StepSpec extends Base {
             value: 'unless-stopped',
           },
         ],
-        onChange: (val) => this.onExitPolicyChange(val),
-        allowClear: true,
-        showSearch: true,
+        onChange: (value) =>
+          this.setState({
+            disableRetry: value !== 'on-failure',
+          }),
       },
       {
         name: 'maxRetry',
         label: t('Max Retry'),
         type: 'input-number',
-        placeholder: t("Retry times for 'Restart on failure' policy"),
+        tip: t('Retry times for restart on failure policy'),
         min: 1,
-        disabled: this.state.isMaxRetry,
+        disabled: disableRetry,
       },
       {
-        name: 'enableAutoHeal',
+        name: 'auto_heal',
         label: t('Enable auto heal'),
         type: 'check',
       },
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx
index 27c617d4..3d492766 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx
@@ -13,25 +13,25 @@
 import Base from 'components/Form';
 import { inject, observer } from 'mobx-react';
 import ZunVolume from 'src/components/FormItem/ZunVolume';
-import globalVolumeStore from 'src/stores/cinder/volume';
+import { VolumeStore } from 'src/stores/cinder/volume';
 
 export class StepVolumes extends Base {
   init() {
-    this.globalVolumeStore = globalVolumeStore;
-    this.getVolumeStore();
+    this.volumeStore = new VolumeStore();
+    this.getVolumes();
   }
 
-  get cinderVolume() {
-    return (this.globalVolumeStore.list.data || [])
+  get volumes() {
+    return (this.volumeStore.list.data || [])
       .filter((it) => it.status === 'available')
       .map((it) => ({
         value: it.id,
-        label: it.name === '' ? it.id : it.name,
+        label: `${it.name || it.id} (${it.id})`,
       }));
   }
 
-  getVolumeStore() {
-    this.globalVolumeStore.fetchList();
+  async getVolumes() {
+    await this.volumeStore.fetchList();
   }
 
   get formItems() {
@@ -41,10 +41,10 @@ export class StepVolumes extends Base {
         label: t('Type'),
         type: 'add-select',
         optionsType: [
-          { label: 'Existing Cinder Volume', value: 'cinder-available' },
-          { label: 'New Cinder Volume', value: 'cinder-new' },
+          { label: t('Existing Volume'), value: 'bind' },
+          { label: t('New Volume'), value: 'volume' },
         ],
-        optionsSource: this.cinderVolume,
+        optionsSource: this.volumes,
         itemComponent: ZunVolume,
       },
     ];
diff --git a/src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx b/src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx
index 0c9507c1..7d600946 100644
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx
@@ -76,90 +76,110 @@ export class StepCreate extends StepAction {
   }
 
   onSubmit = (values) => {
-    const { environmentVariables, labels, mounts } = values;
+    const {
+      environmentVariables,
+      labels,
+      mounts,
+      images,
+      exitPolicy,
+      maxRetry,
+      networks,
+      ports,
+      hints,
+      securityGroup,
+      ...rest
+    } = values;
 
-    const requestEnviranment = {};
+    const requestEnvironment = {};
     const requestLabels = {};
-    const requestValumes = [];
-
-    environmentVariables !== undefined
-      ? environmentVariables.forEach((item) => {
-          const labelKey = item.value.key.toLowerCase().trim();
-          const labelValue = item.value.value.toLowerCase().trim();
-          requestEnviranment[labelKey] = labelValue;
-        })
-      : undefined;
-
-    labels !== undefined
-      ? labels.forEach((item) => {
-          const key = item.value.key.toLowerCase().trim();
-          const value = item.value.value.toLowerCase().trim();
-          requestLabels[key] = value;
-        })
-      : undefined;
-
-    mounts !== undefined
-      ? mounts.forEach((item) => {
-          const { destination } = item.value;
-          const { source } = item.value;
-          const { type } = item.value;
-          const { cinderVolumeSize } = item.value;
-          item.value.isCinderVolume !== true
-            ? requestValumes.push({
-                destination,
-                source,
-                type,
-              })
-            : requestValumes.push({
-                destination,
-                cinderVolumeSize,
-                type,
-              });
-        })
-      : undefined;
-
-    const networks = [];
+    const requestVolumes = [];
+    const requestHints = {};
+    const nets = [];
     const securityGroups = [];
 
-    values.networkSelect &&
-      values.networkSelect.selectedRowKeys.forEach((item) => {
-        networks.push({ network: item });
+    if (environmentVariables) {
+      environmentVariables.forEach((item) => {
+        const labelKey = item.value.key.toLowerCase().trim();
+        const labelValue = item.value.value.toLowerCase().trim();
+        requestEnvironment[labelKey] = labelValue;
       });
+    }
 
-    values.ports &&
-      values.ports.selectedRowKeys.forEach((item) => {
-        networks.push({ port: item });
+    if (labels) {
+      labels.forEach((item) => {
+        const key = item.value.key.toLowerCase().trim();
+        const value = item.value.value.toLowerCase().trim();
+        requestLabels[key] = value;
       });
+    }
 
-    values.securityGroup &&
-      values.securityGroup.selectedRowKeys.forEach((item) => {
-        securityGroups.push(item);
+    if (mounts) {
+      mounts.forEach((item) => {
+        const { type, source, size, destination, isNewVolume } = item.value;
+        if (isNewVolume) {
+          requestVolumes.push({
+            type,
+            size,
+            destination,
+          });
+        } else {
+          requestVolumes.push({
+            type,
+            source,
+            destination,
+          });
+        }
       });
+    }
 
-    return this.store.create({
-      name: values.containerName,
-      image: values.image,
-      command: values.command,
-      cpu: values.cpu,
-      memory: values.memory,
-      workdir: values.workingDirectory,
+    if (networks) {
+      (networks.selectedRowKeys || []).forEach((it) => {
+        nets.push({ network: it });
+      });
+    }
+
+    if (ports) {
+      (ports.selectedRowKeys || []).forEach((it) => {
+        nets.push({ port: it });
+      });
+    }
+
+    if (securityGroup) {
+      (securityGroup.selectedRows || []).forEach((it) => {
+        securityGroups.push(it.name);
+      });
+    }
+
+    if (hints) {
+      hints.forEach((item) => {
+        const key = item.value.key.toLowerCase().trim();
+        const value = item.value.value.toLowerCase().trim();
+        requestHints[key] = value;
+      });
+    }
+
+    const body = {
+      environment: requestEnvironment,
       labels: requestLabels,
-      environment: requestEnviranment,
-      restart_policy: {
-        Name: values.exitPolicy === undefined ? 'no' : values.exitPolicy,
-        MaximumRetryCount: values.maxRetry === undefined ? 0 : values.maxRetry,
-      },
-      interactive: values.enableInteractiveMode,
-      image_driver: values.imageDriver,
+      mounts: requestVolumes,
+      hints: requestHints,
+      nets,
       security_groups: securityGroups,
-      nets: networks,
-      runtime: values.runtime,
-      hostname: values.hostname,
-      auto_heal: values.enableAutoHeal,
-      availability_zone: values.availableZone,
-      hints: values.hints,
-      mounts: values.mounts,
-    });
+      ...rest,
+    };
+
+    if (images) {
+      body.image = (images.selectedRows[0] || {}).name;
+    }
+
+    if (exitPolicy) {
+      body.restart_policy = {
+        Name: exitPolicy,
+        ...(maxRetry ? { MaximumRetryCount: maxRetry } : {}),
+      };
+    }
+
+    return this.store.create(body);
   };
 }