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 d5ebd417d7d634ea611b1c5d7de1bb05d8306918
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Tue Feb 13 15:09:40 2018 +0800
Add Ranking component
---
.../frontend/src/components/Page/Ranking/index.js | 29 +++++++++++++
src/main/frontend/src/components/Page/index.js | 2 +
.../frontend/src/routes/Application/Application.js | 48 +++-------------------
.../frontend/src/routes/Dashboard/Dashboard.js | 34 +++------------
4 files changed, 43 insertions(+), 70 deletions(-)
diff --git a/src/main/frontend/src/components/Page/Ranking/index.js
b/src/main/frontend/src/components/Page/Ranking/index.js
new file mode 100644
index 0000000..e4400d3
--- /dev/null
+++ b/src/main/frontend/src/components/Page/Ranking/index.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react';
+import { List, Avatar } from 'antd';
+
+export default class Ranking extends PureComponent {
+
+ render() {
+ let index = 0;
+ const { data, title, content, unit } = this.props;
+ return (<List
+ size="small"
+ itemLayout="horizontal"
+ dataSource={data}
+ renderItem={item => (
+ <List.Item>
+ <List.Item.Meta
+ avatar={
+ <Avatar
+ style={{ color: '#ff3333', backgroundColor: '#ffb84d' }}
+ >
+ {(() => { index += 1; return index; })()}
+ </Avatar>}
+ title={item[title]}
+ description={`${item[content]} ${unit}`}
+ />
+ </List.Item>
+ )}
+ />);
+ }
+}
diff --git a/src/main/frontend/src/components/Page/index.js
b/src/main/frontend/src/components/Page/index.js
index b0c81f5..983d127 100644
--- a/src/main/frontend/src/components/Page/index.js
+++ b/src/main/frontend/src/components/Page/index.js
@@ -1,7 +1,9 @@
import Panel from './Panel';
import Search from './Search';
+import Ranking from './Ranking';
export default {
Panel,
Search,
+ Ranking,
};
diff --git a/src/main/frontend/src/routes/Application/Application.js
b/src/main/frontend/src/routes/Application/Application.js
index 92d32a6..ab07b15 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -1,32 +1,12 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card, Table, Form } from 'antd';
+import { Row, Col, Select, Card, Form } from 'antd';
import { AppTopology } from '../../components/Topology';
-import { Panel } from '../../components/Page';
+import { Panel, Ranking } from '../../components/Page';
const { Option } = Select;
const { Item: FormItem } = Form;
-const tableColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
-}, {
- title: 'Duration',
- dataIndex: 'avgResponseTime',
- key: 'avgResponseTime',
-}];
-
-const applicationThroughputColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
-}, {
- title: 'Tps',
- dataIndex: 'tps',
- key: 'tps',
-}];
-
const middleColResponsiveProps = {
xs: 24,
sm: 24,
@@ -119,34 +99,18 @@ export default class Application extends PureComponent {
<Card
title="Slow Service"
bordered={false}
- bodyStyle={{ padding: 0 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- <Table
- size="small"
- columns={tableColumns}
- dataSource={data.getSlowService}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ <Ranking data={data.getSlowService} title="name"
content="avgResponseTime" unit="ms" />
</Card>
</Col>
<Col {...middleColResponsiveProps}>
<Card
title="Servers Throughput"
bordered={false}
- bodyStyle={{ padding: 0 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- <Table
- size="small"
- columns={applicationThroughputColumns}
- dataSource={data.getServerThroughput}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ <Ranking data={data.getServerThroughput} title="name"
content="tps" unit="t/s" />
</Card>
</Col>
</Row>
diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js
b/src/main/frontend/src/routes/Dashboard/Dashboard.js
index cd4aae9..c27079d 100644
--- a/src/main/frontend/src/routes/Dashboard/Dashboard.js
+++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js
@@ -1,11 +1,11 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Card, List, Avatar } from 'antd';
+import { Row, Col, Card } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { timeRange } from '../../utils/utils';
-import { Panel } from '../../components/Page';
+import { Panel, Ranking } from '../../components/Page';
@connect(state => ({
dashboard: state.dashboard,
@@ -19,28 +19,6 @@ export default class Dashboard extends PureComponent {
payload: { variables },
});
}
- renderList = (data, title, content, unit) => {
- let index = 0;
- return (<List
- size="small"
- itemLayout="horizontal"
- dataSource={data}
- renderItem={item => (
- <List.Item>
- <List.Item.Meta
- avatar={
- <Avatar
- style={{ color: '#ff3333', backgroundColor: '#ffb84d' }}
- >
- {(() => { index += 1; return index; })()}
- </Avatar>}
- title={item[title]}
- description={`${item[content]} ${unit}`}
- />
- </List.Item>
- )}
- />);
- }
render() {
const { data } = this.props.dashboard;
const visitData = [];
@@ -138,18 +116,18 @@ export default class Dashboard extends PureComponent {
<Card
title="Slow Service"
bordered={false}
- bodyStyle={{ padding: 10 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- {this.renderList(data.getTopNSlowService, 'name',
'avgResponseTime', 'ms')}
+ <Ranking data={data.getTopNSlowService} title="name"
content="avgResponseTime" unit="ms" />
</Card>
</Col>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<Card
title="Application Throughput"
bordered={false}
- bodyStyle={{ padding: 10 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- {this.renderList(data.getTopNApplicationThroughput,
'applicationCode', 'tps', 't/s')}
+ <Ranking data={data.getTopNApplicationThroughput}
title="applicationCode" content="tps" unit="t/s" />
</Card>
</Col>
</Row>
--
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.
