ydb-embedded-ui 4.3.0 → 4.4.0

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.js

@@ -1,526 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import _ from 'lodash';
-
-import {Link} from 'react-router-dom';
-import {Loader} from '@gravity-ui/uikit';
-
-import InfoViewer from '../../components/InfoViewer/InfoViewer';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
-import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
-import {AutoFetcher} from '../../utils/autofetcher';
-
-import {getVdiskInfo, clearStore as clearStoreVDisk} from '../../store/reducers/vdisk';
-import {getPdiskInfo, clearStore as clearStorePDisk} from '../../store/reducers/pdisk';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import {getNodeInfo} from '../../store/reducers/node';
-import {calcUptime, stringifyVdiskId, formatStorageValuesToGb} from '../../utils';
-import routes, {createHref} from '../../routes';
-import {bytesToSpeed, bytesToGB} from '../../utils/utils';
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './VdiskPdiskNode.scss';
-
-const b = cn('vdisk-pdisk-node');
-
-function valueIsDefined(value) {
-    return value !== null && value !== undefined;
-}
-
-export function Vdisk({
-    AllocatedSize,
-    DiskSpace,
-    FrontQueues,
-    Guid,
-    Replicated,
-    VDiskState,
-    VDiskId,
-    VDiskSlotId,
-    Kind,
-    SatisfactionRank,
-    AvailableSize,
-    HasUnreadableBlobs,
-    IncarnationGuid,
-    InstanceGuid,
-    StoragePoolName,
-    ReadThroughput,
-    WriteThroughput,
-}) {
-    const vdiskInfo = [];
-
-    if (valueIsDefined(VDiskSlotId)) {
-        vdiskInfo.push({label: 'VDisk Slot Id', value: VDiskSlotId});
-    }
-    if (valueIsDefined(Guid)) {
-        vdiskInfo.push({label: 'GUID', value: Guid});
-    }
-    if (valueIsDefined(Kind)) {
-        vdiskInfo.push({label: 'Kind', value: Kind});
-    }
-    if (valueIsDefined(VDiskState)) {
-        vdiskInfo.push({
-            label: 'VDisk State',
-            value: VDiskState,
-        });
-    }
-    if (valueIsDefined(DiskSpace)) {
-        vdiskInfo.push({
-            label: 'Disk Space',
-            value: <EntityStatus status={DiskSpace} />,
-        });
-    }
-    if (valueIsDefined(SatisfactionRank?.FreshRank.Flag)) {
-        vdiskInfo.push({
-            label: 'Fresh Rank Satisfaction',
-            value: <EntityStatus status={SatisfactionRank.FreshRank.Flag} />,
-        });
-    }
-    if (valueIsDefined(SatisfactionRank?.LevelRank.Flag)) {
-        vdiskInfo.push({
-            label: 'Level Rank Satisfaction',
-            value: <EntityStatus status={SatisfactionRank.LevelRank.Flag} />,
-        });
-    }
-    vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});
-    vdiskInfo.push({label: 'Allocated Size', value: bytesToGB(AllocatedSize)});
-    vdiskInfo.push({label: 'Available Size', value: bytesToGB(AvailableSize)});
-    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
-        vdiskInfo.push({
-            label: 'Size',
-            value: (
-                <ProgressViewer
-                    value={AllocatedSize}
-                    capacity={Number(AllocatedSize) + Number(AvailableSize)}
-                    formatValues={formatStorageValuesToGb}
-                    colorizeProgress={true}
-                    className={b('size')}
-                />
-            ),
-        });
-    }
-
-    vdiskInfo.push({
-        label: 'Has Unreadable Blobs',
-        value: HasUnreadableBlobs ? 'Yes' : 'No',
-    });
-    if (valueIsDefined(IncarnationGuid)) {
-        vdiskInfo.push({label: 'Incarnation GUID', value: IncarnationGuid});
-    }
-    if (valueIsDefined(InstanceGuid)) {
-        vdiskInfo.push({label: 'Instance GUID', value: InstanceGuid});
-    }
-    if (valueIsDefined(FrontQueues)) {
-        vdiskInfo.push({
-            label: 'Front Queues',
-            value: <EntityStatus status={FrontQueues} />,
-        });
-    }
-    if (valueIsDefined(StoragePoolName)) {
-        vdiskInfo.push({label: 'Storage Pool Name', value: StoragePoolName});
-    }
-    vdiskInfo.push({
-        label: 'Read Throughput',
-        value: bytesToSpeed(ReadThroughput),
-    });
-    vdiskInfo.push({
-        label: 'Write Throughput',
-        value: bytesToSpeed(WriteThroughput),
-    });
-
-    return (
-        <React.Fragment>
-            <div className={b('row')}>
-                <span className={b('title')}>VDisk </span>
-                <EntityStatus
-                    status={VDiskState === 'OK' ? 'green' : 'red'}
-                    name={stringifyVdiskId(VDiskId)}
-                />
-            </div>
-
-            <div className={b('column')}>
-                <InfoViewer className={b('section')} info={vdiskInfo} />
-            </div>
-        </React.Fragment>
-    );
-}
-
-class VdiskPdiskNode extends React.Component {
-    // если не завести три функции, то отрисуется только один лоадер, а мне надо чтобы отрисовывался в каждой колонке
-    renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
-    };
-
-    static propTypes = {
-        className: PropTypes.string,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        getVdiskInfo: PropTypes.func,
-        clearStore: PropTypes.func,
-        vdisks: PropTypes.array,
-        location: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    componentDidMount() {
-        const params = new URLSearchParams(this.props.location.search);
-        const nodeId = params.get('nodeId');
-        const pdiskId = params.get('pdiskId');
-        const vdiskId = params.get('vdiskId');
-
-        this.props.getVdiskInfo({vdiskId, pdiskId, nodeId});
-        this.vDiskAutofetcher = new AutoFetcher();
-        this.vDiskAutofetcher.fetch(() => this.props.getVdiskInfo({vdiskId, pdiskId, nodeId}));
-
-        if (nodeId && pdiskId) {
-            this.props.getPdiskInfo(nodeId, pdiskId);
-            this.pDiskAutofetcher = new AutoFetcher();
-            this.pDiskAutofetcher.fetch(() => this.props.getPdiskInfo(nodeId, pdiskId));
-        }
-        if (nodeId) {
-            this.props.getNodeInfo(nodeId);
-            this.nodeAutofetcher = new AutoFetcher();
-            this.nodeAutofetcher.fetch(() => this.props.getNodeInfo(nodeId));
-        }
-    }
-
-    componentWillUnmount() {
-        this.props.clearStoreVDisk();
-        this.props.clearStorePDisk();
-        this.vDiskAutofetcher.stop();
-        this.pDiskAutofetcher.stop();
-        this.nodeAutofetcher.stop();
-    }
-
-    renderVdisks = () => {
-        return _.map(this.props.vdisks, (v) => {
-            if (_.isEmpty(v)) {
-                return <div>No information about VDisk</div>;
-            }
-            return <Vdisk {...v} />;
-        });
-    };
-
-    renderPDisk = () => {
-        if (_.isEmpty(this.props.pdisk)) {
-            return <div>No information about PDisk</div>;
-        }
-        const {
-            TotalSize,
-            AvailableSize,
-            Device,
-            Guid,
-            NodeId,
-            PDiskId,
-            Path,
-            Realtime,
-            State,
-            Category,
-            SerialNumber,
-        } = this.props.pdisk;
-
-        const pdiskInfo = [
-            {
-                label: 'PDisk Id',
-                value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.pdisk, {id: PDiskId}, {node_id: NodeId})}
-                    >
-                        {PDiskId}
-                    </Link>
-                ),
-            },
-        ];
-        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 (
-            <React.Fragment>
-                <div className={b('row')}>
-                    <span className={b('title')}>PDisk </span>
-                    <EntityStatus status={Device} name={`${NodeId}-${PDiskId}`} />
-                </div>
-
-                <div className={b('column')}>
-                    <InfoViewer className={b('section')} info={pdiskInfo} />
-                </div>
-            </React.Fragment>
-        );
-    };
-
-    renderNode = () => {
-        if (_.isEmpty(this.props.node)) {
-            return <div>No information about Node</div>;
-        }
-        const {
-            NodeId,
-            SystemState,
-            StartTime,
-            Host,
-            DataCenterDescription,
-            DataCenter,
-            Rack,
-            Version,
-            LoadAverage,
-            NumberOfCpus,
-            MemoryUsed,
-            MemoryLimit,
-            PoolStats,
-        } = this.props.node;
-
-        const nodeInfo = [
-            {
-                label: 'Node Id',
-                value: (
-                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
-                        {NodeId}
-                    </Link>
-                ),
-            },
-        ];
-
-        if (valueIsDefined(Host)) {
-            nodeInfo.push({label: 'Host', value: Host});
-        }
-        if (valueIsDefined(PoolStats)) {
-            nodeInfo.push({
-                label: 'Pool stats',
-                value: (
-                    <PoolsGraph
-                        onMouseEnter={this.props.showTooltip}
-                        onMouseLeave={this.props.hideTooltip}
-                        pools={PoolStats}
-                    />
-                ),
-            });
-        }
-        if (!_.isEmpty(LoadAverage) && valueIsDefined(NumberOfCpus)) {
-            nodeInfo.push({
-                label: 'Load Average',
-                value: (
-                    <ProgressViewer
-                        value={
-                            (LoadAverage[0] * 100) / NumberOfCpus < 100
-                                ? (LoadAverage[0] * 100) / NumberOfCpus
-                                : 100
-                        }
-                        capacity={100}
-                        percents={true}
-                        colorizeProgress={true}
-                        className={b('size')}
-                    />
-                ),
-            });
-            nodeInfo.push({
-                label: 'Load Average',
-                value: `${LoadAverage[0]} / ${NumberOfCpus} Cpus`,
-            });
-        }
-        if (valueIsDefined(StartTime)) {
-            nodeInfo.push({label: 'Uptime', value: calcUptime(StartTime)});
-        }
-        if (valueIsDefined(SystemState)) {
-            nodeInfo.push({
-                label: 'System State',
-                value: <EntityStatus status={SystemState} />,
-            });
-        }
-        if (valueIsDefined(DataCenter)) {
-            nodeInfo.push({label: 'DataCenter', value: DataCenter.toUpperCase()});
-        }
-        if (valueIsDefined(DataCenterDescription)) {
-            nodeInfo.push({
-                label: 'DataCenter Description',
-                value: DataCenterDescription,
-            });
-        }
-        if (valueIsDefined(Rack)) {
-            nodeInfo.push({label: 'Rack', value: Rack});
-        }
-        if (valueIsDefined(Version)) {
-            nodeInfo.push({label: 'Version', value: Version});
-        }
-        if (valueIsDefined(MemoryUsed)) {
-            nodeInfo.push({label: 'Memory used', value: bytesToGB(MemoryUsed)});
-        }
-        if (valueIsDefined(MemoryLimit)) {
-            nodeInfo.push({label: 'Memory limit', value: bytesToGB(MemoryLimit)});
-        }
-        if (valueIsDefined(MemoryLimit) && valueIsDefined(MemoryUsed)) {
-            nodeInfo.push({
-                label: 'Memory used',
-                value: (
-                    <ProgressViewer
-                        value={MemoryUsed || 0}
-                        capacity={MemoryLimit || 0}
-                        formatValues={formatStorageValuesToGb}
-                        colorizeProgress={true}
-                        className={b('size')}
-                    />
-                ),
-            });
-        }
-
-        return (
-            <React.Fragment>
-                <div className={b('row')}>
-                    <span className={b('title')}>Node </span>
-                    <EntityStatus status={SystemState} name={`${NodeId}-${Host}`} />
-                </div>
-
-                <div className={b('column')}>
-                    <InfoViewer className={b('section')} info={nodeInfo} />
-                </div>
-            </React.Fragment>
-        );
-    };
-
-    render() {
-        const {
-            loadingVDisk,
-            wasLoadedVDisk,
-            errorVDisk,
-            loadingPDisk,
-            wasLoadedPDisk,
-            errorPDisk,
-            loadingNode,
-            wasLoadedNode,
-            errorNode,
-        } = this.props;
-
-        return (
-            <div className={b()}>
-                <div>
-                    {(loadingVDisk && !wasLoadedVDisk && this.renderLoader()) ||
-                        (errorVDisk && errorVDisk.statusText) ||
-                        this.renderVdisks()}
-                </div>
-                <div>
-                    {(loadingPDisk && !wasLoadedPDisk && this.renderLoader()) ||
-                        (errorPDisk && errorPDisk.statusText) ||
-                        this.renderPDisk()}
-                </div>
-                <div>
-                    {(loadingNode && !wasLoadedNode && this.renderLoader()) ||
-                        (errorNode && errorNode.statusText) ||
-                        this.renderNode()}
-                </div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {
-        data: vdiskData,
-        wasLoaded: wasLoadedVDisk,
-        loading: loadingVDisk,
-        error: errorVDisk,
-    } = state.vdisk;
-    const {
-        data: pdiskData,
-        wasLoaded: wasLoadedPDisk,
-        loading: loadingPDisk,
-        error: errorPDisk,
-    } = state.pdisk;
-    const {
-        data: nodeData,
-        wasLoaded: wasLoadedNode,
-        loading: loadingNode,
-        error: errorNode,
-    } = state.node;
-
-    let pdisk = {};
-    let node = {};
-    if (pdiskData && pdiskData.PDiskStateInfo) {
-        pdisk = pdiskData.PDiskStateInfo[0];
-    }
-    if (nodeData && nodeData.SystemStateInfo) {
-        node = nodeData.SystemStateInfo[0];
-    }
-
-    return {
-        vdisks: vdiskData?.VDiskStateInfo,
-        wasLoadedVDisk,
-        loadingVDisk,
-        errorVDisk,
-        pdisk,
-        wasLoadedPDisk,
-        loadingPDisk,
-        errorPDisk,
-        node,
-        wasLoadedNode,
-        loadingNode,
-        errorNode,
-    };
-};
-
-const mapDispatchToProps = {
-    getVdiskInfo,
-    getPdiskInfo,
-    getNodeInfo,
-    clearStoreVDisk,
-    clearStorePDisk,
-    hideTooltip,
-    showTooltip,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(VdiskPdiskNode);

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss

@@ -1,60 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.vdisk-pdisk-node {
-    display: grid;
-    grid-gap: 20px;
-
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-
-    padding: 20px;
-    @include container-fluid();
-
-    .info-viewer__items {
-        grid-template-columns: max-content;
-    }
-
-    &__row {
-        display: flex;
-    }
-
-    &__column {
-        display: flex;
-        flex-direction: column;
-
-        margin-bottom: 15px;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-    }
-
-    &__section {
-        padding: 15px 0;
-
-        .info-viewer__label {
-            min-width: 205px;
-        }
-    }
-
-    &__link {
-        text-decoration: none;
-
-        color: var(--yc-color-base-special);
-    }
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 100%;
-        margin-top: 50px;
-    }
-    .info-viewer__row {
-        align-items: flex-end;
-    }
-}

package/dist/store/reducers/group.js

@@ -1,49 +0,0 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-
-const FETCH_GROUP = createRequestActionTypes('GROUP', 'FETCH_GROUP');
-
-const initialState = {loading: true, wasLoaded: false, data: undefined};
-
-const group = (state = initialState, action) => {
-    switch (action.type) {
-        case FETCH_GROUP.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_GROUP.SUCCESS: {
-            return {
-                ...state,
-                data: action.data,
-                loading: false,
-                wasLoaded: true,
-                error: undefined,
-            };
-        }
-        case FETCH_GROUP.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                loading: false,
-            };
-        }
-        case 'CLEAR_STORE': {
-            return initialState;
-        }
-        default:
-            return state;
-    }
-};
-
-export const clearStore = () => ({type: 'CLEAR_STORE'});
-
-export const getGroupInfo = (nodeId) => {
-    return createApiRequest({
-        request: window.api.getGroupInfo(nodeId),
-        actions: FETCH_GROUP,
-    });
-};
-
-export default group;

package/dist/store/reducers/pdisk.js

@@ -1,51 +0,0 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-
-const FETCH_PDISK = createRequestActionTypes('PDISK', 'FETCH_PDISK');
-
-const initialState = {loading: true, wasLoaded: false, data: undefined};
-
-const pdisk = (state = initialState, action) => {
-    switch (action.type) {
-        case FETCH_PDISK.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_PDISK.SUCCESS: {
-            return {
-                ...state,
-                data: action.data,
-                loading: false,
-                wasLoaded: true,
-                error: undefined,
-            };
-        }
-        case FETCH_PDISK.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                loading: false,
-            };
-        }
-
-        case 'CLEAR_STORE': {
-            return initialState;
-        }
-
-        default:
-            return state;
-    }
-};
-
-export const clearStore = () => ({type: 'CLEAR_STORE'});
-
-export const getPdiskInfo = (nodeId, pdiskId) => {
-    return createApiRequest({
-        request: window.api.getPdiskInfo(nodeId, pdiskId),
-        actions: FETCH_PDISK,
-    });
-};
-
-export default pdisk;