ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Tablet/Tablet.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { useLocation, useParams } from 'react-router';
+import { useDispatch } from 'react-redux';
+import cn from 'bem-cn-lite';
+import { Link as ExternalLink } from '@gravity-ui/uikit';
+import { backend } from '../../store';
+import { getTablet, getTabletDescribe, clearTabletData } from '../../store/reducers/tablet';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { DEVELOPER_UI_TITLE } from '../../utils/constants';
+import { parseQuery } from '../../routes';
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Tag } from '../../components/Tag';
+import { Icon } from '../../components/Icon';
+import { EmptyState } from '../../components/EmptyState';
+import { Loader } from '../../components/Loader';
+import { TabletTable } from './TabletTable';
+import { TabletInfo } from './TabletInfo';
+import { TabletControls } from './TabletControls';
+import i18n from './i18n';
+import './Tablet.scss';
+export const b = cn('tablet-page');
+export const Tablet = () => {
+    var _a;
+    const isFirstDataFetchRef = useRef(true);
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const params = useParams();
+    const { id } = params;
+    const { data: tablet = {}, loading, id: tabletId, history = [], tenantPath, error, } = useTypedSelector((state) => state.tablet);
+    const { nodeId: queryNodeId, tenantName: queryTenantName, type: queryTabletType, } = parseQuery(location);
+    const nodeId = ((_a = tablet.NodeId) === null || _a === void 0 ? void 0 : _a.toString()) || (queryNodeId === null || queryNodeId === void 0 ? void 0 : queryNodeId.toString());
+    const tenantName = tenantPath || (queryTenantName === null || queryTenantName === void 0 ? void 0 : queryTenantName.toString());
+    const type = tablet.Type || (queryTabletType === null || queryTabletType === void 0 ? void 0 : queryTabletType.toString());
+    // NOTE: should be reviewed when migrating to React 18
+    useEffect(() => {
+        return () => {
+            dispatch(clearTabletData());
+        };
+    }, [dispatch]);
+    useEffect(() => {
+        if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
+            dispatch(getTabletDescribe(tablet.TenantId));
+            isFirstDataFetchRef.current = false;
+        }
+    }, [dispatch, tablet]);
+    const fetchData = useCallback(() => {
+        dispatch(getTablet(id));
+    }, [dispatch, id]);
+    useAutofetcher(fetchData, [fetchData], true);
+    useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('tablet', {
+            nodeIds: nodeId ? [nodeId] : [],
+            tenantName,
+            tabletId: id,
+            tabletType: type,
+        }));
+    }, [dispatch, tenantName, id, nodeId, type]);
+    const renderExternalLinks = (link, index) => {
+        return (_jsx("li", Object.assign({ className: b('link', { external: true }) }, { children: _jsx(ExternalLink, Object.assign({ href: `${backend}${link.path}`, target: "_blank" }, { children: link.name })) }), index));
+    };
+    if (loading && id !== tabletId && isFirstDataFetchRef.current) {
+        return _jsx(Loader, { size: "l" });
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    if (!tablet || !Object.keys(tablet).length) {
+        return (_jsx("div", Object.assign({ className: b('placeholder') }, { children: _jsx(EmptyState, { title: i18n('emptyState') }) })));
+    }
+    const { TabletId, Overall, Leader } = tablet;
+    const externalLinks = [
+        {
+            name: `${DEVELOPER_UI_TITLE} - tablet`,
+            path: `/tablets?TabletID=${TabletId}`,
+        },
+    ];
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('pane-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('left-pane') }, { children: [_jsx("ul", Object.assign({ className: b('links') }, { children: externalLinks.map(renderExternalLinks) })), _jsxs("div", Object.assign({ className: b('row', { header: true }) }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: i18n('tablet.header') })), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) })), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", Object.assign({ className: b('loader') }, { children: loading && _jsx(Loader, { size: "s" }) }))] })), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: fetchData })] })), _jsx("div", Object.assign({ className: b('rigth-pane') }, { children: _jsx(TabletTable, { history: history }) }))] })) })));
+};

package/dist/containers/Tablet/TabletControls/TabletControls.d.ts

@@ -0,0 +1,7 @@
+import { TTabletStateInfo } from '../../../types/api/tablet';
+interface TabletControlsProps {
+    tablet: TTabletStateInfo;
+    fetchData: VoidFunction;
+}
+export declare const TabletControls: ({ tablet, fetchData }: TabletControlsProps) => JSX.Element;
+export {};

package/dist/containers/Tablet/TabletControls/TabletControls.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { ETabletState } from '../../../types/api/tablet';
+import { CriticalActionDialog } from '../../../components/CriticalActionDialog';
+import i18n from '../i18n';
+import { b } from '../Tablet';
+var EVisibleDialogType;
+(function (EVisibleDialogType) {
+    EVisibleDialogType["kill"] = "kill";
+    EVisibleDialogType["stop"] = "stop";
+    EVisibleDialogType["resume"] = "resume";
+})(EVisibleDialogType || (EVisibleDialogType = {}));
+export const TabletControls = ({ tablet, fetchData }) => {
+    const { TabletId, HiveId } = tablet;
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const [visibleDialogType, setVisibleDialogType] = useState(null);
+    const [isTabletActionLoading, setIsTabletActionLoading] = useState(false);
+    // Enable controls after data update
+    useEffect(() => {
+        setIsTabletActionLoading(false);
+    }, [tablet]);
+    const makeShowDialog = (type) => () => {
+        setIsDialogVisible(true);
+        setVisibleDialogType(type);
+    };
+    const showKillDialog = makeShowDialog(EVisibleDialogType.kill);
+    const showStopDialog = makeShowDialog(EVisibleDialogType.stop);
+    const showResumeDialog = makeShowDialog(EVisibleDialogType.resume);
+    const hideDialog = () => {
+        setIsDialogVisible(false);
+        setVisibleDialogType(null);
+    };
+    const _onKillClick = () => {
+        setIsTabletActionLoading(true);
+        return window.api.killTablet(TabletId);
+    };
+    const _onStopClick = () => {
+        setIsTabletActionLoading(true);
+        return window.api.stopTablet(TabletId, HiveId);
+    };
+    const _onResumeClick = () => {
+        setIsTabletActionLoading(true);
+        return window.api.resumeTablet(TabletId, HiveId);
+    };
+    const hasHiveId = () => {
+        return HiveId && HiveId !== '0';
+    };
+    const isDisabledResume = tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
+    const isDisabledStop = tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
+    const renderDialog = () => {
+        if (!isDialogVisible) {
+            return null;
+        }
+        switch (visibleDialogType) {
+            case EVisibleDialogType.kill: {
+                return (_jsx(CriticalActionDialog, { visible: isDialogVisible, text: i18n('dialog.kill'), onClose: hideDialog, onConfirm: _onKillClick, onConfirmActionFinish: fetchData }));
+            }
+            case EVisibleDialogType.stop: {
+                return (_jsx(CriticalActionDialog, { visible: isDialogVisible, text: i18n('dialog.stop'), onClose: hideDialog, onConfirm: _onStopClick, onConfirmActionFinish: fetchData }));
+            }
+            case EVisibleDialogType.resume: {
+                return (_jsx(CriticalActionDialog, { visible: isDialogVisible, text: i18n('dialog.resume'), onClose: hideDialog, onConfirm: _onResumeClick, onConfirmActionFinish: fetchData }));
+            }
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Button, Object.assign({ onClick: showKillDialog, view: "action", loading: isTabletActionLoading, className: b('control') }, { children: i18n('controls.kill') })), hasHiveId() ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: showStopDialog, view: "action", disabled: isDisabledStop, loading: !isDisabledStop && isTabletActionLoading, className: b('control') }, { children: i18n('controls.stop') })), _jsx(Button, Object.assign({ onClick: showResumeDialog, view: "action", disabled: isDisabledResume, loading: !isDisabledResume && isTabletActionLoading, className: b('control') }, { children: i18n('controls.resume') }))] })) : null, renderDialog()] })));
+};

package/dist/containers/Tablet/TabletControls/index.js

@@ -0,0 +1 @@
+export * from './TabletControls';

package/dist/containers/Tablet/TabletInfo/TabletInfo.d.ts

@@ -0,0 +1,7 @@
+import { TTabletStateInfo } from '../../../types/api/tablet';
+interface TabletInfoProps {
+    tablet: TTabletStateInfo;
+    tenantPath?: string;
+}
+export declare const TabletInfo: ({ tablet, tenantPath }: TabletInfoProps) => JSX.Element;
+export {};

package/dist/containers/Tablet/TabletInfo/TabletInfo.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { Link as UIKitLink } from '@gravity-ui/uikit';
+import { ETabletState } from '../../../types/api/tablet';
+import { InfoViewer } from '../../../components/InfoViewer';
+import routes, { createHref } from '../../../routes';
+import { calcUptime } from '../../../utils/dataFormatters/dataFormatters';
+import { getDefaultNodePath } from '../../Node/NodePages';
+import { b } from '../Tablet';
+export const TabletInfo = ({ tablet, tenantPath }) => {
+    const { ChangeTime, Generation, FollowerId, NodeId, HiveId, State, Type, TenantId: { SchemeShard } = {}, } = tablet;
+    const hasHiveId = HiveId && HiveId !== '0';
+    const hasUptime = State === ETabletState.Active;
+    const tabletInfo = [{ label: 'Database', value: tenantPath || '-' }];
+    if (hasHiveId) {
+        tabletInfo.push({
+            label: 'HiveId',
+            value: (_jsx(UIKitLink, Object.assign({ href: createHref(routes.tablet, { id: HiveId }), target: "_blank" }, { children: HiveId }))),
+        });
+    }
+    if (SchemeShard) {
+        tabletInfo.push({
+            label: 'SchemeShard',
+            value: (_jsx(UIKitLink, Object.assign({ href: createHref(routes.tablet, { id: SchemeShard }), target: "_blank" }, { children: SchemeShard }))),
+        });
+    }
+    tabletInfo.push({ label: 'Type', value: Type }, { label: 'State', value: State });
+    if (hasUptime) {
+        tabletInfo.push({ label: 'Uptime', value: calcUptime(ChangeTime) });
+    }
+    tabletInfo.push({ label: 'Generation', value: Generation }, {
+        label: 'Node',
+        value: (_jsx(Link, Object.assign({ className: b('link'), to: getDefaultNodePath(String(NodeId)) }, { children: NodeId }))),
+    });
+    if (FollowerId) {
+        tabletInfo.push({ label: 'Follower', value: FollowerId });
+    }
+    return _jsx(InfoViewer, { info: tabletInfo });
+};

package/dist/containers/Tablet/TabletInfo/index.js

@@ -0,0 +1 @@
+export * from './TabletInfo';

package/dist/containers/Tablet/TabletTable/TabletTable.d.ts

@@ -0,0 +1,6 @@
+import type { ITabletPreparedHistoryItem } from '../../../types/store/tablet';
+interface TabletTableProps {
+    history: ITabletPreparedHistoryItem[];
+}
+export declare const TabletTable: ({ history }: TabletTableProps) => JSX.Element;
+export {};

package/dist/containers/Tablet/TabletTable/TabletTable.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { InternalLink } from '../../../components/InternalLink/InternalLink';
+import { calcUptime } from '../../../utils/dataFormatters/dataFormatters';
+import { getDefaultNodePath } from '../../Node/NodePages';
+import { b } from '../Tablet';
+const columns = [
+    {
+        name: 'Generation',
+        align: DataTable.RIGHT,
+        render: ({ row }) => row.generation,
+    },
+    {
+        name: 'Change time',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({ row }) => calcUptime(row.changeTime),
+    },
+    {
+        name: 'State',
+        sortable: false,
+        render: ({ row }) => row.state,
+    },
+    {
+        name: 'Follower ID',
+        sortable: false,
+        render: ({ row }) => {
+            return row.leader ? 'leader' : row.followerId;
+        },
+    },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({ row }) => {
+            return _jsx(InternalLink, Object.assign({ to: getDefaultNodePath(row.nodeId) }, { children: row.nodeId }));
+        },
+    },
+    {
+        name: 'Node FQDN',
+        sortable: false,
+        render: ({ row }) => {
+            if (!row.fqdn) {
+                return _jsx("span", { children: "\u2014" });
+            }
+            return (_jsx("div", Object.assign({ className: b('host') }, { children: _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true }) })));
+        },
+    },
+];
+const TABLE_SETTINGS = {
+    displayIndices: false,
+};
+export const TabletTable = ({ history }) => {
+    return (_jsx(DataTable, { theme: "yandex-cloud", data: history, columns: columns, settings: TABLE_SETTINGS, initialSortOrder: {
+            columnId: 'Generation',
+            order: DataTable.DESCENDING,
+        } }));
+};

package/dist/containers/Tablet/TabletTable/index.js

@@ -0,0 +1 @@
+export * from './TabletTable';

package/dist/containers/Tablet/i18n/en.json

@@ -1,10 +1,10 @@
 {
-  "tablet.header": "Tablet",
-  "controls.kill": "Restart",
-  "controls.stop": "Stop",
-  "controls.resume": "Resume",
-  "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
-  "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
-  "dialog.resume": "The tablet will be resumed. Do you want to proceed?",
-  "emptyState": "The tablet was not found"
+    "tablet.header": "Tablet",
+    "controls.kill": "Restart",
+    "controls.stop": "Stop",
+    "controls.resume": "Resume",
+    "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
+    "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
+    "dialog.resume": "The tablet will be resumed. Do you want to proceed?",
+    "emptyState": "The tablet was not found"
 }

package/dist/containers/Tablet/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/Tablet/i18n/index.js

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

package/dist/containers/Tablet/i18n/ru.json

@@ -1,10 +1,10 @@
 {
-  "tablet.header": "Таблетка",
-  "controls.kill": "Перезапустить",
-  "controls.stop": "Остановить",
-  "controls.resume": "Запустить",
-  "dialog.kill": "Таблетка будет перезапущена. Вы хотите продолжить?",
-  "dialog.stop": "Таблетка будет остановлена. Вы хотите продолжить?",
-  "dialog.resume": "Таблетка будет запущена. Вы хотите продолжить?",
-  "emptyState": "Таблетка не найдена"
+    "tablet.header": "Таблетка",
+    "controls.kill": "Перезапустить",
+    "controls.stop": "Остановить",
+    "controls.resume": "Запустить",
+    "dialog.kill": "Таблетка будет перезапущена. Вы хотите продолжить?",
+    "dialog.stop": "Таблетка будет остановлена. Вы хотите продолжить?",
+    "dialog.resume": "Таблетка будет запущена. Вы хотите продолжить?",
+    "emptyState": "Таблетка не найдена"
 }

package/dist/containers/Tablet/index.d.ts

@@ -0,0 +1 @@
+export * from './Tablet';

package/dist/containers/Tablet/index.js

@@ -0,0 +1 @@
+export * from './Tablet';

package/dist/containers/Tablets/Tablets.d.ts

@@ -0,0 +1,8 @@
+import './Tablets.scss';
+interface TabletsProps {
+    path?: string;
+    nodeId?: string | number;
+    className?: string;
+}
+export declare const Tablets: ({ path, nodeId, className }: TabletsProps) => JSX.Element;
+export {};

package/dist/containers/Tablets/Tablets.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import cn from 'bem-cn-lite';
+import ReactList from 'react-list';
+import { Select } from '@gravity-ui/uikit';
+import { Tablet } from '../../components/Tablet';
+import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
+import { Loader } from '../../components/Loader';
+import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { getTabletsInfo, clearWasLoadingFlag, setStateFilter, setTypeFilter, } from '../../store/reducers/tablets';
+import './Tablets.scss';
+import i18n from './i18n';
+const b = cn('tablets');
+export const Tablets = ({ path, nodeId, className }) => {
+    const dispatch = useDispatch();
+    const { data, wasLoaded, loading, error, stateFilter, typeFilter } = useTypedSelector((state) => state.tablets);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const tablets = useMemo(() => (data === null || data === void 0 ? void 0 : data.TabletStateInfo) || [], [data]);
+    const fetchData = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(clearWasLoadingFlag());
+        }
+        if (nodeId) {
+            dispatch(getTabletsInfo({ nodes: [String(nodeId)] }));
+        }
+        else if (path) {
+            dispatch(getTabletsInfo({ path }));
+        }
+    }, [path, nodeId, dispatch]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const [tabletsToRender, setTabletsToRender] = useState([]);
+    useEffect(() => {
+        let filteredTablets = tablets;
+        if (typeFilter.length > 0) {
+            filteredTablets = filteredTablets.filter((tablet) => typeFilter.some((filter) => tablet.Type === filter));
+        }
+        if (stateFilter.length > 0) {
+            filteredTablets = filteredTablets.filter((tablet) => stateFilter.some((filter) => tablet.State === filter));
+        }
+        setTabletsToRender(filteredTablets);
+    }, [tablets, stateFilter, typeFilter]);
+    const handleStateFilterChange = (value) => {
+        dispatch(setStateFilter(value));
+    };
+    const handleTypeFilterChange = (value) => {
+        dispatch(setTypeFilter(value));
+    };
+    const renderTablet = (tabletIndex) => {
+        return _jsx(Tablet, { tablet: tabletsToRender[tabletIndex] }, tabletIndex);
+    };
+    const renderContent = () => {
+        const states = Array.from(new Set(tablets.map((tablet) => tablet.State)))
+            .filter((state) => state !== undefined)
+            .map((item) => ({
+            value: item,
+            content: item,
+        }));
+        const types = Array.from(new Set(tablets.map((tablet) => tablet.Type)))
+            .filter((type) => type !== undefined)
+            .map((item) => ({
+            value: item,
+            content: item,
+        }));
+        return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.state')}:`, options: states, value: stateFilter, onUpdate: handleStateFilterChange }), _jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.type')}:`, options: types, value: typeFilter, onUpdate: handleTypeFilterChange }), _jsx(TabletsOverall, { tablets: tablets })] })), _jsx("div", Object.assign({ className: b('items') }, { children: _jsx(ReactList, { itemRenderer: renderTablet, length: tabletsToRender.length, type: "uniform" }) }))] })));
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, {});
+    }
+    else if (error) {
+        return _jsx("div", Object.assign({ className: "error" }, { children: error.statusText }));
+    }
+    else {
+        return tablets.length > 0 ? (renderContent()) : (_jsx("div", Object.assign({ className: "error" }, { children: i18n('noTabletsData') })));
+    }
+};

package/dist/containers/Tablets/i18n/en.json

@@ -1,6 +1,6 @@
 {
-  "controls.type": "Type",
-  "controls.state": "State",
-  "controls.allItems": "All items",
-  "noTabletsData": "No tablets data"
+    "controls.type": "Type",
+    "controls.state": "State",
+    "controls.allItems": "All items",
+    "noTabletsData": "No tablets data"
 }

package/dist/containers/Tablets/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/Tablets/i18n/index.js

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

package/dist/containers/Tablets/i18n/ru.json

@@ -1,6 +1,6 @@
 {
-  "controls.type": "Тип",
-  "controls.state": "Состояние",
-  "controls.allItems": "Все",
-  "noTabletsData": "Нет информации о таблетках"
+    "controls.type": "Тип",
+    "controls.state": "Состояние",
+    "controls.allItems": "Все",
+    "noTabletsData": "Нет информации о таблетках"
 }

package/dist/containers/Tablets/index.js

@@ -0,0 +1 @@
+export * from './Tablets';

package/dist/containers/TabletsFilters/TabletsFilters.d.ts

@@ -0,0 +1,62 @@
+export class TabletsFilters extends React.Component<any, any, any> {
+    static propTypes: {
+        wasLoaded: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        getTabletsInfo: PropTypes.Requireable<(...args: any[]) => any>;
+        timeoutForRequest: PropTypes.Requireable<number>;
+        path: PropTypes.Requireable<string>;
+        clearWasLoadingFlag: PropTypes.Requireable<(...args: any[]) => any>;
+        nodes: PropTypes.Requireable<any[]>;
+        tablets: PropTypes.Requireable<any[]>;
+        filteredTablets: PropTypes.Requireable<any[]>;
+        setStateFilter: PropTypes.Requireable<(...args: any[]) => any>;
+        setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
+        stateFilter: PropTypes.Requireable<any[]>;
+        typeFilter: PropTypes.Requireable<any[]>;
+        error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
+        setHeader: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static renderLoader(): JSX.Element;
+    static parseNodes: (nodes: any) => number[] | undefined;
+    static getStateFiltersFromColor: (color: any) => any;
+    static CONTROL_WIDTH: number;
+    static POPUP_WIDTH: number;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    state: {
+        nodeFilter: never[];
+        tenantPath: string;
+    };
+    reloadDescriptor: number;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    makeRequest: () => void;
+    getTablets: () => void;
+    handleNodeFilterChange: (nodeFilter: any) => void;
+    handleStateFilterChange: (stateFilter: any) => void;
+    handleTypeFilterChange: (typeFilter: any) => void;
+    renderTablet: (index: any, key: any) => JSX.Element;
+    renderContent: () => JSX.Element;
+    render(): JSX.Element;
+}
+declare var _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, import("react-redux").Omit<PropTypes.InferProps<{
+    wasLoaded: PropTypes.Requireable<boolean>;
+    loading: PropTypes.Requireable<boolean>;
+    getTabletsInfo: PropTypes.Requireable<(...args: any[]) => any>;
+    timeoutForRequest: PropTypes.Requireable<number>;
+    path: PropTypes.Requireable<string>;
+    clearWasLoadingFlag: PropTypes.Requireable<(...args: any[]) => any>;
+    nodes: PropTypes.Requireable<any[]>;
+    tablets: PropTypes.Requireable<any[]>;
+    filteredTablets: PropTypes.Requireable<any[]>;
+    setStateFilter: PropTypes.Requireable<(...args: any[]) => any>;
+    setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
+    stateFilter: PropTypes.Requireable<any[]>;
+    typeFilter: PropTypes.Requireable<any[]>;
+    error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
+    setHeader: PropTypes.Requireable<(...args: any[]) => any>;
+}>, "nodes" | "tablets" | "error" | "loading" | "wasLoaded" | "stateFilter" | "typeFilter" | "setStateFilter" | "setTypeFilter" | "clearWasLoadingFlag" | "getTabletsInfo" | "filteredTablets" | "timeoutForRequest">>;
+export default _default;
+import React from "react";
+import PropTypes from "prop-types";