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 = {