123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <!DOCTYPE html>
- <html>
- <head>
- <!-- Notes: This should be open in its original path-->
- <link rel="stylesheet" href="../script/semantic/semantic.min.css">
- <script src="../script/jquery-3.6.0.min.js"></script>
- <script src="../script/semantic/semantic.min.js"></script>
- <style>
- .upstreamActions{
- position: absolute;
- top: 0.6em;
- right: 0.6em;
- }
- .upstreamLink{
- max-width: 220px;
- display: inline-block;
- word-break: break-all;
- }
- .ui.toggle.checkbox input:checked ~ label::before{
- background-color: #00ca52 !important;
- }
- @media (max-width: 499px) {
- .upstreamActions{
- position: relative;
- margin-top: 1em;
- margin-left: 0.4em;
- margin-bottom: 0.4em;
- }
- }
- </style>
- </head>
- <body>
- <br>
- <div class="ui container">
- <div class="ui header">
- <div class="content">
- Upstreams / Load Balance
- <div class="sub header epname"></div>
- </div>
- </div>
- <div class="ui divider"></div>
- <div class="ui small pointing secondary menu">
- <a class="item active narrowpadding" data-tab="upstreamlist">Upstreams</a>
- <a class="item narrowpadding" data-tab="newupstream">Add Upstream</a>
- </div>
- <div class="ui tab basic segment active" data-tab="upstreamlist">
- <!-- A list of current existing upstream on this reverse proxy-->
- <div id="upstreamTable">
- <div class="ui segment">
- <a><i class="ui loading spinner icon"></i> Loading</a>
- </div>
- </div>
- <div class="ui message">
- <i class="ui blue info circle icon"></i> Round-robin load balancing algorithm will be used for upstreams with same priority. Lower priority origin server will be used as fallback when all the higher priority server are offline.
- </div>
- </div>
- <div class="ui tab basic segment" data-tab="newupstream">
- <!-- Web Form to create a new upstream -->
- <h4 class="ui header">
- <i class="green add icon"></i>
- <div class="content">
- Add Upstream Server
- <div class="sub header">Create new fallback or load balance upstream</div>
- </div>
- </h4>
- <p style="margin-bottom: 0.4em;">Target IP address with port</p>
- <div class="ui fluid small input">
- <input type="text" placeholder="" onchange="cleanProxyTargetValue(this);"><br>
- </div>
- <small>E.g. 192.168.0.101:8000 or example.com</small>
- <br><br>
- <div class="ui checkbox">
- <input type="checkbox" id="requireTLS">
- <label>Require TLS<br>
- <small>Proxy target require HTTPS connection</small></label>
- </div><br>
- <div class="ui checkbox" style="margin-top: 0.6em;">
- <input type="checkbox" id="skipTlsVerification">
- <label>Skip Verification<br>
- <small>Check this if proxy target is using self signed certificates</small></label>
- </div><br>
- <div class="ui checkbox" style="margin-top: 0.4em;">
- <input type="checkbox" id="SkipWebSocketOriginCheck" ${upstream.SkipWebSocketOriginCheck?"checked":""}>
- <label>Skip WebSocket Origin Check<br>
- <small>Check this to allow cross-origin websocket requests</small></label>
- </div>
- <br><br>
- <button class="ui basic button"><i class="ui green circle check icon"></i> Create</button>
- </div>
- <div class="ui divider"></div>
- <div class="field" >
- <button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
- </div>
- </div>
-
- <br><br><br><br>
- </div>
- <script>
- let origins = [];
- let editingEndpoint = {};
- $('.menu .item').tab();
-
- function initOriginList(){
- $.ajax({
- url: "/api/proxy/detail",
- method: "POST",
- data: {
- "type":"host",
- "epname": editingEndpoint.ep
- },
- success: function(data){
- if (data.error != undefined){
- //This endpoint not exists?
- alert(data.error);
- return;
- }else{
- $("#upstreamTable").html("");
- if (data.Origins != undefined){
- origins = data.Origins;
- console.log(origins);
- data.Origins.forEach(upstream => {
- let tlsIcon = "";
- if (upstream.RequireTLS){
- tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
- if (upstream.SkipCertValidations){
- tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
- }
- }
- //Priority Arrows
- let upArrowClass = "";
- if (upstream.Priority == 0 ){
- //Cannot go any higher
- upArrowClass = "disabled";
- }
- let url = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`
-
- $("#upstreamTable").append(`<div class="ui segment">
- <h4 class="ui header">
- <div class="ui toggle checkbox" style="display:inline-block;">
- <input type="checkbox" name="enabled" style="margin-top: 0.4em;" ${!upstream.Disabled?"checked":""}>
- <label></label>
- </div>
- <div class="content">
- <a href="${url}" target="_blank" class="upstreamLink">${upstream.OriginIpOrDomain} ${tlsIcon}</a>
- <div class="sub header">Online | Priority: ${upstream.Priority}</div>
- </div>
- </h4>
- <div class="ui divider"></div>
- <div class="ui checkbox">
- <input type="checkbox" name="example">
- <label>Require TLS<br>
- <small>Proxy target require HTTPS connection</small></label>
- </div><br>
- <div class="ui checkbox" style="margin-top: 0.6em;">
- <input type="checkbox" name="example">
- <label>Skip Verification<br>
- <small>Check this if proxy target is using self signed certificates</small></label>
- </div><br>
- <div class="ui checkbox" style="margin-top: 0.4em;">
- <input type="checkbox" class="SkipWebSocketOriginCheck" ${upstream.SkipWebSocketOriginCheck?"checked":""}>
- <label>Skip WebSocket Origin Check<br>
- <small>Check this to allow cross-origin websocket requests</small></label>
- </div><br>
-
- <div class="upstreamActions">
- <!-- Change Priority -->
- <button class="ui basic circular icon button ${upArrowClass} highPriorityButton" title="Higher Priority"><i class="ui arrow up icon"></i></button>
- <button class="ui basic circular icon button lowPriorityButton" title="Lower Priority"><i class="ui arrow down icon"></i></button>
- <button class="ui basic circular icon button" title="Edit Upstream Destination"><i class="ui grey edit icon"></i></button>
- <button class="ui basic circular icon button" title="Remove Upstream"><i class="ui red trash icon"></i></button>
- </div>
- </div>`);
- });
- if (data.Origins.length == 1){
- $(".lowPriorityButton").addClass('disabled');
- }
- $(".ui.checkbox").checkbox();
- }else{
- //Assume no origins
- $("#inlineEditTable").html(`<tr>
- <td colspan="2"><i class="ui red circle times icon"></i> Invalid Upstream Settings</td>
- </tr>`);
- }
-
- }
- }
- })
- }
-
- /* New Upstream Origin Functions */
- //Clearn the proxy target value, make sure user do not enter http:// or https://
- //and auto select TLS checkbox if https:// exists
- function cleanProxyTargetValue(input){
- let targetDomain = $(input).val().trim();
- if (targetDomain.startsWith("http://")){
- targetDomain = targetDomain.substr(7);
- $(input).val(targetDomain);
- $("#requireTLS").parent().checkbox("set unchecked");
- }else if (targetDomain.startsWith("https://")){
- targetDomain = targetDomain.substr(8);
- $(input).val(targetDomain);
- $("#requireTLS").parent().checkbox("set checked");
- }
- }
- if (window.location.hash.length > 1){
- let payloadHash = window.location.hash.substr(1);
- try{
- payloadHash = JSON.parse(decodeURIComponent(payloadHash));
- $(".epname").text(payloadHash.ep);
- editingEndpoint = payloadHash;
- initOriginList();
- }catch(ex){
- console.log("Unable to load endpoint data from hash")
- }
- }
- function closeThisWrapper(){
- parent.hideSideWrapper(true);
- }
- </script>
- </body>
- </html>
|