@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/network-viewer/device-details-modal.tsx

@@ -1,339 +0,0 @@
-import { type INetworkDeviceDetails, TrustLevel } from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
-import { RemoteAppUpdatePanel } from "../../app-updates/remote-app-update-panel";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
-import { RemoteLogsPanel } from "./remote-logs-panel";
-
-/** Format bytes to human-readable string (KB, MB, GB) */
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
-}
-
-/** Format transfer rate to human-readable string (KB/s or MB/s) */
-function formatRate(mbps: number | undefined): string {
-  if (mbps === undefined || mbps === 0) return "0 KB/s";
-  // Show KB/s if less than 0.1 MB/s (100 KB/s)
-  if (mbps < 0.1) {
-    const kbps = mbps * 1024;
-    return `${kbps.toFixed(1)} KB/s`;
-  }
-  return `${mbps.toFixed(2)} MB/s`;
-}
-
-interface IDeviceDetailsModalProps {
-  deviceId: string;
-  onClose: () => void;
-  onDisconnect?: () => void;
-}
-
-/** Show connection, sync, topology, and provider-authorized remote-log diagnostics for one device. */
-export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceDetailsModalProps) {
-  const [device, setDevice] = useState<INetworkDeviceDetails | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [notFound, setNotFound] = useState(false);
-
-  const loadData = useCallback(async () => {
-    try {
-      const diagnostics = await getNetworkDiagnosticsConsumer();
-      const { device: deviceData } = await diagnostics.tools.getDeviceDetails({ deviceId });
-
-      if (!deviceData) {
-        setNotFound(true);
-      } else {
-        setDevice(deviceData);
-        setNotFound(false);
-      }
-    } catch (error) {
-      console.error("Error loading device details:", error);
-      setNotFound(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [deviceId]);
-
-  const handleDisconnect = async () => {
-    if (!confirm("Are you sure you want to disconnect from this device?")) {
-      return;
-    }
-
-    try {
-      const control = await getNetworkControlConsumer();
-      const result = await control.tools.disconnectDevice({ deviceId });
-      if (!result.success) {
-        alert(result.message);
-        return;
-      }
-      onDisconnect?.();
-      onClose();
-    } catch (error) {
-      console.error("Error disconnecting device:", error);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-    // Auto-refresh every 5 seconds
-    const interval = setInterval(loadData, 5000);
-    return () => clearInterval(interval);
-  }, [loadData]);
-
-  return (
-    <div
-      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{
-        backgroundColor: "rgba(0,0,0,0.5)",
-        zIndex: 1050,
-        overflowY: "auto",
-        paddingTop: "2rem",
-        paddingBottom: "2rem",
-      }}
-      onClick={onClose}
-    >
-      <div
-        className="card"
-        style={{ maxWidth: "900px", width: "90%", maxHeight: "90vh" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="card-header d-flex justify-content-between align-items-center">
-          <div>
-            <h5 className="mb-0">
-              {loading ? "Loading..." : device?.userName || device?.userId || "Device Details"}
-            </h5>
-            {device?.userName && (
-              <small className="text-muted">
-                <code>{device.userId}</code>
-              </small>
-            )}
-          </div>
-          <div>
-            {device && (
-              <button className="btn btn-sm btn-danger me-2" onClick={handleDisconnect}>
-                <i className="bi bi-x-circle"></i> Disconnect
-              </button>
-            )}
-            <button className="btn-close" onClick={onClose} aria-label="Close"></button>
-          </div>
-        </div>
-
-        {/* Body */}
-        <div className="card-body" style={{ overflowY: "auto", maxHeight: "calc(90vh - 120px)" }}>
-          {loading && <LoadingIndicator />}
-
-          {!loading && (notFound || !device) && (
-            <div className="alert alert-warning">
-              Device not found or connection has been closed.
-            </div>
-          )}
-
-          {!loading && device && (
-            <>
-              {/* Connection Info */}
-              <div className="mb-4">
-                <h6 className="border-bottom pb-2 mb-3">Connection Information</h6>
-                <div className="row">
-                  {device.deviceName && (
-                    <div className="col-md-6 mb-3">
-                      <strong>Device Name:</strong>
-                      <br />
-                      <span>{device.deviceName}</span>
-                    </div>
-                  )}
-                  <div className="col-md-6 mb-3">
-                    <strong>Device ID:</strong>
-                    <br />
-                    <code className="text-muted small">{device.deviceId}</code>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Connection State:</strong>
-                    <br />
-                    <span className="badge bg-success">{device.connectionState}</span>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>User Trust:</strong>
-                    <br />
-                    <TrustLevelBadge level={device.userTrustLevel || TrustLevel.Unknown} />
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Device Trust:</strong>
-                    <br />
-                    <TrustLevelBadge level={device.deviceTrustLevel || TrustLevel.Unknown} />
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Path Type:</strong>
-                    <br />
-                    <span
-                      className={`badge bg-${device.pathType === "direct" ? "success" : "info"}`}
-                    >
-                      {device.pathType}
-                    </span>
-                  </div>
-                  {device.throughDeviceIds && device.throughDeviceIds.length > 0 && (
-                    <div className="col-md-12 mb-3">
-                      <strong>Path:</strong>
-                      <br />
-                      <small className="text-muted">{device.throughDeviceIds.join(" → ")}</small>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Throughput Stats */}
-              <div className="mb-4">
-                <h6 className="border-bottom pb-2 mb-3">Throughput</h6>
-                <div className="row">
-                  <div className="col-md-6 mb-3">
-                    <strong>Send Rate:</strong>
-                    <br />
-                    <span className="text-success">↑ {formatRate(device.sendRateMBps)}</span>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Receive Rate:</strong>
-                    <br />
-                    <span className="text-primary">↓ {formatRate(device.receiveRateMBps)}</span>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Total Sent:</strong>
-                    <br />
-                    <span>{formatBytes(device.bytesSent || 0)}</span>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Total Received:</strong>
-                    <br />
-                    <span>{formatBytes(device.bytesReceived || 0)}</span>
-                  </div>
-                </div>
-              </div>
-
-              {device.canReadRemoteLogs && <RemoteLogsPanel deviceId={device.deviceId} />}
-              {device.canReadRemoteLogs && (
-                <div className="mb-4">
-                  <RemoteAppUpdatePanel deviceId={device.deviceId} deviceName={device.deviceName} />
-                </div>
-              )}
-
-              {/* Shared Groups */}
-              {device.sharedGroups.length > 0 && (
-                <div className="mb-4">
-                  <h6 className="border-bottom pb-2 mb-3">
-                    Shared Groups ({device.sharedGroups.length})
-                  </h6>
-                  <div className="table-responsive">
-                    <table className="table table-sm table-hover">
-                      <thead>
-                        <tr>
-                          <th>Group ID</th>
-                          <th>Role</th>
-                          <th>Sync Status</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {device.sharedGroups.map((groupId) => {
-                          const syncStats = device.syncStatsByGroup[groupId];
-                          const role = device.roles[groupId];
-                          return (
-                            <tr key={groupId}>
-                              <td>
-                                <code className="text-muted small">{groupId}</code>
-                              </td>
-                              <td>{role != null ? String(role) : "N/A"}</td>
-                              <td>
-                                {syncStats ? (
-                                  <>
-                                    {syncStats.isPreferred && (
-                                      <span className="badge bg-primary me-2">Preferred</span>
-                                    )}
-                                    <small className="text-muted">
-                                      {new Date(syncStats.lastSyncTime).toLocaleString()}
-                                    </small>
-                                  </>
-                                ) : (
-                                  <span className="text-muted">-</span>
-                                )}
-                              </td>
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              )}
-
-              {/* Remote Network Info */}
-              {device.networkInfo && (
-                <div className="mb-4">
-                  <h6 className="border-bottom pb-2 mb-3">Remote Device Network Info</h6>
-                  <div className="row mb-3">
-                    <div className="col-md-3 mb-3">
-                      <strong>CPU Usage:</strong>
-                      <br />
-                      <span className="h5">{device.networkInfo.cpuPercent.toFixed(1)}%</span>
-                    </div>
-                    <div className="col-md-3 mb-3">
-                      <strong>Memory Usage:</strong>
-                      <br />
-                      <span className="h5">{device.networkInfo.memPercent.toFixed(1)}%</span>
-                    </div>
-                    <div className="col-md-3 mb-3">
-                      <strong>Connection Slots:</strong>
-                      <br />
-                      <span className="h5">{device.networkInfo.connectionSlotsAvailable}</span>
-                    </div>
-                    <div className="col-md-3 mb-3">
-                      <strong>Total Connections:</strong>
-                      <br />
-                      <span className="h5">{device.networkInfo.connections.length}</span>
-                    </div>
-                  </div>
-
-                  {device.networkInfo.preferredDeviceIds.length > 0 && (
-                    <div className="mb-3">
-                      <strong>Preferred Devices:</strong>
-                      <ul className="list-unstyled mt-2 ms-3">
-                        {device.networkInfo.preferredDeviceIds.map((prefDeviceId) => (
-                          <li key={prefDeviceId}>
-                            <code className="text-muted small">{prefDeviceId}</code>
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  )}
-
-                  {device.networkInfo.connections.length > 0 && (
-                    <div>
-                      <strong>Remote Connections ({device.networkInfo.connections.length}):</strong>
-                      <div className="table-responsive mt-2">
-                        <table className="table table-sm table-hover">
-                          <thead>
-                            <tr>
-                              <th>Device ID</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {device.networkInfo.connections.map((conn, idx: number) => (
-                              <tr key={idx}>
-                                <td>
-                                  <code className="text-muted small">{conn.deviceId}</code>
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}