Skip to content

Commit f0a0a38

Browse files
CahllagerfeldCahllagerfeld
authored
refactor: Breaking Changes for Release (#695)
1 parent 096babf commit f0a0a38

File tree

32 files changed

+870
-788
lines changed

32 files changed

+870
-788
lines changed

‎src/app/components/[componentId]/page.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useParams } from "react-router-dom";
22
import { StackComponentsDetailHeader } from "../../../components/stack-components/component-detail/Header";
33
import { StackComponentTabs } from "@/components/stack-components/component-detail/Tabs";
44
import { StackList } from "../../stacks/StackList";
5+
import { RunsBody } from "../../pipelines/RunsTab/RunsBody";
6+
import { RunsSelectorProvider } from "../../pipelines/RunsTab/RunsSelectorContext";
57

68
export default function ComponentDetailPage() {
79
const { componentId } = useParams() as { componentId: string };
@@ -12,6 +14,11 @@ export default function ComponentDetailPage() {
1214
<StackComponentTabs
1315
isPanel={false}
1416
stacksTabContent={<StackList fixedQueryParams={{ component_id: componentId }} />}
17+
runsTabContent={
18+
<RunsSelectorProvider>
19+
<RunsBody fixedQueryParams={{ stack_component: componentId }} />
20+
</RunsSelectorProvider>
21+
}
1522
componentId={componentId}
1623
/>
1724
</div>

‎src/app/components/columns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
6161
{
6262
id: "flavor",
6363
header: "Flavor",
64-
accessorFn: (row) => row.body?.flavor,
64+
accessorFn: (row) => row.body?.flavor_name,
6565
cell: ({ row }) => {
66-
const flavor = row.original.body?.flavor;
66+
const flavor = row.original.body?.flavor_name;
6767
return (
6868
<Tag
6969
rounded={false}

‎src/app/pipelines/RunsTab/RunsBody.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
import Refresh from "@/assets/icons/refresh.svg?react";
22
import Pagination from "@/components/Pagination";
33
import { SearchField } from "@/components/SearchField";
4+
import { useAllPipelineRuns } from "@/data/pipeline-runs/all-pipeline-runs-query";
5+
import { PipelineRunOvervieweParams } from "@/types/pipeline-runs";
46
import { Button, DataTable, Skeleton } from "@zenml-io/react-component-library";
5-
import { useAllPipelineRuns } from "../../../data/pipeline-runs/all-pipeline-runs-query";
67
import { RunsButtonGroup } from "./ButtonGroup";
78
import { runsColumns } from "./columns";
89
import { useRunsSelectorContext } from "./RunsSelectorContext";
910
import { useRunsOverviewSearchParams } from "./service";
1011

11-
export function RunsBody() {
12+
type Props = {
13+
fixedQueryParams?: PipelineRunOvervieweParams;
14+
};
15+
16+
export function RunsBody({ fixedQueryParams = {} }: Props) {
1217
const { selectedRuns } = useRunsSelectorContext();
1318
const queryParams = useRunsOverviewSearchParams();
1419
const { data, refetch } = useAllPipelineRuns({
1520
params: {
1621
...queryParams,
17-
sort_by: "desc:updated"
22+
sort_by: "desc:updated",
23+
...fixedQueryParams
1824
}
1925
});
2026

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
2-
import { Skeleton } from "@zenml-io/react-component-library/components/server";
3-
import { useState } from "react";
4-
import { useParams } from "react-router-dom";
2+
import { CopyButton } from "@/components/CopyButton";
3+
import { KeyValue } from "@/components/KeyValue";
54
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
5+
import { isString } from "@/lib/type-guards";
66
import { MetadataMap } from "@/types/common";
77
import {
88
CollapsibleContent,
99
CollapsibleHeader,
1010
CollapsiblePanel,
1111
CollapsibleTrigger
1212
} from "@zenml-io/react-component-library/components/client";
13-
import { KeyValue } from "@/components/KeyValue";
14-
import { CopyButton } from "@/components/CopyButton";
13+
import { Skeleton } from "@zenml-io/react-component-library/components/server";
14+
import { useState } from "react";
15+
import { useParams } from "react-router-dom";
1516

1617
export function OrchestratorCollapsible() {
1718
const { runId } = useParams() as {
@@ -45,17 +46,17 @@ export function OrchestratorCollapsible() {
4546
<KeyValue
4647
label="Orchestrator URL"
4748
value={
48-
orchestrator_url && typeof orchestrator_url.body.value === "string" ? (
49+
orchestrator_url && isString(orchestrator_url) ? (
4950
<div className="group/copybutton flex items-center gap-0.5">
5051
<a
5152
className="truncate text-theme-text-brand underline transition-all duration-200 hover:decoration-transparent"
5253
rel="noopener noreferrer"
5354
target="_blank"
54-
href={orchestrator_url.body.value}
55+
href={orchestrator_url}
5556
>
56-
{orchestrator_url.body.value}
57+
{orchestrator_url}
5758
</a>
58-
<CopyButton copyText={orchestrator_url.body.value} />
59+
<CopyButton copyText={orchestrator_url} />
5960
</div>
6061
) : (
6162
"Not available"
@@ -65,17 +66,17 @@ export function OrchestratorCollapsible() {
6566
<KeyValue
6667
label="Orchestrator Logs"
6768
value={
68-
orchestrator_logs && typeof orchestrator_logs.body.value === "string" ? (
69+
orchestrator_logs && isString(orchestrator_logs) ? (
6970
<div className="group/copybutton flex items-center gap-0.5">
7071
<a
7172
className="truncate text-theme-text-brand underline transition-all duration-200 hover:decoration-transparent"
7273
rel="noopener noreferrer"
7374
target="_blank"
74-
href={orchestrator_logs.body.value}
75+
href={orchestrator_logs}
7576
>
76-
{orchestrator_logs.body.value}
77+
{orchestrator_logs}
7778
</a>
78-
<CopyButton copyText={orchestrator_logs.body.value} />
79+
<CopyButton copyText={orchestrator_logs} />
7980
</div>
8081
) : (
8182
"Not available"

‎src/app/runs/[id]/useDag.tsx‎

Lines changed: 14 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { addManuallyAddedArtifacts } from "@/components/dag-visualizer/add-manual-artifacts";
2-
import {
3-
extractExistingNodes,
4-
extractPlaceholderLayout,
5-
StepDict
6-
} from "@/components/dag-visualizer/extract-layout";
71
import { getLayoutedNodes } from "@/components/dag-visualizer/layout";
2+
import { mergeRealAndPlacehodlerData } from "@/components/dag-visualizer/layout/helper";
3+
import { extractPlaceholderLayout } from "@/components/dag-visualizer/layout/placeholder";
4+
import { extractExistingNodes } from "@/components/dag-visualizer/layout/real-data";
85
import { pipelineDeploymentQueries } from "@/data/pipeline-deployments";
96
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
107
import { StepOutput } from "@/types/pipeline-deployments";
8+
import { StepDict } from "@/types/steps";
119
import { useQuery } from "@tanstack/react-query";
1210
import { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
1311
import { useParams } from "react-router-dom";
14-
import { Edge, useEdgesState, useNodesState, useReactFlow, useStore } from "reactflow";
12+
import { useEdgesState, useNodesState, useReactFlow, useStore } from "reactflow";
1513

1614
export function useDag() {
1715
const { runId } = useParams() as { runId: string };
@@ -22,7 +20,7 @@ export function useDag() {
2220
}
2321
);
2422
const pipelineDeployment = useQuery({
25-
...pipelineDeploymentQueries.detail(pipelineRun.data?.body?.deployment_id!),
23+
...pipelineDeploymentQueries.detail(pipelineRun.data?.body?.deployment_id || ""),
2624
enabled: !!pipelineRun.data?.body?.deployment_id
2725
});
2826

@@ -44,31 +42,13 @@ export function useDag() {
4442

4543
const onDagreLayout = useCallback(() => {
4644
// replayed layouted with nodes from readNodes, in case the id is the same
47-
const nodes = placeholderData.nodes.map((node) => {
48-
const realNode = realNodes.find((n) => n.id === node.id);
49-
if (realNode) {
50-
return { ...node, ...realNode };
51-
}
52-
return {
53-
...node,
54-
data: { ...node.data, status: pipelineRun.data?.body?.status ?? "running" }
55-
};
56-
});
57-
58-
addManuallyAddedArtifacts(
59-
nodes,
60-
realNodes,
61-
pipelineRun.data?.metadata?.steps as StepDict,
62-
placeholderData.edges
63-
);
6445

65-
// add a custom styling to edges that have a real node as the target
66-
const edges: Edge[] = placeholderData.edges.map((edge) => {
67-
const realNode = realNodes.find((n) => n.id === edge.target);
68-
return {
69-
...edge,
70-
style: { stroke: realNode ? "#9CA3AF" : "#D1D5DB", strokeWidth: 2 }
71-
};
46+
const { nodes, edges } = mergeRealAndPlacehodlerData({
47+
placeholderEdges: placeholderData.edges,
48+
placeholderNodes: placeholderData.nodes,
49+
realEdges: realNodes.edges,
50+
realNodes: realNodes.nodes,
51+
runStatus: pipelineRun.data?.body?.status ?? "running"
7252
});
7353

7454
const layouted = getLayoutedNodes(nodes, edges);
@@ -83,7 +63,7 @@ export function useDag() {
8363

8464
useEffect(() => {
8565
fitView(); // Keep an eye on performance here
86-
}, [width, height]);
66+
}, [width, height, fitView]);
8767

8868
useEffect(() => {
8969
const timeout = setTimeout(() => {
@@ -92,7 +72,7 @@ export function useDag() {
9272
return () => {
9373
clearTimeout(timeout);
9474
};
95-
}, [pipelineDeployment.data, pipelineRun.data]);
75+
}, [pipelineDeployment.data, pipelineRun.data, fitView]);
9676

9777
useLayoutEffect(() => {
9878
onDagreLayout();

‎src/app/stacks/create/existing-infrastructure/steps/final/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function StackComponentItem({ component }: { component: StackComponent }) {
8787
<FlavorIcon
8888
width={24}
8989
height={24}
90-
flavor={component.body?.flavor || ""}
90+
flavor={component.body?.flavor_name || ""}
9191
type={component.body?.type || "orchestrator"}
9292
/>
9393
<div>

‎src/components/MetadataCards.tsx‎

Lines changed: 35 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { isObject, isString } from "@/lib/type-guards";
12
import { MetadataMap } from "@/types/common";
23
import {
34
Tooltip,
@@ -13,88 +14,60 @@ import { NestedCollapsible } from "./NestedCollapsible";
1314
type Props = { metadata: MetadataMap };
1415

1516
export function MetadataCards({ metadata }: Props) {
16-
const dictMetadata = Object.values(metadata || {}).filter((val) => val.body.type === "dict");
17+
const dictMetadata = Object.values(metadata || {}).filter((val) => isObject(val));
1718
return (
1819
<>
19-
{dictMetadata.map((metadataObj) => (
20-
<NestedCollapsible
21-
key={metadataObj.id}
22-
data={metadataObj.body.value}
23-
title={metadataObj.body.key}
24-
/>
20+
{dictMetadata.map((metadataObj, idx) => (
21+
<NestedCollapsible key={idx} data={metadataObj} title={Object.keys({ metadataObj })[0]} />
2522
))}
2623
</>
2724
);
2825
}
2926

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

34-
const nonDicts = metaData.filter(([_, value]) => {
35-
return value.body.type !== "dict";
36-
});
30+
const nonDicts = Object.entries(metadata).filter(([_, value]) => !isObject(value));
3731

3832
if (nonDicts.length === 0) return null;
3933

4034
// sort nonDicts alphabetically by index 0
4135
nonDicts.sort((a, b) => a[0].localeCompare(b[0]));
4236

43-
const convertToMBorGB = (number: number) => {
44-
if (number < 1024) {
45-
return number + " bytes";
46-
} else if (number < Math.pow(1024, 2)) {
47-
return (number / 1024).toFixed(2) + " KB";
48-
} else if (number < Math.pow(1024, 3)) {
49-
return (number / Math.pow(1024, 2)).toFixed(2) + " MB";
50-
} else {
51-
return (number / Math.pow(1024, 3)).toFixed(2) + " GB";
52-
}
53-
};
54-
5537
return (
5638
<div>
5739
<CollapsibleCard initialOpen title={title || "Uncategorized"}>
5840
<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
59-
{nonDicts.map(([_, value]) => (
60-
<KeyValue
61-
key={value.id}
62-
label={
63-
<TooltipProvider>
64-
<Tooltip>
65-
<TooltipTrigger className="cursor-default truncate">
66-
{value.body.key}
67-
</TooltipTrigger>
68-
<TooltipContent className="max-w-[480px]">{value.body.key}</TooltipContent>
69-
</Tooltip>
70-
</TooltipProvider>
71-
}
72-
value={
73-
<>
74-
{(() => {
75-
if (regex.test(value.body.value)) {
76-
return <Codesnippet className="py-1" highlightCode code={value.body.value} />;
77-
} else if (value.body.type === "StorageSize") {
78-
return <div className="py-1">{convertToMBorGB(value.body.value)}</div>;
79-
} else if (value.body.type === "Uri") {
80-
return (
81-
<a
82-
className="py-1 underline transition-all duration-200 hover:decoration-transparent"
83-
rel="noopener noreferrer"
84-
target="_blank"
85-
href={value.body.value}
86-
>
87-
{value.body.value}
88-
</a>
89-
);
90-
} else {
91-
return <div className="py-1">{value.body.value}</div>;
92-
}
93-
})()}
94-
</>
95-
}
96-
/>
97-
))}
41+
{nonDicts.map(([name, value], idx) => {
42+
return (
43+
<KeyValue
44+
key={idx}
45+
label={
46+
<TooltipProvider>
47+
<Tooltip>
48+
<TooltipTrigger className="cursor-default truncate">{name}</TooltipTrigger>
49+
<TooltipContent className="max-w-[480px]">{name}</TooltipContent>
50+
</Tooltip>
51+
</TooltipProvider>
52+
}
53+
value={
54+
<>
55+
{(() => {
56+
if (isString(value) && regex.test(value)) {
57+
return <Codesnippet className="py-1" highlightCode code={value} />;
58+
} else {
59+
return (
60+
<div className="py-1">
61+
{isString(value) ? value : JSON.stringify(value)}
62+
</div>
63+
);
64+
}
65+
})()}
66+
</>
67+
}
68+
/>
69+
);
70+
})}
9871
</dl>
9972
</CollapsibleCard>
10073
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export function DataCard({ artifactVersionId }: Props) {
177177
error: artifactVersionError
178178
} = useArtifactVersion({ versionId: artifactVersionId });
179179

180-
const artifactStoreId = artifactVersionData?.metadata?.artifact_store_id;
180+
const artifactStoreId = artifactVersionData?.body?.artifact_store_id;
181181
const { data: storeData, isSuccess: isStoreSuccess } = useQuery({
182182
...componentQueries.componentDetail(artifactStoreId!),
183183
enabled: !!artifactStoreId
@@ -201,7 +201,7 @@ export function DataCard({ artifactVersionId }: Props) {
201201
/>
202202
</Value>
203203

204-
{artifactVersionData.metadata?.artifact_store_id && (
204+
{artifactVersionData.body?.artifact_store_id && (
205205
<KeyValue
206206
label="Artifact Store"
207207
value={

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { default as Barchart, default as BarChart } from "@/assets/icons/bar-cha
33
import { EmptyState } from "@/components/EmptyState";
44
import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
55
import { FIVEMEGABYTES } from "@/lib/constants";
6+
import { isNumber } from "@/lib/type-guards";
67
import { MetadataMap } from "@/types/common";
78
import { Button, Skeleton } from "@zenml-io/react-component-library";
89
import { useState } from "react";
@@ -33,7 +34,7 @@ export function VisualizationTab({ artifactVersionId }: Props) {
3334
return <Skeleton className="h-[300px] w-full" />;
3435
}
3536

36-
const size = (data.metadata?.run_metadata as MetadataMap)?.storage_size?.body?.value;
37+
const size = (data.metadata?.run_metadata as MetadataMap)?.storage_size;
3738

3839
if (data.metadata?.visualizations && data.metadata.visualizations.length < 1) {
3940
return (
@@ -50,7 +51,7 @@ export function VisualizationTab({ artifactVersionId }: Props) {
5051

5152
return (
5253
<div>
53-
{size < FIVEMEGABYTES || confirmation ? (
54+
{(size && isNumber(size) && size < FIVEMEGABYTES) || confirmation ? (
5455
<Visualization
5556
artifactName={data.body?.artifact.name || "artifact"}
5657
artifactVersionId={artifactVersionId}

0 commit comments

Comments
 (0)