[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
hashicorp · Nov 19, 2022 · 4703f55 · 4703f55
1 parent 78593da
commit 4703f55
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/.changelog/15324.txt 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
@@ -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
@@ -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
@@ -25,6 +25,9 @@
 			{{else}}
 				{{@service.name}}
 			{{/if}}
+      {{#if @service.connect}}
+        <FlightIcon @name="mesh" @color="#444444" />
+      {{/if}}
 		{{/if}}
   </td>
 	<td>