v5.0.0.0

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

app/templates/ajax/overviewServers.html

@@ -1,12 +1,12 @@
 {%- for service in service_status -%}
-<div class="server-info" style="height: 100%;">
+<div class="server-info">
 	{% if service_page == 'nginx' %}
 	<div class="server-name" style="padding-bottom: 0px;">
 	{% else %}
 	<div class="server-name">
 	{% endif %}
 		Server status
-		<span class="update-icon">
+		<span class="update-icon" style="margin-right: 10px">
 			<a onclick="showOverviewServer('{{ service.0 }}', '{{ service.1 }}', '{{id}}', '{{service_page}}')" title="Refresh">
 				<span class="service-reload"></span>
 			</a>
@@ -20,7 +20,7 @@
 	{% if service_page == 'nginx' %}
 		<div class="top-info" style="margin-top: 5px; width: 100%;">
 	{% else %}
-		<div class="top-info" style="width: 550px;">
+		<div class="top-info" style="width: 640px;">
 	{% endif %}
 			<div id="cpu_div" style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
 				<canvas id="cpu" role="img"></canvas>

app/templates/ovw.html

@@ -69,7 +69,7 @@
 		</td>
 	</tr>		
 	<tr>
-		<td style="width:100%" colspan="2">					
+		<td style="width:100%" colspan="3">
 			<div id="cpu_div" style="height: 140px;width: 50%;float: left; margin:0; padding:0;">
 				<canvas id="cpu" role="img"></canvas>
 			</div>

inc/metrics.js

@@ -29,18 +29,24 @@ function renderChart(data, labels, server) {
             labels: labels.split(','),
             datasets: [
                 {
+                    parsing: false,
+                    normalized: true,
                     label: 'Connections',
                     data: data[0].split(','),
                     borderColor: 'rgba(75, 192, 192, 1)',
                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
                 },
                 {
+                    parsing: false,
+                    normalized: true,
                     label: 'SSL Connections',
                     data: data[1].split(','),
                     borderColor: 'rgba(54, 162, 235, 1)',
                     backgroundColor: 'rgba(54, 162, 235, 0.2)',
                 },
-				 {
+                {
+				    parsing: false,
+                    normalized: true,
                     label: 'Session rate',
                     data: data[2].split(','),
                     borderColor: 'rgba(255, 206, 86, 1)',
@@ -117,6 +123,8 @@ function renderWafChart(data, labels, server) {
             labels: labels.split(','),
             datasets: [
                 {
+                    parsing: false,
+                    normalized: true,
                     label: 'Connections',
                     data: data[0].split(','),
                     borderColor: 'rgba(75, 192, 192, 1)',
@@ -208,11 +216,13 @@ function getChartDataHapWiRam(ip) {
 function renderChartHapWiRam(data) {
     var ctx = 'ram'
     var myChart = new Chart(ctx, {
-        type: 'pie',
+        type: 'horizontalBar',
         data: {
             labels: ['used','free','shared','buff/cache','avaliable'],
             datasets: [
                 {
+                    parsing: false,
+                    normalized: true,
                     data: data[0].split(' '),
                     backgroundColor: [						
 						'#ff6384',
@@ -235,7 +245,7 @@ function renderChartHapWiRam(data) {
 				padding: 0,
 			},
 			legend: {
-				display: true,
+				display: false,
 				align: 'start',
 				position: 'left',
 				labels: {
@@ -270,11 +280,13 @@ function getChartDataHapWiCpu(ip) {
 function renderChartHapWiCpu(data) {
     var ctx = 'cpu'
     var myChart = new Chart(ctx, {
-        type: 'pie',
+        type: 'horizontalBar',
         data: {
             labels: ['user','sys','nice','idle','wait','hi','si','steal'],
             datasets: [
                 {
+                    parsing: false,
+                    normalized: true,
                     data: data[0].split(' '),
                     backgroundColor: [						
 						'#ff6384',
@@ -299,7 +311,7 @@ function renderChartHapWiCpu(data) {
 				padding: 0,
 			},
 			legend: {
-				display: true,
+				display: false,
 				position: 'left',
 				align: 'end',
 				labels: {

inc/script.js

@@ -238,7 +238,6 @@ function setRefreshInterval(interval) {
 			$('.auto-refresh').css('display', 'inline');
 			$('.auto-refresh').css('font-size', '15px');
 			$('#1').text('Auto-refresh');
-			//$('#0').text('Auto-refresh');
 			$('.auto-refresh-pause').css('display', 'none');
 			$('.auto-refresh-resume').css('display', 'none');
 			$.getScript("/inc/fontawesome.min.js")

inc/style.css

@@ -781,6 +781,7 @@ label {
     font-size: 1.4em;
     color: #5d9ceb;
     border-bottom: 1px solid #A4C7F5;
+	width: 99%;
 }
 .server-status {
 	border-radius: 50% 50%;
@@ -817,18 +818,22 @@ label {
 }
 .ajax-server {
 	margin: 25px 25px 0 757px;
-	width: 778px;
+	width: 794px;
 	display: none;
 	height: 185px;
-	padding: 10px 15px 0;
+	padding: 10px 0 0 15px;
 }
 .haproxy-info {
 	display: inline-block;
-	width: 160px;
+	width: 150px;
 	padding-top: 5px;
 	font-size: 11.5px;
 	float: left;
 }
+.server-info {
+	height: 100%;
+	width: 790px;
+}
 .top-info {
 	display: inline-block;
 	width: 350px;