Opentsdb: Add variables to select when interacting with the metric select (#78558)

add variables to select when interacting with the metric select

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', () => {

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 (

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) => {