Skip to content

Commit e014654

Browse files
MbeaulneMbeaulne
authored
hides logs and details for subgraph nodes (#1175)
## Description Added support for subgraph components in the execution details view. The PR conditionally hides container execution details and logs for subgraph components, as these are not applicable for graph implementations. ## Type of Change - [x] Improvement - [x] New feature ## Checklist - [x] I have tested this does not break current pipelines / runs functionality - [x] I have tested the changes on staging ## Test Instructions 1. Create a pipeline with a subgraph component 2. Run the pipeline 3. Verify that container execution details and logs are not displayed for the subgraph component 4. Verify that regular components still show execution details and logs as before
1 parent 2de1c31 commit e014654

File tree

3 files changed

+96
-77
lines changed

3 files changed

+96
-77
lines changed

‎src/components/shared/ExecutionDetails/ExecutionDetails.tsx‎

Lines changed: 91 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,29 @@ import {
1010
import { Skeleton } from "@/components/ui/skeleton";
1111
import { useBackend } from "@/providers/BackendProvider";
1212
import { useFetchContainerExecutionState } from "@/services/executionService";
13+
import {
14+
type ComponentSpec,
15+
isGraphImplementation,
16+
} from "@/utils/componentSpec";
1317
import { EXIT_CODE_OOM } from "@/utils/constants";
1418
import { formatDate, formatDuration } from "@/utils/date";
1519

1620
import { InfoBox } from "../InfoBox";
1721

1822
interface ExecutionDetailsProps {
1923
executionId: string;
24+
componentSpec?: ComponentSpec;
2025
}
2126

22-
export const ExecutionDetails = ({ executionId }: ExecutionDetailsProps) => {
27+
export const ExecutionDetails = ({
28+
executionId,
29+
componentSpec,
30+
}: ExecutionDetailsProps) => {
2331
const { backendUrl } = useBackend();
2432

33+
const isSubgraph =
34+
componentSpec && isGraphImplementation(componentSpec.implementation);
35+
2536
const {
2637
data: containerState,
2738
isLoading: isLoadingContainerState,
@@ -63,86 +74,92 @@ export const ExecutionDetails = ({ executionId }: ExecutionDetailsProps) => {
6374
</span>
6475
</div>
6576

66-
{isLoadingContainerState && (
67-
<div className="space-y-2">
68-
<div className="flex items-center gap-2">
69-
<Skeleton className="h-3 w-12" />
70-
<Skeleton className="h-3 w-32" />
71-
</div>
72-
<div className="flex items-center gap-2">
73-
<Skeleton className="h-3 w-20" />
74-
<Skeleton className="h-3 w-24" />
75-
<Skeleton className="h-3 w-40" />
76-
</div>
77-
</div>
78-
)}
77+
{!isSubgraph && (
78+
<>
79+
{isLoadingContainerState && (
80+
<div className="space-y-2">
81+
<div className="flex items-center gap-2">
82+
<Skeleton className="h-3 w-12" />
83+
<Skeleton className="h-3 w-32" />
84+
</div>
85+
<div className="flex items-center gap-2">
86+
<Skeleton className="h-3 w-20" />
87+
<Skeleton className="h-3 w-24" />
88+
<Skeleton className="h-3 w-40" />
89+
</div>
90+
</div>
91+
)}
7992

80-
{containerStateError && (
81-
<InfoBox title="Failed to load container state" variant="error">
82-
{containerStateError.message}
83-
</InfoBox>
84-
)}
93+
{containerStateError && (
94+
<InfoBox title="Failed to load container state" variant="error">
95+
{containerStateError.message}
96+
</InfoBox>
97+
)}
8598

86-
{!!containerState?.exit_code && (
87-
<div className="flex flex-wrap items-center gap-1">
88-
<span className="font-medium text-xs text-destructive">
89-
Exit Code:
90-
</span>
91-
<span className="text-xs text-destructive">
92-
{containerState.exit_code}
93-
</span>
94-
{containerState.exit_code === EXIT_CODE_OOM && (
95-
<span className="text-xs text-destructive">
96-
(Out of Memory)
97-
</span>
99+
{!!containerState?.exit_code && (
100+
<div className="flex flex-wrap items-center gap-1">
101+
<span className="font-medium text-xs text-destructive">
102+
Exit Code:
103+
</span>
104+
<span className="text-xs text-destructive">
105+
{containerState.exit_code}
106+
</span>
107+
{containerState.exit_code === EXIT_CODE_OOM && (
108+
<span className="text-xs text-destructive">
109+
(Out of Memory)
110+
</span>
111+
)}
112+
</div>
98113
)}
99-
</div>
100-
)}
101114

102-
{containerState?.started_at && (
103-
<div className="flex items-center gap-2">
104-
<span className="font-medium text-xs text-foreground min-w-fit">
105-
Started:
106-
</span>
107-
<span className="text-xs text-muted-foreground">
108-
{formatDate(containerState.started_at)}
109-
</span>
110-
</div>
111-
)}
115+
{containerState?.started_at && (
116+
<div className="flex items-center gap-2">
117+
<span className="font-medium text-xs text-foreground min-w-fit">
118+
Started:
119+
</span>
120+
<span className="text-xs text-muted-foreground">
121+
{formatDate(containerState.started_at)}
122+
</span>
123+
</div>
124+
)}
112125

113-
{containerState?.ended_at && containerState?.started_at && (
114-
<div className="flex items-center gap-2">
115-
<span className="font-medium text-xs text-foreground min-w-fit">
116-
Completed in:
117-
</span>
118-
<span className="text-xs text-muted-foreground">
119-
{formatDuration(
120-
containerState.started_at,
121-
containerState.ended_at,
122-
)}
123-
</span>
124-
<span className="text-xs text-muted-foreground">
125-
({formatDate(containerState.ended_at)})
126-
</span>
127-
</div>
128-
)}
126+
{containerState?.ended_at && containerState?.started_at && (
127+
<div className="flex items-center gap-2">
128+
<span className="font-medium text-xs text-foreground min-w-fit">
129+
Completed in:
130+
</span>
131+
<span className="text-xs text-muted-foreground">
132+
{formatDuration(
133+
containerState.started_at,
134+
containerState.ended_at,
135+
)}
136+
</span>
137+
<span className="text-xs text-muted-foreground">
138+
({formatDate(containerState.ended_at)})
139+
</span>
140+
</div>
141+
)}
129142

130-
{podName && (
131-
<div className="flex items-center gap-2">
132-
<span className="font-medium text-xs text-foreground min-w-fit">
133-
Pod Name:
134-
</span>
135-
<span className="text-xs text-muted-foreground">{podName}</span>
136-
</div>
137-
)}
143+
{podName && (
144+
<div className="flex items-center gap-2">
145+
<span className="font-medium text-xs text-foreground min-w-fit">
146+
Pod Name:
147+
</span>
148+
<span className="text-xs text-muted-foreground">
149+
{podName}
150+
</span>
151+
</div>
152+
)}
138153

139-
{!isLoadingContainerState &&
140-
!containerState &&
141-
!containerStateError && (
142-
<div className="text-xs text-muted-foreground">
143-
Container state not available
144-
</div>
145-
)}
154+
{!isLoadingContainerState &&
155+
!containerState &&
156+
!containerStateError && (
157+
<div className="text-xs text-muted-foreground">
158+
Container state not available
159+
</div>
160+
)}
161+
</>
162+
)}
146163
</CollapsibleContent>
147164
</Collapsible>
148165
</div>

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskConfiguration/TaskConfiguration.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
} from "@/components/ui/tooltip";
2222
import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
2323
import { type TaskNodeContextType } from "@/providers/TaskNodeProvider";
24+
import { isGraphImplementation } from "@/utils/componentSpec";
2425

2526
import { AnnotationsSection } from "../AnnotationsEditor/AnnotationsSection";
2627
import ArgumentsSection from "../ArgumentsEditor/ArgumentsSection";
@@ -54,6 +55,7 @@ const TaskConfiguration = ({ taskNode, actions }: TaskConfigurationProps) => {
5455
return null;
5556
}
5657

58+
const isSubgraph = isGraphImplementation(componentSpec.implementation);
5759
const executionId = details?.child_task_execution_ids?.[taskId];
5860

5961
return (
@@ -82,7 +84,7 @@ const TaskConfiguration = ({ taskNode, actions }: TaskConfigurationProps) => {
8284
Details
8385
</TabsTrigger>
8486

85-
{readOnly && (
87+
{readOnly && !isSubgraph && (
8688
<TabsTrigger value="logs" className="flex-1">
8789
<LogsIcon className="h-4 w-4" />
8890
Logs
@@ -152,7 +154,7 @@ const TaskConfiguration = ({ taskNode, actions }: TaskConfigurationProps) => {
152154
/>
153155
)}
154156
</TabsContent>
155-
{readOnly && (
157+
{readOnly && !isSubgraph && (
156158
<TabsContent value="logs" className="h-full">
157159
{!!executionId && (
158160
<div className="flex w-full justify-end pr-4">

‎src/components/shared/TaskDetails/Details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const TaskDetails = ({
165165
</div>
166166
)}
167167

168-
{executionId && <ExecutionDetails executionId={executionId} />}
168+
{executionId && <ExecutionDetails executionId={executionId} componentSpec={componentSpec} />}
169169

170170
{componentSpec?.metadata?.annotations?.author && (
171171
<div className="flex flex-col px-3 py-2">

0 commit comments

Comments
 (0)