Host Details Viewer

[!WARNING]
This code was generated by Gemini Pro 2.5 and NOT reviewed, this is an experiment

A simple Python Flask web application to display live host details like OS information, kernel version, and versions of configured Python and system packages.

Customizable Host Details Dashboard

This project provides a flexible and modern dashboard for viewing live system information. Built with Python (Flask) and a dynamic JavaScript frontend, it's designed to be easily modified to suit your specific monitoring needs.

Think of this as a starting point or template. Whether you want to change the visual style, add new system metrics, or track different packages, this guide will walk you through the process.

Core Features

• Dynamic UI: A responsive, auto-refreshing dashboard built with Bootstrap 5.
• Extensible Data Collection: Easily add new functions to pull more data from the host OS.
• Customizable Icons & Styles: Modify the look and feel using Bootstrap Icons and simple CSS.
• JSON Configuration: Add or remove monitored packages by editing a simple config.json file.
• Container-Ready: Includes a Containerfile for easy deployment with Podman or Docker.
• Clear API: A simple /data endpoint provides all information in a clean JSON format.
• Displays detailed OS and kernel information.
• Shows versions of specified Python packages.
• Shows versions of specified system packages (supports Debian/Ubuntu, RHEL/CentOS/Fedora, Arch, macOS with Homebrew).

Getting Started

Project Structure

.
├── app.py
├── config.json
├── Containerfile
├── helpers.py
├── README.md
├── requirements.txt
├── static/
│   ├── main.js
│   └── style.css
├── templates/
│   └── index.html
├── .dockerignore
└── .gitignore

You can run this application either locally using Python for development or as a container.

Running Locally with Python

1. Clone & Setup:

   git clone [https://github.com/nzwulfin/python-pol.git](https://github.com/nzwulfin/python-pol.git)
   cd python-pol
   python3 -m venv venv
   source venv/bin/activate

2. Install Dependencies:

   pip install -r requirements.txt

3. Run:

   python app.py

4. Access: Open http://127.0.0.1:5000 in your browser.

Running with Podman (or Docker)

1. Build the Image:

   # (Docker users can substitute 'podman' with 'docker')
   podman build -t host-details-app-ubi .

2. Run the Container:

   podman run -d -p 8080:8000 --name my-host-details-instance host-details-app-ubi

3. Access: Open http://localhost:8080 in your browser.

---

Customization Guide

This guide explains how to modify different parts of the application.

1. Customizing Monitored Packages

This is the easiest customization. Simply open config.json and edit the lists.

• python_packages: Add or remove names of Python packages.
• system_packages: Add or remove names of system packages (like nginx, openssl, etc.).

{
  "python_packages": [ "Flask", "gunicorn", "distro" ],
  "system_packages": [ "bash", "openssl", "curl" ]
}

2. Customizing UI Icons

The UI uses Bootstrap Icons. Changing an icon is as simple as changing a CSS class name.

File to Edit: templates/index.html

Let's say you want to change the main header icon.

1. Find this line in templates/index.html:

   <a class="navbar-brand" href="#">
       <i class="bi bi-motherboard-fill"></i>
       Live Host Details
   </a>

2. Go to the Bootstrap Icons website and find an icon you like, for example, "terminal-fill".
3. Copy its class name (bi-terminal-fill).
4. Replace the old class in the file:

   <a class="navbar-brand" href="#">
       <i class="bi bi-terminal-fill"></i> Live Host Details
   </a>

You can apply this same process to any icon in the index.html file or the static/main.js file where icons are dynamically generated.

3. Adding New System Details

This is a more advanced customization that involves touching the backend, the API, and the frontend. Let's walk through adding a System Uptime metric as an example.

Step 3.1: Add a Data-Gathering Function (Backend)

First, we need a function to get the new piece of data.

File to Edit: helpers.py

Add a new Python function to get the system uptime. On Linux, this can be read from /proc/uptime.

# Add this function to helpers.py
import math

def get_system_uptime():
    """Retrieves system uptime (Linux only)."""
    try:
        with open('/proc/uptime', 'r') as f:
            uptime_seconds = float(f.readline().split()[0])
            days = math.floor(uptime_seconds / 86400)
            hours = math.floor((uptime_seconds % 86400) / 3600)
            minutes = math.floor((uptime_seconds % 3600) / 60)
            return f"{days}d {hours}h {minutes}m"
    except FileNotFoundError:
        return "N/A (Linux only)" # Gracefully fail on non-Linux
    except Exception:
        return "Error"

Step 3.2: Add the New Data to the API (Backend)

Now, we need to include the result of our new function in the JSON data that the API sends to the frontend.

File to Edit: app.py

1. Import the new function from helpers.py.
2. Call the function inside get_all_data() and add its result to the os_details dictionary.

# In app.py
# 1. Import the new function
from helpers import get_os_info, get_python_package_version, get_system_package_version, get_system_uptime

# ... (other code)

def get_all_data():
    """Helper function to gather all system data."""
    config = load_config()
    os_details = get_os_info()
    
    # 2. Call the function and add its result to the dictionary
    os_details['uptime'] = get_system_uptime()
    
    # ... (the rest of the function remains the same)
    
    return {
        "os_details": os_details,
        # ...
    }

Step 3.3: Display the New Data on the Page (Frontend)

Finally, we need to tell our JavaScript code how to display this new "uptime" value.

File to Edit: static/main.js

Inside the updateData function, find the block of code that builds the osDetailsContainer. Add a new line to render our uptime data. We'll use the createOsDetailItem helper function that's already there and pick a suitable icon (e.g., bi-stopwatch).

// Inside the updateData function in static/main.js

// ...

// 2. Update OS Details Card
const os = data.os_details;
osDetailsContainer.innerHTML = `
    ${createOsDetailItem('bi-hdd-stack', 'Hostname', os.node)}
    ${createOsDetailItem('bi-microsoft', 'System', os.system)}
    ${createOsDetailItem('bi-ubuntu', 'Distribution', os.distro_name)}
    ${createOsDetailItem('bi-git', 'Kernel Release', os.release)}
    ${createOsDetailItem('bi-gear-wide-connected', 'Kernel Version', os.version)}
    ${createOsDetailItem('bi-cpu', 'Processor', os.processor)}
    ${createOsDetailItem('bi-memory', 'Architecture', os.machine)}
    ${createOsDetailItem('bi-stopwatch', 'System Uptime', os.uptime)} // <-- ADD THIS LINE
`;
// ...

After making these changes and restarting the application, the new "System Uptime" metric will appear on the dashboard! You can follow this three-step pattern (helper -> API -> frontend) to add any new system detail you want to monitor.