expose drainBeforeDelete option on node groups

rancher/rancher#31308

lib/shared/addon/components/cru-node-pools/component.js

@@ -27,6 +27,14 @@ const headers = [
     name:           'deleteNotReadyAfterSecs',
     sort:           ['deleteNotReadyAfterSecs'],
     translationKey: 'clusterNew.rke.nodes.deleteNotReadyAfterSecs',
+    width:          155,
+  },
+  {
+    name:           'aggressivedrain',
+    sort:           false,
+    scope:          'embedded',
+    translationKey: 'clusterNew.rke.nodes.drainBeforeDelete',
+    classNames:     ['pl-5'],
     width:          150,
   },
   {

lib/shared/addon/components/cru-node-pools/template.hbs

@@ -29,7 +29,7 @@
   {{else if (eq kind "suffix")}}
     <tbody>
       <tr class="banner bg-info suffix">
-        <td colspan="4" class="pl-20 text-bold">
+        <td colspan="5" class="pl-20 text-bold">
           {{t "clusterNew.rke.role.requirements.label"}}
         </td>
         <td class="text-center {{if etcdOk "text-success" "text-error text-bold"}}">

lib/shared/addon/components/node-pool-row/template.hbs

@@ -1,19 +1,11 @@
 <td data-title="{{dt.hostnamePrefix}}">
   <div class="mr-20">
-    {{input
+    {{input class="input-sm" value=pool.hostnamePrefix}}
-      class="input-sm"
-      value=pool.hostnamePrefix
-    }}
   </div>
 </td>
 <td data-title="{{dt.quantity}}">
   <div class="input-group mr-20 p-10 pl-0">
-    {{input
+    {{input class="input-sm" type="number" min="1" value=pool.quantity}}
-      class="input-sm"
-      type="number"
-      min="1"
-      value=pool.quantity
-    }}
   </div>
 </td>
 <td data-title="{{dt.nodeTemplate}}">
@@ -30,13 +22,21 @@
         value=pool.nodeTemplateId
       }}
       <div class="input-group-btn bg-primary">
-        <button class="btn btn-sm bg-primary" type="button" {{action addNodeTemplate pool}}>
+        <button
+          class="btn btn-sm bg-primary"
+          type="button"
+          {{action addNodeTemplate pool}}
+        >
           <i class="icon icon-plus"></i>
         </button>
       </div>
     </div>
   {{else}}
-    <button class="btn bg-primary" type="button" {{action addNodeTemplate pool}}>
+    <button
+      class="btn bg-primary"
+      type="button"
+      {{action addNodeTemplate pool}}
+    >
       {{t "clusterNew.rke.nodes.addTemplate"}}
     </button>
   {{/if}}
@@ -44,7 +44,9 @@
 <td data-title="{{dt.deleteNotReadyAfterSecs}}">
   {{#tooltip-element
     type="tooltip-basic"
-     model=(t "clusterNew.rke.nodes.deleteNotReadyAfterSecsTooltip" htmlSafe=true)
+    model=(t
+      "clusterNew.rke.nodes.deleteNotReadyAfterSecsTooltip" htmlSafe=true
+    )
     tooltipTemplate="tooltip-static"
     aria-describedby="tooltip-base"
     tooltipFor="tooltipPoolCreateAfter"
@@ -63,37 +65,36 @@
     </div>
   {{/tooltip-element}}
 </td>
+<td data-title="{{dt.aggressivedrain}}" class="text-center">
+  {{input type="checkbox" checked=pool.drainBeforeDelete}}
+</td>
 <td data-title="{{dt.etcd}}" class="text-center">
-  {{input
+  {{input type="checkbox" checked=pool.etcd}}
-    type="checkbox"
-    checked=pool.etcd
-  }}
 </td>
 <td data-title="{{dt.controlplane}}" class="text-center">
-  {{input
+  {{input type="checkbox" checked=pool.controlPlane}}
-    type="checkbox"
-    checked=pool.controlPlane
-  }}
 </td>
 <td data-title="{{dt.worker}}" class="text-center">
-  {{input
+  {{input type="checkbox" checked=pool.worker}}
-    type="checkbox"
-    checked=pool.worker
-  }}
 </td>
-
 {{#if (or taintCapabilites (eq mode "new"))}}
   <td data-title="{{dt.advanced}}" class="text-center">
-    <button class="btn bg-transparent" type="button" {{action configAdvancedOptions pool}}
+    <button
+      class="btn bg-transparent"
+      type="button"
+      {{action configAdvancedOptions pool}}
     >
-      <i class="icon icon-edit" />
+      <i class="icon icon-edit"></i>
       {{t "clusterNew.rke.nodes.taints"}}
     </button>
   </td>
 {{/if}}
-
 <td data-title="{{dt.remove}}" class="text-center">
-  <button class="btn bg-primary btn-sm" type="button" {{action removePool pool}}>
+  <button
-    <i class="icon icon-minus"/>
+    class="btn bg-primary btn-sm"
+    type="button"
+    {{action removePool pool}}
+  >
+    <i class="icon icon-minus"></i>
   </button>
 </td>

translations/en-us.yaml

@@ -4381,19 +4381,20 @@ clusterNew:
       title: Node Taints
       detail: Optional taints to be applied to the node
     nodes:
-      title: Node Pools
-      detail: Configure the machines that will make up the cluster
       add: Add Node Pool
       addTemplate: Add Node Template
-      templatePrompt: "Choose a Template..."
-      myTemplatesGroup: "My Templates"
-      othersTemplatesGroup: "Other's Templates"
-      hostnamePrefix: Name Prefix
       count: Count
-      template: Template
       deleteNotReadyAfterSecs: Auto Replace
       deleteNotReadyAfterSecsTooltip: "If greater than 0, nodes that are unreachable for this long will be automatically deleted and replaced."
+      drainBeforeDelete: Drain Before Delete
+      detail: Configure the machines that will make up the cluster
+      hostnamePrefix: Name Prefix
+      myTemplatesGroup: "My Templates"
+      othersTemplatesGroup: "Other's Templates"
       taints: Taints
+      template: Template
+      templatePrompt: "Choose a Template..."
+      title: Node Pools
     detected: |
       {count, plural,
         =1 {# new node has registered}