Skip to content

Commit a87e8b3

Browse files
CahllagerfeldCahllagerfeld
authored
fix: loading skeletons for pipeline run response (#672)
1 parent ba2b4a6 commit a87e8b3

File tree

1 file changed

+96
-82
lines changed

1 file changed

+96
-82
lines changed

‎src/components/artifacts/artifact-node-sheet/DetailCards.tsx‎

Lines changed: 96 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -32,94 +32,16 @@ export function DetailsCard({ artifactVersionId }: Props) {
3232

3333
const producerRunId = artifactVersion.data?.body?.producer_pipeline_run_id;
3434

35-
const pipelineRun = usePipelineRun(
36-
{
37-
runId: producerRunId as string
38-
},
39-
{ throwOnError: true, enabled: !!producerRunId }
40-
);
41-
4235
const producerId = artifactVersion.data?.metadata?.producer_step_run_id;
43-
const stepDetail = useStepDetail(
44-
{
45-
stepId: producerId!
46-
},
47-
{ enabled: !!producerId }
48-
);
4936

50-
if (artifactVersion.isPending || pipelineRun.isPending)
51-
return <Skeleton className="h-[500px] w-full" />;
52-
if (artifactVersion.isError || pipelineRun.isError)
53-
return <ErrorFallback err={artifactVersion.error! || pipelineRun.error!} />;
37+
if (artifactVersion.isPending) return <Skeleton className="h-[500px] w-full" />;
38+
if (artifactVersion.isError) return <ErrorFallback err={artifactVersion.error} />;
5439

5540
return (
5641
<CollapsibleCard initialOpen title="Details">
5742
<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
58-
<KeyValue
59-
label="Pipeline"
60-
value={
61-
<Link
62-
to={routes.pipelines.namespace(
63-
encodeURIComponent(pipelineRun.data.body?.pipeline?.name as string)
64-
)}
65-
>
66-
<Tag
67-
color="purple"
68-
className="inline-flex items-center gap-0.5"
69-
rounded={false}
70-
emphasis="subtle"
71-
>
72-
<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
73-
{pipelineRun.data.body?.pipeline?.name}
74-
</Tag>
75-
</Link>
76-
}
77-
/>
78-
{artifactVersion.data.body?.producer_pipeline_run_id && pipelineRun.data.body?.status && (
79-
<KeyValue
80-
label="Producer Run"
81-
value={
82-
<Link to={routes.runs.detail(artifactVersion.data.body?.producer_pipeline_run_id)}>
83-
<Tag
84-
color={getExecutionStatusTagColor(pipelineRun.data.body?.status)}
85-
className="inline-flex items-center gap-0.5"
86-
rounded={false}
87-
emphasis="subtle"
88-
>
89-
{pipelineRun.data.body?.status === "running" ? (
90-
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
91-
) : (
92-
<Run className={`mr-1 h-4 w-4 fill-current`} />
93-
)}
94-
95-
{artifactVersion.data.body?.producer_pipeline_run_id}
96-
</Tag>
97-
</Link>
98-
}
99-
/>
100-
)}
101-
{artifactVersion.data.body?.artifact.id && (
102-
<KeyValue
103-
label="Producer Step"
104-
value={
105-
<>
106-
{stepDetail.data ? (
107-
<Tag
108-
color={getExecutionStatusTagColor("completed")}
109-
className="inline-flex items-center gap-0.5"
110-
rounded={false}
111-
emphasis="subtle"
112-
>
113-
<ExecutionStatusIcon className="mr-1 fill-current" status={"completed"} />
114-
{stepDetail.data.name}
115-
</Tag>
116-
) : (
117-
<Skeleton className="h-full w-[150px]" />
118-
)}
119-
</>
120-
}
121-
/>
122-
)}
43+
{producerRunId && <ProducerKeys producerRunId={producerRunId} />}
44+
{producerId && <ProducerStep producerStepId={producerId} />}
12345
<KeyValue
12446
label="Materializer"
12547
value={
@@ -154,6 +76,98 @@ export function DetailsCard({ artifactVersionId }: Props) {
15476
);
15577
}
15678

79+
export function ProducerStep({ producerStepId }: { producerStepId: string }) {
80+
const stepDetail = useStepDetail({
81+
stepId: producerStepId
82+
});
83+
84+
if (stepDetail.isPending)
85+
return <KeyValue label="Producer Step" value={<Skeleton className="h-5 w-full" />} />;
86+
if (stepDetail.isError) return null;
87+
return (
88+
<KeyValue
89+
label="Producer Step"
90+
value={
91+
<>
92+
{stepDetail.data ? (
93+
<Tag
94+
color={getExecutionStatusTagColor("completed")}
95+
className="inline-flex items-center gap-0.5"
96+
rounded={false}
97+
emphasis="subtle"
98+
>
99+
<ExecutionStatusIcon className="mr-1 fill-current" status={"completed"} />
100+
{stepDetail.data.name}
101+
</Tag>
102+
) : (
103+
<Skeleton className="h-full w-[150px]" />
104+
)}
105+
</>
106+
}
107+
/>
108+
);
109+
}
110+
111+
function ProducerKeys({ producerRunId }: { producerRunId: string }) {
112+
const pipelineRun = usePipelineRun({
113+
runId: producerRunId as string
114+
});
115+
116+
if (pipelineRun.isPending)
117+
return (
118+
<KeyValue
119+
label={<Skeleton className="h-5 w-full" />}
120+
value={<Skeleton className="h-5 w-full" />}
121+
/>
122+
);
123+
if (pipelineRun.isError) return null;
124+
return (
125+
<>
126+
<KeyValue
127+
label="Pipeline"
128+
value={
129+
<Link
130+
to={routes.pipelines.namespace(
131+
encodeURIComponent(pipelineRun.data.body?.pipeline?.name as string)
132+
)}
133+
>
134+
<Tag
135+
color="purple"
136+
className="inline-flex items-center gap-0.5"
137+
rounded={false}
138+
emphasis="subtle"
139+
>
140+
<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
141+
{pipelineRun.data.body?.pipeline?.name}
142+
</Tag>
143+
</Link>
144+
}
145+
/>
146+
<KeyValue
147+
label="Producer Run"
148+
value={
149+
<Link to={routes.runs.detail(producerRunId)}>
150+
<Tag
151+
color={getExecutionStatusTagColor(pipelineRun.data.body?.status)}
152+
className="inline-flex items-center gap-0.5"
153+
rounded={false}
154+
emphasis="subtle"
155+
>
156+
{pipelineRun.data.body?.status === "running" ? (
157+
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
158+
) : (
159+
<Run className={`mr-1 h-4 w-4 fill-current`} />
160+
)}
161+
162+
{producerRunId}
163+
</Tag>
164+
</Link>
165+
}
166+
/>
167+
</>
168+
);
169+
}
170+
157171
export function DataCard({ artifactVersionId }: Props) {
158172
const {
159173
data: artifactVersionData,

0 commit comments

Comments
 (0)