consoles: Redesign

src/components/common/needsShutdown.jsx

@@ -85,6 +85,41 @@ export function needsShutdownSpice(vm) {
     return vm.hasSpice !== vm.inactiveXML.hasSpice;
 }
 
+export function needsShutdownVnc(vm) {
+    function find_vnc(v) {
+        return v.displays && v.displays.find(d => d.type == "vnc");
+    }
+
+    const active_vnc = find_vnc(vm);
+    const inactive_vnc = find_vnc(vm.inactiveXML);
+
+    if (inactive_vnc) {
+        if (!active_vnc)
+            return true;
+
+        // The active_vnc.port value is the actual port allocated at
+        // machine start, it is never -1. Thus, we can't just compare
+        // inactive_vnc.port with active_vnc.port here when
+        // inactive_vnc.port is -1. Also, when inactive_vnc.port _is_
+        // -1, we can't tell whether active_vnc.port has been
+        // allocated based on some old fixed port in inactive_vnc.port
+        // (in which case we might want to shutdown and restart), or
+        // whether it was allocated dynamically (in which case we
+        // don't want to). But luckily that doesn't really matter and
+        // a shutdown would not have any useful effect anyway, so we
+        // don't have to worry that we are missing a notification for
+        // a pending shutdown.
+        //
+        if (inactive_vnc.port != -1 && active_vnc.port != inactive_vnc.port)
+            return true;
+
+        if (active_vnc.password != inactive_vnc.password)
+            return true;
+    }
+
+    return false;
+}
+
 export function getDevicesRequiringShutdown(vm) {
     if (!vm.persistent)
         return [];
@@ -125,6 +160,10 @@ export function getDevicesRequiringShutdown(vm) {
     if (needsShutdownSpice(vm))
         devices.push(_("SPICE"));
 
+    // VNC
+    if (needsShutdownVnc(vm))
+        devices.push(_("VNC"));
+
     // TPM
     if (needsShutdownTpm(vm))
         devices.push(_("TPM"));

src/components/vm/consoles/consoles.css

@@ -18,13 +18,25 @@
      grid-template-rows: min-content 1fr;
 }
 
+.vm-console-footer {
+    grid-area: 3 / 1 / 4 / 3;
+}
+
 .consoles-page-expanded .actions-pagesection .pf-v5-c-page__main-body {
      padding-block-end: 0;
 }
 
-/* Hide send key button - there is not way to do that from the JS
+/* Hide standard VNC actions - there is not way to do that from the JS
  * https://github.com/patternfly/patternfly-react/issues/3689
  */
-#pf-v5-c-console__send-shortcut {
+.pf-v5-c-console__actions-vnc {
     display: none;
 }
+
+.consoles-card .pf-v5-c-empty-state__icon {
+    color: var(--pf-v5-global--custom-color--200);
+}
+
+.ct-remote-viewer-popover {
+    max-inline-size: 60ch;
+}