-
-
- {enrichErrors.length === 1 && enrichErrors[0].ip === 'all'
- ? enrichErrors[0].error
- : `${enrichErrors.length} device(s) not found in CARD`}
+
+
+
+ {enrichErrors.length === 1 && enrichErrors[0].ip === 'all'
+ ? enrichErrors[0].error
+ : enrichErrors.some(e => e.error && e.error.includes('timed out'))
+ ? `${enrichErrors.length} device(s) timed out — CARD may be slow`
+ : `${enrichErrors.length} device(s) not found in CARD`}
+
+
)}
diff --git a/frontend/src/components/pages/CompliancePage.js b/frontend/src/components/pages/CompliancePage.js
index df27581..2528b38 100644
--- a/frontend/src/components/pages/CompliancePage.js
+++ b/frontend/src/components/pages/CompliancePage.js
@@ -1,11 +1,12 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader, RotateCcw, Info } from 'lucide-react';
+import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader, RotateCcw, Info, FileSpreadsheet } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import ComplianceUploadModal from './ComplianceUploadModal';
import ComplianceDetailPanel from './ComplianceDetailPanel';
import ComplianceChartsPanel from './ComplianceChartsPanel';
import MetricInfoPanel from './MetricInfoPanel';
import VCLReportPage from './VCLReportPage';
+import LoaderModal from '../LoaderModal';
import metricDefinitionsRaw from '../../data/metricDefinitions.json';
import metricCategoriesConfig from '../../data/complianceCategories.json';
@@ -361,6 +362,10 @@ export default function CompliancePage({ onNavigate }) {
const [rollbackResult, setRollbackResult] = useState(null);
const [infoMetric, setInfoMetric] = useState(null);
const [hoveredMetric, setHoveredMetric] = useState(null);
+ const [selectedDevices, setSelectedDevices] = useState(new Set());
+ const [showLoaderModal, setShowLoaderModal] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(50);
const hoverTimeoutRef = useRef(null);
const hoveredCardRef = useRef(null);
@@ -392,6 +397,8 @@ export default function CompliancePage({ onNavigate }) {
setFilterState(null);
setHostSearch('');
setSelectedHost(null);
+ setSelectedDevices(new Set());
+ setCurrentPage(1);
fetchSummary(activeTeam);
fetchDevices(activeTeam, activeTab);
}, [activeTeam]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -406,14 +413,50 @@ export default function CompliancePage({ onNavigate }) {
useEffect(() => {
setFilterState(null);
+ setSelectedDevices(new Set());
+ setCurrentPage(1);
fetchDevices(activeTeam, activeTab);
}, [activeTab]); // eslint-disable-line react-hooks/exhaustive-deps
+ // Reset page when filter changes
+ useEffect(() => { setCurrentPage(1); }, [filterState]);
+
const refresh = () => {
fetchSummary(activeTeam);
fetchDevices(activeTeam, activeTab);
};
+ const toggleDeviceSelection = (hostname) => {
+ setSelectedDevices(prev => {
+ const next = new Set(prev);
+ if (next.has(hostname)) next.delete(hostname);
+ else next.add(hostname);
+ return next;
+ });
+ };
+
+ const toggleSelectAll = () => {
+ if (selectedDevices.size === paginatedDevices.length && paginatedDevices.every(d => selectedDevices.has(d.hostname))) {
+ setSelectedDevices(new Set());
+ } else {
+ setSelectedDevices(new Set(paginatedDevices.map(d => d.hostname)));
+ }
+ };
+
+ const openGraniteLoader = () => {
+ setShowLoaderModal(true);
+ };
+
+ const getLoaderDevices = () => {
+ return filteredDevices
+ .filter(d => selectedDevices.has(d.hostname))
+ .map(d => ({
+ ip_address: d.ip_address || '',
+ hostname: d.hostname || '',
+ host_id: null,
+ }));
+ };
+
const handleRollback = async () => {
if (!lastUpload) return;
setRollbackLoading(true);
@@ -446,6 +489,11 @@ export default function CompliancePage({ onNavigate }) {
})
.filter(d => !hostSearch || d.hostname.toLowerCase().includes(hostSearch.toLowerCase()));
+ // Pagination
+ const totalPages = Math.max(1, Math.ceil(filteredDevices.length / pageSize));
+ const safePage = Math.min(currentPage, totalPages);
+ const paginatedDevices = filteredDevices.slice((safePage - 1) * pageSize, safePage * pageSize);
+
const families = groupByMetricFamily(summary.entries, activeTeam);
const lastUpload = summary.upload;
@@ -724,7 +772,7 @@ export default function CompliancePage({ onNavigate }) {
padding: '0.875rem 1rem', borderBottom: '1px solid rgba(255,255,255,0.05)',
}}>
{/* Active / Resolved tabs */}
-
+
{['active', 'resolved'].map(tab => {
const isActive = activeTab === tab;
return (
@@ -747,12 +795,36 @@ export default function CompliancePage({ onNavigate }) {
);
})}
+ {selectedDevices.size > 0 && canWrite() && (
+
+ )}
{/* Hostname search */}
setHostSearch(e.target.value)}
+ onChange={e => { setHostSearch(e.target.value); setCurrentPage(1); }}
placeholder="Search hostname…"
style={{
background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.2)',
@@ -768,12 +840,22 @@ export default function CompliancePage({ onNavigate }) {
{/* Column headers */}
+
+ 0 && paginatedDevices.every(d => selectedDevices.has(d.hostname))}
+ onChange={toggleSelectAll}
+ style={{ cursor: 'pointer', accentColor: TEAL }}
+ title="Select all on this page"
+ />
+
Hostname
IP Address
Type
@@ -798,15 +880,75 @@ export default function CompliancePage({ onNavigate }) {
{lastUpload === null ? 'No reports uploaded yet' : filterState ? 'No devices match the selected filter' : activeTab === 'active' ? 'No non-compliant devices' : 'No resolved items'}
) : (
- filteredDevices.map(device => (
+ paginatedDevices.map(device => (
toggleDeviceSelection(device.hostname)}
onClick={() => setSelectedHost(selectedHost === device.hostname ? null : device.hostname)}
/>
))
)}
+
+ {/* Pagination controls */}
+ {filteredDevices.length > 0 && (
+
+
+
+ Showing {((safePage - 1) * pageSize) + 1}–{Math.min(safePage * pageSize, filteredDevices.length)} of {filteredDevices.length}
+
+
+ per page
+
+
+
+
+ {safePage} / {totalPages}
+
+
+
+
}
{/* ── Detail panel ─────────────────────────────────────────── */}
@@ -949,11 +1091,18 @@ export default function CompliancePage({ onNavigate }) {
)}