Tag Value Span Does Not Scroll Horizontally #58

frankgreco · 2017-08-18T15:13:15Z

Description

Tag value text does not horizontally scroll

Steps to reproduce the issue:
report a span with a really log tag value

Describe the results you received:
expected span to scroll horizontally

Describe the results you expected:
expected span to scroll horizontally

Additional information you deem important (e.g. issue happens only occasionally):

Additional environment details (Browser, etc.):
chrome

frankgreco · 2017-08-18T15:22:07Z

I believe this is the relevant code

        {!open &&
          <span>
            {data.map(row =>
              <span className="px1">
                <span style={{ color: 'gray' }}>
                  {row.key}=
                </span>
                {row.value.toString()}
              </span>
            )}
          </span>}

tiffon · 2017-08-21T03:11:37Z

@frankgreco Thanks for reporting this. There is an open PR which should take care of it.

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

ringerc · 2018-02-09T04:11:52Z

Confirmed fixed by latest UI release

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 <vvvprabhakar@gmail.com>

tiffon mentioned this issue Aug 21, 2017

Refactor trace detail #53

Merged

9 tasks

tiffon added the bug label Aug 21, 2017

tiffon closed this as completed in #53 Aug 23, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tag Value Span Does Not Scroll Horizontally #58

Tag Value Span Does Not Scroll Horizontally #58

frankgreco commented Aug 18, 2017

frankgreco commented Aug 18, 2017

tiffon commented Aug 21, 2017

ringerc commented Feb 9, 2018

Tag Value Span Does Not Scroll Horizontally #58

Tag Value Span Does Not Scroll Horizontally #58

Comments

frankgreco commented Aug 18, 2017

frankgreco commented Aug 18, 2017

tiffon commented Aug 21, 2017

ringerc commented Feb 9, 2018