ydb-embedded-ui 4.32.0 → 5.0.0

package/README.md

@@ -2,14 +2,15 @@
 
 Local viewer for YDB clusters
 
-* [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
-* [Project Roadmap](ROADMAP.md)
+- [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+- [Project Roadmap](ROADMAP.md)
 
 ## Preview
 
 You can preview working UI using YDB docker image. It will be UI with the latest stable ydb version.
 
 Run on a machine with Docker installed:
+
 ```
 docker pull cr.yandex/yc/yandex-docker-local-ydb
 docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
@@ -40,11 +41,26 @@ To test new features, you can use ydb version that is currently in testing mode
 
 ### Custom backend in dev mode
 
-YDB docker represents a single node cluster with only one version, small amount of storage groups, PDisks and VDisks. It may be not enough for development purposes. If you have your own development cluster with sufficient amount of entities, you can run the app in the dev mode with this cluster as backend. To do it, set you host to `REACT_APP_BACKEND` variable in `dev` script. For example: 
+YDB docker represents a single node cluster with only one version, small amount of storage groups, PDisks and VDisks. It may be not enough for development purposes. If you have your own development cluster with sufficient amount of entities, you can run the app in the dev mode with this cluster as backend. To do it, set you host to `REACT_APP_BACKEND` variable in `dev` script. For example:
+
 ```
 "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://your-cluster-host:8765 npm start"
 ```
 
+### Meta backend in dev mode (multi cluster)
+
+If you have meta backend, you can run the app in dev mode with this backend like this:
+
+```
+DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND= REACT_APP_META_BACKEND=http://your-meta-host:8765 npm start
+```
+
+if you need to connect to the meta backend from a server then run the app like this:
+
+```
+DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND= REACT_APP_META_BACKEND= META_YDB_BACKEND=http://your-meta-host:8765 npm start
+```
+
 ## E2E Tests
 
 For e2e tests we use `@playwright/tests`. Tests configuration is in `playwright.config.ts`. Tests are set up in `tests` dir.
@@ -90,4 +106,4 @@ It also could be usefull for development purposes, because some operations, that
 2. Copy your build files from `build` folder to `/contentmonitoring` folder on desired cluster host
 3. Open `http://your-cluster-host:8765/monitoring` to see updated UI
 
-It's assumed, that you have all the necessary access rights to update files on the host.
+It's assumed, that you have all the necessary access rights to update files on the host.

package/dist/components/BasicNodeViewer/BasicNodeViewer.d.ts

@@ -0,0 +1,10 @@
+import type { TSystemStateInfo } from '../../types/api/nodes';
+import type { AdditionalNodesProps } from '../../types/additionalProps';
+import './BasicNodeViewer.scss';
+interface BasicNodeViewerProps {
+    node: TSystemStateInfo;
+    additionalNodesProps?: AdditionalNodesProps;
+    className?: string;
+}
+export declare const BasicNodeViewer: ({ node, additionalNodesProps, className }: BasicNodeViewerProps) => JSX.Element;
+export {};

package/dist/components/BasicNodeViewer/BasicNodeViewer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import EntityStatus from '../EntityStatus/EntityStatus';
+import { Tags } from '../Tags';
+import { Icon } from '../Icon';
+import './BasicNodeViewer.scss';
+const b = cn('basic-node-viewer');
+export const BasicNodeViewer = ({ node, additionalNodesProps, className }) => {
+    const nodeHref = (additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef)
+        ? additionalNodesProps.getNodeRef(node) + 'internal'
+        : undefined;
+    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: node ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Node" })), _jsx(EntityStatus, { status: node.SystemState, name: node.Host }), nodeHref && (_jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: nodeHref, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) }))), _jsxs("div", Object.assign({ className: b('id') }, { children: [_jsx("label", Object.assign({ className: b('label') }, { children: "NodeID" })), _jsx("label", { children: node.NodeId })] })), node.DataCenter && _jsx(Tags, { tags: [node.DataCenter] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", Object.assign({ className: "error" }, { children: "no data" }))) })));
+};

package/dist/components/BasicNodeViewer/index.js

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

package/dist/components/CellWithPopover/CellWithPopover.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type PopoverProps } from '@gravity-ui/uikit';
+import './CellWithPopover.scss';
+interface CellWithPopoverProps extends PopoverProps {
+    wrapperClassName?: string;
+}
+export declare function CellWithPopover({ children, className, wrapperClassName, ...props }: CellWithPopoverProps): JSX.Element;
+export {};

package/dist/components/CellWithPopover/CellWithPopover.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Popover } from '@gravity-ui/uikit';
+import './CellWithPopover.scss';
+const b = cn('ydb-cell-with-popover');
+export function CellWithPopover(_a) {
+    var { children, className, wrapperClassName } = _a, props = __rest(_a, ["children", "className", "wrapperClassName"]);
+    return (_jsx("div", Object.assign({ className: b(null, wrapperClassName) }, { children: _jsx(Popover, Object.assign({ className: b('popover', className) }, props, { children: children })) })));
+}

package/dist/components/CellWithPopover/CellWithPopover.scss

@@ -1,13 +1,20 @@
 .ydb-cell-with-popover {
     display: flex;
 
+    max-width: 100%;
+
     &__popover {
         display: inline-block;
         overflow: hidden;
 
         max-width: 100%;
 
+        vertical-align: middle;
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        .yc-popover__handler {
+            display: inline;
+        }
     }
 }

package/dist/components/CircularProgressBar/CircularProgressBar.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { MetricStatus } from '../../store/reducers/tenants/types';
+import './CircularProgressBar.scss';
+interface CircularProgressBarProps {
+    size?: number;
+    progress?: number;
+    strokeWidth?: number;
+    content?: ReactNode;
+    status?: MetricStatus;
+    circleBgClassName?: string;
+}
+export declare function CircularProgressBar({ size, progress, strokeWidth, content, status, circleBgClassName, }: CircularProgressBarProps): JSX.Element;
+export {};

package/dist/components/CircularProgressBar/CircularProgressBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { normalizeProgress } from '../../store/reducers/tenants/utils';
+import './CircularProgressBar.scss';
+const b = cn('ydb-circular-progress-bar');
+export function CircularProgressBar({ size = 100, progress = 0, strokeWidth = 10, content, status, circleBgClassName, }) {
+    const center = size / 2;
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    const normalizedProgress = normalizeProgress(progress);
+    const offset = ((100 - normalizedProgress) / 100) * circumference;
+    return (_jsxs("div", Object.assign({ className: b('wrapper') }, { children: [content && _jsx("div", Object.assign({ className: b('content') }, { children: content })), _jsxs("svg", Object.assign({ className: b(), width: size, height: size }, { children: [_jsx("circle", { className: b('circle-bg', circleBgClassName), cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), _jsx("circle", { className: b('circle', { status: status === null || status === void 0 ? void 0 : status.toLocaleLowerCase() }), cx: center, cy: center, r: radius, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset })] }))] })));
+}

package/dist/components/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from '@gravity-ui/uikit';
+interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
+    className?: string;
+    text: string;
+}
+export declare function ClipboardButton({ text, ...props }: ClipboardButtonProps): JSX.Element;
+export {};

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, ClipboardIcon, CopyToClipboard as CopyToClipboardUiKit, CopyToClipboardStatus, Tooltip, } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+const b = cn('clipboard-button');
+/**
+ * An inner component required
+ * because `react-copy-to-clipboard` doesn't work with `Tooltip` otherwise.
+ */
+function InnerButton(_a) {
+    var { className, status, title } = _a, props = __rest(_a, ["className", "status", "title"]);
+    return (_jsx(Tooltip, Object.assign({ content: status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy', 
+        /**
+         * Auto-placement has a bug with text changing.
+         * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
+         */
+        placement: "bottom-start" }, { children: _jsx(Button, Object.assign({}, props, { className: b(null, className) }, { children: _jsx(Button.Icon, { children: _jsx(ClipboardIcon, { status: status, size: 16 }) }) })) })));
+}
+export function ClipboardButton(_a) {
+    var { text } = _a, props = __rest(_a, ["text"]);
+    return (_jsx(CopyToClipboardUiKit, Object.assign({ text: text, timeout: 1000 }, { children: (status) => _jsx(InnerButton, Object.assign({}, props, { status: status })) })));
+}

package/dist/components/ClipboardButton/index.js

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

package/dist/components/ComponentsProvider/ComponentsProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ComponentsRegistry } from './componentsRegistry';
+interface ComponentsProviderProps {
+    registry: ComponentsRegistry;
+    children: React.ReactNode;
+}
+export declare function ComponentsProvider({ children, registry }: ComponentsProviderProps): JSX.Element;
+export declare function useComponent<T extends Parameters<ComponentsRegistry['get']>[0]>(id: T): ({
+    StaffCard: typeof import("../User/StaffCard").StaffCard;
+} & {
+    AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+})[T] extends React.ComponentType<any> ? React.ComponentType<React.PropsWithoutRef<React.ComponentProps<({
+    StaffCard: typeof import("../User/StaffCard").StaffCard;
+} & {
+    AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+})[T]>>> : never;
+export {};

package/dist/components/ComponentsProvider/ComponentsProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const componentsStoreContext = React.createContext(undefined);
+export function ComponentsProvider({ children, registry }) {
+    return (_jsx(componentsStoreContext.Provider, Object.assign({ value: registry }, { children: children })));
+}
+export function useComponent(id) {
+    const store = React.useContext(componentsStoreContext);
+    if (store === undefined) {
+        throw new Error('useComponent must be used within ComponentsProvider');
+    }
+    return store.get(id);
+}

package/dist/components/ComponentsProvider/componentsRegistry.d.ts

@@ -0,0 +1,11 @@
+import { StaffCard } from '../User/StaffCard';
+import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
+import { ComponentsRegistryTemplate, Registry } from './registry';
+declare const componentsRegistryInner: Registry<{
+    StaffCard: typeof StaffCard;
+} & {
+    AsideNavigation: typeof AsideNavigation;
+}>;
+export declare type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
+export declare const componentsRegistry: ComponentsRegistry;
+export {};

package/dist/components/ComponentsProvider/componentsRegistry.js

@@ -0,0 +1,7 @@
+import { StaffCard } from '../User/StaffCard';
+import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
+import { Registry } from './registry';
+const componentsRegistryInner = new Registry()
+    .register('StaffCard', StaffCard)
+    .register('AsideNavigation', AsideNavigation);
+export const componentsRegistry = componentsRegistryInner;

package/dist/components/ComponentsProvider/registry.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type RegistryEntity<T = any> = T;
+declare type RegistryEntities = Record<string, RegistryEntity>;
+export declare class Registry<Entities extends RegistryEntities = {}> {
+    type?: Entities;
+    private entities;
+    set<Id extends keyof Entities>(id: Id, entity: Entities[Id]): this;
+    get<Id extends keyof Entities>(id: Id): any;
+    register<Id extends string, T>(id: Id, entity: T): Registry<Entities & {
+        [key in Id]: T;
+    }>;
+}
+declare type ComponentType<T> = T extends React.ComponentType<any> ? React.ComponentType<React.ComponentPropsWithoutRef<T>> : never;
+export interface ComponentsRegistryTemplate<T extends Registry, Entities = NonNullable<T['type']>> {
+    set<Id extends keyof Entities>(id: Id, entity: ComponentType<Entities[Id]>): this;
+    get<Id extends keyof Entities>(id: Id): ComponentType<Entities[Id]>;
+}
+export {};

package/dist/components/ComponentsProvider/registry.js

@@ -0,0 +1,16 @@
+export class Registry {
+    constructor() {
+        this.entities = {};
+    }
+    set(id, entity) {
+        this.entities[id] = entity;
+        return this;
+    }
+    get(id) {
+        return this.entities[id];
+    }
+    register(id, entity) {
+        this.entities[id] = entity;
+        return this;
+    }
+}

package/dist/components/ContentWithPopup/ContentWithPopup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PopupProps } from '@gravity-ui/uikit';
+interface ContentWithPopupProps extends PopupProps {
+    content: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ContentWithPopup: ({ children, content, className, hasArrow, placement, ...props }: ContentWithPopupProps) => JSX.Element;
+export {};

package/dist/components/ContentWithPopup/ContentWithPopup.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Popup } from '@gravity-ui/uikit';
+export const ContentWithPopup = (_a) => {
+    var { children, content, className, hasArrow = true, placement = ['top', 'bottom'] } = _a, props = __rest(_a, ["children", "content", "className", "hasArrow", "placement"]);
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+    const anchor = useRef(null);
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Popup, Object.assign({ anchorRef: anchor, open: isPopupVisible, placement: placement, hasArrow: hasArrow }, props, { children: content })), _jsx("span", Object.assign({ className: className, ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: children }))] }));
+};

package/dist/components/CriticalActionDialog/CriticalActionDialog.d.ts

@@ -0,0 +1,10 @@
+import './CriticalActionDialog.scss';
+interface CriticalActionDialogProps {
+    visible: boolean;
+    text: string;
+    onClose: VoidFunction;
+    onConfirm: () => Promise<unknown>;
+    onConfirmActionFinish: VoidFunction;
+}
+export declare const CriticalActionDialog: ({ visible, text, onClose, onConfirm, onConfirmActionFinish, }: CriticalActionDialogProps) => JSX.Element;
+export {};

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import cn from 'bem-cn-lite';
+import { Dialog } from '@gravity-ui/uikit';
+import { Icon } from '../Icon';
+import './CriticalActionDialog.scss';
+const b = cn('ydb-critical-dialog');
+export const CriticalActionDialog = ({ visible, text, onClose, onConfirm, onConfirmActionFinish, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        return onConfirm().then(() => {
+            onConfirmActionFinish();
+            setIsLoading(false);
+            onClose();
+        });
+    };
+    return (_jsx(Dialog, Object.assign({ open: visible, hasCloseButton: false, className: b(), size: "s", onClose: onClose }, { children: _jsxs("form", Object.assign({ onSubmit: onSubmit }, { children: [_jsxs(Dialog.Body, Object.assign({ className: b('body') }, { children: [_jsx("span", Object.assign({ className: b('warning-icon') }, { children: _jsx(Icon, { name: "dialog-warning", width: "24", height: "22", viewBox: "0 0 24 22" }) })), text] })), _jsx(Dialog.Footer, { loading: isLoading, preset: "default", textButtonApply: "Confirm", textButtonCancel: "Cancel", propsButtonApply: { type: 'submit' }, onClickButtonCancel: onClose, onClickButtonApply: () => { } })] })) })));
+};

package/dist/components/CriticalActionDialog/index.js

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

package/dist/components/DateRange/DateRange.d.ts

@@ -0,0 +1,13 @@
+import './DateRange.scss';
+export interface DateRangeValues {
+    /** ms from epoch */
+    from?: number;
+    /** ms from epoch */
+    to?: number;
+}
+interface DateRangeProps extends DateRangeValues {
+    className?: string;
+    onChange?: (value: DateRangeValues) => void;
+}
+export declare const DateRange: ({ from, to, className, onChange }: DateRangeProps) => JSX.Element;
+export {};

package/dist/components/DateRange/DateRange.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import './DateRange.scss';
+const b = cn('date-range');
+const toTimezonelessISOString = (timestamp) => {
+    if (!timestamp || isNaN(timestamp)) {
+        return undefined;
+    }
+    // shift by local offset to treat toISOString output as local time
+    const shiftedTimestamp = timestamp - new Date().getTimezoneOffset() * 60 * 1000;
+    return new Date(shiftedTimestamp).toISOString().substring(0, 'yyyy-MM-DDThh:mm'.length);
+};
+export const DateRange = ({ from, to, className, onChange }) => {
+    const handleFromChange = ({ target: { value } }) => {
+        let newFrom = value ? new Date(value).getTime() : undefined;
+        // some browsers allow selecting time after the boundary specified in `max`
+        if (newFrom && to && newFrom > to) {
+            newFrom = to;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange({ from: newFrom, to });
+    };
+    const handleToChange = ({ target: { value } }) => {
+        let newTo = value ? new Date(value).getTime() : undefined;
+        // some browsers allow selecting time before the boundary specified in `min`
+        if (from && newTo && from > newTo) {
+            newTo = from;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange({ from, to: newTo });
+    };
+    const startISO = toTimezonelessISOString(from);
+    const endISO = toTimezonelessISOString(to);
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsx("input", { type: "datetime-local", value: startISO || '', max: endISO, onChange: handleFromChange, className: b('input') }), "\u2014", _jsx("input", { type: "datetime-local", min: startISO, value: endISO || '', onChange: handleToChange, className: b('input') })] })));
+};

package/dist/components/DateRange/index.js

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

package/dist/components/DiagnosticCard/DiagnosticCard.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import './DiagnosticCard.scss';
+interface DiagnosticCardProps {
+    children?: ReactNode;
+    className?: string;
+    active?: boolean;
+}
+export declare function DiagnosticCard({ children, className, active }: DiagnosticCardProps): JSX.Element;
+export {};

package/dist/components/DiagnosticCard/DiagnosticCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import './DiagnosticCard.scss';
+const b = cn('ydb-diagnostic-card');
+export function DiagnosticCard({ children, className, active }) {
+    return _jsx("div", Object.assign({ className: b({ active }, className) }, { children: children }));
+}

package/dist/components/Divider/Divider.d.ts

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

package/dist/components/Divider/Divider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import './Divider.scss';
+const b = cn('kv-divider');
+function Divider() {
+    return _jsx("div", { className: b() });
+}
+export default Divider;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import './EmptyState.scss';
+declare const sizes: {
+    s: number;
+    m: number;
+    l: number;
+};
+export interface EmptyStateProps {
+    title: string;
+    image?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode[];
+    size?: keyof typeof sizes;
+    position?: 'left' | 'center';
+}
+export declare const EmptyState: ({ image, title, description, actions, size, position, }: EmptyStateProps) => JSX.Element;
+export {};

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Icon } from '../Icon';
+import './EmptyState.scss';
+const block = cn('empty-state');
+const sizes = {
+    s: 150,
+    m: 250,
+    l: 350,
+};
+export const EmptyState = ({ image, title, description, actions, size = 'm', position = 'center', }) => {
+    return (_jsx("div", Object.assign({ className: block({ size }) }, { children: _jsxs("div", Object.assign({ className: block('wrapper', { size, position }) }, { children: [_jsx("div", Object.assign({ className: block('image') }, { children: image ? (image) : (_jsx(Icon, { viewBox: "0 0 383 396", name: "emptyState", width: sizes[size], height: sizes[size] })) })), _jsx("div", Object.assign({ className: block('title', { size }) }, { children: title })), _jsx("div", Object.assign({ className: block('description') }, { children: description })), _jsx("div", Object.assign({ className: block('actions') }, { children: actions }))] })) })));
+};

package/dist/components/EmptyState/index.js

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

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface EnableFullscreenButtonProps {
+    disabled?: boolean;
+}
+declare function EnableFullscreenButton({ disabled }: EnableFullscreenButtonProps): JSX.Element;
+export default EnableFullscreenButton;

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@gravity-ui/uikit';
+import { useDispatch } from 'react-redux';
+import { enableFullscreen } from '../../store/reducers/fullscreen';
+import { Icon } from '../Icon';
+function EnableFullscreenButton({ disabled }) {
+    const dispatch = useDispatch();
+    const onEnableFullscreen = () => {
+        dispatch(enableFullscreen());
+    };
+    return (_jsx(Button, Object.assign({ onClick: onEnableFullscreen, view: "flat-secondary", disabled: disabled, title: "Fullscreen" }, { children: _jsx(Icon, { name: "enableFullscreen", viewBox: '0 0 16 16', height: 16, width: 16 }) })));
+}
+export default EnableFullscreenButton;

package/dist/components/EntitiesCount/EntitiesCount.d.ts

@@ -0,0 +1,9 @@
+interface EntitiesCountProps {
+    current: number | string;
+    total?: number | string;
+    label?: string;
+    loading?: boolean;
+    className?: string;
+}
+export declare const EntitiesCount: ({ total, current, label, loading, className }: EntitiesCountProps) => JSX.Element;
+export {};

package/dist/components/EntitiesCount/EntitiesCount.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@gravity-ui/uikit';
+import i18n from './i18n';
+export const EntitiesCount = ({ total, current, label, loading, className }) => {
+    let content = '';
+    if (label) {
+        content += `${label}: `;
+    }
+    if (loading) {
+        content += '...';
+    }
+    else {
+        content += `${current}`;
+        if (total && Number(total) !== Number(current)) {
+            content += ` ${i18n('of')} ${total}`;
+        }
+    }
+    return (_jsx(Label, Object.assign({ theme: "info", size: "m", className: className }, { children: content })));
+};

package/dist/components/EntitiesCount/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "of": "of"
+    "of": "of"
 }

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

package/dist/components/EntitiesCount/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "of": "из"
+    "of": "из"
 }

package/dist/components/EntitiesCount/index.js

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

package/dist/components/EntityStatus/EntityStatus.d.ts

@@ -0,0 +1,38 @@
+export default EntityStatus;
+declare class EntityStatus extends React.Component<any, any, any> {
+    static propTypes: {
+        status: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string | number>;
+        onNameMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onNameMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        path: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        iconPath: PropTypes.Requireable<string>;
+        hasClipboardButton: PropTypes.Requireable<boolean>;
+        clipboardButtonAlwaysVisible: PropTypes.Requireable<boolean>;
+        showStatus: PropTypes.Requireable<boolean>;
+        externalLink: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        withLeftTrim: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        status: string;
+        text: string;
+        size: string;
+        label: string;
+        showStatus: boolean;
+        externalLink: boolean;
+        mode: string;
+        withLeftTrim: boolean;
+        clipboardButtonAlwaysVisible: boolean;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    renderIcon(): JSX.Element | null;
+    renderStatusLink(): JSX.Element;
+    renderLink(): any;
+    render(): JSX.Element;
+}
+import React from "react";