webgui updates

Author: gpetretto

.gitignore

@@ -161,3 +161,5 @@ cython_debug/
 
 # macOS
 .DS_store
+
+.sesskey

doc/source/user/gui.rst

@@ -0,0 +1,33 @@
+.. _gui:
+
+===
+GUI
+===
+
+A web based GUI is available for jobflow remote.
+Being based on the `FastHTML framework <https://docs.fastht.ml/>`_,
+requires the installation of the ``python-fasthtml`` package::
+
+    pip install python-fasthtml
+
+.. warning::
+
+    The web GUI is an experimental feature and in addition does not
+    cover all the options available through the CLI.
+
+The GUI can be started from the CLI with the command::
+
+    jf gui
+
+This will start a local server and the GUI can be reached with
+a browser at the address `http://localhost:5001 <http://localhost:5001>`_.
+The default port is 5001, but can be customized with the ``-p``
+option.
+
+Some of the features available in the GUI are:
+
+* Selecting the project
+* Starting and stopping the Runner
+* Query Jobs and Flows based on different criteria
+* Explore Jobs and Flows details
+* Apply some standard actions on Jobs and Flows

doc/source/user/index.rst

@@ -22,6 +22,7 @@ details are found in :ref:`reference`.
    advancedoptions
    backup
    cli
+   gui
 
 .. toctree::
    :hidden:

pyproject.toml

@@ -49,6 +49,9 @@ docs = [
     "sphinxcontrib-mermaid",
     "sphinxcontrib-typer[html]",
 ]
+gui = [
+    "python-fasthtml>=0.12.0"
+]
 
 [project.scripts]
 jf = "jobflow_remote.cli.jf:app"
@@ -61,6 +64,7 @@ changelog = "https://matgenix.github.io/jobflow-remote/changelog"
 
 [tool.setuptools.package-data]
 jobflow_remote = ["py.typed"]
+"jobflow_remote.webgui" = ["*.png", "*.css"]
 
 [build-system]
 requires = ["setuptools >= 42", "versioningit  ~=  1.0", "wheel"]

src/jobflow_remote/cli/__init__.py

@@ -4,6 +4,7 @@
 import jobflow_remote.cli.batch
 import jobflow_remote.cli.execution
 import jobflow_remote.cli.flow
+import jobflow_remote.cli.gui
 import jobflow_remote.cli.job
 import jobflow_remote.cli.project
 import jobflow_remote.cli.runner

src/jobflow_remote/cli/gui.py

@@ -0,0 +1,22 @@
+from typing import Annotated, Optional
+
+import typer
+from jobflow_remote.cli.jf import app
+
+
+@app.command()
+def gui(
+    port: Annotated[
+        Optional[int],
+        typer.Option(
+            "--port",
+            "-p",
+            help="The port where the web server will be started. Defaults to 5001",
+        ),
+    ] = None,
+) -> None:
+    """
+    Start the server for the GUI
+    """
+    from jobflow_remote.webgui.webgui import start_gui
+    start_gui(port=port)

src/jobflow_remote/jobs/jobcontroller.py

@@ -462,6 +462,8 @@ def get_jobs_info(
             query. Follows pymongo conventions.
         limit
             Maximum number of entries to retrieve. 0 means no limit.
+        skip
+            The number of documents to omit (from the start of the result set).
 
         Returns
         -------
@@ -2299,6 +2301,8 @@ def get_flows_info(
             If True data is fetched from both the Flow collection and Job collection
             with an aggregate. Otherwise, only the Job information in the Flow
             document will be used.
+        skip
+            The number of documents to omit (from the start of the result set).
 
         Returns
         -------

src/jobflow_remote/webgui/jfr_favicon.ico

@@ -101,7 +101,6 @@ table {
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
-    max-width: 1200px;
 }
 
 th, td {

src/jobflow_remote/webgui/style.css

@@ -4,40 +4,63 @@
 from datetime import datetime, timezone
 from math import ceil
 from zoneinfo import ZoneInfo
+from pathlib import Path
+
+from monty.dev import requires
+
+try:
+    import fasthtml
+    from fasthtml.common import (
+        H1,
+        H3,
+        H4,
+        A,
+        Button,
+        Card,
+        CheckboxX,
+        Dialog,
+        Div,
+        Favicon,
+        Form,
+        Group,
+        Img,
+        Input,
+        Label,
+        Li,
+        Link,
+        Main,
+        Option,
+        P,
+        Script,
+        Select,
+        Span,
+        Table,
+        Td,
+        Th,
+        Title,
+        Tr,
+        Ul,
+        fast_app,
+        serve,
+    )
+except ImportError:
+    fasthtml = None
+
+    # fake rt decorator
+    def rt_fake(*args, **kwargs):
+        def wrapper(func):
+            return func
+
+        return wrapper
+
+    def fast_app(*args, **kwargs):
+        return lambda x: x, rt_fake
+
+    def fake_function(*args, **kwargs):
+        return None
+
+    Title = Link = Script = Favicon = fake_function
 
-from fasthtml.common import (
-    H1,
-    H3,
-    H4,
-    A,
-    Button,
-    Card,
-    CheckboxX,
-    Dialog,
-    Div,
-    Favicon,
-    Form,
-    Group,
-    Img,
-    Input,
-    Label,
-    Li,
-    Link,
-    Main,
-    Option,
-    P,
-    Script,
-    Select,
-    Span,
-    Table,
-    Td,
-    Th,
-    Title,
-    Tr,
-    Ul,
-    fast_app,
-    serve,
-)
 
 from jobflow_remote import ConfigManager
 from jobflow_remote.jobs.daemon import DaemonManager, DaemonStatus
@@ -86,9 +109,10 @@ def error_handler(req, exc):
     hdrs=(
         Link(rel="stylesheet", href="./style.css", type="text/css"),
         Script(mermaid_js, type="module"),
-        Favicon("logo_jfr.png", "logo_jfr.png"),
+        Favicon("jfr_favicon.ico", "jfr_favicon.ico"),
     ),  # Add custom CSS as a header
     exception_handlers=exception_handlers,
+    static_path=Path(__file__).parent,
 )
 
 
@@ -129,11 +153,6 @@ def error_handler(req, exc):
 
 list_projects = list(cm.projects.keys())
 
-# job_controllers: dict[str, JobController] = {}
-# daemon_managers: dict[str, DaemonManager] = {}
-# job_controller: JobController | None = None
-# job_controller_actions: dict[str, dict[str, Callable]] | None = None
-# daemon_manager: DaemonManager | None = None
 job_controllers = {}
 daemon_managers = {}
 job_controller = None
@@ -384,7 +403,7 @@ def close_dialog():
     return ""
 
 
-# Add these new routes to handle starting and stopping the runner
+# handle starting and stopping the runner
 @rt("/runner/{proj_name}/start", methods=["POST"])
 def start_runner_route(proj_name: str):
     dm = daemon_managers[proj_name]
@@ -429,7 +448,6 @@ def stop_runner_route(proj_name: str):
     )
 
 
-# Modify the existing route to update the runner status
 @rt("/runner/{proj_name}/status")
 def get_runner_status_update(proj_name: str):
     status, color = get_runner_status(proj_name)
@@ -458,7 +476,6 @@ def get_runner_status_update(proj_name: str):
 
 def get_runner_status(proj_name: str):
     dm = daemon_managers[proj_name]
-    current_status = None
     current_status = dm.check_status()
     color = status_colors[current_status]
 
@@ -727,15 +744,6 @@ def get_info_job_flow(jf_id: str, what: str, proj_name: str):
     return P("Job not found")
 
 
-# @rt("/{proj_name}/flows/graph/{jf_id}")
-# def get_graph_job_flow(jf_id: str, proj_name: str):
-#     flowinfo = job_controller.get_flows_info(limit=1,full=True)[0]
-#     graph = get_mermaid(flowinfo)
-#     # return Div(ScrollableArea(Pre(graph,cls="mermaid"), Script("await mermaid.run()")),cls="card")
-#     # return Div(ScrollableArea(Pre(graph,cls="mermaid"), Script("await mermaid.init()")),cls="card")
-#     return Div(ScrollableArea(Pre(graph,cls="mermaid"), Script("await mermaid.run({nodes: document.querySelectorAll('.mermaid'),})")),cls="card")
-
-
 @rt("/{proj_name}/flows/graph/{jf_id}")
 def get_graph_job_flow(jf_id: str, proj_name: str):
     flowinfo = job_controller.get_flows_info(limit=1, full=True)[0]
@@ -1160,5 +1168,10 @@ def post(
     ), Div(Script(mermaid_js, type="module"), id="dialog-container")
 
 
+@requires(fasthtml is not None, "The 'python-fasthtml' package is required to run the gui.")
+def start_gui(port: int | None = None):
+    serve(appname="jobflow_remote.webgui.webgui", port=port, reload_includes=[Path(__file__).parent],)
+
+
 if __name__ == "__main__":
     serve()