Azure Monitor: Show loading indicators for dropdowns (#33451)

Show loading indicators for dropdowns in azure monitor

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx

@@ -8,6 +8,7 @@ import { AzureQueryEditorFieldProps, AzureMonitorOption } from '../../types';
 
 interface AggregationFieldProps extends AzureQueryEditorFieldProps {
   aggregationOptions: AzureMonitorOption[];
+  isLoading: boolean;
 }
 
 const AggregationField: React.FC<AggregationFieldProps> = ({
@@ -15,6 +16,7 @@ const AggregationField: React.FC<AggregationFieldProps> = ({
   variableOptionGroup,
   onQueryChange,
   aggregationOptions,
+  isLoading,
 }) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
@@ -46,6 +48,7 @@ const AggregationField: React.FC<AggregationFieldProps> = ({
         onChange={handleChange}
         options={options}
         width={38}
+        isLoading={isLoading}
       />
     </Field>
   );

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx

@@ -16,21 +16,26 @@ const MetricName: React.FC<AzureQueryEditorFieldProps> = ({
   setError,
 }) => {
   const [metricNames, setMetricNames] = useState<AzureMonitorOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const { resourceGroup, metricDefinition, resourceName, metricNamespace } = query.azureMonitor;
-
     if (!(subscriptionId && resourceGroup && metricDefinition && resourceName && metricNamespace)) {
       metricNames.length > 0 && setMetricNames([]);
       return;
     }
+    setIsLoading(true);
 
     datasource
       .getMetricNames(subscriptionId, resourceGroup, metricDefinition, resourceName, metricNamespace)
       .then((results) => {
         setMetricNames(results.map(toOption));
+        setIsLoading(false);
       })
-      .catch((err) => setError(ERROR_SOURCE, err));
+      .catch((err) => {
+        setError(ERROR_SOURCE, err);
+        setIsLoading(false);
+      });
   }, [datasource, metricNames.length, query.azureMonitor, setError, subscriptionId]);
 
   const handleChange = useCallback(
@@ -60,6 +65,7 @@ const MetricName: React.FC<AzureQueryEditorFieldProps> = ({
         onChange={handleChange}
         options={options}
         width={38}
+        isLoading={isLoading}
       />
     </Field>
   );

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx

@@ -16,15 +16,16 @@ const MetricNamespaceField: React.FC<AzureQueryEditorFieldProps> = ({
   setError,
 }) => {
   const [metricNamespaces, setMetricNamespaces] = useState<AzureMonitorOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const { resourceGroup, metricDefinition, resourceName } = query.azureMonitor;
-
     if (!(subscriptionId && resourceGroup && metricDefinition && resourceName)) {
       metricNamespaces.length > 0 && setMetricNamespaces([]);
       return;
     }
 
+    setIsLoading(true);
     datasource
       .getMetricNamespaces(subscriptionId, resourceGroup, metricDefinition, resourceName)
       .then((results) => {
@@ -38,8 +39,12 @@ const MetricNamespaceField: React.FC<AzureQueryEditorFieldProps> = ({
           });
         }
         setMetricNamespaces(results.map(toOption));
+        setIsLoading(false);
       })
-      .catch((err) => setError(ERROR_SOURCE, err));
+      .catch((err) => {
+        setError(ERROR_SOURCE, err);
+        setIsLoading(false);
+      });
   }, [datasource, metricNamespaces.length, onQueryChange, query, setError, subscriptionId]);
 
   const handleChange = useCallback(
@@ -72,6 +77,7 @@ const MetricNamespaceField: React.FC<AzureQueryEditorFieldProps> = ({
         onChange={handleChange}
         options={options}
         width={38}
+        isLoading={isLoading}
       />
     </Field>
   );

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx

@@ -103,6 +103,7 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
           onQueryChange={onChange}
           setError={setError}
           aggregationOptions={metricsMetadata?.aggOptions ?? []}
+          isLoading={metricsMetadata.isLoading}
         />
         <TimeGrainField
           query={query}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/metrics.ts

@@ -8,6 +8,7 @@ export interface MetricMetadata {
   aggOptions: Array<{ label: string; value: string }>;
   timeGrains: Array<{ label: string; value: string }>;
   dimensions: Array<{ label: string; value: string }>;
+  isLoading: boolean;
 }
 
 export function useMetricsMetadata(
@@ -20,6 +21,7 @@ export function useMetricsMetadata(
     aggOptions: [],
     timeGrains: [],
     dimensions: [],
+    isLoading: false,
   });
 
   useEffect(() => {
@@ -35,7 +37,7 @@ export function useMetricsMetadata(
     ) {
       return;
     }
-
+    setMetricMetadata((prevState) => ({ ...prevState, isLoading: true }));
     datasource
       .getMetricMetadata(
         subscriptionId,
@@ -69,6 +71,7 @@ export function useMetricsMetadata(
           aggOptions: aggregations,
           timeGrains: metadata.supportedTimeGrains,
           dimensions: metadata.dimensions,
+          isLoading: false,
         });
       })
       .catch((err) => {