mirror of https://github.com/openspug/spug
U web update
vapao
parent
c2ed994764
commit
a206ee05d7
|
|
@ -0,0 +1,48 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from 'antd';
|
||||||
|
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
|
||||||
|
import { http } from 'libs';
|
||||||
|
|
||||||
|
export default class AlarmTrend extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
loading: true,
|
||||||
|
res: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
http.get('/api/home/alarm/')
|
||||||
|
.then(res => this.setState({res}))
|
||||||
|
.finally(() => this.setState({loading: false}))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {res, loading} = this.state;
|
||||||
|
return (
|
||||||
|
<Card loading={loading} title="报警趋势">
|
||||||
|
<Chart height={300} data={res} padding={[10, 10, 30, 35]} forceFit>
|
||||||
|
<Axis name="date"/>
|
||||||
|
<Axis name="value"/>
|
||||||
|
<Tooltip
|
||||||
|
crosshairs={{
|
||||||
|
type: "y"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Geom type="line" position="date*value" size={2}/>
|
||||||
|
<Geom
|
||||||
|
type="point"
|
||||||
|
position="date*value"
|
||||||
|
size={4}
|
||||||
|
shape={"circle"}
|
||||||
|
style={{
|
||||||
|
stroke: "#fff",
|
||||||
|
lineWidth: 1
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Chart>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from 'antd';
|
||||||
|
import { Chart, Geom, Axis, Tooltip, Coord, Guide, Label } from 'bizcharts';
|
||||||
|
import DataSet from "@antv/data-set";
|
||||||
|
import { http } from 'libs';
|
||||||
|
|
||||||
|
export default class AlarmTrend extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
loading: true,
|
||||||
|
host: 0,
|
||||||
|
res: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
http.get('/api/home/deploy/')
|
||||||
|
.then(res => this.setState(res))
|
||||||
|
.finally(() => this.setState({loading: false}))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {res, host, loading} = this.state;
|
||||||
|
const dv = new DataSet.DataView();
|
||||||
|
dv.source(res).transform({
|
||||||
|
type: "percent",
|
||||||
|
field: "count",
|
||||||
|
dimension: "name",
|
||||||
|
as: "percent"
|
||||||
|
});
|
||||||
|
const cols = {
|
||||||
|
percent: {
|
||||||
|
formatter: val => {
|
||||||
|
val = val * 100 + "%";
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Card loading={loading} title="应用部署">
|
||||||
|
<Chart height={300} data={dv} scale={cols} padding={[0, 0, -40, 50]} forceFit>
|
||||||
|
<Coord type={"theta"} radius={0.75} innerRadius={0.6}/>
|
||||||
|
<Axis name="percent"/>
|
||||||
|
<Tooltip showTitle={false}/>
|
||||||
|
<Guide>
|
||||||
|
<Guide.Html
|
||||||
|
position={["50%", "50%"]}
|
||||||
|
html={`<div style="color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;">主机<br><span style="color:#262626;font-size:2.5em">${host}</span>台</div>`}
|
||||||
|
alignX="middle"
|
||||||
|
alignY="middle"
|
||||||
|
/>
|
||||||
|
</Guide>
|
||||||
|
<Geom
|
||||||
|
type="intervalStack"
|
||||||
|
position="percent"
|
||||||
|
color="name"
|
||||||
|
tooltip={[
|
||||||
|
"name*count",
|
||||||
|
(name, count) => {
|
||||||
|
return {
|
||||||
|
name: name,
|
||||||
|
value: count + '台'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
style={{lineWidth: 1, stroke: "#fff"}}>
|
||||||
|
<Label
|
||||||
|
content="percent"
|
||||||
|
formatter={(val, item) => {
|
||||||
|
return item.point.name + ": " + val;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Geom>
|
||||||
|
</Chart>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from 'antd';
|
||||||
|
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
|
||||||
|
import { http } from 'libs';
|
||||||
|
|
||||||
|
export default class RequestTop extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
loading: true,
|
||||||
|
res: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
http.get('/api/home/request/')
|
||||||
|
.then(res => this.setState({res}))
|
||||||
|
.finally(() => this.setState({loading: false}))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {res, loading} = this.state;
|
||||||
|
return (
|
||||||
|
<Card loading={loading} title="发布申请Top5">
|
||||||
|
<Chart height={300} data={res} padding={[10, 0, 30, 35]} forceFit>
|
||||||
|
<Axis name="name"/>
|
||||||
|
<Axis name="count" title/>
|
||||||
|
<Tooltip/>
|
||||||
|
<Geom type="interval" position="name*count"/>
|
||||||
|
</Chart>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Statistic, Card, Row, Col} from 'antd';
|
||||||
|
import { http } from 'libs';
|
||||||
|
|
||||||
|
export default class StatisticCard extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
loading: true,
|
||||||
|
res: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
http.get('/api/home/statistic/')
|
||||||
|
.then(res => this.setState({res}))
|
||||||
|
.finally(() => this.setState({loading: false}))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {res, loading} = this.state;
|
||||||
|
return (
|
||||||
|
<Row gutter={16} style={{marginBottom: 20}}>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card loading={loading}>
|
||||||
|
<Statistic title="应用" value={res.app} suffix="个" />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card loading={loading}>
|
||||||
|
<Statistic title="主机" value={res.host} suffix="台" />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card loading={loading}>
|
||||||
|
<Statistic title="任务" value={res.task} suffix="个" />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card loading={loading}>
|
||||||
|
<Statistic title="监控" value={res['detection']} suffix="项" />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,199 +1,25 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {observer} from 'mobx-react';
|
import { Row, Col } from 'antd';
|
||||||
import { Card, Row, Col } from 'antd';
|
import StatisticsCard from './StatisticCard';
|
||||||
import { StatisticsCard } from "../../components";
|
import AlarmTrend from './AlarmTrend';
|
||||||
import { Chart, Geom, Axis, Tooltip, Coord, Guide, Label } from 'bizcharts';
|
import RequestTop from './RequestTop';
|
||||||
import DataSet from "@antv/data-set";
|
import DeployPie from './DeployPie';
|
||||||
import store from './store';
|
|
||||||
|
|
||||||
@observer
|
|
||||||
class HomeIndex extends React.Component {
|
class HomeIndex extends React.Component {
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
failure: 0
|
|
||||||
};
|
|
||||||
this.data = [
|
|
||||||
{region: '北京机房', count: 275},
|
|
||||||
{region: '上海机房', count: 115},
|
|
||||||
{region: '杭州机房', count: 350},
|
|
||||||
];
|
|
||||||
this.cols = {
|
|
||||||
region: {alias: '机房'},
|
|
||||||
count: {alias: '服务器数量'}
|
|
||||||
};
|
|
||||||
this.data2 = [
|
|
||||||
{item: 'RPC-User', count: 5},
|
|
||||||
{item: 'SOA', count: 2},
|
|
||||||
{item: 'RPC-Order', count: 10},
|
|
||||||
{item: 'RPC-Goods', count: 10},
|
|
||||||
{item: 'WebServer', count: 5},
|
|
||||||
];
|
|
||||||
this.dv = new DataSet.DataView();
|
|
||||||
this.dv.source(this.data2).transform({
|
|
||||||
type: "percent",
|
|
||||||
field: "count",
|
|
||||||
dimension: "item",
|
|
||||||
as: "percent"
|
|
||||||
});
|
|
||||||
this.cols2 = {
|
|
||||||
percent: {
|
|
||||||
formatter: val => {
|
|
||||||
val = (val * 100).toFixed(0) + "%";
|
|
||||||
return val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// store.fetchInfo()
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
year: "1991",
|
|
||||||
value: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1992",
|
|
||||||
value: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1993",
|
|
||||||
value: 3.5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1994",
|
|
||||||
value: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1995",
|
|
||||||
value: 4.9
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1996",
|
|
||||||
value: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1997",
|
|
||||||
value: 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1998",
|
|
||||||
value: 9
|
|
||||||
},
|
|
||||||
{
|
|
||||||
year: "1999",
|
|
||||||
value: 13
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const cols = {
|
|
||||||
value: {
|
|
||||||
min: 0
|
|
||||||
},
|
|
||||||
year: {
|
|
||||||
range: [0, 1]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<StatisticsCard loading={store.isFetching}>
|
<StatisticsCard/>
|
||||||
<StatisticsCard.Item title="应用数量" value={100}/>
|
<AlarmTrend/>
|
||||||
<StatisticsCard.Item title="任务数量" value={32}/>
|
<Row style={{marginTop: 20}}>
|
||||||
<StatisticsCard.Item title="正常服务" value={<span style={{color: 'green'}}>99</span>}/>
|
<Col span={13}>
|
||||||
<StatisticsCard.Item
|
<RequestTop/>
|
||||||
title="异常服务"
|
</Col>
|
||||||
bordered={false}
|
<Col span={10} offset={1}>
|
||||||
value={<span style={{color: 'red'}}>1</span>}/>
|
<DeployPie/>
|
||||||
{/*value={<span style={{color: 'red'}}>{store.info.failure}</span>}/>*/}
|
</Col>
|
||||||
</StatisticsCard>
|
</Row>
|
||||||
<div>
|
</React.Fragment>
|
||||||
<Card title="报警趋势">
|
|
||||||
<Chart height={400} data={data} scale={cols} forceFit>
|
|
||||||
<Axis name="year" />
|
|
||||||
<Axis name="value" />
|
|
||||||
<Tooltip
|
|
||||||
crosshairs={{
|
|
||||||
type: "y"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Geom type="line" position="year*value" size={2} />
|
|
||||||
<Geom
|
|
||||||
type="point"
|
|
||||||
position="year*value"
|
|
||||||
size={4}
|
|
||||||
shape={"circle"}
|
|
||||||
style={{
|
|
||||||
stroke: "#fff",
|
|
||||||
lineWidth: 1
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Chart>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<div style={{ marginTop: "15px" }}>
|
|
||||||
<Row>
|
|
||||||
<Col span={13}>
|
|
||||||
<Card title="机房分布">
|
|
||||||
<Chart height={300} data={this.data} scale={this.cols} padding={[10, 0, 30, 35]} forceFit>
|
|
||||||
<Axis name="region"/>
|
|
||||||
<Axis name="count" title/>
|
|
||||||
<Tooltip/>
|
|
||||||
<Geom type="interval" position="region*count"/>
|
|
||||||
</Chart>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
<Col span={10} offset={1}>
|
|
||||||
<Card title="应用部署">
|
|
||||||
<Chart
|
|
||||||
height={300}
|
|
||||||
data={this.dv}
|
|
||||||
scale={this.cols2}
|
|
||||||
padding={[0, 0, -40, 50]}
|
|
||||||
forceFit
|
|
||||||
>
|
|
||||||
<Coord type={"theta"} radius={0.75} innerRadius={0.6}/>
|
|
||||||
<Axis name="percent"/>
|
|
||||||
<Tooltip showTitle={false}/>
|
|
||||||
<Guide>
|
|
||||||
<Guide.Html
|
|
||||||
position={["50%", "50%"]}
|
|
||||||
html="<div style="color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;">主机<br><span style="color:#262626;font-size:2.5em">32</span>台</div>"
|
|
||||||
alignX="middle"
|
|
||||||
alignY="middle"
|
|
||||||
/>
|
|
||||||
</Guide>
|
|
||||||
<Geom
|
|
||||||
type="intervalStack"
|
|
||||||
position="percent"
|
|
||||||
color="item"
|
|
||||||
tooltip={[
|
|
||||||
"item*percent",
|
|
||||||
(item, percent) => {
|
|
||||||
percent = percent * 100 + "%";
|
|
||||||
return {
|
|
||||||
name: item,
|
|
||||||
value: percent
|
|
||||||
};
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
style={{lineWidth: 1, stroke: "#fff"}}>
|
|
||||||
<Label
|
|
||||||
content="percent"
|
|
||||||
formatter={(val, item) => {
|
|
||||||
return item.point.item + ": " + val;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Geom>
|
|
||||||
</Chart>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue