Skip to content

Commit 2d6ff8b

Browse files
radchukdradchukd
authored
Merge pull request #15 from tinybirdco/feat/show-all-params
Show all params
2 parents 1ab5fe5 + f6b21f2 commit 2d6ff8b

File tree

3 files changed

+75
-83
lines changed

3 files changed

+75
-83
lines changed

‎src/components/ConfigEditor.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { ChangeEvent } from 'react';
1+
import React, { ChangeEvent, useEffect } from 'react';
22
import { InlineField, Input, InlineFieldRow } from '@grafana/ui';
33
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
4-
import { TinybirdOptions, TinybirdSecureJsonData } from '../types';
4+
import { DEFAULT_HOST, TinybirdOptions, TinybirdSecureJsonData } from '../types';
55

66
export default function ConfigEditor({
77
options,
@@ -18,6 +18,18 @@ export default function ConfigEditor({
1818
});
1919
};
2020

21+
// Set default host
22+
useEffect(() => {
23+
onOptionsChange({
24+
...options,
25+
secureJsonData: {
26+
...options.secureJsonData!,
27+
host: options.secureJsonData?.host ?? DEFAULT_HOST,
28+
},
29+
});
30+
// eslint-disable-next-line react-hooks/exhaustive-deps
31+
}, []);
32+
2133
return (
2234
<div className="gf-form-group">
2335
<h3 className="page-heading">Tinybird Options</h3>
@@ -27,10 +39,10 @@ export default function ConfigEditor({
2739
<Input
2840
name="host"
2941
width={50}
30-
value={options.secureJsonData?.host ?? ''}
42+
value={options.secureJsonData?.host}
3143
onChange={onOptionChange}
3244
spellCheck={false}
33-
placeholder="https://api.tinybird.co/"
45+
placeholder={DEFAULT_HOST}
3446
required
3547
/>
3648
</InlineField>

‎src/components/QueryEditor.tsx‎

Lines changed: 57 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,12 @@ import {
1818
DEFAULT_QUERY,
1919
OutputFormat,
2020
SUPPORTED_OUTPUT_FORMATS,
21-
TinybirdNode,
2221
TinybirdOptions,
2322
TinybirdParam,
2423
TinybirdPipe,
2524
TinybirdQuery,
2625
} from '../types';
27-
import { capitalize, isEqual, pickBy } from 'lodash';
26+
import { capitalize, isEqual, pickBy, uniqWith } from 'lodash';
2827

2928
export default function QueryEditor({
3029
app,
@@ -36,8 +35,6 @@ export default function QueryEditor({
3635
const styles = getStyles(theme);
3736
const [isOptionsOpen, setIsOptionsOpen] = useState(false);
3837
const [pipes, setPipes] = useState<TinybirdPipe[]>([]);
39-
const [nodes, setNodes] = useState<TinybirdNode[]>([]);
40-
const [nodeIndex, setNodeIndex] = useState(0);
4138
const formatAsOptions: Array<SelectableValue<OutputFormat>> = SUPPORTED_OUTPUT_FORMATS.map((f) => ({
4239
label: capitalize(f),
4340
value: f,
@@ -67,33 +64,33 @@ export default function QueryEditor({
6764
return;
6865
}
6966

70-
datasource.getNodes(pipe.id).then(setNodes).catch(console.error);
71-
// eslint-disable-next-line react-hooks/exhaustive-deps
72-
}, [datasource.url, pipes, query.pipeName]);
73-
74-
useEffect(() => {
75-
if (!nodes.length) {
76-
return;
77-
}
67+
datasource
68+
.getNodes(pipe.id)
69+
.then((nodes) => {
70+
const paramOptions = Object.fromEntries(
71+
uniqWith(
72+
nodes.reduce((acc, node) => [...acc, ...node.params], []),
73+
isEqual
74+
).map(({ name, ...param }) => [name, pickBy(param)])
75+
) as Record<string, TinybirdParam>;
7876

79-
const paramOptions = Object.fromEntries(
80-
nodes[nodeIndex].params.map(({ name, ...param }: any) => [name, pickBy(param)])
81-
);
82-
const params =
83-
!query.params || isEqual(query.params, DEFAULT_QUERY.params)
84-
? Object.entries(paramOptions).reduce(
85-
(acc, [name, param]) => ({ ...acc, [name]: String((param as TinybirdParam).default ?? '') }),
86-
{}
87-
)
88-
: query.params;
77+
const params =
78+
!query.params || isEqual(query.params, DEFAULT_QUERY.params)
79+
? Object.entries(paramOptions).reduce(
80+
(acc, [name, param]) => ({ ...acc, [name]: String(param.default ?? '') }),
81+
{}
82+
)
83+
: query.params;
8984

90-
onChange({
91-
...query,
92-
paramOptions,
93-
params,
94-
});
85+
onChange({
86+
...query,
87+
paramOptions,
88+
params,
89+
});
90+
})
91+
.catch(console.error);
9592
// eslint-disable-next-line react-hooks/exhaustive-deps
96-
}, [nodes, nodeIndex]);
93+
}, [datasource.url, pipes, query.pipeName]);
9794

9895
return (
9996
<div className={styles.root}>
@@ -136,65 +133,46 @@ export default function QueryEditor({
136133
)}
137134

138135
<div className={styles.cogIconWrapper}>
139-
<IconButton
140-
name="cog"
141-
variant={isOptionsOpen ? 'primary' : 'secondary'}
142-
onClick={() => setIsOptionsOpen((value) => !value)}
143-
/>
136+
{query.format === 'timeseries' && (
137+
<IconButton
138+
name="cog"
139+
variant={isOptionsOpen ? 'primary' : 'secondary'}
140+
onClick={() => setIsOptionsOpen((value) => !value)}
141+
/>
142+
)}
144143
</div>
145144
</InlineFieldRow>
146145

147146
{isOptionsOpen && (
148147
<InlineFieldRow>
149-
<InlineField label="Node index" tooltip="Index of the pipe nodes" labelWidth={15}>
148+
<InlineField
149+
label="Extrapolate"
150+
labelWidth={15}
151+
tooltip="Turn on if you don't like when last data point in time series much lower then previous"
152+
>
153+
<InlineSwitch
154+
value={query.extrapolate}
155+
onChange={({ currentTarget: { value } }) => onChange({ ...query, extrapolate: !!value })}
156+
/>
157+
</InlineField>
158+
<InlineField label="Time key" labelWidth={16} tooltip="Time key of the data">
150159
<Input
151-
value={nodeIndex}
152-
type="number"
153-
min={0}
154-
max={nodes.length - 1}
155-
onChange={({ currentTarget: { valueAsNumber } }) => setNodeIndex(valueAsNumber)}
160+
value={query.timeKey}
161+
onChange={({ currentTarget: { value } }) => onChange({ ...query, timeKey: value })}
162+
/>
163+
</InlineField>
164+
<InlineField label="Data keys" labelWidth={16} tooltip="Comma-separated keys to access values of the data">
165+
<Input
166+
value={query.dataKeys}
167+
onChange={({ currentTarget: { value } }) => onChange({ ...query, dataKeys: value })}
168+
/>
169+
</InlineField>
170+
<InlineField label="Label keys" labelWidth={16} tooltip="Comma-separated keys to access labels of the data">
171+
<Input
172+
value={query.labelKeys}
173+
onChange={({ currentTarget: { value } }) => onChange({ ...query, labelKeys: value })}
156174
/>
157175
</InlineField>
158-
{query.format === 'timeseries' && (
159-
<>
160-
<InlineField
161-
label="Extrapolate"
162-
labelWidth={15}
163-
tooltip="Turn on if you don't like when last data point in time series much lower then previous"
164-
>
165-
<InlineSwitch
166-
value={query.extrapolate}
167-
onChange={({ currentTarget: { value } }) => onChange({ ...query, extrapolate: !!value })}
168-
/>
169-
</InlineField>
170-
<InlineField label="Time key" labelWidth={16} tooltip="Time key of the data">
171-
<Input
172-
value={query.timeKey}
173-
onChange={({ currentTarget: { value } }) => onChange({ ...query, timeKey: value })}
174-
/>
175-
</InlineField>
176-
<InlineField
177-
label="Data keys"
178-
labelWidth={16}
179-
tooltip="Comma-separated keys to access values of the data"
180-
>
181-
<Input
182-
value={query.dataKeys}
183-
onChange={({ currentTarget: { value } }) => onChange({ ...query, dataKeys: value })}
184-
/>
185-
</InlineField>
186-
<InlineField
187-
label="Label keys"
188-
labelWidth={16}
189-
tooltip="Comma-separated keys to access labels of the data"
190-
>
191-
<Input
192-
value={query.labelKeys}
193-
onChange={({ currentTarget: { value } }) => onChange({ ...query, labelKeys: value })}
194-
/>
195-
</InlineField>
196-
</>
197-
)}
198176
</InlineFieldRow>
199177
)}
200178

‎src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ export const SUPPORTED_OUTPUT_FORMATS = ['table', 'logs', 'timeseries'] as const
44

55
export type OutputFormat = (typeof SUPPORTED_OUTPUT_FORMATS)[number];
66

7+
export const DEFAULT_HOST = 'https://api.tinybird.co' as const;
8+
79
export interface TinybirdQuery extends DataQuery {
810
format: OutputFormat;
911
pipeName: string;

0 commit comments

Comments
 (0)