Task: The Dashboard o' Networks

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

A dashboard is naught but a web-page which doth display information in most clear and tidy fashion. In this task, thou shalt be furnished with sample data concerning sundry devices upon the network, and employ both Flask and Jinja to present such tidings.

The aim herein is not that thou shouldst craft an authentic system of surveillance forthwith. Rather, thy primary purpose shall be to practice thusly:

• Flask
• routes
• templates
• To convey intelligence from Python unto HTML
• If-checks and for-loops within Jinja
• To forge a page neat in order and pleasant for the user’s eye

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": "Twelve days",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "The chief routers of 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": "Four days",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Runneth an internal site"
    },
    {
        "name": "Printer",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Printer",
        "status": "offline",
        "response_time": None,
        "location": "Classroom Two Hundred and Four",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Unknown",
        "notes": "Gave no answer at the last check"
    },
    {
        "name": "Master's PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Computer",
        "status": "online",
        "response_time": 18,
        "location": "Classroom Two Hundred and Four",
        "last_checked": "14:32:16",
        "uptime": "Six 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": "Thirty-eight days",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "High response time"
    }
]

Thou needst not shew forth all manner of tidings. Choose thine own guise for thy board of state. Yea, thou mayest alter, append, or cast aside the numbers as thy will doth command; save if thou deeme any thereof to be untruthful or ill-measured (forsooth, might it not stand in seconds rather than minutes? 🤔).

The Task

1. To Forge a Dashboard

Craft ye a web page that sheweth information upon the devices within thine network.

How this dashboard shall appear is left unto thy discretion.

Ye mayst employ, by way of example:

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

This dashboard ought to be plain and comprehensible when any soul openeth the page.

2. Employ Flask and Routes

The application shall employ Flask.

Thou shalt possess at least:

• one path that displayeth the chief page or dashboard
• one additional path with a distinct function

What use this further path is to have, thou dost decide thyself.

It may, for instance:

• shew information upon but a single device
• shew naught save those devices which are offline
• present its own page of state
• reveal more intricate particulars
• present a simple “about” page

3. Employ Templates

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

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

This solution shall make use of:

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

Thus, thou shalt not inscribe the particulars of all devices manually into the HTML code.

4. Shew the state most plainly

Th’ dashboard shall make it easy to spy upon the condition of thine devices.

As an example:

• 🟢 Online
• 🟡 Warning
• 🔴 Offline

Ye may employ text, CSS, icons, or other visual means unto this end.

5. To Make thine Dashboard Thine Own

There is no single right path to solve this task.

Ponder thusly:

• What knowledge is of most import?
• What should the user behold first?
• What needeth not to be shown?
• How may the state be displayed with clarity?
• How can the page remain orderly, even when many devices are present?
• Thou mayest employ CSS and, if thou wishest, JavaScript as well.

Requisites

The solution shall:

• employ Python and Flask
• wield at least two routes
• utilize no fewer than one HTML template
• dispatch data from Python unto the template
• make use of Jinja
• contain a minimum of one for-loop
• possess at least one if-check
• display several units from the dataset
• bear a clear manner to exhibit state

Art Thou Prepared?

Delivery