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 <[email protected]> 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 "[email protected]" <[email protected]>.
