v5.0.0.0

Changelog: https://haproxy-wi.org/changelog.py#5_0_0

app/templates/ajax/new_option.html

@@ -5,7 +5,6 @@
 		</td>
 		<td class="first-collumn" style="width: 77%;">
 			<input type="text" id="option-body-{{option.0}}" class="form-control" value="{{option.1}}" size="60">
-
 		</td>
 		<td>
 			<a class="delete" onclick="confirmDeleteOption({{option.0}})"  style="cursor: pointer;"></a>

app/templates/ajax/overivewWaf.html

@@ -11,7 +11,7 @@
 				</a>
 			</td>
 			<td>
-			{% if role <= 1 %}
+			{% if role <= 2 %}
 				<a id="{{ service.1 }}" class="start-waf" title="Start WAF service">
 					<span class="service-start" onclick="confirmAjaxAction('start', 'waf', '{{service.1}}')"></span>
 				</a>
@@ -24,7 +24,7 @@
 			{% endif %}
 			</td>
 			<td>
-			{% if role <= 1 %}
+			{% if role <= 2 %}
 				{% if service.3 == "On" or service.3 == "Off" or service.3 == "DetectionOnly" %}
 					<select class="waf_mode" id="{{ service.0 }}_select">
 						{% set waf_modes = [] %}
@@ -55,12 +55,19 @@
 					{% endif %}
 				{% endif %}
 			</td>
+			<td>
+				{% if role <= 2 %}
+					{% if service.3 == "On" or service.3 == "Off" or service.3 == "DetectionOnly" %}
+						<a href="/app/waf.py?manage_rules=1&serv={{service.1}}" class="ui-button ui-widget ui-corner-all">Open</a>
+					{% endif %}
+				{% endif %}
+			</td>
 			<td></td>
 	{% else %}
 		<td class="padding10 first-collumn-wi">
 			<span class="serverDown server-status"></span> {{ service.0 }}
 		</td>
-		{% if role <= 1 %}
+		{% if role <= 2 %}
 		<td>
 			<a title="Install WAF"><button onclick="installWaf('{{ service.1 }}')">Install</button></a>
 		</td>
@@ -68,16 +75,15 @@
 	{% endif %}
 {% endfor %}
 <script>
-	{% if role <= 1 %}
+	{% if role <= 2 %}
 		$( "select" ).selectmenu();
 		$( "input[type=checkbox]" ).checkboxradio();
-		$( "select" ).on('selectmenuchange',function() {
+		$( ".waf_mode" ).on('selectmenuchange',function() {
 			var id = $(this).attr('id');
 			changeWafMode(id)
 		});	
 		$( ".ajaxwafstatus input" ).change(function() {
 			var id = $(this).attr('id');
-			console.log(id)
 			metrics_waf(id);
 		});
 	{% endif %}

app/templates/ajax/overviewServers.html

@@ -22,12 +22,12 @@
 	{% else %}
 		<div class="top-info" style="width: 550px;">
 	{% endif %}
-			<div style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
+			<div id="cpu_div" style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
 				<canvas id="cpu" role="img"></canvas>
 			</div>
-			<div style="height: 140px;width: 50%;float: right;margin:0; padding:0;">
+			<div id="ram_div" style="height: 140px;width: 50%;float: right;margin:0; padding:0;">
 				<canvas id="ram" role="img"></canvas>
 			</div>	
-		</div>		
+	</div>		
 </div>
 {% endfor %}

app/templates/ajax/show_compare_configs.html

@@ -1,5 +1,5 @@
 {% from 'include/input_macros.html' import input %}
-<form action="diff.py#diff" method="get">
+<form action="diff.py#diff" method="post">
 	<center>
 		<h4>
 			<span style="padding: 20px;">Choose left</span>

app/templates/hapservers.html

@@ -78,18 +78,19 @@
 			<script src="/inc/metrics.js"></script>
 			<script src="/inc/chart.min.js"></script>
 			<script>
+				var server_ip = '{{s.2}}'
 				function showMetrics() {
 					{% if service == 'haproxy' %}
 						{% for s in servers %}
-							getChartData('{{s.2}}')
+							getChartData(server_ip)
-							getWafChartData('{{s.2}}')
+							getWafChartData(server_ip)
 						{% endfor %}
 					{% endif %}
-					showOverviewServer('{{s.1}}', '{{s.2}}', '{{s.0}}', '{{service}}');
+					showOverviewServer('{{s.1}}', server_ip, '{{s.0}}', '{{service}}');
 					{% if service == 'nginx' %}
-						showNginxConnections('{{ s.2 }}')
+						showNginxConnections(server_ip)
 					{% else %}
-						showBytes('{{ s.2 }}')
+						showBytes(server_ip)
 					{% endif %}
 				}
 				showMetrics();
@@ -99,8 +100,8 @@
 						let metrics = new Promise(
 								(resolve, reject) => {
 									{% for s in servers %}
-									getChartData('{{s.2}}')
+									getChartData(server_ip)
-									getWafChartData('{{s.2}}')
+									getWafChartData(server_ip)
 									{% endfor %}
 								});
 						metrics.then();
@@ -189,7 +190,8 @@
 					Uptime: {% else %} Downtime: {% endif %} {{s.5.0.4}}
 				{% else %}
 					{% if s.5.0 is defined %}
-				{{s.5.0.0}} {{s.5.0.1}}
+						{{s.5.0.0}} {{s.5.0.1}}
+						<br />
 						{{s.5.0.2}}
 					{% else %}
 						Cannot get information about HAProxy 
@@ -227,7 +229,7 @@
 					{% else %}
 						{{ checkbox(id, title='Enable Auto Start', value='1', desc='Auto Start') }}
 					{% endif %}
-				{% endif %}
+			{% endif %}
 			</div>
 			<div class="server-act-links">
 				<a href="/app/config.py?service={{service}}&serv={{s.2}}&showConfig" class="ui-button ui-widget ui-corner-all" title="Open running config">Open</a>	
@@ -275,10 +277,10 @@
 		</div>
 	</div>
 	{% for s in servers %}
-		<div class="chart-container" style="display: block; width: 91.3%; height: 300px;">
+		<div id="server_metrics_div" class="chart-container" style="display: block; width: 91.3%; height: 300px;">
 			<canvas id="{{s.2}}" role="img"></canvas>
 		</div>
-		<div class="chart-container" style="display: block; width: 90%; height: 300px;">
+		<div id="waf_metrics_div" class="chart-container" style="display: block; width: 90%; height: 300px;">
 			<canvas id="s_{{s.2}}" role="img"></canvas>
 		</div>
 	{% endfor %}

app/templates/ovw.html

@@ -40,8 +40,8 @@
 			<a href="/app/waf.py" title="WAf servers overview" class="logs_link">
 				WAF
 			</a>
-		</td  class="padding10">
+		</td>
-		<td>
+		<td class="padding10">
 			<a onclick="showOverview(ip, hostnamea)" title="Refresh" style="float: right; margin-right: 25px;">
 				<span class="service-reload"></span>
 			</a>
@@ -70,10 +70,10 @@
 	</tr>		
 	<tr>
 		<td style="width:100%" colspan="2">					
-			<div style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
+			<div id="cpu_div" style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
 				<canvas id="cpu" role="img"></canvas>
 			</div>
-			<div style="height: 140px;width: 50%;float: right;margin:0; padding:0;">
+			<div id="ram_div" style="height: 140px;width: 50%;float: right;margin:0; padding:0;">
 				<canvas id="ram" role="img"></canvas>
 			</div>		
 		</td>
@@ -289,7 +289,7 @@
 					<td class="third-collumn-wi">
 						{% for group in users_groups %}
 							{% if USER.0|string() == group.0|string() %}
-								{{ group.1 }}{{ "," if not loop.last }}
+								{{ group.1 }}
 							{% endif %}
 						{% endfor %}
 					</td>

inc/awesome.css

@@ -201,12 +201,15 @@
 	content: "\f067";
 	width:3px;
 }
-.new-version-exists::after {
+.new-version-exists::before {
 	display: none;
 	font-family: "Font Awesome 5 Solid";
 	content: "\f093";
 	padding-left: 5px;
 }
+.new-version-exists .fa-upload {
+	padding-right: 5px;
+}
 .backends::before {
 	display: none;
 	font-family: "Font Awesome 5 Solid";
@@ -297,3 +300,11 @@
 	margin-top: 5px;
 	padding-left: 2px;
 }
+.note-symbol::after {
+	display: none;
+	font-family: "Font Awesome 5 Solid";
+	content: "\f059";
+}
+.note-symbol .question-circle {
+	padding-left: 5px;
+}

inc/metrics.js

@@ -20,12 +20,6 @@ function getChartData(server) {
         }
     });
 }
-function removeData() {
-    for (i = 0; i < charts.length; i++) {
-        chart = charts[i];
-        chart.destroy();
-    }
-}
 var charts = []
 function renderChart(data, labels, server) {
     var ctx = document.getElementById(server)
@@ -232,6 +226,7 @@ function renderChartHapWiRam(data) {
             ]
         },
         options: {
+            animation: false,
 			maintainAspectRatio: false,
 			title: {
 				display: true,
@@ -288,13 +283,14 @@ function renderChartHapWiCpu(data) {
 						'#ffcd56',
 						'#4bc0c0',
 						'#5d9ceb',
-						'#4bc0c0',
+						'#2c6969',
 						
 					]
                 }
             ]
         },
         options: {
+            animation: false,
 			maintainAspectRatio: false,
 			title: {
 				display: true,
@@ -332,3 +328,36 @@ $( function() {
         loadMetrics();
     });
 });
+function removeData() {
+    for (i = 0; i < charts.length; i++) {
+        chart = charts[i];
+        chart.destroy();
+    }
+}
+function showOverviewHapWI() {
+	getChartDataHapWiCpu('1');
+	getChartDataHapWiRam('1');
+	NProgress.configure({showSpinner: false});
+}
+function removeCpuRamCharts() {
+    var ctxCpu = document.getElementById("cpu")
+    var ctxRam = document.getElementById("ram")
+    ctxCpu.remove();
+    ctxRam.remove();
+    $('#cpu_div').html('<canvas id="cpu" role="img"></canvas>');
+    $('#ram_div').html('<canvas id="ram" role="img"></canvas>');
+}
+function updatingCpuRamCharts() {
+	if (cur_url[0] == 'overview.py') {
+		removeCpuRamCharts();
+		showOverviewHapWI();
+	} else if (cur_url[0] == 'hapservers.py' && cur_url[1].split('=')[0] == 'service') {
+		removeCpuRamCharts();
+		NProgress.configure({showSpinner: false});
+		getChartDataHapWiCpu(server_ip);
+		getChartDataHapWiRam(server_ip);
+		removeData();
+		getChartData(server_ip);
+		getWafChartData(server_ip);
+	}
+}

inc/overview.js

@@ -1,9 +1,5 @@
 var cur_url = window.location.href.split('/').pop();
 cur_url = cur_url.split('?');
-function showOverviewHapWI() {
-	getChartDataHapWiCpu('1')
-	getChartDataHapWiRam('1')
-}
 function showHapservers(serv, hostnamea, service) {
 	var i;
 	for (i = 0; i < serv.length; i++) { 
@@ -62,7 +58,6 @@ function showOverview(serv, hostnamea) {
 	for (i = 0; i < serv.length; i++) { 
 		showOverviewCallBack(serv[i], hostnamea[i])
 	}
-	$.getScript('/inc/overview.js');
 }
 function showOverviewCallBack(serv, hostnamea) {	
 	$.ajax( {
@@ -198,45 +193,55 @@ function ajaxActionWafServers(action, id) {
 	} );
 }
 $( function() {
+	ChartsIntervalId = setInterval(updatingCpuRamCharts, 30000);
+	$(window).focus(function(){
+  		ChartsIntervalId = setInterval(updatingCpuRamCharts, 30000);
+	});
+	$(window).blur(function(){
+	  	clearInterval(ChartsIntervalId);
+	});
 	$( "#show-all-users" ).click( function() {
 		$( ".show-users" ).show("fast");
 		$( "#show-all-users" ).text("Hide");
 		$( "#show-all-users" ).attr("title", "Hide all users"); 
 		$( "#show-all-users" ).attr("id", "hide-all-users"); 
-		$.getScript('/inc/overview.js');			
+
-	});
+		$("#hide-all-users").click(function() {
-	$( "#hide-all-users" ).click( function() {
+			$( ".show-users" ).hide("fast");
-		$( ".show-users" ).hide("fast");
+			$( "#hide-all-users" ).attr("title", "Show all users");
-		$( "#hide-all-users" ).attr("title", "Show all users");
+			$( "#hide-all-users" ).text("Show all");
-		$( "#hide-all-users" ).text("Show all");
+			$( "#hide-all-users" ).attr("id", "show-all-users");
-		$( "#hide-all-users" ).attr("id", "show-all-users");
+		});
 	});
+
 	$( "#show-all-groups" ).click( function() {
 		$( ".show-groups" ).show("fast");
 		$( "#show-all-groups" ).text("Hide");
 		$( "#show-all-groups" ).attr("title", "Hide all groups"); 
 		$( "#show-all-groups" ).attr("id", "hide-all-groups");
-		$.getScript('/inc/overview.js');			
+
-	});
+		$( "#hide-all-groups" ).click( function() {
-	$( "#hide-all-groups" ).click( function() {
+			$( ".show-groups" ).hide("fast");
-		$( ".show-groups" ).hide("fast");
+			$( "#hide-all-groups" ).attr("title", "Show all groups");
-		$( "#hide-all-groups" ).attr("title", "Show all groups");
+			$( "#hide-all-groups" ).text("Show all");
-		$( "#hide-all-groups" ).text("Show all");
+			$( "#hide-all-groups" ).attr("id", "show-all-groups");
-		$( "#hide-all-groups" ).attr("id", "show-all-groups");
+		});
 	});
+
 	$( "#show-all-haproxy-wi-log" ).click( function() {
 		$( ".show-haproxy-wi-log" ).show("fast");
 		$( "#show-all-haproxy-wi-log" ).text("Show less log");
 		$( "#show-all-haproxy-wi-log" ).attr("title", "Show less log");
 		$( "#show-all-haproxy-wi-log" ).attr("id", "hide-all-haproxy-wi-log");
-		$.getScript('/inc/overview.js');			
+
-	});
+		$( "#hide-all-haproxy-wi-log" ).click( function() {
-	$( "#hide-all-haproxy-wi-log" ).click( function() {
+			$( ".show-haproxy-wi-log" ).hide("fast");
-		$( ".show-haproxy-wi-log" ).hide("fast");
+			$( "#hide-all-haproxy-wi-log" ).attr("title", "Show more log");
-		$( "#hide-all-haproxy-wi-log" ).attr("title", "Show more log");
+			$( "#hide-all-haproxy-wi-log" ).text("Show more log");
-		$( "#hide-all-haproxy-wi-log" ).text("Show more log");
+			$( "#hide-all-haproxy-wi-log" ).attr("id", "show-all-haproxy-wi-log");
-		$( "#hide-all-haproxy-wi-log" ).attr("id", "show-all-haproxy-wi-log");
+		});
 	});
+
 	if (cur_url[0] == "overview.py" || cur_url[0] == "waf.py" || cur_url[0] == "metrics.py") {
 		$('#secIntervals').css('display', 'none');
 	}

inc/runtimeapi.js

@@ -450,7 +450,7 @@ function getSessionInfo(sess_id) {
 				$( "#get-session-info" ).dialog({
 					resizable: false,
 					height: "auto",
-					width: 760,
+					width: 790,
 					modal: true,
 					title: "View session",
 					buttons: {