From 86c15d525344acf118c3b8e96004914a1b8100d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 21 Feb 2025 10:00:23 +0000
Subject: [PATCH] chore: improve UX in the Edge observability latency table
 (#9343)

https://linear.app/unleash/issue/2-3298/make-latency-table-clearer

Improves UX of the Edge observability latency table.


![image](https://github.com/user-attachments/assets/c8b36bdf-7bb5-4646-8176-41b8de70fa30)
---
 .../NetworkConnectedEdgeInstance.tsx          | 28 ++++-----
 .../NetworkConnectedEdgeInstanceLatency.tsx   | 61 +++++++++++++------
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstance.tsx b/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstance.tsx
index 3452d72d07..8f8feb8a2b 100644
--- a/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstance.tsx
+++ b/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstance.tsx
@@ -146,7 +146,7 @@ export const NetworkConnectedEdgeInstance = ({
     const memory = getMemory(instance);
     const archWarning = cpuPercentage === 'No usage' &&
         memory === 'No usage' && (
-            <p>Resource metrics are only available when running on Linux</p>
+            <p>Resource metrics are only available when running on Linux.</p>
         );
 
     return (
@@ -170,9 +170,17 @@ export const NetworkConnectedEdgeInstance = ({
                         <span>{instance.instanceId}</span>
                     </StyledDetailRow>
                     <StyledDetailRow>
-                        <strong>Upstream</strong>
+                        <strong>Upstream server</strong>
                         <span>{instance.connectedVia || 'Unleash'}</span>
                     </StyledDetailRow>
+                    <StyledDetailRow>
+                        <strong>Region</strong>
+                        <span>{instance.region || 'Unknown'}</span>
+                    </StyledDetailRow>
+                    <StyledDetailRow>
+                        <strong>Version</strong>
+                        <span>{instance.edgeVersion}</span>
+                    </StyledDetailRow>
                     <StyledDetailRow>
                         <strong>Status</strong>
                         <StyledBadge
@@ -195,18 +203,6 @@ export const NetworkConnectedEdgeInstance = ({
                         <strong>Last report</strong>
                         <span>{lastReport}</span>
                     </StyledDetailRow>
-                    <StyledDetailRow>
-                        <strong>App name</strong>
-                        <span>{instance.appName}</span>
-                    </StyledDetailRow>
-                    <StyledDetailRow>
-                        <strong>Region</strong>
-                        <span>{instance.region || 'Unknown'}</span>
-                    </StyledDetailRow>
-                    <StyledDetailRow>
-                        <strong>Version</strong>
-                        <span>{instance.edgeVersion}</span>
-                    </StyledDetailRow>
                     <StyledDetailRow>
                         <strong>CPU</strong>
                         <span>
@@ -216,7 +212,7 @@ export const NetworkConnectedEdgeInstance = ({
                                     <>
                                         <p>
                                             CPU average usage since instance
-                                            started
+                                            started.
                                         </p>
                                         {archWarning}
                                     </>
@@ -232,7 +228,7 @@ export const NetworkConnectedEdgeInstance = ({
                             <HelpIcon
                                 tooltip={
                                     <>
-                                        <p>Current memory usage</p>
+                                        <p>Current memory usage.</p>
                                         {archWarning}
                                     </>
                                 }
diff --git a/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstanceLatency.tsx b/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstanceLatency.tsx
index 45a6ee213d..169703eeaa 100644
--- a/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstanceLatency.tsx
+++ b/frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstanceLatency.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import type { ConnectedEdge } from 'interfaces/connectedEdge';
 
 const StyledTable = styled('table')(({ theme }) => ({
@@ -10,17 +11,20 @@ const StyledTable = styled('table')(({ theme }) => ({
     },
     '& tr': {
         textAlign: 'right',
-        '& > th:first-of-type,td:first-of-type': {
+        '& > th:first-of-type, td:first-of-type': {
             textAlign: 'left',
         },
     },
 }));
 
-const StyledUpstreamSection = styled('tr')(({ theme }) => ({
+const StyledSectionHeader = styled('tr')(({ theme }) => ({
     fontWeight: theme.fontWeight.bold,
-    borderBottom: `1px solid ${theme.palette.text.primary}`,
-    '& > td:first-of-type': {
+    '&&& > td': {
         paddingTop: theme.spacing(1),
+        '& > div': {
+            display: 'flex',
+            alignItems: 'center',
+        },
     },
 }));
 
@@ -41,19 +45,19 @@ export const NetworkConnectedEdgeInstanceLatency = ({
                 </tr>
             </thead>
             <tbody>
-                <tr>
-                    <td>Client Features</td>
-                    <td>{instance.clientFeaturesAverageLatencyMs}</td>
-                    <td>{instance.clientFeaturesP99LatencyMs}</td>
-                </tr>
-                <tr>
-                    <td>Frontend</td>
-                    <td>{instance.frontendApiAverageLatencyMs}</td>
-                    <td>{instance.frontendApiP99LatencyMs}</td>
-                </tr>
-                <StyledUpstreamSection>
-                    <td colSpan={3}>Upstream</td>
-                </StyledUpstreamSection>
+                <StyledSectionHeader>
+                    <td colSpan={3}>
+                        <div>
+                            Upstream{' '}
+                            <HelpIcon
+                                tooltip={
+                                    'Latency measured for requests sent from this Edge instance to the configured upstream, i.e. Unleash or another Edge instance.'
+                                }
+                                size='16px'
+                            />
+                        </div>
+                    </td>
+                </StyledSectionHeader>
                 <tr>
                     <td>Client Features</td>
                     <td>{instance.upstreamFeaturesAverageLatencyMs}</td>
@@ -69,6 +73,29 @@ export const NetworkConnectedEdgeInstanceLatency = ({
                     <td>{instance.upstreamEdgeAverageLatencyMs}</td>
                     <td>{instance.upstreamEdgeP99LatencyMs}</td>
                 </tr>
+                <StyledSectionHeader>
+                    <td colSpan={3}>
+                        <div>
+                            Downstream{' '}
+                            <HelpIcon
+                                tooltip={
+                                    'Latency measured when serving requests from clients, i.e. SDKs or other Edge instances.'
+                                }
+                                size='16px'
+                            />
+                        </div>
+                    </td>
+                </StyledSectionHeader>
+                <tr>
+                    <td>Client Features</td>
+                    <td>{instance.clientFeaturesAverageLatencyMs}</td>
+                    <td>{instance.clientFeaturesP99LatencyMs}</td>
+                </tr>
+                <tr>
+                    <td>Frontend</td>
+                    <td>{instance.frontendApiAverageLatencyMs}</td>
+                    <td>{instance.frontendApiP99LatencyMs}</td>
+                </tr>
             </tbody>
         </StyledTable>
     );