Skip to content
This repository has been archived by the owner on Oct 29, 2019. It is now read-only.

Feature: update spans display #215

Merged
merged 2 commits into from
Dec 27, 2018
Merged

Feature: update spans display #215

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c9d416
Feature: update spans display
TinyAllen Dec 26, 2018
15a9c64
Feature: update span durations & types durations.
TinyAllen Dec 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Feature: update span durations & types durations.
  • Loading branch information
@TinyAllen
TinyAllen committed Dec 27, 2018
commit 15a9c64c046b96ef66a9e5ced48ab5b793f9b2a0
2 changes: 1 addition & 1 deletion .webpackrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const config = {

if (process.env.NO_MOCK) {
config.proxy['/api'] = {
target: 'http://localhost:12800',
target: 'http://106.75.237.45:12800',
changeOrigin: true,
pathRewrite: path => {
console.log(path);
Expand Down
76 changes: 71 additions & 5 deletions src/components/TraceTree/d3-trace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,11 @@ export default class TraceMap {
.attr('height', this.height);
this.tip = d3tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.offset([10, 0])
.html(d => d.data.label);
this.timeTip = d3tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.offset([-8, 0])
.html(d => d.data.label);
this.body.call(this.timeTip);
this.body.call(this.tip);
Expand Down Expand Up @@ -151,7 +151,44 @@ export default class TraceMap {
);
d3.event.stopPropagation();
});

const nodeSelfDur = nodeEnter
.append('g')
.style('opacity', 0)
.attr('class','trace-tree-node-selfdur')
.attr('transform', 'translate(0,-39)')
nodeSelfDur
.append('rect')
.attr('width', 65)
.attr('height', 16)
.attr('rx', 3)
.attr('ry', 3)
.attr('fill', '#333')
nodeSelfDur
.append('text')
.attr('dx', 5)
.attr('dy', 11)
.text(d=> {
return d.data.dur + ' ms'
})
.attr('fill', '#fff');
const nodeSelfChild = nodeEnter
.append('g')
.style('opacity', 0)
.attr('class','trace-tree-node-selfchild')
.attr('transform', 'translate(0,-39)')
nodeSelfChild
.append('rect')
.attr('width', 110)
.attr('height', 16)
.attr('rx', 3)
.attr('ry', 3)
.attr('fill', '#333')
nodeSelfChild
.append('text')
.attr('dx', 5)
.attr('dy', 11)
.text(d=> `children: ${d.data.childrenLength}`)
.attr('fill', '#fff')
nodeEnter
.append('rect')
.attr('class', 'block')
Expand Down Expand Up @@ -342,6 +379,23 @@ export default class TraceMap {
)
.attr('y', -3)
.style('fill', d => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);
timeEnter
.append('rect')
.style('opacity',0)
.attr('class', 'time-inner-duration')
.attr('height', 8)
.attr('width', d => {
if (!d.data.dur) return 1;
return this.xScale(d.data.dur) + 1;
})
.attr('rx', 2)
.attr('ry', 2)
.attr(
'x',
d => (!d.data.endTime || !d.data.startTime ? 0 : this.xScale(d.data.startTime - this.min))
)
.attr('y', -3)
.style('fill', d => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);

this.timeUpdate = timeEnter.merge(timeNode);
this.timeUpdate
Expand All @@ -357,22 +411,34 @@ export default class TraceMap {
.remove();
}
setDefault() {
d3.selectAll('.time-inner').style('opacity', 1);
d3.selectAll('.time-inner-duration').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 0);
this.nodeUpdate._groups[0].forEach(i => {
d3.select(i).style('opacity', 1);
})
}
topChild() {
d3.selectAll('.time-inner').style('opacity', 1);
d3.selectAll('.time-inner-duration').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 1);
this.nodeUpdate._groups[0].forEach(i => {
d3.select(i).style('opacity', .2);
if(i.__data__.data.childrenLength >= this.cmin || i.__data__.data.childrenLength <= this.cmax){
if(i.__data__.data.childrenLength >= this.cmin && i.__data__.data.childrenLength <= this.cmax){
d3.select(i).style('opacity', 1);
}
})
}
topSlow() {
d3.selectAll('.time-inner').style('opacity', 0);
d3.selectAll('.time-inner-duration').style('opacity', 1);
d3.selectAll('.trace-tree-node-selfchild').style('opacity', 0);
d3.selectAll('.trace-tree-node-selfdur').style('opacity', 1);
this.nodeUpdate._groups[0].forEach(i => {
d3.select(i).style('opacity', .2);
if(i.__data__.data.dur >= this.smin || i.__data__.data.dur <= this.smax){
if(i.__data__.data.dur >= this.smin && i.__data__.data.dur <= this.smax){
d3.select(i).style('opacity', 1);
}
})
Expand Down
65 changes: 53 additions & 12 deletions src/components/TraceTree/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,18 @@ const ButtonGroup = Button.Group;
export default class Trace extends Component {
constructor(props) {
super(props);
this.state = {}
this.cache = 0;
this.db = 0;
this.http = 0;
this.mq = 0;
this.rpc = 0;
this.state = {
cache: 0,
db: 0,
http: 0,
mq: 0,
rpc: 0,
};
}

componentDidMount() {
Expand Down Expand Up @@ -99,23 +110,46 @@ export default class Trace extends Component {
}
this.topSlow = [];
this.topChild = [];
this.segmentId.forEach((_, i) => {
this.collapse(this.segmentId[i]);
})
this.topSlowMax = this.topSlow.sort((a,b) => b - a)[0];
this.topSlowMin = this.topSlow.sort((a,b) => b - a)[4];

this.collapse(this.segmentId[0]);
this.topSlowMax = this.topSlow.sort().reverse()[0];
this.topSlowMin = this.topSlow.sort().reverse()[4];

this.topChildMax = this.topChild.sort().reverse()[0];
this.topChildMin = this.topChild.sort().reverse()[4];
this.topChildMax = this.topChild.sort((a,b) => b - a)[0];
this.topChildMin = this.topChild.sort((a,b) => b - a)[4];
this.tree = new Tree(this.echartsElement, propsData.showSpanModal, this.topSlowMax,this.topSlowMin,this.topChildMax,this.topChildMin)
this.tree.init({label:`${this.traceId}`, children: this.segmentId}, rowData);
this.tree.draw();
this.resize = this.tree.resize.bind(this.tree);
}
collapse(d) {
if(d.children){
const dur = d.endTime - d.startTime;
d.children.forEach(i => dur - i.endTime + i.startTime)
d.dur = dur;
let dur = d.endTime - d.startTime;
d.children.forEach(i => {
dur -= (i.endTime - i.startTime);
})
if(d.layer === "Http"){
this.http += dur
this.setState({http: this.http});
}
if(d.layer === "RPCFramework"){
this.rpc += dur
this.setState({rpc: this.rpc});
}
if(d.layer === "Database"){
this.db += dur
this.setState({db: this.db});
}
if(d.layer === "Cache"){
this.cache += dur
this.setState({cache: this.cache});
}
if(d.layer === "MQ"){
this.mq += dur
this.setState({mq: this.mq});
}
d.dur = dur < 0 ? 0 : dur;
this.topSlow.push(dur);
this.topChild.push(d.children.length);
d.childrenLength = d.children.length
Expand All @@ -132,9 +166,16 @@ export default class Trace extends Component {
<div>
<ButtonGroup>
<Button onClick={() => {this.tree.setDefault();}}>Default</Button>
<Button onClick={() => {this.tree.topSlow();}}>TopSlow 5</Button>
<Button onClick={() => {this.tree.topChild();}}>TopSpan 5</Button>
<Button onClick={() => {this.tree.topSlow();}}>Top 5 of slow span</Button>
<Button onClick={() => {this.tree.topChild();}}>Top 5 of children span number</Button>
</ButtonGroup>
<div style={{marginTop:10,marginBottom: 10}}>
{this.state.cache ? (<span class="ant-tag">Cache: {this.state.cache} ms</span>): null}
{this.state.db ? (<span class="ant-tag">DB: {this.state.db} ms</span>): null}
{this.state.mq ? (<span class="ant-tag">MQ: {this.state.mq} ms</span>): null}
{this.state.http ? (<span class="ant-tag">Http: {this.state.http} ms</span>): null}
{this.state.rpc ? (<span class="ant-tag">RPCFramework: {this.state.rpc} ms</span>): null}
</div>
<div
ref={(e) => { this.echartsElement = e; }}
style={newStyle}
Expand Down
2 changes: 1 addition & 1 deletion src/components/TraceTree/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
cursor: pointer;
}
:global(.trace-tree .time-bg) {
fill: #fff;
fill: rgba(0, 0, 0, 0);
cursor: pointer;
}
:global(.trace-tree .time:hover) {
Expand Down