Я перепробовал все дэшборды но остановился на Glance, мне он показался самым подходящим для меня. Мне особо функционал не нужен. самое главное собрать все ссылки для всех моих сервисов.
8 лайков
У вас VScode в докере? Как это работает?
2 лайка
да. так же как и на компе только открывается в браузере.
Ссылку вам уже скинули
1 лайк
Есть какие-то примеры конфигов для Glance? Как-то трудновато самому разобраться!
Ловите
конфигурация docker compose для запуска stack’a
services:
glances:
container_name: Glances
image: nicolargo/glances:latest-full
healthcheck:
test: curl -f http://localhost:61208/ || exit 1
mem_limit: 4g
cpu_shares: 768
security_opt:
- no-new-privileges:true
pid: host
privileged: true
# network_mode: host
restart: unless-stopped
ports:
- 61208:61208
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
environment:
GLANCES_OPT: -w
Что такое стек и как им пользоваться, можно посмотреть тут
или тут
Я поставил себе его в LXC контейнер и внимательно изучил. Хороший dashboard, мне понравился. Базовая конфигурация его, достаточно простая. Однако, есть возможность и более детально его настроить, используя HTML, JScript, CSS и сам Go-lang на котором он собственно и написан. Файл конфигурации /opt/glance/glance.yml, содержит разметку YAML. Основной корневой тег pages: (есть и другие тип server: , theme: и т. д.) далее описывается структура шаблона страниц(ы). Можно писать всё в одном файле glance.yml, а можно разбить на несколько шаблонов, и вставлять в основной файл конфигурации используя тег $include: glance-templates/template_page.yml Сами же шаблоны держать в отдельной папке /opt/glance/glance-templates/template_page.yml и т.д. Так же можно использовать переменные среды. В общем настройка достаточна богатая.
Я так понимаю вам нужен пример конфигурации внешнего вида и функционала Glance?
Ну как не банально звучит, всё есть в документации . Хотя сам порой предпочитаю хороший пример, потому как человек мыслит образами. Для наглядности набросал небольшой рабочий пример (упрощённые куски кода) для лучшего понимания.
структура папок (как пример):
Спойлер
/opt
/glance
/*glance.yml
/glance-templates
/*home.yml
/*news.yml
/home
/glance-assets
/*clock.js
/*clock.css
наполняем основной файл конфигурации: glance.yml
Спойлер
server:
# добавляем путь к своим файлам: img, css, js
assets-path: /home/glance-assets
theme:
# Tема по дефолту
background-color: 100 20 10
primary-color: 40 90 40
contrast-multiplier: 1.1
# false - разрешаем выбор темы
# true - отключаем выбор темы (справа вверху). тема будет по дефолту
disable-picker: false
# В данном случае, подключен файл стилей для часов
custom-css-file: /assets/clock.css
# Дополнительная тема для выбора
presets:
my-custom-dark-theme:
background-color: 229 19 23
contrast-multiplier: 1.2
primary-color: 222 74 74
positive-color: 96 44 68
negative-color: 359 68 71
document:
head: |
<script src="/assets/clock.js"></script>
branding:
custom-footer: |
<p>Glance Dshboard</p>
# Файлы наших страниц
pages:
- $include: glance-tpl/home.yml
- $include: glance-tpl/news.yml
формируем файл страницы “Главная”: home.yml
Спойлер
- name: Главная
columns:
# Колонка с лева
- size: small
# Контент и виджеты с лева
widgets:
- type: custom-api
title: Часики
template: |
<div id="clock"></div>
# Колонка по середине
- size: full
# Контент и виджеты по середине
widgets:
- type: bookmarks
title: Закладки
groups:
- links:
- title: Самохостинг
url: https://www.samohosting.ru/
- title: Место где можно пообщаться
url: https://forum.samohosting.ru/
- title: Скрипты для ProxmoxVE
url: https://github.com/community-scripts/ProxmoxVE
- type: custom-api
title: Новые сообщения на форуме
cache: 3h
url: 'https://forum.samohosting.ru/posts.json'
headers:
Accept: application/json
template: |
<ul class="list list-gap-10 collapsible-container" data-collapse-after="5">
{{range .JSON.Array "latest_posts" }}
<li>[ {{ .String "username" }} ] {{ formatTime "DateOnly" ( parseTime "RFC3339" (.String "created_at") ) }}</li>
<a class="size-title-dynamic color-primary-if-not-visited" href="https://forum.samohosting.ru{{ .String "post_url" }}" target="_blank"> {{ .String "topic_title" }} </a>
<hr/>
{{ end }}
</ul>
# Колонка с права
- size: small
# Контент и виджеты с права
widgets:
- type: custom-api
title: Колонка с права
template: |
<p style="color:#7F97FF">Виджет с права</p>
<p>Пользовательский API</p>
<p><i>- type: custom-api</i></p>
<p style="color:#7F97FF">HTML tag <b style="color:#FFD000"><p></b> с права</p>
<p>Таким образом можно внедрять свои скрипты на JScript, описывать структуру виджета на HTML и подмешивать CSS</p>
формируем файл страницы “Новости”: news.yml
Спойлер
- name: Новости
columns:
- size: full
widgets:
- type: rss
limit: 20
collapse-after: 3
cache: 12h
title: Та-а-а-к! Почитаем!
style: detailed-list
feeds:
- url: https://www.ferra.ru/exports/rss.xml
Важно! Хочу отметит тот факт, что если допущена ошибка синтаксиса (не важно какого языка HTML, JS, CSS, YAML или Go) в файлах конфигурации то Glance в лучшем случае промолчит, и сложится впечатление что он выводит кэшированные данные, в худшем сломается, и в редких случаях выведет ошибку в браузер.
3 лайка
Очень понравилось. Спасибо за примеры.
А откуда брали clock.js/css если не секрет?
Подумал, что часы на jscript тривиальная задача, хотя и в простых задачах могут быть свои нюансы.
Виноват, исправляюсь:
clock.js
function wait_element(selector, callback) {
const interval = setInterval(() => {
const element = document.querySelector(selector);
if (element) {
clearInterval(interval);
callback(element);
}
}, 100);
}
function update() {
const now = new Date();
const strtime = now.toLocaleTimeString();
document.getElementById('clock').textContent = strtime;
}
wait_element('#clock', (element) => {
update();
setInterval(update, 1000);
// console.log(element.textContent);
});
clock.css
#clock {
margin:0px auto;
height: 40px;
color: #9DB590;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:28px;
text-align: center;
letter-spacing: 2px;
}
1 лайк