@grafana/create-plugin 1.0.0-canary.193.98effed.0 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# v1.0.0 (Fri Feb 03 2023)
+
+#### 💥 Breaking Change
+
+- Introduce version commands [#193](https://github.com/grafana/plugin-tools/pull/193) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v0.11.0 (Fri Feb 03 2023)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Isabella Siu ([@iwysiu](https://github.com/iwysiu)), for all your work!
+
+#### 🚀 Enhancement
+
+- Update datasource plugin template [#172](https://github.com/grafana/plugin-tools/pull/172) ([@iwysiu](https://github.com/iwysiu) [@jackw](https://github.com/jackw))
+
+#### Authors: 2
+
+- Isabella Siu ([@iwysiu](https://github.com/iwysiu))
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v0.10.0 (Thu Feb 02 2023)
+
+#### 🚀 Enhancement
+
+- CreatePlugin: Change default docker image to grafana-enterprise [#197](https://github.com/grafana/plugin-tools/pull/197) ([@mckn](https://github.com/mckn))
+
+#### Authors: 1
+
+- Marcus Andersson ([@mckn](https://github.com/mckn))
+
+---
+
 # v0.9.1 (Thu Feb 02 2023)
 
 #### 🐛 Bug Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "1.0.0-canary.193.98effed.0",
+  "version": "1.0.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "98effeda3ac6e3ef10e7f5dd0d62f4999193f1d6"
+  "gitHead": "1b6746b0c95271772741cf1a8cba405919f53874"
 }

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/common/.config/Dockerfile

@@ -1,6 +1,7 @@
 ARG grafana_version=latest
+ARG grafana_image=grafana-enterprise
 
-FROM grafana/grafana:${grafana_version}
+FROM grafana/${grafana_image}:${grafana_version}
 
 # Make it as simple as possible to access the grafana instance for development purposes
 # Do NOT enable these settings in a public facing / production grafana instance

package/templates/common/.config/README.md

@@ -139,3 +139,26 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac
 -"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
 +"dev": "webpack -w -c ./webpack.config.ts --env development",
 ```
+
+### Configure grafana image to use when running docker
+
+By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. 
+
+**Example:**
+
+```yaml
+version: '3.7'
+
+services:
+  grafana:
+    container_name: 'myorg-basic-app'
+    build:
+      context: ./.config
+      args:
+        grafana_version: ${GRAFANA_VERSION:-9.1.2}
+        grafana_image: ${GRAFANA_IMAGE:-grafana}
+```
+
+In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.
+
+---

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