Skip to content

Commit 38845ed

Browse files
schiessleschiessle
authored
Merge pull request #12 from nextcloud/web-ui
web-ui2
2 parents c18c502 + eac9696 commit 38845ed

File tree

5 files changed

+163
-87
lines changed

5 files changed

+163
-87
lines changed

‎css/style.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
#hello {
2-
color: red;
1+
.barchart {
2+
max-width: 700px;
3+
max-height: 350px;
34
}

‎js/script.js‎

Lines changed: 125 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,22 @@
2424
memoryUsageLine,
2525
cpuLoadChart,
2626
cpuLoadLine,
27-
storagesCgart,
27+
activeusersChart,
2828
sharesChart;
2929

3030
$(document).ready(function () {
3131

3232
var updateTimer = setInterval(updateInfo, 1000);
3333

34+
resizeSystemCharts();
35+
3436
function updateInfo() {
3537
var url = OC.generateUrl('/apps/serverinfo/update');
3638

3739
$.get(url).success(function (response) {
3840
updateCPUStatistics(response.system.cpuload);
3941
updateMemoryStatistics(response.system.mem_total, response.system.mem_free);
42+
updateActiveUsersStatistics(response.activeUsers);
4043
updateStoragesStatistics(response.storage)
4144
updateShareStatistics(response.shares);
4245
updatePHPStatistics(response.php);
@@ -45,36 +48,56 @@
4548
}
4649
});
4750

51+
$(window).resize(function () {
52+
resizeSystemCharts();
53+
});
54+
4855
function updateCPUStatistics (cpuload) {
4956

5057
var cpu1 = cpuload[0],
5158
cpu2 = cpuload[1],
5259
cpu3 = cpuload[2];
5360

5461
if (typeof cpuLoadChart === 'undefined') {
55-
cpuLoadChart = new SmoothieChart();
62+
cpuLoadChart = new SmoothieChart(
63+
{
64+
millisPerPixel:250,
65+
minValue:0,
66+
grid:{fillStyle:'rgba(0,0,0,0.03)',strokeStyle:'transparent'},
67+
labels:{fillStyle:'rgba(0,0,0,0.4)', fontSize:12}
68+
});
5669
cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
5770
cpuLoadLine = new TimeSeries();
58-
cpuLoadChart.addTimeSeries(cpuLoadLine, {lineWidth:3,strokeStyle:'#00ff00'});
71+
cpuLoadChart.addTimeSeries(cpuLoadLine, {lineWidth:1, strokeStyle:'rgb(0, 0, 255)', fillStyle:'rgba(0, 0, 255, 0.2)'});
5972
}
6073

74+
$('#cpuFooterInfo').text("Load average: "+cpu1+" (Last minute)");
6175
cpuLoadLine.append(new Date().getTime(), cpu1);
6276
}
6377

6478
function updateMemoryStatistics (memTotal, memFree) {
6579

6680
var memTotalBytes = memTotal * 1024,
67-
memUsageBytes = (memTotal - memFree) * 1024;
81+
memUsageBytes = (memTotal - memFree) * 1024,
82+
memTotalGB = memTotal / (1024 * 1024),
83+
memUsageGB = (memTotal - memFree) / (1024 * 1024);
6884

6985
if (typeof memoryUsageChart === 'undefined') {
70-
memoryUsageChart = new SmoothieChart({labels:{disabled:true},maxValue:memTotalBytes,minValue:0});
86+
memoryUsageChart = new SmoothieChart(
87+
{
88+
millisPerPixel:250,
89+
maxValue:memTotalGB,
90+
minValue:0,
91+
grid:{fillStyle:'rgba(0,0,0,0.03)',strokeStyle:'transparent'},
92+
labels:{fillStyle:'rgba(0,0,0,0.4)', fontSize:12}
93+
});
7194
memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
7295
memoryUsageLine = new TimeSeries();
73-
memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:3,strokeStyle:'#00ff00'});
96+
memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:1, strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.2)'});
7497
}
7598

76-
$('#memFooterInfo').text("Total: "+bytesToSize(memTotalBytes)+" - Used: "+bytesToSize(memUsageBytes));
77-
memoryUsageLine.append(new Date().getTime(), memUsageBytes);
99+
$('#memFooterInfo').text("Total: "+bytesToSize(memTotalBytes)+" - Current usage: "+bytesToSize(memUsageBytes));
100+
memoryUsageLine.append(new Date().getTime(), memUsageGB);
78101
}
79102

80103
/**
@@ -93,101 +116,144 @@
93116
function updateStoragesStatistics (storages) {
94117

95118
var users_storages = storages.num_users,
96-
files_storages = storages.num_files,
97-
local_storages = storages.num_storages_local,
98-
home_storages = storages.num_storages_home,
99-
other_storages = storages.num_storages_other;
119+
files_storages = storages.num_files;
100120

101121
$('#numUsersStorage').text(' ' + users_storages);
102122
$('#numFilesStorage').text(' ' + files_storages);
123+
}
124+
125+
function updateShareStatistics (shares) {
103126

104-
if (typeof storagesCgart === 'undefined') {
105-
var ctx = document.getElementById("storagescanvas");
127+
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],
128+
stepSize = 0;
106129

107-
storagesCgart = new Chart(ctx, {
108-
type: 'doughnut',
130+
if (Math.max.apply(null, shares_data) < 10) {stepSize = 1;}
131+
132+
if (typeof sharesChart === 'undefined') {
133+
var ctx = document.getElementById("sharecanvas");
134+
135+
sharesChart = new Chart(ctx, {
136+
type: 'bar',
109137
data: {
110-
labels: ["Local", "Home", "Others"],
138+
labels: ["Users", "Groups", "Links", "Federated sent", "Federated received"],
111139
datasets: [{
112-
data: [local_storages, home_storages, other_storages],
140+
label: " ",
141+
data: shares_data,
113142
backgroundColor: [
114-
'rgba(0, 0, 255, 0.5)',
115-
'rgba(0, 255, 0, 0.5)',
116-
'rgba(255, 0, 0, 0.5)'
143+
'rgba(0, 0, 255, 0.2)',
144+
'rgba(0, 255, 0, 0.2)',
145+
'rgba(255, 0, 0, 0.2)',
146+
'rgba(0, 255, 255, 0.2)',
147+
'rgba(255, 0, 255, 0.2)'
117148
],
118149
borderColor: [
119-
'rgba(0,0,0,0.4)',
120-
'rgba(0,0,0,0.4)',
121-
'rgba(0,0,0,0.4)'
150+
'rgba(0, 0, 255, 1)',
151+
'rgba(0, 255, 0, 1)',
152+
'rgba(255, 0, 0, 1)',
153+
'rgba(0, 255, 255, 1)',
154+
'rgba(255, 0, 255, 1)'
122155
],
123156
borderWidth: 1
124157
}]
125158
},
126159
options: {
160+
legend: {display:false},
161+
scales: {
162+
yAxes: [{
163+
ticks: {
164+
min: 0,
165+
stepSize: stepSize
166+
}
167+
}]
168+
}
127169
}
128170
});
129171
}
172+
173+
sharesChart.update();
130174
}
131175

132-
function updateShareStatistics (shares) {
176+
function updateActiveUsersStatistics (activeUsers) {
133177

134-
var num_shares = shares.num_shares,
135-
num_shares_user = shares.num_shares_user,
136-
num_shares_groups = shares.num_shares_groups,
137-
num_shares_link = shares.num_shares_link,
138-
num_shares_link_no_password = shares.num_shares_link_no_password,
139-
num_fed_shares_sent = shares.num_fed_shares_sent,
140-
num_fed_shares_received = shares.num_fed_shares_received;
178+
var activeusers_data = [activeUsers.last5minutes, activeUsers.last1hour, activeUsers.last24hours];
179+
stepSize = 0;
141180

142-
$('#totalShares').text(' ' + num_shares);
181+
if (Math.max.apply(null, activeusers_data) < 10) {stepSize = 1;}
143182

144-
if (typeof sharesChart === 'undefined') {
145-
var ctx = document.getElementById("sharecanvas");
183+
if (typeof activeusersChart === 'undefined') {
184+
var ctx = document.getElementById("activeuserscanvas");
146185

147-
sharesChart = new Chart(ctx, {
148-
type: 'doughnut',
186+
activeusersChart = new Chart(ctx, {
187+
type: 'line',
149188
data: {
150-
labels: ["Users", "Groups", "Links", "No-Password Links", "Federated sent", "Federated received"],
189+
labels: ["Last 5 mins", "Last 1 hour", "Last 24 hours"],
151190
datasets: [{
152-
data: [num_shares_user, num_shares_groups, num_shares_link, num_shares_link_no_password, num_fed_shares_sent, num_fed_shares_received],
153-
backgroundColor: [
154-
'rgba(0, 0, 255, 0.5)',
155-
'rgba(0, 255, 0, 0.5)',
156-
'rgba(255, 0, 0, 0.5)',
157-
'rgba(0, 255, 255, 0.5)',
158-
'rgba(255, 0, 255, 0.5)',
159-
'rgba(255, 255, 0, 0.5)'
160-
],
161-
borderColor: [
162-
'rgba(0,0,0,0.4)',
163-
'rgba(0,0,0,0.4)',
164-
'rgba(0,0,0,0.4)',
165-
'rgba(0,0,0,0.4)',
166-
'rgba(0,0,0,0.4)',
167-
'rgba(0,0,0,0.4)'
168-
],
169-
borderWidth: 1
191+
label: " ",
192+
data: activeusers_data,
193+
fill: false,
194+
borderColor: ['rgba(0, 0, 255, 1)'],
195+
borderWidth: 1,
196+
borderDashOffset: 0.0,
197+
borderJoinStyle: 'miter',
198+
pointBorderColor: 'rgba(0, 0, 255, 1)',
199+
pointBackgroundColor: "#fff",
200+
pointBorderWidth: 1,
201+
pointHoverRadius: 5,
202+
pointHoverBackgroundColor: "rgba(0,0,255,0.6)",
203+
pointHoverBorderColor: "rgba(0, 0, 255, 1)",
204+
pointHoverBorderWidth: 1,
205+
pointRadius: 5,
206+
pointHitRadius: 10,
170207
}]
171208
},
172209
options: {
210+
legend: {display:false},
211+
scales: {
212+
yAxes: [{
213+
ticks: {
214+
min: 0,
215+
stepSize: stepSize
216+
}
217+
}]
218+
}
173219
}
174220
});
175221
}
222+
223+
$('#numFilesStorage').text(' hola' + activeUsers.last5minutes);
176224
}
177225

178226
function updatePHPStatistics (php) {
179227

180228
$('#phpVersion').text(' ' + php.version);
181-
$('#phpMemLimit').text(' ' + php.memory_limit);
229+
$('#phpMemLimit').text(' ' + bytesToSize(php.memory_limit));
182230
$('#phpMaxExecTime').text(' ' + php.max_execution_time);
183-
$('#phpUploadMaxSize').text(' ' + php.upload_max_filesize);
231+
$('#phpUploadMaxSize').text(' ' + bytesToSize(php.upload_max_filesize));
184232
}
185233

186234
function updateDatabaseStatistics (database) {
187235

188236
$('#databaseType').text(' ' + database.type);
189237
$('#databaseVersion').text(' ' + database.version);
190-
$('#dataBaseSize').text(' ' + database.size);
238+
$('#dataBaseSize').text(' ' + bytesToSize(database.size));
239+
}
240+
241+
function resizeSystemCharts () {
242+
243+
var cpu_canvas = document.getElementById("cpuloadcanvas"),
244+
mem_canvas = document.getElementById("memorycanvas");
245+
246+
var newWidth = $('#cpuSection').width();
247+
newHeight = newWidth / 4
248+
249+
if (newWidth <= 100) newWidth = 100;
250+
if (newHeight > 150) newHeight = 150;
251+
252+
cpuloadcanvas.width = newWidth;
253+
cpuloadcanvas.height = newHeight;
254+
255+
mem_canvas.width = newWidth;
256+
mem_canvas.height = newHeight;
191257
}
192258

193259
})(jQuery, OC);

‎lib/Controller/PageController.php‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
use OCP\AppFramework\Controller;
2929
use OCA\ServerInfo\DatabaseStatistics;
3030
use OCA\ServerInfo\PhpStatistics;
31+
use OCA\ServerInfo\SessionStatistics;
3132
use OCA\ServerInfo\ShareStatistics;
3233
use OCA\ServerInfo\StorageStatistics;
3334
use OCA\ServerInfo\SystemStatistics;
@@ -49,6 +50,9 @@ class PageController extends Controller {
4950
/** @var ShareStatistics */
5051
private $shareStatistics;
5152

53+
/** @var SessionStatistics */
54+
private $sessionStatistics;
55+
5256
/**
5357
* ApiController constructor.
5458
*
@@ -59,14 +63,16 @@ class PageController extends Controller {
5963
* @param PhpStatistics $phpStatistics
6064
* @param DatabaseStatistics $databaseStatistics
6165
* @param ShareStatistics $shareStatistics
66+
* @param SessionStatistics $sessionStatistics
6267
*/
6368
public function __construct($appName,
6469
IRequest $request,
6570
SystemStatistics $systemStatistics,
6671
StorageStatistics $storageStatistics,
6772
PhpStatistics $phpStatistics,
6873
DatabaseStatistics $databaseStatistics,
69-
ShareStatistics $shareStatistics
74+
ShareStatistics $shareStatistics,
75+
SessionStatistics $sessionStatistics
7076
) {
7177
parent::__construct($appName, $request);
7278

@@ -75,6 +81,7 @@ public function __construct($appName,
7581
$this->phpStatistics = $phpStatistics;
7682
$this->databaseStatistics = $databaseStatistics;
7783
$this->shareStatistics = $shareStatistics;
84+
$this->sessionStatistics = $sessionStatistics;
7885
}
7986

8087
/**
@@ -100,7 +107,8 @@ public function update() {
100107
'storage' => $this->storageStatistics->getStorageStatistics(),
101108
'shares' => $this->shareStatistics->getShareStatistics(),
102109
'php' => $this->phpStatistics->getPhpStatistics(),
103-
'database' => $this->databaseStatistics->getDatabaseStatistics()
110+
'database' => $this->databaseStatistics->getDatabaseStatistics(),
111+
'activeUsers' => $this->sessionStatistics->getSessionStatistics()
104112
];
105113

106114
return new JSONResponse($data);

‎templates/part.content.php‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
<div class="section" id="systemSection">
2-
<h2><?php p($l->t('System'));?></h2>
3-
<p><?php p($l->t('CPU'));?></p>
4-
<canvas id="cpuloadcanvas" width="400" height="100"></canvas>
5-
<p><em><?php p($l->t('CPU load average (Last minute)')); ?></em></p>
6-
<br>
7-
<p><?php p($l->t('Memory'));?></p>
8-
<canvas id="memorycanvas" width="400" height="100"></canvas>
1+
<div class="section" id="cpuSection">
2+
<h2><?php p($l->t('CPU load'));?></h2>
3+
<canvas id="cpuloadcanvas" width="600" height="150"></canvas>
4+
<p><em id="cpuFooterInfo"></em></p>
5+
</div>
6+
<div class="section" id="memorySection">
7+
<h2><?php p($l->t('Memory usage'));?></h2>
8+
<canvas id="memorycanvas" width="600" height="150"></canvas>
99
<p><em id="memFooterInfo"></em></p>
1010
</div>
11+
<div class="section" id="activeUsersSection">
12+
<h2><?php p($l->t('Active users'));?></h2>
13+
<br>
14+
<canvas class="barchart" id="activeuserscanvas"></canvas>
15+
</div>
16+
<div class="section" id="sharesSection">
17+
<h2><?php p($l->t('Shares'));?></h2>
18+
<br>
19+
<canvas class="barchart" id="sharecanvas"></canvas>
20+
</div>
1121
<div class="section" id="storageSection">
1222
<h2><?php p($l->t('Storage'));?></h2>
1323
<p><?php p($l->t('Users:'));?><em id="numUsersStorage"> -- </em></p>
1424
<p><?php p($l->t('Files:'));?><em id="numFilesStorage"> -- </em></p>
15-
<p><?php p($l->t('Storages:'));?></p>
16-
<div id="container" style="width:280px; height:250px;">
17-
<canvas id="storagescanvas" width="280" height="250"></canvas>
18-
</div>
19-
</div>
20-
<div class="section" id="shareSection">
21-
<h2><?php p($l->t('Shares'));?></h2>
22-
<p><?php p($l->t('Total:'));?><em id="totalShares"> -- </em></p>
23-
<div id="container" style="width:350px; height:350px;">
24-
<canvas id="sharecanvas" width="350" height="350"></canvas>
25-
</div>
2625
</div>
2726
<div class="section" id="phpSection">
2827
<h2><?php p($l->t('PHP'));?></h2>

0 commit comments

Comments
 (0)