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 theme to v2 (#58154)

Browse Source
This commit is contained in:
kay delaney
2022-11-03 18:15:55 +00:00
committed by GitHub
parent c1b10e4f0c
commit a8c181bf6a
42 changed files with 390 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx
View File

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { getTheme } from '@grafana/ui';
import { createTheme } from '@grafana/data';
import PromQlLanguageProvider from '../language_provider';
@@ -131,7 +131,7 @@ describe('PrometheusMetricsBrowser', () => {
};
const defaults: BrowserProps = {
theme: getTheme(),
theme: createTheme({ colors: { mode: 'dark' } }),
onChange: () => {},
autoSelect: 0,
languageProvider: mockLanguageProvider as unknown as PromQlLanguageProvider,

48
public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx
View File

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
import React, { ChangeEvent } from 'react';
import { FixedSizeList } from 'react-window';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import {
Button,
HorizontalGroup,
@@ -10,8 +10,8 @@ import {
Label,
LoadingPlaceholder,
stylesFactory,
withTheme,
BrowserLabel as PromLabel,
withTheme2,
} from '@grafana/ui';
import PromQlLanguageProvider from '../language_provider';
@@ -25,7 +25,7 @@ const LIST_ITEM_SIZE = 25;
export interface BrowserProps {
languageProvider: PromQlLanguageProvider;
onChange: (selector: string) => void;
theme: GrafanaTheme;
theme: GrafanaTheme2;
autoSelect?: number;
hide?: () => void;
lastUsedLabels: string[];
@@ -112,14 +112,14 @@ export function facetLabels(
});
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
wrapper: css`
background-color: ${theme.colors.bg2};
padding: ${theme.spacing.sm};
background-color: ${theme.colors.background.secondary};
padding: ${theme.spacing(1)};
width: 100%;
`,
list: css`
margin-top: ${theme.spacing.sm};
margin-top: ${theme.spacing(1)};
display: flex;
flex-wrap: wrap;
max-height: 200px;
@@ -128,17 +128,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`,
section: css`
& + & {
margin: ${theme.spacing.md} 0;
margin: ${theme.spacing(2)} 0;
}
position: relative;
`,
selector: css`
font-family: ${theme.typography.fontFamily.monospace};
margin-bottom: ${theme.spacing.sm};
font-family: ${theme.typography.fontFamilyMonospace};
margin-bottom: ${theme.spacing(1)};
`,
status: css`
padding: ${theme.spacing.xs};
color: ${theme.colors.textSemiWeak};
padding: ${theme.spacing(0.5)};
color: ${theme.colors.text.secondary};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -154,30 +154,30 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
opacity: 1;
`,
error: css`
color: ${theme.palette.brandDanger};
color: ${theme.colors.error.main};
`,
valueList: css`
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
resize: horizontal;
`,
valueListWrapper: css`
border-left: 1px solid ${theme.colors.border2};
margin: ${theme.spacing.sm} 0;
padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm};
border-left: 1px solid ${theme.colors.border.medium};
margin: ${theme.spacing(1)} 0;
padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)};
`,
valueListArea: css`
display: flex;
flex-wrap: wrap;
margin-top: ${theme.spacing.sm};
margin-top: ${theme.spacing(1)};
`,
valueTitle: css`
margin-left: -${theme.spacing.xs};
margin-bottom: ${theme.spacing.sm};
margin-left: -${theme.spacing(0.5)};
margin-bottom: ${theme.spacing(1)};
`,
validationStatus: css`
padding: ${theme.spacing.xs};
margin-bottom: ${theme.spacing.sm};
color: ${theme.colors.textStrong};
padding: ${theme.spacing(0.5)};
margin-bottom: ${theme.spacing(1)};
color: ${theme.colors.text.maxContrast};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -656,4 +656,4 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
}
}
export const PrometheusMetricsBrowser = withTheme(UnthemedPrometheusMetricsBrowser);
export const PrometheusMetricsBrowser = withTheme2(UnthemedPrometheusMetricsBrowser);

4
public/app/plugins/datasource/tempo/configuration/QuerySettings.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, Input, useStyles } from '@grafana/ui';
import { InlineField, InlineFieldRow, InlineSwitch, Input, useStyles2 } from '@grafana/ui';
import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function QuerySettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={styles.container}>

4
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
View File

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React, { LegacyRef } from 'react';
import { createTheme, Field, getDisplayProcessor } from '@grafana/data';
import { useStyles, Tooltip } from '@grafana/ui';
import { useStyles2, Tooltip } from '@grafana/ui';
import { TooltipData, SampleUnit } from '../types';
@@ -13,7 +13,7 @@ type Props = {
};
const FlameGraphTooltip = ({ tooltipRef, tooltipData, showTooltip }: Props) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div ref={tooltipRef} className={styles.tooltip}>

13
public/app/plugins/panel/geomap/GeomapPanel.tsx
View File

@@ -11,9 +11,9 @@ import { fromLonLat } from 'ol/proj';
import React, { Component, ReactNode } from 'react';
import { Subscription } from 'rxjs';
import { DataHoverEvent, GrafanaTheme, PanelData, PanelProps } from '@grafana/data';
import { DataHoverEvent, PanelData, PanelProps } from '@grafana/data';
import { config } from '@grafana/runtime';
import { PanelContext, PanelContextRoot, stylesFactory } from '@grafana/ui';
import { PanelContext, PanelContextRoot } from '@grafana/ui';
import { PanelEditExitedEvent } from 'app/types/events';
import { GeomapOverlay, OverlayProps } from './GeomapOverlay';
@@ -53,7 +53,6 @@ export class GeomapPanel extends Component<Props, State> {
globalCSS = getGlobalStyles(config.theme2);
mouseWheelZoom?: MouseWheelZoom;
style = getStyles(config.theme);
hoverPayload: GeomapHoverPayload = { point: {}, pageX: -1, pageY: -1 };
readonly hoverEvent = new DataHoverEvent(this.hoverPayload);
@@ -383,8 +382,8 @@ export class GeomapPanel extends Component<Props, State> {
return (
<>
<Global styles={this.globalCSS} />
<div className={this.style.wrap} onMouseLeave={this.clearTooltip}>
<div className={this.style.map} ref={this.initMapRef}></div>
<div className={styles.wrap} onMouseLeave={this.clearTooltip}>
<div className={styles.map} ref={this.initMapRef}></div>
<GeomapOverlay
bottomLeft={legends}
topRight1={topRight1}
@@ -398,7 +397,7 @@ export class GeomapPanel extends Component<Props, State> {
}
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const styles = {
wrap: css`
position: relative;
width: 100%;
@@ -410,4 +409,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
width: 100%;
height: 100%;
`,
}));
};

28
public/app/plugins/panel/xychart/ManualEditor.tsx
View File

@@ -1,8 +1,8 @@
import { css, cx } from '@emotion/css';
import React, { useState, useEffect } from 'react';
import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
import { Button, Field, IconButton, useStyles } from '@grafana/ui';
import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
import { Button, Field, IconButton, useStyles2 } from '@grafana/ui';
import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
import { LayerName } from 'app/core/components/Layers/LayerName';
import { ColorDimensionEditor, ScaleDimensionEditor } from 'app/features/dimensions/editors';
@@ -14,8 +14,8 @@ export const ManualEditor = ({
onChange,
context,
}: StandardEditorProps<ScatterSeriesConfig[], any, XYChartOptions>) => {
const [selected, setSelected] = useState<number>(0);
const style = useStyles(getStyles);
const [selected, setSelected] = useState(0);
const style = useStyles2(getStyles);
const onFieldChange = (val: any | undefined, index: number, field: string) => {
onChange(
@@ -125,34 +125,34 @@ export const ManualEditor = ({
);
};
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
marginBot: css`
margin-bottom: 20px;
`,
row: css`
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
background: ${theme.colors.bg2};
min-height: ${theme.spacing.formInputHeight}px;
padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.borderRadius(1)};
background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)};
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3px;
cursor: pointer;
border: 1px solid ${theme.colors.formInputBorder};
border: 1px solid ${theme.components.input.borderColor};
&:hover {
border: 1px solid ${theme.colors.formInputBorderHover};
border: 1px solid ${theme.components.input.borderHover};
}
`,
sel: css`
border: 1px solid ${theme.colors.formInputBorderActive};
border: 1px solid ${theme.colors.primary.border};
&:hover {
border: 1px solid ${theme.colors.formInputBorderActive};
border: 1px solid ${theme.colors.primary.border};
}
`,
actionIcon: css`
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
&:hover {
color: ${theme.colors.text};
}