andwati/dokploy
1
0
Fork 0
mirror of https://github.com/andwati/dokploy.git synced 2026-11-13 07:25:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2834 from Harikrishnan1367709/Delete-Icon-Overflows-Container-for-Long-Scheduled-Task-Commands-#2832

Browse Source 
fix(schedules): Fix UI overflow for long scheduled task commands -#2832
This commit is contained in:
Mauricio Siu
2025-10-24 23:17:44 -06:00
committed by GitHub
parent 6c3f72858b 9925470663
commit 24df8e79fa
1 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
+11 -19
View File
@@ -48,10 +48,8 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
); );
const utils = api.useUtils(); const utils = api.useUtils();
const { mutateAsync: deleteSchedule, isLoading: isDeleting } = const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
api.schedule.delete.useMutation(); api.schedule.delete.useMutation();
const { mutateAsync: runManually, isLoading } = const { mutateAsync: runManually, isLoading } =
api.schedule.runManually.useMutation(); api.schedule.runManually.useMutation();
@@ -67,7 +65,6 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
Schedule tasks to run automatically at specified intervals. Schedule tasks to run automatically at specified intervals.
</CardDescription> </CardDescription>
</div> </div>
{schedules && schedules.length > 0 && ( {schedules && schedules.length > 0 && (
<HandleSchedules id={id} scheduleType={scheduleType} /> <HandleSchedules id={id} scheduleType={scheduleType} />
)} )}
@@ -75,7 +72,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
</CardHeader> </CardHeader>
<CardContent className="px-0"> <CardContent className="px-0">
{isLoadingSchedules ? ( {isLoadingSchedules ? (
<div className="flex gap-4 w-full items-center justify-center text-center mx-auto min-h-[45vh]"> <div className="flex gap-4 w-full items-center justify-center text-center mx-auto min-h-[45vh]">
<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" /> <Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
<span className="text-sm text-muted-foreground/70"> <span className="text-sm text-muted-foreground/70">
Loading scheduled tasks... Loading scheduled tasks...
@@ -91,13 +88,13 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
return ( return (
<div <div
key={schedule.scheduleId} key={schedule.scheduleId}
className="flex items-center flex-wrap sm:flex-nowrap gap-y-2 justify-between rounded-lg border p-3 transition-colors bg-muted/50" className="flex flex-col sm:flex-row sm:items-center flex-wrap sm:flex-nowrap gap-y-2 justify-between rounded-lg border p-3 transition-colors bg-muted/50 w-full"
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3 w-full sm:w-auto">
<div className="flex flex-shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5"> <div className="flex flex-shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
<Clock className="size-4 text-primary/70" /> <Clock className="size-4 text-primary/70" />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5 w-full sm:w-auto">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<h3 className="text-sm font-medium leading-none [overflow-wrap:anywhere] line-clamp-3"> <h3 className="text-sm font-medium leading-none [overflow-wrap:anywhere] line-clamp-3">
{schedule.name} {schedule.name}
@@ -132,27 +129,25 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
)} )}
</div> </div>
{schedule.command && ( {schedule.command && (
<div className="flex items-center gap-2"> <div className="flex items-start gap-2 max-w-full">
<Terminal className="size-3.5 text-muted-foreground/70" /> <Terminal className="size-3.5 text-muted-foreground/70 flex-shrink-0 mt-0.5" />
<code className="font-mono text-[10px] text-muted-foreground/70"> <code className="font-mono text-[10px] text-muted-foreground/70 break-all max-w-[calc(100%-20px)]">
{schedule.command} {schedule.command}
</code> </code>
</div> </div>
)} )}
</div> </div>
</div> </div>
<div className="flex items-center gap-0.5 md:gap-1.5 mt-2 sm:mt-0 sm:ml-3">
<div className="flex items-center gap-0.5 md:gap-1.5">
<ShowDeploymentsModal <ShowDeploymentsModal
id={schedule.scheduleId} id={schedule.scheduleId}
type="schedule" type="schedule"
serverId={serverId || undefined} serverId={serverId || undefined}
> >
<Button variant="ghost" size="icon"> <Button variant="ghost" size="icon">
<ClipboardList className="size-4 transition-colors " /> <ClipboardList className="size-4 transition-colors" />
</Button> </Button>
</ShowDeploymentsModal> </ShowDeploymentsModal>
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -163,7 +158,6 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
isLoading={isLoading} isLoading={isLoading}
onClick={async () => { onClick={async () => {
toast.success("Schedule run successfully"); toast.success("Schedule run successfully");
await runManually({ await runManually({
scheduleId: schedule.scheduleId, scheduleId: schedule.scheduleId,
}) })
@@ -178,19 +172,17 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
}); });
}} }}
> >
<Play className="size-4 transition-colors" /> <Play className="size-4 transition-colors" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Run Manual Schedule</TooltipContent> <TooltipContent>Run Manual Schedule</TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<HandleSchedules <HandleSchedules
scheduleId={schedule.scheduleId} scheduleId={schedule.scheduleId}
id={id} id={id}
scheduleType={scheduleType} scheduleType={scheduleType}
/> />
<DialogAction <DialogAction
title="Delete Schedule" title="Delete Schedule"
description="Are you sure you want to delete this schedule?" description="Are you sure you want to delete this schedule?"
@@ -214,7 +206,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="group hover:bg-red-500/10 " className="group hover:bg-red-500/10"
isLoading={isDeleting} isLoading={isDeleting}
> >
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Trash2 className="size-4 text-primary group-hover:text-red-500" />