feat: improve tenant diagnostics - CPU

src/components/FixedHeightQuery/FixedHeightQuery.scss

@@ -23,7 +23,7 @@
 
             height: 100% !important;
             margin: 0 !important;
-            padding: var(--g-spacing-2) !important;
+            padding: 0 !important;
 
             white-space: pre-wrap !important;
             text-overflow: ellipsis !important;
@@ -39,4 +39,8 @@
             word-break: break-word !important;
         }
     }
+    .ydb-syntax-highlighter__copy {
+        top: 0;
+        right: 0;
+    }
 }

src/components/FixedHeightQuery/FixedHeightQuery.tsx

@@ -7,33 +7,39 @@ import './FixedHeightQuery.scss';
 
 const b = cn('ydb-fixed-height-query');
 
-const FIXED_PADDING = 8;
+const FIXED_PADDING = 0;
 const LINE_HEIGHT = 20;
 
+type FixedHeightQueryMode = 'fixed' | 'max';
+
 interface FixedHeightQueryProps {
     value?: string;
     lines?: number;
     hasClipboardButton?: boolean;
     clipboardButtonAlwaysVisible?: boolean;
+    mode?: FixedHeightQueryMode;
 }
 
 export const FixedHeightQuery = ({
     value = '',
     lines = 4,
     hasClipboardButton,
     clipboardButtonAlwaysVisible,
+    mode = 'fixed',
 }: FixedHeightQueryProps) => {
     const heightValue = `${lines * LINE_HEIGHT + FIXED_PADDING}px`;
 
     // Remove empty lines from the beginning (lines with only whitespace are considered empty)
     const trimmedValue = value.replace(/^(\s*\n)+/, '');
 
+    const heightStyle = mode === 'fixed' ? {height: heightValue} : {maxHeight: heightValue};
+
     return (
         <div
             className={b()}
             style={
                 {
-                    height: heightValue,
+                    ...heightStyle,
                     '--line-clamp': lines,
                 } as React.CSSProperties & {'--line-clamp': number}
             }
@@ -47,6 +53,7 @@ export const FixedHeightQuery = ({
                               alwaysVisible: clipboardButtonAlwaysVisible,
                               copyText: value,
                               withLabel: false,
+                              size: 'xs',
                           }
                         : false
                 }

src/components/SeeAllButton/SeeAllButton.tsx

@@ -0,0 +1,23 @@
+import {ArrowRight} from '@gravity-ui/icons';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
+
+import {InternalLink} from '../InternalLink';
+
+import i18n from './i18n';
+
+interface SeeAllButtonProps {
+    to: string;
+    className?: string;
+    onClick?: () => void;
+}
+
+export function SeeAllButton({to, className, onClick}: SeeAllButtonProps) {
+    return (
+        <InternalLink className={className} to={to} onClick={onClick}>
+            <Flex alignItems="center" gap={1}>
+                <Text>{i18n('action_see-all')}</Text>
+                <Icon data={ArrowRight} size={16} />
+            </Flex>
+        </InternalLink>
+    );
+}

src/components/SeeAllButton/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "action_see-all": "See all"
+}

src/components/SeeAllButton/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-see-all-button';
+
+export default registerKeysets(COMPONENT, {en});

src/components/ShardsTable/columns.tsx

@@ -80,7 +80,7 @@ export const getCpuCoresColumn: GetShardsColumn = () => {
                 <UsageLabel value={roundToPrecision(usage, 2)} theme={getUsageSeverity(usage)} />
             );
         },
-        align: DataTable.RIGHT,
+        align: DataTable.LEFT,
         width: 110,
         resizeMinWidth: 110,
     };

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {ButtonSize} from '@gravity-ui/uikit';
 import {ClipboardButton} from '@gravity-ui/uikit';
 import {nanoid} from '@reduxjs/toolkit';
 import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
@@ -27,6 +28,7 @@ interface ClipboardButtonOptions {
     alwaysVisible?: boolean;
     copyText?: string;
     withLabel?: boolean;
+    size?: ButtonSize;
 }
 
 export type WithClipboardButtonProp = ClipboardButtonOptions | boolean;
@@ -58,28 +60,22 @@ export function YDBSyntaxHighlighter({
         registerLangAndUpdateKey();
     }, [language]);
 
+    const clipboardButtonProps =
+        typeof withClipboardButton === 'object' ? withClipboardButton : undefined;
+
     const renderCopyButton = () => {
         if (withClipboardButton) {
             return (
                 <div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
                     <ClipboardButton
                         view="flat-secondary"
-                        size="s"
+                        size={clipboardButtonProps?.size || 'xs'}
                         className={b('copy', {
-                            visible:
-                                typeof withClipboardButton === 'object' &&
-                                withClipboardButton.alwaysVisible,
+                            visible: clipboardButtonProps?.alwaysVisible,
                         })}
-                        text={
-                            (typeof withClipboardButton === 'object' &&
-                                withClipboardButton.copyText) ||
-                            text
-                        }
+                        text={clipboardButtonProps?.copyText || text}
                     >
-                        {typeof withClipboardButton === 'object' &&
-                        withClipboardButton.withLabel === false
-                            ? null
-                            : i18n('copy')}
+                        {clipboardButtonProps?.withLabel === false ? null : i18n('copy')}
                     </ClipboardButton>
                 </div>
             );

src/components/SyntaxHighlighter/themes.ts

@@ -7,12 +7,14 @@ export const lightTransparent = {
         ...materialLight['pre[class*="language-"]'],
         background: 'transparent',
         margin: 0,
+        lineHeight: '15px',
     },
     'code[class*="language-"]': {
         ...materialLight['code[class*="language-"]'],
         background: 'transparent',
         color: 'var(--g-color-text-primary)',
         whiteSpace: 'pre-wrap' as const,
+        fontSize: '13px',
     },
     comment: {
         color: '#969896',
@@ -49,12 +51,14 @@ export const darkTransparent = {
         ...vscDarkPlus['pre[class*="language-"]'],
         background: 'transparent',
         margin: 0,
+        lineHeight: '15px',
     },
     'code[class*="language-"]': {
         ...vscDarkPlus['code[class*="language-"]'],
         background: 'transparent',
         color: 'var(--g-color-text-primary)',
         whiteSpace: 'pre-wrap' as const,
+        fontSize: '13px',
     },
     comment: {
         color: '#969896',
@@ -91,10 +95,12 @@ const dark: Record<string, React.CSSProperties> = {
         ...darkTransparent['pre[class*="language-"]'],
         background: vscDarkPlus['pre[class*="language-"]'].background,
         scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+        lineHeight: '15px',
     },
     'code[class*="language-"]': {
         ...darkTransparent['code[class*="language-"]'],
         whiteSpace: 'pre',
+        fontSize: '13px',
     },
 };
 
@@ -104,10 +110,12 @@ const light: Record<string, React.CSSProperties> = {
         ...lightTransparent['pre[class*="language-"]'],
         background: 'var(--g-color-base-misc-light)',
         scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+        lineHeight: '15px',
     },
     'code[class*="language-"]': {
         ...lightTransparent['code[class*="language-"]'],
         whiteSpace: 'pre',
+        fontSize: '13px',
     },
 };
 

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -16,7 +16,7 @@ import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
 import {uiFactory} from '../../../uiFactory/uiFactory';
 import {cn} from '../../../utils/cn';
-import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {useScrollPosition, useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes/Nodes';
 import {Operations} from '../../Operations';
@@ -200,6 +200,12 @@ function Diagnostics(props: DiagnosticsProps) {
         );
     };
 
+    useScrollPosition(
+        containerRef,
+        `tenant-diagnostics-${tenantName}-${activeTab?.id}`,
+        activeTab?.id === TENANT_DIAGNOSTICS_TABS_IDS.overview,
+    );
+
     return (
         <div className={b()}>
             {activeTab ? (

src/containers/Tenant/Diagnostics/TenantOverview/StatsWrapper/StatsWrapper.scss

@@ -0,0 +1,14 @@
+.ydb-stats-wrapper {
+    overflow: auto;
+
+    padding: var(--g-spacing-4);
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: var(--g-border-radius-xs);
+
+    &__header {
+        position: sticky;
+        top: 0;
+        left: 0;
+    }
+}

src/containers/Tenant/Diagnostics/TenantOverview/StatsWrapper/StatsWrapper.tsx

@@ -0,0 +1,41 @@
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import {SeeAllButton} from '../../../../../components/SeeAllButton/SeeAllButton';
+import {cn} from '../../../../../utils/cn';
+
+const b = cn('ydb-stats-wrapper');
+
+import './StatsWrapper.scss';
+
+interface StatsWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+    title: string;
+    description?: string;
+    allEntitiesLink?: string;
+    onAllEntitiesClick?: () => void;
+}
+
+export function StatsWrapper({
+    children,
+    className,
+    title,
+    description,
+    allEntitiesLink,
+    onAllEntitiesClick,
+}: StatsWrapperProps) {
+    return (
+        <Flex className={b(null, className)} gap={2} direction="column">
+            <Flex justifyContent="space-between" wrap="nowrap" className={b('header')}>
+                <Flex direction="column">
+                    <Text variant="subheader-2">{title}</Text>
+                    {description && <Text color="secondary">{description}</Text>}
+                </Flex>
+                {allEntitiesLink && (
+                    <SeeAllButton to={allEntitiesLink} onClick={onAllEntitiesClick} />
+                )}
+            </Flex>
+            {children}
+        </Flex>
+    );
+}