aegis-stack 0.2.0rc2__py3-none-any.whl

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/frontend/main.py.j2

@@ -0,0 +1,653 @@
+"""Stunning marketing-grade dashboard with professional component cards."""
+
+import asyncio
+from collections.abc import Awaitable, Callable
+from typing import Any
+
+import flet as ft
+from flet import PageDisconnectedException
+
+from app.core.log import logger
+from app.services.system.models import ComponentStatus, ComponentStatusType
+from .dashboard.cards import (
+    FastAPICard,
+    FletCard,
+    {%- if cookiecutter.include_ai == "yes" %}
+    AICard,
+    {%- endif %}
+    {%- if cookiecutter.include_auth == "yes" %}
+    AuthCard,
+    ServicesCard,
+    {%- endif %}
+    {%- if cookiecutter.include_database == "yes" %}
+    DatabaseCard,
+    {%- endif %}
+    {%- if cookiecutter.include_redis == "yes" %}
+    RedisCard,
+    {%- endif %}
+    {%- if cookiecutter.include_scheduler == "yes" %}
+    SchedulerCard,
+    {%- endif %}
+    {%- if cookiecutter.include_worker == "yes" %}
+    WorkerCard,
+    {%- endif %}
+)
+from .dashboard.cards.card_utils import create_health_status_indicator
+from .theme import ThemeManager
+
+# Constants for health system grouping
+COMPONENTS_GROUP_KEY = "components"
+SERVICES_GROUP_KEY = "services"
+SERVICE_PREFIX = "service_"
+
+# Use simple filenames - Flet should auto-resolve from assets_dir
+DEFAULT_LOGO_PATH = "aegis-manifesto.png"
+DEFAULT_DARK_LOGO_PATH = "aegis-manifesto-dark.png"
+
+
+class SystemDashboard:
+    """
+    Professional system dashboard with safe component references.
+
+    Eliminates IndexError crashes by storing direct references to dashboard
+    components instead of using brittle index-based access patterns.
+
+    Includes robust page disconnection handling to prevent crashes when
+    users navigate away from the dashboard during auto-refresh cycles.
+
+    Note: Uses defensive programming around Flet's private APIs for
+    connection checking. This may need updates with future Flet versions.
+    """
+
+    def __init__(self):
+        # Direct component references - no more brittle indexing!
+        self._health_indicator_container: ft.Container | None = None
+        self._cards_container: ft.Container | None = None
+        self._theme_manager: ThemeManager | None = None
+        self._logo_image: ft.Image | None = None
+        self._page: ft.Page | None = None
+
+    def initialize_components(
+        self,
+        health_indicator_container: ft.Container,
+        cards_container: ft.Container,
+        theme_manager: ThemeManager,
+        logo_image: ft.Image,
+        page: ft.Page,
+    ) -> None:
+        """Initialize dashboard with component references."""
+        self._health_indicator_container = health_indicator_container
+        self._cards_container = cards_container
+        self._theme_manager = theme_manager
+        self._logo_image = logo_image
+        self._page = page
+
+        # Log Flet version for debugging connection check compatibility
+        try:
+            logger.debug(f"Initializing dashboard with Flet version: {ft.__version__}")
+        except AttributeError:
+            logger.debug("Flet version not available for compatibility logging")
+
+    def _is_page_connected(self) -> bool:
+        """
+        Check if the page is still connected.
+
+        Note: This uses Flet's private attribute access as a last resort.
+        This is necessary because Flet doesn't provide a public API for
+        connection status checking. While brittle, this prevents crashes
+        when users navigate away from the dashboard.
+
+        Returns False on any error to fail safely.
+        """
+        try:
+            if self._page is None:
+                return False
+
+            # Attempt to access Flet's private connection attribute
+            # This may break with future Flet versions, but will fail safely
+            if not hasattr(self._page, '_Page__conn'):
+                logger.debug(
+                    "Flet page connection attribute not found - assuming disconnected"
+                )
+                return False
+
+            return self._page._Page__conn is not None
+
+        except (AttributeError, Exception) as e:
+            # If anything goes wrong with connection checking, assume disconnected
+            # This provides defensive behavior against Flet internal changes
+            logger.debug(f"Page connection check failed, assuming disconnected: {e}")
+            return False
+
+    async def update_health_status(self, healthy_count: int, total_count: int) -> None:
+        """Safely update health status indicator."""
+        if not self._is_page_connected():
+            logger.debug("Page disconnected, skipping health status update")
+            return
+
+        if not self._health_indicator_container:
+            logger.warning("Health indicator container not initialized")
+            return
+
+        try:
+            new_health_indicator = create_health_status_indicator(
+                healthy_count, total_count
+            )
+            self._health_indicator_container.content = new_health_indicator
+            # Check connection again before updating container
+            if self._is_page_connected():
+                self._health_indicator_container.update()
+        except PageDisconnectedException:
+            logger.debug("Page disconnected during health status update")
+            return
+        except Exception as e:
+            logger.error(
+                f"Failed to update health status: {e}",
+                exc_info=True,
+                extra={
+                    "error_type": type(e).__name__,
+                    "function": "update_health_status",
+                    "healthy_count": healthy_count,
+                    "total_count": total_count,
+                }
+            )
+
+    async def update_component_cards(
+        self, components: dict[str, ComponentStatus], card_creator_fn: Callable
+    ) -> None:
+        """Safely update component cards."""
+        if not self._is_page_connected():
+            logger.debug("Page disconnected, skipping component cards update")
+            return
+
+        if not self._cards_container or not self._cards_container.content:
+            logger.warning("Cards container not initialized")
+            return
+
+        try:
+            # Clear existing cards
+            self._cards_container.content.controls.clear()
+
+            # Create cards for all available components with responsive sizing
+            for component_name, component_data in components.items():
+                card = card_creator_fn(component_name, component_data)
+                if (
+                    isinstance(card.content, ft.Text)
+                    and "Unknown component" in card.content.value
+                ):
+                    continue  # Skip unknown components
+
+                # Set responsive column sizing based on card type
+                if component_name.startswith("service_"):
+                    # Service cards: 1/3 width (4 = 33% = 3 columns)
+                    card.col = {"xs": 12, "sm": 6, "md": 4, "lg": 4, "xl": 4}
+                else:
+                    # Component cards: 1/2 width (6 = 50% = 2 columns)
+                    card.col = {"xs": 12, "sm": 12, "md": 6, "lg": 6, "xl": 6}
+                self._cards_container.content.controls.append(card)
+
+            # Check connection again before updating container
+            if self._is_page_connected():
+                self._cards_container.update()
+        except PageDisconnectedException:
+            logger.debug("Page disconnected during component cards update")
+            return
+        except Exception as e:
+            logger.error(
+                f"Failed to update component cards: {e}",
+                exc_info=True,
+                extra={
+                    "error_type": type(e).__name__,
+                    "function": "update_component_cards",
+                    "component_count": len(components),
+                }
+            )
+
+    async def show_error_status(self) -> None:
+        """Safely show error status in health indicator."""
+        if not self._is_page_connected():
+            logger.debug("Page disconnected, skipping error status display")
+            return
+
+        if not self._health_indicator_container:
+            logger.warning(
+                "Health indicator container not initialized for error display"
+            )
+            return
+
+        try:
+            error_indicator = create_health_status_indicator(0, 1)
+            self._health_indicator_container.content = error_indicator
+            # Check connection again before updating container
+            if self._is_page_connected():
+                self._health_indicator_container.update()
+        except PageDisconnectedException:
+            logger.debug("Page disconnected during error status display")
+            return
+        except Exception as e:
+            logger.error(
+                f"Failed to show error status: {e}",
+                exc_info=True,
+                extra={
+                    "error_type": type(e).__name__,
+                    "function": "show_error_status",
+                }
+            )
+
+
+# Load both light and dark logos as base64
+def get_logo_base64(dark_mode: bool = False) -> str:
+    """Get the logo as base64 for light or dark mode."""
+    try:
+        import base64
+        from pathlib import Path
+
+        filename = "aegis-manifesto-dark.png" if dark_mode else "aegis-manifesto.png"
+        logo_path = Path(__file__).parent.parent.parent.parent / "assets" / filename
+        with open(logo_path, "rb") as f:
+            return base64.b64encode(f.read()).decode()
+    except Exception:
+        # Fallback to tiny red pixel if file read fails
+        return (
+            "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHg"
+            "gJ/PchI7wAAAABJRU5ErkJggg=="
+        )
+
+
+def create_frontend_app() -> Callable[[ft.Page], Awaitable[None]]:
+    """Returns the Flet target function - simple system health dashboard."""
+
+    async def flet_main(page: ft.Page) -> None:
+        page.title = "Aegis Stack - System Dashboard"
+        page.padding = ft.padding.only(
+            left=20, right=20, top=20, bottom=20
+        )  # Proper left padding
+        page.scroll = ft.ScrollMode.AUTO
+
+        # Simple theme setup
+        theme_manager = ThemeManager(page)
+        await theme_manager.initialize_themes()
+
+        # Aegis Stack logo - bigger size and theme-aware loading
+        logo_image = ft.Image(
+            src_base64=get_logo_base64(theme_manager.is_dark_mode),
+            width=300,  # Bigger logo
+            height=90,  # Bigger logo
+            fit=ft.ImageFit.CONTAIN,
+            error_content=ft.Text(
+                "AEGIS STACK",
+                size=20,
+                weight=ft.FontWeight.BOLD,
+                color=ft.Colors.ON_SURFACE,
+            ),
+        )
+
+        # Theme toggle button
+        theme_button = ft.IconButton(
+            icon=ft.Icons.DARK_MODE,
+            tooltip="Switch to Dark Mode",
+            icon_size=24,
+        )
+
+        async def update_logo() -> None:
+            """Update logo based on current theme."""
+            try:
+                # Update the base64 source for the current theme
+                logo_image.src_base64 = get_logo_base64(theme_manager.is_dark_mode)
+                logo_image.src = None  # Clear the src to use src_base64
+            except Exception as e:
+                logger.error(
+                    f"Logo update failed: {e}",
+                    exc_info=True,
+                    extra={
+                        "error_type": type(e).__name__,
+                        "function": "update_logo",
+                        "is_dark_mode": getattr(
+                            theme_manager, 'is_dark_mode', 'unknown'
+                        )
+                    }
+                )
+
+        async def toggle_theme(_: Any) -> None:
+            """Toggle theme and update button icon and logo."""
+            try:
+                await theme_manager.toggle_theme()
+                if theme_manager.is_dark_mode:
+                    theme_button.icon = ft.Icons.LIGHT_MODE
+                    theme_button.tooltip = "Switch to Light Mode"
+                else:
+                    theme_button.icon = ft.Icons.DARK_MODE
+                    theme_button.tooltip = "Switch to Dark Mode"
+
+                # Update logo immediately after theme change
+                await update_logo()
+                # Safe updates - check connection first
+                if dashboard._is_page_connected():
+                    try:
+                        logo_image.update()
+                        page.update()
+                    except PageDisconnectedException:
+                        logger.debug("Page disconnected during theme toggle")
+            except PageDisconnectedException:
+                logger.debug("Page disconnected during theme toggle")
+            except Exception as e:
+                logger.error(
+                    f"Theme toggle failed: {e}",
+                    exc_info=True,
+                    extra={
+                        "error_type": type(e).__name__,
+                        "function": "toggle_theme"
+                    }
+                )
+
+        theme_button.on_click = toggle_theme
+
+        # Set initial logo based on current theme after theme manager is ready
+        await update_logo()
+
+        # Health status indicator with circular progress - create before header
+        health_status_indicator = create_health_status_indicator(
+            0, 0
+        )  # Start with loading state
+
+        # Create health indicator container with direct reference
+        # (no more brittle indexing)
+        health_indicator_container = ft.Container(
+            content=health_status_indicator,
+            margin=ft.margin.only(right=20),  # Space before theme button
+        )
+
+        # Professional header with Aegis Stack logo positioned further left
+        header = ft.Container(
+            content=ft.Row(
+                [
+                    ft.Row(
+                        [
+                            ft.Container(
+                                content=logo_image,
+                                margin=ft.margin.only(left=-20),  # Adjust for padding
+                            ),
+                            ft.Container(
+                                content=ft.Text(
+                                    "System Health Dashboard",
+                                    size=24,
+                                    weight=ft.FontWeight.W_400,
+                                    color=ft.Colors.ON_SURFACE,
+                                ),
+                                margin=ft.margin.only(left=10),  # Logo spacing
+                            ),
+                        ],
+                        alignment=ft.MainAxisAlignment.START,
+                    ),
+                    health_indicator_container,  # Use the direct reference
+                    ft.Container(content=theme_button, padding=10),
+                ],
+                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
+            ),
+            margin=ft.margin.only(bottom=20),
+            padding=ft.padding.only(left=0, right=0),  # Remove any default padding
+        )
+        # Responsive grid container - force 2 columns always
+        component_cards_container = ft.Container(
+            content=ft.ResponsiveRow(
+                controls=[],  # Will be populated with cards
+                spacing=20,  # Space between cards
+                run_spacing=20,  # Space between rows
+            ),
+            alignment=ft.alignment.center,
+        )
+
+        # Create SystemDashboard with safe component references
+        dashboard = SystemDashboard()
+
+        # Initialize dashboard with component references (using direct references)
+        dashboard.initialize_components(
+            health_indicator_container=health_indicator_container,
+            cards_container=component_cards_container,
+            theme_manager=theme_manager,
+            logo_image=logo_image,
+            page=page,
+        )
+
+        # Add everything to page with modern layout
+        page.add(
+            header,
+            ft.Container(
+                content=ft.Column(
+                    [
+                        ft.Divider(color=ft.Colors.OUTLINE_VARIANT),
+                        ft.Text(
+                            "System Components",
+                            size=24,
+                            weight=ft.FontWeight.W_600,
+                            color=ft.Colors.ON_SURFACE,
+                        ),
+                        component_cards_container,
+                    ],
+                    spacing=20,
+                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+                ),
+                alignment=ft.alignment.top_center,
+            ),
+        )
+
+        def create_component_card(
+            component_name: str, component_data: Any
+        ) -> ft.Container:
+            """Create stunning marketing-grade component cards."""
+            try:
+                if not component_data:
+                    logger.warning(f"No component data provided for {component_name}")
+                    return ft.Container()
+
+                # Map component names to their stunning card classes
+                if component_name == "backend":
+                    return FastAPICard(component_data).build()
+                elif component_name == "frontend":
+                    return FletCard(component_data).build()
+                {%- if cookiecutter.include_worker == "yes" %}
+                elif component_name == "worker":
+                    return WorkerCard(component_data).build()
+                {%- endif %}
+                {%- if cookiecutter.include_redis == "yes" %}
+                elif component_name == "cache":
+                    return RedisCard(component_data).build()
+                {%- endif %}
+                {%- if cookiecutter.include_database == "yes" %}
+                elif component_name == "database":
+                    return DatabaseCard(component_data).build()
+                {%- endif %}
+                {%- if cookiecutter.include_scheduler == "yes" %}
+                elif component_name == "scheduler":
+                    return SchedulerCard(component_data).build()
+                {%- endif %}
+                {%- if cookiecutter.include_ai == "yes" or cookiecutter.include_auth == "yes" %}
+                {%- if cookiecutter.include_auth == "yes" %}
+                elif component_name == "services":
+                    return ServicesCard(component_data).build()
+                {%- endif %}
+                # Individual service cards
+                {%- if cookiecutter.include_ai == "yes" %}
+                elif component_name == "service_ai":
+                    return AICard(component_data).build()
+                {%- endif %}
+                {%- if cookiecutter.include_auth == "yes" %}
+                elif component_name == "service_auth":
+                    return AuthCard(component_data).build()
+                elif component_name.startswith("service_"):
+                    # For other services, use generic ServicesCard for now
+                    return ServicesCard(component_data).build()
+                {%- endif %}
+                {%- endif %}
+                else:
+                    # Fallback for unknown components - should not happen in practice
+                    logger.warning(f"Unknown component type: {component_name}")
+                    return ft.Container(
+                        content=ft.Text(f"Unknown component: {component_name}"),
+                        padding=20,
+                        bgcolor=ft.Colors.SURFACE,
+                        border=ft.border.all(1, ft.Colors.OUTLINE_VARIANT),
+                        border_radius=16,
+                        width=800,
+                        height=240,
+                    )
+            except Exception as e:
+                logger.error(
+                    f"Failed to create component card for {component_name}: {e}",
+                    exc_info=True,
+                    extra={
+                        "error_type": type(e).__name__,
+                        "function": "create_component_card",
+                        "component_name": component_name,
+                        "component_data": component_data
+                    }
+                )
+                # Return fallback card on error
+                return ft.Container(
+                    content=ft.Text(f"Error loading {component_name}"),
+                    padding=20,
+                    bgcolor=ft.Colors.ERROR_CONTAINER,
+                    border=ft.border.all(1, ft.Colors.ERROR),
+                    border_radius=16,
+                    width=800,
+                    height=240,
+                )
+
+        async def refresh_dashboard() -> None:
+            """Refresh the stunning marketing-grade dashboard."""
+            try:
+                # Use the single /health/ endpoint for all health data
+                import httpx
+
+                async with httpx.AsyncClient() as client:
+                    response = await client.get("http://localhost:8000/health/")
+                    data = response.json()
+
+                # Extract components from health API response (navigate structure)
+                if "components" in data and "aegis" in data["components"]:
+                    aegis_component = data["components"]["aegis"]
+                    if "sub_components" in aegis_component:
+                        api_components = aegis_component["sub_components"]
+                    else:
+                        api_components = {}
+                else:
+                    api_components = {}
+
+                # Convert API data back to ComponentStatus objects for the cards
+                def convert_component(comp_data: dict[str, Any]) -> ComponentStatus:
+                    """Recursively convert API component data to ComponentStatus."""
+                    try:
+                        sub_components = {}
+                        if "sub_components" in comp_data:
+                            for sub_name, sub_data in comp_data[
+                                "sub_components"
+                            ].items():
+                                sub_components[sub_name] = convert_component(sub_data)
+
+                        return ComponentStatus(
+                            name=comp_data.get("name", "Unknown"),
+                            status=ComponentStatusType.HEALTHY
+                            if comp_data.get("healthy", False)
+                            else ComponentStatusType.UNHEALTHY,
+                            message=comp_data.get("message", "No message"),
+                            response_time_ms=comp_data.get("response_time_ms"),
+                            metadata=comp_data.get("metadata", {}),
+                            sub_components=sub_components,
+                        )
+                    except Exception as e:
+                        logger.error(
+                            f"Failed to convert component data: {e}",
+                            exc_info=True,
+                            extra={
+                                "error_type": type(e).__name__,
+                                "function": "convert_component", 
+                                "comp_data": comp_data
+                            }
+                        )
+                        # Return a fallback ComponentStatus
+                        return ComponentStatus(
+                            name=comp_data.get("name", "Unknown"),
+                            status=ComponentStatusType.UNHEALTHY,
+                            message=f"Error converting component: {e}",
+                            response_time_ms=None,
+                            metadata={},
+                            sub_components={},
+                        )
+
+                components = {}
+                for name, comp_data in api_components.items():
+                    # Special handling for "components" grouping - expand it
+                    if name == COMPONENTS_GROUP_KEY and "sub_components" in comp_data:
+                        # Add all individual components from the grouping
+                        for sub_name, sub_data in comp_data["sub_components"].items():
+                            components[sub_name] = convert_component(sub_data)
+                    # Special handling for "services" grouping - expand services
+                    elif name == SERVICES_GROUP_KEY and "sub_components" in comp_data:
+                        # Add all individual services from the grouping
+                        for service_name, service_data in comp_data[
+                            "sub_components"
+                        ].items():
+                            components[
+                                f"{SERVICE_PREFIX}{service_name}"
+                            ] = convert_component(service_data)
+                    else:
+                        # For other groupings, add as-is
+                        components[name] = convert_component(comp_data)
+
+                total_components = len(components)
+                healthy_components = len([c for c in components.values() if c.healthy])
+
+                # Update health status and component cards using safe dashboard methods
+                await dashboard.update_health_status(
+                    healthy_components, total_components
+                )
+                await dashboard.update_component_cards(
+                    components, create_component_card
+                )
+
+                # Safe page update - check connection first
+                if dashboard._is_page_connected():
+                    try:
+                        page.update()
+                    except PageDisconnectedException:
+                        logger.debug("Page disconnected during page.update()")
+                        raise
+
+            except PageDisconnectedException:
+                logger.debug("Page disconnected during dashboard refresh")
+                # Do NOT call show_error_status here: the page is already disconnected,
+                # so any attempt to update the UI (including showing an error) fails.
+                # Instead, propagate this exception so the auto_refresh loop can handle
+                # the disconnection gracefully and stop further updates.
+                raise
+            except Exception as e:
+                logger.error(
+                    f"Dashboard refresh failed: {e}",
+                    exc_info=True,
+                    extra={
+                        "error_type": type(e).__name__,
+                        "function": "refresh_dashboard"
+                    }
+                )
+                # Show error indicator using safe dashboard method
+                await dashboard.show_error_status()
+
+        async def auto_refresh() -> None:
+            """Simple auto-refresh loop that stops when page disconnects."""
+            while dashboard._is_page_connected():
+                try:
+                    await refresh_dashboard()
+                    await asyncio.sleep(30)
+                except PageDisconnectedException:
+                    logger.debug("Page disconnected, stopping auto-refresh loop")
+                    break
+                except Exception as e:
+                    logger.error(f"Error in auto-refresh loop: {e}", exc_info=True)
+                    # Continue the loop even if refresh fails
+                    await asyncio.sleep(30)
+
+        # Initial load and start refresh
+        await refresh_dashboard()
+        asyncio.create_task(auto_refresh())
+
+    return flet_main