From 0671fe2688779ccc56e2b26d2bbc456ef8067b15 Mon Sep 17 00:00:00 2001 From: Jelmerro Date: Mon, 2 Jul 2018 20:08:39 +0200 Subject: [PATCH 1/2] reworked settings + require the components as modules + much cleaner core code --- README.md | 8 + app/css/sidebar.css | 26 +- app/index.html | 44 +- app/index.js | 5 +- app/js/app.js | 113 ---- app/js/core.js | 116 +++++ app/js/settings.js | 81 +++ app/js/util.js | 58 +++ .../general-settings/general-settings.html | 42 ++ .../general-settings/general-settings.js | 57 ++ .../graph-settings/graph-settings.html | 42 ++ .../graph-settings/graph-settings.js | 69 +++ components/dashboard/dashboard/dashboard.html | 7 +- components/dashboard/dashboard/dashboard.js | 102 +--- components/monitoring/cpu/cpu.html | 4 +- components/monitoring/cpu/cpu.js | 64 +-- components/monitoring/gpu/gpu.js | 20 +- components/monitoring/memory/memory.js | 37 +- components/monitoring/network/network.html | 9 +- components/monitoring/network/network.js | 43 +- components/monitoring/os/os.html | 4 +- components/monitoring/os/os.js | 25 +- components/monitoring/storage/storage.html | 11 +- components/monitoring/storage/storage.js | 26 +- package-lock.json | 493 ++++++++---------- package.json | 2 +- 26 files changed, 856 insertions(+), 652 deletions(-) delete mode 100644 app/js/app.js create mode 100644 app/js/core.js create mode 100644 app/js/settings.js create mode 100644 app/js/util.js create mode 100644 components/configuration/general-settings/general-settings.html create mode 100644 components/configuration/general-settings/general-settings.js create mode 100644 components/configuration/graph-settings/graph-settings.html create mode 100644 components/configuration/graph-settings/graph-settings.js diff --git a/README.md b/README.md index d8cdd32..71d174f 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,14 @@ npm run buildwin In the root of the project, we store the README and LICENSE, among the other files that you would expect there. We have an app directory containing the core application parts. Another important folder is the components folder, which stores all the different parts of the application. +### App + +Inside the app folder the container for all components is stored. It starts with the index.js file, which loads the index.html file. From there, all the stylesheets and scripts are loaded. The core components like the settings are also created and managed there. Inside the index.html the sidebar shows a list of all the components. This list will be used to start the components as described below. + +### Components + +The first function that is called is the init function. This generates the charts and other things that should be available at all times. Aside from that, each module has a refresh function, which is called once every half a second (can be changed in the settings). This updates the data inside the charts and other places. This is one of the reasons why all components are loaded on startup. All components will be updated on the background using this refresh function, but this functionality can be disabled in the settings. Lastly, each module has an activate function, which is called when the user switches to this component. This is for example used to update the subtitle. There is no hard-coded list of components, instead a list is generated based on the sidebar menu. From there all the init, refresh and activate functions will be called for each component when needed. Each component exports only these three functions, unless there is other interaction required (such as refresh buttons). + ## Style guide We try to follow these suggestions when writing code: diff --git a/app/css/sidebar.css b/app/css/sidebar.css index 09ad97d..8f5818b 100644 --- a/app/css/sidebar.css +++ b/app/css/sidebar.css @@ -1,6 +1,6 @@ /* * StatusPilatus: Monitor your PC like never before! -* Copyright (C) 2017 PilatusDevs +* Copyright (C) 2018 PilatusDevs * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -25,6 +25,7 @@ overflow-y: auto; background: #212529; -webkit-user-select: none; + color: #999; } /* Sidebar Styles */ @@ -37,6 +38,7 @@ padding: 0; list-style: none; font-size: 17px; + text-decoration: none; } .sidebar-nav li { @@ -44,10 +46,9 @@ line-height: 40px; } -.sidebar-nav li a { +.sidebar-nav li a:not(.active-tab) { display: block; - text-decoration: none; - color: #999999; + color: #999; } .sidebar-subitem li a { @@ -55,30 +56,22 @@ } .sidebar-nav li a:hover { - text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.2); + text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } -/*custom colours for sidebar items*/ +/* Custom colours for sidebar items */ #logo { width: 150px; height: 150px; } -#monitoring { - color: #999999; -} - -#dashboard.active-tab { - color: #fff; -} - #cpu.active-tab { color: #f38b4a; } @@ -103,7 +96,10 @@ color: #a4cc99; } -.active-tab { +.active-tab, .active-tab:active, .active-tab:focus { font-weight: bolder; background: #333; + color: #fff; + text-decoration: none; + display: block; } diff --git a/app/index.html b/app/index.html index 819f614..5735d79 100644 --- a/app/index.html +++ b/app/index.html @@ -20,14 +20,12 @@ StatusPilatus -
- - - +
  • + Configuration +
    • +
    +
  • + General Settings +
    • +
  • + Graph Settings +
    • +
    + +
    -
    @@ -73,35 +79,23 @@

    Dashboard

    -
    - -
    +
    - - - - - + - - - - - - - - - + + + + - diff --git a/app/index.js b/app/index.js index af79499..f631193 100644 --- a/app/index.js +++ b/app/index.js @@ -31,10 +31,7 @@ function createWindow () { minHeight: 600, minWidth: 800, show: false, - icon: path.join(__dirname, "img/logo.png"), - webPreferences: { - nodeIntegrationInWorker: true - } + icon: path.join(__dirname, "img/logo.png") }); win.maximize(); win.show(); diff --git a/app/js/app.js b/app/js/app.js deleted file mode 100644 index 8d44a01..0000000 --- a/app/js/app.js +++ /dev/null @@ -1,113 +0,0 @@ -/* -* StatusPilatus: Monitor your PC like never before! -* Copyright (C) 2018 PilatusDevs -* -* This program is free software: you can redistribute it and/or modify -* it under the terms of the GNU 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 General Public License for more details. -* -* You should have received a copy of the GNU General Public License -* along with this program. If not, see . -*/ -"use strict"; - -/* The following lines are for the global Charts settings. */ -Chart.defaults.global.animation = false; -Chart.defaults.global.animationSteps = 0; -Chart.defaults.global.elements.responsive = true; - -/* This variable is used in the loop */ -let functionName = "refreshDashboard"; - -/* include all the libraries */ -const si = require("systeminformation"); -const plistr = require("proglistr"); - -/* -* Boot all the core things of the app -*/ -function init() { - /* this is the start page */ - $("#frame").load("../components/dashboard/dashboard/dashboard.html", () => { - window.initDashboard(); - }); - $("#dashboard").addClass("active-tab"); - // set interval for loop() - setTimeout(loop, 500, ""); - - // Load the changePage for the listener - changePage(); -} - -/* -* On click on a href in the sidebar this switch statement -* will decide which page should be loaded or what other -* action should be executed -*/ -function changePage(){ - $('a[href="#tab"]').click(function() { - $('a[href="#tab"]').removeClass("active-tab"); - $(this).addClass("active-tab"); - $("#titles").removeClass(); - $("#titles").addClass($(this).text().toLowerCase()); - $("#dash-title").text($(this).text()); - //clear subtitle so it can be set in components init function - $("#subtitle").text(""); - - const layer = $(this).attr("data-layer"); - const folder = $(this).attr("data-folder"); - const name = $(this).attr("data-name"); - const path = `../components/${layer}/${folder}/${name}.html`; - console.log(path); - $("#frame").load(path, () => { - // Call the init function once so the function can set up the page (graphs etc..) - const initFunction = "init" + name.charAt(0).toUpperCase() + name.slice(1).toLowerCase(); - console.log(initFunction); - window[initFunction](); - - // Now set the functionName to loop - functionName = "refresh" + name.charAt(0).toUpperCase() + name.slice(1).toLowerCase(); - }); - }); -} - -/* -* Called every 500ms -*/ -function loop(args) { - window[functionName](); - setTimeout(loop, 500, ""); -} - -/* -* Used to go from kb to GB -*/ -function formatBytesToMb(bytes) { - return ((bytes / (1024*1024)).toFixed(2)); -} - -/* -* Used to go from kb to GB -*/ -const sizes = ["bytes", "KB", "MB", "GB", "TB"]; -function formatSize(bytes) { - const l = Math.min(sizes.length - 1, Math.log(bytes) / Math.LN2 / 10 | 0); - return [bytes / Math.pow(1024, l), sizes[l]]; -} - -/** -* Set the width of ALL the graphs -*/ -function graphWidth() { - return 60; -} - -$(() => { - init(); -}); diff --git a/app/js/core.js b/app/js/core.js new file mode 100644 index 0000000..bcda04c --- /dev/null +++ b/app/js/core.js @@ -0,0 +1,116 @@ +/* +* StatusPilatus: Monitor your PC like never before! +* Copyright (C) 2018 PilatusDevs +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU 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 General Public License for more details. +* +* You should have received a copy of the GNU General Public License +* along with this program. If not, see . +*/ +/* global Chart $ settings */ +"use strict"; + +/* Chart.js configurion options */ +if (settings.graphs.animations) { + Chart.defaults.global.animation = { + easing: "easeInOutCubic", + duration: 200, + }; +} else { + Chart.defaults.global.animation = false; +} +Chart.defaults.global.elements.responsive = true; + +/* Include all the libraries */ +const si = require("systeminformation"); +const plistr = require("proglistr"); + +// Store the component name of the visible page +// The refresh function will be called when background updates are disabled +// Otherwise all refresh methods will be called along with this one +let currentComponentName = "dashboard"; + +// All the components are stored here. +// This will be filled by the init function below. +// Each component has an init refresh and activate function +const components = {}; + +/* +* Boot all the core things of the app +*/ +function init() { + // Fill the components + $('a[href="#tab"]').each((index, element) => { + const layer = $(element).attr("data-layer"); + const folder = $(element).attr("data-folder"); + const name = $(element).attr("data-name"); + const htmlPath = `../components/${layer}/${folder}/${name}.html`; + const jsPath = `../components/${layer}/${folder}/${name}.js`; + components[name] = require(jsPath); + $("#frame").append(``); + // Load the html for all components and call the init function + $(`#frame-${name}`).load(htmlPath, () => { + components[name].init(); + }); + }); + // Activate the listeners to switch between the pages + changePageListeners(); + // Activate and show the startup dashboard page + $("#dashboard").click(); + // Call the loop for the first time + setTimeout(loop, 500); +} + +/* +* When a menu item is clicked from the sidebar, +* This function is called to switch between the pages. +*/ +function changePageListeners(){ + $('a[href="#tab"]').click(function() { + $('a[href="#tab"]').removeClass("active-tab"); + $(this).addClass("active-tab"); + $("#titles").removeClass(); + $("#titles").addClass($(this).text().toLowerCase()); + $("#dash-title").text($(this).text()); + // Clear subtitle so it can be set in components activate function + $("#subtitle").text(""); + // Hide all other frames + $("[id^=frame-]").css("display", "none"); + // Show the html page of the requested page + // Also call the activate function of the now active component + const name = $(this).attr("data-name"); + $(`#frame-${name}`).css("display", ""); + components[name].activate(); + currentComponentName = name; + }); +} + +/* +* Main application loop +* +* This function calls itself with the updateInterval delay. +* It calls the refresh function for each component, +* or just the visible component if background updates are disabled. +*/ +function loop() { + if (settings.general.backgroundUpdates) { + Object.keys(components).forEach(name => { + components[name].refresh(); + }); + } else { + components[currentComponentName].refresh(); + } + setTimeout(loop, settings.general.updateInterval); +} + +$(() => { + init(); +}); diff --git a/app/js/settings.js b/app/js/settings.js new file mode 100644 index 0000000..279e128 --- /dev/null +++ b/app/js/settings.js @@ -0,0 +1,81 @@ +/* +* StatusPilatus: Monitor your PC like never before! +* Copyright (C) 2018 PilatusDevs +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU 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 General Public License for more details. +* +* You should have received a copy of the GNU General Public License +* along with this program. If not, see . +*/ +/* global components currentComponentName */ +"use strict"; + +const defaultSettings = { + general: { + updateInterval: 500, + backgroundUpdates: true + }, + graphs: { + animations: false, + width: 60 + } +}; + +// Set the settings to the default settings, +// and try to load the user settings +let settings = loadSettings(); + +function validSettings(s) { + try { + s = JSON.parse(s); + if (typeof s.general.updateInterval !== "number") { + return false; + } else if (typeof s.general.backgroundUpdates !== "boolean") { + return false; + } else if (typeof s.graphs.animations !== "boolean") { + return false; + } else if (typeof s.graphs.width !== "number") { + return false; + } + } catch (e) { + return false; + } + return true; +} + +function loadSettings() { + const storedSettings = localStorage.getItem("settings"); + if (validSettings(storedSettings)) { + try { + return JSON.parse(storedSettings); + } catch (e) { + return JSON.parse(JSON.stringify(defaultSettings)); + } + } else { + return JSON.parse(JSON.stringify(defaultSettings)); + } +} + +function saveSettings() { + localStorage.setItem("settings", JSON.stringify(settings)); +} + +function resetSettings(subsection) { + if (subsection) { + if (confirm(`Are you sure you want to reset your ${subsection} settings back to the defaults?`)) { + settings[subsection] = JSON.parse(JSON.stringify(defaultSettings[subsection])); + } + } else if (confirm("Are you sure you want to reset ALL your settings back to the defaults?")) { + settings = JSON.parse(JSON.stringify(defaultSettings)); + } + components[currentComponentName].activate(); + saveSettings(); +} diff --git a/app/js/util.js b/app/js/util.js new file mode 100644 index 0000000..c29d20c --- /dev/null +++ b/app/js/util.js @@ -0,0 +1,58 @@ +/* +* StatusPilatus: Monitor your PC like never before! +* Copyright (C) 2018 PilatusDevs +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU 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 General Public License for more details. +* +* You should have received a copy of the GNU General Public License +* along with this program. If not, see . +*/ +"use strict"; + +/* +* Used to go from bytes to MB +*/ +function formatBytesToMb(bytes) { + return ((bytes / (1024*1024)).toFixed(2)); +} + +/* +* Used to pretty print a number of bytes +*/ +const sizes = ["bytes", "KB", "MB", "GB", "TB"]; +function formatSize(bytes) { + const l = Math.min(sizes.length - 1, Math.log(bytes) / Math.LN2 / 10 | 0); + return [bytes / Math.pow(1024, l), sizes[l]]; +} + +/* +* Returns the title case of a string +*/ +function title(string) { + return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); +} + +function functionName(prefix, string) { + const dashesReplaced = string.replace(/-(.)/g, letter => { + return letter.replace("-", "").toUpperCase(); + }); + return prefix + string.charAt(0).toUpperCase() + dashesReplaced.slice(1); +} + +function kebabName(string) { + const name = string.replace(/[A-Z]/g, letter => { + return "-" + letter.toLowerCase(); + }); + if (name.startsWith("-")) { + return name.slice(1); + } + return name; +} diff --git a/components/configuration/general-settings/general-settings.html b/components/configuration/general-settings/general-settings.html new file mode 100644 index 0000000..2f1c9ca --- /dev/null +++ b/components/configuration/general-settings/general-settings.html @@ -0,0 +1,42 @@ + + +
    +
    +

    General (reset)

    +
    +
    + +
    + +
    +
    +
    +
    + +
    + + 500 +
    +
    +
    +
    +
    diff --git a/components/configuration/general-settings/general-settings.js b/components/configuration/general-settings/general-settings.js new file mode 100644 index 0000000..799f5eb --- /dev/null +++ b/components/configuration/general-settings/general-settings.js @@ -0,0 +1,57 @@ +/* +* StatusPilatus: Monitor your PC like never before! +* Copyright (C) 2018 PilatusDevs +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU 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 General Public License for more details. +* +* You should have received a copy of the GNU General Public License +* along with this program. If not, see . +*/ +/* global settings saveSettings */ +"use strict"; + +module.exports = { + init: initGeneralSettings, + refresh: refreshGeneralSettings, + activate: activateGeneralSettings +}; + +function initGeneralSettings() { + enableGeneralControls(); + //TODO +} + +function refreshGeneralSettings() { + //TODO +} + +function activateGeneralSettings() { + const backgroundUpdates = document.getElementById("background-updates"); + backgroundUpdates.checked = settings.general.backgroundUpdates ? "checked" : ""; + const updateInterval = document.getElementById("update-interval"); + updateInterval.value = settings.general.updateInterval; + document.getElementById("update-interval-feedback").innerHTML = updateInterval.value; +} + +function enableGeneralControls() { + //TODO + const backgroundUpdates = document.getElementById("background-updates"); + backgroundUpdates.addEventListener("click", e => { + settings.general.backgroundUpdates = e.target.checked; + saveSettings(); + }); + const updateInterval = document.getElementById("update-interval"); + updateInterval.addEventListener("input", e => { + document.getElementById("update-interval-feedback").innerHTML = e.target.value; + settings.general.updateInterval = Number(e.target.value); + saveSettings(); + }); +} diff --git a/components/configuration/graph-settings/graph-settings.html b/components/configuration/graph-settings/graph-settings.html new file mode 100644 index 0000000..a8f48f5 --- /dev/null +++ b/components/configuration/graph-settings/graph-settings.html @@ -0,0 +1,42 @@ + + +
    +
    +

    General (reset)

    +
    +
    + +
    + +
    +
    +
    +
    + +
    + + 60 +
    +
    +
    +
    +
    diff --git a/components/configuration/graph-settings/graph-settings.js b/components/configuration/graph-settings/graph-settings.js new file mode 100644 index 0000000..fac1eaa --- /dev/null +++ b/components/configuration/graph-settings/graph-settings.js @@ -0,0 +1,69 @@ +/* +* StatusPilatus: Monitor your PC like never before! +* Copyright (C) 2018 PilatusDevs +* +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU 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 General Public License for more details. +* +* You should have received a copy of the GNU General Public License +* along with this program. If not, see . +*/ +/* global settings saveSettings */ +"use strict"; + +module.exports = { + init: initGraphSettings, + refresh: refreshGraphSettings, + activate: activateGraphSettings +}; + +function initGraphSettings() { + enableGraphControls(); + //TODO +} + +function refreshGraphSettings() { + //TODO +} + +function activateGraphSettings() { + const animations = document.getElementById("animations"); + animations.checked = settings.graphs.animations ? "checked" : ""; + const graphWidth = document.getElementById("graph-width"); + graphWidth.value = settings.graphs.width; + document.getElementById("graph-width-feedback").innerHTML = graphWidth.value; +} + +function enableGraphControls() { + const animations = document.getElementById("animations"); + animations.addEventListener("click", e => { + settings.graphs.animations = e.target.checked; + // This setting requires a restart because all the charts need to reload + saveSettings(); + }); + const graphWidth = document.getElementById("graph-width"); + graphWidth.addEventListener("input", e => { + document.getElementById("graph-width-feedback").innerHTML = e.target.value; + settings.graphs.width = Number(e.target.value); + saveSettings(); + }); +} + +// Currently unused +function validateNumber(el) { + if (el.value === "") { + el.value = 0; + } + if (el.matches(":valid")) { + return true; + } else { + return false; + } +} diff --git a/components/dashboard/dashboard/dashboard.html b/components/dashboard/dashboard/dashboard.html index 4146384..820b040 100644 --- a/components/dashboard/dashboard/dashboard.html +++ b/components/dashboard/dashboard/dashboard.html @@ -1,6 +1,6 @@ +
    +
    +
    diff --git a/components/monitoring/network/network.js b/components/monitoring/network/network.js index 60b539b..e56db06 100644 --- a/components/monitoring/network/network.js +++ b/components/monitoring/network/network.js @@ -15,8 +15,16 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ +/* global settings formatBytesToMb $ si Chart */ "use strict"; +module.exports = { + init: initNetwork, + refresh: refreshNetwork, + activate: activateNetwork, + changeAdapter: changeNetworkAdapter +}; + let currentAdapter = null; /* @@ -90,12 +98,9 @@ const configNetworkUpUsage = { } }; -/** -* Called once to initiate the page -*/ function initNetwork() { - initAdapters(); - initPing(); + startAdapters(); + startPing(); /* make the chart */ const ctx = document.getElementById("canvasNetworkDownUsage").getContext("2d"); @@ -106,15 +111,16 @@ function initNetwork() { window.networkUpUsage = new Chart(ctx1, configNetworkUpUsage); } -/** -* Called from app.js -*/ +function activateNetwork() { + // Nothing +} + function refreshNetwork() { - refreshNetworkUsage(); + updateNetworkUsage(); } -function initPing() { - console.log("Init Ping"); +function startPing() { + //TODO // si.inetLatency((data) => { // console.log(data); // }); @@ -134,11 +140,11 @@ function adapterHtml(adapter) { * This function is called from initNetwork() * so all the adapters are listed on the page */ -function initAdapters() { +function startAdapters() { $("#adapters").html = ""; si.networkInterfaces(data => { data.forEach(adapter => { - if (adapter.internal == false) { + if (adapter.internal === false) { if (!currentAdapter) { currentAdapter = adapter.iface; } @@ -168,19 +174,18 @@ function changeNetworkAdapter(){ } /** -* Refresh the network usage for the chosen adapter. +* Update the network usage for the chosen adapter. */ -function refreshNetworkUsage() { +function updateNetworkUsage() { si.networkStats(currentAdapter) .then(data => { - /* convert the bytes to Mb */ + /* convert the bytes to Mb */ const downUsage = formatBytesToMb(data.rx_sec); const upUsage = formatBytesToMb(data.tx_sec); - console.log(data); /* update the graph - usage*/ configNetworkDownUsage.data.labels.push(""); configNetworkDownUsage.data.datasets[0].data.push(downUsage); - if (configNetworkDownUsage.data.datasets[0].data.length > graphWidth()) { + while (configNetworkDownUsage.data.datasets[0].data.length > settings.graphs.width) { configNetworkDownUsage.data.datasets[0].data.splice(0, 1); configNetworkDownUsage.data.labels.splice(0, 1); } @@ -188,7 +193,7 @@ function refreshNetworkUsage() { configNetworkUpUsage.data.labels.push(""); configNetworkUpUsage.data.datasets[0].data.push(upUsage); - if (configNetworkUpUsage.data.datasets[0].data.length > graphWidth()) { + while (configNetworkUpUsage.data.datasets[0].data.length > settings.graphs.width) { configNetworkUpUsage.data.datasets[0].data.splice(0, 1); configNetworkUpUsage.data.labels.splice(0, 1); } diff --git a/components/monitoring/os/os.html b/components/monitoring/os/os.html index 9ea9dd8..1822ac6 100644 --- a/components/monitoring/os/os.html +++ b/components/monitoring/os/os.html @@ -50,10 +50,10 @@

    Users


    Installed Programs

    - +
    - + diff --git a/components/monitoring/os/os.js b/components/monitoring/os/os.js index 18108ba..70ba5c9 100644 --- a/components/monitoring/os/os.js +++ b/components/monitoring/os/os.js @@ -18,8 +18,15 @@ /* global si plistr $ */ "use strict"; +module.exports = { + init: initOs, + refresh: refreshOs, + activate: activateOs, + updateData: updateAndRefreshData, + search: searchPrograms +}; + // Storing static data to call libraries less often -// change to let if we add user refresh functionality let osData = si.osInfo(); let versionData = si.versions(); let userData = si.users(); @@ -42,16 +49,13 @@ function updateAndRefreshData() { insertData(); } -/** -* Called once to initiate the page -*/ function initOs() { insertData(); } + function insertData() { // Renders OS data once ready osData.then(data => { - $("#subtitle").text(data.distro); $("#os-container").html(osHtml(data)); }); // Renders version data once ready @@ -81,11 +85,14 @@ function insertData() { }); } -/** -* Called from app.js -*/ +function activateOs() { + osData.then(data => { + $("#subtitle").text(data.distro); + }); +} + function refreshOs() { - console.log("OS refresh call"); + // Nothing } function osHtml(os) { diff --git a/components/monitoring/storage/storage.html b/components/monitoring/storage/storage.html index dc70c3b..3e2bf7c 100644 --- a/components/monitoring/storage/storage.html +++ b/components/monitoring/storage/storage.html @@ -1,6 +1,6 @@