From b7995ae18ab76dc2c93dbff314a289bf5bc2cb74 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Tue, 23 Apr 2024 23:28:37 +0100 Subject: [PATCH] Chore: Rewrite grafana-flamegraph css using object styles (#86816) --- .betterer.results | 40 ----- .../src/FlameGraph/FlameGraph.tsx | 53 +++---- .../src/FlameGraph/FlameGraphMetadata.tsx | 59 ++++--- .../src/FlameGraph/FlameGraphTooltip.tsx | 52 +++--- .../src/FlameGraphHeader.tsx | 150 +++++++++--------- .../TopTable/FlameGraphTopTableContainer.tsx | 21 ++- 6 files changed, 165 insertions(+), 210 deletions(-) diff --git a/.betterer.results b/.betterer.results index cdf32535173..d12c0a98415 100644 --- a/.betterer.results +++ b/.betterer.results @@ -454,46 +454,6 @@ exports[`better eslint`] = { "packages/grafana-data/test/__mocks__/pluginMocks.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-flamegraph/src/FlameGraph/FlameGraph.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"] - ], - "packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.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"] - ], - "packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.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"] - ], - "packages/grafana-flamegraph/src/FlameGraphHeader.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"] - ], - "packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], diff --git a/packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx b/packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx index 0a207cb94ea..5340bd9d122 100644 --- a/packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx +++ b/packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx @@ -185,33 +185,32 @@ const FlameGraph = ({ }; const getStyles = () => ({ - graph: css` - label: graph; - overflow: auto; - flex-grow: 1; - flex-basis: 50%; - `, - sandwichCanvasWrapper: css` - label: sandwichCanvasWrapper; - display: flex; - margin-bottom: ${PIXELS_PER_LEVEL / window.devicePixelRatio}px; - `, - sandwichMarker: css` - label: sandwichMarker; - writing-mode: vertical-lr; - transform: rotate(180deg); - overflow: hidden; - white-space: nowrap; - `, - - sandwichMarkerCalees: css` - label: sandwichMarkerCalees; - text-align: right; - `, - sandwichMarkerIcon: css` - label: sandwichMarkerIcon; - vertical-align: baseline; - `, + graph: css({ + label: 'graph', + overflow: 'auto', + flexGrow: 1, + flexBasis: '50%', + }), + sandwichCanvasWrapper: css({ + label: 'sandwichCanvasWrapper', + display: 'flex', + marginBottom: `${PIXELS_PER_LEVEL / window.devicePixelRatio}px`, + }), + sandwichMarker: css({ + label: 'sandwichMarker', + writingMode: 'vertical-lr', + transform: 'rotate(180deg)', + overflow: 'hidden', + whiteSpace: 'nowrap', + }), + sandwichMarkerCalees: css({ + label: 'sandwichMarkerCalees', + textAlign: 'right', + }), + sandwichMarkerIcon: css({ + label: 'sandwichMarkerIcon', + verticalAlign: 'baseline', + }), }); export default FlameGraph; diff --git a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx index 9a896f33a0d..d385b7dd148 100644 --- a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx +++ b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx @@ -89,36 +89,35 @@ const FlameGraphMetadata = React.memo( FlameGraphMetadata.displayName = 'FlameGraphMetadata'; const getStyles = (theme: GrafanaTheme2) => ({ - metadataPill: css` - label: metadataPill; - display: inline-flex; - align-items: center; - background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius(8)}; - padding: ${theme.spacing(0.5, 1)}; - font-size: ${theme.typography.bodySmall.fontSize}; - font-weight: ${theme.typography.fontWeightMedium}; - line-height: ${theme.typography.bodySmall.lineHeight}; - color: ${theme.colors.text.secondary}; - `, - - pillCloseButton: css` - label: pillCloseButton; - vertical-align: text-bottom; - margin: ${theme.spacing(0, 0.5)}; - `, - metadata: css` - margin: 8px 0; - text-align: center; - `, - metadataPillName: css` - label: metadataPillName; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-left: ${theme.spacing(0.5)}; - `, + metadataPill: css({ + label: 'metadataPill', + display: 'inline-flex', + alignItems: 'center', + background: theme.colors.background.secondary, + borderRadius: theme.shape.borderRadius(8), + padding: theme.spacing(0.5, 1), + fontSize: theme.typography.bodySmall.fontSize, + fontWeight: theme.typography.fontWeightMedium, + lineHeight: theme.typography.bodySmall.lineHeight, + color: theme.colors.text.secondary, + }), + pillCloseButton: css({ + label: 'pillCloseButton', + verticalAlign: 'text-bottom', + margin: theme.spacing(0, 0.5), + }), + metadata: css({ + margin: '8px 0', + textAlign: 'center', + }), + metadataPillName: css({ + label: 'metadataPillName', + maxWidth: '200px', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + marginLeft: theme.spacing(0.5), + }), }); export default FlameGraphMetadata; diff --git a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx index d2fe2866606..62f4a53343a 100644 --- a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx +++ b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx @@ -182,33 +182,33 @@ function getValueWithUnit(data: FlameGraphDataContainer, displayValue: DisplayVa } const getStyles = (theme: GrafanaTheme2) => ({ - tooltipContainer: css` - title: tooltipContainer; - overflow: hidden; - `, - tooltipContent: css` - title: tooltipContent; - font-size: ${theme.typography.bodySmall.fontSize}; - width: 100%; - `, - tooltipName: css` - title: tooltipName; - margin-top: 0; - word-break: break-all; - `, - lastParagraph: css` - title: lastParagraph; - margin-bottom: 0; - `, - name: css` - title: name; - margin-bottom: 10px; - `, + tooltipContainer: css({ + title: 'tooltipContainer', + overflow: 'hidden', + }), + tooltipContent: css({ + title: 'tooltipContent', + fontSize: theme.typography.bodySmall.fontSize, + width: '100%', + }), + tooltipName: css({ + title: 'tooltipName', + marginTop: 0, + wordBreak: 'break-all', + }), + lastParagraph: css({ + title: 'lastParagraph', + marginBottom: 0, + }), + name: css({ + title: 'name', + marginBottom: '10px', + }), - tooltipTable: css` - title: tooltipTable; - max-width: 400px; - `, + tooltipTable: css({ + title: 'tooltipTable', + maxWidth: '400px', + }), }); export default FlameGraphTooltip; diff --git a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx index 1e372a93660..20606e0637c 100644 --- a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx +++ b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx @@ -46,7 +46,7 @@ const FlameGraphHeader = ({ vertical, isDiffMode, }: Props) => { - const styles = useStyles2(getStyles, stickyHeader); + const styles = useStyles2(getStyles); const [localSearch, setLocalSearch] = useSearchInput(search, setSearch); const suffix = @@ -66,7 +66,7 @@ const FlameGraphHeader = ({ ) : null; return ( -
+
props.onChange(ColorScheme.PackageBased)} /> @@ -213,79 +213,77 @@ function useSearchInput( return [localSearchState, setLocalSearchState]; } -const getStyles = (theme: GrafanaTheme2, sticky?: boolean) => ({ - header: css` - label: header; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; - top: 0; - ${sticky - ? css` - z-index: ${theme.zIndex.navbarFixed}; - position: sticky; - padding-bottom: ${theme.spacing(1)}; - padding-top: ${theme.spacing(1)}; - background: ${theme.colors.background.primary}; - ` - : ''}; - `, - inputContainer: css` - label: inputContainer; - margin-right: 20px; - flex-grow: 1; - min-width: 150px; - max-width: 350px; - `, - rightContainer: css` - label: rightContainer; - display: flex; - align-items: flex-start; - flex-wrap: wrap; - `, - buttonSpacing: css` - label: buttonSpacing; - margin-right: ${theme.spacing(1)}; - `, - - resetButton: css` - label: resetButton; - display: flex; - margin-right: ${theme.spacing(2)}; - `, - resetButtonIconWrapper: css` - label: resetButtonIcon; - padding: 0 5px; - color: ${theme.colors.text.disabled}; - `, - colorDot: css` - label: colorDot; - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; - `, - colorDotByValue: css` - label: colorDotByValue; - background: ${byValueGradient}; - `, - colorDotByPackage: css` - label: colorDotByPackage; - background: ${byPackageGradient}; - `, - colorDotDiffDefault: css` - label: colorDotDiffDefault; - background: ${diffDefaultGradient}; - `, - colorDotDiffColorBlind: css` - label: colorDotDiffColorBlind; - background: ${diffColorBlindGradient}; - `, - extraElements: css` - label: extraElements; - margin-left: ${theme.spacing(1)}; - `, +const getStyles = (theme: GrafanaTheme2) => ({ + header: css({ + label: 'header', + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + width: '100%', + top: 0, + }), + stickyHeader: css({ + zIndex: theme.zIndex.navbarFixed, + position: 'sticky', + paddingBottom: theme.spacing(1), + paddingTop: theme.spacing(1), + background: theme.colors.background.primary, + }), + inputContainer: css({ + label: 'inputContainer', + marginRight: '20px', + flexGrow: 1, + minWidth: '150px', + maxWidth: '350px', + }), + rightContainer: css({ + label: 'rightContainer', + display: 'flex', + alignItems: 'flex-start', + flexWrap: 'wrap', + }), + buttonSpacing: css({ + label: 'buttonSpacing', + marginRight: theme.spacing(1), + }), + resetButton: css({ + label: 'resetButton', + display: 'flex', + marginRight: theme.spacing(2), + }), + resetButtonIconWrapper: css({ + label: 'resetButtonIcon', + padding: '0 5px', + color: theme.colors.text.disabled, + }), + colorDot: css({ + label: 'colorDot', + display: 'inline-block', + width: '10px', + height: '10px', + // eslint-disable-next-line @grafana/no-border-radius-literal + borderRadius: '50%', + }), + colorDotByValue: css({ + label: 'colorDotByValue', + background: byValueGradient, + }), + colorDotByPackage: css({ + label: 'colorDotByPackage', + background: byPackageGradient, + }), + colorDotDiffDefault: css({ + label: 'colorDotDiffDefault', + background: diffDefaultGradient, + }), + colorDotDiffColorBlind: css({ + label: 'colorDotDiffColorBlind', + background: diffColorBlindGradient, + }), + extraElements: css({ + label: 'extraElements', + marginLeft: theme.spacing(1), + }), }); export default FlameGraphHeader; diff --git a/packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx b/packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx index 936be013806..2630e7dcf9d 100644 --- a/packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx +++ b/packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx @@ -332,17 +332,16 @@ const getStyles = (theme: GrafanaTheme2) => { const getStylesActionCell = () => { return { - actionCellWrapper: css` - label: actionCellWrapper; - display: flex; - height: 24px; - `, - - actionCellButton: css` - label: actionCellButton; - margin-right: 0; - width: 24px; - `, + actionCellWrapper: css({ + label: 'actionCellWrapper', + display: 'flex', + height: '24px', + }), + actionCellButton: css({ + label: 'actionCellButton', + marginRight: 0, + width: '24px', + }), }; };