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

extraneous scrollbars in trace views #326

Closed
Dieterbe opened this issue Aug 9, 2017 · 7 comments · Fixed by jaegertracing/jaeger-ui#53
Closed

extraneous scrollbars in trace views #326

Dieterbe opened this issue Aug 9, 2017 · 7 comments · Fixed by jaegertracing/jaeger-ui#53

Comments

@Dieterbe
Copy link
Contributor

Dieterbe commented Aug 9, 2017 •
edited
Loading

scrollbars
is there a way to get rid of these scrollbars, they are cluttering up the UI. thanks. looks like some css tweaking may be needed? this is in chromium
@yurishkuro
Copy link
Member

@tiffon please follow up

@yurishkuro
Copy link
Member

@saminzadeh we used to have this issue in the past, not sure why it resurfaced

@Dieterbe can you provide a sample trace JSON that causes this?

@Dieterbe
Copy link
Contributor Author

Dieterbe commented Aug 9, 2017

It looks like i have this all the time, irrespective of the trace.
so here's a minimal trace that also had the problem:

{"data":[{"traceID":"33a38a88a0833d79","spans":[{"traceID":"33a38a88a0833d79","spanID":"33a38a88a0833d79","flags":1,"operationName":"HTTP GET metrics_find","references":[],"startTime":1502314456123507,"duration":111,"tags":[{"key":"sampler.type","type":"string","value":"const"},{"key":"sampler.param","type":"bool","value":true},{"key":"span.kind","type":"string","value":"server"},{"key":"http.method","type":"string","value":"GET"},{"key":"http.url","type":"string","value":"/metrics/find?target=some.id.of.a.metric.1\u0026from=-10s"},{"key":"component","type":"string","value":"metrictank/api"},{"key":"http.status_code","type":"int64","value":422}],"logs":[],"processID":"p1","warnings":null}],"processes":{"p1":{"serviceName":"metrictank","tags":[{"key":"hostname","type":"string","value":"metrictank0"},{"key":"ip","type":"string","value":"172.21.0.9"},{"key":"jaeger.version","type":"string","value":"Go-2.9.1dev"}]}},"warnings":null}],"total":0,"limit":0,"offset":0,"errors":null}

btw if i remove the "overflow-scroll" class from the div elements, the scrollbar disappears.

@tiffon
Copy link
Member

tiffon commented Aug 10, 2017 via email •
edited
Loading

@Dieterbe
Copy link
Contributor Author

is there a PR I can follow?

@tiffon tiffon mentioned this issue Aug 11, 2017
Merged
9 tasks
tiffon referenced this issue in jaegertracing/jaeger-ui Aug 23, 2017
@tiffon
Refactor trace detail (#53)
69d84b9 
Top level tasks

- Maintenance of tests
- Cleanup unused vars, imports
- Refine utils
- Many styles will be moved to CSS

SpanGraph

- Fix #49 - Span position in graph doesn't not match its position in the
  detail
- Ticks in span graph made to match trace detail (in number and
  formatting)
- Span graph refactored to trim down files and DOM elements
- Styling adjustments

TracePageHeader

- `trace` prop removed
- Added props for various title values instead of deriving them from
  `trace`

Trace Detail

- Several components split out into separate files
- `transformTrace` to use already created span tree to determine span
  depth
- Fix #59 - "Span Name" to "Service & Operation"

Span Bar / Detail

- Fix uber/jaeger#326: extraneous scrollbars in trace views
- Fix #55: Some tags were not being rendered due to clashing keys
  (observed in a log message)
- Tall content scrolls via entire table instead of single table cell
- Horizontal scrolling for wide content (e.g. long log values) (Fix #58)
- Full width of the header is clickable for tags, process, and logs
  headers (instead of header text, only)
- Service and endpoint are shown on mouseover anywhere in span bar row
- Label on span bars no longer off-screen
- Clip or hide span bars when zoomed in (instead of flush left)
- Add shadow to left / right boundary when span bar view is clipped
- Darkened span name column to differentiate from span bar section
- Span detail left column color coded by service
- Clicking span detail left column collapses detail
- Clicking anywhere left of parent span name toggles children visibility
- Prevent collision of logs in log entries table

SearchTracePage

- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

Misc

- Several TraceTimelineViewer / utils removed
- `TreeNode` `.walk()` method can now be used to calculate the depth,
  avoiding use of less efficient `.getPath()`
- Removed several `console.error` warnings caused by React key issues
- `yarn upgrade --latest`
- Removed `react-sticky`
- Fix #42 - Support URL prefix via homepage in package.json


Commits

* Update prettier and wrap at 110 instead of 80

* WIP commit for refactoring trace detail view

* WIP refactor trace detail, split out css, start fixing tests

* WIP refactor trace detail, tests working again

* WIP refactor trace, yarn upgrade

Sub-page scrolling used for trace detail (TODO: revert this). This lays
the ground work for using react-virtualized, but unfortunately has major
perf issues, hence the TODO: revert.

yarn upgrade --latest. Notable changes:

- Removed react-sticky
- react-router v4
- react-vis CSS needed to be included via a sym-link

Misc tweaks:

- Styling adjusted on trace mini-map
- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

* WIP refactor trace, test maintenance

* remove unused import

* add license to css files

* Revert sub-page scrolling for trace detail

* Support URL prefix via homepage in package.json

* Prevent collision of logs in log entries table

* Add comments to new utils

* Fix #59 - "Span Name" to "Service & Operation"

* Fix unreleased regression - ellipsis on span name

Add back the styling that adds an ellipsis to truncated span name text.

* Address PR comment on search results scatter plot

https://github.com/uber/jaeger-ui/pull/53#discussion_r134313013

* Misc cleanup from PR comment

https://github.com/uber/jaeger-ui/pull/53#discussion_r134314020

* PR comment - Remove ms and use nano seconds

https://github.com/uber/jaeger-ui/pull/53#discussion_r134316418

* PR comment - Adjust export, relates to recompose

https://github.com/uber/jaeger-ui/pull/53#discussion_r134318188

* PR comment - Comment getTraceSpanIdsAsTree()

https://github.com/uber/jaeger-ui/pull/53#discussion_r134321990
@Dieterbe
Copy link
Contributor Author

will this make its way into the docker image? i'm using the below one, and still seeing this issue

~ ❯❯❯ docker pull jaegertracing/all-in-one:latest
latest: Pulling from jaegertracing/all-in-one
Digest: sha256:1d8744d5f567cf1118f1fa721f0982cef829b3981cc769e358d0bcc21a22cd5f
Status: Image is up to date for jaegertracing/all-in-one:latest
~ ❯❯❯

thanks!

@yurishkuro
Copy link
Member

we want to test it internally first, then it will be released in the official Docker image

vvvprabhakar referenced this issue in vvvprabhakar/jaeger-ui Jul 5, 2021
@tiffon
Refactor trace detail (#53)
8e50535 
Top level tasks

- Maintenance of tests
- Cleanup unused vars, imports
- Refine utils
- Many styles will be moved to CSS

SpanGraph

- Fix #49 - Span position in graph doesn't not match its position in the
  detail
- Ticks in span graph made to match trace detail (in number and
  formatting)
- Span graph refactored to trim down files and DOM elements
- Styling adjustments

TracePageHeader

- `trace` prop removed
- Added props for various title values instead of deriving them from
  `trace`

Trace Detail

- Several components split out into separate files
- `transformTrace` to use already created span tree to determine span
  depth
- Fix jaegertracing#59 - "Span Name" to "Service & Operation"

Span Bar / Detail

- Fix uber/jaeger#326: extraneous scrollbars in trace views
- Fix #55: Some tags were not being rendered due to clashing keys
  (observed in a log message)
- Tall content scrolls via entire table instead of single table cell
- Horizontal scrolling for wide content (e.g. long log values) (Fix jaegertracing#58)
- Full width of the header is clickable for tags, process, and logs
  headers (instead of header text, only)
- Service and endpoint are shown on mouseover anywhere in span bar row
- Label on span bars no longer off-screen
- Clip or hide span bars when zoomed in (instead of flush left)
- Add shadow to left / right boundary when span bar view is clipped
- Darkened span name column to differentiate from span bar section
- Span detail left column color coded by service
- Clicking span detail left column collapses detail
- Clicking anywhere left of parent span name toggles children visibility
- Prevent collision of logs in log entries table

SearchTracePage

- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

Misc

- Several TraceTimelineViewer / utils removed
- `TreeNode` `.walk()` method can now be used to calculate the depth,
  avoiding use of less efficient `.getPath()`
- Removed several `console.error` warnings caused by React key issues
- `yarn upgrade --latest`
- Removed `react-sticky`
- Fix #42 - Support URL prefix via homepage in package.json


Commits

* Update prettier and wrap at 110 instead of 80

* WIP commit for refactoring trace detail view

* WIP refactor trace detail, split out css, start fixing tests

* WIP refactor trace detail, tests working again

* WIP refactor trace, yarn upgrade

Sub-page scrolling used for trace detail (TODO: revert this). This lays
the ground work for using react-virtualized, but unfortunately has major
perf issues, hence the TODO: revert.

yarn upgrade --latest. Notable changes:

- Removed react-sticky
- react-router v4
- react-vis CSS needed to be included via a sym-link

Misc tweaks:

- Styling adjusted on trace mini-map
- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

* WIP refactor trace, test maintenance

* remove unused import

* add license to css files

* Revert sub-page scrolling for trace detail

* Support URL prefix via homepage in package.json

* Prevent collision of logs in log entries table

* Add comments to new utils

* Fix jaegertracing#59 - "Span Name" to "Service & Operation"

* Fix unreleased regression - ellipsis on span name

Add back the styling that adds an ellipsis to truncated span name text.

* Address PR comment on search results scatter plot

https://github.com/uber/jaeger-ui/pull/53#discussion_r134313013

* Misc cleanup from PR comment

https://github.com/uber/jaeger-ui/pull/53#discussion_r134314020

* PR comment - Remove ms and use nano seconds

https://github.com/uber/jaeger-ui/pull/53#discussion_r134316418

* PR comment - Adjust export, relates to recompose

https://github.com/uber/jaeger-ui/pull/53#discussion_r134318188

* PR comment - Comment getTraceSpanIdsAsTree()

https://github.com/uber/jaeger-ui/pull/53#discussion_r134321990

Signed-off-by: vvvprabhakar <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Refactor trace detail jaegertracing/jaeger-ui
3 participants
@Dieterbe @tiffon @yurishkuro