Как сделать красивый Dashboard для своей лабы

от

Скорее всего у вас есть своя лаба или любая другая среда для тестирования. Там есть Proxmox, Prometheus, Portainer и много других сервисов. Их конечно удобно держать в отдельной папке в браузере, но, что если собрать все это в одном месте с красивым и информативным интерфейсом? Давайте попробуем

В реализации этой задачи нам поможет homepage — gethomepage

Я буду устанавливать его с помощью Docker на своем тестовом сервере с Ubuntu 22

Создадим отдельную папку для нашего dashboard, например dashboard-lab

Для удобства я буду работать на сервере через VSCode и здесь нам пригодится The Remote — SSH extension https://code.visualstudio.com/docs/remote/ssh

Финальная структура проекта — на скрине выше. В конце я приведу ссылку на GitHub со всеми конфигами какие у меня получились и если вы немного запутались что и куда добавлять, там вы сможете все посмотреть и сравнить.

Начнем с файла docker-compose.yml

services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - 3000:3000
    volumes:
      - ./config:/app/config 
      - ./images:/app/public/images
      - ./icons:/app/public/icons   
    environment:
      - PUID=1000
      - PGID=1000
      - LAB_VAR_PROXMOX_USERNAME=$LAB_VAR_PROXMOX_USERNAME
      - LAB_VAR_PROXMOX_PASSWORD=$LAB_VAR_PROXMOX_PASSWORD
    restart: unless-stopped

Чтобы узнать ID пользователя и группы, введите в консоли сервера команду id

Папка config как понятно из названия предназначена для хранения файлов конфигураций, а images и icons для кастомных изображений, которых нет в стандартной библиотеке.

Теперь развернем наш проект 

docker compose up -d

docker compose ps

Проверим — в браузере введите ip адрес вашего сервера и подключитесь к порту 3000, например 192.168.1.2:3000

Уже сейчас мы видим информацию о CPU, RAM, HDD сервера и демо оформление. Давайте изменим оформление и добавим на панель какие-нибудь сервисы.

Скачайте какой-нибудь фон, например по ссылке из раздела настроек link или можете взять у меня на GitHub

После добавления новых картинок — контейнер нужно перезапустить — внимательно читаем инструкцию. Если вы все сделали правильно, а картинка не обновляется — немного подождите.

Откройте файл settings.yaml и вставьте туда, ниже секции providers, следующее

title: Homelab Dashboard

background:
  image: /images/background.png
  blur: sm 
  saturate: 50 
  brightness: 50 
  opacity: 50

Теперь добавим закладки, например наш сайт и GitHub профиль. Откроем bookmarks.yaml и вставим туда следующее

- Developer:
    - Github:
        - abbr: GH
          href: https://github.com/networksuperman

- Social:
    - Site:
        - abbr: DL
          href: https://devopslife.ru/

Теперь изменим поисковую систему, в widgets.yaml вставим

- search:
    provider: google
    target: _blank

Добавим наши локальные сервисы. Откроем services.yaml. Я сделаю на примере нескольких своих, у вас соответственно будут другие

- Hypervisor:
    - Proxmox:
        href: https://192.168.1.3:8006
        description: Proxmox
        siteMonitor: https://192.168.1.3:8006
        icon: proxmox       
        widget:
            type: proxmox
            url: https://192.168.1.3:8006
            username: user@pam!homelab
            password: 2756xxx
            node: pve-lab

- Monitoring:
    - Uptime Kuma:
        href: http://10.0.0.5:3001
        description: Uptime Kuma
        siteMonitor: http://10.0.0.5:3001
        icon: uptime-kuma
        widget:
            type: uptimekuma
            url: http://10.0.0.5:3001
            slug: all

- Infrastructure:
    - Portainer:
        href: https://192.168.1.15:9443
        description: Portainer
        siteMonitor: https://192.168.1.15:9443
        icon: portainer
        widget:
            type: portainer
            url: https://192.168.1.15:9443
            env: 2
            key: ptr_xxx

Пример, когда все сервисы работают

А теперь выключим Uptime Kuma

Данный dashboard достаточно хорошо кастомизируется, например в части иконок для сервисов, все подробно описано в официальном мануале.

Для получения определенных метрик из наших сервисов, мы можем использовать widget как на примере выше (не файл widgets.yaml, а секцию widget в файле services.yaml). Есть готовые варианты под самые популярные.

Для хранения секретов, лучше использовать переменные, а не хранить их в открытом виде.

На примере Proxmox задаем переменные как показано выше, создаем в корне файл .env, исключаем его из git и копируем в него следующее

LAB_VAR_PROXMOX_USERNAME=здесь будет ваш логин
LAB_VAR_PROXMOX_PASSWORD=и пароль

Важно отметить, что у меня на Proxmox 8.2.7 появлялась ошибка API Error: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data при указании секретов через переменные. Нашел вот такое на GitHub — https://github.com/gethomepage/homepage/discussions/3284

Возможно это разные ошибки и где-то что-то сделал не так я (из того, что нашел, ни один из вариантов не сработал), но при указании логина и пароля без переменных все завелось.

В Uptime Kuma важно правильно указать вашу страницу статусов, я указал свою, у вас будет другая, в любом случае, смотрим официальный пример.

В Portainer смотрим Environments и настраиваем доступ к api по инструкции.

Для получения данных из Proxmox нужно аналогично провести определенные манипуляции с API, но все они подробно описаны в официальном мануале. Так как у вас будут свои примеры, я просто показал основные возможности.

Пункт siteMonitoring используется для мониторинга URL, в случае если у вас просто IP или Hostname адрес, используйте ping.

Теперь давайте попробуем добавить в мониторинг какой-нибудь из docker контейнеров. Для этого в наш docker-compose файл добавим

dockerproxy:
    image: ghcr.io/tecnativa/docker-socket-proxy:latest
    container_name: dockerproxy
    environment:
      - CONTAINERS=1 
      - SERVICES=1 
      - TASKS=1 
      - POST=0 
    ports:
      - 127.0.0.1:2375:2375
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro 
    restart: unless-stopped

Приведите файл docker.yaml в папке configs к следующему содержанию

docker:
  host: dockerproxy
  port: 2375

Запустим самое простое — nginx

docker run -it --rm -d -p 8080:80 --name web nginx

В файл services.yaml добавим

- Containers:
    - Docker:    
        href: http://192.168.1.15:8080
        description: nginx
        server: docker
        container: web

Если он висит у вас в статусе unknown, сделайте docker compose down/up

Теперь остановим nginx контейнер и проверим

Как видите он изменил статус на exited

А если удалить контейнер, статус станет таким

Uptime Kuma на скриншотах выше в таком статусе, так как я просто ее не перезапускал, после примера с аварийным сервисом.

Таким образом мы получаем не просто красивый dashboard со всеми нашими сервисами и сайтами, но и базовую возможность мониторинга основных компонентов, что согласитесь, дает определенное удобство и преимущество.

Ссылка на конфигурации на GitHub

https://github.com/networksuperman/dashboard-lab

Успехов!