chrisryn
c952a3b56e
Features: - Real-time Proxmox cluster monitoring (nodes, LXC containers) - Camera integration with go2rtc streams - Arr stack download progress monitoring - PBS backup status - Docker container status - Uptime Kuma service health - FastAPI backend with HTMX frontend
61 lines
3.4 KiB
HTML
61 lines
3.4 KiB
HTML
{% for category_name, category_services in services_by_category.items() %}
|
|
{% set cat_info = categories.get(category_name, {}) %}
|
|
<div class="category-section mb-3">
|
|
<div class="flex items-center gap-2 mb-2 cursor-pointer select-none" onclick="toggleCategory(this)">
|
|
<svg class="w-3 h-3 text-gray-500 collapse-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
<span class="w-3 h-3 rounded-full
|
|
{% if cat_info.color == 'blue' %}bg-blue-500
|
|
{% elif cat_info.color == 'purple' %}bg-purple-500
|
|
{% elif cat_info.color == 'amber' %}bg-amber-500
|
|
{% elif cat_info.color == 'emerald' %}bg-emerald-500
|
|
{% elif cat_info.color == 'cyan' %}bg-cyan-500
|
|
{% else %}bg-gray-500{% endif %}"></span>
|
|
<h3 class="text-sm font-semibold text-gray-300">{{ category_name }}</h3>
|
|
<span class="text-xs text-gray-500">({{ category_services | length }})</span>
|
|
</div>
|
|
|
|
<div class="collapsible-content">
|
|
<div class="service-grid">
|
|
{% for service in category_services %}
|
|
{% set status = services_status.get(service.name) %}
|
|
<a href="{{ service.url }}" target="_blank"
|
|
class="service-card card rounded-lg p-2 flex items-center gap-2 hover:scale-[1.02] transition-transform"
|
|
data-name="{{ service.name }}"
|
|
data-category="{{ category_name }}">
|
|
<!-- Status dot -->
|
|
<span class="status-dot w-2 h-2 rounded-full flex-shrink-0
|
|
{% if status and status.status == 'online' %}bg-emerald-500 status-online
|
|
{% elif status and status.status == 'degraded' %}bg-amber-500 status-pulse
|
|
{% else %}bg-red-500 status-offline{% endif %}"></span>
|
|
|
|
<!-- Icon -->
|
|
<svg class="svc-icon text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">{{ get_service_icon(service.icon) | safe }}</svg>
|
|
|
|
<!-- Name and response time -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs font-medium truncate">{{ service.name }}</div>
|
|
{% if status and status.response_time_ms %}
|
|
<div class="text-[10px] {% if status.response_time_ms < 100 %}response-fast{% elif status.response_time_ms < 500 %}response-medium{% else %}response-slow{% endif %}">
|
|
{{ status.response_time_ms }}ms
|
|
</div>
|
|
{% elif status and status.status == 'offline' %}
|
|
<div class="text-[10px] text-red-400">Offline</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Critical badge -->
|
|
{% if service.critical %}
|
|
<svg class="w-3 h-3 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
|
|
{% endif %}
|
|
|
|
<!-- Group badge -->
|
|
{% if service.group %}
|
|
<span class="text-[8px] px-1 py-0.5 rounded bg-dark-600 text-gray-400">{{ service.group[:3] }}</span>
|
|
{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|