ydb-embedded-ui 4.33.0 → 5.0.0

package/dist/containers/Cluster/Cluster.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { useLocation, useRouteMatch } from 'react-router';
+import { useDispatch } from 'react-redux';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
+import { Tabs } from '@gravity-ui/uikit';
+import routes from '../../routes';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { getClusterInfo } from '../../store/reducers/cluster/cluster';
+import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
+import { parseNodesToVersionsValues, parseVersionsToVersionToColorMap } from '../../utils/versions';
+import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { InternalLink } from '../../components/InternalLink';
+import { Tenants } from '../Tenants/Tenants';
+import { StorageWrapper } from '../Storage/StorageWrapper';
+import { NodesWrapper } from '../Nodes/NodesWrapper';
+import { Versions } from '../Versions/Versions';
+import { ClusterInfo } from './ClusterInfo/ClusterInfo';
+import { clusterTabs, clusterTabsIds, getClusterPath } from './utils';
+import './Cluster.scss';
+const b = cn('cluster');
+function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }) {
+    const container = useRef(null);
+    const dispatch = useDispatch();
+    const match = useRouteMatch(routes.cluster);
+    const { activeTab = clusterTabsIds.tenants } = (match === null || match === void 0 ? void 0 : match.params) || {};
+    const location = useLocation();
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const { clusterName } = queryParams;
+    const { data: cluster = {}, loading: clusterLoading, wasLoaded: clusterWasLoaded, error: clusterError, groupsStats, } = useTypedSelector((state) => state.cluster);
+    const { nodes, loading: nodesLoading, wasLoaded: nodesWasLoaded, } = useTypedSelector((state) => state.clusterNodes);
+    const { Name } = cluster;
+    const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
+    useEffect(() => {
+        dispatch(getClusterNodes());
+    }, [dispatch]);
+    useAutofetcher(() => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)), [dispatch, clusterName], true);
+    useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('cluster', {}));
+    }, [dispatch, Name]);
+    const versionToColor = useMemo(() => {
+        if (additionalVersionsProps === null || additionalVersionsProps === void 0 ? void 0 : additionalVersionsProps.getVersionToColorMap) {
+            return additionalVersionsProps === null || additionalVersionsProps === void 0 ? void 0 : additionalVersionsProps.getVersionToColorMap();
+        }
+        return parseVersionsToVersionToColorMap(cluster === null || cluster === void 0 ? void 0 : cluster.Versions);
+    }, [additionalVersionsProps, cluster]);
+    const versionsValues = useMemo(() => {
+        return parseNodesToVersionsValues(nodes, versionToColor);
+    }, [nodes, versionToColor]);
+    const renderTab = () => {
+        switch (activeTab) {
+            case clusterTabsIds.tenants: {
+                return _jsx(Tenants, { additionalTenantsProps: additionalTenantsProps });
+            }
+            case clusterTabsIds.nodes: {
+                return (_jsx(NodesWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }));
+            }
+            case clusterTabsIds.storage: {
+                return (_jsx(StorageWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }));
+            }
+            case clusterTabsIds.versions: {
+                return _jsx(Versions, { versionToColor: versionToColor });
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [_jsx(ClusterInfo, { cluster: cluster, groupsStats: groupsStats, versionsValues: versionsValues, loading: infoLoading, error: clusterError, additionalClusterProps: additionalClusterProps }), _jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTab, items: clusterTabs, wrapTo: ({ id }, node) => {
+                        const path = getClusterPath(id, queryParams);
+                        return (_jsx(InternalLink, Object.assign({ to: path }, { children: node }), id));
+                    } }) })), _jsx("div", { children: renderTab() })] })));
+}
+export default Cluster;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.d.ts

@@ -0,0 +1,16 @@
+import type { IResponseError } from '../../../types/api/error';
+import type { AdditionalClusterProps } from '../../../types/additionalProps';
+import type { VersionValue } from '../../../types/versions';
+import type { TClusterInfo } from '../../../types/api/cluster';
+import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
+import './ClusterInfo.scss';
+interface ClusterInfoProps {
+    cluster?: TClusterInfo;
+    versionsValues?: VersionValue[];
+    groupsStats?: ClusterGroupsStats;
+    loading?: boolean;
+    error?: IResponseError;
+    additionalClusterProps?: AdditionalClusterProps;
+}
+export declare const ClusterInfo: ({ cluster, versionsValues, groupsStats, loading, error, additionalClusterProps, }: ClusterInfoProps) => JSX.Element;
+export {};

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Skeleton } from '@gravity-ui/uikit';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import { Tags } from '../../../components/Tags';
+import { Tablet } from '../../../components/Tablet';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { ExternalLinkWithIcon } from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import { Icon } from '../../../components/Icon/Icon';
+import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
+import { backend, customBackend } from '../../../store';
+import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters';
+import { useSetting, useTypedSelector } from '../../../utils/hooks';
+import { formatBytes, getSizeWithSignificantDigits } from '../../../utils/bytesParsers';
+import { CLUSTER_DEFAULT_TITLE, CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI_TITLE, } from '../../../utils/constants';
+import { VersionsBar } from '../VersionsBar/VersionsBar';
+import { ClusterInfoSkeleton } from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
+import i18n from '../i18n';
+import { compareTablets } from './utils';
+import './ClusterInfo.scss';
+const b = block('cluster-info');
+const GroupsStatsPopupContent = ({ stats }) => {
+    const { diskType, erasure, allocatedSize, availableSize } = stats;
+    const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
+    const convertedAllocatedSize = formatBytes({ value: allocatedSize, size: sizeToConvert });
+    const convertedAvailableSize = formatBytes({ value: availableSize, size: sizeToConvert });
+    const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
+    const info = [
+        {
+            label: i18n('disk-type'),
+            value: diskType,
+        },
+        {
+            label: i18n('erasure'),
+            value: erasure,
+        },
+        {
+            label: i18n('allocated'),
+            value: convertedAllocatedSize,
+        },
+        {
+            label: i18n('available'),
+            value: convertedAvailableSize,
+        },
+        {
+            label: i18n('usage'),
+            value: usage + '%',
+        },
+    ];
+    return (_jsx(InfoViewer, { dots: true, info: info, className: b('groups-stats-popup-content'), size: "s" }));
+};
+const DiskGroupsStatsBars = ({ stats }) => {
+    return (_jsx("div", Object.assign({ className: b('storage-groups-stats') }, { children: Object.values(stats).map((erasureStats) => (_jsx(ContentWithPopup, Object.assign({ placement: ['right'], content: _jsx(GroupsStatsPopupContent, { stats: erasureStats }) }, { children: _jsx(ProgressViewer, { className: b('groups-stats-bar'), value: erasureStats.createdGroups, capacity: erasureStats.totalGroups }) }), erasureStats.erasure))) })));
+};
+const getGroupsStatsFields = (groupsStats) => {
+    return Object.keys(groupsStats).map((diskType) => {
+        return {
+            label: i18n('storage-groups', { diskType }),
+            value: _jsx(DiskGroupsStatsBars, { stats: groupsStats[diskType] }),
+        };
+    });
+};
+const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) => {
+    const info = [];
+    if (cluster.DataCenters) {
+        info.push({
+            label: i18n('dc'),
+            value: _jsx(Tags, { tags: cluster.DataCenters }),
+        });
+    }
+    if (cluster.SystemTablets) {
+        info.push({
+            label: i18n('tablets'),
+            value: (_jsx("div", Object.assign({ className: b('system-tablets') }, { children: cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (_jsx(Tablet, { tablet: tablet }, tabletIndex))) }))),
+        });
+    }
+    if (cluster.Tenants) {
+        info.push({
+            label: i18n('databases'),
+            value: cluster.Tenants,
+        });
+    }
+    info.push({
+        label: i18n('nodes'),
+        value: _jsx(ProgressViewer, { value: cluster === null || cluster === void 0 ? void 0 : cluster.NodesAlive, capacity: cluster === null || cluster === void 0 ? void 0 : cluster.NodesTotal }),
+    }, {
+        label: i18n('load'),
+        value: _jsx(ProgressViewer, { value: cluster === null || cluster === void 0 ? void 0 : cluster.LoadAverage, capacity: cluster === null || cluster === void 0 ? void 0 : cluster.NumberOfCpus }),
+    }, {
+        label: i18n('storage-size'),
+        value: (_jsx(ProgressViewer, { value: cluster === null || cluster === void 0 ? void 0 : cluster.StorageUsed, capacity: cluster === null || cluster === void 0 ? void 0 : cluster.StorageTotal, formatValues: formatStorageValues })),
+    });
+    if (Object.keys(groupsStats).length) {
+        info.push(...getGroupsStatsFields(groupsStats));
+    }
+    info.push(...additionalInfo, {
+        label: i18n('links'),
+        value: (_jsx("div", Object.assign({ className: b('links') }, { children: links.map(({ title, url }) => (_jsx(ExternalLinkWithIcon, { title: title, url: url }, title))) }))),
+    }, {
+        label: i18n('versions'),
+        value: _jsx(VersionsBar, { versionsValues: versionsValues }),
+    });
+    return info;
+};
+export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const [clusterInfoHidden, setClusterInfoHidden] = useSetting(CLUSTER_INFO_HIDDEN_KEY);
+    const togleClusterInfoVisibility = () => {
+        setClusterInfoHidden(!clusterInfoHidden);
+    };
+    let internalLink = backend + '/internal';
+    if (singleClusterMode && !customBackend) {
+        internalLink = `/internal`;
+    }
+    const { info = [], links = [] } = additionalClusterProps;
+    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
+        { title: DEVELOPER_UI_TITLE, url: internalLink },
+        ...links,
+    ]);
+    const getContent = () => {
+        if (loading) {
+            return _jsx(ClusterInfoSkeleton, {});
+        }
+        if (error) {
+            _jsx(ResponseError, { error: error, className: b('error') });
+        }
+        return _jsx(InfoViewer, { dots: true, info: clusterInfo });
+    };
+    const getClusterTitle = () => {
+        var _a;
+        if (loading) {
+            return _jsx(Skeleton, { className: b('title-skeleton') });
+        }
+        return (_jsx(EntityStatus, { size: "m", status: cluster === null || cluster === void 0 ? void 0 : cluster.Overall, name: (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : CLUSTER_DEFAULT_TITLE, className: b('title') }));
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('header'), onClick: togleClusterInfoVisibility }, { children: [getClusterTitle(), _jsx(Icon, { name: "chevron-down", width: 24, height: 24, className: b('header__expand-button', { rotate: clusterInfoHidden }) })] })), _jsx("div", Object.assign({ className: b('info', { hidden: clusterInfoHidden }) }, { children: getContent() }))] })));
+};

package/dist/containers/Cluster/ClusterInfo/utils.d.ts

@@ -0,0 +1,2 @@
+import { TTabletStateInfo } from '../../../types/api/tablet';
+export declare const compareTablets: (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => 1 | -1 | 0;

package/dist/containers/Cluster/ClusterInfo/utils.js

@@ -0,0 +1,10 @@
+import { EType } from '../../../types/api/tablet';
+export const compareTablets = (tablet1, tablet2) => {
+    if (tablet1.Type === EType.TxAllocator) {
+        return 1;
+    }
+    if (tablet2.Type === EType.TxAllocator) {
+        return -1;
+    }
+    return 0;
+};

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.d.ts

@@ -0,0 +1,7 @@
+import './ClusterInfoSkeleton.scss';
+interface ClusterInfoSkeletonProps {
+    className?: string;
+    rows?: number;
+}
+export declare const ClusterInfoSkeleton: ({ rows, className }: ClusterInfoSkeletonProps) => JSX.Element;
+export {};

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Skeleton } from '@gravity-ui/uikit';
+import './ClusterInfoSkeleton.scss';
+const b = block('ydb-cluster-info-skeleton');
+const SkeletonLabel = () => (_jsxs("div", Object.assign({ className: b('label') }, { children: [_jsx(Skeleton, { className: b('label__text') }), _jsx("div", { className: b('label__dots') })] })));
+export const ClusterInfoSkeleton = ({ rows = 8, className }) => (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [[...new Array(rows)].map((_, index) => (_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx(SkeletonLabel, {}), _jsx(Skeleton, { className: b('value') })] }), `skeleton-row-${index}`))), _jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx(SkeletonLabel, {}), _jsx(Skeleton, { className: b('versions') })] }), "versions")] })));

package/dist/containers/Cluster/VersionsBar/VersionsBar.d.ts

@@ -0,0 +1,7 @@
+import type { VersionValue } from '../../../types/versions';
+import './VersionsBar.scss';
+interface VersionsBarProps {
+    versionsValues?: VersionValue[];
+}
+export declare const VersionsBar: ({ versionsValues }: VersionsBarProps) => JSX.Element;
+export {};

package/dist/containers/Cluster/VersionsBar/VersionsBar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Progress } from '@gravity-ui/uikit';
+import './VersionsBar.scss';
+const b = block('ydb-cluster-versions-bar');
+export const VersionsBar = ({ versionsValues = [] }) => {
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Progress, { value: 100, stack: versionsValues, size: "s" }), _jsx("div", Object.assign({ className: b('versions') }, { children: versionsValues.map((item, index) => (_jsx("div", Object.assign({ className: b('version-title'), style: { color: item.color }, title: item.version }, { children: `${item.version}${index === versionsValues.length - 1 ? '' : ','}` }), item.version))) }))] })));
+};

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

@@ -1,16 +1,16 @@
 {
-  "disk-type": "Disk Type",
-  "erasure": "Erasure",
-  "allocated": "Allocated",
-  "available": "Available",
-  "usage": "Usage",
-  "dc": "DC",
-  "tablets": "Tablets",
-  "databases": "Databases",
-  "nodes": "Nodes",
-  "load": "Load",
-  "storage-size": "Storage size",
-  "storage-groups": "Storage groups, {{diskType}}",
-  "links": "Links",
-  "versions": "Versions"
+    "disk-type": "Disk Type",
+    "erasure": "Erasure",
+    "allocated": "Allocated",
+    "available": "Available",
+    "usage": "Usage",
+    "dc": "DC",
+    "tablets": "Tablets",
+    "databases": "Databases",
+    "nodes": "Nodes",
+    "load": "Load",
+    "storage-size": "Storage size",
+    "storage-groups": "Storage groups, {{diskType}}",
+    "links": "Links",
+    "versions": "Versions"
 }

package/dist/containers/Cluster/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/Cluster/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-cluster';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

@@ -1,16 +1,16 @@
 {
-  "disk-type": "Тип диска",
-  "erasure": "Режим",
-  "allocated": "Использовано",
-  "available": "Доступно",
-  "usage": "Потребление",
-  "dc": "ДЦ",
-  "tablets": "Таблетки",
-  "databases": "Базы данных",
-  "nodes": "Узлы",
-  "load": "Нагрузка",
-  "storage-size": "Размер хранилища",
-  "storage-groups": "Группы хранения, {{diskType}}",
-  "links": "Ссылки",
-  "versions": "Версии"
+    "disk-type": "Тип диска",
+    "erasure": "Режим",
+    "allocated": "Использовано",
+    "available": "Доступно",
+    "usage": "Потребление",
+    "dc": "ДЦ",
+    "tablets": "Таблетки",
+    "databases": "Базы данных",
+    "nodes": "Узлы",
+    "load": "Нагрузка",
+    "storage-size": "Размер хранилища",
+    "storage-groups": "Группы хранения, {{diskType}}",
+    "links": "Ссылки",
+    "versions": "Версии"
 }

package/dist/containers/Cluster/utils.d.ts

@@ -0,0 +1,22 @@
+import type { ValueOf } from '../../types/common';
+export declare const clusterTabsIds: {
+    readonly tenants: "tenants";
+    readonly nodes: "nodes";
+    readonly storage: "storage";
+    readonly versions: "versions";
+};
+export declare type ClusterTab = ValueOf<typeof clusterTabsIds>;
+export declare const clusterTabs: ({
+    id: "tenants";
+    title: string;
+} | {
+    id: "nodes";
+    title: string;
+} | {
+    id: "storage";
+    title: string;
+} | {
+    id: "versions";
+    title: string;
+})[];
+export declare const getClusterPath: (activeTab?: ClusterTab, query?: {}) => string;

package/dist/containers/Cluster/utils.js

@@ -0,0 +1,27 @@
+import routes, { createHref } from '../../routes';
+export const clusterTabsIds = {
+    tenants: 'tenants',
+    nodes: 'nodes',
+    storage: 'storage',
+    versions: 'versions',
+};
+const tenants = {
+    id: clusterTabsIds.tenants,
+    title: 'Databases',
+};
+const nodes = {
+    id: clusterTabsIds.nodes,
+    title: 'Nodes',
+};
+const storage = {
+    id: clusterTabsIds.storage,
+    title: 'Storage',
+};
+const versions = {
+    id: clusterTabsIds.versions,
+    title: 'Versions',
+};
+export const clusterTabs = [tenants, nodes, storage, versions];
+export const getClusterPath = (activeTab = clusterTabsIds.tenants, query = {}) => {
+    return createHref(routes.cluster, { activeTab }, query);
+};

package/dist/containers/Clusters/Clusters.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './Clusters.scss';
+export declare function Clusters(): JSX.Element;

package/dist/containers/Clusters/Clusters.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import DataTable from '@gravity-ui/react-data-table';
+import { TableColumnSetup, Select } from '@gravity-ui/uikit';
+import { Search } from '../../components/Search';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useAutofetcher } from '../../utils/hooks';
+import { useTypedSelector } from '../../utils/hooks/useTypedSelector';
+import { fetchClustersList, changeClustersFilters } from '../../store/reducers/clusters/clusters';
+import { selectClustersList, selectLoadingFlag, selectClusterNameFilter, selectStatusFilter, selectServiceFilter, selectVersionFilter, selectVersions, selectFilteredClusters, selectClustersAggregation, } from '../../store/reducers/clusters/selectors';
+import { COLUMNS_NAMES, COLUMNS_TITLES, CLUSTER_STATUSES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
+import { ClustersStatistics } from './ClustersStatistics';
+import { CLUSTERS_COLUMNS } from './columns';
+import { useSelectedColumns } from './useSelectedColumns';
+import { b } from './shared';
+import './Clusters.scss';
+import { Loader } from '../../components/Loader';
+import i18n from './i18n';
+export function Clusters() {
+    const dispatch = useDispatch();
+    const loading = useTypedSelector(selectLoadingFlag);
+    const clusters = useTypedSelector(selectClustersList);
+    const filteredClusters = useTypedSelector(selectFilteredClusters);
+    const aggregation = useTypedSelector(selectClustersAggregation);
+    const clusterName = useTypedSelector(selectClusterNameFilter);
+    const status = useTypedSelector(selectStatusFilter);
+    const service = useTypedSelector(selectServiceFilter);
+    const version = useTypedSelector(selectVersionFilter);
+    const versions = useTypedSelector(selectVersions);
+    const fetchData = useCallback(() => {
+        dispatch(fetchClustersList());
+    }, [dispatch]);
+    useAutofetcher(fetchData, [fetchData], true);
+    const changeStatus = (value) => {
+        dispatch(changeClustersFilters({ status: value }));
+    };
+    const changeService = (value) => {
+        dispatch(changeClustersFilters({ service: value }));
+    };
+    const changeClusterName = (value) => {
+        dispatch(changeClustersFilters({ clusterName: value }));
+    };
+    const changeVersion = (value) => {
+        dispatch(changeClustersFilters({ version: value }));
+    };
+    const { columnsToShow, columnsToSelect, setColumns } = useSelectedColumns(CLUSTERS_COLUMNS, SELECTED_COLUMNS_KEY, COLUMNS_TITLES, DEFAULT_COLUMNS, [COLUMNS_NAMES.TITLE]);
+    const servicesToSelect = useMemo(() => {
+        const clustersServices = new Set();
+        clusters.forEach((cluster) => {
+            if (cluster.service) {
+                clustersServices.add(cluster.service);
+            }
+        });
+        return Array.from(clustersServices).map((clusterService) => {
+            return {
+                value: clusterService,
+                content: clusterService,
+            };
+        });
+    }, [clusters]);
+    if (loading && !clusters.length) {
+        return _jsx(Loader, { size: "l" });
+    }
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx("div", Object.assign({ className: b('control', { wide: true }) }, { children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx("div", { children: _jsx(TableColumnSetup, { popupWidth: "242px", items: columnsToSelect, showStatus: true, onUpdate: setColumns, className: b('table-settings') }, "TableColumnSetup") }) }))] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+                            columnId: COLUMNS_NAMES.TITLE,
+                            order: DataTable.ASCENDING,
+                        } }) })) }))] })));
+}