This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch update-antdpro
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/update-antdpro by this push:
new 9a64bb6 Refactor
9a64bb6 is described below
commit 9a64bb662f7f9250f3f1c3385772e242216d5df7
Author: hanahmily <[email protected]>
AuthorDate: Tue Feb 27 11:45:38 2018 +0800
Refactor
---
mock/server.js | 8 +++---
mock/trace.js | 2 +-
src/components/Charts/Area/index.js | 2 +-
src/components/Charts/Line/index.js | 1 +
src/components/Charts/Pie/index.js | 11 ++++++++-
src/components/Charts/StackBar/index.js | 2 +-
src/routes/Dashboard/Dashboard.js | 22 ++++++-----------
src/routes/Server/Server.js | 43 +++++++++++++--------------------
src/routes/Service/Service.js | 18 ++++++--------
src/utils/time.js | 5 ++--
10 files changed, 54 insertions(+), 60 deletions(-)
diff --git a/mock/server.js b/mock/server.js
index be891ca..6740030 100644
--- a/mock/server.js
+++ b/mock/server.js
@@ -33,10 +33,10 @@ export default {
'cost|60': ['@natural(0, 99)'],
},
getMemoryTrend: {
- 'heap|60': ['@natural(500, 900)'],
- 'maxHeap|60': [1000],
- 'noheap|60': ['@natural(100, 200)'],
- 'maxNoheap|60': [300],
+ 'heap|61': ['@natural(500, 900)'],
+ 'maxHeap|61': [1000],
+ 'noheap|61': ['@natural(100, 200)'],
+ 'maxNoheap|61': [300],
},
getGCTrend: {
'youngGC|60': ['@natural(200, 300)'],
diff --git a/mock/trace.js b/mock/trace.js
index 5b3514a..5b183a0 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -5,7 +5,7 @@ export default {
res.json(mockjs.mock(
{
data: {
- 'applicationCodes|20-50': [{ 'key|+1': 3, label: function() { return
`app-${this.key}`; } }], // eslint-disable-line
+ 'applicationId|20-50': [{ 'key|+1': 3, label: function() { return
`app-${this.key}`; } }], // eslint-disable-line
},
}
));
diff --git a/src/components/Charts/Area/index.js
b/src/components/Charts/Area/index.js
index 4e8e2a1..6725e08 100644
--- a/src/components/Charts/Area/index.js
+++ b/src/components/Charts/Area/index.js
@@ -106,7 +106,7 @@ class Area extends Component {
tickLine={autoHideXLabels ? false : {}}
/>
<Axis name="y" min={0} />
- <Tooltip showTitle={false} crosshairs={{ type: 'line' }} />
+ <Tooltip crosshairs={{ type: 'line' }} />
<Geom type="areaStack" position="x*y" color={['type', [color,
limitColor]]} />
<Geom type="lineStack" position="x*y" size={2} color={['type',
[color, limitColor]]} />
</Chart>
diff --git a/src/components/Charts/Line/index.js
b/src/components/Charts/Line/index.js
index 9d1ded8..4f4fcd1 100644
--- a/src/components/Charts/Line/index.js
+++ b/src/components/Charts/Line/index.js
@@ -72,6 +72,7 @@ class Line extends Component {
const scale = {
x: {
type: 'cat',
+ tickCount: 5,
},
y: {
min: 0,
diff --git a/src/components/Charts/Pie/index.js
b/src/components/Charts/Pie/index.js
index ac5703c..528b251 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -26,7 +26,16 @@ export default class Pie extends Component {
componentWillReceiveProps(nextProps) {
if (this.props.data !== nextProps.data) {
- this.getLengendData();
+ // because of charts data create when rendered
+ // so there is a trick for get rendered time
+ this.setState(
+ {
+ legendData: [...this.state.legendData],
+ },
+ () => {
+ this.getLengendData();
+ }
+ );
}
}
diff --git a/src/components/Charts/StackBar/index.js
b/src/components/Charts/StackBar/index.js
index e114863..53e90e5 100644
--- a/src/components/Charts/StackBar/index.js
+++ b/src/components/Charts/StackBar/index.js
@@ -102,7 +102,7 @@ class Area extends Component {
tickLine={autoHideXLabels ? false : {}}
/>
<Axis name="y" min={0} />
- <Tooltip showTitle={false} />
+ <Tooltip />
<Geom type="intervalStack" position="x*y" color={['type', [color,
limitColor]]} />
</Chart>
</div>
diff --git a/src/routes/Dashboard/Dashboard.js
b/src/routes/Dashboard/Dashboard.js
index 416f396..417ab63 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -4,7 +4,7 @@ import { Row, Col, Card } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
-import { timeRange } from '../../utils/time';
+import { axis } from '../../utils/time';
import { Panel, Ranking } from '../../components/Page';
@connect(state => ({
@@ -21,16 +21,14 @@ export default class Dashboard extends PureComponent {
}
render() {
const { data } = this.props.dashboard;
- const visitData = [];
const { numOfAlarmRate } = data.getAlarmTrend;
const accuracy = 100;
+ let visitData = [];
let avg = 0;
let max = 0;
let min = 0;
if (numOfAlarmRate && numOfAlarmRate.length > 0) {
- timeRange(this.props.duration).forEach((v, i) => {
- visitData.push({ x: v, y: numOfAlarmRate[i] / accuracy });
- });
+ visitData = axis(this.props.duration, numOfAlarmRate, ({ x, y }) => ({
x, y: y / accuracy }));
avg = numOfAlarmRate.reduce((acc, curr) => acc + curr) /
numOfAlarmRate.length / accuracy;
max = numOfAlarmRate.reduce((acc, curr) => { return acc < curr ? curr :
acc; }) / accuracy;
min = numOfAlarmRate.reduce((acc, curr) => { return acc > curr ? curr :
acc; }) / accuracy;
@@ -54,7 +52,7 @@ export default class Dashboard extends PureComponent {
</Col>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<ChartCard
- title="Store"
+ title="DB & Cache"
avatar={<img style={{ width: 48, height: 56 }}
src="database.svg" alt="database" />}
total={data.getClusterBrief.numOfDatabase
+ data.getClusterBrief.numOfCache}
@@ -75,13 +73,13 @@ export default class Dashboard extends PureComponent {
avatar={<img style={{ width: 56, height: 56 }} src="alert.svg"
alt="app" />}
total={`${avg.toFixed(2)}%`}
footer={<div><Field label="Max" value={`${max}%`} /> <Field
label="Min" value={`${min}%`} /></div>}
+ contentHeight={100}
>
<MiniArea
animate={false}
color="#D87093"
borderColor="#B22222"
line="true"
- height={143}
data={visitData}
yAxis={{
formatter(val) {
@@ -92,12 +90,10 @@ export default class Dashboard extends PureComponent {
</ChartCard>
</Col>
<Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24
}}>
- <Card
- bordered={false}
- bodyStyle={{ padding: 0 }}
+ <ChartCard
+ contentHeight={200}
>
<Pie
- animate={false}
hasLegend
title="Database"
subTitle="Total"
@@ -105,10 +101,8 @@ export default class Dashboard extends PureComponent {
.reduce((pre, now) => now.num + pre, 0)}
data={data.getConjecturalApps.apps
.map((v) => { return { x: v.name, y: v.num }; })}
- height={300}
- lineWidth={4}
/>
- </Card>
+ </ChartCard>
</Col>
</Row>
<Row gutter={24}>
diff --git a/src/routes/Server/Server.js b/src/routes/Server/Server.js
index 7319339..4ea724e 100644
--- a/src/routes/Server/Server.js
+++ b/src/routes/Server/Server.js
@@ -5,7 +5,7 @@ import {
ChartCard, MiniArea, MiniBar, Line, Area, StackBar,
} from '../../components/Charts';
import DescriptionList from '../../components/DescriptionList';
-import { timeRange } from '../../utils/time';
+import { axis } from '../../utils/time';
import { Panel, Search } from '../../components/Page';
const { Description } = DescriptionList;
@@ -50,11 +50,11 @@ export default class Server extends PureComponent {
avg = list => (list.length > 0 ?
(list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
render() {
- const { getFieldDecorator } = this.props.form;
- const { variables: { values }, data } = this.props.server;
+ const { form, duration, server } = this.props;
+ const { getFieldDecorator } = form;
+ const { variables: { values }, data } = server;
const { serverInfo, getServerResponseTimeTrend, getServerTPSTrend,
getCPUTrend, getMemoryTrend, getGCTrend } = data;
- const timeRangeArray = timeRange(this.props.duration);
return (
<div>
<Form layout="inline">
@@ -104,8 +104,7 @@ export default class Server extends PureComponent {
<MiniArea
animate={false}
color="#975FE4"
- data={getServerResponseTimeTrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v };
})}
+ data={axis(duration, getServerResponseTimeTrend.trendList)}
/>
) : (<span style={{ display: 'none' }} />)}
</ChartCard>
@@ -118,8 +117,7 @@ export default class Server extends PureComponent {
<MiniBar
animate={false}
height={46}
- data={getServerTPSTrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+ data={axis(duration, getServerTPSTrend.trendList)}
/>
</ChartCard>
</Col>
@@ -128,11 +126,10 @@ export default class Server extends PureComponent {
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop:
24 }}>
<ChartCard
title="CPU"
- contentHeight={250}
+ contentHeight={150}
>
<Line
- data={getCPUTrend.cost
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+ data={axis(duration, getCPUTrend.cost)}
/>
</ChartCard>
</Col>
@@ -141,26 +138,22 @@ export default class Server extends PureComponent {
<Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop:
24 }}>
<ChartCard
title="Heap"
- contentHeight={250}
+ contentHeight={150}
>
<Area
- data={getMemoryTrend.heap
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'value' }))
- .concat(getMemoryTrend.maxHeap
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'limit
' })))}
+ data={axis(duration, getMemoryTrend.heap, ({ x, y }) => ({
x, y, type: 'value' }))
+ .concat(axis(duration, getMemoryTrend.maxHeap, ({ x, y })
=> ({ x, y, type: 'limit' })))}
/>
</ChartCard>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop:
24 }}>
<ChartCard
title="No-Heap"
- contentHeight={250}
+ contentHeight={150}
>
<Area
- data={getMemoryTrend.noheap
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'value' }))
- .concat(getMemoryTrend.maxNoheap
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'limit
' })))}
+ data={axis(duration, getMemoryTrend.noheap, ({ x, y }) => ({
x, y, type: 'value' }))
+ .concat(axis(duration, getMemoryTrend.maxNoheap, ({ x, y })
=> ({ x, y, type: 'limit' })))}
/>
</ChartCard>
</Col>
@@ -169,13 +162,11 @@ export default class Server extends PureComponent {
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop:
24 }}>
<ChartCard
title="GC"
- contentHeight={250}
+ contentHeight={150}
>
<StackBar
- data={getGCTrend.oldGC
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'oldGC' }))
- .concat(getGCTrend.youngGC
- .map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'youngGC' })))}
+ data={axis(duration, getGCTrend.oldGC, ({ x, y }) => ({ x,
y, type: 'oldGC' }))
+ .concat(axis(duration, getGCTrend.youngGC, ({ x, y }) => ({
x, y, type: 'youngGC' })))}
/>
</ChartCard>
</Col>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index 7ab9ed0..7bdba79 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -4,7 +4,7 @@ import { Row, Col, Card, Form } from 'antd';
import {
ChartCard, MiniArea, MiniBar,
} from '../../components/Charts';
-import { timeRange } from '../../utils/time';
+import { axis } from '../../utils/time';
import { ServiceTopology } from '../../components/Topology';
import { Panel, Search } from '../../components/Page';
@@ -49,11 +49,11 @@ export default class Service extends PureComponent {
avg = list => (list.length > 0 ?
(list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
render() {
- const { getFieldDecorator } = this.props.form;
- const { variables: { values }, data } = this.props.service;
+ const { form, service, duration } = this.props;
+ const { getFieldDecorator } = form;
+ const { variables: { values }, data } = service;
const { getServiceResponseTimeTrend, getServiceTPSTrend,
getServiceSLATrend, getServiceTopology } = data;
- const timeRangeArray = timeRange(this.props.duration);
return (
<div>
<Form layout="inline">
@@ -89,8 +89,7 @@ export default class Service extends PureComponent {
>
<MiniArea
color="#975FE4"
- data={getServiceTPSTrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+ data={axis(duration, getServiceTPSTrend.trendList)}
/>
</ChartCard>
</Col>
@@ -101,8 +100,7 @@ export default class Service extends PureComponent {
contentHeight={46}
>
<MiniArea
- data={getServiceResponseTimeTrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+ data={axis(duration, getServiceResponseTimeTrend.trendList)}
/>
</ChartCard>
</Col>
@@ -114,8 +112,8 @@ export default class Service extends PureComponent {
<MiniBar
animate={false}
height={46}
- data={getServiceSLATrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v / 100
}; })}
+ data={axis(duration, getServiceSLATrend.trendList,
+ ({ x, y }) => ({ x, y: y / 100 }))}
/>
</ChartCard>
</Col>
diff --git a/src/utils/time.js b/src/utils/time.js
index 7d4e702..bd1fffe 100644
--- a/src/utils/time.js
+++ b/src/utils/time.js
@@ -1,5 +1,6 @@
-export function timeRange({ display }) {
- return display.range;
+export function axis({ display }, data, tranformFunc) {
+ return display.range.map((v, i) =>
+ (tranformFunc ? tranformFunc({ x: v, y: data[i] }) : { x: v, y: data[i]
}));
}
export function generateDuration({ from, to }) {
--
To stop receiving notification emails like this one, please contact
[email protected].
