Skip to content

Commit 87a35b2

Browse files
authored
feat: sql mode in query editor (#1)
* added sql mode in query editor * fix: minor changes in styles * added QueryEditorHelp * fix: type errors
1 parent 450b52f commit 87a35b2

File tree

5 files changed

+88
-23
lines changed

5 files changed

+88
-23
lines changed

src/components/QueryEditor.tsx

Lines changed: 68 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
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';
33
import { QueryEditorProps } from '@grafana/data';
44
import { DataSource } from '../datasource';
55
import { MyDataSourceOptions, MyQuery } from '../types';
6-
import { getStreams, getStreamSchema } from '../streams';
6+
import { getStreams } from '../streams';
77
import { css } from '@emotion/css';
88

99
type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
1010

1111
export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) {
12-
const myRef: MutableRefObject<string> = useRef('');
13-
const queryValue: string = myRef.current;
14-
1512
const [streams, setStreams]: any = useState({});
1613
const [streamOptions, setStreamOptions]: any = useState([]);
1714

@@ -22,37 +19,69 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
2219
streams[stream.name] = stream;
2320
});
2421
setStreams({ ...streams });
25-
setStreamOptions([
26-
...response.list.map((stream: any) => ({
27-
label: stream.name,
28-
value: stream.name,
29-
})),
30-
]);
3122
onChange({
3223
...query,
3324
query: query.query || '',
3425
stream: response.list[0].name,
3526
streamFields: response.list[0].schema,
27+
sqlMode: false,
3628
});
29+
setStreamOptions([
30+
...response.list.map((stream: any) => ({
31+
label: stream.name,
32+
value: stream.name,
33+
})),
34+
]);
3735
onRunQuery();
3836
});
3937
// eslint-disable-next-line react-hooks/exhaustive-deps
4038
}, []);
4139

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+
4265
const onChangeQuery = (queryText: string) => {
4366
onChange({ ...query, query: queryText, queryType: 'logs' });
44-
console.log(query);
4567
};
4668

47-
const streamUpdated = (stream: { label: string; value: string }) => {
48-
console.log(datasource.instanceSettings);
69+
const streamUpdated = (stream: any) => {
4970
onChange({
5071
...query,
5172
stream: stream.value,
5273
streamFields: streams[stream.value].schema,
5374
});
5475
onRunQuery();
5576
};
77+
78+
const toggleSqlMode = () => {
79+
onChange({
80+
...query,
81+
sqlMode: !query.sqlMode,
82+
});
83+
};
84+
5685
return (
5786
<div>
5887
<div
@@ -61,9 +90,30 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
6190
align-items: center;
6291
`}
6392
>
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+
>
65115
Select Stream
66-
</InlineLabel>{' '}
116+
</InlineLabel>
67117
<Select
68118
className={css`
69119
width: 200px !important;
@@ -72,7 +122,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
72122
options={streamOptions}
73123
value={query.stream}
74124
onChange={streamUpdated}
75-
></Select>
125+
/>
76126
</div>
77127
<QueryField
78128
query={query.query}

src/components/QueryEditorHelp.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { QueryEditorHelpProps } from '@grafana/data';
3+
import { MyQuery } from '../types';
4+
5+
export function QueryEditorHelp(props: QueryEditorHelpProps<MyQuery>) {
6+
return (
7+
<div>
8+
<h2>Cheat Sheet</h2>
9+
</div>
10+
);
11+
}

src/datasource.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
1919
constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
2020
super(instanceSettings);
2121
this.url = instanceSettings.url || '';
22-
// this.name = instanceSettings.name;
23-
console.log(instanceSettings);
2422
this.instanceSettings = instanceSettings;
2523
}
2624

@@ -138,6 +136,10 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
138136
},
139137
};
140138

139+
if (queryData.sqlMode) {
140+
req.query.sql = queryData.query;
141+
}
142+
141143
if (!queryData.sqlMode) {
142144
let whereClause = query;
143145

src/module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { DataSource } from './datasource';
33
import { ConfigEditor } from './components/config/ConfigEditor';
44
import { QueryEditor } from './components/QueryEditor';
55
import { MyQuery, MyDataSourceOptions } from './types';
6+
import { QueryEditorHelp } from 'components/QueryEditorHelp';
67

78
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
89
.setConfigEditor(ConfigEditor)
9-
.setQueryEditor(QueryEditor);
10+
.setQueryEditor(QueryEditor)
11+
.setQueryEditorHelp(QueryEditorHelp);

src/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { DataQuery, DataSourceApi, DataSourceJsonData } from '@grafana/data';
1+
import { DataQuery, DataSourceJsonData } from '@grafana/data';
22

33
export interface MyQuery extends DataQuery {
44
query: string;
55
constant: number;
66
stream?: string;
77
startTimeInMicro?: number;
88
endTimeInMicro?: number;
9-
sqlMode: false;
9+
sqlMode: boolean;
1010
pagination?: {
1111
rows: number;
1212
};

0 commit comments

Comments
 (0)