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

A dashboard is just a webpage that lays out info so it’s easy on the eyes. In this job, they’ll hand you some sample data ‘bout different devices on a network, an’ you’ll use Flask an’ Jinja to show off all that information.

Now don’t go thinkin’ we’re buildin’ a real monitor system yet. This time around, you’re mostly here to practice:

• Flask
• routes
• templates
• passin’ info from Python straight into your HTML
• runnin’ if-checks an’ for-loops in Jinja
• keepin’ things tidy an’ friendly for whoever uses ya site

Data You Can Use ✅

devices = [
    {
        "name": "Main Routers",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Router",
        "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": "Runnin' 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": "Didn't answer on the 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 last bit of info. Pick out whatever fits your dashboard just right. You’re free to change, add, or take away any data if that’s your wish, or reckon some of it ain’t quite accurate (like maybe uptime oughta be in seconds? 🤔).

The Task

1. Build a Dashboard

Build a webpage that shows information on the gadgets in the network.

How the dashboard looks is up to ya.

You could use things like:

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

The dashboard oughta be easy t’understand when someone 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 reside in a folder named templates.

The data needs to be sent from the Python code to the template using Flask. You oughta use Jinja to display the information dynamically.

The solution needs to make use of:

• variables
• an for loop
• an if check

So you ain’t supposed to write out all that info about every device by hand into the HTML code, hear me?

4. Show Status Clear as Day

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

Like so:

• 🟢 On the Upright
• 🟡 Givin’ a Warning
• 🔴 Off the Rails

You can use words, CSS, icons, or other visual tricks to get the job done.

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 the page stay tidy even with a heap of devices around?
• You’re free to use CSS, or some JavaScript if you feel like it.

Requirements

The solution shall:

• use Python and Flask
• use at least two routes
• use at least one HTML template
• pass 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