From 1d244ae1ecc6fa8883739e51adc100129c9238a8 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:39:22 +0100 Subject: [PATCH] Chore: Rewrite TraceView css using object styles (#87621) --- .betterer.results | 248 +--------- .../features/explore/TraceView/TraceView.tsx | 16 +- .../TracePageHeader/Actions/ActionButton.tsx | 48 +- .../SearchBar/NextPrevResult.tsx | 39 +- .../SearchBar/TracePageSearchBar.tsx | 50 +-- .../SpanFilters/SpanFilters.tsx | 82 ++-- .../SpanGraph/CanvasSpanGraph.tsx | 14 +- .../TracePageHeader/SpanGraph/GraphTicks.tsx | 16 +- .../TracePageHeader/SpanGraph/Scrubber.tsx | 104 +++-- .../TracePageHeader/SpanGraph/TickLabels.tsx | 30 +- .../SpanGraph/ViewingLayer.tsx | 105 ++--- .../TracePageHeader/TracePageHeader.tsx | 54 +-- .../TraceTimelineViewer/SpanBarRow.tsx | 423 +++++++++--------- .../SpanDetail/AccordianKeyValues.tsx | 102 ++--- .../SpanDetail/AccordianLogs.tsx | 52 +-- .../SpanDetail/AccordianReferences.tsx | 170 ++++--- .../SpanDetail/AccordianText.tsx | 26 +- .../SpanDetail/KeyValuesTable.tsx | 82 ++-- .../SpanDetail/TextList.tsx | 40 +- .../TraceTimelineViewer/SpanDetail/index.tsx | 126 +++--- .../TraceTimelineViewer/SpanDetailRow.tsx | 67 ++- .../TraceTimelineViewer/SpanLinks.tsx | 46 +- .../TraceTimelineViewer/SpanTreeOffset.tsx | 84 ++-- .../components/TraceTimelineViewer/Ticks.tsx | 54 ++- .../TimelineHeaderRow/TimelineCollapser.tsx | 20 +- .../TimelineColumnResizer.tsx | 146 +++--- .../TimelineHeaderRow/TimelineHeaderRow.tsx | 50 +-- .../TimelineViewingLayer.tsx | 104 ++--- .../VirtualizedTraceView.tsx | 42 +- .../components/TraceTimelineViewer/index.tsx | 56 ++- .../components/common/BreakableText.tsx | 16 +- .../TraceView/components/common/CopyIcon.tsx | 28 +- .../components/common/LabeledList.tsx | 64 +-- .../components/common/NewWindowIcon.tsx | 8 +- .../TraceView/components/common/TraceName.tsx | 8 +- .../components/settings/SpanBarSettings.tsx | 18 +- 36 files changed, 1200 insertions(+), 1438 deletions(-) diff --git a/.betterer.results b/.betterer.results index 3877333a6ce..f83e79923d8 100644 --- a/.betterer.results +++ b/.betterer.results @@ -3863,13 +3863,9 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "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 ", "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 ", "0"] @@ -3882,69 +3878,24 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], [0, 0, 0, "No untranslated strings. Wrap text with ", "6"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "7"] ], "public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "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 ", "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 ", "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 ", "8"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "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 ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "8"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "6"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "7"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "8"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "9"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "14"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "15"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "16"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "17"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "1"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanFlameGraph.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "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 ", "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 ", "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 ", "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"], diff --git a/public/app/features/explore/TraceView/TraceView.tsx b/public/app/features/explore/TraceView/TraceView.tsx index 2e409d9d083..93a5a33d989 100644 --- a/public/app/features/explore/TraceView/TraceView.tsx +++ b/public/app/features/explore/TraceView/TraceView.tsx @@ -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 = { diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx index 545436eb14d..31b10fc96b1 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx index ebd2d107888..ee8d279ba19 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx @@ -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', + }), }; }; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx index d7fdb854d28..ee8a81024f7 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx @@ -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', + }), }; }; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx index efed2c92f06..e78d2584299 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx @@ -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), + }), +}); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx index d114bf03130..6173ac3534d 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx @@ -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%', + }), }; }); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx index c16b340f748..63c2f5d6d02 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/GraphTicks.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx index e1058694f62..736a5cf7745 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx index bc5c5525c42..57ff2391418 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/TickLabels.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx index eab96c7525e..e899b3faab9 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx @@ -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, }; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx index 033f891b9a7..52c95dedbba 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx @@ -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, diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx index cc864bd6ac8..4e1ae5f44b3 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx @@ -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%', + }), }; }); diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx index 4255ef39737..f41478005d4 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx @@ -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', + }), }; }; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx index ab2824286fb..e90cd941ca6 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx @@ -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), }), diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx index dfc7ac11f09..cf4d3a8235f 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx @@ -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[]; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx index c9c7bda92dd..7e331151c99 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index e8adfa4f64f..d6a3f1eca93 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -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', }), diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx index bd132e62f8a..f59b1fb4421 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/TextList.tsx @@ -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[]; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx index e42d646d5bf..d472a831470 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx @@ -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', diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx index d93c6cb0ef1..799e8cc739b 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetailRow.tsx @@ -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', + }), }; }); diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx index 724e0f3b895..ea0239f8df6 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanLinks.tsx @@ -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', + }), +}); diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx index 12b0c6b31e5..786edc7a183 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx index 53fd755b21d..c3de51f5076 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx index 092faa3c9fd..457c54f1feb 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx index d9d9f2c98ae..91b3365f695 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx index dbfc67f8ce6..91e8bf05b6b 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx @@ -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), + }), }; }; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx index 273c1123ecf..f7ec95ced7b 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx @@ -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', + }), }; }); diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx index 7061cf78357..1a15f6ace0d 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx index 8cdb5953884..0857ad6f588 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx @@ -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 | TNil; diff --git a/public/app/features/explore/TraceView/components/common/BreakableText.tsx b/public/app/features/explore/TraceView/components/common/BreakableText.tsx index 3d65aae87ff..6a26c8fe33e 100644 --- a/public/app/features/explore/TraceView/components/common/BreakableText.tsx +++ b/public/app/features/explore/TraceView/components/common/BreakableText.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/common/CopyIcon.tsx b/public/app/features/explore/TraceView/components/common/CopyIcon.tsx index 0f811f8226f..95bfdf9ed90 100644 --- a/public/app/features/explore/TraceView/components/common/CopyIcon.tsx +++ b/public/app/features/explore/TraceView/components/common/CopyIcon.tsx @@ -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; diff --git a/public/app/features/explore/TraceView/components/common/LabeledList.tsx b/public/app/features/explore/TraceView/components/common/LabeledList.tsx index 55e08dbf014..8b8156168de 100644 --- a/public/app/features/explore/TraceView/components/common/LabeledList.tsx +++ b/public/app/features/explore/TraceView/components/common/LabeledList.tsx @@ -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', + }), }; }; diff --git a/public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx b/public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx index ff5f1eb9dd6..5c059473af3 100644 --- a/public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx +++ b/public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx @@ -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', + }), }; }; diff --git a/public/app/features/explore/TraceView/components/common/TraceName.tsx b/public/app/features/explore/TraceView/components/common/TraceName.tsx index 600b67bcef1..128a297d7eb 100644 --- a/public/app/features/explore/TraceView/components/common/TraceName.tsx +++ b/public/app/features/explore/TraceView/components/common/TraceName.tsx @@ -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, + }), }; }; diff --git a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx index d54e2817fdb..a612dee380d 100644 --- a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx +++ b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx @@ -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', + }), });