diff --git a/app/static/css/index.css b/app/static/css/index.css index b0ae75f..415f19f 100644 --- a/app/static/css/index.css +++ b/app/static/css/index.css @@ -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; +} + /* Дополнительные стили для светлой темы */ diff --git a/app/static/js/index.js b/app/static/js/index.js index 94cb319..7031359 100644 --- a/app/static/js/index.js +++ b/app/static/js/index.js @@ -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 = `
- Контейнер + ${isRemote ? 'Удаленный контейнер' : 'Локальный контейнер'} + ${isRemote ? '' : ''}
${escapeHtml(service.name)}
${escapeHtml(service.service || service.name)} • ${escapeHtml(service.project || 'standalone')}
+
Хост: ${escapeHtml(hostname)}
${escapeHtml(service.status)}
- ${service.status === 'running' && service.host_port ? `
Порт: ${escapeHtml(service.host_port)}
` : ''} - ${service.url ? ` Открыть сайт` : ''} - `; + // Добавляем порт для работающих контейнеров + if (service.status === 'running' && service.host_port) { + tooltipContent += `
Порт: ${escapeHtml(service.host_port)}
`; + } + + // Добавляем время последнего обновления для удаленных контейнеров + if (isRemote && service.last_modified) { + const updateTime = new Date(service.last_modified * 1000).toLocaleString(); + tooltipContent += `
Обновлено: ${updateTime}
`; + } + + // Добавляем ссылки + if (service.url) { + tooltipContent += ` Открыть сайт`; + } + + // Добавляем ссылку для удаленных контейнеров + if (isRemote && service.hostname) { + tooltipContent += ` Подключиться по SSH`; + } + + // Добавляем ссылку для просмотра логов + tooltipContent += `
Кликните для просмотра логов
`; + + tooltip.innerHTML = tooltipContent; + // Добавляем подсказку в body document.body.appendChild(tooltip);