From 1f17e9a044094ffdd2d36deb16a75f5b6d263717 Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Tue, 23 Aug 2022 16:42:59 +0100
Subject: [PATCH] Update effects to avoid retrieving metrics descriptors except
 on project name update (#54091)

---
 .../cloud-monitoring/components/Metrics.tsx   | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
index e9bd10ac2b1..511e2440294 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
@@ -58,6 +58,21 @@ export function Metrics(props: Props) {
     [templateSrv]
   );
 
+  useEffect(() => {
+    const loadMetricDescriptors = async () => {
+      if (projectName) {
+        const metricDescriptors = await datasource.getMetricTypes(projectName);
+        const services = getServicesList(metricDescriptors);
+        setState((prevState) => ({
+          ...prevState,
+          metricDescriptors,
+          services,
+        }));
+      }
+    };
+    loadMetricDescriptors();
+  }, [datasource, projectName, customStyle, selectStyles.optionDescription]);
+
   useEffect(() => {
     const getMetricsList = (metricDescriptors: MetricDescriptor[]) => {
       const selectedMetricDescriptor = getSelectedMetricDescriptor(metricDescriptors, metricType);
@@ -82,26 +97,16 @@ export function Metrics(props: Props) {
         }));
       return metricsByService;
     };
-
-    const loadMetricDescriptors = async () => {
-      if (projectName) {
-        const metricDescriptors = await datasource.getMetricTypes(projectName);
-        const services = getServicesList(metricDescriptors);
-        const metrics = getMetricsList(metricDescriptors);
-        const service = metrics.length > 0 ? metrics[0].service : '';
-        const metricDescriptor = getSelectedMetricDescriptor(metricDescriptors, metricType);
-        setState((prevState) => ({
-          ...prevState,
-          metricDescriptors,
-          services,
-          metrics,
-          service: service,
-          metricDescriptor,
-        }));
-      }
-    };
-    loadMetricDescriptors();
-  }, [datasource, getSelectedMetricDescriptor, metricType, projectName, customStyle, selectStyles.optionDescription]);
+    const metrics = getMetricsList(metricDescriptors);
+    const service = metrics.length > 0 ? metrics[0].service : '';
+    const metricDescriptor = getSelectedMetricDescriptor(metricDescriptors, metricType);
+    setState((prevState) => ({
+      ...prevState,
+      metricDescriptor,
+      metrics,
+      service: service,
+    }));
+  }, [metricDescriptors, getSelectedMetricDescriptor, metricType, customStyle, selectStyles.optionDescription]);
 
   const onServiceChange = ({ value: service }: any) => {
     const metrics = metricDescriptors