From 7cf173b651c06a4a0957c23da38837ffa0b06b9e Mon Sep 17 00:00:00 2001
From: Brendan O'Handley <brendan.ohandley@grafana.com>
Date: Thu, 23 Nov 2023 06:32:35 -0500
Subject: [PATCH] Opentsdb: Add variables to select when interacting with the
 metric select (#78558)

add variables to select when interacting with the metric select
---
 .../opentsdb/components/MetricSection.test.tsx    | 15 ++++++++++++++-
 .../opentsdb/components/OpenTsdbQueryEditor.tsx   | 11 ++++++++++-
 .../app/plugins/datasource/opentsdb/datasource.ts |  4 ++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/opentsdb/components/MetricSection.test.tsx b/public/app/plugins/datasource/opentsdb/components/MetricSection.test.tsx
index 3c40d6a2158..f95c5b9860f 100644
--- a/public/app/plugins/datasource/opentsdb/components/MetricSection.test.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/MetricSection.test.tsx
@@ -16,8 +16,16 @@ const setup = (propOverrides?: Object) => {
     aggregator: 'avg',
     alias: 'alias',
   };
+
+  const varQuery: OpenTsdbQuery = {
+    metric: '$variable',
+    refId: 'A',
+    aggregator: 'avg',
+    alias: 'alias',
+  };
+
   const props: MetricSectionProps = {
-    query,
+    query: !propOverrides ? query : varQuery,
     onChange: onChange,
     onRunQuery: onRunQuery,
     suggestMetrics: suggestMetrics,
@@ -42,6 +50,11 @@ describe('MetricSection', () => {
       setup();
       expect(screen.getByText('cpu')).toBeInTheDocument();
     });
+
+    it('should display variables in the metrics select', () => {
+      setup({ variables: true });
+      expect(screen.getByText('$variable')).toBeInTheDocument();
+    });
   });
 
   describe('metric aggregator', () => {
diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
index ec2518be510..8a4fcba5220 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
@@ -93,12 +93,21 @@ export function OpenTsdbQueryEditor({
   }
 
   function getTextValues(metrics: Array<{ text: string }>) {
-    return metrics.map((value: { text: string }) => {
+    const variables = datasource.getVariables().map((value) => {
+      return {
+        value: textUtil.escapeHtml(value),
+        description: value,
+      };
+    });
+
+    const values = metrics.map((value: { text: string }) => {
       return {
         value: textUtil.escapeHtml(value.text),
         description: value.text,
       };
     });
+
+    return variables.concat(values);
   }
 
   return (
diff --git a/public/app/plugins/datasource/opentsdb/datasource.ts b/public/app/plugins/datasource/opentsdb/datasource.ts
index e24677cae61..ff07de1c770 100644
--- a/public/app/plugins/datasource/opentsdb/datasource.ts
+++ b/public/app/plugins/datasource/opentsdb/datasource.ts
@@ -550,6 +550,10 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
     });
   }
 
+  getVariables(): string[] {
+    return this.templateSrv.getVariables().map((v) => `$${v.name}`);
+  }
+
   mapMetricsToTargets(metrics: any, options: any, tsdbVersion: number) {
     let interpolatedTagValue, arrTagV;
     return _map(metrics, (metricData) => {