mirror-cockpit-project-cockpit/pkg/networkmanager/bridge.jsx
Jelle van der Waa 751779dd1e networkmanager: Don't rely on global event behaviour
The `onSubumit` handler receives an event which we should use instead of
the global `window.event` object. This works in most browsers but is
deprecated.
2026-06-23 13:28:58 +02:00

132 lines
5.8 KiB
JavaScript

/*
* Copyright (C) 2021 Red Hat, Inc.
* SPDX-License-Identifier: LGPL-2.1-or-later
*/
import React, { useState, useContext } from 'react';
import cockpit from 'cockpit';
import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox/index.js";
import { FormGroup } from "@patternfly/react-core/dist/esm/components/Form/index.js";
import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/index.js";
import { MemberInterfaceChoices, NetworkModal, Name, dialogSave } from './dialogs-common.jsx';
import { ModelContext } from './model-context.jsx';
import { useDialogs } from "dialogs.jsx";
import { v4 as uuidv4 } from 'uuid';
import {
member_connection_for_interface,
member_interface_choices,
} from './interfaces.js';
const _ = cockpit.gettext;
export const BridgeDialog = ({ connection, dev, settings }) => {
const Dialogs = useDialogs();
const idPrefix = "network-bridge-settings";
const model = useContext(ModelContext);
const memberChoicesInit = {};
member_interface_choices(model, connection).forEach((iface) => {
memberChoicesInit[iface.Name] = !!member_connection_for_interface(connection, iface);
});
const [dialogError, setDialogError] = useState(undefined);
const [iface, setIface] = useState(settings.connection.interface_name);
const [stp, setStp] = useState(!!settings.bridge.stp);
const [priority, setPriority] = useState(settings.bridge.priority || 10);
const [forwardDelay, setForwardDelay] = useState(settings.bridge.forward_delay || 10);
const [helloTime, setHelloTime] = useState(settings.bridge.hello_time || 10);
const [maxAge, setMaxAge] = useState(settings.bridge.max_age || 10);
const [memberChoices, setMemberChoices] = useState(memberChoicesInit);
const onSubmit = (ev) => {
const createSettingsObj = () => ({
...settings,
connection: {
...settings.connection,
id: iface,
interface_name: iface,
},
bridge: {
...settings.bridge,
stp,
...(stp && { priority, forward_delay: forwardDelay, hello_time: helloTime, max_age: maxAge }),
interface_name: iface,
}
});
dialogSave({
model,
dev,
connection,
members: memberChoices,
membersInit: memberChoicesInit,
settings: createSettingsObj(),
setDialogError,
onClose: Dialogs.close,
});
// Prevent dialog from closing because of <form> onsubmit event
if (ev)
ev.preventDefault();
return false;
};
return (
<NetworkModal dialogError={dialogError}
idPrefix="network-bridge-settings"
onSubmit={onSubmit}
title={!connection ? _("Add bridge") : _("Edit bridge settings")}
isCreateDialog={!connection}
>
<>
<Name idPrefix={idPrefix} iface={iface} setIface={setIface} />
<FormGroup label={_("Ports")} fieldId={idPrefix + "-interface-members-list"} hasNoPaddingTop>
<MemberInterfaceChoices idPrefix={idPrefix} memberChoices={memberChoices} setMemberChoices={setMemberChoices} model={model} group={connection} />
</FormGroup>
<FormGroup label={_("Options")} fieldId={idPrefix + "-stp-enabled-input"} hasNoPaddingTop>
<Checkbox id={idPrefix + "-stp-enabled-input"} isChecked={stp} onChange={(_, s) => setStp(s)} label={_("Spanning tree protocol (STP)")} />
{stp && <>
<FormGroup fieldId="network-bridge-stp-settings-priority-input" label={_("STP priority")}>
<TextInput id="network-bridge-stp-settings-priority-input" className="network-number-field" value={priority} onChange={(_event, value) => setPriority(Number.parseInt(value))} />
</FormGroup>
<FormGroup fieldId="network-bridge-stp-settings-forward-delay-input" label={_("STP forward delay")}>
<TextInput id="network-bridge-stp-settings-forward-delay-input" className="network-number-field" value={forwardDelay} onChange={(_event, value) => setForwardDelay(Number.parseInt(value))} />
</FormGroup>
<FormGroup fieldId="network-bridge-stp-settings-hello-time-input" label={_("STP hello time")}>
<TextInput id="network-bridge-stp-settings-hello-time-input" className="network-number-field" value={helloTime} onChange={(_event, value) => setHelloTime(Number.parseInt(value))} />
</FormGroup>
<FormGroup fieldId="network-bridge-stp-settings-max-age-input" label={_("STP maximum message age")}>
<TextInput id="network-bridge-stp-settings-max-age-input" className="network-number-field" value={maxAge} onChange={(_event, value) => setMaxAge(Number.parseInt(value))} />
</FormGroup>
</>}
</FormGroup>
</>
</NetworkModal>
);
};
export const getGhostSettings = ({ newIfaceName }) => {
return (
{
connection: {
id: newIfaceName,
autoconnect: true,
type: "bridge",
uuid: uuidv4(),
interface_name: newIfaceName
},
bridge: {
interface_name: newIfaceName,
stp: false,
priority: 32768,
forward_delay: 15,
hello_time: 2,
max_age: 20,
ageing_time: 300
}
}
);
};