Spaces:
Paused
Paused
File size: 2,217 Bytes
1c72248 |
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 |
import useJobsList from '@/hooks/useJobsList';
import Link from 'next/link';
import UniversalTable, { TableColumn } from '@/components/UniversalTable';
import { JobConfig } from '@/types';
import JobActionBar from './JobActionBar';
interface JobsTableProps {
onlyActive?: boolean;
}
export default function JobsTable({ onlyActive = false }: JobsTableProps) {
const { jobs, status, refreshJobs } = useJobsList(onlyActive);
const isLoading = status === 'loading';
const columns: TableColumn[] = [
{
title: 'Name',
key: 'name',
render: row => (
<Link href={`/jobs/${row.id}`} className="font-medium whitespace-nowrap">
{row.name}
</Link>
),
},
{
title: 'Steps',
key: 'steps',
render: row => {
const jobConfig: JobConfig = JSON.parse(row.job_config);
const totalSteps = jobConfig.config.process[0].train.steps;
return (
<div className="flex items-center">
<span>
{row.step} / {totalSteps}
</span>
<div className="w-16 bg-gray-700 rounded-full h-1.5 ml-2">
<div
className="bg-blue-500 h-1.5 rounded-full"
style={{ width: `${(row.step / totalSteps) * 100}%` }}
></div>
</div>
</div>
);
},
},
{
title: 'GPU',
key: 'gpu_ids',
},
{
title: 'Status',
key: 'status',
render: row => {
let statusClass = 'text-gray-400';
if (row.status === 'completed') statusClass = 'text-green-400';
if (row.status === 'failed') statusClass = 'text-red-400';
if (row.status === 'running') statusClass = 'text-blue-400';
return <span className={statusClass}>{row.status}</span>;
},
},
{
title: 'Info',
key: 'info',
className: 'truncate max-w-xs',
},
{
title: 'Actions',
key: 'actions',
className: 'text-right',
render: row => {
return <JobActionBar job={row} onRefresh={refreshJobs} />;
},
},
];
return <UniversalTable columns={columns} rows={jobs} isLoading={isLoading} onRefresh={refreshJobs} />;
}
|