rafactor componenets to seperate files

Author: andrewm4894

dashboard/components.py

@@ -0,0 +1,19 @@
+"""
+Components module initialization.
+"""
+from .toolbar import create_toolbar_buttons
+from .search import create_search_form, create_last_n_form
+from .batch import create_batch_card
+from .settings import create_settings_dropdown
+from .header import create_header
+from .common import create_controls
+
+__all__ = [
+    'create_toolbar_buttons',
+    'create_search_form',
+    'create_last_n_form',
+    'create_batch_card',
+    'create_settings_dropdown',
+    'create_header',
+    'create_controls',
+] 

dashboard/components/__init__.py

@@ -0,0 +1,59 @@
+"""
+Batch-related components.
+"""
+from fasthtml.common import *
+from monsterui.all import *
+from dashboard.state import get_state
+
+def create_batches_dropdown(batch_name: str) -> DropDownNavContainer:
+    """Create the metric batches dropdown menu."""
+    state = get_state()
+    return DropDownNavContainer(
+        NavHeaderLi("metric batches"),
+        *[
+            Li(
+                A(
+                    name,
+                    hx_get=f"/batch/{name}",
+                    hx_push_url=f"/batch/{name}",
+                    hx_target="#main-content",
+                    hx_indicator="#loading",
+                    cls=f"{'uk-active' if name == batch_name else ''}",
+                )) for name in state.metric_batches
+        ],
+        uk_dropdown="pos: bottom-right; boundary: window; shift: true; flip: true;")
+
+def create_batch_card(batch_name: str, stats: dict) -> Card:
+    """Create a card displaying batch information."""
+    metric_info = [
+        (UkIcon("activity", cls="text-blue-500"), f"{stats['unique_metrics']} metrics"),
+        (UkIcon("clock", cls="text-green-500"), f"{stats['latest_timestamp']}"),
+        (UkIcon("bar-chart", cls="text-purple-500"), f"Avg Score: {stats['avg_score']:.1%}"),
+        (UkIcon("alert-circle", cls="text-red-500"), f"{stats['alert_count']} alerts"),
+    ]
+
+    metric_divs = [
+        DivLAligned(
+            icon,
+            P(text, cls=TextPresets.muted_sm),
+            cls="space-x-2",
+        ) for icon, text in metric_info
+    ]
+
+    return Card(
+        DivLAligned(
+            Div(
+                Button(batch_name,
+                       hx_get=f"/batch/{batch_name}",
+                       hx_push_url=f"/batch/{batch_name}",
+                       hx_target="#main-content",
+                       hx_indicator="#loading",
+                       cls=(ButtonT.primary, "w-full")),
+                DividerLine(),
+                DivLAligned(Div(*metric_divs, cls="space-y-1"), ),
+                cls="w-full",
+            ),
+            cls="w-full",
+        ),
+        cls="px-2 py-0.5 hover:border-primary transition-colors duration-200",
+    ) 

dashboard/components/batch.py

@@ -0,0 +1,27 @@
+"""
+Common components shared across the dashboard.
+"""
+from fasthtml.common import *
+from monsterui.all import *
+from .search import create_search_form, create_last_n_form
+from .toolbar import create_toolbar_buttons
+
+def create_controls(batch_name: str) -> Card:
+    """Create the main controls for the dashboard."""
+    return Card(
+        DivFullySpaced(
+            Div(
+                Div(
+                    Div(
+                        create_toolbar_buttons(batch_name),
+                        Div(
+                            create_search_form(batch_name),
+                            create_last_n_form(batch_name),
+                            cls="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4 mt-4",
+                        ),
+                        cls="flex flex-col w-full",
+                    ), ),
+                cls="w-full",
+            ), ),
+        cls="mb-4 uk-padding-small py-2 shadow-sm",
+    ) 

dashboard/components/common.py

@@ -0,0 +1,27 @@
+"""
+Header components.
+"""
+from fasthtml.common import *
+from monsterui.all import *
+
+def create_header() -> Div:
+    """Create the dashboard header."""
+    return DivLAligned(
+        H2(
+            "Anomstack",
+            P(
+                "Painless open source anomaly detection for your metrics 📈📉🚀",
+                cls=TextPresets.muted_sm,
+            ),
+            cls="mb-2",
+        ),
+        A(
+            DivLAligned(UkIcon("github")),
+            href="https://github.com/andrewm4894/anomstack",
+            target="_blank",
+            cls="uk-button uk-button-secondary",
+            uk_tooltip="View on GitHub",
+        ),
+        style="justify-content: space-between;",
+        cls="mb-6",
+    )