TOP App

Code

ps
├── api
│   └── v1
│       ├── index.php
│       └── util.php
├── docker-compose.yml
└── public
    ├── css
    │   ├── master.css
    │   └── theme.blue.min.css
    ├── index.html
    └── js
        ├── jquery.min.js
        ├── jquery.tablesorter.min.js
        └── main.js

docker-compose.yml:

version: "3"

services:
  web:
    container_name: web
    image: php:7.3-apache
    ports:
      - 8080:80
    volumes:
      - ./:/var/www/html/

Back-end side

TOP API

api
└── v1
    ├── index.php
    └── util.php

Front-end side

└── public
    ├── css
    │   ├── master.css
    │   └── theme.blue.min.css
    ├── index.html
    └── js
        ├── jquery.min.js
        ├── jquery.tablesorter.min.js
        └── main.js

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TOP</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.blue.min.css" /> -->
    <link rel="stylesheet" href="css/theme.blue.min.css" />
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <header>
      <h1>TOP</h1>
    </header>
    <main>
      <div class="toolbar">
        <span class="ps-count"></span>
        <div class="update-time">
          <label for="time">Update:</label>
          <select name="time" id="time">
            <option value="1000">1s</option>
            <option value="5000" selected>5s</option>
            <option value="10000">10s</option>
          </select>
        </div>
      </div>
      <table id="topTable">
        <thead>
          <tr>
            <th>pid</th>
            <th>user</th>
            <th>pr</th>
            <th>ni</th>
            <th>virt</th>
            <th>res</th>
            <th>shr</th>
            <th>s</th>
            <th>%cpu</th>
            <th>%mem</th>
            <th>time+</th>
            <th>command</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </main>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script> -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.tablesorter.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

public/css/master.css:

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  padding: 0.2rem 0;
  text-align: center;
  background: #fafafa;
  border-bottom: 1px solid #ccc;
  margin-bottom: 3rem;
}

main {
  width: 80%;
  min-width: 960px;
  margin: auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

table tbody tr:hover td {
  background-color: #ccc;
}

table thead tr th:nth-child(n + 2) {
  padding-right: 20px;
}

table thead tr th {
  outline: none;
}

public/js/main.js:

const psTable = document.querySelector("table tbody");
const psCount = document.querySelector(".ps-count");
const time = document.querySelector("#time");

showProcess();
$("#topTable").tablesorter({ theme: "blue" });

function showProcess() {
  fetch("/api/v1/")
    .then(res => res.json())
    .then(json => loadProcess(json));
}

function loadProcess(ps) {
  psCount.innerHTML = `${ps.length} processes`;

  psTable.innerHTML = ps
    .map(p =>
      Object.values(p)
        .map(v => `<td>${v}</td>`)
        .join("")
    )
    .map(p => `<tr>${p}</tr>`)
    .join("");

  $("#topTable").trigger("update");

  setTimeout("showProcess()", time.value);
}

Library JS