Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add indent guides to trace timeline view (#172) #297

Merged
merged 7 commits into from
Jan 4, 2019
Merged

Add indent guides to trace timeline view (#172) #297

merged 7 commits into from
Jan 4, 2019

Conversation

everett980
Copy link
Collaborator

@everett980 everett980 commented Dec 18, 2018 •
edited
Loading

Which problem is this PR solving?

  • Hard to tell which spans are descendants of other spans.

Short description of the changes

  • Adds indentGuides to each row that indicate which spans are ancestors of the current row.

Examples

(not sure why gifs have odd background patterns, it looks fine in the browser and as captured before converted to gif)

Mousing over an indent guide thickens the indicator line:

172 indent guides 1

Mousing over the collapse icon indicates all rows that will be hidden by collapsing the row:

172 indent guides 2

When viewing row details, the indent guides are present as expected:

image

@everett980
Add indent guides to trace timeline view (jaegertracing#172)
369bb60 
Signed-off-by: Everett Ross <reverett@uber.com>
@ghost ghost assigned everett980 Dec 18, 2018
@ghost ghost added the review label Dec 18, 2018
@codecov
Copy link

codecov bot commented Dec 18, 2018 •
edited
Loading

Codecov Report

Merging #297 into master will increase coverage by 0.25%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #297      +/-   ##
==========================================
+ Coverage   82.33%   82.58%   +0.25%     
==========================================
  Files         141      141              
  Lines        3119     3153      +34     
  Branches      651      654       +3     
==========================================
+ Hits         2568     2604      +36     
+ Misses        437      435       -2     
  Partials      114      114
Impacted Files Coverage Δ
...nts/TracePage/TraceTimelineViewer/SpanDetailRow.js 100% <ø> (ø) ⬆️
...cePage/TraceTimelineViewer/VirtualizedTraceView.js 93.45% <ø> (ø) ⬆️
packages/jaeger-ui/src/types/trace-timeline.js 0% <ø> (ø) ⬆️
...ts/TracePage/TraceTimelineViewer/SpanTreeOffset.js 100% <100%> (ø) ⬆️
...onents/TracePage/TraceTimelineViewer/SpanBarRow.js 83.33% <100%> (+3.33%) ⬆️
...c/components/TracePage/TraceTimelineViewer/duck.js 100% <100%> (ø) ⬆️
...neViewer/TimelineHeaderRow/TimelineViewingLayer.js 90.74% <0%> (+3.7%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ac4f7a7...6c98b11. Read the comment docs.

@everett980
Add tests for connect functions, add more flow types
f316315 
Signed-off-by: Everett Ross <reverett@uber.com>
tiffon
tiffon suggested changes Dec 19, 2018
View reviewed changes
Copy link
Member

@tiffon tiffon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! 👍 LMK if you want to discuss any of these suggestions.

packages/jaeger-ui/src/types/hover-span-ids.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffsetDuck.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffsetDuck.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css Show resolved Hide resolved
tiffon
tiffon suggested changes Dec 19, 2018
View reviewed changes
Copy link
Member

@tiffon tiffon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests look great!

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.test.js Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js
},
],
};
wrapper = shallow(<UnconnectedSpanTreeOffset {...props} />);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to do .setProps(...) ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the indent guides are calculated in the constructor so it needs to be a new wrapper if different indent guides are supposed to be rendered.

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js

import { mapDispatchToProps, mapStateToProps, UnconnectedSpanTreeOffset } from './SpanTreeOffset';

describe('SpanTreeOffset', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests look great 👍

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffsetDuck.test.js Outdated
let store;

beforeEach(() => {
store = createStore(reducer, newInitialState());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would think you can test the actions without a store, or is uising a store preference?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I based this off of pre-existing ducks. now that it has been merged into TraceTimelineViewer/duck I adhered to the pattern present in that file.

In the past I have tested actions and reducers without createStore

@everett980
Consolidate ducks, remove redudant PropTypes, add event type
b3a50e8 
Signed-off-by: Everett Ross <reverett@uber.com>
@everett980
Rename hoverSpanId to hoverIndentGuideId
3b8a998 
Signed-off-by: Everett Ross <reverett@uber.com>
tiffon
tiffon suggested changes Dec 28, 2018
View reviewed changes
Copy link
Member

@tiffon tiffon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few more comments. LMK what you think.

packages/jaeger-ui/src/types/hover-span-ids.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/types/index.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated

import './SpanTreeOffset.css';

type SpanTreeOffsetProps = {
level: number,
type SpanTreeOffsetOwnPropsType = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of shortening the name of types that aren't exported? For instance:

  • OwnPropsType
    • Instead of SpanTreeOffsetOwnPropsType
  • PropsType
    • Instead of SpanTreeOffsetPropsType

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was following the pattern I saw in other files, such as SpanBarRow or VirtualizedTraceView
I'm not too particular about either, but I do generally like long-ish variable names for clarity.

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.js Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.js Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js Outdated Show resolved Hide resolved
tiffon
tiffon approved these changes Jan 4, 2019
View reviewed changes
Copy link
Member

@tiffon tiffon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@tiffon tiffon merged commit f23eb48 into jaegertracing:master Jan 4, 2019
@ghost ghost removed the review label Jan 4, 2019
everett980 added a commit to everett980/jaeger-ui that referenced this pull request Jan 16, 2019
@everett980
Add indent guides to trace timeline view (jaegertracing#172) (jaegert…
bf70c14 
…racing#297)

* Add indent guides to trace timeline view (jaegertracing#172)

Signed-off-by: Everett Ross <reverett@uber.com>

* Add tests for connect functions, add more flow types

Signed-off-by: Everett Ross <reverett@uber.com>

* Consolidate ducks, remove redudant PropTypes, add event type

Signed-off-by: Everett Ross <reverett@uber.com>

* Rename hoverSpanId to hoverIndentGuideId

Signed-off-by: Everett Ross <reverett@uber.com>

* Derive props from span, use dataset over getAttribute

Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
@ledor473 ledor473 mentioned this pull request Feb 21, 2019
Closed
@tiffon tiffon mentioned this pull request Mar 7, 2019
Closed
vvvprabhakar pushed a commit to vvvprabhakar/jaeger-ui that referenced this pull request Jul 5, 2021
@everett980 @tiffon
Add indent guides to trace timeline view (jaegertracing#172) (jaegert…
be70c0d 
…racing#297)

* Add indent guides to trace timeline view (jaegertracing#172)

Signed-off-by: Everett Ross <reverett@uber.com>

* Add tests for connect functions, add more flow types

Signed-off-by: Everett Ross <reverett@uber.com>

* Consolidate ducks, remove redudant PropTypes, add event type

Signed-off-by: Everett Ross <reverett@uber.com>

* Rename hoverSpanId to hoverIndentGuideId

Signed-off-by: Everett Ross <reverett@uber.com>

* Derive props from span, use dataset over getAttribute

Signed-off-by: Everett Ross <reverett@uber.com>

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar pushed a commit to vvvprabhakar/jaeger-ui that referenced this pull request Jul 5, 2021
@everett980
Add indent guides to trace timeline view (jaegertracing#172) (jaegert…
3608969 
…racing#297)

* Add indent guides to trace timeline view (jaegertracing#172)

Signed-off-by: Everett Ross <reverett@uber.com>

* Add tests for connect functions, add more flow types

Signed-off-by: Everett Ross <reverett@uber.com>

* Consolidate ducks, remove redudant PropTypes, add event type

Signed-off-by: Everett Ross <reverett@uber.com>

* Rename hoverSpanId to hoverIndentGuideId

Signed-off-by: Everett Ross <reverett@uber.com>

* Derive props from span, use dataset over getAttribute

Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tiffon tiffon tiffon approved these changes

Assignees

@everett980 everett980

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@everett980 @tiffon