Use DataSourceHttpSettings

Author: marcusolsson

src/ConfigEditor.tsx

@@ -1,36 +1,45 @@
 import React, { ChangeEvent } from 'react';
-import { InlineFormLabel, Input, Legend } from '@grafana/ui';
+import { LegacyForms, DataSourceHttpSettings } from '@grafana/ui';
+
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { JsonApiDataSourceOptions } from './types';
 import {} from '@emotion/core';
 
+const { Input, FormField } = LegacyForms;
+
 interface Props extends DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions> {}
 
 export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
-  const onUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onOptionsChange({ ...options, url: e.currentTarget.value });
-  };
   const onParamsChange = (e: ChangeEvent<HTMLInputElement>) => {
     onOptionsChange({ ...options, jsonData: { ...options.jsonData, queryParams: e.currentTarget.value } });
   };
+
   return (
     <>
-      <Legend>HTTP</Legend>
+      <DataSourceHttpSettings
+        defaultUrl="http://localhost:8080"
+        dataSourceConfig={options}
+        onChange={onOptionsChange}
+      />
+      <h3 className="page-heading">Misc</h3>
       <div className="gf-form-group">
-        <div className="gf-form">
-          <InlineFormLabel tooltip={<p>URL to an endpoint that returns a JSON response.</p>}>URL</InlineFormLabel>
-          <Input className="width-25" value={options.url} onChange={onUrlChange} placeholder="page=1&limit=100" />
-        </div>
-        <div className="gf-form">
-          <InlineFormLabel tooltip={<p>Add custom query parameters to your query.</p>}>
-            Query parameters
-          </InlineFormLabel>
-          <Input
-            className="width-25"
-            value={options.jsonData.queryParams}
-            onChange={onParamsChange}
-            placeholder="page=1&limit=100"
-          />
+        <div className="gf-form-inline">
+          <div className="gf-form max-width-30">
+            <FormField
+              label="Custom query parameters"
+              labelWidth={14}
+              tooltip="Add custom parameters to your queries."
+              inputEl={
+                <Input
+                  className="width-25"
+                  value={options.jsonData.queryParams}
+                  onChange={onParamsChange}
+                  spellCheck={false}
+                  placeholder="page=1&limit=100"
+                />
+              }
+            />
+          </div>
         </div>
       </div>
     </>

src/DataSource.ts

@@ -80,7 +80,7 @@ export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOpt
     const defaultErrorMessage = 'Cannot connect to API';
 
     try {
-      const response = await this.api.test();
+      const response = await this.api.test(this.queryParams);
       if (response.status === 200) {
         return {
           status: 'success',

src/api.ts

@@ -28,11 +28,12 @@ export default class Api {
   /**
    * Used as a health check.
    */
-  async test() {
-    return getBackendSrv().datasourceRequest({
-      url: this.baseUrl,
+  async test(params?: string) {
+    const req = {
+      url: `${this.baseUrl}${params?.length ? `?${params}` : ''}`,
       method: 'GET',
-    });
+    };
+    return getBackendSrv().datasourceRequest(req);
   }
 
   /**

src/types.ts

@@ -20,8 +20,5 @@ export const defaultQuery: Partial<JsonApiQuery> = {
 };
 
 export interface JsonApiDataSourceOptions extends DataSourceJsonData {
-  url: string;
   queryParams?: string;
 }
-
-export interface JsonApiSecureJsonData {}