ydb-embedded-ui 0.1.0

package/dist/containers/StorageV2/Storage.js

@@ -0,0 +1,249 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+import DataTable from '@yandex-cloud/react-data-table';
+import {Loader, RadioButton, Label} from '@yandex-cloud/uikit';
+
+import StorageFilter from './StorageFilter/StorageFilter';
+import {AutoFetcher} from '../Cluster/Cluster';
+
+import {
+    getStorageInfo,
+    setInitialState,
+    getFilteredEntities,
+    VisibleEntities,
+    setVisibleEntities,
+    setStorageFilter,
+    getNodesObject,
+    StorageTypes,
+    setStorageType,
+} from '../../store/reducers/storage';
+import {getNodesList} from '../../store/reducers/clusterNodes';
+import StorageGroups from './StorageGroups/StorageGroups';
+import StorageNodes from './StorageNodes/StorageNodes';
+
+import './Storage.scss';
+
+const b = cn('global-storage');
+
+const FILTER_OPTIONS = {
+    Missing: 'missing',
+    Space: 'space',
+};
+
+const tableSettings = {
+    displayIndices: false,
+    stickyHead: DataTable.MOVING,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+    defaultOrder: DataTable.DESCENDING,
+    stripedRows: true,
+    stickyTop: 68,
+};
+
+class Storage extends React.Component {
+    static propTypes = {
+        loading: PropTypes.bool,
+        error: PropTypes.object,
+        wasLoaded: PropTypes.bool,
+        getStorageInfo: PropTypes.func,
+        setInitialState: PropTypes.func,
+        flatListStorageEntities: PropTypes.array,
+        setStorageFilter: PropTypes.func,
+        setVisibleEntities: PropTypes.func,
+        visibleEntities: PropTypes.string,
+    };
+
+    componentDidMount() {
+        const {tenant, nodeId, setVisibleEntities, storageType} = this.props;
+        this.autofetcher = new AutoFetcher();
+        this.props.getNodesList();
+        if (tenant || nodeId) {
+            setVisibleEntities(VisibleEntities.All);
+        } else {
+            this.props.getStorageInfo({
+                tenant,
+                nodeId,
+                filter: FILTER_OPTIONS.Missing,
+                type: storageType,
+            });
+            this.autofetcher.fetch(() =>
+                this.props.getStorageInfo({
+                    tenant,
+                    nodeId,
+                    filter: FILTER_OPTIONS.Missing,
+                    type: storageType,
+                }),
+            );
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {tenant, visibleEntities, getStorageInfo, nodeId, storageType} = this.props;
+        if (
+            storageType !== prevProps.storageType ||
+            visibleEntities !== prevProps.visibleEntities
+        ) {
+            this.autofetcher.stop();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() =>
+                getStorageInfo({
+                    tenant,
+                    filter: FILTER_OPTIONS[visibleEntities],
+                    nodeId,
+                    type: storageType,
+                }),
+            );
+
+            getStorageInfo({
+                tenant,
+                filter: FILTER_OPTIONS[visibleEntities],
+                nodeId,
+                type: storageType,
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+        this.props.setInitialState();
+    }
+
+    renderLoader() {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    renderDataTable() {
+        const {flatListStorageEntities, visibleEntities, nodes, storageType} = this.props;
+
+        return (
+            <div className={b('table-wrapper')}>
+                {storageType === StorageTypes.groups && (
+                    <StorageGroups
+                        visibleEntities={visibleEntities}
+                        data={flatListStorageEntities}
+                        tableSettings={tableSettings}
+                        nodes={nodes}
+                    />
+                )}
+                {storageType === StorageTypes.nodes && (
+                    <StorageNodes
+                        visibleEntities={visibleEntities}
+                        data={flatListStorageEntities}
+                        tableSettings={tableSettings}
+                    />
+                )}
+            </div>
+        );
+    }
+
+    onGroupVisibilityChange = (value) => {
+        const {setVisibleEntities} = this.props;
+        setVisibleEntities(value);
+    };
+
+    onStorageTypeChange = (value) => {
+        const {setStorageType} = this.props;
+        setStorageType(value);
+    };
+
+    renderControls() {
+        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities} =
+            this.props;
+        return (
+            <div className={b('controls')}>
+                <div className={b('filter')}>
+                    <StorageFilter
+                        changeReduxStorageFilter={setStorageFilter}
+                        storageType={storageType}
+                    />
+                </div>
+                <RadioButton
+                    value={visibleEntities}
+                    onUpdate={this.onGroupVisibilityChange}
+                    className={b('control')}
+                >
+                    <RadioButton.Option value={VisibleEntities.Missing}>
+                        {VisibleEntities.Missing}
+                    </RadioButton.Option>
+                    <RadioButton.Option value={VisibleEntities.Space}>
+                        {VisibleEntities.Space}
+                    </RadioButton.Option>
+                    <RadioButton.Option value={VisibleEntities.All}>
+                        {VisibleEntities.All}
+                    </RadioButton.Option>
+                </RadioButton>
+
+                <RadioButton
+                    value={storageType}
+                    onUpdate={this.onStorageTypeChange}
+                    className={b('control')}
+                >
+                    <RadioButton.Option value={StorageTypes.groups}>
+                        {StorageTypes.groups}
+                    </RadioButton.Option>
+                    <RadioButton.Option value={StorageTypes.nodes}>
+                        {StorageTypes.nodes}
+                    </RadioButton.Option>
+                </RadioButton>
+                <Label theme="info" size="m">{`${
+                    storageType === StorageTypes.groups ? 'Groups' : 'Nodes'
+                }: ${flatListStorageEntities.length}`}</Label>
+            </div>
+        );
+    }
+
+    render() {
+        const {loading, wasLoaded, error} = this.props;
+        if (loading && !wasLoaded) {
+            return this.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return (
+                <div className={b()}>
+                    {this.renderControls()}
+                    {this.renderDataTable()}
+                </div>
+            );
+        }
+    }
+}
+
+function mapStateToProps(state) {
+    const {
+        loading,
+        wasLoaded,
+        error,
+        visible: visibleEntities,
+        type: storageType,
+        filter,
+    } = state.storage;
+
+    return {
+        flatListStorageEntities: getFilteredEntities(state),
+        nodes: getNodesObject(state),
+        loading,
+        wasLoaded,
+        error,
+        visibleEntities,
+        storageType,
+        filter,
+    };
+}
+
+const mapDispatchToProps = {
+    getStorageInfo,
+    setInitialState,
+    setStorageFilter,
+    setVisibleEntities: setVisibleEntities,
+    getNodesList,
+    setStorageType,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Storage);

package/dist/containers/StorageV2/Storage.scss

@@ -0,0 +1,57 @@
+.global-storage {
+    display: flex;
+    overflow: auto;
+    align-items: flex-start;
+    flex-direction: column;
+
+    height: 100%;
+    max-height: 100%;
+
+    &__controls {
+        position: sticky;
+        z-index: 2;
+        top: 0;
+
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+        padding: 20px 0;
+
+        background-color: var(--yc-color-base-background);
+    }
+    &__filter {
+        display: inline-block;
+
+        width: 300px;
+        margin-right: 15px;
+    }
+    &__control {
+        margin-right: 15px;
+    }
+    &__table-wrapper {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+
+        width: 100%;
+
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+
+        .yc-tooltip {
+            // stylelint-disable-next-line declaration-no-important
+            height: var(--yc-text-body2-line-height) !important;
+        }
+    }
+
+    &__loader {
+        display: flex;
+        justify-content: center;
+
+        margin-top: 100px;
+    }
+    .entity-status {
+        justify-content: center;
+    }
+}

package/dist/containers/StorageV2/StorageFilter/StorageFilter.js

@@ -0,0 +1,39 @@
+import {useEffect, useState} from 'react';
+import {TextInput} from '@yandex-cloud/uikit';
+import {StorageTypes} from '../../../store/reducers/storage';
+
+function StorageFilter(props) {
+    const [filter, setFilter] = useState('');
+    let timer;
+
+    useEffect(() => {
+        return () => clearTimeout(timer);
+    }, []);
+
+    useEffect(() => {
+        setFilter('');
+        props.changeReduxStorageFilter('');
+    }, [props.storageType]);
+
+    const changeFilter = (value) => {
+        clearTimeout(timer);
+        setFilter(value);
+        timer = setTimeout(() => {
+            props.changeReduxStorageFilter(value);
+        }, 200);
+    };
+    const placeholder =
+        props.storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN';
+
+    return (
+        <TextInput
+            autoFocus
+            placeholder={placeholder}
+            value={filter}
+            onUpdate={changeFilter}
+            hasClear
+        />
+    );
+}
+
+export default StorageFilter;

package/dist/containers/StorageV2/StorageGroups/StorageGroups.scss

@@ -0,0 +1,26 @@
+.global-storage-groups {
+    &__vdisks-wrapper {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        justify-content: center;
+    }
+    &__pool-name-wrapper {
+        display: flex;
+        align-items: flex-end;
+    }
+    &__pool-name {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 150px;
+
+        text-overflow: ellipsis;
+    }
+    &__group-id {
+        font-weight: 500;
+    }
+    &__tooltip {
+        word-break: break-all;
+    }
+}

package/dist/containers/StorageV2/StorageGroups/StorageGroups.tsx

@@ -0,0 +1,234 @@
+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';
+
+import Vdisk from '../Vdisk/Vdisk';
+//@ts-ignore
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+//@ts-ignore
+import {VisibleEntities} from '../../../store/reducers/storage';
+//@ts-ignore
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+//@ts-ignore
+import {stringifyVdiskId} from '../../../utils';
+
+import './StorageGroups.scss';
+
+enum TableColumnsIds {
+    PoolName = 'PoolName',
+    GroupID = 'GroupID',
+    Used = 'Used',
+    Limit = 'Limit',
+    UsedPercents = 'UsedPercents',
+    UsedSpaceFlag = 'UsedSpaceFlag',
+    Read = 'Read',
+    Write = 'Write',
+    VDisks = 'VDisks',
+    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> = {
+    PoolName: 'Pool Name',
+    GroupID: 'Group ID',
+    Used: 'Used',
+    Limit: 'Limit',
+    UsedSpaceFlag: 'Space',
+    UsedPercents: 'Used percents',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Missing: 'Missing',
+};
+
+const b = cn('global-storage-groups');
+
+function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+    switch (visibleEntities) {
+        case VisibleEntities.All: {
+            return {
+                columnId: TableColumnsIds.GroupID,
+                order: DataTable.ASCENDING,
+            };
+        }
+        case VisibleEntities.Missing: {
+            return {
+                columnId: TableColumnsIds.Missing,
+                order: DataTable.DESCENDING,
+            };
+        }
+        case VisibleEntities.Space: {
+            return {
+                columnId: TableColumnsIds.UsedSpaceFlag,
+                order: DataTable.ASCENDING,
+            };
+        }
+        default: {
+            return undefined;
+        }
+    }
+}
+
+function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGroupsProps) {
+    const allColumns: Column<any>[] = [
+        {
+            name: TableColumnsIds.PoolName,
+            header: tableColumnsNames[TableColumnsIds.PoolName],
+            width: 160,
+            render: ({value}) => {
+                const splitted = (value as string)?.split('/');
+                return (
+                    <div className={b('pool-name-wrapper')}>
+                        {splitted && (
+                            <Tooltip
+                                content={<span className={b('tooltip')}>{value as string}</span>}
+                                placement={['right']}
+                                behavior={TooltipBehavior.Immediate}
+                            >
+                                <span className={b('pool-name')}>
+                                    {splitted[splitted.length - 1]}
+                                </span>
+                            </Tooltip>
+                        )}
+                    </div>
+                );
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: TableColumnsIds.GroupID,
+            header: tableColumnsNames[TableColumnsIds.GroupID],
+            width: 130,
+            render: ({value}) => {
+                return <span className={b('group-id')}>{value as number}</span>;
+            },
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.Used,
+            header: tableColumnsNames[TableColumnsIds.Used],
+            width: 100,
+            render: ({value}) => {
+                return bytesToGB(value, true);
+            },
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.Limit,
+            header: tableColumnsNames[TableColumnsIds.Limit],
+            width: 100,
+            render: ({value}) => {
+                return bytesToGB(value);
+            },
+            align: DataTable.RIGHT,
+        },
+        // {
+        //     name: tableColumnsIds.UsedPercents,
+        //     header: tableColumnsNames[tableColumnsIds.UsedPercents],
+        //     width: '100px',
+        //     render: ({row}) => {
+        //         return (
+        //             Math.round((row[tableColumnsIds.Used] * 100) / row[tableColumnsIds.Limit]) +
+        //             '%'
+        //         );
+        //     },
+        //     align: DataTable.RIGHT,
+        // },
+        {
+            name: TableColumnsIds.UsedSpaceFlag,
+            header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
+            width: 110,
+            render: ({value}) => {
+                const val = value as number;
+                let color = 'Red';
+                if (val < 100) {
+                    color = 'Green';
+                } else if (val < 10000) {
+                    color = 'Yellow';
+                } else if (val < 1000000) {
+                    value = 'Orange';
+                }
+                return <EntityStatus status={color} />;
+            },
+            align: DataTable.CENTER,
+        },
+
+        {
+            name: TableColumnsIds.Read,
+            header: tableColumnsNames[TableColumnsIds.Read],
+            width: 100,
+            render: ({value}) => {
+                return value ? bytesToSpeed(value) : '-';
+            },
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.Write,
+            header: tableColumnsNames[TableColumnsIds.Write],
+            width: 100,
+            render: ({value}) => {
+                return value ? bytesToSpeed(value) : '-';
+            },
+            align: DataTable.RIGHT,
+        },
+        {
+            name: TableColumnsIds.Missing,
+            header: tableColumnsNames[TableColumnsIds.Missing],
+            width: 100,
+            align: DataTable.CENTER,
+            defaultOrder: DataTable.DESCENDING,
+        },
+        {
+            name: TableColumnsIds.VDisks,
+            header: tableColumnsNames[TableColumnsIds.VDisks],
+            render: ({value, row}) => (
+                <div className={b('vdisks-wrapper')}>
+                    {_.map(value as any, (el) => (
+                        <Vdisk
+                            key={stringifyVdiskId(el.VDiskId)}
+                            {...el}
+                            PoolName={row[TableColumnsIds.PoolName]}
+                            nodes={nodes}
+                        />
+                    ))}
+                </div>
+            ),
+            align: DataTable.CENTER,
+            sortable: false,
+            width: 900,
+        },
+    ];
+
+    let columns = allColumns;
+
+    if (visibleEntities === VisibleEntities.Space) {
+        columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+    }
+
+    if (visibleEntities === VisibleEntities.Missing) {
+        columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
+    }
+    return data ? (
+        <DataTable
+            key={visibleEntities as string}
+            theme="internal"
+            data={data}
+            columns={columns}
+            settings={tableSettings}
+            initialSortOrder={setSortOrder(visibleEntities)}
+            emptyDataMessage="No such groups."
+        />
+    ) : null;
+}
+
+export default StorageGroups;

package/dist/containers/StorageV2/StorageNodes/StorageNodes.scss

@@ -0,0 +1,30 @@
+.global-storage-groups {
+    &__pdisks-wrapper {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        justify-content: center;
+    }
+    &__pool-name-wrapper {
+        display: flex;
+        align-items: flex-end;
+    }
+    &__pool-name {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 340px;
+
+        text-overflow: ellipsis;
+    }
+    &__group-id {
+        font-weight: 500;
+    }
+    &__tooltip-wrapper {
+        display: flex;
+        align-items: center;
+    }
+    &__tooltip {
+        word-break: break-all;
+    }
+}