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 9d33ad35915f6815411c58049916b5cc6408af98
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Fri Jan 26 10:44:18 2018 +0800
Add panel page
---
src/main/frontend/mock/trace.js | 24 ++++++++++
.../frontend/src/components/Page/Panel/index.js | 20 ++++++++
src/main/frontend/src/components/Page/index.js | 5 ++
src/main/frontend/src/models/dashboard.js | 54 +++++++++++++---------
.../frontend/src/routes/Dashboard/Dashboard.js | 22 +++------
src/main/frontend/src/utils/utils.js | 27 +++++++++++
6 files changed, 116 insertions(+), 36 deletions(-)
diff --git a/src/main/frontend/mock/trace.js b/src/main/frontend/mock/trace.js
index 8ef8617..5b9ddce 100644
--- a/src/main/frontend/mock/trace.js
+++ b/src/main/frontend/mock/trace.js
@@ -49,6 +49,30 @@ export default {
peer: '@ip',
'tags|1-5': [{ key: 'db.type', value: 'aa' }],
},
+ {
+ spanId: 3,
+ parentSpanId: 2,
+ applicationCode: 'yy',
+ startTime: 1516151349312,
+ endTime: 1516151350728,
+ operationName: '/sql/qq',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ 'tags|1-5': [{ key: 'db.type', value: 'aa' }],
+ },
+ {
+ spanId: 4,
+ parentSpanId: 1,
+ applicationCode: 'zz',
+ startTime: 1516151351000,
+ endTime: 1516151354000,
+ operationName: '/sql/qq',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ 'tags|1-5': [{ key: 'db.type', value: 'aa' }],
+ },
],
},
},
diff --git a/src/main/frontend/src/components/Page/Panel/index.js
b/src/main/frontend/src/components/Page/Panel/index.js
new file mode 100644
index 0000000..c222fd9
--- /dev/null
+++ b/src/main/frontend/src/components/Page/Panel/index.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+export default class Panel extends Component {
+ componentDidMount() {
+ const { duration, onDurationChange } = this.props;
+ onDurationChange(duration);
+ }
+ shouldComponentUpdate(nextProps) {
+ const { duration, onDurationChange } = this.props;
+ if (duration !== nextProps.duration) {
+ onDurationChange();
+ return false;
+ }
+ return true;
+ }
+ render() {
+ const { children } = this.props;
+ return children && (<div> {children} </div>);
+ }
+}
diff --git a/src/main/frontend/src/components/Page/index.js
b/src/main/frontend/src/components/Page/index.js
new file mode 100644
index 0000000..9d40e75
--- /dev/null
+++ b/src/main/frontend/src/components/Page/index.js
@@ -0,0 +1,5 @@
+import Panel from './Panel';
+
+export default {
+ Panel,
+};
diff --git a/src/main/frontend/src/models/dashboard.js
b/src/main/frontend/src/models/dashboard.js
index 0796d23..cee6afd 100644
--- a/src/main/frontend/src/models/dashboard.js
+++ b/src/main/frontend/src/models/dashboard.js
@@ -1,6 +1,6 @@
-import { query } from '../services/graphql';
+import { generateBaseModal } from '../utils/utils';
-export default {
+export default generateBaseModal({
namespace: 'dashboard',
state: {
getClusterBrief: {
@@ -19,22 +19,34 @@ export default {
getTopNSlowService: [],
getTopNServerThroughput: [],
},
- effects: {
- *fetch({ payload }, { call, put }) {
- const response = yield call(query, 'dashboard', payload);
- yield put({
- type: 'save',
- payload: response,
- });
- },
- },
-
- reducers: {
- save(state, action) {
- return {
- ...state,
- ...action.payload.data,
- };
- },
- },
-};
+ query: `
+ query Dashboard($duration: Duration!) {
+ getClusterBrief(duration: $duration) {
+ numOfApplication
+ numOfService
+ numOfDatabase
+ numOfCache
+ numOfMQ
+ }
+ getAlarmTrend(duration: $duration) {
+ numOfAlarmRate
+ }
+ getConjecturalApps(duration: $duration) {
+ apps {
+ name
+ num
+ }
+ }
+ getTopNSlowService(duration: $duration, topN: 10) {
+ id
+ name
+ avgResponseTime
+ }
+ getTopNServerThroughput(duration: $duration, topN: 10) {
+ id
+ name
+ tps
+ }
+ }
+ `,
+});
diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js
b/src/main/frontend/src/routes/Dashboard/Dashboard.js
index 04eb438..230cd6c 100644
--- a/src/main/frontend/src/routes/Dashboard/Dashboard.js
+++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js
@@ -1,31 +1,23 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, List, Avatar } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { timeRange } from '../../utils/utils';
+import { Panel } from '../../components/Page';
@connect(state => ({
dashboard: state.dashboard,
duration: state.global.duration,
}))
-export default class Dashboard extends Component {
- componentDidMount() {
+export default class Dashboard extends PureComponent {
+ handleDurationChange = (duration) => {
this.props.dispatch({
type: 'dashboard/fetch',
- payload: {},
+ payload: { duration },
});
}
- shouldComponentUpdate(nextProps) {
- if (this.props.duration !== nextProps.duration) {
- this.props.dispatch({
- type: 'dashboard/fetch',
- payload: {},
- });
- }
- return this.props.dashboard !== nextProps.dashboard;
- }
renderList = (data, title, content, unit) => {
return (<List
size="small"
@@ -62,7 +54,7 @@ export default class Dashboard extends Component {
min = numOfAlarmRate.reduce((acc, curr) => { return acc > curr ? curr :
acc; });
}
return (
- <div>
+ <Panel duration={this.props.duration}
onDurationChange={this.handleDurationChange}>
<Row gutter={24}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<ChartCard
@@ -157,7 +149,7 @@ export default class Dashboard extends Component {
</Card>
</Col>
</Row>
- </div>
+ </Panel>
);
}
}
diff --git a/src/main/frontend/src/utils/utils.js
b/src/main/frontend/src/utils/utils.js
index 0cb3d9f..ba0de78 100644
--- a/src/main/frontend/src/utils/utils.js
+++ b/src/main/frontend/src/utils/utils.js
@@ -1,4 +1,5 @@
import moment from 'moment';
+import { query as queryService } from '../services/graphql';
function createTimeMeasure(measureType, step, format, displayFormat = format) {
return {
@@ -126,3 +127,29 @@ export function generateDuration({ from, to }) {
},
};
}
+
+export function generateBaseModal({ namespace, query, state, effects = {},
reducers = {} }) {
+ return {
+ namespace,
+ state,
+ effects: {
+ ...effects,
+ *fetch({ payload }, { call, put }) {
+ const response = yield call(queryService, namespace, { variables:
payload, query });
+ yield put({
+ type: 'save',
+ payload: response,
+ });
+ },
+ },
+ reducers: {
+ ...reducers,
+ save(preState, action) {
+ return {
+ ...preState,
+ ...action.payload.data,
+ };
+ },
+ },
+ };
+}
--
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.
