v0.3.8-pre.006
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!-- file: crates/ksp-app-store-desk/frontend/main.html -->
|
||||
<!-- version: 1 -->
|
||||
<!-- version: 2 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
@@ -54,22 +54,29 @@
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">Overview</h1>
|
||||
<p class="text-body-secondary mb-0">Scaffold read-only. Le lifecycle Store et les diagnostics backend-neutral seront branchés dans une tranche ultérieure.</p>
|
||||
<p class="text-body-secondary mb-0">État backend-neutral du Store sélectionné par le composite Config. Aucune donnée RAW complète n'est chargée ici.</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span id="appVersionBadge" class="badge text-bg-secondary">—</span>
|
||||
<button id="refreshOverview" class="btn btn-outline-primary" type="button">
|
||||
<i class="fa-solid fa-arrows-rotate me-1" aria-hidden="true"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<span id="appVersionBadge" class="badge text-bg-secondary">—</span>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Store target</span><div class="fw-semibold mt-2">Non ouvert</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Health</span><div class="fw-semibold mt-2">À venir</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Transactions</span><div class="fw-semibold mt-2">Table skeleton</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Accounts</span><div class="fw-semibold mt-2">Table skeleton</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Store profile</span><div id="overviewStoreProfile" class="fw-semibold mt-2">—</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Target</span><div id="overviewStoreTarget" class="fw-semibold mt-2">—</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Health</span><div id="overviewStoreHealth" class="fw-semibold mt-2">—</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Pool</span><div id="overviewStorePool" class="fw-semibold mt-2">—</div></div></div></div>
|
||||
<div class="col-md-6 col-xl-3"><div class="card h-100 shadow-sm"><div class="card-body"><span class="text-body-secondary small">Migration</span><div id="overviewStoreMigration" class="fw-semibold mt-2">—</div></div></div></div>
|
||||
</div>
|
||||
<div id="overviewStoreDiagnostic" class="alert alert-warning mt-3 mb-0" role="status" aria-live="polite" hidden></div>
|
||||
</section>
|
||||
|
||||
<section data-view-panel="transactions" hidden>
|
||||
<div class="mb-4">
|
||||
<h1 class="h3 mb-1">RAW Transactions</h1>
|
||||
<p class="text-body-secondary mb-0">Structure DataTables uniquement. Aucune capability Store n'est encore invoquée.</p>
|
||||
<p class="text-body-secondary mb-0">Structure DataTables conservée hors connexion métier jusqu'à pre.007. Le runtime Store est ouvert par le composite.</p>
|
||||
</div>
|
||||
<div class="table-responsive app-store-table-container">
|
||||
<table id="rawTransactionsTable" class="table table-hover align-middle mb-0 app-store-table">
|
||||
@@ -83,7 +90,7 @@
|
||||
<section data-view-panel="accounts" hidden>
|
||||
<div class="mb-4">
|
||||
<h1 class="h3 mb-1">RAW Accounts</h1>
|
||||
<p class="text-body-secondary mb-0">Structure DataTables uniquement. Aucune donnée Account ni bytes ne traversent IPC dans ce scaffold.</p>
|
||||
<p class="text-body-secondary mb-0">Structure DataTables conservée hors connexion métier jusqu'à pre.008. Aucun byte Account ne traverse IPC dans cette tranche.</p>
|
||||
</div>
|
||||
<div class="table-responsive app-store-table-container">
|
||||
<table id="rawAccountsTable" class="table table-hover align-middle mb-0 app-store-table">
|
||||
@@ -98,7 +105,7 @@
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">Diagnostics</h1>
|
||||
<p class="text-body-secondary mb-0">État sûr du scaffold Config / Logging. Aucun diagnostic physique Store n'est disponible à cette tranche.</p>
|
||||
<p class="text-body-secondary mb-0">État sûr Config / Logging / Store. Les URI et détails physiques sensibles restent hors IPC.</p>
|
||||
</div>
|
||||
<button id="refreshDiagnostics" class="btn btn-outline-primary" type="button">
|
||||
<i class="fa-solid fa-arrows-rotate me-1" aria-hidden="true"></i>Refresh
|
||||
@@ -113,9 +120,14 @@
|
||||
<dt class="col-sm-5">Documents Config</dt><dd id="runtimeConfigDocuments" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Profil Logging</dt><dd id="runtimeLoggingProfile" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Fallback Logging</dt><dd id="runtimeLoggingFallback" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Store runtime</dt><dd class="col-sm-7">Non ouvert en pre.002</dd>
|
||||
<dt class="col-sm-5">Store profile</dt><dd id="runtimeStoreProfile" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Store target</dt><dd id="runtimeStoreTarget" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Store health</dt><dd id="runtimeStoreHealth" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Migration</dt><dd id="runtimeStoreMigration" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Pool</dt><dd id="runtimeStorePool" class="col-sm-7">—</dd>
|
||||
</dl>
|
||||
<div id="runtimeDiagnostic" class="alert alert-warning mt-3 mb-0" role="status" aria-live="polite" hidden></div>
|
||||
<div id="runtimeStoreDiagnostic" class="alert alert-warning mt-3 mb-0" role="status" aria-live="polite" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// file: crates/ksp-app-store-desk/frontend/ts/main.ts
|
||||
// version: 2
|
||||
// version: 3
|
||||
|
||||
import DataTable from "datatables.net-bs5";
|
||||
import "datatables.net-bs5/css/dataTables.bootstrap5.css";
|
||||
@@ -7,6 +7,7 @@ import "bootstrap";
|
||||
import ResizeObserver from "resize-observer-polyfill";
|
||||
import "simplebar";
|
||||
import type { ShellStatusDto } from "./bindings/ksp_app_store_desk/dto_common/ShellStatusDto.ts";
|
||||
import type { StoreRuntimeStatusDto } from "./bindings/ksp_app_store_desk/dto_common/StoreRuntimeStatusDto.ts";
|
||||
import { frontendDebug, frontendError, frontendInfo, frontendTrace, installFrontendConsoleBridge } from "./frontend_log";
|
||||
import { invokeKsp } from "./invoke";
|
||||
|
||||
@@ -33,6 +34,22 @@ function isViewId(value: string | undefined): value is ViewId {
|
||||
return value === "overview" || value === "transactions" || value === "accounts" || value === "diagnostics";
|
||||
}
|
||||
|
||||
function setText(elementId: string, value: string): void {
|
||||
const element = document.querySelector<HTMLElement>(`#${elementId}`);
|
||||
if (element) {
|
||||
element.textContent = value;
|
||||
}
|
||||
}
|
||||
|
||||
function renderDiagnostic(elementId: string, diagnostic: { domain: string; code: string; message: string } | null): void {
|
||||
const element = document.querySelector<HTMLElement>(`#${elementId}`);
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.hidden = diagnostic === null;
|
||||
element.textContent = diagnostic ? `${diagnostic.domain}/${diagnostic.code}: ${diagnostic.message}` : "";
|
||||
}
|
||||
|
||||
function activateView(viewId: ViewId): void {
|
||||
document.querySelectorAll<HTMLElement>("[data-view-panel]").forEach(panel => {
|
||||
panel.hidden = panel.dataset.viewPanel !== viewId;
|
||||
@@ -67,7 +84,7 @@ function initializeEmptyTables(): void {
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
language: {
|
||||
emptyTable: "Aucune donnée Store n'est chargée dans le scaffold pre.002.",
|
||||
emptyTable: "Aucune donnée RAW n'est chargée dans la tranche pre.006.",
|
||||
},
|
||||
};
|
||||
transactionTable = new DataTable("#rawTransactionsTable", commonOptions) as unknown as EmptyDataTable;
|
||||
@@ -76,39 +93,65 @@ function initializeEmptyTables(): void {
|
||||
}
|
||||
|
||||
function renderShellStatus(status: ShellStatusDto): void {
|
||||
const versionBadge = document.querySelector<HTMLElement>("#appVersionBadge");
|
||||
if (versionBadge) {
|
||||
versionBadge.textContent = status.applicationVersion;
|
||||
}
|
||||
const values: Record<string, string> = {
|
||||
runtimeVersion: status.applicationVersion,
|
||||
runtimeShellPhase: status.shellPhase,
|
||||
runtimeConfigDocuments: status.configDocumentCount.toString(),
|
||||
runtimeLoggingProfile: status.activeLoggingProfile ?? "fallback",
|
||||
runtimeLoggingFallback: status.fallbackLoggingActive ? "oui" : "non",
|
||||
};
|
||||
for (const [elementId, value] of Object.entries(values)) {
|
||||
const element = document.querySelector<HTMLElement>(`#${elementId}`);
|
||||
if (element) {
|
||||
element.textContent = value;
|
||||
}
|
||||
}
|
||||
const diagnostic = document.querySelector<HTMLElement>("#runtimeDiagnostic");
|
||||
if (diagnostic) {
|
||||
diagnostic.hidden = status.startupDiagnostic === null;
|
||||
diagnostic.textContent = status.startupDiagnostic ? `${status.startupDiagnostic.domain}/${status.startupDiagnostic.code}: ${status.startupDiagnostic.message}` : "";
|
||||
}
|
||||
setText("appVersionBadge", status.applicationVersion);
|
||||
setText("runtimeVersion", status.applicationVersion);
|
||||
setText("runtimeShellPhase", status.shellPhase);
|
||||
setText("runtimeConfigDocuments", status.configDocumentCount.toString());
|
||||
setText("runtimeLoggingProfile", status.activeLoggingProfile ?? "fallback");
|
||||
setText("runtimeLoggingFallback", status.fallbackLoggingActive ? "oui" : "non");
|
||||
renderDiagnostic("runtimeDiagnostic", status.startupDiagnostic);
|
||||
frontendTrace("main", "Store Desk shell status rendered", {
|
||||
fallbackLoggingActive: status.fallbackLoggingActive,
|
||||
shellPhase: status.shellPhase,
|
||||
});
|
||||
}
|
||||
|
||||
function renderStoreRuntimeStatus(status: StoreRuntimeStatusDto): void {
|
||||
const target = status.backendKind && status.network ? `${status.backendKind} / ${status.network}` : status.network ?? status.backendKind ?? "indisponible";
|
||||
const migration = status.migrationVersionDecimal === null ? `inconnue · ${status.pendingMigrationCount} pending` : `v${status.migrationVersionDecimal} · ${status.pendingMigrationCount} pending`;
|
||||
const pool = `${status.poolAvailable}/${status.poolSize}/${status.poolCapacity} · wait ${status.poolWaiting}`;
|
||||
const profile = status.profileId ?? "indisponible";
|
||||
|
||||
setText("overviewStoreProfile", profile);
|
||||
setText("overviewStoreTarget", target);
|
||||
setText("overviewStoreHealth", status.healthState);
|
||||
setText("overviewStorePool", pool);
|
||||
setText("overviewStoreMigration", migration);
|
||||
renderDiagnostic("overviewStoreDiagnostic", status.diagnostic);
|
||||
|
||||
setText("runtimeStoreProfile", profile);
|
||||
setText("runtimeStoreTarget", target);
|
||||
setText("runtimeStoreHealth", status.healthState);
|
||||
setText("runtimeStoreMigration", migration);
|
||||
setText("runtimeStorePool", pool);
|
||||
renderDiagnostic("runtimeStoreDiagnostic", status.diagnostic);
|
||||
|
||||
frontendTrace("main", "Store Desk Store runtime status rendered", {
|
||||
healthState: status.healthState,
|
||||
pendingMigrationCount: status.pendingMigrationCount,
|
||||
poolCapacity: status.poolCapacity,
|
||||
poolSize: status.poolSize,
|
||||
storeOpen: status.storeOpen,
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshStoreRuntime(): Promise<void> {
|
||||
frontendDebug("main", "Store Desk Store runtime refresh started");
|
||||
try {
|
||||
const status = await invokeKsp<StoreRuntimeStatusDto>("main", "store_runtime_status");
|
||||
renderStoreRuntimeStatus(status);
|
||||
frontendDebug("main", "Store Desk Store runtime refresh completed", { healthState: status.healthState, storeOpen: status.storeOpen });
|
||||
} catch {
|
||||
frontendError("main", "Store Desk Store runtime refresh failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshDiagnostics(): Promise<void> {
|
||||
frontendDebug("main", "Store Desk diagnostics refresh started");
|
||||
try {
|
||||
const status = await invokeKsp<ShellStatusDto>("main", "get_shell_status");
|
||||
renderShellStatus(status);
|
||||
await refreshStoreRuntime();
|
||||
frontendDebug("main", "Store Desk diagnostics refresh completed");
|
||||
} catch {
|
||||
frontendError("main", "Store Desk diagnostics refresh failed");
|
||||
@@ -125,6 +168,11 @@ function installInteractions(): void {
|
||||
}
|
||||
});
|
||||
});
|
||||
const refreshOverview = document.querySelector<HTMLButtonElement>("#refreshOverview");
|
||||
refreshOverview?.addEventListener("click", () => {
|
||||
frontendDebug("main", "Store Desk Overview refresh button clicked");
|
||||
void refreshStoreRuntime();
|
||||
});
|
||||
const refreshButton = document.querySelector<HTMLButtonElement>("#refreshDiagnostics");
|
||||
refreshButton?.addEventListener("click", () => {
|
||||
frontendDebug("main", "Store Desk diagnostics refresh button clicked");
|
||||
@@ -139,7 +187,7 @@ function installInteractions(): void {
|
||||
if (!control) {
|
||||
return;
|
||||
}
|
||||
if (control instanceof HTMLButtonElement && (control.dataset.view || control.id === "refreshDiagnostics")) {
|
||||
if (control instanceof HTMLButtonElement && (control.dataset.view || control.id === "refreshDiagnostics" || control.id === "refreshOverview")) {
|
||||
return;
|
||||
}
|
||||
const controlId = control.id || control.getAttribute("data-bs-target") || control.getAttribute("aria-controls") || "anonymous";
|
||||
|
||||
Reference in New Issue
Block a user