mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
refactor: remove all the props except id, serverid, isloading, and delete function
This commit is contained in:
190km
@@ -1,134 +1,99 @@
|
|||||||
import { StatusTooltip } from "@/components/shared/status-tooltip";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
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 { Separator } from "@/components/ui/separator";
|
||||||
import { Clock, GitBranch, GitPullRequest, Pencil } from "lucide-react";
|
import { Clock, GitBranch, GitPullRequest } from "lucide-react";
|
||||||
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 { api } from "@/utils/api";
|
||||||
import { ShowPreviewBuilds } from "./show-preview-builds";
|
import { ShowPreviewBuilds } from "./show-preview-builds";
|
||||||
import { RouterOutputs } from "@/utils/api";
|
|
||||||
import { AddPreviewDomain } from "./add-preview-domain";
|
|
||||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||||
|
|
||||||
interface PreviewDeploymentCardProps {
|
interface PreviewDeploymentCardProps {
|
||||||
appName: string;
|
deploymentId: string;
|
||||||
serverId: string;
|
serverId: string;
|
||||||
onDeploymentDelete: (deploymentId: string) => void;
|
onDeploymentDelete: (deploymentId: string) => void;
|
||||||
deploymentId: string;
|
isLoading: boolean;
|
||||||
deploymentUrl: string;
|
|
||||||
deployments: RouterOutputs["deployment"]["all"];
|
|
||||||
|
|
||||||
domainId: string;
|
|
||||||
domainHost: string;
|
|
||||||
|
|
||||||
pullRequestTitle: string;
|
|
||||||
pullRequestUrl: string;
|
|
||||||
status: "running" | "error" | "done" | "idle" | undefined | null;
|
|
||||||
branch: string;
|
|
||||||
date: string;
|
|
||||||
isLoading: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PreviewDeploymentCard({
|
export function PreviewDeploymentCard({
|
||||||
appName,
|
deploymentId,
|
||||||
serverId,
|
serverId,
|
||||||
|
onDeploymentDelete,
|
||||||
onDeploymentDelete,
|
isLoading,
|
||||||
deploymentId,
|
|
||||||
deployments,
|
|
||||||
|
|
||||||
domainId,
|
|
||||||
domainHost,
|
|
||||||
|
|
||||||
pullRequestTitle,
|
|
||||||
pullRequestUrl,
|
|
||||||
isLoading,
|
|
||||||
status,
|
|
||||||
branch,
|
|
||||||
date,
|
|
||||||
}: PreviewDeploymentCardProps) {
|
}: PreviewDeploymentCardProps) {
|
||||||
return (
|
const { data: previewDeployment } = api.previewDeployment.one.useQuery({
|
||||||
<div className="w-full border rounded-xl">
|
previewDeploymentId: deploymentId,
|
||||||
<div className="p-6 flex flex-row items-center justify-between">
|
});
|
||||||
<span className="text-lg font-bold">{pullRequestTitle}</span>
|
|
||||||
<Badge variant="outline" className="text-sm font-medium gap-x-2">
|
|
||||||
<StatusTooltip status={status} className="size-2.5" />
|
|
||||||
{status
|
|
||||||
?.replace("running", "Running")
|
|
||||||
.replace("done", "Done")
|
|
||||||
.replace("error", "Error")
|
|
||||||
.replace("idle", "Idle") || "Idle"}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 pt-0 space-y-4">
|
|
||||||
<div className="flex sm:flex-row flex-col items-center gap-2">
|
|
||||||
<div className="gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2">
|
|
||||||
<Link href={`http://${domainHost}`} target="_blank" className="text-sm text-blue-500/95 hover:underline">
|
|
||||||
{domainHost}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<AddPreviewDomain
|
|
||||||
previewDeploymentId={deploymentId}
|
|
||||||
domainId={domainId}
|
|
||||||
>
|
|
||||||
<Button className="sm:w-auto w-full" size="sm" variant="outline">
|
|
||||||
<Pencil className="mr-2 size-4" />
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
</AddPreviewDomain>
|
|
||||||
</div>
|
|
||||||
<div className="flex sm:flex-row text-sm flex-col items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<GitBranch className="h-5 w-5 text-gray-400" />
|
|
||||||
<span>Branch:</span>
|
|
||||||
<Badge className="p-2" variant={"blank"}>
|
|
||||||
{" "}
|
|
||||||
{branch}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Clock className="h-5 w-5 text-gray-400" />
|
|
||||||
<span>Deployed: </span>
|
|
||||||
<Badge className="p-2" variant={"blank"}>
|
|
||||||
<DateTooltip date={date} />
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Separator />
|
|
||||||
<div className="rounded-lg bg-muted p-4">
|
|
||||||
<h3 className="mb-2 text-sm font-medium">Pull Request</h3>
|
|
||||||
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
||||||
<GitPullRequest className="h-5 w-5 text-gray-400" />
|
|
||||||
<Link
|
|
||||||
className="hover:text-blue-500/95 hover:underline"
|
|
||||||
target="_blank"
|
|
||||||
href={pullRequestUrl}
|
|
||||||
>
|
|
||||||
{pullRequestTitle}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="justify-center flex-wrap p-6 pt-0">
|
|
||||||
<div className="flex flex-wrap justify-end gap-2">
|
|
||||||
<ShowPreviewBuilds deployments={deployments} serverId={serverId} />
|
|
||||||
|
|
||||||
<ShowModalLogs appName={appName} serverId={serverId}>
|
if (!previewDeployment) return null;
|
||||||
<Button className="sm:w-auto w-full" variant="outline" size="sm">
|
|
||||||
View Logs
|
|
||||||
</Button>
|
|
||||||
</ShowModalLogs>
|
|
||||||
|
|
||||||
<DialogAction
|
return (
|
||||||
title="Delete Preview"
|
<div className="w-full border rounded-xl">
|
||||||
description="Are you sure you want to delete this preview?"
|
<div className="p-6 flex flex-row items-center justify-between">
|
||||||
onClick={() => onDeploymentDelete(deploymentId)}
|
<span className="text-lg font-bold">{previewDeployment.pullRequestTitle}</span>
|
||||||
>
|
<Badge variant="outline" className="text-sm font-medium gap-x-2">
|
||||||
<Button
|
{previewDeployment.previewStatus || "Idle"}
|
||||||
className="sm:w-auto w-full"
|
</Badge>
|
||||||
variant="destructive"
|
</div>
|
||||||
isLoading={isLoading}
|
<div className="p-6 pt-0 space-y-4">
|
||||||
|
<div className="flex sm:flex-row flex-col items-center gap-2">
|
||||||
|
<Link
|
||||||
|
href={`http://${previewDeployment.domain?.host}`}
|
||||||
|
target="_blank"
|
||||||
|
className="text-sm text-blue-500/95 hover:underline"
|
||||||
|
>
|
||||||
|
{previewDeployment.domain?.host}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex sm:flex-row text-sm flex-col items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<GitBranch className="h-5 w-5 text-gray-400" />
|
||||||
|
<span>Branch:</span>
|
||||||
|
<Badge className="p-2" variant={"blank"}>
|
||||||
|
{previewDeployment.branch}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Clock className="h-5 w-5 text-gray-400" />
|
||||||
|
<span>Deployed:</span>
|
||||||
|
<Badge className="p-2" variant={"blank"}>
|
||||||
|
<DateTooltip date={previewDeployment.createdAt} />
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="rounded-lg bg-muted p-4">
|
||||||
|
<h3 className="mb-2 text-sm font-medium">Pull Request</h3>
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
||||||
|
<GitPullRequest className="h-5 w-5 text-gray-400" />
|
||||||
|
<Link
|
||||||
|
className="hover:text-blue-500/95 hover:underline"
|
||||||
|
target="_blank"
|
||||||
|
href={previewDeployment.pullRequestURL}
|
||||||
|
>
|
||||||
|
{previewDeployment.pullRequestTitle}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="justify-center flex-wrap p-6 pt-0">
|
||||||
|
<div className="flex flex-wrap justify-end gap-2">
|
||||||
|
<ShowPreviewBuilds deployments={previewDeployment.deployments || []} serverId={serverId} />
|
||||||
|
<ShowModalLogs appName={previewDeployment.appName} serverId={serverId}>
|
||||||
|
<Button className="sm:w-auto w-full" variant="outline" size="sm">
|
||||||
|
View Logs
|
||||||
|
</Button>
|
||||||
|
</ShowModalLogs>
|
||||||
|
<DialogAction
|
||||||
|
title="Delete Preview"
|
||||||
|
description="Are you sure you want to delete this preview?"
|
||||||
|
onClick={() => onDeploymentDelete(deploymentId)}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className="sm:w-auto w-full"
|
||||||
|
variant="destructive"
|
||||||
|
isLoading={isLoading}
|
||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
Delete Preview
|
Delete Preview
|
||||||
|
|||||||
@@ -26,27 +26,21 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
|||||||
{ applicationId },
|
{ applicationId },
|
||||||
{
|
{
|
||||||
enabled: !!applicationId,
|
enabled: !!applicationId,
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
|
||||||
const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
|
deletePreviewDeployment({
|
||||||
deletePreviewDeployment({
|
previewDeploymentId: previewDeploymentId,
|
||||||
previewDeploymentId: previewDeploymentId,
|
})
|
||||||
})
|
.then(() => {
|
||||||
.then(() => {
|
refetchPreviewDeployments();
|
||||||
refetchPreviewDeployments();
|
toast.success("Preview deployment deleted");
|
||||||
toast.success("Preview deployment deleted");
|
})
|
||||||
})
|
.catch((error) => {
|
||||||
.catch((error) => {
|
toast.error(error.message);
|
||||||
toast.error(error.message);
|
});
|
||||||
});
|
};
|
||||||
};
|
|
||||||
|
|
||||||
// const [url, setUrl] = React.useState("");
|
|
||||||
// useEffect(() => {
|
|
||||||
// setUrl(document.location.origin);
|
|
||||||
// }, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="bg-background">
|
<Card className="bg-background">
|
||||||
@@ -62,13 +56,6 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
|||||||
<CardContent className="flex flex-col gap-4">
|
<CardContent className="flex flex-col gap-4">
|
||||||
{data?.isPreviewDeploymentsActive ? (
|
{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 ? (
|
{data?.previewDeployments?.length === 0 ? (
|
||||||
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
|
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
|
||||||
<RocketIcon className="size-8 text-muted-foreground" />
|
<RocketIcon className="size-8 text-muted-foreground" />
|
||||||
@@ -78,46 +65,18 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
{previewDeployments?.map((previewDeployment) => {
|
{previewDeployments?.map((previewDeployment) => (
|
||||||
const { deployments, domain } = previewDeployment;
|
<PreviewDeploymentCard
|
||||||
|
key={previewDeployment.previewDeploymentId}
|
||||||
return (
|
deploymentId={previewDeployment.previewDeploymentId}
|
||||||
<div className="flex justify-between gap-2 w-full">
|
serverId={data?.serverId || ""}
|
||||||
<div className="flex w-full flex-col gap-2">
|
onDeploymentDelete={handleDeletePreviewDeployment}
|
||||||
{deployments?.length === 0 ? (
|
isLoading={isLoading}
|
||||||
<div>
|
/>
|
||||||
<span className="text-sm text-muted-foreground">
|
))}
|
||||||
No deployments found
|
</div>
|
||||||
</span>
|
)}
|
||||||
</div>
|
</>
|
||||||
) : (
|
|
||||||
<PreviewDeploymentCard
|
|
||||||
key={previewDeployment?.previewDeploymentId || ""}
|
|
||||||
appName={previewDeployment.appName}
|
|
||||||
serverId={data?.serverId || ""}
|
|
||||||
onDeploymentDelete={handleDeletePreviewDeployment}
|
|
||||||
deploymentId={previewDeployment.previewDeploymentId}
|
|
||||||
deploymentUrl={`http://${domain?.host}`}
|
|
||||||
deployments={previewDeployment?.deployments || []}
|
|
||||||
domainId={domain?.domainId || ""}
|
|
||||||
domainHost={domain?.host || ""}
|
|
||||||
pullRequestTitle={
|
|
||||||
previewDeployment?.pullRequestTitle || ""
|
|
||||||
}
|
|
||||||
pullRequestUrl={previewDeployment?.pullRequestURL || ""}
|
|
||||||
status={previewDeployment.previewStatus}
|
|
||||||
branch={previewDeployment?.branch || ""}
|
|
||||||
date={previewDeployment?.createdAt || ""}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
|
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
|
||||||
<RocketIcon className="size-8 text-muted-foreground" />
|
<RocketIcon className="size-8 text-muted-foreground" />
|
||||||
|
|||||||
Reference in New Issue
Block a user