OpenTSDB: Adding lookup limit to OpenTSDB datasource settings (#20647)

* feat: adding lookup limit to OpenTSDB settings

Adding lookup to OpenTSDB datasource settings and using it in the datasource for tag value lookup and suggest

* Document the change.

* feat: UI for configuring OpenTSDB lookup limit.

* Apply prettier.

* Fix compilation error.

docs/sources/features/datasources/opentsdb.md

@@ -106,3 +106,8 @@ datasources:
       tsdbResolution: 1
       tsdbResolution: 1
       tsdbVersion: 1
       tsdbVersion: 1
 ```
 ```
+
+## Lookup limits
+
+By default, at most 1000 records are looked up from OpenTSDB.
+You can change this by modifying the "Lookup Limit" in the OpenTSDB settings page.

public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

-import React from 'react';
-import { FormLabel, Select } from '@grafana/ui';
+import React, { SyntheticEvent } from 'react';
+import { FormLabel, Select, Input } from '@grafana/ui';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { OpenTsdbOptions } from '../types';
 import { OpenTsdbOptions } from '../types';
 
 
@@ -30,7 +30,7 @@ export const OpenTsdbDetails = (props: Props) => {
         <Select
         <Select
           options={tsdbVersions}
           options={tsdbVersions}
           value={tsdbVersions.find(version => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
           value={tsdbVersions.find(version => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
-          onChange={onChangeHandler('tsdbVersion', value, onChange)}
+          onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
         />
         />
       </div>
       </div>
       <div className="gf-form">
       <div className="gf-form">
@@ -40,14 +40,22 @@ export const OpenTsdbDetails = (props: Props) => {
           value={
           value={
             tsdbResolutions.find(resolution => resolution.value === value.jsonData.tsdbResolution) ?? tsdbResolutions[0]
             tsdbResolutions.find(resolution => resolution.value === value.jsonData.tsdbResolution) ?? tsdbResolutions[0]
           }
           }
-          onChange={onChangeHandler('tsdbResolution', value, onChange)}
+          onChange={onSelectChangeHandler('tsdbResolution', value, onChange)}
+        />
+      </div>
+      <div className="gf-form">
+        <FormLabel width={7}>Lookup Limit</FormLabel>
+        <Input
+          type="number"
+          value={value.jsonData.lookupLimit ?? 1000}
+          onChange={onInputChangeHandler('lookupLimit', value, onChange)}
         />
         />
       </div>
       </div>
     </>
     </>
   );
   );
 };
 };
 
 
-const onChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
+const onSelectChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
   newValue: SelectableValue
   newValue: SelectableValue
 ) => {
 ) => {
   onChange({
   onChange({
@@ -58,3 +66,15 @@ const onChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onCh
     },
     },
   });
   });
 };
 };
+
+const onInputChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
+  event: SyntheticEvent<HTMLInputElement>
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      [key]: event.currentTarget.value,
+    },
+  });
+};

public/app/plugins/datasource/opentsdb/datasource.ts

@@ -13,6 +13,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
   basicAuth: any;
   basicAuth: any;
   tsdbVersion: any;
   tsdbVersion: any;
   tsdbResolution: any;
   tsdbResolution: any;
+  lookupLimit: any;
   tagKeys: any;
   tagKeys: any;
 
 
   aggregatorsPromise: any;
   aggregatorsPromise: any;
@@ -29,6 +30,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
     instanceSettings.jsonData = instanceSettings.jsonData || {};
     instanceSettings.jsonData = instanceSettings.jsonData || {};
     this.tsdbVersion = instanceSettings.jsonData.tsdbVersion || 1;
     this.tsdbVersion = instanceSettings.jsonData.tsdbVersion || 1;
     this.tsdbResolution = instanceSettings.jsonData.tsdbResolution || 1;
     this.tsdbResolution = instanceSettings.jsonData.tsdbResolution || 1;
+    this.lookupLimit = instanceSettings.jsonData.lookupLimit || 1000;
     this.tagKeys = {};
     this.tagKeys = {};
 
 
     this.aggregatorsPromise = null;
     this.aggregatorsPromise = null;
@@ -183,7 +185,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
   }
   }
 
 
   _performSuggestQuery(query: string, type: string) {
   _performSuggestQuery(query: string, type: string) {
-    return this._get('/api/suggest', { type, q: query, max: 1000 }).then((result: any) => {
+    return this._get('/api/suggest', { type, q: query, max: this.lookupLimit }).then((result: any) => {
       return result.data;
       return result.data;
     });
     });
   }
   }
@@ -205,7 +207,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
 
 
     const m = metric + '{' + keysQuery + '}';
     const m = metric + '{' + keysQuery + '}';
 
 
-    return this._get('/api/search/lookup', { m: m, limit: 3000 }).then((result: any) => {
+    return this._get('/api/search/lookup', { m: m, limit: this.lookupLimit }).then((result: any) => {
       result = result.data.results;
       result = result.data.results;
       const tagvs: any[] = [];
       const tagvs: any[] = [];
       _.each(result, r => {
       _.each(result, r => {

public/app/plugins/datasource/opentsdb/types.ts

@@ -5,4 +5,5 @@ export interface OpenTsdbQuery extends DataQuery {}
 export interface OpenTsdbOptions extends DataSourceJsonData {
 export interface OpenTsdbOptions extends DataSourceJsonData {
   tsdbVersion: number;
   tsdbVersion: number;
   tsdbResolution: number;
   tsdbResolution: number;
+  lookupLimit: number;
 }
 }