mirror of
https://github.com/GitSquared/edex-ui.git
synced 2024-09-21 10:37:29 +00:00
feat: added a more detailed process view modal (#922)
This commit is contained in:
parent
b2269eae41
commit
70dbb3ffb2
48
src/assets/css/mod_processlist.css
Normal file
48
src/assets/css/mod_processlist.css
Normal file
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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, "/");
|
||||
|
@ -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 = {
|
||||
|
@ -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" />
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user