Skip to content
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

Put success/failure indicators in block items of timelines #1680

Merged
merged 1 commit into from
Jan 30, 2025
Merged

Put success/failure indicators in block items of timelines #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function ActionCard({ action, onClick, active, index }: Props) {
if (element && active) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
block: "start",
});
}
// this should only run once at mount.
Expand Down
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/workflows/workflowRun/ThoughtCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function ThoughtCard({ thought, onClick, active }: Props) {
if (element && active) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
block: "start",
});
}
// this should only run once at mount.
Expand Down
58 changes: 43 additions & 15 deletions skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { CubeIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
import {
CheckCircledIcon,
CrossCircledIcon,
CubeIcon,
ExternalLinkIcon,
} from "@radix-ui/react-icons";
import { workflowBlockTitle } from "../editor/nodes/types";
import { WorkflowBlockIcon } from "../editor/nodes/WorkflowBlockIcon";
import {
Expand All @@ -15,6 +20,7 @@ import { cn } from "@/util/utils";
import { isTaskVariantBlock } from "../types/workflowTypes";
import { Link } from "react-router-dom";
import { useCallback } from "react";
import { Status } from "@/api/types";

type Props = {
activeItem: WorkflowRunOverviewActiveElement;
Expand Down Expand Up @@ -55,13 +61,23 @@ function WorkflowRunTimelineBlockItem({
) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
block: "start",
});
}
// this should only run once at mount.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const showStatusIndicator = block.status !== null;
const showSuccessIndicator =
showStatusIndicator && block.status === Status.Completed;
const showFailureIndicator =
showStatusIndicator &&
(block.status === Status.Failed ||
block.status === Status.Terminated ||
block.status === Status.TimedOut ||
block.status === Status.Canceled);

return (
<div
className={cn(
Expand All @@ -87,20 +103,32 @@ function WorkflowRunTimelineBlockItem({
/>
<span>{workflowBlockTitle[block.block_type]}</span>
</div>
<div className="flex items-center gap-1 rounded bg-slate-elevation5 px-2 py-1">
{showDiagnosticLink ? (
<Link to={`/tasks/${block.task_id}/diagnostics`}>
<div className="flex gap-1">
<ExternalLinkIcon className="size-4" />
<span className="text-xs">Diagnostics</span>
</div>
</Link>
) : (
<>
<CubeIcon className="size-4" />
<span className="text-xs">Block</span>
</>
<div className="flex gap-2">
{showFailureIndicator && (
<div className="bg-slate-elevation5 px-2 py-1">
<CrossCircledIcon className="size-4 text-destructive" />
</div>
)}
{showSuccessIndicator && (
<div className="bg-slate-elevation5 px-2 py-1">
<CheckCircledIcon className="size-4 text-success" />
</div>
)}
<div className="flex items-center gap-1 rounded bg-slate-elevation5 px-2 py-1">
{showDiagnosticLink ? (
<Link to={`/tasks/${block.task_id}/diagnostics`}>
<div className="flex gap-1">
<ExternalLinkIcon className="size-4" />
<span className="text-xs">Diagnostics</span>
</div>
</Link>
) : (
<>
<CubeIcon className="size-4" />
<span className="text-xs">Block</span>
</>
)}
</div>
</div>
</div>
{block.description ? (
Expand Down