360 lines
14 KiB
JavaScript
360 lines
14 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import api from '../services/api'
|
|
import toast from 'react-hot-toast'
|
|
import {
|
|
TrashIcon,
|
|
ServerIcon,
|
|
ChartBarIcon,
|
|
ClockIcon,
|
|
ExclamationTriangleIcon,
|
|
CheckCircleIcon,
|
|
PlayIcon,
|
|
EyeIcon
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
const DataRetentionMetrics = () => {
|
|
const [metrics, setMetrics] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
const [lastUpdate, setLastUpdate] = useState(null)
|
|
const [cleanupLoading, setCleanupLoading] = useState(false)
|
|
const [previewData, setPreviewData] = useState(null)
|
|
const [showPreview, setShowPreview] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadDataRetentionMetrics()
|
|
// Auto-refresh every 30 seconds
|
|
const interval = setInterval(loadDataRetentionMetrics, 30000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const loadDataRetentionMetrics = async () => {
|
|
try {
|
|
setError(null)
|
|
const response = await api.get('/data-retention/status')
|
|
setMetrics(response.data)
|
|
setLastUpdate(new Date())
|
|
} catch (error) {
|
|
console.error('Error loading data retention metrics:', error)
|
|
setError(error.response?.data?.message || 'Failed to load data retention metrics')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const loadCleanupPreview = async () => {
|
|
try {
|
|
setError(null)
|
|
const response = await api.get('/data-retention/stats')
|
|
setPreviewData(response.data.data)
|
|
setShowPreview(true)
|
|
} catch (error) {
|
|
console.error('Error loading cleanup preview:', error)
|
|
toast.error('Failed to load cleanup preview')
|
|
}
|
|
}
|
|
|
|
const executeCleanup = async () => {
|
|
if (!window.confirm('Are you sure you want to execute data retention cleanup? This will permanently delete old data according to each tenant\'s retention policy.')) {
|
|
return
|
|
}
|
|
|
|
setCleanupLoading(true)
|
|
try {
|
|
// Note: This endpoint would need to be implemented in the backend
|
|
const response = await api.post('/data-retention/cleanup')
|
|
toast.success('Data retention cleanup initiated successfully')
|
|
|
|
// Refresh metrics after cleanup
|
|
setTimeout(() => {
|
|
loadDataRetentionMetrics()
|
|
}, 2000)
|
|
|
|
} catch (error) {
|
|
console.error('Error executing cleanup:', error)
|
|
toast.error(error.response?.data?.message || 'Failed to execute cleanup')
|
|
} finally {
|
|
setCleanupLoading(false)
|
|
}
|
|
}
|
|
|
|
const formatUptime = (seconds) => {
|
|
if (!seconds) return 'Unknown'
|
|
const days = Math.floor(seconds / 86400)
|
|
const hours = Math.floor((seconds % 86400) / 3600)
|
|
const minutes = Math.floor((seconds % 3600) / 60)
|
|
|
|
if (days > 0) return `${days}d ${hours}h ${minutes}m`
|
|
if (hours > 0) return `${hours}h ${minutes}m`
|
|
return `${minutes}m`
|
|
}
|
|
|
|
const formatMemory = (mb) => {
|
|
if (!mb) return 'Unknown'
|
|
if (mb > 1024) return `${(mb / 1024).toFixed(1)} GB`
|
|
return `${mb} MB`
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-center mb-4">
|
|
<TrashIcon className="h-6 w-6 text-purple-600 mr-2" />
|
|
<h3 className="text-lg font-semibold text-gray-900">Data Retention Service</h3>
|
|
</div>
|
|
<div className="animate-pulse">
|
|
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
|
|
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-center mb-4">
|
|
<TrashIcon className="h-6 w-6 text-purple-600 mr-2" />
|
|
<h3 className="text-lg font-semibold text-gray-900">Data Retention Service</h3>
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-red-500 ml-2" />
|
|
</div>
|
|
<div className="bg-red-50 border border-red-200 rounded-md p-4">
|
|
<div className="flex">
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-red-400 mr-2 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-red-700 font-medium">Service Unavailable</p>
|
|
<p className="text-sm text-red-600 mt-1">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={loadDataRetentionMetrics}
|
|
className="mt-4 px-4 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200 transition-colors text-sm"
|
|
>
|
|
Retry Connection
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const isConnected = metrics?.service?.connected
|
|
const serviceHealth = metrics?.health
|
|
const serviceMetrics = metrics?.metrics
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center">
|
|
<TrashIcon className="h-6 w-6 text-purple-600 mr-2" />
|
|
<h3 className="text-lg font-semibold text-gray-900">Data Retention Service</h3>
|
|
{isConnected ? (
|
|
<CheckCircleIcon className="h-5 w-5 text-green-500 ml-2" />
|
|
) : (
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-red-500 ml-2" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-sm text-gray-500">
|
|
{lastUpdate && `Updated ${lastUpdate.toLocaleTimeString()}`}
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
{isConnected && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={loadCleanupPreview}
|
|
className="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors text-sm flex items-center gap-1"
|
|
>
|
|
<EyeIcon className="h-4 w-4" />
|
|
Preview Cleanup
|
|
</button>
|
|
<button
|
|
onClick={executeCleanup}
|
|
disabled={cleanupLoading}
|
|
className="px-3 py-1.5 bg-red-100 text-red-700 rounded-md hover:bg-red-200 transition-colors text-sm flex items-center gap-1 disabled:opacity-50"
|
|
>
|
|
{cleanupLoading ? (
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-red-700"></div>
|
|
) : (
|
|
<PlayIcon className="h-4 w-4" />
|
|
)}
|
|
{cleanupLoading ? 'Running...' : 'Run Cleanup'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{isConnected ? (
|
|
<div className="space-y-4">
|
|
{/* Service Status */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-green-50 rounded-lg p-4">
|
|
<div className="flex items-center">
|
|
<CheckCircleIcon className="h-5 w-5 text-green-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm font-medium text-green-800">Status</p>
|
|
<p className="text-lg font-bold text-green-900">{serviceMetrics?.service?.status || 'Running'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-blue-50 rounded-lg p-4">
|
|
<div className="flex items-center">
|
|
<ClockIcon className="h-5 w-5 text-blue-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm font-medium text-blue-800">Uptime</p>
|
|
<p className="text-lg font-bold text-blue-900">
|
|
{formatUptime(serviceMetrics?.service?.uptime || serviceHealth?.uptime)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-purple-50 rounded-lg p-4">
|
|
<div className="flex items-center">
|
|
<ServerIcon className="h-5 w-5 text-purple-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm font-medium text-purple-800">Memory</p>
|
|
<p className="text-lg font-bold text-purple-900">
|
|
{formatMemory(serviceMetrics?.performance?.memoryUsage?.heapUsed)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cleanup Information */}
|
|
{serviceMetrics?.cleanup && (
|
|
<div className="border-t pt-4">
|
|
<h4 className="font-medium text-gray-900 mb-3">Cleanup Operations</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Last Cleanup</p>
|
|
<p className="font-medium">
|
|
{serviceMetrics.cleanup.lastRunFormatted || 'Never'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">Next Scheduled</p>
|
|
<p className="font-medium">{serviceMetrics.cleanup.nextScheduledRun || '2:00 AM UTC daily'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{serviceMetrics.cleanup.stats && (
|
|
<div className="mt-3">
|
|
<p className="text-sm text-gray-600 mb-2">Last Cleanup Stats</p>
|
|
<div className="flex flex-wrap gap-4 text-sm">
|
|
<span className="bg-gray-100 px-2 py-1 rounded">
|
|
Detections: {serviceMetrics.cleanup.stats.totalDetections || 0}
|
|
</span>
|
|
<span className="bg-gray-100 px-2 py-1 rounded">
|
|
Heartbeats: {serviceMetrics.cleanup.stats.totalHeartbeats || 0}
|
|
</span>
|
|
<span className="bg-gray-100 px-2 py-1 rounded">
|
|
Logs: {serviceMetrics.cleanup.stats.totalLogs || 0}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Schedule Information */}
|
|
{serviceMetrics?.schedule && (
|
|
<div className="border-t pt-4">
|
|
<h4 className="font-medium text-gray-900 mb-2">Schedule</h4>
|
|
<p className="text-sm text-gray-600">{serviceMetrics.schedule.description}</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Cron: {serviceMetrics.schedule.cronExpression} ({serviceMetrics.schedule.timezone})
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<ExclamationTriangleIcon className="h-12 w-12 text-red-400 mx-auto mb-4" />
|
|
<p className="text-gray-600">Data retention service is not connected</p>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
{metrics?.service?.error || 'Service health check failed'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Cleanup Preview Modal */}
|
|
{showPreview && previewData && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-medium">Data Retention Cleanup Preview</h3>
|
|
<button
|
|
onClick={() => setShowPreview(false)}
|
|
className="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<span className="sr-only">Close</span>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-600">
|
|
This preview shows what data would be deleted based on each tenant's retention policy.
|
|
</p>
|
|
|
|
{previewData.tenants && previewData.tenants.map((tenant, index) => (
|
|
<div key={index} className="border rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h4 className="font-medium">{tenant.name}</h4>
|
|
<span className="text-sm text-gray-500">
|
|
{tenant.retentionDays === -1 ? 'Unlimited' : `${tenant.retentionDays} days`}
|
|
</span>
|
|
</div>
|
|
|
|
{tenant.retentionDays === -1 ? (
|
|
<p className="text-sm text-gray-600">No data will be deleted (unlimited retention)</p>
|
|
) : (
|
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
|
<div>
|
|
<span className="font-medium">Detections:</span>
|
|
<span className="ml-2">{tenant.toDelete?.detections || 0}</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">Heartbeats:</span>
|
|
<span className="ml-2">{tenant.toDelete?.heartbeats || 0}</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">Logs:</span>
|
|
<span className="ml-2">{tenant.toDelete?.logs || 0}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t">
|
|
<button
|
|
onClick={() => setShowPreview(false)}
|
|
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setShowPreview(false)
|
|
executeCleanup()
|
|
}}
|
|
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
|
|
>
|
|
Execute Cleanup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DataRetentionMetrics |