Compare commits
393
Commits
7204c4045f
...
v3
| Author | SHA1 | Date | |
|---|---|---|---|
 denozord
|
0b5ec5bd85 | ||
|
denozord
|
a14f10d048 | ||
|
denozord
|
3fda43cf2c | ||
|
denozord
|
353d14d64e | ||
|
denozord
|
c3fba50de8 | ||
|
denozord
|
9798e7fe95 | ||
|
denozord
|
484dd56312 | ||
|
denozord
|
586f8246fb | ||
|
denozord
|
800f94354b | ||
|
denozord
|
fbd740aef7 | ||
|
denozord
|
7d3804202f | ||
|
denozord
|
1548de7064 | ||
|
denozord
|
431314b973 | ||
|
denozord
|
4c7af43be7 | ||
|
denozord
|
1be7e3bb22 | ||
|
denozord
|
64d9178784 | ||
|
denozord
|
8c13ae9df4 | ||
|
denozord
|
f80e962767 | ||
|
denozord
|
afa093781e | ||
|
denozord
|
f0cb694fa6 | ||
|
denozord
|
28a6978243 | ||
|
denozord
|
236f9f9d2e | ||
|
denozord
|
e72b3f539d | ||
|
denozord
|
56f1baa7ba | ||
|
denozord
|
ef7a4817c9 | ||
|
denozord
|
8e8ce7cec0 | ||
|
denozord
|
4ad5821b5e | ||
|
denozord
|
dfbd38d9a3 | ||
|
denozord
|
c3c30b1c75 | ||
|
denozord
|
f9ac5ac3a3 | ||
|
denozord
|
357503ee2f | ||
|
denozord
|
e269b14f5e | ||
|
denozord
|
9a8b72de82 | ||
|
denozord
|
8cc3575902 | ||
|
denozord
|
1fda3a5f4e | ||
|
denozord
|
fdc39060a1 | ||
|
denozord
|
283ab53b80 | ||
|
denozord
|
89d71ff060 | ||
|
denozord
|
b1834e988b | ||
|
denozord
|
6f13f39685 | ||
|
denozord
|
dbca38d31a | ||
|
denozord
|
fbe9a07727 | ||
|
denozord
|
8b362f0f55 | ||
|
denozord
|
9f85351b6b | ||
|
denozord
|
b5eb47e690 | ||
|
denozord
|
034e0d1eee | ||
|
denozord
|
29161ae0cb | ||
|
denozord
|
89c75f8e2e | ||
|
denozord
|
270cee077f | ||
|
denozord
|
1a283f64f6 | ||
|
denozord
|
99b346fd94 | ||
|
denozord
|
5c03ec7bd0 | ||
|
denozord
|
31ed777334 | ||
|
denozord
|
9dc931a10b | ||
|
denozord
|
d29f1aef51 | ||
|
denozord
|
ab4ba37d53 | ||
|
denozord
|
d9667a06e6 | ||
|
denozord
|
baa2fc8044 | ||
|
denozord
|
98b39c5703 | ||
|
denozord
|
c9babc1634 | ||
|
denozord
|
fe67f1c10b | ||
|
denozord
|
08693affc3 | ||
|
denozord
|
c475762fde | ||
|
denozord
|
965eb7467b | ||
|
denozord
|
48ee2a962e | ||
|
denozord
|
7be656c3f2 | ||
|
denozord
|
683f837b36 | ||
|
denozord
|
cfd7b53a54 | ||
|
denozord
|
d3b21d3dc0 | ||
|
denozord
|
f8a50581e4 | ||
|
denozord
|
5ede9e079d | ||
|
denozord
|
d6fc877e90 | ||
|
denozord
|
e0c7ec32d6 | ||
|
denozord
|
e071d5060f | ||
|
denozord
|
c3d41a32d8 | ||
|
denozord
|
d3ebe5b2b1 | ||
|
denozord
|
17cd5a8f43 | ||
|
denozord
|
7b92d1eb70 | ||
|
denozord
|
94337c8980 | ||
|
denozord
|
820b73e622 | ||
|
denozord
|
48f47d66ca | ||
|
denozord
|
f38f682a6f | ||
|
denozord
|
18926a7274 | ||
|
denozord
|
f67a8f888c | ||
|
denozord
|
73f03c21cd | ||
|
denozord
|
3514276855 | ||
|
denozord
|
ba0557e877 | ||
|
denozord
|
1959b1d1d0 | ||
|
denozord
|
8278017459 | ||
|
denozord
|
2b957c6d9a | ||
|
denozord
|
630ceb30b7 | ||
|
denozord
|
4c5aaf60bd | ||
|
denozord
|
60f55e447f | ||
|
denozord
|
a0b5eb910f | ||
|
denozord
|
06799406a3 | ||
|
denozord
|
49b62fbfb5 | ||
|
denozord
|
7cd33384b7 | ||
|
denozord
|
e09976b64e | ||
|
denozord
|
804f132d42 | ||
|
denozord
|
8f3f1bd8a4 | ||
|
denozord
|
9482ab6d70 | ||
|
denozord
|
d799c38edf | ||
|
denozord
|
29fcee8ab1 | ||
|
denozord
|
4c05913694 | ||
|
denozord
|
3f42c6226a | ||
|
denozord
|
89a86f7c72 | ||
|
denozord
|
17ab2a30ec | ||
|
denozord
|
21bd829979 | ||
|
denozord
|
c0d35c2e51 | ||
|
denozord
|
ee357ed59a | ||
|
denozord
|
838ca6b220 | ||
|
denozord
|
dfcbdb35be | ||
|
denozord
|
a3023daac9 | ||
|
denozord
|
7af6719f4b | ||
|
denozord
|
dd94f9f887 | ||
|
denozord
|
1f49b02ba0 | ||
|
denozord
|
0935eacd3f | ||
|
denozord
|
f2c3562000 | ||
|
denozord
|
6fad114b22 | ||
|
denozord
|
f380be5d21 | ||
|
denozord
|
87f8283191 | ||
|
denozord
|
f13b532f1a | ||
|
denozord
|
915304f800 | ||
|
denozord
|
3dbdb6f794 | ||
|
denozord
|
08a64b5be4 | ||
|
denozord
|
5af5abb02d | ||
|
denozord
|
8ad4f23a49 | ||
|
denozord
|
5c57e160fd | ||
|
denozord
|
46c9515ed1 | ||
|
denozord
|
a6cf9f7130 | ||
|
denozord
|
cf6d8b61a3 | ||
|
denozord
|
9784ec581e | ||
|
denozord
|
75d2366462 | ||
|
denozord
|
700e6674e5 | ||
|
denozord
|
4ce3bf4a9f | ||
|
denozord
|
f8713e0bf9 | ||
|
denozord
|
23c863714c | ||
|
denozord
|
3fade5f1c3 | ||
|
denozord
|
7509d1c781 | ||
|
denozord
|
1c953ed9d8 | ||
|
denozord
|
59082aa0d0 | ||
|
denozord
|
6efe497e18 | ||
|
denozord
|
57db189375 | ||
|
denozord
|
38ece61b31 | ||
|
denozord
|
a80740b802 | ||
|
denozord
|
dbc94d71a0 | ||
|
denozord
|
eca744999c | ||
|
denozord
|
cfcb44d5f0 | ||
|
denozord
|
571ec06522 | ||
|
denozord
|
698d42ce31 | ||
|
denozord
|
ebec5c613f | ||
|
denozord
|
0e0f4380d7 | ||
|
denozord
|
62387aa6d5 | ||
|
denozord
|
a322de4129 | ||
|
denozord
|
94efee905a | ||
|
denozord
|
3a7578ce26 | ||
|
denozord
|
af8af84ab7 | ||
|
denozord
|
1fe9cf4794 | ||
|
denozord
|
01a15d97c6 | ||
|
denozord
|
336a5b42a6 | ||
|
denozord
|
5cc19b8c3e | ||
|
denozord
|
b87af004ee | ||
|
denozord
|
8a8a55e7b6 | ||
|
denozord
|
79ca6e2d05 | ||
|
denozord
|
34a52ed826 | ||
|
denozord
|
c7f55dfee9 | ||
|
denozord
|
caa566aa8f | ||
|
denozord
|
87064cb89d | ||
|
denozord
|
9f058e5811 | ||
|
denozord
|
e7650b961b | ||
|
denozord
|
0387491ada | ||
|
denozord
|
d79f831032 | ||
|
denozord
|
a42e4189c3 | ||
|
denozord
|
73bc623fdf | ||
|
denozord
|
dd089453bc | ||
|
denozord
|
2d6c90ab31 | ||
|
denozord
|
d76355b6ef | ||
|
denozord
|
9fbda4f4e5 | ||
|
denozord
|
337a4ce944 | ||
|
denozord
|
56b264a724 | ||
|
denozord
|
635b791118 | ||
|
denozord
|
1e28fa33f5 | ||
|
denozord
|
3b60a5885b | ||
|
denozord
|
ba006edec0 | ||
|
denozord
|
6077d3bc5b | ||
|
denozord
|
c75f5f6b82 | ||
|
denozord
|
219ca7450c | ||
|
denozord
|
c792645a55 | ||
|
denozord
|
793b8acaea | ||
|
denozord
|
6b8e060d54 | ||
|
denozord
|
bdc7dd2bb3 | ||
|
denozord
|
562f09753b | ||
|
denozord
|
91fd3baccc | ||
|
denozord
|
9a51265a4f | ||
|
denozord
|
a2910832be | ||
|
denozord
|
ba6c7b9618 | ||
|
denozord
|
6a90f4079d | ||
|
denozord
|
1651700609 | ||
|
denozord
|
896f1ee3a7 | ||
|
denozord
|
497940b29f | ||
|
denozord
|
f6d32b3efa | ||
|
denozord
|
583f9b255e | ||
|
denozord
|
343626c350 | ||
|
denozord
|
a0bf4a7a9f | ||
|
denozord
|
fc66c7db0b | ||
|
denozord
|
e914b0003c | ||
|
denozord
|
de6fd2dddb | ||
|
denozord
|
18e488a8e8 | ||
|
denozord
|
b6df4af920 | ||
|
denozord
|
78bf17920b | ||
|
denozord
|
b3739388e5 | ||
|
denozord
|
ecee4ab601 | ||
|
denozord
|
8ae99a0d69 | ||
|
denozord
|
5bfd7ff5de | ||
|
denozord
|
09c343a272 | ||
|
denozord
|
4155963d97 | ||
|
denozord
|
e2b03c7689 | ||
|
denozord
|
56c181f697 | ||
|
denozord
|
4e2f4ed7a5 | ||
|
denozord
|
5dfe76f1df | ||
|
denozord
|
5e0397f667 | ||
|
denozord
|
b2b3933d2d | ||
|
denozord
|
5ec477b23a | ||
|
denozord
|
4afef9abf8 | ||
|
denozord
|
7b4b65053b | ||
|
denozord
|
ce13ca7845 | ||
|
denozord
|
7bfa7be02d | ||
|
denozord
|
0063e79a73 | ||
|
denozord
|
77ba6c1fa3 | ||
|
denozord
|
db31690df5 | ||
|
denozord
|
0c40d2726b | ||
|
denozord
|
f2372ef4c9 | ||
|
denozord
|
3d3afa4d3e | ||
|
denozord
|
7f2c4c3c8f | ||
|
denozord
|
89d35cd7ef | ||
|
denozord
|
5eecb8d070 | ||
|
denozord
|
0d9542d7e9 | ||
|
denozord
|
bcbbdc19e4 | ||
|
denozord
|
275f2f6929 | ||
|
denozord
|
3d9394e27d | ||
|
denozord
|
21d2707a1b | ||
|
denozord
|
d8457b1497 | ||
|
denozord
|
e5b72ca56f | ||
|
denozord
|
61c87e69ef | ||
|
denozord
|
d4a1643a25 | ||
|
denozord
|
7815c5354f | ||
|
denozord
|
335af01116 | ||
|
denozord
|
99c027f96f | ||
|
denozord
|
6e4a0aae27 | ||
|
denozord
|
1dfdfcfeec | ||
|
denozord
|
999bd14590 | ||
|
denozord
|
e7c527f787 | ||
|
denozord
|
76294ab2c9 | ||
|
denozord
|
ce107db7ea | ||
|
denozord
|
b374faa593 | ||
|
denozord
|
b581c47c28 | ||
|
denozord
|
e5f093b65f | ||
|
denozord
|
f56150694b | ||
|
denozord
|
3319f9c329 | ||
|
denozord
|
94314c383b | ||
|
denozord
|
1a27217676 | ||
|
denozord
|
0ea0f376a6 | ||
|
denozord
|
5b96325184 | ||
|
denozord
|
ac34faaf48 | ||
|
denozord
|
f4f79a8f01 | ||
|
denozord
|
49ee872e4a | ||
|
denozord
|
e0163fa968 | ||
|
denozord
|
2ee43d0538 | ||
|
denozord
|
c7ebe0943b | ||
|
denozord
|
d583757882 | ||
|
denozord
|
80c91d9c54 | ||
|
denozord
|
604d45ed92 | ||
|
denozord
|
335f7c9b58 | ||
|
denozord
|
4feb84338a | ||
|
denozord
|
3b858441a2 | ||
|
denozord
|
cc77a21ba1 | ||
|
denozord
|
6f1d307ee0 | ||
|
denozord
|
0310147044 | ||
|
denozord
|
2bdad8445e | ||
|
denozord
|
cd4b95bb8f | ||
|
denozord
|
6ced966274 | ||
|
denozord
|
32255c6a3a | ||
|
denozord
|
4ff9ae0f46 | ||
|
denozord
|
4c9cb7eab6 | ||
|
denozord
|
f60611e689 | ||
|
denozord
|
b7a55e4241 | ||
|
denozord
|
cef571cc40 | ||
|
denozord
|
9b74b77391 | ||
|
denozord
|
2157c6a3c7 | ||
|
denozord
|
26f8a97c21 | ||
|
denozord
|
3ab4c4095a | ||
|
denozord
|
5114e9dd81 | ||
|
denozord
|
0cfeaec417 | ||
|
denozord
|
ded2116b43 | ||
|
denozord
|
fc27599222 | ||
|
denozord
|
ba0f0273e3 | ||
|
denozord
|
cd2c0d275e | ||
|
denozord
|
ced727e702 | ||
|
denozord
|
297ea4af34 | ||
|
denozord
|
84b4f7e795 | ||
|
denozord
|
e57d1316d2 | ||
|
denozord
|
2f09c9ebbb | ||
|
denozord
|
82c9ff8a04 | ||
|
denozord
|
86e8b5fece | ||
|
denozord
|
999285801d | ||
|
denozord
|
cb0c370c10 | ||
|
denozord
|
76a8b867f8 | ||
|
denozord
|
a77ba76ff8 | ||
|
denozord
|
d223981a93 | ||
|
denozord
|
39f3510512 | ||
|
denozord
|
011740df1f | ||
|
denozord
|
566dd1d1bb | ||
|
denozord
|
8f5cd700c3 | ||
|
denozord
|
b94b7c67e2 | ||
|
denozord
|
96d8e9bb67 | ||
|
denozord
|
5c2edac25a | ||
|
denozord
|
51999d485c | ||
|
denozord
|
a076f981bb | ||
|
denozord
|
0442942b44 | ||
|
denozord
|
0109d5ea5f | ||
|
denozord
|
29e0679038 | ||
|
denozord
|
849247002c | ||
|
denozord
|
8f81cf9645 | ||
|
denozord
|
e9a029e568 | ||
|
denozord
|
cc69bc53b9 | ||
|
denozord
|
b79dced147 | ||
|
denozord
|
00bf38fbb9 | ||
|
denozord
|
0bd2a07dd2 | ||
|
denozord
|
75a7778148 | ||
|
denozord
|
9328e205a0 | ||
|
denozord
|
b0ccbc5c54 | ||
|
denozord
|
fdc8b1f458 | ||
|
denozord
|
cf1dbfce37 | ||
|
denozord
|
bf08e91d4b | ||
|
denozord
|
ea6220d955 | ||
|
denozord
|
64f4b76d3f | ||
|
denozord
|
d3bf307d6c | ||
|
denozord
|
bfae6def11 | ||
|
denozord
|
03a47e7346 | ||
|
denozord
|
682c2ce96b | ||
|
denozord
|
1e6f5badec | ||
|
denozord
|
e5f576d11e | ||
|
denozord
|
c925a22a99 | ||
|
denozord
|
48419d577a | ||
|
denozord
|
c04b2d726b | ||
|
denozord
|
d949e011c9 | ||
|
denozord
|
dace11a407 | ||
|
denozord
|
fe665ebc1f | ||
|
denozord
|
ff7c26f6f7 | ||
|
denozord
|
a04dc72b00 | ||
|
denozord
|
86d4ecb7e2 | ||
|
denozord
|
d173112bae | ||
|
denozord
|
ed34332df8 | ||
|
denozord
|
8f1668668c | ||
|
denozord
|
1ec3b3cf24 | ||
|
denozord
|
f1aecf7529 | ||
|
denozord
|
cf3b1a2028 | ||
|
denozord
|
4b8fcef17a | ||
|
denozord
|
c6599efb21 | ||
|
denozord
|
fda6e936aa | ||
|
denozord
|
f2e237840b | ||
|
denozord
|
b6c314507d | ||
|
denozord
|
8db03ca5b9 | ||
|
denozord
|
9a1991c23c | ||
|
denozord
|
549c695117 | ||
|
denozord
|
660513aee6 | ||
|
denozord
|
20db630395 | ||
|
denozord
|
28a9d0efa8 | ||
|
denozord
|
75f44d2c4b | ||
|
denozord
|
8d34822d12 | ||
|
denozord
|
6a96c368e3 | ||
|
denozord
|
acd4e80435 | ||
|
denozord
|
02bc19770f | ||
|
denozord
|
d7c769c655 | ||
|
denozord
|
bda9b4fc27 | ||
|
denozord
|
248b78ce96 | ||
|
denozord
|
b46471c4b4 | ||
|
denozord
|
8bd39c554e | ||
|
denozord
|
27dade3eda | ||
|
denozord
|
6e7a63dd28 | ||
|
denozord
|
6dfcaa584d | ||
|
denozord
|
f4a6ceed08 | ||
|
denozord
|
9cdcd054e7 | ||
|
denozord
|
260985573c | ||
|
denozord
|
37b34f718c | ||
|
denozord
|
e3ad529411 | ||
|
denozord
|
367d4fd520 | ||
|
denozord
|
a54d5c9009 | ||
|
denozord
|
f1dfb13d8e | ||
|
denozord
|
c06294d9f2 | ||
|
denozord
|
ec6c348b3e | ||
|
denozord
|
cb32b1bd71 | ||
|
denozord
|
4a3426e04f |
@@ -53,3 +53,7 @@ jobs:
|
|||||||
- name: Cleanup old images
|
- name: Cleanup old images
|
||||||
run: |
|
run: |
|
||||||
echo "Skipping container registry cleanup (inline cache in image). Keep 3 latest image tags logic can be added with regctl if needed."
|
echo "Skipping container registry cleanup (inline cache in image). Keep 3 latest image tags logic can be added with regctl if needed."
|
||||||
|
|
||||||
|
- name: Trigger container update webhook
|
||||||
|
run: |
|
||||||
|
curl -X POST -sS --fail "${{ secrets.portainer_webhook }}"
|
||||||
@@ -45,3 +45,7 @@ jobs:
|
|||||||
org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}
|
org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}
|
||||||
build-args: |
|
build-args: |
|
||||||
BUILDKIT_INLINE_CACHE=1
|
BUILDKIT_INLINE_CACHE=1
|
||||||
|
|
||||||
|
- name: Trigger container update webhook
|
||||||
|
run: |
|
||||||
|
curl -X POST -sS --fail "${{ secrets.portainer_webhook }}"
|
||||||
@@ -19,6 +19,7 @@
|
|||||||
docker run -d \
|
docker run -d \
|
||||||
--name s3-lists-manager \
|
--name s3-lists-manager \
|
||||||
-p 3001:3001 \
|
-p 3001:3001 \
|
||||||
|
-e ENCRYPTION_KEY=your-64-hex-character-key-here \
|
||||||
git.shts.su/[repository]:latest
|
git.shts.su/[repository]:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -27,6 +28,7 @@ docker run -d \
|
|||||||
docker run -d \
|
docker run -d \
|
||||||
--name s3-lists-manager-tabler \
|
--name s3-lists-manager-tabler \
|
||||||
-p 3001:3001 \
|
-p 3001:3001 \
|
||||||
|
-e ENCRYPTION_KEY=your-64-hex-character-key-here \
|
||||||
git.shts.su/[repository]:tabler
|
git.shts.su/[repository]:tabler
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -40,6 +42,7 @@ docker rm s3-lists-manager
|
|||||||
docker run -d \
|
docker run -d \
|
||||||
--name s3-lists-manager \
|
--name s3-lists-manager \
|
||||||
-p 3001:3001 \
|
-p 3001:3001 \
|
||||||
|
-e ENCRYPTION_KEY=your-64-hex-character-key-here \
|
||||||
git.shts.su/[repository]:latest
|
git.shts.su/[repository]:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -51,6 +54,7 @@ docker rm s3-lists-manager-tabler
|
|||||||
docker run -d \
|
docker run -d \
|
||||||
--name s3-lists-manager-tabler \
|
--name s3-lists-manager-tabler \
|
||||||
-p 3001:3001 \
|
-p 3001:3001 \
|
||||||
|
-e ENCRYPTION_KEY=your-64-hex-character-key-here \
|
||||||
git.shts.su/[repository]:tabler
|
git.shts.su/[repository]:tabler
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -70,6 +74,7 @@ services:
|
|||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
|
- ENCRYPTION_KEY=${ENCRYPTION_KEY} # Обязательно! Используйте .env файл или secrets
|
||||||
|
|
||||||
s3-lists-manager-tabler:
|
s3-lists-manager-tabler:
|
||||||
image: git.shts.su/[repository]:tabler
|
image: git.shts.su/[repository]:tabler
|
||||||
@@ -79,6 +84,12 @@ services:
|
|||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
|
- ENCRYPTION_KEY=${ENCRYPTION_KEY} # Обязательно! Используйте .env файл или secrets
|
||||||
|
```
|
||||||
|
|
||||||
|
**Создайте файл `.env` в той же директории:**
|
||||||
|
```bash
|
||||||
|
ENCRYPTION_KEY=your-64-hex-character-key-here
|
||||||
```
|
```
|
||||||
|
|
||||||
Запуск:
|
Запуск:
|
||||||
@@ -88,10 +99,31 @@ docker-compose up -d
|
|||||||
|
|
||||||
## 🔧 Переменные окружения
|
## 🔧 Переменные окружения
|
||||||
|
|
||||||
| Переменная | Описание | По умолчанию |
|
| Переменная | Описание | По умолчанию | Обязательная |
|
||||||
|------------|----------|--------------|
|
|------------|----------|--------------|--------------|
|
||||||
| `NODE_ENV` | Окружение Node.js | `production` |
|
| `NODE_ENV` | Окружение Node.js | `production` | Нет |
|
||||||
| `PORT` | Порт для запуска сервера | `3001` |
|
| `PORT` | Порт для запуска сервера | `3001` | Нет |
|
||||||
|
| `ENCRYPTION_KEY` | Ключ шифрования для IPSec паролей (64 hex символа) | - | **Да** |
|
||||||
|
|
||||||
|
### ENCRYPTION_KEY
|
||||||
|
|
||||||
|
**Важно**: `ENCRYPTION_KEY` является обязательным параметром для работы с IPSec паролями. Этот ключ используется для шифрования/дешифрования паролей, хранящихся в S3.
|
||||||
|
|
||||||
|
**Генерация ключа:**
|
||||||
|
```bash
|
||||||
|
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Пример запуска с ENCRYPTION_KEY:**
|
||||||
|
```bash
|
||||||
|
docker run -d \
|
||||||
|
--name s3-lists-manager \
|
||||||
|
-p 3001:3001 \
|
||||||
|
-e ENCRYPTION_KEY=your-64-hex-character-key-here \
|
||||||
|
git.shts.su/[repository]:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ Внимание**: Используйте один и тот же `ENCRYPTION_KEY` для всех запусков контейнера. При изменении ключа старые зашифрованные пароли не смогут быть расшифрованы.
|
||||||
|
|
||||||
## 📊 Мониторинг
|
## 📊 Мониторинг
|
||||||
|
|
||||||
|
|||||||
+9
-1
@@ -11,7 +11,10 @@ RUN npm config set registry https://registry.npmjs.org/ \
|
|||||||
&& npm config set fetch-retry-maxtimeout 120000
|
&& npm config set fetch-retry-maxtimeout 120000
|
||||||
|
|
||||||
COPY frontend/package*.json ./
|
COPY frontend/package*.json ./
|
||||||
RUN --mount=type=cache,target=/root/.npm npm install --no-audit --no-fund
|
|
||||||
|
# npm install с кэшем для ускорения
|
||||||
|
RUN --mount=type=cache,target=/root/.npm \
|
||||||
|
npm install --no-audit --no-fund
|
||||||
|
|
||||||
COPY frontend/src/ ./src/
|
COPY frontend/src/ ./src/
|
||||||
COPY frontend/public/ ./public/
|
COPY frontend/public/ ./public/
|
||||||
@@ -47,6 +50,11 @@ COPY backend/services ./services
|
|||||||
COPY backend/utils ./utils
|
COPY backend/utils ./utils
|
||||||
COPY --from=frontend-builder /app/frontend/dist ./public
|
COPY --from=frontend-builder /app/frontend/dist ./public
|
||||||
|
|
||||||
|
# ENCRYPTION_KEY должен быть установлен через переменные окружения при запуске контейнера
|
||||||
|
# Это обязательный параметр для работы с IPSec паролями
|
||||||
|
# Пример: docker run -e ENCRYPTION_KEY=your-64-hex-character-key ...
|
||||||
|
# Для генерации ключа: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
|
||||||
|
|
||||||
EXPOSE 3001
|
EXPOSE 3001
|
||||||
USER nonroot
|
USER nonroot
|
||||||
CMD ["server.js"]
|
CMD ["server.js"]
|
||||||
@@ -36,6 +36,7 @@ Frontend доступен на `http://localhost:5173` (по умолчанию)
|
|||||||
|
|
||||||
### Важные переменные окружения
|
### Важные переменные окружения
|
||||||
- `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`, `S3_BUCKET_NAME` — доступ к Object Storage
|
- `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`, `S3_BUCKET_NAME` — доступ к Object Storage
|
||||||
|
- `ENCRYPTION_KEY` — ключ шифрования (64 hex символа) для IPSec и MikroTik паролей
|
||||||
- `CORS_ORIGINS` — список разрешённых Origin через запятую (если пусто — разрешены все)
|
- `CORS_ORIGINS` — список разрешённых Origin через запятую (если пусто — разрешены все)
|
||||||
- `LOG_LEVEL` — уровень логов pino (`info` по умолчанию)
|
- `LOG_LEVEL` — уровень логов pino (`info` по умолчанию)
|
||||||
- `PORT` — порт backend (по умолчанию 3001)
|
- `PORT` — порт backend (по умолчанию 3001)
|
||||||
@@ -83,7 +84,7 @@ BGP_BACKGROUND_URL=http://77.232.38.173:8080/api/update_bgp/background?api_key=d
|
|||||||
|
|
||||||
### Фильтры и конфигурации
|
### Фильтры и конфигурации
|
||||||
- GET `/api/filters` / POST `/api/filters` — фильтры для всех серверов.
|
- GET `/api/filters` / POST `/api/filters` — фильтры для всех серверов.
|
||||||
- GET `/api/filters/generate-config` — сгенерировать конфиг MikroTik из `filters.json`.
|
- GET `/api/filters/generate-config?format=text|json` — сгенерировать конфиг MikroTik из `filters.json`.
|
||||||
- POST `/api/filters/export-config` — сохранить сгенерированный конфиг в S3 (`mikrotik-frouting-config.txt`).
|
- POST `/api/filters/export-config` — сохранить сгенерированный конфиг в S3 (`mikrotik-frouting-config.txt`).
|
||||||
|
|
||||||
- GET `/api/server-configs` / POST `/api/server-configs` — список серверов (id, name, ...).
|
- GET `/api/server-configs` / POST `/api/server-configs` — список серверов (id, name, ...).
|
||||||
@@ -93,7 +94,12 @@ BGP_BACKGROUND_URL=http://77.232.38.173:8080/api/update_bgp/background?api_key=d
|
|||||||
|
|
||||||
- GET `/api/server-filters/:serverId` — фильтры сервера.
|
- GET `/api/server-filters/:serverId` — фильтры сервера.
|
||||||
- POST `/api/server-filters/:serverId` — сохранить фильтры сервера.
|
- POST `/api/server-filters/:serverId` — сохранить фильтры сервера.
|
||||||
- POST `/api/server-filters/generate-config` — сгенерировать конфиг MikroTik на лету из переданных `{ filters }`.
|
- POST `/api/server-filters/generate-config` — сгенерировать конфиг MikroTik на лету из переданных `{ filters, format?: 'text'|'json' }`.
|
||||||
|
- POST `/api/mikrotik/generate` — сгенерировать конфиг интерфейсов и маршрутов. Body: `{ format?: 'text'|'json', type?: 'interfaces'|'recursive'|'all', serverId?: string, config?, servers? }`. Возвращает `{ blocks }` — массив блоков с полем `code` (text) или `operations` (json).
|
||||||
|
- GET `/api/mikrotik/generate-interfaces?format=text|json&serverId=` — только интерфейсы.
|
||||||
|
- GET `/api/mikrotik/generate-recursive-routes?format=text|json&serverId=` — только рекурсивные маршруты.
|
||||||
|
- POST `/api/mikrotik/test-connection` — проверить соединение с MikroTik. Body: `{ serverId }` или `{ host, port?, user?, password }`.
|
||||||
|
- POST `/api/mikrotik/apply` — применить конфигурацию на MikroTik по API. Body: `{ serverId, type?: 'interfaces'|'recursive'|'all', dryRun?: boolean }`. Только для jumphost.
|
||||||
|
|
||||||
### Прочее
|
### Прочее
|
||||||
- GET `/api/servers` / POST `/api/servers` — список серверов.
|
- GET `/api/servers` / POST `/api/servers` — список серверов.
|
||||||
@@ -103,7 +109,7 @@ BGP_BACKGROUND_URL=http://77.232.38.173:8080/api/update_bgp/background?api_key=d
|
|||||||
- GET `/api/servers/availability?ttlSeconds=60` — быстрый TCP‑чек доступности нод.
|
- GET `/api/servers/availability?ttlSeconds=60` — быстрый TCP‑чек доступности нод.
|
||||||
- GET `/api/s3/last-modified` — метаданные S3 (etag/lastModified/contentLength) по ключевым файлам.
|
- GET `/api/s3/last-modified` — метаданные S3 (etag/lastModified/contentLength) по ключевым файлам.
|
||||||
- POST `/api/update-bgp/background` — прокси к фоновой задаче обновления BGP. Требует `BGP_BACKGROUND_URL` в `.env`.
|
- POST `/api/update-bgp/background` — прокси к фоновой задаче обновления BGP. Требует `BGP_BACKGROUND_URL` в `.env`.
|
||||||
- Locks: GET `/api/locks/:resource`, POST `/api/locks/:resource`, DELETE `/api/locks/:resource`.
|
- Locks: GET `/api/locks/:resource`, POST `/api/locks/:resource`, DELETE `/api/locks/:resource` (опциональные soft-locks для редактирования; доступ к S3 и долгие операции вроде speed-test блокировок не используют).
|
||||||
- History: GET `/api/history/:resource`, POST `/api/history/:resource/rollback`.
|
- History: GET `/api/history/:resource`, POST `/api/history/:resource/rollback`.
|
||||||
|
|
||||||
## Frontend
|
## Frontend
|
||||||
|
|||||||
@@ -195,6 +195,22 @@ function sanitizeString(str) {
|
|||||||
return cleaned.trim();
|
return cleaned.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Валидация идентификатора сервера для использования в S3-ключах и путях.
|
||||||
|
* Запрещает path traversal (.., /, \) и небезопасные символы.
|
||||||
|
* @param {string} serverId - идентификатор сервера
|
||||||
|
* @param {object} opts - { maxLength: number } (по умолчанию 128)
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
function isValidServerId(serverId, opts = {}) {
|
||||||
|
if (!serverId || typeof serverId !== 'string') return false;
|
||||||
|
const maxLen = opts.maxLength != null ? opts.maxLength : 128;
|
||||||
|
const trimmed = serverId.trim();
|
||||||
|
if (trimmed.length === 0 || trimmed.length > maxLen) return false;
|
||||||
|
if (trimmed.includes('..') || trimmed.includes('/') || trimmed.includes('\\')) return false;
|
||||||
|
return /^[a-zA-Z0-9_.-]+$/.test(trimmed);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Проверка на SQL injection паттерны
|
* Проверка на SQL injection паттерны
|
||||||
* @param {string} str - строка для проверки
|
* @param {string} str - строка для проверки
|
||||||
@@ -328,6 +344,7 @@ module.exports = {
|
|||||||
isValidASN,
|
isValidASN,
|
||||||
isValidCommunity,
|
isValidCommunity,
|
||||||
isValidGateway,
|
isValidGateway,
|
||||||
|
isValidServerId,
|
||||||
sanitizeString,
|
sanitizeString,
|
||||||
isSafeSQLString,
|
isSafeSQLString,
|
||||||
isSafeXSSString,
|
isSafeXSSString,
|
||||||
|
|||||||
Generated
-394
@@ -11,7 +11,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@aws-sdk/client-s3": "^3.687.0",
|
"@aws-sdk/client-s3": "^3.687.0",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"aws-sdk": "^2.1692.0",
|
|
||||||
"compression": "^1.7.4",
|
"compression": "^1.7.4",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"dotenv": "^17.0.1",
|
"dotenv": "^17.0.1",
|
||||||
@@ -1718,43 +1717,6 @@
|
|||||||
"node": ">=8.0.0"
|
"node": ">=8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/available-typed-arrays": {
|
|
||||||
"version": "1.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
|
||||||
"integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"possible-typed-array-names": "^1.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/aws-sdk": {
|
|
||||||
"version": "2.1692.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1692.0.tgz",
|
|
||||||
"integrity": "sha512-x511uiJ/57FIsbgUe5csJ13k3uzu25uWQE+XqfBis/sB0SFoiElJWXRkgEAUh0U6n40eT3ay5Ue4oPkRMu1LYw==",
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"buffer": "4.9.2",
|
|
||||||
"events": "1.1.1",
|
|
||||||
"ieee754": "1.1.13",
|
|
||||||
"jmespath": "0.16.0",
|
|
||||||
"querystring": "0.2.0",
|
|
||||||
"sax": "1.2.1",
|
|
||||||
"url": "0.10.3",
|
|
||||||
"util": "^0.12.4",
|
|
||||||
"uuid": "8.0.0",
|
|
||||||
"xml2js": "0.6.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/balanced-match": {
|
"node_modules/balanced-match": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||||
@@ -1762,26 +1724,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/base64-js": {
|
|
||||||
"version": "1.5.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
|
||||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "patreon",
|
|
||||||
"url": "https://www.patreon.com/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "consulting",
|
|
||||||
"url": "https://feross.org/support"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/binary-extensions": {
|
"node_modules/binary-extensions": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||||
@@ -1870,17 +1812,6 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/buffer": {
|
|
||||||
"version": "4.9.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
|
|
||||||
"integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"base64-js": "^1.0.2",
|
|
||||||
"ieee754": "^1.1.4",
|
|
||||||
"isarray": "^1.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/bytes": {
|
"node_modules/bytes": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||||
@@ -1890,24 +1821,6 @@
|
|||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/call-bind": {
|
|
||||||
"version": "1.0.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
|
|
||||||
"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bind-apply-helpers": "^1.0.0",
|
|
||||||
"es-define-property": "^1.0.0",
|
|
||||||
"get-intrinsic": "^1.2.4",
|
|
||||||
"set-function-length": "^1.2.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/call-bind-apply-helpers": {
|
"node_modules/call-bind-apply-helpers": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||||
@@ -2090,23 +2003,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/define-data-property": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"es-define-property": "^1.0.0",
|
|
||||||
"es-errors": "^1.3.0",
|
|
||||||
"gopd": "^1.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/depd": {
|
"node_modules/depd": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||||
@@ -2212,15 +2108,6 @@
|
|||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/events": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
|
|
||||||
"integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.4.x"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/express": {
|
"node_modules/express": {
|
||||||
"version": "4.21.2",
|
"version": "4.21.2",
|
||||||
"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
|
"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
|
||||||
@@ -2389,21 +2276,6 @@
|
|||||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/for-each": {
|
|
||||||
"version": "0.3.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
|
|
||||||
"integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"is-callable": "^1.2.7"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/forwarded": {
|
"node_modules/forwarded": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||||
@@ -2527,18 +2399,6 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/has-property-descriptors": {
|
|
||||||
"version": "1.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
|
||||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"es-define-property": "^1.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/has-symbols": {
|
"node_modules/has-symbols": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||||
@@ -2551,21 +2411,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/has-tostringtag": {
|
|
||||||
"version": "1.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
|
||||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"has-symbols": "^1.0.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/hasown": {
|
"node_modules/hasown": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||||
@@ -2615,12 +2460,6 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ieee754": {
|
|
||||||
"version": "1.1.13",
|
|
||||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
|
|
||||||
"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
|
|
||||||
"license": "BSD-3-Clause"
|
|
||||||
},
|
|
||||||
"node_modules/ignore-by-default": {
|
"node_modules/ignore-by-default": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
||||||
@@ -2643,22 +2482,6 @@
|
|||||||
"node": ">= 0.10"
|
"node": ">= 0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-arguments": {
|
|
||||||
"version": "1.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
|
|
||||||
"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bound": "^1.0.2",
|
|
||||||
"has-tostringtag": "^1.0.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-binary-path": {
|
"node_modules/is-binary-path": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||||
@@ -2672,18 +2495,6 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-callable": {
|
|
||||||
"version": "1.2.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
|
|
||||||
"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-extglob": {
|
"node_modules/is-extglob": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||||
@@ -2694,24 +2505,6 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-generator-function": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bound": "^1.0.3",
|
|
||||||
"get-proto": "^1.0.0",
|
|
||||||
"has-tostringtag": "^1.0.2",
|
|
||||||
"safe-regex-test": "^1.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-glob": {
|
"node_modules/is-glob": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||||
@@ -2735,54 +2528,6 @@
|
|||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-regex": {
|
|
||||||
"version": "1.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
|
||||||
"integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bound": "^1.0.2",
|
|
||||||
"gopd": "^1.2.0",
|
|
||||||
"has-tostringtag": "^1.0.2",
|
|
||||||
"hasown": "^2.0.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-typed-array": {
|
|
||||||
"version": "1.1.15",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
|
|
||||||
"integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"which-typed-array": "^1.1.16"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/isarray": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/jmespath": {
|
|
||||||
"version": "0.16.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
|
|
||||||
"integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.6.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/json-schema-traverse": {
|
"node_modules/json-schema-traverse": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||||
@@ -3053,15 +2798,6 @@
|
|||||||
"integrity": "sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==",
|
"integrity": "sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/possible-typed-array-names": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/process-warning": {
|
"node_modules/process-warning": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
|
||||||
@@ -3111,12 +2847,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/punycode": {
|
|
||||||
"version": "1.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
|
|
||||||
"integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/qs": {
|
"node_modules/qs": {
|
||||||
"version": "6.13.0",
|
"version": "6.13.0",
|
||||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
|
"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
|
||||||
@@ -3132,15 +2862,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/querystring": {
|
|
||||||
"version": "0.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
|
|
||||||
"integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
|
|
||||||
"deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.4.x"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/quick-format-unescaped": {
|
"node_modules/quick-format-unescaped": {
|
||||||
"version": "4.0.4",
|
"version": "4.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
|
||||||
@@ -3222,23 +2943,6 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/safe-regex-test": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bound": "^1.0.2",
|
|
||||||
"es-errors": "^1.3.0",
|
|
||||||
"is-regex": "^1.2.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/safe-stable-stringify": {
|
"node_modules/safe-stable-stringify": {
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
|
||||||
@@ -3254,12 +2958,6 @@
|
|||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/sax": {
|
|
||||||
"version": "1.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
|
|
||||||
"integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
|
|
||||||
"license": "ISC"
|
|
||||||
},
|
|
||||||
"node_modules/semver": {
|
"node_modules/semver": {
|
||||||
"version": "7.7.2",
|
"version": "7.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||||
@@ -3336,23 +3034,6 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/set-function-length": {
|
|
||||||
"version": "1.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
|
||||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"define-data-property": "^1.1.4",
|
|
||||||
"es-errors": "^1.3.0",
|
|
||||||
"function-bind": "^1.1.2",
|
|
||||||
"get-intrinsic": "^1.2.4",
|
|
||||||
"gopd": "^1.0.1",
|
|
||||||
"has-property-descriptors": "^1.0.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/setprototypeof": {
|
"node_modules/setprototypeof": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||||
@@ -3581,29 +3262,6 @@
|
|||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/url": {
|
|
||||||
"version": "0.10.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
|
|
||||||
"integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"punycode": "1.3.2",
|
|
||||||
"querystring": "0.2.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/util": {
|
|
||||||
"version": "0.12.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
|
|
||||||
"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"inherits": "^2.0.3",
|
|
||||||
"is-arguments": "^1.0.4",
|
|
||||||
"is-generator-function": "^1.0.7",
|
|
||||||
"is-typed-array": "^1.1.3",
|
|
||||||
"which-typed-array": "^1.1.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/utils-merge": {
|
"node_modules/utils-merge": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
||||||
@@ -3613,15 +3271,6 @@
|
|||||||
"node": ">= 0.4.0"
|
"node": ">= 0.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/uuid": {
|
|
||||||
"version": "8.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
|
|
||||||
"integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"bin": {
|
|
||||||
"uuid": "dist/bin/uuid"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vary": {
|
"node_modules/vary": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||||
@@ -3630,49 +3279,6 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"node_modules/which-typed-array": {
|
|
||||||
"version": "1.1.19",
|
|
||||||
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
|
|
||||||
"integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"available-typed-arrays": "^1.0.7",
|
|
||||||
"call-bind": "^1.0.8",
|
|
||||||
"call-bound": "^1.0.4",
|
|
||||||
"for-each": "^0.3.5",
|
|
||||||
"get-proto": "^1.0.1",
|
|
||||||
"gopd": "^1.2.0",
|
|
||||||
"has-tostringtag": "^1.0.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/xml2js": {
|
|
||||||
"version": "0.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
|
|
||||||
"integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"sax": ">=0.6.0",
|
|
||||||
"xmlbuilder": "~11.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/xmlbuilder": {
|
|
||||||
"version": "11.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
|
|
||||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,17 +16,17 @@
|
|||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"description": "",
|
"description": "",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@aws-sdk/client-s3": "^3.687.0",
|
||||||
|
"ajv": "^8.17.1",
|
||||||
|
"compression": "^1.7.4",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"dotenv": "^17.0.1",
|
"dotenv": "^17.0.1",
|
||||||
"express": "^4.19.2",
|
"express": "^4.19.2",
|
||||||
"compression": "^1.7.4",
|
|
||||||
"ajv": "^8.17.1",
|
|
||||||
"helmet": "^7.1.0",
|
|
||||||
"express-rate-limit": "^6.11.2",
|
"express-rate-limit": "^6.11.2",
|
||||||
|
"helmet": "^7.1.0",
|
||||||
"pino": "^9.4.0",
|
"pino": "^9.4.0",
|
||||||
"pino-http": "^10.3.0",
|
"pino-http": "^10.3.0",
|
||||||
"prom-client": "^15.1.3",
|
"prom-client": "^15.1.3"
|
||||||
"@aws-sdk/client-s3": "^3.687.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"nodemon": "^3.1.10"
|
"nodemon": "^3.1.10"
|
||||||
|
|||||||
@@ -9,13 +9,17 @@ const { streamToString } = require('../services/s3Service');
|
|||||||
const { generateMikrotikConfig } = require('../utils/mikrotikConfig');
|
const { generateMikrotikConfig } = require('../utils/mikrotikConfig');
|
||||||
const { getS3JsonWithHeaders } = require('../utils/s3Helpers');
|
const { getS3JsonWithHeaders } = require('../utils/s3Helpers');
|
||||||
|
|
||||||
// GET /api/filters/generate-config
|
// GET /api/filters/generate-config?format=text|json
|
||||||
async function generateConfig(req, res) {
|
async function generateConfig(req, res) {
|
||||||
try {
|
try {
|
||||||
|
const format = (req.query.format || 'text').toLowerCase();
|
||||||
|
if (!['text', 'json'].includes(format)) {
|
||||||
|
return sendError(res, 400, 'format must be "text" or "json"', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
await getS3JsonWithHeaders('filters.json', req, res, {
|
await getS3JsonWithHeaders('filters.json', req, res, {
|
||||||
transform: (filters) => {
|
transform: (filters) => {
|
||||||
const config = generateMikrotikConfig(filters);
|
const result = generateMikrotikConfig(filters, { format });
|
||||||
return { config };
|
return format === 'json' ? result : { config: result };
|
||||||
},
|
},
|
||||||
defaultValue: [],
|
defaultValue: [],
|
||||||
});
|
});
|
||||||
@@ -54,10 +58,18 @@ async function exportConfig(req, res) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// POST /api/server-filters/generate-config
|
// POST /api/server-filters/generate-config
|
||||||
|
// Body: { filters, format?: 'text'|'json' }
|
||||||
async function generateServerFilterConfig(req, res) {
|
async function generateServerFilterConfig(req, res) {
|
||||||
const { filters } = req.body;
|
const { filters, format = 'text' } = req.body || {};
|
||||||
const config = generateMikrotikConfig(filters);
|
const fmt = String(format || 'text').toLowerCase();
|
||||||
res.json({ config });
|
if (!['text', 'json'].includes(fmt)) {
|
||||||
|
return sendError(res, 400, 'format must be "text" or "json"', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
const result = generateMikrotikConfig(Array.isArray(filters) ? filters : [], { format: fmt });
|
||||||
|
if (fmt === 'json') {
|
||||||
|
return res.json(result);
|
||||||
|
}
|
||||||
|
res.json({ config: result });
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|||||||
@@ -0,0 +1,315 @@
|
|||||||
|
/**
|
||||||
|
* Роуты для управления IPSec паролями
|
||||||
|
* Пароли хранятся в S3 в зашифрованном виде
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { sendError, sendOk } = require('../middleware/errorHandler');
|
||||||
|
const { readS3TextObject, writeS3JsonObject, deleteS3Object } = require('../services/s3Service');
|
||||||
|
const { encrypt, decrypt } = require('../utils/encryption');
|
||||||
|
|
||||||
|
const S3_KEY = 'network-config/ipsec-passwords.json';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/ipsec-passwords - получить список паролей (без расшифровки)
|
||||||
|
*/
|
||||||
|
async function getIpsecPasswords(req, res) {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(S3_KEY).catch(() => ({ body: '[]' }));
|
||||||
|
let passwords = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
passwords = JSON.parse(data.body || '[]');
|
||||||
|
if (!Array.isArray(passwords)) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Возвращаем список паролей БЕЗ расшифровки (только метаданные)
|
||||||
|
const result = passwords.map(p => ({
|
||||||
|
id: p.id,
|
||||||
|
name: p.name || '',
|
||||||
|
description: p.description || '',
|
||||||
|
createdAt: p.createdAt || null,
|
||||||
|
updatedAt: p.updatedAt || null,
|
||||||
|
// НЕ возвращаем зашифрованный пароль
|
||||||
|
}));
|
||||||
|
|
||||||
|
res.json(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error reading IPSec passwords:', error);
|
||||||
|
return sendError(res, 500, 'Error reading IPSec passwords', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/ipsec-passwords/:id - получить конкретный пароль (расшифрованный)
|
||||||
|
*/
|
||||||
|
async function getIpsecPassword(req, res) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(S3_KEY).catch(() => ({ body: '[]' }));
|
||||||
|
let passwords = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
passwords = JSON.parse(data.body || '[]');
|
||||||
|
if (!Array.isArray(passwords)) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const password = passwords.find(p => p.id === id);
|
||||||
|
if (!password) {
|
||||||
|
return sendError(res, 404, 'IPSec password not found', 'E_NOT_FOUND');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Проверяем наличие зашифрованного пароля
|
||||||
|
if (!password.encryptedPassword) {
|
||||||
|
console.error(`IPSec password ${id} has no encryptedPassword field`);
|
||||||
|
console.error('Password object:', JSON.stringify(password, null, 2));
|
||||||
|
return sendError(res, 500, 'Password has no encrypted data', 'E_DECRYPT');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Расшифровываем пароль для возврата
|
||||||
|
let decryptedPassword = '';
|
||||||
|
try {
|
||||||
|
if (typeof password.encryptedPassword !== 'string') {
|
||||||
|
console.error(`IPSec password ${id} encryptedPassword is not a string:`, typeof password.encryptedPassword);
|
||||||
|
return sendError(res, 500, 'Invalid encrypted password format', 'E_DECRYPT');
|
||||||
|
}
|
||||||
|
|
||||||
|
decryptedPassword = decrypt(password.encryptedPassword);
|
||||||
|
|
||||||
|
if (!decryptedPassword) {
|
||||||
|
console.error(`IPSec password ${id} decrypted to empty string`);
|
||||||
|
return sendError(res, 500, 'Password decrypted to empty string', 'E_DECRYPT');
|
||||||
|
}
|
||||||
|
} catch (decryptError) {
|
||||||
|
console.error('Error decrypting password:', decryptError);
|
||||||
|
console.error('Password ID:', id);
|
||||||
|
console.error('Encrypted password length:', password.encryptedPassword?.length);
|
||||||
|
console.error('Encrypted password preview:', password.encryptedPassword?.substring(0, 50));
|
||||||
|
console.error('Encrypted password format check:', password.encryptedPassword?.split(':').length, 'parts');
|
||||||
|
|
||||||
|
// Проверяем, возможно это старый формат или другой ключ
|
||||||
|
const errorMessage = decryptError.message || 'Unknown decryption error';
|
||||||
|
return sendError(res, 500, `Error decrypting password: ${errorMessage}. Check if ENCRYPTION_KEY is correct.`, 'E_DECRYPT');
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
id: password.id,
|
||||||
|
name: password.name || '',
|
||||||
|
description: password.description || '',
|
||||||
|
password: decryptedPassword, // Расшифрованный пароль
|
||||||
|
createdAt: password.createdAt || null,
|
||||||
|
updatedAt: password.updatedAt || null,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error reading IPSec password:', error);
|
||||||
|
return sendError(res, 500, 'Error reading IPSec password', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/ipsec-passwords - создать новый пароль
|
||||||
|
*/
|
||||||
|
async function createIpsecPassword(req, res) {
|
||||||
|
const { name, password, description } = req.body;
|
||||||
|
|
||||||
|
if (!name || !password) {
|
||||||
|
return sendError(res, 400, 'Name and password are required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Читаем текущие пароли
|
||||||
|
const data = await readS3TextObject(S3_KEY).catch(() => ({ body: '[]' }));
|
||||||
|
let passwords = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
passwords = JSON.parse(data.body || '[]');
|
||||||
|
if (!Array.isArray(passwords)) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Проверяем, нет ли уже пароля с таким именем
|
||||||
|
if (passwords.some(p => p.name === name)) {
|
||||||
|
return sendError(res, 400, 'Password with this name already exists', 'E_DUPLICATE');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Шифруем пароль
|
||||||
|
let encryptedPassword;
|
||||||
|
try {
|
||||||
|
encryptedPassword = encrypt(password);
|
||||||
|
if (!encryptedPassword || encryptedPassword.trim() === '') {
|
||||||
|
console.error('Failed to encrypt password: result is empty');
|
||||||
|
return sendError(res, 500, 'Failed to encrypt password', 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
// Проверяем формат зашифрованного пароля
|
||||||
|
const parts = encryptedPassword.split(':');
|
||||||
|
if (parts.length !== 3) {
|
||||||
|
console.error('Invalid encrypted password format:', encryptedPassword.substring(0, 50));
|
||||||
|
return sendError(res, 500, 'Failed to encrypt password: invalid format', 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
} catch (encryptError) {
|
||||||
|
console.error('Error encrypting password:', encryptError);
|
||||||
|
return sendError(res, 500, `Failed to encrypt password: ${encryptError.message}`, 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создаем новый пароль
|
||||||
|
const newPassword = {
|
||||||
|
id: `ipsec-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
|
||||||
|
name: String(name).trim(),
|
||||||
|
description: String(description || '').trim(),
|
||||||
|
encryptedPassword,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
passwords.push(newPassword);
|
||||||
|
|
||||||
|
// Сохраняем в S3
|
||||||
|
const meta = await writeS3JsonObject(S3_KEY, passwords);
|
||||||
|
|
||||||
|
// Возвращаем без расшифрованного пароля, но с ID
|
||||||
|
res.json({
|
||||||
|
id: newPassword.id,
|
||||||
|
name: newPassword.name,
|
||||||
|
description: newPassword.description,
|
||||||
|
createdAt: newPassword.createdAt,
|
||||||
|
updatedAt: newPassword.updatedAt,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating IPSec password:', error);
|
||||||
|
return sendError(res, 500, 'Error creating IPSec password', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PUT /api/ipsec-passwords/:id - обновить пароль
|
||||||
|
*/
|
||||||
|
async function updateIpsecPassword(req, res) {
|
||||||
|
const { id } = req.params;
|
||||||
|
const { name, password, description } = req.body;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Читаем текущие пароли
|
||||||
|
const data = await readS3TextObject(S3_KEY).catch(() => ({ body: '[]' }));
|
||||||
|
let passwords = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
passwords = JSON.parse(data.body || '[]');
|
||||||
|
if (!Array.isArray(passwords)) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const index = passwords.findIndex(p => p.id === id);
|
||||||
|
if (index === -1) {
|
||||||
|
return sendError(res, 404, 'IPSec password not found', 'E_NOT_FOUND');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Проверяем уникальность имени (если изменилось)
|
||||||
|
if (name && name !== passwords[index].name) {
|
||||||
|
if (passwords.some(p => p.id !== id && p.name === name)) {
|
||||||
|
return sendError(res, 400, 'Password with this name already exists', 'E_DUPLICATE');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обновляем пароль
|
||||||
|
if (name !== undefined) {
|
||||||
|
passwords[index].name = String(name).trim();
|
||||||
|
}
|
||||||
|
if (description !== undefined) {
|
||||||
|
passwords[index].description = String(description || '').trim();
|
||||||
|
}
|
||||||
|
if (password !== undefined) {
|
||||||
|
let encryptedPassword;
|
||||||
|
try {
|
||||||
|
encryptedPassword = encrypt(password);
|
||||||
|
if (!encryptedPassword || encryptedPassword.trim() === '') {
|
||||||
|
console.error('Failed to encrypt password: result is empty');
|
||||||
|
return sendError(res, 500, 'Failed to encrypt password', 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
// Проверяем формат зашифрованного пароля
|
||||||
|
const parts = encryptedPassword.split(':');
|
||||||
|
if (parts.length !== 3) {
|
||||||
|
console.error('Invalid encrypted password format:', encryptedPassword.substring(0, 50));
|
||||||
|
return sendError(res, 500, 'Failed to encrypt password: invalid format', 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
passwords[index].encryptedPassword = encryptedPassword;
|
||||||
|
} catch (encryptError) {
|
||||||
|
console.error('Error encrypting password:', encryptError);
|
||||||
|
return sendError(res, 500, `Failed to encrypt password: ${encryptError.message}`, 'E_ENCRYPT');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
passwords[index].updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
// Сохраняем в S3
|
||||||
|
const meta = await writeS3JsonObject(S3_KEY, passwords);
|
||||||
|
|
||||||
|
// Возвращаем без расшифрованного пароля
|
||||||
|
res.json({
|
||||||
|
id: passwords[index].id,
|
||||||
|
name: passwords[index].name,
|
||||||
|
description: passwords[index].description,
|
||||||
|
createdAt: passwords[index].createdAt,
|
||||||
|
updatedAt: passwords[index].updatedAt,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating IPSec password:', error);
|
||||||
|
return sendError(res, 500, 'Error updating IPSec password', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE /api/ipsec-passwords/:id - удалить пароль
|
||||||
|
*/
|
||||||
|
async function deleteIpsecPassword(req, res) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Читаем текущие пароли
|
||||||
|
const data = await readS3TextObject(S3_KEY).catch(() => ({ body: '[]' }));
|
||||||
|
let passwords = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
passwords = JSON.parse(data.body || '[]');
|
||||||
|
if (!Array.isArray(passwords)) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
passwords = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const filtered = passwords.filter(p => p.id !== id);
|
||||||
|
|
||||||
|
if (filtered.length === passwords.length) {
|
||||||
|
return sendError(res, 404, 'IPSec password not found', 'E_NOT_FOUND');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Сохраняем в S3
|
||||||
|
const meta = await writeS3JsonObject(S3_KEY, filtered);
|
||||||
|
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting IPSec password:', error);
|
||||||
|
return sendError(res, 500, 'Error deleting IPSec password', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getIpsecPasswords,
|
||||||
|
getIpsecPassword,
|
||||||
|
createIpsecPassword,
|
||||||
|
updateIpsecPassword,
|
||||||
|
deleteIpsecPassword,
|
||||||
|
};
|
||||||
@@ -9,8 +9,15 @@ const { streamToString } = require('../services/s3Service');
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Создать GET эндпоинт для JSON данных
|
* Создать GET эндпоинт для JSON данных
|
||||||
|
* @param {string} s3Key - Ключ в S3
|
||||||
|
* @param {Object} options - Опции
|
||||||
|
* @param {boolean} options.singleObject - Если true, возвращает объект вместо массива
|
||||||
|
* @param {any} options.defaultValue - Значение по умолчанию ([] для массива, {} для объекта)
|
||||||
*/
|
*/
|
||||||
function createJsonDataGET(s3Key) {
|
function createJsonDataGET(s3Key, options = {}) {
|
||||||
|
const { singleObject = false, defaultValue } = options;
|
||||||
|
const fallback = defaultValue !== undefined ? defaultValue : (singleObject ? {} : []);
|
||||||
|
|
||||||
return async (req, res) => {
|
return async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const head = await s3.send(new HeadObjectCommand({ Bucket: BUCKET_NAME, Key: s3Key })).catch(() => null);
|
const head = await s3.send(new HeadObjectCommand({ Bucket: BUCKET_NAME, Key: s3Key })).catch(() => null);
|
||||||
@@ -22,22 +29,26 @@ function createJsonDataGET(s3Key) {
|
|||||||
|
|
||||||
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: s3Key }));
|
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: s3Key }));
|
||||||
const fileContent = await streamToString(data.Body);
|
const fileContent = await streamToString(data.Body);
|
||||||
let items = [];
|
let items = fallback;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
items = JSON.parse(fileContent);
|
const parsed = JSON.parse(fileContent);
|
||||||
if (!Array.isArray(items)) {
|
if (singleObject) {
|
||||||
items = [];
|
// Для одиночного объекта
|
||||||
|
items = (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) ? parsed : fallback;
|
||||||
|
} else {
|
||||||
|
// Для массива
|
||||||
|
items = Array.isArray(parsed) ? parsed : fallback;
|
||||||
}
|
}
|
||||||
} catch (parseError) {
|
} catch (parseError) {
|
||||||
console.error(`Error parsing ${s3Key}:`, parseError);
|
console.error(`Error parsing ${s3Key}:`, parseError);
|
||||||
items = [];
|
items = fallback;
|
||||||
}
|
}
|
||||||
|
|
||||||
res.json(items);
|
res.json(items);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error?.code === 'NoSuchKey' || error?.$metadata?.httpStatusCode === 404) {
|
if (error?.code === 'NoSuchKey' || error?.$metadata?.httpStatusCode === 404) {
|
||||||
res.json([]);
|
res.json(fallback);
|
||||||
} else {
|
} else {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
return sendError(res, 500, 'Error reading from S3', 'E_S3');
|
return sendError(res, 500, 'Error reading from S3', 'E_S3');
|
||||||
@@ -48,16 +59,37 @@ function createJsonDataGET(s3Key) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Создать POST эндпоинт для JSON данных
|
* Создать POST эндпоинт для JSON данных
|
||||||
|
* @param {string} s3Key - Ключ в S3
|
||||||
|
* @param {Function} validateItem - Функция валидации (для массива - валидирует каждый элемент, для объекта - весь объект)
|
||||||
|
* @param {Object} options - Опции
|
||||||
|
* @param {boolean} options.singleObject - Если true, ожидает объект вместо массива
|
||||||
*/
|
*/
|
||||||
function createJsonDataPOST(s3Key, validateItem = null) {
|
function createJsonDataPOST(s3Key, validateItem = null, options = {}) {
|
||||||
|
const { singleObject = false } = options;
|
||||||
|
|
||||||
return async (req, res) => {
|
return async (req, res) => {
|
||||||
const { domains: items } = req.body; // Используем 'domains' для обратной совместимости
|
const { domains: items } = req.body; // Используем 'domains' для обратной совместимости
|
||||||
|
|
||||||
|
if (singleObject) {
|
||||||
|
// Для одиночного объекта
|
||||||
|
if (typeof items !== 'object' || items === null || Array.isArray(items)) {
|
||||||
|
return sendError(res, 400, 'Data must be an object', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Валидация объекта целиком
|
||||||
|
if (validateItem) {
|
||||||
|
const error = validateItem(items);
|
||||||
|
if (error) {
|
||||||
|
return sendError(res, 400, error, 'E_SCHEMA');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Для массива
|
||||||
if (!Array.isArray(items)) {
|
if (!Array.isArray(items)) {
|
||||||
return sendError(res, 400, 'Data must be an array', 'E_BAD_REQUEST');
|
return sendError(res, 400, 'Data must be an array', 'E_BAD_REQUEST');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Валидация элементов, если предоставлена
|
// Валидация каждого элемента массива
|
||||||
if (validateItem) {
|
if (validateItem) {
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
const error = validateItem(items[i], i);
|
const error = validateItem(items[i], i);
|
||||||
@@ -66,6 +98,7 @@ function createJsonDataPOST(s3Key, validateItem = null) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const meta = await writeS3JsonObject(s3Key, items);
|
const meta = await writeS3JsonObject(s3Key, items);
|
||||||
@@ -79,11 +112,16 @@ function createJsonDataPOST(s3Key, validateItem = null) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Создать роуты для JSON данных (GET + POST)
|
* Создать роуты для JSON данных (GET + POST)
|
||||||
|
* @param {string} s3Key - Ключ в S3
|
||||||
|
* @param {Function} validateItem - Функция валидации
|
||||||
|
* @param {Object} options - Опции
|
||||||
|
* @param {boolean} options.singleObject - Если true, работает с объектом вместо массива
|
||||||
|
* @param {any} options.defaultValue - Значение по умолчанию
|
||||||
*/
|
*/
|
||||||
function createJsonDataRoutes(s3Key, validateItem = null) {
|
function createJsonDataRoutes(s3Key, validateItem = null, options = {}) {
|
||||||
return {
|
return {
|
||||||
get: createJsonDataGET(s3Key),
|
get: createJsonDataGET(s3Key, options),
|
||||||
post: createJsonDataPOST(s3Key, validateItem)
|
post: createJsonDataPOST(s3Key, validateItem, options)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,330 @@
|
|||||||
|
/**
|
||||||
|
* Роуты для бэкапов конфигурации MikroTik
|
||||||
|
* Хранят сырый текст конфигурации (например, вывод /export) в S3.
|
||||||
|
*
|
||||||
|
* Ключи в S3: backups/mikrotik/{serverId}/{timestamp}-{rand}.rsc
|
||||||
|
*
|
||||||
|
* Задачи:
|
||||||
|
* - создать бэкап (ручной или из планировщика)
|
||||||
|
* - получить список бэкапов для сервера
|
||||||
|
* - прочитать конкретный бэкап
|
||||||
|
* - (опционально) отдать две версии для сравнения и отката
|
||||||
|
*/
|
||||||
|
|
||||||
|
const crypto = require('crypto');
|
||||||
|
const { sendError, sendOk } = require('../middleware/errorHandler');
|
||||||
|
const { writeS3TextObject, readS3TextObject, listS3Objects } = require('../services/s3Service');
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const { createRosClient, fetchExportViaFile } = require('../services/mikrotikApplyService');
|
||||||
|
const { encrypt, decrypt } = require('../utils/encryption');
|
||||||
|
|
||||||
|
const BACKUP_PREFIX = 'backups/mikrotik';
|
||||||
|
const ENCRYPTED_PREFIX = 'ENC:';
|
||||||
|
|
||||||
|
/** Расшифровать содержимое бэкапа (поддерживает старые незашифрованные) */
|
||||||
|
function decryptBackupContent(raw) {
|
||||||
|
if (!raw || typeof raw !== 'string') return '';
|
||||||
|
if (raw.startsWith(ENCRYPTED_PREFIX)) {
|
||||||
|
try {
|
||||||
|
return decrypt(raw.slice(ENCRYPTED_PREFIX.length));
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Backup decryption failed:', e?.message);
|
||||||
|
throw new Error(`Failed to decrypt backup: ${e?.message || 'decryption error'}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return raw;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildBackupKey(serverId, createdAt, suffix) {
|
||||||
|
const safeId = String(serverId || 'unknown').replace(/[^a-zA-Z0-9._-]/g, '_');
|
||||||
|
const ts = createdAt.toISOString().replace(/[:-]/g, '').replace(/\.\d+Z$/, 'Z');
|
||||||
|
const rand = suffix || crypto.randomBytes(3).toString('hex');
|
||||||
|
return `${BACKUP_PREFIX}/${safeId}/${ts}-${rand}.rsc`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Внутренняя утилита: сохранить бэкап в S3.
|
||||||
|
* Используется как HTTP-роутом, так и планировщиком.
|
||||||
|
*/
|
||||||
|
async function saveBackupForServer(serverId, config, { source, comment } = {}) {
|
||||||
|
const now = new Date();
|
||||||
|
const key = buildBackupKey(serverId, now);
|
||||||
|
|
||||||
|
const headerLines = [
|
||||||
|
'# MikroTik configuration backup',
|
||||||
|
`# Server: ${serverId}`,
|
||||||
|
`# CreatedAt: ${now.toISOString()}`,
|
||||||
|
source ? `# Source: ${String(source)}` : null,
|
||||||
|
comment ? `# Comment: ${String(comment).replace(/\r?\n/g, ' ')}` : null,
|
||||||
|
'',
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
let content = `${headerLines.join('\n')}\n${String(config || '').replace(/^\uFEFF/, '')}`;
|
||||||
|
|
||||||
|
// Шифруем содержимое на S3, если задан ENCRYPTION_KEY
|
||||||
|
if (process.env.ENCRYPTION_KEY) {
|
||||||
|
try {
|
||||||
|
content = ENCRYPTED_PREFIX + encrypt(content);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Backup encryption failed:', e?.message);
|
||||||
|
throw new Error(`Failed to encrypt backup: ${e?.message || 'encryption error'}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const meta = await writeS3TextObject(key, content, 'text/plain');
|
||||||
|
return { key, createdAt: now.toISOString(), s3: meta };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/mikrotik/backups
|
||||||
|
* Body: { serverId: string, config: string, source?: string, comment?: string }
|
||||||
|
*
|
||||||
|
* Сохраняет текст конфигурации (обычно вывод /export) в S3.
|
||||||
|
* Автоматический бэкап можно организовать внешним планировщиком, дергающим этот эндпоинт.
|
||||||
|
*/
|
||||||
|
async function createBackup(req, res) {
|
||||||
|
try {
|
||||||
|
const { serverId, config, source, comment } = req.body || {};
|
||||||
|
|
||||||
|
if (!serverId || typeof serverId !== 'string') {
|
||||||
|
return sendError(res, 400, 'serverId is required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
if (!config || typeof config !== 'string') {
|
||||||
|
return sendError(res, 400, 'config (MikroTik export text) is required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { key, createdAt, s3 } = await saveBackupForServer(serverId, config, { source, comment });
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
ok: true,
|
||||||
|
key,
|
||||||
|
serverId,
|
||||||
|
createdAt,
|
||||||
|
s3,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('createBackup error:', error);
|
||||||
|
return sendError(res, 500, error.message || 'Error creating backup', 'E_BACKUP_CREATE');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/mikrotik/backups?serverId=...
|
||||||
|
*
|
||||||
|
* Возвращает список бэкапов для сервера (без содержимого).
|
||||||
|
*/
|
||||||
|
async function listBackups(req, res) {
|
||||||
|
try {
|
||||||
|
const serverId = req.query.serverId;
|
||||||
|
if (!serverId || typeof serverId !== 'string') {
|
||||||
|
return sendError(res, 400, 'serverId is required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
const prefix = `${BACKUP_PREFIX}/${String(serverId).replace(/[^a-zA-Z0-9._-]/g, '_')}/`;
|
||||||
|
const objects = await listS3Objects(prefix, { maxKeys: 200 });
|
||||||
|
|
||||||
|
const items = objects
|
||||||
|
.filter(o => o.key && o.key.startsWith(prefix))
|
||||||
|
.map(o => ({
|
||||||
|
key: o.key,
|
||||||
|
serverId,
|
||||||
|
createdAt: o.lastModified,
|
||||||
|
size: o.size,
|
||||||
|
etag: o.etag,
|
||||||
|
}))
|
||||||
|
.sort((a, b) => String(b.createdAt || '').localeCompare(String(a.createdAt || '')));
|
||||||
|
|
||||||
|
return res.json({ ok: true, items });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('listBackups error:', error);
|
||||||
|
return sendError(res, 500, error.message || 'Error listing backups', 'E_BACKUP_LIST');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/mikrotik/backups/item?key=...
|
||||||
|
*
|
||||||
|
* Возвращает содержимое конкретного бэкапа.
|
||||||
|
*/
|
||||||
|
async function getBackup(req, res) {
|
||||||
|
try {
|
||||||
|
const key = req.query.key;
|
||||||
|
if (!key || typeof key !== 'string') {
|
||||||
|
return sendError(res, 400, 'key is required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
if (!key.startsWith(`${BACKUP_PREFIX}/`)) {
|
||||||
|
return sendError(res, 400, 'Invalid backup key', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await readS3TextObject(key);
|
||||||
|
const config = decryptBackupContent(data.body || '');
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
ok: true,
|
||||||
|
key,
|
||||||
|
config,
|
||||||
|
etag: data.etag,
|
||||||
|
lastModified: data.lastModified,
|
||||||
|
contentLength: data.contentLength,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('getBackup error:', error);
|
||||||
|
return sendError(res, 500, error.message || 'Error reading backup', 'E_BACKUP_READ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/mikrotik/backups/diff
|
||||||
|
* Body: { keyA: string, keyB: string }
|
||||||
|
*
|
||||||
|
* Простой текстовый diff: возвращает оба варианта и флаг same.
|
||||||
|
* Визуальное сравнение (подсветка отличий) можно сделать на frontend.
|
||||||
|
*/
|
||||||
|
async function diffBackups(req, res) {
|
||||||
|
try {
|
||||||
|
const { keyA, keyB } = req.body || {};
|
||||||
|
if (!keyA || !keyB) {
|
||||||
|
return sendError(res, 400, 'keyA and keyB are required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
if (!String(keyA).startsWith(`${BACKUP_PREFIX}/`) || !String(keyB).startsWith(`${BACKUP_PREFIX}/`)) {
|
||||||
|
return sendError(res, 400, 'Invalid backup keys', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
const [a, b] = await Promise.all([
|
||||||
|
readS3TextObject(keyA),
|
||||||
|
readS3TextObject(keyB),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const bodyA = decryptBackupContent(a.body || '');
|
||||||
|
const bodyB = decryptBackupContent(b.body || '');
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
ok: true,
|
||||||
|
same: bodyA === bodyB,
|
||||||
|
a: {
|
||||||
|
key: keyA,
|
||||||
|
etag: a.etag,
|
||||||
|
lastModified: a.lastModified,
|
||||||
|
contentLength: a.contentLength,
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
key: keyB,
|
||||||
|
etag: b.etag,
|
||||||
|
lastModified: b.lastModified,
|
||||||
|
contentLength: b.contentLength,
|
||||||
|
},
|
||||||
|
// Сырые тексты отдаем целиком — UI сам покажет diff
|
||||||
|
configA: bodyA,
|
||||||
|
configB: bodyB,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('diffBackups error:', error);
|
||||||
|
return sendError(res, 500, error.message || 'Error diffing backups', 'E_BACKUP_DIFF');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Вспомогательная функция: получить MikroTik REST-клиент по serverId
|
||||||
|
*/
|
||||||
|
async function getMikrotikClientForServerId(serverId) {
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const server = servers.find((s) => (s.id || s.dns || s.ip) === serverId);
|
||||||
|
if (!server || server.type !== 'jumphost') {
|
||||||
|
const err = new Error('Jumphost server not found');
|
||||||
|
err.code = 'E_NOT_FOUND';
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
const host = server.mikrotikHost || server.ip || server.dns;
|
||||||
|
if (!host) {
|
||||||
|
const err = new Error('MikroTik host is not configured for this server');
|
||||||
|
err.code = 'E_HOST';
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
let password = '';
|
||||||
|
if (server.encryptedMikrotikPassword) {
|
||||||
|
try {
|
||||||
|
password = decrypt(server.encryptedMikrotikPassword);
|
||||||
|
} catch (e) {
|
||||||
|
const err = new Error('Failed to decrypt MikroTik password');
|
||||||
|
err.code = 'E_CREDENTIALS';
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = new Error('MikroTik credentials not configured for this server');
|
||||||
|
err.code = 'E_CREDENTIALS';
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
const port = server.mikrotikPort;
|
||||||
|
const restPort = port === 80 || port === 443 || port === 8443 ? port : 80;
|
||||||
|
const user = server.mikrotikUser || 'admin';
|
||||||
|
const creds = { host, port: restPort, user, password, secure: false };
|
||||||
|
return createRosClient(creds);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/mikrotik/backups/run
|
||||||
|
* Body: { serverId: string }
|
||||||
|
*
|
||||||
|
* Немедленно делает /rest/export compact на указанном MikroTik и сохраняет результат в S3.
|
||||||
|
*/
|
||||||
|
async function runBackupNow(req, res) {
|
||||||
|
try {
|
||||||
|
const { serverId } = req.body || {};
|
||||||
|
if (!serverId || typeof serverId !== 'string') {
|
||||||
|
return sendError(res, 400, 'serverId is required', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
let client;
|
||||||
|
try {
|
||||||
|
client = await getMikrotikClientForServerId(serverId);
|
||||||
|
} catch (e) {
|
||||||
|
if (e.code === 'E_NOT_FOUND') {
|
||||||
|
return sendError(res, 400, e.message, e.code);
|
||||||
|
}
|
||||||
|
if (e.code === 'E_HOST' || e.code === 'E_CREDENTIALS') {
|
||||||
|
return sendError(res, 400, e.message, e.code);
|
||||||
|
}
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API не возвращает текст /export напрямую — экспортируем в файл, читаем, удаляем
|
||||||
|
const config = await fetchExportViaFile(client);
|
||||||
|
if (!config || !config.trim()) {
|
||||||
|
return sendError(res, 502, 'Empty export result from MikroTik', 'E_EMPTY_EXPORT');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { key, createdAt, s3 } = await saveBackupForServer(serverId, config, {
|
||||||
|
source: 'manual',
|
||||||
|
comment: 'Manual backup from UI (/api/mikrotik/backups/run)',
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
ok: true,
|
||||||
|
key,
|
||||||
|
serverId,
|
||||||
|
createdAt,
|
||||||
|
s3,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('runBackupNow error:', error?.message, error?.stack, error?.response?.data);
|
||||||
|
let msg = error?.message || 'Error running backup now';
|
||||||
|
const detail = error?.response?.data;
|
||||||
|
if (detail && typeof detail === 'object') {
|
||||||
|
const d = detail.detail || detail.message;
|
||||||
|
if (d) msg += ` (${d})`;
|
||||||
|
} else if (typeof detail === 'string') {
|
||||||
|
msg += ` (${detail})`;
|
||||||
|
}
|
||||||
|
return sendError(res, 500, msg, 'E_BACKUP_RUN', process.env.NODE_ENV !== 'production' ? { stack: error?.stack } : undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
createBackup,
|
||||||
|
listBackups,
|
||||||
|
getBackup,
|
||||||
|
diffBackups,
|
||||||
|
saveBackupForServer,
|
||||||
|
runBackupNow,
|
||||||
|
};
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -2,7 +2,7 @@
|
|||||||
* Разные утилитарные роуты (auto-urls, history, s3 meta, availability, etc.)
|
* Разные утилитарные роуты (auto-urls, history, s3 meta, availability, etc.)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const { s3, BUCKET_NAME, writeS3TextObject, headMeta, streamToString } = require('../services/s3Service');
|
const { s3, BUCKET_NAME, writeS3TextObject, writeS3JsonObject, readS3TextObject, headMeta, streamToString } = require('../services/s3Service');
|
||||||
const { sendError, sendOk } = require('../middleware/errorHandler');
|
const { sendError, sendOk } = require('../middleware/errorHandler');
|
||||||
const { resourceToKey, toIso } = require('../utils/helpers');
|
const { resourceToKey, toIso } = require('../utils/helpers');
|
||||||
const { GetObjectCommand, PutObjectCommand, ListObjectVersionsCommand, CopyObjectCommand } = require('@aws-sdk/client-s3');
|
const { GetObjectCommand, PutObjectCommand, ListObjectVersionsCommand, CopyObjectCommand } = require('@aws-sdk/client-s3');
|
||||||
@@ -309,6 +309,255 @@ function tcpCheck(host, port, timeoutMs) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Измерить RTT (мс) до host:port по TCP. Возвращает число мс или null при ошибке/таймауте. */
|
||||||
|
function measureTcpRtt(host, port = 443, timeoutMs = 6000) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const start = Date.now();
|
||||||
|
const socket = new net.Socket();
|
||||||
|
let settled = false;
|
||||||
|
const settle = (ms) => {
|
||||||
|
if (!settled) {
|
||||||
|
settled = true;
|
||||||
|
try { socket.destroy(); } catch (_) {}
|
||||||
|
resolve(ms);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
socket.setTimeout(timeoutMs, () => settle(null));
|
||||||
|
socket.once('error', () => settle(null));
|
||||||
|
socket.connect(port, host, () => {
|
||||||
|
const ms = Math.round(Date.now() - start);
|
||||||
|
settle(ms);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Список целей для пинга по умолчанию (id, name, host, port, icon, color) */
|
||||||
|
const PING_SERVICES_DEFAULT = [
|
||||||
|
{ id: 'google', name: 'Google', host: '8.8.8.8', port: 443, icon: 'IconBrandGoogle', color: 'blue' },
|
||||||
|
{ id: 'cloudflare', name: 'Cloudflare', host: '1.1.1.1', port: 443, icon: 'IconBrandCloudflare', color: 'orange' },
|
||||||
|
{ id: 'yandex', name: 'Yandex', host: 'ya.ru', port: 443, icon: 'IconBrandYandex', color: 'red' },
|
||||||
|
{ id: 'instagram', name: 'Instagram', host: 'instagram.com', port: 443, icon: 'IconBrandInstagram', color: 'pink' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function getPingServicesListFromSettings(uiSettings) {
|
||||||
|
const raw = uiSettings.pingServicesList;
|
||||||
|
if (Array.isArray(raw) && raw.length > 0) {
|
||||||
|
return raw.map((s) => ({
|
||||||
|
id: String(s?.id ?? '').trim() || `svc-${Math.random().toString(36).slice(2, 9)}`,
|
||||||
|
name: String(s?.name ?? '').trim() || 'Сервис',
|
||||||
|
host: String(s?.host ?? '').trim() || '0.0.0.0',
|
||||||
|
port: Math.max(1, parseInt(s?.port, 10) || 443),
|
||||||
|
icon: typeof s?.icon === 'string' ? s.icon : 'IconWorld',
|
||||||
|
color: typeof s?.color === 'string' ? s.color : 'primary',
|
||||||
|
})).filter((s) => s.host !== '0.0.0.0');
|
||||||
|
}
|
||||||
|
return PING_SERVICES_DEFAULT;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Загрузить UI-настройки из S3 (для pingServicesSource и др.) */
|
||||||
|
async function loadUiSettingsSync() {
|
||||||
|
try {
|
||||||
|
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: 'bgp_data/rt_ui_settings.json' }));
|
||||||
|
const jsonText = await streamToString(data.Body);
|
||||||
|
const parsed = JSON.parse(jsonText || '{}');
|
||||||
|
return parsed && typeof parsed === 'object' ? parsed : {};
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const PING_SERVICES_CACHE_KEY_PREFIX = 'ping-services/cache_';
|
||||||
|
const PING_SERVICES_HISTORY_KEY_PREFIX = 'ping-services/history_';
|
||||||
|
const PING_HISTORY_MAX = 30;
|
||||||
|
|
||||||
|
function pingServicesStorageSuffix(viaRouter, serverId, gatewayIp) {
|
||||||
|
return (viaRouter ? 'router' : 'web') + '_' + String(serverId || '').replace(/[^a-zA-Z0-9.-]/g, '_') + '_' + String(gatewayIp || '').replace(/[^a-zA-Z0-9.]/g, '_');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Прочитать историю замеров пингов из S3. Формат: { byId: { [serviceId]: number[] } }.
|
||||||
|
*/
|
||||||
|
async function readPingServicesHistory(suffix) {
|
||||||
|
const key = PING_SERVICES_HISTORY_KEY_PREFIX + suffix;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(key).catch(() => null);
|
||||||
|
if (!raw?.body) return {};
|
||||||
|
const parsed = JSON.parse(raw.body);
|
||||||
|
return parsed?.byId && typeof parsed.byId === 'object' ? parsed.byId : {};
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Записать историю замеров пингов в S3.
|
||||||
|
*/
|
||||||
|
async function writePingServicesHistory(suffix, byId) {
|
||||||
|
const key = PING_SERVICES_HISTORY_KEY_PREFIX + suffix;
|
||||||
|
await writeS3JsonObject(key, { byId }).catch((err) => console.warn('[ping-services] history write failed:', err?.message));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Обновить кеш пинг-сервисов: выполнить пинги по списку из настроек и записать результат в S3.
|
||||||
|
* Используется планировщиком и при промахе кеша в getPingServices.
|
||||||
|
* @returns {Promise<Record<string, { id: string, name: string, host: string, ms: number|null }>>} byId
|
||||||
|
*/
|
||||||
|
async function refreshPingServicesCache() {
|
||||||
|
const uiSettings = await loadUiSettingsSync();
|
||||||
|
const servicesList = getPingServicesListFromSettings(uiSettings);
|
||||||
|
const fallbackPayload = {};
|
||||||
|
servicesList.forEach((s) => { fallbackPayload[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
|
||||||
|
|
||||||
|
const viaRouter = String(uiSettings.pingServicesSource || 'web').toLowerCase() === 'router';
|
||||||
|
const cacheSeconds = Math.max(0, parseInt(uiSettings.pingServicesCacheSeconds, 10) || 0);
|
||||||
|
|
||||||
|
let serverId = null;
|
||||||
|
let gatewayIp = null;
|
||||||
|
if (viaRouter) {
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const routerServers = servers.filter(
|
||||||
|
(s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
serverId = (uiSettings.pingServicesServerId && String(uiSettings.pingServicesServerId).trim()) || (routerServers[0] && (routerServers[0].id || routerServers[0].dns || routerServers[0].ip));
|
||||||
|
gatewayIp = (uiSettings.pingServicesGatewayIp && String(uiSettings.pingServicesGatewayIp).trim()) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const suffix = pingServicesStorageSuffix(viaRouter, serverId, gatewayIp);
|
||||||
|
const cacheKey = cacheSeconds > 0 ? PING_SERVICES_CACHE_KEY_PREFIX + suffix : null;
|
||||||
|
|
||||||
|
if (viaRouter) {
|
||||||
|
const { runPingViaRouter } = require('./mikrotikConfigRoutes');
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const routerServers = servers.filter(
|
||||||
|
(s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
let gatewayIpResolved = gatewayIp;
|
||||||
|
if (!gatewayIpResolved && serverId && routerServers.length > 0) {
|
||||||
|
const server = routerServers.find((s) => (s.id || s.dns || s.ip) === serverId) || routerServers[0];
|
||||||
|
const gateways = Array.isArray(server.gateways) ? server.gateways : [];
|
||||||
|
const primary = gateways.find((g) => g && g.primary) || gateways[0];
|
||||||
|
gatewayIpResolved = primary && (primary.ip || primary.remoteIp) ? (primary.ip || primary.remoteIp) : null;
|
||||||
|
}
|
||||||
|
if (!serverId) {
|
||||||
|
console.warn('[ping-services] router mode: no serverId (no jumphost/home in settings or in servers list)');
|
||||||
|
return fallbackPayload;
|
||||||
|
}
|
||||||
|
const results = await Promise.all(
|
||||||
|
servicesList.map(async (svc) => {
|
||||||
|
try {
|
||||||
|
const result = await runPingViaRouter(serverId, gatewayIpResolved || null, svc.host, 3);
|
||||||
|
const ms = typeof result.avgMs === 'number' ? Math.round(result.avgMs) : null;
|
||||||
|
return { id: svc.id, name: svc.name, host: svc.host, ms };
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('[ping-services] runPingViaRouter failed for', svc.host, err?.message || err);
|
||||||
|
return { id: svc.id, name: svc.name, host: svc.host, ms: null };
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const byId = {};
|
||||||
|
results.forEach((r) => { byId[r.id] = r; });
|
||||||
|
if (cacheKey) {
|
||||||
|
writeS3JsonObject(cacheKey, { byId, cachedAt: Date.now() }).catch((err) => console.warn('[ping-services] cache write failed:', err?.message));
|
||||||
|
}
|
||||||
|
const history = await readPingServicesHistory(suffix);
|
||||||
|
Object.keys(byId).forEach((id) => {
|
||||||
|
const ms = byId[id]?.ms;
|
||||||
|
if (typeof ms !== 'number') return;
|
||||||
|
const list = Array.isArray(history[id]) ? history[id] : [];
|
||||||
|
history[id] = [...list, ms].slice(-PING_HISTORY_MAX);
|
||||||
|
});
|
||||||
|
await writePingServicesHistory(suffix, history);
|
||||||
|
return byId;
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = await Promise.all(
|
||||||
|
servicesList.map(async (svc) => {
|
||||||
|
const ms = await measureTcpRtt(svc.host, svc.port, 6000);
|
||||||
|
return { id: svc.id, name: svc.name, host: svc.host, ms };
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const byId = {};
|
||||||
|
results.forEach((r) => { byId[r.id] = r; });
|
||||||
|
if (cacheKey) {
|
||||||
|
writeS3JsonObject(cacheKey, { byId, cachedAt: Date.now() }).catch((err) => console.warn('[ping-services] cache write failed:', err?.message));
|
||||||
|
}
|
||||||
|
const history = await readPingServicesHistory(suffix);
|
||||||
|
Object.keys(byId).forEach((id) => {
|
||||||
|
const ms = byId[id]?.ms;
|
||||||
|
if (typeof ms !== 'number') return;
|
||||||
|
const list = Array.isArray(history[id]) ? history[id] : [];
|
||||||
|
history[id] = [...list, ms].slice(-PING_HISTORY_MAX);
|
||||||
|
});
|
||||||
|
await writePingServicesHistory(suffix, history);
|
||||||
|
return byId;
|
||||||
|
}
|
||||||
|
|
||||||
|
// GET /api/ping-services-list — список сервисов для пинга из настроек (для дашборда и редактора)
|
||||||
|
async function getPingServicesList(req, res) {
|
||||||
|
try {
|
||||||
|
const uiSettings = await loadUiSettingsSync();
|
||||||
|
const list = getPingServicesListFromSettings(uiSettings);
|
||||||
|
return res.json({ list });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('ping-services-list error', e);
|
||||||
|
return res.json({ list: PING_SERVICES_DEFAULT });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// GET /api/ping-services — RTT до сервисов из списка (веб или через RouterOS по настройке)
|
||||||
|
async function getPingServices(req, res) {
|
||||||
|
try {
|
||||||
|
const uiSettings = await loadUiSettingsSync();
|
||||||
|
const servicesList = getPingServicesListFromSettings(uiSettings);
|
||||||
|
const fallbackPayload = {};
|
||||||
|
servicesList.forEach((s) => { fallbackPayload[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
|
||||||
|
|
||||||
|
const viaRouter = String(uiSettings.pingServicesSource || 'web').toLowerCase() === 'router';
|
||||||
|
const cacheSeconds = Math.max(0, parseInt(uiSettings.pingServicesCacheSeconds, 10) || 0);
|
||||||
|
|
||||||
|
let serverId = null;
|
||||||
|
let gatewayIp = null;
|
||||||
|
if (viaRouter) {
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const routerServers = servers.filter(
|
||||||
|
(s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
serverId = (uiSettings.pingServicesServerId && String(uiSettings.pingServicesServerId).trim()) || (routerServers[0] && (routerServers[0].id || routerServers[0].dns || routerServers[0].ip));
|
||||||
|
gatewayIp = (uiSettings.pingServicesGatewayIp && String(uiSettings.pingServicesGatewayIp).trim()) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const suffix = pingServicesStorageSuffix(viaRouter, serverId, gatewayIp);
|
||||||
|
const cacheKey = cacheSeconds > 0 ? PING_SERVICES_CACHE_KEY_PREFIX + suffix : null;
|
||||||
|
const skipCache = ['1', 'true', 'yes'].includes(String(req.query?.refresh || req.query?.nocache || '').toLowerCase());
|
||||||
|
if (cacheKey && !skipCache) {
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(cacheKey).catch(() => null);
|
||||||
|
if (raw?.body) {
|
||||||
|
const cached = JSON.parse(raw.body);
|
||||||
|
const cachedAt = typeof cached.cachedAt === 'number' ? cached.cachedAt : 0;
|
||||||
|
const ttlMs = cacheSeconds * 1000;
|
||||||
|
if (cachedAt && Date.now() - cachedAt < ttlMs && cached.byId && typeof cached.byId === 'object') {
|
||||||
|
const history = await readPingServicesHistory(suffix);
|
||||||
|
return res.json({ byId: cached.byId, history });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (_) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const byId = await refreshPingServicesCache();
|
||||||
|
const history = await readPingServicesHistory(suffix);
|
||||||
|
return res.json({ byId, history });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('ping-services error', e);
|
||||||
|
const fallback = {};
|
||||||
|
PING_SERVICES_DEFAULT.forEach((s) => { fallback[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
|
||||||
|
res.status(500).json({ byId: fallback, history: {} });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function anyTrue(promises) {
|
function anyTrue(promises) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
if (!Array.isArray(promises) || promises.length === 0) return resolve(false);
|
if (!Array.isArray(promises) || promises.length === 0) return resolve(false);
|
||||||
@@ -524,5 +773,8 @@ module.exports = {
|
|||||||
getWsUrl,
|
getWsUrl,
|
||||||
getUiSettings,
|
getUiSettings,
|
||||||
postUiSettings,
|
postUiSettings,
|
||||||
|
getPingServicesList,
|
||||||
|
getPingServices,
|
||||||
|
refreshPingServicesCache,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,149 @@
|
|||||||
|
/**
|
||||||
|
* Роуты для сбора статистики ресурсов (RAM, CPU, HDD) с MikroTik RouterOS.
|
||||||
|
* GET /api/resources/stats — system/resource по каждому jumphost/home с учётами MikroTik.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { sendError } = require('../middleware/errorHandler');
|
||||||
|
const { decrypt } = require('../utils/encryption');
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const { createRosClient } = require('../services/mikrotikApplyService');
|
||||||
|
|
||||||
|
function getMikrotikCredentials(server) {
|
||||||
|
if (!server || (server.type !== 'jumphost' && server.type !== 'home')) return null;
|
||||||
|
const host = server.mikrotikHost || server.ip || server.dns;
|
||||||
|
if (!host) return null;
|
||||||
|
const port = server.mikrotikPort;
|
||||||
|
const restPort = (port === 80 || port === 443 || port === 8443) ? port : 80;
|
||||||
|
const user = server.mikrotikUser || 'admin';
|
||||||
|
let password = '';
|
||||||
|
if (server.encryptedMikrotikPassword) {
|
||||||
|
try {
|
||||||
|
password = decrypt(server.encryptedMikrotikPassword);
|
||||||
|
} catch (_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { host, port: restPort, user, password, secure: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Парсинг system/resource в нормализованный объект для UI.
|
||||||
|
* MikroTik REST возвращает: total-memory, free-memory (bytes), cpu-load (%),
|
||||||
|
* total-hdd-space, free-hdd-space (bytes), uptime, version, board-name и др.
|
||||||
|
*/
|
||||||
|
function parseResource(raw) {
|
||||||
|
if (!raw || typeof raw !== 'object') return null;
|
||||||
|
const num = (v) => (v != null && v !== '' ? parseInt(String(v), 10) : null);
|
||||||
|
const totalMemory = num(raw['total-memory']);
|
||||||
|
const freeMemory = num(raw['free-memory']);
|
||||||
|
const usedMemory = totalMemory != null && freeMemory != null ? totalMemory - freeMemory : null;
|
||||||
|
const totalHdd = num(raw['total-hdd-space']);
|
||||||
|
const freeHdd = num(raw['free-hdd-space']);
|
||||||
|
const usedHdd = totalHdd != null && freeHdd != null ? totalHdd - freeHdd : null;
|
||||||
|
const cpuLoad = raw['cpu-load'] != null ? parseFloat(String(raw['cpu-load'])) : null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
// RAM (bytes и проценты)
|
||||||
|
totalMemory: totalMemory,
|
||||||
|
freeMemory: freeMemory,
|
||||||
|
usedMemory: usedMemory,
|
||||||
|
memoryUsagePercent:
|
||||||
|
totalMemory != null && totalMemory > 0 && usedMemory != null
|
||||||
|
? Math.round((usedMemory / totalMemory) * 100)
|
||||||
|
: null,
|
||||||
|
// CPU (%)
|
||||||
|
cpuLoad: cpuLoad != null ? Math.round(cpuLoad) : null,
|
||||||
|
cpuCount: num(raw['cpu-count']) ?? null,
|
||||||
|
cpuFrequency: raw['cpu-frequency'] != null ? String(raw['cpu-frequency']) : null,
|
||||||
|
cpu: raw.cpu != null ? String(raw.cpu) : null,
|
||||||
|
// HDD (bytes и проценты)
|
||||||
|
totalHddSpace: totalHdd,
|
||||||
|
freeHddSpace: freeHdd,
|
||||||
|
usedHddSpace: usedHdd,
|
||||||
|
hddUsagePercent:
|
||||||
|
totalHdd != null && totalHdd > 0 && usedHdd != null
|
||||||
|
? Math.round((usedHdd / totalHdd) * 100)
|
||||||
|
: null,
|
||||||
|
// прочее
|
||||||
|
uptime: raw.uptime != null ? String(raw.uptime) : null,
|
||||||
|
version: raw.version != null ? String(raw.version) : null,
|
||||||
|
boardName: raw['board-name'] != null ? String(raw['board-name']) : null,
|
||||||
|
architectureName: raw['architecture-name'] != null ? String(raw['architecture-name']) : null,
|
||||||
|
platform: raw.platform != null ? String(raw.platform) : null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/resources/stats
|
||||||
|
* По каждому jumphost/home с MikroTik — запрос system/resource, ответ с группировкой по роутерам.
|
||||||
|
*/
|
||||||
|
async function getResourceStats(req, res) {
|
||||||
|
try {
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const routers = (Array.isArray(servers) ? servers : []).filter(
|
||||||
|
(s) =>
|
||||||
|
s &&
|
||||||
|
(String(s.type || '').toLowerCase() === 'jumphost' ||
|
||||||
|
String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
|
||||||
|
const results = await Promise.all(
|
||||||
|
routers.map(async (server) => {
|
||||||
|
const serverId = server.id || server.dns || server.ip;
|
||||||
|
const name = server.name || server.dns || server.ip || serverId;
|
||||||
|
const host = server.mikrotikHost || server.ip || server.dns;
|
||||||
|
|
||||||
|
const creds = getMikrotikCredentials(server);
|
||||||
|
if (!creds) {
|
||||||
|
return {
|
||||||
|
serverId,
|
||||||
|
name,
|
||||||
|
host,
|
||||||
|
groupKey: server.groupKey || null,
|
||||||
|
error: 'MikroTik API не настроен или нет пароля',
|
||||||
|
resource: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const client = createRosClient(creds);
|
||||||
|
const apiRes = await client.print('system/resource');
|
||||||
|
const raw = apiRes?.data;
|
||||||
|
const single = Array.isArray(raw) ? raw[0] : raw;
|
||||||
|
const resource = parseResource(single);
|
||||||
|
return {
|
||||||
|
serverId,
|
||||||
|
name,
|
||||||
|
host,
|
||||||
|
groupKey: server.groupKey || null,
|
||||||
|
error: null,
|
||||||
|
resource,
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err.response?.data?.message || err.message || 'Ошибка запроса к RouterOS';
|
||||||
|
return {
|
||||||
|
serverId,
|
||||||
|
name,
|
||||||
|
host,
|
||||||
|
groupKey: server.groupKey || null,
|
||||||
|
error: msg,
|
||||||
|
resource: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return res.json({ routers: results });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('getResourceStats:', error);
|
||||||
|
return sendError(
|
||||||
|
res,
|
||||||
|
500,
|
||||||
|
error.message || 'Ошибка сбора статистики ресурсов',
|
||||||
|
'E_RESOURCE_STATS'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getResourceStats,
|
||||||
|
};
|
||||||
@@ -0,0 +1,259 @@
|
|||||||
|
/**
|
||||||
|
* Роуты планировщика карты сети: настройки, логи, ручной запуск, кеш.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { sendError, sendOk } = require('../middleware/errorHandler');
|
||||||
|
const { readS3TextObject, writeS3JsonObject } = require('../services/s3Service');
|
||||||
|
const networkMapScheduler = require('../services/networkMapScheduler');
|
||||||
|
const pingServicesScheduler = require('../services/pingServicesScheduler');
|
||||||
|
const uptimeMonitorScheduler = require('../services/uptimeMonitorScheduler');
|
||||||
|
|
||||||
|
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||||
|
const NETWORK_MAP_CACHE_KEY = 'network-map-cache/latest.json';
|
||||||
|
|
||||||
|
const SCHEDULER_KEYS = [
|
||||||
|
'networkMapSchedulerEnabled',
|
||||||
|
'networkMapSchedulerIntervalMinutes',
|
||||||
|
'networkMapSchedulerRunPing',
|
||||||
|
'networkMapSchedulerRunSpeedTest',
|
||||||
|
'networkMapSchedulerLogMaxLines',
|
||||||
|
];
|
||||||
|
|
||||||
|
const PING_SERVICES_SCHEDULER_KEYS = [
|
||||||
|
'pingServicesSchedulerEnabled',
|
||||||
|
'pingServicesSchedulerIntervalMinutes',
|
||||||
|
];
|
||||||
|
|
||||||
|
const UPTIME_MONITOR_SCHEDULER_KEYS = [
|
||||||
|
'uptimeMonitorSchedulerEnabled',
|
||||||
|
'uptimeMonitorSchedulerIntervalMinutes',
|
||||||
|
];
|
||||||
|
|
||||||
|
async function readUiSettings() {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
const parsed = JSON.parse(data?.body || '{}');
|
||||||
|
return parsed && typeof parsed === 'object' ? parsed : {};
|
||||||
|
} catch (_) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET /api/scheduler/network-map/settings */
|
||||||
|
async function getNetworkMapSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const ui = await readUiSettings();
|
||||||
|
const settings = networkMapScheduler.getSettingsFromUiSettings(ui);
|
||||||
|
const nextRunAt = networkMapScheduler.getNextRunAt(settings);
|
||||||
|
return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] getSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** PATCH /api/scheduler/network-map/settings - обновить только ключи планировщика в ui-settings */
|
||||||
|
async function patchNetworkMapSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const body = req.body || {};
|
||||||
|
const current = await readUiSettings();
|
||||||
|
for (const key of SCHEDULER_KEYS) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(body, key)) {
|
||||||
|
current[key] = body[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (Object.prototype.hasOwnProperty.call(body, 'networkMapSchedulerLogMaxLines')) {
|
||||||
|
networkMapScheduler.setLogMaxLines(body.networkMapSchedulerLogMaxLines);
|
||||||
|
}
|
||||||
|
await writeS3JsonObject(UI_SETTINGS_KEY, current);
|
||||||
|
const settings = networkMapScheduler.getSettingsFromUiSettings(current);
|
||||||
|
return res.json(settings);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] patchSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET /api/scheduler/network-map/logs */
|
||||||
|
async function getNetworkMapSchedulerLogs(req, res) {
|
||||||
|
try {
|
||||||
|
const lines = networkMapScheduler.getLogs();
|
||||||
|
return res.json({ lines });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] getLogs', e);
|
||||||
|
return sendError(res, 500, 'Не удалось прочитать логи', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** POST /api/scheduler/network-map/run-now - один запуск по текущим настройкам */
|
||||||
|
async function runNetworkMapSchedulerNow(req, res) {
|
||||||
|
try {
|
||||||
|
const port = Number(process.env.PORT) || 3001;
|
||||||
|
const baseUrl = `http://127.0.0.1:${port}`;
|
||||||
|
const ui = await readUiSettings();
|
||||||
|
const settings = networkMapScheduler.getSettingsFromUiSettings(ui);
|
||||||
|
|
||||||
|
networkMapScheduler.runJob({
|
||||||
|
baseUrl,
|
||||||
|
runPing: settings.runPing,
|
||||||
|
runSpeedTest: settings.runSpeedTest,
|
||||||
|
trigger: 'manual',
|
||||||
|
}).catch((err) => {
|
||||||
|
console.error('[scheduler] run-now failed', err);
|
||||||
|
const msg = err?.message || String(err);
|
||||||
|
try {
|
||||||
|
networkMapScheduler.pushLog(`Ошибка выполнения: ${msg}`);
|
||||||
|
} catch (_) {}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({ ok: true, message: 'Запуск выполняется в фоне' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] run-now', e);
|
||||||
|
const msg = e?.message || String(e);
|
||||||
|
try {
|
||||||
|
networkMapScheduler.pushLog(`Ошибка запуска: ${msg}`);
|
||||||
|
} catch (_) {}
|
||||||
|
return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET /api/network-map-cache - кеш пингов и скоростей для карты сети */
|
||||||
|
async function getNetworkMapCache(req, res) {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(NETWORK_MAP_CACHE_KEY).catch(() => null);
|
||||||
|
if (!data?.body) {
|
||||||
|
return res.json({ pingMap: {}, speedMap: {}, updatedAt: null });
|
||||||
|
}
|
||||||
|
const parsed = JSON.parse(data.body);
|
||||||
|
return res.json({
|
||||||
|
pingMap: parsed.pingMap && typeof parsed.pingMap === 'object' ? parsed.pingMap : {},
|
||||||
|
speedMap: parsed.speedMap && typeof parsed.speedMap === 'object' ? parsed.speedMap : {},
|
||||||
|
updatedAt: typeof parsed.updatedAt === 'number' ? parsed.updatedAt : null,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[network-map-cache] get', e);
|
||||||
|
return res.json({ pingMap: {}, speedMap: {}, updatedAt: null });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Ping services scheduler ===
|
||||||
|
|
||||||
|
/** GET /api/scheduler/ping-services/settings */
|
||||||
|
async function getPingServicesSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const ui = await readUiSettings();
|
||||||
|
const settings = pingServicesScheduler.getSettingsFromUiSettings(ui);
|
||||||
|
const nextRunAt = pingServicesScheduler.getNextRunAt(settings);
|
||||||
|
return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] getPingServicesSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** PATCH /api/scheduler/ping-services/settings */
|
||||||
|
async function patchPingServicesSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const body = req.body || {};
|
||||||
|
const current = await readUiSettings();
|
||||||
|
for (const key of PING_SERVICES_SCHEDULER_KEYS) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(body, key)) {
|
||||||
|
current[key] = body[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await writeS3JsonObject(UI_SETTINGS_KEY, current);
|
||||||
|
const settings = pingServicesScheduler.getSettingsFromUiSettings(current);
|
||||||
|
return res.json(settings);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] patchPingServicesSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** POST /api/scheduler/ping-services/run-now */
|
||||||
|
async function runPingServicesSchedulerNow(req, res) {
|
||||||
|
try {
|
||||||
|
const { refreshPingServicesCache } = require('./miscRoutes');
|
||||||
|
refreshPingServicesCache().catch((err) => {
|
||||||
|
console.error('[scheduler] ping-services run-now failed', err);
|
||||||
|
});
|
||||||
|
return res.json({ ok: true, message: 'Обновление кеша пинг-сервисов запущено в фоне' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] ping-services run-now', e);
|
||||||
|
return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Uptime monitor scheduler ===
|
||||||
|
|
||||||
|
/** GET /api/scheduler/uptime-monitor/settings */
|
||||||
|
async function getUptimeMonitorSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const ui = await readUiSettings();
|
||||||
|
const settings = uptimeMonitorScheduler.getSettingsFromUiSettings(ui);
|
||||||
|
const nextRunAt = uptimeMonitorScheduler.getNextRunAt(settings);
|
||||||
|
return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] getUptimeMonitorSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** PATCH /api/scheduler/uptime-monitor/settings */
|
||||||
|
async function patchUptimeMonitorSchedulerSettings(req, res) {
|
||||||
|
try {
|
||||||
|
const body = req.body || {};
|
||||||
|
const current = await readUiSettings();
|
||||||
|
for (const key of UPTIME_MONITOR_SCHEDULER_KEYS) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(body, key)) {
|
||||||
|
current[key] = body[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await writeS3JsonObject(UI_SETTINGS_KEY, current);
|
||||||
|
const settings = uptimeMonitorScheduler.getSettingsFromUiSettings(current);
|
||||||
|
return res.json(settings);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] patchUptimeMonitorSettings', e);
|
||||||
|
return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** POST /api/scheduler/uptime-monitor/run-now */
|
||||||
|
async function runUptimeMonitorSchedulerNow(req, res) {
|
||||||
|
try {
|
||||||
|
const port = Number(process.env.PORT) || 3001;
|
||||||
|
const baseUrl = `http://127.0.0.1:${port}`;
|
||||||
|
const resServers = await fetch(`${baseUrl}/api/servers`).catch(() => null);
|
||||||
|
const data = resServers?.ok ? await resServers.json() : [];
|
||||||
|
const servers = Array.isArray(data) ? data : [];
|
||||||
|
const jumphosts = servers.filter(
|
||||||
|
(s) => s && ['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
|
||||||
|
);
|
||||||
|
const serverIds = jumphosts.map((s) => s.id || s.dns || s.ip).filter(Boolean);
|
||||||
|
for (const serverId of serverIds) {
|
||||||
|
fetch(`${baseUrl}/api/uptime/check`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ serverId }),
|
||||||
|
}).catch((err) => console.warn('[scheduler] uptime check', serverId, err?.message));
|
||||||
|
}
|
||||||
|
return res.json({ ok: true, message: 'Проверки Uptime Monitor запущены в фоне' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[scheduler] uptime-monitor run-now', e);
|
||||||
|
return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getNetworkMapSchedulerSettings,
|
||||||
|
patchNetworkMapSchedulerSettings,
|
||||||
|
getNetworkMapSchedulerLogs,
|
||||||
|
runNetworkMapSchedulerNow,
|
||||||
|
getNetworkMapCache,
|
||||||
|
getPingServicesSchedulerSettings,
|
||||||
|
patchPingServicesSchedulerSettings,
|
||||||
|
runPingServicesSchedulerNow,
|
||||||
|
getUptimeMonitorSchedulerSettings,
|
||||||
|
patchUptimeMonitorSchedulerSettings,
|
||||||
|
runUptimeMonitorSchedulerNow,
|
||||||
|
};
|
||||||
@@ -1,28 +1,32 @@
|
|||||||
/**
|
/**
|
||||||
* Роуты для управления конфигурациями серверов
|
* Роуты для управления конфигурациями серверов
|
||||||
|
*
|
||||||
|
* ВАЖНО: /api/server-configs возвращает только jumphost серверы из servers.json
|
||||||
|
* Это нужно для EasySwitch, который работает только с jumphost серверами
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const { s3, BUCKET_NAME, writeS3TextObject, deleteS3Object, headMeta } = require('../services/s3Service');
|
const { s3, BUCKET_NAME, writeS3TextObject, deleteS3Object, headMeta, writeS3JsonObject } = require('../services/s3Service');
|
||||||
const { sendError, sendOk } = require('../middleware/errorHandler');
|
const { sendError, sendOk, checkIfNoneMatch } = require('../middleware/errorHandler');
|
||||||
const { GetObjectCommand, DeleteObjectCommand } = require('@aws-sdk/client-s3');
|
const { GetObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
|
||||||
const { streamToString } = require('../services/s3Service');
|
const { streamToString } = require('../services/s3Service');
|
||||||
const { createJsonDataRoutes } = require('./jsonDataRoutes');
|
|
||||||
const { getS3TextWithHeaders, getS3JsonWithHeaders } = require('../utils/s3Helpers');
|
const { getS3TextWithHeaders, getS3JsonWithHeaders } = require('../utils/s3Helpers');
|
||||||
|
const { isValidServerId } = require('../lib/validators');
|
||||||
|
|
||||||
// GET /api/server-configs (список серверов)
|
const S3_KEY = 'servers.json';
|
||||||
const serverConfigsListRoutes = createJsonDataRoutes('server-configs.json', (server, i) => {
|
|
||||||
if (!server.id || !server.name) {
|
// Валидация jumphost сервера
|
||||||
return `Server at index ${i} is missing required fields`;
|
function validateJumphostServer(server, i) {
|
||||||
|
if (!server.ip || !server.dns || !server.country || !server.provider || !server.tunnel) {
|
||||||
|
return `Server at index ${i} is missing required fields (ip, dns, country, provider, tunnel)`;
|
||||||
}
|
}
|
||||||
if (server.gateways !== undefined) {
|
if (String(server.type || '').toLowerCase() !== 'jumphost') {
|
||||||
if (!Array.isArray(server.gateways)) {
|
return `Server at index ${i} must have type 'jumphost'`;
|
||||||
return `Server at index ${i} has invalid gateways (must be array)`;
|
|
||||||
}
|
}
|
||||||
if (server.gateways.length === 0) {
|
if (!Array.isArray(server.gateways) || server.gateways.length === 0) {
|
||||||
return `Server at index ${i} must have at least one gateway`;
|
return `Server at index ${i} must have at least one gateway`;
|
||||||
}
|
}
|
||||||
const defaults = server.gateways.filter(g => g && g.primary);
|
const primaries = server.gateways.filter(g => g && g.primary);
|
||||||
if (defaults.length !== 1) {
|
if (primaries.length !== 1) {
|
||||||
return `Server at index ${i} must have exactly one primary gateway`;
|
return `Server at index ${i} must have exactly one primary gateway`;
|
||||||
}
|
}
|
||||||
for (let j = 0; j < server.gateways.length; j++) {
|
for (let j = 0; j < server.gateways.length; j++) {
|
||||||
@@ -31,13 +35,128 @@ const serverConfigsListRoutes = createJsonDataRoutes('server-configs.json', (ser
|
|||||||
return `Server at index ${i} gateway at index ${j} is missing name`;
|
return `Server at index ${i} gateway at index ${j} is missing name`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
});
|
}
|
||||||
|
|
||||||
|
// GET /api/server-configs (список только jumphost серверов)
|
||||||
|
async function getServerConfigsList(req, res) {
|
||||||
|
try {
|
||||||
|
const head = await s3.send(new HeadObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY })).catch(() => null);
|
||||||
|
const etag = head?.ETag || null;
|
||||||
|
if (etag) res.set('ETag', String(etag));
|
||||||
|
if (head?.LastModified) res.set('Last-Modified', new Date(head.LastModified).toUTCString());
|
||||||
|
if (typeof head?.ContentLength === 'number') res.set('Content-Length-Source', String(head.ContentLength));
|
||||||
|
if (checkIfNoneMatch(req, res, etag)) return;
|
||||||
|
|
||||||
|
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY }));
|
||||||
|
const fileContent = await streamToString(data.Body);
|
||||||
|
let allServers = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
allServers = JSON.parse(fileContent);
|
||||||
|
if (!Array.isArray(allServers)) {
|
||||||
|
allServers = [];
|
||||||
|
}
|
||||||
|
} catch (parseError) {
|
||||||
|
console.error(`Error parsing ${S3_KEY}:`, parseError);
|
||||||
|
allServers = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Фильтруем только jumphost серверы и добавляем id/name для совместимости с фронтендом
|
||||||
|
// Fallback: если type не указан, но есть gateways - считаем jumphost (обратная совместимость)
|
||||||
|
const jumphostServers = allServers
|
||||||
|
.filter(s => {
|
||||||
|
const serverType = String(s.type || '').toLowerCase();
|
||||||
|
// Явно jumphost
|
||||||
|
if (serverType === 'jumphost') return true;
|
||||||
|
// Явно exit - пропускаем
|
||||||
|
if (serverType === 'exit') return false;
|
||||||
|
// Тип не указан, но есть gateways - считаем jumphost (обратная совместимость)
|
||||||
|
if (!serverType && Array.isArray(s.gateways) && s.gateways.length > 0) return true;
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
.map(s => ({
|
||||||
|
...s,
|
||||||
|
// Для совместимости с EasySwitchManager добавляем id и name из dns
|
||||||
|
id: s.id || s.dns,
|
||||||
|
name: s.name || s.dns
|
||||||
|
}));
|
||||||
|
|
||||||
|
res.json(jumphostServers);
|
||||||
|
} catch (error) {
|
||||||
|
if (error?.code === 'NoSuchKey' || error?.$metadata?.httpStatusCode === 404) {
|
||||||
|
res.json([]);
|
||||||
|
} else {
|
||||||
|
console.error(error);
|
||||||
|
return sendError(res, 500, 'Error reading from S3', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST /api/server-configs (сохранить jumphost серверы, сохраняя остальные)
|
||||||
|
async function postServerConfigsList(req, res) {
|
||||||
|
const { servers: jumphostServers } = req.body;
|
||||||
|
|
||||||
|
if (!Array.isArray(jumphostServers)) {
|
||||||
|
return sendError(res, 400, 'Servers must be an array', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Валидация jumphost серверов
|
||||||
|
for (let i = 0; i < jumphostServers.length; i++) {
|
||||||
|
const error = validateJumphostServer(jumphostServers[i], i);
|
||||||
|
if (error) {
|
||||||
|
return sendError(res, 400, error, 'E_SCHEMA');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Читаем текущие данные
|
||||||
|
let allServers = [];
|
||||||
|
try {
|
||||||
|
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY }));
|
||||||
|
const fileContent = await streamToString(data.Body);
|
||||||
|
allServers = JSON.parse(fileContent);
|
||||||
|
if (!Array.isArray(allServers)) allServers = [];
|
||||||
|
} catch (e) {
|
||||||
|
// Файл не существует или пустой - это нормально
|
||||||
|
allServers = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Оставляем только НЕ-jumphost серверы (exit и другие)
|
||||||
|
const nonJumphostServers = allServers.filter(s =>
|
||||||
|
String(s.type || '').toLowerCase() !== 'jumphost'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Объединяем: jumphost из запроса + остальные из файла
|
||||||
|
const updatedServers = [...jumphostServers, ...nonJumphostServers];
|
||||||
|
|
||||||
|
const meta = await writeS3JsonObject(S3_KEY, updatedServers);
|
||||||
|
return sendOk(res, meta);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return sendError(res, 500, 'Error writing to S3', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Объект с GET и POST для совместимости с server.js
|
||||||
|
const serverConfigsListRoutes = {
|
||||||
|
get: getServerConfigsList,
|
||||||
|
post: postServerConfigsList
|
||||||
|
};
|
||||||
|
|
||||||
|
function validateServerIdParam(req, res) {
|
||||||
|
const serverId = req.params?.serverId;
|
||||||
|
if (!serverId || !isValidServerId(serverId)) {
|
||||||
|
sendError(res, 400, 'Invalid serverId: only alphanumeric, dot, dash, underscore allowed', 'E_BAD_REQUEST');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return serverId;
|
||||||
|
}
|
||||||
|
|
||||||
// GET /api/server-configs/:serverId (конкретная конфигурация)
|
// GET /api/server-configs/:serverId (конкретная конфигурация)
|
||||||
async function getServerConfig(req, res) {
|
async function getServerConfig(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
await getS3TextWithHeaders(
|
await getS3TextWithHeaders(
|
||||||
`filter-manager/config-${serverId}.txt`,
|
`filter-manager/config-${serverId}.txt`,
|
||||||
req,
|
req,
|
||||||
@@ -51,7 +170,8 @@ async function getServerConfig(req, res) {
|
|||||||
|
|
||||||
// POST /api/server-configs/:serverId (сохранить конфигурацию)
|
// POST /api/server-configs/:serverId (сохранить конфигурацию)
|
||||||
async function postServerConfig(req, res) {
|
async function postServerConfig(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
const { config } = req.body;
|
const { config } = req.body;
|
||||||
|
|
||||||
if (!config) {
|
if (!config) {
|
||||||
@@ -69,7 +189,8 @@ async function postServerConfig(req, res) {
|
|||||||
|
|
||||||
// DELETE /api/server-configs/:serverId (удалить только конфигурацию)
|
// DELETE /api/server-configs/:serverId (удалить только конфигурацию)
|
||||||
async function deleteServerConfig(req, res) {
|
async function deleteServerConfig(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await deleteS3Object(`filter-manager/config-${serverId}.txt`);
|
await deleteS3Object(`filter-manager/config-${serverId}.txt`);
|
||||||
@@ -83,7 +204,8 @@ async function deleteServerConfig(req, res) {
|
|||||||
|
|
||||||
// DELETE /api/server-configs/:serverId/complete (удалить конфигурацию и фильтры)
|
// DELETE /api/server-configs/:serverId/complete (удалить конфигурацию и фильтры)
|
||||||
async function deleteServerComplete(req, res) {
|
async function deleteServerComplete(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await Promise.allSettled([
|
await Promise.allSettled([
|
||||||
@@ -100,7 +222,8 @@ async function deleteServerComplete(req, res) {
|
|||||||
|
|
||||||
// GET /api/server-filters/:serverId
|
// GET /api/server-filters/:serverId
|
||||||
async function getServerFilters(req, res) {
|
async function getServerFilters(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
await getS3JsonWithHeaders(
|
await getS3JsonWithHeaders(
|
||||||
`filter-manager/server-filters-${serverId}.json`,
|
`filter-manager/server-filters-${serverId}.json`,
|
||||||
req,
|
req,
|
||||||
@@ -111,7 +234,8 @@ async function getServerFilters(req, res) {
|
|||||||
|
|
||||||
// POST /api/server-filters/:serverId
|
// POST /api/server-filters/:serverId
|
||||||
async function postServerFilters(req, res) {
|
async function postServerFilters(req, res) {
|
||||||
const { serverId } = req.params;
|
const serverId = validateServerIdParam(req, res);
|
||||||
|
if (serverId === null) return;
|
||||||
const { filters } = req.body;
|
const { filters } = req.body;
|
||||||
|
|
||||||
if (!Array.isArray(filters)) {
|
if (!Array.isArray(filters)) {
|
||||||
|
|||||||
@@ -0,0 +1,159 @@
|
|||||||
|
/**
|
||||||
|
* Кастомные роуты для серверов с поддержкой зашифрованных MikroTik учётных данных
|
||||||
|
* Для jumphost и home (входной роутер): mikrotikHost, mikrotikPort, mikrotikUser, encryptedMikrotikPassword
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { GetObjectCommand, PutObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
|
||||||
|
const { s3, BUCKET_NAME, streamToString } = require('../services/s3Service');
|
||||||
|
const { sendError, sendOk, checkIfNoneMatch } = require('../middleware/errorHandler');
|
||||||
|
const { encrypt, decrypt } = require('../utils/encryption');
|
||||||
|
|
||||||
|
const S3_KEY = 'servers.json';
|
||||||
|
const SERVER_TYPES = ['jumphost', 'exit', 'bgp', 'dns', 'home'];
|
||||||
|
const TYPES_NEED_TUNNEL = ['jumphost', 'exit'];
|
||||||
|
const TYPES_NEED_GATEWAYS = ['jumphost', 'exit'];
|
||||||
|
|
||||||
|
function validateServer(server, i) {
|
||||||
|
if (!server.ip || !server.dns || !server.country || !server.provider) {
|
||||||
|
return `Server at index ${i} is missing required fields (ip, dns, country, provider)`;
|
||||||
|
}
|
||||||
|
const normalizedType = String(server.type || '').toLowerCase();
|
||||||
|
if (!SERVER_TYPES.includes(normalizedType)) {
|
||||||
|
return `Server at index ${i} has invalid type (allowed: ${SERVER_TYPES.join(', ')})`;
|
||||||
|
}
|
||||||
|
if (TYPES_NEED_TUNNEL.includes(normalizedType) && !server.tunnel) {
|
||||||
|
return `Server at index ${i} (${normalizedType}) requires tunnel type`;
|
||||||
|
}
|
||||||
|
if (TYPES_NEED_GATEWAYS.includes(normalizedType)) {
|
||||||
|
if (!Array.isArray(server.gateways) || server.gateways.length === 0) {
|
||||||
|
return `Server at index ${i} must have gateways for type ${normalizedType}`;
|
||||||
|
}
|
||||||
|
const primaries = server.gateways.filter(g => g && g.primary);
|
||||||
|
if (primaries.length !== 1) {
|
||||||
|
return `Server at index ${i} must have exactly one primary gateway`;
|
||||||
|
}
|
||||||
|
for (let j = 0; j < server.gateways.length; j++) {
|
||||||
|
const gw = server.gateways[j] || {};
|
||||||
|
if (!gw.name || String(gw.name).trim().length === 0) {
|
||||||
|
return `Server at index ${i} gateway at index ${j} is missing name`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
server.type = normalizedType;
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function readServersFromS3() {
|
||||||
|
try {
|
||||||
|
const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY }));
|
||||||
|
const body = await streamToString(data.Body);
|
||||||
|
const parsed = JSON.parse(body || '[]');
|
||||||
|
return Array.isArray(parsed) ? parsed : [];
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'NoSuchKey' || e?.$metadata?.httpStatusCode === 404) return [];
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function writeServersToS3(servers) {
|
||||||
|
const body = JSON.stringify(servers, null, 2);
|
||||||
|
await s3.send(new PutObjectCommand({
|
||||||
|
Bucket: BUCKET_NAME,
|
||||||
|
Key: S3_KEY,
|
||||||
|
Body: body,
|
||||||
|
ContentType: 'application/json',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/servers — возвращает серверы, для jumphost заменяет encryptedMikrotikPassword на hasMikrotikPassword
|
||||||
|
*/
|
||||||
|
async function getServers(req, res) {
|
||||||
|
try {
|
||||||
|
const head = await s3.send(new HeadObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY })).catch(() => null);
|
||||||
|
const etag = head?.ETag || null;
|
||||||
|
if (etag) res.set('ETag', String(etag));
|
||||||
|
if (head?.LastModified) res.set('Last-Modified', new Date(head.LastModified).toUTCString());
|
||||||
|
if (typeof head?.ContentLength === 'number') res.set('Content-Length-Source', String(head.ContentLength));
|
||||||
|
if (checkIfNoneMatch(req, res, etag)) return;
|
||||||
|
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const sanitized = servers.map(s => {
|
||||||
|
const out = { ...s };
|
||||||
|
const hasMikrotikApi = s.type === 'jumphost' || s.type === 'home';
|
||||||
|
if (hasMikrotikApi && out.encryptedMikrotikPassword) {
|
||||||
|
out.hasMikrotikPassword = true;
|
||||||
|
delete out.encryptedMikrotikPassword;
|
||||||
|
} else if (hasMikrotikApi) {
|
||||||
|
out.hasMikrotikPassword = false;
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
});
|
||||||
|
res.json(sanitized);
|
||||||
|
} catch (error) {
|
||||||
|
if (error?.name === 'NoSuchKey' || error?.$metadata?.httpStatusCode === 404) {
|
||||||
|
return res.json([]);
|
||||||
|
}
|
||||||
|
console.error(error);
|
||||||
|
return sendError(res, 500, 'Error reading servers', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/servers — сохраняет серверы, шифрует mikrotikPassword при наличии
|
||||||
|
*/
|
||||||
|
async function postServers(req, res) {
|
||||||
|
const items = req.body?.domains ?? req.body?.servers;
|
||||||
|
if (!Array.isArray(items)) {
|
||||||
|
return sendError(res, 400, 'Data must be an array (domains or servers)', 'E_BAD_REQUEST');
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
const err = validateServer(items[i], i);
|
||||||
|
if (err) return sendError(res, 400, err, 'E_SCHEMA');
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const currentServers = await readServersFromS3();
|
||||||
|
const findCurrent = (srv) => currentServers.find(c =>
|
||||||
|
(srv.id && c.id === srv.id) || (srv.dns && c.dns === srv.dns) || (srv.ip && c.ip === srv.ip)
|
||||||
|
);
|
||||||
|
|
||||||
|
const toSave = items.map((srv) => {
|
||||||
|
const current = findCurrent(srv);
|
||||||
|
|
||||||
|
if (srv.type === 'jumphost' || srv.type === 'home') {
|
||||||
|
const out = { ...srv };
|
||||||
|
if (srv.mikrotikPassword !== undefined && srv.mikrotikPassword !== null && String(srv.mikrotikPassword).trim() !== '') {
|
||||||
|
try {
|
||||||
|
out.encryptedMikrotikPassword = encrypt(String(srv.mikrotikPassword).trim());
|
||||||
|
} catch (encErr) {
|
||||||
|
console.error('MikroTik password encryption failed:', encErr);
|
||||||
|
}
|
||||||
|
delete out.mikrotikPassword;
|
||||||
|
} else if (current?.encryptedMikrotikPassword) {
|
||||||
|
out.encryptedMikrotikPassword = current.encryptedMikrotikPassword;
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
return srv;
|
||||||
|
});
|
||||||
|
|
||||||
|
await writeServersToS3(toSave);
|
||||||
|
const head = await s3.send(new HeadObjectCommand({ Bucket: BUCKET_NAME, Key: S3_KEY })).catch(() => null);
|
||||||
|
return sendOk(res, {
|
||||||
|
etag: head?.ETag || null,
|
||||||
|
lastModified: head?.LastModified ? head.LastModified.toISOString() : null,
|
||||||
|
contentLength: typeof head?.ContentLength === 'number' ? head.ContentLength : null,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return sendError(res, 500, error.message || 'Error saving servers', 'E_S3');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getServers,
|
||||||
|
postServers,
|
||||||
|
readServersFromS3,
|
||||||
|
};
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
/**
|
||||||
|
* Роуты для сбора статистики трафика с MikroTik RouterOS (интерфейсы по jumphost).
|
||||||
|
* GET /api/traffic/interface-stats — статистика rx/tx по каждому интерфейсу для всех jumphost.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { sendError } = require('../middleware/errorHandler');
|
||||||
|
const { decrypt } = require('../utils/encryption');
|
||||||
|
const { readServersFromS3 } = require('./serversRoutes');
|
||||||
|
const { createRosClient } = require('../services/mikrotikApplyService');
|
||||||
|
|
||||||
|
/** Получить MikroTik credentials из сервера (jumphost или home) */
|
||||||
|
function getMikrotikCredentials(server) {
|
||||||
|
if (!server || (server.type !== 'jumphost' && server.type !== 'home')) return null;
|
||||||
|
const host = server.mikrotikHost || server.ip || server.dns;
|
||||||
|
if (!host) return null;
|
||||||
|
const port = server.mikrotikPort;
|
||||||
|
const restPort = (port === 80 || port === 443 || port === 8443) ? port : 80;
|
||||||
|
const user = server.mikrotikUser || 'admin';
|
||||||
|
let password = '';
|
||||||
|
if (server.encryptedMikrotikPassword) {
|
||||||
|
try {
|
||||||
|
password = decrypt(server.encryptedMikrotikPassword);
|
||||||
|
} catch (_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { host, port: restPort, user, password, secure: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI-настройки (общие с остальным UI)
|
||||||
|
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||||
|
const INTERFACE_SPEED_CACHE_PREFIX = 'interface-speed-cache/';
|
||||||
|
|
||||||
|
async function loadUiSettings() {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
const parsed = JSON.parse(data?.body || '{}');
|
||||||
|
return parsed && typeof parsed === 'object' ? parsed : {};
|
||||||
|
} catch (_) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function interfaceSpeedCacheKey(serverId, interfaceName) {
|
||||||
|
const key = `${serverId || ''}|${interfaceName || ''}`;
|
||||||
|
// Хэш не нужен: ключи короткие, но на всякий случай экранируем странные символы
|
||||||
|
return (
|
||||||
|
INTERFACE_SPEED_CACHE_PREFIX +
|
||||||
|
String(key)
|
||||||
|
.trim()
|
||||||
|
.replace(/[^a-zA-Z0-9_.:-]+/g, '_') +
|
||||||
|
'.json'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /api/traffic/interface-stats
|
||||||
|
* Возвращает по каждому jumphost список интерфейсов с rx-byte, tx-byte (из RouterOS REST /interface).
|
||||||
|
*/
|
||||||
|
async function getInterfaceStats(req, res) {
|
||||||
|
try {
|
||||||
|
const servers = await readServersFromS3();
|
||||||
|
const jumphosts = (Array.isArray(servers) ? servers : []).filter(
|
||||||
|
(s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
|
||||||
|
const results = await Promise.all(
|
||||||
|
jumphosts.map(async (server) => {
|
||||||
|
const creds = getMikrotikCredentials(server);
|
||||||
|
if (!creds) {
|
||||||
|
return {
|
||||||
|
serverId: server.id,
|
||||||
|
name: server.name || server.dns || server.ip || server.id,
|
||||||
|
host: server.mikrotikHost || server.ip || server.dns,
|
||||||
|
error: 'MikroTik API не настроен или нет пароля',
|
||||||
|
interfaces: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const client = createRosClient(creds);
|
||||||
|
const apiRes = await client.print('interface');
|
||||||
|
const raw = apiRes?.data;
|
||||||
|
const list = Array.isArray(raw) ? raw : raw ? [raw] : [];
|
||||||
|
const interfaces = list.map((iface) => {
|
||||||
|
const rx = iface['rx-byte'] != null ? parseInt(String(iface['rx-byte']), 10) : 0;
|
||||||
|
const tx = iface['tx-byte'] != null ? parseInt(String(iface['tx-byte']), 10) : 0;
|
||||||
|
const total = rx + tx;
|
||||||
|
return {
|
||||||
|
name: iface.name != null ? String(iface.name) : '',
|
||||||
|
type: iface.type != null ? String(iface.type) : '',
|
||||||
|
rxBytes: Number.isNaN(rx) ? 0 : rx,
|
||||||
|
txBytes: Number.isNaN(tx) ? 0 : tx,
|
||||||
|
totalBytes: Number.isNaN(total) ? 0 : total,
|
||||||
|
};
|
||||||
|
}).filter((i) => i.name && i.totalBytes >= 0);
|
||||||
|
return {
|
||||||
|
serverId: server.id,
|
||||||
|
name: server.name || server.dns || server.ip || server.id,
|
||||||
|
host: server.mikrotikHost || server.ip || server.dns,
|
||||||
|
interfaces,
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err.response?.data?.message || err.message || 'Ошибка запроса к RouterOS';
|
||||||
|
return {
|
||||||
|
serverId: server.id,
|
||||||
|
name: server.name || server.dns || server.ip || server.id,
|
||||||
|
host: server.mikrotikHost || server.ip || server.dns,
|
||||||
|
error: msg,
|
||||||
|
interfaces: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return res.json({ jumphosts: results });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('getInterfaceStats:', error);
|
||||||
|
return sendError(res, 500, error.message || 'Ошибка сбора статистики трафика', 'E_TRAFFIC');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getInterfaceStats,
|
||||||
|
};
|
||||||
+127
-35
@@ -26,6 +26,16 @@ const communitiesRoutes = require('./routes/communitiesRoutes');
|
|||||||
const filtersRoutes = require('./routes/filtersRoutes');
|
const filtersRoutes = require('./routes/filtersRoutes');
|
||||||
const serverConfigsRoutes = require('./routes/serverConfigsRoutes');
|
const serverConfigsRoutes = require('./routes/serverConfigsRoutes');
|
||||||
const miscRoutes = require('./routes/miscRoutes');
|
const miscRoutes = require('./routes/miscRoutes');
|
||||||
|
const ipsecPasswordsRoutes = require('./routes/ipsecPasswordsRoutes');
|
||||||
|
const mikrotikConfigRoutes = require('./routes/mikrotikConfigRoutes');
|
||||||
|
const mikrotikBackupRoutes = require('./routes/mikrotikBackupRoutes');
|
||||||
|
const trafficRoutes = require('./routes/trafficRoutes');
|
||||||
|
const resourceStatsRoutes = require('./routes/resourceStatsRoutes');
|
||||||
|
const { initMikrotikBackupScheduler } = require('./services/mikrotikBackupScheduler');
|
||||||
|
const { initNetworkMapScheduler } = require('./services/networkMapScheduler');
|
||||||
|
const { initPingServicesScheduler } = require('./services/pingServicesScheduler');
|
||||||
|
const { initUptimeMonitorScheduler } = require('./services/uptimeMonitorScheduler');
|
||||||
|
const schedulerRoutes = require('./routes/schedulerRoutes');
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const port = Number(process.env.PORT) || 3001;
|
const port = Number(process.env.PORT) || 3001;
|
||||||
@@ -87,6 +97,12 @@ app.set('etag', false);
|
|||||||
|
|
||||||
app.use((req, res, next) => {
|
app.use((req, res, next) => {
|
||||||
res.setHeader('Access-Control-Expose-Headers', 'ETag, Last-Modified, Content-Length-Source');
|
res.setHeader('Access-Control-Expose-Headers', 'ETag, Last-Modified, Content-Length-Source');
|
||||||
|
// Запрещаем браузеру кешировать API ответы
|
||||||
|
if (req.path.startsWith('/api/')) {
|
||||||
|
res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
|
||||||
|
res.setHeader('Pragma', 'no-cache');
|
||||||
|
res.setHeader('Expires', '0');
|
||||||
|
}
|
||||||
next();
|
next();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -294,41 +310,10 @@ app.post('/api/ip-ranges', writeLimiter, ipRangesRoutes.post);
|
|||||||
|
|
||||||
// === JSON DATA ROUTES (используют фабрики) ===
|
// === JSON DATA ROUTES (используют фабрики) ===
|
||||||
|
|
||||||
// Servers
|
// Servers (кастомные роуты с поддержкой зашифрованных MikroTik учётных данных для jumphost)
|
||||||
const SERVER_TYPES = ['jumphost', 'exit'];
|
const serversRoutes = require('./routes/serversRoutes');
|
||||||
const serversRoutes = createJsonDataRoutes('servers.json', (server, i) => {
|
app.get('/api/servers', serversRoutes.getServers);
|
||||||
if (!server.ip || !server.dns || !server.country || !server.provider || !server.tunnel) {
|
app.post('/api/servers', serversRoutes.postServers);
|
||||||
return `Server at index ${i} is missing required fields`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizedType = String(server.type || '').toLowerCase();
|
|
||||||
if (!SERVER_TYPES.includes(normalizedType)) {
|
|
||||||
return `Server at index ${i} has invalid type (allowed: ${SERVER_TYPES.join(', ')})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (normalizedType === 'jumphost' || normalizedType === 'exit') {
|
|
||||||
if (!Array.isArray(server.gateways) || server.gateways.length === 0) {
|
|
||||||
return `Server at index ${i} must have gateways for type ${normalizedType}`;
|
|
||||||
}
|
|
||||||
const primaries = server.gateways.filter(g => g && g.primary);
|
|
||||||
if (primaries.length !== 1) {
|
|
||||||
return `Server at index ${i} must have exactly one primary gateway`;
|
|
||||||
}
|
|
||||||
for (let j = 0; j < server.gateways.length; j++) {
|
|
||||||
const gw = server.gateways[j] || {};
|
|
||||||
if (!gw.name || String(gw.name).trim().length === 0) {
|
|
||||||
return `Server at index ${i} gateway at index ${j} is missing name`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Нормализуем тип, чтобы в S3 всегда лежали одинаковые значения
|
|
||||||
server.type = normalizedType;
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get('/api/servers', serversRoutes.get);
|
|
||||||
app.post('/api/servers', serversRoutes.post);
|
|
||||||
|
|
||||||
// Server connections for topology graph
|
// Server connections for topology graph
|
||||||
const serverConnectionsRoutes = createJsonDataRoutes('server-connections.json', (conn, i) => {
|
const serverConnectionsRoutes = createJsonDataRoutes('server-connections.json', (conn, i) => {
|
||||||
@@ -377,6 +362,30 @@ const simpleFiltersRoutes = createJsonDataRoutes('filter-manager/simple-filters.
|
|||||||
app.get('/api/simple-filters', simpleFiltersRoutes.get);
|
app.get('/api/simple-filters', simpleFiltersRoutes.get);
|
||||||
app.post('/api/simple-filters', simpleFiltersRoutes.post);
|
app.post('/api/simple-filters', simpleFiltersRoutes.post);
|
||||||
|
|
||||||
|
// Network Config (справочник IP, интерфейсов и gateway)
|
||||||
|
const networkConfigRoutes = createJsonDataRoutes('network-config.json', (config) => {
|
||||||
|
// Валидация структуры конфига
|
||||||
|
if (typeof config !== 'object' || config === null) {
|
||||||
|
return 'Network config must be an object';
|
||||||
|
}
|
||||||
|
// Валидация gateways
|
||||||
|
if (config.gateways && !Array.isArray(config.gateways)) {
|
||||||
|
return 'gateways must be an array';
|
||||||
|
}
|
||||||
|
// Валидация tunnelInterfaces
|
||||||
|
if (config.tunnelInterfaces && !Array.isArray(config.tunnelInterfaces)) {
|
||||||
|
return 'tunnelInterfaces must be an array';
|
||||||
|
}
|
||||||
|
// Валидация ipPools
|
||||||
|
if (config.ipPools && !Array.isArray(config.ipPools)) {
|
||||||
|
return 'ipPools must be an array';
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}, { singleObject: true });
|
||||||
|
|
||||||
|
app.get('/api/network-config', networkConfigRoutes.get);
|
||||||
|
app.post('/api/network-config', networkConfigRoutes.post);
|
||||||
|
|
||||||
// === COMMUNITIES ROUTES ===
|
// === COMMUNITIES ROUTES ===
|
||||||
app.get('/api/communities', communitiesRoutes.getCommunities);
|
app.get('/api/communities', communitiesRoutes.getCommunities);
|
||||||
app.post('/api/communities', writeLimiter, communitiesRoutes.postCommunities);
|
app.post('/api/communities', writeLimiter, communitiesRoutes.postCommunities);
|
||||||
@@ -436,6 +445,69 @@ app.post('/api/update-bgp/background', bgpUpdateLimiter, miscRoutes.updateBgpBac
|
|||||||
app.get('/api/ws/url', miscRoutes.getWsUrl);
|
app.get('/api/ws/url', miscRoutes.getWsUrl);
|
||||||
app.get('/api/ui-settings', miscRoutes.getUiSettings);
|
app.get('/api/ui-settings', miscRoutes.getUiSettings);
|
||||||
app.post('/api/ui-settings', miscRoutes.postUiSettings);
|
app.post('/api/ui-settings', miscRoutes.postUiSettings);
|
||||||
|
app.get('/api/ping-services-list', miscRoutes.getPingServicesList);
|
||||||
|
app.get('/api/ping-services', miscRoutes.getPingServices);
|
||||||
|
|
||||||
|
// === IPSEC PASSWORDS ===
|
||||||
|
app.get('/api/ipsec-passwords', ipsecPasswordsRoutes.getIpsecPasswords);
|
||||||
|
app.get('/api/ipsec-passwords/:id', ipsecPasswordsRoutes.getIpsecPassword);
|
||||||
|
app.post('/api/ipsec-passwords', writeLimiter, ipsecPasswordsRoutes.createIpsecPassword);
|
||||||
|
app.put('/api/ipsec-passwords/:id', writeLimiter, ipsecPasswordsRoutes.updateIpsecPassword);
|
||||||
|
app.delete('/api/ipsec-passwords/:id', writeLimiter, ipsecPasswordsRoutes.deleteIpsecPassword);
|
||||||
|
|
||||||
|
// === MIKROTIK CONFIG GENERATION (text + json) ===
|
||||||
|
app.post('/api/mikrotik/generate', mikrotikConfigRoutes.generateMikrotikConfig);
|
||||||
|
app.get('/api/mikrotik/generate-interfaces', mikrotikConfigRoutes.generateInterfaces);
|
||||||
|
app.get('/api/mikrotik/generate-recursive-routes', mikrotikConfigRoutes.generateRecursiveRoutes);
|
||||||
|
app.post('/api/mikrotik/test-connection', mikrotikConfigRoutes.testMikrotikConnection);
|
||||||
|
// Простой health-check (используется NetworkConfigManager при открытии модалки применения)
|
||||||
|
app.get('/api/mikrotik/ping', (req, res) => res.json({ ok: true, ts: Date.now() }));
|
||||||
|
// Реальный ping через RouterOS по интерфейсу/шлюзу
|
||||||
|
app.post('/api/mikrotik/ping', writeLimiter, mikrotikConfigRoutes.pingViaInterface);
|
||||||
|
// Traceroute через RouterOS с выбором сервера и шлюза
|
||||||
|
app.post('/api/mikrotik/traceroute', writeLimiter, mikrotikConfigRoutes.tracerouteViaGateway);
|
||||||
|
// Speed-test (TCP upload/download) между MikroTik по туннельному интерфейсу
|
||||||
|
app.post('/api/mikrotik/speed-test', writeLimiter, mikrotikConfigRoutes.speedTestViaTunnel);
|
||||||
|
app.post('/api/mikrotik/apply', mikrotikConfigRoutes.applyMikrotikConfig);
|
||||||
|
app.post('/api/mikrotik/run-script', mikrotikConfigRoutes.runScript);
|
||||||
|
app.get('/api/mikrotik/address-lists', mikrotikConfigRoutes.getAddressLists);
|
||||||
|
app.post('/api/mikrotik/address-lists/apply-summary', writeLimiter, mikrotikConfigRoutes.applyAddressListSummary);
|
||||||
|
|
||||||
|
// === UPTIME MONITOR (проверка доступности: http / internal-ping / external-ping из настроек) ===
|
||||||
|
app.get('/api/uptime/cache', mikrotikConfigRoutes.getUptimeCache);
|
||||||
|
app.post('/api/uptime/check', writeLimiter, mikrotikConfigRoutes.uptimeCheck);
|
||||||
|
|
||||||
|
// === TRAFFIC STATS (MikroTik interfaces by jumphost) ===
|
||||||
|
app.get('/api/traffic/interface-stats', trafficRoutes.getInterfaceStats);
|
||||||
|
|
||||||
|
// === RESOURCE STATS (RAM/CPU/HDD по роутерам) ===
|
||||||
|
app.get('/api/resources/stats', resourceStatsRoutes.getResourceStats);
|
||||||
|
|
||||||
|
// === MIKROTIK BACKUPS (S3) ===
|
||||||
|
app.post('/api/mikrotik/backups', writeLimiter, mikrotikBackupRoutes.createBackup);
|
||||||
|
app.get('/api/mikrotik/backups', mikrotikBackupRoutes.listBackups);
|
||||||
|
app.get('/api/mikrotik/backups/item', mikrotikBackupRoutes.getBackup);
|
||||||
|
app.post('/api/mikrotik/backups/diff', mikrotikBackupRoutes.diffBackups);
|
||||||
|
app.post('/api/mikrotik/backups/run', writeLimiter, mikrotikBackupRoutes.runBackupNow);
|
||||||
|
|
||||||
|
// === NETWORK MAP CACHE (для быстрой загрузки карты сети) ===
|
||||||
|
app.get('/api/network-map-cache', schedulerRoutes.getNetworkMapCache);
|
||||||
|
|
||||||
|
// === SCHEDULER (карта сети: пинг и скорость по расписанию) ===
|
||||||
|
app.get('/api/scheduler/network-map/settings', schedulerRoutes.getNetworkMapSchedulerSettings);
|
||||||
|
app.patch('/api/scheduler/network-map/settings', writeLimiter, schedulerRoutes.patchNetworkMapSchedulerSettings);
|
||||||
|
app.get('/api/scheduler/network-map/logs', schedulerRoutes.getNetworkMapSchedulerLogs);
|
||||||
|
app.post('/api/scheduler/network-map/run-now', writeLimiter, schedulerRoutes.runNetworkMapSchedulerNow);
|
||||||
|
|
||||||
|
// === SCHEDULER (пинг сервисов: обновление кеша по расписанию, по умолчанию каждые 2 мин) ===
|
||||||
|
app.get('/api/scheduler/ping-services/settings', schedulerRoutes.getPingServicesSchedulerSettings);
|
||||||
|
app.patch('/api/scheduler/ping-services/settings', writeLimiter, schedulerRoutes.patchPingServicesSchedulerSettings);
|
||||||
|
app.post('/api/scheduler/ping-services/run-now', writeLimiter, schedulerRoutes.runPingServicesSchedulerNow);
|
||||||
|
|
||||||
|
// === SCHEDULER (Uptime Monitor: проверки по расписанию, по умолчанию каждые 2 мин) ===
|
||||||
|
app.get('/api/scheduler/uptime-monitor/settings', schedulerRoutes.getUptimeMonitorSchedulerSettings);
|
||||||
|
app.patch('/api/scheduler/uptime-monitor/settings', writeLimiter, schedulerRoutes.patchUptimeMonitorSchedulerSettings);
|
||||||
|
app.post('/api/scheduler/uptime-monitor/run-now', writeLimiter, schedulerRoutes.runUptimeMonitorSchedulerNow);
|
||||||
|
|
||||||
// === MIKROTIK VALIDATION ===
|
// === MIKROTIK VALIDATION ===
|
||||||
app.post('/api/mikrotik/validate', async (req, res) => {
|
app.post('/api/mikrotik/validate', async (req, res) => {
|
||||||
@@ -464,5 +536,25 @@ app.use(errorHandler);
|
|||||||
|
|
||||||
app.listen(port, () => {
|
app.listen(port, () => {
|
||||||
console.log(`Server is running on http://localhost:${port}`);
|
console.log(`Server is running on http://localhost:${port}`);
|
||||||
|
try {
|
||||||
|
initMikrotikBackupScheduler(logger);
|
||||||
|
} catch (e) {
|
||||||
|
logger.error({ component: 'mikrotik-backup', err: e && e.message }, 'Failed to start backup scheduler');
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
initNetworkMapScheduler(logger, port);
|
||||||
|
} catch (e) {
|
||||||
|
logger.error({ component: 'network-map-scheduler', err: e && e.message }, 'Failed to start network map scheduler');
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
initPingServicesScheduler(logger);
|
||||||
|
} catch (e) {
|
||||||
|
logger.error({ component: 'ping-services-scheduler', err: e && e.message }, 'Failed to start ping services scheduler');
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
initUptimeMonitorScheduler(logger, port);
|
||||||
|
} catch (e) {
|
||||||
|
logger.error({ component: 'uptime-monitor-scheduler', err: e && e.message }, 'Failed to start uptime monitor scheduler');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,460 @@
|
|||||||
|
/**
|
||||||
|
* Сервис применения конфигурации MikroTik через RouterOS REST API
|
||||||
|
* Идемпотентная логика: create / update / skip
|
||||||
|
* Требует RouterOS 7.1+ с www-ssl (HTTPS, порт 443) или www (HTTP, порт 80)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const http = require('http');
|
||||||
|
const https = require('https');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Создать REST API клиент для MikroTik
|
||||||
|
* Поддерживает HTTP (порт 80) и HTTPS (порт 443)
|
||||||
|
* @param {object} opts - { host, port?, user, password, secure? }
|
||||||
|
* @returns {object} client с методами print, add, set, remove, command
|
||||||
|
*/
|
||||||
|
function createRosClient(opts) {
|
||||||
|
const { host, port = 80, user, password, secure = false } = opts;
|
||||||
|
// Порт может прийти строкой из JSON — приводим к числу
|
||||||
|
const portNumber = Number(port) || 80;
|
||||||
|
// REST API по умолчанию висит на HTTP:80, HTTPS обычно на 443/8443
|
||||||
|
const useHttp = portNumber === 80;
|
||||||
|
const protocol = useHttp ? http : https;
|
||||||
|
|
||||||
|
const makeRequest = (method, urlPath, body = null) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const auth = Buffer.from(`${user}:${password || ''}`).toString('base64');
|
||||||
|
const cleanPath = (urlPath.startsWith('/') ? urlPath.slice(1) : urlPath).replace(/\\/g, '/');
|
||||||
|
const pathStr = `/rest/${cleanPath}`.replace(/\/+/g, '/');
|
||||||
|
const bodyStr = (body !== null && body !== undefined) ? JSON.stringify(body) : '';
|
||||||
|
const headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Authorization': `Basic ${auth}`,
|
||||||
|
};
|
||||||
|
if (bodyStr) headers['Content-Length'] = Buffer.byteLength(bodyStr, 'utf8');
|
||||||
|
const options = {
|
||||||
|
hostname: host,
|
||||||
|
port: portNumber,
|
||||||
|
path: pathStr,
|
||||||
|
method,
|
||||||
|
headers,
|
||||||
|
rejectUnauthorized: secure,
|
||||||
|
};
|
||||||
|
|
||||||
|
const req = protocol.request(options, (res) => {
|
||||||
|
let data = '';
|
||||||
|
res.on('data', (chunk) => { data += chunk; });
|
||||||
|
res.on('end', () => {
|
||||||
|
if ([200, 201, 204].includes(res.statusCode)) {
|
||||||
|
const parsed = data ? (() => { try { return JSON.parse(data); } catch { return data; } })() : null;
|
||||||
|
resolve({ data: parsed, code: res.statusCode });
|
||||||
|
} else {
|
||||||
|
let errMsg = res.statusMessage || 'Request failed';
|
||||||
|
try {
|
||||||
|
const errBody = JSON.parse(data);
|
||||||
|
errMsg = errBody.detail || errBody.message || errMsg;
|
||||||
|
} catch (_) {}
|
||||||
|
const err = new Error(errMsg);
|
||||||
|
err.response = { status: res.statusCode, data };
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
req.on('error', reject);
|
||||||
|
if (bodyStr) req.write(bodyStr);
|
||||||
|
req.end();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
print: (p) => makeRequest('GET', p),
|
||||||
|
add: (p, body) => makeRequest('PUT', p, body),
|
||||||
|
set: (p, body) => makeRequest('PATCH', p, body),
|
||||||
|
remove: (p) => makeRequest('DELETE', p),
|
||||||
|
command: (p, body) => makeRequest('POST', p, body),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Нормализовать path: убрать ведущий слэш
|
||||||
|
*/
|
||||||
|
function normalizePath(path) {
|
||||||
|
return (path || '').replace(/^\//, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить print с фильтром
|
||||||
|
* @param {object} client - ros-rest client
|
||||||
|
* @param {string} path - e.g. '/interface/gre' или 'interface/gre'
|
||||||
|
* @param {object} filter - e.g. { name: 'gre1' } или { '~comment': 'Recursive' }
|
||||||
|
*/
|
||||||
|
async function rosPrint(client, path, filter = {}) {
|
||||||
|
const pathClean = normalizePath(path);
|
||||||
|
const entries = Object.entries(filter).filter(([, v]) => v != null && v !== '');
|
||||||
|
let fullPath = pathClean;
|
||||||
|
if (entries.length > 0) {
|
||||||
|
const queryParts = entries.map(([k, v]) => {
|
||||||
|
const key = k.startsWith('~') ? `~${k.slice(1)}` : k;
|
||||||
|
return `${encodeURIComponent(key)}=${encodeURIComponent(String(v))}`;
|
||||||
|
});
|
||||||
|
fullPath = `${pathClean}?${queryParts.join('&')}`;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await client.print(fullPath);
|
||||||
|
const data = res?.data;
|
||||||
|
return Array.isArray(data) ? data : (data ? [data] : []);
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.response?.status === 404) return [];
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить print с .query (для сложных фильтров вроде ~comment)
|
||||||
|
*/
|
||||||
|
async function rosPrintWithQuery(client, path, queryList) {
|
||||||
|
const pathClean = normalizePath(path);
|
||||||
|
const fullPath = `${pathClean}/print`;
|
||||||
|
try {
|
||||||
|
const res = await client.command(fullPath, { '.query': queryList });
|
||||||
|
const data = res?.data;
|
||||||
|
return Array.isArray(data) ? data : (data ? [data] : []);
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.response?.status === 404) return [];
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить add
|
||||||
|
*/
|
||||||
|
async function rosAdd(client, path, params) {
|
||||||
|
const pathClean = normalizePath(path);
|
||||||
|
const body = params && typeof params === 'object'
|
||||||
|
? Object.fromEntries(
|
||||||
|
Object.entries(params).filter(([, v]) => v != null && v !== '').map(([k, v]) => [k, String(v)])
|
||||||
|
)
|
||||||
|
: {};
|
||||||
|
const res = await client.add(pathClean, body);
|
||||||
|
return res?.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить set
|
||||||
|
*/
|
||||||
|
async function rosSet(client, path, id, params) {
|
||||||
|
const pathClean = normalizePath(path);
|
||||||
|
const fullPath = id ? `${pathClean}/${id}` : pathClean;
|
||||||
|
const body = params && typeof params === 'object'
|
||||||
|
? Object.fromEntries(
|
||||||
|
Object.entries(params).filter(([, v]) => v != null && v !== '').map(([k, v]) => [k, String(v)])
|
||||||
|
)
|
||||||
|
: {};
|
||||||
|
const res = await client.set(fullPath, body);
|
||||||
|
return res?.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить remove
|
||||||
|
*/
|
||||||
|
async function rosRemove(client, path, id) {
|
||||||
|
const pathClean = normalizePath(path);
|
||||||
|
const fullPath = id ? `${pathClean}/${id}` : pathClean;
|
||||||
|
await client.remove(fullPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Сравнить объект из RouterOS с желаемыми params (только ключевые поля)
|
||||||
|
*/
|
||||||
|
function paramsMatch(rosItem, params, keysToCompare) {
|
||||||
|
if (!rosItem || !params) return false;
|
||||||
|
for (const k of keysToCompare) {
|
||||||
|
const rosVal = rosItem[k];
|
||||||
|
const wantVal = params[k];
|
||||||
|
if (wantVal == null) continue;
|
||||||
|
if (String(rosVal || '').trim() !== String(wantVal || '').trim()) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Применить одну операцию с idempotent логикой
|
||||||
|
*/
|
||||||
|
async function applyOperation(client, op, dryRun) {
|
||||||
|
const { path, action, params, meta } = op;
|
||||||
|
const result = { path, action, params: { ...params }, status: null, details: null, error: null };
|
||||||
|
|
||||||
|
if (path === '/interface/list' && action === 'add' && meta?.ensureExists) {
|
||||||
|
const existing = await rosPrint(client, '/interface/list', { name: params.name });
|
||||||
|
if (existing.length > 0) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = 'Interface list already exists';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_create';
|
||||||
|
result.details = `Would create interface list ${params.name}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosAdd(client, '/interface/list', params);
|
||||||
|
result.status = 'created';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (path === '/interface/gre' && action === 'add') {
|
||||||
|
const name = params.name;
|
||||||
|
const existing = await rosPrint(client, '/interface/gre', { name });
|
||||||
|
const compareKeys = ['remote-address', 'local-address', 'mtu', 'ipsec-secret', 'keepalive', 'allow-fast-path'];
|
||||||
|
if (existing.length > 0) {
|
||||||
|
const match = paramsMatch(existing[0], params, compareKeys);
|
||||||
|
if (match) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = `Interface ${name} already configured`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_update';
|
||||||
|
result.details = `Would update interface ${name}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosSet(client, '/interface/gre', existing[0]['.id'], params);
|
||||||
|
result.status = 'updated';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_create';
|
||||||
|
result.details = `Would create GRE interface ${name}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosAdd(client, '/interface/gre', params);
|
||||||
|
result.status = 'created';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (path === '/interface/list/member' && action === 'add') {
|
||||||
|
const iface = params.interface;
|
||||||
|
const list = params.list;
|
||||||
|
const existing = await rosPrint(client, '/interface/list/member', { list, interface: iface });
|
||||||
|
if (existing.length > 0) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = `Member ${iface} already in list ${list}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_create';
|
||||||
|
result.details = `Would add ${iface} to list ${list}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosAdd(client, '/interface/list/member', params);
|
||||||
|
result.status = 'created';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (path === '/ip/address' && action === 'add') {
|
||||||
|
const addr = params.address;
|
||||||
|
const iface = params.interface;
|
||||||
|
const existing = await rosPrint(client, '/ip/address', { interface: iface });
|
||||||
|
const match = existing.find(e => (e.address || '').startsWith(addr.split('/')[0]));
|
||||||
|
if (match) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = `Address ${addr} already on ${iface}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_create';
|
||||||
|
result.details = `Would add ${addr} to ${iface}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosAdd(client, '/ip/address', params);
|
||||||
|
result.status = 'created';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (path === '/ip/route') {
|
||||||
|
if (action === 'remove' && meta?.findComment) {
|
||||||
|
// REST API может игнорировать regex в .query и возвращать все маршруты — фильтруем на нашей стороне
|
||||||
|
const raw = await rosPrintWithQuery(client, '/ip/route', [`~comment=${meta.findComment}`]);
|
||||||
|
const toRemove = raw.filter(r => (r.comment || '').startsWith('Recursive: '));
|
||||||
|
if (toRemove.length === 0) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = 'No matching routes to remove';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_remove';
|
||||||
|
result.details = `Would remove ${toRemove.length} route(s)`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
for (const r of toRemove) {
|
||||||
|
const id = r['.id'];
|
||||||
|
if (id) await rosRemove(client, '/ip/route', id);
|
||||||
|
}
|
||||||
|
result.status = 'removed';
|
||||||
|
result.details = `${toRemove.length} route(s) removed`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (action === 'add') {
|
||||||
|
const dst = params['dst-address'];
|
||||||
|
const gw = params.gateway;
|
||||||
|
const existing = await rosPrint(client, '/ip/route', { 'dst-address': dst });
|
||||||
|
const match = existing.find(e => (e.gateway || '').includes((gw || '').split('%')[0]));
|
||||||
|
if (match) {
|
||||||
|
result.status = 'skip';
|
||||||
|
result.details = `Route to ${dst} already exists`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (dryRun) {
|
||||||
|
result.status = 'would_create';
|
||||||
|
result.details = `Would add route ${dst} via ${gw}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
await rosAdd(client, '/ip/route', params);
|
||||||
|
result.status = 'created';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
result.status = 'skipped';
|
||||||
|
result.details = `Unsupported operation: ${path} ${action}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Применить блок операций к MikroTik
|
||||||
|
*/
|
||||||
|
async function applyBlock(client, block, dryRun) {
|
||||||
|
const results = [];
|
||||||
|
const ops = block.operations || [];
|
||||||
|
for (const op of ops) {
|
||||||
|
try {
|
||||||
|
const r = await applyOperation(client, op, dryRun);
|
||||||
|
results.push(r);
|
||||||
|
} catch (err) {
|
||||||
|
results.push({
|
||||||
|
path: op.path,
|
||||||
|
action: op.action,
|
||||||
|
params: op.params,
|
||||||
|
status: 'error',
|
||||||
|
error: err.message || String(err),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Получить полный экспорт конфигурации MikroTik через REST API.
|
||||||
|
* API не возвращает текст /export напрямую — только при export file=... сохраняется в файл.
|
||||||
|
* Мы экспортируем во временный файл, читаем его, удаляем.
|
||||||
|
*
|
||||||
|
* @param {object} client - ros-rest client (createRosClient)
|
||||||
|
* @returns {Promise<string>} - текст конфигурации (export compact)
|
||||||
|
*/
|
||||||
|
async function fetchExportViaFile(client) {
|
||||||
|
const crypto = require('crypto');
|
||||||
|
const basename = `backup_${Date.now()}_${crypto.randomBytes(4).toString('hex')}.rsc`;
|
||||||
|
// Явно указываем flash/ — экспорт сохраняется в flash
|
||||||
|
const filePath = `flash/${basename}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await client.command('export', { compact: '', file: filePath });
|
||||||
|
} catch (err) {
|
||||||
|
// Попробуем без flash/ — старые версии RouterOS могут сохранять иначе
|
||||||
|
try {
|
||||||
|
await client.command('export', { compact: '', file: basename });
|
||||||
|
} catch (err2) {
|
||||||
|
const msg = err?.message || err2?.message || String(err);
|
||||||
|
const detail = err?.response?.data || err2?.response?.data;
|
||||||
|
console.error('[fetchExportViaFile] export failed:', msg, detail);
|
||||||
|
throw new Error(`Export failed: ${msg}${detail ? ` (${JSON.stringify(detail).slice(0, 200)})` : ''}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST file/print — получаем все файлы и ищем по имени (надёжнее GET с query)
|
||||||
|
let list = [];
|
||||||
|
try {
|
||||||
|
const printRes = await client.command('file/print', {
|
||||||
|
'.proplist': ['.id', 'name', 'contents'],
|
||||||
|
});
|
||||||
|
const data = printRes?.data;
|
||||||
|
const raw = Array.isArray(data) ? data : (data ? [data] : []);
|
||||||
|
const found = raw.find(
|
||||||
|
(f) =>
|
||||||
|
(f.name || '') === basename ||
|
||||||
|
(f.name || '') === filePath ||
|
||||||
|
(f.name || '').endsWith('/' + basename) ||
|
||||||
|
(f.name || '').endsWith(basename),
|
||||||
|
);
|
||||||
|
if (found) list = [found];
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[fetchExportViaFile] file/print failed:', err?.message, err?.response?.data);
|
||||||
|
throw new Error(`file/print failed: ${err?.message || String(err)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const file = list[0];
|
||||||
|
if (!file) {
|
||||||
|
throw new Error('Export file not found after export (check write permissions on router)');
|
||||||
|
}
|
||||||
|
|
||||||
|
let config = String(file.contents || '');
|
||||||
|
|
||||||
|
// Для файлов >60KB API не возвращает contents в print — читаем через file/read
|
||||||
|
if (!config && file.name) {
|
||||||
|
const chunkSize = 32768;
|
||||||
|
let offset = 0;
|
||||||
|
const chunks = [];
|
||||||
|
try {
|
||||||
|
for (;;) {
|
||||||
|
const readRes = await client.command('file/read', {
|
||||||
|
file: file.name,
|
||||||
|
offset: String(offset),
|
||||||
|
'chunk-size': String(chunkSize),
|
||||||
|
});
|
||||||
|
const rd = readRes?.data;
|
||||||
|
const chunk = Array.isArray(rd) ? (rd[0]?.data ?? rd[0]) : (rd?.data ?? rd);
|
||||||
|
const str = typeof chunk === 'string' ? chunk : (chunk ? String(chunk) : '');
|
||||||
|
if (!str) break;
|
||||||
|
chunks.push(str);
|
||||||
|
offset += str.length;
|
||||||
|
if (str.length < chunkSize) break;
|
||||||
|
}
|
||||||
|
config = chunks.join('');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[fetchExportViaFile] file/read failed:', err?.message);
|
||||||
|
try {
|
||||||
|
const id = file['.id'];
|
||||||
|
if (id) await client.remove(`file/${id}`);
|
||||||
|
} catch (_) {}
|
||||||
|
throw new Error(`file/read failed: ${err?.message || String(err)}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!config) {
|
||||||
|
try {
|
||||||
|
const id = file['.id'];
|
||||||
|
if (id) await client.remove(`file/${id}`);
|
||||||
|
} catch (_) {}
|
||||||
|
throw new Error('File/print and file/read returned no contents (router may restrict file access)');
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const id = file['.id'];
|
||||||
|
if (id) await client.remove(`file/${id}`);
|
||||||
|
} catch (_) {}
|
||||||
|
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
createRosClient,
|
||||||
|
rosPrint,
|
||||||
|
rosPrintWithQuery,
|
||||||
|
rosAdd,
|
||||||
|
rosSet,
|
||||||
|
rosRemove,
|
||||||
|
applyOperation,
|
||||||
|
applyBlock,
|
||||||
|
fetchExportViaFile,
|
||||||
|
};
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
/**
|
||||||
|
* Простейший планировщик автоматических бэкапов MikroTik.
|
||||||
|
*
|
||||||
|
* Работает внутри Node-процесса backend:
|
||||||
|
* - периодически обходит jumphost-сервера из servers.json
|
||||||
|
* - вызывает RouterOS REST API /rest/export (compact)
|
||||||
|
* - сохраняет конфиг в S3 через saveBackupForServer
|
||||||
|
*
|
||||||
|
* Управляется через переменные окружения:
|
||||||
|
* - MIKROTIK_BACKUP_ENABLED=true|false (по умолчанию true)
|
||||||
|
* - MIKROTIK_BACKUP_INTERVAL_MINUTES=60 (интервал между запусками)
|
||||||
|
* - MIKROTIK_BACKUP_SERVERS="id1,id2" (если не указано — все jumphost)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { readServersFromS3 } = require('../routes/serversRoutes');
|
||||||
|
const { createRosClient, fetchExportViaFile } = require('./mikrotikApplyService');
|
||||||
|
const { saveBackupForServer } = require('../routes/mikrotikBackupRoutes');
|
||||||
|
const { decrypt } = require('../utils/encryption');
|
||||||
|
const { readS3TextObject } = require('../services/s3Service');
|
||||||
|
|
||||||
|
const DEFAULT_INTERVAL_MIN = 60;
|
||||||
|
|
||||||
|
function parseServerIds(envValue) {
|
||||||
|
if (!envValue) return null;
|
||||||
|
const parts = String(envValue)
|
||||||
|
.split(',')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
return parts.length > 0 ? parts : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Прочитать список серверов для автобэкапов из UI-настроек (rt_ui_settings.json).
|
||||||
|
* Если поле mikrotikBackupServers отсутствует или пустое — вернуть null.
|
||||||
|
*/
|
||||||
|
async function getServerIdsFromUiSettings(logger) {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject('bgp_data/rt_ui_settings.json').catch(() => null);
|
||||||
|
if (!data || !data.body) return null;
|
||||||
|
const parsed = JSON.parse(data.body || '{}');
|
||||||
|
const list = parsed && Array.isArray(parsed.mikrotikBackupServers)
|
||||||
|
? parsed.mikrotikBackupServers
|
||||||
|
: null;
|
||||||
|
if (!list || list.length === 0) return null;
|
||||||
|
return list.map((v) => String(v)).filter(Boolean);
|
||||||
|
} catch (e) {
|
||||||
|
(logger || console).warn(
|
||||||
|
{ component: 'mikrotik-backup', err: e && e.message },
|
||||||
|
'Failed to read mikrotikBackupServers from ui-settings',
|
||||||
|
);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchRouterExport(client) {
|
||||||
|
// API не возвращает текст /export напрямую — экспортируем в файл, читаем, удаляем
|
||||||
|
return fetchExportViaFile(client);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runBackupOnce(logger) {
|
||||||
|
const log = logger || console;
|
||||||
|
try {
|
||||||
|
const allServers = await readServersFromS3();
|
||||||
|
const uiIds = await getServerIdsFromUiSettings(log);
|
||||||
|
const envIds = parseServerIds(process.env.MIKROTIK_BACKUP_SERVERS);
|
||||||
|
const wantedIds = (uiIds && uiIds.length > 0) ? uiIds : envIds;
|
||||||
|
|
||||||
|
const jumphosts = (allServers || []).filter((s) => {
|
||||||
|
if (!s || String(s.type || '').toLowerCase() !== 'jumphost') return false;
|
||||||
|
if (!wantedIds) return true;
|
||||||
|
const id = s.id || s.dns || s.ip;
|
||||||
|
return id && wantedIds.includes(String(id));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (jumphosts.length === 0) {
|
||||||
|
log.info({ component: 'mikrotik-backup' }, 'No jumphost servers found for backup');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const server of jumphosts) {
|
||||||
|
const id = server.id || server.dns || server.ip || 'unknown';
|
||||||
|
try {
|
||||||
|
const host = server.mikrotikHost || server.ip || server.dns;
|
||||||
|
const port = server.mikrotikPort || 80;
|
||||||
|
const user = server.mikrotikUser || 'admin';
|
||||||
|
|
||||||
|
if (!host) {
|
||||||
|
log.warn({ component: 'mikrotik-backup', serverId: id }, 'Skip backup: no MikroTik host');
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let password = '';
|
||||||
|
if (server.encryptedMikrotikPassword) {
|
||||||
|
try {
|
||||||
|
password = decrypt(server.encryptedMikrotikPassword);
|
||||||
|
} catch (e) {
|
||||||
|
log.error(
|
||||||
|
{ component: 'mikrotik-backup', serverId: id, err: e && e.message },
|
||||||
|
'Failed to decrypt MikroTik password, skipping backup',
|
||||||
|
);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
log.warn(
|
||||||
|
{ component: 'mikrotik-backup', serverId: id },
|
||||||
|
'Skip backup: no encryptedMikrotikPassword configured',
|
||||||
|
);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const creds = {
|
||||||
|
host,
|
||||||
|
port: Number(port) || 80,
|
||||||
|
user,
|
||||||
|
password,
|
||||||
|
secure: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const client = createRosClient(creds);
|
||||||
|
log.info({ component: 'mikrotik-backup', serverId: id, host: creds.host }, 'Starting automatic backup via REST /export');
|
||||||
|
const configText = await fetchRouterExport(client);
|
||||||
|
|
||||||
|
if (!configText || !configText.trim()) {
|
||||||
|
log.warn({ component: 'mikrotik-backup', serverId: id }, 'Skip backup: empty export result');
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await saveBackupForServer(id, configText, {
|
||||||
|
source: 'scheduler',
|
||||||
|
comment: 'Automatic MikroTik backup (REST /export)',
|
||||||
|
});
|
||||||
|
|
||||||
|
log.info(
|
||||||
|
{ component: 'mikrotik-backup', serverId: id, key: result.key },
|
||||||
|
'Automatic backup saved to S3',
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
log.error(
|
||||||
|
{ component: 'mikrotik-backup', serverId: id, err: err && err.message },
|
||||||
|
'Failed to create automatic backup',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err && err.message ? err.message : String(err);
|
||||||
|
(logger || console).error({ component: 'mikrotik-backup', err: msg }, 'Backup run failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initMikrotikBackupScheduler(logger) {
|
||||||
|
const enabledEnv = String(process.env.MIKROTIK_BACKUP_ENABLED || 'true').toLowerCase();
|
||||||
|
const enabled = enabledEnv !== 'false' && enabledEnv !== '0' && enabledEnv !== 'off';
|
||||||
|
const log = logger || console;
|
||||||
|
|
||||||
|
if (!enabled) {
|
||||||
|
log.info({ component: 'mikrotik-backup' }, 'Automatic MikroTik backup scheduler is disabled');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const intervalMin =
|
||||||
|
Number(process.env.MIKROTIK_BACKUP_INTERVAL_MINUTES || DEFAULT_INTERVAL_MIN) || DEFAULT_INTERVAL_MIN;
|
||||||
|
const intervalMs = Math.max(5, intervalMin) * 60 * 1000;
|
||||||
|
|
||||||
|
const intervalMinutes = intervalMs / 60000;
|
||||||
|
log.info(
|
||||||
|
{
|
||||||
|
component: 'mikrotik-backup',
|
||||||
|
intervalMinutes,
|
||||||
|
nextRunInMinutes: intervalMinutes,
|
||||||
|
servers: process.env.MIKROTIK_BACKUP_SERVERS || 'all jumphost',
|
||||||
|
},
|
||||||
|
'Automatic MikroTik backup scheduler started (no backup on startup, first run in %d min)',
|
||||||
|
intervalMinutes,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Только по расписанию — без бэкапа при перезапуске контейнера
|
||||||
|
setInterval(() => {
|
||||||
|
runBackupOnce(log);
|
||||||
|
}, intervalMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
initMikrotikBackupScheduler,
|
||||||
|
runBackupOnce,
|
||||||
|
};
|
||||||
|
|
||||||
@@ -0,0 +1,460 @@
|
|||||||
|
/**
|
||||||
|
* Планировщик пингов и замеров скорости для карты сети.
|
||||||
|
* Периодически вызывает пинг и speed-test по связям из network-config,
|
||||||
|
* сохраняет результаты в S3 (кеш по рёбрам + агрегат network-map-cache/latest.json).
|
||||||
|
* Логи пишет в кольцевой буфер для просмотра в UI.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { readServersFromS3 } = require('../routes/serversRoutes');
|
||||||
|
const { loadNetworkConfig } = require('../routes/mikrotikConfigRoutes');
|
||||||
|
const { readS3TextObject, writeS3JsonObject } = require('./s3Service');
|
||||||
|
|
||||||
|
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||||
|
const NETWORK_MAP_CACHE_KEY = 'network-map-cache/latest.json';
|
||||||
|
|
||||||
|
const DEFAULT_INTERVAL_MINUTES = 5;
|
||||||
|
const DEFAULT_LOG_MAX_LINES = 500;
|
||||||
|
|
||||||
|
/** Кольцевой буфер логов */
|
||||||
|
class LogBuffer {
|
||||||
|
constructor(maxLines = 500) {
|
||||||
|
this.maxLines = Math.max(100, maxLines);
|
||||||
|
this.lines = [];
|
||||||
|
this.index = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
push(line) {
|
||||||
|
const ts = new Date().toISOString();
|
||||||
|
const entry = `${ts} ${line}`;
|
||||||
|
if (this.lines.length < this.maxLines) {
|
||||||
|
this.lines.push(entry);
|
||||||
|
} else {
|
||||||
|
this.lines[this.index] = entry;
|
||||||
|
this.index = (this.index + 1) % this.maxLines;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getLines() {
|
||||||
|
if (this.lines.length < this.maxLines) return [...this.lines];
|
||||||
|
return [...this.lines.slice(this.index), ...this.lines.slice(0, this.index)];
|
||||||
|
}
|
||||||
|
|
||||||
|
setMaxLines(n) {
|
||||||
|
this.maxLines = Math.max(100, n);
|
||||||
|
if (this.lines.length > this.maxLines) {
|
||||||
|
this.lines = this.getLines().slice(-this.maxLines);
|
||||||
|
this.index = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const logBuffer = new LogBuffer(DEFAULT_LOG_MAX_LINES);
|
||||||
|
|
||||||
|
async function loadUiSettings() {
|
||||||
|
try {
|
||||||
|
const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
const parsed = JSON.parse(data?.body || '{}');
|
||||||
|
return parsed && typeof parsed === 'object' ? parsed : {};
|
||||||
|
} catch (_) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Построить список связей как в NetworkMapDashboard (tunnelInterfaces → connections) */
|
||||||
|
async function buildConnections() {
|
||||||
|
const [serversList, config, uiSettings] = await Promise.all([
|
||||||
|
readServersFromS3(),
|
||||||
|
loadNetworkConfig(),
|
||||||
|
loadUiSettings(),
|
||||||
|
]);
|
||||||
|
const servers = Array.isArray(serversList) ? serversList : [];
|
||||||
|
const tunnelInterfaces = Array.isArray(config.tunnelInterfaces) ? config.tunnelInterfaces : [];
|
||||||
|
|
||||||
|
const getServer = (serverId) =>
|
||||||
|
servers.find((s) => s.id === serverId || s.ip === serverId || s.dns === serverId);
|
||||||
|
|
||||||
|
const connList = [];
|
||||||
|
for (const iface of tunnelInterfaces) {
|
||||||
|
if (!iface.serverId || !iface.serverId2) continue;
|
||||||
|
const s1 = getServer(iface.serverId);
|
||||||
|
const s2 = getServer(iface.serverId2);
|
||||||
|
if (!s1 || !s2 || s1.ip === s2.ip) continue;
|
||||||
|
const s1Key = s1.id || s1.dns || s1.ip;
|
||||||
|
const s2Key = s2.id || s2.dns || s2.ip;
|
||||||
|
if (!s1Key || !s2Key) continue;
|
||||||
|
const isJumphost1 = s1 && ['jumphost', 'home'].includes(String(s1.type || '').toLowerCase());
|
||||||
|
const isJumphost2 = s2 && ['jumphost', 'home'].includes(String(s2.type || '').toLowerCase());
|
||||||
|
connList.push({
|
||||||
|
from: s1.ip,
|
||||||
|
to: s2.ip,
|
||||||
|
fromKey: s1Key,
|
||||||
|
toKey: s2Key,
|
||||||
|
internalFromTo: iface.remoteIp || null,
|
||||||
|
internalToFrom: iface.localIp || null,
|
||||||
|
speedTestServerId: isJumphost1 ? s1Key : isJumphost2 ? s2Key : null,
|
||||||
|
interfaceName: iface.name || null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return { connections: connList, servers, uiSettings };
|
||||||
|
}
|
||||||
|
|
||||||
|
function edgePingKey(a, b) {
|
||||||
|
return [String(a), String(b)].sort().join(':');
|
||||||
|
}
|
||||||
|
|
||||||
|
function speedKey(key1, key2) {
|
||||||
|
return [String(key1), String(key2)].sort().join(':');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Параллельно с лимитом */
|
||||||
|
async function runWithLimit(tasks, limit = 4) {
|
||||||
|
const results = [];
|
||||||
|
let index = 0;
|
||||||
|
async function runNext() {
|
||||||
|
const i = index++;
|
||||||
|
if (i >= tasks.length) return;
|
||||||
|
try {
|
||||||
|
results[i] = { value: await tasks[i]() };
|
||||||
|
} catch (err) {
|
||||||
|
results[i] = { error: err };
|
||||||
|
}
|
||||||
|
await runNext();
|
||||||
|
}
|
||||||
|
const workers = Array.from({ length: Math.min(limit, tasks.length) }, () => runNext());
|
||||||
|
await Promise.all(workers);
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Один тест на ноду в момент времени */
|
||||||
|
async function runWithOnePerKey(tasks, getKey) {
|
||||||
|
const n = tasks.length;
|
||||||
|
const keyToIndices = new Map();
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
const k = String(getKey(i));
|
||||||
|
if (!keyToIndices.has(k)) keyToIndices.set(k, []);
|
||||||
|
keyToIndices.get(k).push(i);
|
||||||
|
}
|
||||||
|
const results = [];
|
||||||
|
for (let i = 0; i < n; i++) results[i] = null;
|
||||||
|
const keys = Array.from(keyToIndices.keys());
|
||||||
|
let round = 0;
|
||||||
|
while (true) {
|
||||||
|
const batch = [];
|
||||||
|
for (const k of keys) {
|
||||||
|
const indices = keyToIndices.get(k);
|
||||||
|
if (round < indices.length) batch.push(indices[round]);
|
||||||
|
}
|
||||||
|
if (batch.length === 0) break;
|
||||||
|
await Promise.all(
|
||||||
|
batch.map(async (i) => {
|
||||||
|
try {
|
||||||
|
results[i] = { value: await tasks[i]() };
|
||||||
|
} catch (err) {
|
||||||
|
results[i] = { error: err };
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
round++;
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполнить одну итерацию: пинг и speed-test по связям, записать кеш и логи.
|
||||||
|
* @param {object} opts - { baseUrl, runPing, runSpeedTest, log }
|
||||||
|
*/
|
||||||
|
async function runJob(opts) {
|
||||||
|
const { baseUrl, runPing = true, runSpeedTest = true, log = (msg) => logBuffer.push(msg), trigger = 'scheduled' } = opts;
|
||||||
|
const pingMap = {};
|
||||||
|
const speedMap = {};
|
||||||
|
|
||||||
|
log(trigger === 'manual' ? '--- Ручной запуск ---' : '--- Запуск по расписанию ---');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { connections, servers } = await buildConnections();
|
||||||
|
if (connections.length === 0) {
|
||||||
|
log('Нет связей в network-config (tunnelInterfaces).');
|
||||||
|
await writeCache(pingMap, speedMap);
|
||||||
|
return { pingMap, speedMap };
|
||||||
|
}
|
||||||
|
|
||||||
|
log(`Связей: ${connections.length}. Пинг: ${runPing ? 'да' : 'нет'}, Скорость: ${runSpeedTest ? 'да' : 'нет'}`);
|
||||||
|
|
||||||
|
if (runPing) {
|
||||||
|
const pingTasks = [];
|
||||||
|
for (const c of connections) {
|
||||||
|
const from = String(c.from);
|
||||||
|
const to = String(c.to);
|
||||||
|
if (!from || !to || from === to) continue;
|
||||||
|
const srcFrom = servers.find((s) => s.ip === from);
|
||||||
|
const srcTo = servers.find((s) => s.ip === to);
|
||||||
|
const canPingFrom = srcFrom && ['jumphost', 'home'].includes(String(srcFrom.type || '').toLowerCase()) && c.internalFromTo;
|
||||||
|
const canPingTo = srcTo && ['jumphost', 'home'].includes(String(srcTo.type || '').toLowerCase()) && c.internalToFrom;
|
||||||
|
|
||||||
|
if (canPingFrom) {
|
||||||
|
pingTasks.push(async () => {
|
||||||
|
const ekey = edgePingKey(from, to);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${baseUrl}/api/mikrotik/ping`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
serverId: c.fromKey,
|
||||||
|
target: c.internalFromTo,
|
||||||
|
gatewayIp: c.internalFromTo,
|
||||||
|
count: 3,
|
||||||
|
forceRefresh: true,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||||
|
pingMap[ekey] = ms;
|
||||||
|
const errMsg = !res.ok ? (data?.message || `HTTP ${res.status}`) : null;
|
||||||
|
log(`Пинг ${from} → ${to}: ${ms != null ? ms + ' ms' : errMsg || 'ошибка'}`);
|
||||||
|
return ms;
|
||||||
|
} catch (e) {
|
||||||
|
pingMap[ekey] = null;
|
||||||
|
log(`Пинг ${from} → ${to}: ошибка ${e?.message || e}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (canPingTo) {
|
||||||
|
pingTasks.push(async () => {
|
||||||
|
const ekey = edgePingKey(from, to);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${baseUrl}/api/mikrotik/ping`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
serverId: c.toKey,
|
||||||
|
target: c.internalToFrom,
|
||||||
|
gatewayIp: c.internalToFrom,
|
||||||
|
count: 3,
|
||||||
|
forceRefresh: true,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||||
|
pingMap[ekey] = ms;
|
||||||
|
const errMsg2 = !res.ok ? (data?.message || `HTTP ${res.status}`) : null;
|
||||||
|
log(`Пинг ${to} → ${from}: ${ms != null ? ms + ' ms' : errMsg2 || 'ошибка'}`);
|
||||||
|
return ms;
|
||||||
|
} catch (e) {
|
||||||
|
pingMap[ekey] = null;
|
||||||
|
log(`Пинг ${to} → ${from}: ошибка ${e?.message || e}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await runWithLimit(pingTasks, 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (runSpeedTest) {
|
||||||
|
// Таймаут запроса: замер может долго идти на медленных каналах (download + upload по durationSeconds каждый)
|
||||||
|
const SPEED_TEST_REQUEST_MS = 300000; // 5 мин
|
||||||
|
const withSpeed = connections.filter((c) => c.speedTestServerId && c.interfaceName);
|
||||||
|
const speedTasks = withSpeed.map((c) => async () => {
|
||||||
|
const key = speedKey(c.fromKey, c.toKey);
|
||||||
|
const server = servers.find((s) => (s.id || s.dns || s.ip) === c.speedTestServerId);
|
||||||
|
const serverLabel = server ? (server.dns || server.ip || server.id) : c.speedTestServerId;
|
||||||
|
const speedLabel = `${serverLabel} / ${c.interfaceName}`;
|
||||||
|
const ac = new AbortController();
|
||||||
|
const timeoutId = setTimeout(() => ac.abort(), SPEED_TEST_REQUEST_MS);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${baseUrl}/api/mikrotik/speed-test`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
serverId: c.speedTestServerId,
|
||||||
|
interfaceName: c.interfaceName,
|
||||||
|
forceRefresh: true,
|
||||||
|
}),
|
||||||
|
signal: ac.signal,
|
||||||
|
});
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
if (data?.ok && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
|
||||||
|
speedMap[key] = {
|
||||||
|
tcpDownloadBps: data.tcpDownloadBps,
|
||||||
|
tcpUploadBps: data.tcpUploadBps,
|
||||||
|
cached: data.cached === true,
|
||||||
|
durationSeconds: data.durationSeconds,
|
||||||
|
};
|
||||||
|
const down = data.tcpDownloadBps != null ? (data.tcpDownloadBps / 1e6).toFixed(1) : '—';
|
||||||
|
const up = data.tcpUploadBps != null ? (data.tcpUploadBps / 1e6).toFixed(1) : '—';
|
||||||
|
log(`Скорость ${speedLabel}: ↓${down} ↑${up} Mbps`);
|
||||||
|
return speedMap[key];
|
||||||
|
}
|
||||||
|
speedMap[key] = null;
|
||||||
|
const speedErr = !res.ok ? (data?.message || `HTTP ${res.status}`) : 'нет данных';
|
||||||
|
log(`Скорость ${speedLabel}: ${speedErr}`);
|
||||||
|
return null;
|
||||||
|
} catch (e) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
speedMap[key] = null;
|
||||||
|
const msg = e?.message || e;
|
||||||
|
const isAbort = String(msg).toLowerCase().includes('abort');
|
||||||
|
log(`Скорость ${speedLabel}: ошибка ${isAbort ? 'таймаут или отмена запроса' : msg}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// В один момент — только один тест на один сервер назначения (удалённый конец туннеля),
|
||||||
|
// иначе несколько замеров к одному хостингу делят канал и дают заниженные результаты
|
||||||
|
await runWithOnePerKey(speedTasks, (i) => {
|
||||||
|
const c = withSpeed[i];
|
||||||
|
return c.speedTestServerId === c.fromKey ? c.toKey : c.fromKey;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
await writeCache(pingMap, speedMap);
|
||||||
|
log('Кеш карты сети обновлён.');
|
||||||
|
} catch (err) {
|
||||||
|
log(`Ошибка: ${err?.message || err}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { pingMap, speedMap };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function writeCache(pingMap, speedMap) {
|
||||||
|
try {
|
||||||
|
await writeS3JsonObject(NETWORK_MAP_CACHE_KEY, {
|
||||||
|
pingMap: pingMap || {},
|
||||||
|
speedMap: speedMap || {},
|
||||||
|
updatedAt: Date.now(),
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
logBuffer.push(`Запись кеша в S3 не удалась: ${e?.message || e}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let schedulerTimer = null;
|
||||||
|
/** Время последнего запуска по расписанию (для расчёта следующего) */
|
||||||
|
let lastScheduledRunAt = null;
|
||||||
|
|
||||||
|
function getSettingsFromUiSettings(uiSettings) {
|
||||||
|
return {
|
||||||
|
enabled: Boolean(uiSettings.networkMapSchedulerEnabled),
|
||||||
|
intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.networkMapSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
|
||||||
|
runPing: uiSettings.networkMapSchedulerRunPing !== false,
|
||||||
|
runSpeedTest: uiSettings.networkMapSchedulerRunSpeedTest !== false,
|
||||||
|
logMaxLines: Math.max(100, Math.min(2000, parseInt(uiSettings.networkMapSchedulerLogMaxLines, 10) || DEFAULT_LOG_MAX_LINES)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Запустить планировщик (setInterval).
|
||||||
|
* @param {object} logger - pino logger
|
||||||
|
* @param {number} port - порт сервера для вызова API
|
||||||
|
*/
|
||||||
|
function initNetworkMapScheduler(logger, port) {
|
||||||
|
const log = logger || console;
|
||||||
|
const baseUrl = `http://127.0.0.1:${port}`;
|
||||||
|
|
||||||
|
async function tick() {
|
||||||
|
lastScheduledRunAt = Date.now();
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) return;
|
||||||
|
|
||||||
|
logBuffer.setMaxLines(settings.logMaxLines);
|
||||||
|
logBuffer.push('--- Запуск по расписанию ---');
|
||||||
|
runJob({
|
||||||
|
baseUrl,
|
||||||
|
runPing: settings.runPing,
|
||||||
|
runSpeedTest: settings.runSpeedTest,
|
||||||
|
log: (msg) => {
|
||||||
|
logBuffer.push(msg);
|
||||||
|
log.info({ component: 'network-map-scheduler' }, msg);
|
||||||
|
},
|
||||||
|
}).catch((err) => {
|
||||||
|
logBuffer.push(`Ошибка: ${err?.message || err}`);
|
||||||
|
log.error({ component: 'network-map-scheduler', err: err?.message }, 'Scheduler run failed');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function schedule() {
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) {
|
||||||
|
log.info({ component: 'network-map-scheduler' }, 'Scheduler disabled in settings');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
logBuffer.setMaxLines(settings.logMaxLines);
|
||||||
|
const intervalMs = settings.intervalMinutes * 60 * 1000;
|
||||||
|
log.info(
|
||||||
|
{ component: 'network-map-scheduler', intervalMinutes: settings.intervalMinutes },
|
||||||
|
'Network map scheduler started (first run in 10 s, then every %d min)',
|
||||||
|
settings.intervalMinutes
|
||||||
|
);
|
||||||
|
schedulerTimer = setInterval(tick, intervalMs);
|
||||||
|
// Первый запуск через 10 сек, чтобы кеш появился вскоре после старта сервера
|
||||||
|
setTimeout(() => tick(), 10 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopNetworkMapScheduler() {
|
||||||
|
if (schedulerTimer) {
|
||||||
|
clearInterval(schedulerTimer);
|
||||||
|
schedulerTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLogs() {
|
||||||
|
return logBuffer.getLines();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLogMaxLines() {
|
||||||
|
return logBuffer.maxLines;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLogMaxLines(n) {
|
||||||
|
const num = Math.max(100, Math.min(2000, parseInt(n, 10) || 500));
|
||||||
|
logBuffer.setMaxLines(num);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Добавить строку в лог (для вывода ошибок из роутов) */
|
||||||
|
function pushLog(msg) {
|
||||||
|
logBuffer.push(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Время следующего запуска по расписанию (timestamp или null если выключено).
|
||||||
|
* @param {object} settings - результат getSettingsFromUiSettings()
|
||||||
|
* @returns {number|null}
|
||||||
|
*/
|
||||||
|
function getNextRunAt(settings) {
|
||||||
|
if (!settings || !settings.enabled) return null;
|
||||||
|
const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
|
||||||
|
const from = lastScheduledRunAt || Date.now();
|
||||||
|
return from + intervalMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
runJob,
|
||||||
|
initNetworkMapScheduler,
|
||||||
|
stopNetworkMapScheduler,
|
||||||
|
getLogs,
|
||||||
|
getLogMaxLines,
|
||||||
|
setLogMaxLines,
|
||||||
|
pushLog,
|
||||||
|
getSettingsFromUiSettings,
|
||||||
|
getNextRunAt,
|
||||||
|
loadUiSettings: loadUiSettings,
|
||||||
|
buildConnections,
|
||||||
|
LogBuffer,
|
||||||
|
};
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* Планировщик пинга сервисов из списка настроек.
|
||||||
|
* Периодически вызывает refreshPingServicesCache и обновляет кеш для GET /api/ping-services.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { readS3TextObject } = require('./s3Service');
|
||||||
|
const { refreshPingServicesCache } = require('../routes/miscRoutes');
|
||||||
|
|
||||||
|
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||||
|
|
||||||
|
const DEFAULT_INTERVAL_MINUTES = 2;
|
||||||
|
|
||||||
|
let schedulerTimer = null;
|
||||||
|
let lastScheduledRunAt = null;
|
||||||
|
|
||||||
|
function getSettingsFromUiSettings(uiSettings) {
|
||||||
|
return {
|
||||||
|
enabled: uiSettings.pingServicesSchedulerEnabled !== false,
|
||||||
|
intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.pingServicesSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Время следующего запуска по расписанию (timestamp или null если выключено).
|
||||||
|
*/
|
||||||
|
function getNextRunAt(settings) {
|
||||||
|
if (!settings || !settings.enabled) return null;
|
||||||
|
const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
|
||||||
|
const from = lastScheduledRunAt || Date.now();
|
||||||
|
return from + intervalMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Запустить планировщик пинг-сервисов.
|
||||||
|
* @param {object} logger - pino logger
|
||||||
|
*/
|
||||||
|
function initPingServicesScheduler(logger) {
|
||||||
|
const log = logger || console;
|
||||||
|
|
||||||
|
async function tick() {
|
||||||
|
lastScheduledRunAt = Date.now();
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) return;
|
||||||
|
|
||||||
|
log.info({ component: 'ping-services-scheduler' }, 'Running ping services refresh');
|
||||||
|
refreshPingServicesCache().catch((err) => {
|
||||||
|
log.error({ component: 'ping-services-scheduler', err: err?.message }, 'Ping services refresh failed');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function schedule() {
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) {
|
||||||
|
log.info({ component: 'ping-services-scheduler' }, 'Ping services scheduler disabled in settings');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const intervalMs = settings.intervalMinutes * 60 * 1000;
|
||||||
|
log.info(
|
||||||
|
{ component: 'ping-services-scheduler', intervalMinutes: settings.intervalMinutes },
|
||||||
|
'Ping services scheduler started (first run in 15 s, then every %d min)',
|
||||||
|
settings.intervalMinutes
|
||||||
|
);
|
||||||
|
schedulerTimer = setInterval(tick, intervalMs);
|
||||||
|
setTimeout(() => tick(), 15 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopPingServicesScheduler() {
|
||||||
|
if (schedulerTimer) {
|
||||||
|
clearInterval(schedulerTimer);
|
||||||
|
schedulerTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
initPingServicesScheduler,
|
||||||
|
stopPingServicesScheduler,
|
||||||
|
getSettingsFromUiSettings,
|
||||||
|
getNextRunAt,
|
||||||
|
};
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
* Централизованные операции чтения/записи/кэширования
|
* Централизованные операции чтения/записи/кэширования
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const { S3Client, GetObjectCommand, HeadObjectCommand, PutObjectCommand, DeleteObjectCommand } = require('@aws-sdk/client-s3');
|
const { S3Client, GetObjectCommand, HeadObjectCommand, PutObjectCommand, DeleteObjectCommand, ListObjectsV2Command } = require('@aws-sdk/client-s3');
|
||||||
const { NodeHttpHandler } = require('@smithy/node-http-handler');
|
const { NodeHttpHandler } = require('@smithy/node-http-handler');
|
||||||
const http = require('http');
|
const http = require('http');
|
||||||
const https = require('https');
|
const https = require('https');
|
||||||
@@ -167,6 +167,42 @@ async function deleteS3Object(key) {
|
|||||||
invalidateCacheForKey(key);
|
invalidateCacheForKey(key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Список объектов в S3 по префиксу
|
||||||
|
* Используется для истории/бэкапов (количество ограничено для безопасности)
|
||||||
|
*/
|
||||||
|
async function listS3Objects(prefix, { maxKeys = 100 } = {}) {
|
||||||
|
const out = [];
|
||||||
|
let continuationToken = undefined;
|
||||||
|
|
||||||
|
while (out.length < maxKeys) {
|
||||||
|
const resp = await s3.send(new ListObjectsV2Command({
|
||||||
|
Bucket: BUCKET_NAME,
|
||||||
|
Prefix: prefix,
|
||||||
|
ContinuationToken: continuationToken,
|
||||||
|
MaxKeys: Math.min(1000, maxKeys - out.length),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const contents = resp.Contents || [];
|
||||||
|
for (const obj of contents) {
|
||||||
|
out.push({
|
||||||
|
key: obj.Key,
|
||||||
|
size: typeof obj.Size === 'number' ? obj.Size : null,
|
||||||
|
lastModified: obj.LastModified ? new Date(obj.LastModified).toISOString() : null,
|
||||||
|
etag: obj.ETag || null,
|
||||||
|
});
|
||||||
|
if (out.length >= maxKeys) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!resp.IsTruncated || !resp.NextContinuationToken || out.length >= maxKeys) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
continuationToken = resp.NextContinuationToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Потоковое чтение с пагинацией больших текстовых файлов
|
* Потоковое чтение с пагинацией больших текстовых файлов
|
||||||
*/
|
*/
|
||||||
@@ -257,5 +293,6 @@ module.exports = {
|
|||||||
deleteS3Object,
|
deleteS3Object,
|
||||||
streamPaginatedText,
|
streamPaginatedText,
|
||||||
invalidateCacheForKey,
|
invalidateCacheForKey,
|
||||||
|
listS3Objects,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,142 @@
|
|||||||
|
/**
|
||||||
|
* Планировщик проверок Uptime Monitor.
|
||||||
|
* Периодически вызывает POST /api/uptime/check для каждого jumphost/home и обновляет кеш в S3.
|
||||||
|
* После перезапуска контейнера кеш обновляется по расписанию без необходимости открывать страницу.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { readS3TextObject } = require('./s3Service');
|
||||||
|
|
||||||
|
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||||
|
|
||||||
|
const DEFAULT_INTERVAL_MINUTES = 2;
|
||||||
|
const PARALLEL_CHECKS = 2;
|
||||||
|
|
||||||
|
let schedulerTimer = null;
|
||||||
|
let lastScheduledRunAt = null;
|
||||||
|
|
||||||
|
function getSettingsFromUiSettings(uiSettings) {
|
||||||
|
return {
|
||||||
|
enabled: uiSettings.uptimeMonitorSchedulerEnabled !== false,
|
||||||
|
intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.uptimeMonitorSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNextRunAt(settings) {
|
||||||
|
if (!settings || !settings.enabled) return null;
|
||||||
|
const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
|
||||||
|
const from = lastScheduledRunAt || Date.now();
|
||||||
|
return from + intervalMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Запустить планировщик Uptime Monitor.
|
||||||
|
* @param {object} logger - pino logger
|
||||||
|
* @param {number} port - порт приложения для вызова API
|
||||||
|
*/
|
||||||
|
function initUptimeMonitorScheduler(logger, port) {
|
||||||
|
const log = logger || console;
|
||||||
|
const baseUrl = `http://127.0.0.1:${port}`;
|
||||||
|
|
||||||
|
async function runChecks(serverIds) {
|
||||||
|
const runOne = async (serverId) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${baseUrl}/api/uptime/check`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ serverId }),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
log.warn({ component: 'uptime-monitor-scheduler', serverId, status: res.status }, 'Uptime check failed');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
log.warn({ component: 'uptime-monitor-scheduler', serverId, err: err?.message }, 'Uptime check error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let i = 0; i < serverIds.length; i += PARALLEL_CHECKS) {
|
||||||
|
const chunk = serverIds.slice(i, i + PARALLEL_CHECKS);
|
||||||
|
await Promise.all(chunk.map(runOne));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function tick() {
|
||||||
|
lastScheduledRunAt = Date.now();
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) return;
|
||||||
|
|
||||||
|
let servers = [];
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${baseUrl}/api/servers`);
|
||||||
|
const data = res.ok ? await res.json() : [];
|
||||||
|
servers = Array.isArray(data) ? data : [];
|
||||||
|
} catch (err) {
|
||||||
|
log.error({ component: 'uptime-monitor-scheduler', err: err?.message }, 'Failed to fetch servers');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jumphosts = servers.filter(
|
||||||
|
(s) => s && ['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
|
||||||
|
);
|
||||||
|
const serverIds = jumphosts
|
||||||
|
.map((s) => s.id || s.dns || s.ip)
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
if (serverIds.length === 0) {
|
||||||
|
log.info({ component: 'uptime-monitor-scheduler' }, 'No jumphost/home servers to check');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
log.info(
|
||||||
|
{ component: 'uptime-monitor-scheduler', count: serverIds.length },
|
||||||
|
'Running uptime monitor checks for %d server(s)',
|
||||||
|
serverIds.length
|
||||||
|
);
|
||||||
|
await runChecks(serverIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function schedule() {
|
||||||
|
let uiSettings;
|
||||||
|
try {
|
||||||
|
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
|
||||||
|
uiSettings = JSON.parse(raw?.body || '{}') || {};
|
||||||
|
} catch (_) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const settings = getSettingsFromUiSettings(uiSettings);
|
||||||
|
if (!settings.enabled) {
|
||||||
|
log.info({ component: 'uptime-monitor-scheduler' }, 'Uptime monitor scheduler disabled in settings');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const intervalMs = settings.intervalMinutes * 60 * 1000;
|
||||||
|
log.info(
|
||||||
|
{ component: 'uptime-monitor-scheduler', intervalMinutes: settings.intervalMinutes },
|
||||||
|
'Uptime monitor scheduler started (first run in 20 s, then every %d min)',
|
||||||
|
settings.intervalMinutes
|
||||||
|
);
|
||||||
|
schedulerTimer = setInterval(tick, intervalMs);
|
||||||
|
setTimeout(() => tick(), 20 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopUptimeMonitorScheduler() {
|
||||||
|
if (schedulerTimer) {
|
||||||
|
clearInterval(schedulerTimer);
|
||||||
|
schedulerTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
initUptimeMonitorScheduler,
|
||||||
|
stopUptimeMonitorScheduler,
|
||||||
|
getSettingsFromUiSettings,
|
||||||
|
getNextRunAt,
|
||||||
|
};
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
/**
|
||||||
|
* Утилиты для шифрования/дешифрования данных
|
||||||
|
* Использует AES-256-GCM для шифрования паролей
|
||||||
|
*/
|
||||||
|
|
||||||
|
const crypto = require('crypto');
|
||||||
|
|
||||||
|
// Ключ шифрования из переменной окружения (обязателен для работы с IPSec паролями)
|
||||||
|
const ENCRYPTION_KEY = process.env.ENCRYPTION_KEY;
|
||||||
|
|
||||||
|
if (!ENCRYPTION_KEY) {
|
||||||
|
console.warn('WARNING: ENCRYPTION_KEY is not set. IPSec password encryption/decryption will fail.');
|
||||||
|
console.warn('Please set ENCRYPTION_KEY environment variable (64 hex characters for AES-256).');
|
||||||
|
console.warn('You can generate a key with: node -e "console.log(require(\'crypto\').randomBytes(32).toString(\'hex\'))"');
|
||||||
|
}
|
||||||
|
|
||||||
|
const ALGORITHM = 'aes-256-gcm';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Получить ключ шифрования (32 байта)
|
||||||
|
*/
|
||||||
|
function getEncryptionKey() {
|
||||||
|
if (!ENCRYPTION_KEY) {
|
||||||
|
throw new Error('ENCRYPTION_KEY environment variable is not set. Cannot encrypt/decrypt IPSec passwords.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Если ENCRYPTION_KEY - hex строка (64 символа для 32 байт), конвертируем в Buffer
|
||||||
|
if (ENCRYPTION_KEY.length === 64) {
|
||||||
|
try {
|
||||||
|
return Buffer.from(ENCRYPTION_KEY, 'hex');
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error(`Invalid ENCRYPTION_KEY format: not a valid hex string. ${error.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Иначе используем как UTF-8 строку и дополняем/обрезаем до 32 байт
|
||||||
|
const key = Buffer.from(ENCRYPTION_KEY, 'utf8');
|
||||||
|
if (key.length === 32) return key;
|
||||||
|
|
||||||
|
// Дополняем или обрезаем до 32 байт
|
||||||
|
const result = Buffer.alloc(32);
|
||||||
|
key.copy(result, 0, 0, Math.min(key.length, 32));
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Зашифровать текст
|
||||||
|
* @param {string} text - Текст для шифрования
|
||||||
|
* @returns {string} - Зашифрованная строка в формате iv:authTag:encryptedData (все в base64)
|
||||||
|
*/
|
||||||
|
function encrypt(text) {
|
||||||
|
if (!text) return '';
|
||||||
|
|
||||||
|
const key = getEncryptionKey();
|
||||||
|
const iv = crypto.randomBytes(16);
|
||||||
|
const cipher = crypto.createCipheriv(ALGORITHM, key, iv);
|
||||||
|
|
||||||
|
let encrypted = cipher.update(String(text), 'utf8', 'base64');
|
||||||
|
encrypted += cipher.final('base64');
|
||||||
|
|
||||||
|
const authTag = cipher.getAuthTag();
|
||||||
|
|
||||||
|
// Формат: iv:authTag:encryptedData (все в base64)
|
||||||
|
return `${iv.toString('base64')}:${authTag.toString('base64')}:${encrypted}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Расшифровать текст
|
||||||
|
* @param {string} encryptedText - Зашифрованная строка в формате iv:authTag:encryptedData
|
||||||
|
* @returns {string} - Расшифрованный текст
|
||||||
|
*/
|
||||||
|
function decrypt(encryptedText) {
|
||||||
|
if (!encryptedText) {
|
||||||
|
throw new Error('Encrypted text is empty');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof encryptedText !== 'string') {
|
||||||
|
throw new Error('Encrypted text must be a string');
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parts = encryptedText.split(':');
|
||||||
|
if (parts.length !== 3) {
|
||||||
|
throw new Error(`Invalid encrypted format: expected 3 parts separated by ':', got ${parts.length}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [ivBase64, authTagBase64, encryptedBase64] = parts;
|
||||||
|
|
||||||
|
if (!ivBase64 || !authTagBase64 || !encryptedBase64) {
|
||||||
|
throw new Error('Invalid encrypted format: one or more parts are empty');
|
||||||
|
}
|
||||||
|
|
||||||
|
let iv, authTag;
|
||||||
|
try {
|
||||||
|
iv = Buffer.from(ivBase64, 'base64');
|
||||||
|
authTag = Buffer.from(authTagBase64, 'base64');
|
||||||
|
} catch (bufferError) {
|
||||||
|
throw new Error(`Failed to decode base64: ${bufferError.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iv.length !== 16) {
|
||||||
|
throw new Error(`Invalid IV length: expected 16 bytes, got ${iv.length}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (authTag.length !== 16) {
|
||||||
|
throw new Error(`Invalid auth tag length: expected 16 bytes, got ${authTag.length}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const key = getEncryptionKey();
|
||||||
|
const decipher = crypto.createDecipheriv(ALGORITHM, key, iv);
|
||||||
|
decipher.setAuthTag(authTag);
|
||||||
|
|
||||||
|
let decrypted = decipher.update(encryptedBase64, 'base64', 'utf8');
|
||||||
|
decrypted += decipher.final('utf8');
|
||||||
|
|
||||||
|
return decrypted;
|
||||||
|
} catch (error) {
|
||||||
|
if (error.message.includes('Unsupported state') || error.message.includes('bad decrypt')) {
|
||||||
|
throw new Error(`Decryption failed: possibly wrong encryption key or corrupted data. Original error: ${error.message}`);
|
||||||
|
}
|
||||||
|
console.error('Decryption error details:', {
|
||||||
|
error: error.message,
|
||||||
|
encryptedTextLength: encryptedText.length
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
encrypt,
|
||||||
|
decrypt,
|
||||||
|
};
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
/**
|
/**
|
||||||
* Утилиты для генерации конфигурации MikroTik
|
* Утилиты для генерации конфигурации MikroTik
|
||||||
* Устраняют дублирование кода генерации конфигурации
|
* Устраняют дублирование кода генерации конфигурации
|
||||||
|
* Поддерживает форматы: 'text' (как раньше) и 'json' (структурированные данные для API)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const { buildNestedGatewayBlocks } = require('./helpers');
|
const { buildNestedGatewayBlocks } = require('./helpers');
|
||||||
@@ -8,10 +9,14 @@ const { buildNestedGatewayBlocks } = require('./helpers');
|
|||||||
/**
|
/**
|
||||||
* Генерация конфигурации MikroTik из массива фильтров
|
* Генерация конфигурации MikroTik из массива фильтров
|
||||||
* @param {Array} filters - Массив фильтров с полями {community, gateway}
|
* @param {Array} filters - Массив фильтров с полями {community, gateway}
|
||||||
* @returns {string} Сгенерированная конфигурация
|
* @param {object} options - { format: 'text'|'json' }
|
||||||
|
* @returns {string|object} Сгенерированная конфигурация (строка или объект)
|
||||||
*/
|
*/
|
||||||
function generateMikrotikConfig(filters) {
|
function generateMikrotikConfig(filters, options = {}) {
|
||||||
|
const { format = 'text' } = options;
|
||||||
|
|
||||||
if (!Array.isArray(filters) || filters.length === 0) {
|
if (!Array.isArray(filters) || filters.length === 0) {
|
||||||
|
if (format === 'json') return { gatewayGroups: {}, config: null };
|
||||||
return '// No filters to generate configuration';
|
return '// No filters to generate configuration';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -24,6 +29,14 @@ function generateMikrotikConfig(filters) {
|
|||||||
gatewayGroups[filter.gateway].push(filter.community);
|
gatewayGroups[filter.gateway].push(filter.community);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (format === 'json') {
|
||||||
|
return {
|
||||||
|
gatewayGroups,
|
||||||
|
filterName: 'bgp-in-tmp',
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
let config = '// Frouting filter configuration for MikroTik 7.14+\n';
|
let config = '// Frouting filter configuration for MikroTik 7.14+\n';
|
||||||
config += '// Generated automatically\n';
|
config += '// Generated automatically\n';
|
||||||
config += `// Date: ${new Date().toISOString()}\n\n`;
|
config += `// Date: ${new Date().toISOString()}\n\n`;
|
||||||
|
|||||||
@@ -0,0 +1,404 @@
|
|||||||
|
/**
|
||||||
|
* Генератор конфигурации MikroTik для интерфейсов и маршрутов
|
||||||
|
* Поддерживает два формата вывода: 'text' (как раньше) и 'json' (структурированные операции для API)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} serverId
|
||||||
|
* @param {Array} servers
|
||||||
|
* @returns {object|null}
|
||||||
|
*/
|
||||||
|
function getServerInfo(serverId, servers) {
|
||||||
|
if (!serverId || !Array.isArray(servers)) return null;
|
||||||
|
return servers.find(s => s.id === serverId || s.ip === serverId || s.dns === serverId) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} parentId
|
||||||
|
* @param {object} config
|
||||||
|
* @param {Array} templateGateways
|
||||||
|
* @returns {object|null}
|
||||||
|
*/
|
||||||
|
function getParentGateway(parentId, config, templateGateways = null) {
|
||||||
|
if (!parentId || !config) return null;
|
||||||
|
|
||||||
|
if (Array.isArray(templateGateways)) {
|
||||||
|
const g = templateGateways.find(x => x.id === parentId);
|
||||||
|
if (g) return { parentType: 'gateway', ...g, ip: g.ip };
|
||||||
|
}
|
||||||
|
|
||||||
|
const gateway = config.gateways?.find(g => g.id === parentId);
|
||||||
|
if (gateway) return { parentType: 'gateway', ...gateway, ip: gateway.ip };
|
||||||
|
|
||||||
|
const iface = config.tunnelInterfaces?.find(i => i.id === parentId);
|
||||||
|
if (iface) {
|
||||||
|
return {
|
||||||
|
parentType: 'interface',
|
||||||
|
...iface,
|
||||||
|
remoteIp: iface.remoteIp,
|
||||||
|
localIp: iface.localIp,
|
||||||
|
name: iface.name,
|
||||||
|
interfaceType: iface.type,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Сериализация одной операции в строку RouterOS
|
||||||
|
* @param {object} op - { path, action, params }
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function operationToRouterOSLine(op) {
|
||||||
|
const { path, action, params } = op;
|
||||||
|
if (!path || !action) return '';
|
||||||
|
const pathStr = path.replace(/^\//, '').replace(/\//g, ' ');
|
||||||
|
const fullPath = pathStr ? `/${pathStr}` : '';
|
||||||
|
const parts = (params && typeof params === 'object')
|
||||||
|
? Object.entries(params)
|
||||||
|
.filter(([, v]) => v != null && v !== '')
|
||||||
|
.map(([k, v]) => {
|
||||||
|
const val = String(v);
|
||||||
|
if (val.includes(' ') || val.includes('"')) return `${k}="${val}"`;
|
||||||
|
return `${k}=${val}`;
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
return `${fullPath} ${action} ${parts.join(' ')}`.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Сериализация массива операций в текст
|
||||||
|
* @param {Array} operations
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function serializeOperationsToText(operations) {
|
||||||
|
if (!Array.isArray(operations)) return '';
|
||||||
|
return operations.map(op => operationToRouterOSLine(op)).filter(Boolean).join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Построение блоков MikroTik для интерфейсов
|
||||||
|
* @param {object} config - { tunnelInterfaces, gateways }
|
||||||
|
* @param {Array} servers
|
||||||
|
* @param {object} passwordMap - { [ipsecPasswordId]: decryptedPassword }
|
||||||
|
* @param {object} options - { format: 'text'|'json', serverId?: string }
|
||||||
|
* @returns {Promise<Array>}
|
||||||
|
*/
|
||||||
|
async function buildMikrotikInterfaceBlocks(config, servers, passwordMap, options = {}) {
|
||||||
|
const { format = 'text', serverId: filterServerId } = options;
|
||||||
|
const interfaces = (config.tunnelInterfaces || []).filter(
|
||||||
|
i => i.serverId && i.serverId2 && i.localIp && i.remoteIp
|
||||||
|
);
|
||||||
|
|
||||||
|
if (interfaces.length === 0) return [];
|
||||||
|
|
||||||
|
const interfacesByServer = {};
|
||||||
|
for (const iface of interfaces) {
|
||||||
|
const server1 = getServerInfo(iface.serverId, servers);
|
||||||
|
const server2 = getServerInfo(iface.serverId2, servers);
|
||||||
|
if (!server1 || !server2) continue;
|
||||||
|
|
||||||
|
const server1Name = server1.dns || server1.ip || iface.serverId;
|
||||||
|
const server2Name = server2.dns || server2.ip || iface.serverId2;
|
||||||
|
const interfaceName1 = iface.name || `${iface.type}-tunnel`;
|
||||||
|
const interfaceName2 = iface.name2 || iface.name || `${iface.type}-tunnel`;
|
||||||
|
|
||||||
|
const ipsecPassword = (iface.ipsecPasswordId && passwordMap[iface.ipsecPasswordId]) || null;
|
||||||
|
|
||||||
|
if (!interfacesByServer[server1Name]) {
|
||||||
|
interfacesByServer[server1Name] = { serverInfo: server1, interfaces: [] };
|
||||||
|
}
|
||||||
|
interfacesByServer[server1Name].interfaces.push({
|
||||||
|
interfaceName: interfaceName1,
|
||||||
|
localIp: iface.localIp,
|
||||||
|
remoteIp: iface.remoteIp,
|
||||||
|
type: iface.type,
|
||||||
|
server2Name,
|
||||||
|
server2Info: server2,
|
||||||
|
ipsecPassword,
|
||||||
|
mtu: iface.mtu || null,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!interfacesByServer[server2Name]) {
|
||||||
|
interfacesByServer[server2Name] = { serverInfo: server2, interfaces: [] };
|
||||||
|
}
|
||||||
|
interfacesByServer[server2Name].interfaces.push({
|
||||||
|
interfaceName: interfaceName2,
|
||||||
|
localIp: iface.remoteIp,
|
||||||
|
remoteIp: iface.localIp,
|
||||||
|
type: iface.type,
|
||||||
|
server2Name: server1Name,
|
||||||
|
server2Info: server1,
|
||||||
|
ipsecPassword,
|
||||||
|
mtu: iface.mtu || null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortedServers = Object.entries(interfacesByServer).sort(([a], [b]) => a.localeCompare(b));
|
||||||
|
const blocks = [];
|
||||||
|
|
||||||
|
for (const [serverName, serverData] of sortedServers) {
|
||||||
|
if (filterServerId) {
|
||||||
|
const s = getServerInfo(filterServerId, servers);
|
||||||
|
const matchName = s ? (s.dns || s.ip || filterServerId) : filterServerId;
|
||||||
|
if (serverName !== matchName && serverData.serverInfo?.id !== filterServerId) continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = serverData.serverInfo;
|
||||||
|
const isHomeRouter = server.type === 'home';
|
||||||
|
const hasGreInterfaces = serverData.interfaces.some(i => i.type === 'GRE');
|
||||||
|
|
||||||
|
const operations = [];
|
||||||
|
let code = '';
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
code += `# Настройка IP адресов интерфейсов для сервера: ${serverName}\n`;
|
||||||
|
if (server.provider) code += `# Провайдер: ${server.provider}\n`;
|
||||||
|
if (server.country) code += `# Страна: ${server.country}\n`;
|
||||||
|
if (server.ip && server.ip !== serverName) code += `# IP: ${server.ip}\n`;
|
||||||
|
code += '\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isHomeRouter && hasGreInterfaces) {
|
||||||
|
if (format === 'text') {
|
||||||
|
code += `# Создание interface list для GRE туннелей (если не существует)\n`;
|
||||||
|
code += `:if ([/interface list find name=GREs] = "") do={ /interface list add name=GREs comment="GRE tunnels list" }\n\n`;
|
||||||
|
} else {
|
||||||
|
operations.push({
|
||||||
|
path: '/interface/list',
|
||||||
|
action: 'add',
|
||||||
|
params: { name: 'GREs', comment: 'GRE tunnels list' },
|
||||||
|
meta: { ensureExists: true },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < serverData.interfaces.length; i++) {
|
||||||
|
const iface = serverData.interfaces[i];
|
||||||
|
const remoteAddress = iface.server2Info?.dns || iface.server2Info?.ip || iface.server2Name;
|
||||||
|
const hasIpsecPassword = iface.ipsecPassword && String(iface.ipsecPassword).trim() !== '';
|
||||||
|
const localAddressParam = isHomeRouter && server.ip ? server.ip : null;
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
code += `# Интерфейс ${i + 1}: ${iface.interfaceName} (${iface.type})\n`;
|
||||||
|
code += `# Связь с сервером: ${iface.server2Name}\n`;
|
||||||
|
code += `# Local IP: ${iface.localIp}\n`;
|
||||||
|
code += `# Remote IP: ${iface.remoteIp}\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iface.type === 'GRE') {
|
||||||
|
const greParams = {
|
||||||
|
name: iface.interfaceName,
|
||||||
|
'remote-address': remoteAddress,
|
||||||
|
'keepalive': '10s',
|
||||||
|
'allow-fast-path': 'no',
|
||||||
|
};
|
||||||
|
if (localAddressParam) greParams['local-address'] = localAddressParam;
|
||||||
|
if (iface.mtu) greParams.mtu = String(iface.mtu);
|
||||||
|
if (hasIpsecPassword) greParams['ipsec-secret'] = iface.ipsecPassword;
|
||||||
|
|
||||||
|
const op = { path: '/interface/gre', action: 'add', params: greParams };
|
||||||
|
operations.push(op);
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
if (hasIpsecPassword) code += `# Создание GRE туннеля с IPSec\n`;
|
||||||
|
else code += `# Создание GRE туннеля (без IPSec)\n`;
|
||||||
|
code += operationToRouterOSLine(op) + '\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isHomeRouter) {
|
||||||
|
const listOp = {
|
||||||
|
path: '/interface/list/member',
|
||||||
|
action: 'add',
|
||||||
|
params: { list: 'GREs', interface: iface.interfaceName, comment: `GRE tunnel to ${iface.server2Name}` },
|
||||||
|
};
|
||||||
|
operations.push(listOp);
|
||||||
|
if (format === 'text') code += operationToRouterOSLine(listOp) + '\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addrOp = {
|
||||||
|
path: '/ip/address',
|
||||||
|
action: 'add',
|
||||||
|
params: {
|
||||||
|
address: `${iface.localIp}/30`,
|
||||||
|
interface: iface.interfaceName,
|
||||||
|
comment: `Interface: ${iface.interfaceName} (${iface.type}) to ${iface.server2Name}`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
operations.push(addrOp);
|
||||||
|
if (format === 'text') code += operationToRouterOSLine(addrOp) + '\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
code += '# Проверка настроенных адресов:\n';
|
||||||
|
code += '# /ip address print\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
blocks.push({
|
||||||
|
type: 'interface-addresses',
|
||||||
|
serverName,
|
||||||
|
server,
|
||||||
|
...(format === 'text' ? { code } : { operations }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Построение блоков для рекурсивных маршрутов
|
||||||
|
* @param {object} config
|
||||||
|
* @param {Array} servers
|
||||||
|
* @param {object} options - { format: 'text'|'json', serverId?: string }
|
||||||
|
* @returns {Promise<Array>}
|
||||||
|
*/
|
||||||
|
async function buildMikrotikRecursiveRoutes(config, servers, options = {}) {
|
||||||
|
const { format = 'text', serverId: filterServerId } = options;
|
||||||
|
const recursiveGateways = (config.gateways || []).filter(g => g.type === 'recursive');
|
||||||
|
const blocks = [];
|
||||||
|
|
||||||
|
if (recursiveGateways.length === 0) return [];
|
||||||
|
|
||||||
|
const gatewaysByServer = {};
|
||||||
|
for (const gw of recursiveGateways) {
|
||||||
|
const sid = gw.serverId || '__unassigned__';
|
||||||
|
if (!gatewaysByServer[sid]) gatewaysByServer[sid] = [];
|
||||||
|
gatewaysByServer[sid].push(gw);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [sid, gateways] of Object.entries(gatewaysByServer)) {
|
||||||
|
const server = getServerInfo(sid, servers);
|
||||||
|
const serverName = server?.dns || server?.ip || sid;
|
||||||
|
|
||||||
|
if (filterServerId && sid !== filterServerId) continue;
|
||||||
|
|
||||||
|
const operations = [];
|
||||||
|
let code = '';
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
code += `# Рекурсивные маршруты для сервера: ${serverName}\n`;
|
||||||
|
if (server?.provider) code += `# Провайдер: ${server.provider}\n`;
|
||||||
|
if (server?.country) code += `# Страна: ${server.country}\n`;
|
||||||
|
code += '\n';
|
||||||
|
code += '# Удаление старых рекурсивных маршрутов (comment начинается с "Recursive: ")\n';
|
||||||
|
code += '/ip route remove [find comment~"^Recursive: "] \n\n';
|
||||||
|
} else {
|
||||||
|
operations.push({
|
||||||
|
path: '/ip/route',
|
||||||
|
action: 'remove',
|
||||||
|
params: {},
|
||||||
|
meta: { findComment: '^Recursive: ' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let validCount = 0;
|
||||||
|
|
||||||
|
for (const gw of gateways) {
|
||||||
|
const parentGatewaysList = (gw.parentGateways && gw.parentGateways.length > 0)
|
||||||
|
? gw.parentGateways
|
||||||
|
: (gw.parentGatewayId ? [{ id: gw.parentGatewayId, distance: undefined }] : []);
|
||||||
|
|
||||||
|
if (parentGatewaysList.length === 0 || !gw.ip) continue;
|
||||||
|
|
||||||
|
for (const parentRef of parentGatewaysList) {
|
||||||
|
const parent = getParentGateway(parentRef.id, config);
|
||||||
|
if (!parent) continue;
|
||||||
|
|
||||||
|
const parentIp = parent.parentType === 'interface' ? parent.remoteIp : parent.ip;
|
||||||
|
if (!parentIp) continue;
|
||||||
|
|
||||||
|
validCount++;
|
||||||
|
const gatewayValue = parent.parentType === 'interface'
|
||||||
|
? `${parentIp}%${parent.name || parent.interfaceType || 'interface'}`
|
||||||
|
: parentIp;
|
||||||
|
const distance = parentRef.distance;
|
||||||
|
const comment = gw.description
|
||||||
|
? `Recursive: ${gw.description} -> ${parentIp}`
|
||||||
|
: `Recursive: ${gw.ip} -> ${parentIp}`;
|
||||||
|
|
||||||
|
const routeParams = {
|
||||||
|
'dst-address': `${gw.ip}/32`,
|
||||||
|
gateway: gatewayValue,
|
||||||
|
comment,
|
||||||
|
};
|
||||||
|
if (distance != null) routeParams.distance = String(distance);
|
||||||
|
|
||||||
|
const op = { path: '/ip/route', action: 'add', params: routeParams };
|
||||||
|
operations.push(op);
|
||||||
|
|
||||||
|
if (format === 'text') {
|
||||||
|
code += `# Рекурсивный gateway: ${gw.ip}\n`;
|
||||||
|
code += operationToRouterOSLine(op) + '\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (gw.description && (gw.description.toLowerCase().includes('default') || gw.description.toLowerCase().includes('0.0.0.0'))) {
|
||||||
|
const defaultParams = {
|
||||||
|
'dst-address': '0.0.0.0/0',
|
||||||
|
gateway: gatewayValue,
|
||||||
|
comment: `Recursive: ${gw.description || gw.ip} (default)`,
|
||||||
|
};
|
||||||
|
if (distance != null) defaultParams.distance = String(distance);
|
||||||
|
const defaultOp = { path: '/ip/route', action: 'add', params: defaultParams };
|
||||||
|
operations.push(defaultOp);
|
||||||
|
if (format === 'text') code += operationToRouterOSLine(defaultOp) + '\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validCount > 0) {
|
||||||
|
if (format === 'text') {
|
||||||
|
code += '# Проверка: /ip route print where comment~"Recursive"\n';
|
||||||
|
}
|
||||||
|
blocks.push({
|
||||||
|
type: 'recursive-routes',
|
||||||
|
serverName,
|
||||||
|
server,
|
||||||
|
...(format === 'text' ? { code } : { operations }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Комбинированная генерация: интерфейсы + рекурсивные маршруты
|
||||||
|
* @param {object} config
|
||||||
|
* @param {Array} servers
|
||||||
|
* @param {object} passwordMap
|
||||||
|
* @param {object} options - { format: 'text'|'json', serverId?: string, includeInterfaces?: boolean, includeRecursive?: boolean }
|
||||||
|
*/
|
||||||
|
async function buildMikrotikConfig(config, servers, passwordMap, options = {}) {
|
||||||
|
const {
|
||||||
|
format = 'text',
|
||||||
|
serverId,
|
||||||
|
includeInterfaces = true,
|
||||||
|
includeRecursive = true,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const opts = { format, serverId };
|
||||||
|
const blocks = [];
|
||||||
|
|
||||||
|
if (includeInterfaces) {
|
||||||
|
const ifBlocks = await buildMikrotikInterfaceBlocks(config, servers, passwordMap, opts);
|
||||||
|
blocks.push(...ifBlocks);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (includeRecursive) {
|
||||||
|
const recBlocks = await buildMikrotikRecursiveRoutes(config, servers, opts);
|
||||||
|
blocks.push(...recBlocks);
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getServerInfo,
|
||||||
|
getParentGateway,
|
||||||
|
operationToRouterOSLine,
|
||||||
|
serializeOperationsToText,
|
||||||
|
buildMikrotikInterfaceBlocks,
|
||||||
|
buildMikrotikRecursiveRoutes,
|
||||||
|
buildMikrotikConfig,
|
||||||
|
};
|
||||||
+20
-8
@@ -15,25 +15,37 @@ s3/
|
|||||||
│ ├── simple-filters.json # Фильтры упрощённого режима
|
│ ├── simple-filters.json # Фильтры упрощённого режима
|
||||||
│ ├── server-filters-*.json # Фильтры для каждого сервера
|
│ ├── server-filters-*.json # Фильтры для каждого сервера
|
||||||
│ └── config-*.txt # Сгенерированные конфигурации MikroTik
|
│ └── config-*.txt # Сгенерированные конфигурации MikroTik
|
||||||
└── server-configs.json # Список серверов (в корне S3)
|
└── servers.json # Список серверов (в корне S3)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Описание файлов
|
## Описание файлов
|
||||||
|
|
||||||
### `server-configs.json`
|
### `servers.json`
|
||||||
Список всех серверов в расширенном режиме.
|
Список всех серверов. Содержит как jumphost (для EasySwitch), так и exit серверы.
|
||||||
|
|
||||||
|
**ВАЖНО**: API `/api/server-configs` возвращает только серверы с `type: "jumphost"`.
|
||||||
|
|
||||||
```json
|
```json
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id": "server-001",
|
"ip": "185.123.45.67",
|
||||||
"name": "SWE-HIPHOST",
|
"dns": "SWE-HIPHOST",
|
||||||
"description": "Шведский сервер для стриминга и игр",
|
"country": "SE",
|
||||||
"enabled": true,
|
"provider": "HipHost",
|
||||||
"createdAt": "2024-01-15T10:30:00.000Z"
|
"tunnel": "wg0",
|
||||||
|
"type": "jumphost",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "SWE-EXIT-1", "ip": "185.123.45.68", "comment": "Основной выход", "primary": true },
|
||||||
|
{ "name": "SWE-EXIT-2", "ip": "185.123.45.69", "comment": "Резервный выход", "primary": false }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Типы серверов:
|
||||||
|
- `jumphost` — основные серверы для маршрутизации (используются в EasySwitch)
|
||||||
|
- `exit` — выходные серверы (не попадают в EasySwitch)
|
||||||
|
|
||||||
### `filter-manager/simple-filters.json`
|
### `filter-manager/simple-filters.json`
|
||||||
Фильтры для упрощённого режима (применяются ко всем серверам).
|
Фильтры для упрощённого режима (применяются ко всем серверам).
|
||||||
```json
|
```json
|
||||||
|
|||||||
@@ -0,0 +1,112 @@
|
|||||||
|
{
|
||||||
|
"gateways": [
|
||||||
|
{
|
||||||
|
"id": "gw-cloudflare-swe",
|
||||||
|
"ip": "94.142.140.1",
|
||||||
|
"description": "Cloudflare Sweden - основной выход",
|
||||||
|
"serverId": "SWE-HIPHOST",
|
||||||
|
"country": "SWE",
|
||||||
|
"type": "direct"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gw-bunny-swe",
|
||||||
|
"ip": "94.142.140.2",
|
||||||
|
"description": "Bunny CDN Sweden",
|
||||||
|
"serverId": "SWE-HIPHOST",
|
||||||
|
"country": "SWE",
|
||||||
|
"type": "direct"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gw-telegram-nl",
|
||||||
|
"ip": "149.154.167.50",
|
||||||
|
"description": "Telegram DC2",
|
||||||
|
"serverId": "NL-AMSTERDAM",
|
||||||
|
"country": "NL",
|
||||||
|
"type": "direct"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gw-hetzner-de",
|
||||||
|
"ip": "195.100.30.21",
|
||||||
|
"description": "Hetzner Frankfurt",
|
||||||
|
"serverId": "DE-FRANKFURT",
|
||||||
|
"country": "DE",
|
||||||
|
"type": "direct"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gw-fastly-us",
|
||||||
|
"ip": "151.101.1.1",
|
||||||
|
"description": "Fastly US East",
|
||||||
|
"serverId": "US-NEWYORK",
|
||||||
|
"country": "US",
|
||||||
|
"type": "direct"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gw-recursive-swe",
|
||||||
|
"ip": "10.0.0.1",
|
||||||
|
"description": "Рекурсивный gateway через 94.142.140.1",
|
||||||
|
"serverId": "SWE-HIPHOST",
|
||||||
|
"country": "SWE",
|
||||||
|
"type": "recursive",
|
||||||
|
"parentGatewayId": "gw-cloudflare-swe"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tunnelInterfaces": [
|
||||||
|
{
|
||||||
|
"id": "if-gre-swe-de",
|
||||||
|
"name": "gre-swe-de",
|
||||||
|
"name2": "gre-de-swe",
|
||||||
|
"type": "GRE",
|
||||||
|
"localIp": "10.10.0.1",
|
||||||
|
"remoteIp": "10.10.0.2",
|
||||||
|
"serverId": "SWE-HIPHOST",
|
||||||
|
"serverId2": "DE-FRANKFURT"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "if-wg-swe-nl",
|
||||||
|
"name": "wg0",
|
||||||
|
"name2": "wg1",
|
||||||
|
"type": "WireGuard",
|
||||||
|
"localIp": "10.20.0.1",
|
||||||
|
"remoteIp": "10.20.0.2",
|
||||||
|
"serverId": "SWE-HIPHOST",
|
||||||
|
"serverId2": "NL-AMSTERDAM"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "if-gre-de-us",
|
||||||
|
"name": "gre-de-us",
|
||||||
|
"type": "GRE",
|
||||||
|
"localIp": "10.10.1.1",
|
||||||
|
"remoteIp": "10.10.1.2",
|
||||||
|
"serverId": "DE-FRANKFURT",
|
||||||
|
"serverId2": "US-NEWYORK"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "if-ipsec-nl-jp",
|
||||||
|
"name": "ipsec-nl-jp",
|
||||||
|
"type": "IPSec",
|
||||||
|
"localIp": "10.30.0.1",
|
||||||
|
"remoteIp": "10.30.0.2",
|
||||||
|
"serverId": "NL-AMSTERDAM"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ipPools": [
|
||||||
|
{
|
||||||
|
"id": "pool-gre",
|
||||||
|
"name": "GRE Tunnels",
|
||||||
|
"cidr": "10.10.0.0/16",
|
||||||
|
"description": "Пул для GRE туннелей между серверами"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "pool-wg",
|
||||||
|
"name": "WireGuard",
|
||||||
|
"cidr": "10.20.0.0/16",
|
||||||
|
"description": "Пул для WireGuard интерфейсов"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "pool-ipsec",
|
||||||
|
"name": "IPSec VPN",
|
||||||
|
"cidr": "10.30.0.0/16",
|
||||||
|
"description": "Пул для IPSec туннелей"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "server-001",
|
|
||||||
"name": "SWE-HIPHOST",
|
|
||||||
"description": "Шведский сервер для стриминга и игр",
|
|
||||||
"enabled": true,
|
|
||||||
"createdAt": "2024-01-15T10:30:00.000Z"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "server-002",
|
|
||||||
"name": "NL-AMSTERDAM",
|
|
||||||
"description": "Голландский сервер с низкой задержкой",
|
|
||||||
"enabled": true,
|
|
||||||
"createdAt": "2024-01-16T14:20:00.000Z"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "server-003",
|
|
||||||
"name": "DE-FRANKFURT",
|
|
||||||
"description": "Немецкий сервер для торрентов",
|
|
||||||
"enabled": false,
|
|
||||||
"createdAt": "2024-01-17T09:15:00.000Z"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "server-004",
|
|
||||||
"name": "US-NEWYORK",
|
|
||||||
"description": "Американский сервер для Netflix",
|
|
||||||
"enabled": true,
|
|
||||||
"createdAt": "2024-01-18T16:45:00.000Z"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "server-005",
|
|
||||||
"name": "JP-TOKYO",
|
|
||||||
"description": "Японский сервер для аниме и игр",
|
|
||||||
"enabled": true,
|
|
||||||
"createdAt": "2024-01-19T11:30:00.000Z"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"ip": "185.123.45.67",
|
||||||
|
"dns": "SWE-HIPHOST",
|
||||||
|
"country": "SE",
|
||||||
|
"provider": "HipHost",
|
||||||
|
"tunnel": "wg0",
|
||||||
|
"type": "jumphost",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "SWE-EXIT-1", "ip": "185.123.45.68", "comment": "Основной выход", "primary": true },
|
||||||
|
{ "name": "SWE-EXIT-2", "ip": "185.123.45.69", "comment": "Резервный выход", "primary": false }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "185.200.50.10",
|
||||||
|
"dns": "NL-AMSTERDAM",
|
||||||
|
"country": "NL",
|
||||||
|
"provider": "DataCenter NL",
|
||||||
|
"tunnel": "wg1",
|
||||||
|
"type": "jumphost",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "NL-EXIT-1", "ip": "185.200.50.11", "comment": "Амстердам выход", "primary": true }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "195.100.30.20",
|
||||||
|
"dns": "DE-FRANKFURT",
|
||||||
|
"country": "DE",
|
||||||
|
"provider": "Hetzner",
|
||||||
|
"tunnel": "wg2",
|
||||||
|
"type": "exit",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "DE-EXIT-MAIN", "ip": "195.100.30.21", "comment": "Франкфурт", "primary": true }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "104.200.100.50",
|
||||||
|
"dns": "US-NEWYORK",
|
||||||
|
"country": "US",
|
||||||
|
"provider": "DigitalOcean",
|
||||||
|
"tunnel": "wg3",
|
||||||
|
"type": "jumphost",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "US-EXIT-NYC", "ip": "104.200.100.51", "comment": "New York выход", "primary": true },
|
||||||
|
{ "name": "US-EXIT-LA", "ip": "104.200.100.52", "comment": "Los Angeles выход", "primary": false }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ip": "203.150.80.100",
|
||||||
|
"dns": "JP-TOKYO",
|
||||||
|
"country": "JP",
|
||||||
|
"provider": "Sakura Internet",
|
||||||
|
"tunnel": "wg4",
|
||||||
|
"type": "jumphost",
|
||||||
|
"gateways": [
|
||||||
|
{ "name": "JP-EXIT-1", "ip": "203.150.80.101", "comment": "Токио выход", "primary": true }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
# Таблицы: UX/UI по Tabler и проекту
|
||||||
|
|
||||||
|
Рекомендации по формированию таблиц в приложении — [Tabler Tables](https://docs.tabler.io/ui/components/tables/), [Preview](https://preview.tabler.io/tables.html).
|
||||||
|
|
||||||
|
## Классы (Tabler)
|
||||||
|
|
||||||
|
- **Базовые:** `table card-table table-vcenter table-nowrap mb-0`
|
||||||
|
- **Чередование строк:** `table-striped` — улучшает читаемость
|
||||||
|
- **Компактный режим:** `table-sm` — меньше отступы в ячейках
|
||||||
|
- **Обёртка:** `table-responsive` вокруг `<table>`
|
||||||
|
- **Обрезка длинного текста:** для ячейки использовать `td-truncate` (Tabler) или `text-truncate` + `max-width`
|
||||||
|
|
||||||
|
## Компонент DataTable
|
||||||
|
|
||||||
|
Используйте `DataTable` там, где подходит декларативное описание колонок и общие действия (сортировка, выбор, пагинация):
|
||||||
|
|
||||||
|
- `columns`: `{ key, title, sortable?, icon?, render?, tooltip? }` — для подсказки по заголовку задайте `tooltip`
|
||||||
|
- `striped={true}` по умолчанию
|
||||||
|
- `compact={true}` — компактные ячейки
|
||||||
|
- Колонка «Действия» получает класс `td-actions` (фиксированная минимальная ширина в проекте)
|
||||||
|
|
||||||
|
## Информативность и лаконичность
|
||||||
|
|
||||||
|
1. **Заголовки колонок** — короткие, при необходимости уточнение через `tooltip` (например, значение иконки замка).
|
||||||
|
2. **Действия в строке** — иконки с `Tooltip` и `aria-label`; колонка «Действия» справа, без лишнего текста.
|
||||||
|
3. **Копирование** — кнопка/иконка копирования рядом с ячейкой (IP, домен и т.д.) вместо дублирования в «Действия», если это основной сценарий.
|
||||||
|
4. **Пустое состояние** — через `emptyState` в DataTable или свой блок с призывом к действию (импорт, добавление).
|
||||||
|
|
||||||
|
## Доступность
|
||||||
|
|
||||||
|
- У заголовков: `scope="col"`.
|
||||||
|
- У таблицы: `role="grid"` при семантической сетке данных.
|
||||||
|
- Кнопки действий: `aria-label` и/или Tooltip.
|
||||||
|
|
||||||
|
## Где таблица своя, а не DataTable
|
||||||
|
|
||||||
|
В IPRangesManager, DomainsNewManager, ServerManager и др. таблицы рендерятся вручную. Для единообразия:
|
||||||
|
|
||||||
|
- Те же классы: `table card-table table-vcenter table-nowrap mb-0`, при желании `table-striped`.
|
||||||
|
- Заголовки: `th` с `scope="col"`, короткий текст, при необходимости иконка и тултип.
|
||||||
|
- Колонка действий: класс `td-actions` у `th` и `td`, кнопки с тултипами.
|
||||||
|
|
||||||
|
При рефакторинге страниц можно постепенно переводить такие таблицы на DataTable с описанием `columns` и общих обработчиков.
|
||||||
Generated
+861
-15
File diff suppressed because it is too large
Load Diff
+12
-3
@@ -6,18 +6,26 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
|
"build:check": "tsc -b && vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"@tabler/core": "^1.3.2",
|
"@tabler/core": "^1.3.2",
|
||||||
"@tabler/icons-react": "^3.34.0",
|
"@tabler/icons-react": "^3.34.0",
|
||||||
"axios": "^1.10.0",
|
|
||||||
"@tanstack/react-query": "^5.56.2",
|
"@tanstack/react-query": "^5.56.2",
|
||||||
|
"@tanstack/react-virtual": "^3.10.8",
|
||||||
|
"@xyflow/react": "^12.3.4",
|
||||||
|
"axios": "^1.10.0",
|
||||||
|
"diff": "^8.0.3",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-router-dom": "^6.30.1",
|
"react-router-dom": "^6.30.1",
|
||||||
"@xyflow/react": "^12.3.4"
|
"recharts": "^3.7.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.29.0",
|
"@eslint/js": "^9.29.0",
|
||||||
@@ -28,6 +36,7 @@
|
|||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.20",
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
"globals": "^16.2.0",
|
"globals": "^16.2.0",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
"vite": "^7.0.0"
|
"vite": "^7.0.0"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
|
|||||||
+310
-318
@@ -23,11 +23,9 @@ import {
|
|||||||
IconCopy
|
IconCopy
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||||
import S3MetaBar from './components/S3MetaBar.jsx';
|
|
||||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
|
||||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||||
@@ -40,7 +38,11 @@ import AccordionCard from './components/AccordionCard.jsx';
|
|||||||
import SavedFilters from './components/SavedFilters.jsx';
|
import SavedFilters from './components/SavedFilters.jsx';
|
||||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||||
import Tooltip from './components/Tooltip.jsx';
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
import Pagination from './components/Pagination.jsx';
|
||||||
|
import AddItemModal from './components/AddItemModal.jsx';
|
||||||
|
import FormModal from './components/FormModal.jsx';
|
||||||
import { getAsnName, getAsnNameSync } from './lib/asn.js';
|
import { getAsnName, getAsnNameSync } from './lib/asn.js';
|
||||||
|
import LastSaved from './components/LastSaved.jsx';
|
||||||
|
|
||||||
const API_URL = '/api';
|
const API_URL = '/api';
|
||||||
|
|
||||||
@@ -57,17 +59,18 @@ function ASNsNewManager() {
|
|||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
const searchTimer = useRef(null);
|
const searchTimer = useRef(null);
|
||||||
const didInit = useRef(false);
|
const didInit = useRef(false);
|
||||||
const [editingAsn, setEditingAsn] = useState(null);
|
|
||||||
const [editingValue, setEditingValue] = useState('');
|
const [editingValue, setEditingValue] = useState('');
|
||||||
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
|
const [itemBeingEdited, setItemBeingEdited] = useState(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [itemToDelete, setItemToDelete] = useState(null);
|
const [itemToDelete, setItemToDelete] = useState(null);
|
||||||
|
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [totalItems, setTotalItems] = useState(0);
|
const [totalItems, setTotalItems] = useState(0);
|
||||||
const [sortField, setSortField] = useState('asn');
|
const [sortField, setSortField] = useState('asn');
|
||||||
const [sortOrder, setSortOrder] = useState('asc');
|
const [sortOrder, setSortOrder] = useState('asc');
|
||||||
const [filterCommunity, setFilterCommunity] = useState('');
|
const [filterCommunity, setFilterCommunity] = useState('');
|
||||||
const editInputRef = useRef(null);
|
|
||||||
const pageSize = 10;
|
const pageSize = 10;
|
||||||
const [asnNameMap, setAsnNameMap] = useState({});
|
const [asnNameMap, setAsnNameMap] = useState({});
|
||||||
const [selectedItems, setSelectedItems] = useState(new Set());
|
const [selectedItems, setSelectedItems] = useState(new Set());
|
||||||
@@ -97,16 +100,23 @@ function ASNsNewManager() {
|
|||||||
const [wsUrl, setWsUrl] = useState('');
|
const [wsUrl, setWsUrl] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Load WS URL once
|
const controller = new AbortController();
|
||||||
(async () => {
|
(async () => {
|
||||||
try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {}
|
try {
|
||||||
|
const r = await api.get('/ws/url', { signal: controller.signal });
|
||||||
|
setWsUrl(String(r.data?.url || ''));
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
|
return () => controller.abort();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchItems = async () => {
|
const fetchItems = async (abortSignal) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
const response = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' } });
|
const response = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' }, ...opts });
|
||||||
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
||||||
const mapped = payload.map(item => ({ asn: String(item.domain), community: String(item.type) }));
|
const mapped = payload.map(item => ({ asn: String(item.domain), community: String(item.type) }));
|
||||||
const total = mapped.length;
|
const total = mapped.length;
|
||||||
@@ -119,6 +129,7 @@ function ASNsNewManager() {
|
|||||||
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
||||||
setError('');
|
setError('');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Error fetching ASNs:', error);
|
console.error('Error fetching ASNs:', error);
|
||||||
setError('Не удалось загрузить список ASN. Проверьте, запущен ли бэкенд.');
|
setError('Не удалось загрузить список ASN. Проверьте, запущен ли бэкенд.');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -126,41 +137,59 @@ function ASNsNewManager() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
|
useEffect(() => {
|
||||||
|
if (!didInit.current) {
|
||||||
|
didInit.current = true;
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchItems(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleAddItem = (item) => {
|
||||||
|
const asn = item?.asn || newItem.asn;
|
||||||
|
const community = item?.community || newItem.community;
|
||||||
|
|
||||||
|
const asnOk = isValidAsn(asn);
|
||||||
|
const communityOk = isValidCommunity(community);
|
||||||
|
|
||||||
const handleAddItem = () => {
|
|
||||||
const asnOk = isValidAsn(newItem.asn);
|
|
||||||
const communityOk = isValidCommunity(newItem.community);
|
|
||||||
setNewInvalid({ asn: !asnOk, community: !communityOk });
|
|
||||||
if (!asnOk || !communityOk) {
|
if (!asnOk || !communityOk) {
|
||||||
setError('Введите корректный номер ASN и числовой community.');
|
setError('Введите корректный номер ASN и числовой community.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setError('');
|
setError('');
|
||||||
setItems([...items, { asn: String(newItem.asn).trim(), community: String(newItem.community).trim() }]);
|
const newAsn = { asn: String(asn).trim(), community: String(community).trim() };
|
||||||
|
setItems([...items, newAsn]);
|
||||||
|
if (!item) {
|
||||||
setNewItem({ asn: '', community: '' });
|
setNewItem({ asn: '', community: '' });
|
||||||
setNewInvalid({ asn: false, community: false });
|
setNewInvalid({ asn: false, community: false });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEdit = (item) => {
|
const handleEdit = (item) => {
|
||||||
setEditingAsn(item.asn);
|
setItemBeingEdited(item);
|
||||||
setEditingValue(item.community);
|
setEditingValue(item.community);
|
||||||
|
setEditModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveEdit = (asn) => {
|
const handleSaveEdit = () => {
|
||||||
|
if (!itemBeingEdited) return;
|
||||||
if (!isValidCommunity(editingValue)) {
|
if (!isValidCommunity(editingValue)) {
|
||||||
setError('Community должен быть числом.');
|
setError('Community должен быть числом.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const updatedItems = items.map(i =>
|
const updatedItems = items.map(i =>
|
||||||
i.asn === asn ? { ...i, community: String(editingValue).trim() } : i
|
i.asn === itemBeingEdited.asn ? { ...i, community: String(editingValue).trim() } : i
|
||||||
);
|
);
|
||||||
setItems(updatedItems);
|
setItems(updatedItems);
|
||||||
setEditingAsn(null);
|
setEditModalOpen(false);
|
||||||
|
setItemBeingEdited(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancelEdit = () => {
|
const handleCancelEdit = () => {
|
||||||
setEditingAsn(null);
|
setEditModalOpen(false);
|
||||||
|
setItemBeingEdited(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteItem = (asnToDelete) => {
|
const handleDeleteItem = (asnToDelete) => {
|
||||||
@@ -468,13 +497,6 @@ function ASNsNewManager() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Улучшенный инлайн-редакт
|
|
||||||
useEffect(() => {
|
|
||||||
if (editingAsn && editInputRef.current) {
|
|
||||||
editInputRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [editingAsn]);
|
|
||||||
|
|
||||||
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKey = (e) => {
|
const onKey = (e) => {
|
||||||
@@ -487,13 +509,19 @@ function ASNsNewManager() {
|
|||||||
return () => window.removeEventListener('keydown', onKey);
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
||||||
|
|
||||||
const handleEditKeyDown = (e, asn) => {
|
const handleEditKeyDown = (e) => {
|
||||||
if (e.key === 'Enter') handleSaveEdit(asn);
|
if (e.key === 'Enter') {
|
||||||
if (e.key === 'Escape') handleCancelEdit();
|
e.preventDefault();
|
||||||
|
handleSaveEdit();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
handleCancelEdit();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
{error && (
|
{error && (
|
||||||
<ErrorAlert message={error} onClose={() => setError('')} />
|
<ErrorAlert message={error} onClose={() => setError('')} />
|
||||||
)}
|
)}
|
||||||
@@ -504,24 +532,21 @@ function ASNsNewManager() {
|
|||||||
<div>
|
<div>
|
||||||
<IconCheck className="icon alert-icon" />
|
<IconCheck className="icon alert-icon" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>{success}</div>
|
||||||
{success}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button
|
||||||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
type="button"
|
||||||
|
className="btn-close"
|
||||||
|
onClick={() => setSuccess('')}
|
||||||
|
></button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="ASNs"
|
title="ASNs"
|
||||||
pretitle={(
|
icon={<IconHash size={24} />}
|
||||||
<Breadcrumbs items={[
|
meta={<LastSaved timestamp={lastModified} variant="compact" />}
|
||||||
{ label: 'Главная', to: '/dashboard' },
|
actions={
|
||||||
{ label: 'Данные' },
|
|
||||||
{ label: 'ASNs' },
|
|
||||||
]} />
|
|
||||||
)}
|
|
||||||
actions={(
|
|
||||||
<PageHeaderActions
|
<PageHeaderActions
|
||||||
loading={loading}
|
loading={loading}
|
||||||
onPreview={handlePreviewDiff}
|
onPreview={handlePreviewDiff}
|
||||||
@@ -533,203 +558,92 @@ function ASNsNewManager() {
|
|||||||
disableExport={items.length === 0}
|
disableExport={items.length === 0}
|
||||||
onClear={clearInvalid}
|
onClear={clearInvalid}
|
||||||
disableClear={items.length === 0}
|
disableClear={items.length === 0}
|
||||||
onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
|
onClearCommunities={() => {
|
||||||
|
if (!filterCommunity) {
|
||||||
|
setError('Выберите community в фильтре для очистки');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setClearCommunitiesOpen(true);
|
||||||
|
}}
|
||||||
disableClearCommunities={items.length === 0 || !filterCommunity}
|
disableClearCommunities={items.length === 0 || !filterCommunity}
|
||||||
onSave={handleSaveChanges}
|
onSave={handleSaveChanges}
|
||||||
disableSave={loading}
|
disableSave={loading}
|
||||||
onHistory={() => setHistoryOpen(true)}
|
onHistory={() => setHistoryOpen(true)}
|
||||||
|
lastModified={lastModified}
|
||||||
onOnlineUpdate={() => setWsOpen(true)}
|
onOnlineUpdate={() => setWsOpen(true)}
|
||||||
onBackgroundUpdate={async () => {
|
onBackgroundUpdate={async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/update-bgp/background', { method: 'POST' });
|
const res = await fetch('/api/update-bgp/background', {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok || data.ok === false) {
|
if (!res.ok || data.ok === false) {
|
||||||
throw new Error(data?.message || `HTTP ${res.status}`);
|
throw new Error(data?.message || `HTTP ${res.status}`);
|
||||||
}
|
}
|
||||||
notifyMutationSuccess('Фоновое обновление запущено', data);
|
notifyMutationSuccess('Фоновое обновление запущено', data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
|
window.notify?.error(
|
||||||
}
|
'Не удалось запустить фоновое обновление',
|
||||||
}}
|
String(e),
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-lg-3">
|
|
||||||
{/* Classic Add New ASN Card (improved) */}
|
|
||||||
<div className="card card-md animate-in">
|
|
||||||
<div className="card-header bg-primary-lt">
|
|
||||||
<h3 className="card-title text-primary">
|
|
||||||
<IconPlus className="icon me-2" />
|
|
||||||
Добавить новый ASN
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label required">Номер AS</label>
|
|
||||||
<div className="input-icon">
|
|
||||||
<span className="input-icon-addon">
|
|
||||||
<IconHash size={18} />
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className={`form-control${newInvalid.asn ? ' is-invalid' : isValidAsn(newItem.asn) ? ' is-valid' : ''}`}
|
|
||||||
placeholder="12345"
|
|
||||||
value={newItem.asn}
|
|
||||||
onChange={(e) => setNewItem({ ...newItem, asn: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{newInvalid.asn && <div className="invalid-feedback">Только цифры</div>}
|
|
||||||
{isValidAsn(newItem.asn) && !newInvalid.asn && (<div className="valid-feedback">Корректный номер AS</div>)}
|
|
||||||
<div className="form-text text-muted small">Формат: только цифры, например 12345</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label required">Community</label>
|
|
||||||
<div className="input-icon">
|
|
||||||
<span className="input-icon-addon">
|
|
||||||
<IconHash size={18} />
|
|
||||||
</span>
|
|
||||||
<CommunityAutocompleteInput
|
|
||||||
value={newItem.community}
|
|
||||||
onChange={(v) => setNewItem({ ...newItem, community: v })}
|
|
||||||
communities={communities}
|
|
||||||
placeholder="Начните вводить номер или имя"
|
|
||||||
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
|
|
||||||
{isValidCommunity(newItem.community) && !newInvalid.community && (<div className="valid-feedback">Корректный формат community</div>)}
|
|
||||||
<div className="form-text">Формат: N или N:N (например 65000:100)</div>
|
|
||||||
{(() => {
|
|
||||||
const match = communities.find(c => c.value === String(newItem.community).trim());
|
|
||||||
if (!match) return null;
|
|
||||||
return (
|
|
||||||
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div>
|
|
||||||
<strong>{match.name || match.value}</strong>
|
|
||||||
{match.description && <div className="text-muted small">{match.description}</div>}
|
|
||||||
{match.tags && match.tags.length > 0 && (
|
|
||||||
<div className="mt-1">
|
|
||||||
{match.tags.map((tag, idx) => (<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
<div className="form-footer">
|
|
||||||
<button type="submit" className="btn btn-primary w-100" disabled={!isValidAsn(newItem.asn) || !isValidCommunity(newItem.community)}>
|
|
||||||
<IconPlus className="icon me-2" />
|
|
||||||
Добавить ASN
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Дополнительные варианты */}
|
|
||||||
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
|
|
||||||
<QuickAddBar
|
|
||||||
placeholder={'12345 65000:100'}
|
|
||||||
help={'Вставьте строки: ASN ПРОБЕЛ COMMUNITY'}
|
|
||||||
parseLine={(line) => { const [a, c] = String(line).split(/\s+/); return { asn: (a||'').trim(), community: (c||'').trim() }; }}
|
|
||||||
validateItem={(obj) => isValidAsn(obj.asn) && isValidCommunity(obj.community)}
|
|
||||||
onApply={(list) => {
|
|
||||||
setItems(prev => {
|
|
||||||
const merged = [...prev, ...list];
|
|
||||||
const map = new Map();
|
|
||||||
for (const it of merged) {
|
|
||||||
const key = String(it.asn).trim();
|
|
||||||
if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
|
|
||||||
}
|
}
|
||||||
return Array.from(map.values());
|
|
||||||
});
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="card card-md border-dashed mt-3 animate-in"
|
|
||||||
style={{animationDelay: '0.15s'}}
|
|
||||||
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
|
|
||||||
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
|
|
||||||
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
|
|
||||||
>
|
|
||||||
<div className="card-body text-center text-muted py-4">
|
|
||||||
<IconUpload size={32} className="mb-2 text-muted" />
|
|
||||||
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
|
|
||||||
<div className="small">Формат: ASN community</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionCard>
|
|
||||||
|
|
||||||
|
|
||||||
{/* Карточка действий больше не нужна — действия перенесены в page-header */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-lg-9">
|
|
||||||
{/* BulkActionsBar */}
|
|
||||||
<BulkActionsBar
|
|
||||||
selectedCount={selectedItems.size}
|
|
||||||
totalCount={paginatedItems.length}
|
|
||||||
onSelectAll={selectAll}
|
|
||||||
onDeselectAll={deselectAll}
|
|
||||||
onDelete={selectedItems.size > 0 ? () => {
|
|
||||||
if (confirm(`Удалить ${selectedItems.size} записей?`)) {
|
|
||||||
handleBulkDelete();
|
|
||||||
}
|
}
|
||||||
} : null}
|
|
||||||
onExport={selectedItems.size > 0 ? handleBulkExport : null}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="card">
|
<AddItemModal
|
||||||
<div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
|
open={addModalOpen}
|
||||||
<h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
|
onClose={() => setAddModalOpen(false)}
|
||||||
<div className="d-flex gap-2 flex-wrap">
|
onSubmit={handleAddItem}
|
||||||
<SavedFilters
|
type="asn"
|
||||||
pageKey="asns"
|
communities={communities}
|
||||||
currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
|
loading={loading}
|
||||||
onApplyFilter={(filters) => {
|
|
||||||
setSearchTerm(filters.searchTerm || '');
|
|
||||||
setFilterCommunity(filters.filterCommunity || '');
|
|
||||||
setSortField(filters.sortField || 'asn');
|
|
||||||
setSortOrder(filters.sortOrder || 'asc');
|
|
||||||
setCurrentPage(1);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
{/* Фильтр по community */}
|
|
||||||
<div className="input-icon">
|
<div className="card card-flat">
|
||||||
|
<div className="card-header">
|
||||||
|
<div className="row align-items-center w-100 g-2">
|
||||||
|
<div className="col">
|
||||||
|
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<IconHash className="icon text-muted" size={18} />
|
||||||
|
<span className="text-muted text-uppercase small">Список</span>
|
||||||
|
<span className="badge bg-blue-lt text-blue">
|
||||||
|
{filtered.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-none d-md-block text-muted small">
|
||||||
|
Всего записей: {filtered.length}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 mt-2"></div>
|
||||||
|
<div className="col d-flex gap-2 flex-wrap align-items-center">
|
||||||
|
<div className="input-icon" style={{ minWidth: '200px' }}>
|
||||||
<span className="input-icon-addon">
|
<span className="input-icon-addon">
|
||||||
<IconFilter size={18} />
|
<IconFilter size={18} />
|
||||||
</span>
|
</span>
|
||||||
<select
|
<select
|
||||||
className="form-select"
|
className="form-select"
|
||||||
style={{ minWidth: '200px' }}
|
|
||||||
value={filterCommunity}
|
value={filterCommunity}
|
||||||
onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
|
onChange={(e) => {
|
||||||
title={(() => {
|
setFilterCommunity(e.target.value);
|
||||||
const meta = communities.find(c => String(c.value) === String(filterCommunity));
|
setCurrentPage(1);
|
||||||
if (!meta) return 'Все community';
|
}}
|
||||||
const name = meta.name ? meta.name + ' — ' : '';
|
|
||||||
const desc = meta.description || '';
|
|
||||||
const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
|
|
||||||
return name + desc + tags;
|
|
||||||
})()}
|
|
||||||
>
|
>
|
||||||
<option value="">Все community</option>
|
<option value="">Все community</option>
|
||||||
{allCommunities.map(community => {
|
{allCommunities.map((community) => (
|
||||||
const meta = communities.find(c => String(c.value) === String(community));
|
<option key={community} value={String(community)}>
|
||||||
const label = meta && meta.name ? `${community} — ${meta.name}` : community;
|
{community}
|
||||||
const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
|
</option>
|
||||||
return (
|
))}
|
||||||
<option key={community} value={String(community)} title={title}>{label}</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
{/* Поиск */}
|
<div
|
||||||
<div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
|
className="input-icon flex-grow-1"
|
||||||
|
style={{ minWidth: '200px', position: 'relative' }}
|
||||||
|
>
|
||||||
<span className="input-icon-addon">
|
<span className="input-icon-addon">
|
||||||
<IconSearch size={18} />
|
<IconSearch size={18} />
|
||||||
</span>
|
</span>
|
||||||
@@ -738,7 +652,10 @@ function ASNsNewManager() {
|
|||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Поиск ASN..."
|
placeholder="Поиск ASN..."
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
onChange={(e) => {
|
||||||
|
setSearchTerm(e.target.value);
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}
|
||||||
aria-label="Поиск ASN"
|
aria-label="Поиск ASN"
|
||||||
style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
|
style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
|
||||||
/>
|
/>
|
||||||
@@ -746,45 +663,91 @@ function ASNsNewManager() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-ghost-secondary btn-icon btn-sm"
|
className="btn btn-ghost-secondary btn-icon btn-sm"
|
||||||
style={{ position: 'absolute', right: '0.25rem', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: '0.25rem',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
aria-label="Очистить поиск"
|
aria-label="Очистить поиск"
|
||||||
onClick={() => { setSearchTerm(''); setCurrentPage(1); }}
|
onClick={() => {
|
||||||
|
setSearchTerm('');
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<IconX size={16} />
|
<IconX size={16} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setAddModalOpen(true)}
|
||||||
|
title="Добавить новый ASN"
|
||||||
|
>
|
||||||
|
<IconPlus className="me-1" size={18} />
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
{/* Мета-информация будет показана внизу карточки */}
|
</div>
|
||||||
|
|
||||||
|
<div className="card-body p-0">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<TableSkeleton rows={10} cols={3} />
|
<TableSkeleton rows={10} cols={3} flat />
|
||||||
) : paginatedItems.length === 0 ? (
|
) : paginatedItems.length === 0 ? (
|
||||||
<TableEmpty cols={3}>
|
<TableEmpty cols={3} flat>
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="Нет ASN"
|
title="Нет ASN"
|
||||||
description="Импортируйте или добавьте записи, чтобы начать."
|
description="Импортируйте или добавьте записи, чтобы начать."
|
||||||
action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
|
action={
|
||||||
secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
|
<button className="btn btn-primary" onClick={handleImport}>
|
||||||
const header = ['asn','community'];
|
Импорт
|
||||||
const lines = [header, ['12345','65000:100']].map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(',')).join('\n');
|
</button>
|
||||||
const blob = new Blob([lines], { type: 'text/csv;charset=utf-8;' });
|
}
|
||||||
|
secondaryAction={
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={() => {
|
||||||
|
const header = ['asn', 'community'];
|
||||||
|
const lines = [header, ['12345', '65000:100']]
|
||||||
|
.map((r) =>
|
||||||
|
r
|
||||||
|
.map((x) =>
|
||||||
|
`"${(x ?? '').toString().replace(/"/g, '""')}"`,
|
||||||
|
)
|
||||||
|
.join(','),
|
||||||
|
)
|
||||||
|
.join('\n');
|
||||||
|
const blob = new Blob([lines], {
|
||||||
|
type: 'text/csv;charset=utf-8;',
|
||||||
|
});
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const a = document.createElement('a'); a.href = url; a.download = 'asns_sample.csv'; a.click(); URL.revokeObjectURL(url);
|
const a = document.createElement('a');
|
||||||
}}>Шаблон CSV</button>}
|
a.href = url;
|
||||||
|
a.download = 'asns_sample.csv';
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Шаблон CSV
|
||||||
|
</button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</TableEmpty>
|
</TableEmpty>
|
||||||
) : (
|
) : (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
<table className="table table-flat table-vcenter table-nowrap mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style={{width: '40px'}}>
|
<th style={{ width: '40px' }}>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.asn))}
|
checked={
|
||||||
|
paginatedItems.length > 0 &&
|
||||||
|
paginatedItems.every((i) => selectedItems.has(i.asn))
|
||||||
|
}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
selectAll();
|
selectAll();
|
||||||
@@ -795,27 +758,39 @@ function ASNsNewManager() {
|
|||||||
title="Выбрать все на странице"
|
title="Выбрать все на странице"
|
||||||
/>
|
/>
|
||||||
</th>
|
</th>
|
||||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('asn')}>
|
<th
|
||||||
|
className="cursor-pointer user-select-none"
|
||||||
|
onClick={() => handleSort('asn')}
|
||||||
|
>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<IconHash size={16} className="me-1 text-muted" />
|
<IconHash size={16} className="me-1 text-muted" />
|
||||||
Номер AS
|
Номер AS
|
||||||
{sortField === 'asn' && (
|
{sortField === 'asn' && (
|
||||||
<span className="ms-1">
|
<span className="ms-1">
|
||||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
{sortOrder === 'asc' ? (
|
||||||
|
<IconArrowUp size={14} />
|
||||||
|
) : (
|
||||||
|
<IconArrowDown size={14} />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>Имя AS</th>
|
||||||
Имя AS
|
<th
|
||||||
</th>
|
className="cursor-pointer user-select-none"
|
||||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
|
onClick={() => handleSort('community')}
|
||||||
|
>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<IconHash size={16} className="me-1 text-muted" />
|
<IconHash size={16} className="me-1 text-muted" />
|
||||||
Community
|
Community
|
||||||
{sortField === 'community' && (
|
{sortField === 'community' && (
|
||||||
<span className="ms-1">
|
<span className="ms-1">
|
||||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
{sortOrder === 'asc' ? (
|
||||||
|
<IconArrowUp size={14} />
|
||||||
|
) : (
|
||||||
|
<IconArrowDown size={14} />
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -825,7 +800,15 @@ function ASNsNewManager() {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{paginatedItems.map((item, idx) => (
|
{paginatedItems.map((item, idx) => (
|
||||||
<tr key={item.asn} className={editingAsn === item.asn ? 'table-active' : (selectedItems.has(item.asn) ? 'table-selected' : '')} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
|
<tr
|
||||||
|
key={item.asn}
|
||||||
|
className={
|
||||||
|
selectedItems.has(item.asn) ? 'table-selected' : ''
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<td>
|
<td>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@@ -860,36 +843,32 @@ function ASNsNewManager() {
|
|||||||
</td>
|
</td>
|
||||||
<td>{renderCommunityBadge(item.community)}</td>
|
<td>{renderCommunityBadge(item.community)}</td>
|
||||||
<td className="text-end">
|
<td className="text-end">
|
||||||
{editingAsn === item.asn ? (
|
<div
|
||||||
<>
|
className="btn-group btn-group-sm"
|
||||||
<CommunityAutocompleteInput
|
role="group"
|
||||||
value={editingValue}
|
aria-label={`Действия с ASN ${item.asn}`}
|
||||||
onChange={setEditingValue}
|
>
|
||||||
communities={communities}
|
|
||||||
onKeyDown={(e) => handleEditKeyDown(e, item.asn)}
|
|
||||||
className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
|
|
||||||
style={{ width: '150px' }}
|
|
||||||
/>
|
|
||||||
<Tooltip content="Сохранить (Enter)">
|
|
||||||
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip content="Отмена (Esc)">
|
|
||||||
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
|
|
||||||
</Tooltip>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Tooltip content="Редактировать" position="top">
|
<Tooltip content="Редактировать" position="top">
|
||||||
<button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать"><IconEdit size={16} /></button>
|
<button
|
||||||
</Tooltip>
|
className="btn btn-icon btn-outline-primary me-1"
|
||||||
<Tooltip content="Копировать" position="top">
|
aria-label="Редактировать"
|
||||||
<button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.asn} ${item.community}`)} title="Копировать"><IconCopy size={16} /></button>
|
onClick={() => handleEdit(item)}
|
||||||
|
title="Редактировать"
|
||||||
|
>
|
||||||
|
<IconEdit size={16} />
|
||||||
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip content="Удалить" position="top">
|
<Tooltip content="Удалить" position="top">
|
||||||
<button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить"><IconTrash size={16} /></button>
|
<button
|
||||||
|
className="btn btn-icon btn-outline-danger"
|
||||||
|
aria-label="Удалить"
|
||||||
|
onClick={() => confirmDelete(item)}
|
||||||
|
title="Удалить"
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
</div>
|
||||||
)}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@@ -897,68 +876,35 @@ function ASNsNewManager() {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Пагинация */}
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="card-footer">
|
|
||||||
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
|
||||||
<div className="text-muted small">
|
|
||||||
Показано <strong>{((currentPage - 1) * pageSize) + 1}</strong> - <strong>{((currentPage - 1) * pageSize) + paginatedItems.length}</strong> из <strong>{totalItems || filtered.length}</strong>
|
|
||||||
</div>
|
|
||||||
<ul className="pagination m-0">
|
|
||||||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} aria-label="Первая страница">
|
|
||||||
<IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1} aria-label="Предыдущая страница">
|
|
||||||
<IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
<span className="d-none d-sm-inline ms-1">Назад</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{(() => {
|
|
||||||
const pages = [];
|
|
||||||
let start = Math.max(1, currentPage - 2);
|
|
||||||
let end = Math.min(totalPages, currentPage + 2);
|
|
||||||
if (currentPage <= 3) end = Math.min(totalPages, 5);
|
|
||||||
if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
|
|
||||||
if (start > 1) pages.push('start-ellipsis');
|
|
||||||
for (let p = start; p <= end; p++) pages.push(p);
|
|
||||||
if (end < totalPages) pages.push('end-ellipsis');
|
|
||||||
return pages.map((p) => (
|
|
||||||
p === 'start-ellipsis' || p === 'end-ellipsis' ? (
|
|
||||||
<li key={p} className="page-item disabled"><span className="page-link">…</span></li>
|
|
||||||
) : (
|
|
||||||
<li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => setCurrentPage(p)} aria-label={`Страница ${p}`} aria-current={currentPage === p ? 'page' : undefined}>{p}</button>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
));
|
|
||||||
})()}
|
|
||||||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages} aria-label="Следующая страница">
|
|
||||||
<span className="d-none d-sm-inline me-1">Вперед</span>
|
|
||||||
<IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} aria-label="Последняя страница">
|
|
||||||
<IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<S3MetaBar keys={["asns"]} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="card-footer border-top-0">
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
totalItems={totalItems || filtered.length}
|
||||||
|
pageSize={pageSize}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BulkActionsBar
|
||||||
|
selectedCount={selectedItems.size}
|
||||||
|
totalCount={paginatedItems.length}
|
||||||
|
onDeselectAll={deselectAll}
|
||||||
|
onDelete={handleBulkDelete}
|
||||||
|
onExport={handleBulkExport}
|
||||||
|
/>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
open={showDeleteModal}
|
open={showDeleteModal}
|
||||||
title={'Удалить ASN?'}
|
title={'Удалить ASN?'}
|
||||||
message={!itemToDelete ? '' : `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`}
|
message={
|
||||||
|
!itemToDelete
|
||||||
|
? ''
|
||||||
|
: `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`
|
||||||
|
}
|
||||||
confirmText={'Удалить'}
|
confirmText={'Удалить'}
|
||||||
cancelText={'Отмена'}
|
cancelText={'Отмена'}
|
||||||
destructive
|
destructive
|
||||||
@@ -966,12 +912,14 @@ function ASNsNewManager() {
|
|||||||
onConfirm={executeDelete}
|
onConfirm={executeDelete}
|
||||||
onCancel={() => setShowDeleteModal(false)}
|
onCancel={() => setShowDeleteModal(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ConfirmDiffModal
|
<ConfirmDiffModal
|
||||||
show={confirmSaveOpen}
|
show={confirmSaveOpen}
|
||||||
diff={diff}
|
diff={diff}
|
||||||
onConfirm={performSave}
|
onConfirm={performSave}
|
||||||
onClose={() => setConfirmSaveOpen(false)}
|
onClose={() => setConfirmSaveOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ImportModal
|
<ImportModal
|
||||||
show={importOpen}
|
show={importOpen}
|
||||||
title={'Импорт ASN'}
|
title={'Импорт ASN'}
|
||||||
@@ -980,31 +928,75 @@ function ASNsNewManager() {
|
|||||||
validateItem={validateItem}
|
validateItem={validateItem}
|
||||||
onConfirm={applyImportedItems}
|
onConfirm={applyImportedItems}
|
||||||
onClose={() => setImportOpen(false)}
|
onClose={() => setImportOpen(false)}
|
||||||
sampleHeader={['asn','community']}
|
sampleHeader={['asn', 'community']}
|
||||||
placeholder={'12345 65000:100'}
|
placeholder={'12345 65000:100'}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<FormModal
|
||||||
|
show={editModalOpen && !!itemBeingEdited}
|
||||||
|
onClose={handleCancelEdit}
|
||||||
|
onSubmit={handleSaveEdit}
|
||||||
|
title="Редактировать community"
|
||||||
|
submitLabel="Сохранить"
|
||||||
|
submitIcon={IconCheck}
|
||||||
|
size="md"
|
||||||
|
centered
|
||||||
|
disabled={!isValidCommunity(editingValue)}
|
||||||
|
>
|
||||||
|
{itemBeingEdited && (
|
||||||
|
<>
|
||||||
|
<p className="text-muted mb-2">
|
||||||
|
ASN:{' '}
|
||||||
|
<span className="font-monospace">{itemBeingEdited.asn}</span>
|
||||||
|
</p>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Community</label>
|
||||||
|
<CommunityAutocompleteInput
|
||||||
|
value={editingValue}
|
||||||
|
onChange={setEditingValue}
|
||||||
|
communities={communities}
|
||||||
|
onKeyDown={handleEditKeyDown}
|
||||||
|
className={`form-control${
|
||||||
|
isValidCommunity(editingValue) ? '' : ' is-invalid'
|
||||||
|
}`}
|
||||||
|
useShortValue={true}
|
||||||
|
/>
|
||||||
|
{!isValidCommunity(editingValue) && (
|
||||||
|
<div className="invalid-feedback d-block">
|
||||||
|
Введите корректное значение community (число или N:N).
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormModal>
|
||||||
|
|
||||||
<HistoryModal
|
<HistoryModal
|
||||||
resource="asns"
|
resource="asns"
|
||||||
show={historyOpen}
|
show={historyOpen}
|
||||||
onClose={() => setHistoryOpen(false)}
|
onClose={() => setHistoryOpen(false)}
|
||||||
onRolledBack={() => fetchItems()}
|
onRolledBack={() => fetchItems()}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<WsUpdateModal
|
<WsUpdateModal
|
||||||
show={wsOpen}
|
show={wsOpen}
|
||||||
url={wsUrl}
|
url={wsUrl}
|
||||||
onClose={() => setWsOpen(false)}
|
onClose={() => setWsOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
open={clearCommunitiesOpen}
|
open={clearCommunitiesOpen}
|
||||||
title={'Удалить записи community'}
|
title={'Удалить записи community'}
|
||||||
message={`Будут удалены все записи с community "${filterCommunity}". Действие НЕ сохраняет изменения автоматически.`}
|
message={`Будут удалены все записи с community "${filterCommunity}". Действие НЕ сохраняет изменения автоматически.`}
|
||||||
confirmText={'Удалить'}
|
confirmText={'Удалить'}
|
||||||
cancelText={'Отмена'}
|
cancelText={'Отмена'}
|
||||||
onConfirm={() => { setItems(prev => prev.filter(i => i.community !== filterCommunity)); setClearCommunitiesOpen(false); }}
|
onConfirm={() => {
|
||||||
|
setItems((prev) => prev.filter((i) => i.community !== filterCommunity));
|
||||||
|
setClearCommunitiesOpen(false);
|
||||||
|
}}
|
||||||
onCancel={() => setClearCommunitiesOpen(false)}
|
onCancel={() => setClearCommunitiesOpen(false)}
|
||||||
/>
|
/>
|
||||||
{/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
|
</div>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+201
-3
@@ -1,5 +1,147 @@
|
|||||||
/* Custom styles for S3 Lists Manager */
|
/* Custom styles for S3 Lists Manager */
|
||||||
/* Most styles are now provided by @tabler/core */
|
/* Layout: Tabler Fluid Vertical (https://preview.tabler.io/layout-fluid-vertical.html) */
|
||||||
|
|
||||||
|
/* --- Fluid Vertical: page structure --- */
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Сайдбар: всегда тёмный (как на референсе Tabler) */
|
||||||
|
.navbar-vertical {
|
||||||
|
--tblr-body-color: rgba(255, 255, 255, 0.9);
|
||||||
|
--tblr-body-color-rgb: 255, 255, 255;
|
||||||
|
--tblr-border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
--tblr-bg-surface: #1e293b;
|
||||||
|
--tblr-bg-surface-hover: rgba(255, 255, 255, 0.05);
|
||||||
|
--tblr-navbar-active-bg: rgba(255, 255, 255, 0.08);
|
||||||
|
--tblr-navbar-active-color: #fff;
|
||||||
|
--tblr-primary: #6ea8fe;
|
||||||
|
--tblr-muted: rgba(255, 255, 255, 0.6);
|
||||||
|
background-color: #1e293b !important;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-brand,
|
||||||
|
.navbar-vertical .nav-link,
|
||||||
|
.navbar-vertical .dropdown-item {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-brand:hover,
|
||||||
|
.navbar-vertical .nav-link:hover,
|
||||||
|
.navbar-vertical .dropdown-item:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-link.active,
|
||||||
|
.navbar-vertical .dropdown-item.active {
|
||||||
|
background-color: var(--tblr-navbar-active-bg);
|
||||||
|
color: var(--tblr-navbar-active-color);
|
||||||
|
}
|
||||||
|
.navbar-vertical .dropdown-toggle::after {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-toggler {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
|
||||||
|
.navbar-vertical .navbar-brand {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-brand::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.navbar-vertical > .container-fluid {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
.navbar-vertical .collapse.navbar-collapse {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.navbar-vertical .collapse .navbar-nav.pt-lg-3 {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-sidebar-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
|
||||||
|
padding: 0.35rem;
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
border: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon .badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.2rem 0.35rem;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
|
||||||
|
.navbar-vertical .nav-link:not(.dropdown-toggle)::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar: nav-link with icon (Tabler vertical) */
|
||||||
|
.navbar-vertical .nav-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-link-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-link-icon .icon {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
/* Sidebar dropdown: inline submenu (no popup) */
|
||||||
|
.navbar-vertical .nav-item.dropdown .dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0.5rem 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-item.dropdown .dropdown-item {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-top: 0.35rem;
|
||||||
|
padding-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon .icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Custom avatar background */
|
/* Custom avatar background */
|
||||||
.avatar {
|
.avatar {
|
||||||
@@ -151,6 +293,60 @@
|
|||||||
/* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
|
/* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
|
||||||
(например, badge bg-blue-lt text-blue) */
|
(например, badge bg-blue-lt text-blue) */
|
||||||
|
|
||||||
|
/* --- Server sidebar (фильтры на /servers) — Tabler card + list-group --- */
|
||||||
|
.server-sidebar {
|
||||||
|
width: 280px;
|
||||||
|
min-width: 280px;
|
||||||
|
max-height: calc(100vh - 180px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.server-sidebar .card-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.server-sidebar .card-body.border-bottom,
|
||||||
|
.server-sidebar .card-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.server-sidebar-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 50vh;
|
||||||
|
}
|
||||||
|
.server-sidebar .filter-section .list-group-header {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: none;
|
||||||
|
color: var(--tblr-body-color);
|
||||||
|
}
|
||||||
|
.server-sidebar .filter-section .list-group-header:hover {
|
||||||
|
background-color: var(--tblr-bg-surface-tertiary);
|
||||||
|
}
|
||||||
|
.server-sidebar .list-group-item {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
padding-top: 0.375rem;
|
||||||
|
padding-bottom: 0.375rem;
|
||||||
|
}
|
||||||
|
/* Полные названия в фильтрах (без обрезания), перенос по словам */
|
||||||
|
.server-sidebar .list-group-item .text-break,
|
||||||
|
#server-filters-offcanvas .list-group-item span:first-of-type span {
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabler-style subheader (как на preview.tabler.io/settings.html) */
|
||||||
|
.subheader {
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--tblr-muted-color, #6c757d);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Responsive navbar */
|
/* Responsive navbar */
|
||||||
@media (max-width: 991.98px) {
|
@media (max-width: 991.98px) {
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
@@ -251,10 +447,12 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.header-actions .btn svg { width: 18px; height: 18px; }
|
.header-actions .btn svg { width: 18px; height: 18px; }
|
||||||
|
.header-actions .header-actions-right { flex-shrink: 0; }
|
||||||
|
|
||||||
/* Ensure dropdowns in header-actions overlay tables/cards correctly but stay below modals */
|
/* Ensure dropdowns in main content (and header) are above the sidebar, below modals */
|
||||||
.header-actions .dropdown-menu,
|
.header-actions .dropdown-menu,
|
||||||
.page-header .dropdown-menu {
|
.page-header .dropdown-menu,
|
||||||
|
.page-wrapper .dropdown-menu {
|
||||||
z-index: 1035; /* above navbar(1030), below modal-backdrop(1040) and modal(1050) */
|
z-index: 1035; /* above navbar(1030), below modal-backdrop(1040) and modal(1050) */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+276
-90
@@ -20,7 +20,14 @@ import {
|
|||||||
IconDownload,
|
IconDownload,
|
||||||
IconCreditCard,
|
IconCreditCard,
|
||||||
IconMenu2,
|
IconMenu2,
|
||||||
IconArrowsExchange
|
IconArrowsExchange,
|
||||||
|
IconLayoutSidebarLeftExpand,
|
||||||
|
IconLayoutNavbar,
|
||||||
|
IconChartPie,
|
||||||
|
IconChartBar,
|
||||||
|
IconClock,
|
||||||
|
IconClockPlay,
|
||||||
|
IconShield
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import ServerManager from './ServerManager';
|
import ServerManager from './ServerManager';
|
||||||
import FilterManager from './FilterManager';
|
import FilterManager from './FilterManager';
|
||||||
@@ -31,14 +38,26 @@ import ASNsNewManager from './ASNsNewManager';
|
|||||||
import AutoUrlManager from './AutoUrlManager';
|
import AutoUrlManager from './AutoUrlManager';
|
||||||
import BillingManager from './BillingManager';
|
import BillingManager from './BillingManager';
|
||||||
import CommunitiesManager from './CommunitiesManager';
|
import CommunitiesManager from './CommunitiesManager';
|
||||||
|
import NetworkConfigManager from './NetworkConfigManager';
|
||||||
|
import MikrotikTools from './MikrotikTools.jsx';
|
||||||
|
import InterfaceSpeedTest from './InterfaceSpeedTest.jsx';
|
||||||
import Dashboard from './Dashboard';
|
import Dashboard from './Dashboard';
|
||||||
|
import TrafficDashboard from './TrafficDashboard.jsx';
|
||||||
|
import NetworkMapDashboard from './NetworkMapDashboard.jsx';
|
||||||
|
import NetworkMapSchedulerPage from './NetworkMapSchedulerPage.jsx';
|
||||||
|
import UptimeMonitorPage from './UptimeMonitorPage.jsx';
|
||||||
|
import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
|
||||||
|
import PingServicesManager from './PingServicesManager.jsx';
|
||||||
|
import FirewallPage from './FirewallPage.jsx';
|
||||||
|
import SettingsPage from './SettingsPage.jsx';
|
||||||
|
import ResourceStatsPage from './ResourceStatsPage.jsx';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import { NotifyProvider } from './components/NotifyProvider.jsx';
|
import { NotifyProvider } from './components/NotifyProvider.jsx';
|
||||||
import SettingsModal from './components/SettingsModal.jsx';
|
|
||||||
import ToastContainer from './components/ToastContainer.jsx';
|
import ToastContainer from './components/ToastContainer.jsx';
|
||||||
import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
|
import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
|
||||||
import ErrorBoundary from './components/ErrorBoundary.jsx';
|
import ErrorBoundary from './components/ErrorBoundary.jsx';
|
||||||
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
|
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
|
||||||
|
import { PingProvider } from './contexts/PingContext.jsx';
|
||||||
|
|
||||||
// --- Simple i18n (RU/EN) ---
|
// --- Simple i18n (RU/EN) ---
|
||||||
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
|
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
|
||||||
@@ -49,17 +68,19 @@ function LanguageProvider({ children }) {
|
|||||||
const dict = {
|
const dict = {
|
||||||
ru: {
|
ru: {
|
||||||
home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
|
home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
|
||||||
dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
dashboard: 'Панель', trafficTraffic: 'Расход трафика', resourceStats: 'Статистика ресурсов', networkMap: 'Карта сети', uptimeMonitor: 'Uptime Monitor', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
||||||
communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
|
communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
|
||||||
easySwitch: 'Easy Switch',
|
easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы', pingServices: 'Пинг сервисов', firewall: 'Firewall',
|
||||||
light: 'Светлая', dark: 'Тёмная'
|
light: 'Светлая', dark: 'Тёмная',
|
||||||
|
layoutSidebar: 'Сайдбар', layoutHorizontal: 'Верхнее меню'
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
|
home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
|
||||||
dashboard: 'Dashboard', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
|
dashboard: 'Dashboard', trafficTraffic: 'Traffic Usage', resourceStats: 'Resource Stats', networkMap: 'Network Map', uptimeMonitor: 'Uptime Monitor', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
|
||||||
communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
|
communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
|
||||||
easySwitch: 'Easy Switch',
|
easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups', pingServices: 'Ping Services', firewall: 'Firewall',
|
||||||
light: 'Light', dark: 'Dark'
|
light: 'Light', dark: 'Dark',
|
||||||
|
layoutSidebar: 'Sidebar', layoutHorizontal: 'Top menu'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
|
const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
|
||||||
@@ -102,12 +123,14 @@ function App() {
|
|||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<LanguageProvider>
|
<LanguageProvider>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
|
<PingProvider>
|
||||||
<ToastContainer>
|
<ToastContainer>
|
||||||
<NotifyProvider>
|
<NotifyProvider>
|
||||||
<NetworkErrorHandler />
|
<NetworkErrorHandler />
|
||||||
<MainLayout />
|
<MainLayout />
|
||||||
</NotifyProvider>
|
</NotifyProvider>
|
||||||
</ToastContainer>
|
</ToastContainer>
|
||||||
|
</PingProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</LanguageProvider>
|
</LanguageProvider>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
@@ -116,12 +139,18 @@ function App() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const LAYOUT_FLUID = 'fluid';
|
||||||
|
const LAYOUT_HORIZONTAL = 'horizontal';
|
||||||
|
|
||||||
function MainLayout() {
|
function MainLayout() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { lang, setLang, t } = useContext(LanguageContext);
|
const { lang, setLang, t } = useContext(LanguageContext);
|
||||||
const { theme, setTheme } = useContext(ThemeContext);
|
const { theme, setTheme } = useContext(ThemeContext);
|
||||||
// Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
|
const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
|
||||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem('layout', layout);
|
||||||
|
}, [layout]);
|
||||||
|
|
||||||
// Состояние для управления выпадающими меню
|
// Состояние для управления выпадающими меню
|
||||||
const [dropdownStates, setDropdownStates] = useState({
|
const [dropdownStates, setDropdownStates] = useState({
|
||||||
@@ -130,10 +159,12 @@ function MainLayout() {
|
|||||||
tools: false
|
tools: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// Закрытие всех выпадающих меню при клике вне их области
|
// Закрытие выпадающих меню только при клике в сайдбаре вне открытого меню (клики по странице не закрывают)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (event) => {
|
const handleClickOutside = (event) => {
|
||||||
if (!event.target.closest('.nav-item.dropdown')) {
|
const inSidebar = event.target.closest('.navbar-vertical');
|
||||||
|
const inDropdown = event.target.closest('.nav-item.dropdown');
|
||||||
|
if (inSidebar && !inDropdown) {
|
||||||
setDropdownStates({
|
setDropdownStates({
|
||||||
data: false,
|
data: false,
|
||||||
management: false,
|
management: false,
|
||||||
@@ -169,8 +200,13 @@ function MainLayout() {
|
|||||||
id: 'home',
|
id: 'home',
|
||||||
title: t('home'),
|
title: t('home'),
|
||||||
icon: IconHome,
|
icon: IconHome,
|
||||||
path: '/dashboard',
|
items: [
|
||||||
single: true
|
{ id: 'dashboard', title: t('dashboard'), path: '/dashboard', icon: IconHome },
|
||||||
|
{ id: 'traffic', title: t('trafficTraffic'), path: '/traffic', icon: IconChartPie },
|
||||||
|
{ id: 'resource-stats', title: t('resourceStats'), path: '/resource-stats', icon: IconChartBar },
|
||||||
|
{ id: 'network-map', title: t('networkMap'), path: '/network-map', icon: IconNetwork },
|
||||||
|
{ id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'data',
|
id: 'data',
|
||||||
@@ -190,6 +226,7 @@ function MainLayout() {
|
|||||||
items: [
|
items: [
|
||||||
{ id: 'servers', title: t('servers'), path: '/servers', icon: IconServer },
|
{ id: 'servers', title: t('servers'), path: '/servers', icon: IconServer },
|
||||||
{ id: 'filters', title: t('filters'), path: '/filters', icon: IconFilter },
|
{ id: 'filters', title: t('filters'), path: '/filters', icon: IconFilter },
|
||||||
|
{ id: 'network-config', title: t('networkConfig'), path: '/network-config', icon: IconNetwork },
|
||||||
{ id: 'easy-switch', title: t('easySwitch'), path: '/easy-switch', icon: IconArrowsExchange },
|
{ id: 'easy-switch', title: t('easySwitch'), path: '/easy-switch', icon: IconArrowsExchange },
|
||||||
{ id: 'billing', title: t('billing'), path: '/billing', icon: IconCreditCard }
|
{ id: 'billing', title: t('billing'), path: '/billing', icon: IconCreditCard }
|
||||||
]
|
]
|
||||||
@@ -199,10 +236,23 @@ function MainLayout() {
|
|||||||
title: t('tools'),
|
title: t('tools'),
|
||||||
icon: IconSettings,
|
icon: IconSettings,
|
||||||
items: [
|
items: [
|
||||||
{ id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload }
|
{ id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
|
||||||
|
{ id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase },
|
||||||
|
{ id: 'mikrotik-tools', title: 'MikroTik Инструменты', path: '/mikrotik-tools', icon: IconNetwork },
|
||||||
|
{ id: 'firewall', title: t('firewall'), path: '/firewall', icon: IconShield },
|
||||||
|
{ id: 'interface-speed', title: 'Скорость интерфейсов', path: '/interface-speed', icon: IconNetwork },
|
||||||
|
{ id: 'ping-services', title: t('pingServices'), path: '/ping-services', icon: IconNetwork },
|
||||||
|
{ id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock },
|
||||||
|
{ id: 'scheduler', title: 'Планировщик карты сети', path: '/scheduler', icon: IconClockPlay }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// Убрали неиспользуемые/неработающие разделы
|
{
|
||||||
|
id: 'settings',
|
||||||
|
title: 'Настройки',
|
||||||
|
icon: IconSettings,
|
||||||
|
single: true,
|
||||||
|
path: '/settings'
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// Определяем активную вкладку по адресу
|
// Определяем активную вкладку по адресу
|
||||||
@@ -224,39 +274,31 @@ function MainLayout() {
|
|||||||
|
|
||||||
const activeTab = getActiveTab();
|
const activeTab = getActiveTab();
|
||||||
|
|
||||||
|
// Старый вид: один верхний навбар с горизонтальным меню
|
||||||
|
if (layout === LAYOUT_HORIZONTAL) {
|
||||||
return (
|
return (
|
||||||
<div className="page d-flex flex-column min-vh-100">
|
<div className="page d-flex flex-column min-vh-100">
|
||||||
{/* Skip link для доступности */}
|
<a href="#main-content" className="skip-link">Перейти к основному содержанию</a>
|
||||||
<a href="#main-content" className="skip-link">
|
<header className="navbar navbar-expand-md navbar-light d-print-none" style={{ boxShadow: '0 1px 0 0 #e9ecef' }}>
|
||||||
Перейти к основному содержанию
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{/* Верхнее меню Tabler Admin */}
|
|
||||||
<header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
|
|
||||||
<div className="container-xl">
|
<div className="container-xl">
|
||||||
{/* Логотип */}
|
|
||||||
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||||
<Link to="/" className="navbar-brand d-flex align-items-center">
|
<Link to="/" className="navbar-brand d-flex align-items-center">
|
||||||
<IconBrandTabler className="navbar-brand-icon me-2" />
|
<IconBrandTabler className="navbar-brand-icon me-2" />
|
||||||
<span className="fw-bold">S3 Lists Manager</span>
|
<span className="fw-bold">S3 Lists Manager</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Кнопка бургера для мобильных */}
|
|
||||||
<button
|
<button
|
||||||
className="navbar-toggler d-md-none"
|
className="navbar-toggler d-md-none"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#navbar-menu"
|
data-bs-target="#navbar-menu-horizontal"
|
||||||
aria-controls="navbar-menu"
|
aria-controls="navbar-menu-horizontal"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-label="Toggle navigation"
|
aria-label="Toggle navigation"
|
||||||
>
|
>
|
||||||
<IconMenu2 />
|
<IconMenu2 />
|
||||||
</button>
|
</button>
|
||||||
|
<div className="collapse navbar-collapse" id="navbar-menu-horizontal">
|
||||||
{/* Основное меню */}
|
|
||||||
<div className="collapse navbar-collapse" id="navbar-menu">
|
|
||||||
<div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
<div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
||||||
<ul className="navbar-nav">
|
<ul className="navbar-nav">
|
||||||
{navCategories.map(category => (
|
{navCategories.map(category => (
|
||||||
@@ -308,80 +350,45 @@ function MainLayout() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Правая часть навбара: язык, тема и действия */}
|
|
||||||
<div className="navbar-nav flex-row order-md-last">
|
<div className="navbar-nav flex-row order-md-last">
|
||||||
{/* Язык */}
|
|
||||||
<div className="nav-item dropdown me-1">
|
<div className="nav-item dropdown me-1">
|
||||||
<a
|
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||||
href="#"
|
{layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
|
||||||
className="nav-link px-2 dropdown-toggle"
|
</a>
|
||||||
data-bs-toggle="dropdown"
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
onClick={(e) => e.preventDefault()}
|
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
|
||||||
>
|
<IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
|
||||||
|
</a>
|
||||||
|
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
|
||||||
|
<IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="nav-item dropdown me-1">
|
||||||
|
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||||
<span className="badge">{lang.toUpperCase()}</span>
|
<span className="badge">{lang.toUpperCase()}</span>
|
||||||
</a>
|
</a>
|
||||||
<div className="dropdown-menu dropdown-menu-end">
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
<a
|
<a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
|
||||||
href="#"
|
<a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
|
||||||
className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`}
|
|
||||||
onClick={(e) => { e.preventDefault(); setLang('ru'); }}
|
|
||||||
>
|
|
||||||
Русский
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className={`dropdown-item ${lang === 'en' ? 'active' : ''}`}
|
|
||||||
onClick={(e) => { e.preventDefault(); setLang('en'); }}
|
|
||||||
>
|
|
||||||
English
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Тема */}
|
|
||||||
<div className="nav-item dropdown me-1">
|
<div className="nav-item dropdown me-1">
|
||||||
<a
|
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||||
href="#"
|
|
||||||
className="nav-link px-2 dropdown-toggle"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
onClick={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
{theme === 'dark' ? '🌙' : '☀️'}
|
{theme === 'dark' ? '🌙' : '☀️'}
|
||||||
</a>
|
</a>
|
||||||
<div className="dropdown-menu dropdown-menu-end">
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
<a
|
<a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
|
||||||
href="#"
|
<a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
|
||||||
className={`dropdown-item ${theme === 'light' ? 'active' : ''}`}
|
|
||||||
onClick={(e) => { e.preventDefault(); setTheme('light'); }}
|
|
||||||
>
|
|
||||||
☀️ {t('light')}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`}
|
|
||||||
onClick={(e) => { e.preventDefault(); setTheme('dark'); }}
|
|
||||||
>
|
|
||||||
🌙 {t('dark')}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Горячие клавиши */}
|
|
||||||
<div className="nav-item me-1">
|
<div className="nav-item me-1">
|
||||||
<KeyboardShortcutsButton className="nav-link px-2" />
|
<KeyboardShortcutsButton className="nav-link px-2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Настройки */}
|
|
||||||
<div className="nav-item">
|
<div className="nav-item">
|
||||||
<a
|
<Link to="/settings" className="nav-link px-2" title="Настройки">
|
||||||
href="#"
|
|
||||||
className="nav-link px-2"
|
|
||||||
onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }}
|
|
||||||
title="Настройки"
|
|
||||||
>
|
|
||||||
<IconSettings size={20} />
|
<IconSettings size={20} />
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -389,6 +396,10 @@ function MainLayout() {
|
|||||||
<main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
|
<main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/dashboard" element={<Dashboard />} />
|
<Route path="/dashboard" element={<Dashboard />} />
|
||||||
|
<Route path="/traffic" element={<TrafficDashboard />} />
|
||||||
|
<Route path="/resource-stats" element={<ResourceStatsPage />} />
|
||||||
|
<Route path="/network-map" element={<NetworkMapDashboard />} />
|
||||||
|
<Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
|
||||||
<Route path="/domains" element={<DomainsNewManager />} />
|
<Route path="/domains" element={<DomainsNewManager />} />
|
||||||
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
||||||
<Route path="/asns" element={<ASNsNewManager />} />
|
<Route path="/asns" element={<ASNsNewManager />} />
|
||||||
@@ -397,16 +408,191 @@ function MainLayout() {
|
|||||||
<Route path="/servers" element={<ServerManager />} />
|
<Route path="/servers" element={<ServerManager />} />
|
||||||
<Route path="/billing" element={<BillingManager />} />
|
<Route path="/billing" element={<BillingManager />} />
|
||||||
<Route path="/filters" element={<FilterManager />} />
|
<Route path="/filters" element={<FilterManager />} />
|
||||||
|
<Route path="/network-config" element={<NetworkConfigManager />} />
|
||||||
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
||||||
|
<Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
|
||||||
|
<Route path="/mikrotik-tools" element={<MikrotikTools />} />
|
||||||
|
<Route path="/firewall" element={<FirewallPage />} />
|
||||||
|
<Route path="/interface-speed" element={<InterfaceSpeedTest />} />
|
||||||
|
<Route path="/ping-services" element={<PingServicesManager />} />
|
||||||
|
<Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
|
||||||
|
<Route path="/settings" element={<SettingsPage />} />
|
||||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
<footer className="footer mt-auto py-2">
|
<footer className="footer mt-auto py-2">
|
||||||
<div className="container-xl text-muted small">
|
<div className="container-xl text-muted small">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</div>
|
||||||
Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
|
</footer>
|
||||||
|
<CommandPalette />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fluid Vertical: вертикальный сайдбар + верхний навбар + page-wrapper
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
{/* Skip link для доступности */}
|
||||||
|
<a href="#main-content" className="skip-link">
|
||||||
|
Перейти к основному содержанию
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Левая вертикальная навигация — всегда тёмная (Tabler navbar-vertical) */}
|
||||||
|
<header className="navbar navbar-vertical navbar-expand-md d-print-none" data-bs-theme="dark">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<Link to="/" className="navbar-brand navbar-brand-autodark">
|
||||||
|
<IconBrandTabler className="navbar-brand-icon" />
|
||||||
|
<span className="fw-bold">S3 Lists Manager</span>
|
||||||
|
</Link>
|
||||||
|
<div className="navbar-nav flex-row d-md-none">
|
||||||
|
<button
|
||||||
|
className="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#sidebar-menu"
|
||||||
|
aria-controls="sidebar-menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Открыть меню"
|
||||||
|
>
|
||||||
|
<IconMenu2 />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="collapse navbar-collapse" id="sidebar-menu">
|
||||||
|
<ul className="navbar-nav pt-lg-3">
|
||||||
|
{navCategories.map(category => (
|
||||||
|
<li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}>
|
||||||
|
{category.single ? (
|
||||||
|
<Link
|
||||||
|
to={category.path}
|
||||||
|
className="nav-link"
|
||||||
|
>
|
||||||
|
<span className="nav-link-icon">
|
||||||
|
<category.icon className="icon" />
|
||||||
|
</span>
|
||||||
|
<span className="nav-link-title">{category.title}</span>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
className="nav-link dropdown-toggle"
|
||||||
|
href="#"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
toggleDropdown(category.id);
|
||||||
|
}}
|
||||||
|
aria-expanded={dropdownStates[category.id]}
|
||||||
|
>
|
||||||
|
<span className="nav-link-icon">
|
||||||
|
<category.icon className="icon" />
|
||||||
|
</span>
|
||||||
|
<span className="nav-link-title">{category.title}</span>
|
||||||
|
</a>
|
||||||
|
<div className={`dropdown-menu${dropdownStates[category.id] ? ' show' : ''}`}>
|
||||||
|
{category.items.map(item => (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
to={item.path}
|
||||||
|
className={`dropdown-item d-flex align-items-center${activeTab === item.id ? ' active' : ''}`}
|
||||||
|
>
|
||||||
|
<span className="nav-link-icon me-2">
|
||||||
|
<item.icon className="icon" />
|
||||||
|
</span>
|
||||||
|
{item.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
{/* Горизонтальный ряд значков в самом низу сайдбара */}
|
||||||
|
<div className="navbar-sidebar-footer border-top mt-auto">
|
||||||
|
<div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
|
||||||
|
<div className="nav-item dropdown dropup">
|
||||||
|
<a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
|
||||||
|
<span className="badge bg-secondary">{lang.toUpperCase()}</span>
|
||||||
|
</a>
|
||||||
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
|
<a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
|
||||||
|
<a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="nav-item dropdown dropup">
|
||||||
|
<a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
|
||||||
|
{layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
|
||||||
|
</a>
|
||||||
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
|
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
|
||||||
|
<IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
|
||||||
|
</a>
|
||||||
|
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
|
||||||
|
<IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="nav-item dropdown dropup">
|
||||||
|
<a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
|
||||||
|
{theme === 'dark' ? '🌙' : '☀️'}
|
||||||
|
</a>
|
||||||
|
<div className="dropdown-menu dropdown-menu-end">
|
||||||
|
<a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
|
||||||
|
<a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="nav-item">
|
||||||
|
<KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
|
||||||
|
</div>
|
||||||
|
<div className="nav-item">
|
||||||
|
<Link to="/settings" className="nav-link btn-icon rounded" title="Настройки">
|
||||||
|
<IconSettings size={20} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="page-wrapper">
|
||||||
|
<div className="page-body">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<main id="main-content" tabIndex="-1">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/dashboard" element={<Dashboard />} />
|
||||||
|
<Route path="/traffic" element={<TrafficDashboard />} />
|
||||||
|
<Route path="/resource-stats" element={<ResourceStatsPage />} />
|
||||||
|
<Route path="/network-map" element={<NetworkMapDashboard />} />
|
||||||
|
<Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
|
||||||
|
<Route path="/domains" element={<DomainsNewManager />} />
|
||||||
|
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
||||||
|
<Route path="/asns" element={<ASNsNewManager />} />
|
||||||
|
<Route path="/communities" element={<CommunitiesManager />} />
|
||||||
|
<Route path="/auto-urls" element={<AutoUrlManager />} />
|
||||||
|
<Route path="/servers" element={<ServerManager />} />
|
||||||
|
<Route path="/billing" element={<BillingManager />} />
|
||||||
|
<Route path="/filters" element={<FilterManager />} />
|
||||||
|
<Route path="/network-config" element={<NetworkConfigManager />} />
|
||||||
|
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
||||||
|
<Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
|
||||||
|
<Route path="/mikrotik-tools" element={<MikrotikTools />} />
|
||||||
|
<Route path="/firewall" element={<FirewallPage />} />
|
||||||
|
<Route path="/interface-speed" element={<InterfaceSpeedTest />} />
|
||||||
|
<Route path="/ping-services" element={<PingServicesManager />} />
|
||||||
|
<Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
|
||||||
|
<Route path="/settings" element={<SettingsPage />} />
|
||||||
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer className="footer footer-transparent d-print-none">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<ul className="list-inline list-inline-dots mb-0 text-muted small">
|
||||||
|
<li className="list-inline-item">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
</div>
|
||||||
<CommandPalette />
|
<CommandPalette />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -107,19 +107,15 @@ function AutoUrlManager() {
|
|||||||
setError('');
|
setError('');
|
||||||
setSuccess('');
|
setSuccess('');
|
||||||
|
|
||||||
// Validate URLs
|
// Validate URLs (пустой список тоже валиден - для очистки)
|
||||||
const validUrls = urls
|
const validUrls = urls
|
||||||
.filter(u => u != null && isValidHttpUrl(u.url) && isValidCommunity(u.community))
|
.filter(u => u != null && isValidHttpUrl(u.url) && isValidCommunity(u.community))
|
||||||
.map(u => ({ url: u.url.trim(), community: String(u.community).trim() }));
|
.map(u => ({ url: u.url.trim(), community: String(u.community).trim() }));
|
||||||
if (validUrls.length === 0) {
|
|
||||||
setError('Добавьте хотя бы одну корректную запись (валидный URL и числовой community)');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.post('/auto-urls', { urls: validUrls });
|
await api.post('/auto-urls', { urls: validUrls });
|
||||||
setUrls(validUrls);
|
setUrls(validUrls);
|
||||||
setLastSaved(new Date().toISOString());
|
setLastSaved(new Date().toISOString());
|
||||||
setSuccess('URL-адреса сохранены успешно');
|
setSuccess(validUrls.length === 0 ? 'Список URL очищен' : 'URL-адреса сохранены успешно');
|
||||||
setSelectedRows(new Set());
|
setSelectedRows(new Set());
|
||||||
setTimeout(() => setSuccess(''), 3000);
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -257,7 +253,9 @@ function AutoUrlManager() {
|
|||||||
const handleKeyDown = (e) => {
|
const handleKeyDown = (e) => {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (hasAtLeastOneValidRow && !saving && !processing) {
|
// Разрешить сохранение: либо пустой список, либо есть валидные строки
|
||||||
|
const canSave = urls.length === 0 || hasAtLeastOneValidRow;
|
||||||
|
if (canSave && !saving && !processing) {
|
||||||
saveUrls();
|
saveUrls();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -272,13 +270,13 @@ function AutoUrlManager() {
|
|||||||
};
|
};
|
||||||
window.addEventListener('keydown', handleKeyDown);
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||||
}, [hasAtLeastOneValidRow, saving, processing, saveUrls]);
|
}, [urls.length, hasAtLeastOneValidRow, saving, processing, saveUrls]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="Автоматические URL"
|
title="Автоматические URL"
|
||||||
pretitle="Управление автоматическими URL-адресами для загрузки списков IP и доменов"
|
icon={<IconLink size={24} />}
|
||||||
actions={(
|
actions={(
|
||||||
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||||||
<div className="btn-list">
|
<div className="btn-list">
|
||||||
@@ -326,7 +324,7 @@ function AutoUrlManager() {
|
|||||||
className="btn btn-outline-primary"
|
className="btn btn-outline-primary"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={saveUrls}
|
onClick={saveUrls}
|
||||||
disabled={saving || processing || !hasAtLeastOneValidRow}
|
disabled={saving || processing || (urls.length > 0 && !hasAtLeastOneValidRow)}
|
||||||
title="Сохранить список URL (Ctrl+S)"
|
title="Сохранить список URL (Ctrl+S)"
|
||||||
>
|
>
|
||||||
{saving ? (
|
{saving ? (
|
||||||
|
|||||||
+248
-49
@@ -34,9 +34,12 @@ import {
|
|||||||
IconX,
|
IconX,
|
||||||
IconChecks,
|
IconChecks,
|
||||||
IconServer,
|
IconServer,
|
||||||
IconClock
|
IconClock,
|
||||||
|
IconLayoutGrid,
|
||||||
|
IconList
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||||
|
import { BillingCard } from './components/billing/index.js';
|
||||||
|
|
||||||
function BillingManager() {
|
function BillingManager() {
|
||||||
const [billingData, setBillingData] = useState([]);
|
const [billingData, setBillingData] = useState([]);
|
||||||
@@ -50,6 +53,8 @@ function BillingManager() {
|
|||||||
const [sortOrder, setSortOrder] = useState('asc');
|
const [sortOrder, setSortOrder] = useState('asc');
|
||||||
const [filterStatus, setFilterStatus] = useState('');
|
const [filterStatus, setFilterStatus] = useState('');
|
||||||
const [filterUrgency, setFilterUrgency] = useState('');
|
const [filterUrgency, setFilterUrgency] = useState('');
|
||||||
|
const [viewMode, setViewMode] = useState('cards'); // 'cards' | 'table'
|
||||||
|
const [activeTab, setActiveTab] = useState('subscriptions'); // 'subscriptions' | 'payments'
|
||||||
const pageSize = 15;
|
const pageSize = 15;
|
||||||
|
|
||||||
// Модальные окна
|
// Модальные окна
|
||||||
@@ -108,16 +113,64 @@ function BillingManager() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchBillingData();
|
const controller = new AbortController();
|
||||||
fetchExchangeRates();
|
const signal = controller.signal;
|
||||||
fetchServers();
|
fetchBillingData(signal);
|
||||||
|
fetchExchangeRates(signal);
|
||||||
|
fetchServers(signal);
|
||||||
|
return () => controller.abort();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchExchangeRates = async () => {
|
// Автоматическая синхронизация: добавляем серверы без записей в биллинге
|
||||||
|
useEffect(() => {
|
||||||
|
if (servers.length === 0 || loading) return;
|
||||||
|
|
||||||
|
setBillingData((prev) => {
|
||||||
|
const existingServerIds = new Set(
|
||||||
|
prev.map(b => b.serverId).filter(Boolean)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Находим серверы без записей в биллинге (исключаем входные роутеры)
|
||||||
|
const serversToAdd = servers.filter(server =>
|
||||||
|
server.id &&
|
||||||
|
!existingServerIds.has(server.id) &&
|
||||||
|
server.type !== 'home' // Входные роутеры не попадают в биллинг
|
||||||
|
);
|
||||||
|
|
||||||
|
if (serversToAdd.length === 0) return prev;
|
||||||
|
|
||||||
|
// Создаём записи с флагом _external
|
||||||
|
const newItems = serversToAdd.map(server => ({
|
||||||
|
id: `billing-${server.id}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
|
||||||
|
hostName: server.dns || server.ip,
|
||||||
|
purpose: '',
|
||||||
|
country: server.country || '',
|
||||||
|
provider: server.provider || '',
|
||||||
|
loginUrl: '',
|
||||||
|
monthlyCost: 0,
|
||||||
|
monthlyCostCurrency: 'USD',
|
||||||
|
nextPaymentDate: '',
|
||||||
|
lastPaymentDate: '',
|
||||||
|
lastPaymentAmount: 0,
|
||||||
|
lastPaymentCurrency: 'USD',
|
||||||
|
status: 'active',
|
||||||
|
notes: '',
|
||||||
|
serverId: server.id,
|
||||||
|
payments: [],
|
||||||
|
_external: true, // флаг "не заполнен"
|
||||||
|
}));
|
||||||
|
|
||||||
|
return [...prev, ...newItems];
|
||||||
|
});
|
||||||
|
}, [servers, loading]);
|
||||||
|
|
||||||
|
|
||||||
|
const fetchExchangeRates = async (abortSignal) => {
|
||||||
setRatesLoading(true);
|
setRatesLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
// Основной источник: ЦБ РФ (base = RUB)
|
// Основной источник: ЦБ РФ (base = RUB)
|
||||||
const cbr = await axios.get('https://www.cbr-xml-daily.ru/latest.js');
|
const cbr = await axios.get('https://www.cbr-xml-daily.ru/latest.js', opts);
|
||||||
const rubPerUsd = cbr.data && cbr.data.rates?.USD ? 1 / Number(cbr.data.rates.USD) : null;
|
const rubPerUsd = cbr.data && cbr.data.rates?.USD ? 1 / Number(cbr.data.rates.USD) : null;
|
||||||
const rubPerEur = cbr.data && cbr.data.rates?.EUR ? 1 / Number(cbr.data.rates.EUR) : null;
|
const rubPerEur = cbr.data && cbr.data.rates?.EUR ? 1 / Number(cbr.data.rates.EUR) : null;
|
||||||
|
|
||||||
@@ -131,12 +184,13 @@ function BillingManager() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||||
console.warn('ЦБ недоступен, пробуем резервный источник:', error?.message);
|
console.warn('ЦБ недоступен, пробуем резервный источник:', error?.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Резервный источник: open.er-api
|
// Резервный источник: open.er-api
|
||||||
const response = await axios.get('https://open.er-api.com/v6/latest/USD');
|
const response = await axios.get('https://open.er-api.com/v6/latest/USD', opts);
|
||||||
const rates = response.data?.rates || {};
|
const rates = response.data?.rates || {};
|
||||||
setExchangeRates({
|
setExchangeRates({
|
||||||
USD: 1,
|
USD: 1,
|
||||||
@@ -144,6 +198,7 @@ function BillingManager() {
|
|||||||
RUB: rates.RUB || 1
|
RUB: rates.RUB || 1
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Ошибка при загрузке курсов валют:', error);
|
console.error('Ошибка при загрузке курсов валют:', error);
|
||||||
// Фолбек на разумные значения
|
// Фолбек на разумные значения
|
||||||
setExchangeRates({ USD: 1, EUR: 1.05, RUB: 95 });
|
setExchangeRates({ USD: 1, EUR: 1.05, RUB: 95 });
|
||||||
@@ -152,32 +207,60 @@ function BillingManager() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchServers = async () => {
|
const fetchServers = async (abortSignal) => {
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
const res = await api.get(`/servers`);
|
const res = await api.get(`/servers`, opts);
|
||||||
setServers(Array.isArray(res.data) ? res.data : []);
|
setServers(Array.isArray(res.data) ? res.data : []);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Ошибка при загрузке серверов:', error);
|
console.error('Ошибка при загрузке серверов:', error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchBillingData = async () => {
|
const fetchBillingData = async (abortSignal) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
const response = await api.get(`/billing`);
|
const response = await api.get(`/billing`, opts);
|
||||||
const normalized = (response.data || []).map((item, idx) => ({
|
const rates = exchangeRates; // из closure, на первой загрузке может быть {1,1,1} — для USD достаточно
|
||||||
id: item.id ?? String(idx + 1),
|
const toRUB = (amt, ccy) => {
|
||||||
payments: Array.isArray(item.payments)
|
if (!amt) return 0;
|
||||||
|
const rub = Number(rates.RUB) || 1;
|
||||||
|
if (!ccy || ccy === 'RUB') return amt;
|
||||||
|
if (ccy === 'USD') return amt * rub;
|
||||||
|
const c = Number(rates[ccy]);
|
||||||
|
return c ? (amt / c) * rub : amt * rub;
|
||||||
|
};
|
||||||
|
const normalized = (response.data || []).map((item, idx) => {
|
||||||
|
const payments = Array.isArray(item.payments)
|
||||||
? item.payments
|
? item.payments
|
||||||
: (item.lastPaymentDate && item.lastPaymentAmount
|
: (item.lastPaymentDate && item.lastPaymentAmount
|
||||||
? [{ date: item.lastPaymentDate, amount: item.lastPaymentAmount, currency: item.lastPaymentCurrency || 'USD', note: 'Импортировано' }]
|
? [{ date: item.lastPaymentDate, amount: item.lastPaymentAmount, currency: item.lastPaymentCurrency || 'USD', note: 'Импортировано' }]
|
||||||
: []
|
: []
|
||||||
),
|
);
|
||||||
...item,
|
const merged = { id: item.id ?? String(idx + 1), payments, ...item };
|
||||||
}));
|
if (payments.length > 0) {
|
||||||
|
const last = payments.slice().sort((a, b) => new Date(b.date) - new Date(a.date))[0];
|
||||||
|
if (last?.date) {
|
||||||
|
const current = new Date(item.nextPaymentDate || 0);
|
||||||
|
const now = new Date();
|
||||||
|
if (current < now || !item.nextPaymentDate) {
|
||||||
|
const costRUB = toRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
|
||||||
|
const amtRUB = toRUB(last.amount, last.currency || 'USD');
|
||||||
|
const months = costRUB > 0 ? Math.max(1, Math.floor(amtRUB / costRUB)) : 1;
|
||||||
|
const d = new Date(last.date);
|
||||||
|
d.setMonth(d.getMonth() + months);
|
||||||
|
merged.nextPaymentDate = d.toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return merged;
|
||||||
|
});
|
||||||
setBillingData(normalized);
|
setBillingData(normalized);
|
||||||
setError('');
|
setError('');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Ошибка при загрузке данных биллинга:', err);
|
console.error('Ошибка при загрузке данных биллинга:', err);
|
||||||
setError('Ошибка при загрузке данных');
|
setError('Ошибка при загрузке данных');
|
||||||
setBillingData([]);
|
setBillingData([]);
|
||||||
@@ -189,7 +272,11 @@ function BillingManager() {
|
|||||||
const handleSaveChanges = async () => {
|
const handleSaveChanges = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
await api.post(`/billing`, { domains: billingData });
|
// Убираем служебное поле _external перед сохранением
|
||||||
|
const payload = billingData.map(({ _external, ...rest }) => rest);
|
||||||
|
await api.post(`/billing`, { domains: payload });
|
||||||
|
// После сохранения снимаем флаг _external со всех записей
|
||||||
|
setBillingData(prev => prev.map(item => ({ ...item, _external: false })));
|
||||||
setSuccess('Данные успешно сохранены');
|
setSuccess('Данные успешно сохранены');
|
||||||
setTimeout(() => setSuccess(''), 3000);
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -222,6 +309,10 @@ function BillingManager() {
|
|||||||
return sum + convertToRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
|
return sum + convertToRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
|
const totalPaymentsCount = billingData.reduce((sum, item) => {
|
||||||
|
return sum + ((item.payments && Array.isArray(item.payments) ? item.payments.length : 0));
|
||||||
|
}, 0);
|
||||||
|
|
||||||
const urgentPayments = billingData.filter(item => {
|
const urgentPayments = billingData.filter(item => {
|
||||||
const nextPayment = new Date(item.nextPaymentDate);
|
const nextPayment = new Date(item.nextPaymentDate);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
@@ -243,6 +334,17 @@ function BillingManager() {
|
|||||||
return Math.ceil((nextPayment - now) / (1000 * 60 * 60 * 24));
|
return Math.ceil((nextPayment - now) / (1000 * 60 * 60 * 24));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Вычислить nextPaymentDate по платежу: сумма / месячная стоимость = кол-во месяцев
|
||||||
|
const computeNextPaymentDate = (payment, server) => {
|
||||||
|
if (!payment?.date) return '';
|
||||||
|
const amountRUB = convertToRUB(payment.amount, payment.currency || 'USD');
|
||||||
|
const costRUB = convertToRUB(server.monthlyCost || 0, server.monthlyCostCurrency || 'USD');
|
||||||
|
const months = costRUB > 0 ? Math.max(1, Math.floor(amountRUB / costRUB)) : 1;
|
||||||
|
const d = new Date(payment.date);
|
||||||
|
d.setMonth(d.getMonth() + months);
|
||||||
|
return d.toISOString().slice(0, 10);
|
||||||
|
};
|
||||||
|
|
||||||
// Форматирование
|
// Форматирование
|
||||||
function formatDate(dateString) {
|
function formatDate(dateString) {
|
||||||
if (!dateString) return '—';
|
if (!dateString) return '—';
|
||||||
@@ -389,8 +491,9 @@ function BillingManager() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Снимаем флаг _external при редактировании (запись теперь заполнена)
|
||||||
setBillingData(prev => prev.map(item =>
|
setBillingData(prev => prev.map(item =>
|
||||||
item.id === editingItem.id ? editingItem : item
|
item.id === editingItem.id ? { ...editingItem, _external: false } : item
|
||||||
));
|
));
|
||||||
setShowEditModal(false);
|
setShowEditModal(false);
|
||||||
setSuccess('Элемент обновлен');
|
setSuccess('Элемент обновлен');
|
||||||
@@ -406,12 +509,14 @@ function BillingManager() {
|
|||||||
const payments = [...(s.payments || [])];
|
const payments = [...(s.payments || [])];
|
||||||
payments.splice(index, 1);
|
payments.splice(index, 1);
|
||||||
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
||||||
|
const nextPaymentDate = last ? computeNextPaymentDate(last, s) : '';
|
||||||
return {
|
return {
|
||||||
...s,
|
...s,
|
||||||
payments,
|
payments,
|
||||||
lastPaymentDate: last?.date || '',
|
lastPaymentDate: last?.date || '',
|
||||||
lastPaymentAmount: last?.amount || 0,
|
lastPaymentAmount: last?.amount || 0,
|
||||||
lastPaymentCurrency: last?.currency || 'USD'
|
lastPaymentCurrency: last?.currency || 'USD',
|
||||||
|
nextPaymentDate: nextPaymentDate || s.nextPaymentDate
|
||||||
};
|
};
|
||||||
}));
|
}));
|
||||||
setShowDeletePaymentModal(false);
|
setShowDeletePaymentModal(false);
|
||||||
@@ -486,17 +591,41 @@ function BillingManager() {
|
|||||||
{/* Заголовок */}
|
{/* Заголовок */}
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="Биллинг"
|
title="Биллинг"
|
||||||
pretitle="Финансы / Инфраструктура"
|
icon={<IconCreditCard size={24} />}
|
||||||
actions={
|
actions={
|
||||||
|
<div className="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
|
||||||
|
<div className="btn-group me-sm-2" role="group">
|
||||||
|
<button
|
||||||
|
className={`btn ${activeTab === 'subscriptions' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||||
|
onClick={() => setActiveTab('subscriptions')}
|
||||||
|
>
|
||||||
|
<IconServer size={16} className="me-1 d-none d-sm-inline" />
|
||||||
|
Подписки
|
||||||
|
<span className={`badge ms-1 ${activeTab === 'subscriptions' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||||
|
{billingData.length}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn ${activeTab === 'payments' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||||
|
onClick={() => setActiveTab('payments')}
|
||||||
|
>
|
||||||
|
<IconHistory size={16} className="me-1 d-none d-sm-inline" />
|
||||||
|
История платежей
|
||||||
|
<span className={`badge ms-1 ${activeTab === 'payments' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||||
|
{totalPaymentsCount}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<PageHeaderActions
|
<PageHeaderActions
|
||||||
loading={loading}
|
loading={loading}
|
||||||
onRefresh={fetchBillingData}
|
onRefresh={() => { fetchBillingData(); fetchServers(); }}
|
||||||
disableRefresh={loading}
|
disableRefresh={loading}
|
||||||
onExport={exportData}
|
onExport={exportData}
|
||||||
disableExport={loading}
|
disableExport={loading}
|
||||||
onSave={handleSaveChanges}
|
onSave={handleSaveChanges}
|
||||||
disableSave={loading}
|
disableSave={loading}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -566,17 +695,18 @@ function BillingManager() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Основная таблица */}
|
{/* Основная секция: Подписки */}
|
||||||
|
{activeTab === 'subscriptions' && (
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-header">
|
<div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||||
<div className="d-flex align-items-center gap-3 flex-grow-1">
|
|
||||||
<h3 className="card-title mb-0">
|
<h3 className="card-title mb-0">
|
||||||
Подписки
|
Подписки
|
||||||
<span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
|
<span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2 flex-grow-1 justify-content-end">
|
||||||
{/* Поиск */}
|
{/* Поиск */}
|
||||||
<div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
|
<div className="input-icon" style={{ minWidth: '220px', maxWidth: '280px' }}>
|
||||||
<span className="input-icon-addon">
|
<span className="input-icon-addon">
|
||||||
<IconSearch size={16} />
|
<IconSearch size={16} />
|
||||||
</span>
|
</span>
|
||||||
@@ -590,26 +720,43 @@ function BillingManager() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Быстрые фильтры */}
|
{/* Быстрые фильтры */}
|
||||||
<div className="d-flex gap-1">
|
<div className="btn-group" role="group">
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
className={`btn ${filterUrgency === '' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
|
||||||
onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
|
onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
|
||||||
>
|
>
|
||||||
Все
|
Все
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
|
className={`btn ${filterUrgency === 'overdue' ? 'btn-outline-danger active' : 'btn-outline-secondary'}`}
|
||||||
onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
|
onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
|
||||||
>
|
>
|
||||||
Просрочено
|
Просрочено
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
|
className={`btn ${filterUrgency === 'urgent' ? 'btn-outline-warning active' : 'btn-outline-secondary'}`}
|
||||||
onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
|
onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
|
||||||
>
|
>
|
||||||
Срочно
|
Срочно
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Переключатель вида */}
|
||||||
|
<div className="btn-group" role="group">
|
||||||
|
<button
|
||||||
|
className={`btn ${viewMode === 'cards' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
|
||||||
|
onClick={() => setViewMode('cards')}
|
||||||
|
title="Карточки"
|
||||||
|
>
|
||||||
|
<IconLayoutGrid size={16} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn ${viewMode === 'table' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
|
||||||
|
onClick={() => setViewMode('table')}
|
||||||
|
title="Таблица"
|
||||||
|
>
|
||||||
|
<IconList size={16} />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card-actions">
|
<div className="card-actions">
|
||||||
@@ -619,7 +766,51 @@ function BillingManager() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Контент: карточки или таблица */}
|
||||||
|
{paginatedData.length === 0 ? (
|
||||||
|
<div className="card-body text-center text-muted py-5">
|
||||||
|
<IconCreditCard size={48} className="mb-3 text-muted" />
|
||||||
|
<h3>{searchTerm || filterUrgency ? 'Ничего не найдено' : 'Нет подписок'}</h3>
|
||||||
|
<p className="text-muted">Добавьте первую подписку для отслеживания платежей</p>
|
||||||
|
<button className="btn btn-primary" onClick={handleAddItem}>
|
||||||
|
<IconPlus size={18} className="me-1" />
|
||||||
|
Добавить подписку
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'cards' ? (
|
||||||
|
/* Карточный вид */
|
||||||
|
<div className="card-body">
|
||||||
|
{paginatedData.map(item => {
|
||||||
|
const days = getDaysUntilPayment(item.nextPaymentDate);
|
||||||
|
const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BillingCard
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
linkedServer={linkedServer}
|
||||||
|
daysUntilPayment={days}
|
||||||
|
onEdit={handleEditItem}
|
||||||
|
onDelete={handleDeleteItem}
|
||||||
|
onAddPayment={(item) => {
|
||||||
|
setPaymentDraft({
|
||||||
|
serverId: item.id,
|
||||||
|
date: new Date().toISOString().slice(0,10),
|
||||||
|
amount: item.monthlyCost || 0,
|
||||||
|
currency: item.monthlyCostCurrency || 'USD',
|
||||||
|
note: ''
|
||||||
|
});
|
||||||
|
setShowPaymentModal(true);
|
||||||
|
}}
|
||||||
|
formatCurrencyInRUB={formatCurrencyInRUB}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* Табличный вид */
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table card-table table-vcenter mb-0">
|
<table className="table card-table table-vcenter mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -656,17 +847,11 @@ function BillingManager() {
|
|||||||
</th>
|
</th>
|
||||||
<th className="text-center" style={{ width: '100px' }}>Срок</th>
|
<th className="text-center" style={{ width: '100px' }}>Срок</th>
|
||||||
<th className="text-center" style={{ width: '80px' }}>Статус</th>
|
<th className="text-center" style={{ width: '80px' }}>Статус</th>
|
||||||
<th style={{ width: '120px' }}></th>
|
<th style={{ width: '140px' }}></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{paginatedData.length === 0 ? (
|
{paginatedData.map(item => {
|
||||||
<tr>
|
|
||||||
<td colSpan="6" className="text-center text-muted py-4">
|
|
||||||
{searchTerm || filterUrgency ? 'Ничего не найдено' : 'Нет данных'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : paginatedData.map(item => {
|
|
||||||
const days = getDaysUntilPayment(item.nextPaymentDate);
|
const days = getDaysUntilPayment(item.nextPaymentDate);
|
||||||
const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
|
const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
|
||||||
|
|
||||||
@@ -675,7 +860,14 @@ function BillingManager() {
|
|||||||
<td>
|
<td>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<div>
|
<div>
|
||||||
<div className="fw-semibold">{item.hostName}</div>
|
<div className="fw-semibold">
|
||||||
|
{item.hostName}
|
||||||
|
{item._external && (
|
||||||
|
<span className="badge bg-yellow-lt text-yellow ms-2" title="Импортирован из серверов, требует заполнения">
|
||||||
|
не заполнен
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="text-muted small d-flex align-items-center gap-2">
|
<div className="text-muted small d-flex align-items-center gap-2">
|
||||||
<span>{item.provider}</span>
|
<span>{item.provider}</span>
|
||||||
{linkedServer && (
|
{linkedServer && (
|
||||||
@@ -722,10 +914,10 @@ function BillingManager() {
|
|||||||
<span className="badge bg-secondary-lt text-secondary">Неактивен</span>
|
<span className="badge bg-secondary-lt text-secondary">Неактивен</span>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td className="text-end">
|
||||||
<div className="btn-list gap-1 justify-content-end flex-nowrap">
|
<div className="btn-group" role="group">
|
||||||
<button
|
<button
|
||||||
className="btn btn-icon btn-sm btn-outline-success"
|
className="btn btn-outline-success"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setPaymentDraft({
|
setPaymentDraft({
|
||||||
serverId: item.id,
|
serverId: item.id,
|
||||||
@@ -738,21 +930,22 @@ function BillingManager() {
|
|||||||
}}
|
}}
|
||||||
title="Записать платёж"
|
title="Записать платёж"
|
||||||
>
|
>
|
||||||
<IconCreditCard size={16} />
|
<IconCreditCard size={14} className="me-1" />
|
||||||
|
Оплата
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="btn btn-icon btn-sm btn-outline-primary"
|
className="btn btn-outline-secondary"
|
||||||
onClick={() => handleEditItem(item)}
|
onClick={() => handleEditItem(item)}
|
||||||
title="Редактировать"
|
title="Редактировать"
|
||||||
>
|
>
|
||||||
<IconEdit size={16} />
|
<IconEdit size={14} />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="btn btn-icon btn-sm btn-outline-danger"
|
className="btn btn-outline-danger"
|
||||||
onClick={() => handleDeleteItem(item)}
|
onClick={() => handleDeleteItem(item)}
|
||||||
title="Удалить"
|
title="Удалить"
|
||||||
>
|
>
|
||||||
<IconTrash size={16} />
|
<IconTrash size={14} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@@ -762,6 +955,7 @@ function BillingManager() {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{totalPages > 1 && (
|
{totalPages > 1 && (
|
||||||
<Pagination
|
<Pagination
|
||||||
@@ -773,8 +967,10 @@ function BillingManager() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* История платежей — компактная версия */}
|
{/* История платежей — компактная версия */}
|
||||||
|
{activeTab === 'payments' && (
|
||||||
<div className="card mt-4">
|
<div className="card mt-4">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h3 className="card-title d-flex align-items-center gap-2">
|
<h3 className="card-title d-flex align-items-center gap-2">
|
||||||
@@ -892,6 +1088,7 @@ function BillingManager() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Модальные окна */}
|
{/* Модальные окна */}
|
||||||
<FormModal
|
<FormModal
|
||||||
@@ -964,7 +1161,8 @@ function BillingManager() {
|
|||||||
note: paymentDraft.note || ''
|
note: paymentDraft.note || ''
|
||||||
};
|
};
|
||||||
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
||||||
return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || 'USD' };
|
const nextPaymentDate = computeNextPaymentDate(last, s);
|
||||||
|
return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || 'USD', nextPaymentDate: nextPaymentDate || s.nextPaymentDate };
|
||||||
}));
|
}));
|
||||||
setEditingPayment(null);
|
setEditingPayment(null);
|
||||||
} else {
|
} else {
|
||||||
@@ -977,7 +1175,8 @@ function BillingManager() {
|
|||||||
note: paymentDraft.note || ''
|
note: paymentDraft.note || ''
|
||||||
}];
|
}];
|
||||||
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
const last = payments.slice().sort((a,b) => new Date(b.date) - new Date(a.date))[0];
|
||||||
return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || 'USD' };
|
const nextPaymentDate = computeNextPaymentDate(last, s);
|
||||||
|
return { ...s, payments, lastPaymentDate: last?.date || '', lastPaymentAmount: last?.amount || 0, lastPaymentCurrency: last?.currency || 'USD', nextPaymentDate: nextPaymentDate || s.nextPaymentDate };
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
setShowPaymentModal(false);
|
setShowPaymentModal(false);
|
||||||
|
|||||||
@@ -14,11 +14,14 @@ import {
|
|||||||
IconLink,
|
IconLink,
|
||||||
IconRefresh,
|
IconRefresh,
|
||||||
IconSortAscending,
|
IconSortAscending,
|
||||||
IconSortDescending
|
IconSortDescending,
|
||||||
|
IconUpload,
|
||||||
|
IconDownload,
|
||||||
|
IconDeviceFloppy
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import PortalDropdown from './components/PortalDropdown.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
|
||||||
import CommunityStats from './components/CommunityStats.jsx';
|
import CommunityStats from './components/CommunityStats.jsx';
|
||||||
import SavedFilters from './components/SavedFilters.jsx';
|
import SavedFilters from './components/SavedFilters.jsx';
|
||||||
import FormModal from './components/FormModal.jsx';
|
import FormModal from './components/FormModal.jsx';
|
||||||
@@ -350,41 +353,12 @@ function CommunitiesManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page-wrapper">
|
<div>
|
||||||
<div className="page-header d-print-none">
|
<PageHeader
|
||||||
<div className="container-xl">
|
title="Справочник Community"
|
||||||
<div className="row g-2 align-items-center">
|
icon={<IconFilter size={24} />}
|
||||||
<div className="col">
|
|
||||||
<h2 className="page-title">
|
|
||||||
<IconFilter className="icon me-2" />
|
|
||||||
Справочник Community
|
|
||||||
</h2>
|
|
||||||
<div className="page-pretitle">
|
|
||||||
<Breadcrumbs items={[
|
|
||||||
{ label: 'Главная', to: '/dashboard' },
|
|
||||||
{ label: 'Данные' },
|
|
||||||
{ label: 'Community' },
|
|
||||||
]} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-auto ms-auto d-print-none">
|
|
||||||
<PageHeaderActions
|
|
||||||
loading={loading}
|
|
||||||
onRefresh={fetchItems}
|
|
||||||
disableRefresh={loading}
|
|
||||||
onImport={handleImport}
|
|
||||||
onExport={handleExport}
|
|
||||||
disableExport={items.length === 0}
|
|
||||||
onSave={handleSave}
|
|
||||||
disableSave={loading}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-body">
|
|
||||||
<div className="container-xl">
|
|
||||||
{/* Уведомления */}
|
{/* Уведомления */}
|
||||||
{error && (
|
{error && (
|
||||||
<ErrorAlert message={error} onClose={() => setError('')} onRetry={fetchItems} />
|
<ErrorAlert message={error} onClose={() => setError('')} onRetry={fetchItems} />
|
||||||
@@ -403,44 +377,97 @@ function CommunitiesManager() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Вкладки: Список / Статистика в стиле Tabler */}
|
{/* Табы и кнопки в одной строке, единый стиль btn-primary */}
|
||||||
<div className="card mb-3">
|
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||||
<div className="card-header border-0 pb-0">
|
<div className="btn-group" role="tablist" aria-label="Переключение режимов страницы">
|
||||||
<ul className="nav nav-tabs card-header-tabs" role="tablist">
|
|
||||||
<li className="nav-item" role="presentation">
|
|
||||||
<button
|
<button
|
||||||
className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
|
type="button"
|
||||||
|
className={`btn ${activeTab === 'list' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||||
onClick={() => setActiveTab('list')}
|
onClick={() => setActiveTab('list')}
|
||||||
type="button"
|
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-selected={activeTab === 'list'}
|
aria-pressed={activeTab === 'list'}
|
||||||
>
|
>
|
||||||
<IconList className="me-2" size={18} />
|
<IconList size={16} className="me-1 d-none d-sm-inline" />
|
||||||
Список communities
|
Список
|
||||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
<span
|
||||||
|
className={`badge ms-1 ${
|
||||||
|
activeTab === 'list'
|
||||||
|
? 'bg-white text-primary'
|
||||||
|
: 'bg-primary-lt text-primary'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{filtered.length}
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
|
||||||
<li className="nav-item" role="presentation">
|
|
||||||
<button
|
<button
|
||||||
className={`nav-link ${activeTab === 'stats' ? 'active' : ''}`}
|
|
||||||
onClick={() => setActiveTab('stats')}
|
|
||||||
type="button"
|
type="button"
|
||||||
|
className={`btn ${activeTab === 'stats' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||||
|
onClick={() => setActiveTab('stats')}
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-selected={activeTab === 'stats'}
|
aria-pressed={activeTab === 'stats'}
|
||||||
>
|
>
|
||||||
<IconChartBar className="me-2" size={18} />
|
<IconChartBar size={16} className="me-1 d-none d-sm-inline" />
|
||||||
Статистика использования
|
Статистика
|
||||||
|
<span
|
||||||
|
className={`badge ms-1 ${
|
||||||
|
activeTab === 'stats'
|
||||||
|
? 'bg-white text-primary'
|
||||||
|
: 'bg-primary-lt text-primary'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{items.length}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="btn-group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={fetchItems}
|
||||||
|
disabled={loading}
|
||||||
|
title="Обновить данные"
|
||||||
|
>
|
||||||
|
<IconRefresh size={16} className={loading ? 'spin me-1' : 'me-1'} />
|
||||||
|
Обновить
|
||||||
|
</button>
|
||||||
|
<PortalDropdown
|
||||||
|
buttonClassName="btn btn-primary dropdown-toggle"
|
||||||
|
buttonProps={{ title: 'Импорт/Экспорт' }}
|
||||||
|
align="left"
|
||||||
|
buttonContent={<><IconDownload className="me-1" /> Импорт/Экспорт</>}
|
||||||
|
>
|
||||||
|
<button type="button" className="dropdown-item" onClick={handleImport}>
|
||||||
|
<IconUpload className="me-1" /> Импорт
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="dropdown-item"
|
||||||
|
onClick={handleExport}
|
||||||
|
disabled={items.length === 0}
|
||||||
|
>
|
||||||
|
<IconDownload className="me-1" /> Экспорт
|
||||||
|
</button>
|
||||||
|
</PortalDropdown>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={loading}
|
||||||
|
title="Сохранить"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<IconDeviceFloppy className="me-1" />
|
||||||
|
)}
|
||||||
|
Сохранить
|
||||||
</button>
|
</button>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Отображение списка communities */}
|
{/* Отображение списка communities */}
|
||||||
{activeTab === 'list' && (
|
{activeTab === 'list' && (
|
||||||
<div className="row g-3">
|
<div className="card card-flat">
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<div className="row align-items-center w-100 g-2">
|
<div className="row align-items-center w-100 g-2">
|
||||||
<div className="col">
|
<div className="col">
|
||||||
@@ -643,16 +670,12 @@ function CommunitiesManager() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Отображение статистики communities */}
|
{/* Отображение статистики communities */}
|
||||||
{activeTab === 'stats' && (
|
{activeTab === 'stats' && (
|
||||||
<CommunityStats communities={items} />
|
<CommunityStats communities={items} />
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Модальное окно добавления */}
|
{/* Модальное окно добавления */}
|
||||||
<FormModal
|
<FormModal
|
||||||
show={addModalOpen}
|
show={addModalOpen}
|
||||||
|
|||||||
+199
-16
@@ -1,6 +1,7 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import api from './lib/api.js';
|
import api from './lib/api.js';
|
||||||
|
import { formatDateTime } from './lib/datetime.js';
|
||||||
import {
|
import {
|
||||||
IconWorld,
|
IconWorld,
|
||||||
IconNetwork,
|
IconNetwork,
|
||||||
@@ -14,14 +15,17 @@ import {
|
|||||||
IconFilter,
|
IconFilter,
|
||||||
IconDownload,
|
IconDownload,
|
||||||
IconCreditCard,
|
IconCreditCard,
|
||||||
IconSearch
|
IconSearch,
|
||||||
|
IconChevronDown,
|
||||||
|
IconChevronUp,
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
|
import { getIconById } from './lib/brandIcons.js';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
|
||||||
import TopNStats from './components/TopNStats.jsx';
|
import TopNStats from './components/TopNStats.jsx';
|
||||||
import TrendIndicator from './components/TrendIndicator.jsx';
|
import TrendIndicator from './components/TrendIndicator.jsx';
|
||||||
import LastSaved from './components/LastSaved.jsx';
|
import LastSaved from './components/LastSaved.jsx';
|
||||||
import Tooltip from './components/Tooltip.jsx';
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
import Sparkline from './components/Sparkline.jsx';
|
||||||
|
|
||||||
function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
|
function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
|
||||||
return (
|
return (
|
||||||
@@ -74,6 +78,105 @@ function MetricCard({ title, value, icon: Icon, color, description }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Обёртка для Sparkline по ширине контейнера */
|
||||||
|
function PingSparklineWrap({ history, color }) {
|
||||||
|
const wrapRef = useRef(null);
|
||||||
|
const [width, setWidth] = useState(280);
|
||||||
|
useEffect(() => {
|
||||||
|
const el = wrapRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const ro = new ResizeObserver(() => setWidth(el.offsetWidth || 280));
|
||||||
|
ro.observe(el);
|
||||||
|
setWidth(el.offsetWidth || 280);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div ref={wrapRef} className="mt-2" style={{ height: 56, width: '100%', minWidth: 0 }}>
|
||||||
|
<Sparkline
|
||||||
|
data={history}
|
||||||
|
width={width}
|
||||||
|
height={56}
|
||||||
|
strokeColor={color ? `var(--tblr-${color})` : 'var(--tblr-primary)'}
|
||||||
|
fillColor={color ? `var(--tblr-${color})` : 'var(--tblr-primary)'}
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Разворачиваемая карточка сервиса: свёрнутый вид — иконка и пинг; развёрнутый — тренд и мини-график (как Revenue в Tabler) */
|
||||||
|
function PingServiceCard({ config, ms, previousMs, history = [], loading, isExpanded, onToggle }) {
|
||||||
|
const { name, host, color } = config;
|
||||||
|
const { Icon } = getIconById(config.icon);
|
||||||
|
const value = loading ? '...' : (ms != null ? `${ms} мс` : '—');
|
||||||
|
const currentNum = typeof ms === 'number' ? ms : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`card h-100 position-relative ${isExpanded ? '' : 'cursor-pointer'}`}
|
||||||
|
style={isExpanded ? { minHeight: '200px' } : undefined}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={onToggle}
|
||||||
|
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onToggle()}
|
||||||
|
aria-expanded={isExpanded}
|
||||||
|
aria-label={isExpanded ? `Свернуть ${name}` : `Развернуть ${name}, пинг ${value}`}
|
||||||
|
>
|
||||||
|
{!isExpanded ? (
|
||||||
|
<div className="card-body d-flex align-items-center">
|
||||||
|
<span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0 rounded`}>
|
||||||
|
<Icon size={28} stroke={1.5} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div className="h4 mb-0 fw-bold">{value}</div>
|
||||||
|
<div className="text-muted small text-truncate" title={`${name} (${host})`}>
|
||||||
|
{name} <span className="opacity-75">({host})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<IconChevronDown size={18} className="text-muted ms-1 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<span className="text-muted text-uppercase small fw-semibold">{name}</span>
|
||||||
|
<span className="text-muted small d-flex align-items-center">
|
||||||
|
Последние замеры
|
||||||
|
<IconChevronUp size={14} className="ms-1" title="Свернуть" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex align-items-baseline flex-wrap gap-2 mb-3">
|
||||||
|
<div className="h3 mb-0 fw-bold">
|
||||||
|
{loading ? '...' : currentNum != null ? `${currentNum} мс` : '—'}
|
||||||
|
</div>
|
||||||
|
{!loading && currentNum != null && previousMs != null && (
|
||||||
|
<TrendIndicator
|
||||||
|
value={currentNum}
|
||||||
|
previousValue={previousMs}
|
||||||
|
format="percent"
|
||||||
|
inverse
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{history.length > 0 && (() => {
|
||||||
|
const sum = history.reduce((a, b) => a + b, 0);
|
||||||
|
const avg = Math.round(sum / history.length);
|
||||||
|
return (
|
||||||
|
<div className="text-muted small mb-2">
|
||||||
|
Среднее за период: <span className="fw-semibold text-body">{avg} мс</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
{history.length > 0 ? (
|
||||||
|
<PingSparklineWrap history={history} color={color} />
|
||||||
|
) : (
|
||||||
|
<div className="text-muted small mt-2">Нет истории замеров. Данные накапливаются при обновлении.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function Dashboard() {
|
function Dashboard() {
|
||||||
// Глобальный поиск удалён по требованию UX
|
// Глобальный поиск удалён по требованию UX
|
||||||
const [stats, setStats] = useState({
|
const [stats, setStats] = useState({
|
||||||
@@ -92,20 +195,28 @@ function Dashboard() {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [lastFetchTime, setLastFetchTime] = useState(null);
|
const [lastFetchTime, setLastFetchTime] = useState(null);
|
||||||
|
const [pingServices, setPingServices] = useState(null);
|
||||||
|
const [pingServicesConfig, setPingServicesConfig] = useState([]);
|
||||||
|
const [pingLoading, setPingLoading] = useState(true);
|
||||||
|
const [pingHistory, setPingHistory] = useState(() => ({}));
|
||||||
|
const [expandedPingId, setExpandedPingId] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const signal = controller.signal;
|
||||||
|
|
||||||
async function fetchStats() {
|
async function fetchStats() {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
try {
|
try {
|
||||||
// Загружаем данные с обработкой ошибок для каждого endpoint
|
const opts = { signal };
|
||||||
const results = await Promise.allSettled([
|
const results = await Promise.allSettled([
|
||||||
api.get('/domains-new', { params: { countOnly: true } }),
|
api.get('/domains-new', { params: { countOnly: true }, ...opts }),
|
||||||
api.get('/ip-ranges', { params: { countOnly: true } }),
|
api.get('/ip-ranges', { params: { countOnly: true }, ...opts }),
|
||||||
api.get('/asns', { params: { countOnly: true } }),
|
api.get('/asns', { params: { countOnly: true }, ...opts }),
|
||||||
api.get('/servers'),
|
api.get('/servers', opts),
|
||||||
api.get('/servers/availability', { params: { ttlSeconds: 60 } }),
|
api.get('/servers/availability', { params: { ttlSeconds: 60 }, ...opts }),
|
||||||
api.get('/s3/last-modified')
|
api.get('/s3/last-modified', opts)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Обрабатываем результаты
|
// Обрабатываем результаты
|
||||||
@@ -130,7 +241,7 @@ function Dashboard() {
|
|||||||
// Получаем дату последнего обновления
|
// Получаем дату последнего обновления
|
||||||
// Новый формат: объект с ключами { domainsNew, asns, servers, filters, ipRanges }
|
// Новый формат: объект с ключами { domainsNew, asns, servers, filters, ipRanges }
|
||||||
const lmRaw = s3Res.status === 'fulfilled' ? s3Res.value.data?.domainsNew?.lastModified : null;
|
const lmRaw = s3Res.status === 'fulfilled' ? s3Res.value.data?.domainsNew?.lastModified : null;
|
||||||
const lastModified = lmRaw ? new Date(lmRaw).toLocaleString() : new Date().toLocaleString();
|
const lastModified = lmRaw ? formatDateTime(lmRaw) : formatDateTime(new Date());
|
||||||
|
|
||||||
const domainsCount = domainsRes.status === 'fulfilled' && typeof domainsRes.value.data?.total === 'number'
|
const domainsCount = domainsRes.status === 'fulfilled' && typeof domainsRes.value.data?.total === 'number'
|
||||||
? domainsRes.value.data.total
|
? domainsRes.value.data.total
|
||||||
@@ -170,6 +281,7 @@ function Dashboard() {
|
|||||||
console.warn('Некоторые API недоступны:', errors.map(e => e.reason?.message));
|
console.warn('Некоторые API недоступны:', errors.map(e => e.reason?.message));
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Критическая ошибка загрузки статистики:', e);
|
console.error('Критическая ошибка загрузки статистики:', e);
|
||||||
setError('Не удалось загрузить статистику');
|
setError('Не удалось загрузить статистику');
|
||||||
setStats({
|
setStats({
|
||||||
@@ -188,6 +300,44 @@ function Dashboard() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
fetchStats();
|
fetchStats();
|
||||||
|
return () => controller.abort();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
api.get('/ping-services-list', { signal: controller.signal })
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (Array.isArray(data?.list)) setPingServicesConfig(data.list);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
setPingServicesConfig([]);
|
||||||
|
});
|
||||||
|
return () => controller.abort();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function fetchPingServices(forceRefresh = false, abortSignal) {
|
||||||
|
setPingLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
api.get('/ping-services', { params: forceRefresh ? { refresh: 1 } : {}, ...opts })
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (!data || typeof data !== 'object') return;
|
||||||
|
const byId = data.byId ?? data;
|
||||||
|
const history = data.history ?? {};
|
||||||
|
setPingServices(byId);
|
||||||
|
setPingHistory(typeof history === 'object' ? history : {});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
setPingServices(null);
|
||||||
|
})
|
||||||
|
.finally(() => setPingLoading(false));
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchPingServices(false, controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
@@ -205,11 +355,7 @@ function Dashboard() {
|
|||||||
{/* Заголовок страницы */}
|
{/* Заголовок страницы */}
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="Панель"
|
title="Панель"
|
||||||
pretitle={(
|
icon={<IconCloud size={24} />}
|
||||||
<Breadcrumbs items={[
|
|
||||||
{ label: 'Главная' },
|
|
||||||
]} />
|
|
||||||
)}
|
|
||||||
actions={(
|
actions={(
|
||||||
<div className="d-flex align-items-center gap-3">
|
<div className="d-flex align-items-center gap-3">
|
||||||
{lastFetchTime && (
|
{lastFetchTime && (
|
||||||
@@ -224,6 +370,43 @@ function Dashboard() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
|
||||||
|
<div className="d-flex align-items-center justify-content-between mb-2">
|
||||||
|
<h3 className="mb-0">Пинг сервисов</h3>
|
||||||
|
<Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary btn-sm"
|
||||||
|
onClick={() => fetchPingServices(true)}
|
||||||
|
disabled={pingLoading}
|
||||||
|
>
|
||||||
|
<IconRefresh className={pingLoading ? 'spin me-1' : 'me-1'} size={16} />
|
||||||
|
Обновить пинг
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<div className="row g-3 mb-4">
|
||||||
|
{pingServicesConfig.map((config) => (
|
||||||
|
<div
|
||||||
|
key={config.id}
|
||||||
|
className={expandedPingId === config.id ? 'col-12' : 'col-6 col-md-3'}
|
||||||
|
>
|
||||||
|
<PingServiceCard
|
||||||
|
config={config}
|
||||||
|
ms={pingServices?.[config.id]?.ms ?? null}
|
||||||
|
previousMs={(() => {
|
||||||
|
const hist = pingHistory[config.id] || [];
|
||||||
|
return hist.length >= 2 ? hist[hist.length - 2] : null;
|
||||||
|
})()}
|
||||||
|
history={pingHistory[config.id] || []}
|
||||||
|
loading={pingLoading}
|
||||||
|
isExpanded={expandedPingId === config.id}
|
||||||
|
onToggle={() => setExpandedPingId((id) => (id === config.id ? null : config.id))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Основные метрики */}
|
{/* Основные метрики */}
|
||||||
<div className="row g-3 mb-4">
|
<div className="row g-3 mb-4">
|
||||||
<div className="col-md-3">
|
<div className="col-md-3">
|
||||||
|
|||||||
+149
-311
@@ -29,9 +29,7 @@ import {
|
|||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
|
||||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||||
import S3MetaBar from './components/S3MetaBar.jsx';
|
|
||||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||||
@@ -46,6 +44,10 @@ import SavedFilters from './components/SavedFilters.jsx';
|
|||||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||||
import FormField from './components/FormField.jsx';
|
import FormField from './components/FormField.jsx';
|
||||||
import Tooltip from './components/Tooltip.jsx';
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
import Pagination from './components/Pagination.jsx';
|
||||||
|
import AddItemModal from './components/AddItemModal.jsx';
|
||||||
|
import LastSaved from './components/LastSaved.jsx';
|
||||||
|
import FormModal from './components/FormModal.jsx';
|
||||||
import { useToast } from './components/ToastContainer.jsx';
|
import { useToast } from './components/ToastContainer.jsx';
|
||||||
|
|
||||||
const API_URL = '/api';
|
const API_URL = '/api';
|
||||||
@@ -64,17 +66,18 @@ function DomainsNewManager() {
|
|||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
const searchTimer = useRef(null);
|
const searchTimer = useRef(null);
|
||||||
const didInit = useRef(false);
|
const didInit = useRef(false);
|
||||||
const [editingDomain, setEditingDomain] = useState(null);
|
|
||||||
const [editingValue, setEditingValue] = useState('');
|
const [editingValue, setEditingValue] = useState('');
|
||||||
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
|
const [itemBeingEdited, setItemBeingEdited] = useState(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [itemToDelete, setItemToDelete] = useState(null);
|
const [itemToDelete, setItemToDelete] = useState(null);
|
||||||
|
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [totalItems, setTotalItems] = useState(0);
|
const [totalItems, setTotalItems] = useState(0);
|
||||||
const [sortField, setSortField] = useState('domain');
|
const [sortField, setSortField] = useState('domain');
|
||||||
const [sortOrder, setSortOrder] = useState('asc');
|
const [sortOrder, setSortOrder] = useState('asc');
|
||||||
const [filterCommunity, setFilterCommunity] = useState('');
|
const [filterCommunity, setFilterCommunity] = useState('');
|
||||||
const editInputRef = useRef(null);
|
|
||||||
const pageSize = 10;
|
const pageSize = 10;
|
||||||
|
|
||||||
// Bulk operations
|
// Bulk operations
|
||||||
@@ -83,14 +86,25 @@ function DomainsNewManager() {
|
|||||||
// Справочник community для подсказок
|
// Справочник community для подсказок
|
||||||
const [communities, setCommunities] = useState([]);
|
const [communities, setCommunities] = useState([]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const signal = controller.signal;
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await api.get(`/communities`);
|
const res = await api.get(`/communities`, { signal });
|
||||||
setCommunities(Array.isArray(res.data) ? res.data : []);
|
setCommunities(Array.isArray(res.data) ? res.data : []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// тихо игнорируем
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const r = await api.get('/ws/url', { signal });
|
||||||
|
setWsUrl(String(r.data?.url || ''));
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return () => controller.abort();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);
|
const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);
|
||||||
@@ -107,14 +121,11 @@ function DomainsNewManager() {
|
|||||||
const [wsOpen, setWsOpen] = useState(false);
|
const [wsOpen, setWsOpen] = useState(false);
|
||||||
const [wsUrl, setWsUrl] = useState('');
|
const [wsUrl, setWsUrl] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
const fetchItems = async (abortSignal) => {
|
||||||
(async () => { try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {} })();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const fetchItems = async () => {
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
|
const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' }, ...opts });
|
||||||
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
||||||
const total = payload.length;
|
const total = payload.length;
|
||||||
setItems(payload);
|
setItems(payload);
|
||||||
@@ -126,6 +137,7 @@ function DomainsNewManager() {
|
|||||||
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
||||||
setError('');
|
setError('');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||||
console.error('Error fetching domains-new:', error);
|
console.error('Error fetching domains-new:', error);
|
||||||
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.');
|
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -133,42 +145,58 @@ function DomainsNewManager() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Подгрузка при изменении страницы/поиска/фильтра
|
useEffect(() => {
|
||||||
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
|
if (!didInit.current) {
|
||||||
|
didInit.current = true;
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchItems(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleAddItem = (item) => {
|
||||||
|
// Если item передан (из модалки), используем его, иначе из state (старый способ)
|
||||||
|
const domain = item?.domain || newItem.domain;
|
||||||
|
const community = item?.community || newItem.community;
|
||||||
|
|
||||||
|
const domainOk = isValidDomain(domain);
|
||||||
|
const communityOk = isValidCommunity(community);
|
||||||
|
|
||||||
const handleAddItem = () => {
|
|
||||||
const domainOk = isValidDomain(newItem.domain);
|
|
||||||
const communityOk = isValidCommunity(newItem.community);
|
|
||||||
setNewInvalid({ domain: !domainOk, community: !communityOk });
|
|
||||||
if (!domainOk || !communityOk) {
|
if (!domainOk || !communityOk) {
|
||||||
setError('Заполните корректный домен (example.com) и числовой community.');
|
setError('Заполните корректный домен (example.com) и числовой community.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setError('');
|
setError('');
|
||||||
setItems([...items, { domain: newItem.domain.trim().toLowerCase(), community: String(newItem.community).trim() }]);
|
const newDomain = { domain: domain.trim().toLowerCase(), community: String(community).trim() };
|
||||||
setNewItem({ domain: '', community: '' });
|
setItems([...items, newDomain]);
|
||||||
|
if (!item) setNewItem({ domain: '', community: '' }); // Сброс только если не из модалки
|
||||||
setNewInvalid({ domain: false, community: false });
|
setNewInvalid({ domain: false, community: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEdit = (item) => {
|
const handleEdit = (item) => {
|
||||||
setEditingDomain(item.domain);
|
setItemBeingEdited(item);
|
||||||
setEditingValue(item.community);
|
setEditingValue(item.community);
|
||||||
|
setEditModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveEdit = (domainName) => {
|
const handleSaveEdit = () => {
|
||||||
|
if (!itemBeingEdited) return;
|
||||||
if (!isValidCommunity(editingValue)) {
|
if (!isValidCommunity(editingValue)) {
|
||||||
setError('Community должен быть числом.');
|
setError('Community должен быть числом.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const updatedItems = items.map(i =>
|
const updatedItems = items.map(i =>
|
||||||
i.domain === domainName ? { ...i, community: String(editingValue).trim() } : i
|
i.domain === itemBeingEdited.domain ? { ...i, community: String(editingValue).trim() } : i
|
||||||
);
|
);
|
||||||
setItems(updatedItems);
|
setItems(updatedItems);
|
||||||
setEditingDomain(null);
|
setEditModalOpen(false);
|
||||||
|
setItemBeingEdited(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancelEdit = () => {
|
const handleCancelEdit = () => {
|
||||||
setEditingDomain(null);
|
setEditModalOpen(false);
|
||||||
|
setItemBeingEdited(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteItem = (domainNameToDelete) => {
|
const handleDeleteItem = (domainNameToDelete) => {
|
||||||
@@ -418,13 +446,6 @@ function DomainsNewManager() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Улучшенный инлайн-редакт
|
|
||||||
useEffect(() => {
|
|
||||||
if (editingDomain && editInputRef.current) {
|
|
||||||
editInputRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [editingDomain]);
|
|
||||||
|
|
||||||
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKey = (e) => {
|
const onKey = (e) => {
|
||||||
@@ -437,9 +458,15 @@ function DomainsNewManager() {
|
|||||||
return () => window.removeEventListener('keydown', onKey);
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
||||||
|
|
||||||
const handleEditKeyDown = (e, domainName) => {
|
const handleEditKeyDown = (e) => {
|
||||||
if (e.key === 'Enter') handleSaveEdit(domainName);
|
if (e.key === 'Enter') {
|
||||||
if (e.key === 'Escape') handleCancelEdit();
|
e.preventDefault();
|
||||||
|
handleSaveEdit();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
handleCancelEdit();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Bulk operations handlers
|
// Bulk operations handlers
|
||||||
@@ -506,18 +533,8 @@ function DomainsNewManager() {
|
|||||||
|
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="Домены"
|
title="Домены"
|
||||||
pretitle={(
|
icon={<IconWorld size={24} />}
|
||||||
<Breadcrumbs
|
meta={<LastSaved timestamp={lastModified} variant="compact" />}
|
||||||
items={[
|
|
||||||
{ label: 'Главная', to: '/dashboard' },
|
|
||||||
{ label: 'Данные' },
|
|
||||||
{ label: 'Домены', count: filtered.length },
|
|
||||||
]}
|
|
||||||
showBack={false}
|
|
||||||
filterInfo={filterCommunity ? `Community: ${filterCommunity}` : (searchTerm ? `Поиск: "${searchTerm}"` : null)}
|
|
||||||
count={filtered.length}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
actions={(
|
actions={(
|
||||||
<PageHeaderActions
|
<PageHeaderActions
|
||||||
loading={loading}
|
loading={loading}
|
||||||
@@ -535,6 +552,7 @@ function DomainsNewManager() {
|
|||||||
onSave={handleSaveChanges}
|
onSave={handleSaveChanges}
|
||||||
disableSave={loading}
|
disableSave={loading}
|
||||||
onHistory={() => setHistoryOpen(true)}
|
onHistory={() => setHistoryOpen(true)}
|
||||||
|
lastModified={lastModified}
|
||||||
onOnlineUpdate={() => setWsOpen(true)}
|
onOnlineUpdate={() => setWsOpen(true)}
|
||||||
onBackgroundUpdate={async () => {
|
onBackgroundUpdate={async () => {
|
||||||
try {
|
try {
|
||||||
@@ -552,133 +570,17 @@ function DomainsNewManager() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="row">
|
<AddItemModal
|
||||||
<div className="col-lg-3">
|
open={addModalOpen}
|
||||||
{/* Classic Add New Domain Card (improved) */}
|
onClose={() => setAddModalOpen(false)}
|
||||||
<div className="card card-md animate-in">
|
onSubmit={handleAddItem}
|
||||||
<div className="card-header bg-primary-lt">
|
type="domain"
|
||||||
<h3 className="card-title text-primary">
|
|
||||||
<IconPlus className="icon me-2" />
|
|
||||||
Добавить новый домен
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label required">Домен</label>
|
|
||||||
<div className="input-icon">
|
|
||||||
<span className="input-icon-addon">
|
|
||||||
<IconWorld size={18} />
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className={`form-control${newInvalid.domain ? ' is-invalid' : isValidDomain(newItem.domain) ? ' is-valid' : ''}`}
|
|
||||||
placeholder="example.com"
|
|
||||||
value={newItem.domain}
|
|
||||||
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{newInvalid.domain && <div className="invalid-feedback">Неверный формат домена</div>}
|
|
||||||
{isValidDomain(newItem.domain) && !newInvalid.domain && (
|
|
||||||
<div className="valid-feedback">Корректный формат домена</div>
|
|
||||||
)}
|
|
||||||
<div className="form-text text-muted small">
|
|
||||||
Формат: sub.domain.tld (например foo.example.org)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label required">Community</label>
|
|
||||||
<div className="input-icon">
|
|
||||||
<span className="input-icon-addon">
|
|
||||||
<IconHash size={18} />
|
|
||||||
</span>
|
|
||||||
<CommunityAutocompleteInput
|
|
||||||
value={newItem.community}
|
|
||||||
onChange={(v) => setNewItem({ ...newItem, community: v })}
|
|
||||||
communities={communities}
|
communities={communities}
|
||||||
placeholder="Начните вводить номер или имя"
|
loading={loading}
|
||||||
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
|
|
||||||
{isValidCommunity(newItem.community) && !newInvalid.community && (
|
|
||||||
<div className="valid-feedback">Корректный формат community</div>
|
|
||||||
)}
|
|
||||||
<div className="form-text text-muted small">
|
|
||||||
Формат: N или N:N (например 65000:100)
|
|
||||||
</div>
|
|
||||||
{(() => {
|
|
||||||
const match = communities.find(c => c.value === String(newItem.community).trim());
|
|
||||||
if (!match) return null;
|
|
||||||
return (
|
|
||||||
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div>
|
|
||||||
<strong>{match.name || match.value}</strong>
|
|
||||||
{match.description && <div className="text-muted small">{match.description}</div>}
|
|
||||||
{match.tags && match.tags.length > 0 && (
|
|
||||||
<div className="mt-1">
|
|
||||||
{match.tags.map((tag, idx) => (
|
|
||||||
<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
<div className="form-footer">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-primary w-100"
|
|
||||||
disabled={!isValidDomain(newItem.domain) || !isValidCommunity(newItem.community)}
|
|
||||||
>
|
|
||||||
<IconPlus className="icon me-2" />
|
|
||||||
Добавить домен
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Дополнительные варианты */}
|
<div className="row">
|
||||||
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
|
<div className="col-12">
|
||||||
<QuickAddBar
|
|
||||||
placeholder={'example.com 65000:100'}
|
|
||||||
help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
|
|
||||||
parseLine={(line) => { const [d, c] = String(line).split(/\s+/); return { domain: (d||'').toLowerCase(), community: (c||'').trim() }; }}
|
|
||||||
validateItem={(obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community)}
|
|
||||||
onApply={(list) => {
|
|
||||||
setItems(prev => {
|
|
||||||
const merged = [...prev, ...list];
|
|
||||||
const map = new Map();
|
|
||||||
for (const it of merged) {
|
|
||||||
const key = String(it.domain).trim().toLowerCase();
|
|
||||||
if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
|
|
||||||
}
|
|
||||||
return Array.from(map.values());
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="card card-md border-dashed mt-3 animate-in"
|
|
||||||
style={{animationDelay: '0.15s'}}
|
|
||||||
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
|
|
||||||
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
|
|
||||||
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
|
|
||||||
>
|
|
||||||
<div className="card-body text-center text-muted py-4">
|
|
||||||
<IconUpload size={32} className="mb-2 text-muted" />
|
|
||||||
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
|
|
||||||
<div className="small">Формат: domain community</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionCard>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-lg-9">
|
|
||||||
{/* Bulk Actions Bar */}
|
{/* Bulk Actions Bar */}
|
||||||
<BulkActionsBar
|
<BulkActionsBar
|
||||||
selectedCount={selectedDomains.size}
|
selectedCount={selectedDomains.size}
|
||||||
@@ -689,16 +591,22 @@ function DomainsNewManager() {
|
|||||||
onExport={handleBulkExport}
|
onExport={handleBulkExport}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="card animate-in" style={{animationDelay: '0.3s'}}>
|
<div className="card card-flat animate-in" style={{animationDelay: '0.3s'}}>
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<div className="row align-items-center w-100 g-2">
|
<div className="row align-items-center w-100 g-2">
|
||||||
<div className="col-auto">
|
<div className="col">
|
||||||
<h3 className="card-title mb-0">
|
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||||||
<IconWorld className="icon me-2" size={20} />
|
<div className="d-flex align-items-center gap-2">
|
||||||
Список доменов
|
<IconWorld className="icon text-muted" size={18} />
|
||||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
<span className="text-muted text-uppercase small">Список</span>
|
||||||
</h3>
|
<span className="badge bg-blue-lt text-blue">{filtered.length}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="d-none d-md-block text-muted small">
|
||||||
|
Всего записей: {filtered.length}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 mt-2"></div>
|
||||||
<div className="col">
|
<div className="col">
|
||||||
<div className="d-flex gap-2 flex-wrap">
|
<div className="d-flex gap-2 flex-wrap">
|
||||||
{/* Сохранённые фильтры */}
|
{/* Сохранённые фильтры */}
|
||||||
@@ -779,13 +687,24 @@ function DomainsNewManager() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-auto">
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setAddModalOpen(true)}
|
||||||
|
title="Добавить новый домен"
|
||||||
|
>
|
||||||
|
<IconPlus className="me-1" size={18} />
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Мета-информация будет показана внизу карточки */}
|
</div>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{/* Таблица с лёгкой карточной подложкой (плоский стиль) */}
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<TableSkeleton rows={10} cols={4} hasCheckbox={true} />
|
<TableSkeleton rows={10} cols={4} hasCheckbox={true} flat />
|
||||||
) : paginatedItems.length === 0 ? (
|
) : paginatedItems.length === 0 ? (
|
||||||
<TableEmpty cols={3}>
|
<TableEmpty cols={3} flat>
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="Нет доменов"
|
title="Нет доменов"
|
||||||
description="Импортируйте или добавьте записи, чтобы начать."
|
description="Импортируйте или добавьте записи, чтобы начать."
|
||||||
@@ -801,7 +720,7 @@ function DomainsNewManager() {
|
|||||||
</TableEmpty>
|
</TableEmpty>
|
||||||
) : (
|
) : (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
<table className="table table-flat table-vcenter table-nowrap mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style={{ width: '40px' }}>
|
<th style={{ width: '40px' }}>
|
||||||
@@ -841,7 +760,7 @@ function DomainsNewManager() {
|
|||||||
{paginatedItems.map((item, idx) => (
|
{paginatedItems.map((item, idx) => (
|
||||||
<tr
|
<tr
|
||||||
key={item.domain}
|
key={item.domain}
|
||||||
className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
|
className={selectedDomains.has(item.domain) ? 'table-selected' : ''}
|
||||||
style={{
|
style={{
|
||||||
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
|
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
|
||||||
}}
|
}}
|
||||||
@@ -878,42 +797,10 @@ function DomainsNewManager() {
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-end">
|
<td className="text-end">
|
||||||
<div className="btn-group">
|
<div className="btn-group btn-group-sm" role="group" aria-label={`Действия с доменом ${item.domain}`}>
|
||||||
{editingDomain === item.domain ? (
|
|
||||||
<>
|
|
||||||
<CommunityAutocompleteInput
|
|
||||||
value={editingValue}
|
|
||||||
onChange={setEditingValue}
|
|
||||||
communities={communities}
|
|
||||||
onKeyDown={(e) => handleEditKeyDown(e, item.domain)}
|
|
||||||
className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
|
|
||||||
style={{ width: '150px' }}
|
|
||||||
/>
|
|
||||||
<Tooltip content="Сохранить (Enter)">
|
|
||||||
<button
|
|
||||||
className="btn btn-success btn-icon btn-sm"
|
|
||||||
onClick={() => handleSaveEdit(item.domain)}
|
|
||||||
disabled={!isValidCommunity(editingValue)}
|
|
||||||
aria-label="Сохранить"
|
|
||||||
>
|
|
||||||
<IconCheck size={16} />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip content="Отмена (Esc)">
|
|
||||||
<button
|
|
||||||
className="btn btn-secondary btn-icon btn-sm"
|
|
||||||
onClick={handleCancelEdit}
|
|
||||||
aria-label="Отмена"
|
|
||||||
>
|
|
||||||
<IconX size={16} />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Tooltip content="Редактировать" position="top">
|
<Tooltip content="Редактировать" position="top">
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-primary btn-icon btn-sm"
|
className="btn btn-icon btn-outline-primary"
|
||||||
aria-label="Редактировать"
|
aria-label="Редактировать"
|
||||||
onClick={() => handleEdit(item)}
|
onClick={() => handleEdit(item)}
|
||||||
title="Редактировать"
|
title="Редактировать"
|
||||||
@@ -921,19 +808,9 @@ function DomainsNewManager() {
|
|||||||
<IconEdit size={16} />
|
<IconEdit size={16} />
|
||||||
</button>
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip content="Копировать" position="top">
|
|
||||||
<button
|
|
||||||
className="btn btn-outline-secondary btn-icon btn-sm"
|
|
||||||
aria-label="Копировать"
|
|
||||||
onClick={() => copyToClipboard(`${item.domain} ${item.community}`)}
|
|
||||||
title="Копировать"
|
|
||||||
>
|
|
||||||
<IconCopy size={16} />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip content="Удалить" position="top">
|
<Tooltip content="Удалить" position="top">
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-danger btn-icon btn-sm"
|
className="btn btn-icon btn-outline-danger"
|
||||||
aria-label="Удалить"
|
aria-label="Удалить"
|
||||||
onClick={() => confirmDelete(item)}
|
onClick={() => confirmDelete(item)}
|
||||||
title="Удалить"
|
title="Удалить"
|
||||||
@@ -941,8 +818,6 @@ function DomainsNewManager() {
|
|||||||
<IconTrash size={16} />
|
<IconTrash size={16} />
|
||||||
</button>
|
</button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -951,90 +826,17 @@ function DomainsNewManager() {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Пагинация */}
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="card-footer">
|
|
||||||
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
|
||||||
<div className="text-muted small">
|
|
||||||
Показано <strong>{((currentPage - 1) * pageSize) + 1}</strong> - <strong>{((currentPage - 1) * pageSize) + paginatedItems.length}</strong> из <strong>{totalItems || filtered.length}</strong>
|
|
||||||
</div>
|
</div>
|
||||||
<ul className="pagination m-0">
|
<div className="card-footer border-top-0">
|
||||||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
<Pagination
|
||||||
<button
|
currentPage={currentPage}
|
||||||
className="page-link"
|
totalPages={totalPages}
|
||||||
onClick={() => setCurrentPage(1)}
|
totalItems={totalItems || filtered.length}
|
||||||
disabled={currentPage === 1}
|
pageSize={pageSize}
|
||||||
aria-label="Первая страница"
|
onPageChange={setCurrentPage}
|
||||||
>
|
/>
|
||||||
<IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(currentPage - 1)}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
aria-label="Предыдущая страница"
|
|
||||||
>
|
|
||||||
<IconArrowUp size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
<span className="d-none d-sm-inline ms-1">Назад</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{(() => {
|
|
||||||
const pages = [];
|
|
||||||
let start = Math.max(1, currentPage - 2);
|
|
||||||
let end = Math.min(totalPages, currentPage + 2);
|
|
||||||
if (currentPage <= 3) end = Math.min(totalPages, 5);
|
|
||||||
if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
|
|
||||||
if (start > 1) pages.push('start-ellipsis');
|
|
||||||
for (let p = start; p <= end; p++) pages.push(p);
|
|
||||||
if (end < totalPages) pages.push('end-ellipsis');
|
|
||||||
return pages.map((p) => (
|
|
||||||
p === 'start-ellipsis' || p === 'end-ellipsis' ? (
|
|
||||||
<li key={p} className="page-item disabled">
|
|
||||||
<span className="page-link">…</span>
|
|
||||||
</li>
|
|
||||||
) : (
|
|
||||||
<li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(p)}
|
|
||||||
aria-label={`Страница ${p}`}
|
|
||||||
aria-current={currentPage === p ? 'page' : undefined}
|
|
||||||
>
|
|
||||||
{p}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
));
|
|
||||||
})()}
|
|
||||||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(currentPage + 1)}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
aria-label="Следующая страница"
|
|
||||||
>
|
|
||||||
<span className="d-none d-sm-inline me-1">Вперед</span>
|
|
||||||
<IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => setCurrentPage(totalPages)}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
aria-label="Последняя страница"
|
|
||||||
>
|
|
||||||
<IconArrowDown size={14} style={{ transform: 'rotate(-90deg)' }} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<S3MetaBar keys={["domainsNew"]} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1084,6 +886,42 @@ function DomainsNewManager() {
|
|||||||
url={wsUrl}
|
url={wsUrl}
|
||||||
onClose={() => setWsOpen(false)}
|
onClose={() => setWsOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
{/* Модальное окно редактирования community */}
|
||||||
|
<FormModal
|
||||||
|
show={editModalOpen && !!itemBeingEdited}
|
||||||
|
onClose={handleCancelEdit}
|
||||||
|
onSubmit={handleSaveEdit}
|
||||||
|
title="Редактировать community"
|
||||||
|
submitLabel="Сохранить"
|
||||||
|
submitIcon={IconCheck}
|
||||||
|
size="md"
|
||||||
|
centered
|
||||||
|
disabled={!isValidCommunity(editingValue)}
|
||||||
|
>
|
||||||
|
{itemBeingEdited && (
|
||||||
|
<>
|
||||||
|
<p className="text-muted mb-2">
|
||||||
|
Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
|
||||||
|
</p>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Community</label>
|
||||||
|
<CommunityAutocompleteInput
|
||||||
|
value={editingValue}
|
||||||
|
onChange={setEditingValue}
|
||||||
|
communities={communities}
|
||||||
|
onKeyDown={handleEditKeyDown}
|
||||||
|
className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
|
||||||
|
useShortValue={true}
|
||||||
|
/>
|
||||||
|
{!isValidCommunity(editingValue) && (
|
||||||
|
<div className="invalid-feedback d-block">
|
||||||
|
Введите корректное значение community (число или N:N).
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormModal>
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
show={clearCommunitiesOpen}
|
show={clearCommunitiesOpen}
|
||||||
onClose={() => setClearCommunitiesOpen(false)}
|
onClose={() => setClearCommunitiesOpen(false)}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
+808
-768
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,623 @@
|
|||||||
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||||
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
|
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||||
|
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||||
|
import Pagination from './components/Pagination.jsx';
|
||||||
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
import Modal from './components/Modal.jsx';
|
||||||
|
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||||
|
import {
|
||||||
|
IconShield,
|
||||||
|
IconRefresh,
|
||||||
|
IconSearch,
|
||||||
|
IconCopy,
|
||||||
|
IconAlertCircle,
|
||||||
|
IconList,
|
||||||
|
IconChartBar,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
const PAGE_SIZE = 15;
|
||||||
|
const DEFAULT_MIN_COUNT_N = 5;
|
||||||
|
|
||||||
|
/** Одиночный IP: без маски или /32 */
|
||||||
|
function isSingleIp(addr) {
|
||||||
|
const s = String(addr || '').trim();
|
||||||
|
if (!s) return false;
|
||||||
|
if (!s.includes('/')) return true;
|
||||||
|
const mask = s.split('/')[1];
|
||||||
|
return mask === '32' || mask === '128';
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Базовая подсеть /24 для группировки */
|
||||||
|
function getBase24(addr) {
|
||||||
|
const s = String(addr || '').trim();
|
||||||
|
const ipPart = s.includes('/') ? s.split('/')[0] : s;
|
||||||
|
const parts = ipPart.split('.');
|
||||||
|
if (parts.length !== 4) return null;
|
||||||
|
const [a, b, c] = parts.map((x) => parseInt(x, 10));
|
||||||
|
if (Number.isNaN(a) || Number.isNaN(b) || Number.isNaN(c)) return null;
|
||||||
|
return `${a}.${b}.${c}.0/24`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Анализ списка ban: группировка одиночных IP по /24, предложения суммаризации если в подсети > N.
|
||||||
|
*/
|
||||||
|
function analyzeBanList(banEntries, minCountN) {
|
||||||
|
const groupBy = new Map();
|
||||||
|
for (const entry of banEntries || []) {
|
||||||
|
if (!entry?.address || !isSingleIp(entry.address)) continue;
|
||||||
|
const base = getBase24(entry.address);
|
||||||
|
if (!base) continue;
|
||||||
|
if (!groupBy.has(base)) groupBy.set(base, { subnet: base, ids: [], entries: [] });
|
||||||
|
const g = groupBy.get(base);
|
||||||
|
g.ids.push(entry.id);
|
||||||
|
g.entries.push(entry);
|
||||||
|
}
|
||||||
|
const suggestions = [];
|
||||||
|
for (const [, g] of groupBy) {
|
||||||
|
if (g.entries.length > minCountN) {
|
||||||
|
suggestions.push({
|
||||||
|
subnet: g.subnet,
|
||||||
|
count: g.entries.length,
|
||||||
|
ids: g.ids,
|
||||||
|
addEntry: { address: g.subnet, list: 'ban', comment: `суммаризация ${g.entries.length} IP` },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { suggestions };
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Нормализация записи address-list из RouterOS (поля могут приходить в разном регистре) */
|
||||||
|
function normalizeEntry(entry) {
|
||||||
|
if (!entry || typeof entry !== 'object') return null;
|
||||||
|
const addr = entry.address ?? entry.Address ?? '';
|
||||||
|
const list = entry.list ?? entry.List ?? '';
|
||||||
|
const timeout = entry.timeout ?? entry.Timeout ?? '';
|
||||||
|
const comment = entry.comment ?? entry.Comment ?? '';
|
||||||
|
const id = entry['.id'] ?? entry.id ?? '';
|
||||||
|
const disabled = entry.disabled ?? entry.Disabled ?? '';
|
||||||
|
const dynamic = entry.dynamic ?? entry.Dynamic ?? '';
|
||||||
|
return {
|
||||||
|
id: id || addr || Math.random().toString(36).slice(2),
|
||||||
|
address: String(addr).trim(),
|
||||||
|
list: String(list).trim(),
|
||||||
|
timeout: String(timeout).trim(),
|
||||||
|
comment: String(comment).trim(),
|
||||||
|
disabled: String(disabled).trim(),
|
||||||
|
dynamic: String(dynamic).trim(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function AddressListTable({ title, listKey, items, loading, emptyMessage }) {
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const term = String(search || '').toLowerCase().trim();
|
||||||
|
if (!term) return items;
|
||||||
|
return items.filter((e) => {
|
||||||
|
const a = (e.address || '').toLowerCase();
|
||||||
|
const c = (e.comment || '').toLowerCase();
|
||||||
|
return a.includes(term) || c.includes(term);
|
||||||
|
});
|
||||||
|
}, [items, search]);
|
||||||
|
|
||||||
|
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
|
||||||
|
const paginated = useMemo(
|
||||||
|
() => filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
|
||||||
|
[filtered, page]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPage(1);
|
||||||
|
}, [search]);
|
||||||
|
|
||||||
|
const copyToClipboard = (text) => {
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
window.notify?.success?.('Скопировано в буфер обмена');
|
||||||
|
}).catch(() => {
|
||||||
|
window.notify?.error?.('Не удалось скопировать');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card card-flat mb-4">
|
||||||
|
<div className="card-header">
|
||||||
|
<div className="row align-items-center w-100 g-2">
|
||||||
|
<div className="col">
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<IconList className="icon text-muted" size={18} />
|
||||||
|
<span className="text-muted text-uppercase small">{title}</span>
|
||||||
|
<span className="badge bg-blue-lt text-blue">{filtered.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 mt-2" />
|
||||||
|
<div className="col">
|
||||||
|
<div className="input-icon flex-grow-1" style={{ maxWidth: '320px' }}>
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconSearch size={18} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Поиск по IP или комментарию..."
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
aria-label="Поиск"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{loading ? (
|
||||||
|
<TableSkeleton rows={8} cols={4} flat />
|
||||||
|
) : paginated.length === 0 ? (
|
||||||
|
<TableEmpty cols={4} flat>
|
||||||
|
<EmptyState
|
||||||
|
title={items.length === 0 ? emptyMessage : 'Нет совпадений'}
|
||||||
|
description={items.length === 0 ? `Список ${listKey} пуст на роутере.` : 'Измените поисковый запрос.'}
|
||||||
|
/>
|
||||||
|
</TableEmpty>
|
||||||
|
) : (
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-flat table-vcenter table-nowrap mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: '40px' }}>#</th>
|
||||||
|
<th>IP-адрес</th>
|
||||||
|
<th>Таймаут</th>
|
||||||
|
<th>Комментарий</th>
|
||||||
|
<th className="text-end" style={{ width: '50px' }}></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{paginated.map((entry, idx) => (
|
||||||
|
<tr key={entry.id || entry.address || idx}>
|
||||||
|
<td className="text-muted small">{(page - 1) * PAGE_SIZE + idx + 1}</td>
|
||||||
|
<td className="font-monospace">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span>{entry.address || '—'}</span>
|
||||||
|
<Tooltip content="Копировать IP" position="top">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
|
||||||
|
onClick={() => copyToClipboard(entry.address)}
|
||||||
|
aria-label="Копировать"
|
||||||
|
>
|
||||||
|
<IconCopy size={14} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="text-muted">{entry.timeout || '—'}</td>
|
||||||
|
<td className="text-muted small">{entry.comment || '—'}</td>
|
||||||
|
<td className="text-end"></td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{!loading && filtered.length > PAGE_SIZE && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={page}
|
||||||
|
totalPages={totalPages}
|
||||||
|
totalItems={filtered.length}
|
||||||
|
pageSize={PAGE_SIZE}
|
||||||
|
onPageChange={setPage}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FirewallPage() {
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [serverId, setServerId] = useState('');
|
||||||
|
const [serverMeta, setServerMeta] = useState(null);
|
||||||
|
const [data, setData] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [loadingServers, setLoadingServers] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [analysisOpen, setAnalysisOpen] = useState(false);
|
||||||
|
const [minCountN, setMinCountN] = useState(DEFAULT_MIN_COUNT_N);
|
||||||
|
const [analysisResult, setAnalysisResult] = useState(null);
|
||||||
|
const [applyConfirmOpen, setApplyConfirmOpen] = useState(false);
|
||||||
|
const [applying, setApplying] = useState(false);
|
||||||
|
const [ipInfoMap, setIpInfoMap] = useState({});
|
||||||
|
const [ipInfoLoading, setIpInfoLoading] = useState(false);
|
||||||
|
const [applyConfirmRow, setApplyConfirmRow] = useState(null);
|
||||||
|
const [applyingRow, setApplyingRow] = useState(null);
|
||||||
|
|
||||||
|
const routerServers = useMemo(
|
||||||
|
() =>
|
||||||
|
(servers || []).filter(
|
||||||
|
(s) => String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home'
|
||||||
|
),
|
||||||
|
[servers]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
(async () => {
|
||||||
|
setLoadingServers(true);
|
||||||
|
try {
|
||||||
|
const res = await api.get('/servers');
|
||||||
|
const list = Array.isArray(res.data) ? res.data : [];
|
||||||
|
if (!cancelled) setServers(list);
|
||||||
|
} catch (e) {
|
||||||
|
if (!cancelled) setError('Не удалось загрузить список серверов.');
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoadingServers(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchAddressLists = async () => {
|
||||||
|
if (!serverId) {
|
||||||
|
setData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const res = await api.get('/mikrotik/address-lists', { params: { serverId } });
|
||||||
|
const payload = res?.data ?? {};
|
||||||
|
setData({
|
||||||
|
serverLabel: payload.serverLabel || serverId,
|
||||||
|
ban: (payload.ban || []).map(normalizeEntry).filter(Boolean),
|
||||||
|
ban_counter: (payload.ban_counter || []).map(normalizeEntry).filter(Boolean),
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Firewall fetch:', e);
|
||||||
|
setData(null);
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить address-list с роутера.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (serverId) fetchAddressLists();
|
||||||
|
else setData(null);
|
||||||
|
}, [serverId]);
|
||||||
|
|
||||||
|
const runAnalysis = () => {
|
||||||
|
if (!data?.ban?.length) return;
|
||||||
|
const n = Math.max(2, parseInt(minCountN, 10) || DEFAULT_MIN_COUNT_N);
|
||||||
|
setMinCountN(n);
|
||||||
|
const result = analyzeBanList(data.ban, n);
|
||||||
|
setAnalysisResult(result);
|
||||||
|
setIpInfoMap({});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Подгрузка AS/орг с ipinfo.io для подсетей из анализа (лимит 30, с задержкой между запросами)
|
||||||
|
useEffect(() => {
|
||||||
|
const suggestions = analysisResult?.suggestions;
|
||||||
|
if (!suggestions?.length) return;
|
||||||
|
const maxFetch = 30;
|
||||||
|
const slice = suggestions.slice(0, maxFetch);
|
||||||
|
let cancelled = false;
|
||||||
|
setIpInfoLoading(true);
|
||||||
|
(async () => {
|
||||||
|
for (let i = 0; i < slice.length && !cancelled; i++) {
|
||||||
|
const s = slice[i];
|
||||||
|
const firstIp = s.subnet.split('/')[0];
|
||||||
|
try {
|
||||||
|
const res = await fetch(`https://ipinfo.io/${firstIp}/json`, { method: 'GET' });
|
||||||
|
if (!res.ok) continue;
|
||||||
|
const info = await res.json();
|
||||||
|
if (!cancelled) {
|
||||||
|
setIpInfoMap((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[s.subnet]: { org: info.org, country: info.country, city: info.city },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
if (!cancelled) setIpInfoMap((prev) => ({ ...prev, [s.subnet]: null }));
|
||||||
|
}
|
||||||
|
if (i < slice.length - 1) await new Promise((r) => setTimeout(r, 180));
|
||||||
|
}
|
||||||
|
if (!cancelled) setIpInfoLoading(false);
|
||||||
|
})();
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, [analysisResult?.suggestions]);
|
||||||
|
|
||||||
|
const applyPayload = applyConfirmRow
|
||||||
|
? { removeIds: applyConfirmRow.ids, addEntries: [applyConfirmRow.addEntry] }
|
||||||
|
: analysisResult?.suggestions?.length
|
||||||
|
? {
|
||||||
|
removeIds: analysisResult.suggestions.flatMap((s) => s.ids),
|
||||||
|
addEntries: analysisResult.suggestions.map((s) => s.addEntry),
|
||||||
|
}
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const handleApplySummary = async () => {
|
||||||
|
if (!serverId || !applyPayload) return;
|
||||||
|
const isRow = !!applyConfirmRow;
|
||||||
|
if (isRow) setApplyingRow(applyConfirmRow.subnet);
|
||||||
|
else setApplying(true);
|
||||||
|
try {
|
||||||
|
await api.post('/mikrotik/address-lists/apply-summary', {
|
||||||
|
serverId,
|
||||||
|
removeIds: applyPayload.removeIds,
|
||||||
|
addEntries: applyPayload.addEntries,
|
||||||
|
});
|
||||||
|
const removed = applyPayload.removeIds.length;
|
||||||
|
const added = applyPayload.addEntries.length;
|
||||||
|
window.notify?.success?.(`Удалено ${removed} записей, добавлено ${added} подсетей.`);
|
||||||
|
setApplyConfirmOpen(false);
|
||||||
|
setApplyConfirmRow(null);
|
||||||
|
if (isRow && analysisResult?.suggestions) {
|
||||||
|
setAnalysisResult((prev) => ({
|
||||||
|
...prev,
|
||||||
|
suggestions: prev.suggestions.filter((s) => s.subnet !== applyConfirmRow.subnet),
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
setAnalysisOpen(false);
|
||||||
|
setAnalysisResult(null);
|
||||||
|
}
|
||||||
|
await fetchAddressLists();
|
||||||
|
} catch (e) {
|
||||||
|
window.notify?.error?.(e?.response?.data?.message || e?.message || 'Ошибка применения');
|
||||||
|
} finally {
|
||||||
|
setApplying(false);
|
||||||
|
setApplyingRow(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentServerLabel = serverMeta?.dns || serverMeta?.ip || serverId || 'Не выбран';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{error && (
|
||||||
|
<ErrorAlert message={error} onClose={() => setError('')} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<PageHeader
|
||||||
|
title="Firewall"
|
||||||
|
icon={<IconShield size={24} />}
|
||||||
|
meta={`Списки блокировки (address-list) с роутера: ${currentServerLabel}`}
|
||||||
|
actions={
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={() => {
|
||||||
|
setAnalysisOpen(true);
|
||||||
|
setAnalysisResult(null);
|
||||||
|
}}
|
||||||
|
disabled={!serverId || !data?.ban?.length || loading}
|
||||||
|
title="Анализ списка ban и суммаризация по /24"
|
||||||
|
>
|
||||||
|
<IconChartBar className="me-1" size={18} />
|
||||||
|
Анализ
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={fetchAddressLists}
|
||||||
|
disabled={!serverId || loading}
|
||||||
|
>
|
||||||
|
<IconRefresh className={loading ? 'icon spin me-1' : 'me-1'} size={18} />
|
||||||
|
Обновить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="card card-flat mb-4">
|
||||||
|
<div className="card-header py-3">
|
||||||
|
<h3 className="card-title mb-0">Сервер (MikroTik)</h3>
|
||||||
|
<p className="text-muted small mb-0 mt-1">
|
||||||
|
Выберите jumphost или home-роутер для просмотра списков <strong>ban</strong> и <strong>ban_counter</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{loadingServers ? (
|
||||||
|
<div className="text-muted">Загрузка списка серверов...</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ maxWidth: '420px' }}>
|
||||||
|
<ServerAutocompleteInput
|
||||||
|
value={serverId}
|
||||||
|
onChange={setServerId}
|
||||||
|
onSelectMeta={setServerMeta}
|
||||||
|
servers={routerServers}
|
||||||
|
placeholder="Выберите сервер..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!serverId && (
|
||||||
|
<div className="card card-flat">
|
||||||
|
<div className="card-body text-center py-5">
|
||||||
|
<IconAlertCircle className="icon text-muted mb-2" size={48} />
|
||||||
|
<p className="text-muted mb-0">Выберите сервер выше, чтобы загрузить address-list (ban и ban_counter).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{serverId && data && (
|
||||||
|
<>
|
||||||
|
<AddressListTable
|
||||||
|
title="Список ban"
|
||||||
|
listKey="ban"
|
||||||
|
items={data.ban}
|
||||||
|
loading={loading}
|
||||||
|
emptyMessage="Список ban пуст"
|
||||||
|
/>
|
||||||
|
<AddressListTable
|
||||||
|
title="Список ban_counter"
|
||||||
|
listKey="ban_counter"
|
||||||
|
items={data.ban_counter}
|
||||||
|
loading={loading}
|
||||||
|
emptyMessage="Список ban_counter пуст"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{serverId && loading && !data && (
|
||||||
|
<div className="card card-flat">
|
||||||
|
<div className="card-body py-5 text-center text-muted">
|
||||||
|
<IconRefresh className="icon spin me-2" size={20} />
|
||||||
|
Загрузка списков с роутера...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
show={analysisOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setAnalysisOpen(false);
|
||||||
|
setAnalysisResult(null);
|
||||||
|
setApplyConfirmOpen(false);
|
||||||
|
setApplyConfirmRow(null);
|
||||||
|
setIpInfoMap({});
|
||||||
|
}}
|
||||||
|
title="Анализ списка ban"
|
||||||
|
size="xl"
|
||||||
|
>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Суммаризировать подсети /24, в которых одиночных IP больше чем</label>
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
style={{ width: '80px' }}
|
||||||
|
min={2}
|
||||||
|
max={100}
|
||||||
|
value={minCountN}
|
||||||
|
onChange={(e) => setMinCountN(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="text-muted small">(по умолчанию {DEFAULT_MIN_COUNT_N})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<button type="button" className="btn btn-primary" onClick={runAnalysis}>
|
||||||
|
<IconChartBar className="me-1" size={18} />
|
||||||
|
Анализировать
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{analysisResult && (
|
||||||
|
<>
|
||||||
|
{analysisResult.suggestions.length === 0 ? (
|
||||||
|
<p className="text-muted mb-0">Нет подсетей для суммаризации (в каждой /24 не больше {minCountN} одиночных IP).</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p className="mb-2">
|
||||||
|
Найдено <strong>{analysisResult.suggestions.length}</strong> подсетей /24 для замены: удалить одиночные IP и добавить одну запись на подсеть.
|
||||||
|
{ipInfoLoading && (
|
||||||
|
<span className="ms-2 text-muted small">(загрузка AS/хостер с ipinfo.io…)</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-sm table-vcenter mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Подсеть</th>
|
||||||
|
<th className="text-end">Кол-во IP</th>
|
||||||
|
<th>AS / Хостер</th>
|
||||||
|
<th>Ссылка</th>
|
||||||
|
<th>Действие</th>
|
||||||
|
<th className="text-end" style={{ width: '120px' }}>Применить</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{analysisResult.suggestions.map((s) => {
|
||||||
|
const firstIp = s.subnet.split('/')[0];
|
||||||
|
const info = ipInfoMap[s.subnet];
|
||||||
|
const rowApplying = applyingRow === s.subnet;
|
||||||
|
return (
|
||||||
|
<tr key={s.subnet}>
|
||||||
|
<td className="font-monospace">{s.subnet}</td>
|
||||||
|
<td className="text-end">{s.count}</td>
|
||||||
|
<td className="small">
|
||||||
|
{info === undefined
|
||||||
|
? (ipInfoLoading ? '…' : '—')
|
||||||
|
: info
|
||||||
|
? (info.org || info.country ? [info.org, info.country].filter(Boolean).join(' · ') : '—')
|
||||||
|
: '—'}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a
|
||||||
|
href={`https://ipinfo.io/${firstIp}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary"
|
||||||
|
>
|
||||||
|
ipinfo.io
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td className="text-muted small">Удалить {s.count} записей → добавить 1</td>
|
||||||
|
<td className="text-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-warning"
|
||||||
|
disabled={rowApplying || applying}
|
||||||
|
onClick={() => {
|
||||||
|
setApplyConfirmRow(s);
|
||||||
|
setApplyConfirmOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{rowApplying ? (
|
||||||
|
<span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
|
||||||
|
) : null}
|
||||||
|
Применить
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-warning"
|
||||||
|
onClick={() => {
|
||||||
|
setApplyConfirmRow(null);
|
||||||
|
setApplyConfirmOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Применить всё на роутере
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={applyConfirmOpen}
|
||||||
|
title={applyConfirmRow ? `Применить для ${applyConfirmRow.subnet}?` : 'Применить суммаризацию на роутере?'}
|
||||||
|
message={
|
||||||
|
applyConfirmRow
|
||||||
|
? `Удалить ${applyConfirmRow.count} записей и добавить 1 запись (подсеть ${applyConfirmRow.subnet}). Продолжить?`
|
||||||
|
: applyPayload
|
||||||
|
? `Будет удалено ${applyPayload.removeIds.length} записей и добавлено ${applyPayload.addEntries.length} записей (подсети /24). Продолжить?`
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
confirmText="Применить"
|
||||||
|
cancelText="Отмена"
|
||||||
|
destructive
|
||||||
|
size="md"
|
||||||
|
loading={applying || !!applyingRow}
|
||||||
|
onConfirm={handleApplySummary}
|
||||||
|
onCancel={() => {
|
||||||
|
setApplyConfirmOpen(false);
|
||||||
|
setApplyConfirmRow(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -14,7 +14,10 @@ import '@xyflow/react/dist/style.css';
|
|||||||
import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize, IconSearch, IconX, IconRefresh } from '@tabler/icons-react';
|
import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize, IconSearch, IconX, IconRefresh } from '@tabler/icons-react';
|
||||||
import Tooltip from './components/Tooltip.jsx';
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
|
||||||
function GraphView({ servers, connections, onCreateConnection }) {
|
/**
|
||||||
|
* @param {Object} [pingMap] - опционально: ключ "fromIp:toIp" -> число (мс). Пинг между серверами для подписи на рёбрах.
|
||||||
|
*/
|
||||||
|
function GraphView({ servers, connections, onCreateConnection, pingMap }) {
|
||||||
const flowRef = useRef(null);
|
const flowRef = useRef(null);
|
||||||
const instanceRef = useRef(null);
|
const instanceRef = useRef(null);
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
@@ -144,17 +147,32 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
|||||||
}, [servers, connections]);
|
}, [servers, connections]);
|
||||||
|
|
||||||
const initialEdgesData = useMemo(() => {
|
const initialEdgesData = useMemo(() => {
|
||||||
|
const getPingLabel = (fromIp, toIp) => {
|
||||||
|
if (!pingMap || typeof pingMap !== 'object') return '';
|
||||||
|
const fwd = pingMap[`${fromIp}:${toIp}`];
|
||||||
|
const rev = pingMap[`${toIp}:${fromIp}`];
|
||||||
|
const parts = [];
|
||||||
|
if (typeof fwd === 'number') parts.push(`→ ${fwd} ms`);
|
||||||
|
if (typeof rev === 'number') parts.push(`← ${rev} ms`);
|
||||||
|
if (parts.length === 0) return '';
|
||||||
|
return parts.join(' · ');
|
||||||
|
};
|
||||||
return (connections || []).map((c, idx) => {
|
return (connections || []).map((c, idx) => {
|
||||||
const style = getTunnelStyle(c.tunnelType);
|
const style = getTunnelStyle(c.tunnelType);
|
||||||
const baseLabel = c.tunnelType || 'TUNNEL';
|
const baseLabel = c.tunnelType || 'TUNNEL';
|
||||||
const ipLabel = c.ipA && c.ipB ? `${c.ipA} ⇄ ${c.ipB}` : '';
|
const ipLabel = c.ipA && c.ipB ? `${c.ipA} ⇄ ${c.ipB}` : '';
|
||||||
|
const pingLabel = getPingLabel(String(c.from), String(c.to));
|
||||||
|
const labelParts = [baseLabel];
|
||||||
|
if (ipLabel) labelParts.push(ipLabel);
|
||||||
|
if (pingLabel) labelParts.push(pingLabel);
|
||||||
|
const fullLabel = labelParts.join(' · ');
|
||||||
const edgeId = `${c.from}-${c.to}-${idx}`;
|
const edgeId = `${c.from}-${c.to}-${idx}`;
|
||||||
const isHighlighted = highlightedEdges.has(edgeId);
|
const isHighlighted = highlightedEdges.has(edgeId);
|
||||||
return {
|
return {
|
||||||
id: edgeId,
|
id: edgeId,
|
||||||
source: String(c.from),
|
source: String(c.from),
|
||||||
target: String(c.to),
|
target: String(c.to),
|
||||||
label: ipLabel ? `${baseLabel} · ${ipLabel}` : baseLabel,
|
label: fullLabel,
|
||||||
type: 'smoothstep',
|
type: 'smoothstep',
|
||||||
style: {
|
style: {
|
||||||
stroke: style.color,
|
stroke: style.color,
|
||||||
@@ -176,7 +194,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
|||||||
animated: false,
|
animated: false,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId]);
|
}, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId, pingMap]);
|
||||||
|
|
||||||
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdgesData);
|
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdgesData);
|
||||||
|
|
||||||
|
|||||||
+291
-523
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,506 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import { useNotify } from './components/NotifyProvider.jsx';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||||
|
import { countryToFlag } from './utils/serverUtils.js';
|
||||||
|
import {
|
||||||
|
IconTopologyRing,
|
||||||
|
IconNetwork,
|
||||||
|
IconSearch,
|
||||||
|
IconRefresh,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
export default function InterfaceSpeedTest() {
|
||||||
|
const notify = useNotify();
|
||||||
|
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [networkConfig, setNetworkConfig] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [serverSearch, setServerSearch] = useState('');
|
||||||
|
|
||||||
|
const [serverId, setServerId] = useState('');
|
||||||
|
const [selectedInterfaceName, setSelectedInterfaceName] = useState('');
|
||||||
|
const [running, setRunning] = useState(false);
|
||||||
|
const [speedResult, setSpeedResult] = useState(null);
|
||||||
|
const [speedSettings, setSpeedSettings] = useState({
|
||||||
|
protocol: 'tcp',
|
||||||
|
durationSeconds: 10,
|
||||||
|
cacheMinutes: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const signal = controller.signal;
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [serversRes, netRes, uiRes] = await Promise.all([
|
||||||
|
api.get('/servers', { signal }),
|
||||||
|
api.get('/network-config', { signal }).catch(() => ({ data: null })),
|
||||||
|
api.get('/ui-settings', { signal }).catch(() => ({ data: {} })),
|
||||||
|
]);
|
||||||
|
|
||||||
|
setServers(Array.isArray(serversRes?.data) ? serversRes.data : []);
|
||||||
|
setNetworkConfig(
|
||||||
|
netRes?.data && typeof netRes.data === 'object'
|
||||||
|
? netRes.data
|
||||||
|
: { gateways: [], tunnelInterfaces: [] }
|
||||||
|
);
|
||||||
|
|
||||||
|
const ui = uiRes?.data || {};
|
||||||
|
const proto =
|
||||||
|
String(ui.interfaceSpeedTestProtocol || 'tcp').toLowerCase() ===
|
||||||
|
'udp'
|
||||||
|
? 'udp'
|
||||||
|
: 'tcp';
|
||||||
|
const duration = Math.max(
|
||||||
|
1,
|
||||||
|
Math.min(
|
||||||
|
600,
|
||||||
|
parseInt(ui.interfaceSpeedTestDurationSeconds, 10) || 5
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const cacheMinutes = Math.max(
|
||||||
|
0,
|
||||||
|
parseInt(ui.interfaceSpeedTestCacheMinutes, 10) || 0
|
||||||
|
);
|
||||||
|
setSpeedSettings({
|
||||||
|
protocol: proto,
|
||||||
|
durationSeconds: duration,
|
||||||
|
cacheMinutes,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('[InterfaceSpeedTest] load failed', e);
|
||||||
|
notify.error('Не удалось загрузить данные для замера скорости');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [notify]);
|
||||||
|
|
||||||
|
const gateways = useMemo(
|
||||||
|
() =>
|
||||||
|
networkConfig?.gateways && Array.isArray(networkConfig.gateways)
|
||||||
|
? networkConfig.gateways
|
||||||
|
: [],
|
||||||
|
[networkConfig]
|
||||||
|
);
|
||||||
|
|
||||||
|
const tunnelInterfaces = useMemo(
|
||||||
|
() =>
|
||||||
|
networkConfig?.tunnelInterfaces &&
|
||||||
|
Array.isArray(networkConfig.tunnelInterfaces)
|
||||||
|
? networkConfig.tunnelInterfaces
|
||||||
|
: [],
|
||||||
|
[networkConfig]
|
||||||
|
);
|
||||||
|
|
||||||
|
const jumphostServers = useMemo(
|
||||||
|
() =>
|
||||||
|
(servers || []).filter((s) =>
|
||||||
|
['jumphost', 'home'].includes(
|
||||||
|
String(s.type || '').toLowerCase()
|
||||||
|
)
|
||||||
|
),
|
||||||
|
[servers]
|
||||||
|
);
|
||||||
|
|
||||||
|
const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
|
||||||
|
|
||||||
|
const jumphostInputServers = useMemo(
|
||||||
|
() => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
|
||||||
|
[jumphostServers]
|
||||||
|
);
|
||||||
|
|
||||||
|
const visibleJumphostServers = useMemo(() => {
|
||||||
|
if (!serverSearch.trim()) return jumphostInputServers;
|
||||||
|
const q = serverSearch.trim().toLowerCase();
|
||||||
|
return jumphostInputServers.filter((s) => {
|
||||||
|
const fields = [
|
||||||
|
s.id,
|
||||||
|
s.ip,
|
||||||
|
s.dns,
|
||||||
|
s.extIp,
|
||||||
|
s.internalIp,
|
||||||
|
s.country,
|
||||||
|
s.provider,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
return fields.includes(q);
|
||||||
|
});
|
||||||
|
}, [jumphostInputServers, serverSearch]);
|
||||||
|
|
||||||
|
const currentServer = useMemo(
|
||||||
|
() => jumphostServers.find((s) => makeServerId(s) === serverId) || null,
|
||||||
|
[jumphostServers, serverId]
|
||||||
|
);
|
||||||
|
|
||||||
|
const interfacesForServer = useMemo(() => {
|
||||||
|
if (!serverId || !tunnelInterfaces.length) return [];
|
||||||
|
const ids = new Set(
|
||||||
|
[serverId, currentServer?.id, currentServer?.ip, currentServer?.dns]
|
||||||
|
.filter(Boolean)
|
||||||
|
.map(String)
|
||||||
|
);
|
||||||
|
return tunnelInterfaces.filter(
|
||||||
|
(i) =>
|
||||||
|
i &&
|
||||||
|
i.name &&
|
||||||
|
(ids.has(String(i.serverId)) || ids.has(String(i.serverId2)))
|
||||||
|
);
|
||||||
|
}, [tunnelInterfaces, serverId, currentServer]);
|
||||||
|
|
||||||
|
const currentServerLabel =
|
||||||
|
currentServer?.dns ||
|
||||||
|
currentServer?.ip ||
|
||||||
|
makeServerId(currentServer || {}) ||
|
||||||
|
'Не выбран';
|
||||||
|
|
||||||
|
const isInitialLoading = loading && servers.length === 0;
|
||||||
|
|
||||||
|
const formatMbps = (bps) => {
|
||||||
|
if (bps == null || Number.isNaN(bps)) return '—';
|
||||||
|
const mbps = bps / 1_000_000;
|
||||||
|
if (!Number.isFinite(mbps)) return '—';
|
||||||
|
return `${mbps.toFixed(2)} Мбит/с`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Запросить только кеш (без замера). При выборе сервера/интерфейса показываем кеш, если есть. */
|
||||||
|
const fetchCachedResult = useCallback(async () => {
|
||||||
|
if (!serverId || !selectedInterfaceName) {
|
||||||
|
setSpeedResult(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await api.post('/mikrotik/speed-test', {
|
||||||
|
serverId,
|
||||||
|
interfaceName: selectedInterfaceName,
|
||||||
|
cacheOnly: true,
|
||||||
|
});
|
||||||
|
const data = res?.data || {};
|
||||||
|
if (data.ok !== false && !data.notInCache && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
|
||||||
|
setSpeedResult(data);
|
||||||
|
} else {
|
||||||
|
setSpeedResult(null);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setSpeedResult(null);
|
||||||
|
}
|
||||||
|
}, [serverId, selectedInterfaceName]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchCachedResult();
|
||||||
|
}, [fetchCachedResult]);
|
||||||
|
|
||||||
|
const handleRunTest = async () => {
|
||||||
|
if (!serverId) {
|
||||||
|
notify.error('Выберите сервер (jumphost/home) для замера скорости');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!selectedInterfaceName) {
|
||||||
|
notify.error('Выберите туннельный интерфейс для замера скорости');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setRunning(true);
|
||||||
|
setSpeedResult(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = {
|
||||||
|
serverId,
|
||||||
|
interfaceName: selectedInterfaceName,
|
||||||
|
durationSeconds: speedSettings.durationSeconds,
|
||||||
|
forceRefresh: true,
|
||||||
|
};
|
||||||
|
const res = await api.post('/mikrotik/speed-test', body, {
|
||||||
|
timeout: 120000,
|
||||||
|
});
|
||||||
|
const data = res?.data || {};
|
||||||
|
if (data.ok === false) {
|
||||||
|
notify.error(
|
||||||
|
data.error || 'Замер скорости по интерфейсу завершился с ошибкой'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSpeedResult(data);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[InterfaceSpeedTest] test failed', e);
|
||||||
|
notify.error(
|
||||||
|
e?.response?.data?.message || e?.message || 'Ошибка замера скорости'
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setRunning(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setServerId('');
|
||||||
|
setSelectedInterfaceName('');
|
||||||
|
setSpeedResult(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
<PageHeader
|
||||||
|
title="Скорость интерфейсов MikroTik"
|
||||||
|
icon={<IconTopologyRing size={24} />}
|
||||||
|
meta={`Текущий сервер: ${currentServerLabel}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-md-5">
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2 d-flex align-items-center justify-content-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="card-title mb-0">Серверы (jumphost / home)</h3>
|
||||||
|
<p className="text-muted small mb-0 mt-0">
|
||||||
|
Выберите роутер с настроенным MikroTik API
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="input-icon input-icon-sm" style={{ minWidth: 200 }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Поиск серверов..."
|
||||||
|
value={serverSearch}
|
||||||
|
onChange={(e) => setServerSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconSearch size={14} className="text-muted" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body py-2">
|
||||||
|
{isInitialLoading ? (
|
||||||
|
<TableSkeleton rows={2} columns={2} />
|
||||||
|
) : jumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Нет серверов типа <code>jumphost</code> или <code>home</code>.
|
||||||
|
Добавьте их в разделе «Серверы», чтобы использовать замер
|
||||||
|
скорости.
|
||||||
|
</div>
|
||||||
|
) : visibleJumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
По вашему запросу серверы не найдены. Попробуйте изменить фильтр
|
||||||
|
поиска.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="row row-cards g-1">
|
||||||
|
{visibleJumphostServers.map((s) => {
|
||||||
|
const id = s.id;
|
||||||
|
const isActive = id === serverId;
|
||||||
|
const flag = s.country ? countryToFlag(s.country) : '';
|
||||||
|
const line = [s.dns, s.ip].filter(Boolean).join(' · ');
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="col-12 col-sm-6 col-md-6"
|
||||||
|
key={id}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`card card-sm h-100 cursor-pointer ${
|
||||||
|
isActive ? 'border-primary card-hover' : 'card-hover'
|
||||||
|
}`}
|
||||||
|
onClick={() => setServerId(id)}
|
||||||
|
>
|
||||||
|
<div className="card-body py-2 px-2 d-flex align-items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="avatar avatar-sm bg-primary-lt"
|
||||||
|
title={s.country || ''}
|
||||||
|
>
|
||||||
|
{flag || s.ip?.slice(0, 2) || '?'}
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div
|
||||||
|
className="fw-semibold text-truncate small"
|
||||||
|
title={s.dns || s.ip || id}
|
||||||
|
>
|
||||||
|
{s.dns || s.ip || id}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-muted small text-truncate"
|
||||||
|
title={line}
|
||||||
|
>
|
||||||
|
{line ||
|
||||||
|
[s.country, s.provider]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' · ') ||
|
||||||
|
'—'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2 mt-2">
|
||||||
|
<span className="badge bg-primary-lt text-primary">
|
||||||
|
Сервер: {currentServerLabel}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<h3 className="card-title mb-0">Интерфейсы туннелей</h3>
|
||||||
|
</div>
|
||||||
|
<div className="card-body py-2">
|
||||||
|
{loading && !networkConfig ? (
|
||||||
|
<div className="text-muted small">Загрузка сетевых настроек…</div>
|
||||||
|
) : !serverId ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Выберите сервер слева, затем интерфейс для замера скорости.
|
||||||
|
</div>
|
||||||
|
) : interfacesForServer.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Для выбранного сервера нет туннельных интерфейсов в
|
||||||
|
<code> /network-config</code>. Добавьте интерфейсы в разделе
|
||||||
|
«Сетевые настройки».
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="mb-2">
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
value={selectedInterfaceName}
|
||||||
|
onChange={(e) => setSelectedInterfaceName(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Не выбран</option>
|
||||||
|
{interfacesForServer.map((iface) => (
|
||||||
|
<option key={iface.name} value={iface.name}>
|
||||||
|
{iface.name} ({iface.localIp} ⇄ {iface.remoteIp})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small">
|
||||||
|
Для сопоставления используется имя интерфейса из
|
||||||
|
<code> /network-config.tunnelInterfaces</code>. В RouterOS
|
||||||
|
имя должно совпадать.
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-7">
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2 d-flex align-items-center justify-content-between">
|
||||||
|
<h3 className="card-title mb-0">Параметры замера</h3>
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={handleReset}
|
||||||
|
disabled={running}
|
||||||
|
>
|
||||||
|
<IconRefresh size={16} className="me-1" />
|
||||||
|
Сбросить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary btn-sm"
|
||||||
|
onClick={handleRunTest}
|
||||||
|
disabled={running || !serverId || !selectedInterfaceName}
|
||||||
|
>
|
||||||
|
{running ? 'Замер…' : 'Запустить замер'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body py-2">
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label small mb-0">Протокол</label>
|
||||||
|
<div className="d-flex align-items-center gap-1">
|
||||||
|
<IconNetwork size={16} className="text-muted" />
|
||||||
|
<span className="small text-uppercase">
|
||||||
|
{speedSettings.protocol === 'udp' ? 'UDP' : 'TCP'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small">
|
||||||
|
Значение берётся из настроек интерфейса.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label small mb-0">
|
||||||
|
Время замера (сек)
|
||||||
|
</label>
|
||||||
|
<div className="fw-semibold">
|
||||||
|
{speedSettings.durationSeconds}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label small mb-0">
|
||||||
|
Кеш результата (мин)
|
||||||
|
</label>
|
||||||
|
<div className="fw-semibold">
|
||||||
|
{speedSettings.cacheMinutes}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<h3 className="card-title mb-0">
|
||||||
|
Скорость по интерфейсу MikroTik
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{!speedResult ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Выберите сервер и интерфейс, затем запустите замер. Средние
|
||||||
|
скорости приёма и передачи появятся здесь.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-12 col-md-6">
|
||||||
|
<div className="card bg-blue-lt">
|
||||||
|
<div className="card-body py-2">
|
||||||
|
<div className="text-muted small mb-1">Интерфейс</div>
|
||||||
|
<div className="fw-semibold">
|
||||||
|
{speedResult.interfaceName || selectedInterfaceName}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small mt-1">
|
||||||
|
Замер за {speedResult.durationSeconds} сек
|
||||||
|
{speedResult.cached ? ' (из кеша)' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6">
|
||||||
|
<div className="card bg-azure-lt">
|
||||||
|
<div className="card-body py-2">
|
||||||
|
<div className="text-muted small mb-1">
|
||||||
|
TCP скорость
|
||||||
|
</div>
|
||||||
|
<div className="fw-bold">
|
||||||
|
Download: {formatMbps(speedResult.tcpDownloadBps)}
|
||||||
|
</div>
|
||||||
|
<div className="fw-bold mt-1">
|
||||||
|
Upload: {formatMbps(speedResult.tcpUploadBps)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,999 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import * as Diff from 'diff';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import { useNotify } from './components/NotifyProvider.jsx';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||||
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
|
import DataTable from './components/DataTable.jsx';
|
||||||
|
import { LargeModal, FullscreenModal } from './components/Modal.jsx';
|
||||||
|
import { countryToFlag } from './utils/serverUtils.js';
|
||||||
|
import {
|
||||||
|
IconRefresh,
|
||||||
|
IconAlertTriangle,
|
||||||
|
IconEye,
|
||||||
|
IconArrowsLeftRight,
|
||||||
|
IconDownload,
|
||||||
|
IconCopy,
|
||||||
|
IconSearch,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Строит две колонки строк для side-by-side diff (как git diff).
|
||||||
|
* leftLines/rightLines — массивы { text, type: 'unchanged'|'removed'|'added'|'empty' }.
|
||||||
|
*/
|
||||||
|
function getDiffLines(oldStr, newStr) {
|
||||||
|
const left = [];
|
||||||
|
const right = [];
|
||||||
|
const changes = Diff.diffLines(oldStr || '', newStr || '');
|
||||||
|
for (const part of changes) {
|
||||||
|
const lines = (part.value || '').split('\n');
|
||||||
|
if (part.value && part.value.endsWith('\n') && lines.length > 0) lines.pop();
|
||||||
|
for (const line of lines) {
|
||||||
|
if (part.added) {
|
||||||
|
left.push({ text: '', type: 'empty' });
|
||||||
|
right.push({ text: line, type: 'added' });
|
||||||
|
} else if (part.removed) {
|
||||||
|
left.push({ text: line, type: 'removed' });
|
||||||
|
right.push({ text: '', type: 'empty' });
|
||||||
|
} else {
|
||||||
|
left.push({ text: line, type: 'unchanged' });
|
||||||
|
right.push({ text: line, type: 'unchanged' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { left, right };
|
||||||
|
}
|
||||||
|
|
||||||
|
const diffPanelStyle = {
|
||||||
|
maxHeight: 360,
|
||||||
|
overflow: 'auto',
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'ui-monospace, monospace',
|
||||||
|
margin: 0,
|
||||||
|
padding: '0.5rem 0.75rem',
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: 'var(--tblr-code-bg, #0f172a)', // как тёмный code-блок Tabler
|
||||||
|
border: '1px solid rgba(15, 23, 42, 0.9)',
|
||||||
|
};
|
||||||
|
const diffLineStyle = {
|
||||||
|
display: 'block',
|
||||||
|
minHeight: '1.25em',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
padding: '0 4px',
|
||||||
|
margin: 0,
|
||||||
|
color: 'var(--tblr-code-color, #e5e7eb)',
|
||||||
|
};
|
||||||
|
const diffRemovedBg = {
|
||||||
|
background: 'rgba(248, 81, 73, 0.2)',
|
||||||
|
borderLeft: '3px solid rgba(248, 81, 73, 0.9)',
|
||||||
|
};
|
||||||
|
const diffAddedBg = {
|
||||||
|
background: 'rgba(63, 185, 80, 0.2)',
|
||||||
|
borderLeft: '3px solid rgba(63, 185, 80, 0.9)',
|
||||||
|
};
|
||||||
|
|
||||||
|
function DiffPanel({ lines, side, innerRef, onScroll }) {
|
||||||
|
return (
|
||||||
|
<pre style={diffPanelStyle} ref={innerRef} onScroll={onScroll}>
|
||||||
|
{lines.length === 0 ? (
|
||||||
|
<span style={diffLineStyle}># пусто</span>
|
||||||
|
) : (
|
||||||
|
lines.map((item, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
...diffLineStyle,
|
||||||
|
...(item.type === 'removed' && side === 'left' ? diffRemovedBg : null),
|
||||||
|
...(item.type === 'added' && side === 'right' ? diffAddedBg : null),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.type === 'empty' ? '\u00A0' : item.text || ''}
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</pre>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateTime(value) {
|
||||||
|
if (!value) return '';
|
||||||
|
try {
|
||||||
|
const d = new Date(value);
|
||||||
|
return d.toLocaleString();
|
||||||
|
} catch {
|
||||||
|
return String(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bytesToHuman(size) {
|
||||||
|
if (size == null) return '';
|
||||||
|
const n = Number(size);
|
||||||
|
if (!Number.isFinite(n) || n < 0) return '';
|
||||||
|
if (n < 1024) return `${n} B`;
|
||||||
|
const units = ['KB', 'MB', 'GB', 'TB'];
|
||||||
|
let v = n;
|
||||||
|
let i = 0;
|
||||||
|
while (v >= 1024 && i < units.length - 1) {
|
||||||
|
v /= 1024;
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
return `${v.toFixed(1)} ${units[i]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MikrotikBackupsManager() {
|
||||||
|
const notify = useNotify();
|
||||||
|
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [selectedServerId, setSelectedServerId] = useState('');
|
||||||
|
const [uiSettings, setUiSettings] = useState({});
|
||||||
|
const [uiSettingsEtag, setUiSettingsEtag] = useState('');
|
||||||
|
const [backupServerIds, setBackupServerIds] = useState(new Set());
|
||||||
|
const [backups, setBackups] = useState([]);
|
||||||
|
const [loadingServers, setLoadingServers] = useState(false);
|
||||||
|
const [loadingBackups, setLoadingBackups] = useState(false);
|
||||||
|
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||||
|
const [viewConfigKey, setViewConfigKey] = useState(null);
|
||||||
|
const [viewConfigText, setViewConfigText] = useState('');
|
||||||
|
const [viewLoading, setViewLoading] = useState(false);
|
||||||
|
const [viewModalOpen, setViewModalOpen] = useState(false);
|
||||||
|
const [diffResult, setDiffResult] = useState(null);
|
||||||
|
const [diffLoading, setDiffLoading] = useState(false);
|
||||||
|
const [diffModalOpen, setDiffModalOpen] = useState(false);
|
||||||
|
const leftDiffRef = useRef(null);
|
||||||
|
const rightDiffRef = useRef(null);
|
||||||
|
const isSyncingScrollRef = useRef(false);
|
||||||
|
|
||||||
|
// UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
|
||||||
|
const [serverSearch, setServerSearch] = useState('');
|
||||||
|
|
||||||
|
// UI-состояние для таблицы выбора серверов автобэкапов
|
||||||
|
const [backupSearch, setBackupSearch] = useState('');
|
||||||
|
const [backupSortField, setBackupSortField] = useState('ip');
|
||||||
|
const [backupSortOrder, setBackupSortOrder] = useState('asc');
|
||||||
|
const [backupPage, setBackupPage] = useState(1);
|
||||||
|
const backupPageSize = 10;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const signal = controller.signal;
|
||||||
|
fetchServers(signal);
|
||||||
|
fetchUiSettings(signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedServerId) {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchBackups(selectedServerId, controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
} else {
|
||||||
|
setBackups([]);
|
||||||
|
setSelectedKeys([]);
|
||||||
|
}
|
||||||
|
}, [selectedServerId]);
|
||||||
|
|
||||||
|
const jumphostServers = useMemo(
|
||||||
|
() => (servers || []).filter((s) => String(s.type || '').toLowerCase() === 'jumphost'),
|
||||||
|
[servers],
|
||||||
|
);
|
||||||
|
|
||||||
|
const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
|
||||||
|
|
||||||
|
const jumphostInputServers = useMemo(
|
||||||
|
() => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
|
||||||
|
[jumphostServers],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Список серверов для выбора "текущего сервера" бэкапов с поиском (как в /filters)
|
||||||
|
const visibleJumphostServers = useMemo(() => {
|
||||||
|
if (!serverSearch.trim()) return jumphostInputServers;
|
||||||
|
const q = serverSearch.trim().toLowerCase();
|
||||||
|
return jumphostInputServers.filter((s) => {
|
||||||
|
const fields = [
|
||||||
|
s.id,
|
||||||
|
s.ip,
|
||||||
|
s.dns,
|
||||||
|
s.extIp,
|
||||||
|
s.internalIp,
|
||||||
|
s.country,
|
||||||
|
s.provider,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
return fields.includes(q);
|
||||||
|
});
|
||||||
|
}, [jumphostInputServers, serverSearch]);
|
||||||
|
|
||||||
|
const currentServer = useMemo(
|
||||||
|
() => jumphostServers.find((s) => makeServerId(s) === selectedServerId) || null,
|
||||||
|
[jumphostServers, selectedServerId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const backupServerIdsList = useMemo(() => Array.from(backupServerIds), [backupServerIds]);
|
||||||
|
|
||||||
|
// Отфильтрованный и отсортированный список Jumphost-серверов для блока автобэкапов
|
||||||
|
const filteredBackupServers = useMemo(() => {
|
||||||
|
let list = [...jumphostInputServers];
|
||||||
|
|
||||||
|
if (backupSearch.trim()) {
|
||||||
|
const q = backupSearch.trim().toLowerCase();
|
||||||
|
list = list.filter((s) => {
|
||||||
|
const fields = [
|
||||||
|
s.id,
|
||||||
|
s.ip,
|
||||||
|
s.dns,
|
||||||
|
s.extIp,
|
||||||
|
s.internalIp,
|
||||||
|
s.country,
|
||||||
|
s.provider,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
return fields.includes(q);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
list.sort((a, b) => {
|
||||||
|
const field = backupSortField || 'ip';
|
||||||
|
let av = a[field] ?? '';
|
||||||
|
let bv = b[field] ?? '';
|
||||||
|
if (typeof av === 'string') av = av.toLowerCase();
|
||||||
|
if (typeof bv === 'string') bv = bv.toLowerCase();
|
||||||
|
if (av < bv) return backupSortOrder === 'asc' ? -1 : 1;
|
||||||
|
if (av > bv) return backupSortOrder === 'asc' ? 1 : -1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
return list;
|
||||||
|
}, [jumphostInputServers, backupSearch, backupSortField, backupSortOrder]);
|
||||||
|
|
||||||
|
const backupTotalPages = useMemo(
|
||||||
|
() => Math.max(1, Math.ceil(filteredBackupServers.length / backupPageSize)),
|
||||||
|
[filteredBackupServers.length],
|
||||||
|
);
|
||||||
|
|
||||||
|
const paginatedBackupServers = useMemo(() => {
|
||||||
|
const page = Math.min(Math.max(1, backupPage), backupTotalPages);
|
||||||
|
const start = (page - 1) * backupPageSize;
|
||||||
|
return filteredBackupServers.slice(start, start + backupPageSize);
|
||||||
|
}, [filteredBackupServers, backupPage, backupTotalPages]);
|
||||||
|
|
||||||
|
const diffComputed = useMemo(() => {
|
||||||
|
if (diffResult?.configA == null || diffResult?.configB == null) {
|
||||||
|
return {
|
||||||
|
left: [],
|
||||||
|
right: [],
|
||||||
|
stats: { removed: 0, added: 0, total: 0 },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const { left, right } = getDiffLines(diffResult.configA, diffResult.configB);
|
||||||
|
const removed = left.filter((l) => l.type === 'removed').length;
|
||||||
|
const added = right.filter((l) => l.type === 'added').length;
|
||||||
|
return {
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
stats: { removed, added, total: removed + added },
|
||||||
|
};
|
||||||
|
}, [diffResult?.configA, diffResult?.configB]);
|
||||||
|
|
||||||
|
const syncScroll = (source) => {
|
||||||
|
const leftEl = leftDiffRef.current;
|
||||||
|
const rightEl = rightDiffRef.current;
|
||||||
|
if (!leftEl || !rightEl) return;
|
||||||
|
const current = source === 'left' ? leftEl : rightEl;
|
||||||
|
const other = source === 'left' ? rightEl : leftEl;
|
||||||
|
|
||||||
|
if (isSyncingScrollRef.current) return;
|
||||||
|
isSyncingScrollRef.current = true;
|
||||||
|
|
||||||
|
const maxCurrent = current.scrollHeight - current.clientHeight;
|
||||||
|
const ratio = maxCurrent > 0 ? current.scrollTop / maxCurrent : 0;
|
||||||
|
const maxOther = other.scrollHeight - other.clientHeight;
|
||||||
|
other.scrollTop = ratio * (maxOther > 0 ? maxOther : 0);
|
||||||
|
|
||||||
|
isSyncingScrollRef.current = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackupSort = (field) => {
|
||||||
|
setBackupSortField((prevField) => {
|
||||||
|
if (prevField === field) {
|
||||||
|
setBackupSortOrder((prevOrder) => (prevOrder === 'asc' ? 'desc' : 'asc'));
|
||||||
|
return prevField;
|
||||||
|
}
|
||||||
|
setBackupSortOrder('asc');
|
||||||
|
return field;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackupSelectAll = () => {
|
||||||
|
const allIds = filteredBackupServers.map((s) => String(s.id));
|
||||||
|
setBackupServerIds(new Set(allIds));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackupDeselectAll = () => {
|
||||||
|
setBackupServerIds(new Set());
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchServers = async (abortSignal) => {
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
setLoadingServers(true);
|
||||||
|
const res = await api.get('/servers', opts);
|
||||||
|
const list = Array.isArray(res.data) ? res.data : [];
|
||||||
|
setServers(list);
|
||||||
|
const firstJumphost = list.find((s) => String(s.type || '').toLowerCase() === 'jumphost');
|
||||||
|
if (firstJumphost && !selectedServerId) {
|
||||||
|
setSelectedServerId(makeServerId(firstJumphost));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('Error fetching servers for backups:', err);
|
||||||
|
notify.error('Не удалось загрузить список серверов для бэкапов');
|
||||||
|
} finally {
|
||||||
|
setLoadingServers(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchUiSettings = async (abortSignal) => {
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const res = await api.get('/ui-settings', opts);
|
||||||
|
const data = res?.data || {};
|
||||||
|
setUiSettings(data);
|
||||||
|
const list = Array.isArray(data.mikrotikBackupServers) ? data.mikrotikBackupServers : [];
|
||||||
|
setBackupServerIds(new Set(list.map((v) => String(v))));
|
||||||
|
const e = res?.headers?.etag || res?.headers?.ETag || '';
|
||||||
|
setUiSettingsEtag(e ? String(e) : '');
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('Error fetching UI settings for backups:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchBackups = async (serverId, abortSignal) => {
|
||||||
|
if (!serverId) return;
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
setLoadingBackups(true);
|
||||||
|
setSelectedKeys([]);
|
||||||
|
setDiffResult(null);
|
||||||
|
const res = await api.get('/mikrotik/backups', { params: { serverId }, ...opts });
|
||||||
|
const items = res.data?.items || [];
|
||||||
|
setBackups(items);
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('Error fetching backups:', err);
|
||||||
|
notify.error('Не удалось загрузить список бэкапов MikroTik');
|
||||||
|
} finally {
|
||||||
|
setLoadingBackups(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectKey = (key) => {
|
||||||
|
setSelectedKeys((prev) => {
|
||||||
|
if (prev.includes(key)) {
|
||||||
|
return prev.filter((k) => k !== key);
|
||||||
|
}
|
||||||
|
if (prev.length >= 2) {
|
||||||
|
return [prev[1], key];
|
||||||
|
}
|
||||||
|
return [...prev, key];
|
||||||
|
});
|
||||||
|
setDiffResult(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewConfig = async (key) => {
|
||||||
|
if (!key) return;
|
||||||
|
try {
|
||||||
|
setViewLoading(true);
|
||||||
|
setViewConfigKey(key);
|
||||||
|
setViewConfigText('');
|
||||||
|
setViewModalOpen(true);
|
||||||
|
const res = await api.get('/mikrotik/backups/item', { params: { key } });
|
||||||
|
setViewConfigText(res.data?.config || '');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error reading backup:', err);
|
||||||
|
notify.error('Не удалось загрузить содержимое бэкапа');
|
||||||
|
} finally {
|
||||||
|
setViewLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDiff = async () => {
|
||||||
|
if (selectedKeys.length !== 2) {
|
||||||
|
notify.warning('Выберите два бэкапа для сравнения');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
setDiffModalOpen(true);
|
||||||
|
setDiffLoading(true);
|
||||||
|
setDiffResult(null);
|
||||||
|
const res = await api.post('/mikrotik/backups/diff', {
|
||||||
|
keyA: selectedKeys[0],
|
||||||
|
keyB: selectedKeys[1],
|
||||||
|
});
|
||||||
|
setDiffResult(res.data || null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error diffing backups:', err);
|
||||||
|
notify.error('Не удалось сравнить бэкапы');
|
||||||
|
} finally {
|
||||||
|
setDiffLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = async (key) => {
|
||||||
|
try {
|
||||||
|
const res = await api.get('/mikrotik/backups/item', { params: { key } });
|
||||||
|
const text = res.data?.config || '';
|
||||||
|
const blob = new Blob([text], { type: 'text/plain' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
const shortKey = key.split('/').slice(-1)[0] || 'backup';
|
||||||
|
a.download = shortKey.endsWith('.rsc') ? shortKey : `${shortKey}.rsc`;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error downloading backup:', err);
|
||||||
|
notify.error('Не удалось скачать бэкап');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopyToClipboard = async (text) => {
|
||||||
|
try {
|
||||||
|
if (!text) return;
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
} else {
|
||||||
|
const ta = document.createElement('textarea');
|
||||||
|
ta.value = text;
|
||||||
|
document.body.appendChild(ta);
|
||||||
|
ta.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(ta);
|
||||||
|
}
|
||||||
|
notify.success('Текст бэкапа скопирован в буфер обмена');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error copying backup:', err);
|
||||||
|
notify.error('Не удалось скопировать текст бэкапа');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleBackupServer = (serverId) => {
|
||||||
|
setBackupServerIds((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(serverId)) next.delete(serverId);
|
||||||
|
else next.add(serverId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveBackupServers = async () => {
|
||||||
|
try {
|
||||||
|
const settingsPayload = {
|
||||||
|
...uiSettings,
|
||||||
|
mikrotikBackupServers: backupServerIdsList,
|
||||||
|
};
|
||||||
|
const payload = {
|
||||||
|
settings: settingsPayload,
|
||||||
|
etag: uiSettingsEtag,
|
||||||
|
};
|
||||||
|
const res = await api.post('/ui-settings', payload);
|
||||||
|
const meta = res?.data || {};
|
||||||
|
setUiSettings(settingsPayload);
|
||||||
|
setUiSettingsEtag(String(meta?.etag || ''));
|
||||||
|
notify.success('Список серверов для автобэкапа сохранён');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error saving backup servers to ui-settings:', err);
|
||||||
|
notify.error(err?.response?.data?.message || 'Не удалось сохранить список серверов для автобэкапа');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const actions = (
|
||||||
|
<div className="d-flex flex-wrap gap-2 align-items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary btn-sm d-inline-flex align-items-center"
|
||||||
|
onClick={() => selectedServerId && fetchBackups(selectedServerId)}
|
||||||
|
disabled={!selectedServerId || loadingBackups}
|
||||||
|
>
|
||||||
|
<IconRefresh size={16} className="me-1" />
|
||||||
|
Обновить список
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary btn-sm d-inline-flex align-items-center"
|
||||||
|
onClick={async () => {
|
||||||
|
if (!selectedServerId) return;
|
||||||
|
try {
|
||||||
|
const serverId = selectedServerId;
|
||||||
|
notify.info('Запуск ручного бэкапа MikroTik...');
|
||||||
|
const res = await api.post('/mikrotik/backups/run', { serverId });
|
||||||
|
if (res?.data?.ok) {
|
||||||
|
notify.success('Ручной бэкап успешно создан');
|
||||||
|
await fetchBackups(serverId);
|
||||||
|
} else {
|
||||||
|
notify.error(res?.data?.message || 'Не удалось выполнить ручной бэкап');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error running manual backup:', err);
|
||||||
|
const msg =
|
||||||
|
err?.response?.data?.message ||
|
||||||
|
err?.response?.data ||
|
||||||
|
'Ошибка при выполнении ручного бэкапа';
|
||||||
|
notify.error(msg);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!selectedServerId || loadingBackups}
|
||||||
|
>
|
||||||
|
Создать бэкап сейчас
|
||||||
|
</button>
|
||||||
|
<Tooltip content="Выберите два бэкапа в таблице" position="top">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm d-inline-flex align-items-center"
|
||||||
|
onClick={handleDiff}
|
||||||
|
disabled={selectedKeys.length !== 2 || diffLoading}
|
||||||
|
>
|
||||||
|
<IconArrowsLeftRight size={16} className="me-1" />
|
||||||
|
Сравнить выбранные
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
<div className="text-muted small ms-2">
|
||||||
|
Автобэкапы включаются для выбранных ниже Jumphost-серверов. Интервал и включение/выключение
|
||||||
|
планировщика настраиваются через переменные окружения
|
||||||
|
<code className="ms-1">MIKROTIK_BACKUP_ENABLED</code> и
|
||||||
|
<code className="ms-1">MIKROTIK_BACKUP_INTERVAL_MINUTES</code>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentServerLabel =
|
||||||
|
currentServer?.dns || currentServer?.ip || makeServerId(currentServer || {}) || 'Не выбран';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
<PageHeader
|
||||||
|
title="MikroTik Backups"
|
||||||
|
icon={<IconDownload size={24} />}
|
||||||
|
meta={`Текущий сервер: ${currentServerLabel}`}
|
||||||
|
actions={actions}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Выбор сервера для просмотра бэкапов (как в /filters) */}
|
||||||
|
<div className="card mb-3">
|
||||||
|
<div className="card-header">
|
||||||
|
<div className="row align-items-center g-2">
|
||||||
|
<div className="col">
|
||||||
|
<h3 className="card-title mb-1">Сервер для просмотра бэкапов</h3>
|
||||||
|
<div className="text-muted small">
|
||||||
|
Доступно Jumphost-серверов: {jumphostServers.length}.{' '}
|
||||||
|
{selectedServerId
|
||||||
|
? 'Кликните по другой карточке, чтобы сменить сервер.'
|
||||||
|
: 'Выберите сервер, чтобы увидеть его бэкапы.'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-auto">
|
||||||
|
<div className="input-icon" style={{ minWidth: 240 }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Поиск серверов по IP, DNS, провайдеру..."
|
||||||
|
value={serverSearch}
|
||||||
|
onChange={(e) => setServerSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconSearch size={16} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{jumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы», чтобы смотреть
|
||||||
|
бэкапы.
|
||||||
|
</div>
|
||||||
|
) : visibleJumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="row row-cards g-2">
|
||||||
|
{visibleJumphostServers.map((s) => {
|
||||||
|
const id = s.id;
|
||||||
|
const isActive = id === selectedServerId;
|
||||||
|
const flag = s.country ? countryToFlag(s.country) : '';
|
||||||
|
const line = [s.dns, s.ip].filter(Boolean).join(' · ');
|
||||||
|
return (
|
||||||
|
<div className="col-12 col-sm-6 col-md-4 col-lg-3" key={id}>
|
||||||
|
<div
|
||||||
|
className={`card card-sm h-100 cursor-pointer ${
|
||||||
|
isActive ? 'border-primary card-hover' : 'card-hover'
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedServerId(id)}
|
||||||
|
>
|
||||||
|
<div className="card-body d-flex align-items-start gap-2">
|
||||||
|
<span className="avatar bg-primary-lt" title={s.country || ''}>
|
||||||
|
{flag || s.ip?.slice(0, 2) || '?'}
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<div className="fw-bold text-truncate" title={s.dns || s.ip || id}>
|
||||||
|
{s.dns || s.ip || id}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{line && (
|
||||||
|
<div className="text-muted small text-truncate" title={line}>
|
||||||
|
{line}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-muted small mt-1">
|
||||||
|
{[s.country, s.provider].filter(Boolean).join(' · ') || '—'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-muted small mt-2">
|
||||||
|
Текущий сервер:
|
||||||
|
<span className="fw-semibold">{currentServerLabel}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Таблица бэкапов для выбранного сервера */}
|
||||||
|
{loadingServers ? (
|
||||||
|
<TableSkeleton rows={5} columns={4} />
|
||||||
|
) : !selectedServerId ? (
|
||||||
|
<EmptyState
|
||||||
|
title="Нет доступных Jumphost-серверов"
|
||||||
|
description='Создайте хотя бы один сервер типа "jumphost" в разделе Серверы, чтобы включить бэкапы.'
|
||||||
|
/>
|
||||||
|
) : loadingBackups ? (
|
||||||
|
<TableSkeleton rows={5} columns={4} />
|
||||||
|
) : backups.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
title="Для этого сервера бэкапов ещё нет"
|
||||||
|
description="Автоматические бэкапы создаются планировщиком на backend. Можно также отправить бэкап вручную через API."
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header d-flex align-items-center justify-content-between">
|
||||||
|
<div>
|
||||||
|
<div className="card-title mb-0">Бэкапы для {currentServerLabel}</div>
|
||||||
|
<div className="text-muted small">
|
||||||
|
Всего: {backups.length}. Выбрано для diff: {selectedKeys.length}/2.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small d-flex align-items-center">
|
||||||
|
<IconAlertTriangle size={16} className="me-1 text-warning" />
|
||||||
|
Восстановление выполняется вручную через Winbox/SSH, используя экспортированный .rsc
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-vcenter table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: 40 }}></th>
|
||||||
|
<th>Создан</th>
|
||||||
|
<th>Размер</th>
|
||||||
|
<th>Ключ S3</th>
|
||||||
|
<th style={{ width: 220 }}>Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{backups.map((b) => {
|
||||||
|
const active = selectedKeys.includes(b.key);
|
||||||
|
const shortKey = b.key.split('/').slice(-1)[0] || b.key;
|
||||||
|
return (
|
||||||
|
<tr key={b.key} className={active ? 'table-active' : ''}>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
checked={active}
|
||||||
|
onChange={() => handleSelectKey(b.key)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{formatDateTime(b.createdAt)}</td>
|
||||||
|
<td>{bytesToHuman(b.size)}</td>
|
||||||
|
<td className="text-truncate" style={{ maxWidth: 260 }} title={b.key}>
|
||||||
|
{shortKey}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={() => handleViewConfig(b.key)}
|
||||||
|
>
|
||||||
|
<IconEye size={16} className="me-1" />
|
||||||
|
Просмотр
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={() => handleDownload(b.key)}
|
||||||
|
>
|
||||||
|
<IconDownload size={16} className="me-1" />
|
||||||
|
Скачать
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Блок выбора серверов для автобэкапа – ниже как "настройки" */}
|
||||||
|
<div className="card mb-4 mt-4">
|
||||||
|
<div className="card-header">
|
||||||
|
<div className="d-flex flex-wrap justify-content-between align-items-center gap-2">
|
||||||
|
<div>
|
||||||
|
<div className="card-title mb-0">Настройки автоматических бэкапов</div>
|
||||||
|
<div className="text-muted small">
|
||||||
|
Отмеченные здесь Jumphost-серверы будут периодически бэкапиться планировщиком на backend.
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small mt-1">
|
||||||
|
Выбрано для автобэкапов:{' '}
|
||||||
|
<span className="fw-semibold">
|
||||||
|
{backupServerIds.size} из {jumphostServers.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="icon"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
strokeWidth="2"
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
|
<path d="M10 4a6 6 0 1 0 4 10" />
|
||||||
|
<path d="M21 21l-6 -6" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Поиск по IP, DNS, провайдеру..."
|
||||||
|
value={backupSearch}
|
||||||
|
onChange={(e) => {
|
||||||
|
setBackupSearch(e.target.value);
|
||||||
|
setBackupPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary btn-sm d-inline-flex align-items-center"
|
||||||
|
onClick={saveBackupServers}
|
||||||
|
disabled={jumphostServers.length === 0}
|
||||||
|
>
|
||||||
|
Сохранить список
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{jumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы».
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<DataTable
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'ip',
|
||||||
|
title: 'Сервер',
|
||||||
|
sortable: true,
|
||||||
|
render: (_value, item) => (
|
||||||
|
<div>
|
||||||
|
<div className="fw-medium">{item.dns || item.ip || item.id}</div>
|
||||||
|
<div className="small text-muted">
|
||||||
|
{item.ip}
|
||||||
|
{item.dns && item.ip ? ' · ' : ''}
|
||||||
|
{item.dns}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'country',
|
||||||
|
title: 'Страна',
|
||||||
|
sortable: true,
|
||||||
|
render: (value) => <span className="small">{value || '-'}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'provider',
|
||||||
|
title: 'Провайдер',
|
||||||
|
sortable: true,
|
||||||
|
render: (value) => <span className="small">{value || '-'}</span>,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
items={paginatedBackupServers}
|
||||||
|
itemKey="id"
|
||||||
|
loading={loadingServers}
|
||||||
|
sortField={backupSortField}
|
||||||
|
sortOrder={backupSortOrder}
|
||||||
|
onSort={handleBackupSort}
|
||||||
|
selectedItems={backupServerIds}
|
||||||
|
onSelectItem={(id) => id && toggleBackupServer(String(id))}
|
||||||
|
onSelectAll={handleBackupSelectAll}
|
||||||
|
onDeselectAll={handleBackupDeselectAll}
|
||||||
|
pagination={{
|
||||||
|
currentPage: backupPage,
|
||||||
|
totalPages: backupTotalPages,
|
||||||
|
totalItems: filteredBackupServers.length,
|
||||||
|
pageSize: backupPageSize,
|
||||||
|
onPageChange: setBackupPage,
|
||||||
|
}}
|
||||||
|
emptyState={{
|
||||||
|
title: 'Серверы не найдены',
|
||||||
|
description:
|
||||||
|
backupSearch.trim().length > 0
|
||||||
|
? 'По вашему запросу нет Jumphost-серверов. Измените фильтры поиска.'
|
||||||
|
: 'Нет доступных Jumphost-серверов для автобэкапа.',
|
||||||
|
}}
|
||||||
|
skeletonRows={5}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LargeModal
|
||||||
|
show={viewModalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setViewModalOpen(false);
|
||||||
|
}}
|
||||||
|
title="Содержимое бэкапа MikroTik"
|
||||||
|
footer={(
|
||||||
|
<div className="d-flex justify-content-between w-100">
|
||||||
|
<div className="text-muted small text-truncate" title={viewConfigKey || ''}>
|
||||||
|
{viewConfigKey || 'Бэкап не выбран'}
|
||||||
|
</div>
|
||||||
|
<div className="btn-list mb-0">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={() => handleCopyToClipboard(viewConfigText)}
|
||||||
|
disabled={!viewConfigText}
|
||||||
|
>
|
||||||
|
<IconCopy size={16} className="me-1" />
|
||||||
|
Копировать
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary btn-sm"
|
||||||
|
onClick={() => setViewModalOpen(false)}
|
||||||
|
>
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{viewLoading ? (
|
||||||
|
<TableSkeleton rows={6} columns={1} />
|
||||||
|
) : (
|
||||||
|
<pre
|
||||||
|
className="bg-dark text-white p-3 rounded"
|
||||||
|
style={{ maxHeight: 500, overflow: 'auto', fontSize: 12 }}
|
||||||
|
>
|
||||||
|
<code>{viewConfigText || '# Нет данных для отображения'}</code>
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</LargeModal>
|
||||||
|
|
||||||
|
<FullscreenModal
|
||||||
|
show={diffModalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setDiffModalOpen(false);
|
||||||
|
}}
|
||||||
|
title="Сравнение бэкапов MikroTik"
|
||||||
|
footer={(
|
||||||
|
<div className="d-flex justify-content-between w-100">
|
||||||
|
<div className="text-muted small">
|
||||||
|
{diffResult?.same
|
||||||
|
? 'Конфигурации идентичны'
|
||||||
|
: 'Конфигурации отличаются — проверьте различия перед откатом.'}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary"
|
||||||
|
onClick={() => setDiffModalOpen(false)}
|
||||||
|
>
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{diffLoading ? (
|
||||||
|
<TableSkeleton rows={8} columns={2} />
|
||||||
|
) : !diffResult ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Не удалось загрузить результат сравнения. Попробуйте ещё раз.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="alert alert-info mb-3 small d-flex justify-content-between align-items-center">
|
||||||
|
<span>
|
||||||
|
{!diffResult.same ? (
|
||||||
|
<>
|
||||||
|
<IconAlertTriangle size={16} className="me-1 text-warning" />
|
||||||
|
Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Конфигурации идентичны — изменений нет.'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Всего изменений:{' '}
|
||||||
|
<span className="fw-semibold">{diffComputed.stats.total}</span>
|
||||||
|
<span className="text-success ms-2">+{diffComputed.stats.added}</span>
|
||||||
|
<span className="text-danger ms-2">−{diffComputed.stats.removed}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6 mb-3 mb-md-0">
|
||||||
|
<div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
|
||||||
|
A: {diffResult.a?.key}
|
||||||
|
</div>
|
||||||
|
<DiffPanel
|
||||||
|
lines={diffComputed.left}
|
||||||
|
side="left"
|
||||||
|
innerRef={leftDiffRef}
|
||||||
|
onScroll={() => syncScroll('left')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="mb-2 small text-muted text-truncate" title={diffResult.b?.key}>
|
||||||
|
B: {diffResult.b?.key}
|
||||||
|
</div>
|
||||||
|
<DiffPanel
|
||||||
|
lines={diffComputed.right}
|
||||||
|
side="right"
|
||||||
|
innerRef={rightDiffRef}
|
||||||
|
onScroll={() => syncScroll('right')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{!diffResult.same && (
|
||||||
|
<div className="mt-3 text-muted small">
|
||||||
|
<span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
|
||||||
|
{' · '}
|
||||||
|
<span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FullscreenModal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MikrotikBackupsManager;
|
||||||
|
|
||||||
@@ -0,0 +1,930 @@
|
|||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import { useNotify } from './components/NotifyProvider.jsx';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||||
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
|
import { countryToFlag } from './utils/serverUtils.js';
|
||||||
|
import {
|
||||||
|
IconRoute,
|
||||||
|
IconWorld,
|
||||||
|
IconAlertTriangle,
|
||||||
|
IconRefresh,
|
||||||
|
IconSearch,
|
||||||
|
IconBrandGoogle,
|
||||||
|
IconBrandYandex,
|
||||||
|
IconBrandCloudflare,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/** Популярные цели для ping/traceroute — карточки с логотипами */
|
||||||
|
const POPULAR_TARGETS = [
|
||||||
|
{ id: 'yandex', name: 'Yandex', target: 'yandex.ru', Icon: IconBrandYandex, color: 'red' },
|
||||||
|
{ id: 'google', name: 'Google', target: '8.8.8.8', Icon: IconBrandGoogle, color: 'blue' },
|
||||||
|
{ id: 'cloudflare', name: 'Cloudflare DNS', target: '1.1.1.1', Icon: IconBrandCloudflare, color: 'orange' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Раздел "Инструменты → MikroTik": проверка маршрута (traceroute)
|
||||||
|
* с выбором сервера, gateway и домена/IP.
|
||||||
|
*/
|
||||||
|
function MikrotikTools() {
|
||||||
|
const notify = useNotify();
|
||||||
|
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [networkConfig, setNetworkConfig] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const [serverId, setServerId] = useState('');
|
||||||
|
const [gatewayRef, setGatewayRef] = useState('');
|
||||||
|
const [gatewayMeta, setGatewayMeta] = useState(null);
|
||||||
|
const [target, setTarget] = useState('');
|
||||||
|
const [maxHops, setMaxHops] = useState(30);
|
||||||
|
|
||||||
|
const [mode, setMode] = useState('traceroute'); // 'traceroute' | 'ping'
|
||||||
|
|
||||||
|
const [running, setRunning] = useState(false);
|
||||||
|
const [hops, setHops] = useState([]);
|
||||||
|
const [analysis, setAnalysis] = useState([]);
|
||||||
|
const [tracerouteTab, setTracerouteTab] = useState('table'); // 'table' | 'analysis'
|
||||||
|
const [pingResult, setPingResult] = useState(null);
|
||||||
|
const [useDns, setUseDns] = useState(true);
|
||||||
|
|
||||||
|
const [serverSearch, setServerSearch] = useState('');
|
||||||
|
|
||||||
|
// Загрузка серверов и сетевого конфига
|
||||||
|
useEffect(() => {
|
||||||
|
const load = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [serversRes, netRes] = await Promise.all([
|
||||||
|
api.get('/servers'),
|
||||||
|
api.get('/network-config'),
|
||||||
|
]);
|
||||||
|
setServers(Array.isArray(serversRes.data) ? serversRes.data : []);
|
||||||
|
setNetworkConfig(netRes.data && typeof netRes.data === 'object' ? netRes.data : { gateways: [], tunnelInterfaces: [] });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[MikrotikTools] failed to load initial data', error);
|
||||||
|
notify.error('Не удалось загрузить данные для инструментов MikroTik');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
}, [notify]);
|
||||||
|
|
||||||
|
const gateways = useMemo(
|
||||||
|
() => (networkConfig?.gateways && Array.isArray(networkConfig.gateways) ? networkConfig.gateways : []),
|
||||||
|
[networkConfig]
|
||||||
|
);
|
||||||
|
|
||||||
|
const interfaces = useMemo(
|
||||||
|
() => (networkConfig?.tunnelInterfaces && Array.isArray(networkConfig.tunnelInterfaces) ? networkConfig.tunnelInterfaces : []),
|
||||||
|
[networkConfig]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSelectGatewayMeta = (meta) => {
|
||||||
|
setGatewayMeta(meta);
|
||||||
|
// Если цель не задана — подставляем IP gateway как target
|
||||||
|
if (!target && meta && meta.ip) {
|
||||||
|
setTarget(meta.ip);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRunCheck = async () => {
|
||||||
|
setRunning(true);
|
||||||
|
setHops([]);
|
||||||
|
setAnalysis([]);
|
||||||
|
setPingResult(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (mode === 'traceroute') {
|
||||||
|
if (!serverId) {
|
||||||
|
notify.error('Выберите сервер (jumphost)');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const trimmedTarget = String(target || '').trim();
|
||||||
|
if (!trimmedTarget) {
|
||||||
|
notify.error('Укажите домен или IP назначения');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const body = {
|
||||||
|
serverId,
|
||||||
|
target: trimmedTarget,
|
||||||
|
useDns,
|
||||||
|
};
|
||||||
|
if (gatewayMeta?.ip) {
|
||||||
|
body.gatewayIp = gatewayMeta.ip;
|
||||||
|
}
|
||||||
|
const hopsNum = Number(maxHops);
|
||||||
|
if (Number.isFinite(hopsNum) && hopsNum > 0) {
|
||||||
|
body.maxHops = hopsNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.post('/mikrotik/traceroute', body);
|
||||||
|
const data = res?.data || {};
|
||||||
|
if (!data.ok) {
|
||||||
|
notify.error(data.error || 'Трассировка завершилась с ошибкой');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hopsList = Array.isArray(data.hops) ? data.hops : [];
|
||||||
|
setHops(hopsList);
|
||||||
|
setAnalysis(buildTracerouteAnalysis(hopsList, networkConfig, servers, body.target));
|
||||||
|
} else if (mode === 'ping') {
|
||||||
|
if (!serverId) {
|
||||||
|
notify.error('Выберите сервер (jumphost)');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const trimmedTarget = String(target || '').trim();
|
||||||
|
if (!trimmedTarget) {
|
||||||
|
notify.error('Укажите домен или IP назначения');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const body = {
|
||||||
|
serverId,
|
||||||
|
target: trimmedTarget,
|
||||||
|
count: 4,
|
||||||
|
};
|
||||||
|
if (gatewayMeta?.ip) {
|
||||||
|
body.gatewayIp = gatewayMeta.ip;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.post('/mikrotik/ping', body);
|
||||||
|
const data = res?.data || {};
|
||||||
|
if (data.ok === false) {
|
||||||
|
notify.error(data.error || 'Ping завершился с ошибкой');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setPingResult({
|
||||||
|
target: trimmedTarget,
|
||||||
|
...data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[MikrotikTools] check failed', error);
|
||||||
|
notify.error(error?.message || 'Ошибка при выполнении проверки');
|
||||||
|
} finally {
|
||||||
|
setRunning(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setGatewayRef('');
|
||||||
|
setGatewayMeta(null);
|
||||||
|
setTarget('');
|
||||||
|
setHops([]);
|
||||||
|
setAnalysis([]);
|
||||||
|
setPingResult(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const jumphostServers = useMemo(
|
||||||
|
() => (servers || []).filter((s) => String(s.type || '').toLowerCase() === 'jumphost'),
|
||||||
|
[servers]
|
||||||
|
);
|
||||||
|
|
||||||
|
const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
|
||||||
|
|
||||||
|
const jumphostInputServers = useMemo(
|
||||||
|
() => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
|
||||||
|
[jumphostServers]
|
||||||
|
);
|
||||||
|
|
||||||
|
const visibleJumphostServers = useMemo(() => {
|
||||||
|
if (!serverSearch.trim()) return jumphostInputServers;
|
||||||
|
const q = serverSearch.trim().toLowerCase();
|
||||||
|
return jumphostInputServers.filter((s) => {
|
||||||
|
const fields = [
|
||||||
|
s.id,
|
||||||
|
s.ip,
|
||||||
|
s.dns,
|
||||||
|
s.extIp,
|
||||||
|
s.internalIp,
|
||||||
|
s.country,
|
||||||
|
s.provider,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
return fields.includes(q);
|
||||||
|
});
|
||||||
|
}, [jumphostInputServers, serverSearch]);
|
||||||
|
|
||||||
|
const currentServer = useMemo(
|
||||||
|
() => jumphostServers.find((s) => makeServerId(s) === serverId) || null,
|
||||||
|
[jumphostServers, serverId]
|
||||||
|
);
|
||||||
|
|
||||||
|
const interfacesForServer = useMemo(() => {
|
||||||
|
if (!serverId || !interfaces.length) return [];
|
||||||
|
const ids = new Set(
|
||||||
|
[serverId, currentServer?.id, currentServer?.ip, currentServer?.dns]
|
||||||
|
.filter(Boolean)
|
||||||
|
.map(String)
|
||||||
|
);
|
||||||
|
return interfaces.filter(
|
||||||
|
(i) =>
|
||||||
|
i &&
|
||||||
|
i.name &&
|
||||||
|
(ids.has(String(i.serverId)) || ids.has(String(i.serverId2)))
|
||||||
|
);
|
||||||
|
}, [interfaces, serverId, currentServer]);
|
||||||
|
|
||||||
|
const gatewaysForServer = useMemo(() => {
|
||||||
|
if (!serverId || !gateways.length) return [];
|
||||||
|
const ids = currentServer
|
||||||
|
? new Set(
|
||||||
|
[serverId, currentServer.id, currentServer.ip, currentServer.dns].filter(Boolean).map(String)
|
||||||
|
)
|
||||||
|
: new Set([String(serverId)]);
|
||||||
|
return gateways.filter((g) => g && g.ip && ids.has(String(g.serverId)));
|
||||||
|
}, [serverId, currentServer, gateways]);
|
||||||
|
|
||||||
|
const currentServerLabel =
|
||||||
|
currentServer?.dns || currentServer?.ip || makeServerId(currentServer || {}) || 'Не выбран';
|
||||||
|
|
||||||
|
const isInitialLoading = loading && servers.length === 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
<PageHeader
|
||||||
|
title="MikroTik Tools"
|
||||||
|
icon={<IconRoute size={24} />}
|
||||||
|
meta={`Текущий сервер: ${currentServerLabel}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Сервер, шлюз, быстрые цели — один компактный блок */}
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<div className="row align-items-center g-2">
|
||||||
|
<div className="col">
|
||||||
|
<h3 className="card-title mb-0">Сервер и шлюз</h3>
|
||||||
|
<p className="text-muted small mb-0 mt-0">
|
||||||
|
{jumphostServers.length} серверов · {serverId ? 'шлюз опционален' : 'выберите сервер'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-auto">
|
||||||
|
<div className="input-icon input-icon-sm">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Поиск серверов..."
|
||||||
|
value={serverSearch}
|
||||||
|
onChange={(e) => setServerSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconSearch size={14} className="text-muted" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body py-2">
|
||||||
|
{isInitialLoading ? (
|
||||||
|
<TableSkeleton rows={2} columns={2} />
|
||||||
|
) : jumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы», чтобы использовать инструменты MikroTik.
|
||||||
|
</div>
|
||||||
|
) : visibleJumphostServers.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="row row-cards g-1">
|
||||||
|
{visibleJumphostServers.map((s) => {
|
||||||
|
const id = s.id;
|
||||||
|
const isActive = id === serverId;
|
||||||
|
const flag = s.country ? countryToFlag(s.country) : '';
|
||||||
|
const line = [s.dns, s.ip].filter(Boolean).join(' · ');
|
||||||
|
return (
|
||||||
|
<div className="col-12 col-sm-6 col-md-4 col-lg-3" key={id}>
|
||||||
|
<div
|
||||||
|
className={`card card-sm h-100 cursor-pointer ${
|
||||||
|
isActive ? 'border-primary card-hover' : 'card-hover'
|
||||||
|
}`}
|
||||||
|
onClick={() => setServerId(id)}
|
||||||
|
>
|
||||||
|
<div className="card-body py-2 px-2 d-flex align-items-center gap-2">
|
||||||
|
<span className="avatar avatar-sm bg-primary-lt" title={s.country || ''}>
|
||||||
|
{flag || s.ip?.slice(0, 2) || '?'}
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div className="fw-semibold text-truncate small" title={s.dns || s.ip || id}>
|
||||||
|
{s.dns || s.ip || id}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small text-truncate" title={line}>
|
||||||
|
{line || [s.country, s.provider].filter(Boolean).join(' · ') || '—'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2 mt-2">
|
||||||
|
<span className="badge bg-primary-lt text-primary">Сервер: {currentServerLabel}</span>
|
||||||
|
{serverId && (
|
||||||
|
<span className="badge bg-azure-lt text-azure">
|
||||||
|
Шлюз: {gatewayRef || gatewayMeta?.ip || '—'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Шлюз — только при выбранном сервере */}
|
||||||
|
{serverId && (
|
||||||
|
<>
|
||||||
|
<hr className="my-2" />
|
||||||
|
<div className="d-flex align-items-center gap-2 mb-1">
|
||||||
|
<span className="fw-semibold small">Шлюз</span>
|
||||||
|
{gatewaysForServer.length === 0 && (
|
||||||
|
<span className="text-muted small">нет настроенных</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{loading && !networkConfig ? (
|
||||||
|
<div className="text-muted small">Загрузка сетевых настроек…</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{gatewaysForServer.length > 0 && (
|
||||||
|
<div className="row row-cards g-1 mb-2">
|
||||||
|
{gatewaysForServer.map((g) => {
|
||||||
|
const isSelected = gatewayRef === g.ip || gatewayRef === g.id;
|
||||||
|
const flag = g.country ? countryToFlag(g.country) : '';
|
||||||
|
return (
|
||||||
|
<div className="col-12 col-sm-6 col-md-4 col-lg-3" key={g.id || g.ip}>
|
||||||
|
<div
|
||||||
|
className={`card card-sm h-100 cursor-pointer ${
|
||||||
|
isSelected ? 'border-primary card-hover' : 'card-hover'
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
const next = isSelected ? '' : (g.ip || g.id);
|
||||||
|
setGatewayRef(next);
|
||||||
|
if (!next) setGatewayMeta(null);
|
||||||
|
else {
|
||||||
|
setGatewayMeta({ ip: g.ip, gateway: g });
|
||||||
|
if (!target && g.ip) setTarget(g.ip);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body py-2 px-2 d-flex align-items-center gap-2">
|
||||||
|
<span className="avatar avatar-sm bg-primary-lt" title={g.country || ''}>
|
||||||
|
{flag || (g.ip ? g.ip.slice(0, 2) : '?')}
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div className="fw-semibold text-truncate small" title={g.ip || ''}>
|
||||||
|
{g.ip || '—'}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small text-truncate">
|
||||||
|
{g.description || [g.country, g.provider].filter(Boolean).join(' · ') || '—'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Цели — карточки в стиле сервера/gateway */}
|
||||||
|
<div className="row row-cards g-1 mt-2">
|
||||||
|
{POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => {
|
||||||
|
const isSelected = target === tgt;
|
||||||
|
const bgClass = color === 'red' ? 'bg-red-lt' : color === 'blue' ? 'bg-blue-lt' : 'bg-orange-lt';
|
||||||
|
const textClass = color === 'red' ? 'text-red' : color === 'blue' ? 'text-blue' : 'text-orange';
|
||||||
|
return (
|
||||||
|
<div className="col-12 col-sm-6 col-md-4" key={tid}>
|
||||||
|
<div
|
||||||
|
className={`card card-sm h-100 cursor-pointer ${isSelected ? 'border-primary card-hover' : 'card-hover'}`}
|
||||||
|
onClick={() => setTarget(tgt)}
|
||||||
|
title={tgt}
|
||||||
|
>
|
||||||
|
<div className="card-body py-2 px-2 d-flex align-items-center gap-2">
|
||||||
|
<span className={`avatar avatar-sm ${bgClass} ${textClass}`}>
|
||||||
|
<Icon size={20} stroke={1.5} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<div className="fw-semibold text-truncate small">{name}</div>
|
||||||
|
<div className="text-muted small text-truncate">{tgt}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Режим и действия — под выбором цели, стандартный размер Tabler */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2 mt-3 pt-2 border-top">
|
||||||
|
<ul className="nav nav-pills mb-0" role="tablist">
|
||||||
|
<li className="nav-item">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-link ${
|
||||||
|
mode === 'traceroute' ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setMode('traceroute');
|
||||||
|
setHops([]);
|
||||||
|
setAnalysis([]);
|
||||||
|
setPingResult(null);
|
||||||
|
}}
|
||||||
|
role="tab"
|
||||||
|
>
|
||||||
|
Traceroute
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li className="nav-item">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-link ${
|
||||||
|
mode === 'ping' ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setMode('ping');
|
||||||
|
setHops([]);
|
||||||
|
setAnalysis([]);
|
||||||
|
setPingResult(null);
|
||||||
|
}}
|
||||||
|
role="tab"
|
||||||
|
>
|
||||||
|
Ping
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="btn-list">
|
||||||
|
<button type="button" className="btn btn-outline-secondary" onClick={handleReset} disabled={running}>
|
||||||
|
<IconRefresh size={16} className="me-1" />
|
||||||
|
Сбросить
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={handleRunCheck} disabled={running || loading}>
|
||||||
|
{running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Параметры + результаты */}
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-md-4">
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<h3 className="card-title mb-0">Параметры</h3>
|
||||||
|
</div>
|
||||||
|
<div className="card-body py-2">
|
||||||
|
{loading && !networkConfig ? (
|
||||||
|
<div className="text-muted small">Загрузка…</div>
|
||||||
|
) : !serverId ? (
|
||||||
|
<div className="text-muted small">Выберите сервер выше.</div>
|
||||||
|
) : (
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-12">
|
||||||
|
<label className="form-label small mb-0">Домен или IP</label>
|
||||||
|
<div className="input-group input-group-flat input-group-sm">
|
||||||
|
<span className="input-group-text"><IconWorld size={14} className="text-muted" /></span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="example.com или 8.8.8.8"
|
||||||
|
value={target}
|
||||||
|
onChange={(e) => setTarget(e.target.value)}
|
||||||
|
/>
|
||||||
|
{gatewayMeta?.ip && (
|
||||||
|
<button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => setTarget(gatewayMeta.ip)}>
|
||||||
|
IP gateway
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{mode === 'traceroute' && (
|
||||||
|
<div className="col-6 col-md-5">
|
||||||
|
<label className="form-label small mb-0">Макс. хопов</label>
|
||||||
|
<input type="number" className="form-control form-control-sm" min={1} max={64} value={maxHops} onChange={(e) => setMaxHops(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="form-check form-switch form-check-inline">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="useDnsToggle"
|
||||||
|
checked={useDns}
|
||||||
|
onChange={(e) => setUseDns(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label small"
|
||||||
|
htmlFor="useDnsToggle"
|
||||||
|
>
|
||||||
|
{useDns ? 'DNS+IP' : 'Только IP'}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-8">
|
||||||
|
{mode === 'ping' && (
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<h3 className="card-title mb-0">Результаты ping</h3>
|
||||||
|
</div>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{!pingResult ? (
|
||||||
|
<div className="p-3 text-muted small">
|
||||||
|
Результаты ping появятся здесь после запуска проверки.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-vcenter card-table mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Цель</th>
|
||||||
|
<th style={{ width: 130 }}>Среднее, мс</th>
|
||||||
|
<th style={{ width: 140 }}>Мин / Макс, мс</th>
|
||||||
|
<th style={{ width: 110 }}>Потери</th>
|
||||||
|
<th style={{ width: 200 }}>Оценка</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{(() => {
|
||||||
|
const avg = typeof pingResult.avgMs === 'number' ? pingResult.avgMs : null;
|
||||||
|
const loss = typeof pingResult.loss === 'number' ? pingResult.loss : null;
|
||||||
|
|
||||||
|
let severity = 'ok';
|
||||||
|
if (loss != null && loss >= 50) severity = 'danger';
|
||||||
|
else if ((loss != null && loss > 0) || (avg != null && avg > 200)) severity = 'warn';
|
||||||
|
|
||||||
|
const rowClass =
|
||||||
|
severity === 'danger'
|
||||||
|
? 'table-danger'
|
||||||
|
: severity === 'warn'
|
||||||
|
? 'table-warning'
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr className={rowClass}>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<span className="fw-semibold">
|
||||||
|
{pingResult.target || target || '—'}
|
||||||
|
</span>
|
||||||
|
{gatewayMeta?.ip && (
|
||||||
|
<span className="text-muted small">
|
||||||
|
через gateway {gatewayMeta.ip}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{avg != null ? (
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
avg > 200
|
||||||
|
? 'text-danger fw-semibold'
|
||||||
|
: avg > 120
|
||||||
|
? 'text-warning fw-semibold'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{avg.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'—'
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{pingResult.minMs != null ? pingResult.minMs.toFixed(1) : '—'} /{' '}
|
||||||
|
{pingResult.maxMs != null ? pingResult.maxMs.toFixed(1) : '—'}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{loss != null ? (
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
loss >= 50
|
||||||
|
? 'badge bg-red-lt text-red'
|
||||||
|
: loss > 0
|
||||||
|
? 'badge bg-yellow-lt text-yellow'
|
||||||
|
: 'badge bg-green-lt text-green'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{loss}%
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'—'
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{severity === 'danger' && (
|
||||||
|
<span className="badge bg-red-lt text-red me-1">Плохое качество</span>
|
||||||
|
)}
|
||||||
|
{severity === 'warn' && (
|
||||||
|
<span className="badge bg-yellow-lt text-yellow me-1">
|
||||||
|
Возможные проблемы
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-muted small">
|
||||||
|
{loss === 0
|
||||||
|
? 'Все пакеты доставлены'
|
||||||
|
: loss != null
|
||||||
|
? `Потеряно пакетов: ${loss}%`
|
||||||
|
: 'Нет данных о потере пакетов'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{mode === 'traceroute' && (
|
||||||
|
<div className="card mb-2">
|
||||||
|
<div className="card-header py-2">
|
||||||
|
<ul className="nav nav-tabs card-header-tabs" role="tablist">
|
||||||
|
<li className="nav-item" role="presentation">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-link ${tracerouteTab === 'table' ? 'active' : ''}`}
|
||||||
|
onClick={() => setTracerouteTab('table')}
|
||||||
|
role="tab"
|
||||||
|
>
|
||||||
|
Результаты
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li className="nav-item" role="presentation">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-link ${tracerouteTab === 'analysis' ? 'active' : ''}`}
|
||||||
|
onClick={() => setTracerouteTab('analysis')}
|
||||||
|
role="tab"
|
||||||
|
>
|
||||||
|
Расшифровка
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{tracerouteTab === 'table' ? (
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{hops.length === 0 ? (
|
||||||
|
<div className="p-3 text-muted small">
|
||||||
|
Результаты трассировки появятся здесь после запуска проверки.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-vcenter card-table table-hover mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: 70 }}>Хоп</th>
|
||||||
|
<th>Адрес / узел</th>
|
||||||
|
<th style={{ width: 130 }}>Среднее, мс</th>
|
||||||
|
<th style={{ width: 140 }}>Мин / Макс, мс</th>
|
||||||
|
<th style={{ width: 110 }}>Потери</th>
|
||||||
|
<th style={{ width: 200 }}>Статус</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{hops.map((h) => {
|
||||||
|
const ip = h.ip || '';
|
||||||
|
const dns = h.dns || '';
|
||||||
|
|
||||||
|
let mainLabel;
|
||||||
|
if (useDns) {
|
||||||
|
if (dns && ip) mainLabel = `${dns} (${ip})`;
|
||||||
|
else mainLabel = dns || ip || h.host || '—';
|
||||||
|
} else {
|
||||||
|
mainLabel = ip || dns || h.host || '—';
|
||||||
|
}
|
||||||
|
|
||||||
|
const avg = typeof h.avgMs === 'number' ? h.avgMs : null;
|
||||||
|
const loss = typeof h.loss === 'number' ? h.loss : null;
|
||||||
|
const statusRaw = (h.status || '').toString();
|
||||||
|
const statusLower = statusRaw.toLowerCase();
|
||||||
|
const hasTimeout =
|
||||||
|
statusLower.includes('timeout') ||
|
||||||
|
statusLower.includes('no reply') ||
|
||||||
|
statusLower.includes('unreachable');
|
||||||
|
|
||||||
|
let severity = 'ok';
|
||||||
|
if (hasTimeout || (loss != null && loss >= 50)) {
|
||||||
|
severity = 'danger';
|
||||||
|
} else if ((loss != null && loss > 0) || (avg != null && avg > 200)) {
|
||||||
|
severity = 'warn';
|
||||||
|
}
|
||||||
|
|
||||||
|
const rowClass =
|
||||||
|
severity === 'danger'
|
||||||
|
? 'table-danger'
|
||||||
|
: severity === 'warn'
|
||||||
|
? 'table-warning'
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={h.hop || `${ip || h.host}-${Math.random()}`} className={rowClass}>
|
||||||
|
<td>
|
||||||
|
<span className="badge bg-blue-lt text-blue">
|
||||||
|
{h.hop}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<span className="fw-semibold text-truncate" title={mainLabel}>
|
||||||
|
{mainLabel}
|
||||||
|
</span>
|
||||||
|
{ip && dns && (
|
||||||
|
<span className="text-muted small text-truncate" title={ip}>
|
||||||
|
IP: {ip}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{avg != null ? (
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
avg > 200
|
||||||
|
? 'text-danger fw-semibold'
|
||||||
|
: avg > 120
|
||||||
|
? 'text-warning fw-semibold'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{avg.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'—'
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{h.bestMs != null ? h.bestMs.toFixed(1) : '—'} /{' '}
|
||||||
|
{h.worstMs != null ? h.worstMs.toFixed(1) : '—'}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{loss != null ? (
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
loss >= 50
|
||||||
|
? 'badge bg-red-lt text-red'
|
||||||
|
: loss > 0
|
||||||
|
? 'badge bg-yellow-lt text-yellow'
|
||||||
|
: 'badge bg-green-lt text-green'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{loss}%
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'—'
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{severity === 'danger' && (
|
||||||
|
<span className="badge bg-red-lt text-red me-1">Проблемный хоп</span>
|
||||||
|
)}
|
||||||
|
{severity === 'warn' && (
|
||||||
|
<span className="badge bg-yellow-lt text-yellow me-1">Возможная проблема</span>
|
||||||
|
)}
|
||||||
|
<span className="text-muted small">
|
||||||
|
{statusRaw || (loss != null || avg != null ? 'OK' : '—')}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="card-body">
|
||||||
|
{analysis.length === 0 ? (
|
||||||
|
<div className="text-muted small">
|
||||||
|
После выполнения трассировки здесь появится человекочитаемое описание пути и возможных проблем.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="list-unstyled mb-0">
|
||||||
|
{analysis.map((line, idx) => (
|
||||||
|
<li key={idx} className="mb-1">
|
||||||
|
{line}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildTracerouteAnalysis(hops, networkConfig, servers, target) {
|
||||||
|
if (!Array.isArray(hops) || hops.length === 0) return [];
|
||||||
|
const lines = [];
|
||||||
|
const gateways = (networkConfig?.gateways && Array.isArray(networkConfig.gateways)) ? networkConfig.gateways : [];
|
||||||
|
const ifaces = (networkConfig?.tunnelInterfaces && Array.isArray(networkConfig.tunnelInterfaces)) ? networkConfig.tunnelInterfaces : [];
|
||||||
|
|
||||||
|
const findServerLabel = (serverId) => {
|
||||||
|
if (!serverId) return null;
|
||||||
|
const s = (servers || []).find((srv) => srv.id === serverId || srv.ip === serverId || srv.dns === serverId);
|
||||||
|
if (!s) return serverId;
|
||||||
|
return s.dns || s.ip || serverId;
|
||||||
|
};
|
||||||
|
|
||||||
|
const targetStr = String(target || '').trim();
|
||||||
|
lines.push(`Цель трассировки: ${targetStr || 'не указана'}. Хопов в маршруте: ${hops.length}.`);
|
||||||
|
|
||||||
|
let firstTimeoutHop = null;
|
||||||
|
let worstLatencyHop = null;
|
||||||
|
|
||||||
|
hops.forEach((hop, index) => {
|
||||||
|
const ip = hop.ip || hop.host || hop.address || '';
|
||||||
|
const dns = hop.dns || null;
|
||||||
|
const hostDisplay = dns ? `${dns}${ip ? ` (${ip})` : ''}` : (ip || hop.host || '');
|
||||||
|
const avg = hop.avgMs;
|
||||||
|
const loss = hop.loss;
|
||||||
|
|
||||||
|
let descr = `Хоп ${hop.hop || index + 1}: ${hostDisplay || 'неизвестный узел'}`;
|
||||||
|
const details = [];
|
||||||
|
|
||||||
|
if (avg != null) details.push(`среднее время ≈ ${avg.toFixed(1)} мс`);
|
||||||
|
if (hop.bestMs != null && hop.worstMs != null) {
|
||||||
|
details.push(`мин/макс ${hop.bestMs.toFixed(1)}/${hop.worstMs.toFixed(1)} мс`);
|
||||||
|
}
|
||||||
|
if (loss != null) details.push(`потеря пакетов ${loss}%`);
|
||||||
|
|
||||||
|
// Привязка к gateway (по IP)
|
||||||
|
const gw = gateways.find((g) => g.ip && g.ip === ip);
|
||||||
|
if (gw) {
|
||||||
|
const srvLabel = findServerLabel(gw.serverId);
|
||||||
|
details.push(`gateway "${gw.description || gw.ip}" на сервере ${srvLabel || gw.serverId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Привязка к туннельному интерфейсу (по IP)
|
||||||
|
const iface = ifaces.find((i) => i.localIp === ip || i.remoteIp === ip);
|
||||||
|
if (iface) {
|
||||||
|
const s1 = findServerLabel(iface.serverId);
|
||||||
|
const s2 = findServerLabel(iface.serverId2);
|
||||||
|
details.push(
|
||||||
|
`туннель ${iface.type || ''} ${iface.name || ''} (${iface.localIp} ⇄ ${iface.remoteIp})` +
|
||||||
|
(s1 || s2 ? ` между ${s1 || 'сервером 1'} и ${s2 || 'сервером 2'}` : '')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Статус/таймауты
|
||||||
|
if (hop.status) {
|
||||||
|
const st = String(hop.status).toLowerCase();
|
||||||
|
if (st.includes('timeout') || st.includes('no reply') || st.includes('unreachable')) {
|
||||||
|
details.push('узел не отвечает на ICMP (возможная фильтрация или недоступность)');
|
||||||
|
if (!firstTimeoutHop) firstTimeoutHop = hop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (details.length > 0) {
|
||||||
|
descr += ` — ${details.join('; ')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(descr);
|
||||||
|
|
||||||
|
if (avg != null) {
|
||||||
|
if (!worstLatencyHop || avg > (worstLatencyHop.avgMs || 0)) {
|
||||||
|
worstLatencyHop = hop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (worstLatencyHop && worstLatencyHop.avgMs != null && worstLatencyHop.avgMs > 150) {
|
||||||
|
lines.push(
|
||||||
|
`Максимальная средняя задержка на хопе ${worstLatencyHop.hop}: около ${worstLatencyHop.avgMs.toFixed(
|
||||||
|
1
|
||||||
|
)} мс — возможен "узкое место" или удалённый сегмент сети.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (firstTimeoutHop) {
|
||||||
|
lines.push(
|
||||||
|
`Начиная с хопа ${firstTimeoutHop.hop} (${firstTimeoutHop.dns ? `${firstTimeoutHop.dns}${firstTimeoutHop.ip ? ` (${firstTimeoutHop.ip})` : ''}` : (firstTimeoutHop.ip || firstTimeoutHop.host || 'неизвестный узел')}) наблюдаются таймауты — цель может быть недоступна или где-то по пути фильтруется ICMP.`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
lines.push('Таймаутов или явной потери пакетов по пути не обнаружено (по данным MikroTik).');
|
||||||
|
}
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MikrotikTools;
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,434 @@
|
|||||||
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import { IconRefresh, IconTopologyRing, IconClock } from '@tabler/icons-react';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import NetworkMapUnifi from './NetworkMapUnifi.jsx';
|
||||||
|
|
||||||
|
/** Параллельно выполняем промисы с лимитом одновременных */
|
||||||
|
async function runWithLimit(tasks, limit = 4) {
|
||||||
|
const results = [];
|
||||||
|
let index = 0;
|
||||||
|
async function runNext() {
|
||||||
|
const i = index++;
|
||||||
|
if (i >= tasks.length) return;
|
||||||
|
const task = tasks[i];
|
||||||
|
try {
|
||||||
|
const value = await task();
|
||||||
|
results[i] = { value };
|
||||||
|
} catch (err) {
|
||||||
|
results[i] = { error: err };
|
||||||
|
}
|
||||||
|
await runNext();
|
||||||
|
}
|
||||||
|
const workers = Array.from({ length: Math.min(limit, tasks.length) }, () => runNext());
|
||||||
|
await Promise.all(workers);
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выполняет задачи так, что на каждый ключ (ноду) в один момент времени
|
||||||
|
* выполняется не более одной задачи. Разные ноды — параллельно.
|
||||||
|
* getKey(i) возвращает ключ для задачи с индексом i.
|
||||||
|
*/
|
||||||
|
async function runWithOnePerKey(tasks, getKey) {
|
||||||
|
const n = tasks.length;
|
||||||
|
const keyToIndices = new Map();
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
const k = String(getKey(i));
|
||||||
|
if (!keyToIndices.has(k)) keyToIndices.set(k, []);
|
||||||
|
keyToIndices.get(k).push(i);
|
||||||
|
}
|
||||||
|
const results = [];
|
||||||
|
for (let i = 0; i < n; i++) results[i] = null;
|
||||||
|
|
||||||
|
const keys = Array.from(keyToIndices.keys());
|
||||||
|
let round = 0;
|
||||||
|
while (true) {
|
||||||
|
const batch = [];
|
||||||
|
for (const k of keys) {
|
||||||
|
const indices = keyToIndices.get(k);
|
||||||
|
if (round < indices.length) batch.push(indices[round]);
|
||||||
|
}
|
||||||
|
if (batch.length === 0) break;
|
||||||
|
await Promise.all(
|
||||||
|
batch.map(async (i) => {
|
||||||
|
try {
|
||||||
|
const value = await tasks[i]();
|
||||||
|
results[i] = { value };
|
||||||
|
} catch (err) {
|
||||||
|
results[i] = { error: err };
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
round++;
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NetworkMapDashboard() {
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [connections, setConnections] = useState([]);
|
||||||
|
const [pingMap, setPingMap] = useState({});
|
||||||
|
const [speedMap, setSpeedMap] = useState({});
|
||||||
|
const [pingStaleMap, setPingStaleMap] = useState({});
|
||||||
|
const [speedStaleMap, setSpeedStaleMap] = useState({});
|
||||||
|
const pingTimestampsRef = useRef({});
|
||||||
|
const lastSuccessfulPingRef = useRef({});
|
||||||
|
const lastSuccessfulSpeedRef = useRef({});
|
||||||
|
const [pingCacheSeconds, setPingCacheSeconds] = useState(0);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [pingLoading, setPingLoading] = useState(false);
|
||||||
|
const [speedLoading, setSpeedLoading] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const pingAbortRef = useRef(false);
|
||||||
|
const speedAbortRef = useRef(false);
|
||||||
|
/** Время применения кеша от планировщика (чтобы не запускать пинг/скорость повторно при открытии) */
|
||||||
|
const cacheAppliedAtRef = useRef(null);
|
||||||
|
|
||||||
|
/** Связи строятся из интерфейсов раздела «Сетевые настройки» (/network-config), tunnelInterfaces */
|
||||||
|
const fetchData = useCallback(async (abortSignal) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
cacheAppliedAtRef.current = null;
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const [serversRes, configRes, uiSettingsRes, cacheRes] = await Promise.all([
|
||||||
|
api.get('/servers', opts),
|
||||||
|
api.get('/network-config', opts).catch(() => ({ data: null })),
|
||||||
|
api.get('/ui-settings', opts).catch(() => ({ data: {} })),
|
||||||
|
api.get('/network-map-cache', opts).catch(() => ({ data: {} })),
|
||||||
|
]);
|
||||||
|
const serversList = Array.isArray(serversRes?.data) ? serversRes.data : [];
|
||||||
|
const config = configRes?.data || {};
|
||||||
|
const tunnelInterfaces = Array.isArray(config.tunnelInterfaces) ? config.tunnelInterfaces : [];
|
||||||
|
const uiSettings = uiSettingsRes?.data || {};
|
||||||
|
const cache = cacheRes?.data || {};
|
||||||
|
const ttlSeconds = Math.max(
|
||||||
|
0,
|
||||||
|
parseInt(uiSettings.networkMapPingCacheSeconds, 10) || 0
|
||||||
|
);
|
||||||
|
setPingCacheSeconds(ttlSeconds);
|
||||||
|
|
||||||
|
const getServer = (serverId) =>
|
||||||
|
serversList.find((s) => s.id === serverId || s.ip === serverId || s.dns === serverId);
|
||||||
|
|
||||||
|
const connList = [];
|
||||||
|
tunnelInterfaces.forEach((iface) => {
|
||||||
|
if (!iface.serverId || !iface.serverId2) return;
|
||||||
|
const s1 = getServer(iface.serverId);
|
||||||
|
const s2 = getServer(iface.serverId2);
|
||||||
|
if (!s1 || !s2 || s1.ip === s2.ip) return;
|
||||||
|
const s1Key = s1.id || s1.dns || s1.ip;
|
||||||
|
const s2Key = s2.id || s2.dns || s2.ip;
|
||||||
|
if (!s1Key || !s2Key) return;
|
||||||
|
const isJumphost1 = s1 && ['jumphost', 'home'].includes(String(s1.type || '').toLowerCase());
|
||||||
|
const isJumphost2 = s2 && ['jumphost', 'home'].includes(String(s2.type || '').toLowerCase());
|
||||||
|
connList.push({
|
||||||
|
from: s1.ip,
|
||||||
|
to: s2.ip,
|
||||||
|
tunnelType: iface.type || 'GRE',
|
||||||
|
interfaceName: iface.name || null,
|
||||||
|
fromKey: s1Key,
|
||||||
|
toKey: s2Key,
|
||||||
|
internalFromTo: iface.remoteIp || null,
|
||||||
|
internalToFrom: iface.localIp || null,
|
||||||
|
speedTestServerId: isJumphost1 ? s1Key : isJumphost2 ? s2Key : null,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
setServers(serversList);
|
||||||
|
setConnections(connList);
|
||||||
|
|
||||||
|
const cacheMaxAgeMs = Math.max((ttlSeconds || 60) * 1000, 60 * 1000);
|
||||||
|
const cachedPingMap = cache.pingMap && typeof cache.pingMap === 'object' ? cache.pingMap : {};
|
||||||
|
const cachedSpeedMap = cache.speedMap && typeof cache.speedMap === 'object' ? cache.speedMap : {};
|
||||||
|
const hasCacheData = Object.keys(cachedPingMap).length > 0 || Object.keys(cachedSpeedMap).length > 0;
|
||||||
|
const cacheValid =
|
||||||
|
cache.updatedAt &&
|
||||||
|
Date.now() - cache.updatedAt < cacheMaxAgeMs &&
|
||||||
|
hasCacheData;
|
||||||
|
|
||||||
|
if (hasCacheData) {
|
||||||
|
// Всегда показываем кеш, если он есть — чтобы на карте отображались хотя бы прошлые пинг/скорость
|
||||||
|
setPingMap(cachedPingMap);
|
||||||
|
setSpeedMap(cachedSpeedMap);
|
||||||
|
Object.keys(cachedPingMap).forEach((k) => {
|
||||||
|
if (typeof cachedPingMap[k] === 'number') {
|
||||||
|
lastSuccessfulPingRef.current[k] = cachedPingMap[k];
|
||||||
|
}
|
||||||
|
pingTimestampsRef.current[k] = cache.updatedAt;
|
||||||
|
});
|
||||||
|
Object.keys(cachedSpeedMap).forEach((k) => {
|
||||||
|
if (cachedSpeedMap[k] && typeof cachedSpeedMap[k] === 'object') {
|
||||||
|
lastSuccessfulSpeedRef.current[k] = cachedSpeedMap[k];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cacheAppliedAtRef.current = cache.updatedAt;
|
||||||
|
// Устаревший кеш (старше TTL) помечаем как stale, но данные всё равно отображаем
|
||||||
|
if (cacheValid) {
|
||||||
|
setPingStaleMap({});
|
||||||
|
setSpeedStaleMap({});
|
||||||
|
} else {
|
||||||
|
const stalePing = {};
|
||||||
|
const staleSpeed = {};
|
||||||
|
Object.keys(cachedPingMap).forEach((k) => { stalePing[k] = true; });
|
||||||
|
Object.keys(cachedSpeedMap).forEach((k) => { staleSpeed[k] = true; });
|
||||||
|
setPingStaleMap(stalePing);
|
||||||
|
setSpeedStaleMap(staleSpeed);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setSpeedMap({});
|
||||||
|
setPingStaleMap({});
|
||||||
|
setSpeedStaleMap({});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('NetworkMap fetch:', e);
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить данные');
|
||||||
|
setServers([]);
|
||||||
|
setConnections([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/** Один ключ пинга на ребро (маршруты статичны — одна сторона) */
|
||||||
|
const edgePingKey = (a, b) => [String(a), String(b)].sort().join(':');
|
||||||
|
|
||||||
|
const requestPings = useCallback(async () => {
|
||||||
|
if (connections.length === 0) return;
|
||||||
|
pingAbortRef.current = false;
|
||||||
|
setPingLoading(true);
|
||||||
|
const ttlMs = Math.max(0, (pingCacheSeconds || 0) * 1000);
|
||||||
|
|
||||||
|
const tasks = [];
|
||||||
|
connections.forEach((c) => {
|
||||||
|
const from = String(c.from);
|
||||||
|
const to = String(c.to);
|
||||||
|
if (!from || !to || from === to) return;
|
||||||
|
const srcFrom = servers.find((s) => s.ip === from);
|
||||||
|
const srcTo = servers.find((s) => s.ip === to);
|
||||||
|
const canPingFrom =
|
||||||
|
srcFrom && ['jumphost', 'home'].includes(String(srcFrom.type || '').toLowerCase()) && c.internalFromTo;
|
||||||
|
const canPingTo =
|
||||||
|
srcTo && ['jumphost', 'home'].includes(String(srcTo.type || '').toLowerCase()) && c.internalToFrom;
|
||||||
|
|
||||||
|
const ekey = edgePingKey(from, to);
|
||||||
|
if (ttlMs > 0 && pingTimestampsRef.current[ekey] && Date.now() - pingTimestampsRef.current[ekey] < ttlMs) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Один пинг на ребро — с той стороны, где есть jumphost
|
||||||
|
if (canPingFrom) {
|
||||||
|
tasks.push(async () => {
|
||||||
|
if (pingAbortRef.current) return;
|
||||||
|
try {
|
||||||
|
const { data } = await api.post('/mikrotik/ping', {
|
||||||
|
serverId: c.fromKey,
|
||||||
|
target: c.internalFromTo,
|
||||||
|
gatewayIp: c.internalFromTo,
|
||||||
|
count: 3,
|
||||||
|
});
|
||||||
|
const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||||
|
if (ms != null) {
|
||||||
|
pingTimestampsRef.current[ekey] = Date.now();
|
||||||
|
lastSuccessfulPingRef.current[ekey] = ms;
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: ms }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
pingTimestampsRef.current[ekey] = Date.now();
|
||||||
|
// При ошибке сохраняем последнее успешное значение с пометкой устаревшего
|
||||||
|
const lastSuccess = lastSuccessfulPingRef.current[ekey];
|
||||||
|
if (lastSuccess != null) {
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: lastSuccess }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: true }));
|
||||||
|
} else {
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: null }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (canPingTo) {
|
||||||
|
tasks.push(async () => {
|
||||||
|
if (pingAbortRef.current) return;
|
||||||
|
try {
|
||||||
|
const { data } = await api.post('/mikrotik/ping', {
|
||||||
|
serverId: c.toKey,
|
||||||
|
target: c.internalToFrom,
|
||||||
|
gatewayIp: c.internalToFrom,
|
||||||
|
count: 3,
|
||||||
|
});
|
||||||
|
const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||||
|
if (ms != null) {
|
||||||
|
pingTimestampsRef.current[ekey] = Date.now();
|
||||||
|
lastSuccessfulPingRef.current[ekey] = ms;
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: ms }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
pingTimestampsRef.current[ekey] = Date.now();
|
||||||
|
// При ошибке сохраняем последнее успешное значение с пометкой устаревшего
|
||||||
|
const lastSuccess = lastSuccessfulPingRef.current[ekey];
|
||||||
|
if (lastSuccess != null) {
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: lastSuccess }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: true }));
|
||||||
|
} else {
|
||||||
|
setPingMap((prev) => ({ ...prev, [ekey]: null }));
|
||||||
|
setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await runWithLimit(tasks, 4);
|
||||||
|
if (pingAbortRef.current) return;
|
||||||
|
setPingLoading(false);
|
||||||
|
}, [connections, servers, pingCacheSeconds]);
|
||||||
|
|
||||||
|
/** Ключ скорости по паре серверов (без учёта порядка) */
|
||||||
|
const speedKey = (key1, key2) =>
|
||||||
|
[String(key1), String(key2)].sort().join(':');
|
||||||
|
|
||||||
|
const requestSpeeds = useCallback(async () => {
|
||||||
|
const withSpeed = connections.filter(
|
||||||
|
(c) => c.speedTestServerId && c.interfaceName
|
||||||
|
);
|
||||||
|
if (withSpeed.length === 0) return;
|
||||||
|
speedAbortRef.current = false;
|
||||||
|
setSpeedLoading(true);
|
||||||
|
const tasks = withSpeed.map((c) => async () => {
|
||||||
|
if (speedAbortRef.current) return;
|
||||||
|
const key = speedKey(c.fromKey, c.toKey);
|
||||||
|
try {
|
||||||
|
const { data } = await api.post(
|
||||||
|
'/mikrotik/speed-test',
|
||||||
|
{
|
||||||
|
serverId: c.speedTestServerId,
|
||||||
|
interfaceName: c.interfaceName,
|
||||||
|
},
|
||||||
|
{ timeout: 120000 }
|
||||||
|
);
|
||||||
|
if (data?.ok && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
|
||||||
|
const speedData = {
|
||||||
|
tcpDownloadBps: data.tcpDownloadBps,
|
||||||
|
tcpUploadBps: data.tcpUploadBps,
|
||||||
|
cached: data.cached === true,
|
||||||
|
durationSeconds: data.durationSeconds,
|
||||||
|
};
|
||||||
|
lastSuccessfulSpeedRef.current[key] = speedData;
|
||||||
|
setSpeedMap((prev) => ({ ...prev, [key]: speedData }));
|
||||||
|
setSpeedStaleMap((prev) => ({ ...prev, [key]: false }));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// При ошибке сохраняем последнее успешное значение с пометкой устаревшего
|
||||||
|
const lastSuccess = lastSuccessfulSpeedRef.current[key];
|
||||||
|
if (lastSuccess != null) {
|
||||||
|
setSpeedMap((prev) => ({ ...prev, [key]: lastSuccess }));
|
||||||
|
setSpeedStaleMap((prev) => ({ ...prev, [key]: true }));
|
||||||
|
} else {
|
||||||
|
setSpeedMap((prev) => ({ ...prev, [key]: null }));
|
||||||
|
setSpeedStaleMap((prev) => ({ ...prev, [key]: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// В один момент — только один тест на один сервер назначения (удалённый конец туннеля),
|
||||||
|
// иначе несколько замеров к одному хостингу делят канал и дают заниженные результаты
|
||||||
|
await runWithOnePerKey(tasks, (i) => {
|
||||||
|
const c = withSpeed[i];
|
||||||
|
return c.speedTestServerId === c.fromKey ? c.toKey : c.fromKey;
|
||||||
|
});
|
||||||
|
if (speedAbortRef.current) return;
|
||||||
|
setSpeedLoading(false);
|
||||||
|
}, [connections]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchData(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
// Пинг и скорость не запускаются автоматически при открытии карты (даже если кеш просрочен).
|
||||||
|
// Обновление только по кнопкам «Пинг» и «Скорость» или по планировщику.
|
||||||
|
|
||||||
|
const handleRefreshPings = () => {
|
||||||
|
requestPings();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRefreshSpeeds = () => {
|
||||||
|
requestSpeeds();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Карта сети"
|
||||||
|
icon={<IconTopologyRing size={24} />}
|
||||||
|
meta="Серверы и пинг между ними"
|
||||||
|
/>
|
||||||
|
<div className="text-center py-5 text-muted">Загрузка серверов и связей…</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Карта сети"
|
||||||
|
icon={<IconTopologyRing size={24} />}
|
||||||
|
meta="Серверы и пинг между ними"
|
||||||
|
/>
|
||||||
|
<div className="alert alert-danger">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Карта сети"
|
||||||
|
icon={<IconTopologyRing size={24} />}
|
||||||
|
meta="Связи из раздела «Сетевые настройки» → Интерфейсы; на рёбрах — пинг и скорость"
|
||||||
|
actions={
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={handleRefreshPings}
|
||||||
|
disabled={pingLoading}
|
||||||
|
>
|
||||||
|
<IconRefresh className={pingLoading ? 'spin me-2' : 'me-2'} size={18} />
|
||||||
|
{pingLoading ? 'Пинг…' : 'Пинг'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={handleRefreshSpeeds}
|
||||||
|
disabled={speedLoading}
|
||||||
|
>
|
||||||
|
<IconRefresh className={speedLoading ? 'spin me-2' : 'me-2'} size={18} />
|
||||||
|
{speedLoading ? 'Скорость…' : 'Скорость'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{servers.length === 0 ? (
|
||||||
|
<div className="alert alert-info">
|
||||||
|
Нет серверов. Добавьте серверы в разделе «Серверы».
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<NetworkMapUnifi
|
||||||
|
servers={servers}
|
||||||
|
connections={connections}
|
||||||
|
pingMap={pingMap}
|
||||||
|
speedMap={speedMap}
|
||||||
|
pingStaleMap={pingStaleMap}
|
||||||
|
speedStaleMap={speedStaleMap}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,325 @@
|
|||||||
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import {
|
||||||
|
IconClockPlay,
|
||||||
|
IconSettings,
|
||||||
|
IconTerminal2,
|
||||||
|
IconPlayerPlay,
|
||||||
|
IconRefresh,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
const POLL_LOGS_MS = 2500;
|
||||||
|
const INTERVAL_MIN = 1;
|
||||||
|
const INTERVAL_MAX = 1440;
|
||||||
|
const LOG_LINES_MIN = 100;
|
||||||
|
const LOG_LINES_MAX = 2000;
|
||||||
|
|
||||||
|
export default function NetworkMapSchedulerPage() {
|
||||||
|
const [settings, setSettings] = useState({
|
||||||
|
enabled: false,
|
||||||
|
intervalMinutes: 5,
|
||||||
|
runPing: true,
|
||||||
|
runSpeedTest: true,
|
||||||
|
logMaxLines: 500,
|
||||||
|
});
|
||||||
|
const [nextRunAt, setNextRunAt] = useState(null);
|
||||||
|
const [logs, setLogs] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [running, setRunning] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const logEndRef = useRef(null);
|
||||||
|
const logContainerRef = useRef(null);
|
||||||
|
const [autoScroll, setAutoScroll] = useState(true);
|
||||||
|
|
||||||
|
const fetchSettings = useCallback(async (abortSignal) => {
|
||||||
|
try {
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
const { data } = await api.get('/scheduler/network-map/settings', opts);
|
||||||
|
setSettings({
|
||||||
|
enabled: Boolean(data.enabled),
|
||||||
|
intervalMinutes: Math.max(INTERVAL_MIN, Math.min(INTERVAL_MAX, Number(data.intervalMinutes) || 5)),
|
||||||
|
runPing: data.runPing !== false,
|
||||||
|
runSpeedTest: data.runSpeedTest !== false,
|
||||||
|
logMaxLines: Math.max(LOG_LINES_MIN, Math.min(LOG_LINES_MAX, Number(data.logMaxLines) || 500)),
|
||||||
|
});
|
||||||
|
setNextRunAt(typeof data.nextRunAt === 'number' ? data.nextRunAt : null);
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить настройки');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchLogs = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await api.get('/scheduler/network-map/logs');
|
||||||
|
setLogs(Array.isArray(data?.lines) ? data.lines : []);
|
||||||
|
} catch (_) {
|
||||||
|
// не показываем ошибку при опросе логов
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await fetchSettings(controller.signal);
|
||||||
|
setLoading(false);
|
||||||
|
})();
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [fetchSettings]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchLogs();
|
||||||
|
const t = setInterval(fetchLogs, POLL_LOGS_MS);
|
||||||
|
return () => clearInterval(t);
|
||||||
|
}, [fetchLogs]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!settings.enabled || !nextRunAt) return;
|
||||||
|
const t = setInterval(fetchSettings, 60 * 1000);
|
||||||
|
return () => clearInterval(t);
|
||||||
|
}, [settings.enabled, nextRunAt, fetchSettings]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (autoScroll && logEndRef.current) {
|
||||||
|
logEndRef.current.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}, [logs, autoScroll]);
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
await api.patch('/scheduler/network-map/settings', {
|
||||||
|
networkMapSchedulerEnabled: settings.enabled,
|
||||||
|
networkMapSchedulerIntervalMinutes: settings.intervalMinutes,
|
||||||
|
networkMapSchedulerRunPing: settings.runPing,
|
||||||
|
networkMapSchedulerRunSpeedTest: settings.runSpeedTest,
|
||||||
|
networkMapSchedulerLogMaxLines: settings.logMaxLines,
|
||||||
|
});
|
||||||
|
await fetchSettings();
|
||||||
|
} catch (e) {
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось сохранить');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRunNow = async () => {
|
||||||
|
setRunning(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
await api.post('/scheduler/network-map/run-now');
|
||||||
|
setTimeout(fetchLogs, 500);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось запустить');
|
||||||
|
} finally {
|
||||||
|
setRunning(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Планировщик карты сети"
|
||||||
|
icon={<IconClockPlay size={24} />}
|
||||||
|
meta="Пинг и замер скорости между серверами по расписанию"
|
||||||
|
/>
|
||||||
|
<div className="text-center py-5 text-muted">Загрузка настроек…</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Планировщик карты сети"
|
||||||
|
icon={<IconClockPlay size={24} />}
|
||||||
|
meta="Пинг и замер скорости между серверами по расписанию; кеш ускоряет загрузку карты сети."
|
||||||
|
actions={
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={handleRunNow}
|
||||||
|
disabled={running}
|
||||||
|
>
|
||||||
|
<IconPlayerPlay className={running ? 'spin me-2' : 'me-2'} size={18} />
|
||||||
|
{running ? 'Запуск…' : 'Запустить сейчас'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger alert-dismissible fade show mb-3" role="alert">
|
||||||
|
{error}
|
||||||
|
<button type="button" className="btn-close" aria-label="Закрыть" onClick={() => setError(null)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="row row-deck row-cards g-3">
|
||||||
|
<div className="col-12 col-lg-5">
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title d-flex align-items-center">
|
||||||
|
<IconSettings className="me-2" size={20} />
|
||||||
|
Настройки
|
||||||
|
</h3>
|
||||||
|
<div className="card-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary btn-sm"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
{saving ? 'Сохранение…' : 'Сохранить'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-check form-switch">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.enabled}
|
||||||
|
onChange={(e) => setSettings((s) => ({ ...s, enabled: e.target.checked }))}
|
||||||
|
/>
|
||||||
|
<span className="form-check-label">Включить планировщик</span>
|
||||||
|
</label>
|
||||||
|
<div className="form-hint">Периодически обновлять пинг и скорость по связям из «Сетевые настройки»</div>
|
||||||
|
{settings.enabled && nextRunAt != null && (
|
||||||
|
<div className="mt-2 text-muted small">
|
||||||
|
Следующий запуск: {new Date(nextRunAt).toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'medium' })}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Интервал (минут)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
min={INTERVAL_MIN}
|
||||||
|
max={INTERVAL_MAX}
|
||||||
|
value={settings.intervalMinutes}
|
||||||
|
onChange={(e) =>
|
||||||
|
setSettings((s) => ({
|
||||||
|
...s,
|
||||||
|
intervalMinutes: Math.max(INTERVAL_MIN, Math.min(INTERVAL_MAX, parseInt(e.target.value, 10) || INTERVAL_MIN)),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="form-hint">От 1 до 1440 (сутки). По умолчанию 5 мин.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Задачи</label>
|
||||||
|
<div>
|
||||||
|
<label className="form-check form-switch me-3">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.runPing}
|
||||||
|
onChange={(e) => setSettings((s) => ({ ...s, runPing: e.target.checked }))}
|
||||||
|
/>
|
||||||
|
<span className="form-check-label">Пинг</span>
|
||||||
|
</label>
|
||||||
|
<label className="form-check form-switch">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.runSpeedTest}
|
||||||
|
onChange={(e) => setSettings((s) => ({ ...s, runSpeedTest: e.target.checked }))}
|
||||||
|
/>
|
||||||
|
<span className="form-check-label">Замер скорости</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-0">
|
||||||
|
<label className="form-label">Строк в логе</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
min={LOG_LINES_MIN}
|
||||||
|
max={LOG_LINES_MAX}
|
||||||
|
value={settings.logMaxLines}
|
||||||
|
onChange={(e) =>
|
||||||
|
setSettings((s) => ({
|
||||||
|
...s,
|
||||||
|
logMaxLines: Math.max(LOG_LINES_MIN, Math.min(LOG_LINES_MAX, parseInt(e.target.value, 10) || 500)),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="form-hint">Кольцевой буфер: от 100 до 2000 строк.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-12 col-lg-7">
|
||||||
|
<div className="card flex-fill">
|
||||||
|
<div className="card-header d-flex align-items-center">
|
||||||
|
<h3 className="card-title d-flex align-items-center mb-0">
|
||||||
|
<IconTerminal2 className="me-2" size={20} />
|
||||||
|
Логи
|
||||||
|
</h3>
|
||||||
|
<div className="card-actions ms-auto">
|
||||||
|
<label className="form-check form-switch form-check-inline mb-0 me-2">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={autoScroll}
|
||||||
|
onChange={(e) => setAutoScroll(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span className="form-check-label small">Автопрокрутка</span>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={fetchLogs}
|
||||||
|
aria-label="Обновить логи"
|
||||||
|
>
|
||||||
|
<IconRefresh size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={logContainerRef}
|
||||||
|
className="card-body p-0"
|
||||||
|
style={{ minHeight: 320 }}
|
||||||
|
>
|
||||||
|
<pre
|
||||||
|
className="mb-0 p-3 bg-dark text-light rounded-0 rounded-bottom"
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
|
||||||
|
maxHeight: 420,
|
||||||
|
overflow: 'auto',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{logs.length === 0 ? (
|
||||||
|
<span className="text-muted">Логов пока нет. Включите планировщик и нажмите «Запустить сейчас» или дождитесь следующего запуска.</span>
|
||||||
|
) : (
|
||||||
|
logs.map((line, i) => (
|
||||||
|
<span key={i} style={{ display: 'block' }}>
|
||||||
|
{line}
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
<span ref={logEndRef} />
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,692 @@
|
|||||||
|
import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
|
||||||
|
import { IconRefresh, IconMaximize, IconMinimize, IconClock } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
const FLAG_CDN = 'https://flagcdn.com';
|
||||||
|
|
||||||
|
const UNIFI_BG = '#0f172a';
|
||||||
|
const UNIFI_CARD_BG = '#1e293b';
|
||||||
|
const UNIFI_CARD_BORDER = '#334155';
|
||||||
|
const UNIFI_GREEN = '#22c55e';
|
||||||
|
const UNIFI_TEXT = '#f1f5f9';
|
||||||
|
const UNIFI_TEXT_MUTED = '#94a3b8';
|
||||||
|
const NODE_WIDTH = 88;
|
||||||
|
const NODE_HEIGHT = 52;
|
||||||
|
const STORAGE_KEY = 'network-map-unifi-positions';
|
||||||
|
|
||||||
|
function computeInitialLayout(servers, size) {
|
||||||
|
const positions = {};
|
||||||
|
if (!servers.length) return positions;
|
||||||
|
|
||||||
|
// Группируем: сначала home, затем jumphost, затем exit, затем остальные
|
||||||
|
const homes = servers.filter((s) => String(s.type || '').toLowerCase() === 'home');
|
||||||
|
const jumphosts = servers.filter((s) => String(s.type || '').toLowerCase() === 'jumphost');
|
||||||
|
const exits = servers.filter((s) => String(s.type || '').toLowerCase() === 'exit');
|
||||||
|
const others = servers.filter((s) => {
|
||||||
|
const t = String(s.type || '').toLowerCase();
|
||||||
|
return t !== 'home' && t !== 'jumphost' && t !== 'exit';
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns = [homes, jumphosts, exits, others].filter((col) => col.length > 0);
|
||||||
|
const colCount = columns.length || 1;
|
||||||
|
const paddingX = 80;
|
||||||
|
const usableWidth = Math.max(200, size.w - paddingX * 2);
|
||||||
|
const colStep = usableWidth / Math.max(1, colCount - 1);
|
||||||
|
const baseX = paddingX;
|
||||||
|
|
||||||
|
columns.forEach((col, colIdx) => {
|
||||||
|
// В пределах колонки сортируем по dns/ip для стабильности
|
||||||
|
const sorted = [...col].sort((a, b) => {
|
||||||
|
const la = (a.dns || a.ip || '').toString();
|
||||||
|
const lb = (b.dns || b.ip || '').toString();
|
||||||
|
return la.localeCompare(lb);
|
||||||
|
});
|
||||||
|
const n = sorted.length;
|
||||||
|
const x = baseX + colStep * colIdx;
|
||||||
|
const topPadding = 60;
|
||||||
|
const bottomPadding = 60;
|
||||||
|
const usableHeight = Math.max(120, size.h - topPadding - bottomPadding);
|
||||||
|
sorted.forEach((s, i) => {
|
||||||
|
const t = n > 1 ? i / (n - 1) : 0.5;
|
||||||
|
const y = topPadding + usableHeight * t;
|
||||||
|
positions[String(s.ip)] = { x, y };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return positions;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Карта сети в стиле UNIFI: тёмный фон, простые иконки узлов, зелёные линии, пинг на рёбрах.
|
||||||
|
* Узлы можно перетаскивать; раскладка сохраняется в localStorage. Круг — только начальная раскладка.
|
||||||
|
*/
|
||||||
|
function formatMbps(bps) {
|
||||||
|
if (bps == null || Number.isNaN(bps)) return '—';
|
||||||
|
const mbps = bps / 1_000_000;
|
||||||
|
if (!Number.isFinite(mbps)) return '—';
|
||||||
|
return `${mbps.toFixed(1)} Мбит/с`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Короткий формат скорости для подписи на ребре: "↓287 ↑170 Мбит/с" */
|
||||||
|
function formatSpeedShort(downloadBps, uploadBps) {
|
||||||
|
const fmt = (v) => {
|
||||||
|
if (v == null || Number.isNaN(v)) return '—';
|
||||||
|
const mbps = v / 1_000_000;
|
||||||
|
if (!Number.isFinite(mbps)) return '—';
|
||||||
|
return mbps >= 10 ? Math.round(mbps) : mbps.toFixed(1);
|
||||||
|
};
|
||||||
|
const down = fmt(downloadBps);
|
||||||
|
const up = fmt(uploadBps);
|
||||||
|
if (down === '—' && up === '—') return null;
|
||||||
|
if (down === '—') return `↑${up} Мбит/с`;
|
||||||
|
if (up === '—') return `↓${down} Мбит/с`;
|
||||||
|
return `↓${down} ↑${up} Мбит/с`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function speedKey(key1, key2) {
|
||||||
|
return [String(key1), String(key2)].sort().join(':');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NetworkMapUnifi({ servers = [], connections = [], pingMap = {}, speedMap = {}, pingStaleMap = {}, speedStaleMap = {} }) {
|
||||||
|
const containerRef = useRef(null);
|
||||||
|
const svgRef = useRef(null);
|
||||||
|
const [size, setSize] = useState({ w: 800, h: 520 });
|
||||||
|
const [positions, setPositions] = useState({});
|
||||||
|
const [drag, setDrag] = useState(null);
|
||||||
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||||
|
const [hoveredEdgeKey, setHoveredEdgeKey] = useState(null);
|
||||||
|
const [selectedEdge, setSelectedEdge] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = containerRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const ro = new ResizeObserver((entries) => {
|
||||||
|
const { width, height } = entries[0]?.contentRect ?? {};
|
||||||
|
if (width > 0 && height > 0) setSize({ w: width, h: height });
|
||||||
|
});
|
||||||
|
ro.observe(el);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Трек полноэкранного режима
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = () => {
|
||||||
|
const fs = Boolean(document.fullscreenElement);
|
||||||
|
setIsFullscreen(fs);
|
||||||
|
};
|
||||||
|
document.addEventListener('fullscreenchange', handler);
|
||||||
|
return () => document.removeEventListener('fullscreenchange', handler);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Инициализация позиций: из localStorage или по кругу
|
||||||
|
useEffect(() => {
|
||||||
|
if (servers.length === 0) {
|
||||||
|
setPositions({});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let saved = {};
|
||||||
|
try {
|
||||||
|
const raw = window.localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (raw) saved = JSON.parse(raw) || {};
|
||||||
|
} catch {}
|
||||||
|
const initial = computeInitialLayout(servers, size);
|
||||||
|
const merged = {};
|
||||||
|
servers.forEach((s, i) => {
|
||||||
|
const ip = String(s.ip);
|
||||||
|
if (saved[ip] && typeof saved[ip].x === 'number' && typeof saved[ip].y === 'number') {
|
||||||
|
merged[ip] = { x: saved[ip].x, y: saved[ip].y };
|
||||||
|
} else {
|
||||||
|
merged[ip] = initial[ip] ?? { x: size.w / 2, y: size.h / 2 };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setPositions(merged);
|
||||||
|
}, [servers.length, size.w, size.h]);
|
||||||
|
|
||||||
|
const savePositions = useCallback((next) => {
|
||||||
|
setPositions(next);
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
|
||||||
|
} catch {}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getSvgCoords = useCallback((clientX, clientY) => {
|
||||||
|
const svg = svgRef.current;
|
||||||
|
if (!svg) return null;
|
||||||
|
const pt = svg.createSVGPoint();
|
||||||
|
pt.x = clientX;
|
||||||
|
pt.y = clientY;
|
||||||
|
const p = pt.matrixTransform(svg.getScreenCTM().inverse());
|
||||||
|
return { x: p.x, y: p.y };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!drag) return;
|
||||||
|
const onMove = (e) => {
|
||||||
|
const p = getSvgCoords(e.clientX, e.clientY);
|
||||||
|
if (!p) return;
|
||||||
|
setPositions((prev) => {
|
||||||
|
const pos = prev[drag.nodeId];
|
||||||
|
if (!pos) return prev;
|
||||||
|
const next = { ...prev, [drag.nodeId]: { x: drag.startX + (p.x - drag.mouseX), y: drag.startY + (p.y - drag.mouseY) } };
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
|
||||||
|
} catch {}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const onUp = () => setDrag(null);
|
||||||
|
window.addEventListener('mousemove', onMove);
|
||||||
|
window.addEventListener('mouseup', onUp);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('mousemove', onMove);
|
||||||
|
window.removeEventListener('mouseup', onUp);
|
||||||
|
};
|
||||||
|
}, [drag, getSvgCoords]);
|
||||||
|
|
||||||
|
const resetLayout = useCallback(() => {
|
||||||
|
const initial = computeInitialLayout(servers, size);
|
||||||
|
setPositions(initial);
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(initial));
|
||||||
|
} catch {}
|
||||||
|
}, [servers, size]);
|
||||||
|
|
||||||
|
const onNodeMouseDown = useCallback(
|
||||||
|
(e, ip) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const p = getSvgCoords(e.clientX, e.clientY);
|
||||||
|
const pos = positions[ip];
|
||||||
|
if (!p || !pos) return;
|
||||||
|
setDrag({ nodeId: ip, startX: pos.x, startY: pos.y, mouseX: p.x, mouseY: p.y });
|
||||||
|
},
|
||||||
|
[getSvgCoords, positions]
|
||||||
|
);
|
||||||
|
|
||||||
|
const edgePingKey = (a, b) => [String(a), String(b)].sort().join(':');
|
||||||
|
|
||||||
|
const edgesWithPing = useMemo(() => {
|
||||||
|
return (connections || []).map((c) => {
|
||||||
|
const from = String(c.from);
|
||||||
|
const to = String(c.to);
|
||||||
|
const p1 = positions[from];
|
||||||
|
const p2 = positions[to];
|
||||||
|
const ekey = edgePingKey(from, to);
|
||||||
|
const ms = pingMap[ekey];
|
||||||
|
const pingStale = pingStaleMap[ekey] === true;
|
||||||
|
const pingLabel = typeof ms === 'number' ? `${ms} ms` : null;
|
||||||
|
const sk = speedKey(c.fromKey, c.toKey);
|
||||||
|
const speed = speedMap[sk];
|
||||||
|
const speedStale = speedStaleMap[sk] === true;
|
||||||
|
const speedLabel =
|
||||||
|
speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null)
|
||||||
|
? formatSpeedShort(speed.tcpDownloadBps, speed.tcpUploadBps)
|
||||||
|
: null;
|
||||||
|
return {
|
||||||
|
edgeKey: `${from}-${to}-${c.tunnelType || ''}`,
|
||||||
|
from,
|
||||||
|
to,
|
||||||
|
p1,
|
||||||
|
p2,
|
||||||
|
pingLabel,
|
||||||
|
speedLabel,
|
||||||
|
pingStale,
|
||||||
|
speedStale,
|
||||||
|
speed,
|
||||||
|
tunnelType: c.tunnelType,
|
||||||
|
raw: c,
|
||||||
|
};
|
||||||
|
}).filter((e) => e.p1 && e.p2);
|
||||||
|
}, [connections, positions, pingMap, speedMap, pingStaleMap, speedStaleMap]);
|
||||||
|
|
||||||
|
// Вычисляем старт/финиш и одну контрольную точку:
|
||||||
|
// рёбра выходят из карточек под 90°, дальше сразу плавная дуга без прямых сегментов.
|
||||||
|
const computeCurvePoints = useCallback((e) => {
|
||||||
|
const { p1, p2 } = e;
|
||||||
|
const dx = p2.x - p1.x;
|
||||||
|
const dy = p2.y - p1.y;
|
||||||
|
const adx = Math.abs(dx);
|
||||||
|
const ady = Math.abs(dy);
|
||||||
|
|
||||||
|
let sx = p1.x;
|
||||||
|
let sy = p1.y;
|
||||||
|
let ex = p2.x;
|
||||||
|
let ey = p2.y;
|
||||||
|
|
||||||
|
if (adx >= ady) {
|
||||||
|
const sign = dx >= 0 ? 1 : -1;
|
||||||
|
sx = p1.x + sign * (NODE_WIDTH / 2);
|
||||||
|
sy = p1.y;
|
||||||
|
ex = p2.x - sign * (NODE_WIDTH / 2);
|
||||||
|
ey = p2.y;
|
||||||
|
} else {
|
||||||
|
const sign = dy >= 0 ? 1 : -1;
|
||||||
|
sx = p1.x;
|
||||||
|
sy = p1.y + sign * (NODE_HEIGHT / 2);
|
||||||
|
ex = p2.x;
|
||||||
|
ey = p2.y - sign * (NODE_HEIGHT / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ddx = ex - sx;
|
||||||
|
const ddy = ey - sy;
|
||||||
|
const len = Math.hypot(ddx, ddy) || 1;
|
||||||
|
|
||||||
|
const mx = (sx + ex) / 2;
|
||||||
|
const my = (sy + ey) / 2;
|
||||||
|
const baseOffset = Math.min(40, len / 2);
|
||||||
|
const perpX = (-ddy / len) * baseOffset;
|
||||||
|
const perpY = (ddx / len) * baseOffset;
|
||||||
|
const cpx = mx + perpX;
|
||||||
|
const cpy = my + perpY;
|
||||||
|
const perpLen = Math.hypot(perpX, perpY) || 1;
|
||||||
|
const ux = perpX / perpLen;
|
||||||
|
const uy = perpY / perpLen;
|
||||||
|
|
||||||
|
return { sx, sy, ex, ey, cpx, cpy, mx, my, perpX: ux, perpY: uy };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const pathD = useCallback((e) => {
|
||||||
|
const { sx, sy, ex, ey, cpx, cpy } = computeCurvePoints(e);
|
||||||
|
return `M ${sx} ${sy} Q ${cpx} ${cpy} ${ex} ${ey}`;
|
||||||
|
}, [computeCurvePoints]);
|
||||||
|
|
||||||
|
/** Точка для подписи: середина ребра + смещение по перпендикуляру (чтобы подпись была у ребра, а не уезжала) */
|
||||||
|
const labelPlacement = useCallback((e, level = 0) => {
|
||||||
|
const { mx, my, perpX, perpY } = computeCurvePoints(e);
|
||||||
|
const baseOffset = 18;
|
||||||
|
const stepOffset = 26;
|
||||||
|
const x = mx + perpX * (baseOffset + level * stepOffset);
|
||||||
|
const y = my + perpY * (baseOffset + level * stepOffset);
|
||||||
|
return { x, y };
|
||||||
|
}, [computeCurvePoints]);
|
||||||
|
|
||||||
|
if (servers.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="network-map-unifi"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: 520,
|
||||||
|
minHeight: 400,
|
||||||
|
background: UNIFI_BG,
|
||||||
|
borderRadius: 12,
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'relative',
|
||||||
|
userSelect: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
ref={svgRef}
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
viewBox={`0 0 ${size.w} ${size.h}`}
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
style={{ display: 'block' }}
|
||||||
|
>
|
||||||
|
{/* Рёбра: зелёные кривые (стиль UNIFI — проводные соединения) */}
|
||||||
|
<g>
|
||||||
|
{(() => {
|
||||||
|
const used = [];
|
||||||
|
const LABEL_W = 100;
|
||||||
|
const LABEL_H = 18;
|
||||||
|
const LABEL_GAP = 6;
|
||||||
|
return edgesWithPing.map((e, idx) => {
|
||||||
|
const dimFactor =
|
||||||
|
hoveredEdgeKey && hoveredEdgeKey !== e.edgeKey ? 0.25 : 1;
|
||||||
|
const strokeWidth = hoveredEdgeKey === e.edgeKey ? 3.2 : 2.5;
|
||||||
|
return (
|
||||||
|
<g
|
||||||
|
key={e.edgeKey || `${e.from}-${e.to}-${idx}`}
|
||||||
|
onMouseEnter={() => setHoveredEdgeKey(e.edgeKey)}
|
||||||
|
onMouseLeave={() =>
|
||||||
|
setHoveredEdgeKey((prev) => (prev === e.edgeKey ? null : prev))
|
||||||
|
}
|
||||||
|
onClick={() => setSelectedEdge(e)}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d={pathD(e)}
|
||||||
|
fill="none"
|
||||||
|
stroke={UNIFI_GREEN}
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
|
strokeLinecap="round"
|
||||||
|
opacity={dimFactor}
|
||||||
|
/>
|
||||||
|
{(() => {
|
||||||
|
const labels = [
|
||||||
|
e.pingLabel ? { text: e.pingLabel, stale: e.pingStale } : null,
|
||||||
|
e.speedLabel ? { text: e.speedLabel, stale: e.speedStale } : null,
|
||||||
|
].filter(Boolean);
|
||||||
|
if (labels.length === 0) return null;
|
||||||
|
const totalH = labels.length * LABEL_H + (labels.length - 1) * LABEL_GAP;
|
||||||
|
const minDist = 70;
|
||||||
|
let level = 0;
|
||||||
|
let x; let y;
|
||||||
|
while (level < 10) {
|
||||||
|
const pos = labelPlacement(e, level);
|
||||||
|
x = pos.x;
|
||||||
|
y = pos.y;
|
||||||
|
const overlaps = used.some(
|
||||||
|
(p) => Math.hypot(p.x - x, p.y - y) < minDist
|
||||||
|
);
|
||||||
|
if (!overlaps) break;
|
||||||
|
level += 1;
|
||||||
|
}
|
||||||
|
used.push({ x, y });
|
||||||
|
|
||||||
|
const pad = 8;
|
||||||
|
const staleColor = '#f59e0b';
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
{labels.map((label, i) => {
|
||||||
|
const yy = y + i * (LABEL_H + LABEL_GAP) + LABEL_H / 2;
|
||||||
|
const isStale = label.stale === true;
|
||||||
|
const textWidth = label.text.length * 6;
|
||||||
|
const iconWidth = isStale ? 14 : 0;
|
||||||
|
const w = Math.max(LABEL_W, Math.min(textWidth + pad * 2 + iconWidth, 180));
|
||||||
|
const h = LABEL_H + 4;
|
||||||
|
const textX = x - (iconWidth / 2);
|
||||||
|
return (
|
||||||
|
<g key={i}>
|
||||||
|
<rect
|
||||||
|
x={x - w / 2}
|
||||||
|
y={yy - h / 2}
|
||||||
|
width={w}
|
||||||
|
height={h}
|
||||||
|
rx={4}
|
||||||
|
fill="rgba(15,23,42,0.92)"
|
||||||
|
stroke={isStale ? staleColor : UNIFI_GREEN}
|
||||||
|
strokeWidth={1}
|
||||||
|
strokeDasharray={isStale ? '2,2' : 'none'}
|
||||||
|
/>
|
||||||
|
{isStale && (
|
||||||
|
<circle
|
||||||
|
cx={x - w / 2 + 10}
|
||||||
|
cy={yy}
|
||||||
|
r={5}
|
||||||
|
fill={staleColor}
|
||||||
|
opacity={0.9}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<text
|
||||||
|
x={textX}
|
||||||
|
y={yy}
|
||||||
|
textAnchor="middle"
|
||||||
|
dominantBaseline="middle"
|
||||||
|
fill={isStale ? staleColor : UNIFI_GREEN}
|
||||||
|
fontSize={i === 0 ? 12 : 11}
|
||||||
|
fontWeight={600}
|
||||||
|
>
|
||||||
|
{label.text}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* Узлы: карточки серверов в стиле UNIFI (перетаскиваемые) */}
|
||||||
|
{servers.map((s) => {
|
||||||
|
const pos = positions[String(s.ip)];
|
||||||
|
if (!pos) return null;
|
||||||
|
const label = s.dns?.split('.')[0] || s.ip || '?';
|
||||||
|
const isDragging = drag?.nodeId === s.ip;
|
||||||
|
return (
|
||||||
|
<g
|
||||||
|
key={s.ip}
|
||||||
|
transform={`translate(${pos.x - NODE_WIDTH / 2}, ${pos.y - NODE_HEIGHT / 2})`}
|
||||||
|
onMouseDown={(e) => onNodeMouseDown(e, s.ip)}
|
||||||
|
style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
width={NODE_WIDTH}
|
||||||
|
height={NODE_HEIGHT}
|
||||||
|
rx={8}
|
||||||
|
ry={8}
|
||||||
|
fill={UNIFI_CARD_BG}
|
||||||
|
stroke={UNIFI_CARD_BORDER}
|
||||||
|
strokeWidth={1}
|
||||||
|
/>
|
||||||
|
<g transform={`translate(${NODE_WIDTH / 2}, ${NODE_HEIGHT / 2})`}>
|
||||||
|
{/* Флаг страны в левом верхнем углу карточки (картинка, т.к. эмодзи в SVG часто отображаются как буквы) */}
|
||||||
|
{s.country && (() => {
|
||||||
|
const cc = String(s.country).trim().toLowerCase();
|
||||||
|
if (cc.length !== 2) return null;
|
||||||
|
const flagW = 22;
|
||||||
|
const flagH = 16;
|
||||||
|
return (
|
||||||
|
<image
|
||||||
|
href={`${FLAG_CDN}/w40/${cc}.png`}
|
||||||
|
x={-NODE_WIDTH / 2 + 6}
|
||||||
|
y={-NODE_HEIGHT / 2 + 6}
|
||||||
|
width={flagW}
|
||||||
|
height={flagH}
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
style={{ pointerEvents: 'none' }}
|
||||||
|
className="network-map-node-flag"
|
||||||
|
>
|
||||||
|
<title>{s.country.toUpperCase()}</title>
|
||||||
|
</image>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
{/* Иконка сервера в стиле UNIFI: прямоугольник с «портами» */}
|
||||||
|
<g transform="translate(-10, -16)">
|
||||||
|
<rect x={2} y={0} width={16} height={12} rx={2} fill="none" stroke={UNIFI_GREEN} strokeWidth={1.5} />
|
||||||
|
<line x1={5} y1={4} x2={15} y2={4} stroke={UNIFI_GREEN} strokeWidth={1} opacity={0.8} />
|
||||||
|
<line x1={5} y1={8} x2={15} y2={8} stroke={UNIFI_GREEN} strokeWidth={1} opacity={0.8} />
|
||||||
|
</g>
|
||||||
|
<text
|
||||||
|
x={0}
|
||||||
|
y={8}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill={UNIFI_TEXT}
|
||||||
|
fontSize={12}
|
||||||
|
fontWeight={600}
|
||||||
|
>
|
||||||
|
{label.length > 12 ? label.slice(0, 11) + '…' : label}
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x={0}
|
||||||
|
y={22}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill={UNIFI_TEXT_MUTED}
|
||||||
|
fontSize={10}
|
||||||
|
>
|
||||||
|
{s.ip}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
{selectedEdge && (() => {
|
||||||
|
const fromServer = servers.find((s) => String(s.ip) === selectedEdge.from);
|
||||||
|
const toServer = servers.find((s) => String(s.ip) === selectedEdge.to);
|
||||||
|
const ekey = edgePingKey(selectedEdge.from, selectedEdge.to);
|
||||||
|
const pingMs = pingMap[ekey];
|
||||||
|
const pingStale = pingStaleMap[ekey] === true;
|
||||||
|
const sk = speedKey(selectedEdge.raw?.fromKey, selectedEdge.raw?.toKey);
|
||||||
|
const speed = speedMap[sk] ?? selectedEdge.speed;
|
||||||
|
const speedStale = speedStaleMap[sk] === true;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="network-map-edge-modal-backdrop"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
inset: 0,
|
||||||
|
background: 'rgba(15,23,42,0.55)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
zIndex: 50,
|
||||||
|
}}
|
||||||
|
onClick={() => setSelectedEdge(null)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="card shadow-lg"
|
||||||
|
style={{
|
||||||
|
minWidth: 360,
|
||||||
|
maxWidth: 520,
|
||||||
|
background: '#0f172a',
|
||||||
|
color: '#e5e7eb',
|
||||||
|
borderRadius: 12,
|
||||||
|
border: `1px solid ${UNIFI_CARD_BORDER}`,
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="card-header d-flex align-items-center justify-content-between">
|
||||||
|
<div className="fw-semibold">Детали соединения</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn-close btn-close-white"
|
||||||
|
aria-label="Закрыть"
|
||||||
|
onClick={() => setSelectedEdge(null)}
|
||||||
|
style={{ filter: 'invert(1)' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card-body" style={{ fontSize: 13 }}>
|
||||||
|
<div className="mb-2">
|
||||||
|
<div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
|
||||||
|
От
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>{fromServer?.dns || fromServer?.ip || selectedEdge.from}</strong>{' '}
|
||||||
|
<span className="text-muted">({fromServer?.ip || '—'})</span>{' '}
|
||||||
|
<span className="badge bg-blue-lt text-blue ms-1">
|
||||||
|
{String(fromServer?.type || '').toUpperCase() || 'SERVER'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
|
||||||
|
К
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>{toServer?.dns || toServer?.ip || selectedEdge.to}</strong>{' '}
|
||||||
|
<span className="text-muted">({toServer?.ip || '—'})</span>{' '}
|
||||||
|
<span className="badge bg-blue-lt text-blue ms-1">
|
||||||
|
{String(toServer?.type || '').toUpperCase() || 'SERVER'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
|
||||||
|
Туннель
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="badge bg-green-lt text-green me-2">
|
||||||
|
{selectedEdge.tunnelType || 'TUNNEL'}
|
||||||
|
</span>
|
||||||
|
{selectedEdge.raw?.internalFromTo && (
|
||||||
|
<span className="text-muted">
|
||||||
|
{selectedEdge.raw.internalToFrom} ⇄ {selectedEdge.raw.internalFromTo}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
|
||||||
|
Пинг
|
||||||
|
{pingStale && (
|
||||||
|
<span className="badge bg-warning text-dark ms-2" style={{ fontSize: 9 }}>
|
||||||
|
<IconClock size={10} className="me-1" />
|
||||||
|
Устаревшие данные
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{typeof pingMs === 'number' ? `${pingMs} ms` : 'нет данных'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null) && (
|
||||||
|
<div className="mb-1">
|
||||||
|
<div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
|
||||||
|
Скорость по туннелю
|
||||||
|
{speed.cached && (
|
||||||
|
<span className="ms-1 badge bg-secondary" style={{ fontSize: 10 }}>кеш</span>
|
||||||
|
)}
|
||||||
|
{speedStale && (
|
||||||
|
<span className="ms-1 badge bg-warning text-dark" style={{ fontSize: 9 }}>
|
||||||
|
<IconClock size={10} className="me-1" />
|
||||||
|
Устаревшие данные
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted">↓ Download </span>
|
||||||
|
{formatMbps(speed.tcpDownloadBps)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted">↑ Upload </span>
|
||||||
|
{formatMbps(speed.tcpUploadBps)}
|
||||||
|
</div>
|
||||||
|
{speed.durationSeconds != null && (
|
||||||
|
<div className="text-muted small mt-1">
|
||||||
|
Замер за {speed.durationSeconds} сек
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 12,
|
||||||
|
top: 12,
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="btn-group btn-group-sm">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn"
|
||||||
|
onClick={resetLayout}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(30,41,59,0.95)',
|
||||||
|
color: UNIFI_TEXT_MUTED,
|
||||||
|
border: `1px solid ${UNIFI_CARD_BORDER}`,
|
||||||
|
}}
|
||||||
|
title="Вернуть узлы в исходную раскладку"
|
||||||
|
>
|
||||||
|
<IconRefresh size={14} className="me-1" />
|
||||||
|
Сбросить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn"
|
||||||
|
onClick={() => {
|
||||||
|
const el = containerRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
el.requestFullscreen?.();
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen?.();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(30,41,59,0.95)',
|
||||||
|
color: UNIFI_TEXT_MUTED,
|
||||||
|
border: `1px solid ${UNIFI_CARD_BORDER}`,
|
||||||
|
borderLeft: 'none',
|
||||||
|
}}
|
||||||
|
title={isFullscreen ? 'Выйти из полноэкранного режима' : 'Открыть карту на весь экран'}
|
||||||
|
>
|
||||||
|
{isFullscreen ? <IconMinimize size={14} /> : <IconMaximize size={14} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,415 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import {
|
||||||
|
IconPlus,
|
||||||
|
IconEdit,
|
||||||
|
IconTrash,
|
||||||
|
IconDeviceFloppy,
|
||||||
|
IconCloud,
|
||||||
|
IconSearch,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import FormModal from './components/FormModal.jsx';
|
||||||
|
import FormField from './components/FormField.jsx';
|
||||||
|
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||||
|
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||||
|
import IconPicker from './components/IconPicker.jsx';
|
||||||
|
import { getIconById } from './lib/brandIcons.js';
|
||||||
|
|
||||||
|
const COLOR_OPTIONS = [
|
||||||
|
{ value: 'primary', label: 'Основной' },
|
||||||
|
{ value: 'blue', label: 'Синий' },
|
||||||
|
{ value: 'green', label: 'Зелёный' },
|
||||||
|
{ value: 'orange', label: 'Оранжевый' },
|
||||||
|
{ value: 'red', label: 'Красный' },
|
||||||
|
{ value: 'pink', label: 'Розовый' },
|
||||||
|
{ value: 'purple', label: 'Фиолетовый' },
|
||||||
|
{ value: 'cyan', label: 'Голубой' },
|
||||||
|
{ value: 'yellow', label: 'Жёлтый' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function slugId(name) {
|
||||||
|
const s = String(name || '').trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
|
||||||
|
return s || `svc-${Date.now()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PingServicesManager() {
|
||||||
|
const [items, setItems] = useState([]);
|
||||||
|
const [rawSettings, setRawSettings] = useState({});
|
||||||
|
const [etag, setEtag] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
|
||||||
|
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||||
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
|
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||||
|
const [itemToDelete, setItemToDelete] = useState(null);
|
||||||
|
|
||||||
|
const [newItem, setNewItem] = useState({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
host: '',
|
||||||
|
port: '443',
|
||||||
|
icon: 'IconBrandGoogle',
|
||||||
|
color: 'blue',
|
||||||
|
});
|
||||||
|
const [editingItem, setEditingItem] = useState(null);
|
||||||
|
const [editDraft, setEditDraft] = useState({ id: '', name: '', host: '', port: '443', icon: 'IconBrandGoogle', color: 'blue' });
|
||||||
|
|
||||||
|
const loadSettings = async (abortSignal) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const res = await api.get('/ui-settings', opts);
|
||||||
|
const data = res?.data || {};
|
||||||
|
setRawSettings(data);
|
||||||
|
setEtag(String(res?.headers?.etag || res?.headers?.ETag || ''));
|
||||||
|
const list = Array.isArray(data.pingServicesList) ? data.pingServicesList : [];
|
||||||
|
setItems(list.map((s) => ({
|
||||||
|
id: String(s?.id ?? '').trim() || slugId(s?.name),
|
||||||
|
name: String(s?.name ?? '').trim(),
|
||||||
|
host: String(s?.host ?? '').trim(),
|
||||||
|
port: Math.max(1, parseInt(s?.port, 10) || 443),
|
||||||
|
icon: typeof s?.icon === 'string' ? s.icon : 'IconWorld',
|
||||||
|
color: typeof s?.color === 'string' ? s.color : 'primary',
|
||||||
|
})).filter((s) => s.host));
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error(e);
|
||||||
|
setError('Не удалось загрузить настройки');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
loadSettings(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveSettings = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
const payloadToSave = {
|
||||||
|
...rawSettings,
|
||||||
|
pingServicesList: items.map((s) => ({
|
||||||
|
id: s.id,
|
||||||
|
name: s.name,
|
||||||
|
host: s.host,
|
||||||
|
port: s.port,
|
||||||
|
icon: s.icon,
|
||||||
|
color: s.color,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
let currentEtag = etag;
|
||||||
|
let res = await api.post('/ui-settings', { settings: payloadToSave, etag: currentEtag });
|
||||||
|
setRawSettings(payloadToSave);
|
||||||
|
setEtag(String(res?.data?.etag || currentEtag));
|
||||||
|
setSuccess('Список сервисов сохранён');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.response?.status === 412) {
|
||||||
|
try {
|
||||||
|
const fresh = await api.get('/ui-settings');
|
||||||
|
const freshData = fresh?.data || {};
|
||||||
|
const freshEtag = String(fresh?.headers?.etag || fresh?.headers?.ETag || '');
|
||||||
|
const retryPayload = { ...freshData, pingServicesList: payloadToSave.pingServicesList };
|
||||||
|
const retryRes = await api.post('/ui-settings', { settings: retryPayload, etag: freshEtag });
|
||||||
|
setRawSettings(retryPayload);
|
||||||
|
setEtag(String(retryRes?.data?.etag || freshEtag));
|
||||||
|
setSuccess('Список сервисов сохранён (настройки были обновлены)');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
} catch (retryErr) {
|
||||||
|
setError(retryErr?.response?.data?.message || 'Настройки изменились. Обновите страницу и сохраните снова.');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setError(e?.response?.data?.message || 'Не удалось сохранить');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
setNewItem({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
host: '',
|
||||||
|
port: '443',
|
||||||
|
icon: 'IconBrandGoogle',
|
||||||
|
color: 'blue',
|
||||||
|
});
|
||||||
|
setAddModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitAdd = () => {
|
||||||
|
const name = String(newItem.name || '').trim();
|
||||||
|
const host = String(newItem.host || '').trim();
|
||||||
|
if (!name) { setError('Укажите название'); return; }
|
||||||
|
if (!host) { setError('Укажите хост'); return; }
|
||||||
|
const id = newItem.id?.trim() || slugId(name);
|
||||||
|
if (items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
|
||||||
|
setError('');
|
||||||
|
setItems((prev) => [...prev, {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
host,
|
||||||
|
port: Math.max(1, parseInt(newItem.port, 10) || 443),
|
||||||
|
icon: newItem.icon || 'IconWorld',
|
||||||
|
color: newItem.color || 'primary',
|
||||||
|
}]);
|
||||||
|
setAddModalOpen(false);
|
||||||
|
setSuccess('Сервис добавлен. Нажмите «Сохранить».');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEdit = (item) => {
|
||||||
|
setEditingItem(item);
|
||||||
|
setEditDraft({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
host: item.host,
|
||||||
|
port: String(item.port),
|
||||||
|
icon: item.icon || 'IconWorld',
|
||||||
|
color: item.color || 'primary',
|
||||||
|
});
|
||||||
|
setEditModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitEdit = () => {
|
||||||
|
const name = String(editDraft.name || '').trim();
|
||||||
|
const host = String(editDraft.host || '').trim();
|
||||||
|
if (!name) { setError('Укажите название'); return; }
|
||||||
|
if (!host) { setError('Укажите хост'); return; }
|
||||||
|
const id = editDraft.id?.trim() || editingItem.id;
|
||||||
|
if (id !== editingItem.id && items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
|
||||||
|
setError('');
|
||||||
|
setItems((prev) => prev.map((i) => (i.id === editingItem.id ? {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
host,
|
||||||
|
port: Math.max(1, parseInt(editDraft.port, 10) || 443),
|
||||||
|
icon: editDraft.icon || 'IconWorld',
|
||||||
|
color: editDraft.color || 'primary',
|
||||||
|
} : i)));
|
||||||
|
setEditModalOpen(false);
|
||||||
|
setEditingItem(null);
|
||||||
|
setSuccess('Сервис обновлён. Нажмите «Сохранить».');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDelete = (item) => {
|
||||||
|
setItemToDelete(item);
|
||||||
|
setDeleteModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmDelete = () => {
|
||||||
|
if (itemToDelete) {
|
||||||
|
setItems((prev) => prev.filter((i) => i.id !== itemToDelete.id));
|
||||||
|
setDeleteModalOpen(false);
|
||||||
|
setItemToDelete(null);
|
||||||
|
setSuccess('Сервис удалён. Нажмите «Сохранить».');
|
||||||
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const filtered = items.filter((i) => {
|
||||||
|
const q = searchTerm.trim().toLowerCase();
|
||||||
|
if (!q) return true;
|
||||||
|
return (i.name || '').toLowerCase().includes(q) || (i.host || '').toLowerCase().includes(q) || (i.id || '').toLowerCase().includes(q);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Пинг сервисов"
|
||||||
|
icon={<IconCloud size={24} />}
|
||||||
|
actions={(
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={openAdd}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<IconPlus size={18} className="me-1" />
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={saveSettings}
|
||||||
|
disabled={saving || loading}
|
||||||
|
>
|
||||||
|
{saving && <span className="spinner-border spinner-border-sm me-2" />}
|
||||||
|
<IconDeviceFloppy size={18} className="me-1" />
|
||||||
|
Сохранить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{error && <ErrorAlert message={error} onClose={() => setError('')} onRetry={loadSettings} />}
|
||||||
|
{success && (
|
||||||
|
<div className="alert alert-success alert-dismissible">
|
||||||
|
{success}
|
||||||
|
<button type="button" className="btn-close" onClick={() => setSuccess('')} aria-label="Закрыть" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header d-flex align-items-center gap-2 flex-wrap">
|
||||||
|
<div className="input-group input-group-flat" style={{ maxWidth: 280 }}>
|
||||||
|
<span className="input-group-text">
|
||||||
|
<IconSearch size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Поиск по названию, хосту, ID..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-muted small ms-2">
|
||||||
|
{filtered.length} из {items.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-vcenter card-table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: 56 }}>Иконка</th>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Название</th>
|
||||||
|
<th>Хост</th>
|
||||||
|
<th>Порт</th>
|
||||||
|
<th>Цвет</th>
|
||||||
|
<th className="w-1">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} className="text-center py-4 text-muted">Загрузка...</td>
|
||||||
|
</tr>
|
||||||
|
) : filtered.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} className="text-center py-4 text-muted">
|
||||||
|
Нет сервисов. Нажмите «Добавить» или сохраните список — на главной будут использоваться сервисы по умолчанию.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
filtered.map((item) => {
|
||||||
|
const iconInfo = getIconById(item.icon);
|
||||||
|
return (
|
||||||
|
<tr key={item.id}>
|
||||||
|
<td>
|
||||||
|
<span className={`avatar avatar-sm bg-${item.color}-lt text-${item.color} rounded d-inline-flex align-items-center justify-content-center`}>
|
||||||
|
<iconInfo.Icon size={18} stroke={1.5} />
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><code className="small">{item.id}</code></td>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td><code className="small">{item.host}</code></td>
|
||||||
|
<td>{item.port}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`badge bg-${item.color}-lt text-${item.color}`}>{item.color}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="btn-list">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-outline-primary"
|
||||||
|
onClick={() => openEdit(item)}
|
||||||
|
>
|
||||||
|
<IconEdit size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-outline-danger"
|
||||||
|
onClick={() => openDelete(item)}
|
||||||
|
>
|
||||||
|
<IconTrash size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormModal
|
||||||
|
show={addModalOpen}
|
||||||
|
onClose={() => setAddModalOpen(false)}
|
||||||
|
onSubmit={submitAdd}
|
||||||
|
title="Добавить сервис для пинга"
|
||||||
|
submitLabel="Добавить"
|
||||||
|
>
|
||||||
|
<FormField label="Название" name="name" value={newItem.name} onChange={(v) => setNewItem((p) => ({ ...p, name: v }))} placeholder="Google" />
|
||||||
|
<FormField label="Хост (IP или домен)" name="host" value={newItem.host} onChange={(v) => setNewItem((p) => ({ ...p, host: v }))} placeholder="8.8.8.8" />
|
||||||
|
<FormField label="Порт" name="port" type="number" value={newItem.port} onChange={(v) => setNewItem((p) => ({ ...p, port: v }))} min={1} max={65535} />
|
||||||
|
<IconPicker value={newItem.icon} onChange={(id) => setNewItem((p) => ({ ...p, icon: id }))} />
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label small">Цвет</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
value={newItem.color}
|
||||||
|
onChange={(e) => setNewItem((p) => ({ ...p, color: e.target.value }))}
|
||||||
|
>
|
||||||
|
{COLOR_OPTIONS.map((o) => (
|
||||||
|
<option key={o.value} value={o.value}>{o.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<FormField label="ID (необязательно)" name="id" value={newItem.id} onChange={(v) => setNewItem((p) => ({ ...p, id: v }))} placeholder="auto из названия" helpText="Уникальный ключ. Пусто — из названия." />
|
||||||
|
</FormModal>
|
||||||
|
|
||||||
|
<FormModal
|
||||||
|
show={editModalOpen}
|
||||||
|
onClose={() => { setEditModalOpen(false); setEditingItem(null); }}
|
||||||
|
onSubmit={submitEdit}
|
||||||
|
title="Редактировать сервис"
|
||||||
|
>
|
||||||
|
<FormField label="ID" name="id" value={editDraft.id} onChange={(v) => setEditDraft((p) => ({ ...p, id: v }))} />
|
||||||
|
<FormField label="Название" name="name" value={editDraft.name} onChange={(v) => setEditDraft((p) => ({ ...p, name: v }))} />
|
||||||
|
<FormField label="Хост" name="host" value={editDraft.host} onChange={(v) => setEditDraft((p) => ({ ...p, host: v }))} />
|
||||||
|
<FormField label="Порт" name="port" type="number" value={editDraft.port} onChange={(v) => setEditDraft((p) => ({ ...p, port: v }))} min={1} max={65535} />
|
||||||
|
<IconPicker value={editDraft.icon} onChange={(id) => setEditDraft((p) => ({ ...p, icon: id }))} />
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label small">Цвет</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
value={editDraft.color}
|
||||||
|
onChange={(e) => setEditDraft((p) => ({ ...p, color: e.target.value }))}
|
||||||
|
>
|
||||||
|
{COLOR_OPTIONS.map((o) => (
|
||||||
|
<option key={o.value} value={o.value}>{o.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</FormModal>
|
||||||
|
|
||||||
|
<ConfirmModal
|
||||||
|
show={deleteModalOpen}
|
||||||
|
title="Удалить сервис?"
|
||||||
|
message={itemToDelete ? `Сервис «${itemToDelete.name}» (${itemToDelete.host}) будет удалён из списка.` : ''}
|
||||||
|
confirmLabel="Удалить"
|
||||||
|
variant="danger"
|
||||||
|
onConfirm={confirmDelete}
|
||||||
|
onClose={() => { setDeleteModalOpen(false); setItemToDelete(null); }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,241 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import {
|
||||||
|
IconServer,
|
||||||
|
IconRefresh,
|
||||||
|
IconChartBar,
|
||||||
|
IconAlertCircle,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
|
||||||
|
function formatBytes(bytes) {
|
||||||
|
if (bytes == null || bytes === 0) return '0 B';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Цвет прогресс-бара по проценту: зелёный / жёлтый / красный */
|
||||||
|
function progressVariant(percent) {
|
||||||
|
if (percent == null) return 'secondary';
|
||||||
|
if (percent >= 90) return 'danger';
|
||||||
|
if (percent >= 70) return 'warning';
|
||||||
|
return 'success';
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Один KPI-блок: заголовок, значение, прогресс-бар (как на референсной карточке) */
|
||||||
|
function KpiBlock({ label, value, percent, variant }) {
|
||||||
|
const barVariant = variant || progressVariant(percent);
|
||||||
|
return (
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="text-uppercase small fw-semibold text-secondary mb-1">{label}</div>
|
||||||
|
<div className="d-flex align-items-baseline gap-2 flex-wrap">
|
||||||
|
<span className="h4 mb-0 fw-bold">{value}</span>
|
||||||
|
{percent != null && (
|
||||||
|
<span className={`small fw-medium text-${barVariant}`}>{percent}%</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{percent != null && (
|
||||||
|
<div className="progress progress-sm mt-1" style={{ height: 6 }}>
|
||||||
|
<div
|
||||||
|
className={`progress-bar bg-${barVariant}`}
|
||||||
|
role="progressbar"
|
||||||
|
style={{ width: `${Math.min(100, percent)}%` }}
|
||||||
|
aria-valuenow={percent}
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={100}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Карточка одного роутера: иконка перед названием, сводка, KPI (RAM, CPU, HDD) */
|
||||||
|
function RouterResourceCard({ router }) {
|
||||||
|
const { name, host, error, resource } = router;
|
||||||
|
const hasResource = resource && !error;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card rounded-3 shadow-sm border-0 overflow-hidden h-100">
|
||||||
|
<div className="card-body p-4">
|
||||||
|
<div className="d-flex align-items-center mb-3">
|
||||||
|
<span className="avatar avatar-lg bg-primary-lt text-primary rounded-3 me-3 flex-shrink-0">
|
||||||
|
<IconServer size={28} />
|
||||||
|
</span>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<h3 className="h4 fw-bold mb-0 text-body text-truncate">
|
||||||
|
{name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-secondary small mb-0 mt-1">
|
||||||
|
{host}
|
||||||
|
{resource?.version && (
|
||||||
|
<span className="ms-1"> · RouterOS {resource.version}</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
|
||||||
|
<IconAlertCircle size={20} className="me-2 flex-shrink-0" />
|
||||||
|
<span className="small">{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasResource && (
|
||||||
|
<div className="row g-3">
|
||||||
|
{/* RAM */}
|
||||||
|
<div className="col-12 col-md-4">
|
||||||
|
<KpiBlock
|
||||||
|
label="RAM"
|
||||||
|
value={
|
||||||
|
resource.usedMemory != null && resource.totalMemory != null
|
||||||
|
? `${formatBytes(resource.usedMemory)} / ${formatBytes(resource.totalMemory)}`
|
||||||
|
: '—'
|
||||||
|
}
|
||||||
|
percent={resource.memoryUsagePercent}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* CPU */}
|
||||||
|
<div className="col-12 col-md-4">
|
||||||
|
<KpiBlock
|
||||||
|
label="CPU"
|
||||||
|
value={
|
||||||
|
resource.cpuLoad != null
|
||||||
|
? `${resource.cpuLoad}%`
|
||||||
|
: '—'
|
||||||
|
}
|
||||||
|
percent={resource.cpuLoad}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* HDD */}
|
||||||
|
<div className="col-12 col-md-4">
|
||||||
|
<KpiBlock
|
||||||
|
label="HDD"
|
||||||
|
value={
|
||||||
|
resource.usedHddSpace != null && resource.totalHddSpace != null
|
||||||
|
? `${formatBytes(resource.usedHddSpace)} / ${formatBytes(resource.totalHddSpace)}`
|
||||||
|
: resource.totalHddSpace != null
|
||||||
|
? formatBytes(resource.totalHddSpace)
|
||||||
|
: '—'
|
||||||
|
}
|
||||||
|
percent={resource.hddUsagePercent}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasResource && (resource.boardName || resource.uptime) && (
|
||||||
|
<div className="mt-2 pt-2 border-top small text-muted">
|
||||||
|
{resource.boardName && <span>{resource.boardName}</span>}
|
||||||
|
{resource.uptime && (
|
||||||
|
<span className="ms-2"> · Uptime: {resource.uptime}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ResourceStatsPage() {
|
||||||
|
const [routers, setRouters] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
const fetchStats = useCallback(async (abortSignal) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const res = await api.get('/resources/stats', opts);
|
||||||
|
const data = res?.data;
|
||||||
|
setRouters(Array.isArray(data?.routers) ? data.routers : []);
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить статистику');
|
||||||
|
// Не очищаем список — пользователь видит старые данные и сообщение об ошибке
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchStats(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [fetchStats]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-body">
|
||||||
|
<PageHeader
|
||||||
|
title="Статистика ресурсов"
|
||||||
|
pretitle="Роутеры"
|
||||||
|
icon={<IconChartBar size={28} />}
|
||||||
|
meta="Потребление RAM, CPU и HDD по каждому роутеру (MikroTik)"
|
||||||
|
actions={
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={() => fetchStats()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<IconRefresh size={18} className={loading ? 'spin' : ''} />
|
||||||
|
<span className="ms-1">Обновить</span>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger d-flex align-items-center">
|
||||||
|
<IconAlertCircle size={24} className="me-2" />
|
||||||
|
<span>{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading && routers.length === 0 ? (
|
||||||
|
<div className="row">
|
||||||
|
{[1, 2, 3].map((i) => (
|
||||||
|
<div key={i} className="col-12 col-lg-6 col-xl-4 mb-4">
|
||||||
|
<div className="card rounded-3 border-0 placeholder-glow">
|
||||||
|
<div className="card-body p-4">
|
||||||
|
<div className="placeholder col-6 mb-2" />
|
||||||
|
<div className="placeholder col-8 mb-3" />
|
||||||
|
<div className="placeholder col-12" style={{ height: 60 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : routers.length === 0 ? (
|
||||||
|
<div className="card rounded-3 border-0">
|
||||||
|
<div className="card-body text-center py-5 text-muted">
|
||||||
|
<IconServer size={48} className="mb-2 opacity-50" />
|
||||||
|
<p className="mb-0">Нет роутеров с настроенным MikroTik API (jumphost/home).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="row">
|
||||||
|
{routers.map((router) => (
|
||||||
|
<div key={router.serverId || router.name} className="col-12 col-lg-6 col-xl-4 mb-4">
|
||||||
|
<RouterResourceCard router={router} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
.spin {
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+885
-1694
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,391 @@
|
|||||||
|
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import {
|
||||||
|
IconChartPie,
|
||||||
|
IconRefresh,
|
||||||
|
IconServer,
|
||||||
|
IconAlertCircle,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import {
|
||||||
|
PieChart,
|
||||||
|
Pie,
|
||||||
|
Cell,
|
||||||
|
ResponsiveContainer,
|
||||||
|
Tooltip,
|
||||||
|
} from 'recharts';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
|
||||||
|
/** Палитра в стиле UniFi: зелёные, жёлтые, оранжевые, красные, фиолетовые, серые */
|
||||||
|
const CHART_COLORS = [
|
||||||
|
'#2fb344', '#5eba00', '#94c748', '#fab005', '#fd7e14', '#f76707',
|
||||||
|
'#e64980', '#ae3ec9', '#7950f2', '#5c7cfa', '#748cab', '#868e96',
|
||||||
|
'#adb5bd', '#ced4da', '#206bc4', '#20c997',
|
||||||
|
];
|
||||||
|
|
||||||
|
function formatBytes(bytes) {
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DONUT_SIZE = 200;
|
||||||
|
const DONUT_OUTER = 88;
|
||||||
|
const DONUT_INNER = 52;
|
||||||
|
|
||||||
|
function JumphostCard({ jumphost }) {
|
||||||
|
const { name, host, error, interfaces } = jumphost;
|
||||||
|
const hasData = Array.isArray(interfaces) && interfaces.length > 0;
|
||||||
|
const totalBytes = hasData ? interfaces.reduce((acc, i) => acc + (i.totalBytes || 0), 0) : 0;
|
||||||
|
const chartData = hasData
|
||||||
|
? interfaces
|
||||||
|
.filter((i) => (i.totalBytes || 0) > 0)
|
||||||
|
.map((i, idx) => ({
|
||||||
|
name: i.name,
|
||||||
|
value: i.totalBytes,
|
||||||
|
rxBytes: i.rxBytes,
|
||||||
|
txBytes: i.txBytes,
|
||||||
|
fill: CHART_COLORS[idx % CHART_COLORS.length],
|
||||||
|
}))
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-header d-flex align-items-center">
|
||||||
|
<span className="avatar avatar-sm me-2 bg-blue-lt text-blue">
|
||||||
|
<IconServer size={18} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1 min-w-0">
|
||||||
|
<h3 className="card-title mb-0 text-truncate" title={name}>
|
||||||
|
{name || host || 'Jumphost'}
|
||||||
|
</h3>
|
||||||
|
{host && (
|
||||||
|
<div className="text-muted small text-truncate" title={host}>
|
||||||
|
{host}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-warning py-2 mb-0 d-flex align-items-center">
|
||||||
|
<IconAlertCircle className="me-2 flex-shrink-0" size={18} />
|
||||||
|
<span className="small">{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!error && !hasData && (
|
||||||
|
<div className="text-muted text-center py-4 small">
|
||||||
|
Нет данных по интерфейсам
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!error && hasData && chartData.length === 0 && (
|
||||||
|
<div className="text-muted text-center py-4 small">
|
||||||
|
Все счётчики нулевые
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!error && chartData.length > 0 && (
|
||||||
|
<div className="traffic-donut-wrapper d-flex flex-wrap align-items-start gap-3">
|
||||||
|
<div
|
||||||
|
className="position-relative flex-shrink-0"
|
||||||
|
style={{ width: DONUT_SIZE, height: DONUT_SIZE }}
|
||||||
|
>
|
||||||
|
<ResponsiveContainer width={DONUT_SIZE} height={DONUT_SIZE}>
|
||||||
|
<PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
|
||||||
|
<Pie
|
||||||
|
data={chartData}
|
||||||
|
dataKey="value"
|
||||||
|
nameKey="name"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
innerRadius={DONUT_INNER}
|
||||||
|
outerRadius={DONUT_OUTER}
|
||||||
|
paddingAngle={0}
|
||||||
|
stroke="none"
|
||||||
|
>
|
||||||
|
{chartData.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={entry.fill} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
formatter={(value) => formatBytes(value)}
|
||||||
|
contentStyle={{ fontSize: '12px' }}
|
||||||
|
labelFormatter={(name, payload) => {
|
||||||
|
const p = payload?.[0];
|
||||||
|
if (!p) return name;
|
||||||
|
return `${name} — RX: ${formatBytes(p.rxBytes || 0)}, TX: ${formatBytes(p.txBytes || 0)}`;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
<div
|
||||||
|
className="position-absolute top-50 start-50 translate-middle text-center text-body"
|
||||||
|
style={{ pointerEvents: 'none', width: '60%' }}
|
||||||
|
>
|
||||||
|
<div className="fw-bold lh-1" style={{ fontSize: '1.1rem' }}>
|
||||||
|
{formatBytes(totalBytes)}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small mt-1" style={{ fontSize: '0.65rem', letterSpacing: '0.02em' }}>
|
||||||
|
TRAFFIC
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="traffic-legend flex-grow-1 min-w-0" style={{ maxWidth: 240 }}>
|
||||||
|
{chartData.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.name}
|
||||||
|
className="d-flex align-items-center mb-2 small"
|
||||||
|
title={`${item.name}: RX ${formatBytes(item.rxBytes)}, TX ${formatBytes(item.txBytes)}`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="flex-shrink-0 rounded"
|
||||||
|
style={{
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
backgroundColor: item.fill,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="ms-2 text-truncate">
|
||||||
|
{item.name} - {formatBytes(item.value)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ключ jumphost для сопоставления с настройками (как в SettingsPage) */
|
||||||
|
function getJumphostKey(jh) {
|
||||||
|
return String(jh?.serverId ?? jh?.host ?? jh?.name ?? '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Множество выбранных пар (serverKey + interfaceName). Пустое = учитывать все интерфейсы. */
|
||||||
|
function getTrafficInterfaceFilter(settings) {
|
||||||
|
const raw = settings?.trafficInterfaces;
|
||||||
|
if (!raw || !Array.isArray(raw)) return null;
|
||||||
|
const pairs = raw
|
||||||
|
.filter((p) => p && (p.serverKey != null || p.serverId != null) && (p.interfaceName != null || p.name != null))
|
||||||
|
.map((p) => `${String(p.serverKey ?? p.serverId ?? '')}\n${String(p.interfaceName ?? p.name ?? '')}`);
|
||||||
|
return pairs.length > 0 ? new Set(pairs) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TrafficDashboard() {
|
||||||
|
const [jumphosts, setJumphosts] = useState([]);
|
||||||
|
const [uiSettings, setUiSettings] = useState({});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
const interfaceFilter = getTrafficInterfaceFilter(uiSettings);
|
||||||
|
|
||||||
|
const fetchStats = useCallback(async (abortSignal) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const [statsRes, settingsRes] = await Promise.all([
|
||||||
|
api.get('/traffic/interface-stats', opts),
|
||||||
|
api.get('/ui-settings', opts).catch(() => ({ data: {} })),
|
||||||
|
]);
|
||||||
|
const data = statsRes?.data || {};
|
||||||
|
setJumphosts(Array.isArray(data?.jumphosts) ? data.jumphosts : []);
|
||||||
|
setUiSettings(settingsRes?.data || {});
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
console.error('Traffic stats:', e);
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить статистику');
|
||||||
|
setJumphosts([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchStats(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [fetchStats]);
|
||||||
|
|
||||||
|
const filteredJumphosts = useMemo(() => {
|
||||||
|
if (!interfaceFilter) return jumphosts;
|
||||||
|
return jumphosts.map((jh) => {
|
||||||
|
const sk = getJumphostKey(jh);
|
||||||
|
return {
|
||||||
|
...jh,
|
||||||
|
interfaces: Array.isArray(jh.interfaces)
|
||||||
|
? jh.interfaces.filter(
|
||||||
|
(i) =>
|
||||||
|
i.name != null &&
|
||||||
|
interfaceFilter.has(`${sk}\n${String(i.name).trim()}`)
|
||||||
|
)
|
||||||
|
: [],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, [jumphosts, interfaceFilter]);
|
||||||
|
|
||||||
|
// Суммарная статистика по всем отображаемым системам (без ошибок, с данными)
|
||||||
|
const summary = (() => {
|
||||||
|
const withData = (filteredJumphosts || []).filter((jh) => !jh.error && Array.isArray(jh.interfaces) && jh.interfaces.length > 0);
|
||||||
|
let totalBytes = 0;
|
||||||
|
let totalRx = 0;
|
||||||
|
let totalTx = 0;
|
||||||
|
const byJumphost = [];
|
||||||
|
for (const jh of withData) {
|
||||||
|
let jhTotal = 0;
|
||||||
|
let jhRx = 0;
|
||||||
|
let jhTx = 0;
|
||||||
|
for (const i of jh.interfaces) {
|
||||||
|
jhTotal += i.totalBytes || 0;
|
||||||
|
jhRx += i.rxBytes || 0;
|
||||||
|
jhTx += i.txBytes || 0;
|
||||||
|
}
|
||||||
|
totalBytes += jhTotal;
|
||||||
|
totalRx += jhRx;
|
||||||
|
totalTx += jhTx;
|
||||||
|
if (jhTotal > 0) {
|
||||||
|
byJumphost.push({
|
||||||
|
name: jh.name || jh.host || 'Jumphost',
|
||||||
|
value: jhTotal,
|
||||||
|
fill: CHART_COLORS[byJumphost.length % CHART_COLORS.length],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
totalBytes,
|
||||||
|
totalRx,
|
||||||
|
totalTx,
|
||||||
|
systemsCount: withData.length,
|
||||||
|
byJumphost,
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
const hasSummary = summary.systemsCount > 0 && summary.totalBytes > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
title="Расход трафика"
|
||||||
|
icon={<IconChartPie size={24} />}
|
||||||
|
meta="Статистика по интерфейсам MikroTik RouterOS (jumphost)"
|
||||||
|
actions={
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={() => fetchStats()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<IconRefresh className={loading ? 'spin me-2' : 'me-2'} size={18} />
|
||||||
|
{loading ? 'Загрузка…' : 'Обновить'}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger d-flex align-items-center">
|
||||||
|
<IconAlertCircle className="me-2" size={20} />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{loading && jumphosts.length === 0 && !error && (
|
||||||
|
<div className="text-center py-5 text-muted">
|
||||||
|
Загрузка статистики с роутеров…
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && !error && jumphosts.length === 0 && (
|
||||||
|
<div className="alert alert-info">
|
||||||
|
Нет jumphost-серверов с настроенным MikroTik API. Добавьте серверы типа «Jumphost» и укажите учётные данные RouterOS.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && jumphosts.length > 0 && (
|
||||||
|
<>
|
||||||
|
{hasSummary && (
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title mb-0">Суммарно по всем системам</h3>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex flex-wrap align-items-stretch gap-4">
|
||||||
|
<div className="position-relative flex-shrink-0" style={{ width: 220, height: 220 }}>
|
||||||
|
<ResponsiveContainer width={220} height={220}>
|
||||||
|
<PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
|
||||||
|
<Pie
|
||||||
|
data={summary.byJumphost}
|
||||||
|
dataKey="value"
|
||||||
|
nameKey="name"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
innerRadius={58}
|
||||||
|
outerRadius={98}
|
||||||
|
paddingAngle={0}
|
||||||
|
stroke="none"
|
||||||
|
>
|
||||||
|
{summary.byJumphost.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={entry.fill} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip formatter={(value) => formatBytes(value)} />
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
<div
|
||||||
|
className="position-absolute top-50 start-50 translate-middle text-center text-body"
|
||||||
|
style={{ pointerEvents: 'none', width: '55%' }}
|
||||||
|
>
|
||||||
|
<div className="fw-bold lh-1" style={{ fontSize: '1.35rem' }}>
|
||||||
|
{formatBytes(summary.totalBytes)}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small mt-1" style={{ fontSize: '0.7rem', letterSpacing: '0.02em' }}>
|
||||||
|
TRAFFIC
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-wrap gap-4 align-items-center flex-grow-1">
|
||||||
|
<div className="traffic-summary-legend">
|
||||||
|
{summary.byJumphost.map((item) => (
|
||||||
|
<div key={item.name} className="d-flex align-items-center mb-2 small">
|
||||||
|
<span
|
||||||
|
className="flex-shrink-0 rounded"
|
||||||
|
style={{ width: 10, height: 10, backgroundColor: item.fill }}
|
||||||
|
/>
|
||||||
|
<span className="ms-2">
|
||||||
|
{item.name} - {formatBytes(item.value)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-wrap gap-3 ms-md-auto">
|
||||||
|
<div className="px-3 py-2 rounded bg-blue-lt text-blue">
|
||||||
|
<span className="d-block small text-muted">Всего трафика</span>
|
||||||
|
<span className="fw-bold">{formatBytes(summary.totalBytes)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-2 rounded bg-green-lt text-green">
|
||||||
|
<span className="d-block small text-muted">RX</span>
|
||||||
|
<span className="fw-bold">{formatBytes(summary.totalRx)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-2 rounded bg-orange-lt text-orange">
|
||||||
|
<span className="d-block small text-muted">TX</span>
|
||||||
|
<span className="fw-bold">{formatBytes(summary.totalTx)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-2 rounded bg-azure-lt text-azure">
|
||||||
|
<span className="d-block small text-muted">Систем</span>
|
||||||
|
<span className="fw-bold">{summary.systemsCount}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="row row-cards g-3">
|
||||||
|
{filteredJumphosts.map((jh) => (
|
||||||
|
<div key={jh.serverId || jh.host || jh.name} className="col-12 col-md-6 col-xl-4">
|
||||||
|
<JumphostCard jumphost={jh} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,473 @@
|
|||||||
|
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||||||
|
import api from './lib/api.js';
|
||||||
|
import {
|
||||||
|
IconClock,
|
||||||
|
IconRefresh,
|
||||||
|
IconServer,
|
||||||
|
IconCircleCheck,
|
||||||
|
IconCircleX,
|
||||||
|
IconChartLine,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import {
|
||||||
|
AreaChart,
|
||||||
|
Area,
|
||||||
|
BarChart,
|
||||||
|
Bar,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
} from 'recharts';
|
||||||
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
import { formatRelative } from './lib/datetime.js';
|
||||||
|
|
||||||
|
const DEFAULT_CHECK_INTERVAL_SEC = 120;
|
||||||
|
const PARALLEL_CHECKS = 4; // количество одновременных проверок
|
||||||
|
const HISTORY_MAX = 500;
|
||||||
|
const STORAGE_KEY = 'uptime-monitor-history';
|
||||||
|
|
||||||
|
function loadHistoryFromStorage() {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (!raw) return {};
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
if (parsed && typeof parsed === 'object') return parsed;
|
||||||
|
} catch (_) {}
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveHistoryToStorage(historyMap) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(historyMap));
|
||||||
|
} catch (_) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Группировка истории по дням: массив { day, dayLabel, incidents } */
|
||||||
|
function historyToIncidentsByDay(history) {
|
||||||
|
if (!Array.isArray(history) || history.length === 0) return [];
|
||||||
|
const byDay = new Map(); // dayKey -> count of down checks
|
||||||
|
history.forEach(({ ts, ok }) => {
|
||||||
|
if (ok) return;
|
||||||
|
const d = new Date(ts);
|
||||||
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||||
|
byDay.set(key, (byDay.get(key) || 0) + 1);
|
||||||
|
});
|
||||||
|
return Array.from(byDay.entries())
|
||||||
|
.map(([day, incidents]) => ({
|
||||||
|
day,
|
||||||
|
dayLabel: new Date(day + 'T12:00:00').toLocaleDateString('ru-RU', {
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
}),
|
||||||
|
incidents,
|
||||||
|
}))
|
||||||
|
.sort((a, b) => a.day.localeCompare(b.day));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** История в точки для графика задержек: { time, ts, ms } */
|
||||||
|
function historyToResponseTimeData(history) {
|
||||||
|
if (!Array.isArray(history) || history.length === 0) return [];
|
||||||
|
return history.map(({ ts, ok, ms }) => ({
|
||||||
|
ts,
|
||||||
|
time: new Date(ts).toLocaleString('ru-RU', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
}),
|
||||||
|
ms: ok && ms != null ? Math.round(ms) : null,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function UptimeMonitorPage() {
|
||||||
|
const [servers, setServers] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [checking, setChecking] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [statusMap, setStatusMap] = useState({});
|
||||||
|
/** По serverId: массив { ts, ok, ms } */
|
||||||
|
const [historyMap, setHistoryMap] = useState(loadHistoryFromStorage);
|
||||||
|
const [selectedServerId, setSelectedServerId] = useState(null);
|
||||||
|
const [checkIntervalSeconds, setCheckIntervalSeconds] = useState(DEFAULT_CHECK_INTERVAL_SEC);
|
||||||
|
/** serverId, по которым сейчас идёт проверка — показываем «Проверка…» в строке (до PARALLEL_CHECKS одновременно) */
|
||||||
|
const [currentCheckingServerIds, setCurrentCheckingServerIds] = useState([]);
|
||||||
|
const intervalRef = useRef(null);
|
||||||
|
const checkingRef = useRef(false);
|
||||||
|
|
||||||
|
const jumphosts = useMemo(
|
||||||
|
() =>
|
||||||
|
servers.filter((s) =>
|
||||||
|
['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
|
||||||
|
),
|
||||||
|
[servers]
|
||||||
|
);
|
||||||
|
|
||||||
|
const controllerRef = useRef(null);
|
||||||
|
|
||||||
|
const fetchServers = useCallback(async (abortSignal) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
|
try {
|
||||||
|
const [serversRes, settingsRes] = await Promise.all([
|
||||||
|
api.get('/servers', opts),
|
||||||
|
api.get('/ui-settings', opts).catch(() => ({ data: {} })),
|
||||||
|
]);
|
||||||
|
const data = serversRes?.data;
|
||||||
|
setServers(Array.isArray(data) ? data : []);
|
||||||
|
const ui = settingsRes?.data || {};
|
||||||
|
const interval = Math.max(30, Math.min(86400, parseInt(ui.uptimeMonitorIntervalSeconds, 10) || DEFAULT_CHECK_INTERVAL_SEC));
|
||||||
|
setCheckIntervalSeconds(interval);
|
||||||
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить серверы');
|
||||||
|
setServers([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const c = new AbortController();
|
||||||
|
controllerRef.current = c;
|
||||||
|
fetchServers(c.signal);
|
||||||
|
return () => {
|
||||||
|
c.abort();
|
||||||
|
controllerRef.current = null;
|
||||||
|
};
|
||||||
|
}, [fetchServers]);
|
||||||
|
|
||||||
|
// При заходе на страницу подставляем кеш — сразу видны последние проверки
|
||||||
|
useEffect(() => {
|
||||||
|
if (jumphosts.length === 0) return;
|
||||||
|
const signal = controllerRef.current?.signal;
|
||||||
|
if (!signal) return;
|
||||||
|
api.get('/uptime/cache', { signal })
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (data?.results && typeof data.results === 'object' && Object.keys(data.results).length > 0) {
|
||||||
|
setStatusMap((prev) => ({ ...prev, ...data.results }));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
|
});
|
||||||
|
}, [jumphosts]);
|
||||||
|
|
||||||
|
const checkIntervalMs = checkIntervalSeconds * 1000;
|
||||||
|
|
||||||
|
/** Параллельный запуск проверок (до PARALLEL_CHECKS одновременно), результат по мере готовности */
|
||||||
|
const runChecks = useCallback(async () => {
|
||||||
|
if (jumphosts.length === 0) return;
|
||||||
|
if (checkingRef.current) return;
|
||||||
|
checkingRef.current = true;
|
||||||
|
setChecking(true);
|
||||||
|
setCurrentCheckingServerIds([]);
|
||||||
|
let index = 0;
|
||||||
|
const getNext = () => {
|
||||||
|
const i = index++;
|
||||||
|
return i < jumphosts.length ? jumphosts[i] : null;
|
||||||
|
};
|
||||||
|
const checkOne = async () => {
|
||||||
|
let server;
|
||||||
|
while ((server = getNext()) != null) {
|
||||||
|
const serverId = server.id || server.dns || server.ip;
|
||||||
|
if (!serverId) continue;
|
||||||
|
setCurrentCheckingServerIds((prev) => [...prev, serverId]);
|
||||||
|
const t0 = Date.now();
|
||||||
|
let ok = false;
|
||||||
|
let ms = null;
|
||||||
|
try {
|
||||||
|
const { data: checkData } = await api.post('/uptime/check', { serverId });
|
||||||
|
ok = checkData?.ok === true;
|
||||||
|
ms = typeof checkData?.ms === 'number' ? checkData.ms : Date.now() - t0;
|
||||||
|
} catch (_) {
|
||||||
|
ms = Date.now() - t0;
|
||||||
|
}
|
||||||
|
const lastCheckTs = Date.now();
|
||||||
|
const entry = { ts: lastCheckTs, ok, ms };
|
||||||
|
setStatusMap((prev) => ({ ...prev, [serverId]: { ok, lastCheckTs } }));
|
||||||
|
setHistoryMap((prev) => {
|
||||||
|
const list = Array.isArray(prev[serverId]) ? prev[serverId] : [];
|
||||||
|
const merged = [...list, entry].slice(-HISTORY_MAX);
|
||||||
|
return { ...prev, [serverId]: merged };
|
||||||
|
});
|
||||||
|
setCurrentCheckingServerIds((prev) => prev.filter((id) => id !== serverId));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
await Promise.all(Array.from({ length: PARALLEL_CHECKS }, checkOne));
|
||||||
|
setCurrentCheckingServerIds([]);
|
||||||
|
checkingRef.current = false;
|
||||||
|
setChecking(false);
|
||||||
|
}, [jumphosts]);
|
||||||
|
|
||||||
|
// Первый запуск проверки через несколько секунд после загрузки (после перезапуска контейнера кеш может быть пустым или устаревшим)
|
||||||
|
useEffect(() => {
|
||||||
|
if (jumphosts.length === 0) return;
|
||||||
|
const t = setTimeout(runChecks, 4000);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}, [jumphosts.length, runChecks]);
|
||||||
|
|
||||||
|
// Автопроверка по интервалу в фоне
|
||||||
|
useEffect(() => {
|
||||||
|
if (jumphosts.length === 0) return;
|
||||||
|
intervalRef.current = setInterval(runChecks, checkIntervalMs);
|
||||||
|
return () => {
|
||||||
|
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||||
|
};
|
||||||
|
}, [jumphosts, runChecks, checkIntervalMs]);
|
||||||
|
|
||||||
|
// Сохраняем историю в localStorage при изменении
|
||||||
|
useEffect(() => {
|
||||||
|
saveHistoryToStorage(historyMap);
|
||||||
|
}, [historyMap]);
|
||||||
|
|
||||||
|
const selectedServer = selectedServerId
|
||||||
|
? jumphosts.find((s) => (s.id || s.dns || s.ip) === selectedServerId)
|
||||||
|
: null;
|
||||||
|
const selectedHistory = selectedServerId ? historyMap[selectedServerId] || [] : [];
|
||||||
|
const responseTimeData = useMemo(
|
||||||
|
() => historyToResponseTimeData(selectedHistory),
|
||||||
|
[selectedHistory]
|
||||||
|
);
|
||||||
|
const incidentsByDay = useMemo(
|
||||||
|
() => historyToIncidentsByDay(selectedHistory),
|
||||||
|
[selectedHistory]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-body">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<PageHeader
|
||||||
|
title="Uptime Monitor"
|
||||||
|
icon={<IconClock size={28} />}
|
||||||
|
pretitle="Extra"
|
||||||
|
meta="Проверка доступности всех Jumphost и домашних роутеров (MikroTik API)"
|
||||||
|
actions={
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={runChecks}
|
||||||
|
disabled={jumphosts.length === 0 || checking}
|
||||||
|
>
|
||||||
|
<IconRefresh className={checking ? 'spin' : ''} size={18} />
|
||||||
|
{checking ? ' Проверка…' : ' Проверить все'}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger" role="alert">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && jumphosts.length === 0 && (
|
||||||
|
<div className="empty">
|
||||||
|
<div className="empty-icon">
|
||||||
|
<IconChartLine size={48} />
|
||||||
|
</div>
|
||||||
|
<p className="empty-title">Нет Jumphost</p>
|
||||||
|
<p className="empty-subtitle text-muted">
|
||||||
|
Добавьте серверы типа «Jumphost» или «Home» с настроенным MikroTik API — здесь будет отображаться их доступность.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && jumphosts.length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title">Доступность Jumphost и домашних роутеров</h3>
|
||||||
|
<div className="card-actions text-muted small">
|
||||||
|
Проверка каждые {checkIntervalSeconds} сек · Выберите сервер для графиков
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-vcenter card-table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Сервер</th>
|
||||||
|
<th>Статус</th>
|
||||||
|
<th>Последняя проверка</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{jumphosts.map((s) => {
|
||||||
|
const id = s.id || s.dns || s.ip;
|
||||||
|
const status = statusMap[id];
|
||||||
|
const label = s.dns || s.name || s.ip || id;
|
||||||
|
const isSelected = selectedServerId === id;
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={id}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={() => setSelectedServerId(id)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
setSelectedServerId(id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={isSelected ? 'table-active' : ''}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<IconServer size={18} className="me-2 text-muted" />
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{currentCheckingServerIds.includes(id) && (
|
||||||
|
<span className="badge bg-blue-lt text-blue">
|
||||||
|
<span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
|
||||||
|
Проверка…
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!currentCheckingServerIds.includes(id) && status == null && (
|
||||||
|
<span className="badge bg-secondary">—</span>
|
||||||
|
)}
|
||||||
|
{!currentCheckingServerIds.includes(id) && status?.ok === true && (
|
||||||
|
<span className="badge bg-success-lt text-success">
|
||||||
|
<IconCircleCheck size={14} /> Доступен
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!currentCheckingServerIds.includes(id) && status?.ok === false && (
|
||||||
|
<span className="badge bg-danger-lt text-danger">
|
||||||
|
<IconCircleX size={14} /> Недоступен
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="text-muted">
|
||||||
|
{currentCheckingServerIds.includes(id)
|
||||||
|
? '…'
|
||||||
|
: status?.lastCheckTs
|
||||||
|
? formatRelative(status.lastCheckTs)
|
||||||
|
: '—'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedServer && (
|
||||||
|
<div className="row mt-4">
|
||||||
|
<div className="col-lg-6 mb-4">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title">Время ответа за период</h3>
|
||||||
|
<div className="card-actions text-muted small">
|
||||||
|
{selectedServer.dns || selectedServer.name || selectedServer.ip}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{responseTimeData.length === 0 ? (
|
||||||
|
<p className="text-muted mb-0">
|
||||||
|
Нет данных. Проверки накапливаются со временем (хранятся в браузере).
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ResponsiveContainer width="100%" height={260}>
|
||||||
|
<AreaChart
|
||||||
|
data={responseTimeData}
|
||||||
|
margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorMs" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="#206bc4" stopOpacity={0.3} />
|
||||||
|
<stop offset="95%" stopColor="#206bc4" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" stroke="#e9ecef" />
|
||||||
|
<XAxis
|
||||||
|
dataKey="time"
|
||||||
|
tick={{ fontSize: 11 }}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
unit=" мс"
|
||||||
|
tick={{ fontSize: 11 }}
|
||||||
|
domain={[0, (dataMax) => Math.max(dataMax || 0, 100)]}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
formatter={(value) => [value != null ? `${value} мс` : '—', 'Задержка']}
|
||||||
|
labelFormatter={(_, payload) =>
|
||||||
|
payload[0]?.payload?.time ?? ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="ms"
|
||||||
|
stroke="#206bc4"
|
||||||
|
fill="url(#colorMs)"
|
||||||
|
strokeWidth={2}
|
||||||
|
connectNulls={false}
|
||||||
|
dot={false}
|
||||||
|
activeDot={{ r: 4 }}
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6 mb-4">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-header">
|
||||||
|
<h3 className="card-title">Инциденты по дням</h3>
|
||||||
|
<div className="card-actions text-muted small">
|
||||||
|
Недоступность (кол-во проверок)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
{incidentsByDay.length === 0 ? (
|
||||||
|
<p className="text-muted mb-0">
|
||||||
|
Нет инцидентов за сохранённый период или нет данных.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ResponsiveContainer width="100%" height={260}>
|
||||||
|
<BarChart
|
||||||
|
data={incidentsByDay}
|
||||||
|
margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
|
||||||
|
>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" stroke="#e9ecef" />
|
||||||
|
<XAxis
|
||||||
|
dataKey="dayLabel"
|
||||||
|
tick={{ fontSize: 11 }}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
allowDecimals={false}
|
||||||
|
tick={{ fontSize: 11 }}
|
||||||
|
domain={[0, (dataMax) => Math.max(dataMax || 0, 1)]}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
formatter={(value) => [value, 'Инцидентов']}
|
||||||
|
labelFormatter={(_, payload) =>
|
||||||
|
payload[0]?.payload?.day ?? ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="incidents"
|
||||||
|
fill="#d63939"
|
||||||
|
radius={[2, 2, 0, 0]}
|
||||||
|
name="Инциденты"
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,262 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import FormModal from './FormModal.jsx';
|
||||||
|
import FormField from './FormField.jsx';
|
||||||
|
import CommunityAutocompleteInput from './CommunityAutocompleteInput.jsx';
|
||||||
|
import { IconPlus, IconWorld, IconNetwork, IconHash } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Универсальное модальное окно для добавления записи (домен/IP-диапазон/ASN)
|
||||||
|
*
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {boolean} props.open - Открыто ли модальное окно
|
||||||
|
* @param {function} props.onClose - Закрытие модального окна
|
||||||
|
* @param {function} props.onSubmit - Обработчик добавления (item) => void
|
||||||
|
* @param {string} props.type - Тип записи: 'domain' | 'ipRange' | 'asn'
|
||||||
|
* @param {Array} props.communities - Список community для автодополнения
|
||||||
|
* @param {boolean} props.loading - Состояние загрузки
|
||||||
|
*/
|
||||||
|
export default function AddItemModal({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
onSubmit,
|
||||||
|
type = 'domain',
|
||||||
|
communities = [],
|
||||||
|
loading = false
|
||||||
|
}) {
|
||||||
|
const [formData, setFormData] = useState({ value: '', community: '' });
|
||||||
|
const [errors, setErrors] = useState({ value: '', community: '' });
|
||||||
|
|
||||||
|
// Сброс формы при закрытии
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) {
|
||||||
|
setFormData({ value: '', community: '' });
|
||||||
|
setErrors({ value: '', community: '' });
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const validators = {
|
||||||
|
domain: (v) => {
|
||||||
|
const val = String(v).trim().toLowerCase();
|
||||||
|
return /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(val);
|
||||||
|
},
|
||||||
|
ipRange: (v) => {
|
||||||
|
const val = String(v).trim();
|
||||||
|
const parts = val.split('/');
|
||||||
|
if (parts.length !== 2) return false;
|
||||||
|
const [ip, mask] = parts;
|
||||||
|
if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(ip)) return false;
|
||||||
|
const octets = ip.split('.');
|
||||||
|
if (!octets.every(o => /^\d{1,3}$/.test(o) && Number(o) >= 0 && Number(o) <= 255)) return false;
|
||||||
|
if (!/^\d{1,2}$/.test(mask)) return false;
|
||||||
|
const m = Number(mask);
|
||||||
|
return m >= 0 && m <= 32;
|
||||||
|
},
|
||||||
|
asn: (v) => {
|
||||||
|
const val = String(v).trim();
|
||||||
|
return /^[0-9]+$/.test(val);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValidCommunity = (v) => /^(\d+|\d+:\d+)$/.test(String(v).trim());
|
||||||
|
|
||||||
|
const validate = () => {
|
||||||
|
const valueValid = validators[type]?.(formData.value);
|
||||||
|
const communityValid = isValidCommunity(formData.community);
|
||||||
|
|
||||||
|
setErrors({
|
||||||
|
value: valueValid ? '' : getValueError(),
|
||||||
|
community: communityValid ? '' : 'Неверный формат community (N или N:N)'
|
||||||
|
});
|
||||||
|
|
||||||
|
return valueValid && communityValid;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValueError = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return 'Неверный формат домена (sub.domain.tld)';
|
||||||
|
case 'ipRange':
|
||||||
|
return 'Неверный формат IP-диапазона (A.B.C.D/Mask)';
|
||||||
|
case 'asn':
|
||||||
|
return 'Неверный формат ASN (только цифры, например 12345)';
|
||||||
|
default:
|
||||||
|
return 'Неверный формат';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValueLabel = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return 'Домен';
|
||||||
|
case 'ipRange':
|
||||||
|
return 'IP-диапазон';
|
||||||
|
case 'asn':
|
||||||
|
return 'ASN';
|
||||||
|
default:
|
||||||
|
return 'Значение';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValuePlaceholder = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return 'example.com';
|
||||||
|
case 'ipRange':
|
||||||
|
return '192.168.1.0/24';
|
||||||
|
case 'asn':
|
||||||
|
return '12345';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValueHelp = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return 'Формат: sub.domain.tld (например foo.example.org)';
|
||||||
|
case 'ipRange':
|
||||||
|
return 'Формат: A.B.C.D/Mask, например 10.0.0.0/24';
|
||||||
|
case 'asn':
|
||||||
|
return 'Формат: только цифры, например 12345';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValueIcon = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return IconWorld;
|
||||||
|
case 'ipRange':
|
||||||
|
return IconNetwork;
|
||||||
|
case 'asn':
|
||||||
|
return IconHash;
|
||||||
|
default:
|
||||||
|
return IconHash;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTitle = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'domain':
|
||||||
|
return 'Добавить домен';
|
||||||
|
case 'ipRange':
|
||||||
|
return 'Добавить IP-диапазон';
|
||||||
|
case 'asn':
|
||||||
|
return 'Добавить ASN';
|
||||||
|
default:
|
||||||
|
return 'Добавить запись';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!validate()) return;
|
||||||
|
|
||||||
|
const normalizedValue = type === 'domain'
|
||||||
|
? formData.value.trim().toLowerCase()
|
||||||
|
: formData.value.trim();
|
||||||
|
|
||||||
|
const item = {
|
||||||
|
[type === 'domain' ? 'domain' : type === 'ipRange' ? 'ipRange' : 'asn']: normalizedValue,
|
||||||
|
community: String(formData.community).trim()
|
||||||
|
};
|
||||||
|
|
||||||
|
onSubmit?.(item);
|
||||||
|
onClose?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const ValueIcon = getValueIcon();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormModal
|
||||||
|
show={open}
|
||||||
|
onClose={onClose}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
title={getTitle()}
|
||||||
|
submitLabel="Добавить"
|
||||||
|
submitIcon={IconPlus}
|
||||||
|
loading={loading}
|
||||||
|
size="md"
|
||||||
|
centered
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
label={getValueLabel()}
|
||||||
|
name="value"
|
||||||
|
type="text"
|
||||||
|
value={formData.value}
|
||||||
|
onChange={(v) => {
|
||||||
|
setFormData({ ...formData, value: v });
|
||||||
|
if (errors.value) setErrors({ ...errors, value: '' });
|
||||||
|
}}
|
||||||
|
onValidate={(v) => ({
|
||||||
|
valid: validators[type]?.(v) ?? false,
|
||||||
|
message: validators[type]?.(v) ? 'Корректный формат' : getValueError()
|
||||||
|
})}
|
||||||
|
placeholder={getValuePlaceholder()}
|
||||||
|
helpText={getValueHelp()}
|
||||||
|
disabled={loading}
|
||||||
|
autoFocus
|
||||||
|
icon={ValueIcon}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">
|
||||||
|
Community
|
||||||
|
<span className="text-danger ms-1" aria-label="обязательное поле">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconHash size={18} />
|
||||||
|
</span>
|
||||||
|
<CommunityAutocompleteInput
|
||||||
|
value={formData.community}
|
||||||
|
onChange={(v) => {
|
||||||
|
setFormData({ ...formData, community: v });
|
||||||
|
if (errors.community) setErrors({ ...errors, community: '' });
|
||||||
|
}}
|
||||||
|
communities={communities}
|
||||||
|
placeholder="# Начните вводить номер или имя"
|
||||||
|
className={`form-control${errors.community ? ' is-invalid' : isValidCommunity(formData.community) ? ' is-valid' : ''}`}
|
||||||
|
useShortValue={true}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.community && (
|
||||||
|
<div className="invalid-feedback d-block">{errors.community}</div>
|
||||||
|
)}
|
||||||
|
{isValidCommunity(formData.community) && !errors.community && (
|
||||||
|
<div className="valid-feedback d-block">Корректный формат</div>
|
||||||
|
)}
|
||||||
|
{!errors.community && !isValidCommunity(formData.community) && (
|
||||||
|
<div className="form-text text-muted small">
|
||||||
|
Формат: N или N:N (например 65000:100)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(() => {
|
||||||
|
if (!formData.community) return null;
|
||||||
|
const match = communities.find(c => c.value === String(formData.community).trim());
|
||||||
|
if (!match) return null;
|
||||||
|
return (
|
||||||
|
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
|
||||||
|
<div className="d-flex">
|
||||||
|
<div className="flex-grow-1">
|
||||||
|
<strong>{match.name || match.value}</strong>
|
||||||
|
{match.description && <div className="text-muted small mt-1">{match.description}</div>}
|
||||||
|
{match.tags && match.tags.length > 0 && (
|
||||||
|
<div className="mt-2">
|
||||||
|
{match.tags.map((tag, idx) => (
|
||||||
|
<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</FormModal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
import { IconTrash, IconEdit, IconDownload, IconX, IconChecks } from '@tabler/icons-react'
|
import { IconTrash, IconEdit, IconDownload } from '@tabler/icons-react';
|
||||||
|
import FloatingBulkActionsBar from './FloatingBulkActionsBar.jsx';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Панель массовых действий для таблиц
|
* Панель массовых действий для таблиц (всплывающая, как на скрине).
|
||||||
* Показывается когда выбраны элементы
|
* Показывается когда выбраны элементы. Использует единый дизайн тёмной плавающей панели.
|
||||||
|
* «Выбрать все» остаётся в тулбаре/шапке таблицы (чекбокс).
|
||||||
*/
|
*/
|
||||||
function BulkActionsBar({
|
function BulkActionsBar({
|
||||||
selectedCount = 0,
|
selectedCount = 0,
|
||||||
@@ -12,109 +14,60 @@ function BulkActionsBar({
|
|||||||
onDelete = null,
|
onDelete = null,
|
||||||
onEdit = null,
|
onEdit = null,
|
||||||
onExport = null,
|
onExport = null,
|
||||||
customActions = [], // [{icon: Icon, label, onClick, variant}]
|
customActions = [],
|
||||||
className = ''
|
className = '',
|
||||||
}) {
|
}) {
|
||||||
if (selectedCount === 0) return null
|
const actions = [];
|
||||||
|
|
||||||
const allSelected = selectedCount === totalCount
|
if (onExport) {
|
||||||
|
actions.push({
|
||||||
|
type: 'button',
|
||||||
|
label: 'Экспорт',
|
||||||
|
icon: IconDownload,
|
||||||
|
onClick: onExport,
|
||||||
|
title: 'Экспортировать выбранное',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onEdit) {
|
||||||
|
actions.push({
|
||||||
|
type: 'button',
|
||||||
|
label: 'Изменить',
|
||||||
|
icon: IconEdit,
|
||||||
|
onClick: onEdit,
|
||||||
|
title: 'Редактировать выбранное',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
customActions.forEach((action) => {
|
||||||
|
actions.push({
|
||||||
|
type: 'button',
|
||||||
|
label: action.label,
|
||||||
|
icon: action.icon,
|
||||||
|
onClick: action.onClick,
|
||||||
|
variant: action.variant === 'btn-outline-danger' || action.variant === 'danger' ? 'danger' : undefined,
|
||||||
|
title: action.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (onDelete) {
|
||||||
|
actions.push({
|
||||||
|
type: 'button',
|
||||||
|
label: 'Удалить',
|
||||||
|
icon: IconTrash,
|
||||||
|
onClick: onDelete,
|
||||||
|
variant: 'danger',
|
||||||
|
title: 'Удалить выбранное',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`card mb-3 ${className}`} style={{
|
<FloatingBulkActionsBar
|
||||||
position: 'sticky',
|
selectedCount={selectedCount}
|
||||||
top: '10px',
|
onClearSelection={onDeselectAll}
|
||||||
zIndex: 10,
|
actions={actions}
|
||||||
boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)'
|
/>
|
||||||
}}>
|
);
|
||||||
<div className="card-body py-2 px-3">
|
|
||||||
<div className="d-flex align-items-center justify-content-between">
|
|
||||||
{/* Левая часть: информация о выборе */}
|
|
||||||
<div className="d-flex align-items-center gap-3">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<IconChecks size={20} className="text-blue me-2" />
|
|
||||||
<span className="fw-bold">
|
|
||||||
Выбрано: <span className="text-blue">{selectedCount}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Кнопка выбрать все / снять выбор */}
|
|
||||||
{!allSelected && totalCount > selectedCount && (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-primary"
|
|
||||||
onClick={onSelectAll}
|
|
||||||
>
|
|
||||||
Выбрать все ({totalCount})
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-ghost-secondary"
|
|
||||||
onClick={onDeselectAll}
|
|
||||||
>
|
|
||||||
<IconX size={16} className="me-1" />
|
|
||||||
Снять выбор
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Правая часть: действия */}
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
{/* Экспорт */}
|
|
||||||
{onExport && (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-primary"
|
|
||||||
onClick={onExport}
|
|
||||||
title="Экспортировать выбранное"
|
|
||||||
>
|
|
||||||
<IconDownload size={16} className="me-1" />
|
|
||||||
Экспорт
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Редактирование */}
|
|
||||||
{onEdit && (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-primary"
|
|
||||||
onClick={onEdit}
|
|
||||||
title="Редактировать выбранное"
|
|
||||||
>
|
|
||||||
<IconEdit size={16} className="me-1" />
|
|
||||||
Изменить
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Пользовательские действия */}
|
|
||||||
{customActions.map((action, idx) => {
|
|
||||||
const Icon = action.icon
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={idx}
|
|
||||||
className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
|
|
||||||
onClick={action.onClick}
|
|
||||||
title={action.title}
|
|
||||||
>
|
|
||||||
{Icon && <Icon size={16} className="me-1" />}
|
|
||||||
{action.label}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{/* Удаление */}
|
|
||||||
{onDelete && (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-danger"
|
|
||||||
onClick={onDelete}
|
|
||||||
title="Удалить выбранное"
|
|
||||||
>
|
|
||||||
<IconTrash size={16} className="me-1" />
|
|
||||||
Удалить ({selectedCount})
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BulkActionsBar
|
export default BulkActionsBar;
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,12 @@ import {
|
|||||||
IconDatabase,
|
IconDatabase,
|
||||||
IconCreditCard,
|
IconCreditCard,
|
||||||
IconDownload,
|
IconDownload,
|
||||||
IconKeyboard
|
IconKeyboard,
|
||||||
|
IconChartPie,
|
||||||
|
IconSettings,
|
||||||
|
IconClock,
|
||||||
|
IconClockPlay,
|
||||||
|
IconShield
|
||||||
} from '@tabler/icons-react'
|
} from '@tabler/icons-react'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -38,14 +43,20 @@ function CommandPalette() {
|
|||||||
// Список команд
|
// Список команд
|
||||||
const commands = [
|
const commands = [
|
||||||
{ icon: IconHome, label: 'Главная', description: 'Панель управления', action: () => navigate('/dashboard'), keywords: ['главная', 'панель', 'dashboard'] },
|
{ icon: IconHome, label: 'Главная', description: 'Панель управления', action: () => navigate('/dashboard'), keywords: ['главная', 'панель', 'dashboard'] },
|
||||||
|
{ icon: IconChartPie, label: 'Расход трафика', description: 'Статистика по интерфейсам MikroTik', action: () => navigate('/traffic'), keywords: ['трафик', 'traffic', 'mikrotik', 'интерфейсы'] },
|
||||||
|
{ icon: IconNetwork, label: 'Карта сети', description: 'Граф серверов и пинг между ними', action: () => navigate('/network-map'), keywords: ['карта', 'сеть', 'network', 'map', 'пинг', 'ping'] },
|
||||||
|
{ icon: IconClock, label: 'Uptime Monitor', description: 'Мониторинг доступности по ping с выбранного роутера', action: () => navigate('/uptime-monitor'), keywords: ['uptime', 'мониторинг', 'доступность', 'ping', 'роутер'] },
|
||||||
|
{ icon: IconClockPlay, label: 'Планировщик карты сети', description: 'Пинг и скорость по расписанию, логи', action: () => navigate('/scheduler'), keywords: ['планировщик', 'scheduler', 'карта', 'сеть', 'логи'] },
|
||||||
{ icon: IconWorld, label: 'Домены', description: 'Управление доменами', action: () => navigate('/domains'), keywords: ['домены', 'domains'] },
|
{ icon: IconWorld, label: 'Домены', description: 'Управление доменами', action: () => navigate('/domains'), keywords: ['домены', 'domains'] },
|
||||||
{ icon: IconNetwork, label: 'IP-диапазоны', description: 'Управление IP диапазонами', action: () => navigate('/ip-ranges'), keywords: ['ip', 'диапазоны', 'ranges'] },
|
{ icon: IconNetwork, label: 'IP-диапазоны', description: 'Управление IP диапазонами', action: () => navigate('/ip-ranges'), keywords: ['ip', 'диапазоны', 'ranges'] },
|
||||||
{ icon: IconNetwork, label: 'ASN', description: 'Управление Autonomous Systems', action: () => navigate('/asns'), keywords: ['asn', 'as', 'autonomous'] },
|
{ icon: IconNetwork, label: 'ASN', description: 'Управление Autonomous Systems', action: () => navigate('/asns'), keywords: ['asn', 'as', 'autonomous'] },
|
||||||
{ icon: IconFilter, label: 'Community', description: 'Справочник BGP Community', action: () => navigate('/communities'), keywords: ['community', 'справочник'] },
|
{ icon: IconFilter, label: 'Community', description: 'Справочник BGP Community', action: () => navigate('/communities'), keywords: ['community', 'справочник'] },
|
||||||
{ icon: IconServer, label: 'Серверы', description: 'Управление серверами', action: () => navigate('/servers'), keywords: ['серверы', 'servers'] },
|
{ icon: IconServer, label: 'Серверы', description: 'Управление серверами', action: () => navigate('/servers'), keywords: ['серверы', 'servers'] },
|
||||||
{ icon: IconFilter, label: 'Фильтры', description: 'Filter Manager', action: () => navigate('/filters'), keywords: ['фильтры', 'filters', 'mikrotik'] },
|
{ icon: IconFilter, label: 'Фильтры', description: 'Filter Manager', action: () => navigate('/filters'), keywords: ['фильтры', 'filters', 'mikrotik'] },
|
||||||
|
{ icon: IconShield, label: 'Firewall', description: 'Списки блокировки ban и ban_counter с роутера', action: () => navigate('/firewall'), keywords: ['firewall', 'ban', 'address-list', 'блокировка', 'роутер'] },
|
||||||
{ icon: IconCreditCard, label: 'Биллинг', description: 'Управление биллингом', action: () => navigate('/billing'), keywords: ['биллинг', 'billing', 'оплата'] },
|
{ icon: IconCreditCard, label: 'Биллинг', description: 'Управление биллингом', action: () => navigate('/billing'), keywords: ['биллинг', 'billing', 'оплата'] },
|
||||||
{ icon: IconDownload, label: 'Авто-URL', description: 'Генератор ссылок', action: () => navigate('/auto-urls'), keywords: ['url', 'ссылки', 'генератор'] },
|
{ icon: IconDownload, label: 'Авто-URL', description: 'Генератор ссылок', action: () => navigate('/auto-urls'), keywords: ['url', 'ссылки', 'генератор'] },
|
||||||
|
{ icon: IconSettings, label: 'Настройки интерфейса', description: 'WebSocket, DoH, пинг, PTR зона', action: () => navigate('/settings'), keywords: ['настройки', 'settings', 'интерфейс', 'doh', 'websocket'] },
|
||||||
]
|
]
|
||||||
|
|
||||||
// Фильтрация команд по поисковому запросу
|
// Фильтрация команд по поисковому запросу
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ function CommunityAutocompleteInput({
|
|||||||
className = 'form-control',
|
className = 'form-control',
|
||||||
onSelectMeta,
|
onSelectMeta,
|
||||||
maxSuggestions = 8,
|
maxSuggestions = 8,
|
||||||
|
useShortValue = false, // если true, передавать только короткую часть community (120 вместо 65000:120)
|
||||||
}) {
|
}) {
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
@@ -38,7 +39,12 @@ function CommunityAutocompleteInput({
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const selectItem = (item) => {
|
const selectItem = (item) => {
|
||||||
onChange(item.value);
|
// Если useShortValue=true, извлекаем только часть после двоеточия (если есть)
|
||||||
|
let valueToSet = item.value;
|
||||||
|
if (useShortValue && typeof item.value === 'string' && item.value.includes(':')) {
|
||||||
|
valueToSet = item.value.split(':')[1] || item.value;
|
||||||
|
}
|
||||||
|
onChange(valueToSet);
|
||||||
if (onSelectMeta) onSelectMeta(item);
|
if (onSelectMeta) onSelectMeta(item);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setActiveIndex(-1);
|
setActiveIndex(-1);
|
||||||
|
|||||||
@@ -0,0 +1,306 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { IconArrowUp, IconArrowDown, IconEdit, IconTrash, IconCopy, IconCheck, IconX } from '@tabler/icons-react';
|
||||||
|
import TableSkeleton, { TableEmpty } from './TableSkeleton.jsx';
|
||||||
|
import EmptyState from './EmptyState.jsx';
|
||||||
|
import Pagination from './Pagination.jsx';
|
||||||
|
import Tooltip from './Tooltip.jsx';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Универсальный компонент таблицы данных
|
||||||
|
*
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {Array} props.columns - Массив описаний колонок
|
||||||
|
* - { key: string, title: string, sortable?: boolean, icon?: Component, render?: (value, item) => ReactNode }
|
||||||
|
* @param {Array} props.items - Массив данных для отображения
|
||||||
|
* @param {string} props.itemKey - Ключ уникального идентификатора элемента
|
||||||
|
* @param {boolean} props.loading - Состояние загрузки
|
||||||
|
* @param {string} props.sortField - Текущее поле сортировки
|
||||||
|
* @param {string} props.sortOrder - Направление сортировки ('asc' | 'desc')
|
||||||
|
* @param {function} props.onSort - Обработчик изменения сортировки
|
||||||
|
* @param {Set} props.selectedItems - Набор выбранных элементов
|
||||||
|
* @param {function} props.onSelectItem - Обработчик выбора элемента
|
||||||
|
* @param {function} props.onSelectAll - Обработчик выбора всех
|
||||||
|
* @param {function} props.onDeselectAll - Обработчик снятия выбора
|
||||||
|
* @param {function} props.onEdit - Обработчик редактирования (item) => void
|
||||||
|
* @param {function} props.onDelete - Обработчик удаления (item) => void
|
||||||
|
* @param {function} props.onCopy - Обработчик копирования (item) => void
|
||||||
|
* @param {Object} props.inlineEdit - Настройки инлайн-редактирования
|
||||||
|
* - { editingKey: string, editingValue: string, onSave: () => void, onCancel: () => void, onChange: (value) => void, renderEditor?: () => ReactNode }
|
||||||
|
* @param {Object} props.pagination - Настройки пагинации
|
||||||
|
* - { currentPage, totalPages, totalItems, pageSize, onPageChange }
|
||||||
|
* @param {Object} props.emptyState - Настройки пустого состояния
|
||||||
|
* - { title, description, action, secondaryAction }
|
||||||
|
* @param {Array} props.actions - Дополнительные действия в строке
|
||||||
|
* - [{ icon: Component, label: string, onClick: (item) => void, variant?: string }]
|
||||||
|
* @param {boolean} props.selectable - Включить чекбоксы выбора (default: true)
|
||||||
|
* @param {number} props.skeletonRows - Количество строк скелетона (default: 10)
|
||||||
|
* @param {boolean} props.striped - Чередование фона строк (Tabler UX, default: true)
|
||||||
|
* @param {boolean} props.compact - Уменьшенные отступы ячеек (default: false)
|
||||||
|
* @param {boolean} props.flat - Таблица без карточной подложки: только горизонтальные разделители (default: false)
|
||||||
|
*/
|
||||||
|
function DataTable({
|
||||||
|
columns = [],
|
||||||
|
items = [],
|
||||||
|
itemKey = 'id',
|
||||||
|
loading = false,
|
||||||
|
sortField,
|
||||||
|
sortOrder = 'asc',
|
||||||
|
onSort,
|
||||||
|
selectedItems = new Set(),
|
||||||
|
onSelectItem,
|
||||||
|
onSelectAll,
|
||||||
|
onDeselectAll,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onCopy,
|
||||||
|
inlineEdit,
|
||||||
|
pagination,
|
||||||
|
emptyState,
|
||||||
|
actions = [],
|
||||||
|
selectable = true,
|
||||||
|
skeletonRows = 10,
|
||||||
|
striped = true,
|
||||||
|
compact = false,
|
||||||
|
flat = false,
|
||||||
|
}) {
|
||||||
|
const hasActions = onEdit || onDelete || onCopy || actions.length > 0;
|
||||||
|
const isEditing = (item) => inlineEdit && item[itemKey] === inlineEdit.editingKey;
|
||||||
|
|
||||||
|
// Рендер заголовка колонки (col.title — подпись, col.tooltip — подсказка для UX)
|
||||||
|
const renderColumnHeader = (col) => {
|
||||||
|
const isSortable = col.sortable !== false && onSort;
|
||||||
|
const isActive = sortField === col.key;
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
{col.icon && <col.icon size={16} className="me-1 text-muted" />}
|
||||||
|
{col.title}
|
||||||
|
{isSortable && isActive && (
|
||||||
|
<span className="ms-1">
|
||||||
|
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const thProps = {
|
||||||
|
key: col.key,
|
||||||
|
scope: 'col',
|
||||||
|
style: col.width ? { width: col.width } : undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isSortable) {
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
{...thProps}
|
||||||
|
className="cursor-pointer user-select-none"
|
||||||
|
onClick={() => onSort(col.key)}
|
||||||
|
>
|
||||||
|
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<th {...thProps}>
|
||||||
|
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Рендер ячейки
|
||||||
|
const renderCell = (col, item) => {
|
||||||
|
const value = item[col.key];
|
||||||
|
|
||||||
|
if (col.render) {
|
||||||
|
return col.render(value, item);
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Рендер действий
|
||||||
|
const renderActions = (item) => {
|
||||||
|
if (isEditing(item)) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{inlineEdit.renderEditor && inlineEdit.renderEditor(item)}
|
||||||
|
<Tooltip content="Сохранить (Enter)">
|
||||||
|
<button
|
||||||
|
className="btn btn-success btn-icon btn-sm me-1"
|
||||||
|
onClick={inlineEdit.onSave}
|
||||||
|
aria-label="Сохранить"
|
||||||
|
>
|
||||||
|
<IconCheck size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip content="Отмена (Esc)">
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary btn-icon btn-sm"
|
||||||
|
onClick={inlineEdit.onCancel}
|
||||||
|
aria-label="Отмена"
|
||||||
|
>
|
||||||
|
<IconX size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{onEdit && (
|
||||||
|
<Tooltip content="Редактировать" position="top">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-primary btn-icon btn-sm me-1"
|
||||||
|
onClick={() => onEdit(item)}
|
||||||
|
aria-label="Редактировать"
|
||||||
|
>
|
||||||
|
<IconEdit size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{onCopy && (
|
||||||
|
<Tooltip content="Копировать" position="top">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-icon btn-sm me-1"
|
||||||
|
onClick={() => onCopy(item)}
|
||||||
|
aria-label="Копировать"
|
||||||
|
>
|
||||||
|
<IconCopy size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{actions.map((action, idx) => (
|
||||||
|
<Tooltip key={idx} content={action.label} position="top">
|
||||||
|
<button
|
||||||
|
className={`btn btn-outline-${action.variant || 'secondary'} btn-icon btn-sm me-1`}
|
||||||
|
onClick={() => action.onClick(item)}
|
||||||
|
aria-label={action.label}
|
||||||
|
>
|
||||||
|
<action.icon size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
{onDelete && (
|
||||||
|
<Tooltip content="Удалить" position="top">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger btn-icon btn-sm"
|
||||||
|
onClick={() => onDelete(item)}
|
||||||
|
aria-label="Удалить"
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Загрузка
|
||||||
|
if (loading) {
|
||||||
|
return <TableSkeleton rows={skeletonRows} cols={columns.length + (hasActions ? 1 : 0)} hasCheckbox={selectable} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Пустое состояние
|
||||||
|
if (items.length === 0) {
|
||||||
|
return (
|
||||||
|
<TableEmpty cols={columns.length + (hasActions ? 1 : 0) + (selectable ? 1 : 0)}>
|
||||||
|
{emptyState ? (
|
||||||
|
<EmptyState
|
||||||
|
title={emptyState.title}
|
||||||
|
description={emptyState.description}
|
||||||
|
action={emptyState.action}
|
||||||
|
secondaryAction={emptyState.secondaryAction}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<EmptyState title="Нет данных" description="Добавьте записи, чтобы начать." />
|
||||||
|
)}
|
||||||
|
</TableEmpty>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const allSelected = items.length > 0 && items.every(i => selectedItems.has(i[itemKey]));
|
||||||
|
const tableClass = [
|
||||||
|
'table table-vcenter table-nowrap mb-0',
|
||||||
|
flat ? 'table-flat' : 'card-table',
|
||||||
|
!flat && striped && 'table-striped',
|
||||||
|
compact && 'table-sm',
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className={tableClass} role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{selectable && (
|
||||||
|
<th scope="col" style={{ width: '40px' }}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
checked={allSelected}
|
||||||
|
onChange={(e) => e.target.checked ? onSelectAll?.() : onDeselectAll?.()}
|
||||||
|
title="Выбрать все на странице"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
)}
|
||||||
|
{columns.map(renderColumnHeader)}
|
||||||
|
{hasActions && <th scope="col" className="text-end td-actions">Действия</th>}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{items.map((item, idx) => {
|
||||||
|
const id = item[itemKey];
|
||||||
|
const isSelected = selectedItems.has(id);
|
||||||
|
const editing = isEditing(item);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={id}
|
||||||
|
className={editing ? 'table-active' : (isSelected ? 'table-selected' : '')}
|
||||||
|
style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}
|
||||||
|
>
|
||||||
|
{selectable && (
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={() => onSelectItem?.(id)}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td key={col.key} className={col.className}>
|
||||||
|
{renderCell(col, item)}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
{hasActions && (
|
||||||
|
<td className="text-end td-actions">
|
||||||
|
{renderActions(item)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{pagination && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={pagination.currentPage}
|
||||||
|
totalPages={pagination.totalPages}
|
||||||
|
totalItems={pagination.totalItems}
|
||||||
|
pageSize={pagination.pageSize}
|
||||||
|
onPageChange={pagination.onPageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataTable;
|
||||||
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { IconAlertTriangle, IconCopy, IconRefresh, IconChevronDown, IconChevronUp } from '@tabler/icons-react'
|
import { IconAlertTriangle, IconCopy, IconRefresh, IconChevronDown, IconChevronUp } from '@tabler/icons-react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import { formatDateTime } from '../lib/datetime.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ErrorAlert - улучшенный компонент для отображения ошибок
|
* ErrorAlert - улучшенный компонент для отображения ошибок
|
||||||
@@ -29,7 +30,7 @@ function ErrorAlert({
|
|||||||
Ошибка: ${errorMessage}
|
Ошибка: ${errorMessage}
|
||||||
${errorCode ? `Код: ${errorCode}` : ''}
|
${errorCode ? `Код: ${errorCode}` : ''}
|
||||||
${errorDetails ? `Детали:\n${typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}` : ''}
|
${errorDetails ? `Детали:\n${typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}` : ''}
|
||||||
Время: ${new Date().toLocaleString('ru-RU')}
|
Время: ${formatDateTime(new Date())}
|
||||||
`.trim()
|
`.trim()
|
||||||
|
|
||||||
navigator.clipboard.writeText(errorText).then(() => {
|
navigator.clipboard.writeText(errorText).then(() => {
|
||||||
|
|||||||
@@ -0,0 +1,185 @@
|
|||||||
|
import { IconX } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Всплывающая панель массовых действий в стиле со скрина:
|
||||||
|
* тёмная панель по центру снизу, счётчик "N выбрано", кнопки действий, закрыть.
|
||||||
|
* Используется на страницах типа Manager при выборе элементов.
|
||||||
|
*
|
||||||
|
* @param {number} selectedCount - количество выбранных элементов
|
||||||
|
* @param {() => void} onClearSelection - снять выделение (кнопка X)
|
||||||
|
* @param {Array<{ type: 'button', label: string, icon: React.ComponentType, onClick: () => void, variant?: 'danger', title?: string } | { type: 'dropdown', label: string, icon: React.ComponentType, items: Array<{ label: string, onClick: () => void }>, title?: string }>} actions - кнопки и выпадающие меню
|
||||||
|
*/
|
||||||
|
function FloatingBulkActionsBar({ selectedCount = 0, onClearSelection, actions = [] }) {
|
||||||
|
if (selectedCount === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="floating-bulk-actions-bar"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '20px',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
zIndex: 1050,
|
||||||
|
maxWidth: '720px',
|
||||||
|
width: '100%',
|
||||||
|
padding: '0 12px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="d-flex align-items-center justify-content-between gap-3 rounded-3 shadow-lg px-3 py-2"
|
||||||
|
style={{
|
||||||
|
animation: 'floatingBulkSlideUp 0.2s ease',
|
||||||
|
background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Счётчик выбранных */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="rounded"
|
||||||
|
style={{
|
||||||
|
background: '#3b82f6',
|
||||||
|
color: '#fff',
|
||||||
|
padding: '6px 10px',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '0.95rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedCount}
|
||||||
|
</span>
|
||||||
|
<span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Действия */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
{actions.map((action, idx) => {
|
||||||
|
if (action.type === 'dropdown') {
|
||||||
|
const Icon = action.icon;
|
||||||
|
return (
|
||||||
|
<div key={idx} className="dropdown">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="floating-bulk-btn dropdown-toggle"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
title={action.title}
|
||||||
|
>
|
||||||
|
{Icon && <Icon size={15} />}
|
||||||
|
<span>{action.label}</span>
|
||||||
|
</button>
|
||||||
|
<div className="dropdown-menu dropdown-menu-dark">
|
||||||
|
{action.items?.map((item, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
type="button"
|
||||||
|
className="dropdown-item"
|
||||||
|
onClick={() => item.onClick()}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const Icon = action.icon;
|
||||||
|
const isDanger = action.variant === 'danger';
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={idx}
|
||||||
|
type="button"
|
||||||
|
className={`floating-bulk-btn ${isDanger ? 'floating-bulk-btn-danger' : ''}`}
|
||||||
|
onClick={action.onClick}
|
||||||
|
title={action.title}
|
||||||
|
>
|
||||||
|
{Icon && <Icon size={15} />}
|
||||||
|
<span>{action.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{actions.length > 0 && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 20,
|
||||||
|
background: 'rgba(255,255,255,0.2)',
|
||||||
|
margin: '0 4px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="floating-bulk-btn-close"
|
||||||
|
onClick={onClearSelection}
|
||||||
|
title="Снять выделение"
|
||||||
|
aria-label="Снять выделение"
|
||||||
|
>
|
||||||
|
<IconX size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
@keyframes floatingBulkSlideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.floating-bulk-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #e2e8f0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.floating-bulk-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.floating-bulk-btn-danger {
|
||||||
|
background: rgba(239, 68, 68, 0.2);
|
||||||
|
color: #fca5a5;
|
||||||
|
}
|
||||||
|
.floating-bulk-btn-danger:hover {
|
||||||
|
background: rgba(239, 68, 68, 0.4);
|
||||||
|
color: #fef2f2;
|
||||||
|
}
|
||||||
|
.floating-bulk-btn-close {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
color: #94a3b8;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.floating-bulk-btn-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloatingBulkActionsBar;
|
||||||
@@ -0,0 +1,291 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { IconServer, IconWorld, IconRouter } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Красивый selector gateway и интерфейсов с автодополнением.
|
||||||
|
* Похож по UX на ServerAutocompleteInput, но заточен под выбор родительского gateway/интерфейса.
|
||||||
|
*/
|
||||||
|
function GatewayAutocompleteInput({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
gateways = [],
|
||||||
|
interfaces = [],
|
||||||
|
templateGateways = [], // Gateways из шаблона, которые еще не созданы
|
||||||
|
serverId = null, // ID сервера для фильтрации интерфейсов и gateways
|
||||||
|
excludeGatewayId = null, // ID gateway, который нужно исключить (текущий редактируемый)
|
||||||
|
placeholder = '',
|
||||||
|
className = 'form-control',
|
||||||
|
onSelectMeta,
|
||||||
|
maxSuggestions = 12,
|
||||||
|
}) {
|
||||||
|
const containerRef = useRef(null);
|
||||||
|
const inputRef = useRef(null);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [activeIndex, setActiveIndex] = useState(-1);
|
||||||
|
|
||||||
|
// Объединяем gateway и интерфейсы в один список для автокомплита
|
||||||
|
const allItems = useMemo(() => {
|
||||||
|
const items = [];
|
||||||
|
|
||||||
|
// Добавляем прямые gateway из шаблона (которые еще не созданы)
|
||||||
|
// Фильтруем по serverId, если указан
|
||||||
|
templateGateways
|
||||||
|
.filter(g => {
|
||||||
|
if (g.id === excludeGatewayId) return false;
|
||||||
|
if (g.type !== 'direct' || !g.ip) return false;
|
||||||
|
// Если указан serverId, фильтруем по нему
|
||||||
|
if (serverId && g.serverId !== serverId) return false;
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.forEach(g => {
|
||||||
|
items.push({
|
||||||
|
type: 'gateway',
|
||||||
|
id: g.id,
|
||||||
|
value: g.id,
|
||||||
|
label: g.ip,
|
||||||
|
description: g.description || '',
|
||||||
|
ip: g.ip,
|
||||||
|
isTemplate: true, // Помечаем как шаблонный gateway
|
||||||
|
search: [g.ip, g.description, 'gateway', 'template'].filter(Boolean).join(' ').toLowerCase(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Добавляем прямые gateway (уже созданные)
|
||||||
|
// Фильтруем по serverId, если указан
|
||||||
|
gateways
|
||||||
|
.filter(g => {
|
||||||
|
if (g.id === excludeGatewayId) return false;
|
||||||
|
if (g.type !== 'direct' || !g.ip) return false;
|
||||||
|
// Если указан serverId, фильтруем по нему
|
||||||
|
if (serverId && g.serverId !== serverId) return false;
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.forEach(g => {
|
||||||
|
items.push({
|
||||||
|
type: 'gateway',
|
||||||
|
id: g.id,
|
||||||
|
value: g.id,
|
||||||
|
label: g.ip,
|
||||||
|
description: g.description || '',
|
||||||
|
ip: g.ip,
|
||||||
|
isTemplate: false,
|
||||||
|
search: [g.ip, g.description, 'gateway'].filter(Boolean).join(' ').toLowerCase(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Добавляем интерфейсы
|
||||||
|
// Фильтруем по serverId, если указан (интерфейс должен принадлежать серверу)
|
||||||
|
interfaces
|
||||||
|
.filter(i => {
|
||||||
|
if (!i.remoteIp) return false;
|
||||||
|
// Если указан serverId, фильтруем интерфейсы, которые принадлежат этому серверу
|
||||||
|
if (serverId) {
|
||||||
|
// Интерфейс принадлежит серверу, если serverId === i.serverId или serverId === i.serverId2
|
||||||
|
return i.serverId === serverId || i.serverId2 === serverId;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.forEach(i => {
|
||||||
|
items.push({
|
||||||
|
type: 'interface',
|
||||||
|
id: i.id,
|
||||||
|
value: i.id,
|
||||||
|
label: i.remoteIp,
|
||||||
|
description: `${i.name || i.type} (${i.localIp})`,
|
||||||
|
ip: i.remoteIp,
|
||||||
|
localIp: i.localIp,
|
||||||
|
search: [i.remoteIp, i.localIp, i.name, i.type, 'интерфейс', 'interface'].filter(Boolean).join(' ').toLowerCase(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}, [gateways, interfaces, templateGateways, excludeGatewayId, serverId]);
|
||||||
|
|
||||||
|
const suggestions = useMemo(() => {
|
||||||
|
const q = String(value || '').toLowerCase();
|
||||||
|
|
||||||
|
if (!q) return allItems.slice(0, maxSuggestions);
|
||||||
|
const filtered = allItems.filter((item) => item.search.includes(q));
|
||||||
|
return filtered.slice(0, maxSuggestions);
|
||||||
|
}, [value, allItems, maxSuggestions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleOutside = (e) => {
|
||||||
|
if (!containerRef.current) return;
|
||||||
|
if (!containerRef.current.contains(e.target)) setOpen(false);
|
||||||
|
};
|
||||||
|
document.addEventListener('click', handleOutside);
|
||||||
|
return () => document.removeEventListener('click', handleOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const selectItem = (item) => {
|
||||||
|
onChange(item.value);
|
||||||
|
if (onSelectMeta) onSelectMeta(item);
|
||||||
|
setOpen(false);
|
||||||
|
setActiveIndex(-1);
|
||||||
|
if (inputRef.current) inputRef.current.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e) => {
|
||||||
|
if (!open && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
||||||
|
setOpen(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!open) return;
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1));
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIndex((prev) => Math.max(prev - 1, 0));
|
||||||
|
} else if (e.key === 'Enter') {
|
||||||
|
if (activeIndex >= 0 && activeIndex < suggestions.length) {
|
||||||
|
e.preventDefault();
|
||||||
|
selectItem(suggestions[activeIndex]);
|
||||||
|
}
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Текст в input: ищем label по выбранному ID
|
||||||
|
const displayValue = useMemo(() => {
|
||||||
|
if (!value) return '';
|
||||||
|
const found = allItems.find((item) => item.value === value);
|
||||||
|
if (!found) return '';
|
||||||
|
return found.label;
|
||||||
|
}, [value, allItems]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={containerRef} className="position-relative" style={{ width: '100%' }}>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconWorld size={18} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="text"
|
||||||
|
className={className}
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={open ? displayValue || value : displayValue}
|
||||||
|
onChange={(e) => {
|
||||||
|
onChange(e.target.value);
|
||||||
|
setOpen(true);
|
||||||
|
}}
|
||||||
|
onFocus={() => setOpen(true)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{open && suggestions.length > 0 && (
|
||||||
|
<div
|
||||||
|
className="dropdown-menu show"
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
width: '100%',
|
||||||
|
maxHeight: 280,
|
||||||
|
overflowY: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`dropdown-item${activeIndex === -1 ? ' active' : ''}`}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onChange('');
|
||||||
|
if (onSelectMeta) onSelectMeta(null);
|
||||||
|
setOpen(false);
|
||||||
|
setActiveIndex(-1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-center text-muted small">
|
||||||
|
<span className="me-2">Без привязки</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Группа: Прямые gateway */}
|
||||||
|
{suggestions.filter(s => s.type === 'gateway').length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="dropdown-header small text-muted">Прямые gateway</div>
|
||||||
|
{suggestions
|
||||||
|
.filter(s => s.type === 'gateway')
|
||||||
|
.map((s, idx) => {
|
||||||
|
const globalIdx = suggestions.findIndex(item => item.value === s.value);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={`gw-${s.value}-${idx}`}
|
||||||
|
className={`dropdown-item${globalIdx === activeIndex ? ' active' : ''}`}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
selectItem(s);
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setActiveIndex(globalIdx)}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-start">
|
||||||
|
<span className={`avatar me-2 ${s.isTemplate ? 'bg-yellow-lt text-yellow' : 'bg-green-lt text-green'} border-0`} style={{ width: 24, height: 24 }}>
|
||||||
|
<IconWorld size={14} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-fill text-start">
|
||||||
|
<div className="fw-medium">
|
||||||
|
<code>{s.label}</code>
|
||||||
|
{s.description && <span className="text-muted ms-2">({s.description})</span>}
|
||||||
|
{s.isTemplate && <span className="badge bg-yellow-lt text-yellow ms-2" style={{ fontSize: '0.7rem' }}>Шаблон</span>}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small text-truncate" style={{ maxWidth: '100%' }}>
|
||||||
|
Gateway {s.isTemplate ? '(из шаблона)' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Группа: Интерфейсы */}
|
||||||
|
{suggestions.filter(s => s.type === 'interface').length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="dropdown-header small text-muted">Интерфейсы (по remote IP)</div>
|
||||||
|
{suggestions
|
||||||
|
.filter(s => s.type === 'interface')
|
||||||
|
.map((s, idx) => {
|
||||||
|
const globalIdx = suggestions.findIndex(item => item.value === s.value);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={`if-${s.value}-${idx}`}
|
||||||
|
className={`dropdown-item${globalIdx === activeIndex ? ' active' : ''}`}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
selectItem(s);
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setActiveIndex(globalIdx)}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-start">
|
||||||
|
<span className="avatar me-2 bg-blue-lt text-blue border-0" style={{ width: 24, height: 24 }}>
|
||||||
|
<IconRouter size={14} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-fill text-start">
|
||||||
|
<div className="fw-medium">
|
||||||
|
<code>{s.label}</code>
|
||||||
|
{s.description && <span className="text-muted ms-2">({s.description})</span>}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted small text-truncate" style={{ maxWidth: '100%' }}>
|
||||||
|
Интерфейс • Local: {s.localIp}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GatewayAutocompleteInput;
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import { useState, useMemo, useRef, useEffect } from 'react';
|
||||||
|
import BRAND_ICONS, { getIconById } from '../lib/brandIcons.js';
|
||||||
|
import { IconSearch } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Выбор иконки бренда с поиском и предпросмотром.
|
||||||
|
* value — id иконки (например IconBrandGoogle), onChange(id) — при выборе.
|
||||||
|
*/
|
||||||
|
export default function IconPicker({ value, onChange, disabled = false, label = 'Иконка бренда' }) {
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const selected = getIconById(value);
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = (search || '').trim().toLowerCase();
|
||||||
|
if (!q) return BRAND_ICONS;
|
||||||
|
return BRAND_ICONS.filter(
|
||||||
|
(item) =>
|
||||||
|
item.label.toLowerCase().includes(q) || item.id.toLowerCase().includes(q)
|
||||||
|
);
|
||||||
|
}, [search]);
|
||||||
|
|
||||||
|
const handleSelect = (item) => {
|
||||||
|
onChange?.(item.id);
|
||||||
|
setOpen(false);
|
||||||
|
setSearch('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const panelRef = useRef(null);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
const handleClickOutside = (e) => {
|
||||||
|
if (panelRef.current && !panelRef.current.contains(e.target) && !e.target.closest('button[aria-expanded]')) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label small">{label}</label>
|
||||||
|
<div className="d-flex align-items-center gap-2 flex-wrap" ref={panelRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center gap-2"
|
||||||
|
onClick={() => setOpen((v) => !v)}
|
||||||
|
disabled={disabled}
|
||||||
|
aria-expanded={open}
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
>
|
||||||
|
<span className="avatar avatar-sm bg-primary-lt text-primary rounded d-flex align-items-center justify-content-center">
|
||||||
|
<selected.Icon size={18} stroke={1.5} />
|
||||||
|
</span>
|
||||||
|
<span>{selected.label}</span>
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<div className="border rounded p-2 shadow-sm bg-body" style={{ minWidth: 280, maxWidth: 360 }}>
|
||||||
|
<div className="input-group input-group-sm mb-2">
|
||||||
|
<span className="input-group-text">
|
||||||
|
<IconSearch size={14} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Поиск по названию..."
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="d-flex flex-wrap gap-1 overflow-auto"
|
||||||
|
style={{ maxHeight: 200 }}
|
||||||
|
role="listbox"
|
||||||
|
>
|
||||||
|
{filtered.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
className={`btn btn-sm d-flex align-items-center justify-content-center rounded ${
|
||||||
|
value === item.id ? 'btn-primary' : 'btn-outline-secondary'
|
||||||
|
}`}
|
||||||
|
style={{ width: 40, height: 40 }}
|
||||||
|
onClick={() => handleSelect(item)}
|
||||||
|
title={item.label}
|
||||||
|
role="option"
|
||||||
|
aria-selected={value === item.id}
|
||||||
|
>
|
||||||
|
<item.Icon size={22} stroke={1.5} />
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{filtered.length === 0 && (
|
||||||
|
<div className="small text-muted py-2">Ничего не найдено</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getIconById };
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { IconClock, IconCheck } from '@tabler/icons-react'
|
import { IconClock, IconCheck } from '@tabler/icons-react'
|
||||||
|
import { formatDateTimeHuman } from '../lib/datetime.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* LastSaved - компонент для отображения времени последнего сохранения
|
* LastSaved - компонент для отображения времени последнего сохранения
|
||||||
@@ -44,13 +45,7 @@ function LastSaved({ timestamp, variant = 'default' }) {
|
|||||||
|
|
||||||
if (!timestamp) return null
|
if (!timestamp) return null
|
||||||
|
|
||||||
const absoluteTime = new Date(timestamp).toLocaleString('ru-RU', {
|
const absoluteTime = formatDateTimeHuman(timestamp)
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
|
|
||||||
// Варианты отображения
|
// Варианты отображения
|
||||||
if (variant === 'badge') {
|
if (variant === 'badge') {
|
||||||
|
|||||||
@@ -121,32 +121,51 @@ function iconByType(type) {
|
|||||||
|
|
||||||
function NotifyViewport({ items, onClose }) {
|
function NotifyViewport({ items, onClose }) {
|
||||||
return (
|
return (
|
||||||
<div className="position-fixed top-0 end-0 p-3" style={{ zIndex: 1080, pointerEvents: 'none' }}>
|
<div className="toast-container toast-container-end notify-viewport" style={{ zIndex: 1079 }}>
|
||||||
<div className="d-flex flex-column gap-2 align-items-end">
|
|
||||||
{items.map((n) => (
|
{items.map((n) => (
|
||||||
<div key={n.id} className={`alert alert-${colorByType(n.type)} alert-dismissible shadow-sm`} role="alert" style={{ minWidth: 320, pointerEvents: 'auto' }}>
|
<div
|
||||||
<div className="d-flex align-items-start">
|
key={n.id}
|
||||||
<div className="me-1 mt-1">{iconByType(n.type)}</div>
|
className="toast show toast-alert"
|
||||||
<div className="flex-grow-1">
|
role="alert"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-atomic="true"
|
||||||
|
style={{
|
||||||
|
minWidth: '320px',
|
||||||
|
maxWidth: '420px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderRadius: 'var(--tblr-border-radius, 0.25rem)',
|
||||||
|
animation: 'slideInRight 0.3s ease-out forwards',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={`alert alert-${colorByType(n.type)} toast-alert-inner mb-0`}>
|
||||||
|
<div className="toast-header toast-alert-header">
|
||||||
|
<span className="toast-alert-icon me-2">{iconByType(n.type)}</span>
|
||||||
|
<strong className="me-auto">
|
||||||
|
{n.type === 'success' && 'Успех'}
|
||||||
|
{n.type === 'error' && 'Ошибка'}
|
||||||
|
{n.type === 'warning' && 'Внимание'}
|
||||||
|
{n.type === 'info' && 'Информация'}
|
||||||
|
</strong>
|
||||||
|
<button type="button" className="btn-close" aria-label="Закрыть" onClick={() => onClose(n.id)} />
|
||||||
|
</div>
|
||||||
|
<div className="toast-body">
|
||||||
|
<div className="alert-description">
|
||||||
{n.message}
|
{n.message}
|
||||||
|
{n.count > 1 && <span className="badge bg-white text-body border ms-2">×{n.count}</span>}
|
||||||
|
</div>
|
||||||
{n.details && (
|
{n.details && (
|
||||||
<details className="small mt-1">
|
<details className="small mt-1">
|
||||||
<summary>Подробнее</summary>
|
<summary>Подробнее</summary>
|
||||||
<pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>{typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}</pre>
|
<pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>
|
||||||
|
{typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}
|
||||||
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
)}
|
)}
|
||||||
{n.count > 1 && (
|
|
||||||
<span className="badge bg-white text-body border ms-2">×{n.count}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<button type="button" className="btn-close" aria-label="Close" onClick={() => onClose(n.id)}>
|
|
||||||
<IconX size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,25 +1,38 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
function PageHeader({ title, pretitle, actions, meta }) {
|
/**
|
||||||
|
* Единый заголовок страницы в стиле Tabler UI.
|
||||||
|
* Используется на всех страницах для одинакового UX.
|
||||||
|
* Кнопки (actions) отображаются под названием страницы.
|
||||||
|
* @param {string} title - Заголовок страницы
|
||||||
|
* @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
|
||||||
|
* @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
|
||||||
|
* @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
|
||||||
|
* @param {React.ReactNode} [actions] - Кнопки/действия под названием страницы (btn-list, btn-group)
|
||||||
|
*/
|
||||||
|
function PageHeader({ title, icon, pretitle, actions, meta }) {
|
||||||
return (
|
return (
|
||||||
<div className="page-header d-print-none mb-4">
|
<div className="page-header d-print-none mb-4">
|
||||||
{/* Верхняя строка: только заголовок */}
|
|
||||||
<div className="row align-items-center">
|
<div className="row align-items-center">
|
||||||
<div className="col">
|
<div className="col">
|
||||||
<h2 className="page-title">{title}</h2>
|
|
||||||
{pretitle && (
|
{pretitle && (
|
||||||
<div className="page-pretitle mt-1">{pretitle}</div>
|
<div className="page-pretitle">{pretitle}</div>
|
||||||
)}
|
)}
|
||||||
|
<h1 className="page-title d-flex align-items-center">
|
||||||
|
{icon && <span className="me-2 d-flex align-items-center">{icon}</span>}
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
{meta && (
|
{meta && (
|
||||||
<div className="text-muted small mt-1">{meta}</div>
|
<div className="text-muted small mt-1">{meta}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Отдельная строка под заголовком: действия страницы */}
|
|
||||||
{actions && (
|
{actions && (
|
||||||
<div className="mt-4 d-print-none">
|
<div className="row mt-2">
|
||||||
|
<div className="col d-print-none">
|
||||||
{actions}
|
{actions}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -59,9 +59,13 @@ function PageHeaderActions({
|
|||||||
{(onImport || onExport) && placeholderBtn(160)}
|
{(onImport || onExport) && placeholderBtn(160)}
|
||||||
{onClear && placeholderBtn(130)}
|
{onClear && placeholderBtn(130)}
|
||||||
{onClearCommunities && placeholderBtn(180)}
|
{onClearCommunities && placeholderBtn(180)}
|
||||||
|
</div>
|
||||||
|
{(onSave || onHistory) && (
|
||||||
|
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||||
{onSave && placeholderBtn(140)}
|
{onSave && placeholderBtn(140)}
|
||||||
{onHistory && placeholderBtn(110)}
|
{onHistory && placeholderBtn(110)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -140,6 +144,9 @@ function PageHeaderActions({
|
|||||||
<IconEraser className="me-1" /> Очистить community
|
<IconEraser className="me-1" /> Очистить community
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
{(onSave || onHistory) && (
|
||||||
|
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||||
{onSave && (
|
{onSave && (
|
||||||
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
@@ -155,7 +162,7 @@ function PageHeaderActions({
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{onHistory && (
|
{onHistory && (
|
||||||
<div className="btn-group">
|
<div className="btn-group d-none d-sm-inline-flex">
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
||||||
{lastModified && (
|
{lastModified && (
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||||
@@ -167,6 +174,7 @@ function PageHeaderActions({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{/* Компактное меню для маленьких экранов */}
|
{/* Компактное меню для маленьких экранов */}
|
||||||
{secondaryButtons && (
|
{secondaryButtons && (
|
||||||
<div className="btn-group d-inline-flex d-sm-none">
|
<div className="btn-group d-inline-flex d-sm-none">
|
||||||
|
|||||||
@@ -8,9 +8,9 @@ import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight
|
|||||||
function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChange }) {
|
function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChange }) {
|
||||||
const [jumpToPage, setJumpToPage] = useState('');
|
const [jumpToPage, setJumpToPage] = useState('');
|
||||||
|
|
||||||
if (totalPages <= 1) return null;
|
// Хуки должны вызываться безусловно (до любого return)
|
||||||
|
|
||||||
const pages = useMemo(() => {
|
const pages = useMemo(() => {
|
||||||
|
if (totalPages <= 1) return [];
|
||||||
const result = [];
|
const result = [];
|
||||||
let start = Math.max(1, currentPage - 2);
|
let start = Math.max(1, currentPage - 2);
|
||||||
let end = Math.min(totalPages, currentPage + 2);
|
let end = Math.min(totalPages, currentPage + 2);
|
||||||
@@ -31,6 +31,9 @@ function Pagination({ currentPage, totalPages, totalItems, pageSize, onPageChang
|
|||||||
return result;
|
return result;
|
||||||
}, [currentPage, totalPages]);
|
}, [currentPage, totalPages]);
|
||||||
|
|
||||||
|
// Ранний return после всех хуков
|
||||||
|
if (totalPages <= 1) return null;
|
||||||
|
|
||||||
const startItem = (currentPage - 1) * pageSize + 1;
|
const startItem = (currentPage - 1) * pageSize + 1;
|
||||||
const endItem = Math.min(currentPage * pageSize, totalItems);
|
const endItem = Math.min(currentPage * pageSize, totalItems);
|
||||||
|
|
||||||
|
|||||||
@@ -7,19 +7,25 @@ function S3MetaBar({ keys = [], className = '' }) {
|
|||||||
const [meta, setMeta] = useState({});
|
const [meta, setMeta] = useState({});
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const fetchMeta = async () => {
|
const fetchMeta = async (abortSignal) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||||
try {
|
try {
|
||||||
const res = await api.get('/s3/last-modified');
|
const res = await api.get('/s3/last-modified', opts);
|
||||||
setMeta(res.data || {});
|
setMeta(res.data || {});
|
||||||
} catch {
|
} catch (e) {
|
||||||
|
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||||
setMeta({});
|
setMeta({});
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => { fetchMeta(); }, []);
|
useEffect(() => {
|
||||||
|
const controller = new AbortController();
|
||||||
|
fetchMeta(controller.signal);
|
||||||
|
return () => controller.abort();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const copyMeta = async (k) => {
|
const copyMeta = async (k) => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
import FormField from './FormField';
|
import FormField from './FormField';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState, useMemo } from 'react';
|
||||||
import api from '../lib/api.js';
|
import api from '../lib/api.js';
|
||||||
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
||||||
import ErrorAlert from './ErrorAlert';
|
import ErrorAlert from './ErrorAlert';
|
||||||
|
import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* SettingsModal - модальное окно настроек интерфейса
|
* SettingsModal - модальное окно настроек интерфейса
|
||||||
@@ -14,9 +15,30 @@ export default function SettingsModal({ open, onClose }) {
|
|||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [success, setSuccess] = useState('');
|
const [success, setSuccess] = useState('');
|
||||||
const [etag, setEtag] = useState('');
|
const [etag, setEtag] = useState('');
|
||||||
|
const [rawSettings, setRawSettings] = useState({});
|
||||||
const [dohServer, setDohServer] = useState('');
|
const [dohServer, setDohServer] = useState('');
|
||||||
const [wsUrl, setWsUrl] = useState('');
|
const [wsUrl, setWsUrl] = useState('');
|
||||||
const [baseAS, setBaseAS] = useState('65001');
|
const [baseAS, setBaseAS] = useState('65001');
|
||||||
|
const [pingDomain, setPingDomain] = useState('');
|
||||||
|
const [pingCacheMinutes, setPingCacheMinutes] = useState('');
|
||||||
|
const [ptrZoneReplaceFrom, setPtrZoneReplaceFrom] = useState('');
|
||||||
|
const [ptrZoneReplaceTo, setPtrZoneReplaceTo] = useState('');
|
||||||
|
const [pingServicesSource, setPingServicesSource] = useState('web');
|
||||||
|
const [pingServicesServerId, setPingServicesServerId] = useState('');
|
||||||
|
const [pingServicesGatewayIp, setPingServicesGatewayIp] = useState('');
|
||||||
|
const [pingServicesCacheSeconds, setPingServicesCacheSeconds] = useState('');
|
||||||
|
const [pingServicesSchedulerEnabled, setPingServicesSchedulerEnabled] = useState(true);
|
||||||
|
const [pingServicesSchedulerIntervalMinutes, setPingServicesSchedulerIntervalMinutes] = useState('2');
|
||||||
|
const [serversList, setServersList] = useState([]);
|
||||||
|
const [interfaceSpeedTestProtocol, setInterfaceSpeedTestProtocol] = useState('tcp');
|
||||||
|
const [interfaceSpeedTestDurationSeconds, setInterfaceSpeedTestDurationSeconds] = useState('10');
|
||||||
|
const [interfaceSpeedTestCacheMinutes, setInterfaceSpeedTestCacheMinutes] = useState('');
|
||||||
|
|
||||||
|
const routerServersForPing = useMemo(() => {
|
||||||
|
return (serversList || []).filter(
|
||||||
|
(s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
|
||||||
|
);
|
||||||
|
}, [serversList]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) return;
|
if (!open) return;
|
||||||
@@ -26,13 +48,54 @@ export default function SettingsModal({ open, onClose }) {
|
|||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await api.get('/ui-settings');
|
const [settingsRes, serversRes] = await Promise.all([
|
||||||
const data = res?.data || {};
|
api.get('/ui-settings'),
|
||||||
|
api.get('/servers').catch(() => ({ data: [] })),
|
||||||
|
]);
|
||||||
|
const data = settingsRes?.data || {};
|
||||||
|
setRawSettings(data);
|
||||||
setDohServer(String(data?.dohServer || ''));
|
setDohServer(String(data?.dohServer || ''));
|
||||||
setWsUrl(String(data?.wsUpdateUrl || ''));
|
setWsUrl(String(data?.wsUpdateUrl || ''));
|
||||||
setBaseAS(String(data?.baseAS || '65001'));
|
setBaseAS(String(data?.baseAS || '65001'));
|
||||||
const e = res?.headers?.etag || res?.headers?.ETag || '';
|
setPingDomain(String(data?.pingDomain || '').trim());
|
||||||
|
setPingCacheMinutes(
|
||||||
|
data?.pingCacheMinutes != null ? String(data.pingCacheMinutes) : ''
|
||||||
|
);
|
||||||
|
setPtrZoneReplaceFrom(String(data?.ptrZoneReplaceFrom || ''));
|
||||||
|
setPtrZoneReplaceTo(String(data?.ptrZoneReplaceTo || ''));
|
||||||
|
setPingServicesSource(String(data?.pingServicesSource || 'web').toLowerCase() === 'router' ? 'router' : 'web');
|
||||||
|
setPingServicesServerId(String(data?.pingServicesServerId || '').trim());
|
||||||
|
setPingServicesGatewayIp(String(data?.pingServicesGatewayIp || '').trim());
|
||||||
|
setPingServicesCacheSeconds(
|
||||||
|
data?.pingServicesCacheSeconds != null
|
||||||
|
? String(data.pingServicesCacheSeconds)
|
||||||
|
: ''
|
||||||
|
);
|
||||||
|
setPingServicesSchedulerEnabled(data?.pingServicesSchedulerEnabled !== false);
|
||||||
|
setPingServicesSchedulerIntervalMinutes(
|
||||||
|
data?.pingServicesSchedulerIntervalMinutes != null
|
||||||
|
? String(data.pingServicesSchedulerIntervalMinutes)
|
||||||
|
: '2'
|
||||||
|
);
|
||||||
|
setInterfaceSpeedTestProtocol(
|
||||||
|
String(data?.interfaceSpeedTestProtocol || 'tcp').toLowerCase() ===
|
||||||
|
'udp'
|
||||||
|
? 'udp'
|
||||||
|
: 'tcp'
|
||||||
|
);
|
||||||
|
setInterfaceSpeedTestDurationSeconds(
|
||||||
|
data?.interfaceSpeedTestDurationSeconds != null
|
||||||
|
? String(data.interfaceSpeedTestDurationSeconds)
|
||||||
|
: '5'
|
||||||
|
);
|
||||||
|
setInterfaceSpeedTestCacheMinutes(
|
||||||
|
data?.interfaceSpeedTestCacheMinutes != null
|
||||||
|
? String(data.interfaceSpeedTestCacheMinutes)
|
||||||
|
: ''
|
||||||
|
);
|
||||||
|
const e = settingsRes?.headers?.etag || settingsRes?.headers?.ETag || '';
|
||||||
setEtag(e ? String(e) : '');
|
setEtag(e ? String(e) : '');
|
||||||
|
setServersList(Array.isArray(serversRes?.data) ? serversRes.data : []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError('Не удалось загрузить настройки');
|
setError('Не удалось загрузить настройки');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -86,18 +149,47 @@ export default function SettingsModal({ open, onClose }) {
|
|||||||
|
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
const payload = {
|
const mergedSettings = {
|
||||||
settings: {
|
...rawSettings,
|
||||||
dohServer: String(dohServer || '').trim(),
|
dohServer: String(dohServer || '').trim(),
|
||||||
wsUpdateUrl: String(wsUrl || '').trim(),
|
wsUpdateUrl: String(wsUrl || '').trim(),
|
||||||
baseAS: String(baseAS || '65001').trim()
|
baseAS: String(baseAS || '65001').trim(),
|
||||||
},
|
pingDomain: String(pingDomain || '').trim(),
|
||||||
|
pingCacheMinutes: Math.max(0, parseInt(pingCacheMinutes, 10) || 0),
|
||||||
|
ptrZoneReplaceFrom: String(ptrZoneReplaceFrom || '').trim(),
|
||||||
|
ptrZoneReplaceTo: String(ptrZoneReplaceTo || '').trim(),
|
||||||
|
pingServicesSource: pingServicesSource === 'router' ? 'router' : 'web',
|
||||||
|
pingServicesServerId: String(pingServicesServerId || '').trim(),
|
||||||
|
pingServicesGatewayIp: String(pingServicesGatewayIp || '').trim(),
|
||||||
|
pingServicesCacheSeconds: Math.max(
|
||||||
|
0,
|
||||||
|
parseInt(pingServicesCacheSeconds, 10) || 0
|
||||||
|
),
|
||||||
|
pingServicesSchedulerEnabled: Boolean(pingServicesSchedulerEnabled),
|
||||||
|
pingServicesSchedulerIntervalMinutes: Math.max(
|
||||||
|
1,
|
||||||
|
Math.min(1440, parseInt(pingServicesSchedulerIntervalMinutes, 10) || 2)
|
||||||
|
),
|
||||||
|
interfaceSpeedTestProtocol:
|
||||||
|
interfaceSpeedTestProtocol === 'udp' ? 'udp' : 'tcp',
|
||||||
|
interfaceSpeedTestDurationSeconds: Math.max(
|
||||||
|
1,
|
||||||
|
parseInt(interfaceSpeedTestDurationSeconds, 10) || 5
|
||||||
|
),
|
||||||
|
interfaceSpeedTestCacheMinutes: Math.max(
|
||||||
|
0,
|
||||||
|
parseInt(interfaceSpeedTestCacheMinutes, 10) || 0
|
||||||
|
),
|
||||||
|
};
|
||||||
|
const payload = {
|
||||||
|
settings: mergedSettings,
|
||||||
etag
|
etag
|
||||||
};
|
};
|
||||||
const res = await api.post('/ui-settings', payload);
|
const res = await api.post('/ui-settings', payload);
|
||||||
const meta = res?.data || {};
|
const meta = res?.data || {};
|
||||||
setSuccess('Настройки успешно сохранены');
|
setSuccess('Настройки успешно сохранены');
|
||||||
setEtag(String(meta?.etag || ''));
|
setEtag(String(meta?.etag || ''));
|
||||||
|
setRawSettings(mergedSettings);
|
||||||
setTimeout(() => setSuccess(''), 3000);
|
setTimeout(() => setSuccess(''), 3000);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(e?.response?.data?.message || 'Ошибка при сохранении настроек');
|
setError(e?.response?.data?.message || 'Ошибка при сохранении настроек');
|
||||||
@@ -186,6 +278,201 @@ export default function SettingsModal({ open, onClose }) {
|
|||||||
helpText="AS по умолчанию для community (например, 65001). Используется при поиске и нормализации community."
|
helpText="AS по умолчанию для community (например, 65001). Используется при поиске и нормализации community."
|
||||||
disabled={loading || saving}
|
disabled={loading || saving}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Домен для пинга"
|
||||||
|
name="pingDomain"
|
||||||
|
type="text"
|
||||||
|
value={pingDomain}
|
||||||
|
onChange={setPingDomain}
|
||||||
|
placeholder="8.8.8.8 или ya.ru"
|
||||||
|
helpText="Домен или IP для проверки пинга через MikroTik (например, 8.8.8.8, ya.ru). Если не задан, используется значение по умолчанию."
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Срок кеша пинга (мин)"
|
||||||
|
name="pingCacheMinutes"
|
||||||
|
type="number"
|
||||||
|
value={pingCacheMinutes}
|
||||||
|
onChange={setPingCacheMinutes}
|
||||||
|
placeholder="0"
|
||||||
|
helpText="0 — без кеша. При значении больше 0 результаты пинга кешируются в S3 на указанное количество минут."
|
||||||
|
disabled={loading || saving}
|
||||||
|
min={0}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mt-3 pt-3 border-top">
|
||||||
|
<h6 className="mb-2">Измерение скорости (интерфейсы)</h6>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label small">Протокол измерения</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
value={interfaceSpeedTestProtocol}
|
||||||
|
onChange={(e) =>
|
||||||
|
setInterfaceSpeedTestProtocol(e.target.value)
|
||||||
|
}
|
||||||
|
disabled={loading || saving}
|
||||||
|
>
|
||||||
|
<option value="tcp">TCP</option>
|
||||||
|
<option value="udp">UDP</option>
|
||||||
|
</select>
|
||||||
|
<div className="form-text small">
|
||||||
|
Используется как настройка по умолчанию для инструментов
|
||||||
|
измерения скорости RouterOS.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<FormField
|
||||||
|
label="Время замера (сек)"
|
||||||
|
name="interfaceSpeedTestDurationSeconds"
|
||||||
|
type="number"
|
||||||
|
value={interfaceSpeedTestDurationSeconds}
|
||||||
|
onChange={setInterfaceSpeedTestDurationSeconds}
|
||||||
|
placeholder="5"
|
||||||
|
helpText="Интервал, за который измеряется средняя скорость по интерфейсу."
|
||||||
|
disabled={loading || saving}
|
||||||
|
min={1}
|
||||||
|
max={600}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<FormField
|
||||||
|
label="Кеш результата замера (мин)"
|
||||||
|
name="interfaceSpeedTestCacheMinutes"
|
||||||
|
type="number"
|
||||||
|
value={interfaceSpeedTestCacheMinutes}
|
||||||
|
onChange={setInterfaceSpeedTestCacheMinutes}
|
||||||
|
placeholder="0"
|
||||||
|
helpText="0 — без кеша. При значении больше 0 результаты замеров скорости по интерфейсу кешируются в S3."
|
||||||
|
disabled={loading || saving}
|
||||||
|
min={0}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 pt-3 border-top">
|
||||||
|
<h6 className="mb-2">Пинг сервисов на главной</h6>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label small">Источник пинга</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
value={pingServicesSource}
|
||||||
|
onChange={(e) => setPingServicesSource(e.target.value)}
|
||||||
|
disabled={loading || saving}
|
||||||
|
>
|
||||||
|
<option value="web">Веб (TCP с сервера приложения)</option>
|
||||||
|
<option value="router">Роутер (RouterOS API)</option>
|
||||||
|
</select>
|
||||||
|
<div className="form-text small">
|
||||||
|
«Веб» — задержка до 8.8.8.8, 1.1.1.1 и др. с сервера. «Роутер» — пинг через выбранный MikroTik (jumphost).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<FormField
|
||||||
|
label="Время кеширования пингов (сек)"
|
||||||
|
name="pingServicesCacheSeconds"
|
||||||
|
type="number"
|
||||||
|
value={pingServicesCacheSeconds}
|
||||||
|
onChange={setPingServicesCacheSeconds}
|
||||||
|
placeholder="0"
|
||||||
|
helpText="0 — без кеша. Результаты пинга до Google, Cloudflare и др. будут кешироваться на указанное число секунд."
|
||||||
|
disabled={loading || saving}
|
||||||
|
min={0}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<div className="form-check form-switch mb-1">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="modalPingServicesSchedulerEnabled"
|
||||||
|
checked={pingServicesSchedulerEnabled}
|
||||||
|
onChange={(e) => setPingServicesSchedulerEnabled(e.target.checked)}
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label small" htmlFor="modalPingServicesSchedulerEnabled">
|
||||||
|
Планировщик: обновлять кеш пингов по расписанию
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
label="Интервал обновления (мин)"
|
||||||
|
name="pingServicesSchedulerIntervalMinutes"
|
||||||
|
type="number"
|
||||||
|
value={pingServicesSchedulerIntervalMinutes}
|
||||||
|
onChange={setPingServicesSchedulerIntervalMinutes}
|
||||||
|
placeholder="2"
|
||||||
|
helpText="Как часто обновлять кеш (1–1440 мин). По умолчанию 2."
|
||||||
|
disabled={loading || saving}
|
||||||
|
min={1}
|
||||||
|
max={1440}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{pingServicesSource === 'router' && (
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label small">Домашний роутер</label>
|
||||||
|
<div className={loading || saving ? 'opacity-75 pe-none' : ''}>
|
||||||
|
<ServerAutocompleteInput
|
||||||
|
value={pingServicesServerId}
|
||||||
|
onChange={(v) => setPingServicesServerId(String(v || '').trim())}
|
||||||
|
servers={routerServersForPing}
|
||||||
|
placeholder="Выберите роутер (jumphost или входной)"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
maxSuggestions={10}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-text small">
|
||||||
|
Выбор роутера с MikroTik API для пинга с главной. Пусто — первый jumphost из списка.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<FormField
|
||||||
|
label="IP шлюза (не обязательно)"
|
||||||
|
name="pingServicesGatewayIp"
|
||||||
|
type="text"
|
||||||
|
value={pingServicesGatewayIp}
|
||||||
|
onChange={setPingServicesGatewayIp}
|
||||||
|
placeholder="IP шлюза"
|
||||||
|
helpText="Не обязательно. Пусто — используется первый шлюз выбранного роутера."
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-3 border-top">
|
||||||
|
<h6 className="mb-3">Настройка PTR зоны</h6>
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<FormField
|
||||||
|
label="Заменить в DNS домене"
|
||||||
|
name="ptrZoneReplaceFrom"
|
||||||
|
type="text"
|
||||||
|
value={ptrZoneReplaceFrom}
|
||||||
|
onChange={setPtrZoneReplaceFrom}
|
||||||
|
placeholder="rt.shx"
|
||||||
|
helpText='Часть DNS домена, которую нужно заменить (например, "rt.shx")'
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<FormField
|
||||||
|
label="Заменить на"
|
||||||
|
name="ptrZoneReplaceTo"
|
||||||
|
type="text"
|
||||||
|
value={ptrZoneReplaceTo}
|
||||||
|
onChange={setPtrZoneReplaceTo}
|
||||||
|
placeholder="shrt"
|
||||||
|
helpText='На что заменить (например, "shrt"). Результат: DNS "selectel.msk.rt.shx.su" → PTR "selectel.msk.shrt.su"'
|
||||||
|
disabled={loading || saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
/**
|
/**
|
||||||
* Skeleton loader для таблиц с анимацией pulse
|
* Skeleton loader для таблиц с анимацией pulse
|
||||||
|
* @param {boolean} flat - без карточной подложки (table-flat)
|
||||||
*/
|
*/
|
||||||
export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false }) {
|
export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false, flat = false }) {
|
||||||
|
const tableClass = flat
|
||||||
|
? 'table table-flat table-vcenter table-nowrap mb-0'
|
||||||
|
: 'table card-table table-vcenter table-nowrap mb-0';
|
||||||
const Row = () => (
|
const Row = () => (
|
||||||
<tr>
|
<tr>
|
||||||
{hasCheckbox && (
|
{hasCheckbox && (
|
||||||
@@ -18,7 +22,7 @@ export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false
|
|||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
<table className={tableClass}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{hasCheckbox && <th style={{ width: '40px' }}></th>}
|
{hasCheckbox && <th style={{ width: '40px' }}></th>}
|
||||||
@@ -35,10 +39,13 @@ export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TableEmpty({ cols = 3, children }) {
|
export function TableEmpty({ cols = 3, flat = false, children }) {
|
||||||
|
const tableClass = flat
|
||||||
|
? 'table table-flat table-vcenter table-nowrap mb-0'
|
||||||
|
: 'table card-table table-vcenter table-nowrap mb-0';
|
||||||
return (
|
return (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
<table className={tableClass}>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={cols} className="text-center text-muted py-5">
|
<td colSpan={cols} className="text-center text-muted py-5">
|
||||||
|
|||||||
@@ -3,12 +3,12 @@ import {
|
|||||||
IconCheck,
|
IconCheck,
|
||||||
IconX,
|
IconX,
|
||||||
IconAlertTriangle,
|
IconAlertTriangle,
|
||||||
IconInfoCircle,
|
IconInfoCircle
|
||||||
IconRefresh
|
|
||||||
} from '@tabler/icons-react'
|
} from '@tabler/icons-react'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Контекст для глобального управления toast уведомлениями
|
* Контекст для глобального управления toast уведомлениями.
|
||||||
|
* Тосты в стиле Tabler Alerts, всплывают справа как Tabler Toasts.
|
||||||
*/
|
*/
|
||||||
const ToastContext = createContext({
|
const ToastContext = createContext({
|
||||||
success: () => {},
|
success: () => {},
|
||||||
@@ -19,24 +19,29 @@ const ToastContext = createContext({
|
|||||||
|
|
||||||
export const useToast = () => useContext(ToastContext)
|
export const useToast = () => useContext(ToastContext)
|
||||||
|
|
||||||
|
const DEFAULT_TITLES = {
|
||||||
|
success: 'Выполнено успешно',
|
||||||
|
error: 'Произошла ошибка',
|
||||||
|
warning: 'Внимание',
|
||||||
|
info: 'Информация',
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toast уведомление (отдельный элемент)
|
* Один toast: разметка Tabler (toast + toast-header + toast-body), стиль Tabler Alerts.
|
||||||
*/
|
*/
|
||||||
function Toast({ toast, onClose }) {
|
function Toast({ toast, onClose }) {
|
||||||
const [isLeaving, setIsLeaving] = useState(false)
|
const [isLeaving, setIsLeaving] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (toast.duration && toast.duration > 0) {
|
if (toast.duration && toast.duration > 0) {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => handleClose(), toast.duration)
|
||||||
handleClose()
|
|
||||||
}, toast.duration)
|
|
||||||
return () => clearTimeout(timer)
|
return () => clearTimeout(timer)
|
||||||
}
|
}
|
||||||
}, [toast.duration])
|
}, [toast.duration])
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setIsLeaving(true)
|
setIsLeaving(true)
|
||||||
setTimeout(() => onClose(toast.id), 300) // анимация 300ms
|
setTimeout(() => onClose(toast.id), 300)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getIcon = () => {
|
const getIcon = () => {
|
||||||
@@ -45,47 +50,53 @@ function Toast({ toast, onClose }) {
|
|||||||
case 'error': return <IconX size={20} />
|
case 'error': return <IconX size={20} />
|
||||||
case 'warning': return <IconAlertTriangle size={20} />
|
case 'warning': return <IconAlertTriangle size={20} />
|
||||||
case 'info': return <IconInfoCircle size={20} />
|
case 'info': return <IconInfoCircle size={20} />
|
||||||
default: return null
|
default: return <IconInfoCircle size={20} />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getColorClass = () => {
|
const alertClass = {
|
||||||
switch (toast.type) {
|
success: 'alert-success',
|
||||||
case 'success': return 'alert-success'
|
error: 'alert-danger',
|
||||||
case 'error': return 'alert-danger'
|
warning: 'alert-warning',
|
||||||
case 'warning': return 'alert-warning'
|
info: 'alert-info',
|
||||||
case 'info': return 'alert-info'
|
}[toast.type] || 'alert-info'
|
||||||
default: return 'alert-info'
|
|
||||||
}
|
const title = toast.title ?? DEFAULT_TITLES[toast.type]
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`alert ${getColorClass()} alert-dismissible fade ${isLeaving ? '' : 'show'}`}
|
className={`toast show toast-alert ${isLeaving ? 'toast-leaving' : ''}`}
|
||||||
role="alert"
|
role="alert"
|
||||||
|
aria-live="assertive"
|
||||||
|
aria-atomic="true"
|
||||||
|
data-toast-type={toast.type}
|
||||||
style={{
|
style={{
|
||||||
minWidth: '300px',
|
minWidth: '320px',
|
||||||
maxWidth: '400px',
|
maxWidth: '420px',
|
||||||
boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)',
|
overflow: 'hidden',
|
||||||
animation: isLeaving ? 'slideOutRight 0.3s ease-out' : 'slideInRight 0.3s ease-out'
|
borderRadius: 'var(--tblr-border-radius, 0.25rem)',
|
||||||
|
animation: isLeaving ? 'slideOutRight 0.3s ease-out forwards' : 'slideInRight 0.3s ease-out forwards',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="d-flex align-items-start">
|
<div className={`alert ${alertClass} toast-alert-inner mb-0`}>
|
||||||
<div className="me-2 mt-1">
|
<div className="toast-header toast-alert-header">
|
||||||
{getIcon()}
|
<span className="toast-alert-icon me-2">{getIcon()}</span>
|
||||||
|
<strong className="me-auto">{title}</strong>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn-close"
|
||||||
|
onClick={handleClose}
|
||||||
|
aria-label="Закрыть"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow-1">
|
<div className="toast-body">
|
||||||
{toast.title && (
|
<div className="alert-description">{toast.message}</div>
|
||||||
<h4 className="alert-title">{toast.title}</h4>
|
|
||||||
)}
|
|
||||||
<div className="text-secondary">{toast.message}</div>
|
|
||||||
|
|
||||||
{/* Действия */}
|
|
||||||
{toast.actions && toast.actions.length > 0 && (
|
{toast.actions && toast.actions.length > 0 && (
|
||||||
<div className="btn-list mt-2">
|
<div className="btn-list mt-2">
|
||||||
{toast.actions.map((action, idx) => (
|
{toast.actions.map((action, idx) => (
|
||||||
<button
|
<button
|
||||||
key={idx}
|
key={idx}
|
||||||
|
type="button"
|
||||||
className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
|
className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action.onClick?.()
|
action.onClick?.()
|
||||||
@@ -99,12 +110,6 @@ function Toast({ toast, onClose }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close"
|
|
||||||
onClick={handleClose}
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -153,45 +158,72 @@ export function ToastContainer({ children }) {
|
|||||||
<ToastContext.Provider value={contextValue}>
|
<ToastContext.Provider value={contextValue}>
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
{/* Контейнер с toast'ами */}
|
{/* Контейнер тостов справа (как в Tabler) */}
|
||||||
<div
|
<div className="toast-container toast-container-end">
|
||||||
style={{
|
{toasts.map((t) => (
|
||||||
position: 'fixed',
|
<Toast key={t.id} toast={t} onClose={removeToast} />
|
||||||
bottom: '20px',
|
|
||||||
right: '20px',
|
|
||||||
zIndex: 9999,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '10px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{toasts.map(toast => (
|
|
||||||
<Toast key={toast.id} toast={toast} onClose={removeToast} />
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CSS анимации */}
|
{/* Стили: тосты в стиле Tabler Alerts, всплывают справа */}
|
||||||
<style>{`
|
<style>{`
|
||||||
@keyframes slideInRight {
|
.toast-container-end {
|
||||||
from {
|
position: fixed;
|
||||||
transform: translateX(100%);
|
top: 1rem;
|
||||||
opacity: 0;
|
right: 1rem;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
to {
|
.toast-container-end .toast {
|
||||||
transform: translateX(0);
|
pointer-events: auto;
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
/* NotifyProvider тосты ниже, чтобы не перекрывать useToast */
|
||||||
|
.toast-container-end.notify-viewport {
|
||||||
|
top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Toast в стиле Tabler Alert: колоночный layout, без дублирования отступов */
|
||||||
|
.toast-alert .toast-alert-inner {
|
||||||
|
display: block;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
gap: 0;
|
||||||
|
border-radius: var(--tblr-border-radius, 0.25rem);
|
||||||
|
box-shadow: var(--tblr-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
|
||||||
|
}
|
||||||
|
.toast-alert .toast-alert-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.toast-alert .toast-alert-icon {
|
||||||
|
color: inherit;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.toast-alert .toast-body {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
.toast-alert .toast-body .alert-description {
|
||||||
|
color: var(--tblr-secondary);
|
||||||
|
}
|
||||||
|
.toast-alert.alert-danger .toast-alert-header { border-bottom-color: rgba(0, 0, 0, 0.1); }
|
||||||
|
.toast-alert .btn-close {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from { transform: translateX(100%); opacity: 0; }
|
||||||
|
to { transform: translateX(0); opacity: 1; }
|
||||||
|
}
|
||||||
@keyframes slideOutRight {
|
@keyframes slideOutRight {
|
||||||
from {
|
from { transform: translateX(0); opacity: 1; }
|
||||||
transform: translateX(0);
|
to { transform: translateX(100%); opacity: 0; }
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(100%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</ToastContext.Provider>
|
</ToastContext.Provider>
|
||||||
|
|||||||
@@ -0,0 +1,253 @@
|
|||||||
|
import { useRef, useMemo } from 'react';
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
|
import { IconArrowUp, IconArrowDown, IconEdit, IconTrash, IconCopy } from '@tabler/icons-react';
|
||||||
|
import TableSkeleton from './TableSkeleton.jsx';
|
||||||
|
import EmptyState from './EmptyState.jsx';
|
||||||
|
import Tooltip from './Tooltip.jsx';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Виртуализированная таблица для больших списков данных (1000+ элементов)
|
||||||
|
* Рендерит только видимые строки для оптимальной производительности
|
||||||
|
*
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {Array} props.columns - Массив описаний колонок
|
||||||
|
* @param {Array} props.items - Массив данных для отображения
|
||||||
|
* @param {string} props.itemKey - Ключ уникального идентификатора
|
||||||
|
* @param {boolean} props.loading - Состояние загрузки
|
||||||
|
* @param {string} props.sortField - Текущее поле сортировки
|
||||||
|
* @param {string} props.sortOrder - Направление сортировки
|
||||||
|
* @param {function} props.onSort - Обработчик сортировки
|
||||||
|
* @param {Set} props.selectedItems - Выбранные элементы
|
||||||
|
* @param {function} props.onSelectItem - Обработчик выбора
|
||||||
|
* @param {function} props.onSelectAll - Обработчик выбора всех
|
||||||
|
* @param {function} props.onEdit - Обработчик редактирования
|
||||||
|
* @param {function} props.onDelete - Обработчик удаления
|
||||||
|
* @param {function} props.onCopy - Обработчик копирования
|
||||||
|
* @param {number} props.rowHeight - Высота строки в пикселях (default: 48)
|
||||||
|
* @param {number} props.containerHeight - Высота контейнера (default: 600)
|
||||||
|
* @param {number} props.overscan - Количество дополнительных строк (default: 5)
|
||||||
|
* @param {Object} props.emptyState - Настройки пустого состояния
|
||||||
|
* @param {boolean} props.selectable - Включить чекбоксы (default: true)
|
||||||
|
*/
|
||||||
|
function VirtualizedTable({
|
||||||
|
columns = [],
|
||||||
|
items = [],
|
||||||
|
itemKey = 'id',
|
||||||
|
loading = false,
|
||||||
|
sortField,
|
||||||
|
sortOrder = 'asc',
|
||||||
|
onSort,
|
||||||
|
selectedItems = new Set(),
|
||||||
|
onSelectItem,
|
||||||
|
onSelectAll,
|
||||||
|
onDeselectAll,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onCopy,
|
||||||
|
rowHeight = 48,
|
||||||
|
containerHeight = 600,
|
||||||
|
overscan = 5,
|
||||||
|
emptyState,
|
||||||
|
selectable = true,
|
||||||
|
actions = [],
|
||||||
|
}) {
|
||||||
|
const parentRef = useRef(null);
|
||||||
|
const hasActions = onEdit || onDelete || onCopy || actions.length > 0;
|
||||||
|
|
||||||
|
const virtualizer = useVirtualizer({
|
||||||
|
count: items.length,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
estimateSize: () => rowHeight,
|
||||||
|
overscan,
|
||||||
|
});
|
||||||
|
|
||||||
|
const virtualItems = virtualizer.getVirtualItems();
|
||||||
|
const totalSize = virtualizer.getTotalSize();
|
||||||
|
|
||||||
|
// Рендер заголовка
|
||||||
|
const renderHeader = () => (
|
||||||
|
<thead className="sticky-top bg-white" style={{ zIndex: 1 }}>
|
||||||
|
<tr>
|
||||||
|
{selectable && (
|
||||||
|
<th style={{ width: '40px' }}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
checked={items.length > 0 && items.every(i => selectedItems.has(i[itemKey]))}
|
||||||
|
onChange={(e) => e.target.checked ? onSelectAll?.() : onDeselectAll?.()}
|
||||||
|
title="Выбрать все"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
)}
|
||||||
|
{columns.map((col) => {
|
||||||
|
const isSortable = col.sortable !== false && onSort;
|
||||||
|
const isActive = sortField === col.key;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
key={col.key}
|
||||||
|
className={isSortable ? 'cursor-pointer user-select-none' : ''}
|
||||||
|
onClick={isSortable ? () => onSort(col.key) : undefined}
|
||||||
|
style={col.width ? { width: col.width } : undefined}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
{col.icon && <col.icon size={16} className="me-1 text-muted" />}
|
||||||
|
{col.title}
|
||||||
|
{isSortable && isActive && (
|
||||||
|
<span className="ms-1">
|
||||||
|
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{hasActions && <th className="text-end">Действия</th>}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Рендер действий
|
||||||
|
const renderActions = (item) => (
|
||||||
|
<>
|
||||||
|
{onEdit && (
|
||||||
|
<Tooltip content="Редактировать">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-primary btn-icon btn-sm me-1"
|
||||||
|
onClick={() => onEdit(item)}
|
||||||
|
>
|
||||||
|
<IconEdit size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{onCopy && (
|
||||||
|
<Tooltip content="Копировать">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-icon btn-sm me-1"
|
||||||
|
onClick={() => onCopy(item)}
|
||||||
|
>
|
||||||
|
<IconCopy size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{actions.map((action, idx) => (
|
||||||
|
<Tooltip key={idx} content={action.label}>
|
||||||
|
<button
|
||||||
|
className={`btn btn-outline-${action.variant || 'secondary'} btn-icon btn-sm me-1`}
|
||||||
|
onClick={() => action.onClick(item)}
|
||||||
|
>
|
||||||
|
<action.icon size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
{onDelete && (
|
||||||
|
<Tooltip content="Удалить">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger btn-icon btn-sm"
|
||||||
|
onClick={() => onDelete(item)}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Загрузка
|
||||||
|
if (loading) {
|
||||||
|
return <TableSkeleton rows={10} cols={columns.length + (hasActions ? 1 : 0)} hasCheckbox={selectable} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Пустое состояние
|
||||||
|
if (items.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="p-4">
|
||||||
|
{emptyState ? (
|
||||||
|
<EmptyState
|
||||||
|
title={emptyState.title}
|
||||||
|
description={emptyState.description}
|
||||||
|
action={emptyState.action}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<EmptyState title="Нет данных" description="Добавьте записи, чтобы начать." />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||||
|
{renderHeader()}
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
style={{
|
||||||
|
height: `${Math.min(containerHeight, items.length * rowHeight + 20)}px`,
|
||||||
|
overflow: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ height: `${totalSize}px`, position: 'relative' }}>
|
||||||
|
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||||
|
<tbody>
|
||||||
|
{virtualItems.map((virtualRow) => {
|
||||||
|
const item = items[virtualRow.index];
|
||||||
|
const id = item[itemKey];
|
||||||
|
const isSelected = selectedItems.has(id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={id}
|
||||||
|
className={isSelected ? 'table-selected' : ''}
|
||||||
|
style={{
|
||||||
|
height: `${rowHeight}px`,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
transform: `translateY(${virtualRow.start}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectable && (
|
||||||
|
<td style={{ width: '40px' }}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={() => onSelectItem?.(id)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td key={col.key} className={col.className} style={col.width ? { width: col.width } : undefined}>
|
||||||
|
{col.render ? col.render(item[col.key], item) : item[col.key]}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
{hasActions && (
|
||||||
|
<td className="text-end">
|
||||||
|
{renderActions(item)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<span className="text-muted">
|
||||||
|
Показано {items.length} записей
|
||||||
|
{items.length > 100 && (
|
||||||
|
<span className="badge bg-blue-lt text-blue ms-2">Виртуализация активна</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VirtualizedTable;
|
||||||
|
|
||||||
@@ -0,0 +1,264 @@
|
|||||||
|
import {
|
||||||
|
IconEdit,
|
||||||
|
IconTrash,
|
||||||
|
IconChevronDown,
|
||||||
|
IconChevronUp,
|
||||||
|
IconCreditCard,
|
||||||
|
IconExternalLink,
|
||||||
|
IconCalendar,
|
||||||
|
IconAlertTriangle,
|
||||||
|
IconCheck,
|
||||||
|
IconServer,
|
||||||
|
IconClock
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
// Форматирование даты
|
||||||
|
function formatDate(dateString) {
|
||||||
|
if (!dateString) return '—';
|
||||||
|
try {
|
||||||
|
return new Date(dateString).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||||
|
} catch {
|
||||||
|
return dateString;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Форматирование валюты
|
||||||
|
function formatCurrency(amount, currency = 'USD') {
|
||||||
|
if (amount === undefined || amount === null || amount === '') return '—';
|
||||||
|
return new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: currency,
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2
|
||||||
|
}).format(amount);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BillingCard({
|
||||||
|
item,
|
||||||
|
linkedServer,
|
||||||
|
daysUntilPayment,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onAddPayment,
|
||||||
|
formatCurrencyInRUB
|
||||||
|
}) {
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
|
const days = daysUntilPayment;
|
||||||
|
const isOverdue = days !== null && days < 0;
|
||||||
|
const isUrgent = days !== null && days >= 0 && days <= 7;
|
||||||
|
const isActive = item.status === 'active';
|
||||||
|
|
||||||
|
// Определяем цвет левой панели
|
||||||
|
const getPanelColor = () => {
|
||||||
|
if (isOverdue) return 'bg-red-lt';
|
||||||
|
if (isUrgent) return 'bg-yellow-lt';
|
||||||
|
if (!isActive) return 'bg-secondary-lt';
|
||||||
|
return 'bg-green-lt';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPanelTextColor = () => {
|
||||||
|
if (isOverdue) return 'text-red';
|
||||||
|
if (isUrgent) return 'text-yellow';
|
||||||
|
if (!isActive) return 'text-secondary';
|
||||||
|
return 'text-green';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="card mb-2"
|
||||||
|
style={{
|
||||||
|
borderRadius: '12px',
|
||||||
|
borderWidth: '1px',
|
||||||
|
transition: 'all 0.15s ease'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{/* Основная строка */}
|
||||||
|
<div className="d-flex align-items-stretch">
|
||||||
|
{/* Левая часть: статус */}
|
||||||
|
<div
|
||||||
|
className={`d-flex align-items-center justify-content-center px-3 ${getPanelColor()}`}
|
||||||
|
style={{
|
||||||
|
minWidth: '90px',
|
||||||
|
borderTopLeftRadius: '11px',
|
||||||
|
borderBottomLeftRadius: expanded ? '0' : '11px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-1">
|
||||||
|
{isOverdue ? (
|
||||||
|
<IconAlertTriangle size={22} className="text-red" />
|
||||||
|
) : isUrgent ? (
|
||||||
|
<IconClock size={22} className="text-yellow" />
|
||||||
|
) : isActive ? (
|
||||||
|
<IconCheck size={22} className="text-green" />
|
||||||
|
) : (
|
||||||
|
<IconServer size={22} className="text-secondary" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`fw-bold ${getPanelTextColor()}`} style={{ fontSize: '0.6rem', letterSpacing: '0.5px' }}>
|
||||||
|
{isOverdue ? 'ПРОСРОЧЕН' : isUrgent ? 'СРОЧНО' : isActive ? 'АКТИВЕН' : 'НЕАКТИВЕН'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Центральная часть: информация */}
|
||||||
|
<div className="flex-grow-1 py-2 px-3" style={{ cursor: 'pointer' }} onClick={() => setExpanded(!expanded)}>
|
||||||
|
{/* Верхняя строка */}
|
||||||
|
<div className="d-flex align-items-center mb-1">
|
||||||
|
<div className="d-flex align-items-center me-3">
|
||||||
|
<div>
|
||||||
|
<span className="fw-semibold">{item.hostName}</span>
|
||||||
|
{item._external && (
|
||||||
|
<span className="badge bg-yellow-lt text-yellow ms-2" title="Импортирован из серверов, требует заполнения">
|
||||||
|
не заполнен
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-muted mx-2">•</span>
|
||||||
|
<span className="text-muted">{item.provider}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Стоимость справа */}
|
||||||
|
<div className="ms-auto text-end">
|
||||||
|
<span className="fw-bold">{formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}</span>
|
||||||
|
{item.monthlyCostCurrency !== 'RUB' && formatCurrencyInRUB && (
|
||||||
|
<span className="text-muted small ms-2">
|
||||||
|
≈ {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Нижняя строка */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
{linkedServer && (
|
||||||
|
<span className="badge bg-blue-lt text-blue">
|
||||||
|
<IconServer size={12} className="me-1" />
|
||||||
|
{linkedServer.ip}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span className={`badge ${isOverdue ? 'bg-red-lt text-red' : isUrgent ? 'bg-yellow-lt text-yellow' : 'bg-secondary-lt text-secondary'}`}>
|
||||||
|
<IconCalendar size={12} className="me-1" />
|
||||||
|
{formatDate(item.nextPaymentDate)}
|
||||||
|
{days !== null && (
|
||||||
|
<span className="ms-1">
|
||||||
|
({days < 0 ? `${Math.abs(days)} дн. назад` : days === 0 ? 'сегодня' : `через ${days} дн.`})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{item.loginUrl && (
|
||||||
|
<a
|
||||||
|
href={item.loginUrl.startsWith('http') ? item.loginUrl : `https://${item.loginUrl}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="badge bg-azure-lt text-azure text-decoration-none"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<IconExternalLink size={12} className="me-1" />
|
||||||
|
Панель
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Правая часть: действия */}
|
||||||
|
<div className="d-flex align-items-center gap-2 px-3 border-start">
|
||||||
|
<div className="btn-group" role="group" aria-label="Действия с записью биллинга">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-success"
|
||||||
|
title="Записать платёж"
|
||||||
|
style={{ minWidth: '6.5rem' }}
|
||||||
|
onClick={(e) => { e.stopPropagation(); onAddPayment?.(item); }}
|
||||||
|
>
|
||||||
|
<IconCreditCard size={16} className="me-1" />
|
||||||
|
Оплатить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary"
|
||||||
|
title="Редактировать"
|
||||||
|
style={{ minWidth: '6.5rem' }}
|
||||||
|
onClick={(e) => { e.stopPropagation(); onEdit?.(item); }}
|
||||||
|
>
|
||||||
|
<IconEdit size={16} className="me-1" />
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger d-flex align-items-center justify-content-center"
|
||||||
|
title="Удалить"
|
||||||
|
style={{ minWidth: '6.5rem' }}
|
||||||
|
onClick={(e) => { e.stopPropagation(); onDelete?.(item); }}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost-secondary btn-icon ms-1"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
|
||||||
|
title={expanded ? 'Свернуть' : 'Подробнее'}
|
||||||
|
>
|
||||||
|
{expanded ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Расширенная информация */}
|
||||||
|
{expanded && (
|
||||||
|
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '11px', borderBottomRightRadius: '11px' }}>
|
||||||
|
<div className="row g-0">
|
||||||
|
{/* Детали подписки */}
|
||||||
|
<div className="col-md-6 p-3 border-end">
|
||||||
|
<div className="text-muted small mb-2 fw-medium">
|
||||||
|
<IconServer size={14} className="me-1" />
|
||||||
|
Детали подписки
|
||||||
|
</div>
|
||||||
|
<div className="row g-2">
|
||||||
|
<div className="col-6">
|
||||||
|
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Провайдер</div>
|
||||||
|
<div className="fw-medium">{item.provider || '—'}</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-6">
|
||||||
|
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Статус</div>
|
||||||
|
<span className={`badge ${isActive ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
|
||||||
|
{isActive ? 'Активен' : 'Неактивен'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.notes && (
|
||||||
|
<div className="col-12 mt-2">
|
||||||
|
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Заметки</div>
|
||||||
|
<div className="text-muted small">{item.notes}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* История платежей */}
|
||||||
|
<div className="col-md-6 p-3">
|
||||||
|
<div className="text-muted small mb-2 fw-medium">
|
||||||
|
<IconCreditCard size={14} className="me-1" />
|
||||||
|
Последние платежи ({item.payments?.length || 0})
|
||||||
|
</div>
|
||||||
|
{item.payments?.length > 0 ? (
|
||||||
|
<div className="d-flex flex-column gap-1">
|
||||||
|
{item.payments.slice(-3).reverse().map((p, idx) => (
|
||||||
|
<div key={idx} className="d-flex justify-content-between align-items-center small">
|
||||||
|
<span className="text-muted">{formatDate(p.date)}</span>
|
||||||
|
<span className="fw-medium">{formatCurrency(p.amount, p.currency)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="text-muted small">Нет платежей</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as BillingCard } from './BillingCard.jsx';
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import { IconPlus, IconAlertTriangle } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно добавления фильтра
|
||||||
|
*/
|
||||||
|
function AddFilterModal({ show, newFilter, onNewFilterChange, onAddFilter, onClose, error, communities = [] }) {
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
const handleChange = (field, value) => {
|
||||||
|
onNewFilterChange({ ...newFilter, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onAddFilter();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Добавить новый фильтр</h5>
|
||||||
|
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="modal-body">
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger">
|
||||||
|
<IconAlertTriangle className="me-2" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Community *</label>
|
||||||
|
<input
|
||||||
|
list="community-options"
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Начните вводить или выберите из списка"
|
||||||
|
value={newFilter.community}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
onNewFilterChange({ ...newFilter, community: v });
|
||||||
|
const found = communities.find(c => c.value === v);
|
||||||
|
if (found && found.gatewayDefault && !newFilter.gateway) {
|
||||||
|
onNewFilterChange({ ...newFilter, community: v, gateway: found.gatewayDefault });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<datalist id="community-options">
|
||||||
|
{communities.map(c => (
|
||||||
|
<option key={c.value} value={c.value}>{c.name ? `${c.name} — ${c.value}` : c.value}</option>
|
||||||
|
))}
|
||||||
|
</datalist>
|
||||||
|
<div className="form-text">Поддерживается формат AS:NNN. Вы можете выбрать готовое значение из справочника.</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Gateway *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="SWE-HIPHOST"
|
||||||
|
value={newFilter.gateway}
|
||||||
|
onChange={(e) => handleChange('gateway', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="form-text">Название gateway для маршрутизации</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Описание</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Описание фильтра"
|
||||||
|
value={newFilter.description}
|
||||||
|
onChange={(e) => handleChange('description', e.target.value)}
|
||||||
|
/>
|
||||||
|
<div className="form-text">Необязательное описание фильтра</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
<IconPlus className="me-2" />
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddFilterModal;
|
||||||
|
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import { IconPlus, IconAlertTriangle } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно добавления сервера для фильтров
|
||||||
|
*/
|
||||||
|
function AddFilterServerModal({ show, newServer, onNewServerChange, onAddServer, onClose, error }) {
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
const handleChange = (field, value) => {
|
||||||
|
onNewServerChange({ ...newServer, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onAddServer();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Добавить новый сервер</h5>
|
||||||
|
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="modal-body">
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger">
|
||||||
|
<IconAlertTriangle className="me-2" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Имя сервера *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Например, SWE-HIPHOST"
|
||||||
|
value={newServer.name}
|
||||||
|
onChange={(e) => handleChange('name', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Описание</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Необязательное описание сервера"
|
||||||
|
value={newServer.description}
|
||||||
|
onChange={(e) => handleChange('description', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Включен</label>
|
||||||
|
<div className="form-check">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={newServer.enabled}
|
||||||
|
onChange={(e) => handleChange('enabled', e.target.checked)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
<IconPlus className="me-2" />
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddFilterServerModal;
|
||||||
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { IconTrash } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно удаления фильтра
|
||||||
|
*/
|
||||||
|
function DeleteFilterModal({ show, filter, onDelete, onClose }) {
|
||||||
|
if (!show || !filter) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Подтверждение удаления</h5>
|
||||||
|
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>Вы уверены, что хотите удалить фильтр?</p>
|
||||||
|
<div className="alert alert-warning">
|
||||||
|
<strong>Community:</strong> {filter?.community || ''}<br />
|
||||||
|
<strong>Gateway:</strong> {filter?.gateway || ''}<br />
|
||||||
|
{filter?.description && <><strong>Описание:</strong> {filter.description}</>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-danger" onClick={onDelete}>
|
||||||
|
<IconTrash className="me-2" />
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DeleteFilterModal;
|
||||||
|
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
import { IconCheck } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно редактирования фильтра
|
||||||
|
*/
|
||||||
|
function EditFilterModal({ show, filter, onChange, onSave, onClose }) {
|
||||||
|
if (!show || !filter) return null;
|
||||||
|
|
||||||
|
const handleChange = (field, value) => {
|
||||||
|
onChange({ ...filter, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onSave(filter);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Редактировать фильтр</h5>
|
||||||
|
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Community *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="65001:200"
|
||||||
|
value={filter?.community || ''}
|
||||||
|
onChange={(e) => handleChange('community', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Gateway *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="SWE-HIPHOST"
|
||||||
|
value={filter?.gateway || ''}
|
||||||
|
onChange={(e) => handleChange('gateway', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Описание</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Описание фильтра"
|
||||||
|
value={filter?.description || ''}
|
||||||
|
onChange={(e) => handleChange('description', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
<IconCheck className="me-2" />
|
||||||
|
Сохранить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditFilterModal;
|
||||||
|
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
import { IconFilter, IconCopy, IconEye } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно предварительного просмотра конфигурации
|
||||||
|
*/
|
||||||
|
function PreviewConfigModal({ show, config, mode, onClose, onCopy, title, description }) {
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
const getModalTitle = () => {
|
||||||
|
if (title) return title;
|
||||||
|
if (mode === 'simple') {
|
||||||
|
return 'Предварительный просмотр конфигурации MikroTik (упрощённый режим)';
|
||||||
|
} else if (mode === 'advanced') {
|
||||||
|
return 'Предварительный просмотр конфигурации MikroTik (расширенный режим)';
|
||||||
|
}
|
||||||
|
return 'Предварительный просмотр конфигурации MikroTik';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getModeBadge = () => {
|
||||||
|
if (mode === 'simple') {
|
||||||
|
return <span className="badge bg-blue-lt text-blue ms-2">Упрощённый режим</span>;
|
||||||
|
} else if (mode === 'advanced') {
|
||||||
|
return <span className="badge bg-green-lt text-green ms-2">Расширенный режим</span>;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getConfigInfo = () => {
|
||||||
|
if (description) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-info mb-3">
|
||||||
|
<IconEye className="me-2" />
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.includes('// Сначала выберите сервер') || config.includes('// Нет фильтров для генерации конфигурации') || config.includes('// Нет рекурсивных gateway')) {
|
||||||
|
return <div className="alert alert-warning mb-3">Нет данных для генерации конфигурации</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Подсчитываем количество фильтров из конфигурации
|
||||||
|
const communityMatches = config.match(/bgp-communities includes [^)]+/g);
|
||||||
|
const filterCount = communityMatches ? communityMatches.length : 0;
|
||||||
|
|
||||||
|
if (filterCount > 0) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-info mb-3">
|
||||||
|
<IconFilter className="me-2" />
|
||||||
|
Конфигурация сгенерирована на основе {filterCount} фильтр(ов)
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="alert alert-info mb-3">
|
||||||
|
<IconEye className="me-2" />
|
||||||
|
Конфигурация MikroTik RouterOS для применения фильтров
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isConfigEmpty = config.includes('// Сначала выберите сервер') ||
|
||||||
|
config.includes('// Нет фильтров для генерации конфигурации') ||
|
||||||
|
config.includes('// Нет рекурсивных gateway');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog modal-lg">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">
|
||||||
|
{getModalTitle()}
|
||||||
|
{getModeBadge()}
|
||||||
|
</h5>
|
||||||
|
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
{getConfigInfo()}
|
||||||
|
<pre className="bg-dark text-white p-3 rounded" style={{ maxHeight: '500px', overflow: 'auto' }}>
|
||||||
|
<code>{config}</code>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<div className="mt-3 text-muted small">
|
||||||
|
<p className="mb-1"><strong>Инструкция по применению:</strong></p>
|
||||||
|
<ol className="mb-0">
|
||||||
|
<li>Скопируйте конфигурацию в буфер обмена</li>
|
||||||
|
<li>Подключитесь к MikroTik через SSH или Winbox</li>
|
||||||
|
<li>Вставьте конфигурацию в терминал</li>
|
||||||
|
<li>Проверьте применение командой: <code>/routing filter print</code> или <code>/ip route print</code></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={onCopy}
|
||||||
|
disabled={isConfigEmpty}
|
||||||
|
>
|
||||||
|
<IconCopy className="me-2" />
|
||||||
|
Копировать в буфер
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PreviewConfigModal;
|
||||||
|
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export { default as AddFilterModal } from './AddFilterModal.jsx';
|
||||||
|
export { default as EditFilterModal } from './EditFilterModal.jsx';
|
||||||
|
export { default as DeleteFilterModal } from './DeleteFilterModal.jsx';
|
||||||
|
export { default as PreviewConfigModal } from './PreviewConfigModal.jsx';
|
||||||
|
export { default as AddFilterServerModal } from './AddFilterServerModal.jsx';
|
||||||
|
|
||||||
@@ -0,0 +1,184 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { IconPlus } from '@tabler/icons-react';
|
||||||
|
import { SERVER_TYPE_OPTIONS } from '../../utils/serverUtils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно для добавления нового сервера
|
||||||
|
*/
|
||||||
|
function AddServerModal({ show, newServer, customProvider, onNewServerChange, onCustomProviderChange, onAddServer, onClose, error }) {
|
||||||
|
const modalRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||||
|
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||||
|
if (show) {
|
||||||
|
modalInstance.show();
|
||||||
|
} else {
|
||||||
|
modalInstance.hide();
|
||||||
|
}
|
||||||
|
const handler = () => onClose && onClose();
|
||||||
|
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||||
|
return () => {
|
||||||
|
if (modalRef.current) {
|
||||||
|
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [show, onClose]);
|
||||||
|
|
||||||
|
const handleChange = (field, value) => {
|
||||||
|
onNewServerChange({ ...newServer, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onAddServer();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal" tabIndex="-1" ref={modalRef}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">
|
||||||
|
<IconPlus className="icon me-2" />
|
||||||
|
Добавить новый сервер
|
||||||
|
</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger" role="alert">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">IP адрес *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="192.168.1.1"
|
||||||
|
value={newServer.ip}
|
||||||
|
onChange={(e) => handleChange('ip', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">DNS имя *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="srv1.shx.su"
|
||||||
|
value={newServer.dns}
|
||||||
|
onChange={(e) => handleChange('dns', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Страна *</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={newServer.country}
|
||||||
|
onChange={(e) => handleChange('country', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Выберите страну</option>
|
||||||
|
<option value="RU">Россия (RU)</option>
|
||||||
|
<option value="SWE">Швеция (SWE)</option>
|
||||||
|
<option value="US">США (US)</option>
|
||||||
|
<option value="DE">Германия (DE)</option>
|
||||||
|
<option value="NL">Нидерланды (NL)</option>
|
||||||
|
<option value="SG">Сингапур (SG)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Провайдер *</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={newServer.provider}
|
||||||
|
onChange={(e) => handleChange('provider', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Выберите провайдера</option>
|
||||||
|
<option value="Yandex">Yandex Cloud</option>
|
||||||
|
<option value="AWS">Amazon Web Services</option>
|
||||||
|
<option value="Google">Google Cloud</option>
|
||||||
|
<option value="Azure">Microsoft Azure</option>
|
||||||
|
<option value="Hetzner">Hetzner</option>
|
||||||
|
<option value="OVH">OVH</option>
|
||||||
|
<option value="DigitalOcean">DigitalOcean</option>
|
||||||
|
<option value="Vultr">Vultr</option>
|
||||||
|
<option value="Linode">Linode</option>
|
||||||
|
<option value="VPSVILLE">VPSVILLE</option>
|
||||||
|
<option value="HIPHOST">HIPHOST</option>
|
||||||
|
<option value="Другой">Другой</option>
|
||||||
|
</select>
|
||||||
|
{newServer.provider === 'Другой' && (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control mt-2"
|
||||||
|
placeholder="Введите название провайдера"
|
||||||
|
value={customProvider}
|
||||||
|
onChange={(e) => onCustomProviderChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Тип сервера *</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={newServer.type}
|
||||||
|
onChange={(e) => handleChange('type', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Выберите тип</option>
|
||||||
|
{SERVER_TYPE_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Тип туннеля *</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={newServer.tunnel}
|
||||||
|
onChange={(e) => handleChange('tunnel', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="GRE">GRE (Generic Routing Encapsulation)</option>
|
||||||
|
<option value="IPSec">IPSec</option>
|
||||||
|
<option value="WireGuard">WireGuard</option>
|
||||||
|
<option value="OpenVPN">OpenVPN</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Основной шлюз *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Cloudflare, Hetzner, Мой шлюз и т.д."
|
||||||
|
value={newServer.gateway}
|
||||||
|
onChange={(e) => handleChange('gateway', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
|
||||||
|
<span className="fw-bold">Отмена</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={onAddServer}>
|
||||||
|
<span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
|
||||||
|
<span className="fw-bold">Добавить сервер</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddServerModal;
|
||||||
|
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно подтверждения удаления сервера
|
||||||
|
*/
|
||||||
|
function DeleteServerModal({ show, server, onDelete, onClose }) {
|
||||||
|
const modalRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||||
|
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||||
|
if (show) {
|
||||||
|
modalInstance.show();
|
||||||
|
} else {
|
||||||
|
modalInstance.hide();
|
||||||
|
}
|
||||||
|
const handler = () => onClose && onClose();
|
||||||
|
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||||
|
return () => {
|
||||||
|
if (modalRef.current) {
|
||||||
|
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [show, onClose]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal" tabIndex="-1" ref={modalRef}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-status bg-danger"></div>
|
||||||
|
<div className="modal-header">
|
||||||
|
<IconAlertTriangle className="icon text-danger me-2" size={28} />
|
||||||
|
<h5 className="modal-title">Подтверждение удаления</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>Вы уверены, что хотите удалить сервер <strong>{server?.ip}</strong>?</p>
|
||||||
|
<p className="text-muted">Это действие нельзя отменить.</p>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
|
||||||
|
<span className="fw-bold">Отмена</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
|
||||||
|
<span className="fw-bold">Удалить</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DeleteServerModal;
|
||||||
|
|
||||||
@@ -0,0 +1,267 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { IconPlus } from '@tabler/icons-react';
|
||||||
|
import {
|
||||||
|
makeGateway,
|
||||||
|
normalizeGateways,
|
||||||
|
needsGateways as NEEDS_GATEWAYS,
|
||||||
|
SERVER_TYPE_OPTIONS
|
||||||
|
} from '../../utils/serverUtils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно для редактирования сервера
|
||||||
|
*/
|
||||||
|
function EditServerModal({ show, server, onChange, onSave, onClose }) {
|
||||||
|
const modalRef = useRef(null);
|
||||||
|
const initializedRef = useRef(false);
|
||||||
|
const [localServer, setLocalServer] = useState({});
|
||||||
|
|
||||||
|
const ensureGateways = (srv) => {
|
||||||
|
if (!srv) return { gateways: [] };
|
||||||
|
const needs = NEEDS_GATEWAYS(srv.type);
|
||||||
|
let gateways = [];
|
||||||
|
if (needs) {
|
||||||
|
gateways = normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip);
|
||||||
|
if (gateways.length === 0) {
|
||||||
|
gateways = [makeGateway({ primary: true })];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { ...srv, gateways };
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (show && server && !initializedRef.current) {
|
||||||
|
const prepared = ensureGateways(server);
|
||||||
|
setLocalServer(prepared);
|
||||||
|
initializedRef.current = true;
|
||||||
|
}
|
||||||
|
if (!show) {
|
||||||
|
initializedRef.current = false;
|
||||||
|
}
|
||||||
|
}, [show, server]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||||
|
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||||
|
if (show) {
|
||||||
|
modalInstance.show();
|
||||||
|
} else {
|
||||||
|
modalInstance.hide();
|
||||||
|
}
|
||||||
|
const handler = () => onClose && onClose();
|
||||||
|
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||||
|
return () => {
|
||||||
|
if (modalRef.current) {
|
||||||
|
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [show, onClose]);
|
||||||
|
|
||||||
|
const handleFieldChange = (field, value) => {
|
||||||
|
setLocalServer(prev => {
|
||||||
|
const updated = { ...prev, [field]: value };
|
||||||
|
onChange && onChange(updated);
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGatewayChange = (idx, field, value) => {
|
||||||
|
setLocalServer(prev => {
|
||||||
|
const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
|
||||||
|
const updatedGateways = currentGateways.map((gw, i) =>
|
||||||
|
i === idx ? { ...gw, [field]: value } : gw
|
||||||
|
);
|
||||||
|
const updated = { ...prev, gateways: updatedGateways };
|
||||||
|
onChange && onChange(updated);
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrimaryChange = (idx, checked) => {
|
||||||
|
setLocalServer(prev => {
|
||||||
|
const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
|
||||||
|
const updatedGateways = currentGateways.map((gw, i) => ({
|
||||||
|
...gw,
|
||||||
|
primary: i === idx ? checked : false
|
||||||
|
}));
|
||||||
|
if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
|
||||||
|
updatedGateways[idx].primary = true;
|
||||||
|
}
|
||||||
|
const updated = { ...prev, gateways: updatedGateways };
|
||||||
|
onChange && onChange(updated);
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddGateway = () => {
|
||||||
|
setLocalServer(prev => {
|
||||||
|
const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
|
||||||
|
const newGw = makeGateway({ primary: currentGateways.length === 0 });
|
||||||
|
const updatedGateways = [...currentGateways, newGw];
|
||||||
|
const updated = { ...prev, gateways: updatedGateways };
|
||||||
|
onChange && onChange(updated);
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveGateway = (idx) => {
|
||||||
|
setLocalServer(prev => {
|
||||||
|
const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
|
||||||
|
if (currentGateways.length <= 1) return prev;
|
||||||
|
const updatedGateways = currentGateways.filter((_, i) => i !== idx);
|
||||||
|
if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
|
||||||
|
updatedGateways[0].primary = true;
|
||||||
|
}
|
||||||
|
const updated = { ...prev, gateways: updatedGateways };
|
||||||
|
onChange && onChange(updated);
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentGateways = Array.isArray(localServer.gateways) ? localServer.gateways : [];
|
||||||
|
const showGateways = NEEDS_GATEWAYS(localServer.type);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal" tabIndex="-1" ref={modalRef}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Редактировать сервер</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<form onSubmit={e => { e.preventDefault(); onSave && onSave(localServer); }}>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">ID (опционально)</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.id || ''} onChange={e => handleFieldChange('id', e.target.value)} placeholder="srv-1" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">IP адрес</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.ip || ''} onChange={e => handleFieldChange('ip', e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Внешний IP (опционально)</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.extIp || ''} onChange={e => handleFieldChange('extIp', e.target.value)} placeholder="публичный IP, если отличается" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Внутренний IP (опционально)</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.internalIp || ''} onChange={e => handleFieldChange('internalIp', e.target.value)} placeholder="10.x.x.x / 192.168.x.x" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">DNS имя</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.dns || ''} onChange={e => handleFieldChange('dns', e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Страна</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.country || ''} onChange={e => handleFieldChange('country', e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Провайдер</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.provider || ''} onChange={e => handleFieldChange('provider', e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Тип сервера</label>
|
||||||
|
<select className="form-select" value={localServer.type || 'jumphost'} onChange={e => handleFieldChange('type', e.target.value)}>
|
||||||
|
{SERVER_TYPE_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Тип туннеля</label>
|
||||||
|
<input type="text" className="form-control" value={localServer.tunnel || ''} onChange={e => handleFieldChange('tunnel', e.target.value)} />
|
||||||
|
</div>
|
||||||
|
{showGateways && (
|
||||||
|
<>
|
||||||
|
<div className="form-label">Шлюзы ({currentGateways.length})</div>
|
||||||
|
<div className="list-group list-group-flush border rounded mb-2">
|
||||||
|
{currentGateways.map((gw, idx) => (
|
||||||
|
<div key={gw.id || `gw-${idx}`} className="list-group-item">
|
||||||
|
<div className="row g-2 align-items-end">
|
||||||
|
<div className="col-12 col-md-4">
|
||||||
|
<label className="form-label small mb-1">Имя *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={gw.name || ''}
|
||||||
|
onChange={(e) => handleGatewayChange(idx, 'name', e.target.value)}
|
||||||
|
placeholder="GW-MSK"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-4">
|
||||||
|
<label className="form-label small mb-1">IP</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={gw.ip || ''}
|
||||||
|
onChange={(e) => handleGatewayChange(idx, 'ip', e.target.value)}
|
||||||
|
placeholder="10.0.0.1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-3">
|
||||||
|
<label className="form-label small mb-1">Комментарий</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={gw.comment || ''}
|
||||||
|
onChange={(e) => handleGatewayChange(idx, 'comment', e.target.value)}
|
||||||
|
placeholder="Основной шлюз"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-1 d-flex align-items-center justify-content-center">
|
||||||
|
<div className="form-check form-switch m-0">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={!!gw.primary}
|
||||||
|
onChange={(e) => handlePrimaryChange(idx, e.target.checked)}
|
||||||
|
title="Основной шлюз"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-2">
|
||||||
|
<div className="text-muted small">{gw.primary ? 'Основной шлюз' : 'Резервный шлюз'}</div>
|
||||||
|
{currentGateways.length > 1 && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-link text-danger px-0"
|
||||||
|
onClick={() => handleRemoveGateway(idx)}
|
||||||
|
>
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary btn-sm"
|
||||||
|
onClick={handleAddGateway}
|
||||||
|
>
|
||||||
|
<IconPlus className="icon" />
|
||||||
|
Добавить шлюз
|
||||||
|
</button>
|
||||||
|
<div className="form-text">Для jumphost/exit должен быть один основной gateway.</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
|
||||||
|
<span className="fw-bold">Отмена</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={() => onSave && onSave(localServer)}>
|
||||||
|
<span className="fw-bold">Сохранить</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditServerModal;
|
||||||
|
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { IconLink, IconDownload } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Модальное окно генератора ссылок для сервера
|
||||||
|
*/
|
||||||
|
function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, onGenerateUrl, onCopyToClipboard, onClose }) {
|
||||||
|
const modalRef = useRef(null);
|
||||||
|
const [localUrlSettings, setLocalUrlSettings] = useState(urlSettings);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLocalUrlSettings(urlSettings);
|
||||||
|
}, [urlSettings]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||||
|
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||||
|
if (show) {
|
||||||
|
modalInstance.show();
|
||||||
|
} else {
|
||||||
|
modalInstance.hide();
|
||||||
|
}
|
||||||
|
const handler = () => onClose && onClose();
|
||||||
|
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||||
|
return () => {
|
||||||
|
if (modalRef.current) {
|
||||||
|
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [show, onClose]);
|
||||||
|
|
||||||
|
const handleSettingChange = (key, value) => {
|
||||||
|
const updated = { ...localUrlSettings, [key]: value };
|
||||||
|
setLocalUrlSettings(updated);
|
||||||
|
onUrlSettingsChange(updated);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveSettings = () => {
|
||||||
|
onUrlSettingsChange(localUrlSettings);
|
||||||
|
localStorage.setItem('urlSettings', JSON.stringify(localUrlSettings));
|
||||||
|
};
|
||||||
|
|
||||||
|
const generatedUrl = server ? onGenerateUrl(server) : '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal modal-lg" tabIndex="-1" ref={modalRef}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">
|
||||||
|
<IconLink className="icon me-2" />
|
||||||
|
Генератор ссылок для {server?.ip}
|
||||||
|
</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h6 className="mb-3">Настройки URL</h6>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Базовый URL</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.baseUrl}
|
||||||
|
onChange={e => handleSettingChange('baseUrl', e.target.value)}
|
||||||
|
placeholder="https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Cloudflare Gateway</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.cloudflare_gateway}
|
||||||
|
onChange={e => handleSettingChange('cloudflare_gateway', e.target.value)}
|
||||||
|
placeholder="SWE-IHOR или IP"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Bunny Gateway</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.bunny_gateway}
|
||||||
|
onChange={e => handleSettingChange('bunny_gateway', e.target.value)}
|
||||||
|
placeholder="SWE-IHOR или IP"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Fastly Gateway</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.fastly_gateway}
|
||||||
|
onChange={e => handleSettingChange('fastly_gateway', e.target.value)}
|
||||||
|
placeholder="SWE-IHOR или IP"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Telegram Gateway</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.telegram_gateway}
|
||||||
|
onChange={e => handleSettingChange('telegram_gateway', e.target.value)}
|
||||||
|
placeholder="IP адрес"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Hetzner Gateway</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.hetzner_gateway}
|
||||||
|
onChange={e => handleSettingChange('hetzner_gateway', e.target.value)}
|
||||||
|
placeholder="IP адрес"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Тип</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.type}
|
||||||
|
onChange={e => handleSettingChange('type', e.target.value)}
|
||||||
|
placeholder="routes"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Версия</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localUrlSettings.version}
|
||||||
|
onChange={e => handleSettingChange('version', e.target.value)}
|
||||||
|
placeholder="v4.rsc"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<h6 className="mb-3">Сгенерированная ссылка</h6>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={generatedUrl}
|
||||||
|
readOnly
|
||||||
|
style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary d-flex align-items-center"
|
||||||
|
type="button"
|
||||||
|
onClick={() => onCopyToClipboard(generatedUrl)}
|
||||||
|
title="Копировать в буфер обмена"
|
||||||
|
>
|
||||||
|
<span className="me-2 d-flex align-items-center"><IconDownload size={18} /></span>
|
||||||
|
<span className="fw-bold">Копировать</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
|
||||||
|
<span className="fw-bold">Закрыть</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={handleSaveSettings}>
|
||||||
|
<span className="fw-bold">Сохранить настройки</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LinkGeneratorModal;
|
||||||
|
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import {
|
||||||
|
IconTrash,
|
||||||
|
IconCopy,
|
||||||
|
IconX,
|
||||||
|
IconNetwork,
|
||||||
|
IconDownload,
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import FloatingBulkActionsBar from '../FloatingBulkActionsBar.jsx';
|
||||||
|
|
||||||
|
export default function ServerBulkActions({
|
||||||
|
selectedCount,
|
||||||
|
onClearSelection,
|
||||||
|
onBulkDelete,
|
||||||
|
onBulkChangeTunnel,
|
||||||
|
onBulkExport,
|
||||||
|
onBulkCopyLinks,
|
||||||
|
tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN'],
|
||||||
|
}) {
|
||||||
|
const actions = [
|
||||||
|
{
|
||||||
|
type: 'dropdown',
|
||||||
|
label: 'Туннель',
|
||||||
|
icon: IconNetwork,
|
||||||
|
title: 'Сменить тип туннеля',
|
||||||
|
items: tunnelTypes.map((tunnel) => ({
|
||||||
|
label: tunnel,
|
||||||
|
onClick: () => onBulkChangeTunnel(tunnel),
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
label: 'Ссылки',
|
||||||
|
icon: IconCopy,
|
||||||
|
onClick: onBulkCopyLinks,
|
||||||
|
title: 'Скопировать ссылки',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
label: 'Экспорт',
|
||||||
|
icon: IconDownload,
|
||||||
|
onClick: onBulkExport,
|
||||||
|
title: 'Экспорт',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
label: 'Удалить',
|
||||||
|
icon: IconTrash,
|
||||||
|
onClick: onBulkDelete,
|
||||||
|
variant: 'danger',
|
||||||
|
title: 'Удалить',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FloatingBulkActionsBar
|
||||||
|
selectedCount={selectedCount}
|
||||||
|
onClearSelection={onClearSelection}
|
||||||
|
actions={actions}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
import {
|
||||||
|
IconServer,
|
||||||
|
IconEdit,
|
||||||
|
IconTrash,
|
||||||
|
IconChevronDown,
|
||||||
|
IconChevronUp,
|
||||||
|
IconCheck,
|
||||||
|
IconCircleCheck,
|
||||||
|
IconWorld,
|
||||||
|
IconNetwork,
|
||||||
|
IconCloud,
|
||||||
|
IconRouter,
|
||||||
|
IconArrowsRightLeft,
|
||||||
|
IconRoute,
|
||||||
|
IconWorldWww
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { needsTunnel } from '../../utils/serverUtils.js';
|
||||||
|
|
||||||
|
// Преобразование кода страны в emoji-флаг
|
||||||
|
function countryToFlag(isoCode) {
|
||||||
|
if (!isoCode) return '';
|
||||||
|
const codeMap = {
|
||||||
|
'SWE': 'SE',
|
||||||
|
'RUS': 'RU',
|
||||||
|
'USA': 'US',
|
||||||
|
'GER': 'DE',
|
||||||
|
'FIN': 'FI',
|
||||||
|
'NLD': 'NL'
|
||||||
|
};
|
||||||
|
const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
|
||||||
|
if (!code || code.length !== 2) return isoCode;
|
||||||
|
return code
|
||||||
|
.replace(/./g, char =>
|
||||||
|
String.fromCodePoint(127397 + char.charCodeAt())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ServerCard({
|
||||||
|
server,
|
||||||
|
selected,
|
||||||
|
onSelect,
|
||||||
|
onEdit,
|
||||||
|
onDelete
|
||||||
|
}) {
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
|
const serverType = (server.type || 'jumphost').toLowerCase();
|
||||||
|
const primaryGateway = server.gateways?.find(g => g.primary)?.name || server.gateway || '';
|
||||||
|
const connectionsCount = server.gateways?.length || 0;
|
||||||
|
const serverName = server.dns?.split('.')[0] || server.ip;
|
||||||
|
const showTunnel = needsTunnel(serverType);
|
||||||
|
|
||||||
|
// Конфигурация отображения типов серверов
|
||||||
|
const typeConfig = {
|
||||||
|
jumphost: { label: 'JUMP', color: 'blue', icon: IconRouter },
|
||||||
|
exit: { label: 'EXIT', color: 'red', icon: IconArrowsRightLeft },
|
||||||
|
bgp: { label: 'BGP', color: 'purple', icon: IconRoute },
|
||||||
|
dns: { label: 'DNS', color: 'cyan', icon: IconWorldWww },
|
||||||
|
home: { label: 'HOME', color: 'green', icon: IconRouter },
|
||||||
|
};
|
||||||
|
const currentTypeConfig = typeConfig[serverType] || typeConfig.jumphost;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`server-card card mb-2 ${selected ? 'border-primary' : ''}`}
|
||||||
|
style={{
|
||||||
|
borderRadius: '12px',
|
||||||
|
borderWidth: selected ? '2px' : '1px',
|
||||||
|
transition: 'all 0.15s ease',
|
||||||
|
boxShadow: selected ? '0 0 0 3px rgba(32, 107, 196, 0.15)' : 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{/* Основная строка */}
|
||||||
|
<div className="d-flex align-items-stretch">
|
||||||
|
{/* Левая часть: тип сервера */}
|
||||||
|
<div
|
||||||
|
className={`d-flex align-items-center justify-content-center px-3 bg-${currentTypeConfig.color}-lt`}
|
||||||
|
style={{
|
||||||
|
minWidth: '80px',
|
||||||
|
borderTopLeftRadius: selected ? '10px' : '11px',
|
||||||
|
borderBottomLeftRadius: expanded ? '0' : (selected ? '10px' : '11px'),
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onClick={() => onSelect?.(server)}
|
||||||
|
>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-1">
|
||||||
|
{selected ? (
|
||||||
|
<IconCircleCheck size={20} className={`text-${currentTypeConfig.color}`} />
|
||||||
|
) : (
|
||||||
|
<currentTypeConfig.icon size={20} className={`text-${currentTypeConfig.color}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`fw-bold text-${currentTypeConfig.color}`} style={{ fontSize: '0.65rem', letterSpacing: '0.5px' }}>
|
||||||
|
{currentTypeConfig.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Центральная часть: информация о сервере */}
|
||||||
|
<div className="flex-grow-1 py-2 px-3" style={{ cursor: 'pointer' }} onClick={() => setExpanded(!expanded)}>
|
||||||
|
{/* Верхняя строка: название, провайдер, DNS */}
|
||||||
|
<div className="d-flex align-items-center mb-1">
|
||||||
|
{/* Флаг + Название */}
|
||||||
|
<div className="d-flex align-items-center me-3">
|
||||||
|
<span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(server.country)}</span>
|
||||||
|
<div>
|
||||||
|
<span className="fw-semibold">{serverName}</span>
|
||||||
|
<span className="text-muted mx-2">•</span>
|
||||||
|
<span className="text-muted">{server.provider}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Primary Gateway (если есть) */}
|
||||||
|
{primaryGateway && (
|
||||||
|
<span className="badge bg-success-lt text-success ms-auto">
|
||||||
|
→ {primaryGateway}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Нижняя строка: DNS + badges */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<code className="text-muted" style={{ fontSize: '0.8rem' }}>
|
||||||
|
{server.dns || server.ip}
|
||||||
|
</code>
|
||||||
|
{showTunnel && server.tunnel && (
|
||||||
|
<span className="badge bg-secondary-lt text-secondary">
|
||||||
|
<IconNetwork size={12} className="me-1" />
|
||||||
|
{server.tunnel}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{connectionsCount > 0 && (
|
||||||
|
<span className="badge bg-green-lt text-green">
|
||||||
|
<IconCloud size={12} className="me-1" />
|
||||||
|
{connectionsCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Правая часть: действия */}
|
||||||
|
<div className="d-flex align-items-center gap-2 px-3 border-start">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary"
|
||||||
|
title="Редактировать"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onEdit?.(server); }}
|
||||||
|
>
|
||||||
|
<IconEdit size={16} className="me-1" />
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger"
|
||||||
|
title="Удалить"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onDelete?.(server); }}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} className="me-1" />
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost-secondary btn-icon ms-1"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
|
||||||
|
title={expanded ? 'Свернуть' : 'Подробнее'}
|
||||||
|
>
|
||||||
|
{expanded ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Расширенная информация в стиле Tabler datagrid */}
|
||||||
|
{expanded && (
|
||||||
|
<div className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
|
||||||
|
<div className="datagrid">
|
||||||
|
<div className="datagrid-item">
|
||||||
|
<div className="datagrid-title">IP</div>
|
||||||
|
<div className="datagrid-content"><code className="small">{server.ip}</code></div>
|
||||||
|
</div>
|
||||||
|
<div className="datagrid-item">
|
||||||
|
<div className="datagrid-title">Внешний</div>
|
||||||
|
<div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
|
||||||
|
</div>
|
||||||
|
<div className="datagrid-item">
|
||||||
|
<div className="datagrid-title">Внутренний</div>
|
||||||
|
<div className="datagrid-content"><code className="small">{server.internalIp || '—'}</code></div>
|
||||||
|
</div>
|
||||||
|
<div className="datagrid-item">
|
||||||
|
<div className="datagrid-title">
|
||||||
|
<IconServer size={14} className="me-1" />
|
||||||
|
Шлюзы ({server.gateways?.length || 0})
|
||||||
|
</div>
|
||||||
|
<div className="datagrid-content">
|
||||||
|
{server.gateways?.length > 0 ? (
|
||||||
|
<div className="d-flex flex-wrap gap-2">
|
||||||
|
{server.gateways.map((gw, idx) => (
|
||||||
|
<span
|
||||||
|
key={gw.id || idx}
|
||||||
|
className={`badge ${gw.primary ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary'}`}
|
||||||
|
title={gw.comment || (gw.primary ? 'Основной' : 'Резервный')}
|
||||||
|
>
|
||||||
|
{gw.primary && <IconCheck size={10} className="me-1" />}
|
||||||
|
{gw.name}
|
||||||
|
{gw.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="text-muted small">Нет шлюзов</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import {
|
||||||
|
IconEdit,
|
||||||
|
IconTrash,
|
||||||
|
IconChevronDown,
|
||||||
|
IconChevronUp,
|
||||||
|
IconRouter,
|
||||||
|
IconCircleCheck,
|
||||||
|
IconNetwork,
|
||||||
|
IconCloud
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
function countryToFlag(isoCode) {
|
||||||
|
if (!isoCode) return '';
|
||||||
|
const codeMap = {
|
||||||
|
'SWE': 'SE', 'RUS': 'RU', 'USA': 'US', 'GER': 'DE', 'FIN': 'FI', 'NLD': 'NL'
|
||||||
|
};
|
||||||
|
const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
|
||||||
|
if (!code || code.length !== 2) return isoCode;
|
||||||
|
return code.replace(/./g, char =>
|
||||||
|
String.fromCodePoint(127397 + char.charCodeAt())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Карточка группы серверов в том же формате, что и одиночная ServerCard:
|
||||||
|
* слева бейдж HOME, центр — флаг, название, провайдер и DNS с тегами, справа кнопки.
|
||||||
|
*/
|
||||||
|
export default function ServerGroupCard({
|
||||||
|
groupKey,
|
||||||
|
servers,
|
||||||
|
selectedSet,
|
||||||
|
onSelect,
|
||||||
|
onSelectGroup,
|
||||||
|
onEdit,
|
||||||
|
onDelete
|
||||||
|
}) {
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
const first = servers[0];
|
||||||
|
const title = groupKey || (first?.dns?.split('.')[0] || 'Группа');
|
||||||
|
const tunnel = first?.tunnel;
|
||||||
|
const wanCount = servers.length;
|
||||||
|
const anySelected = servers.some((s) => selectedSet.has(s.ip));
|
||||||
|
const allSelected = servers.length > 0 && servers.every((s) => selectedSet.has(s.ip));
|
||||||
|
|
||||||
|
const handleGroupSelect = () => {
|
||||||
|
if (onSelectGroup) {
|
||||||
|
onSelectGroup(servers, !allSelected);
|
||||||
|
} else {
|
||||||
|
servers.forEach((s) => {
|
||||||
|
const selected = selectedSet.has(s.ip);
|
||||||
|
if (allSelected && selected) onSelect?.(s);
|
||||||
|
if (!allSelected && !selected) onSelect?.(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`server-group-card card mb-2 ${anySelected ? 'border-primary' : ''}`}
|
||||||
|
style={{
|
||||||
|
borderRadius: '12px',
|
||||||
|
borderWidth: anySelected ? '2px' : '1px',
|
||||||
|
transition: 'all 0.15s ease',
|
||||||
|
boxShadow: anySelected ? '0 0 0 3px rgba(32, 107, 196, 0.15)' : 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="card-body p-0">
|
||||||
|
{/* Основная строка — как у ServerCard */}
|
||||||
|
<div className="d-flex align-items-stretch">
|
||||||
|
{/* Левая часть: бейдж HOME */}
|
||||||
|
<div
|
||||||
|
className="d-flex align-items-center justify-content-center px-3 bg-green-lt"
|
||||||
|
style={{
|
||||||
|
minWidth: '80px',
|
||||||
|
borderTopLeftRadius: anySelected ? '10px' : '11px',
|
||||||
|
borderBottomLeftRadius: expanded ? '0' : (anySelected ? '10px' : '11px'),
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onClick={handleGroupSelect}
|
||||||
|
>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-1">
|
||||||
|
{allSelected ? (
|
||||||
|
<IconCircleCheck size={20} className="text-green" />
|
||||||
|
) : (
|
||||||
|
<IconRouter size={20} className="text-green" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="fw-bold text-green" style={{ fontSize: '0.65rem', letterSpacing: '0.5px' }}>
|
||||||
|
HOME
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Центр: в свёрнутом виде — все провайдеры и домены, чтобы было однозначно */}
|
||||||
|
<div
|
||||||
|
className="flex-grow-1 py-2 px-3"
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
onClick={() => setExpanded(!expanded)}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-center mb-1">
|
||||||
|
<span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(first?.country)}</span>
|
||||||
|
<div>
|
||||||
|
<span className="fw-semibold">{title}</span>
|
||||||
|
<span className="text-muted ms-2">· мультиван</span>
|
||||||
|
</div>
|
||||||
|
<span className="badge bg-success-lt text-success ms-auto">
|
||||||
|
{wanCount} WAN
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||||
|
<span className="text-muted small">
|
||||||
|
{servers.map((s) => s.dns?.split('.')[0] || s.ip).join(', ')}
|
||||||
|
</span>
|
||||||
|
<span className="text-muted small">—</span>
|
||||||
|
{servers.map((s, i) => (
|
||||||
|
<code key={s.id || s.ip} className="text-muted" style={{ fontSize: '0.75rem' }}>
|
||||||
|
{s.dns || s.ip}{i < servers.length - 1 ? ' · ' : ''}
|
||||||
|
</code>
|
||||||
|
))}
|
||||||
|
{tunnel && (
|
||||||
|
<span className="badge bg-secondary-lt text-secondary">
|
||||||
|
<IconNetwork size={12} className="me-1" />
|
||||||
|
{tunnel}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="badge bg-green-lt text-green">
|
||||||
|
<IconCloud size={12} className="me-1" />
|
||||||
|
{wanCount}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Правая часть: кнопки как у необъединённой карточки */}
|
||||||
|
<div className="d-flex align-items-center gap-2 px-3 border-start">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary"
|
||||||
|
title="Редактировать"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onEdit?.(first); }}
|
||||||
|
>
|
||||||
|
<IconEdit size={16} className="me-1" />
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger"
|
||||||
|
title="Удалить"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onDelete?.(first); }}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} className="me-1" />
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost-secondary btn-icon ms-1"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
|
||||||
|
title={expanded ? 'Свернуть' : 'Подробнее'}
|
||||||
|
>
|
||||||
|
{expanded ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Развёрнутый список WAN: визуально отделённый блок, у каждой строки — бейдж HOME */}
|
||||||
|
{expanded && (
|
||||||
|
<div
|
||||||
|
className="border-top border-start border-3 border-green bg-green-lt"
|
||||||
|
style={{
|
||||||
|
borderBottomLeftRadius: '7px',
|
||||||
|
borderBottomRightRadius: '7px',
|
||||||
|
borderLeftColor: 'var(--tblr-green)',
|
||||||
|
backgroundColor: 'rgba(34, 197, 94, 0.06)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="small text-muted px-3 py-1 border-bottom bg-green-lt" style={{ fontSize: '0.7rem' }}>
|
||||||
|
WAN-подключения группы
|
||||||
|
</div>
|
||||||
|
<div className="p-2">
|
||||||
|
{servers.map((server) => {
|
||||||
|
const isSelected = selectedSet.has(server.ip);
|
||||||
|
const serverName = server.dns?.split('.')[0] || server.ip;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={server.id || server.ip}
|
||||||
|
className={`d-flex align-items-stretch rounded mb-1 overflow-hidden ${isSelected ? 'bg-primary-lt' : 'bg-white'}`}
|
||||||
|
style={{ boxShadow: '0 0 0 1px rgba(0,0,0,0.06)' }}
|
||||||
|
>
|
||||||
|
{/* Бейдж HOME — клик как у обычной карточки, без явной галочки */}
|
||||||
|
<div
|
||||||
|
className="d-flex align-items-center justify-content-center bg-green-lt text-green px-2"
|
||||||
|
style={{
|
||||||
|
minWidth: '52px',
|
||||||
|
fontSize: '0.6rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: '0.5px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onClick={() => onSelect?.(server)}
|
||||||
|
title={isSelected ? 'Снять выбор' : 'Выбрать'}
|
||||||
|
>
|
||||||
|
{isSelected ? (
|
||||||
|
<IconCircleCheck size={14} className="me-1" />
|
||||||
|
) : (
|
||||||
|
<IconRouter size={14} className="me-1" />
|
||||||
|
)}
|
||||||
|
HOME
|
||||||
|
</div>
|
||||||
|
<div className="d-flex align-items-center flex-grow-1 py-2 px-2 min-w-0">
|
||||||
|
<span className="me-2 flex-shrink-0" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<span className="fw-medium">{serverName}</span>
|
||||||
|
<span className="text-muted ms-2 small">{server.dns || server.ip}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex align-items-center gap-2 px-3 border-start">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-secondary"
|
||||||
|
title="Редактировать"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onEdit?.(server); }}
|
||||||
|
>
|
||||||
|
<IconEdit size={16} className="me-1" />
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-danger"
|
||||||
|
title="Удалить"
|
||||||
|
onClick={(e) => { e.stopPropagation(); onDelete?.(server); }}
|
||||||
|
>
|
||||||
|
<IconTrash size={16} className="me-1" />
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,540 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { IconPlus, IconEdit, IconTrash, IconServer, IconWorld, IconMapPin, IconRouter, IconPlug } from '@tabler/icons-react';
|
||||||
|
import api from '../../lib/api.js';
|
||||||
|
import {
|
||||||
|
makeGateway,
|
||||||
|
normalizeGateways,
|
||||||
|
needsGateways as NEEDS_GATEWAYS,
|
||||||
|
needsTunnel as NEEDS_TUNNEL,
|
||||||
|
SERVER_TYPE_OPTIONS,
|
||||||
|
TUNNEL_TYPES
|
||||||
|
} from '../../utils/serverUtils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Список провайдеров
|
||||||
|
*/
|
||||||
|
const PROVIDER_OPTIONS = [
|
||||||
|
{ value: '', label: 'Выберите провайдера', disabled: true },
|
||||||
|
{ value: 'Yandex', label: 'Yandex Cloud' },
|
||||||
|
{ value: 'Hetzner', label: 'Hetzner' },
|
||||||
|
{ value: 'VPSVILLE', label: 'VPSVILLE' },
|
||||||
|
{ value: 'HOSTVDS', label: 'HOSTVDS' },
|
||||||
|
{ value: 'HIP.hosting', label: 'HIP.hosting' },
|
||||||
|
{ value: 'Ihor-hosting', label: 'Ihor-hosting' },
|
||||||
|
{ value: 'DigitalOcean', label: 'DigitalOcean' },
|
||||||
|
{ value: 'Vultr', label: 'Vultr' },
|
||||||
|
{ value: 'Linode', label: 'Linode' },
|
||||||
|
{ value: 'OVH', label: 'OVH' },
|
||||||
|
{ value: 'AWS', label: 'Amazon Web Services' },
|
||||||
|
{ value: 'Google', label: 'Google Cloud' },
|
||||||
|
{ value: 'Azure', label: 'Microsoft Azure' },
|
||||||
|
{ value: 'Другой', label: 'Другой...' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Создаёт пустой объект сервера
|
||||||
|
*/
|
||||||
|
const getEmptyServer = () => ({
|
||||||
|
id: '',
|
||||||
|
ip: '',
|
||||||
|
extIp: '',
|
||||||
|
internalIp: '',
|
||||||
|
dns: '',
|
||||||
|
country: '',
|
||||||
|
provider: '',
|
||||||
|
tunnel: 'GRE',
|
||||||
|
type: 'jumphost',
|
||||||
|
gateway: '',
|
||||||
|
gateways: [makeGateway({ primary: true })],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Универсальное модальное окно для добавления/редактирования сервера
|
||||||
|
*
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {boolean} props.show - Показывать ли модальное окно
|
||||||
|
* @param {'add'|'edit'} props.mode - Режим работы: 'add' для добавления, 'edit' для редактирования
|
||||||
|
* @param {Object} props.server - Данные сервера (для режима редактирования)
|
||||||
|
* @param {Function} props.onSave - Callback при сохранении (получает объект сервера)
|
||||||
|
* @param {Function} props.onClose - Callback при закрытии
|
||||||
|
* @param {string} props.error - Текст ошибки для отображения
|
||||||
|
*/
|
||||||
|
function ServerModal({ show, mode = 'add', server, onSave, onClose, error: externalError }) {
|
||||||
|
const modalRef = useRef(null);
|
||||||
|
const initializedRef = useRef(false);
|
||||||
|
const [localServer, setLocalServer] = useState(getEmptyServer());
|
||||||
|
const [customProvider, setCustomProvider] = useState('');
|
||||||
|
const [internalError, setInternalError] = useState('');
|
||||||
|
const [mikrotikTesting, setMikrotikTesting] = useState(false);
|
||||||
|
const [mikrotikTestResult, setMikrotikTestResult] = useState(null);
|
||||||
|
|
||||||
|
const isEditMode = mode === 'edit';
|
||||||
|
const error = externalError || internalError;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Подготовка сервера с нормализованными gateways
|
||||||
|
*/
|
||||||
|
const ensureGateways = (srv) => {
|
||||||
|
if (!srv) return getEmptyServer();
|
||||||
|
const needs = NEEDS_GATEWAYS(srv.type);
|
||||||
|
let gateways = [];
|
||||||
|
if (needs) {
|
||||||
|
gateways = normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip);
|
||||||
|
if (gateways.length === 0) {
|
||||||
|
gateways = [makeGateway({ primary: true })];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { ...srv, gateways };
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Инициализация данных при открытии
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
if (show && !initializedRef.current) {
|
||||||
|
if (isEditMode && server) {
|
||||||
|
const prepared = ensureGateways(server);
|
||||||
|
setLocalServer(prepared);
|
||||||
|
// Проверяем, нужен ли кастомный провайдер
|
||||||
|
const providerExists = PROVIDER_OPTIONS.some(p => p.value === server.provider);
|
||||||
|
if (!providerExists && server.provider) {
|
||||||
|
setCustomProvider(server.provider);
|
||||||
|
setLocalServer(prev => ({ ...prev, provider: 'Другой' }));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setLocalServer(getEmptyServer());
|
||||||
|
setCustomProvider('');
|
||||||
|
}
|
||||||
|
setInternalError('');
|
||||||
|
initializedRef.current = true;
|
||||||
|
}
|
||||||
|
if (!show) {
|
||||||
|
initializedRef.current = false;
|
||||||
|
setMikrotikTestResult(null);
|
||||||
|
}
|
||||||
|
}, [show, server, isEditMode]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Управление Bootstrap modal
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||||
|
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||||
|
if (show) {
|
||||||
|
modalInstance.show();
|
||||||
|
} else {
|
||||||
|
modalInstance.hide();
|
||||||
|
}
|
||||||
|
const handler = () => onClose && onClose();
|
||||||
|
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||||
|
return () => {
|
||||||
|
if (modalRef.current) {
|
||||||
|
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [show, onClose]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Обработчик изменения поля
|
||||||
|
*/
|
||||||
|
const handleFieldChange = (field, value) => {
|
||||||
|
setLocalServer(prev => ({ ...prev, [field]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Валидация и сохранение
|
||||||
|
*/
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setInternalError('');
|
||||||
|
|
||||||
|
// Валидация обязательных полей
|
||||||
|
if (!localServer.ip?.trim()) {
|
||||||
|
setInternalError('IP адрес обязателен');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!localServer.dns?.trim()) {
|
||||||
|
setInternalError('DNS имя обязательно');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!localServer.country?.trim()) {
|
||||||
|
setInternalError('Страна обязательна');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Провайдер
|
||||||
|
let finalProvider = localServer.provider;
|
||||||
|
if (localServer.provider === 'Другой') {
|
||||||
|
if (!customProvider.trim()) {
|
||||||
|
setInternalError('Введите название провайдера');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
finalProvider = customProvider.trim();
|
||||||
|
}
|
||||||
|
if (!finalProvider) {
|
||||||
|
setInternalError('Провайдер обязателен');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Шлюзы для jumphost/exit задаются в другом месте (network-config); при сохранении передаём существующие или один по умолчанию
|
||||||
|
const needsGws = NEEDS_GATEWAYS(localServer.type);
|
||||||
|
let finalGateways = [];
|
||||||
|
if (needsGws) {
|
||||||
|
finalGateways = normalizeGateways(localServer.gateways, localServer.gateway || localServer.dns || localServer.ip);
|
||||||
|
if (finalGateways.length === 0) {
|
||||||
|
finalGateways = [makeGateway({ primary: true, name: localServer.dns?.split('.')[0] || 'main' })];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const serverToSave = {
|
||||||
|
...localServer,
|
||||||
|
provider: finalProvider,
|
||||||
|
gateways: finalGateways,
|
||||||
|
};
|
||||||
|
|
||||||
|
onSave && onSave(serverToSave);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal" tabIndex="-1" ref={modalRef}>
|
||||||
|
<div className="modal-dialog modal-lg">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title d-flex align-items-center">
|
||||||
|
{isEditMode ? (
|
||||||
|
<>
|
||||||
|
<IconEdit className="icon me-2" />
|
||||||
|
Редактировать сервер
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<IconPlus className="icon me-2" />
|
||||||
|
Добавить новый сервер
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="modal-body">
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger mb-3" role="alert">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="row g-3">
|
||||||
|
{/* ID - опционально */}
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label">
|
||||||
|
ID <span className="text-muted">(опционально)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.id || ''}
|
||||||
|
onChange={(e) => handleFieldChange('id', e.target.value)}
|
||||||
|
placeholder="srv-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* IP адрес */}
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label required">IP адрес</label>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconServer size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.ip || ''}
|
||||||
|
onChange={(e) => handleFieldChange('ip', e.target.value)}
|
||||||
|
placeholder="192.168.1.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DNS */}
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label required">DNS имя</label>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconWorld size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.dns || ''}
|
||||||
|
onChange={(e) => handleFieldChange('dns', e.target.value)}
|
||||||
|
placeholder="srv1.example.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Внешний IP */}
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label">
|
||||||
|
Внешний IP <span className="text-muted">(опционально)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.extIp || ''}
|
||||||
|
onChange={(e) => handleFieldChange('extIp', e.target.value)}
|
||||||
|
placeholder="Публичный IP, если отличается"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Внутренний IP */}
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label">
|
||||||
|
Внутренний IP <span className="text-muted">(опционально)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.internalIp || ''}
|
||||||
|
onChange={(e) => handleFieldChange('internalIp', e.target.value)}
|
||||||
|
placeholder="10.x.x.x / 192.168.x.x"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Страна — 2-буквенный код как в интерфейсах */}
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label required">Страна</label>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconMapPin size={16} />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control ps-8"
|
||||||
|
value={localServer.country || ''}
|
||||||
|
onChange={(e) => handleFieldChange('country', e.target.value.toUpperCase().slice(0, 2))}
|
||||||
|
placeholder="RU, SE, DE…"
|
||||||
|
maxLength={2}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-text">2-буквенный код страны (ISO 3166-1 alpha-2)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Провайдер */}
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label required">Провайдер</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={localServer.provider || ''}
|
||||||
|
onChange={(e) => handleFieldChange('provider', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
{PROVIDER_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value} disabled={opt.disabled}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кастомный провайдер */}
|
||||||
|
{localServer.provider === 'Другой' && (
|
||||||
|
<div className="col-12">
|
||||||
|
<label className="form-label required">Название провайдера</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={customProvider}
|
||||||
|
onChange={(e) => setCustomProvider(e.target.value)}
|
||||||
|
placeholder="Введите название провайдера"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Тип сервера */}
|
||||||
|
<div className={NEEDS_TUNNEL(localServer.type) ? "col-md-6" : "col-12"}>
|
||||||
|
<label className="form-label required">Тип сервера</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={localServer.type || 'jumphost'}
|
||||||
|
onChange={(e) => handleFieldChange('type', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
{SERVER_TYPE_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Тип туннеля - только для типов, которым он нужен */}
|
||||||
|
{NEEDS_TUNNEL(localServer.type) && (
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label required">Тип туннеля</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={localServer.tunnel || 'GRE'}
|
||||||
|
onChange={(e) => handleFieldChange('tunnel', e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
{TUNNEL_TYPES.map((t) => (
|
||||||
|
<option key={t} value={t}>{t}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Группа объединения — для домашнего роутера с мультиваном: один ключ у нескольких записей = одна карточка в списке */}
|
||||||
|
{localServer.type === 'home' && (
|
||||||
|
<div className="col-12">
|
||||||
|
<label className="form-label">
|
||||||
|
Группа (объединение в списке)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={localServer.groupKey || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value.trim();
|
||||||
|
handleFieldChange('groupKey', v || '');
|
||||||
|
}}
|
||||||
|
placeholder="Например: home-multivan — две записи с одним ключом отобразятся как один роутер"
|
||||||
|
/>
|
||||||
|
<div className="form-text">
|
||||||
|
Укажите одинаковый ключ у обоих WAN-записей одного роутера, чтобы в разделе «Серверы» они отображались одной карточкой. ID и привязки (интерфейсы, фильтры) не меняются.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MikroTik RouterOS API — для jumphost и домашних (входных) роутеров */}
|
||||||
|
{(localServer.type === 'jumphost' || localServer.type === 'home') && (
|
||||||
|
<div className="mt-4 pt-3 border-top">
|
||||||
|
<label className="form-label d-flex align-items-center gap-2">
|
||||||
|
<IconRouter size={18} />
|
||||||
|
MikroTik RouterOS API
|
||||||
|
</label>
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-md-4">
|
||||||
|
<label className="form-label small">Хост</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={localServer.mikrotikHost || ''}
|
||||||
|
onChange={(e) => handleFieldChange('mikrotikHost', e.target.value)}
|
||||||
|
placeholder={localServer.ip || 'IP или DNS'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-2">
|
||||||
|
<label className="form-label small">Порт</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={localServer.mikrotikPort || '80'}
|
||||||
|
onChange={(e) => handleFieldChange('mikrotikPort', e.target.value)}
|
||||||
|
placeholder="80"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
|
<label className="form-label small">Пользователь</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={localServer.mikrotikUser || 'admin'}
|
||||||
|
onChange={(e) => handleFieldChange('mikrotikUser', e.target.value)}
|
||||||
|
placeholder="admin"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
|
<label className="form-label small">Пароль</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={localServer.mikrotikPassword ?? ''}
|
||||||
|
onChange={(e) => handleFieldChange('mikrotikPassword', e.target.value)}
|
||||||
|
placeholder={localServer.hasMikrotikPassword ? '••••••' : 'Введите пароль'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 d-flex align-items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-primary btn-sm d-flex align-items-center gap-1"
|
||||||
|
disabled={mikrotikTesting || !(localServer.mikrotikHost || localServer.ip)}
|
||||||
|
onClick={async () => {
|
||||||
|
setMikrotikTestResult(null);
|
||||||
|
setMikrotikTesting(true);
|
||||||
|
try {
|
||||||
|
const hasPassword = localServer.mikrotikPassword && String(localServer.mikrotikPassword).trim() !== '';
|
||||||
|
const payload = hasPassword
|
||||||
|
? {
|
||||||
|
host: localServer.mikrotikHost || localServer.ip,
|
||||||
|
port: localServer.mikrotikPort || 80,
|
||||||
|
user: localServer.mikrotikUser || 'admin',
|
||||||
|
password: localServer.mikrotikPassword,
|
||||||
|
}
|
||||||
|
: (localServer.hasMikrotikPassword && (localServer.id || localServer.dns || localServer.ip))
|
||||||
|
? { serverId: localServer.id || localServer.dns || localServer.ip }
|
||||||
|
: null;
|
||||||
|
if (!payload) {
|
||||||
|
setMikrotikTestResult({ ok: false, message: 'Введите пароль или сохраните сервер с паролем' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { data } = await api.post('/mikrotik/test-connection', payload);
|
||||||
|
setMikrotikTestResult(data);
|
||||||
|
} catch (err) {
|
||||||
|
setMikrotikTestResult({
|
||||||
|
ok: false,
|
||||||
|
message: err.response?.data?.message || err.message || 'Ошибка соединения',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setMikrotikTesting(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconPlug size={14} />
|
||||||
|
{mikrotikTesting ? 'Проверка...' : 'Проверить соединение'}
|
||||||
|
</button>
|
||||||
|
{mikrotikTestResult && (
|
||||||
|
<span className={mikrotikTestResult.ok ? 'text-success' : 'text-danger'}>
|
||||||
|
{mikrotikTestResult.ok ? '✓ ' + (mikrotikTestResult.message || 'OK') : '✗ ' + mikrotikTestResult.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary d-flex align-items-center">
|
||||||
|
{isEditMode ? (
|
||||||
|
<>
|
||||||
|
<IconEdit size={16} className="me-1" />
|
||||||
|
Сохранить
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<IconPlus size={16} className="me-1" />
|
||||||
|
Добавить сервер
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ServerModal;
|
||||||
@@ -0,0 +1,279 @@
|
|||||||
|
import { useState, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
IconServer,
|
||||||
|
IconWorld,
|
||||||
|
IconBuildingSkyscraper,
|
||||||
|
IconNetwork,
|
||||||
|
IconChevronDown,
|
||||||
|
IconChevronRight,
|
||||||
|
IconFilter,
|
||||||
|
IconSearch,
|
||||||
|
IconDatabase,
|
||||||
|
IconX
|
||||||
|
} from '@tabler/icons-react';
|
||||||
|
|
||||||
|
function countryToFlag(isoCode) {
|
||||||
|
if (!isoCode) return '';
|
||||||
|
const codeMap = {
|
||||||
|
SWE: 'SE',
|
||||||
|
RUS: 'RU',
|
||||||
|
USA: 'US',
|
||||||
|
GER: 'DE',
|
||||||
|
FIN: 'FI',
|
||||||
|
NLD: 'NL'
|
||||||
|
};
|
||||||
|
const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
|
||||||
|
if (!code || code.length !== 2) return isoCode;
|
||||||
|
return code.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilterSection({ title, icon: Icon, iconColor, expanded, onToggle, children }) {
|
||||||
|
return (
|
||||||
|
<div className="filter-section border-bottom">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="list-group-header d-flex align-items-center justify-content-between w-100 border-0 bg-transparent py-2 px-3 text-start"
|
||||||
|
onClick={onToggle}
|
||||||
|
aria-expanded={expanded}
|
||||||
|
>
|
||||||
|
<span className="d-flex align-items-center">
|
||||||
|
<Icon size={16} className={`me-2 ${iconColor || 'text-muted'}`} />
|
||||||
|
<span>{title}</span>
|
||||||
|
</span>
|
||||||
|
{expanded ? <IconChevronDown size={16} className="text-muted" /> : <IconChevronRight size={16} className="text-muted" />}
|
||||||
|
</button>
|
||||||
|
{expanded && <div className="list-group list-group-flush list-group-transparent">{children}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilterItem({ label, count, active, onClick, leftAddon }) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`list-group-item list-group-item-action d-flex align-items-center justify-content-between py-2 px-3 text-start ${active ? 'active' : ''}`}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<span className="d-flex align-items-center min-w-0 flex-grow-1" style={{ overflow: 'hidden' }}>
|
||||||
|
{leftAddon}
|
||||||
|
<span className="text-break" style={{ wordBreak: 'break-word' }}>{label}</span>
|
||||||
|
</span>
|
||||||
|
<span className={`badge ms-2 flex-shrink-0 ${active ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}>
|
||||||
|
{count}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ServerSidebar({
|
||||||
|
servers = [],
|
||||||
|
filters = {},
|
||||||
|
onFiltersChange,
|
||||||
|
onSearch,
|
||||||
|
searchTerm = '',
|
||||||
|
onReset,
|
||||||
|
/** В режиме true рендерится только контент без обёртки card (для использования внутри offcanvas) */
|
||||||
|
embedded = false
|
||||||
|
}) {
|
||||||
|
const [expandedSections, setExpandedSections] = useState({
|
||||||
|
country: true,
|
||||||
|
provider: true,
|
||||||
|
type: true,
|
||||||
|
tunnel: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const stats = useMemo(() => {
|
||||||
|
const byCountry = {};
|
||||||
|
const byProvider = {};
|
||||||
|
const byType = {};
|
||||||
|
const byTunnel = {};
|
||||||
|
servers.forEach(srv => {
|
||||||
|
byCountry[srv.country] = (byCountry[srv.country] || 0) + 1;
|
||||||
|
byProvider[srv.provider] = (byProvider[srv.provider] || 0) + 1;
|
||||||
|
byType[srv.type] = (byType[srv.type] || 0) + 1;
|
||||||
|
byTunnel[srv.tunnel] = (byTunnel[srv.tunnel] || 0) + 1;
|
||||||
|
});
|
||||||
|
return { byCountry, byProvider, byType, byTunnel };
|
||||||
|
}, [servers]);
|
||||||
|
|
||||||
|
const toggleSection = section => {
|
||||||
|
setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFilterClick = (category, value) => {
|
||||||
|
const current = filters[category];
|
||||||
|
onFiltersChange({ ...filters, [category]: current === value ? '' : value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);
|
||||||
|
const typeLabels = { jumphost: 'Jumphost', exit: 'Выходная нода' };
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
{!embedded && (
|
||||||
|
<div className="card-header py-3 d-flex align-items-center justify-content-between">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<IconFilter size={18} className="text-primary me-2" />
|
||||||
|
<span className="fw-semibold">Фильтры</span>
|
||||||
|
{activeFiltersCount > 0 && (
|
||||||
|
<span className="badge bg-primary-lt text-primary ms-2">{activeFiltersCount}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{activeFiltersCount > 0 && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost-secondary btn-icon btn-sm"
|
||||||
|
onClick={onReset}
|
||||||
|
title="Сбросить фильтры"
|
||||||
|
aria-label="Сбросить фильтры"
|
||||||
|
>
|
||||||
|
<IconX size={16} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={embedded ? 'py-2' : 'card-body py-2 border-bottom'}>
|
||||||
|
<div className="input-icon">
|
||||||
|
<span className="input-icon-addon">
|
||||||
|
<IconSearch size={16} className="text-muted" />
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Поиск..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={e => onSearch(e.target.value)}
|
||||||
|
aria-label="Поиск серверов"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={embedded ? 'overflow-auto flex-grow-1 min-h-0' : 'server-sidebar-body overflow-auto'}>
|
||||||
|
<FilterSection
|
||||||
|
title="Страны"
|
||||||
|
icon={IconWorld}
|
||||||
|
iconColor="text-blue"
|
||||||
|
expanded={expandedSections.country}
|
||||||
|
onToggle={() => toggleSection('country')}
|
||||||
|
>
|
||||||
|
{Object.entries(stats.byCountry)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.map(([country, count]) => (
|
||||||
|
<FilterItem
|
||||||
|
key={country}
|
||||||
|
label={country}
|
||||||
|
count={count}
|
||||||
|
active={filters.country === country}
|
||||||
|
onClick={() => handleFilterClick('country', country)}
|
||||||
|
leftAddon={
|
||||||
|
<span className="me-2" style={{ fontSize: '1rem' }} aria-hidden>
|
||||||
|
{countryToFlag(country)}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</FilterSection>
|
||||||
|
|
||||||
|
<FilterSection
|
||||||
|
title="Провайдеры"
|
||||||
|
icon={IconBuildingSkyscraper}
|
||||||
|
iconColor="text-purple"
|
||||||
|
expanded={expandedSections.provider}
|
||||||
|
onToggle={() => toggleSection('provider')}
|
||||||
|
>
|
||||||
|
{Object.entries(stats.byProvider)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.map(([provider, count]) => (
|
||||||
|
<FilterItem
|
||||||
|
key={provider}
|
||||||
|
label={provider}
|
||||||
|
count={count}
|
||||||
|
active={filters.provider === provider}
|
||||||
|
onClick={() => handleFilterClick('provider', provider)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</FilterSection>
|
||||||
|
|
||||||
|
<FilterSection
|
||||||
|
title="Тип сервера"
|
||||||
|
icon={IconServer}
|
||||||
|
iconColor="text-green"
|
||||||
|
expanded={expandedSections.type}
|
||||||
|
onToggle={() => toggleSection('type')}
|
||||||
|
>
|
||||||
|
{Object.entries(stats.byType)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.map(([type, count]) => (
|
||||||
|
<FilterItem
|
||||||
|
key={type}
|
||||||
|
label={typeLabels[type] || type}
|
||||||
|
count={count}
|
||||||
|
active={filters.type === type}
|
||||||
|
onClick={() => handleFilterClick('type', type)}
|
||||||
|
leftAddon={
|
||||||
|
<span
|
||||||
|
className="rounded-circle me-2 flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
background: type === 'exit' ? 'var(--tblr-red)' : 'var(--tblr-primary)'
|
||||||
|
}}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</FilterSection>
|
||||||
|
|
||||||
|
<FilterSection
|
||||||
|
title="Туннель"
|
||||||
|
icon={IconNetwork}
|
||||||
|
iconColor="text-orange"
|
||||||
|
expanded={expandedSections.tunnel}
|
||||||
|
onToggle={() => toggleSection('tunnel')}
|
||||||
|
>
|
||||||
|
{Object.entries(stats.byTunnel)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.map(([tunnel, count]) => (
|
||||||
|
<FilterItem
|
||||||
|
key={tunnel}
|
||||||
|
label={tunnel}
|
||||||
|
count={count}
|
||||||
|
active={filters.tunnel === tunnel}
|
||||||
|
onClick={() => handleFilterClick('tunnel', tunnel)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</FilterSection>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={embedded ? 'py-3 mt-2 pt-3 border-top' : 'card-footer py-3 bg-secondary-lt'}>
|
||||||
|
<div className="d-flex align-items-center mb-2">
|
||||||
|
<IconDatabase size={16} className="text-muted me-2" />
|
||||||
|
<span className="text-muted small fw-medium">Статистика</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between small mb-1">
|
||||||
|
<span className="text-muted">Всего серверов</span>
|
||||||
|
<span className="fw-semibold">{servers.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between small mb-1">
|
||||||
|
<span className="text-muted">Выходных нод</span>
|
||||||
|
<span className="fw-semibold text-danger">{stats.byType['exit'] || 0}</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between small">
|
||||||
|
<span className="text-muted">Jumphosts</span>
|
||||||
|
<span className="fw-semibold text-primary">{stats.byType['jumphost'] || 0}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (embedded) {
|
||||||
|
return <div className="d-flex flex-column h-100">{content}</div>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="server-sidebar card flex-shrink-0 mb-0">
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
export { default as ServerModal } from './ServerModal.jsx';
|
||||||
|
export { default as EditServerModal } from './EditServerModal.jsx';
|
||||||
|
export { default as DeleteServerModal } from './DeleteServerModal.jsx';
|
||||||
|
export { default as LinkGeneratorModal } from './LinkGeneratorModal.jsx';
|
||||||
|
export { default as AddServerModal } from './AddServerModal.jsx';
|
||||||
|
export { default as ServerSidebar } from './ServerSidebar.jsx';
|
||||||
|
export { default as ServerCard } from './ServerCard.jsx';
|
||||||
|
export { default as ServerGroupCard } from './ServerGroupCard.jsx';
|
||||||
|
export { default as ServerBulkActions } from './ServerBulkActions.jsx';
|
||||||
|
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import { createContext, useContext, useState, useCallback, useRef } from 'react';
|
||||||
|
import api from '../lib/api.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Единая точка входа для пингов до шлюзов (MikroTik).
|
||||||
|
* Кеш: ключ `${routerId}:${gatewayIp}` → number | null (мс или ошибка).
|
||||||
|
* TTL: после истечения записи перезапрашиваются при переходе на раздел.
|
||||||
|
* Используется и на Easy Switch, и на странице фильтров (карточки gateway).
|
||||||
|
*/
|
||||||
|
const PingContext = createContext(null);
|
||||||
|
|
||||||
|
const PING_COUNT = 5;
|
||||||
|
/** Время жизни кеша пинга (мс). После истечения при открытии раздела данные перезапрашиваются. */
|
||||||
|
const PING_CACHE_TTL_MS = 2 * 60 * 1000; // 2 минуты
|
||||||
|
|
||||||
|
export function PingProvider({ children }) {
|
||||||
|
const [pingMap, setPingMap] = useState({});
|
||||||
|
const inFlightRef = useRef(new Set());
|
||||||
|
const pingMapRef = useRef(pingMap);
|
||||||
|
const timestampsRef = useRef({}); // key → Date.now() когда запись установлена
|
||||||
|
pingMapRef.current = pingMap;
|
||||||
|
|
||||||
|
const getKey = (routerId, gatewayIp) => {
|
||||||
|
if (!routerId || !gatewayIp) return null;
|
||||||
|
return `${routerId}:${gatewayIp}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isCacheValid = useCallback((key) => {
|
||||||
|
const cache = pingMapRef.current;
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(cache, key)) return false;
|
||||||
|
const ts = timestampsRef.current[key];
|
||||||
|
if (ts == null) return false;
|
||||||
|
return (Date.now() - ts) < PING_CACHE_TTL_MS;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getPing = useCallback((routerId, gatewayIp) => {
|
||||||
|
const key = getKey(routerId, gatewayIp);
|
||||||
|
if (!key) return undefined;
|
||||||
|
return Object.prototype.hasOwnProperty.call(pingMap, key) ? pingMap[key] : undefined;
|
||||||
|
}, [pingMap]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Запросить пинги для списка пар (routerId, gatewayIp).
|
||||||
|
* Пропускаются ключи с валидным кешем (не истёк TTL) и уже запрашиваемые.
|
||||||
|
* @param tasks Array<{ routerId, gatewayIp }>
|
||||||
|
*/
|
||||||
|
const requestPings = useCallback((tasks) => {
|
||||||
|
if (!Array.isArray(tasks) || tasks.length === 0) return;
|
||||||
|
|
||||||
|
const toRequest = [];
|
||||||
|
tasks.forEach(({ routerId, gatewayIp }) => {
|
||||||
|
const ip = gatewayIp || '';
|
||||||
|
if (!routerId || !ip) return;
|
||||||
|
const key = getKey(routerId, ip);
|
||||||
|
if (!key) return;
|
||||||
|
if (isCacheValid(key)) return;
|
||||||
|
if (inFlightRef.current.has(key)) return;
|
||||||
|
inFlightRef.current.add(key);
|
||||||
|
toRequest.push({ routerId, ip, key });
|
||||||
|
});
|
||||||
|
|
||||||
|
toRequest.forEach(({ routerId, ip, key }) => {
|
||||||
|
api
|
||||||
|
.post('/mikrotik/ping', {
|
||||||
|
serverId: routerId,
|
||||||
|
gatewayIp: ip,
|
||||||
|
count: PING_COUNT,
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
const value = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||||
|
timestampsRef.current[key] = Date.now();
|
||||||
|
setPingMap((prev) => ({ ...prev, [key]: value }));
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.warn('PingContext: failed to fetch ping for', routerId, ip, e?.message || e);
|
||||||
|
timestampsRef.current[key] = Date.now();
|
||||||
|
setPingMap((prev) => ({ ...prev, [key]: null }));
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
inFlightRef.current.delete(key);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [isCacheValid]);
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
pingMap,
|
||||||
|
getPing,
|
||||||
|
requestPings,
|
||||||
|
getKey,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PingContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</PingContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePing() {
|
||||||
|
const ctx = useContext(PingContext);
|
||||||
|
if (!ctx) {
|
||||||
|
throw new Error('usePing must be used within PingProvider');
|
||||||
|
}
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user