Вы должны разработать веб-дашборд с помощью 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. Создайте панель управления

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

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

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

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

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

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>
• содержать как минимум одну проверку if (<emp>if</emp>)
• отображать несколько элементов из набора данных
• иметь явный способ отображения статуса

Готово?

Доставка