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

feat(icon): enhance icon management for services

Browse Source 
- Updated ShowIconSettings component to handle both application and compose service types.
- Added new icon column to the compose table in the database.
- Implemented fetching and updating of icons for services in the environment and application pages.
- Introduced fetchTemplateLogo function to retrieve logos for templates, improving icon handling for compose services.
This commit is contained in:
Mauricio Siu
2026-07-28 15:50:43 -06:00
parent deebf0f107
commit 6e1d020769
11 changed files with 8900 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dokploy/components/dashboard/application/icon/show-icon-settings.tsx
+23 -24
View File
@@ -1,5 +1,5 @@
import DOMPurify from "dompurify";
import { GlobeIcon, Pencil, Search, X } from "lucide-react";
import { CircuitBoard, GlobeIcon, Pencil, Search, X } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
@@ -16,7 +16,8 @@ import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
import { api } from "@/utils/api";
interface ShowIconSettingsProps {
applicationId: string;
serviceId: string;
serviceType: "application" | "compose";
icon?: string | null;
}
@@ -26,7 +27,8 @@ const svgToDataUrl = (icon: BundledIcon): string => {
};
export const ShowIconSettings = ({
applicationId,
serviceId,
serviceType,
icon,
}: ShowIconSettingsProps) => {
const [open, setOpen] = useState(false);
@@ -48,6 +50,17 @@ export const ShowIconSettings = ({
const utils = api.useUtils();
const { mutateAsync: updateApplication } =
api.application.update.useMutation();
const { mutateAsync: updateCompose } = api.compose.update.useMutation();
const updateIcon = async (newIcon: string | null) => {
if (serviceType === "compose") {
await updateCompose({ composeId: serviceId, icon: newIcon });
await utils.compose.one.invalidate({ composeId: serviceId });
} else {
await updateApplication({ applicationId: serviceId, icon: newIcon });
await utils.application.one.invalidate({ applicationId: serviceId });
}
};
useEffect(() => {
if (open) {
@@ -59,12 +72,8 @@ export const ShowIconSettings = ({
const handleIconSelect = async (selectedIcon: BundledIcon) => {
try {
const dataUrl = svgToDataUrl(selectedIcon);
await updateApplication({
applicationId,
icon: dataUrl,
});
await updateIcon(dataUrl);
toast.success("Icon saved successfully");
await utils.application.one.invalidate({ applicationId });
setOpen(false);
} catch (_error) {
toast.error("Error saving icon");
@@ -73,12 +82,8 @@ export const ShowIconSettings = ({
const handleRemoveIcon = async () => {
try {
await updateApplication({
applicationId,
icon: null,
});
await updateIcon(null);
toast.success("Icon removed");
await utils.application.one.invalidate({ applicationId });
} catch (_error) {
toast.error("Error removing icon");
}
@@ -130,12 +135,8 @@ export const ShowIconSettings = ({
return;
}
try {
await updateApplication({
applicationId,
icon: sanitizedDataUrl,
});
await updateIcon(sanitizedDataUrl);
toast.success("Icon saved!");
await utils.application.one.invalidate({ applicationId });
setOpen(false);
} catch (_error) {
toast.error("Error saving icon");
@@ -147,12 +148,8 @@ export const ShowIconSettings = ({
reader.onload = async (event) => {
const result = event.target?.result as string;
try {
await updateApplication({
applicationId,
icon: result,
});
await updateIcon(result);
toast.success("Icon saved!");
await utils.application.one.invalidate({ applicationId });
setOpen(false);
} catch (_error) {
toast.error("Error saving icon");
@@ -172,9 +169,11 @@ export const ShowIconSettings = ({
// biome-ignore lint/performance/noImgElement: icon is data URL or base64
<img
src={icon}
alt="Application icon"
alt="Service icon"
className="h-8 w-8 object-contain"
/>
) : serviceType === "compose" ? (
<CircuitBoard className="h-6 w-6 text-muted-foreground" />
) : (
<GlobeIcon className="h-6 w-6 text-muted-foreground" />
)}
apps/dokploy/drizzle/0176_slimy_marten_broadcloak.sql
+1
View File
@@ -0,0 +1 @@
ALTER TABLE "compose" ADD COLUMN "icon" text;
apps/dokploy/drizzle/meta/0176_snapshot.json
+8783
View File
File diff suppressed because it is too large Load Diff
apps/dokploy/drizzle/meta/_journal.json
+7
View File
@@ -1233,6 +1233,13 @@
"when": 1784965709630,
"tag": "0175_fantastic_peter_quill",
"breakpoints": true
},
{
"idx": 176,
"version": "7",
"when": 1785274179336,
"tag": "0176_slimy_marten_broadcloak",
"breakpoints": true
}
]
}
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
+12 -3
View File
@@ -259,6 +259,7 @@ export const extractServicesFromEnvironment = (
serverId: item.serverId,
serverName: item?.server?.name || null,
lastDeployDate,
icon: item.icon || null,
};
}) || [];
@@ -1701,9 +1702,17 @@ const EnvironmentPage = (
) : (
<GlobeIcon className="h-6 w-6" />
))}
{service.type === "compose" && (
<CircuitBoard className="h-6 w-6" />
)}
{service.type === "compose" &&
(service.icon ? (
// biome-ignore lint/performance/noImgElement: compose icon is data URL
<img
src={service.icon}
alt={service.name}
className="size-7 object-contain rounded-sm"
/>
) : (
<CircuitBoard className="h-6 w-6" />
))}
{service.type === "libsql" && (
<LibsqlIcon className="h-6 w-6" />
)}
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+2 -1
View File
@@ -127,7 +127,8 @@ const Service = (
<CardTitle className="text-xl flex flex-row gap-2 items-center">
<div className="relative flex flex-row gap-4 items-center">
<ShowIconSettings
applicationId={applicationId}
serviceId={applicationId}
serviceType="application"
icon={data?.icon}
/>
<div className="absolute -right-1 -top-2 z-10">
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+10 -6
View File
@@ -1,7 +1,7 @@
import { validateRequest } from "@dokploy/server/lib/auth";
import { createServerSideHelpers } from "@trpc/react-query/server";
import copy from "copy-to-clipboard";
import { CircuitBoard, HelpCircle, ServerOff } from "lucide-react";
import { HelpCircle, ServerOff } from "lucide-react";
import type {
GetServerSidePropsContext,
InferGetServerSidePropsType,
@@ -17,6 +17,7 @@ import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes
import { ShowDeployments } from "@/components/dashboard/application/deployments/show-deployments";
import { ShowDomains } from "@/components/dashboard/application/domains/show-domains";
import { ShowEnvironment } from "@/components/dashboard/application/environment/show-environment";
import { ShowIconSettings } from "@/components/dashboard/application/icon/show-icon-settings";
import { ShowPatches } from "@/components/dashboard/application/patches/show-patches";
import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
import { ShowVolumeBackups } from "@/components/dashboard/application/volume-backups/show-volume-backups";
@@ -113,13 +114,16 @@ const Service = (
<div className="flex flex-col gap-4">
<CardHeader className="flex flex-row justify-between items-center">
<div className="flex flex-col">
<CardTitle className="text-xl flex flex-row gap-2">
<div className="relative flex flex-row gap-4">
<div className="absolute -right-1 -top-2">
<CardTitle className="text-xl flex flex-row gap-2 items-center">
<div className="relative flex flex-row gap-4 items-center">
<ShowIconSettings
serviceId={composeId}
serviceType="compose"
icon={data?.icon}
/>
<div className="absolute -right-1 -top-2 z-10">
<StatusTooltip status={data?.composeStatus} />
</div>
<CircuitBoard className="h-6 w-6 text-muted-foreground" />
</div>
{data?.name}
</CardTitle>
apps/dokploy/server/api/routers/compose.ts
+6 -1
View File
@@ -43,6 +43,7 @@ import {
import {
type CompleteTemplate,
fetchTemplateFiles,
fetchTemplateLogo,
fetchTemplatesList,
} from "@dokploy/server/templates/github";
import { processTemplate } from "@dokploy/server/templates/processors";
@@ -601,7 +602,10 @@ export const composeRouter = createTRPCRouter({
}
}
const template = await fetchTemplateFiles(input.id, input.baseUrl);
const [template, templateLogo] = await Promise.all([
fetchTemplateFiles(input.id, input.baseUrl),
fetchTemplateLogo(input.id, input.baseUrl),
]);
let serverIp = "127.0.0.1";
@@ -639,6 +643,7 @@ export const composeRouter = createTRPCRouter({
name: input.id,
sourceType: "raw",
appName: appName,
icon: templateLogo,
});
await addNewService(ctx, compose.composeId);