diff --git a/src/app/snapshots/page.content.tsx b/src/app/snapshots/page.content.tsx index 017ca2428..355456cf6 100644 --- a/src/app/snapshots/page.content.tsx +++ b/src/app/snapshots/page.content.tsx @@ -3,6 +3,13 @@ import { SnapshotTableToolbar } from "@/components/pipeline-snapshots/list/toolb import { useSnapshotListQueryParams } from "@/components/pipeline-snapshots/list/use-queryparams"; import { PipelineSnapshotListQueryParams } from "@/types/pipeline-snapshots"; import { useGlobalSnapshotColumns } from "./columns"; +import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots"; +import { useQuery } from "@tanstack/react-query"; +import EmptySnapshots from "@/assets/illustrations/empty-snapshots.svg?react"; +import { Button } from "@zenml-io/react-component-library"; +import Plus from "@/assets/icons/plus.svg?react"; +import { Link } from "react-router-dom"; +import { routes } from "@/router/routes"; export function GlobalSnapshotsContent() { const columns = useGlobalSnapshotColumns(); @@ -13,6 +20,24 @@ export function GlobalSnapshotsContent() { sort_by: "desc:updated" }; + const { data, isPending, isError } = useQuery({ + // empty params since we want to check if there are any results regardless of the search filter. + ...pipelineSnapshotQueries.list({ named_only: true }), + throwOnError: true + }); + + if (isPending) { + return null; + } + + if (isError) { + return
Error loading snapshots
; + } + + if (data.items.length === 0) { + return ; + } + return ( <> @@ -20,3 +45,24 @@ export function GlobalSnapshotsContent() { ); } + +function EmptyState() { + return ( +
+ +

No Snapshots Available

+
+

It looks like there are no snapshots created yet.

+

Run a pipeline in a remote stack to get started.

+
+
+ +
+
+ ); +} diff --git a/src/assets/illustrations/empty-snapshots.svg b/src/assets/illustrations/empty-snapshots.svg new file mode 100644 index 000000000..07274a2ef --- /dev/null +++ b/src/assets/illustrations/empty-snapshots.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + +