fix UI bugs, and refactor components

src/components/Cluster.jsx

@@ -235,41 +235,37 @@ const ClusterOverview = () => {
                 </Typography>
 
                 <Box sx={{
-                    display: 'flex',
-                    flexDirection: {xs: 'column', md: 'row'},
+                    display: 'grid',
+                    gridTemplateColumns: {xs: '1fr', md: '2fr 1fr'},
                     gap: 3,
                     alignItems: 'stretch'
                 }}>
                     <Box sx={{
-                        flex: 2,
                         display: 'grid',
                         gridTemplateColumns: {md: '1fr 1fr'},
                         gap: 3,
-                        minHeight: '100%'
+                        alignContent: 'start'
                     }}>
-                        <Box>
-                            <GridNodes {...gridNodesProps} />
-                        </Box>
-                        <Box>
-                            <GridObjects {...gridObjectsProps} />
-                        </Box>
-                        <Box>
-                            <GridHeartbeats {...gridHeartbeatsProps} />
-                        </Box>
-                        <Box>
-                            <GridPools {...gridPoolsProps} />
-                        </Box>
-                        <Box>
-                            <GridNetworks {...gridNetworksProps} />
-                        </Box>
+                        <GridNodes {...gridNodesProps} />
+                        <GridObjects {...gridObjectsProps} />
+                        <GridHeartbeats {...gridHeartbeatsProps} />
+                        <GridPools {...gridPoolsProps} />
+                        <GridNetworks {...gridNetworksProps} />
                     </Box>
 
-                    <Box sx={{flex: 1, display: 'flex', flexDirection: 'column', gap: 3}}>
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 3,
+                        height: '100%',
+                        justifyContent: 'flex-start'
+                    }}>
                         <GridNamespaces {...gridNamespacesProps} />
                         <GridKinds {...gridKindsProps} />
                     </Box>
                 </Box>
-                <EventLogger eventTypes={CLUSTER_EVENT_TYPES} title="Cluster Events Logger" buttonLabel="Cluster Events"/>
+                <EventLogger eventTypes={CLUSTER_EVENT_TYPES} title="Cluster Events Logger"
+                             buttonLabel="Cluster Events"/>
             </Box>
         </Box>
     );

src/components/ClusterStatGrids.jsx

@@ -191,7 +191,6 @@ export const GridNamespaces = memo(({namespaceCount, namespaceSubtitle, onClick}
             value={namespaceCount}
             subtitle={subtitle}
             onClick={handleCardClick}
-            dynamicHeight
             isLoading={isCardLoading}
         />
     );
@@ -317,7 +316,6 @@ const NamespaceChip = memo(({namespace, status, isLoading, onClick, onLoadingCha
 export const GridHeartbeats = memo(({
                                         heartbeatCount,
                                         perHeartbeatStats = {},
-                                        nodeCount,
                                         onClick
                                     }) => {
     const [loadingId, setLoadingId] = useState('');
@@ -369,7 +367,6 @@ export const GridHeartbeats = memo(({
 
         const chips = [];
         for (const [baseId, {total, healthy}] of groups.entries()) {
-
             const isHealthy = (total === healthy);
             const isLoading = loadingId === baseId;
 
@@ -514,7 +511,9 @@ export const GridNetworks = memo(({networks, onClick}) => {
                     const usagePercentage = network.size
                         ? ((network.used / network.size) * 100).toFixed(1)
                         : 0;
-                    const isLowStorage = network.size ? ((network.free / network.size) * 100) < 10 : false;
+                    const free = network.size - network.used;
+                    const freePercent = network.size ? (free / network.size) * 100 : 100;
+                    const isLowStorage = freePercent < 10;
 
                     return (
                         <Box key={network.name} sx={{
@@ -547,7 +546,6 @@ export const GridNetworks = memo(({networks, onClick}) => {
             value={networks.length}
             subtitle={subtitle}
             onClick={handleCardClick}
-            dynamicHeight
             isLoading={isLoading}
         />
     );
@@ -597,7 +595,6 @@ export const GridKinds = memo(({kindCount, kindSubtitle, onClick}) => {
             value={kindCount}
             subtitle={subtitle}
             onClick={handleCardClick}
-            dynamicHeight
             isLoading={isCardLoading}
         />
     );