refactor(Metrics): ♻️ Polish metric tables

skupperproject · Dec 16, 2024 · be7e173 · be7e173
1 parent 3ebfe92
commit be7e173
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 42 deletions.
diff --git a/__tests__/__snapshots__/Metric.spec.tsx.snap b/__tests__/__snapshots__/Metric.spec.tsx.snap
@@ -380,7 +380,7 @@ exports[`Metrics Component renders correctly 1`] = `
         >
           <div
             class="pf-v6-c-card__body"
-            style="min-height: 450px;"
+            style="min-height: 450px; display: grid;"
           >
             <div
               style="position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1;"
@@ -480,7 +480,7 @@ exports[`Metrics Component renders correctly 1`] = `
     >
       <div
         aria-label="Tcp latency Out"
-        class="pf-v6-c-card"
+        class="pf-v6-c-card pf-m-full-height"
         data-ouia-component-id="OUIA-Generated-Card-3"
         data-ouia-component-type="PF6/Card"
         data-ouia-safe="true"
@@ -544,7 +544,7 @@ exports[`Metrics Component renders correctly 1`] = `
     >
       <div
         aria-label="Tcp latency In"
-        class="pf-v6-c-card"
+        class="pf-v6-c-card pf-m-full-height"
         data-ouia-component-id="OUIA-Generated-Card-4"
         data-ouia-component-type="PF6/Card"
         data-ouia-safe="true"

diff --git a/src/pages/shared/Metrics/components/LatencyCharts.tsx b/src/pages/shared/Metrics/components/LatencyCharts.tsx
@@ -1,7 +1,7 @@
 import { FC, memo } from 'react';
 
 import { ChartThemeColor } from '@patternfly/react-charts/victory';
-import { Grid, GridItem, Title } from '@patternfly/react-core';
+import { Divider, Flex, FlexItem, Stack, StackItem, Title } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { Labels } from '../../../../config/labels';
@@ -20,49 +20,58 @@ const LatencyCharts: FC<{
   bucketsData: LatencyBucketDistributionData[];
   summary: LatencyBucketSummary[];
 }> = memo(({ latenciesData, bucketsData, summary }) => (
-  <Grid hasGutter>
-    <GridItem span={12}>
+  <Stack hasGutter>
+    <StackItem>
       <Title headingLevel="h4">{Labels.PercentileOverTime}</Title>
       <SkChartArea
         formatY={formatLatency}
         themeColor={ChartThemeColor.multi}
         legendLabels={latenciesData.map(({ label }) => label)}
         data={latenciesData.map(({ data }) => data)}
       />
-    </GridItem>
+    </StackItem>
 
-    <GridItem md={12} xl={8}>
-      <SkChartBar
-        themeColor={ChartThemeColor.multi}
-        legendLabels={bucketsData.map(({ label }) => label)}
-        data={bucketsData.map(({ data }) => data)}
-      />
-    </GridItem>
+    <br />
+
+    <StackItem>
+      <Flex direction={{ xl: 'row', default: 'column' }} style={{ alignItems: 'center' }}>
+        <FlexItem flex={{ default: 'flex_2' }}>
+          <Title headingLevel="h4">{Labels.Buckets}</Title>
+          <SkChartBar
+            themeColor={ChartThemeColor.multi}
+            legendLabels={bucketsData.map(({ label }) => label)}
+            data={bucketsData.map(({ data }) => data)}
+          />
+        </FlexItem>
+
+        <Divider orientation={{ default: 'vertical' }} />
 
-    <GridItem md={12} xl={4}>
-      <Table borders={false} variant="compact">
-        <Thead noWrap>
-          <Tr>
-            <Th>Threshold</Th>
-            <Th>Below</Th>
-            <Th>Above</Th>
-          </Tr>
-        </Thead>
+        <FlexItem flex={{ default: 'flex_1' }}>
+          <Table borders={false} variant="compact">
+            <Thead noWrap>
+              <Tr>
+                <Th>Threshold</Th>
+                <Th>Below</Th>
+                <Th>Above</Th>
+              </Tr>
+            </Thead>
 
-        <Tbody>
-          {summary.map((row, index) => (
-            <Tr key={`${row.bound}-${index}`}>
-              <Td>
-                <Title headingLevel="h6">{row.bound}</Title>
-              </Td>
-              <Td>{`${formatNumber(row.lessThanCount)} (${row.lessThanPerc}%)`}</Td>
-              <Td modifier="fitContent">{`${formatNumber(row.greaterThanCount)}`}</Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
-    </GridItem>
-  </Grid>
+            <Tbody>
+              {summary.map((row, index) => (
+                <Tr key={`${row.bound}-${index}`}>
+                  <Td>
+                    <Title headingLevel="h6">{row.bound}</Title>
+                  </Td>
+                  <Td>{`${formatNumber(row.lessThanCount)} (${row.lessThanPerc}%)`}</Td>
+                  <Td modifier="fitContent">{`${formatNumber(row.greaterThanCount)}`}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </FlexItem>
+      </Flex>
+    </StackItem>
+  </Stack>
 ));
 
 export default LatencyCharts;
diff --git a/src/pages/shared/Metrics/components/RequestCharts.tsx b/src/pages/shared/Metrics/components/RequestCharts.tsx
@@ -13,7 +13,7 @@ const RequestCharts: FC<{
   requestRateData: RequestMetrics[];
   requestPerf: { avg: number; max: number; current: number; label: string }[] | undefined;
 }> = memo(({ requestRateData, requestPerf }) => (
-  <Flex direction={{ xl: 'row', md: 'column' }}>
+  <Flex direction={{ xl: 'row', default: 'column' }}>
     <FlexItem flex={{ default: 'flex_2' }}>
       <SkChartArea
         data={requestRateData.map(({ data }) => data)}
@@ -25,7 +25,7 @@ const RequestCharts: FC<{
 
     <Divider orientation={{ default: 'vertical' }} />
     <Flex flex={{ default: 'flex_1' }} alignSelf={{ default: 'alignSelfStretch' }}>
-      <Table borders={false} variant="compact">
+      <Table borders={false}>
         <Thead noWrap>
           <Tr>
             <Th>{Labels.Method}</Th>

diff --git a/src/pages/shared/Metrics/components/ResponseCharts.tsx b/src/pages/shared/Metrics/components/ResponseCharts.tsx
@@ -57,7 +57,7 @@ const ResponseCharts: FC<{ responseRateData: ResponseMetrics | null; responseDat
       {/* Errors distribution */}
       <Flex
         alignItems={{ default: 'alignItemsStretch', md: 'alignItemsStretch' }}
-        direction={{ md: 'column', xl: 'row' }}
+        direction={{ xl: 'row', default: 'column' }}
       >
         <FlexItem flex={{ default: 'flex_1' }}>
           <SkChartArea

diff --git a/src/pages/shared/Metrics/components/TcpConnection.tsx b/src/pages/shared/Metrics/components/TcpConnection.tsx
@@ -87,7 +87,7 @@ const TcpConnection: FC<TcpConnectionProps> = function ({
           {!isLoading && connections && (
             <>
               {isRefetching && <SkIsLoading />}
-              <Flex direction={{ xl: 'row', md: 'column' }}>
+              <Flex direction={{ xl: 'row', default: 'column' }}>
                 <FlexItem flex={{ default: 'flex_2' }}>
                   {connections.liveConnectionsSerie && (
                     <SkChartArea data={connections.liveConnectionsSerie} legendLabels={[`${Labels.OpenConnections}`]} />

diff --git a/src/pages/shared/Metrics/components/TrafficCharts.tsx b/src/pages/shared/Metrics/components/TrafficCharts.tsx
@@ -14,7 +14,7 @@ import { MetricsController } from '../services';
 
 const TrafficCharts: FC<{ byteRateData: ByteRateMetrics; colorScale?: string[] }> = memo(
   ({ byteRateData, colorScale }) => (
-    <Flex direction={{ xl: 'row', md: 'column' }} style={{ alignItems: 'center' }}>
+    <Flex direction={{ xl: 'row', default: 'column' }} style={{ alignItems: 'center' }}>
       <FlexItem flex={{ default: 'flex_2' }}>
         <Flex>
           <SkChartArea
@@ -35,7 +35,9 @@ const TrafficCharts: FC<{ byteRateData: ByteRateMetrics; colorScale?: string[] }
           />
         </Flex>
       </FlexItem>
+
       <Divider orientation={{ default: 'vertical' }} />
+
       <FlexItem flex={{ xl: 'flex_1' }}>
         <Flex>
           <Table borders={false}>