Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-19 22:25:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update routing in dashboard components to include environment context; add new service pages for MongoDB, MySQL, PostgreSQL, Redis, and MariaDB

Browse Source
This commit is contained in:
Mauricio Siu
2025-09-01 20:12:14 -06:00
parent d57a0cf439
commit ecf7ae924f
12 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dokploy/components/dashboard/application/general/show.tsx
View File

@@ -69,7 +69,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
toast.success("Application deployed successfully");
refetch();
router.push(
`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/application/${applicationId}?tab=deployments`,
);
})
.catch(() => {

2
apps/dokploy/components/dashboard/compose/general/actions.tsx
View File

@@ -47,7 +47,7 @@ export const ComposeActions = ({ composeId }: Props) => {
toast.success("Compose deployed successfully");
refetch();
router.push(
`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/compose/${composeId}?tab=deployments`,
);
})
.catch(() => {

2
apps/dokploy/components/dashboard/search-command.tsx
View File

@@ -87,7 +87,7 @@ export const SearchCommand = () => {
key={application.id}
onSelect={() => {
router.push(
`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`,
`/dashboard/project/${project.projectId}/environment/${application.environmentId}/services/${application.type}/${application.id}`,
);
setOpen(false);
}}

2
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
View File

@@ -1251,7 +1251,7 @@ const EnvironmentPage = (
key={service.id}
onClick={() => {
router.push(
`/dashboard/project/${projectId}/services/${service.type}/${service.id}`,
`/dashboard/project/${projectId}/environment/${environmentId}/services/${service.type}/${service.id}`,
);
}}
className="flex flex-col group relative cursor-pointer bg-transparent transition-colors hover:bg-border"

12
apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
View File

@@ -71,7 +71,7 @@ const Service = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { applicationId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setTab] = useState<TabState>(activeTab);
useEffect(() => {
@@ -97,18 +97,18 @@ const Service = (
list={[
{ name: "Projects", href: "/dashboard/projects" },
{
name: data?.project?.name || "",
name: data?.environment.project.name || "",
href: `/dashboard/project/${projectId}`,
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/application/${applicationId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/application/${applicationId}`,
},
]}
/>
<Head>
<title>
Application: {data?.name} - {data?.project.name} | Dokploy
Application: {data?.name} - {data?.environment.project.name} | Dokploy
</title>
</Head>
<div className="w-full">
@@ -215,7 +215,7 @@ const Service = (
className="w-full"
onValueChange={(e) => {
setTab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/application/${applicationId}?tab=${e}`;
router.push(newPath);
}}
>
@@ -379,6 +379,7 @@ export async function getServerSideProps(
ctx: GetServerSidePropsContext<{
applicationId: string;
activeTab: TabState;
environmentId: string;
}>,
) {
const { query, params, req, res } = ctx;
@@ -420,6 +421,7 @@ export async function getServerSideProps(
trpcState: helpers.dehydrate(),
applicationId: params?.applicationId,
activeTab: (activeTab || "general") as TabState,
environmentId: params?.environmentId,
},
};
} catch {

12
apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
View File

@@ -67,7 +67,7 @@ const Service = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { composeId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setTab] = useState<TabState>(activeTab);
useEffect(() => {
@@ -88,18 +88,18 @@ const Service = (
list={[
{ name: "Projects", href: "/dashboard/projects" },
{
name: data?.project?.name || "",
name: data?.environment?.project?.name || "",
href: `/dashboard/project/${projectId}`,
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/compose/${composeId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/compose/${composeId}`,
},
]}
/>
<Head>
<title>
Compose: {data?.name} - {data?.project.name} | Dokploy
Compose: {data?.name} - {data?.environment?.project?.name} | Dokploy
</title>
</Head>
<div className="w-full">
@@ -208,7 +208,7 @@ const Service = (
className="w-full"
onValueChange={(e) => {
setTab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/compose/${composeId}?tab=${e}`;
router.push(newPath);
}}
>
@@ -375,6 +375,7 @@ export async function getServerSideProps(
ctx: GetServerSidePropsContext<{
composeId: string;
activeTab: TabState;
environmentId: string;
}>,
) {
const { query, params, req, res } = ctx;
@@ -414,6 +415,7 @@ export async function getServerSideProps(
trpcState: helpers.dehydrate(),
composeId: params?.composeId,
activeTab: (activeTab || "general") as TabState,
environmentId: params?.environmentId,
},
};
} catch {

9
apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
View File

@@ -55,7 +55,7 @@ const Mariadb = (
const { mariadbId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab);
const { data } = api.mariadb.one.useQuery({ mariadbId });
const { data: auth } = api.user.get.useQuery();
@@ -74,7 +74,7 @@ const Mariadb = (
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/mariadb/${mariadbId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/mariadb/${mariadbId}`,
},
]}
/>
@@ -179,7 +179,7 @@ const Mariadb = (
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mariadb/${mariadbId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/mariadb/${mariadbId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
@@ -300,7 +300,7 @@ Mariadb.getLayout = (page: ReactElement) => {
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ mariadbId: string; activeTab: TabState }>,
ctx: GetServerSidePropsContext<{ mariadbId: string; activeTab: TabState; environmentId: string }>,
) {
const { query, params, req, res } = ctx;
const activeTab = query.tab;
@@ -338,6 +338,7 @@ export async function getServerSideProps(
trpcState: helpers.dehydrate(),
mariadbId: params?.mariadbId,
activeTab: (activeTab || "general") as TabState,
environmentId: params?.environmentId,
},
};
} catch {

9
apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
View File

@@ -54,7 +54,7 @@ const Mongo = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { mongoId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab);
const { data } = api.mongo.one.useQuery({ mongoId });
@@ -74,7 +74,7 @@ const Mongo = (
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/mongo/${mongoId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/mongo/${mongoId}`,
},
]}
/>
@@ -180,7 +180,7 @@ const Mongo = (
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mongo/${mongoId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/mongo/${mongoId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
@@ -302,7 +302,7 @@ Mongo.getLayout = (page: ReactElement) => {
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ mongoId: string; activeTab: TabState }>,
ctx: GetServerSidePropsContext<{ mongoId: string; activeTab: TabState; environmentId: string }>,
) {
const { query, params, req, res } = ctx;
const activeTab = query.tab;
@@ -340,6 +340,7 @@ export async function getServerSideProps(
trpcState: helpers.dehydrate(),
mongoId: params?.mongoId,
activeTab: (activeTab || "general") as TabState,
environmentId: params?.environmentId,
},
};
} catch {

8
apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
View File

@@ -54,7 +54,7 @@ const MySql = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { mysqlId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab);
const { data } = api.mysql.one.useQuery({ mysqlId });
const { data: auth } = api.user.get.useQuery();
@@ -73,7 +73,7 @@ const MySql = (
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/mysql/${mysqlId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/mysql/${mysqlId}`,
},
]}
/>
@@ -180,7 +180,7 @@ const MySql = (
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mysql/${mysqlId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/mysql/${mysqlId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
@@ -286,7 +286,7 @@ MySql.getLayout = (page: ReactElement) => {
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ mysqlId: string; activeTab: TabState }>,
ctx: GetServerSidePropsContext<{ mysqlId: string; activeTab: TabState; environmentId: string }>,
) {
const { query, params, req, res } = ctx;
const activeTab = query.tab;

8
apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
View File

@@ -54,7 +54,7 @@ const Postgresql = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { postgresId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab);
const { data } = api.postgres.one.useQuery({ postgresId });
const { data: auth } = api.user.get.useQuery();
@@ -73,7 +73,7 @@ const Postgresql = (
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/postgres/${postgresId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/postgres/${postgresId}`,
},
]}
/>
@@ -179,7 +179,7 @@ const Postgresql = (
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/postgres/${postgresId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/postgres/${postgresId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
@@ -284,7 +284,7 @@ Postgresql.getLayout = (page: ReactElement) => {
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ postgresId: string; activeTab: TabState }>,
ctx: GetServerSidePropsContext<{ postgresId: string; activeTab: TabState; environmentId: string }>,
) {
const { query, params, req, res } = ctx;
const activeTab = query.tab;

8
apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx → apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
View File

@@ -53,7 +53,7 @@ const Redis = (
const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
const { redisId, activeTab } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId, environmentId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab);
const { data } = api.redis.one.useQuery({ redisId });
@@ -73,7 +73,7 @@ const Redis = (
},
{
name: data?.name || "",
href: `/dashboard/project/${projectId}/services/redis/${redisId}`,
href: `/dashboard/project/${projectId}/environment/${environmentId}/services/redis/${redisId}`,
},
]}
/>
@@ -179,7 +179,7 @@ const Redis = (
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/redis/${redisId}?tab=${e}`;
const newPath = `/dashboard/project/${projectId}/environment/${environmentId}/services/redis/${redisId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
@@ -291,7 +291,7 @@ Redis.getLayout = (page: ReactElement) => {
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ redisId: string; activeTab: TabState }>,
ctx: GetServerSidePropsContext<{ redisId: string; activeTab: TabState; environmentId: string }>,
) {
const { query, params, req, res } = ctx;
const activeTab = query.tab;

4
packages/server/src/services/application.ts
View File

@@ -185,7 +185,7 @@ export const deployApplication = async ({
}) => {
const application = await findApplicationById(applicationId);
const buildLink = `${await getDokployUrl()}/dashboard/project/${application.projectId}/services/application/${application.applicationId}?tab=deployments`;
const buildLink = `${await getDokployUrl()}/dashboard/project/${application.environment.projectId}/environment/${application.environmentId}/services/application/${application.applicationId}?tab=deployments`;
const deployment = await createDeployment({
applicationId: applicationId,
title: titleLog,
@@ -312,7 +312,7 @@ export const deployRemoteApplication = async ({
}) => {
const application = await findApplicationById(applicationId);
const buildLink = `${await getDokployUrl()}/dashboard/project/${application.projectId}/services/application/${application.applicationId}?tab=deployments`;
const buildLink = `${await getDokployUrl()}/dashboard/project/${application.environment.projectId}/environment/${application.environmentId}/services/application/${application.applicationId}?tab=deployments`;
const deployment = await createDeployment({
applicationId: applicationId,
title: titleLog,