function TableRowFromJob (job: JobType) {
const getDuration = function(startTime: string, endTime: string) {
const humanized = humanize(new Date(endTime).getTime() - new Date(startTime).getTime(), {
round: true,
units: ['h', 'm', 's'],
largest: 3,
})
return humanized
}
const [duration, setDuration] = useState('');
useEffect(() => {
const timer = setInterval(() => {
const nowDate = new Date().toISOString()
setDuration(getDuration(job.startTime.toISOString(), job.endTime?.toISOString() ?? nowDate));
}, 1000);
return () => clearInterval(timer);
}, []);
return (
...
<TableCell className="text-center" suppressHydrationWarning>{duration}</TableCell>
...
)
};
async function JobTable (data: { page: number }) {
const trpcClient = api.useUtils().client;
const result = await trpcClient.runs.getAllRuns.query({page: data.page});
return (
<TableBody>
{result.map((job) => TableRowFromJob(job))}
</TableBody>
);
};
export { JobTable, TableRowFromJob };
function TableRowFromJob (job: JobType) {
const getDuration = function(startTime: string, endTime: string) {
const humanized = humanize(new Date(endTime).getTime() - new Date(startTime).getTime(), {
round: true,
units: ['h', 'm', 's'],
largest: 3,
})
return humanized
}
const [duration, setDuration] = useState('');
useEffect(() => {
const timer = setInterval(() => {
const nowDate = new Date().toISOString()
setDuration(getDuration(job.startTime.toISOString(), job.endTime?.toISOString() ?? nowDate));
}, 1000);
return () => clearInterval(timer);
}, []);
return (
...
<TableCell className="text-center" suppressHydrationWarning>{duration}</TableCell>
...
)
};
async function JobTable (data: { page: number }) {
const trpcClient = api.useUtils().client;
const result = await trpcClient.runs.getAllRuns.query({page: data.page});
return (
<TableBody>
{result.map((job) => TableRowFromJob(job))}
</TableBody>
);
};
export { JobTable, TableRowFromJob };