fix: Fix word spell

1. Add eslint plugin spellcheck to check word spell 2. Fix word spell Change-Id: I73d39cf797ef5bdf993b0154816134a1e93f2ed4
2022-01-17 17:17:30 +08:00 · 2022-01-17 17:17:30 +08:00 · f81ac5651a
commit f81ac5651a
parent 6e5ffc72fb
167 changed files with 607 additions and 577 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,7 +1,13 @@
 {
-  "extends": ["airbnb", "plugin:prettier/recommended"],
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
  "parser": "babel-eslint",
-  "plugins": ["cypress"],
+  "plugins": [
+    "cypress",
+    "spellcheck"
+  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
@ -21,21 +27,63 @@
    "import/resolver": {
      "alias": {
        "map": [
-          ["@", "./src"],
-          ["src", "./src"],
-          ["image", "./src/asset/image"],
-          ["components", "./src/components"],
-          ["utils", "./src/utils"],
-          ["stores", "./src/stores"],
-          ["pages", "./src/pages"],
-          ["containers", "./src/containers"],
-          ["layouts", "./src/layouts"],
-          ["client", "./src/client"],
-          ["resources", "./src/resources"],
-          ["core", "./src/core"],
-          ["asset", "./src/asset"]
+          [
+            "@",
+            "./src"
+          ],
+          [
+            "src",
+            "./src"
+          ],
+          [
+            "image",
+            "./src/asset/image"
+          ],
+          [
+            "components",
+            "./src/components"
+          ],
+          [
+            "utils",
+            "./src/utils"
+          ],
+          [
+            "stores",
+            "./src/stores"
+          ],
+          [
+            "pages",
+            "./src/pages"
+          ],
+          [
+            "containers",
+            "./src/containers"
+          ],
+          [
+            "layouts",
+            "./src/layouts"
+          ],
+          [
+            "client",
+            "./src/client"
+          ],
+          [
+            "resources",
+            "./src/resources"
+          ],
+          [
+            "core",
+            "./src/core"
+          ],
+          [
+            "asset",
+            "./src/asset"
+          ]
        ],
-        "extensions": [".js", ".jsx"]
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
      }
    }
  },
@ -69,7 +117,21 @@
    "import/prefer-default-export": "off",
    "no-nested-ternary": "warn",
    "import/no-named-as-default": "warn",
-    "global-require": "off"
+    "global-require": "off",
+    "spellcheck/spell-checker": [
+      "warn",
+      {
+        "comments": true,
+        "strings": true,
+        "identifiers": true,
+        "templates": true,
+        "lang": "en_US",
+        "skipWords": [],
+        "skipIfMatch": [],
+        "skipWordIfMatch": [],
+        "minLength": 3
+      }
+    ]
  },
  "globals": {
    "t": true,
@ -77,4 +139,4 @@
    "request": true,
    "METRICDICT": true
  }
-}
+}
--- a/docs/en/develop/2-catalog-introduction.md
+++ b/docs/en/develop/2-catalog-introduction.md
@ -187,7 +187,7 @@ English | [Chinese](../../zh/develop/2-catalog-introduction.md)
 │   │   │   │   │   ├── Hypervisor  (Hypervisor manager)
 │   │   │   │   │   └── index.jsx
 │   │   │   │   ├── Image   (Image)
-│   │   │   │   ├── Instance    (Intance)
+│   │   │   │   ├── Instance    (Instance)
 │   │   │   │   │   ├── Detail  (Detail page)
 │   │   │   │   │   │   ├── BaseDetail  (Base info)
 │   │   │   │   │   │   ├── SecurityGroup   (Security group)
@ -279,7 +279,7 @@ English | [Chinese](../../zh/develop/2-catalog-introduction.md)
 │   │   ├── identity    (Identity management)
 │   │   │   ├── App.jsx
 │   │   │   ├── containers
-│   │   │   │   ├── Domain  (Domian)
+│   │   │   │   ├── Domain  (Domain)
 │   │   │   │   ├── Project (Project)
 │   │   │   │   ├── Role    (Role)
 │   │   │   │   ├── User    (User)
--- a/docs/en/develop/3-10-FormItem-introduction.md
+++ b/docs/en/develop/3-10-FormItem-introduction.md
@ -5,7 +5,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
 - Configuration of each form item in the form
 - Generally only need to configure a little amount of parameters such as `type`
 - `Form` component will verify the input value base on `formItem` configuration
- When verify faild, `Form` will not allowed to click `confirm` or `next`
+- When verify failed, `Form` will not allowed to click `confirm` or `next`

 # How to use

@ -199,7 +199,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
      };
      ```

-      - Take attach volumn as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
+      - Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :

        ```javascript
        {
@ -392,7 +392,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)

      ![select-table](../../zh/develop/images/form/select-table.png)

-    - Take create volumn as an example `src/pages/storage/containers/Volume/actions/Create/index.jsx` :
+    - Take create volume as an example `src/pages/storage/containers/Volume/actions/Create/index.jsx` :
      - This is a table with tab, default to show the first tab, when switching tab, data source will change
      - Data is acquired by the front end paging, just directly configure the `data`
      - Not multi selected
@ -464,8 +464,8 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)

  - `instance-volume`
    - Insatnce volume configuration component
-    - `options`, volumn types options
-    - `minSize`, volumn size input min
+    - `options`, volume types options
+    - `minSize`, volume size input min
    - Take configure system disk when create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx` :

      ```javascript
@ -517,8 +517,8 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
    - `isFile`, verify name in file format
    - `isKeypair`, verify name with key-pair support
    - `isStack`, verify name with stack supported
-    - `isImage`, verify name with image suppport
-    - `isInstance`, verify name with instance suppport
+    - `isImage`, verify name with image support
+    - `isInstance`, verify name with instance support
    - Take set name when create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx` :

      ```javascript
@ -566,7 +566,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)

  - `textarea`
    - textarea
-    - Take set description when edit volumn as an example `src/pages/storage/containers/Volume/actions/Edit.jsx` :
+    - Take set description when edit volume as an example `src/pages/storage/containers/Volume/actions/Edit.jsx` :

      ```javascript
      {
@ -602,7 +602,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
    - `addText`, the text on the right side of add item button component
    - `addTextTips`, if has `maxCount`, the text will update with count
    - Take set data disk when create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx` :
-      - can set unlimit number of data disk
+      - can set unlimited number of data disk

      ```javascript
      {
@ -719,7 +719,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
    - `min`, min value
    - `max`, max value
    - `description`, description under slider
-    - Take set size when create volumn as an example `src/pages/storage/containers/Volume/actions/Create/index.jsx` :
+    - Take set size when create volume as an example `src/pages/storage/containers/Volume/actions/Create/index.jsx` :

      ```javascript
      {
@ -775,7 +775,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
  - `check`
    - checkbox
    - `content`, words on the right side of the box
-    - Take whether to force shutodown instancen when resizing instance as an example `src/pages/compute/containers/Instance/actions/Resize.jsx` :
+    - Take whether to force shutdown instance when resizing instance as an example `src/pages/compute/containers/Instance/actions/Resize.jsx` :

      ```javascript
      {
@ -796,7 +796,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
    - `dataSource`, data source for choose
    - `showSearch`, whether to show search input
    - `oriTargetKeys`, default selected
-    - `disabled`, whether to disable selecte data in left table, default is `false`
+    - `disabled`, whether to disable select data in left table, default is `false`
    - Take edit system role as an example `src/pages/identity/containers/User/actions/SystemRole.jsx` :
      - Left is the project name list
      - Right is the project name and role list of project
@ -897,7 +897,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)

  - `network-select-table`
    - network selector
-    - Display current project network, shared networ, admin network(if is admin) in tabs.
+    - Display current project network, shared network, admin network(if is admin) in tabs.
    - Take set network when create port as an example `src/pages/network/containers/VirtualAdapter/actions/Create.jsx` :

      ```javascript
@ -916,7 +916,7 @@ English | [简体中文](../../zh/develop/3-10-FormItem-introduction.md)
    - volume selector
    - Display volumes that can be used or is shared in tabs.
    - `disabledFunc`, which volume can not be selected
-    - Take attach volumn as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
+    - Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :

      ```javascript
      {
--- a/docs/en/develop/3-13-Route-introduction.md
+++ b/docs/en/develop/3-13-Route-introduction.md
@ -26,7 +26,7 @@ English | [简体中文](../../zh/develop/3-13-Route-introduction.md)
    - `component`, layout components
      - Pages about `auth`, for example `login`, use `src/layouts/User/index.jsx`
      - Pages show after login, for example `instance`, use `src/layouts/Base/index.jsx`
-        - The layout automatically handles the display of the `menu item`, the right side of the content `header`, `breadcrumber`, etc.
+        - The layout automatically handles the display of the `menu item`, the right side of the content `header`, `breadcrumb`, etc.
    - `routes`, The main content of the configuration is an array.
      - Take compute route as an example `src/pages/compute/routes/index.js` :

@ -38,7 +38,7 @@ English | [简体中文](../../zh/develop/3-13-Route-introduction.md)
      - `component`, the component corresponding to page, such as component under `containers`

 - For resource-type pages, generally configured
-  - List page, details page, complex creat page in console platform (simple creation generally uses modal)
+  - List page, details page, complex create page in console platform (simple creation generally uses modal)
  - List page, detail page in management platform (with `-admin`/`_admin` in path)
  - For detail page, we recommend using `id`
  - Take instance as an example `src/pages/compute/routes/index.js`
--- a/docs/en/develop/3-14-I18n-introduction.md
+++ b/docs/en/develop/3-14-I18n-introduction.md
@ -36,7 +36,7 @@ English | [简体中文](../../zh/develop/3-14-I18n-introduction.md)
  yarn run i18n
  ```

-  - After colleced, `en.json` and `zh.json` will automatically update.
+  - After collect, `en.json` and `zh.json` will automatically update.

 - Update Chinese
-  - After colleced, just update directly in `zh.json`.
+  - After collect, just update directly in `zh.json`.
--- a/docs/en/develop/3-7-ModalAction-introduction.md
+++ b/docs/en/develop/3-7-ModalAction-introduction.md
@ -6,7 +6,7 @@ English | [简体中文](../../zh/develop/3-7-ModalAction-introduction.md)

 - After click the action button, the form modal will display.
 - After click the `Confirm` button, the `loading` status will be displayed according to the status of request.
- After click the `Cancle` button, the modal form will disappear.
+- After click the `Cancel` button, the modal form will disappear.
 - If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.
 - If the request fails, an error message will be displayed in the upper right corner of the form page, which can only disappear after clicking the close button.
 - Support batch action, after selecting multiple items in the table, you can click the action button above the table to perform batch action.
@ -214,7 +214,7 @@ English | [简体中文](../../zh/develop/3-7-ModalAction-introduction.md)
    - Such as the `required` attribute change of some form items
  - By default, the change of form item which `type` is `radio` or `more` will automaticly save to `this.state`
  - Take attach interface to instance as an example `src/pages/compute/containers/Instance/actions/AttachInterface.jsx` :
-    - After selecte network in the form, the content of the subnet list will be updated
+    - After select network in the form, the content of the subnet list will be updated
    - However, after select the subnet in the form, the judgment of the input IP will be updated, etc.

    ```javascript
--- a/docs/en/develop/3-8-ConfirmAction-introduction.md
+++ b/docs/en/develop/3-8-ConfirmAction-introduction.md
@ -6,7 +6,7 @@ English | [简体中文](../../zh/develop/3-8-ConfirmAction-introduction.md)

 - After click the action button, the confirm modal will display.
 - After click the `Confirm` button, the `loading` status will be displayed according to the status of request.
- After click the `Cancle` button, the modal form will disappear.
+- After click the `Cancel` button, the modal form will disappear.
 - If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.
 - If the request fails, an error message will be displayed in the upper right corner of the form page, which can only disappear after clicking the close button.
 - Support batch action, after selecting multiple items in the table, you can click the action button above the table to perform batch action.
--- a/docs/en/develop/3-9-StepAction-introduction.md
+++ b/docs/en/develop/3-9-StepAction-introduction.md
@ -8,7 +8,7 @@ English | [简体中文](../../zh/develop/3-9-StepAction-introduction.md)
 - Has it own route to visit
 - Generally used to create resources, or form with lots of form items
 - Support `Next Step`, `Previous Step` action button
- After click the `Cancle` button, will automatically jump to the corresponding resource list page
+- After click the `Cancel` button, will automatically jump to the corresponding resource list page
 - If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.

  ![FormOneStep](../../zh/develop/images/form/create-success.png)
--- a/docs/en/test/2-catalog-introduction.md
+++ b/docs/en/test/2-catalog-introduction.md
@ -24,7 +24,7 @@ test
 │   │       │   ├── keypair.spec.js (keypair)
 │   │       │   └── server-group.spec.js    (server group)
 │   │       ├── configuration   (Platform configuration)
-│   │       │   ├── metadata.spec.js   (metedata)
+│   │       │   ├── metadata.spec.js   (metadata)
 │   │       │   └── system.spec.js  (system info)
 │   │       ├── error.spec.js   (error page)
 │   │       ├── heat    (heat)
--- a/docs/en/test/3-0-how-to-edit-e2e-case.md
+++ b/docs/en/test/3-0-how-to-edit-e2e-case.md
@ -48,13 +48,13 @@ Generally, when testing the corresponding functions of a resource, follow the fo
     cy.createRouter({ name: routerName, network: networkName });
     ```

-   - Create floating ip`cy.createFip`，Used to test associat floating ip
+   - Create floating ip`cy.createFip`，Used to test associate floating ip

     ```javascript
     cy.createFip();
     ```

-   - Create volumr `cy.createVolume`(Used to test attach volume)
+   - Create volume `cy.createVolume`(Used to test attach volume)

     ```javascript
     cy.createVolume(volumeName);
--- a/docs/en/test/3-1-E2E-form-operation.md
+++ b/docs/en/test/3-1-E2E-form-operation.md
@ -24,7 +24,7 @@ Because of the consistency of the front-end framework, when we write related use
  ![click-form-submit](images/e2e/form/click-form-submit.png)

 - `clickModalActionSubmitButton`
-  - Click the confirma button in the pop-up form and wait for the request to complete
+  - Click the confirm button in the pop-up form and wait for the request to complete

  ![click-modal-submit](images/e2e/form/click-modal-submit.png)

@ -170,7 +170,7 @@ Looking at the structure and style of the elements through the page, I found tha
  - check `checkbox` in form
  - Parameter `formItemName`, which is the `name` value of `formItem` in the development code
  - Parameter `index`, default `0`
-  - Take instance resize `test/e2e/integration/pages/compute/instance.spec.js` as an enample
+  - Take instance resize `test/e2e/integration/pages/compute/instance.spec.js` as an example

    ```javascript
    it('successfully resize', () => {
@ -248,7 +248,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully attach volume', () => {
-      // prepair volume
+      // prepare volume
      cy.visitPage(listUrl)
        .tableSearchText(name)
        .clickActionInMoreSub('Attach Volume', 'Related Resources')
@ -279,7 +279,7 @@ Looking at the structure and style of the elements through the page, I found tha
    - Select Volume that status is in used

    ```javascript
-    it('successfully create full bakcup', () => {
+    it('successfully create full backup', () => {
      cy.clickHeaderButton(1, 5000)
        .formInput('name', name)
        .formTableSelectBySearch('volume', volumeName)
@ -397,7 +397,7 @@ Looking at the structure and style of the elements through the page, I found tha
 - `formAddSelectAdd`
  - Operations on form item of AddSelect type
  - Parameter `formItemName`, which is the `name` value of `formItem` in the development code
-  - Take the Host Aggregates management metedata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`
+  - Take the Host Aggregates management metadata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`

    ```javascript
    it('successfully manage metadata', () => {
@ -521,7 +521,7 @@ Looking at the structure and style of the elements through the page, I found tha
  - Parameter `formItemName`, which is the `name` value of `formItem` in the development code
  - Parameter `key`, the content of input on the left
  - Parameter `value`, the content of input on the right
-  - Take the Host Aggregates management metedata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`
+  - Take the Host Aggregates management metadata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`

    ```javascript
    it('successfully manage metadata', () => {
@ -543,7 +543,7 @@ Looking at the structure and style of the elements through the page, I found tha
    2. Click the direction button in the middle of the transfer to make the selected content enter the transfer on the right
  - Parameter `formItemName`, which is the `name` value of `formItem` in the development code
  - Parameter `index`, the index of the node
-  - Take the Host Aggregates management metedata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`
+  - Take the Host Aggregates management metadata add custom metadata as an example: `test/e2e/integration/pages/compute/aggregate.spec.js`

    ```javascript
    it('successfully manage metadata', () => {
@ -560,8 +560,8 @@ Looking at the structure and style of the elements through the page, I found tha
    ![transfer-left-click](images/e2e/form/transfer-left-click.png)

 - `formTransferRightCheck`
-  - Operation of the transfer on the rigth
-    1. Select the specified item in the transfer on the rigth
+  - Operation of the transfer on the right
+    1. Select the specified item in the transfer on the right
    2. Click the direction button in the middle of the transfer to make the selected content enter the transfer on the left
  - Parameter `formItemName`, which is the `name` value of `formItem` in the development code
  - Parameter `index`, the index of the transfer table item
--- a/docs/en/test/3-2-E2E-table-operation.md
+++ b/docs/en/test/3-2-E2E-table-operation.md
@ -296,7 +296,7 @@ The buttons above the table generally include: refresh, create, batch operation
  - Parameter `buttonIndex`, the subscript of the button above the table
  - Parameter `waitTime`, the waiting time after clicking, the default is 2 seconds
  - Generally, the subscript of the created button is 1
-  - Take the creat key pair as an example: `test/e2e/integration/pages/compute/keypair.spec.js`
+  - Take the create key pair as an example: `test/e2e/integration/pages/compute/keypair.spec.js`

  ```javascript
  it('successfully create', () => {
@ -517,7 +517,7 @@ The buttons above the table generally include: refresh, create, batch operation
    2. Click the `Confirm` button, and wait for the request to complete, close the prompt message that the request is successful
  - Parameter `title`, specify the name of the operation
  - Parameter `waitTime`, the waiting time after closing the operation prompt successfully
-  - Take delet VPN IPsec policy `test/e2e/integration/pages/compute/server-group.spec.js` as an example
+  - Take delete VPN IPsec policy `test/e2e/integration/pages/compute/server-group.spec.js` as an example

    ```javascript
    it('successfully delete ipsec policy', () => {
--- a/docs/en/test/3-4-E2E-resource-operation.md
+++ b/docs/en/test/3-4-E2E-resource-operation.md
@ -7,13 +7,13 @@ In the E2E process, when creating a resource, it is often necessary to create th
  - Parameter `name`, the name of the instance
  - Parameter `networkName`, the network name selected when the instance was created
  - Take the floating IP associated instance as an example: `test/e2e/integration/pages/network/floatingip.spec.js`
-    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interfae is located must have a public network gateway turned on
+    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interface is located must have a public network gateway turned on
      1. Create a network `networkName` with subnet
      2. Create a router `routerName` with the public network gateway turned on and connected to the network `networkName` subnet
-      3. Create a instance `instanceName` with a interfae on the network `networkName`
+      3. Create a instance `instanceName` with a interface on the network `networkName`

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -28,7 +28,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - Created a network named `networkName` in preparation for connecting to subnets

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
    });
    ```
@ -40,7 +40,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - Created a policy named `policyName` in preparation for modifying QoS

    ```javascript
-    it('successfully prepair resource by admin', () => {
+    it('successfully prepare resource by admin', () => {
      cy.loginAdmin().wait(5000).createNetworkPolicy({ name: policyName });
    });
    ```
@ -51,13 +51,13 @@ In the E2E process, when creating a resource, it is often necessary to create th
  - Parameter `network`
    - If set, the router will connect to the subnet of the `network` network
  - Take the floating IP associated instance as an example: `test/e2e/integration/pages/network/floatingip.spec.js`
-    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interfae is located must have a public network gateway turned on
+    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interface is located must have a public network gateway turned on
      1. Create a network `networkName` with subnets
      2. Create a router `routerName` with the public network gateway turned on and connected to the network `networkName` subnet
-      3. Create a instance `instanceName` with a interfae on the network `networkName` 
+      3. Create a instance `instanceName` with a interface on the network `networkName` 

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -71,7 +71,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
  - Parameter `name`, the name of the router

  - Take the floating IP to delete the associated resource as an example: `test/e2e/integration/pages/network/floatingip.spec.js`
-    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interfae is located must have a public network gateway turned on
+    - In order to successfully associate with the instance, the router connected to the subnet where the instance's interface is located must have a public network gateway turned on

    ```javascript
    it('successfully delete related resources', () => {
@ -109,23 +109,23 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - To create a volume backup, you need to prepare the volume first

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createVolume(volumeName);
      cy.createNetwork({ name: networkName });
      cy.createInstance({ name: instanceName, networkName });
    });
    ```

- `createSecurityGrouop`
+- `createSecurityGroup`
  - Create a security group
  - Parameter `name`, the name of the security group
  - Take the virtual adapter card as an example: `test/e2e/integration/pages/network/virtual-adapter.spec.js`
     -To test management security group, you need to prepare the security group first

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createFip();
-      cy.createSecurityGrouop({ name: securityGroupName });
+      cy.createSecurityGroup({ name: securityGroupName });
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -138,7 +138,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - Test associate floating IP, you need to prepare reachable floating IP

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createFip();
@ -153,7 +153,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - To test management user group, you need to prepare the user group

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createUser({ name: username });
      cy.createUserGroup({ name: userGroupName });
    });
@ -166,7 +166,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - To test management user,  you need to prepare user

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createUser({ name: username });
      cy.createUserGroup({ name: userGroupName });
    });
@ -180,7 +180,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
    - To test management project permission， need to prepare project

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createProject({ name: projectName });
      cy.createProject({ name: projectName2 });
      cy.createUserGroup({ name: userGroupName });
@ -194,7 +194,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
     - Create a ironic, image need to be able to create a ironic

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createFip();
@ -232,7 +232,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
  - Delete qualified resources
  - Parameter `resourceName`, resource name

-    ```javacript
+    ```javascript
    export default {
      // compute
      instance: instanceListUrl,
--- a/docs/zh/test/3-1-E2E-form-operation.md
+++ b/docs/zh/test/3-1-E2E-form-operation.md
@ -248,7 +248,7 @@

    ```javascript
    it('successfully attach volume', () => {
-      // prepair volume
+      // prepare volume
      cy.visitPage(listUrl)
        .tableSearchText(name)
        .clickActionInMoreSub('Attach Volume', 'Related Resources')
@ -279,7 +279,7 @@
    - 选择状态为使用中的云硬盘

    ```javascript
-    it('successfully create full bakcup', () => {
+    it('successfully create full backup', () => {
      cy.clickHeaderButton(1, 5000)
        .formInput('name', name)
        .formTableSelectBySearch('volume', volumeName)
--- a/docs/zh/test/3-4-E2E-resource-operation.md
+++ b/docs/zh/test/3-4-E2E-resource-operation.md
@ -13,7 +13,7 @@
      3. 创建挂载了网络`networkName`上的网卡的云主机`instanceName`

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -28,7 +28,7 @@
    - 创建了名称为`networkName`的网络，为连接子网做准备

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
    });
    ```
@ -40,7 +40,7 @@
    - 创建了名称为`policyName`的策略，为修改QoS做准备

    ```javascript
-    it('successfully prepair resource by admin', () => {
+    it('successfully prepare resource by admin', () => {
      cy.loginAdmin().wait(5000).createNetworkPolicy({ name: policyName });
    });
    ```
@ -57,7 +57,7 @@
      3. 创建挂载了网络`networkName`上的网卡的云主机`instanceName`

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -109,23 +109,23 @@
    - 创建云硬盘的备份，需要先准备好云硬盘

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createVolume(volumeName);
      cy.createNetwork({ name: networkName });
      cy.createInstance({ name: instanceName, networkName });
    });
    ```

- `createSecurityGrouop`
+- `createSecurityGroup`
  - 创建安全组
  - 参数`name`，安全组的名称
  - 以虚拟网卡`test/e2e/integration/pages/network/virtual-adapter.spec.js`为例
    - 测试管理安全组，需要先准备好安全组

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createFip();
-      cy.createSecurityGrouop({ name: securityGroupName });
+      cy.createSecurityGroup({ name: securityGroupName });
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createInstance({ name: instanceName, networkName });
@ -138,7 +138,7 @@
    - 测试绑定浮动IP，需要准备好可达的浮动IP

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createFip();
@ -153,7 +153,7 @@
    - 测试管理用户组操作，需要准备好用户组

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createUser({ name: username });
      cy.createUserGroup({ name: userGroupName });
    });
@ -166,7 +166,7 @@
    - 测试管理用户操作，需要准备好用户

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createUser({ name: username });
      cy.createUserGroup({ name: userGroupName });
    });
@ -180,7 +180,7 @@
    - 测试管理项目权限，需要准备项目

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createProject({ name: projectName });
      cy.createProject({ name: projectName2 });
      cy.createUserGroup({ name: userGroupName });
@ -194,7 +194,7 @@
    - 创建裸机，需要能创建裸机的镜像

    ```javascript
-    it('successfully prepair resource', () => {
+    it('successfully prepare resource', () => {
      cy.createNetwork({ name: networkName });
      cy.createRouter({ name: routerName, network: networkName });
      cy.createFip();
@ -232,7 +232,7 @@
  - 删除符合条件的资源
  - 参数`resourceName`，资源名称，支持

-    ```javacript
+    ```javascript
    export default {
      // compute
      instance: instanceListUrl,
--- a/package.json
+++ b/package.json
@ -119,6 +119,7 @@
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-spellcheck": "^0.0.19",
    "file-loader": "^6.0.0",
    "grunt": "^1.2.1",
    "happypack": "^5.0.1",
--- a/playbooks/devstack/storage/run-e2etests.yaml
+++ b/playbooks/devstack/storage/run-e2etests.yaml
@ -14,7 +14,7 @@
          config_file="test/e2e/config/local_config.yaml"
          cp test/e2e/config/config-storage.yaml $config_file
          sed -i "s#baseUrl.*#baseUrl: https://127.0.0.1:9999#" $config_file
-          sed -i "s/- cinder::buckup/# - cinder::buckup/" $config_file
+          sed -i "s/- cinder::backup/# - cinder::backup/" $config_file
          sed -i "s/- swift/# - swift/" $config_file
          sed -i "s#username:.*#username: admin#" $config_file
          sed -i "s#password:.*#password: secretadmin#" $config_file
--- a/src/asset/image/animnbus.png
+++ b/src/asset/image/animnbus.png
--- a/src/client/client/base.js
+++ b/src/client/client/base.js
@ -246,7 +246,7 @@ export default class BaseClient {
  generateSubSonResource = (
    resourceName,
    subResourceName,
-    subSubResonseName,
+    subSubResourceName,
    responseKey
  ) => ({
    list: (id, subId, params, ...args) =>
@ -254,7 +254,7 @@ export default class BaseClient {
        this.getSubSubResourceListUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId
        ),
@ -266,7 +266,7 @@ export default class BaseClient {
        this.getSubSubResourceDetailUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId,
          subSubId
@ -279,7 +279,7 @@ export default class BaseClient {
        this.getSubSubResourceListUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId
        ),
@ -291,7 +291,7 @@ export default class BaseClient {
        this.getSubSubResourceDetailUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId,
          subSubId
@ -304,7 +304,7 @@ export default class BaseClient {
        this.getSubSubResourceDetailUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId,
          subSubId
@ -317,7 +317,7 @@ export default class BaseClient {
        this.getSubSubResourceDetailUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId,
          subSubId
@ -329,7 +329,7 @@ export default class BaseClient {
        this.getSubSubResourceDetailUrl(
          resourceName,
          subResourceName,
-          subSubResonseName,
+          subSubResourceName,
          id,
          subId,
          subSubId
--- a/src/client/client/request.js
+++ b/src/client/client/request.js
@ -28,9 +28,9 @@ export class HttpRequest {
    this.request = {};
  }

-  gotoLoginPage(path) {
+  goToLoginPage(path) {
    const globalRootStore = require('stores/root').default;
-    globalRootStore.gotoLoginPage(path);
+    globalRootStore.goToLoginPage(path);
  }

  /**
@ -102,7 +102,7 @@ export class HttpRequest {
          if (status === 401) {
            const currentPath = window.location.pathname;
            if (currentPath.indexOf('login') < 0) {
-              this.gotoLoginPage(currentPath);
+              this.goToLoginPage(currentPath);
            }
          }
        }
--- a/src/client/swift/index.js
+++ b/src/client/swift/index.js
@ -89,8 +89,8 @@ class SwiftClient extends Base {
          },
          {
            key: 'copy',
-            generate: (fromContaier, fromName, toContainer, toName) => {
-              const url = `${fromContaier}/${fromName}`;
+            generate: (fromContainer, fromName, toContainer, toName) => {
+              const url = `${fromContainer}/${fromName}`;
              const headers = {
                Destination: this.getEncodeUrl(`${toContainer}/${toName}`),
              };
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@ -269,7 +269,7 @@ export default class BaseForm extends React.Component {
  // eslint-disable-next-line no-unused-vars
  onSubmit = (values) => Promise.resolve();

-  updateSumbitting = (value) => {
+  updateSubmitting = (value) => {
    this.setState({
      isSubmitting: value || false,
    });
@ -282,14 +282,14 @@ export default class BaseForm extends React.Component {
    if (this.codeError) {
      return;
    }
-    this.updateSumbitting(true);
+    this.updateSubmitting(true);
    if (!this.onSubmit) {
      return callback(true, false);
    }
    const submitData = this.getSubmitData(values);
    return this.onSubmit(submitData, containerProps).then(
      (response) => {
-        this.updateSumbitting(false);
+        this.updateSubmitting(false);
        !this.isModal && this.routing.push(this.listUrl);
        this.response = response;
        if (callback && isFunction(callback)) {
@ -330,7 +330,7 @@ export default class BaseForm extends React.Component {
        }
      },
      (err = {}) => {
-        this.updateSumbitting(false);
+        this.updateSubmitting(false);
        this.responseError = err;
        const { response: { data } = {} } = err;
        this.showNotice && Notify.errorWithDetail(data, this.errorText);
--- a/src/components/FormItem/AddSelect/index.jsx
+++ b/src/components/FormItem/AddSelect/index.jsx
@ -93,15 +93,15 @@ export default class index extends Component {
    this.updateItems([...items, newItem]);
  };

-  updateItems = (newIems) => {
+  updateItems = (newItems) => {
    this.setState(
      {
-        items: newIems,
+        items: newItems,
      },
      () => {
        const { onChange } = this.props;
        if (onChange) {
-          onChange(newIems);
+          onChange(newItems);
        }
      }
    );
--- a/src/components/FormItem/IPDistributor/IPAddress.jsx
+++ b/src/components/FormItem/IPDistributor/IPAddress.jsx
--- a/src/components/FormItem/IPDistributor/Item.jsx
+++ b/src/components/FormItem/IPDistributor/Item.jsx
@ -14,7 +14,7 @@

 import React, { useState } from 'react';
 import { Col, Row, Select } from 'antd';
-import IPAddress from 'components/FormItem/IPDistributer/IPAddress';
+import IPAddress from 'components/FormItem/IPDistributor/IPAddress';

 const Item = ({ subnetsAvailable, onChange, value }) => {
  value = value || {
--- a/src/components/FormItem/IPDistributor/index.jsx
+++ b/src/components/FormItem/IPDistributor/index.jsx
@ -15,12 +15,12 @@
 import React from 'react';
 import { Form, Button, Row, Col } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import Item from 'components/FormItem/IPDistributer/Item';
+import Item from 'components/FormItem/IPDistributor/Item';
 import { ipValidate } from 'utils/validate';

 const { isIPv4, isIpv6 } = ipValidate;

-const IPDistributer = ({ componentProps, formItemProps }) => {
+const IPDistributor = ({ componentProps, formItemProps }) => {
  const { subnets, maxNumber = 10, formRef } = componentProps;
  const { name, value = [], onChange } = formItemProps;
  const subnetsAvailable = subnets
@ -116,6 +116,6 @@ const IPDistributer = ({ componentProps, formItemProps }) => {
  );
 };

-IPDistributer.isFormItem = true;
+IPDistributor.isFormItem = true;

-export default IPDistributer;
+export default IPDistributor;
--- a/src/components/FormItem/InstanceVolume/index.jsx
+++ b/src/components/FormItem/InstanceVolume/index.jsx
@ -67,7 +67,7 @@ export default class InstanceVolume extends React.Component {
    if (!type) {
      this.setState(
        {
-          errorMsg: t('Pleasse select a type!'),
+          errorMsg: t('Please select a type!'),
          validateStatus: 'error',
        },
        callback
--- a/src/components/FormItem/InternationalPhoneNumberInput/index.jsx
+++ b/src/components/FormItem/InternationalPhoneNumberInput/index.jsx
@ -3,7 +3,7 @@ import { Input, Select } from 'antd';

 import { defaultCountries } from './countries';

-export default function InternationPhoneNumberInput({
+export default function InternationalPhoneNumberInput({
  value,
  options,
  onChange,
@ -57,7 +57,7 @@ export default function InternationPhoneNumberInput({
  );
 }

-InternationPhoneNumberInput.defaultProps = {
+InternationalPhoneNumberInput.defaultProps = {
  value: '+86 ',
  options: defaultCountries,
 };
--- a/src/components/FormItem/IpInput/index.jsx
+++ b/src/components/FormItem/IpInput/index.jsx
@ -147,7 +147,7 @@ export default class index extends Component {
    }
    // eslint-disable-next-line no-shadow
    const inputs = value.map((it, index) => (
-      <div className={styles['item-wrapper']} key={`ipinput-${index}`}>
+      <div className={styles['item-wrapper']} key={`ip-input-${index}`}>
        <Input
          className={styles.item}
          value={value[index]}
--- a/src/components/FormItem/MemberAllocator/Item.jsx
+++ b/src/components/FormItem/MemberAllocator/Item.jsx
@ -17,7 +17,12 @@ import IPAddress from './IPAddress';

 const Item = ({ onChange, value }) => {
  value = value || {
-    ip_address: { ip: undefined, protocol_port: undefined, weight: 1, subnet_id: undefined },
+    ip_address: {
+      ip: undefined,
+      protocol_port: undefined,
+      weight: 1,
+      subnet_id: undefined,
+    },
    canEdit: true,
  };
  const [ip_address, setIP] = useState(value.ip_address);
--- a/src/components/FormItem/MetadataTransfer/EnumSelect.jsx
+++ b/src/components/FormItem/MetadataTransfer/EnumSelect.jsx
@ -88,7 +88,7 @@ export default class EnumSelect extends Component {
    const options = this.getOptions();
    const enumOptions = this.getEnumOptions();
    const defaultOperator = this.getDefaultOperator();
-    const deaultEnums = this.getDefaultEnums();
+    const defaultEnums = this.getDefaultEnums();
    return (
      <div>
        <Select
@ -100,7 +100,7 @@ export default class EnumSelect extends Component {
        <Select
          options={enumOptions}
          mode="tags"
-          defaultValue={deaultEnums}
+          defaultValue={defaultEnums}
          onChange={this.onChangeEnum}
          placeholder={t('Please select')}
        />
--- a/src/components/FormItem/NetworkSelect/index.jsx
+++ b/src/components/FormItem/NetworkSelect/index.jsx
@ -163,7 +163,7 @@ export default class NetworkSelect extends React.Component {
    if (!network) {
      this.setState(
        {
-          errorMsg: t('Pleasse select a network!'),
+          errorMsg: t('Please select a network!'),
          validateStatus: 'error',
        },
        callback
@ -172,7 +172,7 @@ export default class NetworkSelect extends React.Component {
    }
    // if (!subnet) {
    //   this.setState({
-    //     errorMsg: t('Pleasse select a subnet!'),
+    //     errorMsg: t('Please select a subnet!'),
    //     validateStatus: 'error',
    //   }, callback);
    //   return;
@ -180,7 +180,7 @@ export default class NetworkSelect extends React.Component {
    if (ipType === 1 && !isIPv4(ip) && !isIpv6(ip)) {
      this.setState(
        {
-          errorMsg: t('Pleasse input a valid ip!'),
+          errorMsg: t('Please input a valid ip!'),
          validateStatus: 'error',
        },
        callback
--- a/src/components/FormItem/SelectTable/index.jsx
+++ b/src/components/FormItem/SelectTable/index.jsx
@ -478,11 +478,11 @@ export default class SelectTable extends React.Component {
    }
    const addKeys = selectedRowKeys.filter((it) => keysInState.indexOf(it) < 0);
    const delKeys = keysInState.filter((it) => selectedRowKeys.indexOf(it) < 0);
-    const oldLefRows = rowsInState.filter(
+    const oldLeftRows = rowsInState.filter(
      (it) => delKeys.indexOf(getItemKey(it)) < 0
    );
    const newRows = data.filter((it) => addKeys.indexOf(getItemKey(it)) >= 0);
-    return [...oldLefRows, ...newRows];
+    return [...oldLeftRows, ...newRows];
  };

  getSelectedRows = (selectedRowKeys) => {
--- a/src/components/FormItem/SelectWithInput/index.jsx
+++ b/src/components/FormItem/SelectWithInput/index.jsx
@ -20,26 +20,28 @@ export default class Index extends Component {
    super(props);
    this.state = {
      value: undefined,
-      inputVal: undefined
+      inputVal: undefined,
    };
  }

  onChange = (val) => {
-    this.setState({
-      value: val,
-      inputVal: undefined
-    }, () => {
-      const { formRef, onChange, name } = this.props;
-      formRef.current &&
-        formRef.current.setFieldsValue({ [name]: val });
-      onChange && onChange(val);
-    });
+    this.setState(
+      {
+        value: val,
+        inputVal: undefined,
+      },
+      () => {
+        const { formRef, onChange, name } = this.props;
+        formRef.current && formRef.current.setFieldsValue({ [name]: val });
+        onChange && onChange(val);
+      }
+    );
  };

  onSearch = (value) => {
    !!value &&
      this.setState({
-        inputVal: value
+        inputVal: value,
      });
  };

@ -55,7 +57,7 @@ export default class Index extends Component {
      <Select
        showSearch
        value={value}
-        style={{ width: "100%", height: '100%' }}
+        style={{ width: '100%', height: '100%' }}
        onChange={this.onChange}
        onSearch={this.onSearch}
        onBlur={this.onBlur}
@ -67,4 +69,4 @@ export default class Index extends Component {
      />
    );
  }
-}
+}
--- a/src/components/FormItem/index.jsx
+++ b/src/components/FormItem/index.jsx
@ -50,7 +50,7 @@ import Transfer from './Transfer';
 import NUMAInput from './NUMAInput';
 import CheckboxGroup from './CheckboxGroup';
 import TextareaFromFile from './TextareaFromFile';
-import IPDistributer from './IPDistributer';
+import IPDistributor from './IPDistributor';
 import MacAddressInput from './MacAddressInput';
 import InputInt from './InputInt';
 import MetadataTransfer from './MetadataTransfer';
@ -59,7 +59,7 @@ import VolumeSelectTable from './VolumeSelectTable';
 import TabSelectTable from './TabSelectTable';
 import TreeSelect from './TreeSelect';
 import SelectWithInput from './SelectWithInput';
-import InternationPhoneNumberInput from './InternationalPhoneNumberInput';
+import InternationalPhoneNumberInput from './InternationalPhoneNumberInput';
 // import styles from './index.less';

 export const type2component = {
@ -96,7 +96,7 @@ export const type2component = {
  'check-group': CheckboxGroup,
  'textarea-from-file': TextareaFromFile,
  'range-picker': DatePicker.RangePicker,
-  'ip-distributer': IPDistributer,
+  'ip-distributor': IPDistributor,
  'mac-address': MacAddressInput,
  'network-select-table': NetworkSelectTable,
  'volume-select-table': VolumeSelectTable,
@ -106,7 +106,7 @@ export const type2component = {
  'input-json': JsonInput,
  'tree-select': TreeSelect,
  'select-input': SelectWithInput,
-  phone: InternationPhoneNumberInput,
+  phone: InternationalPhoneNumberInput,
 };

 export default class FormItem extends React.Component {
--- a/src/components/MagicInput/index.jsx
+++ b/src/components/MagicInput/index.jsx
@ -296,13 +296,13 @@ class MagicInput extends PureComponent {
    const correlateTag = tags.filter(
      (it) => it.filter.name === correlateOption
    );
-    let suboptions = [];
+    let subOptions = [];
    if (correlateOption && correlateTag[0]) {
-      suboptions = options.filter(
+      subOptions = options.filter(
        (it) => it.correlateValue.indexOf(correlateTag[0].value) > -1
      );
    }
-    const menuItems = (suboptions[0] ? suboptions : options).map((it) => (
+    const menuItems = (subOptions[0] ? subOptions : options).map((it) => (
      <Menu.Item key={it.key}>{it.label}</Menu.Item>
    ));
    return (
--- a/src/components/PrometheusChart/BaseCard.jsx
+++ b/src/components/PrometheusChart/BaseCard.jsx
@ -83,10 +83,10 @@ const BaseCard = (props) => {
    setIsLoading(false);
  };

-  const filterChartData = (filt) => {
+  const filterChartData = (filter) => {
    setIsLoading(true);
    // refresh component
-    const newChartData = initData.filter(filt);
+    const newChartData = initData.filter(filter);
    setChartData(newChartData);
    setIsLoading(false);
  };
--- a/src/components/PrometheusChart/ChartCard.jsx
+++ b/src/components/PrometheusChart/ChartCard.jsx
@ -74,7 +74,7 @@ const ChartCard = (props) => {
      fetchDataParams,
      isModal = false,
    } = props;
-    let defaultNode = {};
+    const defaultNode = {};
    const { params: fParams = {} } = fetchDataParams;
    const { instance, hostname, ...rest } = fParams;
    if (fParams) {
--- a/src/components/PrometheusChart/component/BaseContent.jsx
+++ b/src/components/PrometheusChart/component/BaseContent.jsx
@ -69,7 +69,6 @@ const BaseContent = (props) => {
      setTimeout(() => {
        setIsLoading(false);
      }, 300);
-      return;
    }
  };

--- a/src/components/PrometheusChart/utils/index.js
+++ b/src/components/PrometheusChart/utils/index.js
@ -25,18 +25,18 @@ export function createDataHandler(params) {
  const { formatDataFn, typeKey, deviceKey, modifyKeys } = params;

  return (data) => {
-    const formatedData = formatDataFn(data, typeKey, deviceKey, modifyKeys);
-    const retData = clone(formatedData);
+    const formattedData = formatDataFn(data, typeKey, deviceKey, modifyKeys);
+    const retData = clone(formattedData);
    let device = '';
    let devices = [];
    if (
-      isArray(formatedData) &&
-      formatedData.length !== 0 &&
-      formatedData[0].device
+      isArray(formattedData) &&
+      formattedData.length !== 0 &&
+      formattedData[0].device
    ) {
      const dv = new DataSet()
        .createView()
-        .source(formatedData)
+        .source(formattedData)
        .transform({
          type: 'partition',
          groupBy: ['device'],
--- a/src/components/Tables/Base/ItemActionButtons/index.jsx
+++ b/src/components/Tables/Base/ItemActionButtons/index.jsx
@ -44,7 +44,7 @@ function getIsAllowedValue(alloweds, index) {
  return result;
 }

-// 第一个action一定保留， aciton | 更多
+// 第一个action一定保留， action | 更多
 function DropdownActionButton({
  firstAction = null,
  moreActions = [],
--- a/src/components/Tables/Base/index.jsx
+++ b/src/components/Tables/Base/index.jsx
@ -622,7 +622,7 @@ export default class BaseTable extends React.Component {
  );

  renderTimeFilter() {
-    const { showTimeFilter, filterTimeDefalutValue } = this.props;
+    const { showTimeFilter, filterTimeDefaultValue } = this.props;
    if (!showTimeFilter) {
      return null;
    }
@ -630,8 +630,8 @@ export default class BaseTable extends React.Component {
      onChange: this.handleTimeChange,
      className: styles.timer,
    };
-    if (filterTimeDefalutValue !== undefined) {
-      props.defaultValue = filterTimeDefalutValue;
+    if (filterTimeDefaultValue !== undefined) {
+      props.defaultValue = filterTimeDefaultValue;
    }
    return <TimeFilter {...props} />;
  }
--- a/src/containers/List/index.jsx
+++ b/src/containers/List/index.jsx
@ -411,7 +411,7 @@ export default class BaseList extends React.Component {
    return false;
  }

-  setRefreshdataTimerTransition = () => {
+  setRefreshDataTimerTransition = () => {
    this.stopRefreshAuto();
    if (this.dataTimerTransition) {
      return;
@ -422,7 +422,7 @@ export default class BaseList extends React.Component {
    }, this.dataDurationTransition * 1000);
  };

-  setRefreshdataTimerAuto = () => {
+  setRefreshDataTimerAuto = () => {
    this.stopRefreshTransition();
    if (!this.ableAutoFresh) {
      return;
@ -511,7 +511,7 @@ export default class BaseList extends React.Component {
      containerProps: this.props,
      expandable: this.expandable,
      showTimeFilter: !!this.filterTimeKey,
-      filterTimeDefalutValue: this.filterTimeDefalutValue,
+      filterTimeDefaultValue: this.filterTimeDefaultValue,
      isPageByBack: this.isFilterByBackend,
      isSortByBack: this.isSortByBackend,
      isCourier: this.isCourier,
@ -558,7 +558,7 @@ export default class BaseList extends React.Component {
  handleInputFocus = (value) => {
    this.inAction = value;
    if (!value) {
-      this.setRefreshdataTimerAuto();
+      this.setRefreshDataTimerAuto();
    }
  };

@ -658,10 +658,10 @@ export default class BaseList extends React.Component {
        const title = t('The session has expired, please log in again.');
        Notify.errorWithDetail(null, title);
      } else if (status === 500) {
-        const sysErr = t('System is error, please try again later.');
+        const systemErr = t('System is error, please try again later.');
        const title = `${t('Get {name} error.', {
          name: this.name.toLowerCase(),
-        })} ${sysErr}`;
+        })} ${systemErr}`;
        Notify.errorWithDetail(null, title);
      } else {
        const error = {
@ -707,7 +707,7 @@ export default class BaseList extends React.Component {
  };

  getDownloadData = async ({ ...params } = {}) => {
-    // only used for donwload all and pagination by backend
+    // only used for download all and pagination by backend
    const { filters } = this.state;
    const newParams = {
      ...this.props.match.params,
@ -855,9 +855,9 @@ export default class BaseList extends React.Component {
      this.itemInTransitionFunction(item)
    );
    if (hasTransData) {
-      this.setRefreshdataTimerTransition();
+      this.setRefreshDataTimerTransition();
    } else {
-      this.setRefreshdataTimerAuto();
+      this.setRefreshDataTimerAuto();
    }
    this.updateHintsByData(items);
    this.setTableHeight();
--- a/src/containers/TabDetail/index.jsx
+++ b/src/containers/TabDetail/index.jsx
@ -104,7 +104,7 @@ export default class DetailBase extends React.Component {
    return [];
  }

-  onCollapedCallback = () => {};
+  onCollapsedCallback = () => {};

  handleChangeTab = (tab) => {
    // this.setState({
@ -204,7 +204,7 @@ export default class DetailBase extends React.Component {
        collapsed: !collapsed,
      },
      () => {
-        this.onCollapedCallback(!collapsed);
+        this.onCollapsedCallback(!collapsed);
      }
    );
  };
--- a/src/core/i18n.js
+++ b/src/core/i18n.js
@ -20,7 +20,7 @@ import SLI18n from 'utils/translate';
 import { setLocalStorageItem } from 'utils/local-storage';
 import locales from '../locales';

-const SUPPOER_LOCALES = [
+const SUPPORT_LOCALES = [
  {
    name: 'English',
    value: 'en',
@ -52,7 +52,7 @@ const getLocale = () => {
  });

  // 如果没找到，则默认为汉语
-  if (!_.find(SUPPOER_LOCALES, { value: currentLocale })) {
+  if (!_.find(SUPPORT_LOCALES, { value: currentLocale })) {
    currentLocale = 'zh-cn';
    // currentLocale = 'en';
  }
--- a/src/core/index.jsx
+++ b/src/core/index.jsx
@ -53,7 +53,7 @@ const getUser = async (callback) => {
    } catch (e) {
      // eslint-disable-next-line no-console
      console.log(e);
-      store.gotoLoginPage(currentPath);
+      store.goToLoginPage(currentPath);
    } finally {
      callback && callback();
    }
--- a/src/layouts/Base/Right.jsx
+++ b/src/layouts/Base/Right.jsx
@ -123,7 +123,7 @@ class Right extends Component {
    );
  };

-  renderChildren = (mainBreadcrubClass, mainTabClass, extraProps) => {
+  renderChildren = (mainBreadcrumbClass, mainTabClass, extraProps) => {
    const { hasError } = this.state;
    if (hasError) {
      return (
@ -136,7 +136,9 @@ class Right extends Component {
    }
    try {
      const children = (
-        <div className={`${styles.main} ${mainBreadcrubClass} ${mainTabClass}`}>
+        <div
+          className={`${styles.main} ${mainBreadcrumbClass} ${mainTabClass}`}
+        >
          {renderRoutes(this.routes, extraProps)}
        </div>
      );
@ -157,7 +159,7 @@ class Right extends Component {
    const hasBreadcrumb = breadcrumb !== null;
    const { user } = this.props.rootStore;
    const hasTab = this.checkHasTab(pathname);
-    const mainBreadcrubClass = hasBreadcrumb
+    const mainBreadcrumbClass = hasBreadcrumb
      ? ''
      : styles['main-no-breadcrumb'];
    const mainTabClass = hasTab ? styles['main-has-tab'] : '';
@ -167,7 +169,7 @@ class Right extends Component {
      isAdminPage,
    };
    const children = user
-      ? this.renderChildren(mainBreadcrubClass, mainTabClass, extraProps)
+      ? this.renderChildren(mainBreadcrumbClass, mainTabClass, extraProps)
      : null;
    return (
      <Layout
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -162,8 +162,6 @@
  "Availability zone refers to a physical area where power and network are independent of each other in the same area. In the same region, the availability zone and the availability zone can communicate with each other in the intranet, and the available zones can achieve fault isolation.": "Availability zone refers to a physical area where power and network are independent of each other in the same area. In the same region, the availability zone and the availability zone can communicate with each other in the intranet, and the available zones can achieve fault isolation.",
  "Available": "Available",
  "Available Zone": "Available Zone",
-  "Average OSD Apply Latency(ms)": "Average OSD Apply Latency(ms)",
-  "Average OSD Commit Latency(ms)": "Average OSD Commit Latency(ms)",
  "Average PGs per OSD": "Average PGs per OSD",
  "Awaiting Transfer": "Awaiting Transfer",
  "Azerbaijan": "Azerbaijan",
@ -227,7 +225,7 @@
  "Bootable": "Bootable",
  "Bootable Volume": "Bootable Volume",
  "Bosnia and Herzegovina": "Bosnia and Herzegovina",
-  "Both of Fontend and Backend": "Both of Fontend and Backend",
+  "Both of Frontend and Backend": "Both of Frontend and Backend",
  "Botswana": "Botswana",
  "Brazil": "Brazil",
  "British Indian Ocean Territory": "British Indian Ocean Territory",
@ -567,7 +565,7 @@
  "Detach": "Detach",
  "Detach Instance": "Detach Instance",
  "Detach Interface": "Detach Interface",
-  "Detach Securiry Group": "Detach Securiry Group",
+  "Detach Security Group": "Detach Security Group",
  "Detach Volume": "Detach Volume",
  "Detach interface": "Detach interface",
  "Detaching": "Detaching",
@ -770,7 +768,6 @@
  "Floating ip has already been associate, Please check Force release": "Floating ip has already been associate, Please check Force release",
  "Folder Detail": "Folder Detail",
  "Folder Name": "Folder Name",
-  "Fontend": "Fontend",
  "For GPU type, you need to install GPU drivers in the instance operating system.": "For GPU type, you need to install GPU drivers in the instance operating system.",
  "For GRE networks, valid segmentation IDs are 1 to 4294967295": "For GRE networks, valid segmentation IDs are 1 to 4294967295",
  "For VLAN networks, valid segmentation IDs are 1 to 4094": "For VLAN networks, valid segmentation IDs are 1 to 4094",
@ -793,6 +790,7 @@
  "French Polynesia": "French Polynesia",
  "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes": "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes",
  "Front End": "Front End",
+  "Frontend": "Frontend",
  "Full": "Full",
  "Full Backup": "Full Backup",
  "GPU Count": "GPU Count",
@ -1115,7 +1113,7 @@
  "Lock": "Lock",
  "Lock Instance": "Lock Instance",
  "Lock Status": "Lock Status",
-  "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volumn.": "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volumn.",
+  "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volume.": "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volume.",
  "Locked": "Locked",
  "Log in": "Log in",
  "Login Name": "Login Name",
@ -1440,6 +1438,9 @@
  "Please select": "Please select",
  "Please select a file": "Please select a file",
  "Please select a file with the suffix {types}": "Please select a file with the suffix {types}",
+  "Please select a network!": "Please select a network!",
+  "Please select a subnet!": "Please select a subnet!",
+  "Please select a type!": "Please select a type!",
  "Please select availability zone": "Please select availability zone",
  "Please select external ip": "Please select external ip",
  "Please select instance": "Please select instance",
@ -1455,10 +1456,6 @@
  "Please set CPU && Ram first.": "Please set CPU && Ram first.",
  "Please set MUNA": "Please set MUNA",
  "Please upload files smaller than { size }G on the page. It is recommended to upload files over { size }G using API.": "Please upload files smaller than { size }G on the page. It is recommended to upload files over { size }G using API.",
-  "Pleasse input a valid ip!": "Pleasse input a valid ip!",
-  "Pleasse select a network!": "Pleasse select a network!",
-  "Pleasse select a subnet!": "Pleasse select a subnet!",
-  "Pleasse select a type!": "Pleasse select a type!",
  "Poland": "Poland",
  "Policy": "Policy",
  "Policy Name": "Policy Name",
@ -1608,6 +1605,7 @@
  "Resource": "Resource",
  "Resource Class": "Resource Class",
  "Resource Class Properties": "Resource Class Properties",
+  "Resource Id": "Resource Id",
  "Resource Not Found": "Resource Not Found",
  "Resource Pool": "Resource Pool",
  "Resource Status": "Resource Status",
@ -1683,8 +1681,8 @@
  "Security Info": "Security Info",
  "Segmentation ID": "Segmentation ID",
  "Select File": "Select File",
-  "Select Projct Role": "Select Projct Role",
  "Select Project": "Select Project",
+  "Select Project Role": "Select Project Role",
  "Select Snapshot": "Select Snapshot",
  "Select System Role": "Select System Role",
  "Select User": "Select User",
@ -1938,7 +1936,7 @@
  "This will delete all child objects of the load balancer.": "This will delete all child objects of the load balancer.",
  "Threads Activity Trends": "Threads Activity Trends",
  "Time Interval: ": "Time Interval: ",
-  "Timeout(Mininte)": "Timeout(Mininte)",
+  "Timeout(Minute)": "Timeout(Minute)",
  "Timeout(s)": "Timeout(s)",
  "To open": "To open",
  "Today CPU usage > 80% alert": "Today CPU usage > 80% alert",
@ -1955,7 +1953,6 @@
  "Total Consumers": "Total Consumers",
  "Total Exchanges": "Total Exchanges",
  "Total IPs": "Total IPs",
-  "Total Message": "Total Message",
  "Total Queues": "Total Queues",
  "Total Ram": "Total Ram",
  "Total {total} items": "Total {total} items",
@ -2191,7 +2188,6 @@
  "create allowed address pair": "create allowed address pair",
  "create bandwidth limit rule": "create bandwidth limit rule",
  "create baremetal node": "create baremetal node",
-  "create cpn endpoint group": "create cpn endpoint group",
  "create default pool": "create default pool",
  "create encryption": "create encryption",
  "create flavor": "create flavor",
@ -2204,6 +2200,7 @@
  "create volume": "create volume",
  "create volume type": "create volume type",
  "create vpn": "create vpn",
+  "create vpn endpoint group": "create vpn endpoint group",
  "create vpn ike policy": "create vpn ike policy",
  "create vpn ipsec policy": "create vpn ipsec policy",
  "data": "data",
@ -2359,7 +2356,6 @@
  "storage backend": "storage backend",
  "subnets": "subnets",
  "suspend instance": "suspend instance",
-  "tab tables": "tab tables",
  "the Republic of Abkhazia": "the Republic of Abkhazia",
  "the folder is not empty": "the folder is not empty",
  "the policy is in use": "the policy is in use",
--- a/src/locales/index.js
+++ b/src/locales/index.js
@ -12,14 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-// import zhModules from './zh-cn';
-// import enModules from './en';
 import zhData from './zh.json';
 import enData from './en.json';

 export default {
-  // zh: Object.assign({}, ...zhModules.map(item => item.default)),
-  // en: Object.assign({}, ...enModules.map(item => item.default)),
  'zh-cn': zhData,
  en: enData,
 };
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@ -162,8 +162,6 @@
  "Availability zone refers to a physical area where power and network are independent of each other in the same area. In the same region, the availability zone and the availability zone can communicate with each other in the intranet, and the available zones can achieve fault isolation.": "可用区是指在同一地域内，电力和网络互相独立的物理区域。在同一地域内可用区与可用区之间内网互通，可用区之间能做到故障隔离。",
  "Available": "可用",
  "Available Zone": "可用域",
-  "Average OSD Apply Latency(ms)": "平均OSD应用延迟(ms)",
-  "Average OSD Commit Latency(ms)": "平均OSD提交延迟(ms)",
  "Average PGs per OSD": "每个OSD平均PG数量",
  "Awaiting Transfer": "等待转让",
  "Azerbaijan": "阿塞拜疆",
@ -227,7 +225,7 @@
  "Bootable": "可启动",
  "Bootable Volume": "可启动云硬盘",
  "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
-  "Both of Fontend and Backend": "前后端",
+  "Both of Frontend and Backend": "前后端",
  "Botswana": "博茨瓦纳",
  "Brazil": "巴西",
  "British Indian Ocean Territory": "英属印度洋领地",
@ -567,7 +565,7 @@
  "Detach": "解绑",
  "Detach Instance": "从云主机解绑",
  "Detach Interface": "卸载网卡",
-  "Detach Securiry Group": "解绑安全组",
+  "Detach Security Group": "解绑安全组",
  "Detach Volume": "卸载云硬盘",
  "Detach interface": "卸载网卡",
  "Detaching": "卸载中",
@ -770,7 +768,6 @@
  "Floating ip has already been associate, Please check Force release": "浮动IP已经被关联使用，请选择强制释放",
  "Folder Detail": "文件夹详情",
  "Folder Name": "文件夹名称",
-  "Fontend": "前端",
  "For GPU type, you need to install GPU drivers in the instance operating system.": "对于GPU类型的云主机，您需要在云主机操作系统中安装GPU驱动等。",
  "For GRE networks, valid segmentation IDs are 1 to 4294967295": "对于GRE网络，有效的段ID范围是从1到4294967295",
  "For VLAN networks, valid segmentation IDs are 1 to 4094": "对于VLAN网络，有效的段ID范围是从1到4094",
@ -793,6 +790,7 @@
  "French Polynesia": "法属玻里尼西亚",
  "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes": "频繁登陆失败会导致账户暂时锁定，请 5min 后再操作",
  "Front End": "前端",
+  "Frontend": "前端",
  "Full": "爆满",
  "Full Backup": "全量备份",
  "GPU Count": "GPU数量",
@ -1115,7 +1113,7 @@
  "Lock": "锁定",
  "Lock Instance": "锁定云主机",
  "Lock Status": "锁定状态",
-  "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volumn.": "云主机锁定操作会锁定对云主机运行有直接影响的操作, 例如: 关机, 重启, 删除等，不涉及云硬盘的挂载卸载和扩容。",
+  "Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volume.": "云主机锁定操作会锁定对云主机运行有直接影响的操作, 例如: 关机, 重启, 删除等，不涉及云硬盘的挂载卸载和扩容。",
  "Locked": "锁定",
  "Log in": "登录",
  "Login Name": "登录名",
@ -1410,7 +1408,7 @@
  "Please input ICMP type(0-255)": "请输入ICMP类型(0-255)",
  "Please input IPv4 or IPv6 cidr": "请输入IPv4或IPv6网段地址",
  "Please input IPv4 or IPv6 cidr, (e.g. 192.168.0.0/24, 2001:DB8::/48)": "请输入IPv4或IPv6网段地址，（如：192.168.0.0/24, 2001:DB8::/48）",
-  "Please input a valid ip!": "请输入一个有效的IP！",
+  "Please input a valid ip!": "请输入正确的IP地址",
  "Please input at least 2 characters.": "请输入至少2个字符",
  "Please input auth key": "请输入密钥",
  "Please input cipher": "请输入cipher",
@ -1440,6 +1438,9 @@
  "Please select": "请选择",
  "Please select a file": "请选择一个文件",
  "Please select a file with the suffix {types}": "请选择后缀为{types}的文件",
+  "Please select a network!": "请选择网络！",
+  "Please select a subnet!": "请选择子网！",
+  "Please select a type!": "请选择类型！",
  "Please select availability zone": "请选择可用域",
  "Please select external ip": "请选择外网IP",
  "Please select instance": "请选择云主机",
@ -1455,10 +1456,6 @@
  "Please set CPU && Ram first.": "请先设置CPU、内存。",
  "Please set MUNA": "请设置NUMA节点",
  "Please upload files smaller than { size }G on the page. It is recommended to upload files over { size }G using API.": "页面请上传小于{ size }G的文件，超过{ size }G的文件建议使用API上传。",
-  "Pleasse input a valid ip!": "请输入正确的IP地址",
-  "Pleasse select a network!": "请选择网络！",
-  "Pleasse select a subnet!": "请选择子网！",
-  "Pleasse select a type!": "请选择类型！",
  "Poland": "波兰",
  "Policy": "策略",
  "Policy Name": "策略名称",
@ -1608,6 +1605,7 @@
  "Resource": "资源",
  "Resource Class": "资源类",
  "Resource Class Properties": "资源类属性",
+  "Resource Id": "资源ID",
  "Resource Not Found": "资源未找到",
  "Resource Pool": "资源池",
  "Resource Status": "资源状态",
@ -1683,8 +1681,8 @@
  "Security Info": "安全信息",
  "Segmentation ID": "段ID",
  "Select File": "选择文件",
-  "Select Projct Role": "选择项目角色",
  "Select Project": "选择项目",
+  "Select Project Role": "选择项目角色",
  "Select Snapshot": "选择快照",
  "Select System Role": "选择系统角色",
  "Select User": "选择用户",
@ -1938,7 +1936,7 @@
  "This will delete all child objects of the load balancer.": "这会删除所有LB下的资源",
  "Threads Activity Trends": "",
  "Time Interval: ": "时间间隔：",
-  "Timeout(Mininte)": "创建超时（分钟）",
+  "Timeout(Minute)": "创建超时（分钟）",
  "Timeout(s)": "检查超时时间(秒)",
  "To open": "去开通",
  "Today CPU usage > 80% alert": "今日CPU使用率大于80%的告警",
@ -1955,7 +1953,6 @@
  "Total Consumers": "",
  "Total Exchanges": "",
  "Total IPs": "所有IP",
-  "Total Message": "",
  "Total Queues": "",
  "Total Ram": "总内存",
  "Total {total} items": "总计：{total}",
@ -2191,7 +2188,6 @@
  "create allowed address pair": "创建可用地址对",
  "create bandwidth limit rule": "创建带宽限制规则",
  "create baremetal node": "创建裸机节点",
-  "create cpn endpoint group": "创建VPN端点组",
  "create default pool": "创建资源池",
  "create encryption": "创建加密",
  "create flavor": "创建云主机类型",
@ -2204,6 +2200,7 @@
  "create volume": "创建云硬盘",
  "create volume type": "创建云硬盘类型",
  "create vpn": "创建VPN",
+  "create vpn endpoint group": "创建VPN端点组",
  "create vpn ike policy": "创建VPN IKE策略",
  "create vpn ipsec policy": "创建VPN IPsec策略",
  "data": "数据",
@ -2359,7 +2356,6 @@
  "storage backend": "存储后端",
  "subnets": "子网",
  "suspend instance": "挂起云主机",
-  "tab tables": "",
  "the Republic of Abkhazia": "阿布哈兹",
  "the folder is not empty": "文件夹非空",
  "the policy is in use": "策略正在使用中",
--- a/src/pages/auth/containers/Login/index.jsx
+++ b/src/pages/auth/containers/Login/index.jsx
@ -232,15 +232,6 @@ export class Login extends Component {
    );
  };

-  onGetCaptcha = () => {
-    if (this.formRef) {
-      return this.formRef.current.validateFields(['username']);
-      // const values = this.formRef.current.getFieldsValue();
-      // console.log(values);
-    }
-    return Promise.resolve();
-  };
-
  getErrorMessage() {
    const { message } = this.state;
    if (message.includes('The account is locked for user')) {
--- a/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
+++ b/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
@ -77,7 +77,7 @@ const instanceColors = {
 const volumeColors = {
  active: { color: '#52C41A', text: t('Attaching') },
  error: { color: '#E8684A', text: t('Error') },
-  unattache: { color: '#E6F2E0', text: t('Unattached') },
+  available: { color: '#E6F2E0', text: t('Unattached') },
  other: { color: '#F6B23D', text: t('Others') },
 };

--- a/src/pages/base/containers/AdminOverview/index.jsx
+++ b/src/pages/base/containers/AdminOverview/index.jsx
@ -33,7 +33,7 @@ export class Overview extends Component {
    return <PlatformInfo store={this.adminStore} />;
  }

-  renderVirutalResource() {
+  renderVirtualResource() {
    return <VirtualResource store={this.adminStore} />;
  }

@ -56,7 +56,7 @@ export class Overview extends Component {
          <Col span={24}>{this.renderPlatformInfo()}</Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 22 }}>
-          <Col span={24}>{this.renderVirutalResource()}</Col>
+          <Col span={24}>{this.renderVirtualResource()}</Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 22 }}>
          <Col span={24}>{this.renderResourceOverview()}</Col>
--- a/src/pages/base/containers/Overview/components/ProjectInfo.jsx
+++ b/src/pages/base/containers/Overview/components/ProjectInfo.jsx
@ -26,7 +26,7 @@ export class ProjectInfo extends Component {
    };
  }

-  onCollapedCallback = () => {};
+  onCollapsedCallback = () => {};

  handleDetailInfo = () => {
    const { collapsed } = this.state;
@ -35,7 +35,7 @@ export class ProjectInfo extends Component {
        collapsed: !collapsed,
      },
      () => {
-        this.onCollapedCallback(!collapsed);
+        this.onCollapsedCallback(!collapsed);
      }
    );
  };
--- a/src/pages/base/containers/Overview/index.jsx
+++ b/src/pages/base/containers/Overview/index.jsx
@ -26,7 +26,7 @@ import ProjectInfo from './components/ProjectInfo';

 const actions = [
  {
-    key: 'nstance',
+    key: 'instance',
    label: t('Instance'),
    avatar: overviewInstance,
    to: '/compute/instance',
--- a/src/pages/compute/containers/Flavor/Arm/actions/index.jsx
+++ b/src/pages/compute/containers/Flavor/Arm/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './Create';
+import CreateAction from './Create';
 // import EditAction from './Edit';
 import DeleteAction from '../../actions/Delete';
 import ManageAccess from '../../actions/ManageAccess';
@ -28,7 +28,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default actionConfigs;
--- a/src/pages/compute/containers/Flavor/BareMetal/actions/index.jsx
+++ b/src/pages/compute/containers/Flavor/BareMetal/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './Create';
+import CreateAction from './Create';
 // import EditAction from './Edit';
 import DeleteAction from '../../actions/Delete';
 import ManageAccess from '../../actions/ManageAccess';
@ -28,7 +28,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default actionConfigs;
--- a/src/pages/compute/containers/Flavor/Heterogeneous/actions/index.jsx
+++ b/src/pages/compute/containers/Flavor/Heterogeneous/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './Create';
+import CreateAction from './Create';
 // import EditAction from './Edit';
 import DeleteAction from '../../actions/Delete';
 import ManageAccess from '../../actions/ManageAccess';
@ -28,7 +28,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default actionConfigs;
--- a/src/pages/compute/containers/Flavor/X86/actions/index.jsx
+++ b/src/pages/compute/containers/Flavor/X86/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './Create';
+import CreateAction from './Create';
 // import EditAction from './Edit';
 import DeleteAction from '../../actions/Delete';
 import ManageAccess from '../../actions/ManageAccess';
@ -28,7 +28,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default actionConfigs;
--- a/src/pages/compute/containers/Flavor/actions/ManageMetadata.jsx
+++ b/src/pages/compute/containers/Flavor/actions/ManageMetadata.jsx
@ -60,10 +60,10 @@ export default class ManageMetadata extends ModalAction {
  static allowed = () => Promise.resolve(true);

  async getMetadata() {
-    const resouceType = 'OS::Nova::Flavor';
+    const resourceType = 'OS::Nova::Flavor';
    await this.metadataStore.fetchList({
      manage: true,
-      resource_types: resouceType,
+      resource_types: resourceType,
    });
    this.updateDefaultValue();
  }
@ -173,7 +173,7 @@ export default class ManageMetadata extends ModalAction {
  }

  onSubmit = (values) => {
-    const { customs: oldCumtoms, systems: oldSystems } =
+    const { customs: oldCustoms, systems: oldSystems } =
      this.parseExistMetadata();
    const { customs, systems } = values;
    const adds = [];
@ -181,7 +181,7 @@ export default class ManageMetadata extends ModalAction {
    const replaces = [];
    customs.forEach((it) => {
      const { key, value } = it.value || {};
-      const oldItem = oldCumtoms.find((c) => c.value.key === key);
+      const oldItem = oldCustoms.find((c) => c.value.key === key);
      if (!oldItem) {
        adds.push(it.value);
      } else if (oldItem.value.value !== value) {
@ -199,7 +199,7 @@ export default class ManageMetadata extends ModalAction {
        replaces.push(item);
      }
    });
-    oldCumtoms.forEach((it) => {
+    oldCustoms.forEach((it) => {
      const item = customs.find((custom) => custom.value.key === it.value.key);
      if (!item) {
        removes.push(it.value.key);
--- a/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx
+++ b/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx
@ -28,7 +28,7 @@ import {
  isComputeOptimized,
  pageTypeList,
  getAllArchitecture,
-  getfamiliItemValue,
+  getFamilyItemValue,
  isGpuVisual,
 } from 'resources/flavor';
 import globalSettingStore from 'stores/skyline/setting';
@ -48,8 +48,8 @@ export class ParamSetting extends Base {
    this.updateDefaultValue();
  }

-  get familiItemValue() {
-    return getfamiliItemValue(this.settingStore.list.data);
+  get familyItemValue() {
+    return getFamilyItemValue(this.settingStore.list.data);
  }

  get tab() {
@ -70,7 +70,7 @@ export class ParamSetting extends Base {
    if (!architecture) {
      return [];
    }
-    const familyItem = this.familiItemValue.find(
+    const familyItem = this.familyItemValue.find(
      (it) => it.architecture === architecture
    );
    if (!familyItem) {
@ -517,7 +517,7 @@ export class ParamSetting extends Base {
        name: 'attachUsb',
        label: t('Attach USB'),
        type: 'radio',
-        optionTyoe: 'default',
+        optionType: 'default',
        hidden: !this.usbTypes[0],
        options: [
          {
--- a/src/pages/compute/containers/Flavor/actions/index.jsx
+++ b/src/pages/compute/containers/Flavor/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './StepCreate';
+import CreateAction from './StepCreate';
 // import EditAction from './Edit';
 import DeleteAction from './Delete';
 import ManageAccess from './ManageAccess';
@ -28,7 +28,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default actionConfigs;
--- a/src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageMetadata.jsx
+++ b/src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageMetadata.jsx
@ -56,10 +56,10 @@ export default class ManageMetadata extends ModalAction {
  static allowed = () => Promise.resolve(true);

  async getMetadata() {
-    const resouceType = 'OS::Nova::Aggregate';
+    const resourceType = 'OS::Nova::Aggregate';
    await this.metadataStore.fetchList({
      manage: true,
-      resource_types: resouceType,
+      resource_types: resourceType,
    });
    this.updateDefaultValue();
  }
--- a/src/pages/compute/containers/Hypervisors/ComputeHost/index.jsx
+++ b/src/pages/compute/containers/Hypervisors/ComputeHost/index.jsx
@ -28,7 +28,6 @@ export default class ComputeHost extends Base {

  get policy() {
    return onlyAdminCanReadPolicy;
-    // return 'os_compute_api:os-services:list';
  }

  get name() {
--- a/src/pages/compute/containers/Image/actions/Create.jsx
+++ b/src/pages/compute/containers/Image/actions/Create.jsx
@ -23,7 +23,7 @@ import {
  imageVisibility,
 } from 'resources/image';
 import { cpuPolicyList, cpuThreadPolicyList } from 'resources/flavor';
-import { NoSetValue, getOptionsWithNoset, getOptions } from 'utils/index';
+import { NoSetValue, getOptionsWithNoSet, getOptions } from 'utils/index';
 import { ProjectStore } from 'stores/keystone/project';
 import { projectTableOptions } from 'resources/project';

@ -282,14 +282,14 @@ export class CreateForm extends FormAction {
        name: 'hw_cpu_policy',
        label: t('CPU Policy'),
        type: 'select',
-        options: getOptionsWithNoset(cpuPolicyList),
+        options: getOptionsWithNoSet(cpuPolicyList),
        hidden: !more,
      },
      {
        name: 'hw_cpu_thread_policy',
        label: t('CPU Thread Policy'),
        type: 'select',
-        options: getOptionsWithNoset(cpuThreadPolicyList),
+        options: getOptionsWithNoSet(cpuThreadPolicyList),
        hidden: !more,
      },
    ];
--- a/src/pages/compute/containers/Image/actions/Edit.jsx
+++ b/src/pages/compute/containers/Image/actions/Edit.jsx
@ -18,7 +18,7 @@ import globalImageStore from 'stores/glance/image';
 import { imageOS, isOwner } from 'resources/image';
 import { has, get } from 'lodash';
 import { isActive } from 'resources/instance';
-import { NoSetValue, getOptionsWithNoset } from 'utils/index';
+import { NoSetValue, getOptionsWithNoSet } from 'utils/index';
 import { cpuPolicyList, cpuThreadPolicyList } from 'resources/flavor';

@inject('rootStore')
@ -174,14 +174,14 @@ class Edit extends ModalAction {
        name: 'hw_cpu_policy',
        label: t('CPU Policy'),
        type: 'select',
-        options: getOptionsWithNoset(cpuPolicyList),
+        options: getOptionsWithNoSet(cpuPolicyList),
        hidden: !more,
      },
      {
        name: 'hw_cpu_thread_policy',
        label: t('CPU Thread Policy'),
        type: 'select',
-        options: getOptionsWithNoset(cpuThreadPolicyList),
+        options: getOptionsWithNoSet(cpuThreadPolicyList),
        hidden: !more,
      },
    ];
--- a/src/pages/compute/containers/Image/actions/ManageMetadata.jsx
+++ b/src/pages/compute/containers/Image/actions/ManageMetadata.jsx
@ -60,10 +60,10 @@ export default class ManageMetadata extends ModalAction {
  };

  async getMetadata() {
-    const resouceType = 'OS::Glance::Image';
+    const resourceType = 'OS::Glance::Image';
    await this.metadataStore.fetchList({
      manage: true,
-      resource_types: resouceType,
+      resource_types: resourceType,
    });
    this.updateDefaultValue();
  }
@ -196,7 +196,7 @@ export default class ManageMetadata extends ModalAction {
  }

  onSubmit = (values) => {
-    const { customs: oldCumtoms, systems: oldSystems } =
+    const { customs: oldCustoms, systems: oldSystems } =
      this.parseExistMetadata();
    const { customs, systems } = values;
    const adds = [];
@ -204,7 +204,7 @@ export default class ManageMetadata extends ModalAction {
    const replaces = [];
    customs.forEach((it) => {
      const { key, value } = it.value || {};
-      const oldItem = oldCumtoms.find((c) => c.value.key === key);
+      const oldItem = oldCustoms.find((c) => c.value.key === key);
      if (!oldItem) {
        adds.push(it.value);
      } else if (oldItem.value.value !== value) {
@ -222,7 +222,7 @@ export default class ManageMetadata extends ModalAction {
        replaces.push(item);
      }
    });
-    oldCumtoms.forEach((it) => {
+    oldCustoms.forEach((it) => {
      const item = customs.find((custom) => custom.value.key === it.value.key);
      if (!item) {
        removes.push(it.value.key);
--- a/src/pages/compute/containers/Image/actions/index.jsx
+++ b/src/pages/compute/containers/Image/actions/index.jsx
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import CreatAction from './Create';
+import CreateAction from './Create';
 import EditAction from './Edit';
 import DeleteAction from './Delete';
 // import CreateInstance from 'pages/compute/containers/Instance/actions/StepCreate';
@ -41,7 +41,7 @@ const actionConfigs = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 const actionConfigsAdmin = {
@ -60,7 +60,7 @@ const actionConfigsAdmin = {
    ],
  },
  batchActions: [DeleteAction],
-  primaryActions: [CreatAction],
+  primaryActions: [CreateAction],
 };

 export default { actionConfigs, actionConfigsAdmin };
--- a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
+++ b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
@ -331,7 +331,7 @@ export class BaseDetail extends Base {
    const {
      match: { url },
    } = this.props;
-    const attachedVoluems = (this.volumeStore.list.data || []).map((item) => {
+    const attachedVolumes = (this.volumeStore.list.data || []).map((item) => {
      const volumeInfos = [
        {
          label: item.disk_tag === 'os_disk' ? t('Root Disk') : t('Data Disk'),
@ -386,7 +386,7 @@ export class BaseDetail extends Base {
      <Row className={styles['vm-volume']}>
        <div className={styles['volume-inline']} />
        <div className={styles['volume-content']}>
-          {attachedVoluems}
+          {attachedVolumes}
          <div>
            <div className={styles['attach-action-line']} />
            {/* <a onClick={this.info}>{t('Attach volume')}</a> */}
--- a/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/Detach.jsx
+++ b/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/Detach.jsx
@ -21,7 +21,7 @@ export default class DetachAction extends ConfirmAction {
  }

  get title() {
-    return t('Detach Securiry Group');
+    return t('Detach Security Group');
  }

  get buttonType() {
--- a/src/pages/compute/containers/Instance/actions/Lock.jsx
+++ b/src/pages/compute/containers/Instance/actions/Lock.jsx
@ -70,7 +70,7 @@ export default class LockAction extends ConfirmAction {
        name,
      }) +
      t(
-        'Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volumn.'
+        'Lock instance will lock the operations that have a direct impact on the operation of the instance, such as shutdown, restart, delete, etc. It does not involve the mounting, unmounting and capacity expansion of volume.'
      )
    );
  };
--- a/src/pages/compute/containers/Instance/actions/Resize.jsx
+++ b/src/pages/compute/containers/Instance/actions/Resize.jsx
@ -80,13 +80,13 @@ export class Resize extends ModalAction {

  static policy = 'os_compute_api:servers:resize';

-  static isAtiveOrShutOff = (item) => checkStatus(['active', 'shutoff'], item);
+  static isActiveOrShutOff = (item) => checkStatus(['active', 'shutoff'], item);

  static allowed = (item, containerProps) => {
    const { isAdminPage } = containerProps;
    return Promise.resolve(
      !this.isAdminPage &&
-        this.isAtiveOrShutOff(item) &&
+        this.isActiveOrShutOff(item) &&
        isNotLockedOrAdmin(item, isAdminPage) &&
        !isIronicInstance(item)
    );
--- a/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx
+++ b/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx
@ -78,13 +78,13 @@ export class ResizeOnline extends ModalAction {

  static policy = 'os_compute_api:servers:resize';

-  static isAtive = (item) => checkStatus(['active'], item);
+  static isActive = (item) => checkStatus(['active'], item);

  static allowed = (item, containerProps) => {
    const { isAdminPage } = containerProps;
    return Promise.resolve(
      !this.isAdminPage &&
-        this.isAtive(item) &&
+        this.isActive(item) &&
        isNotLockedOrAdmin(item, isAdminPage) &&
        !isIronicInstance(item) &&
        hasOnlineResizeFlavor(item)
--- a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
@ -93,10 +93,10 @@ export class SystemStep extends Base {
    }
    if (source.value === 'bootableVolume') {
      const { selectedRows = [] } = bootableVolume;
-      // create instace from instance list
+      // create instance from instance list
      const originData =
        (selectedRows.length && selectedRows[0].origin_data) || {};
-      // create instace from volume list
+      // create instance from volume list
      const volumeImageMetadata =
        selectedRows.length && selectedRows[0].volume_image_metadata;
      return originData.volume_image_metadata || volumeImageMetadata;
--- a/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
+++ b/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
@ -18,7 +18,7 @@ import { toJS } from 'mobx';
 import SelectTable from 'components/FormItem/SelectTable';
 import { Radio } from 'antd';
 import globalSettingStore from 'stores/skyline/setting';
-import globaFlavorStore from 'stores/nova/flavor';
+import globalFlavorStore from 'stores/nova/flavor';
 import {
  flavorArchitectures,
  flavorCategoryList,
@ -246,7 +246,7 @@ export class FlavorSelectTable extends Component {

  init() {
    this.settingStore = globalSettingStore;
-    this.flavorStore = globaFlavorStore;
+    this.flavorStore = globalFlavorStore;
    this.getSettings();
    this.getFlavors();
  }
@ -319,7 +319,7 @@ export class FlavorSelectTable extends Component {
    );
  }

-  renderTableHeander() {
+  renderTableHeader() {
    return (
      <div>
        {this.renderArchSelect()}
@ -335,7 +335,7 @@ export class FlavorSelectTable extends Component {
    const props = {
      columns: this.columns,
      data: this.flavors,
-      tableHeader: this.renderTableHeander(),
+      tableHeader: this.renderTableHeader(),
      isLoading,
      filterParams: [
        {
--- a/src/pages/compute/containers/Instance/index.jsx
+++ b/src/pages/compute/containers/Instance/index.jsx
@ -106,11 +106,11 @@ export class Instance extends Base {

  get batchActions() {
    const { selectedRowKeys = [], data = [] } = this.store.list;
-    const slectedRows = selectedRowKeys.map((key) => {
+    const selectedRows = selectedRowKeys.map((key) => {
      return data.find((it) => it.id === key);
    });
-    const allIronic = slectedRows.every((it) => isIronicInstance(it));
-    const noIronic = slectedRows.every((it) => !isIronicInstance(it));
+    const allIronic = selectedRows.every((it) => isIronicInstance(it));
+    const noIronic = selectedRows.every((it) => !isIronicInstance(it));
    if (allIronic) {
      return actionConfigs.batchActionsForIronic;
    }
--- a/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx
+++ b/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx
@ -46,8 +46,9 @@ export default class BaseDetail extends Base {
  }

  get resourceCard() {
-    const { resource_type_associations: resouces = [] } = this.detailData || {};
-    const options = resouces.map((item) => {
+    const { resource_type_associations: resources = [] } =
+      this.detailData || {};
+    const options = resources.map((item) => {
      const { name, prefix } = item;
      const label = name;
      const content = `${t('Prefix')}: ${prefix || '-'}`;
--- a/src/pages/configuration/containers/Metadata/actions/Manage.jsx
+++ b/src/pages/configuration/containers/Metadata/actions/Manage.jsx
@ -28,7 +28,7 @@ export default class Manage extends ModalAction {

  init() {
    this.store = new MetadataStore();
-    this.getRecourceTypes();
+    this.getResourceTypes();
  }

  get name() {
@ -43,7 +43,7 @@ export default class Manage extends ModalAction {
    return 'large';
  }

-  getRecourceTypes() {
+  getResourceTypes() {
    this.store.fetchResourceTypes(this.item);
  }

--- a/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Router/actions/Add.jsx
+++ b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Router/actions/Add.jsx
@ -18,7 +18,7 @@ import globalNeutronAgentRouterStore from 'stores/neutron/agent-router';
 import { ModalAction } from 'containers/Action';
 import {
  getRouterColumns,
-  routerFitlers,
+  routerFilters,
  routerSortProps,
 } from 'resources/router';
 import { projectRender } from 'utils/table';
@ -100,7 +100,7 @@ export default class AddRouter extends ModalAction {

  getFilters() {
    return [
-      ...routerFitlers,
+      ...routerFilters,
      {
        label: t('Project ID'),
        name: 'project_id',
--- a/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Router/index.jsx
+++ b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Router/index.jsx
@ -14,7 +14,7 @@

 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
-import { getRouterColumns, routerFitlers } from 'resources/router';
+import { getRouterColumns, routerFilters } from 'resources/router';
 import { NeutronAgentRouterStore } from 'stores/neutron/agent-router';
 import actionConfigs from './actions';

@ -44,7 +44,7 @@ export default class Router extends Base {
  getColumns = () => getRouterColumns(this);

  get searchFilters() {
-    return routerFitlers;
+    return routerFilters;
  }

  get adminPageHasProjectFilter() {
--- a/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx
+++ b/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx
@ -68,7 +68,7 @@ export default class BaseDetail extends Base {
  get startCard() {
    const options = [
      {
-        label: t('Timeout(Mininte)'),
+        label: t('Timeout(Minute)'),
        dataIndex: 'timeout_mins',
      },
      {
--- a/src/pages/identity/containers/Project/actions/UserGroupManager.jsx
+++ b/src/pages/identity/containers/Project/actions/UserGroupManager.jsx
@ -127,7 +127,7 @@ export class UserGroupManager extends ModalAction {
        title: t('Name'),
      },
      {
-        title: t('Select Projct Role'),
+        title: t('Select Project Role'),
        dataIndex: 'id',
        render: (id) => this.renderSelect(id),
      },
--- a/src/pages/identity/containers/Project/actions/UserManager.jsx
+++ b/src/pages/identity/containers/Project/actions/UserManager.jsx
@ -192,7 +192,7 @@ export class UserManager extends ModalAction {
        title: t('Name'),
      },
      {
-        title: t('Select Projct Role'),
+        title: t('Select Project Role'),
        dataIndex: 'id',
        render: (id) => this.renderSelect(id),
      },
--- a/src/pages/identity/containers/Role/Detail/BaseDetail.jsx
+++ b/src/pages/identity/containers/Role/Detail/BaseDetail.jsx
@ -36,7 +36,7 @@ export default class BaseDetail extends Base {
  };

  get detailData() {
-    return toJS(this.store.implieRoles);
+    return toJS(this.store.implyRoles);
  }

  get leftCards() {
--- a/src/pages/identity/containers/User/actions/Create.jsx
+++ b/src/pages/identity/containers/User/actions/Create.jsx
@ -99,11 +99,11 @@ export class CreateForm extends FormAction {
  get defaultValue() {
    const { domains } = this.store;
    const { domain } = this.state;
-    const domianDefault = (domains || []).filter((it) => it.id === domain)[0];
+    const domainDefault = (domains || []).filter((it) => it.id === domain)[0];
    const data = {
      more: false,
      enabled: statusTypes[0].value,
-      domain_id: domianDefault ? domianDefault.name : 'Default',
+      domain_id: domainDefault ? domainDefault.name : 'Default',
    };
    return data;
  }
@ -189,7 +189,7 @@ export class CreateForm extends FormAction {
        title: t('Name'),
      },
      {
-        title: t('Select Projct Role'),
+        title: t('Select Project Role'),
        dataIndex: 'id',
        render: (id) => (
          <Select
--- a/src/pages/identity/containers/User/actions/Edit.jsx
+++ b/src/pages/identity/containers/User/actions/Edit.jsx
@ -94,11 +94,11 @@ export class EditForm extends ModalAction {
    const domain = domains.filter((it) => it.id === domain_id)[0];
    const project = projects.filter((it) => it.id === default_project_id)[0];
    if (name && this.formRef.current) {
-      const formatedPhone = parsePhoneNumberFromString(phone || '', 'CN') || {
+      const formattedPhone = parsePhoneNumberFromString(phone || '', 'CN') || {
        countryCallingCode: '86',
        nationalNumber: '',
      };
-      const { countryCallingCode, nationalNumber } = formatedPhone;
+      const { countryCallingCode, nationalNumber } = formattedPhone;
      this.formRef.current.setFieldsValue({
        name,
        domain_id: domain ? domain.name : '',
--- a/src/pages/identity/containers/User/actions/SystemRole.jsx
+++ b/src/pages/identity/containers/User/actions/SystemRole.jsx
@ -155,14 +155,14 @@ export class SystemRole extends ModalAction {
    if (!users[projectId]) {
      roles[projectId] = [this.systemRoleList[0].id];
    } else {
-      const userssystemRole = users[projectId].filter((it) => {
+      const usersSystemRole = users[projectId].filter((it) => {
        const systemRole = this.systemRoleList.filter((role) => role.id === it);
        if (systemRole[0]) {
          return true;
        }
        return false;
      });
-      return userssystemRole;
+      return usersSystemRole;
    }
    return roles[projectId];
  };
--- a/src/pages/identity/containers/UserGroup/actions/Create.jsx
+++ b/src/pages/identity/containers/UserGroup/actions/Create.jsx
@ -157,7 +157,7 @@ class CreateForm extends ModalAction {
        title: t('Name'),
      },
      {
-        title: t('Select Projct Role'),
+        title: t('Select Project Role'),
        dataIndex: 'id',
        render: (id) => {
          return (
--- a/src/pages/identity/containers/UserGroup/actions/DomainPermission.jsx
+++ b/src/pages/identity/containers/UserGroup/actions/DomainPermission.jsx
@ -19,7 +19,7 @@ import globalRoleStore from 'stores/keystone/role';

@inject('rootStore')
@observer
-export default class DomainPermisson extends ModalAction {
+export default class DomainPermission extends ModalAction {
  init() {
    this.store = globalGroupStore;
    this.roleStore = globalRoleStore;
--- a/src/pages/identity/containers/UserGroup/actions/SystemPermission.jsx
+++ b/src/pages/identity/containers/UserGroup/actions/SystemPermission.jsx
@ -19,7 +19,7 @@ import globalRoleStore from 'stores/keystone/role';

@inject('rootStore')
@observer
-export default class SystemPermisson extends ModalAction {
+export default class SystemPermission extends ModalAction {
  init() {
    this.store = globalGroupStore;
    this.roleStore = globalRoleStore;
--- a/src/pages/monitor/containers/Overview/config.jsx
+++ b/src/pages/monitor/containers/Overview/config.jsx
@ -167,9 +167,9 @@ export const physicalNodeRightTopCardList = [
          },
        ];
        const result = get(responses[0], 'data.result', []);
-        result.forEach((sta) => {
-          const idx = sta.metric.adminState === 'enabled' ? 0 : 1;
-          status[idx].value += parseInt(sta.value[1], 10);
+        result.forEach((r) => {
+          const idx = r.metric.adminState === 'enabled' ? 0 : 1;
+          status[idx].value += parseInt(r.value[1], 10);
        });
        return status;
      },
--- a/src/pages/network/containers/FloatingIp/actions/index.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/index.jsx
@ -19,7 +19,6 @@ import Release from './Release';
 import Disassociate from './Disassociate';
 import Edit from './Edit';
 import CreateDNAT from './CreateDNAT';
-// import updateBwActionConfig from './UpdateBw';

 const actionConfigs = {
  rowActions: {
--- a/src/pages/network/containers/LoadBalancers/Listener/Detail/Member/Actions/CreateMember.jsx
+++ b/src/pages/network/containers/LoadBalancers/Listener/Detail/Member/Actions/CreateMember.jsx
@ -25,7 +25,7 @@ import isEqual from 'react-fast-compare';
@inject('rootStore')
@observer
 export default class CreateAction extends ModalAction {
-  static id = 'manage-mamber';
+  static id = 'manage-member';

  static title = t('Add Member');

@ -61,12 +61,11 @@ export default class CreateAction extends ModalAction {
      })
      .then((ports) => {
        this.setState({
-          ports: ports
-            .filter(
-              (port) =>
-                port.device_owner !== 'network:dhcp' &&
-                port.device_owner !== 'network:router_gateway'
-            )
+          ports: ports.filter(
+            (port) =>
+              port.device_owner !== 'network:dhcp' &&
+              port.device_owner !== 'network:router_gateway'
+          ),
        });
      });
  }
@ -129,13 +128,19 @@ export default class CreateAction extends ModalAction {
      return { weight, protocol_port, address, name, subnet_id };
    });
    extMembers.forEach((member) => {
-      const { ip, protocol_port, weight, name = null, subnet_id } = member.ip_address;
+      const {
+        ip,
+        protocol_port,
+        weight,
+        name = null,
+        subnet_id,
+      } = member.ip_address;
      const addMember = {
        weight,
        protocol_port,
        address: ip,
        name,
-        subnet_id
+        subnet_id,
      };
      members.push(addMember);
    });
--- a/src/pages/network/containers/LoadBalancers/Listener/Detail/Member/index.jsx
+++ b/src/pages/network/containers/LoadBalancers/Listener/Detail/Member/index.jsx
@ -18,7 +18,6 @@ import Base from 'containers/List';
 import { provisioningStatusCodes } from 'resources/lb';
 import globalPoolMemberStore from 'stores/octavia/pool-member';
 import { actionConfigs, adminActions } from './Actions';
-// import { toJS } from 'mobx';

@inject('rootStore')
@observer
--- a/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/StepCreate/BaseStep/index.jsx
+++ b/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/StepCreate/BaseStep/index.jsx
@ -105,7 +105,7 @@ export default class BaseStep extends Base {
      {
        name: 'vip_address',
        label: t('Owned Subnet'),
-        type: 'ip-distributer',
+        type: 'ip-distributor',
        subnets: subnetDetails,
        formRef: this.formRef,
        maxNumber: 1,
--- a/src/pages/network/containers/LoadBalancers/StepCreateComponents/MemberStep/index.jsx
+++ b/src/pages/network/containers/LoadBalancers/StepCreateComponents/MemberStep/index.jsx
@ -29,12 +29,11 @@ export default class MemberStep extends Base {
    };
    this.store.fetchList().then((ports) => {
      this.setState({
-        ports: ports
-          .filter(
-            (port) =>
-              port.device_owner !== 'network:dhcp' &&
-              port.device_owner !== 'network:router_gateway'
-          )
+        ports: ports.filter(
+          (port) =>
+            port.device_owner !== 'network:dhcp' &&
+            port.device_owner !== 'network:router_gateway'
+        ),
      });
    });
  }
--- a/src/pages/network/containers/Network/Detail/Subnets.jsx
+++ b/src/pages/network/containers/Network/Detail/Subnets.jsx
@ -46,9 +46,9 @@ export default class Subnets extends Base {
      this.itemInTransitionFunction(item)
    );
    if (hasTransData) {
-      this.setRefreshdataTimerTransition();
+      this.setRefreshDataTimerTransition();
    } else {
-      this.setRefreshdataTimerAuto();
+      this.setRefreshDataTimerAuto();
    }
    const ret = items.map((item) => {
      const usageDetail = this.subnet_ip_availability.find(
--- a/src/pages/network/containers/Router/Snat/actions/Create.jsx
+++ b/src/pages/network/containers/Router/Snat/actions/Create.jsx
@ -92,17 +92,8 @@ export default class Create extends ModalAction {
    }));
  }

-  get vms() {
-    // todo: filter vms
-    return [
-      {
-        label: 'ins-ww<192.168.1.9/32>',
-        value: JSON.stringify({
-          deviceId: '293fb643-8546-4b6f-be16-1eed69803d1e',
-          cidr: '192.168.1.9',
-        }),
-      },
-    ];
+  get instances() {
+    return [];
  }

  get formItems() {
@ -137,7 +128,7 @@ export default class Create extends ModalAction {
        name: 'vm',
        label: t('SNAT Source'),
        type: 'select',
-        options: this.vms,
+        options: this.instances,
        placeholder: t('Please select instance'),
        required: !isSubnet,
        hidden: isSubnet,
--- a/src/pages/network/containers/Router/actions/Create.jsx
+++ b/src/pages/network/containers/Router/actions/Create.jsx
@ -62,7 +62,7 @@ export class Create extends ModalAction {

  get defaultValue() {
    return {
-      openExterlNet: false,
+      openExternalNetwork: false,
    };
  }

@ -71,16 +71,21 @@ export class Create extends ModalAction {
  static allowed = () => Promise.resolve(true);

  onValuesChange = (changedFields) => {
-    if (has(changedFields, 'openExterlNet')) {
+    if (has(changedFields, 'openExternalNetwork')) {
      this.setState({
-        openExterlNet: changedFields.openExterlNet,
+        openExternalNetwork: changedFields.openExternalNetwork,
      });
    }
  };

  onSubmit = (values) => {
-    const { openExterlNet, externalNetwork, hints = {}, ...others } = values;
-    const extGateway = openExterlNet
+    const {
+      openExternalNetwork,
+      externalNetwork,
+      hints = {},
+      ...others
+    } = values;
+    const extGateway = openExternalNetwork
      ? {
          external_gateway_info: {
            network_id: externalNetwork.selectedRows[0].id,
@ -96,7 +101,7 @@ export class Create extends ModalAction {
  };

  get formItems() {
-    const { openExterlNet } = this.state;
+    const { openExternalNetwork } = this.state;
    return [
      {
        name: 'name',
@ -142,7 +147,7 @@ export class Create extends ModalAction {
        ],
      },
      {
-        name: 'openExterlNet',
+        name: 'openExternalNetwork',
        label: t('Options'),
        type: 'check',
        content: t('Open External Gateway'),
@ -153,8 +158,8 @@ export class Create extends ModalAction {
        type: 'select-table',
        backendPageStore: this.networkStore,
        extraParams: { 'router:external': true },
-        required: openExterlNet,
-        hidden: !openExterlNet,
+        required: openExternalNetwork,
+        hidden: !openExternalNetwork,
        filterParams: [
          {
            label: t('Name'),
--- a/src/pages/network/containers/Router/index.jsx
+++ b/src/pages/network/containers/Router/index.jsx
@ -14,7 +14,7 @@

 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
-import { getRouterColumns, routerFitlers } from 'resources/router';
+import { getRouterColumns, routerFilters } from 'resources/router';
 import globalRouterStore, { RouterStore } from 'stores/neutron/router';
 import actionConfigs from './actions';

@ -57,7 +57,7 @@ export class Routes extends Base {
  getColumns = () => getRouterColumns(this);

  get searchFilters() {
-    return routerFitlers;
+    return routerFilters;
  }
 }

--- a/Show More
+++ b/Show More