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 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}
</>
}

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

@ -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>
);