refactored UI first version

Author: Andrei Neagu

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_common.py

@@ -5,17 +5,14 @@
 
 
 @contextmanager
-def base_page(*, title: str | None = None, colour: str = "#D3D3D3") -> Iterator[None]:
+def base_page(*, title: str | None = None) -> Iterator[None]:
     display_title = (
         "Dynamic Scheduler" if title is None else f"Dynamic Scheduler - {title}"
     )
     ui.page_title(display_title)
-    with ui.header(elevated=True).style(f"background-color: {colour}").classes(
-        "items-center justify-between"
-    ):
-        ui.label("HEADER")
 
-    yield None
+    with ui.header(elevated=True).classes("items-center"):
+        ui.button(icon="o_home", on_click=lambda: ui.navigate.to("/"))
+        ui.label(display_title)
 
-    with ui.footer().style(f"background-color: {colour}"):
-        ui.label("FOOTER")
+    yield None

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_index.py

@@ -1,48 +1,145 @@
+import json
+
+import arrow
+import httpx
 from fastapi import FastAPI
 from models_library.projects_nodes_io import NodeID
 from nicegui import APIRouter, app, ui
 from nicegui.element import Element
+from settings_library.utils_service import DEFAULT_FASTAPI_PORT
 
 from ...services.service_tracker import TrackedServiceModel, get_all_tracked_services
+from ...services.service_tracker._models import SchedulerServiceState
 from ._common import base_page
 from ._utils import get_parent_app
 
 router = APIRouter()
 
 
+def _get_elapsed(timestamp: float) -> str:
+    elapsed_time = arrow.utcnow() - arrow.get(timestamp)
+
+    days = elapsed_time.days
+    hours, remainder = divmod(elapsed_time.seconds, 3600)
+    minutes, seconds = divmod(remainder, 60)
+
+    # Format as "days hours:minutes:seconds"
+    return f"{days} days, {hours:02}:{minutes:02}:{seconds:02} ago"
+
+
+def _render_service_details(node_id: NodeID, service: TrackedServiceModel) -> None:
+    dict_to_render: dict[str, tuple[str, str]] = {
+        "NodeID": ("code", f"{node_id}"),
+        "Display State": ("label", service.current_state),
+        "Last State Change": ("label", _get_elapsed(service.last_state_change)),
+        "UserID": ("code", f"{service.user_id}"),
+        "ProjectID": ("code", f"{service.project_id}"),
+        "User Requested": ("label", service.requested_state),
+    }
+
+    if service.dynamic_service_start:
+        dict_to_render["Service"] = (
+            "label",
+            f"{service.dynamic_service_start.key}:{service.dynamic_service_start.version}",
+        )
+        dict_to_render["Product"] = (
+            "label",
+            service.dynamic_service_start.product_name,
+        )
+        service_status = json.loads(service.service_status) or {}
+        dict_to_render["Service State"] = (
+            "label",
+            service_status.get("service_state", ""),
+        )
+
+    with ui.column().classes("p-0 m-0"):
+        for key, (widget, value) in dict_to_render.items():
+            with ui.row(align_items="baseline").classes("p-0 m-0"):
+                ui.label(key).classes("font-bold")
+                match widget:
+                    case "code":
+                        ui.code(value)
+                    case "label":
+                        ui.label(value)
+                    case _:
+                        ui.label(value)
+
+
+def _render_buttons(node_id: NodeID, service: TrackedServiceModel) -> None:
+    with ui.row(align_items="baseline").classes("p-0 m-0"):
+        ui.button(
+            "Details",
+            icon="source",
+            on_click=lambda: ui.navigate.to(f"/service/{node_id}:details"),
+        )
+
+        def _render_progress() -> None:
+            ui.spinner(size="lg")
+
+        storage_key = f"removing-{node_id}"
+        if app.storage.general.get(storage_key, None):
+            # removal is in progress just render progress bar
+            _render_progress()
+            return
+
+        if service.current_state == SchedulerServiceState.RUNNING:
+            with ui.row(align_items="baseline").classes("p-0 m-0") as container:
+
+                async def async_task():
+                    container.clear()
+
+                    _render_progress()
+                    app.storage.general[storage_key] = True
+
+                    ui.notify(f"Started service stop request for {node_id}")
+
+                    await httpx.AsyncClient(timeout=10).get(
+                        f"http://localhost:{DEFAULT_FASTAPI_PORT}/service/{node_id}:stop"
+                    )
+
+                    app.storage.general.pop("removing-{node_id}", None)
+                    ui.notify(f"Finished service stop request for {node_id}")
+
+                ui.button("Stop service", icon="stop", on_click=async_task)
+
+
 def _render_card(
     card_container: Element, node_id: NodeID, service: TrackedServiceModel
 ) -> None:
     with card_container:  # noqa: SIM117
-        with ui.card():
-            ui.label(f"{node_id}")
-            # TODO finish card
-            ui.label(service.model_dump_json())
+        with ui.column().classes("border p-0 m-0"):
+            _render_service_details(node_id, service)
+            _render_buttons(node_id, service)
 
 
-async def _update_cards(parent_app: FastAPI, card_container) -> None:
-    card_container.clear()  # Clear the current cards
+class CardUpdater:
+    def __init__(self, parent_app: FastAPI, container: Element) -> None:
+        self.parent_app = parent_app
+        self.container = container
 
-    tracked_services = await get_all_tracked_services(parent_app)
+    async def update(self) -> None:
+        # TODO: rerender only if data changed
 
-    for node_id, service in tracked_services.items():
-        _render_card(card_container, node_id, service)
+        self.container.clear()  # Clear the current cards
 
+        tracked_services = await get_all_tracked_services(self.parent_app)
+
+        for node_id, service in tracked_services.items():
+            _render_card(self.container, node_id, service)
 
-# changed this form ui to router
-@router.page("/")
-async def main_page():
-    parent_app = get_parent_app(app)
 
+@router.page("/")
+async def index():
     with base_page():
 
         # Initial UI setup
         ui.label("Dynamic Item List")
 
         card_container: Element = ui.row()
 
-        # render cards when page is loaded
-        await _update_cards(parent_app, card_container)
+        updater = CardUpdater(get_parent_app(app), card_container)
 
+        # render cards when page is loaded
+        await updater.update()
         # update card at a set interval
-        ui.timer(1.0, lambda: _update_cards(parent_app, card_container))
+        ui.timer(1, lambda: updater.update())

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_router.py

@@ -0,0 +1,10 @@
+from nicegui import APIRouter
+
+from . import _index, _service
+
+router = APIRouter()
+
+router.include_router(_index.router)
+router.include_router(_service.router)
+
+__all__: tuple[str, ...] = ("router",)

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_service.py

@@ -0,0 +1,73 @@
+import json
+
+from models_library.projects_nodes_io import NodeID
+from nicegui import APIRouter, app, ui
+from servicelib.rabbitmq.rpc_interfaces.dynamic_scheduler.services import (
+    DynamicServiceStop,
+    stop_dynamic_service,
+)
+from simcore_service_dynamic_scheduler.services.rabbitmq import get_rabbitmq_rpc_client
+
+from ...core.settings import ApplicationSettings
+from ...services.service_tracker import get_tracked_service
+from ._common import base_page
+from ._utils import get_parent_app
+
+router = APIRouter()
+
+
+@router.page("/service/{node_id}:details")
+async def service_details(node_id: NodeID):
+    with base_page(title=f"{node_id} details"):
+        service_model = await get_tracked_service(get_parent_app(app), node_id)
+
+        if not service_model:
+            ui.markdown(
+                f"Sorry could not find any details for **node_id={node_id}**. "
+                "Please make sure the **node_id** is correct. "
+                "Also make sure you have not provided a **product_id**."
+            )
+            return
+
+        scheduler_internals = service_model.model_dump(mode="json")
+        service_status = json.loads(scheduler_internals.pop("service_status"))
+        dynamic_service_start = scheduler_internals.pop("dynamic_service_start")
+
+        ui.markdown("**Service Status**")
+        ui.code(json.dumps(service_status, indent=2), language="json")
+
+        ui.markdown("**Scheduler Internals**")
+        ui.code(json.dumps(scheduler_internals, indent=2), language="json")
+
+        ui.markdown("**Start Parameters**")
+        ui.code(json.dumps(dynamic_service_start, indent=2), language="json")
+
+
+@router.page("/service/{node_id}:stop")
+async def service_stop(node_id: NodeID):
+    with base_page(title=f"{node_id} details"):
+        parent_app = get_parent_app(app)
+
+        service_model = await get_tracked_service(parent_app, node_id)
+        if not service_model:
+            ui.notify(f"Could not stop service {node_id}. Was not abel to find it")
+            return
+
+        settings: ApplicationSettings = parent_app.state.settings
+
+        assert service_model.user_id  #  nosec
+        assert service_model.project_id  # nosec
+
+        await stop_dynamic_service(
+            get_rabbitmq_rpc_client(get_parent_app(app)),
+            dynamic_service_stop=DynamicServiceStop(
+                user_id=service_model.user_id,
+                project_id=service_model.project_id,
+                node_id=node_id,
+                simcore_user_agent="",
+                save_state=True,
+            ),
+            timeout_s=int(
+                settings.DYNAMIC_SCHEDULER_STOP_SERVICE_TIMEOUT.total_seconds()
+            ),
+        )

services/dynamic-scheduler/src/simcore_service_dynamic_scheduler/api/frontend/_setup.py

@@ -2,14 +2,14 @@
 from fastapi import FastAPI
 
 from ...core.settings import ApplicationSettings
-from . import _index
+from ._router import router
 from ._utils import set_parent_app
 
 
 def setup_frontend(app: FastAPI) -> None:
     settings: ApplicationSettings = app.state.settings
 
-    nicegui.app.include_router(_index.router)
+    nicegui.app.include_router(router)
 
     nicegui.ui.run_with(
         app, mount_path="/", storage_secret=settings.DYNAMIC_SCHEDULER_UI_STORAGE_SECRET