Skip to content

Commit 5045ba1

Browse files
CahllagerfeldCahllagerfeld
authored
Merge pull request #698 from zenml-io/staging
Release
2 parents 191446f + f6cc3d7 commit 5045ba1

File tree

93 files changed

+2327
-1237
lines changed

Some content is hidden

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

93 files changed

+2327
-1237
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
},
5252
"devDependencies": {
5353
"@playwright/test": "^1.48.1",
54+
"@tailwindcss/container-queries": "^0.1.1",
5455
"@tailwindcss/forms": "^0.5.7",
5556
"@tailwindcss/typography": "^0.5.10",
5657
"@types/lodash.debounce": "^4.0.9",

‎pnpm-lock.yaml‎

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

‎src/app/artifacts/Fragments.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
import { Codesnippet } from "@/components/CodeSnippet";
2-
import { InfoBox as InfoBoxPrimitive } from "@/components/Infobox";
32
import { Box } from "@zenml-io/react-component-library";
43
import { useSearchParams } from "react-router-dom";
54

6-
export function InfoBox() {
7-
return (
8-
<InfoBoxPrimitive>
9-
<div className="flex w-full flex-wrap items-center gap-x-2 gap-y-0.5 text-text-md">
10-
<p className="font-semibold">This is a ZenML Pro feature. </p>
11-
<p>
12-
Upgrade to ZenML Pro to access the Artifact Control Plane and interact with your artifacts
13-
in the Dashboard.
14-
</p>
15-
</div>
16-
</InfoBoxPrimitive>
17-
);
18-
}
19-
205
export function CommandSection() {
216
const [searchParams] = useSearchParams();
227
const artifactName = searchParams.get("artifact");

‎src/app/artifacts/page.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,56 @@
1-
import { PageHeader } from "@/components/PageHeader";
2-
import { Badge } from "@zenml-io/react-component-library";
3-
import { CommandSection, InfoBox } from "./Fragments";
4-
import { CTASection, artifactFeatures } from "@/contents/cloud-only";
51
import ACP from "@/assets/images/acp.webp";
2+
import { PageHeader } from "@/components/PageHeader";
3+
import { ProBadge } from "@/components/pro/ProBadge";
4+
import {
5+
ProButtons,
6+
ProFeatureList,
7+
ProHeadline,
8+
ProImage,
9+
ProInfoBadge,
10+
ProWrapper
11+
} from "@/components/pro/ProCta";
12+
import { CommandSection } from "./Fragments";
613

714
export default function ModelsPage() {
815
return (
916
<div>
1017
<PageHeader className="flex items-center gap-1">
1118
<h1 className="text-display-xs font-semibold">Artifacts</h1>
12-
<Badge color="purple" rounded size="sm">
13-
<span className="font-semibold text-primary-500">Pro</span>
14-
</Badge>
19+
<ProBadge />
1520
</PageHeader>
1621
<div className="layout-container space-y-5 py-5">
17-
<InfoBox />
18-
<CTASection
19-
feature="artifact"
20-
image={{ src: ACP, alt: "Screenshot of the ZenML Pro Artifact Control plane" }}
21-
features={artifactFeatures}
22-
/>
22+
<ProWrapper className="relative overflow-y-hidden">
23+
<div className="w-full max-w-none space-y-5 lg:max-w-[900px]">
24+
<ProHeadline>Advanced Artifact Management Features with ZenML Pro</ProHeadline>
25+
<ProInfoBadge />
26+
<ProFeatureList
27+
features={[
28+
{
29+
title: "Artifact Control Plane Dashboard",
30+
subtitle: "Artifact management and monitoring"
31+
},
32+
{
33+
title: "Enterprise Security",
34+
subtitle: "Social SSO, RBAC, and User Management"
35+
},
36+
{
37+
title: "Managed ZenML Server",
38+
subtitle: "On your VPC or hosted on our infrastructure"
39+
},
40+
{
41+
title: "Advanced MLOps",
42+
subtitle: "CI/CD/CT, Model Control Plane and more"
43+
}
44+
]}
45+
/>
46+
<ProButtons />
47+
</div>
48+
<ProImage
49+
className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
50+
src={ACP}
51+
alt="Screenshot of the ZenML Pro Artifact Control Plane"
52+
/>
53+
</ProWrapper>
2354
<CommandSection />
2455
</div>
2556
</div>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useParams } from "react-router-dom";
2+
import { StackComponentsDetailHeader } from "../../../components/stack-components/component-detail/Header";
3+
import { StackComponentTabs } from "@/components/stack-components/component-detail/Tabs";
4+
import { StackList } from "../../stacks/StackList";
5+
import { RunsBody } from "../../pipelines/RunsTab/RunsBody";
6+
import { RunsSelectorProvider } from "../../pipelines/RunsTab/RunsSelectorContext";
7+
8+
export default function ComponentDetailPage() {
9+
const { componentId } = useParams() as { componentId: string };
10+
11+
return (
12+
<div className="@container">
13+
<StackComponentsDetailHeader isPanel={false} componentId={componentId} />
14+
<StackComponentTabs
15+
isPanel={false}
16+
stacksTabContent={<StackList fixedQueryParams={{ component_id: componentId }} />}
17+
runsTabContent={
18+
<RunsSelectorProvider>
19+
<RunsBody fixedQueryParams={{ stack_component: componentId }} />
20+
</RunsSelectorProvider>
21+
}
22+
componentId={componentId}
23+
/>
24+
</div>
25+
);
26+
}

‎src/app/components/columns.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { CopyButton } from "@/components/CopyButton";
22
import { DisplayDate } from "@/components/DisplayDate";
33
import { InlineAvatar } from "@/components/InlineAvatar";
4+
import { ComponentSheet } from "@/components/stack-components/component-sheet";
45
import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
5-
import { ComponentFallbackDialog } from "@/components/stack-components/ComponentFallbackDialog";
66
import { snakeCaseToTitleCase } from "@/lib/strings";
77
import { sanitizeUrl } from "@/lib/url";
88
import { getUsername } from "@/lib/user";
@@ -29,18 +29,19 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
2929
/>
3030
<div>
3131
<div className="flex items-center gap-1">
32-
<ComponentFallbackDialog
33-
name={name}
34-
type={row.original.body?.type || "orchestrator"}
35-
>
32+
<ComponentSheet componentId={id}>
3633
<button>
3734
<h2 className="text-text-md font-semibold">{name}</h2>
3835
</button>
39-
</ComponentFallbackDialog>
36+
</ComponentSheet>
4037
<CopyButton copyText={name} />
4138
</div>
4239
<div className="flex items-center gap-1">
43-
<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
40+
<ComponentSheet componentId={id}>
41+
<button className="text-text-xs text-theme-text-secondary">
42+
{id.split("-")[0]}
43+
</button>
44+
</ComponentSheet>
4445
<CopyButton copyText={id} />
4546
</div>
4647
</div>
@@ -60,9 +61,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
6061
{
6162
id: "flavor",
6263
header: "Flavor",
63-
accessorFn: (row) => row.body?.flavor,
64+
accessorFn: (row) => row.body?.flavor_name,
6465
cell: ({ row }) => {
65-
const flavor = row.original.body?.flavor;
66+
const flavor = row.original.body?.flavor_name;
6667
return (
6768
<Tag
6869
rounded={false}

‎src/app/models/Fragments.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
import { Codesnippet } from "@/components/CodeSnippet";
2-
import { InfoBox as InfoBoxPrimitive } from "@/components/Infobox";
32
import { Box } from "@zenml-io/react-component-library";
43
import { useSearchParams } from "react-router-dom";
54

6-
export function InfoBox() {
7-
return (
8-
<InfoBoxPrimitive>
9-
<div className="flex w-full flex-wrap items-center gap-x-2 gap-y-0.5 text-text-md">
10-
<p className="font-semibold">This is a ZenML Pro feature. </p>
11-
<p>
12-
Upgrade to ZenML Pro to access the Model Control Plane and interact with your models in
13-
the Dashboard.
14-
</p>
15-
</div>
16-
</InfoBoxPrimitive>
17-
);
18-
}
19-
205
export function CommandSection() {
216
const [searchParams] = useSearchParams();
227
const modelName = searchParams.get("model");

‎src/app/models/page.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import { PageHeader } from "@/components/PageHeader";
2-
import { Badge } from "@zenml-io/react-component-library";
3-
import { CommandSection, InfoBox } from "./Fragments";
4-
import { CTASection, modelFeatures } from "@/contents/cloud-only";
51
import MCP from "@/assets/images/mcp.webp";
2+
import { PageHeader } from "@/components/PageHeader";
3+
import { ProBadge } from "@/components/pro/ProBadge";
4+
import {
5+
ProButtons,
6+
ProFeatureList,
7+
ProHeadline,
8+
ProImage,
9+
ProInfoBadge,
10+
ProWrapper
11+
} from "@/components/pro/ProCta";
612
import { useTourContext } from "@/components/tour/TourContext";
713
import { useEffect } from "react";
14+
import { CommandSection } from "./Fragments";
815

916
export default function ModelsPage() {
1017
const {
@@ -22,17 +29,41 @@ export default function ModelsPage() {
2229
<div>
2330
<PageHeader className="flex items-center gap-1">
2431
<h1 className="text-display-xs font-semibold">Models</h1>
25-
<Badge color="purple" rounded size="sm">
26-
<span className="font-semibold text-primary-500">Pro</span>
27-
</Badge>
32+
<ProBadge />
2833
</PageHeader>
2934
<div className="layout-container space-y-5 py-5">
30-
<InfoBox />
31-
<CTASection
32-
feature="model"
33-
image={{ src: MCP, alt: "Screenshot of the ZenML Pro Model Control plane" }}
34-
features={modelFeatures}
35-
/>
35+
<ProWrapper className="relative overflow-y-hidden">
36+
<div className="w-full max-w-none space-y-5 lg:max-w-[900px]">
37+
<ProHeadline>Access Advanced Model Management Features with ZenML Pro</ProHeadline>
38+
<ProInfoBadge />
39+
<ProFeatureList
40+
features={[
41+
{
42+
title: "Model Control Plane Dashboard",
43+
subtitle: "Centralized model management and monitoring"
44+
},
45+
{
46+
title: "Enterprise Security",
47+
subtitle: "Social SSO, RBAC, and User Management"
48+
},
49+
{
50+
title: "Managed ZenML Server",
51+
subtitle: "On your VPC or hosted on our infrastructure"
52+
},
53+
{
54+
title: "Advanced MLOps",
55+
subtitle: "CI/CD/CT, Artifact Control Plane and more"
56+
}
57+
]}
58+
/>
59+
<ProButtons />
60+
</div>
61+
<ProImage
62+
className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
63+
src={MCP}
64+
alt="Screenshot of the ZenML Pro Artifact Control Plane"
65+
/>
66+
</ProWrapper>
3667
<CommandSection />
3768
</div>
3869
</div>

‎src/app/onboarding/Setup/Items.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
122122
<Button className="w-fit" size="md" asChild>
123123
<Link className="flex" to={link}>
124124
<Plus className="h-5 w-5 shrink-0 fill-white" />
125-
Register a stack
125+
Register a remote stack
126126
</Link>
127127
</Button>
128128
</div>

‎src/app/page.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
22
import { Badge, Box, Button } from "@zenml-io/react-component-library";
33
import { Codesnippet } from "../components/CodeSnippet";
44
import External from "@/assets/icons/link-external.svg?react";
5-
import Codespaces from "@/assets/images/codespaces.gif";
65
import { OverviewHeader } from "./Header";
76
import { Link } from "react-router-dom";
87
import { routes } from "@/router/routes";
@@ -59,30 +58,25 @@ function OverviewContent() {
5958

6059
function VsCodeBox() {
6160
return (
62-
<Box className="flex flex-col-reverse items-center overflow-hidden md:max-h-[200px] md:flex-row">
63-
<div className="w-full space-y-3 px-7 py-5 xl:w-4/5">
61+
<Box className="flex flex-col items-center justify-between gap-3 overflow-hidden px-7 py-5 md:flex-row md:flex-wrap">
62+
<div className="space-y-1">
6463
<div className="flex items-center space-x-1">
6564
<Badge className="text-text-xs font-semibold" color="green">
6665
NEW
6766
</Badge>
6867
<h2 className="text-text-xl font-semibold">VS Code Quickstart with ZenML</h2>
6968
</div>
7069
<p className="text-theme-text-secondary">
71-
Get started quickly with ZenML using GitHub Codespaces!
72-
<br />
73-
You can run our quickstart guide in a pre-configured environment.
70+
Get started quickly with ZenML using GitHub Codespaces! You can run our quickstart guide
71+
in a pre-configured environment.
7472
</p>
75-
<Button size="sm" className="w-fit" emphasis="subtle" asChild>
76-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
77-
Visit our GitHub repo <External className="h-5 w-5" />
78-
</a>
79-
</Button>
8073
</div>
81-
<img
82-
className="object-contain"
83-
src={Codespaces}
84-
alt="Gif explaining how to setup codespaces"
85-
/>
74+
75+
<Button size="sm" className="w-fit" emphasis="subtle" asChild>
76+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
77+
Visit our GitHub repo <External className="h-5 w-5 shrink-0" />
78+
</a>
79+
</Button>
8680
</Box>
8781
);
8882
}

0 commit comments

Comments
 (0)