Store cloudAddr in unencrypted JSON data. Simplify logic for updating and resetting plugin settings (#103)

Signed-off-by: Dom Del Nano <[email protected]>

Author: ddelnano

pkg/pixie_plugin.go

@@ -59,7 +59,17 @@ func (td *PixieDatasource) QueryData(ctx context.Context, req *backend.QueryData
 	// Loop over queries and execute them individually. Save the response
 	// in a hashmap with RefID as identifier.
 	for _, q := range req.Queries {
-		res, err := td.query(ctx, q, req.PluginContext.DataSourceInstanceSettings.DecryptedSecureJSONData)
+		dataSourceSettings := req.PluginContext.DataSourceInstanceSettings
+		jsonData := dataSourceSettings.JSONData
+		secureJsonData := dataSourceSettings.DecryptedSecureJSONData
+
+		var jsonDataMap map[string]interface{}
+		err := json.Unmarshal(jsonData, &jsonDataMap)
+		if err != nil {
+			return nil, fmt.Errorf("error unmarshalling JSON: %v", err)
+		}
+
+		res, err := td.query(ctx, q, jsonDataMap, secureJsonData)
 		if err != nil {
 			return response, err
 		}
@@ -149,11 +159,12 @@ type queryModel struct {
 
 // Handle an incoming query
 func (td *PixieDatasource) query(ctx context.Context, query backend.DataQuery,
-	config map[string]string) (*backend.DataResponse, error) {
+	config map[string]interface{}, decryptedConfig map[string]string) (*backend.DataResponse, error) {
+
+	cloudAddr := config[cloudAddrField].(string)
 
-	apiToken := config[apiKeyField]
-	cloudAddr := config[cloudAddrField]
-	clusterID := config[clusterIDField]
+	apiToken := decryptedConfig[apiKeyField]
+	clusterID := decryptedConfig[clusterIDField]
 	var qm queryModel
 	if err := json.Unmarshal(query.JSON, &qm); err != nil {
 		return nil, fmt.Errorf("error unmarshalling JSON: %v", err)

src/config_editor.tsx

@@ -16,9 +16,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { LegacyForms } from '@grafana/ui';
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import {
+  DataSourcePluginOptionsEditorProps,
+  onUpdateDatasourceJsonDataOption,
+  onUpdateDatasourceSecureJsonDataOption,
+  updateDatasourcePluginResetOption,
+} from '@grafana/data';
 import { PixieDataSourceOptions, PixieSecureDataSourceOptions } from './types';
 
 const { FormField, SecretFormField } = LegacyForms;
@@ -28,94 +33,19 @@ interface Props extends DataSourcePluginOptionsEditorProps<PixieDataSourceOption
 interface State {}
 
 export class ConfigEditor extends PureComponent<Props, State> {
-  onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonData: {
-        ...options?.secureJsonData,
-        apiKey: event.target.value,
-      },
-    });
-  };
-
-  onClusterIdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonData: {
-        ...options?.secureJsonData,
-        clusterId: event.target.value,
-      },
-    });
-  };
-
-  onCloudAddrChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonData: {
-        ...options?.secureJsonData,
-        cloudAddr: event.target.value,
-      },
-    });
-  };
-
   onResetAPIKey = () => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonFields: {
-        ...options.secureJsonFields,
-        apiKey: false,
-      },
-      secureJsonData: {
-        ...options.secureJsonData,
-        apiKey: '',
-      },
-    });
+    updateDatasourcePluginResetOption(this.props, 'apiKey');
   };
 
   onResetClusterId = () => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonFields: {
-        ...options.secureJsonFields,
-        clusterId: false,
-      },
-      secureJsonData: {
-        ...options.secureJsonData,
-        clusterId: '',
-      },
-    });
-  };
-
-  onResetCloudAddr = () => {
-    const { onOptionsChange, options } = this.props;
-
-    onOptionsChange({
-      ...options,
-      secureJsonFields: {
-        ...options.secureJsonFields,
-        cloudAddr: false,
-      },
-      secureJsonData: {
-        ...options.secureJsonData,
-        cloudAddr: '',
-      },
-    });
+    updateDatasourcePluginResetOption(this.props, 'clusterId');
   };
 
   render() {
     const { options } = this.props;
     const { secureJsonFields } = options;
     const secureJsonData = (options.secureJsonData || {}) as PixieSecureDataSourceOptions;
+    const jsonData = (options.jsonData || {}) as PixieDataSourceOptions;
 
     return (
       <div className="gf-form-group">
@@ -129,7 +59,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               labelWidth={20}
               inputWidth={20}
               onReset={this.onResetAPIKey}
-              onChange={this.onAPIKeyChange}
+              onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'apiKey')}
             />
           </div>
         </div>
@@ -144,21 +74,20 @@ export class ConfigEditor extends PureComponent<Props, State> {
               labelWidth={20}
               inputWidth={20}
               onReset={this.onResetClusterId}
-              onChange={this.onClusterIdChange}
+              onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'clusterId')}
             />
           </div>
         </div>
 
         <div className="gf-form-inline">
           <div className="gf-form">
             <FormField
-              value={secureJsonData.cloudAddr || ''}
-              label="Pixie Cloud address (if not using withpixie.ai)"
-              placeholder="withpixie.ai:443"
+              value={jsonData.cloudAddr || ''}
+              label="Pixie Cloud address (if not using getcosmic.ai)"
+              placeholder="getcosmic.ai:443"
               labelWidth={20}
               inputWidth={20}
-              onReset={this.onResetCloudAddr}
-              onChange={this.onCloudAddrChange}
+              onChange={onUpdateDatasourceJsonDataOption(this.props, 'cloudAddr')}
             />
           </div>
         </div>

src/types.ts

@@ -69,13 +69,14 @@ export const defaultQuery: Partial<PixieDataQuery> = {
   },
 };
 
-export interface PixieDataSourceOptions extends DataSourceJsonData {}
+export interface PixieDataSourceOptions extends DataSourceJsonData {
+  // Address of Pixie cloud.
+  cloudAddr?: string;
+}
 
 export interface PixieSecureDataSourceOptions {
   // Pixie API key.
   apiKey?: string;
-  // Address of Pixie cloud.
-  cloudAddr?: string;
   // ID of the Pixie cluster to query.
   clusterId?: string;
 }