Compare commits
283
Commits
6a90f4079d
..
rework
| Author | SHA1 | Date | |
|---|---|---|---|
 denozord
|
095f891b02 | ||
|
denozord
|
6473ff8bbd | ||
|
denozord
|
e99700a916 | ||
|
denozord
|
3e0c968e7f | ||
|
denozord
|
a3291d6b2b | ||
|
denozord
|
0746fb4f1e | ||
|
denozord
|
f1fd378f83 | ||
|
denozord
|
23d7b67813 | ||
|
denozord
|
0703d2eccd | ||
|
denozord
|
a5bada97bf | ||
|
denozord
|
ccd1b15683 | ||
|
denozord
|
50a7edd50f | ||
|
denozord
|
972f3ab5ca | ||
|
denozord
|
8539317f2d | ||
|
denozord
|
4705e2489b | ||
|
denozord
|
a71072168d | ||
|
denozord
|
e529aa23ec | ||
|
denozord
|
164507513c | ||
|
denozord
|
b9d45bb8b7 | ||
|
denozord
|
fd9b8b3c22 | ||
|
denozord
|
81347c6c8d | ||
|
denozord
|
897dd52eac | ||
|
denozord
|
99f8c5d0bf | ||
|
denozord
|
817f550f4d | ||
|
denozord
|
114d7b2731 | ||
|
denozord
|
5d66f04286 | ||
|
denozord
|
f77d71f22c | ||
|
denozord
|
e631ffab51 | ||
|
denozord
|
113fa59a63 | ||
|
denozord
|
1dcdc0e6c2 | ||
|
denozord
|
31ce1ae02a | ||
|
denozord
|
baa230c0d2 | ||
|
denozord
|
aab9ed0601 | ||
|
denozord
|
2f4b1f6671 | ||
|
denozord
|
e1198b0c91 | ||
|
denozord
|
b792cede50 | ||
|
denozord
|
79828eace9 | ||
|
denozord
|
8012968ab5 | ||
|
denozord
|
624c0d6fd3 | ||
|
denozord
|
f5829fb35c | ||
|
denozord
|
7b7ef1ab45 | ||
|
denozord
|
963828f9e8 | ||
|
denozord
|
661b42f776 | ||
|
denozord
|
d31c90b60e | ||
|
denozord
|
d68b3aa104 | ||
|
denozord
|
d53100f5bd | ||
|
denozord
|
e1b5bb4c97 | ||
|
denozord
|
d43a77e368 | ||
|
denozord
|
945d67289a | ||
|
denozord
|
489cb3b312 | ||
|
denozord
|
6010a95208 | ||
|
denozord
|
4d91b4fe04 | ||
|
denozord
|
b76cbc15cb | ||
|
denozord
|
d657b03abc | ||
|
denozord
|
7029fa2897 | ||
|
denozord
|
dcf1853efb | ||
|
denozord
|
80de7160b9 | ||
|
denozord
|
53be4cd4ad | ||
|
denozord
|
228a1b9525 | ||
|
denozord
|
b09ba5cd77 | ||
|
denozord
|
cc92502de2 | ||
|
denozord
|
9de7fd104c | ||
|
denozord
|
1f391d9398 | ||
|
denozord
|
b56df61c8f | ||
|
denozord
|
8035b7751f | ||
|
denozord
|
657c23d237 | ||
|
denozord
|
6290a84cd3 | ||
|
denozord
|
07bcbe70c2 | ||
|
denozord
|
3655428da4 | ||
|
denozord
|
3840a91ba5 | ||
|
denozord
|
69e360b940 | ||
|
denozord
|
4370e13524 | ||
|
denozord
|
f48e30ab44 | ||
|
denozord
|
5e6435e2e1 | ||
|
denozord
|
02a45fce71 | ||
|
denozord
|
71685ad310 | ||
|
denozord
|
00d977dfb5 | ||
|
denozord
|
574c0d25c2 | ||
|
denozord
|
513a22008b | ||
|
denozord
|
2e02d550f6 | ||
|
denozord
|
b35f787626 | ||
|
denozord
|
e4394ef35c | ||
|
denozord
|
a44b49fdeb | ||
|
denozord
|
3f41bd4c7c | ||
|
denozord
|
f0db9ed013 | ||
|
denozord
|
d397612fa5 | ||
|
denozord
|
00afe2d6b2 | ||
|
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 |
@@ -0,0 +1,110 @@
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H5","location":"frontend/src/App.jsx:route-change","message":"Route changed in MainLayout","data":{"pathname":"/easy-switch","layout":"fluid"},"timestamp":1771918574971}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/alerts"},"timestamp":1771918574974}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/communities"},"timestamp":1771918574974}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/communities","status":200},"timestamp":1771918575149}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/servers"},"timestamp":1771918575150}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/alerts","status":200},"timestamp":1771918575158}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/network-config"},"timestamp":1771918575261}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/servers","status":200},"timestamp":1771918575260}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/network-config","status":200},"timestamp":1771918575342}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-configs"},"timestamp":1771918575343}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-configs","status":200},"timestamp":1771918575431}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/srv-5"},"timestamp":1771918575432}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-vpsville"},"timestamp":1771918575432}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-ihor"},"timestamp":1771918575431}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-dc"},"timestamp":1771918575432}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/nsk-servhost"},"timestamp":1771918575432}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-vpsville","status":200},"timestamp":1771918575519}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-ihor","status":200},"timestamp":1771918575641}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/srv-5","status":200},"timestamp":1771918575645}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/nsk-servhost","status":200},"timestamp":1771918575648}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-dc","status":200},"timestamp":1771918575649}
|
||||
{"sessionId":"378b5f","runId":"post-fix","hypothesisId":"H6","location":"frontend/src/contexts/PingContext.jsx:requestPings","message":"Ping batch scheduled","data":{"scope":"easy-switch","count":20,"force":false},"timestamp":1771918575650}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575651}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575653}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575652}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575653}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575653}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575653}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771918575653}
|
||||
{"sessionId":"378b5f","runId":"post-fix","hypothesisId":"H6","location":"frontend/src/contexts/PingContext.jsx:requestPings","message":"Ping batch scheduled","data":{"scope":"easy-switch","count":0,"force":false},"timestamp":1771918575667}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918581171}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918581264}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918585199}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918585287}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918589219}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918589300}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918590962}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918593250}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918593325}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918594992}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918596225}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918599017}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918600849}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918601366}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918603038}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918604878}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918606344}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918608918}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918610433}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"POST","url":"/mikrotik/ping","status":200},"timestamp":1771918614512}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/alerts"},"timestamp":1771918634979}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/alerts","status":200},"timestamp":1771918635314}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/alerts"},"timestamp":1771918694983}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/alerts","status":200},"timestamp":1771918695315}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/alerts"},"timestamp":1771919865915}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/communities"},"timestamp":1771919865915}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H5","location":"frontend/src/App.jsx:route-change","message":"Route changed in MainLayout","data":{"pathname":"/easy-switch","layout":"fluid"},"timestamp":1771919865914}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/servers"},"timestamp":1771919865941}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/communities","status":200},"timestamp":1771919865941}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/alerts","status":200},"timestamp":1771919865942}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/servers","status":200},"timestamp":1771919865956}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/network-config"},"timestamp":1771919865956}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/network-config","status":200},"timestamp":1771919866039}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-configs"},"timestamp":1771919866040}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-ihor"},"timestamp":1771919866114}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-vpsville"},"timestamp":1771919866114}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-configs","status":200},"timestamp":1771919866113}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/srv-5"},"timestamp":1771919866114}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/msk-dc"},"timestamp":1771919866114}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"GET","url":"/server-filters/nsk-servhost"},"timestamp":1771919866114}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-ihor","status":200},"timestamp":1771919866194}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-vpsville","status":200},"timestamp":1771919866308}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/srv-5","status":200},"timestamp":1771919866314}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/msk-dc","status":200},"timestamp":1771919866322}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:response","message":"API response received","data":{"method":"GET","url":"/server-filters/nsk-servhost","status":200},"timestamp":1771919866323}
|
||||
{"sessionId":"378b5f","runId":"post-fix","hypothesisId":"H6","location":"frontend/src/contexts/PingContext.jsx:requestPings","message":"Ping batch scheduled","data":{"scope":"easy-switch","count":20,"force":false},"timestamp":1771919866323}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866325}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866326}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"baseline","hypothesisId":"H1_H2","location":"frontend/src/lib/api.js:request","message":"API request started","data":{"method":"POST","url":"/mikrotik/ping"},"timestamp":1771919866327}
|
||||
{"sessionId":"378b5f","runId":"post-fix","hypothesisId":"H6","location":"frontend/src/contexts/PingContext.jsx:requestPings","message":"Ping batch scheduled","data":{"scope":"easy-switch","count":0,"force":false},"timestamp":1771919866389}
|
||||
@@ -0,0 +1,248 @@
|
||||
---
|
||||
name: Анализ и оптимизация Router Lists UI
|
||||
overview: Комплексный анализ проекта Router Lists UI (RouterOS Manager) — управление BGP-списками, MikroTik и S3. План включает предложения по новым фичам и оптимизациям архитектуры, производительности и качества кода.
|
||||
todos: []
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Анализ проекта Router Lists UI
|
||||
|
||||
## Текущее состояние проекта
|
||||
|
||||
**Router Lists UI** — fullstack-приложение для управления BGP-списками (домены, IP-диапазоны, ASN), фильтрами и конфигурациями MikroTik на базе S3 (Yandex Object Storage).
|
||||
|
||||
### Архитектура
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph Frontend [Frontend - Vite + React]
|
||||
App[App.jsx]
|
||||
Pages[20+ страниц]
|
||||
Hooks[useApiQuery, useErrorHandler]
|
||||
API[api.js + axios]
|
||||
end
|
||||
|
||||
subgraph Backend [Backend - Express]
|
||||
Server[server.js]
|
||||
Routes[30+ роутов]
|
||||
S3Service[s3Service]
|
||||
Schedulers[4 планировщика]
|
||||
end
|
||||
|
||||
subgraph External [Внешние сервисы]
|
||||
S3[S3 / Yandex Object Storage]
|
||||
MikroTik[MikroTik RouterOS API]
|
||||
BGP[BGP Background Service]
|
||||
end
|
||||
|
||||
App --> Pages
|
||||
Pages --> Hooks
|
||||
Hooks --> API
|
||||
API -->|REST| Server
|
||||
Server --> Routes
|
||||
Routes --> S3Service
|
||||
S3Service --> S3
|
||||
Routes --> MikroTik
|
||||
Server --> Schedulers
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Технологический стек
|
||||
|
||||
|
||||
| Слой | Технологии |
|
||||
| -------- | ------------------------------------------------------------------------------- |
|
||||
| Frontend | React 19, Vite 7, Tabler, TanStack Query, React Router, Recharts, @xyflow/react |
|
||||
| Backend | Express, AWS SDK (S3), Pino, Prometheus, Helmet, Rate Limit |
|
||||
| Инфра | Docker, Gitea Actions, S3 |
|
||||
|
||||
|
||||
### Сильные стороны
|
||||
|
||||
- Продуманная обработка ошибок (retry, ErrorBoundary, NetworkErrorHandler)
|
||||
- ETag/If-None-Match для условных GET и кеширования
|
||||
- Soft-locks для предотвращения гонок при редактировании
|
||||
- Prometheus-метрики, health/ready endpoints
|
||||
- i18n (RU/EN), темы (light/dark), два варианта layout
|
||||
- Command Palette, горячие клавиши
|
||||
- Типы в `frontend/src/types/index.ts` (частичная типизация)
|
||||
|
||||
---
|
||||
|
||||
## Рекомендуемые фичи
|
||||
|
||||
### 1. Аутентификация и авторизация (высокий приоритет)
|
||||
|
||||
**Проблема:** API открыт без авторизации — любой с доступом к сети может изменять данные.
|
||||
|
||||
**Решение:**
|
||||
|
||||
- JWT или session-based auth (express-session + passport)
|
||||
- Роли: `viewer` (только чтение), `editor` (CRUD), `admin` (всё + настройки)
|
||||
- Middleware на backend для проверки токена/сессии
|
||||
- Страница логина, защищённые роуты на frontend
|
||||
|
||||
### 2. Аудит-лог изменений
|
||||
|
||||
- Логирование всех мутаций (кто, когда, что изменил)
|
||||
- Хранение в S3 (`audit/YYYY-MM-DD.jsonl`) или отдельная таблица
|
||||
- UI: страница «История изменений» с фильтрами по ресурсу, пользователю, дате
|
||||
|
||||
### 3. Уведомления и алерты
|
||||
|
||||
- Расширить [AlertsContext](frontend/src/contexts/AlertsContext.jsx): email/Telegram при критичных событиях
|
||||
- Настраиваемые триггеры: сервер недоступен, превышение лимита ресурсов
|
||||
- Интеграция с webhook (например, Slack/Discord)
|
||||
|
||||
### 4. Экспорт/импорт в разных форматах
|
||||
|
||||
- Экспорт доменов/ASN/IP в CSV, JSON, plain text
|
||||
- Импорт из CSV с маппингом колонок
|
||||
- Bulk-операции: «заменить community для выбранных» уже есть — добавить «импорт из файла»
|
||||
|
||||
### 5. Расширенный поиск и фильтры
|
||||
|
||||
- Полнотекстовый поиск по доменам (при больших объёмах — индексация на backend)
|
||||
- Фильтры: по community, по дате добавления (если добавить метаданные)
|
||||
- Сохранённые фильтры (уже есть [SavedFilters](frontend/src/components/SavedFilters.jsx)) — синхронизация с backend
|
||||
|
||||
### 6. Дашборд и отчёты
|
||||
|
||||
- Кастомные виджеты на Dashboard (drag-and-drop)
|
||||
- Отчёты: топ доменов по community, динамика изменений
|
||||
- Scheduled reports (PDF/email по расписанию)
|
||||
|
||||
### 7. API-документация
|
||||
|
||||
- OpenAPI/Swagger для backend API
|
||||
- Интерактивная документация (Swagger UI) на `/api-docs`
|
||||
- Генерация клиента для внешних интеграций
|
||||
|
||||
### 8. Мобильная версия (PWA)
|
||||
|
||||
- Service Worker для офлайн-просмотра кешированных данных
|
||||
- Адаптивные таблицы (уже используется Tabler)
|
||||
- Установка как PWA (manifest.json)
|
||||
|
||||
---
|
||||
|
||||
## Оптимизации проекта
|
||||
|
||||
### Frontend
|
||||
|
||||
#### 1. Code splitting и lazy loading
|
||||
|
||||
**Проблема:** Все 20+ страниц импортируются синхронно в [App.jsx](frontend/src/App.jsx) — большой начальный бандл.
|
||||
|
||||
**Решение:**
|
||||
|
||||
```javascript
|
||||
// Вместо: import Dashboard from './Dashboard';
|
||||
const Dashboard = lazy(() => import('./Dashboard'));
|
||||
// Обернуть Routes в <Suspense fallback={<PageSkeleton />}>
|
||||
```
|
||||
|
||||
Применить для тяжёлых страниц: `TrafficDashboard`, `NetworkMapDashboard`, `RouteOptimizerPage`, `FilterManager`, `MikrotikTools`, `OspfToolsPage`.
|
||||
|
||||
#### 2. Виртуализация таблиц
|
||||
|
||||
- Используется `@tanstack/react-virtual` — проверить, что все большие списки (domains, ip-ranges, asns) используют виртуализацию
|
||||
- В [DomainsNewManager](frontend/src/DomainsNewManager.jsx) — пагинация на backend (`offset`/`limit`), но при `limit=0` загружаются все данные — рассмотреть серверную пагинацию для больших объёмов
|
||||
|
||||
#### 3. Оптимизация API-запросов
|
||||
|
||||
- На Easy Switch при открытии идёт множество параллельных `POST /mikrotik/ping` — добавить batch endpoint `POST /mikrotik/ping-batch` для снижения нагрузки
|
||||
- Prefetch при наведении на пункты меню (React Query `prefetchQuery`)
|
||||
- Дедупликация запросов к `/communities` — уже кешируется в React Query, но вызывается из многих компонентов
|
||||
|
||||
#### 4. Унификация работы с данными
|
||||
|
||||
- Часть страниц использует [useApiQuery](frontend/src/hooks/useApiQuery.js) (domains, ipRanges, asns, servers, communities), часть — ручные `useState` + `api.get/post`
|
||||
- Мигрировать `DomainsNewManager`, `IPRangesManager`, `ASNsNewManager` на единые хуки из `useApiQuery` для консистентности и оптимистичных обновлений
|
||||
|
||||
#### 5. Миграция на TypeScript
|
||||
|
||||
- Есть [types/index.ts](frontend/src/types/index.ts), но большинство компонентов — `.jsx`
|
||||
- Поэтапная миграция: сначала `api.js`, `useApiQuery.js`, затем страницы
|
||||
- Включить `strict` в tsconfig для новых файлов
|
||||
|
||||
### Backend
|
||||
|
||||
#### 1. Кеширование S3-ответов
|
||||
|
||||
- Добавить in-memory cache (например, `node-cache`) для часто читаемых объектов (`communities`, `servers`, `filters`) с TTL 30–60 сек
|
||||
- Уменьшит количество обращений к S3 при активной работе
|
||||
|
||||
#### 2. Пул соединений и таймауты
|
||||
|
||||
- Проверить настройки AWS SDK: connection pooling, таймауты для S3
|
||||
- Для долгих операций (address-lists, speed-test) — рассмотреть фоновые задачи (очередь jobs)
|
||||
|
||||
#### 3. Валидация и санитизация
|
||||
|
||||
- Использовать единую схему валидации (Ajv) для всех JSON-эндпоинтов
|
||||
- Добавить rate limit на чувствительные операции (apply config, run script)
|
||||
|
||||
#### 4. Структура роутов
|
||||
|
||||
- [server.js](backend/server.js) — ~450 строк, много роутов в одном файле
|
||||
- Вынести группы роутов в отдельные файлы: `textDataRoutes`, `jsonDataRoutes`, `mikrotikRoutes` и подключать через `app.use('/api/...', router)`
|
||||
|
||||
### Инфраструктура и DevOps
|
||||
|
||||
#### 1. Тестирование
|
||||
|
||||
- **Сейчас:** `npm test` — заглушка, vitest упоминается в tsconfig, но тестов нет
|
||||
- Добавить unit-тесты для: `validators`, `apiErrorHandler`, `s3Helpers`, `mikrotikConfig`
|
||||
- E2E (Playwright) для критичных сценариев: логин, добавление домена, применение фильтра
|
||||
|
||||
#### 2. CI/CD
|
||||
|
||||
- Добавить шаг `npm run lint` и `npm run test` в Gitea Actions перед сборкой Docker
|
||||
- Отдельный workflow для frontend: `npm run build` + проверка размера бандла
|
||||
|
||||
#### 3. Мониторинг
|
||||
|
||||
- Prometheus уже есть — добавить алерты (например, в Alertmanager) на `http_errors_total`, `http_request_duration_seconds`
|
||||
- Health check: проверка доступности S3 в `/ready`
|
||||
|
||||
#### 4. Безопасность
|
||||
|
||||
- Регулярное обновление зависимостей (`npm audit`)
|
||||
- Секреты (ENCRYPTION_KEY, AWS keys) — только через env, не в коде
|
||||
- Рассмотреть Vault или аналог для production
|
||||
|
||||
### Документация и DX
|
||||
|
||||
- README — хороший, но API описан текстом; добавить ссылку на OpenAPI
|
||||
- CONTRIBUTING.md с правилами коммитов, кодстайла
|
||||
- Архитектурная диаграмма в репозитории (C4 или подобная)
|
||||
|
||||
---
|
||||
|
||||
## Приоритизация
|
||||
|
||||
|
||||
| Категория | Действие | Приоритет |
|
||||
| ------------------ | -------------------------- | --------- |
|
||||
| Безопасность | Аутентификация | Высокий |
|
||||
| Производительность | Lazy loading страниц | Высокий |
|
||||
| Производительность | Batch ping endpoint | Средний |
|
||||
| Качество | Unit-тесты | Высокий |
|
||||
| Качество | Миграция на TS | Средний |
|
||||
| UX | Аудит-лог | Средний |
|
||||
| UX | Расширенный экспорт/импорт | Низкий |
|
||||
| Инфра | CI: lint + test | Высокий |
|
||||
| Инфра | S3 in-memory cache | Средний |
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Следующие шаги
|
||||
|
||||
1. Выбрать 2–3 пункта из плана для первой итерации
|
||||
2. Для аутентификации — определиться со стратегией (JWT vs session, хранение пользователей)
|
||||
3. Для lazy loading — создать `PageSkeleton` и обновить роуты в App.jsx
|
||||
4. Для тестов — настроить Vitest, написать первые тесты для `validators` и `apiErrorHandler`
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
name: Publish Fast Tabler Docker image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- tabler
|
||||
- v3
|
||||
|
||||
jobs:
|
||||
build-and-push-fast:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 15
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
with:
|
||||
driver-opts: |
|
||||
image=moby/buildkit:v0.13.2
|
||||
|
||||
- name: Log in to Gitea Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: git.shts.su
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.ACTIONS_PAT }}
|
||||
|
||||
- name: Build and push Fast Tabler Docker image
|
||||
uses: docker/build-push-action@v5
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile.fast
|
||||
push: true
|
||||
platforms: linux/amd64
|
||||
cache-from: |
|
||||
type=registry,ref=git.shts.su/${{ gitea.repository }}:tabler-fast
|
||||
cache-to: type=inline
|
||||
tags: |
|
||||
git.shts.su/${{ gitea.repository }}:tabler-fast
|
||||
git.shts.su/${{ gitea.repository }}:tabler-fast-${{ gitea.sha }}
|
||||
labels: |
|
||||
org.opencontainers.image.title=S3 Lists Manager with Tabler UI (Fast Build)
|
||||
org.opencontainers.image.description=Modern S3 Lists Manager with Tabler UI design - Fast Alpine build
|
||||
org.opencontainers.image.version=tabler-fast
|
||||
org.opencontainers.image.revision=${{ gitea.sha }}
|
||||
org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}
|
||||
provenance: false
|
||||
|
||||
- name: Cleanup old images
|
||||
run: |
|
||||
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 https://docker.shts.su/api/webhooks/d3fd3b6a-c670-4035-9357-2fde8aa76b6e
|
||||
@@ -4,6 +4,10 @@ on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- v4
|
||||
- tabler
|
||||
- v3
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
@@ -29,7 +33,7 @@ jobs:
|
||||
uses: docker/build-push-action@v5
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
file: ./Dockerfile.fast
|
||||
push: true
|
||||
platforms: linux/amd64
|
||||
cache-from: type=gha
|
||||
@@ -38,8 +42,8 @@ jobs:
|
||||
git.shts.su/${{ gitea.repository }}:latest
|
||||
git.shts.su/${{ gitea.repository }}:${{ gitea.sha }}
|
||||
labels: |
|
||||
org.opencontainers.image.title=S3 Lists Manager
|
||||
org.opencontainers.image.description=S3 Lists Manager for domains and AS management
|
||||
org.opencontainers.image.title=RouterOS Manager
|
||||
org.opencontainers.image.description=RouterOS Manager for domains and AS management
|
||||
org.opencontainers.image.version=latest
|
||||
org.opencontainers.image.revision=${{ gitea.sha }}
|
||||
org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}
|
||||
@@ -47,5 +51,6 @@ jobs:
|
||||
BUILDKIT_INLINE_CACHE=1
|
||||
|
||||
- name: Trigger container update webhook
|
||||
continue-on-error: true
|
||||
run: |
|
||||
curl -X POST -sS --fail https://docker.shts.su/api/webhooks/d3fd3b6a-c670-4035-9357-2fde8aa76b6e
|
||||
curl -X POST -sS --fail "${{ secrets.portainer_webhook }}"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Docker Images
|
||||
|
||||
Этот проект предоставляет Docker образы для S3 Lists Manager с двумя различными версиями интерфейса.
|
||||
Этот проект предоставляет Docker образы для RouterOS Manager с двумя различными версиями интерфейса.
|
||||
|
||||
## 🏷️ Доступные теги
|
||||
|
||||
@@ -75,6 +75,9 @@ services:
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- ENCRYPTION_KEY=${ENCRYPTION_KEY} # Обязательно! Используйте .env файл или secrets
|
||||
# Прокси EvoBGP для UI (Communities / Domains / …) — без CORS в браузере:
|
||||
# - EVOBGP_API_URL=http://evobgp:8080
|
||||
# - EVOBGP_API_TOKEN=...
|
||||
|
||||
s3-lists-manager-tabler:
|
||||
image: git.shts.su/[repository]:tabler
|
||||
@@ -104,6 +107,28 @@ docker-compose up -d
|
||||
| `NODE_ENV` | Окружение Node.js | `production` | Нет |
|
||||
| `PORT` | Порт для запуска сервера | `3001` | Нет |
|
||||
| `ENCRYPTION_KEY` | Ключ шифрования для IPSec паролей (64 hex символа) | - | **Да** |
|
||||
| `EVOBGP_API_URL` | Базовый URL API EvoBGP для серверного прокси `/api/evobgp` (например `http://evobgp:8080` или `http://10.0.0.5:8080`; при необходимости к пути добавляется `/v1`) | - | Да, если используете интеграцию EvoBGP в UI |
|
||||
| `EVOBGP_API_TOKEN` | Bearer-токен к API EvoBGP (только на сервере, не в браузере) | - | Да, если используете интеграцию EvoBGP в UI |
|
||||
|
||||
### EvoBGP и reverse proxy (nginx)
|
||||
|
||||
Запросы UI идут на тот же origin: `/api/evobgp/…` обрабатывает **Node** внутри образа. Если перед приложением стоит **nginx**, нужно проксировать префикс `/api` на Node **без потери** сегмента `/api` в URI (иначе в upstream попадёт не тот путь и будет 404).
|
||||
|
||||
**Рекомендуемый вариант** (путь `/api/…` сохраняется):
|
||||
|
||||
```nginx
|
||||
location /api/ {
|
||||
proxy_pass http://127.0.0.1:3001/api/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
```
|
||||
|
||||
**Типичная ошибка**: внутри `location /api` указать `proxy_pass http://127.0.0.1:3001/;` — nginx **срезает** `/api`, в Node приходит `/evobgp/router-lists/catalog` вместо `/api/evobgp/router-lists/catalog`. В коде добавлен запасной маршрут на `/evobgp`, но лучше поправить nginx.
|
||||
|
||||
**Проверка**: `GET http://<хост>:<порт>/api/evobgp` (без хвоста) должен вернуть JSON вида `{"ok":true,"proxy":true,"evobgpConfigured":true}` — если вместо этого HTML «404» или страница SPA, запрос **не доходит** до Node (только статика, другой порт или неверный `proxy_pass`).
|
||||
|
||||
### ENCRYPTION_KEY
|
||||
|
||||
|
||||
@@ -50,6 +50,10 @@ COPY backend/services ./services
|
||||
COPY backend/utils ./utils
|
||||
COPY --from=frontend-builder /app/frontend/dist ./public
|
||||
|
||||
# EvoBGP (справочник community / router-lists через прокси /api/evobgp, без CORS в браузере):
|
||||
# EVOBGP_API_URL — например http://evobgp:8080 или http://192.168.1.10:8080 (к /v1 приведётся автоматически при необходимости)
|
||||
# EVOBGP_API_TOKEN — Bearer-токен API EvoBGP
|
||||
#
|
||||
# ENCRYPTION_KEY должен быть установлен через переменные окружения при запуске контейнера
|
||||
# Это обязательный параметр для работы с IPSec паролями
|
||||
# Пример: docker run -e ENCRYPTION_KEY=your-64-hex-character-key ...
|
||||
|
||||
@@ -109,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/s3/last-modified` — метаданные S3 (etag/lastModified/contentLength) по ключевым файлам.
|
||||
- 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`.
|
||||
|
||||
## Frontend
|
||||
@@ -138,7 +138,7 @@ frontend/ # Vite React UI
|
||||
## Лицензия
|
||||
MIT
|
||||
|
||||
# 📂 S3 Lists Manager
|
||||
# 📂 RouterOS Manager
|
||||
|
||||
|
||||
Веб-интерфейс для удобного управления файлами в S3-совместимом хранилище Yandex Cloud. Приложение позволяет в реальном времени просматривать, добавлять, редактировать, удалять и массово изменять записи в следующих файлах:
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Краткое описание
|
||||
|
||||
Проведена комплексная модернизация пользовательского интерфейса S3 Lists Manager с внедрением современных UX/UI практик, улучшением доступности и мобильного опыта.
|
||||
Проведена комплексная модернизация пользовательского интерфейса RouterOS Manager с внедрением современных UX/UI практик, улучшением доступности и мобильного опыта.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -195,6 +195,22 @@ function sanitizeString(str) {
|
||||
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 паттерны
|
||||
* @param {string} str - строка для проверки
|
||||
@@ -328,6 +344,7 @@ module.exports = {
|
||||
isValidASN,
|
||||
isValidCommunity,
|
||||
isValidGateway,
|
||||
isValidServerId,
|
||||
sanitizeString,
|
||||
isSafeSQLString,
|
||||
isSafeXSSString,
|
||||
|
||||
@@ -0,0 +1,377 @@
|
||||
/**
|
||||
* Система оповещений: агрегирует проблемы из availability и resources/stats.
|
||||
* Критерии и пороги задаются в ui-settings.alertSettings.
|
||||
*/
|
||||
|
||||
const { sendError } = require('../middleware/errorHandler');
|
||||
const { readServersFromS3 } = require('./serversRoutes');
|
||||
const { checkOneServerFast, loadUiSettingsSync } = require('./miscRoutes');
|
||||
const { getResourceStatsData } = require('./resourceStatsRoutes');
|
||||
const { getUptimeCacheData } = require('./mikrotikConfigRoutes');
|
||||
const { buildConnections } = require('../services/networkMapScheduler');
|
||||
const { readS3TextObject } = require('../services/s3Service');
|
||||
|
||||
/** Значения по умолчанию для настроек оповещений. */
|
||||
const DEFAULT_ALERT_SETTINGS = {
|
||||
serverOffline: { enabled: true, offlineMinutes: 5 },
|
||||
mikrotikUnreachable: { enabled: true, durationMinutes: 5 },
|
||||
highCpu: { enabled: true, thresholdPercent: 85, durationMinutes: 10 },
|
||||
highRam: { enabled: true, thresholdPercent: 85, durationMinutes: 10 },
|
||||
highHdd: { enabled: true, thresholdPercent: 90, durationMinutes: 10 },
|
||||
/** Глобальные пороги карты сети для UI-аналитики */
|
||||
networkMapNodeThresholds: {
|
||||
lowSpeedMbps: 40,
|
||||
belowNormSpeedMbps: 80,
|
||||
normalSpeedMbps: 120,
|
||||
},
|
||||
/** Индивидуальные пороги по туннелям (карта сети) */
|
||||
tunnelThresholds: [],
|
||||
};
|
||||
|
||||
function getAlertSettings(uiSettings) {
|
||||
const raw = uiSettings?.alertSettings && typeof uiSettings.alertSettings === 'object' ? uiSettings.alertSettings : {};
|
||||
return {
|
||||
serverOffline: { ...DEFAULT_ALERT_SETTINGS.serverOffline, ...raw.serverOffline },
|
||||
mikrotikUnreachable: { ...DEFAULT_ALERT_SETTINGS.mikrotikUnreachable, ...raw.mikrotikUnreachable },
|
||||
highCpu: { ...DEFAULT_ALERT_SETTINGS.highCpu, ...raw.highCpu },
|
||||
highRam: { ...DEFAULT_ALERT_SETTINGS.highRam, ...raw.highRam },
|
||||
highHdd: { ...DEFAULT_ALERT_SETTINGS.highHdd, ...raw.highHdd },
|
||||
networkMapNodeThresholds: {
|
||||
...DEFAULT_ALERT_SETTINGS.networkMapNodeThresholds,
|
||||
...(raw.networkMapNodeThresholds && typeof raw.networkMapNodeThresholds === 'object'
|
||||
? raw.networkMapNodeThresholds
|
||||
: {}),
|
||||
},
|
||||
tunnelThresholds: Array.isArray(raw.tunnelThresholds) ? raw.tunnelThresholds : [],
|
||||
};
|
||||
}
|
||||
|
||||
function edgePingKey(a, b) {
|
||||
return [String(a), String(b)].sort().join(':');
|
||||
}
|
||||
|
||||
function speedKey(key1, key2) {
|
||||
return [String(key1), String(key2)].sort().join(':');
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/alerts
|
||||
* Возвращает список активных оповещений (учёт настроек из ui-settings.alertSettings).
|
||||
*/
|
||||
async function getAlerts(req, res) {
|
||||
try {
|
||||
const uiSettings = await loadUiSettingsSync();
|
||||
const settings = getAlertSettings(uiSettings);
|
||||
|
||||
const servers = await readServersFromS3();
|
||||
const alerts = [];
|
||||
const now = new Date().toISOString();
|
||||
|
||||
// 1) Доступность серверов: jumphost/home — по правилам Uptime Monitor (кеш), остальные — TCP 80/443
|
||||
if (settings.serverOffline.enabled) {
|
||||
const routerTypes = ['jumphost', 'home'];
|
||||
const { results: uptimeResults } = await getUptimeCacheData();
|
||||
|
||||
const nonRouterServers = servers.filter(
|
||||
(s) => !routerTypes.includes(String(s.type || '').toLowerCase())
|
||||
);
|
||||
const availabilityChecks = await Promise.allSettled(
|
||||
nonRouterServers.map((s) => checkOneServerFast(s))
|
||||
);
|
||||
|
||||
servers.forEach((server) => {
|
||||
const serverId = server.id || server.dns || server.ip;
|
||||
const name = server.name || server.dns || server.ip || server.id || 'Сервер';
|
||||
const isRouter = routerTypes.includes(String(server.type || '').toLowerCase());
|
||||
|
||||
let offline = false;
|
||||
let description = '';
|
||||
|
||||
if (isRouter) {
|
||||
const entry = uptimeResults[serverId];
|
||||
const offlineMinutes = Math.max(1, Math.min(1440, Number(settings.serverOffline.offlineMinutes) || 5));
|
||||
const offlineSinceMs = entry && entry.lastCheckTs ? (Date.now() - entry.lastCheckTs) : 0;
|
||||
offline = entry && entry.ok === false && offlineSinceMs >= offlineMinutes * 60 * 1000;
|
||||
description = offline
|
||||
? `${name} недоступен более ${offlineMinutes} мин (по проверке Uptime Monitor).`
|
||||
: '';
|
||||
} else {
|
||||
const idx = nonRouterServers.findIndex(
|
||||
(s) => (s.id || s.dns || s.ip) === serverId
|
||||
);
|
||||
const online = idx >= 0 && availabilityChecks[idx].status === 'fulfilled' && availabilityChecks[idx].value;
|
||||
offline = !online;
|
||||
description = offline ? `${name} не отвечает на TCP (80/443).` : '';
|
||||
}
|
||||
|
||||
if (offline && description) {
|
||||
alerts.push({
|
||||
id: `server-offline-${serverId}`,
|
||||
type: 'server_offline',
|
||||
severity: 'critical',
|
||||
title: 'Сервер недоступен',
|
||||
description,
|
||||
entity: name,
|
||||
entityId: serverId,
|
||||
link: isRouter ? '/uptime-monitor' : '/servers',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 2) Ресурсы роутеров (MikroTik): ошибка доступа, высокое CPU/RAM/HDD
|
||||
let resourceData;
|
||||
try {
|
||||
resourceData = await getResourceStatsData();
|
||||
} catch (err) {
|
||||
console.warn('alerts: getResourceStatsData failed', err?.message);
|
||||
resourceData = { routers: [] };
|
||||
}
|
||||
|
||||
const thCpu = Math.max(1, Math.min(100, Number(settings.highCpu.thresholdPercent) || 85));
|
||||
const thRam = Math.max(1, Math.min(100, Number(settings.highRam.thresholdPercent) || 85));
|
||||
const thHdd = Math.max(1, Math.min(100, Number(settings.highHdd.thresholdPercent) || 90));
|
||||
|
||||
const routers = resourceData.routers || [];
|
||||
routers.forEach((router) => {
|
||||
const { serverId, name, error, resource } = router;
|
||||
const entityName = name || serverId;
|
||||
|
||||
if (error && settings.mikrotikUnreachable.enabled) {
|
||||
alerts.push({
|
||||
id: `mikrotik-error-${serverId}`,
|
||||
type: 'mikrotik_unreachable',
|
||||
severity: 'critical',
|
||||
title: 'MikroTik недоступен',
|
||||
description: `${entityName}: ${error}`,
|
||||
entity: entityName,
|
||||
entityId: serverId,
|
||||
link: '/resource-stats',
|
||||
at: now,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!resource) return;
|
||||
|
||||
if (settings.highCpu.enabled && resource.cpuLoad != null && resource.cpuLoad >= thCpu) {
|
||||
alerts.push({
|
||||
id: `cpu-high-${serverId}`,
|
||||
type: 'high_cpu',
|
||||
severity: 'warning',
|
||||
title: 'Высокое использование CPU',
|
||||
description: `${entityName}: ${resource.cpuLoad}% (порог ${thCpu}%).`,
|
||||
entity: entityName,
|
||||
entityId: serverId,
|
||||
value: resource.cpuLoad,
|
||||
threshold: thCpu,
|
||||
link: '/resource-stats',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
if (settings.highRam.enabled && resource.memoryUsagePercent != null && resource.memoryUsagePercent >= thRam) {
|
||||
alerts.push({
|
||||
id: `ram-high-${serverId}`,
|
||||
type: 'high_ram',
|
||||
severity: 'warning',
|
||||
title: 'Высокое использование RAM',
|
||||
description: `${entityName}: ${resource.memoryUsagePercent}% (порог ${thRam}%).`,
|
||||
entity: entityName,
|
||||
entityId: serverId,
|
||||
value: resource.memoryUsagePercent,
|
||||
threshold: thRam,
|
||||
link: '/resource-stats',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
if (settings.highHdd.enabled && resource.hddUsagePercent != null && resource.hddUsagePercent >= thHdd) {
|
||||
alerts.push({
|
||||
id: `hdd-high-${serverId}`,
|
||||
type: 'high_hdd',
|
||||
severity: 'warning',
|
||||
title: 'Высокое использование диска',
|
||||
description: `${entityName}: ${resource.hddUsagePercent}% (порог ${thHdd}%).`,
|
||||
entity: entityName,
|
||||
entityId: serverId,
|
||||
value: resource.hddUsagePercent,
|
||||
threshold: thHdd,
|
||||
link: '/resource-stats',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 3) Туннели (карта сети): индивидуальные пороги по пингу и скорости
|
||||
const rawTunnelThresholds = Array.isArray(settings.tunnelThresholds)
|
||||
? settings.tunnelThresholds
|
||||
: [];
|
||||
const tunnelThresholds = rawTunnelThresholds.filter(
|
||||
(t) => t && (t.fromKey || t.toKey) && t.enabled !== false
|
||||
);
|
||||
|
||||
if (tunnelThresholds.length > 0) {
|
||||
let cache = null;
|
||||
let connectionsData = null;
|
||||
try {
|
||||
const [rawCache, built] = await Promise.all([
|
||||
readS3TextObject('network-map-cache/latest.json').catch(() => null),
|
||||
buildConnections().catch(() => null),
|
||||
]);
|
||||
if (rawCache?.body) {
|
||||
const parsed = JSON.parse(rawCache.body);
|
||||
if (parsed && typeof parsed === 'object') cache = parsed;
|
||||
}
|
||||
if (built && typeof built === 'object') connectionsData = built;
|
||||
} catch (e) {
|
||||
// Ошибки при чтении кеша/конфигурации не должны ломать остальные оповещения
|
||||
console.warn('alerts: network-map-cache read failed', e?.message || e);
|
||||
}
|
||||
|
||||
if (cache && connectionsData && Array.isArray(connectionsData.connections)) {
|
||||
const pingMap = cache.pingMap && typeof cache.pingMap === 'object' ? cache.pingMap : {};
|
||||
const speedMap = cache.speedMap && typeof cache.speedMap === 'object' ? cache.speedMap : {};
|
||||
|
||||
const serversByIp = new Map();
|
||||
servers.forEach((s) => {
|
||||
if (s && s.ip) {
|
||||
serversByIp.set(String(s.ip), s);
|
||||
}
|
||||
});
|
||||
|
||||
const thresholdsByKey = new Map();
|
||||
const makeKey = (fromKey, toKey, iface) => {
|
||||
const a = String(fromKey || '');
|
||||
const b = String(toKey || '');
|
||||
const pair = [a, b].sort().join('__');
|
||||
return `${pair}::${iface || ''}`;
|
||||
};
|
||||
|
||||
tunnelThresholds.forEach((t) => {
|
||||
const key = makeKey(t.fromKey, t.toKey, t.interfaceName || '');
|
||||
const maxPingMs =
|
||||
typeof t.maxPingMs === 'number'
|
||||
? t.maxPingMs
|
||||
: t.thresholdMs != null
|
||||
? Number(t.thresholdMs) || 0
|
||||
: 0;
|
||||
const minDownloadMbps =
|
||||
typeof t.minDownloadMbps === 'number'
|
||||
? t.minDownloadMbps
|
||||
: t.minDownMbps != null
|
||||
? Number(t.minDownMbps) || 0
|
||||
: 0;
|
||||
const minUploadMbps =
|
||||
typeof t.minUploadMbps === 'number'
|
||||
? t.minUploadMbps
|
||||
: t.minUpMbps != null
|
||||
? Number(t.minUpMbps) || 0
|
||||
: 0;
|
||||
thresholdsByKey.set(key, {
|
||||
maxPingMs,
|
||||
minDownloadMbps,
|
||||
minUploadMbps,
|
||||
});
|
||||
});
|
||||
|
||||
connectionsData.connections.forEach((c) => {
|
||||
const fromIp = String(c.from);
|
||||
const toIp = String(c.to);
|
||||
if (!fromIp || !toIp || fromIp === toIp) return;
|
||||
|
||||
const fromServer = serversByIp.get(fromIp) || null;
|
||||
const toServer = serversByIp.get(toIp) || null;
|
||||
const fromName = fromServer?.name || fromServer?.dns || fromIp;
|
||||
const toName = toServer?.name || toServer?.dns || toIp;
|
||||
|
||||
const fromKey = c.fromKey || fromIp;
|
||||
const toKey = c.toKey || toIp;
|
||||
const key = makeKey(fromKey, toKey, c.interfaceName || '');
|
||||
const th = thresholdsByKey.get(key);
|
||||
if (!th) return;
|
||||
|
||||
const maxPingMs = Math.max(0, Number(th.maxPingMs) || 0);
|
||||
const minDownMbps = Math.max(0, Number(th.minDownloadMbps) || 0);
|
||||
const minUpMbps = Math.max(0, Number(th.minUploadMbps) || 0);
|
||||
|
||||
const pingMapKey = edgePingKey(fromIp, toIp);
|
||||
const pingMs = typeof pingMap[pingMapKey] === 'number' ? pingMap[pingMapKey] : null;
|
||||
|
||||
if (maxPingMs > 0 && pingMs != null && pingMs >= maxPingMs) {
|
||||
alerts.push({
|
||||
id: `tunnel-ping-${pingMapKey}-${maxPingMs}`,
|
||||
type: 'tunnel_high_ping',
|
||||
severity: 'warning',
|
||||
title: 'Высокий пинг по туннелю',
|
||||
description: `Пинг между ${fromName} и ${toName}: ${pingMs} ms (порог ${maxPingMs} ms).`,
|
||||
entity: `${fromName} ⇄ ${toName}`,
|
||||
entityId: `${c.fromKey || fromIp}__${c.toKey || toIp}__${c.interfaceName || ''}`,
|
||||
link: '/network-map',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
|
||||
if ((minDownMbps > 0 || minUpMbps > 0) && c.fromKey && c.toKey) {
|
||||
const sk = speedKey(c.fromKey, c.toKey);
|
||||
const speed = speedMap[sk];
|
||||
if (speed && typeof speed === 'object') {
|
||||
const downMbps =
|
||||
typeof speed.tcpDownloadBps === 'number' ? speed.tcpDownloadBps / 1e6 : null;
|
||||
const upMbps =
|
||||
typeof speed.tcpUploadBps === 'number' ? speed.tcpUploadBps / 1e6 : null;
|
||||
|
||||
const downTooLow = minDownMbps > 0 && (downMbps == null || downMbps < minDownMbps);
|
||||
const upTooLow = minUpMbps > 0 && (upMbps == null || upMbps < minUpMbps);
|
||||
|
||||
if (downTooLow || upTooLow) {
|
||||
const parts = [];
|
||||
if (downTooLow) {
|
||||
parts.push(
|
||||
`↓ ${downMbps != null ? downMbps.toFixed(1) : '—'} Мбит/с (порог ${minDownMbps} Мбит/с)`
|
||||
);
|
||||
}
|
||||
if (upTooLow) {
|
||||
parts.push(
|
||||
`↑ ${upMbps != null ? upMbps.toFixed(1) : '—'} Мбит/с (порог ${minUpMbps} Мбит/с)`
|
||||
);
|
||||
}
|
||||
const ifaceLabel = c.interfaceName ? `, интерфейс ${c.interfaceName}` : '';
|
||||
alerts.push({
|
||||
id: `tunnel-speed-${sk}-${minDownMbps}-${minUpMbps}`,
|
||||
type: 'tunnel_low_speed',
|
||||
severity: 'warning',
|
||||
title: 'Низкая скорость по туннелю',
|
||||
description: `Туннель между ${fromName} и ${toName}${ifaceLabel}: ${parts.join(
|
||||
'; '
|
||||
)}.`,
|
||||
entity: `${fromName} ⇄ ${toName}`,
|
||||
entityId: `${c.fromKey || fromIp}__${c.toKey || toIp}__${c.interfaceName || ''}`,
|
||||
link: '/network-map',
|
||||
at: now,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return res.json({
|
||||
alerts,
|
||||
total: alerts.length,
|
||||
at: now,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('getAlerts:', error);
|
||||
return sendError(
|
||||
res,
|
||||
500,
|
||||
error.message || 'Ошибка загрузки оповещений',
|
||||
'E_ALERTS'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getAlerts,
|
||||
};
|
||||
@@ -23,8 +23,8 @@ async function getCommunities(req, res) {
|
||||
name: c.name ? String(c.name) : '',
|
||||
description: c.description ? String(c.description) : '',
|
||||
tags: Array.isArray(c.tags) ? c.tags.map(String) : [],
|
||||
gatewayDefault: c.gatewayDefault ? String(c.gatewayDefault) : '',
|
||||
color: c.color ? String(c.color) : ''
|
||||
color: c.color ? String(c.color) : '',
|
||||
icon: c.icon ? String(c.icon) : ''
|
||||
}));
|
||||
},
|
||||
defaultValue: []
|
||||
@@ -68,8 +68,8 @@ async function postCommunities(req, res) {
|
||||
name: entry.name ? String(entry.name) : '',
|
||||
description: entry.description ? String(entry.description) : '',
|
||||
tags: Array.isArray(entry.tags) ? entry.tags.map(String) : [],
|
||||
gatewayDefault: entry.gatewayDefault ? String(entry.gatewayDefault) : '',
|
||||
color: entry.color ? String(entry.color) : '',
|
||||
icon: entry.icon ? String(entry.icon) : '',
|
||||
category: entry.category ? String(entry.category) : '',
|
||||
priority: typeof entry.priority === 'number' ? entry.priority : 0,
|
||||
enabled: typeof entry.enabled === 'boolean' ? entry.enabled : true,
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
const http = require('http');
|
||||
const https = require('https');
|
||||
const { URL } = require('url');
|
||||
|
||||
/**
|
||||
* Нормализует базовый URL API EvoBGP до вида …/v1 (без завершающего слэша).
|
||||
*/
|
||||
function normalizeEvobgpBaseUrl(raw) {
|
||||
if (!raw || !String(raw).trim()) return '';
|
||||
const input = String(raw).trim();
|
||||
try {
|
||||
const u = new URL(input);
|
||||
let path = (u.pathname || '').replace(/\/+$/, '');
|
||||
if (!path || path === '/') {
|
||||
u.pathname = '/v1';
|
||||
} else if (!/\/v1$/i.test(path)) {
|
||||
u.pathname = `${path}/v1`;
|
||||
} else {
|
||||
u.pathname = path;
|
||||
}
|
||||
return `${u.origin}${u.pathname}`.replace(/\/+$/, '');
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Прокси EvoBGP: браузер бьёт в тот же origin (/api/evobgp/…), сервер добавляет Bearer и ходит в EvoBGP по сети Docker (без CORS).
|
||||
*/
|
||||
function createEvobgpProxy({ logger = console } = {}) {
|
||||
return function evobgpProxy(req, res) {
|
||||
const base = normalizeEvobgpBaseUrl(process.env.EVOBGP_API_URL || '');
|
||||
const token = String(process.env.EVOBGP_API_TOKEN || '').trim();
|
||||
|
||||
if (!base) {
|
||||
return res.status(503).json({
|
||||
code: 'E_EVOBGP_PROXY_NOT_CONFIGURED',
|
||||
message:
|
||||
'Прокси EvoBGP не настроен: задайте EVOBGP_API_URL (и при необходимости EVOBGP_API_TOKEN) в окружении контейнера.',
|
||||
});
|
||||
}
|
||||
if (!token) {
|
||||
return res.status(503).json({
|
||||
code: 'E_EVOBGP_PROXY_NO_TOKEN',
|
||||
message: 'Прокси EvoBGP: не задан EVOBGP_API_TOKEN в окружении сервера.',
|
||||
});
|
||||
}
|
||||
|
||||
const suffix = req.url && req.url.length ? req.url : '/';
|
||||
const targetUrl = `${base}${suffix.startsWith('/') ? suffix : `/${suffix}`}`;
|
||||
|
||||
let parsed;
|
||||
try {
|
||||
parsed = new URL(targetUrl);
|
||||
} catch {
|
||||
return res.status(500).json({
|
||||
code: 'E_EVOBGP_PROXY_BAD_URL',
|
||||
message: 'Некорректный EVOBGP_API_URL',
|
||||
});
|
||||
}
|
||||
|
||||
const lib = parsed.protocol === 'https:' ? https : http;
|
||||
const headers = { ...req.headers };
|
||||
delete headers.host;
|
||||
delete headers.connection;
|
||||
delete headers['content-length'];
|
||||
delete headers.cookie;
|
||||
headers.authorization = `Bearer ${token}`;
|
||||
headers.host = parsed.host;
|
||||
|
||||
const opts = {
|
||||
hostname: parsed.hostname,
|
||||
port: parsed.port || (parsed.protocol === 'https:' ? 443 : 80),
|
||||
path: parsed.pathname + parsed.search,
|
||||
method: req.method,
|
||||
headers,
|
||||
timeout: Math.min(120000, Number(process.env.EVOBGP_PROXY_TIMEOUT_MS) || 60000),
|
||||
};
|
||||
|
||||
const clientReq = lib.request(opts, (clientRes) => {
|
||||
res.status(clientRes.statusCode);
|
||||
// Не отбрасываем content-encoding: иначе upstream может отдать gzip-тело,
|
||||
// а клиент не узнает, что его нужно распаковать (в браузере будет «мусор»).
|
||||
const skip = new Set(['connection', 'transfer-encoding']);
|
||||
Object.keys(clientRes.headers).forEach((k) => {
|
||||
if (!skip.has(k.toLowerCase())) {
|
||||
res.setHeader(k, clientRes.headers[k]);
|
||||
}
|
||||
});
|
||||
clientRes.pipe(res);
|
||||
});
|
||||
|
||||
clientReq.on('error', (err) => {
|
||||
try {
|
||||
(req.log || logger).error({ err: err.message, target: targetUrl }, 'evobgp proxy');
|
||||
} catch {
|
||||
/* no-op */
|
||||
}
|
||||
if (!res.headersSent) {
|
||||
res.status(502).json({
|
||||
code: 'E_EVOBGP_PROXY_UPSTREAM',
|
||||
message: err.message || 'Не удалось связаться с EvoBGP',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
clientReq.on('timeout', () => {
|
||||
clientReq.destroy();
|
||||
if (!res.headersSent) {
|
||||
res.status(504).json({
|
||||
code: 'E_EVOBGP_PROXY_TIMEOUT',
|
||||
message: 'Таймаут запроса к EvoBGP',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (req.method === 'OPTIONS' || req.method === 'GET' || req.method === 'HEAD') {
|
||||
clientReq.end();
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === 'DELETE') {
|
||||
clientReq.end();
|
||||
return;
|
||||
}
|
||||
|
||||
const body =
|
||||
req.body !== undefined && req.body !== null && typeof req.body === 'object'
|
||||
? JSON.stringify(req.body)
|
||||
: typeof req.body === 'string'
|
||||
? req.body
|
||||
: '';
|
||||
|
||||
if (body) {
|
||||
const buf = Buffer.from(body, 'utf8');
|
||||
clientReq.setHeader('Content-Type', req.headers['content-type'] || 'application/json');
|
||||
clientReq.setHeader('Content-Length', buf.length);
|
||||
clientReq.end(buf);
|
||||
} else {
|
||||
clientReq.end();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
createEvobgpProxy,
|
||||
normalizeEvobgpBaseUrl,
|
||||
};
|
||||
@@ -298,7 +298,7 @@ async function runBackupNow(req, res) {
|
||||
comment: 'Manual backup from UI (/api/mikrotik/backups/run)',
|
||||
});
|
||||
|
||||
return sendOk(res, {
|
||||
return res.json({
|
||||
ok: true,
|
||||
key,
|
||||
serverId,
|
||||
|
||||
+1451
-136
File diff suppressed because it is too large
Load Diff
@@ -2,7 +2,7 @@
|
||||
* Разные утилитарные роуты (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 { resourceToKey, toIso } = require('../utils/helpers');
|
||||
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) {
|
||||
return new Promise((resolve) => {
|
||||
if (!Array.isArray(promises) || promises.length === 0) return resolve(false);
|
||||
@@ -524,5 +773,10 @@ module.exports = {
|
||||
getWsUrl,
|
||||
getUiSettings,
|
||||
postUiSettings,
|
||||
getPingServicesList,
|
||||
getPingServices,
|
||||
refreshPingServicesCache,
|
||||
checkOneServerFast,
|
||||
loadUiSettingsSync,
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
/**
|
||||
* Роуты для сбора статистики ресурсов (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,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Внутренняя функция: возвращает данные по ресурсам роутеров (без HTTP).
|
||||
*/
|
||||
async function getResourceStatsData() {
|
||||
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 { routers: results };
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/resources/stats
|
||||
* По каждому jumphost/home с MikroTik — запрос system/resource, ответ с группировкой по роутерам.
|
||||
*/
|
||||
async function getResourceStats(req, res) {
|
||||
try {
|
||||
const data = await getResourceStatsData();
|
||||
return res.json(data);
|
||||
} catch (error) {
|
||||
console.error('getResourceStats:', error);
|
||||
return sendError(
|
||||
res,
|
||||
500,
|
||||
error.message || 'Ошибка сбора статистики ресурсов',
|
||||
'E_RESOURCE_STATS'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getResourceStats,
|
||||
getResourceStatsData,
|
||||
};
|
||||
@@ -0,0 +1,859 @@
|
||||
/**
|
||||
* Rule-based "local AI" optimizer for route selection.
|
||||
* Returns best paths and probability of optimality for all candidates.
|
||||
*/
|
||||
|
||||
const { sendError } = require('../middleware/errorHandler');
|
||||
const { readS3TextObject, listS3Objects } = require('../services/s3Service');
|
||||
const { readServersFromS3 } = require('./serversRoutes');
|
||||
|
||||
const NETWORK_MAP_CACHE_KEY = 'network-map-cache/latest.json';
|
||||
const NETWORK_CONFIG_KEY = 'network-config.json';
|
||||
const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
|
||||
|
||||
const DEFAULT_AI_SETTINGS = {
|
||||
latencyWeight: 0.55,
|
||||
bandwidthWeight: 0.35,
|
||||
freshnessWeight: 0.1,
|
||||
downloadWeight: 0.5,
|
||||
uploadWeight: 0.5,
|
||||
combineHomeToJumphostWeight: 0.45,
|
||||
combineJumphostToExitWeight: 0.55,
|
||||
probabilityScale: 5,
|
||||
minProbabilityGainForSwitch: 10,
|
||||
noPingScore: 0.2,
|
||||
noSpeedScore: 0.15,
|
||||
staleScore: 0.35,
|
||||
freshnessExcellentSeconds: 120,
|
||||
freshnessGoodSeconds: 600,
|
||||
freshnessFairSeconds: 1800,
|
||||
distancePenaltyPerStep: 0.03,
|
||||
pinnedCommunityGateways: [],
|
||||
};
|
||||
|
||||
function asObject(v) {
|
||||
return v && typeof v === 'object' ? v : {};
|
||||
}
|
||||
|
||||
function toNumber(v) {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}
|
||||
|
||||
function clamp(n, min, max) {
|
||||
return Math.max(min, Math.min(max, n));
|
||||
}
|
||||
|
||||
function positiveNumber(v, fallback) {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) && n > 0 ? n : fallback;
|
||||
}
|
||||
|
||||
function nonNegativeNumber(v, fallback) {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) && n >= 0 ? n : fallback;
|
||||
}
|
||||
|
||||
function makeServerKey(server) {
|
||||
if (!server || typeof server !== 'object') return '';
|
||||
return String(server.id || server.dns || server.ip || '').trim();
|
||||
}
|
||||
|
||||
function resolveServerRef(ref, byRef) {
|
||||
const key = String(ref || '').trim();
|
||||
if (!key) return null;
|
||||
return byRef.get(key) || null;
|
||||
}
|
||||
|
||||
function pairKey(a, b) {
|
||||
return [String(a || ''), String(b || '')].sort().join(':');
|
||||
}
|
||||
|
||||
function pairProbability(items, scoreGetter) {
|
||||
if (!Array.isArray(items) || items.length === 0) return [];
|
||||
const values = items.map((it) => Number(scoreGetter(it) || 0));
|
||||
const max = Math.max(...values);
|
||||
const exps = values.map((v) => Math.exp(v - max));
|
||||
const sum = exps.reduce((acc, x) => acc + x, 0) || 1;
|
||||
return exps.map((x) => (x / sum) * 100);
|
||||
}
|
||||
|
||||
function latencyScore(pingMs, aiSettings) {
|
||||
if (typeof pingMs !== 'number') return aiSettings.noPingScore;
|
||||
const normalized = 1 / (1 + pingMs / 35);
|
||||
return clamp(normalized, 0, 1);
|
||||
}
|
||||
|
||||
function normalizeBandwidthValue(speedMbps, aiSettings) {
|
||||
if (typeof speedMbps !== 'number' || speedMbps <= 0) return aiSettings.noSpeedScore;
|
||||
// log-scale to avoid dominance by very high channels
|
||||
const normalized = Math.log10(1 + speedMbps) / Math.log10(1001);
|
||||
return clamp(normalized, 0, 1);
|
||||
}
|
||||
|
||||
function freshnessScore(cacheUpdatedAt, aiSettings) {
|
||||
if (typeof cacheUpdatedAt !== 'number') return aiSettings.staleScore;
|
||||
const ageMs = Math.max(0, Date.now() - cacheUpdatedAt);
|
||||
const excellentMs = aiSettings.freshnessExcellentSeconds * 1000;
|
||||
const goodMs = aiSettings.freshnessGoodSeconds * 1000;
|
||||
const fairMs = aiSettings.freshnessFairSeconds * 1000;
|
||||
if (ageMs <= excellentMs) return 1;
|
||||
if (ageMs <= goodMs) return 0.8;
|
||||
if (ageMs <= fairMs) return 0.6;
|
||||
return aiSettings.staleScore;
|
||||
}
|
||||
|
||||
function bandwidthScore({ speedDownloadMbps, speedUploadMbps, aiSettings }) {
|
||||
// DL/UL considered separately with configurable weights.
|
||||
const dl = normalizeBandwidthValue(speedDownloadMbps, aiSettings);
|
||||
const ul = normalizeBandwidthValue(speedUploadMbps, aiSettings);
|
||||
return clamp(dl * aiSettings.downloadWeight + ul * aiSettings.uploadWeight, 0, 1);
|
||||
}
|
||||
|
||||
function buildSegmentScore({
|
||||
pingMs,
|
||||
speedMbps,
|
||||
speedDownloadMbps,
|
||||
speedUploadMbps,
|
||||
cacheUpdatedAt,
|
||||
aiSettings,
|
||||
}) {
|
||||
const l = latencyScore(pingMs, aiSettings);
|
||||
const b = bandwidthScore({ speedDownloadMbps, speedUploadMbps, aiSettings });
|
||||
const f = freshnessScore(cacheUpdatedAt, aiSettings);
|
||||
const hasAnySpeed =
|
||||
typeof speedMbps === 'number' ||
|
||||
typeof speedDownloadMbps === 'number' ||
|
||||
typeof speedUploadMbps === 'number';
|
||||
const metricPresence = (typeof pingMs === 'number' ? 1 : 0) + (hasAnySpeed ? 1 : 0);
|
||||
const confidence = metricPresence === 2 ? 1 : metricPresence === 1 ? 0.65 : 0.35;
|
||||
const score =
|
||||
l * aiSettings.latencyWeight +
|
||||
b * aiSettings.bandwidthWeight +
|
||||
f * aiSettings.freshnessWeight;
|
||||
return { score: clamp(score, 0, 1), confidence };
|
||||
}
|
||||
|
||||
function compactServer(server) {
|
||||
return {
|
||||
id: server?.id || null,
|
||||
ip: server?.ip || null,
|
||||
dns: server?.dns || null,
|
||||
type: server?.type || null,
|
||||
country: server?.country || null,
|
||||
label: server?.dns || server?.ip || server?.id || 'unknown',
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeRef(value) {
|
||||
return String(value || '').trim();
|
||||
}
|
||||
|
||||
function buildServerRefSet(server) {
|
||||
return new Set(collectServerRefs(server).map(normalizeRef).filter(Boolean));
|
||||
}
|
||||
|
||||
function findPinnedCommunityGateway(pinnedCommunityGateways, jumphost, community) {
|
||||
const targetCommunity = normalizeRef(community);
|
||||
if (!targetCommunity || !Array.isArray(pinnedCommunityGateways)) return null;
|
||||
const jumphostRefs = buildServerRefSet(jumphost);
|
||||
for (const entry of pinnedCommunityGateways) {
|
||||
const entryCommunity = normalizeRef(entry?.community);
|
||||
if (!entryCommunity || entryCommunity !== targetCommunity) continue;
|
||||
const pinnedGateway = normalizeRef(entry?.gateway);
|
||||
if (!pinnedGateway) continue;
|
||||
const pinnedJumphost = normalizeRef(entry?.jumphost);
|
||||
if (!pinnedJumphost) return { community: entryCommunity, gateway: pinnedGateway, jumphost: null };
|
||||
if (jumphostRefs.has(pinnedJumphost)) {
|
||||
return { community: entryCommunity, gateway: pinnedGateway, jumphost: pinnedJumphost };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function loadCommunitiesIndex() {
|
||||
try {
|
||||
const raw = await readS3TextObject('bgp_data/communities.json').catch(() => null);
|
||||
if (!raw?.body) return new Map();
|
||||
const arr = JSON.parse(raw.body || '[]');
|
||||
const m = new Map();
|
||||
if (!Array.isArray(arr)) return m;
|
||||
for (const c of arr) {
|
||||
const value = String(c?.value || '').trim();
|
||||
if (!value) continue;
|
||||
m.set(value, {
|
||||
value,
|
||||
name: c?.name ? String(c.name) : '',
|
||||
description: c?.description ? String(c.description) : '',
|
||||
tags: Array.isArray(c?.tags) ? c.tags.map(String) : [],
|
||||
});
|
||||
}
|
||||
return m;
|
||||
} catch (_) {
|
||||
return new Map();
|
||||
}
|
||||
}
|
||||
|
||||
function parseServerIdFromFilterKey(key) {
|
||||
const m = String(key || '').match(/^filter-manager\/server-filters-(.+)\.json$/);
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
async function loadServerFiltersByServerId() {
|
||||
const out = new Map();
|
||||
try {
|
||||
const objects = await listS3Objects('filter-manager/server-filters-', { maxKeys: 500 });
|
||||
for (const obj of objects) {
|
||||
const key = obj?.key;
|
||||
const serverId = parseServerIdFromFilterKey(key);
|
||||
if (!serverId) continue;
|
||||
try {
|
||||
const raw = await readS3TextObject(key).catch(() => null);
|
||||
const parsed = raw?.body ? JSON.parse(raw.body || '[]') : [];
|
||||
const list = Array.isArray(parsed) ? parsed : [];
|
||||
out.set(serverId, list.filter((f) => f && f.community && f.gateway).map((f) => ({
|
||||
community: String(f.community),
|
||||
gateway: String(f.gateway),
|
||||
description: f.description ? String(f.description) : '',
|
||||
})));
|
||||
} catch (_) {
|
||||
out.set(serverId, []);
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
return out;
|
||||
}
|
||||
|
||||
async function loadNetworkMapCache() {
|
||||
try {
|
||||
const raw = await readS3TextObject(NETWORK_MAP_CACHE_KEY).catch(() => null);
|
||||
if (!raw?.body) return { pingMap: {}, speedMap: {}, updatedAt: null };
|
||||
const parsed = JSON.parse(raw.body || '{}');
|
||||
return {
|
||||
pingMap: asObject(parsed.pingMap),
|
||||
speedMap: asObject(parsed.speedMap),
|
||||
updatedAt: toNumber(parsed.updatedAt),
|
||||
};
|
||||
} catch (_) {
|
||||
return { pingMap: {}, speedMap: {}, updatedAt: null };
|
||||
}
|
||||
}
|
||||
|
||||
async function loadNetworkConfig() {
|
||||
try {
|
||||
const raw = await readS3TextObject(NETWORK_CONFIG_KEY).catch(() => null);
|
||||
if (!raw?.body) return {};
|
||||
const parsed = JSON.parse(raw.body || '{}');
|
||||
return asObject(parsed);
|
||||
} catch (_) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAiSettings() {
|
||||
try {
|
||||
const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => null);
|
||||
const parsed = raw?.body ? JSON.parse(raw.body || '{}') : {};
|
||||
const src = asObject(parsed?.aiRouteOptimizer);
|
||||
const latencyWeight = positiveNumber(src.latencyWeight, DEFAULT_AI_SETTINGS.latencyWeight);
|
||||
const bandwidthWeight = positiveNumber(src.bandwidthWeight, DEFAULT_AI_SETTINGS.bandwidthWeight);
|
||||
const freshnessWeight = positiveNumber(src.freshnessWeight, DEFAULT_AI_SETTINGS.freshnessWeight);
|
||||
const sum = latencyWeight + bandwidthWeight + freshnessWeight || 1;
|
||||
const downloadWeight = nonNegativeNumber(src.downloadWeight, DEFAULT_AI_SETTINGS.downloadWeight);
|
||||
const uploadWeight = nonNegativeNumber(src.uploadWeight, DEFAULT_AI_SETTINGS.uploadWeight);
|
||||
const sumDu = downloadWeight + uploadWeight;
|
||||
const hjW = positiveNumber(
|
||||
src.combineHomeToJumphostWeight,
|
||||
DEFAULT_AI_SETTINGS.combineHomeToJumphostWeight
|
||||
);
|
||||
const jeW = positiveNumber(
|
||||
src.combineJumphostToExitWeight,
|
||||
DEFAULT_AI_SETTINGS.combineJumphostToExitWeight
|
||||
);
|
||||
const sum2 = hjW + jeW || 1;
|
||||
|
||||
const pinnedCommunityGateways = Array.isArray(src.pinnedCommunityGateways)
|
||||
? src.pinnedCommunityGateways
|
||||
.map((x) => ({
|
||||
community: normalizeRef(x?.community),
|
||||
gateway: normalizeRef(x?.gateway),
|
||||
jumphost: normalizeRef(x?.jumphost),
|
||||
}))
|
||||
.filter((x) => x.community && x.gateway)
|
||||
: [];
|
||||
|
||||
return {
|
||||
latencyWeight: latencyWeight / sum,
|
||||
bandwidthWeight: bandwidthWeight / sum,
|
||||
freshnessWeight: freshnessWeight / sum,
|
||||
downloadWeight: sumDu > 0 ? downloadWeight / sumDu : DEFAULT_AI_SETTINGS.downloadWeight,
|
||||
uploadWeight: sumDu > 0 ? uploadWeight / sumDu : DEFAULT_AI_SETTINGS.uploadWeight,
|
||||
combineHomeToJumphostWeight: hjW / sum2,
|
||||
combineJumphostToExitWeight: jeW / sum2,
|
||||
probabilityScale: clamp(
|
||||
positiveNumber(src.probabilityScale, DEFAULT_AI_SETTINGS.probabilityScale),
|
||||
0.5,
|
||||
20
|
||||
),
|
||||
minProbabilityGainForSwitch: clamp(
|
||||
positiveNumber(
|
||||
src.minProbabilityGainForSwitch,
|
||||
DEFAULT_AI_SETTINGS.minProbabilityGainForSwitch
|
||||
),
|
||||
0,
|
||||
100
|
||||
),
|
||||
noPingScore: clamp(positiveNumber(src.noPingScore, DEFAULT_AI_SETTINGS.noPingScore), 0, 1),
|
||||
noSpeedScore: clamp(positiveNumber(src.noSpeedScore, DEFAULT_AI_SETTINGS.noSpeedScore), 0, 1),
|
||||
staleScore: clamp(positiveNumber(src.staleScore, DEFAULT_AI_SETTINGS.staleScore), 0, 1),
|
||||
freshnessExcellentSeconds: clamp(
|
||||
positiveNumber(src.freshnessExcellentSeconds, DEFAULT_AI_SETTINGS.freshnessExcellentSeconds),
|
||||
10,
|
||||
86400
|
||||
),
|
||||
freshnessGoodSeconds: clamp(
|
||||
positiveNumber(src.freshnessGoodSeconds, DEFAULT_AI_SETTINGS.freshnessGoodSeconds),
|
||||
10,
|
||||
86400
|
||||
),
|
||||
freshnessFairSeconds: clamp(
|
||||
positiveNumber(src.freshnessFairSeconds, DEFAULT_AI_SETTINGS.freshnessFairSeconds),
|
||||
10,
|
||||
86400
|
||||
),
|
||||
distancePenaltyPerStep: clamp(
|
||||
positiveNumber(src.distancePenaltyPerStep, DEFAULT_AI_SETTINGS.distancePenaltyPerStep),
|
||||
0,
|
||||
1
|
||||
),
|
||||
pinnedCommunityGateways,
|
||||
};
|
||||
} catch (_) {
|
||||
return { ...DEFAULT_AI_SETTINGS };
|
||||
}
|
||||
}
|
||||
|
||||
function buildInterfaceCandidates({ servers, tunnelInterfaces, pingMap, speedMap, cacheUpdatedAt, aiSettings }) {
|
||||
const byRef = new Map();
|
||||
servers.forEach((s) => {
|
||||
const refs = [s.id, s.ip, s.dns].filter(Boolean).map((v) => String(v));
|
||||
refs.forEach((ref) => byRef.set(ref, s));
|
||||
});
|
||||
|
||||
const homeToJh = [];
|
||||
const jhToExit = [];
|
||||
|
||||
for (const iface of tunnelInterfaces) {
|
||||
if (!iface || !iface.serverId || !iface.serverId2) continue;
|
||||
const s1 = resolveServerRef(iface.serverId, byRef);
|
||||
const s2 = resolveServerRef(iface.serverId2, byRef);
|
||||
if (!s1 || !s2) continue;
|
||||
|
||||
const t1 = String(s1.type || '').toLowerCase();
|
||||
const t2 = String(s2.type || '').toLowerCase();
|
||||
const k1 = makeServerKey(s1);
|
||||
const k2 = makeServerKey(s2);
|
||||
const pkey = pairKey(s1.ip, s2.ip);
|
||||
const skey = pairKey(k1, k2);
|
||||
const pingMs = toNumber(pingMap[pkey]);
|
||||
const speedEntry = asObject(speedMap[skey]);
|
||||
const downBps = toNumber(speedEntry.tcpDownloadBps);
|
||||
const upBps = toNumber(speedEntry.tcpUploadBps);
|
||||
const speedDownloadMbps = downBps != null ? downBps / 1e6 : null;
|
||||
const speedUploadMbps = upBps != null ? upBps / 1e6 : null;
|
||||
const speedMbps =
|
||||
speedDownloadMbps != null && speedUploadMbps != null
|
||||
? (speedDownloadMbps + speedUploadMbps) / 2
|
||||
: speedDownloadMbps != null
|
||||
? speedDownloadMbps
|
||||
: speedUploadMbps != null
|
||||
? speedUploadMbps
|
||||
: null;
|
||||
const scoring = buildSegmentScore({
|
||||
pingMs,
|
||||
speedMbps,
|
||||
speedDownloadMbps,
|
||||
speedUploadMbps,
|
||||
cacheUpdatedAt,
|
||||
aiSettings,
|
||||
});
|
||||
|
||||
const base = {
|
||||
interfaceName: iface.name || null,
|
||||
localIp: iface.localIp || null,
|
||||
remoteIp: iface.remoteIp || null,
|
||||
pingMs,
|
||||
speedMbps: speedMbps != null ? Number(speedMbps.toFixed(2)) : null,
|
||||
speedDownloadMbps: speedDownloadMbps != null ? Number(speedDownloadMbps.toFixed(2)) : null,
|
||||
speedUploadMbps: speedUploadMbps != null ? Number(speedUploadMbps.toFixed(2)) : null,
|
||||
score: Number(scoring.score.toFixed(4)),
|
||||
confidence: Number(scoring.confidence.toFixed(4)),
|
||||
};
|
||||
|
||||
if ((t1 === 'home' && t2 === 'jumphost') || (t1 === 'jumphost' && t2 === 'home')) {
|
||||
const home = t1 === 'home' ? s1 : s2;
|
||||
const jumphost = t1 === 'jumphost' ? s1 : s2;
|
||||
homeToJh.push({
|
||||
id: `${makeServerKey(home)}->${makeServerKey(jumphost)}::${base.interfaceName || 'iface'}`,
|
||||
homeKey: makeServerKey(home),
|
||||
jumphostKey: makeServerKey(jumphost),
|
||||
home: compactServer(home),
|
||||
jumphost: compactServer(jumphost),
|
||||
...base,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if ((t1 === 'jumphost' && t2 === 'exit') || (t1 === 'exit' && t2 === 'jumphost')) {
|
||||
const jumphost = t1 === 'jumphost' ? s1 : s2;
|
||||
const exit = t1 === 'exit' ? s1 : s2;
|
||||
const gatewayIpForJumphost = t1 === 'jumphost' ? (iface.remoteIp || null) : (iface.localIp || null);
|
||||
jhToExit.push({
|
||||
id: `${makeServerKey(jumphost)}->${makeServerKey(exit)}::${base.interfaceName || 'iface'}`,
|
||||
jumphostKey: makeServerKey(jumphost),
|
||||
exitKey: makeServerKey(exit),
|
||||
gatewayIpForJumphost,
|
||||
jumphost: compactServer(jumphost),
|
||||
exit: compactServer(exit),
|
||||
...base,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { homeToJh, jhToExit };
|
||||
}
|
||||
|
||||
function enrichProbabilities(candidates, scoreField = 'score', aiSettings = DEFAULT_AI_SETTINGS) {
|
||||
if (!Array.isArray(candidates) || candidates.length === 0) return [];
|
||||
const probs = pairProbability(candidates, (c) => c[scoreField] * aiSettings.probabilityScale);
|
||||
return candidates.map((c, i) => ({
|
||||
...c,
|
||||
probabilityOptimal: Number(probs[i].toFixed(2)),
|
||||
}));
|
||||
}
|
||||
|
||||
function groupBy(items, keyGetter) {
|
||||
const m = new Map();
|
||||
for (const item of items) {
|
||||
const key = keyGetter(item);
|
||||
if (!m.has(key)) m.set(key, []);
|
||||
m.get(key).push(item);
|
||||
}
|
||||
return m;
|
||||
}
|
||||
|
||||
function collectServerRefs(server) {
|
||||
return [server?.id, server?.ip, server?.dns]
|
||||
.filter(Boolean)
|
||||
.map((x) => String(x).trim());
|
||||
}
|
||||
|
||||
function buildServerIndex(servers) {
|
||||
const byRef = new Map();
|
||||
(Array.isArray(servers) ? servers : []).forEach((s) => {
|
||||
collectServerRefs(s).forEach((ref) => byRef.set(ref, s));
|
||||
});
|
||||
return byRef;
|
||||
}
|
||||
|
||||
function getServerByAnyRef(ref, byRef) {
|
||||
const r = String(ref || '').trim();
|
||||
if (!r) return null;
|
||||
return byRef.get(r) || null;
|
||||
}
|
||||
|
||||
function gatewayBelongsToJumphost(gw, jumphost, byRef) {
|
||||
if (!gw || !jumphost) return false;
|
||||
const gwServer = getServerByAnyRef(gw.serverId, byRef);
|
||||
if (!gwServer) return false;
|
||||
const jhRefs = new Set(collectServerRefs(jumphost));
|
||||
return collectServerRefs(gwServer).some((r) => jhRefs.has(r));
|
||||
}
|
||||
|
||||
function resolveParentGatewayRef(parentId, networkConfig) {
|
||||
const gateways = Array.isArray(networkConfig?.gateways) ? networkConfig.gateways : [];
|
||||
const interfaces = Array.isArray(networkConfig?.tunnelInterfaces)
|
||||
? networkConfig.tunnelInterfaces
|
||||
: [];
|
||||
const gw = gateways.find((x) => x && x.id === parentId);
|
||||
if (gw) return { type: 'gateway', value: gw };
|
||||
const iface = interfaces.find((x) => x && x.id === parentId);
|
||||
if (iface) return { type: 'interface', value: iface };
|
||||
return null;
|
||||
}
|
||||
|
||||
function getInterfaceGatewayIpForJumphost(iface, jumphost, byRef) {
|
||||
const s1 = getServerByAnyRef(iface?.serverId, byRef);
|
||||
const s2 = getServerByAnyRef(iface?.serverId2, byRef);
|
||||
if (!s1 || !s2 || !jumphost) return null;
|
||||
const jhRefs = new Set(collectServerRefs(jumphost));
|
||||
const s1isJh = collectServerRefs(s1).some((r) => jhRefs.has(r));
|
||||
const s2isJh = collectServerRefs(s2).some((r) => jhRefs.has(r));
|
||||
if (s1isJh) return iface.remoteIp || null;
|
||||
if (s2isJh) return iface.localIp || null;
|
||||
return null;
|
||||
}
|
||||
|
||||
function computeDistanceAdjustedScore(score, distance, aiSettings) {
|
||||
const d = Number.isFinite(Number(distance)) ? Number(distance) : 1;
|
||||
const penaltySteps = Math.max(0, d - 1);
|
||||
return clamp(Number(score || 0) - penaltySteps * aiSettings.distancePenaltyPerStep, 0, 1);
|
||||
}
|
||||
|
||||
function buildRecursiveGatewayOptionsForJumphost({
|
||||
jumphost,
|
||||
jumphostCandidates,
|
||||
networkConfig,
|
||||
servers,
|
||||
aiSettings,
|
||||
}) {
|
||||
const byRef = buildServerIndex(servers);
|
||||
const gateways = Array.isArray(networkConfig?.gateways) ? networkConfig.gateways : [];
|
||||
const recursive = gateways.filter(
|
||||
(gw) =>
|
||||
gw &&
|
||||
String(gw.type || '').toLowerCase() === 'recursive' &&
|
||||
gatewayBelongsToJumphost(gw, jumphost, byRef)
|
||||
);
|
||||
if (recursive.length === 0) return [];
|
||||
|
||||
const options = [];
|
||||
for (const rgw of recursive) {
|
||||
const parentRefs =
|
||||
Array.isArray(rgw.parentGateways) && rgw.parentGateways.length > 0
|
||||
? rgw.parentGateways
|
||||
: rgw.parentGatewayId
|
||||
? [{ id: rgw.parentGatewayId, distance: undefined }]
|
||||
: [];
|
||||
const mapped = [];
|
||||
|
||||
for (const pref of parentRefs) {
|
||||
const resolved = resolveParentGatewayRef(pref?.id, networkConfig);
|
||||
if (!resolved) continue;
|
||||
const distance = Number.isFinite(Number(pref?.distance)) ? Number(pref.distance) : 1;
|
||||
let physicalGatewayIp = null;
|
||||
if (resolved.type === 'gateway') {
|
||||
physicalGatewayIp = resolved.value?.ip || null;
|
||||
} else if (resolved.type === 'interface') {
|
||||
physicalGatewayIp = getInterfaceGatewayIpForJumphost(
|
||||
resolved.value,
|
||||
jumphost,
|
||||
byRef
|
||||
);
|
||||
}
|
||||
if (!physicalGatewayIp) continue;
|
||||
|
||||
const candidate = (Array.isArray(jumphostCandidates) ? jumphostCandidates : []).find(
|
||||
(c) => String(c.gatewayIpForJumphost || '') === String(physicalGatewayIp)
|
||||
);
|
||||
if (!candidate) continue;
|
||||
|
||||
mapped.push({
|
||||
distance,
|
||||
physicalGatewayIp,
|
||||
candidate,
|
||||
scoreWithDistance: computeDistanceAdjustedScore(candidate.score, distance, aiSettings),
|
||||
});
|
||||
}
|
||||
|
||||
if (mapped.length === 0) continue;
|
||||
mapped.sort((a, b) => b.scoreWithDistance - a.scoreWithDistance);
|
||||
const best = mapped[0];
|
||||
|
||||
options.push({
|
||||
recursiveGateway: rgw.ip || null,
|
||||
recursiveGatewayId: rgw.id || null,
|
||||
recursiveDescription: rgw.description || '',
|
||||
tunnelGatewayIp: best.physicalGatewayIp,
|
||||
interfaceName: best.candidate.interfaceName || null,
|
||||
distance: best.distance,
|
||||
exit: best.candidate.exit,
|
||||
baseScore: best.candidate.score,
|
||||
score: Number(best.scoreWithDistance.toFixed(4)),
|
||||
pingMs: best.candidate.pingMs,
|
||||
speedMbps: best.candidate.speedMbps,
|
||||
sourceCandidateId: best.candidate.id,
|
||||
});
|
||||
}
|
||||
|
||||
return options.sort((a, b) => b.score - a.score);
|
||||
}
|
||||
|
||||
function buildCommunityOptimization({
|
||||
exitsByJh,
|
||||
serverFiltersByServerId,
|
||||
communitiesIndex,
|
||||
networkConfig,
|
||||
servers,
|
||||
aiSettings,
|
||||
}) {
|
||||
const jumphostByCommunity = [];
|
||||
|
||||
for (const [jumphostKey, rawCandidates] of exitsByJh.entries()) {
|
||||
const candidates = enrichProbabilities([...rawCandidates].sort((a, b) => b.score - a.score), 'score', aiSettings);
|
||||
const jumphost = candidates[0]?.jumphost || null;
|
||||
const recursiveOptionsRaw = buildRecursiveGatewayOptionsForJumphost({
|
||||
jumphost,
|
||||
jumphostCandidates: candidates,
|
||||
networkConfig,
|
||||
servers,
|
||||
aiSettings,
|
||||
});
|
||||
const recursiveOptions = enrichProbabilities(recursiveOptionsRaw, 'score', aiSettings);
|
||||
const gatewayBestMap = new Map();
|
||||
for (const c of candidates) {
|
||||
const gw = String(c.gatewayIpForJumphost || '').trim();
|
||||
if (!gw) continue;
|
||||
if (!gatewayBestMap.has(gw) || gatewayBestMap.get(gw).score < c.score) {
|
||||
gatewayBestMap.set(gw, c);
|
||||
}
|
||||
}
|
||||
const recursiveByIp = new Map();
|
||||
const recursiveById = new Map();
|
||||
recursiveOptions.forEach((o) => {
|
||||
if (o.recursiveGateway) recursiveByIp.set(String(o.recursiveGateway), o);
|
||||
if (o.recursiveGatewayId) recursiveById.set(String(o.recursiveGatewayId), o);
|
||||
});
|
||||
|
||||
const filters = serverFiltersByServerId.get(jumphostKey) || [];
|
||||
if (filters.length === 0) {
|
||||
jumphostByCommunity.push({
|
||||
jumphost,
|
||||
candidates,
|
||||
recursiveGatewayOptions: recursiveOptions,
|
||||
recommendations: [],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const recommendations = filters.map((f) => {
|
||||
const currentGateway = String(f.gateway || '').trim();
|
||||
const pinned = findPinnedCommunityGateway(
|
||||
aiSettings.pinnedCommunityGateways,
|
||||
jumphost,
|
||||
f.community
|
||||
);
|
||||
const currentCandidate =
|
||||
recursiveByIp.get(currentGateway) ||
|
||||
recursiveById.get(currentGateway) ||
|
||||
gatewayBestMap.get(currentGateway) ||
|
||||
null;
|
||||
const pinnedCandidate = pinned
|
||||
? recursiveByIp.get(pinned.gateway) ||
|
||||
recursiveById.get(pinned.gateway) ||
|
||||
gatewayBestMap.get(pinned.gateway) ||
|
||||
null
|
||||
: null;
|
||||
const recommendedCandidate = pinned
|
||||
? pinnedCandidate
|
||||
: (recursiveOptions.length > 0 ? recursiveOptions[0] : null) || candidates[0] || null;
|
||||
const communityInfo = communitiesIndex.get(String(f.community)) || null;
|
||||
const recommendedGatewayRef = normalizeRef(
|
||||
recommendedCandidate?.recursiveGateway || recommendedCandidate?.gatewayIpForJumphost
|
||||
);
|
||||
const currentGatewayRef = normalizeRef(
|
||||
currentCandidate?.recursiveGateway || currentCandidate?.gatewayIpForJumphost || currentGateway
|
||||
);
|
||||
const shouldSwitch = pinned
|
||||
? Boolean(recommendedGatewayRef && recommendedGatewayRef !== currentGatewayRef)
|
||||
: Boolean(
|
||||
recommendedCandidate &&
|
||||
currentCandidate &&
|
||||
recommendedGatewayRef !== currentGatewayRef &&
|
||||
(recommendedCandidate.probabilityOptimal - currentCandidate.probabilityOptimal) >=
|
||||
aiSettings.minProbabilityGainForSwitch
|
||||
);
|
||||
|
||||
return {
|
||||
community: String(f.community),
|
||||
communityInfo: communityInfo || {
|
||||
value: String(f.community),
|
||||
name: '',
|
||||
description: f.description || '',
|
||||
tags: [],
|
||||
},
|
||||
currentGateway: currentGateway || null,
|
||||
current: currentCandidate ? {
|
||||
gateway: currentCandidate.recursiveGateway || currentCandidate.gatewayIpForJumphost || null,
|
||||
tunnelGateway: currentCandidate.tunnelGatewayIp || currentCandidate.gatewayIpForJumphost || null,
|
||||
interfaceName: currentCandidate.interfaceName || null,
|
||||
distance: currentCandidate.distance != null ? currentCandidate.distance : null,
|
||||
exit: currentCandidate.exit,
|
||||
score: currentCandidate.score,
|
||||
probabilityOptimal: currentCandidate.probabilityOptimal,
|
||||
pingMs: currentCandidate.pingMs,
|
||||
speedMbps: currentCandidate.speedMbps,
|
||||
speedDownloadMbps: currentCandidate.speedDownloadMbps,
|
||||
speedUploadMbps: currentCandidate.speedUploadMbps,
|
||||
} : null,
|
||||
recommended: recommendedCandidate ? {
|
||||
gateway: recommendedCandidate.recursiveGateway || recommendedCandidate.gatewayIpForJumphost || null,
|
||||
tunnelGateway: recommendedCandidate.tunnelGatewayIp || recommendedCandidate.gatewayIpForJumphost || null,
|
||||
interfaceName: recommendedCandidate.interfaceName || null,
|
||||
distance: recommendedCandidate.distance != null ? recommendedCandidate.distance : null,
|
||||
exit: recommendedCandidate.exit,
|
||||
score: recommendedCandidate.score,
|
||||
probabilityOptimal: recommendedCandidate.probabilityOptimal,
|
||||
pingMs: recommendedCandidate.pingMs,
|
||||
speedMbps: recommendedCandidate.speedMbps,
|
||||
speedDownloadMbps: recommendedCandidate.speedDownloadMbps,
|
||||
speedUploadMbps: recommendedCandidate.speedUploadMbps,
|
||||
} : null,
|
||||
pinnedGateway: pinned?.gateway || null,
|
||||
pinnedBySettings: Boolean(pinned),
|
||||
pinnedGatewayResolved: Boolean(pinned && recommendedCandidate),
|
||||
shouldSwitch,
|
||||
};
|
||||
});
|
||||
|
||||
jumphostByCommunity.push({
|
||||
jumphost,
|
||||
candidates,
|
||||
recursiveGatewayOptions: recursiveOptions,
|
||||
recommendations,
|
||||
});
|
||||
}
|
||||
|
||||
return jumphostByCommunity;
|
||||
}
|
||||
|
||||
async function getRouteOptimizer(req, res) {
|
||||
try {
|
||||
const [servers, networkConfig, networkMapCache, communitiesIndex, serverFiltersByServerId, aiSettings] = await Promise.all([
|
||||
readServersFromS3(),
|
||||
loadNetworkConfig(),
|
||||
loadNetworkMapCache(),
|
||||
loadCommunitiesIndex(),
|
||||
loadServerFiltersByServerId(),
|
||||
loadAiSettings(),
|
||||
]);
|
||||
|
||||
const tunnelInterfaces = Array.isArray(networkConfig.tunnelInterfaces)
|
||||
? networkConfig.tunnelInterfaces
|
||||
: [];
|
||||
|
||||
const { homeToJh, jhToExit } = buildInterfaceCandidates({
|
||||
servers: Array.isArray(servers) ? servers : [],
|
||||
tunnelInterfaces,
|
||||
pingMap: networkMapCache.pingMap,
|
||||
speedMap: networkMapCache.speedMap,
|
||||
cacheUpdatedAt: networkMapCache.updatedAt,
|
||||
aiSettings,
|
||||
});
|
||||
|
||||
const homeGroups = groupBy(homeToJh, (x) => x.homeKey);
|
||||
const exitsByJh = groupBy(jhToExit, (x) => x.jumphostKey);
|
||||
|
||||
const homes = [];
|
||||
|
||||
for (const [homeKey, hjListRaw] of homeGroups.entries()) {
|
||||
const hjList = enrichProbabilities(hjListRaw.sort((a, b) => b.score - a.score), 'score', aiSettings);
|
||||
const bestHomeToJumphost = hjList[0] || null;
|
||||
|
||||
const fullRoutesRaw = [];
|
||||
for (const hj of hjList) {
|
||||
const exitCandidates = exitsByJh.get(hj.jumphostKey) || [];
|
||||
for (const jhExit of exitCandidates) {
|
||||
const combinedScore = clamp(
|
||||
hj.score * aiSettings.combineHomeToJumphostWeight +
|
||||
jhExit.score * aiSettings.combineJumphostToExitWeight,
|
||||
0,
|
||||
1
|
||||
);
|
||||
fullRoutesRaw.push({
|
||||
id: `${hj.id}>>>${jhExit.id}`,
|
||||
home: hj.home,
|
||||
jumphost: hj.jumphost,
|
||||
exit: jhExit.exit,
|
||||
homeToJumphost: {
|
||||
interfaceName: hj.interfaceName,
|
||||
pingMs: hj.pingMs,
|
||||
speedMbps: hj.speedMbps,
|
||||
speedDownloadMbps: hj.speedDownloadMbps,
|
||||
speedUploadMbps: hj.speedUploadMbps,
|
||||
score: hj.score,
|
||||
confidence: hj.confidence,
|
||||
},
|
||||
jumphostToExit: {
|
||||
interfaceName: jhExit.interfaceName,
|
||||
pingMs: jhExit.pingMs,
|
||||
speedMbps: jhExit.speedMbps,
|
||||
speedDownloadMbps: jhExit.speedDownloadMbps,
|
||||
speedUploadMbps: jhExit.speedUploadMbps,
|
||||
score: jhExit.score,
|
||||
confidence: jhExit.confidence,
|
||||
},
|
||||
score: Number(combinedScore.toFixed(4)),
|
||||
confidence: Number(((hj.confidence + jhExit.confidence) / 2).toFixed(4)),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const fullRoutes = enrichProbabilities(fullRoutesRaw.sort((a, b) => b.score - a.score), 'score', aiSettings);
|
||||
const bestFullRoute = fullRoutes[0] || null;
|
||||
|
||||
homes.push({
|
||||
home: bestHomeToJumphost?.home || null,
|
||||
bestHomeToJumphost,
|
||||
bestFullRoute,
|
||||
homeToJumphostCandidates: hjList,
|
||||
fullRouteCandidates: fullRoutes,
|
||||
});
|
||||
}
|
||||
|
||||
// Also expose jumphost->exit view for transparency
|
||||
const jumphostSummaries = [];
|
||||
for (const [jumphostKey, exitListRaw] of exitsByJh.entries()) {
|
||||
const candidates = enrichProbabilities(exitListRaw.sort((a, b) => b.score - a.score), 'score', aiSettings);
|
||||
jumphostSummaries.push({
|
||||
jumphost: candidates[0]?.jumphost || null,
|
||||
bestCandidate: candidates[0] || null,
|
||||
candidates,
|
||||
});
|
||||
}
|
||||
|
||||
const communityOptimization = buildCommunityOptimization({
|
||||
exitsByJh,
|
||||
serverFiltersByServerId,
|
||||
communitiesIndex,
|
||||
networkConfig,
|
||||
servers,
|
||||
aiSettings,
|
||||
});
|
||||
|
||||
homes.sort((a, b) => {
|
||||
const pa = a.bestFullRoute?.probabilityOptimal ?? 0;
|
||||
const pb = b.bestFullRoute?.probabilityOptimal ?? 0;
|
||||
return pb - pa;
|
||||
});
|
||||
|
||||
return res.json({
|
||||
ok: true,
|
||||
generatedAt: Date.now(),
|
||||
metricsUpdatedAt: networkMapCache.updatedAt || null,
|
||||
aiSettingsUsed: aiSettings,
|
||||
homes,
|
||||
jumphostToExitByJumphost: jumphostSummaries,
|
||||
communityOptimizationByJumphost: communityOptimization,
|
||||
totals: {
|
||||
homes: homes.length,
|
||||
homeToJumphostCandidates: homeToJh.length,
|
||||
jumphostToExitCandidates: jhToExit.length,
|
||||
jumphostsWithCommunityFilters: communityOptimization.filter((x) => (x.recommendations || []).length > 0).length,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[route-optimizer] getRouteOptimizer:', error);
|
||||
return sendError(
|
||||
res,
|
||||
500,
|
||||
error?.message || 'Ошибка расчёта оптимального маршрута',
|
||||
'E_ROUTE_OPTIMIZER'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getRouteOptimizer,
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
@@ -10,6 +10,7 @@ const { sendError, sendOk, checkIfNoneMatch } = require('../middleware/errorHand
|
||||
const { GetObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
|
||||
const { streamToString } = require('../services/s3Service');
|
||||
const { getS3TextWithHeaders, getS3JsonWithHeaders } = require('../utils/s3Helpers');
|
||||
const { isValidServerId } = require('../lib/validators');
|
||||
|
||||
const S3_KEY = 'servers.json';
|
||||
|
||||
@@ -143,9 +144,19 @@ const serverConfigsListRoutes = {
|
||||
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 (конкретная конфигурация)
|
||||
async function getServerConfig(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
await getS3TextWithHeaders(
|
||||
`filter-manager/config-${serverId}.txt`,
|
||||
req,
|
||||
@@ -159,7 +170,8 @@ async function getServerConfig(req, res) {
|
||||
|
||||
// POST /api/server-configs/:serverId (сохранить конфигурацию)
|
||||
async function postServerConfig(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
const { config } = req.body;
|
||||
|
||||
if (!config) {
|
||||
@@ -177,7 +189,8 @@ async function postServerConfig(req, res) {
|
||||
|
||||
// DELETE /api/server-configs/:serverId (удалить только конфигурацию)
|
||||
async function deleteServerConfig(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
|
||||
try {
|
||||
await deleteS3Object(`filter-manager/config-${serverId}.txt`);
|
||||
@@ -191,7 +204,8 @@ async function deleteServerConfig(req, res) {
|
||||
|
||||
// DELETE /api/server-configs/:serverId/complete (удалить конфигурацию и фильтры)
|
||||
async function deleteServerComplete(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
|
||||
try {
|
||||
await Promise.allSettled([
|
||||
@@ -208,7 +222,8 @@ async function deleteServerComplete(req, res) {
|
||||
|
||||
// GET /api/server-filters/:serverId
|
||||
async function getServerFilters(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
await getS3JsonWithHeaders(
|
||||
`filter-manager/server-filters-${serverId}.json`,
|
||||
req,
|
||||
@@ -219,7 +234,8 @@ async function getServerFilters(req, res) {
|
||||
|
||||
// POST /api/server-filters/:serverId
|
||||
async function postServerFilters(req, res) {
|
||||
const { serverId } = req.params;
|
||||
const serverId = validateServerIdParam(req, res);
|
||||
if (serverId === null) return;
|
||||
const { filters } = req.body;
|
||||
|
||||
if (!Array.isArray(filters)) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Кастомные роуты для серверов с поддержкой зашифрованных MikroTik учётных данных
|
||||
* Для jumphost: mikrotikHost, mikrotikPort, mikrotikUser, encryptedMikrotikPassword
|
||||
* Для jumphost и home (входной роутер): mikrotikHost, mikrotikPort, mikrotikUser, encryptedMikrotikPassword
|
||||
*/
|
||||
|
||||
const { GetObjectCommand, PutObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
|
||||
@@ -80,10 +80,11 @@ async function getServers(req, res) {
|
||||
const servers = await readServersFromS3();
|
||||
const sanitized = servers.map(s => {
|
||||
const out = { ...s };
|
||||
if (s.type === 'jumphost' && out.encryptedMikrotikPassword) {
|
||||
const hasMikrotikApi = s.type === 'jumphost' || s.type === 'home';
|
||||
if (hasMikrotikApi && out.encryptedMikrotikPassword) {
|
||||
out.hasMikrotikPassword = true;
|
||||
delete out.encryptedMikrotikPassword;
|
||||
} else if (s.type === 'jumphost') {
|
||||
} else if (hasMikrotikApi) {
|
||||
out.hasMikrotikPassword = false;
|
||||
}
|
||||
return out;
|
||||
@@ -121,7 +122,7 @@ async function postServers(req, res) {
|
||||
const toSave = items.map((srv) => {
|
||||
const current = findCurrent(srv);
|
||||
|
||||
if (srv.type === 'jumphost') {
|
||||
if (srv.type === 'jumphost' || srv.type === 'home') {
|
||||
const out = { ...srv };
|
||||
if (srv.mikrotikPassword !== undefined && srv.mikrotikPassword !== null && String(srv.mikrotikPassword).trim() !== '') {
|
||||
try {
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
+91
-7
@@ -29,7 +29,16 @@ 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 alertsRoutes = require('./routes/alertsRoutes');
|
||||
const routeOptimizerRoutes = require('./routes/routeOptimizerRoutes');
|
||||
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 { createEvobgpProxy, normalizeEvobgpBaseUrl } = require('./routes/evobgpProxyRoutes');
|
||||
|
||||
const app = express();
|
||||
const port = Number(process.env.PORT) || 3001;
|
||||
@@ -148,6 +157,23 @@ app.get('/api/version', (req, res) => {
|
||||
});
|
||||
});
|
||||
|
||||
// === EvoBGP reverse proxy (токен и URL только на сервере; без CORS в браузере) ===
|
||||
function evobgpProxyHealth(req, res) {
|
||||
const base = normalizeEvobgpBaseUrl(process.env.EVOBGP_API_URL || '');
|
||||
const hasToken = Boolean(String(process.env.EVOBGP_API_TOKEN || '').trim());
|
||||
res.json({
|
||||
ok: true,
|
||||
proxy: true,
|
||||
evobgpConfigured: Boolean(base && hasToken),
|
||||
});
|
||||
}
|
||||
// Точное совпадение до app.use: GET /api/evobgp и GET /evobgp — проверка, что запрос доходит до Node
|
||||
app.get('/api/evobgp', evobgpProxyHealth);
|
||||
app.get('/evobgp', evobgpProxyHealth);
|
||||
app.use('/api/evobgp', createEvobgpProxy({ logger }));
|
||||
// Если nginx делает proxy_pass http://upstream/ и срезает префикс /api, до приложения приходит /evobgp/…
|
||||
app.use('/evobgp', createEvobgpProxy({ logger }));
|
||||
|
||||
// === Cache TTL ===
|
||||
const DEFAULT_CACHE_TTL = Math.max(0, Math.min(300, Number(process.env.CACHE_TTL_SECONDS) || 30));
|
||||
app.use((req, res, next) => {
|
||||
@@ -439,6 +465,8 @@ app.post('/api/update-bgp/background', bgpUpdateLimiter, miscRoutes.updateBgpBac
|
||||
app.get('/api/ws/url', miscRoutes.getWsUrl);
|
||||
app.get('/api/ui-settings', miscRoutes.getUiSettings);
|
||||
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);
|
||||
@@ -456,8 +484,29 @@ app.post('/api/mikrotik/test-connection', mikrotikConfigRoutes.testMikrotikConne
|
||||
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.get('/api/mikrotik/ospf-interface-templates', mikrotikConfigRoutes.getOspfInterfaceTemplates);
|
||||
app.post('/api/mikrotik/ospf-interface-templates/apply', writeLimiter, mikrotikConfigRoutes.applyOspfInterfaceTemplates);
|
||||
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);
|
||||
|
||||
// === ALERTS (агрегация проблем: серверы, ресурсы роутеров) ===
|
||||
app.get('/api/alerts', alertsRoutes.getAlerts);
|
||||
|
||||
// === MIKROTIK BACKUPS (S3) ===
|
||||
app.post('/api/mikrotik/backups', writeLimiter, mikrotikBackupRoutes.createBackup);
|
||||
@@ -466,6 +515,28 @@ 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);
|
||||
|
||||
// === LOCAL AI ROUTE OPTIMIZER (rule-based) ===
|
||||
app.get('/api/route-optimizer', routeOptimizerRoutes.getRouteOptimizer);
|
||||
|
||||
// === 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 ===
|
||||
app.post('/api/mikrotik/validate', async (req, res) => {
|
||||
const { config } = req.body;
|
||||
@@ -493,12 +564,25 @@ app.use(errorHandler);
|
||||
|
||||
app.listen(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');
|
||||
}
|
||||
});
|
||||
|
||||
// Запускаем планировщик автоматического бэкапа MikroTik (если включен через ENV)
|
||||
try {
|
||||
initMikrotikBackupScheduler(logger);
|
||||
} catch (e) {
|
||||
logger.error({ component: 'mikrotik-backup', err: e && e.message }, 'Failed to start backup scheduler');
|
||||
}
|
||||
|
||||
|
||||
@@ -160,21 +160,19 @@ function initMikrotikBackupScheduler(logger) {
|
||||
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: intervalMs / 60000,
|
||||
intervalMinutes,
|
||||
nextRunInMinutes: intervalMinutes,
|
||||
servers: process.env.MIKROTIK_BACKUP_SERVERS || 'all jumphost',
|
||||
},
|
||||
'Starting automatic MikroTik backup scheduler',
|
||||
'Automatic MikroTik backup scheduler started (no backup on startup, first run in %d min)',
|
||||
intervalMinutes,
|
||||
);
|
||||
|
||||
// Первый запуск с небольшой задержкой, чтобы сервер успел подняться
|
||||
setTimeout(() => {
|
||||
runBackupOnce(log);
|
||||
}, 30_000);
|
||||
|
||||
// Периодический запуск
|
||||
// Только по расписанию — без бэкапа при перезапуске контейнера
|
||||
setInterval(() => {
|
||||
runBackupOnce(log);
|
||||
}, intervalMs);
|
||||
|
||||
@@ -0,0 +1,530 @@
|
||||
/**
|
||||
* Планировщик пингов и замеров скорости для карты сети.
|
||||
* Периодически вызывает пинг и 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 NEXT_RUN_AT_KEY = 'networkMapSchedulerNextRunAt';
|
||||
|
||||
const DEFAULT_INTERVAL_MINUTES = 5;
|
||||
const DEFAULT_LOG_MAX_LINES = 500;
|
||||
const RESTART_RECOVERY_DELAY_MS = 10 * 60 * 1000;
|
||||
|
||||
/** Кольцевой буфер логов */
|
||||
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 schedulerStartTimeout = null;
|
||||
/** Время последнего запуска по расписанию (для расчёта следующего) */
|
||||
let lastScheduledRunAt = null;
|
||||
/** Реально запланированное время следующего запуска */
|
||||
let nextScheduledRunAt = null;
|
||||
/** Интервал активного таймера (мс) */
|
||||
let activeIntervalMs = null;
|
||||
|
||||
async function persistNextRunAt(nextRunAt) {
|
||||
try {
|
||||
const ui = await loadUiSettings();
|
||||
ui[NEXT_RUN_AT_KEY] = typeof nextRunAt === 'number' ? Math.round(nextRunAt) : null;
|
||||
await writeS3JsonObject(UI_SETTINGS_KEY, ui);
|
||||
} catch (e) {
|
||||
logBuffer.push(`Не удалось сохранить nextRunAt: ${e?.message || e}`);
|
||||
}
|
||||
}
|
||||
|
||||
function getSettingsFromUiSettings(uiSettings) {
|
||||
const persistedNextRunAtRaw = uiSettings?.[NEXT_RUN_AT_KEY];
|
||||
const persistedNextRunAt = Number(persistedNextRunAtRaw);
|
||||
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)),
|
||||
persistedNextRunAt: Number.isFinite(persistedNextRunAt) ? persistedNextRunAt : null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Запустить планировщик (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(source = 'interval') {
|
||||
if (source === 'interval') {
|
||||
lastScheduledRunAt = Date.now();
|
||||
if (activeIntervalMs) {
|
||||
nextScheduledRunAt = lastScheduledRunAt + activeIntervalMs;
|
||||
persistNextRunAt(nextScheduledRunAt);
|
||||
}
|
||||
}
|
||||
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,
|
||||
trigger: source === 'startup-delay' ? 'startup-delay' : 'scheduled',
|
||||
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) {
|
||||
activeIntervalMs = null;
|
||||
nextScheduledRunAt = null;
|
||||
persistNextRunAt(null);
|
||||
log.info({ component: 'network-map-scheduler' }, 'Scheduler disabled in settings');
|
||||
return;
|
||||
}
|
||||
logBuffer.setMaxLines(settings.logMaxLines);
|
||||
const intervalMs = settings.intervalMinutes * 60 * 1000;
|
||||
activeIntervalMs = intervalMs;
|
||||
const now = Date.now();
|
||||
const persisted = settings.persistedNextRunAt;
|
||||
let firstDelayMs = intervalMs;
|
||||
if (typeof persisted === 'number' && Number.isFinite(persisted)) {
|
||||
if (persisted > now) {
|
||||
// Плановая дата ещё не наступила — сохраняем исходный план.
|
||||
firstDelayMs = Math.max(1000, persisted - now);
|
||||
} else {
|
||||
// Плановая дата уже прошла (контейнер был перезапущен/простаивал) —
|
||||
// первый запуск через 10 минут от старта контейнера.
|
||||
firstDelayMs = RESTART_RECOVERY_DELAY_MS;
|
||||
}
|
||||
}
|
||||
nextScheduledRunAt = now + firstDelayMs;
|
||||
persistNextRunAt(nextScheduledRunAt);
|
||||
log.info(
|
||||
{
|
||||
component: 'network-map-scheduler',
|
||||
intervalMinutes: settings.intervalMinutes,
|
||||
firstDelayMs,
|
||||
recoveryDelayMs: RESTART_RECOVERY_DELAY_MS,
|
||||
},
|
||||
'Network map scheduler started (first run in %d sec, then every %d min)',
|
||||
Math.round(firstDelayMs / 1000),
|
||||
settings.intervalMinutes
|
||||
);
|
||||
schedulerStartTimeout = setTimeout(() => {
|
||||
tick('interval');
|
||||
schedulerTimer = setInterval(() => tick('interval'), intervalMs);
|
||||
}, firstDelayMs);
|
||||
}
|
||||
|
||||
schedule();
|
||||
}
|
||||
|
||||
function stopNetworkMapScheduler() {
|
||||
if (schedulerStartTimeout) {
|
||||
clearTimeout(schedulerStartTimeout);
|
||||
schedulerStartTimeout = null;
|
||||
}
|
||||
if (schedulerTimer) {
|
||||
clearInterval(schedulerTimer);
|
||||
schedulerTimer = null;
|
||||
}
|
||||
activeIntervalMs = null;
|
||||
nextScheduledRunAt = null;
|
||||
persistNextRunAt(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;
|
||||
if (typeof nextScheduledRunAt === 'number' && Number.isFinite(nextScheduledRunAt)) {
|
||||
return nextScheduledRunAt;
|
||||
}
|
||||
if (typeof lastScheduledRunAt === 'number' && Number.isFinite(lastScheduledRunAt)) {
|
||||
const intervalMs = activeIntervalMs || (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
|
||||
return lastScheduledRunAt + intervalMs;
|
||||
}
|
||||
if (typeof settings?.persistedNextRunAt === 'number' && Number.isFinite(settings.persistedNextRunAt)) {
|
||||
const now = Date.now();
|
||||
if (settings.persistedNextRunAt > now) return settings.persistedNextRunAt;
|
||||
return now + RESTART_RECOVERY_DELAY_MS;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
@@ -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,
|
||||
};
|
||||
@@ -120,9 +120,7 @@ function decrypt(encryptedText) {
|
||||
}
|
||||
console.error('Decryption error details:', {
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
encryptedTextLength: encryptedText.length,
|
||||
encryptedTextPreview: encryptedText.substring(0, 100)
|
||||
encryptedTextLength: encryptedText.length
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
# S3 Lists Manager - Frontend
|
||||
# RouterOS Manager - Frontend
|
||||
|
||||
Современный веб-интерфейс для управления списками доменов и AS с использованием Tabler UI.
|
||||
|
||||
@@ -172,4 +172,4 @@ import { IconPlus, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
|
||||
---
|
||||
|
||||
**S3 Lists Manager** - Современный интерфейс для управления списками с использованием Tabler UI.
|
||||
**RouterOS Manager** - Современный интерфейс для управления списками с использованием Tabler UI.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 🎨 UX/UI Улучшения - Документация
|
||||
|
||||
Этот документ описывает все внедренные UX/UI улучшения в проект S3 Lists Manager.
|
||||
Этот документ описывает все внедренные UX/UI улучшения в проект RouterOS Manager.
|
||||
|
||||
## 📋 Содержание
|
||||
|
||||
|
||||
@@ -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` и общих обработчиков.
|
||||
@@ -15,7 +15,7 @@ export default defineConfig([
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
globals: { ...globals.browser, process: 'readonly' },
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
@@ -23,7 +23,8 @@ export default defineConfig([
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
|
||||
'no-empty': ['error', { allowEmptyCatch: true }],
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="S3 Lists Manager - Управление списками доменов и AS" />
|
||||
<meta name="description" content="RouterOS Manager - Управление списками доменов и AS" />
|
||||
<meta name="theme-color" content="#206bc4" />
|
||||
|
||||
<!-- Inter Font -->
|
||||
@@ -12,7 +12,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<title>S3 Lists Manager</title>
|
||||
<title>RouterOS Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+773
-1
@@ -17,9 +17,12 @@
|
||||
"@tanstack/react-virtual": "^3.10.8",
|
||||
"@xyflow/react": "^12.3.4",
|
||||
"axios": "^1.10.0",
|
||||
"diff": "^8.0.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^6.30.1"
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"recharts": "^3.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.29.0",
|
||||
@@ -346,6 +349,414 @@
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
|
||||
"integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"aix"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
|
||||
"integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
|
||||
"integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
|
||||
"integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
|
||||
"integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
|
||||
"integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
|
||||
"integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
|
||||
"integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
|
||||
"integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
|
||||
"integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"sunos"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
|
||||
"integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.25.5",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
|
||||
"integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.25.5",
|
||||
"cpu": [
|
||||
@@ -601,6 +1012,42 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
|
||||
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^11.0.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "11.1.4",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
|
||||
"integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
|
||||
@@ -628,6 +1075,18 @@
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@standard-schema/spec": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
|
||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tabler/core": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@tabler/core/-/core-1.3.2.tgz",
|
||||
@@ -780,6 +1239,12 @@
|
||||
"@babel/types": "^7.20.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
|
||||
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
@@ -795,6 +1260,12 @@
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
@@ -804,12 +1275,48 @@
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-selection": {
|
||||
"version": "3.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
|
||||
"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
|
||||
"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-transition": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
|
||||
@@ -855,6 +1362,12 @@
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "4.6.0",
|
||||
"dev": true,
|
||||
@@ -1076,6 +1589,15 @@
|
||||
"integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"dev": true,
|
||||
@@ -1130,6 +1652,18 @@
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
@@ -1170,6 +1704,15 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
@@ -1182,6 +1725,31 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
@@ -1191,6 +1759,42 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
@@ -1251,6 +1855,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"dev": true,
|
||||
@@ -1263,6 +1873,15 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/diff": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
|
||||
"integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"license": "MIT",
|
||||
@@ -1317,6 +1936,16 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.44.0",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
|
||||
"integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.5",
|
||||
"dev": true,
|
||||
@@ -1533,6 +2162,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
|
||||
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"dev": true,
|
||||
@@ -1780,6 +2415,16 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"dev": true,
|
||||
@@ -1803,6 +2448,15 @@
|
||||
"node": ">=0.8.19"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"dev": true,
|
||||
@@ -2145,6 +2799,45 @@
|
||||
"react": "^19.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "19.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
|
||||
"integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"dev": true,
|
||||
@@ -2185,6 +2878,57 @@
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
|
||||
"integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "1.x.x || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
@@ -2254,6 +2998,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.14",
|
||||
"dev": true,
|
||||
@@ -2346,6 +3096,28 @@
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.0.2",
|
||||
"dev": true,
|
||||
|
||||
@@ -21,9 +21,12 @@
|
||||
"@tanstack/react-virtual": "^3.10.8",
|
||||
"@xyflow/react": "^12.3.4",
|
||||
"axios": "^1.10.0",
|
||||
"diff": "^8.0.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^6.30.1"
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"recharts": "^3.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.29.0",
|
||||
|
||||
+429
-418
File diff suppressed because it is too large
Load Diff
+412
-5
@@ -1,5 +1,166 @@
|
||||
/* Custom styles for S3 Lists Manager */
|
||||
/* Most styles are now provided by @tabler/core */
|
||||
/* Custom styles for RouterOS Manager */
|
||||
/* 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;
|
||||
overflow: visible;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/* Все выпадающие меню в футере сайдбара — поверх контента и без обрезки */
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu {
|
||||
z-index: 1050;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card {
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer {
|
||||
flex-wrap: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Стрелка только у пунктов с подменю (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 .navbar-nav > .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 .navbar-nav > .nav-item.dropdown .dropdown-item {
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.35rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
.navbar-vertical .navbar-nav > .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 .navbar-nav > .nav-item.dropdown .dropdown-item .nav-link-icon .icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* Custom avatar background */
|
||||
.avatar {
|
||||
@@ -151,6 +312,150 @@
|
||||
/* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
|
||||
(например, 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;
|
||||
}
|
||||
|
||||
/* ===== Мобильный сайдбар: верхняя полоса + оверлей меню (Tabler-style) ===== */
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1035;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
body.sidebar-overlay-open {
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
/* На мобильных: колоночный layout — сайдбар сверху как полоса, контент на всю ширину снизу */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page .navbar-vertical {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: auto !important;
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
z-index: 1041; /* выше бэкдропа (1035), чтобы меню и верхняя полоса были кликабельны */
|
||||
}
|
||||
.page .navbar-vertical > .container-fluid {
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
min-height: 3.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-brand {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-brand .fw-bold {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 12rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-nav.flex-row {
|
||||
margin-left: auto;
|
||||
}
|
||||
.page .navbar-vertical .navbar-toggler {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
/* Меню скрыто по умолчанию, при открытии — оверлей слева (z-index внутри контекста навбара) */
|
||||
.page .navbar-vertical .navbar-collapse {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(100vw, 280px);
|
||||
max-width: 280px;
|
||||
z-index: 1042;
|
||||
background: #1e293b;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
.page .navbar-vertical .navbar-collapse.show {
|
||||
display: flex !important;
|
||||
}
|
||||
.page-wrapper {
|
||||
margin-left: 0 !important;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-vertical .nav-link,
|
||||
.navbar-vertical .dropdown-item {
|
||||
min-height: 44px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive navbar */
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-collapse {
|
||||
@@ -251,10 +556,12 @@
|
||||
height: 100%;
|
||||
}
|
||||
.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,
|
||||
.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) */
|
||||
}
|
||||
|
||||
@@ -263,7 +570,7 @@
|
||||
|
||||
/* Responsive sizing for small screens */
|
||||
@media (max-width: 992px) {
|
||||
.header-actions { gap: 0.4rem; }
|
||||
.header-actions { gap: 0.4rem; flex-wrap: wrap; }
|
||||
.header-actions .btn {
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 0.875rem;
|
||||
@@ -276,6 +583,30 @@
|
||||
.header-actions { width: 100%; }
|
||||
}
|
||||
|
||||
/* Мобильные отступы контента */
|
||||
@media (max-width: 767.98px) {
|
||||
.page-body .container-fluid,
|
||||
.page-body .container-xl {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.card .card-body {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.offcanvas-start {
|
||||
width: min(320px, 100vw) !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-dialog {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.page-wrapper {
|
||||
@@ -366,6 +697,82 @@
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Easy Switch: bring visuals in line with Tabler pages */
|
||||
.easy-switch-page .card-tabs .nav-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.easy-switch-server-header {
|
||||
background-color: rgba(32, 107, 196, 0.05);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.easy-switch-flag {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0.125rem 0.375rem rgba(32, 41, 57, 0.1);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card-active {
|
||||
border: 1px solid var(--tblr-primary) !important;
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(32, 107, 196, 0.25);
|
||||
}
|
||||
|
||||
.easy-switch-active-check {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.easy-switch-fast-slot {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.easy-switch-fast-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-flag {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-flag-active {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-title {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-ip {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-ping {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Ripple effect для кнопок */
|
||||
@keyframes ripple {
|
||||
to {
|
||||
|
||||
+447
-194
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, createContext, useContext } from 'react';
|
||||
import { useState, useEffect, createContext, useContext, useRef } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
@@ -20,7 +20,15 @@ import {
|
||||
IconDownload,
|
||||
IconCreditCard,
|
||||
IconMenu2,
|
||||
IconArrowsExchange
|
||||
IconArrowsExchange,
|
||||
IconLayoutSidebarLeftExpand,
|
||||
IconLayoutNavbar,
|
||||
IconChartPie,
|
||||
IconChartBar,
|
||||
IconClock,
|
||||
IconClockPlay,
|
||||
IconShield,
|
||||
IconRoute2
|
||||
} from '@tabler/icons-react';
|
||||
import ServerManager from './ServerManager';
|
||||
import FilterManager from './FilterManager';
|
||||
@@ -32,15 +40,29 @@ import AutoUrlManager from './AutoUrlManager';
|
||||
import BillingManager from './BillingManager';
|
||||
import CommunitiesManager from './CommunitiesManager';
|
||||
import NetworkConfigManager from './NetworkConfigManager';
|
||||
import MikrotikTools from './MikrotikTools.jsx';
|
||||
import InterfaceSpeedTest from './InterfaceSpeedTest.jsx';
|
||||
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 RouteOptimizerPage from './RouteOptimizerPage.jsx';
|
||||
import OspfToolsPage from './OspfToolsPage.jsx';
|
||||
import './App.css';
|
||||
import { NotifyProvider } from './components/NotifyProvider.jsx';
|
||||
import SettingsModal from './components/SettingsModal.jsx';
|
||||
import ToastContainer from './components/ToastContainer.jsx';
|
||||
import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
|
||||
import ErrorBoundary from './components/ErrorBoundary.jsx';
|
||||
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
|
||||
import { PingProvider } from './contexts/PingContext.jsx';
|
||||
import { AlertsProvider } from './contexts/AlertsContext.jsx';
|
||||
import AlertsBell from './components/AlertsBell.jsx';
|
||||
|
||||
// --- Simple i18n (RU/EN) ---
|
||||
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
|
||||
@@ -51,17 +73,21 @@ function LanguageProvider({ children }) {
|
||||
const dict = {
|
||||
ru: {
|
||||
home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
|
||||
dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
||||
dashboard: 'Панель', trafficTraffic: 'Расход трафика', resourceStats: 'Статистика ресурсов', networkMap: 'Карта сети', uptimeMonitor: 'Uptime Monitor', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
||||
routeOptimizer: 'Оптимизация маршрутов ИИ',
|
||||
communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы',
|
||||
light: 'Светлая', dark: 'Тёмная'
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы', pingServices: 'Пинг сервисов', firewall: 'Firewall', ospfTools: 'Инструменты OSPF',
|
||||
light: 'Светлая', dark: 'Тёмная',
|
||||
layoutSidebar: 'Сайдбар', layoutHorizontal: 'Верхнее меню'
|
||||
},
|
||||
en: {
|
||||
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',
|
||||
routeOptimizer: 'AI Route Optimizer',
|
||||
communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups',
|
||||
light: 'Light', dark: 'Dark'
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups', pingServices: 'Ping Services', firewall: 'Firewall', ospfTools: 'OSPF Tools',
|
||||
light: 'Light', dark: 'Dark',
|
||||
layoutSidebar: 'Sidebar', layoutHorizontal: 'Top menu'
|
||||
}
|
||||
};
|
||||
const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
|
||||
@@ -104,12 +130,16 @@ function App() {
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<LanguageProvider>
|
||||
<ThemeProvider>
|
||||
<ToastContainer>
|
||||
<NotifyProvider>
|
||||
<NetworkErrorHandler />
|
||||
<MainLayout />
|
||||
</NotifyProvider>
|
||||
</ToastContainer>
|
||||
<PingProvider>
|
||||
<AlertsProvider>
|
||||
<ToastContainer>
|
||||
<NotifyProvider>
|
||||
<NetworkErrorHandler />
|
||||
<MainLayout />
|
||||
</NotifyProvider>
|
||||
</ToastContainer>
|
||||
</AlertsProvider>
|
||||
</PingProvider>
|
||||
</ThemeProvider>
|
||||
</LanguageProvider>
|
||||
</QueryClientProvider>
|
||||
@@ -118,12 +148,60 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
const LAYOUT_FLUID = 'fluid';
|
||||
const LAYOUT_HORIZONTAL = 'horizontal';
|
||||
|
||||
const SIDEBAR_COLLAPSE_ID = 'sidebar-menu';
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
function MainLayout() {
|
||||
const location = useLocation();
|
||||
const { lang, setLang, t } = useContext(LanguageContext);
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
// Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
|
||||
const [sidebarBackdrop, setSidebarBackdrop] = useState(false);
|
||||
const sidebarTogglerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('layout', layout);
|
||||
}, [layout]);
|
||||
|
||||
// Мобильный сайдбар: бэкдроп при открытом меню и закрытие при навигации
|
||||
useEffect(() => {
|
||||
if (layout !== LAYOUT_FLUID) return;
|
||||
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
|
||||
const onShow = () => {
|
||||
if (window.innerWidth < MOBILE_BREAKPOINT) {
|
||||
setSidebarBackdrop(true);
|
||||
document.body.classList.add('sidebar-overlay-open');
|
||||
}
|
||||
};
|
||||
const onHide = () => {
|
||||
setSidebarBackdrop(false);
|
||||
document.body.classList.remove('sidebar-overlay-open');
|
||||
};
|
||||
if (collapseEl) {
|
||||
collapseEl.addEventListener('show.bs.collapse', onShow);
|
||||
collapseEl.addEventListener('hide.bs.collapse', onHide);
|
||||
return () => {
|
||||
collapseEl.removeEventListener('show.bs.collapse', onShow);
|
||||
collapseEl.removeEventListener('hide.bs.collapse', onHide);
|
||||
};
|
||||
}
|
||||
}, [layout]);
|
||||
|
||||
useEffect(() => {
|
||||
if (layout !== LAYOUT_FLUID || window.innerWidth >= MOBILE_BREAKPOINT) return;
|
||||
setSidebarBackdrop(false);
|
||||
document.body.classList.remove('sidebar-overlay-open');
|
||||
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
|
||||
if (collapseEl?.classList.contains('show')) {
|
||||
sidebarTogglerRef.current?.click?.();
|
||||
}
|
||||
}, [location.pathname, layout]);
|
||||
|
||||
useEffect(() => {
|
||||
}, [location.pathname, layout]);
|
||||
|
||||
// Состояние для управления выпадающими меню
|
||||
const [dropdownStates, setDropdownStates] = useState({
|
||||
@@ -132,10 +210,12 @@ function MainLayout() {
|
||||
tools: false
|
||||
});
|
||||
|
||||
// Закрытие всех выпадающих меню при клике вне их области
|
||||
// Закрытие выпадающих меню только при клике в сайдбаре вне открытого меню (клики по странице не закрывают)
|
||||
useEffect(() => {
|
||||
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({
|
||||
data: false,
|
||||
management: false,
|
||||
@@ -171,8 +251,14 @@ function MainLayout() {
|
||||
id: 'home',
|
||||
title: t('home'),
|
||||
icon: IconHome,
|
||||
path: '/dashboard',
|
||||
single: true
|
||||
items: [
|
||||
{ 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: 'route-optimizer', title: t('routeOptimizer'), path: '/route-optimizer', icon: IconRoute2 },
|
||||
{ id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
@@ -203,10 +289,23 @@ function MainLayout() {
|
||||
icon: IconSettings,
|
||||
items: [
|
||||
{ id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
|
||||
{ id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase }
|
||||
{ id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase },
|
||||
{ id: 'ospf-tools', title: t('ospfTools'), path: '/ospf-tools', icon: IconRoute2 },
|
||||
{ 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'
|
||||
}
|
||||
];
|
||||
|
||||
// Определяем активную вкладку по адресу
|
||||
@@ -228,191 +327,345 @@ function MainLayout() {
|
||||
|
||||
const activeTab = getActiveTab();
|
||||
|
||||
// Старый вид: один верхний навбар с горизонтальным меню
|
||||
if (layout === LAYOUT_HORIZONTAL) {
|
||||
return (
|
||||
<div className="page d-flex flex-column min-vh-100">
|
||||
<a href="#main-content" className="skip-link">Перейти к основному содержанию</a>
|
||||
<header className="navbar navbar-expand-md navbar-light d-print-none" style={{ boxShadow: '0 1px 0 0 #e9ecef' }}>
|
||||
<div className="container-xl">
|
||||
<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">
|
||||
<IconBrandTabler className="navbar-brand-icon me-2" />
|
||||
<span className="fw-bold">RouterOS Manager</span>
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
className="navbar-toggler d-md-none"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu-horizontal"
|
||||
aria-controls="navbar-menu-horizontal"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<IconMenu2 />
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbar-menu-horizontal">
|
||||
<div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
||||
<ul className="navbar-nav">
|
||||
{navCategories.map(category => (
|
||||
<li key={category.id} className="nav-item dropdown">
|
||||
{category.single ? (
|
||||
<Link
|
||||
to={category.path}
|
||||
className={`nav-link${activeTab === category.id ? ' active' : ''}`}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
className={`nav-link dropdown-toggle${activeTab.startsWith(category.id) ? ' active' : ''}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleDropdown(category.id);
|
||||
}}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</a>
|
||||
{dropdownStates[category.id] && (
|
||||
<div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="dropdown-menu-columns">
|
||||
<div className="dropdown-menu-column">
|
||||
{category.items.map(item => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
|
||||
>
|
||||
<item.icon className="icon icon-tabler" />
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="navbar-nav flex-row order-md-last">
|
||||
<div className="nav-item dropdown me-1">
|
||||
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||
{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 me-1">
|
||||
<a href="#" className="nav-link px-2 dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
|
||||
<span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>English</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()}>
|
||||
{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 me-1">
|
||||
<AlertsBell />
|
||||
</div>
|
||||
<div className="nav-item me-1">
|
||||
<KeyboardShortcutsButton className="nav-link px-2" />
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link to="/settings" className="nav-link px-2" title="Настройки">
|
||||
<IconSettings size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" className="container-xl mt-4 flex-grow-1" 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="/route-optimizer" element={<RouteOptimizerPage />} />
|
||||
<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="/ospf-tools" element={<OspfToolsPage />} />
|
||||
<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>
|
||||
<footer className="footer mt-auto py-2">
|
||||
<div className="container-xl text-muted small">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</div>
|
||||
</footer>
|
||||
<CommandPalette />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fluid Vertical: вертикальный сайдбар + верхний навбар + page-wrapper
|
||||
return (
|
||||
<div className="page d-flex flex-column min-vh-100">
|
||||
<div className="page">
|
||||
{/* Skip link для доступности */}
|
||||
<a href="#main-content" className="skip-link">
|
||||
Перейти к основному содержанию
|
||||
</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="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<Link to="/" className="navbar-brand d-flex align-items-center">
|
||||
<IconBrandTabler className="navbar-brand-icon me-2" />
|
||||
<span className="fw-bold">S3 Lists Manager</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Кнопка бургера для мобильных */}
|
||||
<button
|
||||
className="navbar-toggler d-md-none"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<IconMenu2 />
|
||||
</button>
|
||||
|
||||
{/* Основное меню */}
|
||||
<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">
|
||||
<ul className="navbar-nav">
|
||||
{navCategories.map(category => (
|
||||
<li key={category.id} className="nav-item dropdown">
|
||||
{category.single ? (
|
||||
<Link
|
||||
to={category.path}
|
||||
className={`nav-link${activeTab === category.id ? ' active' : ''}`}
|
||||
{/* Левая вертикальная навигация — всегда тёмная (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">RouterOS Manager</span>
|
||||
</Link>
|
||||
<div className="navbar-nav flex-row d-md-none">
|
||||
<button
|
||||
ref={sidebarTogglerRef}
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#${SIDEBAR_COLLAPSE_ID}`}
|
||||
aria-controls={SIDEBAR_COLLAPSE_ID}
|
||||
aria-expanded="false"
|
||||
aria-label="Открыть меню"
|
||||
>
|
||||
<IconMenu2 />
|
||||
</button>
|
||||
</div>
|
||||
<div className="collapse navbar-collapse" id={SIDEBAR_COLLAPSE_ID}>
|
||||
<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]}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<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${activeTab.startsWith(category.id) ? ' active' : ''}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleDropdown(category.id);
|
||||
}}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</a>
|
||||
{dropdownStates[category.id] && (
|
||||
<div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="dropdown-menu-columns">
|
||||
<div className="dropdown-menu-column">
|
||||
{category.items.map(item => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
|
||||
>
|
||||
<item.icon className="icon icon-tabler" />
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть навбара: язык, тема и действия */}
|
||||
<div className="navbar-nav flex-row order-md-last">
|
||||
{/* Язык */}
|
||||
<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>
|
||||
</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>
|
||||
</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 d-inline-flex align-items-center justify-content-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
|
||||
<span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-start">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>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-start">
|
||||
<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-start">
|
||||
<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">
|
||||
<AlertsBell dropup />
|
||||
</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 className="nav-item dropdown me-1">
|
||||
<a
|
||||
href="#"
|
||||
className="nav-link px-2 dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
{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 me-1">
|
||||
<KeyboardShortcutsButton className="nav-link px-2" />
|
||||
</div>
|
||||
|
||||
{/* Настройки */}
|
||||
<div className="nav-item">
|
||||
<a
|
||||
href="#"
|
||||
className="nav-link px-2"
|
||||
onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }}
|
||||
title="Настройки"
|
||||
>
|
||||
<IconSettings size={20} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<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="/" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<footer className="footer mt-auto py-2">
|
||||
<div className="container-xl text-muted small">
|
||||
Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
|
||||
|
||||
{/* Бэкдроп мобильного меню: закрытие по клику */}
|
||||
{sidebarBackdrop && (
|
||||
<div
|
||||
className="sidebar-backdrop d-md-none"
|
||||
aria-hidden="true"
|
||||
onClick={() => sidebarTogglerRef.current?.click?.()}
|
||||
/>
|
||||
)}
|
||||
|
||||
<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="/route-optimizer" element={<RouteOptimizerPage />} />
|
||||
<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="/ospf-tools" element={<OspfToolsPage />} />
|
||||
<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>
|
||||
<SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
||||
<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>
|
||||
</footer>
|
||||
</div>
|
||||
<CommandPalette />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import {
|
||||
IconPlus,
|
||||
@@ -101,7 +101,7 @@ function AutoUrlManager() {
|
||||
|
||||
const hasAtLeastOneValidRow = urls.some(u => isValidHttpUrl(u.url) && isValidCommunity(u.community));
|
||||
|
||||
const saveUrls = async () => {
|
||||
const saveUrls = useCallback(async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
setError('');
|
||||
@@ -124,7 +124,7 @@ function AutoUrlManager() {
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
}, [urls]);
|
||||
|
||||
const processUrls = async () => {
|
||||
try {
|
||||
@@ -158,7 +158,7 @@ function AutoUrlManager() {
|
||||
}
|
||||
setSuccess('Пример формата скопирован');
|
||||
setTimeout(() => setSuccess(''), 2000);
|
||||
} catch (e) {
|
||||
} catch (_e) {
|
||||
setError('Не удалось скопировать пример');
|
||||
setTimeout(() => setError(''), 2000);
|
||||
}
|
||||
@@ -276,7 +276,7 @@ function AutoUrlManager() {
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Автоматические URL"
|
||||
pretitle="Управление автоматическими URL-адресами для загрузки списков IP и доменов"
|
||||
icon={<IconLink size={24} />}
|
||||
actions={(
|
||||
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||||
<div className="btn-list">
|
||||
@@ -619,7 +619,7 @@ function AutoUrlManager() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredAndSortedUrls.map((url, displayIndex) => {
|
||||
{filteredAndSortedUrls.map((url, _displayIndex) => {
|
||||
const originalIndex = urls.findIndex(u => u === url);
|
||||
const v = getRowValidity(url);
|
||||
const isValid = v.url && v.community;
|
||||
|
||||
+438
-391
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import axios from 'axios';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
@@ -41,8 +41,43 @@ import {
|
||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||
import { BillingCard } from './components/billing/index.js';
|
||||
|
||||
function normalizeBillingItems(rawItems, rates) {
|
||||
const toRUB = (amt, ccy) => {
|
||||
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;
|
||||
};
|
||||
return (rawItems || []).map((item, idx) => {
|
||||
const payments = Array.isArray(item.payments)
|
||||
? item.payments
|
||||
: (item.lastPaymentDate && item.lastPaymentAmount
|
||||
? [{ date: item.lastPaymentDate, amount: item.lastPaymentAmount, currency: item.lastPaymentCurrency || 'USD', note: 'Импортировано' }]
|
||||
: []);
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
function BillingManager() {
|
||||
const [billingData, setBillingData] = useState([]);
|
||||
const [rawBillingData, setRawBillingData] = useState([]);
|
||||
const [servers, setServers] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
@@ -51,9 +86,10 @@ function BillingManager() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [sortField, setSortField] = useState('nextPaymentDate');
|
||||
const [sortOrder, setSortOrder] = useState('asc');
|
||||
const [filterStatus, setFilterStatus] = useState('');
|
||||
const [filterStatus, _setFilterStatus] = useState('');
|
||||
const [filterUrgency, setFilterUrgency] = useState('');
|
||||
const [viewMode, setViewMode] = useState('cards'); // 'cards' | 'table'
|
||||
const [activeTab, setActiveTab] = useState('subscriptions'); // 'subscriptions' | 'payments'
|
||||
const pageSize = 15;
|
||||
|
||||
// Модальные окна
|
||||
@@ -75,14 +111,14 @@ function BillingManager() {
|
||||
const [editingPayment, setEditingPayment] = useState(null);
|
||||
const [showDeletePaymentModal, setShowDeletePaymentModal] = useState(false);
|
||||
const [paymentToDelete, setPaymentToDelete] = useState(null);
|
||||
const [futureDateConfirm, setFutureDateConfirm] = useState(false);
|
||||
const [_futureDateConfirm, _setFutureDateConfirm] = useState(false);
|
||||
|
||||
// История платежей
|
||||
const [paymentSearchTerm, setPaymentSearchTerm] = useState('');
|
||||
const [paymentSortField, setPaymentSortField] = useState('date');
|
||||
const [paymentSortOrder, setPaymentSortOrder] = useState('desc');
|
||||
const [selectedPayments, setSelectedPayments] = useState(new Set());
|
||||
const [paymentPage, setPaymentPage] = useState(1);
|
||||
const [paymentSearchTerm, _setPaymentSearchTerm] = useState('');
|
||||
const [_paymentSortField, _setPaymentSortField] = useState('date');
|
||||
const [_paymentSortOrder, _setPaymentSortOrder] = useState('desc');
|
||||
const [_selectedPayments, _setSelectedPayments] = useState(new Set());
|
||||
const [_paymentPage, _setPaymentPage] = useState(1);
|
||||
const paymentPageSize = 10;
|
||||
|
||||
// Курсы валют
|
||||
@@ -91,7 +127,7 @@ function BillingManager() {
|
||||
EUR: 1,
|
||||
RUB: 1
|
||||
});
|
||||
const [ratesLoading, setRatesLoading] = useState(false);
|
||||
const [_ratesLoading, setRatesLoading] = useState(false);
|
||||
|
||||
// Новый элемент
|
||||
const [newItem, setNewItem] = useState({
|
||||
@@ -111,17 +147,93 @@ function BillingManager() {
|
||||
serverId: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchBillingData();
|
||||
fetchExchangeRates();
|
||||
fetchServers();
|
||||
const fetchExchangeRates = useCallback(async (abortSignal) => {
|
||||
setRatesLoading(true);
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
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 rubPerEur = cbr.data && cbr.data.rates?.EUR ? 1 / Number(cbr.data.rates.EUR) : null;
|
||||
|
||||
if (rubPerUsd) {
|
||||
const eurPerUsd = rubPerEur ? rubPerUsd / rubPerEur : 1;
|
||||
setExchangeRates({
|
||||
USD: 1,
|
||||
EUR: eurPerUsd,
|
||||
RUB: rubPerUsd
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.warn('ЦБ недоступен, пробуем резервный источник:', error?.message);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('https://open.er-api.com/v6/latest/USD', opts);
|
||||
const rates = response.data?.rates || {};
|
||||
setExchangeRates({
|
||||
USD: 1,
|
||||
EUR: rates.EUR || 1,
|
||||
RUB: rates.RUB || 1
|
||||
});
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Ошибка при загрузке курсов валют:', error);
|
||||
setExchangeRates({ USD: 1, EUR: 1.05, RUB: 95 });
|
||||
} finally {
|
||||
setRatesLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchServers = useCallback(async (abortSignal) => {
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const res = await api.get(`/servers`, opts);
|
||||
setServers(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Ошибка при загрузке серверов:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchBillingData = useCallback(async (abortSignal) => {
|
||||
setLoading(true);
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const response = await api.get(`/billing`, opts);
|
||||
setRawBillingData(Array.isArray(response.data) ? response.data : []);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||
console.error('Ошибка при загрузке данных биллинга:', err);
|
||||
setError('Ошибка при загрузке данных');
|
||||
setRawBillingData([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
fetchBillingData(signal);
|
||||
fetchExchangeRates(signal);
|
||||
fetchServers(signal);
|
||||
return () => controller.abort();
|
||||
}, [fetchBillingData, fetchExchangeRates, fetchServers]);
|
||||
|
||||
// Нормализация с учётом курсов валют (без повторных запросов)
|
||||
const billingData = useMemo(
|
||||
() => normalizeBillingItems(rawBillingData, exchangeRates),
|
||||
[rawBillingData, exchangeRates]
|
||||
);
|
||||
|
||||
// Автоматическая синхронизация: добавляем серверы без записей в биллинге
|
||||
useEffect(() => {
|
||||
if (servers.length === 0 || loading) return;
|
||||
|
||||
setBillingData((prev) => {
|
||||
setRawBillingData((prev) => {
|
||||
const existingServerIds = new Set(
|
||||
prev.map(b => b.serverId).filter(Boolean)
|
||||
);
|
||||
@@ -161,111 +273,14 @@ function BillingManager() {
|
||||
}, [servers, loading]);
|
||||
|
||||
|
||||
const fetchExchangeRates = async () => {
|
||||
setRatesLoading(true);
|
||||
try {
|
||||
// Основной источник: ЦБ РФ (base = RUB)
|
||||
const cbr = await axios.get('https://www.cbr-xml-daily.ru/latest.js');
|
||||
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;
|
||||
|
||||
if (rubPerUsd) {
|
||||
const eurPerUsd = rubPerEur ? rubPerUsd / rubPerEur : 1;
|
||||
setExchangeRates({
|
||||
USD: 1,
|
||||
EUR: eurPerUsd, // сколько EUR за 1 USD
|
||||
RUB: rubPerUsd // сколько RUB за 1 USD
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('ЦБ недоступен, пробуем резервный источник:', error?.message);
|
||||
}
|
||||
|
||||
try {
|
||||
// Резервный источник: open.er-api
|
||||
const response = await axios.get('https://open.er-api.com/v6/latest/USD');
|
||||
const rates = response.data?.rates || {};
|
||||
setExchangeRates({
|
||||
USD: 1,
|
||||
EUR: rates.EUR || 1,
|
||||
RUB: rates.RUB || 1
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке курсов валют:', error);
|
||||
// Фолбек на разумные значения
|
||||
setExchangeRates({ USD: 1, EUR: 1.05, RUB: 95 });
|
||||
} finally {
|
||||
setRatesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchServers = async () => {
|
||||
try {
|
||||
const res = await api.get(`/servers`);
|
||||
setServers(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке серверов:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchBillingData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get(`/billing`);
|
||||
const rates = exchangeRates; // из closure, на первой загрузке может быть {1,1,1} — для USD достаточно
|
||||
const toRUB = (amt, ccy) => {
|
||||
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.lastPaymentDate && item.lastPaymentAmount
|
||||
? [{ date: item.lastPaymentDate, amount: item.lastPaymentAmount, currency: item.lastPaymentCurrency || 'USD', note: 'Импортировано' }]
|
||||
: []
|
||||
);
|
||||
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);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
console.error('Ошибка при загрузке данных биллинга:', err);
|
||||
setError('Ошибка при загрузке данных');
|
||||
setBillingData([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveChanges = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Убираем служебное поле _external перед сохранением
|
||||
const payload = billingData.map(({ _external, ...rest }) => rest);
|
||||
const payload = billingData.map(({ _external: _ext, ...rest }) => rest);
|
||||
await api.post(`/billing`, { domains: payload });
|
||||
// После сохранения снимаем флаг _external со всех записей
|
||||
setBillingData(prev => prev.map(item => ({ ...item, _external: false })));
|
||||
setRawBillingData(prev => prev.map(item => ({ ...item, _external: false })));
|
||||
setSuccess('Данные успешно сохранены');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (err) {
|
||||
@@ -298,6 +313,10 @@ function BillingManager() {
|
||||
return sum + convertToRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
|
||||
}, 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 nextPayment = new Date(item.nextPaymentDate);
|
||||
const now = new Date();
|
||||
@@ -451,7 +470,7 @@ function BillingManager() {
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (selectedItem) {
|
||||
setBillingData(prev => prev.filter(item => item.id !== selectedItem.id));
|
||||
setRawBillingData(prev => prev.filter(item => item.id !== selectedItem.id));
|
||||
setShowDeleteModal(false);
|
||||
setSelectedItem(null);
|
||||
}
|
||||
@@ -464,7 +483,7 @@ function BillingManager() {
|
||||
}
|
||||
|
||||
const newId = Math.max(...billingData.map(item => parseInt(item.id) || 0), 0) + 1;
|
||||
setBillingData(prev => [...prev, { ...newItem, id: newId.toString() }]);
|
||||
setRawBillingData(prev => [...prev, { ...newItem, id: newId.toString() }]);
|
||||
setShowAddModal(false);
|
||||
setSuccess('Элемент добавлен');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
@@ -477,7 +496,7 @@ function BillingManager() {
|
||||
}
|
||||
|
||||
// Снимаем флаг _external при редактировании (запись теперь заполнена)
|
||||
setBillingData(prev => prev.map(item =>
|
||||
setRawBillingData(prev => prev.map(item =>
|
||||
item.id === editingItem.id ? { ...editingItem, _external: false } : item
|
||||
));
|
||||
setShowEditModal(false);
|
||||
@@ -489,7 +508,7 @@ function BillingManager() {
|
||||
const handleDeletePayment = () => {
|
||||
if (!paymentToDelete) return;
|
||||
const { serverId, index } = paymentToDelete;
|
||||
setBillingData(prev => prev.map(s => {
|
||||
setRawBillingData(prev => prev.map(s => {
|
||||
if (s.id !== serverId) return s;
|
||||
const payments = [...(s.payments || [])];
|
||||
payments.splice(index, 1);
|
||||
@@ -576,17 +595,41 @@ function BillingManager() {
|
||||
{/* Заголовок */}
|
||||
<PageHeader
|
||||
title="Биллинг"
|
||||
pretitle="Финансы / Инфраструктура"
|
||||
icon={<IconCreditCard size={24} />}
|
||||
actions={
|
||||
<PageHeaderActions
|
||||
loading={loading}
|
||||
onRefresh={() => { fetchBillingData(); fetchServers(); }}
|
||||
disableRefresh={loading}
|
||||
onExport={exportData}
|
||||
disableExport={loading}
|
||||
onSave={handleSaveChanges}
|
||||
disableSave={loading}
|
||||
/>
|
||||
<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
|
||||
loading={loading}
|
||||
onRefresh={() => { fetchBillingData(); fetchServers(); }}
|
||||
disableRefresh={loading}
|
||||
onExport={exportData}
|
||||
disableExport={loading}
|
||||
onSave={handleSaveChanges}
|
||||
disableSave={loading}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -656,279 +699,282 @@ function BillingManager() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Основная секция */}
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="d-flex align-items-center gap-3 flex-grow-1">
|
||||
{/* Основная секция: Подписки */}
|
||||
{activeTab === 'subscriptions' && (
|
||||
<div className="card">
|
||||
<div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<h3 className="card-title mb-0">
|
||||
Подписки
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
|
||||
</h3>
|
||||
|
||||
{/* Поиск */}
|
||||
<div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
|
||||
<span className="input-icon-addon">
|
||||
<IconSearch size={16} />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Поиск..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Быстрые фильтры */}
|
||||
<div className="d-flex gap-1">
|
||||
<button
|
||||
className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
|
||||
>
|
||||
Все
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
|
||||
>
|
||||
Просрочено
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
|
||||
>
|
||||
Срочно
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Переключатель вида */}
|
||||
<div className="btn-group btn-group-sm" role="group">
|
||||
<button
|
||||
className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
||||
onClick={() => setViewMode('cards')}
|
||||
title="Карточки"
|
||||
>
|
||||
<IconLayoutGrid size={16} />
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${viewMode === 'table' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
||||
onClick={() => setViewMode('table')}
|
||||
title="Таблица"
|
||||
>
|
||||
<IconList size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-actions">
|
||||
<button className="btn btn-primary" onClick={handleAddItem}>
|
||||
<IconPlus size={18} className="me-1" />
|
||||
Добавить
|
||||
</button>
|
||||
</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 className="d-flex flex-wrap align-items-center gap-2 flex-grow-1 justify-content-end">
|
||||
{/* Поиск */}
|
||||
<div className="input-icon" style={{ minWidth: '220px', maxWidth: '280px' }}>
|
||||
<span className="input-icon-addon">
|
||||
<IconSearch size={16} />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Поиск..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Быстрые фильтры */}
|
||||
<div className="btn-group" role="group">
|
||||
<button
|
||||
className={`btn ${filterUrgency === '' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
|
||||
>
|
||||
Все
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${filterUrgency === 'overdue' ? 'btn-outline-danger active' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
|
||||
>
|
||||
Просрочено
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${filterUrgency === 'urgent' ? 'btn-outline-warning active' : 'btn-outline-secondary'}`}
|
||||
onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
|
||||
>
|
||||
Срочно
|
||||
</button>
|
||||
</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 className="card-actions">
|
||||
<button className="btn btn-primary" onClick={handleAddItem}>
|
||||
<IconPlus size={18} className="me-1" />
|
||||
Добавить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Табличный вид */
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleSort('hostName')}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
Сервис
|
||||
{sortField === 'hostName' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th
|
||||
className="cursor-pointer text-end"
|
||||
onClick={() => handleSort('monthlyCost')}
|
||||
style={{ width: '140px' }}
|
||||
>
|
||||
Стоимость
|
||||
{sortField === 'monthlyCost' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th
|
||||
className="cursor-pointer text-center"
|
||||
onClick={() => handleSort('nextPaymentDate')}
|
||||
style={{ width: '120px' }}
|
||||
>
|
||||
Платёж
|
||||
{sortField === 'nextPaymentDate' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th className="text-center" style={{ width: '100px' }}>Срок</th>
|
||||
<th className="text-center" style={{ width: '80px' }}>Статус</th>
|
||||
<th style={{ width: '140px' }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedData.map(item => {
|
||||
const days = getDaysUntilPayment(item.nextPaymentDate);
|
||||
const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
|
||||
|
||||
return (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<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">
|
||||
<span>{item.provider}</span>
|
||||
{linkedServer && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-blue">{linkedServer.ip}</span>
|
||||
</>
|
||||
)}
|
||||
{item.loginUrl && (
|
||||
<a
|
||||
href={item.loginUrl.startsWith('http') ? item.loginUrl : `https://${item.loginUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted"
|
||||
title="Открыть панель"
|
||||
>
|
||||
<IconExternalLink size={12} />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Контент: карточки или таблица */}
|
||||
{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">
|
||||
<table className="table card-table table-vcenter mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleSort('hostName')}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
Сервис
|
||||
{sortField === 'hostName' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th
|
||||
className="cursor-pointer text-end"
|
||||
onClick={() => handleSort('monthlyCost')}
|
||||
style={{ width: '140px' }}
|
||||
>
|
||||
Стоимость
|
||||
{sortField === 'monthlyCost' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th
|
||||
className="cursor-pointer text-center"
|
||||
onClick={() => handleSort('nextPaymentDate')}
|
||||
style={{ width: '120px' }}
|
||||
>
|
||||
Платёж
|
||||
{sortField === 'nextPaymentDate' && (
|
||||
<span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
<th className="text-center" style={{ width: '100px' }}>Срок</th>
|
||||
<th className="text-center" style={{ width: '80px' }}>Статус</th>
|
||||
<th style={{ width: '140px' }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedData.map(item => {
|
||||
const days = getDaysUntilPayment(item.nextPaymentDate);
|
||||
const linkedServer = item.serverId ? serversById.get(item.serverId) : null;
|
||||
|
||||
return (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<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">
|
||||
<span>{item.provider}</span>
|
||||
{linkedServer && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-blue">{linkedServer.ip}</span>
|
||||
</>
|
||||
)}
|
||||
{item.loginUrl && (
|
||||
<a
|
||||
href={item.loginUrl.startsWith('http') ? item.loginUrl : `https://${item.loginUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted"
|
||||
title="Открыть панель"
|
||||
>
|
||||
<IconExternalLink size={12} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="fw-semibold">
|
||||
{formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}
|
||||
</div>
|
||||
{item.monthlyCostCurrency !== 'RUB' && (
|
||||
<div className="text-muted small">
|
||||
≈ {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="fw-semibold">
|
||||
{formatCurrency(item.monthlyCost, item.monthlyCostCurrency)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{formatDate(item.nextPaymentDate)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<UrgencyBadge days={days} />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{item.status === 'active' ? (
|
||||
<span className="badge bg-green-lt text-green">Активен</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary-lt text-secondary">Неактивен</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<div className="btn-list gap-1 justify-content-end flex-nowrap">
|
||||
<button
|
||||
className="btn btn-outline-success btn-sm"
|
||||
onClick={() => {
|
||||
setPaymentDraft({
|
||||
serverId: item.id,
|
||||
date: new Date().toISOString().slice(0,10),
|
||||
amount: item.monthlyCost || 0,
|
||||
currency: item.monthlyCostCurrency || 'USD',
|
||||
note: ''
|
||||
});
|
||||
setShowPaymentModal(true);
|
||||
}}
|
||||
title="Записать платёж"
|
||||
>
|
||||
<IconCreditCard size={14} className="me-1" />
|
||||
Оплата
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={() => handleEditItem(item)}
|
||||
title="Редактировать"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger btn-sm"
|
||||
onClick={() => handleDeleteItem(item)}
|
||||
title="Удалить"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={filteredData.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{item.monthlyCostCurrency !== 'RUB' && (
|
||||
<div className="text-muted small">
|
||||
≈ {formatCurrencyInRUB(item.monthlyCost, item.monthlyCostCurrency)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{formatDate(item.nextPaymentDate)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<UrgencyBadge days={days} />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{item.status === 'active' ? (
|
||||
<span className="badge bg-green-lt text-green">Активен</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary-lt text-secondary">Неактивен</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="btn-group" role="group">
|
||||
<button
|
||||
className="btn btn-outline-success"
|
||||
onClick={() => {
|
||||
setPaymentDraft({
|
||||
serverId: item.id,
|
||||
date: new Date().toISOString().slice(0,10),
|
||||
amount: item.monthlyCost || 0,
|
||||
currency: item.monthlyCostCurrency || 'USD',
|
||||
note: ''
|
||||
});
|
||||
setShowPaymentModal(true);
|
||||
}}
|
||||
title="Записать платёж"
|
||||
>
|
||||
<IconCreditCard size={14} className="me-1" />
|
||||
Оплата
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={() => handleEditItem(item)}
|
||||
title="Редактировать"
|
||||
>
|
||||
<IconEdit size={14} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger"
|
||||
onClick={() => handleDeleteItem(item)}
|
||||
title="Удалить"
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={filteredData.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* История платежей — компактная версия */}
|
||||
{activeTab === 'payments' && (
|
||||
<div className="card mt-4">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title d-flex align-items-center gap-2">
|
||||
@@ -1046,6 +1092,7 @@ function BillingManager() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Модальные окна */}
|
||||
<FormModal
|
||||
@@ -1108,7 +1155,7 @@ function BillingManager() {
|
||||
}
|
||||
|
||||
if (editingPayment) {
|
||||
setBillingData(prev => prev.map(s => {
|
||||
setRawBillingData(prev => prev.map(s => {
|
||||
if (s.id !== editingPayment.serverId) return s;
|
||||
const payments = [...(s.payments || [])];
|
||||
payments[editingPayment.index] = {
|
||||
@@ -1123,7 +1170,7 @@ function BillingManager() {
|
||||
}));
|
||||
setEditingPayment(null);
|
||||
} else {
|
||||
setBillingData(prev => prev.map(s => {
|
||||
setRawBillingData(prev => prev.map(s => {
|
||||
if (s.id !== paymentDraft.serverId) return s;
|
||||
const payments = [...(s.payments || []), {
|
||||
date: paymentDraft.date,
|
||||
|
||||
+467
-382
@@ -11,14 +11,17 @@ import {
|
||||
IconFilter,
|
||||
IconChartBar,
|
||||
IconList,
|
||||
IconLink,
|
||||
IconRefresh,
|
||||
IconSortAscending,
|
||||
IconSortDescending
|
||||
IconSortDescending,
|
||||
IconUpload,
|
||||
IconDownload,
|
||||
IconDeviceFloppy,
|
||||
IconPlugConnected
|
||||
} 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 Breadcrumbs from './components/Breadcrumbs.jsx';
|
||||
import CommunityStats from './components/CommunityStats.jsx';
|
||||
import SavedFilters from './components/SavedFilters.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
@@ -26,8 +29,9 @@ import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import Pagination from './components/Pagination.jsx';
|
||||
|
||||
const API_URL = '/api';
|
||||
import IconPicker from './components/IconPicker.jsx';
|
||||
import { getIconById } from './lib/brandIcons.js';
|
||||
import { listCommunities, saveCommunitiesData, normalizeEvobgpApiBaseUrl } from './lib/evobgpData.js';
|
||||
|
||||
const normalizeCommunityValue = (value) => {
|
||||
const trimmed = String(value || '').trim();
|
||||
@@ -50,14 +54,25 @@ function CommunitiesManager() {
|
||||
// Состояние для переключения между списком и статистикой
|
||||
const [activeTab, setActiveTab] = useState('list'); // 'list' | 'stats'
|
||||
|
||||
const [newItem, setNewItem] = useState({ value: '', name: '', description: '', tags: '', gatewayDefault: '', color: '', category: '', priority: 0, enabled: true });
|
||||
const [newItem, setNewItem] = useState({ value: '', name: '', description: '', tags: '', color: '', icon: '', category: '', priority: 0, enabled: true });
|
||||
const [editingValue, setEditingValue] = useState(null);
|
||||
const [editingDraft, setEditingDraft] = useState({ value: '', name: '', description: '', tags: '', gatewayDefault: '', color: '', category: '', priority: 0, enabled: true });
|
||||
const [editingDraft, setEditingDraft] = useState({ value: '', name: '', description: '', tags: '', color: '', icon: '', category: '', priority: 0, enabled: true });
|
||||
const [filterUsage, setFilterUsage] = useState({});
|
||||
const [filterUsageLoading, setFilterUsageLoading] = useState(false);
|
||||
const [filterUsageError, setFilterUsageError] = useState('');
|
||||
const [showOnlyUsedInFilters, setShowOnlyUsedInFilters] = useState(false);
|
||||
|
||||
|
||||
const [evobgpUrlDraft, setEvobgpUrlDraft] = useState('');
|
||||
const [evobgpTokenDraft, setEvobgpTokenDraft] = useState('');
|
||||
const [evobgpSettingsOpen, setEvobgpSettingsOpen] = useState(() => {
|
||||
if (import.meta.env?.VITE_EVOBGP_API_URL) return false;
|
||||
try {
|
||||
return Boolean(window.localStorage?.getItem('evobgp_api_url'));
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Модальные окна
|
||||
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
@@ -69,6 +84,15 @@ function CommunitiesManager() {
|
||||
fetchFilterUsage();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
setEvobgpUrlDraft(String(window.localStorage?.getItem('evobgp_api_url') || ''));
|
||||
setEvobgpTokenDraft(String(window.localStorage?.getItem('evobgp_api_token') || ''));
|
||||
} catch {
|
||||
/* no-op */
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!filterUsage) return;
|
||||
setItems((prev) => {
|
||||
@@ -76,7 +100,7 @@ function CommunitiesManager() {
|
||||
Object.keys(filterUsage).forEach((value) => {
|
||||
if (!value) return;
|
||||
if (!map.has(value)) {
|
||||
map.set(value, { value, name: '', description: '', tags: [], gatewayDefault: '', color: '', _external: true });
|
||||
map.set(value, { value, name: '', description: '', tags: [], color: '', icon: '', _external: true });
|
||||
}
|
||||
});
|
||||
return Array.from(map.values());
|
||||
@@ -86,57 +110,12 @@ function CommunitiesManager() {
|
||||
const fetchItems = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [dictRes, asnsRes, ipRes, domRes] = await Promise.all([
|
||||
api.get(`/communities`),
|
||||
api.get(`/asns`, { params: { offset: 0, limit: 0 } }).catch(() => ({ data: [] })),
|
||||
api.get(`/ip-ranges`, { params: { offset: 0, limit: 0 } }).catch(() => ({ data: [] })),
|
||||
api.get(`/domains-new`, { params: { offset: 0, limit: 0 } }).catch(() => ({ data: [] })),
|
||||
]);
|
||||
const dict = Array.isArray(dictRes.data) ? dictRes.data : [];
|
||||
const asnsPayload = Array.isArray(asnsRes.data?.items) ? asnsRes.data.items : (Array.isArray(asnsRes.data) ? asnsRes.data : []);
|
||||
const ipPayload = Array.isArray(ipRes.data?.items) ? ipRes.data.items : (Array.isArray(ipRes.data) ? ipRes.data : []);
|
||||
const domPayload = Array.isArray(domRes.data?.items) ? domRes.data.items : (Array.isArray(domRes.data) ? domRes.data : []);
|
||||
|
||||
const usedCommunities = new Set();
|
||||
// ASNs: fields domain/type
|
||||
for (const it of asnsPayload) {
|
||||
const v = normalizeCommunityValue(it.type);
|
||||
if (v) usedCommunities.add(v);
|
||||
}
|
||||
// IP ranges: fields ipRange/community
|
||||
for (const it of ipPayload) {
|
||||
const v = normalizeCommunityValue(it.community);
|
||||
if (v) usedCommunities.add(v);
|
||||
}
|
||||
// Domains: fields domain/community
|
||||
for (const it of domPayload) {
|
||||
const v = normalizeCommunityValue(it.community);
|
||||
if (v) usedCommunities.add(v);
|
||||
}
|
||||
|
||||
const map = new Map();
|
||||
// put dictionary items first
|
||||
for (const d of dict) {
|
||||
const raw = String(d.value || '').trim();
|
||||
if (!raw) continue;
|
||||
const value = normalizeCommunityValue(raw);
|
||||
map.set(value, {
|
||||
value,
|
||||
name: String(d.name || ''),
|
||||
description: String(d.description || ''),
|
||||
tags: Array.isArray(d.tags) ? d.tags : [],
|
||||
gatewayDefault: String(d.gatewayDefault || ''),
|
||||
color: String(d.color || ''),
|
||||
_external: false,
|
||||
});
|
||||
}
|
||||
// add unknown ones from usage
|
||||
for (const v of usedCommunities) {
|
||||
if (!map.has(v)) {
|
||||
map.set(v, { value: v, name: '', description: '', tags: [], gatewayDefault: '', color: '', _external: true });
|
||||
}
|
||||
}
|
||||
setItems(Array.from(map.values()));
|
||||
const rows = await listCommunities();
|
||||
const normalized = rows.map((item) => ({
|
||||
...item,
|
||||
value: normalizeCommunityValue(item.value),
|
||||
}));
|
||||
setItems(normalized);
|
||||
setError('');
|
||||
} catch (e) {
|
||||
console.error('Error fetching communities:', e);
|
||||
@@ -185,9 +164,7 @@ function CommunitiesManager() {
|
||||
const saveAll = async (data) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// не отправляем служебное поле _external
|
||||
const payload = data.map(({ _external, ...rest }) => rest);
|
||||
await api.post(`/communities`, { communities: payload });
|
||||
await saveCommunitiesData(data);
|
||||
setSuccess('Справочник сохранён!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (e) {
|
||||
@@ -212,10 +189,10 @@ function CommunitiesManager() {
|
||||
name: String(newItem.name || ''),
|
||||
description: String(newItem.description || ''),
|
||||
tags: toTagsArray(newItem.tags),
|
||||
gatewayDefault: String(newItem.gatewayDefault || ''),
|
||||
color: String(newItem.color || ''),
|
||||
icon: String(newItem.icon || ''),
|
||||
}]);
|
||||
setNewItem({ value: '', name: '', description: '', tags: '', gatewayDefault: '', color: '' });
|
||||
setNewItem({ value: '', name: '', description: '', tags: '', color: '', icon: '' });
|
||||
setAddModalOpen(false);
|
||||
setSuccess('Community успешно добавлен!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
@@ -228,8 +205,8 @@ function CommunitiesManager() {
|
||||
name: item.name || '',
|
||||
description: item.description || '',
|
||||
tags: fromTagsArray(item.tags),
|
||||
gatewayDefault: item.gatewayDefault || '',
|
||||
color: item.color || '',
|
||||
icon: item.icon || '',
|
||||
});
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
@@ -244,8 +221,8 @@ function CommunitiesManager() {
|
||||
name: String(editingDraft.name || ''),
|
||||
description: String(editingDraft.description || ''),
|
||||
tags: toTagsArray(editingDraft.tags),
|
||||
gatewayDefault: String(editingDraft.gatewayDefault || ''),
|
||||
color: String(editingDraft.color || ''),
|
||||
icon: String(editingDraft.icon || ''),
|
||||
} : i);
|
||||
setItems(next);
|
||||
setEditingValue(null);
|
||||
@@ -275,7 +252,7 @@ function CommunitiesManager() {
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
const text = window.prompt('Вставьте JSON-массив community (value, name, description, tags, gatewayDefault, color)');
|
||||
const text = window.prompt('Вставьте JSON-массив community (value, name, description, tags, color, icon)');
|
||||
if (!text) return;
|
||||
try {
|
||||
const arr = JSON.parse(text);
|
||||
@@ -292,13 +269,13 @@ function CommunitiesManager() {
|
||||
name: String(x.name || ''),
|
||||
description: String(x.description || ''),
|
||||
tags: Array.isArray(x.tags) ? x.tags : [],
|
||||
gatewayDefault: String(x.gatewayDefault || ''),
|
||||
color: String(x.color || ''),
|
||||
icon: String(x.icon || ''),
|
||||
});
|
||||
});
|
||||
return Array.from(map.values());
|
||||
});
|
||||
} catch (e) {
|
||||
} catch (_e) {
|
||||
setError('Неверный JSON.');
|
||||
}
|
||||
};
|
||||
@@ -315,6 +292,43 @@ function CommunitiesManager() {
|
||||
|
||||
const handleSave = () => saveAll(items);
|
||||
|
||||
const saveEvobgpConnection = () => {
|
||||
const trimmedUrl = String(evobgpUrlDraft || '').trim();
|
||||
if (!trimmedUrl) {
|
||||
try {
|
||||
window.localStorage.removeItem('evobgp_api_url');
|
||||
window.localStorage.removeItem('evobgp_api_token');
|
||||
} catch (_e) {
|
||||
setError('Не удалось очистить настройки в localStorage.');
|
||||
return;
|
||||
}
|
||||
setEvobgpUrlDraft('');
|
||||
setEvobgpTokenDraft('');
|
||||
setError('');
|
||||
setSuccess('Включён серверный прокси /api/evobgp (EVOBGP_API_URL и EVOBGP_API_TOKEN в контейнере).');
|
||||
fetchItems();
|
||||
setTimeout(() => setSuccess(''), 5000);
|
||||
return;
|
||||
}
|
||||
const norm = normalizeEvobgpApiBaseUrl(trimmedUrl);
|
||||
if (!norm) {
|
||||
setError('Укажите корректный URL EvoBGP (например http://192.168.0.1:8080). Порт — у API EvoBGP, не у этого интерфейса.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
window.localStorage.setItem('evobgp_api_url', norm);
|
||||
window.localStorage.setItem('evobgp_api_token', String(evobgpTokenDraft || '').trim());
|
||||
} catch (_e) {
|
||||
setError('Не удалось сохранить настройки в localStorage.');
|
||||
return;
|
||||
}
|
||||
setEvobgpUrlDraft(norm);
|
||||
setError('');
|
||||
setSuccess('Прямое подключение к EvoBGP из браузера сохранено. Загружаем данные…');
|
||||
fetchItems();
|
||||
setTimeout(() => setSuccess(''), 4000);
|
||||
};
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
const arr = [...items];
|
||||
arr.sort((a, b) => {
|
||||
@@ -350,315 +364,390 @@ function CommunitiesManager() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header d-print-none">
|
||||
<div className="container-xl">
|
||||
<div className="row g-2 align-items-center">
|
||||
<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>
|
||||
<PageHeader
|
||||
title="Справочник Community"
|
||||
icon={<IconFilter size={24} />}
|
||||
/>
|
||||
|
||||
<div className="card mb-3">
|
||||
<div className="card-header py-2 d-flex align-items-center justify-content-between">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<IconPlugConnected size={18} />
|
||||
<span className="fw-semibold">Подключение к EvoBGP API</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={() => setEvobgpSettingsOpen((o) => !o)}
|
||||
>
|
||||
{evobgpSettingsOpen ? 'Скрыть' : 'Настроить'}
|
||||
</button>
|
||||
</div>
|
||||
{evobgpSettingsOpen && (
|
||||
<div className="card-body">
|
||||
<p className="text-secondary small mb-3">
|
||||
<strong>По умолчанию</strong> запросы идут на внутренний прокси <code>/api/evobgp</code>: URL и токен задаются в{' '}
|
||||
<strong>переменных окружения контейнера</strong> — <code>EVOBGP_API_URL</code> и <code>EVOBGP_API_TOKEN</code>{' '}
|
||||
(без CORS). Ниже — только <strong>опциональное</strong> прямое подключение из браузера к EvoBGP; оставьте URL пустым и
|
||||
нажмите «Сохранить», чтобы снова использовать прокси.
|
||||
</p>
|
||||
<div className="row g-2 align-items-end">
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Прямой Base URL EvoBGP (необязательно)</label>
|
||||
<input
|
||||
type="url"
|
||||
className="form-control"
|
||||
placeholder="оставьте пустым для прокси"
|
||||
autoComplete="off"
|
||||
value={evobgpUrlDraft}
|
||||
onChange={(e) => setEvobgpUrlDraft(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-4">
|
||||
<label className="form-label">Токен (только для прямого режима)</label>
|
||||
<input
|
||||
type="password"
|
||||
className="form-control"
|
||||
placeholder="Bearer token"
|
||||
autoComplete="off"
|
||||
value={evobgpTokenDraft}
|
||||
onChange={(e) => setEvobgpTokenDraft(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-2">
|
||||
<button type="button" className="btn btn-primary w-100" onClick={saveEvobgpConnection}>
|
||||
Сохранить
|
||||
</button>
|
||||
</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>
|
||||
|
||||
{/* Уведомления */}
|
||||
{error && (
|
||||
<ErrorAlert message={error} onClose={() => setError('')} onRetry={fetchItems} />
|
||||
)}
|
||||
{success && (
|
||||
<div className="alert alert-success alert-dismissible" role="alert">
|
||||
<div className="d-flex">
|
||||
<div>
|
||||
<IconCheck className="icon alert-icon" />
|
||||
</div>
|
||||
<div>
|
||||
{success}
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Табы и кнопки в одной строке, единый стиль btn-primary */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<div className="btn-group" role="tablist" aria-label="Переключение режимов страницы">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${activeTab === 'list' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('list')}
|
||||
role="tab"
|
||||
aria-pressed={activeTab === 'list'}
|
||||
>
|
||||
<IconList size={16} className="me-1 d-none d-sm-inline" />
|
||||
Список
|
||||
<span
|
||||
className={`badge ms-1 ${
|
||||
activeTab === 'list'
|
||||
? 'bg-white text-primary'
|
||||
: 'bg-primary-lt text-primary'
|
||||
}`}
|
||||
>
|
||||
{filtered.length}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${activeTab === 'stats' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('stats')}
|
||||
role="tab"
|
||||
aria-pressed={activeTab === 'stats'}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Отображение списка communities */}
|
||||
{activeTab === 'list' && (
|
||||
<div className="card card-flat">
|
||||
<div className="card-header">
|
||||
<div className="row align-items-center w-100 g-2">
|
||||
<div className="col">
|
||||
<h3 className="card-title mb-0">
|
||||
<IconFilter className="icon me-2" size={20} />
|
||||
Список community
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setAddModalOpen(true)}
|
||||
>
|
||||
<IconPlus className="icon me-1" />
|
||||
Добавить community
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="d-flex gap-2 flex-wrap mb-3 align-items-center">
|
||||
<SavedFilters
|
||||
pageKey="communities"
|
||||
currentFilters={{ searchTerm, sortField, sortOrder }}
|
||||
onApplyFilter={(filters) => {
|
||||
if (filters.searchTerm !== undefined) setSearchTerm(filters.searchTerm);
|
||||
if (filters.sortField !== undefined) setSortField(filters.sortField);
|
||||
if (filters.sortOrder !== undefined) setSortOrder(filters.sortOrder);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-body">
|
||||
<div className="container-xl">
|
||||
{/* Уведомления */}
|
||||
{error && (
|
||||
<ErrorAlert message={error} onClose={() => setError('')} onRetry={fetchItems} />
|
||||
)}
|
||||
{success && (
|
||||
<div className="alert alert-success alert-dismissible" role="alert">
|
||||
<div className="d-flex">
|
||||
<div>
|
||||
<IconCheck className="icon alert-icon" />
|
||||
</div>
|
||||
<div>
|
||||
{success}
|
||||
</div>
|
||||
<div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
|
||||
<span className="input-icon-addon"><IconSearch size={18} /></span>
|
||||
<input
|
||||
className="form-control"
|
||||
placeholder="Поиск по value, названию, описанию и тегам"
|
||||
value={searchTerm}
|
||||
onChange={(e)=>{setSearchTerm(e.target.value); setCurrentPage(1);}}
|
||||
style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
|
||||
/>
|
||||
{!!searchTerm && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost-secondary btn-icon btn-sm"
|
||||
style={{ position: 'absolute', right: '0.25rem', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
|
||||
aria-label="Очистить поиск"
|
||||
onClick={()=>{ setSearchTerm(''); setCurrentPage(1); }}
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Вкладки: Список / Статистика в стиле Tabler */}
|
||||
<div className="card mb-3">
|
||||
<div className="card-header border-0 pb-0">
|
||||
<ul className="nav nav-tabs card-header-tabs" role="tablist">
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('list')}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTab === 'list'}
|
||||
>
|
||||
<IconList className="me-2" size={18} />
|
||||
Список communities
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
className={`nav-link ${activeTab === 'stats' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('stats')}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTab === 'stats'}
|
||||
>
|
||||
<IconChartBar className="me-2" size={18} />
|
||||
Статистика использования
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Отображение списка communities */}
|
||||
{activeTab === 'list' && (
|
||||
<div className="row g-3">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="row align-items-center w-100 g-2">
|
||||
<div className="col">
|
||||
<h3 className="card-title mb-0">
|
||||
<IconFilter className="icon me-2" size={20} />
|
||||
Список community
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setAddModalOpen(true)}
|
||||
>
|
||||
<IconPlus className="icon me-1" />
|
||||
Добавить community
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="d-flex gap-2 flex-wrap mb-3 align-items-center">
|
||||
<SavedFilters
|
||||
pageKey="communities"
|
||||
currentFilters={{ searchTerm, sortField, sortOrder }}
|
||||
onApplyFilter={(filters) => {
|
||||
if (filters.searchTerm !== undefined) setSearchTerm(filters.searchTerm);
|
||||
if (filters.sortField !== undefined) setSortField(filters.sortField);
|
||||
if (filters.sortOrder !== undefined) setSortOrder(filters.sortOrder);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
<div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
|
||||
<span className="input-icon-addon"><IconSearch size={18} /></span>
|
||||
<input
|
||||
className="form-control"
|
||||
placeholder="Поиск по value, названию, описанию и тегам"
|
||||
value={searchTerm}
|
||||
onChange={(e)=>{setSearchTerm(e.target.value); setCurrentPage(1);}}
|
||||
style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
|
||||
/>
|
||||
{!!searchTerm && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost-secondary btn-icon btn-sm"
|
||||
style={{ position: 'absolute', right: '0.25rem', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
|
||||
aria-label="Очистить поиск"
|
||||
onClick={()=>{ setSearchTerm(''); setCurrentPage(1); }}
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-3 flex-wrap">
|
||||
<label className="form-check form-switch mb-0 d-flex align-items-center gap-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={showOnlyUsedInFilters}
|
||||
onChange={(e) => { setShowOnlyUsedInFilters(e.target.checked); setCurrentPage(1); }}
|
||||
/>
|
||||
<span className="form-check-label">Только используемые в фильтрах</span>
|
||||
{filterUsageLoading && (
|
||||
<span className="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
|
||||
)}
|
||||
</label>
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
type="button"
|
||||
onClick={fetchFilterUsage}
|
||||
disabled={filterUsageLoading}
|
||||
title="Обновить использование из /filters"
|
||||
>
|
||||
<IconRefresh className="icon me-1" size={16} />
|
||||
Обновить использование
|
||||
</button>
|
||||
{filterUsageError && (
|
||||
<span className="text-danger small">{filterUsageError}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="cursor-pointer user-select-none" onClick={()=>changeSort('value')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconHash size={16} className="me-1 text-muted" />
|
||||
Value
|
||||
{sortField==='value' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder==='asc' ? <IconSortAscending size={14} /> : <IconSortDescending size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={()=>changeSort('name')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconFilter size={16} className="me-1 text-muted" />
|
||||
Название
|
||||
{sortField==='name' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder==='asc' ? <IconSortAscending size={14} /> : <IconSortDescending size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th>Описание</th>
|
||||
<th>Теги</th>
|
||||
<th>Gateway</th>
|
||||
<th style={{ width: '10%' }}>Исп. в фильтрах</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="text-center text-muted py-4">Загрузка...</td></tr>
|
||||
) : paginated.length === 0 ? (
|
||||
<tr><td colSpan={7} className="text-center text-muted py-4">
|
||||
<EmptyState
|
||||
title="Нет community"
|
||||
description="Добавьте запись, чтобы начать."
|
||||
action={
|
||||
<button className="btn btn-primary" onClick={() => setAddModalOpen(true)}>
|
||||
<IconPlus className="me-2" />
|
||||
Добавить
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</td></tr>
|
||||
) : paginated.map((item) => {
|
||||
const usageCount = filterUsage[item.value] || 0;
|
||||
return (
|
||||
<tr key={item.value}>
|
||||
<td>
|
||||
<code className="text-blue">{item.value}</code>
|
||||
{item._external && (
|
||||
<span className="badge bg-yellow-lt text-yellow ms-2" title="Не внесён в справочник">не в справ.</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{item.name || <span className="text-muted">—</span>}</td>
|
||||
<td>
|
||||
<span className="text-muted" title={item.description}>{item.description || '—'}</span>
|
||||
</td>
|
||||
<td>
|
||||
{(item.tags || []).map(t => (
|
||||
<span key={t} className="badge bg-blue-lt text-blue me-1">{t}</span>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
<span className="text-muted">{item.gatewayDefault || '—'}</span>
|
||||
</td>
|
||||
<td>
|
||||
{usageCount > 0 ? (
|
||||
<span className="badge bg-blue-lt text-blue">{usageCount} в фильтрах</span>
|
||||
) : (
|
||||
<span className="text-muted">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="btn-list">
|
||||
<a
|
||||
className="btn btn-outline-primary btn-icon btn-sm"
|
||||
href={`/filters?community=${encodeURIComponent(item.value)}`}
|
||||
title="Открыть в /filters с поиском по community"
|
||||
>
|
||||
<IconLink size={16} />
|
||||
</a>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-icon btn-sm"
|
||||
onClick={()=>startEdit(item)}
|
||||
title="Редактировать"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger btn-icon btn-sm"
|
||||
onClick={()=>handleDeleteClick(item)}
|
||||
title="Удалить"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
totalItems={filtered.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
<div className="d-flex align-items-center gap-3 flex-wrap">
|
||||
<label className="form-check form-switch mb-0 d-flex align-items-center gap-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={showOnlyUsedInFilters}
|
||||
onChange={(e) => { setShowOnlyUsedInFilters(e.target.checked); setCurrentPage(1); }}
|
||||
/>
|
||||
<span className="form-check-label">Только используемые в фильтрах</span>
|
||||
{filterUsageLoading && (
|
||||
<span className="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
type="button"
|
||||
onClick={fetchFilterUsage}
|
||||
disabled={filterUsageLoading}
|
||||
title="Обновить использование из /filters"
|
||||
>
|
||||
<IconRefresh className="icon me-1" size={16} />
|
||||
Обновить использование
|
||||
</button>
|
||||
{filterUsageError && (
|
||||
<span className="text-danger small">{filterUsageError}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '8%' }}>Иконка</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={()=>changeSort('value')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconHash size={16} className="me-1 text-muted" />
|
||||
Value
|
||||
{sortField==='value' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder==='asc' ? <IconSortAscending size={14} /> : <IconSortDescending size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={()=>changeSort('name')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconFilter size={16} className="me-1 text-muted" />
|
||||
Название
|
||||
{sortField==='name' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder==='asc' ? <IconSortAscending size={14} /> : <IconSortDescending size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th>Описание</th>
|
||||
<th>Теги</th>
|
||||
<th style={{ width: '10%' }}>Исп. в фильтрах</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="text-center text-muted py-4">Загрузка...</td></tr>
|
||||
) : paginated.length === 0 ? (
|
||||
<tr><td colSpan={7} className="text-center text-muted py-4">
|
||||
<EmptyState
|
||||
title="Нет community"
|
||||
description="Добавьте запись, чтобы начать."
|
||||
action={
|
||||
<button className="btn btn-primary" onClick={() => setAddModalOpen(true)}>
|
||||
<IconPlus className="me-2" />
|
||||
Добавить
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</td></tr>
|
||||
) : paginated.map((item) => {
|
||||
const usageCount = filterUsage[item.value] || 0;
|
||||
const iconInfo = item.icon ? getIconById(item.icon) : null;
|
||||
return (
|
||||
<tr key={item.value}>
|
||||
<td>
|
||||
{iconInfo ? (
|
||||
<span className="avatar avatar-sm bg-blue-lt text-blue border">
|
||||
<iconInfo.Icon size={20} stroke={1.5} />
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<code className="text-blue">{item.value}</code>
|
||||
{item._external && (
|
||||
<span className="badge bg-yellow-lt text-yellow ms-2" title="Не внесён в справочник">не в справ.</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{item.name || <span className="text-muted">—</span>}</td>
|
||||
<td>
|
||||
<span className="text-muted" title={item.description}>{item.description || '—'}</span>
|
||||
</td>
|
||||
<td>
|
||||
{(item.tags || []).map(t => (
|
||||
<span key={t} className="badge bg-blue-lt text-blue me-1">{t}</span>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{usageCount > 0 ? (
|
||||
<span className="badge bg-blue-lt text-blue">{usageCount} в фильтрах</span>
|
||||
) : (
|
||||
<span className="text-muted">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="btn-list">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-icon btn-sm"
|
||||
onClick={()=>startEdit(item)}
|
||||
title="Редактировать"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger btn-icon btn-sm"
|
||||
onClick={()=>handleDeleteClick(item)}
|
||||
title="Удалить"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
totalItems={filtered.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Отображение статистики communities */}
|
||||
{activeTab === 'stats' && (
|
||||
<CommunityStats communities={items} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Отображение статистики communities */}
|
||||
{activeTab === 'stats' && (
|
||||
<CommunityStats communities={items} />
|
||||
)}
|
||||
{/* Модальное окно добавления */}
|
||||
<FormModal
|
||||
show={addModalOpen}
|
||||
onClose={() => {
|
||||
setAddModalOpen(false);
|
||||
setNewItem({ value: '', name: '', description: '', tags: '', gatewayDefault: '', color: '' });
|
||||
setNewItem({ value: '', name: '', description: '', tags: '', color: '', icon: '' });
|
||||
setError('');
|
||||
}}
|
||||
onSubmit={addItem}
|
||||
@@ -719,14 +808,6 @@ function CommunitiesManager() {
|
||||
helpText="Разделяйте теги запятыми"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
label="Gateway по умолчанию"
|
||||
name="gatewayDefault"
|
||||
value={newItem.gatewayDefault}
|
||||
onChange={(val) => setNewItem({...newItem, gatewayDefault: val})}
|
||||
placeholder="SWE-HIPHOST"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
label="Цвет бейджа (опционально)"
|
||||
name="color"
|
||||
@@ -735,6 +816,12 @@ function CommunitiesManager() {
|
||||
placeholder="blue, green, red ..."
|
||||
helpText="Цвет для отображения бейджа в интерфейсе"
|
||||
/>
|
||||
<IconPicker
|
||||
value={newItem.icon}
|
||||
onChange={(id) => setNewItem({...newItem, icon: id})}
|
||||
label="Иконка бренда (опционально)"
|
||||
allowNone
|
||||
/>
|
||||
</FormModal>
|
||||
|
||||
{/* Модальное окно редактирования */}
|
||||
@@ -801,14 +888,6 @@ function CommunitiesManager() {
|
||||
helpText="Разделяйте теги запятыми"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
label="Gateway по умолчанию"
|
||||
name="gatewayDefault"
|
||||
value={editingDraft.gatewayDefault}
|
||||
onChange={(val) => setEditingDraft({...editingDraft, gatewayDefault: val})}
|
||||
placeholder="SWE-HIPHOST"
|
||||
/>
|
||||
|
||||
<FormField
|
||||
label="Цвет бейджа (опционально)"
|
||||
name="color"
|
||||
@@ -817,6 +896,12 @@ function CommunitiesManager() {
|
||||
placeholder="blue, green, red ..."
|
||||
helpText="Цвет для отображения бейджа в интерфейсе"
|
||||
/>
|
||||
<IconPicker
|
||||
value={editingDraft.icon}
|
||||
onChange={(id) => setEditingDraft({...editingDraft, icon: id})}
|
||||
label="Иконка бренда (опционально)"
|
||||
allowNone
|
||||
/>
|
||||
</FormModal>
|
||||
|
||||
{/* Модальное окно подтверждения удаления */}
|
||||
|
||||
+281
-31
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import api from './lib/api.js';
|
||||
import { formatDateTime } from './lib/datetime.js';
|
||||
@@ -15,21 +15,30 @@ import {
|
||||
IconFilter,
|
||||
IconDownload,
|
||||
IconCreditCard,
|
||||
IconSearch
|
||||
IconSearch,
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
IconBell,
|
||||
IconCpu,
|
||||
IconDeviceDesktop,
|
||||
IconDatabase,
|
||||
IconServerOff,
|
||||
} from '@tabler/icons-react';
|
||||
import { getIconById } from './lib/brandIcons.js';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
||||
import TopNStats from './components/TopNStats.jsx';
|
||||
import TrendIndicator from './components/TrendIndicator.jsx';
|
||||
import LastSaved from './components/LastSaved.jsx';
|
||||
import Tooltip from './components/Tooltip.jsx';
|
||||
import Sparkline from './components/Sparkline.jsx';
|
||||
import { useAlerts } from './contexts/AlertsContext.jsx';
|
||||
|
||||
function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
|
||||
function StatCard({ icon: _Icon, color, value, title, subtitle, to, trend, previousValue }) {
|
||||
return (
|
||||
<div className="card h-100 position-relative card-hover">
|
||||
<div className="card-body d-flex align-items-center">
|
||||
<span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
|
||||
<Icon size={32} />
|
||||
<_Icon size={32} />
|
||||
</span>
|
||||
<div className="flex-grow-1">
|
||||
<div className="d-flex align-items-baseline gap-2 mb-1">
|
||||
@@ -55,12 +64,12 @@ function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previo
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ title, value, icon: Icon, color, description }) {
|
||||
function MetricCard({ title, value, icon: _Icon, color, description }) {
|
||||
return (
|
||||
<div className="card h-100 position-relative">
|
||||
<div className="card-body d-flex align-items-center">
|
||||
<span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
|
||||
<Icon size={32} />
|
||||
<_Icon size={32} />
|
||||
</span>
|
||||
<div className="flex-grow-1">
|
||||
<div className="h3 mb-0 fw-bold">
|
||||
@@ -75,7 +84,115 @@ 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>
|
||||
);
|
||||
}
|
||||
|
||||
const ALERT_ICONS = {
|
||||
server_offline: IconServerOff,
|
||||
mikrotik_unreachable: IconServerOff,
|
||||
high_cpu: IconCpu,
|
||||
high_ram: IconDeviceDesktop,
|
||||
high_hdd: IconDatabase,
|
||||
};
|
||||
|
||||
function Dashboard() {
|
||||
const { alerts, loading: alertsLoading, refresh: refreshAlerts } = useAlerts();
|
||||
// Глобальный поиск удалён по требованию UX
|
||||
const [stats, setStats] = useState({
|
||||
domainsCount: null,
|
||||
@@ -93,20 +210,28 @@ function Dashboard() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = 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(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
|
||||
async function fetchStats() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
// Загружаем данные с обработкой ошибок для каждого endpoint
|
||||
const opts = { signal };
|
||||
const results = await Promise.allSettled([
|
||||
api.get('/domains-new', { params: { countOnly: true } }),
|
||||
api.get('/ip-ranges', { params: { countOnly: true } }),
|
||||
api.get('/asns', { params: { countOnly: true } }),
|
||||
api.get('/servers'),
|
||||
api.get('/servers/availability', { params: { ttlSeconds: 60 } }),
|
||||
api.get('/s3/last-modified')
|
||||
api.get('/domains-new', { params: { countOnly: true }, ...opts }),
|
||||
api.get('/ip-ranges', { params: { countOnly: true }, ...opts }),
|
||||
api.get('/asns', { params: { countOnly: true }, ...opts }),
|
||||
api.get('/servers', opts),
|
||||
api.get('/servers/availability', { params: { ttlSeconds: 60 }, ...opts }),
|
||||
api.get('/s3/last-modified', opts)
|
||||
]);
|
||||
|
||||
// Обрабатываем результаты
|
||||
@@ -171,6 +296,7 @@ function Dashboard() {
|
||||
console.warn('Некоторые API недоступны:', errors.map(e => e.reason?.message));
|
||||
}
|
||||
} catch (e) {
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
console.error('Критическая ошибка загрузки статистики:', e);
|
||||
setError('Не удалось загрузить статистику');
|
||||
setStats({
|
||||
@@ -189,6 +315,44 @@ function Dashboard() {
|
||||
}
|
||||
}
|
||||
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) {
|
||||
@@ -206,18 +370,14 @@ function Dashboard() {
|
||||
{/* Заголовок страницы */}
|
||||
<PageHeader
|
||||
title="Панель"
|
||||
pretitle={(
|
||||
<Breadcrumbs items={[
|
||||
{ label: 'Главная' },
|
||||
]} />
|
||||
)}
|
||||
icon={<IconCloud size={24} />}
|
||||
actions={(
|
||||
<div className="d-flex align-items-center gap-3">
|
||||
<div className="header-actions d-flex align-items-center flex-wrap gap-2 gap-sm-3">
|
||||
{lastFetchTime && (
|
||||
<LastSaved timestamp={lastFetchTime} variant="compact" />
|
||||
)}
|
||||
<Tooltip content="Обновить данные" shortcut="⌘R">
|
||||
<button className="btn btn-outline-primary" onClick={() => window.location.reload()}>
|
||||
<button className="btn btn-outline-primary btn-sm" onClick={() => window.location.reload()}>
|
||||
<IconRefresh className="me-2" /> Обновить
|
||||
</button>
|
||||
</Tooltip>
|
||||
@@ -225,9 +385,99 @@ function Dashboard() {
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Основные метрики */}
|
||||
{/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
|
||||
<div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
|
||||
<h3 className="mb-0">Пинг сервисов</h3>
|
||||
<Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-primary btn-sm w-100 w-sm-auto"
|
||||
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">
|
||||
<div className="col-md-3">
|
||||
{pingServicesConfig.map((config) => (
|
||||
<div
|
||||
key={config.id}
|
||||
className={expandedPingId === config.id ? 'col-12' : 'col-12 col-sm-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="mb-4">
|
||||
<div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
|
||||
<h3 className="mb-0 d-flex align-items-center gap-2">
|
||||
<IconBell size={24} />
|
||||
Активные оповещения
|
||||
{alerts.length > 0 && (
|
||||
<span className="badge bg-danger rounded-pill">{alerts.length}</span>
|
||||
)}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => refreshAlerts()}
|
||||
disabled={alertsLoading}
|
||||
>
|
||||
<IconRefresh className={alertsLoading ? 'spin me-1' : 'me-1'} size={16} />
|
||||
Обновить
|
||||
</button>
|
||||
</div>
|
||||
{alerts.length === 0 && !alertsLoading && (
|
||||
<div className="card">
|
||||
<div className="card-body text-center text-muted py-4">
|
||||
Нет активных оповещений
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{alerts.length > 0 && (
|
||||
<div className="card">
|
||||
<div className="list-group list-group-flush">
|
||||
{alerts.map((alert) => {
|
||||
const Icon = ALERT_ICONS[alert.type] || IconAlertTriangle;
|
||||
return (
|
||||
<Link
|
||||
key={alert.id}
|
||||
to={alert.link || '/resource-stats'}
|
||||
className="list-group-item list-group-item-action d-flex align-items-center gap-3"
|
||||
>
|
||||
<span className={`avatar avatar-sm flex-shrink-0 bg-${alert.severity === 'critical' ? 'danger' : 'warning'}-lt text-${alert.severity === 'critical' ? 'danger' : 'warning'}`}>
|
||||
<Icon size={20} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-grow-1">
|
||||
<div className="fw-semibold">{alert.title}</div>
|
||||
<div className="text-muted small">{alert.description}</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Основные метрики */}
|
||||
<div className="row g-2 g-md-3 mb-4">
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="animate-in">
|
||||
<StatCard
|
||||
icon={IconWorld}
|
||||
@@ -241,7 +491,7 @@ function Dashboard() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="animate-in" style={{animationDelay: '0.1s'}}>
|
||||
<StatCard
|
||||
icon={IconNetwork}
|
||||
@@ -255,7 +505,7 @@ function Dashboard() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="animate-in" style={{animationDelay: '0.2s'}}>
|
||||
<StatCard
|
||||
icon={IconNetwork}
|
||||
@@ -269,7 +519,7 @@ function Dashboard() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="col-6 col-lg-3">
|
||||
<div className="animate-in" style={{animationDelay: '0.3s'}}>
|
||||
<StatCard
|
||||
icon={IconServer}
|
||||
@@ -286,8 +536,8 @@ function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* Дополнительные метрики */}
|
||||
<div className="row g-3 mb-4 justify-content-center">
|
||||
<div className="col-sm-6 col-md-3">
|
||||
<div className="row g-2 g-md-3 mb-4 justify-content-center">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<MetricCard
|
||||
title="Стран"
|
||||
value={loading ? '...' : stats.countriesCount ?? '—'}
|
||||
@@ -296,7 +546,7 @@ function Dashboard() {
|
||||
description="Географическое покрытие"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-3">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<MetricCard
|
||||
title="Провайдеров"
|
||||
value={loading ? '...' : stats.providersCount ?? '—'}
|
||||
@@ -305,7 +555,7 @@ function Dashboard() {
|
||||
description="Облачные провайдеры"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-3">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<MetricCard
|
||||
title="Онлайн серверов"
|
||||
value={loading ? '...' : `${stats.onlineServers ?? '—'}/${stats.totalServers ?? '—'}`}
|
||||
@@ -314,7 +564,7 @@ function Dashboard() {
|
||||
description="Активные серверы"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-3">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<MetricCard
|
||||
title="Последнее обновление"
|
||||
value={loading ? '...' : (stats.lastModified ? stats.lastModified : '—')}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import {
|
||||
IconPlus,
|
||||
@@ -39,11 +39,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
const pageSize = 10;
|
||||
const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, [entityKey]);
|
||||
|
||||
const fetchItems = async () => {
|
||||
const fetchItems = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get(`/${entityKey}`);
|
||||
@@ -55,7 +51,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [entityKey, entityName]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, [fetchItems]);
|
||||
|
||||
const handleAddItem = () => {
|
||||
if (newItem.domain.trim() === '') {
|
||||
@@ -212,8 +212,8 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="row g-2 g-lg-3">
|
||||
<div className="col-12 col-lg-4">
|
||||
{/* Add New Item Card */}
|
||||
<div className="card card-md">
|
||||
<div className="card-header">
|
||||
@@ -333,11 +333,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8">
|
||||
<div className="col-12 col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-header d-flex justify-content-between align-items-center">
|
||||
<div className="card-header d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center gap-2">
|
||||
<h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3>
|
||||
<div className="d-flex gap-2 w-50">
|
||||
<div className="d-flex flex-wrap gap-2 flex-grow-1 flex-md-grow-0">
|
||||
{/* Фильтр по шлюзу */}
|
||||
<select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
|
||||
<option value="">Все шлюзы</option>
|
||||
|
||||
+314
-435
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import CommunityAutocompleteInput from './components/CommunityAutocompleteInput.jsx';
|
||||
import CommunityBadge from './components/CommunityBadge.jsx';
|
||||
@@ -29,9 +29,7 @@ import {
|
||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import Breadcrumbs from './components/Breadcrumbs.jsx';
|
||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||
import S3MetaBar from './components/S3MetaBar.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||
@@ -47,35 +45,42 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||
import FormField from './components/FormField.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';
|
||||
|
||||
const API_URL = '/api';
|
||||
import {
|
||||
listCommunities,
|
||||
fetchDomainsData,
|
||||
saveDomainsData,
|
||||
} from './lib/evobgpData.js';
|
||||
|
||||
function DomainsNewManager() {
|
||||
const toast = useToast();
|
||||
const [items, setItems] = useState([]);
|
||||
const [originalItems, setOriginalItems] = useState([]);
|
||||
const [etag, setEtag] = useState('');
|
||||
const [, setEtag] = useState('');
|
||||
const [lastModified, setLastModified] = useState('');
|
||||
const [contentLength, setContentLength] = useState(null);
|
||||
const [, setContentLength] = useState(null);
|
||||
const [newItem, setNewItem] = useState({ domain: '', community: '' });
|
||||
const [newInvalid, setNewInvalid] = useState({ domain: false, community: false });
|
||||
const [, setNewInvalid] = useState({ domain: false, community: false });
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const searchTimer = useRef(null);
|
||||
const _searchTimer = useRef(null);
|
||||
const didInit = useRef(false);
|
||||
const [editingDomain, setEditingDomain] = useState(null);
|
||||
const [editingValue, setEditingValue] = useState('');
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
const [itemBeingEdited, setItemBeingEdited] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [itemToDelete, setItemToDelete] = useState(null);
|
||||
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [sortField, setSortField] = useState('domain');
|
||||
const [sortOrder, setSortOrder] = useState('asc');
|
||||
const [filterCommunity, setFilterCommunity] = useState('');
|
||||
const editInputRef = useRef(null);
|
||||
const pageSize = 10;
|
||||
|
||||
// Bulk operations
|
||||
@@ -84,14 +89,25 @@ function DomainsNewManager() {
|
||||
// Справочник community для подсказок
|
||||
const [communities, setCommunities] = useState([]);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/communities`);
|
||||
setCommunities(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (e) {
|
||||
// тихо игнорируем
|
||||
const list = await listCommunities();
|
||||
setCommunities(list);
|
||||
} catch (err) {
|
||||
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||
}
|
||||
})();
|
||||
(async () => {
|
||||
try {
|
||||
const r = await api.get('/ws/url', { signal });
|
||||
setWsUrl(String(r.data?.url || ''));
|
||||
} catch (err) {
|
||||
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||
}
|
||||
})();
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);
|
||||
@@ -108,68 +124,79 @@ function DomainsNewManager() {
|
||||
const [wsOpen, setWsOpen] = useState(false);
|
||||
const [wsUrl, setWsUrl] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
(async () => { try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {} })();
|
||||
}, []);
|
||||
|
||||
const fetchItems = async () => {
|
||||
const fetchItems = useCallback(async (_abortSignal) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
|
||||
const payload = Array.isArray(response.data?.items) ? response.data.items : [];
|
||||
const payload = await fetchDomainsData();
|
||||
const total = payload.length;
|
||||
setItems(payload);
|
||||
setOriginalItems(payload);
|
||||
setTotalItems(Number.isFinite(total) ? total : 0);
|
||||
setEtag(response.headers?.etag || '');
|
||||
setLastModified(response.headers?.['last-modified'] || '');
|
||||
const lengthHeader = response.headers?.['content-length-source'];
|
||||
setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
|
||||
setEtag('');
|
||||
setLastModified(new Date().toISOString());
|
||||
setContentLength(null);
|
||||
setError('');
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error fetching domains-new:', error);
|
||||
setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Подгрузка при изменении страницы/поиска/фильтра
|
||||
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();
|
||||
}
|
||||
}, [fetchItems]);
|
||||
|
||||
const handleAddItem = () => {
|
||||
const domainOk = isValidDomain(newItem.domain);
|
||||
const communityOk = isValidCommunity(newItem.community);
|
||||
setNewInvalid({ domain: !domainOk, community: !communityOk });
|
||||
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);
|
||||
|
||||
if (!domainOk || !communityOk) {
|
||||
setError('Заполните корректный домен (example.com) и числовой community.');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setItems([...items, { domain: newItem.domain.trim().toLowerCase(), community: String(newItem.community).trim() }]);
|
||||
setNewItem({ domain: '', community: '' });
|
||||
const newDomain = { domain: domain.trim().toLowerCase(), community: String(community).trim() };
|
||||
setItems([...items, newDomain]);
|
||||
if (!item) setNewItem({ domain: '', community: '' }); // Сброс только если не из модалки
|
||||
setNewInvalid({ domain: false, community: false });
|
||||
};
|
||||
|
||||
const handleEdit = (item) => {
|
||||
setEditingDomain(item.domain);
|
||||
setItemBeingEdited(item);
|
||||
setEditingValue(item.community);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSaveEdit = (domainName) => {
|
||||
const handleSaveEdit = () => {
|
||||
if (!itemBeingEdited) return;
|
||||
if (!isValidCommunity(editingValue)) {
|
||||
setError('Community должен быть числом.');
|
||||
return;
|
||||
}
|
||||
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);
|
||||
setEditingDomain(null);
|
||||
setEditModalOpen(false);
|
||||
setItemBeingEdited(null);
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingDomain(null);
|
||||
setEditModalOpen(false);
|
||||
setItemBeingEdited(null);
|
||||
};
|
||||
|
||||
const handleDeleteItem = (domainNameToDelete) => {
|
||||
@@ -246,27 +273,7 @@ function DomainsNewManager() {
|
||||
setShowDiff(true);
|
||||
};
|
||||
|
||||
const handleSaveChanges = async () => {
|
||||
// подготовим diff и спросим подтверждение только при массовых изменениях (>10)
|
||||
const valid = items.filter(i => i != null && isValidDomain(i.domain) && isValidCommunity(i.community))
|
||||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||||
const unique = deduplicate(valid);
|
||||
const diffData = computeDiff(originalItems, unique);
|
||||
setDiff(diffData);
|
||||
|
||||
// Умное подтверждение: показываем модалку только при массовых изменениях
|
||||
const totalChanges = (diffData.added?.length || 0) + (diffData.removed?.length || 0) + (diffData.changed?.length || 0);
|
||||
|
||||
if (totalChanges > 10) {
|
||||
// Массовое изменение - требуется подтверждение
|
||||
setConfirmSaveOpen(true);
|
||||
} else {
|
||||
// Малое изменение - сохраняем сразу
|
||||
performSave();
|
||||
}
|
||||
};
|
||||
|
||||
const performSave = async () => {
|
||||
const performSave = useCallback(async () => {
|
||||
setConfirmSaveOpen(false);
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -274,30 +281,8 @@ function DomainsNewManager() {
|
||||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||||
const unique = deduplicate(valid);
|
||||
|
||||
// Подгружаем весь список, применяем изменения текущей страницы и сохраняем полные данные
|
||||
const fullRes = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
|
||||
const full = Array.isArray(fullRes.data?.items) ? fullRes.data.items : (Array.isArray(fullRes.data) ? fullRes.data : []);
|
||||
const fullMap = new Map(full.filter(i => i != null).map(i => [String(i.domain || '').trim().toLowerCase(), { domain: String(i.domain || '').trim().toLowerCase(), community: String(i.community || '').trim() }]));
|
||||
const originalPageMap = new Map(originalItems.map(i => [String(i.domain).trim().toLowerCase(), true]));
|
||||
const uniqueMap = new Map(unique.map(i => [String(i.domain).trim().toLowerCase(), { domain: String(i.domain).trim().toLowerCase(), community: String(i.community).trim() }]));
|
||||
// Удаления: всё, что было на странице, но отсутствует в изменённом наборе
|
||||
for (const key of originalPageMap.keys()) {
|
||||
if (!uniqueMap.has(key)) fullMap.delete(key);
|
||||
}
|
||||
// Добавления/изменения
|
||||
for (const [key, val] of uniqueMap.entries()) fullMap.set(key, val);
|
||||
const fullToSave = Array.from(fullMap.values());
|
||||
|
||||
const et = fullRes?.headers?.etag || etag;
|
||||
const response = await api.post(`/domains-new`, { domains: fullToSave, etag: et }, { validateStatus: () => true });
|
||||
if (response.status === 412) {
|
||||
setError('Данные изменились в S3 (ETag mismatch). Обновите список и попробуйте снова.');
|
||||
return;
|
||||
}
|
||||
if (response.status >= 400) {
|
||||
throw new Error(`Save failed with status ${response.status}`);
|
||||
}
|
||||
setEtag(response.headers?.etag || et);
|
||||
await saveDomainsData(unique, originalItems);
|
||||
setEtag('');
|
||||
// После сохранения перезагрузим текущую страницу для консистентности
|
||||
await fetchItems();
|
||||
setSuccess('Изменения успешно сохранены!');
|
||||
@@ -309,10 +294,24 @@ function DomainsNewManager() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [items, originalItems, fetchItems]);
|
||||
|
||||
const handleSaveChanges = useCallback(async () => {
|
||||
const valid = items.filter(i => i != null && isValidDomain(i.domain) && isValidCommunity(i.community))
|
||||
.map(i => ({ domain: i.domain.trim().toLowerCase(), community: String(i.community).trim() }));
|
||||
const unique = deduplicate(valid);
|
||||
const diffData = computeDiff(originalItems, unique);
|
||||
setDiff(diffData);
|
||||
const totalChanges = (diffData.added?.length || 0) + (diffData.removed?.length || 0) + (diffData.changed?.length || 0);
|
||||
if (totalChanges > 10) {
|
||||
setConfirmSaveOpen(true);
|
||||
} else {
|
||||
performSave();
|
||||
}
|
||||
}, [items, originalItems, performSave]);
|
||||
|
||||
// Drag&Drop импорт
|
||||
const onDropImport = async (e) => {
|
||||
const _onDropImport = async (e) => {
|
||||
e.preventDefault();
|
||||
const file = e.dataTransfer?.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -339,9 +338,7 @@ function DomainsNewManager() {
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const effectiveQ = searchTerm ? searchTerm : (filterCommunity ? filterCommunity : '');
|
||||
const response = await api.get(`/domains-new`, { params: { q: effectiveQ, offset: 0, limit: 0, format: 'std' } });
|
||||
const all = Array.isArray(response.data?.items) ? response.data.items : (Array.isArray(response.data) ? response.data : []);
|
||||
const all = filtered;
|
||||
const header = ['domain', 'community'];
|
||||
const csv = [header, ...all.filter(i => i != null).map(i => [i.domain || '', i.community || ''])]
|
||||
.map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
|
||||
@@ -419,13 +416,6 @@ function DomainsNewManager() {
|
||||
}
|
||||
};
|
||||
|
||||
// Улучшенный инлайн-редакт
|
||||
useEffect(() => {
|
||||
if (editingDomain && editInputRef.current) {
|
||||
editInputRef.current.focus();
|
||||
}
|
||||
}, [editingDomain]);
|
||||
|
||||
// Глобальные хоткеи: Ctrl+S — сохранить изменения
|
||||
useEffect(() => {
|
||||
const onKey = (e) => {
|
||||
@@ -436,11 +426,17 @@ function DomainsNewManager() {
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
|
||||
}, [loading, handleSaveChanges]);
|
||||
|
||||
const handleEditKeyDown = (e, domainName) => {
|
||||
if (e.key === 'Enter') handleSaveEdit(domainName);
|
||||
if (e.key === 'Escape') handleCancelEdit();
|
||||
const handleEditKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleSaveEdit();
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
handleCancelEdit();
|
||||
}
|
||||
};
|
||||
|
||||
// Bulk operations handlers
|
||||
@@ -507,180 +503,54 @@ function DomainsNewManager() {
|
||||
|
||||
<PageHeader
|
||||
title="Домены"
|
||||
pretitle={(
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Главная', to: '/dashboard' },
|
||||
{ label: 'Данные' },
|
||||
{ label: 'Домены', count: filtered.length },
|
||||
]}
|
||||
showBack={false}
|
||||
filterInfo={filterCommunity ? `Community: ${filterCommunity}` : (searchTerm ? `Поиск: "${searchTerm}"` : null)}
|
||||
count={filtered.length}
|
||||
/>
|
||||
)}
|
||||
icon={<IconWorld size={24} />}
|
||||
meta={<LastSaved timestamp={lastModified} variant="compact" />}
|
||||
actions={(
|
||||
<PageHeaderActions
|
||||
loading={loading}
|
||||
onPreview={handlePreviewDiff}
|
||||
disablePreview={loading || items.length === 0}
|
||||
onRefresh={fetchItems}
|
||||
disableRefresh={loading}
|
||||
onImport={handleImport}
|
||||
onExport={handleExport}
|
||||
disableExport={items.length === 0}
|
||||
onClear={clearInvalid}
|
||||
disableClear={items.length === 0}
|
||||
onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
|
||||
disableClearCommunities={items.length === 0 || !filterCommunity}
|
||||
onSave={handleSaveChanges}
|
||||
disableSave={loading}
|
||||
onHistory={() => setHistoryOpen(true)}
|
||||
onOnlineUpdate={() => setWsOpen(true)}
|
||||
onBackgroundUpdate={async () => {
|
||||
try {
|
||||
const res = await fetch('/api/update-bgp/background', { method: 'POST' });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok || data.ok === false) {
|
||||
throw new Error(data?.message || `HTTP ${res.status}`);
|
||||
}
|
||||
notifyMutationSuccess('Фоновое обновление запущено', data);
|
||||
} catch (e) {
|
||||
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
|
||||
loading={loading}
|
||||
onPreview={handlePreviewDiff}
|
||||
disablePreview={loading || items.length === 0}
|
||||
onRefresh={fetchItems}
|
||||
disableRefresh={loading}
|
||||
onImport={handleImport}
|
||||
onExport={handleExport}
|
||||
disableExport={items.length === 0}
|
||||
onClear={clearInvalid}
|
||||
disableClear={items.length === 0}
|
||||
onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
|
||||
disableClearCommunities={items.length === 0 || !filterCommunity}
|
||||
onSave={handleSaveChanges}
|
||||
disableSave={loading}
|
||||
onHistory={() => setHistoryOpen(true)}
|
||||
lastModified={lastModified}
|
||||
onOnlineUpdate={() => setWsOpen(true)}
|
||||
onBackgroundUpdate={async () => {
|
||||
try {
|
||||
const res = await fetch('/api/update-bgp/background', { method: 'POST' });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok || data.ok === false) {
|
||||
throw new Error(data?.message || `HTTP ${res.status}`);
|
||||
}
|
||||
}}
|
||||
notifyMutationSuccess('Фоновое обновление запущено', data);
|
||||
} catch (e) {
|
||||
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<AddItemModal
|
||||
open={addModalOpen}
|
||||
onClose={() => setAddModalOpen(false)}
|
||||
onSubmit={handleAddItem}
|
||||
type="domain"
|
||||
communities={communities}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-3">
|
||||
{/* Classic Add New Domain 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" />
|
||||
Добавить новый домен
|
||||
</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}
|
||||
placeholder="Начните вводить номер или имя"
|
||||
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
|
||||
useShortValue={true}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* Дополнительные варианты */}
|
||||
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
|
||||
<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">
|
||||
<div className="col-12">
|
||||
{/* Bulk Actions Bar */}
|
||||
<BulkActionsBar
|
||||
selectedCount={selectedDomains.size}
|
||||
@@ -691,16 +561,22 @@ function DomainsNewManager() {
|
||||
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="row align-items-center w-100 g-2">
|
||||
<div className="col-auto">
|
||||
<h3 className="card-title mb-0">
|
||||
<IconWorld className="icon me-2" size={20} />
|
||||
Список доменов
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
|
||||
</h3>
|
||||
<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">
|
||||
<IconWorld 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">
|
||||
<div className="d-flex gap-2 flex-wrap">
|
||||
{/* Сохранённые фильтры */}
|
||||
@@ -781,142 +657,120 @@ function DomainsNewManager() {
|
||||
</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>
|
||||
{/* Мета-информация будет показана внизу карточки */}
|
||||
{loading ? (
|
||||
<TableSkeleton rows={10} cols={4} hasCheckbox={true} />
|
||||
) : paginatedItems.length === 0 ? (
|
||||
<TableEmpty cols={3}>
|
||||
<EmptyState
|
||||
title="Нет доменов"
|
||||
description="Импортируйте или добавьте записи, чтобы начать."
|
||||
action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
|
||||
secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
|
||||
const header = ['domain','community'];
|
||||
const lines = [header, ['example.com','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 a = document.createElement('a'); a.href = url; a.download = 'domains_sample.csv'; a.click(); URL.revokeObjectURL(url);
|
||||
}}>Шаблон CSV</button>}
|
||||
/>
|
||||
</TableEmpty>
|
||||
) : (
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '40px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={selectedDomains.size === paginatedItems.length && paginatedItems.length > 0}
|
||||
onChange={(e) => e.target.checked ? handleSelectAll() : handleDeselectAll()}
|
||||
/>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('domain')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconWorld size={16} className="me-1 text-muted" />
|
||||
Домен
|
||||
{sortField === 'domain' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconHash size={16} className="me-1 text-muted" />
|
||||
Community
|
||||
{sortField === 'community' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedItems.map((item, idx) => (
|
||||
<tr
|
||||
key={item.domain}
|
||||
className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
|
||||
style={{
|
||||
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
|
||||
}}
|
||||
>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={selectedDomains.has(item.domain)}
|
||||
onChange={() => handleToggleSelect(item.domain)}
|
||||
aria-label={`Выбрать ${item.domain}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconWorld size={16} className="me-2 text-muted" />
|
||||
<span className="font-monospace">{item.domain}</span>
|
||||
<Tooltip content="Копировать домен" position="top">
|
||||
<button
|
||||
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
|
||||
onClick={() => copyToClipboard(item.domain)}
|
||||
aria-label="Копировать"
|
||||
title="Копировать домен"
|
||||
>
|
||||
<IconCopy size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
{renderCommunityBadge(item.community)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="btn-group">
|
||||
{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' }}
|
||||
useShortValue={true}
|
||||
<div className="card-body p-0">
|
||||
{/* Таблица с лёгкой карточной подложкой (плоский стиль) */}
|
||||
{loading ? (
|
||||
<TableSkeleton rows={10} cols={4} hasCheckbox={true} flat />
|
||||
) : paginatedItems.length === 0 ? (
|
||||
<TableEmpty cols={3} flat>
|
||||
<EmptyState
|
||||
title="Нет доменов"
|
||||
description="Импортируйте или добавьте записи, чтобы начать."
|
||||
action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
|
||||
secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
|
||||
const header = ['domain','community'];
|
||||
const lines = [header, ['example.com','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 a = document.createElement('a'); a.href = url; a.download = 'domains_sample.csv'; a.click(); URL.revokeObjectURL(url);
|
||||
}}>Шаблон CSV</button>}
|
||||
/>
|
||||
</TableEmpty>
|
||||
) : (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-flat table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '40px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={selectedDomains.size === paginatedItems.length && paginatedItems.length > 0}
|
||||
onChange={(e) => e.target.checked ? handleSelectAll() : handleDeselectAll()}
|
||||
/>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('domain')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconWorld size={16} className="me-1 text-muted" />
|
||||
Домен
|
||||
{sortField === 'domain' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconHash size={16} className="me-1 text-muted" />
|
||||
Community
|
||||
{sortField === 'community' && (
|
||||
<span className="ms-1">
|
||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedItems.map((item, idx) => (
|
||||
<tr
|
||||
key={item.domain}
|
||||
className={selectedDomains.has(item.domain) ? 'table-selected' : ''}
|
||||
style={{
|
||||
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
|
||||
}}
|
||||
>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={selectedDomains.has(item.domain)}
|
||||
onChange={() => handleToggleSelect(item.domain)}
|
||||
aria-label={`Выбрать ${item.domain}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<Tooltip content="Сохранить (Enter)">
|
||||
<button
|
||||
className="btn btn-success btn-icon btn-sm"
|
||||
onClick={() => handleSaveEdit(item.domain)}
|
||||
disabled={!isValidCommunity(editingValue)}
|
||||
aria-label="Сохранить"
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconWorld size={16} className="me-2 text-muted" />
|
||||
<span className="font-monospace">{item.domain}</span>
|
||||
<Tooltip content="Копировать домен" position="top">
|
||||
<button
|
||||
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
|
||||
onClick={() => copyToClipboard(item.domain)}
|
||||
aria-label="Копировать"
|
||||
title="Копировать домен"
|
||||
>
|
||||
<IconCheck size={16} />
|
||||
<IconCopy size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Отмена (Esc)">
|
||||
<button
|
||||
className="btn btn-secondary btn-icon btn-sm"
|
||||
onClick={handleCancelEdit}
|
||||
aria-label="Отмена"
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
{renderCommunityBadge(item.community)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<div className="btn-group btn-group-sm" role="group" aria-label={`Действия с доменом ${item.domain}`}>
|
||||
<Tooltip content="Редактировать" position="top">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-icon btn-sm"
|
||||
className="btn btn-icon btn-outline-primary"
|
||||
aria-label="Редактировать"
|
||||
onClick={() => handleEdit(item)}
|
||||
title="Редактировать"
|
||||
@@ -924,19 +778,9 @@ function DomainsNewManager() {
|
||||
<IconEdit size={16} />
|
||||
</button>
|
||||
</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">
|
||||
<button
|
||||
className="btn btn-outline-danger btn-icon btn-sm"
|
||||
className="btn btn-icon btn-outline-danger"
|
||||
aria-label="Удалить"
|
||||
onClick={() => confirmDelete(item)}
|
||||
title="Удалить"
|
||||
@@ -944,25 +788,24 @@ function DomainsNewManager() {
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="card-footer border-top-0">
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems || filtered.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Пагинация */}
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems || filtered.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
<S3MetaBar keys={["domainsNew"]} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1013,6 +856,42 @@ function DomainsNewManager() {
|
||||
url={wsUrl}
|
||||
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
|
||||
show={clearCommunitiesOpen}
|
||||
onClose={() => setClearCommunitiesOpen(false)}
|
||||
@@ -1041,10 +920,10 @@ function DomainsNewManager() {
|
||||
<button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button>
|
||||
<div className="modal-header"><h3 className="modal-title">Изменения</h3></div>
|
||||
<div className="modal-body">
|
||||
<div className="row g-3">
|
||||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
|
||||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
|
||||
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
|
||||
<div className="row g-2 g-md-3">
|
||||
<div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
|
||||
<div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
|
||||
<div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
|
||||
+152
-279
@@ -1,5 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import api from './lib/api.js';
|
||||
import { usePing } from './contexts/PingContext.jsx';
|
||||
import {
|
||||
IconSearch,
|
||||
IconRefresh,
|
||||
@@ -15,6 +17,7 @@ import {
|
||||
IconChevronDown,
|
||||
IconChevronUp
|
||||
} from '@tabler/icons-react';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
|
||||
// Функция для получения флага по коду страны
|
||||
const countryToFlag = (code) => {
|
||||
@@ -39,7 +42,7 @@ function EasySwitchManager() {
|
||||
|
||||
// Поиск и фильтры
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedRule, setSelectedRule] = useState('all'); // all | by-community
|
||||
const [_selectedRule, _setSelectedRule] = useState('all'); // all | by-community
|
||||
const [activeTab, setActiveTab] = useState('proxies'); // proxies | providers
|
||||
const [showOnlyConfigured, setShowOnlyConfigured] = useState(true); // Показывать только настроенные
|
||||
|
||||
@@ -49,60 +52,100 @@ function EasySwitchManager() {
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [expandedServers, setExpandedServers] = useState(new Set()); // Развернутые серверы
|
||||
const [groupByTags, setGroupByTags] = useState(true); // Группировка по тегам
|
||||
// Пинги по шлюзам: ключ `${routerId}:${gatewayIp}` → avg RTT в мс
|
||||
const [pingMap, setPingMap] = useState({});
|
||||
// Единый источник пингов (кеш + API) — общий с страницей фильтров
|
||||
const { pingMap, requestPings, cancelScope } = usePing();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
|
||||
const initData = async () => {
|
||||
try {
|
||||
// Загружаем communities
|
||||
const commRes = await api.get(`/communities`);
|
||||
const commRes = await api.get(`/communities`, { signal });
|
||||
const communities = Array.isArray(commRes.data) ? commRes.data : [];
|
||||
setCommunitiesDirectory(communities);
|
||||
|
||||
|
||||
// Загружаем inventory servers
|
||||
const invRes = await api.get(`/servers`);
|
||||
const invRes = await api.get(`/servers`, { signal });
|
||||
const inventory = Array.isArray(invRes.data) ? invRes.data : [];
|
||||
setInventoryServers(inventory);
|
||||
|
||||
// Загружаем network-config (gateways и туннели)
|
||||
let ncGateways = [];
|
||||
try {
|
||||
const ncRes = await api.get(`/network-config`);
|
||||
const ncRes = await api.get(`/network-config`, { signal });
|
||||
const ncData = ncRes.data || {};
|
||||
ncGateways = Array.isArray(ncData.gateways) ? ncData.gateways : [];
|
||||
} catch (e) {
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
// Если файла нет или ошибка - используем пустой массив (fallback на старую логику)
|
||||
console.warn('EasySwitch: не удалось загрузить /network-config, используется fallback:', e?.message || e);
|
||||
ncGateways = [];
|
||||
}
|
||||
setNetworkConfigGateways(ncGateways);
|
||||
|
||||
|
||||
// Загружаем данные серверов и фильтров
|
||||
await loadDataWithParams(communities, inventory, ncGateways);
|
||||
await loadDataWithParams(communities, inventory, ncGateways, signal);
|
||||
} catch (e) {
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error initializing data:', e);
|
||||
setError('Ошибка загрузки данных');
|
||||
}
|
||||
};
|
||||
initData();
|
||||
}, []);
|
||||
|
||||
const loadDataWithParams = async (communities, inventory, ncGatewaysParam) => {
|
||||
return () => controller.abort();
|
||||
}, [loadDataWithParams]);
|
||||
|
||||
// При переходе на раздел Easy Switch перезапрашиваем пинги (устаревшие по TTL обновятся)
|
||||
useEffect(() => {
|
||||
if (location.pathname !== '/easy-switch' || !servers.length || !inventoryServers.length) return;
|
||||
const pingTasks = [];
|
||||
servers.forEach((server) => {
|
||||
const inv = inventoryServers.find(srv =>
|
||||
String(srv.dns || '').trim() === server.name ||
|
||||
String(srv.hostName || '').trim() === server.name ||
|
||||
String(srv.ip || '').trim() === server.name
|
||||
);
|
||||
const routerId = inv?.id || inv?.dns || inv?.ip;
|
||||
if (!routerId) return;
|
||||
(server.gateways || []).forEach((gw) => {
|
||||
if (gw.ip) pingTasks.push({ routerId, gatewayIp: gw.ip });
|
||||
});
|
||||
});
|
||||
requestPings(pingTasks, { scope: 'easy-switch' });
|
||||
}, [location.pathname, servers, inventoryServers, requestPings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (location.pathname === '/easy-switch') return;
|
||||
cancelScope('easy-switch');
|
||||
}, [location.pathname, cancelScope]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
cancelScope('easy-switch');
|
||||
};
|
||||
}, [cancelScope]);
|
||||
|
||||
const loadDataWithParams = useCallback(async (communities, inventory, ncGatewaysParam, signal) => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
|
||||
const requestConfig = signal ? { signal } : {};
|
||||
|
||||
try {
|
||||
// Загружаем список серверов из server-configs
|
||||
const serversResponse = await api.get(`/server-configs`);
|
||||
const serversResponse = await api.get(`/server-configs`, requestConfig);
|
||||
const serversList = Array.isArray(serversResponse.data) ? serversResponse.data : [];
|
||||
|
||||
|
||||
// Загружаем фильтры для каждого сервера (для определения активных gateways)
|
||||
const serversWithData = await Promise.all(
|
||||
serversList.map(async (server) => {
|
||||
try {
|
||||
// Загружаем filters для сервера
|
||||
const filtersResponse = await api.get(`/server-filters/${server.id}`);
|
||||
const filtersResponse = await api.get(`/server-filters/${server.id}`, requestConfig);
|
||||
const filters = Array.isArray(filtersResponse.data) ? filtersResponse.data : [];
|
||||
|
||||
// Получаем gateways сервера:
|
||||
@@ -212,14 +255,27 @@ function EasySwitchManager() {
|
||||
// Фильтруем серверы, у которых есть gateways
|
||||
const serversWithGateways = serversWithData.filter(s => s.gateways.length > 0);
|
||||
setServers(serversWithGateways);
|
||||
// Предзагружаем пинги для всех комбинаций server+gateway
|
||||
prefetchPings(serversWithGateways, inventory);
|
||||
// Единая точка входа: запрашиваем пинги через контекст (кеш общий с фильтрами)
|
||||
const pingTasks = [];
|
||||
serversWithGateways.forEach((server) => {
|
||||
const inv = inventory.find(srv =>
|
||||
String(srv.dns || '').trim() === server.name ||
|
||||
String(srv.hostName || '').trim() === server.name ||
|
||||
String(srv.ip || '').trim() === server.name
|
||||
);
|
||||
const routerId = inv?.id || inv?.dns || inv?.ip;
|
||||
if (!routerId) return;
|
||||
(server.gateways || []).forEach((gw) => {
|
||||
if (gw.ip) pingTasks.push({ routerId, gatewayIp: gw.ip });
|
||||
});
|
||||
});
|
||||
requestPings(pingTasks, { scope: 'easy-switch' });
|
||||
|
||||
// Отладочная информация
|
||||
try {
|
||||
console.log('[EasySwitch] serversWithGateways:', serversWithGateways);
|
||||
console.log('[EasySwitch] communitiesDirectory:', communities);
|
||||
} catch (_) {}
|
||||
} catch { /* no-op */ }
|
||||
|
||||
// Автоматически разворачиваем первый сервер
|
||||
if (serversWithGateways.length > 0 && expandedServers.size === 0) {
|
||||
@@ -244,68 +300,17 @@ function EasySwitchManager() {
|
||||
|
||||
try {
|
||||
console.log('[EasySwitch] initialActiveGateways:', initialActive);
|
||||
} catch (_) {}
|
||||
} catch { /* no-op */ }
|
||||
|
||||
} catch (err) {
|
||||
if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error loading data:', err);
|
||||
setError('Ошибка загрузки данных. Проверьте подключение к серверу.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Загрузить реальные пинги для комбинаций (сервер, gateway).
|
||||
* Цель пинга берётся из настроек интерфейса («Домен для пинга») или по умолчанию.
|
||||
*/
|
||||
const prefetchPings = async (serversList, inventory) => {
|
||||
try {
|
||||
const tasks = [];
|
||||
const seen = new Set();
|
||||
|
||||
serversList.forEach((server) => {
|
||||
const inv = inventory.find(srv =>
|
||||
String(srv.dns || '').trim() === server.name ||
|
||||
String(srv.hostName || '').trim() === server.name ||
|
||||
String(srv.ip || '').trim() === server.name
|
||||
);
|
||||
const routerId = inv?.id || inv?.dns || inv?.ip;
|
||||
if (!routerId) return;
|
||||
|
||||
(server.gateways || []).forEach((gw) => {
|
||||
const ip = gw.ip || '';
|
||||
if (!ip) return;
|
||||
const key = `${routerId}:${ip}`;
|
||||
if (seen.has(key) || pingMap[key] !== undefined) return;
|
||||
seen.add(key);
|
||||
tasks.push({ routerId, ip, key });
|
||||
});
|
||||
});
|
||||
|
||||
if (tasks.length === 0) return;
|
||||
|
||||
// Запросы идут параллельно; обновляем UI по мере прихода каждого ответа,
|
||||
// чтобы значения на интерфейсе отображались быстрее.
|
||||
tasks.forEach(({ routerId, ip, key }) => {
|
||||
api
|
||||
.post('/mikrotik/ping', {
|
||||
serverId: routerId,
|
||||
gatewayIp: ip,
|
||||
count: 5,
|
||||
})
|
||||
.then(({ data }) => {
|
||||
const value = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
|
||||
setPingMap((prev) => ({ ...prev, [key]: value }));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.warn('Failed to fetch ping for', routerId, ip, e?.message || e);
|
||||
setPingMap((prev) => ({ ...prev, [key]: null }));
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('prefetchPings error:', e?.message || e);
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- init-only, deps would cause unnecessary re-fetches
|
||||
}, []);
|
||||
|
||||
const handleGatewaySelect = (serverId, community, gateway) => {
|
||||
const key = `${serverId}:${community}`;
|
||||
@@ -377,7 +382,7 @@ function EasySwitchManager() {
|
||||
const currentFilters = Array.isArray(response.data) ? response.data : [];
|
||||
|
||||
// Создаем Set существующих communities в фильтрах
|
||||
const existingCommunitiesSet = new Set(currentFilters.map(f => f.community));
|
||||
const _existingCommunitiesSet = new Set(currentFilters.map(f => f.community));
|
||||
|
||||
// Обновляем существующие фильтры и добавляем новые
|
||||
const updatedFilters = [];
|
||||
@@ -512,19 +517,13 @@ function EasySwitchManager() {
|
||||
|
||||
if (loading && servers.length === 0) {
|
||||
return (
|
||||
<div className="container-xl">
|
||||
<div className="page-header">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<h2 className="page-title">
|
||||
<IconWorld className="me-2" />
|
||||
Easy Switch
|
||||
</h2>
|
||||
<div className="text-muted mt-1">Быстрое переключение шлюзов</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="easy-switch-page">
|
||||
<PageHeader
|
||||
title="Easy Switch"
|
||||
icon={<IconWorld size={24} />}
|
||||
meta="Быстрое переключение шлюзов"
|
||||
/>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-body text-center py-5">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
@@ -538,45 +537,36 @@ function EasySwitchManager() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container-xl">
|
||||
{/* Заголовок */}
|
||||
<div className="page-header mb-3">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<h2 className="page-title">
|
||||
<IconWorld className="me-2" />
|
||||
Easy Switch
|
||||
</h2>
|
||||
<div className="text-muted mt-1">
|
||||
Быстрое переключение шлюзов • {servers.length} {servers.length === 1 ? 'сервер' : 'серверов'} • {communitiesDirectory.length} communities
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<div className="btn-list">
|
||||
{hasChanges && (
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={handleApplyChanges}
|
||||
>
|
||||
<IconDeviceFloppy size={18} className="me-2" />
|
||||
Применить изменения
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
<div className="easy-switch-page">
|
||||
<PageHeader
|
||||
title="Easy Switch"
|
||||
icon={<IconWorld size={24} />}
|
||||
meta={`Быстрое переключение шлюзов • ${servers.length} ${servers.length === 1 ? 'сервер' : 'серверов'} • ${communitiesDirectory.length} communities`}
|
||||
actions={
|
||||
<div className="btn-list">
|
||||
{hasChanges && (
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={handleApplyChanges}
|
||||
>
|
||||
<IconRefresh size={18} className="me-2" />
|
||||
Обновить
|
||||
<IconDeviceFloppy size={18} className="me-2" />
|
||||
Применить изменения
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<IconRefresh size={18} className="me-2" />
|
||||
Обновить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Вкладки */}
|
||||
<div className="mb-3">
|
||||
<div className="card card-tabs mb-3">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
@@ -621,8 +611,9 @@ function EasySwitchManager() {
|
||||
)}
|
||||
|
||||
{/* Панель фильтров */}
|
||||
<div className="mb-3">
|
||||
<div className="row g-2 align-items-center">
|
||||
<div className="card mb-3">
|
||||
<div className="card-body py-3">
|
||||
<div className="row g-2 align-items-center">
|
||||
{/* Переключатель "Только настроенные" */}
|
||||
<div className="col-auto">
|
||||
<label className="form-check form-switch mb-0">
|
||||
@@ -701,17 +692,18 @@ function EasySwitchManager() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button className="btn btn-icon" title="Настройки">
|
||||
<button className="btn btn-outline-secondary btn-icon" title="Настройки">
|
||||
<IconSettings size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button className="btn btn-icon" title="Быстрые действия">
|
||||
<button className="btn btn-outline-secondary btn-icon" title="Быстрые действия">
|
||||
<IconFilter size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Список серверов с communities и шлюзами */}
|
||||
{filteredServers.length === 0 ? (
|
||||
@@ -748,12 +740,7 @@ function EasySwitchManager() {
|
||||
<div key={server.id} className="card mb-3">
|
||||
{/* Заголовок сервера (кликабельный) */}
|
||||
<div
|
||||
className="card-header py-2"
|
||||
style={{
|
||||
backgroundColor: 'rgba(32, 107, 196, 0.05)',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
className="card-header py-2 easy-switch-server-header"
|
||||
onClick={() => toggleServerExpanded(server.id)}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
@@ -764,7 +751,7 @@ function EasySwitchManager() {
|
||||
<IconChevronDown size={20} className="me-2 text-muted" />
|
||||
)}
|
||||
|
||||
{flag && <span className="me-2" style={{ fontSize: '1.5rem' }}>{flag}</span>}
|
||||
{flag && <span className="me-2 easy-switch-flag">{flag}</span>}
|
||||
<IconServer size={20} className="me-2 text-primary" />
|
||||
<h3 className="card-title mb-0 me-2">{server.name}</h3>
|
||||
{server.description && (
|
||||
@@ -815,7 +802,7 @@ function EasySwitchManager() {
|
||||
<div key={tag} className="mb-4">
|
||||
{/* Заголовок группы тегов */}
|
||||
<div className="mb-2 pb-2 border-bottom">
|
||||
<span className="badge bg-purple-lt text-purple me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
|
||||
<span className="badge bg-purple-lt text-purple me-2">
|
||||
{tag}
|
||||
</span>
|
||||
<span className="text-muted small">
|
||||
@@ -835,12 +822,12 @@ function EasySwitchManager() {
|
||||
<div className="mb-2">
|
||||
{/* Заголовок community */}
|
||||
<div className="mb-2">
|
||||
<span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
|
||||
<span className="badge bg-blue-lt text-blue me-2">
|
||||
{comm.value}
|
||||
</span>
|
||||
<span className="fw-medium">{comm.name || comm.description || ''}</span>
|
||||
{hasFilterForComm && (
|
||||
<span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
|
||||
<span className="badge bg-green-lt text-green ms-2">
|
||||
настроен
|
||||
</span>
|
||||
)}
|
||||
@@ -864,50 +851,21 @@ function EasySwitchManager() {
|
||||
return (
|
||||
<div key={gw.name} className="col-12 col-sm-4">
|
||||
<div
|
||||
className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
|
||||
borderRadius: '6px',
|
||||
boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
|
||||
position: 'relative'
|
||||
}}
|
||||
className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
|
||||
onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="card-body p-2">
|
||||
{/* Галочка (абсолютное позиционирование) */}
|
||||
{isActive && (
|
||||
<div
|
||||
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '8px'
|
||||
}}
|
||||
>
|
||||
<div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
|
||||
<IconCheck size={12} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метка Fastest */}
|
||||
<div className="mb-1" style={{ minHeight: '18px' }}>
|
||||
<div className="mb-1 easy-switch-fast-slot">
|
||||
{isFastest && !isActive && (
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
|
||||
<IconBolt size={10} className="me-1" />
|
||||
Fast
|
||||
</span>
|
||||
@@ -917,22 +875,14 @@ function EasySwitchManager() {
|
||||
{/* Флаг и название (комментарий) шлюза */}
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<span
|
||||
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
fontSize: '1.25rem',
|
||||
lineHeight: 1,
|
||||
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
|
||||
}}
|
||||
className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
|
||||
title={gw.country || country || ''}
|
||||
>
|
||||
{countryToFlag(gw.country || country || '') || '🌐'}
|
||||
</span>
|
||||
<div className="flex-grow-1 min-w-0">
|
||||
<div
|
||||
className={`fw-bold ${isActive ? 'text-white' : ''}`}
|
||||
style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
|
||||
className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
|
||||
>
|
||||
{gw.comment || gw.name}
|
||||
</div>
|
||||
@@ -941,17 +891,16 @@ function EasySwitchManager() {
|
||||
{/* IP шлюза ниже */}
|
||||
{gw.ip && (
|
||||
<div
|
||||
className={`small text-truncate ${
|
||||
className={`small text-truncate easy-switch-gateway-ip ${
|
||||
isActive ? 'text-white-75' : 'text-muted'
|
||||
}`}
|
||||
style={{ fontSize: '0.75rem' }}
|
||||
>
|
||||
{gw.ip}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метрика (пинг) */}
|
||||
<div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
|
||||
<div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
|
||||
{ping != null ? ping : '—'}
|
||||
</div>
|
||||
</div>
|
||||
@@ -974,7 +923,7 @@ function EasySwitchManager() {
|
||||
<div className="mb-4">
|
||||
{/* Заголовок группы без тегов */}
|
||||
<div className="mb-2 pb-2 border-bottom">
|
||||
<span className="badge bg-gray-lt text-gray me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
|
||||
<span className="badge bg-gray-lt text-gray me-2">
|
||||
Без тегов
|
||||
</span>
|
||||
<span className="text-muted small">
|
||||
@@ -994,12 +943,12 @@ function EasySwitchManager() {
|
||||
<div className="mb-2">
|
||||
{/* Заголовок community */}
|
||||
<div className="mb-2">
|
||||
<span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
|
||||
<span className="badge bg-blue-lt text-blue me-2">
|
||||
{comm.value}
|
||||
</span>
|
||||
<span className="fw-medium">{comm.name || comm.description || ''}</span>
|
||||
{hasFilterForComm && (
|
||||
<span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
|
||||
<span className="badge bg-green-lt text-green ms-2">
|
||||
настроен
|
||||
</span>
|
||||
)}
|
||||
@@ -1023,50 +972,21 @@ function EasySwitchManager() {
|
||||
return (
|
||||
<div key={gw.name} className="col-12 col-sm-4">
|
||||
<div
|
||||
className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
|
||||
borderRadius: '6px',
|
||||
boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
|
||||
position: 'relative'
|
||||
}}
|
||||
className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
|
||||
onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="card-body p-2">
|
||||
{/* Галочка (абсолютное позиционирование) */}
|
||||
{isActive && (
|
||||
<div
|
||||
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '8px'
|
||||
}}
|
||||
>
|
||||
<div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
|
||||
<IconCheck size={12} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метка Fastest */}
|
||||
<div className="mb-1" style={{ minHeight: '18px' }}>
|
||||
<div className="mb-1 easy-switch-fast-slot">
|
||||
{isFastest && !isActive && (
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
|
||||
<IconBolt size={10} className="me-1" />
|
||||
Fast
|
||||
</span>
|
||||
@@ -1076,22 +996,14 @@ function EasySwitchManager() {
|
||||
{/* Флаг и название (комментарий) шлюза */}
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<span
|
||||
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
fontSize: '1.25rem',
|
||||
lineHeight: 1,
|
||||
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
|
||||
}}
|
||||
className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
|
||||
title={gw.country || country || ''}
|
||||
>
|
||||
{countryToFlag(gw.country || country || '') || '🌐'}
|
||||
</span>
|
||||
<div className="flex-grow-1 min-w-0">
|
||||
<div
|
||||
className={`fw-bold ${isActive ? 'text-white' : ''}`}
|
||||
style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
|
||||
className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
|
||||
>
|
||||
{gw.comment || gw.name}
|
||||
</div>
|
||||
@@ -1100,17 +1012,16 @@ function EasySwitchManager() {
|
||||
{/* IP шлюза ниже */}
|
||||
{gw.ip && (
|
||||
<div
|
||||
className={`small text-truncate ${
|
||||
className={`small text-truncate easy-switch-gateway-ip ${
|
||||
isActive ? 'text-white-75' : 'text-muted'
|
||||
}`}
|
||||
style={{ fontSize: '0.75rem' }}
|
||||
>
|
||||
{gw.ip}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метрика (пинг) */}
|
||||
<div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
|
||||
<div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
|
||||
{ping != null ? ping : '—'}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1142,12 +1053,12 @@ function EasySwitchManager() {
|
||||
<div className="mb-2">
|
||||
{/* Заголовок community */}
|
||||
<div className="mb-2">
|
||||
<span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
|
||||
<span className="badge bg-blue-lt text-blue me-2">
|
||||
{comm.value}
|
||||
</span>
|
||||
<span className="fw-medium">{comm.name || comm.description || ''}</span>
|
||||
{hasFilterForComm && (
|
||||
<span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
|
||||
<span className="badge bg-green-lt text-green ms-2">
|
||||
настроен
|
||||
</span>
|
||||
)}
|
||||
@@ -1171,50 +1082,21 @@ function EasySwitchManager() {
|
||||
return (
|
||||
<div key={gw.name} className="col-12 col-sm-4">
|
||||
<div
|
||||
className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
|
||||
borderRadius: '6px',
|
||||
boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
|
||||
position: 'relative'
|
||||
}}
|
||||
className={`card h-100 easy-switch-gateway-card ${isActive ? 'easy-switch-gateway-card-active bg-primary text-white' : ''}`}
|
||||
onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="card-body p-2">
|
||||
{/* Галочка (абсолютное позиционирование) */}
|
||||
{isActive && (
|
||||
<div
|
||||
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '8px'
|
||||
}}
|
||||
>
|
||||
<div className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center easy-switch-active-check">
|
||||
<IconCheck size={12} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метка Fastest */}
|
||||
<div className="mb-1" style={{ minHeight: '18px' }}>
|
||||
<div className="mb-1 easy-switch-fast-slot">
|
||||
{isFastest && !isActive && (
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
|
||||
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center easy-switch-fast-badge">
|
||||
<IconBolt size={10} className="me-1" />
|
||||
Fast
|
||||
</span>
|
||||
@@ -1224,22 +1106,14 @@ function EasySwitchManager() {
|
||||
{/* Флаг и название (комментарий) шлюза */}
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<span
|
||||
className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
fontSize: '1.25rem',
|
||||
lineHeight: 1,
|
||||
backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
|
||||
}}
|
||||
className={`d-flex align-items-center justify-content-center flex-shrink-0 rounded easy-switch-gateway-flag ${isActive ? 'easy-switch-gateway-flag-active' : ''}`}
|
||||
title={gw.country || country || ''}
|
||||
>
|
||||
{countryToFlag(gw.country || country || '') || '🌐'}
|
||||
</span>
|
||||
<div className="flex-grow-1 min-w-0">
|
||||
<div
|
||||
className={`fw-bold ${isActive ? 'text-white' : ''}`}
|
||||
style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
|
||||
className={`fw-bold easy-switch-gateway-title ${isActive ? 'text-white' : ''}`}
|
||||
>
|
||||
{gw.comment || gw.name}
|
||||
</div>
|
||||
@@ -1248,15 +1122,14 @@ function EasySwitchManager() {
|
||||
{/* IP шлюза ниже */}
|
||||
{gw.ip && (
|
||||
<div
|
||||
className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
|
||||
style={{ fontSize: '0.75rem' }}
|
||||
className={`small text-truncate mb-1 easy-switch-gateway-ip ${isActive ? 'text-white-75' : 'text-muted'}`}
|
||||
>
|
||||
{gw.ip}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Метрика (пинг) */}
|
||||
<div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
|
||||
<div className={`fw-bold mt-1 easy-switch-gateway-ping ${isActive ? 'text-white' : 'text-success'}`}>
|
||||
{ping != null ? ping : '—'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+290
-326
@@ -1,11 +1,12 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import api from './lib/api.js';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import Modal from './components/Modal.jsx';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import {
|
||||
IconPlus,
|
||||
IconSearch,
|
||||
@@ -13,24 +14,18 @@ import {
|
||||
IconTrash,
|
||||
IconCheck,
|
||||
IconX,
|
||||
IconDatabase,
|
||||
IconRefresh,
|
||||
IconDownload,
|
||||
IconUpload,
|
||||
IconAlertTriangle,
|
||||
IconFilter,
|
||||
IconChevronDown,
|
||||
IconLink,
|
||||
IconCopy,
|
||||
IconEye,
|
||||
IconServer,
|
||||
IconSettings,
|
||||
IconDeviceFloppy,
|
||||
IconHash,
|
||||
IconRocket,
|
||||
IconSortAscending,
|
||||
IconSortDescending,
|
||||
IconWorld,
|
||||
IconFileText,
|
||||
IconGripVertical
|
||||
} from '@tabler/icons-react';
|
||||
@@ -51,15 +46,8 @@ import {
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { normalizeGateways, countryToFlag } from './utils/serverUtils.js';
|
||||
import {
|
||||
AddFilterModal,
|
||||
EditFilterModal,
|
||||
DeleteFilterModal,
|
||||
PreviewConfigModal,
|
||||
AddFilterServerModal
|
||||
} from './components/filter/index.js';
|
||||
|
||||
const API_URL = '/api';
|
||||
import { usePing } from './contexts/PingContext.jsx';
|
||||
import { listCommunities } from './lib/evobgpData.js';
|
||||
|
||||
// Компонент автокомплита для выбора Community
|
||||
function CommunityAutocomplete({ label, value, onChange, communities = [], required = false, placeholder = 'Введите или выберите community...', baseAS = '65001' }) {
|
||||
@@ -92,7 +80,7 @@ function CommunityAutocomplete({ label, value, onChange, communities = [], requi
|
||||
// 3. Если ввели "65001:120", ищем "120" в справочнике
|
||||
if (search.includes(':')) {
|
||||
const searchParts = search.split(':');
|
||||
const searchAS = searchParts[0];
|
||||
const _searchAS = searchParts[0];
|
||||
const searchNum = searchParts[1];
|
||||
|
||||
// Точное совпадение числовой части
|
||||
@@ -259,7 +247,7 @@ function CommunityAutocomplete({ label, value, onChange, communities = [], requi
|
||||
{Object.entries(groupedCommunities).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="dropdown-header small text-muted bg-light">{category}</div>
|
||||
{items.map((c, idx) => {
|
||||
{items.map((c, _idx) => {
|
||||
const globalIdx = filteredCommunities.indexOf(c);
|
||||
return (
|
||||
<div
|
||||
@@ -331,7 +319,18 @@ function CommunityAutocomplete({ label, value, onChange, communities = [], requi
|
||||
}
|
||||
|
||||
// Компонент выбора Gateway в виде карточек (вместо выпадающего списка)
|
||||
function GatewayAutocomplete({ label, value, onChange, gateways = [], required = false, placeholder = 'Введите или выберите gateway...' }) {
|
||||
function GatewayAutocomplete({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
gateways = [],
|
||||
required = false,
|
||||
placeholder = 'Введите или выберите gateway...',
|
||||
// Карта пингов, как на Easy Switch: ключ `${routerId}:${gatewayIp}` → avg RTT
|
||||
pingMap = {},
|
||||
// Идентификатор роутера (id/dns/ip из inventory), как на Easy Switch
|
||||
routerId = null,
|
||||
}) {
|
||||
const [inputValue, setInputValue] = useState(value || '');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
||||
@@ -478,6 +477,10 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
|
||||
{filteredGateways.map((gw, idx) => {
|
||||
const isSelected = gw.name === value;
|
||||
const isHighlighted = highlightedIndex === idx;
|
||||
const pingKey = routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
|
||||
const ping = pingKey && Object.prototype.hasOwnProperty.call(pingMap, pingKey)
|
||||
? pingMap[pingKey]
|
||||
: null;
|
||||
return (
|
||||
<div className="col" key={gw.name || idx}>
|
||||
<button
|
||||
@@ -511,12 +514,15 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
|
||||
{gw.serverDns}
|
||||
</div>
|
||||
)}
|
||||
{(gw.country || gw.provider) && (
|
||||
<div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
|
||||
{gw.country && <span className="me-1">{countryToFlag(gw.country)}</span>}
|
||||
{gw.provider}
|
||||
</div>
|
||||
)}
|
||||
{/* Пинг шлюза (вместо строки с провайдером/страной), как на странице Easy Switch */}
|
||||
<div
|
||||
className={`fw-bold mt-1 ${
|
||||
isSelected ? 'text-white' : 'text-success'
|
||||
}`}
|
||||
style={{ fontSize: '1.05rem' }}
|
||||
>
|
||||
{ping != null ? ping : '—'}
|
||||
</div>
|
||||
</div>
|
||||
{gw.primary && (
|
||||
<span className={`badge ${isSelected ? 'bg-white text-primary' : 'bg-green-lt text-green'}`}>
|
||||
@@ -764,17 +770,37 @@ function FilterManager() {
|
||||
const [inventoryServers, setInventoryServers] = useState([]);
|
||||
// Network config gateways (from /network-config endpoint)
|
||||
const [networkConfigGateways, setNetworkConfigGateways] = useState([]);
|
||||
// Единая точка входа для пингов (кеш общий с Easy Switch)
|
||||
const { pingMap, requestPings } = usePing();
|
||||
|
||||
// Получить metadata сервера из inventory по имени (dns/hostName/ip или короткое имя типа "ihor")
|
||||
const getInventoryMetaForServer = useCallback((serverName) => {
|
||||
if (!serverName) return null;
|
||||
const name = String(serverName).trim();
|
||||
return inventoryServers.find((srv) => {
|
||||
const dns = String(srv.dns || '').trim();
|
||||
const hostName = String(srv.hostName || '').trim();
|
||||
const ip = String(srv.ip || '').trim();
|
||||
if (dns === name || hostName === name || ip === name) return true;
|
||||
if (dns && dns.split('.')[0] === name) return true;
|
||||
return false;
|
||||
});
|
||||
}, [inventoryServers]);
|
||||
|
||||
// Получить routerId для MikroTik (id/dns/ip), как на странице Easy Switch
|
||||
const getRouterIdForServer = useCallback((server) => {
|
||||
if (!server) return null;
|
||||
const meta = getInventoryMetaForServer(server.fullName || server.dns || server.name) || getInventoryMetaForServer(server.name);
|
||||
if (!meta) return null;
|
||||
return meta.id || meta.dns || meta.ip || null;
|
||||
}, [getInventoryMetaForServer]);
|
||||
|
||||
// Собираем gateways только для выбранного сервера
|
||||
const selectedServerGateways = (() => {
|
||||
if (!selectedServer) return [];
|
||||
|
||||
// Ищем соответствующий сервер в inventoryServers по имени
|
||||
const matchedServer = inventoryServers.find(srv =>
|
||||
String(srv.dns || '').trim() === selectedServer.name ||
|
||||
String(srv.hostName || '').trim() === selectedServer.name ||
|
||||
String(srv.ip || '').trim() === selectedServer.name
|
||||
);
|
||||
// Ищем соответствующий сервер в inventory (по полному или короткому имени)
|
||||
const matchedServer = getInventoryMetaForServer(selectedServer.fullName || selectedServer.dns || selectedServer.name) || getInventoryMetaForServer(selectedServer.name);
|
||||
|
||||
const serverDns = matchedServer?.dns || matchedServer?.hostName || selectedServer.name || '';
|
||||
const serverId = matchedServer?.id || matchedServer?.ip || selectedServer.id || selectedServer.name || '';
|
||||
@@ -853,49 +879,68 @@ function FilterManager() {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
// Запрашиваем пинги для gateways выбранного сервера; при переходе на раздел Фильтров обновляем (устаревшие по TTL перезапросятся)
|
||||
useEffect(() => {
|
||||
// Загружаем базовую AS из настроек
|
||||
if (!selectedServer || !selectedServerGateways?.length) return;
|
||||
if (location.pathname !== '/filters') return;
|
||||
const routerId = getRouterIdForServer(selectedServer);
|
||||
if (!routerId) return;
|
||||
const tasks = selectedServerGateways
|
||||
.filter((gw) => gw.ip)
|
||||
.map((gw) => ({ routerId, gatewayIp: gw.ip }));
|
||||
requestPings(tasks);
|
||||
}, [location.pathname, selectedServer, selectedServerGateways, requestPings, getRouterIdForServer]);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
const opts = { signal };
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get('/ui-settings');
|
||||
const res = await api.get('/ui-settings', opts);
|
||||
const data = res?.data || {};
|
||||
const loadedBaseAS = String(data?.baseAS || '65001');
|
||||
setBaseAS(loadedBaseAS);
|
||||
} catch (e) {
|
||||
// мягко игнорируем, используем значение по умолчанию
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/communities`);
|
||||
setCommunities(Array.isArray(res.data) ? res.data : []);
|
||||
const rows = await listCommunities();
|
||||
if (signal.aborted) return;
|
||||
setCommunities(Array.isArray(rows) ? rows : []);
|
||||
} catch (e) {
|
||||
// мягко игнорируем, автокомплит необязателен
|
||||
if (signal.aborted) return;
|
||||
}
|
||||
})();
|
||||
// Загружаем инвентарь серверов для отображения флагов и IP
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/servers`);
|
||||
const res = await api.get(`/servers`, opts);
|
||||
setInventoryServers(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (e) {
|
||||
// мягко игнорируем, дополнительная информация необязательна
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
}
|
||||
})();
|
||||
|
||||
// Загружаем gateways из NetworkConfigManager
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get(`/network-config`);
|
||||
const res = await api.get(`/network-config`, opts);
|
||||
const networkConfig = res.data || {};
|
||||
setNetworkConfigGateways(Array.isArray(networkConfig.gateways) ? networkConfig.gateways : []);
|
||||
} catch (e) {
|
||||
// Если файла нет или ошибка - используем пустой массив (fallback на старую логику)
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
setNetworkConfigGateways([]);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
const filterKey = (f) => {
|
||||
@@ -904,7 +949,9 @@ function FilterManager() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchServers();
|
||||
const controller = new AbortController();
|
||||
fetchServers(controller.signal);
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
// Загружаем фильтры при выборе сервера
|
||||
@@ -943,7 +990,7 @@ function FilterManager() {
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
return;
|
||||
}
|
||||
} catch (legacyError) {
|
||||
} catch (_legacyError) {
|
||||
// Фильтров по legacyId тоже нет - это нормально
|
||||
console.log('No legacy filters found');
|
||||
}
|
||||
@@ -962,11 +1009,12 @@ function FilterManager() {
|
||||
// Функции для управления серверами
|
||||
// Загружаем jumphost'ы из раздела "Серверы" (/api/servers)
|
||||
// + загружаем старые server-configs для маппинга legacyId
|
||||
const fetchServers = async () => {
|
||||
const fetchServers = async (abortSignal) => {
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const [serversRes, legacyRes] = await Promise.all([
|
||||
api.get(`/servers`),
|
||||
api.get(`/server-configs`).catch(() => ({ data: [] })) // Старые конфиги для маппинга
|
||||
api.get(`/servers`, opts),
|
||||
api.get(`/server-configs`, opts).catch(() => ({ data: [] })) // Старые конфиги для маппинга
|
||||
]);
|
||||
|
||||
const allServers = Array.isArray(serversRes.data) ? serversRes.data : [];
|
||||
@@ -1023,6 +1071,7 @@ function FilterManager() {
|
||||
|
||||
setServers(jumphosts);
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error fetching servers:', error);
|
||||
setServers([]);
|
||||
}
|
||||
@@ -1116,7 +1165,7 @@ function FilterManager() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadServerConfig = async (serverId, legacyId = null) => {
|
||||
const _handleLoadServerConfig = async (serverId, legacyId = null) => {
|
||||
try {
|
||||
const response = await api.get(`/server-configs/${serverId}`);
|
||||
const config = response.data?.config;
|
||||
@@ -1143,7 +1192,7 @@ function FilterManager() {
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
return;
|
||||
}
|
||||
} catch (legacyError) {
|
||||
} catch (_legacyError) {
|
||||
console.log('No legacy config found');
|
||||
}
|
||||
}
|
||||
@@ -1250,7 +1299,7 @@ function FilterManager() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeployToAllServers = async () => {
|
||||
const _handleDeployToAllServers = async () => {
|
||||
if (!selectedServer) {
|
||||
setError('Сначала выберите сервер с фильтрами для развертывания.');
|
||||
return;
|
||||
@@ -1472,7 +1521,7 @@ function FilterManager() {
|
||||
setEditServerModalOpen(false);
|
||||
setSuccess('Сервер успешно обновлён!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (error) {
|
||||
} catch (_error) {
|
||||
setEditServerError('Не удалось сохранить изменения.');
|
||||
}
|
||||
};
|
||||
@@ -1527,7 +1576,7 @@ function FilterManager() {
|
||||
await navigator.clipboard.writeText(config);
|
||||
setSuccess('Конфигурация скопирована в буфер обмена!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (err) {
|
||||
} catch (_err) {
|
||||
setError('Не удалось скопировать конфигурацию');
|
||||
}
|
||||
} else {
|
||||
@@ -1541,7 +1590,7 @@ function FilterManager() {
|
||||
document.execCommand('copy');
|
||||
setSuccess('Конфигурация скопирована в буфер обмена!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (err) {
|
||||
} catch (_err) {
|
||||
setError('Не удалось скопировать конфигурацию');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
@@ -1549,7 +1598,7 @@ function FilterManager() {
|
||||
};
|
||||
|
||||
// Функция для экспорта конфигурации в S3
|
||||
const exportConfigToS3 = async () => {
|
||||
const _exportConfigToS3 = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.post(`/filters/export-config`);
|
||||
@@ -1699,168 +1748,32 @@ function FilterManager() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header d-print-none">
|
||||
<div className="container-xl">
|
||||
<div className="row g-2 align-items-center">
|
||||
<div className="col">
|
||||
<h2 className="page-title">Управление фильтрами frouting</h2>
|
||||
<div className="page-pretitle">
|
||||
{selectedServer ? (
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="text-muted">Сервер:</span>
|
||||
<span className="ms-2 text-primary fw-bold">{selectedServer.name}</span>
|
||||
{serverFilters.length > 0 && (
|
||||
<span className="badge bg-blue-lt text-blue ms-2">{serverFilters.length} фильтров</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted">Выберите сервер для работы с фильтрами</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-auto ms-auto d-print-none">
|
||||
<div className="btn-list">
|
||||
{/* Dropdown выбора сервера */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-primary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<IconServer className="icon" />
|
||||
{selectedServer ? selectedServer.name : 'Выбрать сервер'}
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" style={{ minWidth: '300px' }}>
|
||||
<div className="px-3 py-2">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Поиск серверов..."
|
||||
value={serverSearch}
|
||||
onChange={(e) => setServerSearch(e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
<div className="dropdown-divider"></div>
|
||||
{activeServers.length > 0 && (
|
||||
<>
|
||||
<h6 className="dropdown-header">Активные серверы</h6>
|
||||
{activeServers.map(server => (
|
||||
<a
|
||||
key={server.id}
|
||||
className={`dropdown-item ${selectedServer?.id === server.id ? 'active' : ''}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedServer(server);
|
||||
}}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<IconServer size={16} className="me-2" />
|
||||
<span className="flex-grow-1">{server.name}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{inactiveServers.length > 0 && (
|
||||
<>
|
||||
<div className="dropdown-divider"></div>
|
||||
<h6 className="dropdown-header">Неактивные серверы</h6>
|
||||
{inactiveServers.map(server => (
|
||||
<a
|
||||
key={server.id}
|
||||
className={`dropdown-item ${selectedServer?.id === server.id ? 'active' : ''}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedServer(server);
|
||||
}}
|
||||
>
|
||||
<div className="d-flex align-items-center text-muted">
|
||||
<IconServer size={16} className="me-2" />
|
||||
<span className="flex-grow-1">{server.name}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<div className="dropdown-divider"></div>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => setServerListModalOpen(true)}
|
||||
>
|
||||
<IconSettings size={16} className="me-2" />
|
||||
Управление серверами
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedServer && (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handlePreviewConfig}
|
||||
disabled={serverFilters.length === 0}
|
||||
>
|
||||
<IconEye className="icon" />
|
||||
Просмотр
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-primary"
|
||||
onClick={copyConfigToClipboard}
|
||||
disabled={serverFilters.length === 0}
|
||||
>
|
||||
<IconCopy className="icon" />
|
||||
Копировать
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={() => handleSaveServerConfig(selectedServer.id)}
|
||||
disabled={loading || serverFilters.length === 0}
|
||||
>
|
||||
<IconDeviceFloppy className="icon" />
|
||||
Сохранить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handleBgpUpdate}
|
||||
disabled={bgpUpdateLoading}
|
||||
title="Запустить /system script run update_bgp_filter на выбранном MikroTik"
|
||||
>
|
||||
<IconRefresh className={`icon ${bgpUpdateLoading ? 'spin' : ''}`} />
|
||||
{bgpUpdateLoading ? 'Запуск...' : 'Обновить BGP фильтры'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
{/* Уведомления */}
|
||||
{error && (
|
||||
<div className="alert alert-danger alert-dismissible" role="alert">
|
||||
<IconAlertTriangle className="me-2" />
|
||||
{error}
|
||||
<button type="button" className="btn-close" onClick={() => setError('')}></button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="alert alert-success alert-dismissible" role="alert">
|
||||
<IconCheck className="me-2" />
|
||||
{success}
|
||||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="page-body">
|
||||
<div className="container-xl">
|
||||
{/* Уведомления */}
|
||||
{error && (
|
||||
<div className="alert alert-danger alert-dismissible" role="alert">
|
||||
<IconAlertTriangle className="me-2" />
|
||||
{error}
|
||||
<button type="button" className="btn-close" onClick={() => setError('')}></button>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="alert alert-success alert-dismissible" role="alert">
|
||||
<IconCheck className="me-2" />
|
||||
{success}
|
||||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||||
</div>
|
||||
)}
|
||||
<PageHeader
|
||||
title="Управление фильтрами frouting"
|
||||
icon={<IconFilter size={24} />}
|
||||
/>
|
||||
|
||||
{/* Селектор серверов на одной странице (Tabler UI) */}
|
||||
<div className="card mb-3">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{/* Селектор серверов на одной странице (Tabler UI) */}
|
||||
<div className="card mb-3">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title d-flex align-items-center gap-2">
|
||||
<IconServer className="icon" />
|
||||
@@ -1941,6 +1854,15 @@ function FilterManager() {
|
||||
<IconDeviceFloppy className="icon" />
|
||||
Сохранить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handleBgpUpdate}
|
||||
disabled={!selectedServer || bgpUpdateLoading}
|
||||
title="Запустить /system script run update_bgp_filter на выбранном MikroTik"
|
||||
>
|
||||
<IconRefresh className={`icon ${bgpUpdateLoading ? 'spin' : ''}`} />
|
||||
{bgpUpdateLoading ? 'Запуск...' : 'Обновить BGP фильтры'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2062,9 +1984,9 @@ function FilterManager() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Секция фильтров выбранного сервера */}
|
||||
{selectedServer && (
|
||||
<div className="card">
|
||||
{/* Секция фильтров выбранного сервера */}
|
||||
{selectedServer && (
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
@@ -2137,113 +2059,151 @@ function FilterManager() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="alert alert-info mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<IconGripVertical size={18} className="me-2" />
|
||||
<span>Перетащите строки за иконку <IconGripVertical size={14} className="mx-1" /> чтобы изменить приоритет</span>
|
||||
</div>
|
||||
<div className="text-muted small mt-1">
|
||||
<strong>Важно:</strong> В RouterOS правила внизу списка имеют <strong>высший приоритет</strong> (переопределяют верхние)
|
||||
</div>
|
||||
</div>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '40px' }}></th>
|
||||
<th className="w-1">
|
||||
<input
|
||||
className="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Выбрать все"
|
||||
checked={areAllProcessedSelected}
|
||||
onChange={toggleSelectAllProcessed}
|
||||
/>
|
||||
</th>
|
||||
<th style={{ width: '60px' }}>#</th>
|
||||
<th style={{ width: '22%' }} className="cursor-pointer" onClick={() => toggleSort('community')}>
|
||||
<span className="me-1">COMMUNITY</span>
|
||||
{sortBy === 'community' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
|
||||
</th>
|
||||
<th style={{ width: '22%' }} className="cursor-pointer" onClick={() => toggleSort('gateway')}>
|
||||
<span className="me-1">GATEWAY</span>
|
||||
{sortBy === 'gateway' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
|
||||
</th>
|
||||
<th style={{ width: '30%' }} className="cursor-pointer" onClick={() => toggleSort('description')}>
|
||||
<span className="me-1">ОПИСАНИЕ</span>
|
||||
{sortBy === 'description' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
|
||||
</th>
|
||||
<th style={{ width: '120px' }} className="text-end">ДЕЙСТВИЯ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<SortableContext
|
||||
items={serverFilters.filter(f => f != null).map(f => filterKey(f))}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<tbody>
|
||||
{serverFilters.filter(f => f != null).map((filter, index) => {
|
||||
const key = filterKey(filter);
|
||||
const isSelected = selectedFilterKeys.has(key);
|
||||
// Показываем только если совпадает с поиском
|
||||
if (filterSearch.trim()) {
|
||||
const search = filterSearch.trim().toLowerCase();
|
||||
const c = String(filter.community || '').toLowerCase();
|
||||
const g = String(filter.gateway || '').toLowerCase();
|
||||
const d = String(filter.description || '').toLowerCase();
|
||||
if (!c.includes(search) && !g.includes(search) && !d.includes(search)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<SortableFilterRow
|
||||
key={key}
|
||||
filter={filter}
|
||||
index={index}
|
||||
totalCount={serverFilters.filter(f => f != null).length}
|
||||
filterKey={key}
|
||||
isSelected={isSelected}
|
||||
onToggleSelect={() => toggleSelectFilter(key)}
|
||||
onEdit={() => handleEditFilter(filter, index)}
|
||||
onDelete={() => {
|
||||
setFilterToDelete(filter);
|
||||
setDeleteFilterModalOpen(true);
|
||||
}}
|
||||
communities={communities}
|
||||
baseAS={baseAS}
|
||||
selectedServerGateways={selectedServerGateways}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</SortableContext>
|
||||
</table>
|
||||
</div>
|
||||
</DndContext>
|
||||
{selectedFilterKeys.size > 0 && (
|
||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||
<div className="text-muted">Выбрано: {selectedFilterKeys.size}</div>
|
||||
<div className="btn-list">
|
||||
<button className="btn btn-outline-danger btn-sm" onClick={deleteSelectedFilters}>
|
||||
<IconTrash className="me-2" /> Удалить выбранные
|
||||
</button>
|
||||
<button className="btn btn-outline-secondary btn-sm" onClick={() => setSelectedFilterKeys(new Set())}>
|
||||
<IconX className="me-2" /> Отменить выбор
|
||||
</button>
|
||||
<div className="alert alert-info mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<IconGripVertical size={18} className="me-2" />
|
||||
<span>
|
||||
Перетащите строки за иконку{' '}
|
||||
<IconGripVertical size={14} className="mx-1" /> чтобы изменить приоритет
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-muted small mt-1">
|
||||
<strong>Важно:</strong> В RouterOS правила внизу списка имеют{' '}
|
||||
<strong>высший приоритет</strong> (переопределяют верхние)
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '40px' }}></th>
|
||||
<th className="w-1">
|
||||
<input
|
||||
className="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Выбрать все"
|
||||
checked={areAllProcessedSelected}
|
||||
onChange={toggleSelectAllProcessed}
|
||||
/>
|
||||
</th>
|
||||
<th style={{ width: '60px' }}>#</th>
|
||||
<th
|
||||
style={{ width: '22%' }}
|
||||
className="cursor-pointer"
|
||||
onClick={() => toggleSort('community')}
|
||||
>
|
||||
<span className="me-1">COMMUNITY</span>
|
||||
{sortBy === 'community' &&
|
||||
(sortDir === 'asc' ? (
|
||||
<IconSortAscending size={16} />
|
||||
) : (
|
||||
<IconSortDescending size={16} />
|
||||
))}
|
||||
</th>
|
||||
<th
|
||||
style={{ width: '22%' }}
|
||||
className="cursor-pointer"
|
||||
onClick={() => toggleSort('gateway')}
|
||||
>
|
||||
<span className="me-1">GATEWAY</span>
|
||||
{sortBy === 'gateway' &&
|
||||
(sortDir === 'asc' ? (
|
||||
<IconSortAscending size={16} />
|
||||
) : (
|
||||
<IconSortDescending size={16} />
|
||||
))}
|
||||
</th>
|
||||
<th
|
||||
style={{ width: '30%' }}
|
||||
className="cursor-pointer"
|
||||
onClick={() => toggleSort('description')}
|
||||
>
|
||||
<span className="me-1">ОПИСАНИЕ</span>
|
||||
{sortBy === 'description' &&
|
||||
(sortDir === 'asc' ? (
|
||||
<IconSortAscending size={16} />
|
||||
) : (
|
||||
<IconSortDescending size={16} />
|
||||
))}
|
||||
</th>
|
||||
<th style={{ width: '120px' }} className="text-end">
|
||||
ДЕЙСТВИЯ
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<SortableContext
|
||||
items={serverFilters.filter((f) => f != null).map((f) => filterKey(f))}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<tbody>
|
||||
{serverFilters
|
||||
.filter((f) => f != null)
|
||||
.map((filter, index) => {
|
||||
const key = filterKey(filter);
|
||||
const isSelected = selectedFilterKeys.has(key);
|
||||
// Показываем только если совпадает с поиском
|
||||
if (filterSearch.trim()) {
|
||||
const search = filterSearch.trim().toLowerCase();
|
||||
const c = String(filter.community || '').toLowerCase();
|
||||
const g = String(filter.gateway || '').toLowerCase();
|
||||
const d = String(filter.description || '').toLowerCase();
|
||||
if (!c.includes(search) && !g.includes(search) && !d.includes(search)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<SortableFilterRow
|
||||
key={key}
|
||||
filter={filter}
|
||||
index={index}
|
||||
totalCount={serverFilters.filter((f) => f != null).length}
|
||||
filterKey={key}
|
||||
isSelected={isSelected}
|
||||
onToggleSelect={() => toggleSelectFilter(key)}
|
||||
onEdit={() => handleEditFilter(filter, index)}
|
||||
onDelete={() => {
|
||||
setFilterToDelete(filter);
|
||||
setDeleteFilterModalOpen(true);
|
||||
}}
|
||||
communities={communities}
|
||||
baseAS={baseAS}
|
||||
selectedServerGateways={selectedServerGateways}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</SortableContext>
|
||||
</table>
|
||||
</div>
|
||||
</DndContext>
|
||||
{selectedFilterKeys.size > 0 && (
|
||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||
<div className="text-muted">Выбрано: {selectedFilterKeys.size}</div>
|
||||
<div className="btn-list">
|
||||
<button className="btn btn-outline-danger btn-sm" onClick={deleteSelectedFilters}>
|
||||
<IconTrash className="me-2" /> Удалить выбранные
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={() => setSelectedFilterKeys(new Set())}
|
||||
>
|
||||
<IconX className="me-2" /> Отменить выбор
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Модальные окна */}
|
||||
<FormModal
|
||||
@@ -2278,6 +2238,8 @@ function FilterManager() {
|
||||
value={newFilter.gateway}
|
||||
onChange={(val) => setNewFilter({ ...newFilter, gateway: val })}
|
||||
gateways={selectedServerGateways}
|
||||
pingMap={pingMap}
|
||||
routerId={getRouterIdForServer(selectedServer)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -2319,6 +2281,8 @@ function FilterManager() {
|
||||
value={editingFilter.gateway}
|
||||
onChange={(val) => setEditingFilter({ ...editingFilter, gateway: val })}
|
||||
gateways={selectedServerGateways}
|
||||
pingMap={pingMap}
|
||||
routerId={getRouterIdForServer(selectedServer)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -2597,7 +2561,7 @@ function FilterManager() {
|
||||
try {
|
||||
await api.post(`/server-configs`, { servers: updatedServers });
|
||||
setServers(updatedServers);
|
||||
} catch (error) {
|
||||
} catch (_error) {
|
||||
setError('Не удалось обновить статус сервера');
|
||||
}
|
||||
}}
|
||||
@@ -2717,7 +2681,7 @@ function FilterManager() {
|
||||
onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
|
||||
onConfirm={() => confirmState.onConfirm?.()}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,623 @@
|
||||
import { useState, useEffect, useMemo, useCallback } 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 = useCallback(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);
|
||||
}
|
||||
}, [serverId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (serverId) fetchAddressLists();
|
||||
else setData(null);
|
||||
}, [serverId, fetchAddressLists]);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
+27
-10
@@ -5,7 +5,6 @@ import {
|
||||
MiniMap,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
addEdge,
|
||||
MarkerType,
|
||||
Handle,
|
||||
Position,
|
||||
@@ -14,7 +13,10 @@ import '@xyflow/react/dist/style.css';
|
||||
import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize, IconSearch, IconX, IconRefresh } from '@tabler/icons-react';
|
||||
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 instanceRef = useRef(null);
|
||||
const containerRef = useRef(null);
|
||||
@@ -144,17 +146,32 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
}, [servers, connections]);
|
||||
|
||||
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) => {
|
||||
const style = getTunnelStyle(c.tunnelType);
|
||||
const baseLabel = c.tunnelType || 'TUNNEL';
|
||||
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 isHighlighted = highlightedEdges.has(edgeId);
|
||||
return {
|
||||
id: edgeId,
|
||||
source: String(c.from),
|
||||
target: String(c.to),
|
||||
label: ipLabel ? `${baseLabel} · ${ipLabel}` : baseLabel,
|
||||
label: fullLabel,
|
||||
type: 'smoothstep',
|
||||
style: {
|
||||
stroke: style.color,
|
||||
@@ -176,7 +193,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
animated: false,
|
||||
};
|
||||
});
|
||||
}, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId]);
|
||||
}, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId, pingMap]);
|
||||
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdgesData);
|
||||
|
||||
@@ -206,7 +223,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
});
|
||||
setSelectedNodeId(nodeId);
|
||||
setTimeout(() => setSelectedNodeId(null), 2000);
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}, []);
|
||||
|
||||
// Сброс раскладки: очищаем localStorage и пересоздаём ноды
|
||||
@@ -214,7 +231,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
if (typeof window !== 'undefined') {
|
||||
try {
|
||||
window.localStorage.removeItem(STORAGE_KEY);
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
setNodes((current) => {
|
||||
return current.map((n, i) => ({
|
||||
@@ -226,7 +243,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
if (instanceRef.current) {
|
||||
try {
|
||||
instanceRef.current.fitView({ padding: 0.2 });
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
}, 100);
|
||||
}, [setNodes, computeGridPosition]);
|
||||
@@ -360,7 +377,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
requestAnimationFrame(() => {
|
||||
try {
|
||||
inst.fitView({ padding: 0.2, includeHiddenNodes: true, minZoom: 0.2, maxZoom: 2 });
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -371,7 +388,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
const t = setTimeout(() => {
|
||||
try {
|
||||
i.fitView({ padding: 0.2, includeHiddenNodes: true, minZoom: 0.2, maxZoom: 2 });
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}, 50);
|
||||
return () => clearTimeout(t);
|
||||
}, [servers, connections]);
|
||||
@@ -385,7 +402,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
instanceRef.current.fitView({ padding: 0.2 });
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}, 60);
|
||||
}
|
||||
};
|
||||
|
||||
+422
-636
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState, useCallback } 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';
|
||||
@@ -6,6 +7,7 @@ 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,
|
||||
@@ -17,6 +19,85 @@ import {
|
||||
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 {
|
||||
@@ -57,8 +138,13 @@ function MikrotikBackupsManager() {
|
||||
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('');
|
||||
@@ -70,27 +156,87 @@ function MikrotikBackupsManager() {
|
||||
const [backupPage, setBackupPage] = useState(1);
|
||||
const backupPageSize = 10;
|
||||
|
||||
useEffect(() => {
|
||||
fetchServers();
|
||||
fetchUiSettings();
|
||||
const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
|
||||
|
||||
const fetchServers = useCallback(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);
|
||||
}
|
||||
}, [selectedServerId, notify]);
|
||||
|
||||
const fetchUiSettings = useCallback(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 = useCallback(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);
|
||||
}
|
||||
}, [notify]);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
fetchServers(signal);
|
||||
fetchUiSettings(signal);
|
||||
return () => controller.abort();
|
||||
}, [fetchServers, fetchUiSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedServerId) {
|
||||
fetchBackups(selectedServerId);
|
||||
const controller = new AbortController();
|
||||
fetchBackups(selectedServerId, controller.signal);
|
||||
return () => controller.abort();
|
||||
} else {
|
||||
setBackups([]);
|
||||
setSelectedKeys([]);
|
||||
}
|
||||
}, [selectedServerId]);
|
||||
}, [selectedServerId, fetchBackups]);
|
||||
|
||||
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],
|
||||
@@ -172,6 +318,42 @@ function MikrotikBackupsManager() {
|
||||
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) {
|
||||
@@ -192,56 +374,6 @@ function MikrotikBackupsManager() {
|
||||
setBackupServerIds(new Set());
|
||||
};
|
||||
|
||||
const fetchServers = async () => {
|
||||
try {
|
||||
setLoadingServers(true);
|
||||
const res = await api.get('/servers');
|
||||
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) {
|
||||
console.error('Error fetching servers for backups:', err);
|
||||
notify.error('Не удалось загрузить список серверов для бэкапов');
|
||||
} finally {
|
||||
setLoadingServers(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUiSettings = async () => {
|
||||
try {
|
||||
const res = await api.get('/ui-settings');
|
||||
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) {
|
||||
console.error('Error fetching UI settings for backups:', err);
|
||||
// мягко игнорируем, просто будут дефолты
|
||||
}
|
||||
};
|
||||
|
||||
const fetchBackups = async (serverId) => {
|
||||
if (!serverId) return;
|
||||
try {
|
||||
setLoadingBackups(true);
|
||||
setSelectedKeys([]);
|
||||
setDiffResult(null);
|
||||
const res = await api.get('/mikrotik/backups', { params: { serverId } });
|
||||
const items = res.data?.items || [];
|
||||
setBackups(items);
|
||||
} catch (err) {
|
||||
console.error('Error fetching backups:', err);
|
||||
notify.error('Не удалось загрузить список бэкапов MikroTik');
|
||||
} finally {
|
||||
setLoadingBackups(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectKey = (key) => {
|
||||
setSelectedKeys((prev) => {
|
||||
if (prev.includes(key)) {
|
||||
@@ -261,6 +393,7 @@ function MikrotikBackupsManager() {
|
||||
setViewLoading(true);
|
||||
setViewConfigKey(key);
|
||||
setViewConfigText('');
|
||||
setViewModalOpen(true);
|
||||
const res = await api.get('/mikrotik/backups/item', { params: { key } });
|
||||
setViewConfigText(res.data?.config || '');
|
||||
} catch (err) {
|
||||
@@ -277,6 +410,7 @@ function MikrotikBackupsManager() {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setDiffModalOpen(true);
|
||||
setDiffLoading(true);
|
||||
setDiffResult(null);
|
||||
const res = await api.post('/mikrotik/backups/diff', {
|
||||
@@ -426,7 +560,7 @@ function MikrotikBackupsManager() {
|
||||
<div className="page">
|
||||
<PageHeader
|
||||
title="MikroTik Backups"
|
||||
pretitle="Бэкапы конфигурации через REST API + S3"
|
||||
icon={<IconDownload size={24} />}
|
||||
meta={`Текущий сервер: ${currentServerLabel}`}
|
||||
actions={actions}
|
||||
/>
|
||||
@@ -730,94 +864,133 @@ function MikrotikBackupsManager() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(viewConfigKey || diffResult) && (
|
||||
<div className="row mt-4">
|
||||
{viewConfigKey && (
|
||||
<div className={diffResult ? 'col-md-6' : 'col-12'}>
|
||||
<div className="card">
|
||||
<div className="card-header d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="card-title mb-0">Содержимое бэкапа</div>
|
||||
<div className="text-muted small text-truncate" title={viewConfigKey}>
|
||||
{viewConfigKey}
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={() => handleCopyToClipboard(viewConfigText)}
|
||||
disabled={!viewConfigText}
|
||||
>
|
||||
<IconCopy size={16} className="me-1" />
|
||||
Копировать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{viewLoading ? (
|
||||
<TableSkeleton rows={6} columns={1} />
|
||||
) : (
|
||||
<pre
|
||||
className="mb-0"
|
||||
style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
|
||||
>
|
||||
{viewConfigText || '# Нет данных для отображения'}
|
||||
</pre>
|
||||
)}
|
||||
</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>
|
||||
|
||||
{diffResult && (
|
||||
<div className={viewConfigKey ? 'col-md-6 mt-3 mt-md-0' : 'col-12'}>
|
||||
<div className="card">
|
||||
<div className="card-header d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="card-title mb-0">Сравнение бэкапов</div>
|
||||
<div className="text-muted small">
|
||||
{diffResult.same
|
||||
? 'Конфигурации идентичны'
|
||||
: 'Конфигурации отличаются — проверьте различия перед откатом.'}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div className="card-body">
|
||||
{diffLoading ? (
|
||||
<TableSkeleton rows={6} columns={2} />
|
||||
) : (
|
||||
<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>
|
||||
<pre
|
||||
className="mb-0"
|
||||
style={{ maxHeight: 360, overflow: 'auto', fontSize: 12 }}
|
||||
>
|
||||
{diffResult.configA || '# пусто'}
|
||||
</pre>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="mb-2 small text-muted text-truncate" title={diffResult.b?.key}>
|
||||
B: {diffResult.b?.key}
|
||||
</div>
|
||||
<pre
|
||||
className="mb-0"
|
||||
style={{ maxHeight: 360, overflow: 'auto', fontSize: 12 }}
|
||||
>
|
||||
{diffResult.configB || '# пусто'}
|
||||
</pre>
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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: _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;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useNotify } from './components/NotifyProvider.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||
import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
|
||||
import Tooltip from './components/Tooltip.jsx';
|
||||
@@ -248,6 +249,7 @@ function NetworkConfigManager() {
|
||||
fetchServers();
|
||||
fetchIpsecPasswords();
|
||||
fetchUiSettings();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- init-only, fetch functions defined below
|
||||
}, []);
|
||||
|
||||
const fetchUiSettings = async () => {
|
||||
@@ -392,6 +394,7 @@ function NetworkConfigManager() {
|
||||
label: getServerLabel(id),
|
||||
server: getServerInfo(id),
|
||||
}));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerInfo/getServerLabel are stable helpers
|
||||
}, [config.gateways, config.tunnelInterfaces, config.ipPools, servers]);
|
||||
|
||||
// === Фильтрация ===
|
||||
@@ -430,6 +433,7 @@ function NetworkConfigManager() {
|
||||
}
|
||||
|
||||
return result;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerInfo/getServerLabel/gatewayTypeFilter are stable
|
||||
}, [config.gateways, providerFilter, serverFilter, typeFilter, searchTerm, servers]);
|
||||
|
||||
const filteredInterfaces = useMemo(() => {
|
||||
@@ -455,6 +459,7 @@ function NetworkConfigManager() {
|
||||
}
|
||||
|
||||
return result;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerLabel is stable helper
|
||||
}, [config.tunnelInterfaces, typeFilter, serverFilter, searchTerm, servers]);
|
||||
|
||||
const filteredPools = useMemo(() => {
|
||||
@@ -467,7 +472,7 @@ function NetworkConfigManager() {
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
result = result.filter(p => {
|
||||
const server = getServerInfo(p.serverId);
|
||||
const _server = getServerInfo(p.serverId);
|
||||
return (
|
||||
p.name?.toLowerCase().includes(term) ||
|
||||
p.cidr?.toLowerCase().includes(term) ||
|
||||
@@ -478,6 +483,7 @@ function NetworkConfigManager() {
|
||||
}
|
||||
|
||||
return result;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerInfo/getServerLabel are stable helpers
|
||||
}, [config.ipPools, serverFilter, searchTerm, servers]);
|
||||
|
||||
// === Группировка по серверам ===
|
||||
@@ -527,6 +533,7 @@ function NetworkConfigManager() {
|
||||
});
|
||||
|
||||
return grouped;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerCategory is stable helper
|
||||
}, [gatewaysByServer, servers]);
|
||||
|
||||
const interfacesByCategory = useMemo(() => {
|
||||
@@ -546,6 +553,7 @@ function NetworkConfigManager() {
|
||||
});
|
||||
|
||||
return grouped;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- getServerCategory is stable helper
|
||||
}, [interfacesByServer, servers]);
|
||||
|
||||
// === Сброс фильтров ===
|
||||
@@ -912,7 +920,7 @@ function NetworkConfigManager() {
|
||||
return;
|
||||
}
|
||||
|
||||
const invalidPairs = templateServerPairs.filter((pair, index) => {
|
||||
const invalidPairs = templateServerPairs.filter((pair, _index) => {
|
||||
if (!pair.server1 || !pair.server2) {
|
||||
return true;
|
||||
}
|
||||
@@ -1273,7 +1281,7 @@ function NetworkConfigManager() {
|
||||
};
|
||||
|
||||
// === Генерация IP из пула ===
|
||||
const generateIpFromPool = (cidr, usedIps, excludeIp = null, forRemote = false, pairedLocalIp = null) => {
|
||||
const generateIpFromPool = (cidr, usedIps, _excludeIp = null, forRemote = false, pairedLocalIp = null) => {
|
||||
// Парсим CIDR (например, "10.10.0.0/24")
|
||||
const [network, prefixLength] = cidr.split('/');
|
||||
if (!network || !prefixLength) {
|
||||
@@ -1589,6 +1597,7 @@ function NetworkConfigManager() {
|
||||
}
|
||||
return a.type.localeCompare(b.type);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- generatePtrZone/getServerInfo are stable helpers
|
||||
}, [config.tunnelInterfaces, servers, globalPtrZoneReplaceFrom, globalPtrZoneReplaceTo]);
|
||||
|
||||
// === Фильтрация реестра IP ===
|
||||
@@ -1649,7 +1658,7 @@ function NetworkConfigManager() {
|
||||
};
|
||||
|
||||
// === CRUD для IPSec Passwords ===
|
||||
const handleAddIpsecPassword = () => {
|
||||
const _handleAddIpsecPassword = () => {
|
||||
setEditingIpsecPassword({ name: '', password: '', description: '' });
|
||||
setIpsecPasswordModalMode('add');
|
||||
setIpsecPasswordModalOpen(true);
|
||||
@@ -2020,7 +2029,7 @@ function NetworkConfigManager() {
|
||||
};
|
||||
|
||||
// === Генерация кода MikroTik для рекурсивных маршрутов ===
|
||||
const generateMikrotikRecursiveRoutes = async () => {
|
||||
const _generateMikrotikRecursiveRoutes = async () => {
|
||||
const recursiveGateways = (config.gateways || []).filter(gw => gw.type === 'recursive');
|
||||
|
||||
const blocks = [];
|
||||
@@ -2072,7 +2081,7 @@ function NetworkConfigManager() {
|
||||
}
|
||||
|
||||
// Обрабатываем каждый родительский gateway
|
||||
parentGatewaysList.forEach((parentRef, parentIndex) => {
|
||||
parentGatewaysList.forEach((parentRef, _parentIndex) => {
|
||||
const parent = getParentGateway(parentRef.id);
|
||||
|
||||
if (!parent) {
|
||||
@@ -2263,7 +2272,7 @@ function NetworkConfigManager() {
|
||||
if (obj.t === 'log') console.log('[MikroTik apply]', obj.msg, obj);
|
||||
else if (obj.t === 'result') finalData = obj;
|
||||
else if (obj.t === 'error') finalData = { ok: false, error: obj.error, mikrotikRequests: obj.mikrotikRequests };
|
||||
} catch (_) {}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
}
|
||||
if (buffer.trim()) {
|
||||
@@ -2271,7 +2280,7 @@ function NetworkConfigManager() {
|
||||
const obj = JSON.parse(buffer);
|
||||
if (obj.t === 'result') finalData = obj;
|
||||
else if (obj.t === 'error') finalData = { ok: false, error: obj.error, mikrotikRequests: obj.mikrotikRequests };
|
||||
} catch (_) {}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
data = finalData || {};
|
||||
} else {
|
||||
@@ -2402,7 +2411,7 @@ function NetworkConfigManager() {
|
||||
|
||||
let validRoutesCount = 0;
|
||||
|
||||
parentGatewaysList.forEach((parentRef, parentIndex) => {
|
||||
parentGatewaysList.forEach((parentRef, _parentIndex) => {
|
||||
const parent = getParentGateway(parentRef.id);
|
||||
|
||||
if (!parent) {
|
||||
@@ -2541,7 +2550,7 @@ function NetworkConfigManager() {
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
notify.success('Код скопирован в буфер обмена!');
|
||||
} catch (err) {
|
||||
} catch (_err) {
|
||||
notify.error('Не удалось скопировать код');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
@@ -2588,7 +2597,7 @@ function NetworkConfigManager() {
|
||||
}, [generatedMikrotikCode]);
|
||||
|
||||
// === Получение названия типа блока ===
|
||||
const getBlockTypeLabel = (type) => {
|
||||
const _getBlockTypeLabel = (type) => {
|
||||
switch (type) {
|
||||
case 'recursive-routes':
|
||||
return 'Рекурсивные маршруты';
|
||||
@@ -2966,11 +2975,11 @@ function NetworkConfigManager() {
|
||||
// === Рендер карточки Gateway ===
|
||||
const renderGatewayCard = (gateway) => {
|
||||
const server = getServerInfo(gateway.serverId);
|
||||
const provider = server?.provider || '';
|
||||
const _provider = server?.provider || '';
|
||||
const serverCountry = server?.country || '';
|
||||
const gatewayCountry = gateway.country || '';
|
||||
const displayCountry = gatewayCountry || serverCountry;
|
||||
const gatewayType = GATEWAY_TYPES.find(t => t.value === gateway.type) || GATEWAY_TYPES[0];
|
||||
const _gatewayType = GATEWAY_TYPES.find(t => t.value === gateway.type) || GATEWAY_TYPES[0];
|
||||
|
||||
// Поддержка старого формата (parentGatewayId) и нового (parentGateways)
|
||||
const parentGatewaysList = gateway.type === 'recursive'
|
||||
@@ -3134,7 +3143,7 @@ function NetworkConfigManager() {
|
||||
const interfaceTypeColor = getInterfaceTypeColor(iface.type);
|
||||
|
||||
// Определяем отображаемый IP для зеленого блока (remote IP другого сервера)
|
||||
const displayIp = displayRemoteIp !== '—' ? displayRemoteIp : displayLocalIp;
|
||||
const _displayIp = displayRemoteIp !== '—' ? displayRemoteIp : displayLocalIp;
|
||||
|
||||
return (
|
||||
<div className="card" style={{ borderRadius: '12px', maxWidth: '100%' }}>
|
||||
@@ -3231,101 +3240,91 @@ function NetworkConfigManager() {
|
||||
|
||||
return (
|
||||
<div className="network-config-manager">
|
||||
{/* Page Header */}
|
||||
<div className="page-header d-print-none mb-4">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<div className="page-pretitle">Управление</div>
|
||||
<h2 className="page-title d-flex align-items-center">
|
||||
<IconNetwork className="me-2" size={28} />
|
||||
Сетевые настройки
|
||||
</h2>
|
||||
</div>
|
||||
<div className="col-auto ms-auto d-print-none">
|
||||
<div className="btn-list">
|
||||
{/* Tabs as button group */}
|
||||
<div className="btn-group me-2" role="group">
|
||||
<button
|
||||
className={`btn ${activeTab === 'gateways' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('gateways')}
|
||||
>
|
||||
<IconWorld size={16} className="me-1 d-none d-sm-inline" />
|
||||
Gateways
|
||||
<span className={`badge ms-1 ${activeTab === 'gateways' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.gateways?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeTab === 'interfaces' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('interfaces')}
|
||||
>
|
||||
<IconRouter size={16} className="me-1 d-none d-sm-inline" />
|
||||
Интерфейсы
|
||||
<span className={`badge ms-1 ${activeTab === 'interfaces' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.tunnelInterfaces?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeTab === 'pools' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('pools')}
|
||||
>
|
||||
<IconDatabase size={16} className="me-1 d-none d-sm-inline" />
|
||||
IP пулы
|
||||
<span className={`badge ms-1 ${activeTab === 'pools' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.ipPools?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeTab === 'ip-registry' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('ip-registry')}
|
||||
>
|
||||
<IconList size={16} className="me-1 d-none d-sm-inline" />
|
||||
Реестр IP
|
||||
<span className={`badge ms-1 ${activeTab === 'ip-registry' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{ipRegistry.length}
|
||||
</span>
|
||||
{ipRegistry.some(item => item.hasConflict) && (
|
||||
<span className="badge bg-danger ms-1" title="Обнаружены конфликты IP адресов">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PageHeader
|
||||
title="Сетевые настройки"
|
||||
icon={<IconNetwork size={24} />}
|
||||
actions={
|
||||
<div className="btn-list">
|
||||
<div className="btn-group me-2" role="group">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={() => { fetchConfig(); fetchServers(); }}
|
||||
disabled={loading}
|
||||
className={`btn ${activeTab === 'gateways' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('gateways')}
|
||||
>
|
||||
<IconRefresh size={16} className={loading ? 'spin' : ''} />
|
||||
<IconWorld size={16} className="me-1 d-none d-sm-inline" />
|
||||
Gateways
|
||||
<span className={`badge ms-1 ${activeTab === 'gateways' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.gateways?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handleGenerateMikrotikCode}
|
||||
disabled={loading || (
|
||||
(config.gateways || []).filter(gw => gw.type === 'recursive').length === 0 &&
|
||||
(config.tunnelInterfaces || []).filter(i => i.serverId && i.serverId2 && i.localIp && i.remoteIp).length === 0
|
||||
className={`btn ${activeTab === 'interfaces' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('interfaces')}
|
||||
>
|
||||
<IconRouter size={16} className="me-1 d-none d-sm-inline" />
|
||||
Интерфейсы
|
||||
<span className={`badge ms-1 ${activeTab === 'interfaces' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.tunnelInterfaces?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeTab === 'pools' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('pools')}
|
||||
>
|
||||
<IconDatabase size={16} className="me-1 d-none d-sm-inline" />
|
||||
IP пулы
|
||||
<span className={`badge ms-1 ${activeTab === 'pools' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{config.ipPools?.length || 0}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeTab === 'ip-registry' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('ip-registry')}
|
||||
>
|
||||
<IconList size={16} className="me-1 d-none d-sm-inline" />
|
||||
Реестр IP
|
||||
<span className={`badge ms-1 ${activeTab === 'ip-registry' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
|
||||
{ipRegistry.length}
|
||||
</span>
|
||||
{ipRegistry.some(item => item.hasConflict) && (
|
||||
<span className="badge bg-danger ms-1" title="Обнаружены конфликты IP адресов">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
title="Генерировать код MikroTik для рекурсивных маршрутов и IP адресов интерфейсов"
|
||||
>
|
||||
<IconCode size={16} className="me-1" />
|
||||
Код для MikroTik
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<IconDatabase size={16} className={`me-1 ${saving ? 'spin' : ''}`} />
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={() => { fetchConfig(); fetchServers(); }}
|
||||
disabled={loading}
|
||||
>
|
||||
<IconRefresh size={16} className={loading ? 'spin' : ''} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handleGenerateMikrotikCode}
|
||||
disabled={loading || (
|
||||
(config.gateways || []).filter(gw => gw.type === 'recursive').length === 0 &&
|
||||
(config.tunnelInterfaces || []).filter(i => i.serverId && i.serverId2 && i.localIp && i.remoteIp).length === 0
|
||||
)}
|
||||
title="Генерировать код MikroTik для рекурсивных маршрутов и IP адресов интерфейсов"
|
||||
>
|
||||
<IconCode size={16} className="me-1" />
|
||||
Код для MikroTik
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<IconDatabase size={16} className={`me-1 ${saving ? 'spin' : ''}`} />
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="card mb-3">
|
||||
@@ -3674,6 +3673,17 @@ function NetworkConfigManager() {
|
||||
{/* Interfaces Tab */}
|
||||
{activeTab === 'interfaces' && (
|
||||
<>
|
||||
<div className="card mb-3">
|
||||
<div className="card-body d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="text-muted small">
|
||||
Настройки OSPF вынесены в отдельный раздел проекта.
|
||||
</div>
|
||||
<a className="btn btn-outline-primary btn-sm" href="/ospf-tools">
|
||||
Открыть Инструменты OSPF
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredInterfaces.length === 0 ? (
|
||||
<div className="card">
|
||||
<div className="card-body text-center py-5">
|
||||
@@ -5529,7 +5539,7 @@ function NetworkConfigManager() {
|
||||
<div className="row g-2">
|
||||
{GATEWAY_TEMPLATES.map(template => {
|
||||
// Генерируем предпросмотр IP адресов если есть базовый IP и сервер
|
||||
const previewIps = template.gateways.map((gw, idx) => {
|
||||
const previewIps = template.gateways.map((gw, _idx) => {
|
||||
// Для прямых gateways показываем IP сервера, если выбран
|
||||
if (gw.type === 'direct' && templateServerId) {
|
||||
const server = getServerInfo(templateServerId);
|
||||
@@ -5707,7 +5717,7 @@ function NetworkConfigManager() {
|
||||
<label className="form-label small">Родительские gateway/интерфейсы</label>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
{(gw.parentGateways || []).map((parent, parentIndex) => {
|
||||
const parentInfo = getParentGateway(parent.id, templateGateways);
|
||||
const _parentInfo = getParentGateway(parent.id, templateGateways);
|
||||
return (
|
||||
<div key={parentIndex} className="d-flex align-items-center gap-2">
|
||||
<div className="flex-grow-1">
|
||||
|
||||
@@ -0,0 +1,476 @@
|
||||
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 [alertSettings, setAlertSettings] = useState({});
|
||||
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 uiAlertSettings =
|
||||
uiSettings.alertSettings && typeof uiSettings.alertSettings === 'object'
|
||||
? uiSettings.alertSettings
|
||||
: {};
|
||||
const cache = cacheRes?.data || {};
|
||||
const ttlSeconds = Math.max(
|
||||
0,
|
||||
parseInt(uiSettings.networkMapPingCacheSeconds, 10) || 0
|
||||
);
|
||||
setPingCacheSeconds(ttlSeconds);
|
||||
setAlertSettings(uiAlertSettings);
|
||||
|
||||
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(':');
|
||||
|
||||
/**
|
||||
* Запросить пинг для всех соединений или для конкретного подмножества.
|
||||
* Если передать force=true, игнорирует TTL кеша по пингу.
|
||||
*/
|
||||
const requestPings = useCallback(async (options = {}) => {
|
||||
const { connections: targetConnections, force = false } = options;
|
||||
const sourceConnections =
|
||||
Array.isArray(targetConnections) && targetConnections.length > 0 ? targetConnections : connections;
|
||||
if (sourceConnections.length === 0) return;
|
||||
pingAbortRef.current = false;
|
||||
setPingLoading(true);
|
||||
const ttlMs = Math.max(0, (pingCacheSeconds || 0) * 1000);
|
||||
|
||||
const tasks = [];
|
||||
sourceConnections.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 (!force && 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(':');
|
||||
|
||||
/**
|
||||
* Запросить скорость для всех соединений или подмножества.
|
||||
* Если передать force=true, принудительно выполняет новый speed-test (игнорируя кеш на бэкенде).
|
||||
*/
|
||||
const requestSpeeds = useCallback(async (options = {}) => {
|
||||
const { connections: targetConnections, force: _force = false } = options;
|
||||
const sourceConnections =
|
||||
Array.isArray(targetConnections) && targetConnections.length > 0 ? targetConnections : connections;
|
||||
const withSpeed = sourceConnections.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,
|
||||
forceRefresh: true, // ручной запуск со страницы карты сети всегда должен делать новый замер
|
||||
},
|
||||
{ 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]);
|
||||
|
||||
const handleRefreshPingForConnection = useCallback(
|
||||
(connection) => {
|
||||
if (!connection) return;
|
||||
requestPings({ connections: [connection], force: true });
|
||||
},
|
||||
[requestPings]
|
||||
);
|
||||
|
||||
const handleRefreshSpeedForConnection = useCallback(
|
||||
(connection) => {
|
||||
if (!connection) return;
|
||||
requestSpeeds({ connections: [connection], force: true });
|
||||
},
|
||||
[requestSpeeds]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
fetchData(controller.signal);
|
||||
return () => controller.abort();
|
||||
}, [fetchData]);
|
||||
|
||||
// Пинг и скорость не запускаются автоматически при открытии карты (даже если кеш просрочен).
|
||||
// Обновление только по кнопкам «Пинг» и «Скорость» или по планировщику.
|
||||
|
||||
const handleRefreshPings = () => {
|
||||
requestPings();
|
||||
};
|
||||
|
||||
const handleRefreshSpeeds = () => {
|
||||
requestSpeeds({ force: true });
|
||||
};
|
||||
|
||||
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}
|
||||
onRefreshPingForConnection={handleRefreshPingForConnection}
|
||||
onRefreshSpeedForConnection={handleRefreshSpeedForConnection}
|
||||
pingLoading={pingLoading}
|
||||
speedLoading={speedLoading}
|
||||
alertSettings={alertSettings}
|
||||
/>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,500 @@
|
||||
import { useEffect, useMemo, useState, useCallback } from 'react';
|
||||
import { IconDatabase, IconRefresh, IconRoute2, IconWand } from '@tabler/icons-react';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import api from './lib/api.js';
|
||||
import { useNotify } from './components/NotifyProvider.jsx';
|
||||
|
||||
const OSPF_COST_STEP = 10;
|
||||
|
||||
function moveInArray(arr, fromIndex, toIndex) {
|
||||
if (fromIndex < 0 || toIndex < 0 || fromIndex >= arr.length || toIndex >= arr.length) return arr;
|
||||
const copy = [...arr];
|
||||
const [moved] = copy.splice(fromIndex, 1);
|
||||
copy.splice(toIndex, 0, moved);
|
||||
return copy;
|
||||
}
|
||||
|
||||
function isUnknownOspfInterfaceName(name) {
|
||||
const value = String(name || '').trim();
|
||||
if (!value) return true;
|
||||
if (value.startsWith('*')) return true;
|
||||
if (value.toLowerCase() === 'unknown') return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function getOspfRouterIdentity(server) {
|
||||
if (!server || typeof server !== 'object') {
|
||||
return { key: 'unknown', label: 'Unknown router' };
|
||||
}
|
||||
const host = String(server.mikrotikHost || server.ip || server.dns || server.id || '').trim();
|
||||
const port = String(server.mikrotikPort || 80).trim();
|
||||
const user = String(server.mikrotikUser || 'admin').trim();
|
||||
const key = `${host}::${port}::${user}`;
|
||||
const label = host || String(server.dns || server.ip || server.id || 'Unknown router');
|
||||
return { key, label };
|
||||
}
|
||||
|
||||
function buildOspfTemplatesFromRouterResults(routerResults = [], servers = []) {
|
||||
const serverById = new Map((servers || []).map((s) => [String(s.id || s.ip || s.dns || ''), s]));
|
||||
const byComposite = new Map();
|
||||
|
||||
(routerResults || []).forEach((result) => {
|
||||
const serverId = String(result?.serverId || '').trim();
|
||||
if (!serverId) return;
|
||||
const server = serverById.get(serverId) || {
|
||||
id: serverId,
|
||||
ip: String(result?.serverLabel || serverId),
|
||||
dns: String(result?.serverLabel || ''),
|
||||
};
|
||||
const identity = getOspfRouterIdentity(server);
|
||||
const templates = Array.isArray(result?.templates) ? result.templates : [];
|
||||
|
||||
templates.forEach((tpl) => {
|
||||
const interfaceName = String(tpl?.interfaceName || '').trim();
|
||||
if (isUnknownOspfInterfaceName(interfaceName)) return;
|
||||
const area = String(tpl?.area || '').trim() || 'backbone';
|
||||
const numericCost = Number(tpl?.cost);
|
||||
const cost = Number.isFinite(numericCost) && numericCost >= 0 ? numericCost : OSPF_COST_STEP;
|
||||
|
||||
const compositeKey = `${identity.key}::${area.toLowerCase()}::${interfaceName.toUpperCase()}`;
|
||||
if (byComposite.has(compositeKey)) return;
|
||||
|
||||
byComposite.set(compositeKey, {
|
||||
key: compositeKey,
|
||||
rosId: tpl?.id || null,
|
||||
serverId,
|
||||
routerKey: identity.key,
|
||||
routerLabel: identity.label,
|
||||
interfaceName,
|
||||
area,
|
||||
cost,
|
||||
active: !tpl?.disabled,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return Array.from(byComposite.values());
|
||||
}
|
||||
|
||||
function buildOptimizerProbabilityMap(routeOptimizerData, servers = []) {
|
||||
const homes = Array.isArray(routeOptimizerData?.homes) ? routeOptimizerData.homes : [];
|
||||
const byRef = new Map();
|
||||
(servers || []).forEach((server) => {
|
||||
[server?.id, server?.ip, server?.dns]
|
||||
.filter(Boolean)
|
||||
.forEach((ref) => byRef.set(String(ref), server));
|
||||
});
|
||||
|
||||
const probabilities = {};
|
||||
|
||||
homes.forEach((entry) => {
|
||||
const homeRefCandidates = [
|
||||
entry?.home?.id,
|
||||
entry?.home?.ip,
|
||||
entry?.home?.dns,
|
||||
].filter(Boolean).map(String);
|
||||
const homeServer = homeRefCandidates.map((ref) => byRef.get(ref)).find(Boolean);
|
||||
if (!homeServer) return;
|
||||
|
||||
const identity = getOspfRouterIdentity(homeServer);
|
||||
const candidates = Array.isArray(entry?.homeToJumphostCandidates)
|
||||
? [...entry.homeToJumphostCandidates]
|
||||
: [];
|
||||
candidates.sort((a, b) =>
|
||||
Number(b?.probabilityOptimal || 0) - Number(a?.probabilityOptimal || 0) ||
|
||||
Number(b?.score || 0) - Number(a?.score || 0)
|
||||
);
|
||||
|
||||
const uniqueIface = [];
|
||||
const seen = new Set();
|
||||
candidates.forEach((candidate) => {
|
||||
const iface = String(candidate?.interfaceName || '').trim();
|
||||
if (!iface) return;
|
||||
const key = iface.toUpperCase();
|
||||
if (seen.has(key)) return;
|
||||
seen.add(key);
|
||||
uniqueIface.push(candidate);
|
||||
});
|
||||
|
||||
uniqueIface.forEach((candidate, _idx) => {
|
||||
const iface = String(candidate?.interfaceName || '').trim();
|
||||
const hintKey = `${identity.key}::${iface.toUpperCase()}`;
|
||||
const probabilityOptimal = Number(candidate?.probabilityOptimal || 0);
|
||||
const prev = probabilities[hintKey];
|
||||
if (prev == null || probabilityOptimal > prev) {
|
||||
probabilities[hintKey] = probabilityOptimal;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return probabilities;
|
||||
}
|
||||
|
||||
export default function OspfToolsPage() {
|
||||
const notify = useNotify();
|
||||
const [servers, setServers] = useState([]);
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [optimizerLoading, setOptimizerLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [dragging, setDragging] = useState(null);
|
||||
const [optimizerProbabilities, setOptimizerProbabilities] = useState({});
|
||||
|
||||
const groupedByRouter = useMemo(() => {
|
||||
const grouped = {};
|
||||
(templates || []).forEach((item) => {
|
||||
const sid = String(item?.serverId || '');
|
||||
const server = servers.find((s) => String(s.id || s.ip || s.dns || '') === sid);
|
||||
const identity = getOspfRouterIdentity(server || { id: sid, ip: sid });
|
||||
if (!grouped[identity.key]) {
|
||||
grouped[identity.key] = {
|
||||
routerKey: identity.key,
|
||||
routerLabel: identity.label,
|
||||
representativeServerId: sid,
|
||||
areas: {},
|
||||
};
|
||||
}
|
||||
if (!grouped[identity.key].areas[item.area]) grouped[identity.key].areas[item.area] = [];
|
||||
grouped[identity.key].areas[item.area].push(item);
|
||||
});
|
||||
|
||||
return Object.values(grouped).map((group) => ({
|
||||
...group,
|
||||
areas: Object.entries(group.areas)
|
||||
.map(([area, areaItems]) => ({
|
||||
area,
|
||||
items: [...areaItems].sort((a, b) => Number(a?.cost || 0) - Number(b?.cost || 0)),
|
||||
}))
|
||||
.sort((a, b) => a.area.localeCompare(b.area)),
|
||||
}));
|
||||
}, [templates, servers]);
|
||||
const optimalHints = useMemo(() => {
|
||||
const hints = {};
|
||||
|
||||
groupedByRouter.forEach((routerGroup) => {
|
||||
(routerGroup.areas || []).forEach((areaGroup) => {
|
||||
const ranked = [...(areaGroup.items || [])]
|
||||
.map((item) => {
|
||||
const ifaceKey = `${routerGroup.routerKey}::${String(item.interfaceName || '').toUpperCase()}`;
|
||||
const probabilityOptimal = Number(optimizerProbabilities[ifaceKey] || 0);
|
||||
return { item, probabilityOptimal };
|
||||
})
|
||||
.sort((a, b) =>
|
||||
Number(b.probabilityOptimal || 0) - Number(a.probabilityOptimal || 0) ||
|
||||
String(a.item.interfaceName || '').localeCompare(String(b.item.interfaceName || ''))
|
||||
);
|
||||
|
||||
ranked.forEach(({ item, probabilityOptimal }, idx) => {
|
||||
const hintKey = `${routerGroup.routerKey}::${areaGroup.area}::${String(item.interfaceName || '').toUpperCase()}`;
|
||||
hints[hintKey] = {
|
||||
optimalCost: (idx + 1) * OSPF_COST_STEP,
|
||||
probabilityOptimal,
|
||||
};
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return hints;
|
||||
}, [groupedByRouter, optimizerProbabilities]);
|
||||
const routerColumnClass = groupedByRouter.length > 1 ? 'col-12 col-xxl-6' : 'col-12';
|
||||
|
||||
const loadServers = async () => {
|
||||
try {
|
||||
const response = await api.get('/servers');
|
||||
setServers(Array.isArray(response.data) ? response.data : []);
|
||||
} catch (error) {
|
||||
console.error('Failed to load servers:', error);
|
||||
setServers([]);
|
||||
}
|
||||
};
|
||||
|
||||
const loadOspf = useCallback(async ({ silent = false } = {}) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get('/mikrotik/ospf-interface-templates');
|
||||
const results = Array.isArray(response.data?.results) ? response.data.results : [];
|
||||
const errors = Array.isArray(response.data?.errors) ? response.data.errors : [];
|
||||
setTemplates(buildOspfTemplatesFromRouterResults(results, servers));
|
||||
|
||||
if (!silent) {
|
||||
if (results.length > 0) notify.success(`OSPF загружен: ${results.length} роутер(ов)`);
|
||||
else notify.warning('OSPF Interface Template не найдены');
|
||||
if (errors.length > 0) notify.warning(`Ошибки чтения OSPF: ${errors.length}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load OSPF:', error);
|
||||
if (!silent) notify.error('Не удалось загрузить OSPF с MikroTik');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [servers, notify]);
|
||||
|
||||
const loadOptimizerHints = useCallback(async ({ silent = false } = {}) => {
|
||||
setOptimizerLoading(true);
|
||||
try {
|
||||
const response = await api.get('/route-optimizer', { timeout: 30000 });
|
||||
const probabilities = buildOptimizerProbabilityMap(response?.data, servers);
|
||||
setOptimizerProbabilities(probabilities);
|
||||
return probabilities;
|
||||
} catch (error) {
|
||||
console.error('Failed to load route optimizer hints:', error);
|
||||
setOptimizerProbabilities({});
|
||||
if (!silent) notify.warning('Не удалось загрузить рекомендации из оптимизатора маршрутов');
|
||||
return {};
|
||||
} finally {
|
||||
setOptimizerLoading(false);
|
||||
}
|
||||
}, [servers, notify]);
|
||||
|
||||
useEffect(() => {
|
||||
loadServers();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (servers.length === 0) return;
|
||||
loadOspf({ silent: true });
|
||||
loadOptimizerHints({ silent: true });
|
||||
}, [servers.length, loadOspf, loadOptimizerHints]);
|
||||
|
||||
const onDrop = (routerKey, area, targetKey) => {
|
||||
if (!dragging || dragging.routerKey !== routerKey || dragging.area !== area) return;
|
||||
if (dragging.key === targetKey) {
|
||||
setDragging(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setTemplates((prev) => {
|
||||
const current = prev
|
||||
.filter((item) => item.routerKey === routerKey && String(item.area) === String(area))
|
||||
.sort((a, b) => Number(a?.cost || 0) - Number(b?.cost || 0));
|
||||
const fromIndex = current.findIndex((item) => item.key === dragging.key);
|
||||
const toIndex = current.findIndex((item) => item.key === targetKey);
|
||||
if (fromIndex < 0 || toIndex < 0) return prev;
|
||||
|
||||
const reordered = moveInArray(current, fromIndex, toIndex).map((item, idx) => ({
|
||||
...item,
|
||||
cost: (idx + 1) * OSPF_COST_STEP,
|
||||
}));
|
||||
|
||||
const other = prev.filter(
|
||||
(item) => !(item.routerKey === routerKey && String(item.area) === String(area))
|
||||
);
|
||||
return [...other, ...reordered];
|
||||
});
|
||||
setDragging(null);
|
||||
};
|
||||
|
||||
const optimizeCosts = async () => {
|
||||
let hints = optimalHints;
|
||||
if (!hints || Object.keys(hints).length === 0) {
|
||||
const probabilities = await loadOptimizerHints({ silent: true });
|
||||
const refreshedHints = {};
|
||||
groupedByRouter.forEach((routerGroup) => {
|
||||
(routerGroup.areas || []).forEach((areaGroup) => {
|
||||
const ranked = [...(areaGroup.items || [])]
|
||||
.map((item) => {
|
||||
const ifaceKey = `${routerGroup.routerKey}::${String(item.interfaceName || '').toUpperCase()}`;
|
||||
const probabilityOptimal = Number((probabilities || {})[ifaceKey] || 0);
|
||||
return { item, probabilityOptimal };
|
||||
})
|
||||
.sort((a, b) =>
|
||||
Number(b.probabilityOptimal || 0) - Number(a.probabilityOptimal || 0) ||
|
||||
String(a.item.interfaceName || '').localeCompare(String(b.item.interfaceName || ''))
|
||||
);
|
||||
ranked.forEach(({ item, probabilityOptimal }, idx) => {
|
||||
const hintKey = `${routerGroup.routerKey}::${areaGroup.area}::${String(item.interfaceName || '').toUpperCase()}`;
|
||||
refreshedHints[hintKey] = {
|
||||
optimalCost: (idx + 1) * OSPF_COST_STEP,
|
||||
probabilityOptimal,
|
||||
};
|
||||
});
|
||||
});
|
||||
});
|
||||
hints = refreshedHints;
|
||||
}
|
||||
|
||||
if (!hints || Object.keys(hints).length === 0) {
|
||||
notify.warning('Нет рекомендаций оптимизатора для расчета cost');
|
||||
return;
|
||||
}
|
||||
|
||||
let changedCount = 0;
|
||||
let hintedCount = 0;
|
||||
const nextTemplates = (templates || []).map((item) => {
|
||||
const hintKey = `${item.routerKey}::${item.area}::${String(item.interfaceName || '').toUpperCase()}`;
|
||||
const hint = hints[hintKey];
|
||||
if (!hint) return item;
|
||||
hintedCount += 1;
|
||||
const nextCost = Number(hint.optimalCost);
|
||||
if (!Number.isFinite(nextCost) || nextCost < 0 || Number(item.cost) === nextCost) return item;
|
||||
changedCount += 1;
|
||||
return { ...item, cost: nextCost };
|
||||
});
|
||||
setTemplates(nextTemplates);
|
||||
|
||||
if (hintedCount === 0) {
|
||||
notify.warning('Для интерфейсов на странице нет рекомендаций оптимизатора');
|
||||
return;
|
||||
}
|
||||
if (changedCount === 0) {
|
||||
notify.success('Текущие cost уже соответствуют оптимальным рекомендациям');
|
||||
return;
|
||||
}
|
||||
notify.success(`Оптимизация применена: обновлено cost у ${changedCount} интерфейсов`);
|
||||
};
|
||||
|
||||
const saveOspf = async () => {
|
||||
if (groupedByRouter.length === 0) {
|
||||
notify.warning('Нет OSPF данных для сохранения');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
servers: groupedByRouter.map((group) => ({
|
||||
serverId: group.representativeServerId,
|
||||
templates: group.areas.flatMap((areaGroup) =>
|
||||
areaGroup.items.map((item) => ({
|
||||
rosId: item.rosId || null,
|
||||
interfaceName: item.interfaceName,
|
||||
area: item.area,
|
||||
cost: item.cost,
|
||||
}))
|
||||
),
|
||||
})),
|
||||
};
|
||||
|
||||
const response = await api.post('/mikrotik/ospf-interface-templates/apply', payload);
|
||||
const summary = response.data?.summary || {};
|
||||
notify.success(`OSPF сохранен: обновлено ${summary.updated || 0}, пропущено ${summary.skipped || 0}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to save OSPF:', error);
|
||||
notify.error('Не удалось сохранить OSPF в MikroTik');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ospf-tools-page">
|
||||
<PageHeader
|
||||
title="Инструменты OSPF"
|
||||
icon={<IconRoute2 size={24} />}
|
||||
actions={(
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={() => {
|
||||
loadOspf();
|
||||
loadOptimizerHints({ silent: true });
|
||||
}}
|
||||
disabled={loading || optimizerLoading}
|
||||
>
|
||||
<IconRefresh size={16} className={`me-1 ${(loading || optimizerLoading) ? 'spin' : ''}`} />
|
||||
Загрузить из MikroTik
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-primary"
|
||||
onClick={optimizeCosts}
|
||||
disabled={loading || optimizerLoading || groupedByRouter.length === 0}
|
||||
title="Проставить интерфейсам потенциально оптимальный cost"
|
||||
>
|
||||
<IconWand size={16} className="me-1" />
|
||||
Оптимизировать
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={saveOspf}
|
||||
disabled={saving || groupedByRouter.length === 0}
|
||||
>
|
||||
<IconDatabase size={16} className={`me-1 ${saving ? 'spin' : ''}`} />
|
||||
Сохранить OSPF
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="text-muted small">
|
||||
Данные OSPF берутся напрямую с MikroTik. Группировка: роутер → Area → интерфейсы.
|
||||
Чем меньше cost, тем выше приоритет. Рядом отображается потенциально оптимальный cost из оптимизатора маршрутов.
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{groupedByRouter.length === 0 ? (
|
||||
<div className="text-muted">OSPF Interface Template не найдены.</div>
|
||||
) : (
|
||||
<div className="row g-3">
|
||||
{groupedByRouter.map((routerGroup) => (
|
||||
<div key={routerGroup.routerKey} className={routerColumnClass}>
|
||||
<div className="card card-sm border">
|
||||
<div className="card-header fw-semibold">{routerGroup.routerLabel}</div>
|
||||
<div className="card-body p-0">
|
||||
{routerGroup.areas.map((areaGroup) => (
|
||||
<div key={`${routerGroup.routerKey}-${areaGroup.area}`} className="border-top">
|
||||
<div className="px-3 py-2 bg-light text-muted small fw-semibold">
|
||||
Area: {areaGroup.area}
|
||||
</div>
|
||||
<div className="list-group list-group-flush">
|
||||
{areaGroup.items.map((item) => (
|
||||
(() => {
|
||||
const hint = optimalHints[`${routerGroup.routerKey}::${areaGroup.area}::${String(item.interfaceName || '').toUpperCase()}`];
|
||||
const hintMatches = hint && Number(hint.optimalCost) === Number(item.cost);
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
className="list-group-item"
|
||||
draggable
|
||||
onDragStart={() => setDragging({
|
||||
routerKey: routerGroup.routerKey,
|
||||
area: areaGroup.area,
|
||||
key: item.key,
|
||||
})}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={() => onDrop(routerGroup.routerKey, areaGroup.area, item.key)}
|
||||
onDragEnd={() => setDragging(null)}
|
||||
style={{ cursor: 'grab' }}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between gap-2 flex-wrap">
|
||||
<div className="d-flex align-items-center gap-2 flex-wrap">
|
||||
<span className="text-muted small">::</span>
|
||||
<code>{item.interfaceName}</code>
|
||||
<span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
|
||||
{item.active ? 'Активен' : 'Неактивен'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2 ms-auto">
|
||||
{hint && (
|
||||
<span
|
||||
className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
|
||||
title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
|
||||
>
|
||||
opt cost {hint.optimalCost}
|
||||
</span>
|
||||
)}
|
||||
<span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</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 { Icon } = 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`}>
|
||||
<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,243 @@
|
||||
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';
|
||||
|
||||
const REQUEST_TIMEOUT_MS = 15000;
|
||||
|
||||
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 = { timeout: REQUEST_TIMEOUT_MS, noRetry: true, ...(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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,531 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
IconRoute2,
|
||||
IconRefresh,
|
||||
IconBrain,
|
||||
IconAlertCircle,
|
||||
} from '@tabler/icons-react';
|
||||
import api from './lib/api.js';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import { countryToFlag } from './utils/serverUtils.js';
|
||||
|
||||
function MetricBadge({ label, value, tone = 'secondary' }) {
|
||||
return (
|
||||
<span className={`badge bg-${tone}-lt text-${tone}`}>
|
||||
{label}: {value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function fmtProb(v) {
|
||||
return typeof v === 'number' ? `${v}%` : '—';
|
||||
}
|
||||
|
||||
function fmtSpeed(dl, ul, fallback) {
|
||||
if (typeof dl === 'number' || typeof ul === 'number') {
|
||||
return `DL: ${dl ?? '—'} Mbps, UL: ${ul ?? '—'} Mbps`;
|
||||
}
|
||||
return `speed: ${fallback ?? '—'} Mbps`;
|
||||
}
|
||||
|
||||
function routeNodeKey(node) {
|
||||
return String(node?.id || node?.dns || node?.ip || node?.label || '').trim();
|
||||
}
|
||||
|
||||
const OPT_TABLE_STYLE = { tableLayout: 'fixed', width: '100%' };
|
||||
const OPT_COLS = ['24%', '20%', '22%', '18%', '16%'];
|
||||
|
||||
function OptimizerColgroup() {
|
||||
return (
|
||||
<colgroup>
|
||||
{OPT_COLS.map((w) => (
|
||||
<col key={w} style={{ width: w }} />
|
||||
))}
|
||||
</colgroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RouteOptimizerPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [data, setData] = useState(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await api.get('/route-optimizer', { timeout: 30000 });
|
||||
setData(res?.data || null);
|
||||
} catch (e) {
|
||||
console.error('[RouteOptimizerPage] load failed:', e);
|
||||
setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить маршруты');
|
||||
setData(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
const id = setInterval(load, 30000);
|
||||
return () => clearInterval(id);
|
||||
}, [load]);
|
||||
|
||||
const homes = Array.isArray(data?.homes) ? data.homes : [];
|
||||
const communityOptimization = Array.isArray(data?.communityOptimizationByJumphost)
|
||||
? data.communityOptimizationByJumphost
|
||||
: [];
|
||||
const communityFullRoutes = (() => {
|
||||
const out = [];
|
||||
const homesSafe = Array.isArray(homes) ? homes : [];
|
||||
const byJh = new Map();
|
||||
homesSafe.forEach((h) => {
|
||||
const home = h?.home || null;
|
||||
const routes = Array.isArray(h?.fullRouteCandidates) ? h.fullRouteCandidates : [];
|
||||
routes.forEach((r) => {
|
||||
const jhKey = routeNodeKey(r?.jumphost);
|
||||
const exKey = routeNodeKey(r?.exit);
|
||||
if (!jhKey || !exKey) return;
|
||||
const mapKey = `${jhKey}:::${exKey}`;
|
||||
const prev = byJh.get(mapKey);
|
||||
if (!prev || Number(r?.score || 0) > Number(prev?.route?.score || 0)) {
|
||||
byJh.set(mapKey, { home, route: r });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
communityOptimization.forEach((item) => {
|
||||
const jh = item?.jumphost || null;
|
||||
const jhKey = routeNodeKey(jh);
|
||||
const rows = Array.isArray(item?.recommendations) ? item.recommendations : [];
|
||||
rows.forEach((r) => {
|
||||
const rec = r?.recommended || null;
|
||||
const exKey = routeNodeKey(rec?.exit);
|
||||
if (!rec || !jhKey || !exKey) return;
|
||||
const bestFull = byJh.get(`${jhKey}:::${exKey}`);
|
||||
if (!bestFull?.route) return;
|
||||
out.push({
|
||||
community: r.community,
|
||||
communityInfo: r.communityInfo,
|
||||
home: bestFull.home || bestFull.route.home,
|
||||
jumphost: bestFull.route.jumphost || jh,
|
||||
exit: bestFull.route.exit || rec.exit,
|
||||
fullRouteScore: bestFull.route.score,
|
||||
fullRouteProbability: bestFull.route.probabilityOptimal,
|
||||
fullRouteConfidence: bestFull.route.confidence,
|
||||
homeToJumphost: bestFull.route.homeToJumphost || null,
|
||||
jumphostToExit: bestFull.route.jumphostToExit || null,
|
||||
recommendedGateway: rec.gateway || null,
|
||||
tunnelGateway: rec.tunnelGateway || null,
|
||||
pinnedBySettings: Boolean(r?.pinnedBySettings),
|
||||
shouldSwitch: Boolean(r?.shouldSwitch),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return out.sort((a, b) => Number(b.fullRouteScore || 0) - Number(a.fullRouteScore || 0));
|
||||
})();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Локальный ИИ: оптимизатор маршрутов"
|
||||
icon={<IconBrain size={24} />}
|
||||
meta="Rule-based выбор маршрутов: Home → Jumphost → Exit"
|
||||
actions={(
|
||||
<div className="btn-list">
|
||||
<Link to="/settings#route-ai" className="btn btn-outline-secondary">
|
||||
Настройки AI
|
||||
</Link>
|
||||
<button type="button" className="btn btn-outline-primary" onClick={load} disabled={loading}>
|
||||
<IconRefresh className={loading ? 'spin me-2' : 'me-2'} size={18} />
|
||||
{loading ? 'Обновление...' : 'Обновить'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger d-flex align-items-center">
|
||||
<IconAlertCircle className="me-2" size={18} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && !data && (
|
||||
<div className="text-muted py-4">Расчёт маршрутов...</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && homes.length === 0 && (
|
||||
<div className="alert alert-info">
|
||||
Нет доступных маршрутов. Проверьте типы серверов (`home`, `jumphost`, `exit`) и `network-config.tunnelInterfaces`.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row g-3">
|
||||
{homes.map((entry) => {
|
||||
const best = entry.bestFullRoute;
|
||||
const bestHomeToJh = entry.bestHomeToJumphost || null;
|
||||
const home = entry.home || {};
|
||||
const hjCandidates = Array.isArray(entry.homeToJumphostCandidates)
|
||||
? entry.homeToJumphostCandidates
|
||||
: [];
|
||||
const routes = Array.isArray(entry.fullRouteCandidates) ? entry.fullRouteCandidates : [];
|
||||
return (
|
||||
<div className="col-12" key={home.id || home.ip || home.dns || home.label || 'home'}>
|
||||
<div className="card">
|
||||
<div className="card-header d-flex flex-wrap gap-2 align-items-center justify-content-between">
|
||||
<h3 className="card-title mb-0 d-flex align-items-center">
|
||||
<IconRoute2 className="me-2" size={18} />
|
||||
{home.label || home.dns || home.ip || 'Home'}
|
||||
</h3>
|
||||
{best ? (
|
||||
<MetricBadge
|
||||
label="Вероятность оптимальности лучшего маршрута"
|
||||
value={`${best.probabilityOptimal}%`}
|
||||
tone="green"
|
||||
/>
|
||||
) : (
|
||||
<MetricBadge label="Статус" value="Нет полного маршрута до Exit" tone="orange" />
|
||||
)}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="mb-4">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
|
||||
<div className="fw-semibold">Оптимальный маршрут Home → Jumphost</div>
|
||||
{bestHomeToJh ? (
|
||||
<MetricBadge
|
||||
label="Вероятность оптимальности"
|
||||
value={`${bestHomeToJh.probabilityOptimal}%`}
|
||||
tone="green"
|
||||
/>
|
||||
) : (
|
||||
<MetricBadge label="Статус" value="Нет кандидатов Home→Jumphost" tone="orange" />
|
||||
)}
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-vcenter card-table align-middle" style={OPT_TABLE_STYLE}>
|
||||
<OptimizerColgroup />
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Jumphost</th>
|
||||
<th>Интерфейс</th>
|
||||
<th>Ping / Speed</th>
|
||||
<th>Score / Confidence</th>
|
||||
<th>Вероятность</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{hjCandidates.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-muted">
|
||||
Кандидаты Home→Jumphost не найдены.
|
||||
</td>
|
||||
</tr>
|
||||
) : hjCandidates.map((c) => (
|
||||
<tr key={c.id}>
|
||||
<td className="fw-semibold text-break">{c.jumphost?.label || c.jumphost?.dns || c.jumphost?.ip || 'jumphost'}</td>
|
||||
<td className="small text-muted text-break">{c.interfaceName || '—'}</td>
|
||||
<td className="small text-muted text-break">
|
||||
ping: {c.pingMs ?? '—'} ms, {fmtSpeed(c.speedDownloadMbps, c.speedUploadMbps, c.speedMbps)}
|
||||
</td>
|
||||
<td className="small">
|
||||
{c.score} / {c.confidence}
|
||||
</td>
|
||||
<td>
|
||||
<span className={`badge ${bestHomeToJh?.id === c.id ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
|
||||
{fmtProb(c.probabilityOptimal)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{best ? (
|
||||
<div className="mb-3">
|
||||
<div className="fw-semibold mb-2">Оптимальный маршрут</div>
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
<span className="badge bg-blue-lt text-blue">{best.home?.label || 'home'}</span>
|
||||
<span className="text-muted">→</span>
|
||||
<span className="badge bg-indigo-lt text-indigo">{best.jumphost?.label || 'jumphost'}</span>
|
||||
<span className="text-muted">→</span>
|
||||
<span className="badge bg-orange-lt text-orange">{best.exit?.label || 'exit'}</span>
|
||||
<MetricBadge label="Score" value={best.score} tone="primary" />
|
||||
<MetricBadge label="Confidence" value={best.confidence} tone="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="fw-semibold mb-2">Полные маршруты Home → Jumphost → Exit</div>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-vcenter card-table align-middle" style={OPT_TABLE_STYLE}>
|
||||
<OptimizerColgroup />
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Маршрут</th>
|
||||
<th>Home→Jumphost</th>
|
||||
<th>Jumphost→Exit</th>
|
||||
<th>Score / Confidence</th>
|
||||
<th>Вероятность</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{routes.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-muted">
|
||||
Полные маршруты до exit-ноды не найдены.
|
||||
</td>
|
||||
</tr>
|
||||
) : routes.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td className="text-break">
|
||||
<span className="fw-semibold">{r.home?.label}</span>
|
||||
<span className="text-muted"> → </span>
|
||||
<span className="fw-semibold">{r.jumphost?.label}</span>
|
||||
<span className="text-muted"> → </span>
|
||||
<span className="fw-semibold">{r.exit?.label}</span>
|
||||
</td>
|
||||
<td className="small text-muted text-break">
|
||||
ping: {r.homeToJumphost?.pingMs ?? '—'} ms, {fmtSpeed(
|
||||
r.homeToJumphost?.speedDownloadMbps,
|
||||
r.homeToJumphost?.speedUploadMbps,
|
||||
r.homeToJumphost?.speedMbps
|
||||
)}
|
||||
</td>
|
||||
<td className="small text-muted text-break">
|
||||
ping: {r.jumphostToExit?.pingMs ?? '—'} ms, {fmtSpeed(
|
||||
r.jumphostToExit?.speedDownloadMbps,
|
||||
r.jumphostToExit?.speedUploadMbps,
|
||||
r.jumphostToExit?.speedMbps
|
||||
)}
|
||||
</td>
|
||||
<td className="small">{r.score} / {r.confidence ?? '—'}</td>
|
||||
<td>
|
||||
<span className="badge bg-green-lt text-green">{r.probabilityOptimal}%</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title mb-0">Оптимизированные маршруты Home -> JumpHost -> Exit по BGP community</h3>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="text-muted small mb-3">
|
||||
Таблица показывает лучший полный маршрут для каждой community с учетом рекомендованного
|
||||
gateway на Jumphost.
|
||||
</div>
|
||||
<div className="table-responsive mb-0">
|
||||
<table className="table table-vcenter card-table align-middle" style={OPT_TABLE_STYLE}>
|
||||
<OptimizerColgroup />
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Community</th>
|
||||
<th>Маршрут (Home -> JumpHost -> Exit)</th>
|
||||
<th>Сегменты</th>
|
||||
<th>Gateway / Действие</th>
|
||||
<th>Вероятность</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{communityFullRoutes.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-muted">Недостаточно данных для построения полных маршрутов по community.</td>
|
||||
</tr>
|
||||
) : communityFullRoutes.map((r, idx) => (
|
||||
<tr key={`${r.community}-${routeNodeKey(r.home)}-${routeNodeKey(r.jumphost)}-${routeNodeKey(r.exit)}-${idx}`}>
|
||||
<td className="text-break">
|
||||
<div className="fw-semibold">{r.community}</div>
|
||||
{(r.communityInfo?.name || r.communityInfo?.description) && (
|
||||
<div className="small text-muted">{r.communityInfo?.name || r.communityInfo?.description}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="small text-break">
|
||||
<span className="fw-semibold">{r.home?.label || r.home?.dns || r.home?.ip || 'home'}</span>
|
||||
<span className="text-muted"> → </span>
|
||||
<span className="fw-semibold">{r.jumphost?.label || r.jumphost?.dns || r.jumphost?.ip || 'jumphost'}</span>
|
||||
<span className="text-muted"> → </span>
|
||||
<span className="fw-semibold">{r.exit?.label || r.exit?.dns || r.exit?.ip || 'exit'}</span>
|
||||
</td>
|
||||
<td className="small text-break">
|
||||
<div>
|
||||
H→J: ping {r.homeToJumphost?.pingMs ?? '—'} ms, {fmtSpeed(
|
||||
r.homeToJumphost?.speedDownloadMbps,
|
||||
r.homeToJumphost?.speedUploadMbps,
|
||||
r.homeToJumphost?.speedMbps
|
||||
)}
|
||||
</div>
|
||||
<div className="text-muted">
|
||||
J→E: ping {r.jumphostToExit?.pingMs ?? '—'} ms, {fmtSpeed(
|
||||
r.jumphostToExit?.speedDownloadMbps,
|
||||
r.jumphostToExit?.speedUploadMbps,
|
||||
r.jumphostToExit?.speedMbps
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="small text-break">
|
||||
<div>{r.recommendedGateway || '—'}</div>
|
||||
{r.tunnelGateway && <div className="text-muted">{'->'} {r.tunnelGateway}</div>}
|
||||
<div className="mt-1">
|
||||
{r.pinnedBySettings ? (
|
||||
<span className="badge bg-blue-lt text-blue">pin</span>
|
||||
) : r.shouldSwitch ? (
|
||||
<span className="badge bg-orange-lt text-orange">switch</span>
|
||||
) : (
|
||||
<span className="badge bg-green-lt text-green">ok</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="small">
|
||||
<div>{fmtProb(r.fullRouteProbability)}</div>
|
||||
<div className="text-muted">score {r.fullRouteScore} / conf {r.fullRouteConfidence ?? '—'}</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<h3 className="mb-3">Оптимизация по community и filters</h3>
|
||||
<div className="text-muted small mb-3">
|
||||
Рекомендации строятся на основе ваших <code>server-filters</code> (связки
|
||||
<code> community -> gateway</code>) и текущих метрик канала
|
||||
<code> jumphost -> exit</code>.
|
||||
</div>
|
||||
|
||||
{communityOptimization.length === 0 ? (
|
||||
<div className="alert alert-info">Нет данных по <code>server-filters</code> для jumphost.</div>
|
||||
) : (
|
||||
<div className="row g-3">
|
||||
{communityOptimization.map((item) => {
|
||||
const jh = item.jumphost || {};
|
||||
const rows = Array.isArray(item.recommendations) ? item.recommendations : [];
|
||||
return (
|
||||
<div className="col-12" key={jh.id || jh.ip || jh.dns || jh.label || 'jumphost'}>
|
||||
<div className="card">
|
||||
<div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<h3 className="card-title mb-0">
|
||||
Jumphost: {jh.label || jh.dns || jh.ip || 'unknown'}
|
||||
</h3>
|
||||
<MetricBadge label="Communities" value={rows.length} tone="blue" />
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="table-responsive">
|
||||
<table className="table table-vcenter card-table align-middle" style={OPT_TABLE_STYLE}>
|
||||
<OptimizerColgroup />
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Community</th>
|
||||
<th>Текущий (рекурсивный -> туннель)</th>
|
||||
<th>Рекомендуемый (рекурсивный -> туннель)</th>
|
||||
<th>Действие</th>
|
||||
<th>Вероятность (тек/реком)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-muted">
|
||||
Для этого jumphost нет фильтров.
|
||||
</td>
|
||||
</tr>
|
||||
) : rows.map((r) => (
|
||||
<tr key={`${jh.label}-${r.community}`}>
|
||||
<td className="text-break">
|
||||
<div className="fw-semibold">{r.community}</div>
|
||||
{(r.communityInfo?.name || r.communityInfo?.description) && (
|
||||
<div className="small text-muted">
|
||||
{r.communityInfo?.name || r.communityInfo?.description}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="small text-break">
|
||||
<div>{r.current?.gateway || r.currentGateway || '—'}</div>
|
||||
{r.current?.tunnelGateway && (
|
||||
<div className="text-muted">
|
||||
{'->'} {r.current.tunnelGateway}
|
||||
{r.current.distance != null ? ` (dist ${r.current.distance})` : ''}
|
||||
</div>
|
||||
)}
|
||||
{(r.current?.interfaceName || r.current?.exit?.country) && (
|
||||
<div className="text-muted">
|
||||
{r.current?.exit?.country ? `${countryToFlag(r.current.exit.country)} ` : ''}
|
||||
{r.current?.interfaceName ? `iface: ${r.current.interfaceName}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="small text-break">
|
||||
<div>{r.recommended?.gateway || '—'}</div>
|
||||
{r.pinnedBySettings && (
|
||||
<div className="text-muted">
|
||||
pin: {r.pinnedGateway || '—'}
|
||||
</div>
|
||||
)}
|
||||
{r.recommended?.tunnelGateway && (
|
||||
<div className="text-muted">
|
||||
{'->'} {r.recommended.tunnelGateway}
|
||||
{r.recommended.distance != null ? ` (dist ${r.recommended.distance})` : ''}
|
||||
</div>
|
||||
)}
|
||||
{(r.recommended?.interfaceName || r.recommended?.exit?.country) && (
|
||||
<div className="text-muted">
|
||||
{r.recommended?.exit?.country ? `${countryToFlag(r.recommended.exit.country)} ` : ''}
|
||||
{r.recommended?.interfaceName ? `iface: ${r.recommended.interfaceName}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-break">
|
||||
{r.current == null && r.recommended == null ? (
|
||||
<span className="badge bg-secondary-lt text-secondary">Недостаточно данных</span>
|
||||
) : r.pinnedBySettings && !r.pinnedGatewayResolved ? (
|
||||
<span className="badge bg-yellow-lt text-yellow">Pin задан, но gateway не найден</span>
|
||||
) : r.pinnedBySettings && r.shouldSwitch ? (
|
||||
<span className="badge bg-orange-lt text-orange">Принудительный switch (pin)</span>
|
||||
) : r.pinnedBySettings ? (
|
||||
<span className="badge bg-blue-lt text-blue">Зафиксировано (pin)</span>
|
||||
) : r.current == null ? (
|
||||
<span className="badge bg-orange-lt text-orange">Текущий gateway не сопоставлен</span>
|
||||
) : r.shouldSwitch ? (
|
||||
<span className="badge bg-orange-lt text-orange">Рекомендовано переключить</span>
|
||||
) : (
|
||||
<span className="badge bg-green-lt text-green">Оставить текущий</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="small">
|
||||
{fmtProb(r.current?.probabilityOptimal)} / {fmtProb(r.recommended?.probabilityOptimal)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+258
-93
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
@@ -31,8 +31,11 @@ import {
|
||||
LinkGeneratorModal,
|
||||
ServerSidebar,
|
||||
ServerCard,
|
||||
ServerGroupCard,
|
||||
ServerBulkActions
|
||||
} from './components/server/index.js';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
|
||||
const API_URL = '/api';
|
||||
|
||||
@@ -52,12 +55,12 @@ function ServerManager() {
|
||||
// === Основные данные ===
|
||||
const [servers, setServers] = useState([]);
|
||||
const [connections, setConnections] = useState([]);
|
||||
const [networkConfigGateways, setNetworkConfigGateways] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// === UI State ===
|
||||
const [activeTab, setActiveTab] = useState('servers'); // 'servers' | 'connections'
|
||||
const [viewMode, setViewMode] = useState('cards'); // 'table' | 'cards'
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
|
||||
// === Фильтры и поиск ===
|
||||
const [filters, setFilters] = useState({
|
||||
@@ -124,9 +127,27 @@ function ServerManager() {
|
||||
};
|
||||
|
||||
// === Загрузка данных ===
|
||||
const fetchNetworkConfig = async (abortSignal) => {
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const res = await api.get('/network-config', opts);
|
||||
const config = res.data || {};
|
||||
setNetworkConfigGateways(Array.isArray(config.gateways) ? config.gateways : []);
|
||||
} catch (e) {
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
console.warn('Network config not loaded:', e?.message || e);
|
||||
setNetworkConfigGateways([]);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchServers();
|
||||
fetchConnections();
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
fetchServers(signal);
|
||||
fetchConnections(signal);
|
||||
fetchNetworkConfig(signal);
|
||||
return () => controller.abort();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- init-only, fetch functions defined below
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -141,10 +162,11 @@ function ServerManager() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchServers = async () => {
|
||||
const fetchServers = async (abortSignal) => {
|
||||
setLoading(true);
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const response = await api.get(`/servers`);
|
||||
const response = await api.get(`/servers`, opts);
|
||||
const normalized = (Array.isArray(response.data) ? response.data : []).map((srv) => ({
|
||||
...srv,
|
||||
type: normalizeServerType(srv.type),
|
||||
@@ -152,6 +174,7 @@ function ServerManager() {
|
||||
}));
|
||||
setServers(normalized);
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error fetching servers:', error);
|
||||
notify.error('Не удалось загрузить серверы. Проверьте, запущен ли бэкенд.');
|
||||
} finally {
|
||||
@@ -159,19 +182,47 @@ function ServerManager() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchConnections = async () => {
|
||||
const fetchConnections = async (abortSignal) => {
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const response = await api.get(`/server-connections`);
|
||||
const response = await api.get(`/server-connections`, opts);
|
||||
if (Array.isArray(response.data)) {
|
||||
setConnections(response.data);
|
||||
} else {
|
||||
setConnections([]);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
|
||||
console.error('Error fetching server connections:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Шлюзы для карточки: из /network-config по serverId, иначе из server.gateways
|
||||
const getGatewaysForServer = useMemo(() => {
|
||||
const gatewaysByServerId = {};
|
||||
(networkConfigGateways || []).forEach((gw) => {
|
||||
if (!gw.serverId) return;
|
||||
if (!gatewaysByServerId[gw.serverId]) gatewaysByServerId[gw.serverId] = [];
|
||||
gatewaysByServerId[gw.serverId].push(gw);
|
||||
});
|
||||
return (server) => {
|
||||
const ids = [server?.id, server?.ip, server?.dns].filter(Boolean);
|
||||
for (const id of ids) {
|
||||
const gws = gatewaysByServerId[id];
|
||||
if (gws?.length > 0) {
|
||||
return gws.map((gw, idx) => ({
|
||||
id: gw.id,
|
||||
name: gw.description || gw.id || gw.ip,
|
||||
ip: gw.ip,
|
||||
comment: gw.description,
|
||||
primary: idx === 0,
|
||||
}));
|
||||
}
|
||||
}
|
||||
return server?.gateways || [];
|
||||
};
|
||||
}, [networkConfigGateways]);
|
||||
|
||||
// === Фильтрация и сортировка ===
|
||||
const filteredServers = useMemo(() => {
|
||||
let result = [...servers];
|
||||
@@ -216,9 +267,44 @@ function ServerManager() {
|
||||
return result;
|
||||
}, [servers, filters, searchTerm, sortField, sortOrder]);
|
||||
|
||||
// Элементы для отображения: серверы с одинаковым groupKey (и type home) объединяются в одну карточку
|
||||
const displayItems = useMemo(() => {
|
||||
const keyToServers = {};
|
||||
filteredServers.forEach((s) => {
|
||||
const k = (s.groupKey && String(s.groupKey).trim()) || null;
|
||||
if (k) {
|
||||
if (!keyToServers[k]) keyToServers[k] = [];
|
||||
keyToServers[k].push(s);
|
||||
}
|
||||
});
|
||||
const seenKeys = new Set();
|
||||
const items = [];
|
||||
for (const s of filteredServers) {
|
||||
const k = (s.groupKey && String(s.groupKey).trim()) || null;
|
||||
if (!k) {
|
||||
items.push({ type: 'server', server: s });
|
||||
} else {
|
||||
if (!seenKeys.has(k)) {
|
||||
seenKeys.add(k);
|
||||
const group = keyToServers[k];
|
||||
items.push(group.length >= 2 ? { type: 'group', groupKey: k, servers: group } : { type: 'server', server: group[0] });
|
||||
}
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}, [filteredServers]);
|
||||
|
||||
// === Пагинация ===
|
||||
const totalPages = Math.ceil(filteredServers.length / pageSize);
|
||||
const totalPagesCards = Math.ceil(displayItems.length / pageSize);
|
||||
const totalPagesTable = Math.ceil(filteredServers.length / pageSize);
|
||||
const totalPages = viewMode === 'cards' ? totalPagesCards : totalPagesTable;
|
||||
const paginatedDisplayItems = displayItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||||
const paginatedServers = filteredServers.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||||
const totalItemsCount = viewMode === 'cards' ? displayItems.length : filteredServers.length;
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > totalPages && totalPages >= 1) setCurrentPage(1);
|
||||
}, [viewMode, totalPages, currentPage]);
|
||||
|
||||
// === Handlers ===
|
||||
const handleSort = (field) => {
|
||||
@@ -247,11 +333,22 @@ function ServerManager() {
|
||||
setSelectedServers(newSet);
|
||||
};
|
||||
|
||||
const toggleGroupSelection = (servers, selectAll) => {
|
||||
setSelectedServers((prev) => {
|
||||
const next = new Set(prev);
|
||||
servers.forEach((s) => {
|
||||
if (selectAll) next.add(s.ip);
|
||||
else next.delete(s.ip);
|
||||
});
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const selectAllServers = () => {
|
||||
if (selectedServers.size === filteredServers.length) {
|
||||
setSelectedServers(new Set());
|
||||
} else {
|
||||
setSelectedServers(new Set(filteredServers.map(s => s.ip)));
|
||||
setSelectedServers(new Set(filteredServers.map((s) => s.ip)));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -405,7 +502,7 @@ function ServerManager() {
|
||||
return `${urlSettings.baseUrl}?${params.toString()}`;
|
||||
};
|
||||
|
||||
const handleGenerateLink = (server) => {
|
||||
const _handleGenerateLink = (server) => {
|
||||
setLinkGeneratorServer(server);
|
||||
setLinkGeneratorOpen(true);
|
||||
};
|
||||
@@ -415,7 +512,7 @@ function ServerManager() {
|
||||
setLinkGeneratorServer(null);
|
||||
};
|
||||
|
||||
const applyPreset = (name) => {
|
||||
const _applyPreset = (name) => {
|
||||
const p = presets[name];
|
||||
if (!p) return;
|
||||
setUrlSettings(prev => ({ ...prev, ...p }));
|
||||
@@ -433,7 +530,7 @@ function ServerManager() {
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
notify.success('Скопировано в буфер обмена!');
|
||||
} catch (err) {
|
||||
} catch (_err) {
|
||||
notify.error('Не удалось скопировать');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
@@ -445,14 +542,14 @@ function ServerManager() {
|
||||
await navigator.clipboard.writeText(text);
|
||||
notify.success('Скопировано в буфер обмена!');
|
||||
return;
|
||||
} catch (err) {
|
||||
} catch (_err) {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
fallbackCopyToClipboard(text);
|
||||
};
|
||||
|
||||
const quickCopyLink = async (server) => {
|
||||
const _quickCopyLink = async (server) => {
|
||||
const url = generateServerUrl(server);
|
||||
await copyToClipboard(url);
|
||||
};
|
||||
@@ -550,6 +647,12 @@ function ServerManager() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefreshAll = () => {
|
||||
fetchServers();
|
||||
fetchConnections();
|
||||
fetchNetworkConfig();
|
||||
};
|
||||
|
||||
// === Connections ===
|
||||
const addConnectionInternal = (draft) => {
|
||||
if (!draft.from || !draft.to || !draft.tunnelType || !draft.ipA || !draft.ipB) {
|
||||
@@ -586,28 +689,32 @@ function ServerManager() {
|
||||
|
||||
return (
|
||||
<div className="server-manager-layout">
|
||||
{/* Header */}
|
||||
<div className="page-header d-print-none mb-3">
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<h2 className="page-title d-flex align-items-center">
|
||||
<IconServer className="me-2" />
|
||||
Управление серверами
|
||||
</h2>
|
||||
<div className="page-pretitle">
|
||||
{filteredServers.length} из {servers.length} серверов
|
||||
{selectedServers.size > 0 && (
|
||||
<span className="ms-2 text-primary">• {selectedServers.size} выбрано</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-auto ms-auto d-print-none">
|
||||
<div className="btn-list">
|
||||
{/* Tabs */}
|
||||
<div className="btn-group me-2" role="group">
|
||||
<PageHeader
|
||||
pretitle="Управление"
|
||||
title="Серверы"
|
||||
icon={<IconServer size={24} />}
|
||||
meta={
|
||||
<span className="text-muted">
|
||||
Всего серверов: <strong>{servers.length}</strong>
|
||||
</span>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<PageHeaderActions
|
||||
loading={loading}
|
||||
onRefresh={handleRefreshAll}
|
||||
disableRefresh={loading}
|
||||
onExport={exportAllLinks}
|
||||
disableExport={servers.length === 0}
|
||||
onSave={handleSaveChanges}
|
||||
disableSave={loading}
|
||||
/>
|
||||
<div className="mt-3 d-flex flex-wrap align-items-center justify-content-end gap-2">
|
||||
<div className="btn-group" role="group" aria-label="Переключение режимов">
|
||||
<button
|
||||
className={`btn ${activeTab === 'servers' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('servers')}
|
||||
type="button"
|
||||
>
|
||||
<IconServer size={16} className="me-1" />
|
||||
Серверы
|
||||
@@ -615,59 +722,104 @@ function ServerManager() {
|
||||
<button
|
||||
className={`btn ${activeTab === 'connections' ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab('connections')}
|
||||
type="button"
|
||||
>
|
||||
<IconGitBranch size={16} className="me-1" />
|
||||
Связи
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<button type="button" className="btn btn-outline-secondary" onClick={exportAllLinks} disabled={servers.length === 0}>
|
||||
<IconDownload size={16} className="me-1" /> Экспорт
|
||||
</button>
|
||||
<button type="button" className="btn btn-outline-primary" onClick={handleSaveChanges} disabled={loading}>
|
||||
<IconDatabase size={16} className={loading ? 'spin me-1' : 'me-1'} /> Сохранить
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary" onClick={handleOpenAddServerModal}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleOpenAddServerModal}
|
||||
>
|
||||
<IconPlus size={16} className="me-1" /> Добавить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Main content with sidebar */}
|
||||
{/* Offcanvas: фильтры (только для вкладки «Серверы») */}
|
||||
{activeTab === 'servers' && (
|
||||
<div className="d-flex" style={{ gap: '1rem' }}>
|
||||
{/* Sidebar */}
|
||||
{!sidebarCollapsed && (
|
||||
<ServerSidebar
|
||||
servers={servers}
|
||||
filters={filters}
|
||||
onFiltersChange={(newFilters) => { setFilters(newFilters); setCurrentPage(1); }}
|
||||
searchTerm={searchTerm}
|
||||
onSearch={(term) => { setSearchTerm(term); setCurrentPage(1); }}
|
||||
onReset={handleResetFilters}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Toggle sidebar button */}
|
||||
<button
|
||||
className="btn btn-ghost-secondary btn-icon position-absolute"
|
||||
style={{ left: sidebarCollapsed ? 10 : 290, top: 200, zIndex: 100 }}
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
title={sidebarCollapsed ? 'Показать фильтры' : 'Скрыть фильтры'}
|
||||
<>
|
||||
<div
|
||||
className="offcanvas offcanvas-start"
|
||||
id="server-filters-offcanvas"
|
||||
tabIndex={-1}
|
||||
aria-labelledby="server-filters-offcanvas-label"
|
||||
style={{ width: '340px', maxWidth: '90vw' }}
|
||||
>
|
||||
<IconChevronRight size={16} style={{ transform: sidebarCollapsed ? 'rotate(0deg)' : 'rotate(180deg)', transition: '0.2s' }} />
|
||||
</button>
|
||||
<div className="offcanvas-header border-bottom">
|
||||
<h5 className="offcanvas-title d-flex align-items-center" id="server-filters-offcanvas-label">
|
||||
<IconFilter size={18} className="text-primary me-2" />
|
||||
Фильтры
|
||||
{(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
|
||||
<span className="badge bg-primary-lt text-primary ms-2">
|
||||
{Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
{(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost-secondary btn-sm"
|
||||
onClick={handleResetFilters}
|
||||
title="Сбросить фильтры"
|
||||
>
|
||||
Сбросить
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="offcanvas-body px-3 py-0 d-flex flex-column overflow-hidden">
|
||||
<ServerSidebar
|
||||
servers={servers}
|
||||
filters={filters}
|
||||
onFiltersChange={(newFilters) => { setFilters(newFilters); setCurrentPage(1); }}
|
||||
searchTerm={searchTerm}
|
||||
onSearch={(term) => { setSearchTerm(term); setCurrentPage(1); }}
|
||||
onReset={handleResetFilters}
|
||||
embedded
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Servers list */}
|
||||
{/* Main content */}
|
||||
{activeTab === 'servers' && (
|
||||
<div>
|
||||
<div className="flex-grow-1">
|
||||
{/* Toolbar */}
|
||||
<div className="card mb-3">
|
||||
<div className="card-body py-2">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div className="d-flex flex-column flex-sm-row flex-wrap align-items-stretch align-items-sm-center justify-content-between gap-2">
|
||||
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||
{/* Открыть фильтры (offcanvas) */}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#server-filters-offcanvas"
|
||||
aria-controls="server-filters-offcanvas"
|
||||
title="Фильтры"
|
||||
>
|
||||
<IconFilter size={16} className="me-1" />
|
||||
Фильтры
|
||||
{(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
|
||||
<span className="badge bg-primary-lt text-primary ms-1">
|
||||
{Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{/* Select all */}
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||
@@ -737,18 +889,31 @@ function ServerManager() {
|
||||
</div>
|
||||
</div>
|
||||
) : viewMode === 'cards' ? (
|
||||
/* Cards view */
|
||||
/* Cards view: одиночные серверы и группы (groupKey) */
|
||||
<div>
|
||||
{paginatedServers.map(server => (
|
||||
<ServerCard
|
||||
key={server.id || server.ip}
|
||||
server={server}
|
||||
selected={selectedServers.has(server.ip)}
|
||||
onSelect={toggleServerSelection}
|
||||
onEdit={handleEdit}
|
||||
onDelete={confirmDelete}
|
||||
/>
|
||||
))}
|
||||
{paginatedDisplayItems.map((item) =>
|
||||
item.type === 'group' ? (
|
||||
<ServerGroupCard
|
||||
key={`group-${item.groupKey}`}
|
||||
groupKey={item.groupKey}
|
||||
servers={item.servers.map((s) => ({ ...s, gateways: getGatewaysForServer(s) }))}
|
||||
selectedSet={selectedServers}
|
||||
onSelect={toggleServerSelection}
|
||||
onSelectGroup={toggleGroupSelection}
|
||||
onEdit={handleEdit}
|
||||
onDelete={confirmDelete}
|
||||
/>
|
||||
) : (
|
||||
<ServerCard
|
||||
key={item.server.id || item.server.ip}
|
||||
server={{ ...item.server, gateways: getGatewaysForServer(item.server) }}
|
||||
selected={selectedServers.has(item.server.ip)}
|
||||
onSelect={toggleServerSelection}
|
||||
onEdit={handleEdit}
|
||||
onDelete={confirmDelete}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
/* Table view */
|
||||
@@ -837,7 +1002,7 @@ function ServerManager() {
|
||||
<div className="card mt-3">
|
||||
<div className="card-footer d-flex align-items-center justify-content-between">
|
||||
<div className="text-muted">
|
||||
{(currentPage - 1) * pageSize + 1} – {Math.min(currentPage * pageSize, filteredServers.length)} из {filteredServers.length}
|
||||
{(currentPage - 1) * pageSize + 1} – {Math.min(currentPage * pageSize, totalItemsCount)} из {totalItemsCount}
|
||||
</div>
|
||||
<ul className="pagination m-0">
|
||||
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
|
||||
@@ -923,22 +1088,22 @@ function ServerManager() {
|
||||
<h3 className="card-title mb-0">Добавить связь между серверами</h3>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<div className="row g-2 g-md-3">
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Сервер A</label>
|
||||
<select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}>
|
||||
<option value="">Выберите сервер</option>
|
||||
{servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Сервер B</label>
|
||||
<select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}>
|
||||
<option value="">Выберите сервер</option>
|
||||
{servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
<label className="form-label">Тип туннеля</label>
|
||||
<select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}>
|
||||
<option value="GRE">GRE</option>
|
||||
@@ -947,11 +1112,11 @@ function ServerManager() {
|
||||
<option value="OpenVPN">OpenVPN</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
<label className="form-label">IP туннеля A</label>
|
||||
<input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" />
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
<label className="form-label">IP туннеля B</label>
|
||||
<input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" />
|
||||
</div>
|
||||
@@ -1091,8 +1256,8 @@ function ServerManager() {
|
||||
<span className="badge bg-blue-lt text-blue">{newConnection.to || 'B'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-4">
|
||||
<div className="row g-2 g-md-3">
|
||||
<div className="col-12 col-md-4">
|
||||
<FormField
|
||||
label="Туннель"
|
||||
name="tunnelType"
|
||||
@@ -1108,7 +1273,7 @@ function ServerManager() {
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
<FormField
|
||||
label="IP сервера A"
|
||||
name="ipA"
|
||||
@@ -1118,7 +1283,7 @@ function ServerManager() {
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-12 col-md-4">
|
||||
<FormField
|
||||
label="IP сервера B"
|
||||
name="ipB"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,392 @@
|
||||
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;
|
||||
const REQUEST_TIMEOUT_MS = 15000;
|
||||
|
||||
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 = { timeout: REQUEST_TIMEOUT_MS, ...(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,516 @@
|
||||
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
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 { /* no-op */ }
|
||||
return {};
|
||||
}
|
||||
|
||||
function saveHistoryToStorage(historyMap) {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(historyMap));
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
|
||||
/** Группировка истории по дням: массив { 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 location = useLocation();
|
||||
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 activeRunIdRef = useRef(0);
|
||||
const checkControllersRef = useRef(new Set());
|
||||
|
||||
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;
|
||||
const runId = ++activeRunIdRef.current;
|
||||
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) {
|
||||
if (activeRunIdRef.current !== runId) break;
|
||||
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;
|
||||
const controller = new AbortController();
|
||||
checkControllersRef.current.add(controller);
|
||||
try {
|
||||
const { data: checkData } = await api.post('/uptime/check', { serverId }, { signal: controller.signal });
|
||||
ok = checkData?.ok === true;
|
||||
ms = typeof checkData?.ms === 'number' ? checkData.ms : Date.now() - t0;
|
||||
} catch (e) {
|
||||
if (e?.code === 'ERR_CANCELED' || e?.name === 'CanceledError' || e?.name === 'AbortError') {
|
||||
setCurrentCheckingServerIds((prev) => prev.filter((id) => id !== serverId));
|
||||
checkControllersRef.current.delete(controller);
|
||||
continue;
|
||||
}
|
||||
ms = Date.now() - t0;
|
||||
} finally {
|
||||
checkControllersRef.current.delete(controller);
|
||||
}
|
||||
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));
|
||||
if (activeRunIdRef.current !== runId) return;
|
||||
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]);
|
||||
|
||||
// Остановка фоновых uptime-check при уходе со страницы
|
||||
useEffect(() => {
|
||||
if (location.pathname === '/uptime-monitor') return;
|
||||
activeRunIdRef.current += 1;
|
||||
checkingRef.current = false;
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
const controllers = checkControllersRef.current;
|
||||
controllers.forEach((controller) => controller.abort());
|
||||
controllers.clear();
|
||||
setCurrentCheckingServerIds([]);
|
||||
setChecking(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
const controllers = checkControllersRef.current;
|
||||
return () => {
|
||||
activeRunIdRef.current += 1;
|
||||
checkingRef.current = false;
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
controllers.forEach((controller) => controller.abort());
|
||||
controllers.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Сохраняем историю в localStorage при изменении
|
||||
useEffect(() => {
|
||||
saveHistoryToStorage(historyMap);
|
||||
}, [historyMap]);
|
||||
|
||||
const selectedServer = selectedServerId
|
||||
? jumphosts.find((s) => (s.id || s.dns || s.ip) === selectedServerId)
|
||||
: null;
|
||||
const selectedHistory = useMemo(
|
||||
() => (selectedServerId ? historyMap[selectedServerId] || [] : []),
|
||||
[selectedServerId, historyMap]
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { IconBell, IconAlertTriangle, IconServerOff, IconCpu, IconDeviceDesktop, IconDatabase } from '@tabler/icons-react';
|
||||
import { useAlerts } from '../contexts/AlertsContext.jsx';
|
||||
|
||||
const SEVERITY_ICONS = {
|
||||
critical: IconAlertTriangle,
|
||||
warning: IconAlertTriangle,
|
||||
};
|
||||
|
||||
const TYPE_ICONS = {
|
||||
server_offline: IconServerOff,
|
||||
mikrotik_unreachable: IconServerOff,
|
||||
high_cpu: IconCpu,
|
||||
high_ram: IconDeviceDesktop,
|
||||
high_hdd: IconDatabase,
|
||||
};
|
||||
|
||||
function AlertIcon({ type, severity }) {
|
||||
const Icon = TYPE_ICONS[type] || SEVERITY_ICONS[severity] || IconAlertTriangle;
|
||||
const colorClass = severity === 'critical' ? 'text-danger' : 'text-warning';
|
||||
return <Icon size={18} className={colorClass} />;
|
||||
}
|
||||
|
||||
const PANEL_WIDTH = 320;
|
||||
const PANEL_MAX_HEIGHT = 320;
|
||||
const Z_INDEX = 1050;
|
||||
|
||||
function AlertsPanelContent({ loading, refresh, alerts, onClose }) {
|
||||
return (
|
||||
<>
|
||||
<div className="card-header d-flex align-items-center justify-content-between py-2 px-3">
|
||||
<span className="fw-semibold">Оповещения</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost-secondary btn-sm"
|
||||
onClick={(e) => { e.preventDefault(); refresh(); }}
|
||||
disabled={loading}
|
||||
title="Обновить"
|
||||
>
|
||||
{loading ? '…' : '↻'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="list-group list-group-flush list-group-hoverable" style={{ maxHeight: `${PANEL_MAX_HEIGHT}px`, overflowY: 'auto' }}>
|
||||
{alerts.length === 0 && !loading && (
|
||||
<div className="list-group-item text-muted small text-center py-3">
|
||||
Нет активных оповещений
|
||||
</div>
|
||||
)}
|
||||
{alerts.slice(0, 20).map((alert) => (
|
||||
<Link
|
||||
key={alert.id}
|
||||
to={alert.link || '/dashboard'}
|
||||
className="list-group-item list-group-item-action py-2"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="d-flex align-items-start gap-2">
|
||||
<span className="flex-shrink-0 mt-1">
|
||||
<AlertIcon type={alert.type} severity={alert.severity} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-grow-1">
|
||||
<div className="fw-medium small">{alert.title}</div>
|
||||
<div className="text-muted small text-truncate" title={alert.description}>
|
||||
{alert.entity}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
{alerts.length > 20 && (
|
||||
<div className="list-group-item text-muted small text-center py-2">
|
||||
и ещё {alerts.length - 20}…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="card-footer py-2 px-3 d-flex align-items-center gap-2 flex-nowrap">
|
||||
<Link to="/settings#alerts" className="btn btn-sm btn-ghost-secondary text-nowrap" onClick={onClose}>
|
||||
Настройки
|
||||
</Link>
|
||||
<Link to="/dashboard" className="btn btn-sm btn-outline-primary text-nowrap" onClick={onClose}>
|
||||
Панель
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AlertsBell({ dropup = false }) {
|
||||
const { alerts, total, loading, refresh } = useAlerts();
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef(null);
|
||||
const panelRef = useRef(null);
|
||||
const [position, setPosition] = useState({ top: 0, left: 0 });
|
||||
|
||||
const updatePosition = useCallback(() => {
|
||||
const el = triggerRef.current;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const padding = 4;
|
||||
const maxLeft = window.innerWidth - PANEL_WIDTH - padding;
|
||||
if (dropup) {
|
||||
setPosition({
|
||||
left: Math.max(padding, Math.min(rect.left, maxLeft)),
|
||||
bottom: window.innerHeight - rect.top + padding,
|
||||
});
|
||||
} else {
|
||||
setPosition({
|
||||
top: rect.bottom + padding,
|
||||
left: Math.max(padding, Math.min(rect.left, maxLeft)),
|
||||
});
|
||||
}
|
||||
}, [dropup]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (open) updatePosition();
|
||||
}, [open, dropup, updatePosition]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onScroll = () => updatePosition();
|
||||
const onResize = () => updatePosition();
|
||||
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
|
||||
const onClickOutside = (e) => {
|
||||
const panel = panelRef.current;
|
||||
const trigger = triggerRef.current;
|
||||
if (!panel || !trigger) return;
|
||||
if (!panel.contains(e.target) && !trigger.contains(e.target)) setOpen(false);
|
||||
};
|
||||
window.addEventListener('scroll', onScroll, true);
|
||||
window.addEventListener('resize', onResize);
|
||||
document.addEventListener('keydown', onKey);
|
||||
document.addEventListener('mousedown', onClickOutside);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll, true);
|
||||
window.removeEventListener('resize', onResize);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
document.removeEventListener('mousedown', onClickOutside);
|
||||
};
|
||||
}, [open, updatePosition]);
|
||||
|
||||
const handleTriggerClick = (e) => {
|
||||
e.preventDefault();
|
||||
if (dropup) {
|
||||
setOpen((v) => !v);
|
||||
}
|
||||
};
|
||||
|
||||
if (dropup) {
|
||||
return (
|
||||
<>
|
||||
<div className="nav-item">
|
||||
<a
|
||||
ref={triggerRef}
|
||||
href="#"
|
||||
className="nav-link px-2 d-inline-flex align-items-center justify-content-center"
|
||||
onClick={handleTriggerClick}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
aria-label={`Оповещения: ${total} активных`}
|
||||
title="Оповещения о проблемах"
|
||||
>
|
||||
<span className="position-relative d-inline-flex">
|
||||
<IconBell size={20} />
|
||||
{total > 0 && (
|
||||
<span className="badge badge-sm bg-danger position-absolute rounded-pill" style={{ top: '-2px', right: '-2px' }}>
|
||||
{total > 99 ? '99+' : total}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{open && typeof document !== 'undefined' && createPortal(
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="dropdown-menu dropdown-menu-card show overflow-hidden shadow-lg border"
|
||||
data-bs-theme="light"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: position.left,
|
||||
...(position.bottom !== undefined ? { bottom: position.bottom } : { top: position.top }),
|
||||
width: `${PANEL_WIDTH}px`,
|
||||
maxWidth: 'calc(100vw - 1rem)',
|
||||
zIndex: Z_INDEX,
|
||||
}}
|
||||
>
|
||||
<AlertsPanelContent
|
||||
loading={loading}
|
||||
refresh={refresh}
|
||||
alerts={alerts}
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="nav-item dropdown">
|
||||
<a
|
||||
href="#"
|
||||
className="nav-link px-2 dropdown-toggle position-relative d-inline-flex align-items-center justify-content-center"
|
||||
data-bs-toggle="dropdown"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
aria-label={`Оповещения: ${total} активных`}
|
||||
title="Оповещения о проблемах"
|
||||
>
|
||||
<span className="position-relative d-inline-flex">
|
||||
<IconBell size={20} />
|
||||
{total > 0 && (
|
||||
<span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill" style={{ top: '-2px', right: '-2px' }}>
|
||||
{total > 99 ? '99+' : total}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-end dropdown-menu-card overflow-hidden" style={{ width: `${PANEL_WIDTH}px`, maxWidth: '95vw' }}>
|
||||
<AlertsPanelContent loading={loading} refresh={refresh} alerts={alerts} onClose={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,120 +1,73 @@
|
||||
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,
|
||||
totalCount = 0,
|
||||
onSelectAll = () => {},
|
||||
totalCount: _totalCount = 0,
|
||||
onSelectAll: _onSelectAll = () => {},
|
||||
onDeselectAll = () => {},
|
||||
onDelete = null,
|
||||
onEdit = null,
|
||||
onExport = null,
|
||||
customActions = [], // [{icon: Icon, label, onClick, variant}]
|
||||
className = ''
|
||||
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 (
|
||||
<div className={`card mb-3 ${className}`} style={{
|
||||
position: 'sticky',
|
||||
top: '10px',
|
||||
zIndex: 10,
|
||||
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>
|
||||
)
|
||||
<FloatingBulkActionsBar
|
||||
selectedCount={selectedCount}
|
||||
onClearSelection={onDeselectAll}
|
||||
actions={actions}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default BulkActionsBar
|
||||
|
||||
export default BulkActionsBar;
|
||||
|
||||
@@ -10,7 +10,12 @@ import {
|
||||
IconDatabase,
|
||||
IconCreditCard,
|
||||
IconDownload,
|
||||
IconKeyboard
|
||||
IconKeyboard,
|
||||
IconChartPie,
|
||||
IconSettings,
|
||||
IconClock,
|
||||
IconClockPlay,
|
||||
IconShield
|
||||
} from '@tabler/icons-react'
|
||||
|
||||
/**
|
||||
@@ -38,14 +43,20 @@ function CommandPalette() {
|
||||
// Список команд
|
||||
const commands = [
|
||||
{ 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: 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: IconFilter, label: 'Community', description: 'Справочник BGP Community', action: () => navigate('/communities'), keywords: ['community', 'справочник'] },
|
||||
{ icon: IconServer, label: 'Серверы', description: 'Управление серверами', action: () => navigate('/servers'), keywords: ['серверы', 'servers'] },
|
||||
{ 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: IconDownload, label: 'Авто-URL', description: 'Генератор ссылок', action: () => navigate('/auto-urls'), keywords: ['url', 'ссылки', 'генератор'] },
|
||||
{ icon: IconSettings, label: 'Настройки интерфейса', description: 'WebSocket, DoH, пинг, PTR зона', action: () => navigate('/settings'), keywords: ['настройки', 'settings', 'интерфейс', 'doh', 'websocket'] },
|
||||
]
|
||||
|
||||
// Фильтрация команд по поисковому запросу
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { IconHash } from '@tabler/icons-react';
|
||||
import { getIconById } from '../lib/brandIcons.js';
|
||||
|
||||
function CommunityAutocompleteInput({
|
||||
value,
|
||||
@@ -105,6 +106,7 @@ function CommunityAutocompleteInput({
|
||||
const label = s.name ? `${s.value} - ${s.name}` : `${s.value}`;
|
||||
const description = s.description || '';
|
||||
const tags = Array.isArray(s.tags) ? s.tags : [];
|
||||
const iconInfo = s.icon ? getIconById(s.icon) : null;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
@@ -114,9 +116,15 @@ function CommunityAutocompleteInput({
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
>
|
||||
<div className="d-flex align-items-start">
|
||||
<span className="avatar me-2 bg-blue-lt text-blue border-0" style={{ width: 22, height: 22 }}>
|
||||
<IconHash size={14} />
|
||||
</span>
|
||||
{iconInfo ? (
|
||||
<span className="avatar me-2 bg-blue-lt text-blue border-0" style={{ width: 22, height: 22 }}>
|
||||
<iconInfo.Icon size={14} stroke={1.5} />
|
||||
</span>
|
||||
) : (
|
||||
<span className="avatar me-2 bg-blue-lt text-blue border-0" style={{ width: 22, height: 22 }}>
|
||||
<IconHash size={14} />
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-fill text-start">
|
||||
<div className="fw-medium">{label}</div>
|
||||
{(description || tags.length > 0) && (
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { getIconById } from '../lib/brandIcons.js';
|
||||
|
||||
function normalizeTablerColor(input) {
|
||||
const allowed = new Set(['blue','azure','indigo','purple','pink','red','orange','yellow','lime','green','teal','cyan','grape','gray']);
|
||||
const c = String(input || 'blue').toLowerCase().replace(/[^a-z-]/g, '');
|
||||
@@ -11,8 +13,12 @@ function CommunityBadge({ value, communities = [] }) {
|
||||
const color = normalizeTablerColor(meta?.color || 'blue');
|
||||
const cls = `badge bg-${color}-lt text-${color}`;
|
||||
const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${Array.isArray(meta.tags) && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : '';
|
||||
const iconInfo = meta?.icon ? getIconById(meta.icon) : null;
|
||||
return (
|
||||
<span className={cls} title={title}>{v}</span>
|
||||
<span className={cls} title={title}>
|
||||
{iconInfo ? <iconInfo.Icon size={12} stroke={1.8} className="me-1" /> : null}
|
||||
{v}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -100,8 +100,8 @@ function CommunityStats({ communities = [] }) {
|
||||
) : (
|
||||
<>
|
||||
{/* Общая статистика */}
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-4">
|
||||
<div className="row g-2 g-md-3 mb-4">
|
||||
<div className="col-6 col-md-4">
|
||||
<div className="card card-sm bg-blue-lt">
|
||||
<div className="card-body">
|
||||
<div className="h1 mb-0">{stats.length}</div>
|
||||
@@ -109,7 +109,7 @@ function CommunityStats({ communities = [] }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-6 col-md-4">
|
||||
<div className="card card-sm bg-green-lt">
|
||||
<div className="card-body">
|
||||
<div className="h1 mb-0">{totalUsage}</div>
|
||||
@@ -117,7 +117,7 @@ function CommunityStats({ communities = [] }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="col-6 col-md-4">
|
||||
<div className="card card-sm bg-purple-lt">
|
||||
<div className="card-body">
|
||||
<div className="h1 mb-0">{Object.keys(statsByCategory).length}</div>
|
||||
@@ -198,12 +198,12 @@ function CommunityStats({ communities = [] }) {
|
||||
{Object.keys(statsByCategory).length > 1 && (
|
||||
<div>
|
||||
<h4 className="mb-3">По категориям</h4>
|
||||
<div className="row g-3">
|
||||
<div className="row g-2 g-md-3">
|
||||
{Object.entries(statsByCategory).map(([category, items]) => {
|
||||
const categoryTotal = items.reduce((sum, item) => sum + item.count, 0);
|
||||
const categoryPercentage = ((categoryTotal / totalUsage) * 100).toFixed(1);
|
||||
return (
|
||||
<div key={category} className="col-md-6">
|
||||
<div key={category} className="col-12 col-md-6">
|
||||
<div className="card card-sm">
|
||||
<div className="card-body">
|
||||
<div className="d-flex justify-content-between align-items-start mb-2">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import React 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';
|
||||
@@ -34,6 +34,9 @@ import Tooltip from './Tooltip.jsx';
|
||||
* - [{ 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 = [],
|
||||
@@ -56,11 +59,14 @@ function DataTable({
|
||||
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;
|
||||
@@ -77,22 +83,27 @@ function DataTable({
|
||||
</div>
|
||||
);
|
||||
|
||||
const thProps = {
|
||||
key: col.key,
|
||||
scope: 'col',
|
||||
style: col.width ? { width: col.width } : undefined,
|
||||
};
|
||||
|
||||
if (isSortable) {
|
||||
return (
|
||||
<th
|
||||
key={col.key}
|
||||
<th
|
||||
{...thProps}
|
||||
className="cursor-pointer user-select-none"
|
||||
onClick={() => onSort(col.key)}
|
||||
style={col.width ? { width: col.width } : undefined}
|
||||
>
|
||||
{content}
|
||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<th key={col.key} style={col.width ? { width: col.width } : undefined}>
|
||||
{content}
|
||||
<th {...thProps}>
|
||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||
</th>
|
||||
);
|
||||
};
|
||||
@@ -210,15 +221,21 @@ function DataTable({
|
||||
}
|
||||
|
||||
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="table card-table table-vcenter table-nowrap mb-0">
|
||||
<table className={tableClass} role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
{selectable && (
|
||||
<th style={{ width: '40px' }}>
|
||||
<th scope="col" style={{ width: '40px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
@@ -229,7 +246,7 @@ function DataTable({
|
||||
</th>
|
||||
)}
|
||||
{columns.map(renderColumnHeader)}
|
||||
{hasActions && <th className="text-end">Действия</th>}
|
||||
{hasActions && <th scope="col" className="text-end td-actions">Действия</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -261,7 +278,7 @@ function DataTable({
|
||||
</td>
|
||||
))}
|
||||
{hasActions && (
|
||||
<td className="text-end">
|
||||
<td className="text-end td-actions">
|
||||
{renderActions(item)}
|
||||
</td>
|
||||
)}
|
||||
|
||||
@@ -16,14 +16,14 @@ class ErrorBoundary extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
static getDerivedStateFromError(_error) {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
// Логируем ошибку
|
||||
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||
|
||||
|
||||
// Отправляем в мониторинг (если настроен)
|
||||
this.logErrorToService(error, errorInfo);
|
||||
|
||||
@@ -93,7 +93,7 @@ class ErrorBoundary extends Component {
|
||||
{this.state.error?.message || 'Что-то пошло не так. Попробуйте обновить страницу.'}
|
||||
</p>
|
||||
|
||||
{process.env.NODE_ENV === 'development' && this.state.errorInfo && (
|
||||
{import.meta.env.DEV && this.state.errorInfo && (
|
||||
<div className="card mt-3">
|
||||
<div className="card-body">
|
||||
<h3 className="card-title">Детали ошибки (только в dev режиме)</h3>
|
||||
|
||||
@@ -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;
|
||||
@@ -40,7 +40,7 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
|
||||
notify.success('Откат выполнен успешно');
|
||||
onRolledBack?.(res.data || {});
|
||||
onClose?.();
|
||||
} catch (e) {
|
||||
} catch (_e) {
|
||||
notify.error('Не удалось выполнить откат');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { useState, useMemo, useRef, useEffect } from 'react';
|
||||
import BRAND_ICONS, { getIconById } from '../lib/brandIcons.js';
|
||||
import { IconSearch, IconMinus } from '@tabler/icons-react';
|
||||
|
||||
/**
|
||||
* Выбор иконки бренда с поиском и предпросмотром.
|
||||
* value — id иконки (например IconBrandGoogle), onChange(id) — при выборе.
|
||||
*/
|
||||
export default function IconPicker({ value, onChange, disabled = false, label = 'Иконка бренда', allowNone = false }) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const selected = allowNone && !value
|
||||
? { id: '', label: 'Без иконки', Icon: IconMinus }
|
||||
: getIconById(value);
|
||||
const filteredIcons = 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 filtered = useMemo(() => {
|
||||
if (!allowNone) return filteredIcons;
|
||||
const q = (search || '').trim().toLowerCase();
|
||||
const noneMatches = q.length === 0 || 'без иконки'.includes(q) || 'none'.includes(q);
|
||||
if (!noneMatches) return filteredIcons;
|
||||
return [{ id: '', label: 'Без иконки', Icon: IconMinus }, ...filteredIcons];
|
||||
}, [allowNone, filteredIcons, 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 d-flex align-items-center gap-2"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={disabled}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
>
|
||||
<span className="avatar bg-primary-lt text-primary rounded d-flex align-items-center justify-content-center" style={{ width: 34, height: 34 }}>
|
||||
<selected.Icon size={20} stroke={1.5} />
|
||||
</span>
|
||||
<span>{selected.label}</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="border rounded p-3 shadow-sm bg-body" style={{ minWidth: 560, maxWidth: 640 }}>
|
||||
<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: 320 }}
|
||||
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: 56, height: 56 }}
|
||||
onClick={() => handleSelect(item)}
|
||||
title={item.label}
|
||||
role="option"
|
||||
aria-selected={value === item.id}
|
||||
>
|
||||
<item.Icon size={26} stroke={1.5} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{filtered.length === 0 && (
|
||||
<div className="small text-muted py-2">Ничего не найдено</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { getIconById };
|
||||
@@ -178,7 +178,7 @@ function ImportModal({
|
||||
|
||||
{/* Stats */}
|
||||
<div className="row g-2">
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="card bg-green-lt">
|
||||
<div className="card-body py-2">
|
||||
<div className="d-flex align-items-center">
|
||||
@@ -191,7 +191,7 @@ function ImportModal({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="card bg-red-lt">
|
||||
<div className="card-body py-2">
|
||||
<div className="d-flex align-items-center">
|
||||
|
||||
@@ -19,12 +19,12 @@ function MobileCardView({
|
||||
// минимальная дистанция свайпа в px
|
||||
const minSwipeDistance = 50
|
||||
|
||||
const onTouchStart = (e, item) => {
|
||||
const onTouchStart = (e, _item) => {
|
||||
setTouchEnd(null)
|
||||
setTouchStart(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
const onTouchMove = (e, item) => {
|
||||
const onTouchMove = (e, _item) => {
|
||||
setTouchEnd(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { IconCheck, IconAlertTriangle, IconInfoCircle, IconX } from '@tabler/icons-react';
|
||||
|
||||
@@ -98,7 +99,7 @@ export function notifyMutationSuccess(message, details) {
|
||||
if (forceToast && typeof window !== 'undefined' && window.notify?.success) {
|
||||
window.notify.success(text, details);
|
||||
}
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
|
||||
function colorByType(type) {
|
||||
@@ -121,31 +122,50 @@ function iconByType(type) {
|
||||
|
||||
function NotifyViewport({ items, onClose }) {
|
||||
return (
|
||||
<div className="position-fixed top-0 end-0 p-3" style={{ zIndex: 1080, pointerEvents: 'none' }}>
|
||||
<div className="d-flex flex-column gap-2 align-items-end">
|
||||
{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 className="d-flex align-items-start">
|
||||
<div className="me-1 mt-1">{iconByType(n.type)}</div>
|
||||
<div className="flex-grow-1">
|
||||
<div className="toast-container toast-container-end notify-viewport" style={{ zIndex: 1079 }}>
|
||||
{items.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="toast show toast-alert"
|
||||
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.details && (
|
||||
<details className="small mt-1">
|
||||
<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>
|
||||
</details>
|
||||
)}
|
||||
{n.count > 1 && (
|
||||
<span className="badge bg-white text-body border ms-2">×{n.count}</span>
|
||||
)}
|
||||
{n.count > 1 && <span className="badge bg-white text-body border ms-2">×{n.count}</span>}
|
||||
</div>
|
||||
<button type="button" className="btn-close" aria-label="Close" onClick={() => onClose(n.id)}>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
{n.details && (
|
||||
<details className="small mt-1">
|
||||
<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>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,37 @@
|
||||
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 (
|
||||
<div className="page-header d-print-none mb-4">
|
||||
{/* Верхняя строка: только заголовок */}
|
||||
<div className="row align-items-center">
|
||||
<div className="col">
|
||||
<h2 className="page-title">{title}</h2>
|
||||
{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 && (
|
||||
<div className="text-muted small mt-1">{meta}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Отдельная строка под заголовком: действия страницы */}
|
||||
{actions && (
|
||||
<div className="mt-4 d-print-none">
|
||||
{actions}
|
||||
<div className="row mt-2">
|
||||
<div className="col d-print-none overflow-auto">
|
||||
{actions}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -59,9 +59,13 @@ function PageHeaderActions({
|
||||
{(onImport || onExport) && placeholderBtn(160)}
|
||||
{onClear && placeholderBtn(130)}
|
||||
{onClearCommunities && placeholderBtn(180)}
|
||||
{onSave && placeholderBtn(140)}
|
||||
{onHistory && placeholderBtn(110)}
|
||||
</div>
|
||||
{(onSave || onHistory) && (
|
||||
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||
{onSave && placeholderBtn(140)}
|
||||
{onHistory && placeholderBtn(110)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -140,33 +144,37 @@ function PageHeaderActions({
|
||||
<IconEraser className="me-1" /> Очистить community
|
||||
</button>
|
||||
)}
|
||||
{onSave && (
|
||||
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconDeviceFloppy className="me-1" /> Сохранить
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{onHistory && (
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
||||
{lastModified && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||
<IconClock className="me-1" />
|
||||
<span className="d-none d-sm-inline">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
<span className="d-inline d-sm-none">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(onSave || onHistory) && (
|
||||
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||
{onSave && (
|
||||
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconDeviceFloppy className="me-1" /> Сохранить
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{onHistory && (
|
||||
<div className="btn-group d-none d-sm-inline-flex">
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
||||
{lastModified && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||
<IconClock className="me-1" />
|
||||
<span className="d-none d-sm-inline">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
<span className="d-inline d-sm-none">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Компактное меню для маленьких экранов */}
|
||||
{secondaryButtons && (
|
||||
<div className="btn-group d-inline-flex d-sm-none">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
function getBody() {
|
||||
@@ -20,7 +20,7 @@ function PortalDropdown({
|
||||
const [coords, setCoords] = useState({ top: 0, left: 0, minWidth: 0 });
|
||||
const BASE_Z = 1035; // above navbar (1030), below modal-backdrop (1040) and modal (1050)
|
||||
|
||||
const updatePosition = () => {
|
||||
const updatePosition = useCallback(() => {
|
||||
const btn = buttonRef.current;
|
||||
if (!btn) return;
|
||||
const rect = btn.getBoundingClientRect();
|
||||
@@ -32,12 +32,11 @@ function PortalDropdown({
|
||||
left = Math.max(0, rect.right - (menuWidth || rect.width));
|
||||
}
|
||||
setCoords({ top: rect.bottom + window.scrollY, left: left + window.scrollX, minWidth });
|
||||
};
|
||||
}, [align]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (open) updatePosition();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open]);
|
||||
}, [open, updatePosition]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
@@ -60,7 +59,7 @@ function PortalDropdown({
|
||||
document.removeEventListener('keydown', onKey);
|
||||
document.removeEventListener('mousedown', onClickOutside);
|
||||
};
|
||||
}, [open]);
|
||||
}, [open, updatePosition]);
|
||||
|
||||
const body = getBody();
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ function QuickAddBar({
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
<div className="row g-3 mt-2">
|
||||
<div className="row g-2 g-md-3 mt-2">
|
||||
<div className="col">
|
||||
<div className="card"><div className="card-body p-2">
|
||||
<div className="text-muted">Готово</div>
|
||||
|
||||
@@ -7,19 +7,25 @@ function S3MetaBar({ keys = [], className = '' }) {
|
||||
const [meta, setMeta] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchMeta = async () => {
|
||||
const fetchMeta = async (abortSignal) => {
|
||||
setLoading(true);
|
||||
const opts = abortSignal ? { signal: abortSignal } : {};
|
||||
try {
|
||||
const res = await api.get('/s3/last-modified');
|
||||
const res = await api.get('/s3/last-modified', opts);
|
||||
setMeta(res.data || {});
|
||||
} catch {
|
||||
} catch (e) {
|
||||
if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
|
||||
setMeta({});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetchMeta(); }, []);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
fetchMeta(controller.signal);
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
const copyMeta = async (k) => {
|
||||
try {
|
||||
|
||||
@@ -14,7 +14,7 @@ function SavedFilters({
|
||||
const [savedFilters, setSavedFilters] = useState([])
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false)
|
||||
const [filterName, setFilterName] = useState('')
|
||||
const [showList, setShowList] = useState(false)
|
||||
const [_showList, setShowList] = useState(false)
|
||||
|
||||
const storageKey = `savedFilters_${pageKey}`
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import FormField from './FormField';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import api from '../lib/api.js';
|
||||
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
||||
import ErrorAlert from './ErrorAlert';
|
||||
import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
|
||||
|
||||
/**
|
||||
* SettingsModal - модальное окно настроек интерфейса
|
||||
@@ -22,28 +23,80 @@ export default function SettingsModal({ open, onClose }) {
|
||||
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(() => {
|
||||
if (!open) return;
|
||||
setError('');
|
||||
setSuccess('');
|
||||
setLoading(true);
|
||||
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.get('/ui-settings');
|
||||
const data = res?.data || {};
|
||||
const [settingsRes, serversRes] = await Promise.all([
|
||||
api.get('/ui-settings'),
|
||||
api.get('/servers').catch(() => ({ data: [] })),
|
||||
]);
|
||||
const data = settingsRes?.data || {};
|
||||
setRawSettings(data);
|
||||
setDohServer(String(data?.dohServer || ''));
|
||||
setWsUrl(String(data?.wsUpdateUrl || ''));
|
||||
setBaseAS(String(data?.baseAS || '65001'));
|
||||
setPingDomain(String(data?.pingDomain || '').trim());
|
||||
setPingCacheMinutes(data?.pingCacheMinutes != null ? String(data.pingCacheMinutes) : '');
|
||||
setPingCacheMinutes(
|
||||
data?.pingCacheMinutes != null ? String(data.pingCacheMinutes) : ''
|
||||
);
|
||||
setPtrZoneReplaceFrom(String(data?.ptrZoneReplaceFrom || ''));
|
||||
setPtrZoneReplaceTo(String(data?.ptrZoneReplaceTo || ''));
|
||||
const e = res?.headers?.etag || res?.headers?.ETag || '';
|
||||
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) : '');
|
||||
} catch (e) {
|
||||
setServersList(Array.isArray(serversRes?.data) ? serversRes.data : []);
|
||||
} catch (_e) {
|
||||
setError('Не удалось загрузить настройки');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -105,6 +158,28 @@ export default function SettingsModal({ open, onClose }) {
|
||||
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,
|
||||
@@ -227,6 +302,148 @@ export default function SettingsModal({ open, onClose }) {
|
||||
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">
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
/**
|
||||
* 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 = () => (
|
||||
<tr>
|
||||
{hasCheckbox && (
|
||||
@@ -18,7 +22,7 @@ export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false
|
||||
);
|
||||
return (
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<table className={tableClass}>
|
||||
<thead>
|
||||
<tr>
|
||||
{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 (
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<table className={tableClass}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={cols} className="text-center text-muted py-5">
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { useState, useEffect, createContext, useContext } from 'react'
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { useState, useEffect, createContext, useContext, useCallback, useMemo } from 'react'
|
||||
import {
|
||||
IconCheck,
|
||||
IconX,
|
||||
IconAlertTriangle,
|
||||
IconInfoCircle,
|
||||
IconRefresh
|
||||
IconInfoCircle
|
||||
} from '@tabler/icons-react'
|
||||
|
||||
/**
|
||||
* Контекст для глобального управления toast уведомлениями
|
||||
* Контекст для глобального управления toast уведомлениями.
|
||||
* Тосты в стиле Tabler Alerts, всплывают справа как Tabler Toasts.
|
||||
*/
|
||||
const ToastContext = createContext({
|
||||
success: () => {},
|
||||
@@ -19,25 +20,30 @@ const ToastContext = createContext({
|
||||
|
||||
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 }) {
|
||||
const [isLeaving, setIsLeaving] = useState(false)
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsLeaving(true)
|
||||
setTimeout(() => onClose(toast.id), 300)
|
||||
}, [onClose, toast.id])
|
||||
|
||||
useEffect(() => {
|
||||
if (toast.duration && toast.duration > 0) {
|
||||
const timer = setTimeout(() => {
|
||||
handleClose()
|
||||
}, toast.duration)
|
||||
const timer = setTimeout(() => handleClose(), toast.duration)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [toast.duration])
|
||||
|
||||
const handleClose = () => {
|
||||
setIsLeaving(true)
|
||||
setTimeout(() => onClose(toast.id), 300) // анимация 300ms
|
||||
}
|
||||
}, [toast.duration, handleClose])
|
||||
|
||||
const getIcon = () => {
|
||||
switch (toast.type) {
|
||||
@@ -45,47 +51,53 @@ function Toast({ toast, onClose }) {
|
||||
case 'error': return <IconX size={20} />
|
||||
case 'warning': return <IconAlertTriangle size={20} />
|
||||
case 'info': return <IconInfoCircle size={20} />
|
||||
default: return null
|
||||
default: return <IconInfoCircle size={20} />
|
||||
}
|
||||
}
|
||||
|
||||
const getColorClass = () => {
|
||||
switch (toast.type) {
|
||||
case 'success': return 'alert-success'
|
||||
case 'error': return 'alert-danger'
|
||||
case 'warning': return 'alert-warning'
|
||||
case 'info': return 'alert-info'
|
||||
default: return 'alert-info'
|
||||
}
|
||||
}
|
||||
const alertClass = {
|
||||
success: 'alert-success',
|
||||
error: 'alert-danger',
|
||||
warning: 'alert-warning',
|
||||
info: 'alert-info',
|
||||
}[toast.type] || 'alert-info'
|
||||
|
||||
const title = toast.title ?? DEFAULT_TITLES[toast.type]
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`alert ${getColorClass()} alert-dismissible fade ${isLeaving ? '' : 'show'}`}
|
||||
className={`toast show toast-alert ${isLeaving ? 'toast-leaving' : ''}`}
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
data-toast-type={toast.type}
|
||||
style={{
|
||||
minWidth: '300px',
|
||||
maxWidth: '400px',
|
||||
boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)',
|
||||
animation: isLeaving ? 'slideOutRight 0.3s ease-out' : 'slideInRight 0.3s ease-out'
|
||||
minWidth: '320px',
|
||||
maxWidth: '420px',
|
||||
overflow: 'hidden',
|
||||
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="me-2 mt-1">
|
||||
{getIcon()}
|
||||
<div className={`alert ${alertClass} toast-alert-inner mb-0`}>
|
||||
<div className="toast-header toast-alert-header">
|
||||
<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 className="flex-grow-1">
|
||||
{toast.title && (
|
||||
<h4 className="alert-title">{toast.title}</h4>
|
||||
)}
|
||||
<div className="text-secondary">{toast.message}</div>
|
||||
|
||||
{/* Действия */}
|
||||
<div className="toast-body">
|
||||
<div className="alert-description">{toast.message}</div>
|
||||
{toast.actions && toast.actions.length > 0 && (
|
||||
<div className="btn-list mt-2">
|
||||
{toast.actions.map((action, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
|
||||
onClick={() => {
|
||||
action.onClick?.()
|
||||
@@ -99,12 +111,6 @@ function Toast({ toast, onClose }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -116,7 +122,7 @@ function Toast({ toast, onClose }) {
|
||||
export function ToastContainer({ children }) {
|
||||
const [toasts, setToasts] = useState([])
|
||||
|
||||
const addToast = (type, message, options = {}) => {
|
||||
const addToast = useCallback((type, message, options = {}) => {
|
||||
const id = Date.now()
|
||||
const toast = {
|
||||
id,
|
||||
@@ -131,67 +137,94 @@ export function ToastContainer({ children }) {
|
||||
}
|
||||
setToasts(prev => [...prev, toast])
|
||||
return id
|
||||
}
|
||||
}, [])
|
||||
|
||||
const removeToast = (id) => {
|
||||
const removeToast = useCallback((id) => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const contextValue = {
|
||||
const contextValue = useMemo(() => ({
|
||||
success: (message, options) => addToast('success', message, options),
|
||||
error: (message, options) => addToast('error', message, options),
|
||||
warning: (message, options) => addToast('warning', message, options),
|
||||
info: (message, options) => addToast('info', message, options),
|
||||
}
|
||||
}), [addToast])
|
||||
|
||||
// Глобальный доступ через window.toast (для обратной совместимости)
|
||||
useEffect(() => {
|
||||
window.toast = contextValue
|
||||
}, [])
|
||||
}, [contextValue])
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={contextValue}>
|
||||
{children}
|
||||
|
||||
{/* Контейнер с toast'ами */}
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '20px',
|
||||
right: '20px',
|
||||
zIndex: 9999,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
{toasts.map(toast => (
|
||||
<Toast key={toast.id} toast={toast} onClose={removeToast} />
|
||||
|
||||
{/* Контейнер тостов справа (как в Tabler) */}
|
||||
<div className="toast-container toast-container-end">
|
||||
{toasts.map((t) => (
|
||||
<Toast key={t.id} toast={t} onClose={removeToast} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CSS анимации */}
|
||||
{/* Стили: тосты в стиле Tabler Alerts, всплывают справа */}
|
||||
<style>{`
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.toast-container-end {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast-container-end .toast {
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* 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 {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</ToastContext.Provider>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { IconTrophy, IconMapPin, IconCloud, IconHash, IconChartBar } from '@tabl
|
||||
function TopNStats({ data, loading }) {
|
||||
const [topCountries, setTopCountries] = useState([]);
|
||||
const [topProviders, setTopProviders] = useState([]);
|
||||
const [topCommunities, setTopCommunities] = useState([]);
|
||||
const [_topCommunities, _setTopCommunities] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || !Array.isArray(data.servers)) return;
|
||||
@@ -58,9 +58,9 @@ function TopNStats({ data, loading }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row g-3">
|
||||
<div className="row g-2 g-md-3">
|
||||
{/* Top Страны */}
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
@@ -107,7 +107,7 @@ function TopNStats({ data, loading }) {
|
||||
</div>
|
||||
|
||||
{/* Top Провайдеры */}
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
|
||||
@@ -58,7 +58,7 @@ function ValidatedInput({
|
||||
message: validationResult.message || '',
|
||||
isValidating: false
|
||||
})
|
||||
} catch (error) {
|
||||
} catch (_error) {
|
||||
setValidationState({
|
||||
valid: false,
|
||||
message: 'Ошибка валидации',
|
||||
@@ -84,7 +84,7 @@ function ValidatedInput({
|
||||
// Запускаем валидацию сразу при потере фокуса
|
||||
if (validate && !validateOnChange) {
|
||||
const result = validate(value)
|
||||
const validationResult = result instanceof Promise ? result.then(r => {
|
||||
const _validationResult = result instanceof Promise ? result.then(r => {
|
||||
setValidationState({
|
||||
valid: r.valid,
|
||||
message: r.message || '',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useRef, useMemo } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { IconArrowUp, IconArrowDown, IconEdit, IconTrash, IconCopy } from '@tabler/icons-react';
|
||||
import TableSkeleton from './TableSkeleton.jsx';
|
||||
|
||||
@@ -64,12 +64,12 @@ function WsUpdateModal({ show, url, onClose }) {
|
||||
|
||||
ws.onerror = () => setStatus('error');
|
||||
ws.onclose = () => setStatus('closed');
|
||||
} catch (e) {
|
||||
} catch (_e) {
|
||||
setStatus('error');
|
||||
}
|
||||
|
||||
return () => {
|
||||
try { wsRef.current?.close(); } catch {}
|
||||
try { wsRef.current?.close(); } catch { /* no-op */ }
|
||||
wsRef.current = null;
|
||||
};
|
||||
}, [show, url]);
|
||||
@@ -96,7 +96,7 @@ function WsUpdateModal({ show, url, onClose }) {
|
||||
const copyLog = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(plainLog);
|
||||
} catch {}
|
||||
} catch { /* no-op */ }
|
||||
};
|
||||
|
||||
const clearLog = () => {
|
||||
|
||||
@@ -168,29 +168,34 @@ export default function BillingCard({
|
||||
|
||||
{/* Правая часть: действия */}
|
||||
<div className="d-flex align-items-center gap-2 px-3 border-start">
|
||||
<button
|
||||
className="btn btn-outline-success"
|
||||
title="Записать платёж"
|
||||
onClick={(e) => { e.stopPropagation(); onAddPayment?.(item); }}
|
||||
>
|
||||
<IconCreditCard size={16} className="me-1" />
|
||||
Оплатить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
title="Редактировать"
|
||||
onClick={(e) => { e.stopPropagation(); onEdit?.(item); }}
|
||||
>
|
||||
<IconEdit size={16} className="me-1" />
|
||||
Изменить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger"
|
||||
title="Удалить"
|
||||
onClick={(e) => { e.stopPropagation(); onDelete?.(item); }}
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
<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); }}
|
||||
|
||||
@@ -42,10 +42,6 @@ function AddFilterModal({ show, newFilter, onNewFilterChange, onAddFilter, onClo
|
||||
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
|
||||
/>
|
||||
|
||||
@@ -9,19 +9,18 @@ function AddServerModal({ show, newServer, customProvider, onNewServerChange, on
|
||||
const modalRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||
const modalEl = modalRef.current;
|
||||
if (window.Tabler && window.Tabler.Modal && modalEl) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalEl);
|
||||
if (show) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
const handler = () => onClose && onClose();
|
||||
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||
modalEl.addEventListener('hide.bs.modal', handler);
|
||||
return () => {
|
||||
if (modalRef.current) {
|
||||
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||
}
|
||||
modalEl.removeEventListener('hide.bs.modal', handler);
|
||||
};
|
||||
}
|
||||
}, [show, onClose]);
|
||||
|
||||
@@ -8,19 +8,18 @@ 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);
|
||||
const modalEl = modalRef.current;
|
||||
if (window.Tabler && window.Tabler.Modal && modalEl) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalEl);
|
||||
if (show) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
const handler = () => onClose && onClose();
|
||||
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||
modalEl.addEventListener('hide.bs.modal', handler);
|
||||
return () => {
|
||||
if (modalRef.current) {
|
||||
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||
}
|
||||
modalEl.removeEventListener('hide.bs.modal', handler);
|
||||
};
|
||||
}
|
||||
}, [show, onClose]);
|
||||
|
||||
@@ -40,19 +40,18 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
|
||||
}, [show, server]);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||
const modalEl = modalRef.current;
|
||||
if (window.Tabler && window.Tabler.Modal && modalEl) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalEl);
|
||||
if (show) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
const handler = () => onClose && onClose();
|
||||
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||
modalEl.addEventListener('hide.bs.modal', handler);
|
||||
return () => {
|
||||
if (modalRef.current) {
|
||||
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||
}
|
||||
modalEl.removeEventListener('hide.bs.modal', handler);
|
||||
};
|
||||
}
|
||||
}, [show, onClose]);
|
||||
|
||||
@@ -13,19 +13,18 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
|
||||
}, [urlSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.Tabler && window.Tabler.Modal && modalRef.current) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
|
||||
const modalEl = modalRef.current;
|
||||
if (window.Tabler && window.Tabler.Modal && modalEl) {
|
||||
const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalEl);
|
||||
if (show) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
const handler = () => onClose && onClose();
|
||||
modalRef.current.addEventListener('hide.bs.modal', handler);
|
||||
modalEl.addEventListener('hide.bs.modal', handler);
|
||||
return () => {
|
||||
if (modalRef.current) {
|
||||
modalRef.current.removeEventListener('hide.bs.modal', handler);
|
||||
}
|
||||
modalEl.removeEventListener('hide.bs.modal', handler);
|
||||
};
|
||||
}
|
||||
}, [show, onClose]);
|
||||
@@ -55,8 +54,8 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
|
||||
<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">
|
||||
<div className="row g-2">
|
||||
<div className="col-12 col-md-6">
|
||||
<h6 className="mb-3">Настройки URL</h6>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Базовый URL</label>
|
||||
@@ -99,7 +98,7 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Telegram Gateway</label>
|
||||
<input
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import {
|
||||
IconTrash,
|
||||
IconEdit,
|
||||
IconCopy,
|
||||
IconX,
|
||||
IconNetwork,
|
||||
IconDownload,
|
||||
IconCheck
|
||||
} from '@tabler/icons-react';
|
||||
import FloatingBulkActionsBar from '../FloatingBulkActionsBar.jsx';
|
||||
|
||||
export default function ServerBulkActions({
|
||||
selectedCount,
|
||||
@@ -15,169 +14,48 @@ export default function ServerBulkActions({
|
||||
onBulkChangeTunnel,
|
||||
onBulkExport,
|
||||
onBulkCopyLinks,
|
||||
tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN']
|
||||
tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN'],
|
||||
}) {
|
||||
if (selectedCount === 0) return null;
|
||||
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 (
|
||||
<div
|
||||
className="server-bulk-actions position-sticky rounded-3 shadow-lg mx-auto px-3 py-2"
|
||||
style={{
|
||||
bottom: '20px',
|
||||
zIndex: 1050,
|
||||
maxWidth: '720px',
|
||||
animation: 'slideUp 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 justify-content-between gap-3">
|
||||
{/* Счётчик выбранных */}
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span
|
||||
className="badge fs-6"
|
||||
style={{
|
||||
background: '#3b82f6',
|
||||
color: '#fff',
|
||||
padding: '6px 10px'
|
||||
}}
|
||||
>
|
||||
{selectedCount}
|
||||
</span>
|
||||
<span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
|
||||
</div>
|
||||
|
||||
{/* Действия */}
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
{/* Смена типа туннеля */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="bulk-btn dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<IconNetwork size={15} />
|
||||
<span>Туннель</span>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-dark">
|
||||
<div className="dropdown-header">Сменить тип туннеля</div>
|
||||
{tunnelTypes.map(tunnel => (
|
||||
<button
|
||||
key={tunnel}
|
||||
className="dropdown-item"
|
||||
onClick={() => onBulkChangeTunnel(tunnel)}
|
||||
>
|
||||
{tunnel}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Копировать ссылки */}
|
||||
<button
|
||||
className="bulk-btn"
|
||||
onClick={onBulkCopyLinks}
|
||||
title="Скопировать ссылки"
|
||||
>
|
||||
<IconCopy size={15} />
|
||||
<span>Ссылки</span>
|
||||
</button>
|
||||
|
||||
{/* Экспорт */}
|
||||
<button
|
||||
className="bulk-btn"
|
||||
onClick={onBulkExport}
|
||||
title="Экспорт"
|
||||
>
|
||||
<IconDownload size={15} />
|
||||
<span>Экспорт</span>
|
||||
</button>
|
||||
|
||||
<div style={{ width: '1px', height: '20px', background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
|
||||
|
||||
{/* Удалить */}
|
||||
<button
|
||||
className="bulk-btn bulk-btn-danger"
|
||||
onClick={onBulkDelete}
|
||||
title="Удалить"
|
||||
>
|
||||
<IconTrash size={15} />
|
||||
<span>Удалить</span>
|
||||
</button>
|
||||
|
||||
{/* Отменить выделение */}
|
||||
<button
|
||||
className="bulk-btn-close"
|
||||
onClick={onClearSelection}
|
||||
title="Снять выделение"
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-btn {
|
||||
display: 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;
|
||||
}
|
||||
|
||||
.bulk-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bulk-btn-danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.bulk-btn-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.4);
|
||||
color: #fef2f2;
|
||||
}
|
||||
|
||||
.bulk-btn-close {
|
||||
display: 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;
|
||||
}
|
||||
|
||||
.bulk-btn-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
<FloatingBulkActionsBar
|
||||
selectedCount={selectedCount}
|
||||
onClearSelection={onClearSelection}
|
||||
actions={actions}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -169,55 +169,46 @@ export default function ServerCard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Расширенная информация */}
|
||||
{/* Расширенная информация в стиле Tabler datagrid */}
|
||||
{expanded && (
|
||||
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
|
||||
<div className="row g-0">
|
||||
{/* IP адреса */}
|
||||
<div className="col-md-6 p-3 border-end">
|
||||
<div className="text-muted small mb-2 fw-medium">
|
||||
<IconWorld size={14} className="me-1" />
|
||||
Сетевые адреса
|
||||
</div>
|
||||
<div className="row g-2">
|
||||
<div className="col-4">
|
||||
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>IP</div>
|
||||
<code className="small">{server.ip}</code>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внешний</div>
|
||||
<code className="small">{server.extIp || '—'}</code>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внутренний</div>
|
||||
<code className="small">{server.internalIp || '—'}</code>
|
||||
</div>
|
||||
</div>
|
||||
<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="col-md-6 p-3">
|
||||
<div className="text-muted small mb-2 fw-medium">
|
||||
<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>
|
||||
{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 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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user