feat: CheckMK host link in inventory, system logs hidden by default in logbook

src/App.tsx

@@ -54,6 +54,7 @@ export default function App() {
 
   const [inventoryHighlightDevice, setInventoryHighlightDevice] = useState<Device | null>(null);
   const [checkmkEnabled, setCheckmkEnabled] = useState(false);
+  const [checkmkBaseUrl, setCheckmkBaseUrl] = useState('');
 
   useEffect(() => {
     const root = document.documentElement;
@@ -142,7 +143,7 @@ export default function App() {
         if (bookingsRes.ok) setBookings(await bookingsRes.json());
         if (logsRes.ok) setLogs(await logsRes.json());
         if (linksRes.ok) setLinks(await linksRes.json());
-        if (configRes.ok) { const cfg = await configRes.json(); setCheckmkEnabled(!!cfg.checkmkEnabled); }
+        if (configRes.ok) { const cfg = await configRes.json(); setCheckmkEnabled(!!cfg.checkmkEnabled); setCheckmkBaseUrl(cfg.checkmkBaseUrl || ''); }
       } catch (err) {
         console.error('[App] Failed to load data:', err);
       } finally {
@@ -584,6 +585,7 @@ export default function App() {
             <DeviceInventory
               devices={devices}
               checkmkEnabled={checkmkEnabled}
+              checkmkBaseUrl={checkmkBaseUrl}
               onAddDevice={handleAddDevice}
               onUpdateDevice={handleUpdateDevice}
               onDeleteDevice={handleDeleteDevice}

src/components/DeviceInventory.tsx

@@ -7,7 +7,7 @@ import React, { useState, useMemo } from 'react';
 import { Device, DeviceType } from '../types';
 import {
   Server, Search, Plus, Trash, Edit2, MapPin, Gauge,
-  BookOpen, Save, X, Info
+  BookOpen, Save, X, Info, ExternalLink
 } from 'lucide-react';
 
 // Built-in device class presets shown in the dropdown.
@@ -16,6 +16,7 @@ const DEVICE_CLASS_PRESETS = ['Switch', 'Firewall', 'Access-Point', 'Controller'
 interface DeviceInventoryProps {
   devices: Device[];
   checkmkEnabled: boolean;
+  checkmkBaseUrl: string;
   onAddDevice: (device: Omit<Device, 'id'>) => void;
   onUpdateDevice: (device: Device) => void;
   onDeleteDevice: (id: string) => void;
@@ -24,6 +25,7 @@ interface DeviceInventoryProps {
 export default function DeviceInventory({
   devices,
   checkmkEnabled,
+  checkmkBaseUrl,
   onAddDevice,
   onUpdateDevice,
   onDeleteDevice,
@@ -62,6 +64,10 @@ export default function DeviceInventory({
   });
 
   const effectiveStatus = (d: Device): 'online' | 'offline' | 'unknown' => d.status;
+  const cmkHostUrl = (d: Device) =>
+    checkmkEnabled && checkmkBaseUrl && d.cmkHostname
+      ? `${checkmkBaseUrl}/index.py?host=${encodeURIComponent(d.cmkHostname)}`
+      : null;
 
   const statusMeta = (s: 'online' | 'offline' | 'unknown') => {
     if (s === 'online') return { label: 'online', badge: 'bg-emerald-950/60 border-emerald-900/80 text-emerald-400', dot: 'bg-emerald-400' };
@@ -330,6 +336,17 @@ export default function DeviceInventory({
 
                     {/* Action Panel */}
                     <div className="flex items-center gap-1.5 border-l border-slate-800/80 pl-3">
+                      {cmkHostUrl(device) && (
+                        <a
+                          href={cmkHostUrl(device)!}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-1 px-1.5 rounded hover:bg-slate-800 text-slate-400 hover:text-cyan-400 transition-colors"
+                          title="Open host in CheckMK"
+                        >
+                          <ExternalLink className="w-3.5 h-3.5" />
+                        </a>
+                      )}
                       <button
                         onClick={() => handleOpenEdit(device)}
                         className="p-1 px-1.5 rounded hover:bg-slate-800 text-slate-400 hover:text-indigo-400 transition-colors"
@@ -400,6 +417,17 @@ export default function DeviceInventory({
                   </span>
                   ); })()}
                 </div>
+                {cmkHostUrl(selectedDevice) && (
+                  <a
+                    href={cmkHostUrl(selectedDevice)!}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center gap-1.5 px-3 py-1.5 bg-slate-900 border border-slate-700 text-slate-200 hover:text-cyan-400 hover:border-cyan-500 rounded text-xs transition-colors font-mono"
+                  >
+                    <ExternalLink className="w-3.5 h-3.5" />
+                    Open host in CheckMK
+                  </a>
+                )}
                 {selectedDevice.lastCheckedAt && (
                   <p className="text-[10px] text-slate-500 font-mono">
                     Last checked: {new Date(selectedDevice.lastCheckedAt).toLocaleString()}

src/components/Logbook.tsx

@@ -21,6 +21,7 @@ interface LogbookProps {
 export default function Logbook({ logs, devices, users, currentUser, onAddLog }: LogbookProps) {
   const [searchTerm, setSearchTerm] = useState('');
   const [typeFilter, setTypeFilter] = useState<string>('all');
+  const [showSystem, setShowSystem] = useState(false);
   
   // Custom Maintenance Log state
   const [showAddLog, setShowAddLog] = useState(false);
@@ -32,6 +33,7 @@ export default function Logbook({ logs, devices, users, currentUser, onAddLog }:
 
   // Filter logs
   const filteredLogs = sortedLogs.filter(log => {
+    if (!showSystem && log.type === 'system') return false;
     const matchesSearch = log.message.toLowerCase().includes(searchTerm.toLowerCase());
     const matchesType = typeFilter === 'all' || log.type === typeFilter;
     return matchesSearch && matchesType;
@@ -121,8 +123,8 @@ export default function Logbook({ logs, devices, users, currentUser, onAddLog }:
               className="w-full bg-slate-950 text-slate-101 border border-slate-800 rounded-lg pl-9 pr-4 py-1.5 text-xs focus:outline-none"
             />
           </div>
-          <div className="flex gap-1 shrink-0 text-xs font-medium">
-            {['all', 'booking', 'maintenance'].map((type) => (
+          <div className="flex gap-1 shrink-0 text-xs font-medium flex-wrap">
+            {['all', 'booking', 'maintenance', 'status'].map((type) => (
               <button
                 key={type}
                 onClick={() => setTypeFilter(type)}
@@ -135,6 +137,17 @@ export default function Logbook({ logs, devices, users, currentUser, onAddLog }:
                 {type === 'all' ? 'All' : getLogTypeLabel(type)}
               </button>
             ))}
+            <button
+              onClick={() => setShowSystem(v => !v)}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                showSystem
+                  ? 'bg-slate-700/40 border border-slate-600 text-slate-300'
+                  : 'bg-slate-950 text-slate-600 border border-slate-850 hover:text-slate-400'
+              }`}
+              title="Show/hide automated system & CheckMK entries"
+            >
+              System
+            </button>
           </div>
         </div>
 

src/types.ts

@@ -16,6 +16,7 @@ export interface Device {
   type: DeviceType;
   status: 'online' | 'offline' | 'unknown';
   emergencySheet: string; // Markdown text
+  cmkHostname?: string;
   lastCheckedAt?: string;
 }