v0.3.15-pre.006
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!-- file: crates/ksp-app-raw-transaction-ingest-desk/frontend/main.html -->
|
||||
<!-- version: 2 -->
|
||||
<!-- version: 3 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
@@ -21,7 +21,10 @@
|
||||
<span class="mx-2 fs-5 text-body-secondary" aria-hidden="true">—</span>
|
||||
<span id="headerViewTitle" class="fs-5 text-body text-nowrap">Routes</span>
|
||||
</div>
|
||||
<span id="headerPhase" class="badge text-bg-secondary ms-auto">scaffold</span>
|
||||
<div class="d-flex align-items-center gap-2 ms-auto">
|
||||
<span id="headerProfile" class="badge text-bg-light border text-dark">—</span>
|
||||
<span id="headerPhase" class="badge text-bg-secondary">inventory</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -48,29 +51,38 @@
|
||||
<div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">Routes live</h1>
|
||||
<p class="text-body-secondary mb-0">Fondation statique V1 ; la composabilité Config sera matérialisée en pre.006.</p>
|
||||
<p class="text-body-secondary mb-0">Inventaire déterministe depuis Config, sans probe réseau ni démarrage de Worker.</p>
|
||||
</div>
|
||||
<button id="refreshRouteFoundation" class="btn btn-outline-primary btn-sm" type="button">
|
||||
<button id="refreshRouteInventory" class="btn btn-outline-primary btn-sm" type="button">
|
||||
<i class="fa-solid fa-rotate me-2" aria-hidden="true"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-info" role="status">
|
||||
Aucun Worker n'est démarré par ce scaffold. Les cinq IDs ci-dessous ne constituent aucune preuve de disponibilité runtime.
|
||||
</div>
|
||||
<div id="routeFoundation" class="row g-3 app-route-grid" aria-live="polite"></div>
|
||||
<div class="card shadow-sm mt-4">
|
||||
<div class="card-header fw-semibold">États réservés</div>
|
||||
<div class="card-body">
|
||||
<div id="routeStates" class="d-flex flex-wrap gap-2"></div>
|
||||
<div class="row g-3 align-items-end mb-4">
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label" for="routeProfile">Profil applicatif</label>
|
||||
<select id="routeProfile" class="form-select" aria-label="Profil Raw Transaction Ingest Desk"></select>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="small text-body-secondary">Réseau</div>
|
||||
<div id="routeNetwork" class="fw-semibold app-route-code">—</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="small text-body-secondary">Génération</div>
|
||||
<div id="routeInventoryGeneration" class="fw-semibold app-route-code">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info" role="status">
|
||||
<strong>Configured</strong> signifie uniquement que Config prouve la composabilité. Les connexions, le Store et le Worker seront revalidés au Start dans les tranches suivantes.
|
||||
</div>
|
||||
<div class="small text-body-secondary mb-3">Profil affiché : <span id="routeSelectedProfile" class="app-route-code">—</span></div>
|
||||
<div id="routeFoundation" class="row g-3 app-route-grid" aria-live="polite"></div>
|
||||
</section>
|
||||
|
||||
<section data-view-panel="diagnostics" hidden>
|
||||
<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 et desktop.</p>
|
||||
<p class="text-body-secondary mb-0">État sûr du shell Config, Logging et de la génération d'inventaire.</p>
|
||||
</div>
|
||||
<button id="refreshRuntimeStatus" class="btn btn-outline-primary btn-sm" type="button">
|
||||
<i class="fa-solid fa-rotate me-2" aria-hidden="true"></i>Refresh
|
||||
@@ -83,9 +95,11 @@
|
||||
<dt class="col-sm-5">Version</dt><dd id="runtimeVersion" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Phase</dt><dd id="runtimeShellPhase" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Documents Config</dt><dd id="runtimeConfigDocuments" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Profil composite</dt><dd id="runtimeCompositeProfile" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Profil composite bootstrap</dt><dd id="runtimeCompositeProfile" 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">Inventaire default</dt><dd id="runtimeInventoryDefaultProfile" class="col-sm-7">—</dd>
|
||||
<dt class="col-sm-5">Génération inventaire</dt><dd id="runtimeInventoryGeneration" 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>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
// file: crates/ksp-app-raw-transaction-ingest-desk/frontend/ts/main.ts
|
||||
// version: 2
|
||||
// version: 3
|
||||
|
||||
import "bootstrap";
|
||||
import ResizeObserver from "resize-observer-polyfill";
|
||||
import "simplebar";
|
||||
import type { ShellStatusDto } from "./bindings/ksp_app_raw_transaction_ingest_desk/dto_common/ShellStatusDto.ts";
|
||||
import type { RawIngestRouteFoundationDto } from "./bindings/ksp_app_raw_transaction_ingest_desk/dto_route/RawIngestRouteFoundationDto.ts";
|
||||
import type { RawIngestRouteInventoryDto } from "./bindings/ksp_app_raw_transaction_ingest_desk/dto_route/RawIngestRouteInventoryDto.ts";
|
||||
import { frontendDebug, frontendInfo, frontendTrace, frontendWarn, installFrontendConsoleBridge } from "./frontend_log";
|
||||
import { invokeKsp } from "./invoke";
|
||||
|
||||
@@ -19,6 +19,9 @@ const viewTitles: Record<ViewId, string> = {
|
||||
diagnostics: "Diagnostics",
|
||||
};
|
||||
|
||||
let routeInventory: RawIngestRouteInventoryDto | null = null;
|
||||
let selectedProfileId: string | null = null;
|
||||
|
||||
function isViewId(value: string | undefined): value is ViewId {
|
||||
return value === "routes" || value === "diagnostics";
|
||||
}
|
||||
@@ -75,22 +78,40 @@ function bindNavigation(): void {
|
||||
});
|
||||
}
|
||||
|
||||
function routeLabel(routeId: string): string {
|
||||
function reasonLabel(reason: string | null): string {
|
||||
const labels: Record<string, string> = {
|
||||
"yellowstone-hydrated": "Yellowstone + HTTP hydration",
|
||||
"standard-logs-hydrated": "Standard Logs + HTTP hydration",
|
||||
"standard-block-direct": "Standard Block direct",
|
||||
"helius-transaction-hydrated": "Helius Transaction + HTTP hydration",
|
||||
"http-block-polling": "HTTP Block Polling",
|
||||
profile_unresolved: "profil Config non résolu",
|
||||
network_mismatch: "réseau Transport/Store incohérent",
|
||||
missing_http_get_transaction: "HTTP getTransaction indisponible",
|
||||
missing_http_block_scan: "HTTP block scan incomplet",
|
||||
missing_ws_logs_capability: "capability WS Logs absente",
|
||||
missing_ws_block_capability: "capability WS Block absente",
|
||||
missing_helius_transaction_capability: "capability Helius Transaction absente",
|
||||
missing_yellowstone_grpc: "Yellowstone gRPC absent",
|
||||
missing_required_secret: "secret Config requis non résolu",
|
||||
};
|
||||
return labels[routeId] ?? routeId;
|
||||
if (reason === null) {
|
||||
return "composable depuis Config";
|
||||
}
|
||||
return labels[reason] ?? reason;
|
||||
}
|
||||
|
||||
function renderRouteFoundation(foundation: RawIngestRouteFoundationDto): void {
|
||||
function renderSelectedProfile(): void {
|
||||
if (routeInventory === null) {
|
||||
return;
|
||||
}
|
||||
const profile = routeInventory.profiles.find(candidate => candidate.profileId === selectedProfileId) ?? routeInventory.profiles[0];
|
||||
if (!profile) {
|
||||
return;
|
||||
}
|
||||
selectedProfileId = profile.profileId;
|
||||
text("#routeNetwork", profile.network ?? "non résolu");
|
||||
text("#routeSelectedProfile", profile.profileId);
|
||||
text("#headerProfile", profile.profileId);
|
||||
const routeRoot = document.querySelector<HTMLElement>("#routeFoundation");
|
||||
if (routeRoot) {
|
||||
routeRoot.replaceChildren();
|
||||
for (const routeId of foundation.routeIds) {
|
||||
for (const route of profile.routes) {
|
||||
const column = document.createElement("div");
|
||||
column.className = "col-12 col-xl-6 app-route-column";
|
||||
const card = document.createElement("div");
|
||||
@@ -99,32 +120,58 @@ function renderRouteFoundation(foundation: RawIngestRouteFoundationDto): void {
|
||||
body.className = "card-body";
|
||||
const title = document.createElement("h2");
|
||||
title.className = "h6 mb-2";
|
||||
title.textContent = routeLabel(routeId);
|
||||
title.textContent = route.label;
|
||||
const code = document.createElement("div");
|
||||
code.className = "app-route-code text-body-secondary small";
|
||||
code.textContent = routeId;
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "badge text-bg-secondary mt-3";
|
||||
badge.textContent = "foundation only";
|
||||
body.append(title, code, badge);
|
||||
code.textContent = route.routeId;
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "d-flex flex-wrap gap-2 mt-3 app-route-meta";
|
||||
const state = document.createElement("span");
|
||||
state.className = route.selectable ? "badge text-bg-success" : "badge text-bg-secondary";
|
||||
state.textContent = route.state;
|
||||
const network = document.createElement("span");
|
||||
network.className = "badge text-bg-light border text-dark";
|
||||
network.textContent = route.network ?? "network unresolved";
|
||||
const reason = document.createElement("span");
|
||||
reason.className = route.selectable ? "badge text-bg-light border text-dark" : "badge text-bg-warning";
|
||||
reason.textContent = reasonLabel(route.reason);
|
||||
meta.append(state, network, reason);
|
||||
body.append(title, code, meta);
|
||||
card.append(body);
|
||||
column.append(card);
|
||||
routeRoot.append(column);
|
||||
}
|
||||
}
|
||||
const statesRoot = document.querySelector<HTMLElement>("#routeStates");
|
||||
if (statesRoot) {
|
||||
statesRoot.replaceChildren();
|
||||
for (const state of foundation.states) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "badge text-bg-light border text-dark";
|
||||
badge.textContent = state;
|
||||
statesRoot.append(badge);
|
||||
frontendTrace("main", "Raw Transaction Ingest Desk Config route inventory profile rendered", {
|
||||
profileId: profile.profileId,
|
||||
routeCount: profile.routes.length,
|
||||
selectableCount: profile.routes.filter(route => route.selectable).length,
|
||||
});
|
||||
}
|
||||
|
||||
function renderRouteInventory(inventory: RawIngestRouteInventoryDto): void {
|
||||
routeInventory = inventory;
|
||||
const requestedProfile = selectedProfileId;
|
||||
const selectedStillExists = requestedProfile !== null && inventory.profiles.some(profile => profile.profileId === requestedProfile);
|
||||
selectedProfileId = selectedStillExists ? requestedProfile : inventory.defaultProfile;
|
||||
const selector = document.querySelector<HTMLSelectElement>("#routeProfile");
|
||||
if (selector) {
|
||||
selector.replaceChildren();
|
||||
for (const profile of inventory.profiles) {
|
||||
const option = document.createElement("option");
|
||||
option.value = profile.profileId;
|
||||
option.textContent = profile.isDefault ? `${profile.profileId} (default)` : profile.profileId;
|
||||
option.selected = profile.profileId === selectedProfileId;
|
||||
selector.append(option);
|
||||
}
|
||||
}
|
||||
frontendTrace("main", "Raw Transaction Ingest Desk route foundation rendered", {
|
||||
routeCount: foundation.routeIds.length,
|
||||
stateCount: foundation.states.length,
|
||||
text("#routeInventoryGeneration", inventory.generation.toString());
|
||||
text("#runtimeInventoryGeneration", inventory.generation.toString());
|
||||
text("#runtimeInventoryDefaultProfile", inventory.defaultProfile);
|
||||
renderSelectedProfile();
|
||||
frontendTrace("main", "Raw Transaction Ingest Desk Config route inventory rendered", {
|
||||
generation: inventory.generation,
|
||||
profileCount: inventory.profiles.length,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -154,10 +201,10 @@ function renderRuntimeStatus(status: ShellStatusDto): void {
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshRouteFoundation(): Promise<void> {
|
||||
frontendDebug("main", "Raw Transaction Ingest Desk route foundation refresh requested");
|
||||
const foundation = await invokeKsp<RawIngestRouteFoundationDto>("main", "get_route_foundation");
|
||||
renderRouteFoundation(foundation);
|
||||
async function refreshRouteInventory(): Promise<void> {
|
||||
frontendDebug("main", "Raw Transaction Ingest Desk Config route inventory refresh requested");
|
||||
const inventory = await invokeKsp<RawIngestRouteInventoryDto>("main", "get_route_inventory");
|
||||
renderRouteInventory(inventory);
|
||||
}
|
||||
|
||||
async function refreshRuntimeStatus(): Promise<void> {
|
||||
@@ -167,12 +214,21 @@ async function refreshRuntimeStatus(): Promise<void> {
|
||||
}
|
||||
|
||||
function bindRefreshControls(): void {
|
||||
document.querySelector<HTMLButtonElement>("#refreshRouteFoundation")?.addEventListener("click", () => {
|
||||
void refreshRouteFoundation().catch(() => frontendWarn("main", "Raw Transaction Ingest Desk route foundation refresh failed"));
|
||||
document.querySelector<HTMLButtonElement>("#refreshRouteInventory")?.addEventListener("click", () => {
|
||||
void refreshRouteInventory().catch(() => frontendWarn("main", "Raw Transaction Ingest Desk Config route inventory refresh failed"));
|
||||
});
|
||||
document.querySelector<HTMLButtonElement>("#refreshRuntimeStatus")?.addEventListener("click", () => {
|
||||
void refreshRuntimeStatus().catch(() => frontendWarn("main", "Raw Transaction Ingest Desk runtime status refresh failed"));
|
||||
});
|
||||
document.querySelector<HTMLSelectElement>("#routeProfile")?.addEventListener("change", event => {
|
||||
const selector = event.currentTarget;
|
||||
if (!(selector instanceof HTMLSelectElement)) {
|
||||
return;
|
||||
}
|
||||
selectedProfileId = selector.value;
|
||||
frontendDebug("main", "Raw Transaction Ingest Desk logical profile selected", { profileId: selectedProfileId });
|
||||
renderSelectedProfile();
|
||||
});
|
||||
}
|
||||
|
||||
async function initializeMain(): Promise<void> {
|
||||
@@ -181,9 +237,9 @@ async function initializeMain(): Promise<void> {
|
||||
bindNavigation();
|
||||
bindRefreshControls();
|
||||
activateView("routes", "startup");
|
||||
await refreshRouteFoundation();
|
||||
await refreshRouteInventory();
|
||||
await refreshRuntimeStatus();
|
||||
frontendInfo("main", "Raw Transaction Ingest Desk scaffold frontend ready");
|
||||
frontendInfo("main", "Raw Transaction Ingest Desk Config inventory frontend ready");
|
||||
}
|
||||
|
||||
void initializeMain().catch(() => frontendWarn("main", "Raw Transaction Ingest Desk frontend initialization failed"));
|
||||
|
||||
Reference in New Issue
Block a user