ydb-embedded-ui 5.4.0 → 6.0.0

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

@@ -1,66 +1,61 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { shallowEqual } from 'react-redux';
-import cn from 'bem-cn-lite';
+import { skipToken } from '@reduxjs/toolkit/query';
 import JSONTree from 'react-json-inspector';
-import 'react-json-inspector/json-inspector.css';
-import { Loader } from '../../../../components/Loader';
+import { shallowEqual } from 'react-redux';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
-import { getDescribe, setDataWasNotLoaded, setCurrentDescribePath, getDescribeBatched, } from '../../../../store/reducers/describe';
+import { Loader } from '../../../../components/Loader';
+import { describeApi } from '../../../../store/reducers/describe';
 import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { isEntityWithMergedImplementation } from '../../utils/schema';
 import './Describe.scss';
+import 'react-json-inspector/json-inspector.css';
 const b = cn('kv-describe');
 const expandMap = new Map();
 const Describe = ({ tenant, type }) => {
-    const dispatch = useTypedDispatch();
-    const { currentDescribe, error, loading, wasLoaded } = useTypedSelector((state) => state.describe);
-    const [preparedDescribeData, setPreparedDescribeData] = useState();
-    useEffect(() => {
-        if (currentDescribe) {
-            const paths = Object.keys(currentDescribe);
-            if (paths.length === 1) {
-                setPreparedDescribeData(currentDescribe[paths[0]]);
-            }
-            else {
-                setPreparedDescribeData(currentDescribe);
-            }
-        }
-    }, [currentDescribe]);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
     const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        const path = currentSchemaPath || tenant;
-        dispatch(setCurrentDescribePath(path));
-        if (!isEntityWithMergedImpl) {
-            dispatch(getDescribe({ path }));
+    const path = currentSchemaPath || tenant;
+    let paths = skipToken;
+    if (!isEntityWithMergedImpl) {
+        paths = [path];
+    }
+    else if (mergedChildrenPaths) {
+        paths = [path, ...mergedChildrenPaths];
+    }
+    const { currentData, isFetching, error } = describeApi.useGetDescribeQuery(paths, {
+        pollingInterval: autorefresh,
+    });
+    const loading = isFetching && currentData === undefined;
+    const currentDescribe = currentData;
+    let preparedDescribeData;
+    if (currentDescribe) {
+        const paths = Object.keys(currentDescribe);
+        if (paths.length === 1) {
+            preparedDescribeData = currentDescribe[paths[0]];
         }
-        else if (mergedChildrenPaths) {
-            dispatch(getDescribeBatched([path, ...mergedChildrenPaths]));
+        else {
+            preparedDescribeData = currentDescribe;
         }
-    }, [currentSchemaPath, tenant, mergedChildrenPaths, isEntityWithMergedImpl, dispatch]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+    }
+    if (loading || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
         return _jsx(Loader, { size: "m" });
     }
     if (error) {
         return _jsx(ResponseError, { error: error, className: b('message-container') });
     }
     if (!loading && !preparedDescribeData) {
-        return _jsx("div", Object.assign({ className: b('message-container') }, { children: "Empty" }));
+        return _jsx("div", { className: b('message-container'), children: "Empty" });
     }
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('result') }, { children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
+    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('result'), children: _jsx(JSONTree, { data: preparedDescribeData, className: b('tree'), onClick: ({ path }) => {
                     const newValue = !(expandMap.get(path) || false);
                     expandMap.set(path, newValue);
                 }, searchOptions: {
                     debounceTime: 300,
                 }, isExpanded: (keypath) => {
                     return expandMap.get(keypath) || false;
-                } }) })) })));
+                } }) }) }));
 };
 export default Describe;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import type { EPathType } from '../../../../types/api/schema';
 import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../../types/additionalProps';
+import type { EPathType } from '../../../../types/api/schema';
 import './DetailedOverview.scss';
 interface DetailedOverviewProps {
     type?: EPathType;
@@ -9,5 +8,5 @@ interface DetailedOverviewProps {
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function DetailedOverview(props: DetailedOverviewProps): JSX.Element;
+declare function DetailedOverview(props: DetailedOverviewProps): import("react/jsx-runtime").JSX.Element;
 export default DetailedOverview;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
-import cn from 'bem-cn-lite';
+import { cn } from '../../../../utils/cn';
 import Overview from '../Overview/Overview';
 import { TenantOverview } from '../TenantOverview/TenantOverview';
 import './DetailedOverview.scss';
@@ -9,9 +9,9 @@ function DetailedOverview(props) {
     const { type, tenantName, additionalTenantProps, additionalNodesProps } = props;
     const { currentSchemaPath } = useSelector((state) => state.schema);
     const renderTenantOverview = () => {
-        return (_jsx("div", Object.assign({ className: b('section') }, { children: _jsx(TenantOverview, { tenantName: tenantName, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }) })));
+        return (_jsx("div", { className: b('section'), children: _jsx(TenantOverview, { tenantName: tenantName, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }) }));
     };
     const isTenant = tenantName === currentSchemaPath;
-    return (_jsx("div", Object.assign({ className: b() }, { children: isTenant ? renderTenantOverview() : _jsx(Overview, { type: type, tenantName: tenantName }) })));
+    return (_jsx("div", { className: b(), children: isTenant ? renderTenantOverview() : _jsx(Overview, { type: type, tenantName: tenantName }) }));
 }
 export default DetailedOverview;

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

@@ -1,9 +1,9 @@
 .kv-detailed-overview {
     display: flex;
+    gap: 20px;
 
     width: 100%;
     height: 100%;
-    gap: 20px;
 
     &__section {
         display: flex;
@@ -14,7 +14,7 @@
     }
 
     &__modal {
-        & .yc-modal__content {
+        & .g-modal__content {
             position: relative;
         }
     }

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../types/additionalProps';
 import type { EPathType } from '../../../types/api/schema';
-import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../../types/additionalProps';
 import './Diagnostics.scss';
 interface DiagnosticsProps {
     type?: EPathType;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function Diagnostics(props: DiagnosticsProps): JSX.Element;
+declare function Diagnostics(props: DiagnosticsProps): import("react/jsx-runtime").JSX.Element;
 export default Diagnostics;

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

@@ -1,38 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import React from 'react';
+import { Tabs } from '@gravity-ui/uikit';
 import qs from 'qs';
-import cn from 'bem-cn-lite';
-import { Link } from 'react-router-dom';
-import { useLocation } from 'react-router';
 import { Helmet } from 'react-helmet-async';
-import { Switch, Tabs } from '@gravity-ui/uikit';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { Loader } from '../../../components/Loader';
 import routes, { createHref } from '../../../routes';
-import { enableAutorefresh, disableAutorefresh } from '../../../store/reducers/schema/schema';
-import { setDiagnosticsTab } from '../../../store/reducers/tenant/tenant';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
-import { Loader } from '../../../components/Loader';
+import { setDiagnosticsTab } from '../../../store/reducers/tenant/tenant';
+import { cn } from '../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import { Heatmap } from '../../Heatmap';
 import { NodesWrapper } from '../../Nodes/NodesWrapper';
 import { StorageWrapper } from '../../Storage/StorageWrapper';
 import { Tablets } from '../../Tablets';
+import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
+import { TenantTabsGroups } from '../TenantPages';
+import { isDatabaseEntityType } from '../utils/schema';
+import { AutorefreshControl } from './Autorefresh/AutorefreshControl';
+import { Consumers } from './Consumers';
 import Describe from './Describe/Describe';
+import DetailedOverview from './DetailedOverview/DetailedOverview';
+import { DATABASE_PAGES, getPagesByType } from './DiagnosticsPages';
 import { HotKeys } from './HotKeys/HotKeys';
-import Network from './Network/Network';
+import { Network } from './Network/Network';
 import { Partitions } from './Partitions/Partitions';
-import { Consumers } from './Consumers';
 import { TopQueries } from './TopQueries';
 import { TopShards } from './TopShards';
-import DetailedOverview from './DetailedOverview/DetailedOverview';
-import { isDatabaseEntityType } from '../utils/schema';
-import { TenantTabsGroups } from '../TenantPages';
-import { DATABASE_PAGES, getPagesByType } from './DiagnosticsPages';
 import './Diagnostics.scss';
 const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props) {
-    const container = useRef(null);
+    const container = React.useRef(null);
     const dispatch = useTypedDispatch();
-    const { currentSchemaPath, autorefresh, wasLoaded } = useTypedSelector((state) => state.schema);
+    const { currentSchemaPath, wasLoaded } = useTypedSelector((state) => state.schema);
     const { diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
@@ -41,7 +42,7 @@ function Diagnostics(props) {
     const { name: rootTenantName } = queryParams;
     const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;
     const isDatabase = isDatabaseEntityType(props.type) || currentSchemaPath === rootTenantName;
-    const pages = useMemo(() => {
+    const pages = React.useMemo(() => {
         if (isDatabase) {
             return DATABASE_PAGES;
         }
@@ -50,7 +51,7 @@ function Diagnostics(props) {
     const forwardToDiagnosticTab = (tab) => {
         dispatch(setDiagnosticsTab(tab));
     };
-    const activeTab = useMemo(() => {
+    const activeTab = React.useMemo(() => {
         if (wasLoaded) {
             let page = pages.find((el) => el.id === diagnosticsTab);
             if (!page) {
@@ -63,14 +64,6 @@ function Diagnostics(props) {
         }
         return undefined;
     }, [pages, diagnosticsTab, wasLoaded]);
-    const onAutorefreshToggle = (value) => {
-        if (value) {
-            dispatch(enableAutorefresh());
-        }
-        else {
-            dispatch(disableAutorefresh());
-        }
-    };
     const renderTabContent = () => {
         const { type } = props;
         const tenantNameString = tenantName;
@@ -78,6 +71,9 @@ function Diagnostics(props) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (_jsx(DetailedOverview, { type: type, tenantName: tenantNameString, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
+                return _jsx(SchemaViewer, { path: currentSchemaPath, type: type, withFamilies: true });
+            }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return _jsx(TopQueries, { path: tenantNameString, type: type });
             }
@@ -120,10 +116,10 @@ function Diagnostics(props) {
         }
     };
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('header-wrapper') }, { children: _jsxs("div", Object.assign({ className: b('tabs') }, { children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, wrapTo: ({ id }, node) => {
+        return (_jsx("div", { className: b('header-wrapper'), children: _jsxs("div", { className: b('tabs'), children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, wrapTo: ({ id }, node) => {
                             const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: id }));
-                            return (_jsx(Link, Object.assign({ to: path, className: b('tab') }, { children: node }), id));
-                        }, allowNotSelected: true }), _jsx(Switch, { checked: autorefresh, onUpdate: onAutorefreshToggle, content: "Autorefresh" })] })) })));
+                            return (_jsx(Link, { to: path, className: b('tab'), children: node }, id));
+                        }, allowNotSelected: true }), _jsx(AutorefreshControl, {})] }) }));
     };
     // Loader prevents incorrect loading of tabs
     // After tabs are initially loaded it is no longer needed
@@ -131,6 +127,6 @@ function Diagnostics(props) {
     if (!wasLoaded) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, renderTabs(), _jsx("div", Object.assign({ className: b('page-wrapper') }, { children: renderTabContent() }))] })));
+    return (_jsxs("div", { className: b(), ref: container, children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, renderTabs(), _jsx("div", { className: b('page-wrapper'), children: renderTabContent() })] }));
 }
 export default Diagnostics;

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

@@ -17,7 +17,7 @@
         align-items: center;
 
         box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
-        & .yc-tabs_direction_horizontal {
+        & .g-tabs_direction_horizontal {
             box-shadow: unset;
         }
     }

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

@@ -32,6 +32,9 @@ export declare const DATABASE_PAGES: ({
 export declare const TABLE_PAGES: ({
     id: "overview";
     title: string;
+} | {
+    id: "schema";
+    title: string;
 } | {
     id: "topShards";
     title: string;
@@ -54,6 +57,9 @@ export declare const TABLE_PAGES: ({
 export declare const COLUMN_TABLE_PAGES: ({
     id: "overview";
     title: string;
+} | {
+    id: "schema";
+    title: string;
 } | {
     id: "topShards";
     title: string;

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

@@ -4,6 +4,10 @@ const overview = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
     title: 'Info',
 };
+const schema = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.schema,
+    title: 'Schema',
+};
 const topQueries = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
     title: 'Top queries',
@@ -58,8 +62,8 @@ export const DATABASE_PAGES = [
     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 TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, hotKeys, describe];
+export const COLUMN_TABLE_PAGES = [overview, schema, 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];

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

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

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { Icon } from '../../../../components/Icon';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
+import { Icon } from '../../../../components/Icon';
+import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 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';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import i18n from './i18n';
+import './HotKeys.scss';
 const b = cn('ydb-hot-keys');
 const tableColumnsIds = {
     accessSample: 'accessSample',
@@ -17,7 +17,7 @@ const tableColumnsIds = {
 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] }))),
+        header: (_jsxs("div", { 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,
@@ -36,14 +36,14 @@ const getHotKeysColumns = (keyColumnsIds = []) => {
 export function HotKeys({ path }) {
     var _a, _b, _c;
     const dispatch = useTypedDispatch();
-    const collectSamplesTimerRef = useRef();
+    const collectSamplesTimerRef = React.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(() => {
+    const tableColumns = React.useMemo(() => {
         return getHotKeysColumns(keyColumnsIds);
     }, [keyColumnsIds]);
-    useEffect(() => {
+    React.useEffect(() => {
         const fetchHotkeys = async (enableSampling) => {
             // Set hotkeys error, but not data, since data is set conditionally
             try {
@@ -93,8 +93,8 @@ export function HotKeys({ path }) {
     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: {
+    return (_jsx("div", { 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,
-            } }) })));
+            } }) }));
 }

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

@@ -11,8 +11,7 @@
 
     &__primary-key-column {
         display: flex;
-        gap: 5px;
-
         align-items: center;
+        gap: 5px;
     }
 }

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

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

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

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

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

@@ -1,72 +1,6 @@
-declare const _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" | "loading" | "wasLoaded" | "error" | "path" | "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 './Network.scss';
+interface NetworkProps {
+    path: string;
 }
-import PropTypes from "prop-types";
-import React from "react";
+export declare function Network({ path }: NetworkProps): import("react/jsx-runtime").JSX.Element;
+export {};