Du skal utvikle et nettverksdashboard ved hjelp av Python og Flask.

Et dashboard er en nettside som viser informasjon på en oversiktlig måte. I denne oppgaven skal du få utdelt eksempeldata om forskjellige enheter på et nettverk, og bruke Flask og Jinja til å presentere denne informasjonen.

Målet er ikke at du skal lage et ekte overvåkingssystem ennå. Her skal du først og fremst øve på:

• Flask
• routes
• templates
• å sende informasjon fra Python til HTML
• if-sjekker og for-loops i Jinja
• å lage en ryddig og brukervennlig nettside

Data du kan bruke ✅

devices = [
    {
        "name": "Hovedruter",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Ruter",
        "status": "online",
        "response_time": 12,
        "location": "Serverrom",
        "last_checked": "14:32:10",
        "uptime": "12 dager",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Hovedruter for nettverket"
    },
    {
        "name": "Webserver",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Server",
        "status": "online",
        "response_time": 34,
        "location": "Serverrom",
        "last_checked": "14:32:12",
        "uptime": "4 dager",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Kjører intern nettside"
    },
    {
        "name": "Printer",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Printer",
        "status": "offline",
        "response_time": None,
        "location": "Klasserom 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Ukjent",
        "notes": "Svarte ikke på siste sjekk"
    },
    {
        "name": "Lærer-PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Datamaskin",
        "status": "online",
        "response_time": 18,
        "location": "Klasserom 204",
        "last_checked": "14:32:16",
        "uptime": "6 timer",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Lagringsserver",
        "status": "warning",
        "response_time": 87,
        "location": "Serverrom",
        "last_checked": "14:32:18",
        "uptime": "38 dager",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Høy responstid"
    }
]

Du trenger ikke vise all informasjonen. Velg selv hva som passer til dashboardet ditt. Du kan også endre, legge til eller fjerne data hvis du vil, eller at du mener noe av dataen er unnøyaktig (ex: kanskje uptime bør være i sekunder? 🤔).

Oppgaven

1. Lag et dashboard

Lag en nettside som viser informasjon om enhetene i nettverket.

Hvordan dashboardet skal se ut er opp til deg.

Du kan for eksempel bruke:

• kort for hver enhet
• tabeller
• statusindikatorer
• seksjoner
• ikoner
• farger
• statistikk eller oppsummeringer

Dashboardet skal være enkelt å forstå når noen åpner siden.

2. Bruk Flask og routes

Applikasjonen skal bruke Flask.

Du skal ha minst:

• én route som viser hovedsiden/dashboardet
• én ekstra route med en annen funksjon

Hva den ekstra routen brukes til, bestemmer du selv.

Den kan for eksempel:

• vise informasjon om én bestemt enhet
• vise bare enheter som er offline
• vise en egen statusside
• vise mer detaljert informasjon
• vise en enkel “about”-side

3. Bruk templates

HTML-sidene skal ligge i en mappe som heter templates.

Dataene skal sendes fra Python-koden til templaten ved hjelp av Flask. Du skal bruke Jinja til å vise informasjonen dynamisk.

Løsningen skal bruke:

• variabler
• en for-loop
• en if-sjekk

Du skal altså ikke skrive informasjonen om alle enhetene manuelt inn i HTML-koden.

4. Vis status på en tydelig måte

Dashboardet skal gjøre det enkelt å se statusen til enhetene.

For eksempel:

• 🟢 Online
• 🟡 Advarsel
• 🔴 Offline

Du kan bruke tekst, CSS, ikoner eller andre visuelle løsninger.

5. Gjør dashboardet til ditt eget

Det finnes ikke én riktig måte å løse denne oppgaven på.

Tenk gjennom:

• Hvilken informasjon er viktigst?
• Hva bør brukeren se først?
• Hva trenger ikke å vises?
• Hvordan kan status vises tydelig?
• Hvordan kan siden være ryddig selv om det finnes mange enheter?
• Du kan bruke CSS og eventuelt JavaScript dersom du ønsker det.

Krav

Løsningen skal:

• bruke Python og Flask
• bruke minst to routes
• bruke minst én HTML-template
• sende data fra Python til templaten
• bruke Jinja
• bruke minst én for-loop
• bruke minst én if-sjekk
• vise flere enheter fra datasettet
• ha en tydelig måte å vise status på

Ferdig?

Levering