114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
export default function Jobs() {
|
|
const jobs = [
|
|
{
|
|
name: 'backup-job',
|
|
namespace: 'default',
|
|
completions: '1/1',
|
|
duration: '5m',
|
|
age: '1h',
|
|
image: 'backup:v1.0',
|
|
status: 'Complete'
|
|
},
|
|
{
|
|
name: 'data-migration',
|
|
namespace: 'default',
|
|
completions: '3/3',
|
|
duration: '15m',
|
|
age: '2h',
|
|
image: 'migration:v2.1',
|
|
status: 'Complete'
|
|
},
|
|
{
|
|
name: 'cleanup-job',
|
|
namespace: 'default',
|
|
completions: '0/1',
|
|
duration: '2m',
|
|
age: '30m',
|
|
image: 'cleanup:v1.0',
|
|
status: 'Running'
|
|
},
|
|
{
|
|
name: 'report-generator',
|
|
namespace: 'default',
|
|
completions: '1/1',
|
|
duration: '10m',
|
|
age: '4h',
|
|
image: 'reports:v1.2',
|
|
status: 'Complete'
|
|
},
|
|
{
|
|
name: 'sync-job',
|
|
namespace: 'default',
|
|
completions: '0/1',
|
|
duration: '1m',
|
|
age: '5m',
|
|
image: 'sync:v1.0',
|
|
status: 'Failed'
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Jobs</h1>
|
|
<p className="text-sm text-gray-600">Manage one-time batch jobs and tasks.</p>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-lg shadow-sm">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-medium">Job List</h2>
|
|
<button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
|
|
Create Job
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Namespace</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completions</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{jobs.map((job) => (
|
|
<tr key={job.name} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">{job.name}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.namespace}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.completions}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.duration}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.age}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.image}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
job.status === 'Complete' ? 'bg-green-100 text-green-800' :
|
|
job.status === 'Running' ? 'bg-blue-100 text-blue-800' :
|
|
'bg-red-100 text-red-800'
|
|
}`}>
|
|
{job.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button className="text-blue-600 hover:text-blue-900 mr-3">View</button>
|
|
<button className="text-orange-600 hover:text-orange-900 mr-3">Logs</button>
|
|
<button className="text-red-600 hover:text-red-900">Delete</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|