grafana/ui: convert sass to emotion (#52541)

* refactor: convert .elapsed-time

* refactor: elapsedTime styling not required

* refactor: logs-rows styling not defined, remove classname

* refactor: logs-meta-item__labels styling not defined, remove classname

* refactor: transfer .label-slider styling to its own element

* refactor: clean up .slider styling

* refactor: muted styling not defined, remove classname

* refactor: transfer .space-between styling to its own element + clean up

* refactor: remove icon

public/app/features/explore/LiveLogs.tsx

@@ -119,14 +119,14 @@ class LiveLogs extends PureComponent<Props, State> {
         <table className={styles.fullWidth}>
           <tbody
             onScroll={isPaused ? undefined : this.onScroll}
-            className={cx(['logs-rows', styles.logsRowsLive])}
+            className={styles.logsRowsLive}
             ref={this.scrollContainerRef}
           >
             {this.rowsToRender().map((row: LogRowModel) => {
               return (
                 <tr className={cx(logsRow, styles.logsRowFade)} key={row.uid}>
-                  <td className={cx(logsRowLocalTime)}>{dateTimeFormat(row.timeEpochMs, { timeZone })}</td>
-                  <td className={cx(logsRowMessage)}>{row.hasAnsi ? <LogMessageAnsi value={row.raw} /> : row.entry}</td>
+                  <td className={logsRowLocalTime}>{dateTimeFormat(row.timeEpochMs, { timeZone })}</td>
+                  <td className={logsRowMessage}>{row.hasAnsi ? <LogMessageAnsi value={row.raw} /> : row.entry}</td>
                 </tr>
               );
             })}

public/app/features/explore/LogsMetaRow.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { LogsDedupStrategy, LogsMetaItem, LogsMetaKind, LogRowModel } from '@grafana/data';
-import { Button, Tooltip, Icon, LogLabels } from '@grafana/ui';
+import { Button, Tooltip, LogLabels } from '@grafana/ui';
 import { MAX_CHARACTERS } from '@grafana/ui/src/components/Logs/LogRowMessage';
 
 import { MetaInfoText, MetaItemProps } from './MetaInfoText';
@@ -77,8 +77,7 @@ export const LogsMetaRow: React.FC<Props> = React.memo(
             placement="right"
           >
             <Button variant="secondary" size="sm" onClick={onEscapeNewlines}>
-              <span>{forceEscape ? 'Remove escaping' : 'Escape newlines'}&nbsp;</span>
-              <Icon name="exclamation-triangle" className="muted" size="sm" />
+              {forceEscape ? 'Remove escaping' : 'Escape newlines'}
             </Button>
           </Tooltip>
         ),
@@ -106,11 +105,7 @@ LogsMetaRow.displayName = 'LogsMetaRow';
 
 function renderMetaItem(value: any, kind: LogsMetaKind) {
   if (kind === LogsMetaKind.LabelsMap) {
-    return (
-      <span className="logs-meta-item__labels">
-        <LogLabels labels={value} />
-      </span>
-    );
+    return <LogLabels labels={value} />;
   } else if (kind === LogsMetaKind.Error) {
     return <span className="logs-meta-item__error">{value}</span>;
   }

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -34,39 +34,37 @@ export interface Props {
 const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
   const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
 
-  /* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
-  const cardWidth = '100% - 134px';
-  const sliderHeight = `${height - 180}px`;
   return {
     container: css`
       display: flex;
-      .label-slider {
-        font-size: ${theme.typography.size.sm};
-        &:last-of-type {
-          margin-top: ${theme.spacing.lg};
-        }
-        &:first-of-type {
-          font-weight: ${theme.typography.weight.semibold};
-          margin-bottom: ${theme.spacing.md};
-        }
+    `,
+    labelSlider: css`
+      font-size: ${theme.typography.size.sm};
+      &:last-of-type {
+        margin-top: ${theme.spacing.lg};
+      }
+      &:first-of-type {
+        font-weight: ${theme.typography.weight.semibold};
+        margin-bottom: ${theme.spacing.md};
       }
     `,
     containerContent: css`
-      width: calc(${cardWidth});
+      /* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
+      width: calc(100% - 134px);
     `,
     containerSlider: css`
       width: 129px;
       margin-right: ${theme.spacing.sm};
-      .slider {
-        bottom: 10px;
-        height: ${sliderHeight};
-        width: 129px;
-        padding: ${theme.spacing.sm} 0;
-      }
     `,
-    slider: css`
+    fixedSlider: css`
       position: fixed;
     `,
+    slider: css`
+      bottom: 10px;
+      height: ${height - 180}px;
+      width: 129px;
+      padding: ${theme.spacing.sm} 0;
+    `,
     selectors: css`
       display: flex;
       justify-content: space-between;
@@ -175,10 +173,10 @@ export function RichHistoryQueriesTab(props: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.containerSlider}>
-        <div className={styles.slider}>
-          <div className="label-slider">Filter history</div>
-          <div className="label-slider">{mapNumbertoTimeInSlider(richHistorySearchFilters.from)}</div>
-          <div className="slider">
+        <div className={styles.fixedSlider}>
+          <div className={styles.labelSlider}>Filter history</div>
+          <div className={styles.labelSlider}>{mapNumbertoTimeInSlider(richHistorySearchFilters.from)}</div>
+          <div className={styles.slider}>
             <RangeSlider
               tooltipAlwaysVisible={false}
               min={0}
@@ -192,7 +190,7 @@ export function RichHistoryQueriesTab(props: Props) {
               }}
             />
           </div>
-          <div className="label-slider">{mapNumbertoTimeInSlider(richHistorySearchFilters.to)}</div>
+          <div className={styles.labelSlider}>{mapNumbertoTimeInSlider(richHistorySearchFilters.to)}</div>
         </div>
       </div>
 

public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx

@@ -26,9 +26,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     container: css`
       font-size: ${theme.typography.size.sm};
-      .space-between {
-        margin-bottom: ${theme.spacing.lg};
-      }
+    `,
+    spaceBetween: css`
+      margin-bottom: ${theme.spacing.lg};
     `,
     input: css`
       max-width: 200px;
@@ -78,7 +78,6 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
         <Field
           label="History time span"
           description={`Select the period of time for which Grafana will save your query history. Up to ${MAX_HISTORY_ITEMS} entries will be stored.`}
-          className="space-between"
         >
           <div className={styles.input}>
             <Select value={selectedOption} options={retentionPeriodOptions} onChange={onChangeRetentionPeriod}></Select>
@@ -89,7 +88,10 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
           Grafana will keep entries up to {selectedOption?.label}.
         </Alert>
       )}
-      <InlineField label="Change the default active tab from “Query history” to “Starred”" className="space-between">
+      <InlineField
+        label="Change the default active tab from “Query history” to “Starred”"
+        className={styles.spaceBetween}
+      >
         <InlineSwitch
           id="explore-query-history-settings-default-active-tab"
           value={starredTabAsFirstTab}
@@ -97,7 +99,10 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
         />
       </InlineField>
       {supportedFeatures().onlyActiveDataSource && (
-        <InlineField label="Only show queries for data source currently active in Explore" className="space-between">
+        <InlineField
+          label="Only show queries for data source currently active in Explore"
+          className={styles.spaceBetween}
+        >
           <InlineSwitch
             id="explore-query-history-settings-data-source-behavior"
             value={activeDatasourceOnly}

public/app/features/explore/Time.tsx

@@ -9,7 +9,7 @@ export interface TimeProps {
 }
 
 export const Time: FC<TimeProps> = ({ timeInMs, className, humanize }) => {
-  return <span className={`elapsed-time ${className}`}>{formatTime(timeInMs, humanize)}</span>;
+  return <span className={className}>{formatTime(timeInMs, humanize)}</span>;
 };
 
 const formatTime = (timeInMs: number, humanize = false): string => {

public/sass/pages/_explore.scss

@@ -9,16 +9,6 @@
   margin-right: 4px;
 }
 
-// TODO: move to public/app/features/explore/Time.tsx
-.navbar .elapsed-time {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 48px;
-  text-align: center;
-  font-size: 11px;
-}
-
 .graph-legend {
   flex-wrap: wrap;
 }