From c8ed1ece6ea43476dbc69ac963ed63b5a4c82450 Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Thu, 1 Jun 2017 13:33:49 +0200 Subject: [PATCH 1/7] Putting endpoint URL within input field Signed-off-by: Patrik Kernstock --- templates/settings-admin.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/templates/settings-admin.php b/templates/settings-admin.php index a6e75140..ab4359db 100644 --- a/templates/settings-admin.php +++ b/templates/settings-admin.php @@ -69,5 +69,9 @@

t('External monitoring tool'));?>

- t('You can connect an external monitoring tool by using this end point: ') . $_['ocs']);?> + t('You can connect an external monitoring tool by using this end point:')); ?> +

+
+ +
From da621baf8f15ec08da5408bb82ee8abfd2aebff7 Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Thu, 1 Jun 2017 13:36:33 +0200 Subject: [PATCH 2/7] Selecting URL when clicking on input field Signed-off-by: Patrik Kernstock --- js/script.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/script.js b/js/script.js index 08dfa6e7..598085a3 100644 --- a/js/script.js +++ b/js/script.js @@ -36,6 +36,10 @@ updateShareStatistics(); setHumanReadableSizeToElement("dataBaseSize"); setHumanReadableSizeToElement("phpUploadMaxSize"); + + $("#monitoring-endpoint-url").on('click', function() { + $(this).select(); + }); function updateInfo() { var url = OC.generateUrl('/apps/serverinfo/update'); From 0752b4d29ad86c9a68bb29f00053147bfd27fa0f Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Wed, 18 Jul 2018 22:29:23 +0200 Subject: [PATCH 3/7] Beautified JS code a bit, e.g. indents Signed-off-by: Patrik Kernstock --- js/script.js | 192 +++++++++++++++++++++++++++------------------------ 1 file changed, 100 insertions(+), 92 deletions(-) diff --git a/js/script.js b/js/script.js index 598085a3..24f6d080 100644 --- a/js/script.js +++ b/js/script.js @@ -36,10 +36,10 @@ updateShareStatistics(); setHumanReadableSizeToElement("dataBaseSize"); setHumanReadableSizeToElement("phpUploadMaxSize"); - + $("#monitoring-endpoint-url").on('click', function() { - $(this).select(); - }); + $(this).select(); + }); function updateInfo() { var url = OC.generateUrl('/apps/serverinfo/update'); @@ -64,16 +64,16 @@ if (typeof cpuLoadChart === 'undefined') { 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} + 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:1, strokeStyle:'rgb(0, 0, 255)', fillStyle:'rgba(0, 0, 255, 0.2)'}); + cpuLoadChart.addTimeSeries(cpuLoadLine, { lineWidth: 1, strokeStyle: 'rgb(0, 0, 255)', fillStyle: 'rgba(0, 0, 255, 0.2)' }); } - + $('#cpuFooterInfo').text(t('serverinfo', 'Load average')+": "+cpu1+" ("+t('serverinfo', 'Last minute')+")"); cpuLoadLine.append(new Date().getTime(), cpu1); } @@ -93,11 +93,11 @@ if (typeof memoryUsageChart === 'undefined') { 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} + 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(); @@ -112,52 +112,56 @@ var shares = $('#sharecanvas').data('shares'), 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; + stepSize = 0; - if (Math.max.apply(null, shares_data) < 10) {stepSize = 1;} + 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: [t('serverinfo', 'Users'), - t('serverinfo', 'Groups'), - t('serverinfo', 'Links'), - t('serverinfo', 'Federated sent'), - t('serverinfo', 'Federated received')], - datasets: [{ - label: " ", - data: shares_data, - backgroundColor: [ - '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, 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 - } - }] - } - } + type: 'bar', + data: { + labels: [ + t('serverinfo', 'Users'), + t('serverinfo', 'Groups'), + t('serverinfo', 'Links'), + t('serverinfo', 'Federated sent'), + t('serverinfo', 'Federated received') + ], + datasets: [{ + label: " ", + data: shares_data, + backgroundColor: [ + '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, 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 + } + }] + } + } }); } @@ -170,48 +174,52 @@ activeUsers_data = [activeUsers.last24hours, activeUsers.last1hour, activeUsers.last5minutes], stepSize = 0; - if (Math.max.apply(null, activeUsers_data) < 10) {stepSize = 1;} + if (Math.max.apply(null, activeUsers_data) < 10) { + stepSize = 1; + } if (typeof activeusersChart === 'undefined') { var ctx = document.getElementById("activeuserscanvas"); activeusersChart = new Chart(ctx, { - type: 'line', - data: { - labels: [t('serverinfo', 'Last 24 hours'), - t('serverinfo', 'Last 1 hour'), - t('serverinfo', 'Last 5 mins')], - datasets: [{ - 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, - lineTension:0 - }] - }, - options: { - legend: {display:false}, - scales: { - yAxes: [{ - ticks: { - min: 0, - stepSize: stepSize - } - }] - } - } + type: 'line', + data: { + labels: [ + t('serverinfo', 'Last 24 hours'), + t('serverinfo', 'Last 1 hour'), + t('serverinfo', 'Last 5 mins') + ], + datasets: [{ + 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, + lineTension: 0 + }] + }, + options: { + legend: { display:false }, + scales: { + yAxes: [{ + ticks: { + min: 0, + stepSize: stepSize + } + }] + } + } }); } } @@ -237,7 +245,7 @@ cpuloadcanvas.width = newWidth; cpuloadcanvas.height = newHeight; - + mem_canvas.width = newWidth; mem_canvas.height = newHeight; } From 8ab6157f9c239f95196a082eab258e0bf99f17f5 Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Wed, 18 Jul 2018 23:05:36 +0200 Subject: [PATCH 4/7] Added clipboard copy button for endpoint link Signed-off-by: Patrik Kernstock --- css/style.css | 9 +++++++- js/script.js | 45 ++++++++++++++++++++++++++++++++++++ templates/settings-admin.php | 4 +++- 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 1c3e8357..f455c747 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,11 @@ .barchart { max-width: 700px; max-height: 350px; -} \ No newline at end of file +} + +.clipboardButton { + display: inline-block; + position: relative; + top: 2px; + margin-left: 5px; +} diff --git a/js/script.js b/js/script.js index 24f6d080..9acf3936 100644 --- a/js/script.js +++ b/js/script.js @@ -37,6 +37,7 @@ setHumanReadableSizeToElement("dataBaseSize"); setHumanReadableSizeToElement("phpUploadMaxSize"); + initMonitoringLinkToClipboard(); $("#monitoring-endpoint-url").on('click', function() { $(this).select(); }); @@ -250,4 +251,48 @@ mem_canvas.height = newHeight; } + function initMonitoringLinkToClipboard() { + var monAPIBox = $("#ocsEndPoint"); + /* reused from settings/js/authtoken_view.js */ + monAPIBox.find('.clipboardButton').tooltip({placement: 'bottom', title: t('core', 'Copy'), trigger: 'hover'}); + + // Clipboard! + var clipboard = new Clipboard('.clipboardButton'); + clipboard.on('success', function(e) { + var $input = $(e.trigger); + $input.tooltip('hide') + .attr('data-original-title', t('core', 'Copied!')) + .tooltip('fixTitle') + .tooltip({placement: 'bottom', trigger: 'manual'}) + .tooltip('show'); + _.delay(function() { + $input.tooltip('hide') + .attr('data-original-title', t('core', 'Copy')) + .tooltip('fixTitle'); + }, 3000); + }); + clipboard.on('error', function (e) { + var $input = $(e.trigger); + var actionMsg = ''; + if (/iPhone|iPad/i.test(navigator.userAgent)) { + actionMsg = t('core', 'Not supported!'); + } else if (/Mac/i.test(navigator.userAgent)) { + actionMsg = t('core', 'Press ⌘-C to copy.'); + } else { + actionMsg = t('core', 'Press Ctrl-C to copy.'); + } + + $input.tooltip('hide') + .attr('data-original-title', actionMsg) + .tooltip('fixTitle') + .tooltip({placement: 'bottom', trigger: 'manual'}) + .tooltip('show'); + _.delay(function () { + $input.tooltip('hide') + .attr('data-original-title', t('core', 'Copy')) + .tooltip('fixTitle'); + }, 3000); + }); + } + })(jQuery, OC); diff --git a/templates/settings-admin.php b/templates/settings-admin.php index ab4359db..d55053ac 100644 --- a/templates/settings-admin.php +++ b/templates/settings-admin.php @@ -25,6 +25,7 @@ script('serverinfo', 'Chart.min'); style('serverinfo', 'style'); + ?>
@@ -72,6 +73,7 @@ t('You can connect an external monitoring tool by using this end point:')); ?>

- + +
From a8b908b089a7128d18c937887c0d0b5e098d68d4 Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Wed, 18 Jul 2018 23:10:45 +0200 Subject: [PATCH 5/7] Add bottom margin on the endpoint div If there's the default margin-bottom:0 applied, the page starts flickering when the "Copy" tooltip is shown. So this is probably sort of a (working) workaround. Signed-off-by: Patrik Kernstock --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index f455c747..85bde668 100644 --- a/css/style.css +++ b/css/style.css @@ -9,3 +9,7 @@ top: 2px; margin-left: 5px; } + +#ocsEndPoint { + margin-bottom: 10px; +} From f5d84031962d6bde26b2643852bf54763ed92e27 Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Wed, 18 Jul 2018 23:44:31 +0200 Subject: [PATCH 6/7] Re-idented chartx lines Signed-off-by: Patrik Kernstock --- js/script.js | 156 +++++++++++++++++++++++++-------------------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/js/script.js b/js/script.js index 490cc08f..375dbd65 100644 --- a/js/script.js +++ b/js/script.js @@ -140,46 +140,46 @@ var ctx = document.getElementById("sharecanvas"); sharesChart = new Chart(ctx, { - type: 'bar', - data: { - labels: [ - t('serverinfo', 'Users'), - t('serverinfo', 'Groups'), - t('serverinfo', 'Links'), - t('serverinfo', 'Federated sent'), - t('serverinfo', 'Federated received') - ], - datasets: [{ - label: " ", - data: shares_data, - backgroundColor: [ - '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, 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 - } - }] - } - } + type: 'bar', + data: { + labels: [ + t('serverinfo', 'Users'), + t('serverinfo', 'Groups'), + t('serverinfo', 'Links'), + t('serverinfo', 'Federated sent'), + t('serverinfo', 'Federated received') + ], + datasets: [{ + label: " ", + data: shares_data, + backgroundColor: [ + '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, 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 + } + }] + } + } }); } @@ -200,44 +200,44 @@ var ctx = document.getElementById("activeuserscanvas"); activeusersChart = new Chart(ctx, { - type: 'line', - data: { - labels: [ - t('serverinfo', 'Last 24 hours'), - t('serverinfo', 'Last 1 hour'), - t('serverinfo', 'Last 5 mins') - ], - datasets: [{ - 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, - lineTension: 0 - }] - }, - options: { - legend: { display:false }, - scales: { - yAxes: [{ - ticks: { - min: 0, - stepSize: stepSize - } - }] - } - } + type: 'line', + data: { + labels: [ + t('serverinfo', 'Last 24 hours'), + t('serverinfo', 'Last 1 hour'), + t('serverinfo', 'Last 5 mins') + ], + datasets: [{ + 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, + lineTension: 0 + }] + }, + options: { + legend: { display:false }, + scales: { + yAxes: [{ + ticks: { + min: 0, + stepSize: stepSize + } + }] + } + } }); } } From d6bd35df24e42a95648f3992365edec500d71fff Mon Sep 17 00:00:00 2001 From: Patrik Kernstock Date: Thu, 19 Jul 2018 16:16:54 +0200 Subject: [PATCH 7/7] Fixed width of input field on smaller screens Signed-off-by: Patrik Kernstock --- css/style.css | 5 +++++ templates/settings-admin.php | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 85bde668..b2aaefc2 100644 --- a/css/style.css +++ b/css/style.css @@ -13,3 +13,8 @@ #ocsEndPoint { margin-bottom: 10px; } + +#monitoring-endpoint-url { + width: 80%; + max-width: 415px; +} \ No newline at end of file diff --git a/templates/settings-admin.php b/templates/settings-admin.php index 9dd975b4..efca313d 100644 --- a/templates/settings-admin.php +++ b/templates/settings-admin.php @@ -74,7 +74,7 @@ t('You can connect an external monitoring tool by using this end point:')); ?>

- +