Merge pull request #69 from hashicorp/CC-6361

.changeset/short-avocados-bathe.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/consul-ui-toolkit': minor
+---
+
+Service list item now includes cluster ID, partition, and namespace info

documentation/app/controllers/components/list.js

@@ -30,6 +30,9 @@ export default class ListController extends Controller {
         kind: SERVICE_GATEWAY_TYPE.IngressGateway,
         upstreamCount: 5,
         tags: ['monitor', 'array', 'monitor'],
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
   }

documentation/app/controllers/components/service-list-item.js

@@ -28,6 +28,9 @@ export default class ServiceListItem extends Controller {
         kind: SERVICE_GATEWAY_TYPE.IngressGateway,
         upstreamCount: 5,
         tags: ['monitor', 'array', 'monitor'],
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
   }
@@ -46,6 +49,9 @@ export default class ServiceListItem extends Controller {
         externalSource: 'consul',
         instanceCount: 3,
         tags: ['consul', 'array', 'monitor'],
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
   }
@@ -64,6 +70,9 @@ export default class ServiceListItem extends Controller {
         kind: SERVICE_GATEWAY_TYPE.TerminatingGateway,
         linkedServiceCount: 6,
         externalSource: 'vault',
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
   }
@@ -84,6 +93,9 @@ export default class ServiceListItem extends Controller {
         isImported: true,
         samenessGroup: 'group-1',
         isPermissiveMTls: true,
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
   }

documentation/app/templates/components/service-list-item.hbs

@@ -174,6 +174,9 @@
               tags: string[];
               upstreamCount?: number;
               linkedServiceCount?: number;
+              clusterId: string | undefined;
+              partition?: string;
+              namespace?: string;
             };
           }
           "}}}
@@ -317,6 +320,22 @@
           metadata.
         </ComponentApi>
 
+        <ComponentApi
+          @name="service.metadata.clusterId"
+          @isRequired={{true}}
+          @type="string"
+        >The unique identifier of the Consul cluster the service is registered with.</ComponentApi>
+        <ComponentApi
+          @name="service.metadata.partition"
+          @isRequired={{false}}
+          @type="string"
+        >The partition where the service is deployed.</ComponentApi>
+        <ComponentApi
+          @name="service.metadata.namespace"
+          @isRequired={{false}}
+          @type="string"
+        >The namespace where the service is deployed.</ComponentApi>
+
         <h4 id="health-check">Health check</h4>
         The
         <CodeInline @code="service.metadata.healthCheck" />
@@ -348,12 +367,18 @@
           <CodeInline @code="critical" />
           status.</ComponentApi>
 
+        <h3 id="options">Options</h3>
+          <ComponentApi @name="hideClusterPath" @type="boolean">
+            Determines whether the cluster ID, partition, and namespace are displayed in the Service List Item. Default value is <CodeInline @code="false" />.
+          </ComponentApi>
+
       </div>
       <InPageNav as |I|>
         <I.Link @section="#component-api">Component API</I.Link>
         <I.Link @section="#service" @depth={{2}}>Service</I.Link>
         <I.Link @section="#metadata" @depth={{2}}>Metadata</I.Link>
         <I.Link @section="#health-check" @depth={{2}}>Health check</I.Link>
+        <I.Link @section="#options" @depth={{2}}>Options</I.Link>
       </InPageNav>
     </div>
   </T.Panel>

documentation/tests/integration/components/service-list-item-test.js

@@ -38,6 +38,9 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
         connectedWithGateway: true,
         externalSource: 'vault',
         tags: ['tag', 'service'],
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
       },
     };
     this.set('service', service);
@@ -47,7 +50,22 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
         <Cut::ListItem::Service @service={{this.service}}/>`
     );
     assert.true(cutService.renders, 'renders component');
-    assert.deepEqual(cutService.title, 'Service 1', 'service name is set');
+    assert.true(cutService.title.includes('Service 1'), 'service name is set');
+
+    assert.true(cutService.clusterPath.renders, 'renders cluster path');
+    assert.true(
+      cutService.clusterPath.text.includes('self-managed-cluster'),
+      'cluster ID is set'
+    );
+    assert.true(
+      cutService.clusterPath.text.includes('partition'),
+      'partition is set'
+    );
+    assert.true(
+      cutService.clusterPath.text.includes('namespace'),
+      'namespace is set'
+    );
+
     assert.false(
       cutService.metadata.healthCheck.healthy.renders,
       'healthy status badge does not render if there are warning or critical healthchecks'
@@ -126,6 +144,47 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
     );
   });
 
+  test('it does not render cluster path if specified ', async function (assert) {
+    const service = {
+      name: 'Service 1',
+      metadata: {
+        healthCheck: {
+          instance: {
+            success: 4,
+            critical: 2,
+            warning: 1,
+          },
+        },
+        kind: 'mesh-gateway',
+        instanceCount: 7,
+        linkedServiceCount: 4,
+        upstreamCount: 4,
+        isImported: true,
+        isPermissiveMTls: true,
+        samenessGroup: 'sameness-group-1',
+        connectedWithGateway: true,
+        externalSource: 'vault',
+        tags: ['tag', 'service'],
+        clusterId: 'self-managed-cluster',
+        partition: 'partition',
+        namespace: 'namespace',
+      },
+    };
+    this.set('service', service);
+
+    await render(
+      hbs`
+        <Cut::ListItem::Service @service={{this.service}} @hideClusterPath={{true}}/>`
+    );
+    assert.true(cutService.renders, 'renders component');
+    assert.true(cutService.title.includes('Service 1'), 'service name is set');
+
+    assert.false(
+      cutService.clusterPath.renders,
+      'does not render cluster path'
+    );
+  });
+
   test('it does render the kind if it does not find a kindName', async function (assert) {
     const service = {
       name: 'Service 1',
@@ -175,7 +234,12 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
         <Cut::ListItem::Service @service={{this.service}}/>`
     );
     assert.true(cutService.renders, 'renders');
-    assert.deepEqual(cutService.title, 'Service 1', 'service name is set');
+    assert.true(cutService.title.includes('Service 1'), 'service name is set');
+    assert.false(
+      cutService.clusterPath.renders,
+      'does not render cluster path'
+    );
+
     assert.true(
       cutService.metadata.healthCheck.healthy.renders,
       'renders healthy status badge'

documentation/tests/pages/service-list-item.js

@@ -9,6 +9,10 @@ const listItemSelector = '[data-test-service-list-item]';
 export default create({
   renders: isPresent(listItemSelector),
   title: text(`${listItemSelector} [data-test-service-name]`),
+  clusterPath: {
+    renders: isPresent(`${listItemSelector} [data-test-service-cluster-path]`),
+    text: text(`${listItemSelector} [data-test-service-cluster-path]`),
+  },
   metadata: {
     healthCheck: {
       healthy: {

toolkit/package.json

@@ -119,6 +119,7 @@
       "./components/cut/list/index.js": "./dist/_app_/components/cut/list/index.js",
       "./components/cut/list/pagination.js": "./dist/_app_/components/cut/list/pagination.js",
       "./components/cut/list/types.js": "./dist/_app_/components/cut/list/types.js",
+      "./components/cut/metadata/cluster-path/index.js": "./dist/_app_/components/cut/metadata/cluster-path/index.js",
       "./components/cut/metadata/external-source/index.js": "./dist/_app_/components/cut/metadata/external-source/index.js",
       "./components/cut/metadata/health-check-badge-set/index.js": "./dist/_app_/components/cut/metadata/health-check-badge-set/index.js",
       "./components/cut/metadata/in-service-mesh/index.js": "./dist/_app_/components/cut/metadata/in-service-mesh/index.js",

toolkit/src/components/cut/list-item/service/index.hbs

@@ -18,7 +18,16 @@
   <L.Content as |C|>
     <Cut::ListItem::Template as |T|>
       <T.Section as |SC|>
-        <SC.Title data-test-service-name>{{@service.name}}</SC.Title>
+        <SC.Title data-test-service-name>
+          {{@service.name}}
+          {{#unless @hideClusterPath}}
+            <Cut::Metadata::ClusterPath
+              @clusterId={{@service.metadata.clusterId}}
+              @partition={{@service.metadata.partition}}
+              @namespace={{@service.metadata.namespace}}
+            />
+          {{/unless}}
+        </SC.Title>
         <SC.Metadata>
           <Cut::Metadata::ServiceHealthBadge
             @successCount={{@service.metadata.healthCheck.instance.success}}

toolkit/src/components/cut/list-item/types.ts

@@ -49,6 +49,7 @@ export interface ServiceListItemSignature {
 
     // Service args
     service: CutService;
+    hideClusterPath?: boolean;
   };
 }
 

toolkit/src/components/cut/metadata/cluster-path/index.hbs

@@ -0,0 +1,34 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+}}
+
+{{#if (and (and @clusterId @partition) @namespace)}}
+<div class="cut-service-cluster-path" data-test-service-cluster-path>
+  <span class="hds-link-inline__icon hds-link-inline__icon--leading">
+    <FlightIcon @name="server-cluster" @size="16" @stretched={{true}} />
+  </span>
+  {{@clusterId}}
+
+  <span
+    class="hds-link-inline__icon hds-link-inline__icon--leading cluster-path-separator"
+  >
+    <FlightIcon @name="chevron-right" @size="16" @stretched={{true}} />
+  </span>
+
+  <span class="hds-link-inline__icon hds-link-inline__icon--leading">
+    <FlightIcon @name="users" @size="16" @stretched={{true}} />
+  </span>
+  {{@partition}}
+
+  <span
+    class="hds-link-inline__icon hds-link-inline__icon--leading cluster-path-separator"
+  >
+    <FlightIcon @name="chevron-right" @size="16" @stretched={{true}} />
+  </span>
+
+  <span class="hds-link-inline__icon hds-link-inline__icon--leading">
+    <FlightIcon @name="folder-users" @size="16" @stretched={{true}} />
+  </span>
+  {{@namespace}}
+</div>
+{{/if}}

toolkit/src/components/cut/metadata/cluster-path/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ */
+
+import Component from '@glimmer/component';
+
+interface Args {
+  clusterId: string;
+  partition: string;
+  namespace: string;
+}
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class MetadataClusterPathComponent extends Component<Args> {}

toolkit/src/styles/@hashicorp/consul-ui-toolkit.scss

@@ -7,3 +7,4 @@
 @use '../components/copy-block';
 @use '../components/filter-bar';
 @use '../components/list';
+@use '../components/cluster-path';

toolkit/src/styles/components/cluster-path.scss

@@ -0,0 +1,17 @@
+/**
+* Copyright (c) HashiCorp, Inc.
+*/
+
+.cluster-path-separator {
+  color: var(--token-color-palette-neutral-300);
+}
+
+.cut-service-cluster-path {
+  color: var(--token-color-foreground-faint);
+  font-size: var(--token-typography-body-200-font-size);
+  font-weight: var(--token-typography-font-weight-regular);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 4px;
+}