ydb-embedded-ui 6.4.0 → 6.6.0

package/README.md

@@ -41,7 +41,7 @@ For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 Image `cr.yandex/yc/yandex-docker-local-ydb` corresponds to `:latest` tag. It's the latest stable ydb version.
 
 To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image
-or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:trunk` image.
+or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:nightly` image.
 Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
 
 ### Custom configuration in dev mode with .env file

package/dist/containers/App/App.scss

@@ -28,8 +28,6 @@ body,
 :root {
     --g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
     --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);
-
-    --data-table-row-height: 40px;
 }
 
 .g-root {
@@ -74,42 +72,12 @@ body,
 .app {
     height: 100%;
     @include flex-container();
+    @include data-table-styles();
 
     &__main {
         overflow: auto;
         @include flex-container();
     }
-
-    .data-table {
-        width: 100%;
-        @include body-2-typography();
-
-        &__table {
-            max-width: 100%;
-
-            border-spacing: 0;
-            border-collapse: separate;
-        }
-    }
-
-    .data-table__th {
-        font-weight: bold;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
-
-    .data-table__sticky .data-table__th,
-    .data-table__td {
-        height: var(--data-table-row-height);
-
-        vertical-align: middle;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
 }
 
 .error {

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

@@ -1,13 +1,23 @@
 @import '../../../../styles/mixins.scss';
 
 .ydb-hot-keys {
-    &__table {
-        @include freeze-nth-column(1);
-    }
-
     &__primary-key-column {
         display: flex;
         align-items: center;
         gap: 5px;
     }
+
+    &__help-card {
+        position: sticky;
+        left: 0;
+
+        margin-bottom: 20px;
+        padding: 20px 40px 20px 20px;
+
+        &__close-button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+    }
 }

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

@@ -0,0 +1,7 @@
+@import '../../../../../styles/mixins.scss';
+
+.ydb-async-replication-paths {
+    &__title {
+        @include info-viewer-title();
+    }
+}

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

@@ -54,12 +54,6 @@
         &:not(:last-child) {
             margin-bottom: var(--diagnostics-section-margin);
         }
-
-        th {
-            height: 40px;
-
-            vertical-align: middle;
-        }
     }
 
     &__top-queries-row {

package/dist/containers/Tenant/Info/View/View.scss

@@ -0,0 +1,13 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-view-info {
+    @include flex-container();
+
+    &__properties-list {
+        max-width: calc(100% - 40px);
+    }
+
+    &__title {
+        @include info-viewer-title();
+    }
+}

package/dist/package.json

@@ -0,0 +1,174 @@
+{
+    "name": "ydb-embedded-ui",
+    "version": "6.6.0",
+    "files": [
+        "dist"
+    ],
+    "main": "dist/lib.js",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
+    },
+    "dependencies": {
+        "@bem-react/classname": "^1.6.0",
+        "@gravity-ui/axios-wrapper": "^1.4.1",
+        "@gravity-ui/chartkit": "^5.5.0",
+        "@gravity-ui/components": "^3.6.2",
+        "@gravity-ui/date-utils": "^2.4.0",
+        "@gravity-ui/i18n": "^1.5.0",
+        "@gravity-ui/icons": "^2.9.1",
+        "@gravity-ui/navigation": "^2.10.0",
+        "@gravity-ui/paranoid": "^2.0.1",
+        "@gravity-ui/react-data-table": "^2.1.1",
+        "@gravity-ui/uikit": "^6.15.0",
+        "@gravity-ui/websql-autocomplete": "^9.1.0",
+        "@reduxjs/toolkit": "^2.2.3",
+        "axios": "^1.6.8",
+        "colord": "^2.9.3",
+        "copy-to-clipboard": "^3.3.3",
+        "crc-32": "^1.2.2",
+        "history": "^4.10.1",
+        "lodash": "^4.17.21",
+        "monaco-editor": "^0.48.0",
+        "numeral": "^2.0.6",
+        "path-to-regexp": "^3.0.0",
+        "qs": "^6.12.0",
+        "react-error-boundary": "^4.0.13",
+        "react-helmet-async": "2.0.4",
+        "react-json-inspector": "^7.1.1",
+        "react-list": "^0.8.17",
+        "react-monaco-editor": "^0.55.0",
+        "react-redux": "^9.1.0",
+        "react-router": "^5.3.4",
+        "react-router-dom": "^5.3.4",
+        "react-split": "^2.0.14",
+        "redux": "^5.0.1",
+        "redux-location-state": "^2.8.2",
+        "tslib": "^2.6.2",
+        "url": "^0.11.3",
+        "use-query-params": "^2.2.1",
+        "web-vitals": "^1.1.2",
+        "ydb-ui-components": "^4.2.0",
+        "zod": "^3.23.8"
+    },
+    "scripts": {
+        "analyze": "source-map-explorer 'build/static/js/*.js'",
+        "start": "react-app-rewired start",
+        "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm start",
+        "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
+        "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
+        "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm run build",
+        "build:embedded:archive": "npm run build:embedded && mv build embedded-ui && zip -r embedded-ui.zip embedded-ui && rm -rf embedded-ui",
+        "lint": "run-p lint:*",
+        "lint:js": "eslint  --ext .js,.jsx,.ts,.tsx .",
+        "lint:styles": "stylelint 'src/**/*.{css,scss}'",
+        "lint:other": "npm run prettier -- --check",
+        "prettier": "prettier '**/*.{json,yaml,yml,md}'",
+        "unimported": "npx unimported --no-cache",
+        "package": "rm -rf dist && tsc -p tsconfig.package.json && copyfiles -u 1 'src/**/*.{css,scss,svg}' dist",
+        "test": "react-app-rewired test",
+        "eject": "react-scripts eject",
+        "prepublishOnly": "npm run package",
+        "typecheck": "tsc --noEmit",
+        "prepare": "husky",
+        "test:e2e:install": "npx playwright install --with-deps",
+        "test:e2e": "npx playwright test --config=playwright.config.ts"
+    },
+    "lint-staged": {
+        "*.{scss, css}": [
+            "stylelint --fix --quiet"
+        ],
+        "*.{js,jsx,ts,tsx}": [
+            "eslint --fix --quiet"
+        ],
+        "*.{json,yaml,yml,md}": [
+            "prettier --write"
+        ]
+    },
+    "jest": {
+        "verbose": true,
+        "moduleFileExtensions": [
+            "js",
+            "json",
+            "ts",
+            "tsx"
+        ],
+        "rootDir": ".",
+        "transform": {
+            "^.+\\.[jt]sx?$": "ts-jest"
+        },
+        "coverageDirectory": "./coverage",
+        "collectCoverageFrom": [
+            "src/**/*.{ts,tsx,js,jsx}"
+        ],
+        "testEnvironment": "jsdom",
+        "moduleNameMapper": {
+            "\\.(css|less|scss|sass)$": "jest-transform-css",
+            "^axios$": "axios/dist/node/axios.cjs",
+            "^@gravity-ui/uikit/toaster-singleton-react-18$": "@gravity-ui/uikit/build/cjs/toaster-singleton-react-18.js"
+        }
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@commitlint/cli": "^19.2.1",
+        "@commitlint/config-conventional": "^19.1.0",
+        "@gravity-ui/eslint-config": "^3.2.0",
+        "@gravity-ui/prettier-config": "^1.1.0",
+        "@gravity-ui/stylelint-config": "^4.0.1",
+        "@gravity-ui/tsconfig": "^1.0.0",
+        "@playwright/test": "^1.42.1",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.2",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.17.0",
+        "@types/numeral": "^2.0.5",
+        "@types/qs": "^6.9.14",
+        "@types/react": "^18.2.73",
+        "@types/react-dom": "^18.2.23",
+        "@types/react-router": "^5.1.20",
+        "@types/react-router-dom": "^5.3.3",
+        "copyfiles": "^2.4.1",
+        "http-proxy-middleware": "^2.0.6",
+        "husky": "^9.0.11",
+        "jest-transform-css": "^6.0.1",
+        "lint-staged": "^15.2.2",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.4.38",
+        "prettier": "^3.2.5",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-app-rewired": "^2.2.1",
+        "react-dom": "^18.2.0",
+        "react-scripts": "^5.0.1",
+        "sass": "^1.72.0",
+        "source-map-explorer": "^2.5.3",
+        "stylelint": "^15.0.0",
+        "ts-jest": "^29.1.2",
+        "typescript": "^5.4.3"
+    },
+    "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "overrides": {
+        "fork-ts-checker-webpack-plugin": "^9.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "redux": "^5.0.1",
+        "typescript": "^5.4.3",
+        "monaco-editor": "^0.48.0"
+    }
+}

package/dist/src/components/AsyncReplicationState/AsyncReplicationState.d.ts

@@ -0,0 +1,6 @@
+import type { TReplicationState } from '../../types/api/schema/replication';
+interface AsyncReplicationStateProps {
+    state?: TReplicationState;
+}
+export declare function AsyncReplicationState({ state }: AsyncReplicationStateProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/AsyncReplicationState/AsyncReplicationState.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@gravity-ui/uikit';
+export function AsyncReplicationState({ state }) {
+    if (!state) {
+        return null;
+    }
+    if ('StandBy' in state) {
+        return _jsx(Label, { theme: "info", children: "Standby" });
+    }
+    if ('Paused' in state) {
+        return _jsx(Label, { theme: "info", children: "Paused" });
+    }
+    if ('Done' in state) {
+        return _jsx(Label, { theme: "success", children: "Done" });
+    }
+    if ('Error' in state) {
+        return _jsx(Label, { theme: "danger", children: "Error" });
+    }
+    return _jsx(Label, { size: "s", children: "Unknown" });
+}

package/dist/src/components/AsyncReplicationState/index.d.ts

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

package/dist/src/components/AsyncReplicationState/index.js

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

package/dist/src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ButtonProps, PopoverProps } from '@gravity-ui/uikit';
+interface ButtonWithConfirmDialogProps<T, K> {
+    children: React.ReactNode;
+    onConfirmAction: () => Promise<T>;
+    onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
+    dialogContent: string;
+    buttonDisabled?: ButtonProps['disabled'];
+    buttonView?: ButtonProps['view'];
+    buttonClassName?: ButtonProps['className'];
+    withPopover?: boolean;
+    popoverContent?: PopoverProps['content'];
+    popoverPlacement?: PopoverProps['placement'];
+    popoverDisabled?: PopoverProps['disabled'];
+}
+export declare function ButtonWithConfirmDialog<T, K>({ children, onConfirmAction, onConfirmActionSuccess, dialogContent, buttonDisabled, buttonView, buttonClassName, withPopover, popoverContent, popoverPlacement, popoverDisabled, }: ButtonWithConfirmDialogProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Popover } from '@gravity-ui/uikit';
+import { CriticalActionDialog } from '../CriticalActionDialog';
+export function ButtonWithConfirmDialog({ children, onConfirmAction, onConfirmActionSuccess, dialogContent, buttonDisabled = false, buttonView = 'action', buttonClassName, withPopover = false, popoverContent, popoverPlacement = 'right', popoverDisabled = true, }) {
+    const [isConfirmDialogVisible, setIsConfirmDialogVisible] = React.useState(false);
+    const [buttonLoading, setButtonLoading] = React.useState(false);
+    const handleConfirmAction = async () => {
+        setButtonLoading(true);
+        await onConfirmAction();
+        setButtonLoading(false);
+    };
+    const handleConfirmActionSuccess = async () => {
+        if (onConfirmActionSuccess) {
+            setButtonLoading(true);
+            try {
+                await onConfirmActionSuccess();
+            }
+            catch (_a) {
+            }
+            finally {
+                setButtonLoading(false);
+            }
+        }
+    };
+    const handleConfirmActionError = () => {
+        setButtonLoading(false);
+    };
+    const renderButton = () => {
+        return (_jsx(Button, { onClick: () => setIsConfirmDialogVisible(true), view: buttonView, disabled: buttonDisabled, loading: !buttonDisabled && buttonLoading, className: buttonClassName, children: children }));
+    };
+    const renderContent = () => {
+        if (withPopover) {
+            return (_jsx(Popover, { content: popoverContent, placement: popoverPlacement, disabled: popoverDisabled, children: renderButton() }));
+        }
+        return renderButton();
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(CriticalActionDialog, { visible: isConfirmDialogVisible, text: dialogContent, onConfirm: handleConfirmAction, onConfirmActionSuccess: handleConfirmActionSuccess, onConfirmActionError: handleConfirmActionError, onClose: () => {
+                    setIsConfirmDialogVisible(false);
+                } }), renderContent()] }));
+}

package/dist/src/components/Errors/ResponseError/ResponseError.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import i18n from '../i18n';
+export const ResponseError = ({ error, className, defaultMessage = i18n('responseError.defaultMessage'), }) => {
+    let statusText = '';
+    if (error && typeof error === 'string') {
+        statusText = error;
+    }
+    if (error && typeof error === 'object') {
+        if ('statusText' in error && typeof error.statusText === 'string') {
+            statusText = error.statusText;
+        }
+        else if ('message' in error && typeof error.message === 'string') {
+            statusText = error.message;
+        }
+    }
+    return _jsx("div", { className: `error ${className}`, children: statusText || defaultMessage });
+};

package/dist/src/components/PDiskInfo/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const pDiskInfoKeyset: (key: "path" | "type" | "size" | "state" | "links" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/src/components/QueryExecutionStatus/QueryExecutionStatus.d.ts

@@ -0,0 +1,7 @@
+import './QueryExecutionStatus.scss';
+interface QueryExecutionStatusProps {
+    className?: string;
+    error?: unknown;
+}
+export declare const QueryExecutionStatus: ({ className, error }: QueryExecutionStatusProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/QueryExecutionStatus/QueryExecutionStatus.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleQuestionFill, CircleXmark } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { isAxiosError } from 'axios';
+import { cn } from '../../utils/cn';
+import './QueryExecutionStatus.scss';
+const b = cn('kv-query-execution-status');
+export const QueryExecutionStatus = ({ className, error }) => {
+    let icon;
+    let label;
+    if (isAxiosError(error) && error.code === 'ECONNABORTED') {
+        icon = _jsx(Icon, { data: CircleQuestionFill });
+        label = 'Connection aborted';
+    }
+    else {
+        const hasError = Boolean(error);
+        icon = (_jsx(Icon, { data: hasError ? CircleXmark : CircleCheck, className: b('result-status-icon', { error: hasError }) }));
+        label = hasError ? 'Failed' : 'Completed';
+    }
+    return (_jsxs("div", { className: b(null, className), children: [icon, label] }));
+};

package/dist/src/components/VDiskInfo/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/src/containers/Clusters/Clusters.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { Select, TableColumnSetup } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Loader } from '../../components/Loader';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
+import { Search } from '../../components/Search';
+import { changeClustersFilters, clustersApi } from '../../store/reducers/clusters/clusters';
+import { aggregateClustersInfo, filterClusters, selectClusterNameFilter, selectServiceFilter, selectStatusFilter, selectVersionFilter, } from '../../store/reducers/clusters/selectors';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { getMinorVersion } from '../../utils/versions';
+import { ClustersStatistics } from './ClustersStatistics';
+import { CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY } from './columns';
+import { COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY } from './constants';
+import i18n from './i18n';
+import { b } from './shared';
+import { useSelectedColumns } from './useSelectedColumns';
+import './Clusters.scss';
+export function Clusters() {
+    const query = clustersApi.useGetClustersListQuery(undefined, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const dispatch = useTypedDispatch();
+    const clusterName = useTypedSelector(selectClusterNameFilter);
+    const status = useTypedSelector(selectStatusFilter);
+    const service = useTypedSelector(selectServiceFilter);
+    const version = useTypedSelector(selectVersionFilter);
+    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 clusters = query.data;
+    const { servicesToSelect, versions } = React.useMemo(() => {
+        const clustersServices = new Set();
+        const uniqVersions = new Set();
+        const clusterList = clusters !== null && clusters !== void 0 ? clusters : [];
+        clusterList.forEach((cluster) => {
+            var _a, _b;
+            if (cluster.service) {
+                clustersServices.add(cluster.service);
+            }
+            (_b = (_a = cluster.cluster) === null || _a === void 0 ? void 0 : _a.Versions) === null || _b === void 0 ? void 0 : _b.forEach((v) => {
+                uniqVersions.add(getMinorVersion(v));
+            });
+        });
+        return {
+            servicesToSelect: Array.from(clustersServices).map((value) => ({
+                value,
+                content: value,
+            })),
+            versions: Array.from(uniqVersions).map((value) => ({ value, content: value })),
+        };
+    }, [clusters]);
+    const filteredClusters = React.useMemo(() => {
+        return filterClusters(clusters !== null && clusters !== void 0 ? clusters : [], { clusterName, status, service, version });
+    }, [clusterName, clusters, service, status, version]);
+    const aggregation = React.useMemo(() => aggregateClustersInfo(filteredClusters), [filteredClusters]);
+    const statuses = React.useMemo(() => {
+        return Array.from(new Set((clusters !== null && clusters !== void 0 ? clusters : []).map((cluster) => cluster.status).filter(Boolean)))
+            .sort()
+            .map((el) => ({ value: el, content: el }));
+    }, [clusters]);
+    if (query.isLoading) {
+        return _jsx(Loader, { size: "l" });
+    }
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { 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: statuses, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { 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", { 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", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CLUSTERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+                            columnId: COLUMNS_NAMES.TITLE,
+                            order: DataTable.ASCENDING,
+                        } }) }) })] }));
+}

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

@@ -0,0 +1,32 @@
+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" | "status" | "tenants" | "versions" | "service" | "hosts" | "balancer" | "title" | "owner" | "load")[];
+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";
+};

package/dist/src/containers/Clusters/constants.js

@@ -0,0 +1,44 @@
+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',
+};