6.5 KiB
6.5 KiB
Design Document: Resource-Centric UI & Unified Task Experience
1. Core Philosophy
The application moves from a Task-Centric model (where users navigate to "Migration Tool" or "Git Tool") to a Resource-Centric model. Users navigate to the object they want to manage (Dashboard, Dataset) and perform actions on it.
Goals:
- Context preservation: Users shouldn't lose their place in a list just to see a log.
- Discoverability: All actions available for a resource are grouped together.
- Traceability: Every action is explicitly linked to a Task ID with accessible logs.
2. Navigation Structure (Navbar)
Old Menu:
[Home] [Migration] [Git Manager] [Mapper] [Settings] [Logout]
New Menu:
[Superset Manager] [Dashboards] [Datasets] [Storage] | [Activity (0)] [Settings] [User]
- Dashboards: Main hub for all dashboard operations (Migrate, Backup, Git).
- Datasets: Hub for dataset documentation and mapping.
- Storage: File management (Backups, Repositories).
- Activity: Global indicator of running tasks. Clicking it opens the Task Drawer.
3. Page Layouts
3.1. Dashboard Hub (/dashboards)
The central place for managing Superset Dashboards.
Wireframe:
+-----------------------------------------------------------------------+
| Select Source Env: [ Development (v) ] [ Refresh ] |
+-----------------------------------------------------------------------+
| Search: [ Filter by title... ] |
+-----------------------------------------------------------------------+
| Title | Slug | Git Status | Last Task | Actions |
|------------------|-------------|---------------|-----------|----------|
| Sales Report | sales-2023 | 🌿 main (OK) | (v) Done | [ ... ] |
| HR Analytics | hr-dash | - | ( ) Idle | [ ... ] |
| Logs Monitor | logs-v2 | 🌿 dev (Diff) | (@) Run.. | [ ... ] |
+-----------------------------------------------------------------------+
Interaction Details:
- Source Env Selector: Loads dashboards via
superset_client.get_dashboards. - Status Column ("Last Task"):
- Shows the status of the last known action for this dashboard in the current session.
- States:
Idle,Running(Spinner),Waiting Input(Orange Key),Success(Green Check),Error(Red X). - Click Action: Clicking the icon/badge opens the Task Drawer.
- Actions Menu ([ ... ]):
- Migrate: Opens
DeploymentModal(Simplified: just Target Env selector). - Backup: Immediately triggers
BackupPlugin. - Git Operations:
- Init Repo (if Git Status is empty).
- Commit/Push, History, Checkout (if Git initialized).
- Validate: Triggers LLM Analysis.
- Migrate: Opens
3.2. Dataset Hub (/datasets)
The central place for managing physical datasets and semantic layers.
Wireframe:
+-----------------------------------------------------------------------+
| Select Source Env: [ Production (v) ] |
+-----------------------------------------------------------------------+
| Table Name | Schema | Mapped Fields | Last Task | Actions |
|------------------|-------------|---------------|-----------|----------|
| fact_orders | public | 15 / 20 | (v) Done | [ ... ] |
| dim_users | auth | 0 / 5 | ( ) Idle | [ ... ] |
+-----------------------------------------------------------------------+
Actions Menu ([ ... ]):
- Map Columns: Opens the Mapping Modal (replaces
MapperPage). - Generate Docs: Triggers
DocumentationPlugin.
4. The Global Task Drawer
Concept: A slide-out panel that overlays the right side of the screen. It persists in the DOM layout (Global Layout) but is hidden until triggered.
Trigger Points:
- Clicking a Status Badge in any Grid row (Dashboard or Dataset).
- Clicking the Activity indicator in the Navbar.
Layout:
+---------------------------------------------------------------+
| Task: Migration "Sales Report" [X] Close |
| ID: 1234-5678-uuid |
| Status: WAITING_INPUT (Paused) |
+---------------------------------------------------------------+
| |
| [Log Stream Area] |
| 10:00:01 [INFO] Starting migration... |
| 10:00:02 [INFO] Exporting dashboard... |
| 10:00:05 [WARN] Target DB requires password! |
| |
+---------------------------------------------------------------+
| INTERACTIVE AREA (Dynamic) |
| |
| Target Database: "Production DB" |
| Enter Password: [ ********** ] |
| |
| [ Cancel ] [ Resume Task ] |
+---------------------------------------------------------------+
Behavior:
- Context Aware: If I trigger a migration on "Sales Report", the Drawer automatically opens and subscribes to that task's ID.
- Multi-Tasking: I can close the drawer (click [X]) to let the task run in the background. The "Activity" badge in the navbar increments.
- Input Handling: Components like
PasswordPromptorMissingMappingModalare no longer center-screen modals blocking the whole UI. They are rendered inside the Interactive Area of the Drawer.
5. Technical Component Architecture
5.1. Stores (stores/tasks.js)
Needs a new reactive store structure to map Resources to Tasks.
// Map resource UUIDs to their active/latest task UUIDs
export const resourceTaskMap = writable({
"dashboard-uuid-1": { taskId: "task-uuid-A", status: "RUNNING" },
"dataset-uuid-2": { taskId: "task-uuid-B", status: "SUCCESS" }
});
// The currently focused task in the Drawer
export const activeDrawerTask = writable(null); // { taskId: "..." }
export const isDrawerOpen = writable(false);
5.2. Components
DashboardHub.svelte: Main page.DatasetHub.svelte: Main page.GlobalTaskDrawer.svelte: Lives in+layout.svelte. Connects toactiveDrawerTask.ActionMenu.svelte: Reusable dropdown for grids.