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.
