8 |
13 | Log in to your account
9 |10 | Please, fill in your details to log in to your ZenML account. 11 |
12 |
17 |
22 | Staying Open Source?
18 |19 | No problem! Use this CLI command to list your models 20 |
21 |
8 |
19 | );
20 | }
21 |
22 | function Username() {
23 | const user = useCurrentUser();
24 |
25 | if (user.isError) return null;
26 | if (user.isPending) return
9 |
10 | Hi
11 |
13 |
18 |
10 | Hi
11 |
13 | 14 | Welcome to ZenML. This is the beginning to get the most advantage of all the Pro features 15 | of ZenML. 16 |
17 |
10 | "}`}
14 | />
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/pipelines/PipelinesTab/ButtonGroup.tsx:
--------------------------------------------------------------------------------
1 | import { DeletePipelineAlert } from "./DeletePipelineAlert";
2 | import { usePipelineSelectorContext } from "./PipelineSelectorContext";
3 |
4 | export function PipelinesButtonGroup() {
5 | const { selectedRowCount } = usePipelineSelectorContext();
6 | return (
7 | Set your project
11 |
8 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/pipelines/PipelinesTab/PipelineSelectorContext.tsx:
--------------------------------------------------------------------------------
1 | import { createDataTableConsumerContext } from "@/components/tables/helper";
2 | import { pipelineQueries } from "@/data/pipelines";
3 | import { useDeletePipeline } from "@/data/pipelines/delete-pipeline";
4 |
5 | import { useBulkDelete } from "@/lib/bulk-delete";
6 |
7 | export const {
8 | Context: PipelineSelectorContext,
9 | ContextProvider: PipelineSelectorContextProvider,
10 | useContext: usePipelineSelectorContext
11 | } = createDataTableConsumerContext();
12 |
13 | export function usePipelineBulkDelete() {
14 | const { setRowSelection } = usePipelineSelectorContext();
15 |
16 | const { mutateAsync } = useDeletePipeline();
17 |
18 | async function handleDelete(id: string) {
19 | await mutateAsync({ pipelineId: id });
20 | }
21 |
22 | return useBulkDelete({
23 | deleteFn: handleDelete,
24 | queryKeyToInvalidate: pipelineQueries.all,
25 | setRowSelection
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/pipelines/PipelinesTab/service.ts:
--------------------------------------------------------------------------------
1 | import { PipelineListParams } from "@/types/pipelines";
2 | import { useSearchParams } from "react-router-dom";
3 |
4 | import { z } from "zod";
5 |
6 | const DEFAULT_PAGE = 1;
7 |
8 | const filterParamsSchema = z.object({
9 | page: z.coerce.number().min(DEFAULT_PAGE).optional().default(DEFAULT_PAGE).catch(DEFAULT_PAGE),
10 | name: z.string().optional(),
11 | operator: z.enum(["and", "or"]).optional()
12 | });
13 |
14 | export function usePipelineOverviewSearchParams(): PipelineListParams {
15 | const [searchParams] = useSearchParams();
16 |
17 | const { page, name, operator } = filterParamsSchema.parse({
18 | page: searchParams.get("page") || undefined,
19 | name: searchParams.get("name") || undefined,
20 | operator: searchParams.get("operator") || undefined
21 | });
22 |
23 | return { page, name, logical_operator: operator };
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/pipelines/[namespace]/Header.tsx:
--------------------------------------------------------------------------------
1 | import Pipeline from "@/assets/icons/pipeline.svg?react";
2 | import { PageHeader } from "@/components/PageHeader";
3 | type Props = {
4 | namespace: string;
5 | };
6 |
7 | export function Header({ namespace }: Props) {
8 | return (
9 | {`${selectedRowCount} Pipeline${selectedRowCount > 1 ? "s" : ""} selected`}
9 |
11 |
14 | {decodeURIComponent(namespace)}
13 |
13 |
14 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/pipelines/[namespace]/service.ts:
--------------------------------------------------------------------------------
1 | import { PipelineRunOvervieweParams } from "@/types/pipeline-runs";
2 | import { useSearchParams } from "react-router-dom";
3 | import { z } from "zod";
4 |
5 | const DEFAULT_PAGE = 1;
6 |
7 | const filterParamsSchema = z.object({
8 | page: z.coerce.number().min(DEFAULT_PAGE).optional().default(DEFAULT_PAGE).catch(DEFAULT_PAGE),
9 | name: z.string().optional(),
10 |
11 | operator: z.enum(["and", "or"]).optional()
12 | });
13 |
14 | export function usePipelineRunParams(): PipelineRunOvervieweParams {
15 | const [searchParams] = useSearchParams();
16 |
17 | const { page, name, operator } = filterParamsSchema.parse({
18 | page: searchParams.get("page") || undefined,
19 | name: searchParams.get("name") || undefined
20 | });
21 |
22 | return { page, name, logical_operator: operator };
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/pipelines/page.tsx:
--------------------------------------------------------------------------------
1 | import { PipelineSelectorContextProvider } from "./PipelinesTab/PipelineSelectorContext";
2 | import { PipelinesBody } from "./PipelinesTab/PipelinesBody";
3 |
4 | export default function PipelinesPage() {
5 | return (
6 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/run-templates/page.tsx:
--------------------------------------------------------------------------------
1 | import { CtaSection } from "./TemplateBody";
2 |
3 | export default function TemplatesPage() {
4 | return (
5 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/runs/ButtonGroup.tsx:
--------------------------------------------------------------------------------
1 | import { DeleteRunAlert } from "./DeleteRunAlert";
2 | import { useRunsSelectorContext } from "./RunsSelectorContext";
3 |
4 | export function RunsButtonGroup() {
5 | const { selectedRowCount } = useRunsSelectorContext();
6 | return (
7 |
8 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/runs/RunsSelectorContext.tsx:
--------------------------------------------------------------------------------
1 | import { createDataTableConsumerContext } from "@/components/tables/helper";
2 | import { useDeleteRun } from "@/data/pipeline-runs/delete-run";
3 | import { useBulkDelete } from "@/lib/bulk-delete";
4 |
5 | export const {
6 | Context: RunsSelectorContext,
7 | ContextProvider: RunsSelectorContextProvider,
8 | useContext: useRunsSelectorContext
9 | } = createDataTableConsumerContext();
10 |
11 | export function useRunBulkDelete() {
12 | const { setRowSelection } = useRunsSelectorContext();
13 |
14 | const { mutateAsync } = useDeleteRun();
15 |
16 | async function handleDelete(id: string) {
17 | await mutateAsync({ runId: id });
18 | }
19 |
20 | return useBulkDelete({
21 | deleteFn: handleDelete,
22 | queryKeyToInvalidate: ["runs"],
23 | setRowSelection
24 | });
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/runs/[id]/_Tabs/Overview/index.tsx:
--------------------------------------------------------------------------------
1 | import { AlertPanels } from "./AlertPanels";
2 | import { Details } from "./Details";
3 | import { OrchestratorCollapsible } from "./Orchestrator";
4 |
5 | export function OverviewTab() {
6 | return (
7 | {`${selectedRowCount} Run${selectedRowCount > 1 ? "s" : ""} selected`}
9 |
8 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/runs/[id]/_Tabs/service.ts:
--------------------------------------------------------------------------------
1 | import { useSearchParams } from "react-router-dom";
2 | import { z } from "zod";
3 |
4 | const tabParamSchema = z.object({
5 | tab: z
6 | .enum(["overview", "configuration", "metadata", "stack"])
7 | .optional()
8 | .default("overview")
9 | .catch("overview")
10 | });
11 |
12 | export function useSelectedTab() {
13 | const [searchParams] = useSearchParams();
14 | const { tab } = tabParamSchema.parse({
15 | tab: searchParams.get("tab") || undefined
16 | });
17 |
18 | return tab;
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/runs/page.tsx:
--------------------------------------------------------------------------------
1 | import { RunsBody } from "./RunsBody";
2 | import { RunsSelectorContextProvider } from "./RunsSelectorContext";
3 |
4 | export default function RunsPage() {
5 | return (
6 |
10 |
7 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/[id]/resources/page.tsx:
--------------------------------------------------------------------------------
1 | import { useResourcesContext } from "@/layouts/connectors-detail/resources-context";
2 | import { ResourcesList } from "./resources-list";
3 | import { ConnectorVerifyBox } from "./verify-box";
4 | export default function ResourcesContent() {
5 | const { resources } = useResourcesContext();
6 | if (resources === null) {
7 | return
8 |
10 |
11 |
13 |
8 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/breadcrumbs.ts:
--------------------------------------------------------------------------------
1 | import { connectorBreadcrumb } from "@/components/breadcrumbs/library";
2 | import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
3 | import { routes } from "@/router/routes";
4 | import { useEffect } from "react";
5 |
6 | export function useCreateConnectorBreadcrumbs() {
7 | const { setBreadcrumbs } = useBreadcrumbsContext();
8 |
9 | useEffect(() => {
10 | setBreadcrumbs([
11 | ...connectorBreadcrumb,
12 | {
13 | label: "New Connector",
14 | href: routes.settings.connectors.create
15 | }
16 | ]);
17 | }, [setBreadcrumbs]);
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/configuration/debounced-check.ts:
--------------------------------------------------------------------------------
1 | import { fetchServiceConnectorList } from "@/data/service-connectors/connector-list";
2 | import AwesomeDebouncePromise from "awesome-debounce-promise";
3 |
4 | export const validateConnectorName = AwesomeDebouncePromise(async (name: string) => {
5 | try {
6 | const resData = await fetchServiceConnectorList({ name });
7 | if (resData.total > 0) {
8 | return false;
9 | }
10 | return true;
11 | } catch (error) {
12 | console.error(error);
13 | return false;
14 | }
15 | }, 500);
16 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/configuration/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const connectorConfigurationSchema = z.object({
4 | description: z.string().trim(),
5 | authMethod: z.string().trim().min(1, "Auth method is required"),
6 | resourceType: z.string().trim().min(1, "Resource type is required"),
7 | isValid: z.boolean().nullable(),
8 | skipValidation: z.boolean()
9 | });
10 |
11 | // define a zod schema for this ts type {name: string; skipValidation:boolean; [key: string]: unknown}
12 |
13 | export type ConnectorConfigForm = z.infer
9 |
19 | Verify now
20 |
21 |
22 |
11 |
18 | Please verify your service connector
12 |
13 | We'll check your connection and load available resources.
14 |
15 | This may take up to a minute.
16 |
13 |
17 | {error &&
19 | )}
20 | />
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/connector-type/description.tsx:
--------------------------------------------------------------------------------
1 | import Cloud from "@/assets/icons/cloud.svg?react";
2 |
3 | export function StepDescription() {
4 | return (
5 | {error.message?.toString()}
} 18 |
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/connector-type/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const connectorTypeSelectSchema = z.object({
4 | connectorType: z.string().trim().min(1)
5 | });
6 |
7 | export type ConnectorTypeSelectForm = z.infer
7 |
10 | Select a Service Connector Type
9 |11 | Select the type of service connector you want to create. This will allow you to integrate 12 | your cloud resources with ZenML for model deployment and management. 13 |
14 |Register a Service Connector
10 |
10 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/success/success-box.tsx:
--------------------------------------------------------------------------------
1 | import CheckCircle from "@/assets/icons/check-circle.svg?react";
2 |
3 | type Props = {
4 | connectorName: string;
5 | };
6 |
7 | export function ConnectorSuccessBox({ connectorName }: Props) {
8 | return (
9 |
12 |
13 |
20 |
21 |
14 |
16 |
17 |
19 |
10 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/success/table.tsx:
--------------------------------------------------------------------------------
1 | import { DataTable } from "@zenml-io/react-component-library/components/client";
2 | import { ServiceConnector } from "@/types/service-connectors";
3 | import { useServiceConnectorListColumns } from "./columns";
4 |
5 | type Props = {
6 | connector: ServiceConnector;
7 | };
8 | export function ConnectorSuccessTable({ connector }: Props) {
9 | const columns = useServiceConnectorListColumns();
10 | return (
11 | 12 | You successfully registered the service connector `{connectorName}` and can now create new 13 | resources 14 |
15 |
13 |
17 |
14 |
16 |
4 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/list-content.tsx:
--------------------------------------------------------------------------------
1 | import { SearchBar } from "./searchbar";
2 | import { ServiceConnectorListQueryParams } from "@/types/service-connectors";
3 | import { useConnectorListParams } from "./use-connector-params";
4 | import { ServiceConnectorList } from "./connector-list";
5 |
6 | export function ServiceConnectorListContent() {
7 | const params = useConnectorListParams();
8 |
9 | const queryParams: ServiceConnectorListQueryParams = {
10 | ...params,
11 | sort_by: "desc:updated"
12 | };
13 | return (
14 | <>
15 | Service Connectors
5 |6 | Configure and manage your service connectors.{" "} 7 | 13 | Learn More 14 | 15 |
16 |General
8 |Members
8 |
11 |
18 | Notifications
12 |13 | ZenML comes equipped with default widgets designed to enhance your experience by analyzing 14 | usage patterns, gathering your feedback, and ensuring you stay informed about our latest 15 | updates and features. 16 |
17 |
19 | {data ?
21 | Profile
11 |
12 | {user ?
16 |
17 | {user.name[0]}
18 |
19 |
20 | ) : (
21 |
24 | Repositories
8 |
11 |
14 |
8 |
22 | Secrets
9 | 10 |11 | Configure and manage your pipeline secrets and configurations.{" "} 12 | 18 | Learn More 19 | 20 |
21 |
8 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/settings/service-accounts/Fallback.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library/components/server";
2 | import { AddServiceAccountDialog } from "./AddServiceAccount";
3 |
4 | export default function ServiceAccountFallback() {
5 | return (
6 | {`${
9 | selectedRowCount
10 | } Service Account${selectedRowCount > 1 ? "s" : ""} selected`}
11 |
8 |
15 | 9 | There are no service accounts yet. 10 |
11 |12 | Create your first one now to automate your processes securely with ZenML. 13 |
14 |
8 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/settings/service-accounts/[service-account-id]/Fallback.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library/components/server";
2 | import { useParams } from "react-router-dom";
3 | import { AddApiKeyDialog } from "./AddApiKeyDialog";
4 |
5 | export default function ApiKeyFallback() {
6 | const { serviceAccountId } = useParams() as { serviceAccountId: string };
7 |
8 | return (
9 | {`${
9 | selectedRowCount
10 | } Api Key${selectedRowCount > 1 ? "s" : ""} selected`}
11 |
11 |
18 | 12 | This service account doesn't have any API Keys yet 13 |
14 |15 | Generate your first API Key to enable secure interactions with the ZenML Server. 16 |
17 |
17 | {hasResumeableStack &&
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/stacks/create/LocalOverlay.tsx:
--------------------------------------------------------------------------------
1 | export function LocalOverlay() {
2 | return (
3 |
4 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/stacks/create/breadcrumb.ts:
--------------------------------------------------------------------------------
1 | import { stacksBreadcrumb } from "@/components/breadcrumbs/library";
2 | import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
3 | import { routes } from "@/router/routes";
4 | import { useEffect } from "react";
5 |
6 | export function useStackCreateBreadcrumbs() {
7 | const { setBreadcrumbs } = useBreadcrumbsContext();
8 |
9 | useEffect(() => {
10 | setBreadcrumbs([
11 | stacksBreadcrumb,
12 | {
13 | label: "New Stack",
14 | href: routes.stacks.create.index
15 | }
16 | ]);
17 | }, [setBreadcrumbs]);
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/stacks/create/components/CancelButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@zenml-io/react-component-library/components/server";
2 | import { useNavigate } from "react-router-dom";
3 | import { clearWizardData } from "../new-infrastructure/persist";
4 | import { routes } from "@/router/routes";
5 |
6 | export function CancelButton() {
7 | const navigate = useNavigate();
8 |
9 | function cancel() {
10 | clearWizardData();
11 | navigate(routes.stacks.create.index);
12 | }
13 | return (
14 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/stacks/create/components/WizardFooter.tsx:
--------------------------------------------------------------------------------
1 | import { Footer } from "@/components/wizard/Wizard";
2 | import { PropsWithChildren } from "react";
3 | import { CancelButton } from "./CancelButton";
4 |
5 | type Props = {
6 | displayCancel?: boolean;
7 | };
8 | export function StackWizardFooter({ children, displayCancel = true }: PropsWithChildren
5 | This option is not available for local deployments
6 |
7 |
22 |
24 |
6 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/stacks/create/existing-infrastructure/steps/artifact_store/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const artifactStoreSchema = z.object({
4 | resourceId: z.string().min(1),
5 | flavor: z.string()
6 | });
7 |
8 | export type ArtifactStoreForm = z.infer
7 |
11 | Choose one of the storages for the new Artifact Store. 12 |
13 |
8 |
17 |
9 |
13 | Connect ZenML to your resources for seamless integration of cloud services into your ML 14 | pipelines. 15 |
16 |
7 |
15 |
8 |
12 | Select one of the Container Registries for your new stack 13 |
14 |
7 |
15 |
8 |
12 | Select one of the connected orchestrators for your new stack 13 |
14 |
10 |
11 |
16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/stacks/create/manual/create-component-modal/flavor-select.tsx:
--------------------------------------------------------------------------------
1 | import { SelectFlavorList } from "@/components/stack-components/create-component/flavor-select";
2 | import { snakeCaseToTitleCase } from "@/lib/strings";
3 | import { StackComponentType } from "@/types/components";
4 | import { Flavor } from "@/types/flavors";
5 | import {
6 | DialogHeader,
7 | DialogTitle,
8 | ScrollArea
9 | } from "@zenml-io/react-component-library/components/client";
10 |
11 | type Props = {
12 | type: StackComponentType;
13 | setSelectedFlavor: (flavor: Flavor) => void;
14 | };
15 | export function SelectFlavorStep({ type, setSelectedFlavor }: Props) {
16 | return (
17 | <>
18 |
12 |
15 | Register a Stack
14 |
23 |
25 |
11 |
21 | 12 | Here you can review the created stack and stack components. Now you can start running 13 | pipelines using this new configuration. 14 |
15 |
17 |
19 |
15 |
17 |
20 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/stacks/service.ts:
--------------------------------------------------------------------------------
1 | import { StackListQueryParams } from "@/types/stack";
2 | import { useSearchParams } from "react-router-dom";
3 | import { z } from "zod";
4 |
5 | const DEFAULT_PAGE = 1;
6 |
7 | const filterParamsSchema = z.object({
8 | page: z.coerce.number().min(DEFAULT_PAGE).optional().default(DEFAULT_PAGE).catch(DEFAULT_PAGE),
9 | name: z.string().optional(),
10 |
11 | operator: z.enum(["and", "or"]).optional()
12 | });
13 |
14 | export function useStacklistQueryParams(): StackListQueryParams {
15 | const [searchParams] = useSearchParams();
16 |
17 | const { page, name, operator } = filterParamsSchema.parse({
18 | page: searchParams.get("page") || undefined,
19 | name: searchParams.get("name") || undefined
20 | });
21 |
22 | return { page, name, logical_operator: operator };
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/survey/PrimaryUseStep.tsx:
--------------------------------------------------------------------------------
1 | import { PrimaryUseForm } from "@/components/survey/PrimaryUse";
2 | import { useSurveyContext } from "@/components/survey/SurveyContext";
3 | import { PrimaryUseFormType } from "@/components/survey/form-schemas";
4 | import { User, UserMetadata } from "@/types/user";
5 | import { useSurveyUserContext } from "./SurveyUserContext";
6 |
7 | type Props = {
8 | user: User;
9 | };
10 |
11 | export function PrimaryUseStep({ user }: Props) {
12 | const { setSurveyStep } = useSurveyContext();
13 | const { setUser } = useSurveyUserContext();
14 |
15 | function handlePrimaryUseSubmit({ primaryUse }: PrimaryUseFormType) {
16 | const metadata: UserMetadata = {
17 | primary_use: primaryUse
18 | };
19 | setUser((prev) => ({
20 | ...prev,
21 | user_metadata: { ...prev.user_metadata, ...metadata }
22 | }));
23 | setSurveyStep(3);
24 | }
25 |
26 | return
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/upgrade/components/Context.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, Dispatch, SetStateAction, useContext, useState } from "react";
2 |
3 | type UpgradeContextType = {
4 | submitSuccess: boolean;
5 | setSubmitSuccess: Dispatch
7 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/assets/icons/alert-circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/alert-triangle.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/assets/icons/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/cached.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/check-circle.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/check.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-left-double.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-right-double.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/close.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/cloud.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/collapse.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/dots-circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/dots-horizontal.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/icons/expand-full.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/expand.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/gitlab.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/assets/icons/info.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/minus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/refresh.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/icons/search.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/services/terraform.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/icons/side-collapse.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/side-expand.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/slash-circle.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/slash-divider.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/spinner.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/switch-horizontal.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/tick-circle.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/illustrations/connectivity.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/illustrations/connectivity.webp
--------------------------------------------------------------------------------
/src/assets/images/acp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/acp.webp
--------------------------------------------------------------------------------
/src/assets/images/mcp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/mcp.webp
--------------------------------------------------------------------------------
/src/assets/images/portraits/adam.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/portraits/adam.webp
--------------------------------------------------------------------------------
/src/assets/images/portraits/alex.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/portraits/alex.webp
--------------------------------------------------------------------------------
/src/assets/images/portraits/baris.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/portraits/baris.webp
--------------------------------------------------------------------------------
/src/assets/images/portraits/hamza.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/portraits/hamza.webp
--------------------------------------------------------------------------------
/src/assets/images/portraits/stefan.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/portraits/stefan.webp
--------------------------------------------------------------------------------
/src/assets/images/product-tour/settings_preview.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/product-tour/settings_preview.webp
--------------------------------------------------------------------------------
/src/assets/images/product-tour/tour-cover.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/product-tour/tour-cover.webp
--------------------------------------------------------------------------------
/src/assets/images/templates.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/templates.webp
--------------------------------------------------------------------------------
/src/assets/images/upgrade-form.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zenml-io/zenml-dashboard/90236a062535d2182b67f20f23cd8c8280f01921/src/assets/images/upgrade-form.webp
--------------------------------------------------------------------------------
/src/assets/styles/index.css:
--------------------------------------------------------------------------------
1 | @import "@fontsource/inter/400";
2 | @import "@fontsource/inter/500";
3 | @import "@fontsource/inter/600";
4 |
5 | @tailwind base;
6 | @tailwind components;
7 | @tailwind utilities;
8 |
9 | @layer utilities {
10 | .layout-container {
11 | @apply mx-auto w-11/12 max-w-[1440px];
12 | }
13 | .link {
14 | @apply underline transition-all duration-150 hover:decoration-transparent;
15 | }
16 | }
17 |
18 | @layer components {
19 | [type="radio"]:checked {
20 | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%237A3EF4' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3C/svg%3E");
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/CodeHighlighter.tsx:
--------------------------------------------------------------------------------
1 | import Prism from "prismjs";
2 | import "prismjs/components/prism-python";
3 | import "@/assets/styles/prism-github-light.css";
4 | import { useEffect } from "react";
5 |
6 | type Props = {
7 | code: string;
8 | };
9 |
10 | export function CodeHighlighter({ code }: Props) {
11 | useEffect(() => {
12 | Prism.highlightAll();
13 | }, []);
14 | return
8 |
9 |
11 |
12 | {code};
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/DisplayDate.tsx:
--------------------------------------------------------------------------------
1 | export function DisplayDate({
2 | dateString,
3 | short = false
4 | }: {
5 | dateString: string;
6 | short?: boolean;
7 | }) {
8 | const date = new Date(`${dateString}Z`);
9 |
10 | return <>{short ? formatShortDate(date) : date.toLocaleString()};
11 | }
12 |
13 | function formatShortDate(date: Date) {
14 | const dateOptions: Intl.DateTimeFormatOptions = {
15 | month: "short",
16 | day: "numeric",
17 | year: "numeric"
18 | };
19 | const timeOptions: Intl.DateTimeFormatOptions = {
20 | hour: "numeric",
21 | minute: "numeric",
22 | hour12: false
23 | };
24 |
25 | const formattedDate = date.toLocaleDateString("en-US", dateOptions);
26 | const formattedTime = date.toLocaleTimeString("en-US", timeOptions);
27 | return `${formattedDate} ${formattedTime}`;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren, ReactNode } from "react";
2 |
3 | type Props = {
4 | icon?: ReactNode;
5 | };
6 |
7 | export function EmptyState({ children, icon }: PropsWithChildren
22 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/InlineAvatar.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, cn } from "@zenml-io/react-component-library";
2 |
3 | type Props = {
4 | username: string;
5 | className?: string;
6 | };
7 |
8 | export function InlineAvatar({ username, className }: Props) {
9 | return (
10 | {err.message}
23 |
11 |
12 | {username[0]}
13 |
14 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/NavLink.tsx:
--------------------------------------------------------------------------------
1 | import { NavLink as NavLinkPrimitive, NavLinkProps, useLocation } from "react-router-dom";
2 |
3 | interface CustomNavLinkProps extends NavLinkProps {
4 | isActiveOverride?: (pathname: string) => boolean;
5 | }
6 |
7 | export default function NavLink({ children, isActiveOverride, ...rest }: CustomNavLinkProps) {
8 | const location = useLocation();
9 | const isActive = isActiveOverride ? isActiveOverride(location.pathname) : false;
10 |
11 | return (
12 | {username}
15 |{children}
;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@zenml-io/react-component-library";
2 | import { HTMLAttributes, PropsWithChildren } from "react";
3 |
4 | type Props = HTMLAttributes
15 | {children}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/ProviderIcon.tsx:
--------------------------------------------------------------------------------
1 | import Aws from "@/assets/icons/services/aws.svg?react";
2 | import Gcp from "@/assets/icons/services/gcp.svg?react";
3 | import Azure from "@/assets/icons/services/azure.svg?react";
4 | import { HTMLAttributes } from "react";
5 | import { cn } from "@zenml-io/react-component-library";
6 | type Props = HTMLAttributes
24 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/artifacts/ImageVisualization.tsx:
--------------------------------------------------------------------------------
1 | import { sanitizeUrl } from "@/lib/url";
2 | import { Props } from "./Visualization";
3 |
4 | export function ImageVisualization({ content }: Props) {
5 | return (
6 |
7 | ![{"Visualization]({sanitizeUrl("data:image/png;base64,")
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/artifacts/JsonVisualization.tsx:
--------------------------------------------------------------------------------
1 | import { isString } from "@/lib/type-guards";
2 | import { Codesnippet } from "../CodeSnippet";
3 | import { Props } from "./Visualization";
4 |
5 | export function JSONVisualization({ content }: Props) {
6 | const json = parseJSON(content);
7 | return (
8 | {children}
13 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/fallback-pages/Helpbox.tsx:
--------------------------------------------------------------------------------
1 | import { Box, buttonVariants } from "@zenml-io/react-component-library";
2 | import Help from "@/assets/icons/help.svg?react";
3 | import { ReactNode } from "react";
4 |
5 | type HelpBoxProps = {
6 | text?: ReactNode;
7 | link: string;
8 | };
9 | export function HelpBox({ link, text = "Do you need help?" }: HelpBoxProps) {
10 | return (
11 | {item.description}
13 |
13 |
18 |
24 | Browse our docs
25 |
26 |
14 |
16 | {text}
17 |
7 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/form/common.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | label: string;
3 | isOptional: boolean;
4 | };
5 |
6 | export function RendererHeadline({ label, isOptional }: Props) {
7 | return (
8 | <>
9 | {label}
10 | {!isOptional && (
11 |
12 | *
13 |
14 | )}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/not-available.tsx:
--------------------------------------------------------------------------------
1 | export function NotAvailable() {
2 | return
9 | {icon}
10 |
11 | Not available
;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/onboarding/SkippedStep.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@zenml-io/react-component-library";
2 | import { HTMLAttributes } from "react";
3 | import Forward from "@/assets/icons/chevron-right-double.svg?react";
4 |
5 | export function SkippedStep({ className, ...rest }: HTMLAttributes
14 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/password/UpdatePasswordSchemas.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const passwordSchema = z
4 | .string()
5 | .min(8, "Password must be at least 8 characters")
6 | .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
7 | .regex(/[a-z]/, "Password must contain at least one lowercase letter")
8 | .regex(/[0-9]/, "Password must contain at least one number")
9 | .regex(/[!@#$%^&*(),.?":{}|<>\/]/, "Password must contain at least one special character");
10 |
11 | export const updatePasswordBaseFormSchema = z.object({
12 | oldPassword: z.string().optional(),
13 | newPassword: passwordSchema,
14 | confirmPassword: z.string().min(1)
15 | });
16 |
17 | export const updatePasswordFormSchema = updatePasswordBaseFormSchema.refine(
18 | (data) => data.newPassword === data.confirmPassword,
19 | {
20 | path: ["confirmPassword"],
21 | message: "Passwords do not match"
22 | }
23 | );
24 |
25 | export type UpdatePasswordFormType = z.infer
27 | You must be logged in for this link to work.
28 |
29 | Please ensure you're signed in before accessing.
30 |
15 |
25 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/service-connectors/connector-tag.tsx:
--------------------------------------------------------------------------------
1 | import { Tag } from "@zenml-io/react-component-library/components/server";
2 | import Transform from "@/assets/icons/transform.svg?react";
3 |
4 | type Props = {
5 | connectorName: string;
6 | };
7 |
8 | export function ConnectorTag({ connectorName }: Props) {
9 | return (
10 |
21 | 
28 |
30 | {name}
29 |
20 |
27 |
29 | {name}
28 |
16 |
17 |
26 |
27 | {children}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/stack-components/ComponentBadge.tsx:
--------------------------------------------------------------------------------
1 | import { StackComponentType } from "@/types/components";
2 | import { Tag } from "@zenml-io/react-component-library";
3 | import { ComponentIcon } from "@/components/ComponentIcon";
4 | import { ReactNode } from "react";
5 |
6 | type Props = {
7 | type: StackComponentType;
8 | children?: ReactNode;
9 | };
10 | export function ComponentBadge({ type, children }: Props) {
11 | return (
12 | {children}
20 |
12 |
20 |
13 |
16 | Connect to resource
15 |17 | You can select a Service Connector to connect ZenML to external resources 18 |
19 |
7 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/steps/step-sheet/CodeTab.tsx:
--------------------------------------------------------------------------------
1 | import { Codesnippet } from "@/components/CodeSnippet";
2 | import { CollapsibleCard } from "@/components/CollapsibleCard";
3 | import { useStepDetail } from "@/data/steps/step-detail-query";
4 | import { Skeleton } from "@zenml-io/react-component-library";
5 | import { ErrorFallback } from "../../Error";
6 |
7 | type Props = {
8 | stepId: string;
9 | };
10 |
11 | export function StepCodeTab({ stepId }: Props) {
12 | const { data, isPending, isError, error } = useStepDetail({ stepId });
13 |
14 | if (isError) return
8 |
13 |
9 | 3
10 | Run the following commands
11 |
12 |
14 |
19 | 15 | Initialize the Terraform configuration. 16 |
17 |
20 |
25 | 21 | Run terraform apply to deploy the ZenML stack to Azure. 22 |
23 |-
12 | {Array.from({ length: stepAmount }, (_, i) => (
13 |
- i 20 | ? "bg-primary-300" 21 | : "bg-neutral-200" 22 | }`} 23 | > 24 | ))} 25 |
Not Found
}; 9 | } 10 | 11 | throw error; 12 | } 13 | -------------------------------------------------------------------------------- /src/error-boundaries/RootBoundary.tsx: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | import AlertCircle from "@/assets/icons/alert-circle.svg?react"; 3 | 4 | export function RootBoundary() { 5 | const error = useRouteError() as Error | undefined; 6 | 7 | return ( 8 |
9 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/hooks/use-route-segment.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from "react-router-dom";
2 |
3 | export function useRouteSegment(index = 1) {
4 | const { pathname } = useLocation();
5 | const segments = pathname.split("/").filter(Boolean);
6 | return segments[index];
7 | }
8 |
--------------------------------------------------------------------------------
/src/layouts/AuthenticatedLayout/BreadcrumbsContext.tsx:
--------------------------------------------------------------------------------
1 | import { Breadcrumbs } from "@/components/breadcrumbs/types";
2 | import { createContext, useContext, useState } from "react";
3 |
4 | type BreadcrumbContextType = {
5 | breadcrumbs: Breadcrumbs;
6 | setBreadcrumbs: (breadcrumbs: Breadcrumbs) => void;
7 | };
8 |
9 | export const BreadcrumbContext = createContextSomething went wrong!
11 |{error?.message}
12 |
7 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/layouts/RootLayout.tsx:
--------------------------------------------------------------------------------
1 | import { useServerInfo } from "@/data/server/info-query";
2 | import { routes } from "@/router/routes";
3 | import { useEffect } from "react";
4 | import { Outlet, useNavigate } from "react-router-dom";
5 |
6 | export function RootLayout() {
7 | const navigate = useNavigate();
8 | const { data } = useServerInfo({ throwOnError: true });
9 |
10 | useEffect(() => {
11 | if (data && data.active === false) {
12 | navigate(routes.activateServer + `?redirect=${routes.onboarding}`, { replace: true });
13 | }
14 | }, [data]);
15 |
16 | return (
17 |
8 |
11 |
18 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/layouts/connectors-detail/breadcrumbs.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useBreadcrumbsContext } from "../AuthenticatedLayout/BreadcrumbsContext";
3 | import { ServiceConnector } from "@/types/service-connectors";
4 | import { routes } from "@/router/routes";
5 | import { connectorBreadcrumb } from "@/components/breadcrumbs/library";
6 |
7 | export function useConnectorDetailBreadcrumbs(connector?: ServiceConnector) {
8 | const { setBreadcrumbs } = useBreadcrumbsContext();
9 |
10 | useEffect(() => {
11 | if (connector) {
12 | setBreadcrumbs([
13 | ...connectorBreadcrumb,
14 | {
15 | label: connector.name,
16 | href: routes.settings.connectors.detail.configuration(connector.id)
17 | }
18 | ]);
19 | }
20 | }, [setBreadcrumbs, connector]);
21 | }
22 |
--------------------------------------------------------------------------------
/src/layouts/connectors-detail/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library/components/server";
2 | import { Outlet } from "react-router-dom";
3 | import { ConnectorDetailHeader } from "./header";
4 | import { ResourcesContextProvider } from "./resources-context";
5 | import { ServiceConnectorTabs } from "./tabs";
6 |
7 | export default function ConnectorDetailLayout() {
8 | return (
9 |
8 |
11 |
7 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/layouts/non-project-scoped/server-members.tsx:
--------------------------------------------------------------------------------
1 | import { AvatarStack } from "@/components/avatar-stack";
2 | import { useAllMembers } from "@/data/users/users-all-query";
3 | import { Skeleton } from "@zenml-io/react-component-library/components/server";
4 |
5 | export function ServerMembers() {
6 | const membersQuery = useAllMembers({ params: { active: true } });
7 |
8 | if (membersQuery.isPending) return
10 |
12 |
7 |
10 |
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/layouts/project-tabs/name-section.tsx:
--------------------------------------------------------------------------------
1 | import { ServerMembers } from "../non-project-scoped/server-members";
2 | import { IdSection } from "./id-section";
3 | export function NameSection() {
4 | return (
5 |
8 |
10 |
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/layouts/settings/Menu.tsx:
--------------------------------------------------------------------------------
1 | import NavLink from "@/components/NavLink";
2 |
3 | type MenuItem = {
4 | name: string;
5 | href: string;
6 | isActiveOverride?: (pathname: string) => boolean;
7 | };
8 |
9 | type MenuProps = {
10 | items: MenuItem[];
11 | };
12 |
13 | export function SettingsMenu({ items }: MenuProps) {
14 | return (
15 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/layouts/settings/project-settings/project-display.tsx:
--------------------------------------------------------------------------------
1 | import Box from "@/assets/icons/container.svg?react";
2 |
3 | export function DisplayProject() {
4 | return (
5 |
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/layouts/settings/settings-layout/VersionDisplay.tsx:
--------------------------------------------------------------------------------
1 | import ZenMLIcon from "@/assets/icons/zenml-icon.svg?react";
2 | import { useServerInfo } from "@/data/server/info-query";
3 | import { Skeleton } from "@zenml-io/react-component-library";
4 |
5 | export function VersionDisplay() {
6 | const { data, isPending, isError } = useServerInfo();
7 | if (isPending) return
7 |
9 | default
10 |
12 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/lib/analytics.ts:
--------------------------------------------------------------------------------
1 | export const analyticsServerUrl = "https://analytics.zenml.io/batch";
2 |
--------------------------------------------------------------------------------
/src/lib/code-snippets.ts:
--------------------------------------------------------------------------------
1 | export function getArtifactVersionSnippet(id: string) {
2 | return `from zenml.client import Client
3 |
4 | artifact = Client().get_artifact_version("${id}")
5 | data = artifact.load()`;
6 | }
7 |
8 | export function getStepSnippet(id: string) {
9 | return `from zenml.client import Client
10 |
11 | step = Client().get_run_step("${id}")
12 | config = step.config`;
13 | }
14 |
15 | export function getRunSnippet(id: string) {
16 | return `from zenml.client import Client
17 |
18 | run = Client().get_pipeline_run("${id}")
19 | config = run.config`;
20 | }
21 |
22 | export function getSecretSnippet(id: string) {
23 | return `from zenml.client import Client
24 |
25 | secret = Client().get_secret("${id}")
26 | `;
27 | }
28 |
--------------------------------------------------------------------------------
/src/lib/common.ts:
--------------------------------------------------------------------------------
1 | export function sleep(ms: number) {
2 | return new Promise((resolve) => setTimeout(resolve, ms));
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/components.ts:
--------------------------------------------------------------------------------
1 | import { StackComponent } from "@/types/components";
2 |
3 | export function extractComponents(json?: Record
13 |
16 | Open source
15 |ZenML v{data.version}
17 |18 | UI Version {import.meta.env.VITE_FRONTEND_VERSION} 19 |
20 |