Skip to content

Commit a7b2b7a

Browse files
marcusolssonmarcusolsson
committed
Add experimental settings for variable editor
1 parent 549711c commit a7b2b7a

File tree

5 files changed

+146
-29
lines changed

5 files changed

+146
-29
lines changed

‎src/components/ExperimentalEditor.tsx

Lines changed: 109 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,34 @@ interface Props {
88
query: JsonApiQuery;
99
onChange: (query: JsonApiQuery) => void;
1010
onRunQuery: () => void;
11+
editorContext: string;
1112
}
1213

13-
export const ExperimentalEditor = ({ query, onChange, onRunQuery }: Props) => {
14+
export const ExperimentalEditor = ({ query, onChange, onRunQuery, editorContext }: Props) => {
15+
// Group by
1416
const { groupByField } = query;
1517

1618
const onGroupByChange = (field?: string) => {
1719
onChange({ ...query, groupByField: field });
1820
onRunQuery();
1921
};
2022

23+
// Variable label
24+
const { variableTextField } = query;
25+
26+
const onVariableLabelChange = (field?: string) => {
27+
onChange({ ...query, variableTextField: field });
28+
onRunQuery();
29+
};
30+
31+
// Variable value
32+
const { variableValueField } = query;
33+
34+
const onVariableValueChange = (field?: string) => {
35+
onChange({ ...query, variableValueField: field });
36+
onRunQuery();
37+
};
38+
2139
const fieldNames = query.fields
2240
.map((field) => {
2341
const pathArray = (JSONPath as any).toPathArray(field.jsonPath);
@@ -30,30 +48,96 @@ export const ExperimentalEditor = ({ query, onChange, onRunQuery }: Props) => {
3048
<InfoBox severity="warning">
3149
{`The features listed here are experimental. They might change or be removed without notice. In the tooltip for each feature, there's a link to a pull request where you can submit feedback for that feature.`}
3250
</InfoBox>
33-
<InlineFieldRow>
34-
<InlineField
35-
label="Group by"
36-
tooltip={
37-
<>
38-
<p>
39-
{
40-
'Groups the query result into multiple results. This can be useful when you want to graph multiple time series in the same panel.'
41-
}
42-
</p>
43-
<a href="https://github.com/marcusolsson/grafana-json-datasource">Submit feedback</a>
44-
</>
45-
}
46-
>
47-
<Select
48-
placeholder={'Field'}
49-
width={12}
50-
isClearable={true}
51-
value={fieldNames.find((v) => v.value === groupByField)}
52-
options={fieldNames}
53-
onChange={(value) => onGroupByChange(value?.value)}
54-
/>
55-
</InlineField>
56-
</InlineFieldRow>
51+
{editorContext === 'default' && (
52+
<>
53+
<InlineFieldRow>
54+
<InlineField
55+
label="Group by"
56+
tooltip={
57+
<>
58+
<p>
59+
{
60+
'Groups the query result into multiple results. This can be useful when you want to graph multiple time series in the same panel.'
61+
}
62+
</p>
63+
<a
64+
href="https://github.com/marcusolsson/grafana-json-datasource/issues/36"
65+
target="_blank"
66+
rel="noreferrer"
67+
>
68+
Share feedback
69+
</a>
70+
</>
71+
}
72+
>
73+
<Select
74+
placeholder={'Field'}
75+
width={12}
76+
isClearable={true}
77+
value={fieldNames.find((v) => v.value === groupByField)}
78+
options={fieldNames}
79+
onChange={(value) => onGroupByChange(value?.value)}
80+
/>
81+
</InlineField>
82+
</InlineFieldRow>
83+
</>
84+
)}
85+
{editorContext === 'variables' && (
86+
<>
87+
<InlineFieldRow>
88+
<InlineField
89+
label="Variable text"
90+
tooltip={
91+
<>
92+
<p>{'Field to use for the text label of a variable query.'}</p>
93+
<a
94+
href="https://github.com/marcusolsson/grafana-json-datasource/issues/79"
95+
target="_blank"
96+
rel="noreferrer"
97+
>
98+
Share feedback
99+
</a>
100+
</>
101+
}
102+
>
103+
<Select
104+
placeholder={'Field'}
105+
width={12}
106+
isClearable={true}
107+
value={fieldNames.find((v) => v.value === variableTextField)}
108+
options={fieldNames}
109+
onChange={(value) => onVariableLabelChange(value?.value)}
110+
/>
111+
</InlineField>
112+
</InlineFieldRow>
113+
<InlineFieldRow>
114+
<InlineField
115+
label="Variable value"
116+
tooltip={
117+
<>
118+
<p>{'Field to use for the value of a variable query.'}</p>
119+
<a
120+
href="https://github.com/marcusolsson/grafana-json-datasource/issues/79"
121+
target="_blank"
122+
rel="noreferrer"
123+
>
124+
Share feedback
125+
</a>
126+
</>
127+
}
128+
>
129+
<Select
130+
placeholder={'Field'}
131+
width={12}
132+
isClearable={true}
133+
value={fieldNames.find((v) => v.value === variableValueField)}
134+
options={fieldNames}
135+
onChange={(value) => onVariableValueChange(value?.value)}
136+
/>
137+
</InlineField>
138+
</InlineFieldRow>
139+
</>
140+
)}
57141
</>
58142
);
59143
};

‎src/components/QueryEditor.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,18 @@ const sensitiveHeaders = ['authorization', 'proxy-authorization', 'x-api-key'];
1717

1818
interface Props extends QueryEditorProps<JsonDataSource, JsonApiQuery, JsonApiDataSourceOptions> {
1919
limitFields?: number;
20+
editorContext?: string;
2021
}
2122

22-
export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, limitFields, datasource, range, ...props }) => {
23+
export const QueryEditor: React.FC<Props> = ({
24+
onRunQuery,
25+
onChange,
26+
limitFields,
27+
datasource,
28+
range,
29+
editorContext = 'default',
30+
...props
31+
}) => {
2332
const [bodyType, setBodyType] = useState('plaintext');
2433
const [tabIndex, setTabIndex] = useState(0);
2534
const theme = useTheme();
@@ -144,7 +153,9 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, limitFields
144153
},
145154
{
146155
title: 'Experimental',
147-
content: <ExperimentalEditor query={query} onChange={onChange} onRunQuery={onRunQuery} />,
156+
content: (
157+
<ExperimentalEditor query={query} onChange={onChange} onRunQuery={onRunQuery} editorContext={editorContext} />
158+
),
148159
},
149160
];
150161

‎src/components/VariableQueryEditor.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,14 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = (props) => {
2121
}
2222
};
2323

24-
return <QueryEditor {...props} onRunQuery={() => {}} onChange={saveQuery} query={query} limitFields={1} />;
24+
return (
25+
<QueryEditor
26+
{...props}
27+
onRunQuery={() => {}}
28+
onChange={saveQuery}
29+
query={query}
30+
limitFields={2}
31+
editorContext="variables"
32+
/>
33+
);
2534
};

‎src/datasource.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,18 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
6060
async metricFindQuery?(query: JsonApiQuery): Promise<MetricFindValue[]> {
6161
const frames = await this.doRequest(query);
6262
const frame = frames[0];
63-
return frame.fields.length > 0 ? frame.fields[0].values.toArray().map((_) => ({ text: _ })) : [];
63+
64+
if (!frame.fields.length) {
65+
return [];
66+
}
67+
68+
const labelField = frame.fields.find((field) => field.name === query.variableTextField) ?? frame.fields[0];
69+
const valueField = frame.fields.find((field) => field.name === query.variableValueField) ?? labelField;
70+
71+
return Array.from({ length: frame.length }).map((_, idx) => ({
72+
text: labelField.values.get(idx),
73+
value: valueField.values.get(idx),
74+
}));
6475
}
6576

6677
/**

‎src/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export interface JsonApiQuery extends DataQuery {
2323

2424
// Experimental
2525
groupByField?: string;
26+
variableTextField?: string;
27+
variableValueField?: string;
2628
}
2729

2830
export const defaultQuery: Partial<JsonApiQuery> = {

0 commit comments

Comments
 (0)