Skip to content

Commit

Permalink
chore: react-router-dom migration (#980)
Browse files Browse the repository at this point in the history
* chore: migrate to `react-router-dom@v6` (with `react-router-dom-v5-compat`

- update routes
- remove unused code
- add `NotFound` page (wip)

* chore: update summary table links

* chore: create-plugin update

- fix type issues
- remove redundant variable
- fix tests (most of them)

* chore: fix more tests

- fix bug in `useSearchQueryParametersState`

* chore: redirect to `home`

* chore: update to node `v20`
- downgrade packages to match grafana `grafanaDependency` version

* fix: add missing line break

* fix: self-review change requests

- use `generateRoutePath`
- remove done TODOs
- update tests for `ProbeCard`
- update tests for `NewProbe`
- update tests for `EditProbe`
- remove debug content from `TestRouteInfo`

* fix: self-review change requests

- update not found usage for `EditProbe`

* fix: pr change requests

- lock grafana dependencies on 11.3.0
- add 404 page instead of redirect to Home

* chore: update `yarn.lock` after rebase
  • Loading branch information
w1kman authored Nov 19, 2024
1 parent 4286daf commit f11b89a
Show file tree
Hide file tree
Showing 83 changed files with 2,622 additions and 1,648 deletions.
3 changes: 3 additions & 0 deletions .config/.cprc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"version": "5.8.0"
}
24 changes: 21 additions & 3 deletions .config/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,30 @@
* ⚠️⚠️⚠️ 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
* 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"
}
}
]
}
18 changes: 9 additions & 9 deletions .config/.prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
*/

module.exports = {
"endOfLine": "auto",
"printWidth": 120,
"trailingComma": "es5",
"semi": true,
"jsxSingleQuote": false,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2
};
endOfLine: 'auto',
printWidth: 120,
trailingComma: 'es5',
semi: true,
jsxSingleQuote: false,
singleQuote: true,
useTabs: false,
tabWidth: 2,
};
41 changes: 39 additions & 2 deletions .config/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ 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"
Expand All @@ -11,6 +17,37 @@ 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

LABEL maintainer="Grafana Labs <hello@grafana.com>"

ENV GF_PATHS_HOME="/usr/share/grafana"
WORKDIR $GF_PATHS_HOME

USER root
RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html

# 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"]
6 changes: 3 additions & 3 deletions .config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ set up the Jest DOM for the testing library and to apply some polyfills. ([link

#### ESM errors with Jest

A common issue found with the current jest config involves importing an npm package which 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:
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';
Expand Down Expand Up @@ -142,7 +142,7 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac

### 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`.
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:**

Expand All @@ -159,6 +159,6 @@ services:
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.
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.

---
18 changes: 18 additions & 0 deletions .config/entrypoint.sh
Original file line number Diff line number Diff line change
@@ -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

9 changes: 6 additions & 3 deletions .config/jest-setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
* ⚠️⚠️⚠️ 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-jest-config
* 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: jest.fn().mockImplementation((query) => ({
value: (query) => ({
matches: false,
media: query,
onchange: null,
Expand All @@ -19,7 +22,7 @@ Object.defineProperty(global, 'matchMedia', {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
}),
});

HTMLCanvasElement.prototype.getContext = () => {};
2 changes: 1 addition & 1 deletion .config/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* ⚠️⚠️⚠️ 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-jest-config
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
*/

const path = require('path');
Expand Down
4 changes: 3 additions & 1 deletion .config/jest/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,20 @@
* 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('|')})\/)`;
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',
];

Expand Down
15 changes: 15 additions & 0 deletions .config/supervisord/supervisord.conf
Original file line number Diff line number Diff line change
@@ -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

4 changes: 2 additions & 2 deletions .config/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
* ⚠️⚠️⚠️ 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
* https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-typescript-config
*/
{
{
"compilerOptions": {
"alwaysStrict": true,
"declaration": false,
Expand Down
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));
}
}
}
);
});
}
}
27 changes: 25 additions & 2 deletions .config/webpack/utils.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
import fs from 'fs';
import process from 'process';
import os from 'os';
import path from 'path';
import util from 'util';
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'));
}
Expand All @@ -12,6 +29,11 @@ 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'));
}
Expand All @@ -21,7 +43,8 @@ export function hasReadme() {
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 plugins = await Promise.all(
pluginsJson.map((pluginJson) => {
const folder = path.dirname(pluginJson);
return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
})
Expand Down
Loading

0 comments on commit f11b89a

Please sign in to comment.