126 lines
5.5 KiB
Markdown
126 lines
5.5 KiB
Markdown
# UX Reference: Superset-Style Redesign
|
|
|
|
## Persona
|
|
**Alex, Data Engineer / Superset Admin**
|
|
Alex manages dozens of dashboards across Dev, Staging, and Prod. Alex needs to quickly move changes between environments, check if a dashboard is in sync with Git, and fix mapping issues without losing context.
|
|
|
|
## Context
|
|
The current UI is "Tool-Centric" (Go to Migration Tool -> Select Dashboard). The new UI is "Resource-Centric" (Go to Dashboards -> Find "Sales" -> Click Migrate).
|
|
|
|
## Happy Path: Migrating a Dashboard
|
|
|
|
1. **Discovery**: Alex opens the app and lands on the **Dashboard Hub**.
|
|
2. **Selection**: Alex selects "Production" from the environment dropdown. The grid populates with production dashboards.
|
|
3. **Status Check**: Alex sees that "Sales Overview" has a "Diff" status in the Git column.
|
|
4. **Action**: Alex clicks the `[...]` menu on the "Sales Overview" row and selects **Migrate**.
|
|
5. **Configuration**: A small modal appears asking for the **Target Environment**. Alex selects "Staging" and clicks "Start".
|
|
6. **Monitoring**: The modal closes. The "Last Task" column for "Sales Overview" changes to a **Spinner**.
|
|
7. **Contextual Logs**: Alex clicks the Spinner. The **Task Drawer** slides out from the right.
|
|
8. **Interaction**: The logs show the migration is paused because a database password is required. A password field appears *inside* the drawer.
|
|
9. **Completion**: Alex enters the password. The migration finishes. The drawer shows a green "Success" message. Alex closes the drawer and is still looking at the Dashboard Hub list.
|
|
|
|
## Mockups
|
|
|
|
### Top Navigation Bar
|
|
```text
|
|
+-----------------------------------------------------------------------+
|
|
| [≡] Superset Tools [🔍 Search...] [Activity (3)] [👤 ▼] |
|
|
+-----------------------------------------------------------------------+
|
|
```
|
|
- **[≡] Hamburger**: Mobile-only toggle for sidebar.
|
|
- **Logo**: Returns to Home/Dashboard Hub.
|
|
- **Search**: Placeholder for future global search.
|
|
- **Activity (3)**: Badge shows count of running tasks. Clicking opens Task Drawer.
|
|
- **User Menu**: Dropdown with Profile, Settings, Logout.
|
|
|
|
### Sidebar (Expanded)
|
|
```text
|
|
+------------------+
|
|
| ▽ DASHBOARDS |
|
|
| Overview |
|
|
+------------------+
|
|
| ▽ DATASETS |
|
|
| All Datasets |
|
|
+------------------+
|
|
| ▽ STORAGE |
|
|
| Backups |
|
|
| Repositories |
|
|
+------------------+
|
|
| ▽ ADMIN |
|
|
| Users |
|
|
| Roles |
|
|
| Settings |
|
|
+------------------+
|
|
| [◀ Collapse] |
|
|
+------------------+
|
|
```
|
|
|
|
### Sidebar (Collapsed)
|
|
```text
|
|
+---+
|
|
| D | (Dashboards - Active)
|
|
| T | (Datasets)
|
|
| S | (Storage)
|
|
+---+
|
|
| A | (Admin)
|
|
+---+
|
|
| ▶ |
|
|
+---+
|
|
```
|
|
|
|
### Dashboard Hub Grid
|
|
```text
|
|
+-----------------------------------------------------------------------+
|
|
| Env: [ Production (v) ] [ Refresh ] |
|
|
+-----------------------------------------------------------------------+
|
|
| Title | Git Status | Last Task | Actions |
|
|
|-----------------|---------------|-----------|-------------------------|
|
|
| Sales Report | [v] main | [v] Done | [ Migrate ] [ Backup ] |
|
|
| HR Analytics | [!] Diff | [@] Run.. | [ Commit ] [ ... ] |
|
|
+-----------------------------------------------------------------------+
|
|
```
|
|
|
|
### Settings Page (Consolidated)
|
|
```text
|
|
+-----------------------------------------------------------------------+
|
|
| Settings |
|
|
+-----------------------------------------------------------------------+
|
|
| [Environments] [Connections] [LLM Providers] [Logging] [System] |
|
|
+-----------------------------------------------------------------------+
|
|
| |
|
|
| Environments |
|
|
| +-------------------------------------------------------------+ |
|
|
| | Name | URL | Status | Actions | |
|
|
| |--------------|------------------------|----------|---------| |
|
|
| | Development | http://dev.superset... | [v] OK | [Edit] | |
|
|
| | Production | http://prod.superset...| [!] Error| [Edit] | |
|
|
| +-------------------------------------------------------------+ |
|
|
| |
|
|
+-----------------------------------------------------------------------+
|
|
```
|
|
|
|
### Task Drawer (Active)
|
|
```text
|
|
+---------------------------------------+
|
|
| Task: Migration (Sales) [X] |
|
|
+---------------------------------------+
|
|
| [INFO] Exporting... |
|
|
| [INFO] Validating... |
|
|
| [WARN] Password required |
|
|
| |
|
|
| Password: [**********] |
|
|
| [ Resume ] [ Cancel ] |
|
|
+---------------------------------------+
|
|
```
|
|
|
|
## Error Experience
|
|
|
|
### Scenario: Migration Fails
|
|
- **Visual Cue**: The "Last Task" badge in the grid turns **Red (X)**.
|
|
- **Notification**: A toast message appears: "Migration Failed: Database Connection Error".
|
|
- **Resolution**: Alex clicks the Red (X). The Task Drawer opens, scrolled to the bottom, highlighting the error in red. Alex can see the full stack trace or error message to debug.
|
|
|
|
### Scenario: Environment Offline
|
|
- **Visual Cue**: When selecting an environment, a "Connection Error" banner appears at the top of the grid.
|
|
- **Action**: The "Refresh" button turns into a "Retry" button.
|