Files
khadhroony-bot3/kb-app-demo-desktop/frontend/demo_backfill.html
2026-07-26 13:58:14 +02:00

186 lines
16 KiB
HTML

<!-- file: kb-app-demo-desktop/frontend/demo_backfill.html -->
<!-- version: 5 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="icon" href="imgs/favicon.png">
<link rel="stylesheet" href="sass/main.scss">
<title>Khadhroony Bot3 — Backfill HTTP</title>
</head>
<body>
<header class="app-header">
<nav class="navbar navbar-expand-lg h-100 py-0 bg-light text-dark">
<div class="container-fluid px-4 my-0">
<div class="navbar-brand d-flex align-items-center">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Bot3 — <span class="badge text-bg-primary">Backfill HTTP</span></span>
</div>
<div class="ms-auto d-flex align-items-center gap-2">
<span class="badge text-bg-secondary" id="backfillStatusBadge">Initialisation</span>
<button class="btn btn-sm btn-outline-danger" disabled="" id="cancelBackfillButton" type="button">Arrêter</button>
</div>
</div>
</nav>
</header>
<main class="app-main">
<div class="osb-scrollable pt-1 pb-4" data-simplebar>
<div class="container-fluid px-4 py-4">
<div class="row g-4 justify-content-center">
<div class="col-12">
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h1 class="h3 card-title">Backfill transactionnel canonique</h1>
<p class="text-body-secondary mb-0">Les signatures sont découvertes avec <code>getSignaturesForAddress</code>, hydratées avec <code>getTransaction</code>, puis stockées dans les tables canoniques et d'observation. Une seule campagne peut fonctionner à la fois.</p>
</div>
</div>
<div class="accordion shadow-sm" id="backfillAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="sharedSettingsHeading">
<button aria-controls="sharedSettingsCollapse" aria-expanded="true" class="accordion-button" data-bs-target="#sharedSettingsCollapse" data-bs-toggle="collapse" type="button">Paramètres communs</button>
</h2>
<div aria-labelledby="sharedSettingsHeading" class="accordion-collapse collapse show" data-bs-parent="#backfillAccordion" id="sharedSettingsCollapse">
<div class="accordion-body">
<div class="row g-3">
<div class="col-12 col-md-6">
<label class="form-label" for="backfillRoleSelect">Rôle HTTP</label>
<select class="form-select" id="backfillRoleSelect"></select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="backfillCommitmentSelect">Commitment</label>
<select class="form-select" id="backfillCommitmentSelect">
<option value="confirmed">confirmed</option>
<option value="finalized">finalized</option>
</select>
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillPageSizeInput">Taille de page</label>
<input class="form-control" id="backfillPageSizeInput" max="1000" min="1" type="number" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillMaxPagesInput">Pages maximales</label>
<input class="form-control" id="backfillMaxPagesInput" min="1" type="number" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillConcurrencyInput">Concurrence</label>
<input class="form-control" id="backfillConcurrencyInput" min="1" type="number" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="backfillRetriesInput">Retries</label>
<input class="form-control" id="backfillRetriesInput" min="0" type="number" />
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="signatureBackfillHeading">
<button aria-controls="signatureBackfillCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#signatureBackfillCollapse" data-bs-toggle="collapse" type="button">Ensemble de signatures</button>
</h2>
<div aria-labelledby="signatureBackfillHeading" class="accordion-collapse collapse" data-bs-parent="#backfillAccordion" id="signatureBackfillCollapse">
<div class="accordion-body">
<label class="form-label" for="explicitSignaturesTextarea">Signatures, une par ligne</label>
<textarea class="form-control font-monospace mb-3" id="explicitSignaturesTextarea" placeholder="5abc...
4def..." rows="10"></textarea>
<button class="btn btn-primary backfill-start-button" data-backfill-mode="explicit_signatures" type="button">Lancer le backfill</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="programBackfillHeading">
<button aria-controls="programBackfillCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#programBackfillCollapse" data-bs-toggle="collapse" type="button">Programme Solana</button>
</h2>
<div aria-labelledby="programBackfillHeading" class="accordion-collapse collapse" data-bs-parent="#backfillAccordion" id="programBackfillCollapse">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="programAddressInput">Program ID</label><input class="form-control font-monospace" id="programAddressInput" /></div>
<div class="col-12"><label class="form-label" for="programAnchorInput">Signature d'ancrage</label><input class="form-control font-monospace" id="programAnchorInput" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="programDirectionSelect">Direction</label><select class="form-select" id="programDirectionSelect">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="programLimitInput">Nombre de signatures</label><input class="form-control" id="programLimitInput" min="1" type="number" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" data-backfill-mode="program" type="button">Lancer le backfill programme</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="tokenBackfillHeading">
<button aria-controls="tokenBackfillCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#tokenBackfillCollapse" data-bs-toggle="collapse" type="button">Token</button>
</h2>
<div aria-labelledby="tokenBackfillHeading" class="accordion-collapse collapse" data-bs-parent="#backfillAccordion" id="tokenBackfillCollapse">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="tokenAddressInput">Mint du token</label><input class="form-control font-monospace" id="tokenAddressInput" /></div>
<div class="col-12"><label class="form-label" for="tokenAnchorInput">Signature d'ancrage</label><input class="form-control font-monospace" id="tokenAnchorInput" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="tokenDirectionSelect">Direction</label><select class="form-select" id="tokenDirectionSelect">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="tokenLimitInput">Nombre de signatures</label><input class="form-control" id="tokenLimitInput" min="1" type="number" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" data-backfill-mode="token" type="button">Lancer le backfill token</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="poolBackfillHeading">
<button aria-controls="poolBackfillCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#poolBackfillCollapse" data-bs-toggle="collapse" type="button">Pool</button>
</h2>
<div aria-labelledby="poolBackfillHeading" class="accordion-collapse collapse" data-bs-parent="#backfillAccordion" id="poolBackfillCollapse">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12"><label class="form-label" for="poolAddressInput">Adresse du pool</label><input class="form-control font-monospace" id="poolAddressInput" /></div>
<div class="col-12"><label class="form-label" for="poolAnchorInput">Signature d'ancrage</label><input class="form-control font-monospace" id="poolAnchorInput" />
<div class="form-text">Optionnelle pour « Avant, plus anciennes » : vide, la recherche commence aux transactions les plus récentes. Obligatoire pour « Après, plus récentes ».</div>
</div>
<div class="col-6"><label class="form-label" for="poolDirectionSelect">Direction</label><select class="form-select" id="poolDirectionSelect">
<option value="before">Avant, plus anciennes</option>
<option value="after">Après, plus récentes</option>
</select></div>
<div class="col-6"><label class="form-label" for="poolLimitInput">Nombre de signatures</label><input class="form-control" id="poolLimitInput" min="1" type="number" value="100" /></div>
</div>
<button class="btn btn-primary backfill-start-button" data-backfill-mode="pool" type="button">Lancer le backfill pool</button>
</div>
</div>
</div>
</div>
<div class="card shadow-sm border-0 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h2 class="h5 mb-0">Journal</h2>
</div>
<textarea class="form-control font-monospace app-log-output mb-4" id="backfillLogOutput" readonly="">Aucune campagne exécutée.</textarea>
<div class="d-flex justify-content-between align-items-center mb-2">
<h2 class="h5 mb-0">Résumé JSON</h2>
<button class="btn btn-sm btn-outline-primary" id="copyBackfillSummaryButton" type="button">Copier</button>
</div>
<div class="app-json-viewer" id="backfillSummaryOutput"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer bg-dark text-light">
<div class="container h-100 d-flex align-items-center">
<div class="row flex-grow-1 align-items-center">
<div class="col-12 text-center text-small my-1 my-md-0">&copy; 2026 SASEDEV</div>
</div>
</div>
</footer>
<script defer="" src="ts/demo_backfill.ts" type="module"></script>
</body>
</html>