ovtools 0.0.0-stage → 1.0.1

package/assets/manage/dashboard_monitor/ssl-certbot.sh

@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+# ===================================================================
+# ssl-certbot.sh - Let's Encrypt certificate for the live monitor
+#
+# The nginx site always reads /etc/ssl/octra/{fullchain,privkey}.pem, so the
+# Let's Encrypt files are linked there: certbot's own timer renews them and nginx
+# keeps working without any config rewrite.
+#
+# Usage:  bash ssl-certbot.sh --domain node-x.example.com [--email you@x] [--min-days 30]
+# Output: SSL_CERTBOT_OK <domain> (issued|reused)   /   SSL_CERTBOT_ERROR <why>
+# Idempotent: a certificate that is still valid for --min-days is reused.
+# ===================================================================
+set -euo pipefail
+
+DOMAIN=""; EMAIL=""; MIN_DAYS=30
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --domain)   DOMAIN="${2:-}"; shift 2 ;;
+    --email)    EMAIL="${2:-}"; shift 2 ;;
+    --min-days) MIN_DAYS="${2:-30}"; shift 2 ;;
+    *) shift ;;
+  esac
+done
+
+fail() { echo "SSL_CERTBOT_ERROR $*"; exit 1; }
+
+[[ -n "$DOMAIN" ]] || fail "no --domain given"
+[[ $EUID -eq 0 ]] || fail "run as root"
+
+LIVE="/etc/ssl/octra"
+LE_LIVE="/etc/letsencrypt/live/${DOMAIN}"
+
+# --- certbot present? check -> install -> continue -------------------
+if ! command -v certbot >/dev/null 2>&1; then
+  echo "installing certbot (apt)..."
+  export DEBIAN_FRONTEND=noninteractive
+  apt-get update -qq || fail "apt-get update failed"
+  apt-get install -y -qq certbot >/dev/null || fail "could not install certbot"
+fi
+
+days_left() {  # days_left <pem>
+  local file="$1" end now
+  [[ -f "$file" ]] || { echo 0; return 0; }
+  command -v openssl >/dev/null 2>&1 || { echo 0; return 0; }
+  end=$(openssl x509 -enddate -noout -in "$file" 2>/dev/null | cut -d= -f2- || true)
+  [[ -n "$end" ]] || { echo 0; return 0; }
+  end=$(date -d "$end" +%s 2>/dev/null || echo 0)
+  now=$(date +%s)
+  [[ "$end" -gt "$now" ]] && echo $(( (end - now) / 86400 )) || echo 0
+}
+
+link_into_place() {
+  install -d -m 700 "$LIVE"
+  ln -sfn "${LE_LIVE}/fullchain.pem" "${LIVE}/fullchain.pem"
+  ln -sfn "${LE_LIVE}/privkey.pem" "${LIVE}/privkey.pem"
+  chmod 600 "${LE_LIVE}/privkey.pem" 2>/dev/null || true
+}
+
+# --- reuse a healthy certificate -------------------------------------
+REUSE=0
+if [[ -f "${LE_LIVE}/fullchain.pem" ]]; then
+  left=$(days_left "${LE_LIVE}/fullchain.pem")
+  if (( left >= MIN_DAYS )); then REUSE=1; fi
+fi
+if (( REUSE == 0 )); then
+  # The standalone challenge needs port 80: stop nginx for the request and bring
+  # it back even when certbot fails (a dead nginx would take the monitor down).
+  was_active=0
+  if command -v systemctl >/dev/null 2>&1 && systemctl is-active --quiet nginx; then
+    was_active=1
+    systemctl stop nginx
+  fi
+  set +e
+  if [[ -n "$EMAIL" ]]; then
+    certbot certonly --standalone --non-interactive --agree-tos --expand \
+      --keep-until-expiring -d "$DOMAIN" -m "$EMAIL"
+    rc=$?
+  else
+    certbot certonly --standalone --non-interactive --agree-tos --expand \
+      --keep-until-expiring -d "$DOMAIN" --register-unsafely-without-email
+    rc=$?
+  fi
+  set -e
+  if (( was_active == 1 )); then systemctl start nginx || true; fi
+  (( rc == 0 )) || fail "certbot exit ${rc} - is DNS for ${DOMAIN} pointing at this host, and is port 80 open?"
+fi
+
+[[ -f "${LE_LIVE}/fullchain.pem" ]] || fail "certbot reported success but ${LE_LIVE}/fullchain.pem is missing"
+link_into_place
+echo "SSL_CERTBOT_OK ${DOMAIN} $([[ $REUSE -eq 1 ]] && echo reused || echo issued)"

package/assets/manage/dashboard_monitor/styles.css

@@ -0,0 +1,327 @@
+/* ==========================================================================
+   OCTRA LIVE MONITOR - dashboard layer
+   Built on Synteq UI V2. Everything visual that the framework already ships
+   (stat strips, gauges, sparklines, bars, data table, log viewer, status dots,
+   copy feedback, mobile breakpoints) comes from the framework; this file only
+   holds what is specific to this dashboard.
+
+   Framework rules kept:
+   | single flat canvas, hairline separators, no card backgrounds
+   | only .v2-content scrolls, body stays viewport-locked
+   | every value uses tokens (no hard-coded colors / spacing)
+   ========================================================================== */
+
+/* Content rhythm - denser than the framework default for a monitoring view */
+.v2-content {
+  gap: var(--v2-space-6);
+  padding-top: var(--v2-space-4);
+  padding-bottom: var(--v2-space-4);
+}
+
+.v2-section--compact {
+  gap: var(--v2-space-4);
+  padding-block: var(--v2-space-5);
+}
+
+/* Panels are grouping primitives only - never surfaces */
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v2-space-3);
+  min-width: 0;
+}
+
+.content-pad { height: var(--v2-space-6); }
+
+/* -- Hero ----------------------------------------------------------- */
+.dash-hero { display: flex; flex-direction: column; gap: var(--v2-space-2); min-width: 0; }
+.dash-hero__main { display: flex; flex-direction: column; gap: var(--v2-space-2); min-width: 0; }
+.dash-hero__title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--v2-space-2) var(--v2-space-3);
+  min-width: 0;
+}
+.dash-hero__hostname {
+  font-size: var(--v2-text-2xl);
+  font-weight: var(--v2-fw-semibold);
+  color: var(--v2-text-strong);
+  letter-spacing: -0.025em;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+}
+.dash-hero__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--v2-space-2);
+  font-size: var(--v2-text-xs);
+  color: var(--v2-text-subtle);
+  min-width: 0;
+}
+.dash-hero__sep { opacity: 0.6; }
+
+/* Copyable validator address */
+.addr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  max-width: 100%;
+  min-width: 0;
+  height: 26px;
+  padding: 0 var(--v2-space-2) 0 var(--v2-space-3);
+  background: var(--v2-inset);
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text);
+  font-size: var(--v2-text-xs);
+}
+.addr-chip:hover { background: var(--v2-hover); }
+.addr-chip__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--v2-space-1);
+  color: var(--v2-text-subtle);
+  flex-shrink: 0;
+}
+.addr-chip__value {
+  color: var(--v2-text-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.addr-chip__copy { color: var(--v2-brand); flex-shrink: 0; }
+
+/* -- Alerts --------------------------------------------------------- */
+.alerts { display: flex; flex-direction: column; gap: 3px; }
+.alerts[hidden] { display: none; }
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--v2-space-2);
+  padding: var(--v2-space-2) var(--v2-space-3);
+  font-size: var(--v2-text-sm);
+  color: var(--v2-text);
+  border-left: 2px solid var(--v2-status-warning);
+  background: color-mix(in srgb, var(--v2-status-warning) 8%, transparent);
+}
+.alert--error {
+  border-left-color: var(--v2-status-error);
+  background: color-mix(in srgb, var(--v2-status-error) 10%, transparent);
+}
+.alert--info {
+  border-left-color: var(--v2-brand);
+  background: color-mix(in srgb, var(--v2-brand) 8%, transparent);
+}
+.alert__text { min-width: 0; }
+.alert__text strong { color: var(--v2-text-strong); font-weight: var(--v2-fw-medium); }
+/* The row can be dismissed: the x sits at the right end and stays quiet until
+   the operator hovers it or tabs to it. */
+.alert__close {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--v2-radius-sm, 4px);
+  background: transparent;
+  color: var(--v2-text-mute);
+  cursor: pointer;
+  opacity: 0.65;
+}
+.alert__close:hover,
+.alert__close:focus-visible {
+  opacity: 1;
+  color: var(--v2-text-strong);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.alert__close:focus-visible { outline: 2px solid var(--v2-brand); outline-offset: 1px; }
+/* "N message(s) hidden - show them": the rows never disappear silently. */
+.alerts__restore {
+  align-self: flex-start;
+  padding: 2px var(--v2-space-3);
+  font-size: var(--v2-text-xs);
+  color: var(--v2-text-mute);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.alerts__restore:hover { color: var(--v2-brand); }
+
+/* -- Hero status: dot + coloured text ------------------------------- */
+.dash-status {
+  gap: 6px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--v2-text-mute);
+}
+.dash-status--ok { color: var(--v2-status-ok, var(--v2-brand)); }
+.dash-status--warn { color: var(--v2-status-warning); }
+.dash-status--err { color: var(--v2-status-error); }
+.dash-status--info { color: var(--v2-text-mute); }
+
+/* -- Health checklist ----------------------------------------------- */
+.health { display: flex; flex-direction: column; }
+.health__row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--v2-space-3);
+  padding: var(--v2-space-2) 0;
+  border-top: var(--v2-line-h) solid var(--v2-line);
+  min-width: 0;
+}
+.health__row:first-child { border-top: none; }
+.health__row .v2-badge { flex-shrink: 0; min-width: 52px; justify-content: center; }
+.health__label { color: var(--v2-text-strong); font-size: var(--v2-text-sm); flex-shrink: 0; }
+.health__detail {
+  margin-left: auto;
+  font-size: var(--v2-text-xs);
+  color: var(--v2-text-subtle);
+  text-align: right;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* -- Gauges --------------------------------------------------------- */
+.gauge-stack { display: flex; flex-direction: column; gap: var(--v2-space-4); }
+
+/* Lag / drift cell emphasis inside .v2-table */
+.v2-table .lag-warn { color: var(--v2-status-warning); }
+.v2-table .lag-err { color: var(--v2-status-error); }
+
+/* -- Tables --------------------------------------------------------- */
+/* `.v2-table th` (0,1,1) outranks `.v2-table__num` (0,1,0) in the framework,
+   so numeric headers kept `text-align: left` while their cells were right
+   aligned - every such header looked shifted into the left neighbour column.
+   Mirror the cell alignment on the header and compensate the 0.05em tracking
+   that the framework adds after the final glyph. */
+.v2-table th.v2-table__num {
+  text-align: right;
+  padding-right: calc(var(--v2-space-3) - 0.05em);
+}
+.v2-table th.v2-table__mono { font-family: var(--v2-font-mono); }
+
+/* Narrow screens: a wide table scrolls inside .v2-table-wrap (the document
+   itself never overflows - verified down to 320 px). Pin the identifying first
+   column so a horizontally scrolled row keeps its peer / epoch visible. */
+@media (max-width: 720px) {
+  .v2-table-wrap { position: relative; }
+  .v2-table th:first-child,
+  .v2-table td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--v2-canvas);
+    box-shadow: 1px 0 0 var(--v2-line);
+  }
+  .v2-table tbody tr:hover td:first-child { background: var(--v2-hover); }
+}
+
+/* Wallet KPIs print full-precision token amounts - one notch smaller keeps the
+   amount + unit on a single line without overflowing the stat box (the unit is
+   glued with a non-breaking space in app.js). */
+#wallets .v2-stat__value { font-size: var(--v2-text-lg); }
+
+/* -- Brand mark ----------------------------------------------------- */
+/* Octra "circle filled" glyph drawn in the brand green (no tile behind it) */
+.v2-aside__brand-mark {
+  background: transparent;
+  color: var(--v2-brand);
+  border-radius: 0;
+}
+
+/* -- Log toolbar (the viewer itself is a framework component) ------- */
+.log-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--v2-space-2);
+  min-width: 0;
+}
+.log-toolbar .v2-seg { flex-shrink: 0; }
+.log-search {
+  flex: 1 1 220px;
+  min-width: 140px;
+  height: 32px;
+}
+.log-meta { margin-left: auto; white-space: nowrap; }
+
+#log-body { --v2-log-h: 420px; }
+
+/* -- Utility bits --------------------------------------------------- */
+.truncate {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+.hash-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--v2-space-1);
+  min-width: 0;
+  max-width: 62%;
+}
+.copy-btn { width: 24px; height: 24px; flex-shrink: 0; }
+.sys-foot { margin-top: var(--v2-space-1); }
+
+/* Topbar live readout */
+.live-age { color: var(--v2-text-subtle); white-space: nowrap; }
+.live-age.is-stale { color: var(--v2-status-warning); }
+
+/* Bottom navigation badge: the validator status (was the chain id).
+   It keeps the badge chrome - a tinted pill in coloured tone - unlike the hero
+   status, which is dot + text without a background. */
+.v2-aside__footer .dash-status {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: var(--v2-text-xs);
+}
+.v2-aside__footer .v2-badge.dash-status {
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+.v2-aside__footer .dash-status .v2-dot { flex: 0 0 auto; }
+
+/* Refresh button feedback */
+@keyframes dash-spin { to { transform: rotate(360deg); } }
+.is-spinning .v2-icon { animation: dash-spin 0.8s linear; }
+
+/* -- Responsive (framework handles grid/table/log breakpoints) ------ */
+@media (max-width: 720px) {
+  .v2-content { gap: var(--v2-space-5); padding-inline: var(--v2-space-4); }
+  .v2-section--compact { padding-block: var(--v2-space-4); }
+  .dash-hero__hostname { font-size: var(--v2-text-xl); }
+  .health__detail { display: none; }
+  .hash-cell { max-width: 100%; }
+  #log-body { --v2-log-h: 360px; }
+}
+
+@media (max-width: 600px) {
+  .live-age { display: none; }
+  .log-meta { display: none; }
+}
+
+@media (max-width: 520px) {
+  /* The hero already carries the status - keep the topbar uncluttered */
+  #topbar-status { display: none; }
+}
+
+@media (max-width: 420px) {
+  .v2-content { padding-inline: var(--v2-space-3); }
+  .addr-chip__label { display: none; }
+  .dash-hero__hostname { font-size: var(--v2-text-lg); }
+}
+