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

Chore: Rewrite TraceView css using object styles (#87621)

Browse Source
This commit is contained in:
kay delaney 2024-10-08 12:39:22 +01:00 committed by GitHub
parent b90e09e966
commit 1d244ae1ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
36 changed files with 1200 additions and 1438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
.betterer.results
View File

@ -3863,13 +3863,9 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/TraceView.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Do not use any type assertions.", "3"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@ -3882,69 +3878,24 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/index.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./TracePageHeader\`)", "0"]
@ -3954,193 +3905,42 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"],
[0, 0, 0, "Styles should be written using objects.", "17"],
[0, 0, 0, "Styles should be written using objects.", "18"],
[0, 0, 0, "Styles should be written using objects.", "19"],
[0, 0, 0, "Styles should be written using objects.", "20"],
[0, 0, 0, "Styles should be written using objects.", "21"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "15"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "16"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "17"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanFlameGraph.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/index.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./TimelineHeaderRow\`)", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/TraceTimelineViewer/utils.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`../utils/date\`)", "0"]
],
"public/app/features/explore/TraceView/components/common/BreakableText.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/common/CopyIcon.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/common/LabeledList.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/common/TraceName.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/demo/trace-generators.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -4175,10 +3975,6 @@ exports[`better eslint`] = {
"public/app/features/explore/TraceView/components/model/transform-trace-data.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/explore/TraceView/components/types/index.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./trace\`)", "0"],
[0, 0, 0, "Do not re-export imported variable (\`../settings/SpanBarSettings\`)", "1"],

16
public/app/features/explore/TraceView/TraceView.tsx
View File

@ -44,14 +44,14 @@ import { useSearch } from './useSearch';
import { useViewRange } from './useViewRange';
const getStyles = (theme: GrafanaTheme2) => ({
noDataMsg: css`
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: ${theme.typography.h4.fontSize};
color: ${theme.colors.text.secondary};
`,
noDataMsg: css({
height: '100%',
width: '100%',
display: 'grid',
placeItems: 'center',
fontSize: theme.typography.h4.fontSize,
color: theme.colors.text.secondary,
}),
});
type Props = {

48
public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx
View File

@ -3,31 +3,29 @@ import { css } from '@emotion/css';
import { GrafanaTheme2, IconName } from '@grafana/data';
import { Button, useStyles2 } from '@grafana/ui';
export const getStyles = (theme: GrafanaTheme2) => {
return {
ActionButton: css`
label: ActionButton;
overflow: hidden;
position: relative;
&:after {
content: '';
background: ${theme.colors.primary.main};
display: block;
position: absolute;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.8s;
}
&:active:after {
margin: 0;
opacity: 0.3;
transition: 0s;
}
`,
};
};
export const getStyles = (theme: GrafanaTheme2) => ({
ActionButton: css({
label: 'ActionButton',
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
background: theme.colors.primary.main,
display: 'block',
position: 'absolute',
right: 0,
width: '100%',
height: '100%',
opacity: 0,
transition: 'all 0.8s',
},
'&:active:after': {
margin: 0,
opacity: 0.3,
transition: '0s',
},
}),
});
export type ActionButtonProps = {
onClick: () => void;

39
public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx
View File

@ -229,27 +229,22 @@ export const getStyles = (theme: GrafanaTheme2, showSpanFilters: boolean) => {
});
return {
buttons: css`
display: inline-flex;
gap: 4px;
`,
buttonsDisabled: css`
cursor: not-allowed;
`,
button: css`
${buttonStyles.button};
`,
buttonDisabled: css`
${buttonStyles.disabled};
pointer-events: none;
`,
matches: css`
margin-right: ${theme.spacing(2)};
text-wrap: nowrap;
`,
tooltip: css`
color: #aaa;
margin: 0 0 0 5px;
`,
buttons: css({
display: 'inline-flex',
gap: '4px',
}),
buttonsDisabled: css({
cursor: 'not-allowed',
}),
button: buttonStyles.button,
buttonDisabled: css(buttonStyles.disabled, { pointerEvents: 'none' }),
matches: css({
marginRight: theme.spacing(2),
textWrap: 'nowrap',
}),
tooltip: css({
color: '#aaa',
margin: '0 0 0 5px',
}),
};
};

50
public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
View File

@ -153,31 +153,31 @@ export const getStyles = (theme: GrafanaTheme2) => {
return {
button: css(buttonStyles.button),
buttonDisabled: css(buttonStyles.disabled, { pointerEvents: 'none', cursor: 'not-allowed' }),
container: css`
display: inline;
`,
controls: css`
display: flex;
justify-content: flex-end;
margin: 5px 0 0 0;
`,
matchesOnly: css`
display: inline-flex;
margin: 0 0 0 25px;
vertical-align: middle;
align-items: center;
`,
clearMatchesButton: css`
color: ${theme.colors.text.primary};
container: css({
display: 'inline',
}),
controls: css({
display: 'flex',
justifyContent: 'flex-end',
margin: '5px 0 0 0',
}),
matchesOnly: css({
display: 'inline-flex',
margin: '0 0 0 25px',
verticalAlign: 'middle',
alignItems: 'center',
}),
clearMatchesButton: css({
color: theme.colors.text.primary,
&:hover {
background: inherit;
}
`,
nextPrevResult: css`
margin-left: auto;
display: flex;
align-items: center;
`,
'&:hover': {
background: 'inherit',
},
}),
nextPrevResult: css({
marginLeft: 'auto',
display: 'flex',
alignItems: 'center',
}),
};
};

82
public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
View File

@ -516,46 +516,44 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
SpanFilters.displayName = 'SpanFilters';
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
label: SpanFilters;
margin: 0.5em 0 -${theme.spacing(1)} 0;
z-index: 5;
const getStyles = (theme: GrafanaTheme2) => ({
container: css({
label: 'SpanFilters',
margin: `0.5em 0 -${theme.spacing(1)} 0`,
zIndex: 5,
& > div {
border-left: none;
border-right: none;
}
`,
collapseLabel: css`
svg {
color: #aaa;
margin: -2px 0 0 10px;
}
`,
flexContainer: css({
display: 'flex',
justifyContent: 'space-between',
}),
addTag: css({
marginLeft: theme.spacing(1),
}),
intervalInput: css`
margin: 0 -4px 0 0;
`,
tagsRow: css`
margin: -4px 0 0 0;
`,
tagValues: css`
max-width: 200px;
`,
nextPrevResult: css`
flex: 1;
align-items: center;
display: flex;
justify-content: flex-end;
margin-right: ${theme.spacing(1)};
`,
};
};
'& > div': {
borderLeft: 'none',
borderRight: 'none',
},
}),
collapseLabel: css({
svg: {
color: '#aaa',
margin: '-2px 0 0 10px',
},
}),
flexContainer: css({
display: 'flex',
justifyContent: 'space-between',
}),
addTag: css({
marginLeft: theme.spacing(1),
}),
intervalInput: css({
margin: '0 -4px 0 0',
}),
tagsRow: css({
margin: '-4px 0 0 0',
}),
tagValues: css({
maxWidth: '200px',
}),
nextPrevResult: css({
flex: 1,
alignItems: 'center',
display: 'flex',
justifyContent: 'flex-end',
marginRight: theme.spacing(1),
}),
});

14
public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx
View File

@ -26,13 +26,13 @@ import renderIntoCanvas from './render-into-canvas';
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
CanvasSpanGraph: css`
label: CanvasSpanGraph;
background: ${autoColor(theme, '#fafafa')};
height: 60px;
position: absolute;
width: 100%;
`,
CanvasSpanGraph: css({
label: 'CanvasSpanGraph',
background: autoColor(theme, '#fafafa'),
height: '60px',
position: 'absolute',
width: '100%',
}),
};
});

16
public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx
View File

@ -16,15 +16,13 @@ import { css } from '@emotion/css';
import { useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
GraphTick: css`
label: GraphTick;
stroke: #aaa;
stroke-width: 1px;
`,
};
};
const getStyles = () => ({
GraphTick: css({
label: 'GraphTick',
stroke: '#aaa',
strokeWidth: '1px',
}),
});
export type GraphTicksProps = {
numTicks: number;

104
public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx
View File

@ -18,59 +18,57 @@ import * as React from 'react';
import { useStyles2 } from '@grafana/ui';
export const getStyles = () => {
return {
ScrubberHandleExpansion: cx(
css`
label: ScrubberHandleExpansion;
cursor: col-resize;
fill-opacity: 0;
fill: #44f;
`,
'scrubber-handle-expansion'
),
ScrubberHandle: cx(
css`
label: ScrubberHandle;
cursor: col-resize;
fill: #555;
`,
'scrubber-handle'
),
ScrubberLine: cx(
css`
label: ScrubberLine;
pointer-events: none;
stroke: #555;
`,
'scrubber-line'
),
ScrubberDragging: css`
label: ScrubberDragging;
& .scrubber-handle-expansion {
fill-opacity: 1;
}
& .scrubber-handle {
fill: #44f;
}
& > .scrubber-line {
stroke: #44f;
}
`,
ScrubberHandles: css`
label: ScrubberHandles;
&:hover > .scrubber-handle-expansion {
fill-opacity: 1;
}
&:hover > .scrubber-handle {
fill: #44f;
}
&:hover + .scrubber.line {
stroke: #44f;
}
`,
};
};
export const getStyles = () => ({
ScrubberHandleExpansion: cx(
css({
label: 'ScrubberHandleExpansion',
cursor: 'col-resize',
fillOpacity: 0,
fill: '#44f',
}),
'scrubber-handle-expansion'
),
ScrubberHandle: cx(
css({
label: 'ScrubberHandle',
cursor: 'col-resize',
fill: '#555',
}),
'scrubber-handle'
),
ScrubberLine: cx(
css({
label: 'ScrubberLine',
pointerEvents: 'none',
stroke: '#555',
}),
'scrubber-line'
),
ScrubberDragging: css({
label: 'ScrubberDragging',
'& .scrubber-handle-expansion': {
fillOpacity: 1,
},
'& .scrubber-handle': {
fill: '#44f',
},
'& > .scrubber-line': {
stroke: '#44f',
},
}),
ScrubberHandles: css({
label: 'ScrubberHandles',
'&:hover > .scrubber-handle-expansion': {
fillOpacity: 1,
},
'&:hover > .scrubber-handle': {
fill: '#44f',
},
'&:hover + .scrubber.line': {
stroke: '#44f',
},
}),
});
export type ScrubberProps = {
isDragging: boolean;

30
public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx
View File

@ -18,22 +18,20 @@ import { useStyles2 } from '@grafana/ui';
import { formatDuration } from '../../utils/date';
const getStyles = () => {
return {
TickLabels: css`
label: TickLabels;
height: 1rem;
position: relative;
`,
TickLabelsLabel: css`
label: TickLabelsLabel;
color: #717171;
font-size: 0.7rem;
position: absolute;
user-select: none;
`,
};
};
const getStyles = () => ({
TickLabels: css({
label: 'TickLabels',
height: '1rem',
position: 'relative',
}),
TickLabelsLabel: css({
label: 'TickLabelsLabel',
color: '#717171',
fontSize: '0.7rem',
position: 'absolute',
userSelect: 'none',
}),
});
type TickLabelsProps = {
numTicks: number;

105
public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx
View File

@ -30,60 +30,61 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
// Need this cause emotion will merge emotion generated classes into single className if used with cx from emotion
// package and the selector won't work
const ViewingLayerResetZoomHoverClassName = 'JaegerUiComponents__ViewingLayerResetZoomHoverClassName';
const ViewingLayerResetZoom = css`
label: ViewingLayerResetZoom;
display: none;
position: absolute;
right: 1%;
top: 10%;
z-index: 1;
`;
const ViewingLayerResetZoom = css({
label: 'ViewingLayerResetZoom',
display: 'none',
position: 'absolute',
right: '1%',
top: '10%',
zIndex: 1,
});
return {
ViewingLayer: css`
label: ViewingLayer;
cursor: vertical-text;
position: relative;
z-index: 1;
&:hover > .${ViewingLayerResetZoomHoverClassName} {
display: unset;
}
`,
ViewingLayerGraph: css`
label: ViewingLayerGraph;
border: 1px solid ${autoColor(theme, '#999')};
ViewingLayer: css({
label: 'ViewingLayer',
cursor: 'vertical-text',
position: 'relative',
zIndex: 1,
[`&:hover > .${ViewingLayerResetZoomHoverClassName}`]: {
display: 'unset',
},
}),
ViewingLayerGraph: css({
label: 'ViewingLayerGraph',
border: `1px solid ${autoColor(theme, '#999')}`,
/* need !important here to overcome something from semantic UI */
overflow: visible !important;
position: relative;
transform-origin: 0 0;
width: 100%;
`,
ViewingLayerInactive: css`
label: ViewingLayerInactive;
fill: ${autoColor(theme, 'rgba(214, 214, 214, 0.5)')};
`,
ViewingLayerCursorGuide: css`
label: ViewingLayerCursorGuide;
stroke: ${autoColor(theme, '#f44')};
stroke-width: 1;
`,
ViewingLayerDraggedShift: css`
label: ViewingLayerDraggedShift;
fill-opacity: 0.2;
`,
ViewingLayerDrag: css`
label: ViewingLayerDrag;
fill: ${autoColor(theme, '#44f')};
`,
ViewingLayerFullOverlay: css`
label: ViewingLayerFullOverlay;
bottom: 0;
cursor: col-resize;
left: 0;
position: fixed;
right: 0;
top: 0;
user-select: none;
`,
overflow: 'visible !important',
position: 'relative',
transformOrigin: '0 0',
width: '100%',
}),
ViewingLayerInactive: css({
label: 'ViewingLayerInactive',
fill: autoColor(theme, 'rgba(214, 214, 214, 0.5)'),
}),
ViewingLayerCursorGuide: css({
label: 'ViewingLayerCursorGuide',
stroke: autoColor(theme, '#f44'),
strokeWidth: 1,
}),
ViewingLayerDraggedShift: css({
label: 'ViewingLayerDraggedShift',
fillOpacity: 0.2,
}),
ViewingLayerDrag: css({
label: 'ViewingLayerDrag',
fill: autoColor(theme, '#44f'),
}),
ViewingLayerFullOverlay: css({
label: 'ViewingLayerFullOverlay',
bottom: 0,
cursor: 'col-resize',
left: 0,
position: 'fixed',
right: 0,
top: 0,
userSelect: 'none',
}),
ViewingLayerResetZoom,
ViewingLayerResetZoomHoverClassName,
};

54
public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx
View File

@ -182,36 +182,36 @@ TracePageHeader.displayName = 'TracePageHeader';
const getNewStyles = (theme: GrafanaTheme2) => {
return {
TracePageHeaderBack: css`
label: TracePageHeaderBack;
align-items: center;
align-self: stretch;
background-color: #fafafa;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
color: inherit;
display: flex;
font-size: 1.4rem;
padding: 0 1rem;
margin-bottom: -1px;
&:hover {
background-color: #f0f0f0;
border-color: #ccc;
}
`,
TracePageHeaderBack: css({
label: 'TracePageHeaderBack',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: '#fafafa',
borderBottom: '1px solid #ddd',
borderRight: '1px solid #ddd',
color: 'inherit',
display: 'flex',
fontSize: '1.4rem',
padding: '0 1rem',
marginBottom: '-1px',
'&:hover': {
backgroundColor: '#f0f0f0',
borderColor: '#ccc',
},
}),
TracePageHeaderOverviewItemValueDetail: cx(
css`
label: TracePageHeaderOverviewItemValueDetail;
color: #aaa;
`,
css({
label: 'TracePageHeaderOverviewItemValueDetail',
color: '#aaa',
}),
'trace-item-value-detail'
),
TracePageHeaderOverviewItemValue: css`
label: TracePageHeaderOverviewItemValue;
&:hover > .trace-item-value-detail {
color: unset;
}
`,
TracePageHeaderOverviewItemValue: css({
label: 'TracePageHeaderOverviewItemValue',
'&:hover > .trace-item-value-detail': {
color: 'unset',
},
}),
header: css({
label: 'TracePageHeader',
backgroundColor: theme.colors.background.primary,

423
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx
View File

@ -52,233 +52,236 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, showSpanFilterMatchesOnly
const backgroundColor = showSpanFilterMatchesOnly ? '' : autoColor(theme, '#fffce4');
return {
nameWrapper: css`
label: nameWrapper;
line-height: 27px;
overflow: hidden;
display: flex;
`,
nameWrapperMatchingFilter: css`
label: nameWrapperMatchingFilter;
background-color: ${backgroundColor};
`,
nameColumn: css`
label: nameColumn;
position: relative;
white-space: nowrap;
z-index: 1;
&:hover {
z-index: 1;
}
`,
endpointName: css`
label: endpointName;
color: ${autoColor(theme, '#484848')};
font-size: 0.9em;
`,
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;
font-size: 0.9em;
&:hover .${spanBarClassName} {
opacity: 1;
}
&:hover .${spanBarLabelClassName} {
color: ${autoColor(theme, '#000')};
}
&:hover .${nameWrapperClassName} {
background: #f8f8f8;
background: linear-gradient(
nameWrapper: css({
label: 'nameWrapper',
lineHeight: '27px',
overflow: 'hidden',
display: 'flex',
}),
nameWrapperMatchingFilter: css({
label: 'nameWrapperMatchingFilter',
backgroundColor: backgroundColor,
}),
nameColumn: css({
label: 'nameColumn',
position: 'relative',
whiteSpace: 'nowrap',
zIndex: 1,
'&:hover': {
zIndex: 1,
},
}),
endpointName: css({
label: 'endpointName',
color: autoColor(theme, '#484848'),
fontSize: '0.9em',
}),
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',
fontSize: '0.9em',
[`&:hover .${spanBarClassName}`]: {
opacity: 1,
},
[`&:hover .${spanBarLabelClassName}`]: {
color: autoColor(theme, '#000'),
},
[`&:hover .${nameWrapperClassName}`]: {
background: `linear-gradient(
90deg,
${autoColor(theme, '#fafafa')},
${autoColor(theme, '#f8f8f8')} 75%,
${autoColor(theme, '#eee')}
);
}
&:hover .${viewClassName} {
background-color: ${autoColor(theme, '#f5f5f5')};
outline: 1px solid ${autoColor(theme, '#ddd')};
}
`,
rowClippingLeft: css`
label: rowClippingLeft;
& .${nameColumnClassName}::before {
content: ' ';
height: 100%;
position: absolute;
width: 6px;
background-image: linear-gradient(
)`,
},
[`&:hover .${viewClassName}`]: {
backgroundColor: autoColor(theme, '#f5f5f5'),
outline: `1px solid ${autoColor(theme, '#ddd')}`,
},
}),
rowClippingLeft: css({
label: 'rowClippingLeft',
[`& .${nameColumnClassName}::before`]: {
content: '" "',
height: '100%',
position: 'absolute',
width: '6px',
backgroundImage: `linear-gradient(
to right,
${autoColor(theme, 'rgba(25, 25, 25, 0.25)')},
${autoColor(theme, 'rgba(32, 32, 32, 0)')}
);
left: 100%;
z-index: -1;
}
`,
rowClippingRight: css`
label: rowClippingRight;
& .${viewClassName}::before {
content: ' ';
height: 100%;
position: absolute;
width: 6px;
background-image: linear-gradient(
)`,
left: '100%',
zIndex: -1,
},
}),
rowClippingRight: css({
label: 'rowClippingRight',
[`& .${viewClassName}::before`]: {
content: '" "',
height: '100%',
position: 'absolute',
width: '6px',
backgroundImage: `linear-gradient(
to left,
${autoColor(theme, 'rgba(25, 25, 25, 0.25)')},
${autoColor(theme, 'rgba(25, 25, 25, 0.25)')}
);
right: 0%;
z-index: 1;
}
`,
rowExpanded: css`
label: rowExpanded;
& .${spanBarClassName} {
opacity: 1;
}
& .${spanBarLabelClassName} {
color: ${autoColor(theme, '#000')};
}
& .${nameWrapperClassName}, &:hover .${nameWrapperClassName} {
background: ${autoColor(theme, '#f0f0f0')};
box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')};
}
& .${nameWrapperMatchingFilterClassName} {
background: ${autoColor(theme, '#fff3d7')};
}
&:hover .${viewClassName} {
background: ${autoColor(theme, '#eee')};
}
`,
rowMatchingFilter: css`
label: rowMatchingFilter;
)`,
right: '0%',
zIndex: 1,
},
}),
rowExpanded: css({
label: 'rowExpanded',
[`& .${spanBarClassName}`]: {
opacity: 1,
},
[`& .${spanBarLabelClassName}`]: {
color: autoColor(theme, '#000'),
},
[`& .${nameWrapperClassName}, &:hover .${nameWrapperClassName}`]: {
background: autoColor(theme, '#f0f0f0'),
boxShadow: `0 1px 0 ${autoColor(theme, '#ddd')}`,
},
[`& .${nameWrapperMatchingFilterClassName}`]: {
background: autoColor(theme, '#fff3d7'),
},
[`&:hover .${viewClassName}`]: {
background: autoColor(theme, '#eee'),
},
}),
rowMatchingFilter: css({
label: 'rowMatchingFilter',
// background-color: ${autoColor(theme, '#fffbde')};
&:hover .${nameWrapperClassName} {
background: linear-gradient(
[`&:hover .${nameWrapperClassName}`]: {
background: `linear-gradient(
90deg,
${autoColor(theme, '#fffbde')},
${autoColor(theme, '#fffbde')} 75%,
${autoColor(theme, '#f7f1c6')}
);
}
&:hover .${viewClassName} {
background-color: ${autoColor(theme, '#f7f1c6')};
outline: 1px solid ${autoColor(theme, '#ddd')};
}
`,
rowFocused: css`
label: rowFocused;
background-color: ${autoColor(theme, '#cbe7ff')};
animation: ${animations.flash} 1s cubic-bezier(0.12, 0, 0.39, 0);
& .${nameWrapperClassName}, .${viewClassName}, .${nameWrapperMatchingFilterClassName} {
background-color: ${autoColor(theme, '#cbe7ff')};
animation: ${animations.flash} 1s cubic-bezier(0.12, 0, 0.39, 0);
}
& .${spanBarClassName} {
opacity: 1;
}
& .${spanBarLabelClassName} {
color: ${autoColor(theme, '#000')};
}
&:hover .${nameWrapperClassName}, :hover .${viewClassName} {
background: ${autoColor(theme, '#d5ebff')};
box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')};
}
`,
)`,
},
[`&:hover .${viewClassName}`]: {
backgroundColor: autoColor(theme, '#f7f1c6'),
outline: `1px solid ${autoColor(theme, '#ddd')}`,
},
}),
rowFocused: css({
label: 'rowFocused',
backgroundColor: autoColor(theme, '#cbe7ff'),
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
animation: `${animations.flash} 1s cubic-bezier(0.12, 0, 0.39, 0)`,
},
[`& .${nameWrapperClassName}, .${viewClassName}, .${nameWrapperMatchingFilterClassName}`]: {
backgroundColor: autoColor(theme, '#cbe7ff'),
animation: `${animations.flash} 1s cubic-bezier(0.12, 0, 0.39, 0)`,
},
[`& .${spanBarClassName}`]: {
opacity: 1,
},
[`& .${spanBarLabelClassName}`]: {
color: autoColor(theme, '#000'),
},
['&:hover .${nameWrapperClassName}, :hover .${viewClassName}']: {
background: autoColor(theme, '#d5ebff'),
boxShadow: `0 1px 0 ${autoColor(theme, '#ddd')}`,
},
}),
rowExpandedAndMatchingFilter: css`
label: rowExpandedAndMatchingFilter;
&:hover .${viewClassName} {
background: ${autoColor(theme, '#ffeccf')};
}
`,
rowExpandedAndMatchingFilter: css({
label: 'rowExpandedAndMatchingFilter',
[`&:hover .${viewClassName}`]: {
background: autoColor(theme, '#ffeccf'),
},
}),
name: css`
label: name;
color: ${autoColor(theme, '#000')};
cursor: pointer;
flex: 1 1 auto;
outline: none;
overflow-y: hidden;
overflow-x: auto;
padding-left: 4px;
padding-right: 0.25em;
position: relative;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&:focus {
text-decoration: none;
}
&:hover > span {
color: ${autoColor(theme, '#000')};
}
text-align: left;
background: transparent;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
`,
nameDetailExpanded: css`
label: nameDetailExpanded;
&::before {
bottom: 0;
}
`,
svcName: css`
label: svcName;
font-size: 0.9em;
font-weight: bold;
margin-right: 0.25rem;
`,
svcNameChildrenCollapsed: css`
label: svcNameChildrenCollapsed;
font-weight: bold;
font-style: italic;
`,
errorIcon: css`
label: errorIcon;
border-radius: 6.5px;
color: ${autoColor(theme, '#fff')};
font-size: 0.85em;
margin-right: 0.25rem;
padding: 1px;
`,
rpcColorMarker: css`
label: rpcColorMarker;
border-radius: 6.5px;
display: inline-block;
font-size: 0.85em;
height: 1em;
margin-right: 0.25rem;
padding: 1px;
width: 1em;
vertical-align: middle;
`,
labelRight: css`
label: labelRight;
left: 100%;
`,
labelLeft: css`
label: labelLeft;
right: 100%;
`,
name: css({
label: 'name',
color: autoColor(theme, '#000'),
cursor: 'pointer',
flex: '1 1 auto',
outline: 'none',
overflowY: 'hidden',
overflowX: 'auto',
paddingLeft: '4px',
paddingRight: '0.25em',
position: 'relative',
'-ms-overflow-style': 'none',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
'&:focus': {
textDecoration: 'none',
},
'&:hover > span': {
color: autoColor(theme, '#000'),
},
textAlign: 'left',
background: 'transparent',
border: 'none',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
}),
nameDetailExpanded: css({
label: 'nameDetailExpanded',
'&::before': {
bottom: 0,
},
}),
svcName: css({
label: 'svcName',
fontSize: '0.9em',
fontWeight: 'bold',
marginRight: '0.25rem',
}),
svcNameChildrenCollapsed: css({
label: 'svcNameChildrenCollapsed',
fontWeight: 'bold',
fontStyle: 'italic',
}),
errorIcon: css({
label: 'errorIcon',
// eslint-disable-next-line @grafana/no-border-radius-literal
borderRadius: '6.5px',
color: autoColor(theme, '#fff'),
fontSize: '0.85em',
marginRight: '0.25rem',
padding: '1px',
}),
rpcColorMarker: css({
label: 'rpcColorMarker',
// eslint-disable-next-line @grafana/no-border-radius-literal
borderRadius: '6.5px',
display: 'inline-block',
fontSize: '0.85em',
height: '1em',
marginRight: '0.25rem',
padding: '1px',
width: '1em',
verticalAlign: 'middle',
}),
labelRight: css({
label: 'labelRight',
left: '100%',
}),
labelLeft: css({
label: 'labelLeft',
right: '100%',
}),
};
});

102
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
View File

@ -32,57 +32,57 @@ export const getStyles = (theme: GrafanaTheme2) => {
container: css({
textOverflow: 'ellipsis',
}),
header: css`
label: header;
cursor: pointer;
overflow: hidden;
padding: 0.25em 0.1em;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
background: ${autoColor(theme, '#e8e8e8')};
}
`,
headerEmpty: css`
label: headerEmpty;
background: none;
cursor: initial;
`,
headerHighContrast: css`
label: headerHighContrast;
&:hover {
background: ${autoColor(theme, '#ddd')};
}
`,
emptyIcon: css`
label: emptyIcon;
color: ${autoColor(theme, '#aaa')};
`,
summary: css`
label: summary;
display: inline;
list-style: none;
padding: 0;
`,
summaryItem: css`
label: summaryItem;
display: inline;
padding-right: 0.5rem;
border-right: 1px solid ${autoColor(theme, '#ddd')};
&:last-child {
padding-right: 0;
border-right: none;
}
`,
summaryLabel: css`
label: summaryLabel;
color: ${autoColor(theme, '#777')};
`,
summaryDelim: css`
label: summaryDelim;
color: ${autoColor(theme, '#bbb')};
padding: 0 0.2em;
`,
header: css({
label: 'header',
cursor: 'pointer',
overflow: 'hidden',
padding: '0.25em 0.1em',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:hover': {
background: autoColor(theme, '#e8e8e8'),
},
}),
headerEmpty: css({
label: 'headerEmpty',
background: 'none',
cursor: 'initial',
}),
headerHighContrast: css({
label: 'headerHighContrast',
'&:hover': {
background: autoColor(theme, '#ddd'),
},
}),
emptyIcon: css({
label: 'emptyIcon',
color: autoColor(theme, '#aaa'),
}),
summary: css({
label: 'summary',
display: 'inline',
listStyle: 'none',
padding: 0,
}),
summaryItem: css({
label: 'summaryItem',
display: 'inline',
paddingRight: '0.5rem',
borderRight: `1px solid ${autoColor(theme, '#ddd')}`,
'&:last-child': {
paddingRight: 0,
borderRight: 'none',
},
}),
summaryLabel: css({
label: 'summaryLabel',
color: autoColor(theme, '#777'),
}),
summaryDelim: css({
label: 'summaryDelim',
color: autoColor(theme, '#bbb'),
padding: '0 0.2em',
}),
};
};

52
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
View File

@ -30,32 +30,32 @@ import { alignIcon } from '.';
const getStyles = (theme: GrafanaTheme2) => {
return {
AccordianLogs: css`
label: AccordianLogs;
border: 1px solid ${autoColor(theme, '#d8d8d8')};
position: relative;
margin-bottom: 0.25rem;
`,
AccordianLogsHeader: css`
label: AccordianLogsHeader;
background: ${autoColor(theme, '#e4e4e4')};
color: inherit;
display: block;
padding: 0.25rem 0.5rem;
&:hover {
background: ${autoColor(theme, '#dadada')};
}
`,
AccordianLogsContent: css`
label: AccordianLogsContent;
background: ${autoColor(theme, '#f0f0f0')};
border-top: 1px solid ${autoColor(theme, '#d8d8d8')};
padding: 0.5rem 0.5rem 0.25rem 0.5rem;
`,
AccordianLogsFooter: css`
label: AccordianLogsFooter;
color: ${autoColor(theme, '#999')};
`,
AccordianLogs: css({
label: 'AccordianLogs',
border: `1px solid ${autoColor(theme, '#d8d8d8')}`,
position: 'relative',
marginBottom: '0.25rem',
}),
AccordianLogsHeader: css({
label: 'AccordianLogsHeader',
background: autoColor(theme, '#e4e4e4'),
color: 'inherit',
display: 'block',
padding: '0.25rem 0.5rem',
'&:hover': {
background: autoColor(theme, '#dadada'),
},
}),
AccordianLogsContent: css({
label: 'AccordianLogsContent',
background: autoColor(theme, '#f0f0f0'),
borderTop: `1px solid ${autoColor(theme, '#d8d8d8')}`,
padding: '0.5rem 0.5rem 0.25rem 0.5rem',
}),
AccordianLogsFooter: css({
label: 'AccordianLogsFooter',
color: autoColor(theme, '#999'),
}),
AccordianKeyValuesItem: css({
marginBottom: theme.spacing(0.5),
}),

170
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
View File

@ -26,92 +26,90 @@ import AccordianKeyValues from './AccordianKeyValues';
import { alignIcon } from '.';
const getStyles = (theme: GrafanaTheme2) => {
return {
AccordianReferenceItem: css`
border-bottom: 1px solid ${autoColor(theme, '#d8d8d8')};
`,
AccordianKeyValues: css`
margin-left: 10px;
`,
AccordianReferences: css`
label: AccordianReferences;
border: 1px solid ${autoColor(theme, '#d8d8d8')};
position: relative;
margin-bottom: 0.25rem;
`,
AccordianReferencesHeader: css`
label: AccordianReferencesHeader;
background: ${autoColor(theme, '#e4e4e4')};
color: inherit;
display: block;
padding: 0.25rem 0.5rem;
&:hover {
background: ${autoColor(theme, '#dadada')};
}
`,
AccordianReferencesContent: css`
label: AccordianReferencesContent;
background: ${autoColor(theme, '#f0f0f0')};
border-top: 1px solid ${autoColor(theme, '#d8d8d8')};
padding: 0.5rem 0.5rem 0.25rem 0.5rem;
`,
AccordianReferencesFooter: css`
label: AccordianReferencesFooter;
color: ${autoColor(theme, '#999')};
`,
AccordianKeyValuesItem: css({
marginBottom: theme.spacing(0.5),
}),
ReferencesList: css`
background: #fff;
border: 1px solid #ddd;
margin-bottom: 0.7em;
max-height: 450px;
overflow: auto;
`,
list: css`
width: 100%;
list-style: none;
padding: 0;
margin: 0;
background: #fff;
`,
itemContent: css`
padding: 0.25rem 0.5rem;
display: flex;
width: 100%;
justify-content: space-between;
`,
item: css`
&:nth-child(2n) {
background: #f5f5f5;
}
`,
debugInfo: css`
letter-spacing: 0.25px;
margin: 0.5em 0 0;
flex-wrap: wrap;
display: flex;
justify-content: flex-end;
`,
debugLabel: css`
margin: 0 5px 0 5px;
&::before {
color: #bbb;
content: attr(data-label);
}
`,
serviceName: css`
margin-right: 8px;
`,
title: css`
display: flex;
align-items: center;
gap: 4px;
`,
};
};
const getStyles = (theme: GrafanaTheme2) => ({
AccordianReferenceItem: css({
borderBottom: `1px solid ${autoColor(theme, '#d8d8d8')}`,
}),
AccordianKeyValues: css({
marginLeft: '10px',
}),
AccordianReferences: css({
label: 'AccordianReferences',
border: `1px solid ${autoColor(theme, '#d8d8d8')}`,
position: 'relative',
marginBottom: '0.25rem',
}),
AccordianReferencesHeader: css({
label: 'AccordianReferencesHeader',
background: autoColor(theme, '#e4e4e4'),
color: 'inherit',
display: 'block',
padding: '0.25rem 0.5rem',
'&:hover': {
background: autoColor(theme, '#dadada'),
},
}),
AccordianReferencesContent: css({
label: 'AccordianReferencesContent',
background: autoColor(theme, '#f0f0f0'),
borderTop: `1px solid ${autoColor(theme, '#d8d8d8')}`,
padding: '0.5rem 0.5rem 0.25rem 0.5rem',
}),
AccordianReferencesFooter: css({
label: 'AccordianReferencesFooter',
color: autoColor(theme, '#999'),
}),
AccordianKeyValuesItem: css({
marginBottom: theme.spacing(0.5),
}),
ReferencesList: css({
background: '#fff',
border: '1px solid #ddd',
marginBottom: '0.7em',
maxHeight: '450px',
overflow: 'auto',
}),
list: css({
width: '100%',
listStyle: 'none',
padding: 0,
margin: 0,
background: '#fff',
}),
itemContent: css({
padding: '0.25rem 0.5rem',
display: 'flex',
width: '100%',
justifyContent: 'space-between',
}),
item: css({
'&:nth-child(2n)': {
background: '#f5f5f5',
},
}),
debugInfo: css({
letterSpacing: '0.25px',
margin: '0.5em 0 0',
flexWrap: 'wrap',
display: 'flex',
justifyContent: 'flex-end',
}),
debugLabel: css({
margin: '0 5px 0 5px',
'&::before': {
color: '#bbb',
content: 'attr(data-label)',
},
}),
serviceName: css({
marginRight: '8px',
}),
title: css({
display: 'flex',
alignItems: 'center',
gap: '4px',
}),
});
export type AccordianReferencesProps = {
data: TraceSpanReference[];

26
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx
View File

@ -27,20 +27,18 @@ import TextList from './TextList';
import { alignIcon } from '.';
const getStyles = (theme: GrafanaTheme2) => {
return {
header: css`
cursor: pointer;
overflow: hidden;
padding: 0.25em 0.1em;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
background: ${autoColor(theme, '#e8e8e8')};
}
`,
};
};
const getStyles = (theme: GrafanaTheme2) => ({
header: css({
cursor: 'pointer',
overflow: 'hidden',
padding: '0.25em 0.1em',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:hover': {
background: autoColor(theme, '#e8e8e8'),
},
}),
});
type AccordianTextProps = {
className?: string | TNil;

82
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
View File

@ -30,50 +30,50 @@ const copyIconClassName = 'copyIcon';
export const getStyles = (theme: GrafanaTheme2) => {
return {
KeyValueTable: css`
label: KeyValueTable;
background: ${autoColor(theme, '#fff')};
border: 1px solid ${autoColor(theme, '#ddd')};
margin-bottom: 0.5rem;
max-height: 450px;
overflow: auto;
`,
KeyValueTable: css({
label: 'KeyValueTable',
background: autoColor(theme, '#fff'),
border: `1px solid ${autoColor(theme, '#ddd')}`,
marginBottom: '0.5rem',
maxHeight: '450px',
overflow: 'auto',
}),
table: css({
width: '100%',
}),
body: css`
label: body;
vertical-align: baseline;
`,
row: css`
label: row;
& > td {
padding: 0.5rem 0.5rem;
height: 30px;
}
&:nth-child(2n) > td {
background: ${autoColor(theme, '#f5f5f5')};
}
&:not(:hover) .${copyIconClassName} {
visibility: hidden;
}
`,
keyColumn: css`
label: keyColumn;
color: ${autoColor(theme, '#888')};
white-space: pre;
width: 125px;
vertical-align: top;
`,
copyColumn: css`
label: copyColumn;
text-align: right;
`,
linkIcon: css`
label: linkIcon;
vertical-align: middle;
font-weight: bold;
`,
body: css({
label: 'body',
verticalAlign: 'baseline',
}),
row: css({
label: 'row',
'& > td': {
padding: '0.5rem 0.5rem',
height: '30px',
},
'&:nth-child(2n) > td': {
background: autoColor(theme, '#f5f5f5'),
},
[`&:not(:hover) .${copyIconClassName}`]: {
visibility: 'hidden',
},
}),
keyColumn: css({
label: 'keyColumn',
color: autoColor(theme, '#888'),
whiteSpace: 'pre',
width: '125px',
verticalAlign: 'top',
}),
copyColumn: css({
label: 'copyColumn',
textAlign: 'right',
}),
linkIcon: css({
label: 'linkIcon',
verticalAlign: 'middle',
fontWeight: 'bold',
}),
jsonTable: css({
display: 'inline-block',
}),

40
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx
View File

@ -17,27 +17,25 @@ import cx from 'classnames';
import { useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
TextList: css`
max-height: 450px;
overflow: auto;
`,
List: css`
width: 100%;
list-style: none;
padding: 0;
margin: 0;
`,
item: css`
padding: 0.25rem 0.5rem;
vertical-align: top;
&:nth-child(2n) {
background: #f5f5f5;
}
`,
};
};
const getStyles = () => ({
TextList: css({
maxHeight: '450px',
overflow: 'auto',
}),
List: css({
width: '100%',
listStyle: 'none',
padding: 0,
margin: 0,
}),
item: css({
padding: '0.25rem 0.5rem',
verticalAlign: 'top',
'&:nth-child(2n)': {
background: '#f5f5f5',
},
}),
});
type TextListProps = {
data: string[];

126
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
View File

@ -50,78 +50,78 @@ import SpanFlameGraph from './SpanFlameGraph';
const getStyles = (theme: GrafanaTheme2) => {
return {
header: css`
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0 1rem;
margin-bottom: 0.25rem;
`,
listWrapper: css`
overflow: hidden;
`,
header: css({
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'space-between',
gap: '0 1rem',
marginBottom: '0.25rem',
}),
listWrapper: css({
overflow: 'hidden',
}),
list: css({
textAlign: 'right',
}),
operationName: css({
margin: 0,
}),
debugInfo: css`
label: debugInfo;
display: block;
letter-spacing: 0.25px;
margin: 0.5em 0 -0.75em;
text-align: right;
`,
debugLabel: css`
label: debugLabel;
&::before {
color: ${autoColor(theme, '#bbb')};
content: attr(data-label);
}
`,
debugValue: css`
label: debugValue;
background-color: inherit;
border: none;
color: ${autoColor(theme, '#888')};
cursor: pointer;
&:hover {
color: ${autoColor(theme, '#333')};
}
`,
AccordianWarnings: css`
label: AccordianWarnings;
background: ${autoColor(theme, '#fafafa')};
border: 1px solid ${autoColor(theme, '#e4e4e4')};
margin-bottom: 0.25rem;
`,
AccordianWarningsHeader: css`
label: AccordianWarningsHeader;
background: ${autoColor(theme, '#fff7e6')};
padding: 0.25rem 0.5rem;
&:hover {
background: ${autoColor(theme, '#ffe7ba')};
}
`,
AccordianWarningsHeaderOpen: css`
label: AccordianWarningsHeaderOpen;
border-bottom: 1px solid ${autoColor(theme, '#e8e8e8')};
`,
AccordianWarningsLabel: css`
label: AccordianWarningsLabel;
color: ${autoColor(theme, '#d36c08')};
`,
debugInfo: css({
label: 'debugInfo',
display: 'block',
letterSpacing: '0.25px',
margin: '0.5em 0 -0.75em',
textAlign: 'right',
}),
debugLabel: css({
label: 'debugLabel',
'&::before': {
color: autoColor(theme, '#bbb'),
content: 'attr(data-label)',
},
}),
debugValue: css({
label: 'debugValue',
backgroundColor: 'inherit',
border: 'none',
color: autoColor(theme, '#888'),
cursor: 'pointer',
'&:hover': {
color: autoColor(theme, '#333'),
},
}),
AccordianWarnings: css({
label: 'AccordianWarnings',
background: autoColor(theme, '#fafafa'),
border: `1px solid ${autoColor(theme, '#e4e4e4')}`,
marginBottom: '0.25rem',
}),
AccordianWarningsHeader: css({
label: 'AccordianWarningsHeader',
background: autoColor(theme, '#fff7e6'),
padding: '0.25rem 0.5rem',
'&:hover': {
background: autoColor(theme, '#ffe7ba'),
},
}),
AccordianWarningsHeaderOpen: css({
label: 'AccordianWarningsHeaderOpen',
borderBottom: `1px solid ${autoColor(theme, '#e8e8e8')}`,
}),
AccordianWarningsLabel: css({
label: 'AccordianWarningsLabel',
color: autoColor(theme, '#d36c08'),
}),
AccordianKeyValuesItem: css({
marginBottom: theme.spacing(0.5),
}),
Textarea: css`
word-break: break-all;
white-space: pre;
`,
LinkIcon: css`
font-size: 1.5em;
`,
Textarea: css({
wordBreak: 'break-all',
whiteSpace: 'pre',
}),
LinkIcon: css({
fontSize: '1.5em',
}),
linkList: css({
display: 'flex',
flexWrap: 'wrap',

67
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx
View File

@ -32,43 +32,42 @@ import TimelineRow from './TimelineRow';
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
expandedAccent: css`
cursor: pointer;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
&::before {
border-left: 1px solid;
pointer-events: none;
width: 1000px;
}
&::after {
border-right: 1000px solid;
border-color: inherit;
cursor: pointer;
opacity: 0.2;
}
expandedAccent: css({
cursor: 'pointer',
height: '100%',
overflow: 'hidden',
position: 'absolute',
width: '100%',
'&::before': {
borderLeft: '1px solid',
pointerEvents: 'none',
width: '1000px',
},
'&::after': {
borderRight: '1000px solid',
borderColor: 'inherit',
cursor: 'pointer',
opacity: 0.2,
},
/* border-color inherit must come AFTER other border declarations for accent */
&::before,
&::after {
border-color: inherit;
content: ' ';
position: absolute;
height: 100%;
}
'&::before, &::after': {
borderColor: 'inherit',
content: '" "',
position: 'absolute',
height: '100%',
},
&:hover::after {
opacity: 0.35;
}
`,
infoWrapper: css`
label: infoWrapper;
border: 1px solid ${autoColor(theme, '#d3d3d3')};
border-top: 3px solid;
padding: 0.75rem;
`,
'&:hover::after': {
opacity: 0.35,
},
}),
infoWrapper: css({
label: 'infoWrapper',
border: `1px solid ${autoColor(theme, '#d3d3d3')}`,
borderTop: '3px solid',
padding: '0.75rem',
}),
};
});

46
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx
View File

@ -83,27 +83,25 @@ export const SpanLinksMenu = ({ links, datasourceType, color }: SpanLinksProps)
);
};
const getStyles = (color: string) => {
return {
wrapper: css`
border: none;
background: ${color}10;
border-bottom: 1px solid ${color}CF;
padding-right: 4px;
`,
button: css`
background: transparent;
border: none;
padding: 0;
`,
icon: css`
background: transparent;
border: none;
padding: 0;
`,
menuItem: css`
max-width: 60ch;
overflow: hidden;
`,
};
};
const getStyles = (color: string) => ({
wrapper: css({
border: 'none',
background: `${color}10`,
borderBottom: `1px solid ${color}CF`,
paddingRight: '4px',
}),
button: css({
background: 'transparent',
border: 'none',
padding: 0,
}),
icon: css({
background: 'transparent',
border: 'none',
padding: 0,
}),
menuItem: css({
maxWidth: '60ch',
overflow: 'hidden',
}),
});

84
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx
View File

@ -24,48 +24,48 @@ import { autoColor } from '../Theme';
import { TraceSpan } from '../types';
import spanAncestorIds from '../utils/span-ancestor-ids';
export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
SpanTreeOffset: css`
label: SpanTreeOffset;
color: ${autoColor(theme, '#000')};
position: relative;
`,
SpanTreeOffsetParent: css`
label: SpanTreeOffsetParent;
&:hover {
cursor: pointer;
}
`,
indentGuide: css`
label: indentGuide;
/* The size of the indentGuide is based off of the iconWrapper */
padding-right: 1rem;
height: 100%;
display: inline-flex;
transition: padding 300ms ease-out;
&::before {
content: '';
padding-left: 1px;
background-color: ${autoColor(theme, 'lightgrey')};
}
`,
indentGuideActive: css`
label: indentGuideActive;
&::before {
background-color: ${autoColor(theme, '#777')};
}
`,
indentGuideThin: css`
padding-right: 0.3rem;
`,
iconWrapper: css`
label: iconWrapper;
position: absolute;
right: 0;
`,
};
});
export const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
SpanTreeOffset: css({
label: 'SpanTreeOffset',
color: autoColor(theme, '#000'),
position: 'relative',
}),
SpanTreeOffsetParent: css({
label: 'SpanTreeOffsetParent',
'&:hover': {
cursor: 'pointer',
},
}),
indentGuide: css({
label: 'indentGuide',
/* The size of the indentGuide is based off of the iconWrapper */
paddingRight: '1rem',
height: '100%',
display: 'inline-flex',
[theme.transitions.handleMotion('no-preference')]: {
transition: 'padding 300ms ease-out',
},
'&::before': {
content: '""',
paddingLeft: '1px',
backgroundColor: autoColor(theme, 'lightgrey'),
},
}),
indentGuideActive: css({
label: 'indentGuideActive',
'&::before': {
backgroundColor: autoColor(theme, '#777'),
},
}),
indentGuideThin: css({
paddingRight: '0.3rem',
}),
iconWrapper: css({
label: 'iconWrapper',
position: 'absolute',
right: 0,
}),
}));
export type TProps = {
childrenVisible?: boolean;

54
public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx
View File

@ -24,34 +24,32 @@ import { TNil } from '../types';
import { formatDuration } from './utils';
const getStyles = (theme: GrafanaTheme2) => {
return {
Ticks: css`
label: Ticks;
pointer-events: none;
`,
TicksTick: css`
label: TicksTick;
position: absolute;
height: 100%;
width: 1px;
background: ${autoColor(theme, '#d8d8d8')};
&:last-child {
width: 0;
}
`,
TicksTickLabel: css`
label: TicksTickLabel;
left: 0.25rem;
position: absolute;
`,
TicksTickLabelEndAnchor: css`
label: TicksTickLabelEndAnchor;
left: initial;
right: 0.25rem;
`,
};
};
const getStyles = (theme: GrafanaTheme2) => ({
Ticks: css({
label: 'Ticks',
pointerEvents: 'none',
}),
TicksTick: css({
label: 'TicksTick',
position: 'absolute',
height: '100%',
width: '1px',
background: autoColor(theme, '#d8d8d8'),
'&:last-child': {
width: 0,
},
}),
TicksTickLabel: css({
label: 'TicksTickLabel',
left: '0.25rem',
position: 'absolute',
}),
TicksTickLabelEndAnchor: css({
label: 'TicksTickLabelEndAnchor',
left: 'initial',
right: '0.25rem',
}),
});
type TicksProps = {
endTime?: number | TNil;

20
public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
View File

@ -16,17 +16,15 @@ import { css } from '@emotion/css';
import { IconButton, useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
TimelineCollapser: css`
align-items: center;
display: flex;
flex: none;
justify-content: center;
margin-right: 0.5rem;
`,
};
};
const getStyles = () => ({
TimelineCollapser: css({
alignItems: 'center',
display: 'flex',
flex: 'none',
justifyContent: 'center',
marginRight: '0.5rem',
}),
});
type CollapserProps = {
onCollapseAll: () => void;

146
public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx
View File

@ -19,81 +19,77 @@ import * as React from 'react';
import { TNil } from '../../types';
import DraggableManager, { DraggableBounds, DraggingUpdate } from '../../utils/DraggableManager';
export const getStyles = () => {
return {
TimelineColumnResizer: css`
left: 0;
position: absolute;
right: 0;
top: 0;
`,
wrapper: css`
bottom: 0;
position: absolute;
top: 0;
`,
dragger: css`
border-left: 2px solid transparent;
cursor: col-resize;
height: 5000px;
margin-left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 10;
&:hover {
border-left: 2px solid rgba(0, 0, 0, 0.3);
}
&::before {
position: absolute;
top: 0;
bottom: 0;
left: -8px;
right: 0;
content: ' ';
}
`,
draggerDragging: css`
background: rgba(136, 0, 136, 0.05);
width: unset;
&::before {
left: -2000px;
right: -2000px;
}
`,
draggerDraggingLeft: css`
border-left: 2px solid #808;
border-right: 1px solid #999;
`,
draggerDraggingRight: css`
border-left: 1px solid #999;
border-right: 2px solid #808;
`,
gripIcon: css`
position: absolute;
top: 0;
bottom: 0;
&::before,
&::after {
border-right: 1px solid #ccc;
content: ' ';
height: 9px;
position: absolute;
right: 9px;
top: 25px;
}
&::after {
right: 5px;
}
`,
gripIconDragging: css`
&::before,
&::after {
border-right: 1px solid rgba(136, 0, 136, 0.5);
}
`,
};
};
export const getStyles = () => ({
TimelineColumnResizer: css({
left: 0,
position: 'absolute',
right: 0,
top: 0,
}),
wrapper: css({
bottom: 0,
position: 'absolute',
top: 0,
}),
dragger: css({
borderLeft: '2px solid transparent',
cursor: 'col-resize',
height: '5000px',
marginLeft: '-1px',
position: 'absolute',
top: 0,
width: '1px',
zIndex: 10,
'&:hover': {
borderLeft: '2px solid rgba(0, 0, 0, 0.3)',
},
'&::before': {
position: 'absolute',
top: 0,
bottom: 0,
left: '-8px',
right: 0,
content: '" "',
},
}),
draggerDragging: css({
background: 'rgba(136, 0, 136, 0.05)',
width: 'unset',
'&::before': {
left: -2000,
right: -2000,
},
}),
draggerDraggingLeft: css({
borderLeft: '2px solid #808',
borderRight: '1px solid #999',
}),
draggerDraggingRight: css({
borderLeft: '1px solid #999',
borderRight: '2px solid #808',
}),
gripIcon: css({
position: 'absolute',
top: 0,
bottom: 0,
'&::before, &::after': {
borderRight: '1px solid #ccc',
content: '" "',
height: '9px',
position: 'absolute',
right: '9px',
top: '25px',
},
'&::after': {
right: '5px',
},
}),
gripIconDragging: css({
'&::before, &::after': {
borderRight: '1px solid rgba(136, 0, 136, 0.5)',
},
}),
});
export type TimelineColumnResizerProps = {
min: number;

50
public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
View File

@ -28,31 +28,31 @@ import TimelineViewingLayer from './TimelineViewingLayer';
const getStyles = (theme: GrafanaTheme2) => {
return {
TimelineHeaderRow: css`
label: TimelineHeaderRow;
background: ${autoColor(theme, '#ececec')};
border-bottom: 1px solid ${autoColor(theme, '#ccc')};
height: 38px;
line-height: 38px;
width: 100%;
z-index: 4;
position: relative;
`,
TimelineHeaderRowTitle: css`
label: TimelineHeaderRowTitle;
flex: 1;
overflow: hidden;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
`,
TimelineHeaderWrapper: css`
label: TimelineHeaderWrapper;
align-items: center;
display: flex;
padding-left: ${theme.spacing(1)};
padding-right: ${theme.spacing(1)};
`,
TimelineHeaderRow: css({
label: 'TimelineHeaderRow',
background: autoColor(theme, '#ececec'),
borderBottom: `1px solid ${autoColor(theme, '#ccc')}`,
height: '38px',
lineHeight: '38px',
width: '100%',
zIndex: 4,
position: 'relative',
}),
TimelineHeaderRowTitle: css({
label: 'TimelineHeaderRowTitle',
flex: 1,
overflow: 'hidden',
margin: 0,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}),
TimelineHeaderWrapper: css({
label: 'TimelineHeaderWrapper',
alignItems: 'center',
display: 'flex',
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
}),
};
};

104
public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
View File

@ -24,58 +24,58 @@ import { TUpdateViewRangeTimeFunction, ViewRangeTime, ViewRangeTimeUpdate } from
// exported for testing
export const getStyles = stylesFactory(() => {
return {
TimelineViewingLayer: css`
label: TimelineViewingLayer;
bottom: 0;
cursor: vertical-text;
left: 0;
position: absolute;
right: 0;
top: 0;
`,
TimelineViewingLayerCursorGuide: css`
label: TimelineViewingLayerCursorGuide;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: red;
`,
TimelineViewingLayerDragged: css`
label: TimelineViewingLayerDragged;
position: absolute;
top: 0;
bottom: 0;
`,
TimelineViewingLayerDraggedDraggingLeft: css`
label: TimelineViewingLayerDraggedDraggingLeft;
border-left: 1px solid;
`,
TimelineViewingLayerDraggedDraggingRight: css`
label: TimelineViewingLayerDraggedDraggingRight;
border-right: 1px solid;
`,
TimelineViewingLayerDraggedShiftDrag: css`
label: TimelineViewingLayerDraggedShiftDrag;
background-color: rgba(68, 68, 255, 0.2);
border-color: #44f;
`,
TimelineViewingLayerDraggedReframeDrag: css`
label: TimelineViewingLayerDraggedReframeDrag;
background-color: rgba(255, 68, 68, 0.2);
border-color: #f44;
`,
TimelineViewingLayerFullOverlay: css`
label: TimelineViewingLayerFullOverlay;
bottom: 0;
cursor: col-resize;
left: 0;
position: fixed;
right: 0;
top: 0;
user-select: none;
`,
TimelineViewingLayer: css({
label: 'TimelineViewingLayer',
bottom: 0,
cursor: 'vertical-text',
left: 0,
position: 'absolute',
right: 0,
top: 0,
}),
TimelineViewingLayerCursorGuide: css({
label: 'TimelineViewingLayerCursorGuide',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
width: '1px',
backgroundColor: 'red',
}),
TimelineViewingLayerDragged: css({
label: 'TimelineViewingLayerDragged',
position: 'absolute',
top: 0,
bottom: 0,
}),
TimelineViewingLayerDraggedDraggingLeft: css({
label: 'TimelineViewingLayerDraggedDraggingLeft',
borderLeft: '1px solid',
}),
TimelineViewingLayerDraggedDraggingRight: css({
label: 'TimelineViewingLayerDraggedDraggingRight',
borderRight: '1px solid',
}),
TimelineViewingLayerDraggedShiftDrag: css({
label: 'TimelineViewingLayerDraggedShiftDrag',
backgroundColor: 'rgba(68, 68, 255, 0.2)',
borderColor: '#44f',
}),
TimelineViewingLayerDraggedReframeDrag: css({
label: 'TimelineViewingLayerDraggedReframeDrag',
backgroundColor: 'rgba(255, 68, 68, 0.2)',
borderColor: '#f44',
}),
TimelineViewingLayerFullOverlay: css({
label: 'TimelineViewingLayerFullOverlay',
bottom: 0,
cursor: 'col-resize',
left: 0,
position: 'fixed',
right: 0,
top: 0,
userSelect: 'none',
}),
};
});

42
public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx
View File

@ -44,28 +44,26 @@ import {
ViewedBoundsFunctionType,
} from './utils';
const getStyles = stylesFactory(() => {
return {
rowsWrapper: css`
width: 100%;
`,
row: css`
width: 100%;
`,
scrollToTopButton: css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
position: absolute;
bottom: 30px;
right: 30px;
z-index: 1;
`,
};
});
const getStyles = stylesFactory(() => ({
rowsWrapper: css({
width: '100%',
}),
row: css({
width: '100%',
}),
scrollToTopButton: css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '40px',
height: '40px',
position: 'absolute',
bottom: '30px',
right: '30px',
zIndex: 1,
}),
}));
type RowState = {
isDetail: boolean;

56
public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx
View File

@ -32,41 +32,39 @@ import TimelineHeaderRow from './TimelineHeaderRow';
import VirtualizedTraceView from './VirtualizedTraceView';
import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from './types';
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
TraceTimelineViewer: css`
label: TraceTimelineViewer;
border-bottom: 1px solid ${autoColor(theme, '#bbb')};
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
TraceTimelineViewer: css({
label: 'TraceTimelineViewer',
borderBottom: `1px solid ${autoColor(theme, '#bbb')}`,
& .json-markup {
line-height: 17px;
font-size: 13px;
font-family: monospace;
white-space: pre-wrap;
}
'& .json-markup': {
lineHeight: '17px',
fontSize: '13px',
fontFamily: 'monospace',
whiteSpace: 'pre-wrap',
},
& .json-markup-key {
font-weight: bold;
}
'& .json-markup-key': {
fontWeight: 'bold',
},
& .json-markup-bool {
color: ${autoColor(theme, 'firebrick')};
}
'& .json-markup-bool': {
color: autoColor(theme, 'firebrick'),
},
& .json-markup-string {
color: ${autoColor(theme, 'teal')};
}
'& .json-markup-string': {
color: autoColor(theme, 'teal'),
},
& .json-markup-null {
color: ${autoColor(theme, 'teal')};
}
'& .json-markup-null': {
color: autoColor(theme, 'teal'),
},
& .json-markup-number {
color: ${autoColor(theme, 'blue', 'black')};
}
`,
};
});
'& .json-markup-number': {
color: autoColor(theme, 'blue', 'black'),
},
}),
}));
export type TProps = {
findMatchesIDs: Set<string> | TNil;

16
public/app/features/explore/TraceView/components/common/BreakableText.tsx
View File

@ -17,15 +17,13 @@ import * as React from 'react';
import { useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
BreakableText: css`
label: BreakableText;
display: inline-block;
white-space: pre;
`,
};
};
const getStyles = () => ({
BreakableText: css({
label: 'BreakableText',
display: 'inline-block',
whiteSpace: 'pre',
}),
});
const WORD_RX = /\W*\w+\W*/g;

28
public/app/features/explore/TraceView/components/common/CopyIcon.tsx
View File

@ -18,21 +18,19 @@ import { useState } from 'react';
import { Button, IconName, Tooltip, useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
CopyIcon: css`
background-color: transparent;
border: none;
color: inherit;
height: 100%;
overflow: hidden;
&:focus {
background-color: rgba(255, 255, 255, 0.25);
color: inherit;
}
`,
};
};
const getStyles = () => ({
CopyIcon: css({
backgroundColor: 'transparent',
border: 'none',
color: 'inherit',
height: '100%',
overflow: 'hidden',
'&:focus': {
backgroundCcolor: 'rgba(255, 255, 255, 0.25)',
color: 'inherit',
},
}),
});
type PropsType = {
className?: string;

64
public/app/features/explore/TraceView/components/common/LabeledList.tsx
View File

@ -23,37 +23,39 @@ import { autoColor } from '../Theme';
const getStyles = (divider: boolean) => (theme: GrafanaTheme2) => {
return {
LabeledList: css`
label: LabeledList;
list-style: none;
margin: 0;
padding: 0;
${divider &&
`
margin-right: -8px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
`}
`,
LabeledListItem: css`
label: LabeledListItem;
display: inline-block;
${divider &&
`
border-right: 1px solid ${autoColor(theme, '#ddd')};
padding: 0 8px;
`}
`,
LabeledListLabel: css`
label: LabeledListLabel;
color: ${theme.isLight ? '#999' : '#666'};
margin-right: 0.25rem;
`,
LabeledListValue: css`
label: LabeledListValue;
${!divider && `margin-right: 0.55rem;`}
`,
LabeledList: css({
label: 'LabeledList',
listStyle: 'none',
margin: 0,
padding: 0,
...(divider
? {
marginRight: '-8px',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-end',
}
: {}),
}),
LabeledListItem: css({
label: 'LabeledListItem',
display: 'inline-block',
...(divider
? {
borderRight: `1px solid ${autoColor(theme, '#ddd')}`,
padding: '0 8px',
}
: {}),
}),
LabeledListLabel: css({
label: 'LabeledListLabel',
color: theme.isLight ? '#999' : '#666',
marginRight: '0.25rem',
}),
LabeledListValue: css({
label: 'LabeledListValue',
marginRight: divider ? undefined : '0.55rem',
}),
};
};

8
public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx
View File

@ -19,10 +19,10 @@ import { Icon, useStyles2 } from '@grafana/ui';
export const getStyles = () => {
return {
NewWindowIconLarge: css`
label: NewWindowIconLarge;
font-size: 1.5em;
`,
NewWindowIconLarge: css({
label: 'NewWindowIconLarge',
fontSize: '1.5em',
}),
};
};

8
public/app/features/explore/TraceView/components/common/TraceName.tsx
View File

@ -25,10 +25,10 @@ import BreakableText from './BreakableText';
const getStyles = (theme: GrafanaTheme2) => {
return {
TraceName: css`
label: TraceName;
font-size: ${theme.typography.size.lg};
`,
TraceName: css({
label: 'TraceName',
fontSize: theme.typography.size.lg,
}),
};
};

18
public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
View File

@ -97,13 +97,13 @@ export const SpanBarSection = ({ options, onOptionsChange }: DataSourcePluginOpt
};
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
label: infoText;
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
row: css`
label: row;
align-items: baseline;
`,
infoText: css({
label: 'infoText',
paddingBottom: theme.spacing(2),
color: theme.colors.text.secondary,
}),
row: css({
label: 'row',
alignItems: 'baseline',
}),
});