Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #938 from 190km/preview-deployment-view

Browse Source 
style(preview-deployment): better preview deployment card
This commit is contained in:
Mauricio Siu
2024-12-23 00:40:51 -06:00
committed by GitHub
parent 869843d9ac 65ddc22010
commit 455cae6b8c
2 changed files with 219 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
View File

@@ -26,7 +26,7 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline">View Builds</Button> <Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl"> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
<DialogHeader> <DialogHeader>

411
apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
View File

@@ -1,212 +1,237 @@
import { DateTooltip } from "@/components/shared/date-tooltip"; import React from "react";
import { StatusTooltip } from "@/components/shared/status-tooltip"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { import {
Card, Clock,
CardContent, GitBranch,
CardDescription, GitPullRequest,
CardHeader, Pencil,
CardTitle, RocketIcon,
} from "@/components/ui/card"; } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { api } from "@/utils/api";
import { Pencil, RocketIcon } from "lucide-react";
import React, { useEffect, useState } from "react";
import { toast } from "sonner";
import { ShowDeployment } from "../deployments/show-deployment";
import Link from "next/link"; import Link from "next/link";
import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
import { DialogAction } from "@/components/shared/dialog-action"; import { DialogAction } from "@/components/shared/dialog-action";
import { AddPreviewDomain } from "./add-preview-domain"; import { api } from "@/utils/api";
import { GithubIcon } from "@/components/icons/data-tools-icons";
import { ShowPreviewSettings } from "./show-preview-settings";
import { ShowPreviewBuilds } from "./show-preview-builds"; import { ShowPreviewBuilds } from "./show-preview-builds";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { toast } from "sonner";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { AddPreviewDomain } from "./add-preview-domain";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { ShowPreviewSettings } from "./show-preview-settings";
interface Props { interface Props {
applicationId: string; applicationId: string;
} }
export const ShowPreviewDeployments = ({ applicationId }: Props) => { export const ShowPreviewDeployments = ({ applicationId }: Props) => {
const [activeLog, setActiveLog] = useState<string | null>(null); const { data } = api.application.one.useQuery({ applicationId });
const { data } = api.application.one.useQuery({ applicationId });
const { mutateAsync: deletePreviewDeployment, isLoading } = const { mutateAsync: deletePreviewDeployment, isLoading } =
api.previewDeployment.delete.useMutation(); api.previewDeployment.delete.useMutation();
const { data: previewDeployments, refetch: refetchPreviewDeployments } =
api.previewDeployment.all.useQuery(
{ applicationId },
{
enabled: !!applicationId,
},
);
// const [url, setUrl] = React.useState("");
// useEffect(() => {
// setUrl(document.location.origin);
// }, []);
return ( const { data: previewDeployments, refetch: refetchPreviewDeployments } =
<Card className="bg-background"> api.previewDeployment.all.useQuery(
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2"> { applicationId },
<div className="flex flex-col gap-2"> {
<CardTitle className="text-xl">Preview Deployments</CardTitle> enabled: !!applicationId,
<CardDescription>See all the preview deployments</CardDescription> }
</div> );
{data?.isPreviewDeploymentsActive && (
<ShowPreviewSettings applicationId={applicationId} />
)}
</CardHeader>
<CardContent className="flex flex-col gap-4">
{data?.isPreviewDeploymentsActive ? (
<>
<div className="flex flex-col gap-2 text-sm">
<span>
Preview deployments are a way to test your application before it
is deployed to production. It will create a new deployment for
each pull request you create.
</span>
</div>
{data?.previewDeployments?.length === 0 ? (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
No preview deployments found
</span>
</div>
) : (
<div className="flex flex-col gap-4">
{previewDeployments?.map((previewDeployment) => {
const { deployments, domain } = previewDeployment;
return ( const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
<div deletePreviewDeployment({
key={previewDeployment?.previewDeploymentId} previewDeploymentId: previewDeploymentId,
className="flex flex-col justify-between rounded-lg border p-4 gap-2" })
> .then(() => {
<div className="flex justify-between gap-2 max-sm:flex-wrap"> refetchPreviewDeployments();
<div className="flex flex-col gap-2"> toast.success("Preview deployment deleted");
{deployments?.length === 0 ? ( })
<div> .catch((error) => {
<span className="text-sm text-muted-foreground"> toast.error(error.message);
No deployments found });
</span> };
</div>
) : (
<div className="flex items-center gap-2">
<span className="flex items-center gap-4 font-medium capitalize text-foreground">
{previewDeployment?.pullRequestTitle}
</span>
<StatusTooltip
status={previewDeployment.previewStatus}
className="size-2.5"
/>
</div>
)}
<div className="flex flex-col gap-1">
{previewDeployment?.pullRequestTitle && (
<div className="flex items-center gap-2">
<span className="break-all text-sm text-muted-foreground w-fit">
Title: {previewDeployment?.pullRequestTitle}
</span>
</div>
)}
{previewDeployment?.pullRequestURL && ( return (
<div className="flex items-center gap-2"> <Card className="bg-background">
<GithubIcon /> <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
<Link <div className="flex flex-col gap-2">
target="_blank" <CardTitle className="text-xl">Preview Deployments</CardTitle>
href={previewDeployment?.pullRequestURL} <CardDescription>See all the preview deployments</CardDescription>
className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground" </div>
> {data?.isPreviewDeploymentsActive && (
Pull Request URL <ShowPreviewSettings applicationId={applicationId} />
</Link> )}
</div> </CardHeader>
)} <CardContent className="flex flex-col gap-4">
</div> {data?.isPreviewDeploymentsActive ? (
<div className="flex flex-col "> <>
<span>Domain </span> <div className="flex flex-col gap-2 text-sm">
<div className="flex flex-row items-center gap-4"> <span>
<Link Preview deployments are a way to test your application before it
target="_blank" is deployed to production. It will create a new deployment for
href={`http://${domain?.host}`} each pull request you create.
className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground" </span>
> </div>
{domain?.host} {!previewDeployments?.length ? (
</Link> <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<AddPreviewDomain <RocketIcon className="size-8 text-muted-foreground" />
previewDeploymentId={ <span className="text-base text-muted-foreground">
previewDeployment.previewDeploymentId No preview deployments found
} </span>
domainId={domain?.domainId} </div>
> ) : (
<Button variant="outline" size="sm"> <div className="flex flex-col gap-4">
<Pencil className="size-4 text-muted-foreground" /> {previewDeployments.map((previewDeployment) => (
</Button> <div
</AddPreviewDomain> key={previewDeployment.previewDeploymentId}
</div> className="w-full border rounded-xl"
</div> >
</div> <div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
<span className="text-lg font-bold">
{previewDeployment.pullRequestTitle}
</span>
<Badge
variant="outline"
className="text-sm font-medium gap-x-2"
>
<StatusTooltip
status={previewDeployment.previewStatus}
className="size-2.5"
/>
{previewDeployment.previewStatus
?.replace("running", "Running")
.replace("done", "Done")
.replace("error", "Error")
.replace("idle", "Idle") || "Idle"}
</Badge>
</div>
<div className="flex flex-col sm:items-end gap-2 max-sm:w-full"> <div className="md:p-6 p-2 md:pt-0 space-y-4">
{previewDeployment?.createdAt && ( <div className="flex sm:flex-row flex-col items-center gap-2">
<div className="text-sm capitalize text-muted-foreground"> <Link
<DateTooltip href={`http://${previewDeployment.domain?.host}`}
date={previewDeployment?.createdAt} target="_blank"
/> className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
</div> >
)} {previewDeployment.domain?.host}
<ShowPreviewBuilds </Link>
deployments={previewDeployment?.deployments || []}
serverId={data?.serverId || ""}
/>
<ShowModalLogs <AddPreviewDomain
appName={previewDeployment.appName} previewDeploymentId={
serverId={data?.serverId || ""} previewDeployment.previewDeploymentId
> }
<Button variant="outline">View Logs</Button> domainId={previewDeployment.domain?.domainId}
</ShowModalLogs> >
<Button
className="sm:w-auto w-full"
size="sm"
variant="outline"
>
<Pencil className="size-4" />
Edit
</Button>
</AddPreviewDomain>
</div>
<DialogAction <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
title="Delete Preview" <div className="flex items-center space-x-2">
description="Are you sure you want to delete this preview?" <GitBranch className="size-5 text-gray-400" />
onClick={() => { <span>Branch:</span>
deletePreviewDeployment({ <Badge className="p-2" variant="blank">
previewDeploymentId: {previewDeployment.branch}
previewDeployment.previewDeploymentId, </Badge>
}) </div>
.then(() => { <div className="flex items-center space-x-2">
refetchPreviewDeployments(); <Clock className="size-5 text-gray-400" />
toast.success("Preview deployment deleted"); <span>Deployed:</span>
}) <Badge className="p-2" variant="blank">
.catch((error) => { <DateTooltip date={previewDeployment.createdAt} />
toast.error(error.message); </Badge>
}); </div>
}} </div>
>
<Button variant="destructive" isLoading={isLoading}> <Separator />
Delete Preview
</Button> <div className="rounded-lg bg-muted p-4">
</DialogAction> <h3 className="mb-2 text-sm font-medium">
</div> Pull Request
</div> </h3>
</div> <div className="flex items-center space-x-2 text-sm text-muted-foreground">
); <GitPullRequest className="size-5 text-gray-400" />
})} <Link
</div> className="hover:text-blue-500/95 hover:underline"
)} target="_blank"
</> href={previewDeployment.pullRequestURL}
) : ( >
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10"> {previewDeployment.pullRequestTitle}
<RocketIcon className="size-8 text-muted-foreground" /> </Link>
<span className="text-base text-muted-foreground"> </div>
Preview deployments are disabled for this application, please </div>
enable it </div>
</span>
<ShowPreviewSettings applicationId={applicationId} /> <div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
</div> <div className="flex flex-wrap justify-end gap-2">
)} <ShowModalLogs
</CardContent> appName={previewDeployment.appName}
</Card> serverId={data?.serverId || ""}
); >
<Button
className="sm:w-auto w-full"
variant="outline"
size="sm"
>
View Logs
</Button>
</ShowModalLogs>
<ShowPreviewBuilds
deployments={previewDeployment.deployments || []}
serverId={data?.serverId || ""}
/>
<DialogAction
title="Delete Preview"
description="Are you sure you want to delete this preview?"
onClick={() =>
handleDeletePreviewDeployment(
previewDeployment.previewDeploymentId
)
}
>
<Button
className="sm:w-auto w-full"
variant="destructive"
isLoading={isLoading}
size="sm"
>
Delete Preview
</Button>
</DialogAction>
</div>
</div>
</div>
))}
</div>
)}
</>
) : (
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
<RocketIcon className="size-8 text-muted-foreground" />
<span className="text-base text-muted-foreground">
Preview deployments are disabled for this application, please
enable it
</span>
<ShowPreviewSettings applicationId={applicationId} />
</div>
)}
</CardContent>
</Card>
);
}; };