Skip to content

Commit c5cfcdb

Browse files
CahllagerfeldCahllagerfeld
authored
Merge pull request #630 from zenml-io/future
Release
2 parents 992139a + 9ff964f commit c5cfcdb

Some content is hidden

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

64 files changed

+1357
-475
lines changed

‎legacy/src/constants/constantCommands.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const constantCommandsToCreateStack = {
3232
export const constantCommandsToCreateSecret = {
3333
title: 'Stack Cheatsheet',
3434
documentation:
35-
'https://docs.zenml.io/getting-started/deploying-zenml/manage-the-deployed-services/secret-management',
35+
'https://docs.zenml.io/getting-started/deploying-zenml/secret-management',
3636
};
3737

3838
export const constantCommandsToCreateRepository = {

‎src/app/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function OverviewHeader() {
1313
{serverSettings ? (
1414
<Avatar size="xxl" type="square">
1515
<AvatarImage
16-
alt="Logo displayed for the tenant"
16+
alt="Logo displayed for the server"
1717
src={getGradientImage(serverSettings.body?.server_name || "default", 64)}
1818
/>
1919
<AvatarFallback size="xxl">

‎src/app/artifacts/Fragments.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export function InfoBox() {
77
return (
88
<InfoBoxPrimitive>
99
<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 Cloud feature. </p>
10+
<p className="font-semibold">This is a ZenML Pro feature. </p>
1111
<p>
12-
Upgrade to ZenML Cloud to access the Artifact Control Plane and interact with your
13-
artifacts in the Dashboard.
12+
Upgrade to ZenML Pro to access the Artifact Control Plane and interact with your artifacts
13+
in the Dashboard.
1414
</p>
1515
</div>
1616
</InfoBoxPrimitive>

‎src/app/artifacts/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ export default function ModelsPage() {
1010
<PageHeader className="flex items-center gap-1">
1111
<h1 className="text-display-xs font-semibold">Artifacts</h1>
1212
<Badge color="purple" rounded size="sm">
13-
<span className="font-semibold text-primary-500">Cloud</span>
13+
<span className="font-semibold text-primary-500">Pro</span>
1414
</Badge>
1515
</PageHeader>
1616
<div className="layout-container space-y-5 py-5">
1717
<InfoBox />
1818
<CTASection
19-
image={{ src: ACP, alt: "Screenshot of the ZenML Cloud Model Control plane" }}
19+
feature="artifact"
20+
image={{ src: ACP, alt: "Screenshot of the ZenML Pro Artifact Control plane" }}
2021
features={artifactFeatures}
2122
/>
2223
<CommandSection />

‎src/app/models/Fragments.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export function InfoBox() {
77
return (
88
<InfoBoxPrimitive>
99
<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 Cloud feature. </p>
10+
<p className="font-semibold">This is a ZenML Pro feature. </p>
1111
<p>
12-
Upgrade to ZenML Cloud to access the Model Control Plane and interact with your models in
12+
Upgrade to ZenML Pro to access the Model Control Plane and interact with your models in
1313
the Dashboard.
1414
</p>
1515
</div>

‎src/app/models/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ export default function ModelsPage() {
2323
<PageHeader className="flex items-center gap-1">
2424
<h1 className="text-display-xs font-semibold">Models</h1>
2525
<Badge color="purple" rounded size="sm">
26-
<span className="font-semibold text-primary-500">Cloud</span>
26+
<span className="font-semibold text-primary-500">Pro</span>
2727
</Badge>
2828
</PageHeader>
2929
<div className="layout-container space-y-5 py-5">
3030
<InfoBox />
3131
<CTASection
32-
image={{ src: MCP, alt: "Screenshot of the ZenML Cloud Model Control plane" }}
32+
feature="model"
33+
image={{ src: MCP, alt: "Screenshot of the ZenML Pro Model Control plane" }}
3334
features={modelFeatures}
3435
/>
3536
<CommandSection />

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

Lines changed: 25 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,20 @@
1-
import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
2-
import { CloudProvider, ProviderSelect } from "./ProviderSelect";
3-
import { HelpBox } from "@/components/fallback-pages/Helpbox";
4-
import { useState } from "react";
5-
import { getOnboardingItem } from "@/lib/onboarding";
6-
import { OnboardingChecklistItemName, OnboardingState } from "@/types/onboarding";
7-
import { getServiceConnectorStep } from "./ConnectorContent";
8-
import { getArtifactStoreStep } from "./ArtifactStore";
1+
import Plus from "@/assets/icons/plus.svg?react";
92
import { Codesnippet } from "@/components/CodeSnippet";
3+
import { HelpBox } from "@/components/fallback-pages/Helpbox";
4+
import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
5+
import {} from "@/lib/onboarding";
6+
import { routes } from "@/router/routes";
7+
import { OnboardingStep } from "@/types/onboarding";
8+
import { Button } from "@zenml-io/react-component-library";
9+
import { Link } from "react-router-dom";
1010

11-
type Props = {
12-
onboardingState?: OnboardingState;
13-
active?: boolean;
14-
};
15-
16-
export function CreateServiceConnector({ onboardingState, active }: Props) {
17-
const [selectedProvider, setSelectedProvider] = useState<CloudProvider>("aws");
18-
const itemName: OnboardingChecklistItemName = "create_service_connector";
19-
const item = getOnboardingItem(onboardingState || {}, itemName);
20-
return (
21-
<ChecklistItem
22-
active={active}
23-
completed={!!item}
24-
title="Create a service connector"
25-
itemName={itemName}
26-
>
27-
<p className="mb-3">
28-
A service connector grants users of your ZenML tenant the ability to access components like
29-
your artifact store{" "}
30-
<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/remote-storage#configuring-permissions-with-your-first-service-connector" />
31-
</p>
32-
<div className="space-y-5">
33-
<div className="space-y-1">
34-
<label
35-
htmlFor="artifact-store-provider"
36-
className="text-text-sm text-theme-text-secondary"
37-
>
38-
Select your cloud provider
39-
</label>
40-
<ProviderSelect
41-
id="artifact-store-provider"
42-
value={selectedProvider}
43-
setValue={setSelectedProvider}
44-
/>
45-
</div>
46-
{getServiceConnectorStep(selectedProvider)}
47-
<div>
48-
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/remote-storage#configuring-permissions-with-your-first-service-connector" />
49-
</div>
50-
</div>
51-
</ChecklistItem>
52-
);
53-
}
54-
55-
export function CreateArtifactStore({ onboardingState, active }: Props) {
56-
const [selectedProvider, setSelectedProvider] = useState<CloudProvider>("aws");
57-
const itemName: OnboardingChecklistItemName = "create_remote_artifact_store";
58-
const item = getOnboardingItem(onboardingState || {}, itemName);
59-
60-
return (
61-
<ChecklistItem
62-
itemName={itemName}
63-
completed={!!item}
64-
title="Create an artifact store"
65-
active={active}
66-
>
67-
<p className="mb-3">
68-
Configuring a remote artifact store will version your pipeline's data directly in your cloud
69-
provider{" "}
70-
<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/remote-storage" />
71-
</p>
72-
<div className="space-y-5">
73-
<div className="space-y-1">
74-
<label
75-
htmlFor="artifact-store-provider"
76-
className="text-text-sm text-theme-text-secondary"
77-
>
78-
Select your cloud provider
79-
</label>
80-
<ProviderSelect
81-
displayOther
82-
id="artifact-store-provider"
83-
value={selectedProvider}
84-
setValue={setSelectedProvider}
85-
/>
86-
</div>
87-
{getArtifactStoreStep(selectedProvider)}
88-
<div>
89-
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/remote-storage" />
90-
</div>
91-
</div>
92-
</ChecklistItem>
93-
);
94-
}
95-
96-
export function CreateNewStack({ onboardingState, active }: Props) {
97-
const itemName: OnboardingChecklistItemName = "create_remote_stack";
98-
const item = getOnboardingItem(onboardingState || {}, itemName);
99-
11+
export function CreateNewStack({ completed, active, hasDownstreamStep }: OnboardingStep) {
12+
const link =
13+
routes.stacks.create.index + "?" + new URLSearchParams({ origin: "onboarding" }).toString();
10014
return (
10115
<ChecklistItem
102-
itemName={itemName}
103-
completed={!!item}
16+
hasDownstream={hasDownstreamStep}
17+
completed={completed}
10418
title="Create a new stack"
10519
active={active}
10620
>
@@ -109,40 +23,33 @@ export function CreateNewStack({ onboardingState, active }: Props) {
10923
<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
11024
</p>
11125
<div className="space-y-5">
112-
<div>
113-
<p className="mb-1 text-text-sm text-theme-text-secondary">
114-
Download the quickstart example to your local machine
115-
</p>
116-
<Codesnippet
117-
codeClasses="whitespace-pre-wrap"
118-
code="zenml stack register local_with_remote_storage -o default -a cloud_artifact_store"
119-
/>
26+
<div className="space-y-3">
27+
<p>Connect your Cloud to deploy your ZenML pipelines in a remote stack.</p>
28+
<Button className="w-fit" size="md" asChild>
29+
<Link className="flex" to={link}>
30+
<Plus className="h-5 w-5 shrink-0 fill-white" />
31+
Register a stack
32+
</Link>
33+
</Button>
12034
</div>
12135
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
12236
</div>
12337
</ChecklistItem>
12438
);
12539
}
12640

127-
export function RunNewPipeline({ active, onboardingState }: Props) {
128-
const itemName: OnboardingChecklistItemName = "run_remote_pipeline";
129-
const item = getOnboardingItem(onboardingState || {}, itemName);
130-
41+
export function RunNewPipeline({ active, completed, hasDownstreamStep }: OnboardingStep) {
13142
return (
13243
<ChecklistItem
133-
itemName={itemName}
134-
completed={!!item}
44+
hasDownstream={hasDownstreamStep}
45+
completed={completed}
13546
title="Run the pipeline in the new stack"
13647
active={active}
13748
>
13849
<div className="space-y-5">
13950
<div className="space-y-1">
14051
<p className="text-text-sm text-theme-text-secondary">Set the new stack</p>
141-
<Codesnippet
142-
wrap
143-
codeClasses="whitespace-pre-wrap"
144-
code="zenml stack set local_with_remote_storage"
145-
/>
52+
<Codesnippet wrap codeClasses="whitespace-pre-wrap" code="zenml stack set REMOTE_STACK" />
14653
</div>
14754
<div className="space-y-1">
14855
<p className="text-text-sm text-theme-text-secondary">Run the pipeline</p>

‎src/app/onboarding/ProductionSetup/index.tsx‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
22
import { Tick } from "@/components/Tick";
3-
import { useServerSettings } from "@/data/server/get-server-settings";
43
import { useServerInfo } from "@/data/server/info-query";
5-
import { PRODUCTION_SETUP_ITEMS } from "@/lib/constants";
6-
import { getOnboardingState, getProgress, getStarterSetupItems } from "@/lib/onboarding";
4+
import { useOnboarding } from "@/data/server/onboarding-state";
5+
import { getProductionSetup, getStarterSetup } from "@/lib/onboarding";
76
import { checkIsLocalServer } from "@/lib/server";
87
import {
98
Collapsible,
@@ -14,30 +13,26 @@ import {
1413
cn
1514
} from "@zenml-io/react-component-library";
1615
import { useState } from "react";
17-
import {
18-
CreateArtifactStore,
19-
CreateNewStack,
20-
CreateServiceConnector,
21-
RunNewPipeline
22-
} from "./Items";
16+
import { CreateNewStack, RunNewPipeline } from "./Items";
2317

2418
export function ProductionSetupChecklist() {
25-
const { isError, isPending, data } = useServerSettings({ throwOnError: true });
19+
const onboarding = useOnboarding({ refetchInterval: 5000 });
2620
const serverInfo = useServerInfo();
2721
const [open, setOpen] = useState(true);
2822

29-
if (isPending || serverInfo.isPending) return <Skeleton className="h-[200px] w-full" />;
30-
if (isError || serverInfo.isError) return null;
23+
if (onboarding.isPending || serverInfo.isPending)
24+
return <Skeleton className="h-[200px] w-full" />;
25+
if (onboarding.isError || serverInfo.isError) return null;
3126

32-
const STARTER_SETUP_ITEMS = getStarterSetupItems(
27+
const starterSetup = getStarterSetup(
28+
onboarding.data,
3329
checkIsLocalServer(serverInfo.data.deployment_type || "other")
3430
);
3531

36-
const onboardingState = getOnboardingState(data);
37-
const isStarterSetupFinished =
38-
getProgress(onboardingState, STARTER_SETUP_ITEMS) === STARTER_SETUP_ITEMS.length;
39-
const doneItems = getProgress(onboardingState, PRODUCTION_SETUP_ITEMS);
40-
const progress = (doneItems / PRODUCTION_SETUP_ITEMS.length) * 100;
32+
const { progress, totalItems, itemsDone, getItem } = getProductionSetup(onboarding.data);
33+
34+
const stackStep = getItem("stack_with_remote_orchestrator_created");
35+
const pipelineStep = getItem("pipeline_run_with_remote_orchestrator");
4136

4237
return (
4338
<>
@@ -53,7 +48,7 @@ export function ProductionSetupChecklist() {
5348
) : (
5449
<RadialProgress value={progress}>
5550
<span className="absolute text-text-xs font-semibold">
56-
{doneItems}/{PRODUCTION_SETUP_ITEMS.length}
51+
{itemsDone}/{totalItems}
5752
</span>
5853
</RadialProgress>
5954
)}
@@ -64,7 +59,7 @@ export function ProductionSetupChecklist() {
6459
<span className="text-text-md font-medium text-theme-text-secondary">(10 min)</span>
6560
</p>
6661
<p className="text-theme-text-secondary">
67-
{isStarterSetupFinished ? (
62+
{starterSetup.isFinished ? (
6863
"Level up your skills in a production setting."
6964
) : (
7065
<span className="text-primary-400">
@@ -83,23 +78,19 @@ export function ProductionSetupChecklist() {
8378
<CollapsibleContent className="border-t border-theme-border-moderate p-5">
8479
<ul className="divide-y divide-theme-border-moderate">
8580
<li className="py-5 first:pt-0 last:pb-0">
86-
<CreateServiceConnector
87-
onboardingState={onboardingState}
88-
active={isStarterSetupFinished}
81+
<CreateNewStack
82+
active={starterSetup.isFinished && stackStep.isActive}
83+
completed={stackStep.isCompleted}
84+
hasDownstreamStep={stackStep.hasDownStreamStep}
8985
/>
9086
</li>
9187
<li className="py-5 first:pt-0 last:pb-0">
92-
<CreateArtifactStore
93-
onboardingState={onboardingState}
94-
active={isStarterSetupFinished}
88+
<RunNewPipeline
89+
active={starterSetup.isFinished && pipelineStep.isActive}
90+
completed={pipelineStep.isCompleted}
91+
hasDownstreamStep={pipelineStep.hasDownStreamStep}
9592
/>
9693
</li>
97-
<li className="py-5 first:pt-0 last:pb-0">
98-
<CreateNewStack onboardingState={onboardingState} active={isStarterSetupFinished} />
99-
</li>
100-
<li className="py-5 first:pt-0 last:pb-0">
101-
<RunNewPipeline onboardingState={onboardingState} active={isStarterSetupFinished} />
102-
</li>
10394
</ul>
10495
</CollapsibleContent>
10596
</Collapsible>

0 commit comments

Comments
 (0)