Files
autotest/HISTORY/2026-07-23-session-2.md
T

4.8 KiB
Raw Blame History

Сессия 2026-07-23 — архитектурные решения для app-autotest

Изучены эталонные проекты

1. /home/naeel/tf_provider/tfflaskcrud — эталон Flask-приложения для Nubes

Структура (минималистичная):

site/
├── app.py              # ~100 строк — весь backend в одном файле
├── static/
│   ├── favicon.svg     # SVG-фавикон Nubes
│   ├── logo.svg        # Логотип Nubes
│   └── style.css       # Все стили в одном файле, CSS Custom Properties
└── templates/
    └── index.html      # Единственный шаблон — вся страница в одном файле

Ключевые паттерны:

  • Вся логика в одном app.py (монолит, без blueprints)
  • Один роут "/" с GET+POST, вся логика — в index()
  • POST-redirect-GET (никакого AJAX)
  • Никаких ORM — сырой SQL через psycopg2 с параметризацией
  • Конфигурация только через переменные окружения (12-factor)
  • VERSION в коде, отображается в футере
  • No-JS (кроме onclick="return confirm(...)" для удаления)
  • Русский <html lang="ru">

Зависимости: Flask>=3.0, psycopg2-binary>=2.9, gunicorn>=21.2

2. /home/naeel/nubes/design — дизайн-система Nubes

Цвета:

Переменная HEX Роль
--brand-primary #2563eb Основной синий
--brand-primary-dark #1d4ed8 Hover
--brand-gray #d1d5db Границы
--brand-grey-light #f3f4f6 Фон заголовков
--destructive #ef4444 Удаление/ошибка
--green #22c55e Успех

Типографика:

  • Шрифт: system-ui (системный стек)
  • Базовый размер: 14px
  • Заголовки: 16px, font-weight: 600

Компоненты:

  • Карточки: border-radius: 12px, border: 1px solid --brand-gray, тень
  • Кнопки: height: 32px, border-radius: 6px, padding: 0 14px, Lucide-иконки
  • Таблицы: th — серый фон + uppercase, td — границы, hover на строках
  • Формы: лейбл text-sm, инпут h-9 rounded-md border
  • Модальные окна: оверлей + border-radius: 12px + тень

Иконки: Lucide (CDN: unpkg.com/lucide@latest)

CSS: CSS Custom Properties, без препроцессоров, без Tailwind/Bootstrap, стили в <style> теге в шапке HTML

JS-архитектура (из contracts-flask):

  • Паттерн: action → мутация state → render(state) — однонаправленный поток
  • state — единый источник истины, console.log(state) показывает всё

План воплощения app-autotest

Структура проекта (по образу tfflaskcrud)

app-autotest/
├── requirements.txt        # Flask, psycopg2, gunicorn, requests, PyYAML
├── site/
│   ├── app.py              # Точка входа (монолит)
│   ├── api.py              # Клиент к API облака (обёртка над requests)
│   ├── models.py            # Работа с БД (инстансы, тесты, конфигурация)
│   ├── static/
│   │   ├── favicon.svg      # Nubes favicon
│   │   ├── logo.svg         # Nubes logo
│   │   └── style.css        # Стили в дизайне Nubes
│   └── templates/
│       └── index.html       # Главная страница: список тестов + конфигурация

Что пойдёт своим путём (отличия от tfflaskcrud)

  • Множественные роуты — не только "/", нужны API-роуты для запуска тестов, статуса, конфигурации
  • JavaScript на фронте — для поллинга статуса тестов, асинхронных запросов к бэкенду (паттерн: state → render)
  • Модальные окна — для конфигурации теста (выбор сервиса, операций, параметров)
  • Pipeline stepper — визуально как в contracts: ○ Получение параметров → ○ Запуск → ○ Ожидание → ✓ Готово
  • Дизайн Nubes — карточки, кнопки, таблицы, модалки, Lucide-иконки