修改dashboard页面

This commit is contained in:
dushixiang
2020-12-22 22:25:59 +08:00
parent e7f2773c77
commit 6a4fe85433
15 changed files with 729 additions and 503 deletions

1
go.mod
View File

@ -11,7 +11,6 @@ require (
github.com/labstack/gommon v0.3.0
github.com/patrickmn/go-cache v2.1.0+incompatible
github.com/pkg/sftp v1.12.0
github.com/shirou/gopsutil v3.20.10+incompatible
github.com/spf13/viper v1.7.1
golang.org/x/crypto v0.0.0-20200820211705-5c72a883971a
gorm.io/driver/mysql v1.0.1

17
main.go
View File

@ -11,6 +11,7 @@ import (
"next-terminal/pkg/handle"
"next-terminal/pkg/model"
"next-terminal/pkg/utils"
"strconv"
"time"
)
@ -34,9 +35,7 @@ func Run() error {
return err
}
users := model.FindAllUser()
if len(users) == 0 {
if len(model.FindAllUser()) == 0 {
var pass []byte
if pass, err = utils.Encoder.Encode([]byte("admin")); err != nil {
@ -71,6 +70,18 @@ func Run() error {
return err
}
if err := config.DB.AutoMigrate(&model.Num{}); err != nil {
return err
}
if len(model.FindAllTemp()) == 0 {
for i := 0; i <= 30; i++ {
if err := model.CreateNewTemp(&model.Num{I: strconv.Itoa(i)}); err != nil {
return err
}
}
}
config.Cache = cache.New(5*time.Minute, 10*time.Minute)
config.Store = config.NewStore()
e := api.SetupRoutes()

View File

@ -1,41 +1,10 @@
package api
import (
"next-terminal/pkg/model"
"fmt"
"github.com/labstack/echo/v4"
"github.com/shirou/gopsutil/cpu"
"github.com/shirou/gopsutil/load"
"github.com/shirou/gopsutil/mem"
"time"
"next-terminal/pkg/model"
)
type OverviewStatus struct {
Load Load `json:"load"`
Memory Memory `json:"memory"`
CPU CPU `json:"cpu"`
}
type Load struct {
Load1 float64 `json:"load1"`
Load5 float64 `json:"load5"`
Load15 float64 `json:"load15"`
}
type Memory struct {
Total uint64 `json:"total"`
Available uint64 `json:"available"`
UsedPercent float64 `json:"usedPercent"`
Used uint64 `json:"used"`
}
type CPU struct {
PhysicalCount int `json:"physicalCount"`
LogicalCount int `json:"logicalCount"`
Percent float64 `json:"percent"`
ModelName string `json:"modelName"`
}
type Counter struct {
User int64 `json:"user"`
Asset int64 `json:"asset"`
@ -43,44 +12,6 @@ type Counter struct {
OnlineSession int64 `json:"onlineSession"`
}
func OverviewStatusEndPoint(c echo.Context) error {
info, _ := load.Avg()
memory, _ := mem.VirtualMemory()
infoStats, _ := cpu.Info()
physicalCount, _ := cpu.Counts(false)
logicalCount, _ := cpu.Counts(true)
cps, _ := cpu.Percent(time.Second, false)
fmt.Printf("%+v\n", info)
fmt.Printf("%+v\n", memory)
fmt.Printf("%+v\n", infoStats)
fmt.Printf("%+v\n", physicalCount)
fmt.Printf("%+v\n", logicalCount)
fmt.Printf("%+v\n", cps)
overviewStatus := OverviewStatus{
Load: Load{
Load1: info.Load1,
Load5: info.Load5,
Load15: info.Load15,
},
Memory: Memory{
Total: memory.Total,
Available: memory.Available,
UsedPercent: memory.UsedPercent,
Used: memory.Used,
},
CPU: CPU{
PhysicalCount: physicalCount,
LogicalCount: logicalCount,
Percent: cps[0],
ModelName: infoStats[0].ModelName,
},
}
return Success(c, overviewStatus)
}
func OverviewCounterEndPoint(c echo.Context) error {
countUser, _ := model.CountUser()
countOnlineSession, _ := model.CountOnlineSession()
@ -96,3 +27,17 @@ func OverviewCounterEndPoint(c echo.Context) error {
return Success(c, counter)
}
func OverviewSessionPoint(c echo.Context) (err error) {
d := c.QueryParam("d")
var results []model.D
if d == "m" {
results, err = model.CountSessionByDay(30)
} else {
results, err = model.CountSessionByDay(7)
}
if err != nil {
return err
}
return Success(c, results)
}

View File

@ -1,13 +1,13 @@
package api
import (
"next-terminal/pkg/model"
"fmt"
"github.com/labstack/echo/v4"
"next-terminal/pkg/model"
)
func PropertyGetEndpoint(c echo.Context) error {
properties := model.FindAllProperties()
properties := model.FindAllTemp()
return Success(c, properties)
}

View File

@ -97,8 +97,8 @@ func SetupRoutes() *echo.Echo {
e.GET("/properties", PropertyGetEndpoint)
e.PUT("/properties", PropertyUpdateEndpoint)
e.GET("/overview/status", OverviewStatusEndPoint)
e.GET("/overview/counter", OverviewCounterEndPoint)
e.GET("/overview/sessions", OverviewSessionPoint)
return e
}

View File

@ -1,33 +0,0 @@
package main
func main() {
//v, _ := mem.VirtualMemory()
//c, _ := cpu.Info()
//cc, _ := cpu.Percent(time.Second, false)
//d, _ := disk.Usage("/")
//n, _ := host.Info()
//nv, _ := net.IOCounters(true)
//boottime, _ := host.BootTime()
//btime := time.Unix(int64(boottime), 0).Format("2006-01-02 15:04:05")
//
//fmt.Printf(" Mem : %v MB Free: %v MB Used:%v Usage:%f%%\n", v.Total/1024/1024, v.Available/1024/1024, v.Used/1024/1024, v.UsedPercent)
//if len(c) > 1 {
// for _, sub_cpu := range c {
// modelname := sub_cpu.ModelName
// cores := sub_cpu.Cores
// fmt.Printf(" CPU : %v %v cores \n", modelname, cores)
// }
//} else {
// sub_cpu := c[0]
// modelname := sub_cpu.ModelName
// cores := sub_cpu.Cores
// fmt.Printf(" CPU : %v %v cores \n", modelname, cores)
//
//}
//fmt.Printf(" Network: %v bytes / %v bytes\n", nv[0].BytesRecv, nv[0].BytesSent)
//fmt.Printf(" SystemBoot:%v\n", btime)
//fmt.Printf(" CPU Used : used %f%% \n", cc[0])
//fmt.Printf(" HD : %v GB Free: %v GB Usage:%f%%\n", d.Total/1024/1024/1024, d.Free/1024/1024/1024, d.UsedPercent)
//fmt.Printf(" OS : %v(%v) %v \n", n.Platform, n.PlatformFamily, n.PlatformVersion)
//fmt.Printf(" Hostname : %v \n", n.Hostname)
}

25
pkg/model/num.go Normal file
View File

@ -0,0 +1,25 @@
package model
import (
"next-terminal/pkg/config"
)
type Num struct {
I string `gorm:"primary_key" json:"i"`
}
func (r *Num) TableName() string {
return "nums"
}
func FindAllTemp() (o []Num) {
if config.DB.Find(&o).Error != nil {
return nil
}
return
}
func CreateNewTemp(o *Num) (err error) {
err = config.DB.Create(o).Error
return
}

View File

@ -3,6 +3,7 @@ package model
import (
"next-terminal/pkg/config"
"next-terminal/pkg/utils"
"time"
)
const (
@ -136,3 +137,31 @@ func CountOnlineSession() (total int64, err error) {
err = config.DB.Where("status = ?", Connected).Find(&Session{}).Count(&total).Error
return
}
type D struct {
Day string `json:"day"`
Count int `json:"count"`
Protocol string `json:"protocol"`
}
func CountSessionByDay(day int) (results []D, err error) {
today := time.Now().Format("20060102")
sql := "select t1.`day`, count(t2.id) as count\nfrom (\n SELECT @date := DATE_ADD(@date, INTERVAL - 1 DAY) day\n FROM (SELECT @date := DATE_ADD('" + today + "', INTERVAL + 1 DAY) FROM nums) as t0\n LIMIT ?\n )\n as t1\n left join\n (\n select DATE(s.connected_time) as day, s.id\n from sessions as s\n WHERE protocol = ? and DATE(connected_time) <= '" + today + "'\n AND DATE(connected_time) > DATE_SUB('" + today + "', INTERVAL ? DAY)\n ) as t2 on t1.day = t2.day\ngroup by t1.day"
protocols := []string{"rdp", "ssh", "vnc", "telnet"}
for i := range protocols {
var result []D
err = config.DB.Raw(sql, day, protocols[i], day).Scan(&result).Error
if err != nil {
return nil, err
}
for j := range result {
result[j].Protocol = protocols[i]
}
results = append(results, result...)
}
return
}

858
web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -36,6 +36,9 @@
],
"homepage": ".",
"devDependencies": {
"@ant-design/charts": "^1.0.13",
"g2": "^2.3.13",
"g2-react": "^1.3.2",
"umi-request": "^1.3.5",
"xterm-addon-attach": "^0.6.0",
"xterm-addon-fit": "^0.4.0"

View File

@ -1,5 +1,4 @@
import React, {Component} from 'react';
import "video-react/dist/video-react.css";
import {
Badge,

View File

@ -1,5 +1,4 @@
import React, {Component} from 'react';
import "video-react/dist/video-react.css";
import {Button, Col, Divider, Input, Layout, Modal, PageHeader, Row, Space, Table, Tooltip, Typography} from "antd";
import qs from "qs";

View File

@ -1,10 +1,11 @@
import React, {Component} from 'react';
import {Layout, PageHeader, Card, Row, Col, Progress, Typography, Popover, Statistic} from "antd";
import {DesktopOutlined, IdcardOutlined, LikeOutlined, LinkOutlined, UserOutlined} from '@ant-design/icons';
import {Card, Col, Layout, PageHeader, Radio, Row, Statistic, Typography} from "antd";
import {DesktopOutlined, IdcardOutlined, LinkOutlined, UserOutlined} from '@ant-design/icons';
import {itemRender} from '../../utils/utils'
import request from "../../common/request";
import './Dashboard.css'
import {Link} from "react-router-dom";
import {Area} from '@ant-design/charts';
const {Content} = Layout;
const {Title, Paragraph} = Typography;
@ -24,78 +25,59 @@ const routes = [
class Dashboard extends Component {
state = {
status: {
load: {
load1: 0,
load5: 0,
load15: 0,
},
cpu: {
percent: 0,
logicalCount: 0,
physicalCount: 0
},
memory: {
usedPercent: 0,
available: 0,
total: 0,
used: 0
}
},
interval: null,
counter: {}
counter: {},
d: 'w',
session: [],
}
componentDidMount() {
this.getCounter();
this.getStatus();
this.setState({
interval: setInterval(() => this.getStatus(), 5000)
})
this.getD();
}
componentWillUnmount() {
if (this.state.interval != null) {
clearInterval(this.state.interval);
}
}
getStatus = async () => {
let result = await request.get('/overview/status');
if (result.code === 1) {
this.setState({
status: result.data
})
}
}
getCounter = async () => {
let result = await request.get('/overview/counter');
if (result.code === 1) {
if (result['code'] === 1) {
this.setState({
counter: result.data
counter: result['data']
})
}
}
getD = async () => {
let result = await request.get('/overview/sessions?d=' + this.state.d);
if (result['code'] === 1) {
this.setState({
session: result['data']
})
console.log('set session', this.state.session)
}
}
handleChangeD = (e) => {
let d = e.target.value;
this.setState({
d: d
}, () => this.getD())
}
render() {
const loadContent = (
<div>
<p>最近1分钟负载{this.state.status.load['load1'].toFixed(1)}</p>
<p>最近5分钟负载{this.state.status.load['load5'].toFixed(1)}</p>
<p>最近15分钟负载{this.state.status.load['load15'].toFixed(1)}</p>
</div>
);
const config = {
data: this.state.session,
xField: 'day',
yField: 'count',
seriesField: 'protocol',
};
const cpuContent = (
<div>
<p>CPU型号{this.state.status.cpu['modelName']}</p>
<p>物理核心{this.state.status.cpu['physicalCount']}</p>
<p>逻辑核心{this.state.status.cpu['logicalCount']}</p>
</div>
);
const buttonRadio = <Radio.Group value={this.state.d} onChange={this.handleChangeD}>
<Radio.Button value="w">按周</Radio.Button>
<Radio.Button value="m">按月</Radio.Button>
</Radio.Group>
return (
<>
@ -150,41 +132,8 @@ class Dashboard extends Component {
</div>
<div className="page-card">
<Card title="状态" bordered={true}>
<Row>
<Col span={4}>
<Title level={5} className="text-center">负载状态</Title>
<Popover placement="topLeft" title={"负载详情"} content={loadContent}>
<Progress type="circle" width={100}
percent={this.state.status.load['load1'].toFixed(1)}/>
</Popover>
<Paragraph className="text-center">运行流畅</Paragraph>
</Col>
<Col span={4}>
<Title level={5} className="text-center">CPU使用率</Title>
<Popover placement="topLeft" title={"CPU详情"} content={cpuContent}>
<Progress type="circle" width={100}
percent={this.state.status.cpu['percent'].toFixed(1)}/>
</Popover>
<Paragraph className="text-center">{this.state.status.cpu['logicalCount']}核心</Paragraph>
</Col>
<Col span={4}>
<Title level={5} className="text-center">内存使用率</Title>
<Progress type="circle" width={100}
percent={this.state.status.memory['usedPercent'].toFixed(1)}/>
<Paragraph className="text-center">
{Math.floor(this.state.status.memory['used'] / 1024 / 1024)}
/
{Math.floor(this.state.status.memory['total'] / 1024 / 1024)}
(MB)
</Paragraph>
</Col>
<Col span={4}>
</Col>
</Row>
<Card title="会话统计" bordered={true} extra={buttonRadio}>
<Area {...config} />
</Card>
</div>

View File

@ -1,5 +1,4 @@
import React, {Component} from 'react';
import "video-react/dist/video-react.css";
import {
Button,
@ -238,14 +237,14 @@ class OfflineSession extends Component {
render: (id, record, index) => {
return index + 1;
}
}, {
title: '用户昵称',
dataIndex: 'creatorName',
key: 'creatorName'
}, {
title: '来源IP',
dataIndex: 'clientIp',
key: 'clientIp'
}, {
title: '用户昵称',
dataIndex: 'creatorName',
key: 'creatorName'
}, {
title: '资产名称',
dataIndex: 'assetName',
@ -369,6 +368,13 @@ class OfflineSession extends Component {
<Col span={16} key={2} style={{textAlign: 'right'}}>
<Space>
<Search
ref={this.inputRefOfClientIp}
placeholder="来源IP"
allowClear
onSearch={this.handleSearchByClientIp}
/>
<Select
style={{width: 200}}
showSearch
@ -381,13 +387,6 @@ class OfflineSession extends Component {
{userOptions}
</Select>
<Search
ref={this.inputRefOfClientIp}
placeholder="来源IP"
allowClear
onSearch={this.handleSearchByClientIp}
/>
<Select
style={{width: 200}}
showSearch

View File

@ -1,5 +1,4 @@
import React, {Component} from 'react';
import "video-react/dist/video-react.css";
import {
Button,
@ -236,14 +235,14 @@ class OnlineSession extends Component {
render: (id, record, index) => {
return index + 1;
}
}, {
title: '用户昵称',
dataIndex: 'creatorName',
key: 'creatorName'
}, {
title: '来源IP',
dataIndex: 'clientIp',
key: 'clientIp'
}, {
title: '用户昵称',
dataIndex: 'creatorName',
key: 'creatorName'
}, {
title: '资产名称',
dataIndex: 'assetName',
@ -371,6 +370,13 @@ class OnlineSession extends Component {
<Col span={16} key={2} style={{textAlign: 'right'}}>
<Space>
<Search
ref={this.inputRefOfClientIp}
placeholder="来源IP"
allowClear
onSearch={this.handleSearchByClientIp}
/>
<Select
style={{width: 200}}
showSearch
@ -383,13 +389,6 @@ class OnlineSession extends Component {
{userOptions}
</Select>
<Search
ref={this.inputRefOfClientIp}
placeholder="来源IP"
allowClear
onSearch={this.handleSearchByClientIp}
/>
<Select
style={{width: 200}}
showSearch