Task: The Dashboard o' Networks,

Thou shalt devise a networking dashboard by means of Python and Flask.

A dashboard is but a web page which doth display information in most clear and orderly fashion. In this task, thou shalt be bestowed sample data concerning sundry devices upon the network, and employest Flask and Jinja to set forth such knowledge before thine eyes.

The aim herein is not yet for thee to forge an authentic monitoring system. Nay, rather shallst thou first and foremost practise these arts:

• Flask
• routes
• templates
• To convey intelligence from Python unto HTML
• If-checks and for-cycles within Jinja
• To craft a tidy and user-friendly web page

Datums thou mayst employe ✅

devices = [
    {
        "name": "Chief Routers",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Routers",
        "status": "online",
        "response_time": 12,
        "location": "Server Chamber",
        "last_checked": "14:32:10",
        "uptime": "12 days",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "The chief 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 Chamber",
        "last_checked": "14:32:12",
        "uptime": "4 days",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Doth run an 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": "Gave no answer upon the last check"
    },
    {
        "name": "Master's PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Computing Machine",
        "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 Chamber",
        "last_checked": "14:32:18",
        "uptime": "38 days",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "High response time"
    }
]

Thou needst not reveal all manner of information. Choose for thyself that which befits thine own dashboard. Thou mayest alter, append, or expunge the data if thou so desireth, or deem aught thereof inexact (e.g., perchance uptime ought to be reckoned in seconds? 🤔).

The Task

1. Forge a Dashboard

Craft a web-page that doth display tidings of the devices within the network.

How this dashboard ought to appear is left unto thy discretion.

Thou mayst employ, by way of example:

• cards for each device
• tables
• indicators of state
• sections
• icons
• hues
• reckoning or summaries

The dashboard shall be plain to comprehend upon opening the page.

2. Employ Flask and Routes

Thy application shall employ Flask.

Ye shall possess at least:

• one path that revealeth the main page or dashboard
• one further path bearing another function

What purpose this additional path serveth is left to thine own discretion.

It may, for instance:

• display information upon a single specific device
• shew but those devices which are offline
• present a distinct status page
• exhibit more detailed particulars
• show forth a simple “about” page

3. Employ Templates

Thou shalt place the HTML pages within a folder named templates.

The data shall be conveyed from the Python code unto the template by means of Flask. Thou art to employ Jinja for the dynamic display of information.

The solution shall make use of:

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

Thus, thou shalt not inscribe the particulars of every device manually into the HTML script.

4. Display Status with Clarity Most Beget

Thou shalt render it easy to discern the state of thine devices upon this dashboard.

As an example:

• 🟢 Online
• 🟡 Warning
• 🔴 Offline

Text, stylesheets (CSS), icons, or other visual wiles mayst thou employ.

5. Make th’ Dashboard Thine Own

There is no single right path to solving this task.

Ponder well upon these matters:

• What information holdeth greatest weight?
• What should the user beholde first of all?
• What needeth not to be shown at all?
• How might the state be displayed with clarity plain?
• How may the page remain orderly, e’en if many devices are present?
• Thou mayest employ CSS and, if thou so desireth, JavaScript as well.

Requisites

The solution shall:

• employ Python and Flask
• possess at least two routes
• wield at least one HTML-template
• convey data from Python unto the template
• utilize Jinja
• contain at least one for-loop
• bear at least one if-check
• display sundry units from the dataset
• have a manifest means of shewing its state

Art Thou Prepar’d?

Delivery