Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center
This commit is contained in:
liugq
commit
1efca99090
|
|
@ -18,7 +18,7 @@ export default [
|
||||||
authority: ['admin', 'user'],
|
authority: ['admin', 'user'],
|
||||||
routes: [
|
routes: [
|
||||||
// cluster
|
// cluster
|
||||||
{ path: '/', redirect: '/cluster/overview/' },
|
{ path: '/', redirect: '/cluster/overview' },
|
||||||
{
|
{
|
||||||
path: '/cluster',
|
path: '/cluster',
|
||||||
name: 'cluster',
|
name: 'cluster',
|
||||||
|
|
@ -34,10 +34,10 @@ export default [
|
||||||
// ],
|
// ],
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
path: '/cluster/overview/:cluster_id',
|
path: '/cluster/overview',
|
||||||
name: 'overview',
|
name: 'overview',
|
||||||
component: './Cluster/Overview',
|
component: './Cluster/Overview',
|
||||||
hideInMenu: true,
|
// hideInMenu: true,
|
||||||
routes:[
|
routes:[
|
||||||
{ path: '/', redirect: '/' },
|
{ path: '/', redirect: '/' },
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -250,6 +250,8 @@ export default {
|
||||||
let clusterVisible = true;
|
let clusterVisible = true;
|
||||||
if(pathname.startsWith("/system")){
|
if(pathname.startsWith("/system")){
|
||||||
clusterVisible = false;
|
clusterVisible = false;
|
||||||
|
}else if(pathname.startsWith("/cluster/overview")){
|
||||||
|
clusterVisible = false;
|
||||||
}else{
|
}else{
|
||||||
if(!pathname.startsWith("/exception")){
|
if(!pathname.startsWith("/exception")){
|
||||||
dispatch({
|
dispatch({
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,135 @@
|
||||||
import React, {Fragment} from 'react';
|
import React from 'react';
|
||||||
import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions, Button} from "antd";
|
import {List,Card,Row,Icon,Col} from "antd";
|
||||||
import {Link} from "umi"
|
|
||||||
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 {formatGigNumber} from "@/utils/utils";
|
||||||
import CalendarHeatmap from 'react-calendar-heatmap';
|
|
||||||
import 'react-calendar-heatmap/dist/styles.css';
|
|
||||||
import { Avatar } from 'antd';
|
const tabList = [
|
||||||
import { Tabs } from 'antd';
|
|
||||||
const { TabPane } = Tabs;
|
|
||||||
import ClusterLoadMore from "../../components/List/LoadMoreList"
|
|
||||||
const data = [
|
|
||||||
{
|
{
|
||||||
title: 'Ant Design Title 1',
|
key: 'tabCluster',
|
||||||
|
tab: '集群',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Ant Design Title 2',
|
key: 'tabHost',
|
||||||
|
tab: '主机',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Ant Design Title 3',
|
key: 'tabNode',
|
||||||
},
|
tab: '节点',
|
||||||
{
|
|
||||||
title: 'Ant Design Title 4',
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
@connect(({global}) => ({
|
@connect(({global}) => ({
|
||||||
selectedCluster: global.selectedCluster
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
|
||||||
class Overview extends React.Component {
|
class Overview extends React.Component {
|
||||||
|
state = {
|
||||||
|
tabkey: 'tabCluster',
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
onOperationTabChange = key => {
|
||||||
return (
|
this.setState({ tabkey: key });
|
||||||
<div>
|
};
|
||||||
<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'}>
|
render() {
|
||||||
<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 lg={7} md={24}>
|
|
||||||
<Card>
|
|
||||||
<Tabs defaultActiveKey="1" >
|
|
||||||
<TabPane tab="Elasticsearch" key="1" >
|
|
||||||
<ClusterLoadMore />
|
|
||||||
|
|
||||||
</TabPane>
|
const { tabkey } = this.state;
|
||||||
<TabPane tab="业务部门" key="2">
|
|
||||||
Content of Tab Pane 2
|
|
||||||
</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
|
const contentList = {
|
||||||
|
tabCluster: (
|
||||||
|
<Card title="集群列表" style={{ marginBottom: 24 }} bordered={false}>
|
||||||
|
<div>
|
||||||
|
<Icon type="frown-o" />
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
),
|
||||||
|
tabHost: (
|
||||||
|
<Card title="主机列表" style={{ marginBottom: 24 }} bordered={false}>
|
||||||
|
<div>
|
||||||
|
<Icon type="frown-o" />
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
),
|
||||||
|
tabNode: (
|
||||||
|
<Card title="节点列表" style={{ marginBottom: 24 }} bordered={false}>
|
||||||
|
<div>
|
||||||
|
<Icon type="frown-o" />
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Row gutter={24} className={styles.rowSpace}>
|
||||||
|
<Col md={6} sm={12}>
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ paddingBottom: 20 }}
|
||||||
|
className={styles.clusterMeta}
|
||||||
|
>
|
||||||
|
<Card.Meta title='集群总数' className={styles.title} />
|
||||||
|
<div>
|
||||||
|
<span className={styles.total}>1</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col md={6} sm={12}>
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ paddingBottom: 20 }}
|
||||||
|
className={styles.clusterMeta}
|
||||||
|
>
|
||||||
|
<Card.Meta title='主机总数' className={styles.title} />
|
||||||
|
<div>
|
||||||
|
<span className={styles.total}>1</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col md={6} sm={12}>
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ paddingBottom: 20 }}
|
||||||
|
className={styles.clusterMeta}
|
||||||
|
>
|
||||||
|
<Card.Meta title='节点总数' className={styles.title} />
|
||||||
|
<div>
|
||||||
|
<span className={styles.total}>1</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col md={6} sm={12}>
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ paddingBottom: 20 }}
|
||||||
|
className={styles.clusterMeta}
|
||||||
|
>
|
||||||
|
<Card.Meta title='存储空间' className={styles.title} />
|
||||||
|
<div>
|
||||||
|
<span className={styles.total}>100</span><span className={styles.unit}>GB</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
</div>
|
<Row gutter={24} className={styles.rowSpace}>
|
||||||
)
|
<Col lg={24} md={24}>
|
||||||
}
|
<Card
|
||||||
|
className={styles.tabsCard}
|
||||||
|
bordered={false}
|
||||||
|
tabList={tabList}
|
||||||
|
onTabChange={this.onOperationTabChange}
|
||||||
|
>
|
||||||
|
{contentList[tabkey]}
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Overview;
|
export default Overview;
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,25 @@
|
||||||
.overview{
|
|
||||||
:global(.ant-descriptions-row){
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
:global(.ant-descriptions-item-label){
|
|
||||||
border-right: none;
|
|
||||||
background-color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
:global(.ant-descriptions-view){
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
:global(.ant-descriptions-item-content){
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.light{
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clusterItemCard {
|
.tabsCard {
|
||||||
text-align: center;
|
:global {
|
||||||
|
.ant-card-head {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.rowSpace {
|
||||||
.card {
|
margin-bottom: 20px;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
.clusterMeta {
|
||||||
|
.title {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #eef1f4;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
color: #767676;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import React, {Fragment} from 'react';
|
||||||
|
import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions, Button} from "antd";
|
||||||
|
import {Link} from "umi"
|
||||||
|
import moment from "moment";
|
||||||
|
import styles from "./Overview.less";
|
||||||
|
import {connect} from "dva";
|
||||||
|
import {ClusterItem} from "./ClusterList";
|
||||||
|
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 {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<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 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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Overview;
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
.overview{
|
||||||
|
:global(.ant-descriptions-row){
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
:global(.ant-descriptions-item-label){
|
||||||
|
border-right: none;
|
||||||
|
background-color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
:global(.ant-descriptions-view){
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
:global(.ant-descriptions-item-content){
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.light{
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clusterItemCard {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
@ -180,4 +180,51 @@ export function formatWan(val) {
|
||||||
|
|
||||||
export function isAntdPro() {
|
export function isAntdPro() {
|
||||||
return window.location.hostname === 'preview.pro.ant.design';
|
return window.location.hostname === 'preview.pro.ant.design';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 大数字转换，将大额数字转换为万、千万、亿等
|
||||||
|
* @param value 数字值
|
||||||
|
*/
|
||||||
|
export function formatGigNumber (value) {
|
||||||
|
const newValue = ['', '', '']
|
||||||
|
let fr = 1000
|
||||||
|
let num = 3
|
||||||
|
let text1 = ''
|
||||||
|
let fm = 1
|
||||||
|
while (value / fr >= 1) {
|
||||||
|
fr *= 10
|
||||||
|
num += 1
|
||||||
|
// console.log('数字', value / fr, 'num:', num)
|
||||||
|
}
|
||||||
|
if (num <= 4) { // 千
|
||||||
|
newValue[0] = value + ''
|
||||||
|
newValue[1] = ''
|
||||||
|
} else if (num <= 8) { // 万
|
||||||
|
fm = 10000
|
||||||
|
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
|
||||||
|
newValue[1] = '万'
|
||||||
|
} else if (num <= 16) { // 亿
|
||||||
|
text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
|
||||||
|
text1 = (num - 8) / 4 > 1 ? '万亿' : text1
|
||||||
|
text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
|
||||||
|
// tslint:disable-next-line:no-shadowed-variable
|
||||||
|
fm = 1
|
||||||
|
if (text1 === '亿') {
|
||||||
|
fm = 100000000
|
||||||
|
} else if (text1 === '千亿') {
|
||||||
|
fm = 100000000000
|
||||||
|
} else if (text1 === '万亿') {
|
||||||
|
fm = 1000000000000
|
||||||
|
} else if (text1 === '千万亿') {
|
||||||
|
fm = 1000000000000000
|
||||||
|
}
|
||||||
|
if (value % fm === 0) {
|
||||||
|
newValue[0] = parseInt(value / fm) + ''
|
||||||
|
} else {
|
||||||
|
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
|
||||||
|
}
|
||||||
|
newValue[1] = text1
|
||||||
|
}
|
||||||
|
return newValue
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue