Skip to main content

Queue Management

The Queue Management page provides a comprehensive view of all flow execution queues across devices, allowing you to monitor, manage, and control queued flow executions in real-time.

Overview​

The Queue Management page displays:

  • Device Queue Status: Real-time queue status for all devices with active queues
  • Queue Details: Detailed information about each queued flow execution
  • Processing Status: Current processing state (Processing or Idle) for each device
  • Queue Operations: Remove flows from queues and refresh queue status

Key Features​

Real-Time Monitoring​

  • Auto-Refresh: Queue status automatically refreshes every 5 seconds
  • Live Updates: See queue changes as they happen without manual refresh
  • Device Status: Monitor which devices are actively processing flows
  • Queue Counts: View the number of flows queued per device

Queue Information Display​

  • Device ID: Unique identifier for each device
  • Processing Status: Visual badge indicating if device is Processing or Idle
  • Queue Count: Total number of flows in the queue
  • Flow Details: Expandable rows showing:
    • Flow name and ID
    • Queue position (#1, #2, etc.)
    • Queued timestamp (formatted date/time)
    • Flow options (if available)

Queue Management Operations​

  • Manual Refresh: Refresh queue status on demand
  • Remove from Queue: Delete individual flows from device queues
  • Bulk View: See all device queues in a single table
  • Error Handling: Clear error messages with retry options

User Interface​

Header Section​

  • Page title: "Queue Management"
  • Description: "Monitor and manage flow execution queues per device"
  • Refresh button with loading indicator

Queue Table​

The main table displays queue information with the following columns:

Main Row (Device Level)​

  • Device ID: Monospace font display of device identifier
  • Status: Badge showing "Processing" (default variant) or "Idle" (secondary variant)
  • Queue Count: Number of flows currently queued
  • Queued Flows: Count of flows in queue details
  • Actions: Refresh button for manual queue status update

Detail Rows (Flow Level)​

  • Position: Queue position number (#1, #2, etc.)
  • Flow Information:
    • Flow name (or "Unknown Flow" if name not found)
    • Flow ID in monospace font below name
  • Queued Time: Formatted timestamp showing when flow was queued
  • Actions: Delete button to remove flow from queue

Empty State​

When no queues are active:

  • Centered message: "No queues active"
  • Subtitle: "All devices have empty queues"
  • Dashed border container

Loading State​

  • Centered spinner during initial load
  • Loading indicator in refresh button during manual refresh

Error State​

  • Error message display
  • Retry button to attempt reload
  • User-friendly error descriptions

Usage Examples​

Viewing Queue Status​

  1. Navigate to Queue Management page
  2. View automatically refreshed queue status for all devices
  3. See real-time updates every 5 seconds

Monitoring Device Processing​

  1. Check the Status column for each device
  2. "Processing" badge indicates active flow execution
  3. "Idle" badge indicates device is waiting for next flow

Removing a Flow from Queue​

  1. Locate the device and flow in the queue table
  2. Click the trash icon button in the Actions column for the specific flow
  3. Confirm removal (flow is removed immediately)
  4. Queue status refreshes automatically after removal

Manual Refresh​

  1. Click the "Refresh" button in the header
  2. Wait for refresh to complete (spinner indicates progress)
  3. View updated queue status

Viewing Queue Details​

  1. Expand queue details by viewing the detail rows below each device
  2. See flow names, IDs, and queued timestamps
  3. Identify queue position for each flow

Technical Details​

Data Loading​

  • Uses React Query for efficient data fetching and caching
  • Automatic refetch interval: 5 seconds
  • Flow names cached for 2 minutes to reduce API calls
  • Fetches queue status for all devices, then detailed info for devices with queues

API Integration​

The page integrates with the following endpoints:

  • GET /queues - Get queue status for all devices
  • GET /queues/:deviceId - Get detailed queue status for specific device
  • DELETE /queues/:deviceId/:flowId - Remove flow from device queue
  • GET /flows - Get all flows for name resolution

Data Flow​

  1. Fetch overall queue status (deviceId -> queueCount mapping)
  2. For devices with queueCount > 0, fetch detailed queue information
  3. Fetch all flows to create flowId -> flowName mapping
  4. Combine data to display comprehensive queue view
  5. Auto-refresh every 5 seconds

State Management​

  • Loading states for initial load and refresh operations
  • Loading indicators for individual flow removal operations
  • Error states with retry functionality
  • Optimistic UI updates for better user experience

Date Formatting​

  • Queued timestamps formatted using Intl.DateTimeFormat
  • Format: "Month Day, Year, Hour:Minute:Second AM/PM"
  • Example: "Jan 15, 2024, 02:30:45 PM"

Queue Status States​

Processing​

  • Device is currently executing a flow
  • Badge displays "Processing" with default variant styling
  • Queue may contain additional flows waiting

Idle​

  • Device is not currently processing any flow
  • Badge displays "Idle" with secondary variant styling
  • Next flow in queue will start automatically

Troubleshooting​

Common Issues​

No Queues Showing

  • All devices have empty queues (expected behavior)
  • Check if flows are actually queued for execution
  • Verify device connectivity

Stale Data

  • Page auto-refreshes every 5 seconds
  • Use manual refresh button if needed
  • Check network connectivity

Flow Removal Fails

  • Flow may have already been processed
  • Verify flow ID and device ID are correct
  • Check server logs for detailed error messages
  • Retry the operation

Flow Names Not Showing

  • Flow may have been deleted
  • Flow name cache may be stale (refreshes every 2 minutes)
  • Check flow exists in system

Error Handling​

  • Component-level error boundaries prevent crashes
  • User-friendly error messages with retry options
  • Toast notifications for operation feedback
  • Loading states prevent duplicate operations

Best Practices​

  1. Regular Monitoring: Check queue status regularly to ensure flows are processing correctly
  2. Queue Management: Remove stuck or unnecessary flows promptly
  3. Device Status: Monitor device processing status to identify bottlenecks
  4. Queue Position: Use queue position numbers to understand execution order
  5. Manual Refresh: Use manual refresh when immediate updates are needed

Integration​

The Queue Management page integrates with:

  • Flow Management: Displays flow names and IDs from flow system
  • Device Management: Shows device-specific queue information
  • Execution Queue Service: Backend service managing queue operations
  • React Query: Data fetching, caching, and automatic refetching

API Reference​

For detailed API documentation, see:

  • Queue Routes API documentation
  • Flow Management API documentation