Skip to content

Commit 2627638

Browse files
atzin-escandiaatzin-escandia
authored
Fix/prd 417 bugs dag visualizer (#606)
* dag visualizer & loading logs * dag visualizer & loading logs * dag visualizer & loading logs - fix linter * dag visualizer & loading logs - fix scandeep
1 parent eb4ee2b commit 2627638

File tree

4 files changed

+166
-60
lines changed

4 files changed

+166
-60
lines changed

‎src/app/runs/[id]/_Tabs/Overview/Details.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import Pipelines from "@/assets/icons/pipeline.svg?react";
33
import { CopyButton } from "@/components/CopyButton";
44
import { DisplayDate } from "@/components/DisplayDate";
55
import { ExecutionStatusIcon, getExecutionStatusTagColor } from "@/components/ExecutionStatus";
6+
import { InlineAvatar } from "@/components/InlineAvatar";
67
import { Key, Value } from "@/components/KeyValue";
7-
88
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
9+
import { routes } from "@/router/routes";
910
import {
1011
CollapsibleContent,
1112
CollapsibleHeader,
@@ -15,7 +16,7 @@ import {
1516
Tag
1617
} from "@zenml-io/react-component-library";
1718
import { useEffect, useState } from "react";
18-
import { useParams, useSearchParams, useNavigate } from "react-router-dom";
19+
import { useParams, useSearchParams, useNavigate, Link } from "react-router-dom";
1920

2021
export function Details() {
2122
const { runId } = useParams() as { runId: string };
@@ -73,18 +74,30 @@ export function Details() {
7374
</Value>
7475
<Key>Pipeline</Key>
7576
<Value>
76-
<Tag
77-
color="purple"
78-
className="inline-flex items-center gap-0.5"
79-
rounded={false}
80-
emphasis="subtle"
77+
<Link
78+
to={routes.pipelines.namespace(
79+
encodeURIComponent(data.body?.pipeline?.name as string)
80+
)}
8181
>
82-
<Pipelines className="h-4 w-4 fill-theme-text-brand" />
83-
{data.body?.pipeline?.name}
84-
<div className="rounded-sm bg-primary-50 px-1 py-0.25">
85-
{data.body?.pipeline?.body?.version}
86-
</div>
87-
</Tag>
82+
<Tag
83+
color="purple"
84+
className="inline-flex items-center gap-0.5"
85+
rounded={false}
86+
emphasis="subtle"
87+
>
88+
<Pipelines className="h-4 w-4 fill-theme-text-brand" />
89+
{data.body?.pipeline?.name}
90+
<div className="rounded-sm bg-primary-50 px-1 py-0.25">
91+
{data.body?.pipeline?.body?.version}
92+
</div>
93+
</Tag>
94+
</Link>
95+
</Value>
96+
<Key>Author</Key>
97+
<Value>
98+
<div className="inline-flex items-center gap-1">
99+
<InlineAvatar username={data.body?.user?.name || ""} />
100+
</div>
88101
</Value>
89102
<Key>Start Time</Key>
90103
<Value>

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

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import {
1616
} from "@zenml-io/react-component-library";
1717
import { Codesnippet } from "../../CodeSnippet";
1818
import { CollapsibleCard } from "../../CollapsibleCard";
19+
import { ArtifactIcon } from "@/components/ArtifactIcon";
20+
import { ArtifactVersionBody } from "@/types/artifact-versions";
21+
import { getExecutionStatusTagColor } from "@/components/ExecutionStatus";
22+
import Run from "@/assets/icons/terminal-square.svg?react";
1923

2024
type Props = {
2125
artifactVersionId: string;
@@ -30,7 +34,7 @@ export function DetailsCard({ artifactVersionId }: Props) {
3034
} = useArtifactVersion({ versionId: artifactVersionId });
3135

3236
const producerId = artifactVersion?.metadata?.producer_step_run_id;
33-
const { data: stepData, isSuccess: isStepSuccess } = useStepDetail(
37+
const { data: stepData } = useStepDetail(
3438
{
3539
stepId: producerId!
3640
},
@@ -47,28 +51,49 @@ export function DetailsCard({ artifactVersionId }: Props) {
4751
<KeyValue
4852
label="Producer Step"
4953
value={
50-
<>
51-
{isStepSuccess ? (
52-
<Tag
53-
color="grey"
54-
className="inline-flex items-center gap-0.5"
55-
rounded={false}
56-
emphasis="subtle"
57-
>
58-
<Spinner className="mr-1 h-4 w-4" />
59-
{stepData?.name}
60-
</Tag>
54+
<Tag
55+
color="grey"
56+
className="inline-flex items-center gap-0.5"
57+
rounded={false}
58+
emphasis="subtle"
59+
>
60+
{stepData?.body?.status === "running" ? (
61+
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
6162
) : (
62-
<Skeleton className="h-6 w-12" />
63+
<ArtifactIcon
64+
artifactType={artifactVersion.body?.type as ArtifactVersionBody["type"]}
65+
className="mr-1 h-4 w-4 fill-current"
66+
/>
6367
)}
64-
</>
68+
{stepData ? stepData?.name : <Skeleton className="h-5 w-5" />}
69+
</Tag>
70+
}
71+
/>
72+
)}
73+
{artifactVersion.body?.producer_pipeline_run_id && (
74+
<KeyValue
75+
label="Producer Run"
76+
value={
77+
<Tag
78+
color={getExecutionStatusTagColor(stepData?.body?.status)}
79+
className="inline-flex items-center gap-0.5"
80+
rounded={false}
81+
emphasis="subtle"
82+
>
83+
{stepData?.body?.status === "running" ? (
84+
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
85+
) : (
86+
<Run className={`mr-1 h-4 w-4 fill-current`} />
87+
)}
88+
{artifactVersion.body?.producer_pipeline_run_id}
89+
</Tag>
6590
}
6691
/>
6792
)}
6893

6994
<KeyValue label="Type" value={artifactVersion.body?.type} />
7095
<KeyValue
71-
label="Created by"
96+
label="Author"
7297
value={
7398
<div className="inline-flex items-center gap-1">
7499
<InlineAvatar username={artifactVersion.body?.user?.name || ""} />

‎src/components/steps/step-sheet/DetailsTab.tsx‎

Lines changed: 73 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import { CollapsibleCard } from "../../CollapsibleCard";
66
import { ExecutionStatusIcon, getExecutionStatusTagColor } from "../../ExecutionStatus";
77
import { useStepDetail } from "@/data/steps/step-detail-query";
88
import Pipelines from "@/assets/icons/pipeline.svg?react";
9-
import Spinner from "@/assets/icons/spinner.svg?react";
109
import { calculateTimeDifference } from "@/lib/dates";
1110
import { ErrorFallback } from "../../Error";
1211
import Github from "@/assets/icons/github.svg?react";
1312
import { CopyButton } from "@/components/CopyButton";
1413
import { transformToEllipsis } from "@/lib/strings";
1514
import { useCodeRepository } from "@/data/code-repositories/code-repositories-detail-query";
15+
import { InlineAvatar } from "@/components/InlineAvatar";
16+
import { Link } from "react-router-dom";
17+
import { routes } from "@/router/routes";
1618

1719
type Props = {
1820
stepId: string;
@@ -75,9 +77,41 @@ export function StepDetailsTab({ stepId, runId }: Props) {
7577
return (
7678
<CollapsibleCard initialOpen title="Details">
7779
<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
78-
<KeyValue label="Orchestrator url" value={orchestrator_url || "Not available"} />
79-
<KeyValue label="Orchestrator run Id" value={orchestrator_run_id || "Not available"} />
80-
<KeyValue label="Id" value={data.id} />
80+
<KeyValue
81+
label="Orchestrator url"
82+
value={
83+
orchestrator_url ? (
84+
<div className="group/copybutton flex items-center gap-0.5">
85+
{orchestrator_url}
86+
<CopyButton copyText={orchestrator_url} />
87+
</div>
88+
) : (
89+
"Not available"
90+
)
91+
}
92+
/>
93+
<KeyValue
94+
label="Orchestrator run Id"
95+
value={
96+
orchestrator_run_id ? (
97+
<div className="group/copybutton flex items-center gap-0.5">
98+
{orchestrator_run_id}
99+
<CopyButton copyText={orchestrator_run_id as string} />
100+
</div>
101+
) : (
102+
"Not available"
103+
)
104+
}
105+
/>
106+
<KeyValue
107+
label="Id"
108+
value={
109+
<div className="group/copybutton flex items-center gap-0.5">
110+
{data.id}
111+
<CopyButton copyText={data.id} />
112+
</div>
113+
}
114+
/>
81115
<KeyValue
82116
label="Status"
83117
value={
@@ -134,18 +168,24 @@ export function StepDetailsTab({ stepId, runId }: Props) {
134168
<KeyValue
135169
label="Pipeline"
136170
value={
137-
<Tag
138-
color="purple"
139-
className="inline-flex items-center gap-0.5"
140-
rounded={false}
141-
emphasis="subtle"
171+
<Link
172+
to={routes.pipelines.namespace(
173+
encodeURIComponent(pipelineRunData.body?.pipeline?.name as string)
174+
)}
142175
>
143-
<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
144-
{pipelineRunData.body?.pipeline?.name}
145-
<div className="rounded-sm bg-primary-50 px-1 py-0.25">
146-
{pipelineRunData.body?.pipeline?.body?.version}
147-
</div>
148-
</Tag>
176+
<Tag
177+
color="purple"
178+
className="inline-flex items-center gap-0.5"
179+
rounded={false}
180+
emphasis="subtle"
181+
>
182+
<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
183+
{pipelineRunData.body?.pipeline?.name}
184+
<div className="rounded-sm bg-primary-50 px-1 py-0.25">
185+
{pipelineRunData.body?.pipeline?.body?.version}
186+
</div>
187+
</Tag>
188+
</Link>
149189
}
150190
/>
151191
{pipelineRunData.body?.code_reference && repositoryMetadata && (
@@ -174,25 +214,28 @@ export function StepDetailsTab({ stepId, runId }: Props) {
174214
}
175215
/>
176216
)}
177-
<KeyValue
178-
label="Run"
179-
value={
180-
<Tag
181-
color="grey"
182-
className="inline-flex items-center gap-0.5"
183-
rounded={false}
184-
emphasis="subtle"
185-
>
186-
<Spinner className="mr-1 h-4 w-4" />
187-
{pipelineRunData.name}
188-
</Tag>
189-
}
190-
/>
191217
</>
192218
) : (
193219
<Skeleton className="h-6 w-full" />
194220
)}
195-
<KeyValue label="Cache key" value={data.metadata?.cache_key || ""} />
221+
222+
<KeyValue
223+
label="Cache key"
224+
value={
225+
<div className="group/copybutton flex items-center gap-0.5">
226+
{data.metadata?.cache_key}
227+
<CopyButton copyText={data.metadata?.cache_key as string} />
228+
</div>
229+
}
230+
/>
231+
<KeyValue
232+
label="Author"
233+
value={
234+
<div className="inline-flex items-center gap-1">
235+
<InlineAvatar username={data.body?.user?.name as string} />
236+
</div>
237+
}
238+
/>
196239
<KeyValue
197240
label="Start Time"
198241
value={

‎src/components/steps/step-sheet/LogsTab.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import { useStepLogs } from "@/data/steps/step-logs-query";
22
import { ErrorFallback } from "../../Error";
3-
import { Skeleton } from "@zenml-io/react-component-library";
43
import { CollapsibleCard } from "@/components/CollapsibleCard";
54
import { Codesnippet } from "@/components/CodeSnippet";
65
import { KeyValue } from "@/components/KeyValue";
6+
import Logs from "@/assets/icons/logs.svg?react";
7+
import { Spinner } from "@zenml-io/react-component-library";
78

89
type Props = {
910
stepId: string;
1011
stepDetail: any;
1112
};
1213

14+
const LoadingLogs = () => (
15+
<section className="flex h-[calc(100vh_-_270px)] items-center justify-center">
16+
<div className="flex flex-col items-center justify-center">
17+
<div className="relative mb-2 flex items-center justify-center">
18+
<Spinner className="h-[120px] w-[120px]" />
19+
<LogsIcon />
20+
</div>
21+
<h2 className="my-3 text-center text-display-xs font-semibold">Loading the Logs</h2>
22+
<p className="text-center text-text-lg text-theme-text-secondary">
23+
It can take up to a few minutes. <br /> Please wait while we fetch logs from the artifact
24+
store.
25+
</p>
26+
</div>
27+
</section>
28+
);
29+
1330
export function StepLogsTab({ stepId, stepDetail }: Props) {
1431
const enableLogs = stepDetail?.metadata?.config?.enable_step_logs;
1532

@@ -20,7 +37,7 @@ export function StepLogsTab({ stepId, stepDetail }: Props) {
2037
}
2138

2239
if (isPending) {
23-
return <Skeleton className="h-[500px] rounded-md lg:col-span-2" />;
40+
return <LoadingLogs />;
2441
}
2542

2643
return (
@@ -35,3 +52,11 @@ export function StepLogsTab({ stepId, stepDetail }: Props) {
3552
</CollapsibleCard>
3653
);
3754
}
55+
56+
export function LogsIcon() {
57+
return (
58+
<div className="absolute rounded-rounded bg-primary-25 p-3">
59+
<Logs className="h-7 w-7 fill-primary-400" />
60+
</div>
61+
);
62+
}

0 commit comments

Comments
 (0)