fix(web): contain jobs table on narrow screens
This commit is contained in:
chick
+103
-101
@@ -347,111 +347,113 @@ export function JobsPage({ dataSource, refreshSignal = 0 }: JobsPageProps) {
|
||||
) : null}
|
||||
{!loading && !failed && result ? (
|
||||
<>
|
||||
<table aria-label="Jobs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'createdAt'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by created time"
|
||||
onClick={() => changeSort('createdAt')}
|
||||
<div className="table-scroll" role="region" aria-label="Jobs table" tabIndex={0}>
|
||||
<table className="dense-table" aria-label="Jobs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'createdAt'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Created
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Job</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'operationId'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by operation"
|
||||
onClick={() => changeSort('operationId')}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by created time"
|
||||
onClick={() => changeSort('createdAt')}
|
||||
>
|
||||
Created
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Job</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'operationId'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Operation
|
||||
</button>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'status'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by status"
|
||||
onClick={() => changeSort('status')}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by operation"
|
||||
onClick={() => changeSort('operationId')}
|
||||
>
|
||||
Operation
|
||||
</button>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'status'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Status
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Root job</th>
|
||||
<th scope="col">Items</th>
|
||||
<th scope="col">Attempts</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.items.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{item.createdAt}</td>
|
||||
<th scope="row">{item.id}</th>
|
||||
<td>{item.operationId}</td>
|
||||
<td>{statusLabel(item.status)}</td>
|
||||
<td>{item.rootJobId}</td>
|
||||
<td>
|
||||
{item.items.length === 0 ? (
|
||||
<span>
|
||||
{item.status === 'queued' ||
|
||||
item.status === 'running' ||
|
||||
item.status === 'cancelling'
|
||||
? 'No terminal item results while this job is active.'
|
||||
: 'No terminal item results.'}
|
||||
</span>
|
||||
) : null}
|
||||
{item.items.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
<span>{entry.targetId}</span> — <span>{statusLabel(entry.state)}</span>
|
||||
{entry.error ? (
|
||||
<>
|
||||
{' '}
|
||||
— <span>{entry.error.code}</span> — <span>{entry.error.title}</span> —{' '}
|
||||
<span>{entry.error.status}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{item.attempts.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
{entry.id} — {statusLabel(entry.state)}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by status"
|
||||
onClick={() => changeSort('status')}
|
||||
>
|
||||
Status
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Root job</th>
|
||||
<th scope="col">Items</th>
|
||||
<th scope="col">Attempts</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.items.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{item.createdAt}</td>
|
||||
<th scope="row">{item.id}</th>
|
||||
<td>{item.operationId}</td>
|
||||
<td>{statusLabel(item.status)}</td>
|
||||
<td>{item.rootJobId}</td>
|
||||
<td>
|
||||
{item.items.length === 0 ? (
|
||||
<span>
|
||||
{item.status === 'queued' ||
|
||||
item.status === 'running' ||
|
||||
item.status === 'cancelling'
|
||||
? 'No terminal item results while this job is active.'
|
||||
: 'No terminal item results.'}
|
||||
</span>
|
||||
) : null}
|
||||
{item.items.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
<span>{entry.targetId}</span> — <span>{statusLabel(entry.state)}</span>
|
||||
{entry.error ? (
|
||||
<>
|
||||
{' '}
|
||||
— <span>{entry.error.code}</span> — <span>{entry.error.title}</span> —{' '}
|
||||
<span>{entry.error.status}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{item.attempts.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
{entry.id} — {statusLabel(entry.state)}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<nav aria-label="Jobs pagination">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user