Skip to content

Feat: Improved run start timeline visibility #1732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ericallam merged 31 commits into from
Feb 27, 2025
Merged

Feat: Improved run start timeline visibility #1732

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
ffcb239
Record cold start and execution metrics on attempt executions. Add co…
ericallam Feb 24, 2025
5b2001a
Add deployed tasks run timeline metrics
ericallam Feb 25, 2025
7f7cdc5
Add Dequeued event to run timeline and cleanup the run timeline code
ericallam Feb 25, 2025
b82acec
Adds variants to storybook
samejr Feb 26, 2025
d9f8952
WIP adding new span styles
samejr Feb 26, 2025
61e4268
Added offset progress bar animation
samejr Feb 26, 2025
381d3be
More storybook states
samejr Feb 26, 2025
d199647
Adds support for the full vertical span to show the same state
samejr Feb 26, 2025
07b7374
Adds error state to timelineLine
samejr Feb 26, 2025
d8f18f7
Added additional state
samejr Feb 26, 2025
9c651b1
Added more line styling
samejr Feb 26, 2025
efe359b
Added progress state to dequeued
samejr Feb 27, 2025
0be59a1
Added another state to storybook
samejr Feb 27, 2025
d6af00b
Fixed classname error
samejr Feb 27, 2025
ca57862
Updated styles for the span timeline points
samejr Feb 27, 2025
6af7008
Fixes alignment of timeline follow cursor indicator
samejr Feb 27, 2025
53d0437
Adds help text tooltip to timeline span type titles
samejr Feb 27, 2025
f9aec47
Fixes type error
samejr Feb 27, 2025
fb93042
Tweaked wording of tooltips
samejr Feb 27, 2025
a63145f
Fixed type error (check this)
samejr Feb 27, 2025
f1e904b
Moved isAdmin to a higher level
samejr Feb 27, 2025
c36012f
removed unused admin props
samejr Feb 27, 2025
27c7ae2
Removed unused Admin filter
samejr Feb 27, 2025
490edec
Fixed border styling
samejr Feb 27, 2025
76fcff7
made the opacity of the timeline states 30% less
samejr Feb 27, 2025
74ec03b
Undo type cast
samejr Feb 27, 2025
63d6efc
Added a diminished style that’s used for spans (grey progress bar)
samejr Feb 27, 2025
2ec5234
Adds new storybook state
samejr Feb 27, 2025
53b6d6d
Fixed timeline state
samejr Feb 27, 2025
221f444
Removed state if span isn’t the first
samejr Feb 27, 2025
15680e7
Changed the timestamp span icon
samejr Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
made the opacity of the timeline states 30% less
  • Loading branch information
@samejr
samejr committed Feb 27, 2025
commit 76fcff70279a72d84c05ec46880648bd9c9f55ea
150 changes: 78 additions & 72 deletions apps/webapp/app/components/run/RunTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,51 +377,53 @@ function EventMarker({
/>
<div
className={cn(
"h-full w-px",
"relative h-full w-px",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "inprogress"
? "animate-tile-scroll bg-pending"
? "bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
</>
);
case "dot-hollow":
return (
<>
<div
className={cn(
"h-full w-px",
"relative h-full w-px",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "inprogress"
? "animate-tile-scroll-offset bg-pending"
? "bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
<div
className={cn(
"size-[0.3125rem] min-h-[0.3125rem] rounded-full border",
Expand All @@ -436,25 +438,26 @@ function EventMarker({
/>
<div
className={cn(
"h-full w-px",
"relative h-full w-px",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "inprogress"
? "animate-tile-scroll-offset bg-pending"
? "bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
</>
);
case "dot-solid":
Expand All @@ -470,25 +473,26 @@ function EventMarker({
return (
<div
className={cn(
"h-full w-[0.4375rem] rounded-t-[0.125rem]",
"relative h-full w-[0.4375rem] rounded-t-[0.125rem]",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "inprogress"
? "animate-tile-scroll-offset bg-pending"
? "bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
);
case "end-cap-thick":
return (
Expand Down Expand Up @@ -535,53 +539,55 @@ function LineMarker({
return (
<div
className={cn(
"w-[0.4375rem]",
"relative w-[0.4375rem]",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "delayed"
? "bg-text-dimmed"
: state === "inprogress"
? "animate-tile-scroll rounded-b-[0.125rem] bg-pending"
? "rounded-b-[0.125rem] bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
);
case "light":
return (
<div
className={cn(
"w-px",
"relative w-px",
state === "complete"
? "bg-success"
: state === "error"
? "bg-error"
: state === "delayed"
? "bg-text-dimmed"
: state === "inprogress"
? "animate-tile-scroll bg-pending"
? "bg-pending"
: "bg-text-dimmed"
)}
style={
state === "inprogress"
? {
height: "100%",
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}
: undefined
}
/>
>
{state === "inprogress" && (
<div
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
style={{
backgroundImage: `url(${tileBgPath})`,
backgroundSize: "8px 8px",
}}
/>
)}
</div>
);
default:
return <div className="w-px rounded-[0.125rem] bg-text-dimmed" />;
Expand Down
2 changes: 1 addition & 1 deletion ...app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1146,7 +1146,7 @@ function SpanWithDuration({
<Timeline.Span {...props}>
<motion.div
className={cn(
"relative flex h-4 w-full min-w-[2px] items-center rounded-sm",
"relative flex h-4 w-full min-w-0.5 items-center rounded-sm",
eventBackgroundClassName(node.data)
)}
layoutId={node.id}
Expand Down