Redesign Overview page with charts, cost data, and improved layout

[r2dedios]

Summary

Redesign the Overview page into a proper operational dashboard with charts, cost visibility, and richer aggregated metrics. No database schema changes required — all data is sourced from existing tables, tags, and materialized views.

Layout

Row 1 — Summary cards (Gallery, 4 cards)

1. Accounts — grouped by provider (AWS/GCP/Azure icons at 1.4em + count per provider + total)
2. Clusters by Provider — grouped by provider (OpenShift icon + count per provider + total excluding Terminated)
3. Clusters by Status — running/stopped/terminated with status icons + total (running + stopped only)
4. Last Scan Timestamp — formatted locale timestamp

The previous 3 individual provider cards (AWS/GCP/Azure) and the Instances card are removed.

Row 2 — Donut chart + ranked lists (2-column grid)

Left column:

• Donut chart: Clusters by Partner — from tag key='Partner' on instances, joined to clusters. Shows ALL partners (no limit). Donut rendered at 280×280px with custom HTML legend using theme-aware colors. Center label shows total cluster count with theme-aware text color.

Right column (2×2 grid of ranked-list cards):

• Cost per Account — account name + $X.XX formatted cost from m_accounts_full_view.current_month_so_far_cost
• Top 5 Regions — by non-terminated cluster count
• Top 5 Owners — by non-terminated cluster count (excluding empty owners)
• Top 5 Partners — by non-terminated cluster count (.slice(0, 5) on frontend; backend returns all for the donut)

Each ranked-list card uses a simple flex layout with name on the left, value on the right, separated by subtle border lines.

Row 3 — Recent Events table (unchanged)

No changes to content, position, or behavior. Auto-refresh via React Query polling (5s).

Backend Changes

Extended GET /api/v1/overview response

New fields added to the existing response:

{
  "topRegions": [{ "name": "us-east-1", "clusterCount": 8 }],
  "topOwners": [{ "name": "jsmith@redhat.com", "clusterCount": 5 }],
  "clustersByPartner": [{ "name": "Red Hat", "clusterCount": 3 }],
  "costPerAccount": [{ "accountName": "my-account", "currentMonthCost": 1234.56 }]
}

SQL queries (no schema changes)

• Top regions: SELECT region AS name, COUNT(*) AS cluster_count FROM clusters WHERE status != 'Terminated' GROUP BY region ORDER BY cluster_count DESC LIMIT $1
• Top owners: SELECT owner AS name, COUNT(*) AS cluster_count FROM clusters WHERE status != 'Terminated' AND owner != '' GROUP BY owner ORDER BY cluster_count DESC LIMIT $1
• Clusters by partner: SELECT t.value AS name, COUNT(DISTINCT c.cluster_id) AS cluster_count FROM tags t JOIN instances i ON t.instance_id = i.id JOIN clusters c ON i.cluster_id = c.id WHERE t.key = 'Partner' AND c.status != 'Terminated' GROUP BY t.value ORDER BY cluster_count DESC
• Cost per account: SELECT account_name, current_month_so_far_cost FROM m_accounts_full_view ORDER BY current_month_so_far_cost DESC

Backend files modified

File	Change
internal/inventory/summary.go	Add TopItem, AccountCost structs, extend OverviewSummary
internal/models/dto/overview_dto.go	Mirror structs as DTOs with json tags, converter functions
internal/models/dto/overview_dto_test.go	Unit tests for new converters
internal/services/overview_service.go	Wire 4 new repository calls into GetOverview
internal/repositories/cluster_repository.go	Add GetTopRegions, GetTopOwners, GetClustersByPartner
internal/repositories/account_repository.go	Add GetCostPerAccount
internal/db_client/db_client.go	Add QuerySelectContext for multi-row raw SQL queries

Frontend Changes

New dependencies

• @patternfly/react-charts v8 + Victory peer dependencies

New components

• PartnerDonutChart.tsx — donut chart with custom HTML legend (theme-aware colors)
• TopMetricCard.tsx — reusable ranked-list card with optional formatValue prop for currency
• CostBarChart.tsx — (unused, kept for potential future use)
• Overview.css — explicit card borders to override Victory CSS

Modified components

• Overview.tsx — restructured to 3-row layout using native CSS grid/flex
• CardData.tsx — rewrote card generation: removed instances/provider cards, added accounts/clusters-by-provider/clusters-by-status
• constants.tsx — enlarged provider icons to 1.4em
• types.ts — updated DashboardState with new fields
• data-contracts.ts — added TopItemApi, AccountCostApi types

Dark mode support

• All chart text uses var(--pf-t--global--text--color--regular) for theme-aware rendering
• Donut center label rendered as positioned HTML div instead of SVG text
• Card borders use var(--pf-t--global--border--color--default)

Test data

Updated db/test_files/load_example_data.sql with comprehensive fake data:

• 5 accounts across 3 providers (3 AWS, 1 GCP, 1 Azure)
• 19 clusters with mixed statuses (Running/Stopped/Terminated)
• ~85 instances with provider-appropriate types
• 5 tags per instance (Name, Owner, Partner, Team, Environment)
• 7 distinct Partners, 8 distinct owners, 10+ regions
• 60 days of expenses per active instance
• Realistic events, scheduled actions, and cron actions

Testing

• make local-build — compiles successfully
• make lint — 0 issues
• make console-lint — 0 errors (8 pre-existing warnings in unrelated file)
• Visual verification via make console-start-dev with dev compose environment