Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable30] Visual fixes and improvements #718

Merged
merged 7 commits into from
Dec 12, 2024
Merged

[stable30] Visual fixes and improvements #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c12a692
Updated smothie.js to latest version
Malex14 Nov 16, 2024
e4923c8
update chart size when dpr changes
Malex14 Nov 16, 2024
2c6f3e5
improved chart visuals and added tooltip with additional information
Malex14 Nov 16, 2024
a07e0ee
fixed css responsiveness issues, fixed icon positions, reenabled the …
Malex14 Nov 16, 2024
89683e4
fixed lint issues, added getCpuCount function to the dummy os
Malex14 Nov 16, 2024
b5b1c69
get cpu count using /proc/cpuinfo on linux
Malex14 Nov 25, 2024
8dd505d
use the same default cpu count placeholder for FreeBSD and Linux
Malex14 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 41 additions & 16 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
.monitoring-wrapper {
display: -webkit-flex;
display: flex;
position: left;
max-width: 50%;
min-width: 50%;
}
Expand All @@ -22,16 +21,16 @@
margin-top: 0;
}

.rambox {
.rambox, .cpubox {
height: 10px;
width: 10px;
background-color: #555;
background-color: var(--color-primary-element);
}

.swapbox {
height: 10px;
width: 10px;
background-color: #222;
background-color: var(--color-background-darker);
}

.info {
Expand All @@ -53,11 +52,6 @@
border-radius: var(--border-radius-large);
}

.infobox.cpuSection,
.infobox.memorySection {
padding: 16px 0 0 0;
}

.diskchart-container {
width: 100px;
margin-right: 25px;
Expand All @@ -80,14 +74,24 @@
background-color: var(--color-primary-element);
}

@media only screen and (max-width: $breakpoint-mobile) {
@media (width <= 1280px) {
.infobox {
display: block;
word-break: break-word;
}

.text-center-mobile {
text-align: center;
}

.diskchart-container {
margin: 0 auto;
}

.monitoring-wrapper {
min-width: 100%;
max-width: 100%;
}
}

.diskinfo-container {
Expand All @@ -102,7 +106,7 @@

.infoicon {
width: 28px;
float: left;
vertical-align: middle;
padding: 5px;
filter: var(--background-invert-if-dark);
}
Expand Down Expand Up @@ -211,7 +215,7 @@
min-width: 100%;
}

/*

@media only screen and (max-width: 1200px) {
.col-xl-6 {
flex-basis: 50%;
Expand All @@ -234,7 +238,7 @@
}
}

@media only screen and (max-width: $breakpoint-mobile) {
@media only screen and (max-width: 768px) {
.col-m-6 {
flex-basis: 50%;
max-width: 50%;
Expand All @@ -247,7 +251,7 @@
min-width: 100%;
}
}
*/


.monitoring-url-params {
margin-top: 3px;
Expand All @@ -256,8 +260,14 @@

.monitoring-url-param {
display: flex;
align-items: center;
height: 24px;
align-items: start;
margin-bottom: 3px;
}

.monitoring-url-param input {
margin-top: 4px;
min-height: initial;
height: initial;
}

.active-users-wrapper {
Expand Down Expand Up @@ -291,3 +301,18 @@
.active-users-box .info {
font-size: 2rem;
}

.smoothie-chart-tooltip {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 16px;
margin: 0 0.25rem;
background-color: var(--color-main-background);
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large);
}

.cpu-wrapper {
width: 100%;
}
110 changes: 69 additions & 41 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,21 @@
memoryUsageLine,
swapUsageLine,
cpuLoadChart,
cpuLoadLine,
activeUsersChart,
sharesChart;

$(document).ready(function () {
var rambox = document.getElementById('rambox');
rambox.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)';

var swapbox = document.getElementById('swapbox');
swapbox.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
cpuLoadLine

const chartOptions = {
millisPerPixel: 100,
minValue: 0,
grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
labels: {fillStyle: getThemedPassiveColor(), fontSize: 12, precision: 1},
responsive: true,
tooltip: true,
tooltipLine: {
strokeStyle: getThemedPassiveColor()
}
};

$(function () {
initDiskCharts();

setHumanReadableSizeToElement("databaseSize");
Expand All @@ -37,7 +41,7 @@

$.get(url)
.done(function (response) {
updateCPUStatistics(response.system.cpuload)
updateCPUStatistics(response.system.cpuload, response.system.cpunum)
updateMemoryStatistics(response.system.mem_total, response.system.mem_free, response.system.swap_total, response.system.swap_free)
})
.always(function () {
Expand All @@ -63,10 +67,10 @@
* Reset all canvas widths on window resize so canvas is responsive
*/
function resizeSystemCharts() {
var cpuCanvas = $("#cpuloadcanvas"),
cpuCanvasWidth = cpuCanvas.parents('.infobox').width() - 30,
let cpuCanvas = $("#cpuloadcanvas"),
cpuCanvasWidth = cpuCanvas.parents('.infobox').width(),
memCanvas = $("#memorycanvas"),
memCanvasWidth = memCanvas.parents('.infobox').width() - 30;
memCanvasWidth = memCanvas.parents('.infobox').width();


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

function updateCPUStatistics(cpuload) {
var $cpuFooterInfo = $('#cpuFooterInfo');
var $cpuLoadCanvas = $('#cpuloadcanvas');
function updateCPUStatistics(cpuload, numCpus) {
let $cpuFooterInfo = $('#cpuFooterInfo');
let $cpuLoadCanvas = $('#cpuloadcanvas');

// We need to stop touch events here, since they cause the tooltip to open, but never close again
$cpuLoadCanvas[0].addEventListener('touchstart', (e) => {
e.preventDefault();
})

if (cpuload === 'N/A') {
if (cpuload === 'N/A' || numCpus === -1) {
$cpuFooterInfo.text(t('serverinfo', 'CPU info not available'));
$cpuLoadCanvas.addClass('hidden');
return;

} else if ($cpuLoadCanvas.hasClass('hidden')) {
$cpuLoadCanvas.removeClass('hidden');
}

var cpu1 = cpuload[0],
cpu2 = cpuload[1],
cpu3 = cpuload[2];
let cpuloadFixed = cpuload.map((load) => load.toFixed(2));
let cpuloadPercentageFixed = cpuload.map((load) => ((load / numCpus) * 100).toFixed(1));

if (typeof cpuLoadChart === 'undefined') {
cpuLoadChart = new SmoothieChart(
{
millisPerPixel: 100,
minValue: 0,
grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
responsive: true
});
const percentageFormatter = (val, precision) => val.toFixed(precision) + " %";

cpuLoadChart = new SmoothieChart({
...chartOptions,
yMinFormatter: percentageFormatter,
yMaxFormatter: percentageFormatter,
maxValue: 100
});
cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
cpuLoadLine = new TimeSeries();
cpuLoadChart.addTimeSeries(cpuLoadLine, {
lineWidth: 1,
strokeStyle: getThemedPassiveColor(),
fillStyle: getThemedPrimaryColor()
fillStyle: getThemedPrimaryColor(),
tooltipLabel: t('serverinfo', 'CPU Usage:')
});
}

$cpuFooterInfo.text(t('serverinfo', 'Load average: {cpu} (last minute)', { cpu: cpu1.toFixed(2) }));
cpuLoadLine.append(new Date().getTime(), cpu1);
$cpuFooterInfo.text(t('serverinfo', 'Load average: {percentage} % ({load}) last minute', { percentage: cpuloadPercentageFixed[0], load: cpuloadFixed[0] }));
$cpuFooterInfo[0].title = t(
'serverinfo',
'{lastMinutePercentage} % ({lastMinute}) last Minute\n{last5MinutesPercentage} % ({last5Minutes}) last 5 Minutes\n{last15MinutesPercentage} % ({last15Minutes}) last 15 Minutes',
{
lastMinute: cpuloadFixed[0],
lastMinutePercentage: cpuloadPercentageFixed[0],
last5Minutes: cpuloadFixed[1],
last5MinutesPercentage: cpuloadPercentageFixed[1],
last15Minutes: cpuloadFixed[2],
last15MinutesPercentage: cpuloadPercentageFixed[2]
}
);

cpuLoadLine.append(new Date().getTime(), cpuload[0] / numCpus * 100);
}

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

// We need to stop touch events here, since they cause the tooltip to open, but never close again
$memoryCanvas[0].addEventListener('touchstart', (e) => {
e.preventDefault();
})

var memTotalBytes = memTotal * 1024,
memUsageBytes = (memTotal - memFree) * 1024,
memTotalGB = memTotal / (1024 * 1024),
Expand All @@ -152,27 +178,29 @@
}

if (typeof memoryUsageChart === 'undefined') {
const gbFormatter = (val, precision) => val.toFixed(precision) + " GB";

memoryUsageChart = new SmoothieChart(
{
millisPerPixel: 100,
...chartOptions,
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
yMinFormatter: gbFormatter,
yMaxFormatter: gbFormatter
});
memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
memoryUsageLine = new TimeSeries();
memoryUsageChart.addTimeSeries(memoryUsageLine, {
lineWidth: 1,
strokeStyle: getThemedPassiveColor(),
fillStyle: getThemedPrimaryColor()
fillStyle: getThemedPrimaryColor(),
tooltipLabel: t('serverinfo', 'RAM Usage:')
});
swapUsageLine = new TimeSeries();
memoryUsageChart.addTimeSeries(swapUsageLine, {
lineWidth: 1,
strokeStyle: 'rgb(100, 100, 100)',
fillStyle: 'rgba(100, 100, 100, 0.2)'
strokeStyle: getThemedPassiveColor(),
fillStyle: 'rgba(100, 100, 100, 0.2)',
tooltipLabel: t('serverinfo', 'SWAP Usage:')
});
}

Expand Down
Loading
Loading