Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Queues View Programmability

BETA


This Twilio product is currently available as a beta release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Beta products are not covered by a Twilio SLA.

See this article for more information on beta product support.

This feature is in Public Beta. You can enable the 'Real-time Queues View' from the Pre-Release Features Page.

Real-Time Queues Dashboard Annotated

QueuesStatsView Component

The Real-time Queues View is rendered by QueuesStatsView component. QueuesStatsView is a programmable component that contains:

  1. QueuesStats.AggregatedQueuesDataTiles (key: tiles)
  2. QueuesStats.QueuesDataTable (key: table)

As a programmable component, you can modify QueuesStatsView via the Content property.

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

Adding/Removing Individual Data Tiles

To add custom tiles or remove existing ones, use QueuesStats.AggregatedQueuesDataTiles programmable component.

import * as Flex from "@twilio/flex-ui";
import { connect } from "react-redux";

// Connect to Flex's redux store and display the number of wrapping tasks
const WrappingTasksTile = connect((state: Flex.FlexState) => ({
  wrappingTasks: state.flex.realtimeQueues.workspaceStats
    ? state.flex.realtimeQueues.workspaceStats.tasks_by_status.wrapping.toString()
    : ""
}))(({ wrappingTasks }) => (
  <Flex.AggregatedDataTile title="Wrapping Tasks" content={wrappingTasks} />
));


// Add the WrappingTasksTile to the view
Flex.QueuesStats.AggregatedQueuesDataTiles.Content.add(
  <WrappingTasksTile key="wrapping-tasks-tile" />,
  { sortOrder: -1 }
);

Aggregated data tiles present out of the box have the following keys:

  • active-tasks-tile
  • waiting-tasks-tile
  • longest-wait-time-tile
  • agents-by-activity-chart-tile

Modifying QueuesDataTable

To add or remove columns in the QueuesDataTable, use QueuesStats.QueuesDataTable programmable component. Default columns have the following keys:

  • friendly-name
  • active-tasks
  • waiting-tasks
  • longest-wait-time
  • agents

To add a column, add a ColumnDefinition component to QueuesStats.QueuesDataTable.

In the example below, you will add a column that will display happy emoji next to a queue if the waiting time is lower than a minute, or a sad emoji if it's higher than that.

import * as Flex from "@twilio/flex-ui";

const WaitTimeIndicator = (workerQueue: Flex.QueuesStats.WorkerQueue) =>
  workerQueue.longest_task_waiting_age > 60 ? "☹️" : "🙂";

Flex.QueuesStats.QueuesDataTable.Content.add(
  <Flex.ColumnDefinition
    key="wait-time-indicator"
    header=""
    content={WaitTimeIndicator}
  />,
  { sortOrder: -1 }
);

This approach can be used for custom formatting of any column. Remove the original column and create a new one with your custom formatting.

In this example, you show the number of waiting tasks in red, if it's higher than 10.

// Remove the original column
Flex.QueuesStats.QueuesDataTable.Content.remove("waiting-tasks");

// Create a new column with custom formatting
Flex.QueuesStats.QueuesDataTable.Content.add(
  <ColumnDefinition
    key="my-waiting-tasks"
    header="Waiting tasks"
    content={(queue: Flex.QueuesStats.WorkerQueue) => {
      // Calculate number of waiting tasks by adding pending and reserved
      const { pending, reserved } = queue.tasks_by_status;
      const waitingTasks = pending + reserved;

      // Set the style to color: red if # of waiting tasks is > 10
      const spanStyle = waitingTasks > 10 ? { color: "red" } : {};

      // Return the element to render
      return <span style={spanStyle}>{waitingTasks}</span>;
    }}
  />,
  { sortOrder: 1 } // Put this after the second column
);

The sorting capabilities are only available in @twilio/flex-ui@1.14.0 and later.

By default, the QueuesDataTable allows you to click on the header of a predefined column to sort the table by those values.

This behavior can be disabled programmatically at any time:

Flex.QueuesStats.QueuesDataTable.sortable = false;

Sorting in Custom Columns

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

In this example, you will 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}
  />
);

The filtering is only available in @twilio/flex-ui@1.14.0 and later.

Out of the box, all of your Queues will be displayed in the UI. If you wish to hide any of them or show only the specific ones, you can apply a filter:

Flex.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.

The filtering will not affect the numbers in Agents aggregated panel. Please note that using the filter might cause some discrepancy between the number of agents you see in the QueuesDataTable and the Agents panel.

The fullscreen view is only available in @twilio/flex-ui@1.14.0 and later.

To display the queue statistics on a tv or a monitor, you can bring the view fullscreen, hiding everything else, with a small button in the bottom right corner.

To enable the button (hidden by default), set the following property:

Flex.QueuesStatsView.fullscreen.enabled = true

Read more about Real-time Queues View.

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.