feat: enhance rollback functionality with UI updates and database schema changes

- Updated Tailwind configuration for responsive design.
- Modified the ShowDeployments component to include rollback settings and actions.
- Introduced a new "rollback" table in the database schema with foreign key relationships.
- Updated deployment and application schemas to support rollback features.
- Added rollback mutation to the API for initiating rollbacks.
This commit is contained in:
Mauricio Siu
2025-06-01 22:52:33 -06:00
parent a7d1fabd81
commit b14b9300c0
14 changed files with 192 additions and 78 deletions

View File

@@ -10,11 +10,20 @@ import {
CardTitle,
} from "@/components/ui/card";
import { type RouterOutputs, api } from "@/utils/api";
import { Clock, Loader2, RocketIcon } from "lucide-react";
import {
Clock,
Loader2,
RocketIcon,
Settings,
ArrowDownToLine,
} 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 { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
import { DialogAction } from "@/components/shared/dialog-action";
import { toast } from "sonner";
interface Props {
id: string;
@@ -57,6 +66,9 @@ export const ShowDeployments = ({
},
);
const { mutateAsync: rollback, isLoading: isRollingBack } =
api.rollback.rollback.useMutation();
const [url, setUrl] = React.useState("");
useEffect(() => {
setUrl(document.location.origin);
@@ -71,9 +83,18 @@ export const ShowDeployments = ({
See all the 10 last deployments for this {type}
</CardDescription>
</div>
{(type === "application" || type === "compose") && (
<CancelQueues id={id} type={type} />
)}
<div className="flex flex-row items-center gap-2">
{(type === "application" || type === "compose") && (
<CancelQueues id={id} type={type} />
)}
{type === "application" && (
<ShowRollbackSettings applicationId={id}>
<Button variant="outline">
Configure Rollbacks <Settings className="size-4" />
</Button>
</ShowRollbackSettings>
)}
</div>
</CardHeader>
<CardContent className="flex flex-col gap-4">
{refreshToken && (
@@ -154,13 +175,43 @@ export const ShowDeployments = ({
)}
</div>
<Button
onClick={() => {
setActiveLog(deployment);
}}
>
View
</Button>
<div className="flex flex-row items-center gap-2">
<Button
onClick={() => {
setActiveLog(deployment);
}}
>
View
</Button>
{deployment?.rollback && (
<DialogAction
title="Rollback to this deployment"
description="Are you sure you want to rollback to this deployment?"
type="default"
onClick={async () => {
await rollback({
rollbackId: deployment.rollback.rollbackId,
})
.then(() => {
toast.success("Rollback initiated successfully");
})
.catch(() => {
toast.error("Error initiating rollback");
});
}}
>
<Button
variant="secondary"
size="sm"
isLoading={isRollingBack}
>
<ArrowDownToLine className="size-4 text-primary group-hover:text-red-500" />
Rollback
</Button>
</DialogAction>
)}
</div>
</div>
</div>
))}

View File

@@ -0,0 +1,14 @@
CREATE TABLE "rollback" (
"rollbackId" text PRIMARY KEY NOT NULL,
"env" text,
"deploymentId" text NOT NULL,
"version" serial NOT NULL,
"image" text,
"createdAt" text NOT NULL
);
--> statement-breakpoint
ALTER TABLE "application" ADD COLUMN "rollbackActive" boolean DEFAULT false;--> statement-breakpoint
ALTER TABLE "application" ADD COLUMN "limitRollback" integer DEFAULT 5;--> statement-breakpoint
ALTER TABLE "deployment" ADD COLUMN "rollbackId" text;--> statement-breakpoint
ALTER TABLE "rollback" ADD CONSTRAINT "rollback_deploymentId_deployment_deploymentId_fk" FOREIGN KEY ("deploymentId") REFERENCES "public"."deployment"("deploymentId") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
ALTER TABLE "deployment" ADD CONSTRAINT "deployment_rollbackId_rollback_rollbackId_fk" FOREIGN KEY ("rollbackId") REFERENCES "public"."rollback"("rollbackId") ON DELETE cascade ON UPDATE no action;

View File

@@ -1,12 +0,0 @@
CREATE TABLE "rollback" (
"rollbackId" text PRIMARY KEY NOT NULL,
"env" text,
"applicationId" text NOT NULL,
"version" serial NOT NULL,
"image" text,
"createdAt" text NOT NULL
);
--> statement-breakpoint
ALTER TABLE "application" ADD COLUMN "rollbackActive" boolean DEFAULT false;--> statement-breakpoint
ALTER TABLE "application" ADD COLUMN "limitRollback" integer DEFAULT 5;--> statement-breakpoint
ALTER TABLE "rollback" ADD CONSTRAINT "rollback_applicationId_application_applicationId_fk" FOREIGN KEY ("applicationId") REFERENCES "public"."application"("applicationId") ON DELETE cascade ON UPDATE no action;

View File

@@ -1,5 +1,5 @@
{
"id": "f8bab14b-cdab-492b-9fe3-b9fc9e56239d",
"id": "7a6a6383-d13c-421b-b186-d49ced92153a",
"prevId": "76eb8fe3-21c0-4544-962c-1ae18e8e6730",
"version": "7",
"dialect": "postgresql",
@@ -2184,6 +2184,12 @@
"type": "text",
"primaryKey": false,
"notNull": false
},
"rollbackId": {
"name": "rollbackId",
"type": "text",
"primaryKey": false,
"notNull": false
}
},
"indexes": {},
@@ -2265,6 +2271,19 @@
],
"onDelete": "cascade",
"onUpdate": "no action"
},
"deployment_rollbackId_rollback_rollbackId_fk": {
"name": "deployment_rollbackId_rollback_rollbackId_fk",
"tableFrom": "deployment",
"tableTo": "rollback",
"columnsFrom": [
"rollbackId"
],
"columnsTo": [
"rollbackId"
],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
@@ -5537,8 +5556,8 @@
"primaryKey": false,
"notNull": false
},
"applicationId": {
"name": "applicationId",
"deploymentId": {
"name": "deploymentId",
"type": "text",
"primaryKey": false,
"notNull": true
@@ -5564,15 +5583,15 @@
},
"indexes": {},
"foreignKeys": {
"rollback_applicationId_application_applicationId_fk": {
"name": "rollback_applicationId_application_applicationId_fk",
"rollback_deploymentId_deployment_deploymentId_fk": {
"name": "rollback_deploymentId_deployment_deploymentId_fk",
"tableFrom": "rollback",
"tableTo": "application",
"tableTo": "deployment",
"columnsFrom": [
"applicationId"
"deploymentId"
],
"columnsTo": [
"applicationId"
"deploymentId"
],
"onDelete": "cascade",
"onUpdate": "no action"

View File

@@ -656,8 +656,8 @@
{
"idx": 93,
"version": "7",
"when": 1748828655755,
"tag": "0093_yielding_typhoid_mary",
"when": 1748835784658,
"tag": "0093_funny_leper_queen",
"breakpoints": true
}
]

View File

@@ -65,7 +65,11 @@ export const deploymentRouter = createTRPCRouter({
const deploymentsList = await db.query.deployments.findMany({
where: eq(deployments[`${input.type}Id`], input.id),
orderBy: desc(deployments.createdAt),
with: {
rollback: true,
},
});
return deploymentsList;
}),
});

View File

@@ -1,10 +1,10 @@
import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
import { apiFindOneRollback, rollbacks } from "@/server/db/schema";
import { apiFindOneRollback } from "@/server/db/schema";
import { removeRollbackById, rollback } from "@dokploy/server";
import { TRPCError } from "@trpc/server";
import { eq, desc } from "drizzle-orm";
import { db } from "@/server/db";
import { z } from "zod";
// import { eq, desc } from "drizzle-orm";
// import { db } from "@/server/db";
// import { z } from "zod";
export const rollbackRouter = createTRPCRouter({
delete: protectedProcedure
@@ -23,26 +23,26 @@ export const rollbackRouter = createTRPCRouter({
});
}
}),
all: protectedProcedure
.input(
z.object({
applicationId: z.string(),
}),
)
.query(async ({ input }) => {
try {
return await db.query.rollbacks.findMany({
where: eq(rollbacks.applicationId, input.applicationId),
orderBy: desc(rollbacks.createdAt),
});
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error input: Fetching rollbacks",
cause: error,
});
}
}),
// all: protectedProcedure
// .input(
// z.object({
// applicationId: z.string(),
// }),
// )
// .query(async ({ input }) => {
// try {
// return await db.query.rollbacks.findMany({
// where: eq(rollbacks.applicationId, input.applicationId),
// orderBy: desc(rollbacks.createdAt),
// });
// } catch (error) {
// throw new TRPCError({
// code: "BAD_REQUEST",
// message: "Error input: Fetching rollbacks",
// cause: error,
// });
// }
// }),
rollback: protectedProcedure
.input(apiFindOneRollback)
.mutation(async ({ input }) => {

View File

@@ -15,7 +15,7 @@ const config = {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
"2xl": "87.5rem",
},
},
extend: {