[ui] Move Placement Failures notification above job status panel (#17750)

* Moves the Placement Failures box above job status, should it exist

* Move it for non-service job-types as well

ui/app/templates/components/job-page/batch.hbs

@@ -8,8 +8,8 @@
     <jobPage.ui.Error />
     <jobPage.ui.Title />
     <jobPage.ui.StatsBox />
-    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.PlacementFailures />
+    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
     <jobPage.ui.RecentAllocations @activeTask={{@activeTask}} @setActiveTaskQueryParam={{@setActiveTaskQueryParam}} />
     <jobPage.ui.Meta />

ui/app/templates/components/job-page/parameterized-child.hbs

@@ -22,8 +22,8 @@
         </span>
       </:before-namespace>
     </jobPage.ui.StatsBox>
-    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.PlacementFailures />
+    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
     <jobPage.ui.RecentAllocations @activeTask={{@activeTask}} @setActiveTaskQueryParam={{@setActiveTaskQueryParam}} />
     <div class="boxed-section">

ui/app/templates/components/job-page/parts/placement-failures.hbs

@@ -4,14 +4,12 @@
 ~}}
 
 {{#if this.job.hasPlacementFailures}}
-  <div class="boxed-section is-danger" data-test-placement-failures>
-    <div class="boxed-section-head">
-      Placement Failures
-    </div>
-    <div class="boxed-section-body">
+  <Hds::Alert @type="inline" @color="critical" data-test-placement-failures class="boxed-section placement-failures" as |A|>
+    <A.Title>Placement Failures</A.Title>
+    <A.Description>
       {{#each this.job.taskGroups as |taskGroup|}}
         <PlacementFailure @taskGroup={{taskGroup}} />
       {{/each}}
-    </div>
-  </div>
+    </A.Description>
+  </Hds::Alert>
 {{/if}}

ui/app/templates/components/job-page/service.hbs

@@ -9,8 +9,8 @@
     <jobPage.ui.Title />
     <jobPage.ui.StatsBox />
     <jobPage.ui.DasRecommendations />
-    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.PlacementFailures />
+    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
     <jobPage.ui.RecentAllocations @activeTask={{@activeTask}} @setActiveTaskQueryParam={{@setActiveTaskQueryParam}} />
     <jobPage.ui.Meta />

ui/app/templates/components/job-page/sysbatch.hbs

@@ -8,8 +8,8 @@
     <jobPage.ui.Error />
     <jobPage.ui.Title />
     <jobPage.ui.StatsBox />
-    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.PlacementFailures />
+    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
     <jobPage.ui.RecentAllocations @activeTask={{@activeTask}} @setActiveTaskQueryParam={{@setActiveTaskQueryParam}} />
     <jobPage.ui.Meta />

ui/app/templates/components/job-page/system.hbs

@@ -9,8 +9,8 @@
     <jobPage.ui.Title />
     <jobPage.ui.StatsBox />
     <jobPage.ui.DasRecommendations />
-    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.PlacementFailures />
+    <jobPage.ui.StatusPanel @statusMode={{@statusMode}} @setStatusMode={{@setStatusMode}} />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
     <jobPage.ui.RecentAllocations @activeTask={{@activeTask}} @setActiveTaskQueryParam={{@setActiveTaskQueryParam}} />
     <jobPage.ui.Meta />

ui/app/templates/components/placement-failure.hbs

@@ -7,7 +7,13 @@
   {{#with this.placementFailures as |failures|}}
     <h3 class="title is-5" data-test-placement-failure-task-group>
       {{this.placementFailures.name}}
-      <span class="badge is-light" data-test-placement-failure-coalesced-failures>{{inc failures.coalescedFailures}} unplaced</span>
+      <Hds::Badge
+        data-test-placement-failure-coalesced-failures
+        @color="critical"
+        @type="outlined"
+        @size="small"
+        @text="{{inc failures.coalescedFailures}} unplaced"
+      />
     </h3>
     <ul class="simple-list">
       {{#if (eq failures.nodesEvaluated 0)}}