From 3137076a72fa5cf35e723d6211f7b6cec17bc3f9 Mon Sep 17 00:00:00 2001 From: JoseSantosAMD Date: Mon, 17 Jul 2023 12:46:05 -0500 Subject: [PATCH 1/3] Migrate to @grafana/create-plugin Signed-off-by: JoseSantosAMD --- grafana_plugins/svg_plugin/.prettierrc.js | 5 +- grafana_plugins/svg_plugin/package.json | 65 +++++++++++++++++++---- grafana_plugins/svg_plugin/tsconfig.json | 12 +---- 3 files changed, 59 insertions(+), 23 deletions(-) diff --git a/grafana_plugins/svg_plugin/.prettierrc.js b/grafana_plugins/svg_plugin/.prettierrc.js index f60eb1d252..aaa5045c6e 100644 --- a/grafana_plugins/svg_plugin/.prettierrc.js +++ b/grafana_plugins/svg_plugin/.prettierrc.js @@ -1,3 +1,4 @@ module.exports = { - ...require("./node_modules/@grafana/toolkit/src/config/prettier.plugin.config.json"), - }; \ No newline at end of file + // Prettier configuration provided by Grafana scaffolding + ...require("./.config/.prettierrc.js") +}; \ No newline at end of file diff --git a/grafana_plugins/svg_plugin/package.json b/grafana_plugins/svg_plugin/package.json index fb88025c1d..aa445bd25d 100644 --- a/grafana_plugins/svg_plugin/package.json +++ b/grafana_plugins/svg_plugin/package.json @@ -3,29 +3,72 @@ "version": "1.0.0", "description": "", "scripts": { - "build": "grafana-toolkit plugin:build", - "test": "grafana-toolkit plugin:test", - "dev": "grafana-toolkit plugin:dev", - "watch": "grafana-toolkit plugin:dev --watch", - "sign": "grafana-toolkit plugin:sign", - "start": "yarn watch" + "build": "webpack -c ./.config/webpack/webpack.config.ts --env production", + "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development", + "e2e": "yarn exec cypress install && yarn exec grafana-e2e run", + "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", + "server": "docker-compose up --build", + "sign": "npx --yes @grafana/sign-plugin@latest", + "start": "yarn watch", + "test": "jest --watch --onlyChanged", + "test:ci": "jest --passWithNoTests --maxWorkers 4", + "typecheck": "tsc --noEmit" }, "author": "Audacious Software Group", "license": "MIT", "devDependencies": { - "@grafana/toolkit": "latest", + "@babel/core": "^7.21.4", + "@grafana/e2e": "9.5.3", + "@grafana/e2e-selectors": "9.5.3", + "@grafana/eslint-config": "^6.0.0", + "@grafana/tsconfig": "^1.2.0-rc1", + "@swc/core": "^1.3.62", + "@swc/helpers": "^0.5.0", + "@swc/jest": "^0.2.26", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^12.1.4", + "@types/jest": "^29.5.0", + "@types/lodash": "^4.14.194", + "@types/node": "^18.15.11", + "copy-webpack-plugin": "^11.0.0", + "css-loader": "^6.7.3", "emotion": "10.0.27", + "eslint-webpack-plugin": "^4.0.1", + "fork-ts-checker-webpack-plugin": "^8.0.0", + "glob": "^10.2.7", + "identity-obj-proxy": "3.0.0", + "jest": "^29.5.0", + "jest-environment-jsdom": "^29.5.0", + "prettier": "^2.8.7", "react-monaco-editor": "^0.44.0", - "tslib": "^2.3.1" + "replace-in-file-webpack-plugin": "^1.0.6", + "sass": "1.63.2", + "sass-loader": "13.3.1", + "style-loader": "3.3.3", + "swc-loader": "^0.2.3", + "ts-node": "^10.9.1", + "tsconfig-paths": "^4.2.0", + "tslib": "^2.3.1", + "typescript": "4.8.4", + "webpack": "^5.86.0", + "webpack-cli": "^5.1.4", + "webpack-livereload-plugin": "^3.0.2" }, "engines": { "node": ">=14" }, "dependencies": { - "@grafana/runtime": "9.1.2", + "@emotion/css": "^11.1.3", "@grafana/data": "9.1.2", + "@grafana/runtime": "9.1.2", "@grafana/ui": "9.1.2", - "@svgdotjs/svg.js": "^3.1.1" + "@svgdotjs/svg.js": "^3.1.1", + "react": "17.0.2", + "react-dom": "17.0.2", + "tslib": "2.5.3" }, - "_comments": "Dependencies are not included as part of Omniperf. It's the user's responsibility to accept any licensing implications before building the project." + "_comments": "Dependencies are not included as part of Omniperf. It's the user's responsibility to accept any licensing implications before building the project.", + "packageManager": "yarn@1.22.19" } diff --git a/grafana_plugins/svg_plugin/tsconfig.json b/grafana_plugins/svg_plugin/tsconfig.json index 7e6657d2fe..d294745aa8 100644 --- a/grafana_plugins/svg_plugin/tsconfig.json +++ b/grafana_plugins/svg_plugin/tsconfig.json @@ -1,11 +1,3 @@ { - "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json", - "include": ["src", "types"], - "compilerOptions": { - "types": ["@emotion/core"], - "rootDir": "./src", - "baseUrl": "./src", - "typeRoots": ["./node_modules/@types"], - "jsx": "react" - } -} + "extends": "./.config/tsconfig.json" +} \ No newline at end of file From 43d492dce2bb0bdbc2f26de9b569fa3b4010dbd0 Mon Sep 17 00:00:00 2001 From: JoseSantosAMD Date: Mon, 17 Jul 2023 13:02:00 -0500 Subject: [PATCH 2/3] Adding config files Signed-off-by: JoseSantosAMD --- .../svg_plugin/.config/tsconfig.json | 26 +++ .../.config/webpack/webpack.config.ts | 201 ++++++++++++++++++ 2 files changed, 227 insertions(+) create mode 100644 grafana_plugins/svg_plugin/.config/tsconfig.json create mode 100644 grafana_plugins/svg_plugin/.config/webpack/webpack.config.ts diff --git a/grafana_plugins/svg_plugin/.config/tsconfig.json b/grafana_plugins/svg_plugin/.config/tsconfig.json new file mode 100644 index 0000000000..64b3769074 --- /dev/null +++ b/grafana_plugins/svg_plugin/.config/tsconfig.json @@ -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.github.io/plugin-tools/docs/advanced-configuration#extending-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" +} diff --git a/grafana_plugins/svg_plugin/.config/webpack/webpack.config.ts b/grafana_plugins/svg_plugin/.config/webpack/webpack.config.ts new file mode 100644 index 0000000000..22cb86ca4e --- /dev/null +++ b/grafana_plugins/svg_plugin/.config/webpack/webpack.config.ts @@ -0,0 +1,201 @@ +/* + * ⚠️⚠️⚠️ 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.github.io/plugin-tools/docs/advanced-configuration#extending-the-webpack-config + */ + +import CopyWebpackPlugin from 'copy-webpack-plugin'; +import ESLintPlugin from 'eslint-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import LiveReloadPlugin from 'webpack-livereload-plugin'; +import path from 'path'; +import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin'; +import { Configuration } from 'webpack'; + +import { getPackageJson, getPluginJson, hasReadme, getEntries } from './utils'; +import { SOURCE_DIR, DIST_DIR } from './constants'; + +const pluginJson = getPluginJson(); + +const config = async (env): Promise => ({ + 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: [ + '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(); + }, + ], + + mode: env.production ? 'production' : 'development', + + module: { + rules: [ + { + exclude: /(node_modules)/, + test: /\.[tj]sx?$/, + use: { + loader: 'swc-loader', + options: { + jsc: { + baseUrl: './src', + 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: { + // Keep publicPath relative for host.com/grafana/ deployments + publicPath: `public/plugins/${pluginJson.id}/img/`, + outputPath: 'img/', + filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]', + }, + }, + { + test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/, + type: 'asset/resource', + generator: { + // Keep publicPath relative for host.com/grafana/ deployments + publicPath: `public/plugins/${pluginJson.id}/fonts/`, + outputPath: 'fonts/', + filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]', + }, + }, + ], + }, + + output: { + clean: { + keep: new RegExp(`.*?_(amd64|arm(64)?)(.exe)?`), + }, + filename: '[name].js', + library: { + type: 'amd', + }, + path: path.resolve(process.cwd(), DIST_DIR), + publicPath: '/', + }, + + plugins: [ + 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 + { 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 + ], + }), + // 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 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 + }), + ...(env.development ? [new LiveReloadPlugin()] : []), + ], + + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'], + // handle resolving "rootDir" paths + modules: [path.resolve(process.cwd(), 'src'), 'node_modules'], + unsafeCache: true, + }, +}); + +export default config; From d7ba2acec93a2fec5438593f6fe5c67e462a617f Mon Sep 17 00:00:00 2001 From: JoseSantosAMD Date: Mon, 17 Jul 2023 13:19:03 -0500 Subject: [PATCH 3/3] Adding config files Signed-off-by: JoseSantosAMD --- grafana_plugins/svg_plugin/.config/.eslintrc | 13 ++ .../svg_plugin/.config/.prettierrc.js | 16 ++ grafana_plugins/svg_plugin/.config/Dockerfile | 16 ++ grafana_plugins/svg_plugin/.config/README.md | 164 ++++++++++++++++++ .../svg_plugin/.config/jest-setup.js | 25 +++ .../svg_plugin/.config/jest.config.js | 43 +++++ .../.config/jest/mocks/react-inlinesvg.tsx | 25 +++ .../svg_plugin/.config/jest/utils.js | 31 ++++ .../svg_plugin/.config/types/custom.d.ts | 37 ++++ .../svg_plugin/.config/webpack/constants.ts | 2 + .../svg_plugin/.config/webpack/utils.ts | 40 +++++ grafana_plugins/svg_plugin/.eslintrc | 3 + grafana_plugins/svg_plugin/.nvmrc | 1 + .../svg_plugin/docker-compose.yaml | 15 ++ grafana_plugins/svg_plugin/jest-setup.js | 2 + grafana_plugins/svg_plugin/jest.config.js | 8 + 16 files changed, 441 insertions(+) create mode 100644 grafana_plugins/svg_plugin/.config/.eslintrc create mode 100644 grafana_plugins/svg_plugin/.config/.prettierrc.js create mode 100644 grafana_plugins/svg_plugin/.config/Dockerfile create mode 100644 grafana_plugins/svg_plugin/.config/README.md create mode 100644 grafana_plugins/svg_plugin/.config/jest-setup.js create mode 100644 grafana_plugins/svg_plugin/.config/jest.config.js create mode 100644 grafana_plugins/svg_plugin/.config/jest/mocks/react-inlinesvg.tsx create mode 100644 grafana_plugins/svg_plugin/.config/jest/utils.js create mode 100644 grafana_plugins/svg_plugin/.config/types/custom.d.ts create mode 100644 grafana_plugins/svg_plugin/.config/webpack/constants.ts create mode 100644 grafana_plugins/svg_plugin/.config/webpack/utils.ts create mode 100644 grafana_plugins/svg_plugin/.eslintrc create mode 100644 grafana_plugins/svg_plugin/.nvmrc create mode 100644 grafana_plugins/svg_plugin/docker-compose.yaml create mode 100644 grafana_plugins/svg_plugin/jest-setup.js create mode 100644 grafana_plugins/svg_plugin/jest.config.js diff --git a/grafana_plugins/svg_plugin/.config/.eslintrc b/grafana_plugins/svg_plugin/.config/.eslintrc new file mode 100644 index 0000000000..3f8c381a4b --- /dev/null +++ b/grafana_plugins/svg_plugin/.config/.eslintrc @@ -0,0 +1,13 @@ +/* + * ⚠️⚠️⚠️ 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.github.io/plugin-tools/docs/advanced-configuration#extending-the-eslint-config + */ + { + "extends": ["@grafana/eslint-config"], + "root": true, + "rules": { + "react/prop-types": "off" + } +} diff --git a/grafana_plugins/svg_plugin/.config/.prettierrc.js b/grafana_plugins/svg_plugin/.config/.prettierrc.js new file mode 100644 index 0000000000..66a76ec5bc --- /dev/null +++ b/grafana_plugins/svg_plugin/.config/.prettierrc.js @@ -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 +}; \ No newline at end of file diff --git a/grafana_plugins/svg_plugin/.config/Dockerfile b/grafana_plugins/svg_plugin/.config/Dockerfile new file mode 100644 index 0000000000..35d89bd1c1 --- /dev/null +++ b/grafana_plugins/svg_plugin/.config/Dockerfile @@ -0,0 +1,16 @@ +ARG grafana_version=latest +ARG grafana_image=grafana-enterprise + +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 +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" + +# Inject livereload script into grafana index.html +USER root +RUN sed -i 's/<\/body><\/html>/