-
Notifications
You must be signed in to change notification settings - Fork 38
/
QueryEditor.tsx
87 lines (84 loc) · 3.59 KB
/
QueryEditor.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
77
78
79
80
81
82
83
84
85
86
87
import React, { useState } from 'react';
import { ToolbarButtonRow, ToolbarButton, Drawer } from '@grafana/ui';
import { QueryEditorProps } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { DruidDataSource } from './DruidDataSource';
import { DruidSettings, DruidQuery } from './types';
import { normalizeData } from './configuration/settings';
import { DruidQuerySettings } from './configuration/QuerySettings';
import { QuerySettingsOptions } from './configuration/QuerySettings/types';
import { DruidQueryBuilder } from './builder/';
import { QueryBuilderOptions } from './builder/types';
interface Props extends QueryEditorProps<DruidDataSource, DruidQuery, DruidSettings> {}
export const QueryEditor = (props: Props) => {
const { builder, settings } = props.query;
const builderOptions = { builder: builder || {}, settings: settings || {} };
const datasourceQuerySettings = normalizeData(props.datasource.settingsData, false, 'query');
/*TODO merging settings that way is not good: things like query context won't get merged
the query settings context will replace the datasource query settings context instead of merging
backend side of the plugin does already merge them properly: we need to move the (proper) merging from backend to frontend*/
const settingsOptions = { settings: {...datasourceQuerySettings, ...settings} || {} };
const onBuilderOptionsChange = (queryBuilderOptions: QueryBuilderOptions) => {
const { query, onChange, onRunQuery } = props;
//todo: need to implement some kind of hook system to alter a query from modules
if (
queryBuilderOptions.builder !== null &&
(queryBuilderOptions.builder.intervals === undefined ||
(Array.isArray(queryBuilderOptions.builder.intervals.intervals) &&
queryBuilderOptions.builder.intervals.intervals.length === 0))
) {
queryBuilderOptions.builder.intervals = {
type: 'intervals',
intervals: ['${__from:date:iso}/${__to:date:iso}'],
};
}
//workaround: https://github.com/grafana/grafana/issues/30013
const expr = JSON.stringify(queryBuilderOptions);
onChange({ ...query, ...queryBuilderOptions, expr: expr });
onRunQuery();
};
const onSettingsOptionsChange = (querySettingsOptions: QuerySettingsOptions) => {
const { query, onChange, onRunQuery } = props;
//workaround: https://github.com/grafana/grafana/issues/30013
const expr = JSON.stringify({ builder: query.builder, ...querySettingsOptions });
onChange({ ...query, ...querySettingsOptions, expr: expr });
onRunQuery();
};
const [showDrawer, setShowDrawer] = useState(false);
return (
<>
<ToolbarButtonRow className={cx(styles.toolbar)}>
<ToolbarButton
icon="cog"
onClick={(event) => {
setShowDrawer(true);
event.preventDefault();
}}
>
Query settings
</ToolbarButton>
</ToolbarButtonRow>
{showDrawer && (
<Drawer
inline={false}
title="Settings"
subtitle="The settings to attach to the query. Those settings will be merged with the ones defined at datasource level."
closeOnMaskClick={true}
scrollableContent={true}
width="42%"
onClose={() => {
setShowDrawer(false);
}}
>
<DruidQuerySettings options={settingsOptions} onOptionsChange={onSettingsOptionsChange} />
</Drawer>
)}
<DruidQueryBuilder options={builderOptions} onOptionsChange={onBuilderOptionsChange} />
</>
);
};
const styles = {
toolbar: css`
margin-bottom: 4px;
`,
};