1
- import React , { MutableRefObject , useEffect , useRef , useState } from 'react' ;
2
- import { InlineLabel , QueryField , Select } from '@grafana/ui' ;
1
+ import React , { useEffect , useState } from 'react' ;
2
+ import { InlineLabel , QueryField , Select , Switch } from '@grafana/ui' ;
3
3
import { QueryEditorProps } from '@grafana/data' ;
4
4
import { DataSource } from '../datasource' ;
5
5
import { MyDataSourceOptions , MyQuery } from '../types' ;
6
- import { getStreams , getStreamSchema } from '../streams' ;
6
+ import { getStreams } from '../streams' ;
7
7
import { css } from '@emotion/css' ;
8
8
9
9
type Props = QueryEditorProps < DataSource , MyQuery , MyDataSourceOptions > ;
10
10
11
11
export function QueryEditor ( { query, onChange, onRunQuery, datasource } : Props ) {
12
- const myRef : MutableRefObject < string > = useRef ( '' ) ;
13
- const queryValue : string = myRef . current ;
14
-
15
12
const [ streams , setStreams ] : any = useState ( { } ) ;
16
13
const [ streamOptions , setStreamOptions ] : any = useState ( [ ] ) ;
17
14
@@ -22,37 +19,69 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
22
19
streams [ stream . name ] = stream ;
23
20
} ) ;
24
21
setStreams ( { ...streams } ) ;
25
- setStreamOptions ( [
26
- ...response . list . map ( ( stream : any ) => ( {
27
- label : stream . name ,
28
- value : stream . name ,
29
- } ) ) ,
30
- ] ) ;
31
22
onChange ( {
32
23
...query ,
33
24
query : query . query || '' ,
34
25
stream : response . list [ 0 ] . name ,
35
26
streamFields : response . list [ 0 ] . schema ,
27
+ sqlMode : false ,
36
28
} ) ;
29
+ setStreamOptions ( [
30
+ ...response . list . map ( ( stream : any ) => ( {
31
+ label : stream . name ,
32
+ value : stream . name ,
33
+ } ) ) ,
34
+ ] ) ;
37
35
onRunQuery ( ) ;
38
36
} ) ;
39
37
// eslint-disable-next-line react-hooks/exhaustive-deps
40
38
} , [ ] ) ;
41
39
40
+ useEffect ( ( ) => {
41
+ if ( query . sqlMode !== undefined ) {
42
+ updateQuery ( ) ;
43
+ }
44
+
45
+ // eslint-disable-next-line react-hooks/exhaustive-deps
46
+ } , [ query . sqlMode ] ) ;
47
+
48
+ const updateQuery = ( ) => {
49
+ let newQuery = query . query ;
50
+ if ( query . sqlMode ) {
51
+ let whereClause = '' ;
52
+ if ( newQuery . trim ( ) . length ) {
53
+ whereClause = 'WHERE ' + newQuery . trim ( ) ;
54
+ }
55
+ newQuery = `SELECT * FROM "${ query . stream } " ${ whereClause } ` ;
56
+ } else {
57
+ newQuery = '' ;
58
+ }
59
+ onChange ( {
60
+ ...query ,
61
+ query : newQuery ,
62
+ } ) ;
63
+ } ;
64
+
42
65
const onChangeQuery = ( queryText : string ) => {
43
66
onChange ( { ...query , query : queryText , queryType : 'logs' } ) ;
44
- console . log ( query ) ;
45
67
} ;
46
68
47
- const streamUpdated = ( stream : { label : string ; value : string } ) => {
48
- console . log ( datasource . instanceSettings ) ;
69
+ const streamUpdated = ( stream : any ) => {
49
70
onChange ( {
50
71
...query ,
51
72
stream : stream . value ,
52
73
streamFields : streams [ stream . value ] . schema ,
53
74
} ) ;
54
75
onRunQuery ( ) ;
55
76
} ;
77
+
78
+ const toggleSqlMode = ( ) => {
79
+ onChange ( {
80
+ ...query ,
81
+ sqlMode : ! query . sqlMode ,
82
+ } ) ;
83
+ } ;
84
+
56
85
return (
57
86
< div >
58
87
< div
@@ -61,9 +90,30 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
61
90
align-items : center;
62
91
` }
63
92
>
64
- < InlineLabel width = { 17 } tooltip = "Select stream to get logs" >
93
+ < InlineLabel
94
+ className = { css `
95
+ width : fit-content;
96
+ ` }
97
+ transparent = { true }
98
+ >
99
+ SQL Mode
100
+ </ InlineLabel >
101
+ < Switch value = { ! ! query . sqlMode } onChange = { toggleSqlMode } />
102
+ </ div >
103
+ < div
104
+ className = { css `
105
+ display : flex;
106
+ align-items : center;
107
+ ` }
108
+ >
109
+ < InlineLabel
110
+ className = { css `
111
+ width : fit-content;
112
+ ` }
113
+ transparent
114
+ >
65
115
Select Stream
66
- </ InlineLabel > { ' ' }
116
+ </ InlineLabel >
67
117
< Select
68
118
className = { css `
69
119
width : 200px !important ;
@@ -72,7 +122,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
72
122
options = { streamOptions }
73
123
value = { query . stream }
74
124
onChange = { streamUpdated }
75
- > </ Select >
125
+ / >
76
126
</ div >
77
127
< QueryField
78
128
query = { query . query }
0 commit comments