Skip to content

Commit 9f577c7

Browse files
samejrsamejr
committed
Removes unnecessary rows from table header
1 parent 1daafa3 commit 9f577c7

File tree

3 files changed

+171
-177
lines changed
  • apps/webapp/app
    • components/runs/v3
    • routes
      • _app.orgs.$organizationSlug.projects.v3.$projectParam._index
      • _app.orgs.$organizationSlug.projects.v3.$projectParam.test

3 files changed

+171
-177
lines changed

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

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

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -245,16 +245,14 @@ export default function Page() {
245245
</div>
246246
<Table containerClassName="max-h-full pb-[2.5rem]">
247247
<TableHeader>
248-
<TableRow>
249-
<TableHeaderCell>Task ID</TableHeaderCell>
250-
<TableHeaderCell>Task</TableHeaderCell>
251-
<TableHeaderCell>Running</TableHeaderCell>
252-
<TableHeaderCell>Queued</TableHeaderCell>
253-
<TableHeaderCell>Activity (7d)</TableHeaderCell>
254-
<TableHeaderCell>Avg. duration</TableHeaderCell>
255-
<TableHeaderCell>Environments</TableHeaderCell>
256-
<TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
257-
</TableRow>
248+
<TableHeaderCell>Task ID</TableHeaderCell>
249+
<TableHeaderCell>Task</TableHeaderCell>
250+
<TableHeaderCell>Running</TableHeaderCell>
251+
<TableHeaderCell>Queued</TableHeaderCell>
252+
<TableHeaderCell>Activity (7d)</TableHeaderCell>
253+
<TableHeaderCell>Avg. duration</TableHeaderCell>
254+
<TableHeaderCell>Environments</TableHeaderCell>
255+
<TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
258256
</TableHeader>
259257
<TableBody>
260258
{filteredItems.length > 0 ? (
@@ -291,13 +289,13 @@ export default function Page() {
291289
<span>{task.slug}</span>
292290
</div>
293291
</TableCell>
294-
<TableCell to={path} className="py-0" actionClassName="py-0">
292+
<TableCell to={path}>
295293
<TaskFunctionName
296294
functionName={task.exportName}
297295
variant="extra-extra-small"
298296
/>
299297
</TableCell>
300-
<TableCell to={path} className="p-0">
298+
<TableCell to={path}>
301299
<Suspense
302300
fallback={
303301
<>
@@ -313,7 +311,7 @@ export default function Page() {
313311
</TypedAwait>
314312
</Suspense>
315313
</TableCell>
316-
<TableCell to={path} className="p-0">
314+
<TableCell to={path}>
317315
<Suspense fallback={<></>}>
318316
<TypedAwait resolve={runningStats}>
319317
{(data) => {
@@ -323,7 +321,7 @@ export default function Page() {
323321
</TypedAwait>
324322
</Suspense>
325323
</TableCell>
326-
<TableCell to={path} className="p-0" actionClassName="py-0">
324+
<TableCell to={path}>
327325
<Suspense fallback={<TaskActivityBlankState />}>
328326
<TypedAwait resolve={activity}>
329327
{(data) => {
@@ -343,7 +341,7 @@ export default function Page() {
343341
</TypedAwait>
344342
</Suspense>
345343
</TableCell>
346-
<TableCell to={path} className="p-0">
344+
<TableCell to={path}>
347345
<Suspense fallback={<></>}>
348346
<TypedAwait resolve={durations}>
349347
{(data) => {

0 commit comments

Comments
 (0)