Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | 52x 52x 30x 30x 30x 30x 30x 30x 20x 20x 20x 30x 24x 24x 30x 170x 170x 170x 170x 170x 170x 170x 170x 170x 170x 30x | import { Outlet, useNavigate, useParams } from 'react-router-dom'
import { Page, EntityDetail, DataTable, Crud } from '@/layers/L2R'
import type { PageConfig, DetailConfig, ListConfig, CrudConfig } from '@/layers/interfaces'
import { useEntityDetail } from '@/layers/L1/entityResolver'
import { RunPhaseIcon } from '@/shared/components/RunPhaseIcon'
import { SourceBadge } from '@/shared/components/SourceBadge'
import { PROJECT_FIELD_SET, PROJECT_FIELD_TYPES } from './projectsCrudConfig'
import { PIPELINE_FIELD_SET, PIPELINE_FIELD_TYPES, PIPELINE_ENTITY_SELECT_SOURCES } from '@/features/pipelines/pipelinesCrudConfig'
import { DurationDisplay } from '@/shared/components/DurationDisplay'
import { formatRelativeTime, abbreviateNumber, formatDateTime } from '@/shared/utils/format'
export function ProjectDetailPage() {
const nav = useNavigate()
const { id } = useParams<{ id: string }>()
const { data: project } = useEntityDetail('projects', id ?? '')
const pageConfig: PageConfig = {
title: project?.name ?? 'Project',
breadcrumbs: [
{ label: 'Dashboard', href: '/' },
{ label: 'Projects', href: '/projects' },
{ label: project?.name ?? id ?? '' },
],
}
const detailConfig: DetailConfig = {
entityPath: 'projects',
title: 'Project',
actionTargets: { edit: `/projects/${id}/edit`, delete: true },
readGrouping: [
{
label: 'Details',
fields: ['name', 'description', 'created_at', 'updated_at'],
},
],
fieldFormatters: {
description: (value: unknown) => (value ? String(value) : '\u2014'),
created_at: (value: unknown) => formatDateTime(value as string | null | undefined),
updated_at: (value: unknown) => formatDateTime(value as string | null | undefined),
},
}
const pipelinesListConfig: ListConfig = {
entityPath: 'pipelines',
prefix: 'plines',
columns: [
{ field: 'name', label: 'Name', sortable: true },
{ field: 'description', label: 'Description', sortable: true,
render: (row) => (row.description ? String(row.description) : '\u2014') },
{ field: 'enabled', label: 'Status', sortable: true,
render: (row) => (row.enabled ? '\u2705' : '\u274C') },
],
fixedParams: { projectId: id ?? '' },
rowTarget: '/pipelines/:id',
createTarget: `/projects/${id}/plines-add`,
createLabel: 'New Pipeline',
}
const runsListConfig: ListConfig = {
entityPath: 'runs',
prefix: 'pruns',
columns: [
{
field: 'phase',
label: 'Phase',
render: (row) => <RunPhaseIcon phase={(row.phase ?? "pending") as any} />,
},
{
field: 'pipeline_name',
label: 'Pipeline',
render: (row) => (
<a href={`#/pipelines/${row.pipeline_id}`} className="text-primary hover:underline">
{row.pipeline_name as string}
</a>
),
},
{
field: 'source_type',
label: 'Source',
render: (row) => <SourceBadge source={(row.source_type ?? "manual") as any} />,
},
{
field: 'created_at',
label: 'Created',
render: (row) => formatRelativeTime(row.created_at as string | null | undefined),
},
{
field: 'tokens',
label: 'Tokens',
render: (row) => {
const total = ((row.token_input as number) ?? 0) + ((row.token_output as number) ?? 0)
return total ? abbreviateNumber(total) : '\u2014'
},
},
{
field: 'duration',
label: 'Duration',
render: (row) => {
const started = row.started_at as string | undefined
const completed = row.completed_at as string | undefined
const ms = started && completed ? new Date(completed).getTime() - new Date(started).getTime() : null
return <DurationDisplay ms={ms} />
},
},
],
sort: { field: 'created_at', order: 'desc' },
fixedParams: { project_id: id ?? '', limit: 10 },
sse: { enabled: true },
rowTarget: '/runs/:id',
}
const projectCrudConfig: CrudConfig = {
entityPath: 'projects',
fieldSet: PROJECT_FIELD_SET,
fieldTypes: { ...PROJECT_FIELD_TYPES, description: 'textarea' },
successTarget: `/projects/${id}`,
cancelTarget: `/projects/${id}`,
title: 'Edit Project',
}
const pipelineCrudConfig: CrudConfig = {
entityPath: 'pipelines',
fieldSet: PIPELINE_FIELD_SET,
fieldTypes: PIPELINE_FIELD_TYPES,
entitySelectSources: PIPELINE_ENTITY_SELECT_SOURCES,
successTarget: '/pipelines/:id',
cancelTarget: `/projects/${id}`,
title: 'New Pipeline',
}
return (
<Page config={pageConfig}>
<EntityDetail config={detailConfig} />
<Crud config={projectCrudConfig} />
<Crud config={pipelineCrudConfig} />
<h2 className="mb-4 text-lg font-semibold">Pipelines</h2>
<DataTable config={pipelinesListConfig} />
<h2 className="mb-4 text-lg font-semibold">Latest runs</h2>
<DataTable
config={runsListConfig}
extra={
<button
type="button"
className="inline-flex items-center rounded-md border border-input bg-background px-3 py-1 text-sm hover:bg-accent"
onClick={() => nav(`/runs?runs_project_id=${id}&runs_sort=created_at&runs_order=desc`)}
data-testid="view-all-runs"
>
View All Runs →
</button>
}
/>
<Outlet />
</Page>
)
}
|