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/02/14 08:51:22 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated (cf57fe6 ->
6a589cf)
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 cf57fe6 Overhaul dashboard and service pages for integration test
new d5ebd41 Add Ranking component
new 6a589cf Add MQ trace feature
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/trace.js | 57 ++++++++++++++++++++++
.../frontend/src/components/Page/Ranking/index.js | 29 +++++++++++
src/main/frontend/src/components/Page/index.js | 2 +
.../frontend/src/components/TraceStack/index.js | 41 ++++++++++++++--
.../frontend/src/routes/Application/Application.js | 48 +++---------------
.../frontend/src/routes/Dashboard/Dashboard.js | 34 +++----------
6 files changed, 138 insertions(+), 73 deletions(-)
create mode 100644 src/main/frontend/src/components/Page/Ranking/index.js
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 02/02: Add MQ trace feature
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 6a589cfeeb9315bef65522ae995bca4786ea2ca8
Author: hanahmily <ha...@gmail.com>
AuthorDate: Wed Feb 14 16:49:49 2018 +0800
Add MQ trace feature
---
src/main/frontend/mock/trace.js | 57 ++++++++++++++++++++++
.../frontend/src/components/TraceStack/index.js | 41 ++++++++++++++--
2 files changed, 95 insertions(+), 3 deletions(-)
diff --git a/src/main/frontend/mock/trace.js b/src/main/frontend/mock/trace.js
index d6c8269..2376cbe 100644
--- a/src/main/frontend/mock/trace.js
+++ b/src/main/frontend/mock/trace.js
@@ -36,6 +36,7 @@ export default {
spans: [
{
spanId: 1,
+ segmentId: 1,
startTime: 1516151345000,
applicationCode: 'xx',
endTime: 1516151355000,
@@ -49,6 +50,7 @@ export default {
{
spanId: 2,
parentSpanId: 1,
+ segmentId: 1,
applicationCode: 'yy',
startTime: 1516151348000,
endTime: 1516151351000,
@@ -61,6 +63,7 @@ export default {
{
spanId: 3,
parentSpanId: 2,
+ segmentId: 1,
applicationCode: 'yy',
startTime: 1516151349312,
endTime: 1516151350728,
@@ -73,6 +76,7 @@ export default {
{
spanId: 4,
parentSpanId: 1,
+ segmentId: 1,
applicationCode: 'zz',
startTime: 1516151351000,
endTime: 1516151354000,
@@ -82,6 +86,59 @@ export default {
peer: '@ip',
'tags|1-5': [{ key: 'db.type', value: 'aa' }],
},
+ {
+ spanId: 5,
+ parentSpanId: 1,
+ segmentId: 1,
+ applicationCode: 'zz',
+ startTime: 1516151351000,
+ endTime: 1516151354000,
+ operationName: '/mq/producer',
+ 'type|1': ['Exit'],
+ 'component|1': ['RockerMQ'],
+ peer: '@ip',
+ 'tags|1-5': [{ key: 'producer', value: 'tt' }],
+ },
+ {
+ spanId: 6,
+ segmentId: 1,
+ applicationCode: 'kk',
+ startTime: 1516151355000,
+ endTime: 1516151360000,
+ operationName: '/mq/consumer',
+ 'type|1': ['Entry'],
+ 'component|1': ['RockerMQ'],
+ peer: '@ip',
+ 'tags|1-5': [{ key: 'consumer', value: 'tt' }],
+ refs: [
+ {
+ parentSpanId: 5,
+ parentSegmentId: 1,
+ },
+ ],
+ },
+ {
+ spanId: 6,
+ segmentId: 1,
+ applicationCode: 'kk',
+ startTime: 1516151355000,
+ endTime: 1516151360000,
+ operationName: '/mq/consumer',
+ 'type|1': ['Entry'],
+ 'component|1': ['Kafka'],
+ peer: '@ip',
+ 'tags|1-5': [{ key: 'consumer', value: 'tt' }],
+ refs: [
+ {
+ traceId: 121212,
+ type: 'CROSS_PROCESS',
+ },
+ {
+ traceId: 22223333,
+ type: 'CROSS_THREAD',
+ },
+ ],
+ },
],
},
},
diff --git a/src/main/frontend/src/components/TraceStack/index.js b/src/main/frontend/src/components/TraceStack/index.js
index 5515b4e..1023109 100644
--- a/src/main/frontend/src/components/TraceStack/index.js
+++ b/src/main/frontend/src/components/TraceStack/index.js
@@ -64,8 +64,9 @@ class TraceStack extends PureComponent {
node.endTime = span.endTime;
node.duration = span.endTime - span.startTime;
node.content = span.operationName;
- node.spanSegId = span.spanId;
- node.parentSpanSegId = span.parentSpanId;
+ node.spanSegId = this.id(span.segmentId, span.spanId);
+ node.parentSpanSegId = this.findParent(span);
+ node.refs = span.refs;
node.type = span.type;
node.peer = span.peer;
node.component = span.component;
@@ -80,6 +81,22 @@ class TraceStack extends PureComponent {
}
idMap[node.spanSegId] = nodes.length - 1;
}
+ id = (...seg) => seg.join();
+ findParent = (span) => {
+ const { spans } = this.props;
+ if (span.refs) {
+ const ref = span.refs.find(_ => spans.findIndex(s =>
+ this.id(_.parentSegmentId, _.parentSpanId) === this.id(s.segmentId, s.spanId)) > -1);
+ if (ref) {
+ return this.id(ref.parentSegmentId, ref.parentSpanId);
+ }
+ }
+ const result = this.id(span.segmentId, span.parentSpanId);
+ if (spans.findIndex(s => result === this.id(s.segmentId, s.spanId)) > -1) {
+ return result;
+ }
+ return null;
+ }
drawAxis = () => {
const { width } = this.state;
const { nodes, bap } = this.state;
@@ -138,7 +155,7 @@ class TraceStack extends PureComponent {
.attr('y', (index * height) + (height / 2))
.attr('class', styles.rectText)
.text(content);
- if (index > 0) {
+ if (index > 0 && positionMap[parentSpanSegId]) {
const parentX = positionMap[parentSpanSegId].x;
const parentY = positionMap[parentSpanSegId].y;
@@ -260,6 +277,23 @@ class TraceStack extends PureComponent {
/>
</TabPane>
)) : null;
+ const relatedTraces = span.parentSpanSegId ? null : (
+ <TabPane tab="Related Trace" key={3}>
+ <List
+ itemLayout="horizontal"
+ dataSource={span.refs}
+ renderItem={item => (
+ <List.Item>
+ <List.Item.Meta
+ size="small"
+ title={item.type}
+ description={item.traceId}
+ />
+ </List.Item>
+ )}
+ />
+ </TabPane>
+ );
return (
<div className={styles.stack}>
<div style={{ paddingBottom: 10 }}>
@@ -289,6 +323,7 @@ class TraceStack extends PureComponent {
/>
</TabPane>
{logs}
+ {relatedTraces}
</Tabs>
</Modal>
</div>
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 01/02: Add Ranking component
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 d5ebd417d7d634ea611b1c5d7de1bb05d8306918
Author: hanahmily <ha...@gmail.com>
AuthorDate: Tue Feb 13 15:09:40 2018 +0800
Add Ranking component
---
.../frontend/src/components/Page/Ranking/index.js | 29 +++++++++++++
src/main/frontend/src/components/Page/index.js | 2 +
.../frontend/src/routes/Application/Application.js | 48 +++-------------------
.../frontend/src/routes/Dashboard/Dashboard.js | 34 +++------------
4 files changed, 43 insertions(+), 70 deletions(-)
diff --git a/src/main/frontend/src/components/Page/Ranking/index.js b/src/main/frontend/src/components/Page/Ranking/index.js
new file mode 100644
index 0000000..e4400d3
--- /dev/null
+++ b/src/main/frontend/src/components/Page/Ranking/index.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react';
+import { List, Avatar } from 'antd';
+
+export default class Ranking extends PureComponent {
+
+ render() {
+ let index = 0;
+ const { data, title, content, unit } = this.props;
+ return (<List
+ size="small"
+ itemLayout="horizontal"
+ dataSource={data}
+ renderItem={item => (
+ <List.Item>
+ <List.Item.Meta
+ avatar={
+ <Avatar
+ style={{ color: '#ff3333', backgroundColor: '#ffb84d' }}
+ >
+ {(() => { index += 1; return index; })()}
+ </Avatar>}
+ title={item[title]}
+ description={`${item[content]} ${unit}`}
+ />
+ </List.Item>
+ )}
+ />);
+ }
+}
diff --git a/src/main/frontend/src/components/Page/index.js b/src/main/frontend/src/components/Page/index.js
index b0c81f5..983d127 100644
--- a/src/main/frontend/src/components/Page/index.js
+++ b/src/main/frontend/src/components/Page/index.js
@@ -1,7 +1,9 @@
import Panel from './Panel';
import Search from './Search';
+import Ranking from './Ranking';
export default {
Panel,
Search,
+ Ranking,
};
diff --git a/src/main/frontend/src/routes/Application/Application.js b/src/main/frontend/src/routes/Application/Application.js
index 92d32a6..ab07b15 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -1,32 +1,12 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card, Table, Form } from 'antd';
+import { Row, Col, Select, Card, Form } from 'antd';
import { AppTopology } from '../../components/Topology';
-import { Panel } from '../../components/Page';
+import { Panel, Ranking } from '../../components/Page';
const { Option } = Select;
const { Item: FormItem } = Form;
-const tableColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
-}, {
- title: 'Duration',
- dataIndex: 'avgResponseTime',
- key: 'avgResponseTime',
-}];
-
-const applicationThroughputColumns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
-}, {
- title: 'Tps',
- dataIndex: 'tps',
- key: 'tps',
-}];
-
const middleColResponsiveProps = {
xs: 24,
sm: 24,
@@ -119,34 +99,18 @@ export default class Application extends PureComponent {
<Card
title="Slow Service"
bordered={false}
- bodyStyle={{ padding: 0 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- <Table
- size="small"
- columns={tableColumns}
- dataSource={data.getSlowService}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ <Ranking data={data.getSlowService} title="name" content="avgResponseTime" unit="ms" />
</Card>
</Col>
<Col {...middleColResponsiveProps}>
<Card
title="Servers Throughput"
bordered={false}
- bodyStyle={{ padding: 0 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- <Table
- size="small"
- columns={applicationThroughputColumns}
- dataSource={data.getServerThroughput}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 10,
- }}
- />
+ <Ranking data={data.getServerThroughput} title="name" content="tps" unit="t/s" />
</Card>
</Col>
</Row>
diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js b/src/main/frontend/src/routes/Dashboard/Dashboard.js
index cd4aae9..c27079d 100644
--- a/src/main/frontend/src/routes/Dashboard/Dashboard.js
+++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js
@@ -1,11 +1,11 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Card, List, Avatar } from 'antd';
+import { Row, Col, Card } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { timeRange } from '../../utils/utils';
-import { Panel } from '../../components/Page';
+import { Panel, Ranking } from '../../components/Page';
@connect(state => ({
dashboard: state.dashboard,
@@ -19,28 +19,6 @@ export default class Dashboard extends PureComponent {
payload: { variables },
});
}
- renderList = (data, title, content, unit) => {
- let index = 0;
- return (<List
- size="small"
- itemLayout="horizontal"
- dataSource={data}
- renderItem={item => (
- <List.Item>
- <List.Item.Meta
- avatar={
- <Avatar
- style={{ color: '#ff3333', backgroundColor: '#ffb84d' }}
- >
- {(() => { index += 1; return index; })()}
- </Avatar>}
- title={item[title]}
- description={`${item[content]} ${unit}`}
- />
- </List.Item>
- )}
- />);
- }
render() {
const { data } = this.props.dashboard;
const visitData = [];
@@ -138,18 +116,18 @@ export default class Dashboard extends PureComponent {
<Card
title="Slow Service"
bordered={false}
- bodyStyle={{ padding: 10 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- {this.renderList(data.getTopNSlowService, 'name', 'avgResponseTime', 'ms')}
+ <Ranking data={data.getTopNSlowService} title="name" content="avgResponseTime" unit="ms" />
</Card>
</Col>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<Card
title="Application Throughput"
bordered={false}
- bodyStyle={{ padding: 10 }}
+ bodyStyle={{ padding: '0px 10px' }}
>
- {this.renderList(data.getTopNApplicationThroughput, 'applicationCode', 'tps', 't/s')}
+ <Ranking data={data.getTopNApplicationThroughput} title="applicationCode" content="tps" unit="t/s" />
</Card>
</Col>
</Row>
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.