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

Jaeger: Extract inline CSS into getStyles

Browse Source
This commit is contained in:
Hamas Shafiq 2022-08-11 16:41:59 +01:00 committed by GitHub
parent 6cdeeeda3c
commit 6592b03f12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { QueryEditorProps } from '@grafana/data'; import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { FileDropzone, InlineField, InlineFieldRow, QueryField, RadioButtonGroup, useTheme2 } from '@grafana/ui'; import { FileDropzone, InlineField, InlineFieldRow, QueryField, RadioButtonGroup, useStyles2 } from '@grafana/ui';
import { JaegerDatasource } from '../datasource'; import { JaegerDatasource } from '../datasource';
import { JaegerQuery, JaegerQueryType } from '../types'; import { JaegerQuery, JaegerQueryType } from '../types';
@ -12,7 +12,7 @@ import { SearchForm } from './SearchForm';
type Props = QueryEditorProps<JaegerDatasource, JaegerQuery>; type Props = QueryEditorProps<JaegerDatasource, JaegerQuery>;
export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) { export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) {
const theme = useTheme2(); const styles = useStyles2(getStyles);
const onChangeQuery = (value: string) => { const onChangeQuery = (value: string) => {
const nextQuery: JaegerQuery = { ...query, query: value }; const nextQuery: JaegerQuery = { ...query, query: value };
@ -25,7 +25,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
return <SearchForm datasource={datasource} query={query} onChange={onChange} />; return <SearchForm datasource={datasource} query={query} onChange={onChange} />;
case 'upload': case 'upload':
return ( return (
<div className={css({ padding: theme.spacing(2) })}> <div className={styles.fileDropzoneContainer}>
<FileDropzone <FileDropzone
options={{ multiple: false }} options={{ multiple: false }}
onLoad={(result) => { onLoad={(result) => {
@ -55,7 +55,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
return ( return (
<> <>
<div className={css({ width: '100%' })}> <div className={styles.container}>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Query type"> <InlineField label="Query type">
<RadioButtonGroup<JaegerQueryType> <RadioButtonGroup<JaegerQueryType>
@ -80,3 +80,12 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
</> </>
); );
} }
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
width: 100%;
`,
fileDropzoneContainer: css`
padding: ${theme.spacing(2)};
`,
});