mirror of
https://github.com/netbirdio/netbird.git
synced 2026-10-27 23:09:08 +01:00
Add Tauri UI
This commit is contained in:
Zoltán Papp
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>NetBird</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
+2516
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "netbird-ui",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-notification": "^2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"tailwindcss": "^4.0.6",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { HashRouter, Routes, Route, useNavigate } from 'react-router-dom'
|
||||
import { useEffect } from 'react'
|
||||
import { listen } from '@tauri-apps/api/event'
|
||||
import Status from './pages/Status'
|
||||
import Settings from './pages/Settings'
|
||||
import Networks from './pages/Networks'
|
||||
import Profiles from './pages/Profiles'
|
||||
import Peers from './pages/Peers'
|
||||
import Debug from './pages/Debug'
|
||||
import Update from './pages/Update'
|
||||
import NavBar from './components/NavBar'
|
||||
|
||||
/**
|
||||
* Navigator listens for the "navigate" event emitted by the Rust backend
|
||||
* and programmatically navigates the React router.
|
||||
*/
|
||||
function Navigator() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
const unlisten = listen<string>('navigate', (event) => {
|
||||
const path = event.payload
|
||||
if (path) navigate(path)
|
||||
})
|
||||
return () => {
|
||||
unlisten.then(fn => fn())
|
||||
}
|
||||
}, [navigate])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<HashRouter>
|
||||
<Navigator />
|
||||
<div
|
||||
className="min-h-screen flex"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-primary)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
<NavBar />
|
||||
<main className="flex-1 px-10 py-8 overflow-y-auto h-screen">
|
||||
<Routes>
|
||||
<Route path="/" element={<Status />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/peers" element={<Peers />} />
|
||||
<Route path="/networks" element={<Networks />} />
|
||||
<Route path="/profiles" element={<Profiles />} />
|
||||
<Route path="/debug" element={<Debug />} />
|
||||
<Route path="/update" element={<Update />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</HashRouter>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Type definitions for Tauri command responses.
|
||||
* These mirror the Rust serde-serialized DTOs.
|
||||
*/
|
||||
|
||||
// ---- Connection service ----
|
||||
|
||||
export interface StatusInfo {
|
||||
status: string
|
||||
ip: string
|
||||
publicKey: string
|
||||
fqdn: string
|
||||
connectedPeers: number
|
||||
}
|
||||
|
||||
// ---- Settings service ----
|
||||
|
||||
export interface ConfigInfo {
|
||||
managementUrl: string
|
||||
adminUrl: string
|
||||
preSharedKey: string
|
||||
interfaceName: string
|
||||
wireguardPort: number
|
||||
disableAutoConnect: boolean
|
||||
serverSshAllowed: boolean
|
||||
rosenpassEnabled: boolean
|
||||
rosenpassPermissive: boolean
|
||||
lazyConnectionEnabled: boolean
|
||||
blockInbound: boolean
|
||||
disableNotifications: boolean
|
||||
}
|
||||
|
||||
// ---- Network service ----
|
||||
|
||||
export interface NetworkInfo {
|
||||
id: string
|
||||
range: string
|
||||
domains: string[]
|
||||
selected: boolean
|
||||
resolvedIPs: Record<string, string[]>
|
||||
}
|
||||
|
||||
// ---- Profile service ----
|
||||
|
||||
export interface ProfileInfo {
|
||||
name: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export interface ActiveProfileInfo {
|
||||
profileName: string
|
||||
username: string
|
||||
email: string
|
||||
}
|
||||
|
||||
// ---- Debug service ----
|
||||
|
||||
export interface DebugBundleParams {
|
||||
anonymize: boolean
|
||||
systemInfo: boolean
|
||||
upload: boolean
|
||||
uploadUrl: string
|
||||
runDurationMins: number
|
||||
enablePersistence: boolean
|
||||
}
|
||||
|
||||
export interface DebugBundleResult {
|
||||
localPath: string
|
||||
uploadedKey: string
|
||||
uploadFailureReason: string
|
||||
}
|
||||
|
||||
// ---- Peers service ----
|
||||
|
||||
export interface PeerInfo {
|
||||
ip: string
|
||||
pubKey: string
|
||||
fqdn: string
|
||||
connStatus: string
|
||||
connStatusUpdate: string
|
||||
relayed: boolean
|
||||
relayAddress: string
|
||||
latencyMs: number
|
||||
bytesRx: number
|
||||
bytesTx: number
|
||||
rosenpassEnabled: boolean
|
||||
networks: string[]
|
||||
lastHandshake: string
|
||||
localIceType: string
|
||||
remoteIceType: string
|
||||
localEndpoint: string
|
||||
remoteEndpoint: string
|
||||
}
|
||||
|
||||
// ---- Update service ----
|
||||
|
||||
export interface InstallerResult {
|
||||
success: boolean
|
||||
errorMsg: string
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import NetBirdLogo from './NetBirdLogo'
|
||||
|
||||
const mainItems = [
|
||||
{ to: '/', label: 'Status', icon: StatusIcon },
|
||||
{ to: '/peers', label: 'Peers', icon: PeersIcon },
|
||||
{ to: '/networks', label: 'Networks', icon: NetworksIcon },
|
||||
{ to: '/profiles', label: 'Profiles', icon: ProfilesIcon },
|
||||
]
|
||||
|
||||
const systemItems = [
|
||||
{ to: '/settings', label: 'Settings', icon: SettingsIcon },
|
||||
{ to: '/debug', label: 'Debug', icon: DebugIcon },
|
||||
{ to: '/update', label: 'Update', icon: UpdateIcon },
|
||||
]
|
||||
|
||||
function NavGroup({ items }: { items: typeof mainItems }) {
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
{items.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === '/'}
|
||||
className="block"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-2.5 py-[5px] rounded-[var(--radius-sidebar-item)] text-[13px] transition-colors"
|
||||
style={{
|
||||
backgroundColor: isActive ? 'var(--color-sidebar-selected)' : 'transparent',
|
||||
fontWeight: isActive ? 500 : 400,
|
||||
color: isActive ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (!isActive) e.currentTarget.style.backgroundColor = 'var(--color-sidebar-hover)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'
|
||||
}}
|
||||
>
|
||||
<item.icon active={isActive} />
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NavBar() {
|
||||
return (
|
||||
<nav
|
||||
className="w-[216px] min-w-[216px] flex flex-col h-screen"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-sidebar)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
borderRight: '0.5px solid var(--color-separator)',
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="px-4 py-4" style={{ borderBottom: '0.5px solid var(--color-separator)' }}>
|
||||
<NetBirdLogo full />
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<div className="flex-1 px-2.5 py-3 overflow-y-auto">
|
||||
<NavGroup items={mainItems} />
|
||||
<div className="my-2 mx-2.5" style={{ borderTop: '0.5px solid var(--color-separator)' }} />
|
||||
<NavGroup items={systemItems} />
|
||||
</div>
|
||||
|
||||
{/* Version footer */}
|
||||
<div className="px-4 py-2.5 text-[11px]" style={{ color: 'var(--color-text-quaternary)', borderTop: '0.5px solid var(--color-separator)' }}>
|
||||
NetBird Client
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
/* ── Icons (18px, stroke) ──────────────────────────────────────── */
|
||||
|
||||
function StatusIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function PeersIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function NetworksIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="5" r="2" />
|
||||
<circle cx="5" cy="19" r="2" />
|
||||
<circle cx="19" cy="19" r="2" />
|
||||
<line x1="12" y1="7" x2="5" y2="17" />
|
||||
<line x1="12" y1="7" x2="19" y2="17" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfilesIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DebugIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="m8 2 1.88 1.88" />
|
||||
<path d="M14.12 3.88 16 2" />
|
||||
<path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
|
||||
<path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
|
||||
<path d="M12 20v-9" />
|
||||
<path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
|
||||
<path d="M6 13H2" />
|
||||
<path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
|
||||
<path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
|
||||
<path d="M22 13h-4" />
|
||||
<path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function UpdateIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
||||
<path d="M3 3v5h5" />
|
||||
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
|
||||
<path d="M16 16h5v5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
function BirdMark({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
|
||||
<path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
|
||||
<path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NetBirdLogo({ full = false, className }: { full?: boolean; className?: string }) {
|
||||
if (!full) return <BirdMark className={className} />
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className ?? ''}`}>
|
||||
<BirdMark />
|
||||
<span className="text-lg font-bold tracking-wide" style={{ color: 'var(--color-text-primary)' }}>NETBIRD</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'destructive'
|
||||
size?: 'sm' | 'md'
|
||||
}
|
||||
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
primary: {
|
||||
backgroundColor: 'var(--color-accent)',
|
||||
color: '#ffffff',
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: 'var(--color-control-bg)',
|
||||
color: 'var(--color-text-primary)',
|
||||
},
|
||||
destructive: {
|
||||
backgroundColor: 'var(--color-status-red-bg)',
|
||||
color: 'var(--color-status-red)',
|
||||
},
|
||||
}
|
||||
|
||||
export default function Button({ variant = 'primary', size = 'md', className, style, children, ...props }: ButtonProps) {
|
||||
const variantStyle = styles[variant]
|
||||
const pad = size === 'sm' ? '4px 12px' : '6px 20px'
|
||||
const fontSize = size === 'sm' ? 12 : 13
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`inline-flex items-center justify-center gap-1.5 font-medium rounded-[8px] transition-opacity hover:opacity-85 active:opacity-75 disabled:opacity-50 disabled:cursor-not-allowed ${className ?? ''}`}
|
||||
style={{ padding: pad, fontSize, ...variantStyle, ...style }}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
interface CardProps {
|
||||
label?: string
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function Card({ label, children, className }: CardProps) {
|
||||
return (
|
||||
<div className={className}>
|
||||
{label && (
|
||||
<h3 className="text-[11px] font-semibold uppercase tracking-wide px-4 mb-1.5" style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
{label}
|
||||
</h3>
|
||||
)}
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
boxShadow: 'var(--shadow-card)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
interface CardRowProps {
|
||||
label?: string
|
||||
description?: string
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export default function CardRow({ label, description, children, className, onClick }: CardRowProps) {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-between gap-4 px-4 py-3 min-h-[44px] ${onClick ? 'cursor-pointer' : ''} ${className ?? ''}`}
|
||||
style={{ borderBottom: '0.5px solid var(--color-separator)' }}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
{label && (
|
||||
<span className="text-[13px]" style={{ color: 'var(--color-text-primary)' }}>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
{description && (
|
||||
<span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
{description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{children && <div className="shrink-0 flex items-center">{children}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string
|
||||
}
|
||||
|
||||
export default function Input({ label, className, style, ...props }: InputProps) {
|
||||
const input = (
|
||||
<input
|
||||
className={`w-full rounded-[var(--radius-control)] text-[13px] outline-none transition-shadow ${className ?? ''}`}
|
||||
style={{
|
||||
height: 28,
|
||||
padding: '0 8px',
|
||||
backgroundColor: 'var(--color-input-bg)',
|
||||
border: '0.5px solid var(--color-input-border)',
|
||||
color: 'var(--color-text-primary)',
|
||||
boxShadow: 'none',
|
||||
...style,
|
||||
}}
|
||||
onFocus={e => {
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(246,131,48,0.3)'
|
||||
e.currentTarget.style.borderColor = 'var(--color-accent)'
|
||||
}}
|
||||
onBlur={e => {
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
e.currentTarget.style.borderColor = 'var(--color-input-border)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
if (!label) return input
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-[11px] font-medium mb-1" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{label}
|
||||
</label>
|
||||
{input}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Button from './Button'
|
||||
|
||||
interface ModalProps {
|
||||
title: string
|
||||
message: string
|
||||
confirmLabel?: string
|
||||
cancelLabel?: string
|
||||
destructive?: boolean
|
||||
loading?: boolean
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export default function Modal({ title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive, loading, onConfirm, onCancel }: ModalProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}>
|
||||
<div
|
||||
className="max-w-sm w-full mx-4 p-5 rounded-[12px]"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-elevated)',
|
||||
boxShadow: 'var(--shadow-elevated)',
|
||||
}}
|
||||
>
|
||||
<h2 className="text-[15px] font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-[13px] mb-5" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{message}
|
||||
</p>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button variant="secondary" size="sm" onClick={onCancel}>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button
|
||||
variant={destructive ? 'destructive' : 'primary'}
|
||||
size="sm"
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{confirmLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
interface SearchInputProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
placeholder?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function SearchInput({ value, onChange, placeholder = 'Search...', className }: SearchInputProps) {
|
||||
return (
|
||||
<div className={`relative ${className ?? ''}`}>
|
||||
<svg
|
||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
|
||||
style={{ color: 'var(--color-text-tertiary)' }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<circle cx={11} cy={11} r={8} />
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
</svg>
|
||||
<input
|
||||
className="w-full text-[13px] outline-none transition-shadow"
|
||||
style={{
|
||||
height: 28,
|
||||
paddingLeft: 28,
|
||||
paddingRight: 8,
|
||||
backgroundColor: 'var(--color-control-bg)',
|
||||
border: '0.5px solid transparent',
|
||||
borderRadius: 999,
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
onFocus={e => {
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(246,131,48,0.3)'
|
||||
e.currentTarget.style.borderColor = 'var(--color-accent)'
|
||||
}}
|
||||
onBlur={e => {
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
e.currentTarget.style.borderColor = 'transparent'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
interface SegmentedControlProps<T extends string> {
|
||||
options: { value: T; label: string }[]
|
||||
value: T
|
||||
onChange: (value: T) => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function SegmentedControl<T extends string>({ options, value, onChange, className }: SegmentedControlProps<T>) {
|
||||
return (
|
||||
<div
|
||||
className={`inline-flex rounded-[8px] p-[3px] ${className ?? ''}`}
|
||||
style={{ backgroundColor: 'var(--color-control-bg)' }}
|
||||
>
|
||||
{options.map(opt => {
|
||||
const active = opt.value === value
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => onChange(opt.value)}
|
||||
className="relative px-3 py-1 text-[12px] font-medium rounded-[6px] transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: active ? 'var(--color-bg-elevated)' : 'transparent',
|
||||
color: active ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
|
||||
boxShadow: active ? 'var(--shadow-segment)' : 'none',
|
||||
minWidth: 64,
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
interface StatusBadgeProps {
|
||||
status: 'connected' | 'disconnected' | 'connecting' | string
|
||||
label?: string
|
||||
}
|
||||
|
||||
function getStatusColors(status: string): { dot: string; text: string; bg: string } {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'connected':
|
||||
return { dot: 'var(--color-status-green)', text: 'var(--color-status-green)', bg: 'var(--color-status-green-bg)' }
|
||||
case 'connecting':
|
||||
return { dot: 'var(--color-status-yellow)', text: 'var(--color-status-yellow)', bg: 'var(--color-status-yellow-bg)' }
|
||||
case 'disconnected':
|
||||
return { dot: 'var(--color-status-gray)', text: 'var(--color-text-secondary)', bg: 'var(--color-status-gray-bg)' }
|
||||
default:
|
||||
return { dot: 'var(--color-status-red)', text: 'var(--color-status-red)', bg: 'var(--color-status-red-bg)' }
|
||||
}
|
||||
}
|
||||
|
||||
export default function StatusBadge({ status, label }: StatusBadgeProps) {
|
||||
const colors = getStatusColors(status)
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium"
|
||||
style={{ backgroundColor: colors.bg, color: colors.text }}
|
||||
>
|
||||
<span
|
||||
className={`w-1.5 h-1.5 rounded-full ${status.toLowerCase() === 'connecting' ? 'animate-pulse' : ''}`}
|
||||
style={{ backgroundColor: colors.dot }}
|
||||
/>
|
||||
{label ?? status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/* Table primitives for macOS System Settings style tables */
|
||||
|
||||
export function TableContainer({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
boxShadow: 'var(--shadow-card)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableHeader({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '0.5px solid var(--color-separator)' }}>
|
||||
{children}
|
||||
</tr>
|
||||
</thead>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableHeaderCell({ children, onClick, className }: { children: React.ReactNode; onClick?: () => void; className?: string }) {
|
||||
return (
|
||||
<th
|
||||
className={`px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wide ${onClick ? 'cursor-pointer select-none' : ''} ${className ?? ''}`}
|
||||
style={{ color: 'var(--color-text-tertiary)' }}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</th>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableRow({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<tr
|
||||
className={`transition-colors group/row ${className ?? ''}`}
|
||||
style={{ borderBottom: '0.5px solid var(--color-separator)' }}
|
||||
onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-sidebar-hover)')}
|
||||
onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
|
||||
>
|
||||
{children}
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableCell({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<td className={`px-4 py-3 align-middle ${className ?? ''}`}>
|
||||
{children}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableFooter({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className="px-4 py-2 text-[11px]"
|
||||
style={{
|
||||
borderTop: '0.5px solid var(--color-separator)',
|
||||
color: 'var(--color-text-tertiary)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
interface ToggleProps {
|
||||
checked: boolean
|
||||
onChange: (value: boolean) => void
|
||||
small?: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function Toggle({ checked, onChange, small, disabled }: ToggleProps) {
|
||||
const w = small ? 30 : 38
|
||||
const h = small ? 18 : 22
|
||||
const thumb = small ? 14 : 18
|
||||
const travel = w - thumb - 4
|
||||
|
||||
return (
|
||||
<button
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(!checked)}
|
||||
className="relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
style={{
|
||||
width: w,
|
||||
height: h,
|
||||
backgroundColor: checked ? 'var(--color-accent)' : 'var(--color-control-bg)',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="block rounded-full bg-white transition-transform duration-200"
|
||||
style={{
|
||||
width: thumb,
|
||||
height: thumb,
|
||||
transform: `translateX(${checked ? travel : 0}px)`,
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.15), 0 0.5px 1px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ── Light-mode tokens (default) ────────────────────────────────── */
|
||||
:root {
|
||||
--color-bg-primary: #ffffff;
|
||||
--color-bg-secondary: #f5f5f7;
|
||||
--color-bg-tertiary: #e8e8ed;
|
||||
--color-bg-elevated: #ffffff;
|
||||
--color-bg-sidebar: rgba(245, 245, 247, 0.8);
|
||||
--color-sidebar-selected: rgba(0, 0, 0, 0.06);
|
||||
--color-sidebar-hover: rgba(0, 0, 0, 0.04);
|
||||
|
||||
--color-text-primary: #1d1d1f;
|
||||
--color-text-secondary: #6e6e73;
|
||||
--color-text-tertiary: #86868b;
|
||||
--color-text-quaternary: #aeaeb2;
|
||||
|
||||
--color-separator: rgba(0, 0, 0, 0.09);
|
||||
--color-separator-heavy: rgba(0, 0, 0, 0.16);
|
||||
|
||||
--color-accent: #f68330;
|
||||
--color-accent-hover: #e55311;
|
||||
|
||||
--color-status-green: #34c759;
|
||||
--color-status-green-bg: rgba(52, 199, 89, 0.12);
|
||||
--color-status-yellow: #ff9f0a;
|
||||
--color-status-yellow-bg: rgba(255, 159, 10, 0.12);
|
||||
--color-status-red: #ff3b30;
|
||||
--color-status-red-bg: rgba(255, 59, 48, 0.12);
|
||||
--color-status-gray: #8e8e93;
|
||||
--color-status-gray-bg: rgba(142, 142, 147, 0.12);
|
||||
|
||||
--color-input-bg: #ffffff;
|
||||
--color-input-border: rgba(0, 0, 0, 0.12);
|
||||
--color-input-focus: var(--color-accent);
|
||||
|
||||
--color-control-bg: rgba(116, 116, 128, 0.08);
|
||||
|
||||
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
|
||||
--shadow-elevated: 0 2px 8px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.08);
|
||||
--shadow-segment: 0 1px 3px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.06);
|
||||
|
||||
--radius-card: 10px;
|
||||
--radius-control: 6px;
|
||||
--radius-sidebar-item: 7px;
|
||||
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
/* ── Dark-mode tokens ───────────────────────────────────────────── */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg-primary: #1c1c1e;
|
||||
--color-bg-secondary: #2c2c2e;
|
||||
--color-bg-tertiary: #3a3a3c;
|
||||
--color-bg-elevated: #2c2c2e;
|
||||
--color-bg-sidebar: rgba(44, 44, 46, 0.8);
|
||||
--color-sidebar-selected: rgba(255, 255, 255, 0.08);
|
||||
--color-sidebar-hover: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--color-text-primary: #f5f5f7;
|
||||
--color-text-secondary: #98989d;
|
||||
--color-text-tertiary: #6e6e73;
|
||||
--color-text-quaternary: #48484a;
|
||||
|
||||
--color-separator: rgba(255, 255, 255, 0.08);
|
||||
--color-separator-heavy: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-status-green: #30d158;
|
||||
--color-status-green-bg: rgba(48, 209, 88, 0.15);
|
||||
--color-status-yellow: #ffd60a;
|
||||
--color-status-yellow-bg: rgba(255, 214, 10, 0.15);
|
||||
--color-status-red: #ff453a;
|
||||
--color-status-red-bg: rgba(255, 69, 58, 0.15);
|
||||
--color-status-gray: #636366;
|
||||
--color-status-gray-bg: rgba(99, 99, 102, 0.15);
|
||||
|
||||
--color-input-bg: rgba(255, 255, 255, 0.05);
|
||||
--color-input-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--color-control-bg: rgba(118, 118, 128, 0.24);
|
||||
|
||||
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
|
||||
--shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
|
||||
--shadow-segment: 0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual toggle for WebKitGTK fallback */
|
||||
[data-theme="dark"] {
|
||||
--color-bg-primary: #1c1c1e;
|
||||
--color-bg-secondary: #2c2c2e;
|
||||
--color-bg-tertiary: #3a3a3c;
|
||||
--color-bg-elevated: #2c2c2e;
|
||||
--color-bg-sidebar: rgba(44, 44, 46, 0.8);
|
||||
--color-sidebar-selected: rgba(255, 255, 255, 0.08);
|
||||
--color-sidebar-hover: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--color-text-primary: #f5f5f7;
|
||||
--color-text-secondary: #98989d;
|
||||
--color-text-tertiary: #6e6e73;
|
||||
--color-text-quaternary: #48484a;
|
||||
|
||||
--color-separator: rgba(255, 255, 255, 0.08);
|
||||
--color-separator-heavy: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-status-green: #30d158;
|
||||
--color-status-green-bg: rgba(48, 209, 88, 0.15);
|
||||
--color-status-yellow: #ffd60a;
|
||||
--color-status-yellow-bg: rgba(255, 214, 10, 0.15);
|
||||
--color-status-red: #ff453a;
|
||||
--color-status-red-bg: rgba(255, 69, 58, 0.15);
|
||||
--color-status-gray: #636366;
|
||||
--color-status-gray-bg: rgba(99, 99, 102, 0.15);
|
||||
|
||||
--color-input-bg: rgba(255, 255, 255, 0.05);
|
||||
--color-input-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--color-control-bg: rgba(118, 118, 128, 0.24);
|
||||
|
||||
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
|
||||
--shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
|
||||
--shadow-segment: 0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
@theme {
|
||||
--color-netbird-50: #fff6ed;
|
||||
--color-netbird-100: #feecd6;
|
||||
--color-netbird-150: #ffdfb8;
|
||||
--color-netbird-200: #ffd4a6;
|
||||
--color-netbird-300: #fab677;
|
||||
--color-netbird-400: #f68330;
|
||||
--color-netbird-DEFAULT: #f68330;
|
||||
--color-netbird-500: #f46d1b;
|
||||
--color-netbird-600: #e55311;
|
||||
--color-netbird-700: #be3e10;
|
||||
--color-netbird-800: #973215;
|
||||
--color-netbird-900: #7a2b14;
|
||||
--color-netbird-950: #421308;
|
||||
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Base ────────────────────────────────────────────────────────── */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Scrollbar (macOS-like thin) ────────────────────────────────── */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-text-quaternary);
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-tertiary);
|
||||
background-clip: content-box;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,180 @@
|
||||
import { useState } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { DebugBundleParams, DebugBundleResult } from '../bindings'
|
||||
import Card from '../components/ui/Card'
|
||||
import CardRow from '../components/ui/CardRow'
|
||||
import Toggle from '../components/ui/Toggle'
|
||||
import Input from '../components/ui/Input'
|
||||
import Button from '../components/ui/Button'
|
||||
|
||||
const DEFAULT_UPLOAD_URL = 'https://upload.netbird.io'
|
||||
|
||||
export default function Debug() {
|
||||
const [anonymize, setAnonymize] = useState(false)
|
||||
const [systemInfo, setSystemInfo] = useState(true)
|
||||
const [upload, setUpload] = useState(true)
|
||||
const [uploadUrl, setUploadUrl] = useState(DEFAULT_UPLOAD_URL)
|
||||
const [runForDuration, setRunForDuration] = useState(true)
|
||||
const [durationMins, setDurationMins] = useState(1)
|
||||
|
||||
const [running, setRunning] = useState(false)
|
||||
const [progress, setProgress] = useState('')
|
||||
const [result, setResult] = useState<DebugBundleResult | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
async function handleCreate() {
|
||||
if (upload && !uploadUrl) {
|
||||
setError('Upload URL is required when upload is enabled')
|
||||
return
|
||||
}
|
||||
|
||||
setRunning(true)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
setProgress(runForDuration ? `Running with trace logs for ${durationMins} minute(s)\u2026` : 'Creating debug bundle\u2026')
|
||||
|
||||
const params: DebugBundleParams = {
|
||||
anonymize,
|
||||
systemInfo,
|
||||
upload,
|
||||
uploadUrl: upload ? uploadUrl : '',
|
||||
runDurationMins: runForDuration ? durationMins : 0,
|
||||
enablePersistence: true,
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await invoke<DebugBundleResult>('create_debug_bundle', { params })
|
||||
if (res) {
|
||||
setResult(res)
|
||||
setProgress('Bundle created successfully')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[Debug] CreateDebugBundle error:', e)
|
||||
setError(String(e))
|
||||
setProgress('')
|
||||
} finally {
|
||||
setRunning(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>Debug</h1>
|
||||
<p className="text-[13px] mb-6" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Create a debug bundle to help troubleshoot issues with NetBird.
|
||||
</p>
|
||||
|
||||
<Card label="OPTIONS" className="mb-5">
|
||||
<CardRow label="Anonymize sensitive information">
|
||||
<Toggle checked={anonymize} onChange={setAnonymize} />
|
||||
</CardRow>
|
||||
<CardRow label="Include system information">
|
||||
<Toggle checked={systemInfo} onChange={setSystemInfo} />
|
||||
</CardRow>
|
||||
<CardRow label="Upload bundle automatically">
|
||||
<Toggle checked={upload} onChange={setUpload} />
|
||||
</CardRow>
|
||||
</Card>
|
||||
|
||||
{upload && (
|
||||
<Card label="UPLOAD" className="mb-5">
|
||||
<CardRow label="Upload URL">
|
||||
<Input
|
||||
value={uploadUrl}
|
||||
onChange={e => setUploadUrl(e.target.value)}
|
||||
disabled={running}
|
||||
style={{ width: 240 }}
|
||||
/>
|
||||
</CardRow>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card label="TRACE LOGGING" className="mb-5">
|
||||
<CardRow label="Run with trace logs before creating bundle">
|
||||
<Toggle checked={runForDuration} onChange={setRunForDuration} />
|
||||
</CardRow>
|
||||
{runForDuration && (
|
||||
<CardRow label="Duration">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={60}
|
||||
value={durationMins}
|
||||
onChange={e => setDurationMins(Math.max(1, parseInt(e.target.value) || 1))}
|
||||
disabled={running}
|
||||
style={{ width: 64, textAlign: 'center' }}
|
||||
/>
|
||||
<span className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{durationMins === 1 ? 'minute' : 'minutes'}
|
||||
</span>
|
||||
</div>
|
||||
</CardRow>
|
||||
)}
|
||||
{runForDuration && (
|
||||
<div className="px-4 py-2 text-[11px]" style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
Note: NetBird will be brought up and down during collection.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
|
||||
style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{progress && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
boxShadow: 'var(--shadow-card)',
|
||||
color: running ? 'var(--color-status-yellow)' : 'var(--color-status-green)',
|
||||
}}
|
||||
>
|
||||
<span className={running ? 'animate-pulse' : ''}>{progress}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<Card className="mb-4">
|
||||
<div className="px-4 py-3 space-y-2 text-[13px]">
|
||||
{result.uploadedKey ? (
|
||||
<>
|
||||
<p style={{ color: 'var(--color-status-green)' }} className="font-medium">Bundle uploaded successfully!</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span style={{ color: 'var(--color-text-secondary)' }}>Upload key:</span>
|
||||
<code
|
||||
className="px-2 py-0.5 rounded text-[12px] font-mono"
|
||||
style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
|
||||
>
|
||||
{result.uploadedKey}
|
||||
</code>
|
||||
</div>
|
||||
</>
|
||||
) : result.uploadFailureReason ? (
|
||||
<p style={{ color: 'var(--color-status-yellow)' }}>Upload failed: {result.uploadFailureReason}</p>
|
||||
) : null}
|
||||
<div className="flex items-center gap-2">
|
||||
<span style={{ color: 'var(--color-text-secondary)' }}>Local path:</span>
|
||||
<code
|
||||
className="px-2 py-0.5 rounded text-[12px] font-mono break-all"
|
||||
style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
|
||||
>
|
||||
{result.localPath}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button onClick={handleCreate} disabled={running}>
|
||||
{running ? 'Running\u2026' : 'Create Debug Bundle'}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { NetworkInfo } from '../bindings'
|
||||
import SearchInput from '../components/ui/SearchInput'
|
||||
import Button from '../components/ui/Button'
|
||||
import Toggle from '../components/ui/Toggle'
|
||||
import SegmentedControl from '../components/ui/SegmentedControl'
|
||||
import { TableContainer, TableHeader, TableHeaderCell, TableRow, TableCell, TableFooter } from '../components/ui/Table'
|
||||
|
||||
type Tab = 'all' | 'overlapping' | 'exit-node'
|
||||
type SortKey = 'id' | 'range'
|
||||
type SortDir = 'asc' | 'desc'
|
||||
|
||||
const tabOptions: { value: Tab; label: string }[] = [
|
||||
{ value: 'all', label: 'All Networks' },
|
||||
{ value: 'overlapping', label: 'Overlapping' },
|
||||
{ value: 'exit-node', label: 'Exit Nodes' },
|
||||
]
|
||||
|
||||
export default function Networks() {
|
||||
const [networks, setNetworks] = useState<NetworkInfo[]>([])
|
||||
const [tab, setTab] = useState<Tab>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortKey, setSortKey] = useState<SortKey>('id')
|
||||
const [sortDir, setSortDir] = useState<SortDir>('asc')
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
let command: string
|
||||
if (tab === 'all') command = 'list_networks'
|
||||
else if (tab === 'overlapping') command = 'list_overlapping_networks'
|
||||
else command = 'list_exit_nodes'
|
||||
const data = await invoke<NetworkInfo[]>(command)
|
||||
setNetworks(data ?? [])
|
||||
} catch (e) {
|
||||
console.error('[Networks] load error:', e)
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [tab])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
const id = setInterval(load, 10000)
|
||||
return () => clearInterval(id)
|
||||
}, [load])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let list = networks
|
||||
if (search) {
|
||||
const q = search.toLowerCase()
|
||||
list = list.filter(n =>
|
||||
n.id.toLowerCase().includes(q) ||
|
||||
n.range?.toLowerCase().includes(q) ||
|
||||
n.domains?.some(d => d.toLowerCase().includes(q))
|
||||
)
|
||||
}
|
||||
return [...list].sort((a, b) => {
|
||||
const aVal = sortKey === 'id' ? a.id : (a.range ?? '')
|
||||
const bVal = sortKey === 'id' ? b.id : (b.range ?? '')
|
||||
const cmp = aVal.localeCompare(bVal)
|
||||
return sortDir === 'asc' ? cmp : -cmp
|
||||
})
|
||||
}, [networks, search, sortKey, sortDir])
|
||||
|
||||
function toggleSort(key: SortKey) {
|
||||
if (sortKey === key) {
|
||||
setSortDir(d => d === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortKey(key)
|
||||
setSortDir('asc')
|
||||
}
|
||||
}
|
||||
|
||||
async function toggle(id: string, selected: boolean) {
|
||||
try {
|
||||
if (selected) await invoke('deselect_network', { id })
|
||||
else await invoke('select_network', { id })
|
||||
await load()
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
}
|
||||
}
|
||||
|
||||
async function selectAll() {
|
||||
try {
|
||||
await invoke('select_all_networks')
|
||||
await load()
|
||||
} catch (e) { setError(String(e)) }
|
||||
}
|
||||
|
||||
async function deselectAll() {
|
||||
try {
|
||||
await invoke('deselect_all_networks')
|
||||
await load()
|
||||
} catch (e) { setError(String(e)) }
|
||||
}
|
||||
|
||||
const selectedCount = networks.filter(n => n.selected).length
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Networks</h1>
|
||||
|
||||
<SegmentedControl options={tabOptions} value={tab} onChange={setTab} className="mb-5" />
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={setSearch}
|
||||
placeholder="Search by name, range or domain..."
|
||||
className="flex-1 max-w-sm"
|
||||
/>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<Button variant="secondary" size="sm" onClick={selectAll}>Select All</Button>
|
||||
<Button variant="secondary" size="sm" onClick={deselectAll}>Deselect All</Button>
|
||||
<Button variant="secondary" size="sm" onClick={load}>Refresh</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[12px]"
|
||||
style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedCount > 0 && (
|
||||
<div className="mb-3 text-[12px]" style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
{selectedCount} of {networks.length} network{networks.length !== 1 ? 's' : ''} selected
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && networks.length === 0 ? (
|
||||
<TableSkeleton />
|
||||
) : filtered.length === 0 && networks.length === 0 ? (
|
||||
<EmptyState tab={tab} />
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="py-12 text-center text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
No networks match your search.
|
||||
<button onClick={() => setSearch('')} className="ml-2 hover:underline" style={{ color: 'var(--color-accent)' }}>Clear search</button>
|
||||
</div>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<table className="w-full text-[13px]">
|
||||
<TableHeader>
|
||||
<SortableHeader label="Network" sortKey="id" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<SortableHeader label="Range / Domains" sortKey="range" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<TableHeaderCell>Resolved IPs</TableHeaderCell>
|
||||
<TableHeaderCell className="w-20">Active</TableHeaderCell>
|
||||
</TableHeader>
|
||||
<tbody>
|
||||
{filtered.map(n => (
|
||||
<NetworkRow key={n.id} network={n} onToggle={() => toggle(n.id, n.selected)} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<TableFooter>
|
||||
Showing {filtered.length} of {networks.length} network{networks.length !== 1 ? 's' : ''}
|
||||
</TableFooter>
|
||||
</TableContainer>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Row ---- */
|
||||
|
||||
function NetworkRow({ network, onToggle }: { network: NetworkInfo; onToggle: () => void }) {
|
||||
const domains = network.domains ?? []
|
||||
const resolvedEntries = Object.entries(network.resolvedIPs ?? {})
|
||||
const hasDomains = domains.length > 0
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3 min-w-[180px]">
|
||||
<NetworkSquare name={network.id} active={network.selected} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-[13px]" style={{ color: 'var(--color-text-primary)' }}>{network.id}</span>
|
||||
{hasDomains && domains.length > 1 && (
|
||||
<span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>{domains.length} domains</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{hasDomains ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{domains.slice(0, 2).map(d => (
|
||||
<span key={d} className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{d}</span>
|
||||
))}
|
||||
{domains.length > 2 && (
|
||||
<span className="text-[11px]" style={{ color: 'var(--color-text-tertiary)' }} title={domains.join(', ')}>+{domains.length - 2} more</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{network.range}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{resolvedEntries.length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{resolvedEntries.slice(0, 2).map(([domain, ips]) => (
|
||||
<span key={domain} className="font-mono text-[11px]" style={{ color: 'var(--color-text-tertiary)' }} title={`${domain}: ${ips.join(', ')}`}>
|
||||
{ips[0]}{ips.length > 1 && <span style={{ color: 'var(--color-text-quaternary)' }}> +{ips.length - 1}</span>}
|
||||
</span>
|
||||
))}
|
||||
{resolvedEntries.length > 2 && (
|
||||
<span className="text-[11px]" style={{ color: 'var(--color-text-quaternary)' }}>+{resolvedEntries.length - 2} more</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Toggle checked={network.selected} onChange={onToggle} small />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Network Icon Square ---- */
|
||||
|
||||
function NetworkSquare({ name, active }: { name: string; active: boolean }) {
|
||||
const initials = name.substring(0, 2).toUpperCase()
|
||||
return (
|
||||
<div
|
||||
className="relative h-10 w-10 shrink-0 rounded-[var(--radius-control)] flex items-center justify-center text-[13px] font-medium uppercase"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-tertiary)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
<span
|
||||
className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full"
|
||||
style={{
|
||||
backgroundColor: active ? 'var(--color-status-green)' : 'var(--color-status-gray)',
|
||||
border: '2px solid var(--color-bg-secondary)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Sortable Header ---- */
|
||||
|
||||
function SortableHeader({ label, sortKey, currentKey, dir, onSort }: {
|
||||
label: string; sortKey: SortKey; currentKey: SortKey; dir: SortDir; onSort: (k: SortKey) => void
|
||||
}) {
|
||||
const isActive = currentKey === sortKey
|
||||
return (
|
||||
<TableHeaderCell onClick={() => onSort(sortKey)}>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{label}
|
||||
{isActive && (
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
{dir === 'asc' ? <path d="M5 15l7-7 7 7" /> : <path d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
</TableHeaderCell>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Empty State ---- */
|
||||
|
||||
function EmptyState({ tab }: { tab: Tab }) {
|
||||
const msg = tab === 'exit-node'
|
||||
? 'No exit nodes configured.'
|
||||
: tab === 'overlapping'
|
||||
? 'No overlapping networks detected.'
|
||||
: 'No networks found.'
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] py-16 flex flex-col items-center gap-3"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
boxShadow: 'var(--shadow-card)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="h-12 w-12 rounded-[var(--radius-card)] flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
|
||||
>
|
||||
<svg className="w-6 h-6" style={{ color: 'var(--color-text-tertiary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5a17.92 17.92 0 01-8.716-2.247m0 0A8.966 8.966 0 013 12c0-1.777.514-3.434 1.4-4.832" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{msg}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Loading Skeleton ---- */
|
||||
|
||||
function TableSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] overflow-hidden"
|
||||
style={{ backgroundColor: 'var(--color-bg-secondary)', boxShadow: 'var(--shadow-card)' }}
|
||||
>
|
||||
<div className="h-11" style={{ backgroundColor: 'var(--color-bg-tertiary)', opacity: 0.5 }} />
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-4 px-4 py-4 animate-pulse"
|
||||
style={{ borderBottom: '0.5px solid var(--color-separator)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="w-10 h-10 rounded-[var(--radius-control)]" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-24 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
</div>
|
||||
<div className="h-4 w-32 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-20 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-6 w-12 rounded-full" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,332 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { PeerInfo } from '../bindings'
|
||||
import SearchInput from '../components/ui/SearchInput'
|
||||
import Button from '../components/ui/Button'
|
||||
import StatusBadge from '../components/ui/StatusBadge'
|
||||
import { TableContainer, TableHeader, TableHeaderCell, TableRow, TableCell, TableFooter } from '../components/ui/Table'
|
||||
|
||||
type SortKey = 'fqdn' | 'ip' | 'status' | 'latency'
|
||||
type SortDir = 'asc' | 'desc'
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B'
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024))
|
||||
return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`
|
||||
}
|
||||
|
||||
function formatLatency(ms: number): string {
|
||||
if (ms <= 0) return '\u2014'
|
||||
if (ms < 1) return '<1 ms'
|
||||
return `${ms.toFixed(1)} ms`
|
||||
}
|
||||
|
||||
function peerName(p: PeerInfo): string {
|
||||
if (p.fqdn) return p.fqdn.replace(/\.netbird\.cloud\.?$/, '')
|
||||
return p.ip || p.pubKey.substring(0, 8)
|
||||
}
|
||||
|
||||
export default function Peers() {
|
||||
const [peers, setPeers] = useState<PeerInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortKey, setSortKey] = useState<SortKey>('fqdn')
|
||||
const [sortDir, setSortDir] = useState<SortDir>('asc')
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await invoke<PeerInfo[]>('get_peers')
|
||||
setPeers(data ?? [])
|
||||
} catch (e) {
|
||||
console.error('[Peers] load error:', e)
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
const id = setInterval(load, 10000)
|
||||
return () => clearInterval(id)
|
||||
}, [load])
|
||||
|
||||
const connectedCount = useMemo(() => peers.filter(p => p.connStatus === 'Connected').length, [peers])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let list = peers
|
||||
if (search) {
|
||||
const q = search.toLowerCase()
|
||||
list = list.filter(p =>
|
||||
peerName(p).toLowerCase().includes(q) ||
|
||||
p.ip?.toLowerCase().includes(q) ||
|
||||
p.connStatus?.toLowerCase().includes(q) ||
|
||||
p.fqdn?.toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
return [...list].sort((a, b) => {
|
||||
let cmp = 0
|
||||
switch (sortKey) {
|
||||
case 'fqdn': cmp = peerName(a).localeCompare(peerName(b)); break
|
||||
case 'ip': cmp = (a.ip ?? '').localeCompare(b.ip ?? ''); break
|
||||
case 'status': cmp = (a.connStatus ?? '').localeCompare(b.connStatus ?? ''); break
|
||||
case 'latency': cmp = (a.latencyMs ?? 0) - (b.latencyMs ?? 0); break
|
||||
}
|
||||
return sortDir === 'asc' ? cmp : -cmp
|
||||
})
|
||||
}, [peers, search, sortKey, sortDir])
|
||||
|
||||
function toggleSort(key: SortKey) {
|
||||
if (sortKey === key) {
|
||||
setSortDir(d => d === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortKey(key)
|
||||
setSortDir('asc')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Peers</h1>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={setSearch}
|
||||
placeholder="Search by name, IP or status..."
|
||||
className="flex-1 max-w-sm"
|
||||
/>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<Button variant="secondary" size="sm" onClick={load}>Refresh</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[12px]"
|
||||
style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{peers.length > 0 && (
|
||||
<div className="mb-3 text-[12px]" style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
{connectedCount} of {peers.length} peer{peers.length !== 1 ? 's' : ''} connected
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && peers.length === 0 ? (
|
||||
<TableSkeleton />
|
||||
) : peers.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="py-12 text-center text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
No peers match your search.
|
||||
<button onClick={() => setSearch('')} className="ml-2 hover:underline" style={{ color: 'var(--color-accent)' }}>Clear search</button>
|
||||
</div>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<table className="w-full text-[13px]">
|
||||
<TableHeader>
|
||||
<SortableHeader label="Peer" sortKey="fqdn" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<SortableHeader label="IP" sortKey="ip" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<SortableHeader label="Status" sortKey="status" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<TableHeaderCell>Connection</TableHeaderCell>
|
||||
<SortableHeader label="Latency" sortKey="latency" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
|
||||
<TableHeaderCell>Transfer</TableHeaderCell>
|
||||
</TableHeader>
|
||||
<tbody>
|
||||
{filtered.map(p => (
|
||||
<PeerRow key={p.pubKey} peer={p} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<TableFooter>
|
||||
Showing {filtered.length} of {peers.length} peer{peers.length !== 1 ? 's' : ''}
|
||||
</TableFooter>
|
||||
</TableContainer>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Row ---- */
|
||||
|
||||
function PeerRow({ peer }: { peer: PeerInfo }) {
|
||||
const name = peerName(peer)
|
||||
const connected = peer.connStatus === 'Connected'
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3 min-w-[160px]">
|
||||
<PeerSquare name={name} connected={connected} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-[13px] truncate max-w-[200px]" style={{ color: 'var(--color-text-primary)' }} title={peer.fqdn}>{name}</span>
|
||||
{peer.networks && peer.networks.length > 0 && (
|
||||
<span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>{peer.networks.length} network{peer.networks.length !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<span className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{peer.ip || '\u2014'}</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<StatusBadge status={peer.connStatus} />
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{connected ? (
|
||||
<>
|
||||
<span className="text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{peer.relayed ? 'Relayed' : 'Direct'}{' '}
|
||||
{peer.rosenpassEnabled && (
|
||||
<span style={{ color: 'var(--color-status-green)' }} title="Rosenpass post-quantum security enabled">PQ</span>
|
||||
)}
|
||||
</span>
|
||||
{peer.relayed && peer.relayAddress && (
|
||||
<span className="text-[11px] font-mono" style={{ color: 'var(--color-text-tertiary)' }} title={peer.relayAddress}>
|
||||
via {peer.relayAddress.length > 24 ? peer.relayAddress.substring(0, 24) + '...' : peer.relayAddress}
|
||||
</span>
|
||||
)}
|
||||
{!peer.relayed && peer.localIceType && (
|
||||
<span className="text-[11px]" style={{ color: 'var(--color-text-tertiary)' }}>{peer.localIceType} / {peer.remoteIceType}</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<span className="text-[13px]" style={{ color: peer.latencyMs > 0 ? 'var(--color-text-secondary)' : 'var(--color-text-quaternary)' }}>
|
||||
{formatLatency(peer.latencyMs)}
|
||||
</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{(peer.bytesRx > 0 || peer.bytesTx > 0) ? (
|
||||
<div className="flex flex-col gap-0.5 text-[11px]">
|
||||
<span style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
<span style={{ color: 'var(--color-status-green)' }} title="Received">↓</span> {formatBytes(peer.bytesRx)}
|
||||
</span>
|
||||
<span style={{ color: 'var(--color-text-tertiary)' }}>
|
||||
<span style={{ color: 'var(--color-accent)' }} title="Sent">↑</span> {formatBytes(peer.bytesTx)}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Peer Icon Square ---- */
|
||||
|
||||
function PeerSquare({ name, connected }: { name: string; connected: boolean }) {
|
||||
const initials = name.substring(0, 2).toUpperCase()
|
||||
return (
|
||||
<div
|
||||
className="relative h-10 w-10 shrink-0 rounded-[var(--radius-control)] flex items-center justify-center text-[13px] font-medium uppercase"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-tertiary)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
<span
|
||||
className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full"
|
||||
style={{
|
||||
backgroundColor: connected ? 'var(--color-status-green)' : 'var(--color-status-gray)',
|
||||
border: '2px solid var(--color-bg-secondary)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Sortable Header ---- */
|
||||
|
||||
function SortableHeader({ label, sortKey, currentKey, dir, onSort }: {
|
||||
label: string; sortKey: SortKey; currentKey: SortKey; dir: SortDir; onSort: (k: SortKey) => void
|
||||
}) {
|
||||
const isActive = currentKey === sortKey
|
||||
return (
|
||||
<TableHeaderCell onClick={() => onSort(sortKey)}>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{label}
|
||||
{isActive && (
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
{dir === 'asc' ? <path d="M5 15l7-7 7 7" /> : <path d="M19 9l-7 7-7-7" />}
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
</TableHeaderCell>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Empty State ---- */
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] py-16 flex flex-col items-center gap-3"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
boxShadow: 'var(--shadow-card)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="h-12 w-12 rounded-[var(--radius-card)] flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
|
||||
>
|
||||
<svg className="w-6 h-6" style={{ color: 'var(--color-text-tertiary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>No peers found. Connect to a network to see peers.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Loading Skeleton ---- */
|
||||
|
||||
function TableSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className="rounded-[var(--radius-card)] overflow-hidden"
|
||||
style={{ backgroundColor: 'var(--color-bg-secondary)', boxShadow: 'var(--shadow-card)' }}
|
||||
>
|
||||
<div className="h-11" style={{ backgroundColor: 'var(--color-bg-tertiary)', opacity: 0.5 }} />
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-4 px-4 py-4 animate-pulse"
|
||||
style={{ borderBottom: '0.5px solid var(--color-separator)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="w-10 h-10 rounded-[var(--radius-control)]" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-28 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
</div>
|
||||
<div className="h-4 w-24 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-5 w-20 rounded-full" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-16 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-14 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
<div className="h-4 w-16 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { ProfileInfo } from '../bindings'
|
||||
import Card from '../components/ui/Card'
|
||||
import CardRow from '../components/ui/CardRow'
|
||||
import Button from '../components/ui/Button'
|
||||
import Input from '../components/ui/Input'
|
||||
import Modal from '../components/ui/Modal'
|
||||
|
||||
export default function Profiles() {
|
||||
const [profiles, setProfiles] = useState<ProfileInfo[]>([])
|
||||
const [newName, setNewName] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
const [confirm, setConfirm] = useState<{ action: string; profile: string } | null>(null)
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const data = await invoke<ProfileInfo[]>('list_profiles')
|
||||
setProfiles(data ?? [])
|
||||
} catch (e) {
|
||||
console.error('[Profiles] ListProfiles error:', e)
|
||||
setError(String(e))
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { refresh() }, [])
|
||||
|
||||
function showInfo(msg: string) {
|
||||
setInfo(msg)
|
||||
setTimeout(() => setInfo(null), 3000)
|
||||
}
|
||||
|
||||
async function handleConfirm() {
|
||||
if (!confirm) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
if (confirm.action === 'switch') await invoke('switch_profile', { profileName: confirm.profile })
|
||||
else if (confirm.action === 'remove') await invoke('remove_profile', { profileName: confirm.profile })
|
||||
else if (confirm.action === 'logout') await invoke('logout', { profileName: confirm.profile })
|
||||
showInfo(`${confirm.action === 'switch' ? 'Switched to' : confirm.action === 'remove' ? 'Removed' : 'Deregistered from'} profile '${confirm.profile}'`)
|
||||
await refresh()
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setConfirm(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAdd() {
|
||||
if (!newName.trim()) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
await invoke('add_profile', { profileName: newName.trim() })
|
||||
showInfo(`Profile '${newName.trim()}' created`)
|
||||
setNewName('')
|
||||
await refresh()
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function confirmTitle(): string {
|
||||
if (!confirm) return ''
|
||||
if (confirm.action === 'switch') return 'Switch Profile'
|
||||
if (confirm.action === 'remove') return 'Remove Profile'
|
||||
return 'Deregister Profile'
|
||||
}
|
||||
|
||||
function confirmMessage(): string {
|
||||
if (!confirm) return ''
|
||||
if (confirm.action === 'switch') return `Switch to profile '${confirm.profile}'?`
|
||||
if (confirm.action === 'remove') return `Delete profile '${confirm.profile}'? This cannot be undone.`
|
||||
return `Deregister from '${confirm.profile}'?`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Profiles</h1>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
|
||||
style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{info && (
|
||||
<div
|
||||
className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
|
||||
style={{ backgroundColor: 'var(--color-status-green-bg)', color: 'var(--color-status-green)' }}
|
||||
>
|
||||
{info}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{confirm && (
|
||||
<Modal
|
||||
title={confirmTitle()}
|
||||
message={confirmMessage()}
|
||||
destructive={confirm.action === 'remove'}
|
||||
loading={loading}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={() => setConfirm(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Profile list */}
|
||||
<Card label="PROFILES" className="mb-6">
|
||||
{profiles.length === 0 ? (
|
||||
<div className="p-4 text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>No profiles found.</div>
|
||||
) : (
|
||||
profiles.map(p => (
|
||||
<CardRow key={p.name} label={p.name}>
|
||||
<div className="flex items-center gap-2">
|
||||
{p.isActive && (
|
||||
<span
|
||||
className="text-[11px] px-2 py-0.5 rounded-full font-medium"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-status-green-bg)',
|
||||
color: 'var(--color-status-green)',
|
||||
}}
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
{!p.isActive && (
|
||||
<Button variant="primary" size="sm" onClick={() => setConfirm({ action: 'switch', profile: p.name })}>
|
||||
Select
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="secondary" size="sm" onClick={() => setConfirm({ action: 'logout', profile: p.name })}>
|
||||
Deregister
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" onClick={() => setConfirm({ action: 'remove', profile: p.name })}>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</CardRow>
|
||||
))
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Add new profile */}
|
||||
<Card label="ADD PROFILE">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<Input
|
||||
className="flex-1"
|
||||
placeholder="New profile name"
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleAdd()}
|
||||
/>
|
||||
<Button onClick={handleAdd} disabled={!newName.trim() || loading} size="sm">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { ConfigInfo } from '../bindings'
|
||||
import Card from '../components/ui/Card'
|
||||
import CardRow from '../components/ui/CardRow'
|
||||
import Toggle from '../components/ui/Toggle'
|
||||
import Input from '../components/ui/Input'
|
||||
import Button from '../components/ui/Button'
|
||||
import SegmentedControl from '../components/ui/SegmentedControl'
|
||||
|
||||
async function getConfig(): Promise<ConfigInfo | null> {
|
||||
try {
|
||||
return await invoke<ConfigInfo>('get_config')
|
||||
} catch (e) {
|
||||
console.error('[Settings] GetConfig error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function setConfig(cfg: ConfigInfo): Promise<void> {
|
||||
await invoke('set_config', { cfg })
|
||||
}
|
||||
|
||||
type Tab = 'connection' | 'network' | 'security'
|
||||
|
||||
const tabOptions: { value: Tab; label: string }[] = [
|
||||
{ value: 'connection', label: 'Connection' },
|
||||
{ value: 'network', label: 'Network' },
|
||||
{ value: 'security', label: 'Security' },
|
||||
]
|
||||
|
||||
export default function Settings() {
|
||||
const [config, setConfigState] = useState<ConfigInfo | null>(null)
|
||||
const [tab, setTab] = useState<Tab>('connection')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getConfig().then(c => { if (c) setConfigState(c) })
|
||||
}, [])
|
||||
|
||||
function update<K extends keyof ConfigInfo>(key: K, value: ConfigInfo[K]) {
|
||||
setConfigState(prev => prev ? { ...prev, [key]: value } : prev)
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!config) return
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setSaved(false)
|
||||
try {
|
||||
await setConfig(config)
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!config) {
|
||||
return <div style={{ color: 'var(--color-text-secondary)' }}>Loading settings\u2026</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Settings</h1>
|
||||
|
||||
<SegmentedControl options={tabOptions} value={tab} onChange={setTab} className="mb-6" />
|
||||
|
||||
{tab === 'connection' && (
|
||||
<>
|
||||
<Card label="SERVER CONFIGURATION" className="mb-5">
|
||||
<CardRow label="Management URL">
|
||||
<Input
|
||||
value={config.managementUrl}
|
||||
onChange={e => update('managementUrl', e.target.value)}
|
||||
placeholder="https://api.netbird.io:443"
|
||||
style={{ width: 240 }}
|
||||
/>
|
||||
</CardRow>
|
||||
<CardRow label="Admin URL">
|
||||
<Input
|
||||
value={config.adminUrl}
|
||||
onChange={e => update('adminUrl', e.target.value)}
|
||||
style={{ width: 240 }}
|
||||
/>
|
||||
</CardRow>
|
||||
<CardRow label="Pre-shared Key">
|
||||
<Input
|
||||
type="password"
|
||||
value={config.preSharedKey}
|
||||
onChange={e => update('preSharedKey', e.target.value)}
|
||||
placeholder="Leave empty to clear"
|
||||
style={{ width: 240 }}
|
||||
/>
|
||||
</CardRow>
|
||||
</Card>
|
||||
|
||||
<Card label="BEHAVIOR" className="mb-5">
|
||||
<CardRow label="Connect automatically">
|
||||
<Toggle checked={!config.disableAutoConnect} onChange={v => update('disableAutoConnect', !v)} />
|
||||
</CardRow>
|
||||
<CardRow label="Enable notifications">
|
||||
<Toggle checked={!config.disableNotifications} onChange={v => update('disableNotifications', !v)} />
|
||||
</CardRow>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'network' && (
|
||||
<>
|
||||
<Card label="INTERFACE" className="mb-5">
|
||||
<CardRow label="Interface Name">
|
||||
<Input
|
||||
value={config.interfaceName}
|
||||
onChange={e => update('interfaceName', e.target.value)}
|
||||
placeholder="netbird0"
|
||||
style={{ width: 180 }}
|
||||
/>
|
||||
</CardRow>
|
||||
<CardRow label="WireGuard Port">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={65535}
|
||||
value={config.wireguardPort}
|
||||
onChange={e => update('wireguardPort', parseInt(e.target.value) || 0)}
|
||||
placeholder="51820"
|
||||
style={{ width: 100 }}
|
||||
/>
|
||||
</CardRow>
|
||||
</Card>
|
||||
|
||||
<Card label="OPTIONS" className="mb-5">
|
||||
<CardRow label="Lazy connections" description="Experimental">
|
||||
<Toggle checked={config.lazyConnectionEnabled} onChange={v => update('lazyConnectionEnabled', v)} />
|
||||
</CardRow>
|
||||
<CardRow label="Block inbound connections">
|
||||
<Toggle checked={config.blockInbound} onChange={v => update('blockInbound', v)} />
|
||||
</CardRow>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'security' && (
|
||||
<Card label="SECURITY" className="mb-5">
|
||||
<CardRow label="Allow SSH connections">
|
||||
<Toggle checked={config.serverSshAllowed} onChange={v => update('serverSshAllowed', v)} />
|
||||
</CardRow>
|
||||
<CardRow label="Rosenpass post-quantum security">
|
||||
<Toggle checked={config.rosenpassEnabled} onChange={v => update('rosenpassEnabled', v)} />
|
||||
</CardRow>
|
||||
<CardRow label="Rosenpass permissive mode">
|
||||
<Toggle checked={config.rosenpassPermissive} onChange={v => update('rosenpassPermissive', v)} />
|
||||
</CardRow>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? 'Saving\u2026' : 'Save'}
|
||||
</Button>
|
||||
{saved && <span className="text-[13px]" style={{ color: 'var(--color-status-green)' }}>Saved!</span>}
|
||||
{error && <span className="text-[13px]" style={{ color: 'var(--color-status-red)' }}>{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { listen } from '@tauri-apps/api/event'
|
||||
import type { StatusInfo } from '../bindings'
|
||||
import Card from '../components/ui/Card'
|
||||
import CardRow from '../components/ui/CardRow'
|
||||
import Button from '../components/ui/Button'
|
||||
|
||||
async function getStatus(): Promise<StatusInfo | null> {
|
||||
try {
|
||||
return await invoke<StatusInfo>('get_status')
|
||||
} catch (e) {
|
||||
console.error('[Dashboard] GetStatus error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function statusDotColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'Connected': return 'var(--color-status-green)'
|
||||
case 'Connecting': return 'var(--color-status-yellow)'
|
||||
case 'Disconnected': return 'var(--color-status-gray)'
|
||||
default: return 'var(--color-status-red)'
|
||||
}
|
||||
}
|
||||
|
||||
function statusTextColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'Connected': return 'var(--color-status-green)'
|
||||
case 'Connecting': return 'var(--color-status-yellow)'
|
||||
case 'Disconnected': return 'var(--color-text-secondary)'
|
||||
default: return 'var(--color-status-red)'
|
||||
}
|
||||
}
|
||||
|
||||
export default function Status() {
|
||||
const [status, setStatus] = useState<StatusInfo | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const s = await getStatus()
|
||||
if (s) setStatus(s)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
const id = setInterval(refresh, 10000)
|
||||
const unlisten = listen<StatusInfo>('status-changed', (event) => {
|
||||
if (event.payload) setStatus(event.payload)
|
||||
})
|
||||
return () => {
|
||||
clearInterval(id)
|
||||
unlisten.then(fn => fn())
|
||||
}
|
||||
}, [refresh])
|
||||
|
||||
async function handleConnect() {
|
||||
setBusy(true)
|
||||
setError(null)
|
||||
try {
|
||||
await invoke('connect')
|
||||
await refresh()
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDisconnect() {
|
||||
setBusy(true)
|
||||
setError(null)
|
||||
try {
|
||||
await invoke('disconnect')
|
||||
await refresh()
|
||||
} catch (e) {
|
||||
setError(String(e))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const isConnected = status?.status === 'Connected'
|
||||
const isConnecting = status?.status === 'Connecting'
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Status</h1>
|
||||
|
||||
{/* Status hero */}
|
||||
<Card className="mb-6">
|
||||
<div className="px-4 py-5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
className={`w-3 h-3 rounded-full ${status?.status === 'Connecting' ? 'animate-pulse' : ''}`}
|
||||
style={{ backgroundColor: status ? statusDotColor(status.status) : 'var(--color-status-gray)' }}
|
||||
/>
|
||||
<span
|
||||
className="text-xl font-semibold"
|
||||
style={{ color: status ? statusTextColor(status.status) : 'var(--color-text-secondary)' }}
|
||||
>
|
||||
{status?.status ?? 'Loading\u2026'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{status?.ip && (
|
||||
<CardRow label="IP Address">
|
||||
<span className="font-mono text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{status.ip}</span>
|
||||
</CardRow>
|
||||
)}
|
||||
{status?.fqdn && (
|
||||
<CardRow label="Hostname">
|
||||
<span className="font-mono text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{status.fqdn}</span>
|
||||
</CardRow>
|
||||
)}
|
||||
{status && status.connectedPeers > 0 && (
|
||||
<CardRow label="Connected Peers">
|
||||
<span style={{ color: 'var(--color-text-secondary)' }}>{status.connectedPeers}</span>
|
||||
</CardRow>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
{!isConnected && !isConnecting && (
|
||||
<Button onClick={handleConnect} disabled={busy}>
|
||||
{busy ? 'Connecting\u2026' : 'Connect'}
|
||||
</Button>
|
||||
)}
|
||||
{(isConnected || isConnecting) && (
|
||||
<Button variant="secondary" onClick={handleDisconnect} disabled={busy}>
|
||||
{busy ? 'Disconnecting\u2026' : 'Disconnect'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mt-4 p-3 rounded-[var(--radius-control)] text-[13px]"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-status-red-bg)',
|
||||
color: 'var(--color-status-red)',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import type { InstallerResult } from '../bindings'
|
||||
import Card from '../components/ui/Card'
|
||||
import Button from '../components/ui/Button'
|
||||
|
||||
type UpdateState = 'idle' | 'triggering' | 'polling' | 'success' | 'failed' | 'timeout'
|
||||
|
||||
export default function Update() {
|
||||
const [state, setState] = useState<UpdateState>('idle')
|
||||
const [dots, setDots] = useState('')
|
||||
const [errorMsg, setErrorMsg] = useState('')
|
||||
const abortRef = useRef<AbortController | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (state !== 'polling') return
|
||||
let count = 0
|
||||
const id = setInterval(() => {
|
||||
count = (count + 1) % 4
|
||||
setDots('.'.repeat(count))
|
||||
}, 500)
|
||||
return () => clearInterval(id)
|
||||
}, [state])
|
||||
|
||||
async function handleTriggerUpdate() {
|
||||
abortRef.current?.abort()
|
||||
abortRef.current = new AbortController()
|
||||
|
||||
setState('triggering')
|
||||
setErrorMsg('')
|
||||
|
||||
try {
|
||||
await invoke('trigger_update')
|
||||
} catch (e) {
|
||||
console.error('[Update] TriggerUpdate error:', e)
|
||||
setErrorMsg(String(e))
|
||||
setState('failed')
|
||||
return
|
||||
}
|
||||
|
||||
setState('polling')
|
||||
|
||||
try {
|
||||
const result = await invoke<InstallerResult>('get_installer_result')
|
||||
if (result?.success) {
|
||||
setState('success')
|
||||
} else {
|
||||
setErrorMsg(result?.errorMsg ?? 'Update failed')
|
||||
setState('failed')
|
||||
}
|
||||
} catch {
|
||||
setState('success')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg mx-auto">
|
||||
<h1 className="text-xl font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>Update</h1>
|
||||
<p className="text-[13px] mb-8" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Trigger an automatic client update managed by the NetBird daemon.
|
||||
</p>
|
||||
|
||||
<Card>
|
||||
<div className="px-6 py-8 text-center">
|
||||
{state === 'idle' && (
|
||||
<>
|
||||
<p className="text-[13px] mb-5" style={{ color: 'var(--color-text-secondary)' }}>Click below to trigger a daemon-managed update.</p>
|
||||
<Button onClick={handleTriggerUpdate}>Trigger Update</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{state === 'triggering' && (
|
||||
<p className="animate-pulse text-[15px]" style={{ color: 'var(--color-status-yellow)' }}>Triggering update\u2026</p>
|
||||
)}
|
||||
|
||||
{state === 'polling' && (
|
||||
<div>
|
||||
<p className="text-[17px] mb-2" style={{ color: 'var(--color-status-yellow)' }}>Updating{dots}</p>
|
||||
<p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>The daemon is installing the update. Please wait.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'success' && (
|
||||
<div>
|
||||
<p className="text-[17px] font-semibold mb-2" style={{ color: 'var(--color-status-green)' }}>Update Successful!</p>
|
||||
<p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>The client has been updated. You may need to restart.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'failed' && (
|
||||
<div>
|
||||
<p className="text-[17px] font-semibold mb-2" style={{ color: 'var(--color-status-red)' }}>Update Failed</p>
|
||||
{errorMsg && <p className="text-[13px] mb-4" style={{ color: 'var(--color-text-secondary)' }}>{errorMsg}</p>}
|
||||
<Button variant="secondary" onClick={() => { setState('idle'); setErrorMsg('') }}>
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
// Tauri dev server expects clearScreen false
|
||||
clearScreen: false,
|
||||
server: {
|
||||
strictPort: true,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user