fix(monitors): the check strip fills its column; TLS shows only when a monitor has a certificate (#5214)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

steward/static/steward.css

@@ -330,6 +330,7 @@ a.stat-tile:hover { border-color: var(--border-mid); background: var(--bg-elevat
 .ping-meta.mon-col-name { width:14rem; min-width:0; max-width:none; flex-shrink:0; }
 .mon-latest { width:7.5rem; flex-shrink:0; text-align:right; font-size:0.8rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
 .mon-spark { color:var(--text-dim); margin-right:0.35rem; }
+.mon-pills .pill { flex:1 1 0; min-width:4px; max-width:14px; }   /* the strip fills its column */
 .mon-up { width:4.2rem; flex-shrink:0; text-align:right; font-size:0.8rem; font-variant-numeric:tabular-nums; }
 .mon-tls { width:3.5rem; flex-shrink:0; text-align:right; font-size:0.78rem; font-variant-numeric:tabular-nums; }
 .mon-act { width:6.6rem; justify-content:flex-end; }

steward/templates/monitors/rows.html

@@ -14,13 +14,15 @@
 
 {% if monitor_data %}
 {% set can_edit = session.user_role in ['operator', 'admin'] %}
+{# TLS only when some monitor has a certificate: a column of dashes says nothing. #}
+{% set any_tls = monitor_data | selectattr("tls_days", "ne", none) | list | length > 0 %}
 <div class="card ping-card">
 <div class="ping-row mon-head" aria-hidden="true">
   <span class="ping-meta mon-col-name">Monitor</span>
-  <span class="ping-pills">Last 30 checks</span>
+  <span class="ping-pills mon-pills">Last 30 checks</span>
   <span class="mon-latest">Latest</span>
   <span class="mon-up">24h</span><span class="mon-up">7d</span><span class="mon-up">30d</span>
-  <span class="mon-tls">TLS</span>
+  {% if any_tls %}<span class="mon-tls">TLS</span>{% endif %}
   {% if can_edit %}<span class="mon-act"></span>{% endif %}
 </div>
 {% for d in monitor_data %}
@@ -40,7 +42,7 @@
     {% endif %}
   </div>
 
-  <div class="ping-pills">
+  <div class="ping-pills mon-pills">
     {% for _ in range([30 - d.heartbeat|length, 0]|max) %}<span class="pill pill-empty" title="No data"></span>{% endfor %}
     {% for h in d.heartbeat %}<span class="pill pill-{{ h.state }}" title="{{ h.title }}"></span>{% endfor %}
   </div>
@@ -58,11 +60,13 @@
   <div class="mon-up">{% if u is none %}<span class="tone-unknown">—</span>{% else %}<span class="tone-{{ status_class(u, 'uptime') }}">{{ "%.2f"|format(u) }}%</span>{% endif %}</div>
   {% endfor %}
 
+  {% if any_tls %}
   <div class="mon-tls">
     {% if d.tls_days is none %}<span class="tone-unknown">—</span>
     {% elif d.tls_days < 0 %}<span class="tone-crit" title="Certificate expired">expired</span>
     {% else %}<span class="tone-{{ status_class(d.tls_days, 'tls_days') }}" title="TLS certificate expires in {{ d.tls_days|round|int }} days">{{ d.tls_days|round|int }}d</span>{% endif %}
   </div>
+  {% endif %}
 
   {% if can_edit %}
   <div class="row-actions mon-act">
@@ -78,7 +82,7 @@
 </div>
 {% endfor %}
 </div>
-<p class="field-hint" style="margin-top:0.6rem;">Last 30 checks: newest on the right; hover one for its result. Uptime is over the rolling window. TLS is days until the certificate expires (HTTPS monitors).</p>
+<p class="field-hint" style="margin-top:0.6rem;">Last 30 checks: newest on the right; hover one for its result. Uptime is over the rolling window.{% if any_tls %} TLS is days until the certificate expires (HTTPS monitors).{% endif %}</p>
 {% else %}
 <div class="card">{{ empty_state("No monitors yet. Add one, or attach checks to a host from its page.",
                                  "Add monitor" if session.user_role in ['operator', 'admin'] else none, "/monitors/new") }}</div>

tests/core/test_monitors_page.py

@@ -87,6 +87,7 @@ async def test_a_viewer_gets_no_row_actions_and_an_empty_board_says_so(app):
         empty = await render_template("monitors/rows.html", monitor_data=[],
                                       counts=dict.fromkeys(("up", "degraded", "down", "pending", "paused"), 0))
     assert "row-actions" not in page
+    assert ">TLS<" not in page            # no monitor has a certificate: no column of dashes
     assert "No monitors yet" in empty and "/monitors/new" not in empty