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

Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center

This commit is contained in:
liugq 2021-09-28 09:40:37 +08:00
parent 220d990953 1b2fd0af67
commit 1efca99090
7 changed files with 314 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/config/router.config.js
View File

@ -18,7 +18,7 @@ export default [
authority: ['admin', 'user'],
routes: [
// cluster
{ path: '/', redirect: '/cluster/overview/' },
{ path: '/', redirect: '/cluster/overview' },
{
path: '/cluster',
name: 'cluster',
@ -34,10 +34,10 @@ export default [
// ],
// },
{
path: '/cluster/overview/:cluster_id',
path: '/cluster/overview',
name: 'overview',
component: './Cluster/Overview',
hideInMenu: true,
// hideInMenu: true,
routes:[
{ path: '/', redirect: '/' },
],

2
web/src/models/global.js
View File

@ -250,6 +250,8 @@ export default {
let clusterVisible = true;
if(pathname.startsWith("/system")){
clusterVisible = false;
}else if(pathname.startsWith("/cluster/overview")){
clusterVisible = false;
}else{
if(!pathname.startsWith("/exception")){
dispatch({

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

@ -1,102 +1,135 @@
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 React from 'react';
import {List,Card,Row,Icon,Col} from "antd";
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 = [
import {formatGigNumber} from "@/utils/utils";
const tabList = [
{
title: 'Ant Design Title 1',
key: 'tabCluster',
tab: '集群',
},
{
title: 'Ant Design Title 2',
key: 'tabHost',
tab: '主机',
},
{
title: 'Ant Design Title 3',
},
{
title: 'Ant Design Title 4',
key: 'tabNode',
tab: '节点',
},
];
@connect(({global}) => ({
selectedCluster: global.selectedCluster
}))
class Overview extends React.Component {
state = {
tabkey: 'tabCluster',
};
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>
onOperationTabChange = key => {
this.setState({ tabkey: key });
};
<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 />
render() {
</TabPane>
<TabPane tab="业务部门" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
</Card>
</Col>
</Row>
const { tabkey } = this.state;
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;

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

@ -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 {
text-align: center;
.tabsCard {
:global {
.ant-card-head {
padding: 0 16px;
}
}
}
.card {
margin-bottom: 24px;
.rowSpace {
margin-bottom: 20px;
}
.clusterMeta {
.title {
padding-bottom: 10px;
border-bottom: 1px solid #eef1f4;
}
.total {
font-size: 40px;
}
.unit {
color: #767676;
font-size: 12px;
font-weight: normal;
}
}

102
web/src/pages/Cluster/OverviewV1.js Normal file
View File

@ -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;

27
web/src/pages/Cluster/OverviewV1.less Normal file
View File

@ -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;
}

47
web/src/utils/utils.js
View File

@ -180,4 +180,51 @@ export function formatWan(val) {
export function isAntdPro() {
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
}