Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First rudimentary version of the web UI #371

Merged
merged 42 commits into from
Aug 26, 2023
Merged

Conversation

achimnol
Copy link
Member

@achimnol achimnol commented Aug 11, 2023

What do these changes do?

This PR introduces a new subpackage aiomonitor.webui, which is an aiohttp-based web UI running side-by-side to the existing telnet UI.

Given that most users of aiomonitor are backend developers, I chose htmx + mustache.js + Alpine.js + Tailwind CSS over modern frontend frameworks coming with complex state management using a large bundle of Javascript dependencies like React and Relay.
They are much simpler to understand (I learned how to use them in a day) and approachable from backend developers.

I also considered that the whole web UI stack should be runnable in offline (air-gapped) setups where we cannot access CDNs to fetch the javascript modules.
For this sake, the small size and self-contained single file distribution of htmx and Tailwind CSS are the perfect fit.

Kudos to @darjeeling for introducing htmx.

To share the core logic such as listing & inspect tasks and cancelling them, etc., I have refactored them as methods of the Monitor class while separating the presentation layer as the console (telnet) version and the web UI version.

This PR also includes various fixes to prevent deadlocks and rewriting the cancel implementation to be async, which were updated while working on test suite adaptation.

HTTP APIs

Currently the task listing, counting, and cancellation operations are provided as REST-style APIs with JSON responses. The task trace log pages are served as rendered HTMLs but later we could expose it as JSON APIs.

You could check the full list of HTTP endpoints at the end of the aiomonitor.webui.app module, defined as aiohttp.web.Application's routes.

Sneak Peak (draft)

image image image image

Are there changes in behavior for the user?

There should be no extra runtime overhead in the traced application.
Now we have a web-based inspection and debugging interface.

Related issue number

Checklist

  • I think the code is well written
  • Unit tests for the changes exist
  • Documentation reflects the changes
  • Add a new news fragment into the CHANGES folder
    • name it <issue_id>.<type> (e.g. 588.bugfix)
    • if you don't have an issue_id change it to the pr id after creating the PR
    • ensure type is one of the following:
      • .feature: Signifying a new feature.
      • .bugfix: Signifying a bug fix.
      • .doc: Signifying a documentation improvement.
      • .removal: Signifying a deprecation or removal of public API.
      • .misc: A ticket has been closed, but it is not of interest to users.
    • Make sure to use full sentences with correct case and punctuation, for example: Fix issue with non-ascii contents in doctest text files.

@achimnol achimnol self-assigned this Aug 11, 2023
- Refine output of task traces in termui
- The command functions in termui.commands must explicitly use
  `self._ui_loop.create_task()` instead of `asyncio.create_task()`
  to ensure it spawns the inner async command functions inside the UI
  event loop.

- `invoke_command()` in the test suite is updated to correctly
  create and wait `command_done_event` inside the UI event loop,
  instead of the pytest's temporary event loop.
@achimnol achimnol marked this pull request as ready for review August 26, 2023 17:39
@achimnol achimnol linked an issue Aug 26, 2023 that may be closed by this pull request
@achimnol achimnol enabled auto-merge (squash) August 26, 2023 18:28
@achimnol achimnol merged commit 4d8cd2a into main Aug 26, 2023
11 of 12 checks passed
@achimnol achimnol deleted the feature/web-interface-phase1 branch August 26, 2023 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Expose monitor over HTTP
1 participant