ydb-embedded-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 0.1.0 (2022-02-17)
+
+
+### Features
+
+* initial import ([9bf5e83](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/9bf5e833e3d2d10897215f7d439b284a4c3c10df))

package/README.md

@@ -0,0 +1,28 @@
+# ydb-embedded-ui
+
+Local viewer for YDB clusters
+
+## How to work with this repo
+
+### Development
+
+1) Run on a machine with Docker installed:
+   ```
+   docker pull registry.yandex.net/yandex-docker-local-ydb:testing`
+   docker run --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000" -dp 2135:2135 -dp 8765:8765 registry.yandex.net/yandex-docker-local-ydb:testing
+   ```
+2) Run the frontend app in the development mode, via invoking `npm run dev`
+3) Open [http://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.
+
+### Making a production bundle.
+
+Base command `npm run build` builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+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 -e YDB_LOCAL_SURVIVE_RESTART=true -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui-opensource/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.

package/dist/HOCS/WithSearch/WithSearch.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const withSearch = (Component) => {
+    class HOC extends React.Component {
+        state = {
+            searchQuery: '',
+        };
+
+        handleSearchQuery = (searchQuery) => {
+            this.setState({searchQuery});
+        };
+
+        render() {
+            const {searchQuery} = this.state;
+            return (
+                <Component
+                    {...this.props}
+                    searchQuery={searchQuery}
+                    handleSearchQuery={this.handleSearchQuery}
+                />
+            );
+        }
+    }
+
+    return HOC;
+};

package/dist/HOCS/index.js

@@ -0,0 +1 @@
+export * from './WithSearch/WithSearch';

package/dist/assets/icons/bug.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.248 12.66a1.021 1.021 0 00-1-1.065H17.44V9.723l1.485-1.518a.996.996 0 000-1.453.996.996 0 00-1.453 0l-1.776 1.744H8.303L6.528 6.752a.996.996 0 00-1.453 0 .996.996 0 000 1.453l1.517 1.518v1.872H4.784c-.581 0-1.065.484-1.033 1.065 0 .582.484 1.001 1.033 1.001h1.808v.517c0 .71.13 1.388.42 2.002l-1.937 1.936a.996.996 0 000 1.453.996.996 0 001.453 0l1.775-1.775a4.646 4.646 0 002.938 1.033v-7.878c0-.193.162-.387.388-.387h.774c.194 0 .388.194.388.387v7.878a4.624 4.624 0 002.905-1.033l1.776 1.775a.996.996 0 001.453 0 .996.996 0 000-1.453l-1.937-1.936c.29-.614.452-1.292.452-2.002v-.517h1.775c.55 0 1.034-.42 1.034-1zm-8.2-9.33c-2.002 0-3.616 1.647-3.616 3.616h7.232c0-1.97-1.646-3.616-3.616-3.616z" fill="currentColor"/></svg>

package/dist/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path></svg>

package/dist/assets/icons/control-menu-button.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.031 8.531c.281-.281.281-.75 0-1.062l-4.25-4.25c-.312-.281-.781-.281-1.062 0L2 3.938c-.281.312-.281.78 0 1.062l3.031 3.031-3.031 3c-.281.281-.281.75 0 1.063l.719.687c.281.313.75.313 1.062 0l4.25-4.25zm6-1.062-4.25-4.25c-.312-.281-.781-.281-1.062 0L8 3.938A.774.774 0 0 0 8 5l3.031 3L8 11.031c-.281.281-.281.75 0 1.063l.719.687c.281.313.75.313 1.062 0l4.25-4.25c.281-.281.281-.75 0-1.062z" fill="currentColor"/></svg>

package/dist/assets/icons/databases.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currenColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 1.5C16 2.32843 14.6569 3 13 3C11.3431 3 10 2.32843 10 1.5C10 0.671573 11.3431 0 13 0C14.6569 0 16 0.671573 16 1.5ZM5 11.6V14.3C5 15.2 6.3 15.9 8 15.9C9.7 15.9 11 15.2 11 14.3V11.6C10.2 12.3 9.1 12.6 8 12.6C6.9 12.6 5.8 12.3 5 11.6ZM10 3V2.60001C10.8 3.30001 11.9 3.60001 13 3.60001C14.1 3.60001 15.2 3.30001 16 2.60001V5.40001C16 6.20001 14.8 6.90001 13.2 7.00001L10.7247 9.8714C10.9014 10.0626 11 10.2755 11 10.5C11 11.3284 9.65685 12 8 12C6.34315 12 5 11.3284 5 10.5C5 10.2947 5.08248 10.0991 5.23177 9.92086L2.8 7.10001C1.3 7.00001 0 6.30001 0 5.50001V2.60001C0.8 3.30001 1.9 3.60001 3 3.60001C4.1 3.60001 5.2 3.30001 6 2.60001V3.00001L10 3ZM9.72421 9.27234C9.23641 9.10075 8.64174 9 8 9C7.7351 9 7.47822 9.01717 7.23356 9.0494C6.84837 9.09762 6.45653 9.18116 6.1 9.3L4 6.9C5.1 6.7 6 6.1 6 5.4V4H10V5.4C10 6.1 10.7 6.7 11.8 6.9L9.72421 9.27234ZM6 1.5C6 2.32843 4.65685 3 3 3C1.34315 3 0 2.32843 0 1.5C0 0.671573 1.34315 0 3 0C4.65685 0 6 0.671573 6 1.5Z" />
+</svg>

package/dist/assets/icons/dots.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis" class="svg-inline--fa fa-ellipsis" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200C94.93 200 120 225.1 120 256zM280 256C280 286.9 254.9 312 224 312C193.1 312 168 286.9 168 256C168 225.1 193.1 200 224 200C254.9 200 280 225.1 280 256zM328 256C328 225.1 353.1 200 384 200C414.9 200 440 225.1 440 256C440 286.9 414.9 312 384 312C353.1 312 328 286.9 328 256z"></path></svg>

package/dist/assets/icons/server.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="server" class="svg-inline--fa fa-server" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg>

package/dist/assets/icons/settings-with-dot.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.134 13.343l1.629.912a.51.51 0 01.227.531c-.454 1.367-1.136 2.583-2.084 3.608a.458.458 0 01-.568.076l-1.63-.912a7.613 7.613 0 01-2.273 1.33v1.86c0 .19-.152.38-.379.456-1.326.266-2.728.304-4.13 0-.19-.076-.341-.266-.341-.456v-1.86a7.355 7.355 0 01-2.312-1.33l-1.629.912a.459.459 0 01-.568-.076 9.714 9.714 0 01-2.046-3.608.437.437 0 01.189-.531l1.63-.912a8.05 8.05 0 010-2.696l-1.63-.911a.437.437 0 01-.19-.532 9.714 9.714 0 012.047-3.607.459.459 0 01.568-.076l1.63.949a6.783 6.783 0 012.31-1.367v-1.86c0-.19.114-.38.342-.418 1.326-.304 2.728-.342 4.13 0a.442.442 0 01.379.417v1.861a7.3 7.3 0 01.067.025 3.901 3.901 0 004.677 5.755 6.447 6.447 0 01-.045 2.46zm1.67-3.634a.45.45 0 00.146-.19 3.864 3.864 0 01-.147.19zM8.978 11.976c0 1.71 1.326 3.038 3.03 3.038a3.02 3.02 0 003.032-3.038 3.044 3.044 0 00-3.031-3.038 3.02 3.02 0 00-3.031 3.038z" fill="currentColor"/><circle cx="17.783" cy="7.239" r="2.5" fill="#FF0400" fill-opacity=".8"/></svg>

package/dist/assets/icons/settings.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.763 14.255l-1.63-.912c.19-.911.19-1.784 0-2.696l1.63-.911a.437.437 0 00.19-.532 9.714 9.714 0 00-2.046-3.607.459.459 0 00-.569-.076l-1.63.911a7.611 7.611 0 00-2.273-1.329v-1.86c0-.19-.151-.38-.379-.418-1.402-.342-2.804-.304-4.13 0-.227.038-.34.227-.34.417v1.861c-.872.304-1.63.76-2.312 1.367l-1.63-.95a.459.459 0 00-.568.077A9.714 9.714 0 003.03 9.204c-.076.19 0 .418.19.532l1.629.911a8.05 8.05 0 000 2.696l-1.63.912a.437.437 0 00-.19.531 9.713 9.713 0 002.047 3.608c.152.152.379.19.568.076l1.63-.912a7.355 7.355 0 002.311 1.33v1.86c0 .19.152.38.341.456 1.402.304 2.804.266 4.13 0 .228-.076.38-.266.38-.456v-1.86a7.612 7.612 0 002.273-1.33l1.63.912a.458.458 0 00.568-.076c.947-1.025 1.629-2.24 2.084-3.608a.511.511 0 00-.228-.531zm-8.753.76c-1.705 0-3.031-1.33-3.031-3.039a3.02 3.02 0 013.031-3.038 3.044 3.044 0 013.031 3.038 3.02 3.02 0 01-3.03 3.038z" fill="currentColor"/></svg>

package/dist/assets/icons/signIn.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right-to-bracket" class="svg-inline--fa fa-arrow-right-to-bracket" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 32h-64c-17.67 0-32 14.33-32 32s14.33 32 32 32h64c17.67 0 32 14.33 32 32v256c0 17.67-14.33 32-32 32h-64c-17.67 0-32 14.33-32 32s14.33 32 32 32h64c53.02 0 96-42.98 96-96V128C512 74.98 469 32 416 32zM342.6 233.4l-128-128c-12.51-12.51-32.76-12.49-45.25 0c-12.5 12.5-12.5 32.75 0 45.25L242.8 224H32C14.31 224 0 238.3 0 256s14.31 32 32 32h210.8l-73.38 73.38c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0l128-128C355.1 266.1 355.1 245.9 342.6 233.4z"></path></svg>

package/dist/assets/icons/signOut.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right-from-bracket" class="svg-inline--fa fa-arrow-right-from-bracket" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M160 416H96c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h64c17.67 0 32-14.33 32-32S177.7 32 160 32H96C42.98 32 0 74.98 0 128v256c0 53.02 42.98 96 96 96h64c17.67 0 32-14.33 32-32S177.7 416 160 416zM502.6 233.4l-128-128c-12.51-12.51-32.76-12.49-45.25 0c-12.5 12.5-12.5 32.75 0 45.25L402.8 224H192C174.3 224 160 238.3 160 256s14.31 32 32 32h210.8l-73.38 73.38c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0l128-128C515.1 266.1 515.1 245.9 502.6 233.4z"></path></svg>

package/dist/assets/icons/star.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"></path></svg>

package/dist/assets/icons/storage.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="database" class="svg-inline--fa fa-database" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 73.12v45.75C448 159.1 347.6 192 224 192S0 159.1 0 118.9V73.12C0 32.88 100.4 0 224 0S448 32.88 448 73.12zM448 176v102.9C448 319.1 347.6 352 224 352S0 319.1 0 278.9V176c48.12 33.12 136.2 48.62 224 48.62S399.9 209.1 448 176zM448 336v102.9C448 479.1 347.6 512 224 512s-224-32.88-224-73.13V336c48.12 33.13 136.2 48.63 224 48.63S399.9 369.1 448 336z"></path></svg>

package/dist/assets/icons/support.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 12c0-4.936-4.065-9-9-9-4.972 0-9 4.064-9 9 0 4.972 4.028 9 9 9 4.935 0 9-4.028 9-9zm-8.782-6.024c2.068 0 4.246 1.596 4.246 3.701 0 2.831-3.012 2.867-3.012 3.883v.037a.441.441 0 01-.436.435h-2.032a.42.42 0 01-.436-.435v-.146c0-1.487 1.125-2.068 1.96-2.54.726-.399 1.198-.69 1.198-1.234 0-.725-.944-1.197-1.67-1.197-.98 0-1.415.472-2.068 1.306a.453.453 0 01-.617.073l-1.27-.944c-.182-.145-.218-.399-.073-.617.98-1.488 2.25-2.322 4.21-2.322zm-.218 9c.907 0 1.67.762 1.67 1.67 0 .943-.763 1.668-1.67 1.668-.944 0-1.67-.725-1.67-1.669 0-.907.726-1.67 1.67-1.67z" fill="currentColor"/></svg>

package/dist/assets/icons/user-check.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-check" class="svg-inline--fa fa-user-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M274.7 304H173.3C77.61 304 0 381.6 0 477.3C0 496.5 15.52 512 34.66 512H413.3C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304zM224 256c70.7 0 128-57.31 128-128S294.7 0 224 0C153.3 0 96 57.31 96 128S153.3 256 224 256zM632.3 134.4c-9.703-9-24.91-8.453-33.92 1.266l-87.05 93.75l-38.39-38.39c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l56 56C499.5 285.5 505.6 288 512 288h.4375c6.531-.125 12.72-2.891 17.16-7.672l104-112C642.6 158.6 642 143.4 632.3 134.4z"></path></svg>

package/dist/assets/icons/user-secret.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill='none'><path fill="currentColor" d="M377.7 338.8l37.15-92.87C419 235.4 411.3 224 399.1 224h-57.48C348.5 209.2 352 193 352 176c0-4.117-.8359-8.057-1.217-12.08C390.7 155.1 416 142.3 416 128c0-16.08-31.75-30.28-80.31-38.99C323.8 45.15 304.9 0 277.4 0c-10.38 0-19.62 4.5-27.38 10.5c-15.25 11.88-36.75 11.88-52 0C190.3 4.5 181.1 0 170.7 0C143.2 0 124.4 45.16 112.5 88.98C63.83 97.68 32 111.9 32 128c0 14.34 25.31 27.13 65.22 35.92C96.84 167.9 96 171.9 96 176C96 193 99.47 209.2 105.5 224H48.02C36.7 224 28.96 235.4 33.16 245.9l37.15 92.87C27.87 370.4 0 420.4 0 477.3C0 496.5 15.52 512 34.66 512H413.3C432.5 512 448 496.5 448 477.3C448 420.4 420.1 370.4 377.7 338.8zM176 479.1L128 288l64 32l16 32L176 479.1zM271.1 479.1L240 352l16-32l64-32L271.1 479.1zM320 186C320 207 302.8 224 281.6 224h-12.33c-16.46 0-30.29-10.39-35.63-24.99C232.1 194.9 228.4 192 224 192S215.9 194.9 214.4 199C209 213.6 195.2 224 178.8 224h-12.33C145.2 224 128 207 128 186V169.5C156.3 173.6 188.1 176 224 176s67.74-2.383 96-6.473V186z"></path></svg>

package/dist/assets/icons/ydb.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0V0C24.8366 0 32 7.16344 32 16V16C32 24.8366 24.8366 32 16 32V32C7.16344 32 0 24.8366 0 16V16Z" fill="#5282FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 9.5C24 10.3284 22.6569 11 21 11C19.3431 11 18 10.3284 18 9.5C18 8.67157 19.3431 8 21 8C22.6569 8 24 8.67157 24 9.5ZM13 19.6V22.3C13 23.2 14.3 23.9 16 23.9C17.7 23.9 19 23.2 19 22.3V19.6C18.2 20.3 17.1 20.6 16 20.6C14.9 20.6 13.8 20.3 13 19.6ZM18 11V10.6C18.8 11.3 19.9 11.6 21 11.6C22.1 11.6 23.2 11.3 24 10.6V13.4C24 14.2 22.8 14.9 21.2 15L18.7247 17.8714C18.9014 18.0626 19 18.2755 19 18.5C19 19.3284 17.6569 20 16 20C14.3431 20 13 19.3284 13 18.5C13 18.2947 13.0825 18.0991 13.2318 17.9209L10.8 15.1C9.3 15 8 14.3 8 13.5V10.6C8.8 11.3 9.9 11.6 11 11.6C12.1 11.6 13.2 11.3 14 10.6V11L18 11ZM17.7242 17.2723C17.2364 17.1007 16.6417 17 16 17C15.7351 17 15.4782 17.0172 15.2336 17.0494C14.8484 17.0976 14.4565 17.1812 14.1 17.3L12 14.9C13.1 14.7 14 14.1 14 13.4V12H18V13.4C18 14.1 18.7 14.7 19.8 14.9L17.7242 17.2723ZM14 9.5C14 10.3284 12.6569 11 11 11C9.34315 11 8 10.3284 8 9.5C8 8.67157 9.34315 8 11 8C12.6569 8 14 8.67157 14 9.5Z" fill="white"/>
+</svg>

package/dist/components/AsideNavigation/AsideHeader.scss

@@ -0,0 +1,148 @@
+.nv-aside-header {
+    --nv-aside-header-min-width: 56px;
+    $class: &;
+    position: relative;
+
+    width: 100%;
+
+    height: 100%;
+
+    background-color: var(--yc-color-base-background);
+
+    &__aside {
+        position: sticky;
+        z-index: 100;
+        top: 0;
+        left: 0;
+
+        display: flex;
+        flex-direction: column;
+
+        width: inherit;
+        height: 100vh;
+
+        border-right: 1px solid var(--yc-color-line-generic);
+        background-color: var(--yc-color-base-background);
+
+        &-popup-anchor {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        &-content {
+            position: relative;
+            z-index: 2;
+
+            display: flex;
+            overflow-x: hidden;
+            flex-direction: column;
+
+            width: inherit;
+            height: inherit;
+
+            user-select: none;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+
+        width: 100%;
+        margin: 8px 0;
+
+        &::before {
+            position: relative;
+            top: -8px;
+
+            content: '';
+
+            border-top: 1px solid var(--yc-color-line-generic);
+        }
+    }
+
+    &__drawer {
+        position: fixed;
+        z-index: 98;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        overflow: auto;
+    }
+
+    &__panel {
+        height: 100%;
+    }
+
+    &__content-container {
+        height: 100%;
+    }
+
+    &__pane-container {
+        display: flex;
+        overflow: visible;
+        flex: 1 1 0;
+        flex-direction: row;
+
+        user-select: text;
+
+        outline: none;
+    }
+
+    &__content {
+        z-index: 90;
+
+        width: calc(100% - var(--nv-aside-header-size));
+    }
+
+    &__all-services-button {
+        &_top {
+            box-sizing: border-box;
+
+            border-bottom: 1px solid var(--yc-color-line-generic);
+        }
+    }
+
+    &__collapse-button {
+        position: absolute;
+        z-index: 3;
+        right: 14px;
+        bottom: 14px;
+
+        width: 28px;
+        height: 28px;
+
+        transition: none;
+        &_compact {
+            right: -29px;
+
+            border: 1px solid var(--yc-color-line-generic);
+            border-left: none;
+            border-radius: 0 4px 4px 0;
+            background-color: inherit;
+
+            &.yc-button::before {
+                border-radius: 0 3px 3px 0;
+            }
+        }
+
+        &:not(#{&}_compact) {
+            transform: rotate(180deg);
+        }
+
+        &:hover {
+            color: var(--yc-color-text-misc);
+        }
+    }
+
+    &__collapse-icon {
+        color: var(--yc-color-text-misc);
+    }
+}