diff --git a/css/style.css b/css/style.css index eca406f6..1c3e8357 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,4 @@ -#hello { - color: red; +.barchart { + max-width: 700px; + max-height: 350px; } \ No newline at end of file diff --git a/js/script.js b/js/script.js index 47646f10..2218460f 100644 --- 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,6 +48,10 @@ } }); + $(window).resize(function () { + resizeSystemCharts(); + }); + function updateCPUStatistics (cpuload) { var cpu1 = cpuload[0], @@ -52,29 +59,45 @@ 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 index ff396e7f..d4a7d826 100644 --- 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,6 +63,7 @@ class PageController extends Controller { * @param PhpStatistics $phpStatistics * @param DatabaseStatistics $databaseStatistics * @param ShareStatistics $shareStatistics + * @param SessionStatistics $sessionStatistics */ public function __construct($appName, IRequest $request, @@ -66,7 +71,8 @@ public function __construct($appName, 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 index 7a08234d..8d6fcfa2 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -1,28 +1,27 @@ -
-

t('System'));?>

-

t('CPU'));?>

- -

t('CPU load average (Last minute)')); ?>

-
-

t('Memory'));?>

- +
+

t('CPU load'));?>

+ +

+
+
+

t('Memory usage'));?>

+

+
+

t('Active users'));?>

+
+ +
+
+

t('Shares'));?>

+
+ +

t('Storage'));?>

t('Users:'));?> --

t('Files:'));?> --

-

t('Storages:'));?>

-
- -
-
-
-

t('Shares'));?>

-

t('Total:'));?> --

-
- -

t('PHP'));?>

diff --git a/templates/part.navigation.php b/templates/part.navigation.php index d426a96f..6b23550d 100644 --- a/templates/part.navigation.php +++ b/templates/part.navigation.php @@ -1,7 +1,9 @@ \ No newline at end of file