Variable-editor

src/components/MetaInspector.tsx

@@ -1,10 +1,10 @@
 import { DataFrame, MetadataInspectorProps } from '@grafana/data';
 import { DataSourceOptions } from '@grafana/google-sdk';
 import React, { PureComponent } from 'react';
-import { DataSource } from '../DataSource';
+import { GoogleSheetsDataSource } from '../datasource';
 import { SheetResponseMeta, SheetsQuery } from '../types';
 
-export type Props = MetadataInspectorProps<DataSource, SheetsQuery, DataSourceOptions>;
+export type Props = MetadataInspectorProps<GoogleSheetsDataSource, SheetsQuery, DataSourceOptions>;
 
 export class MetaInspector extends PureComponent<Props> {
   state = { index: 0 };

src/components/QueryEditor.tsx

@@ -2,12 +2,12 @@ import { QueryEditorProps } from '@grafana/data';
 import { DataSourceOptions } from '@grafana/google-sdk';
 import { InlineFieldRow, InlineFormLabel, InlineSwitch, Input, LinkButton, Segment, SegmentAsync } from '@grafana/ui';
 import React, { ChangeEvent, PureComponent } from 'react';
-import { DataSource } from '../DataSource';
+import { GoogleSheetsDataSource } from '../datasource';
 import { SheetsQuery } from '../types';
 import { reportInteraction } from '@grafana/runtime';
 import { css } from '@emotion/css';
 
-type Props = QueryEditorProps<DataSource, SheetsQuery, DataSourceOptions>;
+type Props = QueryEditorProps<GoogleSheetsDataSource, SheetsQuery, DataSourceOptions>;
 
 export function getGoogleSheetRangeInfoFromURL(url: string): Partial<SheetsQuery> {
   let idx = url?.indexOf('/d/');

src/DataSource.ts → src/datasource.ts

@@ -7,15 +7,17 @@ import {
 } from '@grafana/data';
 import { DataSourceOptions } from '@grafana/google-sdk';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
-import { SheetsQuery } from './types';
 import { Observable } from 'rxjs';
 import { trackRequest } from 'tracking';
+import { SheetsQuery } from './types';
+import { GoogleSheetsVariableSupport } from './variables';
 
-export class DataSource extends DataSourceWithBackend<SheetsQuery, DataSourceOptions> {
+export class GoogleSheetsDataSource extends DataSourceWithBackend<SheetsQuery, DataSourceOptions> {
   authType: string;
   constructor(instanceSettings: DataSourceInstanceSettings<DataSourceOptions>) {
     super(instanceSettings);
     this.authType = instanceSettings.jsonData.authenticationType;
+    this.variables = new GoogleSheetsVariableSupport(this);
   }
 
   query(request: DataQueryRequest<SheetsQuery>): Observable<DataQueryResponse> {

src/module.ts

@@ -1,10 +1,12 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { DataSourceOptions } from '@grafana/google-sdk';
 import { ConfigEditor, MetaInspector, QueryEditor } from './components';
-import { DataSource } from './DataSource';
+import { GoogleSheetsDataSource } from './datasource';
 import { SheetsQuery } from './types';
 
-export const plugin = new DataSourcePlugin<DataSource, SheetsQuery, DataSourceOptions>(DataSource)
+export const plugin = new DataSourcePlugin<GoogleSheetsDataSource, SheetsQuery, DataSourceOptions>(
+  GoogleSheetsDataSource
+)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(QueryEditor)
   .setMetadataInspector(MetaInspector);

src/variables.ts

@@ -0,0 +1,26 @@
+import { CustomVariableSupport, DataQueryRequest } from '@grafana/data';
+import { GoogleSheetsDataSource } from './datasource';
+import { QueryEditor } from './components/QueryEditor';
+import { SheetsQuery } from './types';
+
+export class GoogleSheetsVariableSupport extends CustomVariableSupport<GoogleSheetsDataSource, SheetsQuery> {
+  editor = QueryEditor;
+
+  constructor(private datasource: GoogleSheetsDataSource) {
+    super();
+  }
+
+  getDefaultQuery(): Partial<SheetsQuery> {
+    return {
+      refId: 'tempvar',
+    };
+  }
+
+  query(request: DataQueryRequest<SheetsQuery>) {
+    if (!this.datasource) {
+      throw new Error('Datasource not initialized');
+    }
+
+    return this.datasource.query(request);
+  }
+}