ydb-embedded-ui 1.0.2 → 1.1.0

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -0,0 +1,148 @@
+@import '../../../styles/mixins.scss';
+
+.kv-node-structure {
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+    flex-shrink: 0;
+    @include body2-typography();
+
+    &__loader {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+    }
+
+    &__pdisk {
+        display: flex;
+        flex-direction: column;
+
+        width: 573px;
+        margin-bottom: 8px;
+        padding-left: 20px;
+
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: 5px;
+    }
+
+    &__pdisk-id {
+        display: flex;
+        align-items: flex-end;
+    }
+
+    &__pdisk-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        height: 48px;
+    }
+
+    &__pdisk-title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        font-weight: 600;
+    }
+
+    &__pdisk-details {
+        margin-bottom: 20px;
+    }
+
+    &__link {
+        text-decoration: none;
+
+        color: var(--yc-color-base-special);
+    }
+
+    &__vdisks-header {
+        font-weight: 600;
+    }
+
+    &__vdisks-container {
+        margin-bottom: 42px;
+    }
+
+    &__vdisk-details {
+        overflow: auto;
+
+        min-width: 200px;
+        max-height: 90vh;
+
+        .vdisk-pdisk-node__column {
+            margin-bottom: 0;
+        }
+        .vdisk-pdisk-node__section {
+            padding-bottom: 0;
+        }
+    }
+
+    &__vdisk-id {
+        display: flex;
+        align-items: center;
+
+        &_selected {
+            color: var(--yc-color-text-info);
+        }
+    }
+
+    &__vdisk-details-button {
+        &_selected {
+            color: var(--yc-color-text-info);
+        }
+    }
+
+    &__external-button {
+        display: inline-flex;
+        align-items: center;
+
+        margin-left: 4px;
+
+        transform: translateY(-1px);
+
+        .yc-button__text {
+            margin: 0 4px;
+        }
+
+        &_hidden {
+            visibility: hidden;
+        }
+    }
+
+    .data-table__row:hover {
+        .kv-node-structure__external-button_hidden {
+            visibility: visible;
+        }
+    }
+
+    &__selected-vdisk {
+        animation: onSelectedVdiskAnimation 4s;
+    }
+
+    &__row {
+        display: flex;
+    }
+
+    &__column {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 15px;
+    }
+
+    &__title {
+        margin-right: 16px;
+
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
+        text-transform: uppercase;
+    }
+}
+
+@keyframes onSelectedVdiskAnimation {
+    0% {
+        background-color: var(--yc-color-base-info-hover);
+    }
+}

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -0,0 +1,153 @@
+import {useEffect, useRef, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import url from 'url';
+import _ from 'lodash';
+
+import cn from 'bem-cn-lite';
+
+import {PDisk} from './Pdisk';
+import Loader from '../.././../components/Loader/Loader';
+
+import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
+
+import {AutoFetcher} from '../../../utils/autofetcher';
+
+import './NodeStructure.scss';
+
+const b = cn('kv-node-structure');
+
+export function valueIsDefined(value: any) {
+    return value !== null && value !== undefined;
+}
+
+function generateId({type, id}: {type: 'pdisk' | 'vdisk'; id: string}) {
+    return `${type}-${id}`;
+}
+
+interface NodeStructureProps {
+    nodeId: string;
+    className?: string;
+    additionalNodesInfo?: any;
+    scrollContainer: Element | null;
+}
+
+const autofetcher = new AutoFetcher();
+
+function NodeStructure(props: NodeStructureProps) {
+    const dispatch = useDispatch();
+
+    const nodeStructure: any = useSelector(selectNodeStructure);
+
+    const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
+    const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
+    const nodeData = useSelector(
+        (state: any) => state.node?.data?.SystemStateInfo?.[0]
+    );
+
+    const nodeHref = useMemo(() => {
+        return props.additionalNodesInfo?.getNodeRef
+            ? props.additionalNodesInfo.getNodeRef(nodeData)
+            : undefined;
+    }, [nodeData, props.additionalNodesInfo]);
+
+    const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
+        window.location.href,
+        true,
+    ).query;
+
+    const isReady = useRef(false);
+
+    const scrolled = useRef(false);
+
+    useEffect(() => {
+        return () => {
+            const {scrollContainer} = props;
+            if (scrollContainer) {
+                scrollContainer.scrollTo({
+                    behavior: 'smooth',
+                    top: 0,
+                });
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        dispatch(getNodeStructure(props.nodeId));
+        autofetcher.start();
+        autofetcher.fetch(() => dispatch(getNodeStructure(props.nodeId)));
+
+        return () => {
+            scrolled.current = false;
+            isReady.current = false;
+            autofetcher.stop();
+        };
+    }, [props.nodeId, dispatch]);
+
+    useEffect(() => {
+        if (!_.isEmpty(nodeStructure) && props.scrollContainer) {
+            isReady.current = true;
+        }
+    }, [nodeStructure, props.scrollContainer]);
+
+    useEffect(() => {
+        const {scrollContainer} = props;
+        if (isReady.current && !scrolled.current && scrollContainer) {
+            const element = document.getElementById(
+                generateId({type: 'pdisk', id: pdiskIdFromUrl as string}),
+            );
+
+            let scrollToVdisk = 0;
+
+            if (vdiskIdFromUrl) {
+                const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
+                const vDisk = vDisks?.find((el: any) => el.id === vdiskIdFromUrl);
+                const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
+                const order = vDisk?.order;
+
+                if (dataTable) {
+                    scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * (order + 1);
+                }
+            }
+
+            if (element) {
+                scrollContainer.scrollTo({
+                    behavior: 'smooth',
+                    // should subtract 20 to avoid sticking the element to tabs
+                    top: scrollToVdisk ? scrollToVdisk : element.offsetTop - 20,
+                });
+                scrolled.current = true;
+            }
+        }
+    }, [nodeStructure, props.scrollContainer, pdiskIdFromUrl, vdiskIdFromUrl]);
+
+    const renderStub = () => {
+        return 'There is no information about node structure.';
+    };
+
+    const renderStructure = () => {
+        const pDisksIds = Object.keys(nodeStructure);
+        return pDisksIds.length > 0
+            ? pDisksIds.map((pDiskId) => (
+                  <PDisk
+                      data={nodeStructure[pDiskId]}
+                      key={pDiskId}
+                      id={generateId({type: 'pdisk', id: pDiskId})}
+                      unfolded={pdiskIdFromUrl === pDiskId}
+                      selectedVdiskId={vdiskIdFromUrl as string}
+                      nodeHref={nodeHref}
+                  />
+              ))
+            : renderStub();
+    };
+
+    const renderContent = () => {
+        if (loadingStructure && !wasLoadedStructure) {
+            return <Loader size="m" />;
+        }
+        return renderStructure();
+    };
+
+    return <div className={b(null, props.className)}>{renderContent()}</div>;
+}
+
+export default NodeStructure;

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -0,0 +1,299 @@
+import {useState} from 'react';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+
+import {ArrowToggle, Button, Tooltip} from '@yandex-cloud/uikit';
+
+import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import Icon from '../../../components/Icon/Icon';
+import {Vdisk} from './Vdisk';
+
+import {bytesToGB, pad9} from '../../../utils/utils';
+import {formatStorageValuesToGb} from '../../../utils';
+
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {valueIsDefined} from './NodeStructure';
+
+const b = cn('kv-node-structure');
+
+interface PDiskProps {
+    data: Record<string, any>;
+    unfolded?: boolean;
+    id: string;
+    selectedVdiskId?: string;
+    nodeHref?: string;
+}
+
+enum VDiskTableColumnsIds {
+    slotId = 'VDiskSlotId',
+    VDiskState = 'VDiskState',
+    Size = 'Size',
+    Info = 'Info',
+}
+
+type VDiskTableColumnsIdsKeys = keyof typeof VDiskTableColumnsIds;
+type VDiskTableColumnsIdsValues = typeof VDiskTableColumnsIds[VDiskTableColumnsIdsKeys];
+
+const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
+    VDiskSlotId: 'Slot id',
+    VDiskState: 'Status',
+    Size: 'Size',
+    Info: '',
+};
+
+interface RowType {
+    id: string;
+    [VDiskTableColumnsIds.slotId]: number;
+    [VDiskTableColumnsIds.VDiskState]: string;
+    AllocatedSize: string;
+    AvailableSize: string;
+}
+
+function getColumns({
+    pDiskId,
+    selectedVdiskId,
+    nodeHref,
+}: {
+    pDiskId: number;
+    selectedVdiskId?: string;
+    nodeHref?: string;
+}) {
+    const columns: Column<RowType>[] = [
+        {
+            name: VDiskTableColumnsIds.slotId as string,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
+            width: 100,
+            render: ({value, row}) => {
+                let vdiskInternalViewerLink: string | undefined;
+
+                if (nodeHref && value !== undefined) {
+                    vdiskInternalViewerLink +=
+                        nodeHref + '/actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(value);
+                }
+
+                return (
+                    <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
+                        <span>{value as number}</span>
+                        {vdiskInternalViewerLink && (
+                            <Button
+                                size="s"
+                                className={b('external-button', {hidden: true})}
+                                href={vdiskInternalViewerLink}
+                                target="_blank"
+                            >
+                                <Icon name="external" />
+                            </Button>
+                        )}
+                    </div>
+                );
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: VDiskTableColumnsIds.VDiskState as string,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.VDiskState],
+            width: 70,
+            render: ({value}) => {
+                return <EntityStatus status={value === 'OK' ? 'green' : 'red'} />;
+            },
+            sortAccessor: (row) => (row[VDiskTableColumnsIds.VDiskState] === 'OK' ? 1 : 0),
+            align: DataTable.CENTER,
+        },
+        {
+            name: VDiskTableColumnsIds.Size as string,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.Size],
+            width: 100,
+            render: ({row}) => {
+                return (
+                    <ProgressViewer
+                        value={row.AllocatedSize}
+                        capacity={Number(row.AllocatedSize) + Number(row.AvailableSize)}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                    />
+                );
+            },
+            sortAccessor: (row) => Number(row.AllocatedSize),
+            align: DataTable.CENTER,
+        },
+        {
+            name: VDiskTableColumnsIds.Info as string,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
+            width: 70,
+            render: ({row}) => {
+                return (
+                    <Tooltip
+                        placement={['right']}
+                        content={<Vdisk {...row} />}
+                        contentClassName={b('vdisk-details')}
+                    >
+                        <Button
+                            view="clear"
+                            className={b('vdisk-details-button', {
+                                selected: row.id === selectedVdiskId,
+                            })}
+                        >
+                            <Icon name="information" viewBox="0 0 512 512" height={16} width={16} />
+                        </Button>
+                    </Tooltip>
+                );
+            },
+            sortable: false,
+        },
+    ];
+    return columns;
+}
+
+export function PDisk(props: PDiskProps) {
+    const [unfolded, setUnfolded] = useState(props.unfolded ?? false);
+
+    const data = props.data ?? {};
+
+    const onOpenPDiskDetails = () => {
+        setUnfolded(true);
+    };
+    const onClosePDiskDetails = () => {
+        setUnfolded(false);
+    };
+
+    const renderVDisks = () => {
+        const {selectedVdiskId, data, nodeHref} = props;
+        const {vDisks} = data;
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                data={vDisks}
+                columns={getColumns({nodeHref, pDiskId: data.PDiskId, selectedVdiskId})}
+                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false} as Settings}
+                rowClassName={(row) => {
+                    return row.id === selectedVdiskId ? b('selected-vdisk') : '';
+                }}
+            />
+        );
+    };
+
+    const renderPDiskDetails = () => {
+        if (_.isEmpty(data)) {
+            return <div>No information about PDisk</div>;
+        }
+        const {nodeHref} = props;
+        const {
+            TotalSize,
+            AvailableSize,
+            Device,
+            Guid,
+            PDiskId,
+            Path,
+            Realtime,
+            State,
+            Category,
+            SerialNumber,
+        } = data;
+
+        let pDiskInternalViewerLink: string | undefined;
+
+        if (nodeHref) {
+            pDiskInternalViewerLink += nodeHref + '/actors/pdisks/pdisk' + pad9(PDiskId);
+        }
+
+        const pdiskInfo: any = [
+            {
+                label: 'PDisk Id',
+                value: (
+                    <div className={b('pdisk-id')}>
+                        {PDiskId}
+                        {pDiskInternalViewerLink && (
+                            <Button
+                                size="s"
+                                className={b('external-button')}
+                                href={pDiskInternalViewerLink}
+                                target="_blank"
+                                view="clear"
+                            >
+                                <Icon name="external" />
+                            </Button>
+                        )}
+                    </div>
+                ),
+            },
+        ];
+        if (valueIsDefined(Path)) {
+            pdiskInfo.push({label: 'Path', value: Path});
+        }
+        if (valueIsDefined(Guid)) {
+            pdiskInfo.push({label: 'GUID', value: Guid});
+        }
+        if (valueIsDefined(Category)) {
+            pdiskInfo.push({label: 'Category', value: Category});
+        }
+        pdiskInfo.push({
+            label: 'Allocated Size',
+            value: bytesToGB(TotalSize - AvailableSize),
+        });
+        pdiskInfo.push({
+            label: 'Available Size',
+            value: bytesToGB(AvailableSize),
+        });
+        if (Number(TotalSize) >= 0 && Number(AvailableSize) >= 0) {
+            pdiskInfo.push({
+                label: 'Size',
+                value: (
+                    <ProgressViewer
+                        value={TotalSize - AvailableSize}
+                        capacity={TotalSize}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                        className={b('size')}
+                    />
+                ),
+            });
+        }
+        if (valueIsDefined(State)) {
+            pdiskInfo.push({label: 'State', value: State});
+        }
+        if (valueIsDefined(Device)) {
+            pdiskInfo.push({
+                label: 'Device',
+                value: <EntityStatus status={Device} />,
+            });
+        }
+        if (valueIsDefined(Realtime)) {
+            pdiskInfo.push({
+                label: 'Realtime',
+                value: <EntityStatus status={Realtime} />,
+            });
+        }
+        if (valueIsDefined(SerialNumber)) {
+            pdiskInfo.push({label: 'SerialNumber', value: SerialNumber});
+        }
+        return (
+            <div>
+                <InfoViewer className={b('pdisk-details')} info={pdiskInfo} />
+                <div className={b('vdisks-container')}>
+                    <div className={b('vdisks-header')}>VDisks</div>
+                    {renderVDisks()}
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className={b('pdisk')} id={props.id}>
+            <div className={b('pdisk-header')}>
+                <div className={b('pdisk-title-wrapper')}>
+                    <span>{data.Path}</span>
+                    <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
+                </div>
+                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="clear">
+                    <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
+                </Button>
+            </div>
+            {unfolded && renderPDiskDetails()}
+        </div>
+    );
+}