Avast ye scurvy dogs, this here text was machine-translated an’ may contain errors, so keep yer wits about y’all!
Ye shall forge a
A dashboard be a webpage that shows ye information in a clear manner. In this task, ye’ll get sample data ‘bout different devices on a network, an’ use Flask an’ Jinja to display said info.
The aim ain’t for ye to build a real monitor system yet. Here ye must practice mainly upon:
Flask routes templates - Sendin’ info from Python to HTML
if -checks an’for -loops in Jinja- Buildin’ a tidy an’ user-friendly web page
Theory
Ye shall find said theory at
Read especially the part on
If ye be needin’ more info, ye can also use Flask’s official docs here:
Anythin’ besides Flask?
If ye be wishin’ to use another framework, ask yer teacher first.
Datums ye can use ✅
Ye can use the followin’ data as yer startin’ point press here
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": "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 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 no show all the information. Pick fer yerself what be fit for ye dashboard. Ye can also change, add, or scuttle away the data if ye wish, or if ye reckon some o’ it be inaccurate (like: maybe uptime should be in seconds? 🤔).
The Task, ye scurvy dogs!
1. Forge a Dashboard
Forge a webpage that showeth the intel on the devices in our network.
How this dashboard should look be left to ye.
Ye may use, fer example:
- cards fer each device
- tables
- status indicators
- sections
- icons
- colors
- stats or summaries
The dashboard must be easy t’ understand when some scallywags opens the page.
2. Use Flask an’ Routes
Ye shall use Flask fer yer application.
Ye must have at least:
- one route to show th’ main page/dashboard
- one more route with a different function
What ye choose t’ use that extra route fer is up ter ye.
It could, fer example:
- show information on one specific device
- show on’y devices dat are offline
- display its own status page
- show more detailed information
- present a simple “about” page
3. Use templates
The HTML pages shall be kept in a folder named
The data shall be sent from the Python code to the template via Flask. Ye must use Jinja to display the information dynamically.
The solution shall employ:
- variables
- an
for -loop - an
if -check
Ye shall thus
4. Show yer status plain an’ clear-like
The dashboard’s got to make it easy fer spottin’ the state o’ them devices.
Forexample:
- 🟢 Afloat
- 🟡 Wary
- 🔴 Lost at sea
Ye can use words, CSS, pictograms, or other visual tricks t’ get by with.
5. Make ye dashboard yer own
There be no single right way to solve this task, matey.
Think it through:
- Which information be most important?
- What should the user see first?
- What needn’t be shown?
- How can the status be displayed clearly?
- How can the page stay tidy even with many devices?
- Ye may use CSS an’ possibly JavaScript if ye wish, savvy?
Demands
Ye solution shall:
- use Python an’ Flask
- have at least two routes
- use at least one HTML template
- pass 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?
Challenge! - Make ye dashboard better
If be finished with yer task, then expand yer solution, matey.
Ye can do like this fer example:
- create a detail page fer each device
- filter devices by status
- sort the devices
- show count o’ devices that be online/offline
- show average response time
- make search or filtering
- add more devices
- create charts or other visualization
- make dashboard responsive
- make a more thorough design
Extra challenge - Real network check
If ye be feelin’ brave enough to sail further, ye can investigate how Python can check if a real ship answers on the seas (network). Ye could spy on these here things fer instance:
ping- Nmap
- ports an’ services
This be not required in the main quest.
Delivery
Arrr matey, ye be doin’ this here task
Ye’ll keep yer soul by committin’ yer work to
The repository shall contain these treasures:
- The Python code fer the Flask application
- The HTML templates
- Any and all CSS an’ JavaScript files
- A short tale on how the solution works its magic
- A brief explanation of how ye’ve used
routes an’templating like a true buccaneer
This explanation can be hidden away in a separate .md file, savvy?