From 8e535e750a34d336f27e8f5a7c2e0aaacdb32c50 Mon Sep 17 00:00:00 2001 From: wangxi Date: Tue, 20 Nov 2018 18:20:32 +0800 Subject: [PATCH] fix: Cluster detail loading when runtime type not resolved (#546) Webpack dev build add notifier Add LazyLoad component --- package.json | 3 +- src/App.jsx | 3 +- src/components/LazyLoad/index.jsx | 7 ++ src/components/Loading/index.jsx | 4 -- .../Dashboard/Clusters/Detail/Helm/index.jsx | 3 +- .../Clusters/Detail/VMbase/index.jsx | 4 +- src/pages/Dashboard/Clusters/Detail/index.jsx | 35 +++------- src/stores/cluster/detail.js | 66 +++++++------------ webpack.dev.js | 6 ++ yarn.lock | 11 +++- 10 files changed, 62 insertions(+), 80 deletions(-) create mode 100644 src/components/LazyLoad/index.jsx diff --git a/package.json b/package.json index db1a41e8..b39e8d96 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,8 @@ "webpack": "4.17.1", "webpack-bundle-analyzer": "^2.11.1", "webpack-cli": "3.1.0", - "webpack-node-externals": "^1.7.2" + "webpack-node-externals": "^1.7.2", + "webpack-notifier": "^1.7.0" }, "engines": { "node": ">= 7.6.0" diff --git a/src/App.jsx b/src/App.jsx index 54a88443..8348d586 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,7 @@ import { withRouter } from 'react-router'; import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import { I18nextProvider } from 'react-i18next'; +import LazyLoad from 'components/LazyLoad'; import Header from 'components/Header'; import Footer from 'components/Footer'; @@ -13,8 +14,6 @@ import WrapComp from './routes/wrapper'; import './scss/index.scss'; -const LazyLoad = ({ children }) => Loading..}>{children}; - class App extends React.Component { static propTypes = { routes: PropTypes.array.isRequired, diff --git a/src/components/LazyLoad/index.jsx b/src/components/LazyLoad/index.jsx new file mode 100644 index 00000000..42de8f1a --- /dev/null +++ b/src/components/LazyLoad/index.jsx @@ -0,0 +1,7 @@ +import React, { Suspense } from 'react'; + +import Loading from 'components/Loading'; + +const LazyLoad = ({ children }) => }>{children}; + +export default LazyLoad; diff --git a/src/components/Loading/index.jsx b/src/components/Loading/index.jsx index 92134dfb..ffe24f29 100644 --- a/src/components/Loading/index.jsx +++ b/src/components/Loading/index.jsx @@ -26,14 +26,10 @@ export default class Loading extends Component {
- {children} ); } - if (!children) { - return null; - } return {children}; } } diff --git a/src/pages/Dashboard/Clusters/Detail/Helm/index.jsx b/src/pages/Dashboard/Clusters/Detail/Helm/index.jsx index ef1b91e7..19cb87ac 100644 --- a/src/pages/Dashboard/Clusters/Detail/Helm/index.jsx +++ b/src/pages/Dashboard/Clusters/Detail/Helm/index.jsx @@ -68,6 +68,7 @@ export default class HelmCluster extends React.Component { renderTable() { const { clusterDetailStore, t } = this.props; + const { isLoading } = clusterDetailStore; const clusterNodes = clusterDetailStore.helmClusterNodes.toJSON(); const { @@ -130,7 +131,7 @@ export default class HelmCluster extends React.Component { props.expandedRowClassName = () => styles.extendedRow; props.className = styles.table; - return ; + return
; } renderAdditionInfo() { diff --git a/src/pages/Dashboard/Clusters/Detail/VMbase/index.jsx b/src/pages/Dashboard/Clusters/Detail/VMbase/index.jsx index 2d67143a..ceb46d96 100644 --- a/src/pages/Dashboard/Clusters/Detail/VMbase/index.jsx +++ b/src/pages/Dashboard/Clusters/Detail/VMbase/index.jsx @@ -147,11 +147,13 @@ export default class VMbasedCluster extends React.Component { onChangeSelectNodes, changePaginationNode, onChangeNodeStatus, - totalNodeCount + totalNodeCount, + isLoading } = store; return (
Test>Clusters>${cluster.name}` @@ -390,7 +373,7 @@ export default class ClusterDetail extends Component {
- + {isK8s ? : }
diff --git a/src/stores/cluster/detail.js b/src/stores/cluster/detail.js index 33c446f6..c1342755 100644 --- a/src/stores/cluster/detail.js +++ b/src/stores/cluster/detail.js @@ -82,8 +82,7 @@ export default class ClusterDetailStore extends Store { this.totalNodeCount = _.get(this.helmClusterNodes, 'length', 0); } else { const result = await this.request.get(`clusters/nodes`, params); - const nodes = _.get(result, 'cluster_node_set', []); - this.clusterNodes = nodes; + this.clusterNodes = _.get(result, 'cluster_node_set', []); this.totalNodeCount = _.get(result, 'total_count', 0); } @@ -108,7 +107,9 @@ export default class ClusterDetailStore extends Store { return false; } - if (!roleItem.role.includes(`-${type}`)) return false; + if (!roleItem.role.includes(`-${type}`)) { + return false; + } const nodes = []; const status = { @@ -116,7 +117,7 @@ export default class ClusterDetailStore extends Store { maxNumber: 0 }; - if (cluster_node_set) { + if (Array.isArray(cluster_node_set)) { cluster_node_set.forEach(nodeItem => { if (nodeItem.role !== roleItem.role) { return; @@ -128,6 +129,7 @@ export default class ClusterDetailStore extends Store { } nodes.push(nodeItem); + const nodeStatus = _.get(status, nodeItem.status); let number = 0; if (!nodeStatus) { @@ -135,7 +137,9 @@ export default class ClusterDetailStore extends Store { } else { number = nodeStatus + 1; } + status[nodeItem.status] = number; + if (status.maxStatus === '') { status.maxStatus = nodeItem.status; status.maxNumber = number; @@ -145,6 +149,7 @@ export default class ClusterDetailStore extends Store { } }); } + roleItem.nodes = nodes; roleItem.name = _.get(roleItem.role.split(`-${type}`), '[0]'); roleItem.status = status.maxStatus; @@ -218,9 +223,8 @@ export default class ClusterDetailStore extends Store { @action json2Yaml = str => { let yamlStr = YAML.stringify(JSON.parse(str || '{}')); - yamlStr = yamlStr.replace(/^---\n/, ''); - yamlStr = yamlStr.replace(/ (.*)/g, '$1'); - return yamlStr; + // fixme : some helm app with leading strings will cause deploy error + return yamlStr.replace(/^---\n/, '').replace(/\s+(.*)/g, '$1'); }; @action @@ -233,38 +237,6 @@ export default class ClusterDetailStore extends Store { } }; - // @action - // onSearchNode = (isKubernetes, clusterStore) => async word => { - // clusterStore.searchNode = word; - // this.currentNodePage = 1; - // - // const { cluster } = clusterStore; - // const { cluster_id } = cluster; - // if (!isKubernetes) { - // await clusterStore.fetchNodes({ cluster_id, search_word: word }); - // } else { - // await clusterStore.fetch(cluster_id); - // this.fetchHelmNodes({ - // clusterStore, - // type: this.nodeType, - // searchWord: word - // }); - // } - // }; - // - // @action - // onClearNode = (isKubernetes, clusterStore) => async () => { - // await this.onSearchNode(isKubernetes, clusterStore)(''); - // }; - // - // @action - // onRefreshNode = (isKubernetes, clusterStore) => async () => { - // clusterStore.searchNode = ''; - // await this.onSearchNode(isKubernetes, clusterStore)(''); - // }; - - /// - @action onChangeSelectNodes = (rowKeys, rows) => { this.selectedNodeKeys = rowKeys; @@ -291,11 +263,17 @@ export default class ClusterDetailStore extends Store { @action onRefreshNode = async () => { - const { isHelm, cluster } = this; - if (isHelm) { - await this.fetch(cluster.cluster_id); + const { cluster_id } = this.cluster; + + this.isLoading = true; + + if (this.isHelm) { + await this.fetch(cluster_id); + } else { + await this.fetchNodes({ cluster_id }); } - await this.fetchNodes({ cluster_id: this.cluster.cluster_id }); + + this.isLoading = false; }; @action @@ -323,6 +301,6 @@ export default class ClusterDetailStore extends Store { this.cluster = {}; this.helmClusterNodes = []; - this.clusterNodes = [] + this.clusterNodes = []; }; } diff --git a/webpack.dev.js b/webpack.dev.js index 43b698a5..902c844f 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,5 +1,6 @@ const { resolve } = require('path'); const webpack = require('webpack'); +const webpackNotifier = require('webpack-notifier'); const postCssOptions = require('./config/postcss.options'); module.exports = { @@ -70,6 +71,11 @@ module.exports = { }, plugins: [ // new webpack.HotModuleReplacementPlugin(), + new webpackNotifier({ + title: `Openpitrix dashboard`, + alwaysNotify: true, + excludeWarnings: true + }), new webpack.DefinePlugin({ 'process.env.BROWSER': true, 'process.env.NODE_ENV': JSON.stringify('development') diff --git a/yarn.lock b/yarn.lock index c02be787..360ebf55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6859,7 +6859,7 @@ node-modules-regexp@^1.0.0: resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40" integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA= -node-notifier@^5.2.1: +node-notifier@^5.1.2, node-notifier@^5.2.1: version "5.3.0" resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.3.0.tgz#c77a4a7b84038733d5fb351aafd8a268bfe19a01" integrity sha512-AhENzCSGZnZJgBARsUjnQ7DnZbzyP+HxlVXuD0xqAnvL8q+OqtSX7lGg9e8nHzwXkMMXNdVeqq4E2M3EUAqX6Q== @@ -10084,6 +10084,15 @@ webpack-node-externals@^1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3" +webpack-notifier@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/webpack-notifier/-/webpack-notifier-1.7.0.tgz#4e03ea3ba1c0588d863935363f145d067815068a" + integrity sha512-L3UKrl500xk0VDYKkwQxy5/BPhBWsZ2xHsAx2Qe3dVKYUEk9+y690RcNTMIUcVOK2fRgK7KK3PA4ccOq1h+fTg== + dependencies: + node-notifier "^5.1.2" + object-assign "^4.1.0" + strip-ansi "^3.0.1" + webpack-sources@^1.0.1, webpack-sources@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"