refactor: update methods

Dokploy · Jan 5, 2025 · cfe36a9 · cfe36a9
1 parent 9847008
commit cfe36a9
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 21 deletions.
diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -124,8 +124,8 @@ export const ShowMonitoringCompose = ({
 					</div>
 					<ContainerMonitoring
 						appName={containerAppName || ""}
-						BASE_URL={url}
-						TOKEN={token}
+						baseUrl={url}
+						token={token}
 					/>
 				</CardContent>
 			</Card>

diff --git a/apps/dokploy/components/dashboard/monitoring/container/show.tsx b/apps/dokploy/components/dashboard/monitoring/container/show.tsx
@@ -113,7 +113,7 @@ export const ContainerMonitoring = ({ appName, baseUrl, token }: Props) => {
 		}, REFRESH_INTERVAL);
 
 		return () => clearInterval(interval);
-	}, [dataPoints, appName]);
+	}, [dataPoints, appName, token]);
 
 	if (isLoading) {
 		return (

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
@@ -79,6 +79,7 @@ const Service = (
 	);
 
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -242,16 +243,15 @@ const Service = (
 							<ShowEnvironment applicationId={applicationId} />
 						</div>
 					</TabsContent>
-					{!data?.serverId && (
-						<TabsContent value="monitoring">
-							<div className="flex flex-col gap-4 pt-2.5">
-								<ContainerMonitoring
-									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
-								/>
-							</div>
-						</TabsContent>
-					)}
+					<TabsContent value="monitoring">
+						<div className="flex flex-col gap-4 pt-2.5">
+							<ContainerMonitoring
+								appName={data?.appName || ""}
+								baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+								token={data?.server?.metricsToken || token || ""}
+							/>
+						</div>
+					</TabsContent>
 
 					<TabsContent value="logs">
 						<div className="flex flex-col gap-4  pt-2.5">

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
@@ -72,6 +72,7 @@ const Service = (
 	);
 
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -243,9 +244,9 @@ const Service = (
 						<div className="flex flex-col gap-4 pt-2.5">
 							<ShowMonitoringCompose
 								serverId={data?.serverId || ""}
-								url={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:3001"}`}
+								url={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
 								appName={data?.appName || ""}
-								token={data?.server?.metricsToken || ""}
+								token={data?.server?.metricsToken || token || ""}
 								appType={data?.composeType || "docker-compose"}
 							/>
 						</div>

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx
@@ -52,6 +52,7 @@ const Mariadb = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mariadb.one.useQuery({ mariadbId });
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -216,7 +217,8 @@ const Mariadb = (
 							<div className="flex flex-col gap-4 pt-2.5">
 								<ContainerMonitoring
 									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
+									baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+									token={data?.server?.metricsToken || token || ""}
 								/>
 							</div>
 						</TabsContent>

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx
@@ -53,6 +53,7 @@ const Mongo = (
 	const { data } = api.mongo.one.useQuery({ mongoId });
 
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -218,7 +219,8 @@ const Mongo = (
 							<div className="flex flex-col gap-4 pt-2.5">
 								<ContainerMonitoring
 									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
+									baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+									token={data?.server?.metricsToken || token || ""}
 								/>
 								{/* <DockerMonitoring appName={data?.appName || ""} /> */}
 							</div>

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx
@@ -52,6 +52,7 @@ const MySql = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mysql.one.useQuery({ mysqlId });
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -217,7 +218,8 @@ const MySql = (
 							<div className="flex flex-col gap-4 pt-2.5">
 								<ContainerMonitoring
 									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
+									baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+									token={data?.server?.metricsToken || token || ""}
 								/>
 								{/* <DockerMonitoring appName={data?.appName || ""} /> */}
 							</div>

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx
@@ -52,6 +52,7 @@ const Postgresql = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.postgres.one.useQuery({ postgresId });
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -218,7 +219,8 @@ const Postgresql = (
 							<div className="flex flex-col gap-4 pt-2.5">
 								<ContainerMonitoring
 									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
+									baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+									token={data?.server?.metricsToken || token || ""}
 								/>
 							</div>
 						</TabsContent>

diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx
@@ -52,6 +52,7 @@ const Redis = (
 	const { data } = api.redis.one.useQuery({ redisId });
 
 	const { data: auth } = api.auth.get.useQuery();
+	const { data: token } = api.admin.getMetricsToken.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: auth?.id || "",
@@ -216,7 +217,8 @@ const Redis = (
 							<div className="flex flex-col gap-4 pt-2.5">
 								<ContainerMonitoring
 									appName={data?.appName || ""}
-									BASE_URL={"http://localhost:3001"}
+									baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.defaultPortMetrics}` : "http://localhost:4500"}`}
+									token={data?.server?.metricsToken || token || ""}
 								/>
 								{/* <DockerMonitoring appName={data?.appName || ""} /> */}
 							</div>

diff --git a/apps/dokploy/server/api/routers/admin.ts b/apps/dokploy/server/api/routers/admin.ts
@@ -22,7 +22,12 @@ import {
 } from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
-import { adminProcedure, createTRPCRouter, publicProcedure } from "../trpc";
+import {
+	adminProcedure,
+	createTRPCRouter,
+	protectedProcedure,
+	publicProcedure,
+} from "../trpc";
 
 export const adminRouter = createTRPCRouter({
 	one: adminProcedure.query(async ({ ctx }) => {
@@ -146,4 +151,8 @@ export const adminRouter = createTRPCRouter({
 				throw error;
 			}
 		}),
+	getMetricsToken: protectedProcedure.query(async ({ ctx }) => {
+		const admin = await findAdminById(ctx.user.adminId);
+		return admin.metricsToken;
+	}),
 });