From 48890a2121f9985d748f134c2118c6ffd8943a42 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 18 Oct 2025 14:48:16 -0400 Subject: [PATCH] v0.7.26 - Tidy up api --- .gitmodules | 3 + api/index.css | 132 ++- api/index.html | 49 +- api/index.js | 896 +++++++++++++++++++-- api/text_graph.js | 470 +++++++++++ docs/monitoring_simplified_plan.md | 601 ++++++++++++++ docs/realtime_monitoring_design.md | 1189 ++++++++++++++++++++++++++++ docs/relay_traffic_measurement.md | 325 ++++++++ relay.pid | 2 +- src/api.c | 665 +++++++++++++++- src/api.h | 8 + src/config.c | 31 + src/dm_admin.c | 3 + src/dm_admin.h | 2 + src/embedded_web_content.c | 18 +- src/main.c | 18 +- src/websockets.c | 39 +- src/websockets.h | 1 + text_graph | 1 + 19 files changed, 4340 insertions(+), 113 deletions(-) create mode 100644 api/text_graph.js create mode 100644 docs/monitoring_simplified_plan.md create mode 100644 docs/realtime_monitoring_design.md create mode 100644 docs/relay_traffic_measurement.md create mode 160000 text_graph diff --git a/.gitmodules b/.gitmodules index 6c93eba..0ec9ded 100644 --- a/.gitmodules +++ b/.gitmodules @@ -4,3 +4,6 @@ [submodule "c_utils_lib"] path = c_utils_lib url = ssh://git@git.laantungir.net:2222/laantungir/c_utils_lib.git +[submodule "text_graph"] + path = text_graph + url = ssh://git@git.laantungir.net:2222/laantungir/text_graph.git diff --git a/api/index.css b/api/index.css index 5989d85..315b0c2 100644 --- a/api/index.css +++ b/api/index.css @@ -85,6 +85,8 @@ body { .relay-info { text-align: center; flex: 1; + max-width: 150px; + margin: 0 auto; } .relay-name { @@ -102,6 +104,8 @@ body { cursor: pointer; transition: border-color 0.2s ease; background-color: var(--secondary-color); + display: inline-block; + width: fit-content; } .relay-pubkey-container:hover { @@ -132,6 +136,10 @@ body { font-size: 10px; color: var(--primary-color); margin-bottom: 0; + display: inline-block; + width: fit-content; + word-wrap: break-word; + overflow-wrap: break-word; } .header-title { @@ -180,7 +188,7 @@ body { padding: 8px 12px; border-radius: var(--border-radius); transition: background-color 0.2s ease; - margin-left: auto; + /* margin-left: auto; */ } .admin-label { @@ -545,6 +553,7 @@ button:disabled { .inline-buttons { display: flex; gap: 10px; + flex-wrap: nowrap; } .inline-buttons button { @@ -655,9 +664,9 @@ button:disabled { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 15px; - border-bottom: var(--border-width) solid var(--border-color); - padding-bottom: 10px; + /* margin-bottom: 15px; */ + /* border-bottom: var(--border-width) solid var(--border-color); */ + /* padding-bottom: 10px; */ } .countdown-btn { @@ -1002,34 +1011,99 @@ body.dark-mode .sql-results-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } -@media (max-width: 700px) { - body { - padding: 10px; - } - .inline-buttons { - flex-direction: column; - } +/* Config Toggle Button Styles */ +.config-toggle-btn { + width: 24px; + height: 24px; + padding: 0; + background: var(--secondary-color); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + font-family: var(--font-family); + font-size: 14px; + cursor: pointer; + margin-left: 10px; + font-weight: bold; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} - .query-actions { - flex-direction: column; - } +/* Toggle Button Styles */ +.toggle-btn { + width: auto; + min-width: 120px; + padding: 8px 12px; + background: var(--secondary-color); + color: var(--primary-color); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + font-family: var(--font-family); + font-size: 12px; + cursor: pointer; + transition: all 0.2s ease; + margin-left: auto; +} - h1 { - font-size: 20px; - } +.toggle-btn:hover { + border-color: var(--accent-color); +} - h2 { - font-size: 14px; - } +.toggle-btn:active { + background: var(--accent-color); + color: var(--secondary-color); +} - .sql-results-table { - font-size: 10px; - } +.config-toggle-btn:hover { + border-color: var(--accent-color); +} - .sql-results-table th, - .sql-results-table td { - padding: 4px 6px; - max-width: 120px; - } -} \ No newline at end of file +.config-toggle-btn:active { + background: var(--accent-color); + color: var(--secondary-color); +} + +.config-toggle-btn[data-state="true"] { + color: var(--accent-color); +} + +.config-toggle-btn[data-state="false"] { + color: var(--primary-color); +} + +.config-toggle-btn[data-state="indeterminate"] { + background-color: var(--muted-color); + color: var(--primary-color); + cursor: not-allowed; + border-color: var(--muted-color); + +} + + +/* ================================ + REAL-TIME EVENT RATE CHART + ================================ */ + +.chart-container { + margin: 20px 0; + padding: 15px; + background: var(--secondary-color); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); +} + +#event-rate-chart { + font-family: var(--font-family); + font-size: 12px; + line-height: 1.2; + color: var(--primary-color); + background: var(--secondary-color); + padding: 20px; + overflow: hidden; + white-space: pre; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + box-sizing: border-box; +} diff --git a/api/index.html b/api/index.html index 79d2152..11d78b8 100644 --- a/api/index.html +++ b/api/index.html @@ -54,9 +54,13 @@