From f3df01e4220d24c73ed6aa8cfb0d7cb919688a47 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Tue, 27 Jun 2023 19:32:51 -0400
Subject: [PATCH] [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       |  2 +-
 .../components/job-page/parameterized-child.hbs      |  2 +-
 .../components/job-page/parts/placement-failures.hbs | 12 +++++-------
 ui/app/templates/components/job-page/service.hbs     |  2 +-
 ui/app/templates/components/job-page/sysbatch.hbs    |  2 +-
 ui/app/templates/components/job-page/system.hbs      |  2 +-
 ui/app/templates/components/placement-failure.hbs    |  8 +++++++-
 7 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/ui/app/templates/components/job-page/batch.hbs b/ui/app/templates/components/job-page/batch.hbs
index 763098932..6a9956493 100644
--- a/ui/app/templates/components/job-page/batch.hbs
+++ b/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 />
diff --git a/ui/app/templates/components/job-page/parameterized-child.hbs b/ui/app/templates/components/job-page/parameterized-child.hbs
index f05ad66f8..003df821a 100644
--- a/ui/app/templates/components/job-page/parameterized-child.hbs
+++ b/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">
diff --git a/ui/app/templates/components/job-page/parts/placement-failures.hbs b/ui/app/templates/components/job-page/parts/placement-failures.hbs
index 8f9018976..210232c25 100644
--- a/ui/app/templates/components/job-page/parts/placement-failures.hbs
+++ b/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}}
diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs
index 53189da0e..ed9c98a10 100644
--- a/ui/app/templates/components/job-page/service.hbs
+++ b/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 />
diff --git a/ui/app/templates/components/job-page/sysbatch.hbs b/ui/app/templates/components/job-page/sysbatch.hbs
index 763098932..6a9956493 100644
--- a/ui/app/templates/components/job-page/sysbatch.hbs
+++ b/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 />
diff --git a/ui/app/templates/components/job-page/system.hbs b/ui/app/templates/components/job-page/system.hbs
index 53189da0e..ed9c98a10 100644
--- a/ui/app/templates/components/job-page/system.hbs
+++ b/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 />
diff --git a/ui/app/templates/components/placement-failure.hbs b/ui/app/templates/components/placement-failure.hbs
index ad3a80267..b59cd2f0a 100644
--- a/ui/app/templates/components/placement-failure.hbs
+++ b/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)}}