fix: Zun code adjustment

1. code formatting problem
2. delete capsule problem
3. create container problem

Change-Id: If458dd8c3b0114573512984792f51b6b883a3c8a

src/layouts/menu.jsx

@@ -591,19 +591,19 @@ const renderMenu = (t) => {
         {
           path: '/container/containers',
           name: t('Containers'),
-          key: 'containers',
+          key: 'zunContainers',
           level: 1,
           children: [
             {
               path: '/container/containers/create',
               name: t('Create Container'),
-              key: 'containersCreateContainer',
+              key: 'zunContainersCreateContainer',
               level: 2,
             },
             {
               path: /^\/container\/containers\/detail\/.[^/]+$/,
-              name: t('Containers Detail'),
+              name: t('Container Detail'),
-              key: 'containersDetail',
+              key: 'zunContainerDetail',
               level: 2,
               routePath: '/container/containers/detail/:id',
             },
@@ -612,13 +612,13 @@ const renderMenu = (t) => {
         {
           path: '/container/capsules',
           name: t('Capsules'),
-          key: 'capsules',
+          key: 'zunCapsules',
           level: 1,
           children: [
             {
               path: /^\/container\/capsules\/detail\/.[^/]+$/,
-              name: t('Capsules Detail'),
+              name: t('Capsule Detail'),
-              key: 'capsulesDetail',
+              key: 'zunCapsuleDetail',
               level: 2,
               routePath: '/container/capsules/detail/:id',
             },

src/locales/en.json

@@ -292,8 +292,9 @@
   "Cancel upload successfully.": "Cancel upload successfully.",
   "Capacity (GiB)": "Capacity (GiB)",
   "Cape Verde": "Cape Verde",
+  "Capsule Detail": "Capsule Detail",
+  "Capsule Type": "Capsule Type",
   "Capsules": "Capsules",
-  "Capsules Detail": "Capsules Detail",
   "Cast Rules To Read Only": "Cast Rules To Read Only",
   "Category": "Category",
   "Cayman Islands": "Cayman Islands",
@@ -418,13 +419,18 @@
   "Console Interface": "Console Interface",
   "Consumer": "Consumer",
   "Container": "Container",
+  "Container Creating": "Container Creating",
+  "Container Deleting": "Container Deleting",
   "Container Detail": "Container Detail",
   "Container Format": "Container Format",
+  "Container ID": "Container ID",
   "Container Name": "Container Name",
   "Container Orchestration Engine": "Container Orchestration Engine",
+  "Container Rebooting": "Container Rebooting",
+  "Container Starting": "Container Starting",
+  "Container Stopping": "Container Stopping",
   "Container Version": "Container Version",
   "Containers": "Containers",
-  "Containers Detail": "Containers Detail",
   "Content": "Content",
   "Content Type": "Content Type",
   "Control Location": "Control Location",
@@ -444,14 +450,12 @@
   "Create Bandwidth Limit Rule": "Create Bandwidth Limit Rule",
   "Create Bare Metal Node": "Create Bare Metal Node",
   "Create Capsule": "Create Capsule",
-  "Create Capsules": "Create Capsules",
   "Create Certificate": "Create Certificate",
   "Create Cluster": "Create Cluster",
   "Create Cluster Template": "Create Cluster Template",
   "Create Complete": "Create Complete",
   "Create Configurations": "Create Configurations",
   "Create Container": "Create Container",
-  "Create Container (Step)": "Create Container (Step)",
   "Create DNAT Rule": "Create DNAT Rule",
   "Create DNAT rule": "Create DNAT rule",
   "Create DSCP Marking Rule": "Create DSCP Marking Rule",
@@ -598,7 +602,7 @@
   "Delete Backup": "Delete Backup",
   "Delete Bandwidth Egress Rules": "Delete Bandwidth Egress Rules",
   "Delete Bandwidth Ingress Rules": "Delete Bandwidth Ingress Rules",
-  "Delete Capsules": "Delete Capsules",
+  "Delete Capsule": "Delete Capsule",
   "Delete Certificate": "Delete Certificate",
   "Delete Clusters": "Delete Clusters",
   "Delete Clusters Templates": "Delete Clusters Templates",
@@ -1869,6 +1873,7 @@
   "Resource Types": "Resource Types",
   "Resources Synced": "Resources Synced",
   "Restart Policy": "Restart Policy",
+  "Restarting": "Restarting",
   "Restore Backup": "Restore Backup",
   "Restore backup": "Restore backup",
   "Restore from snapshot": "Restore from snapshot",
@@ -2122,6 +2127,7 @@
   "Subnets": "Subnets",
   "Subordinate Project": "Subordinate Project",
   "Subordinate User Group": "Subordinate User Group",
+  "Succeeded": "Succeeded",
   "Success": "Success",
   "Sudan": "Sudan",
   "Suriname": "Suriname",

src/locales/zh.json

@@ -292,8 +292,9 @@
   "Cancel upload successfully.": "取消上传成功。",
   "Capacity (GiB)": "容量(GiB)",
   "Cape Verde": "佛得角",
+  "Capsule Detail": "Capsule 详情",
+  "Capsule Type": "Capsule 类型",
   "Capsules": "Capsules",
-  "Capsules Detail": "Capsules 详情",
   "Cast Rules To Read Only": "规则强制只读",
   "Category": "类别",
   "Cayman Islands": "开曼群岛",
@@ -418,13 +419,18 @@
   "Console Interface": "Console接口",
   "Consumer": "消费者",
   "Container": "容器集群",
+  "Container Creating": "容器创建中",
+  "Container Deleting": "容器删除中",
   "Container Detail": "容器详情",
   "Container Format": "容器格式",
+  "Container ID": "容器ID",
   "Container Name": "容器名称",
   "Container Orchestration Engine": "容器编排引擎",
+  "Container Rebooting": "容器重启中",
+  "Container Starting": "容器启动中",
+  "Container Stopping": "容器关闭中",
   "Container Version": "容器版本",
   "Containers": "容器",
-  "Containers Detail": "容器详情",
   "Content": "内容",
   "Content Type": "内容类型",
   "Control Location": "控制端",
@@ -444,14 +450,12 @@
   "Create Bandwidth Limit Rule": "创建带宽限制规则",
   "Create Bare Metal Node": "创建裸机节点",
   "Create Capsule": "创建 Capsule",
-  "Create Capsules": "创建 Capsule",
   "Create Certificate": "创建证书",
   "Create Cluster": "创建集群",
   "Create Cluster Template": "创建集群模板",
   "Create Complete": "创建完成",
   "Create Configurations": "创建配置",
   "Create Container": "创建容器",
-  "Create Container (Step)": "创建容器（步骤）",
   "Create DNAT Rule": "创建DNAT规则",
   "Create DNAT rule": "创建DNAT规则",
   "Create DSCP Marking Rule": "创建DSCP标记规则",
@@ -598,7 +602,7 @@
   "Delete Backup": "删除备份",
   "Delete Bandwidth Egress Rules": "删除带宽出方向限制",
   "Delete Bandwidth Ingress Rules": "删除带宽入方向限制",
-  "Delete Capsules": "删除 Capsule",
+  "Delete Capsule": "删除 Capsule",
   "Delete Certificate": "删除证书",
   "Delete Clusters": "删除集群",
   "Delete Clusters Templates": "删除集群模板",
@@ -1869,6 +1873,7 @@
   "Resource Types": "资源类型",
   "Resources Synced": "资源同步",
   "Restart Policy": "重启策略",
+  "Restarting": "重启中",
   "Restore Backup": "恢复备份",
   "Restore backup": "恢复备份",
   "Restore from snapshot": "从快照恢复",
@@ -2122,6 +2127,7 @@
   "Subnets": "子网",
   "Subordinate Project": "所属项目列表",
   "Subordinate User Group": "所属用户组列表",
+  "Succeeded": "成功",
   "Success": "成功",
   "Sudan": "苏丹",
   "Suriname": "苏里南",

src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx

@@ -26,30 +26,10 @@ export class BaseDetail extends Base {
 
   get baseInfoCard() {
     const options = [
-      {
-        label: t('ID'),
-        dataIndex: 'uuid',
-      },
-      {
-        label: t('Name'),
-        dataIndex: 'meta_name',
-      },
-      {
-        label: t('Status'),
-        dataIndex: 'status',
-      },
       {
         label: t('Status Reason'),
         dataIndex: 'status_reason',
       },
-      {
-        label: t('Created'),
-        dataIndex: 'created_at',
-      },
-      {
-        label: t('Updated'),
-        dataIndex: 'updated_at',
-      },
       {
         label: t('Project ID'),
         dataIndex: 'project_id',
@@ -61,7 +41,7 @@ export class BaseDetail extends Base {
     ];
 
     return {
-      title: t('Cluster Type'),
+      title: t('Capsule Type'),
       options,
     };
   }
@@ -74,9 +54,11 @@ export class BaseDetail extends Base {
         render: (value) =>
           value.map((it) => {
             return (
-              <React.Fragment>
+              <div key={it.uuid}>
-                <b>Name</b> : {it.name} <br /> <b>Container ID</b> : {it.uuid}
+                <b>{t('Name')}</b> : {it.name}
-              </React.Fragment>
+                <br />
+                <b>{t('Container ID')}</b>: {it.uuid}
+              </div>
             );
           }),
       },
@@ -113,7 +95,7 @@ export class BaseDetail extends Base {
         render: (value) =>
           value.map((it) => {
             return (
-              <div>
+              <div key={it.href}>
                 {it.href} : {it.rel}
               </div>
             );
@@ -133,4 +115,4 @@ export class BaseDetail extends Base {
   }
 }
 
-export default inject("rootStore")(observer(BaseDetail))
+export default inject('rootStore')(observer(BaseDetail));

src/pages/container-service/containers/Capsules/Detail/index.jsx

@@ -14,8 +14,9 @@
 
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/TabDetail';
-import BaseDetail from './BaseDetail';
 import globalCapsulesStore from 'src/stores/zun/capsules';
+import { capsuleStatus } from 'resources/zun/capsule';
+import BaseDetail from './BaseDetail';
 
 export class CapsulesDetail extends Base {
   init() {
@@ -27,7 +28,7 @@ export class CapsulesDetail extends Base {
   }
 
   get listUrl() {
-    return this.getRoutePath('capsules');
+    return this.getRoutePath('zunCapsules');
   }
 
   get policy() {
@@ -38,7 +39,22 @@ export class CapsulesDetail extends Base {
     return [
       {
         title: t('Name'),
-        dataIndex: 'name',
+        dataIndex: 'meta_name',
+      },
+      {
+        title: t('Status'),
+        dataIndex: 'status',
+        render: (value) => capsuleStatus[value] || value,
+      },
+      {
+        title: t('Created At'),
+        dataIndex: 'created_at',
+        valueRender: 'toLocalTime',
+      },
+      {
+        title: t('Updated At'),
+        dataIndex: 'updated_at',
+        valueRender: 'toLocalTime',
       },
     ];
   }
@@ -54,4 +70,4 @@ export class CapsulesDetail extends Base {
   }
 }
 
-export default inject("rootStore")(observer(CapsulesDetail))
+export default inject('rootStore')(observer(CapsulesDetail));

src/pages/container-service/containers/Capsules/actions/Create.jsx

@@ -36,7 +36,7 @@ export class Create extends ModalAction {
   }
 
   get name() {
-    return t('Create Capsules');
+    return t('Create Capsule');
   }
 
   static policy = 'container:capsule:create';
@@ -76,4 +76,4 @@ export class Create extends ModalAction {
   };
 }
 
-export default inject("rootStore")(observer(Create))
+export default inject('rootStore')(observer(Create));

src/pages/container-service/containers/Capsules/actions/Delete.jsx

@@ -10,21 +10,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { inject, observer } from 'mobx-react';
 import { ConfirmAction } from 'containers/Action';
 import globalCapsulesStore from 'src/stores/zun/capsules';
 
-export class DeleteCapsules extends ConfirmAction {
+export default class DeleteCapsule extends ConfirmAction {
   get id() {
     return 'delete';
   }
 
   get title() {
-    return t('Delete Capsules');
+    return t('Delete Capsule');
   }
 
   get actionName() {
-    return t('Delete Capsules');
+    return t('Delete Capsule');
+  }
+
+  get buttonText() {
+    return t('Delete');
   }
 
   get buttonType() {
@@ -37,5 +40,3 @@ export class DeleteCapsules extends ConfirmAction {
 
   onSubmit = (data) => globalCapsulesStore.delete({ id: data.uuid });
 }
-
-export default inject("rootStore")(observer(DeleteCapsules))

src/pages/container-service/containers/Capsules/actions/index.jsx

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import Create from './Create';
-import DeleteCapsules from './Delete';
+import DeleteCapsule from './Delete';
 
 const actionConfigs = {
   rowActions: {
-    firstAction: DeleteCapsules,
+    firstAction: DeleteCapsule,
   },
-  batchActions: [DeleteCapsules],
+  batchActions: [DeleteCapsule],
   primaryActions: [Create],
 };
 

src/pages/container-service/containers/Capsules/index.jsx

@@ -14,8 +14,9 @@
 
 import Base from 'containers/List';
 import { inject, observer } from 'mobx-react';
+import globalCapsulesStore from 'stores/zun/capsules';
+import { capsuleStatus } from 'resources/zun/capsule';
 import actionConfigs from './actions';
-import globalCapsulesStore from 'src/stores/zun/capsules';
 
 export class Capsules extends Base {
   init() {
@@ -40,13 +41,14 @@ export class Capsules extends Base {
       title: t('ID/Name'),
       dataIndex: 'meta_name',
       isLink: true,
-      routeName: this.getRouteName('capsulesDetail'),
+      routeName: this.getRouteName('zunCapsuleDetail'),
       idKey: 'uuid',
     },
     {
       title: t('Status'),
       isHideable: true,
       dataIndex: 'status',
+      render: (value) => capsuleStatus[value] || value,
     },
     {
       title: t('CPU'),
@@ -61,4 +63,4 @@ export class Capsules extends Base {
   ];
 }
 
-export default inject("rootStore")(observer(Capsules))
+export default inject('rootStore')(observer(Capsules));

src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx

@@ -28,18 +28,6 @@ export class BaseDetail extends Base {
 
   get baseInfoCard() {
     const options = [
-      {
-        label: t('ID'),
-        dataIndex: 'uuid',
-      },
-      {
-        label: t('Name'),
-        dataIndex: 'name',
-      },
-      {
-        label: t('Status'),
-        dataIndex: 'status',
-      },
       {
         label: t('Status Detail'),
         dataIndex: 'status_detail',
@@ -83,7 +71,7 @@ export class BaseDetail extends Base {
       {
         label: t('Environment'),
         dataIndex: 'environment',
-        content
+        content,
       },
       {
         label: t('Interactive'),
@@ -98,7 +86,11 @@ export class BaseDetail extends Base {
       {
         label: t('Links'),
         dataIndex: 'links',
-        render: (value) => <div> <pre>{JSON.stringify(value, null, 4)}</pre> </div>
+        render: (value) => (
+          <div>
+            <pre>{JSON.stringify(value, null, 4)}</pre>
+          </div>
+        ),
       },
     ];
 
@@ -145,7 +137,11 @@ export class BaseDetail extends Base {
       {
         label: t('Restart Policy'),
         dataIndex: 'restart_policy',
-        render: (value) => <div> <pre>{JSON.stringify(value, null, 4)}</pre> </div>
+        render: (value) => (
+          <div>
+            <pre>{JSON.stringify(value, null, 4)}</pre>
+          </div>
+        ),
       },
       {
         label: t('Auto Remove'),
@@ -158,17 +154,29 @@ export class BaseDetail extends Base {
       {
         label: t('Addresses'),
         dataIndex: 'addresses',
-        render: (value) => <div> <pre>{JSON.stringify(value, null, 4)}</pre> </div>
+        render: (value) => (
+          <div>
+            <pre>{JSON.stringify(value, null, 4)}</pre>
+          </div>
+        ),
       },
       {
         label: t('Ports'),
         dataIndex: 'ports',
-        render: (value) => <div> <pre>{JSON.stringify(value, null, 4)}</pre> </div>
+        render: (value) => (
+          <div>
+            <pre>{JSON.stringify(value, null, 4)}</pre>
+          </div>
+        ),
       },
       {
         label: t('Security Groups'),
         dataIndex: 'security_groups',
-        render: (value) => <div> <pre>{JSON.stringify(value, null, 4)}</pre> </div>
+        render: (value) => (
+          <div>
+            <pre>{JSON.stringify(value, null, 4)}</pre>
+          </div>
+        ),
       },
     ];
 
@@ -180,4 +188,4 @@ export class BaseDetail extends Base {
   }
 }
 
-export default inject("rootStore")(observer(BaseDetail))
+export default inject('rootStore')(observer(BaseDetail));

src/pages/container-service/containers/Containers/Detail/index.jsx

@@ -12,20 +12,21 @@
 
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/TabDetail';
-import BaseDetail from './BaseDetail';
 import globalContainersStore from 'src/stores/zun/containers';
+import { containerStatus } from 'resources/zun/container';
+import BaseDetail from './BaseDetail';
 
-export class ContainersDetail extends Base {
+export class ContainerDetail extends Base {
   init() {
     this.store = globalContainersStore;
   }
 
   get name() {
-    return t('Containers Detail');
+    return t('Container Detail');
   }
 
   get listUrl() {
-    return this.getRoutePath('containers');
+    return this.getRoutePath('zunContainers');
   }
 
   get policy() {
@@ -38,6 +39,11 @@ export class ContainersDetail extends Base {
         title: t('Name'),
         dataIndex: 'name',
       },
+      {
+        title: t('Status'),
+        dataIndex: 'status',
+        render: (value) => containerStatus[value] || value,
+      },
     ];
   }
 
@@ -52,4 +58,4 @@ export class ContainersDetail extends Base {
   }
 }
 
-export default inject("rootStore")(observer(ContainersDetail))
+export default inject('rootStore')(observer(ContainerDetail));

src/pages/container-service/containers/Containers/actions/Delete.jsx

@@ -15,13 +15,13 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class DeleteContainers extends ConfirmAction {
+export default class DeleteContainer extends ConfirmAction {
   get id() {
     return 'delete';
   }
 
   get title() {
-    return t('Delete Container')
+    return t('Delete Container');
   }
 
   get actionName() {
@@ -40,6 +40,5 @@ export default class DeleteContainers extends ConfirmAction {
 
   allowedCheckFunc = () => true;
 
-  onSubmit = (data) =>
+  onSubmit = (data) => globalContainersStore.delete({ id: data.uuid });
-    globalContainersStore.delete({ id: data.uuid });
 }

src/pages/container-service/containers/Containers/actions/Pause.jsx

@@ -13,19 +13,23 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class PauseContainers extends ConfirmAction {
+export default class PauseContainer extends ConfirmAction {
   get id() {
     return 'pause';
   }
 
   get title() {
-    return t('Pause Container')
+    return t('Pause Container');
   }
 
   get actionName() {
     return t('Pause Container');
   }
 
+  get buttonText() {
+    return t('Pause');
+  }
+
   policy = 'container:container:pause';
 
   allowedCheckFunc = () => true;

src/pages/container-service/containers/Containers/actions/Reboot.jsx

@@ -13,19 +13,23 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class RebootContainers extends ConfirmAction {
+export default class RebootContainer extends ConfirmAction {
   get id() {
     return 'reboot';
   }
 
   get title() {
-    return t('Reboot Container')
+    return t('Reboot Container');
   }
 
   get actionName() {
     return t('Reboot Container');
   }
 
+  get buttonText() {
+    return t('Reboot');
+  }
+
   policy = 'container:container:reboot';
 
   allowedCheckFunc = () => true;

src/pages/container-service/containers/Containers/actions/Start.jsx

@@ -13,19 +13,23 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class StartContainers extends ConfirmAction {
+export default class StartContainer extends ConfirmAction {
   get id() {
     return 'start';
   }
 
   get title() {
-    return t('Start Container')
+    return t('Start Container');
   }
 
   get actionName() {
     return t('Start Container');
   }
 
+  get buttonText() {
+    return t('Start');
+  }
+
   policy = 'container:container:start';
 
   allowedCheckFunc = () => true;

src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx

@@ -10,59 +10,59 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "components/Form";
+import Base from 'components/Form';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 
 export class StepInfo extends Base {
   get title() {
-    return t("Info")
+    return t('Info');
   }
 
   get name() {
-    return t("Info")
+    return t('Info');
   }
 
   get formItems() {
     return [
       {
-        name: "clusterName",
+        name: 'containerName',
-        label: t("Cluster Name"),
+        label: t('Container Name'),
-        type: "input",
+        type: 'input',
-        placeholder: t("Cluster Name"),
+        placeholder: t('Container Name'),
-        required: true
+        required: true,
       },
       {
-        name: "image",
+        name: 'image',
-        label: t("Image"),
+        label: t('Image'),
-        type: "input",
+        type: 'input',
-        placeholder: t("Name or ID og the container image"),
+        placeholder: t('Name or ID og the container image'),
-        required: true
+        required: true,
       },
       {
-        name: "imageDriver",
+        name: 'imageDriver',
-        label: t("Image Driver"),
+        label: t('Image Driver'),
-        placeholder: t("Image Driver"),
+        placeholder: t('Image Driver'),
-        type: "select",
+        type: 'select',
         options: [
           {
-            label: t("Docker"),
+            label: t('Docker'),
-            value: "docker"
+            value: 'docker',
           },
           {
-            label: t("Glance"),
+            label: t('Glance'),
-            value: "glance"
+            value: 'glance',
-          }
+          },
         ],
-        allowClear: true
+        allowClear: true,
       },
       {
-        name: "command",
+        name: 'command',
-        label: t("Command"),
+        label: t('Command'),
-        type: "input",
+        type: 'input',
-        placeholder: t("A command that will be sent to the container"),
+        placeholder: t('A command that will be sent to the container'),
       },
-    ]
+    ];
   }
 }
 
-export default inject('rootStore')(observer(StepInfo));
+export default inject('rootStore')(observer(StepInfo));

src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx

@@ -10,62 +10,61 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "components/Form";
+import Base from 'components/Form';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 import KeyValueInput from 'components/FormItem/KeyValueInput';
 
 export class StepMiscellaneous extends Base {
-
   get title() {
-    return t("Miscellaneous")
+    return t('Miscellaneous');
   }
 
   get name() {
-    return t("Miscellaneous")
+    return t('Miscellaneous');
   }
 
   get formItems() {
     return [
       {
-        name: "workingDirectory",
+        name: 'workingDirectory',
-        label: t("Working Directory"),
+        label: t('Working Directory'),
-        type: "input",
+        type: 'input',
-        placeholder: t("The working directory for commands to run in")
+        placeholder: t('The working directory for commands to run in'),
       },
       {
-        name: "environmentVariables",
+        name: 'environmentVariables',
-        label: t("Environment Variables"),
+        label: t('Environment Variables'),
         type: 'add-select',
         itemComponent: KeyValueInput,
         addText: t('Add Environment Variable'),
       },
       {
-        name: "enableInteractiveMode",
+        name: 'enableInteractiveMode',
-        label: t("Enable interactive mode"),
+        label: t('Enable interactive mode'),
-        type: "check"
+        type: 'check',
       },
       {
-        type: "divider"
+        type: 'divider',
       },
       {
-        name: "labels",
+        name: 'labels',
-        label: t("Labels"),
+        label: t('Labels'),
         type: 'add-select',
         itemComponent: KeyValueInput,
         addText: t('Add Label'),
       },
       {
-        type: "divider"
+        type: 'divider',
       },
       {
-        name: "hints",
+        name: 'hints',
-        label: t("Scheduler Hints"),
+        label: t('Scheduler Hints'),
-        type: "select",
+        type: 'select',
-        mode: "tags",
+        mode: 'tags',
-        placeholder: t("Type to Scheduler Hints and press enter")
+        placeholder: t('Type to Scheduler Hints and press enter'),
-      }
+      },
-    ]
+    ];
   }
 }
 
-export default inject('rootStore')(observer(StepMiscellaneous));
+export default inject('rootStore')(observer(StepMiscellaneous));

src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx

@@ -12,14 +12,16 @@
 
 import { SecurityGroupStore } from 'stores/neutron/security-group';
 import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
-import Base from "components/Form";
+import Base from 'components/Form';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 import globalNetworkStore from 'src/stores/neutron/network';
 import { portColumns, portFilters } from 'src/resources/neutron/port';
-import { securityGroupColumns, securityGroupFilter } from 'src/resources/neutron/security-group';
+import {
+  securityGroupColumns,
+  securityGroupFilter,
+} from 'src/resources/neutron/security-group';
 
 export class StepNetworks extends Base {
-
   init() {
     this.getNetworkStore();
     this.portStore = new VirtualAdapterStore();
@@ -27,11 +29,11 @@ export class StepNetworks extends Base {
   }
 
   get title() {
-    return t("Networks")
+    return t('Networks');
   }
 
   get name() {
-    return t("Networks")
+    return t('Networks');
   }
 
   async getNetworkStore() {
@@ -61,7 +63,11 @@ export class StepNetworks extends Base {
         columns: portColumns,
         filterParams: portFilters,
         backendPageStore: this.portStore,
-        extraParams: { project_id: this.currentProjectId, device_owner: [''], admin_state_up: [true] }
+        extraParams: {
+          project_id: this.currentProjectId,
+          device_owner: [''],
+          admin_state_up: [true],
+        },
       },
       {
         name: 'securityGroup',
@@ -71,10 +77,10 @@ export class StepNetworks extends Base {
         extraParams: { project_id: this.currentProjectId },
         columns: securityGroupColumns,
         filterParams: securityGroupFilter,
-        isMulti: true
+        isMulti: true,
-      }
+      },
-    ]
+    ];
   }
 }
 
-export default inject('rootStore')(observer(StepNetworks));
+export default inject('rootStore')(observer(StepNetworks));

src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx

@@ -10,9 +10,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "components/Form";
+import Base from 'components/Form';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import globalAvailabilityZoneStore from "src/stores/nova/zone";
+import globalAvailabilityZoneStore from 'src/stores/nova/zone';
 
 export class StepSpec extends Base {
   init() {
@@ -21,11 +21,11 @@ export class StepSpec extends Base {
   }
 
   get title() {
-    return t("Spec");
+    return t('Spec');
   }
 
   get name() {
-    return t("Spec");
+    return t('Spec');
   }
 
   async getAvailabilityZones() {
@@ -33,7 +33,8 @@ export class StepSpec extends Base {
   }
 
   get getAvailabilityZoneList() {
-    return (globalAvailabilityZoneStore.list.data || []).filter((it) => it.zoneState.available)
+    return (globalAvailabilityZoneStore.list.data || [])
+      .filter((it) => it.zoneState.available)
       .map((it) => ({
         value: it.zoneName,
         label: it.zoneName,
@@ -41,96 +42,96 @@ export class StepSpec extends Base {
   }
 
   onExitPolicyChange(value) {
-    this.setState({ isMaxRetry: value === "on-failure" ? false : true })
+    this.setState({ isMaxRetry: value !== 'on-failure' });
   }
 
   get formItems() {
     return [
       {
-        name: "hostname",
+        name: 'hostname',
-        label: t("Hostname"),
+        label: t('Hostname'),
-        type: "input",
+        type: 'input',
-        placeholder: t("The host name of this container"),
+        placeholder: t('The host name of this container'),
       },
       {
-        name: "runtime",
+        name: 'runtime',
-        label: t("Runtime"),
+        label: t('Runtime'),
-        type: "input",
+        type: 'input',
-        placeholder: t("The runtime to create container with"),
+        placeholder: t('The runtime to create container with'),
       },
       {
-        name: "cpu",
+        name: 'cpu',
-        label: t("CPU"),
+        label: t('CPU'),
-        type: "input-number",
+        type: 'input-number',
-        placeholder: t("The number of virtual cpu for this container"),
+        placeholder: t('The number of virtual cpu for this container'),
         min: 1,
-        width: 300
+        width: 300,
       },
       {
-        name: "memory",
+        name: 'memory',
-        label: t("Memory"),
+        label: t('Memory'),
-        type: "input-number",
+        type: 'input-number',
-        placeholder: t("The container memory size in MiB"),
+        placeholder: t('The container memory size in MiB'),
         min: 4,
-        width: 300
+        width: 300,
       },
       {
-        name: "disk",
+        name: 'disk',
-        label: t("Disk"),
+        label: t('Disk'),
-        type: "input-number",
+        type: 'input-number',
-        placeholder: t("The disk size in GİB for per container"),
+        placeholder: t('The disk size in GİB for per container'),
         min: 1,
-        width: 300
+        width: 300,
       },
       {
-        name: "availableZone",
+        name: 'availableZone',
-        label: t("Availability Zone"),
+        label: t('Availability Zone'),
-        type: "select",
+        type: 'select',
         options: this.getAvailabilityZoneList,
         allowClear: true,
-        showSearch: true
+        showSearch: true,
       },
       {
-        name: "exitPolicy",
+        name: 'exitPolicy',
-        label: t("Exit Policy"),
+        label: t('Exit Policy'),
-        type: "select",
+        type: 'select',
         options: [
           {
-            label: t("No"),
+            label: t('No'),
-            value: "no"
+            value: 'no',
           },
           {
-            label: t("On failure"),
+            label: t('On failure'),
-            value: "on-failure"
+            value: 'on-failure',
           },
           {
-            label: t("Always"),
+            label: t('Always'),
-            value: "always"
+            value: 'always',
           },
           {
-            label: t("Unless Stopped"),
+            label: t('Unless Stopped'),
-            value: "unless-stopped"
+            value: 'unless-stopped',
           },
         ],
         onChange: (val) => this.onExitPolicyChange(val),
         allowClear: true,
-        showSearch: true
+        showSearch: true,
       },
       {
-        name: "maxRetry",
+        name: 'maxRetry',
-        label: t("Max Retry"),
+        label: t('Max Retry'),
-        type: "input-number",
+        type: 'input-number',
         placeholder: t("Retry times for 'Restart on failure' policy"),
         min: 1,
-        disabled: this.state.isMaxRetry
+        disabled: this.state.isMaxRetry,
       },
       {
-        name: "enableAutoHeal",
+        name: 'enableAutoHeal',
-        label: t("Enable auto heal"),
+        label: t('Enable auto heal'),
-        type: "check"
+        type: 'check',
-      }
+      },
-    ]
+    ];
   }
 }
 
-export default inject('rootStore')(observer(StepSpec));
+export default inject('rootStore')(observer(StepSpec));

src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx

@@ -10,13 +10,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Base from "components/Form";
+import Base from 'components/Form';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import ZunVolume from "src/components/FormItem/ZunVolume";
+import ZunVolume from 'src/components/FormItem/ZunVolume';
-import globalVolumeStore from "src/stores/cinder/volume";
+import globalVolumeStore from 'src/stores/cinder/volume';
 
 export class StepVolumes extends Base {
-
   init() {
     this.globalVolumeStore = globalVolumeStore;
     this.getVolumeStore();
@@ -38,15 +37,18 @@ export class StepVolumes extends Base {
   get formItems() {
     return [
       {
-        name: "mounts",
+        name: 'mounts',
-        label: t("Type"),
+        label: t('Type'),
         type: 'add-select',
-        optionsType: [{ label: "Existing Cinder Volume", value: "cinder-available" }, { label: "New Cinder Volume", value: "cinder-new" }],
+        optionsType: [
+          { label: 'Existing Cinder Volume', value: 'cinder-available' },
+          { label: 'New Cinder Volume', value: 'cinder-new' },
+        ],
         optionsSource: this.cinderVolume,
         itemComponent: ZunVolume,
       },
-    ]
+    ];
   }
 }
 
-export default inject('rootStore')(observer(StepVolumes));
+export default inject('rootStore')(observer(StepVolumes));

src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx

@@ -10,38 +10,38 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { inject, observer } from 'mobx-react';
+import { StepAction } from 'src/containers/Action';
+import globalContainersStore from 'src/stores/zun/containers';
 import StepInfo from './StepInfo';
 import StepSpec from './StepSpec';
 import StepVolumes from './StepVolumes';
 import StepNetworks from './StepNetworks';
-import { inject, observer } from 'mobx-react';
 import StepMiscellaneous from './StepMiscellaneous';
-import { StepAction } from 'src/containers/Action';
-import globalContainersStore from 'src/stores/zun/containers';
 
 export class StepCreate extends StepAction {
   init() {
     this.store = globalContainersStore;
   }
 
-  static id = "create-container";
+  static id = 'create-container';
 
-  static title = t("Create Container (Step)");
+  static title = t('Create Container');
 
-  static path = "/container/containers/create";
+  static path = '/container/containers/create';
 
-  static policy = "container:container:create";
+  static policy = 'container:container:create';
 
   static allowed() {
     return Promise.resolve(true);
   }
 
   get name() {
-    return t("Create Container");
+    return t('Create Container');
   }
 
   get listUrl() {
-    return this.getRoutePath("containers");
+    return this.getRoutePath('zunContainers');
   }
 
   get hasConfirmStep() {
@@ -51,80 +51,91 @@ export class StepCreate extends StepAction {
   get steps() {
     return [
       {
-        title: t("Info"),
+        title: t('Info'),
-        component: StepInfo
+        component: StepInfo,
       },
       {
-        title: t("Spec"),
+        title: t('Spec'),
-        component: StepSpec
+        component: StepSpec,
       },
       {
-        title: t("Volumes"),
+        title: t('Volumes'),
-        component: StepVolumes
+        component: StepVolumes,
       },
       {
-        title: t("Network Config"),
+        title: t('Network Config'),
-        component: StepNetworks
+        component: StepNetworks,
       },
       {
-        title: t("Miscellaneous"),
+        title: t('Miscellaneous'),
-        component: StepMiscellaneous
+        component: StepMiscellaneous,
-      }
+      },
-    ]
+    ];
   }
 
   onSubmit = (values) => {
-    const { environmentVariables, labels, mounts } = values
+    const { environmentVariables, labels, mounts } = values;
 
     const requestEnviranment = {};
     const requestLabels = {};
     const requestValumes = [];
 
-    environmentVariables !== null ? environmentVariables.forEach((item) => {
+    environmentVariables !== undefined
-      const labelKey = item.value.key.toLowerCase().trim();
+      ? environmentVariables.forEach((item) => {
-      const labelValue = item.value.value.toLowerCase().trim();
+          const labelKey = item.value.key.toLowerCase().trim();
-      requestEnviranment[labelKey] = labelValue;
+          const labelValue = item.value.value.toLowerCase().trim();
-    }) : null;
+          requestEnviranment[labelKey] = labelValue;
+        })
+      : undefined;
 
-    labels !== null ? labels.forEach((item) => {
+    labels !== undefined
-      const key = item.value.key.toLowerCase().trim();
+      ? labels.forEach((item) => {
-      const value = item.value.value.toLowerCase().trim();
+          const key = item.value.key.toLowerCase().trim();
-      requestLabels[key] = value;
+          const value = item.value.value.toLowerCase().trim();
-    }) : null;
+          requestLabels[key] = value;
+        })
+      : undefined;
 
-    mounts !== null ? mounts.forEach((item) => {
+    mounts !== undefined
-      const destination = item.value.destination;
+      ? mounts.forEach((item) => {
-      const source = item.value.source;
+          const { destination } = item.value;
-      const type = item.value.type;
+          const { source } = item.value;
-      const cinderVolumeSize = item.value.cinderVolumeSize;
+          const { type } = item.value;
-      item.value.isCinderVolume !== true ? requestValumes.push({
+          const { cinderVolumeSize } = item.value;
-        destination: destination,
+          item.value.isCinderVolume !== true
-        source: source,
+            ? requestValumes.push({
-        type: type
+                destination,
-      }) : requestValumes.push({
+                source,
-        destination: destination,
+                type,
-        cinderVolumeSize: cinderVolumeSize,
+              })
-        type: type
+            : requestValumes.push({
-      })
+                destination,
-    }) : null;
+                cinderVolumeSize,
+                type,
+              });
+        })
+      : undefined;
 
     const networks = [];
     const securityGroups = [];
 
-    values.networkSelect.selectedRowKeys.forEach((item) => {
+    values.networkSelect &&
-      networks.push({ network: item })
+      values.networkSelect.selectedRowKeys.forEach((item) => {
-    })
+        networks.push({ network: item });
+      });
 
-    values.ports.selectedRowKeys.forEach((item) => {
+    values.ports &&
-      networks.push({ port: item })
+      values.ports.selectedRowKeys.forEach((item) => {
-    })
+        networks.push({ port: item });
+      });
 
-    values.securityGroup.selectedRowKeys.forEach((item) => {
+    values.securityGroup &&
-      securityGroups.push(item)
+      values.securityGroup.selectedRowKeys.forEach((item) => {
-    })
+        securityGroups.push(item);
+      });
 
     return this.store.create({
-      name: values.clusterName,
+      name: values.containerName,
       image: values.image,
       command: values.command,
       cpu: values.cpu,
@@ -133,8 +144,8 @@ export class StepCreate extends StepAction {
       labels: requestLabels,
       environment: requestEnviranment,
       restart_policy: {
-        Name: values.exitPolicy === null ? 'no' : values.exitPolicy,
+        Name: values.exitPolicy === undefined ? 'no' : values.exitPolicy,
-        MaximumRetryCount: values.maxRetry === null ? 0 : values.maxRetry,
+        MaximumRetryCount: values.maxRetry === undefined ? 0 : values.maxRetry,
       },
       interactive: values.enableInteractiveMode,
       image_driver: values.imageDriver,
@@ -146,8 +157,8 @@ export class StepCreate extends StepAction {
       availability_zone: values.availableZone,
       hints: values.hints,
       mounts: values.mounts,
-    })
+    });
-  }
+  };
 }
 
-export default inject('rootStore')(observer(StepCreate));
+export default inject('rootStore')(observer(StepCreate));

src/pages/container-service/containers/Containers/actions/Stop.jsx

@@ -15,19 +15,23 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class StopContainers extends ConfirmAction {
+export default class StopContainer extends ConfirmAction {
   get id() {
     return 'start';
   }
 
   get title() {
-    return t('Stop Container')
+    return t('Stop Container');
   }
 
   get actionName() {
     return t('Stop Container');
   }
 
+  get buttonText() {
+    return t('Stop');
+  }
+
   policy = 'container:container:stop';
 
   allowedCheckFunc = () => true;

src/pages/container-service/containers/Containers/actions/Unpause.jsx

@@ -15,19 +15,23 @@
 import { ConfirmAction } from 'containers/Action';
 import globalContainersStore from 'src/stores/zun/containers';
 
-export default class UnpauseContainers extends ConfirmAction {
+export default class UnpauseContainer extends ConfirmAction {
   get id() {
     return 'Unpause';
   }
 
   get title() {
-    return t('Unpause Container')
+    return t('Unpause Container');
   }
 
   get actionName() {
     return t('Unpause Container');
   }
 
+  get buttonText() {
+    return t('Unpause');
+  }
+
   policy = 'container:container:unpause';
 
   allowedCheckFunc = () => true;

src/pages/container-service/containers/Containers/actions/index.jsx

@@ -21,9 +21,9 @@ import UnpauseContainer from './Unpause';
 
 const actionConfigs = {
   rowActions: {
+    firstAction: DeleteContainer,
     moreActions: [
       { action: StartContainer },
-      { action: DeleteContainer },
       { action: StopContainer },
       { action: PauseContainer },
       { action: RebootContainer },

src/pages/container-service/containers/Containers/index.jsx

@@ -14,8 +14,9 @@
 
 import Base from 'containers/List';
 import { inject, observer } from 'mobx-react';
-import actionConfigs from './actions';
 import globalContainersStore from 'src/stores/zun/containers';
+import { containerStatus, containerTaskStatus } from 'resources/zun/container';
+import actionConfigs from './actions';
 
 export class Containers extends Base {
   init() {
@@ -44,13 +45,14 @@ export class Containers extends Base {
       title: t('ID/Name'),
       dataIndex: 'name',
       isLink: true,
-      routeName: this.getRouteName('containerDetail'),
+      routeName: this.getRouteName('zunContainerDetail'),
       idKey: 'uuid',
     },
     {
       title: t('Status'),
       isHideable: true,
       dataIndex: 'status',
+      render: (value) => containerStatus[value] || value,
     },
     {
       title: t('Image'),
@@ -61,8 +63,9 @@ export class Containers extends Base {
       title: t('Task State'),
       isHideable: true,
       dataIndex: 'task_state',
+      render: (value) => containerTaskStatus[value] || value,
     },
   ];
 }
 
-export default inject("rootStore")(observer(Containers))
+export default inject('rootStore')(observer(Containers));

src/pages/container-service/routes/index.js

@@ -28,7 +28,11 @@ export default [
     routes: [
       // Containers
       { path: `${PATH}/containers`, component: Containers, exact: true },
-      { path: `${PATH}/containers/create`, component: StepCreateContainer, exact: true },
+      {
+        path: `${PATH}/containers/create`,
+        component: StepCreateContainer,
+        exact: true,
+      },
       {
         path: `${PATH}/containers/detail/:id`,
         component: ContainersDetail,

src/resources/zun/capsule.js

@@ -0,0 +1,8 @@
+export const capsuleStatus = {
+  Creating: t('Creating'),
+  Pending: t('Pending'),
+  Running: t('Running'),
+  Succeeded: t('Succeeded'),
+  Failed: t('Failed'),
+  Unknown: t('Unknown'),
+};

src/resources/zun/container.js

@@ -0,0 +1,18 @@
+export const containerStatus = {
+  Creating: t('Creating'),
+  Created: t('Created'),
+  Running: t('Running'),
+  Stopped: t('Stopped'),
+  Paused: t('Paused'),
+  Restarting: t('Restarting'),
+  Deleting: t('Deleting'),
+};
+
+export const containerTaskStatus = {
+  null: t('No Task'),
+  container_creating: t('Container Creating'),
+  container_starting: t('Container Starting'),
+  container_stopping: t('Container Stopping'),
+  container_rebooting: t('Container Rebooting'),
+  container_deleting: t('Container Deleting'),
+};

src/stores/zun/containers.js

@@ -58,4 +58,4 @@ export class ContainersStore extends Base {
 }
 
 const globalContainersStore = new ContainersStore();
-export default globalContainersStore;
+export default globalContainersStore;