Merge branch 'main' into astandrik.remove-video

ydb-platform · Dec 20, 2024 · 4e30f90 · 4e30f90
2 parents 5e5e650 + 4773ce8
commit 4e30f90
Show file tree

Hide file tree

Showing 28 changed files with 428 additions and 62 deletions.
diff --git a/src/components/CellWithPopover/CellWithPopover.scss b/src/components/CellWithPopover/CellWithPopover.scss
@@ -1,8 +1,12 @@
 .ydb-cell-with-popover {
-    display: flex;
+    display: inline-flex;
 
     max-width: 100%;
 
+    &_full-width {
+        display: flex;
+    }
+
     &__popover {
         display: inline-block;
         overflow: hidden;

diff --git a/src/components/CellWithPopover/CellWithPopover.tsx b/src/components/CellWithPopover/CellWithPopover.tsx
@@ -22,7 +22,7 @@ export function CellWithPopover({
     ...props
 }: CellWithPopoverProps) {
     return (
-        <div className={b({fullWidth}, wrapperClassName)}>
+        <div className={b({'full-width': fullWidth}, wrapperClassName)}>
             <Popover
                 delayClosing={DELAY_TIMEOUT}
                 delayOpening={DELAY_TIMEOUT}

diff --git a/src/components/FullNodeViewer/FullNodeViewer.tsx b/src/components/FullNodeViewer/FullNodeViewer.tsx
@@ -5,6 +5,7 @@ import {InfoViewer} from '../InfoViewer/InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {NodeUptime} from '../UptimeViewer/UptimeViewer';
 
 import './FullNodeViewer.scss';
 
@@ -30,7 +31,10 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
 
     commonInfo.push(
         {label: 'Version', value: node?.Version},
-        {label: 'Uptime', value: node?.Uptime},
+        {
+            label: 'Uptime',
+            value: <NodeUptime StartTime={node?.StartTime} DisconnectTime={node?.DisconnectTime} />,
+        },
         {label: 'DC', value: node?.DataCenterDescription || node?.DC},
         {label: 'Rack', value: node?.Rack},
     );

diff --git a/src/components/Stack/Stack.scss b/src/components/Stack/Stack.scss
@@ -3,7 +3,7 @@
     --ydb-stack-offset-x: 4px;
     --ydb-stack-offset-y: 4px;
     --ydb-stack-offset-x-hover: 4px;
-    --ydb-stack-offset-y-hover: 8px;
+    --ydb-stack-offset-y-hover: 6px;
 
     position: relative;
 

diff --git a/src/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx b/src/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx
@@ -1,10 +1,12 @@
 import type {TTabletStateInfo} from '../../../types/api/tablet';
-import {getUptimeFromDateFormatted} from '../../../utils/dataFormatters/dataFormatters';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+import {TabletUptime} from '../../UptimeViewer/UptimeViewer';
 
 const formatTablet = createInfoFormatter<TTabletStateInfo>({
     values: {
-        ChangeTime: (value) => getUptimeFromDateFormatted(value),
+        ChangeTime: (value) => {
+            return <TabletUptime ChangeTime={value} />;
+        },
     },
     labels: {
         TabletId: 'Tablet',

diff --git a/src/components/UptimeViewer/UptimeViewer.tsx b/src/components/UptimeViewer/UptimeViewer.tsx
@@ -0,0 +1,81 @@
+import {DefinitionList} from '@gravity-ui/uikit';
+
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {
+    formatDateTime,
+    getDowntimeFromDateFormatted,
+    getUptimeFromDateFormatted,
+} from '../../utils/dataFormatters/dataFormatters';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+
+import i18n from './i18n';
+
+interface NodeUptimeProps {
+    StartTime?: string;
+    DisconnectTime?: string;
+}
+
+export function NodeUptime({StartTime, DisconnectTime}: NodeUptimeProps) {
+    let uptime: string | undefined;
+
+    if (DisconnectTime) {
+        uptime = getDowntimeFromDateFormatted(DisconnectTime);
+    } else if (StartTime) {
+        uptime = getUptimeFromDateFormatted(StartTime);
+    }
+
+    if (!uptime) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return (
+        <CellWithPopover
+            placement={['top', 'auto']}
+            content={
+                <DefinitionList responsive>
+                    {StartTime ? (
+                        <DefinitionList.Item key={'StartTime'} name={i18n('start-time')}>
+                            {formatDateTime(StartTime, {withTimeZone: true})}
+                        </DefinitionList.Item>
+                    ) : null}
+                    {DisconnectTime ? (
+                        <DefinitionList.Item key={'DisconnectTime'} name={i18n('disconnect-time')}>
+                            {formatDateTime(DisconnectTime, {withTimeZone: true})}
+                        </DefinitionList.Item>
+                    ) : null}
+                </DefinitionList>
+            }
+        >
+            {uptime}
+        </CellWithPopover>
+    );
+}
+
+interface TabletUptimeProps {
+    ChangeTime?: string;
+}
+
+export function TabletUptime({ChangeTime}: TabletUptimeProps) {
+    let uptime: string | undefined;
+
+    if (ChangeTime) {
+        uptime = getUptimeFromDateFormatted(ChangeTime);
+    }
+
+    if (!uptime) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return (
+        <CellWithPopover
+            placement={['top', 'auto']}
+            content={
+                <DefinitionList responsive>
+                    <DefinitionList.Item key={'changeTime'} name={i18n('change-time')}>
+                        {formatDateTime(ChangeTime, {withTimeZone: true})}
+                    </DefinitionList.Item>
+                </DefinitionList>
+            }
+        >
+            {uptime}
+        </CellWithPopover>
+    );
+}
diff --git a/src/components/UptimeViewer/i18n/en.json b/src/components/UptimeViewer/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "start-time": "Start time",
+  "disconnect-time": "Disconnect time",
+  "change-time": "Change time"
+}
diff --git a/src/components/UptimeViewer/i18n/index.ts b/src/components/UptimeViewer/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-uptime-viewer';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
@@ -23,6 +23,7 @@ import {PoolsGraph} from '../PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../TabletsStatistic';
 import {formatPool} from '../TooltipsContent';
+import {NodeUptime} from '../UptimeViewer/UptimeViewer';
 import {UsageLabel} from '../UsageLabel/UsageLabel';
 
 import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
@@ -103,12 +104,16 @@ export function getVersionColumn<T extends {Version?: string}>(): Column<T> {
         },
     };
 }
-export function getUptimeColumn<T extends {StartTime?: string; Uptime?: string}>(): Column<T> {
+export function getUptimeColumn<
+    T extends {StartTime?: string; DisconnectTime?: string},
+>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.Uptime,
         header: NODES_COLUMNS_TITLES.Uptime,
         sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
-        render: ({row}) => row.Uptime,
+        render: ({row}) => {
+            return <NodeUptime StartTime={row.StartTime} DisconnectTime={row.DisconnectTime} />;
+        },
         align: DataTable.RIGHT,
         width: 120,
     };

diff --git a/src/containers/Storage/Disks/Disks.scss b/src/containers/Storage/Disks/Disks.scss
@@ -26,7 +26,7 @@
     }
 
     &__pdisk-item {
-        width: 80px;
+        min-width: 80px;
     }
     &__pdisk-progress-bar {
         --progress-bar-full-height: 20px;

diff --git a/src/containers/Storage/PDisk/PDisk.scss b/src/containers/Storage/PDisk/PDisk.scss
@@ -1,28 +1,42 @@
 .pdisk-storage {
+    --pdisk-vdisk-width: 3px;
+    --pdisk-gap-width: 2px;
+
     position: relative;
 
-    width: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    width: calc(
+        var(--pdisk-max-slots, 1) * var(--pdisk-vdisk-width) + (var(--pdisk-max-slots, 1) - 1) *
+            var(--pdisk-gap-width)
+    );
+    min-width: 120px;
 
     &__content {
         position: relative;
 
         display: block;
+        flex: 1;
 
-        border-radius: 4px; // to match interactive area with disk shape
+        border-radius: 4px;
     }
 
     &__vdisks {
         display: flex;
-        // this breaks disks relative sizes, but disks rarely exceed one line
-        flex-wrap: wrap;
-        gap: 2px;
+        flex: 0 0 auto;
+        gap: var(--pdisk-gap-width);
 
         margin-bottom: 4px;
+
+        white-space: nowrap;
     }
 
     &__vdisks-item {
-        flex-basis: 3px;
-        flex-shrink: 0;
+        flex: 0 0 var(--pdisk-vdisk-width);
+
+        min-width: var(--pdisk-vdisk-width);
 
         .stack__layer {
             .data-table__row:hover & {

diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -16,6 +16,8 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
+const PDISK_MAX_SLOTS_CSS_VAR = '--pdisk-max-slots';
+
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -25,6 +27,7 @@ interface PDiskProps {
     className?: string;
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
+    maximumSlotsPerDisk?: string;
 }
 
 export const PDisk = ({
@@ -36,6 +39,7 @@ export const PDisk = ({
     className,
     progressBarClassName,
     viewContext,
+    maximumSlotsPerDisk,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -73,7 +77,17 @@ export const PDisk = ({
     }
 
     return (
-        <div className={b(null, className)} ref={anchorRef}>
+        <div
+            className={b(null, className)}
+            ref={anchorRef}
+            style={
+                maximumSlotsPerDisk
+                    ? ({
+                          [PDISK_MAX_SLOTS_CSS_VAR]: maximumSlotsPerDisk,
+                      } as React.CSSProperties)
+                    : undefined
+            }
+        >
             {renderVDisks()}
             <HoverPopup
                 showPopup={showPopup}

diff --git a/src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss b/src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss
@@ -5,20 +5,14 @@
 
     &__pdisks-wrapper {
         display: flex;
-        justify-content: left;
-        align-items: flex-end;
+        gap: 10px;
 
-        width: max-content;
+        width: 100%;
         height: 40px;
     }
-    &__pdisks-item {
-        flex-grow: 1;
-
-        max-width: 200px;
-        margin-right: 10px;
 
-        &:last-child {
-            margin-right: 0px;
-        }
+    &__pdisks-item {
+        display: flex;
+        flex-shrink: 0;
     }
 }
diff --git a/src/containers/Storage/StorageNodes/columns/columns.tsx b/src/containers/Storage/StorageNodes/columns/columns.tsx
@@ -45,7 +45,12 @@ const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNo
 
                         return (
                             <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                <PDisk data={pDisk} vDisks={vDisks} viewContext={viewContext} />
+                                <PDisk
+                                    data={pDisk}
+                                    vDisks={vDisks}
+                                    viewContext={viewContext}
+                                    maximumSlotsPerDisk={row.MaximumSlotsPerDisk}
+                                />
                             </div>
                         );
                     })}

diff --git a/src/containers/Tablet/components/TabletInfo/TabletInfo.tsx b/src/containers/Tablet/components/TabletInfo/TabletInfo.tsx
@@ -5,12 +5,12 @@ import type {InfoViewerItem} from '../../../../components/InfoViewer';
 import {InfoViewer} from '../../../../components/InfoViewer';
 import {LinkWithIcon} from '../../../../components/LinkWithIcon/LinkWithIcon';
 import {TabletState} from '../../../../components/TabletState/TabletState';
+import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
 import {getTabletPagePath} from '../../../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../../../store/reducers/authentication/authentication';
 import {ETabletState} from '../../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../../types/api/tablet';
 import {cn} from '../../../../utils/cn';
-import {getUptimeFromDateFormatted} from '../../../../utils/dataFormatters/dataFormatters';
 import {createTabletDeveloperUIHref} from '../../../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../../../utils/hooks';
 import {getDefaultNodePath} from '../../../Node/NodePages';
@@ -72,7 +72,7 @@ export const TabletInfo = ({tablet}: TabletInfoProps) => {
     if (hasUptime) {
         tabletInfo.push({
             label: tabletInfoKeyset('field_uptime'),
-            value: getUptimeFromDateFormatted(ChangeTime),
+            value: <TabletUptime ChangeTime={ChangeTime} />,
         });
     }
 

diff --git a/src/containers/Tablet/components/TabletTable/TabletTable.tsx b/src/containers/Tablet/components/TabletTable/TabletTable.tsx
@@ -5,8 +5,8 @@ import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../../components/InternalLink/InternalLink';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TabletState} from '../../../../components/TabletState/TabletState';
+import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
 import type {ITabletPreparedHistoryItem} from '../../../../types/store/tablet';
-import {getUptimeFromDateFormatted} from '../../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
 const TABLET_COLUMNS_WIDTH_LS_KEY = 'tabletTableColumnsWidth';
@@ -21,7 +21,10 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
         name: 'Change time',
         align: DataTable.RIGHT,
         sortable: false,
-        render: ({row}) => getUptimeFromDateFormatted(row.changeTime),
+        render: ({row}) => {
+            return <TabletUptime ChangeTime={row.changeTime} />;
+        },
+        width: 120,
     },
     {
         name: 'State',