From 11dc19b307ffe41a72f39c2e1eccb2cfefee9a07 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Fri, 18 Nov 2022 22:49:10 -0500
Subject: [PATCH] [ui] Show Consul Connect upstreams / on update info in
 sidebar (#15324)

* Added consul connect icon and sidebar info

* Show icon to the right of name
---
 .changelog/15324.txt                          |  3 ++
 .../components/allocation-service-sidebar.hbs | 32 +++++++++++++++++++
 .../allocations/allocation/index.hbs          |  3 ++
 .../templates/components/job-service-row.hbs  |  3 ++
 4 files changed, 41 insertions(+)
 create mode 100644 .changelog/15324.txt

diff --git a/.changelog/15324.txt b/.changelog/15324.txt
new file mode 100644
index 000000000..2fb6363db
--- /dev/null
+++ b/.changelog/15324.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add consul connect service upstream and on-update info to the service sidebar
+```
diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs
index a60488d21..5e6b698c6 100644
--- a/ui/app/components/allocation-service-sidebar.hbs
+++ b/ui/app/components/allocation-service-sidebar.hbs
@@ -41,6 +41,14 @@
 				</span>
 
 				<div>
+					{{#if @service.connect}}
+						<span class="pair">
+							<span class="term">
+								Connect
+							</span>
+              <span>True</span>
+						</span>
+					{{/if}}
 					<span class="pair">
 						<span class="term">
 							Allocation
@@ -140,6 +148,30 @@
 				</t.body>
 			</ListTable>
 		{{/if}}
+		{{#if (eq @service.provider "consul")}}
+		<table class="table is-fixed connect-info">
+			<tbody>
+        {{#if @service.onUpdate}}
+          <tr>
+            <td><strong>On Update</strong></td>
+            <td>{{@service.onUpdate}}</td>
+          </tr>
+        {{/if}}
+        {{#if @service.connect.sidecarService.proxy.upstreams}}
+          <tr>
+            <td><strong>Upstreams</strong></td>
+            <td>
+                {{#each
+                  @service.connect.sidecarService.proxy.upstreams as |upstream|
+                }}
+                  <span class="tag">{{upstream.destinationName}}:{{upstream.localBindPort}}</span>
+                {{/each}}
+            </td>
+          </tr>
+        {{/if}}
+			</tbody>
+		</table>
+		{{/if}}
 		{{#if (and (eq @service.provider "consul") this.consulRedirectLink)}}
 		<div data-test-consul-link-notice class="notification is-info">
 			<p>
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 65650c523..64b70e114 100644
--- a/ui/app/templates/allocations/allocation/index.hbs
+++ b/ui/app/templates/allocations/allocation/index.hbs
@@ -301,6 +301,9 @@
                   <FlightIcon @name="nomad-color" />
                 {{else}}
                   <FlightIcon @name="consul-color" />
+                  {{#if row.model.connect}}
+                    <FlightIcon @name="mesh" @color="#444444" />
+                  {{/if}}
                 {{/if}}
               </td>
               <td data-test-service-name class="is-long-text">
diff --git a/ui/app/templates/components/job-service-row.hbs b/ui/app/templates/components/job-service-row.hbs
index 0c20d2312..2de7000e4 100644
--- a/ui/app/templates/components/job-service-row.hbs
+++ b/ui/app/templates/components/job-service-row.hbs
@@ -25,6 +25,9 @@
 			{{else}}
 				{{@service.name}}
 			{{/if}}
+      {{#if @service.connect}}
+        <FlightIcon @name="mesh" @color="#444444" />
+      {{/if}}
 		{{/if}}
   </td>
 	<td>