Crossview: дашборд для Crossplane и Kubernetes

29 мая 2026 г.

#crossplane#dashboard#go#helm#kubernetes#react#websocket
Crossview Dashboard

Демо-видео

📹 Смотреть демо-видео

Содержание

Возможности

  • Отслеживание ресурсов в реальном времени (Real-Time Resource Watching): Мониторинг любых ресурсов Kubernetes в реальном времени с событийно-ориентированными обновлениями с использованием Kubernetes Informers

  • Поддержка нескольких кластеров (Multi-Cluster Support): Управление несколькими контекстами Kubernetes и переключение между ними без затруднений

  • Визуализация ресурсов (Resource Visualization): Просмотр и визуализация ресурсов Crossplane (провайдеры, XRD, композиции, заявки и т.д.)

  • Детальная информация о ресурсах (Resource Details): Просмотр исчерпывающей информации о ресурсах, включая состояния условий, метаданные, события и связи

  • Современный интерфейс (Modern UI): Построен на React и Chakra UI с поддержкой тёмной темы

  • Высокая производительность (High Performance): Backend построен на Go и фреймворке Gin для оптимальной производительности

  • Поддержка WebSocket: Обновления в реальном времени через WebSocket-соединения

  • Интеграция SSO: Поддержка аутентификации через OIDC и SAML

Начало работы

Предварительные требования

  • Node.js 20+ (для разработки frontend)

  • Go 1.24+ (для backend-сервера)

  • База данных PostgreSQL (порт 8920 по умолчанию, или задаётся через переменную окружения DB_PORT)

  • Конфигурационный файл Kubernetes по пути ~/.kube/config (или задаётся через переменную окружения KUBECONFIG)

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

npm install

Конфигурация

Скопируйте пример конфигурационного файла и обновите его в соответствии с вашими настройками:

cp config/config.yaml.example config/config.yaml

Отредактируйте config/config.yaml, указав учётные данные базы данных:

  • Порт базы данных: 8920 (или ваш порт)

  • Пароль базы данных: password (или ваш пароль)

Либо используйте переменные окружения (они имеют приоритет):

export DB_HOST=localhost
export DB_PORT=8920
export DB_NAME=crossview
export DB_USER=postgres
export DB_PASSWORD=password

Разработка

Запуск frontend и backend по отдельности:

Терминал 1 — Frontend:

npm install
npm run dev

Терминал 2 — Backend (Go-сервер):

cd crossview-go-server
go run main.go app:serve

Приложение будет доступно по адресу http://localhost:5173 (frontend проксирует запросы /api на backend по адресу http://localhost:3001)

Сборка

Сборка для производственной среды:

npm run build

Это создаёт папку dist/ со скомпилированным frontend.

Производственный режим

Для запуска в производственном режиме:

  1. Соберите frontend:

    npm run build

  2. Запустите Go-сервер (он будет раздавать frontend из папки dist/):

    cd crossview-go-server
go run main.go app:serve

Приложение будет доступно по адресу http://localhost:3001 (как frontend, так и API)

Backend API

Backend API построен на Go с использованием фреймворка Gin и работает на порту 3001. Он предоставляет следующие эндпоинты (endpoints):

  • GET /api/health — Проверка работоспособности и состояния соединения

  • GET /api/contexts — Список доступных контекстов Kubernetes

  • GET /api/contexts/current — Получение текущего контекста Kubernetes

  • POST /api/contexts/current — Установка контекста Kubernetes

  • GET /api/resources?apiVersion=&kind=&namespace=&context= — Список ресурсов

  • GET /api/resource?apiVersion=&kind=&name=&namespace=&context= — Получение отдельного ресурса

  • GET /api/events?kind=&name=&namespace=&context= — Получение событий ресурса

  • GET /api/managed?context= — Список управляемых ресурсов

  • GET /api/watch — WebSocket-эндпоинт для отслеживания ресурсов в реальном времени

  • POST /api/auth/login — Вход пользователя

  • POST /api/auth/logout — Выход пользователя

  • GET /api/auth/check — Проверка статуса аутентификации

Backend использует Go Kubernetes client с Informers для эффективного событийно-ориентированного мониторинга ресурсов:

При запуске в поде Kubernetes:

  • Автоматически использует токен сервисного аккаунта (файл конфигурации не требуется)

  • Обращается к тому же кластеру, в котором запущен под

  • Использует /var/run/secrets/kubernetes.io/serviceaccount/

При локальном запуске:

  • ~/.kube/config (по умолчанию)

  • Переменная окружения KUBECONFIG

Примеры развёртывания см. в Руководстве по развёртыванию в Kubernetes.

Helm Chart

Crossview можно развернуть с помощью Helm, что упрощает развёртывание и управление в Kubernetes.

Добавление Helm-репозитория

helm repo add crossview https://crossplane-contrib.github.io/crossview
helm repo update

Установка через Helm

helm install crossview crossview/crossview \
  --namespace crossview \
  --create-namespace \
  --set secrets.dbPassword=your-db-password \
  --set secrets.sessionSecret=$(openssl rand -base64 32)

Подробнее см.:

Docker

Сборка Docker-образа

docker build -t ghcr.io/crossplane-contrib/crossview:latest .

Образы публикуются в GHCR (ghcr.io/crossplane-contrib/crossview) при каждом релизе.

Запуск с переменными окружения (рекомендуется)

Переменные окружения имеют приоритет над конфигурационными файлами:

docker run -p 3001:3001 \
  -e DB_HOST=host.docker.internal \
  -e DB_PORT=8920 \
  -e DB_NAME=crossview \
  -e DB_USER=postgres \
  -e DB_PASSWORD=password \
  -e KUBECONFIG=/app/.kube/config \
  -e SESSION_SECRET=your-secret-key-here \
  -v ~/.kube/config:/app/.kube/config:ro \
  ghcr.io/crossplane-contrib/crossview:latest

Запуск с конфигурационным файлом

Подмонтируйте конфигурационный файл как том:

docker run -p 3001:3001 \
  -v $(pwd)/config/config.yaml:/app/config/config.yaml:ro \
  -e KUBECONFIG=/app/.kube/config \
  -v ~/.kube/config:/app/.kube/config:ro \
  ghcr.io/crossplane-contrib/crossview:latest

Запуск через Docker Compose

Создайте файл docker-compose.yml:

services:
  crossview:
    build: .
    ports:
      - "3001:3001"
    environment:
      - DB_HOST=postgres
      - DB_PORT=5432
      - DB_NAME=crossview
      - DB_USER=postgres
      - DB_PASSWORD=password
      - KUBECONFIG=/app/.kube/config
      - SESSION_SECRET=your-secret-key-here
    volumes:
      - ./config/config.yaml:/app/config/config.yaml:ro
      - ~/.kube/config:/app/.kube/config:ro
    depends_on:
      - postgres

  postgres:
    image: postgres:latest
    environment:
      - POSTGRES_DB=crossview
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - "8920:5432"
    volumes:
      - postgres_data:/var/lib/postgresql

volumes:
  postgres_data:

Затем выполните:

docker-compose up

Приоритет конфигурации

Приложение загружает конфигурацию в следующем порядке (от высшего приоритета к низшему):

  1. Переменные окружения (например, DB_HOST, DB_PORT, DB_PASSWORD)

  2. Конфигурационный файл (config/config.yaml — подмонтированный или включённый в образ)

  3. Значения по умолчанию (запасной вариант)

Обязательные переменные окружения для Docker

  • DB_HOST — Хост базы данных (используйте host.docker.internal для локальной БД или имя сервиса в Docker Compose)

  • DB_PORT — Порт базы данных (по умолчанию: 5432)

  • DB_NAME — Имя базы данных

  • DB_USER — Пользователь базы данных

  • DB_PASSWORD — Пароль базы данных

  • KUBECONFIG или KUBE_CONFIG_PATH — Путь к конфигурационному файлу Kubernetes внутри контейнера

  • SESSION_SECRET — Секрет для шифрования сессий (необязательно, имеет значение по умолчанию)

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

Начало работы

Развёртывание

Конфигурация

Поддержка

Сообщество

Технологический стек

Frontend

  • React — UI-библиотека

  • Vite — Инструмент сборки и сервер разработки

  • Chakra UI — Библиотека компонентов

  • React Router — Маршрутизация

  • WebSocket — Обновления в реальном времени

Backend

  • Go — Язык программирования

  • Gin — Веб-фреймворк

  • Kubernetes client-go — Клиент Kubernetes API

  • Kubernetes Informers — Событийно-ориентированное отслеживание ресурсов

  • PostgreSQL — База данных (через GORM)

Участие в разработке

Вклад в проект приветствуется. Пожалуйста, ознакомьтесь с Руководством по участию в разработке для получения информации о настройке среды разработки, требованиях к PR и о том, как сообщать о проблемах. Участвуя в проекте, вы соглашаетесь с нашим Кодексом поведения. Чтобы узнать о направлении развития проекта, ознакомьтесь с Дорожной картой.

Лицензия

Этот проект является открытым исходным кодом и доступен под лицензией Apache License 2.0.

Похожее

© 2026 meganuke