Add paginated show-more behavior to metadata build history

This commit is contained in:
Dariusz L
2026-07-06 14:57:44 +02:00
parent 8f525044e8
commit 23c0f79444
2 changed files with 66 additions and 13 deletions
+29
View File
@@ -7222,10 +7222,39 @@ a.mr-image-preview-resource-name:hover {
min-width: 900px;
}
.mr-options-history-table .mr-options-audit-row {
content-visibility: auto;
contain-intrinsic-size: auto 58px;
}
.mr-options-history-table tr[hidden] {
display: none;
}
#model-resolver-modal .mr-options-history-show-more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border-radius: 6px;
color: var(--mr-text-secondary);
background: rgba(255, 255, 255, 0.035) !important;
box-shadow: none !important;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
#model-resolver-modal .mr-options-history-show-more:hover,
#model-resolver-modal .mr-options-history-show-more:focus-visible {
color: var(--mr-text);
background: rgba(255, 255, 255, 0.06) !important;
outline: none;
}
.mr-options-history-table th:nth-child(1),
.mr-options-history-table td:nth-child(1) {
width: 30%;
+37 -13
View File
@@ -1004,6 +1004,10 @@ export const optionsMethods = {
this.metadataBuildHistoryFilter = 'all';
}
this.metadataBuildHistoryFilterMenuOpen = false;
const metadataBuildHistoryPageSize = 250;
if (!Number.isFinite(Number(this.metadataBuildHistoryVisibleLimit)) || Number(this.metadataBuildHistoryVisibleLimit) < metadataBuildHistoryPageSize) {
this.metadataBuildHistoryVisibleLimit = metadataBuildHistoryPageSize;
}
if (this.metadataBuildPollTimer) {
window.clearTimeout(this.metadataBuildPollTimer);
this.metadataBuildPollTimer = null;
@@ -1779,17 +1783,8 @@ export const optionsMethods = {
if (!metadataBuildResults) return;
const normalizedFilter = metadataBuildHistoryFilterValues.includes(filter) ? filter : 'all';
this.metadataBuildHistoryFilter = normalizedFilter;
let shown = 0;
metadataBuildResults.querySelectorAll('[data-metadata-history-row]').forEach((row) => {
const action = row.dataset.historyAction || 'checked';
const matches = metadataBuildHistoryActionMatchesFilter(action, normalizedFilter);
row.hidden = !matches;
if (matches) shown += 1;
});
const emptyRow = metadataBuildResults.querySelector('[data-metadata-history-empty-row]');
if (emptyRow) emptyRow.hidden = shown > 0;
this.metadataBuildHistoryFilteredCount = shown;
updateMetadataBuildActionFilterControl(normalizedFilter);
this.metadataBuildHistoryVisibleLimit = metadataBuildHistoryPageSize;
renderMetadataBuildResults(undefined);
};
const renderMetadataBuildResults = (data = undefined) => {
@@ -1824,7 +1819,12 @@ export const optionsMethods = {
this.metadataBuildHistoryFilter = activeHistoryFilter;
const filteredItems = displayItems.filter(item => metadataBuildHistoryMatchesFilter(item, activeHistoryFilter));
const filterCounts = updateMetadataBuildHistoryFilterUi(displayItems, filteredItems, activeHistoryFilter);
const visibleItems = displayItems;
const visibleLimit = Math.max(
metadataBuildHistoryPageSize,
Number(this.metadataBuildHistoryVisibleLimit || metadataBuildHistoryPageSize)
);
const visibleItems = filteredItems.slice(0, visibleLimit);
const hiddenByLimit = Math.max(0, filteredItems.length - visibleItems.length);
let html = '';
if (displayItems.length) {
@@ -1889,6 +1889,17 @@ export const optionsMethods = {
</tr>
`;
}).join('');
const moreRow = hiddenByLimit > 0
? `
<tr>
<td colspan="6">
<button type="button" class="mr-options-history-show-more" data-metadata-history-show-more>
Show ${Math.min(metadataBuildHistoryPageSize, hiddenByLimit).toLocaleString()} more of ${filteredItems.length.toLocaleString()}
</button>
</td>
</tr>
`
: '';
const emptyRow = `
<tr data-metadata-history-empty-row ${filteredItems.length ? 'hidden' : ''}>
<td colspan="6">
@@ -1909,7 +1920,7 @@ export const optionsMethods = {
<th>Metadata file</th>
</tr>
</thead>
<tbody>${rows}${emptyRow}</tbody>
<tbody>${rows}${moreRow}${emptyRow}</tbody>
</table>
</div>
`;
@@ -2065,6 +2076,7 @@ export const optionsMethods = {
this.metadataBuildFinishedProgressId = '';
this.metadataBuildHistory = [];
this.metadataBuildHistoryKeys = new Set();
this.metadataBuildHistoryVisibleLimit = metadataBuildHistoryPageSize;
if (metadataBuildHistoryCountEl) metadataBuildHistoryCountEl.textContent = '0';
setMetadataBuildBusy(true);
updateMetadataBuildSummary({});
@@ -3210,6 +3222,18 @@ export const optionsMethods = {
const nextFilter = filterOption.dataset.metadataHistoryFilterOption || 'all';
applyMetadataBuildHistoryFilter(nextFilter);
setMetadataBuildHistoryFilterMenuOpen(false);
return;
}
const showMoreButton = event.target?.closest?.('[data-metadata-history-show-more]');
if (showMoreButton) {
event.preventDefault();
event.stopPropagation();
this.metadataBuildHistoryVisibleLimit = Math.max(
metadataBuildHistoryPageSize,
Number(this.metadataBuildHistoryVisibleLimit || metadataBuildHistoryPageSize)
) + metadataBuildHistoryPageSize;
renderMetadataBuildResults(undefined);
}
});
}