326 lines
22 KiB
HTML
326 lines
22 KiB
HTML
<!-- file: kb_demo_app/frontend/demo_pipeline.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Khadhroony-BoBoBot — Demo Pipeline</title>
|
||
<link rel="stylesheet" href="sass/main.scss" />
|
||
</head>
|
||
|
||
<body class="bg-body-tertiary">
|
||
<header class="app-header">
|
||
<nav class="navbar navbar-expand-lg h-100 py-0 bg-light text-dark">
|
||
<div class="container my-0">
|
||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
|
||
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Demo Pipeline</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="app-main">
|
||
<div class="osb-scrollable pt-1 pb-4" data-simplebar>
|
||
<div class="container vcentered sketchy-translucid py-4">
|
||
<div class="row g-4">
|
||
<div class="col-12 col-xxl-4">
|
||
<div class="card shadow-sm border-0 h-100">
|
||
<div class="card-body">
|
||
<h1 class="h4 mb-3">Inspection par signature</h1>
|
||
<p class="text-body-secondary mb-3">
|
||
Cette fenêtre inspecte la donnée déjà persistée dans <code>kb_lib</code> pour une
|
||
signature donnée et affiche l’état du pipeline <code>0.7.x</code>.
|
||
</p>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineSignatureInput" class="form-label">Signature</label>
|
||
<input id="demoPipelineSignatureInput" type="text" class="form-control font-monospace" spellcheck="false" placeholder="Signature Solana déjà présente dans la base locale" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineCustomTimeframeInput" class="form-label">
|
||
Timeframe custom optionnel (secondes)
|
||
</label>
|
||
<input id="demoPipelineCustomTimeframeInput" type="number" min="1" step="1" class="form-control" placeholder="Ex: 120" />
|
||
<div class="form-text">
|
||
Les timeframes matérialisés restent chargés depuis la base. Une valeur custom déclenche
|
||
une régénération à la demande.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mb-4">
|
||
<button id="demoPipelineInspectButton" type="button" class="btn btn-primary">
|
||
Inspecter
|
||
</button>
|
||
<button id="demoPipelineClearButton" type="button" class="btn btn-outline-secondary">
|
||
Vider
|
||
</button>
|
||
</div>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineTokenMintInput" class="form-label">Token mint</label>
|
||
<input id="demoPipelineTokenMintInput" type="text" class="form-control font-monospace" spellcheck="false" placeholder="Mint SPL déjà présent dans la base locale" />
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mb-4">
|
||
<button id="demoPipelineInspectTokenButton" type="button" class="btn btn-outline-primary">
|
||
Inspecter token
|
||
</button>
|
||
</div>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelinePairIdInput" class="form-label">Pair id</label>
|
||
<input id="demoPipelinePairIdInput" type="number" min="1" step="1" class="form-control" placeholder="Identifiant interne de la paire" />
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||
<button id="demoPipelineInspectPairButton" type="button" class="btn btn-outline-primary">
|
||
Inspecter pair
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelinePoolAddressInput" class="form-label">Pool address</label>
|
||
<input id="demoPipelinePoolAddressInput" type="text" class="form-control font-monospace" spellcheck="false" placeholder="Adresse du pool déjà présent dans la base locale" />
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mb-4">
|
||
<button id="demoPipelineInspectPoolButton" type="button" class="btn btn-outline-primary">
|
||
Inspecter pool
|
||
</button>
|
||
</div>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<h2 class="h5 mb-3">Backfill token</h2>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineBackfillTokenMintInput" class="form-label">Token mint à backfill</label>
|
||
<input id="demoPipelineBackfillTokenMintInput" type="text" class="form-control font-monospace" spellcheck="false" placeholder="Mint SPL à reconstruire depuis le RPC HTTP" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineBackfillHttpRoleInput" class="form-label">HTTP role</label>
|
||
<input id="demoPipelineBackfillHttpRoleInput" type="text" class="form-control" spellcheck="false" value="history_backfill" placeholder="Ex: history_backfill" />
|
||
</div>
|
||
|
||
<div class="row g-2">
|
||
<div class="col-6">
|
||
<label for="demoPipelineBackfillMintLimitInput" class="form-label">Mint signatures</label>
|
||
<input id="demoPipelineBackfillMintLimitInput" type="number" min="1" step="1" class="form-control" value="50" />
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="demoPipelineBackfillPoolLimitInput" class="form-label">Pool signatures</label>
|
||
<input id="demoPipelineBackfillPoolLimitInput" type="number" min="1" step="1" class="form-control" value="50" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mt-3 mb-4">
|
||
<button id="demoPipelineBackfillTokenButton" type="button" class="btn btn-outline-primary">
|
||
Backfill token
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineBackfillPoolAddressInput" class="form-label">Pool address à backfill</label>
|
||
<input id="demoPipelineBackfillPoolAddressInput" type="text" class="form-control font-monospace" spellcheck="false" placeholder="Adresse du pool / pair on-chain" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="demoPipelineBackfillPoolOnlyLimitInput" class="form-label">Pool signatures</label>
|
||
<input id="demoPipelineBackfillPoolOnlyLimitInput" type="number" min="1" step="1" class="form-control" value="50" />
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mt-3 mb-4">
|
||
<button id="demoPipelineBackfillPoolButton" type="button" class="btn btn-outline-primary">
|
||
Backfill pool
|
||
</button>
|
||
</div>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<div class="small text-body-secondary">
|
||
<div><strong>But :</strong> vérifier rapidement la cohérence du pipeline <code>0.7.x</code>.</div>
|
||
<div><strong>Portée :</strong> lecture seule depuis SQLite via <code>kb_lib</code>.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-xxl-8">
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<h2 class="h5 mb-3">Résumé</h2>
|
||
<textarea id="demoPipelineSummaryTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<h2 class="h5 mb-3">Dernier backfill token</h2>
|
||
<textarea id="demoPipelineBackfillTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
|
||
<div>
|
||
<h2 class="h5 mb-1">Candles / OHLCV</h2>
|
||
<div id="demoPipelineCandlesChartMeta" class="small text-body-secondary">
|
||
Aucun jeu de candles chargé.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<div>
|
||
<label for="demoPipelineChartPairSelect" class="form-label mb-1">Pair</label>
|
||
<select id="demoPipelineChartPairSelect" class="form-select form-select-sm">
|
||
<option value="">Aucune</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="demoPipelineChartTimeframeSelect" class="form-label mb-1">Timeframe</label>
|
||
<select id="demoPipelineChartTimeframeSelect" class="form-select form-select-sm">
|
||
<option value="">Aucun</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="demoPipelineCandlesChart" class="w-100 border rounded bg-body" style="height: 520px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion" id="demoPipelineAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingTransaction">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTransaction" aria-expanded="true" aria-controls="collapseTransaction">
|
||
Transaction résolue
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTransaction" class="accordion-collapse collapse show" aria-labelledby="headingTransaction" data-bs-parent="#demoPipelineAccordion">
|
||
<div class="accordion-body">
|
||
<textarea id="demoPipelineTransactionTextarea" class="form-control font-monospace" rows="14" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingDecodedEvents">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDecodedEvents" aria-expanded="false" aria-controls="collapseDecodedEvents">
|
||
Decoded events
|
||
</button>
|
||
</h2>
|
||
<div id="collapseDecodedEvents" class="accordion-collapse collapse" aria-labelledby="headingDecodedEvents" data-bs-parent="#demoPipelineAccordion">
|
||
<div class="accordion-body">
|
||
<textarea id="demoPipelineDecodedEventsTextarea" class="form-control font-monospace" rows="14" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingPools">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePools" aria-expanded="false" aria-controls="collapsePools">
|
||
Pools / pairs / origins
|
||
</button>
|
||
</h2>
|
||
<div id="collapsePools" class="accordion-collapse collapse" aria-labelledby="headingPools" data-bs-parent="#demoPipelineAccordion">
|
||
<div class="accordion-body">
|
||
<div class="mb-3">
|
||
<label class="form-label">Pools</label>
|
||
<textarea id="demoPipelinePoolsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Pairs</label>
|
||
<textarea id="demoPipelinePairsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Launch attributions</label>
|
||
<textarea id="demoPipelineLaunchAttributionsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div>
|
||
<label class="form-label">Pool origins</label>
|
||
<textarea id="demoPipelinePoolOriginsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingWallets">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWallets" aria-expanded="false" aria-controls="collapseWallets">
|
||
Wallets / participations / holdings
|
||
</button>
|
||
</h2>
|
||
<div id="collapseWallets" class="accordion-collapse collapse" aria-labelledby="headingWallets" data-bs-parent="#demoPipelineAccordion">
|
||
<div class="accordion-body">
|
||
<textarea id="demoPipelineWalletsTextarea" class="form-control font-monospace" rows="16" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingTrades">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTrades" aria-expanded="false" aria-controls="collapseTrades">
|
||
Trades / metrics / candles / analytic signals
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTrades" class="accordion-collapse collapse" aria-labelledby="headingTrades" data-bs-parent="#demoPipelineAccordion">
|
||
<div class="accordion-body">
|
||
<div class="mb-3">
|
||
<label class="form-label">Trade events</label>
|
||
<textarea id="demoPipelineTradeEventsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Pair metrics</label>
|
||
<textarea id="demoPipelinePairMetricsTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Pair candles</label>
|
||
<textarea id="demoPipelinePairCandlesTextarea" class="form-control font-monospace" rows="12" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
<div>
|
||
<label class="form-label">Pair analytic signals</label>
|
||
<textarea id="demoPipelinePairAnalyticSignalsTextarea" class="form-control font-monospace" rows="12" readonly spellcheck="false"></textarea>
|
||
</div>
|
||
</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-3">
|
||
<h2 class="h5 mb-0">Log UI</h2>
|
||
<button id="demoPipelineClearLogButton" type="button" class="btn btn-outline-secondary btn-sm">Clear log</button>
|
||
</div>
|
||
<textarea id="demoPipelineLogTextarea" class="form-control font-monospace" rows="10" readonly spellcheck="false"></textarea>
|
||
</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 col-md-6 text-center text-small my-1 my-md-0">
|
||
© 2026 SASEDEV — Demo Pipeline
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="module" src="ts/demo_pipeline.ts" defer></script>
|
||
</body>
|
||
|
||
</html> |