reseted fork to upstream/master and applied patch gracefully provided by kesselb

Signed-off-by: Kevin Pfeifer <kevin.pfeifer@sunlime.at>

1 files changed, 163 insertions, 134 deletions

diff --git a/js/script.js b/js/script.js
index 6aad672..2cd4620 100644
--- a/js/script.js
+++ b/js/script.js
@@ -29,15 +29,15 @@
 		sharesChart;
 
 	$(document).ready(function () {
-		var x = document.getElementById('rambox');
-		x.style.backgroundColor = OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)'; 
+		var rambox = document.getElementById('rambox');
+		rambox.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)';
 
-		var x = document.getElementById('swapbox');
-		x.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
+		var swapbox = document.getElementById('swapbox');
+		swapbox.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
 
-		resizeSystemCharts();
-		updateActiveUsersStatistics();
-		updateShareStatistics();
+		var updateTimer = setInterval(updateInfo, 300);
+
+		initDiskCharts();
 
 		setHumanReadableSizeToElement("databaseSize");
 		setHumanReadableSizeToElement("phpMemLimit");
@@ -46,7 +46,7 @@
 
 		$('#ocsEndPoint span.icon-info').tooltip({placement: 'top'});
 		initMonitoringLinkToClipboard();
-		$("#monitoring-endpoint-url").on('click', function() {
+		$("#monitoring-endpoint-url").on('click', function () {
 			$(this).select();
 		});
 
@@ -64,18 +64,53 @@
 		setTimeout(updateInfo, 0)
 	});
 
+	$(window).load(function(){
+		resizeSystemCharts();
+	});
+
 	$(window).resize(function () {
 		resizeSystemCharts();
 	});
 
-	function updateCPUStatistics (cpuload) {
+	/**
+	 * Reset all canvas widths on window resize so canvas is responsive
+	 */
+	function resizeSystemCharts() {
+		var cpu_canvas = $("#cpuloadcanvas"),
+			cpu_canvas_width = cpu_canvas.parents('.infobox').width() - 30,
+			mem_canvas = $("#memorycanvas"),
+			mem_canvas_width = mem_canvas.parents('.infobox').width() - 30,
+			active_users_canvas = $("#activeuserscanvas"),
+			active_users_canvas_width = active_users_canvas.parents('.infobox').width() - 30,
+			share_canvas = $("#sharecanvas"),
+			share_canvas_width = share_canvas.parents('.infobox').width() - 30,
+			current_vw = $(window).width();
+
+		// We have to set css width AND attribute width
+		cpu_canvas.width(cpu_canvas_width);
+		cpu_canvas.attr('width', cpu_canvas_width);
+		mem_canvas.width(mem_canvas_width);
+		mem_canvas.attr('width', mem_canvas_width);
+		active_users_canvas.width(active_users_canvas_width);
+		active_users_canvas.attr('width', active_users_canvas_width);
+		share_canvas.width(share_canvas_width);
+		share_canvas.attr('width', share_canvas_width);
+
+		updateShareStatistics();
+		updateActiveUsersStatistics();
+	}
+
+	function updateCPUStatistics(cpuload) {
+		var $cpu_footer_info = $('#cpuFooterInfo');
+		var $cpu_load_canvas = $('#cpuloadcanvas');
+
 		if (cpuload === 'N/A') {
-			$('#cpuFooterInfo').text(t('serverinfo', 'CPU info not available'));
-			$('#cpuloadcanvas').addClass('hidden');
+			$cpu_footer_info.text(t('serverinfo', 'CPU info not available'));
+			$cpu_load_canvas.addClass('hidden');
 			return;
 
-		} else if ($("#cpuloadcanvas").hasClass('hidden')) {
-			$("#cpuloadcanvas").removeClass('hidden');
+		} else if ($cpu_load_canvas.hasClass('hidden')) {
+			$cpu_load_canvas.removeClass('hidden');
 		}
 
 		var cpu1 = cpuload[0],
@@ -84,29 +119,37 @@
 
 		if (typeof cpuLoadChart === 'undefined') {
 			cpuLoadChart = new SmoothieChart(
-			{
-				millisPerPixel: 100,
-				minValue: 0,
-				grid: { fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent' },
-				labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 }
-			});
+				{
+					millisPerPixel: 100,
+					minValue: 0,
+					grid: {fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent'},
+					labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
+					responsive: true
+				});
 			cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
 			cpuLoadLine = new TimeSeries();
-			cpuLoadChart.addTimeSeries(cpuLoadLine, { lineWidth: 1, strokeStyle: 'rgb(180, 180, 180)', fillStyle: OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)' });
+			cpuLoadChart.addTimeSeries(cpuLoadLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(180, 180, 180)',
+				fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'
+			});
 		}
 
-		$('#cpuFooterInfo').text(t('serverinfo', 'Load average')+": "+cpu1+" ("+t('serverinfo', 'Last minute')+")");
+		$cpu_footer_info.text(t('serverinfo', 'Load average') + ": " + cpu1 + " (" + t('serverinfo', 'Last minute') + ")");
 		cpuLoadLine.append(new Date().getTime(), cpu1);
 	}
 
-	function updateMemoryStatistics (memTotal, memFree, swapTotal, swapFree) {
+	function updateMemoryStatistics(memTotal, memFree, swapTotal, swapFree) {
+		var $mem_footer_info = $('#memFooterInfo');
+		var $memory_canvas = $('#memorycanvas');
+
 		if (memTotal === 'N/A' || memFree === 'N/A') {
-			$('#memFooterInfo').text(t('serverinfo', 'Memory info not available'));
-			$('#memorycanvas').addClass('hidden');
+			$mem_footer_info.text(t('serverinfo', 'Memory info not available'));
+			$memory_canvas.addClass('hidden');
 			return;
 
-		} else if ($("#memorycanvas").hasClass('hidden')) {
-			$("#memorycanvas").removeClass('hidden');
+		} else if ($memory_canvas.hasClass('hidden')) {
+			$memory_canvas.removeClass('hidden');
 		}
 
 		var memTotalBytes = memTotal * 1024,
@@ -119,38 +162,55 @@
 			swapTotalGB = swapTotal / (1024 * 1024),
 			swapUsageGB = (swapTotal - swapFree) / (1024 * 1024);
 
+		var maxValueOfChart = swapTotalGB;
 		if (memTotalGB > swapTotalGB) {
-			var maxValueOfChart = memTotalGB;
-		} else {
-			var maxValueOfChart = swapTotalGB;
+			maxValueOfChart = memTotalGB;
 		}
 
 		if (typeof memoryUsageChart === 'undefined') {
 			memoryUsageChart = new SmoothieChart(
-			{
-				millisPerPixel: 100,
-				maxValue: maxValueOfChart,
-				minValue: 0,
-				grid: { fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent' },
-				labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 }
-			});
+				{
+					millisPerPixel: 100,
+					maxValue: maxValueOfChart,
+					minValue: 0,
+					grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
+					labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
+					responsive: true
+				});
 			memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
 			memoryUsageLine = new TimeSeries();
-			memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:1, strokeStyle:'rgb(180, 180, 180)', fillStyle:OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)'});
+			memoryUsageChart.addTimeSeries(memoryUsageLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(180, 180, 180)',
+				fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'
+			});
 			swapUsageLine = new TimeSeries();
-			memoryUsageChart.addTimeSeries(swapUsageLine, {lineWidth:1, strokeStyle:'rgb(100, 100, 100)', fillStyle:'rgba(100, 100, 100, 0.2)'});
+			memoryUsageChart.addTimeSeries(swapUsageLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(100, 100, 100)',
+				fillStyle: 'rgba(100, 100, 100, 0.2)'
+			});
 		}
 
-		$('#memFooterInfo').text("RAM: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(memTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(memUsageBytes));
+		$mem_footer_info
+			.text("RAM: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(memTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(memUsageBytes));
 		memoryUsageLine.append(new Date().getTime(), memUsageGB);
-		$('#swapFooterInfo').text("SWAP: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(swapTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(swapUsageBytes));
+		$('#swapFooterInfo')
+			.text("SWAP: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(swapTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(swapUsageBytes));
 		swapUsageLine.append(new Date().getTime(), swapUsageGB);
 	}
 
 	function updateShareStatistics () {
 
 		var shares = $('#sharecanvas').data('shares'),
-			shares_data = [shares.num_shares_user, shares.num_shares_groups, shares.num_shares_link, shares.num_shares_mail, shares.num_fed_shares_sent, shares.num_fed_shares_received, shares.num_shares_room],
+			shares_data = [shares.num_shares_user,
+				shares.num_shares_groups,
+				shares.num_shares_link,
+				shares.num_shares_mail,
+				shares.num_fed_shares_sent,
+				shares.num_fed_shares_received,
+				shares.num_shares_room
+			],
 			stepSize = 0;
 
 		if (Math.max.apply(null, shares_data) < 10) {
@@ -197,7 +257,7 @@
 					}]
 				},
 				options: {
-					legend: { display:false },
+					legend: {display: false},
 					scales: {
 						yAxes: [{
 							ticks: {
@@ -213,7 +273,7 @@
 		sharesChart.update();
 	}
 
-	function updateActiveUsersStatistics () {
+	function updateActiveUsersStatistics() {
 
 		var activeUsers = $('#activeuserscanvas').data('users'),
 			activeUsers_data = [activeUsers.last24hours, activeUsers.last1hour, activeUsers.last5minutes],
@@ -238,7 +298,7 @@
 						label: " ",
 						data: activeUsers_data,
 						fill: false,
-						borderColor: [ 'rgba(0, 0, 255, 1)' ],
+						borderColor: ['rgba(0, 0, 255, 1)'],
 						borderWidth: 1,
 						borderDashOffset: 0.0,
 						borderJoinStyle: 'miter',
@@ -277,35 +337,6 @@
 		}
 	}
 
-	function resizeSystemCharts () {
-
-		var cpu_canvas = document.getElementById("cpuloadcanvas"),
-			mem_canvas = document.getElementById("memorycanvas");
-			activeuserscanvas = document.getElementById("activeuserscanvas");
-			sharecanvas = document.getElementById("sharecanvas");
-
-		var newWidth = $('#cpuSection').width();
-			newHeight = newWidth / 4
-
-		if (newWidth <= 100) newWidth = 100;
-		if (newWidth >= 500) newWidth = 500;
-		if (newHeight > 150) newHeight = 150;
-
-
-		cpuloadcanvas.width = newWidth;
-		cpuloadcanvas.height = newHeight;
-
-		mem_canvas.width = newWidth;
-		mem_canvas.height = newHeight;
-
-		activeuserscanvas.width = 600;
-		activeuserscanvas.height = 500;
-
-		sharecanvas.width = 800;
-
-
-	}
-
 	function initMonitoringLinkToClipboard() {
 		var monAPIBox = $("#ocsEndPoint");
 		/* reused from settings/js/authtoken_view.js */
@@ -350,72 +381,70 @@
 		});
 	}
 
-})(jQuery, OC);
-
-
-$(document).ready(function(){
-	$.ajax({
-		url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json',
-		method: "GET",
-		success: function(response) {
-			var diskdata = response.ocs.data;
-			var x = document.querySelectorAll(".DiskChart");
-			var i;
-			for (i = 0; i < x.length; i++) {
-				var chartdata = {
-					labels: ["Used GB", "Available GB"],
-					datasets : [
-						{
-							backgroundColor: [
-								OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)',
-								'rgb(249, 249, 249)',
-							],
-							borderWidth: 0,
-							data: diskdata[i]
-						}
-					]
-				};
-				var ctx = x[i];
-				var barGraph = new Chart(ctx, {
-					type: 'doughnut',
-					data: chartdata,
-					options: {
-						legend: {
-							display: false,
-						},
-						tooltips: {
-							enabled: true,
-						},
-						cutoutPercentage: 60
-					}
-				});
-			}
-		},
-		error: function(data) {
-			console.log(data);
-		}
-	});
-
-	var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
-	function doAjax() {
+	function initDiskCharts() {
 		$.ajax({
-			url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json',
+			url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json',
 			method: "GET",
-			success: function(response) {
-				var data = response.ocs.data;
-				document.getElementById("servertime").innerHTML = data.servertime;
-				document.getElementById("uptime").innerHTML = data.uptime;
-				document.getElementById("timeservers").innerHTML = data.timeservers;
+			success: function (response) {
+				var diskdata = response.ocs.data;
+				var diskcharts = document.querySelectorAll(".DiskChart");
+				var i;
+				for (i = 0; i < diskcharts.length; i++) {
+					var chartdata = {
+						labels: ["Used GB", "Available GB"],
+						datasets: [
+							{
+								backgroundColor: [
+									OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)',
+									'rgb(200, 200, 200)',
+								],
+								borderWidth: 0,
+								data: diskdata[i]
+							}
+						]
+					};
+					var ctx = diskcharts[i];
+					var barGraph = new Chart(ctx, {
+						type: 'doughnut',
+						data: chartdata,
+						options: {
+							legend: {
+								display: false,
+							},
+							tooltips: {
+								enabled: true,
+							},
+							cutoutPercentage: 60,
+						}
+					});
+				}
 			},
-			error: function(data) {
+			error: function (data) {
 				console.log(data);
-			},
-			complete: function (data) {
-				setTimeout(doAjax, interval);
 			}
 		});
-	}
-	setTimeout(doAjax, interval);
 
+		var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
+		function doAjax() {
+			$.ajax({
+				url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json',
+				method: "GET",
+				success: function (response) {
+					var data = response.ocs.data;
+					document.getElementById("servertime").innerHTML = data.servertime;
+					document.getElementById("uptime").innerHTML = data.uptime;
+					document.getElementById("timeservers").innerHTML = data.timeservers;
+				},
+				error: function (data) {
+					console.log(data);
+				},
+				complete: function (data) {
+					setTimeout(doAjax, interval);
+				}
+			});
+		}
+
+		setTimeout(doAjax, interval);
+	}
 
-});
+})(jQuery, OC);