85 lines
1.4 KiB
TypeScript
85 lines
1.4 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardBody,
|
||
|
|
CardHeader,
|
||
|
|
__experimentalItem as Item,
|
||
|
|
__experimentalItemGroup as ItemGroup,
|
||
|
|
__experimentalScrollable as Scrollable,
|
||
|
|
Spinner,
|
||
|
|
} from '@wordpress/components';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import { useJobLog } from '../data/useJobs';
|
||
|
|
|
||
|
|
export const JobLog = () => {
|
||
|
|
const { jobLogs, isLoading, error } = useJobLog();
|
||
|
|
|
||
|
|
if ( isLoading ) {
|
||
|
|
return (
|
||
|
|
<Card elevation={ 3 }>
|
||
|
|
<CardHeader>
|
||
|
|
<h2>Job Log</h2>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<Spinner />
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( error ) {
|
||
|
|
return (
|
||
|
|
<Card elevation={ 3 }>
|
||
|
|
<CardHeader>
|
||
|
|
<h2>Job Log</h2>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<p>{ error }</p>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( ! jobLogs.length && ! isLoading ) {
|
||
|
|
return (
|
||
|
|
<Card elevation={ 3 }>
|
||
|
|
<CardHeader>
|
||
|
|
<h2>Job Log</h2>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<p>No job logs found.</p>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card elevation={ 3 }>
|
||
|
|
<CardHeader>
|
||
|
|
<h2>Job Log</h2>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<Scrollable style={ { maxHeight: 300 } }>
|
||
|
|
<ItemGroup>
|
||
|
|
{ jobLogs.map( ( jobLog, i ) => (
|
||
|
|
<div key={ `${ jobLog.date }:${ i }` }>
|
||
|
|
<Item>
|
||
|
|
Message: { jobLog.message }
|
||
|
|
<br></br>
|
||
|
|
Logged at: { jobLog.date }
|
||
|
|
</Item>
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
) ) }
|
||
|
|
</ItemGroup>
|
||
|
|
</Scrollable>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|