fix cluster metrics ui

web/config/router.config.js

@@ -18,7 +18,7 @@ export default [
     authority: ['admin', 'user'],
     routes: [
       // cluster
-      { path: '/', redirect: '/cluster/overview' },
+      { path: '/', redirect: '/cluster/overview/' },
       {
         path: '/cluster',
         name: 'cluster',
@@ -26,24 +26,35 @@ export default [
         routes: [
       //      { path: '/', redirect: '/platform/gateway' },
             {
-              path: '/cluster/overview',
+              path: '/cluster/overview/',
               name: 'overview',
               component: './Cluster/Overview',
             },   {
+              path: '/cluster/overview/:elasticsearch',
+              name: 'overview',
+              component: './Cluster/Overview',
+              hideInMenu: true,
+            },
+            {
               path: '/cluster/monitoring/:name',
               name: 'cluster',
               component: './Cluster/ClusterMonitor',
               hideInMenu: true,
             }, {
-              path: '/cluster/metrics',
+              path: '/cluster/metrics/',
               name: 'monitoring',
               component: './Cluster/Metrics',
             }, {
-            path: '/cluster/logging',
+              path: '/cluster/metrics/:elasticsearch',
+              name: 'monitoring',
+              component: './Cluster/Metrics',
+              hideInMenu: true,
+            }, {
+            path: '/cluster/logs/',
             name: 'logging',
             component: './Cluster/SearchMonitor',
             },{
-              path: '/cluster/settings',
+              path: '/cluster/settings/',
               name: 'settings',
               component: './Cluster/Settings/Base',
               routes: [

web/src/components/GlobalHeader/index.js

@@ -6,10 +6,25 @@ import styles from './index.less';
 import RightContent from './RightContent';
 import DropdownSelect from './DropdownSelect'
 
+import router from "umi/router";
+const path=require('path');
+
+
 export default class GlobalHeader extends PureComponent {
+
+   constructor(props) {
+       super(props);
+   }
+
+   componentDidMount() {
+
+   }
+
     componentWillUnmount() {
     this.triggerResizeEvent.cancel();
   }
+
+
   /* eslint-disable*/
   @Debounce(600)
   triggerResizeEvent() {
@@ -44,7 +59,17 @@ export default class GlobalHeader extends PureComponent {
           onChange={(item)=>{
             this.props.handleSaveGlobalState({
               selectedCluster: item
-            })
+            });
+
+            const path1=this.props.location.pathname
+
+            if (path1[path1.length-1] !=='/'){
+                const currentPath=path.dirname(path1);
+                router.replace(currentPath+'/'+item.id);
+            }else{
+                router.replace(path1+item.id);
+            }
+            //location.reload()
           }}
           size={56}
            fetchData={

web/src/models/global.js

@@ -13,6 +13,7 @@ export default {
     clusterVisible: true,
     clusterList: [],
     selectedCluster: {name:"Select cluster", id: ""},
+    selectedClusterID: "",
   },
 
   effects: {
@@ -122,6 +123,7 @@ export default {
         return {
           ...state,
           selectedCluster: state.clusterList[idx],
+          selectedClusterID: state.clusterList[idx].id,
         }
       }
       return state;

web/src/pages/Cluster/Metrics.js

@@ -4,6 +4,7 @@ import {formatMessage} from 'umi/locale';
 import {Button, Card, Col, DatePicker, Dropdown, Icon, Input, InputNumber, Row, Select, Statistic} from 'antd';
 import moment from 'moment';
 import {DateTime} from 'luxon';
+import router from "umi/router";
 
 import numeral from 'numeral';
 
@@ -21,6 +22,9 @@ import {
 } from "@elastic/charts";
 import styles from './Metrics.less';
 
+import { Spin, Alert } from 'antd';
+
+
 const {RangePicker} = DatePicker;
 
 
@@ -140,7 +144,8 @@ const vstyle = {
 
 @connect(({clusterMonitor,global}) => ({
     clusterMonitor,
-    selectedCluster: global.selectedCluster
+    selectedCluster: global.selectedCluster,
+    clusterList: global.clusterList
 }))
 
 class ClusterMonitor extends PureComponent {
@@ -151,6 +156,8 @@ class ClusterMonitor extends PureComponent {
     }
 
     state = {
+        spinning: false,
+        clusterID:null,
         timeRange: {
             min: moment().subtract(1, 'h').toISOString(),
             max: moment().toISOString()
@@ -158,7 +165,24 @@ class ClusterMonitor extends PureComponent {
         lastSeconds: 3600,
         qsVisible: false,
     }
+
+
+    componentWillReceiveProps(newProps) {
+
+    }
+
     fetchData = () => {
+
+        console.log("fetching data ing."+this.state.clusterID)
+
+        if (this.state.clusterID===undefined||this.state.clusterID===""||this.state.clusterID===null){
+            return
+        }
+
+        this.setState({
+            spinning:true,
+        })
+
         fetchDataCount++;
         //console.log(fetchDataCount, moment().diff(startTime)/1000);
         const {dispatch} = this.props;
@@ -184,24 +208,58 @@ class ClusterMonitor extends PureComponent {
             timeMask = 'YY-MM-DD'
         }
         this.setState({timeScale: {min: timeRange.min, max: timeRange.max, mask: timeMask}});
-        // console.log(this.props.selectedCluster)
         dispatch({
             type: 'clusterMonitor/fetchClusterMetrics',
             payload: {
                 timeRange: timeRange,
-                cluster_id:this.props.selectedCluster?this.props.selectedCluster.id:''
+                cluster_id:this.state.clusterID
             },
-        });
+        }).then(()=>{
+            this.setState({
+                spinning:false,
+            })
+        })
     }
 
     componentWillUnmount() {
         clearInterval(tv1);
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+
+        // console.log(this.props.selectedCluster)
+        // console.log(this.state.clusterID)
+
+        if (this.props.selectedCluster.id!==this.state.clusterID){
+            console.log("cluster changed")
+
+            this.setState({ clusterID:this.props.selectedCluster.id }, () => {
+                //TODO 处理 cancel 事件，先把当前还在执行中的请求结束，避免更新完成之后，被晚到的之前的请求给覆盖了。
+                this.fetchData();
+            });
+        }
+    }
+
     componentDidMount() {
         const {match, location} = this.props;
 
+        const queryESID=this.props.match.params.elasticsearch;
 
+        if (queryESID !== null&&queryESID !== undefined){
+            this.state.clusterID=queryESID
+            const {dispatch} = this.props;
+            dispatch({
+                type: 'global/changeClusterById',
+                payload: {
+                    id: queryESID
+                }
+            })
+        }else{
+            //alert("cluster ID is not set");
+            return
+        }
+
+        console.log("selectedCluster:"+this.state.clusterID)
 
         let min = location.query.start || '2020-12-10 15:00';
         let max = location.query.end || '2020-12-10 16:00';
@@ -221,7 +279,8 @@ class ClusterMonitor extends PureComponent {
         // tv1 = setInterval(()=>{
         //   this.fetchData();
         // }, 10000);
-        this.autoRefresh();
+
+        //this.autoRefresh();
     }
 
     autoRefresh(durationInSeconds) {
@@ -427,7 +486,7 @@ class ClusterMonitor extends PureComponent {
       //   <Menu.Item key="5"> */}
                 <Input.Group compact>
                     <Button style={{cursor: "default"}}>刷新间隔</Button>
-                    <InputNumber min={1} defaultValue={10} ref={el => this.refreshNum = el}/>
+                    <InputNumber min={-1} defaultValue={-1} ref={el => this.refreshNum = el}/>
                     <Select defaultValue="seconds" ref={el => this.refreshUnit = el}>
                         <Select.Option value="seconds">秒</Select.Option>
                         <Select.Option value="minutes">分</Select.Option>
@@ -443,7 +502,9 @@ class ClusterMonitor extends PureComponent {
         );
 
         return (
+            <Spin spinning={this.state.spinning} tip="Loading...">
                 <div>
+
                     <div style={{background: "#fff", padding: "5px", marginBottom: 5}}>
                         <Input.Group compact>
                             <Dropdown overlay={menu}
@@ -470,7 +531,7 @@ class ClusterMonitor extends PureComponent {
                     </div>
 
                     <Card
-                    // title={this.props.selectedCluster?this.props.selectedCluster.name:''}
+                         //title={this.state.clusterID?this.state.clusterID:''}
                         style={{marginBottom: 5}}>
                         <Row>
                             <Col md={2} xs={4}>
@@ -502,11 +563,11 @@ class ClusterMonitor extends PureComponent {
                                 <Statistic valueStyle={vstyle} title="文档数" value={clusterStats.document_count}/>
                             </Col>
 
-                        <Col md={2} xs={4}>
+                            <Col md={3} xs={4}>
                                 <Statistic valueStyle={vstyle} title="存储空间"
                                            value={clusterStats.used_store_bytes + '/' + clusterStats.max_store_bytes}/>
                             </Col>
-                        <Col md={2} xs={4}>
+                            <Col md={3} xs={4}>
                                 <Statistic valueStyle={vstyle} title="JVM 内存"
                                            value={clusterStats.used_jvm_bytes + '/' + clusterStats.max_jvm_bytes}/>
                             </Col>
@@ -574,6 +635,7 @@ class ClusterMonitor extends PureComponent {
                         })
                     }
                 </div>
+            </Spin>
         );
     }
 }

web/src/pages/Cluster/Overview.js

@@ -24,6 +24,7 @@ let HealthCircle = (props)=>{
 }))
 
 class Overview extends  React.Component {
+
   state = {
     data: [{id:"JFpIbacZQamv9hkgQEDZ2Q", name:"single-es", endpoint:"http://localhost:9200", health: "green", version: "7.10.0", uptime:"320883955"}]
   }
@@ -142,6 +143,10 @@ class Overview extends  React.Component {
 
   render() {
 
+    // useEffect(() => {
+    //   console.log('Listening: ', name);
+    // }, [name]);
+
     return (
         <div>
           <Button type="primary" onClick={this.handleChangeClusterById}>change cluster</Button>

web/src/pages/Cluster/models/cluster.js

@@ -19,6 +19,7 @@ export default {
             yield put({type: 'saveData', payload: clusterMetrics})
             if(callback && typeof callback == 'function'){
                 callback(clusterMetrics);
+                console.log("finished call:"+params.cluster_id);
             }
         },
         *fetchClusterNodeStats({callback}, {call, put}){