Update drizzle-zod dependency and enhance deployment tracking features

- Downgraded the drizzle-zod package from version 0.7.1 to 0.5.1 for compatibility.
- Added new fields `startedAt` and `finishedAt` to the deployment schema to track deployment timing.
- Enhanced deployment creation logic to set `startedAt` and `finishedAt` timestamps during deployment processes.
- Improved the ShowDeployments and ShowSchedulesLogs components to display deployment duration using a new Badge component.
- Refactored deployment removal logic to streamline the process of cleaning up old deployments.
This commit is contained in:
Mauricio Siu
2025-05-03 00:12:49 -06:00
parent 43ab1aa7b8
commit a5fb5532fd
12 changed files with 5763 additions and 159 deletions

View File

@@ -9,12 +9,13 @@ import {
CardTitle,
} from "@/components/ui/card";
import { type RouterOutputs, api } from "@/utils/api";
import { RocketIcon } from "lucide-react";
import { RocketIcon, Clock } from "lucide-react";
import React, { useEffect, useState } from "react";
import { CancelQueues } from "./cancel-queues";
import { RefreshToken } from "./refresh-token";
import { ShowDeployment } from "./show-deployment";
import { Badge } from "@/components/ui/badge";
import { formatDuration } from "../schedules/show-schedules-logs";
interface Props {
applicationId: string;
}
@@ -96,8 +97,23 @@ export const ShowDeployments = ({ applicationId }: Props) => {
)}
</div>
<div className="flex flex-col items-end gap-2">
<div className="text-sm capitalize text-muted-foreground">
<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
<DateTooltip date={deployment.createdAt} />
{deployment.startedAt && deployment.finishedAt && (
<Badge
variant="outline"
className="text-[10px] gap-1 flex items-center"
>
<Clock className="size-3" />
{formatDuration(
Math.floor(
(new Date(deployment.finishedAt).getTime() -
new Date(deployment.startedAt).getTime()) /
1000,
),
)}
</Badge>
)}
</div>
<Button

View File

@@ -13,7 +13,8 @@ import {
import type { RouterOutputs } from "@/utils/api";
import { useState } from "react";
import { ShowDeployment } from "../deployments/show-deployment";
import { ClipboardList } from "lucide-react";
import { ClipboardList, Clock } from "lucide-react";
import { Badge } from "@/components/ui/badge";
interface Props {
deployments: RouterOutputs["deployment"]["all"];
@@ -21,6 +22,13 @@ interface Props {
children?: React.ReactNode;
}
export const formatDuration = (seconds: number) => {
if (seconds < 60) return `${seconds}s`;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}m ${remainingSeconds}s`;
};
export const ShowSchedulesLogs = ({
deployments,
serverId,
@@ -73,8 +81,23 @@ export const ShowSchedulesLogs = ({
)}
</div>
<div className="flex flex-col items-end gap-2">
<div className="text-sm capitalize text-muted-foreground">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<DateTooltip date={deployment.createdAt} />
{deployment.startedAt && deployment.finishedAt && (
<Badge
variant="outline"
className="text-[10px] gap-1 flex items-center"
>
<Clock className="size-3" />
{formatDuration(
Math.floor(
(new Date(deployment.finishedAt).getTime() -
new Date(deployment.startedAt).getTime()) /
1000,
),
)}
</Badge>
)}
</div>
<Button

View File

@@ -9,12 +9,13 @@ import {
CardTitle,
} from "@/components/ui/card";
import { type RouterOutputs, api } from "@/utils/api";
import { RocketIcon } from "lucide-react";
import { RocketIcon, Clock } from "lucide-react";
import React, { useEffect, useState } from "react";
import { CancelQueuesCompose } from "./cancel-queues-compose";
import { RefreshTokenCompose } from "./refresh-token-compose";
import { ShowDeploymentCompose } from "./show-deployment-compose";
import { Badge } from "@/components/ui/badge";
import { formatDuration } from "@/components/dashboard/application/schedules/show-schedules-logs";
interface Props {
composeId: string;
}
@@ -96,8 +97,23 @@ export const ShowDeploymentsCompose = ({ composeId }: Props) => {
)}
</div>
<div className="flex flex-col items-end gap-2">
<div className="text-sm capitalize text-muted-foreground">
<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
<DateTooltip date={deployment.createdAt} />
{deployment.startedAt && deployment.finishedAt && (
<Badge
variant="outline"
className="text-[10px] gap-1 flex items-center"
>
<Clock className="size-3" />
{formatDuration(
Math.floor(
(new Date(deployment.finishedAt).getTime() -
new Date(deployment.startedAt).getTime()) /
1000,
),
)}
</Badge>
)}
</div>
<Button

View File

@@ -0,0 +1,2 @@
ALTER TABLE "deployment" ADD COLUMN "startedAt" text;--> statement-breakpoint
ALTER TABLE "deployment" ADD COLUMN "finishedAt" text;

File diff suppressed because it is too large Load Diff

View File

@@ -673,6 +673,13 @@
"when": 1746232483345,
"tag": "0095_friendly_cobalt_man",
"breakpoints": true
},
{
"idx": 96,
"version": "7",
"when": 1746252086587,
"tag": "0096_special_may_parker",
"breakpoints": true
}
]
}

View File

@@ -104,7 +104,7 @@
"dockerode": "4.0.2",
"dotenv": "16.4.5",
"drizzle-orm": "^0.39.1",
"drizzle-zod": "0.7.1",
"drizzle-zod": "0.5.1",
"fancy-ansi": "^0.1.3",
"hi-base32": "^0.5.1",
"i18next": "^23.16.4",