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

add endpoints dashboard page

This commit is contained in:
liaosy 2020-03-27 23:51:44 +08:00
parent ff1b62d22b
commit 1c6b10cfa7
4 changed files with 384 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/web/config/router.config.js
View File

@ -17,7 +17,7 @@ export default [
Routes: ['src/pages/Authorized'],
authority: ['admin', 'user'],
routes: [
//测试专用
{
path: '/test',
@ -25,7 +25,7 @@ export default [
icon: 'AppstoreAdd',
component: './Endpoints/Execute',
},
// dashboard
{ path: '/', redirect: '/platform' },
{
@ -40,10 +40,10 @@ export default [
path: '/endpoints',
name: 'endpoints',
icon: 'database',
component: './List/TableList',
component: './Endpoints/Dashboard',
},
//reportings
{
path: '/reports',
@ -52,7 +52,7 @@ export default [
component: './List/TableList',
},
//logging
{
path: '/logs',

247
app/web/src/pages/Endpoints/Dashboard.js Normal file
View File

@ -0,0 +1,247 @@
import React, { PureComponent } from 'react';
import { Button, Table, Row, Col, Card, Input, Badge , List } from 'antd';
import {
EyeFilled,EyeInvisibleFilled,
LeftOutlined, RightOutlined,EllipsisOutlined
} from '@ant-design/icons';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Dashboard.less';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 5,
};
}
increase = () => {
const count = this.state.count + 1;
this.setState({ count });
console.log('increase count:', count);
};
decline = () => {
let count = this.state.count - 1;
if (count < 0) {
count = 0;
}
this.setState({ count });
console.log('decline count:', count);
};
render() {
const dataSource = [
{
os: 'Windows',
name: "LENOVO",
ip: '192.168.3.1',
status: "active", //active/inactive/unmonitored
last_active: "2020-03-21 11:12:33",
tag: ["win10"],
},
{
os: "Linux",
name: 'RaspberryPi',
ip: '192.168.3.81',
last_active: "2020-03-21 11:12:33",
status: "inactive", //active/inactive/unmonitored
tag: ["win10"],
credentials:{
user: "pi",
password: "elastic"
}
},
];
const columns = [
{
title: '终端名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'IP地址',
dataIndex: 'ip',
key: 'ip',
},
{
title: 'OS',
dataIndex: 'os',
key: 'os',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
},
{
title: '最近活跃时间',
dataIndex: 'last_active',
key: 'last_active',
},
];
const style = { background: '#ffffff'};
const { Search } = Input;
const ButtonGroup = Button.Group;
const groupExtra = (
<ButtonGroup size="small">
<Button onClick={this.decline}>
<LeftOutlined />
</Button>
<Button onClick={this.increase}>
<RightOutlined />
</Button>
</ButtonGroup>
);
return (
<PageHeaderWrapper title="终端管理">
<div style={{"padding":"15px 0","backgroundColor":"white"}}>
<div className={styles.panel}>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{52}
</div>
<div className={styles.name}>
{'all'}
</div>
</div>
</div>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{27}
</div>
<div className={styles.name}>
{'windows'}
</div>
</div>
</div>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{15}
</div>
<div className={styles.name}>
{'linux'}
</div>
</div>
</div>
</div>
<div className={styles.subPanel}>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{52}
</div>
<div className={styles.name}>
{'total'}
</div>
<EyeFilled />
</div>
</div>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{37}
</div>
<div className={styles.name}>
{'active'}
</div>
<EyeInvisibleFilled />
</div>
</div>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{13}
</div>
<div className={styles.name}>
{'inactive'}
</div>
<EyeInvisibleFilled />
</div>
</div>
<div className={styles.item}>
<div className={styles.wrap}>
<div className={styles.val}>
{2}
</div>
<div className={styles.name}>
{'unmonitored'}
</div>
<EyeInvisibleFilled />
</div>
</div>
<div className={styles.item}>
<div className={[styles.wrap, styles.wrapBorderLeft].join(' ')}>
<div className={styles.val}>
{0}
</div>
<div className={styles.name}>
{'isolated'}
</div>
<EyeInvisibleFilled />
</div>
</div>
</div>
</div>
<br />
<Row gutter={[16, 24]}>
<Col span={6}>
<div style={style}>
<Card title="GROUPS" extra={groupExtra} style={{ width: 300 }}>
<div>
<Search
placeholder="搜索"
onSearch={value => console.log(value)}
style={{ width: '100%' }}
/>
</div>
<div className={styles.groupSection}>
<div className={styles.content}>
<div className={styles.item}>
<div className={styles.itemContent}>
<span className={styles.text}>Demo</span>
<Badge className={styles.badge} count={25} style={{ backgroundColor: '#188FFE', 'padding': '0 12px' }} />
</div>
<span className={styles.itemOption}>
<EllipsisOutlined />
</span>
</div>
<div className={styles.item}>
<div className={styles.itemContent}>
<span className={styles.text}>Windows</span>
<Badge className={styles.badge} count={17} style={{ backgroundColor: '#188FFE', 'padding': '0 12px' }} />
</div>
<span className={styles.itemOption}>
<EllipsisOutlined />
</span>
</div>
</div>
</div>
</Card>
</div>
</Col>
<Col span={18}>
<div style={style}>
<Table
rowSelection={{
type: 'checkbox'
}}
dataSource={dataSource}
columns={columns}
/>;
</div>
</Col>
</Row>
</PageHeaderWrapper>
);
}
}
export default Dashboard;

131
app/web/src/pages/Endpoints/Dashboard.less Normal file
View File

@ -0,0 +1,131 @@
.colmargin {
padding: 0 10px;
}
@colorWhite:white;
.colRed {
.colmargin;
background-color: red;
height: 30px;
color: white;
}
.colBlue {
.colmargin;
background-color: blueviolet;
height: 30px;
color: white;
}
.panelItemClicked() {
border-top: 5px solid white;
background-color: grey;
cursor: pointer;
box-shadow: 1px -1px 3px 1px rgba(0,0,0,0.2), -1px 0px 3px 1px rgba(0,0,0,0.2);
}
.panel {
height: 80px;
background-color: #314659;
padding-left: 15px;
border-radius: 5px;
.item {
&:hover {
.panelItemClicked();
}
position: relative;
display: inline-block;
width: 100px;
height: 100%;
text-align: center;
.wrap {
width: 100%;
position: absolute;
top: 50%;
transform: translate(0,-50%);
.val {
color:@colorWhite;
font-size: 24px;
}
.name {
color:@colorWhite;
font-size: 14px;
text-transform:capitalize;
}
}
}
.item.clicked {
.panelItemClicked();
}
}
.subPanel {
height: 80px;
background-color: white;
padding-left: 15px;
.item {
position: relative;
display: inline-block;
width: 100px;
height: 100%;
text-align: center;
.wrap {
&:hover {
font-weight: bold;
}
width: 100%;
position: absolute;
top: 50%;
transform: translate(0,-50%);
.val {
font-size: 18px;
}
.name {
font-size: 14px;
text-transform:capitalize;
}
}
.wrapBorderLeft {
border-left:1px solid #fafafa;
}
}
}
.groupSection {
.content {
margin:10px 0;
.item {
position: relative;
.itemContent {
display: inline-block;
border: 1px solid #e8e8e8;
position: relative;
width: 85%;
padding:0 10px;
background-color: #fafafa;
.text {
display: inline-block;
float: left;
}
.badge {
display: inline-block;
float: right;
}
}
.itemOption {
display: inline-block;
background-color: #fafafa;
border: 1px solid #e8e8e8;
text-align: center;
width: 13%;
float: right;
}
}
}
}

1
package.json
View File

@ -4,6 +4,7 @@
"description": "极限日志分析中心，简单易用。",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.0.0",
"@antv/data-set": "^0.9.6",
"@babel/runtime": "^7.1.2",
"antd": "^3.10.0",