UI: Installationsanleitung Button auf Firewalls und Proxmox Seiten

frontend/src/pages/Agents.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useMemo, useRef } from 'react'
 import api from '../api/client'
 import StatusBadge from '../components/StatusBadge'
 import AgentPanel from '../components/AgentPanel'
-import { Search, ChevronUp, ChevronDown, Plus, X, Settings2 } from 'lucide-react'
+import { Search, ChevronUp, ChevronDown, Plus, X, Settings2, BookOpen } from 'lucide-react'
 import InstallGuide from '../components/InstallGuide'
 
 const ALL_COLUMNS = [
@@ -51,6 +51,7 @@ export default function Agents() {
   const [sortDir, setSortDir] = useState('asc')
   const [selectedId, setSelectedId] = useState(null)
   const [showAddDialog, setShowAddDialog] = useState(false)
+  const [showInstallGuide, setShowInstallGuide] = useState(false)
   const [addResult, setAddResult] = useState(null)
   const [visibleCols, setVisibleCols] = useState(loadColumns)
   const [showColMenu, setShowColMenu] = useState(false)
@@ -215,12 +216,20 @@ export default function Agents() {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h1 className="text-xl font-bold text-white">Geraete ({agents.length})</h1>
-        <button
+        <div className="flex items-center gap-2">
-          onClick={() => { setShowAddDialog(true); setAddResult(null) }}
+          <button
-          className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white text-sm rounded transition-colors"
+            onClick={() => setShowInstallGuide(true)}
-        >
+            className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-white text-sm rounded transition-colors"
-          <Plus className="w-4 h-4" /> Geraet hinzufuegen
+          >
-        </button>
+            <BookOpen className="w-4 h-4" /> Installationsanleitung
+          </button>
+          <button
+            onClick={() => { setShowAddDialog(true); setAddResult(null) }}
+            className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white text-sm rounded transition-colors"
+          >
+            <Plus className="w-4 h-4" /> Geraet hinzufuegen
+          </button>
+        </div>
       </div>
 
       <div className="flex items-center gap-3">
@@ -356,6 +365,21 @@ export default function Agents() {
         />
       )}
 
+      {/* Installationsanleitung Dialog */}
+      {showInstallGuide && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+          <div className="bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[85vh] overflow-y-auto">
+            <div className="flex items-center justify-between p-4 border-b border-gray-700">
+              <h2 className="text-lg font-semibold text-white">Installationsanleitung</h2>
+              <button onClick={() => setShowInstallGuide(false)} className="text-gray-400 hover:text-white"><X className="w-5 h-5" /></button>
+            </div>
+            <div className="p-4">
+              <InstallGuide />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Geraet hinzufuegen Dialog */}
       {showAddDialog && (
         <AddDeviceDialog

frontend/src/pages/ProxmoxServers.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useMemo, useRef } from 'react'
 import api from '../api/client'
 import StatusBadge from '../components/StatusBadge'
 import ProxmoxPanel from '../components/ProxmoxPanel'
-import { Search, ChevronUp, ChevronDown, Plus, X, Settings2 } from 'lucide-react'
+import { Search, ChevronUp, ChevronDown, Plus, X, Settings2, BookOpen } from 'lucide-react'
 import InstallGuide from '../components/InstallGuide'
 
 const ALL_COLUMNS = [
@@ -44,6 +44,7 @@ export default function ProxmoxServers() {
   const [sortDir, setSortDir] = useState('asc')
   const [selectedId, setSelectedId] = useState(null)
   const [showAddDialog, setShowAddDialog] = useState(false)
+  const [showInstallGuide, setShowInstallGuide] = useState(false)
   const [addResult, setAddResult] = useState(null)
   const [visibleCols, setVisibleCols] = useState(loadColumns)
   const [showColMenu, setShowColMenu] = useState(false)
@@ -209,12 +210,20 @@ export default function ProxmoxServers() {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h1 className="text-xl font-bold text-white">Proxmox Server ({enriched.length})</h1>
-        <button
+        <div className="flex items-center gap-2">
-          onClick={() => { setShowAddDialog(true); setAddResult(null) }}
+          <button
-          className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white text-sm rounded transition-colors"
+            onClick={() => setShowInstallGuide(true)}
-        >
+            className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-white text-sm rounded transition-colors"
-          <Plus className="w-4 h-4" /> Server hinzufuegen
+          >
-        </button>
+            <BookOpen className="w-4 h-4" /> Installationsanleitung
+          </button>
+          <button
+            onClick={() => { setShowAddDialog(true); setAddResult(null) }}
+            className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white text-sm rounded transition-colors"
+          >
+            <Plus className="w-4 h-4" /> Server hinzufuegen
+          </button>
+        </div>
       </div>
 
       <div className="flex items-center gap-3">
@@ -333,6 +342,21 @@ export default function ProxmoxServers() {
         />
       )}
 
+      {/* Installationsanleitung Dialog */}
+      {showInstallGuide && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+          <div className="bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[85vh] overflow-y-auto">
+            <div className="flex items-center justify-between p-4 border-b border-gray-700">
+              <h2 className="text-lg font-semibold text-white">Installationsanleitung</h2>
+              <button onClick={() => setShowInstallGuide(false)} className="text-gray-400 hover:text-white"><X className="w-5 h-5" /></button>
+            </div>
+            <div className="p-4">
+              <InstallGuide platform="linux" />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Server hinzufuegen Dialog */}
       {showAddDialog && (
         <AddServerDialog