IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrate usage of v1 themes to v2 (#57617)

Browse Source
This commit is contained in:
kay delaney 2022-10-26 13:28:12 +01:00 committed by GitHub
parent 77437f2c89
commit 05ceff5188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 189 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Gauge/Gauge.test.tsx
View File

@ -1,9 +1,7 @@
import { render } from '@testing-library/react';
import React from 'react';
import { ThresholdsMode, FieldConfig, FieldColorModeId } from '@grafana/data';
import { getTheme } from '../../themes';
import { ThresholdsMode, FieldConfig, FieldColorModeId, createTheme } from '@grafana/data';
import { Gauge, Props } from './Gauge';
@ -33,7 +31,7 @@ const props: Props = {
text: '25',
numeric: 25,
},
theme: getTheme(),
theme: createTheme({ colors: { mode: 'dark' } }),
};
describe('Gauge', () => {

10
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -8,15 +8,16 @@ import {
ThresholdsMode,
GAUGE_DEFAULT_MAXIMUM,
GAUGE_DEFAULT_MINIMUM,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable } from '../../types';
import { calculateFontSize } from '../../utils/measureText';
import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils';
export interface Props extends Themeable {
export interface Props {
height: number;
field: FieldConfig;
showThresholdMarkers: boolean;
@ -26,6 +27,7 @@ export interface Props extends Themeable {
text?: VizTextDisplayOptions;
onClick?: React.MouseEventHandler<HTMLElement>;
className?: string;
theme: GrafanaTheme | GrafanaTheme2;
}
export class Gauge extends PureComponent<Props> {
@ -54,7 +56,7 @@ export class Gauge extends PureComponent<Props> {
const autoProps = calculateGaugeAutoProps(width, height, value.title);
const dimension = Math.min(width, autoProps.gaugeHeight);
const backgroundColor = theme.colors.bg2;
const backgroundColor = 'v1' in theme ? theme.colors.background.secondary : theme.colors.bg2;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;
@ -120,7 +122,7 @@ export class Gauge extends PureComponent<Props> {
formatter: () => {
return text;
},
font: { size: fontSize, family: theme.typography.fontFamily.sansSerif },
font: { size: fontSize, family: theme.typography.fontFamily },
},
show: true,
},

14
packages/grafana-ui/src/components/Table/Filter.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
import { Field, GrafanaTheme } from '@grafana/data';
import { Field, GrafanaTheme2 } from '@grafana/data';
import { Popover } from '..';
import { stylesFactory, useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { Icon } from '../Icon/Icon';
import { FilterPopup } from './FilterPopup';
@ -19,7 +19,7 @@ interface Props {
export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
const ref = useRef<HTMLButtonElement>(null);
const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]);
const onShowPopover = useCallback(() => setPopoverVisible(true), [setPopoverVisible]);
const onClosePopover = useCallback(() => setPopoverVisible(false), [setPopoverVisible]);
@ -47,13 +47,13 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
filterIconEnabled: css`
label: filterIconEnabled;
color: ${theme.colors.textBlue};
color: ${theme.colors.primary.text};
`,
filterIconDisabled: css`
label: filterIconDisabled;
color: ${theme.colors.textFaint};
color: ${theme.colors.text.disabled};
`,
}));
});

12
public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
View File

@ -1,16 +1,16 @@
import { css } from '@emotion/css';
import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { Button, InlineField, InlineFieldRow, useStyles } from '@grafana/ui';
import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function LokiSearchSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
// Default to the trace to logs datasource if configured and loki search was enabled
// but only if jsonData.lokiSearch hasn't been set
@ -65,11 +65,11 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
label: infoText;
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
row: css`

4
public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
View File

@ -2,14 +2,14 @@ import { css } from '@emotion/css';
import React from 'react';
import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { InlineField, InlineFieldRow, InlineSwitch, useStyles } from '@grafana/ui';
import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function SearchSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={styles.container}>

12
public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
View File

@ -1,16 +1,16 @@
import { css } from '@emotion/css';
import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { Button, InlineField, InlineFieldRow, useStyles } from '@grafana/ui';
import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={css({ width: '100%' })}>
@ -59,11 +59,11 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
infoText: css`
label: infoText;
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.text.secondary};
`,
row: css`

32
public/app/plugins/panel/alertlist/AlertList.tsx
View File

@ -3,9 +3,9 @@ import { sortBy } from 'lodash';
import React, { useState } from 'react';
import { useAsync } from 'react-use';
import { dateMath, dateTime, GrafanaTheme, PanelProps } from '@grafana/data';
import { dateMath, dateTime, GrafanaTheme2, PanelProps } from '@grafana/data';
import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
import { Card, CustomScrollbar, Icon, stylesFactory, useStyles } from '@grafana/ui';
import { Card, CustomScrollbar, Icon, useStyles2 } from '@grafana/ui';
import alertDef from 'app/features/alerting/state/alertDef';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { AlertRuleDTO, AnnotationItemDTO } from 'app/types';
@ -134,7 +134,7 @@ export function AlertList(props: PanelProps<AlertListOptions>) {
props.options.sortOrder,
]);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
@ -211,10 +211,10 @@ function getStateFilter(stateFilter: Record<string, boolean>) {
.map(([key, _]) => key);
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
cardContainer: css`
padding: ${theme.spacing.xs} 0 ${theme.spacing.xxs} 0;
line-height: ${theme.typography.lineHeight.md};
padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
line-height: ${theme.typography.body.lineHeight};
margin-bottom: 0px;
`,
container: css`
@ -232,26 +232,26 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
align-items: center;
width: 100%;
height: 100%;
background: ${theme.colors.bg2};
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.md};
margin-bottom: ${theme.spacing.xs};
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-radius: ${theme.shape.borderRadius(2)};
margin-bottom: ${theme.spacing(0.5)};
`,
alertRuleItemIcon: css`
display: flex;
justify-content: center;
align-items: center;
width: ${theme.spacing.xl};
padding: 0 ${theme.spacing.xs} 0 ${theme.spacing.xxs};
width: ${theme.spacing(4)};
padding: 0 ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)};
margin-right: 0px;
`,
alertRuleItemText: css`
font-weight: ${theme.typography.weight.bold};
font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.typography.size.sm};
margin: 0;
`,
alertRuleItemTime: css`
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
font-weight: normal;
white-space: nowrap;
`,
@ -269,6 +269,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
height: 100%;
`,
alertIcon: css`
margin-right: ${theme.spacing.xs};
margin-right: ${theme.spacing(0.5)};
`,
}));
});

32
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@ -215,8 +215,8 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
export const getStyles = (theme: GrafanaTheme2) => ({
cardContainer: css`
padding: ${theme.v1.spacing.xs} 0 ${theme.v1.spacing.xxs} 0;
line-height: ${theme.v1.typography.lineHeight.md};
padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
line-height: ${theme.typography.body.lineHeight};
margin-bottom: 0px;
`,
container: css`
@ -234,34 +234,34 @@ export const getStyles = (theme: GrafanaTheme2) => ({
align-items: center;
width: 100%;
height: 100%;
background: ${theme.v1.colors.bg2};
padding: ${theme.v1.spacing.xs} ${theme.v1.spacing.sm};
border-radius: ${theme.v1.border.radius.md};
margin-bottom: ${theme.v1.spacing.xs};
background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-radius: ${theme.shape.borderRadius(2)};
margin-bottom: ${theme.spacing(0.5)};
& > * {
margin-right: ${theme.v1.spacing.sm};
margin-right: ${theme.spacing(1)};
}
`,
alertName: css`
font-size: ${theme.v1.typography.size.md};
font-weight: ${theme.v1.typography.weight.bold};
font-size: ${theme.typography.h6.fontSize};
font-weight: ${theme.typography.fontWeightBold};
`,
alertLabels: css`
> * {
margin-right: ${theme.v1.spacing.xs};
margin-right: ${theme.spacing(0.5)};
}
`,
alertDuration: css`
font-size: ${theme.v1.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
`,
alertRuleItemText: css`
font-weight: ${theme.v1.typography.weight.bold};
font-size: ${theme.v1.typography.size.sm};
font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.typography.bodySmall.fontSize};
margin: 0;
`,
alertRuleItemTime: css`
color: ${theme.v1.colors.textWeak};
color: ${theme.colors.text.secondary};
font-weight: normal;
white-space: nowrap;
`,
@ -279,7 +279,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
height: 100%;
`,
alertIcon: css`
margin-right: ${theme.v1.spacing.xs};
margin-right: ${theme.spacing(0.5)};
`,
instanceDetails: css`
min-width: 1px;
@ -288,6 +288,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
text-overflow: ellipsis;
`,
customGroupDetails: css`
margin-bottom: ${theme.v1.spacing.xs};
margin-bottom: ${theme.spacing(0.5)};
`,
});

2
public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
View File

@ -79,7 +79,7 @@ const getStateTagStyles = (theme: GrafanaTheme2) => ({
display: inline-block;
color: white;
border-radius: ${theme.shape.borderRadius()};
font-size: ${theme.v1.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
text-transform: capitalize;
line-height: 1.2;
flex-shrink: 0;

10
public/app/plugins/panel/annolist/AnnoListPanel.tsx
View File

@ -9,7 +9,7 @@ import {
AppEvents,
dateTime,
DurationUnit,
GrafanaTheme,
GrafanaTheme2,
locationUtil,
PanelProps,
} from '@grafana/data';
@ -37,7 +37,7 @@ interface State {
queryTags: string[];
}
export class AnnoListPanel extends PureComponent<Props, State> {
style = getStyles(config.theme);
style = getStyles(config.theme2);
subs = new Subscription();
tagListRef = React.createRef<HTMLUListElement>();
@ -290,7 +290,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
noneFound: css`
display: flex;
align-items: center;
@ -300,9 +300,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`,
filter: css({
display: 'flex',
padding: `0px ${theme.spacing.xs}`,
padding: `0px ${theme.spacing(0.5)}`,
b: {
paddingRight: theme.spacing.sm,
paddingRight: theme.spacing(1),
},
}),
tagList: css({

2
public/app/plugins/panel/canvas/InlineEdit.tsx
View File

@ -103,7 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
inlineEditorContainer: css`
display: flex;
flex-direction: column;
background: ${theme.v1.colors.panelBg};
background: ${theme.components.panel.background};
border: 1px solid ${theme.colors.border.strong};
box-shadow: 5px 5px 20px -5px #000000;
z-index: 1000;

2
public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
View File

@ -32,7 +32,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
const globalCSS = getGlobalStyles(theme);
const styles = useStyles2(getStyles);
const selectedBgColor = theme.v1.colors.formInputBorderActive;
const selectedBgColor = theme.colors.primary.border;
const { settings } = item;
const selection = useMemo(
() => (settings?.selected ? settings.selected.map((v) => v?.getName()) : []),

8
public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx
View File

@ -106,13 +106,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
align-items: center;
flex-grow: 1;
overflow: hidden;
margin-right: ${theme.v1.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
layerName: css`
font-weight: ${theme.v1.typography.weight.semibold};
color: ${theme.v1.colors.textBlue};
font-weight: ${theme.typography.fontWeightMedium};
color: ${theme.colors.primary.text};
cursor: pointer;
overflow: hidden;
margin-left: ${theme.v1.spacing.xs};
margin-left: ${theme.spacing(0.5)};
`,
});

14
public/app/plugins/panel/canvas/globalStyles.ts
View File

@ -58,7 +58,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
content: '';
}
& ~ .rc-tree-treenode {
border-left: 2px solid ${theme.v1.colors.formInputBorder};
border-left: 2px solid ${theme.components.input.borderColor};
}
}
&.drop-target {
@ -88,17 +88,17 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
flex-grow: 1;
display: flex;
border: 1px solid ${theme.v1.colors.formInputBorder};
border-radius: ${theme.v1.border.radius.sm};
background: ${theme.v1.colors.bg2};
min-height: ${theme.v1.spacing.formInputHeight}px;
border: 1px solid ${theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius(1)};
background: ${theme.colors.background.secondary};
min-height: ${theme.spacing.gridSize * 4}px;
&:hover {
border: 1px solid ${theme.v1.colors.formInputBorderHover};
border: 1px solid ${theme.components.input.borderHover};
}
&.rc-tree-node-selected {
border: 1px solid ${theme.v1.colors.formInputBorderActive};
border: 1px solid ${theme.colors.primary.border};
opacity: 1;
}
}

2
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@ -28,7 +28,7 @@ export class GaugePanel extends PureComponent<PanelProps<PanelOptions>> {
text={options.text}
showThresholdLabels={options.showThresholdLabels}
showThresholdMarkers={options.showThresholdMarkers}
theme={config.theme}
theme={config.theme2}
onClick={openMenu}
className={targetClassName}
/>

10
public/app/plugins/panel/geomap/components/DebugOverlay.tsx
View File

@ -5,7 +5,7 @@ import { transform } from 'ol/proj';
import React, { PureComponent } from 'react';
import tinycolor from 'tinycolor2';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors/src';
import { stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config';
@ -20,7 +20,7 @@ interface State {
}
export class DebugOverlay extends PureComponent<Props, State> {
style = getStyles(config.theme);
style = getStyles(config.theme2);
constructor(props: Props) {
super(props);
@ -64,10 +64,10 @@ export class DebugOverlay extends PureComponent<Props, State> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
infoWrap: css`
color: ${theme.colors.text};
background: ${tinycolor(theme.colors.panelBg).setAlpha(0.7).toString()};
color: ${theme.colors.text.primary};
background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()};
border-radius: 2px;
padding: 8px;
`,

34
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
View File

@ -114,53 +114,53 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
}
const getStyles = stylesFactory(() => {
const { theme } = config;
const theme = config.theme2;
return {
container: css`
display: flex;
flex-direction: column;
height: 100%;
// background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat;
// background: url(public/img/getting_started_bg_${theme.colors.mode}.svg) no-repeat;
background-size: cover;
padding: ${theme.spacing.xl} ${theme.spacing.md} 0;
padding: ${theme.spacing(4)} ${theme.spacing(2)} 0;
`,
content: css`
label: content;
display: flex;
justify-content: center;
@media only screen and (max-width: ${theme.breakpoints.xxl}) {
margin-left: ${theme.spacing.lg};
${theme.breakpoints.down('xxl')} {
margin-left: ${theme.spacing(3)};
justify-content: flex-start;
}
`,
header: css`
label: header;
margin-bottom: ${theme.spacing.lg};
margin-bottom: ${theme.spacing(3)};
display: flex;
flex-direction: column;
@media only screen and (min-width: ${theme.breakpoints.lg}) {
${theme.breakpoints.down('lg')} {
flex-direction: row;
}
`,
headerLogo: css`
height: 58px;
padding-right: ${theme.spacing.md};
padding-right: ${theme.spacing(2)};
display: none;
@media only screen and (min-width: ${theme.breakpoints.md}) {
${theme.breakpoints.up('md')} {
display: block;
}
`,
heading: css`
label: heading;
margin-right: ${theme.spacing.lg};
margin-bottom: ${theme.spacing.lg};
margin-right: ${theme.spacing(3)};
margin-bottom: ${theme.spacing(3)};
flex-grow: 1;
display: flex;
@media only screen and (min-width: ${theme.breakpoints.md}) {
${theme.breakpoints.up('md')} {
margin-bottom: 0;
}
`,
@ -173,14 +173,14 @@ const getStyles = stylesFactory(() => {
previous: css`
left: 10px;
@media only screen and (max-width: ${theme.breakpoints.md}) {
${theme.breakpoints.down('md')} {
left: 0;
}
`,
forward: css`
right: 10px;
@media only screen and (max-width: ${theme.breakpoints.md}) {
${theme.breakpoints.down('md')} {
right: 0;
}
`,
@ -189,8 +189,8 @@ const getStyles = stylesFactory(() => {
justify-content: flex-end;
cursor: pointer;
text-decoration: underline;
margin-right: ${theme.spacing.md};
margin-bottom: ${theme.spacing.sm};
margin-right: ${theme.spacing(2)};
margin-bottom: ${theme.spacing(1)};
`,
loading: css`
display: flex;
@ -199,7 +199,7 @@ const getStyles = stylesFactory(() => {
height: 100%;
`,
loadingText: css`
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
};
});

28
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import React, { useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Icon, stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
import { Card } from '../types';
@ -12,9 +12,9 @@ interface Props {
card: Card;
}
export const DocsCard: FC<Props> = ({ card }) => {
const theme = useTheme();
const styles = getStyles(theme, card.done);
export const DocsCard = ({ card }: Props) => {
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
return (
<div className={styles.card}>
@ -23,7 +23,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4 className={styles.title}>{card.title}</h4>
<div>
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" />
<Icon className={iconStyles} name={card.icon} size="xxl" />
</div>
</a>
</div>
@ -39,34 +39,34 @@ export const DocsCard: FC<Props> = ({ card }) => {
);
};
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
card: css`
${cardStyle(theme, complete)}
min-width: 230px;
@media only screen and (max-width: ${theme.breakpoints.md}) {
${theme.breakpoints.down('md')} {
min-width: 192px;
}
`,
heading: css`
text-transform: uppercase;
color: ${complete ? theme.palette.blue95 : '#FFB357'};
margin-bottom: ${theme.spacing.md};
color: ${complete ? theme.v1.palette.blue95 : '#FFB357'};
margin-bottom: ${theme.spacing(2)};
`,
title: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
url: css`
display: inline-block;
`,
learnUrl: css`
border-top: 1px solid ${theme.colors.border1};
border-top: 1px solid ${theme.colors.border.weak};
position: absolute;
bottom: 0;
padding: 8px 16px;
width: 100%;
`,
};
});
};

21
public/app/plugins/panel/gettingstarted/components/Step.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { Card, SetupStep, TutorialCardType } from '../types';
@ -14,8 +14,7 @@ interface Props {
}
export const Step: FC<Props> = ({ step }) => {
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
return (
<div className={styles.setup}>
@ -36,7 +35,7 @@ export const Step: FC<Props> = ({ step }) => {
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
setup: css`
display: flex;
@ -46,15 +45,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
width: 172px;
margin-right: 5%;
@media only screen and (max-width: ${theme.breakpoints.xxl}) {
margin-right: ${theme.spacing.xl};
${theme.breakpoints.down('xxl')} {
margin-right: ${theme.spacing(4)};
}
@media only screen and (max-width: ${theme.breakpoints.sm}) {
${theme.breakpoints.down('sm')} {
display: none;
}
`,
title: css`
color: ${theme.palette.blue95};
color: ${theme.v1.palette.blue95};
`,
cards: css`
overflow-x: scroll;
@ -63,9 +62,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex;
justify-content: center;
@media only screen and (max-width: ${theme.breakpoints.xxl}) {
${theme.breakpoints.down('xxl')} {
justify-content: flex-start;
}
`,
};
});
};

30
public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { FC, MouseEvent } from 'react';
import React, { FC, MouseEvent, useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Icon, stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles2 } from '@grafana/ui';
import store from 'app/core/store';
import { TutorialCardType } from '../types';
@ -14,8 +14,8 @@ interface Props {
}
export const TutorialCard: FC<Props> = ({ card }) => {
const theme = useTheme();
const styles = getStyles(theme, card.done);
const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
return (
<a
@ -30,7 +30,7 @@ export const TutorialCard: FC<Props> = ({ card }) => {
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4 className={styles.cardTitle}>{card.title}</h4>
<div className={styles.info}>{card.info}</div>
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" />
<Icon className={iconStyles} name={card.icon} size="xxl" />
</div>
</a>
);
@ -44,39 +44,39 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
}
};
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
card: css`
${cardStyle(theme, complete)}
width: 460px;
min-width: 460px;
@media only screen and (max-width: ${theme.breakpoints.xl}) {
${theme.breakpoints.down('xl')} {
min-width: 368px;
}
@media only screen and (max-width: ${theme.breakpoints.lg}) {
${theme.breakpoints.down('lg')} {
min-width: 272px;
}
`,
type: css`
color: ${theme.colors.textBlue};
color: ${theme.colors.primary.text};
text-transform: uppercase;
`,
heading: css`
text-transform: uppercase;
color: ${theme.colors.textBlue};
margin-bottom: ${theme.spacing.sm};
color: ${theme.colors.primary.text};
margin-bottom: ${theme.spacing(1)};
`,
cardTitle: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
info: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
status: css`
display: flex;
justify-content: flex-end;
`,
};
});
};

31
public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
View File

@ -1,9 +1,8 @@
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
const completeGradient = 'linear-gradient(to right, #5182CC 0%, #245BAF 100%)';
const darkThemeGradients = complete ? completeGradient : 'linear-gradient(to right, #f05a28 0%, #fbca0a 100%)';
const lightThemeGradients = complete ? completeGradient : 'linear-gradient(to right, #FBCA0A 0%, #F05A28 100%)';
@ -11,16 +10,16 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean)
const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients;
return `
background-color: ${theme.colors.bg2};
margin-right: ${theme.spacing.xl};
border: 1px solid ${theme.colors.border1};
border-bottom-left-radius: ${theme.border.radius.md};
border-bottom-right-radius: ${theme.border.radius.md};
background-color: ${theme.colors.background.secondary};
margin-right: ${theme.spacing(4)};
border: 1px solid ${theme.colors.border.weak};
border-bottom-left-radius: ${theme.shape.borderRadius(2)};
border-bottom-right-radius: ${theme.shape.borderRadius(2)};
position: relative;
max-height: 230px;
@media only screen and (max-width: ${theme.breakpoints.xxl}) {
margin-right: ${theme.spacing.md};
${theme.breakpoints.down('xxl')} {
margin-right: ${theme.spacing(2)};
}
&::before {
display: block;
@ -33,17 +32,15 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean)
background-image: ${borderGradient};
}
`;
});
};
export const iconStyle = stylesFactory(
(theme: GrafanaTheme, complete: boolean) => css`
color: ${complete ? theme.palette.blue95 : theme.colors.textWeak};
export const iconStyle = (theme: GrafanaTheme2, complete: boolean) => css`
color: ${complete ? theme.v1.palette.blue95 : theme.colors.text.secondary};
@media only screen and (max-width: ${theme.breakpoints.sm}) {
${theme.breakpoints.down('sm')} {
display: none;
}
`
);
`;
export const cardContent = css`
padding: 16px;

2
public/app/plugins/panel/graph/data_processor.ts
View File

@ -80,7 +80,7 @@ export class DataProcessor {
const series = new TimeSeries({
datapoints: datapoints || [],
alias: alias,
color: config.theme.visualization.getColorByName(color),
color: config.theme2.visualization.getColorByName(color),
unit: field.config ? field.config.unit : undefined,
dataFrameIndex,
fieldIndex,

2
public/app/plugins/panel/graph/module.ts
View File

@ -297,7 +297,7 @@ export class GraphCtrl extends MetricsPanelCtrl {
}
onColorChange = (series: any, color: string) => {
series.setColor(config.theme.visualization.getColorByName(color));
series.setColor(config.theme2.visualization.getColorByName(color));
this.panel.aliasColors[series.alias] = color;
this.render();
};

8
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -234,12 +234,12 @@ export class ThresholdManager {
if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({
y2axis: { from: threshold.value, to: limit },
color: config.theme.visualization.getColorByName(fillColor),
color: config.theme2.visualization.getColorByName(fillColor),
});
} else {
options.grid.markings.push({
yaxis: { from: threshold.value, to: limit },
color: config.theme.visualization.getColorByName(fillColor),
color: config.theme2.visualization.getColorByName(fillColor),
});
}
}
@ -247,12 +247,12 @@ export class ThresholdManager {
if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({
y2axis: { from: threshold.value, to: threshold.value },
color: config.theme.visualization.getColorByName(lineColor),
color: config.theme2.visualization.getColorByName(lineColor),
});
} else {
options.grid.markings.push({
yaxis: { from: threshold.value, to: threshold.value },
color: config.theme.visualization.getColorByName(lineColor),
color: config.theme2.visualization.getColorByName(lineColor),
});
}
}

4
public/app/plugins/panel/graph/thresholds_form.ts
View File

@ -64,8 +64,8 @@ export class ThresholdFormCtrl {
onThresholdTypeChange(index: number) {
// Because of the ng-model binding, threshold's color mode is already set here
if (this.panel.thresholds[index].colorMode === 'custom') {
this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blue85).setAlpha(0.2).toRgbString();
this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77).setAlpha(0.6).toRgbString();
this.panel.thresholds[index].fillColor = tinycolor(config.theme2.v1.palette.blue85).setAlpha(0.2).toRgbString();
this.panel.thresholds[index].lineColor = tinycolor(config.theme2.v1.palette.blue77).setAlpha(0.6).toRgbString();
}
this.panelCtrl.render();
}

6
public/app/plugins/panel/graph/time_region_manager.ts
View File

@ -1,7 +1,7 @@
import 'vendor/flot/jquery.flot';
import { map } from 'lodash';
import { dateTime, GrafanaTheme, TimeRange } from '@grafana/data';
import { dateTime, GrafanaTheme2, TimeRange } from '@grafana/data';
import { config } from 'app/core/config';
import { calculateTimesWithin, TimeRegionConfig } from 'app/core/utils/timeRegions';
@ -45,7 +45,7 @@ export function getColorModes() {
});
}
function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefinition {
function getColor(timeRegion: any, theme: GrafanaTheme2): TimeRegionColorDefinition {
if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
timeRegion.colorMode = 'red';
}
@ -109,7 +109,7 @@ export class TimeRegionManager {
const timeRegion: GraphTimeRegionConfig = tr;
const regions = calculateTimesWithin(tr, tRange);
if (regions.length) {
const timeRegionColor = getColor(timeRegion, config.theme);
const timeRegionColor = getColor(timeRegion, config.theme2);
for (let j = 0; j < regions.length; j++) {
const r = regions[j];

2
public/app/plugins/panel/heatmap-old/color_legend.ts
View File

@ -273,7 +273,7 @@ function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; ex
.attr('width', rangeStep)
.attr('height', legendHeight)
.attr('stroke-width', 0)
.attr('fill', config.theme.visualization.getColorByName(options.cardColor))
.attr('fill', config.theme2.visualization.getColorByName(options.cardColor))
.style('opacity', (d) => legendOpacityScale(d));
}
}

2
public/app/plugins/panel/heatmap-old/rendering.ts
View File

@ -659,7 +659,7 @@ export class HeatmapRenderer {
getCardColor(d: { count: any }) {
if (this.panel.color.mode === 'opacity') {
return config.theme.visualization.getColorByName(this.panel.color.cardColor);
return config.theme2.visualization.getColorByName(this.panel.color.cardColor);
} else {
return this.colorScale(d.count);
}

8
public/app/plugins/panel/live/LiveChannelEditor.tsx
View File

@ -6,7 +6,7 @@ import {
LiveChannelAddress,
SelectableValue,
StandardEditorProps,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data';
import { Select, Alert, Label, stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config';
@ -86,7 +86,7 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
render() {
const { namespaces, paths } = this.state;
const { scope, namespace, path } = this.props.value;
const style = getStyles(config.theme);
const style = getStyles(config.theme2);
return (
<>
@ -146,8 +146,8 @@ function findPathOption(paths: Array<SelectableValue<string>>, path?: string): S
return undefined;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
dropWrap: css`
margin-bottom: ${theme.spacing.sm};
margin-bottom: ${theme.spacing(1)};
`,
}));

18
public/app/plugins/panel/live/LivePanel.tsx
View File

@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
import { Unsubscribable, PartialObserver } from 'rxjs';
import {
GrafanaTheme,
GrafanaTheme2,
PanelProps,
LiveChannelStatusEvent,
isValidLiveChannelAddress,
@ -38,7 +38,7 @@ interface State {
export class LivePanel extends PureComponent<Props, State> {
private readonly isValid: boolean;
subscription?: Unsubscribable;
styles = getStyles(config.theme);
styles = getStyles(config.theme2);
constructor(props: Props) {
super(props);
@ -301,31 +301,31 @@ export class LivePanel extends PureComponent<Props, State> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
statusWrap: css`
margin: auto;
position: absolute;
top: 0;
right: 0;
background: ${theme.colors.panelBg};
background: ${theme.components.panel.background};
padding: 10px;
z-index: ${theme.zIndex.modal};
`,
status: {
[LiveChannelConnectionState.Pending]: css`
border: 1px solid ${theme.palette.brandPrimary};
border: 1px solid ${theme.v1.palette.orange};
`,
[LiveChannelConnectionState.Connected]: css`
border: 1px solid ${theme.palette.brandSuccess};
border: 1px solid ${theme.colors.success.main};
`,
[LiveChannelConnectionState.Connecting]: css`
border: 1px solid ${theme.palette.brandWarning};
border: 1px solid ${theme.v1.palette.brandWarning};
`,
[LiveChannelConnectionState.Disconnected]: css`
border: 1px solid ${theme.palette.brandWarning};
border: 1px solid ${theme.colors.warning.main};
`,
[LiveChannelConnectionState.Shutdown]: css`
border: 1px solid ${theme.palette.brandDanger};
border: 1px solid ${theme.colors.error.main};
`,
[LiveChannelConnectionState.Invalid]: css`
border: 1px solid red;

10
public/app/plugins/panel/nodeGraph/Legend.tsx
View File

@ -2,9 +2,9 @@ import { css } from '@emotion/css';
import { identity } from 'lodash';
import React, { useCallback } from 'react';
import { Field, FieldColorModeId, GrafanaTheme } from '@grafana/data';
import { Field, FieldColorModeId, GrafanaTheme2 } from '@grafana/data';
import { LegendDisplayMode } from '@grafana/schema';
import { Icon, useStyles, useTheme, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui';
import { Icon, useStyles2, useTheme2, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui';
import { Config } from './layout';
import { NodeDatum } from './types';
@ -33,8 +33,8 @@ interface Props {
export const Legend = function Legend(props: Props) {
const { nodes, onSort, sort, sortable } = props;
const theme = useTheme();
const styles = useStyles(getStyles);
const theme = useTheme2();
const styles = useStyles2(getStyles);
const colorItems = getColorLegendItems(nodes, theme);
const onClick = useCallback(
@ -70,7 +70,7 @@ interface ItemData {
field: Field;
}
function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<VizLegendItem<ItemData>> {
function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme2): Array<VizLegendItem<ItemData>> {
if (!nodes.length) {
return [];
}