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/01/22 02:36:01 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated (fcc2d6c ->
2f51c17)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
from fcc2d6c Add menu icon and logo
new 2ebb11a Add Topology graph zooming
new 2f51c17 Refactor alarm page to the list style
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/main/frontend/mock/alarm.js | 11 +++-
src/main/frontend/src/common/nav.js | 4 +-
src/main/frontend/src/components/Topology/Base.js | 15 +++---
src/main/frontend/src/routes/Alert/Alert.js | 63 +++++++++++++----------
src/main/frontend/src/routes/Topology/Topology.js | 18 +++++--
5 files changed, 67 insertions(+), 44 deletions(-)
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 02/02: Refactor alarm page to the list
style
Posted by ha...@apache.org.
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 <ha...@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
hanahmily@apache.org.
[incubator-skywalking-ui] 01/02: Add Topology graph zooming
Posted by ha...@apache.org.
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 2ebb11ad8c5aca26545d814068da6bf971a90b7d
Author: hanahmily <ha...@gmail.com>
AuthorDate: Mon Jan 22 09:41:14 2018 +0800
Add Topology graph zooming
---
src/main/frontend/src/components/Topology/Base.js | 15 +++++++--------
src/main/frontend/src/routes/Topology/Topology.js | 18 +++++++++++++-----
2 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/src/main/frontend/src/components/Topology/Base.js b/src/main/frontend/src/components/Topology/Base.js
index d7e0e8e..9324f9a 100644
--- a/src/main/frontend/src/components/Topology/Base.js
+++ b/src/main/frontend/src/components/Topology/Base.js
@@ -7,12 +7,11 @@ import conf from './conf';
cytoscape.use(coseBilkent);
cytoscape.use(nodeHtmlLabel);
-const cyStyle = {
- height: '600px',
- display: 'block',
-};
-
export default class Base extends Component {
+ state= {
+ height: '600px',
+ display: 'block',
+ }
componentDidMount() {
this.cy = cytoscape({
...conf,
@@ -33,7 +32,7 @@ export default class Base extends Component {
edgeElasticity: 0.1,
});
layout.pon('layoutstop').then(() => {
- this.cy.minZoom(this.cy.zoom());
+ this.cy.minZoom(this.cy.zoom() - 0.3);
});
layout.run();
}
@@ -60,7 +59,7 @@ export default class Base extends Component {
};
}
render() {
- const { height = cyStyle.height } = this.props;
- return (<div style={{ ...cyStyle, height }} ref={(el) => { conf.container = el; }} />);
+ const { height } = this.props;
+ return (<div style={{ ...this.state, height }} ref={(el) => { conf.container = el; }} />);
}
}
diff --git a/src/main/frontend/src/routes/Topology/Topology.js b/src/main/frontend/src/routes/Topology/Topology.js
index 1c51a59..e7297fe 100644
--- a/src/main/frontend/src/routes/Topology/Topology.js
+++ b/src/main/frontend/src/routes/Topology/Topology.js
@@ -8,6 +8,9 @@ import { AppTopology } from '../../components/Topology';
duration: state.global.duration,
}))
export default class Topology extends Component {
+ state = {
+ graphHeight: 600,
+ }
componentDidMount() {
this.props.dispatch({
type: 'topology/fetch',
@@ -25,11 +28,16 @@ export default class Topology extends Component {
}
render() {
return (
- <ChartCard
- title="Topolgy Graph"
- >
- <AppTopology height={800} elements={this.props.topology.getClusterTopology} />
- </ChartCard>
+ <div ref={(el) => { this.graph = el; }}>
+ <ChartCard
+ title="Topolgy Graph"
+ >
+ <AppTopology
+ height={this.state.graphHeight}
+ elements={this.props.topology.getClusterTopology}
+ />
+ </ChartCard>
+ </div>
);
}
}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.