mirror of
https://github.com/openziti/zrok.git
synced 2025-01-24 06:48:56 +01:00
more typescript porting (#221)
This commit is contained in:
Michael Quigley
parent
7377b021c6
commit
c3a6ef1ada
@ -3,11 +3,101 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/zrok.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="footer">
|
||||
<a rel="noopener noreferrer" href="https://zrok.io">
|
||||
<svg width="150" height="45" viewBox="0 0 100 30" xml:space="preserve" style="clip-rule:evenodd;fill-rule:evenodd;stroke-miterlimit:10" id="svg48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs id="defs48" /><namedview id="namedview48" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"/>
|
||||
<g transform="matrix(0.0639619,0,0,0.0388212,-1.65041,-1.44321)" id="g1">
|
||||
<path d="m 1589.31,230.468 c 0,-106.573 -52.51,-193.096 -117.2,-193.096 H 143.033 c -64.683,0 -117.198,86.523 -117.198,193.096 v 386.191 c 0,106.573 52.515,193.096 117.198,193.096 H 1472.11 c 64.69,0 117.2,-86.523 117.2,-193.096 z" style="fill:#170549" id="path1" />
|
||||
</g>
|
||||
<g transform="matrix(-0.0296355,-0.233707,-0.233707,0.0296355,76.730746,23.501948)" id="g15">
|
||||
<path d="m -30.685,-47.339 c 0.924,3.31 1.524,5.653 1.574,6.05 0.401,2.368 -0.97,54.354 -1.574,56.749 -0.171,1.029 -1.342,5.311 -2.995,10.56 -11.859,-21.982 -11.292,-51.69 2.995,-73.359" style="fill:#a3a3a3" id="path14" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,89.174746,26.961548)" id="g23">
|
||||
<path d="m 0,-51.2 19.7,-3 c 5.6,-0.9 10.9,2.8 11.9,8.4 l 2.7,17.7 C 29.9,-18.1 23.6,-9 16,-1.3 10.9,3.9 15.9,-1.6 10,2.1 L 1,-39.8 C 0.1,-45.3 -5.7,-50.3 0,-51.2" style="fill:#b3b3b3" id="path22" />
|
||||
</g>
|
||||
<g transform="matrix(-0.160445,0.172496,0.172496,0.160445,96.828546,10.865078)" id="g24">
|
||||
<path d="m 61.55,-141.309 c -46.795,1.269 -84.666,39.929 -84.684,86.346 -0.018,46.417 37.889,83.042 84.684,81.772 46.795,-1.269 84.666,-39.929 84.684,-86.346 0.018,-46.417 -37.889,-83.042 -84.684,-81.772" id="path23" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,56.099446,11.884458)" id="g25">
|
||||
<path d="M 0,34.1 8.7,32.5 C 4.8,21.8 3.2,10.4 4,-0.9 V -1.1 L -6.1,0.7 c -5.4,0.9 -9.2,6.1 -8.3,11.6 l 2.5,13.8 c 1.1,5.5 6.5,9.1 11.9,8" style="fill:#ffffff" id="path24" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,99.257546,5.2882484)" id="g26">
|
||||
<path d="m 0,33.4 -8.8,1.1 C -8.3,23.1 -10.2,11.8 -14.4,1.2 V 1 L -4.2,-0.3 C 1.3,-1.1 6.4,2.8 7.2,8.3 L 9,22.2 C 9.5,27.8 5.5,32.8 0,33.4" style="fill:#ffffff" id="path25" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,76.712646,31.343248)" id="g27">
|
||||
<path d="m 0,-161.7 c -22,0.5 -42.9,9.5 -58.3,25.2 -15.3,15.3 -23.7,36.2 -23.3,57.8 0.4,21.5 9.6,42 25.5,56.5 C -40,-7.3 -18.7,0.7 3.2,0 25.2,-0.5 46.1,-9.5 61.5,-25.2 76.7,-40.6 85.1,-61.4 84.8,-83 84.4,-104.5 75.2,-125 59.4,-139.6 43.2,-154.4 21.9,-162.4 0,-161.7 m -61.7,22.1 c 16.3,-16.6 38.4,-26.2 61.6,-26.8 23.2,-0.7 45.7,7.7 62.7,23.4 16.8,15.4 26.5,37 26.9,59.8 C 89.9,-60.3 81,-38.3 64.9,-22 48.6,-5.4 26.5,4.1 3.3,4.7 -19.8,5.4 -42.3,-3 -59.3,-18.7 c -16.8,-15.4 -26.5,-37.1 -26.9,-59.8 -0.5,-22.9 8.4,-44.9 24.5,-61.1" style="fill-rule:nonzero" id="path26" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,56.099446,11.790228)" id="g28">
|
||||
<path d="M 0,34.5 8.7,32.9 C 4.8,22.2 3.2,10.8 4,-0.5 v -0.2 l -7.7,1.4 c 0.1,9.2 0.2,17.8 2.8,27.3 l -8.8,1.6 c -0.4,0 -0.7,0.3 -0.8,0.7 2.5,3.2 6.5,4.9 10.5,4.2" style="fill:#a3a3a3" id="path27" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,99.257546,5.5473884)" id="g29">
|
||||
<path d="m 0,32.3 -8.8,1.1 C -8.3,22 -10.2,10.7 -14.4,0.1 v -0.2 l 7.7,-1 c 2.7,8.8 5.2,17 5.6,26.8 L 7.7,24.6 C 8.1,24.5 8.5,24.7 8.7,25 7.4,29 4,31.8 0,32.3" style="fill:#a3a3a3" id="path28" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,57.418746,12.449848)" id="g30">
|
||||
<path d="m 0,28.3 -6,1.1 c -2,0.4 -4.2,-0.1 -5.9,-1.2 -1.7,-1.1 -2.9,-2.9 -3.3,-4.9 L -17.6,9.5 c -0.4,-2 0.1,-4.1 1.3,-5.7 1.2,-1.7 3,-2.8 5.1,-3.2 L -4,-0.7 c -0.4,9.8 1,19.6 4,29 M -5.2,34 3.6,32.4 6.4,31.9 5.5,29.3 C 1.7,18.9 0.1,7.9 0.9,-3.2 V -3.5 L 0.8,-4 0.4,-6.3 -2,-5.9 -12.1,-4.1 c -3.3,0.6 -6.2,2.4 -8.2,5.1 -1.9,2.7 -2.7,6 -2.1,9.2 l 2.5,13.8 c 0.6,3.2 2.5,6.1 5.2,7.9 2.9,2 6.2,2.7 9.5,2.1" style="fill-rule:nonzero" id="path29" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,97.749846,5.8536384)" id="g31">
|
||||
<path d="m 0,29.5 6.1,-0.8 c 2.1,-0.3 3.9,-1.3 5.2,-3 1.3,-1.6 1.9,-3.6 1.6,-5.7 L 11.1,6.1 C 10.8,4.1 9.8,2.2 8.1,1 6.4,-0.2 4.4,-0.8 2.3,-0.5 L -5,0.4 c 1.7,4.6 2.9,9.4 3.7,14.2 0.9,5.1 1.3,10 1.3,14.9 m 6.6,3.8 -8.8,1.1 -2.8,0.4 0.1,-2.7 C -4.4,21.1 -6.3,10 -10.4,-0.2 l -0.1,-0.3 -0.1,-0.5 -0.3,-2.3 2.4,-0.3 10.2,-1.3 c 3.3,-0.4 6.7,0.4 9.3,2.4 2.6,2 4.4,4.9 4.8,8.1 l 1.8,13.9 c 0.4,3.3 -0.5,6.6 -2.6,9.1 -2,2.6 -5,4.3 -8.4,4.7" style="fill-rule:nonzero" id="path30" />
|
||||
</g>
|
||||
<g transform="matrix(-0.094487,-0.2158,-0.2158,0.094487,60.008346,10.163168)" id="g32">
|
||||
<path d="m -68.968,-142.292 c -20.852,8.475 -37.24,25.148 -45.56,46.039 -17.44,43.442 2.976,93.561 45.56,112.032 9.157,3.96 18.932,6.339 28.941,6.76 -61.01,-17.172 -106.83,-100.38 -28.941,-164.831" style="fill:#ffffff" id="path31" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,95.346946,21.496048)" id="g33">
|
||||
<path d="m 0,-10.4 c 1.7,-4.2 3,-8.6 3.9,-13 -7.8,18.2 -18.4,31.7 -30.5,41.1 -11,8.6 -23.9,14.3 -37.7,16.6 -13.2,2.2 -26.8,1.5 -39.8,-2 -13.1,-3.4 -25.4,-9.4 -36.2,-17.6 1.5,1.7 3.2,3.4 4.9,5 16.1,14.9 37.4,22.8 59.3,22.1 22,-0.5 42.9,-9.5 58.3,-25.2 C -10,9 -4,-0.2 0,-10.4 m 10.4,-31.7 c 0.3,11.4 -1.7,22.7 -5.9,33.3 -4.3,10.7 -10.6,20.4 -18.7,28.5 -16.3,16.6 -38.4,26.1 -61.6,26.7 -23.1,0.7 -45.6,-7.7 -62.6,-23.4 -3.8,-3.5 -7.3,-7.3 -10.4,-11.4 -3.1,-4.1 -5.7,-8.4 -8,-13 l -5.1,-13.9 9.1,11.4 c 13,15.5 30.6,26.6 50.2,31.7 12.3,3.3 25.1,4 37.7,1.9 12.9,-2.1 25.1,-7.5 35.5,-15.6 15.1,-11.8 27.6,-30.2 35.2,-56.7 l 2.7,-14.9 z" style="fill-rule:nonzero" id="path32" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,62.507246,12.284948)" id="g34">
|
||||
<path d="m 0,-59 c 32.8,-33.4 87,-34.8 121,-3.2 16.1,14.8 25.6,35.6 26.2,57.4 -12.8,-31.9 -30.4,-46.9 -51.7,-54.1 -33.2,-11.2 -64.8,-8.3 -93,24.3 -20.7,23.7 -19.6,48.4 -18,69.4 C -30.5,4.5 -25.5,-33.1 0,-59" style="fill:#ffffff" id="path33" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,76.665546,22.037948)" id="g35">
|
||||
<path d="m 0,-124.1 c -22,0.5 -42.9,9.5 -58.3,25.2 -11.7,11.8 -19.5,27 -22.2,43.4 -1.9,11.4 -1.3,23 1.8,34.1 -0.1,-6.4 0.4,-12.9 1.4,-19.2 2.4,-13.7 8.5,-26.5 17.8,-36.9 14.5,-16.7 29.9,-25.9 46,-29.4 16.1,-3.5 32.7,-1.4 49.7,4.4 11.3,3.7 21.6,10 30,18.4 6.7,6.8 12.3,14.6 16.7,23.1 C 81.7,-66.3 80,-71.5 77.7,-76.5 73.3,-86.1 67.1,-94.7 59.3,-101.9 43.1,-116.8 21.9,-124.8 0,-124.1 m -61.8,22.1 c 16.3,-16.6 38.4,-26.2 61.7,-26.8 23.1,-0.7 45.6,7.7 62.6,23.4 8.2,7.6 14.8,16.7 19.4,26.9 4.6,10.1 7.1,21.1 7.4,32.2 l -0.2,13.2 -4.3,-12.2 C 78.5,-61 71.1,-72.4 62.7,-80.8 54.8,-88.7 45.1,-94.6 34.5,-98.1 c -16.2,-5.5 -32,-7.5 -47.1,-4.2 -15.1,3.3 -29.5,11.9 -43.3,27.8 -8.7,9.8 -14.5,21.8 -16.7,34.6 -2.1,11.5 -1.4,22.8 -0.6,33.1 l 0.9,12.2 -5.4,-11.1 c -7.7,-15.7 -10.4,-33.4 -7.5,-50.7 2.8,-17.1 11,-33.2 23.4,-45.6" style="fill-rule:nonzero" id="path34" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,97.043046,0.69445839)" id="g36">
|
||||
<path d="m 0,37.2 c 0.3,2.4 0.5,4.8 0.5,7.3 -12.8,-31.9 -30.4,-46.9 -51.7,-54.1 -33.2,-11.2 -75.4,-3.5 -98,26.7 -6.8,9 -18.6,29.7 -15.7,54.2 -7.6,-24.3 -1.1,-48.6 20.4,-70.4 32.7,-33.5 86.8,-35 120.8,-3.3 C -12.1,8.2 -3.9,22 0,37.2" style="fill:#e6e6e6" id="path35" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,92.166646,14.028248)" id="g37">
|
||||
<path d="m 0,-49.8 c 6.3,6.4 11.6,13.6 15.8,21.4 -1.6,-4 -3.5,-7.9 -5.7,-11.5 -3.9,-6.6 -8.8,-12.5 -14.4,-17.8 -16.2,-14.9 -37.5,-22.9 -59.5,-22.3 -22.2,0.6 -43.2,9.7 -58.7,25.5 -10.4,10.6 -17.2,21.7 -20.5,33.2 -1.4,4.9 -2.2,9.9 -2.3,15 0.5,-2.5 1,-4.8 1.7,-7.1 2.9,-9.8 7.5,-19.1 13.5,-27.3 11.1,-14.9 26.7,-24.4 43.8,-29.1 18.6,-5 38.2,-4.4 56.4,1.7 11.3,3.7 21.5,10 29.9,18.3 m 22.6,30.1 c 0.2,1.3 0.3,2.6 0.4,3.7 0.1,1.2 0.1,2.5 0.2,3.7 l 0.3,10.9 -4.1,-10.2 C 13.1,-27.3 5.6,-38.8 -2.8,-47.3 c -7.9,-7.9 -17.7,-13.9 -28.3,-17.4 -17.5,-5.8 -36.3,-6.4 -54.1,-1.6 -16.3,4.4 -31.2,13.5 -41.7,27.6 -5.8,7.9 -10.2,16.7 -13,26.1 -2.6,8.7 -3.4,17.8 -2.4,26.8 l 2.4,20.4 -6.2,-19.4 c -4,-12.2 -4.2,-25.2 -0.7,-37.5 3.5,-12 10.5,-23.7 21.4,-34.7 l 0.1,-0.1 c 16.2,-16.5 38.3,-26 61.4,-26.6 23,-0.7 45.3,7.6 62.2,23.2 l 0.1,0.1 c 5.9,5.4 10.9,11.7 15.1,18.6 4.1,6.8 7.2,14.2 9.1,21.9 z" style="fill-rule:nonzero" id="path36" />
|
||||
</g>
|
||||
<g transform="matrix(0.131129,0.19571,0.19571,-0.131129,60.042246,4.7938284)" id="g38">
|
||||
<path d="m 32.805,-16.969 c 0,0 -31.438,29.611 -14.637,74.808 1.315,4.657 15.792,4.346 14.637,-2.946 -1.154,-7.292 -9.456,-35.313 13.492,-66.457 1.659,-2.195 -8.429,-10.963 -13.492,-5.405" style="fill:#e6e6e6" id="path37" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,52.094646,-8.3046516)" id="g45">
|
||||
<g opacity="0.25" id="g44">
|
||||
<g transform="matrix(-1,0,0,1,141,101.8)" id="g39">
|
||||
<path d="m 0,-36.8 c -10.162,0 -18.4,8.238 -18.4,18.4 C -18.4,-8.238 -10.162,0 0,0 10.162,0 18.4,-8.238 18.4,-18.4 18.4,-28.562 10.162,-36.8 0,-36.8" style="fill:#fefcf9;fill-rule:nonzero" id="path38" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,143.3,88.2)" id="g40">
|
||||
<path d="m 0,-14.2 c -3.921,0 -7.1,3.179 -7.1,7.1 0,3.921 3.179,7.1 7.1,7.1 3.921,0 7.1,-3.179 7.1,-7.1 0,-3.921 -3.179,-7.1 -7.1,-7.1" style="fill-rule:nonzero" id="path39" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,71.8,112.5)" id="g41">
|
||||
<path d="m 0,-36.8 c -10.162,0 -18.4,8.238 -18.4,18.4 C -18.4,-8.238 -10.162,0 0,0 10.162,0 18.4,-8.238 18.4,-18.4 18.4,-28.562 10.162,-36.8 0,-36.8" style="fill:#fefcf9;fill-rule:nonzero" id="path40" />
|
||||
</g>
|
||||
<g transform="translate(116.1,122.6)" id="g42">
|
||||
<path d="m 0,17.4 c -11.8,1.8 -23.8,-0.3 -34.3,-5.8 -0.9,-0.5 -1.3,-1.6 -0.8,-2.5 0.5,-0.9 1.6,-1.3 2.5,-0.8 20.1,10.8 44.9,7 60.7,-9.4 0.7,-0.7 1.9,-0.7 2.6,0 0.7,0.7 0.7,1.9 0,2.6 -7.9,8 -18,13.4 -29,15.6 -0.5,0 -1.1,0.2 -1.7,0.3 z" style="fill:none;fill-rule:nonzero;stroke:#ffffff;stroke-width:16.98px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4" id="path41" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,76.2,97.8)" id="g43">
|
||||
<path d="m 0,-14.2 c -3.921,0 -7.1,3.179 -7.1,7.1 0,3.921 3.179,7.1 7.1,7.1 3.921,0 7.1,-3.179 7.1,-7.1 0,-3.921 -3.179,-7.1 -7.1,-7.1" style="fill-rule:nonzero" id="path42" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="zrok" transform="matrix(0.02734414,0,0,0.02978162,2.3966205,5.6320267)"> <path d="M 508.489,211.308 300.982,391.439 h 207.507 v 93.53 H 134.977 v -93.53 L 342.483,211.308 H 134.977 v -93.53 h 373.512 z" style="fill:#7bf600;fill-rule:nonzero" id="path45" />
|
||||
<path d="m 791.453,218.236 c -31.692,0 -64.39,6.928 -98.094,20.784 V 484.969 H 561.309 V 117.778 h 116.958 l 7.546,45.033 C 729.075,128.17 774.349,110.85 821.636,110.85 h 33.955 v 107.386 z" style="fill:#7bf600;fill-rule:nonzero" id="path46" />
|
||||
<path d="m 1300.79,381.047 c 0,34.64 -10.69,61.776 -32.07,81.405 -21.38,19.63 -50.93,29.445 -88.66,29.445 H 1006.5 c -37.723,0 -67.277,-9.815 -88.657,-29.445 -21.379,-19.629 -32.069,-46.765 -32.069,-81.405 V 221.7 c 0,-34.641 10.69,-61.776 32.069,-81.405 21.38,-19.63 50.934,-29.445 88.657,-29.445 h 173.56 c 37.73,0 67.28,9.815 88.66,29.445 21.38,19.629 32.07,46.764 32.07,81.405 z M 1168.74,232.092 c 0,-18.475 -10.06,-27.712 -30.18,-27.712 h -90.55 c -20.13,0 -30.19,9.237 -30.19,27.712 v 138.563 c 0,18.475 10.06,27.712 30.19,27.712 h 90.55 c 20.12,0 30.18,-9.237 30.18,-27.712 z" style="fill:#7bf600;fill-rule:nonzero" id="path47" />
|
||||
<path d="M 1500.75,339.478 V 484.969 H 1368.7 V 0 h 132.05 v 245.948 h 60.37 l 83,-128.17 h 139.59 l -113.18,176.667 113.18,190.524 h -139.59 l -86.78,-145.491 z" style="fill:#7bf600;fill-rule:nonzero" id="path48" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
724
agent/agentUiTs/package-lock.json
generated
724
agent/agentUiTs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,6 +10,10 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^6.1.7",
|
||||
"@mui/material": "^6.1.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
|
||||
49
agent/agentUiTs/src/AgentUi.tsx
Normal file
49
agent/agentUiTs/src/AgentUi.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {GetAgentApi} from "./model/api.ts";
|
||||
import NavBar from "./NavBar.tsx";
|
||||
import {AgentObject, buildOverview} from "./model/overview.ts";
|
||||
import Overview from "./Overview.tsx";
|
||||
|
||||
const AgentUi = () => {
|
||||
const [version, setVersion] = useState("unset");
|
||||
const [overview, setOverview] = useState(new Array<AgentObject>());
|
||||
|
||||
useEffect(() => {
|
||||
GetAgentApi().agentVersion()
|
||||
.then(r => {
|
||||
if(r.v) {
|
||||
setVersion(r.v);
|
||||
} else {
|
||||
console.log("unexpected", r);
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let interval = setInterval(() => {
|
||||
GetAgentApi().agentStatus()
|
||||
.then(r => {
|
||||
setOverview(buildOverview(r));
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
}, 1000);
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
setOverview(new Array<AgentObject>());
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar version={version} />
|
||||
<Overview overview={overview} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AgentUi;
|
||||
@ -1,42 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import './App.css'
|
||||
import {useEffect, useState} from 'react'
|
||||
import {AgentApi, Configuration} from "./api";
|
||||
|
||||
function App() {
|
||||
const [version, setVersion] = useState("not set");
|
||||
const [errorMessage, setErrorMessage] = useState("no error");
|
||||
|
||||
useEffect(() => {
|
||||
let api = new AgentApi(new Configuration({basePath: window.location.origin}));
|
||||
api.agentVersion().then((v) => {
|
||||
if(v.v) {
|
||||
setVersion(v.v);
|
||||
} else {
|
||||
console.log(v);
|
||||
}
|
||||
}).catch((v) => {
|
||||
console.log("caught", v.toString());
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let api = new AgentApi(new Configuration({basePath: window.location.origin}));
|
||||
api.agentAccessPrivate({token: "testing", bindAddress: "127.0.0.1:9911"}).then(v => {
|
||||
if(v.frontendToken) {
|
||||
setErrorMessage(v.frontendToken);
|
||||
} else {
|
||||
console.log(v);
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e.response.json().then(eb => {
|
||||
setErrorMessage(eb.message);
|
||||
console.log(eb.message);
|
||||
}));
|
||||
}).then(v => {
|
||||
console.log(v);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Agent UI</h1>
|
||||
<h2>{version}</h2>
|
||||
<h4>{errorMessage}</h4>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
35
agent/agentUiTs/src/NavBar.tsx
Normal file
35
agent/agentUiTs/src/NavBar.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import LanIcon from "@mui/icons-material/Lan";
|
||||
import ShareIcon from "@mui/icons-material/Share";
|
||||
|
||||
interface NavBarProps {
|
||||
version: string;
|
||||
}
|
||||
|
||||
function NavBar({ version }: NavBarProps) {
|
||||
return (
|
||||
<Box ssx={{ flexGrow: 1 }}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "none", md: "block" }}>
|
||||
zrok Agent { version !== "" ? " | " + version : ""}
|
||||
</Typography>
|
||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||
<Grid2 display="flex" justifyContent="right" size="grow">
|
||||
<Button color="inherit"><ShareIcon /></Button>
|
||||
</Grid2>
|
||||
<Grid2 display="flex" justifyContent="right">
|
||||
<Button color="inherit" ><LanIcon /></Button>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBar
|
||||
39
agent/agentUiTs/src/Overview.tsx
Normal file
39
agent/agentUiTs/src/Overview.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import {AgentObject} from "./model/overview.ts";
|
||||
import {Card, Grid2} from "@mui/material";
|
||||
import ShareIcon from "@mui/icons-material/Share";
|
||||
import LanIcon from "@mui/icons-material/Lan";
|
||||
import ShareCard from "./ShareCard.tsx";
|
||||
|
||||
interface OverviewProps {
|
||||
overview: Array<AgentObject>;
|
||||
}
|
||||
|
||||
function Overview({ overview }: OverviewProps) {
|
||||
let cards = [];
|
||||
if(overview.length > 0) {
|
||||
overview.forEach(row => {
|
||||
switch(row.type) {
|
||||
case "access":
|
||||
cards.push(<Grid2 size={{ xs: 12, md: 6 }}><h6>{row.id}</h6></Grid2>);
|
||||
break;
|
||||
|
||||
case "share":
|
||||
cards.push(<Grid2 size={{ xs: 12, md: 6 }}><ShareCard shareObject={row} /></Grid2>);
|
||||
break;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
cards.push(<Grid2 size={{ xs: 12 }}>
|
||||
<Card key="empty">
|
||||
<h5>zrok Agent is empty! Add a <a href={"#"}>share <ShareIcon /></a> or <a href={"#"}>access <LanIcon /></a> share to get started.</h5>
|
||||
</Card>
|
||||
</Grid2>);
|
||||
}
|
||||
return (
|
||||
<Grid2 container spacing="2">
|
||||
{cards}
|
||||
</Grid2>
|
||||
);
|
||||
}
|
||||
|
||||
export default Overview;
|
||||
56
agent/agentUiTs/src/ShareCard.tsx
Normal file
56
agent/agentUiTs/src/ShareCard.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import * as React from "react";
|
||||
import {AgentObject} from "./model/overview.ts";
|
||||
import {ShareDetail} from "./api";
|
||||
import {AppBar, Box, Button, Card, Chip, Grid2, Toolbar, Typography} from "@mui/material";
|
||||
import ShareIcon from "@mui/icons-material/Share";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
|
||||
interface ShareCardProps {
|
||||
shareObject: AgentObject;
|
||||
}
|
||||
|
||||
function ShareCard({ shareObject }: ShareCardProps) {
|
||||
let frontends = new Array<React.JSX.Element>();
|
||||
let share = (shareObject.v as ShareDetail);
|
||||
share.frontendEndpoint!.map(fe => {
|
||||
frontends.push(<a key={share.token} href={fe} target="_">{fe}</a>);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<AppBar position="sticky">
|
||||
<Toolbar variant="dense">
|
||||
<ShareIcon />
|
||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||
<Grid2 display="flex" justifyContent="center" size="grow">
|
||||
<Typography variant="h6" component="div">{share.token}</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
<Grid2 container>
|
||||
<Grid2 display="flex" justifyContent="right">
|
||||
{share.shareMode === "public" && (
|
||||
<Chip label={share.shareMode} size="small" color="success" />
|
||||
)}
|
||||
{share.shareMode === "private" && (
|
||||
<Chip label={share.shareMode} size="small" color="warning" />
|
||||
)}
|
||||
<Chip label={share.backendMode} size="small" color="info" />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Box sx={{ p: 2, textAlign: "center" }}>
|
||||
<Typography variant="h6" component="div">
|
||||
{share.backendEndpoint} → {frontends} <br/>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||
<Grid2 display="flex" justifyContent="right" size="grow">
|
||||
<Button variant="contained"><DeleteIcon /></Button>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShareCard;
|
||||
@ -1,16 +1,14 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
body {
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
padding-bottom: 15px;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -22,14 +20,6 @@ a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
@ -54,15 +44,12 @@ button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import "./index.css";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import {StrictMode} from "react";
|
||||
import {createRoot} from "react-dom/client";
|
||||
import {ThemeProvider} from "@mui/material";
|
||||
import {theme} from "./model/theme.ts";
|
||||
import AgentUi from "./AgentUi.tsx";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
<ThemeProvider theme={theme}>
|
||||
<AgentUi />
|
||||
</ThemeProvider>
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
5
agent/agentUiTs/src/model/api.ts
Normal file
5
agent/agentUiTs/src/model/api.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import {AgentApi, Configuration} from "../api";
|
||||
|
||||
export const GetAgentApi = () => {
|
||||
return new AgentApi(new Configuration({basePath: window.location.origin}));
|
||||
}
|
||||
36
agent/agentUiTs/src/model/overview.ts
Normal file
36
agent/agentUiTs/src/model/overview.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import {AccessDetail, ShareDetail, StatusResponse} from "../api";
|
||||
|
||||
export class AgentObject {
|
||||
type: string;
|
||||
id: string;
|
||||
v: (ShareDetail|AccessDetail);
|
||||
}
|
||||
|
||||
export function buildOverview(status: StatusResponse): Array<AgentObject> {
|
||||
let out = new Array<AgentObject>();
|
||||
if(status) {
|
||||
if(status.accesses) {
|
||||
status.accesses.forEach(acc => {
|
||||
let accObj = new AgentObject();
|
||||
accObj.type = "access";
|
||||
accObj.id = acc.frontendToken!;
|
||||
accObj.v = acc;
|
||||
out.push(accObj);
|
||||
});
|
||||
}
|
||||
if(status.shares) {
|
||||
status.shares.forEach(shr => {
|
||||
let shrObj = new AgentObject();
|
||||
shrObj.type = "share";
|
||||
shrObj.id = shr.token!;
|
||||
shrObj.v = shr;
|
||||
out.push(shrObj);
|
||||
});
|
||||
}
|
||||
out.sort((a, b) => {
|
||||
if(a.id < b.id) return -1;
|
||||
if(a.id > b.id) return 1;
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
47
agent/agentUiTs/src/model/theme.ts
Normal file
47
agent/agentUiTs/src/model/theme.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import {createTheme} from "@mui/material";
|
||||
|
||||
const componentOptions = {
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: ({theme}) => theme.unstable_sx({
|
||||
mt: 5,
|
||||
p: 1,
|
||||
borderRadius: 3,
|
||||
}),
|
||||
}
|
||||
},
|
||||
MuiAppBar: {
|
||||
styleOverrides: {
|
||||
root : ({theme}) => theme.unstable_sx({
|
||||
borderRadius: 3,
|
||||
}),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const theme = createTheme({
|
||||
components: componentOptions,
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
main: '#241775',
|
||||
},
|
||||
secondary: {
|
||||
main: '#9bf316',
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Poppins',
|
||||
},
|
||||
})
|
||||
|
||||
export const modalStyle = {
|
||||
position: 'absolute',
|
||||
top: '25%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 600,
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user