fix: Zun code adjustment

1. code formatting problem 2. delete capsule problem 3. create container problem Change-Id: If458dd8c3b0114573512984792f51b6b883a3c8a
2022-05-30 14:06:03 +08:00 · 2022-05-30 14:06:03 +08:00 · e740c89b9c
commit e740c89b9c
parent 2fd46f588c
29 changed files with 398 additions and 300 deletions
--- a/src/layouts/menu.jsx
+++ b/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'),
-              key: 'containersDetail',
+              name: t('Container Detail'),
+              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'),
-              key: 'capsulesDetail',
+              name: t('Capsule Detail'),
+              key: 'zunCapsuleDetail',
              level: 2,
              routePath: '/container/capsules/detail/:id',
            },
--- a/src/locales/en.json
+++ b/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",
--- a/src/locales/zh.json
+++ b/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": "苏里南",
--- a/src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx
+++ b/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>
-                <b>Name</b> : {it.name} <br /> <b>Container ID</b> : {it.uuid}
-              </React.Fragment>
+              <div key={it.uuid}>
+                <b>{t('Name')}</b> : {it.name}
+                <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));
--- a/src/pages/container-service/containers/Capsules/Detail/index.jsx
+++ b/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));
--- a/src/pages/container-service/containers/Capsules/actions/Create.jsx
+++ b/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));
--- a/src/pages/container-service/containers/Capsules/actions/Delete.jsx
+++ b/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))
--- a/src/pages/container-service/containers/Capsules/actions/index.jsx
+++ b/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],
 };

--- a/src/pages/container-service/containers/Capsules/index.jsx
+++ b/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));
--- a/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx
+++ b/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));
--- a/src/pages/container-service/containers/Containers/Detail/index.jsx
+++ b/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));
--- a/src/pages/container-service/containers/Containers/actions/Delete.jsx
+++ b/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) =>
-    globalContainersStore.delete({ id: data.uuid });
+  onSubmit = (data) => globalContainersStore.delete({ id: data.uuid });
 }
--- a/src/pages/container-service/containers/Containers/actions/Pause.jsx
+++ b/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;
--- a/src/pages/container-service/containers/Containers/actions/Reboot.jsx
+++ b/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;
--- a/src/pages/container-service/containers/Containers/actions/Start.jsx
+++ b/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;
--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepInfo/index.jsx
@ -10,58 +10,58 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import Base from "components/Form";
-import { inject, observer } from "mobx-react";
+import Base from 'components/Form';
+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",
-        label: t("Cluster Name"),
-        type: "input",
-        placeholder: t("Cluster Name"),
-        required: true
+        name: 'containerName',
+        label: t('Container Name'),
+        type: 'input',
+        placeholder: t('Container Name'),
+        required: true,
      },
      {
-        name: "image",
-        label: t("Image"),
-        type: "input",
-        placeholder: t("Name or ID og the container image"),
-        required: true
+        name: 'image',
+        label: t('Image'),
+        type: 'input',
+        placeholder: t('Name or ID og the container image'),
+        required: true,
      },
      {
-        name: "imageDriver",
-        label: t("Image Driver"),
-        placeholder: t("Image Driver"),
-        type: "select",
+        name: 'imageDriver',
+        label: t('Image Driver'),
+        placeholder: t('Image Driver'),
+        type: 'select',
        options: [
          {
-            label: t("Docker"),
-            value: "docker"
+            label: t('Docker'),
+            value: 'docker',
          },
          {
-            label: t("Glance"),
-            value: "glance"
-          }
+            label: t('Glance'),
+            value: 'glance',
+          },
        ],
-        allowClear: true
+        allowClear: true,
      },
      {
-        name: "command",
-        label: t("Command"),
-        type: "input",
-        placeholder: t("A command that will be sent to the container"),
+        name: 'command',
+        label: t('Command'),
+        type: 'input',
+        placeholder: t('A command that will be sent to the container'),
      },
-    ]
+    ];
  }
 }

--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx
+++ b/src/pages/container-service/containers/Containers/actions/StepCreate/StepMiscellaneous/index.jsx
@ -10,61 +10,60 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import Base from "components/Form";
-import { inject, observer } from "mobx-react";
+import Base from 'components/Form';
+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",
-        label: t("Working Directory"),
-        type: "input",
-        placeholder: t("The working directory for commands to run in")
+        name: 'workingDirectory',
+        label: t('Working Directory'),
+        type: 'input',
+        placeholder: t('The working directory for commands to run in'),
      },
      {
-        name: "environmentVariables",
-        label: t("Environment Variables"),
+        name: 'environmentVariables',
+        label: t('Environment Variables'),
        type: 'add-select',
        itemComponent: KeyValueInput,
        addText: t('Add Environment Variable'),
      },
      {
-        name: "enableInteractiveMode",
-        label: t("Enable interactive mode"),
-        type: "check"
+        name: 'enableInteractiveMode',
+        label: t('Enable interactive mode'),
+        type: 'check',
      },
      {
-        type: "divider"
+        type: 'divider',
      },
      {
-        name: "labels",
-        label: t("Labels"),
+        name: 'labels',
+        label: t('Labels'),
        type: 'add-select',
        itemComponent: KeyValueInput,
        addText: t('Add Label'),
      },
      {
-        type: "divider"
+        type: 'divider',
      },
      {
-        name: "hints",
-        label: t("Scheduler Hints"),
-        type: "select",
-        mode: "tags",
-        placeholder: t("Type to Scheduler Hints and press enter")
-      }
-    ]
+        name: 'hints',
+        label: t('Scheduler Hints'),
+        type: 'select',
+        mode: 'tags',
+        placeholder: t('Type to Scheduler Hints and press enter'),
+      },
+    ];
  }
 }

--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx
+++ b/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 { inject, observer } from "mobx-react";
+import Base from 'components/Form';
+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,9 +77,9 @@ export class StepNetworks extends Base {
        extraParams: { project_id: this.currentProjectId },
        columns: securityGroupColumns,
        filterParams: securityGroupFilter,
-        isMulti: true
-      }
-    ]
+        isMulti: true,
+      },
+    ];
  }
 }

--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepSpec/index.jsx
+++ b/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 { inject, observer } from "mobx-react";
-import globalAvailabilityZoneStore from "src/stores/nova/zone";
+import Base from 'components/Form';
+import { inject, observer } from 'mobx-react';
+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,95 +42,95 @@ 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",
-        label: t("Hostname"),
-        type: "input",
-        placeholder: t("The host name of this container"),
+        name: 'hostname',
+        label: t('Hostname'),
+        type: 'input',
+        placeholder: t('The host name of this container'),
      },
      {
-        name: "runtime",
-        label: t("Runtime"),
-        type: "input",
-        placeholder: t("The runtime to create container with"),
+        name: 'runtime',
+        label: t('Runtime'),
+        type: 'input',
+        placeholder: t('The runtime to create container with'),
      },
      {
-        name: "cpu",
-        label: t("CPU"),
-        type: "input-number",
-        placeholder: t("The number of virtual cpu for this container"),
+        name: 'cpu',
+        label: t('CPU'),
+        type: 'input-number',
+        placeholder: t('The number of virtual cpu for this container'),
        min: 1,
-        width: 300
+        width: 300,
      },
      {
-        name: "memory",
-        label: t("Memory"),
-        type: "input-number",
-        placeholder: t("The container memory size in MiB"),
+        name: 'memory',
+        label: t('Memory'),
+        type: 'input-number',
+        placeholder: t('The container memory size in MiB'),
        min: 4,
-        width: 300
+        width: 300,
      },
      {
-        name: "disk",
-        label: t("Disk"),
-        type: "input-number",
-        placeholder: t("The disk size in GİB for per container"),
+        name: 'disk',
+        label: t('Disk'),
+        type: 'input-number',
+        placeholder: t('The disk size in GİB for per container'),
        min: 1,
-        width: 300
+        width: 300,
      },
      {
-        name: "availableZone",
-        label: t("Availability Zone"),
-        type: "select",
+        name: 'availableZone',
+        label: t('Availability Zone'),
+        type: 'select',
        options: this.getAvailabilityZoneList,
        allowClear: true,
-        showSearch: true
+        showSearch: true,
      },
      {
-        name: "exitPolicy",
-        label: t("Exit Policy"),
-        type: "select",
+        name: 'exitPolicy',
+        label: t('Exit Policy'),
+        type: 'select',
        options: [
          {
-            label: t("No"),
-            value: "no"
+            label: t('No'),
+            value: 'no',
          },
          {
-            label: t("On failure"),
-            value: "on-failure"
+            label: t('On failure'),
+            value: 'on-failure',
          },
          {
-            label: t("Always"),
-            value: "always"
+            label: t('Always'),
+            value: 'always',
          },
          {
-            label: t("Unless Stopped"),
-            value: "unless-stopped"
+            label: t('Unless Stopped'),
+            value: 'unless-stopped',
          },
        ],
        onChange: (val) => this.onExitPolicyChange(val),
        allowClear: true,
-        showSearch: true
+        showSearch: true,
      },
      {
-        name: "maxRetry",
-        label: t("Max Retry"),
-        type: "input-number",
+        name: 'maxRetry',
+        label: t('Max Retry'),
+        type: 'input-number',
        placeholder: t("Retry times for 'Restart on failure' policy"),
        min: 1,
-        disabled: this.state.isMaxRetry
+        disabled: this.state.isMaxRetry,
      },
      {
-        name: "enableAutoHeal",
-        label: t("Enable auto heal"),
-        type: "check"
-      }
-    ]
+        name: 'enableAutoHeal',
+        label: t('Enable auto heal'),
+        type: 'check',
+      },
+    ];
  }
 }

--- a/src/pages/container-service/containers/Containers/actions/StepCreate/StepVolumes/index.jsx
+++ b/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 { inject, observer } from "mobx-react";
-import ZunVolume from "src/components/FormItem/ZunVolume";
-import globalVolumeStore from "src/stores/cinder/volume";
+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';

 export class StepVolumes extends Base {
-
  init() {
    this.globalVolumeStore = globalVolumeStore;
    this.getVolumeStore();
@ -38,14 +37,17 @@ export class StepVolumes extends Base {
  get formItems() {
    return [
      {
-        name: "mounts",
-        label: t("Type"),
+        name: 'mounts',
+        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,
      },
-    ]
+    ];
  }
 }

--- a/src/pages/container-service/containers/Containers/actions/StepCreate/index.jsx
+++ b/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"),
-        component: StepInfo
+        title: t('Info'),
+        component: StepInfo,
      },
      {
-        title: t("Spec"),
-        component: StepSpec
+        title: t('Spec'),
+        component: StepSpec,
      },
      {
-        title: t("Volumes"),
-        component: StepVolumes
+        title: t('Volumes'),
+        component: StepVolumes,
      },
      {
-        title: t("Network Config"),
-        component: StepNetworks
+        title: t('Network Config'),
+        component: StepNetworks,
      },
      {
-        title: t("Miscellaneous"),
-        component: StepMiscellaneous
-      }
-    ]
+        title: t('Miscellaneous'),
+        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
+      ? environmentVariables.forEach((item) => {
          const labelKey = item.value.key.toLowerCase().trim();
          const labelValue = item.value.value.toLowerCase().trim();
          requestEnviranment[labelKey] = labelValue;
-    }) : null;
+        })
+      : undefined;

-    labels !== null ? labels.forEach((item) => {
+    labels !== undefined
+      ? labels.forEach((item) => {
          const key = item.value.key.toLowerCase().trim();
          const value = item.value.value.toLowerCase().trim();
          requestLabels[key] = value;
-    }) : null;
-
-    mounts !== null ? mounts.forEach((item) => {
-      const destination = item.value.destination;
-      const source = item.value.source;
-      const type = item.value.type;
-      const cinderVolumeSize = item.value.cinderVolumeSize;
-      item.value.isCinderVolume !== true ? requestValumes.push({
-        destination: destination,
-        source: source,
-        type: type
-      }) : requestValumes.push({
-        destination: destination,
-        cinderVolumeSize: cinderVolumeSize,
-        type: type
        })
-    }) : null;
+      : 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 securityGroups = [];

+    values.networkSelect &&
      values.networkSelect.selectedRowKeys.forEach((item) => {
-      networks.push({ network: item })
-    })
+        networks.push({ network: item });
+      });

+    values.ports &&
      values.ports.selectedRowKeys.forEach((item) => {
-      networks.push({ port: item })
-    })
+        networks.push({ port: item });
+      });

+    values.securityGroup &&
      values.securityGroup.selectedRowKeys.forEach((item) => {
-      securityGroups.push(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,
-        MaximumRetryCount: values.maxRetry === null ? 0 : values.maxRetry,
+        Name: values.exitPolicy === undefined ? 'no' : values.exitPolicy,
+        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));
--- a/src/pages/container-service/containers/Containers/actions/Stop.jsx
+++ b/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;
--- a/src/pages/container-service/containers/Containers/actions/Unpause.jsx
+++ b/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;
--- a/src/pages/container-service/containers/Containers/actions/index.jsx
+++ b/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 },
--- a/src/pages/container-service/containers/Containers/index.jsx
+++ b/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));
--- a/src/pages/container-service/routes/index.js
+++ b/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,
--- a/src/resources/zun/capsule.js
+++ b/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'),
+};
--- a/src/resources/zun/container.js
+++ b/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'),
+};