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")}
-