Add Threads tab to Node page with mock data and UI components

Co-authored-by: adameat <[email protected]>

Author: Copilot

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 />;
+            }
+
             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,28 @@
+.cpu-usage-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    min-width: 120px;
+
+    &__progress {
+        flex: 1;
+
+        min-width: 60px;
+    }
+
+    &__text {
+        font-size: 12px;
+        white-space: nowrap;
+    }
+
+    &__total {
+        font-weight: 500;
+    }
+
+    &__breakdown {
+        margin-left: 4px;
+
+        color: var(--g-color-text-secondary);
+    }
+}

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

@@ -0,0 +1,48 @@
+import {Progress} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+
+import './CpuUsageBar.scss';
+
+const b = cn('cpu-usage-bar');
+
+interface CpuUsageBarProps {
+    systemUsage?: number;
+    userUsage?: number;
+    className?: string;
+}
+
+/**
+ * Component to display CPU usage as a progress bar showing both system and user usage
+ */
+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);
+
+    // Determine color based on total load
+    const getProgressTheme = (): 'success' | 'warning' | 'danger' => {
+        if (totalUsage >= 1.0) {
+            return 'danger';
+        } // 100% or more load
+        if (totalUsage >= 0.8) {
+            return 'warning';
+        } // 80% or more load
+        return 'success';
+    };
+
+    return (
+        <div className={b(null, className)}>
+            <div className={b('progress')}>
+                <Progress value={Math.min(totalPercent, 100)} theme={getProgressTheme()} size="s" />
+            </div>
+            <div className={b('text')}>
+                <span className={b('total')}>{totalPercent}%</span>
+                <span className={b('breakdown')}>
+                    (S: {systemPercent}%, U: {userPercent}%)
+                </span>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,49 @@
+.thread-states-bar {
+    &__bar {
+        display: flex;
+        overflow: hidden;
+
+        min-width: 80px;
+        height: 16px;
+        margin-bottom: 4px;
+
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: 4px;
+        background-color: var(--g-color-base-generic);
+    }
+
+    &__segment {
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+
+    &__legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        font-size: 11px;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__legend-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        white-space: nowrap;
+    }
+
+    &__legend-color {
+        flex-shrink: 0;
+
+        width: 8px;
+        height: 8px;
+
+        border-radius: 2px;
+    }
+}

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

@@ -0,0 +1,76 @@
+import {cn} from '../../../../utils/cn';
+
+import './ThreadStatesBar.scss';
+
+const b = cn('thread-states-bar');
+
+interface ThreadStatesBarProps {
+    states?: Record<string, number>;
+    totalThreads?: number;
+    className?: string;
+}
+
+/**
+ * Thread state colors based on the state type
+ */
+const getStateColor = (state: string): string => {
+    switch (state.toUpperCase()) {
+        case 'R': // Running
+            return 'var(--g-color-text-positive)';
+        case 'S': // Sleeping
+            return 'var(--g-color-text-secondary)';
+        case 'D': // Uninterruptible sleep
+            return 'var(--g-color-text-warning)';
+        case 'Z': // Zombie
+        case 'T': // Stopped
+        case 'X': // Dead
+            return 'var(--g-color-text-danger)';
+        default:
+            return 'var(--g-color-text-misc)';
+    }
+};
+
+/**
+ * Component to display thread states as a horizontal bar chart
+ */
+export function ThreadStatesBar({states = {}, totalThreads, className}: ThreadStatesBarProps) {
+    const total = totalThreads || Object.values(states).reduce((sum, count) => sum + count, 0);
+
+    if (total === 0) {
+        return <div className={b(null, className)}>No threads</div>;
+    }
+
+    const stateEntries = Object.entries(states).filter(([, count]) => count > 0);
+
+    return (
+        <div className={b(null, className)}>
+            <div className={b('bar')}>
+                {stateEntries.map(([state, count]) => {
+                    const percentage = (count / total) * 100;
+                    return (
+                        <div
+                            key={state}
+                            className={b('segment')}
+                            style={{
+                                width: `${percentage}%`,
+                                backgroundColor: getStateColor(state),
+                            }}
+                            title={`${state}: ${count} threads (${Math.round(percentage)}%)`}
+                        />
+                    );
+                })}
+            </div>
+            <div className={b('legend')}>
+                {stateEntries.map(([state, count]) => (
+                    <span key={state} className={b('legend-item')}>
+                        <span
+                            className={b('legend-color')}
+                            style={{backgroundColor: getStateColor(state)}}
+                        />
+                        {state}: {count}
+                    </span>
+                ))}
+            </div>
+        </div>
+    );
+}

src/containers/Node/Threads/Threads.scss

@@ -0,0 +1,20 @@
+.threads {
+    &__error {
+        margin-bottom: 16px;
+    }
+
+    &__table {
+        .g-table {
+            --g-table-row-height: 56px;
+        }
+    }
+
+    &__empty {
+        padding: 24px;
+
+        font-size: 14px;
+        text-align: center;
+
+        color: var(--g-color-text-secondary);
+    }
+}