ydb-embedded-ui 4.33.0 → 5.0.0

package/dist/containers/Tenant/utils/schemaControls.tsx

@@ -1,69 +0,0 @@
-import {Dispatch} from 'react';
-
-import {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
-import {Button} from '@gravity-ui/uikit';
-
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {Icon} from '../../../components/Icon';
-
-import i18n from '../i18n';
-
-interface ControlsAdditionalEffects {
-    setActivePath: (path: string) => void;
-}
-
-const bindActions = (
-    path: string,
-    dispatch: Dispatch<any>,
-    additionalEffects: ControlsAdditionalEffects,
-) => {
-    const {setActivePath} = additionalEffects;
-
-    return {
-        openPreview: () => {
-            dispatch(setShowPreview(true));
-            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-            setActivePath(path);
-        },
-    };
-};
-
-type Controls = ReturnType<Required<NavigationTreeProps>['renderAdditionalNodeElements']>;
-
-export const getControls =
-    (dispatch: Dispatch<any>, additionalEffects: ControlsAdditionalEffects) =>
-    (path: string, type: NavigationTreeNodeType) => {
-        const options = bindActions(path, dispatch, additionalEffects);
-        const openPreview = (
-            <Button
-                view="flat-secondary"
-                onClick={options.openPreview}
-                title={i18n('actions.openPreview')}
-                size="s"
-            >
-                <Icon name="tablePreview" />
-            </Button>
-        );
-
-        const nodeTypeToControls: Record<NavigationTreeNodeType, Controls> = {
-            database: undefined,
-            directory: undefined,
-
-            table: openPreview,
-            column_table: openPreview,
-
-            index_table: undefined,
-            topic: undefined,
-            stream: undefined,
-
-            index: undefined,
-
-            external_table: openPreview,
-            external_data_source: undefined,
-        };
-
-        return nodeTypeToControls[type];
-    };

package/dist/containers/Tenants/Tenants.tsx

@@ -1,263 +0,0 @@
-import cn from 'bem-cn-lite';
-import {useDispatch} from 'react-redux';
-
-import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Button} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
-import {TabletsStatistic} from '../../components/TabletsStatistic';
-import {ProblemFilter} from '../../components/ProblemFilter';
-import {Illustration} from '../../components/Illustration';
-import {Search} from '../../components/Search';
-import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {ResponseError} from '../../components/Errors/ResponseError';
-
-import type {AdditionalTenantsProps} from '../../types/additionalProps';
-import type {ProblemFilterValue} from '../../store/reducers/settings/types';
-import type {PreparedTenant} from '../../store/reducers/tenants/types';
-import {getTenantsInfo, setSearchValue} from '../../store/reducers/tenants/tenants';
-import {
-    selectFilteredTenants,
-    selectTenantsSearchValue,
-} from '../../store/reducers/tenants/selectors';
-import {
-    changeFilter,
-    ProblemFilterValues,
-    selectProblemFilter,
-} from '../../store/reducers/settings/settings';
-import {
-    formatBytesToGigabyte,
-    formatCPU,
-    formatNumber,
-} from '../../utils/dataFormatters/dataFormatters';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {clusterName} from '../../store';
-
-import {getTenantPath} from '../Tenant/TenantPages';
-
-import './Tenants.scss';
-
-const b = cn('tenants');
-
-interface TenantsProps {
-    additionalTenantsProps?: AdditionalTenantsProps;
-}
-
-export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
-    const dispatch = useDispatch();
-
-    const {error, loading, wasLoaded} = useTypedSelector((state) => state.tenants);
-    const searchValue = useTypedSelector(selectTenantsSearchValue);
-    const filteredTenants = useTypedSelector(selectFilteredTenants);
-    const problemFilter = useTypedSelector(selectProblemFilter);
-
-    useAutofetcher(
-        () => {
-            dispatch(getTenantsInfo(clusterName));
-        },
-        [dispatch],
-        true,
-    );
-
-    const handleProblemFilterChange = (value: ProblemFilterValue) => {
-        dispatch(changeFilter(value));
-    };
-
-    const handleSearchChange = (value: string) => {
-        dispatch(setSearchValue(value));
-    };
-
-    const renderControls = () => {
-        return (
-            <>
-                <Search
-                    value={searchValue}
-                    onChange={handleSearchChange}
-                    placeholder="Database name"
-                    className={b('search')}
-                />
-                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
-            </>
-        );
-    };
-
-    const renderTable = () => {
-        const getTenantBackend = (tenant: PreparedTenant) => {
-            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
-            return additionalTenantsProps?.prepareTenantBackend?.(backend);
-        };
-
-        const columns: Column<PreparedTenant>[] = [
-            {
-                name: 'Name',
-                header: 'Database',
-                render: ({row}) => {
-                    const backend = getTenantBackend(row);
-                    const isExternalLink = Boolean(backend);
-                    return (
-                        <div className={b('name-wrapper')}>
-                            <EntityStatus
-                                externalLink={isExternalLink}
-                                className={b('name')}
-                                name={row.Name || 'unknown database'}
-                                withLeftTrim={true}
-                                status={row.Overall}
-                                hasClipboardButton
-                                path={getTenantPath({
-                                    name: row.Name,
-                                    backend,
-                                })}
-                            />
-                            {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
-                        </div>
-                    );
-                },
-                width: 440,
-                sortable: true,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'controlPlaneName',
-                header: 'Name',
-                render: ({row}) => {
-                    return row.controlPlaneName;
-                },
-                width: 200,
-                sortable: true,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'Type',
-                width: 200,
-                render: ({row}) => {
-                    if (row.Type !== 'Serverless') {
-                        return row.Type;
-                    }
-
-                    return (
-                        <div className={b('type')}>
-                            <span className={b('type-value')}>{row.Type}</span>
-                            <Button
-                                className={b('type-button')}
-                                onClick={() => handleSearchChange(row.sharedTenantName || '')}
-                            >
-                                Show shared
-                            </Button>
-                        </div>
-                    );
-                },
-            },
-            {
-                name: 'State',
-                width: 90,
-                render: ({row}) => (row.State ? row.State.toLowerCase() : '—'),
-                customStyle: () => ({textTransform: 'capitalize'}),
-            },
-            {
-                name: 'cpu',
-                header: 'CPU',
-                width: 80,
-                render: ({row}) => {
-                    // Don't show values below 0.01 when formatted
-                    if (row.cpu > 10_000) {
-                        return formatCPU(row.cpu);
-                    }
-                    return '—';
-                },
-                align: DataTable.RIGHT,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'memory',
-                header: 'Memory',
-                width: 120,
-                render: ({row}) => (row.memory ? formatBytesToGigabyte(row.memory) : '—'),
-                align: DataTable.RIGHT,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'storage',
-                header: 'Storage',
-                width: 120,
-                render: ({row}) => (row.storage ? formatBytesToGigabyte(row.storage) : '—'),
-                align: DataTable.RIGHT,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'nodesCount',
-                header: 'Nodes',
-                width: 100,
-                render: ({row}) => (row.nodesCount ? formatNumber(row.nodesCount) : '—'),
-                align: DataTable.RIGHT,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'groupsCount',
-                header: 'Groups',
-                width: 100,
-                render: ({row}) => (row.groupsCount ? formatNumber(row.groupsCount) : '—'),
-                align: DataTable.RIGHT,
-                defaultOrder: DataTable.DESCENDING,
-            },
-            {
-                name: 'PoolStats',
-                header: 'Pools',
-                width: 100,
-                sortAccessor: ({PoolStats = []}) =>
-                    PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
-                defaultOrder: DataTable.DESCENDING,
-                align: DataTable.LEFT,
-                render: ({row}) => <PoolsGraph pools={row.PoolStats} />,
-            },
-            {
-                name: 'Tablets',
-                header: 'Tablets States',
-                sortable: false,
-                width: 430,
-                render: ({row}) => {
-                    const backend = getTenantBackend(row);
-
-                    return row.Tablets ? (
-                        <TabletsStatistic
-                            path={row.Name}
-                            tablets={row.Tablets}
-                            nodeIds={row.NodeIds || []}
-                            backend={backend}
-                        />
-                    ) : (
-                        '—'
-                    );
-                },
-            },
-        ];
-
-        if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
-            return <Illustration name="thumbsUp" width="200" />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                data={filteredTenants}
-                columns={columns}
-                settings={DEFAULT_TABLE_SETTINGS}
-                emptyDataMessage="No such tenants"
-            />
-        );
-    };
-
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
-    return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
-            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
-                {renderTable()}
-            </TableWithControlsLayout.Table>
-        </TableWithControlsLayout>
-    );
-};

package/dist/containers/UserSettings/Setting.tsx

@@ -1,93 +0,0 @@
-import type {ReactNode} from 'react';
-
-import {RadioButton, Switch} from '@gravity-ui/uikit';
-import {Settings} from '@gravity-ui/navigation';
-
-import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
-
-import {useSetting} from '../../utils/hooks';
-
-import {b} from './UserSettings';
-
-export type SettingsElementType = 'switch' | 'radio';
-
-export interface SettingProps {
-    type?: SettingsElementType;
-    title: string;
-    settingKey: string;
-    helpPopoverContent?: ReactNode;
-    options?: {value: string; content: string}[];
-    defaultValue?: unknown;
-    onValueUpdate?: VoidFunction;
-}
-
-export const Setting = ({
-    type = 'switch',
-    settingKey,
-    title,
-    helpPopoverContent,
-    options,
-    defaultValue,
-    onValueUpdate,
-}: SettingProps) => {
-    const [settingValue, setValue] = useSetting(settingKey, defaultValue);
-
-    const onUpdate = (value: unknown) => {
-        setValue(value);
-        onValueUpdate?.();
-    };
-
-    const renderTitleComponent = (value: ReactNode) => {
-        if (helpPopoverContent) {
-            return (
-                <LabelWithPopover
-                    className={b('item-with-popup')}
-                    contentClassName={b('popup')}
-                    text={value}
-                    popoverContent={helpPopoverContent}
-                />
-            );
-        }
-
-        return value;
-    };
-
-    const getSettingsElement = (elementType: SettingsElementType) => {
-        switch (elementType) {
-            case 'switch': {
-                return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
-            }
-
-            case 'radio': {
-                if (!options) {
-                    return null;
-                }
-
-                return (
-                    <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
-                        {options.map(({value, content}) => {
-                            return (
-                                <RadioButton.Option value={value} key={value}>
-                                    {content}
-                                </RadioButton.Option>
-                            );
-                        })}
-                    </RadioButton>
-                );
-            }
-
-            default:
-                return null;
-        }
-    };
-
-    return (
-        <Settings.Item
-            title={title}
-            highlightedTitle={title}
-            renderTitleComponent={renderTitleComponent}
-        >
-            {getSettingsElement(type)}
-        </Settings.Item>
-    );
-};

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,40 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Settings} from '@gravity-ui/navigation';
-
-import {YDBEmbeddedUISettings, settings} from './settings';
-import {Setting} from './Setting';
-
-import './UserSettings.scss';
-
-export const b = cn('ydb-user-settings');
-
-interface UserSettingsProps {
-    settings?: YDBEmbeddedUISettings;
-}
-
-export const UserSettings = ({settings: userSettings = settings}: UserSettingsProps) => {
-    return (
-        <Settings>
-            {userSettings.map((page) => {
-                const {id, title, icon, sections = []} = page;
-
-                return (
-                    <Settings.Page key={id} id={id} title={title} icon={icon}>
-                        {sections.map((section) => {
-                            const {title: sectionTitle, settings: sectionSettings = []} = section;
-
-                            return (
-                                <Settings.Section key={id} title={sectionTitle}>
-                                    {sectionSettings.map((setting) => {
-                                        return <Setting key={setting.settingKey} {...setting} />;
-                                    })}
-                                </Settings.Section>
-                            );
-                        })}
-                    </Settings.Page>
-                );
-            })}
-        </Settings>
-    );
-};

package/dist/containers/UserSettings/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-user-settings';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

package/dist/containers/UserSettings/settings.ts

@@ -1,122 +0,0 @@
-import type {IconProps} from '@gravity-ui/uikit';
-
-import favoriteFilledIcon from '../../assets/icons/star.svg';
-import flaskIcon from '../../assets/icons/flask.svg';
-
-import {
-    INVERTED_DISKS_KEY,
-    LANGUAGE_KEY,
-    THEME_KEY,
-    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-    QUERY_USE_MULTI_SCHEMA_KEY,
-} from '../../utils/constants';
-import {Lang, defaultLang} from '../../utils/i18n';
-
-import type {SettingProps} from './Setting';
-import i18n from './i18n';
-
-export interface SettingsSection {
-    id: string;
-    title: string;
-    settings: SettingProps[];
-}
-
-export interface SettingsPage {
-    id: string;
-    title: string;
-    icon: IconProps;
-    sections: SettingsSection[];
-}
-
-export type YDBEmbeddedUISettings = SettingsPage[];
-
-const themeOptions = [
-    {
-        value: 'system',
-        content: i18n('settings.theme.option-system'),
-    },
-    {
-        value: 'light',
-        content: i18n('settings.theme.option-light'),
-    },
-    {
-        value: 'dark',
-        content: i18n('settings.theme.option-dark'),
-    },
-];
-
-export const themeSetting: SettingProps = {
-    settingKey: THEME_KEY,
-    title: i18n('settings.theme.title'),
-    type: 'radio',
-    options: themeOptions,
-};
-
-const languageOptions = [
-    {
-        value: Lang.Ru,
-        content: i18n('settings.language.option-russian'),
-    },
-    {
-        value: Lang.En,
-        content: i18n('settings.language.option-english'),
-    },
-];
-
-export const languageSetting: SettingProps = {
-    settingKey: LANGUAGE_KEY,
-    title: i18n('settings.language.title'),
-    type: 'radio',
-    options: languageOptions,
-    defaultValue: defaultLang,
-    onValueUpdate: () => {
-        window.location.reload();
-    },
-};
-
-export const invertedDisksSetting: SettingProps = {
-    settingKey: INVERTED_DISKS_KEY,
-    title: i18n('settings.invertedDisks.title'),
-};
-export const useNodesEndpointSetting: SettingProps = {
-    settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-    title: i18n('settings.useNodesEndpoint.title'),
-    helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
-};
-export const useVirtualTables: SettingProps = {
-    settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-    title: i18n('settings.useVirtualTables.title'),
-    helpPopoverContent: i18n('settings.useVirtualTables.popover'),
-};
-export const queryUseMultiSchemaSetting: SettingProps = {
-    settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
-    title: i18n('settings.queryUseMultiSchema.title'),
-    helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
-};
-
-export const appearanceSection: SettingsSection = {
-    id: 'appearanceSection',
-    title: i18n('section.appearance'),
-    settings: [themeSetting, invertedDisksSetting],
-};
-export const experimentsSection: SettingsSection = {
-    id: 'experimentsSection',
-    title: i18n('section.experiments'),
-    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
-};
-
-export const generalPage: SettingsPage = {
-    id: 'generalPage',
-    title: i18n('page.general'),
-    icon: {data: favoriteFilledIcon, height: 14, width: 14},
-    sections: [appearanceSection],
-};
-export const experimentsPage: SettingsPage = {
-    id: 'experimentsPage',
-    title: i18n('page.experiments'),
-    icon: {data: flaskIcon},
-    sections: [experimentsSection],
-};
-
-export const settings: YDBEmbeddedUISettings = [generalPage, experimentsPage];

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx

@@ -1,98 +0,0 @@
-import {useState, useEffect} from 'react';
-import cn from 'bem-cn-lite';
-
-import {TreeView} from 'ydb-ui-components';
-
-import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
-import type {VersionValue} from '../../../types/versions';
-
-import type {GroupedNodesItem} from '../types';
-import {NodesTreeTitle} from '../NodesTreeTitle/NodesTreeTitle';
-import {NodesTable} from '../NodesTable/NodesTable';
-
-import './GroupedNodesTree.scss';
-
-export const b = cn('ydb-versions-grouped-node-tree');
-
-interface GroupedNodesTreeProps {
-    title?: string;
-    nodes?: PreparedClusterNode[];
-    items?: GroupedNodesItem[];
-    expanded?: boolean;
-    versionColor?: string;
-    versionsValues?: VersionValue[];
-    level?: number;
-}
-
-export const GroupedNodesTree = ({
-    title,
-    nodes,
-    items,
-    expanded = false,
-    versionColor,
-    versionsValues,
-    level = 0,
-}: GroupedNodesTreeProps) => {
-    const [isOpened, toggleBlock] = useState(false);
-
-    useEffect(() => {
-        toggleBlock(expanded);
-    }, [expanded]);
-
-    const groupTitle = (
-        <NodesTreeTitle
-            title={title}
-            nodes={nodes}
-            items={items}
-            versionColor={versionColor}
-            versionsValues={versionsValues}
-        />
-    );
-
-    const toggleCollapsed = () => {
-        toggleBlock((value) => !value);
-    };
-
-    if (items) {
-        return (
-            <div className={b({'first-level': level === 0})}>
-                <TreeView
-                    key={title}
-                    name={groupTitle}
-                    collapsed={!isOpened}
-                    hasArrow={true}
-                    onClick={toggleCollapsed}
-                    onArrowClick={toggleCollapsed}
-                >
-                    {items.map((item, index) => (
-                        <GroupedNodesTree
-                            key={index}
-                            title={item.title}
-                            nodes={item.nodes}
-                            expanded={expanded}
-                            versionColor={item.versionColor}
-                            level={level + 1}
-                        />
-                    ))}
-                </TreeView>
-            </div>
-        );
-    }
-
-    return (
-        <div className={b({'first-level': level === 0})}>
-            <TreeView
-                key={title}
-                name={groupTitle}
-                collapsed={!isOpened}
-                hasArrow
-                onClick={toggleCollapsed}
-                onArrowClick={toggleCollapsed}
-            >
-                <div className={b('dt-wrapper')}>
-                    <NodesTable nodes={nodes || []} />
-                </div>
-            </TreeView>
-        </div>
-    );
-};