Skip to content

Commit 21595e6

Browse files
CahllagerfeldCahllagerfeld
authored
feat: misc improvements to deployments (#910)
1 parent e9d215a commit 21595e6

File tree

16 files changed

+145
-65
lines changed

16 files changed

+145
-65
lines changed

‎src/app/deployments/[deploymentId]/_components/common.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import AlertCircle from "@/assets/icons/alert-circle.svg?react";
2+
import { EmptyState } from "@/components/EmptyState";
3+
4+
type Props = {
5+
title: string;
6+
subtitle?: string;
7+
};
8+
9+
export function AlertEmptyState({ title, subtitle }: Props) {
10+
return (
11+
<EmptyState
12+
className="p-5"
13+
icon={<AlertCircle className="h-[60px] w-[60px] fill-neutral-300" />}
14+
>
15+
<div className="text-center">
16+
<p className="text-text-lg font-semibold">{title}</p>
17+
{subtitle && <p className="text-text-md text-theme-text-secondary">{subtitle}</p>}
18+
</div>
19+
</EmptyState>
20+
);
21+
}

‎src/app/deployments/[deploymentId]/_components/docker-build-collapsible.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { DockerImageCollapsible } from "@/components/runs/detail-tabs/Configuration/DockerImageCollapsible";
2+
import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-query";
3+
import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
4+
import { Deployment } from "@/types/deployments";
5+
import { BuildItem } from "@/types/pipeline-builds";
6+
import { useQuery } from "@tanstack/react-query";
7+
import { Skeleton } from "@zenml-io/react-component-library";
8+
import { AlertEmptyState } from "./common";
9+
import { DeploymentDetailWrapper } from "./fetch-wrapper";
10+
11+
export function DockerBuildCollapsible() {
12+
return <DeploymentDetailWrapper Component={DockerBuildCollapsibleContent} />;
13+
}
14+
15+
type Props = {
16+
deployment: Deployment;
17+
};
18+
19+
function DockerBuildCollapsibleContent({ deployment }: Props) {
20+
const snapshotId = deployment.resources?.snapshot?.id;
21+
22+
const snapshotQuery = useQuery(pipelineSnapshotQueries.detail(snapshotId!));
23+
const buildId = snapshotQuery.data?.resources?.build?.id;
24+
const buildQuery = usePipelineBuild(
25+
{
26+
buildId: buildId!
27+
},
28+
{ enabled: !!buildId }
29+
);
30+
31+
if (!snapshotId) return null;
32+
33+
if (snapshotQuery.isPending) return <Skeleton className="h-[200px] w-full" />;
34+
if (snapshotQuery.isError)
35+
return (
36+
<div>
37+
<AlertEmptyState
38+
title="Unable to get the docker build"
39+
subtitle="Something went wrong fetching the snapshot"
40+
/>
41+
</div>
42+
);
43+
44+
if (!buildId) return null;
45+
46+
if (buildQuery.isPending) return <Skeleton className="h-[200px] w-full" />;
47+
if (buildQuery.isError)
48+
return (
49+
<div>
50+
<AlertEmptyState
51+
title="Unable to get the docker build"
52+
subtitle="Something went wrong fetching the build"
53+
/>
54+
</div>
55+
);
56+
57+
const build = buildQuery.data;
58+
const deployerImage = build.metadata?.images?.deployer as BuildItem | undefined;
59+
60+
if (!deployerImage) {
61+
return null;
62+
}
63+
64+
return <DockerImageCollapsible displayCopyButton={false} data={deployerImage} />;
65+
}

‎src/app/deployments/[deploymentId]/_components/endpoint.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function EndpointCollapsibleContent({ deployment }: Props) {
4141
deploymentEndpoint ? (
4242
<div className="group/copybutton flex items-center gap-0.5">
4343
<a
44-
className="link"
44+
className="link truncate"
4545
href={deploymentEndpoint}
4646
target="_blank"
4747
rel="noopener noreferrer"

‎src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
"use client";
2-
3-
import AlertCircle from "@/assets/icons/alert-circle.svg?react";
41
import { CollapsibleCard } from "@/components/CollapsibleCard";
5-
import { EmptyState } from "@/components/EmptyState";
62
import { StackInfo } from "@/components/stacks/info";
73
import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
84
import { useStack } from "@/data/stacks/stack-detail-query";
95
import { Deployment } from "@/types/deployments";
106
import { PipelineSnapshot } from "@/types/pipeline-snapshots";
117
import { useQuery } from "@tanstack/react-query";
128
import { Skeleton } from "@zenml-io/react-component-library";
9+
import { AlertEmptyState } from "./common";
1310
import { DeploymentDetailWrapper } from "./fetch-wrapper";
1411

1512
type DeploymentStackCollapsibleContentProps = {
@@ -49,7 +46,7 @@ function DeploymentStackCollapsibleWithSnapshot({ snapshotId }: { snapshotId: st
4946

5047
if (snapshotQuery.isError) {
5148
return (
52-
<StackCollapsibleEmptyState
49+
<AlertEmptyState
5350
title="Unable to get Stack"
5451
subtitle="Something went wrong fetching the deployment snapshot"
5552
/>
@@ -80,8 +77,8 @@ function DeploymentStackCollapsibleStackSection({
8077

8178
if (stackQuery.isError) {
8279
return (
83-
<StackCollapsibleEmptyState
84-
title="Failed to fetch the stack"
80+
<AlertEmptyState
81+
title="Unable to get Stack"
8582
subtitle="Something went wrong fetching the stack"
8683
/>
8784
);
@@ -94,23 +91,9 @@ function DeploymentStackCollapsibleStackSection({
9491
return <StackInfo displayInfoBox={false} stack={stack} objectConfig={snapshotConfig} />;
9592
}
9693

97-
function StackCollapsibleEmptyState({ title, subtitle }: { title: string; subtitle?: string }) {
98-
return (
99-
<EmptyState
100-
className="p-5"
101-
icon={<AlertCircle className="h-[60px] w-[60px] fill-neutral-300" />}
102-
>
103-
<div className="text-center">
104-
<p className="text-text-lg font-semibold">{title}</p>
105-
{subtitle && <p className="text-text-md text-theme-text-secondary">{subtitle}</p>}
106-
</div>
107-
</EmptyState>
108-
);
109-
}
110-
11194
function NoStackEmptyState() {
11295
return (
113-
<StackCollapsibleEmptyState
96+
<AlertEmptyState
11497
title="No Stack"
11598
subtitle="There is no stack associated with this deployment."
11699
/>

‎src/app/deployments/[deploymentId]/page.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { DeploymentCodeCollapsible } from "./_components/code-collapsible";
22
import { DeployerConfigCollapsible } from "./_components/config-collapsible";
3-
import { DeploymentStackCollapsible } from "./_components/stack-collapsible";
43
import { DeploymentDetail } from "./_components/deployment-detail";
4+
import { DockerBuildCollapsible } from "./_components/docker-build-collapsible";
55
import { EndpointCollapsible } from "./_components/endpoint";
6+
import { DeploymentStackCollapsible } from "./_components/stack-collapsible";
67

78
export default function DeploymentDetailPage() {
89
return (
910
<div className="grid grid-cols-1 gap-5 p-5 lg:grid-cols-2 lg:px-[80px]">
1011
<div className="space-y-5">
11-
<DeploymentDetail />
1212
<EndpointCollapsible />
1313
<DeploymentCodeCollapsible />
14+
<DeploymentDetail />
15+
<DeployerConfigCollapsible />
1416
</div>
1517
<div className="space-y-5">
1618
<DeploymentStackCollapsible />
17-
<DeployerConfigCollapsible />
19+
<DockerBuildCollapsible />
1820
</div>
1921
</div>
2022
);

‎src/app/deployments/[deploymentId]/runs/page.content.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use client";
2-
31
import { getPipelineDetailColumns } from "@/app/pipelines/[pipelineId]/runs/columns";
42
import { RunsTableToolbar } from "@/app/pipelines/[pipelineId]/runs/runs-table-toolbar";
53
import { PipelineRunsTable } from "@/app/pipelines/[pipelineId]/runs/RunsTable";

‎src/app/snapshots/[snapshotId]/runs/page.content.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use client";
2-
31
import { getPipelineDetailColumns } from "@/app/pipelines/[pipelineId]/runs/columns";
42
import { RunsTableToolbar } from "@/app/pipelines/[pipelineId]/runs/runs-table-toolbar";
53
import { PipelineRunsTable } from "@/app/pipelines/[pipelineId]/runs/RunsTable";

‎src/app/stacks/create/manual/page.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,9 @@ export default function CreateStackManualPage() {
1212

1313
return (
1414
<FormProvider {...form}>
15-
<Tabs
16-
value={selectedTab}
17-
onValueChange={setSelectedTab}
18-
className="lg:h-full lg:overflow-hidden"
19-
>
20-
<form
21-
onSubmit={form.handleSubmit(createManualStack)}
22-
className="hidden h-full flex-col lg:flex"
23-
>
24-
<PanelGroup direction="horizontal">
15+
<Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex-1 overflow-hidden">
16+
<form onSubmit={form.handleSubmit(createManualStack)} className="h-full">
17+
<PanelGroup direction="horizontal" className="h-full !flex-col md:!flex-row">
2518
<Panel className="!overflow-y-auto" defaultSize={50} minSize={33}>
2619
<ComponentsSelection />
2720
</Panel>
@@ -35,10 +28,6 @@ export default function CreateStackManualPage() {
3528
</Panel>
3629
</PanelGroup>
3730
</form>
38-
<form onSubmit={form.handleSubmit(createManualStack)} className="block lg:hidden">
39-
<TypeOverview />
40-
<ComponentsSelection />
41-
</form>
4231
</Tabs>
4332
</FormProvider>
4433
);

‎src/components/CodeHighlighter.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import Prism from "prismjs";
22
import "prismjs/components/prism-python";
33
import "prismjs/components/prism-typescript";
4+
import "prismjs/components/prism-docker";
45
import "prismjs/components/prism-bash";
56
import "@/assets/styles/prism-github-light.css";
67
import { useEffect } from "react";
78

89
type Props = {
910
code: string;
10-
language: string;
11+
language?: "python" | "bash" | "ts" | "dockerfile";
1112
};
1213

1314
export function CodeHighlighter({ code, language = "python" }: Props) {

‎src/components/CodeSnippet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type DisplayCodeProps = {
1010
highlightCode?: boolean;
1111
className?: string;
1212
codeClasses?: string;
13-
language?: string;
13+
language?: "python" | "bash" | "ts" | "dockerfile";
1414
copyCode?: string;
1515
};
1616

0 commit comments

Comments
 (0)