ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -1,120 +0,0 @@
-import DataTable, {Column} from '@gravity-ui/react-data-table';
-
-import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
-import {isUnavailableNode} from '../../../utils/nodes';
-import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
-import {getDefaultNodePath} from '../../Node/NodePages';
-
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
-const columns: Column<PreparedClusterNode>[] = [
-    {
-        name: 'NodeId',
-        header: '#',
-        width: '80px',
-        align: DataTable.LEFT,
-        render: ({row}) => row.NodeId,
-    },
-    {
-        name: 'Host',
-        render: ({row}) => {
-            const port =
-                row.Endpoints && row.Endpoints.find((item) => item.Name === 'http-mon')?.Address;
-            const host = row.Host && `${row.Host}${port || ''}`;
-            const title = host || 'unknown';
-
-            const nodePath =
-                !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
-
-            return (
-                <EntityStatus name={title} path={nodePath} hasClipboardButton showStatus={false} />
-            );
-        },
-        width: '400px',
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'Endpoints',
-        sortable: false,
-        render: ({row}) =>
-            row.Endpoints
-                ? row.Endpoints.map(({Name, Address}) => `${Name} ${Address}`).join(', ')
-                : '-',
-        width: '300px',
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'uptime',
-        header: 'Uptime',
-        sortAccessor: ({StartTime}) => StartTime && -StartTime,
-        width: '120px',
-        align: DataTable.LEFT,
-        render: ({row}) => row.uptime,
-    },
-    {
-        name: 'MemoryUsed',
-        header: 'Memory used',
-        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
-        defaultOrder: DataTable.DESCENDING,
-        render: ({row}) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
-        width: '120px',
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'MemoryLimit',
-        header: 'Memory limit',
-        sortAccessor: ({MemoryLimit = 0}) => Number(MemoryLimit),
-        defaultOrder: DataTable.DESCENDING,
-        render: ({row}) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
-        width: '120px',
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'PoolStats',
-        header: 'Pools',
-        sortAccessor: ({PoolStats = []}) =>
-            PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
-        defaultOrder: DataTable.DESCENDING,
-        width: '120px',
-        render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
-        align: DataTable.LEFT,
-    },
-    {
-        name: 'LoadAverage',
-        header: 'Load average',
-        sortAccessor: ({LoadAverage = []}) =>
-            LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
-        defaultOrder: DataTable.DESCENDING,
-        width: '200px',
-        render: ({row}) =>
-            row.LoadAverage && row.LoadAverage.length > 0 ? (
-                <ProgressViewer
-                    value={row.LoadAverage[0]}
-                    percents={true}
-                    capacity={100}
-                    colorizeProgress={true}
-                />
-            ) : (
-                '—'
-            ),
-        align: DataTable.LEFT,
-    },
-];
-
-interface NodesTableProps {
-    nodes: PreparedClusterNode[];
-}
-
-export const NodesTable = ({nodes}: NodesTableProps) => {
-    return (
-        <DataTable
-            theme="yandex-cloud"
-            data={nodes}
-            columns={columns}
-            settings={DEFAULT_TABLE_SETTINGS}
-        />
-    );
-};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -1,65 +0,0 @@
-import {Progress} from '@gravity-ui/uikit';
-import block from 'bem-cn-lite';
-import {ClipboardButton} from '../../../components/ClipboardButton';
-import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
-import type {VersionValue} from '../../../types/versions';
-import type {GroupedNodesItem} from '../types';
-import './NodesTreeTitle.scss';
-
-const b = block('ydb-versions-nodes-tree-title');
-
-interface NodesTreeTitleProps {
-    title?: string;
-    nodes?: PreparedClusterNode[];
-    items?: GroupedNodesItem[];
-    versionColor?: string;
-    versionsValues?: VersionValue[];
-}
-
-export const NodesTreeTitle = ({
-    title,
-    nodes,
-    items,
-    versionColor,
-    versionsValues,
-}: NodesTreeTitleProps) => {
-    let nodesAmount;
-    if (items) {
-        nodesAmount = items.reduce((acc, curr) => {
-            if (!curr.nodes) {
-                return acc;
-            }
-            return acc + curr.nodes.length;
-        }, 0);
-    } else {
-        nodesAmount = nodes ? nodes.length : 0;
-    }
-
-    return (
-        <div className={b('overview')}>
-            <div className={b('overview-container')}>
-                {versionColor ? (
-                    <div className={b('version-color')} style={{background: versionColor}} />
-                ) : null}
-                {title ? (
-                    <span className={b('overview-title')}>
-                        {title}
-                        <ClipboardButton text={title} size="s" className={b('clipboard-button')} />
-                    </span>
-                ) : null}
-            </div>
-            <div className={b('overview-info')}>
-                <div>
-                    <span className={b('info-value')}>{nodesAmount}</span>
-                    <span className={b('info-label', {margin: 'left'})}>Nodes</span>
-                </div>
-                {versionsValues ? (
-                    <div className={b('version-progress')}>
-                        <span className={b('info-label', {margin: 'right'})}>Versions</span>
-                        <Progress size="s" value={100} stack={versionsValues} />
-                    </div>
-                ) : null}
-            </div>
-        </div>
-    );
-};

package/dist/containers/Versions/Versions.tsx

@@ -1,129 +0,0 @@
-import {useState} from 'react';
-import {useDispatch} from 'react-redux';
-import block from 'bem-cn-lite';
-
-import {Checkbox, RadioButton} from '@gravity-ui/uikit';
-
-import type {VersionToColorMap} from '../../types/versions';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
-import {Loader} from '../../components/Loader';
-
-import {getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes} from './groupNodes';
-import {GroupedNodesTree} from './GroupedNodesTree/GroupedNodesTree';
-import {GroupByValue} from './types';
-
-import './Versions.scss';
-
-const b = block('ydb-versions');
-
-interface VersionsProps {
-    versionToColor?: VersionToColorMap;
-}
-
-export const Versions = ({versionToColor}: VersionsProps) => {
-    const dispatch = useDispatch();
-
-    const {nodes = [], loading, wasLoaded} = useTypedSelector((state) => state.clusterNodes);
-
-    useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
-
-    const [groupByValue, setGroupByValue] = useState<GroupByValue>(GroupByValue.VERSION);
-    const [expanded, setExpanded] = useState(false);
-
-    const handleGroupByValueChange = (value: string) => {
-        setGroupByValue(value as GroupByValue);
-    };
-
-    const renderGroupControl = () => {
-        return (
-            <div className={b('group')}>
-                <span className={b('label')}>Group by:</span>
-                <RadioButton value={groupByValue} onUpdate={handleGroupByValueChange}>
-                    <RadioButton.Option value={GroupByValue.TENANT}>
-                        {GroupByValue.TENANT}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={GroupByValue.VERSION}>
-                        {GroupByValue.VERSION}
-                    </RadioButton.Option>
-                </RadioButton>
-            </div>
-        );
-    };
-    const renderControls = () => {
-        return (
-            <div className={b('controls')}>
-                {renderGroupControl()}
-                <Checkbox
-                    className={b('checkbox')}
-                    onChange={() => setExpanded((value) => !value)}
-                    checked={expanded}
-                >
-                    All expanded
-                </Checkbox>
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return <Loader />;
-    }
-
-    const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
-    const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
-    const otherNodes = getOtherNodes(nodes, versionToColor);
-    const storageNodesContent = storageNodes?.length ? (
-        <>
-            <h3>Storage nodes</h3>
-            {storageNodes.map(({title, nodes: itemNodes, items, versionColor}) => (
-                <GroupedNodesTree
-                    key={`storage-nodes-${title}`}
-                    title={title}
-                    nodes={itemNodes}
-                    items={items}
-                    versionColor={versionColor}
-                />
-            ))}
-        </>
-    ) : null;
-    const tenantNodesContent = tenantNodes?.length ? (
-        <>
-            <h3>Database nodes</h3>
-            {renderControls()}
-            {tenantNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
-                <GroupedNodesTree
-                    key={`tenant-nodes-${title}`}
-                    title={title}
-                    nodes={itemNodes}
-                    items={items}
-                    expanded={expanded}
-                    versionColor={versionColor}
-                    versionsValues={versionsValues}
-                />
-            ))}
-        </>
-    ) : null;
-    const otherNodesContent = otherNodes?.length ? (
-        <>
-            <h3>Other nodes</h3>
-            {otherNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
-                <GroupedNodesTree
-                    key={`other-nodes-${title}`}
-                    title={title}
-                    nodes={itemNodes}
-                    items={items}
-                    versionColor={versionColor}
-                    versionsValues={versionsValues}
-                />
-            ))}
-        </>
-    ) : null;
-
-    return (
-        <div className={b('versions')}>
-            {storageNodesContent}
-            {tenantNodesContent}
-            {otherNodesContent}
-        </div>
-    );
-};

package/dist/containers/Versions/groupNodes.ts

@@ -1,124 +0,0 @@
-import {groupBy} from 'lodash';
-
-import type {VersionToColorMap} from '../../types/versions';
-import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
-import {getMinorVersion, parseNodesToVersionsValues} from '../../utils/versions';
-
-import {GroupByValue, GroupedNodesItem} from './types';
-
-const sortByTitle = (a: GroupedNodesItem, b: GroupedNodesItem) =>
-    a.title?.localeCompare(b.title || '') || -1;
-
-export const getGroupedTenantNodes = (
-    nodes: PreparedClusterNode[] | undefined,
-    versionToColor: VersionToColorMap | undefined,
-    groupByValue: GroupByValue,
-): GroupedNodesItem[] | undefined => {
-    if (!nodes || !nodes.length) {
-        return undefined;
-    }
-
-    if (groupByValue === GroupByValue.VERSION) {
-        const dividedByVersion = groupBy(nodes, 'Version');
-
-        return Object.keys(dividedByVersion)
-            .map<GroupedNodesItem | null>((version) => {
-                const filteredNodes = dividedByVersion[version].filter(({Tenants}) =>
-                    Boolean(Tenants),
-                );
-                const dividedByTenant = groupBy(filteredNodes, 'Tenants');
-
-                const items = Object.keys(dividedByTenant)
-                    .map((tenant) => {
-                        return {
-                            title: tenant,
-                            nodes: dividedByTenant[tenant],
-                        };
-                    })
-                    .sort(sortByTitle);
-
-                if (!items.length) {
-                    return null;
-                }
-
-                return {
-                    title: version,
-                    items: items,
-                    versionColor: versionToColor?.get(getMinorVersion(version)),
-                };
-            })
-            .filter((item): item is GroupedNodesItem => Boolean(item));
-    } else {
-        const filteredNodes = nodes.filter(({Tenants}) => Boolean(Tenants));
-        const dividedByTenant = groupBy(filteredNodes, 'Tenants');
-
-        return Object.keys(dividedByTenant)
-            .map<GroupedNodesItem | null>((tenant) => {
-                const versionsValues = parseNodesToVersionsValues(
-                    dividedByTenant[tenant],
-                    versionToColor,
-                );
-
-                const dividedByVersion = groupBy(dividedByTenant[tenant], 'Version');
-                const preparedItems = Object.keys(dividedByVersion).map((version) => {
-                    return {
-                        title: version,
-                        nodes: dividedByVersion[version],
-                        versionColor: versionToColor?.get(getMinorVersion(version)),
-                    };
-                });
-
-                if (!preparedItems.length) {
-                    return null;
-                }
-
-                return {
-                    title: tenant,
-                    items: preparedItems,
-                    versionsValues,
-                };
-            })
-            .filter((item): item is GroupedNodesItem => Boolean(item))
-            .sort(sortByTitle);
-    }
-};
-
-export const getGroupedStorageNodes = (
-    nodes: PreparedClusterNode[] | undefined,
-    versionToColor: VersionToColorMap | undefined,
-): GroupedNodesItem[] | undefined => {
-    if (!nodes || !nodes.length) {
-        return undefined;
-    }
-
-    const storageNodes = nodes.filter(({Roles}) => Roles?.includes('Storage'));
-    const storageNodesDividedByVersion = groupBy(storageNodes, 'Version');
-
-    return Object.keys(storageNodesDividedByVersion).map((version) => {
-        return {
-            title: version,
-            nodes: storageNodesDividedByVersion[version],
-            versionColor: versionToColor?.get(getMinorVersion(version)),
-        };
-    });
-};
-
-export const getOtherNodes = (
-    nodes: PreparedClusterNode[] | undefined,
-    versionToColor: VersionToColorMap | undefined,
-): GroupedNodesItem[] | undefined => {
-    if (!nodes || !nodes.length) {
-        return undefined;
-    }
-
-    const otherNodes = nodes.filter(({Roles}) => !Roles);
-    const otherNodesDividedByVersion = groupBy(otherNodes, 'Version');
-
-    return Object.keys(otherNodesDividedByVersion).map((version) => {
-        return {
-            title: version,
-            nodes: otherNodesDividedByVersion[version],
-            versionColor: versionToColor?.get(getMinorVersion(version)),
-        };
-    });
-};

package/dist/containers/Versions/types.ts

@@ -1,16 +0,0 @@
-import type {VersionValue} from '../../types/versions';
-import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
-
-export interface GroupedNodesItem {
-    title?: string;
-    nodes?: PreparedClusterNode[];
-    items?: GroupedNodesItem[];
-    versionColor?: string;
-    versionsValues?: VersionValue[];
-}
-
-export enum GroupByValue {
-    VERSION = 'Version',
-    TENANT = 'Database',
-    STORAGE = 'Storage',
-}

package/dist/contexts/HistoryContext.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import {createBrowserHistory} from 'history';
-
-const HistoryContext = React.createContext(createBrowserHistory());
-HistoryContext.displayName = 'HistoryContext';
-export default HistoryContext;

package/dist/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Provider} from 'react-redux';
-
-import '@gravity-ui/uikit/styles/styles.scss';
-
-import App from './containers/App/App';
-import configureStore from './store';
-import reportWebVitals from './reportWebVitals';
-import HistoryContext from './contexts/HistoryContext';
-import {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary';
-
-import './styles/themes.scss';
-import './styles/constants.scss';
-import './index.css';
-
-const {store, history} = configureStore();
-window.store = store;
-
-ReactDOM.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <Provider store={store}>
-                <HistoryContext.Provider value={history}>
-                    <App />
-                </HistoryContext.Provider>
-            </Provider>
-        </ErrorBoundary>
-    </React.StrictMode>,
-    document.getElementById('root'),
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/dist/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/dist/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import type {ReportHandler} from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-    if (onPerfEntry && onPerfEntry instanceof Function) {
-        import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
-            getCLS(onPerfEntry);
-            getFID(onPerfEntry);
-            getFCP(onPerfEntry);
-            getLCP(onPerfEntry);
-            getTTFB(onPerfEntry);
-        });
-    }
-};
-
-export default reportWebVitals;

package/dist/routes.ts

@@ -1,77 +0,0 @@
-import type {Location} from 'history';
-import qs from 'qs';
-import {compile} from 'path-to-regexp';
-import isEmpty from 'lodash/isEmpty';
-
-import {backend, clusterName, webVersion} from './store';
-
-export const CLUSTER = 'cluster';
-export const TENANT = 'tenant';
-export const NODE = 'node';
-export const TABLET = 'tablet';
-
-const routes = {
-    cluster: `/${CLUSTER}/:activeTab?`,
-    tenant: `/${TENANT}`,
-    node: `/${NODE}/:id/:activeTab?`,
-    tablet: `/${TABLET}/:id`,
-    tabletsFilters: `/tabletsFilters`,
-    auth: `/auth`,
-};
-
-export const parseQuery = (location: Location) => {
-    return qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-};
-
-const prepareRoute = (route: string) => {
-    let preparedRoute = route;
-    const portRegExp = /:\d{3,5}/g;
-    const portMatch = route.match(portRegExp);
-
-    // if port exists in route we escape port to avoid errors in function compile()
-    // compile(preparedRoute) parses prepared root by symbol ":"
-    // if we pass raw route and there is a port in route, compile()
-    // will try to parse the port and throw an error
-    if (portMatch) {
-        const port = portMatch[0];
-        preparedRoute = route.replace(portRegExp, ':\\' + port.slice(1));
-    }
-
-    return preparedRoute;
-};
-
-export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
-
-export function createHref(
-    route: string,
-    params?: Record<string, string | number>,
-    query: Query = {},
-) {
-    let extendedQuery = query;
-
-    const isBackendInQuery = Boolean(query.backend);
-    if (backend && !isBackendInQuery && webVersion) {
-        extendedQuery = {...query, backend};
-    }
-
-    const isClusterNameInQuery = Boolean(query.clusterName);
-    if (clusterName && !isClusterNameInQuery && webVersion) {
-        extendedQuery = {...extendedQuery, clusterName};
-    }
-
-    const search = isEmpty(extendedQuery) ? '' : `?${qs.stringify(extendedQuery, {encode: false})}`;
-
-    const preparedRoute = prepareRoute(route);
-
-    return `${compile(preparedRoute)(params)}${search}`;
-}
-
-// embedded version could be located in some folder (e.g. host/some_folder/app_router_path)
-// window.location has the full pathname, while location from router ignores path to project
-// this navigation assumes page reloading
-export const createExternalUILink = (query = {}) =>
-    createHref(window.location.pathname, undefined, query);
-
-export default routes;