Skip to content

Commit

Permalink
System stats now accurate
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanmccartney committed Nov 11, 2023
1 parent 2152b13 commit f464b18
Show file tree
Hide file tree
Showing 11 changed files with 6,936 additions and 1,607 deletions.
1 change: 1 addition & 0 deletions bin/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ if (process.env.WEB_GUI) {
app.use("/public/bootstrap", express.static(path.join(__dirname, "..", "node_modules", "bootstrap", "dist")));
app.use("/public/chart.js", express.static(path.join(__dirname, "..", "node_modules", "chart.js", "dist")));
app.use("/public/video.js", express.static(path.join(__dirname, "..", "node_modules", "video.js", "dist")));
app.use("/public/gauge.js", express.static(path.join(__dirname, "..", "node_modules", "gaugeJS", "dist")));
}

// catch 404 and forward to error handler
Expand Down
8,266 changes: 6,682 additions & 1,584 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"dependencies": {
"bootstrap": "^5.3.2",
"chart.js": "^4.4.0",
"check-disk-space": "^3.4.0",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"date-fns": "^2.30.0",
Expand All @@ -21,7 +22,9 @@
"express-fileupload": "^1.2.1",
"express-validator": "^7.0.1",
"fluent-ffmpeg": "^2.1.2",
"gaugeJS": "^1.3.7",
"helmet": "^5.0.1",
"jest": "^29.7.0",
"md5": "^2.3.0",
"module-alias": "^2.2.2",
"morgan": "^1.10.0",
Expand All @@ -31,6 +34,7 @@
"node-gyp": "^9.4.0",
"ntp-time": "^2.0.2",
"os": "^0.1.2",
"pidusage": "^3.0.2",
"qrcode": "^1.5.3",
"serve-favicon": "^2.5.0",
"sharp": "^0.32.6",
Expand Down
30 changes: 29 additions & 1 deletion public/html/chart.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<title>VMAF Chart</title>
<body class="bg-light">
<nav class="navbar bg-light">
<nav class="navbar bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img
Expand All @@ -22,6 +22,34 @@
/>
FFmpeg Docker
</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/jobs">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/video">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/chart">VMAF Chart</a>
</li>
</ul>
</div>
</div>
</nav>

Expand Down
54 changes: 53 additions & 1 deletion public/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script language="javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
<script language="javascript" src="/public/gauge.js/gauge.min.js"></script>

<link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css" />

<title>FFmpeg Docker</title>
Expand All @@ -20,8 +22,58 @@
/>
FFmpeg Docker
</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/jobs">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/video">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/chart">VMAF Chart</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 80px"></div>
<div class="container" style="margin-top: 80px">
<div class="row justify-content-md-center">
<div class="col-md-auto">
<div width="100%" class="h5 text-center">CPU Usage</div>
<canvas id="gaugeCpu"></canvas>
<br />
<div width="100%" class="font-weight-light text-center" id="textCpu"></div>
</div>
<div class="col-md-auto">
<div width="100%" class="h5 text-center">Memory Usage</div>
<canvas id="gaugeMemory"></canvas>
<br />
<div width="100%" class="font-weight-light text-center" id="textMemory"></div>
</div>
<div class="col-md-auto">
<div width="100%" class="h5 text-center">Disk Usage</div>
<canvas id="gaugeDisk"></canvas>
<br />
<div width="100%" class="font-weight-light text-center" id="textDisk"></div>
</div>
</div>
</div>
<script language="javascript" src="/public/js/index.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions public/html/jobs.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,34 @@
/>
FFmpeg Docker
</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/jobs">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/video">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/chart">VMAF Chart</a>
</li>
</ul>
</div>
</div>
</nav>

Expand Down
28 changes: 28 additions & 0 deletions public/html/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,34 @@
/>
FFmpeg Docker
</a>

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/jobs">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/video">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/chart">VMAF Chart</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 80px">
Expand Down
71 changes: 71 additions & 0 deletions public/js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
const gaugeOptions = {
angle: 0, // The span of the gauge arc
lineWidth: 0.44, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.6, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: "#000000", // Fill color
},
limitMax: false, // If false, max value increases automatically if value > maxValue
limitMin: false, // If true, the min value of the gauge will be fixed
percentColors: [
[0.25, "#0BD70B"],
[0.5, "#FFB300"],
[1.0, "#FF3300"],
],
staticLabels: {
font: "10px sans-serif", // Specifies font
labels: [0, 100], // Print labels at these values
color: "#000000", // Optional: Label text color
fractionDigits: 0,
},
strokeColor: "#E0E0E0",
generateGradient: false,
highDpiSupport: true, // High resolution support
};

const gaugeCpuElement = document.getElementById("gaugeCpu");
const gaugeMemoryElement = document.getElementById("gaugeMemory");
const gaugeDiskElement = document.getElementById("gaugeDisk");

const textCpuElement = document.getElementById("textCpu");
const textMemoryElement = document.getElementById("textMemory");
const textDiskElement = document.getElementById("textDisk");

const gaugeCpu = new Gauge(gaugeCpuElement).setOptions(gaugeOptions);
const gaugeMemory = new Gauge(gaugeMemoryElement).setOptions(gaugeOptions);
const gaugeDisk = new Gauge(gaugeDiskElement).setOptions(gaugeOptions);

gaugeCpu.maxValue = 100;
gaugeCpu.setMinValue(0);
gaugeCpu.set(0);

gaugeMemory.maxValue = 100;
gaugeMemory.setMinValue(0);
gaugeMemory.set(0);

gaugeDisk.maxValue = 100;
gaugeDisk.setMinValue(0);
gaugeDisk.set(0);

const getData = async () => {
const response = await fetch(`/api/system/stats`);
const data = await response.json();

gaugeCpu.set(data?.load * 100);
gaugeMemory.set(data?.memory?.usage * 100);
gaugeDisk.set(data?.disk?.usage * 100);

textCpuElement.innerHTML = `${Math.round(data?.load * 100)}%`;
textMemoryElement.innerHTML = `${Math.round(data?.memory?.usage * 100)}% (${Math.round(
(data?.memory?.total - data?.memory?.free) / 1000000000
)}GB / ${Math.round(data?.memory?.total / 1000000000)}GB)`;

textDiskElement.innerHTML = `${Math.round(data?.disk?.usage * 100)}% (${Math.round(
(data?.disk?.size - data?.disk?.free) / 1000000000
)}GB / ${Math.round(data?.disk?.size / 1000000000)}GB)`;
};

getData();
const interval = setInterval(getData, 1000);
2 changes: 1 addition & 1 deletion routes/system.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ router.get("/time", async (req, res, next) => {

/**
* @swagger
* /system/stas:
* /system/stats:
* get:
* description: Get system stats; CPU, memory, etc.
* tags: [system]
Expand Down
4 changes: 2 additions & 2 deletions services/bars-srt.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const process = async (options) => {

try {
const job = jobManager.start(
`${options?.input?.address}:${options?.input?.port}`,
`Bars to SRT srt://${options?.input?.address}:${options?.input?.port}`,
`${options?.output?.address}:${options?.output?.port}`,
`Bars to SRT srt://${options?.output?.address}:${options?.output?.port}`,
["encode", "srt", "bars"]
);
const filters = await filterCombine(await filterText({ ...options, ...job }));
Expand Down
55 changes: 37 additions & 18 deletions services/system-stats.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,53 @@
"use strict";

const logger = require("@utils/logger")(module);
const checkDiskSpace = require("check-disk-space").default;
const os = require("os");
const path = require("path");

module.exports = async () => {
try {
const cpuUsage = [];
let cpuUsageTotal = 0;
const interval = 1000;
let load = 0;
let cpus = {};
let cpusPrevious = os.cpus();

setInterval(() => {
cpus = os.cpus();
let loadTotal = 0;

for (let cpu of os.cpus()) {
const cpuUsagePercentage = (cpu?.times?.user + cpu?.times?.sys) / cpu?.times?.idle;
cpuUsageTotal += cpuUsagePercentage;
cpuUsage.push(Math.round(cpuUsagePercentage * 100) / 100);
}
for (let i in cpus) {
const usagePrevious = cpusPrevious[i].times?.user + cpusPrevious[i].times?.sys + cpusPrevious[i].times?.irq;
const usage = cpus[i].times?.user + cpus[i].times?.sys + cpus[i].times?.irq;

cpuUsageTotal = cpuUsageTotal / os.cpus().length;
cpuUsageTotal = Math.round(cpuUsageTotal * 100) / 100;
const load = (usage - usagePrevious) / interval;
cpus[i].load = Math.round(load * 100) / 100;

loadTotal += load;
}

load = Math.round((loadTotal / cpus.length) * 100) / 100;
cpusPrevious = cpus;
}, interval);

module.exports = async () => {
try {
const disk = await checkDiskSpace(process.env.MEDIA_PATH || path.join(__dirname, "..", "data", "media"));
disk.usage = (disk.size - disk.free) / disk.size;
disk.usage = Math.round(disk.usage * 100) / 100;

return {
time: new Date(),
cpuUsageTotal: cpuUsageTotal,
cpuUsage: cpuUsage,
cores: os.cpus().length,
cpu: os.cpus(),
memoryTotal: os.totalmem(),
memoryFree: os.freemem(),
memoryUsage: Math.round((os.freemem() / os.totalmem) * 100) / 100,
cores: cpus.length,
load: load,
cpu: cpus,
memory: {
total: os.totalmem(),
free: os.freemem(),
usage: Math.round(((os.totalmem - os.freemem()) / os.totalmem) * 100) / 100,
},
network: os.networkInterfaces(),
platform: os.platform(),
uptime: os.uptime(),
disk: disk,
};
} catch (error) {
return { error: error.toString() };
Expand Down

0 comments on commit f464b18

Please sign in to comment.