You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/01/08 16:13:30 UTC
[incubator-skywalking-ui] 02/05: Fetching application data
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 a62a3683e40df3caa974c8a30e072c7ce1b48267
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Mon Jan 8 22:03:43 2018 +0800
Fetching application data
---
src/main/frontend/.roadhogrc.mock.js | 6 ++
src/main/frontend/src/models/application.js | 18 +++-
.../frontend/src/routes/Application/Application.js | 103 +++++++--------------
3 files changed, 53 insertions(+), 74 deletions(-)
diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js
index e85899f..2efbc0e 100644
--- a/src/main/frontend/.roadhogrc.mock.js
+++ b/src/main/frontend/.roadhogrc.mock.js
@@ -29,6 +29,12 @@ const proxy = mockjs.mock({
'getTopNServerThroughput|10': [{'key|+1': 1, 'name': '@name', 'tps|100-10000': 1}],
}
},
+ 'POST /api/application': {
+ data: {
+ 'getSlowService|10': [{'key|+1': 1, 'name': '@name', 'avgResponseTime|200-1000': 1}],
+ 'getServerThroughput|10': [{'key|+1': 1, 'name': '@name', 'tps|100-10000': 1}],
+ }
+ },
});
export default noProxy ? {} : delay(proxy, 1000);
diff --git a/src/main/frontend/src/models/application.js b/src/main/frontend/src/models/application.js
index 2e1190a..d537e4a 100644
--- a/src/main/frontend/src/models/application.js
+++ b/src/main/frontend/src/models/application.js
@@ -1,15 +1,27 @@
-// import { xxx } from '../services/xxx';
+import { query } from '../services/graphql';
+
export default {
- namespace: 'dashboard',
- state: {},
+ namespace: 'application',
+ state: {
+ getAllApplication: [],
+ getSlowService: [],
+ getServerThroughput: [],
+ },
effects: {
*fetch({ payload }, { call, put }) {
+ const response = yield call(query, 'application', payload);
+ yield put({
+ type: 'save',
+ payload: response,
+ });
},
},
+
reducers: {
save(state, action) {
return {
...state,
+ ...action.payload.data,
};
},
},
diff --git a/src/main/frontend/src/routes/Application/Application.js b/src/main/frontend/src/routes/Application/Application.js
index b316724..2beb24b 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -1,57 +1,38 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Select, Card, Table } from 'antd';
+const { Option } = Select;
+
@connect(state => ({
application: state.application,
+ duration: state.global.duration,
}))
-export default class Dashboard extends PureComponent {
- render() {
- function handleChange(value) {
- console.log(`selected ${value}`);
- }
- function handleBlur() {
- console.log('blur');
- }
-
- function handleFocus() {
- console.log('focus');
+export default class Application extends Component {
+ shouldComponentUpdate(nextProps) {
+ if (this.props.duration !== nextProps.duration) {
+ this.props.dispatch({
+ type: 'application/fetch',
+ payload: {},
+ });
}
+ return this.props.application !== nextProps.application;
+ }
+ handleChange(appId) {
+ this.props.dispatch({
+ type: 'application/fetch',
+ payload: { applicationId: appId },
+ });
+ }
+ render() {
const tableColumns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
}, {
title: 'Duration',
- dataIndex: 'duration',
- key: 'duration',
- }];
- const { Option } = Select;
- const slowServiceData = [{
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
+ dataIndex: 'avgResponseTime',
+ key: 'avgResponseTime',
}];
const applicationThroughputColumns = [{
@@ -64,28 +45,6 @@ export default class Dashboard extends PureComponent {
key: 'tps',
}];
- const applicationThroughputData = [{
- key: '1',
- name: 'Server1',
- tps: '500',
- }, {
- key: '1',
- name: 'Server1',
- tps: '500',
- }, {
- key: '1',
- name: 'Server1',
- tps: '500',
- }, {
- key: '1',
- name: 'Server1',
- tps: '500',
- }, {
- key: '1',
- name: 'Server1',
- tps: '500',
- }];
-
const middleColResponsiveProps = {
xs: 24,
sm: 24,
@@ -101,9 +60,7 @@ export default class Dashboard extends PureComponent {
style={{ width: 200 }}
placeholder="Select a application"
optionFilterProp="children"
- onChange={handleChange}
- onFocus={handleFocus}
- onBlur={handleBlur}
+ onChange={this.handleChange.bind(this)}
>
<Option value="App1">App1</Option>
<Option value="App2">App2</Option>
@@ -113,7 +70,9 @@ export default class Dashboard extends PureComponent {
bordered={false}
bodyStyle={{ padding: 0, marginTop: 24 }}
>
- <div Style="height: 400px">Application and externel resources(Db, Cache or MQ) Topoloy</div>
+ <div style={{ height: 400 }}>
+ Application and externel resources(Db, Cache or MQ) Topoloy
+ </div>
</Card>
<Row gutter={24}>
<Col {...middleColResponsiveProps}>
@@ -123,11 +82,12 @@ export default class Dashboard extends PureComponent {
bodyStyle={{ padding: 0 }}
>
<Table
+ size="small"
columns={tableColumns}
- dataSource={slowServiceData}
+ dataSource={this.props.application.getSlowService}
pagination={{
style: { marginBottom: 0 },
- pageSize: 5,
+ pageSize: 10,
}}
/>
</Card>
@@ -139,11 +99,12 @@ export default class Dashboard extends PureComponent {
bodyStyle={{ padding: 0 }}
>
<Table
+ size="small"
columns={applicationThroughputColumns}
- dataSource={applicationThroughputData}
+ dataSource={this.props.application.getServerThroughput}
pagination={{
style: { marginBottom: 0 },
- pageSize: 5,
+ pageSize: 10,
}}
/>
</Card>
--
To stop receiving notification emails like this one, please contact
"commits@skywalking.apache.org" <co...@skywalking.apache.org>.