ydb-embedded-ui 6.2.2 → 6.4.0

package/README.md

@@ -27,8 +27,9 @@ Open http://localhost:8765 to view it in the browser.
       -e MON_PORT=8765 \
       cr.yandex/yc/yandex-docker-local-ydb:latest
    ```
-2. Run the frontend app in the development mode, via invoking `npm run dev`
-3. Open [localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
+2. Install dependencies with `npm ci`
+3. Run the frontend app in the development mode, via invoking `npm run dev`
+4. Open [localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
 For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
@@ -43,26 +44,45 @@ To test new features, you can use ydb version that is currently in testing mode
 or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:trunk` image.
 Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
 
-### Custom backend in dev mode
+### Custom configuration in dev mode with .env file
 
-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:
+You can run the app with your own params by adding `.env` file to project root. There is an example in `.env.example`.
+
+1. Add `.env` file to project root by copying example
+
+```shell script
+cp .env.example .env
+```
+
+2. Set your own set of params in `.env`
+3. Run `npm run start`. Your custom params from `.env` file will be applied
+
+#### 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, alter `REACT_APP_BACKEND` param in your `.env` file:
 
 ```
-"dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://your-cluster-host:8765 npm start"
+REACT_APP_BACKEND=http://your-cluster-host:8765
+REACT_APP_META_BACKEND=undefined
+META_YDB_BACKEND=undefined
 ```
 
-### Meta backend in dev mode (multi cluster)
+#### 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:
+If you have meta backend for multi cluster version, you can run the app in dev mode with this backend by setting `REACT_APP_META_BACKEND` param in `.env`:
 
 ```
-DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND= REACT_APP_META_BACKEND=http://your-meta-host:8765 npm start
+REACT_APP_BACKEND=undefined
+REACT_APP_META_BACKEND=http://your-meta-host:8765
+META_YDB_BACKEND=undefined
 ```
 
-if you need to connect to the meta backend from a server then run the app like this:
+If you need to connect to the meta backend from a server, you need to set `META_YDB_BACKEND` param in `.env`:
 
 ```
-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
+REACT_APP_BACKEND=undefined
+REACT_APP_META_BACKEND=undefined
+META_YDB_BACKEND=http://your-meta-host:8765
 ```
 
 ## E2E Tests
@@ -96,9 +116,10 @@ The build is minified and the filenames include the hashes.
 
 To test production bundle with latest YDB backend release, do the following:
 
-1. Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
-2. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/contentmonitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
-3. Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.
+1. Install dependencies with `npm ci`
+2. Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
+3. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/content/monitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
+4. Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.
 
 ### Testing production bundle with specific cluster host
 
@@ -106,8 +127,9 @@ If you want to test embedded version in production mode, but YDB docker is not e
 
 It also could be usefull for development purposes, because some operations, that are not 'read-only', like some update queries or tablets restart could be allowed by CORS only for the same origin and so could not be executed in dev mode.
 
-1. Create production bundle with `npm run build:embedded`
-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
+1. Install dependencies with `npm ci`
+2. Create production bundle with `npm run build:embedded`
+3. Copy your build files from `build` folder to `/content/monitoring` folder on desired cluster host
+4. 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.

package/dist/assets/icons/disableFullscreen.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M13.3828 6.5C13.5352 6.5 13.6875 6.37305 13.6875 6.19531V5.17969C13.6875 5.02734 13.5352 4.875 13.3828 4.875H11.25V2.74219C11.25 2.58984 11.0977 2.4375 10.9453 2.4375H9.92969C9.75195 2.4375 9.625 2.58984 9.625 2.74219V5.89062C9.625 6.24609 9.87891 6.5 10.2344 6.5H13.3828ZM6.375 5.89062V2.74219C6.375 2.58984 6.22266 2.4375 6.07031 2.4375H5.05469C4.87695 2.4375 4.75 2.58984 4.75 2.74219V4.875H2.61719C2.43945 4.875 2.3125 5.02734 2.3125 5.17969V6.19531C2.3125 6.37305 2.43945 6.5 2.61719 6.5H5.76562C6.0957 6.5 6.375 6.24609 6.375 5.89062ZM6.375 13.5078V10.3594C6.375 10.0293 6.0957 9.75 5.76562 9.75H2.61719C2.43945 9.75 2.3125 9.90234 2.3125 10.0547V11.0703C2.3125 11.248 2.43945 11.375 2.61719 11.375H4.75V13.5078C4.75 13.6855 4.87695 13.8125 5.05469 13.8125H6.07031C6.22266 13.8125 6.375 13.6855 6.375 13.5078ZM11.25 13.5078V11.375H13.3828C13.5352 11.375 13.6875 11.248 13.6875 11.0703V10.0547C13.6875 9.90234 13.5352 9.75 13.3828 9.75H10.2344C9.87891 9.75 9.625 10.0293 9.625 10.3594V13.5078C9.625 13.6855 9.75195 13.8125 9.92969 13.8125H10.9453C11.0977 13.8125 11.25 13.6855 11.25 13.5078Z" />
+</svg>
+

package/dist/assets/icons/emptyState.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383 396" width="383" height="396" fill="none">
+    <path fillRule="evenodd" clipRule="evenodd" d="M307.333 168.43c9.4-14.2 14.1-32.6 14.1-55.3 0-34.4-11.7-61.9-35.3-82.2-23.4-20.5-63-30.7-106.7-30.7-13.1 0-24.1.9-34.8 2.7-10.7 1.8-20.1 3.9-28.2 6.3-5.4 1.6-16.1 5.7-23.3 8.6-4.1 1.7-6.9 6-6.9 10.8v39.5c0 8.2 7.8 13.8 14.9 10.5a458.74 458.74 0 0 0 1.806-.818c2.367-1.074 4.452-2.02 5.894-2.581 5.7-2.3 12.4-4.2 20.1-5.8 7.7-1.6 16.3-2.4 25.7-2.4 22.2 0 43.1 5 52.3 14.9 9.2 10 13.8 22.499 13.8 37.499 0 13-2.7 24.1-8.2 33.2-5.5 9.1-13.1 18-22.9 26.5-7.9 6.9-15.2 13.5-22 19.8-6.8 6.3-12.6 13.2-17.5 20.7s-8.7 16-11.3 25.3c-1.6 5.6-2.7 20.3-3.3 31-.3 6.6 4.5 12.2 10.7 12.2h51.2c5.4 0 10-4.4 10.6-10.2.6-5.7 2-12.5 5.5-17.8 4-5.9 8.7-11.8 14.7-17.3s13-11 20.9-16.7c8-5.6 16.2-12.1 24.9-19.4 12.8-11.4 23.9-24.1 33.3-38.3zm-167.6 212.7c9 9.5 20.1 14.2 33.4 14.2 6.3 0 12.4-1.3 18.2-4 5.8-2.6 10.9-6 15.2-10.3 4.3-4.3 7.7-9.4 10.2-15.2 2.5-5.8 3.7-12.1 3.7-19 0-6.8-1.2-13.2-3.7-19-2.5-5.8-5.9-10.9-10.2-15.4-4.3-4.5-9.4-7.9-15.2-10.3-5.8-2.4-11.9-3.6-18.2-3.6-13.3 0-24.4 4.6-33.4 13.9s-13.5 20.8-13.5 34.5c0 13.4 4.5 24.8 13.5 34.2z" fill="#ECF2F9" />
+    <path clipRule="evenodd" d="M213.933 353.03h-193.5c-10 0-18.2-8.2-18.2-18.2v-125.4c0-10 8.2-18.2 18.2-18.2h193.5c10 0 18.2 8.2 18.2 18.2v125.4c0 10.1-8.2 18.2-18.2 18.2z" stroke="#00E6C5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 10" />
+    <path d="M21.034 214.732a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4zm16.899 0a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4zm16.9 0a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4z" fill="#2EE5C0" />
+    <path d="M2.533 228.129h228.9" stroke="#00E6C5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 10" />
+    <path d="M301.033 264.83l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5V96.93c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#027BF3" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M90.433 107.93c3.4.2 6.1-2.4 6.1-5.8s-2.7-6.3-6.1-6.4c-3.3-.2-6.1 2.4-6.1 5.8s2.7 6.3 6.1 6.4zm19.8.798c3.3.1 6-2.5 6-5.8s-2.7-6.1-6-6.3c-3.3-.1-6 2.5-6 5.8s2.7 6.2 6 6.3zm25.2-4.9c0 3.3-2.6 5.9-5.8 5.7-3.2-.1-5.9-2.9-5.9-6.2 0-3.3 2.6-5.9 5.9-5.7 3.2.1 5.8 2.9 5.8 6.2zm66.001 61.703l19.1-20.9 17.4 19.1-18.9 20.9 18.9 20.5-17.4 19.5-19.1-20.5-19.4 21.5-18.1-19.1 19.6-21.5-19.6-21 18.1-19.5 19.4 21z" fill="#fff" />
+    <path d="M327.433 112.83c0-28.4-21.7-37.1-33.5-37.9-.1 0-33.5 2.3-33.5 45.3 0 25.5 21.2 45.5 46 44.6 7.8-.3 14.9-2.6 21-6.4v-45.6z" fill="#67B0F8" />
+    <path d="M380.534 195.931c-2.9 3.4-7.6 3.7-10.5.8l-38.6-39 11.3-12.2 37.8 39c2.9 3 2.9 8 0 11.4z" fill="#FF4645" />
+    <path d="M342.833 145.629l-11.3 12.2 3.7 3.7c1.9 1.9 4.9 2 6.8.2 1.1-1 2.2-2.1 3.2-3.2.6-.7 1.3-1.4 1.9-2.1 1.6-1.9 1.5-4.8-.3-6.6l-4-4.2z" fill="#D93654" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M267.633 154.13c-23-21.401-23-57.3 0-78.1 21.9-19.8 55.1-17 74.4 4.3 18.4 20.399 18.4 51.7 0 71.6-19.3 20.8-52.5 22.6-74.4 2.2zm9.4-10.802c15.6 15 39.8 14.2 54.1-.9 13.8-14.6 13.8-37.8 0-52.8-14.3-15.5-38.5-17-54.1-2.5-16.2 15.1-16.2 40.7 0 56.2z" fill="#00236B" />
+    <path d="M41.034 42.73a2 2 0 1 0-4 0h4zm-4 8.3a2 2 0 0 0 4 0h-4zm4 17.2a2 2 0 1 0-4 0h4zm-4 8.9a2 2 0 0 0 4 0h-4zm19.2-15.2a2 2 0 0 0 0-4v4zm-8.2-4a2 2 0 1 0 0 4v-4zm-17.9 4a2 2 0 0 0 0-4v4zm-8.2-4a2 2 0 1 0 0 4v-4zm15.1-15.2v8.3h4v-8.3h-4zm0 25.5v8.9h4v-8.9h-4zm19.2-10.3h-8.2v4h8.2v-4zm-26.1 0h-8.2v4h8.2v-4z" fill="#2EE5C0" />
+</svg>

package/dist/assets/icons/key.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 12 7"  fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 7H11V5H12V2H6.66C6.085 0.79 4.86 0 3.5 0C1.57 0 0 1.57 0 3.5C0 5.43 1.57 7 3.5 7C4.86 7 6.09 6.21 6.66 5H8V7ZM10 6H9V4H5.97L5.855 4.335C5.5 5.33 4.555 6 3.5 6C2.11929 6 1 4.88071 1 3.5C1 2.11929 2.11929 1 3.5 1C4.555 1 5.5 1.67 5.855 2.665L5.97 3H11V4H10V6ZM3.5 5C2.67157 5 2 4.32843 2 3.5C2 2.67157 2.67157 2 3.5 2C4.32843 2 5 2.67157 5 3.5C5 4.32843 4.32843 5 3.5 5ZM3 3.5C3 3.22386 3.22386 3 3.5 3C3.77614 3 4 3.22386 4 3.5C4 3.77614 3.77614 4 3.5 4C3.22386 4 3 3.77614 3 3.5Z" />
+</svg>
+
+

package/dist/assets/icons/monitoring.svg

@@ -0,0 +1,9 @@
+<svg fill="currentColor"  viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.1953 11.375H3.125V3.55469C3.125 3.40234 2.97266 3.25 2.82031 3.25H1.80469C1.62695 3.25 1.5 3.40234 1.5 3.55469V12.6953C1.5 12.873 1.62695 13 1.80469 13H14.1953C14.3477 13 14.5 12.873 14.5 12.6953V11.6797C14.5 11.5273 14.3477 11.375 14.1953 11.375ZM10.9453 5.6875L8.8125 7.10938L6.62891 4.24023C6.50195 4.0625 6.24805 4.0625 6.12109 4.26562L3.9375 7.92188V10.5625H13.6875L11.4023 5.81445C11.3008 5.63672 11.0977 5.58594 10.9453 5.6875Z" />
+</svg>
+
+
+
+  
+  

package/dist/assets/icons/network.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 204">
+    <path d="M68.4597 2.52853V27.7564C68.4597 28.9827 69.3356 30.0339 70.562 30.2675C87.2054 33.2458 99.7025 48.0788 99.0601 65.715C98.4177 83.7599 83.7015 98.4177 65.715 99.1185C48.0788 99.7609 33.3042 87.2638 30.2675 70.6788C30.0339 69.4524 28.9827 68.5765 27.7564 68.5765H2.52853C1.01019 68.5765 -0.157769 69.8612 0.0174243 71.3212C3.4629 104.024 31.2603 129.427 64.9558 129.135C100.111 128.843 128.785 100.111 129.077 64.9558C129.369 31.2603 103.907 3.4629 71.2044 0.0174243C69.7444 -0.157769 68.4597 1.01019 68.4597 2.52853Z" fill="#EBF2FA" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M22.7358 18.3543L40.5472 36.1657C41.4231 37.0416 42.8247 37.1584 43.8758 36.3993C48.0221 33.3042 52.9275 31.2019 58.2417 30.2091C59.4681 29.9755 60.344 28.9827 60.344 27.698V2.52853C60.344 1.01019 59.0593 -0.157769 57.5409 0.0174243C44.4598 1.41897 32.4883 6.67478 22.911 14.6753C21.7431 15.6096 21.6847 17.3032 22.7358 18.3543ZM13.3334 24.4868C6.09205 33.8304 1.30343 45.1596 0.0186744 57.54C-0.156519 58.9999 1.06984 60.2846 2.52978 60.2846H27.6992C28.9256 60.2846 29.9768 59.4087 30.2103 58.1823C31.0279 53.5105 32.8382 49.1307 35.3494 45.3348C35.9917 44.342 35.8749 42.9989 35.0574 42.1229L17.1292 24.3116C16.0781 23.202 14.2677 23.3188 13.3334 24.4868ZM80.6078 131.879H113.603C115.471 131.879 116.99 133.397 117.048 135.324V200.555C117.048 202.482 115.471 204 113.603 204H80.6078C78.6807 204 77.1624 202.423 77.1624 200.555V135.324C77.1624 133.397 78.7391 131.879 80.6078 131.879ZM158.452 158.976H125.574C123.647 158.976 122.071 160.553 122.071 162.48V200.439C122.071 202.366 123.647 203.943 125.574 203.943H158.452C160.379 203.943 161.956 202.366 161.956 200.439V162.48C161.956 160.553 160.379 158.976 158.452 158.976ZM170.657 177.256H203.243C205.229 177.256 206.864 178.891 206.864 180.876V200.264C206.864 202.25 205.229 203.885 203.243 203.885H170.657C168.672 203.885 167.037 202.25 167.037 200.264V180.876C167.037 178.891 168.672 177.256 170.657 177.256Z" fill="#EBF2FA" />
+    <path d="M134.275 171.532H21.2749C15.4351 171.532 10.6465 166.743 10.6465 160.903V87.6726C10.6465 81.8328 15.4351 77.0442 21.2749 77.0442H134.216C140.056 77.0442 144.845 81.8328 144.845 87.6726V160.903C144.903 166.802 140.114 171.532 134.275 171.532V171.532Z" fillRule="evenodd" clipRule="evenodd" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M21.6246 90.7687C23.3017 90.7687 24.6613 89.4091 24.6613 87.732C24.6613 86.0549 23.3017 84.6953 21.6246 84.6953C19.9475 84.6953 18.5879 86.0549 18.5879 87.732C18.5879 89.4091 19.9475 90.7687 21.6246 90.7687Z" fill="#2EE5C0" />
+    <path d="M31.4937 90.7687C33.1708 90.7687 34.5304 89.4091 34.5304 87.732C34.5304 86.0549 33.1708 84.6953 31.4937 84.6953C29.8166 84.6953 28.457 86.0549 28.457 87.732C28.457 89.4091 29.8166 90.7687 31.4937 90.7687Z" fill="#2EE5C0" />
+    <path d="M41.3629 90.7687C43.04 90.7687 44.3995 89.4091 44.3995 87.732C44.3995 86.0549 43.04 84.6953 41.3629 84.6953C39.6857 84.6953 38.3262 86.0549 38.3262 87.732C38.3262 89.4091 39.6857 90.7687 41.3629 90.7687Z" fill="#2EE5C0" />
+    <path d="M10.8223 98.592H144.495" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M184.555 149.164L57.89 156.172C53.6269 156.406 50.123 153.135 50.123 148.872V51.1145C50.123 46.8514 53.6269 43.5812 57.89 43.8148L184.555 50.8225C187.825 50.9977 190.453 54.1512 190.453 57.8302V142.157C190.453 145.836 187.825 148.989 184.555 149.164Z" fill="#027BF3" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M65.1304 54.1512C65.1304 56.1368 63.5537 57.6551 61.5681 57.5383C59.5826 57.4799 58.0059 55.7864 58.0059 53.8009C58.0059 51.8153 59.641 50.297 61.5681 50.4138C63.4953 50.4722 65.1304 52.1657 65.1304 54.1512ZM76.6357 54.6174C76.6357 56.5445 75.059 58.0629 73.1319 58.0045C71.2047 57.9461 69.628 56.2525 69.628 54.3254C69.628 52.3983 71.2047 50.8799 73.1319 50.9383C75.059 51.0551 76.6357 52.6903 76.6357 54.6174ZM84.461 58.4718C86.3298 58.5886 87.8481 57.0702 87.8481 55.1431C87.8481 53.216 86.3298 51.5808 84.461 51.5224C82.5339 51.4056 81.0156 52.924 81.0156 54.8511C81.0156 56.7782 82.5923 58.4134 84.461 58.4718Z" fill="white" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M75.467 142.974V85.2772C71.496 84.7516 66.8826 84.8684 61.5684 85.9779V143.617L75.467 142.974ZM88.84 90.6509V142.45L77.7444 142.917V85.6871C82.0658 86.6214 85.6865 88.4318 88.84 90.6509ZM102.271 104.55C102.213 104.491 102.169 104.433 102.125 104.374C102.082 104.316 102.038 104.258 101.979 104.199C101.559 103.689 101.138 103.173 100.714 102.653L100.714 102.653C97.8391 99.1308 94.8401 95.4564 91.1759 92.4028V142.333L102.271 141.866V104.55ZM115.703 110.272C111.79 110.214 107.994 109.571 104.607 106.827V141.749L115.703 141.281V110.272ZM129.134 109.863C126.37 109.69 123.605 109.869 120.888 110.044L120.888 110.044L120.888 110.044C119.931 110.106 118.981 110.167 118.039 110.213V141.164L129.134 140.697V109.863ZM153.136 139.704L144.902 140.054V117.863C153.078 127.148 153.136 139.704 153.136 139.704ZM140.113 113.6C140.989 114.184 141.807 114.826 142.566 115.527V140.171L131.47 140.638V110.155C134.39 110.622 137.252 111.615 140.113 113.6Z" fill="#00236B" />
+    <path d="M55.7449 76.4361C55.0549 77.2986 55.1947 78.5572 56.0573 79.2472C56.9198 79.9372 58.1784 79.7974 58.8684 78.9349L55.7449 76.4361ZM61.5113 72.4297L63.0863 71.1971C62.7095 70.7157 62.1333 70.433 61.522 70.4297C60.9107 70.4264 60.3314 70.7029 59.9495 71.1803L61.5113 72.4297ZM64.1409 79.0349C64.8217 79.9048 66.0787 80.0581 66.9485 79.3773C67.8184 78.6965 67.9717 77.4395 67.2909 76.5697L64.1409 79.0349ZM172.081 132.537C171.218 131.847 169.96 131.987 169.27 132.849C168.58 133.712 168.719 134.97 169.582 135.66L172.081 132.537ZM176.087 138.303L177.301 139.893C177.79 139.52 178.08 138.942 178.087 138.326C178.094 137.711 177.817 137.126 177.337 136.742L176.087 138.303ZM169.443 140.86C168.565 141.53 168.396 142.785 169.067 143.663C169.737 144.541 170.992 144.71 171.87 144.039L169.443 140.86ZM58.8684 78.9349L63.073 73.6791L59.9495 71.1803L55.7449 76.4361L58.8684 78.9349ZM59.9363 73.6623L64.1409 79.0349L67.2909 76.5697L63.0863 71.1971L59.9363 73.6623ZM169.582 135.66L174.838 139.865L177.337 136.742L172.081 132.537L169.582 135.66ZM174.874 136.714L169.443 140.86L171.87 144.039L177.301 139.893L174.874 136.714Z" fill="white" />
+    <path d="M147.137 69.1464C146.033 69.1053 145.105 69.9668 145.064 71.0706C145.023 72.1744 145.884 73.1025 146.988 73.1436L147.137 69.1464ZM176.771 74.2532C177.875 74.2943 178.803 73.4328 178.844 72.329C178.885 71.2252 178.024 70.2971 176.92 70.256L176.771 74.2532ZM147.114 79.6573C146.01 79.6291 145.092 80.5015 145.064 81.6057C145.036 82.7099 145.908 83.6278 147.012 83.656L147.114 79.6573ZM176.795 84.4152C177.899 84.4433 178.817 83.571 178.846 82.4668C178.874 81.3626 178.001 80.4446 176.897 80.4165L176.795 84.4152ZM147.075 90.3435C145.97 90.337 145.07 91.2271 145.063 92.3317C145.057 93.4362 145.947 94.3369 147.052 94.3434L147.075 90.3435ZM176.834 94.5186C177.939 94.5251 178.84 93.635 178.846 92.5304C178.853 91.4258 177.962 90.5252 176.858 90.5187L176.834 94.5186ZM146.988 73.1436L176.771 74.2532L176.92 70.256L147.137 69.1464L146.988 73.1436ZM147.012 83.656L176.795 84.4152L176.897 80.4165L147.114 79.6573L147.012 83.656ZM147.052 94.3434L176.834 94.5186L176.858 90.5187L147.075 90.3435L147.052 94.3434Z" fill="white" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M143.442 71.2024C143.442 72.604 142.274 73.7135 140.872 73.6551C139.471 73.5967 138.303 72.3704 138.303 70.9688C138.303 69.5673 139.471 68.3993 140.872 68.5161C142.332 68.5745 143.442 69.8009 143.442 71.2024ZM143.443 81.5981C143.443 82.9996 142.275 84.1092 140.873 84.0508C139.472 83.9924 138.304 82.766 138.304 81.3645C138.304 79.9045 139.472 78.795 140.873 78.9118C142.333 78.9702 143.443 80.1965 143.443 81.5981ZM140.873 94.4457C142.275 94.5041 143.443 93.3945 143.443 91.993C143.443 90.5914 142.333 89.3651 140.873 89.3067C139.472 89.1899 138.304 90.3578 138.304 91.7594C138.304 93.1609 139.472 94.3873 140.873 94.4457Z" fill="white" />
+    <path opacity="0.2" d="M190.452 91.8753V57.771C190.452 54.0919 187.824 50.9385 184.553 50.7633L160.902 49.4785C159.793 52.8656 159.15 56.5447 159.15 60.4573C159.15 78.0934 171.94 92.2841 187.24 92.1089C188.291 92.1673 189.4 92.0505 190.452 91.8753Z" fill="#00236B" />
+    <path d="M220.645 58.8832C220.645 42.2982 209.024 28.1076 194.191 27.2316C178.891 26.3556 166.102 39.9039 166.102 57.5401C166.102 75.1762 178.891 89.3669 194.191 89.1917C209.024 89.0749 220.645 75.4682 220.645 58.8832Z" fill="#FF4645" />
+    <path d="M215.329 40.3719C210.541 32.897 202.949 27.758 194.189 27.2324V58.2417L215.329 40.3719Z" fill="#FFCC00" />
+    <path d="M215.329 40.3721L194.189 58.2418L220.644 58.8842C220.644 51.9932 218.658 45.5695 215.329 40.3721V40.3721Z" fill="#00236B" />
+    <path d="M194.248 58.2408V27.2316C178.947 26.3556 166.158 39.9039 166.158 57.5401L194.248 58.2408Z" fill="#FF4645" />
+    <path d="M161.151 14.7336C161.151 13.6291 160.256 12.7336 159.151 12.7336C158.047 12.7336 157.151 13.6291 157.151 14.7336H161.151ZM157.151 18.9383C157.151 20.0429 158.047 20.9383 159.151 20.9383C160.256 20.9383 161.151 20.0429 161.151 18.9383H157.151ZM161.151 27.8138C161.151 26.7093 160.256 25.8138 159.151 25.8138C158.047 25.8138 157.151 26.7093 157.151 27.8138H161.151ZM157.151 32.3689C157.151 33.4734 158.047 34.3689 159.151 34.3689C160.256 34.3689 161.151 33.4734 161.151 32.3689H157.151ZM167.97 25.5526C169.074 25.5526 169.97 24.6572 169.97 23.5526C169.97 22.4481 169.074 21.5526 167.97 21.5526V25.5526ZM163.707 21.5526C162.602 21.5526 161.707 22.4481 161.707 23.5526C161.707 24.6572 162.602 25.5526 163.707 25.5526V21.5526ZM154.538 25.5526C155.643 25.5526 156.538 24.6572 156.538 23.5526C156.538 22.4481 155.643 21.5526 154.538 21.5526V25.5526ZM150.275 21.5526C149.171 21.5526 148.275 22.4481 148.275 23.5526C148.275 24.6572 149.171 25.5526 150.275 25.5526V21.5526ZM157.151 14.7336V18.9383H161.151V14.7336H157.151ZM157.151 27.8138V32.3689H161.151V27.8138H157.151ZM167.97 21.5526H163.707V25.5526H167.97V21.5526ZM154.538 21.5526H150.275V25.5526H154.538V21.5526Z" fill="#2EE5C0" />
+</svg>

package/dist/components/BasicNodeViewer/BasicNodeViewer.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
+import { createDeveloperUILinkWithNodeId } from '../../utils/developerUI/developerUI';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
-import { Icon } from '../Icon';
 import { Tags } from '../Tags';
 import './BasicNodeViewer.scss';
 const b = cn('basic-node-viewer');
 export const BasicNodeViewer = ({ node, additionalNodesProps, className }) => {
-    const nodeHref = (additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef)
-        ? additionalNodesProps.getNodeRef(node) + 'internal'
-        : undefined;
-    return (_jsx("div", { className: b(null, className), children: node ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: "Node" }), _jsx(EntityStatus, { status: node.SystemState, name: node.Host }), nodeHref && (_jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: nodeHref, target: "_blank", children: _jsx(Icon, { name: "external" }) })), _jsxs("div", { className: b('id'), children: [_jsx("label", { className: b('label'), children: "NodeID" }), _jsx("label", { children: node.NodeId })] }), node.DC && _jsx(Tags, { tags: [node.DC] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", { className: "error", children: "no data" })) }));
+    let nodeHref;
+    if (additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef) {
+        nodeHref = additionalNodesProps.getNodeRef(node) + 'internal';
+    }
+    else if (node.NodeId) {
+        nodeHref = createDeveloperUILinkWithNodeId(node.NodeId) + 'internal';
+    }
+    return (_jsx("div", { className: b(null, className), children: node ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: "Node" }), _jsx(EntityStatus, { status: node.SystemState, name: node.Host }), nodeHref && (_jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: nodeHref, target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) })), _jsxs("div", { className: b('id'), children: [_jsx("label", { className: b('label'), children: "NodeID" }), _jsx("label", { children: node.NodeId })] }), node.DC && _jsx(Tags, { tags: [node.DC] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", { className: "error", children: "no data" })) }));
 };

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { CircleXmarkFill } from '@gravity-ui/icons';
-import { Dialog } from '@gravity-ui/uikit';
+import { CircleXmarkFill, TriangleExclamationFill } from '@gravity-ui/icons';
+import { Dialog, Icon } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
-import { Icon } from '../Icon';
 import { criticalActionDialogKeyset } from './i18n';
 import './CriticalActionDialog.scss';
 const b = cn('ydb-critical-dialog');
@@ -39,7 +38,7 @@ export function CriticalActionDialog({ visible, text, onClose, onConfirm, onConf
         if (error) {
             return (_jsxs(React.Fragment, { children: [_jsxs(Dialog.Body, { className: b('body'), children: [_jsx("span", { className: b('error-icon'), children: _jsx(CircleXmarkFill, { width: "24", height: "22" }) }), parseError(error)] }), _jsx(Dialog.Footer, { loading: false, preset: "default", textButtonCancel: criticalActionDialogKeyset('button-close'), onClickButtonCancel: onClose })] }));
         }
-        return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs(Dialog.Body, { className: b('body'), children: [_jsx("span", { className: b('warning-icon'), children: _jsx(Icon, { name: "dialog-warning", width: "24", height: "22", viewBox: "0 0 24 22" }) }), text] }), _jsx(Dialog.Footer, { loading: isLoading, preset: "default", textButtonApply: criticalActionDialogKeyset('button-confirm'), textButtonCancel: criticalActionDialogKeyset('button-cancel'), propsButtonApply: { type: 'submit' }, onClickButtonCancel: onClose, onClickButtonApply: () => { } })] }));
+        return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs(Dialog.Body, { className: b('body'), children: [_jsx("span", { className: b('warning-icon'), children: _jsx(Icon, { data: TriangleExclamationFill, size: 24 }) }), text] }), _jsx(Dialog.Footer, { loading: isLoading, preset: "default", textButtonApply: criticalActionDialogKeyset('button-confirm'), textButtonCancel: criticalActionDialogKeyset('button-cancel'), propsButtonApply: { type: 'submit' }, onClickButtonCancel: onClose, onClickButtonApply: () => { } })] }));
     };
     return (_jsx(Dialog, { open: visible, hasCloseButton: false, className: b(), size: "s", onClose: onClose, onTransitionExited: () => setError(undefined), children: renderDialogContent() }));
 }

package/dist/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -3,6 +3,8 @@
 
     &__warning-icon {
         margin-right: 16px;
+
+        color: var(--ydb-color-status-yellow);
     }
 
     &__error-icon {

package/dist/components/EmptyState/EmptyState.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
-import { Icon } from '../Icon';
+import emptyStateIcon from '../../assets/icons/emptyState.svg';
 import './EmptyState.scss';
 const block = cn('empty-state');
 const sizes = {
@@ -9,5 +10,5 @@ const sizes = {
     l: 350,
 };
 export const EmptyState = ({ image, title, description, actions, size = 'm', position = 'center', }) => {
-    return (_jsx("div", { className: block({ size }), children: _jsxs("div", { className: block('wrapper', { size, position }), children: [_jsx("div", { className: block('image'), children: image ? (image) : (_jsx(Icon, { viewBox: "0 0 383 396", name: "emptyState", width: sizes[size], height: sizes[size] })) }), _jsx("div", { className: block('title', { size }), children: title }), _jsx("div", { className: block('description'), children: description }), _jsx("div", { className: block('actions'), children: actions })] }) }));
+    return (_jsx("div", { className: block({ size }), children: _jsxs("div", { className: block('wrapper', { size, position }), children: [_jsx("div", { className: block('image'), children: image ? (image) : (_jsx(Icon, { data: emptyStateIcon, width: sizes[size], height: sizes[size] })) }), _jsx("div", { className: block('title', { size }), children: title }), _jsx("div", { className: block('description'), children: description }), _jsx("div", { className: block('actions'), children: actions })] }) }));
 };

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '@gravity-ui/uikit';
+import { SquareDashed } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
 import { enableFullscreen } from '../../store/reducers/fullscreen';
 import { useTypedDispatch } from '../../utils/hooks';
-import { Icon } from '../Icon';
 function EnableFullscreenButton({ disabled }) {
     const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
     };
-    return (_jsx(Button, { onClick: onEnableFullscreen, view: "flat-secondary", disabled: disabled, title: "Fullscreen", children: _jsx(Icon, { name: "enableFullscreen", viewBox: '0 0 16 16', height: 16, width: 16 }) }));
+    return (_jsx(Button, { onClick: onEnableFullscreen, view: "flat-secondary", disabled: disabled, title: "Fullscreen", children: _jsx(Icon, { data: SquareDashed }) }));
 }
 export default EnableFullscreenButton;

package/dist/components/Fullscreen/Fullscreen.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Button } from '@gravity-ui/uikit';
+import { Button, Icon } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
 import { disableFullscreen } from '../../store/reducers/fullscreen';
 import { cn } from '../../utils/cn';
 import { useTypedDispatch } from '../../utils/hooks';
-import { Icon } from '../Icon';
+import disableFullscreenIcon from '../../assets/icons/disableFullscreen.svg';
 import './Fullscreen.scss';
 const b = cn('kv-fullscreen');
 class FullscreenWrapper extends React.Component {
@@ -45,6 +45,6 @@ function Fullscreen(props) {
             document.removeEventListener('keydown', escFunction, false);
         };
     }, [onDisableFullScreen]);
-    return (_jsx(FullscreenWrapper, { children: _jsxs("div", { className: b(null, props.className), children: [_jsx(Button, { onClick: onDisableFullScreen, view: "raised", className: b('close-button'), children: _jsx(Icon, { name: "disableFullscreen", viewBox: '0 0 16 16 ', width: 16, height: 16 }) }), props.children] }) }));
+    return (_jsx(FullscreenWrapper, { children: _jsxs("div", { className: b(null, props.className), children: [_jsx(Button, { onClick: onDisableFullScreen, view: "raised", className: b('close-button'), children: _jsx(Icon, { data: disableFullscreenIcon }) }), props.children] }) }));
 }
 export default Fullscreen;

package/dist/components/MonitoringButton/MonitoringButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '@gravity-ui/uikit';
+import { Button, Icon } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
-import { Icon } from '../Icon';
+import monitoringIcon from '../../assets/icons/monitoring.svg';
 import './MonitoringButton.scss';
 const b = cn('kv-monitoring-button');
 export function MonitoringButton({ href, visible = false, className }) {
-    return (_jsx(Button, { href: href, target: "_blank", className: b({ visible }, className), size: "s", title: "Monitoring dashboard", children: _jsx(Icon, { name: "monitoring", viewBox: "0 0 16 16", width: 16, height: 16 }) }));
+    return (_jsx(Button, { href: href, target: "_blank", className: b({ visible }, className), size: "s", title: "Monitoring dashboard", children: _jsx(Icon, { data: monitoringIcon }) }));
 }

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, PopoverBehavior } from '@gravity-ui/uikit';
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Button, Icon, PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
 import { cn } from '../../utils/cn';
 import { isUnavailableNode } from '../../utils/nodes';
 import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
-import { Icon } from '../Icon';
 import { NodeEndpointsTooltipContent } from '../TooltipsContent';
 import './NodeHostWrapper.scss';
 const b = cn('ydb-node-host-wrapper');
@@ -20,6 +20,6 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
             tenantName: node.TenantName,
         })
         : undefined;
-    const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) })) : null;
+    const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) })) : null;
     return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
 };

package/dist/components/PDiskInfo/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskInfoKeyset: (key: "type" | "path" | "size" | "links" | "state" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const pDiskInfoKeyset: (key: "path" | "type" | "size" | "links" | "state" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon as UiKitIcon } from '@gravity-ui/uikit';
+import { CircleCheck, CircleQuestionFill, CircleXmark } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
-import { Icon } from '../Icon';
-import questionIcon from '../../assets/icons/question.svg';
 import './QueryExecutionStatus.scss';
 const b = cn('kv-query-execution-status');
 export const QueryExecutionStatus = ({ className, error }) => {
     let icon;
     let label;
     if (typeof error === 'object' && (error === null || error === void 0 ? void 0 : error.code) === 'ECONNABORTED') {
-        icon = _jsx(UiKitIcon, { data: questionIcon, size: 16 });
+        icon = _jsx(Icon, { data: CircleQuestionFill });
         label = 'Connection aborted';
     }
     else {
         const hasError = Boolean(error);
-        icon = (_jsx(Icon, { name: hasError ? 'failure' : 'success', viewBox: hasError ? '0 0 512 512' : '0 0 16 16', width: 16, height: 16, className: b('result-status-icon', { error: hasError }) }));
+        icon = (_jsx(Icon, { data: hasError ? CircleXmark : CircleCheck, className: b('result-status-icon', { error: hasError }) }));
         label = hasError ? 'Failed' : 'Completed';
     }
     return (_jsxs("div", { className: b(null, className), children: [icon, label] }));

package/dist/components/StatusIcon/StatusIcon.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleExclamationFill, CircleInfoFill, TriangleExclamationFill } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
 import { cn } from '../../utils/cn';
-import CircleExclamationFillIcon from '@gravity-ui/icons/svgs/circle-exclamation-fill.svg';
-import CircleInfoFillIcon from '@gravity-ui/icons/svgs/circle-info-fill.svg';
-import TriangleExclamationFillIcon from '@gravity-ui/icons/svgs/triangle-exclamation-fill.svg';
 import './StatusIcon.scss';
 const b = cn('ydb-status-icon');
 const icons = {
-    [EFlag.Blue]: CircleInfoFillIcon,
-    [EFlag.Yellow]: CircleExclamationFillIcon,
-    [EFlag.Orange]: TriangleExclamationFillIcon,
-    [EFlag.Red]: CircleExclamationFillIcon,
+    [EFlag.Blue]: CircleInfoFill,
+    [EFlag.Yellow]: CircleExclamationFill,
+    [EFlag.Orange]: TriangleExclamationFill,
+    [EFlag.Red]: CircleExclamationFill,
 };
 export function StatusIcon({ status = EFlag.Grey, size = 's', mode = 'color', className, }) {
     const modifiers = { state: status.toLowerCase(), size };

package/dist/containers/App/App.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Helmet } from 'react-helmet-async';
 import { connect } from 'react-redux';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
-import AppIcons from '../AppIcons/AppIcons';
 import { Navigation } from '../AsideNavigation/Navigation';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import { settings } from '../UserSettings/settings';
@@ -10,7 +9,7 @@ import ContentWrapper, { Content } from './Content';
 import { Providers } from './Providers';
 import './App.scss';
 function App({ store, history, singleClusterMode, children, userSettings = settings }) {
-    return (_jsxs(Providers, { store: store, history: history, children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, { userSettings: userSettings, children: _jsxs(ErrorBoundary, { children: [_jsx(Content, { singleClusterMode: singleClusterMode, children: children }), _jsx("div", { id: "fullscreen-root" })] }) }) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] }));
+    return (_jsxs(Providers, { store: store, history: history, children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, { userSettings: userSettings, children: _jsxs(ErrorBoundary, { children: [_jsx(Content, { singleClusterMode: singleClusterMode, children: children }), _jsx("div", { id: "fullscreen-root" })] }) }) }), _jsx(ReduxTooltip, {})] }));
 }
 function mapStateToProps(state) {
     return {

package/dist/containers/AsideNavigation/AsideNavigation.js

@@ -1,27 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { CircleQuestion, Gear, Person } from '@gravity-ui/icons';
 import { AsideHeader, FooterItem } from '@gravity-ui/navigation';
 import { useHistory } from 'react-router-dom';
 import { cn } from '../../utils/cn';
 import { ASIDE_HEADER_COMPACT_KEY } from '../../utils/constants';
 import { useSetting, useTypedSelector } from '../../utils/hooks';
 import i18n from './i18n';
-import settingsIcon from '../../assets/icons/settings.svg';
-import supportIcon from '../../assets/icons/support.svg';
-import userChecked from '../../assets/icons/user-check.svg';
 import userSecret from '../../assets/icons/user-secret.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import './AsideNavigation.scss';
 const b = cn('kv-navigation');
 function YdbUserDropdown({ isCompact, popupAnchor, ydbUser, children }) {
     const [isUserDropdownVisible, setIsUserDropdownVisible] = React.useState(false);
-    const iconData = ydbUser.login ? userChecked : userSecret;
+    const iconData = ydbUser.login ? Person : userSecret;
     return (_jsx(FooterItem, { compact: isCompact, item: {
             id: 'user-popup',
             title: ydbUser.login ? ydbUser.login : i18n('navigation-item.account'),
             current: isUserDropdownVisible,
             icon: iconData,
-            iconSize: 22,
             onItemClick: () => setIsUserDropdownVisible(true),
         }, enableTooltip: !isUserDropdownVisible, popupAnchor: popupAnchor, popupVisible: isUserDropdownVisible, onClosePopup: () => setIsUserDropdownVisible(false), renderPopupContent: () => _jsx("div", { className: b('ydb-user-wrapper'), children: children }) }));
 }
@@ -41,16 +38,14 @@ export function AsideNavigation(props) {
             }, menuItems: props.menuItems, compact: compact, onChangeCompact: setIsCompact, className: b(), renderContent: () => props.content, renderFooter: ({ compact, asideRef }) => (_jsxs(React.Fragment, { children: [_jsx(FooterItem, { compact: compact, item: {
                             id: 'documentation',
                             title: i18n('navigation-item.documentation'),
-                            icon: supportIcon,
-                            iconSize: 24,
+                            icon: CircleQuestion,
                             onItemClick: () => {
                                 window.open('https://ydb.tech/docs', '_blank', 'noreferrer');
                             },
                         } }), _jsx(FooterItem, { item: {
                             id: 'user-settings',
                             title: i18n('navigation-item.settings'),
-                            icon: settingsIcon,
-                            iconSize: 24,
+                            icon: Gear,
                             current: visiblePanel === Panel.UserSettings,
                             onItemClick: () => {
                                 setVisiblePanel(visiblePanel === Panel.UserSettings

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightFromSquare, ArrowRightToSquare } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { useHistory } from 'react-router';
 import routes, { createHref } from '../../../routes';
@@ -6,8 +7,6 @@ import { logout } from '../../../store/reducers/authentication/authentication';
 import { cn } from '../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
-import signOutIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
-import signInIcon from '@gravity-ui/icons/svgs/arrow-right-to-square.svg';
 import './YdbInternalUser.scss';
 const b = cn('kv-ydb-internal-user');
 export function YdbInternalUser() {
@@ -20,5 +19,5 @@ export function YdbInternalUser() {
     const handleLogout = () => {
         dispatch(logout);
     };
-    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('user-info-wrapper'), children: [_jsx("div", { className: b('ydb-internal-user-title'), children: i18n('account.user') }), ydbUser && _jsx("div", { className: b('username'), children: ydbUser })] }), ydbUser ? (_jsx(Button, { view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout, children: _jsx(Icon, { data: signOutIcon, size: 16 }) })) : (_jsx(Button, { view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick, children: _jsx(Icon, { data: signInIcon, size: 16 }) }))] }));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('user-info-wrapper'), children: [_jsx("div", { className: b('ydb-internal-user-title'), children: i18n('account.user') }), ydbUser && _jsx("div", { className: b('username'), children: ydbUser })] }), ydbUser ? (_jsx(Button, { view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout, children: _jsx(Icon, { data: ArrowRightFromSquare }) })) : (_jsx(Button, { view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick, children: _jsx(Icon, { data: ArrowRightToSquare }) }))] }));
 }

package/dist/containers/AsideNavigation/useNavigationMenuItems.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Pulse, Terminal } from '@gravity-ui/icons';
 import { useHistory, useLocation } from 'react-router';
 import routes, { parseQuery } from '../../routes';
 import { TENANT_PAGE, TENANT_PAGES_IDS } from '../../store/reducers/tenant/constants';
@@ -6,13 +7,11 @@ import { TENANT_INITIAL_PAGE_KEY } from '../../utils/constants';
 import { useSetting, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import i18n from './i18n';
-import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
-import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
 export function useNavigationMenuItems() {
     const location = useLocation();
     const history = useHistory();
-    const [initialTenantPage, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
-    const { tenantPage = initialTenantPage } = useTypedSelector((state) => state.tenant);
+    const [, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
+    const { tenantPage } = useTypedSelector((state) => state.tenant);
     const { pathname } = location;
     const queryParams = parseQuery(location);
     const isTenantPage = pathname === routes.tenant;
@@ -24,14 +23,14 @@ export function useNavigationMenuItems() {
             {
                 id: TENANT_PAGES_IDS.query,
                 title: i18n('pages.query'),
-                icon: terminalIcon,
+                icon: Terminal,
                 iconSize: 20,
                 location: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query })),
             },
             {
                 id: TENANT_PAGES_IDS.diagnostics,
                 title: i18n('pages.diagnostics'),
-                icon: pulseIcon,
+                icon: Pulse,
                 iconSize: 20,
                 location: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics })),
             },

package/dist/containers/Authentication/Authentication.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { Eye, EyeSlash, Xmark } from '@gravity-ui/icons';
 import { Button, Link as ExternalLink, Icon, TextInput } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router';
 import { parseQuery } from '../../routes';
 import { authenticate } from '../../store/reducers/authentication/authentication';
 import { cn } from '../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import closeIcon from '../../assets/icons/close.svg';
-import hideIcon from '../../assets/icons/hide.svg';
-import showIcon from '../../assets/icons/show.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import './Authentication.scss';
 const b = cn('authentication');
@@ -64,6 +62,6 @@ function Authentication({ closable = false }) {
     const onTogglePasswordVisibility = () => {
         setShowPassword((prev) => !prev);
     };
-    return (_jsxs("section", { className: b(), children: [_jsxs("form", { className: b('form-wrapper'), children: [_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('logo'), children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] }), _jsx(ExternalLink, { href: "http://ydb.tech/docs", target: "_blank", children: "Documentation" })] }), _jsx("h2", { className: b('title'), children: "Sign in" }), _jsx("div", { className: b('field-wrapper'), children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) }), _jsxs("div", { className: b('field-wrapper'), children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, { onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button'), children: _jsx(Icon, { data: showPassword ? hideIcon : showIcon, size: 16 }) })] }), _jsx(Button, { view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in'), children: "Sign in" })] }), closable && history.length > 1 && (_jsx(Button, { onClick: onClose, className: b('close'), children: _jsx(Icon, { data: closeIcon, size: 24 }) }))] }));
+    return (_jsxs("section", { className: b(), children: [_jsxs("form", { className: b('form-wrapper'), children: [_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('logo'), children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] }), _jsx(ExternalLink, { href: "http://ydb.tech/docs", target: "_blank", children: "Documentation" })] }), _jsx("h2", { className: b('title'), children: "Sign in" }), _jsx("div", { className: b('field-wrapper'), children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) }), _jsxs("div", { className: b('field-wrapper'), children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, { onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button'), children: _jsx(Icon, { data: showPassword ? EyeSlash : Eye, size: 16 }) })] }), _jsx(Button, { view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in'), children: "Sign in" })] }), closable && history.length > 1 && (_jsx(Button, { onClick: onClose, className: b('close'), children: _jsx(Icon, { data: Xmark, size: 24 }) }))] }));
 }
 export default Authentication;

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowUpRightFromSquare, CircleInfoFill } from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import { ArrowToggle, Button, Icon, Popover } from '@gravity-ui/uikit';
 import isEmpty from 'lodash/isEmpty';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import { Icon } from '../../../components/Icon';
 import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { EFlag } from '../../../types/api/enums';
@@ -49,7 +49,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
                         vDiskSlotId,
                     });
                 }
-                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { name: "external" }) }))] }));
+                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }))] }));
             },
             align: DataTable.LEFT,
         },
@@ -80,7 +80,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             render: ({ row }) => {
                 return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
-                        }), children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) }) }));
+                        }), children: _jsx(Icon, { data: CircleInfoFill, size: 18 }) }) }));
             },
             sortable: false,
         },