U web update

pull/22/head
vapao 2020-01-14 00:28:34 +08:00
parent c2ed994764
commit a206ee05d7
5 changed files with 224 additions and 191 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,199 +1,25 @@
import React from 'react';
import {observer} from 'mobx-react';
import { Card, Row, Col } from 'antd';
import { StatisticsCard } from "../../components";
import { Chart, Geom, Axis, Tooltip, Coord, Guide, Label } from 'bizcharts';
import DataSet from "@antv/data-set";
import store from './store';
import { Row, Col } from 'antd';
import StatisticsCard from './StatisticCard';
import AlarmTrend from './AlarmTrend';
import RequestTop from './RequestTop';
import DeployPie from './DeployPie';
@observer
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() {
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 (
<React.Fragment>
<StatisticsCard loading={store.isFetching}>
<StatisticsCard.Item title="应用数量" value={100}/>
<StatisticsCard.Item title="任务数量" value={32}/>
<StatisticsCard.Item title="正常服务" value={<span style={{color: 'green'}}>99</span>}/>
<StatisticsCard.Item
title="异常服务"
bordered={false}
value={<span style={{color: 'red'}}>1</span>}/>
{/*value={<span style={{color: 'red'}}>{store.info.failure}</span>}/>*/}
</StatisticsCard>
<div>
<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=&quot;color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;&quot;>主机<br><span style=&quot;color:#262626;font-size:2.5em&quot;>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>
<React.Fragment>
<StatisticsCard/>
<AlarmTrend/>
<Row style={{marginTop: 20}}>
<Col span={13}>
<RequestTop/>
</Col>
<Col span={10} offset={1}>
<DeployPie/>
</Col>
</Row>
</React.Fragment>
)
}
}