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 {connect} from "dva";
|
||||
import {ClusterItem} from "./ClusterList";
|
||||
|
||||
let HealthCircle = (props)=>{
|
||||
return (
|
||||
<div style={{
|
||||
background: props.color,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 12,
|
||||
display: "inline-block",
|
||||
marginRight: 3,
|
||||
}}></div>
|
||||
)
|
||||
}
|
||||
import CalendarHeatmap from 'react-calendar-heatmap';
|
||||
import 'react-calendar-heatmap/dist/styles.css';
|
||||
import { Avatar } from 'antd';
|
||||
import { Tabs } from 'antd';
|
||||
const { TabPane } = Tabs;
|
||||
import ClusterLoadMore from "../../components/List/LoadMoreList"
|
||||
const data = [
|
||||
{
|
||||
title: 'Ant Design Title 1',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 2',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 3',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 4',
|
||||
},
|
||||
];
|
||||
|
||||
@connect(({global}) => ({
|
||||
selectedCluster: global.selectedCluster
|
||||
}))
|
||||
|
||||
|
||||
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() {
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('Listening: ', name);
|
||||
// }, [name]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.handleChangeClusterById}>change cluster</Button>
|
||||
<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>
|
||||
<Row gutter={24}>
|
||||
<Col lg={17} md={24}>
|
||||
<Card className={styles.card} title={'Overall Platform Status'}>
|
||||
<CalendarHeatmap
|
||||
showMonthLabels={false}
|
||||
showWeekdayLabels={false}
|
||||
showOutOfRangeDays={true}
|
||||
startDate={new Date('2016-01-01')}
|
||||
endDate={new Date('2016-12-31')}
|
||||
monthLabels={['01','02','03','04','05','06',
|
||||
'07','08','09','10','11','12']}
|
||||
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 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>
|
||||
<Col lg={7} md={24}>
|
||||
<Card>
|
||||
<Tabs defaultActiveKey="1" >
|
||||
<TabPane tab="Elasticsearch" key="1" >
|
||||
<ClusterLoadMore />
|
||||
|
||||
</TabPane>
|
||||
<TabPane tab="业务部门" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</Col>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,7 @@
|
|||
.clusterItemCard {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue