From 7fc8cdecaf60dbc178ba636da8920b6408d5fddf Mon Sep 17 00:00:00 2001 From: "sunny.w" Date: Thu, 6 Sep 2018 13:13:54 +0800 Subject: [PATCH] fix: Fetch data entangle with cluster and runtime (#329) Refactor promise-polyfill --- lib/polyfills.js | 4 ---- src/index.js | 3 +-- src/pages/Admin/Clusters/index.jsx | 8 +++++--- src/pages/Admin/Runtimes/index.jsx | 7 ++++++- src/stores/cluster/index.js | 2 +- src/stores/runtime/index.js | 28 +++++++++++++++++++++------- 6 files changed, 34 insertions(+), 18 deletions(-) delete mode 100644 lib/polyfills.js diff --git a/lib/polyfills.js b/lib/polyfills.js deleted file mode 100644 index 6547ac1b..00000000 --- a/lib/polyfills.js +++ /dev/null @@ -1,4 +0,0 @@ -// For IE 11 -if (typeof window !== 'undefined' && !window.Promise) { - window.Promise = require('promise-polyfill'); -} diff --git a/src/index.js b/src/index.js index e2fb269b..d835dfd9 100644 --- a/src/index.js +++ b/src/index.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'; diff --git a/src/pages/Admin/Clusters/index.jsx b/src/pages/Admin/Clusters/index.jsx index 909ac4dc..5f04930a 100644 --- a/src/pages/Admin/Clusters/index.jsx +++ b/src/pages/Admin/Clusters/index.jsx @@ -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 = [ diff --git a/src/pages/Admin/Runtimes/index.jsx b/src/pages/Admin/Runtimes/index.jsx index 621aac11..b1bed168 100644 --- a/src/pages/Admin/Runtimes/index.jsx +++ b/src/pages/Admin/Runtimes/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'; diff --git a/src/stores/cluster/index.js b/src/stores/cluster/index.js index f7164ff5..88e86977 100644 --- a/src/stores/cluster/index.js +++ b/src/stores/cluster/index.js @@ -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 = { diff --git a/src/stores/runtime/index.js b/src/stores/runtime/index.js index 8fc9adda..a72e938b 100644 --- a/src/stores/runtime/index.js +++ b/src/stores/runtime/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 = {