Fix some details
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 @@
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 @@
'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 @@
/>}
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 @@
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 @@
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 @@
{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">
