1import React from 'react';
2
3import Datasource from '../../datasource';
4import { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish } from '../../types';
5import SubscriptionField from '../SubscriptionField';
6import MetricNamespaceField from './MetricNamespaceField';
7import ResourceTypeField from './ResourceTypeField';
8import ResourceGroupsField from './ResourceGroupsField';
9import ResourceNameField from './ResourceNameField';
10import MetricNameField from './MetricNameField';
11import AggregationField from './AggregationField';
12import TimeGrainField from './TimeGrainField';
13import DimensionFields from './DimensionFields';
14import TopField from './TopField';
15import LegendFormatField from './LegendFormatField';
16import { InlineFieldRow } from '@grafana/ui';
17import {
18  useMetricNames,
19  useMetricNamespaces,
20  useResourceGroups,
21  useResourceNames,
22  useResourceTypes,
23  useSubscriptions,
24  useMetricMetadata,
25} from './dataHooks';
26
27interface MetricsQueryEditorProps {
28  query: AzureMonitorQuery;
29  datasource: Datasource;
30  subscriptionId?: string;
31  onChange: (newQuery: AzureMonitorQuery) => void;
32  variableOptionGroup: { label: string; options: AzureMonitorOption[] };
33  setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
34}
35
36const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
37  query,
38  datasource,
39  subscriptionId,
40  variableOptionGroup,
41  onChange,
42  setError,
43}) => {
44  const metricsMetadata = useMetricMetadata(query, datasource, onChange);
45  const subscriptions = useSubscriptions(query, datasource, onChange, setError);
46  const resourceGroups = useResourceGroups(query, datasource, onChange, setError);
47  const resourceTypes = useResourceTypes(query, datasource, onChange, setError);
48  const resourceNames = useResourceNames(query, datasource, onChange, setError);
49  const metricNames = useMetricNames(query, datasource, onChange, setError);
50  const metricNamespaces = useMetricNamespaces(query, datasource, onChange, setError);
51
52  return (
53    <div data-testid="azure-monitor-metrics-query-editor">
54      <InlineFieldRow>
55        <SubscriptionField
56          subscriptions={subscriptions}
57          query={query}
58          datasource={datasource}
59          subscriptionId={subscriptionId}
60          variableOptionGroup={variableOptionGroup}
61          onQueryChange={onChange}
62          setError={setError}
63        />
64
65        <ResourceGroupsField
66          resourceGroups={resourceGroups}
67          query={query}
68          datasource={datasource}
69          subscriptionId={subscriptionId}
70          variableOptionGroup={variableOptionGroup}
71          onQueryChange={onChange}
72          setError={setError}
73        />
74      </InlineFieldRow>
75
76      <InlineFieldRow>
77        <ResourceTypeField
78          resourceTypes={resourceTypes}
79          query={query}
80          datasource={datasource}
81          subscriptionId={subscriptionId}
82          variableOptionGroup={variableOptionGroup}
83          onQueryChange={onChange}
84          setError={setError}
85        />
86        <ResourceNameField
87          resourceNames={resourceNames}
88          query={query}
89          datasource={datasource}
90          subscriptionId={subscriptionId}
91          variableOptionGroup={variableOptionGroup}
92          onQueryChange={onChange}
93          setError={setError}
94        />
95      </InlineFieldRow>
96
97      <InlineFieldRow>
98        <MetricNamespaceField
99          metricNamespaces={metricNamespaces}
100          query={query}
101          datasource={datasource}
102          subscriptionId={subscriptionId}
103          variableOptionGroup={variableOptionGroup}
104          onQueryChange={onChange}
105          setError={setError}
106        />
107        <MetricNameField
108          metricNames={metricNames}
109          query={query}
110          datasource={datasource}
111          subscriptionId={subscriptionId}
112          variableOptionGroup={variableOptionGroup}
113          onQueryChange={onChange}
114          setError={setError}
115        />
116      </InlineFieldRow>
117      <InlineFieldRow>
118        <AggregationField
119          query={query}
120          datasource={datasource}
121          subscriptionId={subscriptionId}
122          variableOptionGroup={variableOptionGroup}
123          onQueryChange={onChange}
124          setError={setError}
125          aggregationOptions={metricsMetadata?.aggOptions ?? []}
126          isLoading={metricsMetadata.isLoading}
127        />
128        <TimeGrainField
129          query={query}
130          datasource={datasource}
131          subscriptionId={subscriptionId}
132          variableOptionGroup={variableOptionGroup}
133          onQueryChange={onChange}
134          setError={setError}
135          timeGrainOptions={metricsMetadata?.timeGrains ?? []}
136        />
137      </InlineFieldRow>
138      <DimensionFields
139        query={query}
140        datasource={datasource}
141        subscriptionId={subscriptionId}
142        variableOptionGroup={variableOptionGroup}
143        onQueryChange={onChange}
144        setError={setError}
145        dimensionOptions={metricsMetadata?.dimensions ?? []}
146      />
147      <TopField
148        query={query}
149        datasource={datasource}
150        subscriptionId={subscriptionId}
151        variableOptionGroup={variableOptionGroup}
152        onQueryChange={onChange}
153        setError={setError}
154      />
155      <LegendFormatField
156        query={query}
157        datasource={datasource}
158        subscriptionId={subscriptionId}
159        variableOptionGroup={variableOptionGroup}
160        onQueryChange={onChange}
161        setError={setError}
162      />
163    </div>
164  );
165};
166
167export default MetricsQueryEditor;
168