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 | 86x 86x 48x 48x 48x 48x 48x 48x 48x 48x 16x 16x 16x 48x 16x 16x 16x 34x 34x 34x 34x 34x 34x 34x 48x 48x 48x 48x 34x 34x 2x | import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useProjects, useDeleteProject } from './projectsApi'
import { DataTable, type Column } from '@/shared/components/DataTable'
import { ConfirmDialog } from '@/shared/components/ConfirmDialog'
import { Button } from '@/components/ui/button'
function relativeTime(dateStr: string | undefined): string {
if (!dateStr) return '\u2014'
const diff = Date.now() - new Date(dateStr).getTime()
I const mins = Math.floor(diff / 60000)
if (mins < 1) return 'now'
if (mins < 60) return `${mins} min ago`
I const hours = Math.floor(mins / 60)
I if (hours < 24) return `${hours}h ago`
const days = Math.floor(hours / 24)
E if (days < 7) return `${days}d ago`
return new Date(dateStr).toLocaleDateString()
}
function statusIcon(status: string | undefined): string {
switch (status) {
case 'succeeded': return '\u2705'
case 'failed': return '\u274C'
case 'running': return '\u26A0\uFE0F'
default: return '\u26AA'
}
}
function statusColor(status: string | undefined): string {
switch (status) {
case 'succeeded': return 'text-green-500'
case 'failed': return 'text-red-500'
case 'running': return 'text-yellow-500'
default: return 'text-muted-foreground'
}
}
export function ProjectsPage() {
const navigate = useNavigate()
const { data, isLoading, error, refetch } = useProjects()
const deleteProject = useDeleteProject()
const [deleteId, setDeleteId] = useState<string | null>(null)
const projects = data?.data ?? []
const columns: Column[] = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'pipeline_count', label: 'Pipelines' },
{
key: 'last_run_at',
label: 'Last Run',
render: (item) => (
<span className="text-sm text-muted-foreground">
{relativeTime(item.last_run_at as string | undefined)}
</span>
),
},
{
key: 'last_run_status',
label: 'Status',
render: (item) => {
const status = item.last_run_status as string | undefined
return (
<span className={statusColor(status)}>
{statusIcon(status)}
</span>
)
},
},
]
return (
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Projects</h1>
<Button onClick={() => navigate('/projects/new')}>New Project</Button>
</div>
<DataTable
columns={columns}
data={projects as unknown as Record<string, unknown>[]}
isLoading={isLoading}
error={error ?? null}
onRetry={() => refetch()}
emptyMessage="No projects configured"
emptyAction={
<Button variant="outline" onClick={() => navigate('/projects/new')}>
Create your first project
</Button>
}
onRowClick={(item) => navigate(`/projects/${item.id as string}`)}
onSort={(key) => console.log('sort', key)}
/>
<ConfirmDialog
open={!!deleteId}
title="Delete project"
message="Are you sure you want to delete this project? This will also delete all associated pipelines."
onConfirm={() => {
if (deleteId) deleteProject.mutate(deleteId)
setDeleteId(null)
}}
onCancel={() => setDeleteId(null)}
/>
</div>
)
}
|