Add password configuration to datasource settings

This currently bumps the minimum Grafana version to 9.1.0 through use of
`SecretInput`, which isn't ideal - perhaps we could copy/paste
that component in instead, or just write our own.

Closes #16.

Author: sd2k

backend/src/lib.rs

@@ -38,12 +38,18 @@ impl MaterializePlugin {
         let settings: MaterializeDatasourceSettings =
             serde_json::from_value(datasource_settings.json_data.clone())
                 .map_err(Error::InvalidDatasourceSettings)?;
-        let (client, connection) = Config::new()
+        let mut config = Config::new();
+        config
             .user(&settings.username)
             .host(&settings.host)
-            .port(settings.port)
-            .connect(NoTls)
-            .await?;
+            .port(settings.port);
+        if let Some(p) = &datasource_settings
+            .decrypted_secure_json_data
+            .get("password")
+        {
+            config.password(p);
+        }
+        let (client, connection) = config.connect(NoTls).await?;
         tokio::spawn(async move {
             if let Err(e) = connection.await {
                 eprintln!("connection error: {}", e);

docker-compose.yaml

@@ -2,7 +2,7 @@ version: "3"
 
 services:
   grafana:
-    image: grafana/grafana:9.0.7
+    image: grafana/grafana:9.1.6
     ports:
       - "3000:3000"
     restart: on-failure

package.json

@@ -13,14 +13,14 @@
   "author": "Ben Sully",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/data": "^9.0.0",
-    "@grafana/runtime": "^9.0.0",
-    "@grafana/toolkit": "^9.0.0",
-    "@grafana/ui": "^9.0.0",
+    "@grafana/data": "^9.1.0",
+    "@grafana/runtime": "^9.1.0",
+    "@grafana/toolkit": "^9.1.0",
+    "@grafana/ui": "^9.1.0",
     "@types/lodash": "^4.14.177"
   },
   "resolutions": {
-    "rxjs": "7.5.5"
+    "rxjs": "7.5.6"
   },
   "engines": {
     "node": ">=14"

src/ConfigEditor.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { DataSourceOptions } from './types';
-import { FieldSet, Form, InlineField, Input } from '@grafana/ui';
+import { DataSourceOptions, DataSourceSecureOptions } from './types';
+import { FieldSet, Form, InlineField, Input, SecretInput } from '@grafana/ui';
 
-interface Props extends DataSourcePluginOptionsEditorProps<DataSourceOptions> {}
+interface Props extends DataSourcePluginOptionsEditorProps<DataSourceOptions, DataSourceSecureOptions> { }
 
 export const ConfigEditor = ({ options, onOptionsChange }: Props): JSX.Element => {
   const onSettingsChange = useCallback(
-    (change: Partial<DataSourceSettings<DataSourceOptions>>) => {
+    (change: Partial<DataSourceSettings<DataSourceOptions, DataSourceSecureOptions>>) => {
       onOptionsChange({
         ...options,
         ...change,
@@ -52,6 +52,17 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props): JSX.Element =
                   }
                 />
               </InlineField>
+
+              <InlineField label="Password" labelWidth={20}>
+                <SecretInput
+                  isConfigured={!!options.secureJsonData?.password ?? false}
+                  onReset={() => onSettingsChange({ secureJsonData: { ...options.secureJsonData, password: undefined } })}
+                  value={options.secureJsonData?.password}
+                  onBlur={(event) =>
+                    onSettingsChange({ secureJsonData: { ...options.secureJsonData, password: event.currentTarget.value } })
+                  }
+                />
+              </InlineField>
             </FieldSet>
           </>
         )}

src/types.ts

@@ -70,3 +70,10 @@ export interface DataSourceOptions extends DataSourceJsonData {
   port?: number;
   username?: string;
 }
+
+/**
+ * These are secure options configured for each DataSource instance.
+ */
+export interface DataSourceSecureOptions extends DataSourceJsonData {
+  password?: string;
+}