UI Guide

Dashboard Overview

Get started with the FlatRun web dashboard.

The FlatRun UI is a modern web dashboard for managing your Docker deployments. This guide covers the main features and how to navigate the interface.

Accessing the Dashboard

After installing the UI (see Installation), access it via your configured domain or IP address. You'll be greeted with the login screen.

Authentication

  1. Enter your API key (configured in the agent's auth.api_keys)
  2. Click "Login"
  3. You'll be redirected to the home dashboard
Tip: The UI stores your authentication token in the browser. You'll stay logged in until the token expires or you manually log out.

Main Navigation

The sidebar provides access to all major sections:

Section Description
Home Dashboard overview with stats and recent activity
Deployments Manage your application deployments
Containers View and control all Docker containers
Images Manage Docker images
Volumes Manage Docker volumes
Networks Manage Docker networks
Ports View port usage and mappings
Databases Manage database servers and data
Certificates SSL certificate management
Templates Browse deployment templates
Infrastructure Manage shared infrastructure services
Settings Configure the agent and UI

Home Dashboard

The home dashboard provides a quick overview:

  • Statistics Cards — Total deployments, running containers, etc.
  • Recent Deployments — Quick access to your latest deployments
  • System Status — Agent health and version information

Common UI Patterns

Data Tables

Most list views use data tables with these features:

  • Search — Filter items by name or other attributes
  • Sorting — Click column headers to sort
  • View Toggle — Switch between table and grid views
  • Bulk Selection — Select multiple items for batch operations
  • Actions — Per-item action buttons (start, stop, delete, etc.)

Status Indicators

Color-coded status badges throughout the UI:

  • Running — Service is running normally
  • Stopped — Service is stopped
  • Error — Service has an error
  • Healthy — Health check passing
  • Unhealthy — Health check failing

Modal Dialogs

Many operations use modal dialogs:

  • New Deployment — Wizard for creating deployments
  • Confirmation — Confirm destructive actions
  • Details — View logs, stats, and other details

Toast Notifications

Operations display toast notifications to indicate success or failure. These appear in the bottom-right corner and auto-dismiss after a few seconds.

Quick Actions

Quick Actions provide fast access to common operations:

Dashboard Quick Actions

The Home dashboard includes shortcut buttons for frequently used pages:

  • Monitoring — Traffic and security overview
  • Templates — Browse available app templates
  • SSL Certs — Manage SSL certificates
  • Infrastructure — Access Nginx, databases, and shared services

Deployment Quick Actions

Each deployment can have custom Quick Actions — predefined commands that execute in your containers. Access them from the deployment detail page under the "Quick Actions" tab.

Adding Quick Actions

  1. Navigate to a deployment
  2. Go to the "Quick Actions" tab
  3. Click "Add Action"
  4. Configure the action:
    • Name — Display name for the action
    • Command — Shell command to execute
    • Description — Brief explanation (optional)
    • Service — Target container (optional)
  5. Save the action

Example Quick Actions

  • php artisan cache:clear — Clear Laravel cache
  • npm run build — Rebuild frontend assets
  • wp cache flush — Clear WordPress cache
  • python manage.py migrate — Run Django migrations

Click any Quick Action to execute it immediately and view the output.

Responsive Design

The UI is responsive and works on mobile devices. On smaller screens:

  • Sidebar collapses to a hamburger menu
  • Tables become scrollable
  • Grid views adjust column count

Keyboard Shortcuts

Some common keyboard shortcuts:

Shortcut Action
/ Focus search field
Esc Close modal dialogs
Ctrl+Enter Submit forms