ydb-embedded-ui 4.25.0 → 4.26.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.26.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.25.0...v4.26.0) (2023-12-14)
+
+
+### Features
+
+* update to uikit5 ([#607](https://github.com/ydb-platform/ydb-embedded-ui/issues/607)) ([ddd263b](https://github.com/ydb-platform/ydb-embedded-ui/commit/ddd263bd39d4de262e6c891dce6c6ff6ba2a3379))
+
 ## [4.25.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.24.0...v4.25.0) (2023-12-07)
 
 

package/README.md

@@ -2,6 +2,18 @@
 
 Local viewer for YDB clusters
 
+[Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+
+## Preview
+
+You can preview working UI using YDB docker image. It will be UI with the latest stable ydb version.
+
+Run on a machine with Docker installed:
+```
+docker pull cr.yandex/yc/yandex-docker-local-ydb
+docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
+```
+
 ## Development
 
 1. Run on a machine with Docker installed:
@@ -15,6 +27,21 @@ Local viewer for YDB clusters
 
 For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 
+### YDB docker images
+
+[Docs on YDB docker images](https://ydb.tech/en/docs/getting_started/self_hosted/ydb_docker)
+
+Image `cr.yandex/yc/yandex-docker-local-ydb` corresponds to `:latest` tag. It's the latest stable ydb version.
+
+To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image. Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
+
+### Custom backend in dev mode
+
+YDB docker represents a single node cluster with only one version, small amount of storage groups, PDisks and VDisks. It may be not enough for development purposes. If you have your own development cluster with sufficient amount of entities, you can run the app in the dev mode with this cluster as backend. To do it, set you host to `REACT_APP_BACKEND` variable in `dev` script. For example: 
+```
+"dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://your-cluster-host:8765 npm start"
+```
+
 ## E2E Tests
 
 For e2e tests we use `@playwright/tests`. Tests configuration is in `playwright.config.ts`. Tests are set up in `tests` dir.
@@ -49,3 +76,15 @@ 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.
+
+### Testing production bundle with specific cluster host
+
+If you want to test embedded version in production mode, but YDB docker is not enough and you have your own ydb development cluster, you can manually update UI for the specific cluster host.
+
+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
+
+It's assumed, that you have all the necessary access rights to update files on the host.

package/dist/components/BasicNodeViewer/BasicNodeViewer.scss

@@ -1,20 +1,17 @@
 @import '../../styles/mixins.scss';
 
 .basic-node-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
-
     display: flex;
     align-items: center;
 
     margin: 15px 0;
 
+    @include body-2-typography();
+
     &__title {
         margin: 0 20px 0 0;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -25,15 +22,10 @@
     &__label {
         margin-right: 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
+        color: var(--g-color-text-hint);
     }
 
     &__link {

package/dist/components/CircularProgressBar/CircularProgressBar.scss

@@ -21,7 +21,7 @@
     }
 
     &__circle-bg {
-        stroke: var(--yc-color-base-simple-hover);
+        stroke: var(--g-color-base-simple-hover);
 
         fill: none;
     }
@@ -30,13 +30,13 @@
         fill: none;
 
         &_status_good {
-            stroke: var(--yc-color-private-green-550);
+            stroke: var(--ydb-color-status-green);
         }
         &_status_warning {
-            stroke: var(--yc-color-private-yellow-550);
+            stroke: var(--ydb-color-status-yellow);
         }
         &_status_danger {
-            stroke: var(--yc-color-private-red-550);
+            stroke: var(--ydb-color-status-red);
         }
     }
 }

package/dist/components/DateRange/DateRange.scss

@@ -3,9 +3,9 @@
         min-width: 190px;
         padding: 5px 8px;
 
-        color: var(--yc-color-text-primary);
-        border: 1px solid var(--yc-color-line-generic);
-        border-radius: var(--yc-border-radius-m);
+        color: var(--g-color-text-primary);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
         background: transparent;
     }
 }

package/dist/components/DiagnosticCard/DiagnosticCard.scss

@@ -5,18 +5,18 @@
     padding: 16px;
     padding-bottom: 28px;
 
-    border: 1px solid var(--yc-color-line-generic);
+    border: 1px solid var(--g-color-line-generic);
     border-radius: 8px;
     background-color: transparent;
 
     &_active {
-        border-color: var(--yc-color-base-info-heavy);
-        background-color: var(--yc-color-base-selection);
+        border-color: var(--g-color-base-info-medium);
+        background-color: var(--g-color-base-selection);
     }
 
     &:hover {
         cursor: pointer;
 
-        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+        box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
     }
 }

package/dist/components/Divider/Divider.scss

@@ -3,5 +3,5 @@
     height: 100%;
     margin: 0 4px;
 
-    background-color: var(--yc-color-line-generic);
+    background-color: var(--g-color-line-generic);
 }

package/dist/components/EmptyState/EmptyState.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixins.scss';
+
 .empty-state {
     padding: 20px;
 
@@ -31,10 +33,10 @@
 
         margin-right: 60px;
 
-        color: var(--yc-color-base-info-hover);
+        color: var(--g-color-base-info-light-hover);
 
-        .yc-root_theme_dark & {
-            color: var(--yc-color-base-generic);
+        .g-root_theme_dark & {
+            color: var(--g-color-base-generic);
         }
     }
 
@@ -45,21 +47,18 @@
         font-weight: 500;
 
         &_size_s {
-            font-size: var(--yc-text-subheader-3-font-size);
-            line-height: var(--yc-text-subheader-3-line-height);
+            @include lead-typography();
         }
 
         &_size_m {
-            font-size: var(--yc-text-header-2-font-size);
-            line-height: var(--yc-text-header-2-line-height);
+            @include header-2-typography();
         }
     }
 
     &__description {
         grid-area: description;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
     }
 
     &__actions {

package/dist/components/EntityStatus/EntityStatus.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixins.scss';
+
 .entity-status {
     display: inline-flex;
     align-items: center;
@@ -5,11 +7,11 @@
     max-width: 100%;
     height: 100%;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__clipboard-button {
         display: none;
+        justify-content: center;
         align-items: center;
 
         margin-left: 8px;
@@ -33,28 +35,22 @@
     a {
         text-decoration: none;
 
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
     }
 
     a:hover {
-        color: var(--yc-color-text-link-hover);
+        color: var(--g-color-text-link-hover);
     }
 
     &__label {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
 
-        &_size_m {
-            font-size: var(--yc-text-body-2-font-size);
-            line-height: var(--yc-text-body-2-line-height);
-        }
+        @include body-2-typography();
 
         &_size_l {
-            font-size: var(--yc-text-header-2-font-size);
+            font-size: var(--g-text-header-2-font-size);
         }
     }
 
@@ -108,45 +104,39 @@
     &__status-color {
         &_state_running,
         &_state_green {
-            background-color: var(--yc-color-infographics-positive-heavy);
+            background-color: var(--ydb-color-status-green);
         }
         &_state_yellow {
-            background-color: var(--yc-color-infographics-warning-heavy);
+            background-color: var(--ydb-color-status-yellow);
         }
         &_state_blue {
-            background-color: var(--yc-color-infographics-info-heavy);
+            background-color: var(--ydb-color-status-blue);
         }
-
         &_state_red {
-            background: var(--yc-color-infographics-danger-heavy);
+            background-color: var(--ydb-color-status-red);
         }
         &_state_gray,
         &_state_grey {
-            background: var(--yc-color-text-complementary);
+            background-color: var(--ydb-color-status-grey);
         }
         &_state_orange {
-            background: var(--yc-color-base-warning-orange);
+            background-color: var(--ydb-color-status-orange);
         }
     }
 
     &__label,
     &__status-icon {
         &_state_blue {
-            color: var(--yc-color-infographics-info-heavy);
+            color: var(--ydb-color-status-blue);
         }
         &_state_yellow {
-            color: var(--yc-color-infographics-warning-heavy);
+            color: var(--ydb-color-status-yellow);
         }
         &_state_orange {
-            color: var(--yc-color-base-warning-orange);
+            color: var(--ydb-color-status-orange);
         }
         &_state_red {
-            color: var(--yc-color-infographics-danger-heavy);
+            color: var(--ydb-color-status-red);
         }
     }
-
-    &_size_m {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-    }
 }

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
 
 import {Link} from '@gravity-ui/uikit';
 
-import {IconWrapper} from '../Icon/Icon';
+import {Icon} from '../Icon/Icon';
 
 import './ExternalLinkWithIcon.scss';
 
@@ -18,7 +18,7 @@ export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) =>
         <Link href={url} target="_blank" className={b()}>
             {title}
             {'\u00a0'}
-            <IconWrapper name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+            <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
         </Link>
     );
 };

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -1,8 +1,7 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__common-info {
         display: flex;
@@ -29,8 +28,6 @@
     &__section-title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/components/Fullscreen/Fullscreen.scss

@@ -1,6 +1,6 @@
 .kv-fullscreen {
     // should expand to fill the content area, keeping aside navigation visible
-    // counts on .ycn-aside-header__content to have position: relative, it is set in App.scss
+    // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
     position: absolute;
     z-index: 10;
     top: 0;
@@ -12,19 +12,12 @@
     overflow: hidden;
     flex-grow: 1;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__close-button {
         position: fixed;
         z-index: 11;
         top: 8px;
         right: 20px;
-
-        .yc-button__text {
-            display: flex;
-            align-items: center;
-
-            margin: 0 6px;
-        }
     }
 }

package/dist/components/Icon/Icon.tsx

@@ -32,8 +32,4 @@ export const Icon = ({
     );
 };
 
-// When used with uikit components Icon is considered as text element and corresponding styles are applied
-// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles
-export const IconWrapper = (props: IconProps) => <Icon {...props} />;
-
-IconWrapper.displayName = 'Icon';
+Icon.displayName = 'Icon';

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,6 +1,6 @@
 .info-viewer {
-    --ydb-info-viewer-font-size: var(--yc-text-body-2-font-size);
-    --ydb-info-viewer-line-height: var(--yc-text-body-2-line-height);
+    --ydb-info-viewer-font-size: var(--g-text-body-2-font-size);
+    --ydb-info-viewer-line-height: var(--g-text-body-2-line-height);
     --ydb-info-viewer-title-font-weight: 600;
     --ydb-info-viewer-title-margin: 15px 0 10px;
     --ydb-info-viewer-items-gap: 7px;
@@ -39,7 +39,7 @@
 
         white-space: nowrap;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__label-text {
@@ -58,7 +58,7 @@
 
         margin: 0 2px;
 
-        border-bottom: 1px dotted var(--yc-color-text-secondary);
+        border-bottom: 1px dotted var(--g-color-text-secondary);
     }
 
     &__value {
@@ -71,8 +71,8 @@
 
     &_size {
         &_s {
-            --ydb-info-viewer-font-size: var(--yc-text-body-1-font-size);
-            --ydb-info-viewer-line-height: var(--yc-text-body-1-line-height);
+            --ydb-info-viewer-font-size: var(--g-text-body-1-font-size);
+            --ydb-info-viewer-line-height: var(--g-text-body-1-line-height);
             --ydb-info-viewer-title-font-weight: 500;
             --ydb-info-viewer-title-margin: 0 0 4px;
             --ydb-info-viewer-items-gap: 4px;

package/dist/components/LabelWithPopover/LabelWithPopover.tsx

@@ -1,6 +1,6 @@
 import type {ReactNode} from 'react';
 
-import {HelpPopover} from '@gravity-ui/uikit';
+import {HelpPopover} from '@gravity-ui/components';
 
 interface LabelWithPopoverProps {
     text: ReactNode;
@@ -16,7 +16,8 @@ export const LabelWithPopover = ({
     contentClassName,
 }: LabelWithPopoverProps) => (
     <div className={className}>
-        {text + '\u00a0'}
+        {text}
+        {'\u00a0'}
         <HelpPopover content={popoverContent} contentClassName={contentClassName} />
     </div>
 );

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -9,7 +9,7 @@ import {isUnavailableNode} from '../../utils/nodes';
 
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
-import {IconWrapper} from '../Icon';
+import {Icon} from '../Icon';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 
 import './NodeHostWrapper.scss';
@@ -56,7 +56,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
                         className={b('external-button')}
                         target="_blank"
                     >
-                        <IconWrapper name="external" />
+                        <Icon name="external" />
                     </Button>
                 )}
             </div>

package/dist/components/PoolBar/PoolBar.scss

@@ -20,13 +20,13 @@
     }
 
     &_type_normal {
-        border-color: var(--yc-color-infographics-positive-heavy);
+        border-color: var(--ydb-color-status-green);
     }
     &_type_warning {
-        border-color: var(--yc-color-infographics-warning-heavy);
+        border-color: var(--ydb-color-status-yellow);
     }
     &_type_danger {
-        border-color: var(--yc-color-infographics-danger-heavy);
+        border-color: var(--ydb-color-status-red);
     }
 
     &__value {
@@ -37,13 +37,13 @@
         min-height: 1px;
 
         &_type_normal {
-            background-color: var(--yc-color-infographics-positive-heavy);
+            background-color: var(--ydb-color-status-green);
         }
         &_type_warning {
-            background-color: var(--yc-color-infographics-warning-heavy);
+            background-color: var(--ydb-color-status-yellow);
         }
         &_type_danger {
-            background-color: var(--yc-color-infographics-danger-heavy);
+            background-color: var(--ydb-color-status-red);
         }
     }
 }

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,6 +1,8 @@
+@import '../../styles/mixins.scss';
+
 .ydb-pool-usage {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
+
     &__info {
         display: flex;
         justify-content: space-between;
@@ -8,7 +10,7 @@
     }
 
     &__pool-name {
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
     }
 
     &__value {
@@ -17,21 +19,17 @@
     }
 
     &__threads {
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
 
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
+        color: var(--g-color-text-hint);
     }
 
     &__percents {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
 
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
     }
 
     &__visual {
@@ -44,10 +42,10 @@
 
         height: 6px;
 
-        font-size: var(--yc-text-body-2-font-size);
+        font-size: var(--g-text-body-2-font-size);
 
         border-radius: 4px;
-        background-color: var(--yc-color-base-generic-accent);
+        background-color: var(--g-color-base-generic-accent);
     }
 
     &__usage-line {
@@ -58,16 +56,16 @@
         height: 100%;
 
         &_type_green {
-            background-color: var(--yc-color-base-positive-heavy);
+            background-color: var(--ydb-color-status-green);
         }
         &_type_blue {
-            background-color: var(--yc-color-base-info-heavy);
+            background-color: var(--ydb-color-status-blue);
         }
         &_type_yellow {
-            background-color: var(--yc-color-text-warning-heavy);
+            background-color: var(--ydb-color-status-yellow);
         }
         &_type_red {
-            background-color: var(--yc-color-base-danger-heavy);
+            background-color: var(--ydb-color-status-red);
         }
     }
 }