PMM-11231 PMM Updates UI (#2904)

* PMM-11231 Setup PMM UI

* PMM-11231 Update working directory for node setup

* PMM-11231 Adjust setup node step

* PMM-11231 Add build & cleanup makefile

* PMM-11231 Use correct UI directory

* PMM-11231 Adjust pmm-ui build directory

* PMM-11231 Add install commands

* PMM-11231 Add pmm ui directory to files section

* PMM-11231 Copy correct build files

* PMM-11231 Handle token rotation

* PMM-11231 Simplify spec file

* PMM-11231 Update dependencies

* PMM-11231 Allow use of eslints non flat config

* PMM-11231 Align version fetch logic with previous

* PMM-11231 Refactor fetching icon

* PMM-11231 Update compose file

* PMM-11231 Use /pmm-ui as path

* PMM-11231 Allow specifying pmm server image through env variable

* PMM-11231 Switch to tanstack query

* PMM-11231 Update dev configuration

* PMM-11231 Use correct naming & switch to hooks

* PMM-11231 Use different name for update image

* PMM-11231 Disable auth_request for pmm-ui

* PMM-11231 Rework redirect to login

* PMM-11231 Update api response

* PMM-11231 Add link to support

* PMM-11231 Fix support url redirect

* PMM-11231 Fix lint

* PMM-11231 Fix typings

* PMM-11231 Add admin & auth check

* PMM-12930 Make page component responsive

* PMM-12930 Add Page unit tests

* PMM-11231 Update api endpoints

.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,54 @@
+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: ui/.nvmrc
+          cache: yarn
+          cache-dependency-path: ui
+
+      - 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,15 @@
       try_files $uri /index.html break;
     }
 
+    # PMM UI
+    location /pmm-ui {
+      # Will redirect on FE to login page if user is not authenticated
+      auth_request off;
+
+      alias /usr/share/pmm-ui;
+      try_files $uri /index.html break;
+    }
+
     # Grafana
     rewrite ^/$ $scheme://$http_host/graph/;
     rewrite ^/graph$ /graph/;

build/packages/rpm/server/SPECS/pmm-managed.spec

@@ -42,18 +42,21 @@ export PMM_RELEASE_BRANCH=""
 cd src/github.com/percona/pmm/managed
 make release
 
+cd ../ui
+make release
 
 %install
 install -d -p %{buildroot}%{_bindir}
 install -d -p %{buildroot}%{_sbindir}
 install -d -p %{buildroot}%{_datadir}/%{name}
+install -d -p %{buildroot}%{_datadir}/pmm-ui
 install -p -m 0755 bin/pmm-managed %{buildroot}%{_sbindir}/pmm-managed
 install -p -m 0755 bin/pmm-managed-init %{buildroot}%{_sbindir}/pmm-managed-init
 install -p -m 0755 bin/pmm-managed-starlark %{buildroot}%{_sbindir}/pmm-managed-starlark
 
 cd src/github.com/percona/pmm
 cp -pa ./api/swagger %{buildroot}%{_datadir}/%{name}
-
+cp -pa ./ui/dist/. %{buildroot}%{_datadir}/pmm-ui
 
 %files
 %license src/%{provider}/LICENSE
@@ -62,9 +65,12 @@ cp -pa ./api/swagger %{buildroot}%{_datadir}/%{name}
 %{_sbindir}/pmm-managed-init
 %{_sbindir}/pmm-managed-starlark
 %{_datadir}/%{name}
-
+%{_datadir}/pmm-ui
 
 %changelog
+* Fri Mar 22 2024 Matej Kubinec <matej.kubinec@ext.percona.com> - 3.0.0-1
+- PMM-11231 add pmm ui
+
 * Thu Jul 28 2022 Alex Tymchuk <alexander.tymchuk@percona.com> - 2.30.0-1
 - PMM-10036 migrate to monorepo
 

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.20.2

ui/Makefile

@@ -0,0 +1,24 @@
+dev:
+	yarn dev
+
+ci: setup lint test build
+
+format: setup
+	yarn format
+
+lint: setup
+	yarn lint
+
+test: setup
+	yarn test
+
+setup:
+	yarn install --frozen-lockfile
+
+build: setup
+	yarn build
+
+release: build
+
+clean:
+	rm -r dist

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,59 @@
+---
+services:
+  pmm-server:
+    container_name: pmm-server
+    # Temporary till we have arm builds
+    platform: linux/amd64
+    image: ${PMM_SERVER_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 persist pmm state
+      # - pmm-data:/srv
+
+      # 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
+      - PMM_DEV_PERCONA_PLATFORM_ADDRESS=https://check-dev.percona.com:443
+      - PMM_DEV_PERCONA_PLATFORM_PUBLIC_KEY=RWTkF7Snv08FCboTne4djQfN5qbrLfAjb8SY3/wwEP+X5nUrkxCEvUDJ
+      - PMM_WATCHTOWER_HOST=http://watchtower:8080
+      - PMM_WATCHTOWER_TOKEN=123
+      # Uncomment to specify to which docker image to update
+      # - PMM_DEV_UPDATE_DOCKER_IMAGE=${PMM_UPDATE_IMAGE:-perconalab/pmm-server:3-dev-container}
+
+  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
+
+  watchtower:
+    container_name: watchtower
+    platform: linux/amd64
+    image: perconalab/watchtower
+    hostname: watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - WATCHTOWER_HTTP_API_UPDATE=1
+      - WATCHTOWER_HTTP_API_TOKEN=123
+
+volumes:
+  pmm-data:

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_USE_FLAT_CONFIG=false 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.5",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
+    "@mui/x-date-pickers": "^7.5.0",
+    "@percona/design": "^1.0.0",
+    "@percona/ui-lib": "^1.0.0",
+    "@tanstack/react-query": "^5.45.1",
+    "axios": "^1.7.0",
+    "axios-case-converter": "^1.1.1",
+    "date-fns": "^2.30.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1"
+  },
+  "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.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "eslint": "^9.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
+  },
+  "prettier": "@percona/prettier-config"
+}