feat(dashboard): phase B drag-resize grid (Gridstack) replacing masonry
Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets: - DashboardWidget: replace `position` with a 12-col grid placement (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position order into a 3-up grid (4 cols x 4 cells each) and drops position. - View + share render a static CSS grid from x/y/w/h: fixed cell height (h * 70px) with the body scrolling, so the arranged layout is what's shown; collapses to a single column under 820px. - Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar to move, drag a corner/edge to resize; every change autosaves to a new /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder. - add_widget appends at the bottom-left; remove no longer renumbers. _get_widgets now orders by grid position (drives DOM + mobile fallback order). Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an operator visual check of the edit experience. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -50,6 +50,11 @@ class DashboardWidget(Base):
|
||||
Integer, ForeignKey("dashboards.id", ondelete="CASCADE"), nullable=False,
|
||||
)
|
||||
widget_key: Mapped[str] = mapped_column(String(64), nullable=False)
|
||||
position: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
|
||||
# Grid placement (Grafana-style): 12-column grid, row height in cell units.
|
||||
# x/y are the top-left cell; w/h the span. Replaces the old `position` order.
|
||||
grid_x: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
|
||||
grid_y: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
|
||||
grid_w: Mapped[int] = mapped_column(Integer, nullable=False, default=4)
|
||||
grid_h: Mapped[int] = mapped_column(Integer, nullable=False, default=4)
|
||||
title: Mapped[str | None] = mapped_column(String(128), nullable=True)
|
||||
config_json: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
|
||||
Reference in New Issue
Block a user