This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit 132098bd2c51cc58ae5392763ddb55d7243ecf75
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Mon Jan 22 15:27:22 2018 +0800
Refactor dashboard top list
---
src/main/frontend/mock/dashboard.js | 2 +-
.../frontend/src/routes/Dashboard/Dashboard.js | 62 +++++++++-------------
2 files changed, 25 insertions(+), 39 deletions(-)
diff --git a/src/main/frontend/mock/dashboard.js
b/src/main/frontend/mock/dashboard.js
index 8a10082..fe93ae2 100644
--- a/src/main/frontend/mock/dashboard.js
+++ b/src/main/frontend/mock/dashboard.js
@@ -18,7 +18,7 @@ export default {
getConjecturalApps: {
'apps|3-5': [{ 'name|1': ['Oracle', 'MySQL', 'ActiveMQ', 'Redis',
'Memcache', 'SQLServer'], num: '@natural(1, 20)' }],
},
- 'getTopNSlowService|10': [{ 'key|+1': 1, name: '@name',
'avgResponseTime|200-1000': 1 }],
+ 'getTopNSlowService|10': [{ 'key|+1': 1, name: '@url',
'avgResponseTime|200-1000': 1 }],
'getTopNServerThroughput|10': [{ 'key|+1': 1, name: '@name',
'tps|100-10000': 1 }],
},
}
diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js
b/src/main/frontend/src/routes/Dashboard/Dashboard.js
index 05ef6b2..fe23740 100644
--- a/src/main/frontend/src/routes/Dashboard/Dashboard.js
+++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'dva';
-import { Row, Col, Card, Table } from 'antd';
+import { Row, Col, Card, List, Avatar } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
@@ -26,6 +26,27 @@ export default class Dashboard extends Component {
}
return this.props.dashboard !== nextProps.dashboard;
}
+ renderList = (data, title, content) => {
+ return (<List
+ size="small"
+ itemLayout="horizontal"
+ dataSource={data}
+ renderItem={item => (
+ <List.Item>
+ <List.Item.Meta
+ avatar={
+ <Avatar
+ style={{ color: '#ff3333', backgroundColor: '#ffb84d' }}
+ >
+ {item.key}
+ </Avatar>}
+ title={`${title}: ${item[title]}`}
+ description={item[content]}
+ />
+ </List.Item>
+ )}
+ />);
+ }
render() {
const visitData = [];
const { numOfAlarmRate } = this.props.dashboard.getAlarmTrend;
@@ -40,25 +61,6 @@ export default class Dashboard extends Component {
max = numOfAlarmRate.reduce((acc, curr) => { return acc < curr ? curr :
acc; });
min = numOfAlarmRate.reduce((acc, curr) => { return acc > curr ? curr :
acc; });
}
- const tableColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
- }, {
- title: 'Response Time',
- dataIndex: 'avgResponseTime',
- key: 'avgResponseTime',
- }];
-
- const applicationThroughputColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
- }, {
- title: 'Tps',
- dataIndex: 'tps',
- key: 'tps',
- }];
return (
<div>
<Row gutter={24}>
@@ -142,15 +144,7 @@ export default class Dashboard extends Component {
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <Table
- size="small"
- columns={tableColumns}
- dataSource={this.props.dashboard.getTopNSlowService}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ {this.renderList(this.props.dashboard.getTopNSlowService,
'avgResponseTime', 'name')}
</Card>
</Col>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
@@ -159,15 +153,7 @@ export default class Dashboard extends Component {
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <Table
- size="small"
- columns={applicationThroughputColumns}
- dataSource={this.props.dashboard.getTopNServerThroughput}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ {this.renderList(this.props.dashboard.getTopNServerThroughput,
'tps', 'name')}
</Card>
</Col>
</Row>
--
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.
