Common Screen Patterns
These UI patterns are shared across most pages.
Tables
Section titled “Tables”| Feature | How to use |
|---|---|
| Search | Type in the search field above the table. Results filter server-side as you type. |
| Sort | Click a sortable column header. Click again to toggle ascending ↔ descending. |
| Pagination | Use the page controls below the table to navigate. |
| Rows per page | Change the dropdown to show more or fewer rows. |
| Row actions | Hover a row to reveal an actions menu (e.g. Details, Edit, Clone, Delete). |
| Checkbox selection | Some tables allow selecting rows via checkboxes. A toolbar appears with bulk actions. |
Forms (Create / Edit)
Section titled “Forms (Create / Edit)”- Required fields show a validation error if left empty on save.
- Save / Submit persists the change; Cancel / Back discards it.
- Forms that include port bindings let you add multiple ports with a protocol (TCP / UDP) and container port number.
Confirmation dialogs
Section titled “Confirmation dialogs”Destructive actions (Delete, Stop) always show a confirmation dialog before proceeding. Read the message carefully — some deletions cascade (e.g. deleting an application also removes its tags).
Date range picker
Section titled “Date range picker”The date range picker appears on the Dashboard and Container Details pages. It controls the time range for charts, metrics, and logs.
| Feature | Description |
|---|---|
| Quick presets | Common ranges such as Last 15 minutes, Last 1 hour, Last 24 hours, Last 7 days. |
| Relative dates | Define a range relative to “now”, e.g. now-6h to now. |
| Absolute dates | Pick exact start and end timestamps from a calendar. |
| Auto-refresh | Set an interval (e.g. every 30 s) to automatically refresh data. A spinner appears while refreshing. |
| Manual refresh | Click the refresh button next to the date picker. |