План: SLA Dashboard для кейса #4549142

Описание для человека (что увидишь на странице)

Общий вид: Страница выглядит как настоящий мониторинговый дашборд в стиле Grafana — тёмная тема, сетка панелей с тонкими рамками, данные обновляются в реальном времени. Всё на одном экране, без скролла на десктопе (на мобиле — вертикальная раскладка).

Шапка (top bar):

Слева: название дашборда + номер тикета (SLA MONITOR / #4549142)
Справа: текущее время (тикающие часы), статус-индикатор (зелёный/жёлтый/красный — зависит от времени ожидания)
Навигация: ссылка «← BACK TO TIMER» на главную

Ряд ключевых метрик (4 big number панели):

TIME ELAPSED — сколько дней/часов/минут прошло (то же, что флип-часы, но в цифровом виде)
LAST ACTIVITY — сколько дней/часов назад было последнее событие
SLA STATUS — BREACHED (красный), так как SLA давно нарушен
COMMENTS — количество комментариев

Центральная область — основной график:

Линейный график ACTIVITY TIMELINE — по оси X время (дни с момента создания), по оси Y — количество событий (комментарии, изменения лейблов, упоминания). Визуально — горизонтальная полоса с «вспышками» активности.

Нижняя часть — 3 панели в ряд:

COMMENTS LOG — список последних комментариев (автор, текст, дата), стилизованный как терминал/лог
STATUS TIMELINE — вертикальная лента событий: создание → лейблы → комментарии → текущий статус
CASE DETAILS — таблица-карточка: автор, assignee, labels, created, updated, milestone

Футер:

DATA SOURCE: GITHUB API | LAST UPDATED: <timestamp> | AUTO-REFRESH: 60s
Ссылка на сам тикет (откроется в новой вкладке)

Поведение:

Все данные подгружаются из GitHub API (fetch на клиенте при загрузке)
График обновляется раз в 60 секунд
Анимация появления панелей (fade-in)
На мобиле — панели стоят друг под другом

Промпт для AI-генерации страницы

SYSTEM / CONTEXT

Ты — фронтенд-разработчик. У тебя есть Astro-проект (v7, статичный сайт) с одной страницей — флип-часы. Стек: Astro + vanilla CSS + vanilla TypeScript. Никаких фреймворков (React/Vue/Svelte), никаких CSS-фреймворков (Tailwind). Единственный npm-пакет — astro. Шрифты подключены через Google Fonts <link>: Inter, Cormorant Garamond, IBM Plex Mono.

Тема проекта (design tokens в global.css):

--background: #090a0a;
--foreground: #e9e4d9;
--gold: #b99a62;
--font-inter: "Inter", sans-serif;
--font-cormorant: "Cormorant Garamond", Georgia, serif;
--font-mono-local: "IBM Plex Mono", monospace;

ЗАДАЧА

Создай новую страницу src/pages/dashboard.astro — «панель мониторинга SLA» для одного GitHub-тикета. Страница должна выглядеть как реалистичный Grafana/Monitoring дашборд (dark theme, grid панелей, данные в реальном времени).

ТРЕБОВАНИЯ К ВИЗУАЛУ

Общая стилистика: Тёмная тема (#090a0a фон), панели с тонкими рамками (1px, rgba(255,255,255,0.06)), скругление 4px. Цвета акцентов: gold (#b99a62) для положительных значений, красный (#e74c3c) для BREACHED/критических, оранжовый (#f39c12) для предупреждений, зелёный (#2ecc71) для OK. Шрифт данных — IBM Plex Mono, заголовки панелей — Inter caps 9-10px с letter-spacing 0.16em (как микро-лейблы на существующей странице).
Layout: CSS Grid, основная раскладка — grid-template-areas:
- Top bar (1 строка)
- Metrics row (4 колонки: 4 big number панели)
- Main chart (1 панель на всю ширину)
- Bottom row (3 колонки: Comments, Status Timeline, Case Details)
- На мобиле (max-width: 768px) — всё в одну колонку
Навигация: Header содержит ссылку ← BACK TO TIMER (ссылается на BASE_URL), номер тикета, и живые часы (текущее время, обновляется каждую секунду через JS).
Панели:

a) Big Number Panels (4 штуки):
- Каждая: верхний лейбл (mono 9px caps), главное число (IBM Plex Mono 32-40px, жирный), подпись (mono 9px, muted)
- TIME ELAPSED — XXd XXh XXm (рассчитывается из даты создания тикета)
- LAST ACTIVITY — сколько дней/часов назад было последнее событие
- SLA STATUS — BREACHED (красный) с мигающим индикатором (CSS анимация)
- COMMENTS — количество комментариев
b) Activity Timeline Chart:
- Используй Chart.js (подключи через CDN <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>)
- Line chart, dataset: дни по оси X (от 1 до N), количество событий по Y
- Стиль: тонкая линия gold, area fill с gradient (gold → transparent), без grid lines на фоне, axis labels в mono 9px
- Заголовок панели: ACTIVITY TIMELINE (mono 9px caps, letter-spacing 0.16em, muted)
c) Comments Log:
- Стилизован под терминал/лог: моноширинный шрифт, фон #0d0e0e, зелёный текст (#2ecc71) для автора, gold для даты, #e9e4d9 для тела комментария
- Каждая строка: [DD.MM.YYYY HH:MM] AUTHOR: comment text (обрезанный до 2 строк, с "..." )
- Скролл контейнер с фиксированной высотой (300px)
- Заголовок: COMMENTS LOG
d) Status Timeline:
- Вертикальная лента: кружки-маркеры (gold) с линией-стержнем между ними
- Каждое событие: дата + описание (e.g., "Issue opened", "Label: bug added", "Comment by user")
- Последний маркер — красный, мигающий (текущий статус — без ответа)
- Скролл контейнер
- Заголовок: STATUS TIMELINE
e) Case Details:
- Таблица: KEY | VALUE в двух колонках
- Строки: Created, Updated, Author, Assignee, Labels, Milestone, Repository
- Значения в mono, ключи в muted caps
- Заголовок: CASE DETAILS
Футер: DATA SOURCE: GITHUB API | LAST UPDATED: <timestamp> | AUTO-REFRESH: 60s — mono 9px, muted, по центру

ДАННЫЕ

Номер тикета: 4549142
Owner/reko: OWNER/REPO (placeholder — заменить на реальный)
GitHub API endpoint: https://api.github.com/repos/{owner}/{repo}/issues/{number} и /issues/{number}/comments
Все данные загружаются client-side через fetch в <script>
Первая загрузка при открытии страницы + обновление раз в 60 секунд
Пока данные грузятся — показывай скелетоны/плейсхолдеры (серые пульсирующие блоки, CSS animation)

ФАЙЛЫ ДЛЯ ИЗМЕНЕНИЯ

src/pages/dashboard.astro — новая страница (основной файл, HTML + CSS + JS)
src/pages/index.astro — добавить ссылку DASHBOARD → в хедер
src/styles/global.css — не трогать (все стили dashboard в <style> теге страницы)

ВАЖНО

Не устанавливай npm-пакеты. Chart.js — через CDN.
Сохрани design tokens проекта (цвета, шрифты)
CSS должен быть в <style> теге страницы (Astro-способ), не в global.css
Страница должна graceful degradation: если JS отключён, показать заголовок и статичные данные
Не используй эмодзи
Код должен быть чистым, без комментариев

9.5 KiB Raw Permalink Blame History Unescape Escape