fix: review fixes

Author: Raubzeug

THREADS_IMPLEMENTATION.md

@@ -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/components/TitleWithHelpmark/TitleWithHelpmark.tsx

@@ -1,28 +1,6 @@
 .cpu-usage-bar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    min-width: 120px;
-
     &__progress {
-        flex: 1;
-
+        width: 60px;
         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.scss

@@ -1,5 +1,6 @@
-import {Progress} from '@gravity-ui/uikit';
+import {Flex, Text} from '@gravity-ui/uikit';
 
+import {ProgressViewer} from '../../../../components/ProgressViewer/ProgressViewer';
 import {cn} from '../../../../utils/cn';
 
 import './CpuUsageBar.scss';
@@ -12,37 +13,26 @@ interface CpuUsageBarProps {
     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)}>
+        <Flex gap={2} 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>
+                <ProgressViewer
+                    value={totalPercent}
+                    percents={true}
+                    colorizeProgress={true}
+                    capacity={100}
+                    className={b('progress')}
+                />
             </div>
-        </div>
+            <Text color="secondary">
+                (Sys: {systemPercent}%, U: {userPercent}%)
+            </Text>
+        </Flex>
     );
 }

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

@@ -1,49 +1,10 @@
-.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;
-    }
-
+.ydb-thread-states-bar {
     &__legend-color {
         flex-shrink: 0;
 
         width: 8px;
-        height: 8px;
+        aspect-ratio: 1;
 
-        border-radius: 2px;
+        border-radius: var(--g-border-radius-xs);
     }
 }