OpenTsdb: Migrate Config Editor to React (#20808)

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

+import React from 'react';
+import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { OpenTsdbDetails } from './OpenTsdbDetails';
+import { OpenTsdbOptions } from '../types';
+
+export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<OpenTsdbOptions>) => {
+  const { options, onOptionsChange } = props;
+
+  return (
+    <>
+      <DataSourceHttpSettings
+        defaultUrl="http://localhost:4242"
+        dataSourceConfig={options}
+        onChange={onOptionsChange}
+      />
+      <OpenTsdbDetails value={options} onChange={onOptionsChange} />
+    </>
+  );
+};

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

+import React from 'react';
+import { FormLabel, Select } from '@grafana/ui';
+import { DataSourceSettings, SelectableValue } from '@grafana/data';
+import { OpenTsdbOptions } from '../types';
+
+const tsdbVersions = [
+  { label: '<=2.1', value: 1 },
+  { label: '==2.2', value: 2 },
+  { label: '==2.3', value: 3 },
+];
+
+const tsdbResolutions = [
+  { label: 'second', value: 1 },
+  { label: 'millisecond', value: 2 },
+];
+
+interface Props {
+  value: DataSourceSettings<OpenTsdbOptions>;
+  onChange: (value: DataSourceSettings<OpenTsdbOptions>) => void;
+}
+
+export const OpenTsdbDetails = (props: Props) => {
+  const { onChange, value } = props;
+
+  return (
+    <>
+      <h5>OpenTSDB settings</h5>
+      <div className="gf-form">
+        <FormLabel width={7}>Version</FormLabel>
+        <Select
+          options={tsdbVersions}
+          value={tsdbVersions.find(version => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
+          onChange={onChangeHandler('tsdbVersion', value, onChange)}
+        />
+      </div>
+      <div className="gf-form">
+        <FormLabel width={7}>Resolution</FormLabel>
+        <Select
+          options={tsdbResolutions}
+          value={
+            tsdbResolutions.find(resolution => resolution.value === value.jsonData.tsdbResolution) ?? tsdbResolutions[0]
+          }
+          onChange={onChangeHandler('tsdbResolution', value, onChange)}
+        />
+      </div>
+    </>
+  );
+};
+
+const onChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
+  newValue: SelectableValue
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      [key]: newValue.value,
+    },
+  });
+};

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

-export class OpenTsConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/opentsdb/partials/config.html';
-  current: any;
-
-  /** @ngInject */
-  constructor($scope: any) {
-    this.current.jsonData = this.current.jsonData || {};
-    this.current.jsonData.tsdbVersion = this.current.jsonData.tsdbVersion || 1;
-    this.current.jsonData.tsdbResolution = this.current.jsonData.tsdbResolution || 1;
-  }
-
-  tsdbVersions = [
-    { name: '<=2.1', value: 1 },
-    { name: '==2.2', value: 2 },
-    { name: '==2.3', value: 3 },
-  ];
-
-  tsdbResolutions = [
-    { name: 'second', value: 1 },
-    { name: 'millisecond', value: 2 },
-  ];
-}

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

 import angular, { IQService } from 'angular';
 import _ from 'lodash';
-import { dateMath, DataQueryRequest } from '@grafana/data';
+import { dateMath, DataQueryRequest, DataSourceApi } from '@grafana/data';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
+import { OpenTsdbOptions, OpenTsdbQuery } from './types';
 
-export default class OpenTsDatasource {
+export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenTsdbOptions> {
   type: any;
   url: any;
   name: any;
@@ -24,6 +25,7 @@ export default class OpenTsDatasource {
     private backendSrv: BackendSrv,
     private templateSrv: TemplateSrv
   ) {
+    super(instanceSettings);
     this.type = 'opentsdb';
     this.url = instanceSettings.url;
     this.name = instanceSettings.name;

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

 import OpenTsDatasource from './datasource';
 import { OpenTsQueryCtrl } from './query_ctrl';
-import { OpenTsConfigCtrl } from './config_ctrl';
+import { DataSourcePlugin } from '@grafana/data';
+import { ConfigEditor } from './components/ConfigEditor';
 
 class AnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
 }
 
-export {
-  OpenTsDatasource as Datasource,
-  OpenTsQueryCtrl as QueryCtrl,
-  OpenTsConfigCtrl as ConfigCtrl,
-  AnnotationsQueryCtrl,
-};
+export const plugin = new DataSourcePlugin(OpenTsDatasource)
+  .setQueryCtrl(OpenTsQueryCtrl)
+  .setConfigEditor(ConfigEditor)
+  .setAnnotationQueryCtrl(AnnotationsQueryCtrl);

public/app/plugins/datasource/opentsdb/partials/config.html

-<datasource-http-settings current="ctrl.current" suggest-url="http://localhost:4242"></datasource-http-settings>
-
-<h5>OpenTSDB settings</h5>
-<div class="gf-form">
-  <span class="gf-form-label width-7">
-    Version
-  </span>
-  <span class="gf-form-select-wrapper">
-    <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.tsdbVersion" ng-options="v.value as v.name for v in ctrl.tsdbVersions"></select>
-  </span>
-</div>
-<div class="gf-form">
-  <span class="gf-form-label width-7">
-    Resolution
-  </span>
-  <span class="gf-form-select-wrapper">
-    <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.tsdbResolution" ng-options="v.value as v.name for v in ctrl.tsdbResolutions"></select>
-  </span>
-</div>

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

+import { DataQuery, DataSourceJsonData } from '@grafana/data';
+
+export interface OpenTsdbQuery extends DataQuery {}
+
+export interface OpenTsdbOptions extends DataSourceJsonData {
+  tsdbVersion: number;
+  tsdbResolution: number;
+}