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

feat(dashboard): add live observability overview

Browse source
This commit is contained in:
vince 2026-06-19 03:38:38 +02:00
parent 2ff9f3c0ed
commit 2d2b905d18
27 changed files with 1417 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/lib/ui/components/DashboardFrame.svelte
View file

@ -50,9 +50,13 @@
<style>
.dashboard-frame {
display: grid;
box-sizing: border-box;
height: 100vh;
min-height: 100vh;
gap: var(--ui-space-3);
padding: clamp(0.75rem, 1.3vw, 1.25rem);
gap: 0.36rem;
grid-template-rows: auto auto minmax(0, 1fr) auto;
overflow: hidden;
padding: clamp(0.42rem, 0.65vw, 0.62rem);
background:
linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
rgba(0, 0, 0, 0.18);
@ -60,11 +64,12 @@
.dashboard-frame__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--ui-space-4);
grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 0.9fr);
gap: 0.5rem;
align-items: start;
border-bottom: var(--ui-border);
padding-bottom: var(--ui-space-3);
min-height: 5.35rem;
padding-bottom: 0.34rem;
}
.dashboard-frame__header p,
@ -85,32 +90,65 @@
max-width: 100%;
overflow-wrap: anywhere;
font-family: var(--ui-font-display);
font-size: clamp(2.45rem, 5vw, 4.2rem);
font-size: clamp(2.35rem, 3.65vw, 3.25rem);
font-weight: 850;
letter-spacing: 0;
line-height: 0.85;
line-height: 0.78;
white-space: nowrap;
}
.dashboard-frame__modules {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
justify-content: end;
gap: var(--ui-space-3);
gap: 0.5rem;
}
.dashboard-frame__panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--ui-space-3);
grid-template-columns: repeat(4, minmax(0, 1fr));
align-content: start;
gap: 0.36rem;
min-height: 0;
overflow: hidden;
}
.dashboard-frame__panels :global(.service-panel[data-model-id="runtime-health"]) {
grid-column: 1 / -1;
}
.dashboard-frame__panels
:global(.service-panel[data-model-id="runtime-health"] .panel__body) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 780px) {
.dashboard-frame {
height: auto;
min-height: 100vh;
overflow: visible;
}
.dashboard-frame__header {
grid-template-columns: 1fr;
}
.dashboard-frame__modules {
justify-content: stretch;
grid-template-columns: 1fr;
}
h1 {
white-space: normal;
}
.dashboard-frame__panels {
grid-template-columns: 1fr;
overflow: visible;
}
.dashboard-frame__panels
:global(.service-panel[data-model-id="runtime-health"] .panel__body) {
grid-template-columns: 1fr;
}
}
</style>