From a9b218ff1edec708a9b76b6a65dec7a289b630fe Mon Sep 17 00:00:00 2001
From: Sarah Zinger <sarahzinger@users.noreply.github.com>
Date: Tue, 4 May 2021 15:16:50 -0400
Subject: [PATCH] Azure Monitor: Show loading indicators for dropdowns (#33451)

Show loading indicators for dropdowns in azure monitor
---
 .../components/MetricsQueryEditor/AggregationField.tsx |  3 +++
 .../components/MetricsQueryEditor/MetricNameField.tsx  | 10 ++++++++--
 .../MetricsQueryEditor/MetricNamespaceField.tsx        | 10 ++++++++--
 .../MetricsQueryEditor/MetricsQueryEditor.tsx          |  1 +
 .../components/metrics.ts                              |  5 ++++-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
index 990d29de0fb..73b93cfb475 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
+++ b/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>
   );
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
index 4abf99b5087..034ccae535e 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
+++ b/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>
   );
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
index 3d8e028938b..3b2e86b6570 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
+++ b/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>
   );
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index ac7814ae523..b9246a71d9d 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/metrics.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/metrics.ts
index 5dad776bb73..d6dd2af54e6 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/metrics.ts
+++ b/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) => {