@grafana/create-plugin 0.10.0 → 0.11.0-canary.172.d1fcc2b.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "0.10.0",
+  "version": "0.11.0-canary.172.d1fcc2b.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "4528730fa262596399c6e1b0158311ae31bf64bd"
+  "gitHead": "d1fcc2b10cc167f921a7b0ca131ddaef8286317c"
 }

package/templates/backend/pkg/plugin/datasource.go

@@ -3,6 +3,7 @@ package plugin
 import (
 	"context"
 	"encoding/json"
+	"fmt"
 	"math/rand"
 	"time"
 
@@ -73,10 +74,12 @@ func (d *Datasource) query(_ context.Context, pCtx backend.PluginContext, query
 
 	err := json.Unmarshal(query.JSON, &qm)
 	if err != nil {
-		return backend.ErrDataResponse(backend.StatusBadRequest, "json unmarshal: " + err.Error())
+		return backend.ErrDataResponse(backend.StatusBadRequest, fmt.Sprintf("json unmarshal: %v", err.Error()))
 	}
 
 	// create data frame response.
+	// For an overview on data frames and how grafana handles them:
+	// https://grafana.com/docs/grafana/latest/developers/plugins/data-frames/
 	frame := data.NewFrame("response")
 
 	// add fields.

package/templates/datasource/src/components/ConfigEditor.tsx

@@ -1,17 +1,13 @@
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { InlineField, Input, SecretInput } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MyDataSourceOptions, MySecureJsonData } from '../types';
 
-const { SecretFormField, FormField } = LegacyForms;
-
 interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
 
-interface State {}
-
-export class ConfigEditor extends PureComponent<Props, State> {
-  onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
+export function ConfigEditor(props: Props) {
+  const { onOptionsChange, options } = props;
+  const onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
     const jsonData = {
       ...options.jsonData,
       path: event.target.value,
@@ -20,8 +16,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
   };
 
   // Secure field (only sent to the backend)
-  onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
+  const onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
     onOptionsChange({
       ...options,
       secureJsonData: {
@@ -30,8 +25,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
     });
   };
 
-  onResetAPIKey = () => {
-    const { onOptionsChange, options } = this.props;
+  const onResetAPIKey = () => {
     onOptionsChange({
       ...options,
       secureJsonFields: {
@@ -45,39 +39,29 @@ export class ConfigEditor extends PureComponent<Props, State> {
     });
   };
 
-  render() {
-    const { options } = this.props;
-    const { jsonData, secureJsonFields } = options;
-    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
-
-    return (
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <FormField
-            label="Path"
-            labelWidth={6}
-            inputWidth={20}
-            onChange={this.onPathChange}
-            value={jsonData.path || ''}
-            placeholder="json field returned to frontend"
-          />
-        </div>
+  const { jsonData, secureJsonFields } = options;
+  const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
 
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
-              value={secureJsonData.apiKey || ''}
-              label="API Key"
-              placeholder="secure json field (backend only)"
-              labelWidth={6}
-              inputWidth={20}
-              onReset={this.onResetAPIKey}
-              onChange={this.onAPIKeyChange}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
+  return (
+    <div className="gf-form-group">
+      <InlineField label="Path" labelWidth={12}>
+        <Input
+          onChange={onPathChange}
+          value={jsonData.path || ''}
+          placeholder="json field returned to frontend"
+          width={40}
+        />
+      </InlineField>
+      <InlineField label="API Key" labelWidth={12}>
+        <SecretInput
+          isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
+          value={secureJsonData.apiKey || ''}
+          placeholder="secure json field (backend only)"
+          width={40}
+          onReset={onResetAPIKey}
+          onChange={onAPIKeyChange}
+        />
+      </InlineField>
+    </div>
+  );
 }

package/templates/datasource/src/components/QueryEditor.tsx

@@ -1,47 +1,32 @@
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { InlineField, Input } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
 import { MyDataSourceOptions, MyQuery } from '../types';
 
-const { FormField } = LegacyForms;
-
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
-export class QueryEditor extends PureComponent<Props> {
-  onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query } = this.props;
+export function QueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange({ ...query, queryText: event.target.value });
   };
 
-  onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
+  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange({ ...query, constant: parseFloat(event.target.value) });
     // executes the query
     onRunQuery();
   };
 
-  render() {
-    const { queryText, constant } = this.props.query;
+  const { queryText, constant } = query;
 
-    return (
-      <div className="gf-form">
-        <FormField
-          width={4}
-          value={constant}
-          onChange={this.onConstantChange}
-          label="Constant"
-          type="number"
-          step="0.1"
-        />
-        <FormField
-          labelWidth={8}
-          value={queryText || ''}
-          onChange={this.onQueryTextChange}
-          label="Query Text"
-          tooltip="Not used yet"
-        />
-      </div>
-    );
-  }
+  return (
+    <div className="gf-form">
+      <InlineField label="Constant">
+        <Input onChange={onConstantChange} value={constant} width={8} type="number" step="0.1" />
+      </InlineField>
+      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+        <Input onChange={onQueryTextChange} value={queryText || ''} />
+      </InlineField>
+    </div>
+  );
 }