You’re gonna build a network dashboard usin’ Python an’ Flask.

A dashboard is jus’ a webpage that shows ya information in a clear way. In this here task, you’ll get some sample data on different devices in a network, an’ use Flask an’ Jinja to present all that info.

The goal ain’t for ya to make a real monitorin’ system yet. Here we’re mostly practicin’:

• Flask
• routes
• templates
• passin’ info from Python to HTML
• if-checks an’ for-loops in Jinja
• puttin’ together a clean an’ easy-to-use website

Data You Can Use ✅

devices = [
    {
        "name": "Main Routers",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Routers",
        "status": "online",
        "response_time": 12,
        "location": "Server Room",
        "last_checked": "14:32:10",
        "uptime": "12 days",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Main routers for the network"
    },
    {
        "name": "Web Server",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Server",
        "status": "online",
        "response_time": 34,
        "location": "Server Room",
        "last_checked": "14:32:12",
        "uptime": "4 days",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Running internal website"
    },
    {
        "name": "Printer",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Printer",
        "status": "offline",
        "response_time": None,
        "location": "Classroom 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Unknown",
        "notes": "Did not respond on last check"
    },
    {
        "name": "Teacher PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Computer",
        "status": "online",
        "response_time": 18,
        "location": "Classroom 204",
        "last_checked": "14:32:16",
        "uptime": "6 hours",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Storage Server",
        "status": "warning",
        "response_time": 87,
        "location": "Server Room",
        "last_checked": "14:32:18",
        "uptime": "38 days",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "High response time"
    }
]

Don’t need to show every bit o’ that information. Pick whatever fits your dashboard best. You can also change it, add more, or take some away if ya please, or reckon any o’ that data ain’t quite right (like maybe uptime oughta be in seconds? 🤔).

The Task

1. Build a Dashboard

Build a webpage that shows information about the devices on the network.

How the dashboard looks is up to ya.

Ya can use, fer instance:

• cards fer each device
• tables
• status indicators
• sections
• icons
• colors
• stats or summaries

The dashboard should be easy t’understand when somebody opens the page.

2. Use Flask and Routes

The application should use Flask.

You need to have at least:

• one route that displays the main page/dashboard
• one additional route with a different function

What the additional route is used for is up to your discretion.

It can, for example:

• display information about a specific device
• show only devices that are offline
• display a separate status page
• provide more detailed information
• display a simple “about” page

3. Use templates

The HTML pages should sit in a folder named templates.

The data needs to be sent from the Python code to the template using Flask. You gotta use Jinja to show that info dynamically, partner.

Your solution oughta use:

• variables
• an for-loop
• an if-check

So you better not write out all them device details by hand inside the HTML code.

4. Show Status Clear-Like a Sheriff’s Badge

The dashboard oughta make it easy to see how them devices are doin’.

Like so:

• 🟢 Up an’ Runnin’
• 🟡 Warnin’ Sign
• 🔴 Down on Its Lonesome

You can use words, CSS, icons, or any other visual trickery that fits the bill.

5. Make the Dashboard Your Own

There ain’t just one right way to tackle this job.

Think it through:

• Which info matters most?
• What should the user see first off?
• What don’t need showin’?
• How can we make the status clear as day?
• How can keep the page tidy even with a whole heap of devices around?
• Feel free to use CSS, or maybe some JavaScript if you’re feelin’ fancy.

Requirements

The solution shall:

• use Python and Flask
• use at least two routes
• use at least one HTML template
• send data from Python to the template
• use Jinja
• use at least one for loop
• use at least one if check
• display multiple units from the dataset
• have a clear way to show status

Done?

Delivery