Вы должны разработать сетевую панель мониторинга (network dashboard), используя Python и Flask.

Панель — это веб-страница, которая отображает информацию в наглядной форме. В этом задании вам будут предоставлены примеры данных о различных устройствах в сети, а также потребуется использовать Flask и Jinja для представления этой информации.

Цель состоит не в том, чтобы создавать реальную систему мониторинга прямо сейчас. Прежде всего здесь нужно попрактиковаться в следующем:

• Flask
• маршруты (routes)
• шаблоны (templates)
• передаче информации из Python в HTML
• проверках условий с помощью if и циклах for в Jinja
• созданию аккуальной и удобного пользовательского интерфейса сайта

Данные, которые вы можете использовать ✅

devices = [
    {
        "name": "Главные маршрутизаторы",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Маршрутизатор",
        "status": "online",
        "response_time": 12,
        "location": "Серверная комната",
        "last_checked": "14:32:10",
        "uptime": "12 дней",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Главный маршрутизатор сети"
    },
    {
        "name": "Веб-сервер",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Сервер",
        "status": "online",
        "response_time": 34,
        "location": "Серверная комната",
        "last_checked": "14:32:12",
        "uptime": "4 дня",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Запускает внутренний веб-сайт"
    },
    {
        "name": "Принтер",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Принтер",
        "status": "offline",
        "response_time": None,
        "location": "Класс 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Неизвестно",
        "notes": "Не ответил при последней проверке"
    },
    {
        "name": "Компьютер учителя",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Компьютер",
        "status": "online",
        "response_time": 18,
        "location": "Класс 204",
        "last_checked": "14:32:16",
        "uptime": "6 часов",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Сервер хранения данных",
        "status": "warning",
        "response_time": 87,
        "location": "Серверная комната",
        "last_checked": "14:32:18",
        "uptime": "38 дней",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Высокое время отклика"
    }
]

Вам не нужно отображать всю информацию. Самостоятельно решите, что подходит для вашей панели управления. Вы также можете изменять, добавлять или удалять данные по своему желанию, если считаете, что какие-то из них неточны (например, может быть, время работы должно выражаться в секундах? 🤔).

Задача

1. Создайте панель управления (dashboard)

Создайте веб-страницу, которая отображает информацию об устройствах в сети.

Внешний вид панели управления зависит от вас.

Вы можете использовать, например:

• карточки для каждого устройства
• таблицы
• индикаторы состояния
• разделы
• иконки
• цвета
• статистику или сводные данные

Панель управления должна быть легко понятной при открытии страницы.

2. Использование Flask и маршрутов

Приложение должно использовать Flask.

Необходимо иметь минимум:

• один маршрут для отображения главной страницы/дашборда
• еще один дополнительный маршрут с другой функцией

Назначение дополнительного маршрута вы определяете сами.

Он может, например:

• отображать информацию об одном конкретном устройстве
• показывать только устройства в автономном режиме (offline)
• отображать отдельную страницу статуса
• показывать более подробную информацию
• отображать простую страницу «О приложении» («About»)

3. Использование шаблонов

HTML-страницы должны находиться в папке с названием templates.

Данные следует передавать из кода на Python в шаблон с помощью Flask. Для динамического отображения информации нужно использовать Jinja.

В решении необходимо использовать:

• переменные
• цикл for
• проверку условия if

Таким образом, информацию обо всех устройствах не следует вручную прописывать в HTML-коде.

4. Отображение статуса в наглядной форме

Дашборд должен упрощать просмотр состояния устройств.

Например:

• 🟢 Онлайн
• 🟡 Предупреждение
• 🔴 Не в сети

Вы можете использовать текст, CSS, иконки или другие визуальные решения.

5. Сделайте дашборд своим собственным

Не существует единственно правильного способа решить эту задачу.

Подумайте над следующими вопросами:

• Какая информация наиболее важна?
• Что пользователь должен увидеть в первую очередь?
• Что не нужно отображать?
• Как можно четко отобразить статус?
• Как сделать страницу аккуратной, даже если устройств много?
• Вы можете использовать CSS и при необходимости JavaScript, если хотите.

Требования

Решение должно:

• использовать Python и Flask
• использовать минимум два маршрута (routes)
• использовать минимум один шаблон HTML
• передавать данные из Python в шаблон
• использовать Jinja
• использовать минимум один цикл <emp>for</emp>
• использовать минимум одну проверку <emp>if</emp>
• отображать несколько записей из набора данных
• иметь явный способ отобразить статус

Готово?

Доставка