This is an automated email from the ASF dual-hosted git repository. hanahmily pushed a commit to branch fix/bugs in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit b68bf4670405e2a69b628ae3b0454e6686d4e7ca Author: gaohongtao <[email protected]> AuthorDate: Sun Mar 4 19:55:54 2018 +0800 Amend server ui issues --- mock/application.js | 10 +++++----- mock/server.js | 8 ++++---- mock/topology.js | 14 +++++++------- src/components/Charts/Area/index.js | 8 +++++--- src/components/Topology/AppTopology.js | 4 ++-- src/routes/Server/Server.js | 12 +++++++----- 6 files changed, 30 insertions(+), 26 deletions(-) diff --git a/mock/application.js b/mock/application.js index a78d693..7def66a 100644 --- a/mock/application.js +++ b/mock/application.js @@ -48,7 +48,7 @@ export default { { source: 1, target: 200, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -56,7 +56,7 @@ export default { { source: 1, target: 201, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -64,7 +64,7 @@ export default { { source: 1, target: 202, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -72,7 +72,7 @@ export default { { source: 1, target: 203, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -80,7 +80,7 @@ export default { { source: 1, target: 204, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, diff --git a/mock/server.js b/mock/server.js index 6078ac5..cbc8020 100644 --- a/mock/server.js +++ b/mock/server.js @@ -33,10 +33,10 @@ export default { 'cost|60': ['@natural(0, 99)'], }, getMemoryTrend: { - 'heap|61': ['@natural(500, 900)'], - 'maxHeap|61': [1000], - 'noheap|61': ['@natural(100, 200)'], - 'maxNoheap|61': [300], + 'heap|61': ['@natural(177184375, 277184375)'], + 'maxHeap|61': [377184375], + 'noheap|61': ['@natural(58260667, 68260667)'], + 'maxNoheap|61': [68260667], }, getGCTrend: { 'youngGC|60': ['@natural(200, 300)'], diff --git a/mock/topology.js b/mock/topology.js index bb5061f..4394a4f 100644 --- a/mock/topology.js +++ b/mock/topology.js @@ -47,7 +47,7 @@ export default { { source: 100, target: 1, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -55,7 +55,7 @@ export default { { source: 1, target: 2, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -63,7 +63,7 @@ export default { { source: 1, target: 200, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -71,7 +71,7 @@ export default { { source: 1, target: 201, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -79,7 +79,7 @@ export default { { source: 2, target: 202, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -87,7 +87,7 @@ export default { { source: 2, target: 203, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, @@ -95,7 +95,7 @@ export default { { source: 2, target: 204, - 'isAlarm|1': true, + 'isAlert|1': true, 'callType|1': ['rpc', 'http', 'dubbo'], 'callsPerSec|100-2000': 1, 'avgResponseTime|500-5000': 1, diff --git a/src/components/Charts/Area/index.js b/src/components/Charts/Area/index.js index 6725e08..8fc6334 100644 --- a/src/components/Charts/Area/index.js +++ b/src/components/Charts/Area/index.js @@ -84,10 +84,10 @@ class Area extends Component { min: 0, }, }; - const offset = Math.floor(data.length / 2); const xData = data.slice(0, offset); - const yData = data.slice(offset).map((v, i) => ({ ...v, y: v.y - xData[i].y })); + const yData = data.slice(offset).map((v, i) => ({ ...v, + y: ((v.y - xData[i].y) > 0 ? parseFloat(((v.y - xData[i].y).toFixed(2))) : 0) })); return ( <div className={styles.chart} style={{ height }} ref={this.handleRoot}> <div ref={this.handleRef}> @@ -106,7 +106,9 @@ class Area extends Component { tickLine={autoHideXLabels ? false : {}} /> <Axis name="y" min={0} /> - <Tooltip 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/Topology/AppTopology.js b/src/components/Topology/AppTopology.js index 53b6ace..ff4c3b1 100644 --- a/src/components/Topology/AppTopology.js +++ b/src/components/Topology/AppTopology.js @@ -42,8 +42,8 @@ export default class AppTopology extends Base { 'curve-style': 'bezier', 'control-point-step-size': 100, 'target-arrow-shape': 'triangle', - 'target-arrow-color': ele => (ele.data('isAlarm') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'), - 'line-color': ele => (ele.data('isAlarm') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'), + 'target-arrow-color': ele => (ele.data('isAlert') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'), + 'line-color': ele => (ele.data('isAlert') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'), width: 2, label: ele => `${ele.data('callType')} \n ${ele.data('callsPerSec')} tps / ${ele.data('avgResponseTime')} ms`, 'text-wrap': 'wrap', diff --git a/src/routes/Server/Server.js b/src/routes/Server/Server.js index 59f67bc..0b7ace9 100644 --- a/src/routes/Server/Server.js +++ b/src/routes/Server/Server.js @@ -49,6 +49,7 @@ export default class Server extends PureComponent { } avg = list => (list.length > 0 ? (list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0) + bytesToMB = list => list.map(_ => parseFloat((_ / (1024 ** 2)).toFixed(2))) render() { const { form, duration, server } = this.props; const { getFieldDecorator } = form; @@ -73,10 +74,11 @@ export default class Server extends PureComponent { host pid ipv4 + applicationCode } } `} - transform={r => ({ ...r, label: `${r.pid}@${r.host}` })} + transform={r => ({ ...r, label: `${r.pid}@${r.applicationCode}` })} /> )} </FormItem> @@ -142,8 +144,8 @@ export default class Server extends PureComponent { contentHeight={150} > <Area - data={axis(duration, getMemoryTrend.heap, ({ x, y }) => ({ x, y, type: 'value' })) - .concat(axis(duration, getMemoryTrend.maxHeap, ({ x, y }) => ({ x, y, type: 'free' })))} + data={axis(duration, this.bytesToMB(getMemoryTrend.heap), ({ x, y }) => ({ x, y, type: 'value' })) + .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxHeap), ({ x, y }) => ({ x, y, type: 'free' })))} /> </ChartCard> </Col> @@ -153,8 +155,8 @@ export default class Server extends PureComponent { contentHeight={150} > <Area - data={axis(duration, getMemoryTrend.noheap, ({ x, y }) => ({ x, y, type: 'value' })) - .concat(axis(duration, getMemoryTrend.maxNoheap, ({ x, y }) => ({ x, y, type: 'free' })))} + data={axis(duration, this.bytesToMB(getMemoryTrend.noheap), ({ x, y }) => ({ x, y, type: 'value' })) + .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxNoheap), ({ x, y }) => ({ x, y, type: 'free' })))} /> </ChartCard> </Col> -- To stop receiving notification emails like this one, please contact [email protected].
