Что такое Prefab Advanced Operations Dashboard?
Это готовое приложение‑демонстрация, полностью написанное на Python с использованием DSL Prefab. Оно генерирует статический HTML, который работает в браузере без серверной части. Главное – всё, что обычно требует JavaScript (фильтры, слайдеры, переключатели), реализовано через реактивный стейт Prefab.
Почему это важно для вас?
Если вы:
- разрабатываете аналитические дашборды для внутренних команд,
- пытаетесь сократить зависимость от фронтендеров,
- нуждаетесь в быстрых прототипах, которые можно экспортировать в виде чистого HTML,
- работаете с показателями SLO, KPI и мониторингом процессов,
то этот шаблон спасёт часы разработки и избавит от постоянных «надо добавить JavaScript‑клик».
Как быстро стартовать?
1. Склонируйте репозиторий github.com/prefab-cloud/prefab‑advanced‑colab.
2. Установите зависимости: pip install prefab-sdk.
3. Запустите python dashboard.py – получите файл dashboard.html.
4. Откройте его в браузере и наслаждайтесь интерактивностью без серверов.
Ключевые возможности без единой строки JS
- Фильтрация по регионам. Кнопки меняют
selected_regionв стейте, а связанные таблицы и графики автоматически подгружаются. - Настройка SLO‑цели. Слайдер меняет
slo_target, а кольцевая диаграмма и прогресс‑бар мгновенно показывают отклонения. - Тёмный и компактный режим. Переключатели меняют булевы флаги
dark_modeиcompact, влияя на CSS‑классы в реальном времени. - Редактируемое имя оператора. Input‑поле обновляет
operator_name, и все подписи в UI становятся персонализированными. - Триаж‑заметки. Список
notesпозволяет добавить комментарий к выбранному запуску без перезагрузки страницы.
Типичный рабочий процесс
Выбираете регион → наблюдаете метрики runs, success rate, avg latency, ROI → регулируете SLO‑трекер, чтобы увидеть, достигнут ли порог. Если success rate падает ниже цели, появляется бейдж “Below target”, что сразу сигнализирует команде о необходимости вмешательства.
Что делает графики «живыми»?
Все диаграммы (LineChart, BarChart, PieChart, Ring, Progress, Sparkline) привязаны к объекту STATE. При изменении любого ключа стейта автоматически вызывается пере‑рендеринг соответствующего компонента. Это достигается за счёт реактивного движка Prefab, который генерирует минимальный JavaScript‑слой лишь для обновления DOM.
Как добавить свои данные?
В начале скрипта объявлен initial_state. Чтобы интегрировать свои источники, замените:
DAILY_BY_REGION– массивы с временными рядами.RUNS_BY_REGION,STATUS_BY_REGION,PIPELINE_BY_REGION– таблицы и строки для графиков.KPI_BY_REGION– объект с полямиruns,success_rate,avg_latency,roi,spark.
После замены данных ничего больше менять не придётся – все UI‑элементы подстроятся автоматически.
Полезные ссылки
- Официальная документация Prefab: prefab.prefect.io/docs
- Исходный код примера: github.com/prefab-cloud/prefab-advanced-colab
- Библиотека для построения графиков: github.com/prefab-cloud/prefab-charts
