[incubator-skywalking-ui] 02/02: Refactor alarm page to the list style

[hanahmily]

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 2f51c17d573807818508293c0ec0efc6639c49c6
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Mon Jan 22 10:30:32 2018 +0800

    Refactor alarm page to the list style
---
 src/main/frontend/mock/alarm.js             | 11 ++++-
 src/main/frontend/src/common/nav.js         |  4 +-
 src/main/frontend/src/routes/Alert/Alert.js | 63 ++++++++++++++++-------------
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/main/frontend/mock/alarm.js b/src/main/frontend/mock/alarm.js
index 1667e75..df7adbc 100644
--- a/src/main/frontend/mock/alarm.js
+++ b/src/main/frontend/mock/alarm.js
@@ -5,7 +5,16 @@ export default {
     res.json(mockjs.mock(
       {
         data: {
-          'loadAlertList|100': [{ 'key|+1': 1, content: '@string(20)', 
startTime: '@datetime("yyyy-MM-dd HH:mm:ss")', 'alertType|1': ['APPLICATION', 
'SERVER', 'SERVICE'] }],
+          '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'],
+            },
+          ],
         },
       }
     ));
diff --git a/src/main/frontend/src/common/nav.js 
b/src/main/frontend/src/common/nav.js
index 21df26c..71cac94 100644
--- a/src/main/frontend/src/common/nav.js
+++ b/src/main/frontend/src/common/nav.js
@@ -52,9 +52,9 @@ export const getNavData = app => [
         component: dynamicWrapper(app, ['trace'], () => 
import('../routes/Trace/Trace')),
       },
       {
-        name: 'Alert',
+        name: 'Alarm',
         icon: 'iconfont icon-ALERT',
-        path: 'alert',
+        path: 'alarm',
         component: dynamicWrapper(app, ['alert'], () => 
import('../routes/Alert/Alert')),
       },
     ],
diff --git a/src/main/frontend/src/routes/Alert/Alert.js 
b/src/main/frontend/src/routes/Alert/Alert.js
index ba2d3b5..c13db2a 100644
--- a/src/main/frontend/src/routes/Alert/Alert.js
+++ b/src/main/frontend/src/routes/Alert/Alert.js
@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { Card, Table, Input } from 'antd';
+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() {
@@ -25,29 +27,32 @@ export default class Alert extends Component {
     }
     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 columns = [{
-      title: 'Content',
-      dataIndex: 'content',
-    }, {
-      title: 'Start Time',
-      dataIndex: 'startTime',
-    }, {
-      title: 'Alert Type',
-      dataIndex: 'alertType',
-      filters: [{
-        text: 'APPLICATION',
-        value: 'APPLICATION',
-      }, {
-        text: 'SERVER',
-        value: 'SERVER',
-      }, {
-        text: 'SERVICE',
-        value: 'SERVICE',
-      }],
-      filterMultiple: false,
-      onFilter: (value, record) => record.alertType.indexOf(value) === 0,
-    }];
     const extraContent = (
       <div className={styles.extraContent}>
         <Search
@@ -57,16 +62,18 @@ export default class Alert extends Component {
         />
       </div>
     );
-
+    const { alert: { loadAlertList } } = this.props;
     return (
       <Card
-        title="Alert List"
+        title="Alarm List"
         bordered={false}
         extra={extraContent}
       >
-        <div className={styles.tableList}>
-          <Table columns={columns} dataSource={this.props.alert.loadAlertList} 
/>
-        </div>
+        <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>
     );
   }

-- 
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.