fix: Cluster detail loading when runtime type not resolved (#546)

Webpack dev build add notifier Add LazyLoad component
openpitrix · Nov 20, 2018 · 8e535e7 · 8e535e7
1 parent 5bceb49
commit 8e535e7
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 80 deletions.
diff --git 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
@@ -6,15 +6,14 @@ 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';
 
 import WrapComp from './routes/wrapper';
 
 import './scss/index.scss';
 
-const LazyLoad = ({ children }) => <Suspense fallback={<div>Loading..</div>}>{children}</Suspense>;
-
 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
@@ -0,0 +1,7 @@
+import React, { Suspense } from 'react';
+
+import Loading from 'components/Loading';
+
+const LazyLoad = ({ children }) => <Suspense fallback={<Loading />}>{children}</Suspense>;
+
+export default LazyLoad;
diff --git a/src/components/Loading/index.jsx b/src/components/Loading/index.jsx
@@ -26,14 +26,10 @@ export default class Loading extends Component {
               <div className={styles.loader} />
             </div>
           </div>
-          {children}
         </Fragment>
       );
     }
 
-    if (!children) {
-      return null;
-    }
     return <Fragment>{children}</Fragment>;
   }
 }
diff --git 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 <Table {...props} />;
+    return <Table isLoading={isLoading} {...props} />;
   }
 
   renderAdditionInfo() {

diff --git 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 (
       <Table
+        isLoading={isLoading}
         columns={columns(t)}
         dataSource={clusterNodes}
         filterList={getFilterOptions({

diff --git a/src/pages/Dashboard/Clusters/Detail/index.jsx b/src/pages/Dashboard/Clusters/Detail/index.jsx
@@ -10,6 +10,7 @@ import Layout, { BackBtn, Grid, Section, Card, Panel, BreadCrumb, Dialog } from
 import Loading from 'components/Loading';
 import TimeAxis from 'components/TimeAxis';
 import ClusterCard from 'components/DetailCard/ClusterCard';
+
 import Helm from './Helm';
 import VMbase from './VMbase';
 
@@ -30,7 +31,7 @@ import styles from './index.scss';
 @observer
 export default class ClusterDetail extends Component {
   state = {
-    isLoading: false
+    isRuntimeTypeFetched: false
   };
 
   async componentDidMount() {
@@ -46,7 +47,6 @@ export default class ClusterDetail extends Component {
       match
     } = this.props;
     const { clusterId } = match.params;
-    this.setState({ isLoading: true });
 
     await clusterDetailStore.fetch(clusterId);
     await clusterDetailStore.fetchJobs(clusterId);
@@ -57,27 +57,22 @@ export default class ClusterDetail extends Component {
       await appStore.fetch(cluster.app_id);
       await appVersionStore.fetchAll({ app_id: cluster.app_id });
     }
+
     if (cluster.runtime_id) {
       await runtimeStore.fetch(cluster.runtime_id);
     }
+    this.setState({ isRuntimeTypeFetched: true });
+
     await clusterDetailStore.fetchNodes({
       cluster_id: clusterId,
       isHelm: runtimeStore.isK8s
     });
+
     clusterDetailStore.isHelm = runtimeStore.isK8s;
 
     if (!runtimeStore.isK8s) {
       await sshKeyStore.fetchKeyPairs({ owner: user.user_id });
     }
-    this.setState({ isLoading: false });
-    // if (!runtimeStore.isK8s) {
-    //   // vmbase
-    // } else {
-    //   clusterDetailStore.formatClusterNodes({
-    //     clusterStore,
-    //     type: 'Deployment'
-    //   });
-    // }
   }
 
   componentWillUnmount() {
@@ -330,23 +325,11 @@ export default class ClusterDetail extends Component {
       t
     } = this.props;
 
-    const { isLoading } = this.state;
     const { cluster, clusterJobs } = clusterDetailStore;
     const { runtimeDetail, isK8s } = runtimeStore;
-
     const { isNormal, isDev } = user;
-    //
-    // const tableProps = {
-    //   runtimeStore,
-    //   clusterStore,
-    //   clusterDetailStore,
-    //   t
-    // };
-    // const actionProps = {
-    //   clusterStore,
-    //   appVersionStore,
-    //   t
-    // };
+
+    const { isRuntimeTypeFetched } = this.state;
 
     const linkPath = isDev
       ? `My Apps>Test>Clusters>${cluster.name}`
@@ -390,7 +373,7 @@ export default class ClusterDetail extends Component {
           </Section>
 
           <Section size={8}>
-            <Loading isLoading={isLoading}>
+            <Loading isLoading={!isRuntimeTypeFetched}>
               <Panel>{isK8s ? <Helm cluster={cluster} /> : <VMbase cluster={cluster} />}</Panel>
             </Loading>
           </Section>

diff --git 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,15 +107,17 @@ 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 = {
         maxStatus: '',
         maxNumber: 0
       };
 
-      if (cluster_node_set) {
+      if (Array.isArray(cluster_node_set)) {
         cluster_node_set.forEach(nodeItem => {
           if (nodeItem.role !== roleItem.role) {
             return;
@@ -128,14 +129,17 @@ export default class ClusterDetailStore extends Store {
           }
 
           nodes.push(nodeItem);
+
           const nodeStatus = _.get(status, nodeItem.status);
           let number = 0;
           if (!nodeStatus) {
             number = 1;
           } 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
@@ -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
@@ -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"