Frontend: Display Duo Agent Platform flow metrics table in usage dashboard

Summary

Add a table to the Duo Usage dashboard to display Duo Agent Platform flow-level metrics. This frontend work depends on the GraphQL endpoint being added in #581378.

Context

As part of delivering the Duo Agent Platform metrics dashboard for 18.7, we need to display flow-level metrics in a table format within the existing Duo Usage dashboard at https://gitlab.com/groups/gitlab-org/-/analytics/dashboards/duo_and_sdlc_trends.

Design: https://gitlab.com/gitlab-org/gitlab/-/issues/578276/designs/Panels_-_all_flow_metrics.png

Backend issue: #581378

Proposal

Build a new table component in the Duo Usage dashboard that displays the following metrics per flow:

Requirements

1. Table columns:
   • Flow
   • Number of sessions
   • Avg. Median duration (min)
   • Unique users
   • Completion rate (%)
2. Sorting:
   • Add the ability to sort by:
     • Number of sessions
     • Avg. Median duration (min)
     • Unique users
3. Data source:
   • Consume the agentPlatform attribute from the aiMetrics GraphQL endpoint (being added in #581378)

GraphQL Query Example

query {
  group(fullPath:"gitlab-org") {
    aiMetrics(startDate: "2024-11-17", endDate: "2025-11-17") {
      agentPlatform {
        flowMetrics {
          flowName
          sessionCount
          averageExecutionTime
          uniqueUsersCount
          completionRate
        }
      }
    }
  }
}

Implementation Notes

• The backend GraphQL endpoint is being developed in #581378
• This table should be added as a new panel in the existing Duo Usage dashboard
• Follow existing patterns used in the dashboard for consistency