ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.js

@@ -0,0 +1,84 @@
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
+import { EPathType } from '../../../types/api/schema';
+const overview = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
+    title: 'Info',
+};
+const topQueries = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+    title: 'Top queries',
+};
+const topShards = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+    title: 'Top shards',
+};
+const nodes = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+    title: 'Nodes',
+};
+const tablets = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
+    title: 'Tablets',
+};
+const storage = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+    title: 'Storage',
+};
+const network = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.network,
+    title: 'Network',
+};
+const describe = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.describe,
+    title: 'Describe',
+};
+const hotKeys = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.hotKeys,
+    title: 'Hot keys',
+};
+const graph = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.graph,
+    title: 'Graph',
+};
+const consumers = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
+    title: 'Consumers',
+};
+const partitions = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
+    title: 'Partitions',
+};
+export const DATABASE_PAGES = [
+    overview,
+    topQueries,
+    topShards,
+    nodes,
+    tablets,
+    storage,
+    network,
+    describe,
+];
+export const TABLE_PAGES = [overview, topShards, nodes, graph, tablets, hotKeys, describe];
+export const COLUMN_TABLE_PAGES = [overview, topShards, nodes, graph, tablets, describe];
+export const DIR_PAGES = [overview, topShards, nodes, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
+export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
+export const EXTERNAL_TABLE_PAGES = [overview, describe];
+// verbose mapping to guarantee correct tabs for new path types
+// TS will error when a new type is added but not mapped here
+const pathTypeToPages = {
+    [EPathType.EPathTypeInvalid]: undefined,
+    [EPathType.EPathTypeSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
+    [EPathType.EPathTypeTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: COLUMN_TABLE_PAGES,
+    [EPathType.EPathTypeDir]: DIR_PAGES,
+    [EPathType.EPathTypeTableIndex]: DIR_PAGES,
+    [EPathType.EPathTypeCdcStream]: CDC_STREAM_PAGES,
+    [EPathType.EPathTypePersQueueGroup]: TOPIC_PAGES,
+    [EPathType.EPathTypeExternalDataSource]: EXTERNAL_DATA_SOURCE_PAGES,
+    [EPathType.EPathTypeExternalTable]: EXTERNAL_TABLE_PAGES,
+};
+export const getPagesByType = (type) => (type && pathTypeToPages[type]) || DIR_PAGES;

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './HotKeys.scss';
+interface HotKeysProps {
+    path: string;
+}
+export declare function HotKeys({ path }: HotKeysProps): JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -1,157 +1,101 @@
-import {useEffect, useMemo} from 'react';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import {Loader} from '@gravity-ui/uikit';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
-
-import {Icon} from '../../../../components/Icon';
-import {ResponseError} from '../../../../components/Errors/ResponseError';
-
-import {AutoFetcher} from '../../../../utils/autofetcher';
-import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-
-import {isColumnEntityType, isTableType} from '../../utils/schema';
-
+import { Icon } from '../../../../components/Icon';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
+import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 import './HotKeys.scss';
-
-const b = cn('hot-keys');
-
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
-    stickyTop: 0,
-};
-
+import i18n from './i18n';
+const b = cn('ydb-hot-keys');
 const tableColumnsIds = {
     accessSample: 'accessSample',
     keyValues: 'keyValues',
 };
-
-const autofetcher = new AutoFetcher();
-
-function HotKeys({
-    getHotKeys,
-    currentSchemaPath,
-    loading,
-    wasLoaded,
-    error,
-    data,
-    autorefresh,
-    setHotKeysOptions,
-    currentSchema,
-    type,
-}) {
-    const fetchData = () => {
-        if (isTableType(type) && !isColumnEntityType(type)) {
-            getHotKeys(currentSchemaPath);
-        }
-    };
+const getHotKeysColumns = (keyColumnsIds = []) => {
+    const keysColumns = keyColumnsIds.map((col, index) => ({
+        name: col,
+        header: (_jsxs("div", Object.assign({ className: b('primary-key-column') }, { children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] }))),
+        render: ({ row }) => row.keyValues[index],
+        align: DataTable.RIGHT,
+        sortable: false,
+    }));
+    return [
+        {
+            name: tableColumnsIds.accessSample,
+            header: 'Samples',
+            render: ({ row }) => row.accessSample,
+            align: DataTable.RIGHT,
+            sortable: false,
+        },
+        ...keysColumns,
+    ];
+};
+export function HotKeys({ path }) {
+    var _a, _b, _c;
+    const dispatch = useDispatch();
+    const collectSamplesTimerRef = useRef();
+    const { loading, wasLoaded, data, error } = useTypedSelector((state) => state.hotKeys);
+    const { loading: schemaLoading, data: schemaData } = useTypedSelector((state) => state.schema);
+    const keyColumnsIds = (_c = (_b = (_a = schemaData[path]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Table) === null || _c === void 0 ? void 0 : _c.KeyColumnNames;
+    const tableColumns = useMemo(() => {
+        return getHotKeysColumns(keyColumnsIds);
+    }, [keyColumnsIds]);
     useEffect(() => {
-        if (autorefresh) {
-            fetchData();
-            autofetcher.start();
-            autofetcher.fetch(() => fetchData());
-        } else {
-            autofetcher.stop();
-        }
-        return () => {
-            autofetcher.stop();
+        const fetchHotkeys = async (enableSampling) => {
+            // Set hotkeys error, but not data, since data is set conditionally
+            try {
+                const response = await window.api.getHotKeys(path, enableSampling);
+                return response;
+            }
+            catch (err) {
+                dispatch(setHotKeysError(err));
+                return undefined;
+            }
+        };
+        const fetchData = async () => {
+            // If there is previous pending request for samples, cancel it
+            if (collectSamplesTimerRef.current !== undefined) {
+                window.clearInterval(collectSamplesTimerRef.current);
+            }
+            dispatch(setHotKeysDataWasNotLoaded());
+            dispatch(setHotKeysLoading());
+            // Send request that will trigger hot keys sampling (enable_sampling = true)
+            const initialResponse = await fetchHotkeys(true);
+            // If there are hotkeys in the initial request (hotkeys was collected before)
+            // we could just use colleted samples (collected hotkeys are stored only for 30 seconds)
+            if (initialResponse && initialResponse.hotkeys) {
+                dispatch(setHotKeysData(initialResponse));
+            }
+            else if (initialResponse) {
+                // Else wait for 5 seconds, while hot keys are being collected
+                // And request these samples (enable_sampling = false)
+                const timer = setTimeout(async () => {
+                    const responseWithSamples = await fetchHotkeys(false);
+                    if (responseWithSamples) {
+                        dispatch(setHotKeysData(responseWithSamples));
+                    }
+                }, 5000);
+                collectSamplesTimerRef.current = timer;
+            }
         };
-    }, [autorefresh]);
-
-    useEffect(() => {
         fetchData();
-        setHotKeysOptions({
-            wasLoaded: false,
-            data: undefined,
-        });
-    }, [currentSchemaPath]);
-
-    const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
-    };
-
-    const tableColumns = useMemo(() => {
-        const keyColumnsIds = currentSchema?.PathDescription?.Table?.KeyColumnNames ?? [];
-
-        return [
-            {
-                name: tableColumnsIds.accessSample,
-                header: 'Samples',
-                sortable: false,
-                align: DataTable.RIGHT,
-            },
-            ...keyColumnsIds.map((col, index) => ({
-                name: col,
-                header: (
-                    <div className={b('primary-key-column')}>
-                        <Icon name="key" viewBox="0 0 12 7" width={12} height={7} />
-                        {col}
-                    </div>
-                ),
-                render: ({row}) => row[tableColumnsIds.keyValues][index],
-                align: DataTable.RIGHT,
-                sortable: false,
-            })),
-        ];
-    }, [currentSchema]);
-
-    const renderStub = () => {
-        return <div className={b('stub')}>Cluster version does not support hot keys viewing</div>;
-    };
-
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-        return data !== null ? (
-            <div className={b('table-content')}>
-                <DataTable
-                    columns={tableColumns}
-                    data={data}
-                    settings={TABLE_SETTINGS}
-                    theme="yandex-cloud"
-                    initialSortOrder={{
-                        columnId: tableColumnsIds.accessSample,
-                        order: DataTable.DESCENDING,
-                    }}
-                />
-            </div>
-        ) : (
-            <div className={b('stub')}>No information about hot keys</div>
-        );
-    };
-
-    return !loading && data === undefined ? (
-        renderStub()
-    ) : (
-        <div className={b()}>{loading && !wasLoaded ? renderLoader() : renderContent()}</div>
-    );
+    }, [dispatch, path]);
+    // It takes a while to collect hot keys. Display explicit status message, while collecting
+    if ((loading && !wasLoaded) || schemaLoading) {
+        return _jsx("div", { children: i18n('hot-keys-collecting') });
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    if (!data) {
+        return _jsx("div", { children: i18n('no-data') });
+    }
+    return (_jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
+                columnId: tableColumnsIds.accessSample,
+                order: DataTable.DESCENDING,
+            } }) })));
 }
-
-const mapStateToProps = (state) => {
-    const {loading, data, error, wasLoaded} = state.hotKeys;
-    const {currentSchema = {}, autorefresh} = state.schema;
-    const {Path} = currentSchema;
-    return {
-        loading,
-        data,
-        error,
-        currentSchemaPath: Path,
-        autorefresh,
-        wasLoaded,
-        currentSchema,
-    };
-};
-
-const mapDispatchToProps = {
-    getHotKeys,
-    setHotKeysOptions,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(HotKeys);

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss

@@ -1,16 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.hot-keys {
-    display: flex;
-    overflow: auto;
-    flex-grow: 1;
-    flex-direction: column;
-    align-items: flex-start;
-
-    max-height: 100%;
-
-    background-color: var(--g-color-base-background);
-
+.ydb-hot-keys {
     &__table-content {
         overflow: auto;
 
@@ -19,28 +9,6 @@
         @include freeze-nth-column(1);
     }
 
-    &__header {
-        position: sticky;
-        z-index: 2;
-        top: 0px;
-        left: 0;
-
-        width: 100%;
-        padding: 10px 0;
-
-        background-color: var(--g-color-base-background);
-    }
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-    }
-    &__stub {
-        margin: 10px;
-    }
     &__primary-key-column {
         display: flex;
         gap: 5px;

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "hot-keys-collecting": "Please wait a little while we are collecting hot keys samples...",
+    "no-data": "No information about hot keys"
+}

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/index.js

@@ -0,0 +1,5 @@
+import { i18n, Lang } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-hot-keys';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/Network/Network.d.ts

@@ -0,0 +1,72 @@
+declare var _default: import("react-redux").ConnectedComponent<typeof Network, import("react-redux").Omit<Pick<PropTypes.InferProps<{
+    getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
+    setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
+    netWorkInfo: PropTypes.Requireable<object>;
+    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    error: PropTypes.Requireable<object>;
+    wasLoaded: PropTypes.Requireable<boolean>;
+    loading: PropTypes.Requireable<boolean>;
+    autorefresh: PropTypes.Requireable<boolean>;
+    path: PropTypes.Requireable<string>;
+    filter: PropTypes.Requireable<string>;
+    changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
+}>, "filter" | "error" | "path" | "loading" | "wasLoaded" | "autorefresh" | "showTooltip" | "hideTooltip" | "getNetworkInfo" | "setDataWasNotLoaded" | "changeFilter" | "netWorkInfo"> & Partial<Pick<PropTypes.InferProps<{
+    getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
+    setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
+    netWorkInfo: PropTypes.Requireable<object>;
+    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    error: PropTypes.Requireable<object>;
+    wasLoaded: PropTypes.Requireable<boolean>;
+    loading: PropTypes.Requireable<boolean>;
+    autorefresh: PropTypes.Requireable<boolean>;
+    path: PropTypes.Requireable<string>;
+    filter: PropTypes.Requireable<string>;
+    changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
+}>, never>> & Partial<Pick<{}, never>>, "filter" | "loading" | "wasLoaded" | "autorefresh" | "showTooltip" | "hideTooltip" | "getNetworkInfo" | "setDataWasNotLoaded" | "changeFilter" | "netWorkInfo">>;
+export default _default;
+declare class Network extends React.Component<any, any, any> {
+    static propTypes: {
+        getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
+        setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
+        netWorkInfo: PropTypes.Requireable<object>;
+        hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        error: PropTypes.Requireable<object>;
+        wasLoaded: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        autorefresh: PropTypes.Requireable<boolean>;
+        path: PropTypes.Requireable<string>;
+        filter: PropTypes.Requireable<string>;
+        changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {};
+    static renderLoader(): JSX.Element;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    state: {
+        howNodeSeeOtherNodesSortType: string;
+        howOthersSeeNodeSortType: string;
+        howNodeSeeOtherSearch: string;
+        howOtherSeeNodeSearch: string;
+        hoveredNode: undefined;
+        clickedNode: undefined;
+        highlightedNodes: never[];
+        showId: boolean;
+        showRacks: boolean;
+    };
+    autofetcher: any;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    onChange: (field: any, num: any) => void;
+    handleSortChange: (sortItem: any) => void;
+    handleNodeClickWrap: (nodeInfo: any) => () => void;
+    groupNodesByField: (nodes: any, field: any) => {};
+    renderNodes: (nodes: any, isRight: any) => JSX.Element | JSX.Element[];
+    renderContent: () => JSX.Element;
+    render(): JSX.Element;
+}
+import PropTypes from "prop-types";
+import React from "react";