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

elasticsearch plugin: Migrate from GrafanaTheme to GrafanaTheme2 (#35336)

Browse Source
This commit is contained in:
Betula-L 2021-06-11 21:06:24 +08:00 committed by GitHub
parent 51214ac3da
commit 6707b61434
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
View File

@ -1,5 +1,5 @@
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui'; import { InlineSegmentGroup, Segment, SegmentAsync, useTheme2 } from '@grafana/ui';
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { useDatasource, useQuery } from '../ElasticsearchQueryContext'; import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
@ -62,7 +62,7 @@ const getTypeOptions = (
}; };
export const MetricEditor = ({ value }: Props) => { export const MetricEditor = ({ value }: Props) => {
const styles = getStyles(useTheme(), !!value.hide); const styles = getStyles(useTheme2(), !!value.hide);
const datasource = useDatasource(); const datasource = useDatasource();
const query = useQuery(); const query = useQuery();
const dispatch = useDispatch<MetricAggregationAction>(); const dispatch = useDispatch<MetricAggregationAction>();

29
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
View File

@ -1,16 +1,17 @@
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
export const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => ({ export const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
color: return {
hidden && color:
css` hidden &&
&, css`
&:hover, &,
label, &:hover,
a { label,
color: ${hidden ? theme.colors.textFaint : theme.colors.text}; a {
} color: ${hidden ? theme.colors.text.disabled : theme.colors.text.primary};
`, }
})); `,
};
};

15
public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
View File

@ -1,5 +1,5 @@
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui'; import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { noop } from 'lodash'; import { noop } from 'lodash';
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
@ -18,8 +18,7 @@ export const QueryEditorRow = ({
onHideClick, onHideClick,
hidden = false, hidden = false,
}: PropsWithChildren<Props>) => { }: PropsWithChildren<Props>) => {
const theme = useTheme(); const styles = useStyles2(getStyles);
const styles = getStyles(theme);
return ( return (
<InlineFieldRow> <InlineFieldRow>
@ -55,14 +54,14 @@ export const QueryEditorRow = ({
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
iconWrapper: css` iconWrapper: css`
display: flex; display: flex;
`, `,
icon: css` icon: css`
color: ${theme.colors.textWeak}; color: ${theme.colors.text.secondary};
margin-left: ${theme.spacing.xxs}; margin-left: ${theme.spacing(0.25)};
`, `,
}; };
}); };

19
public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
View File

@ -1,10 +1,10 @@
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui'; import { Icon, InlineSegmentGroup, useTheme2 } from '@grafana/ui';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { PropsWithChildren, useState } from 'react'; import React, { PropsWithChildren, useState } from 'react';
import { segmentStyles } from './styles'; import { segmentStyles } from './styles';
const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => { const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
return { return {
wrapper: css` wrapper: css`
max-width: 500px; max-width: 500px;
@ -12,20 +12,21 @@ const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => {
flex-direction: column; flex-direction: column;
`, `,
settingsWrapper: css` settingsWrapper: css`
padding-top: ${theme.spacing.xs}; padding-top: ${theme.spacing(0.5)};
`, `,
icon: css` icon: css`
margin-right: ${theme.spacing.xs}; margin-right: ${theme.spacing(0.5)};
`, `,
button: css` button: css`
justify-content: start; justify-content: start;
${hidden && ${hidden &&
css` css`
color: ${theme.colors.textFaint}; color: ${theme.colors.text.disabled};
`} `}
`, `,
}; };
}); };
interface Props { interface Props {
label: string; label: string;
hidden?: boolean; hidden?: boolean;
@ -33,7 +34,9 @@ interface Props {
export const SettingsEditorContainer = ({ label, children, hidden = false }: PropsWithChildren<Props>) => { export const SettingsEditorContainer = ({ label, children, hidden = false }: PropsWithChildren<Props>) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const styles = getStyles(useTheme(), hidden);
const theme = useTheme2();
const styles = getStyles(theme, hidden);
return ( return (
<InlineSegmentGroup> <InlineSegmentGroup>

27
public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
View File

@ -1,19 +1,21 @@
import React from 'react'; import React from 'react';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Button, stylesFactory, useTheme } from '@grafana/ui'; import { Button, useStyles2 } from '@grafana/ui';
import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data'; import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
import { DataLinkConfig } from '../types'; import { DataLinkConfig } from '../types';
import { DataLink } from './DataLink'; import { DataLink } from './DataLink';
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme2) => {
infoText: css` return {
padding-bottom: ${theme.spacing.md}; infoText: css`
color: ${theme.colors.textWeak}; padding-bottom: ${theme.spacing(2)};
`, color: ${theme.colors.text.secondary};
dataLink: css` `,
margin-bottom: ${theme.spacing.sm}; dataLink: css`
`, margin-bottom: ${theme.spacing(1)};
})); `,
};
};
type Props = { type Props = {
value?: DataLinkConfig[]; value?: DataLinkConfig[];
@ -21,8 +23,7 @@ type Props = {
}; };
export const DataLinks = (props: Props) => { export const DataLinks = (props: Props) => {
const { value, onChange } = props; const { value, onChange } = props;
const theme = useTheme(); const styles = useStyles2(getStyles);
const styles = getStyles(theme);
return ( return (
<> <>