fix(config): Use HttpProxySettings to configure plugin

Makefile

@@ -15,17 +15,6 @@ build-splunk-datasource:
 
 up:
 	docker-compose up -d
-	sleep 60
-	$(MAKE) configure
-
-configure: | configure-splunk
-
-
-SPLUNK_CONTAINER=grafana-plugin-splunk-datasource-splunk-1
-SPLUNK_CONFIG_FILE=/opt/splunk/etc/system/default/server.conf
-configure-splunk:
-	docker exec $(SPLUNK_CONTAINER) sudo sed -i -E 's/^(enableSplunkdSSL = ).*$$/\1false/g' $(SPLUNK_CONFIG_FILE)
-	docker exec $(SPLUNK_CONTAINER) sudo /opt/splunk/bin/splunk restart
 
 down:
 	-docker-compose down

README.md

@@ -42,16 +42,6 @@ as source of inspiration. However, the plugin can also be manually configured
 by an administrator from Grafana's UI `Configuration --> Datasources --> Add data source`.
 
 
-| Field            | Description                                                                                    |
-|:----------------:|------------------------------------------------------------------------------------------------|
-| Endpoint         | URL of your Splunk instance's REST API endpoint (eg. `http://localhost:8089`)                  |
-| Basic Auth Token | Basic64 encoding of your Basic Auth username and password, separated with a single colon (`:`) |
-
-> You may also need to disable SSL on your Splunk instance. You can read more
-> about how to do this in Splunk's [official documentation](https://docs.splunk.com/Documentation/Splunk/latest/Admin/Serverconf)
-> (search for `enableSplunkdSSL`).
-
-
 ### Getting Started
 
 1. Build the project

provisioning/datasources/splunk-datasource.yml

@@ -5,7 +5,11 @@ datasources:
     type: efcasado-splunk-datasource
     orgId: 1
     isDefault: true
+    access: proxy
+    url: https://splunk:8089
+    basicAuth: true
+    basicAuthUser: admin
     jsonData:
-      endpoint: 'http://splunk:8089'
+      tlsSkipVerify: true
     secureJsonData:
-      basicAuthToken: 'YWRtaW46dGhpc2lzYXNlY3JldA=='
+      basicAuthPassword: thisisasecret

src/ConfigEditor.tsx

@@ -1,83 +1,22 @@
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import React, { PureComponent } from 'react';
+import { DataSourceHttpSettings } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { SplunkDataSourceOptions, SplunkSecureJsonData } from './types';
-
-const { SecretFormField, FormField } = LegacyForms;
+import { SplunkDataSourceOptions } from './types';
 
 interface Props extends DataSourcePluginOptionsEditorProps<SplunkDataSourceOptions> {}
 
 interface State {}
 
 export class ConfigEditor extends PureComponent<Props, State> {
-  onEndpointChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-    const jsonData = {
-      ...options.jsonData,
-      endpoint: event.target.value,
-    };
-    onOptionsChange({ ...options, jsonData });
-  };
-
-  // Secure field (only sent to the backend)
-  onBasicAuthTokenChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-    onOptionsChange({
-      ...options,
-      secureJsonData: {
-        basicAuthToken: event.target.value,
-      },
-    });
-  };
-
-  onResetBasicAuthToken = () => {
-    const { onOptionsChange, options } = this.props;
-    onOptionsChange({
-      ...options,
-      secureJsonFields: {
-        ...options.secureJsonFields,
-        basicAuthToken: false,
-      },
-      secureJsonData: {
-        ...options.secureJsonData,
-        basicAuthToken: '',
-      },
-    });
-  };
+  constructor(props: Props) {
+    super(props);
+  }
 
   render() {
-    const { options } = this.props;
-    const { jsonData, secureJsonFields } = options;
-    const secureJsonData = (options.secureJsonData || {}) as SplunkSecureJsonData;
+    const { options, onOptionsChange } = this.props;
 
     return (
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <FormField
-            label="Endpoint"
-            labelWidth={6}
-            inputWidth={20}
-            onChange={this.onEndpointChange}
-            value={jsonData.endpoint || ''}
-            placeholder="<endpoint>"
-          />
-        </div>
-
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.basicAuthToken) as boolean}
-              value={secureJsonData.basicAuthToken || ''}
-              label="Basic Auth token"
-              placeholder="<token>"
-              labelWidth={10}
-              inputWidth={16}
-              onReset={this.onResetBasicAuthToken}
-              onChange={this.onBasicAuthTokenChange}
-            />
-          </div>
-        </div>
-      </div>
+      <DataSourceHttpSettings defaultUrl="http://splunk:8089" dataSourceConfig={options} onChange={onOptionsChange} />
     );
   }
 }

src/datasource.ts

@@ -65,12 +65,11 @@ export class DataSource extends DataSourceApi<SplunkQuery, SplunkDataSourceOptio
       output_mode: 'json',
       exec_mode: 'oneshot',
     }).toString();
-    const routePath = '/splunk-datasource';
 
     return getBackendSrv()
       .datasourceRequest({
         method: 'POST',
-        url: this.url + routePath + '/services/search/jobs',
+        url: this.url + '/services/search/jobs',
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
@@ -95,11 +94,10 @@ export class DataSource extends DataSourceApi<SplunkQuery, SplunkDataSourceOptio
   }
 
   async doSearchStatusRequest(sid: string) {
-    const routePath = '/splunk-datasource';
     const result: boolean = await getBackendSrv()
       .datasourceRequest({
         method: 'GET',
-        url: this.url + routePath + '/services/search/jobs/' + sid,
+        url: this.url + '/services/search/jobs/' + sid,
         params: {
           output_mode: 'json',
         },
@@ -114,7 +112,6 @@ export class DataSource extends DataSourceApi<SplunkQuery, SplunkDataSourceOptio
   }
 
   async doSearchRequest(query: SplunkQuery, options: DataQueryRequest<SplunkQuery>) {
-    const routePath = '/splunk-datasource';
     const { range } = options;
     const from = Math.floor(range!.from.valueOf() / 1000);
     const to = Math.floor(range!.to.valueOf() / 1000);
@@ -129,7 +126,7 @@ export class DataSource extends DataSourceApi<SplunkQuery, SplunkDataSourceOptio
     const sid: string = await getBackendSrv()
       .datasourceRequest({
         method: 'POST',
-        url: this.url + routePath + '/services/search/jobs',
+        url: this.url + '/services/search/jobs',
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
@@ -151,11 +148,10 @@ export class DataSource extends DataSourceApi<SplunkQuery, SplunkDataSourceOptio
     let results: any[] = [];
 
     while (!isFinished) {
-      const routePath = '/splunk-datasource';
       await getBackendSrv()
         .datasourceRequest({
           method: 'GET',
-          url: this.url + routePath + '/services/search/jobs/' + sid + '/results',
+          url: this.url + '/services/search/jobs/' + sid + '/results',
           params: {
             output_mode: 'json',
             offset: offset,

src/plugin.json

@@ -3,18 +3,6 @@
   "type": "datasource",
   "name": "splunk-datasource",
   "id": "efcasado-splunk-datasource",
-  "routes": [
-      {
-          "path": "splunk-datasource",
-          "url": "{{ .JsonData.endpoint }}",
-          "headers": [
-              {
-                  "name": "Authorization",
-                  "content": "Basic {{ .SecureJsonData.basicAuthToken }}"
-              }
-          ]
-      }
-  ],
   "metrics": true,
   "info": {
     "description": "",