ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/containers/Nodes/Nodes.js

@@ -1,213 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-
-import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, TextInput, Label} from '@gravity-ui/uikit';
-
-import {ProblemFilter} from '../../components/ProblemFilter';
-import {Illustration} from '../../components/Illustration';
-import {AccessDenied} from '../../components/Errors/403';
-import {UptimeFilter} from '../../components/UptimeFIlter';
-
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import {withSearch} from '../../HOCS';
-import {AUTO_RELOAD_INTERVAL, ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {getFilteredNodes} from '../../store/reducers/clusterNodes';
-import {getNodes, setNodesUptimeFilter} from '../../store/reducers/nodes';
-import {changeFilter} from '../../store/reducers/settings';
-import {setHeader} from '../../store/reducers/header';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {calcUptime} from '../../utils';
-import {getNodesColumns} from '../../utils/getNodesColumns';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
-
-import './Nodes.scss';
-
-const b = cn('cluster-nodes');
-
-class Nodes extends React.Component {
-    static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    static propTypes = {
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        getNodesList: PropTypes.func,
-        nodes: PropTypes.array,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
-        searchQuery: PropTypes.string,
-        handleSearchQuery: PropTypes.func,
-        problemFilter: PropTypes.string,
-        changeFilter: PropTypes.func,
-        setHeader: PropTypes.func,
-        className: PropTypes.string,
-        singleClusterMode: PropTypes.bool,
-        additionalNodesInfo: PropTypes.object,
-        nodesUptimeFilter: PropTypes.string,
-        setNodesUptimeFilter: PropTypes.func,
-    };
-
-    componentDidMount() {
-        const {getNodesList, setHeader} = this.props;
-        getNodesList();
-        this.reloadDescriptor = setInterval(() => getNodesList(), AUTO_RELOAD_INTERVAL);
-        setHeader([
-            {
-                text: CLUSTER_PAGES.nodes.title,
-                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-            },
-        ]);
-    }
-
-    componentWillUnmount() {
-        this.props.hideTooltip();
-        clearInterval(this.reloadDescriptor);
-    }
-
-    handleSearchQueryChange = (search) => {
-        this.props.handleSearchQuery(search);
-    };
-
-    handleProblemFilterChange = (value) => {
-        this.props.changeFilter(value);
-    };
-
-    handleUptimeFilterChange = (value) => {
-        this.props.setNodesUptimeFilter(value);
-    };
-
-    renderControls() {
-        const {nodes, searchQuery, problemFilter, nodesUptimeFilter} = this.props;
-
-        return (
-            <div className={b('controls')}>
-                <TextInput
-                    className={b('search')}
-                    placeholder="Host name"
-                    value={searchQuery}
-                    onUpdate={this.handleSearchQueryChange}
-                    hasClear
-                    autoFocus
-                />
-                <ProblemFilter value={problemFilter} onChange={this.handleProblemFilterChange} />
-                <UptimeFilter value={nodesUptimeFilter} onChange={this.handleUptimeFilterChange} />
-                <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
-            </div>
-        );
-    }
-
-    renderTable = () => {
-        const {
-            nodes = [],
-            problemFilter,
-            nodesUptimeFilter,
-            searchQuery,
-            showTooltip,
-            hideTooltip,
-            singleClusterMode,
-            additionalNodesInfo = {},
-        } = this.props;
-
-        const columns = getNodesColumns({
-            showTooltip,
-            hideTooltip,
-            singleClusterMode,
-            getNodeRef: additionalNodesInfo.getNodeRef,
-        });
-
-        let preparedNodes = searchQuery
-            ? nodes.filter((node) => {
-                  const re = new RegExp(searchQuery, 'i');
-                  return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;
-              })
-            : nodes;
-        preparedNodes = preparedNodes.map((node) => ({
-            ...node,
-            uptime: calcUptime(node.StartTime),
-        }));
-
-        if (preparedNodes.length === 0) {
-            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
-                return <Illustration name="thumbsUp" width="200" />;
-            }
-        }
-
-        return (
-            <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <DataTable
-                        theme="yandex-cloud"
-                        data={preparedNodes}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        initialSortOrder={{
-                            columnId: 'NodeId',
-                            order: DataTable.ASCENDING,
-                        }}
-                        emptyDataMessage="No such nodes"
-                    />
-                </div>
-            </div>
-        );
-    };
-
-    renderContent = () => {
-        return (
-            <div className={b(null, this.props.className)}>
-                {this.renderControls()}
-                {this.renderTable()}
-            </div>
-        );
-    };
-
-    render() {
-        const {loading, wasLoaded, error} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Nodes.renderLoader();
-        } else if (error) {
-            if (error.status === 403) {
-                return <AccessDenied />;
-            }
-
-            return <div>{error.statusText}</div>;
-        } else {
-            return this.renderContent();
-        }
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {wasLoaded, loading, error, nodesUptimeFilter} = state.nodes;
-
-    const nodes = getFilteredNodes(state);
-    return {
-        singleClusterMode: state.singleClusterMode,
-        nodes,
-        wasLoaded,
-        loading,
-        error,
-        problemFilter: state.settings.problemFilter,
-        nodesUptimeFilter,
-    };
-};
-
-const mapDispatchToProps = {
-    getNodesList: getNodes,
-    hideTooltip,
-    showTooltip,
-    changeFilter,
-    setHeader,
-    setNodesUptimeFilter,
-};
-
-export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Nodes));

package/dist/containers/NodesViewer/NodesViewer.js

@@ -1,163 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-
-import {TextInput, Label} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
-
-import {ProblemFilter} from '../../components/ProblemFilter';
-import {UptimeFilter} from '../../components/UptimeFIlter';
-import {Illustration} from '../../components/Illustration';
-
-import {withSearch} from '../../HOCS';
-import {calcUptime} from '../../utils';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {changeFilter} from '../../store/reducers/settings';
-import {filterNodesByStatusAndUptime} from '../../store/reducers/clusterNodes';
-import {setNodesUptimeFilter} from '../../store/reducers/nodes';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import {getNodesColumns} from '../../utils/getNodesColumns';
-
-import './NodesViewer.scss';
-
-const b = cn('nodes-viewer');
-
-class NodesViewer extends React.PureComponent {
-    static selectNodesToShow(nodes, searchQuery) {
-        let preparedNodes = nodes;
-        if (nodes && Array.isArray(nodes)) {
-            preparedNodes = nodes
-                .map((node) => {
-                    node.uptime = calcUptime(node.StartTime);
-                    return node;
-                })
-                /*  Filter by nodes with the Host field.
-                If a node does not have a Host field it is also
-                included in the filter and displayed with a dash in the corresponding column
-            */
-                .filter((node) => (node.Host ? node.Host.includes(searchQuery) : true));
-        }
-        return preparedNodes;
-    }
-
-    static propTypes = {
-        nodes: PropTypes.array.isRequired,
-        className: PropTypes.string,
-        searchQuery: PropTypes.string,
-        handleSearchQuery: PropTypes.func,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
-        problemFilter: PropTypes.string,
-        nodesUptimeFilter: PropTypes.string,
-        setNodesUptimeFilter: PropTypes.func,
-        changeFilter: PropTypes.func,
-        showControls: PropTypes.bool,
-        additionalNodesInfo: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-        showSearch: true,
-        showControls: true,
-    };
-
-    handleProblemFilterChange = (value) => {
-        this.props.changeFilter(value);
-    };
-
-    handleUptimeFilterChange = (value) => {
-        this.props.setNodesUptimeFilter(value);
-    };
-
-    renderControls() {
-        const {nodes, searchQuery, handleSearchQuery, nodesUptimeFilter, problemFilter} =
-            this.props;
-        const nodesToShow = NodesViewer.selectNodesToShow(nodes, searchQuery);
-
-        return (
-            <div className={b('controls')}>
-                <TextInput
-                    className={b('search')}
-                    size="s"
-                    placeholder="Host name…"
-                    value={searchQuery}
-                    onUpdate={handleSearchQuery}
-                    hasClear
-                    autoFocus
-                />
-                <ProblemFilter value={problemFilter} onChange={this.handleProblemFilterChange} />
-                <UptimeFilter value={nodesUptimeFilter} onChange={this.handleUptimeFilterChange} />
-                <Label theme="info" size="m">{`Nodes: ${nodesToShow.length}`}</Label>
-            </div>
-        );
-    }
-
-    render() {
-        const {
-            className,
-            searchQuery,
-            path,
-            problemFilter,
-            showControls,
-            hideTooltip,
-            showTooltip,
-            additionalNodesInfo = {},
-            nodes,
-        } = this.props;
-
-        const columns = getNodesColumns({
-            tabletsPath: path,
-            hideTooltip,
-            showTooltip,
-            getNodeRef: additionalNodesInfo.getNodeRef,
-        });
-
-        const nodesToShow = NodesViewer.selectNodesToShow(nodes, searchQuery);
-
-        return (
-            <div className={`${b()} ${className}`}>
-                {showControls ? this.renderControls() : null}
-                <div className={b('table-wrapper')}>
-                    {nodesToShow.length === 0 ? (
-                        <Illustration name="thumbsUp" width="200" />
-                    ) : (
-                        <div className={b('table-content')}>
-                            <DataTable
-                                theme="yandex-cloud"
-                                key={problemFilter}
-                                data={nodesToShow}
-                                columns={columns}
-                                settings={DEFAULT_TABLE_SETTINGS}
-                                emptyDataMessage="No such nodes"
-                            />
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state, ownProps) => {
-    const {nodesUptimeFilter} = state.nodes;
-    const {problemFilter} = state.settings;
-
-    const nodes = filterNodesByStatusAndUptime(ownProps.nodes, problemFilter, nodesUptimeFilter);
-
-    return {
-        problemFilter,
-        nodesUptimeFilter,
-        nodes,
-    };
-};
-
-const mapDispatchToProps = {
-    changeFilter,
-    hideTooltip,
-    showTooltip,
-    setNodesUptimeFilter,
-};
-
-const ConnectedNodesViewer = connect(mapStateToProps, mapDispatchToProps)(NodesViewer);
-export default withSearch(ConnectedNodesViewer);

package/dist/containers/NodesViewer/NodesViewer.scss

@@ -1,66 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.nodes-viewer {
-    overflow: auto;
-    @include flex-container();
-
-    &__controls {
-        @include controls;
-    }
-
-    &__name {
-        display: inline-block;
-
-        cursor: pointer;
-        text-decoration: none;
-
-        color: var(--yc-color-base-special);
-    }
-
-    &__search {
-        width: 255px;
-    }
-
-    &__progress {
-        margin: 0 auto;
-    }
-
-    &__tablets {
-        overflow-x: auto;
-
-        padding: 0 !important;
-
-        .tablets-viewer__grid {
-            justify-content: center;
-            grid-template-columns: 125px;
-        }
-    }
-
-    &__table-wrapper {
-        overflow: auto;
-        @include flex-container();
-    }
-
-    &__table-content {
-        overflow: auto;
-
-        height: 100%;
-        @include freeze-nth-column(1);
-        @include freeze-nth-column(2, 80px);
-        @include freeze-nth-column(3, 430px);
-
-        @include table-styles;
-        @include table-sticky-styles;
-    }
-    &__version-tooltip {
-        width: 100%;
-        span {
-            display: block;
-            overflow: hidden;
-
-            width: 100%;
-
-            text-overflow: ellipsis;
-        }
-    }
-}

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

@@ -1,153 +0,0 @@
-import React, {useEffect, useState, useRef, useMemo} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Popup} from '@gravity-ui/uikit';
-
-import {InfoViewer} from '../../../components/InfoViewer';
-import InternalLink from '../../../components/InternalLink/InternalLink';
-
-import routes, {createHref} from '../../../routes';
-import type {RequiredField} from '../../../types';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {getPDiskId} from '../../../utils';
-import {getPDiskType} from '../../../utils/pdisk';
-import {bytesToGB} from '../../../utils/utils';
-
-import {STRUCTURE} from '../../Node/NodePages';
-
-import DiskStateProgressBar, {
-    diskProgressColors,
-} from '../DiskStateProgressBar/DiskStateProgressBar';
-
-import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
-
-import './Pdisk.scss';
-
-const b = cn('pdisk-storage');
-
-const stateSeverity = {
-    [TPDiskState.Initial]: 0,
-    [TPDiskState.Normal]: 1,
-    [TPDiskState.InitialFormatRead]: 3,
-    [TPDiskState.InitialSysLogRead]: 3,
-    [TPDiskState.InitialCommonLogRead]: 3,
-    [TPDiskState.InitialFormatReadError]: 5,
-    [TPDiskState.InitialSysLogReadError]: 5,
-    [TPDiskState.InitialSysLogParseError]: 5,
-    [TPDiskState.InitialCommonLogReadError]: 5,
-    [TPDiskState.InitialCommonLogParseError]: 5,
-    [TPDiskState.CommonLoggerInitError]: 5,
-    [TPDiskState.OpenFileError]: 5,
-    [TPDiskState.ChunkQuotaError]: 5,
-    [TPDiskState.DeviceIoError]: 5,
-};
-
-type PDiskProps = RequiredField<TPDiskStateInfo, 'NodeId'>;
-
-const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
-    key !== undefined && key in stateSeverity;
-
-const getStateSeverity = (pDiskState?: TPDiskState) => {
-    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
-};
-
-function Pdisk(props: PDiskProps) {
-    const [severity, setSeverity] = useState(getStateSeverity(props.State));
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-
-    const anchor = useRef(null);
-
-    useEffect(() => {
-        const newSeverity = getStateSeverity(props.State);
-        if (severity !== newSeverity) {
-            setSeverity(newSeverity);
-        }
-    }, [props.State]);
-
-    const showPopup = () => {
-        setIsPopupVisible(true);
-    };
-
-    const hidePopup = () => {
-        setIsPopupVisible(false);
-    };
-    /* eslint-disable */
-    const preparePdiskData = () => {
-        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = props;
-        const errorColors = [
-            diskProgressColors[colorSeverity.Orange as keyof typeof diskProgressColors],
-            diskProgressColors[colorSeverity.Red as keyof typeof diskProgressColors],
-            diskProgressColors[colorSeverity.Yellow as keyof typeof diskProgressColors],
-        ];
-
-        const pdiskData: {label: string; value: string | number}[] = [
-            {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
-        ];
-
-        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({label: 'Path', value: Path});
-        pdiskData.push({
-            label: 'Available',
-            value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
-        });
-        Realtime &&
-            errorColors.includes(Realtime) &&
-            pdiskData.push({label: 'Realtime', value: Realtime});
-        Device && errorColors.includes(Device) && pdiskData.push({label: 'Device', value: Device});
-        return pdiskData;
-    };
-    /* 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]}
-        >
-            <InfoViewer title="PDisk" info={preparePdiskData()} size="s" />
-        </Popup>
-    );
-
-    const pdiskAllocatedPercent = useMemo(() => {
-        const {AvailableSize, TotalSize} = props;
-
-        if (!AvailableSize || !TotalSize) {
-            return undefined;
-        }
-
-        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
-            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
-            : undefined;
-    }, [props.AvailableSize, props.TotalSize]);
-
-    return (
-        <React.Fragment>
-            {renderPopup()}
-            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <InternalLink
-                    to={createHref(
-                        routes.node,
-                        {id: props.NodeId, activeTab: STRUCTURE},
-                        {pdiskId: props.PDiskId || ''},
-                    )}
-                    className={b('content')}
-                >
-                    <DiskStateProgressBar
-                        diskAllocatedPercent={pdiskAllocatedPercent}
-                        severity={severity as keyof typeof diskProgressColors}
-                    />
-                    <div className={b('media-type')}>{getPDiskType(props)}</div>
-                </InternalLink>
-            </div>
-        </React.Fragment>
-    );
-}
-
-export default Pdisk;

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

@@ -1,41 +0,0 @@
-import {MemoryRouter} from 'react-router-dom';
-
-import {renderWithStore} from '../../../../utils/tests/providers';
-
-import {TPDiskState} from '../../../../types/api/pdisk'
-
-import PDisk from '../Pdisk'
-
-describe('PDisk state', () => {
-    it('Should determine severity based on State', () => {
-        const {getAllByRole} = renderWithStore(
-            <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} = renderWithStore(
-            <MemoryRouter>
-                <PDisk NodeId={1} />
-            </MemoryRouter>
-        );
-
-        const disk = getByRole('meter');
-
-        // unavailable disks display with the highest severity
-        expect(disk.className).toMatch(/_red\b/i);
-    });
-});