BranchUsageTable

1"use client";
2 
3import { useState } from "react";
4import type { ComponentProps, ReactNode } from "react";
5 
6import { Skeleton } from "@/components/ui/skeleton";
7import { cn } from "@/lib/utils";
8 
9export interface BranchUsageColumn {
10  /** Keys into each row's `metrics`, e.g. "compute_unit_seconds". */
11  id: string;
12  /** Column header, e.g. "Compute". */
13  label: string;
14  /** Unit suffix beside the header, e.g. "CU-hrs". */
15  unit?: string;
16  /** Per-column formatter; falls back to two decimals. */
17  format?: (value: number) => string;
18}
19 
20export interface BranchUsageRow {
21  /** Branch id, e.g. "br-young-sky-a1b2c3d4". */
22  id: string;
23  /** Branch name, e.g. "main" or "ci/pr-4821". */
24  name: string;
25  /** Column id -> value, already converted to the display unit. */
26  metrics: Record<string, number>;
27  /** Marks the project's default branch. */
28  isDefault?: boolean;
29  /** Marks a protected branch. */
30  isProtected?: boolean;
31  /** Quiet second line, e.g. the parent branch or last-active time. */
32  hint?: string;
33}
34 
35export type SortDirection = "asc" | "desc";
36 
37export interface BranchUsageSort {
38  /** Column id to sort by. */
39  columnId: string;
40  direction: SortDirection;
41}
42 
43export type BranchUsageTableProps = Omit<
44  ComponentProps<"section">,
45  "children" | "onSelect"
46> & {
47  /** One row per branch. */
48  rows: BranchUsageRow[];
49  /** Metric columns in display order; the first is the default sort. */
50  columns: BranchUsageColumn[];
51  /**
52   * "table" compares branches across metrics; "list" reads as a ranking
53   * of one. "auto" picks list for a single column, because one metric per
54   * row is a list and a table shape only adds a header and an axis.
55   */
56  layout?: "auto" | "table" | "list";
57  /** Panel heading. */
58  title?: string;
59  /** Controlled sort. */
60  sort?: BranchUsageSort;
61  /** Uncontrolled initial sort; defaults to the first column, descending. */
62  defaultSort?: BranchUsageSort;
63  onSortChange?: (sort: BranchUsageSort) => void;
64  /**
65   * Show only the top N rows and collapse the rest into one row that
66   * expands. Branch fleets run to hundreds; a table that long answers
67   * nothing.
68   */
69  topN?: number;
70  /** Adds a muted totals row across every branch, collapsed ones included. */
71  showTotals?: boolean;
72  /** Makes rows clickable, e.g. to open the branch. */
73  onSelectBranch?: (row: BranchUsageRow) => void;
74  /** Right-side header slot, e.g. a project filter. */
75  action?: ReactNode;
76  isLoading?: boolean;
77  error?: string | null;
78// … truncated