From c3eb1ffe850be4f3ee4093987160fbb29e196e2f Mon Sep 17 00:00:00 2001
From: Calle Gustafsson <67468+tw1nk@users.noreply.github.com>
Date: Mon, 27 Dec 2021 08:59:04 +0100
Subject: [PATCH] Cloud Monitoring: Adds metric type to Metric drop down
 options (#43268)

* Fixes Google Cloud Monitoring Deduplication

Bug: #42931

* Use useStyles instead of stylesFactory
---
 .../cloud-monitoring/components/Metrics.tsx   | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
index 6822fd3f4a1..b7f39a7cb83 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { startCase, uniqBy } from 'lodash';
 
-import { Select } from '@grafana/ui';
+import { Select, useTheme2, getSelectStyles, useStyles2 } from '@grafana/ui';
 import { TemplateSrv } from '@grafana/runtime';
-import { SelectableValue } from '@grafana/data';
+import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 import { QueryEditorRow, QueryEditorField } from '.';
 import CloudMonitoringDatasource from '../datasource';
 import { INNER_LABEL_WIDTH, LABEL_WIDTH, SELECT_WIDTH } from '../constants';
 import { MetricDescriptor } from '../types';
+import { css } from '@emotion/css';
 
 export interface Props {
   onChange: (metricDescriptor: MetricDescriptor) => void;
@@ -39,6 +40,11 @@ export function Metrics(props: Props) {
     projectName: null,
   });
 
+  const theme = useTheme2();
+  const selectStyles = getSelectStyles(theme);
+
+  const customStyle = useStyles2(getStyles);
+
   const { services, service, metrics, metricDescriptors } = state;
   const { metricType, templateVariableOptions, projectName, templateSrv, datasource, onChange, children } = props;
 
@@ -55,13 +61,21 @@ export function Metrics(props: Props) {
       if (!selectedMetricDescriptor) {
         return [];
       }
+
       const metricsByService = metricDescriptors
         .filter((m) => m.service === selectedMetricDescriptor.service)
         .map((m) => ({
           service: m.service,
           value: m.type,
           label: m.displayName,
-          description: m.description,
+          component: function optionComponent() {
+            return (
+              <div>
+                <div className={customStyle}>{m.type}</div>
+                <div className={selectStyles.optionDescription}>{m.description}</div>
+              </div>
+            );
+          },
         }));
       return metricsByService;
     };
@@ -84,7 +98,7 @@ export function Metrics(props: Props) {
       }
     };
     loadMetricDescriptors();
-  }, [datasource, getSelectedMetricDescriptor, metricType, projectName]);
+  }, [datasource, getSelectedMetricDescriptor, metricType, projectName, customStyle, selectStyles.optionDescription]);
 
   const onServiceChange = ({ value: service }: any) => {
     const metrics = metricDescriptors
@@ -159,3 +173,10 @@ export function Metrics(props: Props) {
     </>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => css`
+  label: grafana-select-option-description;
+  font-weight: normal;
+  font-style: italic;
+  color: ${theme.colors.text.secondary};
+`;