IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix cryptic css in Traceview component (#33780)

Browse Source 
* Fix css interpolation error

* Fix console errors in tests
This commit is contained in:
Zoltán Bedi 2021-05-11 13:19:44 +02:00 committed by GitHub
parent 74b96fb30b
commit 7972abc4c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 89 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js
View File

@ -19,7 +19,10 @@ import SpanBarRow from './SpanBarRow';
import SpanTreeOffset from './SpanTreeOffset'; import SpanTreeOffset from './SpanTreeOffset';
import ReferencesButton from './ReferencesButton'; import ReferencesButton from './ReferencesButton';
jest.mock('./SpanTreeOffset'); jest.mock('./SpanTreeOffset', () => {
// eslint-disable-next-line react/display-name
return () => <span>SpanTreeOffset</span>;
});
describe('<SpanBarRow>', () => { describe('<SpanBarRow>', () => {
const spanID = 'some-id'; const spanID = 'some-id';
@ -59,7 +62,6 @@ describe('<SpanBarRow>', () => {
beforeEach(() => { beforeEach(() => {
props.onDetailToggled.mockReset(); props.onDetailToggled.mockReset();
props.onChildrenToggled.mockReset(); props.onChildrenToggled.mockReset();
SpanTreeOffset.mockReturnValue(() => {});
wrapper = mount(<SpanBarRow {...props} />); wrapper = mount(<SpanBarRow {...props} />);
}); });

124
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
View File

@ -31,14 +31,16 @@ import { TNil } from '../types';
import { TraceSpan } from '../types/trace'; import { TraceSpan } from '../types/trace';
import { autoColor, createStyle, Theme, withTheme } from '../Theme'; 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 getStyles = createStyle((theme: Theme) => {
const spanBar = css` return {
label: spanBar; nameWrapper: css`
`;
const spanBarLabel = css`
label: spanBarLabel;
`;
const nameWrapper = css`
label: nameWrapper; label: nameWrapper;
background: ${autoColor(theme, '#f8f8f8')}; background: ${autoColor(theme, '#f8f8f8')};
line-height: 27px; line-height: 27px;
@ -50,36 +52,12 @@ const getStyles = createStyle((theme: Theme) => {
min-width: calc(100% + 1px); min-width: calc(100% + 1px);
overflow: visible; overflow: visible;
} }
`; `,
nameWrapperMatchingFilter: css`
const nameWrapperMatchingFilter = css`
label: nameWrapperMatchingFilter; label: nameWrapperMatchingFilter;
background-color: ${autoColor(theme, '#fffce4')}; background-color: ${autoColor(theme, '#fffce4')};
`; `,
nameColumn: css`
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; label: nameColumn;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
@ -87,27 +65,34 @@ const getStyles = createStyle((theme: Theme) => {
&:hover { &:hover {
z-index: 1; z-index: 1;
} }
`; `,
endpointName: css`
return { label: endpointName;
spanBar, color: ${autoColor(theme, '#808080')};
spanBarLabel, `,
nameWrapper, view: css`
nameWrapperMatchingFilter, label: view;
nameColumn, position: relative;
endpointName, `,
view, viewExpanded: css`
viewExpanded, label: viewExpanded;
viewExpandedAndMatchingFilter, 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` row: css`
label: row; label: row;
&:hover .${spanBar} { &:hover .${spanBarClassName} {
opacity: 1; opacity: 1;
} }
&:hover .${spanBarLabel} { &:hover .${spanBarLabelClassName} {
color: ${autoColor(theme, '#000')}; color: ${autoColor(theme, '#000')};
} }
&:hover .${nameWrapper} { &:hover .${nameWrapperClassName} {
background: #f8f8f8; background: #f8f8f8;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@ -116,14 +101,14 @@ const getStyles = createStyle((theme: Theme) => {
${autoColor(theme, '#eee')} ${autoColor(theme, '#eee')}
); );
} }
&:hover .${view} { &:hover .${viewClassName} {
background-color: ${autoColor(theme, '#f5f5f5')}; background-color: ${autoColor(theme, '#f5f5f5')};
outline: 1px solid ${autoColor(theme, '#ddd')}; outline: 1px solid ${autoColor(theme, '#ddd')};
} }
`, `,
rowClippingLeft: css` rowClippingLeft: css`
label: rowClippingLeft; label: rowClippingLeft;
& .${nameColumn}::before { & .${nameColumnClassName}::before {
content: ' '; content: ' ';
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -139,7 +124,7 @@ const getStyles = createStyle((theme: Theme) => {
`, `,
rowClippingRight: css` rowClippingRight: css`
label: rowClippingRight; label: rowClippingRight;
& .${view}::before { & .${viewClassName}::before {
content: ' '; content: ' ';
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -155,27 +140,27 @@ const getStyles = createStyle((theme: Theme) => {
`, `,
rowExpanded: css` rowExpanded: css`
label: rowExpanded; label: rowExpanded;
& .${spanBar} { & .${spanBarClassName} {
opacity: 1; opacity: 1;
} }
& .${spanBarLabel} { & .${spanBarLabelClassName} {
color: ${autoColor(theme, '#000')}; color: ${autoColor(theme, '#000')};
} }
& .${nameWrapper}, &:hover .${nameWrapper} { & .${nameWrapperClassName}, &:hover .${nameWrapperClassName} {
background: ${autoColor(theme, '#f0f0f0')}; background: ${autoColor(theme, '#f0f0f0')};
box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')}; box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')};
} }
& .${nameWrapperMatchingFilter} { & .${nameWrapperMatchingFilterClassName} {
background: ${autoColor(theme, '#fff3d7')}; background: ${autoColor(theme, '#fff3d7')};
} }
&:hover .${view} { &:hover .${viewClassName} {
background: ${autoColor(theme, '#eee')}; background: ${autoColor(theme, '#eee')};
} }
`, `,
rowMatchingFilter: css` rowMatchingFilter: css`
label: rowMatchingFilter; label: rowMatchingFilter;
background-color: ${autoColor(theme, '#fffce4')}; background-color: ${autoColor(theme, '#fffce4')};
&:hover .${nameWrapper} { &:hover .${nameWrapperClassName} {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
${autoColor(theme, '#fff5e1')}, ${autoColor(theme, '#fff5e1')},
@ -183,7 +168,7 @@ const getStyles = createStyle((theme: Theme) => {
${autoColor(theme, '#ffe6c9')} ${autoColor(theme, '#ffe6c9')}
); );
} }
&:hover .${view} { &:hover .${viewClassName} {
background-color: ${autoColor(theme, '#fff3d7')}; background-color: ${autoColor(theme, '#fff3d7')};
outline: 1px solid ${autoColor(theme, '#ddd')}; outline: 1px solid ${autoColor(theme, '#ddd')};
} }
@ -191,7 +176,7 @@ const getStyles = createStyle((theme: Theme) => {
rowExpandedAndMatchingFilter: css` rowExpandedAndMatchingFilter: css`
label: rowExpandedAndMatchingFilter; label: rowExpandedAndMatchingFilter;
&:hover .${view} { &:hover .${viewClassName} {
background: ${autoColor(theme, '#ffeccf')}; background: ${autoColor(theme, '#ffeccf')};
} }
`, `,
@ -230,7 +215,7 @@ const getStyles = createStyle((theme: Theme) => {
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
&:hover > .${endpointName} { &:hover > small {
color: ${autoColor(theme, '#000')}; color: ${autoColor(theme, '#000')};
} }
`, `,
@ -398,8 +383,13 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
className className
)} )}
> >
<TimelineRow.Cell className={styles.nameColumn} width={columnDivision}> <TimelineRow.Cell className={cx(styles.nameColumn, nameColumnClassName)} width={columnDivision}>
<div className={cx(styles.nameWrapper, { [styles.nameWrapperMatchingFilter]: isMatchingFilter })}> <div
className={cx(styles.nameWrapper, nameWrapperClassName, {
[styles.nameWrapperMatchingFilter]: isMatchingFilter,
nameWrapperMatchingFilter: isMatchingFilter,
})}
>
<SpanTreeOffset <SpanTreeOffset
childrenVisible={isChildrenExpanded} childrenVisible={isChildrenExpanded}
span={span} span={span}
@ -490,7 +480,7 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
</div> </div>
</TimelineRow.Cell> </TimelineRow.Cell>
<TimelineRow.Cell <TimelineRow.Cell
className={cx(styles.view, { className={cx(styles.view, viewClassName, {
[styles.viewExpanded]: isDetailExpanded, [styles.viewExpanded]: isDetailExpanded,
[styles.viewExpandedAndMatchingFilter]: isMatchingFilter && isDetailExpanded, [styles.viewExpandedAndMatchingFilter]: isMatchingFilter && isDetailExpanded,
})} })}
@ -511,8 +501,8 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
longLabel={longLabel} longLabel={longLabel}
traceStartTime={traceStartTime} traceStartTime={traceStartTime}
span={span} span={span}
labelClassName={`${styles.spanBarLabel} ${hintClassName}`} labelClassName={`${spanBarLabelClassName} ${hintClassName}`}
className={styles.spanBar} className={spanBarClassName}
/> />
</TimelineRow.Cell> </TimelineRow.Cell>
</TimelineRow> </TimelineRow>

10
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
View File

@ -25,10 +25,9 @@ import { UIDropdown, UIIcon, UIMenu, UIMenuItem } from '../../uiElementsContext'
import { autoColor, createStyle, Theme, useTheme } from '../../Theme'; import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles'; import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';
const copyIconClassName = 'copyIcon';
export const getStyles = createStyle((theme: Theme) => { export const getStyles = createStyle((theme: Theme) => {
const copyIcon = css`
label: copyIcon;
`;
return { return {
KeyValueTable: css` KeyValueTable: css`
label: KeyValueTable; label: KeyValueTable;
@ -52,7 +51,7 @@ export const getStyles = createStyle((theme: Theme) => {
&:nth-child(2n) > td { &:nth-child(2n) > td {
background: ${autoColor(theme, '#f5f5f5')}; background: ${autoColor(theme, '#f5f5f5')};
} }
&:not(:hover) .${copyIcon} { &:not(:hover) .${copyIconClassName} {
display: none; display: none;
} }
`, `,
@ -71,7 +70,6 @@ export const getStyles = createStyle((theme: Theme) => {
vertical-align: middle; vertical-align: middle;
font-weight: bold; font-weight: bold;
`, `,
copyIcon,
}; };
}); });
@ -162,7 +160,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
<td>{valueMarkup}</td> <td>{valueMarkup}</td>
<td className={styles.copyColumn}> <td className={styles.copyColumn}>
<CopyIcon <CopyIcon
className={styles.copyIcon} className={copyIconClassName}
copyText={JSON.stringify(row, null, 2)} copyText={JSON.stringify(row, null, 2)}
tooltipTitle="Copy JSON" tooltipTitle="Copy JSON"
/> />

5
packages/jaeger-ui-components/src/url/ReferenceLink.test.js
View File

@ -55,9 +55,14 @@ describe(ReferenceLink, () => {
}); });
it('throws if ExternalLinkContext is not set', () => { it('throws if ExternalLinkContext is not set', () => {
// Prevent writing to stderr during this render.
const err = console.error;
console.error = jest.fn();
expect(() => mount(<ReferenceLink reference={externalRef} focusSpan={focusMock} />)).toThrow( expect(() => mount(<ReferenceLink reference={externalRef} focusSpan={focusMock} />)).toThrow(
'ExternalLinkContext' 'ExternalLinkContext'
); );
// Restore writing to stderr.
console.error = err;
}); });
}); });
describe('focus span', () => { describe('focus span', () => {