-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
ArgQueryEditor.tsx
105 lines (95 loc) · 3.44 KB
/
ArgQueryEditor.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { intersection } from 'lodash';
import React, { useState, useMemo } from 'react';
import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
import Datasource from '../../datasource';
import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
import SubscriptionField from '../SubscriptionField';
import QueryField from './QueryField';
interface ArgQueryEditorProps {
query: AzureMonitorQuery;
datasource: Datasource;
subscriptionId?: string;
onChange: (newQuery: AzureMonitorQuery) => void;
variableOptionGroup: { label: string; options: AzureMonitorOption[] };
setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
}
const ERROR_SOURCE = 'arg-subscriptions';
function selectSubscriptions(
fetchedSubscriptions: string[],
currentSubscriptions?: string[],
currentSubscription?: string
) {
let querySubscriptions = currentSubscriptions || [];
if (querySubscriptions.length === 0 && currentSubscription) {
querySubscriptions = [currentSubscription];
}
if (querySubscriptions.length === 0 && fetchedSubscriptions.length) {
querySubscriptions = [fetchedSubscriptions[0]];
}
const commonSubscriptions = intersection(querySubscriptions, fetchedSubscriptions);
if (fetchedSubscriptions.length && querySubscriptions.length > commonSubscriptions.length) {
// If not all of the query subscriptions are in the list of fetched subscriptions, then
// select only the ones present (or the first one if none is present)
querySubscriptions = commonSubscriptions.length > 0 ? commonSubscriptions : [fetchedSubscriptions[0]];
}
return querySubscriptions;
}
const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
query,
datasource,
subscriptionId,
variableOptionGroup,
onChange,
setError,
}) => {
const [subscriptions, setSubscriptions] = useState<AzureMonitorOption[]>([]);
useMemo(() => {
datasource
.getSubscriptions()
.then((results) => {
const fetchedSubscriptions = results.map((v) => ({ label: v.text, value: v.value, description: v.value }));
setSubscriptions(fetchedSubscriptions);
setError(ERROR_SOURCE, undefined);
onChange({
...query,
subscriptions: selectSubscriptions(
fetchedSubscriptions.map((v) => v.value),
query.subscriptions,
query.subscription
),
});
})
.catch((err) => setError(ERROR_SOURCE, err));
// We are only interested in re-fetching subscriptions if the data source changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [datasource]);
return (
<span data-testid="azure-monitor-arg-query-editor-with-experimental-ui">
<EditorRows>
<EditorRow>
<EditorFieldGroup>
<SubscriptionField
multiSelect
subscriptions={subscriptions}
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</EditorFieldGroup>
</EditorRow>
</EditorRows>
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</span>
);
};
export default ArgQueryEditor;