From 7972abc4c88f66af17917da62d9b14d3b454b13d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= Date: Tue, 11 May 2021 13:19:44 +0200 Subject: [PATCH] Fix cryptic css in Traceview component (#33780) * Fix css interpolation error * Fix console errors in tests --- .../TraceTimelineViewer/SpanBarRow.test.js | 6 +- .../src/TraceTimelineViewer/SpanBarRow.tsx | 162 ++++++++---------- .../SpanDetail/KeyValuesTable.tsx | 10 +- .../src/url/ReferenceLink.test.js | 5 + 4 files changed, 89 insertions(+), 94 deletions(-) diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js index e36db2ddc30..5cbc0735b95 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js @@ -19,7 +19,10 @@ import SpanBarRow from './SpanBarRow'; import SpanTreeOffset from './SpanTreeOffset'; import ReferencesButton from './ReferencesButton'; -jest.mock('./SpanTreeOffset'); +jest.mock('./SpanTreeOffset', () => { + // eslint-disable-next-line react/display-name + return () => SpanTreeOffset; +}); describe('', () => { const spanID = 'some-id'; @@ -59,7 +62,6 @@ describe('', () => { beforeEach(() => { props.onDetailToggled.mockReset(); props.onChildrenToggled.mockReset(); - SpanTreeOffset.mockReturnValue(() => {}); wrapper = mount(); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx index a4f39237002..320d1cc8f10 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx @@ -31,83 +31,68 @@ import { TNil } from '../types'; import { TraceSpan } from '../types/trace'; import { autoColor, createStyle, Theme, withTheme } from '../Theme'; +const spanBarClassName = 'spanBar'; +const spanBarLabelClassName = 'spanBarLabel'; +const nameWrapperClassName = 'nameWrapper'; +const nameWrapperMatchingFilterClassName = 'nameWrapperMatchingFilter'; +const viewClassName = 'jaegerView'; +const nameColumnClassName = 'nameColumn'; + const getStyles = createStyle((theme: Theme) => { - const spanBar = css` - label: spanBar; - `; - const spanBarLabel = css` - label: spanBarLabel; - `; - const nameWrapper = css` - label: nameWrapper; - background: ${autoColor(theme, '#f8f8f8')}; - line-height: 27px; - overflow: hidden; - display: flex; - &:hover { - border-right: 1px solid ${autoColor(theme, '#bbb')}; - float: left; - min-width: calc(100% + 1px); - overflow: visible; - } - `; - - const nameWrapperMatchingFilter = css` - label: nameWrapperMatchingFilter; - background-color: ${autoColor(theme, '#fffce4')}; - `; - - const endpointName = css` - label: endpointName; - color: ${autoColor(theme, '#808080')}; - `; - - const view = css` - label: view; - position: relative; - `; - - const viewExpanded = css` - label: viewExpanded; - background: ${autoColor(theme, '#f8f8f8')}; - outline: 1px solid ${autoColor(theme, '#ddd')}; - `; - - const viewExpandedAndMatchingFilter = css` - label: viewExpandedAndMatchingFilter; - background: ${autoColor(theme, '#fff3d7')}; - outline: 1px solid ${autoColor(theme, '#ddd')}; - `; - - const nameColumn = css` - label: nameColumn; - position: relative; - white-space: nowrap; - z-index: 1; - &:hover { - z-index: 1; - } - `; - return { - spanBar, - spanBarLabel, - nameWrapper, - nameWrapperMatchingFilter, - nameColumn, - endpointName, - view, - viewExpanded, - viewExpandedAndMatchingFilter, + nameWrapper: css` + label: nameWrapper; + background: ${autoColor(theme, '#f8f8f8')}; + line-height: 27px; + overflow: hidden; + display: flex; + &:hover { + border-right: 1px solid ${autoColor(theme, '#bbb')}; + float: left; + min-width: calc(100% + 1px); + overflow: visible; + } + `, + nameWrapperMatchingFilter: css` + label: nameWrapperMatchingFilter; + background-color: ${autoColor(theme, '#fffce4')}; + `, + nameColumn: css` + label: nameColumn; + position: relative; + white-space: nowrap; + z-index: 1; + &:hover { + z-index: 1; + } + `, + endpointName: css` + label: endpointName; + color: ${autoColor(theme, '#808080')}; + `, + view: css` + label: view; + position: relative; + `, + viewExpanded: css` + label: viewExpanded; + background: ${autoColor(theme, '#f8f8f8')}; + outline: 1px solid ${autoColor(theme, '#ddd')}; + `, + viewExpandedAndMatchingFilter: css` + label: viewExpandedAndMatchingFilter; + background: ${autoColor(theme, '#fff3d7')}; + outline: 1px solid ${autoColor(theme, '#ddd')}; + `, row: css` label: row; - &:hover .${spanBar} { + &:hover .${spanBarClassName} { opacity: 1; } - &:hover .${spanBarLabel} { + &:hover .${spanBarLabelClassName} { color: ${autoColor(theme, '#000')}; } - &:hover .${nameWrapper} { + &:hover .${nameWrapperClassName} { background: #f8f8f8; background: linear-gradient( 90deg, @@ -116,14 +101,14 @@ const getStyles = createStyle((theme: Theme) => { ${autoColor(theme, '#eee')} ); } - &:hover .${view} { + &:hover .${viewClassName} { background-color: ${autoColor(theme, '#f5f5f5')}; outline: 1px solid ${autoColor(theme, '#ddd')}; } `, rowClippingLeft: css` label: rowClippingLeft; - & .${nameColumn}::before { + & .${nameColumnClassName}::before { content: ' '; height: 100%; position: absolute; @@ -139,7 +124,7 @@ const getStyles = createStyle((theme: Theme) => { `, rowClippingRight: css` label: rowClippingRight; - & .${view}::before { + & .${viewClassName}::before { content: ' '; height: 100%; position: absolute; @@ -155,27 +140,27 @@ const getStyles = createStyle((theme: Theme) => { `, rowExpanded: css` label: rowExpanded; - & .${spanBar} { + & .${spanBarClassName} { opacity: 1; } - & .${spanBarLabel} { + & .${spanBarLabelClassName} { color: ${autoColor(theme, '#000')}; } - & .${nameWrapper}, &:hover .${nameWrapper} { + & .${nameWrapperClassName}, &:hover .${nameWrapperClassName} { background: ${autoColor(theme, '#f0f0f0')}; box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')}; } - & .${nameWrapperMatchingFilter} { + & .${nameWrapperMatchingFilterClassName} { background: ${autoColor(theme, '#fff3d7')}; } - &:hover .${view} { + &:hover .${viewClassName} { background: ${autoColor(theme, '#eee')}; } `, rowMatchingFilter: css` label: rowMatchingFilter; background-color: ${autoColor(theme, '#fffce4')}; - &:hover .${nameWrapper} { + &:hover .${nameWrapperClassName} { background: linear-gradient( 90deg, ${autoColor(theme, '#fff5e1')}, @@ -183,7 +168,7 @@ const getStyles = createStyle((theme: Theme) => { ${autoColor(theme, '#ffe6c9')} ); } - &:hover .${view} { + &:hover .${viewClassName} { background-color: ${autoColor(theme, '#fff3d7')}; outline: 1px solid ${autoColor(theme, '#ddd')}; } @@ -191,7 +176,7 @@ const getStyles = createStyle((theme: Theme) => { rowExpandedAndMatchingFilter: css` label: rowExpandedAndMatchingFilter; - &:hover .${view} { + &:hover .${viewClassName} { background: ${autoColor(theme, '#ffeccf')}; } `, @@ -230,7 +215,7 @@ const getStyles = createStyle((theme: Theme) => { &:focus { text-decoration: none; } - &:hover > .${endpointName} { + &:hover > small { color: ${autoColor(theme, '#000')}; } `, @@ -398,8 +383,13 @@ export class UnthemedSpanBarRow extends React.PureComponent { className )} > - -
+ +
{
{ longLabel={longLabel} traceStartTime={traceStartTime} span={span} - labelClassName={`${styles.spanBarLabel} ${hintClassName}`} - className={styles.spanBar} + labelClassName={`${spanBarLabelClassName} ${hintClassName}`} + className={spanBarClassName} /> diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index e5704e3e461..c6ad98b0bb2 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -25,10 +25,9 @@ import { UIDropdown, UIIcon, UIMenu, UIMenuItem } from '../../uiElementsContext' import { autoColor, createStyle, Theme, useTheme } from '../../Theme'; import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles'; +const copyIconClassName = 'copyIcon'; + export const getStyles = createStyle((theme: Theme) => { - const copyIcon = css` - label: copyIcon; - `; return { KeyValueTable: css` label: KeyValueTable; @@ -52,7 +51,7 @@ export const getStyles = createStyle((theme: Theme) => { &:nth-child(2n) > td { background: ${autoColor(theme, '#f5f5f5')}; } - &:not(:hover) .${copyIcon} { + &:not(:hover) .${copyIconClassName} { display: none; } `, @@ -71,7 +70,6 @@ export const getStyles = createStyle((theme: Theme) => { vertical-align: middle; font-weight: bold; `, - copyIcon, }; }); @@ -162,7 +160,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { {valueMarkup} diff --git a/packages/jaeger-ui-components/src/url/ReferenceLink.test.js b/packages/jaeger-ui-components/src/url/ReferenceLink.test.js index 20867663e5d..63522aaeb77 100644 --- a/packages/jaeger-ui-components/src/url/ReferenceLink.test.js +++ b/packages/jaeger-ui-components/src/url/ReferenceLink.test.js @@ -55,9 +55,14 @@ describe(ReferenceLink, () => { }); it('throws if ExternalLinkContext is not set', () => { + // Prevent writing to stderr during this render. + const err = console.error; + console.error = jest.fn(); expect(() => mount()).toThrow( 'ExternalLinkContext' ); + // Restore writing to stderr. + console.error = err; }); }); describe('focus span', () => {