Loading…
;
+ if (needsSetup) return Nothing here.
+
+
+ {children}
+
+ );
+}
diff --git a/web/src/components/PeerDetail.tsx b/web/src/components/PeerDetail.tsx
new file mode 100644
index 0000000..987aaed
--- /dev/null
+++ b/web/src/components/PeerDetail.tsx
@@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import { Copy, Download, KeyRound, Pencil, Power, RefreshCw, Trash2 } from "lucide-react";
+import { api, type Live, type Peer, type Range, type Settings, type TrafficPoint } from "../api";
+import { ago, bytes, dateTime, duration, rate, shortKey } from "../format";
+import { errorMessage, useNow, useToast } from "../state";
+import { Legend, TrafficChart } from "./charts";
+import { Confirm, Modal, Segmented, copyText } from "./ui";
+import { PeerForm } from "./PeerForm";
+
+const rangeMs: Record
+
+
+
+ {tab === "overview" && (
+ <>
+
+
+ {peer.notes && -
+
- Status +
- + + {stateLabel} + {live.connected && live.connectedSince && for {duration(live.connectedSince, now)}} + +
- Tunnel address +
- + {peer.ipv4} + {peer.ipv6 ? `, ${peer.ipv6}` : ""} + +
- Endpoint +
- {live.endpoint || "—"} +
- Last handshake +
- + {ago(live.lastHandshake, now)} {dateTime(live.lastHandshake)} + +
- Rate +
- + ↓ {rate(live.rxRate)} · ↑ {rate(live.txRate)} + +
- Transfer +
- + ↓ {bytes(live.rx)} · ↑ {bytes(live.tx)} + +
-
+
- Public key +
- + {shortKey(peer.publicKey)}{" "} + + +
- Keys +
- + {peer.serverKeys ? "generated by the server" : "held by the client"} + {peer.presharedKey ? " · preshared key" : ""} + +
- Client routes +
- {peer.clientRoutes} +
- DNS +
- {peer.dns || server default ({settings.dns || "none"})} +
- Keepalive / MTU +
- + {peer.keepalive || settings.keepalive}s / {peer.mtu || settings.mtu} + +
- Expires +
- {peer.expiresAt ? dateTime(peer.expiresAt) : never} +
- Created +
- {dateTime(peer.createdAt)} +
{peer.notes}
} +
+
+
+
+ {peer.serverKeys ? (
+ 
setQrKey((k) => k + 1)} />
+ ) : (
+
+ )}
+ setQrKey((k) => k + 1)} />
+ ) : (
+ This peer holds its own private key, so there is no QR code. Fill in the PrivateKey line on the client.
+ )}
+ {config || "…"}
+
+
+
+
+