mirror of
https://github.com/9technologygroup/patchmon.net.git
synced 2026-05-18 05:30:36 -05:00
Agent Queue table mobile ui
This commit is contained in:
Muhammad Ibrahim
@@ -2995,79 +2995,143 @@ const AgentQueueTab = ({ hostId }) => {
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
|
||||
<thead className="bg-secondary-50 dark:bg-secondary-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Job ID
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Job Name
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Attempt
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Date/Time
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Error/Output
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
|
||||
{jobHistory.map((job) => (
|
||||
<tr
|
||||
key={job.id}
|
||||
className="hover:bg-secondary-50 dark:hover:bg-secondary-700"
|
||||
>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs font-mono text-secondary-900 dark:text-white">
|
||||
{job.job_id}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
<>
|
||||
{/* Mobile Card Layout */}
|
||||
<div className="md:hidden space-y-2">
|
||||
{jobHistory.map((job) => (
|
||||
<div key={job.id} className="card p-3">
|
||||
{/* First Line: Job Name, Job ID + Attempt (centered), Status (right) */}
|
||||
<div className="flex items-center justify-between gap-2 mb-2">
|
||||
<span className="text-sm font-semibold text-secondary-900 dark:text-white truncate">
|
||||
{formatJobType(job.job_name)}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon(job.status)}
|
||||
<span
|
||||
className={`text-xs font-medium ${getStatusColor(job.status)}`}
|
||||
>
|
||||
{job.status.charAt(0).toUpperCase() +
|
||||
job.status.slice(1)}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-xs flex-1 justify-center min-w-0">
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-secondary-50 dark:bg-secondary-700/50 rounded border border-secondary-200 dark:border-secondary-600">
|
||||
<span className="text-secondary-500 dark:text-secondary-400 whitespace-nowrap">
|
||||
Job:
|
||||
</span>
|
||||
<span className="font-mono text-secondary-600 dark:text-secondary-300 truncate">
|
||||
{job.job_id}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
{job.attempt_number}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-secondary-50 dark:bg-secondary-700/50 rounded border border-secondary-200 dark:border-secondary-600">
|
||||
<span className="text-secondary-500 dark:text-secondary-400 whitespace-nowrap">
|
||||
Attempt:
|
||||
</span>
|
||||
<span className="text-secondary-600 dark:text-secondary-300">
|
||||
{job.attempt_number}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
{getStatusIcon(job.status)}
|
||||
<span
|
||||
className={`text-xs font-medium ${getStatusColor(job.status)} whitespace-nowrap`}
|
||||
>
|
||||
{job.status.charAt(0).toUpperCase() +
|
||||
job.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Line: Date/Time and Error/Output */}
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-xs text-secondary-600 dark:text-secondary-300">
|
||||
{new Date(job.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-xs">
|
||||
{job.error_message ? (
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
{job.error_message}
|
||||
</span>
|
||||
) : job.output ? (
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
{JSON.stringify(job.output)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-secondary-500 dark:text-secondary-400">
|
||||
-
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</div>
|
||||
{(job.error_message || job.output) && (
|
||||
<div className="text-xs mt-1 pt-1 border-t border-secondary-200 dark:border-secondary-600">
|
||||
{job.error_message ? (
|
||||
<span className="text-red-600 dark:text-red-400 break-words">
|
||||
{job.error_message}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-green-600 dark:text-green-400 break-words">
|
||||
{JSON.stringify(job.output)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Table Layout */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
|
||||
<thead className="bg-secondary-50 dark:bg-secondary-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Job ID
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Job Name
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Attempt
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Date/Time
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
|
||||
Error/Output
|
||||
</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
|
||||
{jobHistory.map((job) => (
|
||||
<tr
|
||||
key={job.id}
|
||||
className="hover:bg-secondary-50 dark:hover:bg-secondary-700"
|
||||
>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs font-mono text-secondary-900 dark:text-white">
|
||||
{job.job_id}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
{formatJobType(job.job_name)}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon(job.status)}
|
||||
<span
|
||||
className={`text-xs font-medium ${getStatusColor(job.status)}`}
|
||||
>
|
||||
{job.status.charAt(0).toUpperCase() +
|
||||
job.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
{job.attempt_number}
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-xs text-secondary-900 dark:text-white">
|
||||
{new Date(job.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-xs">
|
||||
{job.error_message ? (
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
{job.error_message}
|
||||
</span>
|
||||
) : job.output ? (
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
{JSON.stringify(job.output)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-secondary-500 dark:text-secondary-400">
|
||||
-
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user