Skip to content

fix(tui): give every table one shared column scale #2217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
notgitika wants to merge 1 commit into
base: refactor
Choose a base branch
from
Draft

fix(tui): give every table one shared column scale #2217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/AbTestPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface AbTestRow extends Record<string, unknown> {
abTestId: string;
Expand All @@ -16,9 +16,9 @@ interface AbTestRow extends Record<string, unknown> {

export const abTestColumns = [
{ key: "name", header: "name", flex: true },
{ key: "status", header: "status", width: 14 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "executionStatus", header: "execution", width: 12 },
{ key: "updatedAt", header: "updated UTC", width: 16, render: formatTimestamp },
{ key: "updatedAt", header: "updated UTC", width: TIMESTAMP_WIDTH, render: formatTimestamp },
] satisfies DataTableColumn<AbTestRow>[];

function toRow(summary: ABTestSummary): AbTestRow {
Expand Down
6 changes: 3 additions & 3 deletions src/components/BatchEvaluationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// BatchEvaluationRow is the flat, display-ready shape the table renders. It also
// satisfies DataTable's `T extends Record<string, unknown>` constraint, which the
Expand All @@ -19,11 +19,11 @@ interface BatchEvaluationRow extends Record<string, unknown> {

export const batchEvaluationColumns = [
{ key: "name", header: "name", flex: true },
{ key: "status", header: "status", width: 22 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<BatchEvaluationRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/BatchInsightsPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface BatchInsightsRow extends Record<string, unknown> {
batchEvaluationId: string;
Expand All @@ -15,11 +15,11 @@ interface BatchInsightsRow extends Record<string, unknown> {

const batchInsightsColumns = [
{ key: "name", header: "name", flex: true },
{ key: "status", header: "status", width: 22 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<BatchInsightsRow>[];
Expand Down
4 changes: 2 additions & 2 deletions src/components/ConfigBundlePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface ConfigBundleRow extends Record<string, unknown> {
bundleId: string;
Expand All @@ -19,7 +19,7 @@ export const configBundleColumns = [
{
key: "createdAt",
header: "created UTC",
width: 16,
width: TIMESTAMP_WIDTH,
minWidth: 11,
render: formatTimestamp,
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/ConfigBundleVersionPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface ConfigBundleVersionRow extends Record<string, unknown> {
versionId: string;
Expand All @@ -19,7 +19,7 @@ export const configBundleVersionColumns = [
{
key: "versionCreatedAt",
header: "created UTC",
width: 16,
width: TIMESTAMP_WIDTH,
minWidth: 11,
render: formatTimestamp,
},
Expand Down
14 changes: 10 additions & 4 deletions src/components/DatasetPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import {
COUNT_WIDTH,
NUMERIC_ALIGN,
STATUS_WIDTH,
TIMESTAMP_WIDTH,
type DataTableColumn,
} from "./ui/data-table";

interface DatasetRow extends Record<string, unknown> {
datasetId: string;
Expand All @@ -17,13 +23,13 @@ interface DatasetRow extends Record<string, unknown> {

export const datasetColumns = [
{ key: "datasetName", header: "name", flex: true },
{ key: "status", header: "status", width: 14 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "schemaType", header: "schema", width: 12 },
{ key: "exampleCount", header: "examples", width: 8 },
{ key: "exampleCount", header: "examples", width: COUNT_WIDTH, align: NUMERIC_ALIGN },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<DatasetRow>[];
Expand Down
4 changes: 2 additions & 2 deletions src/components/EvaluatorPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// EvaluatorRow is the flat, display-ready shape the table renders. It also
// satisfies DataTable's `T extends Record<string, unknown>` constraint, which the
Expand All @@ -24,7 +24,7 @@ export const evaluatorColumns = [
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<EvaluatorRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/GatewayConnectorPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface GatewayConnectorRow extends Record<string, unknown> {
targetId: string;
Expand All @@ -15,11 +15,11 @@ interface GatewayConnectorRow extends Record<string, unknown> {

export const gatewayConnectorColumns = [
{ key: "name", header: "name", flex: true },
{ key: "status", header: "status", width: 18 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<GatewayConnectorRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/GatewayPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface GatewayRow extends Record<string, unknown> {
gatewayId: string;
Expand All @@ -17,13 +17,13 @@ interface GatewayRow extends Record<string, unknown> {

export const gatewayColumns = [
{ key: "name", header: "name", flex: true },
{ key: "status", header: "status", width: 16 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "protocol", header: "protocol", width: 12 },
{ key: "authorizer", header: "authorizer", width: 18 },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<GatewayRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/GatewayRulePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useNavigate } from "react-router";
import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { COUNT_WIDTH, NUMERIC_ALIGN, STATUS_WIDTH, type DataTableColumn } from "./ui/data-table";

interface GatewayRuleRow extends Record<string, unknown> {
ruleId: string;
Expand All @@ -13,8 +13,8 @@ interface GatewayRuleRow extends Record<string, unknown> {
}

export const gatewayRuleColumns = [
{ key: "priority", header: "priority", width: 10 },
{ key: "status", header: "status", width: 13 },
{ key: "priority", header: "priority", width: COUNT_WIDTH, align: NUMERIC_ALIGN },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "description", header: "description", flex: true },
{
key: "ruleId",
Expand Down
6 changes: 3 additions & 3 deletions src/components/GatewayTargetPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface GatewayTargetRow extends Record<string, unknown> {
targetId: string;
Expand All @@ -17,11 +17,11 @@ interface GatewayTargetRow extends Record<string, unknown> {
export const gatewayTargetColumns = [
{ key: "name", header: "name", flex: true },
{ key: "type", header: "type", width: 18 },
{ key: "status", header: "status", width: 18 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<GatewayTargetRow>[];
Expand Down
10 changes: 5 additions & 5 deletions src/components/HarnessEndpointPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { FLAG_ALIGN, STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// EndpointRow is the flat, display-ready shape the table renders.
interface EndpointRow extends Record<string, unknown> {
Expand All @@ -17,13 +17,13 @@ interface EndpointRow extends Record<string, unknown> {

export const harnessEndpointColumns = [
{ key: "endpointName", header: "name", flex: true },
{ key: "liveVersion", header: "live", width: 6, minWidth: 5 },
{ key: "targetVersion", header: "target", width: 6 },
{ key: "status", header: "status", width: 13 },
{ key: "liveVersion", header: "live", width: 6, minWidth: 5, align: FLAG_ALIGN },
{ key: "targetVersion", header: "target", width: 6, align: FLAG_ALIGN },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<EndpointRow>[];
Expand Down
14 changes: 10 additions & 4 deletions src/components/HarnessPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import {
NUMERIC_ALIGN,
STATUS_WIDTH,
TIMESTAMP_WIDTH,
VERSION_WIDTH,
type DataTableColumn,
} from "./ui/data-table";

// HarnessRow is the flat, display-ready shape the table renders. It also satisfies
// DataTable's `T extends Record<string, unknown>` constraint, which the SDK's
Expand All @@ -19,12 +25,12 @@ interface HarnessRow extends Record<string, unknown> {

export const harnessColumns = [
{ key: "harnessName", header: "name", flex: true },
{ key: "harnessVersion", header: "version", width: 7 },
{ key: "status", header: "status", width: 13 },
{ key: "harnessVersion", header: "version", width: VERSION_WIDTH, align: NUMERIC_ALIGN },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<HarnessRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/HarnessVersionPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// VersionRow is the flat, display-ready shape the table renders.
interface VersionRow extends Record<string, unknown> {
Expand All @@ -16,11 +16,11 @@ interface VersionRow extends Record<string, unknown> {

export const harnessVersionColumns = [
{ key: "harnessVersion", header: "version", flex: true },
{ key: "status", header: "status", width: 13, minWidth: 6 },
{ key: "status", header: "status", width: STATUS_WIDTH, minWidth: 6 },
{
key: "createdAt",
header: "created UTC",
width: 16,
width: TIMESTAMP_WIDTH,
minWidth: 11,
render: formatTimestamp,
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/MemoryPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

interface MemoryRow extends Record<string, unknown> {
memoryId: string;
Expand All @@ -14,11 +14,11 @@ interface MemoryRow extends Record<string, unknown> {

export const memoryColumns = [
{ key: "memoryId", header: "id", flex: true },
{ key: "status", header: "status", width: 13 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<MemoryRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/OnlineEvalPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// OnlineEvalRow is the flat, display-ready shape the table renders. It also
// satisfies DataTable's `T extends Record<string, unknown>` constraint, which the
Expand All @@ -21,12 +21,12 @@ interface OnlineEvalRow extends Record<string, unknown> {

export const onlineEvalColumns = [
{ key: "configName", header: "name", flex: true },
{ key: "status", header: "status", width: 12 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "executionStatus", header: "execution", width: 11 },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<OnlineEvalRow>[];
Expand Down
6 changes: 3 additions & 3 deletions src/components/OnlineInsightPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ScreenProps } from "../handlers/types";
import { coreOptsFromCtx } from "../handlers/utils";
import { formatTimestamp } from "./formatTimestamp";
import { PaginatedTablePicker } from "./PaginatedTablePicker";
import type { DataTableColumn } from "./ui/data-table";
import { STATUS_WIDTH, TIMESTAMP_WIDTH, type DataTableColumn } from "./ui/data-table";

// OnlineInsightRow is the flat, display-ready shape the table renders. It also
// satisfies DataTable's `T extends Record<string, unknown>` constraint, which the
Expand All @@ -21,12 +21,12 @@ interface OnlineInsightRow extends Record<string, unknown> {

const onlineInsightColumns = [
{ key: "configName", header: "name", flex: true },
{ key: "status", header: "status", width: 12 },
{ key: "status", header: "status", width: STATUS_WIDTH },
{ key: "executionStatus", header: "execution", width: 11 },
{
key: "updatedAt",
header: "updated UTC",
width: 16,
width: TIMESTAMP_WIDTH,
render: formatTimestamp,
},
] satisfies DataTableColumn<OnlineInsightRow>[];
Expand Down
Loading
Loading