ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,275 +0,0 @@
-import React, {useEffect, useState, useRef, useMemo} from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import {Label, Popup} from '@gravity-ui/uikit';
-
-import InternalLink from '../../../components/InternalLink/InternalLink';
-import {InfoViewer} from '../../../components/InfoViewer';
-
-import routes, {createHref} from '../../../routes';
-import {stringifyVdiskId, getPDiskId} from '../../../utils';
-import {getPDiskType} from '../../../utils/pdisk';
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-
-import {STRUCTURE} from '../../Node/NodePages';
-
-import DiskStateProgressBar, {
-    diskProgressColors,
-} from '../DiskStateProgressBar/DiskStateProgressBar';
-
-import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
-
-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,
-    VDiskId: PropTypes.object,
-    DonorMode: PropTypes.bool,
-    nodes: PropTypes.object,
-};
-
-const stateSeverity = {
-    Initial: 3,
-    LocalRecoveryError: 5,
-    SyncGuidRecoveryError: 5,
-    SyncGuidRecovery: 3,
-    PDiskError: 5,
-    OK: 1,
-};
-
-const getStateSeverity = (vDiskState) => {
-    return stateSeverity[vDiskState] ?? NOT_AVAILABLE_SEVERITY;
-};
-
-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();
-
-    // determine disk status severity
-    useEffect(() => {
-        const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = props;
-
-        // if the disk is not available, this determines its status severity regardless of other features
-        if (!VDiskState) {
-            setSeverity(NOT_AVAILABLE_SEVERITY);
-            return;
-        }
-
-        const DiskSpaceSeverity = getColorSeverity(DiskSpace);
-        const VDiskSpaceSeverity = getStateSeverity(VDiskState);
-        const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
-
-        let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
-
-        // donors are always in the not replicated state since they are leftovers
-        // painting them blue is useless
-        if (!Replicated && !DonorMode && 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 = [{label: 'VDisk', value: stringifyVdiskId(VDiskId)}];
-        vdiskData.push({label: 'State', value: VDiskState ?? 'not available'});
-        PoolName && vdiskData.push({label: 'StoragePool', value: PoolName});
-
-        SatisfactionRank &&
-            SatisfactionRank.FreshRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({
-                label: 'Fresh',
-                value: SatisfactionRank.FreshRank.Flag,
-            });
-
-        SatisfactionRank &&
-            SatisfactionRank.LevelRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({
-                label: 'Level',
-                value: SatisfactionRank.LevelRank.Flag,
-            });
-
-        SatisfactionRank &&
-            SatisfactionRank.FreshRank?.RankPercent &&
-            vdiskData.push({
-                label: 'Fresh',
-                value: SatisfactionRank.FreshRank.RankPercent,
-            });
-
-        SatisfactionRank &&
-            SatisfactionRank.LevelRank?.RankPercent &&
-            vdiskData.push({
-                label: 'Level',
-                value: SatisfactionRank.LevelRank.RankPercent,
-            });
-
-        DiskSpace &&
-            DiskSpace !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({label: 'Space', value: DiskSpace});
-
-        FrontQueues &&
-            FrontQueues !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({label: 'FrontQueues', value: FrontQueues});
-
-        !Replicated && vdiskData.push({label: 'Replicated', value: 'NO'});
-
-        UnsyncedVDisks && vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
-
-        Boolean(Number(AllocatedSize)) &&
-            vdiskData.push({
-                label: 'Allocated',
-                value: bytesToGB(AllocatedSize),
-            });
-
-        Boolean(Number(ReadThroughput)) &&
-            vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
-
-        Boolean(Number(WriteThroughput)) &&
-            vdiskData.push({
-                label: '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 = [{label: 'PDisk', value: getPDiskId(PDisk)}];
-            pdiskData.push({
-                label: 'State',
-                value: PDisk.State || 'not available',
-            });
-            pdiskData.push({label: 'Type', value: getPDiskType(PDisk) || 'unknown'});
-            PDisk.NodeId && pdiskData.push({label: 'Node Id', value: PDisk.NodeId});
-            PDisk.NodeId &&
-                nodes[PDisk.NodeId] &&
-                pdiskData.push({label: 'Host', value: nodes[PDisk.NodeId]});
-            PDisk.Path && pdiskData.push({label: 'Path', value: PDisk.Path});
-            pdiskData.push({
-                label: 'Available',
-                value: `${bytesToGB(PDisk.AvailableSize)} of ${bytesToGB(PDisk.TotalSize)}`,
-            });
-            errorColors.includes(PDisk.Realtime) &&
-                pdiskData.push({label: 'Realtime', value: PDisk.Realtime});
-            errorColors.includes(PDisk.Device) &&
-                pdiskData.push({label: 'Device', value: PDisk.Device});
-            return pdiskData;
-        }
-        return null;
-    };
-    /* eslint-enable */
-
-    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]}
-        >
-            {props.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
-            <InfoViewer
-                title="VDisk"
-                info={prepareVdiskData()}
-                size="s"
-            />
-            <InfoViewer
-                title="PDisk"
-                info={preparePdiskData()}
-                size="s"
-            />
-        </Popup>
-    );
-
-    const vdiskAllocatedPercent = useMemo(() => {
-        const {AvailableSize, AllocatedSize, PDisk} = props;
-        const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
-
-        if (!available) {
-            return undefined;
-        }
-
-        return isNaN(Number(AllocatedSize))
-            ? undefined
-            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
-    }, [props.AllocatedSize, props.AvailableSize, props.PDisk?.AvailableSize]);
-
-    return (
-        <React.Fragment>
-            {renderPopup()}
-            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                {props.NodeId ? (
-                    <InternalLink
-                        to={createHref(
-                            routes.node,
-                            {id: props.NodeId, activeTab: STRUCTURE},
-                            {
-                                pdiskId: props.PDisk?.PDiskId,
-                                vdiskId: stringifyVdiskId(props.VDiskId),
-                            },
-                        )}
-                        className={b('content')}
-                    >
-                        <DiskStateProgressBar
-                            diskAllocatedPercent={vdiskAllocatedPercent}
-                            severity={severity}
-                        />
-                    </InternalLink>
-                ) : (
-                    <DiskStateProgressBar
-                        diskAllocatedPercent={vdiskAllocatedPercent}
-                        severity={severity}
-                    />
-                )}
-            </div>
-        </React.Fragment>
-    );
-}
-
-Vdisk.propTypes = propTypes;
-
-export default Vdisk;

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -1,22 +0,0 @@
-.vdisk-storage {
-    border-radius: 4px; // to match interactive area with disk shape
-
-    &__content {
-        border-radius: 4px; // to match interactive area with disk shape
-    }
-
-    &__popup-wrapper {
-        padding: 12px;
-
-        .info-viewer + .info-viewer {
-            margin-top: 8px;
-            padding-top: 8px;
-
-            border-top: 1px solid var(--yc-color-line-generic);
-        }
-    }
-
-    &__donor-label {
-        margin-bottom: 8px;
-    }
-}

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

@@ -1,163 +0,0 @@
-import {renderWithStore} from '../../../../utils/tests/providers';
-
-import VDisk from '../Vdisk'
-
-describe('VDisk state', () => {
-    it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    VDiskId={{Domain: 1}}
-                    VDiskState="OK" // severity 1, green
-                    DiskSpace="Yellow" // severity 3, yellow
-                    FrontQueues="Green" // severity 1, green
-                />
-                <VDisk
-                    VDiskId={{Domain: 2}}
-                    VDiskState="PDiskError" // severity 5, red
-                    DiskSpace="Yellow" // severity 3, yellow
-                    FrontQueues="Green" // severity 1, green
-                />
-                <VDisk
-                    VDiskId={{Domain: 3}}
-                    VDiskState="OK" // severity 1, green
-                    DiskSpace="Yellow" // severity 3, yellow
-                    FrontQueues="Orange" // severity 4, orange
-                />
-            </>
-        );
-
-        const [disk1, disk2, disk3] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_yellow\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-        expect(disk3.className).toMatch(/_orange\b/i);
-    });
-
-    it('Should not pick the highest severity based on FrontQueues value', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    VDiskId={{Domain: 1}}
-                    VDiskState="OK" // severity 1, green
-                    DiskSpace="Green" // severity 1, green
-                    FrontQueues="Red" // severity 5, red
-                />
-                <VDisk
-                    VDiskId={{Domain: 2}}
-                    VDiskState="OK" // severity 1, green
-                    DiskSpace="Red" // severity 5, red
-                    FrontQueues="Red" // severity 5, red
-                />
-            </>
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).not.toMatch(/_red\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-    });
-
-    it('Should display as unavailable when no VDiskState is provided', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk VDiskId={{Domain: 1}} />
-                <VDisk VDiskId={{Domain: 2}} VDiskState="OK" />
-                <VDisk VDiskId={{Domain: 3}}                 DiskSpace="Green" />
-                <VDisk VDiskId={{Domain: 4}}                                   FrontQueues="Green" />
-                <VDisk VDiskId={{Domain: 5}} VDiskState="OK" DiskSpace="Green" />
-                <VDisk VDiskId={{Domain: 6}} VDiskState="OK"                   FrontQueues="Green" />
-                <VDisk VDiskId={{Domain: 7}}                 DiskSpace="Green" FrontQueues="Green" />
-                <VDisk VDiskId={{Domain: 8}} VDiskState="OK" DiskSpace="Green" FrontQueues="Green" />
-            </>
-        );
-
-        const [disk1, disk2, disk3, disk4, disk5, disk6, disk7, disk8] = getAllByRole('meter');
-
-        // unavailable disks display with the highest severity
-        expect(disk1.className).toMatch(/_red\b/i);
-        expect(disk2.className).not.toMatch(/_red\b/i);
-        expect(disk3.className).toMatch(/_red\b/i);
-        expect(disk4.className).toMatch(/_red\b/i);
-        expect(disk5.className).not.toMatch(/_red\b/i);
-        expect(disk6.className).not.toMatch(/_red\b/i);
-        expect(disk7.className).toMatch(/_red\b/i);
-        expect(disk8.className).not.toMatch(/_red\b/i);
-    });
-
-    it('Should display replicating VDisks in OK state with a distinct color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    VDiskId={{Domain: 1}}
-                    VDiskState="OK" // severity 1, green
-                    Replicated={false}
-                />
-                <VDisk
-                    VDiskId={{Domain: 2}}
-                    VDiskState="OK" // severity 1, green
-                    Replicated={true}
-                />
-            </>
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_blue\b/i);
-        expect(disk2.className).not.toMatch(/_blue\b/i);
-    });
-
-    it('Should display replicating VDisks in a not-OK state with a regular color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    VDiskId={{Domain: 1}}
-                    VDiskState="Initial" // severity 3, yellow
-                    Replicated={false}
-                    />
-                <VDisk
-                    VDiskId={{Domain: 2}}
-                    VDiskState="PDiskError" // severity 5, red
-                    Replicated={false}
-                />
-            </>
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_yellow\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-    });
-
-    it('Should always display donor VDisks with a regular color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    VDiskId={{Domain: 1}}
-                    VDiskState="OK" // severity 1, green
-                    Replicated={false} // donors are always in the not replicated state since they are leftovers
-                    DonorMode
-                />
-                <VDisk
-                    VDiskId={{Domain: 2}}
-                    VDiskState="Initial" // severity 3, yellow
-                    Replicated={false}
-                    DonorMode
-                />
-                <VDisk
-                    VDiskId={{Domain: 3}}
-                    VDiskState="PDiskError" // severity 5, red
-                    Replicated={false}
-                    DonorMode
-                />
-            </>
-        );
-
-        const [disk1, disk2, disk3] = getAllByRole('meter');
-
-        expect(disk1.className).not.toMatch(/_blue\b/i);
-        expect(disk1.className).toMatch(/_green\b/i);
-        expect(disk2.className).toMatch(/_yellow\b/i);
-        expect(disk3.className).toMatch(/_red\b/i);
-    });
-});

package/dist/containers/Tenant/Diagnostics/Compute/Compute.js

@@ -1,139 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-
-import {Loader} from '@gravity-ui/uikit';
-
-import NodesViewer from '../../../NodesViewer/NodesViewer';
-
-import {backend} from '../../../../store';
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {getNodes, clearNodes, setDataWasNotLoaded} from '../../../../store/reducers/nodes';
-
-import './Compute.scss';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-const b = cn('compute');
-
-class Compute extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        clearNodes: PropTypes.func,
-        tenantName: PropTypes.string,
-        nodes: PropTypes.object,
-        loading: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        error: PropTypes.object,
-        wasLoaded: PropTypes.bool,
-        setDataWasNotLoaded: PropTypes.func,
-        getNodes: PropTypes.func,
-        hideTooltip: PropTypes.func,
-        showTooltip: PropTypes.func,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        const {getNodes, tenantName, autorefresh} = this.props;
-
-        this.autofetcher = new AutoFetcher();
-
-        if (tenantName) {
-            getNodes(tenantName);
-            if (autorefresh) {
-                this.autofetcher.start();
-                this.autofetcher.fetch(() => getNodes(tenantName));
-            }
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh, getNodes, setDataWasNotLoaded, tenantName} = this.props;
-
-        const restartAutorefresh = () => {
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => getNodes(tenantName));
-        };
-
-        if (tenantName !== prevProps.tenantName) {
-            setDataWasNotLoaded();
-            getNodes(tenantName);
-            if (autorefresh) {
-                restartAutorefresh();
-            }
-        }
-
-        if (autorefresh && !prevProps.autorefresh) {
-            getNodes(tenantName);
-            restartAutorefresh();
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.props.clearNodes();
-        this.autofetcher.stop();
-    }
-
-    renderLoader() {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    render() {
-        const {nodes, error, tenantName, wasLoaded, loading} = this.props;
-        if (!tenantName) {
-            return <div className="error">no tenant name in the query string</div>;
-        } else if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return (
-                <div className={b()}>
-                    <NodesViewer
-                        backend={backend}
-                        nodes={nodes}
-                        path={tenantName}
-                        hideTooltip={this.props.hideTooltip}
-                        showTooltip={this.props.showTooltip}
-                        additionalNodesInfo={this.props.additionalNodesInfo}
-                    />
-                </div>
-            );
-        }
-    }
-}
-
-function mapStateToProps(state, ownProps) {
-    const {data, loading, wasLoaded, error} = state.nodes;
-    const {autorefresh} = state.schema;
-    const nodes = (data && data.Tenants && data.Tenants[0] && data.Tenants[0].Nodes) || [];
-    return {
-        ...ownProps,
-        nodes,
-        loading,
-        wasLoaded,
-        error,
-        autorefresh,
-    };
-}
-
-const mapDispatchToProps = {
-    getNodes,
-    clearNodes,
-    hideTooltip,
-    showTooltip,
-    setDataWasNotLoaded,
-};
-
-const ConnectedCompute = connect(mapStateToProps, mapDispatchToProps)(Compute);
-
-export default ConnectedCompute;

package/dist/containers/Tenant/Diagnostics/Compute/Compute.scss

@@ -1,14 +0,0 @@
-@import '../../../../styles/mixins.scss';
-
-.compute {
-    overflow: auto;
-
-    height: 100%;
-    max-height: 100%;
-    @include flex-container();
-
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-}