ReactMigration: Migrate Prometheus config page to React (#20248)

* add basic components

* adding onchange handler for Prom settings

* move options outside component

* reorder imports

* Add missing setting

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

@@ -1,9 +0,0 @@
-export class PrometheusConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html';
-  current: any;
-
-  /** @ngInject */
-  constructor($scope: any) {
-    this.current.jsonData.httpMethod = this.current.jsonData.httpMethod || 'GET';
-  }
-}

public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { PromSettings } from './PromSettings';
+import { PromOptions } from '../types';
+
+export type Props = DataSourcePluginOptionsEditorProps<PromOptions>;
+export const ConfigEditor = (props: Props) => {
+  const { options, onOptionsChange } = props;
+  return (
+    <>
+      <DataSourceHttpSettings
+        defaultUrl="http://localhost:9090"
+        dataSourceConfig={options}
+        onChange={onOptionsChange}
+      />
+
+      <PromSettings value={options} onChange={onOptionsChange} />
+    </>
+  );
+};

public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

@@ -0,0 +1,122 @@
+import React, { SyntheticEvent } from 'react';
+import { EventsWithValidation, FormField, FormLabel, Input, regexValidation, Select } from '@grafana/ui';
+import { DataSourceSettings } from '@grafana/data';
+import { PromOptions } from '../types';
+
+const httpOptions = [{ value: 'GET', label: 'GET' }, { value: 'POST', label: 'POST' }];
+
+type Props = {
+  value: DataSourceSettings<PromOptions>;
+  onChange: (value: DataSourceSettings<PromOptions>) => void;
+};
+
+export const PromSettings = (props: Props) => {
+  const { value, onChange } = props;
+
+  return (
+    <>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <FormField
+              label="Scrape interval"
+              labelWidth={13}
+              placeholder="15s"
+              inputEl={
+                <Input
+                  className="width-6"
+                  value={value.jsonData.timeInterval}
+                  spellCheck={false}
+                  onChange={onChangeHandler('timeInterval', value, onChange)}
+                  validationEvents={{
+                    [EventsWithValidation.onBlur]: [
+                      regexValidation(
+                        /^\d+(ms|[Mwdhmsy])$/,
+                        'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
+                      ),
+                    ],
+                  }}
+                />
+              }
+              tooltip="Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
+        Prometheus step query parameter."
+            />
+          </div>
+        </div>
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <FormField
+              label="Query timeout"
+              labelWidth={13}
+              inputEl={
+                <Input
+                  className="width-6"
+                  value={value.jsonData.queryTimeout}
+                  onChange={onChangeHandler('queryTimeout', value, onChange)}
+                  spellCheck={false}
+                  placeholder="60s"
+                  validationEvents={{
+                    [EventsWithValidation.onBlur]: [
+                      regexValidation(
+                        /^\d+(ms|[Mwdhmsy])$/,
+                        'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
+                      ),
+                    ],
+                  }}
+                />
+              }
+              tooltip="Set the Prometheus query timeout."
+            />
+          </div>
+        </div>
+        <div className="gf-form">
+          <FormLabel
+            width={13}
+            tooltip="Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)"
+          >
+            HTTP Method
+          </FormLabel>
+          <Select
+            options={httpOptions}
+            value={httpOptions.find(o => o.value === value.jsonData.httpMethod)}
+            onChange={onChangeHandler('httpMethod', value, onChange)}
+            width={7}
+          />
+        </div>
+      </div>
+      <h3 className="page-heading">Misc</h3>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form max-width-30">
+            <FormField
+              label="Custom query parameters"
+              labelWidth={14}
+              tooltip="Add Custom parameters to Prometheus or Thanos queries."
+              inputEl={
+                <Input
+                  className="width-25"
+                  value={value.jsonData.customQueryParameters}
+                  onChange={onChangeHandler('customQueryParameters', value, onChange)}
+                  spellCheck={false}
+                  placeholder="Example: max_source_resolution=5m&timeout=10"
+                />
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const onChangeHandler = (key: keyof PromOptions, value: Props['value'], onChange: Props['onChange']) => (
+  event: SyntheticEvent<HTMLInputElement | HTMLSelectElement>
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      [key]: event.currentTarget.value,
+    },
+  });
+};

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

@@ -1,19 +1,19 @@
+import { DataSourcePlugin } from '@grafana/data';
 import { PrometheusDatasource } from './datasource';
-import { PromQueryEditor } from './components/PromQueryEditor';
-import { PrometheusConfigCtrl } from './config_ctrl';
 
+import { PromQueryEditor } from './components/PromQueryEditor';
 import PromCheatSheet from './components/PromCheatSheet';
 import PromQueryField from './components/PromQueryField';
 
+import { ConfigEditor } from './configuration/ConfigEditor';
+
 class PrometheusAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
 }
 
-export {
-  PrometheusDatasource as Datasource,
-  PromQueryEditor as QueryEditor,
-  PrometheusConfigCtrl as ConfigCtrl,
-  PrometheusAnnotationsQueryCtrl as AnnotationsQueryCtrl,
-  PromQueryField as ExploreQueryField,
-  PromCheatSheet as ExploreStartPage,
-};
+export const plugin = new DataSourcePlugin(PrometheusDatasource)
+  .setQueryCtrl(PromQueryEditor)
+  .setConfigEditor(ConfigEditor)
+  .setExploreLogsQueryField(PromQueryField)
+  .setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl)
+  .setExploreStartPage(PromCheatSheet);

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

@@ -1,70 +0,0 @@
-<datasource-http-settings current="ctrl.current" suggest-url="http://localhost:9090">
-</datasource-http-settings>
-
-<div class="gf-form-group">
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-8">Scrape interval</span>
-      <input
-        type="text"
-        class="gf-form-input width-8 gf-form-input--has-help-icon"
-        ng-model="ctrl.current.jsonData.timeInterval"
-        spellcheck='false'
-        placeholder="15s"
-        ng-pattern="/^\d+[Mwdhmsy]$/"
-      ></input>
-      <info-popover mode="right-absolute">
-        Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
-        Prometheus step query parameter.
-      </info-popover>
-    </div>
-  </div>
-
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-8">Query timeout</span>
-      <input
-        type="text"
-        class="gf-form-input width-8 gf-form-input--has-help-icon"
-        ng-model="ctrl.current.jsonData.queryTimeout"
-        spellcheck="false"
-        placeholder="60s"
-        ng-pattern="/^\d+[Mwdhmsy]$/"
-      ></input>
-      <info-popover mode="right-absolute">
-        Set the Prometheus query timeout.
-      </info-popover>
-    </div>
-  </div>
-
-  <div class="gf-form">
-    <label class="gf-form-label width-8">HTTP Method</label>
-    <div class="gf-form-select-wrapper width-8 gf-form-select-wrapper--has-help-icon">
-      <select class="gf-form-input" ng-model="ctrl.current.jsonData.httpMethod" ng-options="method for method in ['GET', 'POST']"></select>
-      <info-popover mode="right-absolute">
-        Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)
-      </info-popover>
-    </div>
-  </div>
-</div>
-
-<h3 class="page-heading">Misc</h3>
-<div class="gf-form-group">
-  <div class="gf-form-inline">
-    <div class="gf-form max-width-30">
-      <span class="gf-form-label width-13">Custom query parameters</span>
-      <input
-        type="text"
-        class="gf-form-input gf-form-input--has-help-icon"
-        ng-model="ctrl.current.jsonData.customQueryParameters"
-        spellcheck="false"
-        placeholder="Example: max_source_resolution=5m&timeout=10"
-      ></input>
-      <info-popover mode="right-absolute">
-        Add Custom parameters to Prometheus or Thanos queries.
-      </info-popover>
-    </div>
-  </div>
-</div>
-
-