floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cluster item view

This commit is contained in:
shiyang 2021-02-21 23:33:39 +08:00
parent b41e7c8d9b
commit ca177ebfb9
4 changed files with 141 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/pages/Cluster/ClusterItem.less Normal file
View File

@ -0,0 +1,7 @@
.clusterItem {
display: inline-block;
text-align: center;
width: 100%;
height: 400px;
}

6
web/src/pages/Cluster/ClusterList.js
View File

@ -4,6 +4,7 @@ import {Link} from 'umi';
import {extendHex, defineGrid} from 'honeycomb-grid';
import { SVG } from '@svgdotjs/svg.js'
import { connect } from 'dva';
import styles from './ClusterItem.less';
@connect(({ clusterMonitor }) => ({
clusterMonitor
@ -64,7 +65,7 @@ class ClusterItem extends Component {
const draw = SVG().addTo(this.root).size('100%', '100%')
let data = this.props.data;
const rect = { width: 5, height: 3 };
const rect = { width: 4, height: 20 };
const Hex = extendHex({
size: 30,
@ -116,9 +117,10 @@ class ClusterItem extends Component {
}
render(){
return (
<div ref={ref=>this.root=ref}></div>
<div className={styles.clusterItem} ref={ref=>this.root=ref}></div>
)
}
}
export {ClusterItem};
export default ClusterList;

163
web/src/pages/Cluster/Overview.js
View File

@ -1,9 +1,10 @@
import React, {Fragment} from 'react';
import {Card, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
import {Link} from "umi"
import moment from "moment";
import styles from "./Overview.less";
import {connect} from "dva";
import {ClusterItem} from "./ClusterList";
let HealthCircle = (props)=>{
return (
@ -56,45 +57,133 @@ class Overview extends React.Component {
),
}
];
clusterItem = {
name: 'cluster-test-name4',
nodes: [{
name: 'node-32',
status: 'green'
},{
name: 'node-33',
status: 'green'
},{
name: 'node-34',
status: 'green'
},{
name: 'node-35',
status: 'green'
},{
name: 'node-36',
status: 'green'
},{
name: 'node-37',
status: 'yellow'
},{
name: 'node-33',
status: 'green'
},{
name: 'node-34',
status: 'green'
},{
name: 'node-35',
status: 'green'
},{
name: 'node-36',
status: 'green'
},{
name: 'node-37',
status: 'yellow'
},{
name: 'node-33',
status: 'green'
},{
name: 'node-34',
status: 'green'
},{
name: 'node-35',
status: 'green'
},{
name: 'node-36',
status: 'green'
},{
name: 'node-37',
status: 'yellow'
},{
name: 'node-33',
status: 'green'
},{
name: 'node-34',
status: 'green'
},{
name: 'node-35',
status: 'green'
},{
name: 'node-36',
status: 'green'
},{
name: 'node-37',
status: 'yellow'
},{
name: 'node-38',
status: 'green'
}],
};
render() {
return (<Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
<Row gutter={[16,16]}>
<Col xs={24} sm={12} md={12} lg={8} >
<Card title="Summary" size={"small"}>
<Descriptions column={1} bordered colon={false} className={styles.overview}>
<Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
<Descriptions.Item label="Version">7.10.0</Descriptions.Item>
<Descriptions.Item label="Uptime">3 天</Descriptions.Item>
<Descriptions.Item label="License">Basic</Descriptions.Item>
</Descriptions>
return (
<div>
<Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
<Row gutter={[16,16]}>
<Col xs={24} sm={12} md={12} lg={8} >
<Card title="Summary" size={"small"}>
<Descriptions column={1} bordered colon={false} className={styles.overview}>
<Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
<Descriptions.Item label="Version">7.10.0</Descriptions.Item>
<Descriptions.Item label="Uptime">3 天</Descriptions.Item>
<Descriptions.Item label="License">Basic</Descriptions.Item>
</Descriptions>
</Card>
</Col>
<Col xs={24} sm={12} md={12} lg={8}>
<Card title="Nodes:2" size={"small"}>
<Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
<Descriptions.Item label="Disk Available">
83.21%
<p className={styles.light}>775.1 GB / 931.5 GB</p>
</Descriptions.Item>
<Descriptions.Item label="JVM Heap">
27.60%
<p className={styles.light}>565.3 GB / 2.0 GB</p>
</Descriptions.Item>
</Descriptions>
</Card>
</Col>
<Col xs={24} sm={12} md={12} lg={8}>
<Card title="Indices:27" size={"small"}>
<Descriptions column={1} bordered colon={false} className={styles.overview}>
<Descriptions.Item label="Documents">20,812,087</Descriptions.Item>
<Descriptions.Item label="Disk Usage">1.1 GB</Descriptions.Item>
<Descriptions.Item label="Primary Shards">28</Descriptions.Item>
<Descriptions.Item label="Replica Shards">26</Descriptions.Item>
</Descriptions>
</Card>
</Col>
</Row>
</Card>
</Col>
<Col xs={24} sm={12} md={12} lg={8}>
<Card title="Nodes:2" size={"small"}>
<Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
<Descriptions.Item label="Disk Available">
83.21%
<p className={styles.light}>775.1 GB / 931.5 GB</p>
</Descriptions.Item>
<Descriptions.Item label="JVM Heap">
27.60%
<p className={styles.light}>565.3 GB / 2.0 GB</p>
</Descriptions.Item>
</Descriptions>
<Card title={this.clusterItem.name + ": "+ this.clusterItem.nodes.length}
extra={<Link to={"/cluster/monitoring/" + this.clusterItem.name}>查看更多</Link>}
>
<div className={styles.clusterItemCard}>
{/* {item.nodes.map(node => {
return (<a><Tag style={{marginBottom:5}} color={node.status}>{node.name}</Tag></a>);
})} */}
<ClusterItem data={this.clusterItem} />
</div>
</Card>
</Col>
<Col xs={24} sm={12} md={12} lg={8}>
<Card title="Indices:27" size={"small"}>
<Descriptions column={1} bordered colon={false} className={styles.overview}>
<Descriptions.Item label="Documents">20,812,087</Descriptions.Item>
<Descriptions.Item label="Disk Usage">1.1 GB</Descriptions.Item>
<Descriptions.Item label="Primary Shards">28</Descriptions.Item>
<Descriptions.Item label="Replica Shards">26</Descriptions.Item>
</Descriptions>
</Card>
</Col>
</Row>
</Card>)
</div>
)
}
}

4
web/src/pages/Cluster/Overview.less
View File

@ -17,3 +17,7 @@
color: #666;
}
}
.clusterItemCard {
text-align: center;
}