aegis-stack 0.2.0rc2__py3-none-any.whl

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/frontend/dashboard/cards/base_card.py

@@ -0,0 +1,256 @@
+"""
+Base Card Abstract Class
+
+Provides common functionality for all dashboard component cards,
+eliminating code duplication and ensuring consistent behavior.
+"""
+
+from abc import ABC, abstractmethod
+from typing import Any
+
+import flet as ft
+from app.components.frontend.controls import LabelText, SecondaryText, TitleText
+from app.services.system.models import ComponentStatus, ComponentStatusType
+
+
+class BaseCard(ABC):
+    """
+    Abstract base class for all dashboard component cards.
+
+    Provides common functionality including:
+    - Status-aware coloring
+    - Hover effects and animations
+    - Technology badge creation
+    - Standard card layout and styling
+    """
+
+    def __init__(self, component_data: ComponentStatus) -> None:
+        """
+        Initialize the base card with component data.
+
+        Args:
+            component_data: ComponentStatus containing health and metrics
+        """
+        self.component_data = component_data
+        self._card_container: ft.Container | None = None
+
+    def _get_status_colors(self) -> tuple[str, str, str]:
+        """
+        Get status-aware colors for the card.
+
+        Returns:
+            Tuple of (primary_color, background_color, border_color)
+        """
+        status = self.component_data.status
+
+        if status == ComponentStatusType.HEALTHY:
+            return (ft.Colors.GREEN, ft.Colors.SURFACE, ft.Colors.GREEN)
+        elif status == ComponentStatusType.INFO:
+            return (ft.Colors.BLUE, ft.Colors.SURFACE, ft.Colors.BLUE)
+        elif status == ComponentStatusType.WARNING:
+            return (ft.Colors.ORANGE, ft.Colors.SURFACE, ft.Colors.ORANGE)
+        else:  # UNHEALTHY
+            return (ft.Colors.RED, ft.Colors.SURFACE, ft.Colors.RED)
+
+    def _create_technology_badge(
+        self,
+        title: str,
+        subtitle: str,
+        badge_text: str,
+        icon: str,
+        badge_color: str,
+        width: int = 160,
+    ) -> ft.Container:
+        """
+        Create a standardized technology badge section.
+
+        Args:
+            title: Main technology title (e.g., "FastAPI", "Worker")
+            subtitle: Technology subtitle (e.g., "Backend API", "arq + Redis")
+            badge_text: Badge label text (e.g., "ACTIVE", "QUEUES")
+            icon: Emoji icon for the technology
+            badge_color: Background color for the badge
+            width: Width of the badge container
+
+        Returns:
+            Container with the technology badge
+        """
+        primary_color, _, _ = self._get_status_colors()
+
+        return ft.Container(
+            content=ft.Column(
+                [
+                    ft.Container(
+                        content=ft.Text(icon, size=32),
+                        padding=ft.padding.all(8),
+                        bgcolor=primary_color,
+                        border_radius=12,
+                        margin=ft.margin.only(bottom=8),
+                    ),
+                    TitleText(title),
+                    SecondaryText(subtitle),
+                    ft.Container(
+                        content=LabelText(
+                            badge_text,
+                            color=ft.Colors.WHITE,
+                        ),
+                        padding=ft.padding.symmetric(horizontal=8, vertical=2),
+                        bgcolor=badge_color,
+                        border_radius=8,
+                        margin=ft.margin.only(top=4),
+                    ),
+                ],
+                alignment=ft.MainAxisAlignment.CENTER,
+                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+                spacing=4,
+            ),
+            padding=ft.padding.all(16),
+            width=width,
+            alignment=ft.alignment.center,
+        )
+
+    def _create_section_container(
+        self,
+        content: list[ft.Control],
+        width: int,
+        title: str | None = None,
+    ) -> ft.Container:
+        """
+        Create a standardized section container with optional title.
+
+        Args:
+            content: List of controls to include in the section
+            width: Width of the section container
+            title: Optional section title
+
+        Returns:
+            Container with the section content
+        """
+        section_content = []
+        if title:
+            section_content.extend(
+                [
+                    ft.Text(title, size=16, weight=ft.FontWeight.BOLD),
+                    ft.Divider(height=1, color=ft.Colors.GREY_300),
+                ]
+            )
+        section_content.extend(content)
+
+        return ft.Container(
+            content=ft.Column(
+                section_content,
+                spacing=8,
+                alignment=ft.MainAxisAlignment.START,
+            ),
+            width=width,
+            padding=ft.padding.all(16),
+            alignment=ft.alignment.top_left,
+        )
+
+    @abstractmethod
+    def _get_technology_info(self) -> dict[str, Any]:
+        """
+        Get technology-specific information for the badge.
+
+        Returns:
+            Dictionary with keys: title, subtitle, badge_text, icon, badge_color
+        """
+        pass
+
+    @abstractmethod
+    def _create_middle_section(self) -> ft.Container:
+        """
+        Create the middle section content (component-specific).
+
+        Returns:
+            Container with the middle section content
+        """
+        pass
+
+    @abstractmethod
+    def _create_right_section(self) -> ft.Container:
+        """
+        Create the right section content (component-specific).
+
+        Returns:
+            Container with the right section content
+        """
+        pass
+
+    def _get_responsive_widths(self) -> dict[str, int]:
+        """
+        Get responsive widths for the 3-section layout.
+
+        Returns:
+            Dictionary with 'left', 'middle', 'right', and 'total' widths
+        """
+        # Default responsive widths - can be overridden by subclasses
+        return {
+            "left": 140,  # Technology badge - fixed but smaller
+            "middle": 420,  # Main content - gets most space (was 400)
+            "right": 220,  # Details - compact but functional (was 240)
+            "total": 800,  # Total card width
+        }
+
+    @abstractmethod
+    def _get_card_width(self) -> int:
+        """
+        Get the total width for this card type.
+
+        Returns:
+            Card width in pixels
+        """
+        return self._get_responsive_widths()["total"]
+
+    def build(self) -> ft.Container:
+        """Build and return the complete card with responsive 3-section layout."""
+        primary_color, background_color, border_color = self._get_status_colors()
+        tech_info = self._get_technology_info()
+        widths = self._get_responsive_widths()
+
+        # Create sections with responsive widths
+        left_section = ft.Container(
+            content=self._create_technology_badge(
+                title=tech_info["title"],
+                subtitle=tech_info["subtitle"],
+                badge_text=tech_info["badge_text"],
+                icon=tech_info["icon"],
+                badge_color=tech_info["badge_color"],
+                width=widths["left"],
+            ),
+            width=widths["left"],
+        )
+
+        middle_section = ft.Container(
+            content=self._create_middle_section(),
+            width=widths["middle"],
+            expand=True,  # Make middle section flexible
+        )
+
+        right_section = ft.Container(
+            content=self._create_right_section(),
+            width=widths["right"],
+        )
+
+        self._card_container = ft.Container(
+            content=ft.Row(
+                [
+                    left_section,
+                    ft.VerticalDivider(width=1, color=ft.Colors.GREY_300),
+                    middle_section,
+                    ft.VerticalDivider(width=1, color=ft.Colors.GREY_300),
+                    right_section,
+                ],
+                spacing=0,
+                alignment=ft.MainAxisAlignment.START,
+                vertical_alignment=ft.CrossAxisAlignment.START,
+            ),
+            bgcolor=ft.Colors.SURFACE,
+            border=ft.border.all(1, border_color),
+            border_radius=16,
+            padding=0,
+            width=widths["total"],
+            height=240,
+        )
+
+        return self._card_container

aegis/templates/cookiecutter-aegis-project/{{cookiecutter.project_slug}}/app/components/frontend/dashboard/cards/card_factory.py

@@ -0,0 +1,227 @@
+"""
+Card Factory Utilities
+
+Provides common patterns and utilities for creating dashboard card components,
+reducing duplication across different card types.
+"""
+
+import flet as ft
+from app.components.frontend.controls import (
+    LabelText,
+    MetricText,
+    PrimaryText,
+    SecondaryText,
+)
+
+
+class CardFactory:
+    """Factory class for creating common card components and patterns."""
+
+    @staticmethod
+    def create_stats_row(
+        label: str, value: str, value_color: str | None = None
+    ) -> ft.Row:
+        """
+        Create a standardized statistics row with label and value.
+
+        Args:
+            label: The label text (e.g., "Active Workers:")
+            value: The value text (e.g., "2")
+            value_color: Optional color for the value text
+
+        Returns:
+            Row with label and value properly aligned
+        """
+        value_control = LabelText(value)
+        if value_color:
+            value_control.color = value_color
+
+        return ft.Row(
+            [
+                SecondaryText(f"{label}:"),
+                value_control,
+            ],
+            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
+        )
+
+    @staticmethod
+    def create_metric_indicator(
+        label: str,
+        value: str,
+        icon: str,
+        color: str,
+        width: int = 100,
+        height: int = 70,
+    ) -> ft.Container:
+        """
+        Create a standardized metric indicator box.
+
+        Args:
+            label: Label for the metric (e.g., "LOAD_TEST")
+            value: Value to display (e.g., "0 jobs")
+            icon: Emoji icon for the metric
+            color: Border and accent color
+            width: Width of the indicator
+            height: Height of the indicator
+
+        Returns:
+            Container with the metric indicator
+        """
+        return ft.Container(
+            content=ft.Column(
+                [
+                    ft.Row(
+                        [
+                            ft.Text(icon, size=12),
+                            LabelText(label.upper()),
+                        ],
+                        spacing=5,
+                    ),
+                    ft.Container(height=2, bgcolor=color, border_radius=1),
+                    LabelText(value),
+                ],
+                spacing=2,
+            ),
+            padding=ft.padding.all(8),
+            bgcolor=ft.Colors.SURFACE,
+            border=ft.border.all(1, color),
+            border_radius=8,
+            width=width,
+            height=height,
+        )
+
+    @staticmethod
+    def create_progress_indicator(
+        label: str, value: float, details: str, color: str
+    ) -> ft.Container:
+        """
+        Create a progress indicator with label, progress bar, and details.
+
+        Args:
+            label: Label for the progress indicator
+            value: Progress value (0-100)
+            details: Additional details text
+            color: Color for the progress bar
+
+        Returns:
+            Container with the progress indicator
+        """
+        return ft.Container(
+            content=ft.Column(
+                [
+                    ft.Text(
+                        label,
+                        size=12,
+                        weight=ft.FontWeight.W_600,
+                        color=ft.Colors.GREY_600,
+                    ),
+                    ft.Container(
+                        content=ft.ProgressBar(
+                            value=value / 100.0,
+                            height=8,
+                            color=color,
+                            bgcolor=ft.Colors.GREY_300,
+                            border_radius=4,
+                        ),
+                        margin=ft.margin.only(top=4, bottom=4),
+                    ),
+                    ft.Row(
+                        [
+                            ft.Text(
+                                f"{value:.1f}%",
+                                size=16,
+                                weight=ft.FontWeight.W_700,
+                                color=ft.Colors.ON_SURFACE,
+                            ),
+                            ft.Text(
+                                details,
+                                size=14,
+                                color=ft.Colors.GREY_600,
+                            ),
+                        ],
+                        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
+                    ),
+                ],
+                spacing=2,
+            ),
+            padding=ft.padding.symmetric(horizontal=12, vertical=8),
+            expand=True,
+        )
+
+    @staticmethod
+    def create_circular_gauge(
+        label: str, value: float, unit: str, color: str
+    ) -> ft.Container:
+        """
+        Create a circular gauge-style metric display.
+
+        Args:
+            label: Label for the gauge
+            value: Numeric value to display
+            unit: Unit text (e.g., "MB", "%")
+            color: Color for the gauge border
+
+        Returns:
+            Container with the circular gauge
+        """
+        return ft.Container(
+            content=ft.Column(
+                [
+                    LabelText(label),
+                    ft.Container(
+                        content=ft.Column(
+                            [
+                                MetricText(f"{value:.1f}"),
+                                LabelText(unit),
+                            ],
+                            alignment=ft.MainAxisAlignment.CENTER,
+                            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+                            spacing=0,
+                        ),
+                        width=60,
+                        height=60,
+                        bgcolor=ft.Colors.with_opacity(0.1, color),
+                        border=ft.border.all(2, color),
+                        border_radius=30,
+                        padding=ft.padding.all(4),
+                    ),
+                ],
+                alignment=ft.MainAxisAlignment.CENTER,
+                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+                spacing=4,
+            ),
+            padding=ft.padding.all(8),
+        )
+
+    @staticmethod
+    def create_section_with_title(
+        title: str, content: list[ft.Control], width: int, spacing: int = 8
+    ) -> ft.Container:
+        """
+        Create a section container with title and content.
+
+        Args:
+            title: Section title
+            content: List of controls for the section content
+            width: Width of the section
+            spacing: Spacing between elements
+
+        Returns:
+            Container with titled section
+        """
+        section_content = [
+            PrimaryText(title),
+            ft.Divider(height=1, color=ft.Colors.GREY_300),
+        ]
+        section_content.extend(content)
+
+        return ft.Container(
+            content=ft.Column(
+                section_content,
+                spacing=spacing,
+                alignment=ft.MainAxisAlignment.START,
+            ),
+            width=width,
+            padding=ft.padding.all(16),
+            alignment=ft.alignment.top_left,
+        )