vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): scope dashboard tile hydration

Browse source
This commit is contained in:
vince 2026-06-20 12:34:52 +02:00
parent 2963c5dfde
commit 2a1d94195e
5 changed files with 124 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/web/src/App.tsx
View file

@ -21,7 +21,7 @@ import {
type DashboardTileReference =
| { kind: "telemetry"; id: string }
| { kind: "service"; id: string }
| { kind: "service"; groupId: string; id: string }
| { kind: "module"; id: string }
| { kind: "status"; stripId: string; id: string };
@ -295,7 +295,7 @@ function markHydratingItems(
serviceGroups: dashboard.serviceGroups.map((group) => ({
...group,
services: group.services.map((service) =>
hydratingItemIds.has(`service:${service.id}`)
hydratingItemIds.has(`service:${group.id}:${service.id}`)
? {
...service,
severity: "loading",
@ -325,14 +325,20 @@ function markHydratingItems(
};
}
function dashboardHydrationTiles(document: DashboardDocument): DashboardTileReference[] {
export function dashboardHydrationTiles(
document: DashboardDocument,
): DashboardTileReference[] {
const telemetry = document.telemetry
.filter((card) => card.datasource?.type === "external")
.map((card): DashboardTileReference => ({ kind: "telemetry", id: card.id }));
const services = document.serviceGroups.flatMap((group) =>
group.services
.filter((service) => service.datasource?.type === "external")
.map((service): DashboardTileReference => ({ kind: "service", id: service.id })),
.map((service): DashboardTileReference => ({
kind: "service",
groupId: group.id,
id: service.id,
})),
);
const modules = (document.modules || [])
.filter((module) =>
@ -342,7 +348,6 @@ function dashboardHydrationTiles(document: DashboardDocument): DashboardTileRefe
.map((module): DashboardTileReference => ({ kind: "module", id: module.id }));
const status = document.statusStrips.flatMap((strip) =>
strip.items
.filter((item) => item.id !== "auto-refresh")
.map((item): DashboardTileReference => ({
kind: "status",
stripId: strip.id,
@ -354,15 +359,17 @@ function dashboardHydrationTiles(document: DashboardDocument): DashboardTileRefe
}
function dashboardTileKey(tile: DashboardTileReference): string {
return tile.kind === "status"
? `${tile.kind}:${tile.stripId}:${tile.id}`
: `${tile.kind}:${tile.id}`;
if (tile.kind === "status") return `${tile.kind}:${tile.stripId}:${tile.id}`;
if (tile.kind === "service") return `${tile.kind}:${tile.groupId}:${tile.id}`;
return `${tile.kind}:${tile.id}`;
}
function dashboardTileUrl(tile: DashboardTileReference): string {
const parts = tile.kind === "status"
? ["api", "dashboard", "tile", tile.kind, tile.stripId, tile.id]
: ["api", "dashboard", "tile", tile.kind, tile.id];
: tile.kind === "service"
? ["api", "dashboard", "tile", tile.kind, tile.groupId, tile.id]
: ["api", "dashboard", "tile", tile.kind, tile.id];
return `/${parts.map(encodeURIComponent).join("/")}`;
}
@ -380,13 +387,16 @@ function applyDashboardTile(
}
if (response.tile.kind === "service") {
const tile = response.tile;
return {
...document,
serviceGroups: document.serviceGroups.map((group) => ({
...group,
services: group.services.map((service) =>
service.id === response.tile.id ? response.item as ServiceEntry : service,
),
services: group.id === tile.groupId
? group.services.map((service) =>
service.id === tile.id ? response.item as ServiceEntry : service,
)
: group.services,
})),
};
}