Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

chore: improve UX in the Edge observability latency table (#9343)

Browse Source 
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)
This commit is contained in:
Nuno Góis 2025-02-21 10:00:23 +00:00 committed by GitHub
parent 17d3f67ec1
commit 86c15d5253
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstance.tsx
View File

@ -146,7 +146,7 @@ export const NetworkConnectedEdgeInstance = ({
const memory = getMemory(instance); const memory = getMemory(instance);
const archWarning = cpuPercentage === 'No usage' && const archWarning = cpuPercentage === 'No usage' &&
memory === '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 ( return (
@ -170,9 +170,17 @@ export const NetworkConnectedEdgeInstance = ({
<span>{instance.instanceId}</span> <span>{instance.instanceId}</span>
</StyledDetailRow> </StyledDetailRow>
<StyledDetailRow> <StyledDetailRow>
<strong>Upstream</strong> <strong>Upstream server</strong>
<span>{instance.connectedVia || 'Unleash'}</span> <span>{instance.connectedVia || 'Unleash'}</span>
</StyledDetailRow> </StyledDetailRow>
<StyledDetailRow>
<strong>Region</strong>
<span>{instance.region || 'Unknown'}</span>
</StyledDetailRow>
<StyledDetailRow>
<strong>Version</strong>
<span>{instance.edgeVersion}</span>
</StyledDetailRow>
<StyledDetailRow> <StyledDetailRow>
<strong>Status</strong> <strong>Status</strong>
<StyledBadge <StyledBadge
@ -195,18 +203,6 @@ export const NetworkConnectedEdgeInstance = ({
<strong>Last report</strong> <strong>Last report</strong>
<span>{lastReport}</span> <span>{lastReport}</span>
</StyledDetailRow> </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> <StyledDetailRow>
<strong>CPU</strong> <strong>CPU</strong>
<span> <span>
@ -216,7 +212,7 @@ export const NetworkConnectedEdgeInstance = ({
<> <>
<p> <p>
CPU average usage since instance CPU average usage since instance
started started.
</p> </p>
{archWarning} {archWarning}
</> </>
@ -232,7 +228,7 @@ export const NetworkConnectedEdgeInstance = ({
<HelpIcon <HelpIcon
tooltip={ tooltip={
<> <>
<p>Current memory usage</p> <p>Current memory usage.</p>
{archWarning} {archWarning}
</> </>
} }

61
frontend/src/component/admin/network/NetworkConnectedEdges/NetworkConnectedEdgeInstanceLatency.tsx
View File

@ -1,4 +1,5 @@
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import type { ConnectedEdge } from 'interfaces/connectedEdge'; import type { ConnectedEdge } from 'interfaces/connectedEdge';
const StyledTable = styled('table')(({ theme }) => ({ const StyledTable = styled('table')(({ theme }) => ({
@ -10,17 +11,20 @@ const StyledTable = styled('table')(({ theme }) => ({
}, },
'& tr': { '& tr': {
textAlign: 'right', textAlign: 'right',
'& > th:first-of-type,td:first-of-type': { '& > th:first-of-type, td:first-of-type': {
textAlign: 'left', textAlign: 'left',
}, },
}, },
})); }));
const StyledUpstreamSection = styled('tr')(({ theme }) => ({ const StyledSectionHeader = styled('tr')(({ theme }) => ({
fontWeight: theme.fontWeight.bold, fontWeight: theme.fontWeight.bold,
borderBottom: `1px solid ${theme.palette.text.primary}`, '&&& > td': {
'& > td:first-of-type': {
paddingTop: theme.spacing(1), paddingTop: theme.spacing(1),
'& > div': {
display: 'flex',
alignItems: 'center',
},
}, },
})); }));
@ -41,19 +45,19 @@ export const NetworkConnectedEdgeInstanceLatency = ({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <StyledSectionHeader>
<td>Client Features</td> <td colSpan={3}>
<td>{instance.clientFeaturesAverageLatencyMs}</td> <div>
<td>{instance.clientFeaturesP99LatencyMs}</td> Upstream{' '}
</tr> <HelpIcon
<tr> tooltip={
<td>Frontend</td> 'Latency measured for requests sent from this Edge instance to the configured upstream, i.e. Unleash or another Edge instance.'
<td>{instance.frontendApiAverageLatencyMs}</td> }
<td>{instance.frontendApiP99LatencyMs}</td> size='16px'
</tr> />
<StyledUpstreamSection> </div>
<td colSpan={3}>Upstream</td> </td>
</StyledUpstreamSection> </StyledSectionHeader>
<tr> <tr>
<td>Client Features</td> <td>Client Features</td>
<td>{instance.upstreamFeaturesAverageLatencyMs}</td> <td>{instance.upstreamFeaturesAverageLatencyMs}</td>
@ -69,6 +73,29 @@ export const NetworkConnectedEdgeInstanceLatency = ({
<td>{instance.upstreamEdgeAverageLatencyMs}</td> <td>{instance.upstreamEdgeAverageLatencyMs}</td>
<td>{instance.upstreamEdgeP99LatencyMs}</td> <td>{instance.upstreamEdgeP99LatencyMs}</td>
</tr> </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> </tbody>
</StyledTable> </StyledTable>
); );