feat(amuleapi): add web frontend for amuleapi - #220

Hello @ngosang, welcome back.

Let me know if amuleapi need any adjustment so we can merge it first, I tried my best testing it but I might have missed something.

@ngosang — quick read of src/webapi/static/js/events.js while drafting the bootstrap docs on the daemon side. The call ordering in data.ensure(key) is right (SSE opened before the snapshot GET), but seed() has a merge bug that re-introduces the race:

async function seed(key) {
  ...
  const m = new Map();
  for (const it of arr) m.set(String(it[spec.id]), it);
  collections.set(key, m);   // wipes anything applyDelta() inserted while the GET was in flight
}

While await spec.list() is in flight, applyDelta may already have written events into collections.get(key). The wholesale set(key, m) overwrites them, dropping any event whose payload isn't reflected in the snapshot. Same overwrite path runs from the resync handler. The bug bites hardest on _removed: a stale snapshot can resurrect an entry that a buffered delete had already removed.

Fix pattern + full rationale (with the _removed timeline + a JS sketch) in the Bootstrap: snapshot + stream section of EVENTS.md.

@ngosang — saw the new commit. Three findings from a fresh pass through static/js/:

You haven't rebased onto the latest amuleapi tree. Your PR base predates the four backend changes I landed earlier today:

• 1dd35a67 — file ECIDs gone from /downloads, /shared, and client.*_file_*
• 3dc6370f — clients[].ecid renamed to client_ecid (also in client_added / _updated / _removed payloads)
• 898818a5 — m_files is now unordered_map; wire iteration order of /downloads, /shared, /clients is no longer ECID-sorted, so order client-side
• 7dc005b4 — EVENTS.md gap-fills (bootstrap notes, ?channels= symmetry, status_changed / log_appended shapes called out)

Quick grep finds one spot that breaks after rebase: views/downloads.js:38 registers the clients resource with id: "ecid", and applyDelta's payload[spec.id] then reads .ecid off each client payload — that needs to be id: "client_ecid" once you rebase. Server / download / shared specs are already keyed on the right identifier (server .ecid, download / shared .hash).

Search lifecycle is polling but the SSE channel exists — needs the rebase too. views/search.js:1-3 says "Search has no SSE channel, so results are polled until the search reports complete" — that's stale. The amuleapi tree has had search_result_added and search_finished events since 9dc4f36a. Rebasing onto current feature/amuleapi-v0 puts those events on the wire, after which the search flow can switch to: subscribe on POST /search, append on search_result_added, finalize on search_finished, fall back to polling only if SSE drops. The "search may already be running" mount-time fetch becomes a bootstrap-style seed (open SSE, then GET /search/results, then drain buffer) for the search-active-on-reload case.

Bootstrap race in events.js is still open — see the earlier comment. Buffer-then-replay rationale (incl. _removed) in Bootstrap: snapshot + stream.

Hey @ngosang, I ran a quick pass over the web frontend — great work, this is a huge improvement over the old amuleweb; people will love it. 🎉

A few small things I noticed while clicking around:

• Peers table
  • It's a panel at the bottom of the Downloads view — with a long (unpaginated) queue above it, the peers list is hard to reach. Moving Peers to its own page/route would help a lot.
  • Columns aren't sortable (can't order by a column).
  • The file name isn't shown per peer.
  • The peer IP isn't displayed — would be good to show it, and we could enrich it with ip2country (country/flag) like the GUI does.
  • Only an Identity filter exists; a filter by DL state / UL state would be handy too.
• Large lists aren't paginated — the downloads and shared-files tables render the full list, which gets long on a big node. Vertical virtual (windowed) scrolling is probably the cleanest fit.
• Text search for tables — a free-text filter field on the tables (downloads, shared, peers) would make finding a row much easier.
• Language switcher — clicking the button cycles to the next locale; a dropdown list of locales would be more discoverable.

Nothing blocking — really nice first cut.

I will work on those issues + responsive design in the next weeks.

@got3nks

• language selector => feat(webui): replace language toggle with scalable dropdown #304
• virtualized tables + table filters + table sorting => feat(webui): virtualize data tables to handle thousands of rows #360
• remaining issues => New WebUI: Let users show/hide and resize table columns (persisted in localStorage) #361

@got3nks

* language selector => [feat(webui): replace language toggle with scalable dropdown #304](https://github.com/amule-org/amule/pull/304)

* virtualized tables + table filters + table sorting => [feat(webui): virtualize data tables to handle thousands of rows #360](https://github.com/amule-org/amule/pull/360)

* remaining issues => [New WebUI: Let users show/hide and resize table columns (persisted in localStorage) #361](https://github.com/amule-org/amule/issues/361)

Great job 🎉