fix cluster metrics ui

2021-03-05 00:23:49 +08:00 · 2021-03-05 00:23:49 +08:00 · 494bb8cdf2
parent 21301f52e8
commit 494bb8cdf2
6 changed files with 249 additions and 143 deletions
--- a/web/config/router.config.js
+++ b/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: [
--- a/web/src/components/GlobalHeader/index.js
+++ b/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={
--- a/web/src/models/global.js
+++ b/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;
--- a/web/src/pages/Cluster/Metrics.js
+++ b/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>
        );
    }
 }
--- a/web/src/pages/Cluster/Overview.js
+++ b/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>
--- a/web/src/pages/Cluster/models/cluster.js
+++ b/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}){