TemplateVariables: Introduces $__searchFilter to Query Variables (#19858)

* WIP: Initial hardcoded version

* Feature: Introduces SearchFiltering to Graphite

* Feature: Adds searchFiltering to MySql

* Tests: Adds tests to Graphite and MySql

* Feature: Adds $__searchFilter to TestData

* Refactor: Adds searchFilter to Postgres and extracts function

* Tests: Adds tests to variable

* Refactor: Adds debounce and lodash import optimization

* Docs: Adds documentation

* Refactor: Removes unused function and fixes typo

* Docs: Updates docs

* Fixed issue with UI not updating when no  was used due to async func and no .apply in the non lazy path

public/app/plugins/datasource/postgres/datasource.ts

@@ -7,6 +7,7 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 //Types
 import { PostgresQueryForInterpolation } from './types';
+import { interpolateSearchFilter } from '../../../features/templating/variable';
 
 export class PostgresDatasource {
   id: any;
@@ -132,10 +133,17 @@ export class PostgresDatasource {
       refId = optionalOptions.variable.name;
     }
 
+    const rawSql = interpolateSearchFilter({
+      query: this.templateSrv.replace(query, {}, this.interpolateVariable),
+      options: optionalOptions,
+      wildcardChar: '%',
+      quoteLiteral: true,
+    });
+
     const interpolatedQuery = {
       refId: refId,
       datasourceId: this.id,
-      rawSql: this.templateSrv.replace(query, {}, this.interpolateVariable),
+      rawSql,
       format: 'table',
     };
 

public/app/plugins/datasource/postgres/specs/datasource.test.ts

@@ -1,6 +1,6 @@
 import { PostgresDatasource } from '../datasource';
 import { CustomVariable } from 'app/features/templating/custom_variable';
-import { toUtc, dateTime } from '@grafana/data';
+import { dateTime, toUtc } from '@grafana/data';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { IQService } from 'angular';
 import { TemplateSrv } from 'app/features/templating/template_srv';
@@ -128,6 +128,82 @@ describe('PostgreSQLDatasource', () => {
     });
   });
 
+  describe('When performing metricFindQuery with $__searchFilter and a searchFilter is given', () => {
+    let results: any;
+    let calledWith: any = {};
+    const query = 'select title from atable where title LIKE $__searchFilter';
+    const response = {
+      results: {
+        tempvar: {
+          meta: {
+            rowCount: 3,
+          },
+          refId: 'tempvar',
+          tables: [
+            {
+              columns: [{ text: 'title' }, { text: 'text' }],
+              rows: [['aTitle', 'some text'], ['aTitle2', 'some text2'], ['aTitle3', 'some text3']],
+            },
+          ],
+        },
+      },
+    };
+
+    beforeEach(() => {
+      ctx.backendSrv.datasourceRequest = jest.fn(options => {
+        calledWith = options;
+        return Promise.resolve({ data: response, status: 200 });
+      });
+      ctx.ds.metricFindQuery(query, { searchFilter: 'aTit' }).then((data: any) => {
+        results = data;
+      });
+    });
+
+    it('should return list of all column values', () => {
+      expect(ctx.backendSrv.datasourceRequest).toBeCalledTimes(1);
+      expect(calledWith.data.queries[0].rawSql).toBe("select title from atable where title LIKE 'aTit%'");
+      expect(results.length).toBe(6);
+    });
+  });
+
+  describe('When performing metricFindQuery with $__searchFilter but no searchFilter is given', () => {
+    let results: any;
+    let calledWith: any = {};
+    const query = 'select title from atable where title LIKE $__searchFilter';
+    const response = {
+      results: {
+        tempvar: {
+          meta: {
+            rowCount: 3,
+          },
+          refId: 'tempvar',
+          tables: [
+            {
+              columns: [{ text: 'title' }, { text: 'text' }],
+              rows: [['aTitle', 'some text'], ['aTitle2', 'some text2'], ['aTitle3', 'some text3']],
+            },
+          ],
+        },
+      },
+    };
+
+    beforeEach(() => {
+      ctx.backendSrv.datasourceRequest = jest.fn(options => {
+        calledWith = options;
+        return Promise.resolve({ data: response, status: 200 });
+      });
+      ctx.ds.metricFindQuery(query, {}).then((data: any) => {
+        results = data;
+      });
+    });
+
+    it('should return list of all column values', () => {
+      expect(ctx.backendSrv.datasourceRequest).toBeCalledTimes(1);
+      expect(calledWith.data.queries[0].rawSql).toBe("select title from atable where title LIKE '%'");
+      expect(results.length).toBe(6);
+    });
+  });
+
   describe('When performing metricFindQuery with key, value columns', () => {
     let results: any;
     const query = 'select * from atable';