🔀 Replace mod_syslog with mod_toplist

(merge branch move-suprompt-to-backend)

Author: GitSquared

src/_boot.js

@@ -7,7 +7,6 @@ process.on("uncaughtException", e => {
     if (tty) {
         tty.tty.kill();
     }
-    app.exit(1);
 });
 
 signale.start(`Starting eDEX-UI v${app.getVersion()}`);
@@ -79,6 +78,49 @@ fs.readdirSync(innerFontsDir).forEach((e) => {
     fs.writeFileSync(path.join(fontsDir, e), fs.readFileSync(path.join(innerFontsDir, e)));
 });
 
+function createWindow(settings) {
+    signale.info("Creating window...");
+    let {x, y, width, height} = electron.screen.getPrimaryDisplay().bounds;
+    width++; height++;
+    win = new BrowserWindow({
+        title: "eDEX-UI",
+        x,
+        y,
+        width,
+        height,
+        show: false,
+        resizable: true,
+        movable: settings.allowWindowed || false,
+        fullscreen: true,
+        autoHideMenuBar: true,
+        frame: settings.allowWindowed || false,
+        backgroundColor: '#000000',
+        webPreferences: {
+            devTools: true,
+            backgroundThrottling: false,
+            webSecurity: true,
+            allowRunningInsecureContent: false,
+            experimentalFeatures: settings.experimentalFeatures || false
+        }
+    });
+
+    win.loadURL(url.format({
+        pathname: path.join(__dirname, 'ui.html'),
+        protocol: 'file:',
+        slashes: true
+    }));
+
+    win.once("ready-to-show", () => {
+        signale.complete("Frontend window is up!");
+        win.show();
+        if (!settings.allowWindowed) {
+            win.setResizable(false);
+        }
+    });
+
+    signale.watch("Waiting for frontend connection...");
+}
+
 app.on('ready', () => {
     signale.pending(`Loading settings file...`);
     let settings = require(settingsFile);
@@ -122,46 +164,7 @@ app.on('ready', () => {
         }
     });
 
-    signale.info("Creating window...");
-    let {x, y, width, height} = electron.screen.getPrimaryDisplay().bounds;
-    width++; height++;
-    win = new BrowserWindow({
-        title: "eDEX-UI",
-        x,
-        y,
-        width,
-        height,
-        show: false,
-        resizable: true,
-        movable: settings.allowWindowed || false,
-        fullscreen: true,
-        autoHideMenuBar: true,
-        frame: settings.allowWindowed || false,
-        backgroundColor: '#000000',
-        webPreferences: {
-            devTools: true,
-            backgroundThrottling: false,
-            webSecurity: true,
-            allowRunningInsecureContent: false,
-            experimentalFeatures: settings.experimentalFeatures || false
-        }
-    });
-
-    win.loadURL(url.format({
-        pathname: path.join(__dirname, 'ui.html'),
-        protocol: 'file:',
-        slashes: true
-    }));
-
-    win.once("ready-to-show", () => {
-        signale.complete("Frontend window is up!");
-        win.show();
-        if (!settings.allowWindowed) {
-            win.setResizable(false);
-        }
-    });
-
-    signale.watch("Waiting for frontend connection...");
+    createWindow(settings);
 });
 
 app.on('web-contents-created', (e, contents) => {

src/_renderer.js

@@ -223,7 +223,7 @@ initMods = () => {
     window.mods.sysinfo = new Sysinfo("mod_column_left");
     window.mods.cpuinfo = new Cpuinfo("mod_column_left");
     window.mods.ramwatcher = new RAMwatcher("mod_column_left");
-    window.mods.syslog = new Syslog("mod_column_left");
+    window.mods.toplist = new Toplist("mod_column_left");
     window.mods.clipboardButtons = new ClipboardButtons("mod_column_left");
 
     // Right column
@@ -305,8 +305,6 @@ window.themeChanger = (theme) => {
     window.mods.globe.globe.destroy();
     window.removeEventListener("resize", window.mods.globe.resizeHandler);
 
-    if (process.platform === "linux" || process.platform === "darwin") window.mods.syslog.tail.unwatch();
-
     window._loadTheme(require(src));
     for (let i; i < 99999; i++) {
         clearInterval(i);

src/assets/css/mod_ramwatcher.css

@@ -46,7 +46,7 @@ div#mod_ramwatcher_inner > h1:first-child > i {
     text-align: right;
     display: inline-block;
     position: relative;
-    bottom: 1.9vh;
+    bottom: 1.6vh;
     width: 100%;
 }
 

src/assets/css/mod_syslog.css renamed to src/assets/css/mod_toplist.css

@@ -1,4 +1,4 @@
-div#mod_syslog {
+div#mod_toplist {
     border-top: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     font-family: var(--font_main_light);
     letter-spacing: 0.092vh;
@@ -7,7 +7,7 @@ div#mod_syslog {
     flex-wrap: wrap;
 }
 
-div#mod_syslog::before {
+div#mod_toplist::before {
     content: "";
     border-left: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     align-self: flex-start;
@@ -17,7 +17,7 @@ div#mod_syslog::before {
     height: 0.833vh;
 }
 
-div#mod_syslog::after {
+div#mod_toplist::after {
     content: "";
     border-right: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     position: relative;
@@ -26,41 +26,32 @@ div#mod_syslog::after {
     height: 0.833vh;
 }
 
-div#mod_syslog h1 {
+div#mod_toplist h1 {
     font-size: 1.48vh;
     margin: 0vh;
     margin-bottom: -1vh;
-    width: 98%;
+    width: 97%;
+    padding-left: 0.5vh;
 }
 
-div#mod_syslog i {
+div#mod_toplist i {
     font-style: normal;
     font-size: 1.20vh;
     opacity: 0.5;
     text-align: right;
     display: inline-block;
     position: relative;
-    bottom: 1.78vh;
+    bottom: 1.6vh;
     width: 100%;
 }
 
-div#mod_syslog pre {
-    overflow: hidden;
-    white-space: pre-wrap;
+table#mod_toplist_table {
     margin: 0px;
-    height: 9.8vh;
-    margin-top: 0.2vh;
-    width: 99%;
-    margin-left: 1%;
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
-    opacity: 0.8;
+    margin-bottom: 0.2vh;
+    width: 97%;
+    padding-left: 0.5vh;
 }
 
-div#mod_syslog pre:empty::after {
-    content: "NO LOG";
-    margin: auto;
-    position: relative;
-    right: 0.5vh;
+table#mod_toplist_table > td {
+
 }

src/classes/syslog.class.js

@@ -0,0 +1,44 @@
+class Toplist {
+    constructor(parentId) {
+        if (!parentId) throw "Missing parameters";
+
+        this.si = require("systeminformation");
+
+        // Create DOM
+        this.parent = document.getElementById(parentId);
+        this._element = document.createElement("div");
+        this._element.setAttribute("id", "mod_toplist");
+        this._element.innerHTML = `<h1>TOP PROCESSES<i>PID | NAME | CPU | MEM</i></h1><br>
+        <table id="mod_toplist_table"></table>`;
+
+        this.parent.append(this._element);
+
+        this.updateList();
+        this.listUpdater = setInterval(() => {
+            this.updateList();
+        }, 5000);
+    }
+    updateList() {
+        this.si.processes().then(data => {
+            let list = data.list.sort((a, b) => {
+                return ((b.pcpu-a.pcpu)*100 + b.pmem-a.pmem);
+            }).splice(0, 5);
+
+            document.querySelectorAll("#mod_toplist_table > tr").forEach(el => {
+                el.remove();
+            });
+            list.forEach(proc => {
+                let el = document.createElement("tr");
+                el.innerHTML = `<td>${proc.pid}</td>
+                                <td><strong>${proc.name}</strong></td>
+                                <td>${Math.round(proc.pcpu)}%</td>
+                                <td>${proc.pmem}%</td>`;
+                document.getElementById("mod_toplist_table").append(el);
+            });
+        });
+    }
+}
+
+module.exports = {
+    Toplist
+};

src/classes/toplist.class.js

@@ -29,7 +29,6 @@
     "pretty-bytes": "5.1.0",
     "signale": "1.3.0",
     "smoothie": "1.35.0",
-    "sudo-prompt": "8.2.3",
     "systeminformation": "3.45.6",
     "tail": "1.3.0",
     "ws": "6.0.0",

src/package.json

@@ -23,7 +23,7 @@
         <link rel="stylesheet" href="assets/css/mod_conninfo.css" />
         <link rel="stylesheet" href="assets/css/mod_globe.css" />
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
-        <link rel="stylesheet" href="assets/css/mod_syslog.css" />
+        <link rel="stylesheet" href="assets/css/mod_toplist.css" />
         <link rel="stylesheet" href="assets/css/mod_clipboardButtons.css" />
 
         <!-- Load main modules classes -->
@@ -40,7 +40,7 @@
         <script src="classes/conninfo.class.js"></script>
         <script src="classes/locationGlobe.class.js"></script>
         <script src="classes/ramwatcher.class.js"></script>
-        <script src="classes/syslog.class.js"></script>
+        <script src="classes/toplist.class.js"></script>
         <script src="classes/clipboardButtons.class.js"></script>
     </head>
     <body class="solidBackground">