feat: added a more detailed process view modal (#922)

Author: KjartanOli

src/assets/css/mod_processlist.css

@@ -0,0 +1,48 @@
+table#processContainer {
+    display: block;
+    max-height: 60vh;
+    overflow: auto;
+}
+
+table#processContainer td.header {
+    font-weight: bold;
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.6);
+    color: var(--color_light_black);
+    text-align: center;
+}
+
+table#processContainer td.pid {
+    width: 5vw;
+}
+
+table#processContainer td.name {
+    width: 12vw;
+}
+
+table#processContainer td.user {
+    width: 7vw;
+}
+
+table#processContainer td.cpu {
+    width: 3vw;
+    text-align: center;
+}
+
+table#processContainer td.mem{
+    width: 3vw;
+    text-align: center;
+
+}
+table#processContainer td.state {
+    width: 6vw;
+    text-align: center;
+}
+table#processContainer td.started {
+    width: 11vw;
+
+}
+
+table#processContainer td.runtime {
+    width: 5vw;
+}
+

src/assets/css/mod_toplist.css

@@ -17,6 +17,10 @@ div#mod_toplist::before {
     height: 0.833vh;
 }
 
+div#mod_toplist:hover {
+    cursor: pointer;
+}
+
 div#mod_toplist::after {
     content: "";
     border-right: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);

src/classes/filesystem.class.js

@@ -551,7 +551,7 @@ class FilesystemDisplay {
 
             if (typeof name === "number") {
                 block = this.cwd[name];
-                name = block.name
+                name = block.name;
             }
 
             block.path = block.path.replace(/\\/g, "/");

src/classes/toplist.class.js

@@ -8,6 +8,7 @@ class Toplist {
         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._element.onclick = this.processList;
 
         this.parent.append(this._element);
 
@@ -20,15 +21,15 @@ class Toplist {
         window.si.processes().then(data => {
             if (window.settings.excludeThreadsFromToplist === true) {
                 data.list = data.list.sort((a, b) => {
-                		return (a.pid-b.pid);
+                    return (a.pid-b.pid);
                 }).filter((e, index, a) => {
-                		let i = a.findIndex(x => x.name === e.name);
-                		if (i !== -1 && i !== index) {
-                				a[i].pcpu = a[i].pcpu+e.pcpu;
-                				a[i].pmem = a[i].pmem+e.pmem;
-                				return false;
-                		}
-                		return true;
+                    let i = a.findIndex(x => x.name === e.name);
+                    if (i !== -1 && i !== index) {
+                        a[i].pcpu = a[i].pcpu+e.pcpu;
+                        a[i].pmem = a[i].pmem+e.pmem;
+                        return false;
+                    }
+                    return true;
                 });
             }
 
@@ -49,6 +50,77 @@ class Toplist {
             });
         });
     }
+
+    processList(){
+        function updateProcessList(){
+            window.si.processes().then(data => {
+                if (window.settings.excludeThreadsFromToplist === true) {
+                    data.list = data.list.sort((a, b) => {
+                        return (a.pid-b.pid);
+                    }).filter((e, index, a) => {
+                        let i = a.findIndex(x => x.name === e.name);
+                        if (i !== -1 && i !== index) {
+                            a[i].pcpu = a[i].pcpu+e.pcpu;
+                            a[i].pmem = a[i].pmem+e.pmem;
+                            return false;
+                        }
+                        return true;
+                    });
+                }
+
+                let list = data.list.sort((a, b) => {
+                    return ((b.pcpu-a.pcpu)*100 + b.pmem-a.pmem);
+                });//.splice(0, 30);
+
+                document.querySelectorAll("#processList > tr").forEach(el => {
+                    el.remove();
+                });
+
+                list.forEach(proc => {
+                    let runtime = new Date(Date.now() - Date.parse(proc.started));
+                    let el = document.createElement("tr");
+                    el.innerHTML = `<td class="pid">${proc.pid}</td>
+                                <td class="name">${proc.name}</td>
+                                <td class="user">${proc.user}</td>
+                                <td class="cpu">${Math.round(proc.pcpu*10)/10}%</td>
+                                <td class="mem">${Math.round(proc.pmem*10)/10}%</td>
+                                <td class="state">${proc.state}</td>
+                                <td class="started">${proc.started}</td>
+                                <td class="runtime">${runtime.getHours()}:${runtime.getMinutes()}:${runtime.getSeconds()}</td>`;
+                    document.getElementById("processList").append(el);
+                });
+            });
+        }
+
+        window.keyboard.detach();
+        new Modal(
+            {
+                type: "custom",
+                title: "Active Processes",
+                html: `
+<table id=\"processContainer\">
+    <thead>
+        <tr>
+            <td class="pid header">PID</td>
+            <td class="name header">Name</td>
+            <td class="user header">User</td>
+            <td class="cpu header">CPU</td>
+            <td class="mem header">Memory</td>
+            <td class="state header">State</td>
+            <td class="started header">Started</td>
+            <td class="runtime header">Runtime</td>
+        </tr>
+    </thead>
+    <tbody id=\"processList\">
+    </tbody>
+    </table>`,
+            }
+        );
+        updateProcessList();
+        window.keyboard.attach();
+        window.term[window.currentTerm].term.focus();
+        setInterval(updateProcessList, 2000);
+    }
 }
 
 module.exports = {

src/ui.html

@@ -28,6 +28,7 @@
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
         <link rel="stylesheet" href="assets/css/mod_toplist.css" />
         <link rel="stylesheet" href="assets/css/mod_fuzzyFinder.css" />
+        <link rel="stylesheet" href="assets/css/mod_processlist.css" />
         <!-- Load extra CSS -->
         <link rel="stylesheet" href="assets/css/extra_ratios.css" />