diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index b0f864aabf..d1cfc99b0a 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -16,6 +16,7 @@
margin-right: var(--g-spacing-2);
}
+ &__info-icon,
&__clipboard-button {
color: var(--g-color-text-secondary);
@@ -26,14 +27,30 @@
}
}
+ &__info-icon {
+ &:hover {
+ color: var(--g-color-text-primary);
+ }
+ }
+
&__wrapper {
position: relative;
overflow: hidden;
- &_with-button {
+ &_with-clipboard-button {
+ padding-right: var(--button-width);
+ }
+
+ &_with-info-button {
padding-right: var(--button-width);
}
+
+ &_with-clipboard-button {
+ &.entity-status__wrapper_with-info-button {
+ padding-right: calc(2 * var(--button-width));
+ }
+ }
}
&__controls-wrapper {
@@ -51,6 +68,8 @@
&_visible {
width: min-content;
padding: var(--g-spacing-1);
+
+ background-color: var(--g-color-base-background);
}
.data-table__row:hover &,
@@ -79,13 +98,27 @@
display: inline-block;
overflow: hidden;
- width: calc(100% + var(--button-width));
+ width: 100%;
margin-top: 5px;
white-space: nowrap;
text-overflow: ellipsis;
}
+ &__wrapper_with-clipboard-button &__link {
+ width: calc(100% + var(--button-width));
+ }
+
+ &__wrapper_with-info-button &__link {
+ width: calc(100% + var(--button-width));
+ }
+
+ &__wrapper_with-clipboard-button {
+ &.entity-status__wrapper_with-info-button .entity-status__link {
+ width: calc(100% + 2 * var(--button-width));
+ }
+ }
+
&__link_with-left-trim {
text-align: end;
direction: rtl;
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index bfe32e6969..b4ac4b71c1 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -1,4 +1,7 @@
-import {ClipboardButton, Link as UIKitLink} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {CircleInfo} from '@gravity-ui/icons';
+import {Button, ClipboardButton, Icon, Popover, Link as UIKitLink} from '@gravity-ui/uikit';
import {EFlag} from '../../types/api/enums';
import {cn} from '../../utils/cn';
@@ -25,6 +28,7 @@ interface EntityStatusProps {
withLeftTrim?: boolean;
hasClipboardButton?: boolean;
+ infoPopoverContent?: React.ReactNode;
clipboardButtonAlwaysVisible?: boolean;
className?: string;
@@ -45,10 +49,13 @@ export function EntityStatus({
withLeftTrim = false,
hasClipboardButton,
+ infoPopoverContent,
clipboardButtonAlwaysVisible = false,
className,
}: EntityStatusProps) {
+ const [infoIconHovered, setInfoIconHovered] = React.useState(false);
+
const renderIcon = () => {
if (!showStatus) {
return null;
@@ -90,24 +97,51 @@ export function EntityStatus({
)}
{(path || name) && (
-
+
{renderLink()}
- {hasClipboardButton && (
+ {(hasClipboardButton || infoPopoverContent) && (
-
+ {infoPopoverContent && (
+
setInfoIconHovered(visible)}
+ >
+
+
+ )}
+ {hasClipboardButton && (
+
+ )}
)}
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
index 6ddf3ca374..df50320cb1 100644
--- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx
+++ b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -1,5 +1,3 @@
-import {PopoverBehavior} from '@gravity-ui/uikit';
-
import {getDefaultNodePath} from '../../containers/Node/NodePages';
import type {GetNodeRefFunc, NodeAddress} from '../../types/additionalProps';
import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
@@ -8,7 +6,6 @@ import {
createDeveloperUILinkWithNodeId,
} from '../../utils/developerUI/developerUI';
import {isUnavailableNode} from '../../utils/nodes';
-import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
import {EntityStatus} from '../EntityStatus/EntityStatus';
import {NodeEndpointsTooltipContent} from '../TooltipsContent';
@@ -64,14 +61,16 @@ export const NodeHostWrapper = ({
: undefined;
return (
-
}
- placement={['top', 'bottom']}
- behavior={PopoverBehavior.Immediate}
- delayClosing={200}
- >
-
-
+
+ ) : null
+ }
+ />
);
};
diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
index 65f1799c9f..5f51743346 100644
--- a/src/components/TenantNameWrapper/TenantNameWrapper.tsx
+++ b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
@@ -1,10 +1,9 @@
-import {DefinitionList, Flex, PopoverBehavior} from '@gravity-ui/uikit';
+import {DefinitionList, Flex} from '@gravity-ui/uikit';
import {getTenantPath} from '../../containers/Tenant/TenantPages';
import type {PreparedTenant} from '../../store/reducers/tenants/types';
import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalProps';
import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
-import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
import {EntityStatus} from '../EntityStatus/EntityStatus';
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
@@ -41,43 +40,37 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
const monitoringLink = additionalTenantsProps?.getMonitoringLink?.(tenant.Name, tenant.Type);
const logsLink = additionalTenantsProps?.getLogsLink?.(tenant.Name);
+ const infoPopoverContent =
+ (monitoringLink || logsLink) && isUserAllowedToMakeChanges ? (
+
+
+
+ {monitoringLink && (
+
+ )}
+ {logsLink && (
+
+ )}
+
+
+
+ ) : null;
+
return (
-
-
-
- {monitoringLink && (
-
- )}
- {logsLink && (
-
- )}
-
-
-
- ) : null
- }
- placement={['top', 'bottom']}
- behavior={PopoverBehavior.Immediate}
- >
-
-
+
);
}
diff --git a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
index 413cc84d45..63b377730a 100644
--- a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
+++ b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
.ydb-storage-groups-columns {
&__vdisks-column,
&__disks-column {
@@ -17,6 +19,8 @@
}
&__group-id {
+ margin-right: var(--g-spacing-1);
+
font-weight: 500;
}
}
diff --git a/src/containers/Storage/StorageGroups/columns/columns.tsx b/src/containers/Storage/StorageGroups/columns/columns.tsx
index 68b3a57e22..07fccf54b7 100644
--- a/src/containers/Storage/StorageGroups/columns/columns.tsx
+++ b/src/containers/Storage/StorageGroups/columns/columns.tsx
@@ -3,7 +3,7 @@ import DataTable from '@gravity-ui/react-data-table';
import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
-import {InternalLink} from '../../../../components/InternalLink';
+import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
import {getStorageGroupPath} from '../../../../routes';
@@ -144,18 +144,21 @@ const diskSpaceUsageColumn: StorageGroupsColumn = {
const groupIdColumn: StorageGroupsColumn = {
name: STORAGE_GROUPS_COLUMNS_IDS.GroupId,
header: STORAGE_GROUPS_COLUMNS_TITLES.GroupId,
- width: 130,
+ width: 140,
render: ({row}) => {
return row.GroupId ? (
-
- {row.GroupId}
-
+
) : (
'-'
);
},
sortAccessor: (row) => Number(row.GroupId),
- align: DataTable.RIGHT,
+ align: DataTable.LEFT,
};
const usedColumn: StorageGroupsColumn = {