Skip to content

Commit

Permalink
Merge pull request #711 from Malex14/visual-fixes-and-improvements
Browse files Browse the repository at this point in the history 
Visual fixes and improvements
  • Loading branch information
@kesselb
kesselb authored Dec 2, 2024
2 parents 04bf2fc + eebc704 commit 9f913b3
Show file tree
Hide file tree
Showing 10 changed files with 692 additions and 229 deletions.
57 changes: 41 additions & 16 deletions css/style.css
View file
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
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

0 comments on commit 9f913b3

Please sign in to comment.