From 35ccc2bc29097f1488d1f1a9c3e4b63c2831b383 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 17 Nov 2021 17:46:50 +0000
Subject: [PATCH] ui: Adding partitions + icons to upstreams/upstream instances
 (#11556)

Adds a partition badge/label/visual to upstreams and upstream instances.
---
 .changelog/11556.txt                          |  3 ++
 .../consul/intention/list/table/index.hbs     |  4 ++
 .../consul/upstream-instance/list/README.mdx  | 39 ++++++++++++++++++
 .../consul/upstream-instance/list/index.hbs   | 16 +++++++-
 .../consul/upstream-instance/list/index.scss  |  3 ++
 .../consul/upstream/list/README.mdx           | 40 +++++++++++++++++++
 .../components/consul/upstream/list/index.hbs | 12 ++++++
 .../consul/upstream/list/index.scss           |  8 ++++
 .../consul-ui/app/styles/components.scss      |  1 +
 .../dc/services/instance/upstreams.hbs        |  1 +
 10 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 .changelog/11556.txt
 create mode 100644 ui/packages/consul-ui/app/components/consul/upstream-instance/list/README.mdx
 create mode 100644 ui/packages/consul-ui/app/components/consul/upstream/list/README.mdx
 create mode 100644 ui/packages/consul-ui/app/components/consul/upstream/list/index.scss

diff --git a/.changelog/11556.txt b/.changelog/11556.txt
new file mode 100644
index 0000000000..1b7fd6037e
--- /dev/null
+++ b/.changelog/11556.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add upstream icons for upstreams and upstream instances
+```
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
index 761dbe6036..beeb91cd60 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
@@ -24,6 +24,7 @@ as |item index|>
             {{else}}
               {{item.SourceName}}
             {{/if}}
+            {{#if (or (can 'use nspaces') (can 'use partitions'))}}
             {{! TODO: slugify }}
             <em>
               <span
@@ -32,6 +33,7 @@ as |item index|>
                 class={{concat 'nspace-' (or item.SourceNS 'default')}}
               >{{or item.SourceNS 'default'}}</span>
             </em>
+            {{/if}}
           </a>
         </td>
         <td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}>
@@ -44,6 +46,7 @@ as |item index|>
             {{else}}
               {{item.DestinationName}}
             {{/if}}
+            {{#if (or (can 'use nspaces') (can 'use partitions'))}}
             {{! TODO: slugify }}
             <em>
               <span
@@ -52,6 +55,7 @@ as |item index|>
                 class={{concat 'nspace-' (or item.DestinationNS 'default')}}
               >{{or item.DestinationNS 'default'}}</span>
             </em>
+            {{/if}}
           </span>
         </td>
         <td class="permissions">
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/README.mdx b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/README.mdx
new file mode 100644
index 0000000000..52cee1d4a0
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/README.mdx
@@ -0,0 +1,39 @@
+# Consul::UpstreamInstance::List
+
+```hbs
+<DataSource
+  @src={{uri '/partition/default/dc-1/proxies/for-service/origin-service-slug'}}
+as |source|>
+  <Consul::UpstreamInstance::List
+    @items={{source.data}}
+    @dc={{'dc-1'}}
+    @nspace={{'nspace'}}
+    @partition={{'partition'}}
+  />
+</DataSource>
+```
+
+A presentational component for rendering Consul Upstream Instances. Upstreams
+instances are a Consul Service Instance that specifically has a relationship
+with an origin Service Instance.
+
+Currently you have to pass in the current dc, nspace and partition so that we
+can figure out whether to show things that aren't in same 'bucket' that you are
+currently in in the UI.
+
+## Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `array` |  | An array of Upstreams |
+| `dc` | `string` |  | The slug of the current dc |
+| `nspace` | `string` |  | The slug of the current nspace |
+| `partition` | `string` |  | The slug of the current partition |
+
+## See
+
+- [Possible
+  Occurances](/hashicorp/consul/search?q=%22Consul%3A%3AUpstreamInstance%3A%3AList%22)
+- [Template Source Code](./index.hbs)
+
+---
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
index 3b525336df..7c605bb1bf 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
@@ -11,7 +11,21 @@
         </p>
       </div>
       <div class="detail">
-{{#if (env 'CONSUL_NSPACES_ENABLED')}}
+{{#if (can 'use partitions')}}
+  {{#if (not-eq item.DestinationType 'prepared_query')}}
+        <dl class="partition">
+          <dt
+            {{tooltip}}
+          >
+            Admin Partition
+          </dt>
+          <dd>
+            {{or item.DestinationPartition 'default'}}
+          </dd>
+        </dl>
+  {{/if}}
+{{/if}}
+{{#if (can 'use nspaces')}}
   {{#if (not-eq item.DestinationType 'prepared_query')}}
         <dl class="nspace">
           <dt
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
index 5ad7c5c25c..714740b6b1 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
@@ -8,6 +8,9 @@
   dl.datacenter dt::before {
     @extend %with-user-organization-mask, %as-pseudo;
   }
+  dl.partition dt::before {
+    @extend %with-user-team-mask, %as-pseudo;
+  }
   dl.nspace dt::before {
     @extend %with-folder-outline-mask, %as-pseudo;
   }
diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/README.mdx b/ui/packages/consul-ui/app/components/consul/upstream/list/README.mdx
new file mode 100644
index 0000000000..4bb9010187
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/upstream/list/README.mdx
@@ -0,0 +1,40 @@
+# Consul::Upstream::List
+
+```hbs
+<DataSource
+  @src={{uri '/partition/default/dc-1/gateways/for-service/origin-service-slug'}}
+as |source|>
+  <Consul::Upstream::List
+    @items={{source.data}}
+    @dc={{'dc-1'}}
+    @nspace={{'nspace'}}
+    @partition={{'partition'}}
+  />
+</DataSource>
+```
+
+A presentational component for rendering Consul Upstreams (not upstream
+instances). Upstreams are a Consul Service that is specifically have a
+relationship with an origin Service. The Upstream 'groups' are usually only used
+for showing relationships for gateways.
+
+Currently you have to pass in the current dc, nspace and partition so that we
+can figure out whether to show things that aren't in same 'bucket' that you are
+currently in in the UI.
+
+## Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `array` |  | An array of Upstreams |
+| `dc` | `string` |  | The slug of the current dc |
+| `nspace` | `string` |  | The slug of the current nspace |
+| `partition` | `string` |  | The slug of the current partition |
+
+## See
+
+- [Possible Occurances](/hashicorp/consul/search?q=%22Consul%3A%3AUpstream%3A%3AList%22)
+- [Component Source Code](./index.js)
+- [Template Source Code](./index.hbs)
+
+---
diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs
index 29d3720f6c..66324a9be4 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs
@@ -24,6 +24,18 @@ as |item index|>
           {{/if}}
       </dd>
     </dl>
+{{#if (and (can 'use partitions') (not-eq item.Partition @partition))}}
+    <dl class="partition">
+      <dt
+        {{tooltip}}
+      >
+        Admin Partition
+      </dt>
+      <dd>
+        {{item.Partition}}
+      </dd>
+    </dl>
+{{/if}}
     <a
       data-test-service-name
       href={{if (and (can 'use nspaces') (not-eq item.Namespace @nspace))
diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream/list/index.scss
new file mode 100644
index 0000000000..31a4e6c3db
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/upstream/list/index.scss
@@ -0,0 +1,8 @@
+%consul-upstream-list {
+  dl.partition dt::before {
+    @extend %with-user-team-mask, %as-pseudo;
+  }
+}
+.consul-upstream-list {
+  @extend %consul-upstream-list;
+}
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 97c1cc34d9..c9227009ae 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -76,6 +76,7 @@
 @import 'consul-ui/components/consul/loader';
 @import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';
+@import 'consul-ui/components/consul/upstream/list';
 @import 'consul-ui/components/consul/upstream-instance/list';
 @import 'consul-ui/components/consul/health-check/list';
 @import 'consul-ui/components/consul/exposed-path/list';
diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
index d67a0cd25f..41835a81b1 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
@@ -74,6 +74,7 @@ as |route|>
             @items={{collection.items}}
             @dc={{dc}}
             @nspace={{nspace}}
+            @partition={{partition}}
           />
         </collection.Collection>
         <collection.Empty>