|
1 | 1 | import { defaults } from 'lodash'; |
2 | 2 |
|
3 | | -import React, { PureComponent, FormEvent } from 'react'; |
4 | | -import { AutoSizeInput, InlineFieldRow, InlineField } from '@grafana/ui'; |
| 3 | +import React, {FormEvent, useState} from 'react'; |
| 4 | +import { AutoSizeInput, InlineFieldRow, InlineField, useTheme, InlineSwitch } from '@grafana/ui'; |
5 | 5 | import { QueryEditorProps } from '@grafana/data'; |
6 | 6 | import { DataSource } from './datasource'; |
| 7 | +import Editor from "@monaco-editor/react"; |
7 | 8 | import { defaultQuery, MyDataSourceOptions, MyQuery } from './types'; |
| 9 | +import * as monaco from "monaco-editor"; |
8 | 10 |
|
9 | 11 | type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>; |
10 | 12 |
|
11 | | -export class QueryEditor extends PureComponent<Props> { |
| 13 | +export function QueryEditor(props: Props) { |
12 | 14 |
|
13 | | - ontableNameChange = (event: FormEvent<HTMLInputElement>) => { |
| 15 | + const [, setQueryText] = useState("") |
| 16 | + const [sqlEditorSelected, setSqlEditorSelected] = useState(false) |
| 17 | + const onQuerryChange = (value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => { |
| 18 | + setQueryText(value || "") |
| 19 | + const { onChange, query } = props; |
| 20 | + onChange({ ...query, rawSqlQuery: value }); |
| 21 | + }; |
| 22 | + |
| 23 | + const onSQLSwitchChange = (event: any) => { |
| 24 | + const { onChange, query } = props; |
| 25 | + onChange({ ...query, rawSqlSelected: !sqlEditorSelected }); |
| 26 | + setSqlEditorSelected(!sqlEditorSelected); |
| 27 | + }; |
| 28 | + const ontableNameChange = (event: FormEvent<HTMLInputElement>) => { |
14 | 29 | console.log(event); |
15 | | - const { onChange, query } = this.props; |
| 30 | + const { onChange, query } = props; |
16 | 31 | onChange({ ...query, tableName: event.currentTarget.value }); |
17 | 32 | }; |
18 | 33 |
|
19 | 34 |
|
20 | | - ontimeColumnNameTextChange = (event: FormEvent<HTMLInputElement>) => { |
| 35 | + const ontimeColumnNameTextChange = (event: FormEvent<HTMLInputElement>) => { |
21 | 36 | console.log(event); |
22 | | - const { onChange, query } = this.props; |
| 37 | + const { onChange, query } = props; |
23 | 38 | onChange({ ...query, timeColumnName: event.currentTarget.value }); |
24 | 39 | }; |
25 | 40 |
|
26 | 41 |
|
27 | | - onvalueColumnNameChange = (event: FormEvent<HTMLInputElement>) => { |
| 42 | + const onvalueColumnNameChange = (event: FormEvent<HTMLInputElement>) => { |
28 | 43 | console.log(event); |
29 | | - const { onChange, query } = this.props; |
| 44 | + const { onChange, query } = props; |
30 | 45 | onChange({ ...query, valueColumnName: event.currentTarget.value }); |
31 | 46 | }; |
32 | 47 |
|
33 | 48 |
|
34 | | - onwhereQueryChange = (event: FormEvent<HTMLInputElement>) => { |
| 49 | + const onwhereQueryChange = (event: FormEvent<HTMLInputElement>) => { |
35 | 50 | console.log(event); |
36 | | - const { onChange, query } = this.props; |
| 51 | + const { onChange, query } = props; |
37 | 52 | onChange({ ...query, whereQuery: event.currentTarget.value }); |
38 | 53 | }; |
39 | 54 |
|
40 | | - render() { |
41 | | - const query = defaults(this.props.query, defaultQuery); |
| 55 | + const query = defaults(props.query, defaultQuery); |
42 | 56 | const { timeColumnName, valueColumnName, whereQuery, tableName } = query; |
43 | | - |
| 57 | + const theme = useTheme() |
44 | 58 | return ( |
45 | 59 | <div className="gf-form" style={{ flexDirection: "column", rowGap: "8px"}}> |
| 60 | + {sqlEditorSelected ? ( |
| 61 | + <Editor |
| 62 | + height="200px" |
| 63 | + theme={theme.isDark ? "vs-dark" : "vs-light"} |
| 64 | + defaultLanguage="sql" |
| 65 | + defaultValue="SELECT $__time(time_column), $__value(value_column) FROM catalog.default.table_name WHERE $__timeFilter(time_column) GROUP BY $__timeWindow(time_column)" |
| 66 | + onChange={onQuerryChange} |
| 67 | + /> |
| 68 | + ) : ( |
| 69 | + <> |
| 70 | + <InlineFieldRow> |
| 71 | + <InlineField label="Time Column" labelWidth={16} tooltip="The column name of the time column"> |
| 72 | + <AutoSizeInput |
| 73 | + value={timeColumnName || ''} |
| 74 | + onCommitChange={ontimeColumnNameTextChange} |
| 75 | + minWidth={32} |
| 76 | + defaultValue="timestamp" |
| 77 | + required |
| 78 | + /> |
| 79 | + </InlineField> |
| 80 | + </InlineFieldRow> |
| 81 | + <InlineFieldRow> |
| 82 | + <InlineField label="Value Column" labelWidth={16} tooltip="The column name of the value to query"> |
| 83 | + <AutoSizeInput |
| 84 | + value={valueColumnName || ''} |
| 85 | + onCommitChange={onvalueColumnNameChange} |
| 86 | + minWidth={32} |
| 87 | + defaultValue="value" |
| 88 | + required |
| 89 | + /> |
| 90 | + </InlineField> |
| 91 | + </InlineFieldRow> |
| 92 | + <InlineFieldRow> |
| 93 | + <InlineField label="Table Name" labelWidth={16} tooltip="(Catalog), Schema and Table Name in the format (<catalog>).<schema>.<table_name>"> |
| 94 | + <AutoSizeInput |
| 95 | + value={tableName || ''} |
| 96 | + onCommitChange={ontableNameChange} |
| 97 | + minWidth={32} |
| 98 | + placeholder="catalog.default.table_name" |
| 99 | + required |
| 100 | + /> |
| 101 | + </InlineField> |
| 102 | + </InlineFieldRow> |
| 103 | + <InlineFieldRow> |
| 104 | + <InlineField label="Where SQL" labelWidth={16} tooltip="Additional WHERE conditions to filter the queried data (Databricks SQL)"> |
| 105 | + <AutoSizeInput |
| 106 | + value={whereQuery || ''} |
| 107 | + onCommitChange={onwhereQueryChange} |
| 108 | + minWidth={32} |
| 109 | + placeholder="id = 1 AND name = 'Peter'" |
| 110 | + /> |
| 111 | + </InlineField> |
| 112 | + </InlineFieldRow> |
| 113 | + </> |
| 114 | + )} |
46 | 115 | <InlineFieldRow> |
47 | | - <InlineField label="Time Column" labelWidth={16} tooltip="The column name of the time column"> |
48 | | - <AutoSizeInput |
49 | | - value={timeColumnName || ''} |
50 | | - onCommitChange={this.ontimeColumnNameTextChange} |
51 | | - minWidth={32} |
52 | | - defaultValue="timestamp" |
53 | | - required |
54 | | - /> |
55 | | - </InlineField> |
56 | | - </InlineFieldRow> |
57 | | - <InlineFieldRow> |
58 | | - <InlineField label="Value Column" labelWidth={16} tooltip="The column name of the value to query"> |
59 | | - <AutoSizeInput |
60 | | - value={valueColumnName || ''} |
61 | | - onCommitChange={this.onvalueColumnNameChange} |
62 | | - minWidth={32} |
63 | | - defaultValue="value" |
64 | | - required |
65 | | - /> |
66 | | - </InlineField> |
67 | | - </InlineFieldRow> |
68 | | - <InlineFieldRow> |
69 | | - <InlineField label="Table Name" labelWidth={16} tooltip="Schema and Table Name in the format <schema>.<table_name>"> |
70 | | - <AutoSizeInput |
71 | | - value={tableName || ''} |
72 | | - onCommitChange={this.ontableNameChange} |
73 | | - minWidth={32} |
74 | | - placeholder="default.table_name" |
75 | | - required |
76 | | - /> |
77 | | - </InlineField> |
78 | | - </InlineFieldRow> |
79 | | - <InlineFieldRow> |
80 | | - <InlineField label="Where SQL" labelWidth={16} tooltip="Additional WHERE conditions to filter the queried data (Databricks SQL)"> |
81 | | - <AutoSizeInput |
82 | | - value={whereQuery || ''} |
83 | | - onCommitChange={this.onwhereQueryChange} |
84 | | - minWidth={32} |
85 | | - placeholder="id = 1 AND name = 'Peter'" |
| 116 | + <InlineField label="SQL Editor" labelWidth={16}> |
| 117 | + <InlineSwitch |
| 118 | + value={sqlEditorSelected} |
| 119 | + onChange={onSQLSwitchChange} |
86 | 120 | /> |
87 | 121 | </InlineField> |
88 | 122 | </InlineFieldRow> |
89 | 123 | </div> |
90 | 124 | ); |
91 | | - } |
92 | 125 | } |
0 commit comments