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}
|
) : null}
|
||||||
{!loading && !failed && result ? (
|
{!loading && !failed && result ? (
|
||||||
<>
|
<>
|
||||||
<table aria-label="Jobs">
|
<div className="table-scroll" role="region" aria-label="Jobs table" tabIndex={0}>
|
||||||
<thead>
|
<table className="dense-table" aria-label="Jobs">
|
||||||
<tr>
|
<thead>
|
||||||
<th
|
<tr>
|
||||||
scope="col"
|
<th
|
||||||
aria-sort={
|
scope="col"
|
||||||
sort === 'createdAt'
|
aria-sort={
|
||||||
? direction === 'asc'
|
sort === 'createdAt'
|
||||||
? 'ascending'
|
? direction === 'asc'
|
||||||
: 'descending'
|
? 'ascending'
|
||||||
: undefined
|
: 'descending'
|
||||||
}
|
: undefined
|
||||||
>
|
}
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label="Sort by created time"
|
|
||||||
onClick={() => changeSort('createdAt')}
|
|
||||||
>
|
>
|
||||||
Created
|
<button
|
||||||
</button>
|
type="button"
|
||||||
</th>
|
aria-label="Sort by created time"
|
||||||
<th scope="col">Job</th>
|
onClick={() => changeSort('createdAt')}
|
||||||
<th
|
>
|
||||||
scope="col"
|
Created
|
||||||
aria-sort={
|
</button>
|
||||||
sort === 'operationId'
|
</th>
|
||||||
? direction === 'asc'
|
<th scope="col">Job</th>
|
||||||
? 'ascending'
|
<th
|
||||||
: 'descending'
|
scope="col"
|
||||||
: undefined
|
aria-sort={
|
||||||
}
|
sort === 'operationId'
|
||||||
>
|
? direction === 'asc'
|
||||||
<button
|
? 'ascending'
|
||||||
type="button"
|
: 'descending'
|
||||||
aria-label="Sort by operation"
|
: undefined
|
||||||
onClick={() => changeSort('operationId')}
|
}
|
||||||
>
|
>
|
||||||
Operation
|
<button
|
||||||
</button>
|
type="button"
|
||||||
</th>
|
aria-label="Sort by operation"
|
||||||
<th
|
onClick={() => changeSort('operationId')}
|
||||||
scope="col"
|
>
|
||||||
aria-sort={
|
Operation
|
||||||
sort === 'status'
|
</button>
|
||||||
? direction === 'asc'
|
</th>
|
||||||
? 'ascending'
|
<th
|
||||||
: 'descending'
|
scope="col"
|
||||||
: undefined
|
aria-sort={
|
||||||
}
|
sort === 'status'
|
||||||
>
|
? direction === 'asc'
|
||||||
<button
|
? 'ascending'
|
||||||
type="button"
|
: 'descending'
|
||||||
aria-label="Sort by status"
|
: undefined
|
||||||
onClick={() => changeSort('status')}
|
}
|
||||||
>
|
>
|
||||||
Status
|
<button
|
||||||
</button>
|
type="button"
|
||||||
</th>
|
aria-label="Sort by status"
|
||||||
<th scope="col">Root job</th>
|
onClick={() => changeSort('status')}
|
||||||
<th scope="col">Items</th>
|
>
|
||||||
<th scope="col">Attempts</th>
|
Status
|
||||||
</tr>
|
</button>
|
||||||
</thead>
|
</th>
|
||||||
<tbody>
|
<th scope="col">Root job</th>
|
||||||
{result.items.map((item) => (
|
<th scope="col">Items</th>
|
||||||
<tr key={item.id}>
|
<th scope="col">Attempts</th>
|
||||||
<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>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{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">
|
<nav aria-label="Jobs pagination">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
Reference in New Issue
Block a user