feat: add multi clusters support (#701)

Release-as: 5.0.0

Author: ValeraS

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+max_line_length = 100
+trim_trailing_whitespace = true
+
+[{*.json, *.yaml, *.yml}]
+indent_size = 2
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,2 @@
+build
+dist

.github/workflows/ci.yml

@@ -8,30 +8,37 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
       - run: npm ci
       - run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
 
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
       - run: npm ci
       - run: npm run typecheck
+      - run: npm run lint
 
   unit_tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
       - run: npm ci
       - run: npm test
 
@@ -47,10 +54,10 @@ jobs:
         options: --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000"
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/publication.yml

@@ -3,7 +3,7 @@ on:
     types: [released]
 
 name: Publication
-  
+
 jobs:
   publication:
     runs-on: ubuntu-latest
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org
       - run: npm ci
       - run: npm publish

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
       - run: npm ci
       - run: npm test
       - uses: GoogleCloudPlatform/release-please-action@v3

.gitignore

@@ -25,3 +25,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

.nvmrc

@@ -0,0 +1 @@
+18.19.0

.prettierignore

@@ -0,0 +1,6 @@
+packaje-lock.json
+
+build
+dist
+CHANGELOG.md
+CONTRIBUTING.md

README.md

@@ -2,14 +2,15 @@
 
 Local viewer for YDB clusters
 
-* [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
-* [Project Roadmap](ROADMAP.md)
+- [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+- [Project Roadmap](ROADMAP.md)
 
 ## Preview
 
 You can preview working UI using YDB docker image. It will be UI with the latest stable ydb version.
 
 Run on a machine with Docker installed:
+
 ```
 docker pull cr.yandex/yc/yandex-docker-local-ydb
 docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
@@ -40,11 +41,26 @@ To test new features, you can use ydb version that is currently in testing mode
 
 ### Custom backend in dev mode
 
-YDB docker represents a single node cluster with only one version, small amount of storage groups, PDisks and VDisks. It may be not enough for development purposes. If you have your own development cluster with sufficient amount of entities, you can run the app in the dev mode with this cluster as backend. To do it, set you host to `REACT_APP_BACKEND` variable in `dev` script. For example: 
+YDB docker represents a single node cluster with only one version, small amount of storage groups, PDisks and VDisks. It may be not enough for development purposes. If you have your own development cluster with sufficient amount of entities, you can run the app in the dev mode with this cluster as backend. To do it, set you host to `REACT_APP_BACKEND` variable in `dev` script. For example:
+
 ```
 "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://your-cluster-host:8765 npm start"
 ```
 
+### Meta backend in dev mode (multi cluster)
+
+If you have meta backend, you can run the app in dev mode with this backend like this:
+
+```
+DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND= REACT_APP_META_BACKEND=http://your-meta-host:8765 npm start
+```
+
+if you need to connect to the meta backend from a server then run the app like this:
+
+```
+DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND= REACT_APP_META_BACKEND= META_YDB_BACKEND=http://your-meta-host:8765 npm start
+```
+
 ## E2E Tests
 
 For e2e tests we use `@playwright/tests`. Tests configuration is in `playwright.config.ts`. Tests are set up in `tests` dir.
@@ -90,4 +106,4 @@ It also could be usefull for development purposes, because some operations, that
 2. Copy your build files from `build` folder to `/contentmonitoring` folder on desired cluster host
 3. Open `http://your-cluster-host:8765/monitoring` to see updated UI
 
-It's assumed, that you have all the necessary access rights to update files on the host.
+It's assumed, that you have all the necessary access rights to update files on the host.

ROADMAP.md

@@ -1,6 +1,7 @@
 # YDB Embedded UI Roadmap
 
 ## Legend
+
 We use the following symbols as abbreviations:
 
 1. ㉕ - feature appeared in the Roadmap for 2025;
@@ -17,7 +18,6 @@ We use the following symbols as abbreviations:
 1. 🔥 ㉔ **Display Table Hot Keys** – on a tab **Hot Keys** for a [column-oriented](https://ydb.tech/docs/en/concepts/datamodel/table#olap-data-types) and [row-oriented table](https://ydb.tech/docs/en/concepts/datamodel/table#row-orineted_table) display Hot Keys based on query statistics
 1. ㉔ **Network diagnostics** – display signals about cluster network performance and help to discover reasons for potential problems
 
-
 ## Cluster Administration
 
 1. ㉔ **VDisk Eviction** – a special page for [VDisk](https://ydb.tech/docs/en/concepts/cluster/distributed_storage) with infos and support for [VDisk eviction](https://ydb.tech/docs/en/maintenance/manual/moving_vdisks) launch
@@ -29,7 +29,7 @@ We use the following symbols as abbreviations:
 
 1. 🔥 ㉔ **Autocompletion** – autosuggestions to complete sql keywords and schema elements' names
 1. ㉔ **Support VIEWS** – basic support for new schema object type – `VIEW`
-1. ㉔ **Support Asyncronous Replication** – basic support for new feature – cluster-to-cluster asyncrounous replication 
+1. ㉔ **Support Asyncronous Replication** – basic support for new feature – cluster-to-cluster asyncrounous replication
 1. ㉔ **Display Keys and Column Families** – add wider schema tab in Diagnostics mode with information about column families, primary and partitioning keys.
 1. ㉔ **Enhance Column Tables support** – display all parameters from `CREATE TABLE` statement on info Tab, add create/alter queries templates
 1. ✅ ㉓ **Support YDB Topics** (add support for viewing metadata of YDB topics, its data, lag, etc)
@@ -38,6 +38,6 @@ We use the following symbols as abbreviations:
 1. ✅ ㉓ **Support Read Replicas**
 1. ✅ ㉓ **Support Column-oriented Tables**
 
-## Appearence 
+## Appearence
 
 1. ㉕ **Change Table Column Width** – make it possible to alter a column (e.g. on a nodes page) width by dragging

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']};