@grafana/create-plugin 0.0.1

package/templates/github/ci/.github/workflows/ci.yml

@@ -0,0 +1,76 @@
+{{!-- /* 🚨 The `${{ }}` Github workflow expressions need to be escaped so they are not being interpreted by Handlebars. (this comment is going to be removed after scaffolding) 🚨 */ --}}
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.1.2
+        with:
+          node-version: '14.x'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/cache@v2
+        id: cache-yarn-cache
+        with:
+          path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: $\{{ runner.os }}-yarn-$\{{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            $\{{ runner.os }}-yarn-
+
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build and test frontend
+        run: yarn build
+
+      - name: Check for backend
+        id: check-for-backend
+        run: |
+          if [ -f "Magefile.go" ]
+          then
+            echo "::set-output name=has-backend::true"
+          fi
+
+      - name: Setup Go environment
+        if: steps.check-for-backend.outputs.has-backend == 'true'
+        uses: actions/setup-go@v2
+        with:
+          go-version: '1.15'
+
+      - name: Test backend
+        if: steps.check-for-backend.outputs.has-backend == 'true'
+        uses: magefile/mage-action@v1
+        with:
+          version: latest
+          args: coverage
+
+      - name: Build backend
+        if: steps.check-for-backend.outputs.has-backend == 'true'
+        uses: magefile/mage-action@v1
+        with:
+          version: latest
+          args: buildAll

package/templates/github/ci/.github/workflows/release.yml

@@ -0,0 +1,165 @@
+{{!-- /* 🚨 The `$\{{ }}` Github workflow expressions need to be escaped so they are not being interpreted by Handlebars. (this comment is going to be removed after scaffolding) 🚨 */ --}}
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*.*.*' # Run workflow on version tags, e.g. v1.0.0.
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.1.2
+        with:
+          node-version: '14.x'
+
+      - name: Setup Go environment
+        uses: actions/setup-go@v2
+        with:
+          go-version: '1.15'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/cache@v2
+        id: cache-yarn-cache
+        with:
+          path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: $\{{ runner.os }}-yarn-$\{{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            $\{{ runner.os }}-yarn-
+
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile;
+        if: |
+          steps.cache-yarn-cache.outputs.cache-hit != 'true' ||
+          steps.cache-node-modules.outputs.cache-hit != 'true'
+
+      - name: Build and test frontend
+        run: yarn build
+
+      - name: Check for backend
+        id: check-for-backend
+        run: |
+          if [ -f "Magefile.go" ]
+          then
+            echo "::set-output name=has-backend::true"
+          fi
+
+      - name: Test backend
+        if: steps.check-for-backend.outputs.has-backend == 'true'
+        uses: magefile/mage-action@v1
+        with:
+          version: latest
+          args: coverage
+
+      - name: Build backend
+        if: steps.check-for-backend.outputs.has-backend == 'true'
+        uses: magefile/mage-action@v1
+        with:
+          version: latest
+          args: buildAll
+
+      - name: Sign plugin
+        run: yarn sign
+        env:
+          GRAFANA_API_KEY: $\{{ secrets.GRAFANA_API_KEY }} # Requires a Grafana API key from Grafana.com.
+
+      - name: Get plugin metadata
+        id: metadata
+        run: |
+          sudo apt-get install jq
+
+          export GRAFANA_PLUGIN_ID=$(cat dist/plugin.json | jq -r .id)
+          export GRAFANA_PLUGIN_VERSION=$(cat dist/plugin.json | jq -r .info.version)
+          export GRAFANA_PLUGIN_TYPE=$(cat dist/plugin.json | jq -r .type)
+          export GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip
+          export GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT}.md5
+
+          echo "::set-output name=plugin-id::${GRAFANA_PLUGIN_ID}"
+          echo "::set-output name=plugin-version::${GRAFANA_PLUGIN_VERSION}"
+          echo "::set-output name=plugin-type::${GRAFANA_PLUGIN_TYPE}"
+          echo "::set-output name=archive::${GRAFANA_PLUGIN_ARTIFACT}"
+          echo "::set-output name=archive-checksum::${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}"
+
+          echo ::set-output name=github-tag::${GITHUB_REF#refs/*/}
+
+      - name: Read changelog
+        id: changelog
+        run: |
+          awk '/^## / {s++} s == 1 {print}' CHANGELOG.md > release_notes.md
+          echo "::set-output name=path::release_notes.md"
+
+      - name: Check package version
+        run: if [ "v$\{{ steps.metadata.outputs.plugin-version }}" != "$\{{ steps.metadata.outputs.github-tag }}" ]; then printf "\033[0;31mPlugin version doesn't match tag name\033[0m\n"; exit 1; fi
+
+      - name: Package plugin
+        id: package-plugin
+        run: |
+          mv dist $\{{ steps.metadata.outputs.plugin-id }}
+          zip $\{{ steps.metadata.outputs.archive }} $\{{ steps.metadata.outputs.plugin-id }} -r
+          md5sum $\{{ steps.metadata.outputs.archive }} > $\{{ steps.metadata.outputs.archive-checksum }}
+          echo "::set-output name=checksum::$(cat ./$\{{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)"
+
+      - name: Lint plugin
+        run: |
+          git clone https://github.com/grafana/plugin-validator
+          pushd ./plugin-validator/cmd/plugincheck
+          go install
+          popd
+          plugincheck $\{{ steps.metadata.outputs.archive }}
+
+      - name: Create release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: $\{{ github.ref }}
+          release_name: Release $\{{ github.ref }}
+          body_path: $\{{ steps.changelog.outputs.path }}
+          draft: true
+
+      - name: Add plugin to release
+        id: upload-plugin-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: $\{{ steps.create_release.outputs.upload_url }}
+          asset_path: ./$\{{ steps.metadata.outputs.archive }}
+          asset_name: $\{{ steps.metadata.outputs.archive }}
+          asset_content_type: application/zip
+
+      - name: Add checksum to release
+        id: upload-checksum-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: $\{{ steps.create_release.outputs.upload_url }}
+          asset_path: ./$\{{ steps.metadata.outputs.archive-checksum }}
+          asset_name: $\{{ steps.metadata.outputs.archive-checksum }}
+          asset_content_type: text/plain
+
+      - name: Publish to Grafana.com
+        run: |
+          echo A draft release has been created for your plugin. Please review and publish it. Then submit your plugin to grafana.com/plugins by opening a PR to https://github.com/grafana/grafana-plugin-repository with the following entry:
+          echo
+          echo '{ "id": "$\{{ steps.metadata.outputs.plugin-id }}", "type": "$\{{ steps.metadata.outputs.plugin-type }}", "url": "https://github.com/$\{{ github.repository }}", "versions": [ { "version": "$\{{ steps.metadata.outputs.plugin-version }}", "commit": "$\{{ github.sha }}", "url": "https://github.com/$\{{ github.repository }}", "download": { "any": { "url": "https://github.com/$\{{ github.repository }}/releases/download/v$\{{ steps.metadata.outputs.plugin-version }}/$\{{ steps.metadata.outputs.archive }}", "md5": "$\{{ steps.package-plugin.outputs.checksum }}" } } } ] }' | jq .

package/templates/github/is-compatible/.github/workflows/is-compatible.yml

@@ -0,0 +1,17 @@
+name: Latest Grafana API compatibility check
+on: [push, pull_request]
+
+jobs:
+  compatibilitycheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build plugin
+        run: yarn build
+      - name: Compatibility check
+        run: npx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data,@grafana/ui,@grafana/runtime

package/templates/panel/README.md

@@ -0,0 +1,22 @@
+# Grafana panel plugin template
+
+This template is a starting point for building a panel plugin for Grafana.
+
+## What are Grafana panel plugins?
+
+Panel plugins allow you to add new types of visualizations to your dashboard, such as maps, clocks, pie charts, lists, and more.
+
+Use panel plugins when you want to do things like visualize data returned by data source queries, navigate between dashboards, or control external systems (such as smart home devices).
+
+## Getting started
+
+-- INSERT FRONTEND GETTING STARTED --
+{{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
+
+## Learn more
+
+Below you can find source code for existing app plugins and other related documentation.
+
+- [Basic panel plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/panel-basic#readme)
+- [Plugin.json documentation](https://grafana.com/docs/grafana/latest/developers/plugins/metadata/)
+- [How to sign a plugin?](https://grafana.com/docs/grafana/latest/developers/plugins/sign-a-plugin/)

package/templates/panel/src/components/SimplePanel.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { PanelProps } from '@grafana/data';
+import { SimpleOptions } from 'types';
+import { css, cx } from '@emotion/css';
+import { useStyles2, useTheme2 } from '@grafana/ui';
+
+interface Props extends PanelProps<SimpleOptions> {}
+
+const getStyles = () => {
+  return {
+    wrapper: css`
+      font-family: Open Sans;
+      position: relative;
+    `,
+    svg: css`
+      position: absolute;
+      top: 0;
+      left: 0;
+    `,
+    textBox: css`
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: 10px;
+    `,
+  };
+};
+
+export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
+  const theme = useTheme2();
+  const styles = useStyles2(getStyles);
+  return (
+    <div
+      className={cx(
+        styles.wrapper,
+        css`
+          width: ${width}px;
+          height: ${height}px;
+        `
+      )}
+    >
+      <svg
+        className={styles.svg}
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
+      >
+        <g>
+        {{!-- /* 🚨 Escaping the following line because of Handlebars. (this comment is going to be removed after scaffolding) 🚨 */ --}}
+          <circle style=\{{ fill: theme.colors.primary.main }} r={100} />
+        </g>
+      </svg>
+
+      <div className={styles.textBox}>
+        {options.showSeriesCount && <div>Number of series: {data.series.length}</div>}
+        <div>Text option value: {options.text}</div>
+      </div>
+    </div>
+  );
+};

package/templates/panel/src/module.test.ts

@@ -0,0 +1,6 @@
+// Just a stub test
+describe('placeholder test', () => {
+  it('should return true', () => {
+    expect(true).toBeTruthy();
+  });
+});

package/templates/panel/src/module.ts

@@ -0,0 +1,40 @@
+import { PanelPlugin } from '@grafana/data';
+import { SimpleOptions } from './types';
+import { SimplePanel } from './components/SimplePanel';
+
+export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
+  return builder
+    .addTextInput({
+      path: 'text',
+      name: 'Simple text option',
+      description: 'Description of panel option',
+      defaultValue: 'Default value of text input option',
+    })
+    .addBooleanSwitch({
+      path: 'showSeriesCount',
+      name: 'Show series counter',
+      defaultValue: false,
+    })
+    .addRadio({
+      path: 'seriesCountSize',
+      defaultValue: 'sm',
+      name: 'Series counter size',
+      settings: {
+        options: [
+          {
+            value: 'sm',
+            label: 'Small',
+          },
+          {
+            value: 'md',
+            label: 'Medium',
+          },
+          {
+            value: 'lg',
+            label: 'Large',
+          },
+        ],
+      },
+      showIf: (config) => config.showSeriesCount,
+    });
+});

package/templates/panel/src/plugin.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
+  "type": "panel",
+  "name": "{{ titleCase pluginName }}",
+  "id": "{{ normalize_id pluginName orgName 'panel' }}",
+  "info": {
+    "description": "{{ sentenceCase pluginDescription }}",
+    "author": {
+      "name": "{{ sentenceCase orgName }}"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "links": [
+      {
+        "name": "Website",
+        "url": "https://github.com/grafana/grafana-starter-panel"
+      },
+      {
+        "name": "License",
+        "url": "https://github.com/grafana/grafana-starter-panel/blob/master/LICENSE"
+      }
+    ],
+    "screenshots": [],
+    "version": "%VERSION%",
+    "updated": "%TODAY%"
+  },
+  "dependencies": {
+    "grafanaDependency": ">={{ grafanaVersion }}",
+    "plugins": []
+  }
+}

package/templates/panel/src/types.ts

@@ -0,0 +1,7 @@
+type SeriesSize = 'sm' | 'md' | 'lg';
+
+export interface SimpleOptions {
+  text: string;
+  showSeriesCount: boolean;
+  seriesCountSize: SeriesSize;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "outDir": "./dist",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "pretty": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "templates"],
+}