ydb-embedded-ui 5.0.0 → 5.2.0

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

@@ -1,8 +1,8 @@
-import type { TSystemStateInfo } from '../../types/api/nodes';
 import type { AdditionalNodesProps } from '../../types/additionalProps';
+import type { PreparedNode } from '../../store/reducers/node/types';
 import './BasicNodeViewer.scss';
 interface BasicNodeViewerProps {
-    node: TSystemStateInfo;
+    node: PreparedNode;
     additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }

package/dist/components/BasicNodeViewer/BasicNodeViewer.js

@@ -9,5 +9,5 @@ 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" }))) })));
+    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.DC && _jsx(Tags, { tags: [node.DC] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", Object.assign({ className: "error" }, { children: "no data" }))) })));
 };

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

@@ -9,9 +9,13 @@ export declare function useComponent<T extends Parameters<ComponentsRegistry['ge
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+} & {
+    ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
 })[T] extends React.ComponentType<any> ? React.ComponentType<React.PropsWithoutRef<React.ComponentProps<({
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+} & {
+    ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
 })[T]>>> : never;
 export {};

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

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

package/dist/components/ComponentsProvider/componentsRegistry.js

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

package/dist/components/EntityStatus/EntityStatus.scss

@@ -14,7 +14,7 @@
 
         margin-left: 8px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
 
         &_visible {
             visibility: visible;

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,9 +1,19 @@
 import type { ReactNode } from 'react';
 import './ErrorBoundary.scss';
+export declare function ErrorBoundary({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
 interface ErrorBoundaryProps {
     children?: ReactNode;
     useRetry?: boolean;
     onReportProblem?: (error?: Error) => void;
 }
-export declare const ErrorBoundary: ({ children, useRetry, onReportProblem }: ErrorBoundaryProps) => JSX.Element;
+export declare function ErrorBoundaryInner({ children, useRetry, onReportProblem, }: ErrorBoundaryProps): JSX.Element;
+interface ErrorBoundaryFallbackProps {
+    error: Error;
+    useRetry?: boolean;
+    resetErrorBoundary: () => void;
+    onReportProblem?: (error?: Error) => void;
+}
+export declare function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }: ErrorBoundaryFallbackProps): JSX.Element;
 export {};

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -4,13 +4,21 @@ import cn from 'bem-cn-lite';
 import { Button, Disclosure } from '@gravity-ui/uikit';
 import { registerError } from '../../utils/registerError';
 import { Illustration } from '../Illustration';
+import { useComponent } from '../ComponentsProvider/ComponentsProvider';
 import i18n from './i18n';
 import './ErrorBoundary.scss';
 const b = cn('ydb-error-boundary');
-export const ErrorBoundary = ({ children, useRetry = true, onReportProblem }) => {
+export function ErrorBoundary({ children }) {
+    const ErrorBoundaryComponent = useComponent('ErrorBoundary');
+    return _jsx(ErrorBoundaryComponent, { children: children });
+}
+export function ErrorBoundaryInner({ children, useRetry = true, onReportProblem, }) {
     return (_jsx(ErrorBoundaryBase, Object.assign({ onError: (error, info) => {
             registerError(error, info.componentStack, 'error-boundary');
         }, fallbackRender: ({ error, resetErrorBoundary }) => {
-            return (_jsxs("div", Object.assign({ className: b(null) }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+            return (_jsx(ErrorBoundaryFallback, { error: error, useRetry: useRetry, resetErrorBoundary: resetErrorBoundary, onReportProblem: onReportProblem }));
         } }, { children: children })));
-};
+}
+export function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }) {
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+}

package/dist/components/FullNodeViewer/FullNodeViewer.d.ts

@@ -1,7 +1,7 @@
-import type { TSystemStateInfo } from '../../types/api/nodes';
+import type { PreparedNode } from '../../store/reducers/node/types';
 import './FullNodeViewer.scss';
 interface FullNodeViewerProps {
-    node: TSystemStateInfo | undefined;
+    node: PreparedNode | undefined;
     className?: string;
 }
 export declare const FullNodeViewer: ({ node, className }: FullNodeViewerProps) => JSX.Element;

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -18,7 +18,7 @@ export const FullNodeViewer = ({ node, className }) => {
     if ((_b = node === null || node === void 0 ? void 0 : node.Tenants) === null || _b === void 0 ? void 0 : _b.length) {
         commonInfo.push({ label: 'Database', value: node.Tenants[0] });
     }
-    commonInfo.push({ label: 'Version', value: node === null || node === void 0 ? void 0 : node.Version }, { label: 'Uptime', value: calcUptime(node === null || node === void 0 ? void 0 : node.StartTime) }, { label: 'DC', value: node === null || node === void 0 ? void 0 : node.DataCenterDescription }, { label: 'Rack', value: node === null || node === void 0 ? void 0 : node.Rack });
+    commonInfo.push({ label: 'Version', value: node === null || node === void 0 ? void 0 : node.Version }, { label: 'Uptime', value: calcUptime(node === null || node === void 0 ? void 0 : node.StartTime) }, { label: 'DC', value: (node === null || node === void 0 ? void 0 : node.DataCenterDescription) || (node === null || node === void 0 ? void 0 : node.DC) }, { label: 'Rack', value: node === null || node === void 0 ? void 0 : node.Rack });
     const averageInfo = (_c = node === null || node === void 0 ? void 0 : node.LoadAverage) === null || _c === void 0 ? void 0 : _c.map((load, loadIndex) => ({
         label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
         value: (_jsx(ProgressViewer, { value: load, percents: true, colorizeProgress: true, capacity: 100 })),

package/dist/components/LagImages/LagImages.js

@@ -7,8 +7,8 @@ const READ_FILL = '#ADE8F5';
 const WRITE_FILL = '#f5be9d';
 const DashArc = ({ width, height, transform }) => (_jsx("path", { d: `M-${width / 2} 0 c0 -${height}, ${width} -${height}, ${width} 0`, fill: "none", strokeDasharray: "4,6", stroke: "#28f", strokeWidth: "1.6", transform: transform }));
 const ArrowLine = ({ width }) => (_jsx("path", { fill: "none", strokeWidth: "2", d: `M0 0 h${width} l-10 -5 m0 10 l10 -5` }));
-const WriteLag = () => (_jsxs("g", Object.assign({ fill: "var(--yc-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: WRITE_FILL }, { children: _jsx(ArrowLine, { width: STICK_SPACE * 2.9 }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.7}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.4, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${2.4 * STICK_SPACE}, ${HEIGHT / 2})` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
-const ReadLag = () => (_jsxs("g", Object.assign({ fill: "var(--yc-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: READ_FILL }, { children: _jsx(ArrowLine, { width: WIDTH }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.5}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 2.6}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.3, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, ${HEIGHT / 2})` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${2 * STICK_SPACE}, 0)` }, { children: [_jsx("use", { x: "-2", y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${3.2 * STICK_SPACE}, 0)` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
+const WriteLag = () => (_jsxs("g", Object.assign({ fill: "var(--g-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: WRITE_FILL }, { children: _jsx(ArrowLine, { width: STICK_SPACE * 2.9 }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.7}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.4, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${2.4 * STICK_SPACE}, ${HEIGHT / 2})` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
+const ReadLag = () => (_jsxs("g", Object.assign({ fill: "var(--g-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: READ_FILL }, { children: _jsx(ArrowLine, { width: WIDTH }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.5}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 2.6}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.3, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, ${HEIGHT / 2})` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${2 * STICK_SPACE}, 0)` }, { children: [_jsx("use", { x: "-2", y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${3.2 * STICK_SPACE}, 0)` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
 const DashPattern = ({ id, fill }) => (_jsx("pattern", Object.assign({ id: id, x: "0", y: "0", width: "8", height: "8", patternUnits: "userSpaceOnUse" }, { children: _jsx("path", { d: "M0 5L5 0H8L0 8V5M5 8L8 5V8Z", fill: fill }) })));
 export const WriteLagImage = () => (_jsxs("svg", Object.assign({ className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT }, { children: [_jsxs("defs", { children: [_jsx("g", Object.assign({ id: "check" }, { children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) })), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(WriteLag, {})] })));
 export const ReadLagImage = () => (_jsxs("svg", Object.assign({ className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT }, { children: [_jsxs("defs", { children: [_jsx("g", Object.assign({ id: "check" }, { children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) })), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(ReadLag, {})] })));

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
+import { useTheme } from '@gravity-ui/uikit';
 import { isNumeric } from '../../utils/utils';
 import { formatNumber, roundToPrecision } from '../../utils/dataFormatters/dataFormatters';
 import './ProgressViewer.scss';
@@ -20,6 +21,7 @@ const defaultFormatValues = (value, total) => {
     return [formatValue(value), formatValue(total)];
 };
 export function ProgressViewer({ value, capacity, formatValues = defaultFormatValues, percents, className, size = PROGRESS_VIEWER_SIZE_IDS.xs, colorizeProgress, inverseColorize, warningThreshold = 60, dangerThreshold = 80, }) {
+    const theme = useTheme();
     let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
     let valueText = value, capacityText = capacity, divider = '/';
@@ -31,19 +33,18 @@ export function ProgressViewer({ value, capacity, formatValues = defaultFormatVa
     else if (formatValues) {
         [valueText, capacityText] = formatValues(Number(value), Number(capacity));
     }
-    let bg = inverseColorize ? 'scarlet' : 'apple';
+    let status = inverseColorize ? 'danger' : 'good';
     if (colorizeProgress) {
         if (fillWidth > warningThreshold && fillWidth <= dangerThreshold) {
-            bg = 'saffron';
+            status = 'warning';
         }
         else if (fillWidth > dangerThreshold) {
-            bg = inverseColorize ? 'apple' : 'scarlet';
+            status = inverseColorize ? 'good' : 'danger';
         }
     }
     const lineStyle = {
         width: fillWidth + '%',
     };
-    const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
     const renderContent = () => {
         if (isNumeric(capacity)) {
             return `${valueText} ${divider} ${capacityText}`;
@@ -51,7 +52,7 @@ export function ProgressViewer({ value, capacity, formatValues = defaultFormatVa
         return valueText;
     };
     if (isNumeric(value)) {
-        return (_jsxs("div", Object.assign({ className: b({ size }, className) }, { children: [_jsx("div", { className: b('line', { bg }), style: lineStyle }), _jsx("span", Object.assign({ className: b('text', { text }) }, { children: renderContent() }))] })));
+        return (_jsxs("div", Object.assign({ className: b({ size, theme, status }, className) }, { children: [_jsx("div", { className: b('line'), style: lineStyle }), _jsx("span", Object.assign({ className: b('text') }, { children: renderContent() }))] })));
     }
     return _jsx("div", Object.assign({ className: `${b({ size })} ${className} error` }, { children: "no data" }));
 }

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .progress-viewer {
+    $block: &;
+
     position: relative;
     z-index: 0;
 
@@ -16,37 +18,51 @@
     font-size: var(--g-text-body-2-font-size);
     white-space: nowrap;
 
-    color: var(--g-color-text-light-primary);
+    color: var(--g-color-text-complementary);
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
+    &_theme_dark {
+        color: var(--g-color-text-light-primary);
+
+        // Ensure better contrast with text
+        #{$block}__line {
+            opacity: 0.75;
+        }
+    }
+
+    &_status {
+        &_good {
+            background-color: var(--g-color-base-positive-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-green);
+            }
+        }
+        &_warning {
+            background-color: var(--g-color-base-yellow-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-yellow);
+            }
+        }
+        &_danger {
+            background-color: var(--g-color-base-danger-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-red);
+            }
+        }
+    }
+
     &__line {
         position: absolute;
         top: 0;
         left: 0;
 
         height: 100%;
-
-        &_bg_scarlet {
-            background: var(--ydb-color-status-red);
-        }
-        &_bg_apple {
-            background: var(--ydb-color-status-green);
-        }
-        &_bg_saffron {
-            background: var(--ydb-color-status-yellow);
-        }
     }
 
     &__text {
         position: relative;
         z-index: 1;
-        &_text_contrast0 {
-            color: var(--g-color-text-light-primary);
-        }
-        &_text_contrast70 {
-            color: var(--g-color-text-complementary);
-        }
     }
 
     &_size_xs {

package/dist/components/TabletsOverall/TabletsOverall.js

@@ -8,12 +8,12 @@ import './TabletsOverall.scss';
 // to be able to see problem places with very small percentage, we'll set minimum percentage to 3.
 const minOverallPercentValue = 3;
 const colors = {
-    grey: 'var(--yc-color-base-misc-heavy)',
-    green: 'var(--yc-color-base-positive-heavy)',
-    yellow: ' var(--yc-color-base-warning-heavy)',
-    orange: 'var( --yc-color-base-warning-orange)',
-    red: 'var(--yc-color-base-danger-heavy)',
-    blue: 'var(--yc-color-base-info-heavy)',
+    grey: 'var(--ydb-color-status-grey)',
+    green: 'var(--ydb-color-status-green)',
+    yellow: ' var(--ydb-color-status-yellow)',
+    orange: 'var(--ydb-color-status-orange)',
+    red: 'var(--ydb-color-status-red)',
+    blue: 'var(--ydb-color-status-blue)',
 };
 const b = cn('kv-tablets-overall');
 function TabletsOverall({ tablets }) {

package/dist/containers/App/App.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 import ContentWrapper, { Content } from './Content';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import AppIcons from '../AppIcons/AppIcons';
@@ -11,7 +12,7 @@ import { Providers } from './Providers';
 import './App.scss';
 registerLanguages();
 function App({ store, history, singleClusterMode, children, userSettings = settings }) {
-    return (_jsxs(Providers, Object.assign({ store: store, history: history }, { children: [_jsx(ContentWrapper, { children: _jsx(Navigation, Object.assign({ userSettings: userSettings }, { children: _jsxs(ErrorBoundary, { children: [_jsx(Content, Object.assign({ singleClusterMode: singleClusterMode }, { children: children })), _jsx("div", { id: "fullscreen-root" })] }) })) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] })));
+    return (_jsxs(Providers, Object.assign({ store: store, history: history }, { children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, Object.assign({ userSettings: userSettings }, { children: _jsxs(ErrorBoundary, { children: [_jsx(Content, Object.assign({ singleClusterMode: singleClusterMode }, { children: children })), _jsx("div", { id: "fullscreen-root" })] }) })) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] })));
 }
 function mapStateToProps(state) {
     return {

package/dist/containers/App/Content.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import cn from 'bem-cn-lite';
 import { connect, useDispatch } from 'react-redux';
-import routes, { createHref } from '../../routes';
+import routes from '../../routes';
 import { Clusters } from '../Clusters/Clusters';
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
@@ -13,7 +13,7 @@ import TabletsFilters from '../TabletsFilters/TabletsFilters';
 import Header from '../Header/Header';
 import Authentication from '../Authentication/Authentication';
 import { getUser } from '../../store/reducers/authentication/authentication';
-import { clusterTabsIds } from '../Cluster/utils';
+import { getClusterPath } from '../Cluster/utils';
 import { useSlots } from '../../components/slots';
 import { useTypedSelector } from '../../utils/hooks';
 import { ClusterSlot, ClustersSlot, NodeSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
@@ -48,15 +48,15 @@ const routesSlots = [
     },
 ];
 function renderRouteSlot(slots, route) {
-    return (_jsx(Route, { path: route.path, exact: route.exact, render: () => {
+    return (_jsx(Route, { path: route.path, exact: route.exact, render: (props) => {
             const slot = slots.get(route.slot);
             let content;
             if (!slot) {
                 const Component = route.component;
-                content = _jsx(Component, {});
+                content = _jsx(Component, Object.assign({}, props));
             }
             else if (typeof slot.rendered === 'function') {
-                content = slot.rendered({ component: route.component });
+                content = slot.rendered(Object.assign({ component: route.component }, props));
             }
             else {
                 content = slot.rendered;
@@ -70,13 +70,7 @@ export function Content(props) {
     const slots = useSlots(props);
     const additionalRoutes = slots.get(RoutesSlot);
     const redirect = slots.get(RedirectSlot);
-    const redirectProps = (_a = redirect === null || redirect === void 0 ? void 0 : redirect.props) !== null && _a !== void 0 ? _a : (singleClusterMode
-        ? {
-            to: createHref(routes.cluster, {
-                activeTab: clusterTabsIds.tenants,
-            }),
-        }
-        : { to: routes.clusters });
+    const redirectProps = (_a = redirect === null || redirect === void 0 ? void 0 : redirect.props) !== null && _a !== void 0 ? _a : (singleClusterMode ? { to: getClusterPath() } : { to: routes.clusters });
     let mainPage;
     if (!singleClusterMode) {
         mainPage = { text: i18n('pages.clusters'), link: routes.clusters };

package/dist/containers/App/Providers.js

@@ -4,12 +4,13 @@ import { Router } from 'react-router';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { ThemeProvider } from '@gravity-ui/uikit';
+import { HelmetProvider } from 'react-helmet-async';
 import { ComponentsProvider } from '../../components/ComponentsProvider/ComponentsProvider';
 import { componentsRegistry as defaultComponentsRegistry } from '../../components/ComponentsProvider/componentsRegistry';
 import { useSetting } from '../../utils/hooks';
 import { THEME_KEY } from '../../utils/constants';
 export function Providers({ store, history, componentsRegistry = defaultComponentsRegistry, children, }) {
-    return (_jsx(Provider, Object.assign({ store: store }, { children: _jsx(Router, Object.assign({ history: history }, { children: _jsx(QueryParamProvider, Object.assign({ adapter: ReactRouter5Adapter }, { children: _jsx(Theme, { children: _jsx(ComponentsProvider, Object.assign({ registry: componentsRegistry }, { children: children })) }) })) })) })));
+    return (_jsx(HelmetProvider, { children: _jsx(Provider, Object.assign({ store: store }, { children: _jsx(Router, Object.assign({ history: history }, { children: _jsx(QueryParamProvider, Object.assign({ adapter: ReactRouter5Adapter }, { children: _jsx(Theme, { children: _jsx(ComponentsProvider, Object.assign({ registry: componentsRegistry }, { children: children })) }) })) })) })) }));
 }
 function Theme({ children }) {
     const [theme] = useSetting(THEME_KEY);

package/dist/containers/App/appSlots.d.ts

@@ -1,4 +1,4 @@
-import type { RedirectProps } from 'react-router';
+import type { RedirectProps, RouteComponentProps } from 'react-router';
 import type Cluster from '../Cluster/Cluster';
 import type { Clusters } from '../Clusters/Clusters';
 import type Node from '../Node/Node';
@@ -8,32 +8,32 @@ import type Tenant from '../Tenant/Tenant';
 export declare const ClustersSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Clusters;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const ClusterSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Cluster;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const TenantSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Tenant;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const NodeSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Node;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const TabletSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Tablet;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const TabletsFiltersSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof TabletsFilters;
-    }) => React.ReactNode);
+    } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const RoutesSlot: import("../../components/slots/types").SlotComponent<{}, never>;
 export declare const RedirectSlot: import("../../components/slots/types").SlotComponent<RedirectProps, never>;