diff --git a/config/webpack.common.js b/config/webpack.common.js
index ce1e68ab..82b26ccc 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -127,6 +127,7 @@ module.exports = {
       locales: root('src/locales'),
       styles: root('src/styles'),
       resources: root('src/resources'),
+      client: root('src/client'),
     },
   },
   plugins: [
diff --git a/package.json b/package.json
index 7dda56c7..97cd403c 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,8 @@
     "react-highcharts": "^16.0.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-sortable-hoc": "1.11.0"
+    "react-sortable-hoc": "1.11.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
diff --git a/src/api/cinder/base.js b/src/api/cinder/base.js
index a232d23b..441ba487 100644
--- a/src/api/cinder/base.js
+++ b/src/api/cinder/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { cinderBase } from 'utils/constants';
+import { cinderBase } from 'client/client/constants';
 
 const getCinderBaseUrl = (key) => `${cinderBase()}/${key}`;
 
diff --git a/src/api/glance/base.js b/src/api/glance/base.js
index 485ed93a..06de3c80 100644
--- a/src/api/glance/base.js
+++ b/src/api/glance/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { glanceBase } from 'utils/constants';
+import { glanceBase } from 'client/client/constants';
 
 const getGlanceBaseUrl = (key) => `${glanceBase()}/${key}`;
 
diff --git a/src/api/gocron/base.js b/src/api/gocron/base.js
index 47e29752..fbee73db 100644
--- a/src/api/gocron/base.js
+++ b/src/api/gocron/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { gocronBase } from 'utils/constants';
+import { gocronBase } from 'client/client/constants';
 
 const getGocronBaseUrl = (key) => `${gocronBase()}/${key}`;
 
diff --git a/src/api/heat/base.js b/src/api/heat/base.js
index aee33519..a6fcd3c4 100644
--- a/src/api/heat/base.js
+++ b/src/api/heat/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { heatBase } from 'utils/constants';
+import { heatBase } from 'client/client/constants';
 
 const getHeatBaseUrl = (key) => `${heatBase()}/${key}`;
 
diff --git a/src/api/ironic-inspector/base.js b/src/api/ironic-inspector/base.js
index 61d557ba..296d6328 100644
--- a/src/api/ironic-inspector/base.js
+++ b/src/api/ironic-inspector/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { ironicInspectorBase } from 'utils/constants';
+import { ironicInspectorBase } from 'client/client/constants';
 
 const getIronicInspectorBaseUrl = (key) => `${ironicInspectorBase()}/${key}`;
 
diff --git a/src/api/ironic/base.js b/src/api/ironic/base.js
index bc909b08..efe92619 100644
--- a/src/api/ironic/base.js
+++ b/src/api/ironic/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { ironicBase } from 'utils/constants';
+import { ironicBase } from 'client/client/constants';
 
 const getIronicBaseUrl = (key) => `${ironicBase()}/${key}`;
 
diff --git a/src/api/keystone/base.js b/src/api/keystone/base.js
index cb7cad0e..df7a5a01 100644
--- a/src/api/keystone/base.js
+++ b/src/api/keystone/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { keystoneBase } from 'utils/constants';
+import { keystoneBase } from 'client/client/constants';
 
 const getKeystoneBaseUrl = (key) => `${keystoneBase()}/${key}`;
 
diff --git a/src/api/neutron/base.js b/src/api/neutron/base.js
index d30feb56..dacb44c7 100644
--- a/src/api/neutron/base.js
+++ b/src/api/neutron/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { neutronBase } from 'utils/constants';
+import { neutronBase } from 'client/client/constants';
 
 const getNeutronBaseUrl = (key) => `${neutronBase()}/${key}`;
 
diff --git a/src/api/nova/base.js b/src/api/nova/base.js
index 0d4a3366..0f29be21 100644
--- a/src/api/nova/base.js
+++ b/src/api/nova/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { novaBase } from 'utils/constants';
+import { novaBase } from 'client/client/constants';
 
 const getNovaBaseUrl = (key) => `${novaBase()}/${key}`;
 
diff --git a/src/api/octavia/base.js b/src/api/octavia/base.js
index 85f0e052..942537f0 100644
--- a/src/api/octavia/base.js
+++ b/src/api/octavia/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { octaviaBase } from 'utils/constants';
+import { octaviaBase } from 'client/client/constants';
 
 const getOctaviaBaseUrl = (key) => `${octaviaBase()}/${key}`;
 
diff --git a/src/api/panko/base.js b/src/api/panko/base.js
index e3b159d3..3e2ab460 100644
--- a/src/api/panko/base.js
+++ b/src/api/panko/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { pankoBase } from 'utils/constants';
+import { pankoBase } from 'client/client/constants';
 
 const getPankoBaseUrl = (key) => `${pankoBase()}/${key}`;
 
diff --git a/src/api/placement/base.js b/src/api/placement/base.js
index 30017b79..1d5d9f55 100644
--- a/src/api/placement/base.js
+++ b/src/api/placement/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { placementBase } from 'utils/constants';
+import { placementBase } from 'client/client/constants';
 
 const getPlacementBaseUrl = (key) => `${placementBase()}/${key}`;
 
diff --git a/src/api/skyline/base.js b/src/api/skyline/base.js
index 19765c92..3c52be07 100644
--- a/src/api/skyline/base.js
+++ b/src/api/skyline/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { skylineBase } from 'utils/constants';
+import { skylineBase } from 'client/client/constants';
 
 const getSkylineBaseUrl = (key) => `${skylineBase()}/${key}`;
 
diff --git a/src/api/swift/base.js b/src/api/swift/base.js
index 1b78587a..b7a0ee4e 100644
--- a/src/api/swift/base.js
+++ b/src/api/swift/base.js
@@ -16,7 +16,7 @@
  * @param {String} key api url
  * @returns {String}
  */
-import { swiftBase } from 'utils/constants';
+import { swiftBase } from 'client/client/constants';
 
 const getSwiftBaseUrl = (key) => `${swiftBase()}/${key}`;
 
diff --git a/src/client/cinder/index.js b/src/client/cinder/index.js
new file mode 100644
index 00000000..578b81cf
--- /dev/null
+++ b/src/client/cinder/index.js
@@ -0,0 +1,155 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { cinderBase } from '../client/constants';
+
+class CinderClient extends Base {
+  get baseUrl() {
+    return cinderBase();
+  }
+
+  get projectInUrl() {
+    return true;
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'volumes',
+        responseKey: 'volume',
+        extendOperations: [
+          {
+            key: 'action',
+            method: 'post',
+          },
+        ],
+      },
+      {
+        key: 'types',
+        responseKey: 'volume_type',
+        extendOperations: [
+          {
+            key: 'action',
+            method: 'post',
+          },
+          {
+            name: 'getAccess',
+            key: 'os-volume-type-access',
+          },
+        ],
+        subResources: [
+          {
+            name: 'extraSpecs',
+            key: 'extra_specs',
+            responseKey: 'extra_spec',
+          },
+          {
+            key: 'encryption',
+          },
+        ],
+      },
+      {
+        key: 'snapshots',
+        responseKey: 'snapshot',
+      },
+      {
+        key: 'backups',
+        responseKey: 'backup',
+        extendOperations: [
+          {
+            key: 'restore',
+            isDetail: true,
+            method: 'post',
+          },
+        ],
+      },
+      {
+        name: 'backupChains',
+        key: 'backup_chains',
+        responseKey: 'backup_chain',
+        extendOperations: [
+          {
+            key: 'restore',
+            isDetail: true,
+            method: 'post',
+          },
+        ],
+      },
+      {
+        name: 'pools',
+        key: 'scheduler-stats/get_pools',
+        responseKey: 'pool',
+      },
+      {
+        name: 'qosSpecs',
+        key: 'qos-specs',
+        responseKey: 'qos_spec',
+        extendOperations: [
+          {
+            name: 'deleteKeys',
+            key: 'delete_keys',
+            method: 'put',
+          },
+          {
+            key: 'associate',
+          },
+          {
+            key: 'disassociate',
+          },
+        ],
+      },
+      {
+        name: 'services',
+        key: 'os-services',
+        responseKey: 'service',
+        extendOperations: [
+          {
+            key: 'enable',
+            isDetail: false,
+            method: 'put',
+          },
+          {
+            name: 'reason',
+            key: 'disable-log-reason',
+            isDetail: false,
+            method: 'put',
+          },
+        ],
+      },
+      {
+        name: 'quotaSets',
+        key: 'os-quota-sets',
+        responseKey: 'quota_set',
+      },
+      {
+        name: 'azones',
+        key: 'os-availability-zone',
+      },
+      {
+        name: 'volumeTransfers',
+        key: 'volume-transfers',
+        extendOperations: [
+          {
+            key: 'accept',
+            method: 'post',
+          },
+        ],
+      },
+    ];
+  }
+}
+
+const cinderClient = new CinderClient();
+export default cinderClient;
diff --git a/src/client/client/base.js b/src/client/client/base.js
new file mode 100644
index 00000000..b6e0e3f6
--- /dev/null
+++ b/src/client/client/base.js
@@ -0,0 +1,420 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import globalRootStore from 'stores/root';
+import clientRequest from './request';
+
+export default class BaseClient {
+  constructor() {
+    this.generateAll();
+  }
+
+  getUrl = (url) => {
+    if (this.projectInUrl) {
+      return `${this.baseUrl}/${this.project}/${url}`;
+    }
+    return `${this.baseUrl}/${url}`;
+  };
+
+  get request() {
+    const { request } = clientRequest;
+    return {
+      get: (url, params, conf) => request.get(this.getUrl(url), params, conf),
+      post: (url, data, params, conf) =>
+        request.post(this.getUrl(url), data, params, conf),
+      put: (url, data, params, conf) =>
+        request.put(this.getUrl(url), data, params, conf),
+      delete: (url, data, params, conf) =>
+        request.delete(this.getUrl(url), data, params, conf),
+      patch: (url, data, params, conf) =>
+        request.patch(this.getUrl(url), data, params, conf),
+      head: (url, params, conf) => request.head(this.getUrl(url), params, conf),
+    };
+  }
+
+  get originRequest() {
+    const { request } = clientRequest;
+    return request;
+  }
+
+  get params() {
+    return [];
+  }
+
+  get baseUrl() {
+    return '';
+  }
+
+  get projectInUrl() {
+    return false;
+  }
+
+  get project() {
+    if (!this.projectInUrl) {
+      return '';
+    }
+    const { project: { id } = {} } = globalRootStore.user || {};
+    return id || '';
+  }
+
+  get enabled() {
+    return true;
+  }
+
+  get resources() {
+    return [];
+  }
+
+  getListUrl(resourceName) {
+    return resourceName;
+  }
+
+  getDetailUrl(resourceName, id) {
+    if (!id) {
+      return resourceName;
+    }
+    if (resourceName[resourceName.length - 1] === '/') {
+      return `${resourceName.substr(0, resourceName.length - 1)}/${id}`;
+    }
+    return `${resourceName}/${id}`;
+  }
+
+  getSubResourceUrl(resourceName, subResourceName) {
+    if (!resourceName) {
+      return subResourceName;
+    }
+    if (resourceName[resourceName.length - 1] === '/') {
+      return `${resourceName.substr(
+        0,
+        resourceName.length - 1
+      )}/${subResourceName}`;
+    }
+    return `${resourceName}/${subResourceName}`;
+  }
+
+  getSubResourceUrlById(resourceName, subResourceName, id) {
+    return `${this.getDetailUrl(resourceName, id)}/${subResourceName}`;
+  }
+
+  getSubResourceUrlBySubId(resourceName, subResourceName, id, subId) {
+    return `${this.getSubResourceUrlById(
+      resourceName,
+      subResourceName,
+      id
+    )}/${subId}`;
+  }
+
+  getSubSubResourceListUrl(
+    resourceName,
+    subResourceName,
+    subSubResourceName,
+    id,
+    subId
+  ) {
+    return `${this.getSubResourceUrlBySubId(
+      resourceName,
+      subResourceName,
+      id,
+      subId
+    )}/${subSubResourceName}`;
+  }
+
+  getSubSubResourceDetailUrl(
+    resourceName,
+    subResourceName,
+    subSubResourceName,
+    id,
+    subId,
+    subSubId
+  ) {
+    return `${this.getSubSubResourceListUrl(
+      resourceName,
+      subResourceName,
+      subSubResourceName,
+      id,
+      subId
+    )}/${subSubId}`;
+  }
+
+  generateResource = (resourceName, responseKey, enabled = true) => {
+    const listUrl = this.getListUrl(resourceName);
+    return {
+      list: (params, conf) => this.request.get(listUrl, params, conf),
+      listDetail: (params, conf) =>
+        this.request.get(`${listUrl}/detail`, params, conf),
+      show: (id, params, conf) => {
+        return this.request.get(
+          this.getDetailUrl(resourceName, id),
+          params,
+          conf
+        );
+      },
+      create: (data, ...args) => this.request.post(listUrl, data, ...args),
+      update: (id, data, ...args) =>
+        this.request.put(this.getDetailUrl(resourceName, id), data, ...args),
+      patch: (id, data, ...args) =>
+        this.request.patch(this.getDetailUrl(resourceName, id), data, ...args),
+      delete: (id, ...args) =>
+        this.request.delete(this.getDetailUrl(resourceName, id), ...args),
+      responseKey,
+      enabled,
+    };
+  };
+
+  generateSubResource = (
+    resourceName,
+    subResourceName,
+    responseKey,
+    enabled
+  ) => ({
+    list: (id, params, ...args) =>
+      this.request.get(
+        this.getSubResourceUrlById(resourceName, subResourceName, id),
+        params,
+        ...args
+      ),
+    listDetail: (id, params, ...args) =>
+      this.request.get(
+        `${this.getSubResourceUrlById(
+          resourceName,
+          subResourceName,
+          id
+        )}/detail`,
+        params,
+        ...args
+      ),
+    show: (id, subId, params, ...args) =>
+      this.request.get(
+        this.getSubResourceUrlBySubId(resourceName, subResourceName, id, subId),
+        params,
+        ...args
+      ),
+    create: (id, data, ...args) =>
+      this.request.post(
+        this.getSubResourceUrlById(resourceName, subResourceName, id),
+        data,
+        ...args
+      ),
+    update: (id, subId, data, ...args) =>
+      this.request.put(
+        this.getSubResourceUrlBySubId(resourceName, subResourceName, id, subId),
+        data,
+        ...args
+      ),
+    patch: (id, subId, data, ...args) =>
+      this.request.patch(
+        this.getSubResourceUrlBySubId(resourceName, subResourceName, id, subId),
+        data,
+        ...args
+      ),
+    delete: (id, subId, ...args) =>
+      this.request.delete(
+        this.getSubResourceUrlBySubId(resourceName, subResourceName, id, subId),
+        ...args
+      ),
+    responseKey,
+    enabled,
+  });
+
+  generateSubSonResource = (
+    resourceName,
+    subResourceName,
+    subSubResonseName,
+    responseKey
+  ) => ({
+    list: (id, subId, params, ...args) =>
+      this.request.get(
+        this.getSubSubResourceListUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId
+        ),
+        params,
+        ...args
+      ),
+    show: (id, subId, subSubId, params, ...args) =>
+      this.request.get(
+        this.getSubSubResourceDetailUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId,
+          subSubId
+        ),
+        params,
+        ...args
+      ),
+    create: (id, subId, data, ...args) =>
+      this.request.post(
+        this.getSubSubResourceListUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId
+        ),
+        data,
+        ...args
+      ),
+    update: (id, subId, subSubId, data, ...args) =>
+      this.request.put(
+        this.getSubSubResourceDetailUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId,
+          subSubId
+        ),
+        data,
+        ...args
+      ),
+    patch: (id, subId, subSubId, data, ...args) =>
+      this.request.patch(
+        this.getSubSubResourceDetailUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId,
+          subSubId
+        ),
+        data,
+        ...args
+      ),
+    delete: (id, subId, subSubId, ...args) =>
+      this.request.delete(
+        this.getSubSubResourceDetailUrl(
+          resourceName,
+          subResourceName,
+          subSubResonseName,
+          id,
+          subId,
+          subSubId
+        ),
+        ...args
+      ),
+    responseKey,
+  });
+
+  setRequest = (url, method, ...restArgs) => {
+    const lowerMethod = method.toLowerCase();
+    return this.request[lowerMethod](url, ...restArgs);
+  };
+
+  generateAll = () => {
+    this.resources.forEach((resource) => {
+      const {
+        name,
+        key,
+        responseKey,
+        enabled,
+        subResources = [],
+        isResource = true,
+        extendOperations = [],
+      } = resource;
+      const result = isResource
+        ? this.generateResource(key, responseKey, enabled)
+        : {};
+      const realName = name || key;
+      extendOperations.forEach((other) => {
+        const {
+          name: otherName,
+          key: otherKey,
+          method = 'get',
+          isDetail,
+          generate,
+          url,
+        } = other;
+        const otherRealName = otherName || otherKey;
+        const otherUrl = url && url();
+        const otherIsDetail = isResource
+          ? isDetail === undefined
+            ? true
+            : isDetail
+          : isDetail === undefined
+          ? false
+          : isDetail;
+        if (generate) {
+          result[otherRealName] = generate;
+        } else if (otherIsDetail) {
+          result[otherRealName] = (id, ...args) => {
+            return this.setRequest(
+              otherUrl || this.getSubResourceUrlById(key, otherKey, id),
+              method,
+              ...args
+            );
+          };
+        } else {
+          result[otherRealName] = (...args) => {
+            return this.setRequest(
+              otherUrl || this.getSubResourceUrl(key, otherKey),
+              method,
+              ...args
+            );
+          };
+        }
+      });
+      subResources.forEach((sub) => {
+        let subResult = {};
+        const {
+          name: subName,
+          key: subKey,
+          responseKey: subResponseKey,
+          method: subMethod,
+          enabled: subEnabled,
+          subResources: subSubResources = [],
+        } = sub;
+        const subRealName = subName || subKey;
+        if (!subMethod) {
+          subResult = this.generateSubResource(
+            key,
+            subKey,
+            subResponseKey,
+            subEnabled
+          );
+        } else {
+          subResult = (id, ...args) => {
+            const url = this.getSubResourceUrlById(key, subKey, id);
+            return this.setRequest(url, subMethod, ...args);
+          };
+        }
+        subSubResources.forEach((son) => {
+          const {
+            key: sonKey,
+            name: sonName,
+            responseKey: sonResponseKey,
+          } = son;
+          subResult[sonName || sonKey] = this.generateSubSonResource(
+            key,
+            subKey,
+            sonKey,
+            sonResponseKey
+          );
+        });
+        result[subRealName] = subResult;
+      });
+      if (realName) {
+        this[realName] = result;
+      } else {
+        Object.keys(result).forEach((resultKey) => {
+          this[resultKey] = result[resultKey];
+        });
+      }
+    });
+  };
+}
diff --git a/src/client/client/constants.js b/src/client/client/constants.js
new file mode 100644
index 00000000..14392b27
--- /dev/null
+++ b/src/client/client/constants.js
@@ -0,0 +1,125 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import globalRootStore from 'stores/root';
+import { toJS } from 'mobx';
+
+export const groupNameVersionMap = {
+  core: 'v1',
+  system: 'v1',
+};
+
+const endpointVersionMap = {
+  keystone: 'v3',
+  nova: 'v2.1',
+  cinder: 'v3',
+  glance: 'v2',
+  neutron: 'v2.0',
+  ironic: 'v1',
+  ironicInspector: 'v1',
+  heat: 'v1',
+  swift: 'v1',
+  octavia: 'v2',
+  courier: 'v1',
+  prometheus: 'api/v1',
+  prometheus_sidecar: 'api/v1',
+  gocron: 'api',
+  panko: 'v2',
+  billing_system: 'api/core.io/v1',
+  workflow: 'api/core.io/v1',
+};
+
+const endpointsDefault = {
+  ironic: '/api/openstack/ironic',
+  ironicInspector: '/api/openstack/ironic-inspector',
+  swift: '/api/openstack/swift/swift',
+  octavia: '/api/openstack/octavia',
+};
+
+export const getOpenstackEndpoint = (key) => {
+  const { endpoints = {} } = globalRootStore || {};
+  const version = endpointVersionMap[key];
+  const endpoint = endpoints[key] || endpointsDefault[key] || '';
+  return version ? `${endpoint}/${version}` : endpoint;
+};
+
+export const getOriginEndpoint = (key) => {
+  const endpoints = toJS((globalRootStore && globalRootStore.endpoints) || {});
+  return endpoints[key];
+};
+
+export const skylineBase = () => '/api/openstack/skyline/api/v1';
+export const keystoneBase = () => getOpenstackEndpoint('keystone');
+export const novaBase = () => getOpenstackEndpoint('nova');
+export const cinderBase = () => getOpenstackEndpoint('cinder');
+export const glanceBase = () => getOpenstackEndpoint('glance');
+export const neutronBase = () => getOpenstackEndpoint('neutron');
+export const ironicBase = () => getOpenstackEndpoint('ironic');
+export const ironicInspectorBase = () =>
+  getOpenstackEndpoint('ironicInspector');
+export const placementBase = () => getOpenstackEndpoint('placement');
+export const heatBase = () => getOpenstackEndpoint('heat');
+export const swiftBase = () => getOpenstackEndpoint('swift');
+export const octaviaBase = () => getOpenstackEndpoint('octavia');
+export const alertmanagerBase = () => getOpenstackEndpoint('alertmanager');
+export const prometheusBase = () => getOpenstackEndpoint('prometheus');
+export const prometheusSidecarBase = () =>
+  getOpenstackEndpoint('prometheus_sidecar');
+export const courierBase = () => getOpenstackEndpoint('courier');
+export const gocronBase = () => getOpenstackEndpoint('gocron');
+export const pankoBase = () => getOpenstackEndpoint('panko');
+export const s3Base = () => getOpenstackEndpoint('s3');
+export const billingBase = () => getOpenstackEndpoint('billing_system');
+export const workflowBase = () => getOpenstackEndpoint('workflow');
+
+export const ironicOriginEndpoint = () => getOriginEndpoint('ironic');
+export const s3OriginEndpoint = () => getOriginEndpoint('s3');
+export const billingEndpoint = () => getOriginEndpoint('billing_system');
+export const firewallEndpoint = () => getOriginEndpoint('neutron_firewall');
+export const vpnEndpoint = () => getOriginEndpoint('neutron_vpn');
+export const lbEndpoint = () => getOriginEndpoint('octavia');
+
+export const apiVersionMaps = {
+  nova: {
+    key: 'Openstack-Api-Version',
+    value: 'compute 2.79',
+  },
+  placement: {
+    key: 'Openstack-Api-Version',
+    value: 'placement 1.28',
+  },
+  cinder: {
+    key: 'Openstack-Api-Version',
+    value: 'volume 3.59',
+  },
+  ironic: {
+    key: 'X-Openstack-Ironic-Api-Version',
+    value: '1.58',
+  },
+  'ironic-inspect': {
+    key: 'X-OpenStack-Ironic-Inspector-API-Version',
+    value: '1.15',
+  },
+};
+
+export const getOpenstackApiVersion = (url) => {
+  const key = Object.keys(apiVersionMaps).find((it) => url.indexOf(it) > -1);
+  if (!key) {
+    return null;
+  }
+  return apiVersionMaps[key];
+};
+
+export const getK8sTypeEndpoint = (groupName, baseUrl) =>
+  `${baseUrl}/${groupName}/${groupNameVersionMap[groupName]}`;
diff --git a/src/client/client/request.js b/src/client/client/request.js
new file mode 100644
index 00000000..88943b75
--- /dev/null
+++ b/src/client/client/request.js
@@ -0,0 +1,181 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Axios from 'axios';
+import { getLocalStorageItem } from 'utils/local-storage';
+import { isEqual } from 'lodash';
+import qs from 'qs';
+import globalRootStore from 'stores/root';
+import { v4 as uuidv4 } from 'uuid';
+import { getOpenstackApiVersion } from './constants';
+
+const METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD'];
+/**
+ * @class HttpRequest
+ * request with axios
+ */
+export class HttpRequest {
+  constructor() {
+    this.request = {};
+  }
+
+  /**
+   * @param instance instance of axios
+   * @param url request url
+   * interceptors includes request & response
+   * @returns {void}
+   */
+  interceptors(instance, url) {
+    instance.interceptors.request.use(
+      (config) => {
+        const uuid = uuidv4();
+        config.headers['X-Openstack-Request-Id'] = `req-${uuid}`;
+        const keystoneToken = getLocalStorageItem('keystone_token') || '';
+        const apiVersionMap = getOpenstackApiVersion(url);
+        if (keystoneToken) {
+          config.headers['X-Auth-Token'] = keystoneToken;
+        }
+        if (apiVersionMap) {
+          config.headers[apiVersionMap.key] = apiVersionMap.value;
+        }
+        const { options: { headers, isFormData, ...rest } = {} } = config;
+        if (!isEqual(headers)) {
+          config.headers = {
+            ...config.headers,
+            ...headers,
+          };
+        }
+        if (isFormData) {
+          delete config.headers['Content-Type'];
+        }
+        Object.keys(rest).forEach((key) => {
+          config[key] = rest[key];
+        });
+        return config;
+      },
+      (err) => Promise.reject(err)
+    );
+
+    instance.interceptors.response.use(
+      (response) => {
+        // request is finished
+        const { data, status } = response;
+        const disposition = response.headers['content-disposition'] || '';
+        const contentType = response.headers['content-type'] || '';
+        if (contentType.includes('application/octet-stream')) {
+          return response;
+        }
+        if (disposition.includes('attachment')) {
+          return response;
+        }
+        if (status < 200 || status >= 300) {
+          return Promise.reject(data);
+        }
+        return data;
+      },
+      (error) => {
+        // request is finished
+        // eslint-disable-next-line no-console
+        console.log('error.response', error.response, error);
+        if (error.response) {
+          const { status } = error.response;
+          if (status === 401) {
+            const currentPath = window.location.pathname;
+            if (currentPath.indexOf('login') < 0) {
+              globalRootStore.gotoLoginPage(currentPath);
+            }
+          }
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /**
+   * create a new instance of axios with a custom config
+   */
+  create() {
+    const conf = {
+      baseURL: '/',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8',
+        'cache-control': 'no-cache',
+        pragma: 'no-cache',
+      },
+    };
+    return Axios.create(conf);
+  }
+
+  /**
+   * @param {Object} obj translated object
+   * @returns {Object} trim undefined & null
+   */
+  omitNil(obj) {
+    if (typeof obj !== 'object') return obj;
+    return Object.keys(obj).reduce((acc, v) => {
+      if (obj[v] !== undefined && obj[v] !== null && obj[v] !== '')
+        acc[v] = obj[v];
+      return acc;
+    }, {});
+  }
+
+  /**
+   * build request
+   * @param {Object} config requests config
+   * @returns {Promise} axios instance return promise
+   */
+  buildRequest(config) {
+    const method = config.method ? config.method.toLowerCase() : 'get';
+    const options = { ...config };
+    // Only get and head, we need to use null for some posts requests
+    if (options.params && ['get', 'head'].includes(method)) {
+      options.params = this.omitNil(options.params);
+      options.paramsSerializer = (p) =>
+        qs.stringify(p, { arrayFormat: 'repeat' });
+    }
+    const instance = this.create();
+    this.interceptors(instance, options.url);
+    return instance(options);
+  }
+
+  generateRequestMap = () => {
+    METHODS.forEach((method) => {
+      const lowerMethod = method.toLowerCase();
+      if (lowerMethod === 'get' || lowerMethod === 'head') {
+        this.request[lowerMethod] = (url, params = {}, options) => {
+          return this.buildRequest({
+            method: lowerMethod,
+            url,
+            params,
+            options,
+          });
+        };
+      } else {
+        this.request[lowerMethod] = (url, data, params, options) => {
+          return this.buildRequest({
+            method: lowerMethod,
+            url,
+            data,
+            params,
+            options,
+          });
+        };
+      }
+    });
+  };
+}
+
+const httpRequest = new HttpRequest();
+httpRequest.generateRequestMap();
+export default httpRequest;
diff --git a/src/client/glance/index.js b/src/client/glance/index.js
new file mode 100644
index 00000000..8ac50522
--- /dev/null
+++ b/src/client/glance/index.js
@@ -0,0 +1,87 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { glanceBase } from '../client/constants';
+
+class GlanceClient extends Base {
+  get baseUrl() {
+    return glanceBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'images',
+        responseKey: 'image',
+        extendOperations: [
+          {
+            key: 'count',
+            isDetail: false,
+          },
+          {
+            key: 'uploadFile',
+            generate: (id, body, conf = {}) => {
+              return this.request.put(
+                `${this.getDetailUrl('images', id)}/file`,
+                body,
+                null,
+                {
+                  headers: {
+                    'content-type': 'application/octet-stream',
+                  },
+                  ...conf,
+                }
+              );
+            },
+          },
+          {
+            key: 'patch',
+            generate: (id, data) =>
+              this.request.patch(this.getDetailUrl('images', id), data, null, {
+                headers: {
+                  'content-type':
+                    'application/openstack-images-v2.1-json-patch',
+                },
+              }),
+          },
+        ],
+        subResources: [
+          {
+            key: 'members',
+          },
+        ],
+      },
+      {
+        name: 'namespaces',
+        key: 'metadefs/namespaces',
+        responseKey: 'namespace',
+        subResources: [
+          {
+            name: 'resourceTypes',
+            key: 'resource_types',
+          },
+        ],
+      },
+      {
+        name: 'resourceTypes',
+        key: 'metadefs/resource_types',
+        responseKey: 'resource_type',
+      },
+    ];
+  }
+}
+
+const glanceClient = new GlanceClient();
+export default glanceClient;
diff --git a/src/client/heat/index.js b/src/client/heat/index.js
new file mode 100644
index 00000000..20c1470a
--- /dev/null
+++ b/src/client/heat/index.js
@@ -0,0 +1,93 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { heatBase } from '../client/constants';
+
+class HeatClient extends Base {
+  get baseUrl() {
+    return heatBase();
+  }
+
+  get projectInUrl() {
+    return true;
+  }
+
+  getDetailUrlForStack = ({ id, name }) => `stacks/${name}/${id}`;
+
+  get resources() {
+    return [
+      {
+        key: 'stacks',
+        responseKey: 'stack',
+        extendOperations: [
+          {
+            key: 'show',
+            generate: ({ id, name }, params) => {
+              return this.request.get(
+                this.getDetailUrlForStack({ id, name }),
+                params
+              );
+            },
+          },
+          {
+            key: 'update',
+            generate: ({ id, name }, data) =>
+              this.request.put(this.getDetailUrlForStack({ id, name }), data),
+          },
+          {
+            key: 'delete',
+            generate: ({ id, name }) =>
+              this.request.delete(this.getDetailUrlForStack({ id, name })),
+          },
+          {
+            key: 'abandon',
+            generate: ({ id, name }) =>
+              this.request.delete(
+                `${this.getDetailUrlForStack({ id, name })}/abandon`
+              ),
+          },
+          {
+            key: 'template',
+            generate: ({ id, name }) =>
+              this.request.get(
+                `${this.getDetailUrlForStack({ id, name })}/template`
+              ),
+          },
+          {
+            key: 'events',
+            generate: ({ id, name }) =>
+              this.request.get(
+                `${this.getDetailUrlForStack({ id, name })}/events`
+              ),
+          },
+          {
+            key: 'resources',
+            generate: ({ id, name }) =>
+              this.request.get(
+                `${this.getDetailUrlForStack({ id, name })}/resources`
+              ),
+          },
+        ],
+      },
+      {
+        key: 'services',
+        responseKey: 'service',
+      },
+    ];
+  }
+}
+
+const heatClient = new HeatClient();
+export default heatClient;
diff --git a/src/client/index.js b/src/client/index.js
new file mode 100644
index 00000000..e5e6b59d
--- /dev/null
+++ b/src/client/index.js
@@ -0,0 +1,41 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import skyline from './skyline';
+import nova from './nova';
+import cinder from './cinder';
+import glance from './glance';
+import neutron from './neutron';
+import keystone from './keystone';
+import heat from './heat';
+import octavia from './octavia';
+import placement from './placement';
+import ironic from './ironic';
+
+const client = {
+  skyline,
+  nova,
+  cinder,
+  glance,
+  neutron,
+  keystone,
+  heat,
+  octavia,
+  placement,
+  ironic,
+};
+
+window.client = client;
+
+export default client;
diff --git a/src/client/ironic/index.js b/src/client/ironic/index.js
new file mode 100644
index 00000000..b54adf71
--- /dev/null
+++ b/src/client/ironic/index.js
@@ -0,0 +1,96 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { ironicBase } from '../client/constants';
+
+class IronicClient extends Base {
+  get baseUrl() {
+    return ironicBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'nodes',
+        responseKey: 'node',
+        extendOperations: [
+          {
+            name: 'updateStatesProvision',
+            key: 'states/provision',
+            method: 'put',
+          },
+          {
+            name: 'UpdateStatesPower',
+            key: 'states/power',
+            method: 'put',
+          },
+          {
+            name: 'updateMaintenance',
+            key: 'maintenance',
+            method: 'put',
+          },
+          {
+            name: 'deleteMaintenance',
+            key: 'maintenance',
+            method: 'delete',
+          },
+          {
+            name: 'getManagementBootDevice',
+            key: 'management/boot_device',
+          },
+          {
+            name: 'updateManagementBootDevice',
+            key: 'management/boot_device',
+            method: 'put',
+          },
+          {
+            name: 'getManagementBootDeviceSupported',
+            key: 'management/boot_device/supported',
+          },
+          {
+            key: 'updateTraits',
+            method: 'put',
+          },
+        ],
+        subResources: [
+          {
+            key: 'states',
+          },
+          {
+            key: 'validate',
+          },
+          {
+            key: 'ports',
+          },
+          {
+            key: 'portgroups',
+            responseKey: 'portgroup',
+          },
+        ],
+      },
+      {
+        key: 'ports',
+        responseKey: 'port',
+      },
+      {
+        key: 'portgroups',
+        responseKey: 'portgroup',
+      },
+    ];
+  }
+}
+
+const ironicClient = new IronicClient();
+export default ironicClient;
diff --git a/src/client/keystone/index.js b/src/client/keystone/index.js
new file mode 100644
index 00000000..6578223c
--- /dev/null
+++ b/src/client/keystone/index.js
@@ -0,0 +1,149 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { keystoneBase } from '../client/constants';
+
+class KeystoneClient extends Base {
+  get baseUrl() {
+    return keystoneBase();
+  }
+
+  get resources() {
+    return [
+      {
+        name: 'catalog',
+        key: 'auth/catalog',
+        responseKey: 'catalog',
+      },
+      {
+        key: 'projects',
+        responseKey: 'project',
+        extendOperations: [
+          {
+            name: 'updateTags',
+            key: 'tags',
+            method: 'put',
+          },
+        ],
+        subResources: [
+          {
+            key: 'tags',
+            responseKey: 'tag',
+          },
+          {
+            key: 'groups',
+            subResources: [
+              {
+                key: 'roles',
+              },
+            ],
+          },
+          {
+            key: 'users',
+            subResources: [
+              {
+                key: 'roles',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        key: 'domains',
+        responseKey: 'domain',
+        subResources: [
+          {
+            key: 'groups',
+            subResources: [
+              {
+                key: 'roles',
+              },
+            ],
+          },
+          {
+            key: 'users',
+            subResources: [
+              {
+                key: 'roles',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        key: 'roles',
+        responseKey: 'role',
+        subResources: [
+          {
+            key: 'implies',
+          },
+        ],
+      },
+      {
+        name: 'roleAssignments',
+        key: 'role_assignments',
+      },
+      {
+        key: 'users',
+        responseKey: 'user',
+        subResources: [
+          {
+            key: 'projects',
+          },
+          {
+            key: 'groups',
+          },
+        ],
+        extendOperations: [
+          {
+            name: 'updatePassword',
+            key: 'password',
+            method: 'post',
+          },
+        ],
+      },
+      {
+        key: 'groups',
+        responseKey: 'group',
+        subResources: [
+          {
+            key: 'users',
+          },
+        ],
+      },
+      {
+        name: 'systemGroups',
+        key: 'system/groups',
+        subResources: [
+          {
+            key: 'roles',
+          },
+        ],
+      },
+      {
+        name: 'systemUsers',
+        key: 'system/users',
+        subResources: [
+          {
+            key: 'roles',
+          },
+        ],
+      },
+    ];
+  }
+}
+
+const keystoneClient = new KeystoneClient();
+export default keystoneClient;
diff --git a/src/client/neutron/index.js b/src/client/neutron/index.js
new file mode 100644
index 00000000..1d7c085d
--- /dev/null
+++ b/src/client/neutron/index.js
@@ -0,0 +1,201 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { neutronBase } from '../client/constants';
+
+class NeutronClient extends Base {
+  get baseUrl() {
+    return neutronBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'networks',
+        responseKey: 'network',
+        subResources: [
+          {
+            name: 'dhcpAgents',
+            key: 'dhcp-agents',
+          },
+        ],
+      },
+      {
+        key: 'subnets',
+        responseKey: 'subnet',
+      },
+      {
+        key: 'extensions',
+      },
+      {
+        key: 'ports',
+        responseKey: 'port',
+      },
+      {
+        key: 'routers',
+        responseKey: 'router',
+        extendOperations: [
+          {
+            name: 'addRouterInterface',
+            key: 'add_router_interface',
+            method: 'put',
+          },
+          {
+            name: 'removeRouterInterface',
+            key: 'remove_router_interface',
+            method: 'put',
+          },
+          {
+            name: 'addExtraRoutes',
+            key: 'add_extraroutes',
+            method: 'put',
+          },
+          {
+            name: 'removeExtraRoutes',
+            key: 'remove_extraroutes',
+            method: 'put',
+          },
+        ],
+      },
+      {
+        key: 'floatingips',
+        responseKey: 'floatingip',
+        subResources: [
+          {
+            name: 'portForwardings',
+            key: 'port_forwardings',
+            responseKey: 'port_forwarding',
+          },
+        ],
+      },
+      {
+        key: 'agents',
+        responseKey: 'agent',
+        subResources: [
+          {
+            name: 'dhcpNetworks',
+            key: 'dhcp-networks',
+            responseKey: 'network',
+          },
+          {
+            name: 'l3Routers',
+            key: 'l3-routers',
+            responseKey: 'router',
+          },
+        ],
+      },
+      {
+        name: 'firewalls',
+        key: 'fwaas/firewall_groups',
+        responseKey: 'firewall_group',
+      },
+      {
+        name: 'firewallPolicies',
+        key: 'fwaas/firewall_policies',
+        responseKey: 'firewall_policy',
+        extendOperations: [
+          {
+            name: 'insertRule',
+            key: 'insert_rule',
+            method: 'put',
+          },
+          {
+            name: 'removeRule',
+            key: 'remove_rule',
+            method: 'put',
+          },
+        ],
+      },
+      {
+        name: 'firewallRules',
+        key: 'fwaas/firewall_rules',
+        responseKey: 'firewall_rule',
+      },
+      {
+        name: 'networkIpAvailabilities',
+        key: 'network-ip-availabilities',
+      },
+      {
+        name: 'azones',
+        key: 'availability_zones',
+      },
+      {
+        name: 'qosPolicies',
+        key: 'qos/policies',
+        responseKey: 'policy',
+        subResources: [
+          {
+            name: 'bandwidthLimitRules',
+            key: 'bandwidth_limit_rules',
+          },
+          {
+            name: 'dscpMarkingRules',
+            key: 'dscp_marking_rules',
+          },
+        ],
+      },
+      {
+        name: 'securityGroups',
+        key: 'security-groups',
+        responseKey: 'security_group',
+      },
+      {
+        name: 'securityGroupRules',
+        key: 'security-group-rules',
+        responseKey: 'security_group_rule',
+      },
+      {
+        key: 'subnets',
+        responseKey: 'subnet',
+      },
+      {
+        name: 'endpointGroups',
+        key: 'endpoint-groups',
+        responseKey: 'endpoint_group',
+      },
+      {
+        name: 'ikePolicies',
+        key: 'ikepolicies',
+        responseKey: 'ikepolicy',
+      },
+      {
+        name: 'ipsecPolicies',
+        key: 'ipsecpolicies',
+        responseKey: 'ipsecpolicy',
+      },
+      {
+        name: 'ipsecSiteConnections',
+        key: 'ipsec_site_connections',
+        responseKey: 'ipsec_site_connection',
+      },
+      {
+        key: 'vpnservices',
+        responseKey: 'vpnservice',
+      },
+      {
+        key: 'quotas',
+        responseKey: 'quota',
+        extendOperations: [
+          {
+            key: 'details',
+          },
+        ],
+      },
+    ];
+  }
+}
+
+const neutronClient = new NeutronClient();
+export default neutronClient;
diff --git a/src/client/nova/index.js b/src/client/nova/index.js
new file mode 100644
index 00000000..f05ef111
--- /dev/null
+++ b/src/client/nova/index.js
@@ -0,0 +1,134 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { novaBase } from '../client/constants';
+
+class NovaClient extends Base {
+  get baseUrl() {
+    return novaBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'servers',
+        responseKey: 'server',
+        subResources: [
+          {
+            name: 'interfaces',
+            key: 'os-interface',
+          },
+          {
+            name: 'volumeAttachments',
+            key: 'os-volume_attachments',
+            responseKey: 'volumeAttachment',
+          },
+          {
+            name: 'instanceActions',
+            key: 'os-instance-actions',
+            responseKey: 'instanceAction',
+          },
+        ],
+        extendOperations: [
+          {
+            name: 'createConsole',
+            key: 'remote-consoles',
+            method: 'post',
+          },
+          {
+            key: 'action',
+            method: 'post',
+          },
+        ],
+      },
+      {
+        name: 'zone',
+        key: 'os-availability-zone',
+        responseKey: 'availabilityZoneInfo',
+      },
+      {
+        key: 'flavors',
+        responseKey: 'flavor',
+        extendOperations: [
+          {
+            name: 'action',
+            key: 'action',
+            method: 'post',
+          },
+        ],
+        subResources: [
+          {
+            name: 'access',
+            key: 'os-flavor-access',
+          },
+          {
+            name: 'extraSpecs',
+            key: 'os-extra_specs',
+          },
+        ],
+      },
+      {
+        name: 'keypairs',
+        key: 'os-keypairs',
+        responseKey: 'keypair',
+      },
+      {
+        name: 'serverGroups',
+        key: 'os-server-groups',
+        responseKey: 'server_group',
+      },
+      {
+        name: 'aggregates',
+        key: 'os-aggregates',
+        responseKey: 'aggregate',
+        extendOperations: [
+          {
+            name: 'action',
+            key: 'action',
+            method: 'post',
+          },
+        ],
+      },
+      {
+        name: 'services',
+        key: 'os-services',
+        responseKey: 'service',
+      },
+      {
+        name: 'quotaSets',
+        key: 'os-quota-sets',
+        responseKey: 'quota_set',
+        extendOperations: [
+          {
+            key: 'detail',
+          },
+        ],
+      },
+      {
+        name: 'hypervisors',
+        key: 'os-hypervisors',
+        responseKey: 'hypervisor',
+      },
+      {
+        name: 'pciDevices',
+        key: 'os-pci-devices',
+        responseKey: 'pci_device',
+      },
+    ];
+  }
+}
+
+const novaClient = new NovaClient();
+export default novaClient;
diff --git a/src/client/octavia/index.js b/src/client/octavia/index.js
new file mode 100644
index 00000000..b10e789d
--- /dev/null
+++ b/src/client/octavia/index.js
@@ -0,0 +1,62 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { octaviaBase } from '../client/constants';
+
+class OctaviaClient extends Base {
+  get baseUrl() {
+    return octaviaBase();
+  }
+
+  get resources() {
+    return [
+      {
+        name: 'healthMonitors',
+        key: 'lbaas/healthmonitors',
+        responseKey: 'healthmonitor',
+      },
+      {
+        name: 'listeners',
+        key: 'lbaas/listeners',
+        responseKey: 'listener',
+      },
+      {
+        name: 'loadbalancers',
+        key: 'lbaas/loadbalancers',
+        responseKey: 'loadbalancer',
+      },
+      {
+        name: 'pools',
+        key: 'lbaas/pools',
+        responseKey: 'pool',
+        extendOperations: [
+          {
+            name: 'batchUpdateMembers',
+            key: 'members',
+            method: 'put',
+          },
+        ],
+        subResources: [
+          {
+            key: 'members',
+          },
+        ],
+      },
+    ];
+  }
+}
+
+const octaviaClient = new OctaviaClient();
+export default octaviaClient;
diff --git a/src/client/placement/index.js b/src/client/placement/index.js
new file mode 100644
index 00000000..7e522830
--- /dev/null
+++ b/src/client/placement/index.js
@@ -0,0 +1,42 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { placementBase } from '../client/constants';
+
+class PlacementClient extends Base {
+  get baseUrl() {
+    return placementBase();
+  }
+
+  get resources() {
+    return [
+      {
+        name: 'resourceProviders',
+        key: 'resource_providers',
+        subResources: [
+          {
+            key: 'inventories',
+          },
+        ],
+      },
+      {
+        key: 'traits',
+      },
+    ];
+  }
+}
+
+const placementClient = new PlacementClient();
+export default placementClient;
diff --git a/src/client/skyline/index.js b/src/client/skyline/index.js
new file mode 100644
index 00000000..9d4055cb
--- /dev/null
+++ b/src/client/skyline/index.js
@@ -0,0 +1,123 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Base from '../client/base';
+import { skylineBase } from '../client/constants';
+
+class SkylineClient extends Base {
+  get baseUrl() {
+    return skylineBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'contrib',
+        isResource: false,
+        extendOperations: [
+          {
+            key: 'domains',
+          },
+          {
+            key: 'regions',
+          },
+          {
+            name: 'keystoneEndpoints',
+            key: 'keystone_endpoints',
+          },
+        ],
+      },
+      {
+        key: 'extension',
+        isResource: false,
+        extendOperations: [
+          {
+            key: 'servers',
+          },
+          {
+            name: 'recycleServers',
+            key: 'recycle_servers',
+          },
+          {
+            key: 'volumes',
+          },
+          {
+            name: 'volumeSnapshots',
+            key: 'volume_snapshots',
+          },
+          {
+            key: 'ports',
+          },
+        ],
+      },
+      {
+        name: 'policies',
+        key: 'policies',
+        extendOperations: [
+          {
+            name: 'check',
+            key: 'check',
+            isDetail: false,
+          },
+        ],
+      },
+      {
+        name: '',
+        key: '',
+        isResource: false,
+        extendOperations: [
+          {
+            key: 'login',
+            method: 'post',
+          },
+          {
+            key: 'logout',
+            method: 'post',
+          },
+          {
+            key: 'profile',
+          },
+          {
+            name: 'switchProject',
+            method: 'post',
+            generate: (projectId, domainId) => {
+              const url = `switch_project/${projectId}`;
+              const data = {
+                project_id: projectId,
+                project_domain_id: domainId,
+              };
+              const params = {
+                project_domain_id: domainId,
+              };
+              return this.request.post(url, data, params);
+            },
+          },
+        ],
+      },
+      {
+        key: 'setting',
+        responseKey: 'setting',
+        extendOperations: [
+          {
+            key: 'list',
+            url: () => 'settings',
+          },
+        ],
+      },
+    ];
+  }
+}
+
+const skylineClient = new SkylineClient();
+export default skylineClient;
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index e90950b2..a28234eb 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -104,6 +104,11 @@ export default class BaseForm extends React.Component {
     return '';
   }
 
+  get currentUser() {
+    const { user } = this.props.rootStore || {};
+    return user || {};
+  }
+
   get isAdminPage() {
     const { pathname = '' } = this.props.location || {};
     return isAdminPage(pathname);
@@ -114,11 +119,11 @@ export default class BaseForm extends React.Component {
   }
 
   get currentProjectId() {
-    return globals.user.project.id;
+    return this.props.rootStore.projectId;
   }
 
   get currentProjectName() {
-    return globals.user.project.name;
+    return this.props.rootStore.projectName;
   }
 
   getUrl(path, adminStr) {
@@ -258,7 +263,7 @@ export default class BaseForm extends React.Component {
         this.responseError = err;
         this.showNotice && Notify.errorWithDetail(err, this.errorText);
         // eslint-disable-next-line no-console
-        console.log(err);
+        console.log('err', err);
         if (callback && isFunction(callback)) {
           callback(false, true);
         }
diff --git a/src/components/FormItem/NetworkSelectTable/index.jsx b/src/components/FormItem/NetworkSelectTable/index.jsx
index 9ac5d90f..d6926e91 100644
--- a/src/components/FormItem/NetworkSelectTable/index.jsx
+++ b/src/components/FormItem/NetworkSelectTable/index.jsx
@@ -44,7 +44,7 @@ export default class NetworkSelectTable extends Component {
   }
 
   get currentProjectId() {
-    return globals.user.project.id;
+    return this.props.rootStore.projectId;
   }
 
   get hasAdminRole() {
diff --git a/src/components/FormItem/VolumeSelectTable/index.jsx b/src/components/FormItem/VolumeSelectTable/index.jsx
index 9e17f95e..75020075 100644
--- a/src/components/FormItem/VolumeSelectTable/index.jsx
+++ b/src/components/FormItem/VolumeSelectTable/index.jsx
@@ -34,7 +34,7 @@ export default class VolumeSelectTable extends Component {
   }
 
   get currentProjectId() {
-    return globals.user.project.id;
+    return this.props.rootStore.projectId;
   }
 
   get hasAdminRole() {
diff --git a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
index 1acff3fc..dfb42d6b 100644
--- a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
+++ b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
@@ -126,7 +126,7 @@ class AvatarDropdown extends React.Component {
           <ItemActionButtons
             actions={{ moreActions: [{ action: Password }] }}
             onFinishAction={this.afterChangePassword}
-            item={globals.user.user}
+            item={this.user && this.user.user}
             isWide
           />
         </Menu.Item>
diff --git a/src/components/Layout/GlobalHeader/RightContent.jsx b/src/components/Layout/GlobalHeader/RightContent.jsx
index 08ad311c..db87ee6f 100644
--- a/src/components/Layout/GlobalHeader/RightContent.jsx
+++ b/src/components/Layout/GlobalHeader/RightContent.jsx
@@ -28,7 +28,7 @@ const gotoConsole = (type, props) => {
 };
 
 const GlobalHeaderRight = (props) => {
-  const { isAdminPage = false, rootStore: { hasAdminRole = false } = {} } =
+  const { isAdminPage = false, rootStore: { hasAdminPageRole = false } = {} } =
     props;
   let linkRender = null;
   if (isAdminPage) {
@@ -41,7 +41,7 @@ const GlobalHeaderRight = (props) => {
         {t('Console')}
       </Button>
     );
-  } else if (hasAdminRole) {
+  } else if (hasAdminPageRole) {
     linkRender = (
       <Button
         type="link"
diff --git a/src/components/StepForm/index.jsx b/src/components/StepForm/index.jsx
index e7e49321..a7e02ab0 100644
--- a/src/components/StepForm/index.jsx
+++ b/src/components/StepForm/index.jsx
@@ -107,6 +107,15 @@ export default class BaseStepForm extends React.Component {
     return this.checkEndpoint && !this.endpoint;
   }
 
+  get currentUser() {
+    const { user } = this.props.rootStore || {};
+    return user || {};
+  }
+
+  get currentProjectId() {
+    return this.props.rootStore.projectId;
+  }
+
   get labelCol() {
     return {
       xs: { span: 4 },
@@ -218,9 +227,10 @@ export default class BaseStepForm extends React.Component {
         Notify.success(this.successText);
       },
       (err) => {
-        // eslint-disable-next-line no-console
-        console.log('reject', err);
-        Notify.errorWithDetail(err, this.errorText);
+        this.responseError = err;
+        const { response: { data: responseData } = {} } = err;
+        console.log('err', err, responseData);
+        Notify.errorWithDetail(responseData, this.errorText);
       }
     );
   };
diff --git a/src/components/Tables/Base/ActionButton/index.jsx b/src/components/Tables/Base/ActionButton/index.jsx
index ccc16fe7..1c8b8c51 100644
--- a/src/components/Tables/Base/ActionButton/index.jsx
+++ b/src/components/Tables/Base/ActionButton/index.jsx
@@ -243,7 +243,8 @@ class ActionButton extends Component {
     const message = submitErrorMsgBatch
       ? submitErrorMsgBatch(data)
       : getDefaultMsg(this.props.action, data).submitErrorMsgBatch;
-    Notify.errorWithDetail(error, message);
+    const { data: responseData } = error.response || error || {};
+    Notify.errorWithDetail(responseData || error, message);
     this.onCallback(false, true);
   };
 
@@ -260,10 +261,12 @@ class ActionButton extends Component {
       return;
     }
     const { submitErrorMsg } = this.props.action;
+    const { data: responseData } = error.response || error || {};
+    const realError = responseData || error;
     const message = submitErrorMsg
-      ? submitErrorMsg(data, error)
+      ? submitErrorMsg(data, realError)
       : getDefaultMsg(this.props.action, data).submitErrorMsg;
-    Notify.errorWithDetail(error, message);
+    Notify.errorWithDetail(realError, message);
     this.onCallback(false, true);
   };
 
diff --git a/src/components/Tables/Base/BatchActionButtons/index.jsx b/src/components/Tables/Base/BatchActionButtons/index.jsx
index e13515f7..870d1765 100644
--- a/src/components/Tables/Base/BatchActionButtons/index.jsx
+++ b/src/components/Tables/Base/BatchActionButtons/index.jsx
@@ -59,9 +59,16 @@ function DropdownActionButton({
   const menuItems = actions.map((it) => {
     const key = `table-batch-more-${generateId()}`;
     const newConf = updateConf(it, selectedItems);
-    const { buttonType } = newConf;
+    const { buttonType, name } = newConf;
     newConf.onFinishAction = onFinishAction;
     newConf.danger = buttonType === 'danger';
+    if (!selectedItems.length) {
+      return (
+        <Menu.Item key={key} disabled style={{ textAlign: 'center' }}>
+          {name}
+        </Menu.Item>
+      );
+    }
     return (
       <Menu.Item key={key}>
         <ActionButton
diff --git a/src/components/Tables/Base/PrimaryActionButtons/index.jsx b/src/components/Tables/Base/PrimaryActionButtons/index.jsx
index b0aac32f..ad3e7e78 100644
--- a/src/components/Tables/Base/PrimaryActionButtons/index.jsx
+++ b/src/components/Tables/Base/PrimaryActionButtons/index.jsx
@@ -55,8 +55,8 @@ export default class TablePrimaryButtons extends Component {
     this.getActionsAllowed();
   }
 
-  componentDidUpdate(nextProps) {
-    if (!isEqual(nextProps, this.props)) {
+  componentDidUpdate(prevProps) {
+    if (!isEqual(prevProps, this.props)) {
       this.getActionsAllowed();
     }
   }
diff --git a/src/components/Tables/SimpleTable/index.jsx b/src/components/Tables/SimpleTable/index.jsx
index eb1d3eff..552e9008 100644
--- a/src/components/Tables/SimpleTable/index.jsx
+++ b/src/components/Tables/SimpleTable/index.jsx
@@ -223,8 +223,12 @@ export default class SimpleTable extends React.Component {
     }
     return {
       onClick: () => {
-        const { selectedRowKeys, onChange, type, getCheckboxProps } =
-          rowSelection;
+        const {
+          selectedRowKeys = [],
+          onChange,
+          type,
+          getCheckboxProps,
+        } = rowSelection || {};
         if (getCheckboxProps) {
           const { disabled } = getCheckboxProps(record);
           if (disabled) {
diff --git a/src/containers/BaseDetail/index.jsx b/src/containers/BaseDetail/index.jsx
index e3da2312..ad00e52b 100644
--- a/src/containers/BaseDetail/index.jsx
+++ b/src/containers/BaseDetail/index.jsx
@@ -35,8 +35,13 @@ export default class BaseDetail extends React.Component {
     return id;
   }
 
-  get currentProject() {
-    return globals.user.project.id;
+  get currentUser() {
+    const { user } = this.props.rootStore || {};
+    return user || {};
+  }
+
+  get currentProjectId() {
+    return this.props.rootStore.projectId;
   }
 
   get projectId() {
@@ -45,7 +50,7 @@ export default class BaseDetail extends React.Component {
   }
 
   get isMyResource() {
-    return this.projectId === this.currentProject;
+    return this.projectId === this.currentProjectId;
   }
 
   get detailData() {
diff --git a/src/containers/List/index.jsx b/src/containers/List/index.jsx
index 97bf749f..6fb505b4 100644
--- a/src/containers/List/index.jsx
+++ b/src/containers/List/index.jsx
@@ -271,8 +271,13 @@ export default class BaseList extends React.Component {
     return true;
   }
 
+  get currentUser() {
+    const { user } = this.props.rootStore || {};
+    return user || {};
+  }
+
   get currentProjectId() {
-    return globals.user.project.id;
+    return this.props.rootStore.projectId;
   }
 
   get fetchDataByCurrentProject() {
@@ -480,7 +485,7 @@ export default class BaseList extends React.Component {
   }
 
   getDataWithPolicy(params) {
-    if (!globals.user) {
+    if (!this.currentUser || isEmpty(this.currentUser)) {
       return;
     }
     if (this.endpointError) {
@@ -510,7 +515,7 @@ export default class BaseList extends React.Component {
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log('fetch list error', e);
-      const { message = '', data, status } = e || {};
+      const { message = '', data, status } = e.response || e || {};
       if (status === 500) {
         const sysErr = t('System is error, please try again later.');
         const title = `${t('Get {name} error.', {
@@ -520,7 +525,7 @@ export default class BaseList extends React.Component {
       } else {
         const error = {
           message: data || message || e || '',
-          status: e.status,
+          status,
         };
         Notify.errorWithDetail(
           error,
diff --git a/src/containers/TabDetail/index.jsx b/src/containers/TabDetail/index.jsx
index 378059e9..60e942eb 100644
--- a/src/containers/TabDetail/index.jsx
+++ b/src/containers/TabDetail/index.jsx
@@ -245,12 +245,8 @@ export default class DetailBase extends React.Component {
   catch = (e) => {
     // eslint-disable-next-line no-console
     console.log(e);
-    if (
-      e.code === 404 ||
-      e.status === 404 ||
-      e.reason === 'NotFound' ||
-      e.reason === 'Not Found'
-    ) {
+    const { data, status } = e.response || e || {};
+    if (status === 404) {
       this.setState({ notFound: true });
       Notify.warn(
         t('{name} {id} could not be found.', {
@@ -260,8 +256,8 @@ export default class DetailBase extends React.Component {
       );
     } else {
       const error = {
-        message: e,
-        status: e.code || e.status,
+        message: data,
+        status,
       };
       Notify.errorWithDetail(
         error,
diff --git a/src/core/index.jsx b/src/core/index.jsx
index 09e40134..f1b90f10 100644
--- a/src/core/index.jsx
+++ b/src/core/index.jsx
@@ -21,34 +21,13 @@ import { ConfigProvider } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
 import enUS from 'antd/es/locale/en_US';
 import globalRootStore from 'stores/root';
-import request from 'utils/request';
 import PageLoading from 'components/PageLoading';
 import i18n from './i18n';
 import App from './App';
 
 window.t = i18n.t;
-window.request = request;
-window.globals = {
-  user: null,
-};
 
 const store = globalRootStore;
-
-// request error handler
-window.onunhandledrejection = function (e) {
-  if (e && (e.status === 'Failure' || e.status >= 400)) {
-    if (e.status === 401) {
-      // session timeout handler, except app store page.
-      /* eslint-disable no-alert */
-      const currentPath = window.location.pathname;
-      if (currentPath.indexOf('login') < 0) {
-        store.gotoLoginPage(currentPath);
-        // window.location.href = `/user/login?referer=${currentPath}`;
-      }
-    }
-  }
-};
-
 const browserHistory = createBrowserHistory();
 const history = syncHistoryWithStore(browserHistory, store.routing);
 const lang = i18n.getLocale();
diff --git a/src/layouts/Base/index.jsx b/src/layouts/Base/index.jsx
index 95cbcb5c..b3823dd2 100644
--- a/src/layouts/Base/index.jsx
+++ b/src/layouts/Base/index.jsx
@@ -61,6 +61,10 @@ class BaseLayout extends Component {
     return this.user && this.rootStore.hasAdminRole;
   }
 
+  get hasAdminPageRole() {
+    return this.user && this.rootStore.hasAdminPageRole;
+  }
+
   get originMenu() {
     if (this.isAdminPage) {
       return renderAdminMenu(i18n.t);
diff --git a/src/layouts/admin-menu.jsx b/src/layouts/admin-menu.jsx
index c4ed28a1..82612693 100644
--- a/src/layouts/admin-menu.jsx
+++ b/src/layouts/admin-menu.jsx
@@ -71,7 +71,7 @@ const renderMenu = (t) => {
               level: 2,
             },
             {
-              path: /^\/compute\/flavor-admin\/detail\/.[^/]+$/,
+              path: /^\/compute\/flavor-admin\/detail\/[^/]+$/,
               name: t('Flavor Detail'),
               key: 'flavor-detail',
               level: 2,
diff --git a/src/locales/en.json b/src/locales/en.json
index 53c2e7bd..c3c49213 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -236,7 +236,6 @@
   "Clear Gateway": "Clear Gateway",
   "Click here for filters.": "Click here for filters.",
   "Click to Upload": "Click to Upload",
-  "Click to see": "Click to see",
   "Click to show detail": "Click to show detail",
   "Clone Volume": "Clone Volume",
   "Clone volume": "Clone volume",
@@ -1159,7 +1158,6 @@
   "Please select!": "Please select!",
   "Please set CPU && Ram first.": "Please set CPU && Ram first.",
   "Please set MUNA": "Please set MUNA",
-  "Please set expiration time": "Please set expiration time",
   "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!",
@@ -1509,7 +1507,6 @@
   "The current operation requires the instance to be shut down:": "The current operation requires the instance to be shut down:",
   "The description can be up to 255 characters long.": "The description can be up to 255 characters long.",
   "The entire inspection process takes 5 to 10 minutes, so you need to be patient. After the registration is completed, the node configuration status will return to the manageable status.": "The entire inspection process takes 5 to 10 minutes, so you need to be patient. After the registration is completed, the node configuration status will return to the manageable status.",
-  "The expiration time needs to be greater than the current time.": "The expiration time needs to be greater than the current time.",
   "The feasible configuration of cloud-init or cloudbase-init service in the image is not synced to image's properties, so the Login Name is unknown.": "The feasible configuration of cloud-init or cloudbase-init service in the image is not synced to image's properties, so the Login Name is unknown.",
   "The instance": "The instance",
   "The instance architecture diagram mainly shows the overall architecture composition of the instance. If you need to view the network topology of the instance, please go to: ": "The instance architecture diagram mainly shows the overall architecture composition of the instance. If you need to view the network topology of the instance, please go to: ",
@@ -1549,6 +1546,7 @@
   "The timeout period of waiting for the return of the health check request, the check timeout will be judged as a check failure": "The timeout period of waiting for the return of the health check request, the check timeout will be judged as a check failure",
   "The trait name of the flavor needs to correspond to the trait of the scheduling node; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all necessary traits (for example: the trait of the scheduling node has HW_CPU_X86_VMX trait, and the flavor adds HW_CPU_X86_VMX, it can be scheduled to this node for necessary traits).": "The trait name of the flavor needs to correspond to the trait of the scheduling node; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all necessary traits (for example: the trait of the scheduling node has HW_CPU_X86_VMX trait, and the flavor adds HW_CPU_X86_VMX, it can be scheduled to this node for necessary traits).",
   "The trait of the scheduled node needs to correspond to the trait of the flavor used by the ironic instance; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all the necessary traits (for example, the ironic instance which use the flavor that has HW_CPU_X86_VMX as a necessary trait, can be scheduled to the node which has the trait of HW_CPU_X86_VMX).": "The trait of the scheduled node needs to correspond to the trait of the flavor used by the ironic instance; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all the necessary traits (for example, the ironic instance which use the flavor that has HW_CPU_X86_VMX as a necessary trait, can be scheduled to the node which has the trait of HW_CPU_X86_VMX).",
+  "The user has been disabled, please contact the administrator": "The user has been disabled, please contact the administrator",
   "The user needs to ensure that the input is a shell script that can run completely and normally.": "The user needs to ensure that the input is a shell script that can run completely and normally.",
   "The volume associated with the backup is not available, unable to restore.": "The volume associated with the backup is not available, unable to restore.",
   "The volume type needs to set \"multiattach\" in the metadata to support shared volume attributes.": "The volume type needs to set \"multiattach\" in the metadata to support shared volume attributes.",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index b6570d56..6afdfdee 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -236,7 +236,6 @@
   "Clear Gateway": "",
   "Click here for filters.": "筛选",
   "Click to Upload": "点击上传文件",
-  "Click to see": "点击查看",
   "Click to show detail": "点击查看详情",
   "Clone Volume": "克隆云硬盘",
   "Clone volume": "克隆云硬盘",
@@ -1159,7 +1158,6 @@
   "Please select!": "请选择！",
   "Please set CPU && Ram first.": "请先设置CPU、内存。",
   "Please set MUNA": "请设置NUMA节点",
-  "Please set expiration time": "请设置到期时间",
   "Pleasse input a valid ip!": "请输入正确的IP地址",
   "Pleasse select a network!": "请选择网络！",
   "Pleasse select a subnet!": "请选择子网！",
@@ -1509,7 +1507,6 @@
   "The current operation requires the instance to be shut down:": "当前操作需要云主机在关机状态下进行：",
   "The description can be up to 255 characters long.": "描述最长为255字符",
   "The entire inspection process takes 5 to 10 minutes, so you need to be patient. After the registration is completed, the node configuration status will return to the manageable status.": "检查的整个过程需要耗费 5 到 10 分钟时间，您需要耐心等待。在完成注册后，节点配置状态会重新回到可管理状态。",
-  "The expiration time needs to be greater than the current time.": "到期时间需要大于当前时间。",
   "The feasible configuration of cloud-init or cloudbase-init service in the image is not synced to image's properties, so the Login Name is unknown.": "镜像中的cloud-init或cloudbase-init服务的预制配置未同步至镜像属性, 登录名未知",
   "The instance": "云主机",
   "The instance architecture diagram mainly shows the overall architecture composition of the instance. If you need to view the network topology of the instance, please go to: ": "云主机架构图主要展示云主机的总体架构组成。如果需要查看云主机的网络拓扑，请转到：",
@@ -1549,6 +1546,7 @@
   "The timeout period of waiting for the return of the health check request, the check timeout will be judged as a check failure": "等待健康检查请求返回的超时时间，检查超时将会被判定为一次检查失败",
   "The trait name of the flavor needs to correspond to the trait of the scheduling node; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all necessary traits (for example: the trait of the scheduling node has HW_CPU_X86_VMX trait, and the flavor adds HW_CPU_X86_VMX, it can be scheduled to this node for necessary traits).": "云主机类型的特性名称需要与调度节点的特性对应；通过给裸机实例注入必需特性，计算服务将只调度实例到具有所有必需特性的裸金属节点（比如：调度节点的有 HW_CPU_X86_VMX的特性，云主机类型添加HW_CPU_X86_VMX为必需特性，可以调度到此节点）。",
   "The trait of the scheduled node needs to correspond to the trait of the flavor used by the ironic instance; by injecting the necessary traits into the ironic instance, the computing service will only schedule the instance to the bare metal node with all the necessary traits (for example, the ironic instance which use the flavor that has HW_CPU_X86_VMX as a necessary trait, can be scheduled to the node which has the trait of HW_CPU_X86_VMX).": "被调度节点的特性需要与裸机实例使用的云主机类型的特性对应；通过给裸机实例注入必需特性，计算服务将只调度实例到具有所有必需特性的裸金属节点（比如：调度节点的有 HW_CPU_X86_VMX的特性， 云主机类型添加HW_CPU_X86_VMX为必要特性，可以调度到此节点）。",
+  "The user has been disabled, please contact the administrator": "",
   "The user needs to ensure that the input is a shell script that can run completely and normally.": "请确保输入的是能完整正常运行的 shell 脚本。",
   "The volume associated with the backup is not available, unable to restore.": "云硬盘不处于可用状态，不支持恢复备份操作。",
   "The volume type needs to set \"multiattach\" in the metadata to support shared volume attributes.": "云硬盘类型需在元数据中设置\"multiattach\"，才可支持共享盘属性。",
diff --git a/src/pages/auth/containers/Login/index.jsx b/src/pages/auth/containers/Login/index.jsx
index cf16ed27..bf502d00 100644
--- a/src/pages/auth/containers/Login/index.jsx
+++ b/src/pages/auth/containers/Login/index.jsx
@@ -20,6 +20,7 @@ import { InfoCircleFilled } from '@ant-design/icons';
 import SimpleForm from 'components/SimpleForm';
 import globalSkylineStore from 'stores/skyline/skyline';
 import i18n from 'core/i18n';
+import { isEmpty } from 'lodash';
 import styles from './index.less';
 
 @inject('rootStore')
@@ -189,13 +190,15 @@ export default class Login extends Component {
     this.setState({
       loading: true,
     });
-    this.rootStore.login(values).then(
+    const { domain, password, region, username } = values;
+    const body = { domain, password, region, username };
+    this.rootStore.login(body).then(
       () => {
         this.setState({
           loading: false,
           error: false,
         });
-        if (globals.user) {
+        if (this.rootStore.user && !isEmpty(this.rootStore.user)) {
           this.rootStore.routing.push(this.nextPage);
         }
       },
@@ -205,7 +208,7 @@ export default class Login extends Component {
         });
         const {
           data: { detail },
-        } = error;
+        } = error.response;
         if (
           detail.indexOf(
             'The password is expired and needs to be changed for user'
@@ -240,13 +243,16 @@ export default class Login extends Component {
 
   getErrorMessage() {
     const { message } = this.state;
-    if (message.indexOf('The account is locked for user') >= 0) {
+    if (message.includes('The account is locked for user')) {
       return t(
         'Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes'
       );
     }
+    if (message.includes('The account is disabled for user')) {
+      return t('The user has been disabled, please contact the administrator');
+    }
     if (
-      message.indexOf('You are not authorized for any projects or domains') >= 0
+      message.includes('You are not authorized for any projects or domains')
     ) {
       return t(
         'If you are not authorized to access any project, or if the project you are involved in has been deleted or disabled, contact the platform administrator to reassign the project'
diff --git a/src/pages/base/containers/Overview/components/ResourceStatistic.jsx b/src/pages/base/containers/Overview/components/ResourceStatistic.jsx
index 6d39312f..cf513a42 100644
--- a/src/pages/base/containers/Overview/components/ResourceStatistic.jsx
+++ b/src/pages/base/containers/Overview/components/ResourceStatistic.jsx
@@ -23,7 +23,8 @@ import styles from '../style.less';
 @observer
 class ResourceStatistic extends Component {
   componentDidMount() {
-    const { project: { id: project_id } = {} } = globals.user || {};
+    const { user } = this.props.rootStore || {};
+    const { project: { id: project_id } = {} } = user || {};
     this.props.store.getResourceStatisticData(project_id);
   }
 
diff --git a/src/pages/compute/containers/BareMetalNode/index.jsx b/src/pages/compute/containers/BareMetalNode/index.jsx
index 70710b5b..5cce1a0a 100644
--- a/src/pages/compute/containers/BareMetalNode/index.jsx
+++ b/src/pages/compute/containers/BareMetalNode/index.jsx
@@ -16,7 +16,7 @@ import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import globalIronicStore from 'stores/ironic/ironic';
 import { powerState, provisioningState } from 'resources/ironic';
-import { ironicOriginEndpoint } from 'utils/constants';
+import { ironicOriginEndpoint } from 'client/client/constants';
 import actionConfigs from './actions';
 
 @inject('rootStore')
diff --git a/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx b/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
index 3022bb83..16d0f1aa 100644
--- a/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
+++ b/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
@@ -16,8 +16,6 @@ import { inject, observer } from 'mobx-react';
 import { HypervisorStore } from 'stores/nova/hypervisor';
 import Base from 'containers/TabDetail';
 import Members from 'pages/compute/containers/Instance';
-import Link from 'react-router-dom/Link';
-import React from 'react';
 
 @inject('rootStore')
 @observer
@@ -55,15 +53,6 @@ export default class HypervisorDetail extends Base {
         render: (value, record) =>
           `${record.memory_mb_used} / ${record.memory_mb}`,
       },
-      {
-        title: t('Used Local Storage (GB)'),
-        dataIndex: 'storage_percent',
-        render: () => (
-          <Link to="/monitor-center/storage-cluster-admin">
-            {t('Click to see')}
-          </Link>
-        ),
-      },
     ];
   }
 
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
index 1942668a..6a41db9e 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
@@ -33,10 +33,6 @@ export default class SystemStep extends Base {
     return 'SystemStep';
   }
 
-  get hasAdminRole() {
-    return globals.user.hasAdminRole;
-  }
-
   get keypairs() {
     return (this.keyPairStore.list.data || []).map((it) => ({
       ...it,
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
index eae2a485..4dccb319 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
@@ -22,7 +22,7 @@ import globalProjectStore from 'stores/keystone/project';
 import classnames from 'classnames';
 import { isEmpty, isFinite } from 'lodash';
 import { getUserData, canCreateIronicByLicense } from 'resources/instance';
-import { ironicOriginEndpoint } from 'utils/constants';
+import { ironicOriginEndpoint } from 'client/client/constants';
 import styles from './index.less';
 import ConfirmStep from './ConfirmStep';
 import SystemStep from './SystemStep';
@@ -68,9 +68,8 @@ export default class CreateIronic extends StepAction {
   }
 
   async getQuota() {
-    const { project: { id: project_id } = {} } = globals.user || {};
     await this.projectStore.fetchProjectQuota({
-      project_id,
+      project_id: this.currentProjectId,
     });
     this.onCountChange(1);
   }
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
index 68bea4e8..1c4613e5 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
@@ -44,10 +44,6 @@ export default class SystemStep extends Base {
     return 'SystemStep';
   }
 
-  get hasAdminRole() {
-    return globals.user.hasAdminRole;
-  }
-
   get keypairs() {
     return (this.keyPairStore.list.data || []).map((it) => ({
       ...it,
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
index 815b6367..a8e1a1d6 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
@@ -63,9 +63,8 @@ class StepCreate extends StepAction {
   }
 
   async getQuota() {
-    const { project: { id: project_id } = {} } = globals.user || {};
     await this.projectStore.fetchProjectQuota({
-      project_id,
+      project_id: this.currentProjectId,
     });
     this.onCountChange(1);
   }
diff --git a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx
index 58833630..97390cb4 100644
--- a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx
+++ b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx
@@ -36,26 +36,15 @@ export default class PortForwarding extends Base {
     return true;
   }
 
-  updateFetchParamsByPage = (params) => {
-    const { id, ...rest } = params;
+  updateFetchParams = (params) => {
+    const { id, all_projects, ...rest } = params;
     return {
       fipID: id,
+      fipInfo: this.props.detail,
       ...rest,
     };
   };
 
-  fetchDataByPage = async (params) => {
-    await this.store.getFipAlreadyUsedPorts(params);
-    this.updateList({
-      data: this.store.list.data.map((i) => {
-        i.fip = this.props.detail;
-        i.floating_ip_address = this.props.detail.floating_ip_address;
-        return i;
-      }),
-    });
-    this.list.silent = false;
-  };
-
   get actionConfigs() {
     return this.isAdminPage
       ? actionConfigs.actionConfigsAdmin
diff --git a/src/pages/network/containers/FloatingIp/index.jsx b/src/pages/network/containers/FloatingIp/index.jsx
index 4dabcc69..b3d754c9 100644
--- a/src/pages/network/containers/FloatingIp/index.jsx
+++ b/src/pages/network/containers/FloatingIp/index.jsx
@@ -147,7 +147,11 @@ export default class FloatingIps extends Base {
       title: t('Associated Resource'),
       dataIndex: 'resource_name',
       render: (resource_name, record) => {
-        if (!resource_name && record.port_forwardings.length !== 0) {
+        if (
+          !resource_name &&
+          record.port_forwardings &&
+          record.port_forwardings.length !== 0
+        ) {
           return (
             <>
               {t('{number} port forwarding rules', {
diff --git a/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx b/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx
index d51b512a..59c0fa56 100644
--- a/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx
+++ b/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx
@@ -15,7 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/List';
 import { LbaasStore } from 'stores/octavia/loadbalancer';
-import { lbEndpoint } from 'utils/constants';
+import { lbEndpoint } from 'client/client/constants';
 import { actionConfigs, adminActions } from './actions';
 
 @inject('rootStore')
diff --git a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js b/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
index fb8a914a..62195a3e 100644
--- a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
@@ -30,10 +30,6 @@ export default class QoSPolicy extends Base {
     return 'get_policy';
   }
 
-  get module() {
-    return 'qos_policies';
-  }
-
   get name() {
     return t('QoS policies');
   }
diff --git a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js b/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
index 6321a365..2e023d18 100644
--- a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
@@ -35,10 +35,6 @@ export default class QoSPolicy extends Base {
     return 'get_policy';
   }
 
-  get module() {
-    return 'qos_policies';
-  }
-
   get name() {
     return t('QoS policies');
   }
diff --git a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js b/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
index a8c2f3cb..1205930a 100644
--- a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
@@ -35,10 +35,6 @@ export default class QoSPolicy extends Base {
     return 'get_policy';
   }
 
-  get module() {
-    return 'qos_policies';
-  }
-
   get name() {
     return t('QoS policies');
   }
diff --git a/src/pages/network/containers/Router/actions/AssociateFip.jsx b/src/pages/network/containers/Router/actions/AssociateFip.jsx
index 2a8d9763..3ce892f2 100644
--- a/src/pages/network/containers/Router/actions/AssociateFip.jsx
+++ b/src/pages/network/containers/Router/actions/AssociateFip.jsx
@@ -68,7 +68,7 @@ export default class AssociateFip extends ModalAction {
     } = this.item;
     this.floatingIpStore.fetchList({
       floating_network_id: network_id,
-      project_id: globals.user.project.id,
+      project_id: this.currentProjectId,
       status: 'DOWN',
     });
   }
diff --git a/src/pages/network/containers/VPN/index.jsx b/src/pages/network/containers/VPN/index.jsx
index ef3d22cb..5a9e988c 100644
--- a/src/pages/network/containers/VPN/index.jsx
+++ b/src/pages/network/containers/VPN/index.jsx
@@ -14,7 +14,7 @@
 
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/TabList';
-import { vpnEndpoint } from 'utils/constants';
+import { vpnEndpoint } from 'client/client/constants';
 import VPNGateway from './VPNGateway';
 import EndPointGroup from './EndpointGroup';
 import IKEPolicy from './IKEPolicy';
diff --git a/src/resources/image.jsx b/src/resources/image.jsx
index c7741598..0184d4d4 100644
--- a/src/resources/image.jsx
+++ b/src/resources/image.jsx
@@ -15,6 +15,7 @@
 import React from 'react';
 import ImageType from 'components/ImageType';
 import { get } from 'lodash';
+import globalRootStore from 'stores/root';
 
 export const imageStatus = {
   active: t('Active'),
@@ -99,21 +100,14 @@ export const imageProperties = {
 export const transitionStatusList = ['saving', 'queued', 'pending_delete'];
 
 export const isOwnerOrAdmin = (item) => {
-  const {
-    project: { id },
-    hasAdminRole,
-  } = globals.user;
-  if (id === item.owner) {
+  if (globalRootStore.projectId === item.owner) {
     return true;
   }
-  return hasAdminRole;
+  return globalRootStore.hasAdminRole;
 };
 
 export const isOwner = (item) => {
-  const {
-    project: { id },
-  } = globals.user;
-  if (id === item.owner) {
+  if (globalRootStore.projectId === item.owner) {
     return true;
   }
   return false;
diff --git a/src/resources/instance.jsx b/src/resources/instance.jsx
index a3b27238..55efc0c0 100644
--- a/src/resources/instance.jsx
+++ b/src/resources/instance.jsx
@@ -13,10 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import moment from 'moment';
 import ImageType from 'components/ImageType';
 import globalRootStore from 'stores/root';
-import { getLocalTimeStr, timeFormatStr } from 'utils/time';
 
 import lockSvg from 'src/asset/image/lock.svg';
 import unlockSvg from 'src/asset/image/unlock.svg';
@@ -263,53 +261,6 @@ export const getUserData = (password, userData) => {
   return onlyUserData.replace(/USER_DATA/g, userData);
 };
 
-function range(start, end) {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    result.push(i);
-  }
-  return result;
-}
-
-export const getExpireDateFormItem = (autoRelease) => ({
-  name: 'expiredTime',
-  label: t('Expired Time'),
-  type: 'date-picker',
-  hidden: !autoRelease,
-  required: autoRelease,
-  format: timeFormatStr.YMDHm,
-  showTime: {
-    defaultValue: getLocalTimeStr('00:00:00', 'HH:mm'),
-    // minuteStep: 60,
-  },
-  showNow: false,
-  disabledDate: (current) => current && current < moment().startOf('day'),
-  disabledTime: (date) => {
-    const currentDay = moment();
-    const currentHour = moment().hour();
-    const currentMinute = moment().minute();
-    const disabledMap = {};
-    if (moment(date).isSame(currentDay, 'day')) {
-      disabledMap.disabledHours = () => range(0, currentHour);
-      if (moment(date).isSame(currentDay, 'hour')) {
-        disabledMap.disabledMinutes = () => range(0, currentMinute + 1);
-      }
-    }
-    return disabledMap;
-  },
-  validator: (rule, value) => {
-    if (!value) {
-      return Promise.reject(t('Please set expiration time'));
-    }
-    if (moment(value) < moment()) {
-      return Promise.reject(
-        t('The expiration time needs to be greater than the current time.')
-      );
-    }
-    return Promise.resolve();
-  },
-});
-
 export const getIpInitValue = (subnet) => {
   if (!subnet) {
     return null;
diff --git a/src/resources/network.js b/src/resources/network.js
index 0c4eb2c6..c1a112d6 100644
--- a/src/resources/network.js
+++ b/src/resources/network.js
@@ -95,3 +95,5 @@ export const getAnchorData = (num, y) => {
   }
   return result;
 };
+
+export const isExternalNetwork = (network) => !!network['router:external'];
diff --git a/src/resources/policy.js b/src/resources/policy.js
index af5f2ee6..336c8de0 100644
--- a/src/resources/policy.js
+++ b/src/resources/policy.js
@@ -13,12 +13,13 @@
 // limitations under the License.
 
 import { isArray, isObject, isFunction, isString, has } from 'lodash';
+import globalRootStore from 'stores/root';
 
 export const checkPolicyRule = (rule, actionName) => {
   if (!rule) {
     return true;
   }
-  const item = globals.policies.find((it) => it.rule === rule);
+  const item = globalRootStore.policies.find((it) => it.rule === rule);
   if (!item) {
     // eslint-disable-next-line no-console
     console.log('policy rule not exit', rule, actionName);
@@ -37,7 +38,7 @@ const checkPolicyRules = (rules, every, actionName) => {
 };
 
 export const systemRoleIsReader = () => {
-  const { user: { roles = [] } = {} } = globals || {};
+  const { roles = [] } = globalRootStore.user || {};
   const readerRole = 'system_reader';
   const adminRoles = ['system_admin', 'admin'];
   const hasReaderRole = roles.some((it) => it.name === readerRole);
@@ -55,9 +56,11 @@ const checkItemPolicy = ({
   isAdminPage,
   enableSystemReader,
 }) => {
-  if (globals.policies.length === 0) {
-    // TODO: change to false
-    return true;
+  if (globalRootStore.policies.length === 0) {
+    return false;
+  }
+  if (isAdminPage && !enableSystemReader && systemRoleIsReader()) {
+    return false;
   }
   if (isAdminPage && !enableSystemReader && systemRoleIsReader()) {
     return false;
diff --git a/src/stores/base.js b/src/stores/base.js
index 674eac25..d07e1e8b 100644
--- a/src/stores/base.js
+++ b/src/stores/base.js
@@ -12,11 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { get, isArray } from 'lodash';
+import { get } from 'lodash';
 import { action, observable } from 'mobx';
-import { keystoneBase } from 'utils/constants';
+import client from 'client';
 import List from './base-list';
 import globalProjectMapStore from './project';
+import globalRootStore from './root';
 
 export default class BaseStore {
   list = new List();
@@ -30,16 +31,16 @@ export default class BaseStore {
   @observable
   isSubmitting = false;
 
-  get module() {
-    return '';
+  get client() {
+    return {};
   }
 
-  get apiVersion() {
-    return '';
+  get skylineClient() {
+    return client.skyline;
   }
 
   get responseKey() {
-    return '';
+    return this.client.responseKey;
   }
 
   get listResponseKey() {
@@ -50,6 +51,22 @@ export default class BaseStore {
     return true;
   }
 
+  get currentUser() {
+    return globalRootStore.user || {};
+  }
+
+  get currentProjectId() {
+    return globalRootStore.projectId;
+  }
+
+  get hasAdminRole() {
+    return globalRootStore.hasAdminRole;
+  }
+
+  get enableBilling() {
+    return globalRootStore.enableBilling;
+  }
+
   get mapper() {
     // update response items;
     return (data) => data;
@@ -112,7 +129,7 @@ export default class BaseStore {
 
   get paramsFuncPage() {
     return (params) => {
-      const { current, ...rest } = params;
+      const { current, withPrice, ...rest } = params;
       return rest;
     };
   }
@@ -126,14 +143,39 @@ export default class BaseStore {
     return false;
   }
 
-  get currentProject() {
-    return globals.user.project.id;
-  }
-
   get markerKey() {
     return 'id';
   }
 
+  get listWithDetail() {
+    return false;
+  }
+
+  get isSubResource() {
+    return false;
+  }
+
+  getFatherResourceId = (params) => params.id;
+
+  detailFetchByClient(resourceParams, params) {
+    const { id } = resourceParams;
+    if (!this.isSubResource) {
+      return this.client.show(id, params);
+    }
+    const fatherId = this.getFatherResourceId(resourceParams);
+    return this.client.show(fatherId, id, params);
+  }
+
+  listFetchByClient(params, originParams) {
+    if (!this.isSubResource) {
+      return this.listWithDetail
+        ? this.client.listDetail(params)
+        : this.client.list(params);
+    }
+    const fatherId = this.getFatherResourceId(originParams);
+    return this.client.list(fatherId, params);
+  }
+
   getItemProjectId(item) {
     return (
       item.project_id ||
@@ -153,21 +195,13 @@ export default class BaseStore {
     const itemProject = globalProjectMapStore.getItemProjectId(item);
     const { shared, visibility, is_public } = item;
     return (
-      itemProject === this.currentProject ||
+      itemProject === this.currentProjectId ||
       is_public ||
       shared ||
       visibility === 'public'
     );
   };
 
-  getListUrl = () => `${this.apiVersion}/${this.module}`;
-
-  getListDetailUrl = () => '';
-
-  getListPageUrl = () => '';
-
-  getDetailUrl = ({ id }) => `${this.getListUrl()}/${id}`;
-
   @action
   setModule(module) {
     this.module = module;
@@ -188,12 +222,6 @@ export default class BaseStore {
     return promise;
   };
 
-  async fetchProjectDetail({ id }) {
-    return request.get(`${keystoneBase()}/projects/${id}`, {}, null, () =>
-      Promise.resolve('error')
-    );
-  }
-
   // eslint-disable-next-line no-unused-vars
   async listDidFetch(items, allProjects, filters) {
     return items;
@@ -208,7 +236,7 @@ export default class BaseStore {
     if (!this.needGetProject) {
       return items;
     }
-    if (!all_projects || !globals.user.hasAdminRole) {
+    if (!all_projects || !this.hasAdminRole) {
       return items;
     }
     const projectIds = [];
@@ -240,28 +268,33 @@ export default class BaseStore {
     return items;
   }
 
-  async requestListByMarker(url, params, limit, marker) {
+  updateMarkerParams = (limit, marker) => {
+    return {
+      limit,
+      marker,
+    };
+  };
+
+  async requestListByMarker(params, limit, marker) {
+    const markerParams = this.updateMarkerParams(limit, marker);
     const newParams = {
       ...params,
-      limit,
+      ...markerParams,
     };
-    if (marker) {
-      newParams.marker = marker;
-    }
-    return request.get(url, newParams);
+    return this.listFetchByClient(newParams);
   }
 
-  async requestListAllByLimit(url, params, limit) {
+  async requestListAllByLimit(params, limit) {
     let marker = '';
     let hasNext = true;
     let datas = [];
     while (hasNext) {
       // eslint-disable-next-line no-await-in-loop
-      const result = await this.requestListByMarker(url, params, limit, marker);
+      const result = await this.requestListByMarker(params, limit, marker);
       const data = this.getListDataFromResult(result);
       datas = [...datas, ...data];
       if (data.length >= limit) {
-        marker = this.parseMarker(data);
+        marker = this.parseMarker(data, result, datas);
         if (!marker) {
           // eslint-disable-next-line no-console
           console.log('parse marker error!');
@@ -274,21 +307,21 @@ export default class BaseStore {
     return datas;
   }
 
-  async requestListAll(url, params) {
-    const result = await request.get(url, params);
+  async requestListAll(params, originParams) {
+    const result = await this.listFetchByClient(params, originParams);
     return this.getListDataFromResult(result);
   }
 
-  async requestList(url, params) {
+  async requestList(params, originParams) {
     const datas = !this.fetchListByLimit
-      ? await this.requestListAll(url, params)
-      : await this.requestListAllByLimit(url, params, 100);
+      ? await this.requestListAll(params, originParams)
+      : await this.requestListAllByLimit(params, 100);
     return datas;
   }
 
   // eslint-disable-next-line no-unused-vars
-  async requestListByPage(url, params, page, filters) {
-    const datas = await request.get(url, params);
+  async requestListByPage(params, page, originParams) {
+    const datas = await this.listFetchByClient(params, originParams);
     return datas;
   }
 
@@ -319,19 +352,7 @@ export default class BaseStore {
         params.all_projects = true;
       }
     }
-    let url = `${this.getListDetailUrl() || this.getListUrl()}?`;
-    let othersStr = '';
-    Object.keys(params).forEach((item) => {
-      if (isArray(params[item])) {
-        params[item].forEach((i) => {
-          othersStr += `${item}=${i}&`;
-        });
-      } else {
-        othersStr += `${item}=${params[item]}&`;
-      }
-    });
-    url += othersStr.substring(0, othersStr.length - 1);
-    const allData = await this.requestList(url);
+    const allData = await this.requestList(params, {});
     return allData;
   }
 
@@ -355,9 +376,7 @@ export default class BaseStore {
       }
     }
     const newParams = this.paramsFunc(params);
-    const url = this.getListDetailUrl(filters) || this.getListUrl(filters);
-    const newUrl = this.updateUrl(url, params);
-    const allData = await this.requestList(newUrl, newParams, filters);
+    const allData = await this.requestList(newParams, filters);
     const allDataNew = allData.map((it) =>
       this.mapperBeforeFetchProject(it, filters)
     );
@@ -393,15 +412,15 @@ export default class BaseStore {
   }
 
   // eslint-disable-next-line no-unused-vars
-  parseMarker(datas, result) {
+  parseMarker(datas, result, allDatas) {
     return datas.length === 0
       ? ''
       : get(datas[datas.length - 1], this.markerKey);
   }
 
   @action
-  updateMarker(datas, page, result) {
-    const marker = this.parseMarker(datas, result);
+  updateMarker(datas, page, result, allDatas) {
+    const marker = this.parseMarker(datas, result, allDatas);
     if (page === 1) {
       this.list.markers = [marker];
     } else {
@@ -423,6 +442,9 @@ export default class BaseStore {
     return {};
   }
 
+  // eslint-disable-next-line no-unused-vars
+  getOtherInfo = (result) => {};
+
   @action
   async fetchListByPage({
     limit = 10,
@@ -448,20 +470,10 @@ export default class BaseStore {
     if (marker) {
       params.marker = marker;
     }
-    const url =
-      this.getListPageUrl(filters) ||
-      this.getListDetailUrl(filters) ||
-      this.getListUrl(filters);
-    const newUrl = this.updateUrl(url, params);
     const newParams = this.paramsFuncPage(params, all_projects);
-    const result = await this.requestListByPage(
-      newUrl,
-      newParams,
-      page,
-      filters
-    );
+    const result = await this.requestListByPage(newParams, page, filters);
     const allData = this.getListDataFromResult(result);
-    this.updateMarker(allData, page, result);
+    this.updateMarker(allData, page, result, allData);
     const allDataNew = allData.map(this.mapperBeforeFetchProject);
     let newData = await this.listDidFetchProject(allDataNew, all_projects);
     newData = await this.listDidFetch(newData, all_projects, filters);
@@ -482,6 +494,7 @@ export default class BaseStore {
       count = retCount;
       total = retTotal;
     }
+    const others = this.getOtherInfo(result);
     this.list.update({
       data: newData,
       limit: Number(limit) || 10,
@@ -493,54 +506,7 @@ export default class BaseStore {
       isLoading: false,
       total: count || total,
       ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-
-    return newData;
-  }
-
-  @action
-  async fetchListWithoutDetail({
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    timeFilter,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const { tab, all_projects, ...rest } = filters;
-    const params = { ...rest };
-    if (all_projects) {
-      if (!this.listFilterByProject) {
-        params.all_projects = true;
-      }
-    }
-    const newParams = this.paramsFunc(params, all_projects);
-    const allData = await this.requestList(this.getListUrl(), newParams);
-    const allDataNew = allData.map(this.mapperBeforeFetchProject);
-    const data = allDataNew.filter((item) => {
-      if (!this.listFilterByProject) {
-        return true;
-      }
-      return this.itemInCurrentProject(item, all_projects);
-    });
-    // const items = data.map(this.mapper);
-    let newData = await this.listDidFetchProject(data, all_projects);
-    newData = await this.listDidFetch(newData, all_projects, filters);
-    newData = newData.map(this.mapper);
-    this.list.update({
-      data: newData,
-      total: newData.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      timeFilter,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+      ...others,
     });
 
     return newData;
@@ -551,8 +517,8 @@ export default class BaseStore {
     if (!silent) {
       this.isLoading = true;
     }
-    const result = await request.get(
-      this.getDetailUrl(rest),
+    const result = await this.detailFetchByClient(
+      rest,
       this.getDetailParams({ all_projects })
     );
     const originData = get(result, this.responseKey) || result;
@@ -579,37 +545,30 @@ export default class BaseStore {
   create(data) {
     const body = {};
     body[this.responseKey] = data;
-    return this.submitting(request.post(this.getListUrl(), body));
-  }
-
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.post(
-        `${this.getDetailUrl({ id })}/action`,
-        newObject,
-        null,
-        null,
-        sleepTime
-      )
-    );
+    return this.submitting(this.client.create(body));
   }
 
   @action
   edit({ id }, newObject) {
     const body = {};
     body[this.responseKey] = newObject;
-    return this.submitting(request.put(this.getDetailUrl({ id }), body));
+    return this.submitting(this.client.update(id, body));
+  }
+
+  @action
+  update({ id }, newObject) {
+    const body = {};
+    body[this.responseKey] = newObject;
+    return this.submitting(this.client.update(id, body));
   }
 
   @action
   patch({ id }, newObject) {
-    return this.submitting(request.patch(this.getDetailUrl({ id }), newObject));
+    return this.submitting(this.client.patch(id, newObject));
   }
 
   @action
-  delete = ({ id }) =>
-    this.submitting(request.delete(this.getDetailUrl({ id })));
+  delete = ({ id }) => this.submitting(this.client.delete(id));
 
   @action
   batchDelete(rowKeys) {
@@ -617,17 +576,13 @@ export default class BaseStore {
       Promise.all(
         rowKeys.map((name) => {
           const item = this.list.data.find((_item) => _item.name === name);
-          return request.delete(this.getDetailUrl(item));
+          const { id } = item;
+          return this.client.delete(id);
         })
       )
     );
   }
 
-  reject = (res) => {
-    this.isSubmitting = false;
-    window.onunhandledrejection(res);
-  };
-
   @action
   clearData() {
     this.list.reset();
diff --git a/src/stores/cinder/backup.js b/src/stores/cinder/backup.js
index 15110200..5cc25a14 100644
--- a/src/stores/cinder/backup.js
+++ b/src/stores/cinder/backup.js
@@ -13,28 +13,19 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { cinderBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 import { VolumeStore } from './volume';
 
 export class BackupStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/backups`;
+  get client() {
+    return client.cinder.backups;
   }
 
-  get apiVersion() {
-    return cinderBase();
+  get listWithDetail() {
+    return true;
   }
 
-  get responseKey() {
-    return 'backup';
-  }
-
-  getListDetailUrl = () => `${this.apiVersion}/${this.module}/detail`;
-
   updateParamsSortPage = (params, sortKey, sortOrder) => {
     if (sortKey && sortOrder) {
       params.sort = `${sortKey}:${sortOrder === 'descend' ? 'desc' : 'asc'}`;
@@ -65,9 +56,7 @@ export class BackupStore extends Base {
   @action
   restore(id, data) {
     const body = { restore: data || {} };
-    return this.submitting(
-      request.post(`${this.getDetailUrl({ id })}/restore`, body)
-    );
+    return this.submitting(this.client.restore(id, body));
   }
 }
 const globalBackupStore = new BackupStore();
diff --git a/src/stores/cinder/extra-spec.js b/src/stores/cinder/extra-spec.js
index fa4d2204..5416f031 100644
--- a/src/stores/cinder/extra-spec.js
+++ b/src/stores/cinder/extra-spec.js
@@ -13,43 +13,21 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { cinderBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class ExtraSpecStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/types`;
+  get client() {
+    return client.cinder.types.extraSpecs;
   }
 
-  get apiVersion() {
-    return cinderBase();
+  get isSubResource() {
+    return true;
   }
 
-  get responseKey() {
-    return 'extra_spec';
-  }
+  getFatherResourceId = (params) => params.id;
 
-  getExtraSpecsUrl = ({ id }) =>
-    `${this.apiVersion}/${this.module}/${id}/extra_specs`;
-
-  @action
-  async fetchList({
-    id,
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const params = { ...filters };
-
-    const result = await request.get(this.getExtraSpecsUrl({ id }), params);
+  getListDataFromResult = (result) => {
     const { extra_specs } = result;
     const data = [];
     Object.keys(extra_specs).forEach((key) => {
@@ -60,36 +38,20 @@ export class ExtraSpecStore extends Base {
         value: extra_specs[key],
       });
     });
-    const items = data.map(this.mapper);
-
-    this.list.update({
-      data,
-      total: items.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-    this.urlId = id;
     return data;
-  }
+  };
 
   @action
   createOrUpdate(id, data) {
     const body = {
       extra_specs: data,
     };
-    return this.submitting(request.post(this.getExtraSpecsUrl({ id }), body));
+    return this.submitting(this.client.create(id, body));
   }
 
   @action
   delete = ({ id, keyname }) => {
-    return this.submitting(
-      request.delete(`${this.getExtraSpecsUrl({ id })}/${keyname}`)
-    );
+    return this.submitting(this.client.delete(id, keyname));
   };
 }
 const globalExtraSpecStore = new ExtraSpecStore();
diff --git a/src/stores/cinder/pool.js b/src/stores/cinder/pool.js
index 86f61ce5..af494ece 100644
--- a/src/stores/cinder/pool.js
+++ b/src/stores/cinder/pool.js
@@ -12,27 +12,26 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { cinderBase } from 'utils/constants';
 import { isNumber } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class PoolStore extends Base {
-  get module() {
-    return 'scheduler-stats/get_pools';
-  }
-
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'pool';
+  get client() {
+    return client.cinder.pools;
   }
 
   get listFilterByProject() {
     return false;
   }
 
+  get paramsFunc() {
+    return (params) => ({
+      ...params,
+      detail: true,
+    });
+  }
+
   get mapper() {
     return (data) => {
       const { name, capabilities = {} } = data;
@@ -46,9 +45,6 @@ export class PoolStore extends Base {
       return newItem;
     };
   }
-
-  getListUrl = () =>
-    `${this.apiVersion}/${globals.user.project.id}/${this.module}?detail=true`;
 }
 
 const globalPoolStore = new PoolStore();
diff --git a/src/stores/cinder/qos-spec-key.js b/src/stores/cinder/qos-spec-key.js
index 8abd8d68..d16b0603 100644
--- a/src/stores/cinder/qos-spec-key.js
+++ b/src/stores/cinder/qos-spec-key.js
@@ -13,42 +13,20 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { cinderBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class QosSpecKeyStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/qos-specs`;
+  get client() {
+    return client.cinder.qosSpecs;
   }
 
-  get apiVersion() {
-    return cinderBase();
+  listFetchByClient(params) {
+    const { id } = params;
+    return this.client.show(id);
   }
 
-  get responseKey() {
-    return 'qos_specs';
-  }
-
-  getListUrl = ({ id }) => `${this.apiVersion}/${this.module}/${id}`;
-
-  @action
-  async fetchList({
-    id,
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const params = { ...filters };
-
-    const result = await request.get(this.getListUrl({ id }), params);
+  getListDataFromResult = (result) => {
     const { specs = {} } = result.qos_specs || {};
     const data = [];
     Object.keys(specs).forEach((key) => {
@@ -59,35 +37,21 @@ export class QosSpecKeyStore extends Base {
         value: specs[key],
       });
     });
-    const items = data.map(this.mapper);
-
-    this.list.update({
-      data,
-      total: items.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-    this.urlId = id;
     return data;
-  }
+  };
 
   @action
   createOrUpdate(id, data) {
     const body = {};
-    body[this.responseKey] = data;
-    return this.submitting(request.put(this.getListUrl({ id }), body));
+    body.qos_specs = data;
+    return this.submitting(this.client.update(id, body));
   }
 
   // TODO
   @action
   delete = ({ id, keyname }) =>
     this.submitting(
-      request.put(`${this.getListUrl({ id })}/delete_keys`, {
+      this.client.deleteKeys(id, {
         keys: [keyname],
       })
     );
diff --git a/src/stores/cinder/qos-spec.js b/src/stores/cinder/qos-spec.js
index d36e3897..9fd2a926 100644
--- a/src/stores/cinder/qos-spec.js
+++ b/src/stores/cinder/qos-spec.js
@@ -13,25 +13,12 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { cinderBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
-const qs = require('qs');
-
 export class QosSpecStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/qos-specs`;
-  }
-
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'qos_spec';
+  get client() {
+    return client.cinder.qosSpecs;
   }
 
   @action
@@ -39,13 +26,13 @@ export class QosSpecStore extends Base {
     const body = {};
     const { values } = data;
     body[`${this.responseKey}s`] = values;
-    return this.submitting(request.post(this.getListUrl(), body));
+    return this.submitting(this.client.create(body));
   }
 
   @action
   editConsumer({ id, consumer }) {
     return this.submitting(
-      request.put(this.getDetailUrl({ id }), {
+      this.client.update(id, {
         qos_specs: {
           consumer,
         },
@@ -66,18 +53,12 @@ export class QosSpecStore extends Base {
 
   @action
   associate(id, data) {
-    const query = qs.stringify(data);
-    return this.submitting(
-      request.get(`${this.getDetailUrl({ id })}/associate?${query}`)
-    );
+    return this.submitting(this.client.associate(id, data));
   }
 
   @action
   disassociate(id, data) {
-    const query = qs.stringify(data);
-    return this.submitting(
-      request.get(`${this.getDetailUrl({ id })}/disassociate?${query}`)
-    );
+    return this.submitting(this.client.disassociate(id, data));
   }
 }
 
diff --git a/src/stores/cinder/service.js b/src/stores/cinder/service.js
index 3bbc9b64..ac2d7063 100644
--- a/src/stores/cinder/service.js
+++ b/src/stores/cinder/service.js
@@ -12,40 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { cinderBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class ServiceStore extends Base {
-  get module() {
-    return 'os-services';
-  }
-
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'service';
-  }
-
-  getListUrl = () =>
-    `${this.apiVersion}/${globals.user.project.id}/${this.module}`;
-
-  @action
-  operate(actionName, body) {
-    const url = `${this.getListUrl()}/${actionName}`;
-    return this.submitting(request.put(url, body));
+  get client() {
+    return client.cinder.services;
   }
 
   @action
   enable(body) {
-    return this.operate('enable', body);
+    return this.submitting(this.client.enable(body));
   }
 
   @action
   disable(body) {
-    return this.operate('disable-log-reason', body);
+    return this.submitting(this.client.reason(body));
   }
 }
 
diff --git a/src/stores/cinder/snapshot.js b/src/stores/cinder/snapshot.js
index 3b5cacad..00fa88a6 100644
--- a/src/stores/cinder/snapshot.js
+++ b/src/stores/cinder/snapshot.js
@@ -12,44 +12,30 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { action, observable } from 'mobx';
-import { cinderBase, skylineBase } from 'utils/constants';
+import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class SnapshotStore extends Base {
-  @observable
-  allSnapshotList = [];
-
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/snapshots`;
-  }
-
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'snapshot';
+  get client() {
+    return client.cinder.snapshots;
   }
 
   get listResponseKey() {
     return 'volume_snapshots';
   }
 
+  listFetchByClient(params) {
+    return this.skylineClient.extension.volumeSnapshots(params);
+  }
+
   get paramsFunc() {
     return (params) => {
-      const { id, ...rest } = params;
+      const { id, withPrice, ...rest } = params;
       return rest;
     };
   }
 
-  getListPageUrl = () => `${skylineBase()}/extension/volume_snapshots`;
-
-  getListDetailUrl = () => `${skylineBase()}/extension/volume_snapshots`;
-
   async listDidFetch(items, allProjects, filters) {
     if (items.length === 0) {
       return items;
@@ -61,10 +47,7 @@ export class SnapshotStore extends Base {
 
   async detailDidFetch(item) {
     const { volume_id } = item;
-    const volumeUrl = `${cinderBase()}/${
-      globals.user.project.id
-    }/volumes/${volume_id}`;
-    const { volume } = await request.get(volumeUrl);
+    const { volume } = await client.cinder.volumes.show(volume_id);
     item.volume = volume;
     return item;
   }
@@ -76,19 +59,10 @@ export class SnapshotStore extends Base {
     }
   };
 
-  @action
-  fetchAllList() {
-    return request.get(this.getListUrl()).then((res) => {
-      const list = res.snapshots || [];
-      this.allSnapshotList = list;
-      return list;
-    });
-  }
-
   @action
   update(id, data) {
     const body = { [this.responseKey]: data };
-    return this.submitting(request.put(this.getDetailUrl({ id }), body));
+    return this.submitting(this.client.update(id, body));
   }
 }
 const globalSnapshotStore = new SnapshotStore();
diff --git a/src/stores/cinder/volume-type.js b/src/stores/cinder/volume-type.js
index 7f2bbfef..c93a93f3 100644
--- a/src/stores/cinder/volume-type.js
+++ b/src/stores/cinder/volume-type.js
@@ -13,26 +13,19 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { cinderBase } from 'utils/constants';
+import client from 'client';
+import { uniq } from 'lodash';
 import Base from '../base';
 
 export class VolumeTypeStore extends Base {
   @observable
   access = [];
 
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/types`;
-  }
+  @observable
+  projectVolumeTypes = [];
 
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'volume_type';
+  get client() {
+    return client.cinder.types;
   }
 
   get listFilterByProject() {
@@ -41,32 +34,58 @@ export class VolumeTypeStore extends Base {
 
   get paramsFuncPage() {
     return (params) => {
-      const { current, showEncryption, ...rest } = params;
+      const {
+        current,
+        showEncryption,
+        showQoS,
+        withPrice,
+        resourceType,
+        ...rest
+      } = params;
       return rest;
     };
   }
 
+  get paramsFunc() {
+    return this.paramsFuncPage;
+  }
+
   get mapper() {
     return (data) => {
       const { extra_specs: { multiattach = 'False' } = {} } = data;
       return {
         ...data,
         multiattach: multiattach === '<is> True',
+        enableBilling: this.enableBilling,
       };
     };
   }
 
   async listDidFetch(items, allProjects, filters) {
-    const { showEncryption } = filters;
+    const { showEncryption, showQoS } = filters;
     if (items.length === 0) {
       return items;
     }
+    if (showQoS) {
+      const qosIds = uniq(
+        items.filter((it) => !!it.qos_specs_id).map((it) => it.qos_specs_id)
+      );
+      if (qosIds.length) {
+        const qosReqs = qosIds.map((id) => client.cinder.qosSpecs.show(id));
+        const qosResults = await Promise.all(qosReqs);
+        const qosItems = qosResults.map((it) => it.qos_specs);
+        items.forEach((it) => {
+          if (it.qos_specs_id) {
+            it.qos_specs = qosItems.find((qos) => qos.id === it.qos_specs_id);
+            it.qos_specs_name = (it.qos_specs || {}).name;
+          }
+        });
+      }
+    }
     if (!showEncryption) {
       return items;
     }
-    const promiseList = items.map((i) =>
-      request.get(`${this.getDetailUrl({ id: i.id })}/encryption`)
-    );
+    const promiseList = items.map((i) => this.client.encryption.list(i.id));
     const encryptionList = await Promise.all(promiseList);
     const result = items.map((i) => {
       const { id } = i;
@@ -81,7 +100,7 @@ export class VolumeTypeStore extends Base {
 
   async detailDidFetch(item) {
     const { id } = item || {};
-    const result = await request.get(`${this.getDetailUrl({ id })}/encryption`);
+    const result = await this.client.encryption.list(id);
     item.encryption = result;
     return item;
   }
@@ -90,7 +109,7 @@ export class VolumeTypeStore extends Base {
   update(id, data) {
     const body = {};
     body[this.responseKey] = data;
-    return this.submitting(request.put(this.getDetailUrl({ id }), body));
+    return this.submitting(this.client.update(id, body));
   }
 
   @action
@@ -98,16 +117,12 @@ export class VolumeTypeStore extends Base {
     const body = {
       encryption: data,
     };
-    return this.submitting(
-      request.post(`${this.getDetailUrl({ id })}/encryption`, body)
-    );
+    return this.submitting(this.client.encryption.create(id, body));
   }
 
   @action
   deleteEncryption(id, encryption_id) {
-    return this.submitting(
-      request.delete(`${this.getDetailUrl({ id })}/encryption/${encryption_id}`)
-    );
+    return this.submitting(this.client.encryption.delete(id, encryption_id));
   }
 
   @action
@@ -115,17 +130,16 @@ export class VolumeTypeStore extends Base {
     const body = {};
     body[this.responseKey] = data;
     if (projectIds.length === 0) {
-      return this.submitting(request.post(this.getListUrl(), body));
+      return this.submitting(this.client.create(body));
     }
     this.isSubmitting = true;
-    const result = await request.post(this.getListUrl(), body);
+    const result = await this.client.create(body);
     const { id } = result[this.responseKey];
     return this.addProjectAccess(id, projectIds);
   }
 
   @action
   addProjectAccess(id, projectIds = []) {
-    const actionUrl = `${this.getDetailUrl({ id })}/action`;
     return this.submitting(
       Promise.all(
         projectIds.map((it) => {
@@ -134,7 +148,7 @@ export class VolumeTypeStore extends Base {
               project: it,
             },
           };
-          return request.post(actionUrl, actionBody);
+          return this.client.action(id, actionBody);
         })
       )
     );
@@ -142,7 +156,6 @@ export class VolumeTypeStore extends Base {
 
   @action
   removeProjectAccess(id, projectIds = []) {
-    const actionUrl = `${this.getDetailUrl({ id })}/action`;
     return this.submitting(
       Promise.all(
         projectIds.map((it) => {
@@ -151,7 +164,7 @@ export class VolumeTypeStore extends Base {
               project: it,
             },
           };
-          return request.post(actionUrl, actionBody);
+          return this.client.action(id, actionBody);
         })
       )
     );
@@ -159,8 +172,7 @@ export class VolumeTypeStore extends Base {
 
   @action
   async fetchProjectAccess(id) {
-    const url = `${this.getDetailUrl({ id })}/os-volume-type-access`;
-    const result = await request.get(url);
+    const result = await this.client.getAccess(id);
     this.access = result.volume_type_access;
   }
 
@@ -176,6 +188,30 @@ export class VolumeTypeStore extends Base {
     await this.removeProjectAccess(id, dels);
     return this.addProjectAccess(id, adds);
   }
+
+  @action
+  async fetchProjectVolumeTypes(projectId) {
+    const result = await this.client.list({ is_public: 'None' });
+    const { volume_types: types } = result;
+    const privateTypes = types.filter((it) => !it.is_public);
+    if (!privateTypes.length) {
+      this.projectVolumeTypes = types;
+      return types;
+    }
+    const projectTypes = types.filter((it) => it.public);
+    const reqs = privateTypes.map((it) => this.client.getAccess(it.id));
+    const accessResults = await Promise.all(reqs);
+    accessResults.forEach((it) => {
+      const { volume_type_access: access } = it;
+      const item = access.find((a) => a.project_id === projectId);
+      if (item) {
+        const type = types.find((t) => t.id === item.volume_type_id);
+        projectTypes.push(type);
+      }
+    });
+    this.projectVolumeTypes = projectTypes;
+    return projectTypes;
+  }
 }
 const globalVolumeTypeStore = new VolumeTypeStore();
 export default globalVolumeTypeStore;
diff --git a/src/stores/cinder/volume.js b/src/stores/cinder/volume.js
index 8764f0b0..81537965 100644
--- a/src/stores/cinder/volume.js
+++ b/src/stores/cinder/volume.js
@@ -13,8 +13,9 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { cinderBase, skylineBase } from 'utils/constants';
 import { isOsDisk } from 'resources/volume';
+import { renderFilterMap } from 'utils/index';
+import client from 'client';
 import Base from '../base';
 import globalVolumeTypeStore from './volume-type';
 
@@ -31,32 +32,32 @@ export class VolumeStore extends Base {
   @observable
   quotaSet = {};
 
-  get module() {
-    if (!globals.user) {
-      return null;
+  get client() {
+    return client.cinder.volumes;
+  }
+
+  get transferClient() {
+    return client.cinder.volumeTransfers;
+  }
+
+  listFetchByClient(params, originParams) {
+    const { recycle } = originParams;
+    if (recycle) {
+      return this.client.listDetail(params);
     }
-    return `${globals.user.project.id}/volumes`;
+    return this.skylineClient.extension.volumes(params);
   }
 
-  get apiVersion() {
-    return cinderBase();
-  }
-
-  get responseKey() {
-    return 'volume';
-  }
-
-  getListDetailUrl = () => `${skylineBase()}/extension/volumes`;
-
-  getListPageUrl = () => `${skylineBase()}/extension/volumes`;
-
-  getListDetailUrlOpenstack = () => `${this.apiVersion}/${this.module}/detail`;
-
   get mapper() {
     return (volume) => ({
       ...volume,
       disk_tag: isOsDisk(volume) ? 'os_disk' : 'data_disk',
       description: volume.description || (volume.origin_data || {}).description,
+      delete_interval:
+        volume.metadata && volume.metadata.delete_interval
+          ? new Date(renderFilterMap.toLocalTime(volume.updated_at)).getTime() +
+            Number(volume.metadata.delete_interval) * 1000
+          : null,
     });
   }
 
@@ -68,16 +69,32 @@ export class VolumeStore extends Base {
   }
 
   updateParamsSortPage = (params, sortKey, sortOrder) => {
+    const { recycle } = params;
     if (sortKey && sortOrder) {
-      params.sort_keys = sortKey;
-      params.sort_dirs = sortOrder === 'descend' ? 'desc' : 'asc';
+      const dirs = sortOrder === 'descend' ? 'desc' : 'asc';
+      if (recycle) {
+        params.sort = `${sortKey}:${dirs}`;
+      } else {
+        params.sort_keys = sortKey;
+        params.sort_dirs = sortOrder === 'descend' ? 'desc' : 'asc';
+      }
     }
   };
 
   async listDidFetch(items, _, filters) {
+    const { withPrice } = filters;
     if (items.length === 0) {
       return items;
     }
+    if (withPrice) {
+      const volumeTypes = await globalVolumeTypeStore.fetchList({ withPrice });
+      items.forEach((item) => {
+        const { size, volume_type } = item;
+        const volumeType = volumeTypes.find((it) => it.name === volume_type);
+        const cost = volumeType ? (volumeType.priceCost * size).toFixed(2) : 0;
+        item.cost = cost;
+      });
+    }
     const { serverId } = filters;
     return !serverId
       ? items
@@ -88,54 +105,41 @@ export class VolumeStore extends Base {
         );
   }
 
-  async detailDidFetch(item, all_projects) {
+  async detailDidFetch(item, all_projects, { withPrice }) {
     const { id } = item;
     try {
       const result = await this.fetchList({ uuid: id, all_projects });
       item.itemInList = result[0];
       item.attachmentsContrib = result[0].attachments;
     } catch (e) {}
+    if (withPrice) {
+      const volumeTypes = await globalVolumeTypeStore.fetchList({ withPrice });
+      const { size, volume_type } = item;
+      const volumeType = volumeTypes.find((it) => it.name === volume_type);
+      const cost = volumeType ? (volumeType.priceCost * size).toFixed(2) : 0;
+      item.cost = cost;
+    }
     return item;
   }
 
-  @action
-  async fetchCinderService() {
-    return this.submitting(
-      request
-        .get(
-          `${this.apiVersion}/${globals.user.project.id}/os-services?binary=cinder-volume`
-        )
-        .then((data) => {
-          this.cinderServiceOptions = (data.services || [])
-            .filter((item) => item.status === 'enabled')
-            .map((s) => ({
-              value: s.host,
-              lable: s.host,
-            }));
-        })
-    );
-  }
-
   @action
   async fetchQuota() {
-    const url = `${this.apiVersion}/${this.currentProject}/os-quota-sets/${this.currentProject}?usage=True`;
-    const result = await request.get(url);
+    const result = await client.cinder.quotaSets.show(this.currentProjectId, {
+      usage: 'True',
+    });
     this.quotaSet = result.quota_set;
   }
 
   @action
   async fetchAvailabilityZoneList() {
-    const url = `${this.apiVersion}/${globals.user.project.id}/os-availability-zone`;
-    const result = await request.get(url);
+    const result = await client.cinder.azones.list();
     this.availabilityZones = result.availabilityZoneInfo;
   }
 
   @action
   async operation(id, data, key) {
     const body = { [key]: data };
-    return this.submitting(
-      request.post(`${this.getDetailUrl({ id })}/action`, body)
-    );
+    return this.submitting(this.client.action(id, body));
   }
 
   @action
@@ -150,7 +154,7 @@ export class VolumeStore extends Base {
 
   @action
   revert(id, data) {
-    return this.operation(id, data, 'revert');
+    return this.operation(id, data, 'revert_any');
   }
 
   @action
@@ -171,45 +175,36 @@ export class VolumeStore extends Base {
   @action
   update(id, data) {
     const body = { [this.responseKey]: data };
-    return this.submitting(request.put(this.getDetailUrl({ id }), body));
+    return this.submitting(this.client.update(id, body));
+  }
+
+  @action
+  softDelete(id, data) {
+    return this.operation(id, data, 'os-recycle');
+  }
+
+  restore(id) {
+    return this.operation(id, {}, 'os-restore-recycle');
   }
 
   @action
   createTransfer(data) {
     const body = { transfer: data };
-    return this.submitting(
-      request.post(
-        `${this.apiVersion}/${globals.user.project.id}/volume-transfers`,
-        body
-      )
-    );
+    return this.submitting(this.transferClient.create(body));
   }
 
   @action
   cancelTransfer({ id }) {
-    return this.submitting(
-      request.get(
-        `${this.apiVersion}/${globals.user.project.id}/volume-transfers`
-      )
-    ).then((resData) => {
+    return this.submitting(this.transferClient.list()).then((resData) => {
       const findObj = (resData.transfers || []).find((s) => s.volume_id === id);
-      return this.submitting(
-        request.delete(
-          `${this.apiVersion}/${globals.user.project.id}/volume-transfers/${findObj.id}`
-        )
-      );
+      return this.submitting(this.transferClient.delete(findObj.id));
     });
   }
 
   @action
   acceptVolumeTransfer(transfer_id, data) {
     const body = { accept: data };
-    return this.submitting(
-      request.post(
-        `${this.apiVersion}/${globals.user.project.id}/volume-transfers/${transfer_id}/accept`,
-        body
-      )
-    );
+    return this.submitting(this.transferClient.accept(transfer_id, body));
   }
 
   @action
@@ -225,3 +220,5 @@ export class VolumeStore extends Base {
 
 const globalVolumeStore = new VolumeStore();
 export default globalVolumeStore;
+
+export const globalRecycleVolumeStore = new VolumeStore();
diff --git a/src/stores/glance/image.js b/src/stores/glance/image.js
index 015b1350..39a554db 100644
--- a/src/stores/glance/image.js
+++ b/src/stores/glance/image.js
@@ -12,32 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { glanceBase } from 'utils/constants';
 import { action, observable } from 'mobx';
+import client from 'client';
 import Base from '../base';
-// import { getArrayBuffer } from 'utils/file';
 
 export class ImageStore extends Base {
   @observable
   members = [];
 
-  get module() {
-    return 'images';
+  get client() {
+    return client.glance.images;
   }
 
-  get apiVersion() {
-    return glanceBase();
-  }
-
-  get responseKey() {
-    return 'image';
-  }
-
-  // get listFilterByProject() {
-  //   // use it for nuetron apois
-  //   return true;
-  // }
-
   get fetchListByLimit() {
     return true;
   }
@@ -46,9 +32,16 @@ export class ImageStore extends Base {
     return this.paramsFuncPage;
   }
 
+  updateParamsSortPage = (params, sortKey, sortOrder) => {
+    if (sortKey && sortOrder) {
+      params.sort_key = sortKey;
+      params.sort_dir = sortOrder === 'descend' ? 'desc' : 'asc';
+    }
+  };
+
   get paramsFuncPage() {
     return (params) => {
-      const { current, all_projects, ...rest } = params;
+      const { current, all_projects, withPrice, ...rest } = params;
       return {
         ...rest,
         // image_type: 'image',
@@ -73,50 +66,32 @@ export class ImageStore extends Base {
   }
 
   @action
-  async uploadImage(imageId, file) {
-    const url = `${this.getListUrl()}/${imageId}/file`;
-    // const body = await getArrayBuffer(file);
-    const body = file;
-    const headers = {
-      'content-type': 'application/octet-stream',
-    };
-
-    const options = {
-      headers,
-    };
-    return request.put(url, body, options);
+  async uploadImage(imageId, file, conf) {
+    return this.client.uploadFile(imageId, file, conf);
   }
 
   @action
-  async create(data, file, members) {
+  async create(data, file, members, conf) {
     this.isSubmitting = true;
-    const image = await request.post(this.getListUrl(), data);
+    const image = await this.client.create(data);
     const { id } = image;
     // return this.submitting(this.uploadImage(id, file));
     if (members.length > 0) {
       await Promise.all(members.map((it) => this.createMember(id, it)));
     }
-    await this.uploadImage(id, file);
+    await this.uploadImage(id, file, conf);
     this.isSubmitting = false;
     return Promise.resolve();
   }
 
   @action
   async update({ id }, newbody) {
-    const url = this.getDetailUrl({ id });
-    const headers = {
-      'content-type': 'application/openstack-images-v2.1-json-patch',
-    };
-    const options = {
-      headers,
-    };
-    return request.patch(url, newbody, options);
+    return this.client.patch(id, newbody);
   }
 
   @action
   async getMembers(id) {
-    const url = `${this.getDetailUrl({ id })}/members`;
-    const result = await request.get(url);
+    const result = await this.client.members.list(id);
     const { members = [] } = result || {};
     this.members = members;
     return members;
@@ -124,27 +99,24 @@ export class ImageStore extends Base {
 
   @action
   async createMember(id, member) {
-    const url = `${this.getDetailUrl({ id })}/members`;
     const body = {
       member,
     };
-    await request.post(url, body);
+    await this.client.members.create(id, body);
     return this.updateMemberStatus(id, member, 'accepted');
   }
 
   @action
   async updateMemberStatus(id, member, status) {
-    const url = `${this.getDetailUrl({ id })}/members/${member}`;
     const body = {
       status,
     };
-    return request.put(url, body);
+    return this.client.members.update(id, member, body);
   }
 
   @action
   async deleteMember(id, member) {
-    const url = `${this.getDetailUrl({ id })}/members/${member}`;
-    return request.delete(url);
+    return this.client.members.delete(id, member);
   }
 
   @action
diff --git a/src/stores/glance/instance-snapshot.js b/src/stores/glance/instance-snapshot.js
index 3fefa79f..111c51e8 100644
--- a/src/stores/glance/instance-snapshot.js
+++ b/src/stores/glance/instance-snapshot.js
@@ -12,20 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { glanceBase, cinderBase, novaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class InstanceSnapshotStore extends Base {
-  get module() {
-    return 'images';
-  }
-
-  get apiVersion() {
-    return glanceBase();
-  }
-
-  get responseKey() {
-    return 'image';
+  get client() {
+    return client.glance.images;
   }
 
   get listFilterByProject() {
@@ -49,18 +41,26 @@ export class InstanceSnapshotStore extends Base {
 
   get paramsFuncPage() {
     return (params, all_projects) => {
-      const { id, current, ...rest } = params;
+      const { id, current, owner, ...rest } = params;
       const newParams = {
         ...rest,
-        // image_type: 'snapshot',
+        image_type: 'snapshot',
       };
-      if (!all_projects) {
-        newParams.owner = this.currentProject;
+      if (owner) {
+        newParams.owner = owner;
+      } else if (!all_projects) {
+        newParams.owner = this.currentProjectId;
       }
       return newParams;
     };
   }
 
+  async getCountForPage(params) {
+    const { limit, marker, ...rest } = params;
+    const result = await this.client.count(rest);
+    return result;
+  }
+
   get mapperBeforeFetchProject() {
     return (data) => ({
       ...data,
@@ -76,13 +76,11 @@ export class InstanceSnapshotStore extends Base {
     if (!id) {
       return items;
     }
-    const snapshotsUrl = `${cinderBase()}/${globals.user.project.id}/snapshots`;
-    const volumesUrl = `${novaBase()}/servers/${id}/os-volume_attachments`;
     const volumeParams = {};
     const snapshotParams = { all_tenants: allProjects };
     const results = await Promise.all([
-      request.get(snapshotsUrl, snapshotParams),
-      request.get(volumesUrl, volumeParams),
+      client.cinder.snapshots.list(snapshotParams),
+      client.nova.servers.volumeAttachments.list(id, volumeParams),
     ]);
     const snapshotsAll = results[0].snapshots;
     const volumesAll = results[1].volumeAttachments;
@@ -121,16 +119,11 @@ export class InstanceSnapshotStore extends Base {
     if (snapshot) {
       const { snapshot_id: snapshotId } = snapshot;
       item.snapshotId = snapshotId;
-      const currentProject = globals.user.project.id;
-      const snapshotsUrl = `${cinderBase()}/${currentProject}/snapshots/${snapshotId}`;
-      const snapshotResult = await request.get(snapshotsUrl);
+      const snapshotResult = await client.cinder.snapshots.show(snapshotId);
       const snapshotDetail = snapshotResult.snapshot;
       item.snapshotDetail = snapshotDetail;
       const { volume_id: volumeId } = snapshotDetail;
-      const volumeUrl = `${cinderBase()}/${
-        globals.user.project.id
-      }/volumes/${volumeId}`;
-      const volumeResult = await await request.get(volumeUrl);
+      const volumeResult = await client.cinder.volumes.show(volumeId);
       const volumeDetail = volumeResult.volume;
       item.volumeDetail = volumeDetail;
       instanceId =
@@ -142,10 +135,10 @@ export class InstanceSnapshotStore extends Base {
       const { instance_uuid } = item;
       instanceId = instance_uuid;
     }
+    let instanceResult = {};
     try {
       if (instanceId) {
-        const instanceUrl = `${novaBase()}/servers/${instanceId}`;
-        const instanceResult = await request.get(instanceUrl);
+        instanceResult = await client.nova.servers.show(instanceId);
         const { server: { name } = {} } = instanceResult;
         instanceName = name;
       }
@@ -154,6 +147,7 @@ export class InstanceSnapshotStore extends Base {
       server_id: instanceId,
       server_name: instanceName,
     };
+    item.instanceDetail = instanceResult.server || {};
     return item;
   }
 }
diff --git a/src/stores/glance/metadata.js b/src/stores/glance/metadata.js
index c88dd7c0..dcdd700b 100644
--- a/src/stores/glance/metadata.js
+++ b/src/stores/glance/metadata.js
@@ -12,24 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { glanceBase } from 'utils/constants';
 import { action, observable } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class MetadataStore extends Base {
   @observable
   resourceTypes = [];
 
-  get module() {
-    return 'metadefs/namespaces';
+  @observable
+  resourceTypeLoading = false;
+
+  get client() {
+    return client.glance.namespaces;
   }
 
-  get apiVersion() {
-    return glanceBase();
-  }
-
-  get responseKey() {
-    return 'namespace';
+  get resourceTypeClient() {
+    return client.glance.resourceTypes;
   }
 
   get needGetProject() {
@@ -44,9 +43,7 @@ export class MetadataStore extends Base {
     const results = await Promise.all(
       items.map((it) => {
         const { namespace } = it;
-        return request.get(this.getDetailUrl({ id: namespace }), {
-          resource_type: resource_types,
-        });
+        return this.client.show(namespace, { resource_type: resource_types });
       })
     );
     items.forEach((it, index) => {
@@ -95,7 +92,7 @@ export class MetadataStore extends Base {
   @action
   async fetchDetail({ id }) {
     this.isLoading = true;
-    const result = await request.get(this.getDetailUrl({ id }));
+    const result = await this.client.show(id);
     this.detail = result;
     this.isLoading = false;
     return result;
@@ -103,20 +100,18 @@ export class MetadataStore extends Base {
 
   @action
   edit({ id }, newObject) {
-    return this.submitting(
-      request.put(`${this.getDetailUrl({ id })}`, newObject)
-    );
+    return this.submitting(this.client.update(id, newObject));
   }
 
   @action
   create(newObject) {
-    return this.submitting(request.post(`${this.getListUrl()}`, newObject));
+    return this.submitting(this.client.create(newObject));
   }
 
   @action
   async fetchResourceTypes(item) {
-    const url = `${this.apiVersion}/metadefs/resource_types`;
-    const result = await request.get(url);
+    this.resourceTypeLoading = true;
+    const result = await this.resourceTypeClient.list();
     const { resource_type_associations: associations = [] } = item || {};
     const { resource_types: resourceTypes = [] } = result;
     const mapper = {};
@@ -130,6 +125,7 @@ export class MetadataStore extends Base {
       }
     });
     this.resourceTypes = resourceTypes;
+    this.resourceTypeLoading = false;
   }
 
   @action
@@ -137,11 +133,9 @@ export class MetadataStore extends Base {
     this.isSubmitting = true;
     await Promise.all(
       dels.map((it) => {
-        const delUrl = `${this.apiVersion}/${this.module}/${namespace}/resource_types/${it.name}`;
-        return request.delete(delUrl);
+        return this.client.resourceTypes.delete(namespace, it.name);
       })
     );
-    const addUrl = `${this.apiVersion}/${this.module}/${namespace}/resource_types`;
     return this.submitting(
       Promise.all(
         adds.map((it) => {
@@ -149,7 +143,7 @@ export class MetadataStore extends Base {
             name: it.name,
             prefix: it.prefix,
           };
-          return request.post(addUrl, body);
+          return this.client.resourceTypes.create(namespace, body);
         })
       )
     );
diff --git a/src/stores/heat/event.js b/src/stores/heat/event.js
index 70cebf2c..3c2c5fb8 100644
--- a/src/stores/heat/event.js
+++ b/src/stores/heat/event.js
@@ -12,27 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { heatBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class StackEventStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/stacks`;
-  }
-
-  get apiVersion() {
-    return heatBase();
+  get client() {
+    return client.heat.stacks;
   }
 
   get responseKey() {
     return 'event';
   }
 
-  getListUrl = ({ id, name }) =>
-    `${this.apiVersion}/${this.module}/${name}/${id}/events`;
+  listFetchByClient(params, originParams) {
+    const { id, name } = originParams;
+    return this.client.events({ id, name }, params);
+  }
 
   get paramsFunc() {
     return () => {};
diff --git a/src/stores/heat/resource.js b/src/stores/heat/resource.js
index cb00df29..b963c908 100644
--- a/src/stores/heat/resource.js
+++ b/src/stores/heat/resource.js
@@ -12,27 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { heatBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class StackResourceStore extends Base {
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/stacks`;
-  }
-
-  get apiVersion() {
-    return heatBase();
+  get client() {
+    return client.heat.stacks;
   }
 
   get responseKey() {
     return 'resource';
   }
 
-  getListUrl = ({ id, name }) =>
-    `${this.apiVersion}/${this.module}/${name}/${id}/resources`;
+  listFetchByClient(params, originParams) {
+    const { id, name } = originParams;
+    return this.client.resources({ id, name }, params);
+  }
 
   get paramsFunc() {
     return () => {};
diff --git a/src/stores/heat/service.js b/src/stores/heat/service.js
index 71d72295..d859e757 100644
--- a/src/stores/heat/service.js
+++ b/src/stores/heat/service.js
@@ -12,24 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { heatBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class HeatServiceStore extends Base {
-  get module() {
-    return 'services';
+  get client() {
+    return client.heat.services;
   }
-
-  get apiVersion() {
-    return heatBase();
-  }
-
-  get responseKey() {
-    return 'service';
-  }
-
-  getListUrl = () =>
-    `${this.apiVersion}/${globals.user.project.id}/${this.module}`;
 }
 
 const globalHeatServiceStore = new HeatServiceStore();
diff --git a/src/stores/heat/stack.js b/src/stores/heat/stack.js
index 435a8f83..4f089317 100644
--- a/src/stores/heat/stack.js
+++ b/src/stores/heat/stack.js
@@ -13,26 +13,20 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { heatBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class StackStore extends Base {
   @observable
-  template = {};
+  template = null;
 
-  get module() {
-    if (!globals.user) {
-      return null;
-    }
-    return `${globals.user.project.id}/stacks`;
+  get client() {
+    return client.heat.stacks;
   }
 
-  get apiVersion() {
-    return heatBase();
-  }
-
-  get responseKey() {
-    return 'stack';
+  detailFetchByClient(resourceParams) {
+    const { id, name } = resourceParams;
+    return this.client.show({ id, name });
   }
 
   updateParamsSortPage = (params, sortKey, sortOrder) => {
@@ -42,8 +36,6 @@ export class StackStore extends Base {
     }
   };
 
-  getDetailUrl = ({ id, name }) => `${this.getListUrl()}/${name}/${id}`;
-
   get paramsFuncPage() {
     return (params) => {
       const { current, all_projects, ...rest } = params;
@@ -54,7 +46,7 @@ export class StackStore extends Base {
       if (all_projects) {
         newParams.global_tenant = true;
       } else {
-        newParams.tenant = globals.user.project.id;
+        newParams.tenant = this.currentProjectId;
       }
       return newParams;
     };
@@ -76,28 +68,25 @@ export class StackStore extends Base {
 
   @action
   create(body) {
-    return this.submitting(request.post(this.getListUrl(), body));
+    return this.submitting(this.client.create(body));
   }
 
   @action
   edit({ id, name }, body) {
-    return this.submitting(request.put(this.getDetailUrl({ id, name }), body));
+    return this.submitting(this.client.update({ id, name }, body));
   }
 
   @action
-  delete = ({ id, name }) =>
-    this.submitting(request.delete(this.getDetailUrl({ id, name })));
+  delete = ({ id, name }) => this.submitting(this.client.delete({ id, name }));
 
   @action
   abandon = ({ id, name }) => {
-    const url = `${this.getDetailUrl({ id, name })}/abandon`;
-    return this.submitting(request.delete(url));
+    return this.submitting(this.client.abandon({ id, name }));
   };
 
   @action
   getTemplate = async ({ id, name }) => {
-    const url = `${this.getDetailUrl({ id, name })}/template`;
-    const result = await request.get(url);
+    const result = await this.client.template({ id, name });
     this.template = result;
   };
 }
diff --git a/src/stores/index.jsx b/src/stores/index.jsx
new file mode 100644
index 00000000..f7dc2a7d
--- /dev/null
+++ b/src/stores/index.jsx
@@ -0,0 +1,43 @@
+import globalFloatingIpsStore from './neutron/floatingIp';
+import globalImageStore from './glance/image';
+import globalServerStore from './nova/instance';
+import globalInstanceSnapshotStore from './glance/instance-snapshot';
+import globalKeypairStore from './nova/keypair';
+import globalNetworkStore from './neutron/network';
+import globalPortForwardingStore from './neutron/port-forwarding';
+import globalQoSPolicyStore from './neutron/qos-policy';
+import globalRecycleBinStore from './skyline/recycle-server';
+import globalSecurityGroupStore from './neutron/security-group';
+import globalSecurityGroupRuleStore from './neutron/security-rule';
+import globalServerGroupStore from './nova/server-group';
+import globalSnapshotStore from './cinder/snapshot';
+import globalStaticRouteStore from './neutron/static-route';
+import globalSubnetStore from './neutron/subnet';
+import globalVirtualAdapterStore from './neutron/virtual-adapter';
+import globalVolumeStore from './cinder/volume';
+import globalComputeHostStore from './nova/compute-host';
+import globalHypervisorStore from './nova/hypervisor';
+import globalStackStore from './heat/stack';
+
+export default {
+  globalFloatingIpsStore,
+  globalImageStore,
+  globalServerStore,
+  globalInstanceSnapshotStore,
+  globalKeypairStore,
+  globalNetworkStore,
+  globalPortForwardingStore,
+  globalQoSPolicyStore,
+  globalRecycleBinStore,
+  globalSecurityGroupStore,
+  globalSecurityGroupRuleStore,
+  globalServerGroupStore,
+  globalSnapshotStore,
+  globalStaticRouteStore,
+  globalSubnetStore,
+  globalVirtualAdapterStore,
+  globalVolumeStore,
+  globalComputeHostStore,
+  globalHypervisorStore,
+  globalStackStore,
+};
diff --git a/src/stores/ironic/ironic.js b/src/stores/ironic/ironic.js
index 21e09fca..d986b68c 100644
--- a/src/stores/ironic/ironic.js
+++ b/src/stores/ironic/ironic.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { ironicBase, placementBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class IronicStore extends Base {
@@ -26,20 +26,18 @@ export class IronicStore extends Base {
   @observable
   traits = [];
 
-  get module() {
-    return 'nodes';
+  get client() {
+    return client.ironic.nodes;
   }
 
-  get apiVersion() {
-    return ironicBase();
+  get portClient() {
+    return client.ironic.ports;
   }
 
-  get responseKey() {
-    return 'node';
+  get listWithDetail() {
+    return true;
   }
 
-  getListDetailUrl = () => `${this.getListUrl()}/detail`;
-
   async detailDidFetch(item, all_projects, params) {
     if (params.onlyDetail) {
       return item;
@@ -48,9 +46,9 @@ export class IronicStore extends Base {
     const newItem = { ...item };
     const [bootDevice, states, validate, ports] = await Promise.all([
       this.getBootDevice(id),
-      request.get(`${this.getDetailUrl({ id })}/states`),
-      request.get(`${this.getDetailUrl({ id })}/validate`),
-      request.get(`${this.getDetailUrl({ id })}/ports`),
+      this.client.states.list(id),
+      this.client.validate.list(id),
+      this.client.ports.list(id),
     ]);
     newItem.bootDevice = bootDevice;
     newItem.states = states;
@@ -63,8 +61,7 @@ export class IronicStore extends Base {
     if (items.length === 0) {
       return items;
     }
-    const url = `${this.apiVersion}/ports/detail`;
-    const result = await request.get(url);
+    const result = await this.portClient.listDetail();
     const { ports } = result;
     items.forEach((it) => {
       const nodePorts = ports.filter((port) => port.node_uuid === it.uuid);
@@ -75,33 +72,30 @@ export class IronicStore extends Base {
 
   @action
   changeProvision(id, body) {
-    const url = `${this.getDetailUrl({ id })}/states/provision`;
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.updateStatesProvision(id, body));
   }
 
   @action
   changePower(id, body) {
-    const url = `${this.getDetailUrl({ id })}/states/power`;
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.UpdateStatesPower(id, body));
   }
 
   @action
   setMaintenance(id, body) {
-    const url = `${this.getDetailUrl({ id })}/maintenance`;
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.updateMaintenance(id, body));
   }
 
   @action
   clearMaintenance(id) {
-    const url = `${this.getDetailUrl({ id })}/maintenance`;
-    return this.submitting(request.delete(url));
+    return this.submitting(this.client.deleteMaintenance(id));
   }
 
   @action
   async getBootDevice(id) {
-    const url = `${this.getDetailUrl({ id })}/management/boot_device`;
     try {
-      const result = await this.submitting(request.get(url));
+      const result = await this.submitting(
+        this.client.getManagementBootDevice(id)
+      );
       this.bootDevice = result;
       return result;
     } catch (e) {
@@ -113,39 +107,38 @@ export class IronicStore extends Base {
 
   @action
   async getSupportedBootDevice(id) {
-    const url = `${this.getDetailUrl({ id })}/management/boot_device/supported`;
-    const result = await this.submitting(request.get(url));
+    const result = await this.submitting(
+      this.client.getManagementBootDeviceSupported(id)
+    );
     this.supportedBootDevices = result.supported_boot_devices || [];
     return this.supportedBootDevices;
   }
 
   @action
   setBootDevice(id, body) {
-    const url = `${this.getDetailUrl({ id })}/management/boot_device`;
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.upateManagementBootDevice(id, body));
   }
 
   @action
   async create(body) {
     const { traits = [], ...rest } = body;
     if (traits.length === 0) {
-      return this.submitting(request.post(this.getListUrl(), rest));
+      return this.submitting(this.client.create(rest));
     }
     this.isLoading = true;
-    const result = await request.post(this.getListUrl(), rest);
+    const result = await this.client.create(rest);
     const { uuid } = result;
     return this.updateTraits(uuid, traits);
   }
 
   @action
   edit({ id }, body) {
-    return this.submitting(request.patch(`${this.getDetailUrl({ id })}`, body));
+    return this.submitting(this.client.patch(id, body));
   }
 
   @action
   async getTraits() {
-    const url = `${placementBase()}/traits`;
-    const result = await request.get(url);
+    const result = await client.placement.traits.list();
     const { traits = [] } = result;
     traits.sort();
     this.traits = traits;
@@ -153,11 +146,10 @@ export class IronicStore extends Base {
 
   @action
   updateTraits(id, traits) {
-    const url = `${this.getDetailUrl({ id })}/traits`;
     const body = {
       traits,
     };
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.updateTraits(id, body));
   }
 }
 
diff --git a/src/stores/ironic/port-group.js b/src/stores/ironic/port-group.js
index 9b2ef26d..b8cda14c 100644
--- a/src/stores/ironic/port-group.js
+++ b/src/stores/ironic/port-group.js
@@ -12,38 +12,32 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ironicBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class IronicPortGroupStore extends Base {
-  get module() {
-    return 'portgroups';
+  get client() {
+    return client.ironic.nodes.portgroups;
   }
 
-  get apiVersion() {
-    return ironicBase();
+  listFetchByClient(params, originParams) {
+    const { id } = originParams;
+    return this.client.listDetail(id, params);
   }
 
-  get responseKey() {
-    return 'portgroup';
-  }
-
-  getListDetailUrl = ({ id }) =>
-    `${this.apiVersion}/nodes/${id}/${this.module}/detail`;
-
   get paramsFunc() {
     return () => {};
   }
 
   @action
   create(data) {
-    return this.submitting(request.post(this.getListUrl(), data));
+    return this.submitting(client.ironic.portgroups.create(data));
   }
 
   @action
   edit({ id }, body) {
-    return this.submitting(request.patch(`${this.getDetailUrl({ id })}`, body));
+    return this.submitting(client.ironic.portgroups.patch(id, body));
   }
 }
 
diff --git a/src/stores/ironic/port.js b/src/stores/ironic/port.js
index 5822f367..5a85dc0f 100644
--- a/src/stores/ironic/port.js
+++ b/src/stores/ironic/port.js
@@ -12,38 +12,32 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ironicBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class IronicPortStore extends Base {
-  get module() {
-    return 'ports';
+  get client() {
+    return client.ironic.ports;
   }
 
-  get apiVersion() {
-    return ironicBase();
+  listFetchByClient(params, originParams) {
+    const { id } = originParams;
+    return client.ironic.nodes.ports.listDetail(id, params);
   }
 
-  get responseKey() {
-    return 'port';
-  }
-
-  getListDetailUrl = ({ id }) =>
-    `${this.apiVersion}/nodes/${id}/${this.module}/detail`;
-
   get paramsFunc() {
     return () => {};
   }
 
   @action
   create(data) {
-    return this.submitting(request.post(this.getListUrl(), data));
+    return this.submitting(this.client.create(data));
   }
 
   @action
   edit({ id }, body) {
-    return this.submitting(request.patch(`${this.getDetailUrl({ id })}`, body));
+    return this.submitting(this.client.patch(id, body));
   }
 }
 
diff --git a/src/stores/keystone/catalog.js b/src/stores/keystone/catalog.js
index 66057876..0cf25136 100644
--- a/src/stores/keystone/catalog.js
+++ b/src/stores/keystone/catalog.js
@@ -12,20 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { keystoneBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class AuthCatalogStore extends Base {
-  get module() {
-    return 'auth/catalog';
-  }
-
-  get apiVersion() {
-    return keystoneBase();
+  get client() {
+    return client.keystone.catalog;
   }
 
   get listResponseKey() {
-    return 'catalog';
+    return this.responseKey;
   }
 
   get mapper() {
diff --git a/src/stores/keystone/domain.js b/src/stores/keystone/domain.js
index 10660929..b1efd451 100644
--- a/src/stores/keystone/domain.js
+++ b/src/stores/keystone/domain.js
@@ -13,9 +13,8 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import request from 'utils/request';
-import { keystoneBase } from 'utils/constants';
 import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class DomainStore extends Base {
@@ -28,20 +27,14 @@ export class DomainStore extends Base {
   @observable
   adminRoleId = '';
 
-  get module() {
-    return 'domains';
+  get client() {
+    return client.keystone.domains;
   }
 
-  get apiVersion() {
-    return keystoneBase();
+  get userClient() {
+    return client.keystone.users;
   }
 
-  get responseKey() {
-    return 'domain';
-  }
-
-  getResourceUrl = () => keystoneBase();
-
   @action
   async fetchList({
     limit,
@@ -55,33 +48,32 @@ export class DomainStore extends Base {
     // todo: no page, no limit, fetch all
     // const params = { ...filters };
 
-    await Promise.all([
-      request.get(`${this.apiVersion}/domains`),
-      request.get(`${this.apiVersion}/users`),
-    ]).then(([domainsResult, usersResult]) => {
-      const { domains } = domainsResult;
-      // eslint-disable-next-line array-callback-return
-      domains.map((domain) => {
-        const domainUsers = usersResult.users.filter(
-          (it) => it.domain_id === domain.id
-        );
-        domain.user_num = domainUsers.length;
-      });
+    await Promise.all([this.client.list(), this.userClient.list()]).then(
+      ([domainsResult, usersResult]) => {
+        const { domains } = domainsResult;
+        // eslint-disable-next-line array-callback-return
+        domains.map((domain) => {
+          const domainUsers = usersResult.users.filter(
+            (it) => it.domain_id === domain.id
+          );
+          domain.user_num = domainUsers.length;
+        });
 
-      // const { domains: items } = domainsResult;
-      this.list.update({
-        data: domains,
-        total: domains.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
-      return domains;
-    });
+        // const { domains: items } = domainsResult;
+        this.list.update({
+          data: domains,
+          total: domains.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
+        return domains;
+      }
+    );
   }
 
   @action
@@ -89,74 +81,67 @@ export class DomainStore extends Base {
     if (!silent) {
       this.isLoading = true;
     }
-    await Promise.all([
-      request.get(this.getDetailUrl({ id })),
-      request.get(`${this.apiVersion}/users`),
-    ]).then(([result, usersResult]) => {
-      const domain = this.mapper(get(result, this.responseKey) || result);
-      domain.domain_administrator = [];
-      const domainUsers = usersResult.users.filter(
-        (it) => it.domain_id === domain.id
-      );
-      domain.user_num = domainUsers.length;
-      this.domainUsers = domainUsers;
-      this.detail = domain;
-      this.isLoading = false;
-      return domain;
-    });
+    await Promise.all([this.client.show(id), this.userClient.list()]).then(
+      ([result, usersResult]) => {
+        const domain = this.mapper(get(result, this.responseKey) || result);
+        domain.domain_administrator = [];
+        const domainUsers = usersResult.users.filter(
+          (it) => it.domain_id === domain.id
+        );
+        domain.user_num = domainUsers.length;
+        this.domainUsers = domainUsers;
+        this.detail = domain;
+        this.isLoading = false;
+        return domain;
+      }
+    );
   }
 
   @action
   async fetchDomain() {
-    const doaminsResult = await request.get(`${this.getResourceUrl()}/domains`);
+    const doaminsResult = await this.client.list();
     this.domains = doaminsResult.domains;
   }
 
   @action
   async update({ id, body }) {
-    const url = `${this.apiVersion}/${id}`;
     this.isSubmitting = true;
-    const resData = await request.put(url, body, null, (res) => res.data);
+    const resData = await this.client.update(id, body);
     this.isSubmitting = false;
     return resData;
   }
 
   @action
   async edit({ id, description }) {
-    const url = `${this.apiVersion}/domains/${id}`;
     const reqBody = {
       domain: { description },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   async setDomainAdmin({ id, user_id, role_id }) {
-    const url = `${this.apiVersion}/domains/${id}/users/${user_id}/roles/${role_id}`;
-    return this.submitting(request.put(url));
+    return this.submitting(this.client.users.roles.put(id, user_id, role_id));
   }
 
   async deleteDomainAdmin({ id, user_id, role_id }) {
-    const url = `${this.apiVersion}/domains/${id}/users/${user_id}/roles/${role_id}`;
-    const result = await request.delete(url);
+    const result = await this.client.users.roles.delete(id, user_id, role_id);
     return result;
   }
 
   @action
   async forbidden({ id }) {
-    const url = `${this.apiVersion}/domains/${id}`;
     const reqBody = {
       domain: { enabled: false },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async enable({ id }) {
-    const url = `${this.apiVersion}/domains/${id}`;
     const reqBody = {
       domain: { enabled: true },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 }
 
diff --git a/src/stores/keystone/project.js b/src/stores/keystone/project.js
index 2ae43300..32c58b2c 100644
--- a/src/stores/keystone/project.js
+++ b/src/stores/keystone/project.js
@@ -14,14 +14,8 @@
 
 import { action, observable } from 'mobx';
 import { getGBValue } from 'utils/index';
-import request from 'utils/request';
-import {
-  keystoneBase,
-  novaBase,
-  cinderBase,
-  neutronBase,
-} from 'utils/constants';
-import { get } from 'lodash';
+import { get, isNil, isEmpty } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class ProjectStore extends Base {
@@ -40,18 +34,20 @@ export class ProjectStore extends Base {
   @observable
   projectsOnly = [];
 
-  getResourceUrl = () => keystoneBase();
-
-  get module() {
-    return 'projects';
+  get client() {
+    return client.keystone.projects;
   }
 
-  get apiVersion() {
-    return keystoneBase();
+  get roleAssignmentClient() {
+    return client.keystone.roleAssignments;
   }
 
-  get responseKey() {
-    return 'project';
+  get roleClient() {
+    return client.keystone.roles;
+  }
+
+  get userClient() {
+    return client.keystone.users;
   }
 
   @action
@@ -66,16 +62,23 @@ export class ProjectStore extends Base {
     this.list.isLoading = true;
     // todo: no page, no limit, fetch all
     // const params = { ...filters };
+    const { tags } = filters;
 
     const [roleAssignmentsReault, projectsResult, roleResult] =
       await Promise.all([
-        request.get(`${this.apiVersion}/role_assignments`),
-        request.get(`${this.apiVersion}/projects`),
-        request.get(`${this.apiVersion}/roles`),
+        this.roleAssignmentClient.list(),
+        this.client.list(tags ? { tags } : {}),
+        this.roleClient.list(),
       ]);
     const { projects } = projectsResult;
     const { roles } = roleResult;
-    const projectRoleId = roles.map((it) => it.id);
+    const projectRoles = roles.filter(
+      (it) =>
+        (it.name.indexOf('project_') !== -1 &&
+          it.name.indexOf('_project_') === -1) ||
+        it.name === 'admin'
+    );
+    const projectRoleId = projectRoles.map((it) => it.id);
     projects.map((project) => {
       const userMapRole = {}; // all user include system role and project role: { user_id: [roles_id] }
       const projectGroups = {};
@@ -169,25 +172,23 @@ export class ProjectStore extends Base {
 
   @action
   async enable({ id }) {
-    const url = `${this.apiVersion}/projects/${id}`;
     const reqBody = {
       project: { enabled: true },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async forbidden({ id }) {
-    const url = `${this.apiVersion}/projects/${id}`;
     const reqBody = {
       project: { enabled: false },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async fetchDomain() {
-    const doaminsResult = await request.get(`${this.getResourceUrl()}/domains`);
+    const doaminsResult = await this.skylineClient.domains();
     this.domains = doaminsResult.domains;
   }
 
@@ -196,9 +197,7 @@ export class ProjectStore extends Base {
     const reqBody = {
       project: data,
     };
-    return this.submitting(
-      request.post(`${this.getResourceUrl()}/projects`, reqBody)
-    );
+    return this.submitting(this.client.create(reqBody));
   }
 
   @action
@@ -208,12 +207,18 @@ export class ProjectStore extends Base {
     }
     const [roleAssignmentsReault, projectResult, roleResult] =
       await Promise.all([
-        request.get(`${this.apiVersion}/role_assignments`),
-        request.get(`${this.apiVersion}/projects/${id}`),
-        request.get(`${this.apiVersion}/roles`),
+        this.roleAssignmentClient.list(),
+        this.client.show(id),
+        this.roleClient.list(),
       ]);
     const { roles } = roleResult;
-    const projectRoleId = roles.map((it) => it.id);
+    const projectRoles = roles.filter(
+      (it) =>
+        (it.name.indexOf('project_') !== -1 &&
+          it.name.indexOf('_project_') === -1) ||
+        it.name === 'admin'
+    );
+    const projectRoleId = projectRoles.map((it) => it.id);
     const { project } = projectResult;
     const userMapRole = {};
     const projectGroups = {};
@@ -232,30 +237,26 @@ export class ProjectStore extends Base {
     project.groups = projectGroups;
     project.user_num = Object.keys(userMapRole).length;
     project.group_num = Object.keys(projectGroups).length;
-    this.detail = project;
+    const newItem = await this.detailDidFetch(project);
+    this.detail = newItem;
     this.isLoading = false;
-    return project;
+    return newItem;
   }
 
   @action
   async edit({ id, description, name }) {
-    const url = `${this.apiVersion}/projects/${id}`;
     const reqBody = {
       project: { description, name },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async fetchProjectQuota({ project_id }) {
     const [novaResult, cinderResult, neutronResult] = await Promise.all([
-      request.get(`${novaBase()}/os-quota-sets/${project_id}/detail`),
-      request.get(
-        `${cinderBase()}/${
-          globals.user.project.id
-        }/os-quota-sets/${project_id}?usage=True`
-      ),
-      request.get(`${neutronBase()}/quotas/${project_id}/details`),
+      client.nova.quotaSets.detail(project_id),
+      client.cinder.quotaSets.show(project_id, { usage: 'True' }),
+      client.neutron.quotas.details(project_id),
     ]);
     this.isSubmitting = false;
     const { quota_set: novaQuota } = novaResult;
@@ -276,6 +277,15 @@ export class ProjectStore extends Base {
     this.quota = quota;
   }
 
+  omitNil = (obj) => {
+    return Object.keys(obj).reduce((acc, v) => {
+      if (!isNil(obj[v])) {
+        acc[v] = obj[v];
+      }
+      return acc;
+    }, {});
+  };
+
   @action
   async updateProjectQuota({ project_id, data }) {
     this.isSubmitting = true;
@@ -285,6 +295,7 @@ export class ProjectStore extends Base {
       ram,
       volumes,
       gigabytes,
+      firewall_group,
       security_group_rule,
       server_groups,
       snapshots,
@@ -301,59 +312,61 @@ export class ProjectStore extends Base {
       ...others
     } = data;
     let ramGb = ram;
-    if (ram !== -1) {
+    if (ram && ram !== -1) {
       ramGb = ram * 1024;
     }
     const novaReqBody = {
-      quota_set: {
+      quota_set: this.omitNil({
         instances,
         cores,
         ram: ramGb,
         server_groups,
         server_group_members,
         key_pairs,
-      },
+      }),
     };
     const cinderReqBody = {
-      quota_set: {
+      quota_set: this.omitNil({
         volumes,
         gigabytes,
         backup_gigabytes,
         snapshots,
         backups,
         ...others,
-      },
+      }),
     };
+    const firewallValue = firewall_group ? { firewall_group } : {};
     const neutronReqBody = {
-      quota: {
+      quota: this.omitNil({
         network,
         router,
         subnet,
         floatingip,
         security_group,
         security_group_rule,
+        ...firewallValue,
         port,
-      },
+      }),
     };
-    const result = await Promise.all([
-      request.put(`${novaBase()}/os-quota-sets/${project_id}`, novaReqBody),
-      request.put(
-        `${cinderBase()}/${
-          globals.user.project.id
-        }/os-quota-sets/${project_id}`,
-        cinderReqBody
-      ),
-      request.put(`${neutronBase()}/quotas/${project_id}`, neutronReqBody),
-    ]);
+    const reqs = [];
+    if (!isEmpty(novaReqBody.quota_set)) {
+      reqs.push(client.nova.quotaSets.update(project_id, novaReqBody));
+    }
+    if (!isEmpty(cinderReqBody.quota_set)) {
+      reqs.push(client.cinder.quotaSets.update(project_id, cinderReqBody));
+    }
+    if (!isEmpty(neutronReqBody.quota)) {
+      reqs.push(client.neutron.quotas.update(project_id, neutronReqBody));
+    }
+
+    const result = await Promise.all(reqs);
     this.isSubmitting = false;
     return result;
   }
 
   @action
   async getUserRoleList({ id, user_id }) {
-    const url = `${this.apiVersion}/projects/${id}/users/${user_id}/roles/`;
-    this.isSubmitting = true;
-    const result = await request.get(url);
+    const result = await this.client.users.roles.list(id, user_id);
     this.userRoleList = result.roles;
   }
 
@@ -362,43 +375,37 @@ export class ProjectStore extends Base {
     const body = {};
     body[this.responseKey] = data;
     this.isSubmitting = true;
-    const result = await request.post(this.getListUrl(), body);
+    const result = await this.client.create(body);
     this.isSubmitting = false;
     return result;
   }
 
   @action
   async assignUserRole({ id, user_id, role_id }) {
-    const url = `${this.apiVersion}/projects/${id}/users/${user_id}/roles/${role_id}`;
-    const result = request.put(url);
+    const result = await this.client.users.roles.update(id, user_id, role_id);
     return result;
   }
 
   @action
   async removeUserRole({ id, user_id, role_id }) {
-    const url = `${this.apiVersion}/projects/${id}/users/${user_id}/roles/${role_id}`;
-    const result = request.delete(url);
+    const result = await this.client.users.roles.delete(id, user_id, role_id);
     return result;
   }
 
   @action
   async getGroupRoleList({ id, group_id }) {
-    const url = `${this.apiVersion}/projects/${id}/groups/${group_id}/roles/`;
-    this.isSubmitting = true;
-    const result = await request.get(url);
+    const result = await this.client.groups.roles.list(id, group_id);
     this.groupRoleList = result.roles;
   }
 
   @action
   async assignGroupRole({ id, group_id, role_id }) {
-    const url = `${this.apiVersion}/projects/${id}/groups/${group_id}/roles/${role_id}`;
-    const result = request.put(url);
+    const result = await this.client.groups.roles.update(id, group_id, role_id);
     return result;
   }
 
   async removeGroupRole({ id, group_id, role_id }) {
-    const url = `${this.apiVersion}/projects/${id}/groups/${group_id}/roles/${role_id}`;
-    const result = request.delete(url);
+    const result = await this.client.groups.roles.delete(id, group_id, role_id);
     return result;
   }
 
@@ -415,10 +422,10 @@ export class ProjectStore extends Base {
     const { userId } = filters;
     const [roleAssignmentsReault, projectsResult, roleResult, groupResult] =
       await Promise.all([
-        request.get(`${this.apiVersion}/role_assignments`),
-        request.get(`${this.apiVersion}/users/${userId}/projects`),
-        request.get(`${this.apiVersion}/roles`),
-        request.get(`${this.apiVersion}/users/${userId}/groups`),
+        this.roleAssignmentClient.list(),
+        this.userClient.projects.list(userId),
+        this.roleClient.list(),
+        this.userClient.groups.list(userId),
       ]);
     const projects = get(projectsResult, this.listResponseKey, []);
     projects.map((project) => {
@@ -485,9 +492,9 @@ export class ProjectStore extends Base {
     const { groupId } = filters;
     const [roleAssignmentsReault, projectsResult, roleResult] =
       await Promise.all([
-        request.get(`${this.apiVersion}/role_assignments`),
-        request.get(`${this.apiVersion}/projects`),
-        request.get(`${this.apiVersion}/roles`),
+        this.roleAssignmentClient.list(),
+        this.client.list(),
+        this.roleClient.list(),
       ]);
     const projects = get(projectsResult, this.listResponseKey, []);
     projects.map((project) => {
@@ -534,8 +541,10 @@ export class ProjectStore extends Base {
   @action
   async fetchProjectListOnly() {
     this.list.isLoading = true;
-    const result = await request.get(`${this.apiVersion}/${this.module}`);
+    const result = await this.client.list();
     this.projectsOnly = get(result, this.listResponseKey, []);
+    this.list.isLoading = false;
+    return result;
   }
 }
 
diff --git a/src/stores/keystone/role.js b/src/stores/keystone/role.js
index c17590b9..1dae4604 100644
--- a/src/stores/keystone/role.js
+++ b/src/stores/keystone/role.js
@@ -12,21 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { keystoneBase } from 'utils/constants';
 import { action, observable } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class RoleStore extends Base {
-  get module() {
-    return 'roles';
-  }
-
-  get apiVersion() {
-    return keystoneBase();
-  }
-
-  get responseKey() {
-    return 'role';
+  get client() {
+    return client.keystone.roles;
   }
 
   @observable
@@ -34,9 +26,7 @@ export class RoleStore extends Base {
 
   @action
   async fetchImpliedRoles({ id }) {
-    const rolesResult = await request.get(
-      `${this.getDetailUrl({ id })}/implies/`
-    );
+    const rolesResult = await this.client.implies.list(id);
     const {
       role_inference: { implies },
     } = rolesResult;
diff --git a/src/stores/keystone/tag.js b/src/stores/keystone/tag.js
index 6a76f4ae..3f77b788 100644
--- a/src/stores/keystone/tag.js
+++ b/src/stores/keystone/tag.js
@@ -12,40 +12,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { keystoneBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class TagStore extends Base {
-  get module() {
-    return 'tags';
+  get client() {
+    return client.keystone.projects.tags;
   }
 
-  get apiVersion() {
-    return keystoneBase();
-  }
-
-  get responseKey() {
-    return 'tag';
+  listFetchByClient(params, originParams) {
+    const { project_id } = originParams;
+    return this.client.list(project_id, params);
   }
 
   get paramsFunc() {
     return () => null;
   }
 
-  getListUrl = ({ project_id }) =>
-    `${this.apiVersion}/projects/${project_id}/${this.module}`;
-
   @action
-  update({ project_id }, newObject, sleepTime) {
+  update({ project_id }, newObject) {
     return this.submitting(
-      request.put(
-        `${this.getListUrl({ project_id })}`,
-        newObject,
-        null,
-        null,
-        sleepTime
-      )
+      client.keystone.projects.updateTags(project_id, newObject)
     );
   }
 }
diff --git a/src/stores/keystone/user-group.js b/src/stores/keystone/user-group.js
index 17a8670b..ddd46052 100644
--- a/src/stores/keystone/user-group.js
+++ b/src/stores/keystone/user-group.js
@@ -13,9 +13,8 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { keystoneBase } from 'utils/constants';
-import request from 'utils/request';
 import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 import globalProjectStore from './project';
 
@@ -32,16 +31,32 @@ export class GroupStore extends Base {
   @observable
   groupUsers = [];
 
-  get module() {
-    return 'groups';
+  get client() {
+    return client.keystone.groups;
   }
 
-  get apiVersion() {
-    return keystoneBase();
+  get domainClient() {
+    return client.keystone.domains;
   }
 
-  get responseKey() {
-    return 'group';
+  get systemGroupClient() {
+    return client.keystone.systemGroups;
+  }
+
+  get roleClient() {
+    return client.keystone.roles;
+  }
+
+  get roleAssignmentClient() {
+    return client.keystone.roleAssignments;
+  }
+
+  get userClient() {
+    return client.keystone.users;
+  }
+
+  get projectClient() {
+    return client.keystone.projects;
   }
 
   @action
@@ -51,7 +66,7 @@ export class GroupStore extends Base {
 
     body[this.responseKey] = other;
     this.isSubmitting = true;
-    const result = await request.post(this.getListUrl(), body);
+    const result = await this.client.create(body);
     const {
       group: { id: group_id },
     } = result;
@@ -83,7 +98,7 @@ export class GroupStore extends Base {
 
   @action
   async fetchDomain() {
-    const doaminsResult = await request.get(`${this.apiVersion}/domains`);
+    const doaminsResult = await this.domainClient.list();
     this.domains = doaminsResult.domains;
   }
 
@@ -99,12 +114,11 @@ export class GroupStore extends Base {
 
   @action
   async edit({ id, description, name }) {
-    const url = `${this.apiVersion}/groups/${id}`;
     this.isSubmitting = true;
     const reqBody = {
       group: { description, name },
     };
-    const result = await request.patch(url, reqBody);
+    const result = await this.client.patch(id, reqBody);
     this.isSubmitting = false;
     return result;
   }
@@ -112,51 +126,38 @@ export class GroupStore extends Base {
   @action
   async fetchSystemRole({ id }) {
     this.systemRoles = [];
-    const rolesResult = await request.get(
-      `${this.apiVersion}/system/groups/${id}/roles`
-    );
+    const rolesResult = await this.systemGroupClient.roles.list(id);
     this.systemRoles = rolesResult.roles;
   }
 
   @action
   async assignSystemRole({ id, role_id }) {
-    const result = request.put(
-      `${this.apiVersion}/system/groups/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.systemGroupClient.roles.update(id, role_id);
   }
 
   @action
   async deleteSystemRole({ id, role_id }) {
-    const result = request.delete(
-      `${this.apiVersion}/system/groups/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.systemGroupClient.roles.delete(id, role_id);
   }
 
   @action
   async fetchDomainRole({ id, domain_id }) {
     this.domainRoles = [];
-    const rolesResult = await request.get(
-      `${this.apiVersion}/domains/${domain_id}/groups/${id}/roles`
+    const rolesResult = await this.domainClient.groups.roles.list(
+      domain_id,
+      id
     );
     this.domainRoles = rolesResult.roles;
   }
 
   @action
   async assignDomainRole({ id, role_id, domain_id }) {
-    const result = request.put(
-      `${this.apiVersion}/domains/${domain_id}/groups/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.domainClient.groups.roles.update(domain_id, id, role_id);
   }
 
   @action
   async deleteDomainRole({ id, role_id, domain_id }) {
-    const result = request.delete(
-      `${this.apiVersion}/domains/${domain_id}/groups/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.domainClient.groups.roles.delete(domain_id, id, role_id);
   }
 
   @action
@@ -172,8 +173,8 @@ export class GroupStore extends Base {
     const { projectId } = filters;
     const params = {};
     const [roleAssignmentsReault, result] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(this.getListUrl(), params),
+      this.roleAssignmentClient.list(),
+      this.client.list(params),
     ]);
     const projectGroupIds = [];
     roleAssignmentsReault.role_assignments.forEach((roleAssignment) => {
@@ -191,33 +192,38 @@ export class GroupStore extends Base {
     data = data.filter((it) => projectGroupIds.indexOf(it.id) >= 0);
     // const items = data.map(this.mapper);
     // const newData = await this.listDidFetch(items);
-    Promise.all(
-      data.map((it) => request.get(`${this.apiVersion}/groups/${it.id}/users`))
-    ).then((rest) => {
-      const addUserItem = data.map((it, index) => {
-        const { users } = rest[index];
-        const userIds = users.map((user) => user.id);
-        it.users = userIds;
-        it.user_num = users.length;
-        return it;
-      });
-      const items = addUserItem.map((item) =>
-        this.mapperProject(roleAssignmentsReault, item)
-      );
-      this.list.update({
-        data: items,
-        total: items.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
+    Promise.all(data.map((it) => this.client.users.list(it.id))).then(
+      (rest) => {
+        const addUserItem = data.map((it, index) => {
+          const { users } = rest[index];
+          const userIds = users.map((user) => user.id);
+          const userInfo = users.map((user) => ({
+            id: user.id,
+            name: user.name,
+          }));
+          it.users = userIds;
+          it.user_num = users.length;
+          it.user_info = userInfo;
+          return it;
+        });
+        const items = addUserItem.map((item) =>
+          this.mapperProject(roleAssignmentsReault, item)
+        );
+        this.list.update({
+          data: items,
+          total: items.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
 
-      return items;
-    });
+        return items;
+      }
+    );
   }
 
   @action
@@ -233,8 +239,8 @@ export class GroupStore extends Base {
     const { userId } = filters;
     const params = {};
     const [roleAssignmentsReault, result] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/users/${userId}/groups`, params),
+      this.roleAssignmentClient.list(),
+      this.userClient.groups.list(userId, params),
     ]);
     const projectGroupIds = [];
     roleAssignmentsReault.role_assignments.forEach((roleAssignment) => {
@@ -269,9 +275,7 @@ export class GroupStore extends Base {
 
   @action
   async fetchGroupUsers({ id }) {
-    const usersResult = await request.get(
-      `${this.apiVersion}/groups/${id}/users`
-    );
+    const usersResult = await this.client.users.list(id);
     const { users: result } = usersResult;
     this.groupUsers = result;
     return result;
@@ -279,18 +283,12 @@ export class GroupStore extends Base {
 
   @action
   async deleteGroupUsers({ id, user_id }) {
-    const result = request.delete(
-      `${this.apiVersion}/groups/${id}/users/${user_id}`
-    );
-    return result;
+    return this.client.users.delete(id, user_id);
   }
 
   @action
   async addGroupUsers({ id, user_id }) {
-    const result = request.put(
-      `${this.apiVersion}/groups/${id}/users/${user_id}`
-    );
-    return result;
+    return this.client.users.update(id, user_id);
   }
 
   mapperProject = (roleAssignmentsReault, item) => {
@@ -320,17 +318,12 @@ export class GroupStore extends Base {
     // todo: no page, no limit, fetch all
     const params = { ...filters };
 
-    const result = await request.get(
-      this.getListDetailUrl() || this.getListUrl(),
-      params
-    );
-    const roleAssignmentsReault = await request.get(
-      `${this.apiVersion}/role_assignments/`
-    );
+    const result = await this.client.list(params);
+    const roleAssignmentsReault = await this.roleAssignmentClient.list();
     const data = get(result, this.listResponseKey, []);
     Promise.all(
       data.map(
-        (it) => request.get(`${this.apiVersion}/groups/${it.id}/users`)
+        (it) => this.client.users.list(it.id)
         // const { users } = userResult;
         // return { ...it, users };
       )
@@ -338,8 +331,13 @@ export class GroupStore extends Base {
       const addUserItem = data.map((it, index) => {
         const { users } = rest[index];
         const userIds = users.map((user) => user.id);
+        const userInfo = users.map((user) => ({
+          id: user.id,
+          name: user.name,
+        }));
         it.users = userIds;
         it.user_num = users.length;
+        it.user_info = userInfo;
         return it;
       });
       const items = addUserItem.map((item) =>
@@ -369,15 +367,19 @@ export class GroupStore extends Base {
     }
     const [roleAssignmentsReault, groupResult, usersInGroup] =
       await Promise.all([
-        request.get(`${this.apiVersion}/role_assignments`),
-        request.get(`${this.apiVersion}/groups/${id}`),
-        request.get(`${this.apiVersion}/groups/${id}/users`),
+        this.roleAssignmentClient.list(),
+        this.client.show(id),
+        this.client.users.list(id),
       ]);
     const originData = get(groupResult, this.responseKey) || groupResult;
     const { users } = usersInGroup;
     const userIds = users.map((user) => user.id);
     originData.users = userIds;
     originData.user_num = users.length;
+    originData.user_info = users.map((user) => ({
+      id: user.id,
+      name: user.name,
+    }));
     const group = this.mapperProject(roleAssignmentsReault, originData);
     this.detail = group;
     this.isLoading = false;
@@ -386,7 +388,7 @@ export class GroupStore extends Base {
 
   @action
   async fetchGroupData() {
-    const result = await request.get(this.getListUrl());
+    const result = await this.client.list();
     const { groups } = result;
     return groups;
   }
@@ -404,9 +406,9 @@ export class GroupStore extends Base {
     const { roleId } = filters;
     const params = {};
     const [roleAssignmentsReault, projectResult, result] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/projects`),
-      request.get(this.getListUrl(), params),
+      this.roleAssignmentClient.list(),
+      this.projectClient.list(),
+      this.client.list(params),
     ]);
     const projectRoleUsers = {};
     const systemRoleUsers = {};
@@ -442,30 +444,35 @@ export class GroupStore extends Base {
 
     // const items = data.map(this.mapper);
     // const newData = await this.listDidFetch(items);
-    Promise.all(
-      data.map((it) => request.get(`${this.apiVersion}/groups/${it.id}/users`))
-    ).then((rest) => {
-      items.map((it, index) => {
-        const { users } = rest[index];
-        const userIds = users.map((user) => user.id);
-        it.users = userIds;
-        it.user_num = users.length;
-        return it;
-      });
-      this.list.update({
-        data: items,
-        total: items.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
+    Promise.all(data.map((it) => this.client.users.list(it.id))).then(
+      (rest) => {
+        items.map((it, index) => {
+          const { users } = rest[index];
+          const userIds = users.map((user) => user.id);
+          const userInfo = users.map((user) => ({
+            id: user.id,
+            name: user.name,
+          }));
+          it.users = userIds;
+          it.user_num = users.length;
+          it.user_info = userInfo;
+          return it;
+        });
+        this.list.update({
+          data: items,
+          total: items.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
 
-      return items;
-    });
+        return items;
+      }
+    );
   }
 }
 
diff --git a/src/stores/keystone/user.js b/src/stores/keystone/user.js
index 2a335919..d1a444fa 100644
--- a/src/stores/keystone/user.js
+++ b/src/stores/keystone/user.js
@@ -13,12 +13,13 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import request from 'utils/request';
-import { keystoneBase } from 'utils/constants';
 import { get } from 'lodash';
-import Base from '../base';
+import List from 'stores/base-list';
+import client from 'client';
+import globalRootStore from 'stores/root';
 import globalProjectStore from './project';
 import globalGroupStore from './user-group';
+import Base from '../base';
 
 export class UserStore extends Base {
   @observable
@@ -27,6 +28,12 @@ export class UserStore extends Base {
   @observable
   roleAssignments = [];
 
+  @observable
+  userProjects = new List();
+
+  @observable
+  userGroups = new List();
+
   @observable
   projects = [];
 
@@ -36,16 +43,36 @@ export class UserStore extends Base {
   @observable
   domainRoles = [];
 
-  get module() {
-    return 'users';
+  get client() {
+    return client.keystone.users;
   }
 
-  get apiVersion() {
-    return keystoneBase();
+  get domainClient() {
+    return client.keystone.domains;
   }
 
-  get responseKey() {
-    return 'user';
+  get systemGroupClient() {
+    return client.keystone.systemGroups;
+  }
+
+  get roleClient() {
+    return client.keystone.roles;
+  }
+
+  get roleAssignmentClient() {
+    return client.keystone.roleAssignments;
+  }
+
+  get projectClient() {
+    return client.keystone.projects;
+  }
+
+  get systemUserClient() {
+    return client.keystone.systemUsers;
+  }
+
+  get groupClient() {
+    return client.keystone.groups;
   }
 
   @action
@@ -61,14 +88,10 @@ export class UserStore extends Base {
     const data = other;
     body[this.responseKey] = data;
     this.isSubmitting = true;
-    const result = await request.post(this.getListUrl(), body);
+    const result = await this.client.create(body);
     const {
       user: { id: user_id },
     } = result;
-    // if (default_project_id) {
-    //   const url = `${this.apiVersion}/projects/${default_project_id}/users/${user_id}/roles/${adminId}`;
-    //   await request.put(url);
-    // }
     const promiseList = [];
     if (select_user_group[0] || select_project[0]) {
       const newProjects = Object.keys(newProjectRoles);
@@ -99,7 +122,7 @@ export class UserStore extends Base {
 
   @action
   async fetchDomain() {
-    const doaminsResult = await request.get(`${this.apiVersion}/domains`);
+    const doaminsResult = await this.domainClient.list();
     this.domains = doaminsResult.domains;
   }
 
@@ -113,6 +136,40 @@ export class UserStore extends Base {
     };
   }
 
+  @action
+  async getUserProjects() {
+    this.userProjects.update({
+      isLoading: true,
+    });
+    const {
+      user: {
+        user: { id },
+      },
+    } = globalRootStore;
+    const { projects } = await this.client.projects.list(id);
+    this.userProjects.update({
+      data: projects,
+      isLoading: false,
+    });
+  }
+
+  @action
+  async getUserGroups() {
+    this.userGroups.update({
+      isLoading: true,
+    });
+    const {
+      user: {
+        user: { id },
+      },
+    } = globalRootStore;
+    const { groups } = await this.client.groups.list(id);
+    this.userGroups.update({
+      data: groups,
+      isLoading: false,
+    });
+  }
+
   @action
   getUserProjectRole = (user, roleAssignment, projectMapRole) => {
     if (roleAssignment.user) {
@@ -131,6 +188,17 @@ export class UserStore extends Base {
     }
   };
 
+  getUserProjectWithRole = (projectMapRole, roles, projects) => {
+    return Object.keys(projectMapRole).map((key) => {
+      const item = projects.find((it) => it.id === key);
+      const roleItems = projectMapRole[key].map((roleId) =>
+        roles.find((it) => it.id === roleId)
+      );
+      item.roles = roleItems;
+      return item;
+    });
+  };
+
   @action
   async fetchList({
     limit,
@@ -143,11 +211,13 @@ export class UserStore extends Base {
   } = {}) {
     this.list.isLoading = true;
     // todo: no page, no limit, fetch all
-    const [roleAssignmentsReault, usersResult, roleResult] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/users`),
-      request.get(`${this.apiVersion}/roles`),
-    ]);
+    const [roleAssignmentsReault, usersResult, roleResult, projectResult] =
+      await Promise.all([
+        this.roleAssignmentClient.list(),
+        this.client.list(),
+        this.roleClient.list(),
+        this.projectClient.list(),
+      ]);
     const { users } = usersResult;
     const { roles } = roleResult;
     const systemRoles = roles.filter(
@@ -167,6 +237,11 @@ export class UserStore extends Base {
         systemRoleId,
         projectMapSystemRole
       );
+      user.projectItems = this.getUserProjectWithRole(
+        projectMapRole,
+        roles,
+        projectResult.projects
+      );
       user.projects = projectMapRole;
       user.projectMapSystemRole = projectMapSystemRole;
       user.project_num = Object.keys(projectMapRole).length;
@@ -195,9 +270,9 @@ export class UserStore extends Base {
       this.isLoading = true;
     }
     const [roleAssignmentsReault, usersResult, roleResult] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/users/${id}`),
-      request.get(`${this.apiVersion}/roles`),
+      this.roleAssignmentClient.list(),
+      this.client.show(id),
+      this.roleClient.list(),
     ]);
     const { roles } = roleResult;
     const systemRoles = roles.filter(
@@ -241,43 +316,39 @@ export class UserStore extends Base {
 
   @action
   async enable({ id }) {
-    const url = `${this.apiVersion}/users/${id}`;
     const reqBody = {
       user: { enabled: true },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async forbidden({ id }) {
-    const url = `${this.apiVersion}/users/${id}`;
     const reqBody = {
       user: { enabled: false },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async changePassword({ id, password }) {
-    const url = `${this.apiVersion}/users/${id}`;
     const reqBody = {
       user: { password },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
   async changePasswordUser({ id, password, original_password }) {
-    const url = `${this.apiVersion}/users/${id}/password`;
     const reqBody = {
       user: { password, original_password },
     };
-    return this.submitting(request.post(url, reqBody));
+    return this.submitting(this.client.updatePassword(id, reqBody));
   }
 
   @action
   async fetchProject() {
-    const projectsResult = await request.get(`${this.apiVersion}/projects`);
+    const projectsResult = await this.projectClient.list();
     this.projects = projectsResult.projects;
   }
 
@@ -285,9 +356,9 @@ export class UserStore extends Base {
   async fetchSystemRole({ id, projects }) {
     this.systemRoles = [];
     const project_id = projects[0].id;
-    // const rolesResult = await request.get(`${this.apiVersion}/system/users/${id}/roles`);
-    const projectResult = await request.get(
-      `${this.apiVersion}/projects/${project_id}/users/${id}/roles/`
+    const projectResult = await this.projectClient.users.roles.list(
+      project_id,
+      id
     );
     const systemRole = projectResult.roles.filter(
       (it) => it.name.includes('system_') && !it.name.includes('_system_')
@@ -297,48 +368,33 @@ export class UserStore extends Base {
 
   @action
   async assignSystemRole({ id, role_id }) {
-    const result = request.put(
-      `${this.apiVersion}/system/users/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.systemUserClient.roles.update(id, role_id);
   }
 
   @action
   async deleteSystemRole({ id, role_id }) {
-    const result = request.delete(
-      `${this.apiVersion}/system/users/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.systemUserClient.delete(id, role_id);
   }
 
   @action
   async fetchDomainRole({ id, domain_id }) {
     this.domainRoles = [];
-    const rolesResult = await request.get(
-      `${this.apiVersion}/domains/${domain_id}/users/${id}/roles`
-    );
+    const rolesResult = await this.domainClient.users.roles.list(id, domain_id);
     this.domainRoles = rolesResult.roles;
   }
 
   @action
   async assignDomainRole({ id, role_id, domain_id }) {
-    const result = request.put(
-      `${this.apiVersion}/domains/${domain_id}/users/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.domainClient.users.roles.update(domain_id, id, role_id);
   }
 
   @action
   async deleteDomainRole({ id, role_id, domain_id }) {
-    const result = request.delete(
-      `${this.apiVersion}/domains/${domain_id}/users/${id}/roles/${role_id}`
-    );
-    return result;
+    return this.domainClient.users.roles.delete(domain_id, id, role_id);
   }
 
   @action
   async edit(id, { email, phone, real_name, description, name }) {
-    const url = `${this.apiVersion}/users/${id}`;
     const reqBody = {
       user: {
         email,
@@ -348,7 +404,7 @@ export class UserStore extends Base {
         name,
       },
     };
-    return this.submitting(request.patch(url, reqBody));
+    return this.submitting(this.client.patch(id, reqBody));
   }
 
   @action
@@ -363,36 +419,34 @@ export class UserStore extends Base {
     this.list.isLoading = true;
     const { domainId } = filters;
     const params = {};
-    const result = await request.get(this.getListUrl(), params);
+    const result = await this.client.list(params);
     let data = get(result, this.listResponseKey, []);
     data = data.filter((it) => it.domain_id === domainId);
     const items = data.map(this.mapper);
     const newData = await this.listDidFetch(items);
-    Promise.all(
-      newData.map((it) =>
-        request.get(`${this.apiVersion}/users/${it.id}/projects`)
-      )
-    ).then((projectResult) => {
-      newData.map((it, index) => {
-        const { projects } = projectResult[index];
-        it.projects = projects;
-        it.project_num = projects.length;
-        return it;
-      });
-      this.list.update({
-        data: newData,
-        total: items.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
+    Promise.all(newData.map((it) => this.client.projects.list(it.id))).then(
+      (projectResult) => {
+        newData.map((it, index) => {
+          const { projects } = projectResult[index];
+          it.projects = projects;
+          it.project_num = projects.length;
+          return it;
+        });
+        this.list.update({
+          data: newData,
+          total: items.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
 
-      return items;
-    });
+        return items;
+      }
+    );
   }
 
   @action
@@ -408,9 +462,9 @@ export class UserStore extends Base {
     const { projectId } = filters;
     const params = {};
     const [roleAssignmentsReault, roleResult, result] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/roles`),
-      request.get(this.getListUrl(), params),
+      this.roleAssignmentClient.list(),
+      this.roleClient.list(),
+      this.client.list(params),
     ]);
     const projectUserIds = [];
     const userMapRole = {};
@@ -435,34 +489,32 @@ export class UserStore extends Base {
     data = data.filter((it) => projectUserIds.includes(it.id));
     const items = data.map(this.mapper);
     const newData = await this.listDidFetch(items);
-    Promise.all(
-      newData.map((it) =>
-        request.get(`${this.apiVersion}/users/${it.id}/projects`)
-      )
-    ).then((projectResult) => {
-      newData.map((it, index) => {
-        const { projects } = projectResult[index];
-        it.projects = projects;
-        it.project_num = projects.length;
-        it.project_roles = userMapRole[it.id].map(
-          (r) => roleResult.roles.filter((role) => role.id === r)[0].name
-        );
-        return it;
-      });
-      this.list.update({
-        data: newData,
-        total: items.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
+    Promise.all(newData.map((it) => this.client.projects.list(it.id))).then(
+      (projectResult) => {
+        newData.map((it, index) => {
+          const { projects } = projectResult[index];
+          it.projects = projects;
+          it.project_num = projects.length;
+          it.project_roles = userMapRole[it.id].map(
+            (r) => roleResult.roles.filter((role) => role.id === r)[0].name
+          );
+          return it;
+        });
+        this.list.update({
+          data: newData,
+          total: items.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
 
-      return items;
-    });
+        return items;
+      }
+    );
   }
 
   @action
@@ -477,38 +529,33 @@ export class UserStore extends Base {
     this.list.isLoading = true;
     const { groupId } = filters;
     const params = {};
-    const result = await request.get(
-      `${this.apiVersion}/groups/${groupId}/users`,
-      params
-    );
+    const result = await this.groupClient.users.list(groupId, params);
     const data = get(result, this.listResponseKey, []);
     const items = data.map(this.mapper);
     const newData = await this.listDidFetch(items);
-    Promise.all(
-      newData.map((it) =>
-        request.get(`${this.apiVersion}/users/${it.id}/projects`)
-      )
-    ).then((projectResult) => {
-      newData.map((it, index) => {
-        const { projects } = projectResult[index];
-        it.projects = projects;
-        it.project_num = projects.length;
-        return it;
-      });
-      this.list.update({
-        data: newData,
-        total: items.length || 0,
-        limit: Number(limit) || 10,
-        page: Number(page) || 1,
-        sortKey,
-        sortOrder,
-        filters,
-        isLoading: false,
-        ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-      });
+    Promise.all(newData.map((it) => this.client.projects.list(it.id))).then(
+      (projectResult) => {
+        newData.map((it, index) => {
+          const { projects } = projectResult[index];
+          it.projects = projects;
+          it.project_num = projects.length;
+          return it;
+        });
+        this.list.update({
+          data: newData,
+          total: items.length || 0,
+          limit: Number(limit) || 10,
+          page: Number(page) || 1,
+          sortKey,
+          sortOrder,
+          filters,
+          isLoading: false,
+          ...(this.list.silent ? {} : { selectedRowKeys: [] }),
+        });
 
-      return items;
-    });
+        return items;
+      }
+    );
   }
 
   @action
@@ -524,9 +571,9 @@ export class UserStore extends Base {
     const { roleId } = filters;
     const params = {};
     const [roleAssignmentsReault, projectResult, result] = await Promise.all([
-      request.get(`${this.apiVersion}/role_assignments`),
-      request.get(`${this.apiVersion}/projects`),
-      request.get(this.getListUrl(), params),
+      this.roleAssignmentClient.list(),
+      this.projectClient.list(),
+      this.client.list(params),
     ]);
     const projectRoleUsers = {};
     const systemRoleUsers = {};
@@ -542,9 +589,9 @@ export class UserStore extends Base {
             (it) => it.id === project.id
           );
           if (projectRoleUsers[user_id]) {
-            projectRoleUsers[user_id].push(projectData.name);
+            projectRoleUsers[user_id].push(projectData);
           } else {
-            projectRoleUsers[user_id] = [projectData.name];
+            projectRoleUsers[user_id] = [projectData];
           }
         } else if (role_id === roleId && system) {
           systemRoleUsers[user_id] = system.all;
@@ -555,7 +602,7 @@ export class UserStore extends Base {
     const items = data
       .filter((it) => projectRoleUsers[it.id] || systemRoleUsers[it.id])
       .map((it) => ({
-        projectScope: projectRoleUsers[it.id] || [],
+        projects: projectRoleUsers[it.id] || [],
         systemScope: systemRoleUsers[it.id] || [],
         ...it,
       }));
diff --git a/src/stores/neutron/agent-network.js b/src/stores/neutron/agent-network.js
index 3a362027..803ecc9c 100644
--- a/src/stores/neutron/agent-network.js
+++ b/src/stores/neutron/agent-network.js
@@ -13,30 +13,34 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { neutronBase } from 'utils/constants';
+import client from 'client';
+import { isArray } from 'lodash';
 import Base from '../base';
 
 export class NeutronAgentNetworkStore extends Base {
-  get module() {
-    return 'networks';
+  get client() {
+    return client.neutron.agents.dhcpNetworks;
   }
 
-  get apiVersion() {
-    return neutronBase();
+  get isSubResource() {
+    return true;
   }
 
-  get responseKey() {
-    return 'network';
-  }
+  getFatherResourceId = (params) => params.agentId;
 
   get listFilterByProject() {
     return true;
   }
 
-  getListUrl = ({ agentId }) =>
-    `${this.apiVersion}/agents/${agentId}/dhcp-networks`;
-
-  getDetailUrl = ({ agentId, id }) => `${this.getListUrl({ agentId })}/${id}`;
+  get mapper() {
+    return (data) => {
+      const { created_at } = data;
+      return {
+        ...data,
+        standard_attr_id: created_at,
+      };
+    };
+  }
 
   async listDidFetch(items, allProjects, filters) {
     const { agentId } = filters;
@@ -48,11 +52,16 @@ export class NeutronAgentNetworkStore extends Base {
 
   @action
   remove = ({ agentId, id }) =>
-    this.submitting(request.delete(this.getDetailUrl({ agentId, id })));
+    this.submitting(this.client.delete(agentId, id));
 
   @action
-  add = ({ agentId }, body) =>
-    this.submitting(request.post(this.getListUrl({ agentId }), body));
+  add = ({ agentId }, body) => {
+    if (!isArray(body)) {
+      return this.submitting(this.client.create(agentId, body));
+    }
+    const reqs = body.map((it) => this.client.create(agentId, it));
+    return this.submitting(Promise.allSettled(reqs));
+  };
 }
 
 const globalNeutronAgentNetworkStore = new NeutronAgentNetworkStore();
diff --git a/src/stores/neutron/agent-router.js b/src/stores/neutron/agent-router.js
index 72e83ce9..12a389a4 100644
--- a/src/stores/neutron/agent-router.js
+++ b/src/stores/neutron/agent-router.js
@@ -13,34 +13,28 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { neutronBase } from 'utils/constants';
+import client from 'client';
+import { isArray } from 'lodash';
 import Base from '../base';
 
 export class NeutronAgentRouterStore extends Base {
-  get module() {
-    return 'routers';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'router';
+  get client() {
+    return client.neutron.agents.l3Routers;
   }
 
   get listFilterByProject() {
     return true;
   }
 
-  getListUrl = ({ agentId }) =>
-    `${this.apiVersion}/agents/${agentId}/l3-routers`;
+  get isSubResource() {
+    return true;
+  }
 
-  getDetailUrl = ({ agentId, id }) => `${this.getListUrl({ agentId })}/${id}`;
+  getFatherResourceId = (params) => params.agentId;
 
   get mapper() {
     return (data) => {
-      const externalGateway = data.external_gateway_info;
+      const { external_gateway_info: externalGateway, created_at } = data || {};
       return {
         ...data,
         hasExternalGateway: !!externalGateway,
@@ -50,6 +44,7 @@ export class NeutronAgentRouterStore extends Base {
           (externalGateway && externalGateway.network_name) || '',
         externalFixedIps:
           (externalGateway && externalGateway.external_fixed_ips) || [],
+        standard_attr_id: created_at,
       };
     };
   }
@@ -64,11 +59,16 @@ export class NeutronAgentRouterStore extends Base {
 
   @action
   remove = ({ agentId, id }) =>
-    this.submitting(request.delete(this.getDetailUrl({ agentId, id })));
+    this.submitting(this.client.delete(agentId, id));
 
   @action
-  add = ({ agentId }, body) =>
-    this.submitting(request.post(this.getListUrl({ agentId }), body));
+  add = ({ agentId }, body) => {
+    if (!isArray(body)) {
+      return this.submitting(this.client.create(agentId, body));
+    }
+    const reqs = body.map((it) => this.client.create(agentId, it));
+    return this.submitting(Promise.allSettled(reqs));
+  };
 }
 
 const globalNeutronAgentRouterStore = new NeutronAgentRouterStore();
diff --git a/src/stores/neutron/agent.js b/src/stores/neutron/agent.js
index 9248daa2..2281f425 100644
--- a/src/stores/neutron/agent.js
+++ b/src/stores/neutron/agent.js
@@ -12,20 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class NeutronAgentStore extends Base {
-  get module() {
-    return 'agents';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'agent';
+  get client() {
+    return client.neutron.agents;
   }
 
   get listFilterByProject() {
diff --git a/src/stores/neutron/fixed-ip.js b/src/stores/neutron/fixed-ip.js
index 30f3c58b..72199bd2 100644
--- a/src/stores/neutron/fixed-ip.js
+++ b/src/stores/neutron/fixed-ip.js
@@ -12,26 +12,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import globalNetworkStore from 'stores/neutron/network';
 import globalFloatingIpsStore from 'stores/neutron/floatingIp';
+import client from 'client';
 import Base from '../base';
 
 export class FixedIpStore extends Base {
-  get module() {
-    return 'ports';
+  get client() {
+    return client.neutron.ports;
   }
 
-  get apiVersion() {
-    return neutronBase();
+  get paramsFunc() {
+    return ({ all_projects, ...rest }) => rest;
   }
 
-  get listResponseKey() {
-    return 'ports';
-  }
-
-  async getItemFloatingIPs(fixed_ip) {
-    return globalFloatingIpsStore.pureFetchList({ fixed_ip_address: fixed_ip });
+  async getItemFloatingIPs(fixed_ip, portId) {
+    return globalFloatingIpsStore.pureFetchList({
+      fixed_ip_address: fixed_ip,
+      port_id: portId,
+    });
   }
 
   async listDidFetch(items) {
@@ -39,7 +38,7 @@ export class FixedIpStore extends Base {
       return [];
     }
     const port = items[0];
-    const { fixed_ips: fixedIPs = [] } = port;
+    const { fixed_ips: fixedIPs = [], id } = port;
     const subnets = Array.from(new Set(fixedIPs.map((it) => it.subnet_id)));
     const subnetResults = await Promise.all(
       subnets.map((item) => globalNetworkStore.fetchSubnetDetail({ id: item }))
@@ -49,7 +48,7 @@ export class FixedIpStore extends Base {
       subnetMap[result.id] = result;
     });
     const fipResults = await Promise.all(
-      fixedIPs.map((item) => this.getItemFloatingIPs(item.ip_address))
+      fixedIPs.map((item) => this.getItemFloatingIPs(item.ip_address, id))
     );
     return fixedIPs.map((it, index) => ({
       ...it,
diff --git a/src/stores/neutron/floatingIp.js b/src/stores/neutron/floatingIp.js
index 6f8803da..9ff3a172 100644
--- a/src/stores/neutron/floatingIp.js
+++ b/src/stores/neutron/floatingIp.js
@@ -12,30 +12,32 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action, observable } from 'mobx';
 import globalRouterStore from 'stores/neutron/router';
 import globalServerStore from 'stores/nova/instance';
 import globalLbaasStore from 'stores/octavia/loadbalancer';
+import client from 'client';
 import Base from '../base';
 
 export class FloatingIpStore extends Base {
-  get module() {
-    return 'floatingips';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'floatingip';
+  get client() {
+    return client.neutron.floatingips;
   }
 
   get listFilterByProject() {
     return true;
   }
 
+  get mapper() {
+    return (data) => {
+      const { created_at } = data;
+      return {
+        ...data,
+        standard_attr_id: created_at,
+      };
+    };
+  }
+
   updateParamsSortPage = (params, sortKey, sortOrder) => {
     if (sortKey && sortOrder) {
       params.sort_key = sortKey;
@@ -45,8 +47,8 @@ export class FloatingIpStore extends Base {
 
   @observable
   addInfo = {
-    network_name: '',
-    router_name: '',
+    name: '-',
+    externalNetworkName: '-',
   };
 
   @action
@@ -142,7 +144,7 @@ export class FloatingIpStore extends Base {
         port_id: null,
       },
     };
-    return this.submitting(request.put(`${this.getDetailUrl({ id })}`, body));
+    return this.submitting(this.client.update(id, body));
   }
 
   @action
@@ -155,15 +157,17 @@ export class FloatingIpStore extends Base {
     if (fixed_ip_address !== '') {
       body.floatingip.fixed_ip_address = fixed_ip_address;
     }
-    return this.submitting(request.put(`${this.getDetailUrl({ id })}`, body));
+    return this.submitting(this.client.update(id, body));
   }
 
   @action
   async getAddInfo({ router_id }) {
     this.isLoading = true;
-    const ret = await globalRouterStore.fetchDetail({ id: router_id });
-    this.addInfo = ret;
-    this.isLoading = false;
+    try {
+      this.addInfo = await globalRouterStore.fetchDetail({ id: router_id });
+    } finally {
+      this.isLoading = false;
+    }
     return this.addInfo;
   }
 }
diff --git a/src/stores/neutron/network.js b/src/stores/neutron/network.js
index ccf20692..be870c92 100644
--- a/src/stores/neutron/network.js
+++ b/src/stores/neutron/network.js
@@ -13,10 +13,11 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { neutronBase, skylineBase } from 'utils/constants';
 import networkUtils from 'src/pages/network/containers/Network/actions/networkUtil';
 import { get } from 'lodash';
 import globalProjectStore from 'stores/keystone/project';
+import client from 'client';
+import { isExternalNetwork } from 'resources/network';
 import Base from '../base';
 
 const { splitToArray } = networkUtils;
@@ -31,22 +32,24 @@ export class NetworkStore extends Base {
   @observable
   securityGroups = [];
 
-  get module() {
-    return 'networks';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'network';
+  get client() {
+    return client.neutron.networks;
   }
 
   get listFilterByProject() {
     return true;
   }
 
+  get mapper() {
+    return (data) => {
+      const { created_at } = data;
+      return {
+        ...data,
+        standard_attr_id: created_at,
+      };
+    };
+  }
+
   updateParamsSortPage = (params, sortKey, sortOrder) => {
     if (sortKey && sortOrder) {
       params.sort_key = sortKey;
@@ -62,65 +65,22 @@ export class NetworkStore extends Base {
   }
 
   listExtensions = async () => {
-    const extensions = await request.get(`${this.apiVersion}/extensions`);
+    const extensions = await client.neutron.extensions.list();
     return extensions;
   };
 
   fetchDHCPAgents = async (id) => {
-    const data = await request.get(
-      `${this.apiVersion}/networks/${id}/dhcp-agents`
-    );
+    const data = await this.client.dhcpAgents.list(id);
     return data;
   };
 
-  @action
-  async fetchFirewallCreateList({
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    timeFilter,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const { tab, all_projects, ...rest } = filters;
-    const params = { ...rest };
-    if (all_projects) {
-      if (!this.listFilterByProject) {
-        params.all_projects = true;
-      }
+  async listDidFetch(items, allProjects, filters) {
+    const { isFirewall } = filters;
+    if (!isFirewall) {
+      return items;
     }
-    const newParams = this.paramsFunc(params);
-    const url = this.getListDetailUrl() || this.getListUrl();
-    const newUrl = this.updateUrl(url, params);
-    const allData = await this.requestList(newUrl, newParams);
-    const allDataNew = allData.map(this.mapperBeforeFetchProject);
-    const data = allDataNew.filter((item) => {
-      if (!this.listFilterByProject) {
-        return true;
-      }
-      return this.itemInCurrentProject(item, all_projects);
-    });
-    // const items = data.map(this.mapper);
-    let newData = await this.listDidFetchProject(data, all_projects);
-    newData = await this.listDidFetchFirewall(newData, all_projects, filters);
-    newData = newData.map(this.mapper);
-    this.list.update({
-      data: newData,
-      total: newData.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      timeFilter,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-
-    return newData;
+    const datas = await this.listDidFetchFirewall(items);
+    return datas;
   }
 
   async listDidFetchFirewall(items) {
@@ -141,32 +101,6 @@ export class NetworkStore extends Base {
     return ret;
   }
 
-  // async listDidFetch(items) {
-  //   // fix for dhcp agents number column
-  //   const { extensions } = await this.listExtensions();
-  //   const isExtensionSupported = extensions.some(item => item.alias === 'dhcp_agent_scheduler');
-  //
-  //   if (isExtensionSupported && globals.user.hasAdminRole) {
-  //     const dhcpPromises = items.map(networkItem => this.fetchDHCPAgents(networkItem.id));
-  //     const dhcpAgents = await Promise.all(dhcpPromises);
-  //     items.forEach((i, index) => {
-  //       i.agents_num = dhcpAgents[index].agents.length;
-  //     });
-  //   }
-  //
-  //   const ret = await Promise.all(items.map(async (networkItem) => {
-  //     const promises = networkItem.subnets.map(subnetItem => this.fetchSubnetDetail({ id: subnetItem }));
-  //     try {
-  //       const results = await Promise.all(promises);
-  //       networkItem.subnetDetails = results || [];
-  //     } catch (e) {
-  //       networkItem.subnetDetails = [];
-  //     }
-  //     return networkItem;
-  //   }));
-  //   return ret;
-  // }
-
   @action
   async fetchDetailWithAvailabilityAndUsage({
     id,
@@ -174,10 +108,9 @@ export class NetworkStore extends Base {
     currentProjectId,
   }) {
     this.isLoading = true;
-    const result = await request.get(this.getDetailUrl({ id }));
+    const result = await this.client.show(id);
     const originData = get(result, this.responseKey) || result;
     const promises = [
-      // request.get(`${this.apiVersion}/network-ip-availabilities/${id}`),
       Promise.resolve({ agents: [] }),
       Promise.resolve({ name: '' }),
     ];
@@ -187,7 +120,7 @@ export class NetworkStore extends Base {
       const isExtensionSupported = extensions.some(
         (item) => item.alias === 'dhcp_agent_scheduler'
       );
-      if (isExtensionSupported && globals.user.hasAdminRole) {
+      if (isExtensionSupported && this.hasAdminRole) {
         promises.splice(0, 1, this.fetchDHCPAgents(id));
       }
       const { tenant_id } = originData;
@@ -208,9 +141,7 @@ export class NetworkStore extends Base {
 
     // 处理使用IP数量，只有管理员或者当前网络所有者才能查看
     if (isAdminPage || currentProjectId === originData.project_id) {
-      const used = await request.get(
-        `${this.apiVersion}/network-ip-availabilities/${id}`
-      );
+      const used = await client.neutron.networkIpAvailabilities.show(id);
       this.detail = {
         ...this.detail,
         ...used.network_ip_availability,
@@ -240,49 +171,39 @@ export class NetworkStore extends Base {
 
   @action
   async fetchSubnetDetail({ id }) {
-    const resData = await request.get(
-      `${this.apiVersion}/subnets/${id}`,
-      null,
-      null,
-      (res) => {
-        if (res.reason === 'NotFound' || res.reason === 'Forbidden') {
-          // global.navigateTo('/404')
-        }
-        return res.subnet;
-      }
-    );
-    return resData.subnet;
+    try {
+      const resData = await client.neutron.subnets.show(id);
+      return resData.subnet;
+    } catch (e) {
+      return {};
+    }
   }
 
   @action
   async fetchTopoNetwork() {
-    await Promise.all([
-      request.get(`${this.apiVersion}/networks`),
-      request.get(`${this.apiVersion}/subnets`),
-    ]).then(([resData, subnetRes]) => {
-      resData.subnets = subnetRes.subnets;
-      resData.networks = resData.networks.filter(
-        (network) =>
-          network['router:external'] ||
-          network.shared ||
-          network.project_id === globals.user.project.id
-      );
-      this.topology = resData;
-    });
+    await Promise.all([this.client.list(), client.neutron.subnets.list()]).then(
+      ([resData, subnetRes]) => {
+        resData.subnets = subnetRes.subnets;
+        resData.networks = resData.networks.filter(
+          (network) =>
+            isExternalNetwork(network) ||
+            network.shared ||
+            network.project_id === this.currentProjectId
+        );
+        this.topology = resData;
+      }
+    );
   }
 
   @action
   async fetchTopo() {
+    const params = {
+      project_id: this.currentProjectId,
+    };
     await Promise.all([
-      // request.get(`${this.apiVersion}/networks`),
-      // request.get(`${this.apiVersion}/subnets`),
-      request.get(`${this.apiVersion}/routers`, {
-        project_id: globals.user.project.id,
-      }),
-      request.get(`${skylineBase()}/extension/servers`),
-      request.get(`${this.apiVersion}/ports`, {
-        project_id: globals.user.project.id,
-      }),
+      client.neutron.routers.list(params),
+      client.skyline.extension.servers(),
+      client.neutron.ports.list(params),
     ]).then(([routersRes, serversRes, portRes]) => {
       const resData = this.topology;
       routersRes.routers.map((it) => {
@@ -315,8 +236,8 @@ export class NetworkStore extends Base {
         );
         return it;
       });
-      resData.extNetwork = resData.networks.filter(
-        (it) => it['router:external']
+      resData.extNetwork = resData.networks.filter((it) =>
+        isExternalNetwork(it)
       );
       this.topology = resData;
     });
@@ -326,30 +247,25 @@ export class NetworkStore extends Base {
   async createAndMore(data, rest) {
     const body = {};
     body[this.responseKey] = data;
-    let res = null;
-    try {
-      res = await this.create(data);
-    } catch (e) {
+    const res = await this.create(data).catch((e) => {
       return Promise.reject(
-        JSON.stringify({ type: 'create_network', error: e })
+        JSON.stringify({ type: 'create_network', error: e.response.data })
       );
-    }
+    });
     const { network } = res;
     const { create_subnet } = rest;
-    try {
-      if (create_subnet) {
-        const { project_id, id } = network;
-        const subnet = await this.createSubnet({
-          ...rest,
-          project_id,
-          network_id: id,
-        });
-        return subnet;
-      }
-    } catch (e) {
-      return Promise.reject(
-        JSON.stringify({ type: 'create_subnet', error: e })
-      );
+    if (create_subnet) {
+      const { project_id, id } = network;
+      const subnet = await this.createSubnet({
+        ...rest,
+        project_id,
+        network_id: id,
+      }).catch((e) => {
+        return Promise.reject(
+          JSON.stringify({ type: 'create_subnet', error: e.response.data })
+        );
+      });
+      return subnet;
     }
     // return this.submitting(Promise.resolve(res));
     return Promise.resolve(res);
@@ -383,9 +299,7 @@ export class NetworkStore extends Base {
       gateway_ip: disable_gateway ? null : gateway_ip,
       cidr,
     };
-    return this.submitting(
-      request.post(`${this.apiVersion}/subnets`, { subnet: data })
-    );
+    return client.neutron.subnets.create({ subnet: data });
   }
 }
 const globalNetworkStore = new NetworkStore();
diff --git a/src/stores/neutron/neutron.js b/src/stores/neutron/neutron.js
index c36a19a7..561610e0 100644
--- a/src/stores/neutron/neutron.js
+++ b/src/stores/neutron/neutron.js
@@ -12,24 +12,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action, observable } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class NeutronStore extends Base {
   @observable
   availableZones = [];
 
-  get apiVersion() {
-    return neutronBase();
-  }
+  @observable
+  zoneLoading = false;
 
   @action
   async fetchAvailableZones() {
-    const url = `${this.apiVersion}/availability_zones`;
-    const resData = await request.get(url);
+    this.zoneLoading = true;
+    const resData = await client.neutron.azones.list();
     const { availability_zones: items = [] } = resData;
     this.availableZones = items;
+    this.zoneLoading = false;
   }
 }
 
diff --git a/src/stores/neutron/port-forwarding.js b/src/stores/neutron/port-forwarding.js
index 337fad6d..81f9782f 100644
--- a/src/stores/neutron/port-forwarding.js
+++ b/src/stores/neutron/port-forwarding.js
@@ -13,155 +13,57 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { neutronBase } from 'utils/constants';
-import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class PortForwardingStore extends Base {
-  get module() {
-    return 'port_forwardings';
+  get client() {
+    return client.neutron.floatingips.portForwardings;
   }
 
-  get apiVersion() {
-    return neutronBase();
+  get isSubResource() {
+    return true;
   }
 
-  get responseKey() {
-    return 'port_forwarding';
+  getFatherResourceId = (params) => params.fipId;
+
+  get paramsFuncPage() {
+    return (params) => {
+      const { fipId, fipInfo, ...rest } = params;
+      return rest;
+    };
   }
 
-  @action
-  async fetchList({
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    const { id } = filters;
-    const fipUrl = `${this.apiVersion}/floatingips`;
-    const fips =
-      (await request.get(fipUrl, { router_id: id })).floatingips || [];
-    const results = await Promise.all(
-      fips.map((fip) => {
-        const { id: fipId } = fip;
-        const portForwardingUrl = `${fipUrl}/${fipId}/${this.module}`;
-        return request.get(portForwardingUrl);
-      })
-    );
-    let items = [];
-    results.forEach((result, index) => {
-      const data = get(result, this.listResponseKey, []).map((it) => {
-        const fip = fips[index];
-        return {
-          ...it,
-          fip,
-          floating_ip_address: fip.floating_ip_address,
-        };
-      });
-      items = [...items, ...data];
+  listDidFetch(items, allProjects, filters) {
+    if (items.length === 0) {
+      return items;
+    }
+    const { fipInfo } = filters;
+    const { floating_ip_address } = fipInfo;
+    items.forEach((item) => {
+      item.fip = fipInfo;
+      item.floating_ip_address = floating_ip_address;
     });
-    this.list.update({
-      data: items,
-      total: items.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-
     return items;
   }
 
-  getPortForwardingDetailUrl({ fipID }) {
-    return `${this.apiVersion}/floatingips/${fipID}/port_forwardings`;
-  }
-
-  @action
-  async getFipAlreadyUsedPorts({
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    timeFilter,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    const { tab, all_projects, ...rest } = filters;
-    const params = { ...rest };
-    if (all_projects) {
-      if (!this.listFilterByProject) {
-        params.all_projects = true;
-      }
-    }
-    const newParams = this.paramsFunc(params);
-    const url = this.getPortForwardingDetailUrl(filters);
-    const newUrl = this.updateUrl(url, params);
-    const allData = await this.requestList(newUrl, newParams, filters);
-    const allDataNew = allData.map((it) =>
-      this.mapperBeforeFetchProject(it, filters)
-    );
-    const data = allDataNew.filter((item) => {
-      if (!this.listFilterByProject) {
-        return true;
-      }
-      return this.itemInCurrentProject(item, all_projects);
-    });
-    // const items = data.map(this.mapper);
-    let newData = await this.listDidFetchProject(data, all_projects);
-    try {
-      newData = await this.listDidFetch(newData, all_projects, filters);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log(e);
-    }
-    newData = newData.map(this.mapper);
-    this.list.update({
-      data: newData,
-      total: newData.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      timeFilter,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-
-    return newData;
-  }
-
   @action
   create({ id, data }) {
     const body = {};
     body[this.responseKey] = data;
-    const url = `${this.apiVersion}/floatingips/${id}/${this.listResponseKey}`;
-    return this.submitting(request.post(url, body));
+    return this.submitting(this.client.create(id, body));
   }
 
   @action
-  edit({ fipID, id }, newObject) {
+  edit({ fipId, id }, newObject) {
     const body = {};
     body[this.responseKey] = newObject;
-    return this.submitting(
-      request.put(
-        `${this.apiVersion}/floatingips/${fipID}/${this.listResponseKey}/${id}`,
-        body
-      )
-    );
+    return this.submitting(this.client.update(fipId, id, body));
   }
 
   @action
   delete = ({ floatingipId, id }) => {
-    const url = `${this.apiVersion}/floatingips/${floatingipId}/${this.listResponseKey}/${id}`;
-    return this.submitting(request.delete(url));
+    return this.submitting(this.client.delete(floatingipId, id));
   };
 }
 
diff --git a/src/stores/neutron/port.js b/src/stores/neutron/port.js
index f5744f10..8f1a5149 100644
--- a/src/stores/neutron/port.js
+++ b/src/stores/neutron/port.js
@@ -12,30 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action } from 'mobx';
-import { get } from 'lodash';
+import { get, uniq } from 'lodash';
+import client from 'client';
+import { isExternalNetwork } from 'resources/network';
 import Base from '../base';
 
 export class PortStore extends Base {
-  get module() {
-    return 'ports';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'port';
+  get client() {
+    return client.neutron.ports;
   }
 
   async detailDidFetch(item) {
     const { network_id } = item;
     try {
-      const res = await request.get(
-        `${this.apiVersion}/networks/${network_id}`
-      );
+      const res = await client.neutron.networks.show(network_id);
       item.network = res.network;
       item.network_name = item.network.name;
       return item;
@@ -44,11 +35,33 @@ export class PortStore extends Base {
     }
   }
 
+  async listDidFetch(items, allProjects, filters) {
+    const { withPrice } = filters;
+    if (!withPrice) {
+      return items;
+    }
+    const networkIds = uniq(items.map((it) => it.network_id));
+    const networkResults = await Promise.all(
+      networkIds.map((it) => {
+        return client.neutron.networks.show(it);
+      })
+    );
+    const networks = networkResults.map((it) => it.network);
+    return items.map((it) => {
+      const network = networks.find((net) => net.id === it.network_id);
+      return {
+        ...it,
+        network,
+        isExternalNetwork: isExternalNetwork(network),
+      };
+    });
+  }
+
   async listDidFetchByFirewall(items) {
-    const routerUrl = `${this.apiVersion}/routers`;
-    const networkUrl = `${this.apiVersion}/networks`;
-    const routerResult = await request.get(routerUrl);
-    const networkResult = await request.get(networkUrl);
+    const [networkResult, routerResult] = await Promise.all([
+      client.neutron.networks.list(),
+      client.neutron.routers.list(),
+    ]);
     const { routers = [] } = routerResult;
     const { networks = [] } = networkResult;
     items.forEach((item) => {
@@ -86,7 +99,7 @@ export class PortStore extends Base {
     const params = {
       device_owner: 'network:ha_router_replicated_interface',
     };
-    const result = await request.get(this.getListUrl(), params);
+    const result = await this.client.list(params);
     let data = get(result, this.listResponseKey, []);
     data = data.filter((it) => ports.indexOf(it.id) >= 0);
     const items = data.map(this.mapper);
diff --git a/src/stores/neutron/qos-policy.js b/src/stores/neutron/qos-policy.js
index 6cc05af1..b37df35a 100644
--- a/src/stores/neutron/qos-policy.js
+++ b/src/stores/neutron/qos-policy.js
@@ -12,21 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
-import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class QoSPolicyStore extends Base {
-  get module() {
-    return 'qos/policies';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'policy';
+  get client() {
+    return client.neutron.qosPolicies;
   }
 
   get listResponseKey() {
@@ -37,9 +28,16 @@ export class QoSPolicyStore extends Base {
     return true;
   }
 
-  // get needGetProject() {
-  //   return false;
-  // }
+  get mapper() {
+    return (data) => {
+      const { created_at } = data;
+      return {
+        ...data,
+        standard_attr_id: created_at,
+      };
+    };
+  }
+
   updateParamsSortPage = (params, sortKey, sortOrder) => {
     if (sortKey && sortOrder) {
       params.sort_key = sortKey;
@@ -49,64 +47,44 @@ export class QoSPolicyStore extends Base {
 
   get paramsFuncPage() {
     return (params) => {
-      const { current, ...rest } = params;
+      const { current, withPrice, withFIPPrice, ...rest } = params;
       return rest;
     };
   }
 
-  @action
-  update({ id }, newObject) {
-    const data = {};
-    data[`${this.responseKey}`] = newObject;
-    return this.submitting(request.put(`${this.getDetailUrl({ id })}`, data));
-  }
-
   async createBandwidthLimitRule({ id }, data) {
-    const createPromise = request.post(
-      `${this.getDetailUrl({ id })}/bandwidth_limit_rules`,
-      { bandwidth_limit_rule: data }
-    );
-    return this.submitting(createPromise);
+    const body = {
+      bandwidth_limit_rule: data,
+    };
+    return this.submitting(this.client.bandwidthLimitRules.create(id, body));
   }
 
   async createDSCPMarkingRule({ id }, data) {
-    const createPromise = request.post(
-      `${this.getDetailUrl({ id })}/dscp_marking_rules`,
-      { dscp_marking_rule: data }
-    );
-    return this.submitting(createPromise);
+    const body = {
+      dscp_marking_rule: data,
+    };
+    return this.submitting(this.client.dscpMarkingRules.create(id, body));
   }
 
   async deleteBandwidthLimitRules({ id }, ruleId) {
-    return this.submitting(
-      request.delete(
-        `${this.getDetailUrl({ id })}/bandwidth_limit_rules/${ruleId}`
-      )
-    );
+    return this.submitting(this.client.bandwidthLimitRules.delete(id, ruleId));
   }
 
   async deleteDSCPMarkingRules({ id }, ruleId) {
-    return this.submitting(
-      request.delete(
-        `${this.getDetailUrl({ id })}/dscp_marking_rules/${ruleId}`
-      )
-    );
+    return this.submitting(this.client.dscpMarkingRules.delete(id, ruleId));
   }
 
   async updateBandwidthLimitRule({ id }, ruleId, rule) {
     return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}/bandwidth_limit_rules/${ruleId}`,
-        {
-          bandwidth_limit_rule: rule,
-        }
-      )
+      this.client.bandwidthLimitRules.update(id, ruleId, {
+        bandwidth_limit_rule: rule,
+      })
     );
   }
 
   async updateDSCPMarkingRule({ id }, ruleId, rule) {
     return this.submitting(
-      request.put(`${this.getDetailUrl({ id })}/dscp_marking_rules/${ruleId}`, {
+      this.client.dscpMarkingRules.update(id, ruleId, {
         dscp_marking_rule: rule,
       })
     );
@@ -115,7 +93,7 @@ export class QoSPolicyStore extends Base {
   async detailDidFetch(item, all_projects) {
     if (all_projects) {
       item.project_name =
-        (await this.fetchProjectDetail({ id: item.project_id })).project.name ||
+        (await client.keystone.projects.show(item.project_id)).project.name ||
         '-';
     }
     return item;
diff --git a/src/stores/neutron/router.js b/src/stores/neutron/router.js
index 439536dd..974bba5f 100644
--- a/src/stores/neutron/router.js
+++ b/src/stores/neutron/router.js
@@ -12,23 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { action, observable } from 'mobx';
-import { neutronBase } from 'utils/constants';
+import { observable } from 'mobx';
 import { PortStore } from 'stores/neutron/port';
+import client from 'client';
 import Base from '../base';
 import globalNetworkStore from './network';
 
 export class RouterStore extends Base {
-  get module() {
-    return 'routers';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'router';
+  get client() {
+    return client.neutron.routers;
   }
 
   get listFilterByProject() {
@@ -59,7 +51,8 @@ export class RouterStore extends Base {
 
   get mapper() {
     return (data) => {
-      const { external_gateway_info: externalGateway = {} } = data || {};
+      const { external_gateway_info: externalGateway = {}, created_at } =
+        data || {};
       return {
         ...data,
         hasExternalGateway: !!externalGateway,
@@ -69,6 +62,7 @@ export class RouterStore extends Base {
           (externalGateway && externalGateway.network_name) || '',
         externalFixedIps:
           (externalGateway && externalGateway.external_fixed_ips) || [],
+        standard_attr_id: created_at,
       };
     };
   }
@@ -79,7 +73,7 @@ export class RouterStore extends Base {
       if (!all_projects) {
         return {
           ...rest,
-          project_id: this.currentProject,
+          project_id: this.currentProjectId,
         };
       }
       return rest;
@@ -101,7 +95,7 @@ export class RouterStore extends Base {
   }
 
   async fetchConnectedSubnets(routerItem) {
-    const subnetResult = await request.get(`${this.apiVersion}/subnets`);
+    const subnetResult = await client.neutron.subnets.list();
     const { subnets } = subnetResult;
     const routerInterfaceList = [
       'network:router_interface_distributed',
@@ -126,6 +120,15 @@ export class RouterStore extends Base {
     return routerItem;
   }
 
+  async listDidFetch(items, allProjects, filters) {
+    const { isFirewall } = filters;
+    if (!isFirewall) {
+      return items;
+    }
+    const datas = await this.listDidFetchFirewall(items);
+    return datas;
+  }
+
   async listDidFetchFirewall(items) {
     // eslint-disable-next-line no-return-await
     return Promise.all(
@@ -138,68 +141,16 @@ export class RouterStore extends Base {
     );
   }
 
-  @action
-  async fetchFirewallCreateList({
-    limit,
-    page,
-    sortKey,
-    sortOrder,
-    conditions,
-    timeFilter,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const { tab, all_projects, ...rest } = filters;
-    const params = { ...rest };
-    if (all_projects) {
-      if (!this.listFilterByProject) {
-        params.all_projects = true;
-      }
-    }
-    const newParams = this.paramsFunc(params);
-    const url = this.getListDetailUrl() || this.getListUrl();
-    const newUrl = this.updateUrl(url, params);
-    const allData = await this.requestList(newUrl, newParams);
-    const allDataNew = allData.map(this.mapperBeforeFetchProject);
-    const data = allDataNew.filter((item) => {
-      if (!this.listFilterByProject) {
-        return true;
-      }
-      return this.itemInCurrentProject(item, all_projects);
-    });
-    // const items = data.map(this.mapper);
-    let newData = await this.listDidFetchProject(data, all_projects);
-    newData = await this.listDidFetchFirewall(newData, all_projects, filters);
-    newData = newData.map(this.mapper);
-    this.list.update({
-      data: newData,
-      total: newData.length || 0,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      timeFilter,
-      isLoading: false,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-
-    return newData;
-  }
-
   async connectSubnet({ id, subnetId, networkId }) {
-    const url = `${this.getListUrl()}/${id}/add_router_interface`;
     const body = {
       subnet_id: subnetId,
     };
     try {
       this.isSubmitting = true;
-      await request.put(url, body);
+      await this.client.addRouterInterface(id, body);
       this.isSubmitting = false;
       return Promise.resolve();
     } catch (error) {
-      const portUrl = `${this.apiVersion}/ports`;
       const portBody = {
         port: {
           network_id: networkId,
@@ -210,31 +161,29 @@ export class RouterStore extends Base {
           ],
         },
       };
-      const port = await request.post(portUrl, portBody);
+      const port = await client.neutron.ports.create(portBody);
       const portId = port.port.id;
       const newBody = {
         port_id: portId,
       };
-      return this.submitting(request.put(url, newBody));
+      return this.submitting(this.client.addRouterInterface(id, newBody));
     }
   }
 
   async disconnectSubnet({ id, subnetId }) {
-    const url = `${this.getListUrl()}/${id}/remove_router_interface`;
     const body = {
       subnet_id: subnetId,
     };
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.removeRouterInterface(id, body));
   }
 
   async associateFip({ id, fip, router }) {
     const networkId = fip.floating_network_id;
-    const portUrl = `${this.apiVersion}/ports`;
     const portAddress = fip.floating_ip_address;
     const portParams = {
       network_id: networkId,
     };
-    const result = await request.get(portUrl, portParams);
+    const result = await client.neutron.ports.list(portParams);
     const port = result.ports.find((it) => {
       const { fixed_ips: fixedIps } = it;
       return (
diff --git a/src/stores/neutron/security-group.js b/src/stores/neutron/security-group.js
index 218dcf2a..c4d36b0b 100644
--- a/src/stores/neutron/security-group.js
+++ b/src/stores/neutron/security-group.js
@@ -12,23 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action } from 'mobx';
 import { mapperRule } from 'resources/security-group-rule';
+import client from 'client';
 import Base from '../base';
 import globalProjectMapStore from '../project';
 
 export class SecurityGroupStore extends Base {
-  get module() {
-    return 'security-groups';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'security_group';
+  get client() {
+    return client.neutron.securityGroups;
   }
 
   get listFilterByProject() {
@@ -56,9 +48,7 @@ export class SecurityGroupStore extends Base {
 
   @action
   async updatePortSecurityGroup({ id, reqBody }) {
-    return this.submitting(
-      request.put(`${this.apiVersion}/ports/${id}`, reqBody)
-    );
+    return this.submitting(client.neutron.ports.update(id, reqBody));
   }
 }
 
diff --git a/src/stores/neutron/security-rule.js b/src/stores/neutron/security-rule.js
index 5a12acd4..204af759 100644
--- a/src/stores/neutron/security-rule.js
+++ b/src/stores/neutron/security-rule.js
@@ -12,21 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { mapperRule } from 'resources/security-group-rule';
+import client from 'client';
 import Base from '../base';
 
 export class SecurityGroupRuleStore extends Base {
-  get module() {
-    return 'security-group-rules';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'security_group_rule';
+  get client() {
+    return client.neutron.securityGroupRules;
   }
 
   get mapper() {
diff --git a/src/stores/neutron/static-route.js b/src/stores/neutron/static-route.js
index 70b43548..7933c527 100644
--- a/src/stores/neutron/static-route.js
+++ b/src/stores/neutron/static-route.js
@@ -13,21 +13,13 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { neutronBase } from 'utils/constants';
 import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class StaticRouteStore extends Base {
-  get module() {
-    return 'routers';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'router';
+  get client() {
+    return client.neutron.routers;
   }
 
   @action
@@ -41,7 +33,7 @@ export class StaticRouteStore extends Base {
   } = {}) {
     this.list.isLoading = true;
     const { id } = filters;
-    const result = await request.get(this.getDetailUrl({ id }));
+    const result = await this.client.show(id);
     const data = get(result, this.responseKey, {});
     const { routes = [] } = data;
     routes.forEach((it) => {
@@ -63,23 +55,21 @@ export class StaticRouteStore extends Base {
   }
 
   async addStaticRoute({ id, routes }) {
-    const url = `${this.getListUrl()}/${id}/add_extraroutes`;
     const body = {
       router: {
         routes,
       },
     };
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.addExtraRoutes(id, body));
   }
 
   async removeStaticRoute({ id, routes }) {
-    const url = `${this.getListUrl()}/${id}/remove_extraroutes`;
     const body = {
       router: {
         routes,
       },
     };
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.removeExtraRoutes(id, body));
   }
 }
 
diff --git a/src/stores/neutron/subnet.js b/src/stores/neutron/subnet.js
index 3c2dfab6..bfac3595 100644
--- a/src/stores/neutron/subnet.js
+++ b/src/stores/neutron/subnet.js
@@ -12,21 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class SubnetStore extends Base {
-  get module() {
-    return 'subnets';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'subnet';
+  get client() {
+    return client.neutron.subnets;
   }
 
   get listFilterByProject() {
@@ -53,9 +45,7 @@ export class SubnetStore extends Base {
       host_routes,
       gateway_ip,
     };
-    return this.submitting(
-      request.put(`${this.getDetailUrl({ id })}`, { subnet: data })
-    );
+    return this.submitting(this.client.update(id, { subnet: data }));
   }
 }
 
diff --git a/src/stores/neutron/virtual-adapter.js b/src/stores/neutron/virtual-adapter.js
index 4c8e49ca..dc3f95ac 100644
--- a/src/stores/neutron/virtual-adapter.js
+++ b/src/stores/neutron/virtual-adapter.js
@@ -12,30 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase, skylineBase } from 'utils/constants';
 import globalNetworkStore from 'stores/neutron/network';
 import { action, observable, toJS } from 'mobx';
 import globalSecurityGroupStore from 'stores/neutron/security-group';
-import { get } from 'lodash';
 import globalFloatingIpsStore from 'stores/neutron/floatingIp';
+import client from 'client';
 import List from '../base-list';
 import Base from '../base';
 
 export class VirtualAdapterStore extends Base {
-  get module() {
-    return 'ports';
+  get client() {
+    return client.neutron.ports;
   }
 
-  get apiVersion() {
-    return neutronBase();
+  listFetchByClient(params) {
+    return this.skylineClient.extension.ports(params);
   }
 
-  get responseKey() {
-    return 'port';
-  }
-
-  getListDetailUrl = () => `${skylineBase()}/extension/${this.module}`;
-
   get listFilterByProject() {
     return false;
   }
@@ -47,6 +40,13 @@ export class VirtualAdapterStore extends Base {
     }
   };
 
+  get paramsFuncPage() {
+    return (params) => {
+      const { current, withPrice, instanceAddresses, ...rest } = params;
+      return rest;
+    };
+  }
+
   @observable
   fixed_ips = new List();
 
@@ -55,9 +55,7 @@ export class VirtualAdapterStore extends Base {
 
   @action
   update({ id }, newObject) {
-    return this.submitting(
-      request.put(`${this.getDetailUrl({ id })}`, { port: newObject })
-    );
+    return this.submitting(this.client.update(id, { port: newObject }));
   }
 
   @action
@@ -77,7 +75,7 @@ export class VirtualAdapterStore extends Base {
       return item;
     });
     const fipDetails = await Promise.all(
-      fixedIPs.map((item) => this.getItemFloatingIPs(item.ip_address))
+      fixedIPs.map((item) => this.getItemFloatingIPs(item.ip_address, item.id))
     );
     fipDetails.forEach((fips, index) => {
       fips.forEach((fip) => {
@@ -112,60 +110,27 @@ export class VirtualAdapterStore extends Base {
     });
   }
 
-  @action
-  async fetchListByPage({
-    limit = 10,
-    page = 1,
-    sortKey,
-    sortOrder,
-    conditions,
-    timeFilter,
-    ...filters
-  } = {}) {
-    this.list.isLoading = true;
-    // todo: no page, no limit, fetch all
-    const { tab, all_projects, addressAsIdKey, ...rest } = filters;
-    const params = { limit, ...rest };
-    this.updateParamsSortPage(params, sortKey, sortOrder);
-    if (all_projects) {
-      if (!this.listFilterByProject) {
-        params.all_projects = true;
-      }
+  async listDidFetch(items, allProjects, filters) {
+    if (items.length === 0) {
+      return items;
     }
-
-    const marker = this.getMarker(page);
-    if (marker) {
-      params.marker = marker;
+    const {
+      device_id,
+      device_owner,
+      addressAsIdKey,
+      network_id,
+      instanceAddresses,
+    } = filters;
+    if (instanceAddresses) {
+      items = items.map((i) => ({
+        ...i,
+        instanceAddresses,
+      }));
     }
-    let url =
-      this.getListPageUrl() || this.getListDetailUrl() || this.getListUrl();
-    let result = null;
-    if (filters.device_owner) {
-      const { device_owner } = filters;
-      url += '?';
-      device_owner.forEach((item) => {
-        url += `device_owner=${item}&`;
-      });
-      const { device_owner: d, ...restParams } = params;
-      Object.keys(restParams).forEach((key) => {
-        url += `${key}=${restParams[key]}&`;
-      });
-      result = await request.get(url);
-    } else {
-      result = await request.get(url, params);
-    }
-    let allData = this.listResponseKey
-      ? get(result, this.listResponseKey, [])
-      : result;
-    const { count } = result;
-    allData = await this.listDidFetchProject(allData, all_projects);
-    this.updateMarker(allData, page);
-
-    // if has 'device_owner' means not in detail page, need fip information to control action button show
-    if (filters.device_owner) {
+    if (device_owner || device_id || network_id) {
       // fetch fixed_ips details
       const details = await Promise.all(
-        allData.map((item) => {
+        items.map((item) => {
           if (addressAsIdKey) {
             const { id, ipv4, ipv6 } = item;
             item.address_id = id;
@@ -175,36 +140,26 @@ export class VirtualAdapterStore extends Base {
           }
           return Promise.all(
             item.fixed_ips.map((fixed_ip) =>
-              this.getItemFloatingIPs(fixed_ip.ip_address)
+              this.getItemFloatingIPs(fixed_ip.ip_address, item.id)
             )
           );
         })
       );
       details.forEach((detail, index) => {
-        allData[index].associatedDetail = [];
+        items[index].associatedDetail = [];
         detail.forEach((ip) => {
-          allData[index].associatedDetail.push(...toJS(ip));
+          items[index].associatedDetail.push(...toJS(ip));
         });
       });
     }
-
-    this.list.update({
-      data: allData,
-      limit: Number(limit) || 10,
-      page: Number(page) || 1,
-      sortKey,
-      sortOrder,
-      filters,
-      timeFilter,
-      isLoading: false,
-      total: count,
-      ...(this.list.silent ? {} : { selectedRowKeys: [] }),
-    });
-    return allData;
+    return items;
   }
 
-  async getItemFloatingIPs(fixed_ip) {
-    return globalFloatingIpsStore.pureFetchList({ fixed_ip_address: fixed_ip });
+  async getItemFloatingIPs(fixed_ip, portId) {
+    return globalFloatingIpsStore.pureFetchList({
+      fixed_ip_address: fixed_ip,
+      port_id: portId,
+    });
   }
 
   async detailDidFetch(item, all_projects) {
@@ -218,7 +173,7 @@ export class VirtualAdapterStore extends Base {
     if (item.fixed_ips.length !== 0) {
       const details = await Promise.all(
         itemContrib.fixed_ips.map((fixed_ip) =>
-          this.getItemFloatingIPs(fixed_ip.ip_address)
+          this.getItemFloatingIPs(fixed_ip.ip_address, id)
         )
       );
       details.forEach((detail) => {
diff --git a/src/stores/neutron/vpn-endpoint-group.js b/src/stores/neutron/vpn-endpoint-group.js
index f1a073e8..95c68f75 100644
--- a/src/stores/neutron/vpn-endpoint-group.js
+++ b/src/stores/neutron/vpn-endpoint-group.js
@@ -12,39 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
-import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class VpnEndPointGroupStore extends Base {
-  get module() {
-    return 'endpoint-groups';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'endpoint_group';
+  get client() {
+    return client.neutron.endpointGroups;
   }
 
   get listFilterByProject() {
     return true;
   }
-
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        { [this.responseKey]: { ...newObject } },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
 }
 
 const globalVPNEndPointGroupStore = new VpnEndPointGroupStore();
diff --git a/src/stores/neutron/vpn-ike-policy.js b/src/stores/neutron/vpn-ike-policy.js
index e90a08d0..7ce74911 100644
--- a/src/stores/neutron/vpn-ike-policy.js
+++ b/src/stores/neutron/vpn-ike-policy.js
@@ -12,43 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
-import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class VpnIKEPolicyStore extends Base {
-  get module() {
-    return 'ikepolicies';
-  }
-
-  get apiVersion() {
-    return neutronBase();
+  get client() {
+    return client.neutron.ikePolicies;
   }
 
   get listResponseKey() {
     return 'ikepolicies';
   }
 
-  get responseKey() {
-    return 'ikepolicy';
-  }
-
   get listFilterByProject() {
     return true;
   }
-
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        { [this.responseKey]: { ...newObject } },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
 }
 
 const globalVpnIKEPolicyStore = new VpnIKEPolicyStore();
diff --git a/src/stores/neutron/vpn-ipsec-connection.js b/src/stores/neutron/vpn-ipsec-connection.js
index 82893a82..a75c623d 100644
--- a/src/stores/neutron/vpn-ipsec-connection.js
+++ b/src/stores/neutron/vpn-ipsec-connection.js
@@ -12,43 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
 import { action } from 'mobx';
 import { get } from 'lodash';
 import globalVpnIKEPolicyStore from 'stores/neutron/vpn-ike-policy';
 import globalVpnIPSecPolicyStore from 'stores/neutron/vpn-ipsec-policy';
+import client from 'client';
 import Base from '../base';
 
 export class VpnIPsecConnectionStore extends Base {
-  get module() {
-    return 'ipsec_site_connections';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'ipsec_site_connection';
+  get client() {
+    return client.neutron.ipsecSiteConnections;
   }
 
   get listFilterByProject() {
     return true;
   }
 
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        { [this.responseKey]: { ...newObject } },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
-
   @action
   async fetChDetailWithPolicyDetail({
     id,
@@ -57,8 +36,8 @@ export class VpnIPsecConnectionStore extends Base {
     all_projects,
   }) {
     this.isLoading = true;
-    const result = await request.get(
-      this.getDetailUrl({ id }),
+    const result = await this.client.show(
+      id,
       this.getDetailParams({ all_projects })
     );
     const ikePolicy = await globalVpnIKEPolicyStore.fetchDetail({
diff --git a/src/stores/neutron/vpn-ipsec-policy.js b/src/stores/neutron/vpn-ipsec-policy.js
index 62c36634..9a9347b7 100644
--- a/src/stores/neutron/vpn-ipsec-policy.js
+++ b/src/stores/neutron/vpn-ipsec-policy.js
@@ -12,43 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
-import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class VpnIPSecPolicyStore extends Base {
-  get module() {
-    return 'ipsecpolicies';
-  }
-
-  get apiVersion() {
-    return neutronBase();
+  get client() {
+    return client.neutron.ipsecPolicies;
   }
 
   get listResponseKey() {
     return 'ipsecpolicies';
   }
 
-  get responseKey() {
-    return 'ipsecpolicy';
-  }
-
   get listFilterByProject() {
     return true;
   }
-
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        { [this.responseKey]: { ...newObject } },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
 }
 
 const globalVpnIPSecPolicyStore = new VpnIPSecPolicyStore();
diff --git a/src/stores/neutron/vpn-service.js b/src/stores/neutron/vpn-service.js
index 5090c1c1..1af87c49 100644
--- a/src/stores/neutron/vpn-service.js
+++ b/src/stores/neutron/vpn-service.js
@@ -12,39 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { neutronBase } from 'utils/constants';
-import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class VpnServicesStore extends Base {
-  get module() {
-    return 'vpnservices';
-  }
-
-  get apiVersion() {
-    return neutronBase();
-  }
-
-  get responseKey() {
-    return 'vpnservice';
+  get client() {
+    return client.neutron.vpnservices;
   }
 
   get listFilterByProject() {
     return true;
   }
-
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        { [this.responseKey]: { ...newObject } },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
 }
 
 const globalVpnServicesStore = new VpnServicesStore();
diff --git a/src/stores/nova/aggregate.js b/src/stores/nova/aggregate.js
index 7ec969f4..0d2685f3 100644
--- a/src/stores/nova/aggregate.js
+++ b/src/stores/nova/aggregate.js
@@ -12,26 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { novaBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class AggregateStore extends Base {
-  get module() {
-    return 'os-aggregates';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'aggregate';
+  get client() {
+    return client.nova.aggregates;
   }
 
   @action
   manageHost({ adds, dels, id }) {
-    const url = `${this.getListUrl()}/${id}/action`;
     const bodys = [];
     adds.forEach((it) => {
       const body = {
@@ -50,19 +41,18 @@ export class AggregateStore extends Base {
       bodys.push(body);
     });
     return this.submitting(
-      Promise.all(bodys.map((it) => request.post(url, it)))
+      Promise.all(bodys.map((it) => this.client.action(id, it)))
     );
   }
 
   @action
   manageMetadata({ id, metadatas }) {
-    const url = `${this.getListUrl()}/${id}/action`;
     const body = {
       set_metadata: {
         metadata: metadatas,
       },
     };
-    return this.submitting(request.post(url, body));
+    return this.submitting(this.client.action(id, body));
   }
 }
 
diff --git a/src/stores/nova/compute-host.js b/src/stores/nova/compute-host.js
index b8d00284..56705bbb 100644
--- a/src/stores/nova/compute-host.js
+++ b/src/stores/nova/compute-host.js
@@ -13,27 +13,21 @@
 // limitations under the License.
 
 import { action } from 'mobx';
-import { novaBase, skylineBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class ComputeHostStore extends Base {
-  get module() {
-    return 'os-services';
+  get client() {
+    return client.nova.services;
   }
 
-  get apiVersion() {
-    return novaBase();
+  listFetchByClient(params) {
+    return this.skylineClient.extension.computeServices(params);
   }
 
-  get responseKey() {
-    return 'service';
-  }
-
-  getListDetailUrl = () => `${skylineBase()}/extension/compute-services`;
-
   @action
   update(id, body) {
-    return this.submitting(request.put(`${this.getListUrl()}/${id}`, body));
+    return this.submitting(this.client.update(id, body));
   }
 
   @action
diff --git a/src/stores/nova/flavor.js b/src/stores/nova/flavor.js
index 100c9e29..53d34370 100644
--- a/src/stores/nova/flavor.js
+++ b/src/stores/nova/flavor.js
@@ -14,32 +14,21 @@
 
 /* eslint-disable prefer-destructuring */
 import { action, observable } from 'mobx';
-import { novaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class FlavorStore extends Base {
   @observable
   access = [];
 
-  get module() {
-    return 'flavors';
+  get listWithDetail() {
+    return true;
   }
 
-  get apiVersion() {
-    return novaBase();
+  get client() {
+    return client.nova.flavors;
   }
 
-  get responseKey() {
-    return 'flavor';
-  }
-
-  // get listFilterByProject() {
-  //   return true;
-  // }
-
-  // getListDetailUrl = () => `${skylineBase()}/contrib/flavors`
-  getListDetailUrl = () => `${this.apiVersion}/${this.module}/detail`;
-
   getGpuInfo = (record) => {
     const { extra_specs = {} } = record || {};
     const alias = extra_specs['pci_passthrough:alias'];
@@ -54,7 +43,7 @@ export class FlavorStore extends Base {
       gpuCount = vgpu;
     }
     if (alias) {
-      if (category && category.indexOf('_gpu') >= 0) {
+      if (category && !category.includes('visualization_')) {
         const gpu = alias.split(',')[0];
         const usb = alias.split(',')[1];
         gpuType = gpu.split(':')[0];
@@ -95,7 +84,7 @@ export class FlavorStore extends Base {
 
   get paramsFunc() {
     return (params) => {
-      const { all_projects, name, ...rest } = params;
+      const { all_projects, name, withPrice, ...rest } = params;
       if (all_projects) {
         return {
           ...rest,
@@ -119,8 +108,7 @@ export class FlavorStore extends Base {
 
   @action
   async fetchAccess(id) {
-    const url = `${this.getDetailUrl({ id })}/os-flavor-access`;
-    const result = await request.get(url);
+    const result = await this.client.access.list(id);
     this.access = result.flavor_access;
   }
 
@@ -129,31 +117,28 @@ export class FlavorStore extends Base {
     const body = {};
     body[this.responseKey] = data;
     this.isSubmitting = true;
-    const result = await request.post(this.getListUrl(), body);
+    const result = await this.client.create(body);
     const { id } = result.flavor;
-    const url = `${this.getDetailUrl({ id })}/os-extra_specs`;
     const extraBody = {
       extra_specs: extraSpecs,
     };
     if (accessControl && accessControl.length > 0) {
       await Promise.all(
         accessControl.map((it) => {
-          const accessUrl = `${this.getDetailUrl({ id })}/action`;
           const accessBody = {
             addTenantAccess: {
               tenant: it,
             },
           };
-          return request.post(accessUrl, accessBody);
+          return this.client.action(id, accessBody);
         })
       );
     }
-    return this.submitting(request.post(url, extraBody));
+    return this.submitting(this.client.extraSpecs.create(id, extraBody));
   }
 
   @action
   async updateAccess(id, adds, dels) {
-    const url = `${this.getDetailUrl({ id })}/action`;
     this.isSubmitting = true;
     await Promise.all(
       adds.map((it) => {
@@ -162,7 +147,7 @@ export class FlavorStore extends Base {
             tenant: it,
           },
         };
-        return request.post(url, accessBody);
+        return this.client.action(id, accessBody);
       })
     );
     return this.submitting(
@@ -173,7 +158,7 @@ export class FlavorStore extends Base {
               tenant: it,
             },
           };
-          return request.post(url, accessBody);
+          return this.client.action(id, accessBody);
         })
       )
     );
@@ -181,23 +166,20 @@ export class FlavorStore extends Base {
 
   @action
   async createExtraSpecs(id, extraSpecs) {
-    const url = `${this.getDetailUrl({ id })}/os-extra_specs`;
     const extraBody = {
       extra_specs: extraSpecs,
     };
-    return this.submitting(request.post(url, extraBody));
+    return this.submitting(this.client.extraSpecs.create(id, extraBody));
   }
 
   @action
   async deleteExtraSpecs(id, key) {
-    const url = `${this.getDetailUrl({ id })}/os-extra_specs/${key}`;
-    return this.submitting(request.delete(url));
+    return this.submitting(this.client.extraSpecs.delete(id, key));
   }
 
   @action
   async putExtraSpecs(id, key, body) {
-    const url = `${this.getDetailUrl({ id })}/os-extra_specs/${key}`;
-    return this.submitting(request.put(url, body));
+    return this.submitting(this.client.extraSpecs.update(id, key, body));
   }
 
   @action
diff --git a/src/stores/nova/hypervisor.js b/src/stores/nova/hypervisor.js
index fdad022f..c6c47dcb 100644
--- a/src/stores/nova/hypervisor.js
+++ b/src/stores/nova/hypervisor.js
@@ -13,27 +13,27 @@
 // limitations under the License.
 
 import { getGBValue } from 'utils/index';
-import { novaBase, placementBase } from 'utils/constants';
 import { action, observable } from 'mobx';
 import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class HypervisorStore extends Base {
-  get module() {
-    return 'os-hypervisors';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'hypervisor';
-  }
-
   @observable
   overview = {};
 
+  get client() {
+    return client.nova.hypervisors;
+  }
+
+  get providerClient() {
+    return client.placement.resourceProviders;
+  }
+
+  get listWithDetail() {
+    return true;
+  }
+
   // get mapper() {
   //   return (item) => {
   //     item.vcpus_used_percent = ((item.vcpus_used / item.vcpus) * 100).toFixed(2);
@@ -51,7 +51,7 @@ export class HypervisorStore extends Base {
       return items;
     }
     const requestList = items.map((it) =>
-      request.get(`${placementBase()}/resource_providers/${it.id}/inventories`)
+      this.providerClient.inventories.list(it.id)
     );
     const inventories = await Promise.all(requestList);
     const result = items.map((item, index) => {
@@ -82,17 +82,13 @@ export class HypervisorStore extends Base {
     return result;
   }
 
-  getListDetailUrl = () => `${this.apiVersion}/${this.module}/detail`;
-
   @action
   async fetchDetail({ id, all_projects }) {
     this.isLoading = true;
-    const result = await request.get(this.getDetailUrl({ id }));
+    const result = await this.client.show(id);
     const originData = get(result, this.responseKey) || result;
     const item = this.mapperBeforeFetchProject(originData);
-    const inventoriesReuslt = await request.get(
-      `${placementBase()}/resource_providers/${item.id}/inventories`
-    );
+    const inventoriesReuslt = await this.providerClient.inventories.list(id);
     if (item.hypervisor_type !== 'ironic') {
       const {
         inventories: {
@@ -103,6 +99,8 @@ export class HypervisorStore extends Base {
       item.vcpus *= allocation_ratio;
       item.memory_mb *= memory_ratio;
     }
+    item.memory_mb_used_gb = getGBValue(item.memory_mb_used);
+    item.memory_mb_gb = getGBValue(item.memory_mb);
     const newItem = await this.detailDidFetch(item, all_projects);
     const detail = this.mapper(newItem);
     this.detail = detail;
@@ -113,8 +111,7 @@ export class HypervisorStore extends Base {
   @action
   getOverview = async () => {
     this.isLoading = true;
-    const url = this.getListDetailUrl();
-    const hypervisorResult = await request.get(url);
+    const hypervisorResult = await this.client.listDetail();
     const { hypervisors } = hypervisorResult;
     const data = {
       vcpus: 0,
@@ -125,7 +122,7 @@ export class HypervisorStore extends Base {
       local_gb_used: 0,
     };
     const requestList = hypervisors.map((it) =>
-      request.get(`${placementBase()}/resource_providers/${it.id}/inventories`)
+      this.providerClient.inventories.list(it.id)
     );
     const inventories = await Promise.all(requestList);
     hypervisors.forEach((item, index) => {
@@ -148,6 +145,7 @@ export class HypervisorStore extends Base {
       // data.local_gb_used += item.local_gb_used;
       // fetch storage info from prometheus
     });
+
     this.overview = data;
     this.isLoading = false;
   };
diff --git a/src/stores/nova/instance-volume.js b/src/stores/nova/instance-volume.js
index d3a995b8..0962f267 100644
--- a/src/stores/nova/instance-volume.js
+++ b/src/stores/nova/instance-volume.js
@@ -12,31 +12,33 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { cinderBase, novaBase } from 'utils/constants';
 import { isOsDisk } from 'resources/volume';
+import client from 'client';
 import Base from '../base';
+import globalVolumeTypeStore from '../cinder/volume-type';
 
 export class InstanceVolumeStore extends Base {
-  get module() {
-    return 'servers';
+  get client() {
+    return client.nova.servers.volumeAttachments;
   }
 
-  get apiVersion() {
-    return novaBase();
+  get isSubResource() {
+    return true;
   }
 
-  get responseKey() {
-    return 'volumeAttachment';
-  }
-
-  get fetchListByLimit() {
-    return false;
-  }
+  getFatherResourceId = (params) => params.serverId;
 
   get paramsFunc() {
     return (params) => {
-      const { id, serverId, all_projects, projectId, serverName, ...rest } =
-        params;
+      const {
+        id,
+        serverId,
+        all_projects,
+        projectId,
+        serverName,
+        withPrice,
+        ...rest
+      } = params;
       return rest;
     };
   }
@@ -59,22 +61,16 @@ export class InstanceVolumeStore extends Base {
     });
   }
 
-  getListUrl = ({ serverId }) =>
-    `${this.apiVersion}/${this.module}/${serverId}/os-volume_attachments`;
-
   async listDidFetch(items, allProjects, filters) {
     if (items.length === 0) {
       return items;
     }
-    const { serverName, serverId } = filters;
+    const { serverName, serverId, withPrice } = filters;
     const { project_id, project_name } = items[0];
     const results = await Promise.all(
       items.map((it) => {
         const { volumeId } = it;
-        const url = `${cinderBase()}/${
-          globals.user.project.id
-        }/volumes/${volumeId}`;
-        return request.get(url);
+        return client.cinder.volumes.show(volumeId);
       })
     );
     const volumes = results.map((result) => {
@@ -93,6 +89,15 @@ export class InstanceVolumeStore extends Base {
         project_name,
       };
     });
+    if (withPrice) {
+      const volumeTypes = await globalVolumeTypeStore.fetchList({ withPrice });
+      volumes.forEach((item) => {
+        const { size, volume_type } = item;
+        const volumeType = volumeTypes.find((it) => it.name === volume_type);
+        const cost = volumeType ? (volumeType.priceCost * size).toFixed(2) : 0;
+        item.cost = cost;
+      });
+    }
     return volumes;
   }
 }
diff --git a/src/stores/nova/instance.js b/src/stores/nova/instance.js
index 54f00002..82ba3b90 100644
--- a/src/stores/nova/instance.js
+++ b/src/stores/nova/instance.js
@@ -13,13 +13,8 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import {
-  novaBase,
-  skylineBase,
-  neutronBase,
-  glanceBase,
-} from 'utils/constants';
 import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 import { RecycleBinStore } from '../skyline/recycle-server';
 
@@ -36,16 +31,8 @@ export class ServerStore extends Base {
   @observable
   serverSnapshots = [];
 
-  get module() {
-    return 'servers';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'server';
+  get client() {
+    return client.nova.servers;
   }
 
   get mapper() {
@@ -58,17 +45,13 @@ export class ServerStore extends Base {
     };
   }
 
-  getListUrl = () => `${this.apiVersion}/${this.module}`;
-
-  getListPageUrl = () => `${skylineBase()}/extension/servers`;
-
-  getListDetailUrl = () => `${skylineBase()}/extension/servers`;
-
-  getDetailUrl = ({ id }) => `${this.apiVersion}/${this.module}/${id}`;
+  listFetchByClient(params) {
+    return this.skylineClient.extension.servers(params);
+  }
 
   get paramsFuncPage() {
     return (params) => {
-      const { current, ...rest } = params;
+      const { current, noReminder, ...rest } = params;
       return rest;
     };
   }
@@ -83,8 +66,8 @@ export class ServerStore extends Base {
   @action
   async fetchDetailWithoutExpiration({ id, all_projects }) {
     this.isLoading = true;
-    const result = await request.get(
-      this.getDetailUrl({ id }),
+    const result = await this.client.show(
+      id,
       this.getDetailParams({ all_projects })
     );
     const originData = get(result, this.responseKey) || result;
@@ -100,6 +83,7 @@ export class ServerStore extends Base {
       if (!isRecycleBinDetail) {
         const result = await this.fetchList({
           uuid: id,
+          noReminder: true,
           all_projects,
         });
         item.itemInList = result[0];
@@ -108,18 +92,21 @@ export class ServerStore extends Base {
         const result = await store.fetchList({ uuid: id, all_projects });
         item.itemInList = result[0];
       }
-    } catch (e) {}
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log(e);
+    }
     return item;
   }
 
-  async requestList(url, params, filters) {
-    const { members, isServerGroup } = filters;
+  async requestList(params, originParams = {}) {
+    const { members, isServerGroup } = originParams;
     if (members && isServerGroup && members.length === 0) {
       return [];
     }
     const datas = !this.fetchListByLimit
-      ? await this.requestListAll(url, params)
-      : await this.requestListAllByLimit(url, params, 100);
+      ? await this.requestListAll(params)
+      : await this.requestListAllByLimit(params, 100);
     return datas;
   }
 
@@ -128,9 +115,7 @@ export class ServerStore extends Base {
       return newData;
     }
     const { members, isServerGroup, host } = filters;
-    const isoImages = await request.get(
-      `${glanceBase()}/images?disk_format=iso`
-    );
+    const isoImages = await client.glance.images.list({ disk_format: 'iso' });
     const { images } = isoImages;
     if (images[0]) {
       const imageId = images.map((it) => it.id);
@@ -154,8 +139,10 @@ export class ServerStore extends Base {
   async fetchInterface({ id }) {
     this.interface.isLoading = true;
     const params = { device_id: id };
-    const resData = await request.get(`${neutronBase()}/ports`, params);
-    const networks = await request.get(`${neutronBase()}/networks?`);
+    const [resData, networks] = await Promise.all([
+      client.neutron.ports.list(params),
+      client.neutron.networks.list(),
+    ]);
     const interfaces = resData.ports;
     const interfaceAll = [];
     networks.networks.forEach((network) => {
@@ -180,7 +167,7 @@ export class ServerStore extends Base {
   @action
   async fetchSecurityGroup({ id }) {
     this.securityGroups.isLoading = true;
-    const portResult = await request.get(`${neutronBase()}/ports`, {
+    const portResult = await client.neutron.ports.list({
       device_id: id,
     });
     const { ports = [] } = portResult;
@@ -190,7 +177,7 @@ export class ServerStore extends Base {
     let sgItems = [];
     try {
       const result = await Promise.all(
-        sgIds.map((it) => request.get(`${neutronBase()}/security-groups/${it}`))
+        sgIds.map((it) => client.neutron.securityGroups.show(it))
       );
       sgItems = result.map((it) => it.security_group);
     } catch (e) {}
@@ -203,12 +190,12 @@ export class ServerStore extends Base {
 
   @action
   delete = async ({ id }) => {
-    return this.submitting(request.delete(this.getDetailUrl({ id })));
+    return this.client.delete(id);
   };
 
   @action
   async create(body) {
-    return this.submitting(request.post(this.getListUrl(), body));
+    return this.submitting(this.client.create(body));
   }
 
   @action
@@ -219,10 +206,7 @@ export class ServerStore extends Base {
         type: 'novnc',
       },
     };
-    const result = await request.post(
-      `${this.getListUrl()}/${id}/remote-consoles`,
-      body
-    );
+    const result = await this.client.createConsole(id, body);
     this.isSubmitting = false;
     return result;
   }
@@ -235,23 +219,25 @@ export class ServerStore extends Base {
         type: 'serial',
       },
     };
-    const result = await request.post(
-      `${this.getListUrl()}/${id}/remote-consoles`,
-      body
-    );
+    const result = await this.client.createConsole(id, body);
     this.isSubmitting = false;
     return result;
   }
 
   @action
-  async operation({ body, id, key }, sleepTime) {
+  update(id, body) {
+    return this.submitting(this.client.action(id, body));
+  }
+
+  @action
+  async operation({ body, id, key }) {
     // set timeout to delay to fresh
     let reqBody = body;
     if (!reqBody) {
       reqBody = {};
       reqBody[key] = null;
     }
-    return this.update({ id }, reqBody, sleepTime);
+    return this.update(id, reqBody);
   }
 
   @action
@@ -307,7 +293,7 @@ export class ServerStore extends Base {
     const body = {
       forceDelete: null,
     };
-    return request.post(`${this.getDetailUrl({ id })}/action`, body);
+    return this.client.action(id, body);
   }
 
   @action
@@ -422,14 +408,12 @@ export class ServerStore extends Base {
 
   @action
   async addInterface({ id, body }) {
-    const url = `${this.getListUrl()}/${id}/os-interface`;
-    return this.submitting(request.post(url, body));
+    return this.submitting(this.client.interfaces.create(id, body));
   }
 
   @action
   async fetchInterfaceList({ id }) {
-    const url = `${this.getListUrl()}/${id}/os-interface`;
-    const result = await request.get(url);
+    const result = await this.client.interfaces.list(id);
     this.interfaces = result.interfaceAttachments;
     return result.interfaceAttachments;
   }
@@ -437,29 +421,20 @@ export class ServerStore extends Base {
   @action
   async detachInterface({ id, ports }) {
     return this.submitting(
-      Promise.all(
-        ports.map((port) => {
-          const url = `${this.getListUrl()}/${id}/os-interface/${port}`;
-          return request.delete(url);
-        })
-      )
+      Promise.all(ports.map((port) => this.client.interfaces.delete(id, port)))
     );
   }
 
   @action
   async attachVolume({ id, body }) {
-    const url = `${this.getListUrl()}/${id}/os-volume_attachments`;
-    return this.submitting(request.post(url, body));
+    return this.submitting(this.client.volumeAttachments.create(id, body));
   }
 
   @action
   async detachVolume({ id, volumes }) {
     return this.submitting(
       Promise.all(
-        volumes.map((item) => {
-          const url = `${this.getListUrl()}/${id}/os-volume_attachments/${item}`;
-          return request.delete(url);
-        })
+        volumes.map((item) => this.client.volumeAttachments.delete(id, item))
       )
     );
   }
diff --git a/src/stores/nova/keypair.js b/src/stores/nova/keypair.js
index e7f6ff41..bc4c41ce 100644
--- a/src/stores/nova/keypair.js
+++ b/src/stores/nova/keypair.js
@@ -12,20 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { novaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class KeypairStore extends Base {
-  get module() {
-    return 'os-keypairs';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'keypair';
+  get client() {
+    return client.nova.keypairs;
   }
 
   get fetchListByLimit() {
diff --git a/src/stores/nova/server-group.js b/src/stores/nova/server-group.js
index 97d0cd2c..6f96b233 100644
--- a/src/stores/nova/server-group.js
+++ b/src/stores/nova/server-group.js
@@ -12,56 +12,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { novaBase } from 'utils/constants';
-import { get } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class ServerGroupStore extends Base {
-  get module() {
-    return 'os-server-groups';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'server_group';
+  get client() {
+    return client.nova.serverGroups;
   }
 
   get fetchListByLimit() {
     return true;
   }
 
-  async requestListByMarker(url, params, limit, marker) {
-    const newParams = {
-      ...params,
-      limit,
-    };
-    if (marker) {
-      newParams.offset = marker;
-    }
-    return request.get(url, newParams);
-  }
+  updateMarkerParams = (limit, marker) => ({
+    limit,
+    offset: marker,
+  });
 
-  async requestListAllByLimit(url, params, limit) {
-    let marker = '';
-    let hasNext = true;
-    let datas = [];
-    while (hasNext) {
-      // eslint-disable-next-line no-await-in-loop
-      const result = await this.requestListByMarker(url, params, limit, marker);
-      const data = this.listResponseKey
-        ? get(result, this.listResponseKey, [])
-        : result;
-      datas = [...datas, ...data];
-      if (data.length >= limit) {
-        marker = datas.length;
-      } else {
-        hasNext = false;
-      }
-    }
-    return datas;
+  parseMarker(datas, result, allDatas) {
+    return allDatas.length;
   }
 }
 
diff --git a/src/stores/nova/zone.js b/src/stores/nova/zone.js
index 3b56bfee..294af0fd 100644
--- a/src/stores/nova/zone.js
+++ b/src/stores/nova/zone.js
@@ -12,25 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { novaBase } from 'utils/constants';
+import { action } from 'mobx';
 import { isEmpty, isNull } from 'lodash';
+import client from 'client';
 import Base from '../base';
 
 export class AvailabilityZoneStore extends Base {
-  get module() {
-    return 'os-availability-zone';
-  }
-
-  get apiVersion() {
-    return novaBase();
-  }
-
-  get responseKey() {
-    return 'availabilityZoneInfo';
+  get client() {
+    return client.nova.zone;
   }
 
   get listResponseKey() {
-    return 'availabilityZoneInfo';
+    return this.responseKey;
+  }
+
+  get listWithDetail() {
+    return true;
   }
 
   get mapper() {
@@ -66,7 +63,12 @@ export class AvailabilityZoneStore extends Base {
     return datas;
   }
 
-  getListDetailUrl = () => `${this.apiVersion}/${this.module}/detail`;
+  @action
+  async fetchListWithoutDetail() {
+    const result = await this.client.list();
+    const datas = result[this.listResponseKey];
+    this.list.data = datas.map(this.mapper);
+  }
 }
 
 const globalAvailabilityZoneStore = new AvailabilityZoneStore();
diff --git a/src/stores/octavia/health-monitor.js b/src/stores/octavia/health-monitor.js
index 150681ea..3c059849 100644
--- a/src/stores/octavia/health-monitor.js
+++ b/src/stores/octavia/health-monitor.js
@@ -12,24 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { octaviaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class HealthMonitorStore extends Base {
-  get module() {
-    return 'lbaas/healthmonitors';
-  }
-
-  get apiVersion() {
-    return octaviaBase();
-  }
-
-  get responseKey() {
-    return 'healthmonitor';
-  }
-
-  get listResponseKey() {
-    return 'healthmonitors';
+  get client() {
+    return client.octavia.healthMonitors;
   }
 
   get listFilterByProject() {
diff --git a/src/stores/octavia/listener.js b/src/stores/octavia/listener.js
index 0a4b3f45..421ab28c 100644
--- a/src/stores/octavia/listener.js
+++ b/src/stores/octavia/listener.js
@@ -12,24 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { octaviaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class ListenerStore extends Base {
-  get module() {
-    return 'lbaas/listeners';
-  }
-
-  get apiVersion() {
-    return octaviaBase();
-  }
-
-  get responseKey() {
-    return 'listener';
-  }
-
-  get listResponseKey() {
-    return 'listeners';
+  get client() {
+    return client.octavia.listeners;
   }
 
   get listFilterByProject() {
@@ -59,9 +47,7 @@ export class ListenerStore extends Base {
     if (default_pool_id) {
       //  pool attach listener or loadbalancer ？
       try {
-        const res = await request.get(
-          `${this.apiVersion}/pools/${default_pool_id}`
-        );
+        const res = await client.octavia.pools.show(default_pool_id);
         item.default_pool = res.pool;
         return item;
       } catch (err) {
diff --git a/src/stores/octavia/loadbalancer.js b/src/stores/octavia/loadbalancer.js
index 400f6961..d1ddd0b4 100644
--- a/src/stores/octavia/loadbalancer.js
+++ b/src/stores/octavia/loadbalancer.js
@@ -12,48 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { octaviaBase } from 'utils/constants';
 import { action } from 'mobx';
 import { get } from 'lodash';
 import globalFloatingIpsStore from 'stores/neutron/floatingIp';
+import client from 'client';
 import Base from '../base';
 
 export class LbaasStore extends Base {
-  get module() {
-    return 'lbaas/loadbalancers';
-  }
-
-  get apiVersion() {
-    return octaviaBase();
-  }
-
-  get responseKey() {
-    return 'loadbalancer';
-  }
-
-  get listResponseKey() {
-    return 'loadbalancers';
+  get client() {
+    return client.octavia.loadbalancers;
   }
 
   get listFilterByProject() {
     return true;
   }
 
-  @action
-  update({ id }, newObject, sleepTime) {
-    return this.submitting(
-      request.put(
-        `${this.getDetailUrl({ id })}`,
-        {
-          [this.responseKey]: newObject,
-        },
-        null,
-        null,
-        sleepTime
-      )
-    );
-  }
-
   @action
   async fetchListByPageWithFip({
     limit = 10,
@@ -78,13 +51,8 @@ export class LbaasStore extends Base {
     if (marker) {
       params.marker = marker;
     }
-    const url =
-      this.getListPageUrl(filters) ||
-      this.getListDetailUrl(filters) ||
-      this.getListUrl(filters);
-    const newUrl = this.updateUrl(url, params);
     const newParams = this.paramsFuncPage(params, all_projects);
-    const result = await request.get(newUrl, newParams);
+    const result = await this.client.list(newParams);
     const allData = this.listResponseKey
       ? get(result, this.listResponseKey, [])
       : result;
@@ -93,7 +61,11 @@ export class LbaasStore extends Base {
     let newData = await this.listDidFetchProject(allDataNew, all_projects);
     const fipDetails = await Promise.all(
       newData.map((item) =>
-        globalFloatingIpsStore.fetchList({ fixed_ip_address: item.vip_address })
+        globalFloatingIpsStore.pureFetchList({
+          port_id: item.vip_port_id,
+          fixed_ip_address: item.vip_address,
+          all_projects,
+        })
       )
     );
     newData.forEach((item, index) => {
@@ -137,8 +109,8 @@ export class LbaasStore extends Base {
   @action
   async fetchDetailWithFip({ id, all_projects }) {
     this.isLoading = true;
-    const result = await request.get(
-      this.getDetailUrl({ id }),
+    const result = await this.client.show(
+      id,
       this.getDetailParams({ all_projects })
     );
     const originData = get(result, this.responseKey) || result;
@@ -161,15 +133,14 @@ export class LbaasStore extends Base {
   }
 
   async pureFetchDetail({ id }) {
-    const result = await request.get(this.getDetailUrl({ id }));
+    const result = await this.client.show(id);
     return result[this.responseKey];
   }
 
   @action
   delete = ({ id }) =>
-    this.submitting(
-      request.delete(this.getDetailUrl({ id }), { cascade: true })
-    );
+    // TODO: check params;
+    this.submitting(this.client.delete(id, { cascade: true }));
 }
 
 const globalLbaasStore = new LbaasStore();
diff --git a/src/stores/octavia/pool-member.js b/src/stores/octavia/pool-member.js
index b05f72bf..050e38f4 100644
--- a/src/stores/octavia/pool-member.js
+++ b/src/stores/octavia/pool-member.js
@@ -12,58 +12,41 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { octaviaBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class PoolMemberStore extends Base {
-  get module() {
-    return 'lbaas/pools';
-  }
-
-  get apiVersion() {
-    return octaviaBase();
+  get client() {
+    return client.octavia.pools.members;
   }
 
   get responseKey() {
     return 'member';
   }
 
-  get listResponseKey() {
-    return 'members';
-  }
-
   get listFilterByProject() {
     return true;
   }
 
-  updateUrl = (url, params) => {
-    const { pool_id } = params;
-    return `${url}/${pool_id}/members`;
-  };
+  listFetchByClient(params, originParams) {
+    const { pool_id } = originParams;
+    return this.client.list(pool_id);
+  }
 
   @action
   create({ default_pool_id, data }) {
     const body = {};
     body[this.listResponseKey] = data;
-    return this.submitting(
-      request.post(`${this.getListUrl()}/${default_pool_id}/members`, body)
-    );
+    return this.submitting(this.client.create(default_pool_id, body));
   }
 
-  // @action
-  // update({ default_pool_id, data }) {
-  //   const body = {};
-  //   body[this.listResponseKey] = data;
-  //   return this.submitting(request.put(`${this.getListUrl()}/${default_pool_id}/members`, body));
-  // }
-
   @action
   batchUpdate({ default_pool_id, data }) {
     const body = {};
     body[this.listResponseKey] = data;
     return this.submitting(
-      request.put(`${this.getListUrl()}/${default_pool_id}/members`, body)
+      client.octavia.pools.batchUpdateMembers(default_pool_id, body)
     );
   }
 
@@ -72,18 +55,13 @@ export class PoolMemberStore extends Base {
     const body = {};
     body[this.responseKey] = data;
     return this.submitting(
-      request.put(
-        `${this.getListUrl()}/${default_pool_id}/members/${member_id}`,
-        body
-      )
+      this.client.update(default_pool_id, member_id, body)
     );
   }
 
   @action
   delete = ({ id, default_pool_id }) =>
-    this.submitting(
-      request.delete(`${this.getListUrl()}/${default_pool_id}/members/${id}`)
-    );
+    this.submitting(this.client.delete(default_pool_id, id));
 }
 
 const globalPoolMemberStore = new PoolMemberStore();
diff --git a/src/stores/octavia/pool.js b/src/stores/octavia/pool.js
index 3224e86d..1f05cee3 100644
--- a/src/stores/octavia/pool.js
+++ b/src/stores/octavia/pool.js
@@ -12,24 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { octaviaBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class PoolStore extends Base {
-  get module() {
-    return 'lbaas/pools';
-  }
-
-  get apiVersion() {
-    return octaviaBase();
-  }
-
-  get responseKey() {
-    return 'pool';
-  }
-
-  get listResponseKey() {
-    return 'pools';
+  get client() {
+    return client.octavia.pools;
   }
 
   get listFilterByProject() {
diff --git a/src/stores/overview-admin.js b/src/stores/overview-admin.js
index 84e3bf1b..cca33d93 100644
--- a/src/stores/overview-admin.js
+++ b/src/stores/overview-admin.js
@@ -13,45 +13,13 @@
 // limitations under the License.
 
 import { extendObservable, action } from 'mobx';
-import {
-  keystoneBase,
-  novaBase,
-  neutronBase,
-  courierBase,
-  prometheusSidecarBase,
-  skylineBase,
-  glanceBase,
-} from 'utils/constants';
+import client from 'client';
 
 export default class OverviewStore {
   constructor() {
     this.reset(true);
   }
 
-  get keystone() {
-    return keystoneBase();
-  }
-
-  get nova() {
-    return novaBase();
-  }
-
-  get neutron() {
-    return neutronBase();
-  }
-
-  get courier() {
-    return courierBase();
-  }
-
-  get alert() {
-    return prometheusSidecarBase();
-  }
-
-  get glance() {
-    return glanceBase();
-  }
-
   @action
   reset = (init) => {
     const state = {
@@ -80,30 +48,16 @@ export default class OverviewStore {
     }
   };
 
-  @action
-  requestPromise = (url) => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const data = request.get(url);
-        resolve(data);
-      }, 100);
-    }).catch(() => {
-      return {};
-    });
-  };
-
   @action
   getProjectInfoData = async () => {
     this.projectInfoLoading = true;
     const promiseArray = [
-      `${this.keystone}/projects`,
-      `${this.keystone}/users`,
-      `${this.nova}/os-services?binary=nova-compute`,
+      client.keystone.projects.list(),
+      client.keystone.users.list(),
+      client.nova.services.list({ binary: 'nova-compute' }),
     ];
     const [projectsResult, userResult, hostResult] = await Promise.all(
-      promiseArray.map((promiseItem) => {
-        return this.requestPromise(promiseItem);
-      })
+      promiseArray
     );
     const { projects = [] } = projectsResult;
     const { users = [] } = userResult;
@@ -118,14 +72,38 @@ export default class OverviewStore {
   getVirtualResource = async () => {
     this.virtualResourceLoading = true;
     const promiseArray = [
-      `${skylineBase()}/extension/servers?all_projects=true`,
-      `${skylineBase()}/extension/servers?all_projects=true&status=ACTIVE`,
-      `${skylineBase()}/extension/servers?all_projects=true&status=ERROR`,
-      `${skylineBase()}/extension/servers?all_projects=true&status=SHUTOFF`,
-      `${skylineBase()}/extension/volumes?limit=10&all_projects=true`,
-      `${skylineBase()}/extension/volumes?limit=10&all_projects=true&status=in-use`,
-      `${skylineBase()}/extension/volumes?limit=10&all_projects=true&status=error`,
-      `${skylineBase()}/extension/volumes?limit=10&all_projects=true&status=available`,
+      client.skyline.extension.servers({ limit: 10, all_projects: true }),
+      client.skyline.extension.servers({
+        limit: 10,
+        all_projects: true,
+        status: 'ACTIVE',
+      }),
+      client.skyline.extension.servers({
+        limit: 10,
+        all_projects: true,
+        status: 'ERROR',
+      }),
+      client.skyline.extension.servers({
+        limit: 10,
+        all_projects: true,
+        status: 'SHUTOFF',
+      }),
+      client.skyline.extension.volumes({ limit: 10, all_projects: true }),
+      client.skyline.extension.volumes({
+        limit: 10,
+        all_projects: true,
+        status: 'in-use',
+      }),
+      client.skyline.extension.volumes({
+        limit: 10,
+        all_projects: true,
+        status: 'error',
+      }),
+      client.skyline.extension.volumes({
+        limit: 10,
+        all_projects: true,
+        status: 'available',
+      }),
     ];
     const [
       allServers,
@@ -136,25 +114,23 @@ export default class OverviewStore {
       attachVolumes,
       errorVolumes,
       availableVoloumes,
-    ] = await Promise.all(
-      promiseArray.map((promiseItem) => {
-        return this.requestPromise(promiseItem);
-      })
-    );
+    ] = await Promise.all(promiseArray);
+    const { count: allServersCount } = allServers;
+    const { count: activeServersCount } = activeServers;
+    const { count: errorServersCount } = errorServers;
+    const { count: shutoffServersCount } = shutoffServers;
     const { count: allVolumesCount } = allvolumes;
     const { count: attachVolumesCount } = attachVolumes;
     const { count: errorVolumesCount } = errorVolumes;
     const { count: availableVoloumesCount } = availableVoloumes;
     const serviceNum = {
-      all: allServers.servers.length,
-      active: activeServers.servers.length,
-      error: errorServers.servers.length,
-      shutoff: shutoffServers.servers.length,
+      all: allServersCount,
+      active: activeServersCount,
+      error: errorServersCount,
+      shutoff: shutoffServersCount,
       other:
-        allServers.servers.length -
-        (activeServers.servers.length +
-          errorServers.servers.length +
-          shutoffServers.servers.length),
+        allServersCount -
+        (activeServersCount + errorServersCount + shutoffServersCount),
     };
     const volumeNum = {
       all: allVolumesCount,
@@ -172,7 +148,7 @@ export default class OverviewStore {
   @action
   getComputeService = async () => {
     this.computeServiceLoading = true;
-    const servicesResult = await request.get(`${this.nova}/os-services`);
+    const servicesResult = await client.nova.services.list();
     const { services } = servicesResult;
     this.computeService = services;
     this.computeServiceLoading = false;
@@ -181,7 +157,7 @@ export default class OverviewStore {
   @action
   getNetworkService = async () => {
     this.networkServiceLoading = true;
-    const networkResult = await request.get(`${this.neutron}/agents`);
+    const networkResult = await client.neutron.agents.list();
     const { agents } = networkResult;
     this.networkService = agents;
     this.networkServiceLoading = false;
diff --git a/src/stores/project.js b/src/stores/project.js
index 47db4634..58cd7019 100644
--- a/src/stores/project.js
+++ b/src/stores/project.js
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { keystoneBase } from 'utils/constants';
 import { has } from 'lodash';
+import client from 'client';
 
 class ProjectMapStore {
   @observable
@@ -26,12 +26,13 @@ class ProjectMapStore {
       id,
     };
     if (!has(this.projectMap, id)) {
-      const result = await request.get(
-        `${keystoneBase()}/projects/${id}`,
-        {},
-        null,
-        () => Promise.resolve('error')
-      );
+      let result = 'error';
+      try {
+        result = await client.keystone.projects.show(id);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+      }
       this.projectMap[id] = result === 'error' ? '' : result.project.name;
     }
     project.name = this.projectMap[id] || '-';
diff --git a/src/stores/root.js b/src/stores/root.js
index 85266716..7132de66 100644
--- a/src/stores/root.js
+++ b/src/stores/root.js
@@ -15,37 +15,25 @@
 import { action, observable, extendObservable } from 'mobx';
 import { RouterStore } from 'mobx-react-router';
 import { parse } from 'qs';
+import client from 'client';
 import { getQueryString } from 'utils/index';
 import { getLocalTime } from 'utils/time';
 import { setLocalStorageItem } from 'utils/local-storage';
-import { skylineBase } from 'utils/constants';
-import { isEmpty, isArray } from 'lodash';
-import checkPolicy, { onlyAdminCanReadPolicy } from 'resources/policy';
+import { isEmpty, values } from 'lodash';
+import checkItemPolicy, { onlyAdminCanReadPolicy } from 'resources/policy';
 // global stores need to be clear data when change auth
-import globalFloatingIpsStore from './neutron/floatingIp';
-import globalImageStore from './glance/image';
-import globalServerStore from './nova/instance';
-import globalKeypairStore from './nova/keypair';
-import globalNetworkStore from './neutron/network';
-import globalPortForwardingStore from './neutron/port-forwarding';
-import globalQoSPolicyStore from './neutron/qos-policy';
-import globalRecycleBinStore from './skyline/recycle-server';
-import globalSecurityGroupStore from './neutron/security-group';
-import globalSecurityGroupRuleStore from './neutron/security-rule';
-import globalServerGroupStore from './nova/server-group';
-import globalSnapshotStore from './cinder/snapshot';
-import globalStaticRouteStore from './neutron/static-route';
-import globalSubnetStore from './neutron/subnet';
-import globalVirtualAdapterStore from './neutron/virtual-adapter';
-import globalVolumeStore from './cinder/volume';
-import globalComputeHostStore from './nova/compute-host';
-import globalHypervisorStore from './nova/hypervisor';
-import globalStackStore from './heat/stack';
+import allGlobalStores from './index';
 
 class RootStore {
   @observable
   user = null;
 
+  @observable
+  projectId = null;
+
+  @observable
+  projectName = null;
+
   @observable
   roles = [];
 
@@ -61,6 +49,9 @@ class RootStore {
   @observable
   hasAdminRole = false;
 
+  @observable
+  hasAdminPageRole = false;
+
   @observable
   openKeys = [];
 
@@ -76,16 +67,14 @@ class RootStore {
   @observable
   info = {};
 
-  @observable
-  objectStorageAuth = {};
-
   @observable
   version = '';
 
   @observable
   noticeCount = 0;
 
-  getUrl = (key) => `${skylineBase()}/${key}`;
+  @observable
+  enableBilling = false;
 
   // @observable
   // menu = renderMenu(i18n.t);
@@ -93,10 +82,13 @@ class RootStore {
   constructor() {
     this.routing = new RouterStore();
     this.routing.query = this.query;
-
     global.navigateTo = this.routing.push;
   }
 
+  get client() {
+    return client.skyline;
+  }
+
   register(name, store) {
     extendObservable(this, { [name]: store });
   }
@@ -111,10 +103,18 @@ class RootStore {
 
   @action
   async login(params) {
-    await request.post(this.getUrl('login'), params);
+    await this.client.login(params);
     return this.getUserProfileAndPolicy();
   }
 
+  checkAdminRole(roles) {
+    if (checkItemPolicy({ policy: onlyAdminCanReadPolicy })) {
+      return true;
+    }
+    const regex = /^[\w-_]*(system_admin|system_reader)$/;
+    return roles.some((role) => regex.test(role.name));
+  }
+
   @action
   updateUserRoles(user) {
     const { roles = [], base_roles = [], base_domains } = user || {};
@@ -122,14 +122,12 @@ class RootStore {
     this.baseRoles = base_roles;
     this.baseDomains = base_domains;
     // TODO: fix system/project admin/member/reader for W
-    this.hasAdminRole = checkPolicy(onlyAdminCanReadPolicy);
-    globals.user.hasAdminRole = this.hasAdminRole;
+    this.hasAdminRole = checkItemPolicy({ policy: onlyAdminCanReadPolicy });
+    this.hasAdminPageRole = this.checkAdminRole(roles);
   }
 
   @action
   updateUser(user, policies) {
-    globals.user = user;
-    globals.policies = policies;
     this.user = user;
     this.policies = policies;
     const {
@@ -138,34 +136,32 @@ class RootStore {
       endpoints = {},
       license = {},
       version = '',
+      project: { id: projectId, name: projectName } = {},
     } = user || {};
+    this.projectId = projectId;
+    this.projectName = projectName;
     this.license = license || {};
     this.version = version;
     this.updateUserRoles(user);
     const exp = getLocalTime(keystone_token_exp).valueOf();
     setLocalStorageItem('keystone_token', keystone_token, 0, exp);
     this.endpoints = endpoints;
+    this.checkBilling();
+  }
+
+  @action
+  checkBilling() {
+    const enableBilling =
+      this.checkLicense('billing') && this.checkEndpoint('billing_system');
+    this.enableBilling = enableBilling;
   }
 
   @action
   async getUserPolices() {
-    const result = await request.get(this.getUrl('policies'));
+    const result = await this.client.policies.list();
     this.policies = result.policies;
   }
 
-  @action
-  async checkPolicy(rules) {
-    const body = {
-      rules: isArray(rules) ? rules : [rules],
-    };
-    const result = await request.post(
-      this.getUrl(`${skylineBase()}/policies/check`),
-      body
-    );
-    const allowedFalse = result.policies.find((it) => !it.allowed);
-    return !allowedFalse;
-  }
-
   checkLicense(key) {
     if (!key) {
       return true;
@@ -187,38 +183,21 @@ class RootStore {
   @action
   async getUserProfileAndPolicy() {
     const [profile, policies] = await Promise.all([
-      request.get(this.getUrl('profile')),
-      request.get(this.getUrl('policies')),
+      this.client.profile(),
+      this.client.policies.list(),
     ]);
     this.updateUser(profile, policies.policies || []);
   }
 
-  @action
-  async getObjectStorageAuth() {
-    if (!isEmpty(this.objectStorageAuth)) {
-      return this.objectStorageAuth;
-    }
-    const url = this.getUrl('object_store/credentials');
-    const result = await request.post(url);
-    const { aws_access_key, aws_secret_key } = result;
-    const auth = {
-      'Aws-Access-Key': aws_access_key,
-      'Aws-Secret-Key': aws_secret_key,
-    };
-    this.objectStorageAuth = auth;
-    return auth;
-  }
-
   @action
   async logout() {
-    await request.post(this.getUrl('logout'));
+    await this.client.logout();
     this.clearData();
-    globals.user = null;
-    globals.policies = [];
     this.user = null;
     this.policies = [];
     this.roles = [];
     this.hasAdminRole = false;
+    this.hasAdminPageRole = false;
     this.license = null;
     this.version = '';
     this.noticeCount = 0;
@@ -245,15 +224,7 @@ class RootStore {
   @action
   async switchProject(projectId, domainId) {
     this.user = null;
-    this.objectStorageAuth = {};
-    const url = this.getUrl(
-      `switch_project/${projectId}?project_domain_id=${domainId}`
-    );
-    const body = {
-      project_id: projectId,
-      project_domain_id: domainId,
-    };
-    await request.post(url, body);
+    await this.client.switchProject(projectId, domainId);
     // this.updateUser(result);
     this.clearData();
     return this.getUserProfileAndPolicy();
@@ -266,8 +237,7 @@ class RootStore {
       return;
     }
     const { region } = data;
-    const url = this.getUrl('contrib/keystone_endpoints');
-    const res = await request.get(url);
+    const res = await this.client.contrib.keystoneEndpoints();
     const regionInfo = res.find((it) => it.region_name === region);
     const endpoints = {
       keystone: regionInfo.url,
@@ -291,27 +261,7 @@ class RootStore {
   }
 
   clearData() {
-    const stores = [
-      globalFloatingIpsStore,
-      globalImageStore,
-      globalServerStore,
-      globalKeypairStore,
-      globalNetworkStore,
-      globalPortForwardingStore,
-      globalQoSPolicyStore,
-      globalRecycleBinStore,
-      globalSecurityGroupStore,
-      globalSecurityGroupRuleStore,
-      globalServerGroupStore,
-      globalSnapshotStore,
-      globalStaticRouteStore,
-      globalSubnetStore,
-      globalVirtualAdapterStore,
-      globalVolumeStore,
-      globalComputeHostStore,
-      globalHypervisorStore,
-      globalStackStore,
-    ];
+    const stores = values(allGlobalStores);
     stores.forEach((store) => {
       store.clearData();
     });
diff --git a/src/stores/skyline/recycle-server.js b/src/stores/skyline/recycle-server.js
index 4db1508e..b0ae58ab 100644
--- a/src/stores/skyline/recycle-server.js
+++ b/src/stores/skyline/recycle-server.js
@@ -12,22 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { skylineBase } from 'utils/constants';
 import Base from '../base';
 
 export class RecycleBinStore extends Base {
-  get module() {
-    return 'extension/recycle_servers';
-  }
-
-  get apiVersion() {
-    return skylineBase();
-  }
-
   get responseKey() {
     return 'recycle_server';
   }
 
+  listFetchByClient(params) {
+    return this.skylineClient.extension.recycleServers(params);
+  }
+
   get mapper() {
     return (item) => ({
       ...item,
diff --git a/src/stores/skyline/server-group-instance.js b/src/stores/skyline/server-group-instance.js
index 97754481..74677128 100644
--- a/src/stores/skyline/server-group-instance.js
+++ b/src/stores/skyline/server-group-instance.js
@@ -12,34 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { skylineBase } from 'utils/constants';
 import { groupArray } from 'utils/index';
 import Base from '../base';
 
 export class ServerGroupInstanceStore extends Base {
-  get module() {
+  get listResponseKey() {
     return 'servers';
   }
 
-  get apiVersion() {
-    return skylineBase();
-  }
-
-  get responseKey() {
-    return 'server';
-  }
-
-  get mapper() {
-    return (item) => {
-      item.status = item.status.toLowerCase();
-      return item;
-    };
-  }
-
-  getListDetailUrl = () => `${skylineBase()}/extension/servers`;
-
-  getListPageUrl = () => `${skylineBase()}/extension/servers`;
-
   get paramsFunc() {
     return (params) => {
       const { all_projects, members, isServerGroup, ...rest } = params;
@@ -47,16 +27,16 @@ export class ServerGroupInstanceStore extends Base {
     };
   }
 
-  async requestList(url, params, filters) {
+  async requestList(params, filters) {
     const { members, isServerGroup, all_projects } = filters;
     if (members && isServerGroup && members.length === 0) {
       return [];
     }
-    const memberArrs = groupArray(members, 1);
+    const memberArrs = groupArray(members, 10);
     const results = await Promise.all(
       memberArrs.map((it) => {
         const newParams = { ...params, uuid: it, all_projects };
-        return request.get(url, newParams);
+        return this.skylineClient.extension.servers(newParams);
       })
     );
     const servers = [];
diff --git a/src/stores/skyline/setting.js b/src/stores/skyline/setting.js
index 8dd1f1e3..f02df2db 100644
--- a/src/stores/skyline/setting.js
+++ b/src/stores/skyline/setting.js
@@ -12,32 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { skylineBase } from 'utils/constants';
 import { action } from 'mobx';
+import client from 'client';
 import Base from '../base';
 
 export class SettingStore extends Base {
-  get module() {
-    return 'setting';
+  get client() {
+    return client.skyline.setting;
   }
 
-  get apiVersion() {
-    return skylineBase();
-  }
-
-  get responseKey() {
-    return 'setting';
-  }
-
-  getListDetailUrl = () => `${this.getListUrl()}s`;
-
   async listDidFetch(items) {
     return items.filter((it) => !it.hidden);
   }
 
   @action
   update(body) {
-    return this.submitting(request.put(this.getListUrl(), body));
+    return this.submitting(this.client.update(null, body));
   }
 }
 
diff --git a/src/stores/skyline/skyline.js b/src/stores/skyline/skyline.js
index 9cdc0f6f..32fc3d48 100644
--- a/src/stores/skyline/skyline.js
+++ b/src/stores/skyline/skyline.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { action, observable } from 'mobx';
-import { skylineBase } from 'utils/constants';
+import client from 'client';
 import Base from '../base';
 
 export class SkylineStore extends Base {
@@ -23,25 +23,19 @@ export class SkylineStore extends Base {
   @observable
   regions = [];
 
-  get module() {
-    return 'contrib';
-  }
-
-  get apiVersion() {
-    return skylineBase();
+  get client() {
+    return client.skyline.contrib;
   }
 
   @action
   async fetchDomainList() {
-    const url = `${this.getListUrl()}/domains`;
-    const result = await request.get(url);
+    const result = await this.client.domains();
     this.domains = result;
   }
 
   @action
   async fetchRegionList() {
-    const url = `${this.getListUrl()}/regions`;
-    const result = await request.get(url);
+    const result = await this.client.regions();
     this.regions = result;
   }
 }
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 460a8320..e6e8f061 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -12,9 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import globalRootStore from 'stores/root';
 import { shuffle } from 'lodash';
-import { toJS } from 'mobx';
 import i18n from 'core/i18n';
 
 const { t } = i18n;
@@ -119,111 +117,6 @@ export const SIZE_VALUE = {
   tb,
 };
 
-export const groupNameVersionMap = {
-  core: 'v1',
-  system: 'v1',
-};
-
-const endpointVersionMap = {
-  keystone: 'v3',
-  nova: 'v2.1',
-  cinder: 'v3',
-  glance: 'v2',
-  neutron: 'v2.0',
-  ironic: 'v1',
-  ironicInspector: 'v1',
-  heat: 'v1',
-  swift: 'v1',
-  octavia: 'v2',
-  courier: 'v1',
-  prometheus: 'api/v1',
-  prometheus_sidecar: 'api/v1',
-  gocron: 'api',
-  panko: 'v2',
-};
-
-const endpointsDefault = {
-  ironic: '/api/openstack/ironic',
-  ironicInspector: '/api/openstack/ironic-inspector',
-  swift: '/api/openstack/swift/swift',
-  octavia: '/api/openstack/octavia',
-};
-
-export const getOpenstackEndpoint = (key) => {
-  // const endpoints = getLocalStorageItem('endpoints') || {};
-  const endpoints = globalRootStore.endpoints || {};
-  const version = endpointVersionMap[key];
-  const endpoint = endpoints[key] || endpointsDefault[key] || '';
-  return version ? `${endpoint}/${version}` : endpoint;
-};
-
-export const getOriginEndpoint = (key) => {
-  const endpoints = toJS((globalRootStore && globalRootStore.endpoints) || {});
-  return endpoints[key];
-};
-
-export const skylineBase = () => '/api/openstack/skyline/api/v1';
-export const keystoneBase = () => getOpenstackEndpoint('keystone');
-export const novaBase = () => getOpenstackEndpoint('nova');
-export const cinderBase = () => getOpenstackEndpoint('cinder');
-export const glanceBase = () => getOpenstackEndpoint('glance');
-export const neutronBase = () => getOpenstackEndpoint('neutron');
-export const ironicBase = () => getOpenstackEndpoint('ironic');
-export const ironicInspectorBase = () =>
-  getOpenstackEndpoint('ironicInspector');
-export const placementBase = () => getOpenstackEndpoint('placement');
-export const heatBase = () => getOpenstackEndpoint('heat');
-export const swiftBase = () => getOpenstackEndpoint('swift');
-export const octaviaBase = () => getOpenstackEndpoint('octavia');
-export const alertmanagerBase = () => getOpenstackEndpoint('alertmanager');
-export const prometheusBase = () => getOpenstackEndpoint('prometheus');
-export const prometheusSidecarBase = () =>
-  getOpenstackEndpoint('prometheus_sidecar');
-export const courierBase = () => getOpenstackEndpoint('courier');
-export const gocronBase = () => getOpenstackEndpoint('gocron');
-export const pankoBase = () => getOpenstackEndpoint('panko');
-export const s3Base = () => getOpenstackEndpoint('s3');
-
-export const ironicOriginEndpoint = () => getOriginEndpoint('ironic');
-export const s3OriginEndpoint = () => getOriginEndpoint('s3');
-export const firewallEndpoint = () => getOriginEndpoint('neutron_firewall');
-export const vpnEndpoint = () => getOriginEndpoint('neutron_vpn');
-export const lbEndpoint = () => getOriginEndpoint('octavia');
-
-export const apiVersionMaps = {
-  nova: {
-    key: 'Openstack-Api-Version',
-    value: 'compute 2.79',
-  },
-  placement: {
-    key: 'Openstack-Api-Version',
-    value: 'placement 1.28',
-  },
-  cinder: {
-    key: 'Openstack-Api-Version',
-    value: 'volume 3.59',
-  },
-  ironic: {
-    key: 'X-Openstack-Ironic-Api-Version',
-    value: '1.58',
-  },
-  'ironic-inspect': {
-    key: 'X-OpenStack-Ironic-Inspector-API-Version',
-    value: '1.15',
-  },
-};
-
-export const getOpenstackApiVersion = (url) => {
-  const key = Object.keys(apiVersionMaps).find((it) => url.indexOf(it) > -1);
-  if (!key) {
-    return null;
-  }
-  return apiVersionMaps[key];
-};
-
-export const getK8sTypeEndpoint = (groupName, baseUrl) =>
-  `${baseUrl}/${groupName}/${groupNameVersionMap[groupName]}`;
-
 export const emptyActionConfig = {
   rowActions: {},
   batchActions: [],
diff --git a/src/utils/request.js b/src/utils/request.js
deleted file mode 100644
index 5912b8ba..00000000
--- a/src/utils/request.js
+++ /dev/null
@@ -1,366 +0,0 @@
-// Copyright 2021 99cloud
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { getLocalStorageItem } from 'utils/local-storage';
-import { getOpenstackApiVersion } from 'utils/constants';
-import { isEmpty, get, merge } from 'lodash';
-
-const qs = require('qs');
-const cookie = require('./cookie').default;
-
-const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD'];
-
-const sleep = (msTime, data) =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(data);
-    }, msTime);
-  });
-
-/**
- * This is our overly complicated isomorphic "request",
- * methods: get, post, put, patch, delete
- * @param url
- * @param params
- * @param options
- * @param reject
- * @returns {Function}
- */
-module.exports = methods.reduce(
-  (prev, method) => ({
-    ...prev,
-    [method.toLowerCase()]: (url, params = {}, options, reject, sleepTime) =>
-      buildRequest({ method, url, params, options, reject, sleepTime }),
-  }),
-  {
-    defaults: buildRequest,
-    watch: watchResource,
-    toQueryString,
-  }
-);
-
-/**
- * Build and execute remote request
- * @param method
- * @param url
- * @param params
- * @param config
- */
-function buildRequest({
-  method = 'GET',
-  url,
-  params = {},
-  options,
-  reject,
-  sleepTime,
-  handler,
-}) {
-  let requestURL = createURL(url);
-  const request = merge(
-    {
-      method,
-      mode: 'cors',
-      credentials: 'include',
-      headers: {
-        'content-type': 'application/json',
-        'X-Auth-Token': getLocalStorageItem('keystone_token') || '',
-      },
-    },
-    options
-  );
-  const apiVersionMap = getOpenstackApiVersion(url);
-  if (apiVersionMap) {
-    request.headers[apiVersionMap.key] = apiVersionMap.value;
-  }
-  if (get(options, 'headers')) {
-    request.headers = {
-      ...request.headers,
-      ...options.headers,
-    };
-  }
-
-  if (get(options, 'headers.content-type')) {
-    request.headers['content-type'] = options.headers['content-type'];
-  }
-  const isForm =
-    get(options, 'headers[content-type]', '').indexOf(
-      'application/x-www-form-urlencoded'
-    ) !== -1;
-
-  const isFile =
-    get(options, 'headers.content-type', '').indexOf(
-      'application/octet-stream'
-    ) !== -1;
-  if (method === 'GET' || method === 'HEAD') {
-    requestURL += !isEmpty(params) ? toQueryString(omitNil(params)) : '';
-  } else if (isFile) {
-    request.body = params;
-  } else if (isForm) {
-    request.body = qs.stringify(params);
-  } else if (options && options.isFormData) {
-    request.body = params;
-    delete request.headers['content-type'];
-  } else {
-    request.body = JSON.stringify(params);
-    if (method === 'DELETE' && isEmpty(params)) {
-      delete request.body;
-    }
-  }
-
-  let responseHandler = handleResponse;
-
-  if (typeof handler === 'function') {
-    responseHandler = handler;
-  }
-
-  if (
-    cookie('currentUser') &&
-    globals.user &&
-    globals.user.username !== cookie('currentUser')
-  ) {
-    window.location.href = '/';
-    return;
-  }
-  return fetch(requestURL, request).then((resp) =>
-    responseHandler(resp, reject, request, sleepTime)
-  );
-}
-
-function watchResource(url, params = {}, callback) {
-  const xhr = new XMLHttpRequest();
-
-  xhr.open('GET', `${url}${toQueryString(params)}`, true);
-
-  xhr.onreadystatechange = () => {
-    if (xhr.readyState >= 3 && xhr.status === 200) {
-      callback(xhr.responseText);
-    }
-  };
-
-  xhr.send();
-
-  return xhr;
-}
-
-/**
- * Prepend host of API server
- * @param path
- * @returns {String}
- * @private
- */
-function createURL(path) {
-  const { API } = process.env;
-  if (API === 'mock' || API === 'dev') {
-    if (path.indexOf('mock') >= 0) {
-      return '/';
-    }
-  }
-  if (path.startsWith('http')) {
-    return path;
-  }
-  return `${path[0] === '/' ? '' : '/'}${path.trimLeft('/')}`;
-}
-
-/**
- * Decide what to do with the response
- * @param response
- * @returns {Promise}
- * @private
- */
-function handleResponse(response, reject, request, sleepTime) {
-  if (request.method === 'HEAD') {
-    return {
-      code: response.status,
-    };
-  }
-  const redirect = response.redirected;
-  // todo: remove this when login api updated
-  const isLogin = response.url.indexOf('/auth/login') > 0;
-  if (redirect && !isLogin) {
-    window.location.replace(response.url);
-    return Promise.reject();
-  }
-
-  const contentType = response.headers.get('content-type');
-  const disposition = response.headers.get('content-disposition') || '';
-
-  if (response.status === 202 || response.status === 204) {
-    if (Number(response.headers.get('content-length', 0)) <= 4) {
-      return sleepTime ? sleep(sleepTime) : Promise.resolve();
-    }
-    if (contentType && contentType.includes('json')) {
-      return response.json();
-    }
-    return sleepTime ? sleep(sleepTime) : Promise.resolve();
-  }
-  if (response.redirected) {
-    window.location.href = response.url;
-    return Promise.resolve();
-  }
-
-  if (contentType && contentType.includes('json')) {
-    // console.log('handleResponse', response, reject);
-    return response
-      .json()
-      .then((data) => {
-        if (response.status === 401) {
-          // eslint-disable-next-line no-console
-          console.warn('Unauthorized', response, response.ok);
-        }
-
-        if (response.ok && response.status >= 200 && response.status < 400) {
-          return sleepTime ? sleep(sleepTime, data) : data;
-        }
-
-        const error = formatError(response, data);
-
-        if (typeof reject === 'function') {
-          return reject(error, response);
-        }
-        if (window.onunhandledrejection) {
-          window.onunhandledrejection(error);
-        }
-
-        return Promise.reject(error);
-      })
-      .catch((err) => {
-        // eslint-disable-next-line no-console
-        console.log(err);
-        if (
-          request.method === 'DELETE' &&
-          response.status >= 200 &&
-          response.status < 400
-        ) {
-          return Promise.resolve();
-        }
-        return Promise.reject(err);
-      });
-  }
-
-  if (response.status === 200) {
-    if (disposition.indexOf('attachment') >= 0) {
-      return response;
-    }
-  }
-
-  if (contentType && contentType.includes('image')) {
-    return response.blob().then((data) => {
-      if (response.status === 401) {
-        // eslint-disable-next-line no-console
-        console.warn('Unauthorized', response, response.ok);
-      }
-
-      if (response.ok && response.status >= 200 && response.status < 400) {
-        return data;
-      }
-
-      const error = formatError(response, data);
-
-      if (typeof reject === 'function') {
-        return reject(error, response);
-      }
-      if (window.onunhandledrejection) {
-        window.onunhandledrejection(error);
-      }
-
-      return Promise.reject(error);
-    });
-  }
-
-  if (response.status === 200) {
-    return response.text();
-  }
-
-  return response.text().then((text) => {
-    const error = {
-      status: response.status,
-      reason: response.statusText,
-      message: text,
-    };
-
-    if (typeof reject === 'function') {
-      return reject(response, error);
-    }
-    if (window.onunhandledrejection) {
-      window.onunhandledrejection(error);
-    }
-
-    return Promise.reject(error);
-  });
-}
-
-/**
- * Transform an JSON object to a query string
- * @param params
- * @returns {string}
- */
-function toQueryString(params) {
-  return `?${Object.keys(params)
-    .map((k) => {
-      const name = encodeURIComponent(k);
-      if (Array.isArray(params[k])) {
-        return params[k]
-          .map((val) => `${name}=${encodeURIComponent(val)}`)
-          .join('&');
-      }
-      if (k === 'q') {
-        return `${name}=${params[k]}`;
-      }
-      return `${name}=${encodeURIComponent(params[k])}`;
-    })
-    .join('&')}`;
-}
-
-function omitNil(obj) {
-  if (typeof obj !== 'object') return obj;
-  return Object.keys(obj).reduce((acc, v) => {
-    if (obj[v] !== undefined) acc[v] = obj[v];
-    return acc;
-  }, {});
-}
-
-function formatError(response, data) {
-  // eslint-disable-next-line no-console
-  console.log('formatError-response', response);
-  // eslint-disable-next-line no-console
-  console.log('formatError-data', data);
-  if (data.code < 100) {
-    data.code = 500;
-  }
-
-  const result = {
-    status: response.status,
-    reason: response.statusText,
-    data,
-  };
-
-  if (typeof data.code === 'number') {
-    result.status = data.code;
-  }
-
-  if (data.status) {
-    result.status = data.status;
-  }
-
-  if (data.reason || data.error) {
-    result.reason = data.reason || data.error;
-  }
-
-  result.message = data.message || data.Error || JSON.stringify(data.details);
-
-  if (response.status === 404 && response.url.indexOf('/imagespace') !== -1) {
-    return {};
-  }
-  return result;
-}