diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss index e8ceb76438..6312fa8682 100644 --- a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss +++ b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss @@ -4,10 +4,12 @@ $block: &; $border-width: 1px; - $outer-border-radius: 4px; + $outer-border-radius: var(--g-border-radius-s); $inner-border-radius: $outer-border-radius - $border-width; + $outer-compact-border-radius: var(--g-border-radius-xs); + $inner-compact-border-radius: $outer-compact-border-radius - $border-width; - --progress-bar-full-height: var(--g-text-body-3-line-height); + --progress-bar-full-height: var(--g-text-subheader-2-line-height); --progress-bar-compact-height: 12px; --stripe-width: 4px; @@ -16,22 +18,31 @@ position: relative; z-index: 0; + overflow: hidden; + min-width: 50px; height: var(--progress-bar-full-height); text-align: center; + opacity: 0.7; color: var(--g-color-text-primary); border: $border-width solid var(--entity-state-border-color); border-radius: $outer-border-radius; background-color: var(--entity-state-background-color); - @include mixins.entity-state-colors(); + + @include mixins.entity-state-colors($block); + + &:hover, + &_highlighted { + opacity: 1; + } &_compact { min-width: 0; height: var(--progress-bar-compact-height); - border-radius: 2px; + border-radius: $outer-compact-border-radius; } &_faded { @@ -78,7 +89,7 @@ } &_compact { - border-radius: 1px; + border-radius: $inner-compact-border-radius; } &_inverted { @@ -93,9 +104,10 @@ position: relative; z-index: 2; - margin-right: var(--g-spacing-1); + margin-right: var(--g-spacing-half); - font-size: var(--g-text-body-1-font-size); + font-family: var(--g-text-caption-font-family); + font-size: var(--g-text-caption-1-font-size); // bar height minus borders line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2}); @@ -106,7 +118,7 @@ position: relative; z-index: 2; - margin-left: var(--g-spacing-1); + margin-left: calc(var(--g-spacing-1) - $border-width); color: var(--entity-state-border-color); } diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx b/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx index ac93c6ab82..c8c73c3827 100644 --- a/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx +++ b/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx @@ -24,6 +24,7 @@ interface DiskStateProgressBarProps { className?: string; isDonor?: boolean; withIcon?: boolean; + highlighted?: boolean; } export function DiskStateProgressBar({ @@ -38,6 +39,7 @@ export function DiskStateProgressBar({ className, isDonor, withIcon, + highlighted, }: DiskStateProgressBarProps) { const [inverted] = useSetting(SETTING_KEYS.INVERTED_DISKS); @@ -48,6 +50,7 @@ export function DiskStateProgressBar({ empty, inactive, striped, + highlighted, }; if (isDonor) { diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx index 76eb71ce2e..0c31ff6a9a 100644 --- a/src/components/VDisk/VDisk.tsx +++ b/src/components/VDisk/VDisk.tsx @@ -41,7 +41,7 @@ export const VDisk = ({ const severity = data.Severity; const isReplicatingColor = severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue; - const isHealthyDonor = data.DonorMode && isReplicatingColor; + const isDonor = data.DonorMode; return ( diff --git a/src/components/VDiskPopup/VDiskPopup.tsx b/src/components/VDiskPopup/VDiskPopup.tsx index 929face6cc..652728d2fa 100644 --- a/src/components/VDiskPopup/VDiskPopup.tsx +++ b/src/components/VDiskPopup/VDiskPopup.tsx @@ -345,21 +345,15 @@ const prepareHeaderLabels = (data: PreparedVDisk): YDBDefinitionListHeaderLabel[ theme: donorConfig.theme, icon: donorConfig.icon, }); - } - - if (isReplicatingColor) { - if (!DonorMode) { - const replicaConfig = VDISK_LABEL_CONFIG.replica; + } else if (isReplicatingColor) { + const replicaConfig = VDISK_LABEL_CONFIG.replica; - labels.push({ - id: 'replication', - value: vDiskPopupKeyset('label_replication'), - theme: replicaConfig.theme, - icon: replicaConfig.icon, - }); - } - - return labels; + labels.push({ + id: 'replication', + value: vDiskPopupKeyset('label_replication'), + theme: replicaConfig.theme, + icon: replicaConfig.icon, + }); } const severity = VDiskState ? getStateSeverity(VDiskState) : NOT_AVAILABLE_SEVERITY; diff --git a/src/components/YDBDefinitionList/YDBDefinitionList.scss b/src/components/YDBDefinitionList/YDBDefinitionList.scss index b54f57ba88..067b9e868e 100644 --- a/src/components/YDBDefinitionList/YDBDefinitionList.scss +++ b/src/components/YDBDefinitionList/YDBDefinitionList.scss @@ -12,10 +12,6 @@ color: var(--g-color-text-secondary); } - &__properties-list { - max-width: calc(100% - 40px); - } - &__footer { margin-top: var(--g-spacing-3); } diff --git a/src/containers/Storage/Disks/Disks.scss b/src/containers/Storage/Disks/Disks.scss index 4bb544e9df..3aee924175 100644 --- a/src/containers/Storage/Disks/Disks.scss +++ b/src/containers/Storage/Disks/Disks.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: row; align-items: center; - gap: 20px; + gap: var(--g-spacing-4); width: max-content; @@ -19,13 +19,13 @@ flex-shrink: 0; } &__vdisk-progress-bar { - --progress-bar-compact-height: 18px; + --progress-bar-compact-height: 20px; - border-radius: 4px; + border-radius: var(--g-border-radius-m); } &__pdisk-item { - min-width: 80px; + min-width: 55px; margin-right: 4px; &_with-dc-margin { @@ -39,6 +39,6 @@ &__pdisk-progress-bar { --progress-bar-full-height: 20px; - text-align: left; + border-radius: var(--g-border-radius-m); } } diff --git a/src/containers/Storage/Disks/Disks.tsx b/src/containers/Storage/Disks/Disks.tsx index 66c2243c07..ce5244b916 100644 --- a/src/containers/Storage/Disks/Disks.tsx +++ b/src/containers/Storage/Disks/Disks.tsx @@ -16,7 +16,7 @@ import './Disks.scss'; const b = cn('ydb-storage-disks'); -const VDISKS_CONTAINER_WIDTH = 300; +const VDISKS_CONTAINER_WIDTH = 316; interface DisksProps { vDisks?: PreparedVDisk[]; diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx index b79e72095a..777925006a 100644 --- a/src/containers/Storage/PDisk/PDisk.tsx +++ b/src/containers/Storage/PDisk/PDisk.tsx @@ -107,6 +107,7 @@ export const PDisk = ({ diskAllocatedPercent={data.AllocatedPercent} severity={data.Severity} className={progressBarClassName} + highlighted={showPopup} /> diff --git a/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx b/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx index 1a4c932c58..79e8bd20a5 100644 --- a/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx +++ b/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx @@ -247,7 +247,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ( /> ), align: DataTable.CENTER, - width: 780, // usually 8-9 vdisks, this width corresponds to 8 vdisks, column is expanded if more + width: 475, // usually 8-9 vdisks, this width corresponds to 8 vdisks, column is expanded if more resizeable: false, sortable: false, }); @@ -267,7 +267,7 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({ ); }, align: DataTable.CENTER, - width: 900, + width: 800, resizeable: false, sortable: false, }); diff --git a/src/containers/Storage/VDisks/VDisks.scss b/src/containers/Storage/VDisks/VDisks.scss index a8927d4afe..325a8952dc 100644 --- a/src/containers/Storage/VDisks/VDisks.scss +++ b/src/containers/Storage/VDisks/VDisks.scss @@ -4,8 +4,8 @@ } &__item { - width: 90px; - margin-right: 6px; + width: 55px; + margin-right: var(--g-spacing-1); &_with-dc-margin { margin-right: 12px; diff --git a/src/containers/Storage/utils/useStorageColumnsSettings.ts b/src/containers/Storage/utils/useStorageColumnsSettings.ts index d166fee074..b3049f2544 100644 --- a/src/containers/Storage/utils/useStorageColumnsSettings.ts +++ b/src/containers/Storage/utils/useStorageColumnsSettings.ts @@ -5,7 +5,7 @@ import type {StorageNodesPaginatedTableData} from '../types'; const PDISK_VDISK_WIDTH = 3; const PDISK_GAP_WIDTH = 2; -const PDISK_MIN_WIDTH = 120; +const PDISK_MIN_WIDTH = 165; const PDISK_MARGIN = 10; const MAX_SLOTS_DEFAULT = 1; const PAGNATED_TABLE_CELL_HORIZONTAL_PADDING = 10; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 2d1f18a825..2837f92b40 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -240,7 +240,7 @@ } } -@mixin entity-state-colors { +@mixin entity-state-colors($block: null) { --entity-state-border-color: var(--g-color-base-misc-heavy); --entity-state-background-color: var(--g-color-base-misc-light); --entity-state-fill-color: var(--g-color-base-misc-medium); @@ -248,24 +248,46 @@ &_green { --entity-state-font-color: var(--g-color-text-positive); - --entity-state-border-color: var(--g-color-base-positive-heavy); + --entity-state-border-color: var(--g-color-base-positive-medium); --entity-state-background-color: var(--g-color-base-positive-light); --entity-state-fill-color: var(--g-color-base-positive-medium); + + &:hover, + &#{$block}_highlighted { + --entity-state-border-color: var(--g-color-base-positive-medium-hover); + --entity-state-background-color: var(--g-color-base-positive-light-hover); + --entity-state-fill-color: var(--g-color-base-positive-heavy); + } } &_blue { --entity-state-font-color: var(--g-color-text-info); --entity-state-border-color: var(--g-color-base-info-heavy); - --entity-state-shadow-color: var(--g-color-base-info-light); + --entity-state-shadow-color: var(--g-color-base-info-medium); --entity-state-background-color: var(--g-color-base-info-light); --entity-state-fill-color: var(--g-color-base-info-medium); + + &:hover, + &#{$block}_highlighted { + --entity-state-border-color: var(--g-color-base-info-heavy-hover); + --entity-state-shadow-color: var(--g-color-base-info-heavy); + --entity-state-background-color: var(--g-color-base-info-light-hover); + --entity-state-fill-color: var(--g-color-base-info-medium-hover); + } } &_yellow { --entity-state-font-color: var(--g-color-text-warning); - --entity-state-border-color: var(--g-color-base-warning-heavy); - --entity-state-background-color: var(--g-color-base-yellow-light); - --entity-state-fill-color: var(--g-color-base-yellow-medium); + --entity-state-border-color: var(--g-color-base-warning-medium); + --entity-state-background-color: var(--g-color-base-warning-light); + --entity-state-fill-color: var(--g-color-base-warning-medium); + + &:hover, + &#{$block}_highlighted { + --entity-state-border-color: var(--g-color-base-warning-medium-hover); + --entity-state-background-color: var(--g-color-base-warning-light-hover); + --entity-state-fill-color: var(--g-color-base-warning-medium-hover); + } } &_red { @@ -273,6 +295,13 @@ --entity-state-border-color: var(--g-color-base-danger-heavy); --entity-state-background-color: var(--g-color-base-danger-light); --entity-state-fill-color: var(--g-color-base-danger-medium); + + &:hover, + &#{$block}_highlighted { + --entity-state-border-color: var(--g-color-base-danger-heavy-hover); + --entity-state-background-color: var(--g-color-base-danger-light); + --entity-state-fill-color: var(--g-color-base-danger-medium-hover); + } } &_darkgrey { @@ -281,10 +310,23 @@ --entity-state-shadow-color: var(--g-color-base-neutral-light); --entity-state-fill-color: var(--g-color-base-neutral-light); --entity-state-background-color: transparent; + + &:hover, + &#{$block}_highlighted { + --entity-state-border-color: var(--g-color-base-neutral-heavy-hover); + --entity-state-shadow-color: var(--g-color-base-neutral-light-hover); + --entity-state-fill-color: var(--g-color-base-neutral-light-hover); + --entity-state-background-color: transparent; + } } &__grey { --entity-state-font-color: var(--g-color-text-secondary); - --entity-state-border-color: var(--g-color-line-generic-hover); + --entity-state-background-color: var(--g-color-base-neutral-light-hover); + + &:hover, + &#{$block}_highlighted { + --entity-state-background-color: var(--g-color-base-neutral-medium); + } } } diff --git a/src/utils/disks/helpers.ts b/src/utils/disks/helpers.ts index d38e4c7f57..4e8c57cecb 100644 --- a/src/utils/disks/helpers.ts +++ b/src/utils/disks/helpers.ts @@ -66,10 +66,9 @@ export function getVDiskStatusIcon(severity?: number, isDonor?: boolean): IconDa } const isError = severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Red; - const isReplicating = severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue; // Display icon only for error and donor - if (isReplicating && isDonor) { + if (isDonor) { return DONOR_ICON; }