Line data Source code
1 : /*
2 : * Copyright (C) 2021 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 35 : import cockpit from "cockpit";
6 35 : import React, { useContext, useEffect, useRef, useState } from "react";
7 : import { useEvent, useInit } from "hooks";
8 : import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core/dist/esm/components/Breadcrumb/index.js";
9 : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
10 : import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card/index.js';
11 : import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox/index.js";
12 : import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
13 : import { DropdownItem } from "@patternfly/react-core/dist/esm/components/Dropdown/index.js";
14 : import { Form } from "@patternfly/react-core/dist/esm/components/Form/index.js";
15 : import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
16 : import { Gallery } from "@patternfly/react-core/dist/esm/layouts/Gallery/index.js";
17 : import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/dist/esm/components/Modal/index.js';
18 : import { Page, PageBreadcrumb, PageSection } from "@patternfly/react-core/dist/esm/components/Page/index.js";
19 : import { Progress } from "@patternfly/react-core/dist/esm/components/Progress/index.js";
20 : import { SearchInput } from "@patternfly/react-core/dist/esm/components/SearchInput/index.js";
21 : import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner/index.js";
22 : import { Switch } from "@patternfly/react-core/dist/esm/components/Switch/index.js";
23 : import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip/index.js";
24 : import { SortByDirection } from '@patternfly/react-table';
25 : import {
26 : ConnectedIcon,
27 : DisconnectedIcon,
28 : LockIcon,
29 : LockOpenIcon,
30 : PlusIcon,
31 : RedoIcon,
32 : ThumbtackIcon,
33 : } from "@patternfly/react-icons";
34 :
35 : import { KebabDropdown } from "cockpit-components-dropdown";
36 : import { ListingTable } from "cockpit-components-table.jsx";
37 : import { Privileged } from "cockpit-components-privileged";
38 : import { distanceToNow } from "timeformat";
39 : import { fmt_to_fragments, in_anaconda_mode } from "utils";
40 : import { useDialogs } from "dialogs.jsx";
41 :
42 : import { ModelContext } from './model-context.jsx';
43 : import { NetworkInterfaceMembers } from "./network-interface-members.jsx";
44 : import { NetworkAction } from './dialogs-common.jsx';
45 : import { NetworkPlots } from "./plots";
46 : import * as utils from "./utils.js";
47 :
48 : import {
49 : array_join,
50 : choice_title,
51 : complete_settings,
52 : connection_settings,
53 : free_member_connection,
54 : is_managed,
55 : render_active_connection,
56 : settings_applier,
57 : show_error_dialog,
58 : show_unexpected_error,
59 : syn_click,
60 : with_checkpoint,
61 : } from './interfaces.js';
62 : import {
63 : team_runner_choices,
64 : team_watch_choices,
65 : } from './team.jsx';
66 : import {
67 : bond_mode_choices,
68 : } from './bond.jsx';
69 :
70 : import { get_ip_method_choices } from './ip-settings.jsx';
71 :
72 : import {
73 : useDialogState,
74 : DialogError, DialogErrorMessage,
75 : DialogTextInput,
76 : DialogPasswordInput,
77 : DialogDropdownSelect,
78 : DialogActionButton, DialogCancelButton,
79 : } from 'cockpit/dialog';
80 :
81 35 : const _ = cockpit.gettext;
82 :
83 : // known networks: with ssid; hidden networks: no ssid
84 0 : const WiFiConnectDialog = ({ dev, model, ssid: knownSsid, ap }) => {
85 0 : useEvent(model, "changed");
86 0 : const Dialogs = useDialogs();
87 :
88 0 : const isHidden = !knownSsid;
89 0 : const idPrefix = "network-wifi-connect";
90 :
91 0 : function validate() {
92 0 : if (isHidden) {
93 0 : dlg.field("ssid").validate(val => {
94 0 : if (val.trim() === "")
95 0 : return _("SSID can not be empty");
96 0 : });
97 0 : }
98 0 : if (!isHidden || dlg.values.security != "none") {
99 0 : dlg.field("password").validate(val => {
100 0 : if (val.trim() === "")
101 0 : return _("Password can not be empty");
102 0 : });
103 0 : }
104 0 : }
105 :
106 0 : const dlg = useDialogState({
107 0 : ssid: knownSsid || "",
108 0 : security: "wpa-psk",
109 0 : password: "",
110 0 : }, validate);
111 :
112 0 : const onConnect = async ({ ssid, security, password }) => {
113 0 : utils.debug("Connecting to", ssid, isHidden ? `with security ${security}` : "with password");
114 :
115 0 : const settings = {
116 0 : connection: {
117 0 : id: ssid,
118 0 : type: "802-11-wireless",
119 0 : autoconnect: true,
120 0 : },
121 0 : "802-11-wireless": {
122 0 : ssid: utils.ssid_to_nm(ssid),
123 0 : mode: "infrastructure",
124 0 : },
125 0 : };
126 :
127 0 : if (isHidden) {
128 0 : settings["802-11-wireless"].hidden = true;
129 0 : }
130 :
131 0 : if (!isHidden || security !== "none") {
132 0 : settings["802-11-wireless-security"] = {
133 0 : "key-mgmt": isHidden ? security : "wpa-psk",
134 0 : psk: password,
135 0 : };
136 0 : }
137 :
138 0 : let connection = null;
139 0 : try {
140 : // ap might be stale if there was a scan since opening the dialog, so pass NULL
141 : // NM will find the right AP by SSID
142 0 : const result = await dev.activate_with_settings(settings, null);
143 0 : connection = result.connection;
144 :
145 0 : dlg.set_cancel(
146 0 : () => {
147 0 : utils.debug("Cancelling connection to", ssid);
148 0 : dev.cancel_pending_connection();
149 0 : connection.delete_()
150 0 : .catch(err => console.warn("Failed to delete connection:", err));
151 0 : });
152 :
153 0 : utils.debug("Connection activation started");
154 0 : await dev.wait_connection(ssid);
155 0 : utils.debug("Connected successfully to", ssid);
156 0 : } catch (err) {
157 : // just in case something survived, clean up
158 0 : connection?.delete_()
159 0 : .catch(err => utils.debug("Failed to delete failed connection:", err));
160 :
161 0 : throw new DialogError(
162 0 : _("Failed to connect"),
163 0 : err.reason === 7 // NM_DEVICE_STATE_REASON_NO_SECRETS
164 0 : ? _("Check your password.")
165 0 : : err.toString());
166 0 : }
167 0 : };
168 :
169 0 : return (
170 0 : <Modal id={idPrefix + "-dialog"}
171 0 : position="top"
172 0 : variant="small"
173 0 : isOpen
174 0 : onClose={Dialogs.close}>
175 0 : <ModalHeader title={isHidden ? _("Connect to hidden network") : cockpit.format(_("Connect to $0"), knownSsid)} />
176 0 : <ModalBody>
177 0 : <DialogErrorMessage dialog={dlg} />
178 0 : <Form id={idPrefix + "-body"} onSubmit={ev => ev.preventDefault()} isHorizontal>
179 0 : {isHidden && (
180 0 : <>
181 0 : <DialogTextInput
182 0 : label={_("Network name")}
183 0 : field={dlg.field("ssid")}
184 0 : />
185 0 : <DialogDropdownSelect
186 0 : label={_("Security")}
187 0 : field={dlg.field("security")}
188 0 : options={[
189 0 : { value: "none", label: _("None") },
190 0 : { value: "wpa-psk", label: _("WPA/WPA2 Personal") },
191 0 : ]}
192 0 : />
193 0 : </>
194 : )}
195 0 : {(!isHidden || dlg.values.security !== "none") && (
196 0 : <DialogPasswordInput
197 0 : label={_("Password")}
198 0 : field={dlg.field("password")}
199 0 : autoFocus={!isHidden} // eslint-disable-line jsx-a11y/no-autofocus
200 0 : />
201 : )}
202 0 : </Form>
203 0 : </ModalBody>
204 0 : <ModalFooter>
205 0 : <DialogActionButton dialog={dlg} action={onConnect} onClose={Dialogs.close}>
206 0 : {_("Connect")}
207 0 : </DialogActionButton>
208 0 : <DialogCancelButton dialog={dlg} onClose={Dialogs.close} />
209 0 : </ModalFooter>
210 0 : </Modal>
211 : );
212 0 : };
213 :
214 29 : export const NetworkInterfacePage = ({
215 29 : privileged,
216 29 : operationInProgress,
217 29 : usage_monitor,
218 29 : plot_state,
219 29 : interfaces,
220 29 : iface
221 29 : }) => {
222 29 : const model = useContext(ModelContext);
223 29 : useEvent(model, "changed");
224 29 : const [isScanning, setIsScanning] = useState(false);
225 29 : const [prevAPCount, setPrevAPCount] = useState(0);
226 29 : const [networkSearch, setNetworkSearch] = useState("");
227 :
228 29 : const dev_name = iface.Name;
229 29 : const dev = iface.Device;
230 29 : const isManaged = iface && (!dev || is_managed(dev));
231 :
232 2 : const accessPointCount = dev?.DeviceType === '802-11-wireless' ? (dev.AccessPoints?.length || 0) : 0;
233 :
234 29 : const Dialogs = useDialogs();
235 :
236 : // Trigger (passive) scan on page load for wireless devices on page load
237 29 : useInit(() => {
238 2 : if (dev?.DeviceType === '802-11-wireless') {
239 2 : utils.debug("Requesting initial WiFi scan for", dev_name);
240 2 : dev.request_scan();
241 2 : }
242 29 : });
243 :
244 : // WiFi scanning: re-enable button when APs change or after timeout
245 29 : useEffect(() => {
246 2 : if (isScanning) {
247 2 : if (accessPointCount !== prevAPCount && prevAPCount !== 0)
248 2 : setIsScanning(false);
249 0 : const timer = setTimeout(() => setIsScanning(false), 5000);
250 0 : return () => clearTimeout(timer);
251 2 : }
252 29 : setPrevAPCount(accessPointCount);
253 29 : }, [isScanning, accessPointCount, prevAPCount]);
254 :
255 : // Track stable WiFi network order (by signal strength on first scan, preserved thereafter)
256 29 : const stableAPOrder = useRef([]);
257 :
258 : // Update stable AP order when APs are added/removed
259 29 : useEffect(() => {
260 29 : if (dev?.DeviceType !== '802-11-wireless')
261 29 : return;
262 :
263 2 : const accessPoints = dev.AccessPoints || [];
264 0 : const currentMACs = new Set(accessPoints.map(ap => ap.HwAddress));
265 29 : const stableMACs = new Set(stableAPOrder.current);
266 :
267 : // Re-sort if APs added/removed
268 29 : const needsResort = currentMACs.size !== stableMACs.size ||
269 0 : ![...currentMACs].every(mac => stableMACs.has(mac));
270 :
271 2 : if (needsResort) {
272 : // Sort by signal strength
273 0 : const sorted = [...accessPoints].sort((a, b) => b.Strength - a.Strength);
274 : // Store MAC addresses
275 0 : stableAPOrder.current = sorted.map(ap => ap.HwAddress);
276 2 : }
277 29 : }, [dev?.AccessPoints, dev?.DeviceType]);
278 :
279 29 : let ghostSettings = null;
280 29 : let connectionSettings = null;
281 :
282 29 : if (iface) {
283 29 : if (iface.MainConnection) {
284 29 : connectionSettings = iface.MainConnection.Settings;
285 5 : } else {
286 5 : ghostSettings = createGhostConnectionSettings();
287 5 : connectionSettings = ghostSettings;
288 5 : }
289 29 : }
290 :
291 6 : function deleteConnections() {
292 6 : function deleteConnectionAndMembers(con) {
293 6 : return Promise.all(con.Members.map(s => free_member_connection(s))).then(() => con.delete_());
294 6 : }
295 :
296 6 : function deleteConnections(cons) {
297 6 : return Promise.all(cons.map(deleteConnectionAndMembers));
298 6 : }
299 :
300 6 : function deleteIfaceConnections(iface) {
301 6 : return deleteConnections(iface.Connections);
302 6 : }
303 :
304 6 : const location = cockpit.location;
305 :
306 6 : function modify() {
307 6 : return deleteIfaceConnections(iface)
308 5 : .then(function () {
309 5 : location.go("/");
310 5 : })
311 6 : .catch(show_unexpected_error);
312 6 : }
313 :
314 6 : if (iface) {
315 6 : with_checkpoint(model, modify,
316 6 : {
317 0 : devices: dev ? [dev] : [],
318 6 : fail_text: fmt_to_fragments(_("Deleting $0 will break the connection to the server, and will make the administration UI unavailable."), <b>{dev_name}</b>),
319 6 : anyway_text: cockpit.format(_("Delete $0"), dev_name),
320 6 : hack_does_add_or_remove: true,
321 6 : rollback_on_failure: true
322 6 : });
323 6 : }
324 6 : }
325 :
326 2 : function connect() {
327 1 : if (!(iface.MainConnection || (dev && ghostSettings)))
328 2 : return;
329 :
330 0 : function fail(error) {
331 0 : show_unexpected_error(error);
332 0 : }
333 :
334 2 : function modify() {
335 1 : if (iface.MainConnection) {
336 1 : return iface.MainConnection.activate(dev, null).catch(fail);
337 0 : } else {
338 1 : return dev.activate_with_settings(ghostSettings, null).catch(fail);
339 1 : }
340 2 : }
341 :
342 2 : with_checkpoint(model, modify,
343 2 : {
344 1 : devices: dev ? [dev] : [],
345 2 : fail_text: fmt_to_fragments(_("Switching on $0 will break the connection to the server, and will make the administration UI unavailable."), <b>{dev_name}</b>),
346 2 : anyway_text: cockpit.format(_("Switch on $0"), dev_name)
347 2 : });
348 2 : }
349 :
350 6 : function disconnect() {
351 0 : if (!dev) {
352 0 : console.log("Trying to switch off without a device?");
353 0 : return;
354 0 : }
355 :
356 6 : function modify () {
357 6 : return dev.disconnect()
358 0 : .catch(error => show_unexpected_error(error));
359 6 : }
360 :
361 6 : with_checkpoint(model, modify,
362 6 : {
363 6 : devices: [dev],
364 6 : fail_text: fmt_to_fragments(_("Switching off $0 will break the connection to the server, and will make the administration UI unavailable."), <b>{dev_name}</b>),
365 6 : anyway_text: cockpit.format(_("Switch off $0"), dev_name)
366 6 : });
367 6 : }
368 :
369 29 : function renderDesc() {
370 29 : let desc;
371 29 : let cs;
372 29 : if (dev) {
373 3 : if (dev.DeviceType == 'ethernet' || dev.IdVendor || dev.IdModel) {
374 8 : desc = cockpit.format("$IdVendor $IdModel $Driver", dev);
375 2 : } else if (dev.DeviceType == 'bond') {
376 10 : desc = _("Bond");
377 2 : } else if (dev.DeviceType == 'team') {
378 3 : desc = _("Team");
379 2 : } else if (dev.DeviceType == 'vlan') {
380 3 : desc = _("VLAN");
381 2 : } else if (dev.DeviceType == 'bridge') {
382 5 : desc = _("Bridge");
383 2 : } else if (dev.Driver == 'wireguard') {
384 4 : desc = "WireGuard";
385 4 : } else
386 12 : desc = cockpit.format(_("Unknown \"$0\""), dev.DeviceType);
387 3 : } else if (iface) {
388 3 : cs = connection_settings(iface.Connections[0]);
389 3 : if (cs.type == "bond")
390 2 : desc = _("Bond");
391 3 : else if (cs.type == "team")
392 2 : desc = _("Team");
393 3 : else if (cs.type == "vlan")
394 2 : desc = _("VLAN");
395 3 : else if (cs.type == "bridge")
396 2 : desc = _("Bridge");
397 2 : else if (cs.type == "wireguard")
398 2 : desc = "WireGuard";
399 2 : else if (cs.type)
400 2 : desc = cockpit.format(_("Unknown \"$0\""), cs.type);
401 : else
402 2 : desc = _("Unknown");
403 3 : } else
404 2 : desc = _("Unknown");
405 :
406 29 : return desc;
407 29 : }
408 :
409 29 : function renderMac() {
410 29 : let mac;
411 29 : if (dev &&
412 27 : dev.HwAddress) {
413 27 : mac = dev.HwAddress;
414 4 : } else if (iface &&
415 6 : iface.MainConnection &&
416 6 : iface.MainConnection.Settings &&
417 6 : iface.MainConnection.Settings.ethernet &&
418 2 : iface.MainConnection.Settings.ethernet.assigned_mac_address) {
419 2 : mac = iface.MainConnection.Settings.ethernet.assigned_mac_address;
420 2 : }
421 :
422 29 : const can_edit_mac = (privileged && iface && iface.MainConnection &&
423 29 : (connection_settings(iface.MainConnection).type == "802-3-ethernet" ||
424 19 : connection_settings(iface.MainConnection).type == "bond"));
425 :
426 29 : let mac_desc;
427 24 : if (can_edit_mac) {
428 24 : mac_desc = (
429 24 : <NetworkAction type="mac" iface={iface} buttonText={mac} connectionSettings={iface.MainConnection.Settings} />
430 : );
431 7 : } else {
432 12 : mac_desc = mac;
433 12 : }
434 :
435 29 : return mac_desc;
436 29 : }
437 :
438 29 : function renderCarrierStatusRow() {
439 29 : if (dev && dev.Carrier !== undefined) {
440 29 : return (
441 29 : <DescriptionListGroup>
442 29 : <DescriptionListTerm>{_("Carrier")}</DescriptionListTerm>
443 29 : <DescriptionListDescription data-label="Carrier">
444 2 : {dev.Carrier ? (dev.Speed ? cockpit.format_bits_per_sec(dev.Speed * 1e6) : _("Yes")) : _("No")}
445 29 : </DescriptionListDescription>
446 29 : </DescriptionListGroup>
447 : );
448 29 : } else
449 3 : return null;
450 29 : }
451 :
452 29 : function renderActiveStatusRow() {
453 29 : let state;
454 :
455 29 : if (iface.MainConnection && iface.MainConnection.Groups.length > 0)
456 4 : return null;
457 :
458 29 : if (!dev)
459 3 : state = _("Inactive");
460 28 : else if (isManaged && dev.State != 100)
461 21 : state = dev.StateText;
462 : else
463 28 : state = null;
464 :
465 29 : const activeConnection = render_active_connection(dev, true, false);
466 29 : return (
467 29 : <DescriptionListGroup>
468 29 : <DescriptionListTerm>{_("Status")}</DescriptionListTerm>
469 29 : <DescriptionListDescription data-label="Status" className="networking-interface-status">
470 29 : {[activeConnection, state].filter(val => val).join(", ")}
471 29 : </DescriptionListDescription>
472 29 : </DescriptionListGroup>
473 : );
474 29 : }
475 :
476 29 : function renderConnectionSettingsRows(con, settings) {
477 28 : if (!isManaged || !settings)
478 3 : return [];
479 :
480 28 : let group_settings = null;
481 28 : if (con && con.Groups.length > 0)
482 4 : group_settings = con.Groups[0].Settings;
483 :
484 28 : function renderIpSettings(topic) {
485 28 : const params = settings[topic];
486 28 : const parts = [];
487 :
488 28 : if (params.method != "manual")
489 28 : parts.push(choice_title(get_ip_method_choices(topic), params.method, _("Unknown configuration")));
490 :
491 28 : const addr_is_extra = (params.method != "manual");
492 28 : const addrs = [];
493 10 : params.address_data?.forEach(function (a) {
494 10 : addrs.push(a.address + "/" + a.prefix);
495 10 : });
496 :
497 28 : if (addrs.length > 0)
498 3 : parts.push(cockpit.format(addr_is_extra ? _("Additional address $val") : _("Address $val"),
499 12 : { val: addrs.join(", ") }));
500 :
501 28 : const gateway = params.gateway;
502 9 : if (gateway && gateway != "0.0.0.0" && gateway != "::")
503 9 : parts.push(cockpit.format(_("Gateway $gateway"), { gateway }));
504 :
505 28 : const dns_is_extra = (!params["ignore-auto-dns"] && params.method != "manual");
506 28 : if (params.dns_data?.length > 0)
507 4 : parts.push(cockpit.format(dns_is_extra ? _("Additional DNS $val") : _("DNS $val"),
508 5 : { val: params.dns_data.join(", ") }));
509 28 : if (params.dns_search?.length > 0)
510 2 : parts.push(cockpit.format(dns_is_extra ? _("Additional DNS search domains $val") : _("DNS search domains $val"),
511 3 : { val: params.dns_search.join(", ") }));
512 :
513 28 : return parts;
514 28 : }
515 :
516 28 : function renderAutoconnectRow() {
517 28 : if (settings.connection.autoconnect !== undefined) {
518 28 : return (
519 28 : <DescriptionListGroup>
520 28 : <DescriptionListTerm>{_("General")}</DescriptionListTerm>
521 28 : <DescriptionListDescription data-label="General">
522 28 : <Checkbox id="autoreconnect" isDisabled={!privileged}
523 2 : onChange={(_event, checked) => {
524 2 : settings.connection.autoconnect = checked;
525 2 : settings_applier(model, dev, con)(settings);
526 2 : }}
527 28 : isChecked={settings.connection.autoconnect}
528 28 : label={_("Connect automatically")} />
529 28 : </DescriptionListDescription>
530 28 : </DescriptionListGroup>
531 : );
532 28 : }
533 28 : }
534 :
535 28 : function renderSettingsRow(title, rows, configure) {
536 28 : const link_text = [];
537 28 : for (let i = 0; i < rows.length; i++) {
538 28 : link_text.push(rows[i]);
539 28 : if (i < rows.length - 1)
540 12 : link_text.push(<br key={"break-" + i} />);
541 28 : }
542 :
543 28 : return (
544 28 : <DescriptionListGroup>
545 28 : <DescriptionListTerm>{title}</DescriptionListTerm>
546 28 : <DescriptionListDescription data-label={title}>
547 28 : {link_text.length
548 28 : ? <span className="network-interface-settings-text">
549 28 : {link_text}
550 28 : </span>
551 7 : : null}
552 28 : {privileged
553 2 : ? (typeof configure === 'function' ? <Button variant="link" isInline onClick={syn_click(model, configure)}>{_("edit")}</Button> : configure)
554 3 : : null}
555 28 : </DescriptionListDescription>
556 28 : </DescriptionListGroup>
557 : );
558 28 : }
559 :
560 28 : function renderIpSettingsRow(topic, title) {
561 28 : if (!settings[topic])
562 4 : return null;
563 :
564 28 : const configure = <NetworkAction type={topic} iface={iface} connectionSettings={settings} />;
565 28 : return renderSettingsRow(title, renderIpSettings(topic), configure);
566 28 : }
567 :
568 28 : function renderMtuSettingsRow() {
569 28 : const rows = [];
570 28 : const options = settings.ethernet;
571 :
572 28 : if (!options)
573 7 : return null;
574 :
575 24 : function addRow(fmt, args) {
576 24 : rows.push(cockpit.format(fmt, args));
577 24 : }
578 :
579 25 : if (options.mtu)
580 3 : addRow("$mtu", options);
581 : else
582 25 : addRow(_("Automatic"), options);
583 :
584 25 : const configure = <NetworkAction type="mtu" iface={iface} connectionSettings={settings} />;
585 25 : return renderSettingsRow(_("MTU"), rows, configure);
586 28 : }
587 :
588 2 : function render_connection_link(con, key) {
589 2 : return <span key={key}>
590 : {
591 2 : array_join(
592 2 : con.Interfaces.map(iface =>
593 2 : <Button variant="link" key={iface.Name}
594 2 : isInline
595 0 : onClick={() => cockpit.location.go([iface.Name])}>{iface.Name}</Button>),
596 2 : ", ")
597 : }
598 2 : </span>;
599 2 : }
600 :
601 28 : function render_group() {
602 4 : if (con && con.Groups.length > 0) {
603 4 : return (
604 4 : <DescriptionListGroup>
605 4 : <DescriptionListTerm>{_("Group")}</DescriptionListTerm>
606 4 : <DescriptionListDescription data-label="Group">
607 4 : {array_join(con.Groups.map(render_connection_link), ", ")}
608 4 : </DescriptionListDescription>
609 4 : </DescriptionListGroup>
610 : );
611 4 : } else
612 28 : return null;
613 28 : }
614 :
615 28 : function renderBondSettingsRow() {
616 28 : const parts = [];
617 28 : const rows = [];
618 :
619 28 : if (!settings.bond)
620 20 : return null;
621 :
622 10 : const options = settings.bond.options;
623 :
624 10 : parts.push(choice_title(bond_mode_choices, options.mode, options.mode));
625 10 : if (options.arp_interval)
626 3 : parts.push(_("ARP monitoring"));
627 :
628 10 : if (parts.length > 0)
629 10 : rows.push(parts.join(", "));
630 :
631 10 : const configure = <NetworkAction type="bond" iface={iface} connectionSettings={settings} />;
632 10 : return renderSettingsRow(_("Bond"), rows, configure);
633 28 : }
634 :
635 28 : function renderTeamSettingsRow() {
636 28 : const parts = [];
637 28 : const rows = [];
638 :
639 28 : if (!settings.team)
640 28 : return null;
641 :
642 3 : const config = settings.team.config;
643 :
644 3 : if (config === null)
645 2 : parts.push(_("Broken configuration"));
646 3 : else {
647 3 : if (config.runner)
648 3 : parts.push(choice_title(team_runner_choices, config.runner.name, config.runner.name));
649 3 : if (config.link_watch && config.link_watch.name != "ethtool")
650 2 : parts.push(choice_title(team_watch_choices, config.link_watch.name, config.link_watch.name));
651 3 : }
652 :
653 3 : if (parts.length > 0)
654 3 : rows.push(parts.join(", "));
655 :
656 3 : const configure = <NetworkAction type="team" iface={iface} connectionSettings={settings} />;
657 3 : return renderSettingsRow(_("Team"), rows, configure);
658 28 : }
659 :
660 28 : function renderTeamPortSettingsRow() {
661 28 : const parts = [];
662 28 : const rows = [];
663 :
664 28 : if (!settings.team_port)
665 28 : return null;
666 :
667 : /* Only "activebackup" and "lacp" team ports have
668 : * something to configure.
669 : */
670 3 : if (!group_settings ||
671 3 : !group_settings.team ||
672 3 : !group_settings.team.config ||
673 3 : !group_settings.team.config.runner ||
674 3 : !(group_settings.team.config.runner.name == "activebackup" ||
675 2 : group_settings.team.config.runner.name == "lacp"))
676 2 : return null;
677 :
678 3 : const config = settings.team_port.config;
679 :
680 3 : if (config === null)
681 2 : parts.push(_("Broken configuration"));
682 :
683 3 : if (parts.length > 0)
684 2 : rows.push(parts.join(", "));
685 :
686 3 : const configure = <NetworkAction type="teamport" iface={iface} connectionSettings={settings} />;
687 3 : return renderSettingsRow(_("Team port"), rows, configure);
688 28 : }
689 :
690 28 : function renderBridgeSettingsRow() {
691 28 : const rows = [];
692 28 : const options = settings.bridge;
693 :
694 28 : if (!options)
695 27 : return null;
696 :
697 2 : function addRow(fmt, args) {
698 2 : rows.push(cockpit.format(fmt, args));
699 2 : }
700 :
701 4 : if (options.stp) {
702 4 : addRow(_("Spanning tree protocol"));
703 4 : if (options.priority != 32768)
704 3 : addRow(_("Priority $priority"), options);
705 4 : if (options.forward_delay != 15)
706 2 : addRow(_("Forward delay $forward_delay"), options);
707 4 : if (options.hello_time != 2)
708 3 : addRow(_("Hello time $hello_time"), options);
709 4 : if (options.max_age != 20)
710 2 : addRow(_("Maximum message age $max_age"), options);
711 4 : }
712 :
713 5 : const configure = <NetworkAction type="bridge" iface={iface} connectionSettings={settings} />;
714 5 : return renderSettingsRow(_("Bridge"), rows, configure);
715 28 : }
716 :
717 28 : function renderBridgePortSettingsRow() {
718 28 : const rows = [];
719 28 : const options = settings.bridge_port;
720 :
721 28 : if (!options)
722 28 : return null;
723 :
724 1 : function addRow(fmt, args) {
725 1 : rows.push(cockpit.format(fmt, args));
726 1 : }
727 :
728 3 : if (options.priority != 32)
729 3 : addRow(_("Priority $priority"), options);
730 3 : if (options.path_cost != 100)
731 3 : addRow(_("Path cost $path_cost"), options);
732 3 : if (options.hairpin_mode)
733 3 : addRow(_("Hairpin mode"));
734 :
735 3 : const configure = <NetworkAction type="bridgeport" iface={iface} connectionSettings={settings} />;
736 3 : return renderSettingsRow(_("Bridge port"), rows, configure);
737 28 : }
738 :
739 28 : function renderVlanSettingsRow() {
740 28 : const rows = [];
741 28 : const options = settings.vlan;
742 :
743 28 : if (!options)
744 27 : return null;
745 :
746 1 : function addRow(fmt, args) {
747 1 : rows.push(cockpit.format(fmt, args));
748 1 : }
749 :
750 3 : addRow(_("Parent $parent"), options);
751 3 : addRow(_("ID $id"), options);
752 :
753 3 : const configure = <NetworkAction type="vlan" iface={iface} connectionSettings={settings} />;
754 3 : return renderSettingsRow(_("VLAN"), rows, configure);
755 28 : }
756 :
757 28 : function renderWireGuardSettingsRow() {
758 28 : const rows = [];
759 28 : const options = settings.wireguard;
760 :
761 27 : if (!options) {
762 27 : return null;
763 27 : }
764 :
765 4 : const configure = <NetworkAction type="wg" iface={iface} connectionSettings={settings} />;
766 :
767 4 : return renderSettingsRow(_("WireGuard"), rows, configure);
768 28 : }
769 :
770 28 : return [
771 28 : render_group(),
772 28 : renderAutoconnectRow(),
773 28 : renderIpSettingsRow("ipv4", _("IPv4")),
774 28 : renderIpSettingsRow("ipv6", _("IPv6")),
775 28 : renderMtuSettingsRow(),
776 28 : renderVlanSettingsRow(),
777 28 : renderBridgeSettingsRow(),
778 28 : renderBridgePortSettingsRow(),
779 28 : renderBondSettingsRow(),
780 28 : renderTeamSettingsRow(),
781 28 : renderTeamPortSettingsRow(),
782 28 : renderWireGuardSettingsRow(),
783 28 : ];
784 29 : }
785 :
786 29 : function renderWiFiNetworks() {
787 29 : if (!dev || dev.DeviceType !== '802-11-wireless')
788 29 : return null;
789 :
790 2 : const accessPoints = dev.AccessPoints || [];
791 29 : if (accessPoints.length === 0)
792 2 : return null;
793 :
794 2 : const activeSSID = dev.ActiveAccessPoint ? dev.ActiveAccessPoint.Ssid : null;
795 :
796 0 : function forgetNetwork(ap) {
797 0 : utils.debug("Forgetting network", ap.Ssid);
798 :
799 0 : if (ap.Connection) {
800 0 : ap.Connection.delete_()
801 0 : .then(() => utils.debug("Forgot network", ap.Ssid))
802 0 : .catch(show_unexpected_error);
803 0 : }
804 0 : }
805 :
806 0 : async function connectToAP(ap) {
807 : // we don't show a Connect button for hidden networks
808 0 : cockpit.assert(ap.Ssid);
809 0 : utils.debug("Connecting to", ap.Ssid);
810 :
811 0 : try {
812 0 : if (ap.Connection) {
813 : // Activate existing connection (which already has password if needed)
814 0 : utils.debug("Activating existing connection for", ap.Ssid);
815 0 : await ap.Connection.activate(dev, ap);
816 0 : utils.debug("Connection activation started for", ap.Ssid);
817 0 : await dev.wait_connection(ap.Ssid);
818 0 : utils.debug("Connected successfully to", ap.Ssid);
819 0 : return;
820 0 : }
821 :
822 : // Create new connection
823 0 : const isSecured = !!(ap.WpaFlags || ap.RsnFlags);
824 :
825 0 : if (isSecured) {
826 : // Show password dialog for secured networks
827 0 : utils.debug("Showing password dialog for", ap.Ssid);
828 0 : Dialogs.show(<WiFiConnectDialog dev={dev} ap={ap} ssid={ap.Ssid} model={model} />);
829 0 : return;
830 0 : }
831 :
832 : // Create new connection for open networks
833 0 : utils.debug("Creating new connection for", ap.Ssid);
834 0 : const settings = {
835 0 : connection: {
836 0 : id: ap.Ssid,
837 0 : type: "802-11-wireless",
838 0 : autoconnect: true,
839 0 : },
840 0 : "802-11-wireless": {
841 0 : ssid: utils.ssid_to_nm(ap.Ssid),
842 0 : mode: "infrastructure",
843 0 : }
844 0 : };
845 :
846 : // Pass null for specific_object - NM will find the right AP by SSID
847 0 : await dev.activate_with_settings(settings, null);
848 0 : utils.debug("Connection activation started for", ap.Ssid);
849 0 : await dev.wait_connection(ap.Ssid);
850 0 : utils.debug("Connected successfully to", ap.Ssid);
851 0 : } catch (error) {
852 : // Provide context-appropriate error message
853 0 : const errorMsg = error.reason === 7 // NM_DEVICE_STATE_REASON_NO_SECRETS
854 0 : ? _("Network password is not stored. Please forget and reconnect to this network.")
855 0 : : error.toString();
856 0 : show_error_dialog(
857 0 : cockpit.format(_("Failed to connect to $0"), ap.Ssid),
858 0 : errorMsg
859 0 : );
860 0 : }
861 0 : }
862 :
863 0 : const networkSort = (rows, direction, columnIndex) => {
864 : // Separate hidden networks row from named networks rows
865 0 : const hiddenRow = rows.find(r => r.props["data-hidden"]);
866 0 : const namedRows = rows.filter(r => !r.props["data-hidden"]);
867 :
868 0 : if (columnIndex === 0) {
869 : // Network column: simple alphabetical sort, no special cases
870 0 : const sorted = [...namedRows].sort((a, b) =>
871 0 : a.columns[0].sortKey.localeCompare(b.columns[0].sortKey)
872 0 : );
873 : // Always put hidden networks at the bottom
874 0 : const result = direction === SortByDirection.asc ? sorted : sorted.reverse();
875 0 : return hiddenRow ? [...result, hiddenRow] : result;
876 0 : } else {
877 : // Signal column (default): group by connected > known > unknown, each sorted by signal strength
878 :
879 : // Separate into groups
880 0 : const activeRows = [];
881 0 : const knownRows = [];
882 0 : const unknownRows = [];
883 :
884 0 : namedRows.forEach(r => {
885 0 : const isActive = activeSSID && r.props["data-ssid"] === activeSSID;
886 0 : if (isActive) {
887 0 : activeRows.push(r);
888 0 : } else if (r.props["data-known"]) {
889 0 : knownRows.push(r);
890 0 : } else {
891 0 : unknownRows.push(r);
892 0 : }
893 0 : });
894 :
895 : // Sort each group by stable signal order
896 : // Build a map for O(1) lookups instead of O(n) indexOf
897 0 : const orderMap = new Map();
898 0 : stableAPOrder.current.forEach((mac, index) => orderMap.set(mac, index));
899 :
900 0 : const sortByStableOrder = (a, b) => {
901 0 : const aMAC = a.props.key;
902 0 : const bMAC = b.props.key;
903 0 : const aOrder = orderMap.get(aMAC);
904 0 : const bOrder = orderMap.get(bMAC);
905 0 : if (aOrder === undefined || bOrder === undefined) {
906 0 : return a.columns[2].sortKey.localeCompare(b.columns[2].sortKey);
907 0 : }
908 0 : return aOrder - bOrder;
909 0 : };
910 :
911 0 : knownRows.sort(sortByStableOrder);
912 0 : unknownRows.sort(sortByStableOrder);
913 :
914 : // Concatenate groups
915 0 : const result = [...activeRows, ...knownRows, ...unknownRows];
916 0 : const sortedResult = direction === SortByDirection.asc ? result : result.reverse();
917 : // Always put hidden networks at the bottom
918 0 : return hiddenRow ? [...sortedResult, hiddenRow] : sortedResult;
919 0 : }
920 0 : };
921 :
922 : // Filter by name
923 29 : let filteredVisibleAPs = dev.visibleSsids;
924 2 : if (networkSearch) {
925 2 : const searchLower = networkSearch.toLowerCase();
926 0 : filteredVisibleAPs = dev.visibleSsids.filter(ap => ap.Ssid.toLowerCase().includes(searchLower));
927 2 : }
928 :
929 0 : const rows = filteredVisibleAPs.map((ap, index) => {
930 0 : const isActive = activeSSID && ap.Ssid === activeSSID;
931 0 : const isSecured = !!(ap.WpaFlags || ap.RsnFlags);
932 :
933 0 : const securityIcon = isSecured
934 0 : ? <LockIcon aria-label={_("secured")} />
935 0 : : <LockOpenIcon aria-label={_("open")} />;
936 :
937 0 : const nameContent = (
938 0 : <>
939 0 : {ap.Ssid}
940 0 : {isActive && <>{" "} <ConnectedIcon className="nm-icon-connected" /></>}
941 0 : {!isActive && ap.Connection && <>{" "} <ThumbtackIcon className="nm-icon-known" /></>}
942 0 : </>
943 : );
944 :
945 0 : const timestamp = ap.Connection?.Settings?.connection?.timestamp || 0;
946 0 : const nameColumn = timestamp > 0
947 : ? (
948 0 : <Tooltip content={cockpit.format(_("Last connected: $0"), distanceToNow(timestamp * 1000))}>
949 0 : <span>{nameContent}</span>
950 0 : </Tooltip>
951 : )
952 0 : : nameContent;
953 :
954 0 : const signalColumn = (
955 0 : <Progress value={ap.Strength}
956 0 : label={ap.Strength + "%"}
957 0 : aria-label={_("Signal strength")}
958 0 : size="sm" />
959 : );
960 :
961 0 : let actionColumn;
962 0 : if (isActive) {
963 0 : actionColumn = (
964 0 : <Privileged allowed={privileged}
965 0 : tooltipId={"wifi-disconnect-" + index}
966 0 : excuse={_("Not permitted to disconnect network")}>
967 0 : <Button variant="danger"
968 0 : size="sm"
969 0 : icon={<DisconnectedIcon />}
970 0 : isDisabled={!privileged}
971 0 : onClick={() => {
972 0 : dev.disconnect()
973 0 : .then(() => utils.debug("Disconnected successfully from", ap.Ssid))
974 0 : .catch(show_unexpected_error);
975 0 : }}
976 0 : aria-label={_("Disconnect")}>
977 0 : {_("Disconnect")}
978 0 : </Button>
979 0 : </Privileged>
980 : );
981 0 : } else {
982 0 : actionColumn = (
983 0 : <>
984 0 : <Privileged allowed={privileged}
985 0 : tooltipId={"wifi-connect-" + index}
986 0 : excuse={_("Not permitted to connect to network")}>
987 0 : <Button variant="secondary"
988 0 : size="sm"
989 0 : icon={<ConnectedIcon />}
990 0 : isDisabled={!privileged}
991 0 : onClick={() => connectToAP(ap)}
992 0 : aria-label={_("Connect")}>
993 0 : {_("Connect")}
994 0 : </Button>
995 0 : </Privileged>
996 0 : {ap.Connection && (
997 0 : <>
998 0 : {" "}
999 0 : <KebabDropdown
1000 0 : toggleButtonId={"wifi-kebab-" + index}
1001 0 : isDisabled={!privileged}
1002 0 : dropdownItems={[
1003 0 : <DropdownItem key="forget"
1004 0 : className="pf-m-danger"
1005 0 : onClick={() => forgetNetwork(ap)}
1006 0 : aria-label={_("Forget")}>
1007 0 : {_("Forget")}
1008 0 : </DropdownItem>
1009 0 : ]} />
1010 0 : </>
1011 : )}
1012 0 : </>
1013 : );
1014 0 : }
1015 :
1016 0 : return {
1017 0 : columns: [
1018 0 : { title: nameColumn, sortKey: ap.Ssid, header: true },
1019 0 : { title: <>{securityIcon} {ap.Mode}</>, sortKey: ap.Mode },
1020 0 : { title: signalColumn, sortKey: String(ap.Strength).padStart(3, '0') },
1021 0 : { title: cockpit.format_bits_per_sec(ap.MaxBitrate * 1000) },
1022 0 : { title: actionColumn },
1023 0 : ],
1024 0 : props: { key: ap.HwAddress, "data-ssid": ap.Ssid, "data-known": !!ap.Connection }
1025 0 : };
1026 0 : });
1027 :
1028 : // Add aggregated hidden access points row at the bottom
1029 2 : if (dev.hiddenAPCount > 0) {
1030 2 : const hiddenLabel = cockpit.ngettext("$0 hidden network", "$0 hidden networks", dev.hiddenAPCount);
1031 2 : rows.push({
1032 2 : columns: [
1033 2 : { title: cockpit.format(hiddenLabel, dev.hiddenAPCount), sortKey: "zzz-hidden", header: true },
1034 2 : { title: "" },
1035 2 : { title: "" },
1036 2 : { title: "" },
1037 2 : { title: "" },
1038 2 : ],
1039 2 : props: { key: "hidden-networks", "data-hidden": true }
1040 2 : });
1041 2 : }
1042 :
1043 2 : return (
1044 2 : <Card isPlain id="network-interface-wifi-networks">
1045 2 : <CardHeader actions={{
1046 2 : actions: (
1047 2 : <Flex>
1048 2 : {dev.visibleSsids.length >= 3 && (
1049 2 : <FlexItem>
1050 2 : <SearchInput
1051 2 : placeholder={_("Filter")}
1052 2 : value={networkSearch}
1053 0 : onChange={(_event, value) => setNetworkSearch(value)}
1054 0 : onClear={() => setNetworkSearch("")}
1055 2 : />
1056 2 : </FlexItem>
1057 : )}
1058 29 : <FlexItem>
1059 29 : <Button variant="secondary"
1060 0 : onClick={() => Dialogs.show(<WiFiConnectDialog dev={dev} model={model} />)}
1061 29 : icon={<PlusIcon />}>
1062 29 : {_("Connect to hidden network")}
1063 29 : </Button>
1064 29 : </FlexItem>
1065 29 : <FlexItem>
1066 29 : <Button variant="secondary"
1067 0 : onClick={() => { setIsScanning(true); dev.request_scan() }}
1068 29 : isDisabled={isScanning}
1069 2 : icon={isScanning ? <Spinner size="md" /> : <RedoIcon />}>
1070 29 : {_("Refresh")}
1071 29 : </Button>
1072 29 : </FlexItem>
1073 29 : </Flex>
1074 : )
1075 29 : }}>
1076 29 : <CardTitle component="h2">{_("Available networks")}</CardTitle>
1077 29 : </CardHeader>
1078 29 : <ListingTable aria-label={_("Available networks")}
1079 29 : variant='compact'
1080 29 : columns={[
1081 29 : { title: _("Network"), header: true, sortable: true },
1082 29 : { title: _("Mode") },
1083 29 : { title: _("Signal"), sortable: true },
1084 29 : { title: _("Rate") },
1085 29 : { title: "", props: { screenReaderText: _("Actions") } },
1086 29 : ]}
1087 29 : sortBy={{ index: 2, direction: SortByDirection.asc }}
1088 29 : sortMethod={networkSort}
1089 29 : rows={rows} />
1090 29 : </Card>
1091 : );
1092 29 : }
1093 :
1094 29 : function renderConnectionMembers(con) {
1095 29 : const memberIfaces = { };
1096 29 : const members = { };
1097 :
1098 29 : const rx_plot_data = {
1099 29 : direct: "network.interface.in.bytes",
1100 29 : internal: "network.interface.rx",
1101 29 : units: "bytes",
1102 29 : derive: "rate",
1103 29 : factor: 8
1104 29 : };
1105 :
1106 29 : const tx_plot_data = {
1107 29 : direct: "network.interface.out.bytes",
1108 29 : internal: "network.interface.tx",
1109 29 : units: "bytes",
1110 29 : derive: "rate",
1111 29 : factor: 8
1112 29 : };
1113 :
1114 29 : const cs = con && connection_settings(con);
1115 20 : if (!con || (cs.type != "bond" && cs.type != "team" && cs.type != "bridge")) {
1116 20 : plot_state.plot_instances('rx', rx_plot_data, [dev_name], true);
1117 20 : plot_state.plot_instances('tx', tx_plot_data, [dev_name], true);
1118 20 : return null;
1119 20 : }
1120 :
1121 14 : const plot_ifaces = [];
1122 :
1123 13 : con.Members.forEach(member_con => {
1124 13 : member_con.Interfaces.forEach(iface => {
1125 13 : if (iface.MainConnection != member_con)
1126 13 : return;
1127 :
1128 13 : const dev = iface.Device;
1129 :
1130 : /* Unmanaged devices shouldn't show up as members
1131 : * but let's not take any chances.
1132 : */
1133 13 : if (dev && !is_managed(dev))
1134 13 : return;
1135 :
1136 13 : plot_ifaces.push(iface.Name);
1137 13 : usage_monitor.add(iface.Name);
1138 13 : members[iface.Name] = iface;
1139 13 : memberIfaces[iface.Name] = true;
1140 13 : });
1141 13 : });
1142 :
1143 14 : plot_state.plot_instances('rx', rx_plot_data, plot_ifaces, true);
1144 14 : plot_state.plot_instances('tx', tx_plot_data, plot_ifaces, true);
1145 :
1146 14 : const sorted_members = Object.keys(members).sort()
1147 13 : .map(name => members[name]);
1148 :
1149 14 : return (
1150 14 : <NetworkInterfaceMembers members={sorted_members}
1151 14 : memberIfaces={memberIfaces}
1152 14 : interfaces={interfaces}
1153 14 : iface={iface}
1154 14 : usage_monitor={usage_monitor}
1155 14 : privileged={privileged} />
1156 : );
1157 29 : }
1158 :
1159 3 : function createGhostConnectionSettings() {
1160 3 : const settings = {
1161 3 : connection: {
1162 3 : interface_name: iface.Name
1163 3 : },
1164 3 : ipv4: {
1165 3 : method: "auto",
1166 3 : address_data: [],
1167 3 : dns_data: [],
1168 3 : dns_search: [],
1169 3 : route_data: []
1170 3 : },
1171 3 : ipv6: {
1172 3 : method: "auto",
1173 3 : address_data: [],
1174 3 : dns_data: [],
1175 3 : dns_search: [],
1176 3 : route_data: []
1177 3 : }
1178 3 : };
1179 3 : complete_settings(settings, dev);
1180 3 : return settings;
1181 3 : }
1182 :
1183 : /* Disable the On/Off button for interfaces that we don't know about at all,
1184 : and for devices that NM declares to be unavailable. Neither can be activated.
1185 : */
1186 :
1187 29 : let onoff;
1188 28 : if (isManaged) {
1189 28 : onoff = (
1190 28 : <Privileged allowed={privileged}
1191 28 : tooltipId="interface-switch"
1192 28 : excuse={ _("Not permitted to configure network devices") }>
1193 28 : <Switch id="interface-switch"
1194 28 : isChecked={!!(dev && dev.ActiveConnection)}
1195 28 : isDisabled={!iface || (dev && dev.State == 20) || !privileged}
1196 2 : onChange={(_event, enable) => enable ? connect() : disconnect()}
1197 28 : aria-label={_("Enable or disable the device")} />
1198 28 : </Privileged>
1199 : );
1200 28 : }
1201 :
1202 29 : const isDeletable = (iface && !dev) || (dev && (dev.DeviceType == 'bond' ||
1203 21 : dev.DeviceType == 'team' ||
1204 21 : dev.DeviceType == 'vlan' ||
1205 20 : dev.DeviceType == 'bridge' ||
1206 19 : dev.DeviceType == 'wireguard'));
1207 :
1208 29 : const settingsRows = renderConnectionSettingsRows(iface.MainConnection, connectionSettings)
1209 28 : .map((component, idx) => <React.Fragment key={idx}>{component}</React.Fragment>);
1210 :
1211 29 : const anaconda = in_anaconda_mode();
1212 :
1213 29 : return (
1214 29 : <Page id="network-interface"
1215 29 : data-test-wait={operationInProgress}
1216 2 : className={"pf-m-no-sidebar" + (anaconda ? " anaconda" : "")}>
1217 29 : <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
1218 29 : <Breadcrumb>
1219 29 : <BreadcrumbItem to='#/'>
1220 29 : {_("Networking")}
1221 29 : </BreadcrumbItem>
1222 29 : <BreadcrumbItem isActive>
1223 29 : {dev_name}
1224 29 : </BreadcrumbItem>
1225 29 : </Breadcrumb>
1226 29 : </PageBreadcrumb>
1227 29 : <PageSection hasBodyWrapper={false}>
1228 29 : <NetworkPlots plot_state={plot_state} />
1229 29 : </PageSection>
1230 29 : <PageSection hasBodyWrapper={false}>
1231 29 : <Gallery hasGutter>
1232 29 : <Card isPlain className="network-interface-details">
1233 29 : <CardHeader actions={{
1234 29 : actions: (
1235 29 : <>
1236 17 : {isDeletable && isManaged &&
1237 17 : <Button variant="danger"
1238 17 : onClick={syn_click(model, deleteConnections)}
1239 17 : id="network-interface-delete">
1240 17 : {_("Delete")}
1241 17 : </Button>}
1242 29 : {onoff}
1243 29 : </>
1244 : ),
1245 29 : }}>
1246 29 : <CardTitle className="network-interface-details-title">
1247 29 : <span id="network-interface-name">{dev_name}</span>
1248 29 : <span id="network-interface-hw">{renderDesc()}</span>
1249 29 : <span id="network-interface-mac">{renderMac()}</span>
1250 29 : </CardTitle>
1251 29 : </CardHeader>
1252 29 : <CardBody>
1253 29 : <DescriptionList id="network-interface-settings" className="network-interface-settings pf-m-horizontal-on-sm">
1254 29 : {renderActiveStatusRow()}
1255 29 : {renderCarrierStatusRow()}
1256 29 : {settingsRows}
1257 29 : </DescriptionList>
1258 29 : </CardBody>
1259 29 : { !isManaged
1260 3 : ? <CardBody>
1261 3 : {_("This device cannot be managed here.")}
1262 3 : </CardBody>
1263 28 : : null
1264 : }
1265 29 : </Card>
1266 29 : {renderWiFiNetworks()}
1267 29 : {renderConnectionMembers(iface.MainConnection)}
1268 29 : </Gallery>
1269 29 : </PageSection>
1270 29 : </Page>
1271 : );
1272 29 : };
|
