Explore: Fix logs hover state so that it is visible and in dark mode & simply hover code (#30572)

packages/grafana-ui/src/components/Logs/LogDetails.tsx

@@ -16,8 +16,6 @@ import { Themeable } from '../../types/theme';
 import { withTheme } from '../../themes/index';
 import { getLogRowStyles } from './getLogRowStyles';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { selectThemeVariant } from '../../themes/selectThemeVariant';
-
 import { getAllFields } from './logParser';
 
 //Components
@@ -32,8 +30,7 @@ export interface Props extends Themeable {
   wrapLogMessage: boolean;
   className?: string;
   hasError?: boolean;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
+
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
@@ -43,21 +40,20 @@ export interface Props extends Themeable {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
   return {
-    hoverBackground: css`
-      label: hoverBackground;
-      background-color: ${bgColor};
-    `,
     logsRowLevelDetails: css`
       label: logs-row__level_details;
       &::after {
         top: -3px;
       }
     `,
-    logDetailsDefaultCursor: css`
+    logDetails: css`
       label: logDetailsDefaultCursor;
       cursor: default;
+
+      &:hover {
+        background-color: ${theme.colors.panelBg};
+      }
     `,
   };
 });
@@ -80,8 +76,6 @@ class UnThemedLogDetails extends PureComponent<Props> {
       getRows,
       showDuplicates,
       className,
-      onMouseEnter,
-      onMouseLeave,
       onClickShowDetectedField,
       onClickHideDetectedField,
       showDetectedFields,
@@ -98,11 +92,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
     const levelClassName = cx(!hasError && [style.logsRowLevel, styles.logsRowLevelDetails]);
 
     return (
-      <tr
-        className={cx(className, styles.logDetailsDefaultCursor)}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
+      <tr className={cx(className, styles.logDetails)}>
         {showDuplicates && <td />}
         <td className={levelClassName} aria-label="Log level" />
         <td colSpan={4}>

packages/grafana-ui/src/components/Logs/LogRow.tsx

@@ -22,10 +22,9 @@ import {
   RowContextOptions,
 } from './LogRowContextProvider';
 import { Themeable } from '../../types/theme';
-import { withTheme } from '../../themes/index';
+import { styleMixins, withTheme } from '../../themes/index';
 import { getLogRowStyles } from './getLogRowStyles';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { selectThemeVariant } from '../../themes/selectThemeVariant';
 
 //Components
 import { LogDetails } from './LogDetails';
@@ -58,11 +57,9 @@ interface Props extends Themeable {
 interface State {
   showContext: boolean;
   showDetails: boolean;
-  hasHoverBackground: boolean;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
   return {
     topVerticalAlign: css`
       label: topVerticalAlign;
@@ -70,9 +67,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-top: -${theme.spacing.xs};
       margin-left: -${theme.spacing.xxs};
     `,
-    hoverBackground: css`
-      label: hoverBackground;
-      background-color: ${bgColor};
+    detailsOpen: css`
+      &:hover {
+        background-color: ${styleMixins.hoverColor(theme.colors.panelBg, theme)};
+      }
     `,
     errorLogRow: css`
       label: erroredLogRow;
@@ -91,7 +89,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
   state: State = {
     showContext: false,
     showDetails: false,
-    hasHoverBackground: false,
   };
 
   toggleContext = () => {
@@ -102,26 +99,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
     });
   };
 
-  /**
-   * We are using onMouse events to change background of Log Details Table to hover-state-background when hovered over Log
-   * Row and vice versa, when context is not open. This can't be done with css because we use 2 separate table rows without common parent element.
-   */
-  addHoverBackground = () => {
-    if (!this.state.showContext) {
-      this.setState({
-        hasHoverBackground: true,
-      });
-    }
-  };
-
-  clearHoverBackground = () => {
-    if (!this.state.showContext) {
-      this.setState({
-        hasHoverBackground: false,
-      });
-    }
-  };
-
   toggleDetails = () => {
     if (this.props.allowDetails) {
       return;
@@ -163,12 +140,11 @@ class UnThemedLogRow extends PureComponent<Props, State> {
       theme,
       getFieldLinks,
     } = this.props;
-    const { showDetails, showContext, hasHoverBackground } = this.state;
+    const { showDetails, showContext } = this.state;
     const style = getLogRowStyles(theme, row.logLevel);
     const styles = getStyles(theme);
     const { errorMessage, hasError } = checkLogsError(row);
     const logRowBackground = cx(style.logsRow, {
-      [styles.hoverBackground]: hasHoverBackground,
       [styles.errorLogRow]: hasError,
     });
 
@@ -224,8 +200,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
         {this.state.showDetails && (
           <LogDetails
             className={logRowBackground}
-            onMouseEnter={this.addHoverBackground}
-            onMouseLeave={this.clearHoverBackground}
             showDuplicates={showDuplicates}
             getFieldLinks={getFieldLinks}
             onClickFilterLabel={onClickFilterLabel}

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

 import { css } from 'emotion';
 import { LogLevel } from '@grafana/data';
-
 import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant } from '../../themes/selectThemeVariant';
-import { stylesFactory } from '../../themes';
+import { styleMixins, stylesFactory } from '../../themes';
 
 export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => {
-  let logColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
-  const borderColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
-  const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark4 }, theme.type);
-  const hoverBgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
+  let logColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray2;
+  const hoverBgColor = styleMixins.hoverColor(theme.colors.panelBg, theme);
+
   const context = css`
     label: context;
     visibility: hidden;
@@ -70,6 +67,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       width: 100%;
       cursor: pointer;
       vertical-align: top;
+
       &:hover {
         .${context} {
           visibility: visible;
@@ -81,6 +79,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
           }
         }
       }
+
       td:last-child {
         width: 100%;
       }
@@ -145,7 +144,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
     //Log details specific CSS
     logDetailsContainer: css`
       label: logs-row-details-table;
-      border: 1px solid ${borderColor};
+      border: 1px solid ${theme.colors.border2};
       padding: 0 ${theme.spacing.sm} ${theme.spacing.sm};
       border-radius: 3px;
       margin: 20px 8px 20px 16px;
@@ -183,8 +182,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       position: relative;
       vertical-align: middle;
       cursor: default;
+
       &:hover {
-        background-color: ${bgColor};
+        background-color: ${hoverBgColor};
       }
     `,
   };