@adcops/autocore-react 3.3.75 → 3.3.79

package/src/components/network/NetworkPanel.tsx

@@ -0,0 +1,363 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <NetworkPanel> — operator-facing network configuration view.
+ *
+ *   1. Status row: WiFi radio toggle + active connection summary.
+ *   2. WiFi: scan button, table of nearby SSIDs with Connect action.
+ *   3. Wired (read-only): one row per ethernet interface with its
+ *      runtime IP / gateway / DNS, sourced from the netplan-rendered
+ *      NetworkManager state.
+ *
+ * Pair with <StagedChangeBanner> at the top of the page so the
+ * countdown is visible regardless of which tab is foregrounded.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Dialog } from 'primereact/dialog';
+import { Password } from 'primereact/password';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { useNetwork, type WifiAp, type NetworkInterface } from './NetworkProvider';
+
+const signalBars = (signal: number): string => {
+    if (signal >= 75) return '▰▰▰▰';
+    if (signal >= 50) return '▰▰▰▱';
+    if (signal >= 25) return '▰▰▱▱';
+    if (signal > 0)   return '▰▱▱▱';
+    return '▱▱▱▱';
+};
+
+const isSecured = (security: string): boolean => {
+    const s = (security ?? '').trim();
+    return s.length > 0 && s !== '--';
+};
+
+export interface NetworkPanelProps {
+    /** Optional CSS class on the outer container. */
+    className?: string;
+}
+
+export const NetworkPanel: React.FC<NetworkPanelProps> = ({ className }) => {
+    const net = useNetwork();
+    const [connectTarget, setConnectTarget] = useState<WifiAp | null>(null);
+    const [password, setPassword] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+
+    // Kick off an initial scan when the panel mounts so the WiFi table
+    // isn't empty on first paint. Skipped when a scan is already in
+    // flight to avoid stomping a fresh result.
+    useEffect(() => {
+        if (net.aps.length === 0 && !net.scanning) {
+            void net.scanWifi();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const wired: NetworkInterface[] = net.status.interfaces.filter(i => i.type === 'ethernet');
+    const wifiDevices: NetworkInterface[] = net.status.interfaces.filter(i => i.type === 'wifi');
+    const activeWifi = wifiDevices.find(d => d.state === 'connected') ?? wifiDevices[0];
+
+    const openConnect = (ap: WifiAp) => {
+        setConnectTarget(ap);
+        setPassword('');
+    };
+
+    const submitConnect = async () => {
+        if (!connectTarget) return;
+        setSubmitting(true);
+        try {
+            const pw = isSecured(connectTarget.security) ? password : undefined;
+            const result = await net.wifiConnect(connectTarget.ssid, pw);
+            if (result) {
+                setConnectTarget(null);
+                setPassword('');
+            }
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    const confirmForget = (conn: { name: string; uuid: string }) => {
+        confirmDialog({
+            header: 'Forget network',
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: 'Forget',
+            rejectLabel: 'Cancel',
+            acceptClassName: 'p-button-danger',
+            message: (
+                <div>
+                    <p style={{ marginTop: 0 }}>
+                        Remove saved profile <code>{conn.name}</code>?
+                    </p>
+                    <p style={{ marginBottom: 0, fontSize: '0.875rem', color: '#9ca3af' }}>
+                        The password is deleted. You'll need to re-enter it next
+                        time you connect to this network.
+                    </p>
+                </div>
+            ),
+            accept: () => { void net.forgetConnection(conn.uuid); },
+        });
+    };
+
+    return (
+        <div className={className} style={{ width: '100%', maxWidth: '100%', boxSizing: 'border-box' }}>
+            <ConfirmDialog />
+
+            {/* ----------------------------------------------------- Status */}
+            <div style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '1rem',
+                gap: '0.5rem',
+                flexWrap: 'wrap',
+            }}>
+                <div>
+                    <h3 style={{ margin: 0 }}>Network</h3>
+                    {activeWifi ? (
+                        <div style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '0.25rem' }}>
+                            {activeWifi.state === 'connected'
+                                ? <>Connected to <code>{activeWifi.connection || '(unnamed)'}</code> on <code>{activeWifi.device}</code></>
+                                : <>WiFi: {activeWifi.state}</>}
+                            {activeWifi.ip4.addresses.length > 0 && (
+                                <> &middot; {activeWifi.ip4.addresses[0]}</>
+                            )}
+                        </div>
+                    ) : (
+                        <div style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '0.25rem' }}>
+                            No WiFi device detected.
+                        </div>
+                    )}
+                </div>
+                <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <label style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem' }}>
+                        <span style={{ fontSize: '0.875rem' }}>WiFi radio</span>
+                        <InputSwitch
+                            checked={!!net.status.wifi_radio}
+                            onChange={(e) => { void net.setRadio(!!e.value); }}
+                            disabled={net.status.wifi_radio === null}
+                        />
+                    </label>
+                    <Button
+                        icon="pi pi-refresh"
+                        label="Refresh"
+                        size="small"
+                        onClick={() => { void net.refreshStatus(); }}
+                    />
+                </div>
+            </div>
+
+            {net.lastError && (
+                <div style={{
+                    background: '#7f1d1d',
+                    color: 'white',
+                    padding: '0.5rem 0.75rem',
+                    borderRadius: 4,
+                    marginBottom: '1rem',
+                    fontSize: '0.875rem',
+                }}>
+                    {net.lastError}
+                </div>
+            )}
+
+            {/* ----------------------------------------------------- WiFi */}
+            <div style={{
+                marginBottom: '1.5rem',
+                padding: '0.75rem 1rem',
+                border: '1px solid #2a2a2a',
+                borderRadius: 4,
+                background: '#161616',
+            }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+                    <strong>WiFi Networks</strong>
+                    <Button
+                        icon={net.scanning ? 'pi pi-spin pi-spinner' : 'pi pi-search'}
+                        label={net.scanning ? 'Scanning…' : 'Scan'}
+                        size="small"
+                        outlined
+                        disabled={net.scanning || net.status.wifi_radio === false}
+                        onClick={() => { void net.scanWifi(); }}
+                    />
+                </div>
+                <DataTable
+                    value={net.aps}
+                    emptyMessage={net.status.wifi_radio === false
+                        ? 'WiFi radio is off.'
+                        : 'No networks found yet. Click Scan to refresh.'}
+                    scrollable
+                    scrollHeight="20rem"
+                    tableStyle={{ minWidth: 0 }}
+                    style={{ width: '100%' }}
+                >
+                    <Column header="SSID" body={(ap: WifiAp) => (
+                        <span>
+                            {ap.in_use && <i className="pi pi-check" style={{ marginRight: '0.4rem', color: '#22c55e' }} />}
+                            {ap.ssid}
+                        </span>
+                    )} style={{ minWidth: '10rem' }} />
+                    <Column header="Signal" body={(ap: WifiAp) => (
+                        <span style={{ fontFamily: 'monospace' }}>
+                            {signalBars(ap.signal)} <span style={{ color: '#9ca3af' }}>{ap.signal}%</span>
+                        </span>
+                    )} style={{ width: '10rem' }}
+                       sortable sortField="signal" />
+                    <Column header="Security" body={(ap: WifiAp) => (
+                        <span>{isSecured(ap.security) ? ap.security : 'Open'}</span>
+                    )} style={{ width: '8rem' }} />
+                    <Column
+                        header="Action"
+                        style={{ width: '9rem' }}
+                        body={(ap: WifiAp) => (
+                            <Button
+                                icon="pi pi-link"
+                                label={ap.in_use ? 'Reconnect' : 'Connect'}
+                                size="small"
+                                outlined
+                                disabled={!!net.staged}
+                                onClick={() => openConnect(ap)}
+                            />
+                        )}
+                    />
+                </DataTable>
+            </div>
+
+            {/* ----------------------------------------------------- Saved profiles */}
+            {net.status.connections.length > 0 && (
+                <div style={{
+                    marginBottom: '1.5rem',
+                    padding: '0.75rem 1rem',
+                    border: '1px solid #2a2a2a',
+                    borderRadius: 4,
+                    background: '#161616',
+                }}>
+                    <strong style={{ display: 'block', marginBottom: '0.75rem' }}>Saved Connections</strong>
+                    <DataTable
+                        value={net.status.connections}
+                        emptyMessage="No saved profiles."
+                        tableStyle={{ minWidth: 0 }}
+                        style={{ width: '100%' }}
+                    >
+                        <Column field="name" header="Name" style={{ minWidth: '10rem' }} />
+                        <Column field="type" header="Type" style={{ width: '8rem' }} />
+                        <Column field="device" header="Device" style={{ minWidth: '8rem' }} />
+                        <Column header="Active" style={{ width: '6rem' }}
+                            body={(c) => c.active ? <i className="pi pi-check" style={{ color: '#22c55e' }} /> : null} />
+                        <Column
+                            header="Action"
+                            style={{ width: '8rem' }}
+                            body={(c) => c.type === 'wifi' ? (
+                                <Button
+                                    icon="pi pi-trash"
+                                    label="Forget"
+                                    size="small"
+                                    severity="danger"
+                                    outlined
+                                    onClick={() => confirmForget(c)}
+                                />
+                            ) : null}
+                        />
+                    </DataTable>
+                </div>
+            )}
+
+            {/* ----------------------------------------------------- Wired (read-only) */}
+            <div style={{
+                padding: '0.75rem 1rem',
+                border: '1px solid #2a2a2a',
+                borderRadius: 4,
+                background: '#161616',
+            }}>
+                <strong style={{ display: 'block', marginBottom: '0.25rem' }}>Wired Interfaces</strong>
+                <div style={{ fontSize: '0.75rem', color: '#6b7280', marginBottom: '0.75rem' }}>
+                    Wired configuration is managed by netplan and is read-only here.
+                </div>
+                <DataTable
+                    value={wired}
+                    emptyMessage="No wired interfaces."
+                    tableStyle={{ minWidth: 0 }}
+                    style={{ width: '100%' }}
+                >
+                    <Column field="device" header="Device" style={{ minWidth: '8rem' }} />
+                    <Column field="state" header="State" style={{ width: '8rem' }} />
+                    <Column header="IP Address" body={(d: NetworkInterface) =>
+                        d.ip4.addresses.length > 0 ? d.ip4.addresses.join(', ') : <span style={{ color: '#6b7280' }}>—</span>
+                    } style={{ minWidth: '10rem' }} />
+                    <Column header="Gateway" body={(d: NetworkInterface) =>
+                        d.ip4.gateway || <span style={{ color: '#6b7280' }}>—</span>
+                    } style={{ minWidth: '8rem' }} />
+                    <Column header="DNS" body={(d: NetworkInterface) =>
+                        d.ip4.dns.length > 0 ? d.ip4.dns.join(', ') : <span style={{ color: '#6b7280' }}>—</span>
+                    } style={{ minWidth: '8rem' }} />
+                </DataTable>
+            </div>
+
+            {/* ----------------------------------------------------- Connect dialog */}
+            <Dialog
+                header={connectTarget ? `Connect to ${connectTarget.ssid}` : 'Connect'}
+                visible={!!connectTarget}
+                style={{ width: '24rem' }}
+                onHide={() => { if (!submitting) setConnectTarget(null); }}
+                modal
+                draggable={false}
+            >
+                {connectTarget && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                        <div style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
+                            <div>Signal: {connectTarget.signal}%</div>
+                            <div>Security: {isSecured(connectTarget.security) ? connectTarget.security : 'Open'}</div>
+                        </div>
+                        {isSecured(connectTarget.security) ? (
+                            <>
+                                <label htmlFor="nw-pw" style={{ fontSize: '0.875rem' }}>Password</label>
+                                <Password
+                                    inputId="nw-pw"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    feedback={false}
+                                    toggleMask
+                                    autoFocus
+                                />
+                            </>
+                        ) : (
+                            <div style={{ fontSize: '0.875rem' }}>
+                                This is an open network. No password required.
+                            </div>
+                        )}
+                        <div style={{
+                            background: '#78350f',
+                            color: 'white',
+                            padding: '0.5rem 0.75rem',
+                            borderRadius: 4,
+                            fontSize: '0.875rem',
+                        }}>
+                            After connecting, you have 60 seconds to confirm the
+                            change. If you don't, the server will auto-revert
+                            to the previous network — that way a bad password
+                            from a remote session can't lock you out.
+                        </div>
+                        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.4rem' }}>
+                            <Button
+                                label="Cancel"
+                                outlined
+                                onClick={() => setConnectTarget(null)}
+                                disabled={submitting}
+                            />
+                            <Button
+                                label={submitting ? 'Connecting…' : 'Connect'}
+                                icon={submitting ? 'pi pi-spin pi-spinner' : 'pi pi-link'}
+                                onClick={() => { void submitConnect(); }}
+                                disabled={submitting || (isSecured(connectTarget.security) && password.length === 0)}
+                            />
+                        </div>
+                    </div>
+                )}
+            </Dialog>
+        </div>
+    );
+};
+
+export default NetworkPanel;