p2pds / src / ui / components / replication-summary.ts

import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { formatBytes, formatNumber } from "../styles/shared.js";

@customElement("p2p-replication-summary")
export class ReplicationSummary extends LitElement {
	createRenderRoot() {
		return this;
	}

	@property({ attribute: false }) data: any = null;

	render() {
		const repl = this.data?.replication;
		if (!repl?.enabled) return html`<section class="card"><h2>Replication Summary</h2><div>Replication disabled</div></section>`;
		const a = repl.aggregate || {};
		return html`
			<section class="card">
				<h2>Replication Summary</h2>
				<div class="metrics-grid">
					<div class="metric-box">
						<div class="value">${formatNumber(a.totalDids)}</div>
						<div class="label">Tracked DIDs</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatNumber(a.totalRecords)}</div>
						<div class="label">Records</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatNumber(a.totalBlocks)}</div>
						<div class="label">Blocks</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatNumber(a.totalBlobs)}</div>
						<div class="label">Blobs</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatBytes(a.totalBytesHeld)}</div>
						<div class="label">Total Held</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatBytes(a.recentTransferredBytes)}</div>
						<div class="label">Transferred (24h)</div>
					</div>
					<div class="metric-box">
						<div class="value">${formatNumber(a.totalSyncs)}</div>
						<div class="label">Total Syncs</div>
					</div>
				</div>
			</section>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"p2p-replication-summary": ReplicationSummary;
	}
}