You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by wu...@apache.org on 2018/03/08 09:12:32 UTC
[incubator-skywalking-ui] branch master updated: Fix bugs in e2e
test (#143)
This is an automated email from the ASF dual-hosted git repository.
wusheng 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 0fa958c Fix bugs in e2e test (#143)
0fa958c is described below
commit 0fa958cfb84a7c03e5b8b0547f4bd711199fb49a
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Thu Mar 8 17:12:30 2018 +0800
Fix bugs in e2e test (#143)
* Rename favicon
* Amend topology
* Add default value to Search component
* Rename favicon path
* Fix #138 add a new avg function to filter 0 value
* Fix #137 typo in Server and Service
* Fix #141 render dependency map error
* Fix #142 the default value of applicationId should be 'All application'
---
mock/server.js | 4 +-
mock/service.js | 4 +-
public/{img/icon => }/favicon.png | Bin
src/components/Page/Search/index.js | 11 ++++-
src/models/trace.js | 5 +++
src/routes/Application/Application.js | 2 +-
src/routes/Dashboard/Dashboard.js | 3 +-
src/routes/Server/Server.js | 14 +++---
src/routes/Service/Service.js | 14 +++---
src/routes/Trace/Trace.js | 19 ++++----
src/utils/models.js | 8 +++-
src/utils/utils.js | 79 +++-------------------------------
12 files changed, 58 insertions(+), 105 deletions(-)
diff --git a/mock/server.js b/mock/server.js
index 55a859a..7a63465 100644
--- a/mock/server.js
+++ b/mock/server.js
@@ -43,10 +43,10 @@ export default {
{
data: {
getServerResponseTimeTrend: {
- 'trendList|60': ['@natural(100, 1000)'],
+ 'trendList|60': ['@natural(0, 1000)'],
},
getServerTPSTrend: {
- 'trendList|60': ['@natural(500, 10000)'],
+ 'trendList|60': ['@natural(0, 10000)'],
},
getCPUTrend: {
'cost|60': ['@natural(0, 99)'],
diff --git a/mock/service.js b/mock/service.js
index 1f1c42d..881d6db 100644
--- a/mock/service.js
+++ b/mock/service.js
@@ -87,8 +87,8 @@ export default {
target: 1,
'isAlert|1': true,
'callType|1': ['rpc', 'http', 'dubbo'],
- 'callsPerSec|0-100': 1,
- 'avgResponseTime|500-5000': 1,
+ 'callsPerSec|0-1000': 1,
+ 'avgResponseTime|500-5000': 0,
}))).concat(downNodes.nodes.map(node => (mockjs.mock({
source: 1,
target: node.id,
diff --git a/public/img/icon/favicon.png b/public/favicon.png
similarity index 100%
rename from public/img/icon/favicon.png
rename to public/favicon.png
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
index 5986b4e..45b9ae0 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -27,14 +27,18 @@ export default class Search extends PureComponent {
constructor(props) {
super(props);
this.lastFetchId = 0;
+ this.originFetchServer = this.fetchServer;
this.fetchServer = debounce(this.fetchServer, 800);
}
state = {
data: [],
fetching: false,
}
- fetchServer = (value) => {
- if (!value || value.length < 1) {
+ componentDidMount() {
+ this.originFetchServer('', true);
+ }
+ fetchServer = (value, isSelectOne) => {
+ if (value === undefined) {
return;
}
const { url, query, variables = {}, transform } = this.props;
@@ -57,6 +61,9 @@ export default class Search extends PureComponent {
}
const list = body.data[Object.keys(body.data)[0]];
this.setState({ data: (transform ? list.map(transform) : list), fetching: false });
+ if (isSelectOne && this.state.data.length > 0) {
+ this.handleSelect(this.state.data[0]);
+ }
});
}
handleSelect = (value) => {
diff --git a/src/models/trace.js b/src/models/trace.js
index df350ce..4c2ade1 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -94,6 +94,11 @@ export default generateModal({
},
},
optionsQuery,
+ defaultOption: {
+ applicationId: {
+ label: 'All Application',
+ },
+ },
dataQuery,
effects: {
*fetchSpans({ payload }, { call, put }) {
diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
index b2f2946..6bb59eb 100644
--- a/src/routes/Application/Application.js
+++ b/src/routes/Application/Application.js
@@ -110,7 +110,7 @@ export default class Application extends PureComponent {
bordered={false}
bodyStyle={{ padding: 0, marginTop: 24 }}
>
- <AppTopology elements={data.getApplicationTopology} layout={{ name: 'concentric', minNodeSpacing: 200 }} />
+ <AppTopology elements={data.getApplicationTopology} layout={{ name: 'concentric', startAngle: Math.PI, minNodeSpacing: 250 }} />
</Card>
<Row gutter={24}>
<Col {...middleColResponsiveProps}>
diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
index 45be094..5470750 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -23,6 +23,7 @@ import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
import { Panel, Ranking } from '../../components/Page';
@connect(state => ({
@@ -47,7 +48,7 @@ export default class Dashboard extends PureComponent {
let min = 0;
if (numOfAlarmRate && numOfAlarmRate.length > 0) {
visitData = axis(this.props.duration, numOfAlarmRate, ({ x, y }) => ({ x, y: y / accuracy }));
- avg = numOfAlarmRate.reduce((acc, curr) => acc + curr) / numOfAlarmRate.length / accuracy;
+ avg = avgTimeSeries(numOfAlarmRate) / accuracy;
max = numOfAlarmRate.reduce((acc, curr) => { return acc < curr ? curr : acc; }) / accuracy;
min = numOfAlarmRate.reduce((acc, curr) => { return acc > curr ? curr : acc; }) / accuracy;
}
diff --git a/src/routes/Server/Server.js b/src/routes/Server/Server.js
index e6dca2b..c176fb7 100644
--- a/src/routes/Server/Server.js
+++ b/src/routes/Server/Server.js
@@ -24,6 +24,7 @@ import {
} from '../../components/Charts';
import DescriptionList from '../../components/DescriptionList';
import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
import { Panel, Search } from '../../components/Page';
const { Description } = DescriptionList;
@@ -65,8 +66,6 @@ export default class Server extends PureComponent {
payload: { variables },
});
}
- avg = list => (list.length > 0 ?
- parseFloat((list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2)) : 0)
bytesToMB = list => list.map(_ => parseFloat((_ / (1024 ** 2)).toFixed(2)))
render() {
const { form, duration, server } = this.props;
@@ -108,17 +107,18 @@ export default class Server extends PureComponent {
>
<Card title="Info" style={{ marginTop: 24 }} bordered={false}>
<DescriptionList>
- <Description term="OS">{serverInfo.name}</Description>
+ <Description term="Application Code">{serverInfo.applicationCode}</Description>
<Description term="Host Name">{serverInfo.host}</Description>
- <Description term="Process Id">{serverInfo.pid}</Description>
<Description term="IPv4">{serverInfo.ipv4 ? serverInfo.ipv4.join() : ''}</Description>
+ <Description term="Process Id">{serverInfo.pid}</Description>
+ <Description term="OS">{serverInfo.name}</Description>
</DescriptionList>
</Card>
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
<ChartCard
title="Avg Response Time"
- total={`${this.avg(getServerResponseTimeTrend.trendList)} ms`}
+ total={`${avgTimeSeries(getServerResponseTimeTrend.trendList)} ms`}
contentHeight={46}
>
{getServerResponseTimeTrend.trendList.length > 0 ? (
@@ -132,8 +132,8 @@ export default class Server extends PureComponent {
</Col>
<Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
<ChartCard
- title="Avg Calls Per Second"
- total={`${this.avg(getServerTPSTrend.trendList)} ms`}
+ title="Avg Throughput"
+ total={`${avgTimeSeries(getServerTPSTrend.trendList)}`}
>
<MiniBar
animate={false}
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index 0583c5e..0de120e 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -23,6 +23,7 @@ import {
ChartCard, MiniArea, MiniBar, Sankey,
} from '../../components/Charts';
import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
import { Panel, Search } from '../../components/Page';
const { Item: FormItem } = Form;
@@ -63,8 +64,7 @@ export default class Service extends PureComponent {
payload: { variables },
});
}
- avg = list => (list.length > 0 ?
- (list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
+ edgeWith = edge => edge.callsPerSec * edge.avgResponseTime;
renderSankey = (data) => {
if (data.nodes.length < 2) {
return <span style={{ display: 'none' }} />;
@@ -76,7 +76,7 @@ export default class Service extends PureComponent {
const nData = {
nodes: data.nodes,
edges: data.calls.map(_ =>
- ({ ..._, value: (_.callsPerSec < 1 ? 1000 : _.callsPerSec * _.avgResponseTime), source: nodesMap.get(`${_.source}`), target: nodesMap.get(`${_.target}`) })),
+ ({ ..._, value: (this.edgeWith(_) < 1 ? 1000 : this.edgeWith(_)), source: nodesMap.get(`${_.source}`), target: nodesMap.get(`${_.target}`) })),
};
return (
<Row gutter={24}>
@@ -134,8 +134,8 @@ export default class Service extends PureComponent {
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
- title="Avg Throughout"
- total={`${this.avg(getServiceTPSTrend.trendList)}`}
+ title="Avg Throughput"
+ total={`${avgTimeSeries(getServiceTPSTrend.trendList)}`}
contentHeight={46}
>
<MiniArea
@@ -147,7 +147,7 @@ export default class Service extends PureComponent {
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
title="Avg Response Time"
- total={`${this.avg(getServiceResponseTimeTrend.trendList)} ms`}
+ total={`${avgTimeSeries(getServiceResponseTimeTrend.trendList)} ms`}
contentHeight={46}
>
<MiniArea
@@ -158,7 +158,7 @@ export default class Service extends PureComponent {
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
title="Avg SLA"
- total={`${this.avg(getServiceSLATrend.trendList) / 100} %`}
+ total={`${(avgTimeSeries(getServiceSLATrend.trendList) / 100).toFixed(2)} %`}
>
<MiniBar
animate={false}
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 8dec0a7..93510e2 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -124,33 +124,36 @@ export default class Trace extends PureComponent {
const { trace: { variables: { options } } } = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
- <Row gutter={{ md: 8, lg: 8, xl: 8 }}>
- <Col xl={4} sm={24}>
+ <Row gutter={{ md: 8, lg: 12, xl: 8 }}>
+ <Col xl={4} lg={12} sm={24}>
<FormItem label="Application">
{getFieldDecorator('applicationId')(
- <Select placeholder="No application" style={{ width: '100%' }}>
+ <Select placeholder="All application" style={{ width: '100%' }}>
{options.applicationId && options.applicationId.map((app) => {
- return (<Option key={app.key} value={app.key}>{app.label}</Option>);
+ return (
+ <Option key={app.key ? app.key : -1} value={app.key}>
+ {app.label}
+ </Option>);
})}
</Select>
)}
</FormItem>
</Col>
- <Col xl={4} sm={24}>
+ <Col xl={4} lg={12} sm={24}>
<FormItem label="TraceId">
{getFieldDecorator('traceId')(
<Input placeholder="Input trace id" />
)}
</FormItem>
</Col>
- <Col xl={6} sm={24}>
+ <Col xl={6} lg={12} sm={24}>
<FormItem label="OperationName">
{getFieldDecorator('operationName')(
<Input placeholder="Input operation name" />
)}
</FormItem>
</Col>
- <Col xl={6} sm={24}>
+ <Col xl={6} lg={12} sm={24}>
<FormItem label="DurationRange">
{getFieldDecorator('minTraceDuration')(
<InputNumber style={{ width: '40%' }} />
@@ -160,7 +163,7 @@ export default class Trace extends PureComponent {
)}
</FormItem>
</Col>
- <Col xl={4} sm={24}>
+ <Col xl={4} lg={12} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">Search</Button>
</span>
diff --git a/src/utils/models.js b/src/utils/models.js
index a3e47d7..82a67bd 100644
--- a/src/utils/models.js
+++ b/src/utils/models.js
@@ -18,7 +18,7 @@
import { query as queryService } from '../services/graphql';
-export function generateModal({ namespace, dataQuery, optionsQuery, state = {},
+export function generateModal({ namespace, dataQuery, optionsQuery, defaultOption, state = {},
effects = {}, reducers = {}, subscriptions = {} }) {
return {
namespace,
@@ -76,6 +76,12 @@ export function generateModal({ namespace, dataQuery, optionsQuery, state = {},
Object.keys(allOptions).forEach((_) => {
const thisOptions = allOptions[_];
if (!values[_]) {
+ if (defaultOption[_]) {
+ defaultValues[_] = defaultOption[_].key;
+ defaultLabels[_] = defaultOption[_].label;
+ amendOptions[_] = [defaultOption[_], ...thisOptions];
+ return;
+ }
if (thisOptions.length > 0) {
defaultValues[_] = thisOptions[0].key;
defaultLabels[_] = thisOptions[0].label;
diff --git a/src/utils/utils.js b/src/utils/utils.js
index fbacd0c..402a618 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -16,55 +16,15 @@
*/
-import moment from 'moment';
-
export function fixedZero(val) {
return val * 1 < 10 ? `0${val}` : val;
}
-export function getTimeDistance(type) {
- const now = new Date();
- const oneDay = 1000 * 60 * 60 * 24;
-
- if (type === 'today') {
- now.setHours(0);
- now.setMinutes(0);
- now.setSeconds(0);
- return [moment(now), moment(now.getTime() + (oneDay - 1000))];
- }
-
- if (type === 'week') {
- let day = now.getDay();
- now.setHours(0);
- now.setMinutes(0);
- now.setSeconds(0);
-
- if (day === 0) {
- day = 6;
- } else {
- day -= 1;
- }
-
- const beginTime = now.getTime() - (day * oneDay);
-
- return [moment(beginTime), moment(beginTime + ((7 * oneDay) - 1000))];
- }
-
- if (type === 'month') {
- const year = now.getFullYear();
- const month = now.getMonth();
- const nextDate = moment(now).add(1, 'months');
- const nextYear = nextDate.year();
- const nextMonth = nextDate.month();
-
- return [moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`), moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000)];
- }
-
- if (type === 'year') {
- const year = now.getFullYear();
-
- return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
- }
+export function avgTimeSeries(list) {
+ const filteredList = list.filter(_ => _ > 0);
+ return filteredList.length > 0 ?
+ parseFloat((filteredList.reduce(
+ (acc, curr) => acc + curr) / filteredList.length).toFixed(2)) : 0;
}
export function getPlainNode(nodeList, parentPath = '') {
@@ -85,33 +45,6 @@ export function getPlainNode(nodeList, parentPath = '') {
return arr;
}
-export function digitUppercase(n) {
- const fraction = ['角', '分'];
- const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
- const unit = [
- ['元', '万', '亿'],
- ['', '拾', '佰', '仟'],
- ];
- let num = Math.abs(n);
- let s = '';
- fraction.forEach((item, index) => {
- s += (digit[Math.floor(num * 10 * (10 ** index)) % 10] + item).replace(/零./, '');
- });
- s = s || '整';
- num = Math.floor(num);
- for (let i = 0; i < unit[0].length && num > 0; i += 1) {
- let p = '';
- for (let j = 0; j < unit[1].length && num > 0; j += 1) {
- p = digit[num % 10] + unit[1][j] + p;
- num = Math.floor(num / 10);
- }
- s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
- }
-
- return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
-}
-
-
function getRelation(str1, str2) {
if (str1 === str2) {
console.warn('Two path are equal!'); // eslint-disable-line
@@ -131,9 +64,7 @@ function getRenderArr(routes) {
renderArr.push(routes[0]);
for (let i = 1; i < routes.length; i += 1) {
let isAdd = false;
- // 是否包含
isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
- // 去重
renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
if (isAdd) {
renderArr.push(routes[i]);
--
To stop receiving notification emails like this one, please contact
wusheng@apache.org.