Skip to content

N
nexpie-grafana-theme
Commit f003232a by Torkel Ödegaard Committed by GitHub
Options

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

parent c5279bba
Showing with 22 additions and 58 deletions
packages/grafana-ui/src/components/Logs/LogDetails.tsx
...@@ -16,8 +16,6 @@ import { Themeable } from '../../types/theme'; ...@@ -16,8 +16,6 @@ import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index'; import { withTheme } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles'; import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory'; import { stylesFactory } from '../../themes/stylesFactory';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { getAllFields } from './logParser'; import { getAllFields } from './logParser';
//Components //Components
...@@ -32,8 +30,7 @@ export interface Props extends Themeable { ...@@ -32,8 +30,7 @@ export interface Props extends Themeable {
wrapLogMessage: boolean; wrapLogMessage: boolean;
className?: string; className?: string;
hasError?: boolean; hasError?: boolean;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
onClickFilterLabel?: (key: string, value: string) => void; onClickFilterLabel?: (key: string, value: string) => void;
onClickFilterOutLabel?: (key: string, value: string) => void; onClickFilterOutLabel?: (key: string, value: string) => void;
getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>; getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
...@@ -43,21 +40,20 @@ export interface Props extends Themeable { ...@@ -43,21 +40,20 @@ export interface Props extends Themeable {
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
return { return {
hoverBackground: css`
label: hoverBackground;
background-color: ${bgColor};
`,
logsRowLevelDetails: css` logsRowLevelDetails: css`
label: logs-row__level_details; label: logs-row__level_details;
&::after { &::after {
top: -3px; top: -3px;
} }
`, `,
logDetailsDefaultCursor: css` logDetails: css`
label: logDetailsDefaultCursor; label: logDetailsDefaultCursor;
cursor: default; cursor: default;
&:hover {
background-color: ${theme.colors.panelBg};
}
`, `,
}; };
}); });
...@@ -80,8 +76,6 @@ class UnThemedLogDetails extends PureComponent<Props> { ...@@ -80,8 +76,6 @@ class UnThemedLogDetails extends PureComponent<Props> {
getRows, getRows,
showDuplicates, showDuplicates,
className, className,
onMouseEnter,
onMouseLeave,
onClickShowDetectedField, onClickShowDetectedField,
onClickHideDetectedField, onClickHideDetectedField,
showDetectedFields, showDetectedFields,
...@@ -98,11 +92,7 @@ class UnThemedLogDetails extends PureComponent<Props> { ...@@ -98,11 +92,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
const levelClassName = cx(!hasError && [style.logsRowLevel, styles.logsRowLevelDetails]); const levelClassName = cx(!hasError && [style.logsRowLevel, styles.logsRowLevelDetails]);
return ( return (
<tr <tr className={cx(className, styles.logDetails)}>
className={cx(className, styles.logDetailsDefaultCursor)}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{showDuplicates && <td />} {showDuplicates && <td />}
<td className={levelClassName} aria-label="Log level" /> <td className={levelClassName} aria-label="Log level" />
<td colSpan={4}> <td colSpan={4}>
......
packages/grafana-ui/src/components/Logs/LogRow.tsx
...@@ -22,10 +22,9 @@ import { ...@@ -22,10 +22,9 @@ import {
RowContextOptions, RowContextOptions,
} from './LogRowContextProvider'; } from './LogRowContextProvider';
import { Themeable } from '../../types/theme'; import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index'; import { styleMixins, withTheme } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles'; import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory'; import { stylesFactory } from '../../themes/stylesFactory';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
//Components //Components
import { LogDetails } from './LogDetails'; import { LogDetails } from './LogDetails';
...@@ -58,11 +57,9 @@ interface Props extends Themeable { ...@@ -58,11 +57,9 @@ interface Props extends Themeable {
interface State { interface State {
showContext: boolean; showContext: boolean;
showDetails: boolean; showDetails: boolean;
hasHoverBackground: boolean;
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
return { return {
topVerticalAlign: css` topVerticalAlign: css`
label: topVerticalAlign; label: topVerticalAlign;
...@@ -70,9 +67,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -70,9 +67,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
margin-top: -${theme.spacing.xs}; margin-top: -${theme.spacing.xs};
margin-left: -${theme.spacing.xxs}; margin-left: -${theme.spacing.xxs};
`, `,
hoverBackground: css` detailsOpen: css`
label: hoverBackground; &:hover {
background-color: ${bgColor}; background-color: ${styleMixins.hoverColor(theme.colors.panelBg, theme)};
}
`, `,
errorLogRow: css` errorLogRow: css`
label: erroredLogRow; label: erroredLogRow;
...@@ -91,7 +89,6 @@ class UnThemedLogRow extends PureComponent<Props, State> { ...@@ -91,7 +89,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
state: State = { state: State = {
showContext: false, showContext: false,
showDetails: false, showDetails: false,
hasHoverBackground: false,
}; };
toggleContext = () => { toggleContext = () => {
...@@ -102,26 +99,6 @@ class UnThemedLogRow extends PureComponent<Props, State> { ...@@ -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 = () => { toggleDetails = () => {
if (this.props.allowDetails) { if (this.props.allowDetails) {
return; return;
...@@ -163,12 +140,11 @@ class UnThemedLogRow extends PureComponent<Props, State> { ...@@ -163,12 +140,11 @@ class UnThemedLogRow extends PureComponent<Props, State> {
theme, theme,
getFieldLinks, getFieldLinks,
} = this.props; } = this.props;
const { showDetails, showContext, hasHoverBackground } = this.state; const { showDetails, showContext } = this.state;
const style = getLogRowStyles(theme, row.logLevel); const style = getLogRowStyles(theme, row.logLevel);
const styles = getStyles(theme); const styles = getStyles(theme);
const { errorMessage, hasError } = checkLogsError(row); const { errorMessage, hasError } = checkLogsError(row);
const logRowBackground = cx(style.logsRow, { const logRowBackground = cx(style.logsRow, {
[styles.hoverBackground]: hasHoverBackground,
[styles.errorLogRow]: hasError, [styles.errorLogRow]: hasError,
}); });
...@@ -224,8 +200,6 @@ class UnThemedLogRow extends PureComponent<Props, State> { ...@@ -224,8 +200,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
{this.state.showDetails && ( {this.state.showDetails && (
<LogDetails <LogDetails
className={logRowBackground} className={logRowBackground}
onMouseEnter={this.addHoverBackground}
onMouseLeave={this.clearHoverBackground}
showDuplicates={showDuplicates} showDuplicates={showDuplicates}
getFieldLinks={getFieldLinks} getFieldLinks={getFieldLinks}
onClickFilterLabel={onClickFilterLabel} onClickFilterLabel={onClickFilterLabel}
......
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
import { css } from 'emotion'; import { css } from 'emotion';
import { LogLevel } from '@grafana/data'; import { LogLevel } from '@grafana/data';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant'; import { styleMixins, stylesFactory } from '../../themes';
import { stylesFactory } from '../../themes';
export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => { export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => {
let logColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type); let logColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray2;
const borderColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type); const hoverBgColor = styleMixins.hoverColor(theme.colors.panelBg, theme);
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);
const context = css` const context = css`
label: context; label: context;
visibility: hidden; visibility: hidden;
...@@ -70,6 +67,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo ...@@ -70,6 +67,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
&:hover { &:hover {
.${context} { .${context} {
visibility: visible; visibility: visible;
...@@ -81,6 +79,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo ...@@ -81,6 +79,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
} }
} }
} }
td:last-child { td:last-child {
width: 100%; width: 100%;
} }
...@@ -145,7 +144,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo ...@@ -145,7 +144,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
//Log details specific CSS //Log details specific CSS
logDetailsContainer: css` logDetailsContainer: css`
label: logs-row-details-table; label: logs-row-details-table;
border: 1px solid ${borderColor}; border: 1px solid ${theme.colors.border2};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm}; padding: 0 ${theme.spacing.sm} ${theme.spacing.sm};
border-radius: 3px; border-radius: 3px;
margin: 20px 8px 20px 16px; margin: 20px 8px 20px 16px;
...@@ -183,8 +182,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo ...@@ -183,8 +182,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
cursor: default; cursor: default;
&:hover { &:hover {
background-color: ${bgColor}; background-color: ${hoverBgColor};
} }
`, `,
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment