Surface block failure_reason in UI for all block types (#SKY-7620) (#4672)
This commit is contained in:
@@ -12,6 +12,7 @@ import { useWorkflowRunTimelineQuery } from "../hooks/useWorkflowRunTimelineQuer
|
||||
import { Status } from "@/api/types";
|
||||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { isTaskVariantBlock } from "../types/workflowTypes";
|
||||
import { statusIsAFailureType } from "@/routes/tasks/types";
|
||||
|
||||
function DebuggerRunOutput() {
|
||||
const { data: workflowRunTimeline, isLoading: workflowRunTimelineIsLoading } =
|
||||
@@ -49,6 +50,12 @@ function DebuggerRunOutput() {
|
||||
isTaskVariantBlock(activeBlock) &&
|
||||
activeBlock.status === Status.Completed;
|
||||
|
||||
const showFailureReason =
|
||||
activeBlock &&
|
||||
activeBlock.status !== null &&
|
||||
(statusIsAFailureType({ status: activeBlock.status }) ||
|
||||
activeBlock.status === Status.Canceled);
|
||||
|
||||
const outputs = workflowRun?.outputs;
|
||||
const fileUrls = workflowRun?.downloaded_file_urls ?? [];
|
||||
const observerOutput = workflowRun?.task_v2?.output;
|
||||
@@ -72,16 +79,21 @@ function DebuggerRunOutput() {
|
||||
<div className="rounded bg-slate-elevation2 p-6">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-sm font-bold">Block Outputs</h1>
|
||||
{activeBlock.output === null ? (
|
||||
<div className="text-sm">This block has no outputs</div>
|
||||
) : isTaskVariantBlock(activeBlock) ? (
|
||||
{showFailureReason ? (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm">
|
||||
{showExtractedInformation
|
||||
? "Extracted Information"
|
||||
: "Failure Reason"}
|
||||
</h2>
|
||||
{showExtractedInformation ? (
|
||||
<h2 className="text-sm">Failure Reason</h2>
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
activeBlock.status === "canceled"
|
||||
? "This block was cancelled"
|
||||
: activeBlock.failure_reason ?? ""
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
) : showExtractedInformation ? (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm">Extracted Information</h2>
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={JSON.stringify(
|
||||
@@ -95,18 +107,8 @@ function DebuggerRunOutput() {
|
||||
maxHeight="200px"
|
||||
readOnly
|
||||
/>
|
||||
) : (
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
activeBlock.status === "canceled"
|
||||
? "This block was cancelled"
|
||||
: activeBlock.failure_reason ?? ""
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
) : activeBlock.output !== null ? (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm">Output</h2>
|
||||
<CodeEditor
|
||||
@@ -117,6 +119,8 @@ function DebuggerRunOutput() {
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm">This block has no outputs</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ import { useWorkflowRunTimelineQuery } from "../hooks/useWorkflowRunTimelineQuer
|
||||
import { Status } from "@/api/types";
|
||||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { isTaskVariantBlock } from "../types/workflowTypes";
|
||||
import { statusIsAFailureType } from "@/routes/tasks/types";
|
||||
|
||||
function WorkflowRunOutput() {
|
||||
const { data: workflowRunTimeline, isLoading: workflowRunTimelineIsLoading } =
|
||||
@@ -49,6 +50,12 @@ function WorkflowRunOutput() {
|
||||
isTaskVariantBlock(activeBlock) &&
|
||||
activeBlock.status === Status.Completed;
|
||||
|
||||
const showFailureReason =
|
||||
activeBlock &&
|
||||
activeBlock.status !== null &&
|
||||
(statusIsAFailureType({ status: activeBlock.status }) ||
|
||||
activeBlock.status === Status.Canceled);
|
||||
|
||||
const outputs = workflowRun?.outputs;
|
||||
const fileUrls = workflowRun?.downloaded_file_urls ?? [];
|
||||
const observerOutput = workflowRun?.task_v2?.output;
|
||||
@@ -72,16 +79,21 @@ function WorkflowRunOutput() {
|
||||
<div className="rounded bg-slate-elevation2 p-6">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-lg font-bold">Block Outputs</h1>
|
||||
{activeBlock.output === null ? (
|
||||
<div>This block has no outputs</div>
|
||||
) : isTaskVariantBlock(activeBlock) ? (
|
||||
{showFailureReason ? (
|
||||
<div className="space-y-2">
|
||||
<h2>
|
||||
{showExtractedInformation
|
||||
? "Extracted Information"
|
||||
: "Failure Reason"}
|
||||
</h2>
|
||||
{showExtractedInformation ? (
|
||||
<h2>Failure Reason</h2>
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
activeBlock.status === "canceled"
|
||||
? "This block was cancelled"
|
||||
: activeBlock.failure_reason ?? ""
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
) : showExtractedInformation ? (
|
||||
<div className="space-y-2">
|
||||
<h2>Extracted Information</h2>
|
||||
<CodeEditor
|
||||
language="json"
|
||||
value={JSON.stringify(
|
||||
@@ -95,18 +107,8 @@ function WorkflowRunOutput() {
|
||||
maxHeight="200px"
|
||||
readOnly
|
||||
/>
|
||||
) : (
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
activeBlock.status === "canceled"
|
||||
? "This block was cancelled"
|
||||
: activeBlock.failure_reason ?? ""
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
) : activeBlock.output !== null ? (
|
||||
<div className="space-y-2">
|
||||
<h2>Output</h2>
|
||||
<CodeEditor
|
||||
@@ -117,6 +119,8 @@ function WorkflowRunOutput() {
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>This block has no outputs</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +57,9 @@ function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
|
||||
if (isWorkflowRunBlock(item)) {
|
||||
const showExtractedInformationTab = item.status === Status.Completed;
|
||||
const showFailureReasonTab =
|
||||
item.status && statusIsAFailureType({ status: item.status });
|
||||
item.status &&
|
||||
(statusIsAFailureType({ status: item.status }) ||
|
||||
item.status === Status.Canceled);
|
||||
const defaultTab = showExtractedInformationTab
|
||||
? "extracted_information"
|
||||
: showFailureReasonTab
|
||||
@@ -81,7 +83,7 @@ function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
|
||||
Extracted Information
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{item.status && statusIsAFailureType({ status: item.status }) && (
|
||||
{showFailureReasonTab && (
|
||||
<TabsTrigger value="failure_reason">Failure Reason</TabsTrigger>
|
||||
)}
|
||||
<TabsTrigger value="navigation_goal">Navigation Goal</TabsTrigger>
|
||||
@@ -116,7 +118,7 @@ function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
{item.status && statusIsAFailureType({ status: item.status }) && (
|
||||
{showFailureReasonTab && (
|
||||
<TabsContent value="failure_reason">
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
@@ -212,12 +214,30 @@ function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const fallbackDefaultTab = showFailureReasonTab
|
||||
? "failure_reason"
|
||||
: "output";
|
||||
return (
|
||||
<div className="rounded bg-slate-elevation1 p-4">
|
||||
<Tabs key={item.block_type} defaultValue="output">
|
||||
<Tabs key={item.block_type} defaultValue={fallbackDefaultTab}>
|
||||
<TabsList>
|
||||
{showFailureReasonTab && (
|
||||
<TabsTrigger value="failure_reason">Failure Reason</TabsTrigger>
|
||||
)}
|
||||
<TabsTrigger value="output">Output</TabsTrigger>
|
||||
</TabsList>
|
||||
{showFailureReasonTab && (
|
||||
<TabsContent value="failure_reason">
|
||||
<AutoResizingTextarea
|
||||
value={
|
||||
item.status === "canceled"
|
||||
? "This block was cancelled"
|
||||
: item.failure_reason ?? ""
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
<TabsContent value="output">
|
||||
<CodeEditor
|
||||
value={JSON.stringify(item.output, null, 2)}
|
||||
|
||||
Reference in New Issue
Block a user