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, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { type RouterOutputs, api } from "@/utils/api"; 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 React, { useEffect, useState } from "react";
import { CancelQueues } from "./cancel-queues"; import { CancelQueues } from "./cancel-queues";
import { RefreshToken } from "./refresh-token"; import { RefreshToken } from "./refresh-token";
import { ShowDeployment } from "./show-deployment"; 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 { interface Props {
id: string; id: string;
@@ -57,6 +66,9 @@ export const ShowDeployments = ({
}, },
); );
const { mutateAsync: rollback, isLoading: isRollingBack } =
api.rollback.rollback.useMutation();
const [url, setUrl] = React.useState(""); const [url, setUrl] = React.useState("");
useEffect(() => { useEffect(() => {
setUrl(document.location.origin); setUrl(document.location.origin);
@@ -71,9 +83,18 @@ export const ShowDeployments = ({
See all the 10 last deployments for this {type} See all the 10 last deployments for this {type}
</CardDescription> </CardDescription>
</div> </div>
{(type === "application" || type === "compose") && ( <div className="flex flex-row items-center gap-2">
<CancelQueues id={id} type={type} /> {(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> </CardHeader>
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
{refreshToken && ( {refreshToken && (
@@ -154,13 +175,43 @@ export const ShowDeployments = ({
)} )}
</div> </div>
<Button <div className="flex flex-row items-center gap-2">
onClick={() => { <Button
setActiveLog(deployment); onClick={() => {
}} setActiveLog(deployment);
> }}
View >
</Button> 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>
</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", "prevId": "76eb8fe3-21c0-4544-962c-1ae18e8e6730",
"version": "7", "version": "7",
"dialect": "postgresql", "dialect": "postgresql",
@@ -2184,6 +2184,12 @@
"type": "text", "type": "text",
"primaryKey": false, "primaryKey": false,
"notNull": false "notNull": false
},
"rollbackId": {
"name": "rollbackId",
"type": "text",
"primaryKey": false,
"notNull": false
} }
}, },
"indexes": {}, "indexes": {},
@@ -2265,6 +2271,19 @@
], ],
"onDelete": "cascade", "onDelete": "cascade",
"onUpdate": "no action" "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": {}, "compositePrimaryKeys": {},
@@ -5537,8 +5556,8 @@
"primaryKey": false, "primaryKey": false,
"notNull": false "notNull": false
}, },
"applicationId": { "deploymentId": {
"name": "applicationId", "name": "deploymentId",
"type": "text", "type": "text",
"primaryKey": false, "primaryKey": false,
"notNull": true "notNull": true
@@ -5564,15 +5583,15 @@
}, },
"indexes": {}, "indexes": {},
"foreignKeys": { "foreignKeys": {
"rollback_applicationId_application_applicationId_fk": { "rollback_deploymentId_deployment_deploymentId_fk": {
"name": "rollback_applicationId_application_applicationId_fk", "name": "rollback_deploymentId_deployment_deploymentId_fk",
"tableFrom": "rollback", "tableFrom": "rollback",
"tableTo": "application", "tableTo": "deployment",
"columnsFrom": [ "columnsFrom": [
"applicationId" "deploymentId"
], ],
"columnsTo": [ "columnsTo": [
"applicationId" "deploymentId"
], ],
"onDelete": "cascade", "onDelete": "cascade",
"onUpdate": "no action" "onUpdate": "no action"

View File

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

View File

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

View File

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

View File

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

View File

@@ -27,7 +27,6 @@ import { server } from "./server";
import { applicationStatus, certificateType, triggerType } from "./shared"; import { applicationStatus, certificateType, triggerType } from "./shared";
import { sshKeys } from "./ssh-key"; import { sshKeys } from "./ssh-key";
import { generateAppName } from "./utils"; import { generateAppName } from "./utils";
import { rollbacks } from "./rollbacks";
export const sourceType = pgEnum("sourceType", [ export const sourceType = pgEnum("sourceType", [
"docker", "docker",
"git", "git",
@@ -277,7 +276,6 @@ export const applicationsRelations = relations(
references: [server.serverId], references: [server.serverId],
}), }),
previewDeployments: many(previewDeployments), previewDeployments: many(previewDeployments),
rollbacks: many(rollbacks),
}), }),
); );

View File

@@ -15,6 +15,7 @@ import { compose } from "./compose";
import { previewDeployments } from "./preview-deployments"; import { previewDeployments } from "./preview-deployments";
import { schedules } from "./schedule"; import { schedules } from "./schedule";
import { server } from "./server"; import { server } from "./server";
import { rollbacks } from "./rollbacks";
export const deploymentStatus = pgEnum("deploymentStatus", [ export const deploymentStatus = pgEnum("deploymentStatus", [
"running", "running",
"done", "done",
@@ -58,6 +59,10 @@ export const deployments = pgTable("deployment", {
backupId: text("backupId").references((): AnyPgColumn => backups.backupId, { backupId: text("backupId").references((): AnyPgColumn => backups.backupId, {
onDelete: "cascade", onDelete: "cascade",
}), }),
rollbackId: text("rollbackId").references(
(): AnyPgColumn => rollbacks.rollbackId,
{ onDelete: "cascade" },
),
}); });
export const deploymentsRelations = relations(deployments, ({ one }) => ({ export const deploymentsRelations = relations(deployments, ({ one }) => ({
@@ -85,6 +90,10 @@ export const deploymentsRelations = relations(deployments, ({ one }) => ({
fields: [deployments.backupId], fields: [deployments.backupId],
references: [backups.backupId], references: [backups.backupId],
}), }),
rollback: one(rollbacks, {
fields: [deployments.deploymentId],
references: [rollbacks.deploymentId],
}),
})); }));
const schema = createInsertSchema(deployments, { const schema = createInsertSchema(deployments, {

View File

@@ -3,7 +3,7 @@ import { pgTable, serial, text } from "drizzle-orm/pg-core";
import { createInsertSchema } from "drizzle-zod"; import { createInsertSchema } from "drizzle-zod";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
import { z } from "zod"; import { z } from "zod";
import { applications } from "./application"; import { deployments } from "./deployment";
export const rollbacks = pgTable("rollback", { export const rollbacks = pgTable("rollback", {
rollbackId: text("rollbackId") rollbackId: text("rollbackId")
@@ -11,9 +11,9 @@ export const rollbacks = pgTable("rollback", {
.primaryKey() .primaryKey()
.$defaultFn(() => nanoid()), .$defaultFn(() => nanoid()),
env: text("env"), env: text("env"),
applicationId: text("applicationId") deploymentId: text("deploymentId")
.notNull() .notNull()
.references(() => applications.applicationId, { .references(() => deployments.deploymentId, {
onDelete: "cascade", onDelete: "cascade",
}), }),
version: serial(), version: serial(),
@@ -26,9 +26,9 @@ export const rollbacks = pgTable("rollback", {
export type Rollback = typeof rollbacks.$inferSelect; export type Rollback = typeof rollbacks.$inferSelect;
export const rollbacksRelations = relations(rollbacks, ({ one }) => ({ export const rollbacksRelations = relations(rollbacks, ({ one }) => ({
application: one(applications, { deployment: one(deployments, {
fields: [rollbacks.applicationId], fields: [rollbacks.deploymentId],
references: [applications.applicationId], references: [deployments.deploymentId],
}), }),
})); }));

View File

@@ -224,12 +224,10 @@ export const deployApplication = async ({
application.project.env, application.project.env,
); );
console.log(resolveEnvs);
await createRollback({ await createRollback({
appName: application.appName, appName: application.appName,
env: resolveEnvs.join("\n"), env: resolveEnvs.join("\n"),
applicationId: applicationId, deploymentId: deployment.deploymentId,
}); });
} }

View File

@@ -34,20 +34,34 @@ import { findScheduleById } from "./schedule";
export type Deployment = typeof deployments.$inferSelect; export type Deployment = typeof deployments.$inferSelect;
export const findDeploymentById = async (applicationId: string) => { export const findDeploymentById = async (deploymentId: string) => {
const application = await db.query.deployments.findFirst({ const deployment = await db.query.deployments.findFirst({
where: eq(deployments.applicationId, applicationId), where: eq(deployments.deploymentId, deploymentId),
with: { with: {
application: true, application: true,
}, },
}); });
if (!application) { if (!deployment) {
throw new TRPCError({ throw new TRPCError({
code: "NOT_FOUND", code: "NOT_FOUND",
message: "Deployment not found", message: "Deployment not found",
}); });
} }
return application; return deployment;
};
export const findDeploymentByApplicationId = async (applicationId: string) => {
const deployment = await db.query.deployments.findFirst({
where: eq(deployments.applicationId, applicationId),
});
if (!deployment) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Deployment not found",
});
}
return deployment;
}; };
export const createDeployment = async ( export const createDeployment = async (

View File

@@ -7,6 +7,7 @@ import { getRemoteDocker } from "../utils/servers/remote-docker";
import type { ApplicationNested } from "../utils/builders"; import type { ApplicationNested } from "../utils/builders";
import { execAsync, execAsyncRemote } from "../utils/process/execAsync"; import { execAsync, execAsyncRemote } from "../utils/process/execAsync";
import type { CreateServiceOptions } from "dockerode"; import type { CreateServiceOptions } from "dockerode";
import { findDeploymentById } from "./deployment";
export const createRollback = async ( export const createRollback = async (
input: z.infer<typeof createRollbackSchema>, input: z.infer<typeof createRollbackSchema>,
@@ -31,7 +32,13 @@ export const createRollback = async (
}) })
.where(eq(rollbacks.rollbackId, rollback.rollbackId)); .where(eq(rollbacks.rollbackId, rollback.rollbackId));
const application = await findApplicationById(input.applicationId); const deployment = await findDeploymentById(rollback.deploymentId);
if (!deployment?.applicationId) {
throw new Error("Deployment not found");
}
const application = await findApplicationById(deployment.applicationId);
await createRollbackImage(application, tagImage); await createRollbackImage(application, tagImage);
@@ -86,7 +93,13 @@ export const removeRollbackById = async (rollbackId: string) => {
if (result?.image) { if (result?.image) {
try { try {
const application = await findApplicationById(result.applicationId); const deployment = await findDeploymentById(result.deploymentId);
if (!deployment?.applicationId) {
throw new Error("Deployment not found");
}
const application = await findApplicationById(deployment.applicationId);
await deleteRollbackImage(result.image, application.serverId); await deleteRollbackImage(result.image, application.serverId);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@@ -99,7 +112,13 @@ export const removeRollbackById = async (rollbackId: string) => {
export const rollback = async (rollbackId: string) => { export const rollback = async (rollbackId: string) => {
const result = await findRollbackById(rollbackId); const result = await findRollbackById(rollbackId);
const application = await findApplicationById(result.applicationId); const deployment = await findDeploymentById(result.deploymentId);
if (!deployment?.applicationId) {
throw new Error("Deployment not found");
}
const application = await findApplicationById(deployment.applicationId);
await rollbackApplication( await rollbackApplication(
application.appName, application.appName,
@@ -122,7 +141,7 @@ const rollbackApplication = async (
TaskTemplate: { TaskTemplate: {
ContainerSpec: { ContainerSpec: {
Image: image, Image: image,
Env: env.split("\n"), // Env: env.split("\n"),
}, },
}, },
}; };