ydb-embedded-ui 0.1.0

package/dist/containers/StorageV2/StorageNodes/StorageNodes.tsx

@@ -0,0 +1,135 @@
+import _ from 'lodash';
+import cn from 'bem-cn-lite';
+import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
+//@ts-ignore
+import {VisibleEntities} from '../../../store/reducers/storage';
+import Pdisk from '../Pdisk/Pdisk';
+
+import './StorageNodes.scss';
+
+enum TableColumnsIds {
+    NodeId = 'NodeId',
+    FQDN = 'FQDN',
+    uptime = 'uptime',
+    PDisks = 'PDisks',
+    Missing = 'Missing',
+}
+
+type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
+type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
+
+interface StorageGroupsProps {
+    data: any;
+    nodes: any;
+    tableSettings: Settings;
+    visibleEntities: keyof typeof VisibleEntities;
+}
+
+const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
+    NodeId: 'Node ID',
+    FQDN: 'FQDN',
+    uptime: 'Uptime',
+    PDisks: 'PDisks',
+    Missing: 'Missing',
+};
+
+const b = cn('global-storage-groups');
+
+function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+    switch (visibleEntities) {
+        case VisibleEntities.All: {
+            return {
+                columnId: TableColumnsIds.NodeId,
+                order: DataTable.ASCENDING,
+            };
+        }
+        case VisibleEntities.Missing: {
+            return {
+                columnId: TableColumnsIds.Missing,
+                order: DataTable.DESCENDING,
+            };
+        }
+        default: {
+            return undefined;
+        }
+    }
+}
+
+function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps) {
+    const allColumns: Column<any>[] = [
+        {
+            name: TableColumnsIds.NodeId,
+            header: tableColumnsNames[TableColumnsIds.NodeId],
+            width: 100,
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.FQDN,
+            header: tableColumnsNames[TableColumnsIds.FQDN],
+            width: 350,
+            render: ({value}) => {
+                return (
+                    <div className={b('tooltip-wrapper')}>
+                        <Tooltip
+                            content={<span className={b('tooltip')}>{value as string}</span>}
+                            placement={['right']}
+                            behavior={TooltipBehavior.Immediate}
+                        >
+                            <span className={b('pool-name')}>{value as string}</span>
+                        </Tooltip>
+                    </div>
+                );
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: TableColumnsIds.uptime,
+            header: tableColumnsNames[TableColumnsIds.uptime],
+            width: 130,
+            sortAccessor: ({StartTime}) => -StartTime,
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.Missing,
+            header: tableColumnsNames[TableColumnsIds.Missing],
+            width: 100,
+            align: DataTable.CENTER,
+            defaultOrder: DataTable.DESCENDING,
+        },
+        {
+            name: TableColumnsIds.PDisks,
+            header: tableColumnsNames[TableColumnsIds.PDisks],
+            render: ({value, row}) => (
+                <div className={b('pdisks-wrapper')}>
+                    {_.map(value as any, (el) => (
+                        <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                    ))}
+                </div>
+            ),
+            align: DataTable.CENTER,
+            sortable: false,
+            width: 900,
+        },
+    ];
+
+    let columns = allColumns;
+
+    if (visibleEntities === VisibleEntities.Space) {
+        columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+    }
+
+    return data ? (
+        <DataTable
+            key={visibleEntities as string}
+            theme="internal"
+            data={data}
+            columns={columns}
+            settings={tableSettings}
+            initialSortOrder={setSortOrder(visibleEntities)}
+            emptyDataMessage="No such nodes."
+        />
+    ) : null;
+}
+
+export default StorageNodes;

package/dist/containers/StorageV2/Vdisk/Vdisk.js

@@ -0,0 +1,250 @@
+import React, {useEffect, useState, useRef, useMemo} from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+import {Popup} from '@yandex-cloud/uikit';
+
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import routes, {createHref} from '../../../routes';
+import {stringifyVdiskId, getPDiskId} from '../../../utils';
+import DiskStateProgressBar, {
+    diskProgressColors,
+} from '../DiskStateProgressBar/DiskStateProgressBar';
+
+import './Vdisk.scss';
+
+const b = cn('vdisk-storage');
+
+const propTypes = {
+    SatisfactionRank: PropTypes.object,
+    VDiskState: PropTypes.string,
+    DiskSpace: PropTypes.string,
+    FrontQueues: PropTypes.string,
+    Replicated: PropTypes.bool,
+    PoolName: PropTypes.string,
+};
+
+const stateSeverity = {
+    Initial: 3,
+    LocalRecoveryError: 5,
+    SyncGuidRecoveryError: 5,
+    SyncGuidRecovery: 3,
+    PDiskError: 5,
+    OK: 1,
+};
+
+const colorSeverity = {
+    Grey: 0,
+    Green: 1,
+    Blue: 2,
+    Yellow: 3,
+    Orange: 4,
+    Red: 5,
+};
+
+const getStateSeverity = (vDiskState) => {
+    return stateSeverity[vDiskState] ?? colorSeverity.Grey;
+};
+
+const getColorSeverity = (color) => {
+    return colorSeverity[color] ?? colorSeverity.Grey;
+};
+
+function Vdisk(props) {
+    const [severity, setSeverity] = useState(getStateSeverity(props.VDiskState));
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+
+    const anchor = useRef();
+
+    useEffect(() => {
+        const {DiskSpace, VDiskState, FrontQueues, Replicated} = props;
+        const DiskSpaceSeverity = getColorSeverity(DiskSpace);
+        const VDiskSpaceSeverity = getStateSeverity(VDiskState);
+        const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
+        let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
+        if (!Replicated && newSeverity === colorSeverity.Green) {
+            newSeverity = colorSeverity.Blue;
+        }
+        setSeverity(newSeverity);
+    }, [props.VDiskState, props.DiskSpace, props.FrontQueues, props.Replicated]);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+    /* eslint-disable */
+    const prepareVdiskData = () => {
+        const {
+            VDiskId,
+            VDiskState,
+            PoolName,
+            SatisfactionRank,
+            DiskSpace,
+            FrontQueues,
+            Replicated,
+            UnsyncedVDisks,
+            AllocatedSize,
+            ReadThroughput,
+            WriteThroughput,
+        } = props;
+        const vdiskData = [{property: 'VDisk', value: stringifyVdiskId(VDiskId)}];
+        vdiskData.push({property: 'State', value: VDiskState ?? 'not available'});
+        PoolName && vdiskData.push({property: 'StoragePool', value: PoolName});
+
+        SatisfactionRank &&
+            SatisfactionRank.FreshRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
+            vdiskData.push({
+                property: 'Fresh',
+                value: SatisfactionRank.FreshRank.Flag,
+            });
+
+        SatisfactionRank &&
+            SatisfactionRank.LevelRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
+            vdiskData.push({
+                property: 'Level',
+                value: SatisfactionRank.LevelRank.Flag,
+            });
+
+        SatisfactionRank &&
+            SatisfactionRank.FreshRank?.RankPercent &&
+            vdiskData.push({
+                property: 'Fresh',
+                value: SatisfactionRank.FreshRank.RankPercent,
+            });
+
+        SatisfactionRank &&
+            SatisfactionRank.LevelRank?.RankPercent &&
+            vdiskData.push({
+                property: 'Level',
+                value: SatisfactionRank.LevelRank.RankPercent,
+            });
+
+        DiskSpace &&
+            DiskSpace !== diskProgressColors[colorSeverity.Green] &&
+            vdiskData.push({property: 'Space', value: DiskSpace});
+
+        FrontQueues &&
+            FrontQueues !== diskProgressColors[colorSeverity.Green] &&
+            vdiskData.push({property: 'FrontQueues', value: FrontQueues});
+
+        !Replicated && vdiskData.push({property: 'Replicated', value: 'NO'});
+
+        UnsyncedVDisks && vdiskData.push({property: 'UnsyncVDisks', value: UnsyncedVDisks});
+
+        Boolean(Number(AllocatedSize)) &&
+            vdiskData.push({
+                property: 'Allocated',
+                value: bytesToGB(AllocatedSize),
+            });
+
+        Boolean(Number(ReadThroughput)) &&
+            vdiskData.push({property: 'Read', value: bytesToSpeed(ReadThroughput)});
+
+        Boolean(Number(WriteThroughput)) &&
+            vdiskData.push({
+                property: 'Write',
+                value: bytesToSpeed(WriteThroughput),
+            });
+
+        return vdiskData;
+    };
+
+    const preparePdiskData = () => {
+        const {PDisk, nodes} = props;
+        const errorColors = [
+            diskProgressColors[colorSeverity.Orange],
+            diskProgressColors[colorSeverity.Red],
+            diskProgressColors[colorSeverity.Yellow],
+        ];
+        if (PDisk && nodes) {
+            const pdiskData = [{property: 'PDisk', value: getPDiskId(PDisk)}];
+            pdiskData.push({
+                property: 'State',
+                value: PDisk.State || 'not available',
+            });
+            PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
+            PDisk.NodeId &&
+                nodes[PDisk.NodeId] &&
+                pdiskData.push({property: 'Host', value: nodes[PDisk.NodeId]});
+            PDisk.Path && pdiskData.push({property: 'Path', value: PDisk.Path});
+            pdiskData.push({
+                property: 'Available',
+                value: `${bytesToGB(PDisk.AvailableSize)} of ${bytesToGB(PDisk.TotalSize)}`,
+            });
+            errorColors.includes(PDisk.Realtime) &&
+                pdiskData.push({property: 'Realtime', value: PDisk.Realtime});
+            errorColors.includes(PDisk.Device) &&
+                pdiskData.push({property: 'Device', value: PDisk.Device});
+            return pdiskData;
+        }
+        return null;
+    };
+    /* eslint-enable */
+
+    const renderPopup = () => {
+        const vdiskData = prepareVdiskData();
+        const pdiskData = preparePdiskData();
+        return (
+            <Popup
+                className={b('popup-wrapper')}
+                anchorRef={anchor}
+                open={isPopupVisible}
+                placement={['top']}
+                hasArrow
+            >
+                <div className={b('popup-content')}>
+                    <div className={b('popup-section-name')}>VDisk</div>
+                    {_.map(vdiskData, (row) => (
+                        <React.Fragment key={row.property}>
+                            <div className={b('property')}>{row.property}</div>
+                            <div className={b('value')}>{row.value}</div>
+                        </React.Fragment>
+                    ))}
+                    <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 vdiskAllocatedPercent = useMemo(() => {
+        const {AvailableSize, AllocatedSize, PDisk} = props;
+        const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
+
+        if (!available) {
+            return;
+        }
+        return !isNaN(Number(AllocatedSize))
+            ? (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize))
+            : undefined;
+    }, [props.AllocatedSize, props.AvailableSize, props.PDisk?.AvailableSize]);
+
+    return (
+        <React.Fragment>
+            {renderPopup()}
+            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
+                <DiskStateProgressBar
+                    diskAllocatedPercent={vdiskAllocatedPercent}
+                    severity={severity}
+                    href={createHref(routes.vdisk, null, {
+                        vdiskId: stringifyVdiskId(props.VDiskId),
+                        pdiskId: props.PDisk?.PDiskId,
+                        nodeId: props.NodeId,
+                    })}
+                />
+            </div>
+        </React.Fragment>
+    );
+}
+
+Vdisk.propTypes = propTypes;
+
+export default Vdisk;

package/dist/containers/StorageV2/Vdisk/Vdisk.scss

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