Fix nodes page

core/src/main/resources/hudson/model/ComputerSet/index.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
   Entrance to the configuration page
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form" xmlns:dd="/lib/layout/dropdowns">
 <l:layout title="${%Nodes}">
   <st:include page="sidepanel.jelly" />
   <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
@@ -52,6 +52,9 @@ THE SOFTWARE.
           </button>
         </form>
       </l:hasAdministerOrManage>
+      <t:iconSize>
+        <dd:item icon="symbol-information-circle" id="button-computer-icon-legend" text="${%Legend}" />
+      </t:iconSize>
     </l:app-bar>
 
     <j:set var="monitors" value="${it._monitors}"/>
@@ -123,13 +126,6 @@ THE SOFTWARE.
       </tr>
       </tbody>
     </table>
-    <t:iconSize>
-      <div class="jenkins-buttons-row jenkins-buttons-row--invert">
-        <button class="jenkins-button jenkins-button--tertiary" id="button-computer-icon-legend">
-          ${%Legend}
-        </button>
-      </div>
-    </t:iconSize>
     <template id="template-computer-icon-legend" data-title="${%Computer icon legend}">
       <st:include page="_legend.jelly"/>
     </template>

src/main/js/pages/computer-set/index.js

@@ -1,16 +1,22 @@
 import { createElementFromHtml } from "@/util/dom";
+import behaviorShim from "@/util/behavior-shim";
 
-document
-  .querySelector("#button-computer-icon-legend")
-  .addEventListener("click", () => {
-    const template = document.querySelector("#template-computer-icon-legend");
-    const title = template.getAttribute("data-title");
-    const content = createElementFromHtml(
-      "<div>" + template.innerHTML + "</div>",
-    );
+behaviorShim.specify(
+  "#button-computer-icon-legend",
+  "icon-legend",
+  999,
+  (button) => {
+    button.addEventListener("click", () => {
+      const template = document.querySelector("#template-computer-icon-legend");
+      const title = template.getAttribute("data-title");
+      const content = createElementFromHtml(
+        "<div>" + template.innerHTML + "</div>",
+      );
 
-    dialog.modal(content, {
-      maxWidth: "550px",
-      title: title,
+      dialog.modal(content, {
+        maxWidth: "550px",
+        title: title,
+      });
     });
-  });
+  },
+);