Merge branch 'main' into astandrik.view-query-text-on-info-919

Author: astandrik

playwright.config.ts

@@ -25,8 +25,9 @@ const config: PlaywrightTestConfig = {
         baseURL: baseUrl || 'http://localhost:3000/',
         testIdAttribute: 'data-qa',
         trace: 'on-first-retry',
-        video: 'retain-on-failure',
-        screenshot: 'only-on-failure',
+        // Always record video and take screenshots on main branch, otherwise only on failure
+        video: process.env.GITHUB_REF === 'refs/heads/main' ? 'on' : 'retain-on-failure',
+        screenshot: process.env.GITHUB_REF === 'refs/heads/main' ? 'on' : 'only-on-failure',
     },
     projects: [
         {

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;

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}

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},
     );

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;
 

src/components/Table/Table.scss

@@ -38,7 +38,7 @@
 
         background-color: var(--g-color-base-background);
         @include mixins.text-subheader-2();
-        &_align_right {
+        :is(&_align_right) {
             #{$block}__table-header-content {
                 justify-content: flex-end;
 

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',

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>
+    );
+}

src/components/UptimeViewer/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "start-time": "Start time",
+  "disconnect-time": "Disconnect time",
+  "change-time": "Change time"
+}

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});