Chore: Rewrite grafana-flamegraph css using object styles (grafana#86816)

Author: kaydelaney

.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"]
     ],

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;

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;

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;
-  `,
-
-  tooltipTable: css`
-    title: tooltipTable;
-    max-width: 400px;
-  `,
+  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',
+    maxWidth: '400px',
+  }),
 });
 
 export default FlameGraphTooltip;