Skip to content

Commit

Permalink
fix(ui): Fix and cleanup related workflow runs (#585)
Browse files Browse the repository at this point in the history
  • Loading branch information
daryllimyt authored Dec 4, 2024
1 parent 4b0070c commit cc417c1
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 67 deletions.
97 changes: 55 additions & 42 deletions frontend/src/components/executions/event-details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
ERROR_EVENT_TYPES,
getRelativeTime,
parseEventType,
parseExecutionId,
} from "@/lib/event-history"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
Expand Down Expand Up @@ -174,12 +175,20 @@ export function EventGeneralInfo({ event }: { event: EventHistoryResponse }) {

// Construct the link within the same workspace to the related workflow execution
const { workspaceId } = useParams()
const [relatedWorkflowId, relatedExecutionId] =
related_wf_exec_id?.split(":") ?? []
const relatedWorkflowExecutionLink = `/workspaces/${workspaceId}/workflows/${relatedWorkflowId}/executions/${relatedExecutionId}`
const [parentWorkflowId, parentExecutionId] =
parent_wf_exec_id?.split(":") ?? []
const parentWorkflowExecutionLink = `/workspaces/${workspaceId}/workflows/${parentWorkflowId}/executions/${parentExecutionId}`
let relatedWorkflowExecutionLink: string | undefined
if (related_wf_exec_id) {
const [relatedWorkflowId, relatedExecutionId] =
parseExecutionId(related_wf_exec_id)

relatedWorkflowExecutionLink = `/workspaces/${workspaceId}/workflows/${relatedWorkflowId}/executions/${relatedExecutionId}`
}

let parentWorkflowExecutionLink: string | undefined
if (parent_wf_exec_id) {
const [parentWorkflowId, parentExecutionId] =
parseExecutionId(parent_wf_exec_id)
parentWorkflowExecutionLink = `/workspaces/${workspaceId}/workflows/${parentWorkflowId}/executions/${parentExecutionId}`
}

return (
<div className="my-4 flex flex-col space-y-2 px-4">
Expand Down Expand Up @@ -223,42 +232,46 @@ export function EventGeneralInfo({ event }: { event: EventHistoryResponse }) {
event_type == "CHILD_WORKFLOW_EXECUTION_FAILED" && "bg-rose-200"
)}
/>
{event_type.includes("CHILD_WORKFLOW_EXECUTION") && (
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">
<Link href={relatedWorkflowExecutionLink}>
<div className="flex items-center gap-1">
<span className="font-normal">Go to workflow run</span>
<SquareArrowOutUpRightIcon className="size-3" />
</div>
</Link>
</Badge>
</TooltipTrigger>
<TooltipContent>
<span>{related_wf_exec_id}</span>
</TooltipContent>
</Tooltip>
)}
{event_type == "WORKFLOW_EXECUTION_STARTED" && parent_wf_exec_id && (
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">
<Link href={parentWorkflowExecutionLink}>
<div className="flex items-center gap-1">
<span className="font-normal">
Go to parent workflow run
</span>
<SquareArrowOutUpRightIcon className="size-3" />
</div>
</Link>
</Badge>
</TooltipTrigger>
<TooltipContent>
<span>{parent_wf_exec_id}</span>
</TooltipContent>
</Tooltip>
)}
{event_type.includes("CHILD_WORKFLOW_EXECUTION") &&
related_wf_exec_id &&
relatedWorkflowExecutionLink && (
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">
<Link href={relatedWorkflowExecutionLink}>
<div className="flex items-center gap-1">
<span className="font-normal">Go to workflow run</span>
<SquareArrowOutUpRightIcon className="size-3" />
</div>
</Link>
</Badge>
</TooltipTrigger>
<TooltipContent>
<span>{related_wf_exec_id}</span>
</TooltipContent>
</Tooltip>
)}
{event_type == "WORKFLOW_EXECUTION_STARTED" &&
parent_wf_exec_id &&
parentWorkflowExecutionLink && (
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">
<Link href={parentWorkflowExecutionLink}>
<div className="flex items-center gap-1">
<span className="font-normal">
Go to parent workflow run
</span>
<SquareArrowOutUpRightIcon className="size-3" />
</div>
</Link>
</Badge>
</TooltipTrigger>
<TooltipContent>
<span>{parent_wf_exec_id}</span>
</TooltipContent>
</Tooltip>
)}
</div>
<div className="space-x-2">
<Label className="w-24 text-xs text-muted-foreground">Event ID</Label>
Expand Down
21 changes: 1 addition & 20 deletions frontend/src/components/executions/nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { useParams, usePathname, useRouter } from "next/navigation"
import { useWorkspace } from "@/providers/workspace"
import { TriangleRightIcon } from "@radix-ui/react-icons"

import { parseExecutionId } from "@/lib/event-history"
import { ToastAction } from "@/components/ui/toast"
import { toast } from "@/components/ui/use-toast"

Expand Down Expand Up @@ -259,23 +260,3 @@ export function getExecutionStatusIcon(
throw new Error("Invalid status")
}
}

/**
* Get the execution ID from a full execution ID
* @param fullExecutionId
* @returns the execution ID
*
* Example:
* - "wf-123:1234567890" -> ["wf-123", "1234567890"]
* - "wf-123:1234567890:1" -> ["wf-123", "1234567890:1"]
*/
function parseExecutionId(fullExecutionId: string): [string, string] {
// Split at most once from the left, keeping any remaining colons in the second part
const splitIndex = fullExecutionId.indexOf(":")
if (splitIndex === -1) {
throw new Error("Invalid execution ID format - missing colon separator")
}
const workflowId = fullExecutionId.slice(0, splitIndex)
const executionId = fullExecutionId.slice(splitIndex + 1)
return [workflowId, executionId]
}
5 changes: 0 additions & 5 deletions frontend/src/components/executions/testdecode.ts

This file was deleted.

20 changes: 20 additions & 0 deletions frontend/src/lib/event-history.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,23 @@ export function getRelativeTime(date: Date) {
if (seconds > 0) return `${seconds} second${seconds > 1 ? "s" : ""} ago`
return "just now"
}

/**
* Get the execution ID from a full execution ID
* @param fullExecutionId
* @returns the execution ID
*
* Example:
* - "wf-123:1234567890" -> ["wf-123", "1234567890"]
* - "wf-123:1234567890:1" -> ["wf-123", "1234567890:1"]
*/
export function parseExecutionId(fullExecutionId: string): [string, string] {
// Split at most once from the left, keeping any remaining colons in the second part
const splitIndex = fullExecutionId.indexOf(":")
if (splitIndex === -1) {
throw new Error("Invalid execution ID format - missing colon separator")
}
const workflowId = fullExecutionId.slice(0, splitIndex)
const executionId = fullExecutionId.slice(splitIndex + 1)
return [workflowId, executionId]
}

0 comments on commit cc417c1

Please sign in to comment.