ydb-embedded-ui 0.1.0

package/dist/containers/Tenants/Tenants.js

@@ -0,0 +1,375 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import _ from 'lodash';
+
+import DataTable from '@yandex-cloud/react-data-table';
+import {Loader, Switch, TextInput, Button} from '@yandex-cloud/uikit';
+
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
+import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
+import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {AutoFetcher} from '../Cluster/Cluster';
+
+import routes, {createHref} from '../../routes';
+import {formatCPU, formatNumber, formatBytes} from '../../utils';
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {withSearch} from '../../HOCS';
+import {ALL} from '../../utils/constants';
+import {getTenantsInfo} from '../../store/reducers/tenants';
+import {changeFilter} from '../../store/reducers/settings';
+import {clusterName} from '../../store';
+import {TENANT_PAGES} from '../Tenant/TenantPages';
+
+import './Tenants.scss';
+
+const b = cn('tenants');
+
+const tableSettings = {
+    displayIndices: false,
+    stickyHead: DataTable.MOVING,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+};
+
+class Tenants extends React.Component {
+    static renderLoader() {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    static propTypes = {
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.bool,
+        getTenantsInfo: PropTypes.func,
+        tenants: PropTypes.array,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        searchQuery: PropTypes.string,
+        handleSearchQuery: PropTypes.func,
+        filter: problemFilterType,
+        changeFilter: PropTypes.func,
+        cluster: PropTypes.object,
+        singleClusterMode: PropTypes.bool,
+        additionalTenantsInfo: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    static filterTenants(tenants, filter) {
+        if (filter === ALL) {
+            return tenants;
+        }
+
+        return _.filter(tenants, (tenant) => {
+            return tenant.Overall && tenant.Overall !== 'Green';
+        });
+    }
+
+    state = {
+        formatValues: false,
+    };
+
+    componentDidMount() {
+        this.autofetcher = new AutoFetcher();
+        this.props.getTenantsInfo(clusterName);
+        this.autofetcher.fetch(() => this.props.getTenantsInfo(clusterName));
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    handleFormatChange = () => {
+        this.setState({formatValues: !this.state.formatValues});
+    };
+
+    renderControls() {
+        const {searchQuery, handleSearchQuery, filter, changeFilter} = this.props;
+        const {formatValues} = this.state;
+
+        return (
+            <div className={b('controls')}>
+                <div className={b('controls-left')}>
+                    <TextInput
+                        className={b('search')}
+                        placeholder="Database name…"
+                        text={searchQuery}
+                        onUpdate={handleSearchQuery}
+                        hasClear
+                    />
+                    <ProblemFilter value={filter} onChange={changeFilter} />
+                </div>
+
+                <Switch onUpdate={this.handleFormatChange} checked={formatValues} content="raw" />
+            </div>
+        );
+    }
+
+    getControlPlaneValue = (item) => {
+        const parts = _.get(item, 'Name', []).split('/');
+        const defaultValue = parts.length ? parts.slice(-1) : '—';
+
+        return _.get(item, 'ControlPlane.name', defaultValue);
+    };
+
+    renderTable = () => {
+        const {
+            tenants = [],
+            searchQuery,
+            showTooltip,
+            hideTooltip,
+            filter,
+            handleSearchQuery,
+            additionalTenantsInfo = {},
+        } = this.props;
+        const {formatValues} = this.state;
+
+        const filteredTenantsBySearch = tenants.filter(
+            (item) =>
+                item.Name.includes(searchQuery) ||
+                this.getControlPlaneValue(item).includes(searchQuery),
+            filter,
+        );
+        const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
+
+        const columns = [
+            {
+                name: 'Name',
+                header: 'Database',
+                render: ({value, row}) => {
+                    const tenantBackend = additionalTenantsInfo.tenantBackend
+                        ? additionalTenantsInfo.tenantBackend(row.backend)
+                        : undefined;
+                    return (
+                        <React.Fragment>
+                            <EntityStatus
+                                externalLink={Boolean(row.backend)}
+                                className={b('name')}
+                                name={value || 'unknown database'}
+                                status={row.Overall}
+                                hasClipboardButton
+                                path={createHref(
+                                    routes.tenant,
+                                    {page: TENANT_PAGES[0].id},
+                                    {
+                                        name: value,
+                                        backend: tenantBackend,
+                                    },
+                                )}
+                            />
+                            {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
+                        </React.Fragment>
+                    );
+                },
+                width: 440,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'ControlPlaneName',
+                header: 'Name',
+                render: ({row}) => {
+                    return this.getControlPlaneValue(row);
+                },
+                width: 200,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'Type',
+                width: 200,
+                render: ({value, row}) => {
+                    if (value !== 'Serverless') {
+                        return value;
+                    }
+
+                    const sharedTenantName = _.find(tenants, {Id: row.ResourceId}).Name;
+
+                    return (
+                        <div className={b('type')}>
+                            <span className={b('type-value')}>{value}</span>
+                            <Button
+                                className={b('type-button')}
+                                onClick={() => handleSearchQuery(sharedTenantName)}
+                            >
+                                Show shared
+                            </Button>
+                        </div>
+                    );
+                },
+            },
+            {
+                name: 'State',
+                width: 80,
+                render: ({value}) => (value ? value.toLowerCase() : '—'),
+                customStyle: () => ({textTransform: 'capitalize'}),
+            },
+            {
+                name: 'cpu',
+                header: 'CPU',
+                width: 80,
+                sortAccessor: ({Metrics = {}, CoresUsed}) => {
+                    const cpuRaw =
+                        CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
+                    return isNaN(Number(cpuRaw)) ? 0 : Number(cpuRaw);
+                },
+                accessor: ({Metrics = {}, CoresUsed}) => {
+                    if (!isNaN(Number(CoresUsed))) {
+                        const cores = Math.round(Number(CoresUsed) * 100) / 100;
+                        return cores || '—';
+                    } else {
+                        return Number(Metrics.CPU) ? formatCPU(Number(Metrics.CPU)) : '—';
+                    }
+                },
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'memory',
+                header: 'Memory',
+                width: 120,
+                accessor: ({Metrics = {}, MemoryUsed}) => {
+                    return !isNaN(Number(MemoryUsed)) ? Number(MemoryUsed) : Number(Metrics.Memory);
+                },
+                sortAccessor: ({Metrics = {}, MemoryUsed}) => {
+                    const memory = MemoryUsed ?? Metrics.Memory;
+                    return isNaN(Number(memory)) ? 0 : Number(memory);
+                },
+                render: ({value}) =>
+                    value ? (formatValues ? formatNumber(value) : formatBytes(value)) : '—',
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'storage',
+                header: 'Storage',
+                width: 120,
+                accessor: ({Metrics = {}, StorageAllocatedSize}) => {
+                    return !isNaN(Number(StorageAllocatedSize))
+                        ? Number(StorageAllocatedSize)
+                        : Number(Metrics.Storage);
+                },
+                sortAccessor: ({Metrics = {}, StorageAllocatedSize}) => {
+                    const storage = StorageAllocatedSize ?? Metrics.Storage;
+                    return isNaN(Number(storage)) ? 0 : Number(storage);
+                },
+                render: ({value}) =>
+                    value ? (formatValues ? formatNumber(value) : formatBytes(value)) : '—',
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'StorageGroups',
+                header: 'Groups',
+                width: 100,
+                sortAccessor: ({StorageGroups}) =>
+                    isNaN(Number(StorageGroups)) ? 0 : Number(StorageGroups),
+                render: ({value}) => value ?? '—',
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'PoolStats',
+                header: 'Pools',
+                width: 100,
+                sortAccessor: ({PoolStats = []}) =>
+                    PoolStats.reduce((acc, item) => acc + item.Usage, 0),
+                defaultOrder: DataTable.DESCENDING,
+                align: DataTable.CENTER,
+                render: ({value}) => (
+                    <PoolsGraph
+                        onMouseEnter={showTooltip}
+                        onMouseLeave={hideTooltip}
+                        rowInfo={value}
+                        pools={value}
+                    />
+                ),
+            },
+            {
+                name: 'Tablets',
+                header: 'Tablets States',
+                sortable: false,
+                width: 370,
+                render: ({value, row}) =>
+                    value ? (
+                        <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
+                    ) : (
+                        '—'
+                    ),
+            },
+        ];
+
+        if (filteredTenants.length === 0 && filter === ALL) {
+            return <div className="error"> no tenants data</div>;
+        } else if (filteredTenants.length === 0) {
+            return <div className="no-problem" />;
+        }
+
+        return (
+            <div className={b('table-wrapper')}>
+                <div className={b('table-content')}>
+                    <DataTable
+                        theme="internal"
+                        data={filteredTenants}
+                        columns={columns}
+                        settings={tableSettings}
+                        dynamicRender={true}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    renderContent = () => {
+        return (
+            <div className={b()}>
+                {this.renderControls()}
+                {this.renderTable()}
+            </div>
+        );
+    };
+
+    render() {
+        const {loading, wasLoaded, error} = this.props;
+
+        if (loading && !wasLoaded) {
+            return Tenants.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {tenants, wasLoaded, loading, error} = state.tenants;
+    const {singleClusterMode} = state;
+
+    return {
+        singleClusterMode,
+        tenants,
+        wasLoaded,
+        loading,
+        error,
+        filter: state.settings.problemFilter,
+    };
+};
+
+const mapDispatchToProps = {
+    getTenantsInfo,
+    hideTooltip,
+    showTooltip,
+    changeFilter,
+};
+
+export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Tenants));

package/dist/containers/Tenants/Tenants.scss

@@ -0,0 +1,73 @@
+@import '../../styles/mixins.scss';
+
+.tenants {
+    @include flex-container();
+    overflow: auto;
+
+    &__format-label {
+        margin-right: 15px;
+    }
+
+    &__title {
+        text-align: center;
+    }
+
+    &__tooltip {
+        animation: none !important;
+    }
+
+    &__search {
+        width: 450px;
+        margin: 0 15px 0 0;
+    }
+
+    &__tablets {
+        padding: 0 !important;
+
+        .tablets-viewer__grid {
+            grid-gap: 20px;
+        }
+    }
+
+    &__controls {
+        display: flex;
+        justify-content: space-between;
+        margin: 17px 0;
+    }
+
+    &__controls-left {
+        display: flex;
+        align-items: center;
+
+        & > * {
+            margin-right: 25px;
+        }
+    }
+
+    &__table-wrapper {
+        @include flex-container();
+        overflow: auto;
+    }
+
+    &__table-content {
+        @include freeze-nth-column(1);
+
+        @include table-styles;
+        @include table-sticky-styles;
+    }
+
+    &__type-value {
+        margin-right: 10px;
+    }
+
+    &__type-button {
+        visibility: hidden;
+    }
+
+    .data-table__row:hover &__type-button {
+        visibility: visible;
+    }
+    &__name {
+        max-width: 90%;
+    }
+}

package/dist/containers/UserSettings/UserSettings.tsx

@@ -0,0 +1,57 @@
+import {connect} from 'react-redux';
+
+import {RadioButton} from '@yandex-cloud/uikit';
+import {Settings} from '../../components/AsideNavigation/Settings';
+import favoriteFilledIcon from '../../assets/icons/star.svg';
+//@ts-ignore
+import {THEME_KEY} from '../../utils/constants';
+//@ts-ignore
+import {setSettingValue} from '../../store/reducers/settings';
+
+// import './UserSettings.scss';
+
+enum Theme {
+    light = 'light',
+    dark = 'dark',
+    system = 'system',
+}
+
+function UserSettings(props: any) {
+    const _onThemeChangeHandler = (value: string) => {
+        props.setSettingValue(THEME_KEY, value);
+    };
+
+    return (
+        <Settings>
+            <Settings.Page
+                id="general"
+                title="General"
+                icon={{data: favoriteFilledIcon, height: 14, width: 14}}
+            >
+                <Settings.Section title="General">
+                    <Settings.Item title="Interface theme">
+                        <RadioButton value={props.theme} onUpdate={_onThemeChangeHandler}>
+                            <RadioButton.Option value={Theme.system}>System</RadioButton.Option>
+                            <RadioButton.Option value={Theme.light}>Light</RadioButton.Option>
+                            <RadioButton.Option value={Theme.dark}>Dark</RadioButton.Option>
+                        </RadioButton>
+                    </Settings.Item>
+                </Settings.Section>
+            </Settings.Page>
+        </Settings>
+    );
+}
+
+const mapStateToProps = (state: any) => {
+    const {theme} = state.settings.userSettings;
+
+    return {
+        theme,
+    };
+};
+
+const mapDispatchToProps = {
+    setSettingValue,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserSettings);

package/dist/containers/Vdisk/Vdisk.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+
+import {Link} from 'react-router-dom';
+import {Loader} from '@yandex-cloud/uikit';
+
+import InfoViewer from '../../components/InfoViewer/InfoViewer';
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+
+import {getVdiskInfo, clearStore} from '../../store/reducers/vdisk';
+import {VDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
+import {formatBytes, calcUptime, stringifyVdiskId} from '../../utils';
+import routes, {createHref} from '../../routes';
+
+import './Vdisk.scss';
+
+const b = cn('vdisk');
+
+class Vdisk extends React.Component {
+    static renderLoader() {
+        return (
+            <div className={'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,
+        vdisk: PropTypes.object,
+        location: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    componentDidMount() {
+        const {id} = this.props.match.params;
+
+        this.props.getVdiskInfo(id);
+        this.reloadDescriptor = setInterval(
+            () => this.props.getVdiskInfo(id),
+            VDISK_AUTO_RELOAD_INTERVAL,
+        );
+    }
+
+    componentWillUnmount() {
+        this.props.clearStore();
+        clearInterval(this.reloadDescriptor);
+    }
+
+    renderContent = () => {
+        const {
+            AllocatedSize,
+            ChangeTime,
+            DiskSpace,
+            FrontQueues,
+            Guid,
+            NodeId,
+            PDiskId,
+            Replicated,
+            VDiskState,
+            VDiskId,
+        } = this.props.vdisk;
+
+        const vdiskInfo = [
+            {label: 'Allocated Size', value: formatBytes(AllocatedSize)},
+            {label: 'Change Time', value: calcUptime(ChangeTime)},
+            {label: 'Disk Space', value: <EntityStatus status={DiskSpace} />},
+            {label: 'Front Queues', value: <EntityStatus status={FrontQueues} />},
+            {label: 'Guid', value: Guid},
+            {
+                label: 'NodeId',
+                value: (
+                    <Link
+                        className={b('link')}
+                        to={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
+                    >
+                        {NodeId}
+                    </Link>
+                ),
+            },
+            {
+                label: 'PDiskId',
+                value: (
+                    <Link
+                        className={b('link')}
+                        to={createHref(routes.pdisk, {id: PDiskId}, {node_id: NodeId})}
+                    >
+                        {PDiskId}
+                    </Link>
+                ),
+            },
+            {label: 'Replicated', value: Replicated ? '✓' : '☓'},
+            {
+                label: 'VDiskState',
+                value: VDiskState,
+            },
+        ];
+
+        return (
+            <div className={b()}>
+                <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>
+            </div>
+        );
+    };
+
+    render() {
+        const {loading, wasLoaded, error} = this.props;
+
+        if (loading && !wasLoaded) {
+            return Vdisk.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {data, wasLoaded, loading, error} = state.vdisk;
+
+    let vdisk;
+    if (data) {
+        vdisk = data.VDiskStateInfo[0];
+    }
+
+    return {
+        vdisk,
+        wasLoaded,
+        loading,
+        error,
+    };
+};
+
+const mapDispatchToProps = {
+    getVdiskInfo,
+    clearStore,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Vdisk);

package/dist/containers/Vdisk/Vdisk.scss

@@ -0,0 +1,40 @@
+@import '../../styles/mixins.scss';
+
+.vdisk {
+    @include container-fluid();
+    padding: 20px;
+
+    .info-viewer__items {
+        grid-template-columns: max-content;
+    }
+
+    &__row {
+        display: flex;
+    }
+
+    &__column {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    &__section {
+        padding: 15px 0;
+
+        .info-viewer__label {
+            min-width: 205px;
+        }
+    }
+
+    &__link {
+        color: var(--yc-color-base-special);
+        text-decoration: none;
+    }
+}