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/09/05 08:57:08 UTC
[incubator-skywalking-ui] 02/02: Refactor alarm page for v6 protocol
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 6.0.0/dev
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit d2af186efce9d1ec3d999701aec0571c3f001db5
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Wed Sep 5 16:56:36 2018 +0800
Refactor alarm page for v6 protocol
---
.roadhogrc.mock.js | 4 ++--
mock/alarm.js | 9 +++++++++
query-protocol | 2 +-
src/models/alarm.js | 46 ++++++++++++++++++++++------------------------
src/routes/Alarm/Alarm.js | 38 +++++++++++++++++++++-----------------
5 files changed, 55 insertions(+), 44 deletions(-)
diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 9e34ccf..9fa1e25 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -5,7 +5,7 @@ import { getTopology } from './mock/topology';
import { getAllApplication, getApplication } from './mock/application';
import { searchServer, getServer } from './mock/server';
import { searchService, getService } from './mock/service';
-import { getAlarm, getNoticeAlarm, AlarmTrend } from './mock/alarm';
+import { Alarms, getNoticeAlarm, AlarmTrend } from './mock/alarm';
import { TraceBrief, Trace } from './mock/trace'
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import { graphql } from 'graphql';
@@ -39,6 +39,7 @@ addMockFunctionsToSchema({
ClusterBrief,
Thermodynamic,
AlarmTrend,
+ Alarms,
TraceBrief,
Trace,
},
@@ -58,7 +59,6 @@ const proxy = {
'POST /api/service/search': searchService,
'POST /api/service': getService,
'POST /api/service/options': getAllApplication,
- 'POST /api/alarm': getAlarm,
'POST /api/notice': getNoticeAlarm,
'POST /api/login/account': (req, res) => {
const { password, userName } = req.body;
diff --git a/mock/alarm.js b/mock/alarm.js
index 2358bfe..7af3253 100644
--- a/mock/alarm.js
+++ b/mock/alarm.js
@@ -50,6 +50,15 @@ export default {
}
));
},
+ Alarms: () => mockjs.mock({
+ 'msgs|10': [{
+ 'id|+1': 1,
+ message: '@paragraph(1)',
+ startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+ scope: 'SERVICE',
+ }],
+ total: '@natural(5, 50)',
+ }),
getAlarm(req, res) {
const { variables: { alarmType } } = req.body;
switch (alarmType) {
diff --git a/query-protocol b/query-protocol
index 9a6bb77..c6ee5d1 160000
--- a/query-protocol
+++ b/query-protocol
@@ -1 +1 @@
-Subproject commit 9a6bb77ac06f36ab4949ea193b152f22d09ab8a8
+Subproject commit c6ee5d15f38024c3be61be579eac4035ffbfd4bf
diff --git a/src/models/alarm.js b/src/models/alarm.js
index 576dda9..4b0fe44 100644
--- a/src/models/alarm.js
+++ b/src/models/alarm.js
@@ -16,80 +16,78 @@
*/
-import { generateModal } from '../utils/models';
+import { base } from '../utils/models';
const dataQuery = `
- query Alarm($keyword: String, $alarmType: AlarmType, $duration:Duration!, $paging: Pagination!){
- loadAlarmList(keyword: $keyword, alarmType: $alarmType, duration: $duration, paging: $paging) {
- items {
+ query Alarm($keyword: String, $scope: Scope, $duration:Duration!, $paging: Pagination!){
+ getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging) {
+ msgs {
key: id
- title
- content
+ message
startTime
- causeType
}
total
}
}
`;
-export default generateModal({
+export default base({
namespace: 'alarm',
state: {
- applicationAlarmList: {
- items: [],
+ serviceAlarmList: {
+ msgs: [],
total: 0,
},
- serverAlarmList: {
- items: [],
+ serviceInstanceAlarmList: {
+ msgs: [],
total: 0,
},
- serviceAlarmList: {
- items: [],
+ endpointAlarmList: {
+ msgs: [],
total: 0,
},
},
dataQuery,
reducers: {
- saveApplicationAlarmList(preState, { payload }) {
+ saveServiceAlarmList(preState, { payload }) {
if (!payload) {
return preState;
}
- const { loadAlarmList } = payload;
+ const { getAlarm } = payload;
const { data } = preState;
return {
...preState,
data: {
...data,
- applicationAlarmList: loadAlarmList,
+ serviceAlarmList: getAlarm,
},
};
},
- saveServerAlarmList(preState, { payload }) {
+ saveServiceInstanceAlarmList(preState, { payload }) {
if (!payload) {
return preState;
}
- const { loadAlarmList } = payload;
+ const { getAlarm } = payload;
const { data } = preState;
return {
...preState,
data: {
...data,
- serverAlarmList: loadAlarmList,
+ serviceInstanceAlarmList: getAlarm,
},
};
},
- saveServiceAlarmList(preState, { payload }) {
+ saveEndpointAlarmList(preState, { payload }) {
if (!payload) {
return preState;
}
- const { loadAlarmList } = payload;
+ const { getAlarm } = payload;
const { data } = preState;
return {
...preState,
data: {
...data,
- serviceAlarmList: loadAlarmList,
+ endpointAlarmList: getAlarm,
},
};
},
@@ -101,7 +99,7 @@ export default generateModal({
dispatch({
type: 'saveVariables',
payload: { values: {
- alarmType: state.type.toUpperCase(),
+ scope: state.type.toUpperCase(),
} },
});
}
diff --git a/src/routes/Alarm/Alarm.js b/src/routes/Alarm/Alarm.js
index 2443229..06d989b 100644
--- a/src/routes/Alarm/Alarm.js
+++ b/src/routes/Alarm/Alarm.js
@@ -30,6 +30,12 @@ const defaultPaging = {
needTotal: true,
};
+const funcMap = {
+ "SERVICE": "saveServiceAlarmList",
+ "SERVICE_INSTANCE": "saveServiceInstanceAlarmList",
+ "ENDPOINT": "saveEndpointAlarmList",
+}
+
@connect(state => ({
alarm: state.alarm,
globalVariables: state.global.globalVariables,
@@ -38,11 +44,11 @@ const defaultPaging = {
export default class Alarm extends PureComponent {
componentDidMount() {
const { alarm: { variables: { values } } } = this.props;
- if (!values.alarmType) {
+ if (!values.scope) {
this.props.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
- alarmType: 'APPLICATION',
+ scope: 'SERVICE',
paging: defaultPaging,
} },
});
@@ -72,26 +78,25 @@ export default class Alarm extends PureComponent {
});
}
- changeAlarmType = (alarmType) => {
+ changeScope = (scope) => {
this.props.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
- alarmType,
+ scope,
paging: defaultPaging,
} },
});
}
handleChange = (variables) => {
- const type = variables.alarmType.charAt(0) + variables.alarmType.slice(1).toLowerCase();
const { paging = defaultPaging } = variables;
this.props.dispatch({
type: 'alarm/fetchData',
- payload: { variables: { ...variables, paging }, reducer: `save${type}AlarmList` },
+ payload: { variables: { ...variables, paging }, reducer: funcMap[variables.scope] },
});
}
- renderList = ({ items, total }) => {
+ renderList = ({ msgs, total }) => {
const { alarm: { variables: { values: { paging = defaultPaging } } }, loading } = this.props;
const pagination = {
pageSize: paging.pageSize,
@@ -104,20 +109,19 @@ export default class Alarm extends PureComponent {
className="demo-loadmore-list"
loading={loading}
itemLayout="horizontal"
- dataSource={items}
+ dataSource={msgs}
pagination={pagination}
- renderItem={item => (
+ renderItem={msg => (
<List.Item>
<List.Item.Meta
avatar={
<Avatar
- style={item.causeType === 'LOW_SUCCESS_RATE' ? { backgroundColor: '#e68a00' } : { backgroundColor: '#b32400' }}
- icon={item.causeType === 'LOW_SUCCESS_RATE' ? 'clock-circle-o' : 'close'}
+ style={{ backgroundColor: '#b32400' }}
+ icon='close'
/>}
- title={item.title}
- description={item.content}
+ description={msg.message}
/>
- <div>{item.startTime}</div>
+ <div>{msg.startTime}</div>
</List.Item>
)}
/>);
@@ -145,10 +149,10 @@ export default class Alarm extends PureComponent {
bordered={false}
extra={extraContent}
>
- <Tabs activeKey={values.alarmType} onChange={this.changeAlarmType}>
- <TabPane tab="Application" key="APPLICATION">{this.renderList(data.applicationAlarmList)}</TabPane>
- <TabPane tab="Server" key="SERVER">{this.renderList(data.serverAlarmList)}</TabPane>
+ <Tabs activeKey={values.scope} onChange={this.changeScope}>
<TabPane tab="Service" key="SERVICE">{this.renderList(data.serviceAlarmList)}</TabPane>
+ <TabPane tab="ServiceInstance" key="SERVICE_INSTANCE">{this.renderList(data.serviceInstanceAlarmList)}</TabPane>
+ <TabPane tab="Endpoint" key="ENDPOINT">{this.renderList(data.endpointAlarmList)}</TabPane>
</Tabs>
</Card>
</Panel>