ui: Adding Partition to topology card (#11805)

ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs

@@ -29,18 +29,35 @@
     <TopologyMetrics::SourceType @source='routing-config' />
   {{/if}}
   <div class="details">
-  {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
-    <dl class="nspace">
-      <dt>
-        <Tooltip>
-            Namespace
-        </Tooltip>
-      </dt>
-      <dd>
-        {{@item.Namespace}}
-      </dd>
-    </dl>
-  {{/if}}
+    {{#if (and (can 'use partitions') (can 'use nspaces'))}}
+    <div class={{if (not-eq @item.Partition @service.Partition) 'group'}}>
+      {{#if (not-eq @item.Partition @service.Partition)}}
+      <dl class="partition">
+        <dt>
+          <Tooltip>
+              Admin Partition
+          </Tooltip>
+        </dt>
+        <dd>
+          {{@item.Partition}}
+        </dd>
+      </dl>
+      {{/if}}
+      <span></span>
+      {{#if (or (not-eq @item.Partition @service.Partition) (not-eq @item.Namespace @service.Namespace))}}
+      <dl class="nspace">
+        <dt>
+          <Tooltip>
+              Namespace
+          </Tooltip>
+        </dt>
+        <dd>
+          {{@item.Namespace}}
+        </dd>
+      </dl>
+      {{/if}}
+    </div>
+    {{/if}}
 
 {{#if (not-eq @item.Source 'routing-config')}}
 

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -23,7 +23,6 @@
     padding: 12px !important;
   }
   div {
-    display: inline-flex;
     dl {
       display: inline-flex;
       margin-right: 8px;
@@ -42,18 +41,19 @@
     .health dt::before {
       margin-top: 2px;
     }
+    .partition dt::before {
+      @extend %with-user-team-mask, %as-pseudo;
+    }
     .nspace dt::before {
       @extend %with-folder-outline-mask, %as-pseudo;
     }
     .health dt::before {
       @extend %with-help-circle-outline-mask, %as-pseudo;
     }
-    .nspace dt::before {
-      @extend %with-folder-outline-mask, %as-pseudo;
-    }
     .health dt::before {
       @extend %with-help-circle-outline-mask, %as-pseudo;
     }
+    .partition dt::before,
     .nspace dt::before,
     .health dt::before {
       background-color: rgb(var(--tone-gray-500));
@@ -77,5 +77,34 @@
   }
   .details {
     padding: 0 12px 12px 12px;
+    > *:not(:last-child) {
+      padding-bottom: 6px;
+    }
+    .group {
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      grid-template-rows: repeat(2, 1fr);
+      grid-template-areas:
+        'partition partition'
+        'union namespace';
+      span {
+        display: inline-block;
+        grid-area: union;
+        padding-left: 7px;
+        margin-right: 0px;
+      }
+      span::before {
+        margin-right: 0px;
+        @extend %with-union-mask, %as-pseudo;
+        background-color: rgb(var(--tone-gray-500));
+      }
+      dl:first-child {
+        grid-area: partition;
+        padding-bottom: 6px;
+      }
+      dl:nth-child(2) {
+        grid-area: namespace;
+      }
+    }
   }
 }

ui/packages/consul-ui/app/components/topology-metrics/layout.scss

@@ -39,13 +39,6 @@
 #upstream-container {
   padding: 12px;
 }
-#downstream-container div:first-child {
-  display: inline-flex;
-  span::before {
-    @extend %with-info-circle-outline-mask, %as-pseudo;
-    margin-left: 4px;
-  }
-}
 #upstream-column #upstream-container:not(:last-child) {
   margin-bottom: 8px;
 }

ui/packages/consul-ui/app/components/topology-metrics/skin.scss

@@ -16,7 +16,7 @@
 #upstream-container {
   background-color: rgb(var(--tone-gray-100));
 }
-#downstream-container div:first-child {
+#downstream-container > div:first-child {
   display: inline-flex;
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;

ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss

@@ -9448,6 +9448,16 @@
   mask-image: var(--unfold-open-24-svg);
 }
 
+%with-union-icon {
+  @extend %with-icon, %union-svg;
+  background-image: var(--union-svg);
+}
+%with-union-mask {
+  @extend %with-mask, %union-svg;
+  -webkit-mask-image: var(--union-svg);
+  mask-image: var(--union-svg);
+}
+
 %with-unlock-16-icon {
   @extend %with-icon, %unlock-16-svg-prop;
   background-image: var(--unlock-16-svg);

ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_

@@ -7,10 +7,12 @@ ${
       fake.seed(num);
       return range(num).map(i => {
         const nspace = i === 0 ? `default` : `${fake.hacker.noun()}-ns-${i}`;
+        const partition = i === 0 ? `default` : `${fake.hacker.noun()}-partition`;
         return {
           Name: `service-${fake.random.number({min:0, max:99})}`,
           Datacenter: `${dc}`,
-          Namespace: `${nspace}`
+          Namespace: `${nspace}`,
+          Partition: `${partition}`
         }
       })
     };
@@ -72,6 +74,7 @@ ${(Math.random(1) > 0.3) ? `
       "Name": "${item.Name}",
       "Datacenter": "${item.Datacenter}",
       "Namespace": "${item.Namespace}",
+      "Partition": "${item.Partition}",
       "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
@@ -101,6 +104,7 @@ ${(Math.random(1) > 0.3) ? `
       "Name": "${item.Name}",
       "Datacenter": "${item.Datacenter}",
       "Namespace": "${item.Namespace}",
+      "Partition": "${item.Partition}",
       "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},