feat: add new tab to Node page with thread pool statistics (#2599)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: adameat <34044711+adameat@users.noreply.github.com>
Co-authored-by: Elena Makarova <el-makarova@yandex-team.ru>

Author: 3 people

src/components/TitleWithHelpmark/TitleWithHelpmark.tsx

@@ -0,0 +1,15 @@
+import {Flex, HelpMark} from '@gravity-ui/uikit';
+
+interface TitleWithHelpMarkProps {
+    header: string;
+    note: string;
+}
+
+export function TitleWithHelpMark({header, note}: TitleWithHelpMarkProps) {
+    return (
+        <Flex gap={1} alignItems="center">
+            {header}
+            <HelpMark popoverProps={{placement: ['right', 'left']}}>{note}</HelpMark>
+        </Flex>
+    );
+}

src/containers/Node/Node.tsx

@@ -29,6 +29,7 @@ import {Tablets} from '../Tablets/Tablets';
 import type {NodeTab} from './NodePages';
 import {NODE_TABS, getDefaultNodePath, nodePageQueryParams, nodePageTabSchema} from './NodePages';
 import NodeStructure from './NodeStructure/NodeStructure';
+import {Threads} from './Threads/Threads';
 import i18n from './i18n';
 
 import './Node.scss';
@@ -247,6 +248,10 @@ function NodePageContent({
                 return <NodeStructure nodeId={nodeId} />;
             }
 
+            case 'threads': {
+                return <Threads nodeId={nodeId} />;
+            }
+
             default:
                 return false;
         }

src/containers/Node/NodePages.ts

@@ -11,6 +11,7 @@ const NODE_TABS_IDS = {
     storage: 'storage',
     tablets: 'tablets',
     structure: 'structure',
+    threads: 'threads',
 } as const;
 
 export type NodeTab = ValueOf<typeof NODE_TABS_IDS>;
@@ -34,6 +35,12 @@ export const NODE_TABS = [
             return i18n('tabs.tablets');
         },
     },
+    {
+        id: NODE_TABS_IDS.threads,
+        get title() {
+            return i18n('tabs.threads');
+        },
+    },
 ];
 
 export const nodePageTabSchema = z.nativeEnum(NODE_TABS_IDS).catch(NODE_TABS_IDS.tablets);

src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss

@@ -0,0 +1,6 @@
+.cpu-usage-bar {
+    &__progress {
+        width: 60px;
+        min-width: 60px;
+    }
+}

src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.tsx

@@ -0,0 +1,38 @@
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import {ProgressViewer} from '../../../../components/ProgressViewer/ProgressViewer';
+import {cn} from '../../../../utils/cn';
+
+import './CpuUsageBar.scss';
+
+const b = cn('cpu-usage-bar');
+
+interface CpuUsageBarProps {
+    systemUsage?: number;
+    userUsage?: number;
+    className?: string;
+}
+
+export function CpuUsageBar({systemUsage = 0, userUsage = 0, className}: CpuUsageBarProps) {
+    const totalUsage = systemUsage + userUsage;
+    const systemPercent = Math.round(systemUsage * 100);
+    const userPercent = Math.round(userUsage * 100);
+    const totalPercent = Math.round(totalUsage * 100);
+
+    return (
+        <Flex gap={2} className={b(null, className)}>
+            <div className={b('progress')}>
+                <ProgressViewer
+                    value={totalPercent}
+                    percents={true}
+                    colorizeProgress={true}
+                    capacity={100}
+                    className={b('progress')}
+                />
+            </div>
+            <Text color="secondary">
+                (Sys: {systemPercent}%, U: {userPercent}%)
+            </Text>
+        </Flex>
+    );
+}

src/containers/Node/Threads/ThreadStatesBar/ThreadStatesBar.scss

@@ -0,0 +1,10 @@
+.ydb-thread-states-bar {
+    &__legend-color {
+        flex-shrink: 0;
+
+        width: 8px;
+        aspect-ratio: 1;
+
+        border-radius: var(--g-border-radius-xs);
+    }
+}

src/containers/Node/Threads/ThreadStatesBar/ThreadStatesBar.tsx

@@ -0,0 +1,105 @@
+import type {ProgressTheme} from '@gravity-ui/uikit';
+import {ActionTooltip, Flex, Progress, Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
+
+import './ThreadStatesBar.scss';
+
+const b = cn('ydb-thread-states-bar');
+
+interface ThreadStatesBarProps {
+    states?: Record<string, number>;
+    totalThreads?: number;
+    className?: string;
+}
+
+/**
+ * Thread state colors based on the state type
+ */
+const getProgressBackgroundColor = (state: string): string => {
+    switch (state.toUpperCase()) {
+        case 'R': // Running
+            return 'var(--g-color-base-positive-medium)';
+        case 'S': // Sleeping
+            return 'var(--g-color-base-info-medium)';
+        case 'D': // Uninterruptible sleep
+            return 'var(--g-color-base-warning-medium)';
+        case 'Z': // Zombie
+        case 'T': // Stopped
+        case 'X': // Dead
+            return 'var(--g-color-base-danger-medium)';
+        default:
+            return 'var(--g-color-base-misc-medium)';
+    }
+};
+const getStackThemeColor = (state: string): ProgressTheme => {
+    switch (state.toUpperCase()) {
+        case 'R': // Running
+            return 'success';
+        case 'S': // Sleeping
+            return 'info';
+        case 'D': // Uninterruptible sleep
+            return 'warning';
+        case 'Z': // Zombie
+        case 'T': // Stopped
+        case 'X': // Dead
+            return 'danger';
+        default:
+            return 'misc';
+    }
+};
+const getStateTitle = (state: string): string => {
+    switch (state.toUpperCase()) {
+        case 'R': // Running
+            return 'Running';
+        case 'S': // Sleeping
+            return 'Sleeping';
+        case 'D': // Uninterruptible sleep
+            return 'Uninterruptible sleep';
+        case 'Z': // Zombie
+            return 'Zombie';
+        case 'T': // Stopped
+            return 'Stopped';
+        case 'X': // Dead
+            return 'Dead';
+        default:
+            return 'Unknown';
+    }
+};
+
+export function ThreadStatesBar({states = {}, totalThreads, className}: ThreadStatesBarProps) {
+    const total = totalThreads || Object.values(states).reduce((sum, count) => sum + count, 0);
+
+    if (total === 0) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+
+    const stateEntries = Object.entries(states).filter(([, count]) => count > 0);
+
+    const stack = Object.entries(states).map(([state, count]) => ({
+        theme: getStackThemeColor(state),
+        value: (count / total) * 100,
+    }));
+
+    return (
+        <div className={b(null, className)}>
+            <Progress stack={stack} size="s" />
+            <Flex gap={2}>
+                {stateEntries.map(([state, count]) => (
+                    <ActionTooltip key={state} title={getStateTitle(state)}>
+                        <Flex gap={1} alignItems="center">
+                            <div
+                                className={b('legend-color')}
+                                style={{backgroundColor: getProgressBackgroundColor(state)}}
+                            />
+                            <Text color="secondary" variant="caption-2">
+                                {state}: {count}
+                            </Text>
+                        </Flex>
+                    </ActionTooltip>
+                ))}
+            </Flex>
+        </div>
+    );
+}

src/containers/Node/Threads/Threads.tsx

@@ -0,0 +1,41 @@
+import {ResponseError} from '../../../components/Errors/ResponseError';
+import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
+import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
+import {nodeApi} from '../../../store/reducers/node/node';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {useAutoRefreshInterval} from '../../../utils/hooks';
+
+import {columns} from './columns';
+import i18n from './i18n';
+
+interface ThreadsProps {
+    nodeId: string;
+    className?: string;
+}
+
+const THREADS_COLUMNS_WIDTH_LS_KEY = 'threadsTableColumnsWidth';
+
+export function Threads({nodeId, className}: ThreadsProps) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const {
+        currentData: nodeData,
+        isLoading,
+        error,
+    } = nodeApi.useGetNodeInfoQuery({nodeId}, {pollingInterval: autoRefreshInterval});
+
+    const data = nodeData?.Threads || [];
+
+    return (
+        <LoaderWrapper loading={isLoading} className={className}>
+            {error ? <ResponseError error={error} /> : null}
+            <ResizeableDataTable
+                columnsWidthLSKey={THREADS_COLUMNS_WIDTH_LS_KEY}
+                data={data}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                emptyDataMessage={i18n('alert_no-thread-data')}
+            />
+        </LoaderWrapper>
+    );
+}

src/containers/Node/Threads/columns.tsx

@@ -0,0 +1,60 @@
+import type {Column} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
+
+import {TitleWithHelpMark} from '../../../components/TitleWithHelpmark/TitleWithHelpmark';
+import type {TThreadPoolInfo} from '../../../types/api/threads';
+import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import {safeParseNumber} from '../../../utils/utils';
+
+import {CpuUsageBar} from './CpuUsageBar/CpuUsageBar';
+import {ThreadStatesBar} from './ThreadStatesBar/ThreadStatesBar';
+import i18n from './i18n';
+
+export const columns: Column<TThreadPoolInfo>[] = [
+    {
+        name: 'Name',
+        header: i18n('field_pool-name'),
+        render: ({row}) => row.Name || i18n('value_unknown'),
+        width: 200,
+    },
+    {
+        name: 'Threads',
+        header: i18n('field_thread-count'),
+        render: ({row}) => formatNumber(row.Threads),
+        align: DataTable.RIGHT,
+        width: 100,
+    },
+    {
+        name: 'CpuUsage',
+        header: (
+            <TitleWithHelpMark
+                header={i18n('field_cpu-usage')}
+                note={i18n('description_cpu-usage')}
+            />
+        ),
+        render: ({row}) => <CpuUsageBar systemUsage={row.SystemUsage} userUsage={row.UserUsage} />,
+        sortAccessor: (row) => safeParseNumber(row.SystemUsage) + safeParseNumber(row.UserUsage),
+        width: 200,
+    },
+    {
+        name: 'MinorPageFaults',
+        header: i18n('field_minor-page-faults'),
+        render: ({row}) => formatNumber(row.MinorPageFaults),
+        align: DataTable.RIGHT,
+        width: 145,
+    },
+    {
+        name: 'MajorPageFaults',
+        header: i18n('field_major-page-faults'),
+        render: ({row}) => formatNumber(row.MajorPageFaults),
+        align: DataTable.RIGHT,
+        width: 145,
+    },
+    {
+        name: 'States',
+        header: i18n('field_thread-states'),
+        render: ({row}) => <ThreadStatesBar states={row.States} totalThreads={row.Threads} />,
+        sortable: false,
+        width: 250,
+    },
+];

src/containers/Node/Threads/i18n/en.json

@@ -0,0 +1,11 @@
+{
+  "field_pool-name": "Pool Name",
+  "field_thread-count": "Threads",
+  "field_cpu-usage": "CPU Usage",
+  "field_minor-page-faults": "Minor Page Faults",
+  "field_major-page-faults": "Major Page Faults",
+  "field_thread-states": "Thread States",
+  "value_unknown": "Unknown",
+  "alert_no-thread-data": "No thread pool information available",
+  "description_cpu-usage": "System usage + user usage"
+}