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
The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
new e2557ac Add searching alarm info
e2557ac is described below
commit e2557ac7d75044c437efd621c5edd60c8a48562e
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Wed Jan 31 11:47:21 2018 +0800
Add searching alarm info
---
src/main/frontend/.roadhogrc.mock.js | 2 +-
src/main/frontend/mock/alarm.js | 73 +++++++++---
src/main/frontend/src/common/nav.js | 2 +-
src/main/frontend/src/models/alarm.js | 58 +++++++++
src/main/frontend/src/models/alert.js | 26 -----
src/main/frontend/src/routes/Alarm/Alarm.js | 130 +++++++++++++++++++++
.../routes/{Alert/Alert.less => Alarm/Alarm.less} | 100 ++++++++--------
src/main/frontend/src/routes/Alert/Alert.js | 80 -------------
src/main/frontend/src/utils/utils.js | 68 ++++-------
9 files changed, 322 insertions(+), 217 deletions(-)
diff --git a/src/main/frontend/.roadhogrc.mock.js
b/src/main/frontend/.roadhogrc.mock.js
index d98cd24..5b2986f 100644
--- a/src/main/frontend/.roadhogrc.mock.js
+++ b/src/main/frontend/.roadhogrc.mock.js
@@ -25,7 +25,7 @@ const proxy = {
'POST /api/server': getServer,
'POST /api/service/search': searchService,
'POST /api/service': getService,
- 'POST /api/alert': getAlarm,
+ 'POST /api/alarm': getAlarm,
'POST /api/trace/options': getAllApplicationForTrace,
'POST /api/trace': getTrace,
'POST /api/spans': getSpans,
diff --git a/src/main/frontend/mock/alarm.js b/src/main/frontend/mock/alarm.js
index df7adbc..5799d4a 100644
--- a/src/main/frontend/mock/alarm.js
+++ b/src/main/frontend/mock/alarm.js
@@ -2,21 +2,64 @@ import mockjs from 'mockjs';
export default {
getAlarm(req, res) {
- res.json(mockjs.mock(
- {
- data: {
- 'loadAlertList|100': [
- {
- 'key|+1': 1,
- title: '@name',
- content: '@paragraph(1)',
- startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
- 'causeType|1': ['LOW_SUCCESS_RATE', 'SLOW_RESPONSE'],
- 'alertType|1': ['APPLICATION', 'SERVER', 'SERVICE'],
+ const { variables: { alarmType } } = req.body;
+ switch (alarmType) {
+ case 'APPLICATION':
+ return res.json(mockjs.mock(
+ {
+ data: {
+ loadAlarmList: {
+ 'items|10': [{
+ 'key|+1': 1,
+ title: '@name',
+ content: '@paragraph(1)',
+ startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+ 'causeType|1': ['LOW_SUCCESS_RATE', 'SLOW_RESPONSE'],
+ alarmType: 'APPLICATION',
+ }],
+ total: '@natural(5, 50)',
+ },
},
- ],
- },
- }
- ));
+ }
+ ));
+ case 'SERVER':
+ return res.json(mockjs.mock(
+ {
+ data: {
+ loadAlarmList: {
+ 'items|10': [{
+ 'key|+1': 1,
+ title: '@name',
+ content: '@paragraph(1)',
+ startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+ 'causeType|1': ['LOW_SUCCESS_RATE', 'SLOW_RESPONSE'],
+ alarmType: 'SERVER',
+ }],
+ total: '@natural(5, 50)',
+ },
+ },
+ }
+ ));
+ case 'SERVICE':
+ return res.json(mockjs.mock(
+ {
+ data: {
+ loadAlarmList: {
+ 'items|10': [{
+ 'key|+1': 1,
+ title: '@name',
+ content: '@paragraph(1)',
+ startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+ 'causeType|1': ['LOW_SUCCESS_RATE', 'SLOW_RESPONSE'],
+ alarmType: 'SERVICE',
+ }],
+ total: '@natural(5, 50)',
+ },
+ },
+ }
+ ));
+ default:
+ return null;
+ }
},
};
diff --git a/src/main/frontend/src/common/nav.js
b/src/main/frontend/src/common/nav.js
index 71cac94..1da8b46 100644
--- a/src/main/frontend/src/common/nav.js
+++ b/src/main/frontend/src/common/nav.js
@@ -55,7 +55,7 @@ export const getNavData = app => [
name: 'Alarm',
icon: 'iconfont icon-ALERT',
path: 'alarm',
- component: dynamicWrapper(app, ['alert'], () =>
import('../routes/Alert/Alert')),
+ component: dynamicWrapper(app, ['alarm'], () =>
import('../routes/Alarm/Alarm')),
},
],
},
diff --git a/src/main/frontend/src/models/alarm.js
b/src/main/frontend/src/models/alarm.js
new file mode 100644
index 0000000..bd1827c
--- /dev/null
+++ b/src/main/frontend/src/models/alarm.js
@@ -0,0 +1,58 @@
+import { generateModal } from '../utils/utils';
+
+const dataQuery = `
+ query Alarm($keyword: String, $alarmType: AlarmType, $duration:Duration!,
$paging: Pagination!){
+ loadAlarmList(keyword: $keyword, alarmType: $alarmType, duration:
$duration, paging: $paging)
+ }
+`;
+
+export default generateModal({
+ namespace: 'alarm',
+ state: {
+ applicationAlarmList: {
+ items: [],
+ total: 0,
+ },
+ serverAlarmList: {
+ items: [],
+ total: 0,
+ },
+ serviceAlarmList: {
+ items: [],
+ total: 0,
+ },
+ },
+ dataQuery,
+ reducers: {
+ saveApplicationAlarmList(preState, { payload: { loadAlarmList } }) {
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
+ applicationAlarmList: loadAlarmList,
+ },
+ };
+ },
+ saveServerAlarmList(preState, { payload: { loadAlarmList } }) {
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
+ serverAlarmList: loadAlarmList,
+ },
+ };
+ },
+ saveServiceAlarmList(preState, { payload: { loadAlarmList } }) {
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
+ serviceAlarmList: loadAlarmList,
+ },
+ };
+ },
+ },
+});
diff --git a/src/main/frontend/src/models/alert.js
b/src/main/frontend/src/models/alert.js
deleted file mode 100644
index c0a919b..0000000
--- a/src/main/frontend/src/models/alert.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { query } from '../services/graphql';
-
-export default {
- 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/Alarm/Alarm.js
b/src/main/frontend/src/routes/Alarm/Alarm.js
new file mode 100644
index 0000000..cb376da
--- /dev/null
+++ b/src/main/frontend/src/routes/Alarm/Alarm.js
@@ -0,0 +1,130 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { Card, Input, Tabs, List, Avatar } from 'antd';
+import { Panel } from '../../components/Page';
+import styles from './Alarm.less';
+
+const { Search } = Input;
+const { TabPane } = Tabs;
+const defaultPaging = {
+ pageNum: 1,
+ pageSize: 10,
+ needTotal: true,
+};
+
+@connect(state => ({
+ alarm: state.alarm,
+ globalVariables: state.global.globalVariables,
+ loading: state.loading.models.alarm,
+}))
+export default class Alarm extends PureComponent {
+ componentDidMount() {
+ this.props.dispatch({
+ type: 'alarm/saveVariables',
+ payload: { values: {
+ alarmType: 'APPLICATION',
+ paging: defaultPaging,
+ } },
+ });
+ }
+ handleSearch = (keyword) => {
+ this.props.dispatch({
+ type: 'alarm/saveVariables',
+ payload: { values: {
+ keyword,
+ paging: defaultPaging,
+ } },
+ });
+ }
+ handlePageChange = (pag) => {
+ this.props.dispatch({
+ type: 'alarm/saveVariables',
+ payload: { values: {
+ paging: {
+ pageNum: pag,
+ pageSize: 10,
+ needTotal: true,
+ },
+ } },
+ });
+ }
+ changeAlarmType = (alarmType) => {
+ this.props.dispatch({
+ type: 'alarm/saveVariables',
+ payload: { values: {
+ alarmType,
+ paging: defaultPaging,
+ } },
+ });
+ }
+ handleChange = (variables) => {
+ const type = variables.alarmType.charAt(0) +
variables.alarmType.slice(1).toLowerCase();
+ this.props.dispatch({
+ type: 'alarm/fetchData',
+ payload: { variables, reducer: `save${type}AlarmList` },
+ });
+ }
+ renderList = ({ items, total }) => {
+ const { alarm: { variables: { values: { paging = defaultPaging } } },
loading } = this.props;
+ const pagination = {
+ pageSize: paging.pageSize,
+ current: paging.pageNum,
+ total,
+ onChange: this.handlePageChange,
+ };
+
+ return (
+ <List
+ className="demo-loadmore-list"
+ loading={loading}
+ itemLayout="horizontal"
+ dataSource={items}
+ pagination={pagination}
+ renderItem={item => (
+ <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'}
+ />}
+ title={item.title}
+ description={item.content}
+ />
+ <div>{item.startTime}</div>
+ </List.Item>
+ )}
+ />);
+ }
+ render() {
+ const extraContent = (
+ <div className={styles.extraContent}>
+ <Search
+ className={styles.extraContentSearch}
+ placeholder="Search..."
+ onSearch={this.handleSearch}
+ />
+ </div>
+ );
+ const { alarm: { variables: { values }, data } } = this.props;
+ return (
+ <Panel
+ variables={values}
+ globalVariables={this.props.globalVariables}
+ onChange={this.handleChange}
+ >
+ <Card
+ title="Alarm List"
+ bordered={false}
+ extra={extraContent}
+ >
+ <Tabs defaultActiveKey={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>
+ <TabPane tab="Service"
key="SERVICE">{this.renderList(data.serviceAlarmList)}</TabPane>
+ </Tabs>
+ </Card>
+ </Panel>
+ );
+ }
+}
diff --git a/src/main/frontend/src/routes/Alert/Alert.less
b/src/main/frontend/src/routes/Alarm/Alarm.less
similarity index 94%
rename from src/main/frontend/src/routes/Alert/Alert.less
rename to src/main/frontend/src/routes/Alarm/Alarm.less
index b10d030..1aa3571 100644
--- a/src/main/frontend/src/routes/Alert/Alert.less
+++ b/src/main/frontend/src/routes/Alarm/Alarm.less
@@ -1,50 +1,50 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
-
-.tableList {
- .tableListOperator {
- margin-bottom: 16px;
- button {
- margin-right: 8px;
- }
- }
-}
-
-.tableListForm {
- :global {
- .ant-form-item {
- margin-bottom: 24px;
- margin-right: 0;
- display: flex;
- > .ant-form-item-label {
- width: auto;
- line-height: 32px;
- padding-right: 8px;
- }
- }
- .ant-form-item-control-wrapper {
- flex: 1;
- }
- }
- .submitButtons {
- white-space: nowrap;
- margin-bottom: 24px;
- }
-}
-
-@media screen and (max-width: @screen-lg) {
- .tableListForm :global(.ant-form-item) {
- margin-right: 24px;
- }
-}
-
-@media screen and (max-width: @screen-md) {
- .tableListForm :global(.ant-form-item) {
- margin-right: 8px;
- }
-}
-
-.extraContentSearch {
- margin-left: 16px;
- width: 272px;
-}
+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.tableList {
+ .tableListOperator {
+ margin-bottom: 16px;
+ button {
+ margin-right: 8px;
+ }
+ }
+}
+
+.tableListForm {
+ :global {
+ .ant-form-item {
+ margin-bottom: 24px;
+ margin-right: 0;
+ display: flex;
+ > .ant-form-item-label {
+ width: auto;
+ line-height: 32px;
+ padding-right: 8px;
+ }
+ }
+ .ant-form-item-control-wrapper {
+ flex: 1;
+ }
+ }
+ .submitButtons {
+ white-space: nowrap;
+ margin-bottom: 24px;
+ }
+}
+
+@media screen and (max-width: @screen-lg) {
+ .tableListForm :global(.ant-form-item) {
+ margin-right: 24px;
+ }
+}
+
+@media screen and (max-width: @screen-md) {
+ .tableListForm :global(.ant-form-item) {
+ margin-right: 8px;
+ }
+}
+
+.extraContentSearch {
+ margin-left: 16px;
+ width: 272px;
+}
diff --git a/src/main/frontend/src/routes/Alert/Alert.js
b/src/main/frontend/src/routes/Alert/Alert.js
deleted file mode 100644
index c13db2a..0000000
--- a/src/main/frontend/src/routes/Alert/Alert.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'dva';
-import { Card, Input, Tabs, List, Avatar } from 'antd';
-import styles from './Alert.less';
-
-const { Search } = Input;
-const { TabPane } = Tabs;
-
-@connect(state => ({
- alert: state.alert,
- duration: state.global.duration,
- loading: state.loading.models.alarm,
-}))
-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;
- }
- changeAlarmType = () => {}
- renderList = (data) => {
- const { loading } = this.props;
- return (
- <List
- className="demo-loadmore-list"
- loading={loading}
- itemLayout="horizontal"
- dataSource={data}
- renderItem={item => (
- <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'}
- />}
- title={item.title}
- description={item.content}
- />
- <div>{item.startTime}</div>
- </List.Item>
- )}
- />);
- }
- render() {
- const extraContent = (
- <div className={styles.extraContent}>
- <Search
- className={styles.extraContentSearch}
- placeholder="Search..."
- onSearch={() => ({})}
- />
- </div>
- );
- const { alert: { loadAlertList } } = this.props;
- return (
- <Card
- title="Alarm List"
- bordered={false}
- extra={extraContent}
- >
- <Tabs defaultActiveKey="1" onChange={this.changeAlarmType}>
- <TabPane tab="Application"
key="1">{this.renderList(loadAlertList.filter(i => i.alertType ===
'APPLICATION'))}</TabPane>
- <TabPane tab="Server"
key="2">{this.renderList(loadAlertList.filter(i => i.alertType ===
'SERVER'))}</TabPane>
- <TabPane tab="Service"
key="3">{this.renderList(loadAlertList.filter(i => i.alertType ===
'SERVICE'))}</TabPane>
- </Tabs>
- </Card>
- );
- }
-}
diff --git a/src/main/frontend/src/utils/utils.js
b/src/main/frontend/src/utils/utils.js
index 6fe041a..633c2cc 100644
--- a/src/main/frontend/src/utils/utils.js
+++ b/src/main/frontend/src/utils/utils.js
@@ -128,40 +128,6 @@ 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,
- });
- },
- *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,
- save(preState, action) {
- return {
- ...preState,
- ...action.payload.data,
- };
- },
- },
- };
-}
-
export function generateModal({ namespace, dataQuery, optionsQuery, state = {},
effects = {}, reducers = {} }) {
return {
@@ -176,20 +142,34 @@ export function generateModal({ namespace, dataQuery,
optionsQuery, state = {},
},
effects: {
*initOptions({ payload }, { call, put }) {
- const { variables } = payload;
+ const { variables, reducer = undefined } = payload;
const response = yield call(queryService, `${namespace}/options`, {
variables, query: optionsQuery });
- yield put({
- type: 'saveOptions',
- payload: response.data,
- });
+ if (reducer) {
+ yield put({
+ type: reducer,
+ payload: response.data,
+ });
+ } else {
+ yield put({
+ type: 'saveOptions',
+ payload: response.data,
+ });
+ }
},
*fetchData({ payload }, { call, put }) {
- const { variables } = payload;
+ const { variables, reducer = undefined } = payload;
const response = yield call(queryService, namespace, { variables,
query: dataQuery });
- yield put({
- type: 'saveData',
- payload: response.data,
- });
+ if (reducer) {
+ yield put({
+ type: reducer,
+ payload: response.data,
+ });
+ } else {
+ yield put({
+ type: 'saveData',
+ payload: response.data,
+ });
+ }
},
...effects,
},
--
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.
