first commit

tests/e2e/features/dashboard/pages/dashboard.page.ts

@@ -0,0 +1,349 @@
+import { Locator, Page, expect } from '@playwright/test'
+import { BasePage } from '../../../core/pages/base.page'
+import { waitForNetworkIdle } from '../../../core/utils/test-helpers'
+
+/**
+ * Page object for the Dashboard page
+ */
+export class DashboardPage extends BasePage {
+  // Main elements
+  readonly pageTitle: Locator
+  readonly dateTimePicker: Locator
+
+  // Chart cards
+  readonly logVolumeChart: Locator
+  readonly tokenUsageChart: Locator
+  readonly costChart: Locator
+  readonly modelUsageChart: Locator
+
+  // Chart type toggles
+  readonly volumeChartToggle: Locator
+  readonly tokenChartToggle: Locator
+  readonly costChartToggle: Locator
+  readonly modelChartToggle: Locator
+
+  // Model filters
+  readonly costModelFilter: Locator
+  readonly usageModelFilter: Locator
+
+  constructor(page: Page) {
+    super(page)
+
+    // Main elements
+    this.pageTitle = page.getByRole('heading', { name: /Dashboard/i })
+    this.dateTimePicker = page.locator('[data-testid="dashboard-date-picker"]')
+
+    // Chart cards - using data-testid for robust selectors
+    this.logVolumeChart = page.locator('[data-testid="chart-log-volume"]')
+    this.tokenUsageChart = page.locator('[data-testid="chart-token-usage"]')
+    this.costChart = page.locator('[data-testid="chart-cost-total"]')
+    this.modelUsageChart = page.locator('[data-testid="chart-model-usage"]')
+
+    // Chart type toggles - using data-testid with actions suffix
+    // Volume and token charts have only ChartTypeToggle in the actions bar
+    this.volumeChartToggle = page.locator('[data-testid="chart-log-volume-actions"]').locator('button').filter({ has: page.locator('svg') })
+    this.tokenChartToggle = page.locator('[data-testid="chart-token-usage-actions"]').locator('button').filter({ has: page.locator('svg') })
+    // Cost and model charts have model filter + ChartTypeToggle; scope to ChartTypeToggle buttons only so getChartToggleState reads the right element
+    this.costChartToggle = page.locator('[data-testid="chart-cost-total-actions"]').locator('> div > div').last().locator('button')
+    this.modelChartToggle = page.locator('[data-testid="chart-model-usage-actions"]').locator('> div > div').last().locator('button')
+
+    // Model filters - select trigger inside each chart's actions area (opens dropdown; Radix uses role=combobox or data-slot=select-trigger)
+    this.costModelFilter = page.locator('[data-testid="chart-cost-total-actions"]').locator('[role="combobox"], [data-slot="select-trigger"]').first()
+    this.usageModelFilter = page.locator('[data-testid="chart-model-usage-actions"]').locator('[role="combobox"], [data-slot="select-trigger"]').first()
+  }
+
+  /**
+   * Navigate to the dashboard page
+   */
+  async goto(): Promise<void> {
+    await this.page.goto('/workspace/dashboard')
+    await waitForNetworkIdle(this.page)
+    // Wait for charts to load
+    await this.waitForChartsToLoad()
+  }
+
+  /**
+   * Check if dashboard is loaded
+   */
+  async isLoaded(): Promise<boolean> {
+    try {
+      await expect(this.pageTitle).toBeVisible({ timeout: 5000 })
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Close any open popups (date picker, dropdowns, etc.)
+   */
+  async closePopups(): Promise<void> {
+    // Check for open date picker dialog and close it
+    const datePickerDialog = this.page.locator('[data-radix-popper-content-wrapper]')
+    if (await datePickerDialog.isVisible().catch(() => false)) {
+      await this.page.keyboard.press('Escape')
+      await datePickerDialog.waitFor({ state: 'hidden', timeout: 2000 }).catch(() => {})
+    }
+    // Check for open listbox and close it
+    const listbox = this.page.locator('[role="listbox"]')
+    if (await listbox.isVisible().catch(() => false)) {
+      await this.page.keyboard.press('Escape')
+      await listbox.waitFor({ state: 'hidden', timeout: 2000 }).catch(() => {})
+    }
+  }
+
+  /** Period label map used by the date picker (must match UI) */
+  static readonly PERIOD_LABELS: Record<string, string> = {
+    '1h': 'Last hour',
+    '6h': 'Last 6 hours',
+    '24h': 'Last 24 hours',
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+  }
+
+  /**
+   * Get the date picker trigger button (the button that shows the current period and opens the popover).
+   * Identified by having the calendar icon so we don't match preset buttons inside the popover.
+   */
+  getDatePickerTrigger(): Locator {
+    return this.page.locator('button').filter({ has: this.page.locator('svg') }).filter({ hasText: /Last|Pick/i }).first()
+  }
+
+  /**
+   * Get the currently displayed period label from the date picker trigger (what the user sees as selected).
+   */
+  async getSelectedPeriodLabel(): Promise<string> {
+    const trigger = this.getDatePickerTrigger()
+    await trigger.waitFor({ state: 'visible', timeout: 5000 })
+    const text = await trigger.textContent()
+    return (text ?? '').trim()
+  }
+
+  /**
+   * Select a predefined time period
+   */
+  async selectTimePeriod(period: '1h' | '6h' | '24h' | '7d' | '30d'): Promise<void> {
+    await this.closePopups()
+
+    const trigger = this.getDatePickerTrigger()
+    await trigger.click()
+
+    // Wait for dialog to open
+    await this.page.waitForSelector('[data-radix-popper-content-wrapper]', { timeout: 5000 }).catch(() => {})
+
+    const label = DashboardPage.PERIOD_LABELS[period]
+    await this.page.getByRole('button', { name: label }).click()
+
+    // Wait for dialog to close
+    await this.page.locator('[data-radix-popper-content-wrapper]').waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
+
+    await waitForNetworkIdle(this.page)
+  }
+
+  /**
+   * Get the inactive toggle button from a set of buttons (the one to click to switch chart type).
+   */
+  private async getInactiveToggleButtonFrom(buttons: Locator): Promise<Locator> {
+    const count = await buttons.count()
+
+    for (let i = 0; i < count; i++) {
+      const btn = buttons.nth(i)
+      const className = await btn.getAttribute('class').catch(() => '')
+      const hasActive = await btn.evaluate((el) => el.hasAttribute('active')).catch(() => false)
+
+      if (!className?.includes('bg-secondary') && !hasActive) {
+        return btn
+      }
+    }
+
+    throw new Error(`No inactive toggle button found among ${count} buttons`)
+  }
+
+  /**
+   * Get the inactive toggle button (the one to click to switch chart type) from a full actions container.
+   */
+  private async getInactiveToggleButton(actionsContainer: Locator): Promise<Locator> {
+    const buttons = actionsContainer.locator('button')
+    return this.getInactiveToggleButtonFrom(buttons)
+  }
+
+  /**
+   * Toggle chart type for volume chart (clicks inactive button to switch)
+   */
+  async toggleVolumeChartType(): Promise<void> {
+    await this.dismissToasts()
+    await this.closePopups()
+    const actionsContainer = this.page.locator('[data-testid="chart-log-volume-actions"]')
+    const toggleBtn = await this.getInactiveToggleButton(actionsContainer)
+    await toggleBtn.waitFor({ state: 'visible' })
+    await toggleBtn.click()
+    await this.page.waitForLoadState('networkidle').catch(() => {})
+  }
+
+  /**
+   * Toggle chart type for token chart
+   */
+  async toggleTokenChartType(): Promise<void> {
+    await this.dismissToasts()
+    await this.closePopups()
+    const actionsContainer = this.page.locator('[data-testid="chart-token-usage-actions"]')
+    const toggleBtn = await this.getInactiveToggleButton(actionsContainer)
+    await toggleBtn.waitFor({ state: 'visible' })
+    await toggleBtn.click()
+    await this.page.waitForLoadState('networkidle').catch(() => {})
+  }
+
+  /**
+   * Toggle chart type for cost chart.
+   * Scopes to the ChartTypeToggle only (excludes the model dropdown in the same actions bar).
+   */
+  async toggleCostChartType(): Promise<void> {
+    await this.dismissToasts()
+    await this.closePopups()
+    const actionsContainer = this.page.locator('[data-testid="chart-cost-total-actions"]')
+    // ChartTypeToggle is the last child in the actions bar; its two buttons are the bar/line toggles only
+    const chartTypeButtons = actionsContainer.locator('> div > div').last().locator('button')
+    const toggleBtn = await this.getInactiveToggleButtonFrom(chartTypeButtons)
+    await toggleBtn.waitFor({ state: 'visible' })
+    await toggleBtn.click()
+    await this.page.waitForLoadState('networkidle').catch(() => {})
+  }
+
+  /**
+   * Toggle chart type for model chart.
+   * Scopes to the ChartTypeToggle only (excludes the model dropdown in the same actions bar).
+   */
+  async toggleModelChartType(): Promise<void> {
+    await this.dismissToasts()
+    await this.closePopups()
+    const actionsContainer = this.page.locator('[data-testid="chart-model-usage-actions"]')
+    // ChartTypeToggle is the last child in the actions bar; its two buttons are the bar/line toggles only
+    const chartTypeButtons = actionsContainer.locator('> div > div').last().locator('button')
+    const toggleBtn = await this.getInactiveToggleButtonFrom(chartTypeButtons)
+    await toggleBtn.waitFor({ state: 'visible' })
+    await toggleBtn.click()
+    await this.page.waitForLoadState('networkidle').catch(() => {})
+  }
+
+  /**
+   * Filter cost chart by model. Opens the model dropdown, then selects the option.
+   */
+  async filterCostChartByModel(model: string): Promise<void> {
+    await this.dismissToasts()
+    await this.costModelFilter.waitFor({ state: 'visible' })
+    // Open the dropdown by clicking the trigger
+    await this.costModelFilter.click()
+    // Wait for dropdown to open (option becomes visible in portal)
+    const optionName = model === 'all' ? 'All Models' : model
+    await this.page.getByRole('option', { name: optionName }).waitFor({ state: 'visible', timeout: 5000 })
+    await this.page.getByRole('option', { name: optionName }).click()
+    // Wait for dropdown to close and data to refresh
+    await this.page.getByRole('option', { name: optionName }).waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
+    await waitForNetworkIdle(this.page)
+  }
+
+  /**
+   * Filter usage chart by model. Opens the model dropdown, then selects the option.
+   */
+  async filterUsageChartByModel(model: string): Promise<void> {
+    await this.dismissToasts()
+    await this.usageModelFilter.waitFor({ state: 'visible' })
+    // Open the dropdown by clicking the trigger
+    await this.usageModelFilter.click()
+    // Wait for dropdown to open (option becomes visible in portal)
+    const optionName = model === 'all' ? 'All Models' : model
+    await this.page.getByRole('option', { name: optionName }).waitFor({ state: 'visible', timeout: 5000 })
+    await this.page.getByRole('option', { name: optionName }).click()
+    // Wait for dropdown to close and data to refresh
+    await this.page.getByRole('option', { name: optionName }).waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
+    await waitForNetworkIdle(this.page)
+  }
+
+  /**
+   * Check if chart is visible
+   */
+  async isChartVisible(chartTitle: string): Promise<boolean> {
+    // Map chart titles to test IDs
+    const testIdMap: Record<string, string> = {
+      'Request Volume': 'chart-log-volume',
+      'Token Usage': 'chart-token-usage',
+      'Cost': 'chart-cost-total',
+      'Model Usage': 'chart-model-usage',
+    }
+    const testId = testIdMap[chartTitle]
+    if (testId) {
+      return await this.page.locator(`[data-testid="${testId}"]`).isVisible()
+    }
+    // Fallback for unknown titles
+    const chart = this.page.locator(`text=${chartTitle}`).locator('..').locator('..')
+    return await chart.isVisible()
+  }
+
+  /**
+   * Check if chart is loading
+   */
+  async isChartLoading(chartTitle: string): Promise<boolean> {
+    // Map chart titles to test IDs
+    const testIdMap: Record<string, string> = {
+      'Request Volume': 'chart-log-volume',
+      'Token Usage': 'chart-token-usage',
+      'Cost': 'chart-cost-total',
+      'Model Usage': 'chart-model-usage',
+    }
+    const testId = testIdMap[chartTitle]
+    if (testId) {
+      const chartCard = this.page.locator(`[data-testid="${testId}"]`)
+      const skeleton = chartCard.locator('[data-testid="skeleton"]')
+      return await skeleton.isVisible().catch(() => false)
+    }
+    // Fallback for unknown titles
+    const chartCard = this.page.locator(`text=${chartTitle}`).locator('..').locator('..')
+    const skeleton = chartCard.locator('[data-testid="skeleton"]').or(chartCard.locator('.skeleton'))
+    return await skeleton.isVisible().catch(() => false)
+  }
+
+  /**
+   * Get URL parameters
+   */
+  getUrlParams(): URLSearchParams {
+    return new URLSearchParams(this.page.url().split('?')[1] || '')
+  }
+
+  /**
+   * Get chart toggle state (checks aria-pressed, data-state, or active class)
+   */
+  async getChartToggleState(toggle: Locator): Promise<string | null> {
+    // Handle case where toggle might match multiple elements
+    const firstToggle = toggle.first()
+
+    // Try aria-pressed first (for button toggles)
+    const ariaPressed = await firstToggle.getAttribute('aria-pressed').catch(() => null)
+    if (ariaPressed) {
+      return ariaPressed
+    }
+    // Try data-state (for switch components)
+    const dataState = await firstToggle.getAttribute('data-state').catch(() => null)
+    if (dataState) {
+      return dataState
+    }
+    // Check if button is active (has active class or attribute)
+    const classAttr = await firstToggle.getAttribute('class').catch(() => null)
+    if (classAttr?.includes('bg-secondary')) {
+      return 'active'
+    }
+    // Check for [active] attribute
+    const isActive = await firstToggle.evaluate((el) => el.hasAttribute('active')).catch(() => false)
+    if (isActive) {
+      return 'active'
+    }
+    return 'inactive'
+  }
+
+  /**
+   * Get selected model from filter combobox
+   */
+  async getSelectedModel(filter: Locator): Promise<string | null> {
+    const selectedText = await filter.textContent()
+    return selectedText
+  }
+}