From d327d5231e119e4ea75a6241696b12874870be9d Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 9 Jun 2023 13:38:55 +0000
Subject: [PATCH 1/2] backport of commit
 96a9fbb2fc0329f78e8089b0bff2f0ef2e883cac

---
 .changelog/17465.txt                             | 3 +++
 ui/app/components/allocation-service-sidebar.hbs | 5 +++++
 ui/app/components/allocation-service-sidebar.js  | 1 +
 3 files changed, 9 insertions(+)
 create mode 100644 .changelog/17465.txt

diff --git a/.changelog/17465.txt b/.changelog/17465.txt
new file mode 100644
index 000000000000..63977d8260c3
--- /dev/null
+++ b/.changelog/17465.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: dont show a service as healthy when its parent allocation stops running
+```
diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs
index 730cf97f2c61..81932ee2bfaa 100644
--- a/ui/app/components/allocation-service-sidebar.hbs
+++ b/ui/app/components/allocation-service-sidebar.hbs
@@ -15,6 +15,11 @@
             {{#if (eq this.aggregateStatus 'Unhealthy')}}
               <FlightIcon @name="x-square-fill" @color="#c84034" />
               Unhealthy
+            {{else if (eq this.aggregateStatus 'Unknown')}}
+            <Tooltip @text="The parent allocation for this service is not running" @isFullText={{true}}>
+              <FlightIcon @name="help" @color="#999999" />
+              Health Unknown
+            </Tooltip>
             {{else}}
               <FlightIcon @name="check-square-fill" @color="#25ba81" />
               Healthy
diff --git a/ui/app/components/allocation-service-sidebar.js b/ui/app/components/allocation-service-sidebar.js
index 13ce37e2adbc..9da864fe69da 100644
--- a/ui/app/components/allocation-service-sidebar.js
+++ b/ui/app/components/allocation-service-sidebar.js
@@ -33,6 +33,7 @@ export default class AllocationServiceSidebarComponent extends Component {
   }
 
   get aggregateStatus() {
+    if (this.args.allocation?.clientStatus != -'running') return 'Unknown';
     return this.checks.any((check) => check.Status === 'failure')
       ? 'Unhealthy'
       : 'Healthy';

From 9e161f3a5bfc660e2893be0e833cf2a7e12c4c07 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 9 Jun 2023 13:50:38 +0000
Subject: [PATCH 2/2] backport of commit
 70ef9b4534efac5b565dce7fcc75440e230ef7de

---
 ui/app/components/allocation-service-sidebar.js          | 2 +-
 .../components/allocation-service-sidebar-test.js        | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/allocation-service-sidebar.js b/ui/app/components/allocation-service-sidebar.js
index 9da864fe69da..741c0c8e2d0f 100644
--- a/ui/app/components/allocation-service-sidebar.js
+++ b/ui/app/components/allocation-service-sidebar.js
@@ -33,7 +33,7 @@ export default class AllocationServiceSidebarComponent extends Component {
   }
 
   get aggregateStatus() {
-    if (this.args.allocation?.clientStatus != -'running') return 'Unknown';
+    if (this.args.allocation?.clientStatus !== 'running') return 'Unknown';
     return this.checks.any((check) => check.Status === 'failure')
       ? 'Unhealthy'
       : 'Healthy';
diff --git a/ui/tests/integration/components/allocation-service-sidebar-test.js b/ui/tests/integration/components/allocation-service-sidebar-test.js
index 1cb6c6278297..6024894d8370 100644
--- a/ui/tests/integration/components/allocation-service-sidebar-test.js
+++ b/ui/tests/integration/components/allocation-service-sidebar-test.js
@@ -71,7 +71,7 @@ module(
       };
 
       this.set('closeSidebar', () => this.set('service', null));
-      this.set('allocation', { id: 'myAlloc' });
+      this.set('allocation', { id: 'myAlloc', clientStatus: 'running' });
       this.set('service', healthyService);
       await render(
         hbs`<AllocationServiceSidebar @service={{this.service}} @allocation={{this.allocation}} @fns={{hash closeSidebar=this.closeSidebar}} />`
@@ -86,6 +86,13 @@ module(
         hbs`<AllocationServiceSidebar @service={{this.service}} @allocation={{this.allocation}} @fns={{hash closeSidebar=this.closeSidebar}} />`
       );
       assert.dom('h1 .aggregate-status').includesText('Unhealthy');
+
+      this.set('service', healthyService);
+      this.set('allocation', { id: 'myAlloc2', clientStatus: 'failed' });
+      await render(
+        hbs`<AllocationServiceSidebar @service={{this.service}} @allocation={{this.allocation}} @fns={{hash closeSidebar=this.closeSidebar}} />`
+      );
+      assert.dom('h1 .aggregate-status').includesText('Health Unknown');
     });
 
     test('it handles Consul services with reduced functionality', async function (assert) {