PMM-14928 Add FE dependencies and dev workflows to devcontainer

.devcontainer/setup.py

@@ -61,6 +61,18 @@ def install_go():
     ])
 
 
+def install_node():
+    """Installs Node.js 22 and Yarn."""
+
+    run_commands([
+        "dnf module enable -y nodejs:22",
+        "dnf install -y nodejs npm",
+        "npm install -g yarn@1.22.22",
+        "node --version",
+        "yarn --version",
+    ])
+
+
 def make_init():
     """Runs make init."""
 
@@ -85,6 +97,7 @@ def setup():
 def main():
     install_packages()
     install_go()
+    install_node()
     make_init()
 
     # do basic setup

Makefile.devcontainer

@@ -61,6 +61,26 @@ run-all: run-agent-ci run-managed-ci run-qan-ci run-vmproxy-ci	## Run all go ser
 run: run-all                         ## Aliased to "run-all"
 	echo "run is aliased to run-all"
 
+ui-setup:                            ## Install UI dependencies
+	cd ui && yarn install
+
+run-ui: ui-setup                     ## Start vite dev server for UI with HMR
+	cp /etc/nginx/conf.d/pmm.conf /etc/nginx/conf.d/pmm.conf.bak
+	sed -i 's|alias /usr/share/pmm-ui;|proxy_pass http://127.0.0.1:5173;|' /etc/nginx/conf.d/pmm.conf
+	sed -i '/try_files .* break;/c\      proxy_http_version 1.1;\n      proxy_set_header Upgrade $$http_upgrade;\n      proxy_set_header Connection "upgrade";\n      proxy_set_header Host $$host;\n      proxy_set_header X-Real-IP $$remote_addr;' /etc/nginx/conf.d/pmm.conf
+	supervisorctl signal HUP nginx
+	trap 'mv /etc/nginx/conf.d/pmm.conf.bak /etc/nginx/conf.d/pmm.conf; supervisorctl signal HUP nginx' EXIT; \
+	cd ui && yarn dev
+
+run-ui-build: ui-setup               ## Build UI and deploy to system dirs
+	cd ui && yarn build
+	rm -rf /usr/share/pmm-ui
+	cp -r ui/apps/pmm/dist /usr/share/pmm-ui
+	rm -rf /usr/share/percona-dashboards/panels/pmm-compat-app /srv/grafana/plugins/pmm-compat-app
+	cp -r ui/apps/pmm-compat/dist /usr/share/percona-dashboards/panels/pmm-compat-app
+	cp -r ui/apps/pmm-compat/dist /srv/grafana/plugins/pmm-compat-app
+	supervisorctl restart grafana
+
 # TODO https://jira.percona.com/browse/PMM-3484, see maincover_test.go
 # run-race-cover: install-race    ## Run pmm-managed with race detector and collect coverage information.
 # 	go test -coverpkg="github.com/percona/pmm/managed/..." \

docker-compose.yml

@@ -68,6 +68,8 @@ services:
       - ${PMM_PORT_HTTPS:-443}:8443
       # For headless delve
       - ${PMM_PORT_DELVE:-2345}:2345
+      # Vite HMR
+      - ${PMM_PORT_VITE:-5173}:5173
       # PG
       - ${PMM_PORT_PG:-5432}:5432
       # VM
@@ -121,6 +123,7 @@ services:
       - WATCHTOWER_HTTP_API_UPDATE=1
       - WATCHTOWER_HTTP_API_TOKEN=${PMM_WATCHTOWER_TOKEN:-INSECURE_TOKEN}
       - WATCHTOWER_NO_RESTART=${WATCHTOWER_NO_RESTART:-0}
+      - DOCKER_API_VERSION=1.52
     hostname: watchtower
     networks:
       - ${NETWORK:-default}

ui/apps/pmm/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
     host: '0.0.0.0',
     strictPort: true,
     hmr: {
+      protocol: 'ws',
       clientPort: 5173,
     },
     allowedHosts: ['host.docker.internal'],