fix: Fix white screen problem

Change layouts stack to avoid the white screen problem when route change

Change-Id: Ie14b4cde7f0e4ac347b1fc108c648fef91b8e0c9

src/components/Layout/GlobalHeader/index.less

@@ -128,6 +128,9 @@
   height: 100%;
   color: @title-color;
   position: relative;
+  flex-grow: 1;
+  z-index: 200;
+  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
 .avatar {

src/components/PageLoading/index.jsx

@@ -20,7 +20,6 @@ const PageLoading = (props) => {
   return (
     <div
       style={{
-        paddingTop: 100,
         textAlign: 'center',
       }}
       className={className}

src/components/Pagination/index.less

@@ -1,5 +1,6 @@
 .wrapper {
   text-align: right;
+  height: 32px;
 }
 .inner {
   display: inline-block;

src/components/Tables/Base/index.less

@@ -13,6 +13,10 @@
       //   min-height: 500px;
       // }
     }
+    .ant-table-pagination.ant-pagination{
+      margin: 0;
+      padding: 8px 16px;;
+    }
   }
 }
 

src/core/routes.js

@@ -16,32 +16,12 @@ import BlankLayout from '@/layouts/Blank';
 import E404 from 'pages/base/containers/404';
 import { lazy } from 'react';
 
-const Base = lazy(() =>
-  import(/* webpackChunkName: "base" */ '@/pages/base/App')
+const Auth = lazy(() =>
+  import(/* webpackChunkName: "auth" */ '@/pages/auth/App')
 );
-const Compute = lazy(() =>
-  import(/* webpackChunkName: "compute" */ '@/pages/compute/App')
-);
-const User = lazy(() =>
-  import(/* webpackChunkName: "user" */ '@/pages/user/App')
-);
-const Storage = lazy(() =>
-  import(/* webpackChunkName: "storage" */ '@/pages/storage/App')
-);
-const Network = lazy(() =>
-  import(/* webpackChunkName: "network" */ '@/pages/network/App')
-);
-const Identity = lazy(() =>
-  import(/* webpackChunkName: "identity" */ '@/pages/identity/App')
-);
-const Configs = lazy(() =>
-  import(/* webpackChunkName: "configuration" */ '@/pages/configuration/App')
-);
-// const Management = lazy(() =>
-//   import(/* webpackChunkName: "Management" */ '@/pages/management/App')
-// );
-const Heat = lazy(() =>
-  import(/* webpackChunkName: "heat" */ '@/pages/heat/App')
+
+const Basic = lazy(() =>
+  import(/* webpackChunkName: "basic" */ '@/pages/basic/App')
 );
 
 export default [
@@ -50,48 +30,19 @@ export default [
     routes: [
       {
         path: '/',
-        // redirect: { from: '/', to: '/base/403', exact: true }
         redirect: { from: '/', to: '/base/overview', exact: true },
       },
       {
         path: '/login',
-        redirect: { from: '/login', to: '/user/login', exact: true },
+        redirect: { from: '/login', to: '/auth/login', exact: true },
       },
       {
-        path: '/user',
-        component: User,
+        path: '/auth',
+        component: Auth,
       },
       {
-        path: '/compute',
-        component: Compute,
-      },
-      {
-        path: '/storage',
-        component: Storage,
-      },
-      {
-        path: '/network',
-        component: Network,
-      },
-      {
-        path: '/identity',
-        component: Identity,
-      },
-      {
-        path: '/configuration-admin',
-        component: Configs,
-      },
-      // {
-      //   path: '/management',
-      //   component: Management,
-      // },
-      {
-        path: '/heat',
-        component: Heat,
-      },
-      {
-        path: '/base',
-        component: Base,
+        path: '/',
+        component: Basic,
       },
       {
         path: '*',

src/layouts/Auth/index.jsx

@@ -27,7 +27,7 @@ import styles from './index.less';
 
 @inject('rootStore')
 @observer
-class UserLayout extends Component {
+class AuthLayout extends Component {
   constructor(props) {
     super(props);
 
@@ -75,4 +75,4 @@ class UserLayout extends Component {
   }
 }
 
-export default UserLayout;
+export default AuthLayout;

src/layouts/Base/Menu.jsx

@@ -224,7 +224,6 @@ class LayoutMenu extends Component {
 
     return (
       <div
-        // className={classnames(styles['base-layout-sider'], styles['base-layout-sider-collapsed'], styles['base-layout-sider-hover'])}
         className={classnames(
           styles['base-layout-sider'],
           collapsed ? styles['base-layout-sider-collapsed'] : '',

src/layouts/Base/Right.jsx

@@ -12,17 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { Layout, Breadcrumb } from 'antd';
 import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import renderRoutes from 'utils/RouterConfig';
-import GlobalHeader from 'components/Layout/GlobalHeader';
 import NotFound from 'components/Cards/NotFound';
+import PageLoading from 'components/PageLoading';
 import styles from './index.less';
 
-const { Header, Content } = Layout;
+const { Content } = Layout;
 
 @inject('rootStore')
 @observer
@@ -48,7 +48,7 @@ class Right extends Component {
   }
 
   checkHasTab = () => {
-    const { currentRoutes } = this.props;
+    const { currentRoutes = [] } = this.props;
     if (currentRoutes.length === 0) {
       return false;
     }
@@ -56,9 +56,7 @@ class Right extends Component {
     return hasTab || false;
   };
 
-  renderHeader = () => <GlobalHeader {...this.props} />;
-
-  renderBreadcrumb = (currentRoutes) => {
+  renderBreadcrumb = (currentRoutes = []) => {
     if (!currentRoutes || currentRoutes.length === 0) {
       return null;
     }
@@ -113,12 +111,15 @@ class Right extends Component {
       );
     }
     try {
-      const { currentRoutes } = this.props;
-      if (currentRoutes.length === 0) {
-        return (
-          <NotFound title={t('datas')} link={this.getUrl('/base/overview')} />
-        );
-      }
+      // const { currentRoutes = [] } = this.props;
+      // if (currentRoutes.length === 0) {
+      //   return (
+      //     <NotFound
+      //       title={t('datas')}
+      //       link={this.getUrl('/base/overview')}
+      //     />
+      //   );
+      // }
       const children = (
         <div className={`${styles.main} ${mainBreadcrubClass} ${mainTabClass}`}>
           {renderRoutes(this.routes, extraProps)}
@@ -158,7 +159,6 @@ class Right extends Component {
     const children = user
       ? this.renderChildren(mainBreadcrubClass, mainTabClass, extraProps)
       : null;
-
     return (
       <Layout
         className={classnames(
@@ -166,10 +166,11 @@ class Right extends Component {
           collapsed ? styles['base-layout-right-collapsed'] : ''
         )}
       >
-        <Header className={styles.header}>{this.renderHeader()}</Header>
         <Content className={styles.content}>
           {breadcrumb}
-          {children}
+          <Suspense fallback={<PageLoading className="sl-page-loading" />}>
+            {children}
+          </Suspense>
         </Content>
       </Layout>
     );

src/layouts/Base/index.jsx

@@ -19,12 +19,16 @@ import i18n from 'core/i18n';
 import { isAdminPage } from 'utils/index';
 import { BellOutlined } from '@ant-design/icons';
 import checkItemPolicy from 'resources/policy';
+import { Layout } from 'antd';
+import GlobalHeader from 'components/Layout/GlobalHeader';
 import renderAdminMenu from '../admin-menu';
 import renderMenu from '../menu';
 import RightContext from './Right';
 import LayoutMenu from './Menu';
 import styles from './index.less';
 
+const { Header } = Layout;
+
 @inject('rootStore')
 @observer
 class BaseLayout extends Component {
@@ -79,6 +83,10 @@ class BaseLayout extends Component {
     return this.getMenuByLicense(this.originMenu);
   }
 
+  getUrl(path, adminStr) {
+    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
+  }
+
   filterMenuByHidden = (menu = []) => {
     if (menu.length === 0) {
       return menu;
@@ -203,13 +211,23 @@ class BaseLayout extends Component {
     );
   }
 
+  renderHeader = () => (
+    <GlobalHeader {...this.props} isAdminPage={this.isAdminPage} />
+  );
+
   render() {
+    const { collapsed } = this.state;
     const { pathname } = this.props.location;
     const currentRoutes = this.getCurrentMenu(pathname);
-
     return (
       <div className={styles['base-layout']}>
         {this.renderNotice()}
+        <Header
+          className={collapsed ? styles['header-collapsed'] : styles.header}
+        >
+          {/* {this.renderLogo()} */}
+          {this.renderHeader()}
+        </Header>
         <LayoutMenu
           pathname={pathname}
           isAdminPage={this.isAdminPage}

src/layouts/Base/index.less

@@ -7,19 +7,23 @@
 .header {
   top: 0;
   left: 0;
-  z-index: 200;
-  background-color: @layout-header-color;
   color: @white;
-  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
   height: @header-height;
   padding: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 230px;
+}
+
+.header-collapsed{
+  &:extend(.header);
+  padding-left: 88px;
 }
 
 .logo {
   height: 32px;
-  // background: rgba(255, 255, 255, 0.2);
   margin: @size-medium 38px;
-  // text-align: center;
 }
 
 .logo-collapse {
@@ -27,7 +31,6 @@
 }
 
 .logo-image {
-  // width: 100%;
   height: 29px;
 }
 
@@ -271,9 +274,9 @@
 
 .base-layout-right {
   position: absolute;
-  top: 0;
+  top: 40px;
   left: 230px;
-  height: 100vh;
+  height: calc(100vh - 40px);
   right: 0;
 }
 

src/layouts/Basic/index.jsx

@@ -0,0 +1,38 @@
+// 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 { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import renderRoutes from 'utils/RouterConfig';
+
+// import loginImage from 'src/asset/image/login.png';
+// import bgcImg from 'src/asset/image/animnbus.png';
+
+@inject('rootStore')
+@observer
+class BaseLayout extends Component {
+  constructor(props) {
+    super(props);
+
+    this.routes = props.route.routes;
+  }
+
+  render() {
+    const { isAdminPage, sliderCollapsed } = this.props;
+    const extraProps = { isAdminPage, sliderCollapsed };
+    return renderRoutes(this.routes, extraProps);
+  }
+}
+
+export default BaseLayout;

src/pages/auth/containers/ChangePassword/index.jsx

@@ -43,7 +43,7 @@ export default class Password extends Component {
   componentDidMount() {
     const { rootStore: { routing } = {} } = this.props;
     if (!this.passwordData || isEmpty(this.passwordData)) {
-      routing.push('/user/login');
+      routing.push('/auth/login');
     }
   }
 
@@ -85,7 +85,7 @@ export default class Password extends Component {
           t('Password changed successfully, please log in again.')
         );
         rootStore.setPasswordInfo(null);
-        rootStore.routing.push('/user/login');
+        rootStore.routing.push('/auth/login');
       },
       (err) => {
         const {
@@ -184,7 +184,7 @@ export default class Password extends Component {
             <Button type="primary" htmlType="submit" loading={loading}>
               {t('Confirm')}
             </Button>
-            <Link style={{ marginLeft: 50 }} to="/user/login">
+            <Link style={{ marginLeft: 50 }} to="/auth/login">
               {t('Back to login page')}
             </Link>
           </>

src/pages/auth/containers/Login/index.jsx

@@ -218,7 +218,7 @@ export default class Login extends Component {
             userId,
           };
           this.rootStore.setPasswordInfo(data);
-          this.rootStore.routing.push('/user/changepassword');
+          this.rootStore.routing.push('/auth/changepassword');
         } else {
           this.setState({
             error: true,

src/pages/auth/routes/index.js

@@ -12,15 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import UserLayout from 'layouts/User';
+import AuthLayout from '@/layouts/Auth';
 import Login from '../containers/Login';
 import ChangePassword from '../containers/ChangePassword';
 
-const PATH = '/user';
+const PATH = '/auth';
 export default [
   {
     path: PATH,
-    component: UserLayout,
+    component: AuthLayout,
     routes: [
       { path: `${PATH}/login`, component: Login, exact: true },
       {

src/pages/base/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from '../containers/404';
 import Overview from '../containers/Overview';
 import AdminOverview from '../containers/AdminOverview';
@@ -25,7 +25,6 @@ export default [
     routes: [
       { path: `${PATH}/overview`, component: Overview, exact: true },
       { path: `${PATH}/overview-admin`, component: AdminOverview, exact: true },
-      { path: `${PATH}/404`, component: E404, exact: true },
       { path: '*', component: E404 },
     ],
   },

src/pages/basic/App.jsx

@@ -0,0 +1,21 @@
+// 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 renderRoutes from 'utils/RouterConfig';
+
+import routes from './routes';
+
+const App = () => renderRoutes(routes);
+
+export default App;

src/pages/basic/routes/index.js

@@ -0,0 +1,80 @@
+// 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 { lazy } from 'react';
+import BaseLayout from 'layouts/Base';
+
+const Base = lazy(() =>
+  import(/* webpackChunkName: "base" */ '@/pages/base/App')
+);
+const Compute = lazy(() =>
+  import(/* webpackChunkName: "compute" */ '@/pages/compute/App')
+);
+const Storage = lazy(() =>
+  import(/* webpackChunkName: "storage" */ '@/pages/storage/App')
+);
+const Network = lazy(() =>
+  import(/* webpackChunkName: "network" */ '@/pages/network/App')
+);
+const Identity = lazy(() =>
+  import(/* webpackChunkName: "identity" */ '@/pages/identity/App')
+);
+const Configs = lazy(() =>
+  import(/* webpackChunkName: "configuration" */ '@/pages/configuration/App')
+);
+const Management = lazy(() =>
+  import(/* webpackChunkName: "management" */ '@/pages/management/App')
+);
+const Heat = lazy(() =>
+  import(/* webpackChunkName: "heat" */ '@/pages/heat/App')
+);
+const E404 = lazy(() =>
+  import(/* webpackChunkName: "E404" */ '@/pages/base/containers/404')
+);
+const PATH = '/';
+
+export default [
+  {
+    path: PATH,
+    component: BaseLayout,
+    routes: [
+      { path: `/base`, component: Base },
+      {
+        path: `/compute`,
+        component: Compute,
+      },
+      { path: `/storage`, component: Storage },
+      {
+        path: `/network`,
+        component: Network,
+      },
+      {
+        path: `/identity`,
+        component: Identity,
+      },
+      {
+        path: `/configuration-admin`,
+        component: Configs,
+      },
+      {
+        path: `/management`,
+        component: Management,
+      },
+      {
+        path: `/heat`,
+        component: Heat,
+      },
+      { path: '*', component: E404 },
+    ],
+  },
+];

src/pages/compute/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Instance from '../containers/Instance';
 import InstanceDetail from '../containers/Instance/Detail';

src/pages/configuration/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import SystemInfo from '../containers/SystemInfo';
 import Setting from '../containers/Setting';

src/pages/heat/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Stack from '../containers/Stack';
 import StackDetail from '../containers/Stack/Detail';

src/pages/identity/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Domain from '../containers/Domain';
 import DomainCreate from '../containers/Domain/actions/Create';

src/pages/management/routes/index.js

@@ -12,8 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
-
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 // import InstanceDetail from 'pages/compute/containers/Instance/Detail';
 // import RecycleBin from '../containers/RecycleBin';

src/pages/network/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Network from '../containers/Network';
 import AdminNetwork from '../containers/Network/AdminNetwork';

src/pages/storage/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from 'layouts/Base';
+import BaseLayout from '@/layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Snapshot from '../containers/Snapshot';
 import SnapshotDetail from '../containers/Snapshot/Detail';

src/stores/root.js

@@ -228,9 +228,9 @@ class RootStore {
   @action
   gotoLoginPage(currentPath, refresh) {
     if (currentPath) {
-      this.routing.push(`/user/login?referer=${currentPath}`);
+      this.routing.push(`/auth/login?referer=${currentPath}`);
     } else {
-      this.routing.push('/user/login');
+      this.routing.push('/auth/login');
     }
     if (refresh) {
       window.location.reload();

src/styles/base.less

@@ -72,7 +72,7 @@
 
   .sl-page {
     &-loading {
-      position: fixed;
+      position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);