diff --git a/pkg/shell/hosts.jsx b/pkg/shell/hosts.jsx index b9407b590ab..df805ad5c2c 100644 --- a/pkg/shell/hosts.jsx +++ b/pkg/shell/hosts.jsx @@ -15,7 +15,7 @@ import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip"; import 'polyfills'; import { CockpitNav, CockpitNavItem } from "./nav.jsx"; -import { HostModal } from "./hosts_dialog.jsx"; +import { HostModal, try2Connect, codes } from "./hosts_dialog.jsx"; import { useLoggedInUser } from "hooks"; const _ = cockpit.gettext; @@ -75,6 +75,9 @@ export class CockpitHosts extends React.Component { current_key: props.machine.key, show_modal: false, edit_machine: null, + switch_machine: null, + error_options: null, + warn_before_connecting: true, }; this.toggleMenu = this.toggleMenu.bind(this); @@ -82,6 +85,7 @@ export class CockpitHosts extends React.Component { this.onAddNewHost = this.onAddNewHost.bind(this); this.onEditHosts = this.onEditHosts.bind(this); this.onHostEdit = this.onHostEdit.bind(this); + this.onHostSwitch = this.onHostSwitch.bind(this); this.onRemove = this.onRemove.bind(this); } @@ -89,6 +93,15 @@ export class CockpitHosts extends React.Component { cockpit.user().then(user => { this.setState({ current_user: user.name || "" }); }).catch(exc => console.log(exc)); + + window.trigger_connection_flow = machine => { + if (!this.state.show_modal) + this.onHostSwitch(machine); + }; + } + + componentWillUnmount() { + window.trigger_connection_flow = null; } static getDerivedStateFromProps(nextProps, prevState) { @@ -124,6 +137,26 @@ export class CockpitHosts extends React.Component { this.setState({ show_modal: true, edit_machine: machine }); } + onHostSwitch(machine) { + if (machine.state == "connected" || machine.address == "localhost") { + const addr = this.props.hostAddr({ host: machine.address }, true); + this.props.jump(addr); + } else if (machine.state != "connecting") { + if (this.state.warn_before_connecting) + this.setState({ show_modal: true, switch_machine: machine }); + else { + try2Connect(this.props.machines, machine.connection_string) + .then(() => { + const addr = this.props.hostAddr({ host: machine.address }, true); + this.props.jump(addr); + }) + .catch(err => { + this.setState({ show_modal: true, switch_machine: machine, error_options: err }); + }); + } + } + } + onEditHosts() { this.setState(s => { return { editing: !s.editing } }); } @@ -180,7 +213,7 @@ export class CockpitHosts extends React.Component { header={(m.user ? m.user : this.state.current_user) + " @"} status={m.state === "failed" ? { type: "error", title: _("Connection error") } : null} className={m.state} - jump={this.props.jump} + jump={() => this.onHostSwitch(m)} actions={<> @@ -242,22 +275,35 @@ export class CockpitHosts extends React.Component { {this.state.show_modal && this.setState({ show_modal: false, edit_machine: null })} - address={this.state.edit_machine ? this.state.edit_machine.address : null} - caller_callback={this.state.edit_machine - ? (new_connection_string) => { - const parts = this.props.machines.split_connection_string(new_connection_string); - if (this.state.edit_machine == this.props.machine && parts.address != this.state.edit_machine.address) { - const addr = this.props.hostAddr({ host: parts.address }, true); + onClose={() => this.setState({ show_modal: false, + edit_machine: null, + switch_machine: null, + error_options: null, + })} + address={this.state.edit_machine?.address || this.state.switch_machine?.address} + template={this.state.switch_machine + ? (this.state.error_options + ? codes[this.state.error_options.problem] || "change-port" + : "connect") + : null} + error_options={this.state.error_options} + troubleshoot_error={this.state.connection_error} + caller_callback={(new_connection_string) => { + const parts = this.props.machines.split_connection_string(new_connection_string); + const addr = this.props.hostAddr({ host: parts.address }, true); + if (this.state.edit_machine) { + if (this.state.edit_machine == this.props.machine && + parts.address != this.state.edit_machine.address) { this.props.jump(addr); } - return Promise.resolve(); - } - : (new_connection_string) => { - const parts = this.props.machines.split_connection_string(new_connection_string); + } else { this.props.loader.connect(parts.address); + if (this.state.switch_machine) + this.props.jump(addr); return Promise.resolve(); - }} /> + } + }} + /> } ); diff --git a/pkg/shell/hosts_dialog.jsx b/pkg/shell/hosts_dialog.jsx index 6ac3af372bd..c220eb852de 100644 --- a/pkg/shell/hosts_dialog.jsx +++ b/pkg/shell/hosts_dialog.jsx @@ -33,19 +33,22 @@ import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox/in import { ClipboardCopy } from "@patternfly/react-core/dist/esm/components/ClipboardCopy/index.js"; import { ExpandableSection } from "@patternfly/react-core/dist/esm/components/ExpandableSection/index.js"; import { Form, FormGroup } from "@patternfly/react-core/dist/esm/components/Form/index.js"; -import { Modal } from "@patternfly/react-core/dist/esm/components/Modal/index.js"; +import { Modal, ModalVariant } from "@patternfly/react-core/dist/esm/components/Modal/index.js"; import { Popover } from "@patternfly/react-core/dist/esm/components/Popover/index.js"; import { Radio } from "@patternfly/react-core/dist/esm/components/Radio/index.js"; import { Stack } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js"; import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/index.js"; -import { OutlinedQuestionCircleIcon } from "@patternfly/react-icons"; +import { OutlinedQuestionCircleIcon, ExternalLinkAltIcon } from "@patternfly/react-icons"; +import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText/index.js"; import { FormHelper } from "cockpit-components-form-helper"; import { ModalError } from "cockpit-components-inline-notification.jsx"; +import { fmt_to_fragments } from "utils.js"; const _ = cockpit.gettext; export const codes = { + "danger": "connect", "no-cockpit": "not-supported", "not-supported": "not-supported", "protocol-error": "not-supported", @@ -108,6 +111,66 @@ export const CrossMachineWarning = () => { title={_("Malicious pages on a remote machine may affect other connected hosts")} />; }; +class Connect extends React.Component { + constructor(props) { + super(props); + + this.state = { + inProgress: false, + }; + } + + onConnect() { + this.setState({ inProgress: true }); + this.props.run(this.props.try2Connect(this.props.full_address), ex => { + if (ex.problem === "no-host") { + let host_id_port = address; + let port = "22"; + const port_index = host_id_port.lastIndexOf(":"); + if (port_index === -1) + host_id_port = address + ":22"; + else + port = host_id_port.substr(port_index + 1); + + ex.message = cockpit.format(_("Unable to contact the given host $0. Make sure it has ssh running on port $1, or specify another port in the address."), host_id_port, port); + ex.problem = "not-found"; + } + this.setState({ inProgress: false }); + this.props.setError(ex); + }); + } + + render() { + return ( + {this.props.host})} + titleIconVariant="warning" + footer={<> + + {_("You will be reminded once per session")} + + + + } + > +

{_("Remote hosts have the ability to run JavaScript on all connected hosts. Only connect to machines that you trust.")}

+

+ + {_("Read more")} + +

+ + ); + } +} + class AddMachine extends React.Component { constructor(props) { super(props); @@ -229,22 +292,24 @@ class AddMachine extends React.Component { }); }); - this.props.run(this.props.try2Connect(address), ex => { - if (ex.problem === "no-host") { - let host_id_port = address; - let port = "22"; - const port_index = host_id_port.lastIndexOf(":"); - if (port_index === -1) - host_id_port = address + ":22"; - else - port = host_id_port.substr(port_index + 1); - - ex.message = cockpit.format(_("Unable to contact the given host $0. Make sure it has ssh running on port $1, or specify another port in the address."), host_id_port, port); - ex.problem = "not-found"; - } - this.setState({ inProgress: false }); - this.props.setError(ex); - }); + this.props.setError({ problem: "danger", command: "close" }); + + // this.props.run(this.props.try2Connect(address), ex => { + // if (ex.problem === "no-host") { + // let host_id_port = address; + // let port = "22"; + // const port_index = host_id_port.lastIndexOf(":"); + // if (port_index === -1) + // host_id_port = address + ":22"; + // else + // port = host_id_port.substr(port_index + 1); + + // ex.message = cockpit.format(_("Unable to contact the given host $0. Make sure it has ssh running on port $1, or specify another port in the address."), host_id_port, port); + // ex.problem = "not-found"; + // } + // this.setState({ inProgress: false }); + // this.props.setError(ex); + // }); } render() { @@ -295,7 +360,6 @@ class AddMachine extends React.Component { { this.props.dialogError && } {body} - ); @@ -393,7 +457,6 @@ class MachinePort extends React.Component { { this.props.dialogError && } {body} - ); @@ -527,7 +590,6 @@ class HostKey extends React.Component { { this.props.dialogError && } {body} - ); @@ -905,13 +967,37 @@ class ChangeAuth extends React.Component { { this.props.dialogError && } {body} - ); } } +export function try2Connect(machines_ins, address, options) { + return new Promise((resolve, reject) => { + const conn_options = { ...options, payload: "echo", host: address }; + + conn_options["init-superuser"] = get_init_superuser_for_options(conn_options); + + const machine = machines_ins.lookup(address); + if (machine && machine.host_key && !machine.on_disk) { + conn_options['temp-session'] = false; // Compatibility option + conn_options.session = 'shared'; + conn_options['host-key'] = machine.host_key; + } + + const client = cockpit.channel(conn_options); + client.send("x"); + client.addEventListener("message", () => { + resolve(); + client.close(); + }); + client.addEventListener("close", (event, options) => { + reject(options); + }); + }); + } + export class HostModal extends React.Component { constructor(props) { super(props); @@ -920,7 +1006,7 @@ export class HostModal extends React.Component { current_template: this.props.template || "add-machine", address: full_address(props.machines_ins, props.address), old_address: full_address(props.machines_ins, props.address), - error_options: null, + error_options: this.props.error_options, dialogError: "", // Error to be shown in the modal }; @@ -950,28 +1036,7 @@ export class HostModal extends React.Component { } try2Connect(address, options) { - return new Promise((resolve, reject) => { - const conn_options = { ...options, payload: "echo", host: address }; - - conn_options["init-superuser"] = get_init_superuser_for_options(conn_options); - - const machine = this.props.machines_ins.lookup(address); - if (machine && machine.host_key && !machine.on_disk) { - conn_options['temp-session'] = false; // Compatibility option - conn_options.session = 'shared'; - conn_options['host-key'] = machine.host_key; - } - - const client = cockpit.channel(conn_options); - client.send("x"); - client.addEventListener("message", () => { - resolve(); - client.close(); - }); - client.addEventListener("close", (event, options) => { - reject(options); - }); - }); + return try2Connect(this.props.machines_ins, address, options); } complete() { @@ -1060,7 +1125,9 @@ export class HostModal extends React.Component { complete: this.complete, }; - if (template === "add-machine") + if (template === "connect") + return ; + else if (template === "add-machine") return ; else if (template === "unknown-hostkey" || template === "unknown-host" || template === "invalid-hostkey") return ; diff --git a/pkg/shell/indexes.jsx b/pkg/shell/indexes.jsx index 9b5077f77f8..87d31f7f118 100644 --- a/pkg/shell/indexes.jsx +++ b/pkg/shell/indexes.jsx @@ -30,7 +30,6 @@ import { EmptyStatePanel } from "cockpit-components-empty-state.jsx"; import { CockpitNav, CockpitNavItem, SidebarToggle } from "./nav.jsx"; import { TopNav } from ".//topnav.jsx"; import { CockpitHosts, CockpitCurrentHost } from "./hosts.jsx"; -import { codes, HostModal, CrossMachineWarning } from "./hosts_dialog.jsx"; import { EarlyFailure, EarlyFailureReady } from './failures.jsx'; import { WithDialogs } from "dialogs.jsx"; @@ -85,9 +84,6 @@ function MachinesIndex(index_options, machines, loader) { update_topbar(); }); - /* Is troubleshooting dialog open */ - let troubleshooting_opened = false; - sidebar_toggle_root.render(); // Focus with skiplinks @@ -175,11 +171,16 @@ function MachinesIndex(index_options, machines, loader) { paragraph={cockpit.message(watchdog_problem)} />); } + function trigger_connection_flow(machine) { + if (window.trigger_connection_flow) + window.trigger_connection_flow(machine); + } + /* Handles navigation */ function navigate(state, reconnect) { /* If this is a watchdog problem or we are troubleshooting * let the dialog handle it */ - if (watchdog_problem || troubleshooting_opened) + if (watchdog_problem) return; if (!state) @@ -210,6 +211,10 @@ function MachinesIndex(index_options, machines, loader) { machine.problem = "not-found"; } else if (reconnect || state.host == "localhost") { loader.connect(state.host); + } else if (machine.state != "connected") { + show_disconnected_machine(machine); + trigger_connection_flow(machine); + return; } const compiled = compile(machine); @@ -449,100 +454,29 @@ function MachinesIndex(index_options, machines, loader) { return component; } - let troubleshoot_dialog_root = null; - - function update_frame(machine, state, compiled) { - function render_troubleshoot() { - troubleshooting_opened = true; - const template = codes[machine.problem] || "change-port"; - if (!troubleshoot_dialog_root) - troubleshoot_dialog_root = root('troubleshoot-dialog'); - troubleshoot_dialog_root.render(React.createElement(HostModal, { - template, - address: machine.address, - machines_ins: machines, - onClose: () => { - troubleshoot_dialog_root.unmount(); - troubleshoot_dialog_root = null; - troubleshooting_opened = false; - navigate(null, true); - } - })); - } - - function connect_machine() { - loader.connect(machine.address); - } - + function show_disconnected_machine(machine) { let current_frame = index.current_frame(); - if (machine.state != "connected") { - if (current_frame) - current_frame.setAttribute("hidden", "hidden"); - current_frame = null; - index.current_frame(current_frame); - - const connecting = (machine.state == "connecting"); - let title, message; - if (machine.restarting) { - title = _("The machine is rebooting"); - message = ""; - } else if (connecting) { - title = _("Connecting to the machine"); - message = ""; - } else { - title = _("Not connected to host"); - if (machine.problem == "not-found") { - message = _("Cannot connect to an unknown host"); - } else { - const error = machine.problem || machine.state; - if (error) - message = cockpit.message(error); - else - message = ""; - } - } - - let troubleshooting = false; - - if (!machine.restarting && (machine.problem === "no-host" || !!codes[machine.problem])) { - troubleshooting = true; - } - - const restarting = !!machine.restarting; - const reconnect = !connecting && machine.problem != "not-found" && !troubleshooting; - - document.querySelector("#early-failure-ready").removeAttribute("hidden"); - if (machine.address == "localhost") { - early_failure_ready_root.render( - ); - } else { - early_failure_ready_root.render( - - - } - action={} /> - - ); - } - + if (current_frame) + current_frame.setAttribute("hidden", "hidden"); + current_frame = null; + index.current_frame(current_frame); - update_title(null, machine); + document.querySelector("#early-failure-ready").removeAttribute("hidden"); + early_failure_ready_root.render( + + + trigger_connection_flow(machine)}> + {_("Connect")} + } /> + + ); + } - /* Fall through when connecting, and allow frame to load at same time */ - if (!connecting) - return; - } + function update_frame(machine, state, compiled) { + let current_frame = index.current_frame(); let hash = state.hash; let component = state.component;