Refactor alarm page for v6 protocol
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 { 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 @@
ClusterBrief,
Thermodynamic,
AlarmTrend,
+ Alarms,
TraceBrief,
Trace,
},
@@ -58,7 +59,6 @@
'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 @@
}
));
},
+ 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: [],
- total: 0,
- },
- serverAlarmList: {
- items: [],
- total: 0,
- },
serviceAlarmList: {
- items: [],
+ msgs: [],
+ total: 0,
+ },
+ serviceInstanceAlarmList: {
+ msgs: [],
+ total: 0,
+ },
+ endpointAlarmList: {
+ msgs: [],
total: 0,
},
},
dataQuery,
reducers: {
- saveApplicationAlarmList(preState, { payload }) {
- if (!payload) {
- return preState;
- }
- const { loadAlarmList } = payload;
- const { data } = preState;
- return {
- ...preState,
- data: {
- ...data,
- applicationAlarmList: loadAlarmList,
- },
- };
- },
- saveServerAlarmList(preState, { payload }) {
- if (!payload) {
- return preState;
- }
- const { loadAlarmList } = payload;
- const { data } = preState;
- return {
- ...preState,
- data: {
- ...data,
- serverAlarmList: loadAlarmList,
- },
- };
- },
saveServiceAlarmList(preState, { payload }) {
if (!payload) {
return preState;
}
- const { loadAlarmList } = payload;
+ const { getAlarm } = payload;
const { data } = preState;
return {
...preState,
data: {
...data,
- serviceAlarmList: loadAlarmList,
+ serviceAlarmList: getAlarm,
+ },
+ };
+ },
+ saveServiceInstanceAlarmList(preState, { payload }) {
+ if (!payload) {
+ return preState;
+ }
+ const { getAlarm } = payload;
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
+ serviceInstanceAlarmList: getAlarm,
+ },
+ };
+ },
+ saveEndpointAlarmList(preState, { payload }) {
+ if (!payload) {
+ return preState;
+ }
+ const { getAlarm } = payload;
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
+ endpointAlarmList: getAlarm,
},
};
},
@@ -101,7 +99,7 @@
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 @@
needTotal: true,
};
+const funcMap = {
+ "SERVICE": "saveServiceAlarmList",
+ "SERVICE_INSTANCE": "saveServiceInstanceAlarmList",
+ "ENDPOINT": "saveEndpointAlarmList",
+}
+
@connect(state => ({
alarm: state.alarm,
globalVariables: state.global.globalVariables,
@@ -38,11 +44,11 @@
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 @@
});
}
- 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 @@
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 @@
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>
