TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!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;
            }

            #upstreamTable{
                max-height: 400px;
                border-radius: 0.3em;
                padding: 0.3em;
                overflow-y: auto;
            }

            @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>