fix: Fetch data entangle with cluster and runtime (#329)

Refactor promise-polyfill

Author: sunnywx

lib/polyfills.js

@@ -1,5 +1,4 @@
-import 'lib/polyfills';
-
+import 'promise-polyfill/src/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'mobx-react';

src/index.js

@@ -27,13 +27,14 @@ import styles from './index.scss';
 export default class Clusters extends Component {
   static async onEnter({ clusterStore, appStore, runtimeStore }) {
     await clusterStore.fetchAll();
-    await clusterStore.clusterStatistics();
+    await clusterStore.fetchStatistics();
     await appStore.fetchApps({
       status: ['active', 'deleted']
     });
     await runtimeStore.fetchAll({
       status: ['active', 'deleted'],
-      limit: 99
+      noLimit: true,
+      simpleQuery: true
     });
   }
 
@@ -91,6 +92,7 @@ export default class Clusters extends Component {
       />
     ) : null;
   };
+
   renderHandleMenu = item => {
     const { t } = this.props;
     const { showOperateCluster } = this.props.clusterStore;
@@ -198,7 +200,7 @@ export default class Clusters extends Component {
     const { clusterStore, t } = this.props;
     const { summaryInfo, clusters, isLoading } = clusterStore;
 
-    const { runtimes } = this.props.runtimeStore;
+    const runtimes = this.props.runtimeStore.allRuntimes;
     const { apps } = this.props.appStore;
 
     const columns = [

src/pages/Admin/Clusters/index.jsx

@@ -24,7 +24,7 @@ import styles from './index.scss';
 export default class Runtimes extends Component {
   static async onEnter({ runtimeStore, clusterStore }) {
     await runtimeStore.fetchAll();
-    await runtimeStore.runtimeStatistics();
+    await runtimeStore.fetchStatistics();
     await clusterStore.fetchAll({
       noLimit: true
     });
@@ -37,6 +37,11 @@ export default class Runtimes extends Component {
     clusterStore.loadPageInit();
   }
 
+  componentWillMount() {
+    const { runtimeStore } = this.props;
+    runtimeStore.runtimes = runtimeStore.runtimes.filter(rt => rt.status !== 'deleted');
+  }
+
   onChangeSort = (params = {}) => {
     const { runtimeStore } = this.props;
     const order = params.reverse ? 'asc' : 'desc';

src/pages/Admin/Runtimes/index.jsx

@@ -96,7 +96,7 @@ export default class ClusterStore extends Store {
   };
 
   @action
-  clusterStatistics = async () => {
+  fetchStatistics = async () => {
     //this.isLoading = true;
     const result = await this.request.get('clusters/statistics');
     this.summaryInfo = {

src/stores/cluster/index.js

@@ -3,8 +3,10 @@ import Store from '../Store';
 import { assign, get } from 'lodash';
 import _ from 'lodash';
 
+const defaultStatus = ['active'];
+
 export default class RuntimeStore extends Store {
-  @observable runtimes = [];
+  @observable runtimes = []; // current runtimes
   @observable runtimeDetail = {};
   @observable summaryInfo = {}; // replace original statistic
   @observable statistics = {};
@@ -15,7 +17,6 @@ export default class RuntimeStore extends Store {
 
   @observable currentPage = 1; //runtime table query params
   @observable searchWord = '';
-  defaultStatus = ['active'];
   @observable selectStatus = '';
   @observable userId = '';
 
@@ -29,6 +30,8 @@ export default class RuntimeStore extends Store {
     action: '' // delete
   };
 
+  @observable allRuntimes = [];
+
   @action.bound
   showModal = () => {
     this.isModalOpen = true;
@@ -45,7 +48,7 @@ export default class RuntimeStore extends Store {
       sort_key: 'status_time',
       limit: this.pageSize,
       offset: (this.currentPage - 1) * this.pageSize,
-      status: this.selectStatus ? this.selectStatus : this.defaultStatus
+      status: this.selectStatus ? this.selectStatus : defaultStatus
     };
 
     if (params.noLimit) {
@@ -62,14 +65,25 @@ export default class RuntimeStore extends Store {
     }
 
     this.isLoading = true;
-    const result = await this.request.get('runtimes', assign(defaultParams, params));
-    this.runtimes = get(result, 'runtime_set', []);
-    this.totalCount = get(result, 'total_count', 0);
+    let finalParams = assign(defaultParams, params);
+
+    if (!params.simpleQuery) {
+      let result = await this.request.get('runtimes', finalParams);
+      this.runtimes = get(result, 'runtime_set', []);
+      this.totalCount = get(result, 'total_count', 0);
+    } else {
+      // simple query: just fetch runtime data used in other pages
+      // no need to set totalCount
+      delete finalParams.simpleQuery;
+      let result = await this.request.get('runtimes', finalParams);
+      this.allRuntimes = get(result, 'runtime_set', []);
+    }
+
     this.isLoading = false;
   };
 
   @action
-  runtimeStatistics = async () => {
+  fetchStatistics = async () => {
     //this.isLoading = true;
     const result = await this.request.get('runtimes/statistics');
     this.summaryInfo = {