Skip to content

Commit

Permalink
Chore: Update to latest create-plugin (#220)
Browse files Browse the repository at this point in the history
* Update create plugin

* Install react-router-dom

* Add tests

* Fix eslint

* Fix e2e

* Force grafana min version
  • Loading branch information
academo authored Nov 11, 2024
1 parent e79efa8 commit 866f177
Show file tree
Hide file tree
Showing 11 changed files with 932 additions and 817 deletions.
2 changes: 1 addition & 1 deletion .config/.cprc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"version": "5.3.7"
"version": "5.8.2"
}
6 changes: 6 additions & 0 deletions .config/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
"parserOptions": {
"project": "./tsconfig.json"
}
},
{
"files": ["./tests/**/*"],
"rules": {
"react-hooks/rules-of-hooks": "off",
},
}
]
}
4 changes: 2 additions & 2 deletions .config/jest-setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ 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: jest.fn().mockImplementation((query) => ({
value: (query) => ({
matches: false,
media: query,
onchange: null,
Expand All @@ -22,7 +22,7 @@ Object.defineProperty(global, 'matchMedia', {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
}),
});

HTMLCanvasElement.prototype.getContext = () => {};
34 changes: 34 additions & 0 deletions .config/webpack/BuildModeWebpackPlugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as webpack from 'webpack';

const PLUGIN_NAME = 'BuildModeWebpack';

export class BuildModeWebpackPlugin {
apply(compiler: webpack.Compiler) {
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
compilation.hooks.processAssets.tap(
{
name: PLUGIN_NAME,
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
},
async () => {
const assets = compilation.getAssets();
for (const asset of assets) {
if (asset.name.endsWith('plugin.json')) {
console.log(asset.name);
const pluginJsonString = asset.source.source().toString();
const pluginJsonWithBuildMode = JSON.stringify(
{
...JSON.parse(pluginJsonString),
buildMode: compilation.options.mode,
},
null,
4
);
compilation.updateAsset(asset.name, new webpack.sources.RawSource(pluginJsonWithBuildMode));
}
}
}
);
});
}
}
7 changes: 7 additions & 0 deletions .config/webpack/webpack.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ 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 { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin';
import { DIST_DIR, SOURCE_DIR } from './constants';
import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';

Expand Down Expand Up @@ -180,9 +182,11 @@ const config = async (env): Promise<Configuration> => {
path: path.resolve(process.cwd(), DIST_DIR),
publicPath: `public/plugins/${pluginJson.id}/`,
uniqueName: pluginJson.id,
crossOriginLoading: 'anonymous',
},

plugins: [
new BuildModeWebpackPlugin(),
virtualPublicPath,
// Insert create plugin version information into the bundle
new BannerPlugin({
Expand Down Expand Up @@ -229,6 +233,9 @@ const config = async (env): Promise<Configuration> => {
],
},
]),
new SubresourceIntegrityPlugin({
hashFuncNames: ['sha256'],
}),
...(env.development
? [
new LiveReloadPlugin(),
Expand Down
2 changes: 1 addition & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": "./.config/.eslintrc"
}
}
201 changes: 201 additions & 0 deletions .github/workflows/e2e.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
name: CI

on:
push:
branches:
- master
- main
pull_request:
branches:
- master
- main

permissions: read-all

jobs:
build:
name: Build, lint and unit tests
runs-on: ubuntu-latest
outputs:
plugin-id: ${{ steps.metadata.outputs.plugin-id }}
plugin-version: ${{ steps.metadata.outputs.plugin-version }}
has-e2e: ${{ steps.check-for-e2e.outputs.has-e2e }}
has-backend: ${{ steps.check-for-backend.outputs.has-backend }}
env:
GRAFANA_ACCESS_POLICY_TOKEN: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
steps:
- uses: actions/checkout@v4
- name: Setup Node.js environment
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'yarn'

- name: Install dependencies
run: yarn install

- name: Check types
run: yarn run typecheck
- name: Lint
run: yarn run lint
- name: Unit tests
run: yarn run test:ci
- name: Build frontend
run: yarn run build

- name: Check for backend
id: check-for-backend
run: |
if [ -f "Magefile.go" ]
then
echo "has-backend=true" >> $GITHUB_OUTPUT
fi
- name: Setup Go environment
if: steps.check-for-backend.outputs.has-backend == 'true'
uses: actions/setup-go@v5
with:
go-version: '1.22'

- name: Test backend
if: steps.check-for-backend.outputs.has-backend == 'true'
uses: magefile/mage-action@v3
with:
version: latest
args: coverage

- name: Build backend
if: steps.check-for-backend.outputs.has-backend == 'true'
uses: magefile/mage-action@v3
with:
version: latest
args: buildAll

- name: Check for E2E
id: check-for-e2e
run: |
if [ -f "playwright.config.ts" ]
then
echo "has-e2e=true" >> $GITHUB_OUTPUT
fi
- name: Sign plugin
run: run run sign
if: ${{ env.GRAFANA_ACCESS_POLICY_TOKEN != '' }}

- 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_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip
echo "plugin-id=${GRAFANA_PLUGIN_ID}" >> $GITHUB_OUTPUT
echo "plugin-version=${GRAFANA_PLUGIN_VERSION}" >> $GITHUB_OUTPUT
echo "archive=${GRAFANA_PLUGIN_ARTIFACT}" >> $GITHUB_OUTPUT
- 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
- name: Archive Build
uses: actions/upload-artifact@v4
with:
name: ${{ steps.metadata.outputs.plugin-id }}-${{ steps.metadata.outputs.plugin-version }}
path: ${{ steps.metadata.outputs.plugin-id }}
retention-days: 5

resolve-versions:
name: Resolve e2e images
runs-on: ubuntu-latest
timeout-minutes: 3
needs: build
if: ${{ needs.build.outputs.has-e2e == 'true' }}
outputs:
matrix: ${{ steps.resolve-versions.outputs.matrix }}
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Resolve Grafana E2E versions
id: resolve-versions
uses: grafana/plugin-actions/e2e-version@main
with:
version-resolver-type: plugin-grafana-dependency
grafana-dependency: '>=8.5.0'

playwright-tests:
needs: [resolve-versions, build]
timeout-minutes: 15
strategy:
fail-fast: false
matrix:
GRAFANA_IMAGE: ${{fromJson(needs.resolve-versions.outputs.matrix)}}
name: e2e test ${{ matrix.GRAFANA_IMAGE.name }}@${{ matrix.GRAFANA_IMAGE.VERSION }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Download plugin
uses: actions/download-artifact@v4
with:
path: dist
name: ${{ needs.build.outputs.plugin-id }}-${{ needs.build.outputs.plugin-version }}

- name: Execute permissions on binary
if: needs.build.outputs.has-backend == 'true'
run: |
chmod +x ./dist/gpx_*
- name: Setup Node.js environment
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'yarn'

- name: Install dev dependencies
run: yarn install

- name: Start Grafana
run: |
docker compose pull
DEVELOPMENT=false GRAFANA_VERSION=${{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=${{ matrix.GRAFANA_IMAGE.NAME }} docker compose up -d
- name: Wait for grafana server
uses: grafana/plugin-actions/wait-for-grafana@main

- name: Install Playwright Browsers
run: yarn exec playwright install chromium --with-deps

- name: Run Playwright tests
id: run-tests
run: yarn run e2e

- name: Docker logs
if: ${{ always() && steps.run-tests.outcome == 'failure' }}
run: |
docker logs academo-test-panel >& grafana-server.log
- name: Stop grafana docker
run: docker compose down

- name: Upload server log
uses: actions/upload-artifact@v4
if: ${{ always() && steps.run-tests.outcome == 'failure' }}
with:
name: ${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}-server-log
path: grafana-server.log
retention-days: 5

# Uncomment this step to upload the Playwright report to Github artifacts.
# If your repository is public, the report will be public on the Internet so beware not to expose sensitive information.
# - name: Upload artifacts
# uses: actions/upload-artifact@v4
# if: ${{ always() && steps.run-tests.outcome == 'failure' }}
# with:
# name: playwright-report-${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}
# path: playwright-report/
# retention-days: 5
3 changes: 0 additions & 3 deletions jest-setup.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
// Jest setup provided by Grafana scaffolding
import { TextEncoder, TextDecoder } from 'util';

Object.assign(global, { TextDecoder, TextEncoder });
import './.config/jest-setup';
29 changes: 12 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"e2e": "playwright test",
"e2e:update": "yarn exec cypress install && yarn exec grafana-e2e run --update-screenshots",
"lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "yarn run lint --fix",
"lint:fix": "yarn lint --fix",
"playwright:test": "npx playwright test",
"playwright:test:ui": "npx playwright test --ui",
"playwright:showreport": "npx playwright show-report",
Expand All @@ -30,14 +30,14 @@
"devDependencies": {
"@babel/core": "^7.25.2",
"@grafana/eslint-config": "^7.0.0",
"@grafana/plugin-e2e": "^1.7.1",
"@grafana/plugin-e2e": "^1.11.2",
"@grafana/tsconfig": "^2.0.0",
"@playwright/test": "^1.42.1",
"@swc/core": "^1.9.0",
"@swc/helpers": "^0.5.0",
"@swc/jest": "^0.2.29",
"@testing-library/jest-dom": "6.4.2",
"@testing-library/react": "12.1.5",
"@testing-library/react": "14.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@types/glob": "^8.1.0",
"@types/jest": "^29.5.0",
Expand All @@ -47,18 +47,10 @@
"@types/react-dom": "17.0.11",
"@types/react-router-dom": "^5.2.0",
"@types/testing-library__jest-dom": "5.14.8",
"@typescript-eslint/eslint-plugin": "^5.42.1",
"@typescript-eslint/parser": "^5.42.1",
"copy-webpack-plugin": "^12.0.2",
"cspell": "8.8.4",
"css-loader": "^6.7.3",
"eslint": "8.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-deprecation": "^2.0.0",
"eslint-plugin-jsdoc": "^48.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-webpack-plugin": "^4.0.1",
"fork-ts-checker-webpack-plugin": "^8.0.0",
"glob": "^10.3.10",
Expand All @@ -72,6 +64,7 @@
"replace-in-file-webpack-plugin": "^1.0.6",
"sass": "1.63.2",
"sass-loader": "13.3.1",
"semver": "^7.6.3",
"style-loader": "3.3.3",
"swc-loader": "^0.2.4",
"terser-webpack-plugin": "^5.3.10",
Expand All @@ -81,17 +74,19 @@
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4",
"webpack-livereload-plugin": "^3.0.2",
"webpack-subresource-integrity": "^5.1.0",
"webpack-virtual-modules": "^0.6.2"
},
"dependencies": {
"@emotion/css": "^11.11.2",
"@grafana/data": "10.4.8",
"@grafana/runtime": "10.4.8",
"@grafana/schema": "11.2.1",
"@grafana/ui": "10.4.8",
"@grafana/data": "^11.3.0",
"@grafana/runtime": "^11.3.0",
"@grafana/schema": "^11.3.0",
"@grafana/ui": "^11.3.0",
"moment-timezone": "0.5.38",
"react": "17.0.2",
"react-dom": "17.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "5.3.3",
"tslib": "2.5.3"
},
"engines": {
Expand Down
Loading

0 comments on commit 866f177

Please sign in to comment.