ydb-embedded-ui 4.8.2 → 4.10.0

package/dist/containers/Storage/Storage.js

@@ -1,372 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-import DataTable from '@gravity-ui/react-data-table';
-import {RadioButton} from '@gravity-ui/uikit';
-
-import {Search} from '../../components/Search';
-import {UsageFilter} from './UsageFilter';
-import {AutoFetcher} from '../../utils/autofetcher';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
-import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
-import {UptimeFilter} from '../../components/UptimeFIlter';
-import {AccessDenied} from '../../components/Errors/403';
-import {EntitiesCount} from '../../components/EntitiesCount';
-
-import {
-    getStorageInfo,
-    setInitialState,
-    getFilteredEntities,
-    VisibleEntities,
-    setVisibleEntities,
-    setStorageFilter,
-    setUsageFilter,
-    StorageTypes,
-    setStorageType,
-    setNodesUptimeFilter,
-    setDataWasNotLoaded,
-    VisibleEntitiesTitles,
-    getStoragePoolsGroupsCount,
-    getStorageNodesCount,
-    getUsageFilterOptions,
-} from '../../store/reducers/storage';
-import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
-import StorageGroups from './StorageGroups/StorageGroups';
-import StorageNodes from './StorageNodes/StorageNodes';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-
-import './Storage.scss';
-
-const b = cn('global-storage');
-
-const FILTER_OPTIONS = {
-    Missing: 'missing',
-    Space: 'space',
-};
-
-const tableSettings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    defaultOrder: DataTable.DESCENDING,
-};
-
-class Storage extends React.Component {
-    static propTypes = {
-        loading: PropTypes.bool,
-        error: PropTypes.object,
-        wasLoaded: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        database: PropTypes.bool,
-        getStorageInfo: PropTypes.func,
-        setInitialState: PropTypes.func,
-        flatListStorageEntities: PropTypes.array,
-        groupsCount: PropTypes.object,
-        nodesCount: PropTypes.object,
-        setStorageFilter: PropTypes.func,
-        setVisibleEntities: PropTypes.func,
-        visibleEntities: PropTypes.string,
-        tenant: PropTypes.string,
-        nodeId: PropTypes.string,
-        nodesUptimeFilter: PropTypes.string,
-        setNodesUptimeFilter: PropTypes.func,
-        setDataWasNotLoaded: PropTypes.func,
-        additionalNodesInfo: PropTypes.object,
-    };
-
-    componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
-            this.props;
-
-        this.autofetcher = new AutoFetcher();
-        getNodesList();
-        if (tenant || nodeId) {
-            setVisibleEntities(VisibleEntities.All);
-            this.getStorageInfo({
-                filter: FILTER_OPTIONS.All,
-                type: storageType,
-            });
-        } else {
-            this.getStorageInfo({
-                filter: FILTER_OPTIONS.Missing,
-                type: storageType,
-            });
-            this.autofetcher.fetch(() =>
-                this.getStorageInfo({
-                    filter: FILTER_OPTIONS.Missing,
-                    type: storageType,
-                }),
-            );
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {visibleEntities, storageType, autorefresh, database, tenant, setDataWasNotLoaded} =
-            this.props;
-
-        const startFetch = () => {
-            this.getStorageInfo({
-                filter: FILTER_OPTIONS[visibleEntities],
-                type: storageType,
-            });
-        };
-
-        const restartAutorefresh = () => {
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() =>
-                this.getStorageInfo({
-                    filter: FILTER_OPTIONS[visibleEntities],
-                    type: storageType,
-                }),
-            );
-        };
-
-        if (database && !autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-        if (database && autorefresh && !prevProps.autorefresh) {
-            startFetch();
-            restartAutorefresh();
-        }
-
-        if (
-            storageType !== prevProps.storageType ||
-            visibleEntities !== prevProps.visibleEntities
-        ) {
-            startFetch();
-
-            if (!database || (database && autorefresh)) {
-                restartAutorefresh();
-            }
-        }
-
-        if (tenant !== prevProps.tenant) {
-            setDataWasNotLoaded();
-            startFetch();
-            restartAutorefresh();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-        this.props.setInitialState();
-    }
-
-    getStorageInfo(data) {
-        const {tenant, nodeId, getStorageInfo} = this.props;
-
-        getStorageInfo(
-            {
-                tenant,
-                nodeId,
-                ...data,
-            },
-            {
-                concurrentId: 'getStorageInfo',
-            },
-        );
-    }
-
-    renderLoader() {
-        return <TableSkeleton className={b('loader')} />;
-    }
-
-    renderDataTable() {
-        const {
-            flatListStorageEntities,
-            visibleEntities,
-            nodesUptimeFilter,
-            nodes,
-            storageType,
-            additionalNodesInfo,
-        } = this.props;
-
-        return (
-            <div className={b('table-wrapper')}>
-                {storageType === StorageTypes.groups && (
-                    <StorageGroups
-                        visibleEntities={visibleEntities}
-                        data={flatListStorageEntities}
-                        tableSettings={tableSettings}
-                        nodes={nodes}
-                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
-                    />
-                )}
-                {storageType === StorageTypes.nodes && (
-                    <StorageNodes
-                        visibleEntities={visibleEntities}
-                        nodesUptimeFilter={nodesUptimeFilter}
-                        data={flatListStorageEntities}
-                        tableSettings={tableSettings}
-                        onShowAll={this.onShowAllNodes}
-                        additionalNodesInfo={additionalNodesInfo}
-                    />
-                )}
-            </div>
-        );
-    }
-
-    onGroupVisibilityChange = (value) => {
-        const {setVisibleEntities} = this.props;
-        setVisibleEntities(value);
-    };
-
-    onStorageTypeChange = (value) => {
-        const {setStorageType} = this.props;
-        setStorageType(value);
-    };
-
-    onUptimeFilterChange = (value) => {
-        this.props.setNodesUptimeFilter(value);
-    };
-
-    onShowAllNodes = () => {
-        this.onGroupVisibilityChange(VisibleEntities.All);
-        this.onUptimeFilterChange(NodesUptimeFilterValues.All);
-    };
-
-    renderEntitiesCount() {
-        const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
-            this.props;
-
-        const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
-        const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
-
-        return (
-            <EntitiesCount
-                label={entityName}
-                loading={loading && !wasLoaded}
-                total={count.total}
-                current={flatListStorageEntities.length}
-            />
-        );
-    }
-
-    renderControls() {
-        const {
-            filter,
-            setStorageFilter,
-            visibleEntities,
-            storageType,
-            usageFilter,
-            nodesUptimeFilter,
-            setUsageFilter,
-            usageFilterOptions,
-        } = this.props;
-
-        return (
-            <div className={b('controls')}>
-                <div className={b('search')}>
-                    <Search
-                        placeholder={
-                            storageType === StorageTypes.groups
-                                ? 'Group ID, Pool name'
-                                : 'Node ID, FQDN'
-                        }
-                        onChange={setStorageFilter}
-                        value={filter}
-                    />
-                </div>
-
-                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
-                    <RadioButton.Option value={StorageTypes.groups}>
-                        {StorageTypes.groups}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={StorageTypes.nodes}>
-                        {StorageTypes.nodes}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
-                    <RadioButton.Option value={VisibleEntities.Missing}>
-                        {VisibleEntitiesTitles[VisibleEntities.Missing]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.Space}>
-                        {VisibleEntitiesTitles[VisibleEntities.Space]}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={VisibleEntities.All}>
-                        {VisibleEntitiesTitles[VisibleEntities.All]}
-                    </RadioButton.Option>
-                </RadioButton>
-
-                {storageType === StorageTypes.nodes && (
-                    <UptimeFilter value={nodesUptimeFilter} onChange={this.onUptimeFilterChange} />
-                )}
-
-                {storageType === StorageTypes.groups && (
-                    <UsageFilter
-                        value={usageFilter}
-                        onChange={setUsageFilter}
-                        groups={usageFilterOptions}
-                        disabled={usageFilterOptions.length === 0}
-                    />
-                )}
-                {this.renderEntitiesCount()}
-            </div>
-        );
-    }
-
-    render() {
-        const {loading, wasLoaded, error} = this.props;
-        const showLoader = loading && !wasLoaded;
-
-        if (error) {
-            if (error.status === 403) {
-                return <AccessDenied />;
-            }
-
-            return <div className={b()}>{error.statusText}</div>;
-        }
-
-        return (
-            <div className={b()}>
-                {this.renderControls()}
-                {showLoader ? this.renderLoader() : this.renderDataTable()}
-            </div>
-        );
-    }
-}
-
-function mapStateToProps(state) {
-    const {
-        loading,
-        wasLoaded,
-        error,
-        visible: visibleEntities,
-        type: storageType,
-        filter,
-        usageFilter,
-        nodesUptimeFilter,
-    } = state.storage;
-
-    return {
-        flatListStorageEntities: getFilteredEntities(state),
-        groupsCount: getStoragePoolsGroupsCount(state),
-        autorefresh: state.schema.autorefresh,
-        nodes: selectNodesMap(state),
-        nodesCount: getStorageNodesCount(state),
-        loading,
-        wasLoaded,
-        error,
-        visibleEntities,
-        storageType,
-        filter,
-        usageFilter,
-        nodesUptimeFilter,
-        usageFilterOptions: getUsageFilterOptions(state),
-    };
-}
-
-const mapDispatchToProps = {
-    getStorageInfo,
-    setInitialState,
-    setStorageFilter,
-    setUsageFilter,
-    setVisibleEntities: setVisibleEntities,
-    setNodesUptimeFilter,
-    getNodesList,
-    setStorageType,
-    setDataWasNotLoaded,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Storage);

package/dist/containers/Tenant/Preview/Preview.js

@@ -1,168 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader, Button} from '@gravity-ui/uikit';
-
-import {Icon} from '../../../components/Icon';
-import Fullscreen from '../../../components/Fullscreen/Fullscreen';
-import {QueryResultTable} from '../../../components/QueryResultTable';
-
-import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
-import {prepareQueryError} from '../../../utils/query';
-
-import {isTableType} from '../utils/schema';
-import {AutoFetcher} from '../../../utils/autofetcher';
-import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-
-import './Preview.scss';
-
-const b = cn('kv-preview');
-
-class Preview extends React.Component {
-    static propTypes = {
-        sendQuery: PropTypes.func,
-        database: PropTypes.string,
-        table: PropTypes.string,
-        error: PropTypes.string,
-        data: PropTypes.array,
-        loading: PropTypes.bool,
-        type: PropTypes.string,
-        partCount: PropTypes.string,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        this.sendQueryForPreview();
-        this.autofetcher = new AutoFetcher();
-        if (this.props.autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.sendQueryForPreview());
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {table, autorefresh, setQueryOptions} = this.props;
-
-        if (prevProps.table !== table) {
-            this.sendQueryForPreview();
-            setQueryOptions({
-                wasLoaded: false,
-                data: undefined,
-            });
-        }
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.sendQueryForPreview();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.sendQueryForPreview());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    sendQueryForPreview = () => {
-        const {sendQuery, database, table, type} = this.props;
-
-        if (!isTableType(type)) {
-            return;
-        }
-
-        const query = `--!syntax_v1\nselect * from \`${table}\` limit 32`;
-        sendQuery({
-            query,
-            database: database,
-            action: 'execute-scan',
-            path: table,
-        });
-    };
-
-    onClosePreview = () => {
-        this.props.setShowPreview(false);
-    };
-
-    renderHeader = () => {
-        const {currentSchemaPath, error} = this.props;
-        return (
-            <div className={b('header')}>
-                <div className={b('title')}>
-                    Preview <div className={b('table-name')}>{currentSchemaPath}</div>
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(error)} />
-                    <Button
-                        view="flat-secondary"
-                        onClick={this.onClosePreview}
-                        title="Close preview"
-                    >
-                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Button>
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        const {error, loading, data, type, wasLoaded, isFullscreen} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        let message;
-
-        if (!isTableType(type)) {
-            message = <div className={b('message-container')}>Not available</div>;
-        } else if (error) {
-            message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
-        }
-
-        const content = message ?? (
-            <div className={b('result')}>
-                <QueryResultTable data={data.result} columns={data.columns} />
-            </div>
-        );
-
-        return (
-            <div className={b()}>
-                {this.renderHeader()}
-                {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {data = {}, loading, error, wasLoaded} = state.preview;
-    const {autorefresh, currentSchemaPath} = state.schema;
-
-    return {
-        data,
-        loading,
-        error,
-        autorefresh,
-        wasLoaded,
-        currentSchemaPath,
-        isFullscreen: state.fullscreen,
-    };
-};
-
-const mapDispatchToProps = {
-    sendQuery,
-    setQueryOptions,
-    setShowPreview,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Preview);

package/dist/containers/Tenant/Query/QueryEditorControls/OldQueryEditorControls.tsx

@@ -1,90 +0,0 @@
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
-import {useMemo} from 'react';
-
-import {QueryModes} from '../../../../types/store/query';
-import {Icon} from '../../../../components/Icon';
-
-import SaveQuery from '../SaveQuery/SaveQuery';
-
-import {QueryEditorControlsProps, b} from './shared';
-
-import './QueryEditorControls.scss';
-
-type OldQueryModes = QueryModes.script | QueryModes.scan;
-
-export const QueryModeSelectorTitles = {
-    [QueryModes.script]: 'Script',
-    [QueryModes.scan]: 'Scan',
-} as const;
-
-export const OldQueryEditorControls = ({
-    onRunButtonClick,
-    runIsLoading,
-    onExplainButtonClick,
-    explainIsLoading,
-    onSaveQueryClick,
-    savedQueries,
-    disabled,
-    onUpdateQueryMode,
-    queryMode,
-}: QueryEditorControlsProps) => {
-    const runModeSelectorMenuItems = useMemo(() => {
-        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
-            return {
-                text: `Run ${title}`,
-                action: () => {
-                    onUpdateQueryMode(mode as OldQueryModes);
-                },
-            };
-        });
-    }, [onUpdateQueryMode]);
-
-    return (
-        <div className={b()}>
-            <div className={b('left')}>
-                <div className={b('run')}>
-                    <Button
-                        onClick={() => onRunButtonClick(queryMode)}
-                        view="action"
-                        pin="round-brick"
-                        disabled={disabled}
-                        loading={runIsLoading}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {`Run ${QueryModeSelectorTitles[queryMode as OldQueryModes]}`}
-                    </Button>
-                    <DropdownMenu
-                        items={runModeSelectorMenuItems}
-                        popupProps={{className: b('select-query-action-popup')}}
-                        switcher={
-                            <Button
-                                view="action"
-                                pin="brick-round"
-                                disabled={disabled}
-                                loading={runIsLoading}
-                                className={b('select-query-action')}
-                            >
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </Button>
-                        }
-                    />
-                </div>
-                <Button
-                    onClick={() => {
-                        // Without defined query mode it sends 'explain' action
-                        onExplainButtonClick();
-                    }}
-                    disabled={disabled}
-                    loading={explainIsLoading}
-                >
-                    Explain
-                </Button>
-            </div>
-            <SaveQuery
-                savedQueries={savedQueries}
-                onSaveQuery={onSaveQueryClick}
-                saveButtonDisabled={disabled}
-            />
-        </div>
-    );
-};

package/dist/containers/Tenant/Query/QueryEditorControls/shared.ts

@@ -1,18 +0,0 @@
-import block from 'bem-cn-lite';
-
-import type {QueryModes} from '../../../../types/store/query';
-
-export const b = block('ydb-query-editor-controls');
-
-export interface QueryEditorControlsProps {
-    onRunButtonClick: (mode?: QueryModes) => void;
-    runIsLoading: boolean;
-    onExplainButtonClick: (mode?: QueryModes) => void;
-    explainIsLoading: boolean;
-    onSaveQueryClick: (queryName: string) => void;
-    savedQueries: unknown;
-    disabled: boolean;
-    onUpdateQueryMode: (mode: QueryModes) => void;
-    queryMode: QueryModes;
-    enableQueryModesForExplain: boolean;
-}