Real-Time Queues View Programmability

You can customize the Real-Time Queues View to display the queue statistics that you want to monitor in your contact center.

QueuesStatsView Component

The Real-Time Queues View is rendered by the QueuesStatsView component. This programmable Flex UI component contains the following children components:

• QueuesStats.AggregatedQueuesDataTiles (key: tiles)
• QueuesStats.QueuesDataTable (key: table)

Modify QueuesStatsView

You can modify QueuesStatsView via the Content property:

// Remove all tiles from the view
QueuesStatsView.Content.remove("tiles");
// Add your own component
QueuesStatsView.Content.add(<CustomTiles key="custom-tiles" />, {
  sortOrder: 0
});

Add or Remove Individual Data Tiles

To add custom tiles or remove existing tiles, modify QueuesStats.AggregatedQueuesDataTiles. Out of the box, this child component contains the following aggregated data tiles:

• Active Tasks (key: active-tasks-tile)
• Waiting Tasks (key: waiting-tasks-tile)
• Longest Wait (key: longest-wait-time-tile)
• Agents (key: agents-by-activity-chart-tile)

Modify the QueuesDataTable

The child component QueuesStats.QueuesDataTable lets you add or remove columns in the QueuesDataTable. Out of the box, the QueuesDataTable has the following columns:

• Queues (key: friendly-name)
• Active (key: active-tasks)
• Waiting (key: waiting-tasks)
• Longest (key: longest-wait-time)
• Agents (key: agents)

To add a column, add a ColumnDefinition component to QueuesStats.QueuesDataTable. If you want custom formatting on a default column, remove the original column and create a new one.

Sort the QueuesDataTable

You can click on the header of a predefined column to sort the QueuesDataTable by those values. By default, the table is sorted by queue name.

To change the column the table is sorted by, set the following property to the key of the column that you want to use:

QueuesStats.QueuesDataTable.defaultProps.defaultSortColumn = "column-key"

Sorting with Custom Columns

When adding a custom column, you can specify the parameter sortingFn: (a, b) => number, which works the same way as the compareFunction parameter in JavaScript's Array.sort().

The default order of sorting is descending. To change the direction to ascending, use the sortDirection property on the ColumnDefinition component.

In this example, you display a new column with pending tasks and allow sorting by the values in this column:

Flex.QueuesStats.QueuesDataTable.Content.add(
  <ColumnDefinition
    key="pending-tasks"
    header="Pending tasks"
    content={(queue: Flex.QueuesStats.WorkerQueue) =>
      queue.tasks_by_status.pending
    }
    sortingFn={(
      a: Flex.QueuesStats.WorkerQueue,
      b: Flex.QueuesStats.WorkerQueue
    ) => a.tasks_by_status.pending - b.tasks_by_status.pending}
    sortDirection="asc"
  />
);

Filter the Real-Time Queues View

setFilter

Out of the box, all of your queues display in the Flex UI. If you want to hide queues or only show specific queues, you can apply a filter:

QueuesStats.setFilter((queue: Flex.QueuesStats.WorkerQueue) =>
  queue.friendly_name !== "Invisible Queue"
);

The setFilter takes a single parameter, a filter function with a signature of (queue: WorkerQueue) => boolean. This function will be evaluated for each queue and added to the view if the return value is true.

setSubscriptionFilter

For larger contact centers with a large number of queues, it may be more adequate to use the setSubscriptionFilter that is available in @twilio/flex-ui@1.24.0 with the SLA feature enabled. Unlike setFilter, this filter will stop the UI from subscribing to updates from hidden queues, which results in improved performance of the page.

The setSubscriptionFilter lets you filter queues only by name or SID:

const visibleQueues = ["Everyone", "Sales"];

QueuesStats.setSubscriptionFilter((queue: { friendly_name: string; sid: string }) =>
  visibleQueues.includes(queue.friendly_name)
);

Add Additional Columns with SLA Metrics

The SLA metrics feature adds the following columns to Flex.QueuesStats.QueuesDataTable:

• SLA 30 min (key: sla-30min)

• SLA Today (key: sla-today)

• Handled 30 min (key: handled-tasks-30min)

• Handled Today (key: handled-tasks-today

• Abandoned 30 min (key: abandoned-tasks-30min)

• Abandoned Today (key: abandoned-tasks-today)

SLA metrics are calculated by both the last 30 minute floating window and the current business day.

In this snippet, Flex adds two columns to QueuesDataTable that show the number of short abandoned tasks in the last 30 minutes and for the day. You can use the QueuesDataTableCell in the content render function to add additional expandable rows of channel-specific data.

Configure SLA Thresholds and Business Day Start Times

You can configure the time a new business day starts and all SLA threshold values in the admin plugin or via the Flex Configuration API. There are three levels of SLA configurations:

• default
• queue_configurations
• queue_channel_configurations

Each lower level overrides the one above it. For example, a queue_configurations object has priority over the default configuration and a queue_channel_configurations object has priority over the default configuration and matching queue_configurations object.

The request body is validated by the Flex Configuration API and must adhere to the following requirements:

• Each request must include the default configuration, even if you set queue_configurations and/or queue_channel_configurations in the same request.
• Each configuration object included in the request must contain all required properties. The required properties for each configuration object type are as follows:
  • default
    • service_level_threshold
    • short_abandoned_threshold
    • reset_timezone
    • reset_time
  • queue_configurations
    • queue_sid
    • reset_timezone
    • reset_time
  • queue_channel_configurations
    • queue_sid
    • channel_sid
    • service_level_threshold
    • short_abandoned_threshold

List of SLA Metrics

The WorkerQueue data object is extended with the sla_30_min and sla_today keys. These keys are both of the type WorkerQueueSLA, which contains all available SLA metrics for queues:

• total_tasks_count
• handled_tasks_count
• handled_tasks_within_sl_threshold_count
• handled_tasks_within_sl_threshold_percentage
• short_abandoned_tasks_count
• short_abandoned_tasks_percentage
• abandoned_tasks_count
• abandoned_tasks_percentage
• flow_out_tasks_count
• flow_out_tasks_percentage
• sla_percentage

If a queue handles multiple channels, the SLA data is also available per channel. The channels key on the WorkerQueue contains an array of WorkerQueueChannel, which has the following keys:

• sid
• unique_name
• friendly_name
• sla_30_min (WorkerQueueSLA)
• sla_today (WorkerQueueSLA)

workerQueue.channels[0].sla_30_min.total_tasks_count

Subheaders and Header Colspan

You can add subheaders to columns using a subHeader property on ColumnDefinition.

If adjacent columns have the same header and you want to merge these table header cells, set the same headerColSpanKey on these columns.

Display Real-Time Queues View on a Monitor

To display queue statistics on a tv or a monitor, use the fullscreen view by clicking the small button in the bottom-right corner.

The button is hidden by default. To enable the button, set the following property:

QueuesStatsView.fullscreen.enabled = true