Feat(Dev): Improve Building of Grafana Plugin in Development Env + update node version (#1890)

# What this PR does

- Improvement to the local development environment for the grafana
plugin
- Run initial yarn build inside the docker container with the same
version that is later used for periodic rebuilds
  - Removes the requirement for having yarn/nodejs installed locally
- Using a named volume for storing the node_modules, so they are only
stored once
  - Remove the yarn install step from the Dockerfile
- Ideally we store the node_modules only once inside the named volumes.
Currently they are stored times
- on the host system outside of dockerin grafana-plugins/node_modules
    - inside the docker image
- inside the anonymous docker volume created at the start of a container
- update `node` to 18.16.0 (14.17.0 has reached end-of-life as of 3
weeks ago)

## Which issue(s) this PR fixes

## Checklist

- [X] ~Unit, integration, and e2e (if applicable) tests updated~ N/A
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

---------

Co-authored-by: Joey Orlando <joseph.t.orlando@gmail.com>

.drone.yml

@@ -5,7 +5,7 @@ name: Build and Release
 
 steps:
   - name: Build Plugin
-    image: node:14.17.0-buster
+    image: node:18.16.0-buster
     commands:
       - apt-get update
       - apt-get --assume-yes install jq
@@ -16,7 +16,7 @@ steps:
       - ls ./
 
   - name: Sign and Package Plugin
-    image: node:14.17.0-buster
+    image: node:18.16.0-buster
     environment:
       GRAFANA_API_KEY:
         from_secret: gcom_plugin_publisher_api_key
@@ -174,7 +174,7 @@ name: OSS plugin release
 
 steps:
   - name: build plugin
-    image: node:14.17.0-buster
+    image: node:18.16.0-buster
     commands:
       - apt-get update
       - apt-get --assume-yes install jq
@@ -185,7 +185,7 @@ steps:
       - ls ./
 
   - name: sign and package plugin
-    image: node:14.17.0-buster
+    image: node:18.16.0-buster
     environment:
       GRAFANA_API_KEY:
         from_secret: gcom_plugin_publisher_api_key
@@ -418,4 +418,4 @@ kind: secret
 name: drone_token
 ---
 kind: signature
-hmac: 8f34bbbb5a2efe479b40d616b087a0c380390de2e440857bdffe8fd48d860e55
+hmac: 3ef960dd2f2a121d795f7fe0b5447f7695bf6cd8f6fe552cd4dbab15d0acc9ee

.github/workflows/linting-and-tests.yml

@@ -32,7 +32,7 @@ jobs:
       # following 2 steps - need to install the frontend dependencies for the eslint/prettier/stylelint steps
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 18.16.0
           cache: "yarn"
           cache-dependency-path: grafana-plugin/yarn.lock
       - name: Use cached frontend dependencies
@@ -54,7 +54,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 18.16.0
           cache: "yarn"
           cache-dependency-path: grafana-plugin/yarn.lock
       - name: Use cached frontend dependencies
@@ -285,7 +285,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 18.16.0
           cache: "yarn"
           cache-dependency-path: grafana-plugin/yarn.lock
 

.github/workflows/snyk.yml

@@ -22,7 +22,7 @@ jobs:
           cache-dependency-path: engine/requirements.txt
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 18.16.0
           cache: "yarn"
           cache-dependency-path: grafana-plugin/yarn.lock
       - uses: snyk/actions/setup@master

.nvmrc

@@ -1 +0,0 @@
-14.17.0

Makefile

@@ -68,6 +68,10 @@ define run_engine_docker_command
 	$(call run_docker_compose_command,run --rm oncall_engine_commands $(1))
 endef
 
+define run_ui_docker_command
+	$(call run_docker_compose_command,run --rm oncall_ui sh -c '$(1)')
+endef
+
 # touch SQLITE_DB_FILE if it does not exist and DB is eqaul to SQLITE_PROFILE
 start:  ## start all of the docker containers
 ifeq ($(DB),$(SQLITE_PROFILE))
@@ -83,7 +87,7 @@ init:  ## build the frontend plugin code then run make start
 # this makes sure that it will be available when the grafana container starts up without the need to
 # restart the grafana container initially
 ifeq ($(findstring $(UI_PROFILE),$(COMPOSE_PROFILES)),$(UI_PROFILE))
-	cd grafana-plugin && yarn install && yarn build:dev
+	$(call run_ui_docker_command,yarn install && yarn build:dev)
 endif
 
 stop:  # stop all of the docker containers
@@ -136,6 +140,19 @@ engine-manage:  ## run Django's `manage.py` script, inside of a docker container
                 ## https://docs.djangoproject.com/en/4.1/ref/django-admin/#django-admin-makemigrations
 	$(call run_engine_docker_command,python manage.py $(CMD))
 
+ui-test:  ## run the UI tests
+	$(call run_ui_docker_command,yarn test)
+
+ui-lint:  ## run the UI linter
+	$(call run_ui_docker_command,yarn lint)
+
+ui-build:  ## build the UI
+	$(call run_ui_docker_command,yarn build)
+
+ui-command:  ## run any command, inside of a UI docker container, passing `$CMD` as arguments.
+             ## e.g. `make ui-command CMD="yarn test"`
+	$(call run_ui_docker_command,$(CMD))
+
 exec-engine:  ## exec into engine container's bash
 	docker exec -it oncall_engine bash
 

dev/README.md

@@ -192,8 +192,6 @@ yarn test:integration
 
 ## Useful `make` commands
 
-See [`COMPOSE_PROFILES`](#compose_profiles) for more information on what this option is and how to configure it.
-
 > 🚶‍This part was moved to `make help` command. Run it to see all the available commands and their descriptions
 
 ## Setting environment variables

docker-compose-developer.yml

@@ -52,7 +52,7 @@ services:
       MOBILE_APP_QR_INTERVAL_QUEUE: 290000 # 4 minutes and 50 seconds
     volumes:
       - ./grafana-plugin:/etc/app
-      - /etc/app/node_modules
+      - node_modules_dev:/etc/app/node_modules
       # https://stackoverflow.com/a/60456034
       - ${ENTERPRISE_FRONTEND:-/dev/null}:/etc/app/frontend_enterprise
     profiles:
@@ -313,6 +313,8 @@ volumes:
     labels: *oncall-labels
   mysqldata_dev:
     labels: *oncall-labels
+  node_modules_dev:
+    labels: *oncall-labels
 
 networks:
   default:

grafana-plugin/Dockerfile.dev

@@ -1,14 +1,6 @@
-FROM node:14.17.0-alpine
+FROM node:18.16.0-alpine
 
 WORKDIR /etc/app
 ENV PATH /etc/app/node_modules/.bin:$PATH
 
-# this allows hot reloading of the container
-# https://stackoverflow.com/a/72478714
-ENV WATCHPACK_POLLING true
-
-COPY ./package.json ./
-COPY ./yarn.lock ./
-RUN yarn install
-
 CMD ["yarn", "start"]

grafana-plugin/package.json

@@ -56,8 +56,8 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@grafana/eslint-config": "^5.0.0",
-    "@grafana/toolkit": "^9.2.4",
+    "@grafana/eslint-config": "^5.1.0",
+    "@grafana/toolkit": "^9.5.2",
     "@jest/globals": "^27.5.1",
     "@playwright/test": "^1.32.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -81,7 +81,7 @@
     "dompurify": "^2.3.12",
     "dotenv": "^16.0.3",
     "eslint": "^8.25.0",
-    "eslint-plugin-jsdoc": "^39.3.14",
+    "eslint-plugin-jsdoc": "^44.2.4",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-rulesdir": "^0.2.1",

grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.test.tsx

@@ -45,7 +45,7 @@ const originalError = console.error;
 
 beforeEach(() => {
   delete global.window.location;
-  global.window = Object.create(window);
+  global.window ??= Object.create(window);
   global.window.location = {
     protocol: MOCK_PROTOCOL,
     host: MOCK_HOST,