Repository: provectus/kafka-ui
Issue: Always show at least 2 or 3 digits for broker disk usage
Labels: type/enhancement
scope/frontend
status/accepted
area/ux

### Issue submitter TODO list

- [X] I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
- [X] I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md) and the feature is not present there

### Is your proposal related to a problem?

We have some brokers with storage in the "a few TB" range. My challenge is that disk usage says "1 TB" or "2 TB" on the broker overview (note: even for smaller brokers in the "a few GB" range, I guess the problem would be the same). This is not very informative, so in practice I have to look elsewhere (on the server, or other monitoring tools) to determine the actual (more precise) disk usage.

### Describe the feature you're interested in

I'd like for the disk usage overview in the UI to always show 2 or 3 digits. E.g. if usage is between 1 and 10 GB (or TB), a decimal number with 1 or 2 decimals should be shown instead of an integer. (and if choosing 3 digits, also between 10 and 100 units). 

Ie:

- Instead of "1 GB" show "1.4 GB" (or "1.43 GB")
- Optionally instead of "11 GB" show "11.3 GB" (if choosing 3 digits)


### Describe alternatives you've considered

Looking in other monitoring tools / ssh on server and `df`

### Version you're running

fdd9ad9

### Additional context

_No response_

Issue comments:
Hello there jonaslb! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hey, thanks for the suggestion! 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx
index fcad7423f39..44a75c51ad8 100644
--- a/kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx
+++ b/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}
diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx
index ae6a7f4b3b6..89a553be7d0 100644
--- a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx
+++ b/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(
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
index d8cd0a2f763..e59c006b0c6 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/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}
             />
           ),
       },
diff --git a/kafka-ui-react-app/src/components/common/NewTable/SizeCell.tsx b/kafka-ui-react-app/src/components/common/NewTable/SizeCell.tsx
index 24485342aa4..7a230be8121 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/SizeCell.tsx
+++ b/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}
   </>
 );


Test patch: