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

Refactor ShowBackups component to improve UI and enhance backup information display. Introduce database type icons for better visual representation and reorganize backup details layout for clarity. Update styles for hover effects and button sizes to enhance user experience.

Browse Source
This commit is contained in:
Mauricio Siu 2025-04-29 22:01:30 -06:00
parent 24f3be3c00
commit c4045795ee
1 changed files with 100 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
apps/dokploy/components/dashboard/database/backups/show-backups.tsx
View File

@ -23,6 +23,12 @@ import { RestoreBackup } from "./restore-backup";
import { AlertBlock } from "@/components/shared/alert-block"; import { AlertBlock } from "@/components/shared/alert-block";
import { HandleBackup } from "./handle-backup"; import { HandleBackup } from "./handle-backup";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import {
MariadbIcon,
MongodbIcon,
MysqlIcon,
PostgresqlIcon,
} from "@/components/icons/data-tools-icons";
interface Props { interface Props {
id: string; id: string;
@ -169,78 +175,109 @@ export const ShowBackups = ({
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{postgres?.backups.map((backup) => ( {postgres?.backups.map((backup) => (
<div key={backup.backupId}> <div key={backup.backupId}>
<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4"> <div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
<div <div className="flex flex-col w-full gap-4">
className={cn( <div className="flex items-center gap-3">
"grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8", {backup.backupType === "compose" && (
backup.backupType === "compose" && "xl:grid-cols-8", <div className="flex items-center justify-center size-10 rounded-lg">
)} {backup.databaseType === "postgres" && (
> <PostgresqlIcon className="size-7" />
{backup.backupType === "compose" && ( )}
<> {backup.databaseType === "mysql" && (
<div className="flex flex-col gap-1"> <MysqlIcon className="size-7" />
<span className="font-medium"> )}
Service Name {backup.databaseType === "mariadb" && (
</span> <MariadbIcon className="size-7" />
<span className="text-sm text-muted-foreground"> )}
{backup.serviceName} {backup.databaseType === "mongo" && (
<MongodbIcon className="size-7" />
)}
</div>
)}
<div className="flex flex-col gap-1">
{backup.backupType === "compose" && (
<div className="flex items-center gap-2">
<h3 className="font-medium">
{backup.serviceName}
</h3>
<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
{backup.databaseType}
</span>
</div>
)}
<div className="flex items-center gap-2">
<div
className={cn(
"size-1.5 rounded-full",
backup.enabled
? "bg-green-500"
: "bg-red-500",
)}
/>
<span className="text-xs text-muted-foreground">
{backup.enabled ? "Active" : "Inactive"}
</span> </span>
</div> </div>
</div>
</div>
<div className="flex flex-col gap-1"> <div className="flex flex-wrap gap-x-8 gap-y-2">
<span className="font-medium"> <div className="min-w-[200px]">
Database Type <span className="text-sm font-medium text-muted-foreground">
</span> Destination
<span className="text-sm text-muted-foreground"> </span>
{backup.databaseType} <p className="font-medium text-sm mt-0.5">
</span> {backup.destination.name}
</div> </p>
</> </div>
)}
<div className="flex flex-col gap-1"> <div className="min-w-[150px]">
<span className="font-medium">Destination</span> <span className="text-sm font-medium text-muted-foreground">
<span className="text-sm text-muted-foreground"> Database
{backup.destination.name} </span>
</span> <p className="font-medium text-sm mt-0.5">
</div> {backup.database}
<div className="flex flex-col gap-1"> </p>
<span className="font-medium">Database</span> </div>
<span className="text-sm text-muted-foreground">
{backup.database} <div className="min-w-[120px]">
</span> <span className="text-sm font-medium text-muted-foreground">
</div> Schedule
<div className="flex flex-col gap-1"> </span>
<span className="font-medium">Scheduled</span> <p className="font-medium text-sm mt-0.5">
<span className="text-sm text-muted-foreground"> {backup.schedule}
{backup.schedule} </p>
</span> </div>
</div>
<div className="flex flex-col gap-1"> <div className="min-w-[150px]">
<span className="font-medium">Prefix Storage</span> <span className="text-sm font-medium text-muted-foreground">
<span className="text-sm text-muted-foreground"> Prefix Storage
{backup.prefix} </span>
</span> <p className="font-medium text-sm mt-0.5">
</div> {backup.prefix}
<div className="flex flex-col gap-1"> </p>
<span className="font-medium">Enabled</span> </div>
<span className="text-sm text-muted-foreground">
{backup.enabled ? "Yes" : "No"} <div className="min-w-[100px]">
</span> <span className="text-sm font-medium text-muted-foreground">
</div> Keep Latest
<div className="flex flex-col gap-1"> </span>
<span className="font-medium">Keep Latest</span> <p className="font-medium text-sm mt-0.5">
<span className="text-sm text-muted-foreground"> {backup.keepLatestCount || "All"}
{backup.keepLatestCount || "All"} </p>
</span> </div>
</div> </div>
</div> </div>
<div className="flex flex-row gap-4">
<div className="flex flex-row md:flex-col gap-1.5">
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="icon"
className="size-8"
isLoading={ isLoading={
isManualBackup && isManualBackup &&
activeManualBackup === backup.backupId activeManualBackup === backup.backupId
@ -263,7 +300,7 @@ export const ShowBackups = ({
setActiveManualBackup(undefined); setActiveManualBackup(undefined);
}} }}
> >
<Play className="size-5 text-muted-foreground" /> <Play className="size-4 text-muted-foreground" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Run Manual Backup</TooltipContent> <TooltipContent>Run Manual Backup</TooltipContent>
@ -295,7 +332,7 @@ export const ShowBackups = ({
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="group hover:bg-red-500/10" className="group hover:bg-red-500/10 size-8"
isLoading={isRemoving} isLoading={isRemoving}
> >
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Trash2 className="size-4 text-primary group-hover:text-red-500" />