diff --git a/web/src/client/network/index.js b/web/src/client/network/index.js index 0e23079327..dd8f02180e 100644 --- a/web/src/client/network/index.js +++ b/web/src/client/network/index.js @@ -251,7 +251,7 @@ class NetworkClient { const network = { ...ap, settings: connections.find(c => c.wireless?.ssid === ap.ssid), - device: devices.find(c => c.connection === ap.ssid), + device: devices.find(c => c.connection === ap.ssid) }; // Group networks diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx index 55add785d6..d0c091b3b2 100644 --- a/web/src/components/network/IpSettingsForm.jsx +++ b/web/src/components/network/IpSettingsForm.jsx @@ -113,7 +113,7 @@ export default function IpSettingsForm() { }; client.network.updateConnection(updatedConnection) - .then(navigate("-1")) + .then(navigate(-1)) // TODO: better error reporting. By now, it sets an error for the whole connection. .catch(({ message }) => setErrors({ object: message })); }; diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx index 67ba39c86e..ba9b0f6bf8 100644 --- a/web/src/components/network/NetworkPage.jsx +++ b/web/src/components/network/NetworkPage.jsx @@ -85,47 +85,30 @@ export default function NetworkPage() { const ready = (connections !== undefined) && (devices !== undefined); const WifiConnections = () => { - const wifiConnections = connections.filter(c => c.wireless); - console.log(wifiConnections); const { wireless_enabled: wifiAvailable } = settings; - const activeConnection = wifiAvailable && wifiConnections.find(c => c.status === "up"); - - const ConnectionButton = () => { - if (!wifiAvailable) return; + if (!wifiAvailable) { return ( - - - {_("Change")} - - + + {_("The system does not support WiFi connections, probably because of missing or disabled hardware.")} + ); - }; - - const DisconnectionButton = () => { - if (!wifiAvailable || !activeConnection) return; + } - return ( - await client.disconnect(activeConnection)}> - {_("Disconnect")} - - ); - }; + const wifiConnections = connections.filter(c => c.wireless); + const activeWifiDevice = devices.find(d => d.type === "wireless" && d.state === "activated"); + const activeConnection = wifiConnections.find(c => c.id === activeWifiDevice?.connection); return ( - - + + {activeConnection ? _("Change") : _("Connect")} + } > - {!wifiAvailable && - - {_("The system does not support WiFi connections, probably because of missing or disabled hardware.")} - } {activeConnection ? ( @@ -143,7 +126,7 @@ export default function NetworkPage() { }; const WiredConnections = () => { - const wiredConnections = connections.filter(c => !c.wireless && (c.id !== "lo")); + const wiredConnections = connections.filter(c => !c.wireless); if (wiredConnections.length === 0) return ; diff --git a/web/src/components/network/WifiNetworksListPage.jsx b/web/src/components/network/WifiNetworksListPage.jsx index 5beee3d435..ea78ae0b36 100644 --- a/web/src/components/network/WifiNetworksListPage.jsx +++ b/web/src/components/network/WifiNetworksListPage.jsx @@ -33,10 +33,12 @@ import { } from "@patternfly/react-core"; import { Icon } from "~/components/layout"; import { WifiConnectionForm } from "~/components/network"; -import { ButtonLink } from "~/components/core"; +import { ButtonLink, EmptyState } from "~/components/core"; import { DeviceState } from "~/client/network/model"; import { useInstallerClient } from "~/context/installer"; import { _ } from "~/i18n"; +import { formatIp } from "~/client/network/utils"; +import { sprintf } from "sprintf-js"; const HIDDEN_NETWORK = Object.freeze({ hidden: true }); @@ -60,13 +62,27 @@ const networkState = (state) => { } }; -const ConnectionData = (network) => { - // TODO: show the connection details/settings - return (""); +const connectionAddresses = (network) => { + const { device, settings } = network; + const addresses = device ? device.addresses : settings?.addresses; + + return addresses?.map(formatIp).join(", "); +}; + +const ConnectionData = ({ network }) => { + return ( + + {connectionAddresses(network)} + + ); }; -const WifiDrawerPanelBody = ({ network, onCancel }) => { +const WifiDrawerPanelBody = ({ network, onCancel, onForget }) => { const client = useInstallerClient(); + const forgetNetwork = async () => { + await client.network.deleteConnection(network.settings.id); + onForget(); + }; if (!network) return; @@ -83,7 +99,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => { {_("Edit")} - @@ -99,7 +115,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => { case _("Connected"): return ( - + await client.network.disconnect(network.settings)}> {_("Disconnect")} @@ -154,6 +170,7 @@ function WifiNetworksListPage({ selected, onSelectionChange, networks = [], + forceUpdateNetworksCallback = () => { } }) { const selectHiddenNetwork = () => { onSelectionChange(HIDDEN_NETWORK); @@ -208,6 +225,7 @@ function WifiNetworksListPage({ diff --git a/web/src/components/network/WifiSelectorPage.jsx b/web/src/components/network/WifiSelectorPage.jsx index af83fe1804..e525f19fa3 100644 --- a/web/src/components/network/WifiSelectorPage.jsx +++ b/web/src/components/network/WifiSelectorPage.jsx @@ -48,6 +48,8 @@ function WifiSelectorPage() { const [updateNetworks, setUpdateNetworks] = useState(false); const [needAuth, setNeedAuth] = useState(null); + const reloadNetworks = () => setUpdateNetworks(true); + const selectNetwork = (network) => { saveData({ selectedWifi: network }); setSelected(network); @@ -93,7 +95,7 @@ function WifiSelectorPage() { return client.onNetworkChange(({ type, payload }) => { switch (type) { case NetworkEventTypes.DEVICE_ADDED: { - setUpdateNetworks(true); + reloadNetworks(); break; } @@ -108,12 +110,12 @@ function WifiSelectorPage() { } } - setUpdateNetworks(true); + reloadNetworks(); break; } case NetworkEventTypes.DEVICE_REMOVED: { - setUpdateNetworks(true); + reloadNetworks(); break; } } @@ -136,6 +138,7 @@ function WifiSelectorPage() { activeNetwork={activeNetwork} showHiddenForm={showHiddenForm} availableNetworks={networks} + forceUpdateNetworksCallback={reloadNetworks} // onSelectionCallback={(network) => { // switchSelectedNetwork(network); // if (network.settings && !network.device) {