This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 822348b Fix some details
822348b is described below
commit 822348b0f3309f367f19cea39d986ae6040ca183
Author: gaohongtao <[email protected]>
AuthorDate: Sun Oct 28 21:56:24 2018 +0800
Fix some details
---
src/components/GlobalHeader/index.js | 4 ++--
src/components/Topology/AppTopology.js | 2 +-
src/routes/Alarm/Alarm.js | 2 +-
src/routes/Topology/Topology.js | 22 +++++++++++++++++++---
4 files changed, 23 insertions(+), 7 deletions(-)
diff --git a/src/components/GlobalHeader/index.js
b/src/components/GlobalHeader/index.js
index 115b584..64957da 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -81,8 +81,8 @@ export default class GlobalHeader extends PureComponent {
onDurationToggle, onDurationReload, onRedirect: redirect,
onMenuClick,
} = this.props;
- const applications = applicationAlarmList.msgs.map(_ => ({ ..._, title:
_.message, datetime: moment(_.startTime).format() }));
- const servers = serverAlarmList.msgs.map(_ => ({ ..._, title: _.message,
datetime: moment(_.startTime).format() }));
+ const applications = applicationAlarmList.msgs.map(_ => ({ ..._, title:
_.message, datetime: moment(_.startTime).format('YYYY-MM-DD HH:mm:ss') }));
+ const servers = serverAlarmList.msgs.map(_ => ({ ..._, title: _.message,
datetime: moment(_.startTime).format('YYYY-MM-DD HH:mm:ss') }));
const menu = (
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
<Menu.Item key="logout">
diff --git a/src/components/Topology/AppTopology.js
b/src/components/Topology/AppTopology.js
index 2b60ab1..e3f944e 100644
--- a/src/components/Topology/AppTopology.js
+++ b/src/components/Topology/AppTopology.js
@@ -223,7 +223,7 @@ export default class AppTopology extends Base {
'background-height': '60%',
'background-color': '#e6f7ff',
})
- .selector(':selected')
+ .selector('node:selected')
.css({
width: 67,
height: 67,
diff --git a/src/routes/Alarm/Alarm.js b/src/routes/Alarm/Alarm.js
index d5c6183..a5aa771 100644
--- a/src/routes/Alarm/Alarm.js
+++ b/src/routes/Alarm/Alarm.js
@@ -122,7 +122,7 @@ export default class Alarm extends PureComponent {
/>}
description={msg.message}
/>
- <div>{moment(msg.startTime).format()}</div>
+ <div>{moment(msg.startTime).format('YYYY-MM-DD HH:mm:ss')}</div>
</List.Item>
)}
/>);
diff --git a/src/routes/Topology/Topology.js b/src/routes/Topology/Topology.js
index 6a42c05..9b066df 100644
--- a/src/routes/Topology/Topology.js
+++ b/src/routes/Topology/Topology.js
@@ -18,7 +18,7 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Card, Icon, Radio, Avatar, Select, Input } from 'antd';
+import { Row, Col, Card, Icon, Radio, Avatar, Select, Input, Popover, Tag }
from 'antd';
import { ChartCard } from '../../components/Charts';
import { AppTopology } from '../../components/Topology';
import { Panel } from '../../components/Page';
@@ -131,7 +131,14 @@ export default class Topology extends PureComponent {
handleChangeLatencyStyle = (e) => {
const { value } = e.target;
- const latencyRange = value.split(',').map(_ => parseInt(_.trim(), 10));
+ const vArray = value.split(',');
+ if (vArray.length !== 2) {
+ return;
+ }
+ const latencyRange = vArray.map(_ => parseInt(_.trim(), 10)).filter(_ =>
!isNaN(_));
+ if (latencyRange.length !== 2) {
+ return;
+ }
const { dispatch } = this.props;
dispatch({
type: 'topology/setLatencyStyleRange',
@@ -183,6 +190,13 @@ export default class Topology extends PureComponent {
const { data, variables: { appRegExps, appFilters = [], latencyRange } } =
this.props.topology;
const { metrics, layout = 0 } = data;
const { getGlobalTopology: topologData } = data;
+ const content = (
+ <div>
+ <p><Tag color="#40a9ff">Less than {latencyRange[0]} ms </Tag></p>
+ <p><Tag color="#d4b106">Between {latencyRange[0]} ms and
{latencyRange[1]} ms</Tag></p>
+ <p><Tag color="#cf1322">More than {latencyRange[1]} ms</Tag></p>
+ </div>
+ );
return (
<Panel globalVariables={this.props.globalVariables}
onChange={this.handleChange}>
<Row gutter={8}>
@@ -236,7 +250,9 @@ export default class Topology extends PureComponent {
{data.getGlobalTopology.nodes.filter(_ => _.sla)
.map(_ => <Option key={_.name}>{_.name}</Option>)}
</Select>
- <h4>Latency coloring thresholds</h4>
+ <Popover content={content} title="Info">
+ <h4>Latency coloring thresholds <Icon type="info-circle-o"
/></h4>
+ </Popover>
<Input style={{ width: '100%', marginBottom: 20 }}
onChange={this.handleChangeLatencyStyle} value={latencyRange.join(',')} />
<h4>Overview</h4>
<DescriptionList layout="vertical">
