Optimized rate limiter implementation

- Moved rate limiter scope into proxy router
- Give IpTable a better name following clean code guideline
- Optimized client IP retrieval method
- Added stop channel for request counter ticker
- Fixed #199
- Optimized UI for rate limit

src/web/components/httprp.html

@@ -19,8 +19,7 @@
                     <th>Host</th>
                     <th>Destination</th>
                     <th>Virtual Directory</th>
-                    <th>Basic Auth</th>
-                    <th>Rate Limit</th>
+                    <th>Advanced Settings</th>
                     <th class="no-sort" style="min-width:150px;">Actions</th>
                 </tr>
             </thead>
@@ -105,11 +104,9 @@
                         </td>
                         <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
                         <td data-label="" editable="true" datatype="vdir">${vdList}</td>
-                        <td data-label="" editable="true" datatype="basicauth">
-                            ${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}
-                        </td>
-                        <td data-label="" editable="true" datatype="ratelimit">
-                            ${subd.RequireRateLimit?`<i class="ui green check icon"></i> ${subd.RateLimit}req/s`:`<i class="ui grey remove icon"></i>`}
+                        <td data-label="" editable="true" datatype="advanced">
+                            ${subd.RequireBasicAuth?`<i class="ui green check icon"></i> Basic Auth`:`<i class="ui grey remove icon"></i> Basic Auth`}<br>
+                            ${subd.RequireRateLimit?`<i class="ui green check icon"></i> Rate Limit @ ${subd.RateLimit} req/s`:`<i class="ui grey remove icon"></i> Rate Limit`}
                         </td>
                         <td class="center aligned ignoremw" editable="true" datatype="action" data-label="">
                             <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
@@ -267,11 +264,11 @@
                     <i class="ui yellow folder icon"></i> Edit Virtual Directories
                 </button>`);
 
-            }else if (datatype == "basicauth"){
+            }else if (datatype == "advanced"){
                 let requireBasicAuth = payload.RequireBasicAuth;
-                let checkstate = "";
+                let basicAuthCheckstate = "";
                 if (requireBasicAuth){
-                    checkstate = "checked";
+                    basicAuthCheckstate = "checked";
                 }
 
                 let skipWebSocketOriginCheck = payload.SkipWebSocketOriginCheck;
@@ -280,16 +277,36 @@
                     wsCheckstate = "checked";
                 }
 
+                let requireRateLimit = payload.RequireRateLimit;
+                let rateLimitCheckState = "";
+                if (requireRateLimit){
+                    rateLimitCheckState = "checked";
+                }
+                let rateLimit = payload.RateLimit;
+                if (rateLimit == 0){
+                    //This value is not set. Make it default to 100
+                    rateLimit = 100;
+                }
+                let rateLimitDisableState = "";
+                if (!payload.RequireRateLimit){
+                    rateLimitDisableState = "disabled";
+                }
+
                 column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
+                    <input type="checkbox" class="RequireBasicAuth" ${basicAuthCheckstate}>
                         <label>Require Basic Auth</label>
                     </div>
-                    <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
+                    <br>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
+                    <br>
+                    <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
+                    <!-- <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editLoadBalanceOptions('${uuid}');"><i class="blue server icon"></i> Load Balance</button> -->
+
                     <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
                         <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
                             <div class="title">
                                 <i class="dropdown icon"></i>
-                                Advance Configs
+                                Security Options
                             </div>
                             <div class="content">
                                 <div class="ui checkbox" style="margin-top: 0.4em;">
@@ -298,23 +315,26 @@
                                     <small>Check this to allow cross-origin websocket requests</small></label>
                                 </div>
                                 <br>
-                                <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
-                                <!-- <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editLoadBalanceOptions('${uuid}');"><i class="blue server icon"></i> Load Balance</button> -->
+                                <div class="ui checkbox" style="margin-top: 0.4em;">
+                                    <input type="checkbox" onchange="handleToggleRateLimitInput();" class="RequireRateLimit" ${rateLimitCheckState}>
+                                    <label>Require Rate Limit</label>
+                                </div><br>
+                                <div class="ui mini right labeled fluid input ${rateLimitDisableState}" style="margin-top: 0.4em;">
+                                    <input type="number" class="RateLimit" value="${rateLimit}" min="1" >
+                                    <label class="ui basic label">
+                                        req / sec / IP
+                                    </label>
+                                </div>
                             </div>
                         </div>
                     <div>
                 `);
 
             } else if (datatype == "ratelimit"){
-                let requireRateLimit = payload.RequireRateLimit;
-                let checkstate = "";
-                if (requireRateLimit){
-                    checkstate = "checked";
-                }
-                let rateLimit = payload.RateLimit;
-
-                column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="RequireRateLimit" ${checkstate}>
+               
+                column.empty().append(`
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="RequireRateLimit" ${checkstate}>
                         <label>Require Rate Limit</label>
                     </div>
                     <div class="ui mini fluid input">
@@ -352,6 +372,17 @@
         $("#httpProxyList").find(".editBtn").addClass("disabled");
     }
 
+    //handleToggleRateLimitInput will get trigger if the "require rate limit" checkbox
+    // is changed and toggle the disable state of the rate limit input field
+    function handleToggleRateLimitInput(){
+        let isRateLimitEnabled = $("#httpProxyList input.RequireRateLimit")[0].checked;
+        if (isRateLimitEnabled){
+            $("#httpProxyList input.RateLimit").parent().removeClass("disabled");
+        }else{
+            $("#httpProxyList input.RateLimit").parent().addClass("disabled");
+        }
+    }
+
     function exitProxyInlineEdit(){
         listProxyEndpoints();
         $("#httpProxyList").find(".editBtn").removeClass("disabled");
@@ -463,10 +494,6 @@
         })
     }
 
-    /* Access List handling */
-    
-    
-
     //Bind on tab switch events
     tabSwitchEventBind["httprp"] = function(){
         listProxyEndpoints();

src/web/components/rules.html

@@ -81,8 +81,13 @@
                                 </div>
                                 <div class="field">
                                     <label>Rate Limit</label>
-                                    <input type="number" id="proxyRateLimit" placeholder="100" min="1" max="1000" value="100">
-                                    <small>The Rate Limit is applied to the whole proxy endpoint. If the number of requests exceeds the limit, the proxy will return a 429 error code.</small>
+                                    <div class="ui fluid right labeled input">
+                                        <input type="number" id="proxyRateLimit" placeholder="100" min="1" max="1000" value="100">
+                                        <div class="ui basic label">
+                                           req / sec / IP
+                                        </div>
+                                    </div>
+                                    <small>Return a 429 error code if request rate exceed the rate limit.</small>
                                 </div>
                                 <div class="field">
                                     <div class="ui checkbox">
@@ -282,9 +287,9 @@
     
     function toggleRateLimit() {
         if ($("#requireRateLimit").parent().checkbox("is checked")) {
-            $("#proxyRateLimit").parent().removeClass("disabled");
+            $("#proxyRateLimit").parent().parent().removeClass("disabled");
         } else {
-            $("#proxyRateLimit").parent().addClass("disabled");
+            $("#proxyRateLimit").parent().parent().addClass("disabled");
         }
     }
     $("#requireRateLimit").on('change', toggleRateLimit);
@@ -422,9 +427,9 @@
         initNewProxyRuleAccessDropdownList();
     }
 
-    $(document).ready(function(){
-        $("#advanceProxyRules").accordion();
-        $("#newProxyRuleAccessFilter").parent().dropdown();
-    });
+   
+    $("#advanceProxyRules").accordion();
+    $("#newProxyRuleAccessFilter").parent().dropdown();
+   
     
 </script>

src/web/components/status.html

@@ -74,7 +74,7 @@
         <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
         <button class="ui green notloopbackOnly button" style="background: linear-gradient(60deg, #27e7ff, #00ca52);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
     </div>
-    <br><br>
+    <br>
     <div id="tls" class="ui toggle notloopbackOnly checkbox">
         <input type="checkbox">
         <label>Use TLS to serve proxy request</label>