ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Clusters/Clusters.scss

@@ -0,0 +1,176 @@
+@import '../../styles/mixins.scss';
+
+.clusters {
+    overflow: auto;
+
+    padding-top: 15px;
+
+    @include body-2-typography();
+    @include flex-container();
+
+    &__cluster {
+        display: flex;
+        align-items: center;
+    }
+    &__cluster-status {
+        width: 18px;
+        height: 18px;
+        margin-right: 8px;
+
+        border-radius: 3px;
+
+        & span {
+            display: flex;
+            align-items: center;
+        }
+
+        &_type_green {
+            background-color: var(--ydb-color-status-green);
+        }
+        &_type_yellow {
+            background-color: var(--ydb-color-status-yellow);
+        }
+        &_type_blue {
+            background-color: var(--ydb-color-status-blue);
+        }
+        &_type_red {
+            background: var(--ydb-color-status-red);
+        }
+        &_type_gray {
+            background: var(--ydb-color-status-grey);
+        }
+        &_type_orange {
+            background: var(--ydb-color-status-orange);
+        }
+    }
+    &__cluster-name {
+        white-space: normal;
+        text-decoration: none;
+
+        color: var(--g-color-text-link);
+    }
+    &__cluster-versions {
+        text-decoration: none;
+    }
+    &__cluster-version {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+    }
+    &__cluster-dc {
+        white-space: normal;
+    }
+
+    &__controls {
+        display: flex;
+
+        margin-bottom: 20px;
+    }
+    &__control {
+        width: 200px;
+        margin-right: 15px;
+
+        &_wide {
+            width: 300px;
+        }
+    }
+    &__empty-cell {
+        color: var(--g-color-text-secondary);
+    }
+    &__tooltip-content {
+        word-break: break-all;
+    }
+
+    & .yc-progress__item {
+        transition: none;
+    }
+
+    &__aggregation,
+    &__controls {
+        margin-left: 15px;
+    }
+
+    &__aggregation {
+        display: flex;
+        align-items: center;
+
+        width: max-content;
+        height: 46px;
+        margin-bottom: 20px;
+        padding: 10px 20px;
+
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: 10px;
+        background: var(--g-color-base-generic-ultralight);
+    }
+
+    &__aggregation-value-container {
+        display: flex;
+        align-items: center;
+
+        max-width: 200px;
+
+        font-size: var(--g-text-subheader-3-font-size);
+        line-height: var(--g-text-subheader-3-line-height);
+    }
+
+    &__aggregation-value-container:not(:last-child) {
+        margin-right: 30px;
+    }
+
+    &__aggregation-label {
+        margin-right: 8px;
+
+        font-weight: 200;
+
+        color: var(--g-color-text-complementary);
+    }
+
+    &__text {
+        color: var(--g-color-text-primary);
+        @include body-2-typography();
+
+        &::first-letter {
+            color: var(--g-color-text-danger);
+        }
+    }
+
+    &__description {
+        max-width: 200px;
+
+        white-space: pre-wrap;
+    }
+
+    &__table-wrapper {
+        overflow: auto;
+
+        padding-left: 5px;
+        @include flex-container();
+    }
+
+    &__table-content {
+        overflow: auto;
+
+        @include freeze-nth-column(1);
+    }
+    &__balancer-cell {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &__balancer-text {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 92%;
+        margin-right: 5px;
+
+        text-overflow: ellipsis;
+        overflow-wrap: break-word !important;
+    }
+    &__balancer-icon {
+        display: flex;
+        align-items: center;
+    }
+}

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

@@ -0,0 +1,7 @@
+import type { ClusterDataAggregation } from '../../store/reducers/clusters/types';
+interface ClustersStatisticsProps {
+    count: number;
+    stats: ClusterDataAggregation;
+}
+export declare const ClustersStatistics: ({ count, stats }: ClustersStatisticsProps) => JSX.Element;
+export {};

package/dist/containers/Clusters/ClustersStatistics.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressViewer } from '../../components/ProgressViewer/ProgressViewer';
+import { formatStorageValues } from '../../utils/dataFormatters/dataFormatters';
+import { b } from './shared';
+import i18n from './i18n';
+export const ClustersStatistics = ({ count, stats }) => {
+    const { NodesTotal, NodesAlive, Hosts, Tenants, LoadAverage, NumberOfCpus, StorageUsed, StorageTotal, } = stats;
+    return (_jsxs("div", Object.assign({ className: b('aggregation') }, { children: [_jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_clusters') })), count] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_hosts') })), Hosts] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_tenants') })), Tenants] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_nodes') })), _jsx(ProgressViewer, { size: "ns", value: NodesAlive, capacity: NodesTotal, colorizeProgress: true, inverseColorize: true })] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_load') })), _jsx(ProgressViewer, { size: "ns", value: LoadAverage, capacity: NumberOfCpus, colorizeProgress: true })] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_storage') })), _jsx(ProgressViewer, { size: "ns", value: StorageUsed, capacity: StorageTotal, formatValues: formatStorageValues, colorizeProgress: true })] }))] })));
+};

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

@@ -0,0 +1,3 @@
+import { type Column } from '@gravity-ui/react-data-table';
+import type { PreparedCluster } from '../../store/reducers/clusters/types';
+export declare const CLUSTERS_COLUMNS: Column<PreparedCluster>[];

package/dist/containers/Clusters/columns.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { Link as ExternalLink, Progress, ClipboardButton } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { UserCard } from '../../components/User/User';
+import { ProgressViewer } from '../../components/ProgressViewer/ProgressViewer';
+import { clusterTabsIds, getClusterPath } from '../Cluster/utils';
+import { formatStorageValuesToTb } from '../../utils/dataFormatters/dataFormatters';
+import { removeViewerPathname, getCleanBalancerValue } from '../../utils/parseBalancer';
+import { COLUMNS_NAMES, COLUMNS_TITLES } from './constants';
+import { b } from './shared';
+import i18n from './i18n';
+const EMPTY_CELL = _jsx("span", Object.assign({ className: b('empty-cell') }, { children: "\u2014" }));
+export const CLUSTERS_COLUMNS = [
+    {
+        name: COLUMNS_NAMES.TITLE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.TITLE],
+        width: 230,
+        render: ({ row }) => {
+            var _a, _b;
+            const { balancer, name: clusterName } = row;
+            const backend = balancer && removeViewerPathname(balancer);
+            const clusterPath = getClusterPath(clusterTabsIds.tenants, { backend, clusterName });
+            const clusterStatus = (_a = row.cluster) === null || _a === void 0 ? void 0 : _a.Overall;
+            return (_jsxs("div", Object.assign({ className: b('cluster') }, { children: [clusterStatus ? (_jsx(ExternalLink, Object.assign({ href: clusterPath }, { children: _jsx("div", { className: b('cluster-status', {
+                                type: clusterStatus && clusterStatus.toLowerCase(),
+                            }) }) }))) : (_jsx("div", Object.assign({ className: b('cluster-status') }, { children: _jsx(HelpPopover, { content: _jsx("span", Object.assign({ className: b('tooltip-content') }, { children: ((_b = row.cluster) === null || _b === void 0 ? void 0 : _b.error) || i18n('tooltip_no-cluster-data') })), offset: { left: 0 } }) }))), _jsx("div", Object.assign({ className: b('cluster-name') }, { children: _jsx(ExternalLink, Object.assign({ href: clusterPath }, { children: row.title })) }))] })));
+        },
+        defaultOrder: DataTable.ASCENDING,
+    },
+    {
+        name: COLUMNS_NAMES.VERSIONS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.VERSIONS],
+        width: 300,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ preparedVersions }) => {
+            const versions = preparedVersions
+                .map((item) => item.version.replace(/^[0-9]\+\./g, ''))
+                .sort((v1, v2) => v1.localeCompare(v2));
+            return versions[0] || undefined;
+        },
+        render: ({ row }) => {
+            const { preparedVersions, versions = [], balancer, name: clusterName } = row;
+            const hasErrors = !versions.length || versions.some((item) => !item.version);
+            if (hasErrors) {
+                return EMPTY_CELL;
+            }
+            const total = versions.reduce((acc, item) => acc + item.count, 0);
+            const versionsValues = versions.map((item) => {
+                var _a;
+                return {
+                    value: (item.count / total) * 100,
+                    color: (_a = preparedVersions.find((versionItem) => versionItem.version === item.version)) === null || _a === void 0 ? void 0 : _a.color,
+                };
+            });
+            const backend = balancer && removeViewerPathname(balancer);
+            return (preparedVersions.length > 0 && (_jsx(ExternalLink, Object.assign({ className: b('cluster-versions'), href: getClusterPath(clusterTabsIds.versions, { backend, clusterName }) }, { children: _jsxs(_Fragment, { children: [preparedVersions.map((item, index) => (_jsx("div", Object.assign({ className: b('cluster-version'), style: { color: item.color }, title: item.version }, { children: item.version }), index))), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] }) }))));
+        },
+    },
+    {
+        name: COLUMNS_NAMES.CLUSTER,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.CLUSTER],
+        width: 120,
+        sortable: false,
+        render: ({ row }) => {
+            const dc = (row.cluster && row.cluster.DataCenters) || [];
+            return _jsx("div", Object.assign({ className: b('cluster-dc') }, { children: dc.join(', ') || EMPTY_CELL }));
+        },
+    },
+    {
+        name: COLUMNS_NAMES.SERVICE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.SERVICE],
+        width: 100,
+        sortable: true,
+    },
+    {
+        name: COLUMNS_NAMES.STATUS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
+        width: 150,
+        sortable: true,
+    },
+    {
+        name: COLUMNS_NAMES.NODES,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.NODES],
+        width: 150,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ cluster = {} }) => {
+            const { NodesTotal = 0 } = cluster;
+            return NodesTotal;
+        },
+        render: ({ row }) => {
+            const { NodesAlive = 0, NodesTotal = 0, Overall } = row.cluster || {};
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+            return _jsx(ProgressViewer, { value: NodesAlive, capacity: NodesTotal });
+        },
+    },
+    {
+        name: COLUMNS_NAMES.LOAD,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.LOAD],
+        width: 150,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ cluster }) => {
+            return cluster === null || cluster === void 0 ? void 0 : cluster.NumberOfCpus;
+        },
+        render: ({ row }) => {
+            const { LoadAverage = 0, NumberOfCpus = 0, Overall } = row.cluster || {};
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+            return _jsx(ProgressViewer, { value: LoadAverage, capacity: NumberOfCpus });
+        },
+    },
+    {
+        name: COLUMNS_NAMES.STORAGE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE],
+        width: 150,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ cluster }) => {
+            return Number(cluster === null || cluster === void 0 ? void 0 : cluster.StorageTotal);
+        },
+        render: ({ row }) => {
+            const { StorageUsed = 0, StorageTotal = 0, Overall } = row.cluster || {};
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+            return (_jsx(ProgressViewer, { value: StorageUsed, capacity: StorageTotal, formatValues: formatStorageValuesToTb }));
+        },
+    },
+    {
+        name: COLUMNS_NAMES.HOSTS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.HOSTS],
+        width: 80,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ cluster }) => {
+            return Number(cluster === null || cluster === void 0 ? void 0 : cluster.Hosts) || 0;
+        },
+        render: ({ row }) => {
+            var _a;
+            return Number((_a = row.cluster) === null || _a === void 0 ? void 0 : _a.Hosts) || EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.TENANTS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.TENANTS],
+        width: 80,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({ cluster }) => {
+            return Number(cluster === null || cluster === void 0 ? void 0 : cluster.Tenants) || 0;
+        },
+        render: ({ row }) => {
+            var _a;
+            return Number((_a = row.cluster) === null || _a === void 0 ? void 0 : _a.Tenants) || EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.OWNER,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.OWNER],
+        sortable: false,
+        width: 120,
+        render: ({ row }) => {
+            var _a;
+            const logins = (_a = row.owner) === null || _a === void 0 ? void 0 : _a.split(', ');
+            return (logins === null || logins === void 0 ? void 0 : logins.length)
+                ? logins.map((login) => _jsx(UserCard, { login: login }, login))
+                : EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.DESCRIPTION,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.DESCRIPTION],
+        sortable: false,
+        width: 150,
+        render: ({ row }) => {
+            return row.description ? (_jsx("div", Object.assign({ className: b('description') }, { children: row.description }))) : (EMPTY_CELL);
+        },
+    },
+    {
+        name: COLUMNS_NAMES.BALANCER,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.BALANCER],
+        sortable: false,
+        width: 290,
+        render: ({ row }) => {
+            if (!row.balancer) {
+                return EMPTY_CELL;
+            }
+            const cleanedValue = getCleanBalancerValue(row.balancer);
+            return (_jsxs("div", Object.assign({ className: b('balancer-cell') }, { children: [_jsx("div", Object.assign({ className: b('balancer-text') }, { children: cleanedValue })), _jsx(ClipboardButton, { size: 14, text: cleanedValue, className: b('balancer-icon') })] })));
+        },
+    },
+];

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

@@ -0,0 +1,34 @@
+import type { SelectOption } from '@gravity-ui/uikit';
+export declare const SELECTED_COLUMNS_KEY = "selectedColumns";
+export declare const COLUMNS_NAMES: {
+    readonly TITLE: "title";
+    readonly VERSIONS: "versions";
+    readonly CLUSTER: "cluster";
+    readonly SERVICE: "service";
+    readonly STATUS: "status";
+    readonly NODES: "nodes";
+    readonly LOAD: "load";
+    readonly STORAGE: "storage";
+    readonly HOSTS: "hosts";
+    readonly TENANTS: "tenants";
+    readonly OWNER: "owner";
+    readonly DESCRIPTION: "description";
+    readonly BALANCER: "balancer";
+};
+export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "title" | "status" | "tenants" | "service" | "versions" | "hosts" | "balancer" | "load" | "owner")[];
+export declare const COLUMNS_TITLES: {
+    readonly title: "Cluster";
+    readonly versions: "Versions";
+    readonly cluster: "DC";
+    readonly service: "Service";
+    readonly status: "Status";
+    readonly nodes: "Nodes";
+    readonly load: "Load";
+    readonly storage: "Storage";
+    readonly hosts: "Hosts";
+    readonly tenants: "Tenants";
+    readonly owner: "Owner";
+    readonly description: "Description";
+    readonly balancer: "Balancer";
+};
+export declare const CLUSTER_STATUSES: SelectOption[];

package/dist/containers/Clusters/constants.js

@@ -0,0 +1,62 @@
+export const SELECTED_COLUMNS_KEY = 'selectedColumns';
+export const COLUMNS_NAMES = {
+    TITLE: 'title',
+    VERSIONS: 'versions',
+    CLUSTER: 'cluster',
+    SERVICE: 'service',
+    STATUS: 'status',
+    NODES: 'nodes',
+    LOAD: 'load',
+    STORAGE: 'storage',
+    HOSTS: 'hosts',
+    TENANTS: 'tenants',
+    OWNER: 'owner',
+    DESCRIPTION: 'description',
+    BALANCER: 'balancer',
+};
+export const DEFAULT_COLUMNS = [
+    COLUMNS_NAMES.TITLE,
+    COLUMNS_NAMES.VERSIONS,
+    COLUMNS_NAMES.SERVICE,
+    COLUMNS_NAMES.STATUS,
+    COLUMNS_NAMES.NODES,
+    COLUMNS_NAMES.LOAD,
+    COLUMNS_NAMES.STORAGE,
+    COLUMNS_NAMES.HOSTS,
+    COLUMNS_NAMES.TENANTS,
+    COLUMNS_NAMES.OWNER,
+    COLUMNS_NAMES.BALANCER,
+];
+export const COLUMNS_TITLES = {
+    [COLUMNS_NAMES.TITLE]: 'Cluster',
+    [COLUMNS_NAMES.VERSIONS]: 'Versions',
+    [COLUMNS_NAMES.CLUSTER]: 'DC',
+    [COLUMNS_NAMES.SERVICE]: 'Service',
+    [COLUMNS_NAMES.STATUS]: 'Status',
+    [COLUMNS_NAMES.NODES]: 'Nodes',
+    [COLUMNS_NAMES.LOAD]: 'Load',
+    [COLUMNS_NAMES.STORAGE]: 'Storage',
+    [COLUMNS_NAMES.HOSTS]: 'Hosts',
+    [COLUMNS_NAMES.TENANTS]: 'Tenants',
+    [COLUMNS_NAMES.OWNER]: 'Owner',
+    [COLUMNS_NAMES.DESCRIPTION]: 'Description',
+    [COLUMNS_NAMES.BALANCER]: 'Balancer',
+};
+export const CLUSTER_STATUSES = [
+    {
+        value: 'production',
+        content: 'Production',
+    },
+    {
+        value: 'preprod',
+        content: 'Preprod',
+    },
+    {
+        value: 'testing',
+        content: 'Testing',
+    },
+    {
+        value: 'development',
+        content: 'Development',
+    },
+];

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

@@ -0,0 +1,14 @@
+{
+    "controls_status-select-label": "Status:",
+    "controls_service-select-label": "Service:",
+    "controls_version-select-label": "Version:",
+    "controls_search-placeholder": "Cluster name, version, host",
+    "controls_select-placeholder": "All",
+    "statistics_clusters": "Clusters",
+    "statistics_hosts": "Hosts",
+    "statistics_tenants": "Tenants",
+    "statistics_nodes": "Nodes",
+    "statistics_load": "Load",
+    "statistics_storage": "Storage",
+    "tooltip_no-cluster-data": "No cluster data"
+}

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

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

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

@@ -0,0 +1,14 @@
+{
+    "controls_status-select-label": "Статус:",
+    "controls_service-select-label": "Сервис:",
+    "controls_version-select-label": "Версия:",
+    "controls_search-placeholder": "Имя кластера, версия или хост",
+    "controls_select-placeholder": "Все",
+    "statistics_clusters": "Кластеры",
+    "statistics_hosts": "Хосты",
+    "statistics_tenants": "Базы данных",
+    "statistics_nodes": "Узлы",
+    "statistics_load": "Нагрузка",
+    "statistics_storage": "Хранилище",
+    "tooltip_no-cluster-data": "Нет данных кластера"
+}

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

@@ -0,0 +1,10 @@
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};

package/dist/containers/Clusters/shared.js

@@ -0,0 +1,2 @@
+import cn from 'bem-cn-lite';
+export const b = cn('clusters');

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

@@ -0,0 +1 @@
+export declare function useClustersList(): void;

package/dist/containers/Clusters/useClustersList.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchClustersList } from '../../store/reducers/clusters/clusters';
+export function useClustersList() {
+    const dispatch = useDispatch();
+    React.useEffect(() => {
+        dispatch(fetchClustersList());
+    }, [dispatch]);
+}

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

@@ -0,0 +1,7 @@
+import { type Column } from '@gravity-ui/react-data-table';
+import { type TableColumnSetupItem } from '@gravity-ui/uikit/build/esm/components/Table/hoc/withTableSettings/withTableSettings';
+export declare const useSelectedColumns: <T>(columns: Column<T>[], storageKey: string, columnsTitles: Record<string, string>, defaultColumnsIds: string[], requiredColumnsIds?: string[] | undefined) => {
+    columnsToShow: Column<T>[];
+    columnsToSelect: TableColumnSetupItem[];
+    setColumns: (value: TableColumnSetupItem[]) => void;
+};

package/dist/containers/Clusters/useSelectedColumns.js

@@ -0,0 +1,23 @@
+import { useSetting } from '../../utils/hooks';
+export const useSelectedColumns = (columns, storageKey, columnsTitles, defaultColumnsIds, requiredColumnsIds) => {
+    const [selectedColumnsIds, setSelectedColumnsIds] = useSetting(storageKey, defaultColumnsIds);
+    const columnsIds = columns.map((column) => column.name);
+    const columnsToShow = columns.filter((column) => selectedColumnsIds.find((name) => name === column.name));
+    const columnsToSelect = columnsIds.map((id) => {
+        return {
+            id,
+            title: columnsTitles[id],
+            selected: selectedColumnsIds.includes(id),
+            required: requiredColumnsIds === null || requiredColumnsIds === void 0 ? void 0 : requiredColumnsIds.includes(id),
+        };
+    });
+    const setColumns = (value) => {
+        const selectedColumns = value.filter((el) => el.selected).map((el) => el.id);
+        setSelectedColumnsIds(selectedColumns);
+    };
+    return {
+        columnsToShow,
+        columnsToSelect,
+        setColumns,
+    };
+};

package/dist/containers/Header/Header.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RawBreadcrumbItem } from './breadcrumbs';
+import './Header.scss';
+interface HeaderProps {
+    mainPage?: RawBreadcrumbItem;
+}
+declare function Header({ mainPage }: HeaderProps): JSX.Element;
+export default Header;

package/dist/containers/Header/Header.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router';
+import { useDispatch } from 'react-redux';
+import block from 'bem-cn-lite';
+import { Breadcrumbs } from '@gravity-ui/uikit';
+import { ExternalLinkWithIcon } from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import { backend, customBackend } from '../../store';
+import { getClusterInfo } from '../../store/reducers/cluster/cluster';
+import { useTypedSelector } from '../../utils/hooks';
+import { DEVELOPER_UI_TITLE } from '../../utils/constants';
+import { parseQuery } from '../../routes';
+import { getBreadcrumbs } from './breadcrumbs';
+import './Header.scss';
+const b = block('header');
+const getInternalLink = (singleClusterMode) => {
+    if (singleClusterMode && !customBackend) {
+        return `/internal`;
+    }
+    return backend + '/internal';
+};
+function Header({ mainPage }) {
+    var _a;
+    const dispatch = useDispatch();
+    const history = useHistory();
+    const location = useLocation();
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const { page, pageBreadcrumbsOptions } = useTypedSelector((state) => state.header);
+    const { data } = useTypedSelector((state) => state.cluster);
+    const queryParams = parseQuery(location);
+    const clusterNameFromQuery = (_a = queryParams.clusterName) === null || _a === void 0 ? void 0 : _a.toString();
+    const clusterNameFinal = (data === null || data === void 0 ? void 0 : data.Name) || clusterNameFromQuery;
+    useEffect(() => {
+        dispatch(getClusterInfo(clusterNameFromQuery));
+    }, [dispatch, clusterNameFromQuery]);
+    const breadcrumbItems = useMemo(() => {
+        const rawBreadcrumbs = [];
+        let options = pageBreadcrumbsOptions;
+        if (mainPage) {
+            rawBreadcrumbs.push(mainPage);
+        }
+        if (clusterNameFinal) {
+            options = Object.assign(Object.assign({}, pageBreadcrumbsOptions), { clusterName: clusterNameFinal });
+        }
+        const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
+        return breadcrumbs.map((item) => {
+            const action = () => {
+                if (item.link) {
+                    history.push(item.link);
+                }
+            };
+            return Object.assign(Object.assign({}, item), { action });
+        });
+    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
+    const renderHeader = () => {
+        return (_jsxs("header", Object.assign({ className: b() }, { children: [_jsx("div", { children: _jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, renderItemContent: ({ icon, text }) => {
+                            if (!icon) {
+                                return text;
+                            }
+                            return (_jsxs("span", Object.assign({ className: b('breadcrumb') }, { children: [_jsx("div", Object.assign({ className: b('breadcrumb__icon') }, { children: icon })), text] })));
+                        } }) }), _jsx(ExternalLinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] })));
+    };
+    return renderHeader();
+}
+export default Header;