diff --git a/app/web/config/router.config.js b/app/web/config/router.config.js index 642f58cd..34b1126a 100644 --- a/app/web/config/router.config.js +++ b/app/web/config/router.config.js @@ -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', diff --git a/app/web/src/pages/Endpoints/Dashboard.js b/app/web/src/pages/Endpoints/Dashboard.js new file mode 100644 index 00000000..97d56d42 --- /dev/null +++ b/app/web/src/pages/Endpoints/Dashboard.js @@ -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 = ( + + + + + ); + return ( + +
+
+
+
+
+ {52} +
+
+ {'all'} +
+
+
+
+
+
+ {27} +
+
+ {'windows'} +
+
+
+
+
+
+ {15} +
+
+ {'linux'} +
+
+
+
+
+
+
+
+ {52} +
+
+ {'total'} +
+ +
+
+
+
+
+ {37} +
+
+ {'active'} +
+ +
+
+
+
+
+ {13} +
+
+ {'inactive'} +
+ +
+
+
+
+
+ {2} +
+
+ {'unmonitored'} +
+ +
+
+
+
+
+ {0} +
+
+ {'isolated'} +
+ +
+
+
+
+ +
+ + +
+ +
+ console.log(value)} + style={{ width: '100%' }} + /> +
+
+
+
+
+ Demo + +
+ + + +
+
+
+ Windows + +
+ + + +
+
+
+ +
+ + +
+ ; + + + + + + ); + } +} + +export default Dashboard; diff --git a/app/web/src/pages/Endpoints/Dashboard.less b/app/web/src/pages/Endpoints/Dashboard.less new file mode 100644 index 00000000..ba3e4f70 --- /dev/null +++ b/app/web/src/pages/Endpoints/Dashboard.less @@ -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; + } + } + } +} + + + + diff --git a/package.json b/package.json index e4c32357..466f3f4b 100644 --- a/package.json +++ b/package.json @@ -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",