shell: Make it all reacty #21012

mvollmer · 2024-09-16T13:24:15Z

Before landing:

shell: Don't automatically connect to remote machines on navigation #20826
test: Prepare for Shell rewrite #21067
shell: Take docs from the correct manifest item #21072
testlib update in starter-kit
testlib udpate in cockpit-podman
testlib udpate in cockpit-machines
testlib udpate in cockpit-files
testlib udpate in cockpit-ostree

Ideas for followups:

Remove the workaround for the Chrome crashes, and really remove iframe elements from the DOM. The crashes don't seem to happen anymore with the current code. Who knows what has changed... shell: Remove workaround for Chrome crash #21074
The "jump" operation has a quirk re omitting the hash that we could remove. A omitted hash either means "empty hash in the final URL" or "same hash as previously", depending on whether the jump operation actually changes which frame is current or not. This can be avoided by changing all callers of "jump" to pass "/" as the hash when they want to have a empty one. I think it's mostly tests that exploit the quirk.
Remove the hacks and botches from the old React components, which is hopefully now possible.
Replace HostModalState with useDialogs.
Stop polling frames for readiness (which is a ill-defined thing anyway), and just keep them hidden until "onload" has fired. That also fixes the dark-mode flicker on Firefox. shell: Use the "load" event instead of polling to catch ready frames #21061
Add current_manifest to ShellState and use that in TopNav to get at the parent field. (TopNav uses the full path to look up the manifest itself, but should really only use the first component.)

pkg/newshell/base_index.js

pkg/newshell/hosts_dialog.jsx

pkg/newshell/shell.jsx

pkg/shell/shell.jsx

garrett · 2024-09-16T14:47:57Z

The host switcher mockups are so old, they used PF3 and had the dashboard:

(And the dashboard was where we edited machines prior.)

For PF4, if we're doing a 1:1 port, we should consider doing popovers and having a modal show up when you add or edit without dismissing the popover. (It will look different from these mockups for sure.)

pkg/shell/shell.jsx

jelly · 2024-09-18T13:47:07Z

test/verify/check-pages

@@ -71,6 +71,8 @@ class TestPages(testlib.MachineCase):
        m = self.machine
        b = self.browser

+        m.upload(["/home/mvo/work/cockpit/dist/shell"], "/usr/share/cockpit")


pkg/shell/shell.jsx

jelly · 2024-09-18T14:07:33Z

pkg/shell/hosts.jsx

        hosts_sel.appendChild(this.el);
    }

    componentWillUnmount() {
+        const hosts_sel = document.getElementById("nav-hosts");


Seems like an easy split off PR?

Yeah, but it's only necessary here because '#nav-hosts' doesn't exist yet (in this PR only) when the file is loaded. Also, I hope we can get rid of this DOM manipulation completely in this PR. Eventually.

jelly · 2024-09-19T13:20:34Z

pkg/shell/hosts.jsx

@@ -307,7 +306,6 @@ export class CockpitHosts extends React.Component {
                                item_render={render}
                                sorting={(a, b) => true}
                                filtering={this.filterHosts}
-                                current={label}


So it seems CockpitNav does not use current at all, can we then split this removal off?

No, that was a mistake unfortunately. It uses current to notice when navigation has happened, and then resets the search field.

This might be a good example of hard to understand magic that we want to get rid of. There might be a signal on the ShellState that announces navigation, or we might have a navigation_counter, or something more obvious.

pkg/shell/shell.jsx

pkg/shell/state.jsx

pkg/shell/shell.jsx

pkg/shell/state.jsx

pkg/shell/frames.jsx

pkg/shell/router.jsx

pkg/shell/hosts.jsx

mvollmer · 2024-10-02T13:28:10Z

Green, except for the revdeps. Those should go green with #21067.

Fixes cockpit-project#21040

And rewrite much of the state handling to make it easier to understand. Specifically, the old Index and MachineIndex classes and their complicated interactions have been replaced with a hopefully much more straightforward ShellState class. However, the existing React components such as CockpitHosts and TopNav have not been significantly touched. The API for launching the HostModal dialogs has been changed to make it more suitable for a later rewrite with Dialogs.run() ala pkg/lib/cockpit-connect-ssh.

cockpituous · 2024-10-03T09:44:44Z

pkg/shell/active-pages-modal.jsx

+                    frame: f,
+                    active,
+                    selected: active,
+                    displayName: f.host === "localhost" ? "/" + f.path : f.host + ":/" + f.path,


This added line is not executed by any test.

cockpituous · 2024-10-03T09:44:44Z

pkg/shell/failures.jsx

+    if (machine.restarting) {
+        title = _("The machine is rebooting");
+        message = "";
+    } else if (connecting) {


These 4 added lines are not executed by any test.

cockpituous · 2024-10-03T09:44:44Z

pkg/shell/frames.jsx

+    } catch (ex) {
+        ready = true;


These 2 added lines are not executed by any test.

cockpituous · 2024-10-03T09:44:45Z

pkg/shell/frames.jsx

+            if (frame.ready && iframe.getAttribute("data-ready") == null)
+                iframe.setAttribute("data-ready", "1");
+            else if (!frame.ready && iframe.getAttribute("data-ready"))
+                iframe.removeAttribute("data-ready");


This added line is not executed by any test.

cockpituous · 2024-10-03T09:44:45Z

pkg/shell/frames.jsx

+            if (frame.loaded && iframe.getAttribute("data-loaded") == null)
+                iframe.setAttribute("data-loaded", "1");
+            else if (!frame.loaded && iframe.getAttribute("data-loaded"))
+                iframe.removeAttribute("data-loaded");


This added line is not executed by any test.

cockpituous · 2024-10-03T09:44:48Z

pkg/shell/util.jsx

+    self.search = function(prop, value) {
+        for (const x in self.items) {
+            if (self.items[x][prop] === value)
+                return self.items[x];


These 4 added lines are not executed by any test.

cockpituous · 2024-10-03T09:44:49Z

pkg/shell/util.jsx

+function component_checksum(machine, path) {
+    const parts = path.split("/");
+    const pkg = parts[0];
+    if (machine.manifests && machine.manifests[pkg] && machine.manifests[pkg][".checksum"])
+        return "$" + machine.manifests[pkg][".checksum"];


These 5 added lines are not executed by any test.

cockpituous · 2024-10-03T09:44:49Z

pkg/shell/util.jsx

+export function compute_frame_url(machine, path) {
+    let base, checksum;
+    if (machine.manifests && machine.manifests[".checksum"])
+        checksum = "$" + machine.manifests[".checksum"];


This added line is not executed by any test.

cockpituous · 2024-10-03T09:44:49Z

pkg/shell/util.jsx

+    if (checksum && checksum == component_checksum(machine, path)) {
+        if (machine.connection_string === "localhost")
+            base = "..";


These 3 added lines are not executed by any test.

cockpituous · 2024-10-03T09:44:49Z

pkg/shell/util.jsx

+        if (machine.connection_string === "localhost")
+            base = "..";
+        else
+            base = "../../" + checksum;


This added line is not executed by any test.

github-advanced-security bot found potential problems Sep 16, 2024

View reviewed changes

pkg/newshell/base_index.js Fixed Show fixed Hide fixed

pkg/newshell/base_index.js Fixed Show fixed Hide fixed

pkg/newshell/hosts_dialog.jsx Fixed Show fixed Hide fixed

pkg/newshell/hosts_dialog.jsx Fixed Show fixed Hide fixed

pkg/newshell/shell.jsx Fixed Show fixed Hide fixed

mvollmer force-pushed the shell-never-go-full-react branch from ef20c0f to c06e5df Compare September 16, 2024 13:31

github-advanced-security bot found potential problems Sep 16, 2024

View reviewed changes