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 104c4e83c60dc5904c53b980688e640257040bee Author: hanahmily <hanahm...@gmail.com> AuthorDate: Fri Jan 26 15:24:24 2018 +0800 Add loading application list from backend --- src/main/frontend/mock/application.js | 1 + .../frontend/src/components/Page/Panel/index.js | 2 +- src/main/frontend/src/models/application.js | 107 +++++++++++++--- .../frontend/src/routes/Application/Application.js | 139 +++++++++++---------- src/main/frontend/src/utils/utils.js | 8 ++ 5 files changed, 170 insertions(+), 87 deletions(-) diff --git a/src/main/frontend/mock/application.js b/src/main/frontend/mock/application.js index 7e1423f..253d923 100644 --- a/src/main/frontend/mock/application.js +++ b/src/main/frontend/mock/application.js @@ -5,6 +5,7 @@ export default { res.json(mockjs.mock( { data: { + 'getAllApplication|20-50': [{ 'key|+1': 3, name: function() { return `app-${this.key}`; } }], 'getSlowService|10': [{ 'key|+1': 1, name: '@name', 'avgResponseTime|200-1000': 1 }], 'getServerThroughput|10': [{ 'key|+1': 1, name: '@name', 'tps|100-10000': 1 }], getApplicationTopology: () => { diff --git a/src/main/frontend/src/components/Page/Panel/index.js b/src/main/frontend/src/components/Page/Panel/index.js index c222fd9..a3c630f 100644 --- a/src/main/frontend/src/components/Page/Panel/index.js +++ b/src/main/frontend/src/components/Page/Panel/index.js @@ -8,7 +8,7 @@ export default class Panel extends Component { shouldComponentUpdate(nextProps) { const { duration, onDurationChange } = this.props; if (duration !== nextProps.duration) { - onDurationChange(); + onDurationChange(duration); return false; } return true; diff --git a/src/main/frontend/src/models/application.js b/src/main/frontend/src/models/application.js index 95f3037..9faee98 100644 --- a/src/main/frontend/src/models/application.js +++ b/src/main/frontend/src/models/application.js @@ -1,32 +1,103 @@ -import { query } from '../services/graphql'; +import { generateBaseModal } from '../utils/utils'; +import { query as queryService } from '../services/graphql'; -export default { +const allAppQuery = ` + query AllApplication($duration: Duration!) { + getAllApplication(duration: $duration) { + key: id + name + } + } +`; + +const appQuery = ` + query Application($applicationId: ID!, $duration: Duration!) { + getSlowService(applicationId: $applicationId, duration: $duration) { + key: id + name + avgResponseTime + } + getServerThroughput(applicationId: $applicationId, duration: $duration) { + key: id + name + tps + } + getApplicationTopology(applicationId: $applicationId, duration: $duration) { + nodes { + id + name + type + ... on ApplicationNode { + sla + callsPerSec + responseTimePerSec + apdex + isAlarm + numOfServer + numOfServerAlarm + numOfServiceAlarm + } + }, + calls: { + source + target + isAlert + callType + callsPerSec + responseTimePerSec + }, + } + } +`; + +export default generateBaseModal({ namespace: 'application', - state: { - getAllApplication: [], - getSlowService: [], - getServerThroughput: [], - getApplicationTopology: { - nodes: [], - calls: [], - }, - }, effects: { - *fetch({ payload }, { call, put }) { - const response = yield call(query, 'application', payload); + *loadAllApp({ payload }, { call, put }) { + const { data: { getAllApplication: allApplication } } = yield call(queryService, 'application', { variables: payload, query: allAppQuery }); + const applicationId = allApplication && allApplication.length > 0 && allApplication[0].key; + if (!applicationId) { + return; + } + yield put({ + type: 'saveApplication', + payload: { allApplication, applicationId }, + }); + const response = yield put({ + type: 'fetch', + payload: { variables: { ...payload, applicationId }, query: appQuery }, + }); yield put({ type: 'save', payload: response, }); }, }, - reducers: { - save(state, action) { + saveApplication(preState, action) { + const { applicationId } = preState; + const { allApplication, applicationId: newApplicationId } = action.payload; + if (allApplication.find(_ => _.key === applicationId)) { + return { + ...preState, + allApplication, + }; + } return { - ...state, - ...action.payload.data, + ...preState, + allApplication, + applicationId: newApplicationId, }; }, }, -}; + state: { + allApplication: [], + getSlowService: [], + getServerThroughput: [], + getApplicationTopology: { + nodes: [], + calls: [], + }, + }, + query: appQuery, +}); diff --git a/src/main/frontend/src/routes/Application/Application.js b/src/main/frontend/src/routes/Application/Application.js index e7ca6ed..1b047af 100644 --- a/src/main/frontend/src/routes/Application/Application.js +++ b/src/main/frontend/src/routes/Application/Application.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Row, Col, Select, Card, Table, Form } from 'antd'; import { AppTopology } from '../../components/Topology'; +import { Panel } from '../../components/Page'; const { Option } = Select; const { Item: FormItem } = Form; @@ -11,35 +12,35 @@ const { Item: FormItem } = Form; duration: state.global.duration, })) @Form.create({ - mapPropsToFields() { + mapPropsToFields(props) { return { - appId: Form.createFormField({ - value: 'App1', + applicationId: Form.createFormField({ + value: props.application.applicationId, }), }; }, }) -export default class Application extends Component { - componentDidMount() { - this.props.form.validateFields((err, values) => { - if (!err) { - this.handleChange(values.appId); - } +export default class Application extends PureComponent { + handleDurationChange = (duration) => { + this.props.dispatch({ + type: 'application/loadAllApp', + payload: { duration }, }); } - shouldComponentUpdate(nextProps) { - if (this.props.duration !== nextProps.duration) { - this.props.dispatch({ - type: 'application/fetch', - payload: {}, - }); - } - return this.props.application !== nextProps.application; - } - handleChange(appId) { + handleChange = (applicationId) => { this.props.dispatch({ - type: 'application/fetch', - payload: { applicationId: appId }, + type: 'application/fetchItem', + payload: { + variables: + { + applicationId, + duration: this.props.duration, + }, + data: + { + applicationId, + }, + }, }); } render() { @@ -76,7 +77,7 @@ export default class Application extends Component { <div> <Form layout="inline"> <FormItem> - {getFieldDecorator('appId')( + {getFieldDecorator('applicationId')( <Select showSearch style={{ width: 200 }} @@ -84,55 +85,57 @@ export default class Application extends Component { optionFilterProp="children" onSelect={this.handleChange.bind(this)} > - <Option value="App1">App1</Option> - <Option value="App2">App2</Option> - <Option value="App3">App3</Option> + {this.props.application.allApplication.map((app) => { + return (<Option value={app.key}>{app.name}</Option>); + })} </Select> )} </FormItem> </Form> - <Card - bordered={false} - bodyStyle={{ padding: 0, marginTop: 24 }} - > - <AppTopology elements={this.props.application.getApplicationTopology} layout={{ name: 'concentric', minNodeSpacing: 200 }} /> - </Card> - <Row gutter={24}> - <Col {...middleColResponsiveProps}> - <Card - title="Slow Service" - bordered={false} - bodyStyle={{ padding: 0 }} - > - <Table - size="small" - columns={tableColumns} - dataSource={this.props.application.getSlowService} - pagination={{ - style: { marginBottom: 0 }, - pageSize: 10, - }} - /> - </Card> - </Col> - <Col {...middleColResponsiveProps}> - <Card - title="Servers Throughput" - bordered={false} - bodyStyle={{ padding: 0 }} - > - <Table - size="small" - columns={applicationThroughputColumns} - dataSource={this.props.application.getServerThroughput} - pagination={{ - style: { marginBottom: 0 }, - pageSize: 10, - }} - /> - </Card> - </Col> - </Row> + <Panel duration={this.props.duration} onDurationChange={this.handleDurationChange}> + <Card + bordered={false} + bodyStyle={{ padding: 0, marginTop: 24 }} + > + <AppTopology elements={this.props.application.getApplicationTopology} layout={{ name: 'concentric', minNodeSpacing: 200 }} /> + </Card> + <Row gutter={24}> + <Col {...middleColResponsiveProps}> + <Card + title="Slow Service" + bordered={false} + bodyStyle={{ padding: 0 }} + > + <Table + size="small" + columns={tableColumns} + dataSource={this.props.application.getSlowService} + pagination={{ + style: { marginBottom: 0 }, + pageSize: 10, + }} + /> + </Card> + </Col> + <Col {...middleColResponsiveProps}> + <Card + title="Servers Throughput" + bordered={false} + bodyStyle={{ padding: 0 }} + > + <Table + size="small" + columns={applicationThroughputColumns} + dataSource={this.props.application.getServerThroughput} + pagination={{ + style: { marginBottom: 0 }, + pageSize: 10, + }} + /> + </Card> + </Col> + </Row> + </Panel> </div> ); } diff --git a/src/main/frontend/src/utils/utils.js b/src/main/frontend/src/utils/utils.js index ba0de78..58ebee2 100644 --- a/src/main/frontend/src/utils/utils.js +++ b/src/main/frontend/src/utils/utils.js @@ -141,6 +141,14 @@ export function generateBaseModal({ namespace, query, state, effects = {}, reduc payload: response, }); }, + *fetchItem({ payload }, { call, put }) { + const response = yield call(queryService, namespace, + { variables: payload.variables, query }); + yield put({ + type: 'save', + payload: { data: { ...response.data, ...payload.data } }, + }); + }, }, reducers: { ...reducers, -- To stop receiving notification emails like this one, please contact hanahm...@apache.org.