diff options
author | Kevin Pfeifer <kevin.pfeifer@sunlime.at> | 2019-12-19 21:46:21 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2020-03-18 15:19:07 +0300 |
commit | aad42e4a3ab66d06f25598b203e558ed412d45fe (patch) | |
tree | 2034d69330a1fc181fc0b065d0f4d8d803355479 | |
parent | b609cc7897f29666ef37744b10bb26b0f2d903ec (diff) |
reseted fork to upstream/master and applied patch gracefully provided by kesselb
Signed-off-by: Kevin Pfeifer <kevin.pfeifer@sunlime.at>
-rw-r--r-- | .gitignore | 3 | ||||
-rw-r--r-- | css/style.css | 257 | ||||
-rw-r--r-- | img/folder.svg | 5 | ||||
-rw-r--r-- | img/user.svg | 14 | ||||
-rw-r--r-- | js/script.js | 297 | ||||
-rw-r--r-- | templates/settings-admin.php | 563 |
6 files changed, 692 insertions, 447 deletions
@@ -1,2 +1,3 @@ *~ -\#*
\ No newline at end of file +\#* +.idea diff --git a/css/style.css b/css/style.css index 9fbad5d..385e134 100644 --- a/css/style.css +++ b/css/style.css @@ -1,75 +1,97 @@ -.barchart { - max-width: 200px; - max-height: 350px; +.server-info-wrapper { + max-width: 100vw; } -.clipboardButton { - display: inline-block; - position: relative; - top: 2px; - margin-left: 5px; +.table-wrapper { + overflow-x: auto; +} + +.server-infos-table { + margin-bottom: 25px; +} + +.server-infos-table td:first-child { + width: 120px; } -#ocsEndPoint { - margin-bottom: 10px; +.monitoring-wrapper { + display: -webkit-flex; + display: flex; } -#monitoring-endpoint-url { - width: 80%; - max-width: 415px; +.monitoring-wrapper > input { + flex: 1 0 auto; } .rambox { - padding: 0px; - margin: 0px; - height: 10px; - width: 10px; - background-color: #555; - border-radius: 20%; + height: 10px; + width: 10px; + background-color: #555; } .swapbox { - height: 10px; - width: 10px; - background-color: #222; - border-radius: 20%; + height: 10px; + width: 10px; + background-color: #222; } .info { font-weight: bold; - text-color: #777777; + color: #777; } .smallinfo { - color: #888888; + color: #888; font-size: 11px; } .infobox { - width: 400px; - border: 1px solid #DDDDDD; - margin: 10px 0px 20px 0px; + display: flex; + flex-wrap: nowrap; + align-items: center; + + border: 1px solid #ddd; padding: 15px; - color: #555555; - background-color: #F9F9F9; + margin: 15px 0; + color: #555; + background-color: #f9f9f9; border-radius: 6px; - box-shadow: 1px 1px 9px 1px #EEEEEE; + box-shadow: 1px 1px 9px 1px #eee; } -.infobox h3 { - color: #555555; - font-size: 22px; - font-weight: bold; - padding: 5px 0px 10px 0px; - margin: 0px; +.diskchart-container { + width: 100px; + border: 1px black; +} + +@media only screen and (max-width: 768px){ + .infobox { + display: block; + text-align: center; + } + .diskchart-container { + margin: 0 auto; + } +} + +.diskinfo-container { + flex: 1 0 auto; } .infobox h2 { - color: #555555; + color: #555; font-size: 18px; font-weight: bold; - padding: 5px 5px 5px 5px; - margin: 0px; + padding: 5px; + margin: 0; +} + +.infobox h3 { + color: #555; + font-size: 22px; + font-weight: bold; + padding: 5px 0 10px 0; + margin: 0; } .infoicon { @@ -79,45 +101,142 @@ } .chart-container { - height:300px; - width: 800px; - margin: 5px 10px 5px 5px; + position: relative; + margin: 10px; } -.diskchart-container { - position: static; +.clipboardButton { display: inline-block; - height:130px; - width:130px; - float:left; - border: 1px black; - margin: 5px 10px 5px 5px; + position: relative; + top: 2px; + margin-left: 5px; +} + +/* GRID SYSTEM */ + +.row { + display: -webkit-flex; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-left: -15px; + margin-right: -15px; +} + +.col { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + padding-left: 15px; + padding-right: 15px; +} + +.col-1 { + flex-basis: 8.333%; + max-width: 8.333%; + min-width: 8.333%; +} + +.col-2 { + flex-basis: 16.666%; + max-width: 16.666%; + min-width: 16.666%; +} + +.col-3 { + flex-basis: 25%; + max-width: 25%; + min-width: 25%; +} + +.col-4 { + flex-basis: 33.333%; + max-width: 33.333%; + min-width: 33.333%; +} + +.col-5 { + flex-basis: 41.666%; + max-width: 41.666%; + min-width: 41.666%; +} + +.col-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; +} + +.col-7 { + flex-basis: 58.333%; + max-width: 58.333%; + min-width: 58.333%; +} + +.col-8 { + flex-basis: 66.666%; + max-width: 66.666%; + min-width: 66.666%; } -.wrapper { - overflow:hidden; +.col-9 { + flex-basis: 75%; + max-width: 75%; + min-width: 75%; } -.wrapper div { - min-height: 100px; - padding: 0px; +.col-10 { + flex-basis: 83.333%; + max-width: 83.333%; + min-width: 83.333%; } -#one { - float:left; - width:440px; - margin-right: 10px; + +.col-11 { + flex-basis: 91.666%; + max-width: 91.666%; + min-width: 91.666%; } -#two { - overflow:hidden; - width:440px; - min-height:100px; +.col-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; } -@media screen and (max-width: 1000px) { - #one { - float: none; - margin-right:0; - width:auto; - } + +@media only screen and (max-width: 1200px) { + .col-xl-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } +} + +@media only screen and (max-width: 1024px) { + .col-l-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } + + .col-l-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; + } +} + +@media only screen and (max-width: 768px) { + .col-m-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } + + .col-m-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; + } } diff --git a/img/folder.svg b/img/folder.svg new file mode 100644 index 0000000..8a82c9a --- /dev/null +++ b/img/folder.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> +<g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M582.5,3707.6c-126.9-26.9-273.1-115.4-353.8-217.3C88.3,3311.4,97.9,3563.4,101.8-51.9l5.8-3249.9l44.2-63.5c25-34.6,73.1-76.9,105.8-96.2c57.7-30.8,296.1-32.7,3849.8-38.5c2084.5-3.8,3834.5,0,3892.1,5.8c84.6,11.5,117.3,26.9,176.9,82.7c67.3,67.3,125,213.5,901.9,2290.3C9805.2,819.2,9909,1107.7,9899.4,1175c-11.6,84.6-55.8,153.8-136.6,213.5c-50,38.5-80.8,40.4-773,46.2l-719.2,5.8v371.1v371.1l-57.7,117.3c-63.4,125-146.1,209.6-275,276.9l-80.8,44.2l-2223,5.8l-2224.9,3.9l-7.7,323.1c-5.8,284.6-11.5,330.8-48.1,407.7c-71.1,142.3-151.9,225-290.4,292.3l-128.8,63.5l-1134.6,3.9C1176.7,3723,628.7,3715.3,582.5,3707.6z M2809.3,2794.2c9.6-305.8,13.5-332.7,61.5-425c61.5-115.4,178.8-226.9,301.9-284.6l88.5-40.4l2207.6-5.8l2205.7-3.8v-298.1v-298.1h-2846c-3130.6,0-2951.8,5.8-3038.3-115.4c-19.2-26.9-271.1-678.8-559.6-1444.2C944-886.4,705.6-1517.2,701.7-1521c-3.8-3.8-7.7,1040.3-7.7,2321v2330.7l1053.8-3.8l1051.9-5.8L2809.3,2794.2z M9174.4,838.5c0-3.8-315.4-844.2-700-1871.1l-699.9-1865.3l-3472.9-3.8c-1909.5,0-3472.9,0-3472.9,1.9c0,3.8,1323,3536.4,1382.6,3690.2l21.2,51.9h3471C7613,842.3,9174.4,840.4,9174.4,838.5z"/></g></g> +</svg> diff --git a/img/user.svg b/img/user.svg new file mode 100644 index 0000000..fc191da --- /dev/null +++ b/img/user.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" + y="0px" + viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> +<g> + <g> + <path d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 + C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 + c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 + h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 + c59.551,0,108,48.448,108,108S315.551,256,256,256z"/> + </g> +</g> +</svg> diff --git a/js/script.js b/js/script.js index 6aad672..2cd4620 100644 --- a/js/script.js +++ b/js/script.js @@ -29,15 +29,15 @@ sharesChart; $(document).ready(function () { - var x = document.getElementById('rambox'); - x.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'; + var rambox = document.getElementById('rambox'); + rambox.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'; - var x = document.getElementById('swapbox'); - x.style.backgroundColor = 'rgba(100, 100, 100, 0.8)'; + var swapbox = document.getElementById('swapbox'); + swapbox.style.backgroundColor = 'rgba(100, 100, 100, 0.8)'; - resizeSystemCharts(); - updateActiveUsersStatistics(); - updateShareStatistics(); + var updateTimer = setInterval(updateInfo, 300); + + initDiskCharts(); setHumanReadableSizeToElement("databaseSize"); setHumanReadableSizeToElement("phpMemLimit"); @@ -46,7 +46,7 @@ $('#ocsEndPoint span.icon-info').tooltip({placement: 'top'}); initMonitoringLinkToClipboard(); - $("#monitoring-endpoint-url").on('click', function() { + $("#monitoring-endpoint-url").on('click', function () { $(this).select(); }); @@ -64,18 +64,53 @@ setTimeout(updateInfo, 0) }); + $(window).load(function(){ + resizeSystemCharts(); + }); + $(window).resize(function () { resizeSystemCharts(); }); - function updateCPUStatistics (cpuload) { + /** + * Reset all canvas widths on window resize so canvas is responsive + */ + function resizeSystemCharts() { + var cpu_canvas = $("#cpuloadcanvas"), + cpu_canvas_width = cpu_canvas.parents('.infobox').width() - 30, + mem_canvas = $("#memorycanvas"), + mem_canvas_width = mem_canvas.parents('.infobox').width() - 30, + active_users_canvas = $("#activeuserscanvas"), + active_users_canvas_width = active_users_canvas.parents('.infobox').width() - 30, + share_canvas = $("#sharecanvas"), + share_canvas_width = share_canvas.parents('.infobox').width() - 30, + current_vw = $(window).width(); + + // We have to set css width AND attribute width + cpu_canvas.width(cpu_canvas_width); + cpu_canvas.attr('width', cpu_canvas_width); + mem_canvas.width(mem_canvas_width); + mem_canvas.attr('width', mem_canvas_width); + active_users_canvas.width(active_users_canvas_width); + active_users_canvas.attr('width', active_users_canvas_width); + share_canvas.width(share_canvas_width); + share_canvas.attr('width', share_canvas_width); + + updateShareStatistics(); + updateActiveUsersStatistics(); + } + + function updateCPUStatistics(cpuload) { + var $cpu_footer_info = $('#cpuFooterInfo'); + var $cpu_load_canvas = $('#cpuloadcanvas'); + if (cpuload === 'N/A') { - $('#cpuFooterInfo').text(t('serverinfo', 'CPU info not available')); - $('#cpuloadcanvas').addClass('hidden'); + $cpu_footer_info.text(t('serverinfo', 'CPU info not available')); + $cpu_load_canvas.addClass('hidden'); return; - } else if ($("#cpuloadcanvas").hasClass('hidden')) { - $("#cpuloadcanvas").removeClass('hidden'); + } else if ($cpu_load_canvas.hasClass('hidden')) { + $cpu_load_canvas.removeClass('hidden'); } var cpu1 = cpuload[0], @@ -84,29 +119,37 @@ if (typeof cpuLoadChart === 'undefined') { cpuLoadChart = new SmoothieChart( - { - millisPerPixel: 100, - minValue: 0, - grid: { fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent' }, - labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 } - }); + { + millisPerPixel: 100, + minValue: 0, + grid: {fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent'}, + labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12}, + responsive: true + }); cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/); cpuLoadLine = new TimeSeries(); - cpuLoadChart.addTimeSeries(cpuLoadLine, { lineWidth: 1, strokeStyle: 'rgb(180, 180, 180)', fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)' }); + cpuLoadChart.addTimeSeries(cpuLoadLine, { + lineWidth: 1, + strokeStyle: 'rgb(180, 180, 180)', + fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)' + }); } - $('#cpuFooterInfo').text(t('serverinfo', 'Load average')+": "+cpu1+" ("+t('serverinfo', 'Last minute')+")"); + $cpu_footer_info.text(t('serverinfo', 'Load average') + ": " + cpu1 + " (" + t('serverinfo', 'Last minute') + ")"); cpuLoadLine.append(new Date().getTime(), cpu1); } - function updateMemoryStatistics (memTotal, memFree, swapTotal, swapFree) { + function updateMemoryStatistics(memTotal, memFree, swapTotal, swapFree) { + var $mem_footer_info = $('#memFooterInfo'); + var $memory_canvas = $('#memorycanvas'); + if (memTotal === 'N/A' || memFree === 'N/A') { - $('#memFooterInfo').text(t('serverinfo', 'Memory info not available')); - $('#memorycanvas').addClass('hidden'); + $mem_footer_info.text(t('serverinfo', 'Memory info not available')); + $memory_canvas.addClass('hidden'); return; - } else if ($("#memorycanvas").hasClass('hidden')) { - $("#memorycanvas").removeClass('hidden'); + } else if ($memory_canvas.hasClass('hidden')) { + $memory_canvas.removeClass('hidden'); } var memTotalBytes = memTotal * 1024, @@ -119,38 +162,55 @@ swapTotalGB = swapTotal / (1024 * 1024), swapUsageGB = (swapTotal - swapFree) / (1024 * 1024); + var maxValueOfChart = swapTotalGB; if (memTotalGB > swapTotalGB) { - var maxValueOfChart = memTotalGB; - } else { - var maxValueOfChart = swapTotalGB; + maxValueOfChart = memTotalGB; } if (typeof memoryUsageChart === 'undefined') { memoryUsageChart = new SmoothieChart( - { - millisPerPixel: 100, - maxValue: maxValueOfChart, - minValue: 0, - grid: { fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent' }, - labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 } - }); + { + millisPerPixel: 100, + 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 + }); memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/); memoryUsageLine = new TimeSeries(); - memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:1, strokeStyle:'rgb(180, 180, 180)', fillStyle:OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'}); + memoryUsageChart.addTimeSeries(memoryUsageLine, { + lineWidth: 1, + strokeStyle: 'rgb(180, 180, 180)', + fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)' + }); swapUsageLine = new TimeSeries(); - memoryUsageChart.addTimeSeries(swapUsageLine, {lineWidth:1, strokeStyle:'rgb(100, 100, 100)', fillStyle:'rgba(100, 100, 100, 0.2)'}); + memoryUsageChart.addTimeSeries(swapUsageLine, { + lineWidth: 1, + strokeStyle: 'rgb(100, 100, 100)', + fillStyle: 'rgba(100, 100, 100, 0.2)' + }); } - $('#memFooterInfo').text("RAM: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(memTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(memUsageBytes)); + $mem_footer_info + .text("RAM: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(memTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(memUsageBytes)); memoryUsageLine.append(new Date().getTime(), memUsageGB); - $('#swapFooterInfo').text("SWAP: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(swapTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(swapUsageBytes)); + $('#swapFooterInfo') + .text("SWAP: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(swapTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(swapUsageBytes)); swapUsageLine.append(new Date().getTime(), swapUsageGB); } function updateShareStatistics () { var shares = $('#sharecanvas').data('shares'), - shares_data = [shares.num_shares_user, shares.num_shares_groups, shares.num_shares_link, shares.num_shares_mail, shares.num_fed_shares_sent, shares.num_fed_shares_received, shares.num_shares_room], + shares_data = [shares.num_shares_user, + shares.num_shares_groups, + shares.num_shares_link, + shares.num_shares_mail, + shares.num_fed_shares_sent, + shares.num_fed_shares_received, + shares.num_shares_room + ], stepSize = 0; if (Math.max.apply(null, shares_data) < 10) { @@ -197,7 +257,7 @@ }] }, options: { - legend: { display:false }, + legend: {display: false}, scales: { yAxes: [{ ticks: { @@ -213,7 +273,7 @@ sharesChart.update(); } - function updateActiveUsersStatistics () { + function updateActiveUsersStatistics() { var activeUsers = $('#activeuserscanvas').data('users'), activeUsers_data = [activeUsers.last24hours, activeUsers.last1hour, activeUsers.last5minutes], @@ -238,7 +298,7 @@ label: " ", data: activeUsers_data, fill: false, - borderColor: [ 'rgba(0, 0, 255, 1)' ], + borderColor: ['rgba(0, 0, 255, 1)'], borderWidth: 1, borderDashOffset: 0.0, borderJoinStyle: 'miter', @@ -277,35 +337,6 @@ } } - function resizeSystemCharts () { - - var cpu_canvas = document.getElementById("cpuloadcanvas"), - mem_canvas = document.getElementById("memorycanvas"); - activeuserscanvas = document.getElementById("activeuserscanvas"); - sharecanvas = document.getElementById("sharecanvas"); - - var newWidth = $('#cpuSection').width(); - newHeight = newWidth / 4 - - if (newWidth <= 100) newWidth = 100; - if (newWidth >= 500) newWidth = 500; - if (newHeight > 150) newHeight = 150; - - - cpuloadcanvas.width = newWidth; - cpuloadcanvas.height = newHeight; - - mem_canvas.width = newWidth; - mem_canvas.height = newHeight; - - activeuserscanvas.width = 600; - activeuserscanvas.height = 500; - - sharecanvas.width = 800; - - - } - function initMonitoringLinkToClipboard() { var monAPIBox = $("#ocsEndPoint"); /* reused from settings/js/authtoken_view.js */ @@ -350,72 +381,70 @@ }); } -})(jQuery, OC); - - -$(document).ready(function(){ - $.ajax({ - url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json', - method: "GET", - success: function(response) { - var diskdata = response.ocs.data; - var x = document.querySelectorAll(".DiskChart"); - var i; - for (i = 0; i < x.length; i++) { - var chartdata = { - labels: ["Used GB", "Available GB"], - datasets : [ - { - backgroundColor: [ - OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)', - 'rgb(249, 249, 249)', - ], - borderWidth: 0, - data: diskdata[i] - } - ] - }; - var ctx = x[i]; - var barGraph = new Chart(ctx, { - type: 'doughnut', - data: chartdata, - options: { - legend: { - display: false, - }, - tooltips: { - enabled: true, - }, - cutoutPercentage: 60 - } - }); - } - }, - error: function(data) { - console.log(data); - } - }); - - var interval = 1000; // 1000 = 1 second, 3000 = 3 seconds - function doAjax() { + function initDiskCharts() { $.ajax({ - url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json', + url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json', method: "GET", - success: function(response) { - var data = response.ocs.data; - document.getElementById("servertime").innerHTML = data.servertime; - document.getElementById("uptime").innerHTML = data.uptime; - document.getElementById("timeservers").innerHTML = data.timeservers; + success: function (response) { + var diskdata = response.ocs.data; + var diskcharts = document.querySelectorAll(".DiskChart"); + var i; + for (i = 0; i < diskcharts.length; i++) { + var chartdata = { + labels: ["Used GB", "Available GB"], + datasets: [ + { + backgroundColor: [ + OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)', + 'rgb(200, 200, 200)', + ], + borderWidth: 0, + data: diskdata[i] + } + ] + }; + var ctx = diskcharts[i]; + var barGraph = new Chart(ctx, { + type: 'doughnut', + data: chartdata, + options: { + legend: { + display: false, + }, + tooltips: { + enabled: true, + }, + cutoutPercentage: 60, + } + }); + } }, - error: function(data) { + error: function (data) { console.log(data); - }, - complete: function (data) { - setTimeout(doAjax, interval); } }); - } - setTimeout(doAjax, interval); + var interval = 1000; // 1000 = 1 second, 3000 = 3 seconds + function doAjax() { + $.ajax({ + url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json', + method: "GET", + success: function (response) { + var data = response.ocs.data; + document.getElementById("servertime").innerHTML = data.servertime; + document.getElementById("uptime").innerHTML = data.uptime; + document.getElementById("timeservers").innerHTML = data.timeservers; + }, + error: function (data) { + console.log(data); + }, + complete: function (data) { + setTimeout(doAjax, interval); + } + }); + } + + setTimeout(doAjax, interval); + } -}); +})(jQuery, OC); diff --git a/templates/settings-admin.php b/templates/settings-admin.php index 52b4b99..7bb1c4a 100644 --- a/templates/settings-admin.php +++ b/templates/settings-admin.php @@ -1,279 +1,356 @@ <?php -/** - * @copyright Copyright (c) 2016 Bjoern Schiessle <bjoern@schiessle.org> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ + /** + * @copyright Copyright (c) 2016 Bjoern Schiessle <bjoern@schiessle.org> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ -script('serverinfo', 'script'); -script('serverinfo', 'smoothie'); -script('serverinfo', 'Chart.min'); + script('serverinfo', 'script'); + script('serverinfo', 'smoothie'); + script('serverinfo', 'Chart.min'); -style('serverinfo', 'style'); + style('serverinfo', 'style'); -function FormatBytes($byte) { - $unim = array('B', 'KB', 'MB', 'GB', 'TB', 'PB'); - $count = 1; - while ($byte >= 1024) { - $count++; - $byte = $byte / 1024; + function FormatBytes($byte) { + $unim = array('B', 'KB', 'MB', 'GB', 'TB', 'PB'); + $count = 1; + while ($byte >= 1024) { + $count++; + $byte = $byte / 1024; + } + + return number_format($byte, 2, '.', '.') . ' ' . $unim[$count]; } - return number_format($byte, 2, '.', '.') . ' ' . $unim[$count]; -} ?> -<!-- SERVER INFOS --> -<div class="section"> - <h2> - <img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg'));?>"> - <?php p($_['hostname']);?> - </h2> - - <p> - <?php p($l->t('Operating System'));?>: - <span class="info"><?php p($_['osname']);?></span> - </p> - <p> - <?php p($l->t('CPU'));?>: - <span class="info"><?php p($_['cpu']);?></span> - </p> - <p> - <?php p($l->t('Memory'));?>: - <span class="info"><?php p($_['memory']);?></span> - </p> - <p> - <?php p($l->t('Server time'));?>: - <span class="info" id="servertime"></span> - </p> - <p> - <?php p($l->t('Uptime'));?>: - <span class="info" id="uptime"></span> - </p> - <p> - <?php p($l->t('Time Servers'));?>: - <span class="info" id="timeservers"></span> - </p> - - <div class="wrapper"> +<div class="server-info-wrapper"> - <div id="one"> - <div class="infobox" id="cpuSection"> - <h2><?php p($l->t('Load'));?></h2> - <canvas id="cpuloadcanvas" width="100" height="150"></canvas> + <!-- SERVER INFOS --> + <div class="section server-infos"> + <div class="row"> + <div class="col col-12"> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg')); ?>"> + <?php p($_['hostname']); ?> + </h2> + <div class="table-wrapper"> + <table class="server-infos-table"> + <thead> + </thead> + <tbody> + <tr> + <td><?php p($l->t('Operating System')); ?>:</td> + <td><?php p($_['osname']); ?></td> + </tr> + <tr> + <td><?php p($l->t('CPU')); ?>:</td> + <td> + <?php + $cpu_name_output = []; + $splitted_cpu_name = explode(PHP_EOL, $_['cpu']); + if (sizeof($splitted_cpu_name) > 0): + foreach ($splitted_cpu_name as $cpu_name_part): + if (!in_array($cpu_name_part, $cpu_name_output)): + if (!is_numeric($cpu_name_part)): + $cpu_name_output[] = $cpu_name_part; + endif; + endif; + endforeach; + endif; + p(implode('', $cpu_name_output)); + ?> + </td> + </tr> + <tr> + <td><?php p($l->t('Memory')); ?>:</td> + <td><?php p($_['memory']); ?></td> + </tr> + <tr> + <td><?php p($l->t('Server time')); ?>:</td> + <td><span class="info" id="servertime"></span></td> + </tr> + <tr> + <td><?php p($l->t('Uptime')); ?>:</td> + <td><span class="info" id="uptime"></span></td> + </tr> + <tr> + <td><?php p($l->t('Time Servers')); ?>:</td> + <td><span class="info" id="timeservers"></span></td> + </tr> + </tbody> + </table> + </div> </div> - <p><em id="cpuFooterInfo"></em></p> - </div> - <div id="two"> - <div class="infobox"> - <h2><?php p($l->t('Memory'));?></h2> - <canvas id="memorycanvas" width="300" height="150"></canvas> + <div class="col col-6 col-l-12"> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg')); ?>"> + <?php p($l->t('Load')); ?> + </h2> + <div class="infobox" id="cpuSection"> + <div class="cpu-wrapper"> + <canvas id="cpuloadcanvas" style="width:100%; height:200px" width="600" height="200"></canvas> + </div> + </div> + <p><em id="cpuFooterInfo"></em></p> </div> - <p><span class="rambox" id="rambox"> </span> <em id="memFooterInfo"></em></p> - <p><span class="swapbox" id="swapbox"> </span> <em id="swapFooterInfo"></em></p> - </div> - - </div> -</div> -<!-- DISK STATUS --> -<div class="section"> - <h2> - <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>"> - <?php p($l->t('Disk'));?> - </h2> - <p> - <?php foreach ($_['diskinfo'] as $disk) {?> - - <div class="infobox"> - <div class="diskchart-container"> - <canvas id="DiskChart" class="DiskChart" width="50" height="50"></canvas> + <div class="col col-6 col-l-12"> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>"> + <?php p($l->t('Memory')); ?> + </h2> + <div class="infobox"> + <div class="memory-wrapper"> + <canvas id="memorycanvas" style="width:100%; height:200px" width="600" height="200"></canvas> + </div> </div> - - <h3><?php p(basename($disk['device']));?></h3> - <p> - <?php p($l->t('Mount'));?> : - <span class="info"><?php p($disk['mount']);?></span> - </p> - <p> - <?php p($l->t('Filesystem'));?> : - <span class="info"><?php p($disk['fs']);?></span> - </p> - <p> - <?php p($l->t('Size'));?> : - <span class="info"><?php p(FormatBytes($disk['used'] + $disk['available']));?></span> - </p> - <p> - <?php p($l->t('Available'));?> : - <span class="info"><?php p(FormatBytes($disk['available']));?></span> - </p> - <p> - <?php p($l->t('Used'));?> : - <span class="info"><?php p($disk['percent']);?></span> - </p> + <p><span class="rambox" id="rambox"> </span> <em id="memFooterInfo"></em></p> + <p><span class="swapbox" id="swapbox"> </span> <em id="swapFooterInfo"></em></p> </div> - <?php }?> + </div> + </div> - <div class="smallinfo"> <?php p($l->t('You will get a notification once one of your disks is nearly full.'));?></div> + <!-- DISK STATUS --> + <div class="section disk-status"> + <div class="row"> + <div class="col col-12"> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>"> + <?php p($l->t('Disk')); ?> + </h2> + </div> + <?php foreach ($_['diskinfo'] as $disk): ?> + <div class="col col-4 col-xl-6 col-m-12"> + <div class="infobox"> + <div class="diskchart-container"> + <canvas id="DiskChart" class="DiskChart" style="width:100%; height:200px" width="600" + height="200"></canvas> + </div> + <div class="diskinfo-container"> + <h3><?php p(basename($disk['device'])); ?></h3> + <?php p($l->t('Mount')); ?> : + <span class="info"><?php p($disk['mount']); ?></span><br> + <?php p($l->t('Filesystem')); ?> : + <span class="info"><?php p($disk['fs']); ?></span><br> + <?php p($l->t('Size')); ?> : + <span class="info"><?php p(FormatBytes($disk['used'] + $disk['available'])); ?></span><br> + <?php p($l->t('Available')); ?> : + <span class="info"><?php p(FormatBytes($disk['available'])); ?></span><br> + <?php p($l->t('Used')); ?> : + <span class="info"><?php p($disk['percent']); ?></span><br> + </div> + </div> + </div> + <?php endforeach; ?> + </div> - <p><?php p($l->t('Files:'));?> <em id="numFilesStorage"><?php p($_['storage']['num_files']);?></em></p> - <p><?php p($l->t('Storages:'));?> <em id="numFilesStorages"><?php p($_['storage']['num_storages']);?></em></p> - <p><?php p($l->t('Free Space:'));?> <em id="systemDiskFreeSpace"><?php p($_['system']['freespace']);?></em></p> - </p> -</div> + <div class="smallinfo"> + <?php p($l->t('You will get a notification once one of your disks is nearly full.')); ?> + </div> -<!-- NETWORK --> -<div class="section"> - <h2> - <img class="infoicon" src="<?php p(image_path('serverinfo', 'sort.svg'));?>"> - <?php p($l->t('Network'));?> - </h2> - <p> - <p> - <?php p($l->t('Hostname'));?>: - <span class="info"><?php p($_['networkinfo']['hostname']);?></span> + <p><?php p($l->t('Files:')); ?> <em id="numFilesStorage"><?php p($_['storage']['num_files']); ?></em></p> + <p><?php p($l->t('Storages:')); ?> <em id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></em></p> + <p><?php p($l->t('Free Space:')); ?> <em id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></em> </p> - <p> - <?php p($l->t('DNS'));?>: - <span class="info"><?php p($_['networkinfo']['dns']);?></span> - </p> - <p> - <?php p($l->t('Gateway'));?>: - <span class="info"><?php p($_['networkinfo']['gateway']);?></span> - </p> - <p> - <?php foreach ($_['networkinterfaces'] as $interface) {?> + </div> - <div class="infobox"> - <h3><?php p($interface['interface'])?></h3> - <p> - <?php p($l->t('Status'));?>: - <span class="info"><?php p($interface['status'])?></span> - </p> - <p> - <?php p($l->t('Speed'));?>: - <span class="info"><?php p($interface['speed'] . ' ' . $interface['duplex'])?></span> - </p> - <?php if (!empty($interface['mac'])) {?> - <p> - <?php p($l->t('MAC'));?>: - <span class="info"><?php p($interface['mac'])?></span> - </p> - <?php }?> - <p> - <?php p($l->t('IPv4'));?>: - <span class="info"><?php p($interface['ipv4'])?></span> - </p> - <p> - <?php p($l->t('IPv6'));?>: - <span class="info"><?php p($interface['ipv6'])?></span> - </p> + <!-- NETWORK --> + <div class="section network-infos"> + <div class="row"> + <div class="col col-12"> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'sort.svg')); ?>"> + <?php p($l->t('Network')); ?> + </h2> </div> - <?php }?> + <div class="col col-12"> + <?php p($l->t('Hostname')); ?>: + <span class="info"><?php p($_['networkinfo']['hostname']); ?></span> + </div> + <div class="col col-12"> + <?php p($l->t('DNS')); ?>: + <span class="info"><?php p($_['networkinfo']['dns']); ?></span> + </div> + <div class="col col-12"> + <?php p($l->t('Gateway')); ?>: + <span class="info"><?php p($_['networkinfo']['gateway']); ?></span> + </div> + <div class="col col-12"> + <div class="row"> + <?php foreach ($_['networkinterfaces'] as $interface): ?> - </p> -</div> + <div class="col col-4 col-l-6 col-m-12"> + <div class="infobox"> + <div class="interface-wrapper"> + <h3><?php p($interface['interface']) ?></h3> + <?php p($l->t('Status')); ?>: + <span class="info"><?php p($interface['status']) ?></span><br> + <?php p($l->t('Speed')); ?>: + <span + class="info"><?php p($interface['speed'] . ' ' . $interface['duplex']) ?></span><br> + <?php if (!empty($interface['mac'])): ?> + <?php p($l->t('MAC')); ?>: + <span class="info"><?php p($interface['mac']) ?></span><br> + <?php endif; ?> + <?php p($l->t('IPv4')); ?>: + <span class="info"><?php p($interface['ipv4']) ?></span><br> + <?php p($l->t('IPv6')); ?>: + <span class="info"><?php p($interface['ipv6']) ?></span> + </div> + </div> + </div> -<!-- ACTIVE USERS --> -<div class="section" id="activeUsersSection"> - <div class="infobox"> - <h2><?php p($l->t('Active users'));?></h2> - <br> - <div class="chart-container"> - <canvas width="400" height="250" data-users="<?php p(json_encode($_['activeUsers']))?>" class="barchart" id="activeuserscanvas"></canvas> + <?php endforeach; ?> + </div> + </div> </div> - <p> - <?php p($l->t('Total users:'));?> - <em id="numUsersStorage"><?php p($_['storage']['num_users']);?></em> - </p> </div> -</div> -<!-- SHARES --> -<div class="section" id="sharesSection"> - <div class="infobox"> - <h2><?php p($l->t('Shares'));?></h2> - <br> - <div class="chart-container"> - <canvas data-shares="<?php p(json_encode($_['shares']))?>" class="barchart" id="sharecanvas"></canvas> + <!-- ACTIVE USER & SHARES--> + <div class="section active-users-shares"> + <div class="row"> + + <div class="col col-6 col-m-12"> + <!-- ACTIVE USERS --> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'user.svg')); ?>"> + <?php p($l->t('Active users')); ?> + </h2> + <div class="infobox"> + <div class="active-users-wrapper"> + <br> + <div class="chart-container"> + <canvas data-users="<?php p(json_encode($_['activeUsers'])) ?>" + class="barchart" + id="activeuserscanvas" + style="width:100%; height:200px" + width="300" height="300" + ></canvas> + </div> + <p> + <?php p($l->t('Total users:')); ?> + <em id="numUsersStorage"><?php p($_['storage']['num_users']); ?></em> + </p> + </div> + </div> + </div> + + <div class="col col-6 col-m-12"> + <!-- SHARES --> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'folder.svg')); ?>"> + <?php p($l->t('Shares')); ?> + </h2> + <div class="infobox"> + <div class="shares-wrapper"> + <br> + <div class="chart-container"> + <canvas data-shares="<?php p(json_encode($_['shares'])) ?>" + class="barchart" + id="sharecanvas" + style="width:100%; height:200px" + width="300" height="300" + ></canvas> + </div> + </div> + </div> + </div> </div> </div> -</div> -<!-- PHPINFO --> -<div class="section" id="phpSection"> - <h2> - <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>"> - <?php p($l->t('PHP'));?> - </h2> - <div class="infobox"> - <p> - <?php p($l->t('Version:'));?> - <em id="phpVersion"><?php p($_['php']['version']);?></em> - </p> - <p> - <?php p($l->t('Memory Limit:'));?> - <em id="phpMemLimit"><?php p($_['php']['memory_limit']);?></em> - </p> - <p> - <?php p($l->t('Max Execution Time:'));?> - <em id="phpMaxExecTime"><?php p($_['php']['max_execution_time']);?></em> - </p> - <p> - <?php p($l->t('Upload max size:'));?> - <em id="phpUploadMaxSize"><?php p($_['php']['upload_max_filesize']);?></em> - </p> - </div> -</div> + <!-- PHP, DATABASE --> + <div class="section php-database"> + <div class="row"> + <div class="col col-6 col-m-12"> + <!-- PHPINFO --> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>"> + <?php p($l->t('PHP')); ?> + </h2> + <div class="infobox"> + <div class="phpinfo-wrapper"> + <p> + <?php p($l->t('Version:')); ?> + <em id="phpVersion"><?php p($_['php']['version']); ?></em> + </p> + <p> + <?php p($l->t('Memory Limit:')); ?> + <em id="phpMemLimit"><?php p($_['php']['memory_limit']); ?></em> + </p> + <p> + <?php p($l->t('Max Execution Time:')); ?> + <em id="phpMaxExecTime"><?php p($_['php']['max_execution_time']); ?></em> + </p> + <p> + <?php p($l->t('Upload max size:')); ?> + <em id="phpUploadMaxSize"><?php p($_['php']['upload_max_filesize']); ?></em> + </p> + </div> + </div> + </div> -<!-- DATABASE --> -<div class="section" id="databaseSection"> - <h2> - <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>"> - <?php p($l->t('Database'));?> - </h2> - <div class="infobox"> - <p> - <?php p($l->t('Type:'));?> - <em id="databaseType"><?php p($_['database']['type']);?></em> - </p> - <p> - <?php p($l->t('Version:'));?> - <em id="databaseVersion"><?php p($_['database']['version']);?></em> - </p> - <p> - <?php p($l->t('Size:'));?> - <em id="databaseSize"><?php p($_['database']['size']);?></em> - </p> + <div class="col col-6 col-m-12"> + <!-- DATABASE --> + <h2> + <img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>"> + <?php p($l->t('Database')); ?> + </h2> + <div class="infobox"> + <div class="database-wrapper"> + <p> + <?php p($l->t('Type:')); ?> + <em id="databaseType"><?php p($_['database']['type']); ?></em> + </p> + <p> + <?php p($l->t('Version:')); ?> + <em id="databaseVersion"><?php p($_['database']['version']); ?></em> + </p> + <p> + <?php p($l->t('Size:')); ?> + <em id="databaseSize"><?php p($_['database']['size']); ?></em> + </p> + </div> + </div> + </div> + </div> </div> -</div> -<!-- OCS ENDPOINT --> -<div class="section" id="ocsEndPoint"> - <h2><?php p($l->t('External monitoring tool'));?></h2> - <p> - <?php p($l->t('You can connect an external monitoring tool by using this end point:'));?> - </p> - <div> - <input type="text" readonly="readonly" id="monitoring-endpoint-url" value="<?php echo p($_['ocs']); ?>" /> - <a class="clipboardButton icon icon-clippy" data-clipboard-target="#monitoring-endpoint-url"></a> - <span class="icon-info svg" title="" data-original-title="<?php p($l->t('Did you know?'));?> <?php p($l->t('Appending "?format=json" at the end of the URL gives you the result in JSON format!'));?>"></span> + <!-- EXTERNAL MONITORING--> + <div class="section monitoring"> + <div class="row"> + <div class="col col-6 col-m-12"> + <!-- OCS ENDPOINT --> + <h2><?php p($l->t('External monitoring tool')); ?></h2> + <p> + <?php p($l->t('You can connect an external monitoring tool by using this end point:')); ?> + </p> + <div class="monitoring-wrapper"> + <input type="text" readonly="readonly" id="monitoring-endpoint-url" + value="<?php echo p($_['ocs']); ?>"/> + <a class="clipboardButton icon icon-clippy" data-clipboard-target="#monitoring-endpoint-url"></a> + <span class="icon-info svg" title="" + data-original-title="<?php p($l->t('Did you know?')); ?> <?php p($l->t('Appending "?format=json" at the end of the URL gives you the result in JSON format!')); ?>"></span> + </div> + </div> + </div> </div> + </div> |