Skip to content

Commit 30aa2c6

Browse files
kesselbkesselb
authored
Merge pull request #718 from nextcloud/backport/711/stable30
[stable30] Visual fixes and improvements
2 parents 3ea5d24 + 8dd505d commit 30aa2c6

File tree

10 files changed

+692
-229
lines changed

10 files changed

+692
-229
lines changed

‎css/style.css‎

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
.monitoring-wrapper {
1010
display: -webkit-flex;
1111
display: flex;
12-
position: left;
1312
max-width: 50%;
1413
min-width: 50%;
1514
}
@@ -22,16 +21,16 @@
2221
margin-top: 0;
2322
}
2423

25-
.rambox {
24+
.rambox, .cpubox {
2625
height: 10px;
2726
width: 10px;
28-
background-color: #555;
27+
background-color: var(--color-primary-element);
2928
}
3029

3130
.swapbox {
3231
height: 10px;
3332
width: 10px;
34-
background-color: #222;
33+
background-color: var(--color-background-darker);
3534
}
3635

3736
.info {
@@ -53,11 +52,6 @@
5352
border-radius: var(--border-radius-large);
5453
}
5554

56-
.infobox.cpuSection,
57-
.infobox.memorySection {
58-
padding: 16px 0 0 0;
59-
}
60-
6155
.diskchart-container {
6256
width: 100px;
6357
margin-right: 25px;
@@ -80,14 +74,24 @@
8074
background-color: var(--color-primary-element);
8175
}
8276

83-
@media only screen and (max-width: $breakpoint-mobile) {
77+
@media (width <= 1280px) {
8478
.infobox {
8579
display: block;
80+
word-break: break-word;
81+
}
82+
83+
.text-center-mobile {
8684
text-align: center;
8785
}
86+
8887
.diskchart-container {
8988
margin: 0 auto;
9089
}
90+
91+
.monitoring-wrapper {
92+
min-width: 100%;
93+
max-width: 100%;
94+
}
9195
}
9296

9397
.diskinfo-container {
@@ -102,7 +106,7 @@
102106

103107
.infoicon {
104108
width: 28px;
105-
float: left;
109+
vertical-align: middle;
106110
padding: 5px;
107111
filter: var(--background-invert-if-dark);
108112
}
@@ -211,7 +215,7 @@
211215
min-width: 100%;
212216
}
213217

214-
/*
218+
215219
@media only screen and (max-width: 1200px) {
216220
.col-xl-6 {
217221
flex-basis: 50%;
@@ -234,7 +238,7 @@
234238
}
235239
}
236240

237-
@media only screen and (max-width: $breakpoint-mobile) {
241+
@media only screen and (max-width: 768px) {
238242
.col-m-6 {
239243
flex-basis: 50%;
240244
max-width: 50%;
@@ -247,7 +251,7 @@
247251
min-width: 100%;
248252
}
249253
}
250-
*/
254+
251255

252256
.monitoring-url-params {
253257
margin-top: 3px;
@@ -256,8 +260,14 @@
256260

257261
.monitoring-url-param {
258262
display: flex;
259-
align-items: center;
260-
height: 24px;
263+
align-items: start;
264+
margin-bottom: 3px;
265+
}
266+
267+
.monitoring-url-param input {
268+
margin-top: 4px;
269+
min-height: initial;
270+
height: initial;
261271
}
262272

263273
.active-users-wrapper {
@@ -291,3 +301,18 @@
291301
.active-users-box .info {
292302
font-size: 2rem;
293303
}
304+
305+
.smoothie-chart-tooltip {
306+
display: flex;
307+
flex-wrap: nowrap;
308+
align-items: center;
309+
padding: 16px;
310+
margin: 0 0.25rem;
311+
background-color: var(--color-main-background);
312+
border: 2px solid var(--color-border);
313+
border-radius: var(--border-radius-large);
314+
}
315+
316+
.cpu-wrapper {
317+
width: 100%;
318+
}

‎js/script.js‎

Lines changed: 69 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@
99
memoryUsageLine,
1010
swapUsageLine,
1111
cpuLoadChart,
12-
cpuLoadLine,
13-
activeUsersChart,
14-
sharesChart;
15-
16-
$(document).ready(function () {
17-
var rambox = document.getElementById('rambox');
18-
rambox.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)';
19-
20-
var swapbox = document.getElementById('swapbox');
21-
swapbox.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
12+
cpuLoadLine
13+
14+
const chartOptions = {
15+
millisPerPixel: 100,
16+
minValue: 0,
17+
grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
18+
labels: {fillStyle: getThemedPassiveColor(), fontSize: 12, precision: 1},
19+
responsive: true,
20+
tooltip: true,
21+
tooltipLine: {
22+
strokeStyle: getThemedPassiveColor()
23+
}
24+
};
2225

26+
$(function () {
2327
initDiskCharts();
2428

2529
setHumanReadableSizeToElement("databaseSize");
@@ -37,7 +41,7 @@
3741

3842
$.get(url)
3943
.done(function (response) {
40-
updateCPUStatistics(response.system.cpuload)
44+
updateCPUStatistics(response.system.cpuload, response.system.cpunum)
4145
updateMemoryStatistics(response.system.mem_total, response.system.mem_free, response.system.swap_total, response.system.swap_free)
4246
})
4347
.always(function () {
@@ -63,10 +67,10 @@
6367
* Reset all canvas widths on window resize so canvas is responsive
6468
*/
6569
function resizeSystemCharts() {
66-
var cpuCanvas = $("#cpuloadcanvas"),
67-
cpuCanvasWidth = cpuCanvas.parents('.infobox').width() - 30,
70+
let cpuCanvas = $("#cpuloadcanvas"),
71+
cpuCanvasWidth = cpuCanvas.parents('.infobox').width(),
6872
memCanvas = $("#memorycanvas"),
69-
memCanvasWidth = memCanvas.parents('.infobox').width() - 30;
73+
memCanvasWidth = memCanvas.parents('.infobox').width();
7074

7175

7276
// We have to set css width AND attribute width
@@ -76,43 +80,60 @@
7680
memCanvas.attr('width', memCanvasWidth);
7781
}
7882

79-
function updateCPUStatistics(cpuload) {
80-
var $cpuFooterInfo = $('#cpuFooterInfo');
81-
var $cpuLoadCanvas = $('#cpuloadcanvas');
83+
function updateCPUStatistics(cpuload, numCpus) {
84+
let $cpuFooterInfo = $('#cpuFooterInfo');
85+
let $cpuLoadCanvas = $('#cpuloadcanvas');
86+
87+
// We need to stop touch events here, since they cause the tooltip to open, but never close again
88+
$cpuLoadCanvas[0].addEventListener('touchstart', (e) => {
89+
e.preventDefault();
90+
})
8291

83-
if (cpuload === 'N/A') {
92+
if (cpuload === 'N/A' || numCpus === -1) {
8493
$cpuFooterInfo.text(t('serverinfo', 'CPU info not available'));
8594
$cpuLoadCanvas.addClass('hidden');
8695
return;
87-
8896
} else if ($cpuLoadCanvas.hasClass('hidden')) {
8997
$cpuLoadCanvas.removeClass('hidden');
9098
}
9199

92-
var cpu1 = cpuload[0],
93-
cpu2 = cpuload[1],
94-
cpu3 = cpuload[2];
100+
let cpuloadFixed = cpuload.map((load) => load.toFixed(2));
101+
let cpuloadPercentageFixed = cpuload.map((load) => ((load / numCpus) * 100).toFixed(1));
95102

96103
if (typeof cpuLoadChart === 'undefined') {
97-
cpuLoadChart = new SmoothieChart(
98-
{
99-
millisPerPixel: 100,
100-
minValue: 0,
101-
grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
102-
labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
103-
responsive: true
104-
});
104+
const percentageFormatter = (val, precision) => val.toFixed(precision) + " %";
105+
106+
cpuLoadChart = new SmoothieChart({
107+
...chartOptions,
108+
yMinFormatter: percentageFormatter,
109+
yMaxFormatter: percentageFormatter,
110+
maxValue: 100
111+
});
105112
cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
106113
cpuLoadLine = new TimeSeries();
107114
cpuLoadChart.addTimeSeries(cpuLoadLine, {
108115
lineWidth: 1,
109116
strokeStyle: getThemedPassiveColor(),
110-
fillStyle: getThemedPrimaryColor()
117+
fillStyle: getThemedPrimaryColor(),
118+
tooltipLabel: t('serverinfo', 'CPU Usage:')
111119
});
112120
}
113121

114-
$cpuFooterInfo.text(t('serverinfo', 'Load average: {cpu} (last minute)', { cpu: cpu1.toFixed(2) }));
115-
cpuLoadLine.append(new Date().getTime(), cpu1);
122+
$cpuFooterInfo.text(t('serverinfo', 'Load average: {percentage} % ({load}) last minute', { percentage: cpuloadPercentageFixed[0], load: cpuloadFixed[0] }));
123+
$cpuFooterInfo[0].title = t(
124+
'serverinfo',
125+
'{lastMinutePercentage} % ({lastMinute}) last Minute\n{last5MinutesPercentage} % ({last5Minutes}) last 5 Minutes\n{last15MinutesPercentage} % ({last15Minutes}) last 15 Minutes',
126+
{
127+
lastMinute: cpuloadFixed[0],
128+
lastMinutePercentage: cpuloadPercentageFixed[0],
129+
last5Minutes: cpuloadFixed[1],
130+
last5MinutesPercentage: cpuloadPercentageFixed[1],
131+
last15Minutes: cpuloadFixed[2],
132+
last15MinutesPercentage: cpuloadPercentageFixed[2]
133+
}
134+
);
135+
136+
cpuLoadLine.append(new Date().getTime(), cpuload[0] / numCpus * 100);
116137
}
117138

118139
function isMemoryStat(memTotal, memFree) {
@@ -136,6 +157,11 @@
136157
var $swapFooterInfo = $('#swapFooterInfo');
137158
var $memoryCanvas = $('#memorycanvas');
138159

160+
// We need to stop touch events here, since they cause the tooltip to open, but never close again
161+
$memoryCanvas[0].addEventListener('touchstart', (e) => {
162+
e.preventDefault();
163+
})
164+
139165
var memTotalBytes = memTotal * 1024,
140166
memUsageBytes = (memTotal - memFree) * 1024,
141167
memTotalGB = memTotal / (1024 * 1024),
@@ -152,27 +178,29 @@
152178
}
153179

154180
if (typeof memoryUsageChart === 'undefined') {
181+
const gbFormatter = (val, precision) => val.toFixed(precision) + " GB";
182+
155183
memoryUsageChart = new SmoothieChart(
156184
{
157-
millisPerPixel: 100,
185+
...chartOptions,
158186
maxValue: maxValueOfChart,
159-
minValue: 0,
160-
grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
161-
labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
162-
responsive: true
187+
yMinFormatter: gbFormatter,
188+
yMaxFormatter: gbFormatter
163189
});
164190
memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
165191
memoryUsageLine = new TimeSeries();
166192
memoryUsageChart.addTimeSeries(memoryUsageLine, {
167193
lineWidth: 1,
168194
strokeStyle: getThemedPassiveColor(),
169-
fillStyle: getThemedPrimaryColor()
195+
fillStyle: getThemedPrimaryColor(),
196+
tooltipLabel: t('serverinfo', 'RAM Usage:')
170197
});
171198
swapUsageLine = new TimeSeries();
172199
memoryUsageChart.addTimeSeries(swapUsageLine, {
173200
lineWidth: 1,
174-
strokeStyle: 'rgb(100, 100, 100)',
175-
fillStyle: 'rgba(100, 100, 100, 0.2)'
201+
strokeStyle: getThemedPassiveColor(),
202+
fillStyle: 'rgba(100, 100, 100, 0.2)',
203+
tooltipLabel: t('serverinfo', 'SWAP Usage:')
176204
});
177205
}
178206

0 commit comments

Comments
 (0)