IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: use GrafanaTheme2 (LiveLogs component) (#37452)

Browse Source 
* Explore: use GrafanaTheme2

* Explore: add correct style values. Add theme.v1 to the styles that were uncertain

* Logs: add use of GrafanaTheme2 in varioius log components

* Styles: add some of the correct values recieved via feedback

* Add correct style values

* Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Update public/app/plugins/panel/dashlist/styles.ts

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Explore: fix failing tests

* Explore: add styling values from v2

* Fix small type error

* Replace v1 styles with v2 styles

* Remove forgotten v1 values

* Remove more v1 style values

* Apply correct style value to LogRowMessage

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
Olof Bourghardt 2021-08-20 14:53:03 +02:00 committed by GitHub
parent b3c4b20953
commit 5231660627
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 152 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Logs/LogDetails.test.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { LogDetails, Props } from './LogDetails';
import { LogRowModel, LogLevel, GrafanaTheme, MutableDataFrame, Field } from '@grafana/data';
import { LogRowModel, LogLevel, MutableDataFrame, Field, GrafanaTheme2 } from '@grafana/data';
import { mount } from 'enzyme';
import { LogDetailsRow } from './LogDetailsRow';
const setup = (propOverrides?: Partial<Props>, rowOverrides?: Partial<LogRowModel>) => {
const props: Props = {
theme: {} as GrafanaTheme,
theme: {} as GrafanaTheme2,
showDuplicates: false,
wrapLogMessage: false,
row: {

17
packages/grafana-ui/src/components/Logs/LogDetails.tsx
View File

@ -9,13 +9,12 @@ import {
getParser,
LinkModel,
LogRowModel,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data';
import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index';
import { Themeable2 } from '../../types/theme';
import { withTheme2 } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory';
import { getAllFields } from './logParser';
//Components
@ -23,7 +22,7 @@ import { LogDetailsRow } from './LogDetailsRow';
import { Tooltip } from '../Tooltip/Tooltip';
import { Icon } from '../Icon/Icon';
export interface Props extends Themeable {
export interface Props extends Themeable2 {
row: LogRowModel;
showDuplicates: boolean;
getRows: () => LogRowModel[];
@ -39,7 +38,7 @@ export interface Props extends Themeable {
onClickHideDetectedField?: (key: string) => void;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
logsRowLevelDetails: css`
label: logs-row__level_details;
@ -52,11 +51,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: default;
&:hover {
background-color: ${theme.colors.panelBg};
background-color: ${theme.colors.background.primary};
}
`,
};
});
};
class UnThemedLogDetails extends PureComponent<Props> {
getParser = memoizeOne(getParser);
@ -175,5 +174,5 @@ class UnThemedLogDetails extends PureComponent<Props> {
}
}
export const LogDetails = withTheme(UnThemedLogDetails);
export const LogDetails = withTheme2(UnThemedLogDetails);
LogDetails.displayName = 'LogDetails';

17
packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
View File

@ -1,18 +1,17 @@
import React, { PureComponent } from 'react';
import { css, cx } from '@emotion/css';
import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data';
import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index';
import { Themeable2 } from '../../types/theme';
import { withTheme2 } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory';
//Components
import { LogLabelStats } from './LogLabelStats';
import { IconButton } from '../IconButton/IconButton';
import { DataLinkButton } from '../DataLinks/DataLinkButton';
export interface Props extends Themeable {
export interface Props extends Themeable2 {
parsedValue: string;
parsedKey: string;
wrapLogMessage?: boolean;
@ -32,7 +31,7 @@ interface State {
fieldStats: LogLabelStatsModel[] | null;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
noHoverBackground: css`
label: noHoverBackground;
@ -49,14 +48,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
word-break: break-all;
`,
showingField: css`
color: ${theme.palette.blue95};
color: ${theme.colors.primary.text};
`,
wrapLine: css`
label: wrapLine;
white-space: pre-wrap;
`,
};
});
};
class UnThemedLogDetailsRow extends PureComponent<Props, State> {
state: State = {
@ -188,5 +187,5 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
}
}
export const LogDetailsRow = withTheme(UnThemedLogDetailsRow);
export const LogDetailsRow = withTheme2(UnThemedLogDetailsRow);
LogDetailsRow.displayName = 'LogDetailsRow';

23
packages/grafana-ui/src/components/Logs/LogRow.tsx
View File

@ -6,10 +6,10 @@ import {
LogsSortOrder,
TimeZone,
DataQueryResponse,
GrafanaTheme,
dateTimeFormat,
checkLogsError,
escapeUnescapedString,
GrafanaTheme2,
} from '@grafana/data';
import { Icon } from '../Icon/Icon';
import { Tooltip } from '../Tooltip/Tooltip';
@ -22,10 +22,9 @@ import {
LogRowContextProvider,
RowContextOptions,
} from './LogRowContextProvider';
import { Themeable } from '../../types/theme';
import { styleMixins, withTheme } from '../../themes/index';
import { Themeable2 } from '../../types/theme';
import { styleMixins, withTheme2 } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory';
//Components
import { LogDetails } from './LogDetails';
@ -33,7 +32,7 @@ import { LogRowMessageDetectedFields } from './LogRowMessageDetectedFields';
import { LogRowMessage } from './LogRowMessage';
import { LogLabels } from './LogLabels';
interface Props extends Themeable {
interface Props extends Themeable2 {
highlighterExpressions?: string[];
row: LogRowModel;
showDuplicates: boolean;
@ -62,25 +61,25 @@ interface State {
showDetails: boolean;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
topVerticalAlign: css`
label: topVerticalAlign;
vertical-align: top;
margin-top: -${theme.spacing.xs};
margin-left: -${theme.spacing.xxs};
margin-top: -${theme.spacing(0.5)};
margin-left: -${theme.spacing(0.25)};
`,
detailsOpen: css`
&:hover {
background-color: ${styleMixins.hoverColor(theme.colors.panelBg, theme)};
background-color: ${styleMixins.hoverColor(theme.colors.background.primary, theme)};
}
`,
errorLogRow: css`
label: erroredLogRow;
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
`,
};
});
};
/**
* Renders a log line.
*
@ -248,5 +247,5 @@ class UnThemedLogRow extends PureComponent<Props, State> {
}
}
export const LogRow = withTheme(UnThemedLogRow);
export const LogRow = withTheme2(UnThemedLogRow);
LogRow.displayName = 'LogRow';

17
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@ -2,16 +2,15 @@ import React, { PureComponent } from 'react';
import { isEqual } from 'lodash';
import tinycolor from 'tinycolor2';
import { css, cx } from '@emotion/css';
import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/data';
import { LogRowModel, findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data';
import memoizeOne from 'memoize-one';
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider';
import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index';
import { Themeable2 } from '../../types/theme';
import { withTheme2 } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
import { stylesFactory } from '../../themes/stylesFactory';
//Components
import { LogRowContext } from './LogRowContext';
@ -19,7 +18,7 @@ import { LogMessageAnsi } from './LogMessageAnsi';
export const MAX_CHARACTERS = 100000;
interface Props extends Themeable {
interface Props extends Themeable2 {
row: LogRowModel;
hasMoreContextRows?: HasMoreContextRows;
contextIsOpen: boolean;
@ -34,8 +33,8 @@ interface Props extends Themeable {
updateLimit?: () => void;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const outlineColor = tinycolor(theme.colors.dashboardBg).setAlpha(0.7).toRgbString();
const getStyles = (theme: GrafanaTheme2) => {
const outlineColor = tinycolor(theme.components.dashboard.background).setAlpha(0.7).toRgbString();
return {
positionRelative: css`
@ -56,7 +55,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
margin-left: 0px;
`,
};
});
};
function renderLogMessage(
hasAnsi: boolean,
@ -163,5 +162,5 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
}
}
export const LogRowMessage = withTheme(UnThemedLogRowMessage);
export const LogRowMessage = withTheme2(UnThemedLogRowMessage);
LogRowMessage.displayName = 'LogRowMessage';

8
packages/grafana-ui/src/components/Logs/LogRows.tsx
View File

@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
import memoizeOne from 'memoize-one';
import { TimeZone, LogsDedupStrategy, LogRowModel, Field, LinkModel, LogsSortOrder, sortLogRows } from '@grafana/data';
import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index';
import { Themeable2 } from '../../types/theme';
import { withTheme2 } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
//Components
@ -12,7 +12,7 @@ import { RowContextOptions } from './LogRowContextProvider';
export const PREVIEW_LIMIT = 100;
export interface Props extends Themeable {
export interface Props extends Themeable2 {
logRows?: LogRowModel[];
deduplicatedRows?: LogRowModel[];
dedupStrategy: LogsDedupStrategy;
@ -186,5 +186,5 @@ class UnThemedLogRows extends PureComponent<Props, State> {
}
}
export const LogRows = withTheme(UnThemedLogRows);
export const LogRows = withTheme2(UnThemedLogRows);
LogRows.displayName = 'LogsRows';

42
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

@ -1,10 +1,10 @@
import { css } from '@emotion/css';
import { GrafanaTheme, LogLevel } from '@grafana/data';
import { GrafanaTheme2, LogLevel } from '@grafana/data';
import { styleMixins, stylesFactory } from '../../themes';
export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => {
let logColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray2;
const hoverBgColor = styleMixins.hoverColor(theme.colors.panelBg, theme);
export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: LogLevel) => {
let logColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.gray2;
const hoverBgColor = styleMixins.hoverColor(theme.colors.background.primary, theme);
switch (logLevel) {
case LogLevel.crit:
@ -17,7 +17,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
break;
case LogLevel.warning:
case LogLevel.warn:
logColor = theme.palette.yellow;
logColor = theme.colors.warning.main;
break;
case LogLevel.info:
logColor = '#7eb26d';
@ -35,18 +35,18 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
label: logs-row__match-highlight;
background: inherit;
padding: inherit;
color: ${theme.palette.yellow};
background-color: rgba(${theme.palette.yellow}, 0.1);
color: ${theme.colors.warning.main};
background-color: rgba(${theme.colors.warning.main}, 0.1);
`,
logsRowMatchHighLightPreview: css`
label: logs-row__match-highlight--preview;
background-color: rgba(${theme.palette.yellow}, 0.2);
background-color: rgba(${theme.colors.warning.main}, 0.2);
border-bottom-style: dotted;
`,
logsRowsTable: css`
label: logs-rows;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
width: 100%;
`,
context: css`
@ -68,7 +68,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
z-index: 1;
text-decoration: underline;
&:hover {
color: ${theme.palette.yellow};
color: ${theme.colors.warning.main};
}
}
}
@ -78,9 +78,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
}
> td {
padding-right: ${theme.spacing.sm};
border-top: ${theme.border.width.sm} solid transparent;
border-bottom: ${theme.border.width.sm} solid transparent;
padding-right: ${theme.spacing(1)};
border-top: ${theme.v1.border.width.sm} solid transparent;
border-bottom: ${theme.v1.border.width.sm} solid transparent;
height: 100%;
}
@ -111,7 +111,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
}
`,
logIconError: css`
color: ${theme.palette.red};
color: ${theme.colors.warning.main};
`,
logsRowToggleDetails: css`
label: logs-row-toggle-details__level;
@ -137,8 +137,8 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
//Log details specific CSS
logDetailsContainer: css`
label: logs-row-details-table;
border: 1px solid ${theme.colors.border2};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm};
border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: 3px;
margin: 20px 8px 20px 16px;
cursor: default;
@ -154,7 +154,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
logsDetailsIcon: css`
label: logs-row-details__icon;
position: relative;
color: ${theme.palette.gray3};
color: ${theme.v1.palette.gray3};
padding-top: 6px;
padding-left: 6px;
`,
@ -162,13 +162,13 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
label: logs-row-details__label;
max-width: 30em;
min-width: 20em;
padding: 0 ${theme.spacing.sm};
padding: 0 ${theme.spacing(1)};
overflow-wrap: break-word;
`,
logDetailsHeading: css`
label: logs-row-details__heading;
font-weight: ${theme.typography.weight.bold};
padding: ${theme.spacing.sm} 0 ${theme.spacing.xs};
font-weight: ${theme.typography.fontWeightBold};
padding: ${theme.spacing(1)} 0 ${theme.spacing(0.5)};
`,
logDetailsValue: css`
label: logs-row-details__row;

20
packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
View File

@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
import { css, cx } from '@emotion/css';
import { VizLegendSeriesIcon } from './VizLegendSeriesIcon';
import { VizLegendItem } from './types';
import { useStyles } from '../../themes/ThemeContext';
import { useStyles2 } from '../../themes/ThemeContext';
import { styleMixins } from '../../themes';
import { GrafanaTheme, formattedValueToString } from '@grafana/data';
import { formattedValueToString, GrafanaTheme2 } from '@grafana/data';
export interface Props {
key?: React.Key;
@ -27,7 +27,7 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
className,
readonly,
}) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const onMouseEnter = useCallback(
(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@ -85,16 +85,16 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
LegendTableItem.displayName = 'LegendTableItem';
const getStyles = (theme: GrafanaTheme) => {
const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme);
const getStyles = (theme: GrafanaTheme2) => {
const rowHoverBg = styleMixins.hoverColor(theme.colors.background.primary, theme);
return {
row: css`
label: LegendRow;
font-size: ${theme.typography.size.sm};
border-bottom: 1px solid ${theme.colors.border1};
font-size: ${theme.v1.typography.size.sm};
border-bottom: 1px solid ${theme.colors.border.weak};
td {
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
padding: ${theme.spacing(0.25, 1)};
white-space: nowrap;
}
@ -108,7 +108,7 @@ const getStyles = (theme: GrafanaTheme) => {
`,
labelDisabled: css`
label: LegendLabelDisabled;
color: ${theme.colors.linkDisabled};
color: ${theme.colors.text.disabled};
`,
clickable: css`
label: LegendClickable;
@ -123,7 +123,7 @@ const getStyles = (theme: GrafanaTheme) => {
text-align: right;
`,
yAxisLabel: css`
color: ${theme.palette.gray2};
color: ${theme.colors.text.secondary};
`,
};
};

2
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -137,7 +137,7 @@ $divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-func-bg: ${theme.v1.colors.bg2};
$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.v1.colors.bg2, theme.v1)};
$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)};
$modal-backdrop-bg: ${theme.v1.colors.bg1};
$code-tag-bg: $gray-6;

28
packages/grafana-ui/src/themes/mixins.ts
View File

@ -2,36 +2,36 @@ import { CSSObject } from '@emotion/css';
import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
import tinycolor from 'tinycolor2';
export function cardChrome(theme: GrafanaTheme): string {
export function cardChrome(theme: GrafanaTheme2): string {
return `
background: ${theme.colors.bg2};
background: ${theme.colors.background.secondary};
&:hover {
background: ${hoverColor(theme.colors.bg2, theme)};
background: ${hoverColor(theme.colors.background.secondary, theme)};
}
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.borderRadius(2)};
`;
}
export function hoverColor(color: string, theme: GrafanaTheme): string {
export function hoverColor(color: string, theme: GrafanaTheme2): string {
return theme.isDark ? tinycolor(color).brighten(2).toString() : tinycolor(color).darken(2).toString();
}
export function listItem(theme: GrafanaTheme): string {
export function listItem(theme: GrafanaTheme2): string {
return `
background: ${theme.colors.bg2};
background: ${theme.colors.background.secondary};
&:hover {
background: ${hoverColor(theme.colors.bg2, theme)};
background: ${hoverColor(theme.colors.background.secondary, theme)};
}
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
box-shadow: ${theme.components.panel.boxShadow};
border-radius: ${theme.shape.borderRadius(2)};
`;
}
export function listItemSelected(theme: GrafanaTheme): string {
export function listItemSelected(theme: GrafanaTheme2): string {
return `
background: ${hoverColor(theme.colors.bg2, theme)};
color: ${theme.colors.textStrong};
background: ${hoverColor(theme.colors.background.secondary, theme)};
color: ${theme.colors.text.maxContrast};
`;
}

44
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@ -4,9 +4,9 @@ import { css, cx, keyframes } from '@emotion/css';
import { chain, cloneDeep, defaults, find, sortBy } from 'lodash';
import tinycolor from 'tinycolor2';
import { locationService, reportInteraction } from '@grafana/runtime';
import { Icon, IconButton, styleMixins, useStyles } from '@grafana/ui';
import { Icon, IconButton, styleMixins, useStyles2 } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import config from 'app/core/config';
import store from 'app/core/store';
@ -132,7 +132,7 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
dashboard.removePanel(panel);
};
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
return (
@ -230,20 +230,22 @@ const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, o
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
const pulsate = keyframes`
0% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};}
50% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${tinycolor(theme.colors.formFocusOutline)
0% {box-shadow: 0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main};}
50% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor(
theme.colors.primary.main
)
.darken(20)
.toHexString()};}
100% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};}
100% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${theme.colors.primary.main};}
`;
return {
// wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
wrapper: css`
height: 100%;
padding-top: ${theme.spacing.xs};
padding-top: ${theme.spacing(0.5)};
`,
callToAction: css`
overflow: hidden;
@ -253,10 +255,10 @@ const getStyles = (theme: GrafanaTheme) => {
animation: ${pulsate} 2s ease infinite;
`,
rowGap: css`
margin-left: ${theme.spacing.sm};
margin-left: ${theme.spacing(1)};
`,
columnGap: css`
margin-bottom: ${theme.spacing.sm};
margin-bottom: ${theme.spacing(1)};
`,
actionsRow: css`
display: flex;
@ -266,9 +268,9 @@ const getStyles = (theme: GrafanaTheme) => {
> div {
justify-self: center;
cursor: pointer;
background: ${theme.colors.bg2};
border-radius: ${theme.border.radius.sm};
color: ${theme.colors.text};
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)};
color: ${theme.colors.text.primary};
width: 100%;
display: flex;
flex-direction: column;
@ -277,7 +279,7 @@ const getStyles = (theme: GrafanaTheme) => {
text-align: center;
&:hover {
background: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
background: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)};
}
&:hover > #book-icon {
@ -288,7 +290,7 @@ const getStyles = (theme: GrafanaTheme) => {
actionsWrapper: css`
display: flex;
flex-direction: column;
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
padding: ${theme.spacing(0, 1, 1, 1)};
height: 100%;
`,
headerRow: css`
@ -297,22 +299,22 @@ const getStyles = (theme: GrafanaTheme) => {
height: 38px;
flex-shrink: 0;
width: 100%;
font-size: ${theme.typography.size.md};
font-weight: ${theme.typography.weight.semibold};
padding-left: ${theme.spacing.sm};
font-size: ${theme.typography.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
padding-left: ${theme.spacing(1)};
transition: background-color 0.1s ease-in-out;
cursor: move;
&:hover {
background: ${theme.colors.bg2};
background: ${theme.colors.background.secondary};
}
`,
backButton: css`
display: flex;
align-items: center;
cursor: pointer;
padding-left: ${theme.spacing.xs};
width: ${theme.spacing.xl};
padding-left: ${theme.spacing(0.5)};
width: ${theme.spacing(4)};
`,
noMargin: css`
margin: 0;

24
public/app/features/explore/LiveLogs.tsx
View File

@ -2,16 +2,16 @@ import React, { PureComponent } from 'react';
import { css, cx } from '@emotion/css';
import tinycolor from 'tinycolor2';
import { LogMessageAnsi, Themeable, withTheme, getLogRowStyles, Icon, Button } from '@grafana/ui';
import { GrafanaTheme, LogRowModel, TimeZone, dateTimeFormat } from '@grafana/data';
import { LogMessageAnsi, getLogRowStyles, Icon, Button, Themeable2, withTheme2 } from '@grafana/ui';
import { LogRowModel, TimeZone, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
import { ElapsedTime } from './ElapsedTime';
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
logsRowsLive: css`
label: logs-rows-live;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
display: flex;
flex-flow: column nowrap;
height: 60vh;
@ -23,11 +23,11 @@ const getStyles = (theme: GrafanaTheme) => ({
logsRowFade: css`
label: logs-row-fresh;
color: ${theme.colors.text};
background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()};
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
animation: fade 1s ease-out 1s 1 normal forwards;
@keyframes fade {
from {
background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()};
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
}
to {
background-color: transparent;
@ -35,20 +35,20 @@ const getStyles = (theme: GrafanaTheme) => ({
}
`,
logsRowsIndicator: css`
font-size: ${theme.typography.size.md};
padding-top: ${theme.spacing.sm};
font-size: ${theme.typography.h6.fontSize};
padding-top: ${theme.spacing(1)};
display: flex;
align-items: center;
`,
button: css`
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
fullWidth: css`
width: 100%;
`,
});
export interface Props extends Themeable {
export interface Props extends Themeable2 {
logRows?: LogRowModel[];
timeZone: TimeZone;
stopLive: () => void;
@ -163,4 +163,4 @@ class LiveLogs extends PureComponent<Props, State> {
}
}
export const LiveLogsWithTheme = withTheme(LiveLogs);
export const LiveLogsWithTheme = withTheme2(LiveLogs);

34
public/app/plugins/panel/annolist/AnnotationListItem.tsx
View File

@ -1,7 +1,7 @@
import React, { FC, MouseEvent } from 'react';
import { css, cx } from '@emotion/css';
import { AnnotationEvent, DateTimeInput, GrafanaTheme, PanelProps } from '@grafana/data';
import { styleMixins, Tooltip, useStyles } from '@grafana/ui';
import { AnnotationEvent, DateTimeInput, GrafanaTheme2, PanelProps } from '@grafana/data';
import { styleMixins, Tooltip, useStyles2 } from '@grafana/ui';
import { AnnoOptions } from './types';
import { AnnotationListItemTags } from './AnnotationListItemTags';
@ -21,7 +21,7 @@ export const AnnotationListItem: FC<Props> = ({
onAvatarClick,
onTagClick,
}) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const { showUser, showTags, showTime } = options;
const { text, login, email, avatarUrl, tags, time } = annotation;
const onItemClick = (e: MouseEvent) => {
@ -58,7 +58,7 @@ interface AvatarProps {
}
const Avatar: FC<AvatarProps> = ({ onClick, avatarUrl, login, email }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const onAvatarClick = (e: MouseEvent) => {
e.stopPropagation();
onClick();
@ -87,7 +87,7 @@ interface TimeStampProps {
}
const TimeStamp: FC<TimeStampProps> = ({ time, formatDate }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<span className={styles.time}>
@ -96,14 +96,14 @@ const TimeStamp: FC<TimeStampProps> = ({ time, formatDate }) => {
);
};
function getStyles(theme: GrafanaTheme) {
function getStyles(theme: GrafanaTheme2) {
return {
pointer: css`
cursor: pointer;
`,
item: css`
margin: ${theme.spacing.xs};
padding: ${theme.spacing.sm};
margin: ${theme.spacing(0.5)};
padding: ${theme.spacing(1)};
${styleMixins.listItem(theme)}// display: flex;
`,
title: css`
@ -113,11 +113,11 @@ function getStyles(theme: GrafanaTheme) {
display: flex;
.fa {
padding-top: ${theme.spacing.xs};
padding-top: ${theme.spacing(0.5)};
}
.fa-star {
color: ${theme.palette.orange};
color: ${theme.v1.palette.orange};
}
`,
login: css`
@ -125,19 +125,19 @@ function getStyles(theme: GrafanaTheme) {
flex: auto;
display: flex;
justify-content: flex-end;
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
`,
time: css`
margin-left: ${theme.spacing.sm};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textWeak};
margin-left: ${theme.spacing(1)};
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
avatar: css`
padding: ${theme.spacing.xs};
padding: ${theme.spacing(0.5)};
img {
border-radius: 50%;
width: ${theme.spacing.md};
height: ${theme.spacing.md};
width: ${theme.spacing(2)};
height: ${theme.spacing(2)};
}
`,
};

4
public/app/plugins/panel/dashlist/DashList.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { take } from 'lodash';
import { InterpolateFunction, PanelProps } from '@grafana/data';
import { CustomScrollbar, Icon, useStyles } from '@grafana/ui';
import { CustomScrollbar, Icon, useStyles2 } from '@grafana/ui';
import { getBackendSrv } from 'app/core/services/backend_srv';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
@ -123,7 +123,7 @@ export function DashList(props: PanelProps<DashListOptions>) {
},
];
const css = useStyles(getStyles);
const css = useStyles2(getStyles);
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
{dashboardGroups.map(

22
public/app/plugins/panel/dashlist/styles.ts
View File

@ -1,16 +1,16 @@
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { styleMixins, stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { styleMixins } from '@grafana/ui';
export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
export const getStyles = (theme: GrafanaTheme2) => ({
dashlistSectionHeader: css`
margin-bottom: ${theme.spacing.d};
color: ${theme.colors.textWeak};
margin-bottom: ${theme.spacing(2)};
color: ${theme.colors.secondary.text};
`,
dashlistSection: css`
margin-bottom: ${theme.spacing.d};
margin-bottom: ${theme.spacing(2)};
padding-top: 3px;
`,
@ -25,15 +25,15 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
dashlistStar: css`
display: flex;
align-items: center;
color: ${theme.colors.textWeak};
color: ${theme.colors.secondary.text};
cursor: pointer;
z-index: 1;
`,
dashlistFolder: css`
color: ${theme.colors.textWeak};
font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.sm};
color: ${theme.colors.secondary.text};
font-size: ${theme.typography.bodySmall.fontSize};
line-height: ${theme.typography.body.lineHeight};
`,
dashlistTitle: css`
@ -55,4 +55,4 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
position: relative;
list-style: none;
`,
}));
});