Merge branch 'main' into ddelnano/upgrade-grafana-plugin-sdk

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

Author: ddelnano

.github/workflows/release.yml

@@ -23,4 +23,4 @@ jobs:
         # Make sure to save the token in your repository secrets
         #policy_token: $
         # Usage of GRAFANA_API_KEY is deprecated, prefer `policy_token` option above
-        #grafana_token: $
+        #grafana_token: $

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.0.10
+
+- Enable alerting for Pixie datasource
+- Fix bug where plugin settings didn't show the present value for cloud address (Fixes [grafana-plugin#100](https://github.com/pixie-io/grafana-plugin/issues/100)
+
 ## 0.0.9 
 
 - Update Grafana compatibility version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixie-pixie-datasource",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Pixie's Grafana Datasource Plugin",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

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/plugin.json

@@ -5,6 +5,7 @@
   "id": "pixie-pixie-datasource",
   "metrics": true,
   "backend": true,
+  "alerting": true,
   "executable": "gpx-pixie-pixie-datasource-plugin",
   "info": {
     "description": "Pixie's Grafana Datasource Plugin",
@@ -85,8 +86,8 @@
         "path": "img/screenshots/namespace-metrics-script.png"
       }
     ],
-    "version": "0.0.9",
-    "updated": "2022-08-26"
+    "version": "0.0.10",
+    "updated": "2024-11-05"
   },
   "dependencies": {
     "grafanaDependency": ">=7.3.0",

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;
 }