feat: расширен tooltip для миникарточек в свернутом sidebar
- Добавлена подробная информация о контейнерах в tooltip - Различение локальных и удаленных контейнеров с иконками - Отображение хоста для всех контейнеров - Время последнего обновления для удаленных контейнеров - Ссылка 'Открыть сайт' для контейнеров с URL - Ссылка 'Подключиться по SSH' для удаленных контейнеров - Подсказка 'Кликните для просмотра логов' - Добавлены CSS стили для новых элементов tooltip Новая информация в tooltip: ✅ Тип контейнера (локальный/удаленный) с иконкой ✅ Имя контейнера и сервиса ✅ Хост (localhost или удаленный сервер) ✅ Статус с цветовым индикатором ✅ Порт для работающих контейнеров ✅ Время последнего обновления для удаленных ✅ Ссылки на сайт и SSH подключение ✅ Подсказка для просмотра логов Автор: Сергей Антропов Сайт: https://devops.org.ru
This commit is contained in:
parent
db8d08b8ab
commit
a1529f4c4e
@ -149,6 +149,58 @@ a{color:var(--link)}
|
||||
background: var(--chip);
|
||||
}
|
||||
|
||||
/* Новые стили для расширенного tooltip */
|
||||
.mini-container-tooltip-remote-icon {
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mini-container-tooltip-host {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mini-container-tooltip-update {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mini-container-tooltip-ssh {
|
||||
font-size: 10px;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mini-container-tooltip-ssh:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--link);
|
||||
background: var(--chip);
|
||||
}
|
||||
|
||||
.mini-container-tooltip-action {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Дополнительные стили для светлой темы */
|
||||
|
@ -1592,22 +1592,51 @@ function showMiniContainerTooltip(event, service) {
|
||||
const statusClass = service.status === 'running' ? 'running' :
|
||||
service.status === 'stopped' ? 'stopped' : 'paused';
|
||||
|
||||
tooltip.innerHTML = `
|
||||
// Определяем тип контейнера и создаем соответствующий tooltip
|
||||
const isRemote = service.is_remote || service.hostname !== 'localhost';
|
||||
const hostname = service.hostname || 'localhost';
|
||||
|
||||
let tooltipContent = `
|
||||
<div class="mini-container-tooltip-header">
|
||||
<i class="fas fa-cube mini-container-tooltip-icon"></i>
|
||||
<span>Контейнер</span>
|
||||
<span>${isRemote ? 'Удаленный контейнер' : 'Локальный контейнер'}</span>
|
||||
${isRemote ? '<i class="fas fa-globe mini-container-tooltip-remote-icon"></i>' : ''}
|
||||
</div>
|
||||
<div class="mini-container-tooltip-name">${escapeHtml(service.name)}</div>
|
||||
<div class="mini-container-tooltip-service">${escapeHtml(service.service || service.name)} • ${escapeHtml(service.project || 'standalone')}</div>
|
||||
<div class="mini-container-tooltip-host">Хост: ${escapeHtml(hostname)}</div>
|
||||
<div class="mini-container-tooltip-status">
|
||||
<span class="mini-container-tooltip-status-indicator ${statusClass}"></span>
|
||||
<span>${escapeHtml(service.status)}</span>
|
||||
</div>
|
||||
${service.status === 'running' && service.host_port ? `<div class="mini-container-tooltip-port">Порт: ${escapeHtml(service.host_port)}</div>` : ''}
|
||||
${service.url ? `<a href="${service.url}" target="_blank" class="mini-container-tooltip-url"><i class="fas fa-external-link-alt"></i> Открыть сайт</a>` : ''}
|
||||
|
||||
`;
|
||||
|
||||
// Добавляем порт для работающих контейнеров
|
||||
if (service.status === 'running' && service.host_port) {
|
||||
tooltipContent += `<div class="mini-container-tooltip-port">Порт: ${escapeHtml(service.host_port)}</div>`;
|
||||
}
|
||||
|
||||
// Добавляем время последнего обновления для удаленных контейнеров
|
||||
if (isRemote && service.last_modified) {
|
||||
const updateTime = new Date(service.last_modified * 1000).toLocaleString();
|
||||
tooltipContent += `<div class="mini-container-tooltip-update">Обновлено: ${updateTime}</div>`;
|
||||
}
|
||||
|
||||
// Добавляем ссылки
|
||||
if (service.url) {
|
||||
tooltipContent += `<a href="${service.url}" target="_blank" class="mini-container-tooltip-url"><i class="fas fa-external-link-alt"></i> Открыть сайт</a>`;
|
||||
}
|
||||
|
||||
// Добавляем ссылку для удаленных контейнеров
|
||||
if (isRemote && service.hostname) {
|
||||
tooltipContent += `<a href="ssh://${service.hostname}" class="mini-container-tooltip-ssh"><i class="fas fa-terminal"></i> Подключиться по SSH</a>`;
|
||||
}
|
||||
|
||||
// Добавляем ссылку для просмотра логов
|
||||
tooltipContent += `<div class="mini-container-tooltip-action">Кликните для просмотра логов</div>`;
|
||||
|
||||
tooltip.innerHTML = tooltipContent;
|
||||
|
||||
// Добавляем подсказку в body
|
||||
document.body.appendChild(tooltip);
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user