You are to develop a network dashboard using Python and Flask.

A dashboard is a webpage that displays information in an overview-friendly manner. In this task, you will be provided with sample data about different devices on a network, and use Flask and Jinja to present this information.

The goal is not for you to create a real monitoring system yet. Here, you should primarily practice the following:

• Flask
• routes
• templates
• sending information from Python to HTML
• if checks and for loops in Jinja
• creating a clean and user-friendly website

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 router 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": "Runs 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 to 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"
    }
]

You don’t need to display all the information. Choose yourself what fits your dashboard. You can also change, add, or remove data if you want, or if you think some of the data is inaccurate (e.g., maybe uptime should be in seconds? 🤔).

The Task

1. Create a dashboard

Create a webpage that displays information about the devices on the network.

How the dashboard should look is up to you.

You can use, for example:

• cards for each device
• tables
• status indicators
• sections
• icons
• colors
• statistics or summaries

The dashboard should be easy to understand when someone opens the page.

2. Use Flask and routes

The application should use Flask.

You must 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 one specific device
• show only devices that are offline
• display its own status page
• show more detailed information
• display a simple “about” page

3. Use templates

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

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

The solution should use:

• variables
• a for loop
• an if check

You should therefore not manually write the information about all devices into the HTML code.

4. Display status clearly

The dashboard should make it easy to see the devices’ status.

For example:

• 🟢 Online
• 🟡 Warning
• 🔴 Offline

You can use text, CSS, icons, or other visual solutions.

5. Make the dashboard your own

There is no single right way to solve this task.

Think through:

• Which information is most important?
• What should the user see first?
• What does not need to be shown?
• How can status be displayed clearly?
• How can the page remain tidy even with many devices present?
• You may use CSS and, if desired, JavaScript as well.

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 of displaying status

Done?

Delivery