mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
102 lines
3.3 KiB
HTML
102 lines
3.3 KiB
HTML
{% block content %}
|
|
<div class="foreground"></div>
|
|
<div class="foregroundContent">
|
|
<h2 class='concentratedHead'>Service Status Monitor</h2>
|
|
|
|
<div class="info-box">
|
|
<div class='flex spaceBetween'>
|
|
<div>
|
|
<span id="lastUpdate">Last checked: Loading...</span>
|
|
<br />
|
|
<span id="nextUpdate">Next check: --</span>
|
|
</div>
|
|
<button id="refreshBtn" onclick="refreshStatus()">Refresh Now</button>
|
|
</div>
|
|
<br/>
|
|
|
|
<h4>Status Legend</h4>
|
|
<div class="legend-items">
|
|
<div class="legend-item">
|
|
<span class="state-dot online"></span>
|
|
<span>Operational (response successful)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="state-dot degraded"></span>
|
|
<span>Degraded (timeout or errors)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="state-dot offline"></span>
|
|
<span>Offline (unreachable)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overall Status Bar -->
|
|
<div class="info-card summary-card" id="overallStatus">
|
|
<div class="summary-content">
|
|
<div class="summary-indicator">
|
|
<span class="summary-icon loading">◐</span>
|
|
<div>
|
|
<h3 class="summary-title">Checking Systems...</h3>
|
|
<h5 id="summary-subtitle">Loading service status</h5>
|
|
</div>
|
|
</div>
|
|
<div class="flex spaceBetween">
|
|
<div class="metric-box">
|
|
<span class="metric-number" id="onlineCount">--</span>
|
|
<span class="metric-label">Online</span>
|
|
</div>
|
|
<div class="metric-box">
|
|
<span class="metric-number" id="totalCount">--</span>
|
|
<span class="metric-label">Total</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-grid">
|
|
{% for service in var.services %}
|
|
<a href="{{ service.url }}">
|
|
<div class="info-card" id="status-{{ service.id }}">
|
|
<div class="card-header">
|
|
<h3>{{ service.name }}</h3>
|
|
<div class="state-indicator">
|
|
<span class="state-dot loading"></span>
|
|
<span class="state-text">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="metric-row">
|
|
<span class="metric-label">Response Time:</span>
|
|
<span class="metric-value" id="time-{{ service.id }}">--</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Status Code:</span>
|
|
<span class="metric-value" id="code-{{ service.id }}">--</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Total Checks:</span>
|
|
<span class="metric-value" id="checks-{{ service.id }}">--</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="detail-label">Uptime:</div>
|
|
<div class="detail-values" id="uptime-{{ service.id }}">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>About This Monitor</h4>
|
|
<ul>
|
|
<li><strong>Check Frequency:</strong> Services are checked automatically every minute from the server</li>
|
|
<li><strong>Page Refresh:</strong> This page auto-refreshes every minute to show latest data</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/status.js') }}"></script>
|
|
{% endblock %}
|