System Metrics

Here is the youtube video that shows how to display system metrics of your machine.

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>
EOF

We 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.