diff --git a/docs/docs/feature-library/queues-stats-metrics.md b/docs/docs/feature-library/queues-stats-metrics.md index 65bd97037..f0998e9c0 100644 --- a/docs/docs/feature-library/queues-stats-metrics.md +++ b/docs/docs/feature-library/queues-stats-metrics.md @@ -6,13 +6,21 @@ title: queues-stats-metrics ## Overview The Flex Real Time Queues view can be enhanced by adding columns with other queue metrics to the [Queues Data Table](https://www.twilio.com/docs/flex/developer/ui/queues-view-programmability#modify-the-queuesdatatable). +This feature can be configured to add the following additional metrics columns: +- Assigned + - The number of active tasks that are assigned +- In wrap up + - The number of active tasks that are wrapping +- Activity + - Displays the number of agents per activity, rather than per availability, unlike the out of box column + Natively Flex displays the Active tasks count per queue. The Active task count is the sum of _Assigned_ Tasks and _Wrapping_ Tasks. Displaying these metrics separately may give Supervisors additional insight into how their agents are performing. +You may also use this feature as a starting point to implement your own custom metrics. + ## Setup This feature can be enabled via the `flex-config` attributes. Just set the `queues_stats_metrics` `enabled` flag to `true` and enable the new columns as needed. -The `agent_activity_stats_column` shows a Data icon that can be clicked to pop-up a small window to display the agent count per activity for that queue. - ```json "queues_stats_metrics": { "enabled": false, diff --git a/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueueActivityStats/QueueActivityStats.tsx b/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueueActivityStats/QueueActivityStats.tsx index 277de52c9..ca81e61d3 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueueActivityStats/QueueActivityStats.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueueActivityStats/QueueActivityStats.tsx @@ -2,35 +2,28 @@ import { Icon } from '@twilio/flex-ui'; import { ActivityStatistic } from '@twilio/flex-ui/src/state/QueuesState'; import * as React from 'react'; import { Text } from '@twilio-paste/core/text'; -import { Heading } from '@twilio-paste/core/heading'; -import { Separator } from '@twilio-paste/core/separator'; import { PopoverContainer, PopoverButton, Popover } from '@twilio-paste/core/popover'; interface ComponentProps { - queueName: string; activityStats: ActivityStatistic[]; } const QueueActivityStats = (props: ComponentProps) => { - const { queueName, activityStats } = props; + const { activityStats } = props; let total = 0; activityStats.forEach((ac: ActivityStatistic) => { total += ac.workers; }); return ( - + - - {queueName} - - {activityStats.map((ac: ActivityStatistic) => { - if (ac.workers > 0) return {`${ac.friendly_name}: ${ac.workers}`}; - return ; + if (ac.workers > 0) return {`${ac.friendly_name}: ${ac.workers}`}; + return ; })} diff --git a/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueuesDataTableColumns.tsx b/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueuesDataTableColumns.tsx index 1b35cc2b3..58cfcfc31 100644 --- a/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueuesDataTableColumns.tsx +++ b/plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueuesDataTableColumns.tsx @@ -28,6 +28,9 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle const assignedTasks = queue.tasks_by_status?.assigned || 0; return {assignedTasks}; }} + sortingFn={(a: WorkerQueue, b: WorkerQueue) => + (a.tasks_by_status?.assigned || 0) > (b.tasks_by_status?.assigned || 0) ? 1 : -1 + } {...props} />, { sortOrder: 0 }, @@ -47,6 +50,9 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle const wrappingTasks = queue.tasks_by_status?.wrapping || 0; return {wrappingTasks}; }} + sortingFn={(a: WorkerQueue, b: WorkerQueue) => + (a.tasks_by_status?.wrapping || 0) > (b.tasks_by_status?.wrapping || 0) ? 1 : -1 + } {...props} />, { sortOrder: 0 }, @@ -63,7 +69,7 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle header={(manager.strings as any)[StringTemplates.AgentActivityHeader]} subHeader={manager.strings.QueuesStatsSubHeaderNow} content={(queue: WorkerQueue) => { - return ; + return ; }} {...props} />,