ydb-embedded-ui 0.1.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+### [1.0.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.0...v1.0.1) (2022-03-05)
+
+
+### Bug Fixes
+
+* **QueriesHistory:** should save history to local storage ([#8](https://www.github.com/ydb-platform/ydb-embedded-ui/issues/8)) ([57031ab](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/57031ab16900e9d1112bbf506d5c777f94f883bb))
+
+## [1.0.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v0.2.0...v1.0.0) (2022-03-01)
+
+
+### Bug Fixes
+
+* **ObjectSummary:** start time should be taken from current schema object ([e7511be](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e7511be61e5c8d2052ad3a2247a713f55049d3e6))
+* **QueryEditor:** key bindings should work properly ([ebe59b3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/ebe59b3c838889ee81e308232e4c8d2ba23a1a3a))
+* **QueryExplain:** should render graph in fullscreen view properly ([da511da](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/da511da2fc1a36282ad99f20d5d6fd0b5b4ea05b))
+* **README:** ui path should be correct ([e2668ef](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e2668ef329de4cf31fd31061dfe3b4ac091e0121))
+
+## [0.2.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v0.1.0...v0.2.0) (2022-02-24)
+
+
+### Features
+
+* new design, refactoring ([#3](https://www.github.com/ydb-platform/ydb-embedded-ui/issues/3)) ([76d7cb0](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/76d7cb0ebad5658a6654254a0376b1ecf203e696))
+
 ## 0.1.0 (2022-02-17)
 
 

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -8,8 +8,8 @@ Local viewer for YDB clusters
 
 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
+   docker pull cr.yandex/yc/yandex-docker-local-ydb`
+   docker run --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000" -dp 2135:2135 -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
    ```
 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.\
@@ -24,5 +24,5 @@ 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`
+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.

package/dist/assets/icons/cluster.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M260.353,254.878,131.538,33.1a2.208,2.208,0,0,0-3.829.009L.3,254.887A2.234,2.234,0,0,0,.3,257.122L129.116,478.9a2.208,2.208,0,0,0,3.83-.009L260.358,257.113A2.239,2.239,0,0,0,260.353,254.878Zm39.078-25.713a2.19,2.19,0,0,0,1.9,1.111h66.509a2.226,2.226,0,0,0,1.9-3.341L259.115,33.111a2.187,2.187,0,0,0-1.9-1.111H190.707a2.226,2.226,0,0,0-1.9,3.341ZM511.7,254.886,384.9,33.112A2.2,2.2,0,0,0,382.99,32h-66.6a2.226,2.226,0,0,0-1.906,3.34L440.652,256,314.481,476.66a2.226,2.226,0,0,0,1.906,3.34h66.6a2.2,2.2,0,0,0,1.906-1.112L511.7,257.114A2.243,2.243,0,0,0,511.7,254.886ZM366.016,284.917H299.508a2.187,2.187,0,0,0-1.9,1.111l-108.8,190.631a2.226,2.226,0,0,0,1.9,3.341h66.509a2.187,2.187,0,0,0,1.9-1.111l108.8-190.631A2.226,2.226,0,0,0,366.016,284.917Z"/></svg>

package/dist/assets/icons/hide.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M325.1 351.5L225.8 273.6c8.303 44.56 47.26 78.37 94.22 78.37C321.8 352 323.4 351.6 325.1 351.5zM320 400c-79.5 0-144-64.52-144-143.1c0-6.789 1.09-13.28 1.1-19.82L81.28 160.4c-17.77 23.75-33.27 50.04-45.81 78.59C33.56 243.4 31.1 251 31.1 256c0 4.977 1.563 12.6 3.469 17.03c54.25 123.4 161.6 206.1 284.5 206.1c45.46 0 88.77-11.49 128.1-32.14l-74.5-58.4C356.1 396.1 338.1 400 320 400zM630.8 469.1l-103.5-81.11c31.37-31.96 57.77-70.75 77.21-114.1c1.906-4.43 3.469-12.07 3.469-17.03c0-4.976-1.562-12.6-3.469-17.03c-54.25-123.4-161.6-206.1-284.5-206.1c-62.69 0-121.2 21.94-170.8 59.62L38.81 5.116C34.41 1.679 29.19 0 24.03 0C16.91 0 9.839 3.158 5.121 9.189c-8.187 10.44-6.37 25.53 4.068 33.7l591.1 463.1c10.5 8.203 25.57 6.333 33.69-4.073C643.1 492.4 641.2 477.3 630.8 469.1zM463.1 256c0 24.85-6.705 47.98-17.95 68.27l-38.55-30.23c5.24-11.68 8.495-24.42 8.495-38.08c0-52.1-43-96-95.1-96c-2.301 .0293-5.575 .4436-8.461 .7658C316.8 170 319.1 180.6 319.1 192c0 10.17-2.561 19.67-6.821 28.16L223.6 149.9c25.46-23.38 59.12-37.93 96.42-37.93C399.5 112 463.1 176.6 463.1 256z"></path></svg>

package/dist/assets/icons/show.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.5 238.1C518.3 115.5 410.9 32 288 32S57.69 115.6 3.469 238.1C1.563 243.4 0 251 0 256c0 4.977 1.562 12.6 3.469 17.03C57.72 396.5 165.1 480 288 480s230.3-83.58 284.5-206.1C574.4 268.6 576 260.1 576 256C576 251 574.4 243.4 572.5 238.1zM432 256c0 79.45-64.47 144-143.9 144C208.6 400 144 335.5 144 256S208.5 112 288 112S432 176.5 432 256zM288 160C285.7 160 282.4 160.4 279.5 160.8C284.8 170 288 180.6 288 192c0 35.35-28.65 64-64 64C212.6 256 201.1 252.7 192.7 247.5C192.4 250.5 192 253.6 192 256c0 52.1 43 96 96 96s96-42.99 96-95.99S340.1 160 288 160z"></path></svg>

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

@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c39.77 0 72 32.24 72 72S295.8 272 256 272c-39.76 0-72-32.24-72-72S216.2 128 256 128zM256 448c-52.93 0-100.9-21.53-135.7-56.29C136.5 349.9 176.5 320 224 320h64c47.54 0 87.54 29.88 103.7 71.71C356.9 426.5 308.9 448 256 448z"/></svg>

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

@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M560 448H512V113.5c0-27.25-21.5-49.5-48-49.5L352 64.01V128h96V512h112c8.875 0 16-7.125 16-15.1v-31.1C576 455.1 568.9 448 560 448zM280.3 1.007l-192 49.75C73.1 54.51 64 67.76 64 82.88V448H16c-8.875 0-16 7.125-16 15.1v31.1C0 504.9 7.125 512 16 512H320V33.13C320 11.63 300.5-4.243 280.3 1.007zM232 288c-13.25 0-24-14.37-24-31.1c0-17.62 10.75-31.1 24-31.1S256 238.4 256 256C256 273.6 245.3 288 232 288z"/></svg>

package/dist/components/AsideNavigation/AsideHeader.scss

@@ -1,10 +1,9 @@
 .nv-aside-header {
-    --nv-aside-header-min-width: 56px;
     $class: &;
+    --nv-aside-header-min-width: 56px;
     position: relative;
 
     width: 100%;
-
     height: 100%;
 
     background-color: var(--yc-color-base-background);

package/dist/components/AsideNavigation/AsideHeaderFooterItem/AsideHeaderFooterItem.scss

@@ -19,6 +19,10 @@
     width: 100%;
     min-height: 40px;
 
+    @at-root .yc-list__item_active &:not(&_current) {
+        background-color: var(--yc-color-base-simple-hover);
+    }
+
     &_current {
         background-color: var(--yc-color-base-selection);
     }
@@ -33,9 +37,9 @@
 
     &__icon-place {
         display: flex;
-        align-items: center;
         flex-shrink: 0;
         justify-content: center;
+        align-items: center;
 
         width: var(--nv-aside-header-min-width);
         height: 100%;
@@ -52,8 +56,8 @@
 
     &__icon-wrap {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
         width: 38px;
         height: 38px;
@@ -65,8 +69,8 @@
 
     &__btn-icon {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
         width: 100%;
         height: 100%;
@@ -75,8 +79,4 @@
     &__popup {
         @include aside-header-popup-animation();
     }
-
-    @at-root .yc-list__item_active &:not(&_current) {
-        background-color: var(--yc-color-base-simple-hover);
-    }
 }

package/dist/components/AsideNavigation/AsideHeaderTooltip/AsideHeaderTooltip.scss

@@ -1,9 +1,9 @@
 .nv-aside-header-tooltip {
     &.yc-popup {
-        animation-name: none;
-
         border: none;
         box-shadow: none;
+
+        animation-name: none;
     }
 
     &__text {

package/dist/components/AsideNavigation/CompositeBar/CompositeBar.scss

@@ -28,9 +28,9 @@
 
     &__menu-icon-place {
         display: flex;
-        align-items: center;
         flex-shrink: 0;
         justify-content: center;
+        align-items: center;
 
         width: var(--nv-aside-header-min-width);
         height: 100%;
@@ -87,12 +87,16 @@
 
     &__btn-icon {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
         width: 100%;
         height: 100%;
 
+        @at-root .yc-list__item_active &:not(&_current) {
+            background-color: var(--yc-color-base-simple-hover);
+        }
+
         &::before {
             border-radius: 0;
         }
@@ -100,9 +104,5 @@
         &_current {
             background-color: var(--yc-color-base-selection);
         }
-
-        @at-root .yc-list__item_active &:not(&_current) {
-            background-color: var(--yc-color-base-simple-hover);
-        }
     }
 }

package/dist/components/AsideNavigation/Drawer/Drawer.scss

@@ -21,7 +21,7 @@
     }
 
     &__item-transition-enter-done {
-        // Хак, чтобы не размывался текст после анимации в некоторых браузерах
+        // it is hack to prevent text blur after animation in any browsers
         filter: blur(0px);
 
         transform: translateZ(0);
@@ -55,9 +55,9 @@
     }
 
     &__veil-transition-enter-active {
-        transition: opacity 300ms;
-
         opacity: 1;
+
+        transition: opacity 300ms;
     }
 
     &__veil-transition-exit {
@@ -65,9 +65,9 @@
     }
 
     &__veil-transition-exit-active {
-        transition: opacity 300ms;
-
         opacity: 0;
+
+        transition: opacity 300ms;
     }
 
     &__veil-transition-exit-done {

package/dist/components/AsideNavigation/Logo/Logo.scss

@@ -1,7 +1,7 @@
 .nv-aside-header-logo {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
+    align-items: center;
 
     height: 32px;
     margin: 12px 0;
@@ -10,19 +10,18 @@
 
     &__logo-btn-place {
         display: flex;
-        align-items: center;
         flex-shrink: 0;
         justify-content: center;
+        align-items: center;
 
         width: var(--nv-aside-header-min-width);
     }
 
     &__logo {
-        vertical-align: middle;
-
         font-family: 'Rubik', sans-serif;
         font-size: 16px;
         line-height: 20px;
+        vertical-align: middle;
     }
 
     &__logo-link {

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -1,6 +1,7 @@
 .nv-settings {
     display: grid;
     grid-template-columns: 216px 1fr;
+
     width: 834px;
     height: 100%;
 
@@ -17,6 +18,7 @@
         display: grid;
         align-items: center;
         justify-items: center;
+
         height: 100%;
     }
 
@@ -26,9 +28,10 @@
 
     &__heading {
         margin: 20px 20px 0;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
     }
 
     &__search {
@@ -36,31 +39,38 @@
     }
 
     &__page {
-        padding: 20px;
         overflow-y: auto;
+
+        padding: 20px;
     }
 
     &__section {
         &-heading {
             margin: 0;
+
             font-size: var(--yc-text-body2-font-size);
-            line-height: var(--yc-text-body2-line-height);
             font-weight: 500;
+            line-height: var(--yc-text-body2-line-height);
 
             &_badge {
-                display: inline-block;
                 position: relative;
 
+                display: inline-block;
+
                 &::after {
-                    content: '';
+                    position: absolute;
+                    top: 1px;
+                    right: -8px;
+
                     display: block;
+
                     width: 6px;
                     height: 6px;
+
+                    content: '';
+
                     border-radius: 50%;
                     background-color: var(--yc-color-text-danger);
-                    position: absolute;
-                    right: -8px;
-                    top: 1px;
                 }
             }
         }
@@ -93,21 +103,26 @@
             position: relative;
 
             &::after {
-                content: '';
+                position: absolute;
+                top: 1px;
+                right: -10px;
+
                 display: block;
+
                 width: 4px;
                 height: 4px;
+
+                content: '';
+
                 border-radius: 50%;
                 background-color: var(--yc-color-text-danger);
-                position: absolute;
-                right: -10px;
-                top: 1px;
             }
         }
     }
 
     &__found {
         font-weight: 500;
+
         background: var(--yc-color-base-selection);
     }
 }

package/dist/components/AsideNavigation/Settings/SettingsMenu/SettingsMenu.scss

@@ -2,8 +2,10 @@
     &__group {
         &-heading {
             display: inline-block;
-            padding: 0 20px;
+
             margin-bottom: 12px;
+            padding: 0 20px;
+
             font-weight: 500;
             line-height: 18px;
         }
@@ -17,6 +19,7 @@
         $item: &;
         display: flex;
         align-items: center;
+
         height: 40px;
         padding: 0 20px;
 
@@ -33,8 +36,9 @@
         }
 
         &-icon {
-            color: var(--yc-color-text-misc);
             margin-right: 5px;
+
+            color: var(--yc-color-text-misc);
         }
 
         &:hover,
@@ -55,15 +59,19 @@
             position: relative;
 
             &::after {
-                content: '';
+                position: absolute;
+                top: calc(50% - 3px);
+                right: 9px;
+
                 display: block;
+
                 width: 6px;
                 height: 6px;
+
+                content: '';
+
                 border-radius: 50%;
                 background-color: var(--yc-color-text-danger);
-                position: absolute;
-                right: 9px;
-                top: calc(50% - 3px);
             }
         }
     }

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,4 +1,5 @@
 .kv-breadcrumbs {
-    font-size: var(--yc-text-body2-font-size);
     padding: 20px 0;
+
+    font-size: var(--yc-text-body2-font-size);
 }

package/dist/components/ClusterInfo/ClusterInfo.scss

@@ -1,21 +1,26 @@
 @import '../../styles/mixins';
 
 .cluster-info {
-    margin: 15px 0 0;
-    padding-bottom: 15px;
+    width: 100%;
+    &__loader {
+        display: flex;
+        justify-content: center;
+
+        margin-top: 16px;
+    }
 
     &__common {
         display: flex;
         align-items: center;
+
+        margin-top: 16px;
         margin-bottom: 20px;
     }
 
     &__title {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
-        font-weight: 500;
-        text-transform: uppercase;
-        margin-right: 16px;
+        margin-bottom: 15px;
+
+        font-weight: 600;
     }
 
     &__url {
@@ -27,10 +32,11 @@
     }
 
     &__system-tablets {
-        margin-left: 15px;
         display: flex;
-        align-items: center;
         flex-wrap: wrap;
+        align-items: center;
+
+        margin-left: 15px;
 
         & .tablet {
             margin-bottom: 2px;
@@ -38,8 +44,8 @@
     }
 
     &__metrics {
-        padding: 0 15px !important;
         margin: 0 -15px;
+        padding: 0 15px !important;
 
         .info-viewer__items {
             grid-template-columns: repeat(2, minmax(auto, 250px));
@@ -54,12 +60,13 @@
     }
 
     &__tablets {
-        padding: 0 !important;
         margin-left: 15px;
+        padding: 0 !important;
     }
     &__clipboard-button {
-        margin-left: 5px;
         display: flex;
         align-items: center;
+
+        margin-left: 5px;
     }
 }