mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
8f9d21c0f8
* feat(WIP): compose implementation * feat: add volumes, networks, services name hash generate * feat: add compose config test unique * feat: add tests for each unique config * feat: implement lodash for docker compose parsing * feat: add tests for generating compose file * refactor: implement logs docker compose * refactor: composeFile set not empty * feat: implement providers for compose deployments * feat: add Files volumes to compose * feat: add stop compose button * refactor: change strategie of building compose * feat: create .env file in composepath * refactor: simplify git and github function * chore: update deps * refactor: update migrations and add badge to recognize compose type * chore: update lock yaml * refactor: use code editor * feat: add monitoring for app types * refactor: reset stats on change appName * refactor: add option to clean monitoring folder * feat: show current command that will run * feat: add prefix * fix: add missing types * refactor: add docker provider and expose by default as false * refactor: customize error page * refactor: unified deployments to be a single one * feat: add vitest to ci/cd * revert: back to initial version * refactor: add maxconcurrency vitest * refactor: add pool forks to vitest * feat: add pocketbase template * fix: update path resolution compose * removed * feat: add template pocketbase * feat: add pocketbase template * feat: add support button * feat: add plausible template * feat: add calcom template * feat: add version to each template * feat: add code editor to enviroment variables and swarm settings json * refactor: add loader when download the image * fix: use base64 to generate keys plausible * feat: add recognized domain names by enviroment compose * refactor: show alert to redeploy in each card advanced tab * refactor: add validation to prevent create compose if not have permissions * chore: add templates section to contributing * chore: add example contributing
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { api } from "@/utils/api";
|
|
import { Rss } from "lucide-react";
|
|
import { AddPort } from "./add-port";
|
|
import { DeletePort } from "./delete-port";
|
|
import { UpdatePort } from "./update-port";
|
|
import { AlertBlock } from "@/components/shared/alert-block";
|
|
interface Props {
|
|
applicationId: string;
|
|
}
|
|
|
|
export const ShowPorts = ({ applicationId }: Props) => {
|
|
const { data } = api.application.one.useQuery(
|
|
{
|
|
applicationId,
|
|
},
|
|
{ enabled: !!applicationId },
|
|
);
|
|
|
|
return (
|
|
<Card className="bg-background">
|
|
<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
|
|
<div>
|
|
<CardTitle className="text-xl">Ports</CardTitle>
|
|
<CardDescription>
|
|
the ports allows you to expose your application to the internet
|
|
</CardDescription>
|
|
</div>
|
|
|
|
{data && data?.ports.length > 0 && (
|
|
<AddPort applicationId={applicationId}>Add Port</AddPort>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
{data?.ports.length === 0 ? (
|
|
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
|
|
<Rss className="size-8 text-muted-foreground" />
|
|
<span className="text-base text-muted-foreground">
|
|
No ports configured
|
|
</span>
|
|
<AddPort applicationId={applicationId}>Add Port</AddPort>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col pt-2 gap-4">
|
|
<AlertBlock type="info">
|
|
Please remember to click Redeploy after adding, editing, or
|
|
deleting the ports to apply the changes.
|
|
</AlertBlock>
|
|
<div className="flex flex-col gap-6">
|
|
{data?.ports.map((port) => (
|
|
<div key={port.portId}>
|
|
<div className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="font-medium">Published Port</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
{port.publishedPort}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="font-medium"> Target Port</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
{port.targetPort}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="font-medium">Protocol</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
{port.protocol.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-4">
|
|
<UpdatePort portId={port.portId} />
|
|
<DeletePort portId={port.portId} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|