christian/rmm2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Installationsanleitung Button auf Firewalls und Proxmox Seiten

Browse Source
This commit is contained in:
cynfo3000 2026-03-05 07:35:59 +01:00
parent 5b503e6dba
commit e1a3246075
2 changed files with 62 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/pages/Agents.jsx
View File

@ -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
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 className="flex items-center gap-2">
<button
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"
>
<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

38
frontend/src/pages/ProxmoxServers.jsx
View File

@ -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
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 className="flex items-center gap-2">
<button
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"
>
<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