From b677fbbe81bfe68233fa909a3f65ead57c4e2728 Mon Sep 17 00:00:00 2001
From: Jake Turner <jturner@cosmistack.com>
Date: Tue, 7 Oct 2025 00:12:34 -0700
Subject: [PATCH] feat: add dozzle for enhanced logs and metrics

---
 admin/inertia/components/StyledSidebar.tsx | 23 +++++++++++-----------
 admin/inertia/layouts/SettingsLayout.tsx   |  4 +++-
 install/management_compose.yaml            | 11 +++++++++++
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/admin/inertia/components/StyledSidebar.tsx b/admin/inertia/components/StyledSidebar.tsx
index 75d434a..f15ed9d 100644
--- a/admin/inertia/components/StyledSidebar.tsx
+++ b/admin/inertia/components/StyledSidebar.tsx
@@ -4,14 +4,17 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import classNames from '~/lib/classNames'
 import { IconArrowLeft } from '@tabler/icons-react'
 
+type SidebarItem = {
+  name: string
+  href: string
+  icon?: React.ElementType
+  current: boolean
+  target?: string
+}
+
 interface StyledSidebarProps {
   title: string
-  items: Array<{
-    name: string
-    href: string
-    icon?: React.ElementType
-    current: boolean
-  }>
+  items: SidebarItem[]
 }
 
 const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
@@ -22,16 +25,12 @@ const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
     return window.location.pathname
   }, [])
 
-  const ListItem = (item: {
-    name: string
-    href: string
-    icon?: React.ElementType
-    current: boolean
-  }) => {
+  const ListItem = (item: SidebarItem) => {
     return (
       <li key={item.name}>
         <a
           href={item.href}
+          target={item.target}
           className={classNames(
             item.current
               ? 'bg-desert-green text-white'
diff --git a/admin/inertia/layouts/SettingsLayout.tsx b/admin/inertia/layouts/SettingsLayout.tsx
index 186b856..ee16e89 100644
--- a/admin/inertia/layouts/SettingsLayout.tsx
+++ b/admin/inertia/layouts/SettingsLayout.tsx
@@ -4,12 +4,14 @@ import {
   FolderIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
-import { IconGavel } from '@tabler/icons-react'
+import { IconDashboard, IconGavel } from '@tabler/icons-react'
 import StyledSidebar from '~/components/StyledSidebar'
+import { getServiceLink } from '~/lib/navigation'
 
 const navigation = [
   { name: 'Apps', href: '/settings/apps', icon: CommandLineIcon, current: false },
   { name: 'Legal Notices', href: '/settings/legal', icon: IconGavel, current: false },
+  { name: 'Service Logs & Metrics', href: getServiceLink('9999'), icon: IconDashboard, current: false, target: '_blank' },
   { name: 'ZIM Manager', href: '/settings/zim', icon: FolderIcon, current: false },
   {
     name: 'Zim Remote Explorer',
diff --git a/install/management_compose.yaml b/install/management_compose.yaml
index 66bf994..f329051 100644
--- a/install/management_compose.yaml
+++ b/install/management_compose.yaml
@@ -34,6 +34,17 @@ services:
       interval: 30s
       timeout: 10s
       retries: 3
+  dozzle:
+    image: amir20/dozzle:latest
+    container_name: nomad_dozzle
+    restart: unless-stopped
+    ports:
+      - "9999:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock # Allows Dozzle to read logs from the Host's Docker daemon
+    environment:
+      - DOZZLE_ENABLE_ACTIONS=true # Enables the action buttons (restart, stop, etc.)
+      - DOZZLE_ENABLE_SHELL=true  # Enables web-based shell access
   mysql:
     image: mysql:8.0
     container_name: nomad_mysql