refactor: clean up code formatting and improve readability in various files
This commit is contained in:
Abhimanyu Saharan
@@ -131,154 +131,146 @@ export default function GatewayDetailPage() {
|
||||
</div>
|
||||
) : gateway ? (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Connection
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
statusQuery.isLoading
|
||||
? "bg-slate-300"
|
||||
: isConnected
|
||||
? "bg-emerald-500"
|
||||
: "bg-rose-500"
|
||||
}`}
|
||||
/>
|
||||
<span>
|
||||
{statusQuery.isLoading
|
||||
? "Checking"
|
||||
: isConnected
|
||||
? "Online"
|
||||
: "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Gateway URL
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.url}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Token
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{maskToken(gateway.token)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Connection
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
statusQuery.isLoading
|
||||
? "bg-slate-300"
|
||||
: isConnected
|
||||
? "bg-emerald-500"
|
||||
: "bg-rose-500"
|
||||
}`}
|
||||
/>
|
||||
<span>
|
||||
{statusQuery.isLoading
|
||||
? "Checking"
|
||||
: isConnected
|
||||
? "Online"
|
||||
: "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Gateway URL
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.url}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Token</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{maskToken(gateway.token)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Runtime
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Runtime
|
||||
</p>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Main session key
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.main_session_key}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Workspace root
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.workspace_root}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Created</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Updated</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.updated_at)}
|
||||
</p>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Main session key
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.main_session_key}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Workspace root
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.workspace_root}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Created
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Updated
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Agents
|
||||
</p>
|
||||
{agentsQuery.isLoading ? (
|
||||
<span className="text-xs text-slate-500">Loading…</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-500">
|
||||
{agents.length} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Agent</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Last seen</th>
|
||||
<th className="px-4 py-3">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agents.length === 0 && !agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-4 py-6 text-center text-xs text-slate-500"
|
||||
>
|
||||
No agents assigned to this gateway.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
agents.map((agent) => (
|
||||
<tr key={agent.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3">
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{agent.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{agent.id}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700">
|
||||
{agent.status}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.last_seen_at ?? null)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.updated_at)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Agents
|
||||
</p>
|
||||
{agentsQuery.isLoading ? (
|
||||
<span className="text-xs text-slate-500">Loading…</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-500">
|
||||
{agents.length} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Agent</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Last seen</th>
|
||||
<th className="px-4 py-3">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agents.length === 0 && !agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-4 py-6 text-center text-xs text-slate-500"
|
||||
>
|
||||
No agents assigned to this gateway.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
agents.map((agent) => (
|
||||
<tr key={agent.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3">
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{agent.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{agent.id}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700">
|
||||
{agent.status}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.last_seen_at ?? null)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.updated_at)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
|
||||
Reference in New Issue
Block a user