Ye shall forge a <emp>network dashboard</emp> usin’ Python an’ Flask.

A dashboard be a webpage that displays information in a clear manner. In this task ye’ll receive sample data on various devices within a network, an’ use Flask an’ Jinja to present said information.

The objective ain’t for ye to build a true monitoring system yet. Here ye are mainly drillin’ on:

• <emp>Flask</emp>
• <emp>routes</emp>
• <emp>templates</emp>
• sendin’ info from Python to HTML
• <emp>if</emp> checks an’ <emp>for</emp> loops in Jinja
• craftin’ a tidy an’ user-friendly webpage

Data ye 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": "The main routers fer 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' the 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's 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"
    }
]

Ye need not show all the info, matey. Pick yer own treasure for ye dashboard be it! Ye can alter, add, or toss away any o’ the loot if ye please, or if some o’ it be wrong as a barnacle on a hull (like, maybe uptime should be in seconds? 🤔).

The Task

1. Build a Dashboard

Forge a webpage that displays intel on the vessels within our fleet.

How ye want this dashboard to look is up to ye.

Ye can use, fer instance:

• cards fer each vessel
• tables
• status indicators
• sections
• icons
• colors
• statistics or summaries

The dashboard must be easy t’ understand when any mate opens the page.

2. Use ye Flask an’ Routes

Ye application shall use Flask.

Ye shall have at least:

• one route to show th’ main page/deck dashboard
• one more route with a different duty

What that extra route is fer, ye decide yerself.

It could, fer example:

• show info on one specific device
• show only devices that are dead/offline
• show its own status page
• show more detailed intel
• show a simple “about” page

3. Use Templates

The HTML pages should be stowed in a folder named templates.

Ye shall pass the data from the Python code to the template by way of Flask. Ye are obliged t’ use Jinja t’ display the information dynamically, ye scurvy dog.

This solution requires ye t’ use:

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

Thusly, ye shall not write down the info on all yer devices manually into the HTML code.

4. Show yer status clear like a barnacle on a hull

Yer dashboard needs to make it easy fer ye to spy out t’status o’ th’equipment.

Forexample:

• 🟢 Afloat (Online)
• 🟡 Trouble brewin’ (Warning)
• 🔴 Dead in th’water (Offline)

Ye may use words, CSS, icons, or other visual schemes to show yerself.

5. Make ye Dashboard yer own

There be no single right way to solve this task on deck.

Think it through:

• Which information be most important?
• What should the user spy first?
• What needs not be shown?
• How can status be displayed clear-like?
• How can the page be tidy even if there be many devices?
• Ye may use CSS and, if ye wish, JavaScript as well.

Requirements

Ye solution shall:

• use Python an’ Flask
• use at least two routes
• use at least one HTML template
• send data from Python t’ th’ template
• use Jinja
• use at least one for-loop
• use at least one if-check
• show several units from th’ dataset
• have a clear way o’ displayin’ status

Ye Be Ready?

Delivery