mirror of
https://github.com/okieselbach/AutopilotMonitor.git
synced 2026-10-24 12:42:38 +00:00
fix(web): mobile wrapping for App Details header, Software tables and SLA banner (#133)
This commit is contained in:
Oliver Kieselbach
committed by
GitHub
GitHub
parent
87b7a20223
commit
7b3230d507
@@ -275,55 +275,57 @@ export default function InstallsTab({ scope, timeRange }: InstallsTabProps) {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 py-3 cursor-pointer select-none" onClick={() => toggleSort("appName")}>App {sortIndicator("appName")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("totalInstalls")}>Installs {sortIndicator("totalInstalls")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("succeeded")}>Succeeded {sortIndicator("succeeded")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failed")}>Failed {sortIndicator("failed")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failureRate")}>Failure Rate {sortIndicator("failureRate")}</th>
|
||||
<th
|
||||
className="px-4 py-3 cursor-pointer select-none text-right"
|
||||
onClick={() => toggleSort("avgDurationSeconds")}
|
||||
title="Average duration of the final install attempt. IME evaluation passes and time queued behind other apps are not counted."
|
||||
>
|
||||
Avg Install Time {sortIndicator("avgDurationSeconds")}
|
||||
</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("trend")}>Trend {sortIndicator("trend")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{pageRows.map((row) => (
|
||||
<tr key={row.appName} onClick={() => openApp(row.appName)} className="hover:bg-gray-50 cursor-pointer text-sm">
|
||||
<td className="px-4 py-3 text-gray-900">
|
||||
<span className="font-medium">{row.appName}</span>
|
||||
{appTypeBadge(row.appType)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{row.totalInstalls}</td>
|
||||
<td className="px-4 py-3 text-right text-emerald-700">
|
||||
{row.succeeded}
|
||||
{row.skipped > 0 && (
|
||||
<span
|
||||
className="ml-1 text-xs text-gray-400 dark:text-gray-500"
|
||||
title={`${row.skipped} skipped (not applicable) — excluded from failure rate and durations`}
|
||||
>
|
||||
+{row.skipped}s
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-red-700">{row.failed}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<span className={row.failureRate >= 20 ? "text-red-700 font-semibold" : row.failureRate >= 5 ? "text-amber-700" : "text-gray-700"}>
|
||||
{row.failureRate.toFixed(1)}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{formatDuration(row.avgDurationSeconds, "—")}</td>
|
||||
<td className="px-4 py-3 text-right">{trendBadge(row)}</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 py-3 cursor-pointer select-none" onClick={() => toggleSort("appName")}>App {sortIndicator("appName")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("totalInstalls")}>Installs {sortIndicator("totalInstalls")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("succeeded")}>Succeeded {sortIndicator("succeeded")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failed")}>Failed {sortIndicator("failed")}</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failureRate")}>Failure Rate {sortIndicator("failureRate")}</th>
|
||||
<th
|
||||
className="px-4 py-3 cursor-pointer select-none text-right"
|
||||
onClick={() => toggleSort("avgDurationSeconds")}
|
||||
title="Average duration of the final install attempt. IME evaluation passes and time queued behind other apps are not counted."
|
||||
>
|
||||
Avg Install Time {sortIndicator("avgDurationSeconds")}
|
||||
</th>
|
||||
<th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("trend")}>Trend {sortIndicator("trend")}</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{pageRows.map((row) => (
|
||||
<tr key={row.appName} onClick={() => openApp(row.appName)} className="hover:bg-gray-50 cursor-pointer text-sm">
|
||||
<td className="px-4 py-3 text-gray-900">
|
||||
<span className="font-medium">{row.appName}</span>
|
||||
{appTypeBadge(row.appType)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{row.totalInstalls}</td>
|
||||
<td className="px-4 py-3 text-right text-emerald-700">
|
||||
{row.succeeded}
|
||||
{row.skipped > 0 && (
|
||||
<span
|
||||
className="ml-1 text-xs text-gray-400 dark:text-gray-500"
|
||||
title={`${row.skipped} skipped (not applicable) — excluded from failure rate and durations`}
|
||||
>
|
||||
+{row.skipped}s
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-red-700">{row.failed}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<span className={row.failureRate >= 20 ? "text-red-700 font-semibold" : row.failureRate >= 5 ? "text-amber-700" : "text-gray-700"}>
|
||||
{row.failureRate.toFixed(1)}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{formatDuration(row.avgDurationSeconds, "—")}</td>
|
||||
<td className="px-4 py-3 text-right">{trendBadge(row)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{pageCount > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 text-sm text-gray-600 border-t border-gray-200">
|
||||
<span>{filteredAndSorted.length} apps · page {page + 1} of {pageCount}</span>
|
||||
|
||||
@@ -151,36 +151,38 @@ export default function InventoryTab({ scope }: { scope: SoftwareTabScope }) {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 py-3">Software</th>
|
||||
<th className="px-4 py-3">Version</th>
|
||||
<th className="px-4 py-3">Publisher</th>
|
||||
<th className="px-4 py-3 text-right">Sessions</th>
|
||||
<th className="px-4 py-3 text-right">Last seen</th>
|
||||
<th className="px-4 py-3 text-right">CPE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{pageRows.map((row, idx) => (
|
||||
<tr key={`${row.normalizedVendor}|${row.normalizedName}|${row.normalizedVersion}|${idx}`} className="text-sm">
|
||||
<td className="px-4 py-3 text-gray-900 font-medium">{row.displayName || row.normalizedName}</td>
|
||||
<td className="px-4 py-3 text-gray-700">{row.normalizedVersion || "—"}</td>
|
||||
<td className="px-4 py-3 text-gray-700">{row.publisher || "—"}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{row.sessionCount}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-500">{formatDate(row.lastSeenAt)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
{row.cpeUri ? (
|
||||
<span className="inline-block px-1.5 py-0.5 rounded text-xs bg-emerald-100 text-emerald-800">mapped</span>
|
||||
) : (
|
||||
<span className="inline-block px-1.5 py-0.5 rounded text-xs bg-amber-100 text-amber-800">unmatched</span>
|
||||
)}
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<th className="px-4 py-3">Software</th>
|
||||
<th className="px-4 py-3">Version</th>
|
||||
<th className="px-4 py-3">Publisher</th>
|
||||
<th className="px-4 py-3 text-right">Sessions</th>
|
||||
<th className="px-4 py-3 text-right">Last seen</th>
|
||||
<th className="px-4 py-3 text-right">CPE</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{pageRows.map((row, idx) => (
|
||||
<tr key={`${row.normalizedVendor}|${row.normalizedName}|${row.normalizedVersion}|${idx}`} className="text-sm">
|
||||
<td className="px-4 py-3 text-gray-900 font-medium">{row.displayName || row.normalizedName}</td>
|
||||
<td className="px-4 py-3 text-gray-700">{row.normalizedVersion || "—"}</td>
|
||||
<td className="px-4 py-3 text-gray-700">{row.publisher || "—"}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-700">{row.sessionCount}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-500">{formatDate(row.lastSeenAt)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
{row.cpeUri ? (
|
||||
<span className="inline-block px-1.5 py-0.5 rounded text-xs bg-emerald-100 text-emerald-800">mapped</span>
|
||||
) : (
|
||||
<span className="inline-block px-1.5 py-0.5 rounded text-xs bg-amber-100 text-amber-800">unmatched</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{pageCount > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 text-sm text-gray-600 border-t border-gray-200">
|
||||
<span>{filtered.length} titles · page {page + 1} of {pageCount}</span>
|
||||
|
||||
@@ -459,12 +459,12 @@ function AppDetailContent() {
|
||||
>
|
||||
← Back to all apps
|
||||
</button>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-normal text-gray-900 inline-flex items-center">
|
||||
{appName}
|
||||
<div className="flex flex-wrap items-center justify-between gap-y-3">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl font-normal text-gray-900 flex flex-wrap items-center gap-x-3 gap-y-1">
|
||||
<span className="break-words">{appName}</span>
|
||||
{analytics?.appType && (
|
||||
<span className="ml-3 px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-800">
|
||||
<span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-800">
|
||||
{analytics.appType}
|
||||
</span>
|
||||
)}
|
||||
@@ -475,7 +475,7 @@ function AppDetailContent() {
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<TenantScopeSelector scope={scope} allowAggregated />
|
||||
{([7, 30, 90] as const).map((d) => (
|
||||
<button
|
||||
@@ -679,69 +679,71 @@ function AppDetailContent() {
|
||||
{/* Top failure codes table */}
|
||||
<Card title="Top Failure Codes">
|
||||
{analytics.topFailureCodes.length > 0 ? (
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
<th className="px-3 py-2">Code</th>
|
||||
<th className="px-3 py-2">Description</th>
|
||||
<th className="px-3 py-2">Exit Code</th>
|
||||
<th className="px-3 py-2 text-right">Count</th>
|
||||
<th className="px-3 py-2">Sample Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{analytics.topFailureCodes.map((row) => {
|
||||
const entry = getErrorCodeEntry(row.code);
|
||||
return (
|
||||
<tr key={row.code}>
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-900">
|
||||
{formatErrorCode(row.code)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-gray-700">
|
||||
{entry ? (
|
||||
<>
|
||||
{entry.description}
|
||||
<span
|
||||
className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
|
||||
entry.confidence === "high"
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: entry.confidence === "medium"
|
||||
? "bg-amber-100 text-amber-800"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}
|
||||
title={`Source: ${entry.source}`}
|
||||
>
|
||||
{entry.confidence}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-gray-400">Unknown code</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-xs">
|
||||
{row.exitCode != null ? (
|
||||
(() => {
|
||||
const ec = getErrorCodeEntry(row.exitCode);
|
||||
return (
|
||||
<span title={ec?.description ?? ""}>
|
||||
{row.exitCode}
|
||||
{ec ? ` (${ec.description.slice(0, 24)}${ec.description.length > 24 ? "…" : ""})` : ""}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
<th className="px-3 py-2">Code</th>
|
||||
<th className="px-3 py-2">Description</th>
|
||||
<th className="px-3 py-2">Exit Code</th>
|
||||
<th className="px-3 py-2 text-right">Count</th>
|
||||
<th className="px-3 py-2">Sample Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{analytics.topFailureCodes.map((row) => {
|
||||
const entry = getErrorCodeEntry(row.code);
|
||||
return (
|
||||
<tr key={row.code}>
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-900">
|
||||
{formatErrorCode(row.code)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-gray-700">
|
||||
{entry ? (
|
||||
<>
|
||||
{entry.description}
|
||||
<span
|
||||
className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
|
||||
entry.confidence === "high"
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: entry.confidence === "medium"
|
||||
? "bg-amber-100 text-amber-800"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}
|
||||
title={`Source: ${entry.source}`}
|
||||
>
|
||||
{entry.confidence}
|
||||
</span>
|
||||
);
|
||||
})()
|
||||
) : (
|
||||
<span className="text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">{row.count}</td>
|
||||
<td className="px-3 py-2 text-gray-500 text-xs truncate max-w-md" title={row.sampleMessage}>
|
||||
{row.sampleMessage || "—"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-gray-400">Unknown code</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-xs">
|
||||
{row.exitCode != null ? (
|
||||
(() => {
|
||||
const ec = getErrorCodeEntry(row.exitCode);
|
||||
return (
|
||||
<span title={ec?.description ?? ""}>
|
||||
{row.exitCode}
|
||||
{ec ? ` (${ec.description.slice(0, 24)}${ec.description.length > 24 ? "…" : ""})` : ""}
|
||||
</span>
|
||||
);
|
||||
})()
|
||||
) : (
|
||||
<span className="text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">{row.count}</td>
|
||||
<td className="px-3 py-2 text-gray-500 text-xs truncate max-w-md" title={row.sampleMessage}>
|
||||
{row.sampleMessage || "—"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState text="No failures recorded" />
|
||||
)}
|
||||
@@ -750,44 +752,46 @@ function AppDetailContent() {
|
||||
{/* Device model breakdown */}
|
||||
<Card title="Device Model Correlation">
|
||||
{analytics.deviceModelBreakdown.length > 0 ? (
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
<th className="px-3 py-2">Manufacturer</th>
|
||||
<th className="px-3 py-2">Model</th>
|
||||
<th className="px-3 py-2 text-right">Installs</th>
|
||||
<th className="px-3 py-2 text-right">Failed</th>
|
||||
<th className="px-3 py-2 text-right">Failure Rate</th>
|
||||
<th className="px-3 py-2 text-right">Lift vs baseline</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{analytics.deviceModelBreakdown.map((row, i) => (
|
||||
<tr key={`${row.manufacturer}-${row.model}-${i}`}>
|
||||
<td className="px-3 py-2 text-gray-700">{row.manufacturer}</td>
|
||||
<td className="px-3 py-2 text-gray-900">{row.model}</td>
|
||||
<td className="px-3 py-2 text-right text-gray-700">{row.installs}</td>
|
||||
<td className="px-3 py-2 text-right text-red-700">{row.failed}</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">
|
||||
{row.failureRate.toFixed(1)}%
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
row.liftVsBaseline >= 2
|
||||
? "bg-red-100 text-red-800"
|
||||
: row.liftVsBaseline >= 1.2
|
||||
? "bg-amber-100 text-amber-800"
|
||||
: "bg-emerald-100 text-emerald-800"
|
||||
}`}
|
||||
>
|
||||
{row.liftVsBaseline.toFixed(2)}×
|
||||
</span>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
<th className="px-3 py-2">Manufacturer</th>
|
||||
<th className="px-3 py-2">Model</th>
|
||||
<th className="px-3 py-2 text-right">Installs</th>
|
||||
<th className="px-3 py-2 text-right">Failed</th>
|
||||
<th className="px-3 py-2 text-right">Failure Rate</th>
|
||||
<th className="px-3 py-2 text-right">Lift vs baseline</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{analytics.deviceModelBreakdown.map((row, i) => (
|
||||
<tr key={`${row.manufacturer}-${row.model}-${i}`}>
|
||||
<td className="px-3 py-2 text-gray-700">{row.manufacturer}</td>
|
||||
<td className="px-3 py-2 text-gray-900">{row.model}</td>
|
||||
<td className="px-3 py-2 text-right text-gray-700">{row.installs}</td>
|
||||
<td className="px-3 py-2 text-right text-red-700">{row.failed}</td>
|
||||
<td className="px-3 py-2 text-right text-gray-900">
|
||||
{row.failureRate.toFixed(1)}%
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
row.liftVsBaseline >= 2
|
||||
? "bg-red-100 text-red-800"
|
||||
: row.liftVsBaseline >= 1.2
|
||||
? "bg-amber-100 text-amber-800"
|
||||
: "bg-emerald-100 text-emerald-800"
|
||||
}`}
|
||||
>
|
||||
{row.liftVsBaseline.toFixed(2)}×
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState text="Not enough installs per device model to compute correlation" />
|
||||
)}
|
||||
@@ -795,7 +799,7 @@ function AppDetailContent() {
|
||||
|
||||
{/* Affected sessions panel */}
|
||||
<Card title="Affected Sessions">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||
{(["failed", "all", "succeeded"] as const).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
@@ -868,117 +872,119 @@ function AppDetailContent() {
|
||||
<div className="text-center text-gray-500 p-4">Loading sessions…</div>
|
||||
) : sessions && sessions.items.length > 0 ? (
|
||||
<>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
{activeSessionColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`px-3 py-2 ${col.numeric ? "text-right" : ""}`}
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{sessions.items.map((row) => {
|
||||
const entry = row.failureCode ? getErrorCodeEntry(row.failureCode) : null;
|
||||
return (
|
||||
<tr
|
||||
key={`${row.tenantId}-${row.sessionId}`}
|
||||
onClick={() => router.push(sessionUrl(row.sessionId))}
|
||||
className="hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
{activeSessionColumns.map((col) => {
|
||||
switch (col.key) {
|
||||
case "device":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-900">
|
||||
{row.deviceName || "—"}
|
||||
</td>
|
||||
);
|
||||
case "tenant": {
|
||||
const friendly = tenantLookup.get(row.tenantId);
|
||||
return (
|
||||
<td
|
||||
key={col.key}
|
||||
className="px-3 py-2 text-gray-700 text-xs"
|
||||
title={row.tenantId}
|
||||
>
|
||||
{friendly || `${row.tenantId.substring(0, 8)}…`}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
case "model":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-700 text-xs">
|
||||
{row.manufacturer} {row.model}
|
||||
</td>
|
||||
);
|
||||
case "version":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-700 font-mono text-xs">
|
||||
{row.appVersion || "—"}
|
||||
</td>
|
||||
);
|
||||
case "status":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2">
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs ${
|
||||
row.status === "Failed"
|
||||
? "bg-red-100 text-red-800"
|
||||
: row.status === "Succeeded"
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
|
||||
<tr>
|
||||
{activeSessionColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`px-3 py-2 ${col.numeric ? "text-right" : ""}`}
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{sessions.items.map((row) => {
|
||||
const entry = row.failureCode ? getErrorCodeEntry(row.failureCode) : null;
|
||||
return (
|
||||
<tr
|
||||
key={`${row.tenantId}-${row.sessionId}`}
|
||||
onClick={() => router.push(sessionUrl(row.sessionId))}
|
||||
className="hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
{activeSessionColumns.map((col) => {
|
||||
switch (col.key) {
|
||||
case "device":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-900">
|
||||
{row.deviceName || "—"}
|
||||
</td>
|
||||
);
|
||||
case "tenant": {
|
||||
const friendly = tenantLookup.get(row.tenantId);
|
||||
return (
|
||||
<td
|
||||
key={col.key}
|
||||
className="px-3 py-2 text-gray-700 text-xs"
|
||||
title={row.tenantId}
|
||||
>
|
||||
{row.status}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
case "attempts":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-right text-gray-700">
|
||||
{row.attemptNumber || "—"}
|
||||
</td>
|
||||
);
|
||||
case "failureCode":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 font-mono text-xs">
|
||||
{row.failureCode ? (
|
||||
<span title={entry?.description ?? ""}>
|
||||
{formatErrorCode(row.failureCode)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
case "duration":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-right text-gray-700">
|
||||
{formatDuration(row.durationSeconds)}
|
||||
{(row.installPassCount ?? 0) > 1 && (
|
||||
{friendly || `${row.tenantId.substring(0, 8)}…`}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
case "model":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-700 text-xs">
|
||||
{row.manufacturer} {row.model}
|
||||
</td>
|
||||
);
|
||||
case "version":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-gray-700 font-mono text-xs">
|
||||
{row.appVersion || "—"}
|
||||
</td>
|
||||
);
|
||||
case "status":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2">
|
||||
<span
|
||||
className="ml-1 text-xs text-gray-400 dark:text-gray-500"
|
||||
title={`Processed in ${row.installPassCount} IME passes (evaluation + install) — install time counts only the final attempt`}
|
||||
className={`px-2 py-0.5 rounded text-xs ${
|
||||
row.status === "Failed"
|
||||
? "bg-red-100 text-red-800"
|
||||
: row.status === "Succeeded"
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}
|
||||
>
|
||||
×{row.installPassCount}
|
||||
{row.status}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
);
|
||||
case "attempts":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-right text-gray-700">
|
||||
{row.attemptNumber || "—"}
|
||||
</td>
|
||||
);
|
||||
case "failureCode":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 font-mono text-xs">
|
||||
{row.failureCode ? (
|
||||
<span title={entry?.description ?? ""}>
|
||||
{formatErrorCode(row.failureCode)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
case "duration":
|
||||
return (
|
||||
<td key={col.key} className="px-3 py-2 text-right text-gray-700">
|
||||
{formatDuration(row.durationSeconds)}
|
||||
{(row.installPassCount ?? 0) > 1 && (
|
||||
<span
|
||||
className="ml-1 text-xs text-gray-400 dark:text-gray-500"
|
||||
title={`Processed in ${row.installPassCount} IME passes (evaluation + install) — install time counts only the final attempt`}
|
||||
>
|
||||
×{row.installPassCount}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* Pagination */}
|
||||
{sessions.total > SESSIONS_PAGE_SIZE && (
|
||||
<div className="flex items-center justify-between mt-3 text-xs text-gray-600">
|
||||
|
||||
@@ -494,18 +494,18 @@ function OverallStatusBanner({ metrics }: { metrics: SlaMetricsResponse }) {
|
||||
const metCount = checks.filter(c => c.met).length;
|
||||
|
||||
return (
|
||||
<div className={`rounded-lg shadow p-4 mb-8 flex items-center justify-between ${
|
||||
<div className={`rounded-lg shadow p-4 mb-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${
|
||||
allMet
|
||||
? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
|
||||
: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
}`}>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{allMet ? (
|
||||
<svg className="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-8 w-8 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-8 w-8 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
)}
|
||||
@@ -518,19 +518,19 @@ function OverallStatusBanner({ metrics }: { metrics: SlaMetricsResponse }) {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 sm:justify-end">
|
||||
{checks.map((c) => (
|
||||
<div key={c.label} className="flex items-center space-x-1.5">
|
||||
<div key={c.label} className="flex items-center gap-1.5">
|
||||
{c.met ? (
|
||||
<svg className="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-4 w-4 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-4 w-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
)}
|
||||
<span className={`text-sm ${c.met ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"}`}>
|
||||
<span className={`text-sm whitespace-nowrap ${c.met ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"}`}>
|
||||
{c.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user