Initial commit
This commit is contained in:
666
frontend/app/requests/[id]/page.tsx
Normal file
666
frontend/app/requests/[id]/page.tsx
Normal file
@@ -0,0 +1,666 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
|
||||
|
||||
type TimelineHop = {
|
||||
service: string
|
||||
status: string
|
||||
details?: Record<string, any>
|
||||
timestamp?: string
|
||||
}
|
||||
|
||||
type Snapshot = {
|
||||
request_id: string
|
||||
title: string
|
||||
year?: number
|
||||
request_type: string
|
||||
state: string
|
||||
state_reason?: string
|
||||
timeline: TimelineHop[]
|
||||
actions: { id: string; label: string; risk: string; requires_confirmation: boolean }[]
|
||||
artwork?: { poster_url?: string; backdrop_url?: string }
|
||||
raw?: Record<string, any>
|
||||
}
|
||||
|
||||
type ReleaseOption = {
|
||||
title?: string
|
||||
indexer?: string
|
||||
indexerId?: number
|
||||
guid?: string
|
||||
size?: number
|
||||
seeders?: number
|
||||
leechers?: number
|
||||
protocol?: string
|
||||
infoUrl?: string
|
||||
}
|
||||
|
||||
type SnapshotHistory = {
|
||||
request_id: string
|
||||
state: string
|
||||
state_reason?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
type ActionHistory = {
|
||||
request_id: string
|
||||
action_id: string
|
||||
label: string
|
||||
status: string
|
||||
message?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const percentFromTorrent = (torrent: Record<string, any>) => {
|
||||
const progress = Number(torrent.progress)
|
||||
if (!Number.isNaN(progress) && progress >= 0 && progress <= 1) {
|
||||
return Math.round(progress * 100)
|
||||
}
|
||||
const size = Number(torrent.size)
|
||||
const left = Number(torrent.amount_left)
|
||||
if (!Number.isNaN(size) && size > 0 && !Number.isNaN(left)) {
|
||||
return Math.round(((size - left) / size) * 100)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const formatBytes = (value?: number) => {
|
||||
if (!value || Number.isNaN(value)) return 'n/a'
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let size = value
|
||||
let idx = 0
|
||||
while (size >= 1024 && idx < units.length - 1) {
|
||||
size /= 1024
|
||||
idx += 1
|
||||
}
|
||||
return `${size.toFixed(1)} ${units[idx]}`
|
||||
}
|
||||
|
||||
type SeasonStat = {
|
||||
seasonNumber: number
|
||||
available: number
|
||||
missing: number
|
||||
}
|
||||
|
||||
const seasonStatsFromSeries = (series: Record<string, any>): SeasonStat[] => {
|
||||
const dateValue = series?.previousAiring ?? series?.firstAired
|
||||
const airedAt = dateValue ? new Date(dateValue) : null
|
||||
if (!airedAt || Number.isNaN(airedAt.valueOf()) || airedAt > new Date()) {
|
||||
return []
|
||||
}
|
||||
const seasons = Array.isArray(series?.seasons) ? series.seasons : []
|
||||
return seasons
|
||||
.filter((season: Record<string, any>) => season?.monitored === true)
|
||||
.map((season: Record<string, any>) => {
|
||||
const stats = season.statistics
|
||||
const available = stats && typeof stats === 'object' ? Number(stats.episodeFileCount) : NaN
|
||||
const aired = stats && typeof stats === 'object' ? Number(stats.episodeCount) : NaN
|
||||
const fallbackTotal =
|
||||
stats && typeof stats === 'object' ? Number(stats.totalEpisodeCount) : NaN
|
||||
const total = !Number.isNaN(aired) && aired > 0 ? aired : fallbackTotal
|
||||
const seasonDateValue = stats?.previousAiring ?? stats?.firstAired ?? null
|
||||
const seasonAiredAt = seasonDateValue ? new Date(seasonDateValue) : null
|
||||
if (
|
||||
!Number.isNaN(available) &&
|
||||
!Number.isNaN(total) &&
|
||||
total > 0 &&
|
||||
(!seasonAiredAt || Number.isNaN(seasonAiredAt.valueOf()) || seasonAiredAt <= new Date())
|
||||
) {
|
||||
return {
|
||||
seasonNumber: season.seasonNumber,
|
||||
available,
|
||||
missing: Math.max(0, total - available),
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter((season): season is SeasonStat => season !== null && season.missing > 0)
|
||||
}
|
||||
|
||||
const friendlyState = (value: string) => {
|
||||
const map: Record<string, string> = {
|
||||
REQUESTED: 'Waiting for approval',
|
||||
APPROVED: 'Approved and queued',
|
||||
NEEDS_ADD: 'Needs adding to the library',
|
||||
ADDED_TO_ARR: 'Added to the library queue',
|
||||
SEARCHING: 'Searching for releases',
|
||||
GRABBED: 'Download queued',
|
||||
DOWNLOADING: 'Downloading',
|
||||
IMPORTING: 'Adding to your library',
|
||||
COMPLETED: 'Ready to watch',
|
||||
AVAILABLE: 'Ready to watch',
|
||||
FAILED: 'Needs attention',
|
||||
UNKNOWN: 'Status not available yet',
|
||||
}
|
||||
return map[value] ?? value.replaceAll('_', ' ').toLowerCase()
|
||||
}
|
||||
|
||||
const friendlyTimelineStatus = (service: string, status: string) => {
|
||||
if (service === 'Jellyseerr') {
|
||||
const map: Record<string, string> = {
|
||||
Pending: 'Waiting for approval',
|
||||
Approved: 'Approved',
|
||||
Declined: 'Declined',
|
||||
Available: 'Ready to watch',
|
||||
Processing: 'Working on it',
|
||||
'Partially Available': 'Partially ready',
|
||||
'Waiting for approval': 'Waiting for approval',
|
||||
'Working on it': 'Working on it',
|
||||
'Partially ready': 'Partially ready',
|
||||
'Ready to watch': 'Ready to watch',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
if (service === 'Sonarr/Radarr') {
|
||||
const map: Record<string, string> = {
|
||||
missing: 'Not added yet',
|
||||
added: 'Added to the library queue',
|
||||
searching: 'Searching for releases',
|
||||
available: 'Ready to watch',
|
||||
error: 'Needs attention',
|
||||
unknown: 'Checking…',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
if (service === 'Prowlarr') {
|
||||
const map: Record<string, string> = {
|
||||
ok: 'Search sources OK',
|
||||
issues: 'Search sources need attention',
|
||||
error: 'Search sources unavailable',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
if (service === 'qBittorrent') {
|
||||
const map: Record<string, string> = {
|
||||
downloading: 'Downloading',
|
||||
paused: 'Paused',
|
||||
completed: 'Content downloaded',
|
||||
idle: 'No active downloads',
|
||||
error: 'Downloader error',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
if (service === 'Jellyfin') {
|
||||
const map: Record<string, string> = {
|
||||
available: 'Ready to watch',
|
||||
missing: 'Not in Jellyfin yet',
|
||||
error: 'Jellyfin unavailable',
|
||||
}
|
||||
return map[status] ?? status
|
||||
}
|
||||
return status
|
||||
}
|
||||
|
||||
export default function RequestTimelinePage({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const [snapshot, setSnapshot] = useState<Snapshot | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showDetails, setShowDetails] = useState(false)
|
||||
const [actionMessage, setActionMessage] = useState<string | null>(null)
|
||||
const [releaseOptions, setReleaseOptions] = useState<ReleaseOption[]>([])
|
||||
const [searchRan, setSearchRan] = useState(false)
|
||||
const [modalMessage, setModalMessage] = useState<string | null>(null)
|
||||
const [historySnapshots, setHistorySnapshots] = useState<SnapshotHistory[]>([])
|
||||
const [historyActions, setHistoryActions] = useState<ActionHistory[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
if (!getToken()) {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
const baseUrl = getApiBase()
|
||||
const [snapshotResponse, historyResponse, actionsResponse] = await Promise.all([
|
||||
authFetch(`${baseUrl}/requests/${params.id}/snapshot`),
|
||||
authFetch(`${baseUrl}/requests/${params.id}/history?limit=5`),
|
||||
authFetch(`${baseUrl}/requests/${params.id}/actions?limit=5`),
|
||||
])
|
||||
|
||||
if (snapshotResponse.status === 401) {
|
||||
clearToken()
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
const snapshotData = await snapshotResponse.json()
|
||||
setSnapshot(snapshotData)
|
||||
setReleaseOptions([])
|
||||
setSearchRan(false)
|
||||
setModalMessage(null)
|
||||
|
||||
if (historyResponse.ok) {
|
||||
const historyData = await historyResponse.json()
|
||||
if (Array.isArray(historyData.snapshots)) {
|
||||
setHistorySnapshots(historyData.snapshots)
|
||||
}
|
||||
}
|
||||
if (actionsResponse.ok) {
|
||||
const actionsData = await actionsResponse.json()
|
||||
if (Array.isArray(actionsData.actions)) {
|
||||
setHistoryActions(actionsData.actions)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
load()
|
||||
}, [params.id])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<main className="card">
|
||||
<div className="loading-center" role="status" aria-live="polite">
|
||||
<div className="spinner" aria-hidden="true" />
|
||||
<div className="loading-text">Loading request timeline...</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
if (!snapshot) {
|
||||
return <main className="card">Could not load that request.</main>
|
||||
}
|
||||
|
||||
const summary =
|
||||
snapshot.state_reason ??
|
||||
`This request is currently ${snapshot.state.replaceAll('_', ' ').toLowerCase()}.`
|
||||
|
||||
const downloadHop = snapshot.timeline.find((hop) => hop.service === 'qBittorrent')
|
||||
const downloadState = downloadHop?.details?.summary ?? downloadHop?.status ?? 'Unknown'
|
||||
const jellyfinAvailable = Boolean(snapshot.raw?.jellyfin?.available)
|
||||
const pipelineSteps = [
|
||||
{ key: 'Jellyseerr', label: 'Jellyseerr' },
|
||||
{ key: 'Sonarr/Radarr', label: 'Library queue' },
|
||||
{ key: 'Prowlarr', label: 'Search' },
|
||||
{ key: 'qBittorrent', label: 'Download' },
|
||||
{ key: 'Jellyfin', label: 'Jellyfin' },
|
||||
]
|
||||
const stageFromState = (state: string) => {
|
||||
if (jellyfinAvailable || state === 'COMPLETED' || state === 'AVAILABLE') return 4
|
||||
if (state === 'DOWNLOADING' || state === 'IMPORTING') return 3
|
||||
if (state === 'GRABBED') return 2
|
||||
if (state === 'SEARCHING' || state === 'ADDED_TO_ARR' || state === 'NEEDS_ADD') return 1
|
||||
if (state === 'APPROVED' || state === 'REQUESTED') return 0
|
||||
return 1
|
||||
}
|
||||
const activeStage = stageFromState(snapshot.state)
|
||||
const extendedTimeline: TimelineHop[] = [
|
||||
...snapshot.timeline,
|
||||
{
|
||||
service: 'Jellyfin',
|
||||
status: jellyfinAvailable ? 'available' : 'missing',
|
||||
details: snapshot.raw?.jellyfin ?? {},
|
||||
},
|
||||
]
|
||||
const jellyfinLink = snapshot.raw?.jellyfin?.link
|
||||
const posterUrl = snapshot.artwork?.poster_url
|
||||
const resolvedPoster =
|
||||
posterUrl && posterUrl.startsWith('http') ? posterUrl : posterUrl ? `${getApiBase()}${posterUrl}` : null
|
||||
|
||||
return (
|
||||
<main className="card">
|
||||
<div className="request-header">
|
||||
<div className="request-header-main">
|
||||
{resolvedPoster && (
|
||||
<img
|
||||
className="request-poster"
|
||||
src={resolvedPoster}
|
||||
alt={`${snapshot.title} poster`}
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1>{snapshot.title}</h1>
|
||||
<div className="meta">{snapshot.request_type.toUpperCase()} {snapshot.year ?? ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
{jellyfinAvailable && jellyfinLink && (
|
||||
<a className="ghost-button" href={jellyfinLink} target="_blank" rel="noreferrer">
|
||||
Open in Jellyfin
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="status-box">
|
||||
<div>
|
||||
<h2>Status</h2>
|
||||
<p className="status-text">{friendlyState(snapshot.state)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>What this means</h2>
|
||||
<p>{summary}</p>
|
||||
</div>
|
||||
{(actionMessage || (searchRan && releaseOptions.length === 0)) && (
|
||||
<div>
|
||||
<h2>Last action</h2>
|
||||
{actionMessage && <p>{actionMessage}</p>}
|
||||
{searchRan && releaseOptions.length === 0 && (
|
||||
<p>Nothing to grab yet. We did not find a match on your torrent providers.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h2>Current download state</h2>
|
||||
<p>{downloadState}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Next step</h2>
|
||||
<p>
|
||||
{snapshot.actions.length === 0
|
||||
? 'Nothing to do right now.'
|
||||
: snapshot.actions[0].label}
|
||||
</p>
|
||||
<p className="helper">
|
||||
Use the buttons below if you want to run a safe retry or a fix.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="details-toggle">
|
||||
<button type="button" onClick={() => setShowDetails((value) => !value)}>
|
||||
{showDetails ? 'Hide details' : 'Show details (advanced)'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="pipeline-map">
|
||||
<h2>Pipeline location</h2>
|
||||
<div className="pipeline-steps">
|
||||
{pipelineSteps.map((step, index) => (
|
||||
<div
|
||||
key={step.key}
|
||||
className={`pipeline-step ${
|
||||
index === activeStage ? 'is-active' : index < activeStage ? 'is-complete' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="pipeline-dot" />
|
||||
<span>{step.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="pipeline-hint">The glowing light shows where your request is right now.</p>
|
||||
</section>
|
||||
|
||||
<section className="timeline">
|
||||
{extendedTimeline.map((hop, index) => (
|
||||
<div
|
||||
key={`${hop.service}-${index}`}
|
||||
className={`timeline-item ${
|
||||
hop.service === pipelineSteps[activeStage]?.key ? 'is-active' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="timeline-marker" />
|
||||
<div className="timeline-card">
|
||||
<div className="timeline-title">
|
||||
<strong>{hop.service}</strong>
|
||||
<span>{friendlyTimelineStatus(hop.service, hop.status)}</span>
|
||||
</div>
|
||||
{hop.service === 'Sonarr/Radarr' && hop.details?.series && (() => {
|
||||
const seasons = seasonStatsFromSeries(hop.details.series)
|
||||
if (seasons.length === 0) {
|
||||
return <div className="meta">Up to date</div>
|
||||
}
|
||||
return (
|
||||
<div className="timeline-sublist">
|
||||
<div className="meta">Seasons available vs missing</div>
|
||||
<ul>
|
||||
{seasons.map((season) => (
|
||||
<li key={season.seasonNumber}>
|
||||
<span>Season {season.seasonNumber}</span>
|
||||
<span>{season.available} available / {season.missing} missing</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
{hop.service === 'Sonarr/Radarr' && hop.details?.missingEpisodes && (
|
||||
<div className="timeline-sublist">
|
||||
<div className="meta">Missing episodes</div>
|
||||
<ul>
|
||||
{Object.entries(hop.details.missingEpisodes as Record<string, number[]>).map(
|
||||
([seasonNumber, episodes]) => (
|
||||
<li key={seasonNumber}>
|
||||
<span>Season {seasonNumber}</span>
|
||||
<span>
|
||||
{episodes.length
|
||||
? episodes.map((ep) => `E${ep}`).join(', ')
|
||||
: 'Episode numbers unavailable'}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{hop.service === 'Sonarr/Radarr' && hop.details?.note && (
|
||||
<div className="meta">{hop.details.note}</div>
|
||||
)}
|
||||
{hop.service === 'qBittorrent' &&
|
||||
Array.isArray(hop.details?.torrents) &&
|
||||
hop.details.torrents.length > 0 && (
|
||||
<div className="timeline-sublist">
|
||||
<div className="meta">Downloads in qBittorrent</div>
|
||||
<ul>
|
||||
{hop.details.torrents.map((torrent: Record<string, any>) => {
|
||||
const percent = percentFromTorrent(torrent)
|
||||
return (
|
||||
<li key={torrent.hash ?? torrent.name}>
|
||||
<span>{torrent.name ?? 'Unknown item'}</span>
|
||||
<span>{percent === null ? 'n/a' : `${percent}%`}</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{showDetails && hop.details && (
|
||||
<pre>{JSON.stringify(hop.details, null, 2)}</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="actions">
|
||||
<h2>Try a safe fix</h2>
|
||||
{actionMessage && <div className="action-message">{actionMessage}</div>}
|
||||
<div className="action-grid">
|
||||
{snapshot.actions.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!snapshot) return
|
||||
if (action.requires_confirmation) {
|
||||
const ok = window.confirm(
|
||||
`Run "${action.label}"? This action may change system state.`
|
||||
)
|
||||
if (!ok) return
|
||||
}
|
||||
const baseUrl = getApiBase()
|
||||
const actionMap: Record<string, string> = {
|
||||
search: 'actions/search',
|
||||
resume_torrent: 'actions/qbit/resume',
|
||||
readd_to_arr: 'actions/readd',
|
||||
}
|
||||
const path = actionMap[action.id]
|
||||
if (!path) {
|
||||
setActionMessage('This action is not wired yet.')
|
||||
return
|
||||
}
|
||||
if (action.id === 'search') {
|
||||
setActionMessage(null)
|
||||
setReleaseOptions([])
|
||||
setSearchRan(false)
|
||||
setModalMessage(null)
|
||||
}
|
||||
try {
|
||||
const response = await authFetch(`${baseUrl}/requests/${snapshot.request_id}/${path}`, {
|
||||
method: 'POST',
|
||||
})
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken()
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
const text = await response.text()
|
||||
throw new Error(text || `Request failed: ${response.status}`)
|
||||
}
|
||||
const data = await response.json()
|
||||
if (action.id === 'search') {
|
||||
if (Array.isArray(data.releases)) {
|
||||
setReleaseOptions(data.releases)
|
||||
}
|
||||
setSearchRan(true)
|
||||
if (!Array.isArray(data.releases) || data.releases.length === 0) {
|
||||
setModalMessage(
|
||||
'Nothing to grab yet. We searched your torrent providers but found no matches.'
|
||||
)
|
||||
} else {
|
||||
setModalMessage('Search complete. Pick an option below if you want to download.')
|
||||
}
|
||||
setActionMessage(`${action.label} started.`)
|
||||
} else {
|
||||
const message = data?.message ?? `${action.label} started.`
|
||||
setActionMessage(message)
|
||||
setModalMessage(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
const message = `${action.label} failed. Check the backend logs.`
|
||||
setActionMessage(message)
|
||||
setModalMessage(message)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
<span>
|
||||
{action.risk === 'low'
|
||||
? 'safe'
|
||||
: action.risk === 'medium'
|
||||
? 'caution'
|
||||
: action.risk === 'high'
|
||||
? 'high impact'
|
||||
: action.risk}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{releaseOptions.length > 0 && (
|
||||
<div className="timeline-sublist">
|
||||
<div className="meta">Download options found</div>
|
||||
<ul>
|
||||
{releaseOptions.map((release) => (
|
||||
<li key={`${release.guid ?? release.title}`}>
|
||||
<span>
|
||||
{release.title ?? 'Unknown option'}{' '}
|
||||
<small>{release.indexer ? `(${release.indexer})` : ''}</small>
|
||||
</span>
|
||||
<span>{release.seeders ?? 0} seeders · {formatBytes(release.size)}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!snapshot || !release.guid || !release.indexerId) {
|
||||
setActionMessage('Missing details to start the download.')
|
||||
setModalMessage('Missing details to start the download.')
|
||||
return
|
||||
}
|
||||
const ok = window.confirm(`Download "${release.title}"?`)
|
||||
if (!ok) return
|
||||
const baseUrl = getApiBase()
|
||||
try {
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/requests/${snapshot.request_id}/actions/grab`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
guid: release.guid,
|
||||
indexerId: release.indexerId,
|
||||
}),
|
||||
}
|
||||
)
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken()
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
const text = await response.text()
|
||||
throw new Error(text || `Request failed: ${response.status}`)
|
||||
}
|
||||
setActionMessage('Download sent to Sonarr/Radarr.')
|
||||
setModalMessage('Download sent to Sonarr/Radarr.')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
const message = 'Download failed. Check the logs.'
|
||||
setActionMessage(message)
|
||||
setModalMessage(message)
|
||||
}
|
||||
}}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="history">
|
||||
<h2>History</h2>
|
||||
<div className="history-grid">
|
||||
<div className="summary-card">
|
||||
<h3>Recent status changes</h3>
|
||||
<ul>
|
||||
{historySnapshots.length === 0 ? (
|
||||
<li>No history recorded yet.</li>
|
||||
) : (
|
||||
historySnapshots.map((entry) => (
|
||||
<li key={`${entry.created_at}-${entry.state}`}>
|
||||
<span>{entry.state.replaceAll('_', ' ')}</span>
|
||||
<span>{entry.state_reason ?? 'No reason provided.'}</span>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<h3>Recent actions</h3>
|
||||
<ul>
|
||||
{historyActions.length === 0 ? (
|
||||
<li>No actions recorded yet.</li>
|
||||
) : (
|
||||
historyActions.map((entry) => (
|
||||
<li key={`${entry.created_at}-${entry.action_id}`}>
|
||||
<span>{entry.label}</span>
|
||||
<span>{entry.message ?? entry.status}</span>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{modalMessage && (
|
||||
<div className="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div className="modal-card">
|
||||
<h2>Update</h2>
|
||||
<p>{modalMessage}</p>
|
||||
<button type="button" onClick={() => setModalMessage(null)}>
|
||||
Got it
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user