Sasedev/khadhroony-solana-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.2.12-pre.007

Browse Source
This commit is contained in:
SinuS von SifriduS
2026-08-27 14:35:18 +02:00
parent 7d0fe8ac5f
commit 2042482592
13 changed files with 764 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
crates/ksp-app-solprices-desk/frontend/ts/main.ts
View File

@@ -1,5 +1,5 @@
// file: crates/ksp-app-solprices-desk/frontend/ts/main.ts
// version: 6
// version: 7
import "bootstrap";
import ResizeObserver from "resize-observer-polyfill";
@@ -17,11 +17,46 @@ installFrontendConsoleBridge("main");
type ViewId = "prices" | "diagnostics";
type AvailabilityPresentation = {
badgeClass: string;
iconClass: string;
label: string;
};
const viewTitles: Record<ViewId, string> = {
prices: "Prices",
diagnostics: "Diagnostics",
};
const availabilityPresentations: Record<string, AvailabilityPresentation> = {
authentication_unavailable: { badgeClass: "text-bg-danger", iconClass: "fa-key", label: "Authentication unavailable" },
cooling_down: { badgeClass: "text-bg-warning", iconClass: "fa-clock", label: "Cooling down" },
disabled: { badgeClass: "text-bg-secondary", iconClass: "fa-ban", label: "Disabled" },
misconfigured: { badgeClass: "text-bg-danger", iconClass: "fa-triangle-exclamation", label: "Misconfigured" },
quota_unavailable: { badgeClass: "text-bg-warning", iconClass: "fa-gauge-high", label: "Quota unavailable" },
ready: { badgeClass: "text-bg-success", iconClass: "fa-circle-check", label: "Ready" },
temporarily_unavailable: { badgeClass: "text-bg-warning", iconClass: "fa-cloud-arrow-down", label: "Temporarily unavailable" },
unknown: { badgeClass: "text-bg-secondary", iconClass: "fa-circle-question", label: "Unknown" },
};
const authLabels: Record<string, string> = {
none: "Keyless",
optional_api_key: "Optional API key",
required_api_key: "API key required",
unknown: "Unknown",
};
const semanticsLabels: Record<string, string> = {
aggregated_market: "Aggregated market",
dex_pair_usd: "DEX pair USD",
exchange_last_trade: "Exchange last trade",
solana_heuristic: "Solana heuristic",
solana_spot: "Solana spot",
unknown: "Unknown",
};
const jsDateMaxUnixMillis = 8_640_000_000_000_000n;
let currentMarketPriceRows: MarketPriceProviderRowDto[] = [];
const selectedProviderIds = new Set<string>();
@@ -59,10 +94,14 @@ function bindNavigation(): void {
frontendTrace("main", "SOL Prices Desk navigation handlers installed");
}
function appendMarketPriceCell(row: HTMLTableRowElement, value: string): void {
function appendMarketPriceCell(row: HTMLTableRowElement, value: string, className?: string): HTMLTableCellElement {
const cell = document.createElement("td");
cell.textContent = value;
if (className) {
cell.className = className;
}
row.append(cell);
return cell;
}
function clearPricesDiagnostic(): void {
@@ -94,21 +133,49 @@ function synchronizeSelectedProviders(): void {
}
}
function updateSummary(): void {
const summaryValues: Record<string, number> = {
pricesSummaryProviders: currentMarketPriceRows.length,
pricesSummaryReady: currentMarketPriceRows.filter(provider => provider.availability === "ready" && !provider.loading).length,
pricesSummaryObserved: currentMarketPriceRows.filter(provider => provider.refreshed).length,
pricesSummaryAttention: currentMarketPriceRows.filter(provider => provider.availability !== "ready").length,
pricesSummaryLoading: currentMarketPriceRows.filter(provider => provider.loading).length,
};
for (const [elementId, value] of Object.entries(summaryValues)) {
const element = document.querySelector<HTMLElement>(`#${elementId}`);
if (element) {
element.textContent = value.toString();
}
}
}
function synchronizeBatchControls(): void {
const selectedCount = selectedProviderIdsInRowOrder().length;
const providerCount = currentMarketPriceRows.length;
const anyLoading = currentMarketPriceRows.some(provider => provider.loading);
const selectedButton = document.querySelector<HTMLButtonElement>("#refreshSelectedButton");
const allButton = document.querySelector<HTMLButtonElement>("#refreshAllButton");
const clearButton = document.querySelector<HTMLButtonElement>("#clearSelectionButton");
const selectAll = document.querySelector<HTMLInputElement>("#selectAllProviders");
const selectedCountLabel = document.querySelector<HTMLElement>("#selectedProviderCount");
if (selectedButton) {
selectedButton.disabled = selectedCount === 0 || anyLoading;
}
if (allButton) {
allButton.disabled = currentMarketPriceRows.length === 0 || anyLoading;
allButton.disabled = providerCount === 0 || anyLoading;
}
if (clearButton) {
clearButton.disabled = selectedCount === 0 || anyLoading;
}
if (selectAll) {
selectAll.disabled = providerCount === 0 || anyLoading;
selectAll.checked = providerCount !== 0 && selectedCount === providerCount;
selectAll.indeterminate = selectedCount > 0 && selectedCount < providerCount;
}
if (selectedCountLabel) {
selectedCountLabel.textContent = `${selectedCount} selected`;
}
updateSummary();
}
function markProvidersLoading(providerIds: string[]): void {
@@ -198,6 +265,7 @@ async function refreshAllMarketPrices(): Promise<void> {
function appendSelectionCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
cell.className = "app-market-selection-column";
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.className = "form-check-input";
@@ -220,13 +288,152 @@ function appendSelectionCell(row: HTMLTableRowElement, provider: MarketPriceProv
row.append(cell);
}
function appendProviderCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
const name = document.createElement("div");
name.className = "app-market-provider-name";
name.textContent = provider.displayName;
const code = document.createElement("div");
code.className = "app-market-code";
code.textContent = provider.providerId;
cell.append(name, code);
row.append(cell);
}
function appendBadgeCell(row: HTMLTableRowElement, label: string, badgeClass = "text-bg-light", className?: string): void {
const cell = document.createElement("td");
if (className) {
cell.className = className;
}
const badge = document.createElement("span");
badge.className = `badge ${badgeClass}`;
badge.textContent = label;
cell.append(badge);
row.append(cell);
}
function availabilityPresentation(provider: MarketPriceProviderRowDto): AvailabilityPresentation {
if (provider.loading) {
return { badgeClass: "text-bg-info", iconClass: "fa-spinner fa-spin", label: "Refreshing" };
}
return availabilityPresentations[provider.availability] ?? availabilityPresentations.unknown;
}
function appendAvailabilityCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
const presentation = availabilityPresentation(provider);
const badge = document.createElement("span");
badge.className = `badge ${presentation.badgeClass}`;
const icon = document.createElement("i");
icon.className = `fa-solid ${presentation.iconClass} me-1`;
icon.setAttribute("aria-hidden", "true");
badge.append(icon, document.createTextNode(presentation.label));
cell.append(badge);
row.append(cell);
}
function appendPriceCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
if (provider.price === null) {
const empty = document.createElement("span");
empty.className = "text-body-secondary";
empty.textContent = "No observation";
cell.append(empty);
} else {
const price = document.createElement("span");
price.className = "app-market-price";
price.textContent = provider.price;
const currency = document.createElement("small");
currency.className = "text-body-secondary ms-1";
currency.textContent = "USD";
cell.append(price, currency);
}
row.append(cell);
}
function formatUnixMillis(value: string): { exact: string; iso: string; local: string } | null {
try {
const exact = BigInt(value);
if (exact < -jsDateMaxUnixMillis || exact > jsDateMaxUnixMillis) {
return null;
}
const date = new Date(Number(exact));
if (Number.isNaN(date.getTime())) {
return null;
}
return {
exact: value,
iso: date.toISOString(),
local: date.toLocaleString("fr-CH", { dateStyle: "short", timeStyle: "medium", hour12: false }),
};
} catch {
return null;
}
}
function appendTimestampValue(container: HTMLElement, label: string, value: string | null, emptyLabel: string): void {
const line = document.createElement("div");
line.className = "app-market-time-line";
const prefix = document.createElement("span");
prefix.className = "app-market-time-label";
prefix.textContent = label;
const valueContainer = document.createElement("span");
valueContainer.className = "app-market-time-value";
if (value === null) {
valueContainer.classList.add("text-body-secondary");
valueContainer.textContent = emptyLabel;
} else {
const formatted = formatUnixMillis(value);
if (formatted === null) {
const exact = document.createElement("span");
exact.className = "app-market-time-exact";
exact.textContent = `${value} ms`;
valueContainer.append(exact);
} else {
const time = document.createElement("time");
time.dateTime = formatted.iso;
time.textContent = formatted.local;
time.title = formatted.iso;
const exact = document.createElement("span");
exact.className = "app-market-time-exact d-block";
exact.textContent = `${formatted.exact} ms`;
valueContainer.append(time, exact);
}
}
line.append(prefix, valueContainer);
container.append(line);
}
function appendObservationTimeCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
cell.className = "app-market-time-column";
const time = document.createElement("div");
time.className = "app-market-time";
appendTimestampValue(time, "Provider", provider.providerTimestampUnixMillis, "Not supplied");
appendTimestampValue(time, "KSP", provider.receivedAtUnixMillis, "—");
cell.append(time);
row.append(cell);
}
function appendRetryCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
cell.className = "app-market-time-column";
const time = document.createElement("div");
time.className = "app-market-time";
appendTimestampValue(time, "Retry", provider.retryAtUnixMillis, "—");
cell.append(time);
row.append(cell);
}
function appendRefreshCell(row: HTMLTableRowElement, provider: MarketPriceProviderRowDto): void {
const cell = document.createElement("td");
cell.className = "text-end";
const button = document.createElement("button");
button.type = "button";
button.className = "btn btn-sm btn-outline-primary text-nowrap";
button.disabled = provider.loading;
button.dataset.providerId = provider.providerId;
button.setAttribute("aria-label", `Refresh ${provider.displayName}`);
button.innerHTML = provider.loading
? '<i class="fa-solid fa-spinner fa-spin me-1" aria-hidden="true"></i>Refreshing…'
: '<i class="fa-solid fa-rotate me-1" aria-hidden="true"></i>Refresh';
@@ -257,34 +464,68 @@ function renderMarketPriceRows(rows: MarketPriceProviderRowDto[]): void {
for (const provider of rows) {
const row = document.createElement("tr");
row.dataset.providerId = provider.providerId;
row.dataset.availability = provider.availability;
row.classList.toggle("app-market-row-loading", provider.loading);
appendSelectionCell(row, provider);
appendMarketPriceCell(row, provider.displayName);
appendMarketPriceCell(row, provider.pair);
appendMarketPriceCell(row, provider.semantics);
appendMarketPriceCell(row, provider.authMode);
appendMarketPriceCell(row, provider.loading ? "loading" : provider.availability);
appendMarketPriceCell(row, provider.price ?? "—");
appendMarketPriceCell(row, provider.providerTimestampUnixMillis ?? "—");
appendMarketPriceCell(row, provider.receivedAtUnixMillis ?? "—");
appendMarketPriceCell(row, provider.retryAtUnixMillis ?? "—");
appendProviderCell(row, provider);
appendBadgeCell(row, provider.pair, "text-bg-primary");
appendBadgeCell(row, semanticsLabels[provider.semantics] ?? semanticsLabels.unknown, "text-bg-light", "d-none d-xl-table-cell");
appendBadgeCell(row, authLabels[provider.authMode] ?? authLabels.unknown, "text-bg-light", "d-none d-xl-table-cell");
appendAvailabilityCell(row, provider);
appendPriceCell(row, provider);
appendObservationTimeCell(row, provider);
appendRetryCell(row, provider);
appendRefreshCell(row, provider);
tableBody.append(row);
}
synchronizeBatchControls();
frontendTrace("main", "SOL Prices Desk market-price registry rows rendered", { rowCount: rows.length });
frontendTrace("main", "SOL Prices Desk market-price registry rows rendered", {
rowCount: rows.length,
observedCount: rows.filter(provider => provider.refreshed).length,
attentionCount: rows.filter(provider => provider.availability !== "ready").length,
});
}
function selectAllProviders(selected: boolean): void {
selectedProviderIds.clear();
if (selected) {
for (const provider of currentMarketPriceRows) {
selectedProviderIds.add(provider.providerId);
}
}
frontendDebug("main", "SOL Prices Desk select-all providers control changed", {
selected,
selectedCount: selectedProviderIds.size,
});
renderMarketPriceRows(currentMarketPriceRows);
}
function clearProviderSelection(): void {
const selectedCount = selectedProviderIds.size;
frontendDebug("main", "SOL Prices Desk clear provider selection control clicked", { selectedCount });
selectedProviderIds.clear();
renderMarketPriceRows(currentMarketPriceRows);
}
function bindMarketPriceControls(): void {
const selectedButton = document.querySelector<HTMLButtonElement>("#refreshSelectedButton");
const allButton = document.querySelector<HTMLButtonElement>("#refreshAllButton");
const clearButton = document.querySelector<HTMLButtonElement>("#clearSelectionButton");
const selectAll = document.querySelector<HTMLInputElement>("#selectAllProviders");
selectedButton?.addEventListener("click", () => {
void refreshSelectedMarketPrices();
});
allButton?.addEventListener("click", () => {
void refreshAllMarketPrices();
});
clearButton?.addEventListener("click", () => {
clearProviderSelection();
});
selectAll?.addEventListener("change", () => {
selectAllProviders(selectAll.checked);
});
synchronizeBatchControls();
frontendTrace("main", "SOL Prices Desk market-price batch controls installed");
frontendTrace("main", "SOL Prices Desk market-price controls installed");
}
function renderRuntimeStatus(status: MarketPriceRuntimeStatusDto): void {