WIP - manage iframes explicitly

We really need to be super careful with setting their 'src' attribute
and React just doesn't seem to be.

pkg/shell/shell.jsx

@@ -19,7 +19,7 @@
 
 import cockpit from "cockpit";
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { createRoot } from "react-dom/client";
 
 import { WithDialogs } from "dialogs.jsx";
@@ -412,6 +412,63 @@ const Shell = ({ state, machines, loader }) => {
         config
     } = state;
 
+    useEffect(() => {
+        const content = document.getElementById("content");
+        if (content) {
+            const frames_by_name = {};
+            const iframes_by_name = {};
+
+            frames.forEach(f => { if (f) frames_by_name[f.name] = f; });
+
+            for (const c of content.children) {
+                if (c.nodeName == "IFRAME")
+                    iframes_by_name[c.getAttribute('name')] = c;
+            }
+
+            // Remove obsolete iframes
+            for (const name in iframes_by_name) {
+                if (!frames_by_name[name]) {
+                    console.log("REMOVE", name);
+                    iframes_by_name[name].remove();
+                }
+            }
+
+            // Add new and update current iframes
+            for (const name in frames_by_name) {
+                const frame = frames_by_name[name];
+                let iframe = iframes_by_name[name];
+
+                if (!iframe) {
+                    console.log("NEW", name);
+                    iframe = document.createElement("iframe");
+                    iframe.setAttribute("class", "container-frame");
+                    iframe.setAttribute("name", frame.name);
+                    iframe.setAttribute("data-host", frame.host);
+                }
+
+                if (iframe.getAttribute('src') != frame.src) {
+                    console.log("SRC", name, iframe.getAttribute('src'), "->", frame.src);
+                    if (iframe.contentWindow) {
+                        // This prevents the browser from creating a new
+                        // history entry.  It would do that whenever the "src"
+                        // of a frame is changed and the window location is
+                        // not consistent with the new "src" value.
+                        //
+                        // This matters when a "jump" command changes both the
+                        // the current frame and the hash of the new frame.
+                        iframe.contentWindow.location.replace(frame.src);
+                    }
+                    iframe.setAttribute('src', frame.src);
+                }
+
+                iframe.style.display = (frame == current_frame) ? "block" : "none";
+
+                if (!iframes_by_name[name])
+                    content.appendChild(iframe);
+            }
+        }
+    });
+
     if (problem && !ready) {
         const ca_cert_url = window.sessionStorage.getItem("CACertUrl");
         return (
@@ -428,7 +485,7 @@ const Shell = ({ state, machines, loader }) => {
         return null;
     }
 
-    console.log("SHELL nav", machine.address, component, fullpath);
+    console.log("SHELL nav", machine.address, component, fullpath, state.hash);
 
     const title_parts = [];
     const item = compiled.items[component];
@@ -457,23 +514,6 @@ const Shell = ({ state, machines, loader }) => {
 
     const current_frame = frames.find(f => f && !failure && f.host == machine.address && f.fullpath == fullpath);
 
-    function make_iframe(f, idx) {
-        if (f) {
-            return (
-                <iframe key={idx}
-                        className="container-frame"
-                        name={f.name}
-                        title={f.title}
-                        src={f.src}
-                        style={{ display: (f == current_frame) ? undefined : "none" }} />
-            );
-        } else {
-            return <iframe key={idx} style={{ display: "none" }} />;
-        }
-    }
-
-    console.log("FRAMES", JSON.stringify(frames.map(f => f && f.name)));
-
     return (
         <div id="main" className="page"
              style={{ '--ct-color-host-accent': machine.address == "localhost" ? undefined : machine.color }}>
@@ -517,9 +557,12 @@ const Shell = ({ state, machines, loader }) => {
             <div id="nav-hosts" className="area-ct-subnav nav-hosts-menu sidebar" />
 
             <div id="content" className="area-ct-content" role="main" tabIndex="-1">
-                { frames.map(make_iframe) }
+            </div>
+
+            <div id="failure-content" className="area-ct-content" role="main" tabIndex="-1">
                 { failure }
             </div>
+
         </div>);
 };