diff --git a/frontend/src/App.js b/frontend/src/App.js
index 22a0b66..8df8716 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -200,6 +200,7 @@ export default function App() {
const [editNvdError, setEditNvdError] = useState(null);
const [editNvdAutoFilled, setEditNvdAutoFilled] = useState(false);
const [expandedCVEs, setExpandedCVEs] = useState({});
+ const [visibleCount, setVisibleCount] = useState(5);
const [jiraTickets, setJiraTickets] = useState([]);
const [showAddTicket, setShowAddTicket] = useState(false);
const [showEditTicket, setShowEditTicket] = useState(false);
@@ -869,6 +870,7 @@ export default function App() {
useEffect(() => {
if (isAuthenticated) {
fetchCVEs();
+ setVisibleCount(5);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchQuery, selectedVendor, selectedSeverity]);
@@ -1829,7 +1831,7 @@ export default function App() {
) : (
- {Object.entries(filteredGroupedCVEs).map(([cveId, vendorEntries]) => {
+ {Object.entries(filteredGroupedCVEs).slice(0, visibleCount).map(([cveId, vendorEntries]) => {
const isCVEExpanded = expandedCVEs[cveId];
const severityOrder = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3 };
const highestSeverity = vendorEntries.reduce((highest, entry) => {
@@ -2101,6 +2103,40 @@ export default function App() {
);
})}
+ {/* Show more / pagination footer */}
+ {Object.keys(filteredGroupedCVEs).length > visibleCount && (
+
+
+ Showing {visibleCount} of {Object.keys(filteredGroupedCVEs).length} CVEs
+
+
+
+
+
+
+ )}
+ {visibleCount > 5 && Object.keys(filteredGroupedCVEs).length <= visibleCount && Object.keys(filteredGroupedCVEs).length > 5 && (
+
+
+
+ )}
)}