4 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/src/types/pipeline-builds.ts:
--------------------------------------------------------------------------------
1 | import { components } from "./core";
2 |
3 | export type PipelineBuildResponse = components["schemas"]["PipelineBuildResponse"];
4 | export type BuildItem = components["schemas"]["BuildItem"];
5 | export type BuildItemMap = { [key: string]: BuildItem };
6 |
--------------------------------------------------------------------------------
/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.inferCreate Snapshot
5 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/stacks/create/existing-infrastructure/steps/container_registry/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const containerRegistrySchema = z.object({
4 | flavor: z.string().min(1),
5 | resourceId: z.string().min(1)
6 | });
7 |
8 | export type ContainerRegistryFormType = z.infer
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/.github/teams.yml:
--------------------------------------------------------------------------------
1 | ---
2 | internal:
3 | - '@htahir1'
4 | - '@hamza-zenml'
5 | - '@bcdurak'
6 | - '@baris-zenml'
7 | - '@michael-zenml'
8 | - '@schustmi'
9 | - '@strickvl'
10 | - '@alex-zenml'
11 | - '@alexej-zenml'
12 | - '@AlexejPenner'
13 | - '@stefannica'
14 | - '@safoinme'
15 | - '@Cahllagerfeld'
16 |
--------------------------------------------------------------------------------
/src/app/activate-user/page.tsx:
--------------------------------------------------------------------------------
1 | import { SurveyProvider } from "@/components/survey/SurveyContext";
2 | import { ActivateWizard } from "./Wizard";
3 |
4 | export default function ActivatePage() {
5 | return (
6 |
8 |
10 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/projects/page.tsx:
--------------------------------------------------------------------------------
1 | import { ProjectList } from "./project-list";
2 | import { ProjectsSearchBar } from "./searchbar";
3 |
4 | export default function ProjectsPage() {
5 | return (
6 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/lib/name.ts:
--------------------------------------------------------------------------------
1 | import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
2 |
3 | const blockedAnimals = ["booby", "swallow"];
4 |
5 | export function generateUniqueName() {
6 | return uniqueNamesGenerator({
7 | dictionaries: [colors, animals.filter((el) => !blockedAnimals.includes(el))]
8 | });
9 | }
10 |
--------------------------------------------------------------------------------
/src/lib/server.ts:
--------------------------------------------------------------------------------
1 | import { AuthScheme, DeploymentType } from "@/types/server";
2 |
3 | export function checkIsLocalServer(deploymentType: DeploymentType) {
4 | return deploymentType === "local" || deploymentType === "docker";
5 | }
6 |
7 | export function isNoAuthServer(authScheme: AuthScheme) {
8 | return authScheme === "NO_AUTH";
9 | }
10 |
--------------------------------------------------------------------------------
/src/types/steps.ts:
--------------------------------------------------------------------------------
1 | import { components, operations } from "./core";
2 |
3 | export type Step = components["schemas"]["StepRunResponse"];
4 |
5 | export type StepDict = Record
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/types/flavors.ts:
--------------------------------------------------------------------------------
1 | import { components, operations } from "./core";
2 |
3 | export type FlavorsPage = components["schemas"]["Page_FlavorResponse_"];
4 | export type FlavorListQueryParams = NonNullable<
5 | operations["list_flavors_api_v1_flavors_get"]["parameters"]["query"]
6 | >;
7 |
8 | export type Flavor = components["schemas"]["FlavorResponse"];
9 |
--------------------------------------------------------------------------------
/src/app/settings/members/page.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library";
2 | import MembersTable from "./MembersTable";
3 |
4 | export default function MembersPage() {
5 | return (
6 | Members
8 |General
8 |
7 |
9 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/stacks/create/components/sharedSchema.ts:
--------------------------------------------------------------------------------
1 | import { validateStackName } from "@/lib/stacks";
2 | import { z } from "zod";
3 |
4 | export const stackNameSchema = z
5 | .string()
6 | .trim()
7 | .min(1, "Stack name is required")
8 | .max(255, "Stack name must be less than 255 characters")
9 | .refine((name) => validateStackName(name), "Stack name is already in use");
10 |
--------------------------------------------------------------------------------
/src/components/runs/detail-tabs/LogTab/boundary.tsx:
--------------------------------------------------------------------------------
1 | import { EmptyStateLogs } from "@/components/logs/empty-state-logs";
2 | import { FallbackProps } from "react-error-boundary";
3 |
4 | export function LogsTabBoundary({ error }: FallbackProps) {
5 | if (!(error instanceof Error)) throw error;
6 | return
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
7 |
9 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/pipeline-snapshots/create/form-schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const createPipelineSnapshotFormSchema = z.object({
4 | name: z.string().min(1, "Name is required"),
5 | pipeline: z.string().uuid("Invalid pipeline ID"),
6 | run: z.string().min(1, "Run is required")
7 | });
8 |
9 | export type CreatePipelineSnapshotFormSchema = z.inferRegister a Service Connector
10 |
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/assets/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/slash-divider.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/lib/components.ts:
--------------------------------------------------------------------------------
1 | import { StackComponent } from "@/types/components";
2 |
3 | export function extractComponents(json?: Record
7 | ![{"Visualization]({sanitizeUrl("data:image/png;base64,")
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/lib/copy.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export function useCopy() {
4 | const [copied, setCopied] = useState(false);
5 |
6 | function copyToClipboard(text: string) {
7 | if (navigator.clipboard) {
8 | navigator.clipboard.writeText(text);
9 | setCopied(true);
10 | setTimeout(() => {
11 | setCopied(false);
12 | }, 2000);
13 | }
14 | }
15 | return { copied, copyToClipboard };
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/playground/_components/outputs/empty-state.tsx:
--------------------------------------------------------------------------------
1 | import { PlaygroundEmptyState } from "../error";
2 |
3 | export function PlaygroundOutputsEmptyState() {
4 | return (
5 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/announcements/announcement-label.tsx:
--------------------------------------------------------------------------------
1 | import { Tag } from "@zenml-io/react-component-library";
2 | import { getLabelColor, getLabelDisplayName, LabelValue } from "./label-utils";
3 |
4 | export function AnnouncementLabel({ label }: { label: LabelValue }) {
5 | return (
6 | Not Found
}; 9 | } 10 | 11 | throw error; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/settings/connectors/[id]/configuration/page.tsx: -------------------------------------------------------------------------------- 1 | import { BasicParams } from "./params"; 2 | import { ConfigurationPanel } from "./configuration"; 3 | 4 | export default function ConnectorConfigPage() { 5 | return ( 6 |
7 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/snapshots/[snapshotId]/runs/page.tsx:
--------------------------------------------------------------------------------
1 | import { RunsSelectorContextProvider } from "@/app/runs/RunsSelectorContext";
2 | import { SnapshotDetailRunsContent } from "./page.content";
3 |
4 | export default function SnapshotDetailRunsPage() {
5 | return (
6 |
8 |
10 |
11 |
13 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/layouts/project-tabs/header.tsx:
--------------------------------------------------------------------------------
1 | import { NameSection } from "./name-section";
2 | import { ProjectTabs } from "./tabs";
3 | export function ProjectHeader() {
4 | return (
5 |
7 |
10 |
7 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/types/pipelines.ts:
--------------------------------------------------------------------------------
1 | import { components, operations } from "./core";
2 |
3 | export type Pipeline = components["schemas"]["PipelineResponse"];
4 | export type PipelineBody = components["schemas"]["PipelineResponseBody"];
5 | export type PipelineList = components["schemas"]["Page_PipelineResponse_"];
6 |
7 | export type PipelineListParams = NonNullable<
8 | operations["list_pipelines_api_v1_pipelines_get"]["parameters"]["query"]
9 | >;
10 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/runs/page.tsx:
--------------------------------------------------------------------------------
1 | import { RunsSelectorContextProvider } from "@/app/runs/RunsSelectorContext";
2 | import { DeploymentRunsContent } from "./page.content";
3 |
4 | export default function DeploymentRunsPage() {
5 | return (
6 |
9 | {icon}
10 |
11 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/snapshots/page.tsx:
--------------------------------------------------------------------------------
1 | import { SnapshotSelectorContextProvider } from "@/components/pipeline-snapshots/selector-context";
2 | import { GlobalSnapshotsContent } from "./page.content";
3 |
4 | export default function GlobalSnapshotsPage() {
5 | return (
6 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/layouts/non-project-scoped/header.tsx:
--------------------------------------------------------------------------------
1 | import { NameSection } from "./name-section";
2 | import { NonProjectTabs } from "./tabs";
3 |
4 | export function Header() {
5 | return (
6 |
8 |
11 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/upgrade/page.tsx:
--------------------------------------------------------------------------------
1 | import { UpgradeProvider } from "./components/Context";
2 | import { UpgradeWrapperBox } from "./components/form/Wrapper";
3 |
4 | export default function UpgradePage() {
5 | return (
6 |
7 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/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 |
9 |
11 |
12 |
7 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | .env*
27 | !.env.example
28 |
29 | pnpm-lock.yaml
30 | yarn.lock
31 |
32 | scripts/types.js
33 |
--------------------------------------------------------------------------------
/src/app/components/[componentId]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { StackComponentsDetailHeader } from "@/components/stack-components/component-detail/Header";
2 | import { Outlet, useParams } from "react-router-dom";
3 |
4 | export default function ComponentLayout() {
5 | const { componentId } = useParams() as { componentId: string };
6 | return (
7 |
10 |
12 |
8 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/playground/_components/outputs/footer.tsx:
--------------------------------------------------------------------------------
1 | import { DeleteOutputRun } from "./delete-alert";
2 |
3 | type Props = {
4 | clearOutputs: () => void;
5 | runId?: string;
6 | };
7 |
8 | export function PlaygroundOutputsFooter({ clearOutputs, runId }: Props) {
9 | return (
10 |
11 | {runId &&
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/snapshots/[snapshotId]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet, useParams } from "react-router-dom";
2 | import { SnapshotDetailHeader } from "./_layout/header";
3 |
4 | export default function SnapshotDetailLayout() {
5 | const { snapshotId } = useParams() as { snapshotId: string };
6 | return (
7 |
8 |
10 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/playground/_components/loader.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from "@zenml-io/react-component-library";
2 |
3 | type Props = {
4 | subtitle?: string;
5 | };
6 |
7 | export function PlaygroundLoader({ subtitle }: Props) {
8 | return (
9 |
10 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/pipelines/[pipelineId]/deployments/page.tsx:
--------------------------------------------------------------------------------
1 | import { DeploymentSelectorContextProvider } from "@/components/deployments/selector-context";
2 | import { PipelineDeploymentsContent } from "./page.content";
3 |
4 | export default function PipelineDetailDeploymentsPage() {
5 | return (
6 | {subtitle}
} 12 |
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/settings/mcp/types.ts:
--------------------------------------------------------------------------------
1 | export interface InstallationMethod {
2 | title: string;
3 | type: "automatic" | "docker" | "uv" | "mcpb" | "cli";
4 | hasDeepLink?: boolean;
5 | deepLinkUrl?: string;
6 | config?: string;
7 | bashCommand?: string;
8 | description?: string;
9 | steps: string[];
10 | note?: string;
11 | }
12 |
13 | export interface IDEConfig {
14 | name: string;
15 | value: string;
16 | methods: InstallationMethod[];
17 | troubleshooting?: string;
18 | }
19 |
--------------------------------------------------------------------------------
/src/assets/icons/long-arrow-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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
7 |
10 |
10 | "}`}
14 | />
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/stacks/create/LocalOverlay.tsx:
--------------------------------------------------------------------------------
1 | export function LocalOverlay() {
2 | return (
3 | Set your project
11 |
4 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/Tick.tsx:
--------------------------------------------------------------------------------
1 | import { ProgressTick, cn } from "@zenml-io/react-component-library";
2 | import Check from "@/assets/icons/check.svg?react";
3 | import { ComponentPropsWithoutRef } from "react";
4 |
5 | type Props = ComponentPropsWithoutRef
5 | This option is not available for local deployments
6 |
7 |
10 |
11 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/types/deployments.ts:
--------------------------------------------------------------------------------
1 | // List
2 |
3 | import { operations, components } from "./core";
4 |
5 | export type DeploymentsList = components["schemas"]["Page_DeploymentResponse_"];
6 | export type DeploymentsListQueryParams = NonNullable<
7 | operations["list_deployments_api_v1_deployments_get"]["parameters"]["query"]
8 | >;
9 |
10 | // Detail
11 |
12 | export type Deployment = components["schemas"]["DeploymentResponse"];
13 |
14 | // Common
15 | export type DeploymentStatus = components["schemas"]["DeploymentStatus"];
16 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet, useParams } from "react-router-dom";
2 | import { DeploymentDetailHeader } from "./_layout/header";
3 |
4 | export default function DeploymentDetailLayout() {
5 | const { deploymentId } = useParams() as { deploymentId: string };
6 | return (
7 |
8 |
10 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/runs/[id]/pipeline-viz/timeline/hooks/use-timelie-item.ts:
--------------------------------------------------------------------------------
1 | import { useSheetContext } from "@/components/dag-visualizer/sheet-context";
2 |
3 | export function useTimelineItem(stepId: string | undefined) {
4 | const { openStepSheet, sheetState } = useSheetContext();
5 |
6 | const isSelected = sheetState.lastContent?.id === stepId && sheetState.isOpen;
7 |
8 | function handleClick() {
9 | if (!stepId) return;
10 | openStepSheet(stepId);
11 | }
12 |
13 | return {
14 | isSelected,
15 | handleClick
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/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/app/stacks/DialogItems.tsx:
--------------------------------------------------------------------------------
1 | import { UpdateStackDialogContent } from "@/components/stacks/update-stack-dialog";
2 | import { Dialog } from "@zenml-io/react-component-library";
3 |
4 | type Props = {
5 | open: boolean;
6 | setOpen: (open: boolean) => void;
7 | name: string;
8 | };
9 |
10 | export function UpdateStackDialog({ name, open, setOpen }: Props) {
11 | return (
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/fallback-pages/Commands.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Codesnippet } from "../CodeSnippet";
3 |
4 | export type CommandListItem = {
5 | command: string;
6 | description: ReactNode;
7 | };
8 |
9 | export function generateCommandList(item: CommandListItem) {
10 | return (
11 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/types/server.ts:
--------------------------------------------------------------------------------
1 | import { components } from "./core";
2 |
3 | export type ServerInfo = components["schemas"]["ServerModel"];
4 | export type DeploymentType = components["schemas"]["ServerDeploymentType"];
5 | export type AuthScheme = components["schemas"]["AuthScheme"];
6 |
7 | export type ServerSettings = components["schemas"]["ServerSettingsResponse"];
8 | export type ServerSettigsUpdate = components["schemas"]["ServerSettingsUpdate"];
9 |
10 | export type ServerActivationPayload = components["schemas"]["ServerActivationRequest"];
11 |
--------------------------------------------------------------------------------
/src/assets/icons/dots-horizontal.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/components/runs/run-index-prefix.tsx:
--------------------------------------------------------------------------------
1 | import { formatRunIndex } from "./runs";
2 |
3 | type Props = {
4 | index?: number | null;
5 | };
6 |
7 | /**
8 | * Displays a run index with leading zeros (4 digits).
9 | * e.g., 1 => #0001-, 42 => #0042-, 1234 => #1234-
10 | *
11 | * Only renders if index is provided and is a valid number.
12 | */
13 | export function RunIndexPrefix({ index }: Props) {
14 | if (index == null) return null;
15 |
16 | return #{formatRunIndex(index)}-;
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/runs/[id]/pipeline-viz/timeline/services/timeline-empty-state-message.ts:
--------------------------------------------------------------------------------
1 | import { TimelineItem } from "@/lib/timeline/types";
2 |
3 | export function getEmptyStateMessage(timelineItems: TimelineItem[], search: string) {
4 | if (timelineItems.length === 0) {
5 | return {
6 | title: "No steps available",
7 | description: "This pipeline run doesn't contain any steps to display."
8 | };
9 | }
10 |
11 | return {
12 | title: "No steps found",
13 | description: `No steps found that match the search "${search}".`
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/settings/service-accounts/form-schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const serviceAccountFormSchema = z.object({
4 | name: z.string().min(1, "Service Account Name is required"),
5 | description: z.string()
6 | });
7 |
8 | export type ServiceAccountFormType = z.infer{item.description}
13 |
8 |
11 |
8 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/runs/detail-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", "logs", "code"])
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/lib/not-found-error.ts:
--------------------------------------------------------------------------------
1 | const NotFoundErrorCode = "NotFoundError";
2 |
3 | type NotFoundError = Error & { cause: typeof NotFoundErrorCode };
4 |
5 | export function notFound(): never {
6 | const error = new Error(NotFoundErrorCode);
7 | (error as NotFoundError).cause = NotFoundErrorCode;
8 | throw error;
9 | }
10 |
11 | export function isNotFoundError(error: unknown): error is NotFoundError {
12 | if (typeof error !== "object" || error === null || !("cause" in error)) {
13 | return false;
14 | }
15 | return error.cause === NotFoundErrorCode;
16 | }
17 |
--------------------------------------------------------------------------------
/src/types/secret.ts:
--------------------------------------------------------------------------------
1 | import { components, operations } from "./core";
2 |
3 | export type SecretNamespace = components["schemas"]["SecretResponse"];
4 |
5 | export type CreateSecret = components["schemas"]["SecretRequest"];
6 | export type Secret = components["schemas"]["SecretResponse"];
7 | export type UpdateSecret = components["schemas"]["SecretUpdate"];
8 | export type ListSecretsParams = NonNullable<
9 | operations["list_secrets_api_v1_secrets_get"]["parameters"]["query"]
10 | >;
11 | export type SecretsPage = components["schemas"]["Page_SecretResponse_"];
12 |
--------------------------------------------------------------------------------
/src/lib/fetch-error.ts:
--------------------------------------------------------------------------------
1 | export class FetchError extends Error {
2 | public status: number;
3 | public statusText: string;
4 | public message: string;
5 |
6 | constructor({
7 | message,
8 | status,
9 | statusText
10 | }: {
11 | status: number;
12 | statusText: string;
13 | message: string;
14 | }) {
15 | super(message);
16 | this.status = status;
17 | this.statusText = statusText;
18 | this.message = message;
19 | }
20 | }
21 |
22 | export function isFetchError(err: unknown): err is FetchError {
23 | return err instanceof FetchError;
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@zenml-io/react-component-library";
2 | import { PropsWithChildren, ReactNode } from "react";
3 |
4 | type Props = {
5 | icon?: ReactNode;
6 | className?: string;
7 | };
8 |
9 | export function EmptyState({ children, icon, className }: PropsWithChildren
9 |
12 |
13 |
15 |
8 |
13 | Log in to your account
9 |10 | Please, fill in your details to log in to your ZenML account. 11 |
12 |
8 |
11 |
10 |
11 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/stacks/create/existing-infrastructure/steps/artifact_store/Header.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentIcon } from "@/components/ComponentIcon";
2 |
3 | export function ArtifactStoreHeader() {
4 | return (
5 |
6 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/collapsible-chevron.tsx:
--------------------------------------------------------------------------------
1 | import ChevronDown from "@/assets/icons/chevron-down.svg?react";
2 | import { cn } from "@zenml-io/react-component-library/utilities";
3 |
4 | type Props = {
5 | open: boolean;
6 | className?: string;
7 | };
8 |
9 | export function CollapsibleChevron({ open, className }: Props) {
10 | return (
11 |
7 |
11 | Choose one of the storages for the new Artifact Store. 12 |
13 |
11 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/components/create/header.tsx:
--------------------------------------------------------------------------------
1 | import Container from "@/assets/icons/container.svg?react";
2 | import { PageHeader } from "../../../components/PageHeader";
3 | import { useComponentCreateBreadcrumbs } from "./breadcrumb";
4 |
5 | export function CreateComponentHeader() {
6 | useComponentCreateBreadcrumbs();
7 |
8 | return (
9 |
12 |
15 |
11 |
14 | Register new Component
13 |Repositories
8 |
11 |
14 |
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | *.log
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 | pnpm-debug.log*
7 | lerna-debug.log*
8 |
9 | node_modules
10 | dist
11 | dist-ssr
12 | *.local
13 |
14 | # Editor directories and files
15 | .vscode/*
16 | !.vscode/extensions.json
17 | .idea
18 | .DS_Store
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | /test-results/
25 | /playwright-report/
26 | /blob-report/
27 | /playwright/.cache/
28 |
29 | .env*
30 | !.env.example
31 |
32 | urls.txt
33 |
34 | # Claude Code
35 | .claude/*
36 | !.claude/output-styles/
37 |
38 | # X-Squad
39 | design/
40 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/page.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library/components/server";
2 | import { ServiceConnectorListHeader } from "./header";
3 | import { ServiceConnectorListContent } from "./list-content";
4 | import { ConnectorSelectorContextProvider } from "./selector-context";
5 | export default function ConnectorsPage() {
6 | return (
7 |
7 |
9 | default
10 |
12 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/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 |
14 |
9 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/assets/icons/spinner.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/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 }: HTMLAttributesSomething went wrong!
11 |{error?.message}
12 |
14 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/header.tsx:
--------------------------------------------------------------------------------
1 | export function ServiceConnectorListHeader() {
2 | return (
3 |
4 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/snapshots/create/breadcrumbs.ts:
--------------------------------------------------------------------------------
1 | import { snapshotBreadcrumb } from "@/components/breadcrumbs/library";
2 | import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
3 | import { routes } from "@/router/routes";
4 |
5 | import { useEffect } from "react";
6 |
7 | export function useCreateSnapshotBreadcrumbs() {
8 | const { setBreadcrumbs } = useBreadcrumbsContext();
9 |
10 | useEffect(() => {
11 | setBreadcrumbs([
12 | snapshotBreadcrumb,
13 | {
14 | label: "Create",
15 | href: routes.projects.snapshots.create
16 | }
17 | ]);
18 | }, [setBreadcrumbs]);
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/announcements/announcement-highlight/page-indicator.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | currentPage: number;
3 | totalPages: number;
4 | };
5 |
6 | export function AnnouncementHighlightPageIndicator({ currentPage, totalPages }: Props) {
7 | if (totalPages <= 1) return null;
8 |
9 | return (
10 | Service Connectors
5 |6 | Configure and manage your service connectors.{" "} 7 | 13 | Learn More 14 | 15 |
16 |
11 | {Array.from({ length: totalPages }, (_, index) => (
12 |
16 | ))}
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/logs/empty-state-logs.tsx:
--------------------------------------------------------------------------------
1 | import Logs from "@/assets/icons/logs.svg?react";
2 | import { EmptyState } from "@/components/EmptyState";
3 |
4 | type Props = {
5 | title: string;
6 | subtitle: string;
7 | };
8 |
9 | export function EmptyStateLogs({ title, subtitle }: Props) {
10 | return (
11 |
13 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/runs/runs.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Formats a run index as a 4-digit zero-padded string.
3 | * e.g., 1 => "0001", 42 => "0042", 1234 => "1234"
4 | */
5 | export function formatRunIndex(index: number): string {
6 | return String(index).padStart(4, "0");
7 | }
8 |
9 | /**
10 | * Formats a run name with an optional index prefix.
11 | * e.g., formatRunName("my-run", 1) => "#0001-my-run"
12 | * e.g., formatRunName("my-run") => "my-run"
13 | */
14 | export function formatRunName(name: string, index?: number | null): string {
15 | if (index == null) return name;
16 | return `#${formatRunIndex(index)}-${name}`;
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/tables/action-cell.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, ReactNode } from "react";
2 | import clsx from "clsx";
3 |
4 | interface ActionCellProps extends HTMLAttributes{title}
14 | {subtitle}
15 |
15 | {children}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/router/queryclient.ts:
--------------------------------------------------------------------------------
1 | import { FetchError } from "@/lib/fetch-error";
2 | import { removeAuthState } from "@/lib/sessions";
3 | import { QueryCache, QueryClient } from "@tanstack/react-query";
4 |
5 | function handle401() {
6 | removeAuthState();
7 | window.location.reload();
8 | }
9 |
10 | export const queryClient = new QueryClient({
11 | defaultOptions: {
12 | queries: {
13 | retry: false
14 | }
15 | },
16 | queryCache: new QueryCache({
17 | onError: (error) => {
18 | if (error instanceof FetchError) {
19 | if (error.status === 401) {
20 | handle401();
21 | }
22 | }
23 | }
24 | })
25 | });
26 |
--------------------------------------------------------------------------------
/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/components/announcements/announcement-image.tsx:
--------------------------------------------------------------------------------
1 | import { generateProjectImageUrl } from "@/lib/images";
2 | import { cn } from "@zenml-io/react-component-library";
3 |
4 | type Props = {
5 | imageUrl?: string;
6 | title: string;
7 | className?: string;
8 | };
9 |
10 | export function AnnouncementImage({ imageUrl, title, className }: Props) {
11 | const src = imageUrl ?? generateProjectImageUrl(title);
12 |
13 | return (
14 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/stacks/create/terraform/TerraformWizard.tsx:
--------------------------------------------------------------------------------
1 | import { useWizardContext } from "@/context/WizardContext";
2 | import { ConfigurationStep } from "./steps/configuration";
3 | import { DeploymentStep } from "./steps/deploy";
4 | import { ProviderStep } from "./steps/provider";
5 | // import { SuccessStep } from "./steps/success";
6 |
7 | export function TerraformWizard() {
8 | const { currentStep } = useWizardContext();
9 |
10 | if (currentStep === 1) return Output
13 |
9 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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{`${selectedRowCount} ${pluralize(selectedRowCount, "Run")} selected`}
10 |
10 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/deployments/playground/preview-visualization/components/expand-collapse-icon.tsx:
--------------------------------------------------------------------------------
1 | import ExpandLines from "@/assets/icons/expand_lines.svg?react";
2 | import CollapseLines from "@/assets/icons/collapse_lines.svg?react";
3 | import { cn } from "@zenml-io/react-component-library/utilities";
4 |
5 | type Props = {
6 | className?: string;
7 | expanded: boolean;
8 | };
9 |
10 | export function ExpandCollapseLineIcon({ expanded, className }: Props) {
11 | const classNames = cn("size-3 shrink-0", className);
12 | return expanded ? (
13 | 12 | You successfully registered the service connector `{connectorName}` and can now create new 13 | resources 14 |
15 |
20 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/assets/icons/side-collapse.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/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 |
7 |
15 |
8 |
12 | Select one of the connected orchestrators for your new stack 13 |
14 |
10 |
11 |
16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/monaco-setup.ts:
--------------------------------------------------------------------------------
1 | import { loader } from "@monaco-editor/react";
2 | import * as monaco from "monaco-editor";
3 | import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
4 | import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
5 | import { githubLight } from "./lib/monaco-editor/github-light";
6 |
7 | self.MonacoEnvironment = {
8 | getWorker(_, label) {
9 | if (label === "json") {
10 | return new jsonWorker();
11 | }
12 |
13 | return new editorWorker();
14 | }
15 | };
16 |
17 | loader.config({ monaco });
18 |
19 | loader.init().then((monaco) => {
20 | monaco.editor.defineTheme("github-light", githubLight);
21 | });
22 |
--------------------------------------------------------------------------------
/src/app/settings/service-accounts/[service-account-id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library/components/server";
2 | import { ApiKeySelectorContextProvider } from "./SelectorContext";
3 | import ServiceAccountDetailTable from "./Table";
4 | import { APIKeyHeader } from "./header";
5 |
6 | export default function ServiceAccountDetail() {
7 | return (
8 |
12 |
15 | Register a Stack
14 |
10 |
13 | API Keys
12 |
11 |
12 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/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 |
13 |
16 | {title}
14 |{description}
15 |
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/assets/icons/alert-circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/collapse.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/side-expand.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/devices/verify/Success.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@zenml-io/react-component-library";
2 | import CheckCircle from "@/assets/icons/check-circle.svg?react";
3 |
4 | export function DeviceVerificationSuccess() {
5 | return (
6 |
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 |
9 |
14 | You successfully added your device
10 |11 | You may close this screen and return to your CLI. 12 |
13 |
7 |
15 |
8 |
12 | Select one of the Container Registries for your new stack 13 |
14 |
16 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/deployments/list/button-group.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonGroupBasic } from "@/components/button-group/button-group-basic";
2 | import { useDeploymentSelectorContext } from "@/components/deployments/selector-context";
3 |
4 | export function PipelineDeploymentsButtonGroup() {
5 | const { selectedRowCount } = useDeploymentSelectorContext();
6 | // const { bulkDelete } = useSnapshotBulkDelete();
7 |
8 | async function handleBulkDeleteSelected() {
9 | // await bulkDelete(selectedRowIDs);
10 | }
11 |
12 | return (
13 | {title}
17 | {subtitle &&{subtitle}
} 18 |
11 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/form/common.tsx:
--------------------------------------------------------------------------------
1 | import { FieldHint } from "./FieldHint";
2 | import { JSONSchemaDefinition } from "@/types/forms";
3 |
4 | type Props = {
5 | label: string;
6 | isOptional: boolean;
7 | schema?: JSONSchemaDefinition;
8 | fieldName?: string;
9 | };
10 |
11 | export function RendererHeadline({ label, isOptional, schema, fieldName }: Props) {
12 | return (
13 |
14 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/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 | 15 | {label} 16 | {!isOptional && ( 17 | 18 | * 19 | 20 | )} 21 |
22 | {schema && fieldName &&
13 |
17 |
14 |
16 | {children}
;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/deployments/playground/preview-visualization/components/boolean-value.tsx:
--------------------------------------------------------------------------------
1 | import SlashCircle from "@/assets/icons/slash-circle.svg?react";
2 | import CheckCircle from "@/assets/icons/check-circle.svg?react";
3 | import { cn } from "@zenml-io/react-component-library";
4 |
5 | export function BooleanValue({ value, className }: { value: boolean; className?: string }) {
6 | return (
7 |
8 | {value === true ? (
9 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/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/app/pipelines/_components/ButtonGroup.tsx:
--------------------------------------------------------------------------------
1 | import { pluralize } from "@/lib/strings";
2 | import { DeletePipelineAlert } from "./DeletePipelineAlert";
3 | import { usePipelineSelectorContext } from "./PipelineSelectorContext";
4 |
5 | export function PipelinesButtonGroup() {
6 | const { selectedRowCount } = usePipelineSelectorContext();
7 | const plural = pluralize(selectedRowCount, "Pipeline");
8 |
9 | return (
10 |
11 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/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 | {`${selectedRowCount} ${plural} selected`}
12 |
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 |
9 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/upgrade/components/form/Wrapper.tsx:
--------------------------------------------------------------------------------
1 | import { ProWrapper } from "@/components/pro/ProCta";
2 | import { useUpgradeContext } from "../Context";
3 | import { UpgradeFormStep } from "./index";
4 | import Image from "@/assets/images/upgrade-form.webp";
5 | import { SubmitSuccess } from "../Success";
6 |
7 | export function UpgradeWrapperBox() {
8 | const { submitSuccess } = useUpgradeContext();
9 | return (
10 | {`${
10 | selectedRowCount
11 | } ${pluralize(selectedRowCount, "Service Account")} selected`}
12 | {children}
20 |
8 |
22 | Secrets
9 | 10 |11 | Configure and manage your pipeline secrets and configurations.{" "} 12 | 18 | Learn More 19 | 20 |
21 |
8 |
17 |
9 |
13 | Connect ZenML to your resources for seamless integration of cloud services into your ML 14 | pipelines. 15 |
16 |{code};
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/wizard.tsx:
--------------------------------------------------------------------------------
1 | import { useWizardContext } from "@/context/WizardContext";
2 | import { RegisterConnectorProvider } from "./create-context";
3 | import { ConnectorTypeStep } from "./connector-type";
4 | import { ConnectorConfigurationStep } from "./configuration";
5 | import { ConnectorSuccessStep } from "./success";
6 |
7 | export function ConnectorRegistrationWizard() {
8 | return (
9 | {err.message}
20 | });
21 | closeAlert();
22 | }
23 | });
24 |
25 | return { stopRunQuery };
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/stacks/info/sort-component.ts:
--------------------------------------------------------------------------------
1 | import { StackComponent } from "@/types/components";
2 | import { StackComponentType } from "@/types/components";
3 | import { stackComponentTypes } from "@/lib/constants";
4 |
5 | export function sortComponents(components: StackComponent[]) {
6 | return components.sort((a, b) => {
7 | const typeA = a.body?.type ?? "";
8 | const typeB = b.body?.type ?? "";
9 | const indexA = stackComponentTypes.indexOf(typeA as StackComponentType);
10 | const indexB = stackComponentTypes.indexOf(typeB as StackComponentType);
11 | // If type not found in array, put it at the end
12 | const orderA = indexA === -1 ? stackComponentTypes.length : indexA;
13 | const orderB = indexB === -1 ? stackComponentTypes.length : indexB;
14 | return orderA - orderB;
15 | });
16 | }
17 |
--------------------------------------------------------------------------------
/.github/workflows/unit-tests.yml:
--------------------------------------------------------------------------------
1 | name: Build & Unit Tests
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | pull_request:
8 | workflow_dispatch:
9 |
10 | jobs:
11 | test:
12 | runs-on: ubuntu-latest
13 |
14 | steps:
15 | - name: Checkout Repository
16 | uses: actions/checkout@v5
17 |
18 | - name: Set up Node.js
19 | uses: actions/setup-node@v6
20 | with:
21 | node-version: "24"
22 |
23 | - name: Install pnpm
24 | uses: pnpm/action-setup@v4
25 | with:
26 | version: latest
27 |
28 | - name: Install project dependencies
29 | run: pnpm install --frozen-lockfile
30 |
31 | - name: "Run Build"
32 | run: pnpm build
33 |
34 | - name: Run Unit Tests
35 | run: pnpm test:unit
36 |
--------------------------------------------------------------------------------
/src/app/settings/service-accounts/[service-account-id]/ButtonGroup.tsx:
--------------------------------------------------------------------------------
1 | import { pluralize } from "@/lib/strings";
2 | import { DeleteApiKey } from "./DeleteApiKeyDialog";
3 | import { useApiKeySelectorContext } from "./SelectorContext";
4 |
5 | export function ApiKeyButtonGroup({ serviceAccountId }: { serviceAccountId: string }) {
6 | const { selectedRowCount } = useApiKeySelectorContext();
7 | return (
8 |
9 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/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{`${
10 | selectedRowCount
11 | } ${pluralize(selectedRowCount, "Api Key")} selected`}
12 | Loading...
; 13 | if (runQuery.isError) returnError
; 14 | 15 | return ( 16 |
17 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/components/service.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { StackComponentListParams } from "@/types/components";
3 | import { useSearchParams } from "react-router-dom";
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 | operator: z.enum(["and", "or"]).optional()
11 | });
12 |
13 | export function useComponentlistQueryParams(): StackComponentListParams {
14 | const [searchParams] = useSearchParams();
15 |
16 | const { page, name, operator } = filterParamsSchema.parse({
17 | page: searchParams.get("page") || undefined,
18 | name: searchParams.get("name") || undefined
19 | });
20 |
21 | return { page, name, logical_operator: operator };
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/pipelines/[pipelineId]/deployments/columns.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createDeploymentAuthorColumn,
3 | createDeploymentCreatedColumn,
4 | createDeploymentNameColumn,
5 | createDeploymentSnapshotColumn,
6 | createDeploymentStatusColumn
7 | } from "@/components/deployments/list/column-definitions";
8 | import { Deployment } from "@/types/deployments";
9 | import { ColumnDef } from "@tanstack/react-table";
10 | import { useMemo } from "react";
11 |
12 | export function usePipelineDeploymentColumns(): ColumnDefAre you sure?
16 |This action cannot be undone.
17 |
16 | {displayBanner &&
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/assets/icons/refresh.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/data/pipeline-snapshots/index.ts:
--------------------------------------------------------------------------------
1 | import { PipelineSnapshotListQueryParams } from "@/types/pipeline-snapshots";
2 | import { queryOptions } from "@tanstack/react-query";
3 | import { fetchPipelineSnapshotDetail } from "./fetch-snapshot-detail";
4 | import { fetchSnapshotList } from "./list-snapshots";
5 |
6 | export const pipelineSnapshotQueries = {
7 | all: ["pipeline_snapshots"] as const,
8 | detail: (snapshotId: string) =>
9 | queryOptions({
10 | queryKey: [...pipelineSnapshotQueries.all, snapshotId],
11 | queryFn: async () => fetchPipelineSnapshotDetail({ snapshotId })
12 | }),
13 | list: (queryParams: PipelineSnapshotListQueryParams) =>
14 | queryOptions({
15 | queryKey: [...pipelineSnapshotQueries.all, queryParams],
16 | queryFn: async () => fetchSnapshotList({ params: queryParams })
17 | })
18 | };
19 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/_layout/header/pipeline-tag.tsx:
--------------------------------------------------------------------------------
1 | import PipelineIcon from "@/assets/icons/pipeline.svg?react";
2 | import { routes } from "@/router/routes";
3 | import { Tag } from "@zenml-io/react-component-library";
4 | import { Link } from "react-router-dom";
5 | type Props = {
6 | pipelineId: string;
7 | pipelineName: string;
8 | };
9 |
10 | export function PipelineTag({ pipelineId, pipelineName }: Props) {
11 | return (
12 |
13 |
22 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/announcements/announcement-list/announcement-dialog-search-bar.tsx:
--------------------------------------------------------------------------------
1 | import Search from "@/assets/icons/search.svg?react";
2 | import { DebouncedInput } from "@/components/debounced-input";
3 |
4 | type Props = {
5 | searchQuery: string;
6 | setSearchQuery: (value: string) => void;
7 | };
8 |
9 | export function AnnouncementDialogSearchBar({ searchQuery, setSearchQuery }: Props) {
10 | return (
11 | 23 | {err.message} 24 |
25 |
12 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/contents/repositories.ts:
--------------------------------------------------------------------------------
1 | import { CommandListItem } from "../components/fallback-pages/Commands";
2 |
3 | export const repositoryCommands: CommandListItem[] = [
4 | {
5 | command:
6 | "zenml code-repository register
13 |
23 |
20 |
22 | -
16 | {allComponents.map((component) => (
17 |
-
18 |
19 |
20 | ))}
21 |
14 | {children}
15 |
16 | -
12 | {Array.from({ length: stepAmount }, (_, i) => (
13 |
- i 20 | ? "bg-primary-300" 21 | : "bg-neutral-200" 22 | }`} 23 | > 24 | ))} 25 |
13 |
16 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/.github/workflows/playwright.yml:
--------------------------------------------------------------------------------
1 | name: Playwright Tests
2 | on:
3 | push:
4 | branches: [main, master]
5 | pull_request:
6 | branches: [main, master]
7 | jobs:
8 | test:
9 | timeout-minutes: 60
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v5
13 | - uses: actions/setup-node@v6
14 | with:
15 | node-version: lts/*
16 | - name: Install dependencies
17 | run: npm install -g pnpm && pnpm install
18 | - name: Install Playwright Browsers
19 | run: pnpm exec playwright install --with-deps
20 | - name: Run Playwright tests
21 | run: pnpm exec playwright test
22 | - uses: actions/upload-artifact@v4
23 | if: always()
24 | with:
25 | name: playwright-report
26 | path: playwright-report/
27 | retention-days: 30
28 |
--------------------------------------------------------------------------------
/src/app/settings/members/service.ts:
--------------------------------------------------------------------------------
1 | import { ListUserParams } from "@/types/user";
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 useUserOverviewSearchParams(): ListUserParams {
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/assets/icons/dots-circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/logs/use-logpage-input.ts:
--------------------------------------------------------------------------------
1 | import { zodResolver } from "@hookform/resolvers/zod";
2 | import { useMemo } from "react";
3 | import { useForm } from "react-hook-form";
4 | import { z } from "zod";
5 |
6 | export function useLogPageInput(currentPage: number, totalPages: number) {
7 | const formSchema = useMemo(
8 | () =>
9 | z.object({
10 | page: z.coerce
11 | .number()
12 | .int()
13 | .transform((val) => {
14 | const num = Math.floor(val);
15 | if (isNaN(num) || num < 1) return 1;
16 | if (num > totalPages) return totalPages;
17 | return num;
18 | })
19 | .catch(1)
20 | }),
21 | [totalPages]
22 | );
23 |
24 | const form = useForm({
25 | resolver: zodResolver(formSchema),
26 | defaultValues: {
27 | page: currentPage
28 | }
29 | });
30 |
31 | return {
32 | form
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/src/data/github/pipeline-summary.ts:
--------------------------------------------------------------------------------
1 | import { useQuery, UseQueryOptions } from "@tanstack/react-query";
2 |
3 | async function fetchPipelineContent(pipelineName: string) {
4 | const url = `https://raw.githubusercontent.com/zenml-io/vscode-tutorial-extension/HEAD/pipelines/${pipelineName}/summary.md`;
5 | const response = await fetch(url);
6 | if (!response.ok) {
7 | throw new Error("Failed to fetch pipeline summary");
8 | }
9 | const data = await response.text();
10 | return data;
11 | }
12 |
13 | export function useGithubPipelineSummary(
14 | pipelineName: string,
15 | options?: Omit
17 |
22 | Staying Open Source?
18 |19 | No problem! Use this CLI command to list your models 20 |
21 |
15 |
25 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/data/pipelines/pipeline-detail.ts:
--------------------------------------------------------------------------------
1 | import { FetchError } from "@/lib/fetch-error";
2 | import { notFound } from "@/lib/not-found-error";
3 | import { apiPaths, createApiPath } from "../api";
4 | import { fetcher } from "../fetch";
5 | export type PipelineDetailArgs = {
6 | pipelineId: string;
7 | };
8 |
9 | export async function fetchPipelineDetail({ pipelineId }: PipelineDetailArgs) {
10 | const url = createApiPath(apiPaths.pipelines.detail(pipelineId));
11 | const res = await fetcher(url, {
12 | method: "GET",
13 | headers: {
14 | "Content-Type": "application/json"
15 | }
16 | });
17 |
18 | if (res.status === 404) notFound();
19 |
20 | if (!res.ok) {
21 | throw new FetchError({
22 | message: `Error while fetching pipeline ${pipelineId}`,
23 | status: res.status,
24 | statusText: res.statusText
25 | });
26 | }
27 | return res.json();
28 | }
29 |
--------------------------------------------------------------------------------
/src/layouts/AuthenticatedLayout/back-button.tsx:
--------------------------------------------------------------------------------
1 | import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
2 | import { Button } from "@zenml-io/react-component-library/components/server";
3 | import { useLocation, useNavigate } from "react-router-dom";
4 |
5 | export function BackButton() {
6 | const navigate = useNavigate();
7 | const location = useLocation();
8 |
9 | const segments = location.pathname.split("/").filter(Boolean);
10 |
11 | if (segments.length <= 1) {
12 | return null;
13 | }
14 |
15 | return (
16 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/deployments/columns.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createDeploymentAuthorColumn,
3 | createDeploymentCreatedColumn,
4 | createDeploymentNameColumn,
5 | createDeploymentPipelineColumn,
6 | createDeploymentSnapshotColumn,
7 | createDeploymentStatusColumn
8 | } from "@/components/deployments/list/column-definitions";
9 | import { Deployment } from "@/types/deployments";
10 | import { ColumnDef } from "@tanstack/react-table";
11 | import { useMemo } from "react";
12 |
13 | export function useGlobalDeploymentColumns(): ColumnDef
15 |
17 |
13 |
17 | {error &&
19 | )}
20 | />
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/settings/connectors/create/page.tsx:
--------------------------------------------------------------------------------
1 | import { WizardProvider } from "@/context/WizardContext";
2 | import { CreateConnectorHeader } from "./header";
3 | import { LeftSideMenu } from "@/components/wizard/LeftSideMenu";
4 | import { ConnectorRegistrationWizard } from "./wizard";
5 | const menuEntries = ["Connector Type", "Configuration"];
6 |
7 | export default function RegisterConnector() {
8 | return (
9 | {error.message?.toString()}
} 18 |
10 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/assets/icons/chevron-right-double.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/deployments/[deploymentId]/playground/_components/outputs/run-card-avatar.tsx:
--------------------------------------------------------------------------------
1 | import { InlineAvatar } from "@/components/InlineAvatar";
2 | import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
3 | import { Skeleton } from "@zenml-io/react-component-library";
4 |
5 | type Props = {
6 | runId: string;
7 | };
8 |
9 | export function PlaygroundRunCardAvatar({ runId }: Props) {
10 | const runQuery = usePipelineRun({ runId });
11 |
12 | if (runQuery.isPending) return
12 |
13 |
20 |
21 |
14 |
16 |
17 |
19 |