Vito Sansevero
34df48c031
System › Sources & scans gains the Thumbnail location row (D196): Inside each source or One folder, the folder path, the status line and Review move…, whose review (D197) lists what is copied, removed and left before Move thumbnails starts; a refused folder is explained under the field, a folder of your own asks for a confirmation first. Activity shows a move and a prune with their own tiles and step line (D198). An unavailable folder shows a notice on Overview and Sources & scans with Recreate folder or Use this folder (D199). Thumbnail maintenance offers Remove thumbnails of removed sources in folder mode (D200), and Move library's review says where the thumbnails stay (D201). Closes #320
536 lines
26 KiB
JavaScript
536 lines
26 KiB
JavaScript
/**
|
||
* System › Overview (#249 System S2 Task 6): the concept's `renderSystem` "general" body (app.js 658–675) on real
|
||
* values, its Statistics dialog ("Usage statistics", a1600–1604) and its health report (`health-check`, a1439–1456).
|
||
*
|
||
* - The four `.summary-metrics` and the two `.two-col` surfaces ("Library health", "Workspace preferences") come from
|
||
* one `GET /prompt_manager/system/overview`. D93: metric 4 is the last health result (Not checked / Passed /
|
||
* N issues / Incomplete); the review, backup, thumbnail and sources rows say what the server reports, and nothing
|
||
* reads 0 before the read answers: a load shows a status line, a failure an alert and Retry. The thumbnail row is
|
||
* its own read of `/images/thumbnails/status` (a walk of every source): "Checking thumbnails…" until it answers.
|
||
* S9: the Backup status row is its own read of `/backup/status`, worded as Backup & export's status line.
|
||
* D99: its Review thumbnails opens the same "Thumbnail maintenance" dialog as Sources (thumbnail-review.mjs).
|
||
* #317: it reads "N missing · M outdated · K failed"; while previews are outdated (another format than the
|
||
* configured one) a second button, "Convert outdated", opens that dialog on its Convert outdated scope (D131).
|
||
* - #555: metric 3, "Images", is the shell's Images count (the Images page's total, its sidebar badge), not the
|
||
* overview's indexed rows, which leave out files no row links: a dash until it is read or when its read failed.
|
||
* - D96: the Statistics dialog lists the real runs per category, then "Database records" (D153: no rating column or
|
||
* rated-images total; #555: the legacy row counts, labelled as records).
|
||
* - D95: the "Health report" lists every check the server ran, Missing files per image source, with a chip per real
|
||
* result and when it was checked. The check runs from Maintenance's notice ("Run health checks", D123) as a
|
||
* read job of the registry, tracked in the Activity store (its event stream); the report opens when it ends.
|
||
*
|
||
* Reads run through `latestOnly()` on the section's scope, so a late answer never repaints a newer section.
|
||
*/
|
||
import { createButton } from '../shared/toolkit/core.js';
|
||
import { navigateTo } from './state.mjs';
|
||
import { closeWorkspaceDialog, openContentDialog } from './workspace-dialogs.mjs';
|
||
import { showWorkspaceToast } from './toast.mjs';
|
||
import { noun } from './plural.mjs';
|
||
import { operationRow } from './system-controls.mjs';
|
||
import { openThumbnailReview } from './thumbnail-review.mjs';
|
||
import { noticeSlot } from './system-thumbnail-location.mjs';
|
||
import { isLocation, locationRow, onMoveEnded } from './library-location.mjs';
|
||
import { STATUS_LOADING, STATUS_URL, backupStatusText } from './system-backups.mjs';
|
||
|
||
export const OVERVIEW_URL = '/prompt_manager/system/overview';
|
||
export const STATISTICS_URL = '/prompt_manager/system/statistics';
|
||
export const HEALTH_URL = '/prompt_manager/system/health';
|
||
export const THUMBNAILS_URL = '/prompt_manager/images/thumbnails/status';
|
||
export const HEALTH_KIND = 'health';
|
||
|
||
export const LOADING_TEXT = 'Loading the overview…';
|
||
export const THUMBNAILS_LOADING = 'Checking thumbnails…';
|
||
export const LOAD_FAILED_TEXT = 'The overview could not be loaded. Your saved data has not changed.';
|
||
export const STATISTICS_FAILED_TEXT = 'Statistics could not be loaded. Your saved data has not changed.';
|
||
export const HEALTH_FAILED_TEXT = 'The health check could not finish. Nothing was changed.';
|
||
export const NOT_AVAILABLE = 'Not available yet.';
|
||
|
||
const number = value => Number(value).toLocaleString();
|
||
|
||
function el(tag, text, className) {
|
||
const node = document.createElement(tag);
|
||
if (text !== undefined) node.textContent = text;
|
||
if (className) node.className = className;
|
||
return node;
|
||
}
|
||
|
||
/**
|
||
* D93: metric 4, the last health result of this server session: the checks that found issues, even when another
|
||
* check could not run; otherwise Passed, or Incomplete while a check was unavailable or failed.
|
||
*/
|
||
export function integrityText(health) {
|
||
if (!health) return 'Not checked';
|
||
if (health.issues > 0) return `${number(health.issues)} ${noun(health.issues, 'issue')}`;
|
||
return health.status === 'passed' ? 'Passed' : 'Incomplete';
|
||
}
|
||
|
||
/** #555: the Images metric's value from the shell's Images count; a dash while unread (undefined) or failed (null). */
|
||
export function imagesText(images) {
|
||
return Number.isSafeInteger(images) && images >= 0 ? number(images) : '–';
|
||
}
|
||
|
||
/**
|
||
* The concept's four metrics `[value, label]`, in its order. `images` is the shell's Images count (#555): the concept's
|
||
* `images.length`, the same number as the Images sidebar badge.
|
||
*/
|
||
export function metricValues(overview, images) {
|
||
return [
|
||
[number(overview.library.positive_prompts), 'Positive prompts'],
|
||
[number(overview.library.negative_variants), 'Negative variants'],
|
||
[imagesText(images), 'Images'],
|
||
[integrityText(overview.health), 'Database integrity'],
|
||
];
|
||
}
|
||
|
||
/** D93 (Q6): the review row's title; a count only once the Needs review queue reports one. */
|
||
export function ambiguousTitle(needsReview) {
|
||
const pending = needsReview?.pending;
|
||
if (!Number.isSafeInteger(pending)) return 'Ambiguous image links';
|
||
return `${number(pending)} ambiguous image ${noun(pending, 'link')}`;
|
||
}
|
||
|
||
|
||
/**
|
||
* D93: the thumbnail row's title from the `/images/thumbnails/status` answer: undefined while it is read, null when
|
||
* the read failed; with no image source (`sources.effective` 0) there is nothing to count.
|
||
*/
|
||
export function thumbnailTitle(status, sources) {
|
||
if (status === undefined) return THUMBNAILS_LOADING;
|
||
const missing = status?.pending;
|
||
if (!Number.isSafeInteger(missing) || sources?.effective === 0) return 'Thumbnail status unavailable';
|
||
const parts = [missing === 0 ? 'No missing thumbnails' : `${number(missing)} missing ${noun(missing, 'thumbnail')}`];
|
||
// #317: previews in another format than the configured one (Convert outdated replaces them).
|
||
if (convertOffered(status)) parts.push(`${number(status.outdated)} outdated`);
|
||
// #249: files whose automatic preview could not be made this session (they show the original).
|
||
if (Number.isSafeInteger(status.failed) && status.failed > 0) parts.push(`${number(status.failed)} failed`);
|
||
return parts.join(' · ');
|
||
}
|
||
|
||
/** #317: whether the status counts previews in an older format (the row then offers Convert outdated). */
|
||
export function convertOffered(status) {
|
||
return Number.isSafeInteger(status?.outdated) && status.outdated > 0;
|
||
}
|
||
|
||
/** #317: the row's "Convert outdated" button, present only while previews are outdated (D131). */
|
||
function paintConvert(row, status, { scope, openConvert }) {
|
||
const actions = row.querySelector('.row-actions');
|
||
let button = actions.querySelector('[data-convert]');
|
||
if (!convertOffered(status)) { button?.remove(); return; }
|
||
if (button) return;
|
||
button = createButton('Convert outdated');
|
||
button.dataset.convert = '';
|
||
scope.listen(button, 'click', () => openConvert(button));
|
||
actions.append(button);
|
||
}
|
||
|
||
const SOURCES_SHARED = 'Monitoring and enrichment share one source list.';
|
||
|
||
/** D93: the sources row, `[title, description]`: the sources in use and how they were chosen. */
|
||
export function sourcesCopy(sources) {
|
||
const { configured, effective, auto_detected: auto } = sources;
|
||
const title = `${number(effective)} output ${noun(effective, 'source')}`;
|
||
if (auto) return [title, `None configured is available; ComfyUI's output folder is used. ${SOURCES_SHARED}`];
|
||
if (configured !== effective) return [title, `${number(effective)} of ${number(configured)} configured ${noun(configured, 'source')} available. ${SOURCES_SHARED}`];
|
||
return [title, SOURCES_SHARED];
|
||
}
|
||
|
||
// D95: an issue chip names what was found; the concept's own wording for missing files and ambiguous metadata.
|
||
const ISSUE_NOUNS = Object.freeze({
|
||
integrity: ['problem found', 'problems found'],
|
||
foreign_keys: ['broken reference', 'broken references'],
|
||
canonical_hashes: ['hash does not match its text', 'hashes do not match their text'],
|
||
pair_uniqueness: ['duplicate pair row', 'duplicate pair rows'],
|
||
missing_files: ['link needs review', 'links need review'],
|
||
ambiguous_metadata: ['image needs review', 'images need review'],
|
||
consistency: ['inconsistency', 'inconsistencies'],
|
||
});
|
||
|
||
/** D95: a check's chip from its real status. */
|
||
export function checkChip(check) {
|
||
if (check.status === 'passed') return 'Passed';
|
||
if (check.status === 'failed') return 'Could not check';
|
||
if (check.status === 'unavailable') return check.id === 'ambiguous_metadata' ? NOT_AVAILABLE.slice(0, -1) : 'Not available';
|
||
const [one, many] = ISSUE_NOUNS[check.id] ?? ['issue', 'issues'];
|
||
if (!Number.isSafeInteger(check.count)) return 'Issues found';
|
||
// SQLite stops listing integrity problems at its limit, so a capped count is a lower bound ("100+").
|
||
if (check.capped === true) return `${number(check.count)}+ ${many}`;
|
||
return `${number(check.count)} ${check.count === 1 ? one : many}`;
|
||
}
|
||
|
||
function sourceChip(source) {
|
||
if (source.status !== 'checked') return 'Not available';
|
||
return source.count === 0 ? 'Passed' : checkChip({ id: 'missing_files', status: 'issues', count: source.count });
|
||
}
|
||
|
||
/** D95: the report's rows `[label, chip]` in the server's order; Missing files once per image source when several. */
|
||
export function healthRows(report) {
|
||
return report.checks.flatMap(check => {
|
||
const sources = check.id === 'missing_files' && Array.isArray(check.sources) ? check.sources : [];
|
||
if (sources.length < 2) return [[check.label, checkChip(check)]];
|
||
return sources.map(source => [`${check.label} · ${source.name}`, sourceChip(source)]);
|
||
});
|
||
}
|
||
|
||
/** D95: when the report was taken, and whether it is complete. */
|
||
export function healthSummary(report) {
|
||
const when = new Date(report.checked_at);
|
||
const time = Number.isNaN(when.getTime()) ? '' : `Checked ${when.toLocaleString()}. `;
|
||
if (report.status === 'passed') return `${time}Every check passed.`;
|
||
if (report.status === 'incomplete') return `${time}Some checks could not run, so this report is incomplete.`;
|
||
return `${time}Nothing was changed; review the checks with issues.`;
|
||
}
|
||
|
||
/** D96: the concept's "Runs by category" rows `[category, runs]`; D153 drops its average rating column. */
|
||
export function categoryRows(statistics) {
|
||
return statistics.by_category.map(row => [row.category ?? 'Uncategorized', number(row.runs)]);
|
||
}
|
||
|
||
/**
|
||
* D96: the added "Database records" rows `[label, count]` (the legacy statistics; D153 drops the rated images). #555:
|
||
* they count raw rows (every prompt row, tags on a prompt, every image row), so they say so and never read as the
|
||
* Library or Images page counts.
|
||
*/
|
||
export function totalsRows(statistics) {
|
||
const { totals } = statistics;
|
||
return [['Prompt records', totals.total_prompts], ['Tags on prompts', totals.total_tags],
|
||
['Image records', totals.total_images]]
|
||
.map(([label, value]) => [label, number(value)]);
|
||
}
|
||
|
||
function table(caption, head, rows, empty) {
|
||
const node = el('table');
|
||
const header = el('tr');
|
||
for (const text of head) {
|
||
const cell = el('th', text);
|
||
cell.scope = 'col';
|
||
header.append(cell);
|
||
}
|
||
const thead = el('thead');
|
||
thead.append(header);
|
||
const tbody = el('tbody');
|
||
for (const values of rows) {
|
||
const row = el('tr');
|
||
row.append(...values.map(text => el('td', text)));
|
||
tbody.append(row);
|
||
}
|
||
if (rows.length === 0) {
|
||
const row = el('tr');
|
||
const cell = el('td', empty);
|
||
cell.colSpan = head.length;
|
||
row.append(cell);
|
||
tbody.append(row);
|
||
}
|
||
node.append(el('caption', caption), thead, tbody);
|
||
return node;
|
||
}
|
||
|
||
/** The Statistics dialog: "Runs by category" (the concept's table), then "Database records" (D96, #555). */
|
||
export function statisticsNodes(statistics) {
|
||
return [
|
||
table('Runs by category', ['Category', 'Runs'], categoryRows(statistics), 'No prompts in the library yet.'),
|
||
table('Database records', ['Total', 'Count'], totalsRows(statistics), ''),
|
||
];
|
||
}
|
||
|
||
/** The concept's health report body: `.operation-list` of `h3` + chip, the D95 summary, then Close / Review missing links. */
|
||
export function healthNodes(report, { scope, onReviewMissing }) {
|
||
const list = el('div', undefined, 'operation-list');
|
||
for (const [label, chip] of healthRows(report)) {
|
||
const row = el('div', undefined, 'operation');
|
||
row.append(el('h3', label), el('span', chip, 'chip'));
|
||
list.append(row);
|
||
}
|
||
const close = createButton('Close');
|
||
const review = createButton('Review missing links', 'ca-primary');
|
||
scope.listen(close, 'click', () => closeWorkspaceDialog());
|
||
scope.listen(review, 'click', () => onReviewMissing(review));
|
||
const actions = el('div', undefined, 'dialog-actions');
|
||
actions.append(close, review);
|
||
return [list, el('p', healthSummary(report), 'small'), actions];
|
||
}
|
||
|
||
/**
|
||
* Wait until the job `id` has ended, following it in the Activity store (`activity`), which streams the job's events
|
||
* and marks it lost when the server no longer lists it; nothing here polls. Resolves its final state ('finished',
|
||
* 'failed', 'cancelled' or 'lost').
|
||
*/
|
||
export function waitForJob(activity, id, { signal } = {}) {
|
||
if (signal?.aborted) return Promise.reject(signal.reason);
|
||
return new Promise((resolve, reject) => {
|
||
const check = () => {
|
||
const state = activity.find(id)?.state;
|
||
if (state && state !== 'running') finish(resolve, state);
|
||
};
|
||
const onAbort = () => finish(reject, signal.reason);
|
||
const unsubscribe = activity.subscribe(check);
|
||
function finish(settle, value) {
|
||
unsubscribe();
|
||
signal?.removeEventListener('abort', onAbort);
|
||
settle(value);
|
||
}
|
||
signal?.addEventListener('abort', onAbort, { once: true });
|
||
check();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Run the health check and resolve its report. The started job is tracked in the Activity store; a check already
|
||
* running (409 busy, another tab) is found in the store's job list and waited for instead of refused. Rejects when the
|
||
* check fails or ends without a report.
|
||
*/
|
||
export async function runHealthCheck(api, { activity, signal } = {}) {
|
||
let id;
|
||
try {
|
||
const { job } = await api.post(HEALTH_URL, {}, { signal });
|
||
id = activity.track(job).id;
|
||
} catch (error) {
|
||
if (error?.status !== 409 || error?.code !== 'busy') throw error;
|
||
await activity.load();
|
||
id = activity.running().find(job => job.kind === HEALTH_KIND)?.id;
|
||
// The other check ended between the refusal and this read: its report is the latest.
|
||
}
|
||
const state = id ? await waitForJob(activity, id, { signal }) : 'finished';
|
||
if (state !== 'finished') throw new Error(HEALTH_FAILED_TEXT);
|
||
const { report } = await api.get(HEALTH_URL, { signal, cache: 'no-store' });
|
||
if (!report) throw new Error(HEALTH_FAILED_TEXT);
|
||
return report;
|
||
}
|
||
|
||
/**
|
||
* Open the Health report for `report` (Maintenance's notice and its Check action). Its "Review missing links" runs
|
||
* `onReviewMissing(trigger, pressed)`: Maintenance reviews a fresh Missing-file links plan (S7), never a cleanup,
|
||
* holding the pressed button while it is read; without one it goes to Maintenance.
|
||
*/
|
||
export function openHealthReport(report, { scope, trigger = null, navigate = navigateTo, onReviewMissing = null }) {
|
||
openContentDialog({ scope, title: 'Health report', trigger, nodes: healthNodes(report, { scope,
|
||
onReviewMissing: pressed => {
|
||
if (onReviewMissing) onReviewMissing(trigger, pressed);
|
||
else { closeWorkspaceDialog(); navigate('#/system/maintenance'); }
|
||
} }) });
|
||
}
|
||
|
||
/**
|
||
* Run the read-only health check from `button` and open its report: the button reads "Checking…" and is aria-disabled
|
||
* until the check ended (a second press is ignored), then reads `label` again.
|
||
*/
|
||
export async function runHealthAction({ api, activity, scope, button, navigate = navigateTo, notify = showWorkspaceToast,
|
||
onReviewMissing = null }) {
|
||
if (button.getAttribute('aria-disabled') === 'true') return;
|
||
const label = button.textContent;
|
||
button.setAttribute('aria-disabled', 'true');
|
||
button.textContent = 'Checking…';
|
||
try {
|
||
const report = await runHealthCheck(api, { activity, signal: scope.signal });
|
||
if (scope.signal.aborted) return;
|
||
openHealthReport(report, { scope, trigger: button, navigate, onReviewMissing });
|
||
} catch (error) {
|
||
if (!scope.signal.aborted) notify(HEALTH_FAILED_TEXT);
|
||
} finally {
|
||
if (!scope.signal.aborted) {
|
||
button.removeAttribute('aria-disabled');
|
||
button.textContent = label;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* The concept's Maintenance notice ("Check first. Review changes. Then apply." + "Run health checks", a689), D123: the
|
||
* press runs the read-only check, then opens the report.
|
||
*/
|
||
export function healthNotice({ api, activity, scope, navigate = navigateTo, notify = showWorkspaceToast, onReviewMissing = null }) {
|
||
const notice = el('div', undefined, 'notice');
|
||
const text = el('div');
|
||
text.append(el('h2', 'Check first. Review changes. Then apply.'),
|
||
el('p', 'One home for database and media maintenance. Scanning is separate from changing or removing records.'));
|
||
const run = createButton('Run health checks', 'ca-primary');
|
||
notice.append(text, run);
|
||
scope.listen(run, 'click', () => runHealthAction({ api, activity, scope, button: run, navigate, notify, onReviewMissing }));
|
||
return notice;
|
||
}
|
||
|
||
function metricsNode(overview, images) {
|
||
const metrics = el('div', undefined, 'summary-metrics');
|
||
for (const [value, label] of metricValues(overview, images)) {
|
||
const metric = el('div', undefined, 'metric');
|
||
metric.append(el('strong', value), el('span', label));
|
||
metrics.append(metric);
|
||
}
|
||
return metrics;
|
||
}
|
||
|
||
function surface(heading, rows) {
|
||
const section = el('section', undefined, 'surface');
|
||
section.append(el('h2', heading), ...rows);
|
||
return section;
|
||
}
|
||
|
||
/** The Overview's nodes, and its thumbnail row (painted by its own read). */
|
||
function overviewNodes(overview, { api, activity, notify, scope, navigate, openStatistics, openThumbnails, images }) {
|
||
const go = section => () => navigate(`#/system/${section}`);
|
||
const review = operationRow({ scope, title: ambiguousTitle(overview.needs_review),
|
||
description: Number.isSafeInteger(overview.needs_review?.pending)
|
||
? 'Review metadata before assigning a positive / negative pair.' : NOT_AVAILABLE,
|
||
label: 'Review metadata', onClick: () => navigate('#/review') });
|
||
const [sourcesTitle, sourcesDescription] = sourcesCopy(overview.sources);
|
||
const thumbnails = operationRow({ scope, title: THUMBNAILS_LOADING, description: 'Generate only missing previews when necessary.',
|
||
label: 'Review thumbnails', onClick: openThumbnails });
|
||
const backupRow = operationRow({ scope, title: 'Backup status', description: STATUS_LOADING, label: 'View backups',
|
||
onClick: go('backups') });
|
||
const health = surface('Library health', [
|
||
review,
|
||
// S9: what GET /backup/status reports, as Backup & export's status line says it (its own read).
|
||
backupRow,
|
||
// D129: where the library lives and why; Move library when it is in the node folder.
|
||
...(isLocation(overview.location)
|
||
? [locationRow(overview.location, { api, activity, scope, notify, navigate })] : []),
|
||
// D99: Review thumbnails opens the thumbnail dialog (the concept's row starts a sample job directly).
|
||
thumbnails,
|
||
]);
|
||
const preferences = surface('Workspace preferences', [
|
||
operationRow({ scope, title: 'One display configuration', description: 'Grid and density settings are shared across views.',
|
||
label: 'Appearance', onClick: go('appearance') }),
|
||
operationRow({ scope, title: sourcesTitle, description: sourcesDescription, label: 'Manage sources', onClick: go('sources') }),
|
||
operationRow({ scope, title: 'Statistics', description: 'Runs by category, with database record counts.', label: 'Explore',
|
||
onClick: openStatistics }),
|
||
]);
|
||
const columns = el('div', undefined, 'two-col');
|
||
columns.append(health, preferences);
|
||
const metrics = metricsNode(overview, images);
|
||
return { nodes: [metrics, columns], thumbnails, backup: backupRow, metrics };
|
||
}
|
||
|
||
/**
|
||
* The Overview section's mount (`mountSystem`'s `sections.overview`): returns its loading line, which the server's
|
||
* answer replaces in place (the concept's metrics and columns sit directly in `.settings-layout`). A read that a newer
|
||
* one superseded, or one answering after the section left, paints nothing.
|
||
*
|
||
* `counts` is the shell's sidebar counts (`{get(id), subscribe(listener), freshen(ids)}`, index.mjs): the Images metric
|
||
* shows its `images` count and follows it, and a visit re-reads it as the workspace Overview does (#555).
|
||
*/
|
||
export function mountOverview(container, { api, activity, scope, counts = null, drafts = null, navigate = navigateTo,
|
||
notify = showWorkspaceToast, latestOnly = window.ApiClient.latestOnly, STALE = window.ApiClient.STALE }) {
|
||
const overviewRead = latestOnly({ lifetime: scope.signal });
|
||
const statisticsRead = latestOnly({ lifetime: scope.signal });
|
||
const thumbnailsRead = latestOnly({ lifetime: scope.signal });
|
||
const backupRead = latestOnly({ lifetime: scope.signal });
|
||
let shown = [];
|
||
// #555: the Images metric's value node, repainted whenever the shell's Images count changes.
|
||
let imagesValue = null;
|
||
const imagesCount = () => counts?.get('images');
|
||
const paintImages = () => {
|
||
if (imagesValue) imagesValue.textContent = imagesText(imagesCount());
|
||
};
|
||
// The backup status (undefined while read, null when it failed), painted into its row once both are there (S9).
|
||
let backupStatus;
|
||
let backupRow = null;
|
||
const paintBackup = () => {
|
||
if (backupRow) backupRow.querySelector('p').textContent = backupStatusText(backupStatus);
|
||
};
|
||
// The thumbnail status (undefined while read, null when it failed), painted into the row whenever both are there.
|
||
let thumbnailStatus;
|
||
let thumbnailRow = null;
|
||
let sources = null;
|
||
const openConvert = trigger => openThumbnailReview({ api, store: activity, scope, trigger, navigate, mode: 'convert' });
|
||
const paintThumbnails = () => {
|
||
if (!thumbnailRow) return;
|
||
thumbnailRow.querySelector('h3').textContent = thumbnailTitle(thumbnailStatus, sources);
|
||
paintConvert(thumbnailRow, thumbnailStatus, { scope, openConvert });
|
||
};
|
||
|
||
function swap(nodes) {
|
||
const anchor = shown.find(node => node.isConnected);
|
||
if (anchor) anchor.before(...nodes);
|
||
for (const node of shown) node.remove();
|
||
shown = nodes;
|
||
return nodes;
|
||
}
|
||
|
||
async function openStatistics(button) {
|
||
try {
|
||
const statistics = await statisticsRead(signal => api.get(STATISTICS_URL, { signal, cache: 'no-store' }));
|
||
if (statistics === STALE || scope.signal.aborted) return;
|
||
openContentDialog({ scope, title: 'Usage statistics', trigger: button, nodes: statisticsNodes(statistics) });
|
||
} catch (error) {
|
||
if (!scope.signal.aborted) notify(STATISTICS_FAILED_TEXT);
|
||
}
|
||
}
|
||
|
||
function loading() {
|
||
const status = el('p', LOADING_TEXT, 'small');
|
||
status.setAttribute('role', 'status');
|
||
return [status];
|
||
}
|
||
|
||
async function load() {
|
||
try {
|
||
const overview = await overviewRead(signal => api.get(OVERVIEW_URL, { signal, cache: 'no-store' }));
|
||
if (overview === STALE || scope.signal.aborted) return;
|
||
const { nodes, thumbnails, backup, metrics } = overviewNodes(overview, { api, activity, notify, scope, navigate,
|
||
openStatistics, images: imagesCount(),
|
||
openThumbnails: trigger => openThumbnailReview({ api, store: activity, scope, trigger, navigate,
|
||
location: drafts?.get('host', 'thumbnail_location') }) });
|
||
imagesValue = metrics.children[2].querySelector('strong');
|
||
thumbnailRow = thumbnails;
|
||
backupRow = backup;
|
||
sources = overview.sources;
|
||
swap(nodes);
|
||
paintThumbnails();
|
||
paintBackup();
|
||
} catch (error) {
|
||
if (scope.signal.aborted) return;
|
||
const alert = el('p', LOAD_FAILED_TEXT);
|
||
alert.setAttribute('role', 'alert');
|
||
const retry = createButton('Retry');
|
||
scope.listen(retry, 'click', () => {
|
||
swap(loading());
|
||
load();
|
||
loadThumbnails();
|
||
loadBackup();
|
||
});
|
||
const panel = el('section', undefined, 'surface');
|
||
panel.append(alert, retry);
|
||
swap([panel]);
|
||
}
|
||
}
|
||
async function loadThumbnails() {
|
||
let status;
|
||
try {
|
||
status = await thumbnailsRead(signal => api.get(THUMBNAILS_URL, { signal, cache: 'no-store' }));
|
||
} catch (error) {
|
||
status = null;
|
||
}
|
||
if (status === STALE || scope.signal.aborted) return;
|
||
thumbnailStatus = status ?? null;
|
||
paintThumbnails();
|
||
}
|
||
async function loadBackup() {
|
||
let status;
|
||
try {
|
||
status = await backupRead(signal => api.get(STATUS_URL, { signal, cache: 'no-store' }));
|
||
} catch (error) {
|
||
status = null;
|
||
}
|
||
if (status === STALE || scope.signal.aborted) return;
|
||
backupStatus = status ?? null;
|
||
paintBackup();
|
||
}
|
||
const first = swap(loading());
|
||
// D129: a finished Move library changes where the library lives.
|
||
scope.cleanup(onMoveEnded(activity, load));
|
||
if (counts) {
|
||
scope.cleanup(counts.subscribe(paintImages));
|
||
counts.freshen(['images']);
|
||
}
|
||
load();
|
||
loadThumbnails();
|
||
loadBackup();
|
||
// #320 D199: the unavailable thumbnail folder's notice, first on the page while it lasts.
|
||
if (!drafts) return first;
|
||
const unavailable = noticeSlot({ api, scope, notify, location: () => drafts.get('host', 'thumbnail_location'),
|
||
onChange: () => navigate('#/system/sources'), onDone: () => drafts.reloadHost?.() });
|
||
scope.cleanup(drafts.subscribe(() => unavailable.paint()));
|
||
// The anchor goes in first, so the notice (inserted after it) leads the section once the anchor is mounted.
|
||
unavailable.paint();
|
||
return [unavailable.anchor, ...first];
|
||
}
|