feat: Refactor admin overview codes

Refactor overview admin codes

Change-Id: I33dfd8a96ff17b9dac33d53e60dc19a498af4a91

src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx

@@ -24,7 +24,7 @@ import {
 import { Link } from 'react-router-dom';
 import styles from '../style.less';
 
-const actions = [
+export const actions = [
   {
     key: 'projectNum',
     label: t('Project Num'),
@@ -53,6 +53,10 @@ export class ProjectInfo extends Component {
     this.props.store.getProjectInfoData();
   }
 
+  get actions() {
+    return this.props.actions || actions;
+  }
+
   render() {
     const { projectInfoLoading, platformNum } = this.props.store;
     return (
@@ -65,7 +69,7 @@ export class ProjectInfo extends Component {
         <Descriptions column={1}>
           <div className="site-card-wrapper">
             <Row>
-              {actions.map((item) => (
+              {this.actions.map((item) => (
                 <Col key={item.key} style={{ margin: 'auto' }}>
                   <Link to={item.to} style={{ color: item.color }}>
                     <Row>

src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx

@@ -25,7 +25,7 @@ import adminSecurityGroup from 'asset/image/admin-security-group.svg';
 import adminRouter from 'asset/image/admin-router.svg';
 import styles from '../style.less';
 
-const card = [
+export const card = [
   {
     key: 'serviceNum',
     label: t('Instance'),
@@ -40,7 +40,7 @@ const card = [
   },
 ];
 
-const smallCard = [
+export const smallCard = [
   {
     key: 'networkNum',
     label: t('Network'),
@@ -86,6 +86,14 @@ export class virtualResourceInfo extends Component {
     this.props.store.getVirtualResource();
   }
 
+  get card() {
+    return this.props.card || card;
+  }
+
+  get smallCard() {
+    return this.props.smallCard || smallCard;
+  }
+
   renderStatusColor(resource, resourceKey) {
     let colors = null;
     switch (resourceKey) {
@@ -109,7 +117,7 @@ export class virtualResourceInfo extends Component {
     const { virtualResource } = this.props.store;
     return (
       <Row>
-        {card.map((item) => (
+        {this.card.map((item) => (
           <Col span={12} style={{ textAlign: 'center' }} key={item.key}>
             <Card className={styles.card}>
               <Link to={item.to} style={{ color: '#000000' }}>
@@ -150,7 +158,7 @@ export class virtualResourceInfo extends Component {
     const { virtualResource } = this.props.store;
     return (
       <Row style={{ marginTop: '14px' }}>
-        {smallCard.map((item) => (
+        {this.smallCard.map((item) => (
           <Col span={6} style={{ textAlign: 'center' }} key={item.key}>
             <Card className={styles.card}>
               <Link to={item.to} style={{ color: '#000000' }}>

src/pages/base/containers/AdminOverview/components/VirtualResource.jsx

@@ -18,7 +18,7 @@ import { inject, observer } from 'mobx-react';
 import globalHypervisorStore from 'stores/nova/hypervisor';
 import styles from '../style.less';
 
-const resourceCircle = [
+export const resourceCircle = [
   {
     resource: 'vcpus',
     used: 'vcpus_used',
@@ -47,6 +47,14 @@ export class ResourceCircle extends Component {
     this.store.getOverview();
   }
 
+  get resourceCircle() {
+    return this.props.resourceCircle || resourceCircle;
+  }
+
+  get resourceCircleSpan() {
+    return this.props.resourceCircleSpan || 12;
+  }
+
   renderCircle = (item, index) => {
     const { overview } = this.store;
     const resource = overview[item.resource];
@@ -63,7 +71,7 @@ export class ResourceCircle extends Component {
     }
     return (
       <Col
-        span={12}
+        span={this.resourceCircleSpan}
         style={{ textAlign: 'center' }}
         key={`${resource}-${index}`}
       >
@@ -117,7 +125,7 @@ export class ResourceCircle extends Component {
         <Descriptions column={1}>
           <div className="site-card-wrapper">
             <Row gutter={16}>
-              {resourceCircle.map((item, index) => {
+              {this.resourceCircle.map((item, index) => {
                 return this.renderCircle(item, index);
               })}
             </Row>

src/pages/base/containers/AdminOverview/index.jsx

@@ -14,7 +14,6 @@
 
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-// import cssModules from 'react-css-modules';
 import { Row, Col } from 'antd';
 import OverviewAdminStore from 'stores/overview-admin';
 import styles from './style.less';
@@ -24,37 +23,50 @@ import NetworkService from './components/NetworkService';
 import VirtualResource from './components/VirtualResource';
 import ResourceOverview from './components/ResourceOverview';
 
-@observer
+export class Overview extends Component {
-class Overview extends Component {
   constructor(props) {
     super(props);
     this.adminStore = new OverviewAdminStore();
   }
 
+  renderPlatformInfo() {
+    return <PlatformInfo store={this.adminStore} />;
+  }
+
+  renderVirutalResource() {
+    return <VirtualResource store={this.adminStore} />;
+  }
+
+  renderResourceOverview() {
+    return <ResourceOverview store={this.adminStore} />;
+  }
+
+  renderComputeService() {
+    return <ComputeService store={this.adminStore} />;
+  }
+
+  renderNetworkService() {
+    return <NetworkService store={this.adminStore} />;
+  }
+
   render() {
     return (
       <div className={styles.container}>
         <Row gutter={16} style={{ marginBottom: 22 }}>
-          <Col span={24}>
+          <Col span={24}>{this.renderPlatformInfo()}</Col>
-            <PlatformInfo store={this.adminStore} />
-          </Col>
         </Row>
         <Row gutter={16} style={{ marginBottom: 22 }}>
-          <Col span={24}>
+          <Col span={24}>{this.renderVirutalResource()}</Col>
-            <VirtualResource store={this.adminStore} />
-          </Col>
         </Row>
         <Row gutter={16} style={{ marginBottom: 22 }}>
-          <Col span={24}>
+          <Col span={24}>{this.renderResourceOverview()}</Col>
-            <ResourceOverview store={this.adminStore} />
-          </Col>
         </Row>
         <Row gutter={16}>
           <Col span={12} className={styles.right}>
-            <ComputeService store={this.adminStore} />
+            {this.renderComputeService()}
           </Col>
           <Col span={12} className={styles.right}>
-            <NetworkService store={this.adminStore} />
+            {this.renderNetworkService()}
           </Col>
         </Row>
       </div>
@@ -62,4 +74,4 @@ class Overview extends Component {
   }
 }
 
-export default Overview;
+export default observer(Overview);