mirror of
https://github.com/9technologygroup/patchmon.net.git
synced 2025-11-11 01:16:12 +00:00
first commit
This commit is contained in:
Muhammad Ibrahim
369
frontend/src/pages/RepositoryDetail.jsx
Normal file
369
frontend/src/pages/RepositoryDetail.jsx
Normal file
@@ -0,0 +1,369 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Server,
|
||||
Shield,
|
||||
ShieldOff,
|
||||
AlertTriangle,
|
||||
Users,
|
||||
Globe,
|
||||
Lock,
|
||||
Unlock,
|
||||
Database,
|
||||
Calendar,
|
||||
Activity
|
||||
} from 'lucide-react';
|
||||
import { repositoryAPI } from '../utils/api';
|
||||
|
||||
const RepositoryDetail = () => {
|
||||
const { repositoryId } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [formData, setFormData] = useState({});
|
||||
|
||||
// Fetch repository details
|
||||
const { data: repository, isLoading, error } = useQuery({
|
||||
queryKey: ['repository', repositoryId],
|
||||
queryFn: () => repositoryAPI.getById(repositoryId).then(res => res.data),
|
||||
enabled: !!repositoryId
|
||||
});
|
||||
|
||||
// Update repository mutation
|
||||
const updateRepositoryMutation = useMutation({
|
||||
mutationFn: (data) => repositoryAPI.update(repositoryId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(['repository', repositoryId]);
|
||||
queryClient.invalidateQueries(['repositories']);
|
||||
setEditMode(false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const handleEdit = () => {
|
||||
setFormData({
|
||||
name: repository.name,
|
||||
description: repository.description || '',
|
||||
isActive: repository.isActive,
|
||||
priority: repository.priority || ''
|
||||
});
|
||||
setEditMode(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
updateRepositoryMutation.mutate(formData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditMode(false);
|
||||
setFormData({});
|
||||
};
|
||||
|
||||
|
||||
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="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to="/repositories"
|
||||
className="btn-outline flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Repositories
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400 mr-2" />
|
||||
<span className="text-red-700 dark:text-red-300">
|
||||
Failed to load repository: {error.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!repository) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to="/repositories"
|
||||
className="btn-outline flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Repositories
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-center py-12">
|
||||
<Database className="mx-auto h-12 w-12 text-secondary-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">Repository not found</h3>
|
||||
<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-300">
|
||||
The repository you're looking for doesn't exist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to="/repositories"
|
||||
className="btn-outline flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back
|
||||
</Link>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
{repository.isSecure ? (
|
||||
<Lock className="h-6 w-6 text-green-600" />
|
||||
) : (
|
||||
<Unlock className="h-6 w-6 text-orange-600" />
|
||||
)}
|
||||
<h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
|
||||
{repository.name}
|
||||
</h1>
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||
repository.isActive
|
||||
? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
|
||||
: 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
|
||||
}`}>
|
||||
{repository.isActive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-secondary-500 dark:text-secondary-300 mt-1">
|
||||
Repository configuration and host assignments
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{editMode ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="btn-outline"
|
||||
disabled={updateRepositoryMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="btn-primary"
|
||||
disabled={updateRepositoryMutation.isPending}
|
||||
>
|
||||
{updateRepositoryMutation.isPending ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleEdit}
|
||||
className="btn-primary"
|
||||
>
|
||||
Edit Repository
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Repository Information */}
|
||||
<div className="bg-white dark:bg-secondary-800 rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-700">
|
||||
<h2 className="text-lg font-semibold text-secondary-900 dark:text-white">
|
||||
Repository Information
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
{editMode ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
|
||||
Repository Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
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 dark:bg-secondary-700 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
|
||||
Priority
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.priority}
|
||||
onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
|
||||
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 dark:bg-secondary-700 dark:text-white"
|
||||
placeholder="Optional priority"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
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 dark:bg-secondary-700 dark:text-white"
|
||||
placeholder="Optional description"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
|
||||
className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
|
||||
/>
|
||||
<label htmlFor="isActive" className="ml-2 block text-sm text-secondary-900 dark:text-white">
|
||||
Repository is active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">URL</label>
|
||||
<div className="flex items-center mt-1">
|
||||
<Globe className="h-4 w-4 text-secondary-400 mr-2" />
|
||||
<span className="text-secondary-900 dark:text-white">{repository.url}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Distribution</label>
|
||||
<p className="text-secondary-900 dark:text-white mt-1">{repository.distribution}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Components</label>
|
||||
<p className="text-secondary-900 dark:text-white mt-1">{repository.components}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Repository Type</label>
|
||||
<p className="text-secondary-900 dark:text-white mt-1">{repository.repoType}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Security</label>
|
||||
<div className="flex items-center mt-1">
|
||||
{repository.isSecure ? (
|
||||
<>
|
||||
<Shield className="h-4 w-4 text-green-600 mr-2" />
|
||||
<span className="text-green-600">Secure (HTTPS)</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShieldOff className="h-4 w-4 text-orange-600 mr-2" />
|
||||
<span className="text-orange-600">Insecure (HTTP)</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{repository.priority && (
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Priority</label>
|
||||
<p className="text-secondary-900 dark:text-white mt-1">{repository.priority}</p>
|
||||
</div>
|
||||
)}
|
||||
{repository.description && (
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Description</label>
|
||||
<p className="text-secondary-900 dark:text-white mt-1">{repository.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Created</label>
|
||||
<div className="flex items-center mt-1">
|
||||
<Calendar className="h-4 w-4 text-secondary-400 mr-2" />
|
||||
<span className="text-secondary-900 dark:text-white">
|
||||
{new Date(repository.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hosts Using This Repository */}
|
||||
<div className="bg-white dark:bg-secondary-800 rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-700">
|
||||
<h2 className="text-lg font-semibold text-secondary-900 dark:text-white flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
Hosts Using This Repository ({repository.hostRepositories?.length || 0})
|
||||
</h2>
|
||||
</div>
|
||||
{!repository.hostRepositories || repository.hostRepositories.length === 0 ? (
|
||||
<div className="px-6 py-12 text-center">
|
||||
<Server className="mx-auto h-12 w-12 text-secondary-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">No hosts using this repository</h3>
|
||||
<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-300">
|
||||
This repository hasn't been reported by any hosts yet.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-secondary-200 dark:divide-secondary-700">
|
||||
{repository.hostRepositories.map((hostRepo) => (
|
||||
<div key={hostRepo.id} className="px-6 py-4 hover:bg-secondary-50 dark:hover:bg-secondary-700/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
hostRepo.host.status === 'active'
|
||||
? 'bg-green-500'
|
||||
: hostRepo.host.status === 'pending'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`} />
|
||||
<div>
|
||||
<Link
|
||||
to={`/hosts/${hostRepo.host.id}`}
|
||||
className="text-primary-600 hover:text-primary-700 font-medium"
|
||||
>
|
||||
{hostRepo.host.hostname}
|
||||
</Link>
|
||||
<div className="flex items-center gap-4 text-sm text-secondary-500 dark:text-secondary-400 mt-1">
|
||||
<span>IP: {hostRepo.host.ip}</span>
|
||||
<span>OS: {hostRepo.host.osType} {hostRepo.host.osVersion}</span>
|
||||
<span>Last Update: {new Date(hostRepo.host.lastUpdate).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-xs text-secondary-500 dark:text-secondary-400">Last Checked</div>
|
||||
<div className="text-sm text-secondary-900 dark:text-white">
|
||||
{new Date(hostRepo.lastChecked).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RepositoryDetail;
|
||||
Reference in New Issue
Block a user