ydb-embedded-ui 1.10.3 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [1.12.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.11.1...v1.12.0) (2022-08-26)
+
+
+### Features
+
+* **Storage:** show usage column ([73aed5f](https://github.com/ydb-platform/ydb-embedded-ui/commit/73aed5f9ed60b6d2bd77fd315ae514ee7443c489))
+* **Storage:** vividly show degraded disks count ([7315a9c](https://github.com/ydb-platform/ydb-embedded-ui/commit/7315a9cfd98002a7fab85d721712aa82c6dbb552))
+
+## [1.11.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.11.0...v1.11.1) (2022-08-26)
+
+
+### Bug Fixes
+
+* number type instead of string for uint32 ([e60799e](https://github.com/ydb-platform/ydb-embedded-ui/commit/e60799edec4ef831e8c0d51f4384cde83520541d))
+* **Storage:** expect arbitrary donors data ([09f8e08](https://github.com/ydb-platform/ydb-embedded-ui/commit/09f8e085c94faacd9da502643355e932346502ac))
+* vdisk data contains pdisk data, not id ([bd1ea7f](https://github.com/ydb-platform/ydb-embedded-ui/commit/bd1ea7f59e0461256bb12f146b50470d21ac1ace))
+
+## [1.11.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.3...v1.11.0) (2022-08-23)
+
+
+### Features
+
+* **Stack:** new component for stacked elements ([c42ba37](https://github.com/ydb-platform/ydb-embedded-ui/commit/c42ba37fafdd9dedc4be9d625d7e756a83c01fe3))
+* **Storage:** display donor disks ([b808fe9](https://github.com/ydb-platform/ydb-embedded-ui/commit/b808fe951987c615f797af56017f8045a1ed852f))
+* **VDisk:** display label for donors ([bba5ae8](https://github.com/ydb-platform/ydb-embedded-ui/commit/bba5ae8e44347a5b1d9cb72424f5a963a6848e59))
+
+
+### Bug Fixes
+
+* **InfoViewer:** add size_s ([fc06451](https://github.com/ydb-platform/ydb-embedded-ui/commit/fc0645118f64a79f660d734c2ff43c42c738fd40))
+* **PDisk:** new popup design ([9c0355d](https://github.com/ydb-platform/ydb-embedded-ui/commit/9c0355d4d9ccf69d43a5287b0e78d7c7993c4a18))
+* **PDisk:** restrict component interface ([328efa9](https://github.com/ydb-platform/ydb-embedded-ui/commit/328efa90d214eca1bceeeb5bd9099aab36a3ddb0))
+* **Storage:** shrink tooltip active area on Pool Name ([30a2b92](https://github.com/ydb-platform/ydb-embedded-ui/commit/30a2b92ff598d9caeabe17a4b8de214943945a91))
+* **VDisk:** add a missing prop type ([39b6cf3](https://github.com/ydb-platform/ydb-embedded-ui/commit/39b6cf38811cab6c4374c77d3eb63c11fa7b83d5))
+* **VDisk:** don't paint donors blue ([6b148b9](https://github.com/ydb-platform/ydb-embedded-ui/commit/6b148b914663a74e528a01a35f575f87ed6e9f09))
+* **VDisk:** new popup design ([107b139](https://github.com/ydb-platform/ydb-embedded-ui/commit/107b13900b08631ea42034a6a2f7961c49c86556))
+
 ## [1.10.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.2...v1.10.3) (2022-08-23)
 
 

package/dist/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -1,5 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
-import {InfoViewer, createInfoFormatter} from '../InfoViewer';
+import {InfoViewer, createInfoFormatter, InfoViewerItem} from '../InfoViewer';
 
 const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
     'Type',
@@ -34,7 +34,7 @@ export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
-    const info: Array<{label?: string, value?: unknown}> = [];
+    const info: Array<InfoViewerItem> = [];
 
     let key: keyof TIndexDescription;
     for (key in TableIndex) {

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,18 +1,23 @@
 .info-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    --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-title-font-weight: 600;
+    --ydb-info-viewer-title-margin: 15px 0 10px;
+    --ydb-info-viewer-items-gap: 7px;
+
+    font-size: var(--ydb-info-viewer-font-size);
+    line-height: var(--ydb-info-viewer-line-height);
+
     &__title {
-        margin: 15px 0 10px;
+        margin: var(--ydb-info-viewer-title-margin);
 
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
+        font-weight: var(--ydb-info-viewer-title-font-weight);
     }
 
     &__items {
         display: flex;
         flex-direction: column;
-        gap: 7px;
+        gap: var(--ydb-info-viewer-items-gap);
 
         max-width: 100%;
     }
@@ -51,4 +56,24 @@
 
         white-space: nowrap;
     }
+
+    &_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-title-font-weight: 500;
+            --ydb-info-viewer-title-margin: 0 0 4px;
+            --ydb-info-viewer-items-gap: 4px;
+
+            .info-viewer {
+                &__row {
+                    height: auto;
+                }
+
+                &__label {
+                    min-width: 85px;
+                }
+            }
+        }
+    }
 }

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+import './InfoViewer.scss';
+
+export interface InfoViewerItem {
+    label: string;
+    value: ReactNode;
+}
+
+interface InfoViewerProps {
+    title?: string;
+    info?: InfoViewerItem[];
+    dots?: boolean;
+    size?: 's';
+    className?: string;
+}
+
+const b = cn('info-viewer');
+
+const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps) => (
+    <div className={b({size}, className)}>
+        {title && <div className={b('title')}>{title}</div>}
+        {info && info.length > 0 ? (
+            <div className={b('items')}>
+                {info.map((data, infoIndex) => (
+                    <div className={b('row')} key={data.label + infoIndex}>
+                        <div className={b('label')}>
+                            {data.label}
+                            {dots && <div className={b('dots')} />}
+                        </div>
+
+                        <div className={b('value')}>{data.value}</div>
+                    </div>
+                ))}
+            </div>
+        ) : (
+            <>no {title} data</>
+        )}
+    </div>
+);
+
+export default InfoViewer;

package/dist/components/InfoViewer/index.ts

@@ -2,3 +2,4 @@ import InfoViewer from './InfoViewer';
 
 export {InfoViewer};
 export * from './utils';
+export type {InfoViewerItem} from './InfoViewer';

package/dist/components/InfoViewer/utils.ts

@@ -1,9 +1,11 @@
+import type {ReactNode} from "react";
+
 type LabelMap<T> = {
     [label in keyof T]?: string;
 }
 
 type ValueFormatters<T> = {
-    [label in keyof T]?: (value: T[label]) => string | undefined;
+    [label in keyof T]?: (value: T[label]) => ReactNode;
 }
 
 function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
@@ -14,18 +16,18 @@ function formatValue<Shape, Key extends keyof Shape>(
     label: Key,
     value: Shape[Key],
     formatters: ValueFormatters<Shape>,
-    defaultFormatter?: (value: Shape[Key]) => string | undefined,
+    defaultFormatter?: (value: Shape[Key]) => ReactNode,
 ) {
     const formatter = formatters[label] || defaultFormatter;
     const formattedValue = formatter ? formatter(value) : value;
 
-    return String(formattedValue ?? '');
+    return formattedValue;
 }
 
 interface CreateInfoFormatterOptions<Shape> {
     values?: ValueFormatters<Shape>,
     labels?: LabelMap<Shape>,
-    defaultValueFormatter?: (value: Shape[keyof Shape]) => string | undefined,
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode,
 }
 
 export function createInfoFormatter<Shape extends Record<string, any>>({

package/dist/components/Stack/Stack.scss

@@ -0,0 +1,55 @@
+.stack {
+    --ydb-stack-base-z-index: 100;
+    --ydb-stack-offset-x: 4px;
+    --ydb-stack-offset-y: 4px;
+    --ydb-stack-offset-x-hover: 4px;
+    --ydb-stack-offset-y-hover: 8px;
+
+    position: relative;
+
+    &__layer {
+        transition: transform 0.1s ease-out;
+
+        &:first-child {
+            position: relative;
+            z-index: var(--ydb-stack-base-z-index);
+        }
+
+        & + & {
+            position: absolute;
+            z-index: calc(var(--ydb-stack-base-z-index) - var(--ydb-stack-level));
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            transform: translate(
+                calc(var(--ydb-stack-level) * var(--ydb-stack-offset-x)),
+                calc(var(--ydb-stack-level) * var(--ydb-stack-offset-y))
+            );
+        }
+    }
+
+    &:hover {
+        .stack__layer:first-child {
+            transform: translate(
+                calc(-1 * var(--ydb-stack-offset-x-hover)),
+                calc(-1 * var(--ydb-stack-offset-y-hover))
+            );
+        }
+
+        .stack__layer + .stack__layer {
+            transform: translate(
+                calc(
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-x-hover) * 2) -
+                        var(--ydb-stack-offset-x-hover)
+                ),
+                calc(
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-y-hover) * 2) -
+                        var(--ydb-stack-offset-y-hover)
+                )
+            );
+        }
+    }
+}

package/dist/components/Stack/Stack.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import './Stack.scss';
+
+interface StackProps {
+    className?: string;
+}
+
+const LAYER_CSS_VAR = '--ydb-stack-level';
+
+const b = cn('stack');
+
+export const Stack: React.FC<StackProps> = ({children, className}) => (
+    <div className={b(null, className)}>
+        {
+            React.Children.map(children, (child, index) => {
+                if (!React.isValidElement(child)) {
+                    return null;
+                }
+
+                return (
+                    <div
+                        className={b('layer')}
+                        style={{
+                            [LAYER_CSS_VAR]: index,
+                        } as React.CSSProperties}
+                    >
+                        {child}
+                    </div>
+                );
+            })
+        }
+    </div>
+);

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -7,6 +7,8 @@
     width: 100%;
     height: var(--yc-text-body-2-line-height);
 
+    vertical-align: top;
+
     border: 1px solid var(--yc-color-infographics-misc-medium);
     border-radius: 2px;
     background-color: var(--yc-color-infographics-misc-light);

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -46,6 +46,11 @@ function DiskStateProgressBar({
                     ? b({[diskProgressColors[severity].toLowerCase()]: true})
                     : undefined
             }
+            role="meter"
+            aria-label="Disk allocated space"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={diskAllocatedPercent}
         >
             {href ? (
                 <InternalLink to={href} className={b('link')}>

package/dist/containers/Storage/Pdisk/Pdisk.scss

@@ -11,25 +11,8 @@
     &:last-child {
         margin-right: 0px;
     }
-    &__popup-wrapper {
-        padding: 5px 10px;
-    }
-    &__popup-content {
-        display: grid;
-        justify-items: stretch;
-        column-gap: 5px;
-    }
-    &__popup-section-name {
-        grid-column: 1 / 3;
-
-        margin: 5px 0;
 
-        font-weight: 500;
-        text-align: center;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
-    }
-    &__property {
-        text-align: right;
+    &__popup-wrapper {
+        padding: 12px;
     }
 }

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
 import {Popup} from '@yandex-cloud/uikit';
+
+import type {RequiredField} from '../../../types';
 //@ts-ignore
 import {bytesToGB} from '../../../utils/utils';
 //@ts-ignore
@@ -10,6 +11,7 @@ import routes, {createHref} from '../../../routes';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
+import {InfoViewer} from '../../../components/InfoViewer';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -38,7 +40,7 @@ const stateSeverity = {
     [TPDiskState.DeviceIoError]: 5,
 };
 
-type PDiskProps = TPDiskStateInfo;
+type PDiskProps = RequiredField<TPDiskStateInfo, 'NodeId'>;
 
 const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
     key !== undefined && key in stateSeverity;
@@ -76,51 +78,46 @@ function Pdisk(props: PDiskProps) {
             diskProgressColors[colorSeverity.Yellow as keyof typeof diskProgressColors],
         ];
 
-        const pdiskData: {property: string; value: string | number}[] = [
-            {property: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        const pdiskData: {label: string; value: string | number}[] = [
+            {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
         ];
 
-        pdiskData.push({property: 'State', value: State || 'not available'});
-        pdiskData.push({property: 'Type', value: getPDiskType(props) || 'unknown'});
-        NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
+        pdiskData.push({label: 'State', value: State || 'not available'});
+        pdiskData.push({label: 'Type', value: getPDiskType(props) || 'unknown'});
+        NodeId && pdiskData.push({label: 'Node Id', value: NodeId});
 
-        Path && pdiskData.push({property: 'Path', value: Path});
+        Path && pdiskData.push({label: 'Path', value: Path});
         pdiskData.push({
-            property: 'Available',
+            label: 'Available',
             value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
         });
         Realtime &&
             errorColors.includes(Realtime) &&
-            pdiskData.push({property: 'Realtime', value: Realtime});
+            pdiskData.push({label: 'Realtime', value: Realtime});
         Device &&
             errorColors.includes(Device) &&
-            pdiskData.push({property: 'Device', value: Device});
+            pdiskData.push({label: 'Device', value: Device});
         return pdiskData;
     };
     /* eslint-enable */
 
-    const renderPopup = () => {
-        const pdiskData = preparePdiskData();
-        return (
-            <Popup
-                className={b('popup-wrapper')}
-                anchorRef={anchor}
-                open={isPopupVisible}
-                placement={['top', 'bottom']}
-                hasArrow
-            >
-                <div className={b('popup-content')}>
-                    <div className={b('popup-section-name')}>PDisk</div>
-                    {_.map(pdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                </div>
-            </Popup>
-        );
-    };
+    const renderPopup = () => (
+        <Popup
+            className={b('popup-wrapper')}
+            anchorRef={anchor}
+            open={isPopupVisible}
+            placement={['top', 'bottom']}
+            // bigger offset for easier switching to neighbour nodes
+            // matches the default offset for popup with arrow out of a sense of beauty
+            offset={[0, 12]}
+        >
+            <InfoViewer
+                title="PDisk"
+                info={preparePdiskData()}
+                size="s"
+            />
+        </Popup>
+    );
 
     const pdiskAllocatedPercent = useMemo(() => {
         const {AvailableSize, TotalSize} = props;

package/dist/containers/Storage/Pdisk/__tests__/colors.tsx

@@ -0,0 +1,40 @@
+import {render} from '@testing-library/react'
+import {MemoryRouter} from 'react-router-dom';
+
+import {TPDiskState} from '../../../../types/api/storage'
+
+import PDisk from '../Pdisk'
+
+describe('PDisk state', () => {
+    it('Should determine severity based on State', () => {
+        const {getAllByRole} = render(
+            <MemoryRouter>
+                <PDisk
+                    NodeId={1}
+                    State={TPDiskState.Normal}
+                />
+                <PDisk
+                    NodeId={2}
+                    State={TPDiskState.ChunkQuotaError}
+                />
+            </MemoryRouter>
+        );
+
+        const [normalDisk, erroredDisk] = getAllByRole('meter');
+
+        expect(normalDisk.className).not.toBe(erroredDisk.className);
+    });
+
+    it('Should display as unavailabe when no State is provided', () => {
+        const {getByRole} = render(
+            <MemoryRouter>
+                <PDisk NodeId={1} />
+            </MemoryRouter>
+        );
+
+        const disk = getByRole('meter');
+
+        // unavailable disks display with the highest severity
+        expect(disk.className).toMatch(/_red\b/i);
+    });
+});

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -1,25 +1,53 @@
 .global-storage-groups {
+    &__vdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__vdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: center;
 
         min-width: 500px;
     }
+    &__vdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0px;
+        }
+
+        .stack__layer {
+            background: var(--yc-color-base-background);
+
+            .data-table__row:hover & {
+                background: var(--yc-color-base-float-hover);
+            }
+        }
+    }
     &__pool-name-wrapper {
         display: flex;
         align-items: flex-end;
+
+        width: 230px;
     }
     &__pool-name {
         display: inline-block;
         overflow: hidden;
 
-        width: 230px;
         max-width: 230px;
 
+        vertical-align: top;
         text-overflow: ellipsis;
     }
+    &__usage-label {
+        &_overload {
+            color: var(--yc-color-text-light-primary);
+            background-color: var(--yc-color-base-danger-heavy);
+        }
+    }
     &__group-id {
         font-weight: 500;
     }