Tempo: Clean up older styles (#81247)

* Clean up uber styles

* Use theme spacing

.betterer.results

@@ -3443,9 +3443,6 @@ exports[`better eslint`] = {
       [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/TraceTimelineViewer/TimelineRow.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "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"],
@@ -3509,25 +3506,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/TraceView/components/types/trace.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/explore/TraceView/components/uberUtilityStyles.ts: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"]
-    ],
     "public/app/features/explore/TraceView/createSpanLink.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]

public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/index.tsx

@@ -12,18 +12,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import cx from 'classnames';
+import { css } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import * as React from 'react';
 
 import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../../index';
 import { TraceSpan, Trace } from '../../types';
-import { ubPb2, ubPx2, ubRelative } from '../../uberUtilityStyles';
 
 import CanvasSpanGraph from './CanvasSpanGraph';
 import TickLabels from './TickLabels';
 import ViewingLayer from './ViewingLayer';
 
+const getStyles = () => {
+  return {
+    container: css({
+      padding: '0 0.5rem 0.5rem 0.5rem',
+    }),
+    canvasContainer: css({
+      position: 'relative',
+    }),
+  };
+};
+
 const DEFAULT_HEIGHT = 60;
 export const TIMELINE_TICK_INTERVAL = 4;
 
@@ -62,15 +72,17 @@ export default class SpanGraph extends React.PureComponent<SpanGraphProps> {
 
   render() {
     const { height, trace, viewRange, updateNextViewRangeTime, updateViewRangeTime } = this.props;
+    const styles = getStyles();
+
     if (!trace) {
       return <div />;
     }
 
     const items = memoizedGetitems(trace);
     return (
-      <div className={cx(ubPb2, ubPx2)}>
+      <div className={styles.container}>
         <TickLabels numTicks={TIMELINE_TICK_INTERVAL} duration={trace.duration} />
-        <div className={ubRelative}>
+        <div className={styles.canvasContainer}>
           <CanvasSpanGraph valueWidth={trace.duration} items={items} />
           <ViewingLayer
             viewRange={viewRange}

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBar.tsx

@@ -215,7 +215,7 @@ function SpanBar({
             placement="top"
             content={
               <div>
-                A segment on the <em>critical path</em> of the overall trace/request/workflow.
+                A segment on the <em>critical path</em> of the overall trace / request / workflow.
               </div>
             }
           >

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

@@ -21,13 +21,17 @@ import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
-import { uAlignIcon, uTxEllipsis } from '../../uberUtilityStyles';
 
 import * as markers from './AccordianKeyValues.markers';
 import KeyValuesTable from './KeyValuesTable';
 
+import { alignIcon } from '.';
+
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
+    container: css({
+      textOverflow: 'ellipsis',
+    }),
     header: css`
       label: header;
       cursor: pointer;
@@ -125,7 +129,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
   const { className, data, highContrast, interactive, isOpen, label, linksGetter, onToggle } = props;
   const isEmpty = !Array.isArray(data) || !data.length;
   const styles = useStyles2(getStyles);
-  const iconCls = cx(uAlignIcon, { [styles.emptyIcon]: isEmpty });
+  const iconCls = cx(alignIcon, { [styles.emptyIcon]: isEmpty });
   let arrow: React.ReactNode | null = null;
   let headerProps: {} | null = null;
   if (interactive) {
@@ -142,7 +146,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
   }
 
   return (
-    <div className={cx(className, uTxEllipsis)}>
+    <div className={cx(className, styles.container)}>
       <div
         className={cx(styles.header, {
           [styles.headerEmpty]: isEmpty,

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

@@ -22,11 +22,12 @@ import { Icon, useStyles2 } from '@grafana/ui';
 import { autoColor } from '../../Theme';
 import { TNil } from '../../types';
 import { TraceLog, TraceKeyValuePair, TraceLink } from '../../types/trace';
-import { uAlignIcon, ubMb1 } from '../../uberUtilityStyles';
 import { formatDuration } from '../utils';
 
 import AccordianKeyValues from './AccordianKeyValues';
 
+import { alignIcon } from '.';
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     AccordianLogs: css`
@@ -55,6 +56,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: AccordianLogsFooter;
       color: ${autoColor(theme, '#999')};
     `,
+    AccordianKeyValuesItem: css({
+      marginBottom: theme.spacing(0.5),
+    }),
   };
 };
 
@@ -76,7 +80,7 @@ export default function AccordianLogs(props: AccordianLogsProps) {
   let headerProps: {} | null = null;
   if (interactive) {
     arrow = isOpen ? (
-      <Icon name={'angle-down'} className={uAlignIcon} />
+      <Icon name={'angle-down'} className={alignIcon} />
     ) : (
       <Icon name={'angle-right'} className="u-align-icon" />
     );
@@ -100,7 +104,7 @@ export default function AccordianLogs(props: AccordianLogsProps) {
             <AccordianKeyValues
               // `i` is necessary in the key because timestamps can repeat
               key={`${log.timestamp}-${i}`}
-              className={i < logs.length - 1 ? ubMb1 : null}
+              className={i < logs.length - 1 ? styles.AccordianKeyValuesItem : null}
               data={log.fields || []}
               highContrast
               interactive={interactive}

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

@@ -20,11 +20,12 @@ import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { TraceSpanReference } from '../../types/trace';
-import { uAlignIcon, ubMb1 } from '../../uberUtilityStyles';
 import ReferenceLink from '../../url/ReferenceLink';
 
 import AccordianKeyValues from './AccordianKeyValues';
 
+import { alignIcon } from '.';
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     AccordianReferenceItem: css`
@@ -59,6 +60,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: AccordianReferencesFooter;
       color: ${autoColor(theme, '#999')};
     `,
+    AccordianKeyValuesItem: css({
+      marginBottom: theme.spacing(0.5),
+    }),
     ReferencesList: css`
       background: #fff;
       border: 1px solid #ddd;
@@ -166,7 +170,7 @@ export function References(props: ReferenceItemProps) {
           {!!reference.tags?.length && (
             <div className={styles.AccordianKeyValues}>
               <AccordianKeyValues
-                className={i < data.length - 1 ? ubMb1 : null}
+                className={i < data.length - 1 ? styles.AccordianKeyValuesItem : null}
                 data={reference.tags || []}
                 highContrast
                 interactive={interactive}
@@ -198,9 +202,9 @@ const AccordianReferences = ({
   let headerProps: {} | null = null;
   if (interactive) {
     arrow = isOpen ? (
-      <Icon name={'angle-down'} className={uAlignIcon} />
+      <Icon name={'angle-down'} className={alignIcon} />
     ) : (
-      <Icon name={'angle-right'} className={uAlignIcon} />
+      <Icon name={'angle-right'} className={alignIcon} />
     );
     HeaderComponent = 'a';
     headerProps = {

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

@@ -21,11 +21,12 @@ import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { TNil } from '../../types';
-import { uAlignIcon } from '../../uberUtilityStyles';
 
 import { getStyles as getAccordianKeyValuesStyles } from './AccordianKeyValues';
 import TextList from './TextList';
 
+import { alignIcon } from '.';
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     header: css`
@@ -70,7 +71,7 @@ export default function AccordianText(props: AccordianTextProps) {
   } = props;
   const isEmpty = !Array.isArray(data) || !data.length;
   const accordianKeyValuesStyles = useStyles2(getAccordianKeyValuesStyles);
-  const iconCls = cx(uAlignIcon, { [accordianKeyValuesStyles.emptyIcon]: isEmpty });
+  const iconCls = cx(alignIcon, { [accordianKeyValuesStyles.emptyIcon]: isEmpty });
   let arrow: React.ReactNode | null = null;
   let headerProps: {} | null = null;
   if (interactive) {

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

@@ -22,7 +22,6 @@ import { Icon, useStyles2 } from '@grafana/ui';
 import { autoColor } from '../../Theme';
 import CopyIcon from '../../common/CopyIcon';
 import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
-import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';
 
 import jsonMarkup from './jsonMarkup';
 
@@ -38,6 +37,9 @@ export const getStyles = (theme: GrafanaTheme2) => {
       max-height: 450px;
       overflow: auto;
     `,
+    table: css({
+      width: '100%',
+    }),
     body: css`
       label: body;
       vertical-align: baseline;
@@ -70,6 +72,9 @@ export const getStyles = (theme: GrafanaTheme2) => {
       vertical-align: middle;
       font-weight: bold;
     `,
+    jsonTable: css({
+      display: 'inline-block',
+    }),
   };
 };
 
@@ -109,13 +114,13 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
   const styles = useStyles2(getStyles);
   return (
     <div className={cx(styles.KeyValueTable)} data-testid="KeyValueTable">
-      <table className={uWidth100}>
+      <table className={styles.table}>
         <tbody className={styles.body}>
           {data.map((row, i) => {
             const markup = {
               __html: jsonMarkup(parseIfComplexJson(row.value)),
             };
-            const jsonTable = <div className={ubInlineBlock} dangerouslySetInnerHTML={markup} />;
+            const jsonTable = <div className={styles.jsonTable} dangerouslySetInnerHTML={markup} />;
             const links = linksGetter ? linksGetter(data, i) : null;
             let valueMarkup;
             if (links && links.length) {

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

@@ -32,7 +32,6 @@ import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STAT
 import { SpanLinkFunc, TNil } from '../../types';
 import { SpanLinkDef, SpanLinkType } from '../../types/links';
 import { TraceKeyValuePair, TraceLink, TraceLog, TraceSpan, TraceSpanReference } from '../../types/trace';
-import { uAlignIcon, ubM0, ubMb1, ubMy1, ubTxRightAlign } from '../../uberUtilityStyles';
 import { formatDuration } from '../utils';
 
 import AccordianKeyValues from './AccordianKeyValues';
@@ -54,6 +53,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     listWrapper: css`
       overflow: hidden;
     `,
+    list: css({
+      textAlign: 'right',
+    }),
+    operationName: css({
+      margin: 0,
+    }),
     debugInfo: css`
       label: debugInfo;
       display: block;
@@ -100,6 +105,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: AccordianWarningsLabel;
       color: ${autoColor(theme, '#d36c08')};
     `,
+    AccordianKeyValuesItem: css({
+      marginBottom: theme.spacing(0.5),
+    }),
     Textarea: css`
       word-break: break-all;
       white-space: pre;
@@ -110,6 +118,10 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
+export const alignIcon = css({
+  margin: '-0.2rem 0.25rem 0 0',
+});
+
 export type TraceFlameGraphs = {
   [spanID: string]: DataFrame;
 };
@@ -310,14 +322,14 @@ export default function SpanDetail(props: SpanDetailProps) {
   return (
     <div data-testid="span-detail-component">
       <div className={styles.header}>
-        <h2 className={cx(ubM0)}>{operationName}</h2>
+        <h2 className={styles.operationName}>{operationName}</h2>
         <div className={styles.listWrapper}>
-          <LabeledList className={ubTxRightAlign} divider={true} items={overviewItems} />
+          <LabeledList className={styles.list} divider={true} items={overviewItems} />
         </div>
       </div>
       <span style={{ marginRight: '10px' }}>{logLinkButton}</span>
       {profileLinkButton}
-      <Divider className={ubMy1} type={'horizontal'} />
+      <Divider type={'horizontal'} />
       <div>
         <div>
           <AccordianKeyValues
@@ -329,7 +341,7 @@ export default function SpanDetail(props: SpanDetailProps) {
           />
           {process.tags && (
             <AccordianKeyValues
-              className={ubMb1}
+              className={styles.AccordianKeyValuesItem}
               data={process.tags}
               label="Resource Attributes"
               linksGetter={linksGetter}
@@ -428,7 +440,7 @@ export default function SpanDetail(props: SpanDetailProps) {
               }
             }}
           >
-            <Icon name={'link'} className={cx(uAlignIcon, styles.LinkIcon)}></Icon>
+            <Icon name={'link'} className={cx(alignIcon, styles.LinkIcon)}></Icon>
           </a>
           <span className={styles.debugLabel} data-label="SpanID:" /> {spanID}
         </small>

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

@@ -16,12 +16,10 @@ import { css } from '@emotion/css';
 import cx from 'classnames';
 import * as React from 'react';
 
-import { stylesFactory } from '@grafana/ui';
-
 import { TNil } from '../../types';
 import DraggableManager, { DraggableBounds, DraggingUpdate } from '../../utils/DraggableManager';
 
-export const getStyles = stylesFactory(() => {
+export const getStyles = () => {
   return {
     TimelineColumnResizer: css`
       left: 0;
@@ -95,7 +93,7 @@ export const getStyles = stylesFactory(() => {
       }
     `,
   };
-});
+};
 
 export type TimelineColumnResizerProps = {
   min: number;

public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx

@@ -13,14 +13,12 @@
 // limitations under the License.
 
 import { css } from '@emotion/css';
-import cx from 'classnames';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
-import { ubFlex, ubPx2 } from '../../uberUtilityStyles';
 import Ticks from '../Ticks';
 import TimelineRow from '../TimelineRow';
 import { TUpdateViewRangeTimeFunction, ViewRangeTime, ViewRangeTimeUpdate } from '../types';
@@ -52,6 +50,9 @@ const getStyles = (theme: GrafanaTheme2) => {
     TimelineHeaderWrapper: css`
       label: TimelineHeaderWrapper;
       align-items: center;
+      display: flex;
+      padding-left: ${theme.spacing(1)};
+      padding-right: ${theme.spacing(1)};
     `,
   };
 };
@@ -90,7 +91,7 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
   const styles = useStyles2(getStyles);
   return (
     <TimelineRow className={styles.TimelineHeaderRow} data-testid="TimelineHeaderRow">
-      <TimelineRow.Cell className={cx(ubFlex, ubPx2, styles.TimelineHeaderWrapper)} width={nameColumnWidth}>
+      <TimelineRow.Cell className={styles.TimelineHeaderWrapper} width={nameColumnWidth}>
         <h4 className={styles.TimelineHeaderRowTitle}>Service &amp; Operation</h4>
         <TimelineCollapser
           onCollapseAll={onCollapseAll}

public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineRow.tsx

@@ -18,15 +18,16 @@ import * as React from 'react';
 
 import { useStyles2 } from '@grafana/ui';
 
-import { ubRelative } from '../uberUtilityStyles';
-
 const getStyles = () => {
   return {
-    flexRow: css`
+    row: css({
-      display: flex;
+      display: 'flex',
-      flex: 0 1 auto;
+      flex: '0 1 auto',
-      flex-direction: row;
+      flexDirection: 'row',
-    `,
+    }),
+    rowCell: css({
+      position: 'relative',
+    }),
   };
 };
 
@@ -46,7 +47,7 @@ export default function TimelineRow(props: TTimelineRowProps) {
   const { children, className = '', ...rest } = props;
   const styles = useStyles2(getStyles);
   return (
-    <div className={cx(styles.flexRow, className)} {...rest}>
+    <div className={cx(styles.row, className)} {...rest}>
       {children}
     </div>
   );
@@ -60,8 +61,9 @@ export function TimelineRowCell(props: TimelineRowCellProps) {
   const { children, className = '', width, style, ...rest } = props;
   const widthPercent = `${width * 100}%`;
   const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent };
+  const styles = useStyles2(getStyles);
   return (
-    <div className={cx(ubRelative, className)} style={mergedStyle} data-testid="TimelineRowCell" {...rest}>
+    <div className={cx(styles.rowCell, className)} style={mergedStyle} data-testid="TimelineRowCell" {...rest}>
       {children}
     </div>
   );

public/app/features/explore/TraceView/components/common/Divider.tsx

@@ -26,7 +26,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: block;
       height: 1px;
       width: 100%;
-      margin: 24px 0;
+      margin-top: ${theme.spacing(2)};
+      margin-bottom: ${theme.spacing(0.5)};
       clear: both;
       vertical-align: middle;
       position: relative;

public/app/features/explore/TraceView/components/uberUtilityStyles.ts

@@ -1,73 +0,0 @@
-import { css } from '@emotion/css';
-
-export const ubRelative = css`
-  position: relative;
-`;
-
-export const ubMb1 = css`
-  margin-bottom: 0.25rem;
-`;
-
-export const ubMy1 = css`
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-`;
-
-export const ubM0 = css`
-  margin: 0;
-`;
-
-export const ubPx2 = css`
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-`;
-
-export const ubPb2 = css`
-  padding-bottom: 0.5rem;
-`;
-
-export const ubFlex = css`
-  display: flex;
-`;
-
-export const ubItemsCenter = css`
-  align-items: center;
-`;
-
-export const ubItemsStart = css`
-  align-items: start;
-`;
-
-export const ubFlexAuto = css`
-  flex: 1 1 auto;
-  min-width: 0; /* 1 */
-  min-height: 0; /* 1 */
-`;
-
-export const ubTxRightAlign = css`
-  text-align: right;
-`;
-
-export const ubInlineBlock = css`
-  display: inline-block;
-`;
-
-export const uAlignIcon = css`
-  margin: -0.2rem 0.25rem 0 0;
-`;
-
-export const uTxEllipsis = css`
-  text-overflow: ellipsis;
-`;
-
-export const uWidth100 = css`
-  width: 100%;
-`;
-
-export const uTxMuted = css`
-  color: #aaa;
-`;
-
-export const ubJustifyEnd = css`
-  justify-content: flex-end;
-`;