update cluster overview page
This commit is contained in:
medcl
parent
a199471e11
commit
23b238ef75
|
|
@ -5,200 +5,95 @@ import moment from "moment";
|
||||||
import styles from "./Overview.less";
|
import styles from "./Overview.less";
|
||||||
import {connect} from "dva";
|
import {connect} from "dva";
|
||||||
import {ClusterItem} from "./ClusterList";
|
import {ClusterItem} from "./ClusterList";
|
||||||
|
import CalendarHeatmap from 'react-calendar-heatmap';
|
||||||
let HealthCircle = (props)=>{
|
import 'react-calendar-heatmap/dist/styles.css';
|
||||||
return (
|
import { Avatar } from 'antd';
|
||||||
<div style={{
|
import { Tabs } from 'antd';
|
||||||
background: props.color,
|
const { TabPane } = Tabs;
|
||||||
width: 12,
|
import ClusterLoadMore from "../../components/List/LoadMoreList"
|
||||||
height: 12,
|
const data = [
|
||||||
borderRadius: 12,
|
{
|
||||||
display: "inline-block",
|
title: 'Ant Design Title 1',
|
||||||
marginRight: 3,
|
},
|
||||||
}}></div>
|
{
|
||||||
)
|
title: 'Ant Design Title 2',
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: 'Ant Design Title 3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Ant Design Title 4',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
@connect(({global}) => ({
|
@connect(({global}) => ({
|
||||||
selectedCluster: global.selectedCluster
|
selectedCluster: global.selectedCluster
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
|
||||||
class Overview extends React.Component {
|
class Overview extends React.Component {
|
||||||
|
|
||||||
state = {
|
|
||||||
data: [{id:"JFpIbacZQamv9hkgQEDZ2Q", name:"single-es", endpoint:"http://localhost:9200", health: "green", version: "7.10.0", uptime:"320883955"}]
|
|
||||||
}
|
|
||||||
|
|
||||||
clusterColumns = [
|
|
||||||
{
|
|
||||||
title: '名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
render: (text, record) => (
|
|
||||||
<div>
|
|
||||||
<Link to='/cluster/monitoring'>{text}</Link>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '集群访问 URL',
|
|
||||||
dataIndex: 'endpoint'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '健康状态',
|
|
||||||
dataIndex: 'health'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '版本',
|
|
||||||
dataIndex: 'version'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '运行时长',
|
|
||||||
dataIndex: 'uptime',
|
|
||||||
render: (text, record) => (
|
|
||||||
moment.duration(text).humanize()
|
|
||||||
),
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
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'
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChangeClusterById = () =>{
|
|
||||||
const {dispatch} = this.props;
|
|
||||||
dispatch({
|
|
||||||
type: 'global/changeClusterById',
|
|
||||||
payload: {
|
|
||||||
id: "c0oc4kkgq9s8qss2uk51"
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// console.log('Listening: ', name);
|
|
||||||
// }, [name]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button type="primary" onClick={this.handleChangeClusterById}>change cluster</Button>
|
<Row gutter={24}>
|
||||||
<Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
|
<Col lg={17} md={24}>
|
||||||
<Row gutter={[16,16]}>
|
<Card className={styles.card} title={'Overall Platform Status'}>
|
||||||
<Col xs={24} sm={12} md={12} lg={8} >
|
<CalendarHeatmap
|
||||||
<Card title="Summary" size={"small"}>
|
showMonthLabels={false}
|
||||||
<Descriptions column={1} bordered colon={false} className={styles.overview}>
|
showWeekdayLabels={false}
|
||||||
<Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
|
showOutOfRangeDays={true}
|
||||||
<Descriptions.Item label="Version">7.10.0</Descriptions.Item>
|
startDate={new Date('2016-01-01')}
|
||||||
<Descriptions.Item label="Uptime">3 天</Descriptions.Item>
|
endDate={new Date('2016-12-31')}
|
||||||
<Descriptions.Item label="License">Basic</Descriptions.Item>
|
monthLabels={['01','02','03','04','05','06',
|
||||||
</Descriptions>
|
'07','08','09','10','11','12']}
|
||||||
</Card>
|
weekdayLabels={['周日','周一','周二','周三','周四'
|
||||||
|
,'周五','周六']}
|
||||||
|
values={[
|
||||||
|
{ date: '2016-01-01', count: 12 },
|
||||||
|
{ date: '2016-01-22', count: 122 },
|
||||||
|
{ date: '2016-01-30', count: 38 },
|
||||||
|
]}
|
||||||
|
// tooltipDataAttrs={
|
||||||
|
// (value) => (value.count > 0 ? 'blue' : 'white')
|
||||||
|
// }
|
||||||
|
// onClick={value => alert(`Clicked on value with count: ${value.count}`)}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className={styles.card} title={'Open Issues'}>
|
||||||
|
<List
|
||||||
|
itemLayout="horizontal"
|
||||||
|
dataSource={data}
|
||||||
|
renderItem={item => (
|
||||||
|
<List.Item>
|
||||||
|
<List.Item.Meta
|
||||||
|
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
|
||||||
|
title={<a href="https://ant.design">{item.title}</a>}
|
||||||
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||||
|
/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} sm={12} md={12} lg={8}>
|
<Col lg={7} md={24}>
|
||||||
<Card title="Nodes:2" size={"small"}>
|
<Card>
|
||||||
<Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
|
<Tabs defaultActiveKey="1" >
|
||||||
<Descriptions.Item label="Disk Available">
|
<TabPane tab="Elasticsearch" key="1" >
|
||||||
83.21%
|
<ClusterLoadMore />
|
||||||
<p className={styles.light}>775.1 GB / 931.5 GB</p>
|
|
||||||
</Descriptions.Item>
|
</TabPane>
|
||||||
<Descriptions.Item label="JVM Heap">
|
<TabPane tab="业务部门" key="2">
|
||||||
27.60%
|
Content of Tab Pane 2
|
||||||
<p className={styles.light}>565.3 GB / 2.0 GB</p>
|
</TabPane>
|
||||||
</Descriptions.Item>
|
</Tabs>
|
||||||
</Descriptions>
|
</Card>
|
||||||
</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>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,8 @@
|
||||||
|
|
||||||
.clusterItemCard {
|
.clusterItemCard {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue