nextcloud · schiessle · Aug 9, 2016 · Aug 8, 2016
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,4 @@
-#hello {
-	color: red;
+.barchart {
+	max-width: 700px;
+	max-height: 350px;
 }
diff --git a/js/script.js b/js/script.js
@@ -24,19 +24,22 @@
 		memoryUsageLine,
 		cpuLoadChart,
 		cpuLoadLine,
-		storagesCgart,
+		activeusersChart,
 		sharesChart;
 
 	$(document).ready(function () {
 
 		var updateTimer = setInterval(updateInfo, 1000);
 
+		resizeSystemCharts();
+
 		function updateInfo() {
 			var url = OC.generateUrl('/apps/serverinfo/update');
 
 			$.get(url).success(function (response) {
 				updateCPUStatistics(response.system.cpuload);
 				updateMemoryStatistics(response.system.mem_total, response.system.mem_free);
+				updateActiveUsersStatistics(response.activeUsers);
 				updateStoragesStatistics(response.storage)
 				updateShareStatistics(response.shares);
 				updatePHPStatistics(response.php);
@@ -45,36 +48,56 @@
 		}
 	});
 
+	$(window).resize(function () {
+		resizeSystemCharts();
+	});
+
 	function updateCPUStatistics (cpuload) {
 
 		var cpu1 = cpuload[0],
 			cpu2 = cpuload[1],
 			cpu3 = cpuload[2];
 
 		if (typeof cpuLoadChart === 'undefined') {
-			cpuLoadChart = new SmoothieChart();
+			cpuLoadChart = new SmoothieChart(
+			{
+				millisPerPixel:250,
+				minValue:0,
+				grid:{fillStyle:'rgba(0,0,0,0.03)',strokeStyle:'transparent'},
+				labels:{fillStyle:'rgba(0,0,0,0.4)', fontSize:12}
+			});
 			cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
 			cpuLoadLine = new TimeSeries();
-			cpuLoadChart.addTimeSeries(cpuLoadLine, {lineWidth:3,strokeStyle:'#00ff00'});
+			cpuLoadChart.addTimeSeries(cpuLoadLine, {lineWidth:1, strokeStyle:'rgb(0, 0, 255)', fillStyle:'rgba(0, 0, 255, 0.2)'});
 		}
 
+		$('#cpuFooterInfo').text("Load average: "+cpu1+" (Last minute)");
 		cpuLoadLine.append(new Date().getTime(), cpu1);
 	}
 
 	function updateMemoryStatistics (memTotal, memFree) {
 
 		var memTotalBytes = memTotal * 1024,
-			memUsageBytes = (memTotal - memFree) * 1024;
+			memUsageBytes = (memTotal - memFree) * 1024,
+			memTotalGB = memTotal / (1024 * 1024),
+			memUsageGB = (memTotal - memFree) / (1024 * 1024);
 
 		if (typeof memoryUsageChart === 'undefined') {
-			memoryUsageChart = new SmoothieChart({labels:{disabled:true},maxValue:memTotalBytes,minValue:0});
+			memoryUsageChart = new SmoothieChart(
+			{
+				millisPerPixel:250, 
+				maxValue:memTotalGB, 
+				minValue:0, 
+				grid:{fillStyle:'rgba(0,0,0,0.03)',strokeStyle:'transparent'},
+				labels:{fillStyle:'rgba(0,0,0,0.4)', fontSize:12}
+			});
 			memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
 			memoryUsageLine = new TimeSeries();
-			memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:3,strokeStyle:'#00ff00'});
+			memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:1, strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.2)'});
 		}
 
-		$('#memFooterInfo').text("Total: "+bytesToSize(memTotalBytes)+" - Used: "+bytesToSize(memUsageBytes));
-		memoryUsageLine.append(new Date().getTime(), memUsageBytes);
+		$('#memFooterInfo').text("Total: "+bytesToSize(memTotalBytes)+" - Current usage: "+bytesToSize(memUsageBytes));
+		memoryUsageLine.append(new Date().getTime(), memUsageGB);
 	}
 
 	/**
@@ -93,101 +116,144 @@
 	function updateStoragesStatistics (storages) {
 
 		var users_storages 	= storages.num_users,
-			files_storages 	= storages.num_files,
-			local_storages 	= storages.num_storages_local,
-			home_storages 	= storages.num_storages_home,
-			other_storages	= storages.num_storages_other;
+			files_storages 	= storages.num_files;
 
 		$('#numUsersStorage').text(' ' + users_storages);
 		$('#numFilesStorage').text(' ' + files_storages);
+	}
+
+	function updateShareStatistics (shares) {
 
-		if (typeof storagesCgart === 'undefined') {
-			var ctx = document.getElementById("storagescanvas");
+		var shares_data = [shares.num_shares_user, shares.num_shares_groups, shares.num_shares_link, shares.num_fed_shares_sent, shares.num_fed_shares_received],
+			stepSize = 0; 
 
-			storagesCgart = new Chart(ctx, {
-									    type: 'doughnut',
+		if (Math.max.apply(null, shares_data) < 10) {stepSize = 1;} 
+
+		if (typeof sharesChart === 'undefined') {
+			var ctx = document.getElementById("sharecanvas");
+
+			sharesChart = new Chart(ctx, {
+									    type: 'bar',
 									    data: {
-									        labels: ["Local", "Home", "Others"],
+									        labels: ["Users", "Groups", "Links", "Federated sent", "Federated received"],
 									        datasets: [{
-									            data: [local_storages, home_storages, other_storages],
+									        	label: " ",
+									            data: shares_data,
 									            backgroundColor: [
-									                'rgba(0, 0, 255, 0.5)',
-									                'rgba(0, 255, 0, 0.5)',
-									                'rgba(255, 0, 0, 0.5)'
+									                'rgba(0, 0, 255, 0.2)',
+									                'rgba(0, 255, 0, 0.2)',
+									                'rgba(255, 0, 0, 0.2)',
+									                'rgba(0, 255, 255, 0.2)',
+									                'rgba(255, 0, 255, 0.2)'
 									            ],
 									            borderColor: [
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)'
+									                'rgba(0, 0, 255, 1)',
+									                'rgba(0, 255, 0, 1)',
+									                'rgba(255, 0, 0, 1)',
+									                'rgba(0, 255, 255, 1)',
+									                'rgba(255, 0, 255, 1)'
 									            ],
 									            borderWidth: 1
 									        }]
 									    },
 									    options: {
+									       	legend: {display:false},
+									       	scales: {
+									            yAxes: [{
+									                ticks: {
+									                	min: 0,
+									                    stepSize: stepSize
+									                }
+									            }]
+									        }
 									    }
 			});
 		}
+
+		sharesChart.update();
 	}
 
-	function updateShareStatistics (shares) {
+	function updateActiveUsersStatistics (activeUsers) {
 
-		var num_shares 					= shares.num_shares,
-			num_shares_user 			= shares.num_shares_user,
-			num_shares_groups 			= shares.num_shares_groups,
-			num_shares_link 			= shares.num_shares_link,
-			num_shares_link_no_password = shares.num_shares_link_no_password,
-			num_fed_shares_sent 		= shares.num_fed_shares_sent,
-			num_fed_shares_received 	= shares.num_fed_shares_received;
+		var activeusers_data = [activeUsers.last5minutes, activeUsers.last1hour, activeUsers.last24hours];
+			stepSize = 0;
 
-		$('#totalShares').text(' ' + num_shares); 
+		if (Math.max.apply(null, activeusers_data) < 10) {stepSize = 1;} 
 
-		if (typeof sharesChart === 'undefined') {
-			var ctx = document.getElementById("sharecanvas");
+		if (typeof activeusersChart === 'undefined') {
+			var ctx = document.getElementById("activeuserscanvas");
 
-			sharesChart = new Chart(ctx, {
-									    type: 'doughnut',
+			activeusersChart = new Chart(ctx, {
+									    type: 'line',
 									    data: {
-									        labels: ["Users", "Groups", "Links", "No-Password Links", "Federated sent", "Federated received"],
+									        labels: ["Last 5 mins", "Last 1 hour", "Last 24 hours"],
 									        datasets: [{
-									            data: [num_shares_user, num_shares_groups, num_shares_link, num_shares_link_no_password, num_fed_shares_sent, num_fed_shares_received],
-									            backgroundColor: [
-									                'rgba(0, 0, 255, 0.5)',
-									                'rgba(0, 255, 0, 0.5)',
-									                'rgba(255, 0, 0, 0.5)',
-									                'rgba(0, 255, 255, 0.5)',
-									                'rgba(255, 0, 255, 0.5)',
-									                'rgba(255, 255, 0, 0.5)'
-									            ],
-									            borderColor: [
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)',
-									                'rgba(0,0,0,0.4)'
-									            ],
-									            borderWidth: 1
+									        	label: " ",
+									            data: activeusers_data,
+									            fill: false,
+									            borderColor: ['rgba(0, 0, 255, 1)'],
+									            borderWidth: 1,
+									            borderDashOffset: 0.0,
+									            borderJoinStyle: 'miter',
+									            pointBorderColor: 'rgba(0, 0, 255, 1)',
+									            pointBackgroundColor: "#fff",
+									            pointBorderWidth: 1,
+									            pointHoverRadius: 5,
+									            pointHoverBackgroundColor: "rgba(0,0,255,0.6)",
+									            pointHoverBorderColor: "rgba(0, 0, 255, 1)",
+									            pointHoverBorderWidth: 1,
+									            pointRadius: 5,
+									            pointHitRadius: 10,
 									        }]
 									    },
 									    options: {
+									       	legend: {display:false},
+									       	scales: {
+									            yAxes: [{
+									                ticks: {
+									                	min: 0,
+									                    stepSize: stepSize
+									                }
+									            }]
+									        }
 									    }
 			});
 		}
+
+		$('#numFilesStorage').text(' hola' + activeUsers.last5minutes);
 	}
 
 	function updatePHPStatistics (php) {
 
 		$('#phpVersion').text(' ' + php.version);
-		$('#phpMemLimit').text(' ' + php.memory_limit);
+		$('#phpMemLimit').text(' ' + bytesToSize(php.memory_limit));
 		$('#phpMaxExecTime').text(' ' + php.max_execution_time);
-		$('#phpUploadMaxSize').text(' ' + php.upload_max_filesize);
+		$('#phpUploadMaxSize').text(' ' + bytesToSize(php.upload_max_filesize));
 	}
 
 	function updateDatabaseStatistics (database) {
 
 		$('#databaseType').text(' ' + database.type);
 		$('#databaseVersion').text(' ' + database.version);
-		$('#dataBaseSize').text(' ' + database.size);
+		$('#dataBaseSize').text(' ' + bytesToSize(database.size));
+	}
+
+	function resizeSystemCharts () {
+
+		var cpu_canvas = document.getElementById("cpuloadcanvas"),
+			mem_canvas = document.getElementById("memorycanvas");
+
+		var newWidth = $('#cpuSection').width();
+			newHeight = newWidth / 4
+
+		if (newWidth <= 100) newWidth = 100;
+		if (newHeight > 150) newHeight = 150;
+
+		cpuloadcanvas.width = newWidth;
+		cpuloadcanvas.height = newHeight;
+
+		mem_canvas.width = newWidth;
+		mem_canvas.height = newHeight;
 	}
 
 })(jQuery, OC);
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
@@ -28,6 +28,7 @@
 use OCP\AppFramework\Controller;
 use OCA\ServerInfo\DatabaseStatistics;
 use OCA\ServerInfo\PhpStatistics;
+use OCA\ServerInfo\SessionStatistics;
 use OCA\ServerInfo\ShareStatistics;
 use OCA\ServerInfo\StorageStatistics;
 use OCA\ServerInfo\SystemStatistics;
@@ -49,6 +50,9 @@ class PageController extends Controller {
 	/** @var ShareStatistics */
 	private $shareStatistics;
 
+	/** @var SessionStatistics */
+	private $sessionStatistics;
+
 	/**
 	 * ApiController constructor.
 	 *
@@ -59,14 +63,16 @@ class PageController extends Controller {
 	 * @param PhpStatistics $phpStatistics
 	 * @param DatabaseStatistics $databaseStatistics
 	 * @param ShareStatistics $shareStatistics
+	 * @param SessionStatistics $sessionStatistics
 	 */
 	public function __construct($appName,
 								IRequest $request,
 								SystemStatistics $systemStatistics,
 								StorageStatistics $storageStatistics,
 								PhpStatistics $phpStatistics,
 								DatabaseStatistics $databaseStatistics,
-								ShareStatistics $shareStatistics
+								ShareStatistics $shareStatistics,
+								SessionStatistics $sessionStatistics
 	) {
 		parent::__construct($appName, $request);
 
@@ -75,6 +81,7 @@ public function __construct($appName,
 		$this->phpStatistics = $phpStatistics;
 		$this->databaseStatistics = $databaseStatistics;
 		$this->shareStatistics = $shareStatistics;
+		$this->sessionStatistics = $sessionStatistics;
 	}
 
 	/**
@@ -100,7 +107,8 @@ public function update() {
 			'storage' => $this->storageStatistics->getStorageStatistics(),
 			'shares' => $this->shareStatistics->getShareStatistics(),
 			'php' => $this->phpStatistics->getPhpStatistics(),
-			'database' => $this->databaseStatistics->getDatabaseStatistics()
+			'database' => $this->databaseStatistics->getDatabaseStatistics(),
+			'activeUsers' => $this->sessionStatistics->getSessionStatistics()
 		];
 
 		return new JSONResponse($data);

diff --git a/templates/part.content.php b/templates/part.content.php
@@ -1,28 +1,27 @@
-<div class="section" id="systemSection">
-	<h2><?php p($l->t('System'));?></h2>
-	<p><?php p($l->t('CPU'));?></p>
-	<canvas id="cpuloadcanvas" width="400" height="100"></canvas>
-	<p><em><?php p($l->t('CPU load average (Last minute)')); ?></em></p>
-	<br>
-	<p><?php p($l->t('Memory'));?></p>
-	<canvas id="memorycanvas" width="400" height="100"></canvas>
+<div class="section" id="cpuSection">
+	<h2><?php p($l->t('CPU load'));?></h2>
+	<canvas id="cpuloadcanvas" width="600" height="150"></canvas>
+	<p><em id="cpuFooterInfo"></em></p>
+</div>
+<div class="section" id="memorySection">
+	<h2><?php p($l->t('Memory usage'));?></h2>
+	<canvas id="memorycanvas" width="600" height="150"></canvas>
 	<p><em id="memFooterInfo"></em></p>
 </div>
+<div class="section" id="activeUsersSection">
+	<h2><?php p($l->t('Active users'));?></h2>
+	<br>
+	<canvas class="barchart" id="activeuserscanvas"></canvas>
+</div>
+<div class="section" id="sharesSection">
+	<h2><?php p($l->t('Shares'));?></h2>
+	<br>
+	<canvas class="barchart" id="sharecanvas"></canvas>
+</div>
 <div class="section" id="storageSection">
 	<h2><?php p($l->t('Storage'));?></h2>
 	<p><?php p($l->t('Users:'));?><em id="numUsersStorage"> -- </em></p>
 	<p><?php p($l->t('Files:'));?><em id="numFilesStorage"> -- </em></p>
-	<p><?php p($l->t('Storages:'));?></p>
-	<div id="container" style="width:280px; height:250px;">
-		<canvas id="storagescanvas" width="280" height="250"></canvas>
-	</div>
-</div>
-<div class="section" id="shareSection">
-	<h2><?php p($l->t('Shares'));?></h2>
-	<p><?php p($l->t('Total:'));?><em id="totalShares"> -- </em></p>
-	<div id="container" style="width:350px; height:350px;">
-		<canvas id="sharecanvas" width="350" height="350"></canvas>
-	</div>
 </div>
 <div class="section" id="phpSection">
 	<h2><?php p($l->t('PHP'));?></h2>