Merge branch 'main' into add-types-constants-922

Author: Raubzeug

.github/workflows/quality.yml

@@ -47,7 +47,7 @@ jobs:
 
       - name: Upload Playwright artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-artifacts
           path: playwright-artifacts
@@ -177,7 +177,7 @@ jobs:
           git --work-tree=gh-pages checkout gh-pages -- .
 
       - name: Download Playwright artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: playwright-artifacts
           path: playwright-artifacts
@@ -219,7 +219,7 @@ jobs:
           fetch-depth: 0
 
       - name: Download Playwright artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: playwright-artifacts
           path: playwright-artifacts

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -3,13 +3,15 @@ import React from 'react';
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import type {PreparedNode} from '../../store/reducers/node/types';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {
     createDeveloperUIInternalPageHref,
     createDeveloperUILinkWithNodeId,
 } from '../../utils/developerUI/developerUI';
+import {useTypedSelector} from '../../utils/hooks';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 
@@ -24,6 +26,8 @@ interface BasicNodeViewerProps {
 }
 
 export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNodeViewerProps) => {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
     let developerUIInternalHref: string | undefined;
 
     if (additionalNodesProps?.getNodeRef) {
@@ -42,7 +46,7 @@ export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNo
                 <React.Fragment>
                     <div className={b('title')}>Node</div>
                     <EntityStatus status={node.SystemState} name={node.Host} />
-                    {developerUIInternalHref && (
+                    {developerUIInternalHref && isUserAllowedToMakeChanges ? (
                         <a
                             rel="noopener noreferrer"
                             className={b('link', {external: true})}
@@ -51,7 +55,7 @@ export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNo
                         >
                             <Icon data={ArrowUpRightFromSquare} />
                         </a>
-                    )}
+                    ) : null}
 
                     <div className={b('id')}>
                         <label className={b('label')}>NodeID</label>

src/components/PDiskPopup/PDiskPopup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
-import {selectNodeHostsMap} from '../../store/reducers/nodesList';
+import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
@@ -17,7 +17,7 @@ const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 
 export const preparePDiskData = (
     data: PreparedPDisk,
-    nodeHost?: string,
+    nodeData?: {Host?: string; DC?: string},
     withDeveloperUILink?: boolean,
 ) => {
     const {
@@ -46,8 +46,11 @@ export const preparePDiskData = (
         pdiskData.push({label: 'Node Id', value: NodeId});
     }
 
-    if (nodeHost) {
-        pdiskData.push({label: 'Host', value: nodeHost});
+    if (nodeData?.Host) {
+        pdiskData.push({label: 'Host', value: nodeData.Host});
+    }
+    if (nodeData?.DC) {
+        pdiskData.push({label: 'DC', value: nodeData.DC});
     }
 
     if (Path) {
@@ -90,11 +93,11 @@ interface PDiskPopupProps {
 
 export const PDiskPopup = ({data}: PDiskPopupProps) => {
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
-    const nodeHostsMap = useTypedSelector(selectNodeHostsMap);
-    const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const nodeData = valueIsDefined(data.NodeId) ? nodesMap?.get(data.NodeId) : undefined;
     const info = React.useMemo(
-        () => preparePDiskData(data, nodeHost, isUserAllowedToMakeChanges),
-        [data, nodeHost, isUserAllowedToMakeChanges],
+        () => preparePDiskData(data, nodeData, isUserAllowedToMakeChanges),
+        [data, nodeData, isUserAllowedToMakeChanges],
     );
 
     return <InfoViewer title="PDisk" info={info} size="s" />;

src/components/VDiskPopup/VDiskPopup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Label} from '@gravity-ui/uikit';
 
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
-import {selectNodeHostsMap} from '../../store/reducers/nodesList';
+import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
@@ -188,14 +188,14 @@ export const VDiskPopup = ({data}: VDiskPopupProps) => {
         [data, isFullData, isUserAllowedToMakeChanges],
     );
 
-    const nodeHostsMap = useTypedSelector(selectNodeHostsMap);
-    const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const nodeData = valueIsDefined(data.NodeId) ? nodesMap?.get(data.NodeId) : undefined;
     const pdiskInfo = React.useMemo(
         () =>
             isFullData &&
             data.PDisk &&
-            preparePDiskData(data.PDisk, nodeHost, isUserAllowedToMakeChanges),
-        [data, nodeHost, isFullData, isUserAllowedToMakeChanges],
+            preparePDiskData(data.PDisk, nodeData, isUserAllowedToMakeChanges),
+        [data, nodeData, isFullData, isUserAllowedToMakeChanges],
     );
 
     const donorsInfo: InfoViewerItem[] = [];

src/containers/Header/Header.tsx

@@ -4,6 +4,7 @@ import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {InternalLink} from '../../components/InternalLink';
 import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {cn} from '../../utils/cn';
 import {DEVELOPER_UI_TITLE} from '../../utils/constants';
@@ -23,6 +24,7 @@ interface HeaderProps {
 
 function Header({mainPage}: HeaderProps) {
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const clusterInfo = useClusterBaseInfo();
 
@@ -78,10 +80,12 @@ function Header({mainPage}: HeaderProps) {
                     }}
                 />
 
-                <LinkWithIcon
-                    title={DEVELOPER_UI_TITLE}
-                    url={createDeveloperUIInternalPageHref()}
-                />
+                {isUserAllowedToMakeChanges ? (
+                    <LinkWithIcon
+                        title={DEVELOPER_UI_TITLE}
+                        url={createDeveloperUIInternalPageHref()}
+                    />
+                ) : null}
             </header>
         );
     };

src/containers/Node/NodeStructure/Pdisk.tsx

@@ -10,6 +10,7 @@ import {PDiskInfo} from '../../../components/PDiskInfo/PDiskInfo';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {StatusIcon} from '../../../components/StatusIcon/StatusIcon';
 import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
+import {selectIsUserAllowedToMakeChanges} from '../../../store/reducers/authentication/authentication';
 import type {
     PreparedStructurePDisk,
     PreparedStructureVDisk,
@@ -22,6 +23,7 @@ import {cn} from '../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../../utils/developerUI/developerUI';
+import {useTypedSelector} from '../../../utils/hooks';
 import i18n from '../i18n';
 
 import {PDiskTitleBadge} from './PDiskTitleBadge';
@@ -56,10 +58,12 @@ function getColumns({
     pDiskId,
     selectedVdiskId,
     nodeId,
+    withDeveloperUILink,
 }: {
     pDiskId: number | undefined;
     selectedVdiskId?: string;
     nodeId?: string | number;
+    withDeveloperUILink?: boolean;
 }) {
     const columns: Column<PreparedStructureVDisk>[] = [
         {
@@ -85,7 +89,7 @@ function getColumns({
                 return (
                     <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
                         <span>{vDiskSlotId}</span>
-                        {vdiskInternalViewerLink && (
+                        {vdiskInternalViewerLink && withDeveloperUILink ? (
                             <Button
                                 size="s"
                                 className={b('external-button', {hidden: true})}
@@ -95,7 +99,7 @@ function getColumns({
                             >
                                 <Icon data={ArrowUpRightFromSquare} />
                             </Button>
-                        )}
+                        ) : null}
                     </div>
                 );
             },
@@ -167,6 +171,8 @@ export function PDisk({
     nodeId,
     unfolded: unfoldedFromProps,
 }: PDiskProps) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
     const [unfolded, setUnfolded] = React.useState(unfoldedFromProps ?? false);
 
     const {TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks} = data;
@@ -186,7 +192,12 @@ export function PDisk({
             <DataTable
                 theme="yandex-cloud"
                 data={vDisks}
-                columns={getColumns({nodeId, pDiskId: PDiskId, selectedVdiskId})}
+                columns={getColumns({
+                    nodeId,
+                    pDiskId: PDiskId,
+                    selectedVdiskId,
+                    withDeveloperUILink: isUserAllowedToMakeChanges,
+                })}
                 settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
                 rowClassName={(row) => {
                     return row.id === selectedVdiskId ? b('selected-vdisk') : '';

src/containers/Storage/Disks/Disks.scss

@@ -10,7 +10,6 @@
         display: flex;
         flex-direction: row;
         justify-content: left;
-        gap: 6px;
 
         width: max-content;
     }
@@ -27,6 +26,15 @@
 
     &__pdisk-item {
         min-width: 80px;
+        margin-right: 4px;
+
+        &_with-dc-margin {
+            margin-right: 12px;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
     }
     &__pdisk-progress-bar {
         --progress-bar-full-height: 20px;

src/containers/Storage/Disks/Disks.tsx

@@ -8,7 +8,7 @@ import {cn} from '../../../utils/cn';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import {PDisk} from '../PDisk';
 import type {StorageViewContext} from '../types';
-import {isVdiskActive} from '../utils';
+import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
 
 import './Disks.scss';
 
@@ -24,6 +24,8 @@ interface DisksProps {
 export function Disks({vDisks = [], viewContext}: DisksProps) {
     const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
 
+    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks);
+
     const {
         theme: {spaceBaseSize},
     } = useLayoutContext();
@@ -51,12 +53,13 @@ export function Disks({vDisks = [], viewContext}: DisksProps) {
             </Flex>
 
             <div className={b('pdisks-wrapper')}>
-                {vDisks?.map((vDisk) => (
+                {vDisks?.map((vDisk, index) => (
                     <PDiskItem
                         key={vDisk?.PDisk?.StringifiedId}
                         vDisk={vDisk}
                         highlightedVDisk={highlightedVDisk}
                         setHighlightedVDisk={setHighlightedVDisk}
+                        withDCMargin={vDisksWithDCMargins.includes(index)}
                     />
                 ))}
             </div>
@@ -70,6 +73,7 @@ interface DisksItemProps {
     highlightedVDisk: string | undefined;
     setHighlightedVDisk: (id: string | undefined) => void;
     unavailableVDiskWidth?: number;
+    withDCMargin?: boolean;
 }
 
 function VDiskItem({
@@ -103,7 +107,7 @@ function VDiskItem({
     );
 }
 
-function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProps) {
+function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk, withDCMargin}: DisksItemProps) {
     const vDiskId = vDisk.StringifiedId;
 
     if (!vDisk.PDisk) {
@@ -112,7 +116,7 @@ function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProp
 
     return (
         <PDisk
-            className={b('pdisk-item')}
+            className={b('pdisk-item', {['with-dc-margin']: withDCMargin})}
             progressBarClassName={b('pdisk-progress-bar')}
             data={vDisk.PDisk}
             showPopup={highlightedVDisk === vDiskId}

src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss

@@ -4,25 +4,6 @@
         overflow: visible; // to enable stacked disks overflow the row
     }
 
-    &__vdisks-wrapper {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-
-        min-width: 500px;
-    }
-    &__vdisks-item {
-        flex-grow: 1;
-
-        max-width: 200px;
-
-        .stack__layer {
-            .data-table__row:hover & {
-                background: var(--ydb-data-table-color-hover);
-            }
-        }
-    }
-
     &__pool-name-wrapper {
         overflow: hidden;
 

src/containers/Storage/StorageGroups/columns/columns.tsx

@@ -8,7 +8,6 @@ import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPo
 import {InternalLink} from '../../../../components/InternalLink';
 import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
-import {VDiskWithDonorsStack} from '../../../../components/VDisk/VDiskWithDonorsStack';
 import {getStorageGroupPath} from '../../../../routes';
 import {valueIsDefined} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
@@ -18,7 +17,8 @@ import {getUsageSeverity} from '../../../../utils/generateEvaluator';
 import {formatToMs} from '../../../../utils/timeParsers';
 import {bytesToGB, bytesToSpeed} from '../../../../utils/utils';
 import {Disks} from '../../Disks/Disks';
-import {getDegradedSeverity, isVdiskActive} from '../../utils';
+import {VDisks} from '../../VDisks/VDisks';
+import {getDegradedSeverity} from '../../utils';
 import i18n from '../i18n';
 
 import {
@@ -230,18 +230,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
     name: STORAGE_GROUPS_COLUMNS_IDS.VDisks,
     header: STORAGE_GROUPS_COLUMNS_TITLES.VDisks,
     className: b('vdisks-column'),
-    render: ({row}) => (
-        <div className={b('vdisks-wrapper')}>
-            {row.VDisks?.map((vDisk) => (
-                <VDiskWithDonorsStack
-                    key={vDisk.StringifiedId}
-                    data={vDisk}
-                    inactive={!isVdiskActive(vDisk, data?.viewContext)}
-                    className={b('vdisks-item')}
-                />
-            ))}
-        </div>
-    ),
+    render: ({row}) => <VDisks vDisks={row.VDisks} viewContext={data?.viewContext} />,
     align: DataTable.CENTER,
     width: 900,
     resizeable: false,