FE: Add precision for disk usage (#3962)

kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx

@@ -44,7 +44,10 @@ const Broker: React.FC = () => {
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator label="Segment Size">
-            <BytesFormatted value={brokerDiskUsage?.segmentSize} />
+            <BytesFormatted
+              value={brokerDiskUsage?.segmentSize}
+              precision={2}
+            />
           </Metrics.Indicator>
           <Metrics.Indicator label="Segment Count">
             {brokerDiskUsage?.segmentCount}

kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx

@@ -66,7 +66,7 @@ describe('Broker Component', () => {
     expect(
       screen.getByText(brokerDiskUsage?.segmentCount || '')
     ).toBeInTheDocument();
-    expect(screen.getByText('12 MB')).toBeInTheDocument();
+    expect(screen.getByText('11.77 MB')).toBeInTheDocument();
 
     expect(screen.getByText('Segment Count')).toBeInTheDocument();
     expect(

kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -105,6 +105,7 @@ const BrokersList: React.FC = () => {
               getValue={getValue}
               renderValue={renderValue}
               renderSegments
+              precision={2}
             />
           ),
       },

kafka-ui-react-app/src/components/common/NewTable/SizeCell.tsx

@@ -6,10 +6,10 @@ import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 type AsAny = any;
 
 const SizeCell: React.FC<
-  CellContext<AsAny, unknown> & { renderSegments?: boolean }
-> = ({ getValue, row, renderSegments = false }) => (
+  CellContext<AsAny, unknown> & { renderSegments?: boolean; precision?: number }
+> = ({ getValue, row, renderSegments = false, precision = 0 }) => (
   <>
-    <BytesFormatted value={getValue<string | number>()} />
+    <BytesFormatted value={getValue<string | number>()} precision={precision} />
     {renderSegments ? `, ${row?.original.count} segment(s)` : null}
   </>
 );