Skip to content

Commit 7eab9a3

Browse files
samejrsamejr
committed
Adds TableRow to more tables
1 parent 13c9b98 commit 7eab9a3

File tree

3 files changed

+180
-174
lines changed

3 files changed

+180
-174
lines changed

‎apps/webapp/app/components/jobs/JobsTable.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,15 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul
3131
return (
3232
<Table containerClassName="mb-4">
3333
<TableHeader>
34-
<TableHeaderCell>Job</TableHeaderCell>
35-
<TableHeaderCell>ID</TableHeaderCell>
36-
<TableHeaderCell>Integrations</TableHeaderCell>
37-
<TableHeaderCell>Properties</TableHeaderCell>
38-
<TableHeaderCell>Last run</TableHeaderCell>
39-
<TableHeaderCell>Status</TableHeaderCell>
40-
<TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
34+
<TableRow>
35+
<TableHeaderCell>Job</TableHeaderCell>
36+
<TableHeaderCell>ID</TableHeaderCell>
37+
<TableHeaderCell>Integrations</TableHeaderCell>
38+
<TableHeaderCell>Properties</TableHeaderCell>
39+
<TableHeaderCell>Last run</TableHeaderCell>
40+
<TableHeaderCell>Status</TableHeaderCell>
41+
<TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
42+
</TableRow>
4143
</TableHeader>
4244
<TableBody>
4345
{jobs.length > 0 ? (

‎apps/webapp/app/components/runs/RunsTable.tsx

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,21 @@ export function RunsTable({
5858
return (
5959
<Table>
6060
<TableHeader>
61-
<TableHeaderCell>Run</TableHeaderCell>
62-
{showJob && <TableHeaderCell>Job</TableHeaderCell>}
63-
<TableHeaderCell>Env</TableHeaderCell>
64-
<TableHeaderCell>Status</TableHeaderCell>
65-
<TableHeaderCell>Started</TableHeaderCell>
66-
<TableHeaderCell>Duration</TableHeaderCell>
67-
<TableHeaderCell>Exec Time</TableHeaderCell>
68-
<TableHeaderCell>Test</TableHeaderCell>
69-
<TableHeaderCell>Version</TableHeaderCell>
70-
<TableHeaderCell>Created at</TableHeaderCell>
71-
<TableHeaderCell>
72-
<span className="sr-only">Go to page</span>
73-
</TableHeaderCell>
61+
<TableRow>
62+
<TableHeaderCell>Run</TableHeaderCell>
63+
{showJob && <TableHeaderCell>Job</TableHeaderCell>}
64+
<TableHeaderCell>Env</TableHeaderCell>
65+
<TableHeaderCell>Status</TableHeaderCell>
66+
<TableHeaderCell>Started</TableHeaderCell>
67+
<TableHeaderCell>Duration</TableHeaderCell>
68+
<TableHeaderCell>Exec Time</TableHeaderCell>
69+
<TableHeaderCell>Test</TableHeaderCell>
70+
<TableHeaderCell>Version</TableHeaderCell>
71+
<TableHeaderCell>Created at</TableHeaderCell>
72+
<TableHeaderCell>
73+
<span className="sr-only">Go to page</span>
74+
</TableHeaderCell>
75+
</TableRow>
7476
</TableHeader>
7577
<TableBody>
7678
{total === 0 && !hasFilters ? (

‎apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

Lines changed: 156 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -109,171 +109,173 @@ export function TaskRunsTable({
109109
return (
110110
<Table variant={variant} className="max-h-full overflow-y-auto">
111111
<TableHeader>
112-
{allowSelection && (
113-
<TableHeaderCell className="pl-3 pr-0">
114-
{runs.length > 0 && (
115-
<Checkbox
116-
checked={hasAll(runs.map((r) => r.id))}
117-
onChange={(element) => {
118-
const ids = runs.map((r) => r.id);
119-
const checked = element.currentTarget.checked;
120-
if (checked) {
121-
select(ids);
122-
} else {
123-
deselect(ids);
124-
}
125-
}}
126-
ref={(r) => {
127-
checkboxes.current[0] = r;
128-
}}
129-
onKeyDown={(event) => navigateCheckboxes(event, 0)}
130-
/>
131-
)}
112+
<TableRow>
113+
{allowSelection && (
114+
<TableHeaderCell className="pl-3 pr-0">
115+
{runs.length > 0 && (
116+
<Checkbox
117+
checked={hasAll(runs.map((r) => r.id))}
118+
onChange={(element) => {
119+
const ids = runs.map((r) => r.id);
120+
const checked = element.currentTarget.checked;
121+
if (checked) {
122+
select(ids);
123+
} else {
124+
deselect(ids);
125+
}
126+
}}
127+
ref={(r) => {
128+
checkboxes.current[0] = r;
129+
}}
130+
onKeyDown={(event) => navigateCheckboxes(event, 0)}
131+
/>
132+
)}
133+
</TableHeaderCell>
134+
)}
135+
<TableHeaderCell alignment="right">Run #</TableHeaderCell>
136+
<TableHeaderCell>Env</TableHeaderCell>
137+
<TableHeaderCell>Task</TableHeaderCell>
138+
<TableHeaderCell>Version</TableHeaderCell>
139+
<TableHeaderCell
140+
tooltip={
141+
<div className="flex flex-col divide-y divide-grid-dimmed">
142+
{filterableTaskRunStatuses.map((status) => (
143+
<div
144+
key={status}
145+
className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
146+
>
147+
<div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
148+
<TaskRunStatusCombo status={status} />
149+
</div>
150+
<Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
151+
{descriptionForTaskRunStatus(status)}
152+
</Paragraph>
153+
</div>
154+
))}
155+
</div>
156+
}
157+
>
158+
Status
132159
</TableHeaderCell>
133-
)}
134-
<TableHeaderCell alignment="right">Run #</TableHeaderCell>
135-
<TableHeaderCell>Env</TableHeaderCell>
136-
<TableHeaderCell>Task</TableHeaderCell>
137-
<TableHeaderCell>Version</TableHeaderCell>
138-
<TableHeaderCell
139-
tooltip={
140-
<div className="flex flex-col divide-y divide-grid-dimmed">
141-
{filterableTaskRunStatuses.map((status) => (
142-
<div
143-
key={status}
144-
className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
145-
>
146-
<div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
147-
<TaskRunStatusCombo status={status} />
160+
<TableHeaderCell>Started</TableHeaderCell>
161+
<TableHeaderCell
162+
colSpan={3}
163+
tooltip={
164+
<div className="flex max-w-xs flex-col gap-4 p-1">
165+
<div>
166+
<div className="mb-0.5 flex items-center gap-1.5">
167+
<RectangleStackIcon className="size-4 text-text-dimmed" />
168+
<Header3>Queued duration</Header3>
148169
</div>
149-
<Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
150-
{descriptionForTaskRunStatus(status)}
170+
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
171+
The amount of time from when the run was created to it starting to run.
151172
</Paragraph>
152173
</div>
153-
))}
154-
</div>
155-
}
156-
>
157-
Status
158-
</TableHeaderCell>
159-
<TableHeaderCell>Started</TableHeaderCell>
160-
<TableHeaderCell
161-
colSpan={3}
162-
tooltip={
163-
<div className="flex max-w-xs flex-col gap-4 p-1">
164-
<div>
165-
<div className="mb-0.5 flex items-center gap-1.5">
166-
<RectangleStackIcon className="size-4 text-text-dimmed" />
167-
<Header3>Queued duration</Header3>
174+
<div>
175+
<div className="mb-0.5 flex items-center gap-1.5">
176+
<ClockIcon className="size-4 text-blue-500" /> <Header3>Run duration</Header3>
177+
</div>
178+
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
179+
The total amount of time from the run starting to it finishing. This includes
180+
all time spent waiting.
181+
</Paragraph>
182+
</div>
183+
<div>
184+
<div className="mb-0.5 flex items-center gap-1.5">
185+
<CpuChipIcon className="size-4 text-success" />
186+
<Header3>Compute duration</Header3>
187+
</div>
188+
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
189+
The amount of compute time used in the run. This does not include time spent
190+
waiting.
191+
</Paragraph>
168192
</div>
169-
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
170-
The amount of time from when the run was created to it starting to run.
193+
</div>
194+
}
195+
>
196+
Duration
197+
</TableHeaderCell>
198+
{showCompute && (
199+
<>
200+
<TableHeaderCell>Compute</TableHeaderCell>
201+
</>
202+
)}
203+
<TableHeaderCell>Test</TableHeaderCell>
204+
<TableHeaderCell>Created at</TableHeaderCell>
205+
<TableHeaderCell
206+
tooltip={
207+
<div className="max-w-xs p-1">
208+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
209+
When you want to trigger a task now, but have it run at a later time, you can use
210+
the delay option.
171211
</Paragraph>
212+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
213+
Runs that are delayed and have not been enqueued yet will display in the dashboard
214+
with a “Delayed” status.
215+
</Paragraph>
216+
<LinkButton
217+
to={docsPath("v3/triggering")}
218+
variant="docs/small"
219+
LeadingIcon={BookOpenIcon}
220+
className="mt-3"
221+
>
222+
Read docs
223+
</LinkButton>
172224
</div>
173-
<div>
174-
<div className="mb-0.5 flex items-center gap-1.5">
175-
<ClockIcon className="size-4 text-blue-500" /> <Header3>Run duration</Header3>
176-
</div>
177-
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
178-
The total amount of time from the run starting to it finishing. This includes all
179-
time spent waiting.
225+
}
226+
>
227+
Delayed until
228+
</TableHeaderCell>
229+
<TableHeaderCell
230+
tooltip={
231+
<div className="max-w-xs p-1">
232+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
233+
You can set a TTL (time to live) when triggering a task, which will automatically
234+
expire the run if it hasn’t started within the specified time.
180235
</Paragraph>
236+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
237+
All runs in development have a default ttl of 10 minutes. You can disable this by
238+
setting the ttl option.
239+
</Paragraph>
240+
<LinkButton
241+
to={docsPath("v3/triggering")}
242+
variant="docs/small"
243+
LeadingIcon={BookOpenIcon}
244+
className="mt-3"
245+
>
246+
Read docs
247+
</LinkButton>
181248
</div>
182-
<div>
183-
<div className="mb-0.5 flex items-center gap-1.5">
184-
<CpuChipIcon className="size-4 text-success" />
185-
<Header3>Compute duration</Header3>
186-
</div>
187-
<Paragraph variant="small" className="!text-wrap text-text-dimmed">
188-
The amount of compute time used in the run. This does not include time spent
189-
waiting.
249+
}
250+
>
251+
TTL
252+
</TableHeaderCell>
253+
<TableHeaderCell
254+
tooltip={
255+
<div className="max-w-xs p-1">
256+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
257+
You can add tags to a run and then filter runs using them.
190258
</Paragraph>
259+
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
260+
You can add tags when triggering a run or inside the run function.
261+
</Paragraph>
262+
<LinkButton
263+
to={docsPath("v3/tags")}
264+
variant="docs/small"
265+
LeadingIcon={BookOpenIcon}
266+
className="mt-3"
267+
>
268+
Read docs
269+
</LinkButton>
191270
</div>
192-
</div>
193-
}
194-
>
195-
Duration
196-
</TableHeaderCell>
197-
{showCompute && (
198-
<>
199-
<TableHeaderCell>Compute</TableHeaderCell>
200-
</>
201-
)}
202-
<TableHeaderCell>Test</TableHeaderCell>
203-
<TableHeaderCell>Created at</TableHeaderCell>
204-
<TableHeaderCell
205-
tooltip={
206-
<div className="max-w-xs p-1">
207-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
208-
When you want to trigger a task now, but have it run at a later time, you can use
209-
the delay option.
210-
</Paragraph>
211-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
212-
Runs that are delayed and have not been enqueued yet will display in the dashboard
213-
with a “Delayed” status.
214-
</Paragraph>
215-
<LinkButton
216-
to={docsPath("v3/triggering")}
217-
variant="docs/small"
218-
LeadingIcon={BookOpenIcon}
219-
className="mt-3"
220-
>
221-
Read docs
222-
</LinkButton>
223-
</div>
224-
}
225-
>
226-
Delayed until
227-
</TableHeaderCell>
228-
<TableHeaderCell
229-
tooltip={
230-
<div className="max-w-xs p-1">
231-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
232-
You can set a TTL (time to live) when triggering a task, which will automatically
233-
expire the run if it hasn’t started within the specified time.
234-
</Paragraph>
235-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
236-
All runs in development have a default ttl of 10 minutes. You can disable this by
237-
setting the ttl option.
238-
</Paragraph>
239-
<LinkButton
240-
to={docsPath("v3/triggering")}
241-
variant="docs/small"
242-
LeadingIcon={BookOpenIcon}
243-
className="mt-3"
244-
>
245-
Read docs
246-
</LinkButton>
247-
</div>
248-
}
249-
>
250-
TTL
251-
</TableHeaderCell>
252-
<TableHeaderCell
253-
tooltip={
254-
<div className="max-w-xs p-1">
255-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
256-
You can add tags to a run and then filter runs using them.
257-
</Paragraph>
258-
<Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
259-
You can add tags when triggering a run or inside the run function.
260-
</Paragraph>
261-
<LinkButton
262-
to={docsPath("v3/tags")}
263-
variant="docs/small"
264-
LeadingIcon={BookOpenIcon}
265-
className="mt-3"
266-
>
267-
Read docs
268-
</LinkButton>
269-
</div>
270-
}
271-
>
272-
Tags
273-
</TableHeaderCell>
274-
<TableHeaderCell>
275-
<span className="sr-only">Go to page</span>
276-
</TableHeaderCell>
271+
}
272+
>
273+
Tags
274+
</TableHeaderCell>
275+
<TableHeaderCell>
276+
<span className="sr-only">Go to page</span>
277+
</TableHeaderCell>
278+
</TableRow>
277279
</TableHeader>
278280
<TableBody>
279281
{total === 0 && !hasFilters ? (

0 commit comments

Comments
 (0)