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

feat: add the initial administration panel #156

Merged
merged 2 commits into from
Jun 20, 2023

Conversation

Angelmmiguel
Copy link
Contributor

As Wasm Workers Server is evolving, we want to start adding an UI to start managing it. I'm really happy to open this PR as an initial version of that UI 😄. This admin panel is enabled via the --enable-panel flag and the UI looks like this:

$ wws https://github.com/vmware-labs/wasm-workers-server.git --git-folder "examples/python-basic" -i --enable-panel
⚙️  Preparing the project from: https://github.com/vmware-labs/wasm-workers-server.git
⚙️  Checking local configuration...
🚀 Installing: wasmlabs - python / 3.11.1+20230217
✅ Done
⚙️  Loading routes from: /tmp/dd21e3cd6d0f515301e1c7070e562af06074d9e8d10566179f97dba47e74cec9/examples/python-basic
⏳ Loading workers from 1 routes...
✅ Workers loaded in 489.699125ms.
    - http://127.0.0.1:8080/
      => /tmp/dd21e3cd6d0f515301e1c7070e562af06074d9e8d10566179f97dba47e74cec9/examples/python-basic/index.py
🎛️  The admin panel is available at http://127.0.0.1:8080/_panel/
🚀 Start serving requests at http://127.0.0.1:8080

Home page showing a card with the number of current workers
List all the current workers in the server
Show the details of a specific worker

In the future, we will start adding more features to it.

Development

Currently, the UI is shipped as a crate (panel) and integrated in the main project. The client uses React, Clarity Core and Vite. To develop this UI you need to install NodeJS and NPM in your environment.

Cargo automatically builds the UI based from the build.rs file. If npm is not available, the build pipeline will success, although the panel won't be available. We designed this way to avoid breaking build pipelines that don't relate to the client when node / npm is not available.

Integration

To integrate the compiled admin panel into the project, I used the rust-embed project. It automatically picks the files in a folder, embed them in the binary and provide an API to get the file content. With this approach we keep the server as a single-binary that it's easier to distribute.

It closes #153

@Angelmmiguel Angelmmiguel added the 🚀 enhancement New feature or request label Jun 12, 2023
@Angelmmiguel Angelmmiguel added this to the v1.3.0 milestone Jun 12, 2023
@Angelmmiguel Angelmmiguel requested a review from a team June 12, 2023 14:33
@Angelmmiguel Angelmmiguel self-assigned this Jun 12, 2023
Copy link
Contributor

@ereslibre ereslibre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks @Angelmmiguel! A non-blocking minor question.

crates/panel/client/src/routes/home.jsx Show resolved Hide resolved
Copy link
Contributor

@assambar assambar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

crates/panel/build.rs Show resolved Hide resolved
@Angelmmiguel Angelmmiguel merged commit 5f038c8 into main Jun 20, 2023
@Angelmmiguel Angelmmiguel deleted the 153-initial-admin-panel branch June 30, 2023 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Local panel to manage the current project
4 participants