mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-06-19 22:25:22 +02:00
Compare commits
567 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b3c2e1e5af | ||
|
|
60867d0b60 | ||
|
|
6a0acd9cad | ||
|
|
64a606ffa4 | ||
|
|
29851491f6 | ||
|
|
95633b4122 | ||
|
|
c73632cbe0 | ||
|
|
30b3e1fe48 | ||
|
|
a07106d649 | ||
|
|
df98cea19f | ||
|
|
b109e0ebc4 | ||
|
|
282d358d04 | ||
|
|
2f08b33931 | ||
|
|
ccc8f6d047 | ||
|
|
62aeed5aed | ||
|
|
5e021797f3 | ||
|
|
1c6fdc1b43 | ||
|
|
6270bad9af | ||
|
|
9c71458eff | ||
|
|
547ba2d04b | ||
|
|
b9e97eb321 | ||
|
|
a4e2317f3e | ||
|
|
06a349152f | ||
|
|
fef2de1ec5 | ||
|
|
b20ff64cbf | ||
|
|
5177580d51 | ||
|
|
d3292a2810 | ||
|
|
0f526af2c8 | ||
|
|
72f5d711c8 | ||
|
|
ffd51cf32f | ||
|
|
e8b3d7ba7d | ||
|
|
c182755591 | ||
|
|
8227a48ef4 | ||
|
|
f5ddc36f24 | ||
|
|
d5d8914bf6 | ||
|
|
bf0890a6b0 | ||
|
|
4e07669464 | ||
|
|
4a3fa6e63f | ||
|
|
14af5d293a | ||
|
|
746bb3ddc6 | ||
|
|
b13308dc69 | ||
|
|
16746a1609 | ||
|
|
bca62d43d2 | ||
|
|
d502f4a206 | ||
|
|
de7d6f8147 | ||
|
|
9d6bc4cd18 | ||
|
|
65b27af0f5 | ||
|
|
6165114bc3 | ||
|
|
d3109359fb | ||
|
|
58f527d029 | ||
|
|
1ed41fe2f8 | ||
|
|
9b416b3699 | ||
|
|
096b8b33fc | ||
|
|
741792883a | ||
|
|
e0c6ed699d | ||
|
|
5f5ed0f2c2 | ||
|
|
b9ff576682 | ||
|
|
c854a38adb | ||
|
|
5fb365c08b | ||
|
|
15296d5c85 | ||
|
|
0e5fc584b2 | ||
|
|
cc7ea5108b | ||
|
|
8f3d824ea6 | ||
|
|
0bdcbf5827 | ||
|
|
34564aec84 | ||
|
|
ed006dc5f9 | ||
|
|
222b167a76 | ||
|
|
fb6b06f064 | ||
|
|
09824facf8 | ||
|
|
bd46eaec5c | ||
|
|
e9fdc19b96 | ||
|
|
3e81cdac4d | ||
|
|
e72c51444c | ||
|
|
940d18ad25 | ||
|
|
c41b69c925 | ||
|
|
b610f7aeff | ||
|
|
cdd77a04dc | ||
|
|
05f22edfe5 | ||
|
|
29480cde90 | ||
|
|
232ccc9139 | ||
|
|
018e2b153e | ||
|
|
ad490dca3f | ||
|
|
f8c6c8f7cc | ||
|
|
d7af82731c | ||
|
|
c3fa638a56 | ||
|
|
ce703ef478 | ||
|
|
fc6df3ae05 | ||
|
|
8fb517152a | ||
|
|
ba3591b3ac | ||
|
|
bad9731878 | ||
|
|
98a586478e | ||
|
|
13248c8d8a | ||
|
|
54417ca8e7 | ||
|
|
598fae0e92 | ||
|
|
b392e58001 | ||
|
|
d9945c0a4f | ||
|
|
f6e2c033ba | ||
|
|
5c787adae1 | ||
|
|
2ba1df1eaa | ||
|
|
e7859395b1 | ||
|
|
6f0ed89ce7 | ||
|
|
4277a509b2 | ||
|
|
f7b576cbf3 | ||
|
|
425fef6e28 | ||
|
|
958372c5f9 | ||
|
|
e7c581476e | ||
|
|
0cae8330e2 | ||
|
|
7e13243c1d | ||
|
|
4a271c11e7 | ||
|
|
fda367b2c5 | ||
|
|
ea1238b1d1 | ||
|
|
b060f80932 | ||
|
|
04b9f56333 | ||
|
|
599b97da51 | ||
|
|
415298fddb | ||
|
|
ddff8b9de7 | ||
|
|
90f97912a4 | ||
|
|
9af745ce67 | ||
|
|
d99f2cd460 | ||
|
|
d234558822 | ||
|
|
7f25ddca44 | ||
|
|
638b3dd546 | ||
|
|
1a8fd8396d | ||
|
|
385850f354 | ||
|
|
a48306a2c6 | ||
|
|
89737e7b65 | ||
|
|
00c708483e | ||
|
|
ddf570a807 | ||
|
|
f8eb2ba4ba | ||
|
|
9f07f8e9e1 | ||
|
|
3cefa43a21 | ||
|
|
0941ec9f3e | ||
|
|
879218a8b1 | ||
|
|
d6124aae81 | ||
|
|
f404b231a6 | ||
|
|
7a986e5fb3 | ||
|
|
9687ed0d83 | ||
|
|
b4c57b6326 | ||
|
|
f8eb3c2b76 | ||
|
|
a30617d85d | ||
|
|
b079cbd427 | ||
|
|
aeda19db8a | ||
|
|
cb64482649 | ||
|
|
f4cae5f775 | ||
|
|
825e6b654c | ||
|
|
c1b19376a9 | ||
|
|
6c3578a475 | ||
|
|
b8db120432 | ||
|
|
7c10610a5a | ||
|
|
8d8658a478 | ||
|
|
fbde5be02c | ||
|
|
090c0226ed | ||
|
|
4a1b42899b | ||
|
|
343514d4eb | ||
|
|
36067618f4 | ||
|
|
cc74f9e38c | ||
|
|
df7e1da776 | ||
|
|
df9aa50ece | ||
|
|
ebbc008dbe | ||
|
|
645a81b2ce | ||
|
|
a6db83c758 | ||
|
|
ac65cc97f4 | ||
|
|
30d5493281 | ||
|
|
91b44720ef | ||
|
|
f700017ccf | ||
|
|
9287721dbf | ||
|
|
6cde04ea39 | ||
|
|
283eeeb3e6 | ||
|
|
19ae575fa8 | ||
|
|
4077af1308 | ||
|
|
8a043dcc5c | ||
|
|
46204831f7 | ||
|
|
c854d4eb01 | ||
|
|
b8812dd7f2 | ||
|
|
ddde6a7bcb | ||
|
|
04ffa43008 | ||
|
|
17393af717 | ||
|
|
24b56c868d | ||
|
|
be871a0c59 | ||
|
|
2d6136a633 | ||
|
|
acfab54810 | ||
|
|
5e7328b00d | ||
|
|
882acd5c4c | ||
|
|
e7c7d6a7cf | ||
|
|
45f2f52cf0 | ||
|
|
31f53197eb | ||
|
|
cfed61fb96 | ||
|
|
bfa4ebc801 | ||
|
|
c160f24765 | ||
|
|
b445e05202 | ||
|
|
239e2d4d96 | ||
|
|
791c9d1268 | ||
|
|
f076e72046 | ||
|
|
32758b29a7 | ||
|
|
6e9c5c79dc | ||
|
|
182bbf43c8 | ||
|
|
760edc6d5d | ||
|
|
a1a5141da6 | ||
|
|
b573ccc90c | ||
|
|
6c28451ca1 | ||
|
|
6c834a9127 | ||
|
|
2af420ef77 | ||
|
|
87c7305cb2 | ||
|
|
31fdf69286 | ||
|
|
f1bc3758b2 | ||
|
|
396fb9f57f | ||
|
|
8e54e88370 | ||
|
|
7e0fde8041 | ||
|
|
3969d2d2fe | ||
|
|
b6ec2d510e | ||
|
|
1753ac6605 | ||
|
|
8dd970674d | ||
|
|
b3919be628 | ||
|
|
5a0ec2c9dc | ||
|
|
012b67a491 | ||
|
|
b003fb4ffe | ||
|
|
85c409e748 | ||
|
|
745cf9d979 | ||
|
|
70c611964e | ||
|
|
0f02c4dfc3 | ||
|
|
8557432db0 | ||
|
|
e36ae4b4d6 | ||
|
|
ed5e483f0b | ||
|
|
2e027a7da5 | ||
|
|
791ca657a3 | ||
|
|
1bf4f56ae6 | ||
|
|
02f2829af9 | ||
|
|
b2ca51cee7 | ||
|
|
1cfc15ca0b | ||
|
|
0cb5ee49e0 | ||
|
|
3d838aa074 | ||
|
|
eafbd0353e | ||
|
|
1506d8f21e | ||
|
|
e1e175b1e0 | ||
|
|
8001304e98 | ||
|
|
987cb41bfc | ||
|
|
199589d42e | ||
|
|
91d4fe2420 | ||
|
|
92caee5a77 | ||
|
|
092212e225 | ||
|
|
5c053777c5 | ||
|
|
eed36e52af | ||
|
|
dd28a8e703 | ||
|
|
e211feb801 | ||
|
|
da239675bd | ||
|
|
0d5f452494 | ||
|
|
2eb460ba63 | ||
|
|
d8e15a60f0 | ||
|
|
1b3b439257 | ||
|
|
964d79d552 | ||
|
|
1730f427df | ||
|
|
28845c145e | ||
|
|
b7adb7fb0a | ||
|
|
e4f6e5ea54 | ||
|
|
96d1abb4b6 | ||
|
|
c5f804421c | ||
|
|
c51d71848d | ||
|
|
da5d9b2c75 | ||
|
|
e102876e4d | ||
|
|
4c06a72075 | ||
|
|
cfa60aa971 | ||
|
|
d2e4922c2f | ||
|
|
192716b8ae | ||
|
|
13f1de5bd7 | ||
|
|
2e8e2dc2da | ||
|
|
fd2097ea23 | ||
|
|
71de71fb8a | ||
|
|
6192c08400 | ||
|
|
435d812e1d | ||
|
|
18b8b2624b | ||
|
|
3f1bf2b14e | ||
|
|
2683ac2a1b | ||
|
|
4e11334940 | ||
|
|
82893598e0 | ||
|
|
86905fc5bf | ||
|
|
c7814bb752 | ||
|
|
c0d6eac35d | ||
|
|
6dfa762934 | ||
|
|
0e3bc444b9 | ||
|
|
fb7b7cff66 | ||
|
|
5e999f1c3c | ||
|
|
9e52b722f0 | ||
|
|
70418dd09b | ||
|
|
df95766807 | ||
|
|
e5aae15310 | ||
|
|
964773b44c | ||
|
|
7224436610 | ||
|
|
d6885c32ea | ||
|
|
4da3c468eb | ||
|
|
38a711776b | ||
|
|
4030049ee8 | ||
|
|
06b18aca08 | ||
|
|
86ba597d67 | ||
|
|
91ebf3b6f5 | ||
|
|
5978c4135e | ||
|
|
e9202bfb15 | ||
|
|
365e055005 | ||
|
|
9b108480a8 | ||
|
|
450d591c1a | ||
|
|
d90722a174 | ||
|
|
f9de42610c | ||
|
|
780406f9ef | ||
|
|
f49988498f | ||
|
|
565bc16f24 | ||
|
|
c7b5e73d1c | ||
|
|
8053ee7724 | ||
|
|
d9b2b48643 | ||
|
|
148c91bf5e | ||
|
|
c4aca74aef | ||
|
|
dab13a52d6 | ||
|
|
4a7e9a200e | ||
|
|
f83ab2923d | ||
|
|
9a1bee5287 | ||
|
|
6d17f62942 | ||
|
|
815b8136fa | ||
|
|
290a03ccfb | ||
|
|
63aa60f7e2 | ||
|
|
fe9b0ebcea | ||
|
|
8ccdb66ced | ||
|
|
e38f07d286 | ||
|
|
035d39e3b7 | ||
|
|
82a908a865 | ||
|
|
4bbb2ece49 | ||
|
|
8ee374dc6b | ||
|
|
ddfcd1a671 | ||
|
|
401b177a4e | ||
|
|
88b56ca0a2 | ||
|
|
3d48b25f71 | ||
|
|
b7e30d7ec3 | ||
|
|
b1ef5dc2c6 | ||
|
|
3846e41d7f | ||
|
|
ac76f2d97a | ||
|
|
d6056972f4 | ||
|
|
58b9a0d3d0 | ||
|
|
fe78f282f8 | ||
|
|
4941a80b50 | ||
|
|
5ea2ee5dcd | ||
|
|
76d6de5337 | ||
|
|
3374737db6 | ||
|
|
27a67af190 | ||
|
|
7e6a7d2cd4 | ||
|
|
4f5f1ad841 | ||
|
|
c42a16d658 | ||
|
|
b222409129 | ||
|
|
fe8d2732fc | ||
|
|
88ad551297 | ||
|
|
f36d011286 | ||
|
|
fb5ee5d6b3 | ||
|
|
3d50cb0ac9 | ||
|
|
c752cf3f9e | ||
|
|
cf25c17c20 | ||
|
|
ae439bcd13 | ||
|
|
b8f069704c | ||
|
|
d4bf6246c3 | ||
|
|
4b6f2c84ac | ||
|
|
116e9d85b7 | ||
|
|
dce1454d4d | ||
|
|
a322ac374c | ||
|
|
49d79fcd37 | ||
|
|
fa028dcf1e | ||
|
|
a09d7d5663 | ||
|
|
b9aa275759 | ||
|
|
b61ca31981 | ||
|
|
0b08fa9a59 | ||
|
|
ffd7b80410 | ||
|
|
3854dfaade | ||
|
|
bb56a0bae8 | ||
|
|
a03ec76b6f | ||
|
|
9cc8231188 | ||
|
|
ee2240898c | ||
|
|
92975a6865 | ||
|
|
6fb4a13a18 | ||
|
|
8a8688c011 | ||
|
|
bd18461242 | ||
|
|
7f60000641 | ||
|
|
1d7509dfc2 | ||
|
|
8304513501 | ||
|
|
2809cd690a | ||
|
|
fff91157c4 | ||
|
|
aca1c6f621 | ||
|
|
e9650de794 | ||
|
|
b3579d1321 | ||
|
|
43f9c114c8 | ||
|
|
bc11e8741b | ||
|
|
837373fdc5 | ||
|
|
7d2d7fc005 | ||
|
|
72c15ac18c | ||
|
|
51d744ba45 | ||
|
|
81ecf214f1 | ||
|
|
c2d37631ba | ||
|
|
7c55eba506 | ||
|
|
7878bf29ba | ||
|
|
1b70763ba5 | ||
|
|
e47263ae5f | ||
|
|
b139d6f277 | ||
|
|
cddb06f515 | ||
|
|
4d8a2a38e8 | ||
|
|
4ef8c94340 | ||
|
|
ff369c9d3a | ||
|
|
d0c92d84ef | ||
|
|
72974e00a6 | ||
|
|
d96e2bbeb7 | ||
|
|
a45d8ee8f4 | ||
|
|
de3db08e60 | ||
|
|
ee42a393aa | ||
|
|
a2d655083a | ||
|
|
5e6e5ba9d8 | ||
|
|
2a2acbfe9a | ||
|
|
f3356cfe90 | ||
|
|
fc8a5153f1 | ||
|
|
1203d0589b | ||
|
|
2da45d3ca9 | ||
|
|
653e5fa3a0 | ||
|
|
66931fe24f | ||
|
|
7feb4061f8 | ||
|
|
2362778fe1 | ||
|
|
bf9d2615c2 | ||
|
|
40d07357bc | ||
|
|
1e5e361094 | ||
|
|
abc7014b61 | ||
|
|
a8648607b8 | ||
|
|
453a7b12b6 | ||
|
|
c75cfa2d69 | ||
|
|
628f16e8cb | ||
|
|
ea8e99d76d | ||
|
|
1c5b92729a | ||
|
|
86feda1679 | ||
|
|
f95b29a450 | ||
|
|
a1cf5520a9 | ||
|
|
d4719ece58 | ||
|
|
fadc7fede5 | ||
|
|
cbbf7f3a6d | ||
|
|
e679a322b9 | ||
|
|
f24f1ada5f | ||
|
|
ebf5f486bc | ||
|
|
b1b1dbc1ce | ||
|
|
d7886fb7c9 | ||
|
|
939ff810a2 | ||
|
|
1926417458 | ||
|
|
864e2299ee | ||
|
|
5b6d80e177 | ||
|
|
355d46948b | ||
|
|
938b0b4ed3 | ||
|
|
ebbbd39065 | ||
|
|
1f3936fcad | ||
|
|
e4d9fd37b9 | ||
|
|
0df6cc5395 | ||
|
|
2b4604dc0c | ||
|
|
1da9ef8e69 | ||
|
|
e049352f6d | ||
|
|
1cb1b5083f | ||
|
|
affd17d788 | ||
|
|
be3d7825e1 | ||
|
|
c6efe6f35b | ||
|
|
2c9ca651a8 | ||
|
|
413ed9bd80 | ||
|
|
84fb82ea99 | ||
|
|
1d96c4d534 | ||
|
|
bb02de690b | ||
|
|
c8fd999044 | ||
|
|
0a4becb614 | ||
|
|
e85adaedbd | ||
|
|
32657499ab | ||
|
|
67899c762c | ||
|
|
4f578516d6 | ||
|
|
68f6d4a558 | ||
|
|
1e57d48ab4 | ||
|
|
a177d34dfd | ||
|
|
1034c79245 | ||
|
|
ab69d782c7 | ||
|
|
405fc69df4 | ||
|
|
304454b22d | ||
|
|
ce5ad35981 | ||
|
|
c66902fb96 | ||
|
|
70776ba8ca | ||
|
|
2df1b42540 | ||
|
|
48902c488f | ||
|
|
e575e50979 | ||
|
|
efedec70d6 | ||
|
|
8d11fb4ee8 | ||
|
|
42c2076281 | ||
|
|
b7f7027280 | ||
|
|
5cd7de8188 | ||
|
|
5d078f1d9f | ||
|
|
1352b859e2 | ||
|
|
ac27aa1bba | ||
|
|
6a79ce8ff1 | ||
|
|
bf226f1af1 | ||
|
|
1c2307b86f | ||
|
|
6b117551ae | ||
|
|
8c1153370c | ||
|
|
4832fd929c | ||
|
|
d1b639a55a | ||
|
|
40de13e4d4 | ||
|
|
f0ea1c8796 | ||
|
|
09dd7cc938 | ||
|
|
eae83674b0 | ||
|
|
d1ebc133aa | ||
|
|
d29fe437b9 | ||
|
|
27ad851d45 | ||
|
|
42f8773c05 | ||
|
|
5eef844e5f | ||
|
|
21fa21e9c0 | ||
|
|
14dafa9a8a | ||
|
|
c5eb31ab90 | ||
|
|
d6704dbd27 | ||
|
|
dcdbed047b | ||
|
|
c362b2c558 | ||
|
|
970905198b | ||
|
|
a0c87358eb | ||
|
|
91a385c302 | ||
|
|
9627af9cda | ||
|
|
b45e7e415c | ||
|
|
90bd276ad4 | ||
|
|
84d311802f | ||
|
|
67d3e92aaf | ||
|
|
8ee38a1463 | ||
|
|
e726bf31f6 | ||
|
|
f4248760a8 | ||
|
|
b715e21236 | ||
|
|
76af74d8aa | ||
|
|
71d3a43fd7 | ||
|
|
b15ede8877 | ||
|
|
02f0b0b1a4 | ||
|
|
2dffdffaf3 | ||
|
|
096235f8a1 | ||
|
|
c3b79c115d | ||
|
|
1fb8445165 | ||
|
|
ea805c1520 | ||
|
|
53a11b81d6 | ||
|
|
307916a49a | ||
|
|
293160eb55 | ||
|
|
95999df13e | ||
|
|
803577a403 | ||
|
|
4b1f359cb6 | ||
|
|
976932fb03 | ||
|
|
ac8960efdd | ||
|
|
d6050ce05a | ||
|
|
5a46b879f5 | ||
|
|
222e4878bd | ||
|
|
fd267a64de | ||
|
|
fa3cdf148b | ||
|
|
74caf141f4 | ||
|
|
8b7d9c0896 | ||
|
|
13e20e9ef8 | ||
|
|
f9b0589070 | ||
|
|
b615d04ad2 | ||
|
|
6c4efa48b1 | ||
|
|
85d48aba2b | ||
|
|
3b138f8e8a | ||
|
|
b91067dc2a | ||
|
|
335a16b915 | ||
|
|
274f38029c | ||
|
|
4cbc91d3d0 | ||
|
|
10d17de186 | ||
|
|
65f0919fa7 | ||
|
|
9b7abfbed7 | ||
|
|
6676a86b34 | ||
|
|
d603654ac1 | ||
|
|
d9ffe519b0 | ||
|
|
fa91a74462 | ||
|
|
d7794286be | ||
|
|
f337dd7e01 | ||
|
|
5d5d95bbd3 | ||
|
|
7be1084a10 | ||
|
|
19a525fac1 | ||
|
|
7984497398 |
79
.github/workflows/dokploy.yml
vendored
79
.github/workflows/dokploy.yml
vendored
@@ -138,6 +138,8 @@ jobs:
|
|||||||
needs: [combine-manifests]
|
needs: [combine-manifests]
|
||||||
if: github.ref == 'refs/heads/main'
|
if: github.ref == 'refs/heads/main'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
outputs:
|
||||||
|
version: ${{ steps.get_version.outputs.version }}
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
@@ -160,3 +162,80 @@ jobs:
|
|||||||
prerelease: false
|
prerelease: false
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
|
sync-version:
|
||||||
|
needs: [generate-release]
|
||||||
|
if: github.ref == 'refs/heads/main'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- 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
|
||||||
|
mv package.json.tmp package.json
|
||||||
|
|
||||||
|
npm install -g pnpm
|
||||||
|
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 }}" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
--allow-empty
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ MCP repo synced to version ${{ needs.generate-release.outputs.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
|
||||||
|
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 }}" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
--allow-empty
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ CLI repo synced to version ${{ needs.generate-release.outputs.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
|
||||||
|
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 }}" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
--allow-empty
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ SDK repo synced to version ${{ needs.generate-release.outputs.version }}"
|
||||||
|
|||||||
22
.github/workflows/pr-quality.yml
vendored
22
.github/workflows/pr-quality.yml
vendored
@@ -1,22 +0,0 @@
|
|||||||
|
|
||||||
name: PR Quality
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
issues: read
|
|
||||||
pull-requests: write
|
|
||||||
|
|
||||||
on:
|
|
||||||
pull_request_target:
|
|
||||||
types: [opened, reopened]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
anti-slop:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: peakoss/anti-slop@v0
|
|
||||||
with:
|
|
||||||
max-failures: 4
|
|
||||||
blocked-commit-authors: "claude,copilot"
|
|
||||||
require-description: true
|
|
||||||
min-account-age: 5
|
|
||||||
63
.github/workflows/sync-openapi-docs.yml
vendored
63
.github/workflows/sync-openapi-docs.yml
vendored
@@ -68,3 +68,66 @@ jobs:
|
|||||||
|
|
||||||
echo "✅ OpenAPI synced to website successfully"
|
echo "✅ OpenAPI synced to website successfully"
|
||||||
|
|
||||||
|
- name: Sync to MCP repository
|
||||||
|
run: |
|
||||||
|
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/mcp.git mcp-repo
|
||||||
|
|
||||||
|
cd mcp-repo
|
||||||
|
|
||||||
|
cp -f ../openapi.json openapi.json
|
||||||
|
|
||||||
|
git config user.name "Dokploy Bot"
|
||||||
|
git config user.email "bot@dokploy.com"
|
||||||
|
|
||||||
|
git add openapi.json
|
||||||
|
git commit -m "chore: sync OpenAPI specification [skip ci]" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
-m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
|
||||||
|
--allow-empty
|
||||||
|
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ OpenAPI synced to MCP repository successfully"
|
||||||
|
|
||||||
|
- name: Sync to CLI repository
|
||||||
|
run: |
|
||||||
|
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/cli.git cli-repo
|
||||||
|
|
||||||
|
cd cli-repo
|
||||||
|
|
||||||
|
cp -f ../openapi.json openapi.json
|
||||||
|
|
||||||
|
git config user.name "Dokploy Bot"
|
||||||
|
git config user.email "bot@dokploy.com"
|
||||||
|
|
||||||
|
git add openapi.json
|
||||||
|
git commit -m "chore: sync OpenAPI specification [skip ci]" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
-m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
|
||||||
|
--allow-empty
|
||||||
|
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ OpenAPI synced to CLI repository successfully"
|
||||||
|
|
||||||
|
- name: Sync to SDK repository
|
||||||
|
run: |
|
||||||
|
git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/sdk.git sdk-repo
|
||||||
|
|
||||||
|
cd sdk-repo
|
||||||
|
|
||||||
|
cp -f ../openapi.json openapi.json
|
||||||
|
|
||||||
|
git config user.name "Dokploy Bot"
|
||||||
|
git config user.email "bot@dokploy.com"
|
||||||
|
|
||||||
|
git add openapi.json
|
||||||
|
git commit -m "chore: sync OpenAPI specification [skip ci]" \
|
||||||
|
-m "Source: ${{ github.repository }}@${{ github.sha }}" \
|
||||||
|
-m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
|
||||||
|
--allow-empty
|
||||||
|
|
||||||
|
git push
|
||||||
|
|
||||||
|
echo "✅ OpenAPI synced to SDK repository successfully"
|
||||||
|
|
||||||
|
|||||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -4,5 +4,8 @@
|
|||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
"source.fixAll.biome": "explicit",
|
"source.fixAll.biome": "explicit",
|
||||||
"source.organizeImports.biome": "explicit"
|
"source.organizeImports.biome": "explicit"
|
||||||
|
},
|
||||||
|
"[typescript]": {
|
||||||
|
"editor.defaultFormatter": "biomejs.biome"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -99,7 +99,14 @@ pnpm run dokploy:build
|
|||||||
|
|
||||||
## Docker
|
## Docker
|
||||||
|
|
||||||
To build the docker image
|
To build the docker image first run commands to copy .env files
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp apps/dokploy/.env.production.example .env.production
|
||||||
|
cp apps/dokploy/.env.production.example apps/dokploy/.env.production
|
||||||
|
```
|
||||||
|
|
||||||
|
then run build command
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm run docker:build
|
pnpm run docker:build
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ COPY --from=buildpacksio/pack:0.39.1 /usr/local/bin/pack /usr/local/bin/pack
|
|||||||
|
|
||||||
EXPOSE 3000
|
EXPOSE 3000
|
||||||
|
|
||||||
HEALTHCHECK --interval=10s --timeout=3s --retries=10 \
|
HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \
|
||||||
CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
|
CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
|
||||||
|
|
||||||
CMD ["sh", "-c", "pnpm run wait-for-postgres && exec pnpm start"]
|
CMD ["sh", "-c", "pnpm run wait-for-postgres && exec pnpm start"]
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies th
|
|||||||
Dokploy includes multiple features to make your life easier.
|
Dokploy includes multiple features to make your life easier.
|
||||||
|
|
||||||
- **Applications**: Deploy any type of application (Node.js, PHP, Python, Go, Ruby, etc.).
|
- **Applications**: Deploy any type of application (Node.js, PHP, Python, Go, Ruby, etc.).
|
||||||
- **Databases**: Create and manage databases with support for MySQL, PostgreSQL, MongoDB, MariaDB, and Redis.
|
- **Databases**: Create and manage databases with support for MySQL, PostgreSQL, MongoDB, MariaDB, libsql, and Redis.
|
||||||
- **Backups**: Automate backups for databases to an external storage destination.
|
- **Backups**: Automate backups for databases to an external storage destination.
|
||||||
- **Docker Compose**: Native support for Docker Compose to manage complex applications.
|
- **Docker Compose**: Native support for Docker Compose to manage complex applications.
|
||||||
- **Multi Node**: Scale applications to multiple nodes using Docker Swarm to manage the cluster.
|
- **Multi Node**: Scale applications to multiple nodes using Docker Swarm to manage the cluster.
|
||||||
@@ -39,7 +39,7 @@ To get started, run the following command on a VPS:
|
|||||||
Want to skip the installation process? [Try the Dokploy Cloud](https://app.dokploy.com).
|
Want to skip the installation process? [Try the Dokploy Cloud](https://app.dokploy.com).
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -sSL https://dokploy.com/install.sh | sh
|
curl -sSL https://dokploy.com/install.sh | bash
|
||||||
```
|
```
|
||||||
|
|
||||||
For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
|
For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
|
||||||
|
|||||||
52
apps/dokploy/__test__/compose/build-compose-command.test.ts
Normal file
52
apps/dokploy/__test__/compose/build-compose-command.test.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { getBuildComposeCommand } from "@dokploy/server/utils/builders/compose";
|
||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
|
// Isolate the command builder from the compose-file I/O performed by
|
||||||
|
// writeDomainsToCompose; we only care about the docker invocation it emits.
|
||||||
|
vi.mock("@dokploy/server/utils/docker/domain", () => ({
|
||||||
|
writeDomainsToCompose: vi.fn().mockResolvedValue(""),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const baseCompose = {
|
||||||
|
appName: "my-app",
|
||||||
|
sourceType: "raw",
|
||||||
|
command: "",
|
||||||
|
composePath: "docker-compose.yml",
|
||||||
|
composeType: "stack",
|
||||||
|
isolatedDeployment: false,
|
||||||
|
randomize: false,
|
||||||
|
suffix: "",
|
||||||
|
serverId: null,
|
||||||
|
env: "",
|
||||||
|
mounts: [],
|
||||||
|
domains: [],
|
||||||
|
environment: { project: { env: "" }, env: "" },
|
||||||
|
} as unknown as Parameters<typeof getBuildComposeCommand>[0];
|
||||||
|
|
||||||
|
// Regression coverage for #4401: the deploy command runs under `env -i`, which
|
||||||
|
// clears the environment except for the vars listed explicitly. HOME must be
|
||||||
|
// preserved so docker can resolve ~/.docker/config.json — otherwise
|
||||||
|
// `docker stack deploy --with-registry-auth` ships no credentials to the swarm
|
||||||
|
// and private-registry images fail to pull.
|
||||||
|
describe("getBuildComposeCommand registry auth (#4401)", () => {
|
||||||
|
it("preserves HOME for swarm stack deploys", async () => {
|
||||||
|
const command = await getBuildComposeCommand({
|
||||||
|
...baseCompose,
|
||||||
|
composeType: "stack",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(command).toContain("stack deploy");
|
||||||
|
expect(command).toContain("--with-registry-auth");
|
||||||
|
expect(command).toContain('env -i PATH="$PATH" HOME="$HOME"');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("preserves HOME for docker compose deploys", async () => {
|
||||||
|
const command = await getBuildComposeCommand({
|
||||||
|
...baseCompose,
|
||||||
|
composeType: "docker-compose",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(command).toContain("compose -p my-app");
|
||||||
|
expect(command).toContain('env -i PATH="$PATH" HOME="$HOME"');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -32,6 +32,9 @@ describe("Host rule format regression tests", () => {
|
|||||||
previewDeploymentId: "",
|
previewDeploymentId: "",
|
||||||
internalPath: "/",
|
internalPath: "/",
|
||||||
stripPath: false,
|
stripPath: false,
|
||||||
|
customEntrypoint: null,
|
||||||
|
middlewares: null,
|
||||||
|
forwardAuthEnabled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
describe("Host rule format validation", () => {
|
describe("Host rule format validation", () => {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ describe("createDomainLabels", () => {
|
|||||||
const baseDomain: Domain = {
|
const baseDomain: Domain = {
|
||||||
host: "example.com",
|
host: "example.com",
|
||||||
port: 8080,
|
port: 8080,
|
||||||
|
customEntrypoint: null,
|
||||||
https: false,
|
https: false,
|
||||||
uniqueConfigKey: 1,
|
uniqueConfigKey: 1,
|
||||||
customCertResolver: null,
|
customCertResolver: null,
|
||||||
@@ -21,6 +22,8 @@ describe("createDomainLabels", () => {
|
|||||||
previewDeploymentId: "",
|
previewDeploymentId: "",
|
||||||
internalPath: "/",
|
internalPath: "/",
|
||||||
stripPath: false,
|
stripPath: false,
|
||||||
|
middlewares: null,
|
||||||
|
forwardAuthEnabled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
it("should create basic labels for web entrypoint", async () => {
|
it("should create basic labels for web entrypoint", async () => {
|
||||||
@@ -101,6 +104,51 @@ describe("createDomainLabels", () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should add tls=true for certificateType none on websecure entrypoint", async () => {
|
||||||
|
const noneDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
certificateType: "none" as const,
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(appName, noneDomain, "websecure");
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-websecure.tls=true",
|
||||||
|
);
|
||||||
|
// no cert resolver should be set when relying on a default/custom cert
|
||||||
|
expect(labels).not.toContain(
|
||||||
|
"traefik.http.routers.test-app-1-websecure.tls.certresolver=letsencrypt",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not add tls=true for certificateType none on web entrypoint", async () => {
|
||||||
|
const noneDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
certificateType: "none" as const,
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(appName, noneDomain, "web");
|
||||||
|
expect(labels).not.toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.tls=true",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should add tls=true for certificateType none on a custom https entrypoint", async () => {
|
||||||
|
const noneDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
customEntrypoint: "websecure-custom",
|
||||||
|
certificateType: "none" as const,
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
noneDomain,
|
||||||
|
"websecure-custom",
|
||||||
|
);
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-websecure-custom.tls=true",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it("should handle different ports correctly", async () => {
|
it("should handle different ports correctly", async () => {
|
||||||
const customPortDomain = { ...baseDomain, port: 3000 };
|
const customPortDomain = { ...baseDomain, port: 3000 };
|
||||||
const labels = await createDomainLabels(appName, customPortDomain, "web");
|
const labels = await createDomainLabels(appName, customPortDomain, "web");
|
||||||
@@ -171,12 +219,12 @@ describe("createDomainLabels", () => {
|
|||||||
"websecure",
|
"websecure",
|
||||||
);
|
);
|
||||||
|
|
||||||
// Web entrypoint should have both middlewares with redirect first
|
// Web entrypoint with HTTPS should only have redirect
|
||||||
expect(webLabels).toContain(
|
expect(webLabels).toContain(
|
||||||
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,addprefix-test-app-1",
|
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
|
||||||
);
|
);
|
||||||
|
|
||||||
// Websecure should only have the addprefix middleware
|
// Websecure should have the addprefix middleware
|
||||||
expect(websecureLabels).toContain(
|
expect(websecureLabels).toContain(
|
||||||
"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
|
"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
|
||||||
);
|
);
|
||||||
@@ -208,9 +256,9 @@ describe("createDomainLabels", () => {
|
|||||||
"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
|
"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
|
||||||
);
|
);
|
||||||
|
|
||||||
// Should have middlewares in correct order: redirect, stripprefix, addprefix
|
// Web router with HTTPS should only have redirect
|
||||||
expect(webLabels).toContain(
|
expect(webLabels).toContain(
|
||||||
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,stripprefix-test-app-1,addprefix-test-app-1",
|
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -240,4 +288,259 @@ describe("createDomainLabels", () => {
|
|||||||
"traefik.http.routers.test-app-1-websecure.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
|
"traefik.http.routers.test-app-1-websecure.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should add single custom middleware to router", async () => {
|
||||||
|
const customMiddlewareDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
middlewares: ["auth@file"],
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
customMiddlewareDomain,
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=auth@file",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should add multiple custom middlewares to router", async () => {
|
||||||
|
const customMiddlewareDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
middlewares: ["auth@file", "rate-limit@file"],
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
customMiddlewareDomain,
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=auth@file,rate-limit@file",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should only have redirect on web router when HTTPS is enabled with custom middlewares", async () => {
|
||||||
|
const combinedDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
middlewares: ["auth@file"],
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(appName, combinedDomain, "web");
|
||||||
|
|
||||||
|
// Web router with HTTPS should only redirect, custom middlewares go on websecure
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
|
||||||
|
);
|
||||||
|
expect(labels).not.toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should combine custom middlewares with stripPath middleware (no HTTPS)", async () => {
|
||||||
|
const combinedDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
path: "/api",
|
||||||
|
stripPath: true,
|
||||||
|
middlewares: ["auth@file"],
|
||||||
|
};
|
||||||
|
const labels = await createDomainLabels(appName, combinedDomain, "web");
|
||||||
|
|
||||||
|
// stripprefix should come before custom middleware
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=stripprefix-test-app-1,auth@file",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should only have redirect on web router even with all built-in middlewares and custom middlewares", async () => {
|
||||||
|
const fullDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
path: "/api",
|
||||||
|
stripPath: true,
|
||||||
|
internalPath: "/hello",
|
||||||
|
middlewares: ["auth@file", "rate-limit@file"],
|
||||||
|
};
|
||||||
|
const webLabels = await createDomainLabels(appName, fullDomain, "web");
|
||||||
|
|
||||||
|
// Web router with HTTPS should only redirect
|
||||||
|
expect(webLabels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
|
||||||
|
);
|
||||||
|
// Middleware definitions should still be present (Traefik needs them registered)
|
||||||
|
expect(webLabels).toContain(
|
||||||
|
"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
|
||||||
|
);
|
||||||
|
expect(webLabels).toContain(
|
||||||
|
"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
|
||||||
|
);
|
||||||
|
// But they should NOT be attached to the router
|
||||||
|
expect(webLabels).not.toContain("stripprefix-test-app-1,");
|
||||||
|
expect(webLabels).not.toContain("auth@file");
|
||||||
|
expect(webLabels).not.toContain("rate-limit@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should include custom middlewares on websecure entrypoint", async () => {
|
||||||
|
const customMiddlewareDomain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
middlewares: ["auth@file"],
|
||||||
|
};
|
||||||
|
const websecureLabels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
customMiddlewareDomain,
|
||||||
|
"websecure",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Websecure should have custom middleware but not redirect-to-https
|
||||||
|
expect(websecureLabels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-websecure.middlewares=auth@file",
|
||||||
|
);
|
||||||
|
expect(websecureLabels).not.toContain("redirect-to-https");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should NOT include custom middlewares on web router when HTTPS is enabled (only redirect)", async () => {
|
||||||
|
const domain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
middlewares: ["rate-limit@file", "auth@file"],
|
||||||
|
};
|
||||||
|
const webLabels = await createDomainLabels(appName, domain, "web");
|
||||||
|
|
||||||
|
// Web router with HTTPS should ONLY have redirect, not custom middlewares
|
||||||
|
expect(webLabels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
|
||||||
|
);
|
||||||
|
expect(webLabels).not.toContain("rate-limit@file");
|
||||||
|
expect(webLabels).not.toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should create basic labels for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{ ...baseDomain, customEntrypoint: "custom" },
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
expect(labels).toEqual([
|
||||||
|
"traefik.http.routers.test-app-1-custom.rule=Host(`example.com`)",
|
||||||
|
"traefik.http.routers.test-app-1-custom.entrypoints=custom",
|
||||||
|
"traefik.http.services.test-app-1-custom.loadbalancer.server.port=8080",
|
||||||
|
"traefik.http.routers.test-app-1-custom.service=test-app-1-custom",
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should create https labels for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
certificateType: "letsencrypt",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
expect(labels).toEqual([
|
||||||
|
"traefik.http.routers.test-app-1-custom.rule=Host(`example.com`)",
|
||||||
|
"traefik.http.routers.test-app-1-custom.entrypoints=custom",
|
||||||
|
"traefik.http.services.test-app-1-custom.loadbalancer.server.port=8080",
|
||||||
|
"traefik.http.routers.test-app-1-custom.service=test-app-1-custom",
|
||||||
|
"traefik.http.routers.test-app-1-custom.tls.certresolver=letsencrypt",
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should add stripPath middleware for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
path: "/api",
|
||||||
|
stripPath: true,
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
|
||||||
|
);
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-custom.middlewares=stripprefix-test-app-1",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should add internalPath middleware for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
internalPath: "/hello",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
|
||||||
|
);
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-custom.middlewares=addprefix-test-app-1",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should add path prefix in rule for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
path: "/api",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-custom.rule=Host(`example.com`) && PathPrefix(`/api`)",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should combine all middlewares for custom entrypoint", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
path: "/api",
|
||||||
|
stripPath: true,
|
||||||
|
internalPath: "/hello",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
|
||||||
|
);
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
|
||||||
|
);
|
||||||
|
expect(labels).toContain(
|
||||||
|
"traefik.http.routers.test-app-1-custom.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not add redirect-to-https for custom entrypoint even with https", async () => {
|
||||||
|
const labels = await createDomainLabels(
|
||||||
|
appName,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
https: true,
|
||||||
|
certificateType: "letsencrypt",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
const middlewareLabel = labels.find((l) => l.includes(".middlewares="));
|
||||||
|
// Should not contain redirect-to-https since there's only one router
|
||||||
|
expect(middlewareLabel).toBeUndefined();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -292,7 +292,7 @@ networks:
|
|||||||
dokploy-network:
|
dokploy-network:
|
||||||
`;
|
`;
|
||||||
|
|
||||||
test("It shoudn't add suffix to dokploy-network", () => {
|
test("It shouldn't add suffix to dokploy-network", () => {
|
||||||
const composeData = parse(composeFile7) as ComposeSpecification;
|
const composeData = parse(composeFile7) as ComposeSpecification;
|
||||||
|
|
||||||
const suffix = generateRandomHash();
|
const suffix = generateRandomHash();
|
||||||
|
|||||||
@@ -195,7 +195,7 @@ services:
|
|||||||
- dokploy-network
|
- dokploy-network
|
||||||
`;
|
`;
|
||||||
|
|
||||||
test("It shoudn't add suffix to dokploy-network in services", () => {
|
test("It shouldn't add suffix to dokploy-network in services", () => {
|
||||||
const composeData = parse(composeFile7) as ComposeSpecification;
|
const composeData = parse(composeFile7) as ComposeSpecification;
|
||||||
|
|
||||||
const suffix = generateRandomHash();
|
const suffix = generateRandomHash();
|
||||||
@@ -241,10 +241,10 @@ services:
|
|||||||
dokploy-network:
|
dokploy-network:
|
||||||
aliases:
|
aliases:
|
||||||
- apid
|
- apid
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
test("It shoudn't add suffix to dokploy-network in services multiples cases", () => {
|
test("It shouldn't add suffix to dokploy-network in services multiples cases", () => {
|
||||||
const composeData = parse(composeFile8) as ComposeSpecification;
|
const composeData = parse(composeFile8) as ComposeSpecification;
|
||||||
|
|
||||||
const suffix = generateRandomHash();
|
const suffix = generateRandomHash();
|
||||||
|
|||||||
@@ -415,5 +415,24 @@ describe("Docker Image Name and Tag Extraction", () => {
|
|||||||
expect(extractImageTag("my-image:123")).toBe("123");
|
expect(extractImageTag("my-image:123")).toBe("123");
|
||||||
expect(extractImageTag("my-image:1")).toBe("1");
|
expect(extractImageTag("my-image:1")).toBe("1");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should return 'latest' for registry with port but no tag", () => {
|
||||||
|
expect(extractImageTag("registry.example.com:5000/myimage")).toBe(
|
||||||
|
"latest",
|
||||||
|
);
|
||||||
|
expect(extractImageTag("registry:5000/fedora/httpd")).toBe("latest");
|
||||||
|
expect(extractImageTag("localhost:5000/myapp")).toBe("latest");
|
||||||
|
expect(extractImageTag("my-registry.io:443/org/app")).toBe("latest");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should extract tag from registry with port and tag", () => {
|
||||||
|
expect(extractImageTag("registry:5000/image:tag")).toBe("tag");
|
||||||
|
expect(extractImageTag("registry.example.com:5000/myimage:v2.0")).toBe(
|
||||||
|
"v2.0",
|
||||||
|
);
|
||||||
|
expect(extractImageTag("localhost:5000/app:sha-abc123")).toBe(
|
||||||
|
"sha-abc123",
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
41
apps/dokploy/__test__/deploy/should-deploy.test.ts
Normal file
41
apps/dokploy/__test__/deploy/should-deploy.test.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { shouldDeploy } from "@dokploy/server";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
describe("shouldDeploy", () => {
|
||||||
|
it("should deploy when no watch paths are configured", () => {
|
||||||
|
expect(shouldDeploy(null, ["src/index.ts"])).toBe(true);
|
||||||
|
expect(shouldDeploy([], ["src/index.ts"])).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should deploy when watch paths match modified files", () => {
|
||||||
|
expect(shouldDeploy(["src/**"], ["src/index.ts"])).toBe(true);
|
||||||
|
expect(shouldDeploy(["apps/web/**"], ["apps/web/page.tsx"])).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not deploy when watch paths do not match", () => {
|
||||||
|
expect(shouldDeploy(["src/**"], ["docs/readme.md"])).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw when modified files contain non-string values", () => {
|
||||||
|
expect(() =>
|
||||||
|
shouldDeploy(["src/**"], ["src/index.ts", undefined, null] as any),
|
||||||
|
).not.toThrow();
|
||||||
|
expect(
|
||||||
|
shouldDeploy(["src/**"], ["src/index.ts", undefined, null] as any),
|
||||||
|
).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw when modified files are undefined or null", () => {
|
||||||
|
expect(() => shouldDeploy(["src/**"], undefined)).not.toThrow();
|
||||||
|
expect(() => shouldDeploy(["src/**"], null)).not.toThrow();
|
||||||
|
expect(shouldDeploy(["src/**"], undefined)).toBe(false);
|
||||||
|
expect(shouldDeploy(["src/**"], null)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw when every modified file is non-string", () => {
|
||||||
|
expect(() =>
|
||||||
|
shouldDeploy(["src/**"], [undefined, undefined] as any),
|
||||||
|
).not.toThrow();
|
||||||
|
expect(shouldDeploy(["src/**"], [undefined, undefined] as any)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -120,6 +120,7 @@ const baseApp: ApplicationNested = {
|
|||||||
environmentId: "",
|
environmentId: "",
|
||||||
enabled: null,
|
enabled: null,
|
||||||
env: null,
|
env: null,
|
||||||
|
icon: null,
|
||||||
healthCheckSwarm: null,
|
healthCheckSwarm: null,
|
||||||
labelsSwarm: null,
|
labelsSwarm: null,
|
||||||
memoryLimit: null,
|
memoryLimit: null,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { getEnviromentVariablesObject } from "@dokploy/server/index";
|
import { getEnvironmentVariablesObject } from "@dokploy/server/index";
|
||||||
import { describe, expect, it } from "vitest";
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
const projectEnv = `
|
const projectEnv = `
|
||||||
@@ -15,7 +15,7 @@ DATABASE_NAME=dev_database
|
|||||||
SECRET_KEY=env-secret-123
|
SECRET_KEY=env-secret-123
|
||||||
`;
|
`;
|
||||||
|
|
||||||
describe("getEnviromentVariablesObject with environment variables (Stack compose)", () => {
|
describe("getEnvironmentVariablesObject with environment variables (Stack compose)", () => {
|
||||||
it("resolves environment variables correctly for Stack compose", () => {
|
it("resolves environment variables correctly for Stack compose", () => {
|
||||||
const serviceEnv = `
|
const serviceEnv = `
|
||||||
FOO=\${{environment.NODE_ENV}}
|
FOO=\${{environment.NODE_ENV}}
|
||||||
@@ -23,7 +23,7 @@ BAR=\${{environment.API_URL}}
|
|||||||
BAZ=test
|
BAZ=test
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
serviceEnv,
|
serviceEnv,
|
||||||
projectEnv,
|
projectEnv,
|
||||||
environmentEnv,
|
environmentEnv,
|
||||||
@@ -45,7 +45,7 @@ DATABASE_URL=\${{project.DATABASE_URL}}
|
|||||||
SERVICE_PORT=4000
|
SERVICE_PORT=4000
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
serviceEnv,
|
serviceEnv,
|
||||||
projectEnv,
|
projectEnv,
|
||||||
environmentEnv,
|
environmentEnv,
|
||||||
@@ -72,7 +72,7 @@ PASSWORD=secret123
|
|||||||
DATABASE_URL=postgresql://\${{environment.USERNAME}}:\${{environment.PASSWORD}}@\${{environment.HOST}}:\${{environment.PORT}}/mydb
|
DATABASE_URL=postgresql://\${{environment.USERNAME}}:\${{environment.PASSWORD}}@\${{environment.HOST}}:\${{environment.PORT}}/mydb
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(serviceEnv, "", multiRefEnv);
|
const result = getEnvironmentVariablesObject(serviceEnv, "", multiRefEnv);
|
||||||
|
|
||||||
expect(result).toEqual({
|
expect(result).toEqual({
|
||||||
DATABASE_URL: "postgresql://postgres:secret123@localhost:5432/mydb",
|
DATABASE_URL: "postgresql://postgres:secret123@localhost:5432/mydb",
|
||||||
@@ -85,7 +85,7 @@ UNDEFINED_VAR=\${{environment.UNDEFINED_VAR}}
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
expect(() =>
|
expect(() =>
|
||||||
getEnviromentVariablesObject(serviceWithUndefined, "", environmentEnv),
|
getEnvironmentVariablesObject(serviceWithUndefined, "", environmentEnv),
|
||||||
).toThrow("Invalid environment variable: environment.UNDEFINED_VAR");
|
).toThrow("Invalid environment variable: environment.UNDEFINED_VAR");
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -95,7 +95,7 @@ NODE_ENV=production
|
|||||||
API_URL=\${{environment.API_URL}}
|
API_URL=\${{environment.API_URL}}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
serviceOverrideEnv,
|
serviceOverrideEnv,
|
||||||
"",
|
"",
|
||||||
environmentEnv,
|
environmentEnv,
|
||||||
@@ -115,7 +115,7 @@ SERVICE_NAME=my-service
|
|||||||
COMPLEX_VAR=\${{SERVICE_NAME}}-\${{environment.NODE_ENV}}-\${{project.ENVIRONMENT}}
|
COMPLEX_VAR=\${{SERVICE_NAME}}-\${{environment.NODE_ENV}}-\${{project.ENVIRONMENT}}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
complexServiceEnv,
|
complexServiceEnv,
|
||||||
projectEnv,
|
projectEnv,
|
||||||
environmentEnv,
|
environmentEnv,
|
||||||
@@ -150,7 +150,7 @@ ENV_VAR=\${{environment.API_URL}}
|
|||||||
DB_NAME=\${{environment.DATABASE_NAME}}
|
DB_NAME=\${{environment.DATABASE_NAME}}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
serviceWithConflicts,
|
serviceWithConflicts,
|
||||||
conflictingProjectEnv,
|
conflictingProjectEnv,
|
||||||
conflictingEnvironmentEnv,
|
conflictingEnvironmentEnv,
|
||||||
@@ -170,7 +170,7 @@ SERVICE_VAR=test
|
|||||||
PROJECT_VAR=\${{project.ENVIRONMENT}}
|
PROJECT_VAR=\${{project.ENVIRONMENT}}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const result = getEnviromentVariablesObject(
|
const result = getEnvironmentVariablesObject(
|
||||||
serviceWithEmpty,
|
serviceWithEmpty,
|
||||||
projectEnv,
|
projectEnv,
|
||||||
"",
|
"",
|
||||||
|
|||||||
369
apps/dokploy/__test__/git-provider/git-provider-access.test.ts
Normal file
369
apps/dokploy/__test__/git-provider/git-provider-access.test.ts
Normal file
@@ -0,0 +1,369 @@
|
|||||||
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
import {
|
||||||
|
canEditDeployGitSource,
|
||||||
|
getAccessibleGitProviderIds,
|
||||||
|
} from "@dokploy/server/services/git-provider";
|
||||||
|
|
||||||
|
const mockDb = vi.hoisted(() => ({
|
||||||
|
query: {
|
||||||
|
gitProvider: {
|
||||||
|
findMany: vi.fn(),
|
||||||
|
findFirst: vi.fn(),
|
||||||
|
},
|
||||||
|
member: {
|
||||||
|
findFirst: vi.fn(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@dokploy/server/db", () => ({ db: mockDb }));
|
||||||
|
|
||||||
|
const mockHasValidLicense = vi.hoisted(() => vi.fn());
|
||||||
|
vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
|
||||||
|
hasValidLicense: mockHasValidLicense,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const ORG_ID = "org-1";
|
||||||
|
const USER_OWNER = "user-owner";
|
||||||
|
const USER_ADMIN = "user-admin";
|
||||||
|
const USER_MEMBER = "user-member";
|
||||||
|
const USER_MEMBER_2 = "user-member-2";
|
||||||
|
|
||||||
|
const providerOwned = {
|
||||||
|
gitProviderId: "gp-owned",
|
||||||
|
userId: USER_MEMBER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
};
|
||||||
|
const providerShared = {
|
||||||
|
gitProviderId: "gp-shared",
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: true,
|
||||||
|
};
|
||||||
|
const providerPrivate = {
|
||||||
|
gitProviderId: "gp-private",
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
};
|
||||||
|
const providerOtherMember = {
|
||||||
|
gitProviderId: "gp-other",
|
||||||
|
userId: USER_MEMBER_2,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const allProviders = [
|
||||||
|
providerOwned,
|
||||||
|
providerShared,
|
||||||
|
providerPrivate,
|
||||||
|
providerOtherMember,
|
||||||
|
];
|
||||||
|
|
||||||
|
function session(userId: string) {
|
||||||
|
return { userId, activeOrganizationId: ORG_ID };
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
mockDb.query.gitProvider.findMany.mockResolvedValue(allProviders);
|
||||||
|
mockHasValidLicense.mockResolvedValue(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("getAccessibleGitProviderIds", () => {
|
||||||
|
describe("owner", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "owner",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("returns all org providers", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_OWNER));
|
||||||
|
expect(ids).toEqual(new Set(allProviders.map((p) => p.gitProviderId)));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("includes providers owned by other members", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_OWNER));
|
||||||
|
expect(ids.has(providerOwned.gitProviderId)).toBe(true);
|
||||||
|
expect(ids.has(providerOtherMember.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("admin", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "admin",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("returns all org providers", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_ADMIN));
|
||||||
|
expect(ids).toEqual(new Set(allProviders.map((p) => p.gitProviderId)));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("includes providers owned by other members — fixes issue #4469", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_ADMIN));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(true);
|
||||||
|
expect(ids.has(providerOtherMember.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("member without enterprise license", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [providerPrivate.gitProviderId],
|
||||||
|
});
|
||||||
|
mockHasValidLicense.mockResolvedValue(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can access their own provider", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerOwned.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can access shared providers", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerShared.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot access private providers of other users even if assigned (no license)", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot access providers of other members", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerOtherMember.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("member with enterprise license", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockHasValidLicense.mockResolvedValue(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can access provider explicitly assigned to them", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [providerPrivate.gitProviderId],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot access provider not assigned and not shared", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(false);
|
||||||
|
expect(ids.has(providerOtherMember.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can access shared provider even without explicit assignment", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerShared.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can access own provider regardless of assignments", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerOwned.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot access provider of other member even with license but no assignment", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerOtherMember.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("member with no member record", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue(null);
|
||||||
|
mockHasValidLicense.mockResolvedValue(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("only returns own providers and shared ones", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerOwned.gitProviderId)).toBe(true);
|
||||||
|
expect(ids.has(providerShared.gitProviderId)).toBe(true);
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("enterprise license — member assigned to a provider they do not own", () => {
|
||||||
|
// getAccessibleGitProviderIds still returns the provider (member can connect NEW deploys)
|
||||||
|
it("member assigned to owner's private provider can USE the provider for new deploys", async () => {
|
||||||
|
mockHasValidLicense.mockResolvedValue(true);
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [providerPrivate.gitProviderId],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member NOT assigned to owner's private provider cannot use it at all", async () => {
|
||||||
|
mockHasValidLicense.mockResolvedValue(true);
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "member",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_MEMBER));
|
||||||
|
expect(ids.has(providerPrivate.gitProviderId)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("empty org", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.gitProvider.findMany.mockResolvedValue([]);
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({
|
||||||
|
role: "admin",
|
||||||
|
accessedGitProviders: [],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("returns empty set when org has no providers", async () => {
|
||||||
|
const ids = await getAccessibleGitProviderIds(session(USER_ADMIN));
|
||||||
|
expect(ids.size).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("canEditDeployGitSource", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
mockHasValidLicense.mockResolvedValue(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("owner", () => {
|
||||||
|
it("can edit deploy using any provider", async () => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({ role: "owner" });
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerPrivate.gitProviderId,
|
||||||
|
session(USER_OWNER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("admin", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({ role: "admin" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot edit deploy using owner's private provider (not shared)", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerPrivate.gitProviderId,
|
||||||
|
session(USER_ADMIN),
|
||||||
|
);
|
||||||
|
expect(result).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can edit deploy using a provider shared with the org", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: true,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerShared.gitProviderId,
|
||||||
|
session(USER_ADMIN),
|
||||||
|
);
|
||||||
|
expect(result).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can edit deploy using their own provider", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_ADMIN,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
"gp-admin-owned",
|
||||||
|
session(USER_ADMIN),
|
||||||
|
);
|
||||||
|
expect(result).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("member", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
mockDb.query.member.findFirst.mockResolvedValue({ role: "member" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can edit deploy using their own provider", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_MEMBER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerOwned.gitProviderId,
|
||||||
|
session(USER_MEMBER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("can edit deploy using a provider shared with the org", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: true,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerShared.gitProviderId,
|
||||||
|
session(USER_MEMBER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot edit deploy using owner's private provider even with enterprise license and assignment", async () => {
|
||||||
|
// This is the key case: enterprise, provider del owner, no compartido,
|
||||||
|
// member tiene accessedGitProviders asignado — pero NO puede cambiar la branch del deploy del owner
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_OWNER,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerPrivate.gitProviderId,
|
||||||
|
session(USER_MEMBER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cannot edit deploy using another member's private provider", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue({
|
||||||
|
userId: USER_MEMBER_2,
|
||||||
|
sharedWithOrganization: false,
|
||||||
|
});
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
providerOtherMember.gitProviderId,
|
||||||
|
session(USER_MEMBER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("returns false if provider does not exist", async () => {
|
||||||
|
mockDb.query.gitProvider.findFirst.mockResolvedValue(null);
|
||||||
|
const result = await canEditDeployGitSource(
|
||||||
|
"nonexistent-id",
|
||||||
|
session(USER_MEMBER),
|
||||||
|
);
|
||||||
|
expect(result).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -58,7 +58,7 @@ beforeEach(() => {
|
|||||||
vi.clearAllMocks();
|
vi.clearAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("static roles bypass enterprise resources", () => {
|
describe("owner and admin bypass enterprise resources", () => {
|
||||||
it("owner bypasses deployment.read", async () => {
|
it("owner bypasses deployment.read", async () => {
|
||||||
memberToReturn = mockMemberData("owner");
|
memberToReturn = mockMemberData("owner");
|
||||||
await expect(
|
await expect(
|
||||||
@@ -73,15 +73,8 @@ describe("static roles bypass enterprise resources", () => {
|
|||||||
).resolves.toBeUndefined();
|
).resolves.toBeUndefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("member bypasses schedule.delete", async () => {
|
it("owner bypasses multiple enterprise permissions at once", async () => {
|
||||||
memberToReturn = mockMemberData("member");
|
memberToReturn = mockMemberData("owner");
|
||||||
await expect(
|
|
||||||
checkPermission(ctx, { schedule: ["delete"] }),
|
|
||||||
).resolves.toBeUndefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("member bypasses multiple enterprise permissions at once", async () => {
|
|
||||||
memberToReturn = mockMemberData("member");
|
|
||||||
await expect(
|
await expect(
|
||||||
checkPermission(ctx, {
|
checkPermission(ctx, {
|
||||||
deployment: ["read"],
|
deployment: ["read"],
|
||||||
@@ -92,6 +85,55 @@ describe("static roles bypass enterprise resources", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("member is denied org-level enterprise resources (CVE: bypass via staticRoles)", () => {
|
||||||
|
it("member is denied registry.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { registry: ["read"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied certificate.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { certificate: ["read"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied destination.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { destination: ["read"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied notification.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { notification: ["read"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied auditLog.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { auditLog: ["read"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied server.read", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(checkPermission(ctx, { server: ["read"] })).rejects.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("member is denied registry.create", async () => {
|
||||||
|
memberToReturn = mockMemberData("member");
|
||||||
|
await expect(
|
||||||
|
checkPermission(ctx, { registry: ["create"] }),
|
||||||
|
).rejects.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe("static roles validate free-tier resources", () => {
|
describe("static roles validate free-tier resources", () => {
|
||||||
it("owner passes project.create", async () => {
|
it("owner passes project.create", async () => {
|
||||||
memberToReturn = mockMemberData("owner");
|
memberToReturn = mockMemberData("owner");
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import { describe, it, expect } from "vitest";
|
|
||||||
import {
|
import {
|
||||||
enterpriseOnlyResources,
|
enterpriseOnlyResources,
|
||||||
statements,
|
statements,
|
||||||
} from "@dokploy/server/lib/access-control";
|
} from "@dokploy/server/lib/access-control";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
const FREE_TIER_RESOURCES = [
|
const FREE_TIER_RESOURCES = [
|
||||||
"organization",
|
"organization",
|
||||||
@@ -35,6 +35,7 @@ const ENTERPRISE_RESOURCES = [
|
|||||||
"domain",
|
"domain",
|
||||||
"destination",
|
"destination",
|
||||||
"notification",
|
"notification",
|
||||||
|
"tag",
|
||||||
"logs",
|
"logs",
|
||||||
"monitoring",
|
"monitoring",
|
||||||
"auditLog",
|
"auditLog",
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ const createApplication = (
|
|||||||
env: null,
|
env: null,
|
||||||
},
|
},
|
||||||
replicas: 1,
|
replicas: 1,
|
||||||
stopGracePeriodSwarm: 0n,
|
stopGracePeriodSwarm: 0,
|
||||||
ulimitsSwarm: null,
|
ulimitsSwarm: null,
|
||||||
serverId: "server-id",
|
serverId: "server-id",
|
||||||
...overrides,
|
...overrides,
|
||||||
@@ -76,8 +76,8 @@ describe("mechanizeDockerContainer", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it("converts bigint stopGracePeriodSwarm to a number and keeps zero values", async () => {
|
it("passes stopGracePeriodSwarm as a number and keeps zero values", async () => {
|
||||||
const application = createApplication({ stopGracePeriodSwarm: 0n });
|
const application = createApplication({ stopGracePeriodSwarm: 0 });
|
||||||
|
|
||||||
await mechanizeDockerContainer(application);
|
await mechanizeDockerContainer(application);
|
||||||
|
|
||||||
|
|||||||
@@ -494,4 +494,49 @@ describe("processTemplate", () => {
|
|||||||
expect(result.mounts).toHaveLength(1);
|
expect(result.mounts).toHaveLength(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("isolated deployment config", () => {
|
||||||
|
it("should default to isolated=true when not specified", () => {
|
||||||
|
const template: CompleteTemplate = {
|
||||||
|
metadata: {} as any,
|
||||||
|
variables: {},
|
||||||
|
config: {
|
||||||
|
domains: [],
|
||||||
|
env: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(template.config.isolated).toBeUndefined();
|
||||||
|
// undefined !== false => isolatedDeployment = true
|
||||||
|
expect(template.config.isolated !== false).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should be isolated when isolated=true is explicitly set", () => {
|
||||||
|
const template: CompleteTemplate = {
|
||||||
|
metadata: {} as any,
|
||||||
|
variables: {},
|
||||||
|
config: {
|
||||||
|
isolated: true,
|
||||||
|
domains: [],
|
||||||
|
env: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(template.config.isolated !== false).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should disable isolated deployment when isolated=false", () => {
|
||||||
|
const template: CompleteTemplate = {
|
||||||
|
metadata: {} as any,
|
||||||
|
variables: {},
|
||||||
|
config: {
|
||||||
|
isolated: false,
|
||||||
|
domains: [],
|
||||||
|
env: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(template.config.isolated !== false).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -30,9 +30,7 @@ describe("helpers functions", () => {
|
|||||||
const domain = processValue("${domain}", {}, mockSchema);
|
const domain = processValue("${domain}", {}, mockSchema);
|
||||||
expect(domain.startsWith(`${mockSchema.projectName}-`)).toBeTruthy();
|
expect(domain.startsWith(`${mockSchema.projectName}-`)).toBeTruthy();
|
||||||
expect(
|
expect(
|
||||||
domain.endsWith(
|
domain.endsWith(`${mockSchema.serverIp.replaceAll(".", "-")}.sslip.io`),
|
||||||
`${mockSchema.serverIp.replaceAll(".", "-")}.traefik.me`,
|
|
||||||
),
|
|
||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
233
apps/dokploy/__test__/traefik/forward-auth.test.ts
Normal file
233
apps/dokploy/__test__/traefik/forward-auth.test.ts
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import type { ApplicationNested, Domain } from "@dokploy/server";
|
||||||
|
import {
|
||||||
|
buildForwardAuthEnv,
|
||||||
|
createRouterConfig,
|
||||||
|
deriveBaseDomain,
|
||||||
|
deriveCookieSecret,
|
||||||
|
forwardAuthCallbackUrl,
|
||||||
|
forwardAuthMiddlewareName,
|
||||||
|
} from "@dokploy/server";
|
||||||
|
import { beforeAll, describe, expect, test } from "vitest";
|
||||||
|
|
||||||
|
const app = {
|
||||||
|
appName: "my-app",
|
||||||
|
redirects: [],
|
||||||
|
security: [],
|
||||||
|
} as unknown as ApplicationNested;
|
||||||
|
|
||||||
|
const baseDomain: Domain = {
|
||||||
|
applicationId: "app-1",
|
||||||
|
certificateType: "none",
|
||||||
|
createdAt: "",
|
||||||
|
domainId: "domain-1",
|
||||||
|
host: "app.example.com",
|
||||||
|
https: false,
|
||||||
|
path: null,
|
||||||
|
port: 3000,
|
||||||
|
customEntrypoint: null,
|
||||||
|
serviceName: "",
|
||||||
|
composeId: "",
|
||||||
|
customCertResolver: null,
|
||||||
|
domainType: "application",
|
||||||
|
uniqueConfigKey: 7,
|
||||||
|
previewDeploymentId: "",
|
||||||
|
internalPath: "/",
|
||||||
|
stripPath: false,
|
||||||
|
middlewares: null,
|
||||||
|
forwardAuthEnabled: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("forwardAuthMiddlewareName", () => {
|
||||||
|
test("is stable and unique per app + uniqueConfigKey", () => {
|
||||||
|
expect(forwardAuthMiddlewareName("my-app", 7)).toBe(
|
||||||
|
"forward-auth-my-app-7",
|
||||||
|
);
|
||||||
|
expect(forwardAuthMiddlewareName("my-app", 7)).toBe(
|
||||||
|
forwardAuthMiddlewareName("my-app", 7),
|
||||||
|
);
|
||||||
|
expect(forwardAuthMiddlewareName("my-app", 7)).not.toBe(
|
||||||
|
forwardAuthMiddlewareName("my-app", 8),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("createRouterConfig forward-auth wiring", () => {
|
||||||
|
test("does NOT add forward-auth middleware when no provider is linked", async () => {
|
||||||
|
const config = await createRouterConfig(app, baseDomain, "websecure");
|
||||||
|
expect(config.middlewares).not.toContain(
|
||||||
|
forwardAuthMiddlewareName("my-app", 7),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("adds forward-auth middleware when a provider is linked", async () => {
|
||||||
|
const domain: Domain = {
|
||||||
|
...baseDomain,
|
||||||
|
forwardAuthEnabled: true,
|
||||||
|
};
|
||||||
|
const config = await createRouterConfig(app, domain, "websecure");
|
||||||
|
expect(config.middlewares).toContain(
|
||||||
|
forwardAuthMiddlewareName("my-app", 7),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("forward-auth runs before custom domain middlewares", async () => {
|
||||||
|
const domain: Domain = {
|
||||||
|
...baseDomain,
|
||||||
|
forwardAuthEnabled: true,
|
||||||
|
middlewares: ["rate-limit@file"],
|
||||||
|
};
|
||||||
|
const config = await createRouterConfig(app, domain, "websecure");
|
||||||
|
const forwardAuthIdx = config.middlewares?.indexOf(
|
||||||
|
forwardAuthMiddlewareName("my-app", 7),
|
||||||
|
);
|
||||||
|
const customIdx = config.middlewares?.indexOf("rate-limit@file");
|
||||||
|
expect(forwardAuthIdx).toBeGreaterThanOrEqual(0);
|
||||||
|
expect(customIdx).toBeGreaterThan(forwardAuthIdx as number);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("redirect-only web router does not get the forward-auth middleware", async () => {
|
||||||
|
const domain: Domain = {
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
forwardAuthEnabled: true,
|
||||||
|
};
|
||||||
|
const config = await createRouterConfig(app, domain, "web");
|
||||||
|
expect(config.middlewares).toContain("redirect-to-https");
|
||||||
|
expect(config.middlewares).not.toContain(
|
||||||
|
forwardAuthMiddlewareName("my-app", 7),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("buildForwardAuthEnv", () => {
|
||||||
|
const baseOptions = {
|
||||||
|
oidc: {
|
||||||
|
clientId: "client-123",
|
||||||
|
clientSecret: "secret-xyz",
|
||||||
|
issuer: "https://idp.example.com",
|
||||||
|
},
|
||||||
|
cookieSecret: "cookie-secret-value",
|
||||||
|
authDomain: "auth.acme.com",
|
||||||
|
baseDomain: ".acme.com",
|
||||||
|
authDomainHttps: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
test("emits the required oauth2-proxy OIDC env vars", () => {
|
||||||
|
const env = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_PROVIDER=oidc");
|
||||||
|
expect(env).toContain(
|
||||||
|
"OAUTH2_PROXY_OIDC_ISSUER_URL=https://idp.example.com",
|
||||||
|
);
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_CLIENT_ID=client-123");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_CLIENT_SECRET=secret-xyz");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_COOKIE_SECRET=cookie-secret-value");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_REVERSE_PROXY=true");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_HTTP_ADDRESS=0.0.0.0:4180");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("uses the central auth domain for the single fixed callback", () => {
|
||||||
|
const env = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(env).toContain(
|
||||||
|
"OAUTH2_PROXY_REDIRECT_URL=https://auth.acme.com/oauth2/callback",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("shares cookie + whitelist on the base domain (no per-app redeploy)", () => {
|
||||||
|
const env = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_COOKIE_DOMAINS=.acme.com");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_WHITELIST_DOMAINS=.acme.com");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("matches cookie Secure flag and callback scheme to https setting", () => {
|
||||||
|
const https = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(https).toContain("OAUTH2_PROXY_COOKIE_SECURE=true");
|
||||||
|
|
||||||
|
const http = buildForwardAuthEnv({
|
||||||
|
...baseOptions,
|
||||||
|
authDomainHttps: false,
|
||||||
|
});
|
||||||
|
expect(http).toContain("OAUTH2_PROXY_COOKIE_SECURE=false");
|
||||||
|
expect(http).toContain(
|
||||||
|
"OAUTH2_PROXY_REDIRECT_URL=http://auth.acme.com/oauth2/callback",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("allows unverified emails so OIDC providers don't 500 the callback", () => {
|
||||||
|
const env = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(env).toContain(
|
||||||
|
"OAUTH2_PROXY_INSECURE_OIDC_ALLOW_UNVERIFIED_EMAIL=true",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("defaults to any authenticated user and standard scopes", () => {
|
||||||
|
const env = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_EMAIL_DOMAINS=*");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_SCOPE=openid email profile");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("honors custom scopes and email domains", () => {
|
||||||
|
const env = buildForwardAuthEnv({
|
||||||
|
...baseOptions,
|
||||||
|
oidc: { ...baseOptions.oidc, scopes: ["openid", "groups"] },
|
||||||
|
emailDomains: ["acme.com", "corp.com"],
|
||||||
|
});
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_SCOPE=openid groups");
|
||||||
|
expect(env).toContain("OAUTH2_PROXY_EMAIL_DOMAINS=acme.com,corp.com");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("sets skip-discovery flag only when requested", () => {
|
||||||
|
const withoutSkip = buildForwardAuthEnv(baseOptions);
|
||||||
|
expect(withoutSkip).not.toContain("OAUTH2_PROXY_SKIP_OIDC_DISCOVERY=true");
|
||||||
|
|
||||||
|
const withSkip = buildForwardAuthEnv({
|
||||||
|
...baseOptions,
|
||||||
|
oidc: { ...baseOptions.oidc, skipDiscovery: true },
|
||||||
|
});
|
||||||
|
expect(withSkip).toContain("OAUTH2_PROXY_SKIP_OIDC_DISCOVERY=true");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("deriveBaseDomain", () => {
|
||||||
|
test("strips the auth subdomain to the shared base", () => {
|
||||||
|
expect(deriveBaseDomain("auth.acme.com")).toBe(".acme.com");
|
||||||
|
expect(deriveBaseDomain("sso.apps.acme.com")).toBe(".apps.acme.com");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("keeps a two-label apex as the base", () => {
|
||||||
|
expect(deriveBaseDomain("acme.com")).toBe(".acme.com");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("forwardAuthCallbackUrl", () => {
|
||||||
|
test("builds the single IdP callback per scheme", () => {
|
||||||
|
expect(forwardAuthCallbackUrl("auth.acme.com", true)).toBe(
|
||||||
|
"https://auth.acme.com/oauth2/callback",
|
||||||
|
);
|
||||||
|
expect(forwardAuthCallbackUrl("auth.acme.com", false)).toBe(
|
||||||
|
"http://auth.acme.com/oauth2/callback",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("deriveCookieSecret", () => {
|
||||||
|
beforeAll(() => {
|
||||||
|
process.env.BETTER_AUTH_SECRET = "test-root-secret";
|
||||||
|
});
|
||||||
|
|
||||||
|
test("is deterministic for the same salt (survives service updates)", () => {
|
||||||
|
expect(deriveCookieSecret(".acme.com")).toBe(
|
||||||
|
deriveCookieSecret(".acme.com"),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("differs per salt", () => {
|
||||||
|
expect(deriveCookieSecret(".acme.com")).not.toBe(
|
||||||
|
deriveCookieSecret(".other.com"),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("produces a 16-byte hex secret (oauth2-proxy requirement)", () => {
|
||||||
|
const secret = deriveCookieSecret(".acme.com");
|
||||||
|
expect(Buffer.from(secret, "hex")).toHaveLength(16);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -65,6 +65,8 @@ const baseSettings: WebServerSettings = {
|
|||||||
cleanupCacheApplications: false,
|
cleanupCacheApplications: false,
|
||||||
cleanupCacheOnCompose: false,
|
cleanupCacheOnCompose: false,
|
||||||
cleanupCacheOnPreviews: false,
|
cleanupCacheOnPreviews: false,
|
||||||
|
remoteServersOnly: false,
|
||||||
|
enforceSSO: false,
|
||||||
createdAt: null,
|
createdAt: null,
|
||||||
updatedAt: new Date(),
|
updatedAt: new Date(),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -95,6 +95,7 @@ const baseApp: ApplicationNested = {
|
|||||||
dropBuildPath: null,
|
dropBuildPath: null,
|
||||||
enabled: null,
|
enabled: null,
|
||||||
env: null,
|
env: null,
|
||||||
|
icon: null,
|
||||||
healthCheckSwarm: null,
|
healthCheckSwarm: null,
|
||||||
labelsSwarm: null,
|
labelsSwarm: null,
|
||||||
memoryLimit: null,
|
memoryLimit: null,
|
||||||
@@ -137,6 +138,7 @@ const baseDomain: Domain = {
|
|||||||
https: false,
|
https: false,
|
||||||
path: null,
|
path: null,
|
||||||
port: null,
|
port: null,
|
||||||
|
customEntrypoint: null,
|
||||||
serviceName: "",
|
serviceName: "",
|
||||||
composeId: "",
|
composeId: "",
|
||||||
customCertResolver: null,
|
customCertResolver: null,
|
||||||
@@ -145,6 +147,8 @@ const baseDomain: Domain = {
|
|||||||
previewDeploymentId: "",
|
previewDeploymentId: "",
|
||||||
internalPath: "/",
|
internalPath: "/",
|
||||||
stripPath: false,
|
stripPath: false,
|
||||||
|
middlewares: null,
|
||||||
|
forwardAuthEnabled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const baseRedirect: Redirect = {
|
const baseRedirect: Redirect = {
|
||||||
@@ -264,6 +268,80 @@ test("Websecure entrypoint on https domain with redirect", async () => {
|
|||||||
expect(router.middlewares).toContain("redirect-test-1");
|
expect(router.middlewares).toContain("redirect-test-1");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/** Custom Middlewares */
|
||||||
|
|
||||||
|
test("Web entrypoint with single custom middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, middlewares: ["auth@file"] },
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.middlewares).toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Web entrypoint with multiple custom middlewares", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, middlewares: ["auth@file", "rate-limit@file"] },
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.middlewares).toContain("auth@file");
|
||||||
|
expect(router.middlewares).toContain("rate-limit@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Web entrypoint on https domain with custom middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, https: true, middlewares: ["auth@file"] },
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should only have HTTPS redirect - custom middleware applies on websecure
|
||||||
|
expect(router.middlewares).toContain("redirect-to-https");
|
||||||
|
expect(router.middlewares).not.toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Websecure entrypoint with custom middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, https: true, middlewares: ["auth@file"] },
|
||||||
|
"websecure",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should have custom middleware but not HTTPS redirect
|
||||||
|
expect(router.middlewares).not.toContain("redirect-to-https");
|
||||||
|
expect(router.middlewares).toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Web entrypoint with redirect and custom middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
{
|
||||||
|
...baseApp,
|
||||||
|
appName: "test",
|
||||||
|
redirects: [{ ...baseRedirect, uniqueConfigKey: 1 }],
|
||||||
|
},
|
||||||
|
{ ...baseDomain, middlewares: ["auth@file"] },
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should have both redirect middleware and custom middleware
|
||||||
|
expect(router.middlewares).toContain("redirect-test-1");
|
||||||
|
expect(router.middlewares).toContain("auth@file");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Web entrypoint with empty middlewares array", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, https: false, middlewares: [] },
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should behave same as no middlewares - no redirect for http
|
||||||
|
expect(router.middlewares).not.toContain("redirect-to-https");
|
||||||
|
});
|
||||||
|
|
||||||
/** Certificates */
|
/** Certificates */
|
||||||
|
|
||||||
test("CertificateType on websecure entrypoint", async () => {
|
test("CertificateType on websecure entrypoint", async () => {
|
||||||
@@ -276,6 +354,130 @@ test("CertificateType on websecure entrypoint", async () => {
|
|||||||
expect(router.tls?.certResolver).toBe("letsencrypt");
|
expect(router.tls?.certResolver).toBe("letsencrypt");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint on http domain", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, https: false, customEntrypoint: "custom" },
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
expect(router.middlewares).not.toContain("redirect-to-https");
|
||||||
|
expect(router.tls).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint on https domain", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
certificateType: "letsencrypt",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
expect(router.middlewares).not.toContain("redirect-to-https");
|
||||||
|
expect(router.tls?.certResolver).toBe("letsencrypt");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint with path includes PathPrefix in rule", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{ ...baseDomain, customEntrypoint: "custom", path: "/api" },
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.rule).toContain("PathPrefix(`/api`)");
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint with stripPath adds stripprefix middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
path: "/api",
|
||||||
|
stripPath: true,
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.middlewares).toContain("stripprefix--1");
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint with internalPath adds addprefix middleware", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
internalPath: "/hello",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.middlewares).toContain("addprefix--1");
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("stripPath and internalPath together: stripprefix must come before addprefix", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
path: "/public",
|
||||||
|
stripPath: true,
|
||||||
|
internalPath: "/app/v2",
|
||||||
|
},
|
||||||
|
"web",
|
||||||
|
);
|
||||||
|
|
||||||
|
const stripIndex = router.middlewares?.indexOf("stripprefix--1") ?? -1;
|
||||||
|
const addIndex = router.middlewares?.indexOf("addprefix--1") ?? -1;
|
||||||
|
|
||||||
|
expect(stripIndex).toBeGreaterThanOrEqual(0);
|
||||||
|
expect(addIndex).toBeGreaterThanOrEqual(0);
|
||||||
|
expect(stripIndex).toBeLessThan(addIndex);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint with https and custom cert resolver", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
https: true,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
certificateType: "custom",
|
||||||
|
customCertResolver: "myresolver",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
expect(router.tls?.certResolver).toBe("myresolver");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Custom entrypoint without https should not have tls", async () => {
|
||||||
|
const router = await createRouterConfig(
|
||||||
|
baseApp,
|
||||||
|
{
|
||||||
|
...baseDomain,
|
||||||
|
https: false,
|
||||||
|
customEntrypoint: "custom",
|
||||||
|
certificateType: "letsencrypt",
|
||||||
|
},
|
||||||
|
"custom",
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(router.entryPoints).toEqual(["custom"]);
|
||||||
|
expect(router.tls).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
/** IDN/Punycode */
|
/** IDN/Punycode */
|
||||||
|
|
||||||
test("Internationalized domain name is converted to punycode", async () => {
|
test("Internationalized domain name is converted to punycode", async () => {
|
||||||
|
|||||||
@@ -78,4 +78,20 @@ describe("readValidDirectory (path traversal)", () => {
|
|||||||
it("returns false for empty string (resolves to cwd)", () => {
|
it("returns false for empty string (resolves to cwd)", () => {
|
||||||
expect(readValidDirectory("")).toBe(false);
|
expect(readValidDirectory("")).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("returns true for Next.js dynamic route paths with square brackets", () => {
|
||||||
|
expect(
|
||||||
|
readValidDirectory(
|
||||||
|
`${BASE}/applications/myapp/code/app/api/[id]/route.ts`,
|
||||||
|
),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
readValidDirectory(`${BASE}/applications/myapp/code/pages/[slug].tsx`),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
readValidDirectory(
|
||||||
|
`${BASE}/applications/myapp/code/app/[...catch]/page.tsx`,
|
||||||
|
),
|
||||||
|
).toBe(true);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -112,14 +112,21 @@ const menuItems: MenuItem[] = [
|
|||||||
|
|
||||||
const hasStopGracePeriodSwarm = (
|
const hasStopGracePeriodSwarm = (
|
||||||
value: unknown,
|
value: unknown,
|
||||||
): value is { stopGracePeriodSwarm: bigint | number | string | null } =>
|
): value is { stopGracePeriodSwarm: number | string | null } =>
|
||||||
typeof value === "object" &&
|
typeof value === "object" &&
|
||||||
value !== null &&
|
value !== null &&
|
||||||
"stopGracePeriodSwarm" in value;
|
"stopGracePeriodSwarm" in value;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "application"
|
||||||
|
| "libsql"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "postgres"
|
||||||
|
| "redis";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AddSwarmSettings = ({ id, type }: Props) => {
|
export const AddSwarmSettings = ({ id, type }: Props) => {
|
||||||
|
|||||||
@@ -37,27 +37,27 @@ import { AddSwarmSettings } from "./modify-swarm-settings";
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type: "application" | "mariadb" | "mongo" | "mysql" | "postgres" | "redis";
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddRedirectchema = z.object({
|
const AddRedirectSchema = z.object({
|
||||||
replicas: z.number().min(1, "Replicas must be at least 1"),
|
replicas: z.number().min(1, "Replicas must be at least 1"),
|
||||||
registryId: z.string().optional(),
|
registryId: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
type AddCommand = z.infer<typeof AddRedirectchema>;
|
type AddCommand = z.infer<typeof AddRedirectSchema>;
|
||||||
|
|
||||||
export const ShowClusterSettings = ({ id, type }: Props) => {
|
export const ShowClusterSettings = ({ id, type }: Props) => {
|
||||||
const queryMap = {
|
const queryMap = {
|
||||||
|
application: () =>
|
||||||
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
|
mariadb: () =>
|
||||||
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
postgres: () =>
|
postgres: () =>
|
||||||
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
||||||
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
||||||
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
|
||||||
mariadb: () =>
|
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
|
||||||
application: () =>
|
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -65,12 +65,13 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
|
|||||||
const { data: registries } = api.registry.all.useQuery();
|
const { data: registries } = api.registry.all.useQuery();
|
||||||
|
|
||||||
const mutationMap = {
|
const mutationMap = {
|
||||||
|
application: () => api.application.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
mysql: () => api.mysql.update.useMutation(),
|
||||||
postgres: () => api.postgres.update.useMutation(),
|
postgres: () => api.postgres.update.useMutation(),
|
||||||
redis: () => api.redis.update.useMutation(),
|
redis: () => api.redis.update.useMutation(),
|
||||||
mysql: () => api.mysql.update.useMutation(),
|
|
||||||
mariadb: () => api.mariadb.update.useMutation(),
|
|
||||||
application: () => api.application.update.useMutation(),
|
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync, isPending } = mutationMap[type]
|
const { mutateAsync, isPending } = mutationMap[type]
|
||||||
@@ -86,7 +87,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
|
|||||||
: {}),
|
: {}),
|
||||||
replicas: data?.replicas || 1,
|
replicas: data?.replicas || 1,
|
||||||
},
|
},
|
||||||
resolver: zodResolver(AddRedirectchema),
|
resolver: zodResolver(AddRedirectSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -105,11 +106,11 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
|
|||||||
const onSubmit = async (data: AddCommand) => {
|
const onSubmit = async (data: AddCommand) => {
|
||||||
await mutateAsync({
|
await mutateAsync({
|
||||||
applicationId: id || "",
|
applicationId: id || "",
|
||||||
postgresId: id || "",
|
|
||||||
redisId: id || "",
|
|
||||||
mysqlId: id || "",
|
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
mysqlId: id || "",
|
||||||
|
postgresId: id || "",
|
||||||
|
redisId: id || "",
|
||||||
...(type === "application"
|
...(type === "application"
|
||||||
? {
|
? {
|
||||||
registryId:
|
registryId:
|
||||||
|
|||||||
@@ -28,7 +28,14 @@ export const endpointSpecFormSchema = z.object({
|
|||||||
|
|
||||||
interface EndpointSpecFormProps {
|
interface EndpointSpecFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
|
export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
|
||||||
@@ -44,6 +51,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -56,6 +64,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -94,6 +103,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
endpointSpecSwarm: hasAnyValue ? formData : null,
|
endpointSpecSwarm: hasAnyValue ? formData : null,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -16,17 +16,29 @@ import {
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
const optionalNumber = z
|
||||||
|
.union([z.string(), z.number()])
|
||||||
|
.transform((val) => (val === "" ? undefined : Number(val)))
|
||||||
|
.optional();
|
||||||
|
|
||||||
export const healthCheckFormSchema = z.object({
|
export const healthCheckFormSchema = z.object({
|
||||||
Test: z.array(z.string()).optional(),
|
Test: z.array(z.string()).optional(),
|
||||||
Interval: z.coerce.number().optional(),
|
Interval: optionalNumber,
|
||||||
Timeout: z.coerce.number().optional(),
|
Timeout: optionalNumber,
|
||||||
StartPeriod: z.coerce.number().optional(),
|
StartPeriod: optionalNumber,
|
||||||
Retries: z.coerce.number().optional(),
|
Retries: optionalNumber,
|
||||||
});
|
});
|
||||||
|
|
||||||
interface HealthCheckFormProps {
|
interface HealthCheckFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
||||||
@@ -42,6 +54,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -54,6 +67,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -104,6 +118,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
healthCheckSwarm: hasAnyValue ? formData : null,
|
healthCheckSwarm: hasAnyValue ? formData : null,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -185,7 +200,12 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
Time between health checks (e.g., 10000000000 for 10 seconds)
|
Time between health checks (e.g., 10000000000 for 10 seconds)
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" placeholder="10000000000" {...field} />
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="10000000000"
|
||||||
|
{...field}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@@ -202,7 +222,12 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
Maximum time to wait for health check response
|
Maximum time to wait for health check response
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" placeholder="10000000000" {...field} />
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="10000000000"
|
||||||
|
{...field}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@@ -219,7 +244,12 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
Initial grace period before health checks begin
|
Initial grace period before health checks begin
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" placeholder="10000000000" {...field} />
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="10000000000"
|
||||||
|
{...field}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@@ -237,7 +267,12 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
|
|||||||
unhealthy
|
unhealthy
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" placeholder="3" {...field} />
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="3"
|
||||||
|
{...field}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|||||||
@@ -29,7 +29,14 @@ export const labelsFormSchema = z.object({
|
|||||||
|
|
||||||
interface LabelsFormProps {
|
interface LabelsFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LabelsForm = ({ id, type }: LabelsFormProps) => {
|
export const LabelsForm = ({ id, type }: LabelsFormProps) => {
|
||||||
@@ -45,6 +52,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -57,6 +65,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -112,6 +121,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
labelsSwarm: labelsToSend,
|
labelsSwarm: labelsToSend,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,14 @@ import { api } from "@/utils/api";
|
|||||||
|
|
||||||
interface ModeFormProps {
|
interface ModeFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ModeForm = ({ id, type }: ModeFormProps) => {
|
export const ModeForm = ({ id, type }: ModeFormProps) => {
|
||||||
@@ -39,6 +46,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -51,6 +59,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -95,6 +104,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
modeSwarm: null,
|
modeSwarm: null,
|
||||||
});
|
});
|
||||||
toast.success("Mode updated successfully");
|
toast.success("Mode updated successfully");
|
||||||
@@ -122,6 +132,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
modeSwarm: modeData,
|
modeSwarm: modeData,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -35,7 +35,14 @@ export const networkFormSchema = z.object({
|
|||||||
|
|
||||||
interface NetworkFormProps {
|
interface NetworkFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const NetworkForm = ({ id, type }: NetworkFormProps) => {
|
export const NetworkForm = ({ id, type }: NetworkFormProps) => {
|
||||||
@@ -51,6 +58,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -63,6 +71,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -132,6 +141,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
networkSwarm: networksToSend,
|
networkSwarm: networksToSend,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,14 @@ export const placementFormSchema = z.object({
|
|||||||
|
|
||||||
interface PlacementFormProps {
|
interface PlacementFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PlacementForm = ({ id, type }: PlacementFormProps) => {
|
export const PlacementForm = ({ id, type }: PlacementFormProps) => {
|
||||||
@@ -50,6 +57,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -62,6 +70,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -114,6 +123,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
placementSwarm: hasAnyValue
|
placementSwarm: hasAnyValue
|
||||||
? {
|
? {
|
||||||
...formData,
|
...formData,
|
||||||
|
|||||||
@@ -32,7 +32,14 @@ export const restartPolicyFormSchema = z.object({
|
|||||||
|
|
||||||
interface RestartPolicyFormProps {
|
interface RestartPolicyFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
|
export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
|
||||||
@@ -48,6 +55,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -60,6 +68,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -104,6 +113,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
restartPolicySwarm: hasAnyValue ? formData : null,
|
restartPolicySwarm: hasAnyValue ? formData : null,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,14 @@ export const rollbackConfigFormSchema = z.object({
|
|||||||
|
|
||||||
interface RollbackConfigFormProps {
|
interface RollbackConfigFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
|
export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
|
||||||
@@ -50,6 +57,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -62,6 +70,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -103,6 +112,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
rollbackConfigSwarm: (hasAnyValue ? formData : null) as any,
|
rollbackConfigSwarm: (hasAnyValue ? formData : null) as any,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -16,14 +16,21 @@ import { api } from "@/utils/api";
|
|||||||
|
|
||||||
const hasStopGracePeriodSwarm = (
|
const hasStopGracePeriodSwarm = (
|
||||||
value: unknown,
|
value: unknown,
|
||||||
): value is { stopGracePeriodSwarm: bigint | number | string | null } =>
|
): value is { stopGracePeriodSwarm: number | string | null } =>
|
||||||
typeof value === "object" &&
|
typeof value === "object" &&
|
||||||
value !== null &&
|
value !== null &&
|
||||||
"stopGracePeriodSwarm" in value;
|
"stopGracePeriodSwarm" in value;
|
||||||
|
|
||||||
interface StopGracePeriodFormProps {
|
interface StopGracePeriodFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
||||||
@@ -39,6 +46,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -51,6 +59,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -59,7 +68,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
|
|
||||||
const form = useForm<any>({
|
const form = useForm<any>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
value: null as bigint | null,
|
value: null as number | null,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -67,11 +76,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
if (hasStopGracePeriodSwarm(data)) {
|
if (hasStopGracePeriodSwarm(data)) {
|
||||||
const value = data.stopGracePeriodSwarm;
|
const value = data.stopGracePeriodSwarm;
|
||||||
const normalizedValue =
|
const normalizedValue =
|
||||||
value === null || value === undefined
|
value === null || value === undefined ? null : Number(value);
|
||||||
? null
|
|
||||||
: typeof value === "bigint"
|
|
||||||
? value
|
|
||||||
: BigInt(value);
|
|
||||||
form.reset({
|
form.reset({
|
||||||
value: normalizedValue,
|
value: normalizedValue,
|
||||||
});
|
});
|
||||||
@@ -88,6 +93,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
stopGracePeriodSwarm: formData.value,
|
stopGracePeriodSwarm: formData.value,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -126,7 +132,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
|
|||||||
}
|
}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
field.onChange(
|
field.onChange(
|
||||||
e.target.value ? BigInt(e.target.value) : null,
|
e.target.value ? Number(e.target.value) : null,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -34,7 +34,14 @@ export const updateConfigFormSchema = z.object({
|
|||||||
|
|
||||||
interface UpdateConfigFormProps {
|
interface UpdateConfigFormProps {
|
||||||
id: string;
|
id: string;
|
||||||
type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
|
type:
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "redis"
|
||||||
|
| "application"
|
||||||
|
| "libsql";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
|
export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
|
||||||
@@ -50,6 +57,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
|
|||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -62,6 +70,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
|
|||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
application: () => api.application.update.useMutation(),
|
application: () => api.application.update.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync } = mutationMap[type]
|
const { mutateAsync } = mutationMap[type]
|
||||||
@@ -109,6 +118,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
|
|||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
updateConfigSwarm: (hasAnyValue ? formData : null) as any,
|
updateConfigSwarm: (hasAnyValue ? formData : null) as any,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -37,13 +37,13 @@ import { Separator } from "@/components/ui/separator";
|
|||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
const AddRedirectchema = z.object({
|
const AddRedirectSchema = z.object({
|
||||||
regex: z.string().min(1, "Regex required"),
|
regex: z.string().min(1, "Regex required"),
|
||||||
permanent: z.boolean().default(false),
|
permanent: z.boolean().default(false),
|
||||||
replacement: z.string().min(1, "Replacement required"),
|
replacement: z.string().min(1, "Replacement required"),
|
||||||
});
|
});
|
||||||
|
|
||||||
type AddRedirect = z.infer<typeof AddRedirectchema>;
|
type AddRedirect = z.infer<typeof AddRedirectSchema>;
|
||||||
|
|
||||||
// Default presets
|
// Default presets
|
||||||
const redirectPresets = [
|
const redirectPresets = [
|
||||||
@@ -110,7 +110,7 @@ export const HandleRedirect = ({
|
|||||||
regex: "",
|
regex: "",
|
||||||
replacement: "",
|
replacement: "",
|
||||||
},
|
},
|
||||||
resolver: zodResolver(AddRedirectchema),
|
resolver: zodResolver(AddRedirectSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -149,7 +149,7 @@ export const HandleRedirect = ({
|
|||||||
|
|
||||||
const onDialogToggle = (open: boolean) => {
|
const onDialogToggle = (open: boolean) => {
|
||||||
setIsOpen(open);
|
setIsOpen(open);
|
||||||
// commented for the moment because not reseting the form if accidentally closed the dialog can be considered as a feature instead of a bug
|
// commented for the moment because not resetting the form if accidentally closed the dialog can be considered as a feature instead of a bug
|
||||||
// setPresetSelected("");
|
// setPresetSelected("");
|
||||||
// form.reset();
|
// form.reset();
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -89,12 +89,13 @@ const ULIMIT_PRESETS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export type ServiceType =
|
export type ServiceType =
|
||||||
| "postgres"
|
| "application"
|
||||||
| "mongo"
|
| "libsql"
|
||||||
| "redis"
|
|
||||||
| "mysql"
|
|
||||||
| "mariadb"
|
| "mariadb"
|
||||||
| "application";
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "postgres"
|
||||||
|
| "redis";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -105,27 +106,29 @@ type AddResources = z.infer<typeof addResourcesSchema>;
|
|||||||
|
|
||||||
export const ShowResources = ({ id, type }: Props) => {
|
export const ShowResources = ({ id, type }: Props) => {
|
||||||
const queryMap = {
|
const queryMap = {
|
||||||
|
application: () =>
|
||||||
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
|
mariadb: () =>
|
||||||
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
postgres: () =>
|
postgres: () =>
|
||||||
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
||||||
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
||||||
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
|
||||||
mariadb: () =>
|
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
|
||||||
application: () =>
|
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
|
: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
|
||||||
|
|
||||||
const mutationMap = {
|
const mutationMap = {
|
||||||
|
application: () => api.application.update.useMutation(),
|
||||||
|
libsql: () => api.libsql.update.useMutation(),
|
||||||
|
mariadb: () => api.mariadb.update.useMutation(),
|
||||||
|
mongo: () => api.mongo.update.useMutation(),
|
||||||
|
mysql: () => api.mysql.update.useMutation(),
|
||||||
postgres: () => api.postgres.update.useMutation(),
|
postgres: () => api.postgres.update.useMutation(),
|
||||||
redis: () => api.redis.update.useMutation(),
|
redis: () => api.redis.update.useMutation(),
|
||||||
mysql: () => api.mysql.update.useMutation(),
|
|
||||||
mariadb: () => api.mariadb.update.useMutation(),
|
|
||||||
application: () => api.application.update.useMutation(),
|
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutateAsync, isPending } = mutationMap[type]
|
const { mutateAsync, isPending } = mutationMap[type]
|
||||||
@@ -155,19 +158,20 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
cpuReservation: data?.cpuReservation || undefined,
|
cpuReservation: data?.cpuReservation || undefined,
|
||||||
memoryLimit: data?.memoryLimit || undefined,
|
memoryLimit: data?.memoryLimit || undefined,
|
||||||
memoryReservation: data?.memoryReservation || undefined,
|
memoryReservation: data?.memoryReservation || undefined,
|
||||||
ulimitsSwarm: data?.ulimitsSwarm || [],
|
ulimitsSwarm: (data as any)?.ulimitsSwarm || [],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [data, form, form.reset]);
|
}, [data, form, form.reset]);
|
||||||
|
|
||||||
const onSubmit = async (formData: AddResources) => {
|
const onSubmit = async (formData: AddResources) => {
|
||||||
await mutateAsync({
|
await mutateAsync({
|
||||||
|
applicationId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
mysqlId: id || "",
|
||||||
postgresId: id || "",
|
postgresId: id || "",
|
||||||
redisId: id || "",
|
redisId: id || "",
|
||||||
mysqlId: id || "",
|
|
||||||
mariadbId: id || "",
|
|
||||||
applicationId: id || "",
|
|
||||||
cpuLimit: formData.cpuLimit || null,
|
cpuLimit: formData.cpuLimit || null,
|
||||||
cpuReservation: formData.cpuReservation || null,
|
cpuReservation: formData.cpuReservation || null,
|
||||||
memoryLimit: formData.memoryLimit || null,
|
memoryLimit: formData.memoryLimit || null,
|
||||||
@@ -220,7 +224,7 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
<FormLabel>Memory Limit</FormLabel>
|
<FormLabel>Memory Limit</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip delayDuration={0}>
|
<Tooltip delayDuration={0}>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
@@ -259,7 +263,7 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
<FormLabel>Memory Reservation</FormLabel>
|
<FormLabel>Memory Reservation</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip delayDuration={0}>
|
<Tooltip delayDuration={0}>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
@@ -299,7 +303,7 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
<FormLabel>CPU Limit</FormLabel>
|
<FormLabel>CPU Limit</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip delayDuration={0}>
|
<Tooltip delayDuration={0}>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
@@ -339,7 +343,7 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
<FormLabel>CPU Reservation</FormLabel>
|
<FormLabel>CPU Reservation</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip delayDuration={0}>
|
<Tooltip delayDuration={0}>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
@@ -375,7 +379,7 @@ export const ShowResources = ({ id, type }: Props) => {
|
|||||||
<FormLabel className="text-base">Ulimits</FormLabel>
|
<FormLabel className="text-base">Ulimits</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip delayDuration={0}>
|
<Tooltip delayDuration={0}>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
<InfoIcon className="h-4 w-4 text-muted-foreground" />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent className="max-w-xs">
|
<TooltipContent className="max-w-xs">
|
||||||
|
|||||||
@@ -34,13 +34,13 @@ interface Props {
|
|||||||
serviceId: string;
|
serviceId: string;
|
||||||
serviceType:
|
serviceType:
|
||||||
| "application"
|
| "application"
|
||||||
| "postgres"
|
| "compose"
|
||||||
| "redis"
|
| "libsql"
|
||||||
| "mongo"
|
|
||||||
| "redis"
|
|
||||||
| "mysql"
|
|
||||||
| "mariadb"
|
| "mariadb"
|
||||||
| "compose";
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "postgres"
|
||||||
|
| "redis";
|
||||||
refetch: () => void;
|
refetch: () => void;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,23 +29,25 @@ export const ShowVolumes = ({ id, type }: Props) => {
|
|||||||
if (!canRead) return null;
|
if (!canRead) return null;
|
||||||
|
|
||||||
const queryMap = {
|
const queryMap = {
|
||||||
|
application: () =>
|
||||||
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
|
compose: () =>
|
||||||
|
api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
|
mariadb: () =>
|
||||||
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
postgres: () =>
|
postgres: () =>
|
||||||
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
||||||
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
||||||
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
|
||||||
mariadb: () =>
|
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
|
||||||
application: () =>
|
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
|
||||||
compose: () =>
|
|
||||||
api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
|
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
|
: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
|
||||||
const { mutateAsync: deleteVolume, isPending: isRemoving } =
|
const { mutateAsync: deleteVolume, isPending: isRemoving } =
|
||||||
api.mounts.remove.useMutation();
|
api.mounts.remove.useMutation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="bg-background">
|
<Card className="bg-background">
|
||||||
<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
|
<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
|
||||||
|
|||||||
@@ -67,13 +67,13 @@ interface Props {
|
|||||||
refetch: () => void;
|
refetch: () => void;
|
||||||
serviceType:
|
serviceType:
|
||||||
| "application"
|
| "application"
|
||||||
| "postgres"
|
| "compose"
|
||||||
| "redis"
|
| "libsql"
|
||||||
| "mongo"
|
|
||||||
| "redis"
|
|
||||||
| "mysql"
|
|
||||||
| "mariadb"
|
| "mariadb"
|
||||||
| "compose";
|
| "mongo"
|
||||||
|
| "mysql"
|
||||||
|
| "postgres"
|
||||||
|
| "redis";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UpdateVolume = ({
|
export const UpdateVolume = ({
|
||||||
@@ -253,7 +253,7 @@ export const UpdateVolume = ({
|
|||||||
control={form.control}
|
control={form.control}
|
||||||
name="content"
|
name="content"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="max-w-full max-w-[45rem]">
|
<FormItem className="w-full max-w-[45rem]">
|
||||||
<FormLabel>Content</FormLabel>
|
<FormLabel>Content</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import copy from "copy-to-clipboard";
|
import copy from "copy-to-clipboard";
|
||||||
import { Check, Copy, Loader2 } from "lucide-react";
|
import { Check, Copy, Loader2 } from "lucide-react";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { AnalyzeLogs } from "@/components/dashboard/docker/logs/analyze-logs";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
@@ -165,6 +166,7 @@ export const ShowDeployment = ({
|
|||||||
<Copy className="h-3.5 w-3.5" />
|
<Copy className="h-3.5 w-3.5" />
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
<AnalyzeLogs logs={filteredLogs} context="build" />
|
||||||
|
|
||||||
{serverId && (
|
{serverId && (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import copy from "copy-to-clipboard";
|
||||||
import {
|
import {
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
ChevronUp,
|
ChevronUp,
|
||||||
@@ -11,7 +12,6 @@ import {
|
|||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import copy from "copy-to-clipboard";
|
|
||||||
import { AlertBlock } from "@/components/shared/alert-block";
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
import { DateTooltip } from "@/components/shared/date-tooltip";
|
import { DateTooltip } from "@/components/shared/date-tooltip";
|
||||||
import { DialogAction } from "@/components/shared/dialog-action";
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
|||||||
@@ -0,0 +1,303 @@
|
|||||||
|
import type { ColumnDef } from "@tanstack/react-table";
|
||||||
|
import {
|
||||||
|
ArrowUpDown,
|
||||||
|
CheckCircle2,
|
||||||
|
ExternalLink,
|
||||||
|
Loader2,
|
||||||
|
PenBoxIcon,
|
||||||
|
RefreshCw,
|
||||||
|
Server,
|
||||||
|
Trash2,
|
||||||
|
XCircle,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import type { RouterOutputs } from "@/utils/api";
|
||||||
|
import { DnsHelperModal } from "./dns-helper-modal";
|
||||||
|
import { AddDomain } from "./handle-domain";
|
||||||
|
import type { ValidationStates } from "./show-domains";
|
||||||
|
|
||||||
|
export type Domain =
|
||||||
|
| RouterOutputs["domain"]["byApplicationId"][0]
|
||||||
|
| RouterOutputs["domain"]["byComposeId"][0];
|
||||||
|
|
||||||
|
interface ColumnsProps {
|
||||||
|
id: string;
|
||||||
|
type: "application" | "compose";
|
||||||
|
validationStates: ValidationStates;
|
||||||
|
handleValidateDomain: (host: string) => Promise<void>;
|
||||||
|
handleDeleteDomain: (domainId: string) => Promise<void>;
|
||||||
|
isDeleting: boolean;
|
||||||
|
serverIp?: string;
|
||||||
|
canCreateDomain: boolean;
|
||||||
|
canDeleteDomain: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createColumns = ({
|
||||||
|
id,
|
||||||
|
type,
|
||||||
|
validationStates,
|
||||||
|
handleValidateDomain,
|
||||||
|
handleDeleteDomain,
|
||||||
|
isDeleting,
|
||||||
|
serverIp,
|
||||||
|
canCreateDomain,
|
||||||
|
canDeleteDomain,
|
||||||
|
}: ColumnsProps): ColumnDef<Domain>[] => [
|
||||||
|
...(type === "compose"
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
accessorKey: "serviceName",
|
||||||
|
header: "Service",
|
||||||
|
cell: ({ row }: { row: { getValue: (key: string) => unknown } }) => {
|
||||||
|
const serviceName = row.getValue("serviceName") as string | null;
|
||||||
|
if (!serviceName) return null;
|
||||||
|
return (
|
||||||
|
<Badge variant="outline">
|
||||||
|
<Server className="size-3 mr-1" />
|
||||||
|
{serviceName}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
} satisfies ColumnDef<Domain>,
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{
|
||||||
|
accessorKey: "host",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Host
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const domain = row.original;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
className="flex items-center gap-2 font-medium hover:underline"
|
||||||
|
target="_blank"
|
||||||
|
href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
|
||||||
|
>
|
||||||
|
{domain.host}
|
||||||
|
<ExternalLink className="size-3" />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "path",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Path
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const path = row.getValue("path") as string;
|
||||||
|
return <div className="font-mono text-sm">{path || "/"}</div>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "port",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Port
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const port = row.getValue("port") as number;
|
||||||
|
return <Badge variant="secondary">{port}</Badge>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "customEntrypoint",
|
||||||
|
header: "Entrypoint",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const entrypoint = row.getValue("customEntrypoint") as string | null;
|
||||||
|
if (!entrypoint) return <span className="text-muted-foreground">-</span>;
|
||||||
|
return <div className="font-mono text-sm">{entrypoint}</div>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "https",
|
||||||
|
header: "Protocol",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const https = row.getValue("https") as boolean;
|
||||||
|
return (
|
||||||
|
<Badge variant={https ? "outline" : "secondary"}>
|
||||||
|
{https ? "HTTPS" : "HTTP"}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "certificate",
|
||||||
|
header: "Certificate",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const domain = row.original;
|
||||||
|
const validationState = validationStates[domain.host];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{domain.certificateType && (
|
||||||
|
<Badge variant="outline" className="capitalize">
|
||||||
|
{domain.certificateType}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{!domain.host.includes("sslip.io") && (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className={
|
||||||
|
validationState?.isValid
|
||||||
|
? "bg-green-500/10 text-green-500 cursor-pointer"
|
||||||
|
: validationState?.error
|
||||||
|
? "bg-red-500/10 text-red-500 cursor-pointer"
|
||||||
|
: "bg-yellow-500/10 text-yellow-500 cursor-pointer"
|
||||||
|
}
|
||||||
|
onClick={() => handleValidateDomain(domain.host)}
|
||||||
|
>
|
||||||
|
{validationState?.isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="size-3 mr-1 animate-spin" />
|
||||||
|
Checking...
|
||||||
|
</>
|
||||||
|
) : validationState?.isValid ? (
|
||||||
|
<>
|
||||||
|
<CheckCircle2 className="size-3 mr-1" />
|
||||||
|
{validationState.message && validationState.cdnProvider
|
||||||
|
? `${validationState.cdnProvider}`
|
||||||
|
: "Valid"}
|
||||||
|
</>
|
||||||
|
) : validationState?.error ? (
|
||||||
|
<>
|
||||||
|
<XCircle className="size-3 mr-1" />
|
||||||
|
Invalid
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<RefreshCw className="size-3 mr-1" />
|
||||||
|
Validate
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Badge>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="max-w-xs">
|
||||||
|
{validationState?.error ? (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<p className="font-medium text-red-500">Error:</p>
|
||||||
|
<p>{validationState.error}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
"Click to validate DNS configuration"
|
||||||
|
)}
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "createdAt",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Created
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const createdAt = row.getValue("createdAt") as string;
|
||||||
|
return (
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{new Date(createdAt).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
header: "Actions",
|
||||||
|
enableHiding: false,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const domain = row.original;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{!domain.host.includes("sslip.io") && (
|
||||||
|
<DnsHelperModal
|
||||||
|
domain={{
|
||||||
|
host: domain.host,
|
||||||
|
https: domain.https,
|
||||||
|
path: domain.path || undefined,
|
||||||
|
}}
|
||||||
|
serverIp={serverIp}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{canCreateDomain && (
|
||||||
|
<AddDomain id={id} type={type} domainId={domain.domainId}>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="group hover:bg-blue-500/10 h-8 w-8"
|
||||||
|
>
|
||||||
|
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
|
||||||
|
</Button>
|
||||||
|
</AddDomain>
|
||||||
|
)}
|
||||||
|
{canDeleteDomain && (
|
||||||
|
<DialogAction
|
||||||
|
title="Delete Domain"
|
||||||
|
description="Are you sure you want to delete this domain?"
|
||||||
|
type="destructive"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleDeleteDomain(domain.domainId);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="group hover:bg-red-500/10 h-8 w-8"
|
||||||
|
isLoading={isDeleting}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -1,11 +1,12 @@
|
|||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
|
import { DatabaseZap, Dices, RefreshCw, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import z from "zod";
|
import z from "zod";
|
||||||
import { AlertBlock } from "@/components/shared/alert-block";
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
@@ -61,11 +62,14 @@ export const domain = z
|
|||||||
.min(1, { message: "Port must be at least 1" })
|
.min(1, { message: "Port must be at least 1" })
|
||||||
.max(65535, { message: "Port must be 65535 or below" })
|
.max(65535, { message: "Port must be 65535 or below" })
|
||||||
.optional(),
|
.optional(),
|
||||||
|
useCustomEntrypoint: z.boolean(),
|
||||||
|
customEntrypoint: z.string().optional(),
|
||||||
https: z.boolean().optional(),
|
https: z.boolean().optional(),
|
||||||
certificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
|
certificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
|
||||||
customCertResolver: z.string().optional(),
|
customCertResolver: z.string().optional(),
|
||||||
serviceName: z.string().optional(),
|
serviceName: z.string().optional(),
|
||||||
domainType: z.enum(["application", "compose", "preview"]).optional(),
|
domainType: z.enum(["application", "compose", "preview"]).optional(),
|
||||||
|
middlewares: z.array(z.string()).optional(),
|
||||||
})
|
})
|
||||||
.superRefine((input, ctx) => {
|
.superRefine((input, ctx) => {
|
||||||
if (input.https && !input.certificateType) {
|
if (input.https && !input.certificateType) {
|
||||||
@@ -114,6 +118,14 @@ export const domain = z
|
|||||||
message: "Internal path must start with '/'",
|
message: "Internal path must start with '/'",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (input.useCustomEntrypoint && !input.customEntrypoint) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["customEntrypoint"],
|
||||||
|
message: "Custom entry point must be specified",
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
type Domain = z.infer<typeof domain>;
|
type Domain = z.infer<typeof domain>;
|
||||||
@@ -196,20 +208,24 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
internalPath: undefined,
|
internalPath: undefined,
|
||||||
stripPath: false,
|
stripPath: false,
|
||||||
port: undefined,
|
port: undefined,
|
||||||
|
useCustomEntrypoint: false,
|
||||||
|
customEntrypoint: undefined,
|
||||||
https: false,
|
https: false,
|
||||||
certificateType: undefined,
|
certificateType: undefined,
|
||||||
customCertResolver: undefined,
|
customCertResolver: undefined,
|
||||||
serviceName: undefined,
|
serviceName: undefined,
|
||||||
domainType: type,
|
domainType: type,
|
||||||
|
middlewares: [],
|
||||||
},
|
},
|
||||||
mode: "onChange",
|
mode: "onChange",
|
||||||
});
|
});
|
||||||
|
|
||||||
const certificateType = form.watch("certificateType");
|
const certificateType = form.watch("certificateType");
|
||||||
|
const useCustomEntrypoint = form.watch("useCustomEntrypoint");
|
||||||
const https = form.watch("https");
|
const https = form.watch("https");
|
||||||
const domainType = form.watch("domainType");
|
const domainType = form.watch("domainType");
|
||||||
const host = form.watch("host");
|
const host = form.watch("host");
|
||||||
const isTraefikMeDomain = host?.includes("traefik.me") || false;
|
const isTraefikMeDomain = host?.includes("sslip.io") || false;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
@@ -220,10 +236,13 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
internalPath: data?.internalPath || undefined,
|
internalPath: data?.internalPath || undefined,
|
||||||
stripPath: data?.stripPath || false,
|
stripPath: data?.stripPath || false,
|
||||||
port: data?.port || undefined,
|
port: data?.port || undefined,
|
||||||
|
useCustomEntrypoint: !!data.customEntrypoint,
|
||||||
|
customEntrypoint: data.customEntrypoint || undefined,
|
||||||
certificateType: data?.certificateType || undefined,
|
certificateType: data?.certificateType || undefined,
|
||||||
customCertResolver: data?.customCertResolver || undefined,
|
customCertResolver: data?.customCertResolver || undefined,
|
||||||
serviceName: data?.serviceName || undefined,
|
serviceName: data?.serviceName || undefined,
|
||||||
domainType: data?.domainType || type,
|
domainType: data?.domainType || type,
|
||||||
|
middlewares: data?.middlewares || [],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -234,10 +253,13 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
internalPath: undefined,
|
internalPath: undefined,
|
||||||
stripPath: false,
|
stripPath: false,
|
||||||
port: undefined,
|
port: undefined,
|
||||||
|
useCustomEntrypoint: false,
|
||||||
|
customEntrypoint: undefined,
|
||||||
https: false,
|
https: false,
|
||||||
certificateType: undefined,
|
certificateType: undefined,
|
||||||
customCertResolver: undefined,
|
customCertResolver: undefined,
|
||||||
domainType: type,
|
domainType: type,
|
||||||
|
middlewares: [],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [form, data, isPending, domainId]);
|
}, [form, data, isPending, domainId]);
|
||||||
@@ -268,6 +290,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
composeId: id,
|
composeId: id,
|
||||||
}),
|
}),
|
||||||
...data,
|
...data,
|
||||||
|
customEntrypoint: data.useCustomEntrypoint ? data.customEntrypoint : null,
|
||||||
})
|
})
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
toast.success(dictionary.success);
|
toast.success(dictionary.success);
|
||||||
@@ -490,7 +513,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
{!canGenerateTraefikMeDomains &&
|
{!canGenerateTraefikMeDomains &&
|
||||||
field.value.includes("traefik.me") && (
|
field.value.includes("sslip.io") && (
|
||||||
<AlertBlock type="warning">
|
<AlertBlock type="warning">
|
||||||
You need to set an IP address in your{" "}
|
You need to set an IP address in your{" "}
|
||||||
<Link
|
<Link
|
||||||
@@ -501,12 +524,12 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
? "Remote Servers -> Server -> Edit Server -> Update IP Address"
|
? "Remote Servers -> Server -> Edit Server -> Update IP Address"
|
||||||
: "Web Server -> Server -> Update Server IP"}
|
: "Web Server -> Server -> Update Server IP"}
|
||||||
</Link>{" "}
|
</Link>{" "}
|
||||||
to make your traefik.me domain work.
|
to make your sslip.io domain work.
|
||||||
</AlertBlock>
|
</AlertBlock>
|
||||||
)}
|
)}
|
||||||
{isTraefikMeDomain && (
|
{isTraefikMeDomain && (
|
||||||
<AlertBlock type="info">
|
<AlertBlock type="info">
|
||||||
<strong>Note:</strong> traefik.me is a public HTTP
|
<strong>Note:</strong> sslip.io is a public HTTP
|
||||||
service and does not support SSL/HTTPS. HTTPS and
|
service and does not support SSL/HTTPS. HTTPS and
|
||||||
certificate options will not have any effect.
|
certificate options will not have any effect.
|
||||||
</AlertBlock>
|
</AlertBlock>
|
||||||
@@ -544,7 +567,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
sideOffset={5}
|
sideOffset={5}
|
||||||
className="max-w-[10rem]"
|
className="max-w-[10rem]"
|
||||||
>
|
>
|
||||||
<p>Generate traefik.me domain</p>
|
<p>Generate sslip.io domain</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
@@ -635,6 +658,55 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="useCustomEntrypoint"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>Custom Entrypoint</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
Use custom entrypoint for domain
|
||||||
|
<br />
|
||||||
|
"web" and/or "websecure" is used by default.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
field.onChange(checked);
|
||||||
|
if (!checked) {
|
||||||
|
form.setValue("customEntrypoint", undefined);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{useCustomEntrypoint && (
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="customEntrypoint"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="w-full">
|
||||||
|
<FormLabel>Entrypoint Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="Enter entrypoint name manually"
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="https"
|
name="https"
|
||||||
@@ -725,6 +797,88 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="middlewares"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FormLabel>Middlewares</FormLabel>
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger type="button">
|
||||||
|
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
||||||
|
?
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="max-w-[300px]">
|
||||||
|
<p>
|
||||||
|
Add Traefik middleware references. Middlewares
|
||||||
|
must be defined in your Traefik configuration.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-2">
|
||||||
|
{field.value?.map((name, index) => (
|
||||||
|
<Badge key={index} variant="secondary">
|
||||||
|
{name}
|
||||||
|
<X
|
||||||
|
className="ml-1 size-3 cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
const newMiddlewares = [...(field.value || [])];
|
||||||
|
newMiddlewares.splice(index, 1);
|
||||||
|
form.setValue("middlewares", newMiddlewares);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="e.g., rate-limit@file, auth@file"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
const input = e.currentTarget;
|
||||||
|
const value = input.value.trim();
|
||||||
|
if (value && !field.value?.includes(value)) {
|
||||||
|
form.setValue("middlewares", [
|
||||||
|
...(field.value || []),
|
||||||
|
value,
|
||||||
|
]);
|
||||||
|
input.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
const input = document.querySelector(
|
||||||
|
'input[placeholder="e.g., rate-limit@file, auth@file"]',
|
||||||
|
) as HTMLInputElement;
|
||||||
|
const value = input.value.trim();
|
||||||
|
if (value && !field.value?.includes(value)) {
|
||||||
|
form.setValue("middlewares", [
|
||||||
|
...(field.value || []),
|
||||||
|
value,
|
||||||
|
]);
|
||||||
|
input.value = "";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -0,0 +1,147 @@
|
|||||||
|
import { ShieldCheck } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
domainId: string;
|
||||||
|
applicationId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const HandleForwardAuth = ({ domainId, applicationId }: Props) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
|
const { data: haveValidLicense } =
|
||||||
|
api.licenseKey.haveValidLicenseKey.useQuery();
|
||||||
|
|
||||||
|
const utils = api.useUtils();
|
||||||
|
|
||||||
|
const { data: status } = api.forwardAuth.status.useQuery(
|
||||||
|
{ domainId },
|
||||||
|
{ enabled: isOpen },
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutateAsync: enable, isPending: isEnabling } =
|
||||||
|
api.forwardAuth.enable.useMutation();
|
||||||
|
const { mutateAsync: disable, isPending: isDisabling } =
|
||||||
|
api.forwardAuth.disable.useMutation();
|
||||||
|
|
||||||
|
if (!haveValidLicense) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isEnabled = !!status?.enabled;
|
||||||
|
const isPending = isEnabling || isDisabling;
|
||||||
|
|
||||||
|
const refresh = async () => {
|
||||||
|
await utils.forwardAuth.status.invalidate({ domainId });
|
||||||
|
await utils.domain.byApplicationId.invalidate({ applicationId });
|
||||||
|
await utils.application.readTraefikConfig.invalidate({ applicationId });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggle = async (next: boolean) => {
|
||||||
|
try {
|
||||||
|
if (next) {
|
||||||
|
await enable({ domainId });
|
||||||
|
toast.success("SSO authentication enabled for this domain");
|
||||||
|
} else {
|
||||||
|
await disable({ domainId });
|
||||||
|
toast.success("SSO authentication disabled for this domain");
|
||||||
|
}
|
||||||
|
await refresh();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(
|
||||||
|
error instanceof Error
|
||||||
|
? error.message
|
||||||
|
: "Error updating SSO authentication",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="group hover:bg-emerald-500/10"
|
||||||
|
title="SSO authentication"
|
||||||
|
>
|
||||||
|
<ShieldCheck
|
||||||
|
className={`size-4 ${
|
||||||
|
isEnabled
|
||||||
|
? "text-emerald-500"
|
||||||
|
: "text-primary group-hover:text-emerald-500"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>SSO Authentication</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Require visitors to authenticate against your identity provider
|
||||||
|
before reaching this application.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<AlertBlock type="warning">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="font-medium">Requirements</span>
|
||||||
|
<ol className="list-decimal pl-4 text-sm">
|
||||||
|
<li>
|
||||||
|
The authentication proxy container must be deployed and running
|
||||||
|
on this app's server. Configure it under{" "}
|
||||||
|
<span className="font-medium">
|
||||||
|
Settings → SSO → Application Authentication
|
||||||
|
</span>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
This domain must share the same base domain as the
|
||||||
|
authentication domain (e.g. <code>app.acme.com</code> and{" "}
|
||||||
|
<code>auth.acme.com</code>).
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</AlertBlock>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between rounded-lg border p-4 mt-2">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
Protect this domain with SSO
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{isEnabled
|
||||||
|
? "Visitors must log in via your identity provider."
|
||||||
|
: "The domain is publicly accessible."}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={isEnabled}
|
||||||
|
disabled={isPending}
|
||||||
|
onCheckedChange={handleToggle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,8 +1,22 @@
|
|||||||
|
import {
|
||||||
|
type ColumnFiltersState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
type SortingState,
|
||||||
|
useReactTable,
|
||||||
|
type VisibilityState,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
import {
|
import {
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
|
ChevronDown,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
GlobeIcon,
|
GlobeIcon,
|
||||||
InfoIcon,
|
InfoIcon,
|
||||||
|
LayoutGrid,
|
||||||
|
LayoutList,
|
||||||
Loader2,
|
Loader2,
|
||||||
PenBoxIcon,
|
PenBoxIcon,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
@@ -23,6 +37,21 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
@@ -30,8 +59,10 @@ import {
|
|||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
import { createColumns } from "./columns";
|
||||||
import { DnsHelperModal } from "./dns-helper-modal";
|
import { DnsHelperModal } from "./dns-helper-modal";
|
||||||
import { AddDomain } from "./handle-domain";
|
import { AddDomain } from "./handle-domain";
|
||||||
|
import { HandleForwardAuth } from "./handle-forward-auth";
|
||||||
|
|
||||||
export type ValidationState = {
|
export type ValidationState = {
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
@@ -74,6 +105,19 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
const [validationStates, setValidationStates] = useState<ValidationStates>(
|
const [validationStates, setValidationStates] = useState<ValidationStates>(
|
||||||
{},
|
{},
|
||||||
);
|
);
|
||||||
|
const [viewMode, setViewMode] = useState<"grid" | "table">(() => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
return (
|
||||||
|
(localStorage.getItem("domains-view-mode") as "grid" | "table") ??
|
||||||
|
"grid"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return "grid";
|
||||||
|
});
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||||
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
|
||||||
|
const [rowSelection, setRowSelection] = useState({});
|
||||||
const { data: ip } = api.settings.getIp.useQuery();
|
const { data: ip } = api.settings.getIp.useQuery();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@@ -103,6 +147,16 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
const { mutateAsync: deleteDomain, isPending: isRemoving } =
|
const { mutateAsync: deleteDomain, isPending: isRemoving } =
|
||||||
api.domain.delete.useMutation();
|
api.domain.delete.useMutation();
|
||||||
|
|
||||||
|
const handleDeleteDomain = async (domainId: string) => {
|
||||||
|
try {
|
||||||
|
await deleteDomain({ domainId });
|
||||||
|
refetch();
|
||||||
|
toast.success("Domain deleted successfully");
|
||||||
|
} catch {
|
||||||
|
toast.error("Error deleting domain");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleValidateDomain = async (host: string) => {
|
const handleValidateDomain = async (host: string) => {
|
||||||
setValidationStates((prev) => ({
|
setValidationStates((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
@@ -140,6 +194,37 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const columns = createColumns({
|
||||||
|
id,
|
||||||
|
type,
|
||||||
|
validationStates,
|
||||||
|
handleValidateDomain,
|
||||||
|
handleDeleteDomain,
|
||||||
|
isDeleting: isRemoving,
|
||||||
|
serverIp: application?.server?.ipAddress?.toString() || ip?.toString(),
|
||||||
|
canCreateDomain,
|
||||||
|
canDeleteDomain,
|
||||||
|
});
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: data ?? [],
|
||||||
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full flex-col gap-5 ">
|
<div className="flex w-full flex-col gap-5 ">
|
||||||
<Card className="bg-background">
|
<Card className="bg-background">
|
||||||
@@ -151,13 +236,32 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
</CardDescription>
|
</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-row gap-4 flex-wrap">
|
<div className="flex flex-row gap-2 flex-wrap">
|
||||||
{canCreateDomain && data && data?.length > 0 && (
|
{data && data?.length > 0 && (
|
||||||
<AddDomain id={id} type={type}>
|
<>
|
||||||
<Button>
|
<Button
|
||||||
<GlobeIcon className="size-4" /> Add Domain
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => {
|
||||||
|
const next = viewMode === "grid" ? "table" : "grid";
|
||||||
|
localStorage.setItem("domains-view-mode", next);
|
||||||
|
setViewMode(next);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{viewMode === "grid" ? (
|
||||||
|
<LayoutList className="size-4" />
|
||||||
|
) : (
|
||||||
|
<LayoutGrid className="size-4" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</AddDomain>
|
{canCreateDomain && (
|
||||||
|
<AddDomain id={id} type={type}>
|
||||||
|
<Button>
|
||||||
|
<GlobeIcon className="size-4" /> Add Domain
|
||||||
|
</Button>
|
||||||
|
</AddDomain>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
@@ -186,6 +290,122 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
) : viewMode === "table" ? (
|
||||||
|
<div className="flex flex-col gap-4 w-full">
|
||||||
|
<div className="flex items-center gap-2 max-sm:flex-wrap">
|
||||||
|
<Input
|
||||||
|
placeholder="Filter by host..."
|
||||||
|
value={
|
||||||
|
(table.getColumn("host")?.getFilterValue() as string) ?? ""
|
||||||
|
}
|
||||||
|
onChange={(event) =>
|
||||||
|
table.getColumn("host")?.setFilterValue(event.target.value)
|
||||||
|
}
|
||||||
|
className="md:max-w-sm"
|
||||||
|
/>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="sm:ml-auto max-sm:w-full"
|
||||||
|
>
|
||||||
|
Columns <ChevronDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
{table
|
||||||
|
.getAllColumns()
|
||||||
|
.filter((column) => column.getCanHide())
|
||||||
|
.map((column) => {
|
||||||
|
return (
|
||||||
|
<DropdownMenuCheckboxItem
|
||||||
|
key={column.id}
|
||||||
|
className="capitalize"
|
||||||
|
checked={column.getIsVisible()}
|
||||||
|
onCheckedChange={(value) =>
|
||||||
|
column.toggleVisibility(!!value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{column.id}
|
||||||
|
</DropdownMenuCheckboxItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => {
|
||||||
|
return (
|
||||||
|
<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}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
>
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
{data && data?.length > 0 && (
|
||||||
|
<div className="flex items-center justify-end space-x-2 py-4">
|
||||||
|
<div className="space-x-2 flex flex-wrap">
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
|
||||||
{data?.map((item) => {
|
{data?.map((item) => {
|
||||||
@@ -206,7 +426,7 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
<div className="flex gap-2 flex-wrap">
|
<div className="flex gap-2 flex-wrap">
|
||||||
{!item.host.includes("traefik.me") && (
|
{!item.host.includes("sslip.io") && (
|
||||||
<DnsHelperModal
|
<DnsHelperModal
|
||||||
domain={{
|
domain={{
|
||||||
host: item.host,
|
host: item.host,
|
||||||
@@ -234,6 +454,12 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</AddDomain>
|
</AddDomain>
|
||||||
)}
|
)}
|
||||||
|
{canCreateDomain && type === "application" && (
|
||||||
|
<HandleForwardAuth
|
||||||
|
domainId={item.domainId}
|
||||||
|
applicationId={id}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{canDeleteDomain && (
|
{canDeleteDomain && (
|
||||||
<DialogAction
|
<DialogAction
|
||||||
title="Delete Domain"
|
title="Delete Domain"
|
||||||
@@ -341,6 +567,22 @@ export const ShowDomains = ({ id, type }: Props) => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{item.middlewares?.map((middleware, index) => (
|
||||||
|
<TooltipProvider key={`${middleware}-${index}`}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Badge variant="secondary">
|
||||||
|
<InfoIcon className="size-3 mr-1" />
|
||||||
|
Middleware: {middleware}
|
||||||
|
</Badge>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Traefik middleware reference</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
))}
|
||||||
|
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
|
|||||||
@@ -39,15 +39,16 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
|||||||
const { data: permissions } = api.user.getPermissions.useQuery();
|
const { data: permissions } = api.user.getPermissions.useQuery();
|
||||||
const canWrite = permissions?.envVars.write ?? false;
|
const canWrite = permissions?.envVars.write ?? false;
|
||||||
const queryMap = {
|
const queryMap = {
|
||||||
postgres: () =>
|
compose: () =>
|
||||||
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
|
||||||
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
|
||||||
mariadb: () =>
|
mariadb: () =>
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
compose: () =>
|
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
|
postgres: () =>
|
||||||
|
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
||||||
|
redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
|
||||||
};
|
};
|
||||||
const { data, refetch } = queryMap[type]
|
const { data, refetch } = queryMap[type]
|
||||||
? queryMap[type]()
|
? queryMap[type]()
|
||||||
@@ -55,16 +56,17 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
|||||||
const [isEnvVisible, setIsEnvVisible] = useState(true);
|
const [isEnvVisible, setIsEnvVisible] = useState(true);
|
||||||
|
|
||||||
const mutationMap = {
|
const mutationMap = {
|
||||||
postgres: () => api.postgres.update.useMutation(),
|
compose: () => api.compose.saveEnvironment.useMutation(),
|
||||||
redis: () => api.redis.update.useMutation(),
|
libsql: () => api.libsql.saveEnvironment.useMutation(),
|
||||||
mysql: () => api.mysql.update.useMutation(),
|
mariadb: () => api.mariadb.saveEnvironment.useMutation(),
|
||||||
mariadb: () => api.mariadb.update.useMutation(),
|
mongo: () => api.mongo.saveEnvironment.useMutation(),
|
||||||
mongo: () => api.mongo.update.useMutation(),
|
mysql: () => api.mysql.saveEnvironment.useMutation(),
|
||||||
compose: () => api.compose.update.useMutation(),
|
postgres: () => api.postgres.saveEnvironment.useMutation(),
|
||||||
|
redis: () => api.redis.saveEnvironment.useMutation(),
|
||||||
};
|
};
|
||||||
const { mutateAsync, isPending } = mutationMap[type]
|
const { mutateAsync, isPending } = mutationMap[type]
|
||||||
? mutationMap[type]()
|
? mutationMap[type]()
|
||||||
: api.mongo.update.useMutation();
|
: api.mongo.saveEnvironment.useMutation();
|
||||||
|
|
||||||
const form = useForm<EnvironmentSchema>({
|
const form = useForm<EnvironmentSchema>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
@@ -87,12 +89,13 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
|||||||
|
|
||||||
const onSubmit = async (formData: EnvironmentSchema) => {
|
const onSubmit = async (formData: EnvironmentSchema) => {
|
||||||
mutateAsync({
|
mutateAsync({
|
||||||
|
composeId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
|
mariadbId: id || "",
|
||||||
mongoId: id || "",
|
mongoId: id || "",
|
||||||
|
mysqlId: id || "",
|
||||||
postgresId: id || "",
|
postgresId: id || "",
|
||||||
redisId: id || "",
|
redisId: id || "",
|
||||||
mysqlId: id || "",
|
|
||||||
mariadbId: id || "",
|
|
||||||
composeId: id || "",
|
|
||||||
env: formData.environment,
|
env: formData.environment,
|
||||||
})
|
})
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
@@ -113,7 +116,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
|
|||||||
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
|
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}
|
}
|
||||||
@@ -106,7 +106,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
|
|||||||
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
|
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -57,7 +58,10 @@ const BitbucketProviderSchema = z.object({
|
|||||||
slug: z.string().optional(),
|
slug: z.string().optional(),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
|
bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().optional(),
|
enableSubmodules: z.boolean().optional(),
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
|
import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -41,7 +42,10 @@ const GitProviderSchema = z.object({
|
|||||||
repositoryURL: z.string().min(1, {
|
repositoryURL: z.string().min(1, {
|
||||||
message: "Repository URL is required",
|
message: "Repository URL is required",
|
||||||
}),
|
}),
|
||||||
branch: z.string().min(1, "Branch required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
sshKey: z.string().optional(),
|
sshKey: z.string().optional(),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
@@ -55,7 +59,7 @@ interface Props {
|
|||||||
|
|
||||||
export const SaveGitProvider = ({ applicationId }: Props) => {
|
export const SaveGitProvider = ({ applicationId }: Props) => {
|
||||||
const { data, refetch } = api.application.one.useQuery({ applicationId });
|
const { data, refetch } = api.application.one.useQuery({ applicationId });
|
||||||
const { data: sshKeys } = api.sshKey.all.useQuery();
|
const { data: sshKeys } = api.sshKey.allForApps.useQuery();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const { mutateAsync, isPending } =
|
const { mutateAsync, isPending } =
|
||||||
@@ -107,110 +111,103 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
onSubmit={form.handleSubmit(onSubmit)}
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 items-start">
|
||||||
className="flex flex-col gap-4"
|
<FormField
|
||||||
>
|
control={form.control}
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
name="repositoryURL"
|
||||||
<div className="flex items-end col-span-2 gap-4">
|
render={({ field }) => (
|
||||||
<div className="grow">
|
<FormItem className="col-span-2 lg:col-span-3">
|
||||||
<FormField
|
<div className="flex items-center justify-between h-5">
|
||||||
control={form.control}
|
<FormLabel>Repository URL</FormLabel>
|
||||||
name="repositoryURL"
|
{field.value?.startsWith("https://") && (
|
||||||
render={({ field }) => (
|
<Link
|
||||||
<FormItem>
|
href={field.value}
|
||||||
<div className="flex items-center justify-between">
|
target="_blank"
|
||||||
<FormLabel>Repository URL</FormLabel>
|
rel="noopener noreferrer"
|
||||||
{field.value?.startsWith("https://") && (
|
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
|
||||||
<Link
|
>
|
||||||
href={field.value}
|
<GitIcon className="h-4 w-4" />
|
||||||
target="_blank"
|
<span>View Repository</span>
|
||||||
rel="noopener noreferrer"
|
</Link>
|
||||||
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
|
)}
|
||||||
>
|
</div>
|
||||||
<GitIcon className="h-4 w-4" />
|
<FormControl>
|
||||||
<span>View Repository</span>
|
<Input placeholder="Repository URL" {...field} />
|
||||||
</Link>
|
</FormControl>
|
||||||
)}
|
<FormMessage />
|
||||||
</div>
|
</FormItem>
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="Repository URL" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{sshKeys && sshKeys.length > 0 ? (
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="sshKey"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem className="basis-40">
|
|
||||||
<FormLabel className="w-full inline-flex justify-between">
|
|
||||||
SSH Key
|
|
||||||
<LockIcon className="size-4 text-muted-foreground" />
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Select
|
|
||||||
key={field.value}
|
|
||||||
onValueChange={field.onChange}
|
|
||||||
defaultValue={field.value}
|
|
||||||
value={field.value}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select a key" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
{sshKeys?.map((sshKey) => (
|
|
||||||
<SelectItem
|
|
||||||
key={sshKey.sshKeyId}
|
|
||||||
value={sshKey.sshKeyId}
|
|
||||||
>
|
|
||||||
{sshKey.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
<SelectItem value="none">None</SelectItem>
|
|
||||||
<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => router.push("/dashboard/settings/ssh-keys")}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<KeyRoundIcon className="size-4" /> Add SSH Key
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
/>
|
||||||
<div className="space-y-4">
|
{sshKeys && sshKeys.length > 0 ? (
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="branch"
|
name="sshKey"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem className="col-span-2 lg:col-span-1">
|
||||||
<FormLabel>Branch</FormLabel>
|
<FormLabel className="w-full inline-flex justify-between">
|
||||||
|
SSH Key
|
||||||
|
<LockIcon className="size-4 text-muted-foreground" />
|
||||||
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input placeholder="Branch" {...field} />
|
<Select
|
||||||
|
key={field.value}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
value={field.value}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select a key" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{sshKeys?.map((sshKey) => (
|
||||||
|
<SelectItem
|
||||||
|
key={sshKey.sshKeyId}
|
||||||
|
value={sshKey.sshKeyId}
|
||||||
|
>
|
||||||
|
{sshKey.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
<SelectItem value="none">None</SelectItem>
|
||||||
|
<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
) : (
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => router.push("/dashboard/settings/ssh-keys")}
|
||||||
|
type="button"
|
||||||
|
className="col-span-2 lg:col-span-1 lg:mt-7"
|
||||||
|
>
|
||||||
|
<KeyRoundIcon className="size-4" /> Add SSH Key
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="branch"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-2">
|
||||||
|
<FormLabel>Branch</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Branch" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="buildPath"
|
name="buildPath"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem className="col-span-2">
|
||||||
<FormLabel>Build Path</FormLabel>
|
<FormLabel>Build Path</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input placeholder="/" {...field} />
|
<Input placeholder="/" {...field} />
|
||||||
@@ -223,7 +220,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
|
|||||||
control={form.control}
|
control={form.control}
|
||||||
name="watchPaths"
|
name="watchPaths"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="md:col-span-2">
|
<FormItem className="col-span-2 lg:col-span-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FormLabel>Watch Paths</FormLabel>
|
<FormLabel>Watch Paths</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -72,7 +73,10 @@ const GiteaProviderSchema = z.object({
|
|||||||
owner: z.string().min(1, "Owner is required"),
|
owner: z.string().min(1, "Owner is required"),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
giteaId: z.string().min(1, "Gitea Provider is required"),
|
giteaId: z.string().min(1, "Gitea Provider is required"),
|
||||||
watchPaths: z.array(z.string()).default([]),
|
watchPaths: z.array(z.string()).default([]),
|
||||||
enableSubmodules: z.boolean().optional(),
|
enableSubmodules: z.boolean().optional(),
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -55,7 +56,10 @@ const GithubProviderSchema = z.object({
|
|||||||
owner: z.string().min(1, "Owner is required"),
|
owner: z.string().min(1, "Owner is required"),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
githubId: z.string().min(1, "Github Provider is required"),
|
githubId: z.string().min(1, "Github Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
triggerType: z.enum(["push", "tag"]).default("push"),
|
triggerType: z.enum(["push", "tag"]).default("push"),
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -58,7 +59,10 @@ const GitlabProviderSchema = z.object({
|
|||||||
id: z.number().nullable(),
|
id: z.number().nullable(),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
gitlabId: z.string().min(1, "Gitlab Provider is required"),
|
gitlabId: z.string().min(1, "Gitlab Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-xl">Deploy Settings</CardTitle>
|
<CardTitle className="text-xl">Deploy Settings</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex flex-row gap-4 flex-wrap">
|
<CardContent className="grid grid-cols-2 lg:flex lg:flex-row lg:flex-wrap gap-4">
|
||||||
<TooltipProvider delayDuration={0} disableHoverableContent={false}>
|
<TooltipProvider delayDuration={0} disableHoverableContent={false}>
|
||||||
{canDeploy && (
|
{canDeploy && (
|
||||||
<DialogAction
|
<DialogAction
|
||||||
@@ -274,14 +274,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
|||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2 col-span-2"
|
||||||
>
|
>
|
||||||
<Terminal className="size-4 mr-1" />
|
<Terminal className="size-4 mr-1" />
|
||||||
Open Terminal
|
Open Terminal
|
||||||
</Button>
|
</Button>
|
||||||
</DockerTerminalModal>
|
</DockerTerminalModal>
|
||||||
{canUpdateService && (
|
{canUpdateService && (
|
||||||
<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
|
<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
|
||||||
<span className="text-sm font-medium">Autodeploy</span>
|
<span className="text-sm font-medium">Autodeploy</span>
|
||||||
<Switch
|
<Switch
|
||||||
aria-label="Toggle autodeploy"
|
aria-label="Toggle autodeploy"
|
||||||
@@ -305,7 +305,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{canUpdateService && (
|
{canUpdateService && (
|
||||||
<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
|
<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
|
||||||
<span className="text-sm font-medium">Clean Cache</span>
|
<span className="text-sm font-medium">Clean Cache</span>
|
||||||
<Switch
|
<Switch
|
||||||
aria-label="Toggle clean cache"
|
aria-label="Toggle clean cache"
|
||||||
|
|||||||
@@ -0,0 +1,277 @@
|
|||||||
|
import DOMPurify from "dompurify";
|
||||||
|
import { GlobeIcon, Pencil, Search, X } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Dropzone } from "@/components/ui/dropzone";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface ShowIconSettingsProps {
|
||||||
|
applicationId: string;
|
||||||
|
icon?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const svgToDataUrl = (icon: BundledIcon): string => {
|
||||||
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#${icon.hex}"><path d="${icon.path}"/></svg>`;
|
||||||
|
return `data:image/svg+xml;base64,${btoa(svg)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ShowIconSettings = ({
|
||||||
|
applicationId,
|
||||||
|
icon,
|
||||||
|
}: ShowIconSettingsProps) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [iconSearchQuery, setIconSearchQuery] = useState("");
|
||||||
|
const [iconsToShow, setIconsToShow] = useState(24);
|
||||||
|
|
||||||
|
const filteredIcons = useMemo(() => {
|
||||||
|
if (!iconSearchQuery) return bundledIcons;
|
||||||
|
const q = iconSearchQuery.toLowerCase();
|
||||||
|
return bundledIcons.filter(
|
||||||
|
(i) =>
|
||||||
|
i.title.toLowerCase().includes(q) || i.slug.toLowerCase().includes(q),
|
||||||
|
);
|
||||||
|
}, [iconSearchQuery]);
|
||||||
|
|
||||||
|
const displayedIcons = filteredIcons.slice(0, iconsToShow);
|
||||||
|
const hasMoreIcons = filteredIcons.length > iconsToShow;
|
||||||
|
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const { mutateAsync: updateApplication } =
|
||||||
|
api.application.update.useMutation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setIconSearchQuery("");
|
||||||
|
setIconsToShow(24);
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const handleIconSelect = async (selectedIcon: BundledIcon) => {
|
||||||
|
try {
|
||||||
|
const dataUrl = svgToDataUrl(selectedIcon);
|
||||||
|
await updateApplication({
|
||||||
|
applicationId,
|
||||||
|
icon: dataUrl,
|
||||||
|
});
|
||||||
|
toast.success("Icon saved successfully");
|
||||||
|
await utils.application.one.invalidate({ applicationId });
|
||||||
|
setOpen(false);
|
||||||
|
} catch (_error) {
|
||||||
|
toast.error("Error saving icon");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveIcon = async () => {
|
||||||
|
try {
|
||||||
|
await updateApplication({
|
||||||
|
applicationId,
|
||||||
|
icon: null,
|
||||||
|
});
|
||||||
|
toast.success("Icon removed");
|
||||||
|
await utils.application.one.invalidate({ applicationId });
|
||||||
|
} catch (_error) {
|
||||||
|
toast.error("Error removing icon");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sanitizeSvg = (svgContent: string): string | null => {
|
||||||
|
const clean = DOMPurify.sanitize(svgContent, {
|
||||||
|
USE_PROFILES: { svg: true, svgFilters: true },
|
||||||
|
ADD_TAGS: ["use"],
|
||||||
|
});
|
||||||
|
if (!clean) return null;
|
||||||
|
return `data:image/svg+xml;base64,${btoa(clean)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileUpload = async (files: FileList | null) => {
|
||||||
|
if (!files || files.length === 0) return;
|
||||||
|
const file = files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
const allowedTypes = [
|
||||||
|
"image/jpeg",
|
||||||
|
"image/jpg",
|
||||||
|
"image/png",
|
||||||
|
"image/svg+xml",
|
||||||
|
];
|
||||||
|
const fileExtension = file.name.split(".").pop()?.toLowerCase();
|
||||||
|
const allowedExtensions = ["jpg", "jpeg", "png", "svg"];
|
||||||
|
|
||||||
|
if (
|
||||||
|
!allowedTypes.includes(file.type) &&
|
||||||
|
!allowedExtensions.includes(fileExtension || "")
|
||||||
|
) {
|
||||||
|
toast.error("Only JPG, JPEG, PNG, and SVG files are allowed");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (file.size > 2 * 1024 * 1024) {
|
||||||
|
toast.error("Image size must be less than 2MB");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isSvg = file.type === "image/svg+xml" || fileExtension === "svg";
|
||||||
|
|
||||||
|
if (isSvg) {
|
||||||
|
const text = await file.text();
|
||||||
|
const sanitizedDataUrl = sanitizeSvg(text);
|
||||||
|
if (!sanitizedDataUrl) {
|
||||||
|
toast.error("Invalid SVG file");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await updateApplication({
|
||||||
|
applicationId,
|
||||||
|
icon: sanitizedDataUrl,
|
||||||
|
});
|
||||||
|
toast.success("Icon saved!");
|
||||||
|
await utils.application.one.invalidate({ applicationId });
|
||||||
|
setOpen(false);
|
||||||
|
} catch (_error) {
|
||||||
|
toast.error("Error saving icon");
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async (event) => {
|
||||||
|
const result = event.target?.result as string;
|
||||||
|
try {
|
||||||
|
await updateApplication({
|
||||||
|
applicationId,
|
||||||
|
icon: result,
|
||||||
|
});
|
||||||
|
toast.success("Icon saved!");
|
||||||
|
await utils.application.one.invalidate({ applicationId });
|
||||||
|
setOpen(false);
|
||||||
|
} catch (_error) {
|
||||||
|
toast.error("Error saving icon");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="relative group flex items-center justify-center"
|
||||||
|
>
|
||||||
|
{icon ? (
|
||||||
|
// biome-ignore lint/performance/noImgElement: icon is data URL or base64
|
||||||
|
<img
|
||||||
|
src={icon}
|
||||||
|
alt="Application icon"
|
||||||
|
className="h-8 w-8 object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<GlobeIcon className="h-6 w-6 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<Pencil className="h-3 w-3 text-white" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center justify-between">
|
||||||
|
Change Icon
|
||||||
|
{icon && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleRemoveIcon}
|
||||||
|
className="text-muted-foreground"
|
||||||
|
>
|
||||||
|
<X className="size-4 mr-1" />
|
||||||
|
Remove icon
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search icons (e.g. react, vue, docker)..."
|
||||||
|
value={iconSearchQuery}
|
||||||
|
onChange={(e) => setIconSearchQuery(e.target.value)}
|
||||||
|
className="pl-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-h-[300px] overflow-y-auto border rounded-lg p-4">
|
||||||
|
{displayedIcons.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-sm text-muted-foreground">
|
||||||
|
No icons found
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
|
||||||
|
{displayedIcons.map((i) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={i.slug}
|
||||||
|
onClick={() => handleIconSelect(i)}
|
||||||
|
className="flex flex-col items-center gap-1.5 p-2 rounded-lg border hover:border-primary hover:bg-muted transition-colors group"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="size-7 group-hover:scale-110 transition-transform"
|
||||||
|
fill={`#${i.hex}`}
|
||||||
|
>
|
||||||
|
<path d={i.path} />
|
||||||
|
</svg>
|
||||||
|
<span className="text-[10px] text-muted-foreground capitalize truncate w-full text-center">
|
||||||
|
{i.title}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{hasMoreIcons && (
|
||||||
|
<div className="flex justify-center mt-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIconsToShow((prev) => prev + 24)}
|
||||||
|
>
|
||||||
|
Load More ({filteredIcons.length - iconsToShow} remaining)
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative pt-3 border-t">
|
||||||
|
<p className="text-sm text-muted-foreground text-center mb-3">
|
||||||
|
or upload a custom icon
|
||||||
|
</p>
|
||||||
|
<Dropzone
|
||||||
|
dropMessage="Drag & drop an icon or click to upload"
|
||||||
|
accept=".jpg,.jpeg,.png,.svg,image/jpeg,image/png,image/svg+xml"
|
||||||
|
onChange={handleFileUpload}
|
||||||
|
classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
|
||||||
|
/>
|
||||||
|
<div className="mt-2 text-center text-xs text-muted-foreground">
|
||||||
|
Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -91,7 +91,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
|
|||||||
}, [option, services, containers]);
|
}, [option, services, containers]);
|
||||||
|
|
||||||
const isLoading = option === "native" ? containersLoading : servicesLoading;
|
const isLoading = option === "native" ? containersLoading : servicesLoading;
|
||||||
const containersLenght =
|
const containersLength =
|
||||||
option === "native" ? containers?.length : services?.length;
|
option === "native" ? containers?.length : services?.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -167,7 +167,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<SelectLabel>Containers ({containersLenght})</SelectLabel>
|
<SelectLabel>Containers ({containersLength})</SelectLabel>
|
||||||
</SelectGroup>
|
</SelectGroup>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
export * from "./show-patches";
|
|
||||||
export * from "./patch-editor";
|
export * from "./patch-editor";
|
||||||
|
export * from "./show-patches";
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ export const AddPreviewDomain = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const host = form.watch("host");
|
const host = form.watch("host");
|
||||||
const isTraefikMeDomain = host?.includes("traefik.me") || false;
|
const isTraefikMeDomain = host?.includes("sslip.io") || false;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
@@ -162,7 +162,7 @@ export const AddPreviewDomain = ({
|
|||||||
<FormItem>
|
<FormItem>
|
||||||
{isTraefikMeDomain && (
|
{isTraefikMeDomain && (
|
||||||
<AlertBlock type="info">
|
<AlertBlock type="info">
|
||||||
<strong>Note:</strong> traefik.me is a public HTTP
|
<strong>Note:</strong> sslip.io is a public HTTP
|
||||||
service and does not support SSL/HTTPS. HTTPS and
|
service and does not support SSL/HTTPS. HTTPS and
|
||||||
certificate options will not have any effect.
|
certificate options will not have any effect.
|
||||||
</AlertBlock>
|
</AlertBlock>
|
||||||
@@ -202,7 +202,7 @@ export const AddPreviewDomain = ({
|
|||||||
sideOffset={5}
|
sideOffset={5}
|
||||||
className="max-w-[10rem]"
|
className="max-w-[10rem]"
|
||||||
>
|
>
|
||||||
<p>Generate traefik.me domain</p>
|
<p>Generate sslip.io domain</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
|||||||
const form = useForm<Schema>({
|
const form = useForm<Schema>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
env: "",
|
env: "",
|
||||||
wildcardDomain: "*.traefik.me",
|
wildcardDomain: "*.sslip.io",
|
||||||
port: 3000,
|
port: 3000,
|
||||||
previewLimit: 3,
|
previewLimit: 3,
|
||||||
previewLabels: [],
|
previewLabels: [],
|
||||||
@@ -102,7 +102,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
|||||||
|
|
||||||
const previewHttps = form.watch("previewHttps");
|
const previewHttps = form.watch("previewHttps");
|
||||||
const wildcardDomain = form.watch("wildcardDomain");
|
const wildcardDomain = form.watch("wildcardDomain");
|
||||||
const isTraefikMeDomain = wildcardDomain?.includes("traefik.me") || false;
|
const isTraefikMeDomain = wildcardDomain?.includes("sslip.io") || false;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsEnabled(data?.isPreviewDeploymentsActive || false);
|
setIsEnabled(data?.isPreviewDeploymentsActive || false);
|
||||||
@@ -114,7 +114,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
|||||||
env: data.previewEnv || "",
|
env: data.previewEnv || "",
|
||||||
buildArgs: data.previewBuildArgs || "",
|
buildArgs: data.previewBuildArgs || "",
|
||||||
buildSecrets: data.previewBuildSecrets || "",
|
buildSecrets: data.previewBuildSecrets || "",
|
||||||
wildcardDomain: data.previewWildcard || "*.traefik.me",
|
wildcardDomain: data.previewWildcard || "*.sslip.io",
|
||||||
port: data.previewPort || 3000,
|
port: data.previewPort || 3000,
|
||||||
previewLabels: data.previewLabels || [],
|
previewLabels: data.previewLabels || [],
|
||||||
previewLimit: data.previewLimit || 3,
|
previewLimit: data.previewLimit || 3,
|
||||||
@@ -173,7 +173,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
|||||||
<div className="grid gap-4">
|
<div className="grid gap-4">
|
||||||
{isTraefikMeDomain && (
|
{isTraefikMeDomain && (
|
||||||
<AlertBlock type="info">
|
<AlertBlock type="info">
|
||||||
<strong>Note:</strong> traefik.me is a public HTTP service and
|
<strong>Note:</strong> sslip.io is a public HTTP service and
|
||||||
does not support SSL/HTTPS. HTTPS and certificate options will
|
does not support SSL/HTTPS. HTTPS and certificate options will
|
||||||
not have any effect.
|
not have any effect.
|
||||||
</AlertBlock>
|
</AlertBlock>
|
||||||
@@ -192,7 +192,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
|
|||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Wildcard Domain</FormLabel>
|
<FormLabel>Wildcard Domain</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input placeholder="*.traefik.me" {...field} />
|
<Input placeholder="*.sslip.io" {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ export const commonCronExpressions = [
|
|||||||
const formSchema = z
|
const formSchema = z
|
||||||
.object({
|
.object({
|
||||||
name: z.string().min(1, "Name is required"),
|
name: z.string().min(1, "Name is required"),
|
||||||
|
description: z.string().optional(),
|
||||||
cronExpression: z.string().min(1, "Cron expression is required"),
|
cronExpression: z.string().min(1, "Cron expression is required"),
|
||||||
shellType: z.enum(["bash", "sh"]).default("bash"),
|
shellType: z.enum(["bash", "sh"]).default("bash"),
|
||||||
command: z.string(),
|
command: z.string(),
|
||||||
@@ -224,6 +225,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
|||||||
resolver: standardSchemaResolver(formSchema),
|
resolver: standardSchemaResolver(formSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: "",
|
name: "",
|
||||||
|
description: "",
|
||||||
cronExpression: "",
|
cronExpression: "",
|
||||||
shellType: "bash",
|
shellType: "bash",
|
||||||
command: "",
|
command: "",
|
||||||
@@ -263,6 +265,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
|||||||
if (scheduleId && schedule) {
|
if (scheduleId && schedule) {
|
||||||
form.reset({
|
form.reset({
|
||||||
name: schedule.name,
|
name: schedule.name,
|
||||||
|
description: schedule.description || "",
|
||||||
cronExpression: schedule.cronExpression,
|
cronExpression: schedule.cronExpression,
|
||||||
shellType: schedule.shellType,
|
shellType: schedule.shellType,
|
||||||
command: schedule.command,
|
command: schedule.command,
|
||||||
@@ -479,6 +482,26 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Description</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="Backs up the database every day at midnight"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Optional description of what this schedule does
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
<ScheduleFormField
|
<ScheduleFormField
|
||||||
name="cronExpression"
|
name="cronExpression"
|
||||||
formControl={form.control}
|
formControl={form.control}
|
||||||
|
|||||||
@@ -125,6 +125,11 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
|
|||||||
{schedule.enabled ? "Enabled" : "Disabled"}
|
{schedule.enabled ? "Enabled" : "Disabled"}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
{schedule.description && (
|
||||||
|
<p className="text-xs text-muted-foreground/70 [overflow-wrap:anywhere] line-clamp-2">
|
||||||
|
{schedule.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
|
<div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -71,6 +71,7 @@ const formSchema = z
|
|||||||
"mongo",
|
"mongo",
|
||||||
"mysql",
|
"mysql",
|
||||||
"redis",
|
"redis",
|
||||||
|
"libsql",
|
||||||
]),
|
]),
|
||||||
serviceName: z.string(),
|
serviceName: z.string(),
|
||||||
destinationId: z.string().min(1, "Destination required"),
|
destinationId: z.string().min(1, "Destination required"),
|
||||||
@@ -482,7 +483,7 @@ export const HandleVolumeBackups = ({
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Choose the volume to backup, if you dont see the
|
Choose the volume to backup. If you do not see the
|
||||||
volume here, you can type the volume name manually
|
volume here, you can type the volume name manually
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
@@ -517,7 +518,7 @@ export const HandleVolumeBackups = ({
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Choose the volume to backup, if you dont see the volume
|
Choose the volume to backup. If you do not see the volume
|
||||||
here, you can type the volume name manually
|
here, you can type the volume name manually
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|||||||
@@ -0,0 +1,290 @@
|
|||||||
|
import { Loader2, MoreHorizontal, RefreshCw } from "lucide-react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { ShowContainerConfig } from "@/components/dashboard/docker/config/show-container-config";
|
||||||
|
import { ShowContainerMounts } from "@/components/dashboard/docker/mounts/show-container-mounts";
|
||||||
|
import { ShowContainerNetworks } from "@/components/dashboard/docker/networks/show-container-networks";
|
||||||
|
import { DockerTerminalModal } from "@/components/dashboard/docker/terminal/docker-terminal-modal";
|
||||||
|
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 {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
const DockerLogsId = dynamic(
|
||||||
|
() =>
|
||||||
|
import("@/components/dashboard/docker/logs/docker-logs-id").then(
|
||||||
|
(e) => e.DockerLogsId,
|
||||||
|
),
|
||||||
|
{
|
||||||
|
ssr: false,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
appName: string;
|
||||||
|
serverId?: string;
|
||||||
|
appType: "stack" | "docker-compose";
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowComposeContainers = ({
|
||||||
|
appName,
|
||||||
|
appType,
|
||||||
|
serverId,
|
||||||
|
}: Props) => {
|
||||||
|
const { data, isPending, refetch } =
|
||||||
|
api.docker.getContainersByAppNameMatch.useQuery(
|
||||||
|
{
|
||||||
|
appName,
|
||||||
|
appType,
|
||||||
|
serverId,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: !!appName,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-xl">Containers</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Inspect each container in this compose and run basic lifecycle
|
||||||
|
actions.
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => refetch()}
|
||||||
|
disabled={isPending}
|
||||||
|
>
|
||||||
|
<RefreshCw className={`h-4 w-4 ${isPending ? "animate-spin" : ""}`} />
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{isPending ? (
|
||||||
|
<div className="flex items-center justify-center h-[20vh]">
|
||||||
|
<Loader2 className="animate-spin h-6 w-6 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : !data || data.length === 0 ? (
|
||||||
|
<div className="flex items-center justify-center h-[20vh]">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
No containers found. Deploy the compose to see containers here.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>State</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Container ID</TableHead>
|
||||||
|
<TableHead className="text-right" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((container) => (
|
||||||
|
<ContainerRow
|
||||||
|
key={container.containerId}
|
||||||
|
container={container}
|
||||||
|
serverId={serverId}
|
||||||
|
onActionComplete={() => refetch()}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ContainerRowProps {
|
||||||
|
container: {
|
||||||
|
containerId: string;
|
||||||
|
name: string;
|
||||||
|
state: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
serverId?: string;
|
||||||
|
onActionComplete: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ContainerRow = ({
|
||||||
|
container,
|
||||||
|
serverId,
|
||||||
|
onActionComplete,
|
||||||
|
}: ContainerRowProps) => {
|
||||||
|
const [logsOpen, setLogsOpen] = useState(false);
|
||||||
|
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const restartMutation = api.docker.restartContainer.useMutation();
|
||||||
|
const startMutation = api.docker.startContainer.useMutation();
|
||||||
|
const stopMutation = api.docker.stopContainer.useMutation();
|
||||||
|
const killMutation = api.docker.killContainer.useMutation();
|
||||||
|
|
||||||
|
const handleAction = async (
|
||||||
|
action: string,
|
||||||
|
mutationFn: typeof restartMutation,
|
||||||
|
) => {
|
||||||
|
setActionLoading(action);
|
||||||
|
try {
|
||||||
|
await mutationFn.mutateAsync({
|
||||||
|
containerId: container.containerId,
|
||||||
|
serverId,
|
||||||
|
});
|
||||||
|
toast.success(`Container ${action} successfully`);
|
||||||
|
onActionComplete();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(
|
||||||
|
`Failed to ${action} container: ${error instanceof Error ? error.message : "Unknown error"}`,
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setActionLoading(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell className="font-medium">{container.name}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant={
|
||||||
|
container.state === "running"
|
||||||
|
? "default"
|
||||||
|
: container.state === "exited"
|
||||||
|
? "secondary"
|
||||||
|
: "destructive"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{container.state}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{container.status}</TableCell>
|
||||||
|
<TableCell className="font-mono text-sm text-muted-foreground">
|
||||||
|
{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>
|
||||||
|
<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 || ""}
|
||||||
|
>
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -57,6 +57,7 @@ export const DeleteService = ({ id, type }: Props) => {
|
|||||||
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
mariadb: () =>
|
mariadb: () =>
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
|
libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
application: () =>
|
application: () =>
|
||||||
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
|
||||||
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
@@ -72,6 +73,7 @@ export const DeleteService = ({ id, type }: Props) => {
|
|||||||
redis: () => api.redis.remove.useMutation(),
|
redis: () => api.redis.remove.useMutation(),
|
||||||
mysql: () => api.mysql.remove.useMutation(),
|
mysql: () => api.mysql.remove.useMutation(),
|
||||||
mariadb: () => api.mariadb.remove.useMutation(),
|
mariadb: () => api.mariadb.remove.useMutation(),
|
||||||
|
libsql: () => api.libsql.remove.useMutation(),
|
||||||
application: () => api.application.delete.useMutation(),
|
application: () => api.application.delete.useMutation(),
|
||||||
mongo: () => api.mongo.remove.useMutation(),
|
mongo: () => api.mongo.remove.useMutation(),
|
||||||
compose: () => api.compose.delete.useMutation(),
|
compose: () => api.compose.delete.useMutation(),
|
||||||
@@ -98,6 +100,7 @@ export const DeleteService = ({ id, type }: Props) => {
|
|||||||
redisId: id || "",
|
redisId: id || "",
|
||||||
mysqlId: id || "",
|
mysqlId: id || "",
|
||||||
mariadbId: id || "",
|
mariadbId: id || "",
|
||||||
|
libsqlId: id || "",
|
||||||
applicationId: id || "",
|
applicationId: id || "",
|
||||||
composeId: id || "",
|
composeId: id || "",
|
||||||
deleteVolumes,
|
deleteVolumes,
|
||||||
|
|||||||
@@ -49,12 +49,12 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
|
|||||||
const composeFile = form.watch("composeFile");
|
const composeFile = form.watch("composeFile");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data && !composeFile) {
|
if (data) {
|
||||||
form.reset({
|
form.reset({
|
||||||
composeFile: data.composeFile || "",
|
composeFile: data.composeFile || "",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [form, form.reset, data]);
|
}, [form, data]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data?.composeFile !== undefined) {
|
if (data?.composeFile !== undefined) {
|
||||||
@@ -95,7 +95,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
|
|||||||
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
// Add keyboard shortcut for Ctrl+S/Cmd+S
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
|
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -57,7 +58,10 @@ const BitbucketProviderSchema = z.object({
|
|||||||
slug: z.string().optional(),
|
slug: z.string().optional(),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
|
bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
@@ -418,7 +422,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Watch Paths</FormLabel>
|
<FormLabel>Watch Paths</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
||||||
?
|
?
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
|
import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -41,7 +42,10 @@ const GitProviderSchema = z.object({
|
|||||||
repositoryURL: z.string().min(1, {
|
repositoryURL: z.string().min(1, {
|
||||||
message: "Repository URL is required",
|
message: "Repository URL is required",
|
||||||
}),
|
}),
|
||||||
branch: z.string().min(1, "Branch required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
sshKey: z.string().optional(),
|
sshKey: z.string().optional(),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
@@ -55,7 +59,7 @@ interface Props {
|
|||||||
|
|
||||||
export const SaveGitProviderCompose = ({ composeId }: Props) => {
|
export const SaveGitProviderCompose = ({ composeId }: Props) => {
|
||||||
const { data, refetch } = api.compose.one.useQuery({ composeId });
|
const { data, refetch } = api.compose.one.useQuery({ composeId });
|
||||||
const { data: sshKeys } = api.sshKey.all.useQuery();
|
const { data: sshKeys } = api.sshKey.allForApps.useQuery();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const { mutateAsync, isPending } = api.compose.update.useMutation();
|
const { mutateAsync, isPending } = api.compose.update.useMutation();
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
@@ -57,7 +58,10 @@ const GiteaProviderSchema = z.object({
|
|||||||
owner: z.string().min(1, "Owner is required"),
|
owner: z.string().min(1, "Owner is required"),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
giteaId: z.string().min(1, "Gitea Provider is required"),
|
giteaId: z.string().min(1, "Gitea Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
@@ -409,10 +413,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Watch Paths</FormLabel>
|
<FormLabel>Watch Paths</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger asChild>
|
||||||
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
|
||||||
?
|
|
||||||
</div>
|
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -55,7 +56,10 @@ const GithubProviderSchema = z.object({
|
|||||||
owner: z.string().min(1, "Owner is required"),
|
owner: z.string().min(1, "Owner is required"),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
githubId: z.string().min(1, "Github Provider is required"),
|
githubId: z.string().min(1, "Github Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
triggerType: z.enum(["push", "tag"]).default("push"),
|
triggerType: z.enum(["push", "tag"]).default("push"),
|
||||||
@@ -445,7 +449,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Watch Paths</FormLabel>
|
<FormLabel>Watch Paths</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
||||||
?
|
?
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
|
||||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
|
import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -58,7 +59,10 @@ const GitlabProviderSchema = z.object({
|
|||||||
gitlabPathNamespace: z.string().min(1),
|
gitlabPathNamespace: z.string().min(1),
|
||||||
})
|
})
|
||||||
.required(),
|
.required(),
|
||||||
branch: z.string().min(1, "Branch is required"),
|
branch: z
|
||||||
|
.string()
|
||||||
|
.min(1, "Branch is required")
|
||||||
|
.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
|
||||||
gitlabId: z.string().min(1, "Gitlab Provider is required"),
|
gitlabId: z.string().min(1, "Gitlab Provider is required"),
|
||||||
watchPaths: z.array(z.string()).optional(),
|
watchPaths: z.array(z.string()).optional(),
|
||||||
enableSubmodules: z.boolean().default(false),
|
enableSubmodules: z.boolean().default(false),
|
||||||
@@ -436,7 +440,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
|
|||||||
<FormLabel>Watch Paths</FormLabel>
|
<FormLabel>Watch Paths</FormLabel>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger type="button">
|
||||||
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
|
||||||
?
|
?
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
|
|||||||
}, [option, services, containers]);
|
}, [option, services, containers]);
|
||||||
|
|
||||||
const isLoading = option === "native" ? containersLoading : servicesLoading;
|
const isLoading = option === "native" ? containersLoading : servicesLoading;
|
||||||
const containersLenght =
|
const containersLength =
|
||||||
option === "native" ? containers?.length : services?.length;
|
option === "native" ? containers?.length : services?.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -152,7 +152,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<SelectLabel>Containers ({containersLenght})</SelectLabel>
|
<SelectLabel>Containers ({containersLength})</SelectLabel>
|
||||||
</SelectGroup>
|
</SelectGroup>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
@@ -65,7 +65,13 @@ import { ScheduleFormField } from "../../application/schedules/handle-schedules"
|
|||||||
|
|
||||||
type CacheType = "cache" | "fetch";
|
type CacheType = "cache" | "fetch";
|
||||||
|
|
||||||
type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server";
|
type DatabaseType =
|
||||||
|
| "postgres"
|
||||||
|
| "mariadb"
|
||||||
|
| "mysql"
|
||||||
|
| "mongo"
|
||||||
|
| "web-server"
|
||||||
|
| "libsql";
|
||||||
|
|
||||||
const Schema = z
|
const Schema = z
|
||||||
.object({
|
.object({
|
||||||
@@ -77,7 +83,7 @@ const Schema = z
|
|||||||
keepLatestCount: z.coerce.number().optional(),
|
keepLatestCount: z.coerce.number().optional(),
|
||||||
serviceName: z.string().nullable(),
|
serviceName: z.string().nullable(),
|
||||||
databaseType: z
|
databaseType: z
|
||||||
.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
|
.enum(["postgres", "mariadb", "mysql", "mongo", "web-server", "libsql"])
|
||||||
.optional(),
|
.optional(),
|
||||||
backupType: z.enum(["database", "compose"]),
|
backupType: z.enum(["database", "compose"]),
|
||||||
metadata: z
|
metadata: z
|
||||||
@@ -209,7 +215,12 @@ export const HandleBackup = ({
|
|||||||
|
|
||||||
const form = useForm({
|
const form = useForm({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
database: databaseType === "web-server" ? "dokploy" : "",
|
database:
|
||||||
|
databaseType === "web-server"
|
||||||
|
? "dokploy"
|
||||||
|
: databaseType === "libsql"
|
||||||
|
? "iku.db"
|
||||||
|
: "",
|
||||||
destinationId: "",
|
destinationId: "",
|
||||||
enabled: true,
|
enabled: true,
|
||||||
prefix: "/",
|
prefix: "/",
|
||||||
@@ -246,7 +257,9 @@ export const HandleBackup = ({
|
|||||||
? backup?.database
|
? backup?.database
|
||||||
: databaseType === "web-server"
|
: databaseType === "web-server"
|
||||||
? "dokploy"
|
? "dokploy"
|
||||||
: "",
|
: databaseType === "libsql"
|
||||||
|
? "iku.db"
|
||||||
|
: "",
|
||||||
destinationId: backup?.destinationId ?? "",
|
destinationId: backup?.destinationId ?? "",
|
||||||
enabled: backup?.enabled ?? true,
|
enabled: backup?.enabled ?? true,
|
||||||
prefix: backup?.prefix ?? "/",
|
prefix: backup?.prefix ?? "/",
|
||||||
@@ -281,11 +294,15 @@ export const HandleBackup = ({
|
|||||||
? {
|
? {
|
||||||
mongoId: id,
|
mongoId: id,
|
||||||
}
|
}
|
||||||
: databaseType === "web-server"
|
: databaseType === "libsql"
|
||||||
? {
|
? {
|
||||||
userId: id,
|
libsqlId: id,
|
||||||
}
|
}
|
||||||
: undefined;
|
: databaseType === "web-server"
|
||||||
|
? {
|
||||||
|
userId: id,
|
||||||
|
}
|
||||||
|
: undefined;
|
||||||
|
|
||||||
await createBackup({
|
await createBackup({
|
||||||
destinationId: data.destinationId,
|
destinationId: data.destinationId,
|
||||||
@@ -568,7 +585,10 @@ export const HandleBackup = ({
|
|||||||
<FormLabel>Database</FormLabel>
|
<FormLabel>Database</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
disabled={databaseType === "web-server"}
|
disabled={
|
||||||
|
databaseType === "web-server" ||
|
||||||
|
databaseType === "libsql"
|
||||||
|
}
|
||||||
placeholder={"dokploy"}
|
placeholder={"dokploy"}
|
||||||
{...field}
|
{...field}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ const RestoreBackupSchema = z
|
|||||||
message: "Database name is required",
|
message: "Database name is required",
|
||||||
}),
|
}),
|
||||||
databaseType: z
|
databaseType: z
|
||||||
.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
|
.enum(["postgres", "mariadb", "mysql", "mongo", "web-server", "libsql"])
|
||||||
.optional(),
|
.optional(),
|
||||||
backupType: z.enum(["database", "compose"]).default("database"),
|
backupType: z.enum(["database", "compose"]).default("database"),
|
||||||
metadata: z
|
metadata: z
|
||||||
@@ -211,7 +211,12 @@ export const RestoreBackup = ({
|
|||||||
defaultValues: {
|
defaultValues: {
|
||||||
destinationId: "",
|
destinationId: "",
|
||||||
backupFile: "",
|
backupFile: "",
|
||||||
databaseName: databaseType === "web-server" ? "dokploy" : "",
|
databaseName:
|
||||||
|
databaseType === "web-server"
|
||||||
|
? "dokploy"
|
||||||
|
: databaseType === "libsql"
|
||||||
|
? "iku.db"
|
||||||
|
: "",
|
||||||
databaseType:
|
databaseType:
|
||||||
backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
|
backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
|
||||||
backupType: backupType,
|
backupType: backupType,
|
||||||
@@ -220,7 +225,7 @@ export const RestoreBackup = ({
|
|||||||
resolver: zodResolver(RestoreBackupSchema),
|
resolver: zodResolver(RestoreBackupSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const destionationId = form.watch("destinationId");
|
const destinationId = form.watch("destinationId");
|
||||||
const currentDatabaseType = form.watch("databaseType");
|
const currentDatabaseType = form.watch("databaseType");
|
||||||
const metadata = form.watch("metadata");
|
const metadata = form.watch("metadata");
|
||||||
|
|
||||||
@@ -235,12 +240,12 @@ export const RestoreBackup = ({
|
|||||||
|
|
||||||
const { data: files = [], isPending } = api.backup.listBackupFiles.useQuery(
|
const { data: files = [], isPending } = api.backup.listBackupFiles.useQuery(
|
||||||
{
|
{
|
||||||
destinationId: destionationId,
|
destinationId: destinationId,
|
||||||
search: debouncedSearchTerm,
|
search: debouncedSearchTerm,
|
||||||
serverId: serverId ?? "",
|
serverId: serverId ?? "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: isOpen && !!destionationId,
|
enabled: isOpen && !!destinationId,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -283,7 +288,6 @@ export const RestoreBackup = ({
|
|||||||
toast.error("Please select a database type");
|
toast.error("Please select a database type");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log({ data });
|
|
||||||
setIsDeploying(true);
|
setIsDeploying(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -523,7 +527,10 @@ export const RestoreBackup = ({
|
|||||||
<Input
|
<Input
|
||||||
placeholder="Enter database name"
|
placeholder="Enter database name"
|
||||||
{...field}
|
{...field}
|
||||||
disabled={databaseType === "web-server"}
|
disabled={
|
||||||
|
databaseType === "web-server" ||
|
||||||
|
databaseType === "libsql"
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|||||||
@@ -53,14 +53,16 @@ export const ShowBackups = ({
|
|||||||
const queryMap =
|
const queryMap =
|
||||||
backupType === "database"
|
backupType === "database"
|
||||||
? {
|
? {
|
||||||
postgres: () =>
|
|
||||||
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
|
||||||
mysql: () =>
|
|
||||||
api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
|
||||||
mariadb: () =>
|
mariadb: () =>
|
||||||
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
|
||||||
mongo: () =>
|
mongo: () =>
|
||||||
api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
|
||||||
|
mysql: () =>
|
||||||
|
api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
|
||||||
|
postgres: () =>
|
||||||
|
api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
|
||||||
|
libsql: () =>
|
||||||
|
api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
|
||||||
"web-server": () => api.user.getBackups.useQuery(),
|
"web-server": () => api.user.getBackups.useQuery(),
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
@@ -77,10 +79,11 @@ export const ShowBackups = ({
|
|||||||
const mutationMap =
|
const mutationMap =
|
||||||
backupType === "database"
|
backupType === "database"
|
||||||
? {
|
? {
|
||||||
postgres: api.backup.manualBackupPostgres.useMutation(),
|
|
||||||
mysql: api.backup.manualBackupMySql.useMutation(),
|
|
||||||
mariadb: api.backup.manualBackupMariadb.useMutation(),
|
mariadb: api.backup.manualBackupMariadb.useMutation(),
|
||||||
mongo: api.backup.manualBackupMongo.useMutation(),
|
mongo: api.backup.manualBackupMongo.useMutation(),
|
||||||
|
mysql: api.backup.manualBackupMySql.useMutation(),
|
||||||
|
postgres: api.backup.manualBackupPostgres.useMutation(),
|
||||||
|
libsql: api.backup.manualBackupLibsql.useMutation(),
|
||||||
"web-server": api.backup.manualBackupWebServer.useMutation(),
|
"web-server": api.backup.manualBackupWebServer.useMutation(),
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import type { inferRouterOutputs } from "@trpc/server";
|
import type { inferRouterOutputs } from "@trpc/server";
|
||||||
import Link from "next/link";
|
|
||||||
import { ArrowRight, ListTodo, Loader2, XCircle } from "lucide-react";
|
import { ArrowRight, ListTodo, Loader2, XCircle } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
|
|||||||
220
apps/dokploy/components/dashboard/docker/logs/analyze-logs.tsx
Normal file
220
apps/dokploy/components/dashboard/docker/logs/analyze-logs.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
"use client";
|
||||||
|
import copy from "copy-to-clipboard";
|
||||||
|
import {
|
||||||
|
Bot,
|
||||||
|
Check,
|
||||||
|
Copy,
|
||||||
|
Loader2,
|
||||||
|
RotateCcw,
|
||||||
|
Settings,
|
||||||
|
X,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from "react";
|
||||||
|
import ReactMarkdown from "react-markdown";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
import type { LogLine } from "./utils";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
logs: LogLine[];
|
||||||
|
context: "build" | "runtime";
|
||||||
|
}
|
||||||
|
|
||||||
|
const MAX_LOG_LINES = 200;
|
||||||
|
|
||||||
|
export function AnalyzeLogs({ logs, context }: Props) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [aiId, setAiId] = useState<string>("");
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const { data: providers } = api.ai.getEnabledProviders.useQuery(undefined, {
|
||||||
|
enabled: open,
|
||||||
|
});
|
||||||
|
const { mutate, isPending, data, reset } = api.ai.analyzeLogs.useMutation({
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error("Analysis failed", {
|
||||||
|
description: error.message,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleAnalyze = () => {
|
||||||
|
if (!aiId || logs.length === 0) return;
|
||||||
|
|
||||||
|
const logsText = logs
|
||||||
|
.slice(-MAX_LOG_LINES)
|
||||||
|
.map((l) => l.message)
|
||||||
|
.join("\n");
|
||||||
|
|
||||||
|
mutate({ aiId, logs: logsText, context });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = () => {
|
||||||
|
if (!data?.analysis) return;
|
||||||
|
const success = copy(data.analysis);
|
||||||
|
if (success) {
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(isOpen) => {
|
||||||
|
setOpen(isOpen);
|
||||||
|
if (!isOpen) {
|
||||||
|
reset();
|
||||||
|
setAiId("");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-9"
|
||||||
|
disabled={logs.length === 0}
|
||||||
|
title="Analyze logs with AI"
|
||||||
|
>
|
||||||
|
<Bot className="mr-2 size-4" />
|
||||||
|
AI
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[550px] p-0" align="end">
|
||||||
|
<div className="flex items-center justify-between border-b px-4 py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Bot className="h-4 w-4" />
|
||||||
|
<span className="text-sm font-medium">Log Analysis</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-6 w-6"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 space-y-3">
|
||||||
|
{!data?.analysis ? (
|
||||||
|
providers && providers.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center gap-3 py-2 text-center">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No AI providers configured. Set up a provider to start
|
||||||
|
analyzing logs.
|
||||||
|
</p>
|
||||||
|
<Button size="sm" variant="outline" asChild>
|
||||||
|
<Link href="/dashboard/settings/ai">
|
||||||
|
<Settings className="mr-2 h-3.5 w-3.5" />
|
||||||
|
Configure AI Provider
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Select value={aiId} onValueChange={setAiId}>
|
||||||
|
<SelectTrigger className="h-9 text-sm">
|
||||||
|
<SelectValue placeholder="Select AI provider..." />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{providers?.map((p) => (
|
||||||
|
<SelectItem key={p.aiId} value={p.aiId}>
|
||||||
|
{p.name} ({p.model})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="w-full"
|
||||||
|
disabled={!aiId || isPending || logs.length === 0}
|
||||||
|
onClick={handleAnalyze}
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
|
||||||
|
Analyzing...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Bot className="mr-2 h-3.5 w-3.5" />
|
||||||
|
Analyze{" "}
|
||||||
|
{logs.length > MAX_LOG_LINES
|
||||||
|
? `last ${MAX_LOG_LINES}`
|
||||||
|
: logs.length}{" "}
|
||||||
|
lines
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="max-h-[400px] overflow-y-auto">
|
||||||
|
<div className="prose prose-sm dark:prose-invert max-w-none text-sm break-words">
|
||||||
|
<ReactMarkdown>{data.analysis}</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => {
|
||||||
|
reset();
|
||||||
|
handleAnalyze();
|
||||||
|
}}
|
||||||
|
disabled={isPending}
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
Re-analyze
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleCopy}
|
||||||
|
title="Copy analysis to clipboard"
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<Check className="h-3.5 w-3.5" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
reset();
|
||||||
|
setAiId("");
|
||||||
|
}}
|
||||||
|
title="Change provider"
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -12,6 +12,7 @@ import { AlertBlock } from "@/components/shared/alert-block";
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
|
import { AnalyzeLogs } from "./analyze-logs";
|
||||||
import { LineCountFilter } from "./line-count-filter";
|
import { LineCountFilter } from "./line-count-filter";
|
||||||
import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
|
import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
|
||||||
import { StatusLogsFilter } from "./status-logs-filter";
|
import { StatusLogsFilter } from "./status-logs-filter";
|
||||||
@@ -346,11 +347,13 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
title={isPaused ? "Resume logs" : "Pause logs"}
|
title={isPaused ? "Resume logs" : "Pause logs"}
|
||||||
>
|
>
|
||||||
{isPaused ? (
|
{isPaused ? (
|
||||||
<Play className="mr-2 h-4 w-4" />
|
<Play className="size-4" />
|
||||||
) : (
|
) : (
|
||||||
<Pause className="mr-2 h-4 w-4" />
|
<Pause className="size-4" />
|
||||||
)}
|
)}
|
||||||
{isPaused ? "Resume" : "Pause"}
|
<span className="hidden lg:ml-2 lg:inline">
|
||||||
|
{isPaused ? "Resume" : "Pause"}
|
||||||
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -361,11 +364,13 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
title="Copy logs to clipboard"
|
title="Copy logs to clipboard"
|
||||||
>
|
>
|
||||||
{copied ? (
|
{copied ? (
|
||||||
<Check className="mr-2 h-4 w-4" />
|
<Check className="size-4" />
|
||||||
) : (
|
) : (
|
||||||
<Copy className="mr-2 h-4 w-4" />
|
<Copy className="size-4" />
|
||||||
)}
|
)}
|
||||||
Copy
|
<span className="hidden lg:ml-2 lg:inline">
|
||||||
|
{copied ? "Copied" : "Copy"}
|
||||||
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -373,16 +378,18 @@ export const DockerLogsId: React.FC<Props> = ({
|
|||||||
className="h-9 sm:w-auto w-full"
|
className="h-9 sm:w-auto w-full"
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
disabled={filteredLogs.length === 0 || !data?.Name}
|
disabled={filteredLogs.length === 0 || !data?.Name}
|
||||||
|
title="Download logs as text file"
|
||||||
>
|
>
|
||||||
<DownloadIcon className="mr-2 h-4 w-4" />
|
<DownloadIcon className="size-4" />
|
||||||
Download logs
|
<span className="hidden lg:ml-2 lg:inline">Download logs</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
<AnalyzeLogs logs={filteredLogs} context="runtime" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{isPaused && (
|
{isPaused && (
|
||||||
<AlertBlock type="warning">
|
<AlertBlock type="warning" className="items-center">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Pause className="h-4 w-4" />
|
<Pause className="size-4" />
|
||||||
<span>
|
<span>
|
||||||
Logs paused
|
Logs paused
|
||||||
{messageBuffer.length > 0 && (
|
{messageBuffer.length > 0 && (
|
||||||
|
|||||||
@@ -103,7 +103,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
|||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
<div className="flex items-start gap-x-2">
|
<div className="flex items-start gap-x-2">
|
||||||
{/* Icon to expand the log item maybe implement a colapsible later */}
|
{/* Icon to expand the log item maybe implement a collapsible later */}
|
||||||
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
|
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
|
||||||
{tooltip(color, rawTimestamp)}
|
{tooltip(color, rawTimestamp)}
|
||||||
{!noTimestamp && (
|
{!noTimestamp && (
|
||||||
|
|||||||
@@ -74,6 +74,18 @@ export function parseLogs(logString: string): LogLine[] {
|
|||||||
|
|
||||||
// Detect log type based on message content
|
// Detect log type based on message content
|
||||||
export const getLogType = (message: string): LogStyle => {
|
export const getLogType = (message: string): LogStyle => {
|
||||||
|
// Detect HTTP statusCode
|
||||||
|
const statusMatch = message.match(/"statusCode"\s*:\s*"?(\d{3})"?/);
|
||||||
|
|
||||||
|
if (statusMatch) {
|
||||||
|
const statusCode = Number(statusMatch[1]);
|
||||||
|
|
||||||
|
if (statusCode >= 500) return LOG_STYLES.error;
|
||||||
|
if (statusCode >= 400) return LOG_STYLES.warning;
|
||||||
|
if (statusCode >= 200 && statusCode < 300) return LOG_STYLES.success;
|
||||||
|
return LOG_STYLES.info;
|
||||||
|
}
|
||||||
|
|
||||||
const lowerMessage = message.toLowerCase();
|
const lowerMessage = message.toLowerCase();
|
||||||
|
|
||||||
if (
|
if (
|
||||||
|
|||||||
@@ -0,0 +1,112 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
containerId: string;
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Mount {
|
||||||
|
Type: string;
|
||||||
|
Source: string;
|
||||||
|
Destination: string;
|
||||||
|
Mode: string;
|
||||||
|
RW: boolean;
|
||||||
|
Propagation: string;
|
||||||
|
Name?: string;
|
||||||
|
Driver?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowContainerMounts = ({ containerId, serverId }: Props) => {
|
||||||
|
const { data } = api.docker.getConfig.useQuery(
|
||||||
|
{
|
||||||
|
containerId,
|
||||||
|
serverId,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: !!containerId,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const mounts: Mount[] = data?.Mounts ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="w-full cursor-pointer"
|
||||||
|
onSelect={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
View Mounts
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Container Mounts</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Volume and bind mounts for this container
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="overflow-auto max-h-[70vh]">
|
||||||
|
{mounts.length === 0 ? (
|
||||||
|
<div className="text-center text-muted-foreground py-8">
|
||||||
|
No mounts found for this container.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Source</TableHead>
|
||||||
|
<TableHead>Destination</TableHead>
|
||||||
|
<TableHead>Mode</TableHead>
|
||||||
|
<TableHead>Read/Write</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mounts.map((mount, index) => (
|
||||||
|
<TableRow key={index}>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{mount.Type}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono text-xs max-w-[250px] truncate">
|
||||||
|
{mount.Name || mount.Source}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono text-xs max-w-[250px] truncate">
|
||||||
|
{mount.Destination}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-xs">
|
||||||
|
{mount.Mode || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={mount.RW ? "default" : "secondary"}>
|
||||||
|
{mount.RW ? "RW" : "RO"}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
containerId: string;
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Network {
|
||||||
|
IPAMConfig: unknown;
|
||||||
|
Links: unknown;
|
||||||
|
Aliases: string[] | null;
|
||||||
|
MacAddress: string;
|
||||||
|
NetworkID: string;
|
||||||
|
EndpointID: string;
|
||||||
|
Gateway: string;
|
||||||
|
IPAddress: string;
|
||||||
|
IPPrefixLen: number;
|
||||||
|
IPv6Gateway: string;
|
||||||
|
GlobalIPv6Address: string;
|
||||||
|
GlobalIPv6PrefixLen: number;
|
||||||
|
DriverOpts: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowContainerNetworks = ({ containerId, serverId }: Props) => {
|
||||||
|
const { data } = api.docker.getConfig.useQuery(
|
||||||
|
{
|
||||||
|
containerId,
|
||||||
|
serverId,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: !!containerId,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const networks: Record<string, Network> =
|
||||||
|
data?.NetworkSettings?.Networks ?? {};
|
||||||
|
const entries = Object.entries(networks);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="w-full cursor-pointer"
|
||||||
|
onSelect={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
View Networks
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Container Networks</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Networks attached to this container
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="overflow-auto max-h-[70vh]">
|
||||||
|
{entries.length === 0 ? (
|
||||||
|
<div className="text-center text-muted-foreground py-8">
|
||||||
|
No networks found for this container.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Network</TableHead>
|
||||||
|
<TableHead>IP Address</TableHead>
|
||||||
|
<TableHead>Gateway</TableHead>
|
||||||
|
<TableHead>MAC Address</TableHead>
|
||||||
|
<TableHead>Aliases</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{entries.map(([name, network]) => (
|
||||||
|
<TableRow key={name}>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{name}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono text-xs">
|
||||||
|
{network.IPAddress
|
||||||
|
? `${network.IPAddress}/${network.IPPrefixLen}`
|
||||||
|
: "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono text-xs">
|
||||||
|
{network.Gateway || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono text-xs">
|
||||||
|
{network.MacAddress || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-xs">
|
||||||
|
{network.Aliases?.join(", ") || "-"}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
containerId: string;
|
||||||
|
serverId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RemoveContainerDialog = ({ containerId, serverId }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const { mutateAsync, isPending } = api.docker.removeContainer.useMutation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="w-full cursor-pointer text-red-500 hover:!text-red-600"
|
||||||
|
onSelect={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
Remove Container
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This will permanently remove the container{" "}
|
||||||
|
<span className="font-semibold">{containerId}</span>. If the
|
||||||
|
container is running, it will be forcefully stopped and removed.
|
||||||
|
This action cannot be undone.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={async () => {
|
||||||
|
await mutateAsync({ containerId, serverId })
|
||||||
|
.then(async () => {
|
||||||
|
toast.success("Container removed successfully");
|
||||||
|
await utils.docker.getContainers.invalidate();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
toast.error(err.message);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -10,7 +10,11 @@ import {
|
|||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { ShowContainerConfig } from "../config/show-container-config";
|
import { ShowContainerConfig } from "../config/show-container-config";
|
||||||
import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
|
import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
|
||||||
|
import { ShowContainerMounts } from "../mounts/show-container-mounts";
|
||||||
|
import { ShowContainerNetworks } from "../networks/show-container-networks";
|
||||||
|
import { RemoveContainerDialog } from "../remove/remove-container";
|
||||||
import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
|
import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
|
||||||
|
import { UploadFileModal } from "../upload/upload-file-modal";
|
||||||
import type { Container } from "./show-containers";
|
import type { Container } from "./show-containers";
|
||||||
|
|
||||||
export const columns: ColumnDef<Container>[] = [
|
export const columns: ColumnDef<Container>[] = [
|
||||||
@@ -121,12 +125,30 @@ export const columns: ColumnDef<Container>[] = [
|
|||||||
containerId={container.containerId}
|
containerId={container.containerId}
|
||||||
serverId={container.serverId || ""}
|
serverId={container.serverId || ""}
|
||||||
/>
|
/>
|
||||||
|
<ShowContainerMounts
|
||||||
|
containerId={container.containerId}
|
||||||
|
serverId={container.serverId || ""}
|
||||||
|
/>
|
||||||
|
<ShowContainerNetworks
|
||||||
|
containerId={container.containerId}
|
||||||
|
serverId={container.serverId || ""}
|
||||||
|
/>
|
||||||
<DockerTerminalModal
|
<DockerTerminalModal
|
||||||
containerId={container.containerId}
|
containerId={container.containerId}
|
||||||
serverId={container.serverId || ""}
|
serverId={container.serverId || ""}
|
||||||
>
|
>
|
||||||
Terminal
|
Terminal
|
||||||
</DockerTerminalModal>
|
</DockerTerminalModal>
|
||||||
|
<UploadFileModal
|
||||||
|
containerId={container.containerId}
|
||||||
|
serverId={container.serverId || undefined}
|
||||||
|
>
|
||||||
|
Upload File
|
||||||
|
</UploadFileModal>
|
||||||
|
<RemoveContainerDialog
|
||||||
|
containerId={container.containerId}
|
||||||
|
serverId={container.serverId ?? undefined}
|
||||||
|
/>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
@@ -35,7 +35,7 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { api, type RouterOutputs } from "@/utils/api";
|
import { api, type RouterOutputs } from "@/utils/api";
|
||||||
import { columns } from "./colums";
|
import { columns } from "./columns";
|
||||||
export type Container = NonNullable<
|
export type Container = NonNullable<
|
||||||
RouterOutputs["docker"]["getContainers"]
|
RouterOutputs["docker"]["getContainers"]
|
||||||
>[0];
|
>[0];
|
||||||
|
|||||||
@@ -0,0 +1,187 @@
|
|||||||
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
|
import { Upload } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
|
||||||
|
import { Dropzone } from "@/components/ui/dropzone";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
import {
|
||||||
|
type UploadFileToContainer,
|
||||||
|
uploadFileToContainerSchema,
|
||||||
|
} from "@/utils/schema";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
containerId: string;
|
||||||
|
serverId?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UploadFileModal = ({ children, containerId, serverId }: Props) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const { mutateAsync: uploadFile, isPending: isLoading } =
|
||||||
|
api.docker.uploadFileToContainer.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success("File uploaded successfully");
|
||||||
|
setOpen(false);
|
||||||
|
form.reset();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.message || "Failed to upload file to container");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm({
|
||||||
|
resolver: zodResolver(uploadFileToContainerSchema),
|
||||||
|
defaultValues: {
|
||||||
|
containerId,
|
||||||
|
destinationPath: "/",
|
||||||
|
serverId: serverId || undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const file = form.watch("file");
|
||||||
|
|
||||||
|
const onSubmit = async (values: UploadFileToContainer) => {
|
||||||
|
if (!values.file) {
|
||||||
|
toast.error("Please select a file to upload");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("containerId", values.containerId);
|
||||||
|
formData.append("file", values.file);
|
||||||
|
formData.append("destinationPath", values.destinationPath);
|
||||||
|
if (values.serverId) {
|
||||||
|
formData.append("serverId", values.serverId);
|
||||||
|
}
|
||||||
|
|
||||||
|
await uploadFile(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="w-full cursor-pointer space-x-3"
|
||||||
|
onSelect={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<Upload className="h-5 w-5" />
|
||||||
|
Upload File to Container
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Upload a file directly into the container's filesystem
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="destinationPath"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Destination Path</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
placeholder="/path/to/file"
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Enter the full path where the file should be uploaded in the
|
||||||
|
container (e.g., /app/config.json)
|
||||||
|
</p>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="file"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>File</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Dropzone
|
||||||
|
{...field}
|
||||||
|
dropMessage="Drop file here or click to browse"
|
||||||
|
onChange={(files) => {
|
||||||
|
if (files && files.length > 0) {
|
||||||
|
field.onChange(files[0]);
|
||||||
|
} else {
|
||||||
|
field.onChange(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
{file instanceof File && (
|
||||||
|
<div className="flex items-center gap-2 p-2 bg-muted rounded-md">
|
||||||
|
<span className="text-sm text-muted-foreground flex-1">
|
||||||
|
{file.name} ({(file.size / 1024).toFixed(2)} KB)
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => field.onChange(null)}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
isLoading={isLoading}
|
||||||
|
disabled={!file || isLoading}
|
||||||
|
>
|
||||||
|
Upload File
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
291
apps/dokploy/components/dashboard/home/show-home.tsx
Normal file
291
apps/dokploy/components/dashboard/home/show-home.tsx
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
import { formatDistanceToNow } from "date-fns";
|
||||||
|
import { ArrowRight, Rocket, Server } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
type DeploymentStatus = "idle" | "running" | "done" | "error";
|
||||||
|
|
||||||
|
const statusDotClass: Record<string, string> = {
|
||||||
|
done: "bg-emerald-500",
|
||||||
|
running: "bg-amber-500",
|
||||||
|
error: "bg-red-500",
|
||||||
|
idle: "bg-muted-foreground/40",
|
||||||
|
};
|
||||||
|
|
||||||
|
function getServiceInfo(d: any) {
|
||||||
|
const app = d.application;
|
||||||
|
const comp = d.compose;
|
||||||
|
const serverName: string =
|
||||||
|
d.server?.name ?? app?.server?.name ?? comp?.server?.name ?? "Dokploy";
|
||||||
|
if (app?.environment?.project && app.environment) {
|
||||||
|
return {
|
||||||
|
name: app.name as string,
|
||||||
|
environment: app.environment.name as string,
|
||||||
|
projectName: app.environment.project.name as string,
|
||||||
|
serverName,
|
||||||
|
href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (comp?.environment?.project && comp.environment) {
|
||||||
|
return {
|
||||||
|
name: comp.name as string,
|
||||||
|
environment: comp.environment.name as string,
|
||||||
|
projectName: comp.environment.project.name as string,
|
||||||
|
serverName,
|
||||||
|
href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
delta,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
delta?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border bg-background p-5 min-h-[140px] flex flex-col justify-between">
|
||||||
|
<span className="text-xs uppercase tracking-wider text-muted-foreground">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="text-3xl font-semibold tracking-tight">{value}</span>
|
||||||
|
{delta && (
|
||||||
|
<span className="text-xs text-muted-foreground">{delta}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusListCard({
|
||||||
|
label,
|
||||||
|
items,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
items: { dotClass: string; label: string; count: number }[];
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border bg-background p-5 min-h-[140px] flex flex-col gap-3">
|
||||||
|
<span className="text-xs uppercase tracking-wider text-muted-foreground">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<ul className="flex flex-col gap-1.5">
|
||||||
|
{items.map((item) => (
|
||||||
|
<li key={item.label} className="flex items-center gap-2.5 text-sm">
|
||||||
|
<span
|
||||||
|
className={`size-2 rounded-full shrink-0 ${item.dotClass}`}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<span className="font-semibold tabular-nums w-8">{item.count}</span>
|
||||||
|
<span className="text-muted-foreground">{item.label}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowHome = () => {
|
||||||
|
const { data: auth } = api.user.get.useQuery();
|
||||||
|
const { data: homeStats } = api.project.homeStats.useQuery();
|
||||||
|
const { data: permissions } = api.user.getPermissions.useQuery();
|
||||||
|
const canReadDeployments = !!permissions?.deployment.read;
|
||||||
|
const { data: deployments } = api.deployment.allCentralized.useQuery(
|
||||||
|
undefined,
|
||||||
|
{
|
||||||
|
enabled: canReadDeployments,
|
||||||
|
refetchInterval: 10000,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const firstName = auth?.user?.firstName?.trim();
|
||||||
|
|
||||||
|
const totals = homeStats ?? {
|
||||||
|
projects: 0,
|
||||||
|
environments: 0,
|
||||||
|
applications: 0,
|
||||||
|
compose: 0,
|
||||||
|
databases: 0,
|
||||||
|
services: 0,
|
||||||
|
};
|
||||||
|
const statusBreakdown = homeStats?.status ?? {
|
||||||
|
running: 0,
|
||||||
|
error: 0,
|
||||||
|
idle: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const recentDeployments = useMemo(() => {
|
||||||
|
if (!deployments) return [];
|
||||||
|
return [...deployments]
|
||||||
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
||||||
|
)
|
||||||
|
.slice(0, 10);
|
||||||
|
}, [deployments]);
|
||||||
|
|
||||||
|
const deployStats = useMemo(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
const weekMs = 7 * 24 * 60 * 60 * 1000;
|
||||||
|
const lastStart = now - weekMs;
|
||||||
|
const prevStart = now - 2 * weekMs;
|
||||||
|
|
||||||
|
const last: NonNullable<typeof deployments> = [];
|
||||||
|
const prev: NonNullable<typeof deployments> = [];
|
||||||
|
for (const d of deployments ?? []) {
|
||||||
|
const t = new Date(d.createdAt).getTime();
|
||||||
|
if (t >= lastStart) last.push(d);
|
||||||
|
else if (t >= prevStart) prev.push(d);
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastCount = last.length;
|
||||||
|
const prevCount = prev.length;
|
||||||
|
let delta: string | undefined;
|
||||||
|
if (prevCount > 0) {
|
||||||
|
const pct = Math.round(((lastCount - prevCount) / prevCount) * 100);
|
||||||
|
delta = `${pct >= 0 ? "+" : ""}${pct}% vs prev 7d`;
|
||||||
|
} else if (lastCount > 0) {
|
||||||
|
delta = "no prior data";
|
||||||
|
} else {
|
||||||
|
delta = "no activity yet";
|
||||||
|
}
|
||||||
|
|
||||||
|
return { value: String(lastCount), delta };
|
||||||
|
}, [deployments]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<Card className="h-full bg-sidebar p-2.5 rounded-xl min-h-[85vh]">
|
||||||
|
<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-6 h-full">
|
||||||
|
<div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
|
||||||
|
<h1 className="text-3xl font-semibold tracking-tight">
|
||||||
|
{firstName ? `Welcome back, ${firstName}` : "Welcome back"}
|
||||||
|
</h1>
|
||||||
|
<Button asChild variant="secondary" className="w-fit">
|
||||||
|
<Link href="/dashboard/projects">
|
||||||
|
Go to projects
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<StatCard
|
||||||
|
label="Projects"
|
||||||
|
value={String(totals.projects)}
|
||||||
|
delta={`${totals.environments} ${totals.environments === 1 ? "environment" : "environments"}`}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Services"
|
||||||
|
value={String(totals.services)}
|
||||||
|
delta={`${totals.applications} apps · ${totals.compose} compose · ${totals.databases} db`}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Deploys / 7d"
|
||||||
|
value={deployStats.value}
|
||||||
|
delta={deployStats.delta}
|
||||||
|
/>
|
||||||
|
<StatusListCard
|
||||||
|
label="Status"
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
dotClass: "bg-emerald-500",
|
||||||
|
label: "running",
|
||||||
|
count: statusBreakdown.running,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dotClass: "bg-red-500",
|
||||||
|
label: "errored",
|
||||||
|
count: statusBreakdown.error,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dotClass: "bg-muted-foreground/40",
|
||||||
|
label: "idle",
|
||||||
|
count: statusBreakdown.idle,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-xl border bg-background">
|
||||||
|
<div className="flex items-center justify-between px-5 py-4 border-b">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Rocket className="size-4 text-muted-foreground" />
|
||||||
|
<h2 className="text-sm font-semibold">Recent deployments</h2>
|
||||||
|
</div>
|
||||||
|
{canReadDeployments && (
|
||||||
|
<Link
|
||||||
|
href="/dashboard/deployments"
|
||||||
|
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
view all →
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{!canReadDeployments ? (
|
||||||
|
<div className="min-h-[400px] flex flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground p-10">
|
||||||
|
<Rocket className="size-8 opacity-40" />
|
||||||
|
<span>You do not have permission to view deployments.</span>
|
||||||
|
</div>
|
||||||
|
) : recentDeployments.length === 0 ? (
|
||||||
|
<div className="min-h-[400px] flex flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground p-10">
|
||||||
|
<Rocket className="size-8 opacity-40" />
|
||||||
|
<span>No deployments yet.</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="divide-y">
|
||||||
|
{recentDeployments.map((d) => {
|
||||||
|
const info = getServiceInfo(d);
|
||||||
|
if (!info) return null;
|
||||||
|
const status = (d.status ?? "idle") as DeploymentStatus;
|
||||||
|
return (
|
||||||
|
<li key={d.deploymentId}>
|
||||||
|
<Link
|
||||||
|
href={info.href}
|
||||||
|
className="flex items-center gap-4 px-5 py-4 hover:bg-muted/40 transition-colors"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`size-2 rounded-full shrink-0 ${statusDotClass[status] ?? statusDotClass.idle}`}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col min-w-0 flex-1">
|
||||||
|
<span className="text-sm truncate">{info.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate">
|
||||||
|
{info.projectName} · {info.environment}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-muted-foreground w-36 hidden lg:flex items-center justify-end gap-1.5 truncate">
|
||||||
|
<Server className="size-3 shrink-0" />
|
||||||
|
<span className="truncate">{info.serverName}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground w-20 text-right hidden sm:inline">
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground w-24 text-right hidden md:inline">
|
||||||
|
{formatDistanceToNow(new Date(d.createdAt), {
|
||||||
|
addSuffix: true,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||||
|
logs →
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,251 @@
|
|||||||
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { AlertBlock } from "@/components/shared/alert-block";
|
||||||
|
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
const DockerProviderSchema = z.object({
|
||||||
|
externalPort: z.preprocess((a) => {
|
||||||
|
if (a === null || a === undefined || a === "") return null;
|
||||||
|
const parsed = Number.parseInt(String(a), 10);
|
||||||
|
return Number.isNaN(parsed) ? null : parsed;
|
||||||
|
}, z
|
||||||
|
.number()
|
||||||
|
.gte(0, "Range must be 0 - 65535")
|
||||||
|
.lte(65535, "Range must be 0 - 65535")
|
||||||
|
.nullable()),
|
||||||
|
externalGRPCPort: z.preprocess((a) => {
|
||||||
|
if (a === null || a === undefined || a === "") return null;
|
||||||
|
const parsed = Number.parseInt(String(a), 10);
|
||||||
|
return Number.isNaN(parsed) ? null : parsed;
|
||||||
|
}, z
|
||||||
|
.number()
|
||||||
|
.gte(0, "Range must be 0 - 65535")
|
||||||
|
.lte(65535, "Range must be 0 - 65535")
|
||||||
|
.nullable()),
|
||||||
|
externalAdminPort: z.preprocess((a) => {
|
||||||
|
if (a === null || a === undefined || a === "") return null;
|
||||||
|
const parsed = Number.parseInt(String(a), 10);
|
||||||
|
return Number.isNaN(parsed) ? null : parsed;
|
||||||
|
}, z
|
||||||
|
.number()
|
||||||
|
.gte(0, "Range must be 0 - 65535")
|
||||||
|
.lte(65535, "Range must be 0 - 65535")
|
||||||
|
.nullable()),
|
||||||
|
});
|
||||||
|
|
||||||
|
type DockerProvider = z.infer<typeof DockerProviderSchema>;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
libsqlId: string;
|
||||||
|
}
|
||||||
|
export const ShowExternalLibsqlCredentials = ({ libsqlId }: Props) => {
|
||||||
|
const { data: ip } = api.settings.getIp.useQuery();
|
||||||
|
const { data, refetch } = api.libsql.one.useQuery({ libsqlId });
|
||||||
|
const { mutateAsync, isPending } = api.libsql.saveExternalPorts.useMutation();
|
||||||
|
const [connectionUrl, setConnectionUrl] = useState("");
|
||||||
|
const [connectionGRPCUrl, setGRPCConnectionUrl] = useState("");
|
||||||
|
const getIp = data?.server?.ipAddress || ip;
|
||||||
|
|
||||||
|
const form = useForm({
|
||||||
|
defaultValues: {},
|
||||||
|
resolver: zodResolver(DockerProviderSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
form.reset({
|
||||||
|
externalPort: data.externalPort,
|
||||||
|
externalGRPCPort: data.externalGRPCPort,
|
||||||
|
externalAdminPort: data.externalAdminPort,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [form.reset, data, form]);
|
||||||
|
|
||||||
|
const onSubmit = async (values: DockerProvider) => {
|
||||||
|
await mutateAsync({
|
||||||
|
externalPort: values.externalPort,
|
||||||
|
externalGRPCPort: values.externalGRPCPort,
|
||||||
|
externalAdminPort: values.externalAdminPort,
|
||||||
|
libsqlId,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
toast.success("External port/ports updated");
|
||||||
|
await refetch();
|
||||||
|
})
|
||||||
|
.catch((error: Error) => {
|
||||||
|
toast.error(error?.message || "Error saving the external port/ports");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const port = form.watch("externalPort") || data?.externalPort;
|
||||||
|
setConnectionUrl(
|
||||||
|
`http://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data?.sqldNode !== "replica") {
|
||||||
|
const grpcPort = form.watch("externalGRPCPort") || data?.externalGRPCPort;
|
||||||
|
setGRPCConnectionUrl(
|
||||||
|
`http://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${grpcPort}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
data?.externalGRPCPort,
|
||||||
|
data?.databasePassword,
|
||||||
|
form,
|
||||||
|
data?.databaseUser,
|
||||||
|
getIp,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex w-full flex-col gap-5">
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">External Credentials</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
In order to make the database reachable through the internet, you
|
||||||
|
must set a port and ensure that the port is not being used by
|
||||||
|
another application or database
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex w-full flex-col gap-4">
|
||||||
|
{!getIp && (
|
||||||
|
<AlertBlock type="warning">
|
||||||
|
You need to set an IP address in your{" "}
|
||||||
|
<Link href="/dashboard/settings/server" className="text-primary">
|
||||||
|
{data?.serverId
|
||||||
|
? "Remote Servers -> Server -> Edit Server -> Update IP Address"
|
||||||
|
: "Web Server -> Server -> Update Server IP"}
|
||||||
|
</Link>{" "}
|
||||||
|
to fix the database url connection.
|
||||||
|
</AlertBlock>
|
||||||
|
)}
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="col-span-2 space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="externalPort"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>External Port (Internet)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="8080"
|
||||||
|
{...field}
|
||||||
|
value={field.value as string}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{!!data?.externalPort && (
|
||||||
|
<div className="grid w-full gap-8">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<Label>External Host</Label>
|
||||||
|
<ToggleVisibilityInput value={connectionUrl} disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="col-span-2 space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="externalAdminPort"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>External Admin Port (Internet)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="5000"
|
||||||
|
{...field}
|
||||||
|
value={field.value as string}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{data?.sqldNode !== "replica" && (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="col-span-2 space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="externalGRPCPort"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>External GRPC Port (Internet)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="5001"
|
||||||
|
{...field}
|
||||||
|
value={field.value as string}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{!!data?.externalGRPCPort && (
|
||||||
|
<div className="grid w-full gap-8">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<Label>External GRPC Host</Label>
|
||||||
|
<ToggleVisibilityInput
|
||||||
|
value={connectionGRPCUrl}
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button type="submit" isLoading={isPending}>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,268 @@
|
|||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||||
|
import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { DialogAction } from "@/components/shared/dialog-action";
|
||||||
|
import { DrawerLogs } from "@/components/shared/drawer-logs";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
import { type LogLine, parseLogs } from "../../docker/logs/utils";
|
||||||
|
import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
libsqlId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
|
||||||
|
const { data, refetch } = api.libsql.one.useQuery(
|
||||||
|
{
|
||||||
|
libsqlId,
|
||||||
|
},
|
||||||
|
{ enabled: !!libsqlId },
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutateAsync: reload, isPending: isReloading } =
|
||||||
|
api.libsql.reload.useMutation();
|
||||||
|
|
||||||
|
const { mutateAsync: start, isPending: isStarting } =
|
||||||
|
api.libsql.start.useMutation();
|
||||||
|
|
||||||
|
const { mutateAsync: stop, isPending: isStopping } =
|
||||||
|
api.libsql.stop.useMutation();
|
||||||
|
|
||||||
|
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
||||||
|
const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
|
||||||
|
const [isDeploying, setIsDeploying] = useState(false);
|
||||||
|
api.libsql.deployWithLogs.useSubscription(
|
||||||
|
{
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: isDeploying,
|
||||||
|
onData(log) {
|
||||||
|
if (!isDrawerOpen) {
|
||||||
|
setIsDrawerOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (log === "Deployment completed successfully!") {
|
||||||
|
setIsDeploying(false);
|
||||||
|
}
|
||||||
|
const parsedLogs = parseLogs(log);
|
||||||
|
setFilteredLogs((prev) => [...prev, ...parsedLogs]);
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
console.error("Deployment logs error:", error);
|
||||||
|
setIsDeploying(false);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex w-full flex-col gap-5 ">
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">Deploy Settings</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-row gap-4 flex-wrap">
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<DialogAction
|
||||||
|
title="Deploy Libsql"
|
||||||
|
description="Are you sure you want to deploy this Libsql?"
|
||||||
|
type="default"
|
||||||
|
onClick={async () => {
|
||||||
|
setIsDeploying(true);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
refetch();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="default"
|
||||||
|
isLoading={data?.applicationStatus === "running"}
|
||||||
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Rocket className="size-4 mr-1" />
|
||||||
|
Deploy
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipContent sideOffset={5} className="z-[60]">
|
||||||
|
<p>Downloads and sets up the Libsql database</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</TooltipProvider>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<DialogAction
|
||||||
|
title="Reload Libsql"
|
||||||
|
description="Are you sure you want to reload this libsql?"
|
||||||
|
type="default"
|
||||||
|
onClick={async () => {
|
||||||
|
await reload({
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
appName: data?.appName || "",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
toast.success("Libsql reloaded successfully");
|
||||||
|
refetch();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
toast.error("Error reloading Libsql");
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
isLoading={isReloading}
|
||||||
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<RefreshCcw className="size-4 mr-1" />
|
||||||
|
Reload
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipContent sideOffset={5} className="z-[60]">
|
||||||
|
<p>Restart the Libsql service without rebuilding</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</TooltipProvider>
|
||||||
|
{data?.applicationStatus === "idle" ? (
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<DialogAction
|
||||||
|
title="Start Libsql"
|
||||||
|
description="Are you sure you want to start this Libsql?"
|
||||||
|
type="default"
|
||||||
|
onClick={async () => {
|
||||||
|
await start({
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
toast.success("Libsql started successfully");
|
||||||
|
refetch();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
toast.error("Error starting Libsql");
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
isLoading={isStarting}
|
||||||
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<CheckCircle2 className="size-4 mr-1" />
|
||||||
|
Start
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipContent sideOffset={5} className="z-[60]">
|
||||||
|
<p>
|
||||||
|
Start the Libsql database (requires a previous
|
||||||
|
successful setup)
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</TooltipProvider>
|
||||||
|
) : (
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<DialogAction
|
||||||
|
title="Stop Libsql"
|
||||||
|
description="Are you sure you want to stop this Libsql?"
|
||||||
|
onClick={async () => {
|
||||||
|
await stop({
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
toast.success("Libsql stopped successfully");
|
||||||
|
refetch();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
toast.error("Error stopping Libsql");
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
isLoading={isStopping}
|
||||||
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Ban className="size-4 mr-1" />
|
||||||
|
Stop
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipContent sideOffset={5} className="z-[60]">
|
||||||
|
<p>Stop the currently running Libsql database</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</DialogAction>
|
||||||
|
</TooltipProvider>
|
||||||
|
)}
|
||||||
|
<DockerTerminalModal
|
||||||
|
appName={data?.appName || ""}
|
||||||
|
serverId={data?.serverId || ""}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Terminal className="size-4 mr-1" />
|
||||||
|
Open Terminal
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipContent sideOffset={5} className="z-[60]">
|
||||||
|
<p>Open a terminal to the Libsql container</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
</Tooltip>
|
||||||
|
</Button>
|
||||||
|
</DockerTerminalModal>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<DrawerLogs
|
||||||
|
isOpen={isDrawerOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsDrawerOpen(false);
|
||||||
|
setFilteredLogs([]);
|
||||||
|
setIsDeploying(false);
|
||||||
|
refetch();
|
||||||
|
}}
|
||||||
|
filteredLogs={filteredLogs}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
import { SelectGroup } from "@radix-ui/react-select";
|
||||||
|
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
libsqlId: string;
|
||||||
|
}
|
||||||
|
export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
|
||||||
|
const { data } = api.libsql.one.useQuery({ libsqlId });
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex w-full flex-col gap-5 ">
|
||||||
|
<Card className="bg-background">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">Internal Credentials</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex w-full flex-row gap-4">
|
||||||
|
<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label>User</Label>
|
||||||
|
<Input disabled value={data?.databaseUser} />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label>Sqld Node</Label>
|
||||||
|
<Select value={data?.sqldNode} disabled>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select Node type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{["primary", "replica"].map((node) => (
|
||||||
|
<SelectItem key={node} value={node}>
|
||||||
|
{node.charAt(0).toUpperCase() + node.slice(1)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label>Password</Label>
|
||||||
|
<div className="flex flex-row gap-4">
|
||||||
|
<ToggleVisibilityInput
|
||||||
|
disabled
|
||||||
|
value={data?.databasePassword}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<Label>Internal Port (Container)</Label>
|
||||||
|
<Input disabled value="8080" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<Label>Internal GRPC Port (Container)</Label>
|
||||||
|
<Input disabled value="5001" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<Label>Internal Admin Port (Container)</Label>
|
||||||
|
<Input disabled value="5000" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label>Internal Host</Label>
|
||||||
|
<Input disabled value={data?.appName} />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label>Enable Namespaces</Label>
|
||||||
|
<Select
|
||||||
|
disabled
|
||||||
|
defaultValue={
|
||||||
|
data?.enableNamespaces
|
||||||
|
? String(data?.enableNamespaces)
|
||||||
|
: "false"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={"false"} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{["false", "true"].map((node) => (
|
||||||
|
<SelectItem key={node} value={node}>
|
||||||
|
{node.charAt(0).toUpperCase() + node.slice(1)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
<Label>Internal Connection URL </Label>
|
||||||
|
<ToggleVisibilityInput
|
||||||
|
disabled
|
||||||
|
value={`http://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:8080`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 md:col-span-2">
|
||||||
|
<Label>Internal Replication Connection URL </Label>
|
||||||
|
<ToggleVisibilityInput
|
||||||
|
disabled
|
||||||
|
value={`http://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5001`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
163
apps/dokploy/components/dashboard/libsql/update-libsql.tsx
Normal file
163
apps/dokploy/components/dashboard/libsql/update-libsql.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||||
|
import { PenBoxIcon } from "lucide-react";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { 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 {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { api } from "@/utils/api";
|
||||||
|
|
||||||
|
const updateLibsqlSchema = z.object({
|
||||||
|
name: z.string().min(1, {
|
||||||
|
message: "Name is required",
|
||||||
|
}),
|
||||||
|
description: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type UpdateLibsql = z.infer<typeof updateLibsqlSchema>;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
libsqlId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UpdateLibsql = ({ libsqlId }: Props) => {
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const { mutateAsync, error, isError, isPending } =
|
||||||
|
api.libsql.update.useMutation();
|
||||||
|
const { data } = api.libsql.one.useQuery(
|
||||||
|
{
|
||||||
|
libsqlId,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: !!libsqlId,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const form = useForm<UpdateLibsql>({
|
||||||
|
defaultValues: {
|
||||||
|
description: data?.description ?? "",
|
||||||
|
name: data?.name ?? "",
|
||||||
|
},
|
||||||
|
resolver: zodResolver(updateLibsqlSchema),
|
||||||
|
});
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
form.reset({
|
||||||
|
description: data.description ?? "",
|
||||||
|
name: data.name,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [data, form, form.reset]);
|
||||||
|
|
||||||
|
const onSubmit = async (formData: UpdateLibsql) => {
|
||||||
|
await mutateAsync({
|
||||||
|
name: formData.name,
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
description: formData.description || "",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
toast.success("Libsql updated successfully");
|
||||||
|
utils.libsql.one.invalidate({
|
||||||
|
libsqlId: libsqlId,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
toast.error("Error updating the Libsql");
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="group hover:bg-blue-500/10 "
|
||||||
|
>
|
||||||
|
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Modify Libsql</DialogTitle>
|
||||||
|
<DialogDescription>Update the Libsql data</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||||
|
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="grid items-center gap-4">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
id="hook-form-update-libsql"
|
||||||
|
className="grid w-full gap-4 "
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Vandelay Industries" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Description</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Description about your project..."
|
||||||
|
className="resize-none"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
isLoading={isPending}
|
||||||
|
form="hook-form-update-libsql"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import { toast } from "sonner";
|
||||||
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
||||||
|
import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
@@ -9,6 +11,9 @@ interface Props {
|
|||||||
}
|
}
|
||||||
export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
|
export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
|
||||||
const { data } = api.mariadb.one.useQuery({ mariadbId });
|
const { data } = api.mariadb.one.useQuery({ mariadbId });
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const { mutateAsync: changePassword } =
|
||||||
|
api.mariadb.changePassword.useMutation();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex w-full flex-col gap-5 ">
|
<div className="flex w-full flex-col gap-5 ">
|
||||||
@@ -28,20 +33,43 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
<div className="flex flex-row gap-4">
|
<div className="flex flex-row gap-2 items-center">
|
||||||
<ToggleVisibilityInput
|
<ToggleVisibilityInput
|
||||||
disabled
|
disabled
|
||||||
value={data?.databasePassword}
|
value={data?.databasePassword}
|
||||||
/>
|
/>
|
||||||
|
<UpdateDatabasePassword
|
||||||
|
onUpdatePassword={async (newPassword) => {
|
||||||
|
await changePassword({
|
||||||
|
mariadbId,
|
||||||
|
password: newPassword,
|
||||||
|
type: "user",
|
||||||
|
});
|
||||||
|
toast.success("Password updated successfully");
|
||||||
|
utils.mariadb.one.invalidate({ mariadbId });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Root Password</Label>
|
<Label>Root Password</Label>
|
||||||
<div className="flex flex-row gap-4">
|
<div className="flex flex-row gap-2 items-center">
|
||||||
<ToggleVisibilityInput
|
<ToggleVisibilityInput
|
||||||
disabled
|
disabled
|
||||||
value={data?.databaseRootPassword}
|
value={data?.databaseRootPassword}
|
||||||
/>
|
/>
|
||||||
|
<UpdateDatabasePassword
|
||||||
|
label="Root Password"
|
||||||
|
onUpdatePassword={async (newPassword) => {
|
||||||
|
await changePassword({
|
||||||
|
mariadbId,
|
||||||
|
password: newPassword,
|
||||||
|
type: "root",
|
||||||
|
});
|
||||||
|
toast.success("Root password updated successfully");
|
||||||
|
utils.mariadb.one.invalidate({ mariadbId });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
|
|||||||
@@ -82,7 +82,8 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
|
|||||||
const buildConnectionUrl = () => {
|
const buildConnectionUrl = () => {
|
||||||
const port = form.watch("externalPort") || data?.externalPort;
|
const port = form.watch("externalPort") || data?.externalPort;
|
||||||
|
|
||||||
return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
|
const params = `authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`;
|
||||||
|
return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/?${params}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
setConnectionUrl(buildConnectionUrl());
|
setConnectionUrl(buildConnectionUrl());
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import { toast } from "sonner";
|
||||||
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
|
||||||
|
import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
@@ -9,6 +11,9 @@ interface Props {
|
|||||||
}
|
}
|
||||||
export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
||||||
const { data } = api.mongo.one.useQuery({ mongoId });
|
const { data } = api.mongo.one.useQuery({ mongoId });
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const { mutateAsync: changePassword } =
|
||||||
|
api.mongo.changePassword.useMutation();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex w-full flex-col gap-5 ">
|
<div className="flex w-full flex-col gap-5 ">
|
||||||
@@ -25,11 +30,21 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Label>Password</Label>
|
<Label>Password</Label>
|
||||||
<div className="flex flex-row gap-4">
|
<div className="flex flex-row gap-2 items-center">
|
||||||
<ToggleVisibilityInput
|
<ToggleVisibilityInput
|
||||||
disabled
|
disabled
|
||||||
value={data?.databasePassword}
|
value={data?.databasePassword}
|
||||||
/>
|
/>
|
||||||
|
<UpdateDatabasePassword
|
||||||
|
onUpdatePassword={async (newPassword) => {
|
||||||
|
await changePassword({
|
||||||
|
mongoId,
|
||||||
|
password: newPassword,
|
||||||
|
});
|
||||||
|
toast.success("Password updated successfully");
|
||||||
|
utils.mongo.one.invalidate({ mongoId });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -47,7 +62,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
|
|||||||
<Label>Internal Connection URL </Label>
|
<Label>Internal Connection URL </Label>
|
||||||
<ToggleVisibilityInput
|
<ToggleVisibilityInput
|
||||||
disabled
|
disabled
|
||||||
value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
|
value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017/?authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,103 +1,103 @@
|
|||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
||||||
import {
|
import {
|
||||||
Area,
|
type ChartConfig,
|
||||||
AreaChart,
|
ChartContainer,
|
||||||
CartesianGrid,
|
ChartLegend,
|
||||||
Legend,
|
ChartLegendContent,
|
||||||
ResponsiveContainer,
|
ChartTooltip,
|
||||||
Tooltip,
|
ChartTooltipContent,
|
||||||
YAxis,
|
} from "@/components/ui/chart";
|
||||||
} from "recharts";
|
|
||||||
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
acummulativeData: DockerStatsJSON["block"];
|
accumulativeData: DockerStatsJSON["block"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerBlockChart = ({ acummulativeData }: Props) => {
|
const chartConfig = {
|
||||||
const transformedData = acummulativeData.map((item, index) => {
|
readMb: {
|
||||||
return {
|
label: "Read (MB)",
|
||||||
time: item.time,
|
color: "hsl(var(--chart-1))",
|
||||||
name: `Point ${index + 1}`,
|
},
|
||||||
readMb: item.value.readMb,
|
writeMb: {
|
||||||
writeMb: item.value.writeMb,
|
label: "Write (MB)",
|
||||||
};
|
color: "hsl(var(--chart-2))",
|
||||||
});
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
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,
|
||||||
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-6 w-full h-[10rem]">
|
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||||
<ResponsiveContainer>
|
<AreaChart
|
||||||
<AreaChart
|
data={transformedData}
|
||||||
data={transformedData}
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||||
margin={{
|
>
|
||||||
top: 10,
|
<defs>
|
||||||
right: 30,
|
<linearGradient id="fillBlockRead" x1="0" y1="0" x2="0" y2="1">
|
||||||
left: 0,
|
<stop
|
||||||
bottom: 0,
|
offset="5%"
|
||||||
}}
|
stopColor="var(--color-readMb)"
|
||||||
>
|
stopOpacity={0.8}
|
||||||
<defs>
|
/>
|
||||||
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
|
<stop
|
||||||
<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
|
offset="95%"
|
||||||
<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
|
stopColor="var(--color-readMb)"
|
||||||
</linearGradient>
|
stopOpacity={0.1}
|
||||||
<linearGradient id="colorWrite" x1="0" y1="0" x2="0" y2="1">
|
/>
|
||||||
<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
|
</linearGradient>
|
||||||
<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
|
<linearGradient id="fillBlockWrite" x1="0" y1="0" x2="0" y2="1">
|
||||||
</linearGradient>
|
<stop
|
||||||
</defs>
|
offset="5%"
|
||||||
<YAxis stroke="#A1A1AA" />
|
stopColor="var(--color-writeMb)"
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
|
stopOpacity={0.8}
|
||||||
{/* @ts-ignore */}
|
/>
|
||||||
<Tooltip content={<CustomTooltip />} />
|
<stop
|
||||||
<Legend />
|
offset="95%"
|
||||||
<Area
|
stopColor="var(--color-writeMb)"
|
||||||
type="monotone"
|
stopOpacity={0.1}
|
||||||
dataKey="readMb"
|
/>
|
||||||
stroke="#27272A"
|
</linearGradient>
|
||||||
fillOpacity={1}
|
</defs>
|
||||||
fill="url(#colorUv)"
|
<CartesianGrid vertical={false} />
|
||||||
name="Read Mb"
|
<YAxis tickLine={false} axisLine={false} />
|
||||||
/>
|
<ChartTooltip
|
||||||
<Area
|
cursor={false}
|
||||||
type="monotone"
|
content={
|
||||||
dataKey="writeMb"
|
<ChartTooltipContent
|
||||||
stroke="#82ca9d"
|
labelFormatter={(_, payload) => {
|
||||||
fillOpacity={1}
|
const time = payload?.[0]?.payload?.time;
|
||||||
fill="url(#colorWrite)"
|
return time ? format(new Date(time), "PPpp") : "";
|
||||||
name="Write Mb"
|
}}
|
||||||
/>
|
formatter={(value, name) => {
|
||||||
</AreaChart>
|
const label = name === "readMb" ? "Read" : "Write";
|
||||||
</ResponsiveContainer>
|
return [`${value} MB`, label];
|
||||||
</div>
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="readMb"
|
||||||
|
stroke="var(--color-readMb)"
|
||||||
|
fill="url(#fillBlockRead)"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="writeMb"
|
||||||
|
stroke="var(--color-writeMb)"
|
||||||
|
fill="url(#fillBlockWrite)"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
<ChartLegend content={<ChartLegendContent />} />
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
interface CustomTooltipProps {
|
|
||||||
active: boolean;
|
|
||||||
payload?: {
|
|
||||||
color?: string;
|
|
||||||
dataKey?: string;
|
|
||||||
value?: number;
|
|
||||||
payload: {
|
|
||||||
time: string;
|
|
||||||
readMb: number;
|
|
||||||
writeMb: number;
|
|
||||||
};
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
|
|
||||||
if (active && payload && payload.length && payload[0]) {
|
|
||||||
return (
|
|
||||||
<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
|
|
||||||
{payload[0].payload.time && (
|
|
||||||
<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
|
|
||||||
)}
|
|
||||||
<p>{`Read ${payload[0].payload.readMb} `}</p>
|
|
||||||
<p>{`Write: ${payload[0].payload.writeMb} `}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -1,87 +1,81 @@
|
|||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
||||||
import {
|
import {
|
||||||
Area,
|
type ChartConfig,
|
||||||
AreaChart,
|
ChartContainer,
|
||||||
CartesianGrid,
|
ChartLegend,
|
||||||
Legend,
|
ChartLegendContent,
|
||||||
ResponsiveContainer,
|
ChartTooltip,
|
||||||
Tooltip,
|
ChartTooltipContent,
|
||||||
YAxis,
|
} from "@/components/ui/chart";
|
||||||
} from "recharts";
|
|
||||||
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
acummulativeData: DockerStatsJSON["cpu"];
|
accumulativeData: DockerStatsJSON["cpu"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerCpuChart = ({ acummulativeData }: Props) => {
|
const chartConfig = {
|
||||||
const transformedData = acummulativeData.map((item, index) => {
|
usage: {
|
||||||
return {
|
label: "CPU Usage",
|
||||||
name: `Point ${index + 1}`,
|
color: "hsl(var(--chart-1))",
|
||||||
time: item.time,
|
},
|
||||||
usage: item.value.toString().split("%")[0],
|
} satisfies ChartConfig;
|
||||||
};
|
|
||||||
});
|
export const DockerCpuChart = ({ accumulativeData }: Props) => {
|
||||||
|
const transformedData = accumulativeData.map((item, index) => ({
|
||||||
|
name: `Point ${index + 1}`,
|
||||||
|
time: item.time,
|
||||||
|
usage: item.value.toString().split("%")[0],
|
||||||
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-6 w-full h-[10rem]">
|
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||||
<ResponsiveContainer>
|
<AreaChart
|
||||||
<AreaChart
|
data={transformedData}
|
||||||
data={transformedData}
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||||
margin={{
|
>
|
||||||
top: 10,
|
<defs>
|
||||||
right: 30,
|
<linearGradient id="fillCpu" x1="0" y1="0" x2="0" y2="1">
|
||||||
left: 0,
|
<stop
|
||||||
bottom: 0,
|
offset="5%"
|
||||||
}}
|
stopColor="var(--color-usage)"
|
||||||
>
|
stopOpacity={0.8}
|
||||||
<defs>
|
/>
|
||||||
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
|
<stop
|
||||||
<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
|
offset="95%"
|
||||||
<stop offset="95%" stopColor="white" stopOpacity={0} />
|
stopColor="var(--color-usage)"
|
||||||
</linearGradient>
|
stopOpacity={0.1}
|
||||||
</defs>
|
/>
|
||||||
<YAxis stroke="#A1A1AA" domain={[0, 100]} />
|
</linearGradient>
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
|
</defs>
|
||||||
{/* @ts-ignore */}
|
<CartesianGrid vertical={false} />
|
||||||
<Tooltip content={<CustomTooltip />} />
|
<YAxis
|
||||||
<Legend />
|
tickFormatter={(value) => `${value}%`}
|
||||||
<Area
|
domain={[0, 100]}
|
||||||
type="monotone"
|
tickLine={false}
|
||||||
dataKey="usage"
|
axisLine={false}
|
||||||
stroke="#27272A"
|
/>
|
||||||
fillOpacity={1}
|
<ChartTooltip
|
||||||
fill="url(#colorUv)"
|
cursor={false}
|
||||||
/>
|
content={
|
||||||
</AreaChart>
|
<ChartTooltipContent
|
||||||
</ResponsiveContainer>
|
labelFormatter={(_, payload) => {
|
||||||
</div>
|
const time = payload?.[0]?.payload?.time;
|
||||||
|
return time ? format(new Date(time), "PPpp") : "";
|
||||||
|
}}
|
||||||
|
formatter={(value) => [`${value}%`, "CPU Usage"]}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="usage"
|
||||||
|
stroke="var(--color-usage)"
|
||||||
|
fill="url(#fillCpu)"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
<ChartLegend content={<ChartLegendContent />} />
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
interface CustomTooltipProps {
|
|
||||||
active: boolean;
|
|
||||||
payload?: {
|
|
||||||
color?: string;
|
|
||||||
dataKey?: string;
|
|
||||||
value?: number;
|
|
||||||
payload: {
|
|
||||||
time: string;
|
|
||||||
usage: number;
|
|
||||||
};
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
|
|
||||||
if (active && payload && payload.length && payload[0]) {
|
|
||||||
return (
|
|
||||||
<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
|
|
||||||
{payload[0].payload.time && (
|
|
||||||
<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
|
|
||||||
)}
|
|
||||||
<p>{`CPU Usage: ${payload[0].payload.usage}%`}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -1,105 +1,82 @@
|
|||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
||||||
import {
|
import {
|
||||||
Area,
|
type ChartConfig,
|
||||||
AreaChart,
|
ChartContainer,
|
||||||
CartesianGrid,
|
ChartTooltip,
|
||||||
Legend,
|
ChartTooltipContent,
|
||||||
ResponsiveContainer,
|
} from "@/components/ui/chart";
|
||||||
Tooltip,
|
|
||||||
YAxis,
|
|
||||||
} from "recharts";
|
|
||||||
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
acummulativeData: DockerStatsJSON["disk"];
|
accumulativeData: DockerStatsJSON["disk"];
|
||||||
diskTotal: number;
|
diskTotal: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
|
const chartConfig = {
|
||||||
const transformedData = acummulativeData.map((item, index) => {
|
usedGb: {
|
||||||
return {
|
label: "Used (GB)",
|
||||||
time: item.time,
|
color: "hsl(var(--chart-3))",
|
||||||
name: `Point ${index + 1}`,
|
},
|
||||||
usedGb: +item.value.diskUsage,
|
} satisfies ChartConfig;
|
||||||
totalGb: +item.value.diskTotal,
|
|
||||||
freeGb: item.value.diskFree,
|
export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
|
||||||
};
|
const transformedData = accumulativeData.map((item, index) => ({
|
||||||
});
|
time: item.time,
|
||||||
|
name: `Point ${index + 1}`,
|
||||||
|
usedGb: +item.value.diskUsage,
|
||||||
|
totalGb: +item.value.diskTotal,
|
||||||
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-6 w-full h-[10rem]">
|
<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
|
||||||
<ResponsiveContainer>
|
<AreaChart
|
||||||
<AreaChart
|
data={transformedData}
|
||||||
data={transformedData}
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||||
margin={{
|
>
|
||||||
top: 10,
|
<defs>
|
||||||
right: 30,
|
<linearGradient id="fillDiskUsed" x1="0" y1="0" x2="0" y2="1">
|
||||||
left: 0,
|
<stop
|
||||||
bottom: 0,
|
offset="5%"
|
||||||
}}
|
stopColor="var(--color-usedGb)"
|
||||||
>
|
stopOpacity={0.8}
|
||||||
<defs>
|
/>
|
||||||
<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1">
|
<stop
|
||||||
<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} />
|
offset="95%"
|
||||||
<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
|
stopColor="var(--color-usedGb)"
|
||||||
</linearGradient>
|
stopOpacity={0.1}
|
||||||
<linearGradient id="colorFree" x1="0" y1="0" x2="0" y2="1">
|
/>
|
||||||
<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.2} />
|
</linearGradient>
|
||||||
<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
|
</defs>
|
||||||
</linearGradient>
|
<CartesianGrid vertical={false} />
|
||||||
</defs>
|
<YAxis
|
||||||
<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
|
domain={[0, diskTotal]}
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
|
tickLine={false}
|
||||||
{/* @ts-ignore */}
|
axisLine={false}
|
||||||
<Tooltip content={<CustomTooltip />} />
|
tickFormatter={(value) => `${value} GB`}
|
||||||
<Legend />
|
/>
|
||||||
<Area
|
<ChartTooltip
|
||||||
type="monotone"
|
cursor={false}
|
||||||
dataKey="usedGb"
|
content={
|
||||||
stroke="#6C28D9"
|
<ChartTooltipContent
|
||||||
fillOpacity={1}
|
labelFormatter={(_, payload) => {
|
||||||
fill="url(#colorUsed)"
|
const time = payload?.[0]?.payload?.time;
|
||||||
name="Used GB"
|
return time ? format(new Date(time), "PPpp") : "";
|
||||||
/>
|
}}
|
||||||
<Area
|
formatter={(value) => {
|
||||||
type="monotone"
|
return [`${value} GB`, "Used"];
|
||||||
dataKey="freeGb"
|
}}
|
||||||
stroke="#8884d8"
|
/>
|
||||||
fillOpacity={1}
|
}
|
||||||
fill="url(#colorFree)"
|
/>
|
||||||
name="Free GB"
|
<Area
|
||||||
/>
|
type="monotone"
|
||||||
</AreaChart>
|
dataKey="usedGb"
|
||||||
</ResponsiveContainer>
|
stroke="var(--color-usedGb)"
|
||||||
</div>
|
fill="url(#fillDiskUsed)"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
interface CustomTooltipProps {
|
|
||||||
active: boolean;
|
|
||||||
payload?: {
|
|
||||||
color?: string;
|
|
||||||
dataKey?: string;
|
|
||||||
value?: number;
|
|
||||||
payload: {
|
|
||||||
time: string;
|
|
||||||
usedGb: number;
|
|
||||||
freeGb: number;
|
|
||||||
totalGb: number;
|
|
||||||
};
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
|
|
||||||
if (active && payload && payload.length && payload[0]) {
|
|
||||||
return (
|
|
||||||
<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
|
|
||||||
<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
|
|
||||||
<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</p>
|
|
||||||
<p>{`Disk free: ${payload[0].payload.freeGb} GB`}</p>
|
|
||||||
<p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user