Render bar only

Author: kunga

src/components/MemoryViewer/MemoryViewer.tsx

@@ -99,7 +99,39 @@ export function MemoryViewer({
 
     return (
         <HoverPopup
-            popupContent={<MemoryViewerComponents stats={stats} formatValues={formatValues} />}
+            popupContent={
+                <DefinitionList responsive>
+                    {memorySegments.map(
+                        ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
+                            <DefinitionList.Item
+                                key={label}
+                                name={
+                                    <div className={b('container')}>
+                                        <div className={b('legend', {type: key})}></div>
+                                        <div className={b('name')}>{label}</div>
+                                    </div>
+                                }
+                            >
+                                {segmentCapacity ? (
+                                    <ProgressViewer
+                                        value={segmentSize}
+                                        capacity={segmentCapacity}
+                                        formatValues={formatDetailedValues}
+                                        colorizeProgress
+                                    />
+                                ) : (
+                                    formatBytes({
+                                        value: segmentSize,
+                                        size: 'gb',
+                                        withSizeLabel: true,
+                                        precision: 2,
+                                    })
+                                )}
+                            </DefinitionList.Item>
+                        ),
+                    )}
+                </DefinitionList>
+            }
         >
             <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>
@@ -134,39 +166,3 @@ export function MemoryViewer({
         </HoverPopup>
     );
 }
-
-export function MemoryViewerComponents({stats}: MemoryProgressViewerProps) {
-    const memorySegments = getMemorySegments(stats);
-
-    return (
-        <DefinitionList responsive>
-            {memorySegments.map(({label, value: segmentSize, capacity: segmentCapacity, key}) => (
-                <DefinitionList.Item
-                    key={label}
-                    name={
-                        <div className={b('container')}>
-                            <div className={b('legend', {type: key})}></div>
-                            <div className={b('name')}>{label}</div>
-                        </div>
-                    }
-                >
-                    {segmentCapacity ? (
-                        <ProgressViewer
-                            value={segmentSize}
-                            capacity={segmentCapacity}
-                            formatValues={formatDetailedValues}
-                            colorizeProgress
-                        />
-                    ) : (
-                        formatBytes({
-                            value: segmentSize,
-                            size: 'gb',
-                            withSizeLabel: true,
-                            precision: 2,
-                        })
-                    )}
-                </DefinitionList.Item>
-            ))}
-        </DefinitionList>
-    );
-}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {MemoryViewerComponents} from '../../../../../components/MemoryViewer/MemoryViewer';
+import {MemoryViewer} from '../../../../../components/MemoryViewer/MemoryViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
 import type {TMemoryStats} from '../../../../../types/api/nodes';
 import {formatStorageValuesToGb} from '../../../../../utils/dataFormatters/dataFormatters';
@@ -29,10 +29,7 @@ export function TenantMemory({
             <div className={b('title')}>{'Memory details'}</div>
             <div className={b('memory-info')}>
                 {memoryStats ? (
-                    <MemoryViewerComponents
-                        formatValues={formatStorageValuesToGb}
-                        stats={memoryStats}
-                    />
+                    <MemoryViewer formatValues={formatStorageValuesToGb} stats={memoryStats} />
                 ) : (
                     <ProgressViewer
                         value={memoryUsed}

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

@@ -65,7 +65,7 @@
     }
 
     &__memory-info {
-        width: 400px;
+        width: 300px;
         margin-bottom: 36px;
     }
 }