DevOpsLab/docs/web-interface-quickstart.md

Быстрый старт веб-интерфейса DevOpsLab

Автор: Сергей Антропов
Сайт: https://devops.org.ru

✅ Что уже сделано

1. ✅ Создана git ветка feature/web-interface
2. ✅ Создана базовая структура проекта
3. ✅ Настроен FastAPI с базовыми шаблонами
4. ✅ Реализован MakeExecutor для выполнения команд
5. ✅ Создан Dashboard с базовой статистикой
6. ✅ Настроены HTMX шаблоны

🚀 Запуск

1. Установка зависимостей

cd app
pip install -r requirements.txt

2. Настройка окружения

# Скопируйте пример конфигурации
cp env.example .env

# Отредактируйте .env (особенно PROJECT_ROOT)
# PROJECT_ROOT должен указывать на корень проекта DevOpsLab

3. Запуск приложения

# Из директории app/
uvicorn main:app --reload --host 0.0.0.0 --port 8000

# Или через Python
python main.py

4. Открыть в браузере

• Веб-интерфейс: http://localhost:8000
• API документация: http://localhost:8000/api/docs

📁 Структура проекта

app/
├── api/v1/endpoints/    # API endpoints
│   └── stats.py         # ✅ Статистика (реализовано)
├── core/                # Ядро
│   ├── config.py        # ✅ Конфигурация
│   └── make_executor.py # ✅ Выполнение Makefile команд
├── templates/           # HTMX шаблоны
│   ├── base.html        # ✅ Базовый шаблон
│   ├── components/      # ✅ Компоненты (navbar, sidebar)
│   └── pages/           # Страницы
│       └── dashboard.html # ✅ Dashboard
├── static/              # Статические файлы
│   ├── css/main.css     # ✅ Стили
│   └── js/app.js        # ✅ JavaScript
└── main.py              # ✅ Точка входа FastAPI

📋 Следующие шаги

Приоритет 1: Базовый функционал

• Реализовать список ролей (/roles)
• Реализовать создание роли (/roles/create)
• Реализовать тестирование роли (/roles/{name}/test)

Приоритет 2: Preset'ы и тестирование

• Управление preset'ами (/presets)
• WebSocket для live логов тестирования
• История тестов (/tests)

Приоритет 3: Деплой и импорт/экспорт

• Деплой на живые серверы (/roles/{name}/deploy)
• Экспорт ролей (/roles/{name}/export)
• Импорт ролей (/roles/import)

Приоритет 4: Дополнительно

• База данных для истории
• Celery для фоновых задач
• Аутентификация

🔧 Разработка

Добавление нового endpoint

1. Создайте файл в app/api/v1/endpoints/
2. Создайте роутер:

from fastapi import APIRouter
router = APIRouter()

@router.get("/example")
async def example():
    return {"message": "Hello"}

3. Подключите в app/api/v1/router.py:

from app.api.v1.endpoints import example
api_router.include_router(example.router, prefix="/example")

Добавление новой страницы

1. Создайте шаблон в app/templates/pages/
2. Добавьте роут в app/main.py:

@app.get("/example", response_class=HTMLResponse)
async def example_page(request: Request):
    return templates.TemplateResponse("pages/example.html", {"request": request})

📚 Документация

• docs/WEB_INTERFACE_PROPOSAL.md - Полное предложение
• docs/WEB_INTERFACE_DETAILS.md - Детали работы
• docs/WEB_INTERFACE_DEPLOY_IMPORT_EXPORT.md - Деплой, импорт, экспорт
• docs/WEB_INTERFACE_QUICKSTART.md - Быстрый старт

🐛 Troubleshooting

Ошибка: ModuleNotFoundError

Убедитесь, что вы установили зависимости:

pip install -r requirements.txt

Ошибка: PROJECT_ROOT не найден

Проверьте .env файл и убедитесь, что PROJECT_ROOT указывает на правильный путь.

Ошибка: Порт уже занят

Измените порт в .env или убейте процесс:

lsof -ti:8000 | xargs kill

📝 Примечания

• Проект находится в ветке feature/web-interface
• Все изменения должны быть в директории app/
• Не изменяйте существующий код проекта (roles/, molecule/, etc.)