Add a simple Admin UI

[joebew42]

This commit adds a simple admin UI page that will be available at http://localhost:4000/status. The port used can be configured from a configuration key (http_port). At the moment the UI will show the list of failed jobs only. The idea of this commit is to propose a starting point for an admin UI and discuss how it can be improved.

The changes

• a simple admin UI available at http://localhost:4000/status
• a new http API available at http://localhost:4000/api/
• at the moment the API exposes only one endpoint that returns the list of failed jobs (/api/failed_jobs)
• update the README.md

Questions

• What do you think to make this feature to be optional? So that a user can decide to enable or not.
• What about the bump of the version number of Toniq itself? What is the rule that we have to follow when bump the version?

[bnchrch]

Hey @joakimk as a fan of your library I can say this would be a really welcome addition to the project. Have you seen this?

[joakimk]

Oh, sorry... forgot about this one. I'll look at it as soon as I can.

[joebew42]

Hi folks! As I wrote in the first message, the idea of this commit is to propose a starting point for an admin UI and discuss how this feature can be improved.

At the moment we expose a single endpoint /failed_jobs by using the existing public API of toniq Toniq.failed_jobs. If we would to proceed in this direction we could think to expose other different endpoint (e.g. /running_jobs) and of course, its API counterpart in the module Toniq.running_jobs.

From the admin UI side we have a static page that uses jQuery that at periodic intervall (e.g. 5secs) polls the http endpoints.

At the moment there is no configurable feature-toggle to enable or disable the feature (e.g. as a user of Toniq I would like to disable the Admin UI for security concerns)

I think this is the DIRTY way of doing. I see that Toniq support a pub-sub feature. Maybe - as admin UI - we can consider to subscribe to all the events that occurs in the system and then visualize the overall Toniq status (running, failed, queue, etc ...). In this case I think we could use websocket and react???

Let me know what is the option for you, I would like to continue to work on it :+1:

[joakimk]

What would you think of doing the UI as a separate project where you are the main maintainer? I think it would go faster that way and we would not have to bump the Toniq major version if the admin UI changes in some incompatible way.

I like the idea of using pub/sub (JobEvent) and websockets (or frequent polling). The initial page load could load the current state and then it could listen for changes.

If I would make the admin UI myself I would like to build it as a Plug with a Elm front-end. The Elm app can live in it's own folder and be managed by https://github.com/halfzebra/create-elm-app. I would use style-elements for the UI https://www.youtube.com/watch?v=NYb2GDWMIm0.

But I'm okay if you want to do a regular React app :)

I think the UI should be something you can mount inside your own app as a plug. We can provide an example that does this and shows how to do authentication (as a separate plug). Also good if it encourages the developer to only serve the admin UI over SSL.

[joebew42]

Hi @joakimk , I am open to every suggestions, even better if they are confirmed and shared within the team :) Said that, I am ok to use an Elm app (Elm is something I wanted to learn, so this could be a good opportunity).

I will try to create a simple project with Plug and an Elm front that will subscribe to Toniq events through the pub-sub feature. I hope to propose a first solution ss soon as possible to share it here with you!

In the meantime if you have other proposals or suggestions, we can continue to talk here!

[joakimk]

I think it would be good if you used JobEvent.subscribe and didn't rely on redis in any way since it's not certain that Toniq will require redis in the future. In some situations it would be useful if it could run without persistence or with a different type of persistence.

[joakimk]

@joebew42 I'm working on an example of how to set up an Elm UI for this. Basics on how to handle input, output and rendering. With and without style elements.

If I find the time today to finish it I'll post it here.

[joakimk]

@joebew42 Here you go https://github.com/joakimk/toniq-admin-ui-example/ :)

See the commits.

First I made a regular Elm app and then I refactored it to use style-elements.

It's fine either way.

If you choose to go with regular html/css, have a look at elm-css.

Oh, and please use a elm-format plugin in your editor. It will save you a lot of time and keep the code consistent.

elmlang-slack is helpful.

[joebew42]

Thanks @joakimk , I will give a look in the next days! I think it will be very useful for me ;)