Skip to content

Commit eabe62d

Browse files
CahllagerfeldCahllagerfeld
authored
feat: small updates (#613)
1 parent 4d96e51 commit eabe62d

File tree

6 files changed

+89
-50
lines changed

6 files changed

+89
-50
lines changed

‎.github/workflows/unit-tests.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ on:
99
branches:
1010
- main
1111
- dev
12+
- future
1213
workflow_dispatch:
1314

1415
jobs:

‎src/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ export function DockerImageCollapsible({ data }: Props) {
7575
{data.dockerfile && (
7676
<>
7777
<p className="mb-2 mt-5 text-theme-text-secondary">Dockerfile</p>
78-
<Codesnippet fullWidth highlightCode wrap code={data.dockerfile} />
78+
<Codesnippet fullWidth wrap code={data.dockerfile} />
7979
</>
8080
)}
8181
{data.requirements && (
8282
<>
8383
<p className="mb-2 mt-5 text-theme-text-secondary">Requirements</p>
84-
<Codesnippet fullWidth highlightCode wrap code={data.requirements} />
84+
<Codesnippet fullWidth wrap code={data.requirements} />
8585
</>
8686
)}
8787
</CollapsibleContent>

‎src/components/MetadataCards.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function MetadataCards({ metadata }: Props) {
3636
);
3737
}
3838

39-
export function UncategorizedCard({ metadata }: Props) {
39+
export function UncategorizedCard({ metadata, title }: Props & { title?: string }) {
4040
const metaData = Object.entries(metadata || {});
4141
const regex = /^<class\s+'.*'>$/;
4242

@@ -63,7 +63,7 @@ export function UncategorizedCard({ metadata }: Props) {
6363

6464
return (
6565
<div>
66-
<CollapsibleCard initialOpen title="Uncategorized">
66+
<CollapsibleCard initialOpen title={title || "Uncategorized"}>
6767
<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
6868
{nonDicts.map(([_, value]) => (
6969
<KeyValue

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

Lines changed: 78 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
import Pipelines from "@/assets/icons/pipeline.svg?react";
12
import Spinner from "@/assets/icons/spinner.svg?react";
3+
import Run from "@/assets/icons/terminal-square.svg?react";
24
import { DisplayDate } from "@/components/DisplayDate";
35
import { ErrorFallback } from "@/components/Error";
6+
import { ExecutionStatusIcon, getExecutionStatusTagColor } from "@/components/ExecutionStatus";
47
import { InlineAvatar } from "@/components/InlineAvatar";
58
import { Key, KeyValue, Value } from "@/components/KeyValue";
69
import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
710
import { useComponentDetail } from "@/data/components/component-detail-query";
11+
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
812
import { useStepDetail } from "@/data/steps/step-detail-query";
13+
import { routes } from "@/router/routes";
914
import {
1015
Skeleton,
1116
Tag,
@@ -14,95 +19,124 @@ import {
1419
TooltipProvider,
1520
TooltipTrigger
1621
} from "@zenml-io/react-component-library";
22+
import { Link } from "react-router-dom";
1723
import { Codesnippet } from "../../CodeSnippet";
1824
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";
2325

2426
type Props = {
2527
artifactVersionId: string;
2628
};
2729

2830
export function DetailsCard({ artifactVersionId }: Props) {
29-
const {
30-
data: artifactVersion,
31-
isPending: isArtifactVersionPending,
32-
isError: isArtifactVersionError,
33-
error
34-
} = useArtifactVersion({ versionId: artifactVersionId });
31+
const artifactVersion = useArtifactVersion({ versionId: artifactVersionId });
32+
33+
const producerRunId = artifactVersion.data?.body?.producer_pipeline_run_id;
34+
35+
const pipelineRun = usePipelineRun(
36+
{
37+
runId: producerRunId as string
38+
},
39+
{ throwOnError: true, enabled: !!producerRunId }
40+
);
3541

36-
const producerId = artifactVersion?.metadata?.producer_step_run_id;
37-
const { data: stepData } = useStepDetail(
42+
const producerId = artifactVersion.data?.metadata?.producer_step_run_id;
43+
const stepDetail = useStepDetail(
3844
{
3945
stepId: producerId!
4046
},
4147
{ enabled: !!producerId }
4248
);
4349

44-
if (isArtifactVersionPending) return <Skeleton className="h-[500px] w-full" />;
45-
if (isArtifactVersionError) return <ErrorFallback err={error} />;
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!} />;
4654

4755
return (
4856
<CollapsibleCard initialOpen title="Details">
4957
<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
50-
{artifactVersion.metadata?.producer_step_run_id && (
51-
<KeyValue
52-
label="Producer Step"
53-
value={
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+
>
5466
<Tag
55-
color="grey"
67+
color="purple"
5668
className="inline-flex items-center gap-0.5"
5769
rounded={false}
5870
emphasis="subtle"
5971
>
60-
{stepData?.body?.status === "running" ? (
61-
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
62-
) : (
63-
<ArtifactIcon
64-
artifactType={artifactVersion.body?.type as ArtifactVersionBody["type"]}
65-
className="mr-1 h-4 w-4 fill-current"
66-
/>
67-
)}
68-
{stepData ? stepData?.name : <Skeleton className="h-5 w-5" />}
72+
<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
73+
{pipelineRun.data.body?.pipeline?.name}
74+
75+
<div className="rounded-sm bg-primary-50 px-1 py-0.25">
76+
{pipelineRun.data.body?.pipeline?.body?.version}
77+
</div>
6978
</Tag>
79+
</Link>
80+
}
81+
/>
82+
{artifactVersion.data.body?.producer_pipeline_run_id && pipelineRun.data.body?.status && (
83+
<KeyValue
84+
label="Producer Run"
85+
value={
86+
<Link to={routes.runs.detail(artifactVersion.data.body?.producer_pipeline_run_id)}>
87+
<Tag
88+
color={getExecutionStatusTagColor(pipelineRun.data.body?.status)}
89+
className="inline-flex items-center gap-0.5"
90+
rounded={false}
91+
emphasis="subtle"
92+
>
93+
{pipelineRun.data.body?.status === "running" ? (
94+
<Spinner className="mr-1 h-4 w-4 border-[2px]" />
95+
) : (
96+
<Run className={`mr-1 h-4 w-4 fill-current`} />
97+
)}
98+
99+
{artifactVersion.data.body?.producer_pipeline_run_id}
100+
</Tag>
101+
</Link>
70102
}
71103
/>
72104
)}
73-
{artifactVersion.body?.producer_pipeline_run_id && (
105+
{artifactVersion.data.body?.artifact.id && (
74106
<KeyValue
75-
label="Producer Run"
107+
label="Producer Step"
76108
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]" />
109+
<>
110+
{stepDetail.data ? (
111+
<Tag
112+
color={getExecutionStatusTagColor("completed")}
113+
className="inline-flex items-center gap-0.5"
114+
rounded={false}
115+
emphasis="subtle"
116+
>
117+
<ExecutionStatusIcon className="mr-1 fill-current" status={"completed"} />
118+
{stepDetail.data.name}
119+
</Tag>
85120
) : (
86-
<Run className={`mr-1 h-4 w-4 fill-current`} />
121+
<Skeleton className="h-full w-[150px]" />
87122
)}
88-
{artifactVersion.body?.producer_pipeline_run_id}
89-
</Tag>
123+
</>
90124
}
91125
/>
92126
)}
93127

94-
<KeyValue label="Type" value={artifactVersion.body?.type} />
128+
<KeyValue label="Type" value={artifactVersion.data.body?.type} />
95129
<KeyValue
96130
label="Author"
97131
value={
98132
<div className="inline-flex items-center gap-1">
99-
<InlineAvatar username={artifactVersion.body?.user?.name || ""} />
133+
<InlineAvatar username={artifactVersion.data.body?.user?.name || ""} />
100134
</div>
101135
}
102136
/>
103137
<KeyValue
104138
label="Updated"
105-
value={<DisplayDate dateString={artifactVersion.body!.updated || ""} />}
139+
value={<DisplayDate dateString={artifactVersion.data.body?.updated || ""} />}
106140
/>
107141
</dl>
108142
</CollapsibleCard>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-que
66
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
77
import { useStepDetail } from "@/data/steps/step-detail-query";
88
import { renderAnyToString } from "@/lib/strings";
9-
import { AnyDict } from "@/types/common";
9+
import { AnyDict, MetadataMap } from "@/types/common";
1010
import { BuildItemMap } from "@/types/pipeline-builds";
1111
import { Skeleton } from "@zenml-io/react-component-library";
1212
import { useParams } from "react-router-dom";
1313
import { ErrorFallback } from "../../Error";
14+
import { UncategorizedCard } from "../../MetadataCards";
1415

1516
type Props = {
1617
stepId: string;
@@ -72,6 +73,9 @@ export function StepConfigTab({ stepId }: Props) {
7273

7374
return (
7475
<div className="space-y-5">
76+
{data.metadata?.run_metadata && (
77+
<UncategorizedCard title="Metadata" metadata={data.metadata?.run_metadata as MetadataMap} />
78+
)}
7579
<KeyValueCard data={data.metadata?.config?.parameters as AnyDict} title="Parameters" />
7680
{dataImage ? <DockerImageCollapsible data={dataImage} /> : null}
7781
<CodeSnippetCard id={data.id} />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export function StepLogsTab({ stepId, stepDetail }: Props) {
4747
<KeyValue label="Enable logs" value="Disabled" />
4848
</dl>
4949
) : (
50-
<Codesnippet fullWidth wrap code={data || ""} />
50+
<Codesnippet codeClasses="whitespace-pre-line" fullWidth wrap code={data || ""} />
5151
)}
5252
</CollapsibleCard>
5353
);

0 commit comments

Comments
 (0)