Lets create a new block and create a GET endpoint called system_metrics and add the following script.
# Echo the HTML header and opening tags
cat <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Overview</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Disk Usage Table</h2>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th>Filesystem</th>
<th>Size</th>
<th>Used</th>
<th>Available</th>
<th>Usage</th>
<th>Mounted on</th>
</tr>
</thead>
<tbody>
EOF
# Process `df -h` output and echo the rows
df -h | tail -n +2 | awk '{print "<tr><td>"$1"</td><td>"$2"</td><td>"$3"</td><td>"$4"</td><td>"$5"</td><td>"$6"</td></tr>"}'
# Echo the closing tags for the first table
cat <<EOF
</tbody>
</table>
<h2>Top 5 CPU-Consuming Processes</h2>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th>PID</th>
<th>User</th>
<th>CPU%</th>
<th>Memory%</th>
<th>Command</th>
</tr>
</thead>
<tbody>
EOF
# Get the top 5 CPU-consuming processes using `ps` command compatible with macOS/BSD
ps aux | awk 'NR>1 {print $2, $1, $3, $4, $11}' | sort -k3 -nr | head -n 5 | awk '{print "<tr><td>"$1"</td><td>"$2"</td><td>"$3"</td><td>"$4"</td><td>"$5"</td></tr>"}'
# Echo the closing tags for the second table and the HTML structure
cat <<EOF
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
EOFWe can display metrics in different formats such as json as well. In that way we can aggregate metrics from different endpoints and display them in one page.