146 lines
6.7 KiB
Markdown
146 lines
6.7 KiB
Markdown
# 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:**
|
|
1. **Context preservation:** Users shouldn't lose their place in a list just to see a log.
|
|
2. **Discoverability:** All actions available for a resource are grouped together.
|
|
3. **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] [Reports] [Storage] | [Activity (0)] [Settings] [User]`
|
|
|
|
* **Dashboards**: Main hub for all dashboard operations (Migrate, Backup, Git).
|
|
* **Datasets**: Hub for dataset documentation and mapping.
|
|
* **Reports**: Unified center for all task outcomes with type-distinct visual profiles and detail diagnostics.
|
|
* **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:**
|
|
```text
|
|
+-----------------------------------------------------------------------+
|
|
| 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:**
|
|
1. **Source Env Selector**: Loads dashboards via `superset_client.get_dashboards`.
|
|
2. **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**.
|
|
3. **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.
|
|
|
|
### 3.2. Dataset Hub (`/datasets`)
|
|
|
|
The central place for managing physical datasets and semantic layers.
|
|
|
|
**Wireframe:**
|
|
```text
|
|
+-----------------------------------------------------------------------+
|
|
| 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:**
|
|
1. Clicking a **Status Badge** in any Grid row (Dashboard or Dataset).
|
|
2. Clicking the **Activity** indicator in the Navbar.
|
|
|
|
**Layout:**
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| 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 `PasswordPrompt` or `MissingMappingModal` are 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.
|
|
|
|
```javascript
|
|
// 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 to `activeDrawerTask`.
|
|
* `ActionMenu.svelte`: Reusable dropdown for grids. |