diff --git a/.github/workflows/admin.yml b/.github/workflows/admin.yml index c9c182d74d..8dc42da5a3 100644 --- a/.github/workflows/admin.yml +++ b/.github/workflows/admin.yml @@ -18,6 +18,7 @@ on: - "qan-api2/**" - "update/**" - "vmproxy/**" + - "ui/**" jobs: test: diff --git a/.github/workflows/agent.yml b/.github/workflows/agent.yml index 05f8471442..64be1af477 100644 --- a/.github/workflows/agent.yml +++ b/.github/workflows/agent.yml @@ -19,6 +19,7 @@ on: - "qan-api2/**" - "update/**" - "vmproxy/**" + - "ui/**" jobs: test: diff --git a/.github/workflows/managed.yml b/.github/workflows/managed.yml index eeb545c10d..5376c024a2 100644 --- a/.github/workflows/managed.yml +++ b/.github/workflows/managed.yml @@ -18,6 +18,7 @@ on: - 'qan-api2/**' - 'update/**' - 'vmproxy/**' + - "ui/**" jobs: test: diff --git a/.github/workflows/qan-api2.yml b/.github/workflows/qan-api2.yml index 9bd7d491be..1c08f3db07 100644 --- a/.github/workflows/qan-api2.yml +++ b/.github/workflows/qan-api2.yml @@ -19,6 +19,7 @@ on: - "managed/**" - "update/**" - "vmproxy/**" + - "ui/**" jobs: test: diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml new file mode 100644 index 0000000000..433e824613 --- /dev/null +++ b/.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 diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml index 3e1798e250..8a2b604985 100644 --- a/.github/workflows/update.yml +++ b/.github/workflows/update.yml @@ -18,6 +18,7 @@ on: - "managed/**" - "qan-api2/**" - "vmproxy/**" + - "ui/**" jobs: build: diff --git a/.github/workflows/vmproxy.yml b/.github/workflows/vmproxy.yml index 125ea0dd8e..8416f9bdeb 100644 --- a/.github/workflows/vmproxy.yml +++ b/.github/workflows/vmproxy.yml @@ -19,6 +19,7 @@ on: - "managed/**" - "qan-api2/**" - "update/**" + - "ui/**" jobs: test: diff --git a/build/ansible/roles/nginx/files/conf.d/pmm.conf b/build/ansible/roles/nginx/files/conf.d/pmm.conf index fca411bbe4..cd922120de 100644 --- a/build/ansible/roles/nginx/files/conf.d/pmm.conf +++ b/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/; diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs new file mode 100644 index 0000000000..3ede1f7695 --- /dev/null +++ b/ui/.eslintrc.cjs @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ['@percona/eslint-config-react'], +}; diff --git a/ui/.gitignore b/ui/.gitignore new file mode 100644 index 0000000000..2af71fd455 --- /dev/null +++ b/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/* \ No newline at end of file diff --git a/ui/.nvmrc b/ui/.nvmrc new file mode 100644 index 0000000000..e048c8ca19 --- /dev/null +++ b/ui/.nvmrc @@ -0,0 +1 @@ +v18.15.0 diff --git a/ui/Makefile b/ui/Makefile new file mode 100644 index 0000000000..e361594a5a --- /dev/null +++ b/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 diff --git a/ui/README.md b/ui/README.md new file mode 100644 index 0000000000..8c2222b13c --- /dev/null +++ b/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 +``` diff --git a/ui/docker-compose.yml b/ui/docker-compose.yml new file mode 100644 index 0000000000..40df72b949 --- /dev/null +++ b/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 diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000000..3c289879ac --- /dev/null +++ b/ui/index.html @@ -0,0 +1,14 @@ + + +
+ + + +