mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
102 lines
3.4 KiB
HTML
102 lines
3.4 KiB
HTML
{% block content %}
|
|
<div class="foreground"></div>
|
|
<div class="foregroundContent">
|
|
<h2 class='concentratedHead'>Service Status Monitor</h2>
|
|
|
|
<div class="status-legend">
|
|
<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="status-dot online"></span>
|
|
<span>Operational (response successful)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="status-dot degraded"></span>
|
|
<span>Degraded (timeout or errors)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="status-dot offline"></span>
|
|
<span>Offline (unreachable)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overall Status Bar -->
|
|
<div class="status-card overall-status-card" id="overallStatus">
|
|
<div class="overall-status-content">
|
|
<div class="overall-status-indicator">
|
|
<span class="overall-status-icon loading">◐</span>
|
|
<div>
|
|
<h3 class="overall-status-title">Checking Systems...</h3>
|
|
<h5 id="overall-status-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="status-container">
|
|
{% for service in var.services %}
|
|
<a href="https://{{ service.url }}">
|
|
<div class="status-card" id="status-{{ service.id }}">
|
|
<div class="status-header">
|
|
<h3>{{ service.name }}</h3>
|
|
<div class="status-indicator">
|
|
<span class="status-dot loading"></span>
|
|
<span class="status-text">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-details">
|
|
<div class="status-metric">
|
|
<span class="metric-label">Response Time:</span>
|
|
<span class="metric-value" id="time-{{ service.id }}">--</span>
|
|
</div>
|
|
<div class="status-metric">
|
|
<span class="metric-label">Status Code:</span>
|
|
<span class="metric-value" id="code-{{ service.id }}">--</span>
|
|
</div>
|
|
<div class="status-metric">
|
|
<span class="metric-label">Total Checks:</span>
|
|
<span class="metric-value" id="checks-{{ service.id }}">--</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-uptime">
|
|
<div class="uptime-label">Uptime:</div>
|
|
<div class="uptime-values" id="uptime-{{ service.id }}">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="status-legend">
|
|
<h4>About This Monitor</h4>
|
|
<ul>
|
|
<li><strong>Check Frequency:</strong> Services are checked automatically every 30 minutes from the server</li>
|
|
<li><strong>Page Refresh:</strong> This page auto-refreshes every 5 minutes to show latest data</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/status.js') }}"></script>
|
|
{% endblock %}
|