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 354beb9b0a87bbce37e7d4bd77dac8ee4a818d31 Author: gaohongtao <[email protected]> AuthorDate: Tue Jan 9 00:13:18 2018 +0800 Fetching alarm data --- src/main/frontend/.roadhogrc.mock.js | 5 +++ src/main/frontend/src/models/alert.js | 17 ++++++-- src/main/frontend/src/routes/Alert/Alert.js | 67 ++++++++++++----------------- 3 files changed, 46 insertions(+), 43 deletions(-) diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js index d25ea2d..8097007 100644 --- a/src/main/frontend/.roadhogrc.mock.js +++ b/src/main/frontend/.roadhogrc.mock.js @@ -73,6 +73,11 @@ const proxy = mockjs.mock({ }, } }, + 'POST /api/alert': { + data: { + 'loadAlertList|100': [{'key|+1': 1, 'content':'@string(20)', 'startTime': '@datetime("yyyy-MM-dd HH:mm:ss")', 'alertType|1': ['APPLICATION', 'SERVER', 'SERVICE']}], + } + }, }); export default noProxy ? {} : delay(proxy, 1000); diff --git a/src/main/frontend/src/models/alert.js b/src/main/frontend/src/models/alert.js index ccd3380..c0a919b 100644 --- a/src/main/frontend/src/models/alert.js +++ b/src/main/frontend/src/models/alert.js @@ -1,17 +1,26 @@ -// import { xxx } from '../services/xxx'; +import { query } from '../services/graphql'; + export default { - namespace: "alert", - state: {}, + namespace: 'alert', + state: { + loadAlertList: [], + }, effects: { *fetch({ payload }, { call, put }) { + const response = yield call(query, 'alert', payload); + yield put({ + type: 'save', + payload: response, + }); }, }, + reducers: { save(state, action) { return { ...state, + ...action.payload.data, }; }, }, }; - diff --git a/src/main/frontend/src/routes/Alert/Alert.js b/src/main/frontend/src/routes/Alert/Alert.js index 34ea5b3..ba2d3b5 100644 --- a/src/main/frontend/src/routes/Alert/Alert.js +++ b/src/main/frontend/src/routes/Alert/Alert.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import { connect } from 'dva'; import { Card, Table, Input } from 'antd'; import styles from './Alert.less'; @@ -7,58 +7,47 @@ const { Search } = Input; @connect(state => ({ alert: state.alert, + duration: state.global.duration, })) -export default class Alert extends PureComponent { +export default class Alert extends Component { + componentDidMount() { + this.props.dispatch({ + type: 'alert/fetch', + payload: {}, + }); + } + shouldComponentUpdate(nextProps) { + if (this.props.duration !== nextProps.duration) { + this.props.dispatch({ + type: 'alert/fetch', + payload: {}, + }); + } + return this.props.alert !== nextProps.alert; + } render() { const columns = [{ title: 'Content', dataIndex: 'content', }, { title: 'Start Time', - dataIndex: 'time', + dataIndex: 'startTime', }, { title: 'Alert Type', - dataIndex: 'type', + dataIndex: 'alertType', filters: [{ - text: 'Application', - value: 'Application', + text: 'APPLICATION', + value: 'APPLICATION', }, { - text: 'Server', - value: 'Server', + text: 'SERVER', + value: 'SERVER', }, { - text: 'Service', - value: 'Service', + text: 'SERVICE', + value: 'SERVICE', }], filterMultiple: false, - onFilter: (value, record) => record.type.indexOf(value) === 0, + onFilter: (value, record) => record.alertType.indexOf(value) === 0, }]; - - const data = [{ - key: '1', - content: 'Application alert', - time: '19:30', - type: 'Application', - }, { - key: '2', - content: 'Server is down', - time: '13:30', - type: 'Server', - }, { - key: '3', - content: 'Server is slow', - time: '8:30', - type: 'Service', - }, { - key: '4', - content: 'Service sla is low', - time: '3:30', - type: 'Service', - }]; - - function onChange(pagination, filters, sorter) { - console.log('params', pagination, filters, sorter); - } - const extraContent = ( <div className={styles.extraContent}> <Search @@ -76,7 +65,7 @@ export default class Alert extends PureComponent { extra={extraContent} > <div className={styles.tableList}> - <Table columns={columns} dataSource={data} onChange={onChange} /> + <Table columns={columns} dataSource={this.props.alert.loadAlertList} /> </div> </Card> ); -- To stop receiving notification emails like this one, please contact "[email protected]" <[email protected]>.
