3155 lines
99 KiB
JavaScript
3155 lines
99 KiB
JavaScript
function clientApp(config) {
|
|
const THEME_STORAGE_KEY = "localstack-inspector-theme";
|
|
const PANEL_STORAGE_KEY = "localstack-inspector-panel";
|
|
const EMAIL_PREFERENCES_STORAGE_KEY = "localstack-inspector-email-preferences";
|
|
const LOG_PREFERENCES_STORAGE_KEY = "localstack-inspector-log-preferences";
|
|
const SECRET_PREFERENCES_STORAGE_KEY = "localstack-inspector-secret-preferences";
|
|
const S3_PREFERENCES_STORAGE_KEY = "localstack-inspector-s3-preferences";
|
|
const HEALTH_REFRESH_MS = 30000;
|
|
const REFRESH_INTERVALS = [5000, 10000, 15000, 30000, 60000];
|
|
const LOG_WINDOWS = [300000, 900000, 3600000, 21600000, 86400000];
|
|
const LOG_LIMITS = [100, 200, 300, 500];
|
|
const storedEmailPreferences = getStoredPreferences(EMAIL_PREFERENCES_STORAGE_KEY);
|
|
const storedLogPreferences = getStoredPreferences(LOG_PREFERENCES_STORAGE_KEY);
|
|
const storedSecretPreferences = getStoredPreferences(SECRET_PREFERENCES_STORAGE_KEY);
|
|
const storedS3Preferences = getStoredPreferences(S3_PREFERENCES_STORAGE_KEY);
|
|
|
|
const appState = {
|
|
panel: getInitialPanel(),
|
|
logsReady: false,
|
|
secretsReady: false,
|
|
s3Ready: false,
|
|
theme: getInitialTheme()
|
|
};
|
|
|
|
const state = {
|
|
messages: [],
|
|
filtered: [],
|
|
search: getStoredText(storedEmailPreferences?.search),
|
|
auto: getStoredBoolean(storedEmailPreferences?.auto, true),
|
|
interval: getStoredNumber(storedEmailPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
|
|
loading: false,
|
|
error: "",
|
|
updatedAt: 0,
|
|
source: "initial",
|
|
duration: 0,
|
|
parseErrors: 0,
|
|
newest: "",
|
|
newIds: new Set(),
|
|
knownIds: new Set(),
|
|
openIds: new Set(),
|
|
views: {},
|
|
raw: {},
|
|
listSignature: ""
|
|
};
|
|
|
|
const logsState = {
|
|
groups: [],
|
|
streams: [],
|
|
events: [],
|
|
filtered: [],
|
|
group: getStoredText(storedLogPreferences?.group, config.defaultLogGroup || ""),
|
|
stream: getStoredText(storedLogPreferences?.stream),
|
|
search: getStoredText(storedLogPreferences?.search),
|
|
auto: getStoredBoolean(storedLogPreferences?.auto, true),
|
|
interval: getStoredNumber(storedLogPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
|
|
windowMs: getStoredNumber(storedLogPreferences?.windowMs, LOG_WINDOWS, config.defaultLogWindowMs),
|
|
limit: getStoredNumber(storedLogPreferences?.limit, LOG_LIMITS, config.defaultLogLimit),
|
|
wrapLines: getStoredBoolean(storedLogPreferences?.wrapLines, true),
|
|
tailNewest: getStoredBoolean(storedLogPreferences?.tailNewest, false),
|
|
loading: false,
|
|
error: "",
|
|
updatedAt: 0,
|
|
source: "initial",
|
|
duration: 0,
|
|
newest: 0,
|
|
searchedLogStreams: 0,
|
|
openIds: new Set(),
|
|
listSignature: ""
|
|
};
|
|
|
|
const secretsState = {
|
|
items: [],
|
|
filtered: [],
|
|
search: getStoredText(storedSecretPreferences?.search),
|
|
auto: getStoredBoolean(storedSecretPreferences?.auto, true),
|
|
interval: getStoredNumber(storedSecretPreferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
|
|
loading: false,
|
|
error: "",
|
|
updatedAt: 0,
|
|
source: "initial",
|
|
duration: 0,
|
|
newest: "",
|
|
openIds: new Set(),
|
|
values: {},
|
|
revealedIds: new Set(),
|
|
listSignature: ""
|
|
};
|
|
|
|
const s3State = {
|
|
buckets: [],
|
|
objects: [],
|
|
filtered: [],
|
|
bucket: getStoredText(storedS3Preferences?.bucket, config.defaultS3Bucket || ""),
|
|
prefix: getStoredText(storedS3Preferences?.prefix),
|
|
search: getStoredText(storedS3Preferences?.search),
|
|
auto: getStoredBoolean(storedS3Preferences?.auto, true),
|
|
interval: getStoredNumber(storedS3Preferences?.interval, REFRESH_INTERVALS, config.defaultRefreshMs),
|
|
loading: false,
|
|
error: "",
|
|
updatedAt: 0,
|
|
source: "initial",
|
|
duration: 0,
|
|
newest: "",
|
|
openIds: new Set(),
|
|
previews: {},
|
|
listSignature: ""
|
|
};
|
|
|
|
const healthState = {
|
|
services: {},
|
|
loading: false,
|
|
error: "",
|
|
updatedAt: 0,
|
|
source: "initial"
|
|
};
|
|
|
|
const el = {
|
|
themeToggle: document.getElementById("themeToggle"),
|
|
resetStateButton: document.getElementById("resetStateButton"),
|
|
healthRefreshButton: document.getElementById("healthRefreshButton"),
|
|
healthStrip: document.getElementById("healthStrip"),
|
|
emailsPanel: document.getElementById("emailsPanel"),
|
|
logsPanel: document.getElementById("logsPanel"),
|
|
secretsPanel: document.getElementById("secretsPanel"),
|
|
s3Panel: document.getElementById("s3Panel"),
|
|
refreshButton: document.getElementById("refreshButton"),
|
|
autoToggle: document.getElementById("autoToggle"),
|
|
intervalSelect: document.getElementById("intervalSelect"),
|
|
searchInput: document.getElementById("searchInput"),
|
|
clearSearchButton: document.getElementById("clearSearchButton"),
|
|
expandAllButton: document.getElementById("expandAllButton"),
|
|
collapseAllButton: document.getElementById("collapseAllButton"),
|
|
scrollToTopButton: document.getElementById("scrollToTopButton"),
|
|
statusChip: document.getElementById("statusChip"),
|
|
totalStat: document.getElementById("totalStat"),
|
|
visibleStat: document.getElementById("visibleStat"),
|
|
newStat: document.getElementById("newStat"),
|
|
newestStat: document.getElementById("newestStat"),
|
|
updatedStat: document.getElementById("updatedStat"),
|
|
fetchStat: document.getElementById("fetchStat"),
|
|
fetchDetail: document.getElementById("fetchDetail"),
|
|
banner: document.getElementById("banner"),
|
|
empty: document.getElementById("empty"),
|
|
list: document.getElementById("list"),
|
|
emailsContentPane: document.getElementById("emailsContentPane"),
|
|
logsRefreshButton: document.getElementById("logsRefreshButton"),
|
|
logsAutoToggle: document.getElementById("logsAutoToggle"),
|
|
logsIntervalSelect: document.getElementById("logsIntervalSelect"),
|
|
logsGroupSelect: document.getElementById("logsGroupSelect"),
|
|
logsStreamSelect: document.getElementById("logsStreamSelect"),
|
|
logsWindowSelect: document.getElementById("logsWindowSelect"),
|
|
logsLimitSelect: document.getElementById("logsLimitSelect"),
|
|
logsSearchInput: document.getElementById("logsSearchInput"),
|
|
logsClearSearchButton: document.getElementById("logsClearSearchButton"),
|
|
logsWrapToggle: document.getElementById("logsWrapToggle"),
|
|
logsTailToggle: document.getElementById("logsTailToggle"),
|
|
logsExpandAllButton: document.getElementById("logsExpandAllButton"),
|
|
logsCollapseAllButton: document.getElementById("logsCollapseAllButton"),
|
|
logsScrollToTopButton: document.getElementById("logsScrollToTopButton"),
|
|
logsStatusChip: document.getElementById("logsStatusChip"),
|
|
logsTotalStat: document.getElementById("logsTotalStat"),
|
|
logsVisibleStat: document.getElementById("logsVisibleStat"),
|
|
logsStreamsStat: document.getElementById("logsStreamsStat"),
|
|
logsNewestStat: document.getElementById("logsNewestStat"),
|
|
logsUpdatedStat: document.getElementById("logsUpdatedStat"),
|
|
logsFetchStat: document.getElementById("logsFetchStat"),
|
|
logsFetchDetail: document.getElementById("logsFetchDetail"),
|
|
logsBanner: document.getElementById("logsBanner"),
|
|
logsEmpty: document.getElementById("logsEmpty"),
|
|
logsList: document.getElementById("logsList"),
|
|
logsContentPane: document.getElementById("logsContentPane"),
|
|
secretsRefreshButton: document.getElementById("secretsRefreshButton"),
|
|
secretsAutoToggle: document.getElementById("secretsAutoToggle"),
|
|
secretsIntervalSelect: document.getElementById("secretsIntervalSelect"),
|
|
secretsSearchInput: document.getElementById("secretsSearchInput"),
|
|
secretsClearSearchButton: document.getElementById("secretsClearSearchButton"),
|
|
secretsExpandAllButton: document.getElementById("secretsExpandAllButton"),
|
|
secretsCollapseAllButton: document.getElementById("secretsCollapseAllButton"),
|
|
secretsScrollToTopButton: document.getElementById("secretsScrollToTopButton"),
|
|
secretsStatusChip: document.getElementById("secretsStatusChip"),
|
|
secretsTotalStat: document.getElementById("secretsTotalStat"),
|
|
secretsVisibleStat: document.getElementById("secretsVisibleStat"),
|
|
secretsLoadedStat: document.getElementById("secretsLoadedStat"),
|
|
secretsNewestStat: document.getElementById("secretsNewestStat"),
|
|
secretsUpdatedStat: document.getElementById("secretsUpdatedStat"),
|
|
secretsFetchStat: document.getElementById("secretsFetchStat"),
|
|
secretsFetchDetail: document.getElementById("secretsFetchDetail"),
|
|
secretsBanner: document.getElementById("secretsBanner"),
|
|
secretsEmpty: document.getElementById("secretsEmpty"),
|
|
secretsList: document.getElementById("secretsList"),
|
|
secretsContentPane: document.getElementById("secretsContentPane"),
|
|
s3RefreshButton: document.getElementById("s3RefreshButton"),
|
|
s3AutoToggle: document.getElementById("s3AutoToggle"),
|
|
s3IntervalSelect: document.getElementById("s3IntervalSelect"),
|
|
s3BucketSelect: document.getElementById("s3BucketSelect"),
|
|
s3PrefixInput: document.getElementById("s3PrefixInput"),
|
|
s3ApplyPrefixButton: document.getElementById("s3ApplyPrefixButton"),
|
|
s3SearchInput: document.getElementById("s3SearchInput"),
|
|
s3ClearSearchButton: document.getElementById("s3ClearSearchButton"),
|
|
s3ExpandAllButton: document.getElementById("s3ExpandAllButton"),
|
|
s3CollapseAllButton: document.getElementById("s3CollapseAllButton"),
|
|
s3ScrollToTopButton: document.getElementById("s3ScrollToTopButton"),
|
|
s3StatusChip: document.getElementById("s3StatusChip"),
|
|
s3TotalStat: document.getElementById("s3TotalStat"),
|
|
s3VisibleStat: document.getElementById("s3VisibleStat"),
|
|
s3BucketsStat: document.getElementById("s3BucketsStat"),
|
|
s3NewestStat: document.getElementById("s3NewestStat"),
|
|
s3UpdatedStat: document.getElementById("s3UpdatedStat"),
|
|
s3FetchStat: document.getElementById("s3FetchStat"),
|
|
s3FetchDetail: document.getElementById("s3FetchDetail"),
|
|
s3Banner: document.getElementById("s3Banner"),
|
|
s3Empty: document.getElementById("s3Empty"),
|
|
s3List: document.getElementById("s3List"),
|
|
s3ContentPane: document.getElementById("s3ContentPane")
|
|
};
|
|
|
|
el.autoToggle.checked = state.auto;
|
|
el.intervalSelect.value = String(state.interval);
|
|
el.searchInput.value = state.search;
|
|
el.logsAutoToggle.checked = logsState.auto;
|
|
el.logsIntervalSelect.value = String(logsState.interval);
|
|
el.logsWindowSelect.value = String(logsState.windowMs);
|
|
el.logsLimitSelect.value = String(logsState.limit);
|
|
el.logsSearchInput.value = logsState.search;
|
|
el.logsWrapToggle.checked = logsState.wrapLines;
|
|
el.logsTailToggle.checked = logsState.tailNewest;
|
|
el.secretsAutoToggle.checked = secretsState.auto;
|
|
el.secretsIntervalSelect.value = String(secretsState.interval);
|
|
el.secretsSearchInput.value = secretsState.search;
|
|
el.s3AutoToggle.checked = s3State.auto;
|
|
el.s3IntervalSelect.value = String(s3State.interval);
|
|
el.s3PrefixInput.value = s3State.prefix;
|
|
el.s3SearchInput.value = s3State.search;
|
|
applyTheme(appState.theme);
|
|
persistPanel();
|
|
persistEmailPreferences();
|
|
persistLogPreferences();
|
|
persistSecretPreferences();
|
|
persistS3Preferences();
|
|
wire();
|
|
renderWorkspace();
|
|
renderAll();
|
|
renderLogsAll();
|
|
renderSecretsAll();
|
|
renderS3All();
|
|
renderHealthStrip();
|
|
if (appState.panel === "logs") {
|
|
ensureLogsReady();
|
|
} else if (appState.panel === "secrets") {
|
|
ensureSecretsReady();
|
|
} else if (appState.panel === "s3") {
|
|
ensureS3Ready();
|
|
} else {
|
|
refreshMessages("initial");
|
|
}
|
|
refreshHealthSummary("initial");
|
|
window.setInterval(() => {
|
|
if (!document.hidden) {
|
|
refreshHealthSummary("auto");
|
|
}
|
|
}, HEALTH_REFRESH_MS);
|
|
window.setInterval(() => {
|
|
renderLiveClock();
|
|
renderLogsLiveClock();
|
|
renderSecretsLiveClock();
|
|
renderS3LiveClock();
|
|
renderHealthStrip();
|
|
}, 1000);
|
|
|
|
function wire() {
|
|
el.themeToggle.addEventListener("click", () => {
|
|
applyTheme(appState.theme === "dark" ? "light" : "dark");
|
|
});
|
|
|
|
el.resetStateButton.addEventListener("click", () => {
|
|
resetSavedState();
|
|
});
|
|
|
|
el.healthRefreshButton.addEventListener("click", () => {
|
|
refreshHealthSummary("manual");
|
|
});
|
|
|
|
el.healthStrip.addEventListener("click", async (event) => {
|
|
const button = event.target.closest("button[data-health-panel]");
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
await setPanel(button.dataset.healthPanel);
|
|
});
|
|
|
|
el.refreshButton.addEventListener("click", () => refreshMessages("manual"));
|
|
|
|
el.autoToggle.addEventListener("change", () => {
|
|
state.auto = el.autoToggle.checked;
|
|
persistEmailPreferences();
|
|
scheduleRefresh();
|
|
renderStatus();
|
|
});
|
|
|
|
el.intervalSelect.addEventListener("change", () => {
|
|
state.interval = Number(el.intervalSelect.value) || config.defaultRefreshMs;
|
|
persistEmailPreferences();
|
|
scheduleRefresh();
|
|
renderStatus();
|
|
});
|
|
|
|
el.searchInput.addEventListener("input", (event) => {
|
|
state.search = event.target.value;
|
|
applyFilter();
|
|
});
|
|
|
|
el.clearSearchButton.addEventListener("click", () => {
|
|
state.search = "";
|
|
el.searchInput.value = "";
|
|
applyFilter();
|
|
});
|
|
|
|
el.expandAllButton.addEventListener("click", () => {
|
|
state.filtered.forEach((message) => state.openIds.add(message.id));
|
|
syncCardExpansion();
|
|
});
|
|
|
|
el.collapseAllButton.addEventListener("click", () => {
|
|
state.openIds.clear();
|
|
syncCardExpansion();
|
|
});
|
|
|
|
el.scrollToTopButton.addEventListener("click", () => {
|
|
scrollPaneToTop(el.emailsContentPane);
|
|
});
|
|
|
|
el.emailsContentPane.addEventListener("scroll", () => {
|
|
updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
|
|
});
|
|
|
|
el.list.addEventListener("click", async (event) => {
|
|
const button = event.target.closest("button[data-action]");
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
const id = button.dataset.id;
|
|
const message = getMessage(id);
|
|
|
|
if (!message) {
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.action === "view") {
|
|
state.views[id] = button.dataset.view;
|
|
renderList();
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.action === "load-raw") {
|
|
await loadRaw(id);
|
|
renderList();
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.action === "copy-raw") {
|
|
const raw = await loadRaw(id);
|
|
|
|
if (raw) {
|
|
await copyText(raw);
|
|
setStatus("Raw message copied to the clipboard.", "ok");
|
|
}
|
|
}
|
|
});
|
|
|
|
el.logsRefreshButton.addEventListener("click", () => refreshLogs("manual"));
|
|
|
|
el.logsAutoToggle.addEventListener("change", () => {
|
|
logsState.auto = el.logsAutoToggle.checked;
|
|
persistLogPreferences();
|
|
scheduleLogsRefresh();
|
|
renderLogsStatus();
|
|
});
|
|
|
|
el.logsIntervalSelect.addEventListener("change", () => {
|
|
logsState.interval = Number(el.logsIntervalSelect.value) || config.defaultRefreshMs;
|
|
persistLogPreferences();
|
|
scheduleLogsRefresh();
|
|
renderLogsStatus();
|
|
});
|
|
|
|
el.logsWindowSelect.addEventListener("change", () => {
|
|
logsState.windowMs = Number(el.logsWindowSelect.value) || config.defaultLogWindowMs;
|
|
persistLogPreferences();
|
|
refreshLogs("window");
|
|
});
|
|
|
|
el.logsLimitSelect.addEventListener("change", () => {
|
|
logsState.limit = Number(el.logsLimitSelect.value) || config.defaultLogLimit;
|
|
persistLogPreferences();
|
|
refreshLogs("limit");
|
|
});
|
|
|
|
el.logsSearchInput.addEventListener("input", (event) => {
|
|
logsState.search = event.target.value;
|
|
applyLogsFilter();
|
|
});
|
|
|
|
el.logsClearSearchButton.addEventListener("click", () => {
|
|
logsState.search = "";
|
|
el.logsSearchInput.value = "";
|
|
applyLogsFilter();
|
|
});
|
|
|
|
el.logsWrapToggle.addEventListener("change", () => {
|
|
logsState.wrapLines = el.logsWrapToggle.checked;
|
|
persistLogPreferences();
|
|
renderLogsList();
|
|
});
|
|
|
|
el.logsTailToggle.addEventListener("change", () => {
|
|
logsState.tailNewest = el.logsTailToggle.checked;
|
|
persistLogPreferences();
|
|
});
|
|
|
|
el.logsExpandAllButton.addEventListener("click", () => {
|
|
logsState.filtered.forEach((event) => logsState.openIds.add(event.id));
|
|
renderLogsList();
|
|
});
|
|
|
|
el.logsCollapseAllButton.addEventListener("click", () => {
|
|
logsState.openIds.clear();
|
|
renderLogsList();
|
|
});
|
|
|
|
el.logsScrollToTopButton.addEventListener("click", () => {
|
|
scrollPaneToTop(el.logsContentPane);
|
|
});
|
|
|
|
el.logsContentPane.addEventListener("scroll", () => {
|
|
updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
|
|
});
|
|
|
|
el.logsGroupSelect.addEventListener("change", async () => {
|
|
logsState.group = el.logsGroupSelect.value;
|
|
logsState.stream = "";
|
|
persistLogPreferences();
|
|
await refreshLogStreams();
|
|
await refreshLogs("group");
|
|
});
|
|
|
|
el.logsStreamSelect.addEventListener("change", () => {
|
|
logsState.stream = el.logsStreamSelect.value;
|
|
persistLogPreferences();
|
|
refreshLogs("stream");
|
|
});
|
|
|
|
el.logsList.addEventListener("click", async (event) => {
|
|
const button = event.target.closest("button[data-log-action]");
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const logEvent = getLogEvent(button.dataset.id);
|
|
|
|
if (!logEvent) {
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.logAction === "copy") {
|
|
await copyText(formatLogMessage(logEvent.message));
|
|
setLogsStatus("Log payload copied to the clipboard.", "ok");
|
|
}
|
|
});
|
|
|
|
el.secretsRefreshButton.addEventListener("click", () => refreshSecrets("manual"));
|
|
|
|
el.secretsAutoToggle.addEventListener("change", () => {
|
|
secretsState.auto = el.secretsAutoToggle.checked;
|
|
persistSecretPreferences();
|
|
scheduleSecretsRefresh();
|
|
renderSecretsStatus();
|
|
});
|
|
|
|
el.secretsIntervalSelect.addEventListener("change", () => {
|
|
secretsState.interval = Number(el.secretsIntervalSelect.value) || config.defaultRefreshMs;
|
|
persistSecretPreferences();
|
|
scheduleSecretsRefresh();
|
|
renderSecretsStatus();
|
|
});
|
|
|
|
el.secretsSearchInput.addEventListener("input", (event) => {
|
|
secretsState.search = event.target.value;
|
|
applySecretsFilter();
|
|
});
|
|
|
|
el.secretsClearSearchButton.addEventListener("click", () => {
|
|
secretsState.search = "";
|
|
el.secretsSearchInput.value = "";
|
|
applySecretsFilter();
|
|
});
|
|
|
|
el.secretsExpandAllButton.addEventListener("click", () => {
|
|
secretsState.filtered.forEach((secret) => secretsState.openIds.add(secret.id));
|
|
syncSecretExpansion();
|
|
});
|
|
|
|
el.secretsCollapseAllButton.addEventListener("click", () => {
|
|
secretsState.openIds.clear();
|
|
syncSecretExpansion();
|
|
});
|
|
|
|
el.secretsScrollToTopButton.addEventListener("click", () => {
|
|
scrollPaneToTop(el.secretsContentPane);
|
|
});
|
|
|
|
el.secretsContentPane.addEventListener("scroll", () => {
|
|
updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
|
|
});
|
|
|
|
el.secretsList.addEventListener("click", async (event) => {
|
|
const button = event.target.closest("button[data-secret-action]");
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
const id = button.dataset.id;
|
|
const secret = getSecret(id);
|
|
|
|
if (!secret) {
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "load-value") {
|
|
await ensureSecretValue(id, { force: false });
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "reload-value") {
|
|
await ensureSecretValue(id, { force: true });
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "copy-value") {
|
|
const entry = await ensureSecretValue(id, { force: false });
|
|
|
|
if (entry?.status === "loaded") {
|
|
await copyText(entry.copyValue);
|
|
setSecretsStatus("Secret value copied to the clipboard.", "ok");
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "toggle-reveal") {
|
|
toggleSecretReveal(id);
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "copy-name") {
|
|
await copyText(secret.name || "");
|
|
setSecretsStatus("Secret name copied to the clipboard.", "ok");
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "copy-arn") {
|
|
await copyText(secret.arn || "");
|
|
setSecretsStatus("Secret ARN copied to the clipboard.", "ok");
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.secretAction === "copy-env") {
|
|
const entry = await ensureSecretValue(id, { force: false });
|
|
|
|
if (entry?.status === "loaded") {
|
|
await copyText(`${secret.name}=${entry.copyValue}`);
|
|
setSecretsStatus("Secret env line copied to the clipboard.", "ok");
|
|
}
|
|
}
|
|
});
|
|
|
|
el.s3RefreshButton.addEventListener("click", async () => {
|
|
await refreshS3Buckets();
|
|
await refreshS3("manual");
|
|
});
|
|
|
|
el.s3AutoToggle.addEventListener("change", () => {
|
|
s3State.auto = el.s3AutoToggle.checked;
|
|
persistS3Preferences();
|
|
scheduleS3Refresh();
|
|
renderS3Status();
|
|
});
|
|
|
|
el.s3IntervalSelect.addEventListener("change", () => {
|
|
s3State.interval = Number(el.s3IntervalSelect.value) || config.defaultRefreshMs;
|
|
persistS3Preferences();
|
|
scheduleS3Refresh();
|
|
renderS3Status();
|
|
});
|
|
|
|
el.s3BucketSelect.addEventListener("change", () => {
|
|
s3State.bucket = el.s3BucketSelect.value;
|
|
persistS3Preferences();
|
|
refreshS3("bucket");
|
|
});
|
|
|
|
el.s3PrefixInput.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
s3State.prefix = el.s3PrefixInput.value.trim();
|
|
persistS3Preferences();
|
|
refreshS3("prefix");
|
|
}
|
|
});
|
|
|
|
el.s3ApplyPrefixButton.addEventListener("click", () => {
|
|
s3State.prefix = el.s3PrefixInput.value.trim();
|
|
persistS3Preferences();
|
|
refreshS3("prefix");
|
|
});
|
|
|
|
el.s3SearchInput.addEventListener("input", (event) => {
|
|
s3State.search = event.target.value;
|
|
applyS3Filter();
|
|
});
|
|
|
|
el.s3ClearSearchButton.addEventListener("click", () => {
|
|
s3State.search = "";
|
|
el.s3SearchInput.value = "";
|
|
applyS3Filter();
|
|
});
|
|
|
|
el.s3ExpandAllButton.addEventListener("click", () => {
|
|
s3State.filtered.forEach((object) => s3State.openIds.add(object.id));
|
|
syncS3Expansion();
|
|
});
|
|
|
|
el.s3CollapseAllButton.addEventListener("click", () => {
|
|
s3State.openIds.clear();
|
|
syncS3Expansion();
|
|
});
|
|
|
|
el.s3ScrollToTopButton.addEventListener("click", () => {
|
|
scrollPaneToTop(el.s3ContentPane);
|
|
});
|
|
|
|
el.s3ContentPane.addEventListener("scroll", () => {
|
|
updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
|
|
});
|
|
|
|
el.s3List.addEventListener("click", async (event) => {
|
|
const button = event.target.closest("button[data-s3-action]");
|
|
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
const id = button.dataset.id;
|
|
const object = getS3Object(id);
|
|
|
|
if (!object) {
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.s3Action === "load-preview") {
|
|
await ensureS3Preview(id, { force: false });
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.s3Action === "reload-preview") {
|
|
await ensureS3Preview(id, { force: true });
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.s3Action === "copy-key") {
|
|
await copyText(object.key);
|
|
setS3Status("Object key copied to the clipboard.", "ok");
|
|
return;
|
|
}
|
|
|
|
if (button.dataset.s3Action === "copy-uri") {
|
|
await copyText(`s3://${object.bucket}/${object.key}`);
|
|
setS3Status("S3 URI copied to the clipboard.", "ok");
|
|
}
|
|
});
|
|
|
|
document.addEventListener("visibilitychange", () => {
|
|
window.clearTimeout(state.timer);
|
|
window.clearTimeout(logsState.timer);
|
|
window.clearTimeout(secretsState.timer);
|
|
window.clearTimeout(s3State.timer);
|
|
|
|
if (document.hidden) {
|
|
renderStatus();
|
|
renderLogsStatus();
|
|
renderSecretsStatus();
|
|
renderS3Status();
|
|
return;
|
|
}
|
|
|
|
refreshHealthSummary("visibility");
|
|
|
|
if (appState.panel === "s3") {
|
|
if (s3State.auto) {
|
|
refreshS3("visibility");
|
|
} else {
|
|
renderS3Status();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (appState.panel === "secrets") {
|
|
if (secretsState.auto) {
|
|
refreshSecrets("visibility");
|
|
} else {
|
|
renderSecretsStatus();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (appState.panel === "logs") {
|
|
if (logsState.auto) {
|
|
refreshLogs("visibility");
|
|
} else {
|
|
renderLogsStatus();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (state.auto) {
|
|
refreshMessages("visibility");
|
|
} else {
|
|
renderStatus();
|
|
}
|
|
});
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
const isField =
|
|
event.target instanceof HTMLElement &&
|
|
(event.target.matches("input,textarea,select") || event.target.isContentEditable);
|
|
|
|
if (!isField && event.key.toLowerCase() === "r") {
|
|
event.preventDefault();
|
|
|
|
if (appState.panel === "logs") {
|
|
refreshLogs("keyboard");
|
|
return;
|
|
}
|
|
|
|
if (appState.panel === "secrets") {
|
|
refreshSecrets("keyboard");
|
|
return;
|
|
}
|
|
|
|
if (appState.panel === "s3") {
|
|
refreshS3("keyboard");
|
|
return;
|
|
}
|
|
|
|
refreshMessages("keyboard");
|
|
}
|
|
});
|
|
|
|
updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
|
|
updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
|
|
updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
|
|
updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
|
|
}
|
|
|
|
async function setPanel(panel) {
|
|
if (!panel || panel === appState.panel) {
|
|
if (panel === "logs") {
|
|
await ensureLogsReady();
|
|
} else if (panel === "secrets") {
|
|
await ensureSecretsReady();
|
|
} else if (panel === "s3") {
|
|
await ensureS3Ready();
|
|
}
|
|
|
|
renderWorkspace();
|
|
return;
|
|
}
|
|
|
|
appState.panel = panel;
|
|
persistPanel();
|
|
renderWorkspace();
|
|
|
|
if (panel === "logs") {
|
|
await ensureLogsReady();
|
|
} else if (panel === "secrets") {
|
|
await ensureSecretsReady();
|
|
} else if (panel === "s3") {
|
|
await ensureS3Ready();
|
|
} else if (!state.updatedAt && !state.loading) {
|
|
await refreshMessages("panel");
|
|
}
|
|
|
|
scheduleRefresh();
|
|
scheduleLogsRefresh();
|
|
scheduleSecretsRefresh();
|
|
scheduleS3Refresh();
|
|
renderStatus();
|
|
renderLogsStatus();
|
|
renderSecretsStatus();
|
|
renderS3Status();
|
|
}
|
|
|
|
function renderWorkspace() {
|
|
el.emailsPanel.hidden = appState.panel !== "emails";
|
|
el.logsPanel.hidden = appState.panel !== "logs";
|
|
el.secretsPanel.hidden = appState.panel !== "secrets";
|
|
el.s3Panel.hidden = appState.panel !== "s3";
|
|
renderHealthStrip();
|
|
}
|
|
|
|
async function ensureLogsReady() {
|
|
if (appState.logsReady) {
|
|
return;
|
|
}
|
|
|
|
await refreshLogGroups();
|
|
appState.logsReady = !logsState.error;
|
|
|
|
if (logsState.group) {
|
|
await refreshLogs("initial");
|
|
}
|
|
}
|
|
|
|
async function ensureSecretsReady() {
|
|
if (appState.secretsReady) {
|
|
return;
|
|
}
|
|
|
|
await refreshSecrets("initial");
|
|
appState.secretsReady = !secretsState.error;
|
|
}
|
|
|
|
async function ensureS3Ready() {
|
|
if (appState.s3Ready) {
|
|
return;
|
|
}
|
|
|
|
await refreshS3Buckets();
|
|
appState.s3Ready = !s3State.error;
|
|
|
|
if (s3State.bucket) {
|
|
await refreshS3("initial");
|
|
}
|
|
}
|
|
|
|
async function refreshMessages(source) {
|
|
if (state.loading) {
|
|
return;
|
|
}
|
|
|
|
let shouldRenderList = false;
|
|
|
|
state.loading = true;
|
|
state.source = source;
|
|
state.error = "";
|
|
renderStatus();
|
|
renderFetch();
|
|
|
|
try {
|
|
const response = await fetch("/api/messages", { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const messages = Array.isArray(payload.messages) ? payload.messages : [];
|
|
const nextIds = new Set(messages.map((message) => message.id));
|
|
const nextSignature = computeListSignature(messages);
|
|
|
|
shouldRenderList = nextSignature !== state.listSignature;
|
|
state.newIds =
|
|
state.updatedAt && shouldRenderList
|
|
? new Set(messages.filter((message) => !state.knownIds.has(message.id)).map((message) => message.id))
|
|
: state.newIds;
|
|
state.knownIds = nextIds;
|
|
state.messages = messages;
|
|
state.duration = payload.fetchDurationMs || 0;
|
|
state.parseErrors = payload.parseErrors || 0;
|
|
state.newest = payload.latestMessageTimestamp || "";
|
|
state.updatedAt = Date.now();
|
|
state.listSignature = nextSignature;
|
|
|
|
pruneState();
|
|
applyFilter(shouldRenderList);
|
|
setStatus(`Updated ${messages.length} message${messages.length === 1 ? "" : "s"}.`, "ok");
|
|
} catch (error) {
|
|
state.error = error.message || "Unknown refresh error";
|
|
setStatus(`Refresh failed: ${state.error}`, "bad");
|
|
} finally {
|
|
state.loading = false;
|
|
scheduleRefresh();
|
|
renderAll({ renderList: shouldRenderList });
|
|
}
|
|
}
|
|
|
|
async function refreshLogGroups() {
|
|
try {
|
|
const response = await fetch("/api/logs/groups", { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
logsState.groups = Array.isArray(payload.groups) ? payload.groups : [];
|
|
|
|
const availableGroups = logsState.groups.map((group) => group.name).filter(Boolean);
|
|
|
|
if (!availableGroups.includes(logsState.group)) {
|
|
logsState.group = availableGroups.includes(config.defaultLogGroup)
|
|
? config.defaultLogGroup
|
|
: availableGroups[0] || "";
|
|
}
|
|
|
|
logsState.error = "";
|
|
await refreshLogStreams();
|
|
} catch (error) {
|
|
logsState.error = error.message || "Unknown log group refresh error";
|
|
} finally {
|
|
persistLogPreferences();
|
|
renderLogsAll();
|
|
}
|
|
}
|
|
|
|
async function refreshLogStreams() {
|
|
if (!logsState.group) {
|
|
logsState.streams = [];
|
|
logsState.stream = "";
|
|
renderLogsAll();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/logs/streams?group=${encodeURIComponent(logsState.group)}`, {
|
|
cache: "no-store"
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
logsState.streams = Array.isArray(payload.streams) ? payload.streams : [];
|
|
|
|
if (!logsState.streams.some((stream) => stream.name === logsState.stream)) {
|
|
logsState.stream = "";
|
|
}
|
|
|
|
logsState.error = "";
|
|
} catch (error) {
|
|
logsState.streams = [];
|
|
logsState.stream = "";
|
|
logsState.error = error.message || "Unknown log stream refresh error";
|
|
} finally {
|
|
persistLogPreferences();
|
|
renderLogsAll();
|
|
}
|
|
}
|
|
|
|
async function refreshLogs(source) {
|
|
if (logsState.loading) {
|
|
return;
|
|
}
|
|
|
|
if (!appState.logsReady) {
|
|
await ensureLogsReady();
|
|
return;
|
|
}
|
|
|
|
if (!logsState.group) {
|
|
logsState.error = logsState.groups.length ? "Choose a log group to load events." : "No log groups found.";
|
|
renderLogsAll();
|
|
return;
|
|
}
|
|
|
|
let shouldRenderList = false;
|
|
|
|
logsState.loading = true;
|
|
logsState.source = source;
|
|
logsState.error = "";
|
|
renderLogsStatus();
|
|
renderLogsFetch();
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
group: logsState.group,
|
|
windowMs: String(logsState.windowMs),
|
|
limit: String(logsState.limit)
|
|
});
|
|
|
|
if (logsState.stream) {
|
|
params.set("stream", logsState.stream);
|
|
}
|
|
|
|
const response = await fetch(`/api/logs/events?${params.toString()}`, { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const events = Array.isArray(payload.events) ? payload.events : [];
|
|
const nextSignature = computeLogListSignature(events);
|
|
shouldRenderList = nextSignature !== logsState.listSignature;
|
|
logsState.events = events;
|
|
logsState.duration = payload.fetchDurationMs || 0;
|
|
logsState.newest = payload.latestTimestamp || 0;
|
|
logsState.updatedAt = Date.now();
|
|
logsState.searchedLogStreams = payload.searchedLogStreams || (logsState.stream ? 1 : logsState.streams.length);
|
|
logsState.listSignature = nextSignature;
|
|
|
|
pruneLogsState();
|
|
applyLogsFilter(shouldRenderList);
|
|
setLogsStatus(`Updated ${logsState.events.length} log event${logsState.events.length === 1 ? "" : "s"}.`, "ok");
|
|
} catch (error) {
|
|
logsState.error = error.message || "Unknown log refresh error";
|
|
setLogsStatus(`Refresh failed: ${logsState.error}`, "bad");
|
|
} finally {
|
|
logsState.loading = false;
|
|
scheduleLogsRefresh();
|
|
renderLogsAll({ renderList: shouldRenderList });
|
|
|
|
if (shouldRenderList && logsState.tailNewest) {
|
|
scrollPaneToTop(el.logsContentPane);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function refreshSecrets(source) {
|
|
if (secretsState.loading) {
|
|
return;
|
|
}
|
|
|
|
let shouldRenderList = false;
|
|
|
|
secretsState.loading = true;
|
|
secretsState.source = source;
|
|
secretsState.error = "";
|
|
renderSecretsStatus();
|
|
renderSecretsFetch();
|
|
|
|
try {
|
|
const response = await fetch("/api/secrets", { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const items = Array.isArray(payload.secrets) ? payload.secrets : [];
|
|
const nextSignature = computeSecretsListSignature(items);
|
|
shouldRenderList = nextSignature !== secretsState.listSignature;
|
|
secretsState.items = items;
|
|
secretsState.duration = payload.fetchDurationMs || 0;
|
|
secretsState.newest = payload.latestTimestamp || "";
|
|
secretsState.updatedAt = Date.now();
|
|
secretsState.listSignature = nextSignature;
|
|
|
|
pruneSecretsState();
|
|
applySecretsFilter(shouldRenderList);
|
|
appState.secretsReady = true;
|
|
setSecretsStatus(`Updated ${items.length} secret${items.length === 1 ? "" : "s"}.`, "ok");
|
|
} catch (error) {
|
|
secretsState.error = error.message || "Unknown secrets refresh error";
|
|
appState.secretsReady = false;
|
|
setSecretsStatus(`Refresh failed: ${secretsState.error}`, "bad");
|
|
} finally {
|
|
secretsState.loading = false;
|
|
scheduleSecretsRefresh();
|
|
renderSecretsAll({ renderList: shouldRenderList });
|
|
}
|
|
}
|
|
|
|
async function refreshHealthSummary(source) {
|
|
if (healthState.loading && source === "auto") {
|
|
return;
|
|
}
|
|
|
|
healthState.loading = true;
|
|
healthState.source = source;
|
|
renderHealthStrip();
|
|
|
|
try {
|
|
const response = await fetch("/api/service-health", { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
healthState.services = payload.services || {};
|
|
healthState.updatedAt = Date.now();
|
|
healthState.error = "";
|
|
} catch (error) {
|
|
healthState.error = error.message || "Unknown health refresh error";
|
|
} finally {
|
|
healthState.loading = false;
|
|
renderHealthStrip();
|
|
}
|
|
}
|
|
|
|
async function refreshS3Buckets() {
|
|
try {
|
|
const response = await fetch("/api/s3/buckets", { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
s3State.buckets = Array.isArray(payload.buckets) ? payload.buckets : [];
|
|
|
|
const availableBuckets = s3State.buckets.map((bucket) => bucket.name).filter(Boolean);
|
|
|
|
if (!availableBuckets.includes(s3State.bucket)) {
|
|
s3State.bucket = availableBuckets.includes(config.defaultS3Bucket)
|
|
? config.defaultS3Bucket
|
|
: availableBuckets[0] || "";
|
|
}
|
|
|
|
s3State.error = "";
|
|
} catch (error) {
|
|
s3State.buckets = [];
|
|
s3State.bucket = "";
|
|
s3State.error = error.message || "Unknown S3 bucket refresh error";
|
|
} finally {
|
|
appState.s3Ready = !s3State.error;
|
|
persistS3Preferences();
|
|
renderS3All();
|
|
}
|
|
}
|
|
|
|
async function refreshS3(source) {
|
|
if (s3State.loading) {
|
|
return;
|
|
}
|
|
|
|
if (!appState.s3Ready) {
|
|
await ensureS3Ready();
|
|
return;
|
|
}
|
|
|
|
if (!s3State.bucket) {
|
|
s3State.error = s3State.buckets.length ? "Choose a bucket to load objects." : "No S3 buckets found.";
|
|
renderS3All();
|
|
return;
|
|
}
|
|
|
|
let shouldRenderList = false;
|
|
|
|
s3State.loading = true;
|
|
s3State.source = source;
|
|
s3State.error = "";
|
|
renderS3Status();
|
|
renderS3Fetch();
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
bucket: s3State.bucket
|
|
});
|
|
|
|
if (s3State.prefix) {
|
|
params.set("prefix", s3State.prefix);
|
|
}
|
|
|
|
const response = await fetch(`/api/s3/objects?${params.toString()}`, { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const objects = Array.isArray(payload.objects) ? payload.objects : [];
|
|
const nextSignature = computeS3ListSignature(objects);
|
|
shouldRenderList = nextSignature !== s3State.listSignature;
|
|
s3State.objects = objects;
|
|
s3State.duration = payload.fetchDurationMs || 0;
|
|
s3State.newest = payload.latestTimestamp || "";
|
|
s3State.updatedAt = Date.now();
|
|
s3State.listSignature = nextSignature;
|
|
|
|
pruneS3State();
|
|
applyS3Filter(shouldRenderList);
|
|
appState.s3Ready = true;
|
|
setS3Status(`Updated ${objects.length} object${objects.length === 1 ? "" : "s"}.`, "ok");
|
|
} catch (error) {
|
|
s3State.error = error.message || "Unknown S3 refresh error";
|
|
appState.s3Ready = false;
|
|
setS3Status(`Refresh failed: ${s3State.error}`, "bad");
|
|
} finally {
|
|
s3State.loading = false;
|
|
scheduleS3Refresh();
|
|
renderS3All({ renderList: shouldRenderList });
|
|
}
|
|
}
|
|
|
|
function applyLogsFilter(shouldRenderList = true) {
|
|
const search = logsState.search.trim().toLowerCase();
|
|
logsState.filtered = !search
|
|
? [...logsState.events]
|
|
: logsState.events.filter((event) => logHaystack(event).includes(search));
|
|
persistLogPreferences();
|
|
renderLogsAll({ renderList: shouldRenderList });
|
|
}
|
|
|
|
function applySecretsFilter(shouldRenderList = true) {
|
|
const search = secretsState.search.trim().toLowerCase();
|
|
secretsState.filtered = !search
|
|
? [...secretsState.items]
|
|
: secretsState.items.filter((secret) => secretHaystack(secret).includes(search));
|
|
persistSecretPreferences();
|
|
renderSecretsAll({ renderList: shouldRenderList });
|
|
}
|
|
|
|
function applyS3Filter(shouldRenderList = true) {
|
|
const search = s3State.search.trim().toLowerCase();
|
|
s3State.filtered = !search
|
|
? [...s3State.objects]
|
|
: s3State.objects.filter((object) => s3Haystack(object).includes(search));
|
|
persistS3Preferences();
|
|
renderS3All({ renderList: shouldRenderList });
|
|
}
|
|
|
|
function pruneState() {
|
|
const ids = new Set(state.messages.map((message) => message.id));
|
|
state.openIds = new Set([...state.openIds].filter((id) => ids.has(id)));
|
|
state.newIds = new Set([...state.newIds].filter((id) => ids.has(id)));
|
|
|
|
Object.keys(state.views).forEach((id) => {
|
|
if (!ids.has(id)) {
|
|
delete state.views[id];
|
|
}
|
|
});
|
|
|
|
Object.keys(state.raw).forEach((id) => {
|
|
if (!ids.has(id)) {
|
|
delete state.raw[id];
|
|
}
|
|
});
|
|
}
|
|
|
|
function pruneLogsState() {
|
|
const ids = new Set(logsState.events.map((event) => event.id));
|
|
logsState.openIds = new Set([...logsState.openIds].filter((id) => ids.has(id)));
|
|
}
|
|
|
|
function pruneSecretsState() {
|
|
const ids = new Set(secretsState.items.map((secret) => secret.id));
|
|
secretsState.openIds = new Set([...secretsState.openIds].filter((id) => ids.has(id)));
|
|
|
|
Object.keys(secretsState.values).forEach((id) => {
|
|
if (!ids.has(id)) {
|
|
delete secretsState.values[id];
|
|
}
|
|
});
|
|
|
|
secretsState.revealedIds = new Set([...secretsState.revealedIds].filter((id) => ids.has(id)));
|
|
}
|
|
|
|
function pruneS3State() {
|
|
const ids = new Set(s3State.objects.map((object) => object.id));
|
|
s3State.openIds = new Set([...s3State.openIds].filter((id) => ids.has(id)));
|
|
|
|
Object.keys(s3State.previews).forEach((id) => {
|
|
if (!ids.has(id)) {
|
|
delete s3State.previews[id];
|
|
}
|
|
});
|
|
}
|
|
|
|
function applyFilter(shouldRenderList = true) {
|
|
const search = state.search.trim().toLowerCase();
|
|
state.filtered = !search
|
|
? [...state.messages]
|
|
: state.messages.filter((message) => haystack(message).includes(search));
|
|
persistEmailPreferences();
|
|
renderAll({ renderList: shouldRenderList });
|
|
}
|
|
|
|
function computeListSignature(messages) {
|
|
return messages
|
|
.map((message) =>
|
|
[
|
|
message.id,
|
|
message.timestampMs || 0,
|
|
message.rawSizeBytes || 0,
|
|
message.attachmentCount || 0,
|
|
message.hasHtml ? 1 : 0,
|
|
message.preview || "",
|
|
message.parseError || ""
|
|
].join("::")
|
|
)
|
|
.join("|");
|
|
}
|
|
|
|
function computeLogListSignature(events) {
|
|
return events
|
|
.map((event) =>
|
|
[event.id, event.timestamp || 0, event.ingestionTime || 0, event.logStreamName || "", event.message || ""].join(
|
|
"::"
|
|
)
|
|
)
|
|
.join("|");
|
|
}
|
|
|
|
function computeSecretsListSignature(items) {
|
|
return items
|
|
.map((secret) =>
|
|
[
|
|
secret.id,
|
|
secret.name || "",
|
|
secret.arn || "",
|
|
secret.description || "",
|
|
secret.lastChangedDate || "",
|
|
secret.createdDate || "",
|
|
secret.rotationEnabled ? 1 : 0,
|
|
secret.owningService || "",
|
|
secret.primaryRegion || "",
|
|
secret.versionCount || 0,
|
|
secret.tagCount || 0
|
|
].join("::")
|
|
)
|
|
.join("|");
|
|
}
|
|
|
|
function computeS3ListSignature(objects) {
|
|
return objects
|
|
.map((object) =>
|
|
[object.id, object.key || "", object.size || 0, object.lastModified || "", object.etag || ""].join("::")
|
|
)
|
|
.join("|");
|
|
}
|
|
|
|
function haystack(message) {
|
|
return [
|
|
message.subject,
|
|
message.from,
|
|
message.to,
|
|
message.replyTo,
|
|
message.preview,
|
|
message.textContent,
|
|
message.region,
|
|
...(message.attachments || []).flatMap((attachment) => [attachment.filename, attachment.contentType])
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase();
|
|
}
|
|
|
|
function logHaystack(event) {
|
|
return [event.logStreamName, event.message, event.preview].filter(Boolean).join(" ").toLowerCase();
|
|
}
|
|
|
|
function secretHaystack(secret) {
|
|
return [
|
|
secret.name,
|
|
secret.arn,
|
|
secret.description,
|
|
secret.primaryRegion,
|
|
secret.owningService,
|
|
...(secret.tags || []).flatMap((tag) => [tag.key, tag.value])
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase();
|
|
}
|
|
|
|
function s3Haystack(object) {
|
|
return [object.bucket, object.key, object.storageClass, object.etag].filter(Boolean).join(" ").toLowerCase();
|
|
}
|
|
|
|
function scheduleRefresh() {
|
|
window.clearTimeout(state.timer);
|
|
|
|
if (appState.panel !== "emails" || !state.auto || document.hidden || state.loading) {
|
|
return;
|
|
}
|
|
|
|
state.timer = window.setTimeout(() => refreshMessages("auto"), state.interval);
|
|
}
|
|
|
|
function scheduleLogsRefresh() {
|
|
window.clearTimeout(logsState.timer);
|
|
|
|
if (appState.panel !== "logs" || !logsState.auto || document.hidden || logsState.loading) {
|
|
return;
|
|
}
|
|
|
|
logsState.timer = window.setTimeout(() => refreshLogs("auto"), logsState.interval);
|
|
}
|
|
|
|
function scheduleSecretsRefresh() {
|
|
window.clearTimeout(secretsState.timer);
|
|
|
|
if (appState.panel !== "secrets" || !secretsState.auto || document.hidden || secretsState.loading) {
|
|
return;
|
|
}
|
|
|
|
secretsState.timer = window.setTimeout(() => refreshSecrets("auto"), secretsState.interval);
|
|
}
|
|
|
|
function scheduleS3Refresh() {
|
|
window.clearTimeout(s3State.timer);
|
|
|
|
if (appState.panel !== "s3" || !s3State.auto || document.hidden || s3State.loading) {
|
|
return;
|
|
}
|
|
|
|
s3State.timer = window.setTimeout(() => refreshS3("auto"), s3State.interval);
|
|
}
|
|
|
|
function renderAll(options = {}) {
|
|
const { renderList: shouldRenderList = true } = options;
|
|
renderStats();
|
|
renderFetch();
|
|
renderStatus();
|
|
if (shouldRenderList) {
|
|
renderList();
|
|
}
|
|
renderLiveClock();
|
|
}
|
|
|
|
function renderLogsAll(options = {}) {
|
|
const { renderList: shouldRenderList = true } = options;
|
|
renderLogsFilters();
|
|
renderLogsStats();
|
|
renderLogsFetch();
|
|
renderLogsStatus();
|
|
if (shouldRenderList) {
|
|
renderLogsList();
|
|
}
|
|
renderLogsLiveClock();
|
|
}
|
|
|
|
function renderSecretsAll(options = {}) {
|
|
const { renderList: shouldRenderList = true } = options;
|
|
renderSecretsStats();
|
|
renderSecretsFetch();
|
|
renderSecretsStatus();
|
|
if (shouldRenderList) {
|
|
renderSecretsList();
|
|
}
|
|
renderSecretsLiveClock();
|
|
}
|
|
|
|
function renderS3All(options = {}) {
|
|
const { renderList: shouldRenderList = true } = options;
|
|
renderS3Filters();
|
|
renderS3Stats();
|
|
renderS3Fetch();
|
|
renderS3Status();
|
|
if (shouldRenderList) {
|
|
renderS3List();
|
|
}
|
|
renderS3LiveClock();
|
|
}
|
|
|
|
function renderHealthStrip() {
|
|
const serviceOrder = [
|
|
{ key: "emails", panel: "emails", icon: "✉️", label: "SES Emails", shortLabel: "SES" },
|
|
{ key: "logs", panel: "logs", icon: "📜", label: "CloudWatch Logs", shortLabel: "Logs" },
|
|
{ key: "secrets", panel: "secrets", icon: "🔐", label: "Secrets Manager", shortLabel: "Secrets" },
|
|
{ key: "s3", panel: "s3", icon: "🪣", label: "S3 Explorer", shortLabel: "S3" }
|
|
];
|
|
|
|
el.healthStrip.innerHTML = serviceOrder
|
|
.map((service) => {
|
|
const entry = healthState.services?.[service.key];
|
|
const toneClass = healthState.loading && !entry ? "warn" : entry?.ok ? "ok" : entry ? "bad" : "";
|
|
const activeClass = service.panel === appState.panel ? "active" : "";
|
|
const className = ["healthBadge", toneClass, activeClass].filter(Boolean).join(" ");
|
|
const summary = entry?.summary || (healthState.loading ? "Checking..." : "Waiting");
|
|
const detail = entry?.detail || (healthState.error ? healthState.error : "Not checked yet");
|
|
const updatedMeta = healthState.updatedAt
|
|
? `Updated ${formatRelative(healthState.updatedAt)} via ${healthState.source}`
|
|
: "";
|
|
const titleParts = [`${service.label}: ${detail}`];
|
|
|
|
if (updatedMeta) {
|
|
titleParts.push(updatedMeta);
|
|
}
|
|
|
|
return `<button class="${className}" type="button" data-health-panel="${service.panel}" aria-pressed="${service.panel === appState.panel ? "true" : "false"}" title="${escapeHtml(
|
|
titleParts.join(" • ")
|
|
)}"><span class="healthBadgeName">${service.icon} ${escapeHtml(service.shortLabel)}</span><span class="healthBadgeSummary">${escapeHtml(summary)}</span></button>`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
function renderStats() {
|
|
el.totalStat.textContent = String(state.messages.length);
|
|
el.visibleStat.textContent = `${state.filtered.length} visible${state.search ? " after search" : ""}`;
|
|
el.newStat.textContent = String(state.newIds.size);
|
|
el.newestStat.textContent = state.newest ? formatDateTime(state.newest) : "No messages";
|
|
}
|
|
|
|
function renderLogsFilters() {
|
|
const groups = logsState.groups.length
|
|
? logsState.groups.map((group) => `<option value="${escapeHtml(group.name)}">${escapeHtml(group.name)}</option>`)
|
|
: ['<option value="">No log groups</option>'];
|
|
const streams = [
|
|
'<option value="">All streams</option>',
|
|
...logsState.streams.map(
|
|
(stream) => `<option value="${escapeHtml(stream.name)}">${escapeHtml(stream.name)}</option>`
|
|
)
|
|
];
|
|
|
|
el.logsGroupSelect.innerHTML = groups.join("");
|
|
el.logsStreamSelect.innerHTML = streams.join("");
|
|
|
|
if (logsState.group) {
|
|
el.logsGroupSelect.value = logsState.group;
|
|
}
|
|
|
|
el.logsStreamSelect.value = logsState.stream;
|
|
el.logsWrapToggle.checked = logsState.wrapLines;
|
|
el.logsTailToggle.checked = logsState.tailNewest;
|
|
}
|
|
|
|
function renderS3Filters() {
|
|
const bucketOptions = s3State.buckets.length
|
|
? s3State.buckets.map(
|
|
(bucket) => `<option value="${escapeHtml(bucket.name)}">${escapeHtml(bucket.name)}</option>`
|
|
)
|
|
: ['<option value="">No buckets</option>'];
|
|
|
|
el.s3BucketSelect.innerHTML = bucketOptions.join("");
|
|
|
|
if (s3State.bucket) {
|
|
el.s3BucketSelect.value = s3State.bucket;
|
|
}
|
|
|
|
el.s3PrefixInput.value = s3State.prefix;
|
|
el.s3SearchInput.value = s3State.search;
|
|
}
|
|
|
|
function renderLogsStats() {
|
|
el.logsTotalStat.textContent = String(logsState.events.length);
|
|
el.logsVisibleStat.textContent = `${logsState.filtered.length} visible${logsState.search ? " after search" : ""}`;
|
|
el.logsStreamsStat.textContent = String(logsState.streams.length || logsState.searchedLogStreams || 0);
|
|
el.logsNewestStat.textContent = logsState.newest ? formatDateTime(logsState.newest) : "No events";
|
|
}
|
|
|
|
function renderSecretsStats() {
|
|
el.secretsTotalStat.textContent = String(secretsState.items.length);
|
|
el.secretsVisibleStat.textContent = `${secretsState.filtered.length} visible${secretsState.search ? " after search" : ""}`;
|
|
el.secretsLoadedStat.textContent = String(
|
|
Object.values(secretsState.values).filter((entry) => entry?.status === "loaded").length
|
|
);
|
|
el.secretsNewestStat.textContent = secretsState.newest ? formatDateTime(secretsState.newest) : "No secrets";
|
|
}
|
|
|
|
function renderS3Stats() {
|
|
el.s3TotalStat.textContent = String(s3State.objects.length);
|
|
el.s3VisibleStat.textContent = `${s3State.filtered.length} visible${s3State.search ? " after search" : ""}`;
|
|
el.s3BucketsStat.textContent = String(s3State.buckets.length);
|
|
el.s3NewestStat.textContent = s3State.newest ? formatDateTime(s3State.newest) : "No objects";
|
|
}
|
|
|
|
function renderFetch() {
|
|
if (state.loading) {
|
|
el.fetchStat.textContent = "Refreshing...";
|
|
el.fetchDetail.textContent = `Endpoint: ${config.endpoint}`;
|
|
return;
|
|
}
|
|
|
|
if (state.error) {
|
|
el.fetchStat.textContent = "Needs attention";
|
|
el.fetchDetail.textContent = state.error;
|
|
return;
|
|
}
|
|
|
|
if (!state.updatedAt) {
|
|
el.fetchStat.textContent = "Idle";
|
|
el.fetchDetail.textContent = `Endpoint: ${config.endpoint}`;
|
|
return;
|
|
}
|
|
|
|
el.fetchStat.textContent = `${state.duration}ms`;
|
|
el.fetchDetail.textContent = `${state.parseErrors} parse error${state.parseErrors === 1 ? "" : "s"}. Endpoint: ${config.endpoint}`;
|
|
}
|
|
|
|
function renderLogsFetch() {
|
|
if (logsState.loading) {
|
|
el.logsFetchStat.textContent = "Refreshing...";
|
|
el.logsFetchDetail.textContent = `Endpoint: ${config.cloudWatchEndpoint} (${config.cloudWatchRegion})`;
|
|
return;
|
|
}
|
|
|
|
if (logsState.error) {
|
|
el.logsFetchStat.textContent = "Needs attention";
|
|
el.logsFetchDetail.textContent = logsState.error;
|
|
return;
|
|
}
|
|
|
|
if (!logsState.updatedAt) {
|
|
el.logsFetchStat.textContent = "Idle";
|
|
el.logsFetchDetail.textContent = `Endpoint: ${config.cloudWatchEndpoint} (${config.cloudWatchRegion})`;
|
|
return;
|
|
}
|
|
|
|
el.logsFetchStat.textContent = `${logsState.duration}ms`;
|
|
el.logsFetchDetail.textContent = `${logsState.group || "No group selected"}. Endpoint: ${config.cloudWatchEndpoint}`;
|
|
}
|
|
|
|
function renderSecretsFetch() {
|
|
if (secretsState.loading) {
|
|
el.secretsFetchStat.textContent = "Refreshing...";
|
|
el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
|
|
return;
|
|
}
|
|
|
|
if (secretsState.error) {
|
|
el.secretsFetchStat.textContent = "Needs attention";
|
|
el.secretsFetchDetail.textContent = secretsState.error;
|
|
return;
|
|
}
|
|
|
|
if (!secretsState.updatedAt) {
|
|
el.secretsFetchStat.textContent = "Idle";
|
|
el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
|
|
return;
|
|
}
|
|
|
|
el.secretsFetchStat.textContent = `${secretsState.duration}ms`;
|
|
el.secretsFetchDetail.textContent = `Endpoint: ${config.secretsEndpoint} (${config.secretsRegion})`;
|
|
}
|
|
|
|
function renderS3Fetch() {
|
|
if (s3State.loading) {
|
|
el.s3FetchStat.textContent = "Refreshing...";
|
|
el.s3FetchDetail.textContent = `Endpoint: ${config.s3Endpoint} (${config.s3Region})`;
|
|
return;
|
|
}
|
|
|
|
if (s3State.error) {
|
|
el.s3FetchStat.textContent = "Needs attention";
|
|
el.s3FetchDetail.textContent = s3State.error;
|
|
return;
|
|
}
|
|
|
|
if (!s3State.updatedAt) {
|
|
el.s3FetchStat.textContent = "Idle";
|
|
el.s3FetchDetail.textContent = `Endpoint: ${config.s3Endpoint} (${config.s3Region})`;
|
|
return;
|
|
}
|
|
|
|
el.s3FetchStat.textContent = `${s3State.duration}ms`;
|
|
el.s3FetchDetail.textContent = `${s3State.bucket || "No bucket selected"}. Endpoint: ${config.s3Endpoint}`;
|
|
}
|
|
|
|
function renderStatus() {
|
|
el.statusChip.className = "status";
|
|
|
|
if (state.loading) {
|
|
el.statusChip.classList.add("warn");
|
|
el.statusChip.textContent = "Refreshing messages...";
|
|
return;
|
|
}
|
|
|
|
if (state.error) {
|
|
el.statusChip.classList.add("bad");
|
|
el.statusChip.textContent = `Refresh failed: ${state.error}`;
|
|
return;
|
|
}
|
|
|
|
if (!state.auto) {
|
|
el.statusChip.textContent = "Live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (document.hidden) {
|
|
el.statusChip.classList.add("warn");
|
|
el.statusChip.textContent = "Tab hidden, live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (!state.updatedAt) {
|
|
el.statusChip.textContent = "Waiting for first refresh...";
|
|
return;
|
|
}
|
|
|
|
const seconds = Math.max(0, Math.ceil((state.updatedAt + state.interval - Date.now()) / 1000));
|
|
el.statusChip.classList.add("ok");
|
|
el.statusChip.textContent = `Live refresh on, next check in ${seconds}s`;
|
|
}
|
|
|
|
function renderLogsStatus() {
|
|
el.logsStatusChip.className = "status";
|
|
|
|
if (logsState.loading) {
|
|
el.logsStatusChip.classList.add("warn");
|
|
el.logsStatusChip.textContent = "Refreshing logs...";
|
|
return;
|
|
}
|
|
|
|
if (logsState.error) {
|
|
el.logsStatusChip.classList.add("bad");
|
|
el.logsStatusChip.textContent = `Refresh failed: ${logsState.error}`;
|
|
return;
|
|
}
|
|
|
|
if (!logsState.auto) {
|
|
el.logsStatusChip.textContent = "Live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (document.hidden) {
|
|
el.logsStatusChip.classList.add("warn");
|
|
el.logsStatusChip.textContent = "Tab hidden, live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (!logsState.updatedAt) {
|
|
el.logsStatusChip.textContent = "Waiting for first refresh...";
|
|
return;
|
|
}
|
|
|
|
const seconds = Math.max(0, Math.ceil((logsState.updatedAt + logsState.interval - Date.now()) / 1000));
|
|
el.logsStatusChip.classList.add("ok");
|
|
el.logsStatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
|
|
}
|
|
|
|
function renderSecretsStatus() {
|
|
el.secretsStatusChip.className = "status";
|
|
|
|
if (secretsState.loading) {
|
|
el.secretsStatusChip.classList.add("warn");
|
|
el.secretsStatusChip.textContent = "Refreshing secrets...";
|
|
return;
|
|
}
|
|
|
|
if (secretsState.error) {
|
|
el.secretsStatusChip.classList.add("bad");
|
|
el.secretsStatusChip.textContent = `Refresh failed: ${secretsState.error}`;
|
|
return;
|
|
}
|
|
|
|
if (!secretsState.auto) {
|
|
el.secretsStatusChip.textContent = "Live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (document.hidden) {
|
|
el.secretsStatusChip.classList.add("warn");
|
|
el.secretsStatusChip.textContent = "Tab hidden, live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (!secretsState.updatedAt) {
|
|
el.secretsStatusChip.textContent = "Waiting for first refresh...";
|
|
return;
|
|
}
|
|
|
|
const seconds = Math.max(0, Math.ceil((secretsState.updatedAt + secretsState.interval - Date.now()) / 1000));
|
|
el.secretsStatusChip.classList.add("ok");
|
|
el.secretsStatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
|
|
}
|
|
|
|
function renderS3Status() {
|
|
el.s3StatusChip.className = "status";
|
|
|
|
if (s3State.loading) {
|
|
el.s3StatusChip.classList.add("warn");
|
|
el.s3StatusChip.textContent = "Refreshing objects...";
|
|
return;
|
|
}
|
|
|
|
if (s3State.error) {
|
|
el.s3StatusChip.classList.add("bad");
|
|
el.s3StatusChip.textContent = `Refresh failed: ${s3State.error}`;
|
|
return;
|
|
}
|
|
|
|
if (!s3State.auto) {
|
|
el.s3StatusChip.textContent = "Live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (document.hidden) {
|
|
el.s3StatusChip.classList.add("warn");
|
|
el.s3StatusChip.textContent = "Tab hidden, live refresh paused";
|
|
return;
|
|
}
|
|
|
|
if (!s3State.updatedAt) {
|
|
el.s3StatusChip.textContent = "Waiting for first refresh...";
|
|
return;
|
|
}
|
|
|
|
const seconds = Math.max(0, Math.ceil((s3State.updatedAt + s3State.interval - Date.now()) / 1000));
|
|
el.s3StatusChip.classList.add("ok");
|
|
el.s3StatusChip.textContent = `Live refresh on, next check in ${seconds}s`;
|
|
}
|
|
|
|
function renderLiveClock() {
|
|
if (!state.updatedAt) {
|
|
el.updatedStat.textContent = "Not refreshed yet";
|
|
return;
|
|
}
|
|
|
|
el.updatedStat.textContent = `Updated ${formatRelative(state.updatedAt)} via ${state.source}`;
|
|
renderStatus();
|
|
}
|
|
|
|
function renderLogsLiveClock() {
|
|
if (!logsState.updatedAt) {
|
|
el.logsUpdatedStat.textContent = "Not refreshed yet";
|
|
return;
|
|
}
|
|
|
|
el.logsUpdatedStat.textContent = `Updated ${formatRelative(logsState.updatedAt)} via ${logsState.source}`;
|
|
renderLogsStatus();
|
|
}
|
|
|
|
function renderSecretsLiveClock() {
|
|
if (!secretsState.updatedAt) {
|
|
el.secretsUpdatedStat.textContent = "Not refreshed yet";
|
|
return;
|
|
}
|
|
|
|
el.secretsUpdatedStat.textContent = `Updated ${formatRelative(secretsState.updatedAt)} via ${secretsState.source}`;
|
|
renderSecretsStatus();
|
|
}
|
|
|
|
function renderS3LiveClock() {
|
|
if (!s3State.updatedAt) {
|
|
el.s3UpdatedStat.textContent = "Not refreshed yet";
|
|
return;
|
|
}
|
|
|
|
el.s3UpdatedStat.textContent = `Updated ${formatRelative(s3State.updatedAt)} via ${s3State.source}`;
|
|
renderS3Status();
|
|
}
|
|
|
|
function renderList() {
|
|
el.banner.hidden = !state.error;
|
|
el.banner.textContent = state.error ? `Refresh failed: ${state.error}` : "";
|
|
|
|
if (!state.filtered.length) {
|
|
el.list.innerHTML = "";
|
|
el.empty.hidden = false;
|
|
el.empty.textContent = state.messages.length
|
|
? "No messages match the current search."
|
|
: "No emails yet. Send one through LocalStack SES and refresh.";
|
|
updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
el.empty.hidden = true;
|
|
el.list.innerHTML = state.filtered.map(renderCard).join("");
|
|
bindCardToggles();
|
|
syncCardExpansion();
|
|
updatePaneTopButtonVisibility(el.emailsContentPane, el.scrollToTopButton);
|
|
}
|
|
|
|
function renderLogsList() {
|
|
el.logsBanner.hidden = !logsState.error;
|
|
el.logsBanner.textContent = logsState.error ? `Refresh failed: ${logsState.error}` : "";
|
|
|
|
if (!logsState.group && !logsState.groups.length) {
|
|
el.logsList.innerHTML = "";
|
|
el.logsEmpty.hidden = false;
|
|
el.logsEmpty.textContent = "No CloudWatch log groups found in LocalStack yet.";
|
|
updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
if (!logsState.filtered.length) {
|
|
el.logsList.innerHTML = "";
|
|
el.logsEmpty.hidden = false;
|
|
el.logsEmpty.textContent = logsState.events.length
|
|
? "No log events match the current search."
|
|
: "No log events found for the selected group, stream, and time window.";
|
|
updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
el.logsEmpty.hidden = true;
|
|
el.logsList.innerHTML = logsState.filtered.map((event) => renderLogEvent(event)).join("");
|
|
bindLogToggles();
|
|
updatePaneTopButtonVisibility(el.logsContentPane, el.logsScrollToTopButton);
|
|
}
|
|
|
|
function renderSecretsList() {
|
|
el.secretsBanner.hidden = !secretsState.error;
|
|
el.secretsBanner.textContent = secretsState.error ? `Refresh failed: ${secretsState.error}` : "";
|
|
|
|
if (!secretsState.filtered.length) {
|
|
el.secretsList.innerHTML = "";
|
|
el.secretsEmpty.hidden = false;
|
|
el.secretsEmpty.textContent = secretsState.items.length
|
|
? "No secrets match the current search."
|
|
: "No Secrets Manager entries found in LocalStack yet.";
|
|
updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
el.secretsEmpty.hidden = true;
|
|
el.secretsList.innerHTML = secretsState.filtered.map((secret) => renderSecretCard(secret)).join("");
|
|
bindSecretToggles();
|
|
syncSecretExpansion();
|
|
updatePaneTopButtonVisibility(el.secretsContentPane, el.secretsScrollToTopButton);
|
|
}
|
|
|
|
function renderS3List() {
|
|
el.s3Banner.hidden = !s3State.error;
|
|
el.s3Banner.textContent = s3State.error ? `Refresh failed: ${s3State.error}` : "";
|
|
|
|
if (!s3State.bucket && !s3State.buckets.length) {
|
|
el.s3List.innerHTML = "";
|
|
el.s3Empty.hidden = false;
|
|
el.s3Empty.textContent = "No S3 buckets found in LocalStack yet.";
|
|
updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
if (!s3State.filtered.length) {
|
|
el.s3List.innerHTML = "";
|
|
el.s3Empty.hidden = false;
|
|
el.s3Empty.textContent = s3State.objects.length
|
|
? "No S3 objects match the current search."
|
|
: "No S3 objects found for the selected bucket and prefix.";
|
|
updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
|
|
return;
|
|
}
|
|
|
|
el.s3Empty.hidden = true;
|
|
el.s3List.innerHTML = s3State.filtered.map((object) => renderS3ObjectCard(object)).join("");
|
|
bindS3Toggles();
|
|
syncS3Expansion();
|
|
updatePaneTopButtonVisibility(el.s3ContentPane, el.s3ScrollToTopButton);
|
|
}
|
|
|
|
function renderLogEvent(event) {
|
|
const level = detectLogLevel(event);
|
|
const levelTag = level ? `<span class="tag ${level.className}">${escapeHtml(level.label)}</span>` : "";
|
|
|
|
return `
|
|
<details class="logEvent" data-id="${escapeHtml(event.id)}" ${logsState.openIds.has(event.id) ? "open" : ""}>
|
|
<summary class="logSummary">
|
|
<div class="logSummaryTop">
|
|
<div class="logMeta">
|
|
<span class="time">${escapeHtml(formatDateTime(event.timestamp))}</span>
|
|
<span class="tag logTag" title="${escapeHtml(event.logStreamName || "Unknown stream")}">${escapeHtml(event.logStreamName || "Unknown stream")}</span>
|
|
${levelTag}
|
|
</div>
|
|
<div class="logSummaryActions">
|
|
<button class="mini logCopyButton" type="button" data-log-action="copy" data-id="${escapeHtml(event.id)}">📋 Copy JSON</button>
|
|
<span class="tag">${escapeHtml(formatRelative(event.timestamp || Date.now()))}</span>
|
|
</div>
|
|
</div>
|
|
<p class="logPreview jsonSyntax">${renderLogPreviewContent(event)}</p>
|
|
</summary>
|
|
<div class="logBody ${logsState.wrapLines ? "" : "wrapOff"}">
|
|
<pre class="jsonSyntax">${renderLogBodyContent(event.message)}</pre>
|
|
</div>
|
|
</details>
|
|
`;
|
|
}
|
|
|
|
function renderSecretCard(secret) {
|
|
const valueState = secretsState.values[secret.id];
|
|
const tags = [];
|
|
|
|
if (secret.owningService) {
|
|
tags.push(`<span class="tag secretTag">${escapeHtml(secret.owningService)}</span>`);
|
|
}
|
|
|
|
if (secret.primaryRegion) {
|
|
tags.push(`<span class="tag secretTag">${escapeHtml(secret.primaryRegion)}</span>`);
|
|
}
|
|
|
|
if (secret.rotationEnabled) {
|
|
tags.push('<span class="tag secretTag">Rotation on</span>');
|
|
} else {
|
|
tags.push('<span class="tag">Rotation off</span>');
|
|
}
|
|
|
|
if (secret.tagCount) {
|
|
tags.push(`<span class="tag secretTag">${secret.tagCount} tag${secret.tagCount === 1 ? "" : "s"}</span>`);
|
|
}
|
|
|
|
if (valueState?.status === "loaded") {
|
|
tags.push(`<span class="tag secretTag">${escapeHtml(valueState.label)}</span>`);
|
|
}
|
|
|
|
if (valueState?.status === "error") {
|
|
tags.push('<span class="tag bad">Value load failed</span>');
|
|
}
|
|
|
|
return `
|
|
<details class="card secretCard" data-id="${escapeHtml(secret.id)}">
|
|
<summary class="summary secretSummary">
|
|
<div class="top">
|
|
<div class="head">
|
|
<h2>🔐 ${escapeHtml(secret.name)}</h2>
|
|
<p class="meta">${escapeHtml(secret.description || secret.arn || "No description")}</p>
|
|
</div>
|
|
<span class="time">${escapeHtml(formatDateTime(secret.lastChangedDate || secret.createdDate))}</span>
|
|
</div>
|
|
<div class="tags">${tags.join("")}</div>
|
|
<p class="preview">${escapeHtml(buildSecretPreview(secret))}</p>
|
|
</summary>
|
|
<div class="body secretBody">
|
|
<dl class="grid">
|
|
${metaCard("Name", secret.name)}
|
|
${metaCard("ARN", secret.arn || "Not available")}
|
|
${metaCard("Description", secret.description || "None")}
|
|
${metaCard("Last changed", formatDateTime(secret.lastChangedDate || secret.createdDate))}
|
|
${metaCard("Created", formatDateTime(secret.createdDate))}
|
|
${metaCard("Last accessed", formatDateTime(secret.lastAccessedDate))}
|
|
${metaCard("Primary region", secret.primaryRegion || "Not set")}
|
|
${metaCard("Owning service", secret.owningService || "Not set")}
|
|
</dl>
|
|
|
|
<div class="secretValuePanel">
|
|
${renderSecretValuePanel(secret, valueState)}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
`;
|
|
}
|
|
|
|
function renderS3ObjectCard(object) {
|
|
const previewState = s3State.previews[object.id];
|
|
const tags = [
|
|
`<span class="tag bucketTag">${escapeHtml(object.bucket)}</span>`,
|
|
`<span class="tag bucketTag">${escapeHtml(formatBytes(object.size))}</span>`
|
|
];
|
|
|
|
if (object.storageClass) {
|
|
tags.push(`<span class="tag bucketTag">${escapeHtml(object.storageClass)}</span>`);
|
|
}
|
|
|
|
if (previewState?.status === "loaded") {
|
|
tags.push(`<span class="tag bucketTag">${escapeHtml(previewState.previewType)}</span>`);
|
|
}
|
|
|
|
if (previewState?.status === "error") {
|
|
tags.push('<span class="tag bad">Preview failed</span>');
|
|
}
|
|
|
|
return `
|
|
<details class="card s3Card" data-id="${escapeHtml(object.id)}">
|
|
<summary class="summary s3Summary">
|
|
<div class="top">
|
|
<div class="head">
|
|
<h2>🪣 ${escapeHtml(object.key)}</h2>
|
|
<p class="meta">${escapeHtml(object.bucket)} • ${escapeHtml(formatBytes(object.size))}</p>
|
|
</div>
|
|
<span class="time">${escapeHtml(formatDateTime(object.lastModified))}</span>
|
|
</div>
|
|
<div class="tags">${tags.join("")}</div>
|
|
<p class="preview">${escapeHtml(buildS3Preview(object))}</p>
|
|
</summary>
|
|
<div class="body s3Body">
|
|
<div class="toolbar">
|
|
<div class="actions">
|
|
<button class="mini" type="button" data-s3-action="copy-key" data-id="${escapeHtml(object.id)}">📋 Copy key</button>
|
|
<button class="mini" type="button" data-s3-action="copy-uri" data-id="${escapeHtml(object.id)}">🔗 Copy URI</button>
|
|
<a class="mini attachmentLink" href="/api/s3/download?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}">⬇️ Download</a>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="grid">
|
|
${metaCard("Bucket", object.bucket)}
|
|
${metaCard("Key", object.key)}
|
|
${metaCard("Size", formatBytes(object.size))}
|
|
${metaCard("Modified", formatDateTime(object.lastModified))}
|
|
${metaCard("Storage class", object.storageClass || "STANDARD")}
|
|
${metaCard("ETag", object.etag || "Not available")}
|
|
</dl>
|
|
|
|
<div class="s3PreviewPanel">${renderS3PreviewPanel(object, previewState)}</div>
|
|
</div>
|
|
</details>
|
|
`;
|
|
}
|
|
|
|
function bindLogToggles() {
|
|
el.logsList.querySelectorAll(".logEvent").forEach((details) => {
|
|
details.addEventListener("toggle", () => {
|
|
const id = details.dataset.id;
|
|
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
if (details.open) {
|
|
logsState.openIds.add(id);
|
|
} else {
|
|
logsState.openIds.delete(id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function bindSecretToggles() {
|
|
el.secretsList.querySelectorAll(".secretCard").forEach((details) => {
|
|
details.addEventListener("toggle", () => {
|
|
const id = details.dataset.id;
|
|
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
if (details.open) {
|
|
secretsState.openIds.add(id);
|
|
ensureSecretValue(id, { force: false });
|
|
} else {
|
|
secretsState.openIds.delete(id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function bindS3Toggles() {
|
|
el.s3List.querySelectorAll(".s3Card").forEach((details) => {
|
|
details.addEventListener("toggle", () => {
|
|
const id = details.dataset.id;
|
|
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
if (details.open) {
|
|
s3State.openIds.add(id);
|
|
ensureS3Preview(id, { force: false });
|
|
} else {
|
|
s3State.openIds.delete(id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function bindCardToggles() {
|
|
el.list.querySelectorAll(".card").forEach((details) => {
|
|
details.addEventListener("toggle", () => {
|
|
const id = details.dataset.id;
|
|
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
if (details.open) {
|
|
state.openIds.add(id);
|
|
} else {
|
|
state.openIds.delete(id);
|
|
}
|
|
|
|
hydrate(details, getMessage(id));
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderCard(message) {
|
|
const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");
|
|
const tags = [];
|
|
|
|
if (state.newIds.has(message.id)) {
|
|
tags.push('<span class="tag new">New</span>');
|
|
}
|
|
|
|
if (message.attachmentCount) {
|
|
tags.push(
|
|
`<span class="tag">${message.attachmentCount} attachment${message.attachmentCount === 1 ? "" : "s"}</span>`
|
|
);
|
|
}
|
|
|
|
tags.push(`<span class="tag">${message.hasHtml ? "HTML" : "Text only"}</span>`);
|
|
|
|
if (message.parseError) {
|
|
tags.push('<span class="tag bad">Parse issue</span>');
|
|
}
|
|
|
|
return `
|
|
<details class="card ${state.newIds.has(message.id) ? "new" : ""}" data-id="${escapeHtml(message.id)}">
|
|
<summary class="summary">
|
|
<div class="top">
|
|
<div class="head">
|
|
<h2>${escapeHtml(message.subject)}</h2>
|
|
<p class="meta">${escapeHtml(message.from)} to ${escapeHtml(message.to)}</p>
|
|
</div>
|
|
<span class="time">${escapeHtml(formatDateTime(message.timestamp))}</span>
|
|
</div>
|
|
<div class="tags">${tags.join("")}</div>
|
|
<p class="preview">${escapeHtml(message.preview)}</p>
|
|
</summary>
|
|
<div class="body">
|
|
<div class="toolbar">
|
|
<div class="tabs">
|
|
${
|
|
message.hasHtml
|
|
? `<button class="tab ${view === "rendered" ? "active" : ""}" type="button" data-action="view" data-view="rendered" data-id="${escapeHtml(message.id)}">Rendered</button>`
|
|
: ""
|
|
}
|
|
<button class="tab ${view === "text" ? "active" : ""}" type="button" data-action="view" data-view="text" data-id="${escapeHtml(message.id)}">Text</button>
|
|
<button class="tab ${view === "raw" ? "active" : ""}" type="button" data-action="view" data-view="raw" data-id="${escapeHtml(message.id)}">Raw</button>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="mini" type="button" data-action="copy-raw" data-id="${escapeHtml(message.id)}">📋 Copy raw</button>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="grid">
|
|
${metaCard("From", message.from)}
|
|
${metaCard("To", message.to)}
|
|
${metaCard("Reply-To", message.replyTo || "None")}
|
|
${metaCard("Sent", formatDateTime(message.timestamp))}
|
|
${metaCard("Region", message.region || "Unknown region")}
|
|
${metaCard("LocalStack Id", message.id)}
|
|
${metaCard("Message-Id", message.messageId || "Not available")}
|
|
${metaCard("Raw size", formatBytes(message.rawSizeBytes))}
|
|
${message.parseError ? metaCard("Parse error", message.parseError) : ""}
|
|
</dl>
|
|
|
|
${
|
|
message.attachments?.length
|
|
? `<div class="attachments">${message.attachments
|
|
.map((attachment) => {
|
|
const size = attachment.size ? `, ${formatBytes(attachment.size)}` : "";
|
|
const icon = resolveAttachmentIcon(attachment);
|
|
return `<a class="attachment attachmentLink" href="/api/messages/${encodeURIComponent(message.id)}/attachments/${attachment.index}" download="${escapeHtml(attachment.filename)}" title="Download ${escapeHtml(attachment.filename)}">${icon} ${escapeHtml(attachment.filename)} (${escapeHtml(attachment.contentType)}${escapeHtml(size)})</a>`;
|
|
})
|
|
.join("")}</div>`
|
|
: ""
|
|
}
|
|
|
|
<div class="panel">${renderPanel(message, view)}</div>
|
|
</div>
|
|
</details>
|
|
`;
|
|
}
|
|
|
|
function renderPanel(message, view) {
|
|
if (view === "rendered" && message.hasHtml) {
|
|
return `<iframe title="${escapeHtml(message.subject)}" data-frame sandbox="" referrerpolicy="no-referrer"></iframe>`;
|
|
}
|
|
|
|
if (view === "raw") {
|
|
const raw = state.raw[message.id];
|
|
|
|
if (!raw) {
|
|
return `<div class="placeholder">Raw MIME source is loaded on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-action="load-raw" data-id="${escapeHtml(message.id)}">Load raw source</button></div></div>`;
|
|
}
|
|
|
|
if (raw.status === "loading") {
|
|
return '<div class="placeholder">Loading raw source...</div>';
|
|
}
|
|
|
|
if (raw.status === "error") {
|
|
return `<div class="inlineError">Unable to load raw source: ${escapeHtml(raw.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-action="load-raw" data-id="${escapeHtml(message.id)}">Retry</button></div></div>`;
|
|
}
|
|
|
|
return `<pre>${escapeHtml(raw.value)}</pre>`;
|
|
}
|
|
|
|
return `<pre>${escapeHtml(message.textContent || "No plain-text content available for this message.")}</pre>`;
|
|
}
|
|
|
|
function renderSecretValuePanel(secret, valueState) {
|
|
if (!valueState) {
|
|
return `<div class="placeholder">Secret values are loaded on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-secret-action="load-value" data-id="${escapeHtml(secret.id)}">Load value</button></div></div>`;
|
|
}
|
|
|
|
if (valueState.status === "loading") {
|
|
return '<div class="placeholder">Loading secret value...</div>';
|
|
}
|
|
|
|
if (valueState.status === "error") {
|
|
return `<div class="inlineError">Unable to load secret value: ${escapeHtml(valueState.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-secret-action="reload-value" data-id="${escapeHtml(secret.id)}">Retry</button></div></div>`;
|
|
}
|
|
|
|
const revealed = secretsState.revealedIds.has(secret.id);
|
|
const maskedHtml = escapeHtml(maskSecretValue(valueState.copyValue));
|
|
|
|
return `
|
|
<div class="toolbar">
|
|
<div class="tags">
|
|
<span class="tag secretTag">${escapeHtml(valueState.label)}</span>
|
|
${
|
|
valueState.versionId
|
|
? `<span class="tag secretTag">Version ${escapeHtml(valueState.versionId.slice(0, 8))}</span>`
|
|
: ""
|
|
}
|
|
${
|
|
valueState.versionStages.length
|
|
? `<span class="tag secretTag">${escapeHtml(valueState.versionStages.join(", "))}</span>`
|
|
: ""
|
|
}
|
|
</div>
|
|
<div class="actions">
|
|
<button class="mini" type="button" data-secret-action="toggle-reveal" data-id="${escapeHtml(secret.id)}">${revealed ? "🙈 Hide" : "👁️ Reveal"}</button>
|
|
<button class="mini" type="button" data-secret-action="copy-value" data-id="${escapeHtml(secret.id)}">📋 Copy value</button>
|
|
<button class="mini" type="button" data-secret-action="copy-env" data-id="${escapeHtml(secret.id)}">🧪 Copy env</button>
|
|
<button class="mini" type="button" data-secret-action="copy-name" data-id="${escapeHtml(secret.id)}">🏷️ Copy name</button>
|
|
<button class="mini" type="button" data-secret-action="copy-arn" data-id="${escapeHtml(secret.id)}">🔗 Copy ARN</button>
|
|
<button class="mini" type="button" data-secret-action="reload-value" data-id="${escapeHtml(secret.id)}">🔄 Reload</button>
|
|
</div>
|
|
</div>
|
|
<pre class="${revealed && valueState.isJson ? "jsonSyntax" : ""}">${revealed ? valueState.displayHtml : maskedHtml}</pre>
|
|
`;
|
|
}
|
|
|
|
function renderS3PreviewPanel(object, previewState) {
|
|
if (!previewState) {
|
|
return `<div class="placeholder">Object previews load on demand.<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-s3-action="load-preview" data-id="${escapeHtml(object.id)}">Load preview</button></div></div>`;
|
|
}
|
|
|
|
if (previewState.status === "loading") {
|
|
return '<div class="placeholder">Loading object preview...</div>';
|
|
}
|
|
|
|
if (previewState.status === "error") {
|
|
return `<div class="inlineError">Unable to load object preview: ${escapeHtml(previewState.error)}<div class="actions" style="margin-top:12px"><button class="mini" type="button" data-s3-action="reload-preview" data-id="${escapeHtml(object.id)}">Retry</button></div></div>`;
|
|
}
|
|
|
|
const truncatedTag = previewState.truncated ? '<span class="tag bucketTag">Preview truncated</span>' : "";
|
|
let previewContent = `<pre>No inline preview available for this object type.</pre>`;
|
|
|
|
if (previewState.previewType === "image" && previewState.imageDataUrl) {
|
|
previewContent = `<img class="s3PreviewImage" alt="${escapeHtml(object.key)}" src="${previewState.imageDataUrl}">`;
|
|
} else if (previewState.previewType === "json") {
|
|
previewContent = `<pre class="jsonSyntax">${highlightJsonText(prettyJsonOrText(previewState.previewText))}</pre>`;
|
|
} else if (previewState.previewType === "text" || previewState.previewType === "html") {
|
|
previewContent = `<pre>${escapeHtml(previewState.previewText || "No preview text available.")}</pre>`;
|
|
}
|
|
|
|
return `
|
|
<div class="toolbar">
|
|
<div class="tags">
|
|
<span class="tag bucketTag">${escapeHtml(previewState.previewType)}</span>
|
|
${truncatedTag}
|
|
${previewState.contentType ? `<span class="tag bucketTag">${escapeHtml(previewState.contentType)}</span>` : ""}
|
|
</div>
|
|
<div class="actions">
|
|
<button class="mini" type="button" data-s3-action="reload-preview" data-id="${escapeHtml(object.id)}">🔄 Reload</button>
|
|
<a class="mini attachmentLink" href="/api/s3/download?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}">⬇️ Download</a>
|
|
</div>
|
|
</div>
|
|
${previewContent}
|
|
`;
|
|
}
|
|
|
|
function metaCard(label, value) {
|
|
return `<div class="metaCard"><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`;
|
|
}
|
|
|
|
function syncCardExpansion() {
|
|
const applyCardState = () => {
|
|
el.list.querySelectorAll(".card").forEach((details) => {
|
|
const id = details.dataset.id;
|
|
const shouldOpen = Boolean(id && state.openIds.has(id));
|
|
|
|
if (shouldOpen && !details.open) {
|
|
details.open = true;
|
|
}
|
|
|
|
if (!shouldOpen && details.open) {
|
|
details.open = false;
|
|
return;
|
|
}
|
|
|
|
if (shouldOpen) {
|
|
hydrate(details, getMessage(id));
|
|
}
|
|
});
|
|
};
|
|
|
|
applyCardState();
|
|
window.requestAnimationFrame(applyCardState);
|
|
}
|
|
|
|
function syncSecretExpansion() {
|
|
const applySecretState = () => {
|
|
el.secretsList.querySelectorAll(".secretCard").forEach((details) => {
|
|
const id = details.dataset.id;
|
|
const shouldOpen = Boolean(id && secretsState.openIds.has(id));
|
|
|
|
if (shouldOpen && !details.open) {
|
|
details.open = true;
|
|
}
|
|
|
|
if (!shouldOpen && details.open) {
|
|
details.open = false;
|
|
return;
|
|
}
|
|
|
|
if (shouldOpen) {
|
|
ensureSecretValue(id, { force: false });
|
|
}
|
|
});
|
|
};
|
|
|
|
applySecretState();
|
|
window.requestAnimationFrame(applySecretState);
|
|
}
|
|
|
|
function syncS3Expansion() {
|
|
const applyS3State = () => {
|
|
el.s3List.querySelectorAll(".s3Card").forEach((details) => {
|
|
const id = details.dataset.id;
|
|
const shouldOpen = Boolean(id && s3State.openIds.has(id));
|
|
|
|
if (shouldOpen && !details.open) {
|
|
details.open = true;
|
|
}
|
|
|
|
if (!shouldOpen && details.open) {
|
|
details.open = false;
|
|
return;
|
|
}
|
|
|
|
if (shouldOpen) {
|
|
ensureS3Preview(id, { force: false });
|
|
}
|
|
});
|
|
};
|
|
|
|
applyS3State();
|
|
window.requestAnimationFrame(applyS3State);
|
|
}
|
|
|
|
function resolveAttachmentIcon(attachment) {
|
|
const filename = String(attachment?.filename || "").toLowerCase();
|
|
const contentType = String(attachment?.contentType || "").toLowerCase();
|
|
|
|
if (filename.endsWith(".pdf") || contentType.includes("pdf")) {
|
|
return "📄";
|
|
}
|
|
|
|
if (
|
|
[".doc", ".docx", ".txt", ".rtf", ".md"].some((extension) => filename.endsWith(extension)) ||
|
|
contentType.includes("word") ||
|
|
contentType.startsWith("text/")
|
|
) {
|
|
return "📝";
|
|
}
|
|
|
|
if (
|
|
[".xls", ".xlsx", ".csv"].some((extension) => filename.endsWith(extension)) ||
|
|
contentType.includes("sheet") ||
|
|
contentType.includes("csv")
|
|
) {
|
|
return "📊";
|
|
}
|
|
|
|
if (
|
|
filename.endsWith(".json") ||
|
|
filename.endsWith(".xml") ||
|
|
filename.endsWith(".yaml") ||
|
|
filename.endsWith(".yml")
|
|
) {
|
|
return "🧾";
|
|
}
|
|
|
|
if (contentType.startsWith("image/")) {
|
|
return "🖼️";
|
|
}
|
|
|
|
if (contentType.startsWith("audio/")) {
|
|
return "🎵";
|
|
}
|
|
|
|
if (contentType.startsWith("video/")) {
|
|
return "🎬";
|
|
}
|
|
|
|
if (
|
|
[".zip", ".rar", ".7z", ".tar", ".gz"].some((extension) => filename.endsWith(extension)) ||
|
|
contentType.includes("zip") ||
|
|
contentType.includes("compressed")
|
|
) {
|
|
return "🗜️";
|
|
}
|
|
|
|
return "📎";
|
|
}
|
|
|
|
function hydrate(details, message) {
|
|
if (!details || !details.open || !message) {
|
|
return;
|
|
}
|
|
|
|
const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");
|
|
|
|
if (view !== "rendered" || !message.hasHtml) {
|
|
return;
|
|
}
|
|
|
|
const iframe = details.querySelector("[data-frame]");
|
|
|
|
if (iframe) {
|
|
iframe.referrerPolicy = "no-referrer";
|
|
iframe.sandbox = "";
|
|
iframe.srcdoc = message.renderedHtml || "";
|
|
}
|
|
}
|
|
|
|
function getMessage(id) {
|
|
return state.messages.find((message) => message.id === id);
|
|
}
|
|
|
|
function getLogEvent(id) {
|
|
return logsState.events.find((event) => event.id === id);
|
|
}
|
|
|
|
function getSecret(id) {
|
|
return secretsState.items.find((secret) => secret.id === id);
|
|
}
|
|
|
|
function getS3Object(id) {
|
|
return s3State.objects.find((object) => object.id === id);
|
|
}
|
|
|
|
async function loadRaw(id) {
|
|
if (state.raw[id]?.status === "loaded") {
|
|
return state.raw[id].value;
|
|
}
|
|
|
|
if (state.raw[id]?.status === "loading") {
|
|
return null;
|
|
}
|
|
|
|
state.raw[id] = { status: "loading" };
|
|
renderList();
|
|
|
|
try {
|
|
const response = await fetch(`/api/messages/${encodeURIComponent(id)}/raw`, { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
throw new Error((await response.text()) || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const value = await response.text();
|
|
state.raw[id] = { status: "loaded", value };
|
|
return value;
|
|
} catch (error) {
|
|
state.raw[id] = { status: "error", error: error.message || "Unknown raw load error" };
|
|
setStatus("Could not load the raw message source.", "bad");
|
|
return null;
|
|
} finally {
|
|
renderList();
|
|
}
|
|
}
|
|
|
|
async function ensureSecretValue(id, options = {}) {
|
|
const { force = false } = options;
|
|
|
|
if (!id) {
|
|
return null;
|
|
}
|
|
|
|
if (!force && secretsState.values[id]?.status === "loaded") {
|
|
return secretsState.values[id];
|
|
}
|
|
|
|
if (secretsState.values[id]?.status === "loading") {
|
|
return null;
|
|
}
|
|
|
|
secretsState.values[id] = { status: "loading" };
|
|
renderSecretsAll();
|
|
|
|
try {
|
|
const response = await fetch(`/api/secrets/value?id=${encodeURIComponent(id)}`, { cache: "no-store" });
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const secretString = typeof payload.secretString === "string" ? payload.secretString : "";
|
|
const secretBinary = typeof payload.secretBinary === "string" ? payload.secretBinary : "";
|
|
const parsedString = secretString ? tryParseJsonText(secretString) : { ok: false, value: null };
|
|
const entry = {
|
|
status: "loaded",
|
|
label: secretBinary ? "Binary" : parsedString.ok ? "JSON" : secretString ? "Text" : "Empty",
|
|
copyValue: secretBinary
|
|
? secretBinary
|
|
: parsedString.ok
|
|
? JSON.stringify(parsedString.value, null, 2)
|
|
: secretString || "No secret value.",
|
|
displayHtml: secretBinary
|
|
? escapeHtml(secretBinary)
|
|
: parsedString.ok
|
|
? highlightJsonText(JSON.stringify(parsedString.value, null, 2))
|
|
: escapeHtml(secretString || "No secret value."),
|
|
isJson: parsedString.ok,
|
|
isBinary: Boolean(secretBinary),
|
|
versionId: payload.versionId || "",
|
|
versionStages: Array.isArray(payload.versionStages) ? payload.versionStages : [],
|
|
createdDate: payload.createdDate || "",
|
|
arn: payload.arn || "",
|
|
name: payload.name || ""
|
|
};
|
|
|
|
secretsState.values[id] = entry;
|
|
return entry;
|
|
} catch (error) {
|
|
secretsState.values[id] = {
|
|
status: "error",
|
|
error: error.message || "Unknown secret value error"
|
|
};
|
|
setSecretsStatus("Could not load the secret value.", "bad");
|
|
return null;
|
|
} finally {
|
|
renderSecretsAll();
|
|
}
|
|
}
|
|
|
|
async function ensureS3Preview(id, options = {}) {
|
|
const { force = false } = options;
|
|
|
|
if (!id) {
|
|
return null;
|
|
}
|
|
|
|
if (!force && s3State.previews[id]?.status === "loaded") {
|
|
return s3State.previews[id];
|
|
}
|
|
|
|
if (s3State.previews[id]?.status === "loading") {
|
|
return null;
|
|
}
|
|
|
|
const object = getS3Object(id);
|
|
|
|
if (!object) {
|
|
return null;
|
|
}
|
|
|
|
s3State.previews[id] = { status: "loading" };
|
|
renderS3All();
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`/api/s3/object?bucket=${encodeURIComponent(object.bucket)}&key=${encodeURIComponent(object.key)}`,
|
|
{ cache: "no-store" }
|
|
);
|
|
|
|
if (!response.ok) {
|
|
const payload = await safeJson(response);
|
|
throw new Error(payload?.details || payload?.error || `Request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const entry = {
|
|
status: "loaded",
|
|
previewType: payload.previewType || "binary",
|
|
previewText: payload.previewText || "",
|
|
imageDataUrl: payload.imageDataUrl || "",
|
|
contentType: payload.contentType || "",
|
|
contentLength: payload.contentLength || 0,
|
|
truncated: Boolean(payload.truncated),
|
|
metadata: payload.metadata || {}
|
|
};
|
|
|
|
s3State.previews[id] = entry;
|
|
return entry;
|
|
} catch (error) {
|
|
s3State.previews[id] = {
|
|
status: "error",
|
|
error: error.message || "Unknown S3 preview error"
|
|
};
|
|
setS3Status("Could not load the S3 object preview.", "bad");
|
|
return null;
|
|
} finally {
|
|
renderS3All();
|
|
}
|
|
}
|
|
|
|
async function copyText(value) {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
} catch {
|
|
const input = document.createElement("textarea");
|
|
input.value = value;
|
|
input.setAttribute("readonly", "");
|
|
input.style.position = "fixed";
|
|
input.style.opacity = "0";
|
|
document.body.appendChild(input);
|
|
input.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(input);
|
|
}
|
|
}
|
|
|
|
function setStatus(message, tone) {
|
|
el.statusChip.className = "status";
|
|
|
|
if (tone) {
|
|
el.statusChip.classList.add(tone);
|
|
}
|
|
|
|
el.statusChip.textContent = message;
|
|
}
|
|
|
|
function setLogsStatus(message, tone) {
|
|
el.logsStatusChip.className = "status";
|
|
|
|
if (tone) {
|
|
el.logsStatusChip.classList.add(tone);
|
|
}
|
|
|
|
el.logsStatusChip.textContent = message;
|
|
}
|
|
|
|
function setSecretsStatus(message, tone) {
|
|
el.secretsStatusChip.className = "status";
|
|
|
|
if (tone) {
|
|
el.secretsStatusChip.classList.add(tone);
|
|
}
|
|
|
|
el.secretsStatusChip.textContent = message;
|
|
}
|
|
|
|
function setS3Status(message, tone) {
|
|
el.s3StatusChip.className = "status";
|
|
|
|
if (tone) {
|
|
el.s3StatusChip.classList.add(tone);
|
|
}
|
|
|
|
el.s3StatusChip.textContent = message;
|
|
}
|
|
|
|
function getInitialPanel() {
|
|
const storedPanel = readStoredValue(PANEL_STORAGE_KEY);
|
|
return ["emails", "logs", "secrets", "s3"].includes(storedPanel) ? storedPanel : "emails";
|
|
}
|
|
|
|
function getInitialTheme() {
|
|
const storedTheme = readStoredValue(THEME_STORAGE_KEY);
|
|
|
|
if (storedTheme === "dark" || storedTheme === "light") {
|
|
return storedTheme;
|
|
}
|
|
|
|
return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
const nextTheme = theme === "dark" ? "dark" : "light";
|
|
appState.theme = nextTheme;
|
|
document.body.dataset.theme = nextTheme;
|
|
|
|
try {
|
|
window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
|
|
} catch {}
|
|
|
|
renderThemeToggle();
|
|
}
|
|
|
|
function renderThemeToggle() {
|
|
if (!el.themeToggle) {
|
|
return;
|
|
}
|
|
|
|
const isDark = appState.theme === "dark";
|
|
el.themeToggle.textContent = isDark ? "🌙 Dark theme" : "☀️ Light theme";
|
|
el.themeToggle.setAttribute("aria-pressed", isDark ? "true" : "false");
|
|
el.themeToggle.setAttribute("aria-label", isDark ? "Switch to light theme" : "Switch to dark theme");
|
|
el.themeToggle.title = isDark ? "Switch to light theme" : "Switch to dark theme";
|
|
}
|
|
|
|
function persistPanel() {
|
|
writeStoredValue(PANEL_STORAGE_KEY, appState.panel);
|
|
}
|
|
|
|
function persistEmailPreferences() {
|
|
writeStoredJson(EMAIL_PREFERENCES_STORAGE_KEY, {
|
|
search: state.search,
|
|
auto: state.auto,
|
|
interval: state.interval
|
|
});
|
|
}
|
|
|
|
function persistLogPreferences() {
|
|
writeStoredJson(LOG_PREFERENCES_STORAGE_KEY, {
|
|
group: logsState.group,
|
|
stream: logsState.stream,
|
|
search: logsState.search,
|
|
auto: logsState.auto,
|
|
interval: logsState.interval,
|
|
windowMs: logsState.windowMs,
|
|
limit: logsState.limit,
|
|
wrapLines: logsState.wrapLines,
|
|
tailNewest: logsState.tailNewest
|
|
});
|
|
}
|
|
|
|
function persistSecretPreferences() {
|
|
writeStoredJson(SECRET_PREFERENCES_STORAGE_KEY, {
|
|
search: secretsState.search,
|
|
auto: secretsState.auto,
|
|
interval: secretsState.interval
|
|
});
|
|
}
|
|
|
|
function persistS3Preferences() {
|
|
writeStoredJson(S3_PREFERENCES_STORAGE_KEY, {
|
|
bucket: s3State.bucket,
|
|
prefix: s3State.prefix,
|
|
search: s3State.search,
|
|
auto: s3State.auto,
|
|
interval: s3State.interval
|
|
});
|
|
}
|
|
|
|
function resetSavedState() {
|
|
[
|
|
THEME_STORAGE_KEY,
|
|
PANEL_STORAGE_KEY,
|
|
EMAIL_PREFERENCES_STORAGE_KEY,
|
|
LOG_PREFERENCES_STORAGE_KEY,
|
|
SECRET_PREFERENCES_STORAGE_KEY,
|
|
S3_PREFERENCES_STORAGE_KEY
|
|
].forEach((key) => {
|
|
try {
|
|
window.localStorage.removeItem(key);
|
|
} catch {}
|
|
});
|
|
|
|
window.location.reload();
|
|
}
|
|
|
|
function getStoredPreferences(key) {
|
|
try {
|
|
const rawValue = window.localStorage.getItem(key);
|
|
|
|
if (!rawValue) {
|
|
return null;
|
|
}
|
|
|
|
const parsedValue = JSON.parse(rawValue);
|
|
return parsedValue && typeof parsedValue === "object" && !Array.isArray(parsedValue) ? parsedValue : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function readStoredValue(key) {
|
|
try {
|
|
return window.localStorage.getItem(key);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function writeStoredValue(key, value) {
|
|
try {
|
|
window.localStorage.setItem(key, String(value));
|
|
} catch {}
|
|
}
|
|
|
|
function writeStoredJson(key, value) {
|
|
try {
|
|
window.localStorage.setItem(key, JSON.stringify(value));
|
|
} catch {}
|
|
}
|
|
|
|
function getStoredText(value, fallback = "") {
|
|
return typeof value === "string" ? value : fallback;
|
|
}
|
|
|
|
function getStoredBoolean(value, fallback) {
|
|
return typeof value === "boolean" ? value : fallback;
|
|
}
|
|
|
|
function getStoredNumber(value, allowedValues, fallback) {
|
|
const normalizedValue = Number(value);
|
|
return Number.isFinite(normalizedValue) && allowedValues.includes(normalizedValue) ? normalizedValue : fallback;
|
|
}
|
|
|
|
function scrollPaneToTop(element) {
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
element.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
|
|
function updatePaneTopButtonVisibility(pane, button) {
|
|
if (!pane || !button) {
|
|
return;
|
|
}
|
|
|
|
button.classList.toggle("visible", pane.scrollTop > 140);
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) {
|
|
return "Unknown time";
|
|
}
|
|
|
|
const date = new Date(value);
|
|
return Number.isNaN(date.getTime())
|
|
? "Unknown time"
|
|
: new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
|
|
}
|
|
|
|
function formatRelative(timestampMs) {
|
|
const seconds = Math.max(1, Math.round((Date.now() - timestampMs) / 1000));
|
|
|
|
if (seconds < 60) {
|
|
return `${seconds}s ago`;
|
|
}
|
|
|
|
const minutes = Math.round(seconds / 60);
|
|
|
|
if (minutes < 60) {
|
|
return `${minutes}m ago`;
|
|
}
|
|
|
|
const hours = Math.round(minutes / 60);
|
|
|
|
if (hours < 24) {
|
|
return `${hours}h ago`;
|
|
}
|
|
|
|
return `${Math.round(hours / 24)}d ago`;
|
|
}
|
|
|
|
function formatBytes(value) {
|
|
if (!value) {
|
|
return "0 B";
|
|
}
|
|
|
|
const units = ["B", "KB", "MB", "GB"];
|
|
let size = value;
|
|
let index = 0;
|
|
|
|
while (size >= 1024 && index < units.length - 1) {
|
|
size /= 1024;
|
|
index += 1;
|
|
}
|
|
|
|
return `${index === 0 ? size : size.toFixed(1)} ${units[index]}`;
|
|
}
|
|
|
|
function formatLogMessage(message) {
|
|
const value = String(message || "").trim();
|
|
|
|
if (!value) {
|
|
return "No log payload.";
|
|
}
|
|
|
|
try {
|
|
return JSON.stringify(JSON.parse(value), null, 2);
|
|
} catch {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function buildSecretPreview(secret) {
|
|
const fragments = [];
|
|
|
|
if (secret.description) {
|
|
fragments.push(secret.description);
|
|
}
|
|
|
|
if (secret.owningService) {
|
|
fragments.push(`Service: ${secret.owningService}`);
|
|
}
|
|
|
|
if (secret.primaryRegion) {
|
|
fragments.push(`Region: ${secret.primaryRegion}`);
|
|
}
|
|
|
|
if (secret.tagCount) {
|
|
fragments.push(`${secret.tagCount} tag${secret.tagCount === 1 ? "" : "s"}`);
|
|
}
|
|
|
|
if (!fragments.length) {
|
|
fragments.push("No description or tags yet.");
|
|
}
|
|
|
|
return fragments.join(" • ");
|
|
}
|
|
|
|
function toggleSecretReveal(id) {
|
|
if (secretsState.revealedIds.has(id)) {
|
|
secretsState.revealedIds.delete(id);
|
|
} else {
|
|
secretsState.revealedIds.add(id);
|
|
}
|
|
|
|
renderSecretsAll();
|
|
}
|
|
|
|
function maskSecretValue(value) {
|
|
const source = String(value || "");
|
|
|
|
if (!source) {
|
|
return "Secret is loaded but empty.";
|
|
}
|
|
|
|
const lines = source.split("\n");
|
|
return lines.map((line) => "•".repeat(Math.max(12, Math.min(line.length || 0, 48)))).join("\n");
|
|
}
|
|
|
|
function buildS3Preview(object) {
|
|
const fragments = [];
|
|
|
|
if (object.storageClass) {
|
|
fragments.push(object.storageClass);
|
|
}
|
|
|
|
fragments.push(formatBytes(object.size));
|
|
|
|
if (object.etag) {
|
|
fragments.push(`ETag ${object.etag.slice(0, 12)}`);
|
|
}
|
|
|
|
return fragments.join(" • ");
|
|
}
|
|
|
|
function prettyJsonOrText(value) {
|
|
const parsed = tryParseJsonText(value);
|
|
return parsed.ok ? JSON.stringify(parsed.value, null, 2) : String(value || "");
|
|
}
|
|
|
|
function detectLogLevel(event) {
|
|
const parsed = tryParseJsonText(event?.message);
|
|
const candidates = parsed.ok
|
|
? [parsed.value?.level, parsed.value?.severity, parsed.value?.logLevel, parsed.value?.status, parsed.value?.lvl]
|
|
: [String(event?.message || "").match(/\b(error|warn|warning|info|debug|trace|fatal)\b/i)?.[0] || ""];
|
|
const normalized = String(candidates.find(Boolean) || "").toLowerCase();
|
|
|
|
if (["fatal", "error", "critical"].includes(normalized)) {
|
|
return { label: normalized.toUpperCase(), className: "levelError" };
|
|
}
|
|
|
|
if (["warn", "warning"].includes(normalized)) {
|
|
return { label: "WARN", className: "levelWarn" };
|
|
}
|
|
|
|
if (["info", "notice"].includes(normalized)) {
|
|
return { label: normalized.toUpperCase(), className: "levelInfo" };
|
|
}
|
|
|
|
if (["debug", "trace"].includes(normalized)) {
|
|
return { label: normalized.toUpperCase(), className: "levelDebug" };
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function renderLogPreviewContent(event) {
|
|
const parsedLog = tryParseJsonText(event?.message);
|
|
|
|
if (!parsedLog.ok) {
|
|
return escapeHtml(event?.preview || "No preview available.");
|
|
}
|
|
|
|
const compactJson = JSON.stringify(parsedLog.value);
|
|
const previewText = compactJson.length > 220 ? `${compactJson.slice(0, 217)}...` : compactJson;
|
|
return highlightJsonText(previewText);
|
|
}
|
|
|
|
function renderLogBodyContent(message) {
|
|
const parsedLog = tryParseJsonText(message);
|
|
|
|
if (!parsedLog.ok) {
|
|
return escapeHtml(formatLogMessage(message));
|
|
}
|
|
|
|
return highlightJsonText(JSON.stringify(parsedLog.value, null, 2));
|
|
}
|
|
|
|
function tryParseJsonText(message) {
|
|
const value = String(message || "").trim();
|
|
|
|
if (!value) {
|
|
return { ok: false, value: null };
|
|
}
|
|
|
|
try {
|
|
return { ok: true, value: JSON.parse(value) };
|
|
} catch {
|
|
return { ok: false, value: null };
|
|
}
|
|
}
|
|
|
|
function highlightJsonText(value) {
|
|
const source = String(value ?? "");
|
|
const tokenRegex =
|
|
/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)/g;
|
|
let html = "";
|
|
let lastIndex = 0;
|
|
|
|
for (const match of source.matchAll(tokenRegex)) {
|
|
const [token] = match;
|
|
const index = match.index ?? 0;
|
|
let className = "jsonNumber";
|
|
|
|
html += escapeHtml(source.slice(lastIndex, index));
|
|
|
|
if (token.endsWith(":")) {
|
|
className = "jsonKey";
|
|
} else if (token === "true" || token === "false") {
|
|
className = "jsonBoolean";
|
|
} else if (token === "null") {
|
|
className = "jsonNull";
|
|
} else if (token.startsWith('"')) {
|
|
className = "jsonString";
|
|
}
|
|
|
|
html += `<span class="${className}">${escapeHtml(token)}</span>`;
|
|
lastIndex = index + token.length;
|
|
}
|
|
|
|
html += escapeHtml(source.slice(lastIndex));
|
|
return html;
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value ?? "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
async function safeJson(response) {
|
|
try {
|
|
return await response.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
}
|