Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
|
|
f9fb6af765 | |
|
|
cdd2f71484 | |
|
|
420c2d4f3b | |
|
|
a808746550 |
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"version": "5.7.4"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in
|
||||||
|
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-eslint-config
|
||||||
|
*/
|
||||||
|
{
|
||||||
|
"extends": ["@grafana/eslint-config"],
|
||||||
|
"root": true,
|
||||||
|
"rules": {
|
||||||
|
"react/prop-types": "off"
|
||||||
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"plugins": ["deprecation"],
|
||||||
|
"files": ["src/**/*.{ts,tsx}"],
|
||||||
|
"rules": {
|
||||||
|
"deprecation/deprecation": "warn"
|
||||||
|
},
|
||||||
|
"parserOptions": {
|
||||||
|
"project": "./tsconfig.json"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["./tests/**/*"],
|
||||||
|
"rules": {
|
||||||
|
"react-hooks/rules-of-hooks": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in .config/README.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
endOfLine: 'auto',
|
||||||
|
printWidth: 120,
|
||||||
|
trailingComma: 'es5',
|
||||||
|
semi: true,
|
||||||
|
jsxSingleQuote: false,
|
||||||
|
singleQuote: true,
|
||||||
|
useTabs: false,
|
||||||
|
tabWidth: 2,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
ARG grafana_version=latest
|
||||||
|
ARG grafana_image=grafana-enterprise
|
||||||
|
|
||||||
|
FROM grafana/${grafana_image}:${grafana_version}
|
||||||
|
|
||||||
|
ARG development=false
|
||||||
|
ARG TARGETARCH
|
||||||
|
|
||||||
|
|
||||||
|
ENV DEV "${development}"
|
||||||
|
|
||||||
|
# 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
|
||||||
|
ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
|
||||||
|
ENV GF_AUTH_ANONYMOUS_ENABLED "true"
|
||||||
|
ENV GF_AUTH_BASIC_ENABLED "false"
|
||||||
|
# Set development mode so plugins can be loaded without the need to sign
|
||||||
|
ENV GF_DEFAULT_APP_MODE "development"
|
||||||
|
|
||||||
|
|
||||||
|
LABEL maintainer="Grafana Labs <hello@grafana.com>"
|
||||||
|
|
||||||
|
ENV GF_PATHS_HOME="/usr/share/grafana"
|
||||||
|
WORKDIR $GF_PATHS_HOME
|
||||||
|
|
||||||
|
USER root
|
||||||
|
|
||||||
|
# Installing supervisor and inotify-tools
|
||||||
|
RUN if [ "${development}" = "true" ]; then \
|
||||||
|
if grep -i -q alpine /etc/issue; then \
|
||||||
|
apk add supervisor inotify-tools git; \
|
||||||
|
elif grep -i -q ubuntu /etc/issue; then \
|
||||||
|
DEBIAN_FRONTEND=noninteractive && \
|
||||||
|
apt-get update && \
|
||||||
|
apt-get install -y supervisor inotify-tools git && \
|
||||||
|
rm -rf /var/lib/apt/lists/*; \
|
||||||
|
else \
|
||||||
|
echo 'ERROR: Unsupported base image' && /bin/false; \
|
||||||
|
fi \
|
||||||
|
fi
|
||||||
|
|
||||||
|
COPY supervisord/supervisord.conf /etc/supervisor.d/supervisord.ini
|
||||||
|
COPY supervisord/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Inject livereload script into grafana index.html
|
||||||
|
RUN sed -i 's|</body>|<script src="http://localhost:35729/livereload.js"></script></body>|g' /usr/share/grafana/public/views/index.html
|
||||||
|
|
||||||
|
|
||||||
|
COPY entrypoint.sh /entrypoint.sh
|
||||||
|
RUN chmod +x /entrypoint.sh
|
||||||
|
ENTRYPOINT ["/entrypoint.sh"]
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
# Default build configuration by Grafana
|
||||||
|
|
||||||
|
**This is an auto-generated directory and is not intended to be changed! ⚠️**
|
||||||
|
|
||||||
|
The `.config/` directory holds basic configuration for the different tools
|
||||||
|
that are used to develop, test and build the project. In order to make it updates easier we ask you to
|
||||||
|
not edit files in this folder to extend configuration.
|
||||||
|
|
||||||
|
## How to extend the basic configs?
|
||||||
|
|
||||||
|
Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
|
||||||
|
to issues around working with the project.
|
||||||
|
|
||||||
|
### Extending the ESLint config
|
||||||
|
|
||||||
|
Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./.config/.eslintrc",
|
||||||
|
"rules": {
|
||||||
|
"react/prop-types": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending the Prettier config
|
||||||
|
|
||||||
|
Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
module.exports = {
|
||||||
|
// Prettier configuration provided by Grafana scaffolding
|
||||||
|
...require('./.config/.prettierrc.js'),
|
||||||
|
|
||||||
|
semi: false,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending the Jest config
|
||||||
|
|
||||||
|
There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
|
||||||
|
|
||||||
|
**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
|
||||||
|
set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
|
||||||
|
|
||||||
|
**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
|
||||||
|
|
||||||
|
#### ESM errors with Jest
|
||||||
|
|
||||||
|
A common issue with the current jest config involves importing an npm package that only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this, we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be, this can be extended in the following way:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
process.env.TZ = 'UTC';
|
||||||
|
const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// Jest configuration provided by Grafana
|
||||||
|
...require('./.config/jest.config'),
|
||||||
|
// Inform jest to only transform specific node_module packages.
|
||||||
|
transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending the TypeScript config
|
||||||
|
|
||||||
|
Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./.config/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"preserveConstEnums": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending the Webpack config
|
||||||
|
|
||||||
|
Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
|
||||||
|
|
||||||
|
#### 1. Create a new Webpack configuration file
|
||||||
|
|
||||||
|
Create a new config file that is going to extend the basic one provided by Grafana.
|
||||||
|
It can live in the project root, e.g. `webpack.config.ts`.
|
||||||
|
|
||||||
|
#### 2. Merge the basic config provided by Grafana and your custom setup
|
||||||
|
|
||||||
|
We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// webpack.config.ts
|
||||||
|
import type { Configuration } from 'webpack';
|
||||||
|
import { merge } from 'webpack-merge';
|
||||||
|
import grafanaConfig from './.config/webpack/webpack.config';
|
||||||
|
|
||||||
|
const config = async (env): Promise<Configuration> => {
|
||||||
|
const baseConfig = await grafanaConfig(env);
|
||||||
|
|
||||||
|
return merge(baseConfig, {
|
||||||
|
// Add custom config here...
|
||||||
|
output: {
|
||||||
|
asyncChunks: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3. Update the `package.json` to use the new Webpack config
|
||||||
|
|
||||||
|
We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
|
||||||
|
|
||||||
|
**Update for `build`:**
|
||||||
|
|
||||||
|
```diff
|
||||||
|
-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
|
||||||
|
+"build": "webpack -c ./webpack.config.ts --env production",
|
||||||
|
```
|
||||||
|
|
||||||
|
**Update for `dev`:**
|
||||||
|
|
||||||
|
```diff
|
||||||
|
-"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 behavior, 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 assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker compose commands, which might be convenient in some scenarios.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
if [ "${DEV}" = "false" ]; then
|
||||||
|
echo "Starting test mode"
|
||||||
|
exec /run.sh
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Starting development mode"
|
||||||
|
|
||||||
|
if grep -i -q alpine /etc/issue; then
|
||||||
|
exec /usr/bin/supervisord -c /etc/supervisord.conf
|
||||||
|
elif grep -i -q ubuntu /etc/issue; then
|
||||||
|
exec /usr/bin/supervisord -c /etc/supervisor/supervisord.conf
|
||||||
|
else
|
||||||
|
echo 'ERROR: Unsupported base image'
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in
|
||||||
|
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
|
||||||
|
*/
|
||||||
|
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
|
import { TextEncoder, TextDecoder } from 'util';
|
||||||
|
|
||||||
|
Object.assign(global, { TextDecoder, TextEncoder });
|
||||||
|
|
||||||
|
// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
|
||||||
|
Object.defineProperty(global, 'matchMedia', {
|
||||||
|
writable: true,
|
||||||
|
value: (query) => ({
|
||||||
|
matches: false,
|
||||||
|
media: query,
|
||||||
|
onchange: null,
|
||||||
|
addListener: jest.fn(), // deprecated
|
||||||
|
removeListener: jest.fn(), // deprecated
|
||||||
|
addEventListener: jest.fn(),
|
||||||
|
removeEventListener: jest.fn(),
|
||||||
|
dispatchEvent: jest.fn(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
HTMLCanvasElement.prototype.getContext = () => {};
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in
|
||||||
|
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
moduleNameMapper: {
|
||||||
|
'\\.(css|scss|sass)$': 'identity-obj-proxy',
|
||||||
|
'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
|
||||||
|
},
|
||||||
|
modulePaths: ['<rootDir>/src'],
|
||||||
|
setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
|
||||||
|
testEnvironment: 'jest-environment-jsdom',
|
||||||
|
testMatch: [
|
||||||
|
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
|
||||||
|
'<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||||
|
'<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||||
|
],
|
||||||
|
transform: {
|
||||||
|
'^.+\\.(t|j)sx?$': [
|
||||||
|
'@swc/jest',
|
||||||
|
{
|
||||||
|
sourceMaps: 'inline',
|
||||||
|
jsc: {
|
||||||
|
parser: {
|
||||||
|
syntax: 'typescript',
|
||||||
|
tsx: true,
|
||||||
|
decorators: false,
|
||||||
|
dynamicImport: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// Jest will throw `Cannot use import statement outside module` if it tries to load an
|
||||||
|
// ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
|
||||||
|
transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
// Due to the grafana/ui Icon component making fetch requests to
|
||||||
|
// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
|
||||||
|
// the failed fetch requests from displaying errors in console.
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
type Callback = (...args: any[]) => void;
|
||||||
|
|
||||||
|
export interface StorageItem {
|
||||||
|
content: string;
|
||||||
|
queue: Callback[];
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
|
||||||
|
|
||||||
|
const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
|
||||||
|
|
||||||
|
const InlineSVG = ({ src }: { src: string }) => {
|
||||||
|
// testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
|
||||||
|
const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
|
||||||
|
return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InlineSVG;
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in .config/README.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* This utility function is useful in combination with jest `transformIgnorePatterns` config
|
||||||
|
* to transform specific packages (e.g.ES modules) in a projects node_modules folder.
|
||||||
|
*/
|
||||||
|
const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!.*(${moduleNames.join('|')})\/.*)`;
|
||||||
|
|
||||||
|
// Array of known nested grafana package dependencies that only bundle an ESM version
|
||||||
|
const grafanaESModules = [
|
||||||
|
'.pnpm', // Support using pnpm symlinked packages
|
||||||
|
'@grafana/schema',
|
||||||
|
'd3',
|
||||||
|
'd3-color',
|
||||||
|
'd3-force',
|
||||||
|
'd3-interpolate',
|
||||||
|
'd3-scale-chromatic',
|
||||||
|
'ol',
|
||||||
|
'react-colorful',
|
||||||
|
'rxjs',
|
||||||
|
'uuid',
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
nodeModulesToTransform,
|
||||||
|
grafanaESModules,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
[supervisord]
|
||||||
|
nodaemon=true
|
||||||
|
user=root
|
||||||
|
|
||||||
|
[program:grafana]
|
||||||
|
user=root
|
||||||
|
directory=/var/lib/grafana
|
||||||
|
command=/run.sh
|
||||||
|
stdout_logfile=/dev/fd/1
|
||||||
|
stdout_logfile_maxbytes=0
|
||||||
|
redirect_stderr=true
|
||||||
|
killasgroup=true
|
||||||
|
stopasgroup=true
|
||||||
|
autostart=true
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in
|
||||||
|
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-typescript-config
|
||||||
|
*/
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"alwaysStrict": true,
|
||||||
|
"declaration": false,
|
||||||
|
"rootDir": "../src",
|
||||||
|
"baseUrl": "../src",
|
||||||
|
"typeRoots": ["../node_modules/@types"],
|
||||||
|
"resolveJsonModule": true
|
||||||
|
},
|
||||||
|
"ts-node": {
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"esModuleInterop": true
|
||||||
|
},
|
||||||
|
"transpileOnly": true
|
||||||
|
},
|
||||||
|
"include": ["../src", "./types"],
|
||||||
|
"extends": "@grafana/tsconfig"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
// Image declarations
|
||||||
|
declare module '*.gif' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpg' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpeg' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.webp' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font declarations
|
||||||
|
declare module '*.woff';
|
||||||
|
declare module '*.woff2';
|
||||||
|
declare module '*.eot';
|
||||||
|
declare module '*.ttf';
|
||||||
|
declare module '*.otf';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export const SOURCE_DIR = 'src';
|
||||||
|
export const DIST_DIR = 'dist';
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import fs from 'fs';
|
||||||
|
import process from 'process';
|
||||||
|
import os from 'os';
|
||||||
|
import path from 'path';
|
||||||
|
import { glob } from 'glob';
|
||||||
|
import { SOURCE_DIR } from './constants';
|
||||||
|
|
||||||
|
export function isWSL() {
|
||||||
|
if (process.platform !== 'linux') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (os.release().toLowerCase().includes('microsoft')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return fs.readFileSync('/proc/version', 'utf8').toLowerCase().includes('microsoft');
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPackageJson() {
|
||||||
|
return require(path.resolve(process.cwd(), 'package.json'));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPluginJson() {
|
||||||
|
return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCPConfigVersion() {
|
||||||
|
const cprcJson = path.resolve(__dirname, '../', '.cprc.json');
|
||||||
|
return fs.existsSync(cprcJson) ? require(cprcJson).version : { version: 'unknown' };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasReadme() {
|
||||||
|
return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Support bundling nested plugins by finding all plugin.json files in src directory
|
||||||
|
// then checking for a sibling module.[jt]sx? file.
|
||||||
|
export async function getEntries(): Promise<Record<string, string>> {
|
||||||
|
const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
|
||||||
|
|
||||||
|
const plugins = await Promise.all(
|
||||||
|
pluginsJson.map((pluginJson) => {
|
||||||
|
const folder = path.dirname(pluginJson);
|
||||||
|
return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return plugins.reduce((result, modules) => {
|
||||||
|
return modules.reduce((result, module) => {
|
||||||
|
const pluginPath = path.dirname(module);
|
||||||
|
const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
|
||||||
|
const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
|
||||||
|
|
||||||
|
result[entryName] = module;
|
||||||
|
return result;
|
||||||
|
}, result);
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
/*
|
||||||
|
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||||
|
*
|
||||||
|
* In order to extend the configuration follow the steps in
|
||||||
|
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-webpack-config
|
||||||
|
*/
|
||||||
|
|
||||||
|
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||||
|
import ESLintPlugin from 'eslint-webpack-plugin';
|
||||||
|
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
|
||||||
|
import path from 'path';
|
||||||
|
import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
|
||||||
|
import TerserPlugin from 'terser-webpack-plugin';
|
||||||
|
import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
|
||||||
|
import { type Configuration, BannerPlugin } from 'webpack';
|
||||||
|
import LiveReloadPlugin from 'webpack-livereload-plugin';
|
||||||
|
import VirtualModulesPlugin from 'webpack-virtual-modules';
|
||||||
|
|
||||||
|
import { DIST_DIR, SOURCE_DIR } from './constants';
|
||||||
|
import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
|
||||||
|
|
||||||
|
const pluginJson = getPluginJson();
|
||||||
|
const cpVersion = getCPConfigVersion();
|
||||||
|
|
||||||
|
const virtualPublicPath = new VirtualModulesPlugin({
|
||||||
|
'node_modules/grafana-public-path.js': `
|
||||||
|
import amdMetaModule from 'amd-module';
|
||||||
|
|
||||||
|
__webpack_public_path__ =
|
||||||
|
amdMetaModule && amdMetaModule.uri
|
||||||
|
? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
|
||||||
|
: 'public/plugins/${pluginJson.id}/';
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = async (env): Promise<Configuration> => {
|
||||||
|
const baseConfig: Configuration = {
|
||||||
|
cache: {
|
||||||
|
type: 'filesystem',
|
||||||
|
buildDependencies: {
|
||||||
|
config: [__filename],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
context: path.join(process.cwd(), SOURCE_DIR),
|
||||||
|
|
||||||
|
devtool: env.production ? 'source-map' : 'eval-source-map',
|
||||||
|
|
||||||
|
entry: await getEntries(),
|
||||||
|
|
||||||
|
externals: [
|
||||||
|
// Required for dynamic publicPath resolution
|
||||||
|
{ 'amd-module': 'module' },
|
||||||
|
'lodash',
|
||||||
|
'jquery',
|
||||||
|
'moment',
|
||||||
|
'slate',
|
||||||
|
'emotion',
|
||||||
|
'@emotion/react',
|
||||||
|
'@emotion/css',
|
||||||
|
'prismjs',
|
||||||
|
'slate-plain-serializer',
|
||||||
|
'@grafana/slate-react',
|
||||||
|
'react',
|
||||||
|
'react-dom',
|
||||||
|
'react-redux',
|
||||||
|
'redux',
|
||||||
|
'rxjs',
|
||||||
|
'react-router',
|
||||||
|
'react-router-dom',
|
||||||
|
'd3',
|
||||||
|
'angular',
|
||||||
|
'@grafana/ui',
|
||||||
|
'@grafana/runtime',
|
||||||
|
'@grafana/data',
|
||||||
|
|
||||||
|
// Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
|
||||||
|
({ request }, callback) => {
|
||||||
|
const prefix = 'grafana/';
|
||||||
|
const hasPrefix = (request) => request.indexOf(prefix) === 0;
|
||||||
|
const stripPrefix = (request) => request.substr(prefix.length);
|
||||||
|
|
||||||
|
if (hasPrefix(request)) {
|
||||||
|
return callback(undefined, stripPrefix(request));
|
||||||
|
}
|
||||||
|
|
||||||
|
callback();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// Support WebAssembly according to latest spec - makes WebAssembly module async
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
mode: env.production ? 'production' : 'development',
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
// This must come first in the rules array otherwise it breaks sourcemaps.
|
||||||
|
{
|
||||||
|
test: /src\/(?:.*\/)?module\.tsx?$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'imports-loader',
|
||||||
|
options: {
|
||||||
|
imports: `side-effects grafana-public-path`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
test: /\.[tj]sx?$/,
|
||||||
|
use: {
|
||||||
|
loader: 'swc-loader',
|
||||||
|
options: {
|
||||||
|
jsc: {
|
||||||
|
baseUrl: path.resolve(process.cwd(), SOURCE_DIR),
|
||||||
|
target: 'es2015',
|
||||||
|
loose: false,
|
||||||
|
parser: {
|
||||||
|
syntax: 'typescript',
|
||||||
|
tsx: true,
|
||||||
|
decorators: false,
|
||||||
|
dynamicImport: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ['style-loader', 'css-loader'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/,
|
||||||
|
use: ['style-loader', 'css-loader', 'sass-loader'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpe?g|gif|svg)$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
generator: {
|
||||||
|
filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
generator: {
|
||||||
|
filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
minimize: Boolean(env.production),
|
||||||
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
terserOptions: {
|
||||||
|
format: {
|
||||||
|
comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
|
||||||
|
},
|
||||||
|
compress: {
|
||||||
|
drop_console: ['log', 'info'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
clean: {
|
||||||
|
keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
|
||||||
|
},
|
||||||
|
filename: '[name].js',
|
||||||
|
library: {
|
||||||
|
type: 'amd',
|
||||||
|
},
|
||||||
|
path: path.resolve(process.cwd(), DIST_DIR),
|
||||||
|
publicPath: `public/plugins/${pluginJson.id}/`,
|
||||||
|
uniqueName: pluginJson.id,
|
||||||
|
crossOriginLoading: 'anonymous',
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
virtualPublicPath,
|
||||||
|
// Insert create plugin version information into the bundle
|
||||||
|
new BannerPlugin({
|
||||||
|
banner: '/* [create-plugin] version: ' + cpVersion + ' */',
|
||||||
|
raw: true,
|
||||||
|
entryOnly: true,
|
||||||
|
}),
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: [
|
||||||
|
// If src/README.md exists use it; otherwise the root README
|
||||||
|
// To `compiler.options.output`
|
||||||
|
{ from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
|
||||||
|
{ from: 'plugin.json', to: '.' },
|
||||||
|
{ from: '../LICENSE', to: '.' },
|
||||||
|
{ from: '../CHANGELOG.md', to: '.', force: true },
|
||||||
|
{ from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
|
||||||
|
{ from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
{ from: '**/query_help.md', to: '.', noErrorOnMissing: true }, // Optional
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
// Replace certain template-variables in the README and plugin.json
|
||||||
|
new ReplaceInFileWebpackPlugin([
|
||||||
|
{
|
||||||
|
dir: DIST_DIR,
|
||||||
|
files: ['plugin.json', 'README.md'],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
search: /\%VERSION\%/g,
|
||||||
|
replace: getPackageJson().version,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /\%TODAY\%/g,
|
||||||
|
replace: new Date().toISOString().substring(0, 10),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /\%PLUGIN_ID\%/g,
|
||||||
|
replace: pluginJson.id,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
new SubresourceIntegrityPlugin({
|
||||||
|
hashFuncNames: ['sha256'],
|
||||||
|
}),
|
||||||
|
...(env.development
|
||||||
|
? [
|
||||||
|
new LiveReloadPlugin(),
|
||||||
|
new ForkTsCheckerWebpackPlugin({
|
||||||
|
async: Boolean(env.development),
|
||||||
|
issue: {
|
||||||
|
include: [{ file: '**/*.{ts,tsx}' }],
|
||||||
|
},
|
||||||
|
typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
|
||||||
|
}),
|
||||||
|
new ESLintPlugin({
|
||||||
|
extensions: ['.ts', '.tsx'],
|
||||||
|
lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||||
|
// handle resolving "rootDir" paths
|
||||||
|
modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
|
||||||
|
unsafeCache: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isWSL()) {
|
||||||
|
baseConfig.watchOptions = {
|
||||||
|
poll: 3000,
|
||||||
|
ignored: /node_modules/,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
dist/
|
||||||
|
artifacts/
|
||||||
|
work/
|
||||||
|
ci/
|
||||||
|
|
||||||
|
# e2e test directories
|
||||||
|
/test-results/
|
||||||
|
/playwright-report/
|
||||||
|
/blob-report/
|
||||||
|
/playwright/.cache/
|
||||||
|
/playwright/.auth/
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
.idea
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
=======
|
||||||
|
# Grafana data source plugin template
|
||||||
|
|
||||||
|
This template is a starting point for building a Data Source Plugin for Grafana.
|
||||||
|
|
||||||
|
## What are Grafana data source plugins?
|
||||||
|
|
||||||
|
Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana.
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
1. Install dependencies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Build plugin in development mode and run in watch mode
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Build plugin in production mode
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Run the tests (using Jest)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Runs the tests and watches for changes, requires git init first
|
||||||
|
npm run test
|
||||||
|
|
||||||
|
# Exits after running all the tests
|
||||||
|
npm run test:ci
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Spin up a Grafana instance and run the plugin inside it (using Docker)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run server
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Run the E2E tests (using Cypress)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Spins up a Grafana instance first that we tests against
|
||||||
|
npm run server
|
||||||
|
|
||||||
|
# Starts the tests
|
||||||
|
npm run e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
7. Run the linter
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
# or
|
||||||
|
|
||||||
|
npm run lint:fix
|
||||||
|
```
|
||||||
|
|
||||||
|
# Distributing your plugin
|
||||||
|
|
||||||
|
When distributing a Grafana plugin either within the community or privately the plugin must be signed so the Grafana application can verify its authenticity. This can be done with the `@grafana/sign-plugin` package.
|
||||||
|
|
||||||
|
_Note: It's not necessary to sign a plugin during development. The docker development environment that is scaffolded with `@grafana/create-plugin` caters for running the plugin without a signature._
|
||||||
|
|
||||||
|
## Initial steps
|
||||||
|
|
||||||
|
Before signing a plugin please read the Grafana [plugin publishing and signing criteria](https://grafana.com/legal/plugins/#plugin-publishing-and-signing-criteria) documentation carefully.
|
||||||
|
|
||||||
|
`@grafana/create-plugin` has added the necessary commands and workflows to make signing and distributing a plugin via the grafana plugins catalog as straightforward as possible.
|
||||||
|
|
||||||
|
Before signing a plugin for the first time please consult the Grafana [plugin signature levels](https://grafana.com/legal/plugins/#what-are-the-different-classifications-of-plugins) documentation to understand the differences between the types of signature level.
|
||||||
|
|
||||||
|
1. Create a [Grafana Cloud account](https://grafana.com/signup).
|
||||||
|
2. Make sure that the first part of the plugin ID matches the slug of your Grafana Cloud account.
|
||||||
|
- _You can find the plugin ID in the `plugin.json` file inside your plugin directory. For example, if your account slug is `acmecorp`, you need to prefix the plugin ID with `acmecorp-`._
|
||||||
|
3. Create a Grafana Cloud API key with the `PluginPublisher` role.
|
||||||
|
4. Keep a record of this API key as it will be required for signing a plugin
|
||||||
|
|
||||||
|
## Signing a plugin
|
||||||
|
|
||||||
|
### Using Github actions release workflow
|
||||||
|
|
||||||
|
If the plugin is using the github actions supplied with `@grafana/create-plugin` signing a plugin is included out of the box. The [release workflow](./.github/workflows/release.yml) can prepare everything to make submitting your plugin to Grafana as easy as possible. Before being able to sign the plugin however a secret needs adding to the Github repository.
|
||||||
|
|
||||||
|
1. Please navigate to "settings > secrets > actions" within your repo to create secrets.
|
||||||
|
2. Click "New repository secret"
|
||||||
|
3. Name the secret "GRAFANA_API_KEY"
|
||||||
|
4. Paste your Grafana Cloud API key in the Secret field
|
||||||
|
5. Click "Add secret"
|
||||||
|
|
||||||
|
#### Push a version tag
|
||||||
|
|
||||||
|
To trigger the workflow we need to push a version tag to github. This can be achieved with the following steps:
|
||||||
|
|
||||||
|
1. Run `npm version <major|minor|patch>`
|
||||||
|
2. Run `git push origin main --follow-tags`
|
||||||
|
|
||||||
|
## Learn more
|
||||||
|
|
||||||
|
Below you can find source code for existing app plugins and other related documentation.
|
||||||
|
|
||||||
|
- [Basic data source plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/datasource-basic#readme)
|
||||||
|
- [`plugin.json` documentation](https://grafana.com/developers/plugin-tools/reference/plugin-json)
|
||||||
|
- [How to sign a plugin?](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin)
|
||||||
|
>>>>>>> 269e0de (Initial source loading)
|
||||||
117
README.md
117
README.md
|
|
@ -1,118 +1 @@
|
||||||
<<<<<<< HEAD
|
|
||||||
# grafana_datasource_plugin
|
|
||||||
|
|
||||||
Datasource plugin for Grafana with E-CORE REST support
|
Datasource plugin for Grafana with E-CORE REST support
|
||||||
=======
|
|
||||||
# Grafana data source plugin template
|
|
||||||
|
|
||||||
This template is a starting point for building a Data Source Plugin for Grafana.
|
|
||||||
|
|
||||||
## What are Grafana data source plugins?
|
|
||||||
|
|
||||||
Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana.
|
|
||||||
|
|
||||||
## Getting started
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
|
|
||||||
1. Install dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Build plugin in development mode and run in watch mode
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Build plugin in production mode
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Run the tests (using Jest)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Runs the tests and watches for changes, requires git init first
|
|
||||||
npm run test
|
|
||||||
|
|
||||||
# Exits after running all the tests
|
|
||||||
npm run test:ci
|
|
||||||
```
|
|
||||||
|
|
||||||
5. Spin up a Grafana instance and run the plugin inside it (using Docker)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run server
|
|
||||||
```
|
|
||||||
|
|
||||||
6. Run the E2E tests (using Cypress)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Spins up a Grafana instance first that we tests against
|
|
||||||
npm run server
|
|
||||||
|
|
||||||
# Starts the tests
|
|
||||||
npm run e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
7. Run the linter
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run lint
|
|
||||||
|
|
||||||
# or
|
|
||||||
|
|
||||||
npm run lint:fix
|
|
||||||
```
|
|
||||||
|
|
||||||
# Distributing your plugin
|
|
||||||
|
|
||||||
When distributing a Grafana plugin either within the community or privately the plugin must be signed so the Grafana application can verify its authenticity. This can be done with the `@grafana/sign-plugin` package.
|
|
||||||
|
|
||||||
_Note: It's not necessary to sign a plugin during development. The docker development environment that is scaffolded with `@grafana/create-plugin` caters for running the plugin without a signature._
|
|
||||||
|
|
||||||
## Initial steps
|
|
||||||
|
|
||||||
Before signing a plugin please read the Grafana [plugin publishing and signing criteria](https://grafana.com/legal/plugins/#plugin-publishing-and-signing-criteria) documentation carefully.
|
|
||||||
|
|
||||||
`@grafana/create-plugin` has added the necessary commands and workflows to make signing and distributing a plugin via the grafana plugins catalog as straightforward as possible.
|
|
||||||
|
|
||||||
Before signing a plugin for the first time please consult the Grafana [plugin signature levels](https://grafana.com/legal/plugins/#what-are-the-different-classifications-of-plugins) documentation to understand the differences between the types of signature level.
|
|
||||||
|
|
||||||
1. Create a [Grafana Cloud account](https://grafana.com/signup).
|
|
||||||
2. Make sure that the first part of the plugin ID matches the slug of your Grafana Cloud account.
|
|
||||||
- _You can find the plugin ID in the `plugin.json` file inside your plugin directory. For example, if your account slug is `acmecorp`, you need to prefix the plugin ID with `acmecorp-`._
|
|
||||||
3. Create a Grafana Cloud API key with the `PluginPublisher` role.
|
|
||||||
4. Keep a record of this API key as it will be required for signing a plugin
|
|
||||||
|
|
||||||
## Signing a plugin
|
|
||||||
|
|
||||||
### Using Github actions release workflow
|
|
||||||
|
|
||||||
If the plugin is using the github actions supplied with `@grafana/create-plugin` signing a plugin is included out of the box. The [release workflow](./.github/workflows/release.yml) can prepare everything to make submitting your plugin to Grafana as easy as possible. Before being able to sign the plugin however a secret needs adding to the Github repository.
|
|
||||||
|
|
||||||
1. Please navigate to "settings > secrets > actions" within your repo to create secrets.
|
|
||||||
2. Click "New repository secret"
|
|
||||||
3. Name the secret "GRAFANA_API_KEY"
|
|
||||||
4. Paste your Grafana Cloud API key in the Secret field
|
|
||||||
5. Click "Add secret"
|
|
||||||
|
|
||||||
#### Push a version tag
|
|
||||||
|
|
||||||
To trigger the workflow we need to push a version tag to github. This can be achieved with the following steps:
|
|
||||||
|
|
||||||
1. Run `npm version <major|minor|patch>`
|
|
||||||
2. Run `git push origin main --follow-tags`
|
|
||||||
|
|
||||||
## Learn more
|
|
||||||
|
|
||||||
Below you can find source code for existing app plugins and other related documentation.
|
|
||||||
|
|
||||||
- [Basic data source plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/datasource-basic#readme)
|
|
||||||
- [`plugin.json` documentation](https://grafana.com/developers/plugin-tools/reference/plugin-json)
|
|
||||||
- [How to sign a plugin?](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin)
|
|
||||||
>>>>>>> 269e0de (Initial source loading)
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue