ydb-embedded-ui 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [4.2.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.2.0...v4.2.1) (2023-05-18)
+
+
+### Bug Fixes
+
+* export toaster ([b5d12c0](https://github.com/ydb-platform/ydb-embedded-ui/commit/b5d12c0aa39ea3877a9b74071e3124f89a309ca3))
+
+## [4.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.1.0...v4.2.0) (2023-05-16)
+
+
+### Features
+
+* **Tablet:** display node fqdn in table ([4d8099a](https://github.com/ydb-platform/ydb-embedded-ui/commit/4d8099a454f34fc76886b26ca948895171c57ab8))
+
+
+### Bug Fixes
+
+* **api:** change nulls to empty objects ([0ab14e8](https://github.com/ydb-platform/ydb-embedded-ui/commit/0ab14e883a47aeac2f2bab437f2214a32ccb1c9b))
+* display storage pool in VDisks popups ([5b5dd8a](https://github.com/ydb-platform/ydb-embedded-ui/commit/5b5dd8a4e6cb4bcc1ead78a7c06d2e80a81424cc))
+* fix Select label and values align ([f796730](https://github.com/ydb-platform/ydb-embedded-ui/commit/f7967309fe4a042e7637de212f33b1ebfc6877fc))
+* **Overview:** partitioning by size disabled for 0 SizeToSpit ([1028e7d](https://github.com/ydb-platform/ydb-embedded-ui/commit/1028e7d8d3566f5f5e6b2ebe04112ef135d7b55e))
+* **Schema:** display NotNull columns ([d61eaa4](https://github.com/ydb-platform/ydb-embedded-ui/commit/d61eaa4ccff357c1e9ca6efde855ec46be24a314))
+
 ## [4.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.0.0...v4.1.0) (2023-05-10)
 
 

package/dist/components/LabelWithPopover/LabelWithPopover.tsx

@@ -3,14 +3,20 @@ import type {ReactNode} from 'react';
 import {HelpPopover} from '@gravity-ui/uikit';
 
 interface LabelWithPopoverProps {
-    text: string;
+    text: ReactNode;
     popoverContent: ReactNode;
     className?: string;
+    contentClassName?: string;
 }
 
-export const LabelWithPopover = ({text, popoverContent, className}: LabelWithPopoverProps) => (
+export const LabelWithPopover = ({
+    text,
+    popoverContent,
+    className,
+    contentClassName,
+}: LabelWithPopoverProps) => (
     <div className={className}>
-        {text}
-        <HelpPopover content={popoverContent} />
+        {text + '\u00a0'}
+        <HelpPopover content={popoverContent} contentClassName={contentClassName} />
     </div>
 );

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -24,7 +24,7 @@
             background-color: var(--yc-color-base-positive);
         }
         &_state_yellow {
-            color: var(--yc-color-text-warning-medium);
+            color: var(--yc-color-text-warning);
             background-color: var(--yc-color-base-warning);
         }
         &_state_blue {

package/dist/containers/App/App.scss

@@ -34,10 +34,6 @@ body,
     --ydb-data-table-color-hover: var(--yc-color-base-float-hover);
 }
 
-.yc-select__label {
-    font-weight: 600;
-}
-
 :is(#tab, .yc-tabs-item_active .yc-tabs-item__title) {
     color: var(--yc-color-text-primary) !important;
 }
@@ -110,10 +106,17 @@ body,
         align-items: center;
     }
 
+    // Should be removed after https://github.com/ydb-platform/ydb-embedded-ui/issues/344
     .yc-button__text {
         display: flex;
         align-items: center;
     }
+
+    .g-select {
+        .yc-button__text {
+            align-items: baseline;
+        }
+    }
 }
 
 .error {

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -256,18 +256,14 @@ function StorageGroups({
             name: TableColumnsIds.VDisks,
             className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({value, row}) => (
+            render: ({value}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as TVDiskStateInfo[], (el) => {
                         const donors = el.Donors;
 
                         return donors && donors.length > 0 ? (
                             <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk
-                                    data={el}
-                                    poolName={row[TableColumnsIds.PoolName]}
-                                    nodes={nodes}
-                                />
+                                <VDisk data={el} nodes={nodes} />
                                 {donors.map((donor) => {
                                     const isFullData = isFullVDiskData(donor);
 
@@ -275,7 +271,6 @@ function StorageGroups({
                                         <VDisk
                                             data={isFullData ? donor : {...donor, DonorMode: true}}
                                             // donor and acceptor are always in the same group
-                                            poolName={row[TableColumnsIds.PoolName]}
                                             nodes={nodes}
                                             key={stringifyVdiskId(
                                                 isFullData ? donor.VDiskId : donor,
@@ -286,11 +281,7 @@ function StorageGroups({
                             </Stack>
                         ) : (
                             <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk
-                                    data={el}
-                                    poolName={row[TableColumnsIds.PoolName]}
-                                    nodes={nodes}
-                                />
+                                <VDisk data={el} nodes={nodes} />
                             </div>
                         );
                     })}

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -16,7 +16,7 @@ import {STRUCTURE} from '../../Node/NodePages';
 import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
 import {VDiskPopup} from '../VDiskPopup';
 
-import type {IUnavailableDonor} from '../utils/types';
+import type {UnavailableDonor} from '../utils/types';
 import {NOT_AVAILABLE_SEVERITY} from '../utils';
 
 import './VDisk.scss';
@@ -49,13 +49,12 @@ const getColorSeverity = (color?: EFlag) => {
 };
 
 interface VDiskProps {
-    data?: TVDiskStateInfo | IUnavailableDonor;
-    poolName?: string;
+    data?: TVDiskStateInfo | UnavailableDonor;
     nodes?: NodesMap;
     compact?: boolean;
 }
 
-export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
+export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
     const isFullData = isFullVDiskData(data);
 
     const [severity, setSeverity] = useState(
@@ -125,13 +124,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
 
     return (
         <React.Fragment>
-            <VDiskPopup
-                data={data}
-                poolName={poolName}
-                nodes={nodes}
-                anchorRef={anchor}
-                open={isPopupVisible}
-            />
+            <VDiskPopup data={data} nodes={nodes} anchorRef={anchor} open={isPopupVisible} />
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
                 {data.NodeId && isFullData ? (
                     <InternalLink

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -13,7 +13,7 @@ import {stringifyVdiskId} from '../../../utils';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {isFullVDiskData} from '../../../utils/storage';
 
-import type {IUnavailableDonor} from '../utils/types';
+import type {UnavailableDonor} from '../utils/types';
 
 import {preparePDiskData} from '../PDiskPopup';
 
@@ -21,13 +21,13 @@ import './VDiskPopup.scss';
 
 const b = cn('vdisk-storage-popup');
 
-const prepareUnavailableVDiskData = (data: IUnavailableDonor, poolName?: string) => {
-    const {NodeId, PDiskId, VSlotId} = data;
+const prepareUnavailableVDiskData = (data: UnavailableDonor) => {
+    const {NodeId, PDiskId, VSlotId, StoragePoolName} = data;
 
     const vdiskData: InfoViewerItem[] = [{label: 'State', value: 'not available'}];
 
-    if (poolName) {
-        vdiskData.push({label: 'StoragePool', value: poolName});
+    if (StoragePoolName) {
+        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
     }
 
     vdiskData.push(
@@ -39,7 +39,7 @@ const prepareUnavailableVDiskData = (data: IUnavailableDonor, poolName?: string)
     return vdiskData;
 };
 
-const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
+const prepareVDiskData = (data: TVDiskStateInfo) => {
     const {
         VDiskId,
         VDiskState,
@@ -51,6 +51,7 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
         AllocatedSize,
         ReadThroughput,
         WriteThroughput,
+        StoragePoolName,
     } = data;
 
     const vdiskData: InfoViewerItem[] = [
@@ -58,8 +59,8 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
         {label: 'State', value: VDiskState ?? 'not available'},
     ];
 
-    if (poolName) {
-        vdiskData.push({label: 'StoragePool', value: poolName});
+    if (StoragePoolName) {
+        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
     }
 
     if (SatisfactionRank && SatisfactionRank.FreshRank?.Flag !== EFlag.Green) {
@@ -128,20 +129,16 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 };
 
 interface VDiskPopupProps extends PopupProps {
-    data: TVDiskStateInfo | IUnavailableDonor;
-    poolName?: string;
+    data: TVDiskStateInfo | UnavailableDonor;
     nodes?: NodesMap;
 }
 
-export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {
+export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
 
     const vdiskInfo = useMemo(
-        () =>
-            isFullData
-                ? prepareVDiskData(data, poolName)
-                : prepareUnavailableVDiskData(data, poolName),
-        [data, poolName, isFullData],
+        () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
+        [data, isFullData],
     );
     const pdiskInfo = useMemo(
         () => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),

package/dist/containers/Storage/utils/types.ts

@@ -1,5 +1,6 @@
 import {TVSlotId} from '../../../types/api/vdisk';
 
-export interface IUnavailableDonor extends TVSlotId {
+export interface UnavailableDonor extends TVSlotId {
     DonorMode?: boolean;
+    StoragePoolName?: string;
 }

package/dist/containers/Tablet/Tablet.scss

@@ -89,4 +89,8 @@
         line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
+
+    &__host {
+        width: 300px;
+    }
 }

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -1,7 +1,13 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {InternalLink} from '../../../components/InternalLink/InternalLink';
+
 import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
 import {calcUptime} from '../../../utils';
+import {getDefaultNodePath} from '../../Node/NodePages';
+
+import {b} from '../Tablet';
 
 const columns: Column<ITabletPreparedHistoryItem>[] = [
     {
@@ -9,12 +15,6 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
         align: DataTable.RIGHT,
         render: ({row}) => row.generation,
     },
-    {
-        name: 'Node ID',
-        align: DataTable.RIGHT,
-        sortable: false,
-        render: ({row}) => row.nodeId,
-    },
     {
         name: 'Change time',
         align: DataTable.RIGHT,
@@ -33,6 +33,28 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
             return row.leader ? 'leader' : row.followerId;
         },
     },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => {
+            return <InternalLink to={getDefaultNodePath(row.nodeId)}>{row.nodeId}</InternalLink>;
+        },
+    },
+    {
+        name: 'Node FQDN',
+        sortable: false,
+        render: ({row}) => {
+            if (!row.fqdn) {
+                return <span>—</span>;
+            }
+            return (
+                <div className={b('host')}>
+                    <EntityStatus name={row.fqdn} showStatus={false} hasClipboardButton />
+                </div>
+            );
+        },
+    },
 ];
 
 const TABLE_SETTINGS = {

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

@@ -80,7 +80,7 @@
         }
         &_degraded,
         &_yellow {
-            color: var(--yc-color-text-warning-medium);
+            color: var(--yc-color-text-warning);
             background-color: var(--yc-color-base-warning);
         }
 

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -86,9 +86,10 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
 
     const generalTableInfo: InfoViewerItem[] = [];
 
-    const partitioningBySize = PartitioningPolicy.SizeToSplit
-        ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
-        : 'Disabled';
+    const partitioningBySize =
+        PartitioningPolicy.SizeToSplit && Number(PartitioningPolicy.SizeToSplit) > 0
+            ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
+            : 'Disabled';
 
     const partitioningByLoad = PartitioningPolicy.SplitByLoadSettings?.Enabled
         ? 'Enabled'

package/dist/containers/Tenant/QueryEditor/Issues/Issues.scss

@@ -106,7 +106,7 @@
     }
 
     &_severity_warning &__icon {
-        color: var(--yc-color-text-warning-medium);
+        color: var(--yc-color-text-warning);
     }
 
     &_severity_info &__icon {

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/OldQueryEditorControls.tsx

@@ -48,7 +48,7 @@ export const OldQueryEditorControls = ({
                     </Button>
                     <DropdownMenu
                         items={runModeSelectorMenuItems}
-                        popupClassName={b('select-query-action-popup')}
+                        popupProps={{className: b('select-query-action-popup')}}
                         switcher={
                             <Button
                                 view="action"

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/QueryEditorControls.tsx

@@ -61,7 +61,7 @@ export const QueryEditorControls = ({
                 </Button>
                 <DropdownMenu
                     items={querySelectorMenuItems}
-                    popupClassName={b('mode-selector__popup')}
+                    popupProps={{className: b('mode-selector__popup')}}
                     switcher={
                         <Button className={b('mode-selector__button')}>
                             <span className={b('mode-selector__button-content')}>

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -16,6 +16,7 @@ const SchemaViewerColumns = {
     name: 'Name',
     key: 'Key',
     type: 'Type',
+    notNull: 'NotNull',
 };
 
 class SchemaViewer extends React.Component {
@@ -59,6 +60,17 @@ class SchemaViewer extends React.Component {
                 name: SchemaViewerColumns.type,
                 width: 100,
             },
+            {
+                name: SchemaViewerColumns.notNull,
+                width: 100,
+                render: ({row}) => {
+                    if (row.NotNull) {
+                        return '\u2713';
+                    }
+
+                    return undefined;
+                },
+            },
         ];
 
         const tableData = [...keyColumns, ...restColumns];

package/dist/containers/UserSettings/UserSettings.tsx

@@ -2,12 +2,14 @@ import {ReactNode} from 'react';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {RadioButton, Switch, HelpPopover} from '@gravity-ui/uikit';
+import {RadioButton, Switch} from '@gravity-ui/uikit';
 import {Settings} from '@gravity-ui/navigation';
 
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
+import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
+
 import {
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
     INVERTED_DISKS_KEY,
@@ -46,27 +48,27 @@ function UserSettings(props: any) {
 
     const renderBreakNodesSettingsItem = (title: ReactNode) => {
         return (
-            <div className={b('item-with-popup')}>
-                {title}
-                <HelpPopover
-                    content="Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions"
-                    contentClassName={b('popup')}
-                    hasArrow={true}
-                />
-            </div>
+            <LabelWithPopover
+                className={b('item-with-popup')}
+                contentClassName={b('popup')}
+                text={title}
+                popoverContent={
+                    'Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions'
+                }
+            />
         );
     };
 
     const renderEnableExplainQueryModesItem = (title: ReactNode) => {
         return (
-            <div className={b('item-with-popup')}>
-                {title}
-                <HelpPopover
-                    content="Enable script | scan query mode selector for both run and explain. May not work on some versions"
-                    contentClassName={b('popup')}
-                    hasArrow={true}
-                />
-            </div>
+            <LabelWithPopover
+                className={b('item-with-popup')}
+                contentClassName={b('popup')}
+                text={title}
+                popoverContent={
+                    'Enable script | scan query mode selector for both run and explain. May not work on some versions'
+                }
+            />
         );
     };
 

package/dist/services/api.ts

@@ -287,7 +287,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 stats,
                 timeout: 600000,
             },
-            null,
+            {},
             {
                 concurrentId,
                 timeout: 9 * 60 * 1000,
@@ -307,7 +307,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 action: action || 'explain',
                 timeout: 600000,
             },
-            null,
+            {},
         );
     }
     getExplainQueryAst(query: string, database: string) {
@@ -319,7 +319,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 action: 'explain-ast',
                 timeout: 600000,
             },
-            null,
+            {},
         );
     }
     getHotKeys(path: string, enableSampling: boolean) {
@@ -334,18 +334,18 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     killTablet(id?: string) {
-        return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), null);
+        return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), {});
     }
     stopTablet(id?: string, hiveId?: string) {
         return this.get<string>(
             this.getPath(`/tablets/app?TabletID=${hiveId}&page=StopTablet&tablet=${id}`),
-            null,
+            {},
         );
     }
     resumeTablet(id?: string, hiveId?: string) {
         return this.get<string>(
             this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
-            null,
+            {},
         );
     }
     getTabletDescribe(tenantId: TDomainKey) {
@@ -368,14 +368,14 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 user,
                 password,
             },
-            null,
+            {},
         );
     }
     logout() {
-        return this.post(this.getPath('/logout'), null, null);
+        return this.post(this.getPath('/logout'), {}, {});
     }
     whoami() {
-        return this.get<TUserToken>(this.getPath('/viewer/json/whoami'), null);
+        return this.get<TUserToken>(this.getPath('/viewer/json/whoami'), {});
     }
 }
 

package/dist/store/reducers/node.js

@@ -116,7 +116,11 @@ export const selectNodeStructure = createSelector(
                     if (!structure[String(pDiskId)]) {
                         structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
                     }
-                    structure[String(pDiskId)].vDisks[vDiskId] = vd;
+                    structure[String(pDiskId)].vDisks[vDiskId] = {
+                        ...vd,
+                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+                        StoragePoolName: pool.Name,
+                    };
                 });
             });
         });

package/dist/store/reducers/nodesList.ts

@@ -4,10 +4,10 @@ import type {
     NodesListState,
     NodesListAction,
     NodesListRootStateSlice,
-    NodesMap,
 } from '../../types/store/nodesList';
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {prepareNodesMap} from '../../utils/nodes';
 
 export const FETCH_NODES_LIST = createRequestActionTypes('nodesList', 'FETCH_NODES_LIST');
 
@@ -50,11 +50,6 @@ export function getNodesList() {
 }
 
 export const selectNodesMap = (state: NodesListRootStateSlice) =>
-    state.nodesList.data?.reduce<NodesMap>((nodesMap, node) => {
-        if (node.Id && node.Host) {
-            nodesMap.set(node.Id, node.Host);
-        }
-        return nodesMap;
-    }, new Map());
+    prepareNodesMap(state.nodesList.data);
 
 export default nodesList;

package/dist/store/reducers/storage.js

@@ -271,10 +271,22 @@ export const getFlatListStorageGroups = createSelector([getStoragePools], (stora
                             ? currentType
                             : 'Mixed';
                     }, '');
+
+                    // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+                    const vDisks = group.VDisks?.map((vdisk) => ({
+                        ...vdisk,
+                        StoragePoolName: pool.Name,
+                        Donors: vdisk.Donors?.map((donor) => ({
+                            ...donor,
+                            StoragePoolName: pool.Name,
+                        })),
+                    }));
+
                     return [
                         ...acc,
                         {
                             ...group,
+                            VDisks: vDisks,
                             Read: readSpeedBytesPerSec,
                             Write: writeSpeedBytesPerSec,
                             PoolName: pool.Name,

package/dist/store/reducers/tablet.ts

@@ -11,6 +11,7 @@ import type {
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {prepareNodesMap} from '../../utils/nodes';
 
 export const FETCH_TABLET = createRequestActionTypes('TABLET', 'FETCH_TABLET');
 export const FETCH_TABLET_DESCRIBE = createRequestActionTypes('TABLET', 'FETCH_TABLET_DESCRIBE');
@@ -63,9 +64,19 @@ const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, acti
 
 export const getTablet = (id: string) => {
     return createApiRequest({
-        request: Promise.all([window.api.getTablet({id}), window.api.getTabletHistory({id})]),
+        request: Promise.all([
+            window.api.getTablet({id}),
+            window.api.getTabletHistory({id}),
+            window.api.getNodesList(),
+        ]),
         actions: FETCH_TABLET,
-        dataHandler: ([tabletResponseData, historyResponseData]): ITabletHandledResponse => {
+        dataHandler: ([
+            tabletResponseData,
+            historyResponseData,
+            nodesList,
+        ]): ITabletHandledResponse => {
+            const nodesMap = prepareNodesMap(nodesList);
+
             const historyData = Object.keys(historyResponseData).reduce<
                 ITabletPreparedHistoryItem[]
             >((list, nodeId) => {
@@ -75,6 +86,8 @@ export const getTablet = (id: string) => {
 
                     const {ChangeTime, Generation, State, Leader, FollowerId} = leaderTablet;
 
+                    const fqdn = nodesMap && nodeId ? nodesMap.get(Number(nodeId)) : undefined;
+
                     list.push({
                         nodeId,
                         generation: Generation,
@@ -82,6 +95,7 @@ export const getTablet = (id: string) => {
                         state: State,
                         leader: Leader,
                         followerId: FollowerId,
+                        fqdn,
                     });
                 }
                 return list;

package/dist/types/store/tablet.ts

@@ -11,6 +11,7 @@ export interface ITabletPreparedHistoryItem {
     state: ETabletState | undefined;
     leader: boolean | undefined;
     followerId: number | undefined;
+    fqdn: string | undefined;
 }
 
 export interface ITabletState {

package/dist/utils/createToast.tsx

@@ -1,6 +1,6 @@
 import {Toaster} from '@gravity-ui/uikit';
 
-const toaster = new Toaster();
+export const toaster = new Toaster();
 
 interface CreateToastProps {
     name?: string;
@@ -10,13 +10,13 @@ interface CreateToastProps {
 }
 
 function createToast({name, title, type, content}: CreateToastProps) {
-    return toaster.createToast({
+    return toaster.add({
         name: name ?? 'Request succeeded',
         title: title ?? 'Request succeeded',
         type: type ?? 'success',
         content: content,
         isClosable: true,
-        allowAutoHiding: type === 'success',
+        autoHiding: type === 'success' ? 5000 : false,
     });
 }
 

package/dist/utils/nodes.ts

@@ -1,5 +1,7 @@
 import type {TSystemStateInfo} from '../types/api/nodes';
+import type {TNodeInfo} from '../types/api/nodesList';
 import type {INodesPreparedEntity} from '../types/store/nodes';
+import type {NodesMap} from '../types/store/nodesList';
 import {EFlag} from '../types/api/enums';
 
 export enum NodesUptimeFilterValues {
@@ -20,3 +22,12 @@ export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;
 export interface AdditionalNodesInfo extends Record<string, unknown> {
     getNodeRef?: (node?: NodeAddress) => string;
 }
+
+export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
+    return nodesList?.reduce<NodesMap>((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(Number(node.Id), node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "files": [
     "dist"
   ],
@@ -12,7 +12,7 @@
     "@gravity-ui/axios-wrapper": "^1.3.0",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/navigation": "^0.3.1",
+    "@gravity-ui/navigation": "^0.4.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
     "axios": "0.19.2",
@@ -39,7 +39,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.0.3"
+    "ydb-ui-components": "^3.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -105,7 +105,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^3.20.2",
+    "@gravity-ui/uikit": "^4.11.1",
     "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",