Skip to content

Commit e03d661

Browse files
CahllagerfeldCahllagerfeld
authored
Merge pull request #675 from zenml-io/staging
Release
2 parents d17596f + 686cf49 commit e03d661

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1390
-655
lines changed

‎.github/workflows/release.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ jobs:
6868
tar -zcf zenml-dashboard.tar.gz -C dist --transform="s#\.\/##" .
6969
sha256sum -b zenml-dashboard.tar.gz > zenml-dashboard.tar.gz.sha256
7070
71-
7271
- name: Release to GitHub
7372
uses: softprops/action-gh-release@v1
7473
with:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ jobs:
3333

3434
- name: Install project dependencies
3535
run: pnpm install --frozen-lockfile
36-
36+
3737
- name: "Run Build"
3838
run: pnpm build
3939

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
"lodash.debounce": "^4.0.8",
3939
"papaparse": "^5.4.1",
4040
"prismjs": "^1.29.0",
41-
"react": "^18.2.0",
42-
"react-dom": "^18.2.0",
41+
"react": "^18.3.1",
42+
"react-dom": "^18.3.1",
4343
"react-hook-form": "^7.51.5",
4444
"react-joyride": "^2.8.2",
4545
"react-markdown": "^9.0.1",
@@ -64,7 +64,7 @@
6464
"autoprefixer": "^10.4.19",
6565
"eslint": "^8.57.0",
6666
"eslint-plugin-react-hooks": "^4.6.2",
67-
"eslint-plugin-react-refresh": "^0.4.5",
67+
"eslint-plugin-react-refresh": "^0.4.6",
6868
"husky": "^9.0.11",
6969
"lint-staged": "^15.2.5",
7070
"openapi-typescript": "^6.7.6",

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/onboarding/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export function HeaderOnboardingBox() {
66
<div className="w-full px-7 py-5 md:w-2/3">
77
<h2 className="text-display-xs font-semibold">Welcome to ZenML</h2>
88
<p className="mt-2 text-text-lg text-theme-text-secondary">
9-
You successfully installed the ZenML dashboard. Now you can get started with your new ZenML
10-
server.
9+
You successfully installed the ZenML dashboard. Now you can get started with your new
10+
ZenML server.
1111
</p>
1212
</div>
1313
{/* <div className="flex w-full flex-1 items-center justify-center bg-primary-50 md:w-1/3"></div> */}

‎src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Trash from "@/assets/icons/trash.svg?react";
2-
import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
2+
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
33
import { AlertDialog, AlertDialogTrigger, Button } from "@zenml-io/react-component-library";
44
import { useState } from "react";
55
import { usePipelinesSelectorContext } from "./PipelineSelectorContext";
@@ -29,7 +29,12 @@ export function DeletePipelineAlert() {
2929
<DeleteAlertContent
3030
title={`Delete Pipeline${selectedPipelines.length >= 2 ? "s" : ""}`}
3131
handleDelete={handleDelete}
32-
/>
32+
>
33+
<DeleteAlertContentBody>
34+
<p>Are you sure?</p>
35+
<p>This action cannot be undone.</p>
36+
</DeleteAlertContentBody>
37+
</DeleteAlertContent>
3338
</AlertDialog>
3439
);
3540
}

‎src/app/pipelines/PipelinesTab/PipelineDropdown.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
22
import Trash from "@/assets/icons/trash.svg?react";
33
import { AlertDialogItem } from "@/components/AlertDialogDropdownItem";
4-
import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
4+
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
55
import {
66
AlertDialogTrigger,
77
DropdownMenu,
@@ -67,7 +67,12 @@ export function PipelineDropdown({ id }: Props) {
6767
triggerChildren="Delete"
6868
icon={<Trash fill="red" />}
6969
>
70-
<DeleteAlertContent title="Delete Pipeline" handleDelete={handleDelete} />
70+
<DeleteAlertContent title="Delete Pipeline" handleDelete={handleDelete}>
71+
<DeleteAlertContentBody>
72+
<p>Are you sure?</p>
73+
<p>This action cannot be undone.</p>
74+
</DeleteAlertContentBody>
75+
</DeleteAlertContent>
7176
</AlertDialogItem>
7277
</DropdownMenuContent>
7378
</DropdownMenu>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Trash from "@/assets/icons/trash.svg?react";
2-
import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
2+
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
33
import { AlertDialog, AlertDialogTrigger, Button } from "@zenml-io/react-component-library";
44
import { useState } from "react";
55
import { useRunsSelectorContext } from "./RunsSelectorContext";
@@ -29,7 +29,12 @@ export function DeleteRunAlert() {
2929
<DeleteAlertContent
3030
title={`Delete Run${selectedRuns.length >= 2 ? "s" : ""}`}
3131
handleDelete={handleDelete}
32-
/>
32+
>
33+
<DeleteAlertContentBody>
34+
<p>Are you sure?</p>
35+
<p>This action cannot be undone.</p>
36+
</DeleteAlertContentBody>
37+
</DeleteAlertContent>
3338
</AlertDialog>
3439
);
3540
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
22
import Trash from "@/assets/icons/trash.svg?react";
33
import { AlertDialogItem } from "@/components/AlertDialogDropdownItem";
4-
import { DeleteAlertContent } from "@/components/DeleteAlertDialog";
4+
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
55
import {
66
AlertDialogTrigger,
77
DropdownMenu,
@@ -68,7 +68,12 @@ export function RunDropdown({ id }: Props) {
6868
triggerChildren="Delete"
6969
icon={<Trash fill="red" />}
7070
>
71-
<DeleteAlertContent title="Delete Run" handleDelete={handleDelete} />
71+
<DeleteAlertContent title="Delete Run" handleDelete={handleDelete}>
72+
<DeleteAlertContentBody>
73+
<p>Are you sure?</p>
74+
<p>This action cannot be undone.</p>
75+
</DeleteAlertContentBody>
76+
</DeleteAlertContent>
7277
</AlertDialogItem>
7378
</DropdownMenuContent>
7479
</DropdownMenu>

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

Lines changed: 27 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,39 @@
1+
import AlertCircle from "@/assets/icons/alert-circle.svg?react";
2+
13
import { ArtifactNode } from "@/components/dag-visualizer/ArtifactNode";
4+
import { DagControls } from "@/components/dag-visualizer/Controls";
5+
import { PreviewArtifactNode } from "@/components/dag-visualizer/PreviewArtifact";
6+
import { PreviewStepNode } from "@/components/dag-visualizer/PreviewStep";
27
import { SmoothStepSmart } from "@/components/dag-visualizer/SmartEdge";
38
import { StepNode } from "@/components/dag-visualizer/StepNode";
4-
import { getLayoutedNodes } from "@/components/dag-visualizer/layout";
5-
import { usePipelineRunGraph } from "@/data/pipeline-runs/pipeline-run-graph-query";
6-
import { Spinner } from "@zenml-io/react-component-library";
7-
import { useCallback, useEffect, useLayoutEffect } from "react";
8-
import { useParams } from "react-router-dom";
9-
import ReactFlow, {
10-
NodeTypes,
11-
useEdgesState,
12-
useNodesState,
13-
useReactFlow,
14-
useStore
15-
} from "reactflow";
16-
import { DagControls } from "@/components/dag-visualizer/Controls";
9+
import { EmptyState } from "@/components/EmptyState";
10+
import { Spinner } from "@zenml-io/react-component-library/components/server";
11+
import ReactFlow, { NodeTypes } from "reactflow";
12+
import { useDag } from "./useDag";
1713

1814
const customNodes: NodeTypes = {
1915
step: StepNode,
20-
artifact: ArtifactNode
16+
artifact: ArtifactNode,
17+
previewStep: PreviewStepNode,
18+
previewArtifact: PreviewArtifactNode
2119
};
2220

2321
const customEdge = {
2422
smart: SmoothStepSmart
2523
};
2624

2725
export function DAG() {
28-
const { runId } = useParams() as { runId: string };
29-
const { data, isPending, isError } = usePipelineRunGraph({ runId });
30-
31-
const { fitView } = useReactFlow();
32-
const { width, height } = useStore((state) => ({ width: state.width, height: state.height }));
33-
34-
const [nodes, setNodes, onNodesChange] = useNodesState([]);
35-
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
36-
37-
const onDagreLayout = useCallback(() => {
38-
const layouted = getLayoutedNodes(data?.nodes, data?.edges);
39-
40-
setNodes([...layouted.nodes]);
41-
setEdges([...layouted.edges]);
26+
const { pipelineDeployment, pipelineRun, nodes, edges, onEdgesChange, onNodesChange } = useDag();
4227

43-
window.requestAnimationFrame(() => {
44-
fitView();
45-
});
46-
}, [data?.nodes, data?.edges]);
47-
48-
useEffect(() => {
49-
fitView(); // Keep an eye on performance here
50-
}, [width, height]);
51-
52-
useEffect(() => {
53-
const timeout = setTimeout(() => {
54-
fitView({ duration: 200 });
55-
}, 100);
56-
return () => {
57-
clearTimeout(timeout);
58-
};
59-
}, [data]);
60-
61-
useLayoutEffect(() => {
62-
onDagreLayout();
63-
}, [data?.nodes, data?.edges, onDagreLayout]);
64-
65-
if (isError) return null;
28+
if (pipelineRun.isError || pipelineDeployment.isError) {
29+
return (
30+
<EmptyState icon={<AlertCircle className="h-[120px] w-[120px] fill-neutral-300" />}>
31+
<p className="text-center">There was an error loading the DAG visualization.</p>
32+
</EmptyState>
33+
);
34+
}
6635

67-
if (isPending) {
36+
if (pipelineRun.isPending || pipelineDeployment.isPending) {
6837
return (
6938
<div className="flex h-full flex-col items-center justify-center">
7039
<Spinner />
@@ -91,7 +60,12 @@ export function DAG() {
9160
onEdgesChange={onEdgesChange}
9261
fitView
9362
>
94-
<DagControls runId={runId} />
63+
<DagControls
64+
refetch={() => {
65+
pipelineRun.refetch();
66+
pipelineDeployment.refetch();
67+
}}
68+
/>
9569
</ReactFlow>
9670
);
9771
}

0 commit comments

Comments
 (0)