feat: add support for auth to grafana datasource plugin (#844)

grafana · Feb 16, 2022 · 8712404 · 8712404
1 parent 8bd6eb8
commit 8712404
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 10 deletions.
diff --git a/grafana-plugin/datasource/grafana-provisioning/datasources/datasources.yml b/grafana-plugin/datasource/grafana-provisioning/datasources/datasources.yml
@@ -9,3 +9,5 @@ datasources:
     uid: pyroscope
     jsonData:
       path: http://pyroscope:4040
+    # secureJsonData:
+    #   apiKey: {YOUR_API_KEY}
diff --git a/grafana-plugin/datasource/src/ConfigEditor.tsx b/grafana-plugin/datasource/src/ConfigEditor.tsx
@@ -2,14 +2,12 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { LegacyForms } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { MyDataSourceOptions } from './types';
+import { MyDataSourceOptions, MySecureJsonData } from './types';
 
-const { /* SecretFormField, */ FormField } = LegacyForms;
+const { SecretFormField, FormField } = LegacyForms;
 
 type Props = DataSourcePluginOptionsEditorProps<MyDataSourceOptions>;
 
-// interface State {}
-
 export class ConfigEditor extends PureComponent<Props, unknown> {
   onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { onOptionsChange, options } = this.props;
@@ -20,22 +18,65 @@ export class ConfigEditor extends PureComponent<Props, unknown> {
     onOptionsChange({ ...options, jsonData });
   };
 
+  // API Key: secure field (only sent to the backend)
+  onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { onOptionsChange, options } = this.props;
+    onOptionsChange({
+      ...options,
+      secureJsonData: {
+        ...options.secureJsonData,
+        apiKey: event.target.value,
+      },
+    });
+  };
+
+  onAPIKeyReset = () => {
+    const { onOptionsChange, options } = this.props;
+    onOptionsChange({
+      ...options,
+      secureJsonFields: {
+        ...options.secureJsonFields,
+        apiKey: false,
+      },
+      secureJsonData: {
+        ...options.secureJsonData,
+        apiKey: '',
+      },
+    });
+  };
+
   render() {
     const { options } = this.props;
-    const { jsonData } = options;
+    const { jsonData, secureJsonFields } = options;
+    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
 
     return (
       <div className="gf-form-group">
         <div className="gf-form">
           <FormField
             label="Pyroscope instance"
-            labelWidth={6}
+            labelWidth={10}
             inputWidth={20}
             onChange={this.onPathChange}
             value={jsonData.path || ''}
             placeholder="url to your pyroscope instance"
           />
         </div>
+
+        <div className="gf-form">
+          <SecretFormField
+            label="API Key"
+            labelWidth={10}
+            inputWidth={20}
+            onChange={this.onAPIKeyChange}
+            onReset={this.onAPIKeyReset}
+            isConfigured={
+              (secureJsonFields && secureJsonFields.apiKey) as boolean
+            }
+            value={secureJsonData.apiKey || ''}
+            placeholder="Your API Key"
+          />
+        </div>
       </div>
     );
   }

diff --git a/grafana-plugin/datasource/src/plugin.json b/grafana-plugin/datasource/src/plugin.json
@@ -32,7 +32,13 @@
   "routes": [
     {
       "path": "render",
-      "url": "{{ .JsonData.path }}"
+      "url": "{{ .JsonData.path }}",
+      "headers": [
+        {
+          "name": "Authorization",
+          "content": "Bearer {{ .SecureJsonData.apiKey }}"
+        }
+      ]
     }
   ],
   "dependencies": {

diff --git a/grafana-plugin/datasource/src/types.ts b/grafana-plugin/datasource/src/types.ts
@@ -25,6 +25,6 @@ export interface MyDataSourceOptions extends DataSourceJsonData {
 /**
  * Value that is used in the backend, but never sent over HTTP to the frontend
  */
-// export interface MySecureJsonData {
-//   apiKey?: string;
-// }
+export interface MySecureJsonData {
+  apiKey?: string;
+}