Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make a dashboard its widgets: drop the pages and sections nobody drew

Browse Source
This commit is contained in:
stroblme
2026-08-25 12:30:22 +02:00
parent 2840cc8e2b
commit 7ff29ca939
17 changed files with 273 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/fluksio/flow/dashboards.py
+68 -39
View File
@@ -374,32 +374,57 @@ class WidgetDef(BaseModel):
return self
class SectionDef(BaseModel):
"""A grid of widgets under a heading."""
id: str
title: str = ""
widgets: list[WidgetDef] = Field(default_factory=list)
@field_validator("id")
@classmethod
def _check_id(cls, value: str) -> str:
return _validate_name(value)
def _placement(widget: dict[str, Any]) -> dict[str, Any]:
"""Where a stored widget sits, by the widest breakpoint it names."""
layout = widget.get("layout") or {}
for key in ("lg", "md", "sm"):
box = layout.get(key)
if isinstance(box, dict):
return dict(box)
return {}
class PageDef(BaseModel):
"""One tab of a dashboard."""
def _flatten_pages(pages: list[Any]) -> list[dict[str, Any]]:
"""The widgets of a document written as pages and sections.
id: str
title: str = ""
#: A lucide icon name, or empty.
icon: str = ""
sections: list[SectionDef] = Field(default_factory=list)
Only the first page: no UI ever wrote a second one, and a panel carries
several whole dashboards instead. Its sections are stacked into one grid
the way the viewer always drew them, so a document that placed its widgets
keeps the arrangement it had rather than piling everything at row zero.
"""
if not pages or not isinstance(pages[0], dict):
return []
sections = [s for s in (pages[0].get("sections") or []) if isinstance(s, dict)]
lists = [
[w for w in (s.get("widgets") or []) if isinstance(w, dict)] for s in sections
]
flat = [w for widgets in lists for w in widgets]
placed = any(
(_placement(w).get("x") or 0) > 0 or (_placement(w).get("y") or 0) > 0
for w in flat
)
if len(sections) < 2 or not placed:
return flat
@field_validator("id")
@classmethod
def _check_id(cls, value: str) -> str:
return _validate_name(value)
stacked: list[dict[str, Any]] = []
offset = 0
for widgets in lists:
bottom = 0
for widget in widgets:
box = _placement(widget)
y = max(0, int(box.get("y") or 0))
bottom = max(bottom, y + max(1, int(box.get("h") or 2)))
if offset:
widget = {
**widget,
"layout": {
**(widget.get("layout") or {}),
"lg": {**box, "y": y + offset},
},
}
stacked.append(widget)
offset += bottom
return stacked
class DashboardDef(BaseModel):
@@ -419,7 +444,11 @@ class DashboardDef(BaseModel):
#: A lucide icon name, drawn on the panel rail; empty falls back to two
#: letters of the title.
icon: str = ""
pages: list[PageDef] = Field(default_factory=list)
#: One grid. Pages and sections were in the schema and never in the UI —
#: only the first page was ever read and its sections were drawn as one —
#: so a dashboard is its widgets, and several dashboards on one device is
#: what a panel is for.
widgets: list[WidgetDef] = Field(default_factory=list)
#: Settings the whole dashboard carries, by name — see ``SettingDef``. The
#: one channel a dashboard consumes as a dashboard rather than as a set of
#: tiles, so a screen on a wall can be told things nobody standing at it
@@ -431,6 +460,21 @@ class DashboardDef(BaseModel):
#: never stored — the draft file's existence is the only record of it.
has_draft: bool = False
@model_validator(mode="before")
@classmethod
def _flatten(cls, data: Any) -> Any:
"""Read a document written as pages and sections as one grid.
Stored dashboards live in each installation's git repository, so the
old shape is normalised on the way in rather than migrated: an
untouched document keeps working, and the next save writes it flat.
"""
if isinstance(data, dict) and "widgets" not in data and "pages" in data:
pages = data.get("pages") or []
data = {k: v for k, v in data.items() if k != "pages"}
data["widgets"] = _flatten_pages(pages)
return data
@field_validator("name")
@classmethod
def _check_name(cls, value: str) -> str:
@@ -456,10 +500,6 @@ class DashboardDef(BaseModel):
)
return self
@property
def widgets(self) -> list[WidgetDef]:
return [w for p in self.pages for s in p.sections for w in s.widgets]
@property
def setting_messages(self) -> list[str]:
"""Every message a bound setting reads. Empty for a static dashboard."""
@@ -471,7 +511,6 @@ class DashboardSummary(BaseModel):
name: str
title: str = ""
page_count: int = 0
widget_count: int = 0
has_draft: bool = False
#: Of the working copy, so publishing from a list needs no second read.
@@ -533,7 +572,6 @@ class DashboardStore:
DashboardSummary(
name=defn.name,
title=defn.title,
page_count=len(defn.pages),
widget_count=len(defn.widgets),
has_draft=defn.has_draft,
version=defn.version,
@@ -747,7 +785,6 @@ def default_dashboard(name: str) -> DashboardDef:
return DashboardDef(
name=name,
title=name.replace("_", " ").capitalize(),
pages=[PageDef(id="main", title="Overview", sections=[SectionDef(id="main")])],
)
@@ -840,13 +877,7 @@ def results_dashboard(flow: FlowDef) -> DashboardDef:
return DashboardDef(
name=results_name(flow.name),
title=f"{flow.title or flow.name} results",
pages=[
PageDef(
id="main",
title="Results",
sections=[SectionDef(id="main", widgets=widgets)],
)
],
widgets=widgets,
)
@@ -865,9 +896,7 @@ __all__ = [
"DashboardStore",
"DashboardSummary",
"DashboardsPublic",
"PageDef",
"Placement",
"SectionDef",
"SettingDef",
"WidgetDef",
"default_dashboard",
backend/tests/api/routes/test_panels.py
+5 -16
View File
@@ -243,7 +243,7 @@ def _dashboard_with(
) -> None:
"""A published dashboard carrying these widgets."""
saved = _dashboard(client, headers, name)
saved["pages"] = [{"id": "main", "sections": [{"id": "main", "widgets": widgets}]}]
saved["widgets"] = widgets
written = client.put(f"{DASHBOARDS}/{name}", headers=headers, json=saved)
assert written.status_code == 200, written.text
published = client.post(
@@ -706,22 +706,11 @@ def test_a_panels_socket_carries_only_what_it_draws(
)
saved = _dashboard(client, superuser_token_headers, "panel_socket")
saved["pages"] = [
saved["widgets"] = [
{
"id": "main",
"title": "Overview",
"sections": [
{
"id": "main",
"widgets": [
{
"id": "w1",
"type": "stat",
"config": {"message": "house.kitchen.temperature"},
}
],
}
],
"id": "w1",
"type": "stat",
"config": {"message": "house.kitchen.temperature"},
}
]
written = client.put(
backend/tests/flow/test_dashboards.py
+52 -25
View File
@@ -6,8 +6,6 @@ from fluksio.flow.dashboards import (
DashboardDef,
DashboardNotFound,
DashboardStore,
PageDef,
SectionDef,
SettingDef,
WidgetDef,
default_dashboard,
@@ -40,7 +38,7 @@ def test_a_dashboard_survives_a_round_trip(store: DashboardStore):
read = store.read("house")
assert read.name == "house"
assert [p.id for p in read.pages] == ["main"]
assert read.widgets == []
assert read.version == saved.version
@@ -138,20 +136,10 @@ def test_the_deepest_chart_decides_how_much_past_is_kept(store: DashboardStore):
store.write(
DashboardDef(
name="house",
pages=[
PageDef(
id="main",
sections=[
SectionDef(id="a", widgets=[chart("heating.temp", 400)]),
SectionDef(
id="b",
widgets=[
chart("heating.temp", 900),
chart("solar.watts", 100),
],
),
],
)
widgets=[
chart("heating.temp", 400),
chart("heating.temp", 900),
chart("solar.watts", 100),
],
)
)
@@ -163,14 +151,7 @@ def test_a_chart_cannot_ask_for_an_unbounded_series(store: DashboardStore):
store.write(
DashboardDef(
name="house",
pages=[
PageDef(
id="main",
sections=[
SectionDef(id="a", widgets=[chart("heating.temp", 10**9)])
],
)
],
widgets=[chart("heating.temp", 10**9)],
)
)
@@ -514,3 +495,49 @@ def test_a_chart_of_runs_must_say_which_runs_and_which_metric():
runs_chart(metric="study.loss")
with pytest.raises(ValueError, match="between 1 and 5"):
runs_chart(metric="study.loss", flow="study", latest=9)
def test_a_document_written_as_pages_is_read_as_one_grid():
"""Stored dashboards live in each installation's repository.
So the old shape is normalised on the way in rather than migrated, and a
placed second section keeps its arrangement instead of piling onto the
first — which is how the viewer always drew it.
"""
old = {
"name": "house",
"pages": [
{
"id": "main",
"sections": [
{
"id": "a",
"widgets": [
{
"id": "top",
"type": "stat",
"layout": {"lg": {"x": 0, "y": 0, "w": 3, "h": 2}},
}
],
},
{
"id": "b",
"widgets": [
{
"id": "under",
"type": "stat",
"layout": {"lg": {"x": 0, "y": 1, "w": 3, "h": 2}},
}
],
},
],
}
],
}
read = DashboardDef.model_validate(old)
assert [w.id for w in read.widgets] == ["top", "under"]
# The first section is two rows deep, so the second one starts under it.
assert read.widgets[1].layout["lg"].y == 3
assert "pages" not in read.model_dump()
backend/tests/flow/test_provenance.py
+19 -31
View File
@@ -8,8 +8,6 @@ control or another flow, it pulses a node that did nothing at all.
from fluksio.flow.dashboards import (
DashboardDef,
DashboardStore,
PageDef,
SectionDef,
WidgetDef,
)
from fluksio.flow.events import EventBus
@@ -104,35 +102,25 @@ def test_the_widgets_wired_into_a_flow_are_reported(tmp_path):
DashboardDef(
name="panel",
title="Panel",
pages=[
PageDef(
id="main",
sections=[
SectionDef(
id="main",
widgets=[
WidgetDef(
id="setpoint",
type="slider",
title="Setpoint",
config={"target": "house.setpoint"},
),
WidgetDef(
id="reading",
type="stat",
title="Reading",
config={"message": "house.temp"},
),
# Another flow's message: not this flow's business.
WidgetDef(
id="elsewhere",
type="stat",
config={"message": "garage.temp"},
),
],
)
],
)
widgets=[
WidgetDef(
id="setpoint",
type="slider",
title="Setpoint",
config={"target": "house.setpoint"},
),
WidgetDef(
id="reading",
type="stat",
title="Reading",
config={"message": "house.temp"},
),
# Another flow's message: not this flow's business.
WidgetDef(
id="elsewhere",
type="stat",
config={"message": "garage.temp"},
),
],
)
)
frontend/scripts/capture-screenshots.mjs
+6 -2
View File
@@ -124,7 +124,9 @@ async function captureRuns(page, dir) {
// watched on, showing finished ones. This is the seam the feature exists for.
const picked = await page
.getByTestId("run-link")
.evaluateAll((links) => links.slice(0, 2).map((a) => a.getAttribute("href")))
.evaluateAll((links) =>
links.slice(0, 2).map((a) => a.getAttribute("href")),
)
const ids = picked
.map((href) => (href || "").split("/").pop())
.filter(Boolean)
@@ -132,7 +134,9 @@ async function captureRuns(page, dir) {
const apiUrl = APP_URL.replace("//app.", "//api.")
const results = await page.evaluate(async (base) => {
const answer = await fetch(`${base}/api/v1/dashboards/`, {
headers: { Authorization: `Bearer ${localStorage.getItem("access_token")}` },
headers: {
Authorization: `Bearer ${localStorage.getItem("access_token")}`,
},
})
if (!answer.ok) return null
const body = await answer.json()
frontend/src/client/schemas.gen.ts
+6 -121
View File
@@ -428,12 +428,12 @@ export const DashboardDef_InputSchema = {
title: 'Icon',
default: ''
},
pages: {
widgets: {
items: {
'$ref': '#/components/schemas/PageDef-Input'
'$ref': '#/components/schemas/WidgetDef'
},
type: 'array',
title: 'Pages'
title: 'Widgets'
},
settings: {
additionalProperties: {
@@ -496,12 +496,12 @@ export const DashboardDef_OutputSchema = {
title: 'Icon',
default: ''
},
pages: {
widgets: {
items: {
'$ref': '#/components/schemas/PageDef-Output'
'$ref': '#/components/schemas/WidgetDef'
},
type: 'array',
title: 'Pages'
title: 'Widgets'
},
settings: {
additionalProperties: {
@@ -538,11 +538,6 @@ export const DashboardSummarySchema = {
title: 'Title',
default: ''
},
page_count: {
type: 'integer',
title: 'Page Count',
default: 0
},
widget_count: {
type: 'integer',
title: 'Widget Count',
@@ -2048,66 +2043,6 @@ export const OAuthClientRegisterSchema = {
description: 'RFC 7591 dynamic client registration request.'
} as const;
export const PageDef_InputSchema = {
properties: {
id: {
type: 'string',
title: 'Id'
},
title: {
type: 'string',
title: 'Title',
default: ''
},
icon: {
type: 'string',
title: 'Icon',
default: ''
},
sections: {
items: {
'$ref': '#/components/schemas/SectionDef-Input'
},
type: 'array',
title: 'Sections'
}
},
type: 'object',
required: ['id'],
title: 'PageDef',
description: 'One tab of a dashboard.'
} as const;
export const PageDef_OutputSchema = {
properties: {
id: {
type: 'string',
title: 'Id'
},
title: {
type: 'string',
title: 'Title',
default: ''
},
icon: {
type: 'string',
title: 'Icon',
default: ''
},
sections: {
items: {
'$ref': '#/components/schemas/SectionDef-Output'
},
type: 'array',
title: 'Sections'
}
},
type: 'object',
required: ['id'],
title: 'PageDef',
description: 'One tab of a dashboard.'
} as const;
export const PairRequestSchema = {
properties: {
code: {
@@ -2676,56 +2611,6 @@ export const SecretValueSchema = {
title: 'SecretValue'
} as const;
export const SectionDef_InputSchema = {
properties: {
id: {
type: 'string',
title: 'Id'
},
title: {
type: 'string',
title: 'Title',
default: ''
},
widgets: {
items: {
'$ref': '#/components/schemas/WidgetDef'
},
type: 'array',
title: 'Widgets'
}
},
type: 'object',
required: ['id'],
title: 'SectionDef',
description: 'A grid of widgets under a heading.'
} as const;
export const SectionDef_OutputSchema = {
properties: {
id: {
type: 'string',
title: 'Id'
},
title: {
type: 'string',
title: 'Title',
default: ''
},
widgets: {
items: {
'$ref': '#/components/schemas/WidgetDef'
},
type: 'array',
title: 'Widgets'
}
},
type: 'object',
required: ['id'],
title: 'SectionDef',
description: 'A grid of widgets under a heading.'
} as const;
export const SeriesAnswerSchema = {
properties: {
metric: {
frontend/src/client/types.gen.ts
+2 -41
View File
@@ -116,7 +116,7 @@ export type DashboardDef_Input = {
canvas_width?: number;
canvas_height?: number;
icon?: string;
pages?: Array<PageDef_Input>;
widgets?: Array<WidgetDef>;
settings?: {
[key: string]: SettingDef;
};
@@ -134,7 +134,7 @@ export type DashboardDef_Output = {
canvas_width?: number;
canvas_height?: number;
icon?: string;
pages?: Array<PageDef_Output>;
widgets?: Array<WidgetDef>;
settings?: {
[key: string]: SettingDef;
};
@@ -153,7 +153,6 @@ export type DashboardsPublic = {
export type DashboardSummary = {
name: string;
title?: string;
page_count?: number;
widget_count?: number;
has_draft?: boolean;
version?: number;
@@ -750,26 +749,6 @@ export type OAuthClientRegister = {
token_endpoint_auth_method?: (string | null);
};
/**
* One tab of a dashboard.
*/
export type PageDef_Input = {
id: string;
title?: string;
icon?: string;
sections?: Array<SectionDef_Input>;
};
/**
* One tab of a dashboard.
*/
export type PageDef_Output = {
id: string;
title?: string;
icon?: string;
sections?: Array<SectionDef_Output>;
};
export type PairRequest = {
code: string;
};
@@ -947,24 +926,6 @@ export type SecretValue = {
value: string;
};
/**
* A grid of widgets under a heading.
*/
export type SectionDef_Input = {
id: string;
title?: string;
widgets?: Array<WidgetDef>;
};
/**
* A grid of widgets under a heading.
*/
export type SectionDef_Output = {
id: string;
title?: string;
widgets?: Array<WidgetDef>;
};
export type SeriesAnswer = {
metric: string;
lines?: Array<MetricSeries>;
frontend/src/components/Common/DashboardMosaic.tsx
+13 -19
View File
@@ -68,32 +68,26 @@ type Block = {
/**
* The first page's widgets as one grid.
*
* Sections are separate grids on the real thing, each starting at its own row
* zero, so each is pushed down past the one before it to keep them apart here.
*/
function blocksOf(dashboard: DashboardDef_Output): {
blocks: Block[]
rows: number
} {
const blocks: Block[] = []
let offset = 0
for (const section of (dashboard.pages ?? [])[0]?.sections ?? []) {
let bottom = 0
for (const widget of section.widgets ?? []) {
const { x = 0, y = 0, w = 3, h = 2 } = placement(widget)
blocks.push({
id: widget.id,
type: widget.type,
x: Math.max(0, x),
y: Math.max(0, y) + offset,
w: Math.max(1, w),
h: Math.max(1, h),
})
bottom = Math.max(bottom, Math.max(0, y) + Math.max(1, h))
}
offset += bottom
let rows = 0
for (const widget of dashboard.widgets ?? []) {
const { x = 0, y = 0, w = 3, h = 2 } = placement(widget)
blocks.push({
id: widget.id,
type: widget.type,
x: Math.max(0, x),
y: Math.max(0, y),
w: Math.max(1, w),
h: Math.max(1, h),
})
rows = Math.max(rows, Math.max(0, y) + Math.max(1, h))
}
return { blocks, rows: Math.max(1, offset) }
return { blocks, rows: Math.max(1, rows) }
}
/**
frontend/src/components/Dashboard/DashboardEditor.tsx
+87 -120
View File
@@ -59,14 +59,11 @@ import {
columnsOf,
type Dashboard,
DashboardView,
flatWidgets,
GRID_GAP,
isPlaced,
pagesOf,
placement,
rowHeightOf,
rowsOf,
sectionsOf,
widgetsOf,
} from "./DashboardView"
import { PanelRail } from "./PanelRail"
@@ -147,13 +144,7 @@ const INTERACTIVE =
"button, a, input, select, textarea, [role='switch'], [role='combobox'], [role='slider'], .react-resizable-handle, .widget-grip"
function nextId(dashboard: DashboardDef_Output, type: string): string {
const taken = new Set(
pagesOf(dashboard).flatMap((page) =>
sectionsOf(page).flatMap((section) =>
widgetsOf(section).map((widget) => widget.id),
),
),
)
const taken = new Set(widgetsOf(dashboard).map((widget) => widget.id))
let candidate = type
for (let i = 2; taken.has(candidate); i++) candidate = `${type}${i}`
return candidate
@@ -323,34 +314,10 @@ export function DashboardEditor({
// a save in flight is still "no unpublished changes" until it lands.
const hasDraft = Boolean(dashboard.has_draft)
const columns = columnsOf(draft)
const page = pagesOf(draft)[0]
// Every widget the panel shows, not just the first section's — a document
// written with several sections is one arrangement here, as it is there.
const widgets = page ? flatWidgets(page) : []
const widgets = widgetsOf(draft)
const updateWidgets = (next: WidgetDef[]) => {
if (!page) return
commit({
...draft,
// Only this page is rewritten: a document carrying pages the editor
// does not show round-trips them untouched.
pages: pagesOf(draft).map((candidate) =>
candidate.id !== page.id
? candidate
: {
...candidate,
// One canvas, one grid: what several sections were read as is
// written back as one, which is also what keeps their row
// offsets from being applied a second time on the next read.
sections: [
{
...(sectionsOf(candidate)[0] ?? { id: "main" }),
widgets: next,
},
],
},
),
})
commit({ ...draft, widgets: next })
}
const addWidget = (type: WidgetKind) => {
@@ -468,91 +435,91 @@ export function DashboardEditor({
/>
)
const body = !page ? (
<p className="text-sm text-muted-foreground">
This dashboard has no pages yet.
</p>
) : edit && widgets.length === 0 ? (
<p className="text-sm text-muted-foreground" data-testid="dashboard-empty">
Nothing on this page yet. Add a widget from the bar below.
</p>
) : stacked ? (
// One column at the viewport's width. Edit mode still picks a widget and
// opens its settings; only the arrangement is missing.
<div
data-look={root["data-look"]}
data-touch={root["data-touch"]}
data-palette={root["data-palette"]}
className={cn(
"h-full overflow-y-auto bg-background text-foreground",
root.className,
)}
style={root.style}
>
<DashboardView
const body =
edit && widgets.length === 0 ? (
<p
className="text-sm text-muted-foreground"
data-testid="dashboard-empty"
>
Nothing on this dashboard yet. Add a widget from the bar below.
</p>
) : stacked ? (
// One column at the viewport's width. Edit mode still picks a widget and
// opens its settings; only the arrangement is missing.
<div
data-look={root["data-look"]}
data-touch={root["data-touch"]}
data-palette={root["data-palette"]}
className={cn(
"h-full overflow-y-auto bg-background text-foreground",
root.className,
)}
style={root.style}
>
<DashboardView
dashboard={draft}
stacked
renderWidget={edit ? pickable : undefined}
/>
</div>
) : (
<CanvasSurface
dashboard={draft}
stacked
renderWidget={edit ? pickable : undefined}
/>
</div>
) : (
<CanvasSurface
dashboard={draft}
dots={edit}
rail={
railDashboards ? (
<PanelRail
dashboards={railDashboards}
current={draft.name}
// Editing one dashboard of a panel and editing its neighbour are
// the same job, so the rail keeps whichever mode this one is in.
linkFor={(name) => ({
to: "/dashboards/$name",
params: { name },
search: edit ? { edit: true } : {},
})}
/>
) : null
}
>
{(scale) =>
!edit ? (
<DashboardView dashboard={draft} rail={hasRail} />
) : (
<GridLayout
width={area.width}
layout={layout}
onLayoutChange={applyLayout}
positionStrategy={scaledStrategy(scale)}
gridConfig={{
cols: columns,
rowHeight: rowHeightOf(draft, hasRail),
margin: [GRID_GAP, GRID_GAP],
containerPadding: [0, 0],
// The canvas is the constraint: nothing may be dragged off the
// panel it is being drawn for. Shared with the warning above, so
// the constraint and what it is warned about cannot disagree.
maxRows: rows,
}}
// Only the header moves a widget, so a slider under the cursor still
// slides and a switch still flips while the dashboard is being edited.
// The header is the handle, and a chart now draws its range
// picker there — so that one control is exempt, or picking a
// window would drag the tile instead.
dragConfig={{
handle: ".widget-grip",
cancel: "[data-testid=range-picker]",
}}
resizeConfig={{ handles: ["e", "s", "se"] }}
>
{widgets.map((widget) => (
<div key={widget.id}>{pickable(widget, true)}</div>
))}
</GridLayout>
)
}
</CanvasSurface>
)
dots={edit}
rail={
railDashboards ? (
<PanelRail
dashboards={railDashboards}
current={draft.name}
// Editing one dashboard of a panel and editing its neighbour are
// the same job, so the rail keeps whichever mode this one is in.
linkFor={(name) => ({
to: "/dashboards/$name",
params: { name },
search: edit ? { edit: true } : {},
})}
/>
) : null
}
>
{(scale) =>
!edit ? (
<DashboardView dashboard={draft} rail={hasRail} />
) : (
<GridLayout
width={area.width}
layout={layout}
onLayoutChange={applyLayout}
positionStrategy={scaledStrategy(scale)}
gridConfig={{
cols: columns,
rowHeight: rowHeightOf(draft, hasRail),
margin: [GRID_GAP, GRID_GAP],
containerPadding: [0, 0],
// The canvas is the constraint: nothing may be dragged off the
// panel it is being drawn for. Shared with the warning above, so
// the constraint and what it is warned about cannot disagree.
maxRows: rows,
}}
// Only the header moves a widget, so a slider under the cursor still
// slides and a switch still flips while the dashboard is being edited.
// The header is the handle, and a chart now draws its range
// picker there — so that one control is exempt, or picking a
// window would drag the tile instead.
dragConfig={{
handle: ".widget-grip",
cancel: "[data-testid=range-picker]",
}}
resizeConfig={{ handles: ["e", "s", "se"] }}
>
{widgets.map((widget) => (
<div key={widget.id}>{pickable(widget, true)}</div>
))}
</GridLayout>
)
}
</CanvasSurface>
)
return (
<LookProvider dashboard={draft}>
frontend/src/components/Dashboard/DashboardView.tsx
+5 -70
View File
@@ -1,12 +1,6 @@
import { motion } from "motion/react"
import { useEffect, useRef, useState } from "react"
import type {
DashboardDef_Output,
PageDef_Output,
Placement,
SectionDef_Output,
WidgetDef,
} from "@/client"
import type { DashboardDef_Output, Placement, WidgetDef } from "@/client"
import { cn } from "@/lib/utils"
import "./dashboard.css"
@@ -68,9 +62,8 @@ export const RAIL_INSET = 72
* The generated client marks every list optional, because the server fills
* them in. These three keep that from spreading through the components.
*/
export const pagesOf = (dashboard: DashboardDef_Output) => dashboard.pages ?? []
export const sectionsOf = (page: PageDef_Output) => page.sections ?? []
export const widgetsOf = (section: SectionDef_Output) => section.widgets ?? []
export const widgetsOf = (dashboard: DashboardDef_Output) =>
dashboard.widgets ?? []
export const columnsOf = (dashboard: Dashboard) =>
dashboard.columns || DEFAULT_COLUMNS
@@ -293,52 +286,6 @@ export const isPlaced = (widgets: WidgetDef[]) =>
return x > 0 || y > 0
})
/**
* The page's widgets as one arrangement.
*
* Sections used to be drawn as separate grids stacked down the page, each
* starting at its own row zero, so a document written with several of them is
* read as one grid by pushing each below the one before it. That is what lets
* the editor and the panel show the same thing: the editor arranges one grid,
* and it now arranges all of them.
*
* An unarranged document is left alone — every widget still sits at 0,0 there,
* so there is no arrangement to keep apart and the grid auto-flows instead.
*
* ponytail: a section's own heading stops being drawn with it. No UI ever
* wrote one, so only a seeded document has any — restoring them means giving
* a group a box on the canvas, which is a widget, not a section.
*/
export function flatWidgets(page: PageDef_Output): WidgetDef[] {
const sections = sectionsOf(page)
const all = sections.flatMap(widgetsOf)
if (sections.length < 2 || !isPlaced(all)) return all
const flat: WidgetDef[] = []
let offset = 0
for (const section of sections) {
let bottom = 0
for (const widget of widgetsOf(section)) {
const placed = placement(widget)
const y = Math.max(0, placed.y ?? 0)
bottom = Math.max(bottom, y + Math.max(1, placed.h ?? 2))
flat.push(
offset === 0
? widget
: {
...widget,
layout: {
...(widget.layout ?? {}),
lg: { ...placed, y: y + offset },
},
},
)
}
offset += bottom
}
return flat
}
/**
* One page, drawn as the single grid the panel shows.
*
@@ -360,26 +307,14 @@ export function DashboardView({
/** Whether the panel carries a rail, which takes a column of the canvas. */
rail?: boolean
}) {
// ponytail: the first page only. A panel carries several whole dashboards
// — that is what the rail is for — so nothing writes a second page.
const page = pagesOf(dashboard)[0]
if (!page) {
return (
<p className="text-sm text-muted-foreground">
This dashboard has no pages yet.
</p>
)
}
const all = flatWidgets(page)
const all = widgetsOf(dashboard)
if (all.length === 0) {
return (
<p
className="text-sm text-muted-foreground"
data-testid="dashboard-empty"
>
Nothing on this page yet. Edit it to add a widget.
Nothing on this dashboard yet. Edit it to add a widget.
</p>
)
}
frontend/src/components/Dashboard/RunsContext.tsx
+3 -4
View File
@@ -8,7 +8,7 @@ import {
runQueryOptions,
shortId,
} from "@/components/Runs/queries"
import { type Dashboard, flatWidgets, pagesOf } from "./DashboardView"
import { type Dashboard, widgetsOf } from "./DashboardView"
import {
type ContextLine,
type DataContext,
@@ -22,10 +22,9 @@ import {
* asking the server for its whole series would be a query nobody draws.
*/
function chartedNames(dashboard: Dashboard | undefined): string[] {
const page = pagesOf(dashboard ?? ({} as Dashboard))[0]
if (!page) return []
if (!dashboard) return []
const names = new Set<string>()
for (const widget of flatWidgets(page)) {
for (const widget of widgetsOf(dashboard)) {
if (widget.type !== "chart") continue
const config = (widget.config ?? {}) as {
series?: { message?: string }[]
frontend/src/routes/_layout/dashboards/index.tsx
-2
View File
@@ -217,8 +217,6 @@ function Dashboards() {
draft={dashboard.has_draft}
detail={`${dashboard.widget_count} widget${
dashboard.widget_count === 1 ? "" : "s"
} · ${dashboard.page_count} page${
dashboard.page_count === 1 ? "" : "s"
}`}
selecting={selection.selecting}
selected={selection.selected.includes(dashboard.name)}
frontend/tests/editor.spec.ts
+2 -2
View File
@@ -48,7 +48,7 @@ test.beforeAll(async ({ browser }) => {
dashboard.columns = 12
dashboard.canvas_width = 1920
dashboard.canvas_height = 1080
dashboard.pages[0].sections[0].widgets = WIDGETS
dashboard.widgets = WIDGETS
await api(page, `/dashboards/${dashboardName}`, {
method: "PUT",
data: dashboard,
@@ -65,7 +65,7 @@ async function placements(page: Page) {
const doc = await (
await api(page, `/dashboards/${dashboardName}?draft=true`)
).json()
const widgets = doc.pages[0].sections[0].widgets as {
const widgets = doc.widgets as {
id: string
layout: { lg: { x: number; y: number } }
}[]
frontend/tests/endpoints.spec.ts
+1 -1
View File
@@ -55,7 +55,7 @@ test.beforeAll(async ({ browser }) => {
const dashboard = await (
await api(page, `/dashboards/${dashboardName}`, { method: "POST" })
).json()
dashboard.pages[0].sections[0].widgets = [
dashboard.widgets = [
{
id: "lever",
type: "slider",
frontend/tests/mobile.spec.ts
+1 -1
View File
@@ -174,7 +174,7 @@ test.beforeAll(async ({ browser }) => {
const dashboard = await (
await api(page, `/dashboards/${dashboardName}`, { method: "POST" })
).json()
dashboard.pages[0].sections[0].widgets = [
dashboard.widgets = [
{
id: "top",
type: "stat",
frontend/tests/panel.spec.ts
+1 -1
View File
@@ -51,7 +51,7 @@ test.beforeAll(async ({ browser }) => {
await api(page, `/dashboards/${name}`, { method: "POST" })
const doc = await (await api(page, `/dashboards/${name}?draft=true`)).json()
doc.settings = { look: { value: "glass" } }
doc.pages[0].sections[0].widgets = [
doc.widgets = [
{
id: "stat",
type: "stat",
frontend/tests/widgets.spec.ts
+2 -2
View File
@@ -89,7 +89,7 @@ test.beforeAll(async ({ browser }) => {
// Two rows taller than the default panel: the tiles below already fill it,
// and a widget past the last row is clipped rather than drawn.
dashboard.canvas_height = 1400
dashboard.pages[0].sections[0].widgets = [
dashboard.widgets = [
{
id: "load",
type: "bar",
@@ -202,7 +202,7 @@ test.beforeAll(async ({ browser }) => {
const stack = await (
await api(page, `/dashboards/${stackName}`, { method: "POST" })
).json()
stack.pages[0].sections[0].widgets = [
stack.widgets = [
{
id: "split",
type: "bar",