-
Notifications
You must be signed in to change notification settings - Fork 11
/
QuerySection.tsx
76 lines (72 loc) · 1.87 KB
/
QuerySection.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { XRayQueryField } from './XRayQueryField';
import React from 'react';
import { XrayDataSource } from '../../DataSource';
import { css } from '@emotion/css';
import { XrayQuery } from '../../types';
import { QueryTypeOption } from './constants';
import { EditorField } from '@grafana/experimental';
import { queryTypeOptionToQueryType } from './QueryEditorForm';
const styles = {
tooltipLink: css({
color: '#33a2e5',
'&:hover': {
color: ' #33a2e5',
filter: 'brightness(120%)',
},
}),
};
type Props = {
query: XrayQuery;
datasource: XrayDataSource;
onChange: (value: XrayQuery) => void;
onRunQuery: () => void;
selectedOptions: QueryTypeOption[];
};
export function QuerySection(props: Props) {
const { datasource, query, onRunQuery, onChange, selectedOptions } = props;
const onRunQueryLocal = () => {
onChange(query);
// Only run query if it has value
if (query.query) {
onRunQuery();
}
};
return (
<EditorField
label="Query"
tooltipInteractive
width="100%"
tooltip={
<span>
See{' '}
<a
href="https://docs.aws.amazon.com/xray/latest/devguide/xray-console-filters.html?icmpid=docs_xray_console"
target="_blank"
rel="noreferrer"
className={styles.tooltipLink}
>
X-Ray documentation
</a>{' '}
for filter expression help.
</span>
}
>
<XRayQueryField
query={query}
history={[]}
datasource={datasource}
onRunQuery={onRunQueryLocal}
onChange={(e) => {
onChange({
...query,
queryType: queryTypeOptionToQueryType(
selectedOptions.map((option) => option.value),
e.query
),
query: e.query,
});
}}
/>
</EditorField>
);
}