v2.5.0: select key traffic by row click

admin-web/static/app.js

@@ -978,6 +978,26 @@ function ensureUserTrafficSelection() {
   state.userTrafficUser = state.users[0]?.name || "";
 }
 
+async function selectUserTraffic(name, options = {}) {
+  const next = String(name || "");
+  if (!next || !state.users.some((user) => user.name === next)) return;
+  const changed = state.userTrafficUser !== next;
+  state.userTrafficUser = next;
+  if (changed) {
+    state.userTraffic = null;
+  }
+  renderUsers();
+  renderUserTraffic();
+  if (options.scroll) {
+    $("#userTrafficPanel")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  try {
+    await refreshUserTraffic({ showLoading: true });
+  } catch (err) {
+    toast(err.message);
+  }
+}
+
 function userTrafficRows() {
   return state.userTraffic?.history || [];
 }
@@ -1114,11 +1134,12 @@ function renderUsers() {
   }
   tbody.innerHTML = state.users.map((user) => {
     const pending = state.pendingUsers.has(user.name);
+    const selected = user.name === state.userTrafficUser;
     const traffic = user.traffic || {};
     const trafficTotal = Number(traffic.total_octets) ? fmtBytes(traffic.total_octets) : "--";
     const activeIps = Number(traffic.active_unique_ips) || 0;
     return `
-    <tr class="${user.enabled ? "" : "disabled-row"} ${pending ? "pending-row" : ""}">
+    <tr class="${user.enabled ? "" : "disabled-row"} ${pending ? "pending-row" : ""} ${selected ? "selected-row" : ""}" data-select-user-traffic="${escapeAttr(user.name)}" aria-selected="${selected ? "true" : "false"}">
       <td data-label="${escapeAttr(t("tableUser"))}">
         <strong>${escapeHtml(user.name)}</strong>${user.main ? ` <small>${escapeHtml(t("main"))}</small>` : ""}
       </td>
@@ -1227,6 +1248,7 @@ async function refreshAll() {
     state.backupSchedule = state.overview.backup_schedule || state.backupSchedule;
     updateLanguageFromOverview(state.overview);
     state.users = await api("/api/users");
+    ensureUserTrafficSelection();
     if (!state.stats) {
       state.stats = {
         current: state.overview.stats_current || {},
@@ -1532,8 +1554,7 @@ document.addEventListener("click", async (eventObj) => {
   }
 
   const button = eventObj.target.closest("button");
-  if (!button) return;
+  if (button) {
-
     if (button.id === "themeToggle") {
       setTheme(state.theme === "dark" ? "light" : "dark");
     } else if (button.id === "menuBtn") {
@@ -1544,8 +1565,7 @@ document.addEventListener("click", async (eventObj) => {
       state.trafficView = button.dataset.trafficView === "table" ? "table" : "chart";
       renderStats();
     } else if (button.dataset.userTraffic) {
-    state.userTrafficUser = button.dataset.userTraffic;
+      selectUserTraffic(button.dataset.userTraffic, { scroll: true });
-    refreshUserTraffic({ showLoading: true }).catch((err) => toast(err.message));
     } else if (button.dataset.userQr) {
       showUserQr(button.dataset.userQr);
     } else if (button.dataset.userTrafficRange) {
@@ -1567,6 +1587,12 @@ document.addEventListener("click", async (eventObj) => {
       const name = button.dataset.restart;
       if (confirm(`${t("confirmRestart")} ${name}?`)) restartService(name).catch((err) => toast(err.message));
     }
+    return;
+  }
+
+  const row = eventObj.target.closest("[data-select-user-traffic]");
+  if (!row) return;
+  selectUserTraffic(row.dataset.selectUserTraffic, { scroll: true });
 });
 
 document.addEventListener("change", (eventObj) => {

admin-web/static/index.html

@@ -400,6 +400,6 @@
       </div>
     </div>
   </div>
-  <script src="/app.js?v=2.5.0-admin10" type="module"></script>
+  <script src="/app.js?v=2.5.0-admin11" type="module"></script>
 </body>
 </html>

admin-web/static/styles.css

@@ -808,6 +808,23 @@ tr:last-child td {
   border-bottom: 0;
 }
 
+tr[data-select-user-traffic] {
+  cursor: pointer;
+  transition: background .16s ease, box-shadow .16s ease;
+}
+
+tr[data-select-user-traffic]:hover td {
+  background: color-mix(in srgb, var(--blue) 7%, transparent);
+}
+
+tr.selected-row td {
+  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
+}
+
+tr.selected-row td:first-child {
+  box-shadow: inset 4px 0 0 var(--blue);
+}
+
 .disabled-row {
   opacity: .72;
 }