PMM-11231 Setup PMM UI

.github/workflows/admin.yml

@@ -18,6 +18,7 @@ on:
       - "qan-api2/**"
       - "update/**"
       - "vmproxy/**"
+      - "ui/**"
 
 jobs:
   test:

.github/workflows/agent.yml

@@ -19,6 +19,7 @@ on:
       - "qan-api2/**"
       - "update/**"
       - "vmproxy/**"
+      - "ui/**"
 
 jobs:
   test:

.github/workflows/managed.yml

@@ -18,6 +18,7 @@ on:
       - 'qan-api2/**'
       - 'update/**'
       - 'vmproxy/**'
+      - "ui/**"
 
 jobs:
   test:

.github/workflows/qan-api2.yml

@@ -19,6 +19,7 @@ on:
       - "managed/**"
       - "update/**"
       - "vmproxy/**"
+      - "ui/**"
 
 jobs:
   test:

.github/workflows/ui.yml

@@ -0,0 +1,53 @@
+name: UI
+
+on:
+  push:
+    branches:
+      - main
+      - v3
+      - pmm-*
+    tags:
+      - v[0-9]+.[0-9]+.[0-9]+*
+  pull_request:
+    paths-ignore:
+      - "admin/**"
+      - "agent/**"
+      - "api-tests/**"
+      - "cli-tests/**"
+      - "docs/**"
+      - "managed/**"
+      - "managed-dev/**"
+      - "qan-api2/**"
+      - "vmproxy/**"
+      - "update/**"
+
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-22.04
+
+    defaults:
+      run:
+        working-directory: ${{ github.workspace }}/ui
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup nodejs
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: Run lint
+        run: |
+          make lint
+
+      - name: Run unit tests
+        run: |
+          make test
+
+      - name: Build application
+        run: |
+          make build

.github/workflows/update.yml

@@ -18,6 +18,7 @@ on:
       - "managed/**"
       - "qan-api2/**"
       - "vmproxy/**"
+      - "ui/**"
 
 jobs:
   build:

.github/workflows/vmproxy.yml

@@ -19,6 +19,7 @@ on:
       - "managed/**"
       - "qan-api2/**"
       - "update/**"
+      - "ui/**"
 
 jobs:
   test:

build/ansible/roles/nginx/files/conf.d/pmm.conf

@@ -126,6 +126,12 @@
       try_files $uri /index.html break;
     }
 
+    # PMM UI
+    location /pmm {
+      alias /usr/share/pmm-ui;
+      try_files $uri /index.html break;
+    }
+
     # Grafana
     rewrite ^/$ $scheme://$http_host/graph/;
     rewrite ^/graph$ /graph/;

ui/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@percona/eslint-config-react'],
+};

ui/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+testdata/*

ui/.nvmrc

@@ -0,0 +1 @@
+v18.15.0

ui/Makefile

@@ -0,0 +1,29 @@
+.PHONY: dev
+dev:
+	yarn dev
+
+.PHONY: ci
+ci: setup lint test build
+
+.PHONY: format
+format: setup
+	yarn format
+
+.PHONY: lints
+lint: setup
+	yarn lint
+
+.PHONY: test
+test: setup
+	yarn test
+
+.PHONY: setup
+setup:
+	yarn install --frozen-lockfile
+
+.PHONY: build
+build: setup
+	yarn build
+
+.PHONY: release
+release: build

ui/README.md

@@ -0,0 +1,44 @@
+# Percona Monitoring and Management UI
+
+[Percona Monitoring and Management (PMM)](https://www.percona.com/software/database-tools/percona-monitoring-and-management) is a best-of-breed open source database monitoring solution. It helps you reduce complexity, optimize performance, and improve the security of your business-critical database environments, no matter where they are located or deployed.
+PMM helps users to:
+* Reduce Complexity
+* Optimize Database Performance
+* Improve Data Security
+
+See the [PMM Documentation](https://www.percona.com/doc/percona-monitoring-and-management/2.x/index.html) for more information.
+
+## Pre-Requisites
+
+Make sure you have the following installed:
+- [node 18](https://nodejs.org/en) (you can also use [nvm](https://github.com/nvm-sh/nvm) to manage node versions)
+- [yarn](https://yarnpkg.com/)
+
+## Stack
+
+This repo uses the following stack across its packages:
+
+- Yarn to manage packages (https://yarnpkg.com/)
+- Typescript (https://www.typescriptlang.org/);
+- React (https://react.dev/);
+- Rollup to bundle the different common packages (https://rollupjs.org/);
+- Vite for development (https://vitejs.dev/);
+- Vitest for unit tests (https://vitest.dev/);
+
+## Install dependencies
+
+```bash
+make setup
+```
+
+## Run in development mode
+
+```bash
+make dev
+```
+
+## Build application for production
+
+```bash
+make build
+```

ui/docker-compose.yml

@@ -0,0 +1,39 @@
+---
+services:
+  pmm-server:
+    container_name: pmm-server
+    # Temporary till we have arm builds
+    platform: linux/amd64
+    image: perconalab/pmm-server:3-dev-container
+    ports:
+      - 80:9080
+      - 443:8443
+    volumes:
+      - ./pmm-dev.conf:/etc/nginx/conf.d/pmm-dev.conf:ro
+
+      # Uncomment to use custom (FE) grafana code
+      #- '../../grafana/public:/usr/share/grafana/public'
+      #- '../../grafana/conf/grafana.local-dev.ini:/usr/share/grafana/conf/defaults.ini'
+    environment:
+      - PMM_DEBUG=1
+      - PERCONA_PORTAL_URL=https://portal-dev.percona.com
+      - PERCONA_TEST_PLATFORM_ADDRESS=https://check-dev.percona.com:443
+      - PERCONA_TEST_PLATFORM_PUBLIC_KEY=RWTkF7Snv08FCboTne4djQfN5qbrLfAjb8SY3/wwEP+X5nUrkxCEvUDJ
+
+  mysql:
+    image: percona:5.7.30
+    platform: linux/amd64
+    container_name: pmm-agent_mysql
+    command: >
+      --sql-mode="ANSI_QUOTES"
+      --performance-schema --innodb_monitor_enable=all
+      --slow_query_log --log_slow_rate_limit=1 --log_slow_admin_statements --log_slow_slave_statements --slow_query_log_file=/mysql/slowlogs/slow.log --long_query_time=0
+    ports:
+      - '3306:3306'
+    environment:
+      - MYSQL_ROOT_PASSWORD=ps
+      - MYSQL_USER=pmm-agent
+      - MYSQL_PASSWORD=pmm%*&agent-password
+      - UMASK=0777 # for slowlog file
+    volumes:
+      - ./testdata/mysql:/mysql

ui/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PMM</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ui/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier .  --write",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/material": "^5.15.12",
+    "@mui/x-date-pickers": "^6.19.6",
+    "@percona/design": "^1.0.0",
+    "@percona/ui-lib": "^1.0.0",
+    "axios": "^1.6.7",
+    "axios-case-converter": "^1.1.1",
+    "date-fns": "^2.30.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.22.0"
+  },
+  "devDependencies": {
+    "@percona/eslint-config-react": "^1.0.0",
+    "@percona/prettier-config": "^1.0.0",
+    "@percona/tsconfig": "^1.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.8",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^1.3.1"
+  },
+  "prettier": "@percona/prettier-config"
+}

ui/pmm-dev.conf

@@ -0,0 +1,20 @@
+# PMM UI
+server {
+  listen 9080;
+  server_name _;
+
+  # proxy requests during development to vite dev server
+  location /pmm {
+    proxy_pass http://host.docker.internal:5173/pmm;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    proxy_pass http://localhost:8080;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+}