ydb-embedded-ui 3.3.4 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [3.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.4...v3.4.0) (2023-02-17)
+
+
+### Features
+
+* **Diagnostics:** add Partitions tab ([914702b](https://github.com/ydb-platform/ydb-embedded-ui/commit/914702be7e8aea28fcdc9f2ddf1cb7356995146a))
+* **Diagnostics:** rework Consumers tab ([0dae9d8](https://github.com/ydb-platform/ydb-embedded-ui/commit/0dae9d84c254d556db2a0d18345fdc10c152172a))
+
+
+### Bug Fixes
+
+* add read and lag images ([a3f0648](https://github.com/ydb-platform/ydb-embedded-ui/commit/a3f0648fc4f23c2ac2c9e73c4078bf5f06d1a57e))
+* add reducer for consumer ([4ab65e3](https://github.com/ydb-platform/ydb-embedded-ui/commit/4ab65e3fb3dd4f29b4757473275ba84bec0f5411))
+* add SpeedMultiMeter component ([39acbf1](https://github.com/ydb-platform/ydb-embedded-ui/commit/39acbf1a1e234f36a090b29935872e694e1525c0))
+* **ResponseError:** make error prop optional ([f706e94](https://github.com/ydb-platform/ydb-embedded-ui/commit/f706e940e51e62841e18338775b01183831761e1))
+* **Storage:** display not full donors ([13f4b9f](https://github.com/ydb-platform/ydb-embedded-ui/commit/13f4b9fe9f796e8ef6fee094f7b5bc6056e2833b))
+* **Topic:** use SpeedMultiMeter and utils functions ([3e0293c](https://github.com/ydb-platform/ydb-embedded-ui/commit/3e0293cc5cf69c2dee5b6c4cdcf053829960dac5))
+* **utils:** add formatBytesCustom function ([2f18c22](https://github.com/ydb-platform/ydb-embedded-ui/commit/2f18c2233b37b666e16327af0ca8e20bccf01de6))
+
 ## [3.3.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.3...v3.3.4) (2023-02-16)
 
 

package/dist/components/Errors/ResponseError/ResponseError.tsx

@@ -3,7 +3,7 @@ import type {IResponseError} from '../../../types/api/error';
 import i18n from '../i18n';
 
 interface ResponseErrorProps {
-    error: IResponseError;
+    error?: IResponseError;
     className?: string;
     defaultMessage?: string;
 }
@@ -13,5 +13,5 @@ export const ResponseError = ({
     className,
     defaultMessage = i18n('responseError.defaultMessage'),
 }: ResponseErrorProps) => {
-    return <div className={`error ${className}`}>{error.statusText || defaultMessage}</div>;
+    return <div className={`error ${className}`}>{error?.statusText || defaultMessage}</div>;
 };

package/dist/components/InfoViewer/formatters/topicStats.tsx

@@ -1,45 +1,24 @@
-import type {MultipleWindowsStat} from '../../../types/api/consumer';
 import type {TopicStats} from '../../../types/api/topic';
 import {formatBytes} from '../../../utils';
-import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from '../../../utils/constants';
-
 import {
-    parseProtobufTimestampToMs,
-    parseProtobufDurationToMs,
+    parseLag,
+    parseTimestampToIdleTime,
     formatDurationToShortTimeFormat,
 } from '../../../utils/timeParsers';
+import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
 
-import {VerticalBars} from '../../VerticalBars/VerticalBars';
+import {SpeedMultiMeter} from '../../SpeedMultiMeter';
 
 import {createInfoFormatter} from '../utils';
 
-export const prepareBytesWritten = (data?: MultipleWindowsStat) => {
-    return {
-        per_minute:
-            data && data.per_minute ? Math.floor(Number(data.per_minute) / MINUTE_IN_SECONDS) : 0,
-        per_hour: data && data.per_hour ? Math.floor(Number(data.per_hour) / HOUR_IN_SECONDS) : 0,
-        per_day: data && data.per_day ? Math.floor(Number(data.per_day) / DAY_IN_SECONDS) : 0,
-    };
-};
-
 export const formatTopicStats = createInfoFormatter<TopicStats>({
     values: {
         store_size_bytes: formatBytes,
-        min_last_write_time: (value) => {
-            if (!value) {
-                return formatDurationToShortTimeFormat(0);
-            }
-
-            const durationMs = Date.now() - parseProtobufTimestampToMs(value);
-
-            // Duration could be negative because of the difference between server and local time
-            // Usually it below 100ms, so it could be omitted
-            return formatDurationToShortTimeFormat(durationMs < 0 ? 0 : durationMs);
-        },
-        max_write_time_lag: (value) =>
-            formatDurationToShortTimeFormat(value ? parseProtobufDurationToMs(value) : 0),
+        min_last_write_time: (value) =>
+            formatDurationToShortTimeFormat(parseTimestampToIdleTime(value)),
+        max_write_time_lag: (value) => formatDurationToShortTimeFormat(parseLag(value)),
         bytes_written: (value) =>
-            value && <VerticalBars values={Object.values(prepareBytesWritten(value))} />,
+            value && <SpeedMultiMeter data={convertBytesObjectToSpeed(value)} withValue={false} />,
     },
     labels: {
         store_size_bytes: 'Store size',

package/dist/components/LabelWithPopover/LabelWithPopover.tsx

@@ -0,0 +1,20 @@
+import type {ReactNode} from 'react';
+
+import {HelpPopover} from '@gravity-ui/uikit';
+
+interface LabelWithPopoverProps {
+    headerText: string;
+    popoverContent: ReactNode;
+    className?: string;
+}
+
+export const LabelWithPopover = ({
+    headerText,
+    popoverContent,
+    className,
+}: LabelWithPopoverProps) => (
+    <div className={className}>
+        {headerText}
+        <HelpPopover content={popoverContent} />
+    </div>
+);

package/dist/components/LabelWithPopover/index.ts

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

package/dist/components/LagImages/LagImages.tsx

@@ -0,0 +1,205 @@
+const STICK_START = 30;
+const STICK_SPACE = 70;
+const HEIGHT = 54;
+const WIDTH = 268;
+
+const READ_FILL = '#ADE8F5';
+const WRITE_FILL = '#f5be9d';
+
+interface DashArcProps {
+    width: number;
+    height: number;
+    transform?: string;
+}
+
+const DashArc = ({width, height, transform}: DashArcProps) => (
+    <path
+        d={`M-${width / 2} 0 c0 -${height}, ${width} -${height}, ${width} 0`}
+        fill="none"
+        strokeDasharray="4,6"
+        stroke="#28f"
+        strokeWidth="1.6"
+        transform={transform}
+    />
+);
+
+interface ArrowLineProps {
+    width: number;
+}
+
+const ArrowLine = ({width}: ArrowLineProps) => (
+    <path fill="none" strokeWidth="2" d={`M0 0 h${width} l-10 -5 m0 10 l10 -5`} />
+);
+
+const WriteLag = () => (
+    <g fill="var(--yc-color-text-primary)" fontSize="12">
+        <g transform={`translate(0, ${HEIGHT / 2})`} stroke={WRITE_FILL}>
+            <ArrowLine width={STICK_SPACE * 2.9} />
+        </g>
+
+        <g transform={`translate(${STICK_START}, 0)`}>
+            <g transform={`translate(${STICK_SPACE / 2}, ${HEIGHT / 2})`}>
+                <DashArc width={STICK_SPACE} height={15} />
+                <text x="0" y="-15" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        write lag
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${STICK_SPACE * 1.7}, ${HEIGHT / 2})`}>
+                <DashArc width={STICK_SPACE * 1.4} height={15} />
+                <text x="0" y="-15" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        write idle time
+                    </tspan>
+                </text>
+            </g>
+        </g>
+
+        <g transform={`translate(${STICK_START}, 0)`}>
+            <g transform={`translate(${0}, ${HEIGHT / 2})`}>
+                <use y="-10" xlinkHref="#check" stroke={WRITE_FILL} />
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        create time
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${STICK_SPACE}, ${HEIGHT / 2})`}>
+                <use y="-10" xlinkHref="#check" stroke={WRITE_FILL} />
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        write time
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${2.4 * STICK_SPACE}, ${HEIGHT / 2})`}>
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        now
+                    </tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+);
+
+const ReadLag = () => (
+    <g fill="var(--yc-color-text-primary)" fontSize="12">
+        <g transform={`translate(0, ${HEIGHT / 2})`} stroke={READ_FILL}>
+            <ArrowLine width={WIDTH} />
+        </g>
+
+        <g transform={`translate(${STICK_START}, 0)`}>
+            <g transform={`translate(${STICK_SPACE * 1.5}, ${HEIGHT / 2})`}>
+                <DashArc width={STICK_SPACE} height={15} />
+                <text x="0" y="-15" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        read lag
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${STICK_SPACE / 2}, ${HEIGHT / 2})`}>
+                <DashArc width={STICK_SPACE} height={15} />
+                <text x="0" y="-15" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        write lag
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${STICK_SPACE * 2.6}, ${HEIGHT / 2})`}>
+                <DashArc width={STICK_SPACE * 1.3} height={15} />
+                <text x="0" y="-15" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        read idle time
+                    </tspan>
+                </text>
+            </g>
+        </g>
+
+        <g transform={`translate(${STICK_START}, ${HEIGHT / 2})`}>
+            <g transform={`translate(${0}, 0)`}>
+                <use y="-10" xlinkHref="#check" stroke={READ_FILL} />
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        create time
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${STICK_SPACE}, 0)`}>
+                <use y="-10" xlinkHref="#check" stroke={READ_FILL} />
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        write time
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${2 * STICK_SPACE}, 0)`}>
+                <use x="-2" y="-10" xlinkHref="#check" stroke={READ_FILL} />
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        read time
+                    </tspan>
+                </text>
+            </g>
+            <g transform={`translate(${3.2 * STICK_SPACE}, 0)`}>
+                <text x="0" y="20" textAnchor="middle">
+                    <tspan x="0" dy="0">
+                        now
+                    </tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+);
+
+interface DashPatternProps {
+    id: string;
+    fill: string;
+}
+
+const DashPattern = ({id, fill}: DashPatternProps) => (
+    <pattern id={id} x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+        <path d="M0 5L5 0H8L0 8V5M5 8L8 5V8Z" fill={fill} />
+    </pattern>
+);
+
+export const WriteLagImage = () => (
+    <svg
+        className="paint"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+        width={WIDTH}
+        height={HEIGHT}
+    >
+        <defs>
+            <g id="check">
+                <path d="M0 3 v14" strokeWidth="2" />
+            </g>
+            <DashPattern id="latest-read" fill={READ_FILL} />
+            <DashPattern id="latest-write" fill={WRITE_FILL} />
+        </defs>
+        <WriteLag />
+    </svg>
+);
+
+export const ReadLagImage = () => (
+    <svg
+        className="paint"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+        width={WIDTH}
+        height={HEIGHT}
+    >
+        <defs>
+            <g id="check">
+                <path d="M0 3 v14" strokeWidth="2" />
+            </g>
+            <DashPattern id="latest-read" fill={READ_FILL} />
+            <DashPattern id="latest-write" fill={WRITE_FILL} />
+        </defs>
+        <ReadLag />
+    </svg>
+);

package/dist/components/LagImages/index.ts

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

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.scss

@@ -0,0 +1,92 @@
+.speed-multimeter {
+    display: flex;
+
+    width: 100%;
+
+    &__content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        line-height: 22px;
+    }
+
+    &__displayed-value {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        margin-right: 10px;
+    }
+
+    &__bars {
+        display: flex;
+        overflow: hidden;
+        flex-direction: column;
+        align-items: flex-start;
+
+        width: 32px;
+        margin-right: 5px;
+    }
+
+    &__bar-container {
+        width: 100%;
+        height: 6px;
+
+        &_highlighted {
+            background: var(--yc-color-line-generic);
+        }
+    }
+
+    &__bar {
+        min-width: 2px;
+        height: 100%;
+
+        &_color_light {
+            background: var(--yc-color-infographics-info-medium);
+        }
+
+        &_color_dark {
+            background: var(--yc-color-infographics-info-heavy);
+        }
+    }
+
+    &__bar-container + &__bar-container {
+        margin-top: 2px;
+    }
+
+    &__popover-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__popover-content {
+        padding: 10px;
+    }
+
+    &__popover-header {
+        display: block;
+
+        margin-bottom: 7px;
+
+        font-size: 18px;
+        line-height: 24px;
+    }
+
+    &__popover-row {
+        display: block;
+
+        font-size: 13px;
+        line-height: 18px;
+
+        &_color_primary {
+            color: var(--yc-color-text-primary);
+        }
+
+        &_color_secondary {
+            color: var(--yc-color-text-secondary);
+        }
+    }
+}

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx

@@ -0,0 +1,120 @@
+import {useState} from 'react';
+import cn from 'bem-cn-lite';
+import {Popover} from '@gravity-ui/uikit';
+
+import {formatBytesCustom, IBytesSizes, IProcessSpeedStats} from '../../utils/bytesParsers';
+
+import './SpeedMultiMeter.scss';
+
+import i18n from './i18n';
+
+const b = cn('speed-multimeter');
+
+interface SpeedMultiMeterProps {
+    data?: IProcessSpeedStats;
+    speedSize?: IBytesSizes;
+    withValue?: boolean;
+    withPopover?: boolean;
+}
+
+export const SpeedMultiMeter = ({
+    data,
+    speedSize = 'kb',
+    withValue = true,
+    withPopover = true,
+}: SpeedMultiMeterProps) => {
+    const {perMinute = 0, perHour = 0, perDay = 0} = data || {};
+    const rawValues = [perMinute, perHour, perDay];
+
+    const formatValue = (value: number) =>
+        formatBytesCustom({value: value, size: speedSize, isSpeed: true});
+
+    const formattedValues = [
+        {value: formatValue(perMinute), label: i18n('perMinute')},
+        {value: formatValue(perHour), label: i18n('perHour')},
+        {value: formatValue(perDay), label: i18n('perDay')},
+    ];
+
+    const [valueToDisplay, setValueToDisplay] = useState(perMinute);
+    const [highlightedValueIndex, setHighlightedValueIndex] = useState(withValue ? 0 : undefined);
+    const [highlightedContainerIndex, setHighlightedContainerIndex] = useState<
+        number | undefined
+    >();
+
+    const onEnterDiagram = (values: number[], index: number) => {
+        setValueToDisplay(values[index]);
+        setHighlightedValueIndex(index);
+        setHighlightedContainerIndex(index);
+    };
+
+    const onLeaveDiagram = () => {
+        setValueToDisplay(perMinute);
+        setHighlightedValueIndex(withValue ? 0 : undefined);
+        setHighlightedContainerIndex(undefined);
+    };
+
+    const isValueHighlighted = (index: number) => highlightedValueIndex === index;
+    const isContainerHighlighted = (index: number) => highlightedContainerIndex === index;
+
+    const getModifier = (flag: boolean) => (flag ? {color: 'primary'} : {color: 'secondary'});
+
+    const renderValues = () => {
+        const max = Math.max(...rawValues, 0) || 1;
+
+        return rawValues.map((value, index) => (
+            <div
+                key={index}
+                className={b('bar-container', {
+                    highlighted: isContainerHighlighted(index),
+                })}
+                onMouseEnter={onEnterDiagram.bind(null, rawValues, index)}
+            >
+                <div
+                    className={b('bar', {
+                        color: isValueHighlighted(index) ? 'dark' : 'light',
+                    })}
+                    style={{width: `${(100 * value) / max}%`}}
+                />
+            </div>
+        ));
+    };
+
+    const renderPopoverContent = () => {
+        return (
+            <div className={b('popover-content')}>
+                <span className={b('popover-header')}>{i18n('averageSpeed')}</span>
+                {formattedValues.map((formattedValue, index) => (
+                    <span
+                        key={index}
+                        className={b('popover-row', getModifier(isValueHighlighted(index)))}
+                    >
+                        {`${formattedValue.label}: ${formattedValue.value}`}
+                    </span>
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('content')}>
+                {withValue && (
+                    <div className={b('displayed-value')}>{formatValue(valueToDisplay)}</div>
+                )}
+                <div className={b('popover-container')}>
+                    <Popover
+                        content={renderPopoverContent()}
+                        placement={'bottom'}
+                        disabled={!withPopover}
+                        hasArrow={true}
+                        size="s"
+                    >
+                        <div className={b('bars')} onMouseLeave={onLeaveDiagram}>
+                            {renderValues()}
+                        </div>
+                    </Popover>
+                </div>
+            </div>
+        </div>
+    );
+};

package/dist/components/SpeedMultiMeter/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "averageSpeed": "Average speed",
+  "perMinute": "per minute",
+  "perHour": "per hour",
+  "perDay": "per day"
+}

package/dist/components/SpeedMultiMeter/i18n/index.ts

@@ -0,0 +1,13 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-components-speed-multimeter';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);
+
+

package/dist/components/SpeedMultiMeter/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "averageSpeed": "Средняя скорость",
+  "perMinute": "за минуту",
+  "perHour": "за час",
+  "perDay": "за день"
+}

package/dist/components/SpeedMultiMeter/index.ts

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

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -16,7 +16,7 @@ import {VisibleEntities} from '../../../store/reducers/storage';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 //@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
-import {getUsage, isFullDonorData} from '../../../utils/storage';
+import {getUsage, isFullVDiksData} from '../../../utils/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
@@ -257,26 +257,30 @@ function StorageGroups({
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as TVDiskStateInfo[], (el) => {
-                        const donors = Array.isArray(el.Donors)
-                            ? el.Donors.filter(isFullDonorData)
-                            : [];
+                        const donors = el.Donors;
 
-                        return donors.length > 0 ? (
+                        return donors && donors.length > 0 ? (
                             <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
                                 <VDisk
                                     data={el}
                                     poolName={row[TableColumnsIds.PoolName]}
                                     nodes={nodes}
                                 />
-                                {donors.map((donor) => (
-                                    <VDisk
-                                        data={donor}
-                                        // donor and acceptor are always in the same group
-                                        poolName={row[TableColumnsIds.PoolName]}
-                                        nodes={nodes}
-                                        key={stringifyVdiskId(donor.VDiskId)}
-                                    />
-                                ))}
+                                {donors.map((donor) => {
+                                    const isFullData = isFullVDiksData(donor);
+
+                                    return (
+                                        <VDisk
+                                            data={isFullData ? donor : {...donor, DonorMode: true}}
+                                            // donor and acceptor are always in the same group
+                                            poolName={row[TableColumnsIds.PoolName]}
+                                            nodes={nodes}
+                                            key={stringifyVdiskId(
+                                                isFullData ? donor.VDiskId : donor,
+                                            )}
+                                        />
+                                    );
+                                })}
                             </Stack>
                         ) : (
                             <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>