mirror of
https://github.com/9technologygroup/patchmon.net.git
synced 2025-10-23 07:42:05 +00:00
499 lines
17 KiB
JavaScript
499 lines
17 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import {
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
Server,
|
|
Users,
|
|
AlertTriangle,
|
|
CheckCircle
|
|
} from 'lucide-react'
|
|
import { hostGroupsAPI } from '../utils/api'
|
|
|
|
const HostGroups = () => {
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const [showEditModal, setShowEditModal] = useState(false)
|
|
const [selectedGroup, setSelectedGroup] = useState(null)
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
|
const [groupToDelete, setGroupToDelete] = useState(null)
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
// Fetch host groups
|
|
const { data: hostGroups, isLoading, error } = useQuery({
|
|
queryKey: ['hostGroups'],
|
|
queryFn: () => hostGroupsAPI.list().then(res => res.data),
|
|
})
|
|
|
|
// Create host group mutation
|
|
const createMutation = useMutation({
|
|
mutationFn: (data) => hostGroupsAPI.create(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries(['hostGroups'])
|
|
setShowCreateModal(false)
|
|
},
|
|
onError: (error) => {
|
|
console.error('Failed to create host group:', error)
|
|
}
|
|
})
|
|
|
|
// Update host group mutation
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries(['hostGroups'])
|
|
setShowEditModal(false)
|
|
setSelectedGroup(null)
|
|
},
|
|
onError: (error) => {
|
|
console.error('Failed to update host group:', error)
|
|
}
|
|
})
|
|
|
|
// Delete host group mutation
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id) => hostGroupsAPI.delete(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries(['hostGroups'])
|
|
setShowDeleteModal(false)
|
|
setGroupToDelete(null)
|
|
},
|
|
onError: (error) => {
|
|
console.error('Failed to delete host group:', error)
|
|
}
|
|
})
|
|
|
|
const handleCreate = (data) => {
|
|
createMutation.mutate(data)
|
|
}
|
|
|
|
const handleEdit = (group) => {
|
|
setSelectedGroup(group)
|
|
setShowEditModal(true)
|
|
}
|
|
|
|
const handleUpdate = (data) => {
|
|
updateMutation.mutate({ id: selectedGroup.id, data })
|
|
}
|
|
|
|
const handleDeleteClick = (group) => {
|
|
setGroupToDelete(group)
|
|
setShowDeleteModal(true)
|
|
}
|
|
|
|
const handleDeleteConfirm = () => {
|
|
deleteMutation.mutate(groupToDelete.id)
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-danger-50 border border-danger-200 rounded-md p-4">
|
|
<div className="flex">
|
|
<AlertTriangle className="h-5 w-5 text-danger-400" />
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-danger-800">
|
|
Error loading host groups
|
|
</h3>
|
|
<p className="text-sm text-danger-700 mt-1">
|
|
{error.message || 'Failed to load host groups'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-secondary-600 dark:text-secondary-300">
|
|
Organize your hosts into logical groups for better management
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="btn-primary flex items-center gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Create Group
|
|
</button>
|
|
</div>
|
|
|
|
{/* Host Groups Grid */}
|
|
{hostGroups && hostGroups.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{hostGroups.map((group) => (
|
|
<div key={group.id} className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6 hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: group.color }}
|
|
/>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
|
|
{group.name}
|
|
</h3>
|
|
{group.description && (
|
|
<p className="text-sm text-secondary-600 dark:text-secondary-300 mt-1">
|
|
{group.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => handleEdit(group)}
|
|
className="p-1 text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 rounded"
|
|
title="Edit group"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteClick(group)}
|
|
className="p-1 text-secondary-400 hover:text-danger-600 hover:bg-danger-50 rounded"
|
|
title="Delete group"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center gap-4 text-sm text-secondary-600 dark:text-secondary-300">
|
|
<div className="flex items-center gap-1">
|
|
<Server className="h-4 w-4" />
|
|
<span>{group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-2">
|
|
No host groups yet
|
|
</h3>
|
|
<p className="text-secondary-600 dark:text-secondary-300 mb-6">
|
|
Create your first host group to organize your hosts
|
|
</p>
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="btn-primary flex items-center gap-2 mx-auto"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Create Group
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Modal */}
|
|
{showCreateModal && (
|
|
<CreateHostGroupModal
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSubmit={handleCreate}
|
|
isLoading={createMutation.isPending}
|
|
/>
|
|
)}
|
|
|
|
{/* Edit Modal */}
|
|
{showEditModal && selectedGroup && (
|
|
<EditHostGroupModal
|
|
group={selectedGroup}
|
|
onClose={() => {
|
|
setShowEditModal(false)
|
|
setSelectedGroup(null)
|
|
}}
|
|
onSubmit={handleUpdate}
|
|
isLoading={updateMutation.isPending}
|
|
/>
|
|
)}
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
{showDeleteModal && groupToDelete && (
|
|
<DeleteHostGroupModal
|
|
group={groupToDelete}
|
|
onClose={() => {
|
|
setShowDeleteModal(false)
|
|
setGroupToDelete(null)
|
|
}}
|
|
onConfirm={handleDeleteConfirm}
|
|
isLoading={deleteMutation.isPending}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Create Host Group Modal
|
|
const CreateHostGroupModal = ({ onClose, onSubmit, isLoading }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
color: '#3B82F6'
|
|
})
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault()
|
|
onSubmit(formData)
|
|
}
|
|
|
|
const handleChange = (e) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
|
|
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white mb-4">
|
|
Create Host Group
|
|
</h3>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
|
|
placeholder="e.g., Production Servers"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
rows={3}
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
|
|
placeholder="Optional description for this group"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Color
|
|
</label>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="color"
|
|
name="color"
|
|
value={formData.color}
|
|
onChange={handleChange}
|
|
className="w-12 h-10 border border-secondary-300 rounded cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={formData.color}
|
|
onChange={handleChange}
|
|
className="flex-1 px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="#3B82F6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn-outline"
|
|
disabled={isLoading}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn-primary"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Creating...' : 'Create Group'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Edit Host Group Modal
|
|
const EditHostGroupModal = ({ group, onClose, onSubmit, isLoading }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: group.name,
|
|
description: group.description || '',
|
|
color: group.color || '#3B82F6'
|
|
})
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault()
|
|
onSubmit(formData)
|
|
}
|
|
|
|
const handleChange = (e) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
|
|
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white mb-4">
|
|
Edit Host Group
|
|
</h3>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
|
|
placeholder="e.g., Production Servers"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
rows={3}
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
|
|
placeholder="Optional description for this group"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
|
|
Color
|
|
</label>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="color"
|
|
name="color"
|
|
value={formData.color}
|
|
onChange={handleChange}
|
|
className="w-12 h-10 border border-secondary-300 rounded cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={formData.color}
|
|
onChange={handleChange}
|
|
className="flex-1 px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
placeholder="#3B82F6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn-outline"
|
|
disabled={isLoading}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn-primary"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Updating...' : 'Update Group'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Delete Confirmation Modal
|
|
const DeleteHostGroupModal = ({ group, onClose, onConfirm, isLoading }) => {
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-danger-100 rounded-full flex items-center justify-center">
|
|
<AlertTriangle className="h-5 w-5 text-danger-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
|
|
Delete Host Group
|
|
</h3>
|
|
<p className="text-sm text-secondary-600 dark:text-secondary-300">
|
|
This action cannot be undone
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<p className="text-secondary-700 dark:text-secondary-200">
|
|
Are you sure you want to delete the host group{' '}
|
|
<span className="font-semibold">"{group.name}"</span>?
|
|
</p>
|
|
{group._count.hosts > 0 && (
|
|
<div className="mt-3 p-3 bg-warning-50 border border-warning-200 rounded-md">
|
|
<p className="text-sm text-warning-800">
|
|
<strong>Warning:</strong> This group contains {group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}.
|
|
You must move or remove these hosts before deleting the group.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="btn-outline"
|
|
disabled={isLoading}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="btn-danger"
|
|
disabled={isLoading || group._count.hosts > 0}
|
|
>
|
|
{isLoading ? 'Deleting...' : 'Delete Group'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HostGroups
|