13 KiB
13 KiB
{$detected_lang}\nsrc/\n├── components/audit/ # Audit log components\n│ ├── AuditLogViewer.tsx # Main viewer component\n│ ├── SearchFilters.tsx # Advanced search interface\n│ ├── VirtualizedLogTable.tsx # High-performance table\n│ ├── LogDetailModal.tsx # Detailed log inspection\n│ ├── ExportModal.tsx # Export functionality\n│ ├── ComplianceReportGenerator.tsx # Compliance reports\n│ └── RealTimeIndicator.tsx # WebSocket status\n├── hooks/ # Custom React hooks\n│ └── useWebSocket.ts # WebSocket management\n├── services/ # API integration\n│ └── api.ts # Audit API client\n├── types/ # TypeScript definitions\n│ └── audit.ts # Audit-specific types\n├── utils/ # Utility functions\n├── store/ # State management\n└── styles/ # CSS and styling\n\n\n## 🔧 Setup and Development\n\n### Prerequisites\n\n- Node.js 18+ and npm 9+\n- Control Center backend running on http://localhost:8080\n\n### Installation\n\n{$detected_lang}\n# Clone the repository\ngit clone <repository-url>\ncd control-center-ui\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n\nThe application will be available at http://localhost:3000\n\n### Building for Production\n\n{$detected_lang}\n# Type check\nnpm run type-check\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n\n\n## 🌐 API Integration\n\nThe UI integrates with the Control Center backend and expects the following endpoints:\n\n- GET /audit/logs - Fetch audit logs with filtering and pagination\n- GET /audit/logs/{id} - Get specific log entry details\n- POST /audit/search - Advanced search functionality\n- GET /audit/saved-searches - Manage saved search queries\n- POST /audit/export - Export logs in various formats (CSV, JSON, PDF)\n- GET /compliance/reports - Compliance report management\n- POST /compliance/reports/generate - Generate compliance reports\n- WS /audit/stream - Real-time log streaming via WebSocket\n- GET /health - Health check endpoint\n\n### WebSocket Integration\n\nReal-time log streaming is implemented using WebSocket connections:\n\n{$detected_lang}\nimport { useWebSocket } from './hooks/useWebSocket';\n\nconst { isConnected, lastMessage } = useWebSocket({\n url: 'ws://localhost:8080/ws/audit',\n onNewAuditLog: (log) => {\n // Handle new log entry in real-time\n updateLogsList(log);\n }\n});\n\n\n## ✅ Features Implemented\n\n### Core Audit Log Viewer System\n\n- ✅ Advanced Search Filters: Multi-dimensional filtering with date range, users, actions, resources, severity, compliance frameworks\n- ✅ Virtual Scrolling Component: High-performance rendering capable of handling millions of log entries\n- ✅ Real-time Log Streaming: WebSocket integration with automatic reconnection and live status indicators\n- ✅ Detailed Log Modal: Multi-tab interface with JSON syntax highlighting, sensitive data toggle, and copy utilities\n- ✅ Export Functionality: Support for CSV, JSON, and PDF formats with customizable fields and templates\n- ✅ Saved Search Queries: User preference system for saving and reusing complex search combinations\n\n### Compliance & Security Features\n\n- ✅ Compliance Report Generator: Automated report generation with SOC2, HIPAA, PCI DSS, and GDPR templates\n- ✅ Violation Tracking: Remediation workflow system with task management and progress tracking\n- ✅ Timeline Visualization: Chronological visualization of audit trails with correlation mapping\n- ✅ Request ID Correlation: Cross-service request tracing and session analysis\n- ✅ Attestation Management: Digital signature system for compliance certifications\n- ✅ Log Retention Management: Archival policies and retention period management\n\n### Performance & User Experience\n\n- ✅ Dashboard Analytics: Real-time metrics including success rates, critical events, and compliance scores\n- ✅ Responsive Design: Mobile-first design that works across all device sizes\n- ✅ Loading States: Comprehensive loading indicators and skeleton screens\n- ✅ Error Handling: Robust error boundaries with user-friendly error messages\n- ✅ Keyboard Shortcuts: Accessibility features and keyboard navigation support\n\n## 🎨 Styling and Theming\n\n### TailwindCSS Configuration\n\nThe application uses a comprehensive TailwindCSS setup with:\n\n- DaisyUI Components: Pre-built, accessible UI components\n- Custom Color Palette: Primary, secondary, success, warning, error themes\n- Custom Animations: Smooth transitions and loading states\n- Dark/Light Themes: Automatic theme switching with system preference detection\n- Responsive Grid System: Mobile-first responsive design\n\n### Component Design System\n\n- Consistent Spacing: Standardized margin and padding scales\n- Typography Scale: Hierarchical text sizing and weights\n- Icon System: Comprehensive icon library with consistent styling\n- Form Controls: Validated, accessible form components\n- Data Visualization: Charts and metrics with consistent styling\n\n## 📱 Performance Optimization\n\n### Virtual Scrolling\n\n- Renders only visible rows for optimal performance\n- Handles datasets with millions of entries smoothly\n- Maintains smooth scrolling with momentum preservation\n- Automatic cleanup of off-screen elements\n\n### Efficient Data Fetching\n\n- Infinite queries with intelligent pagination\n- Aggressive caching with TanStack Query\n- Optimistic updates for better user experience\n- Background refetching for fresh data\n\n### Bundle Optimization\n\n- Code splitting by route and feature\n- Tree shaking for minimal bundle size\n- Lazy loading of heavy components\n- Optimized production builds\n\n## 🔒 Security Considerations\n\n### Data Protection\n\n- Sensitive data masking in UI components\n- Secure WebSocket connections (WSS in production)\n- Content Security Policy headers for XSS protection\n- Input sanitization for search queries\n\n### API Security\n\n- JWT token authentication support (when implemented)\n- Request rate limiting awareness\n- Secure file downloads with proper headers\n- CORS configuration for cross-origin requests\n\n## 🚀 Deployment\n\n### Docker Deployment\n\n{$detected_lang}\nFROM node:18-alpine as builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nRUN npm run build\n\nFROM nginx:alpine\nCOPY --from=builder /app/dist /usr/share/nginx/html\nCOPY nginx.conf /etc/nginx/nginx.conf\nEXPOSE 80\nCMD ["nginx", "-g", "daemon off;"]\n\n\n### Kubernetes Deployment\n\n{$detected_lang}\napiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: control-center-ui\nspec:\n replicas: 3\n selector:\n matchLabels:\n app: control-center-ui\n template:\n metadata:\n labels:\n app: control-center-ui\n spec:\n containers:\n - name: control-center-ui\n image: control-center-ui:latest\n ports:\n - containerPort: 80\n env:\n - name: VITE_API_BASE_URL\n value: "https://api.example.com"\n\n\n## 🤝 Contributing\n\n### Development Guidelines\n\n- Follow TypeScript strict mode conventions\n- Use existing component patterns and design system\n- Maintain accessibility standards (WCAG 2.1 AA)\n- Add proper error boundaries for robust error handling\n- Write meaningful commit messages following conventional commits\n\n### Code Style\n\n- Use Prettier for consistent code formatting\n- Follow ESLint rules for code quality\n- Use semantic HTML elements for accessibility\n- Maintain consistent naming conventions\n- Document complex logic with comments\n\n## 📄 License\n\nThis project follows the same license as the parent Control Center repository.\n\n## 🆘 Support\n\nFor questions, issues, or contributions:\n\n1. Check existing issues in the repository\n2. Review the comprehensive documentation\n3. Create detailed bug reports or feature requests\n4. Follow the established contribution guidelines\n\n---\n\nBuilt with ❤️ for comprehensive audit log management, compliance monitoring, and security analytics.