feat: display organizationInformation on BrokerUI connectors page (#619)

CHANGELOG.md

@@ -20,6 +20,7 @@ the detailed section referring to by linking pull requests or issues.
 
 - Implemented markdown for asset descriptions
 - Implemented list view for Broker UI
+- Now displaying organization information on BrokerUI's `/connectors` page
 
 #### Patch
 

package.json

@@ -27,7 +27,7 @@
     "@angular/router": "^14.3.0",
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
-    "@sovity.de/broker-server-client": "0.20240109.125529-main-1c7e5add",
+    "@sovity.de/broker-server-client": "0.20240116.140046-main-787cf146",
     "@sovity.de/edc-client": "0.20240109.103441-main-c8323d18",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",

src/app/core/services/api/fake-backend/broker-fake-impl/connector-fake-impl.ts

@@ -11,6 +11,7 @@ const CONNECTORS: ConnectorDetailPageResult[] = [
   {
     participantId: 'MDSL1234XX.C1234XX',
     endpoint: 'https://example-connector/api/dsp',
+    organizationName: 'Organization A',
     createdAt: new Date('2023-04-01'),
     lastSuccessfulRefreshAt: subMinutes(new Date(), 5),
     lastRefreshAttemptAt: subMinutes(new Date(), 5),
@@ -19,8 +20,9 @@ const CONNECTORS: ConnectorDetailPageResult[] = [
     connectorCrawlingTimeAvg: 400,
   },
   {
-    participantId: 'MDSL1234XX.C1235XX',
+    participantId: 'MDSL1235XX.C1235XX',
     endpoint: 'https://example-connector2/api/dsp',
+    organizationName: 'Organization B',
     createdAt: new Date('2023-04-01'),
     lastSuccessfulRefreshAt: subMinutes(new Date(), 5),
     lastRefreshAttemptAt: subMinutes(new Date(), 5),
@@ -29,8 +31,9 @@ const CONNECTORS: ConnectorDetailPageResult[] = [
     connectorCrawlingTimeAvg: 400,
   },
   {
-    participantId: 'MDSL1234XX.C1237XX',
+    participantId: 'MDSL1236XX.C1237XX',
     endpoint: 'https://example-connector3/api/dsp',
+    organizationName: 'Organization C',
     createdAt: new Date('2023-04-01'),
     lastSuccessfulRefreshAt: subMinutes(new Date(), 5),
     lastRefreshAttemptAt: subMinutes(new Date(), 5),
@@ -74,6 +77,7 @@ const buildConnectorListEntry = (
   onlineStatus: it.onlineStatus,
   createdAt: it.createdAt,
   endpoint: it.endpoint,
+  organizationName: it.organizationName,
   lastSuccessfulRefreshAt: it.lastSuccessfulRefreshAt,
   lastRefreshAttemptAt: it.lastRefreshAttemptAt,
   numDataOffers: it.numDataOffers,

src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html

@@ -1,16 +1,19 @@
-<mat-card *ngFor="let connector of connectors" class="asset-card">
+<mat-card
+  *ngFor="let connector of connectors"
+  class="asset-card !flex !flex-col">
   <mat-card-header class="header-content">
     <icon-with-online-status
       mat-card-avatar
       mainIcon="link"
       [onlineStatus]="connector.onlineStatus">
     </icon-with-online-status>
+
     <mat-card-title>
-      {{ connector.endpoint }}
+      {{ connector.organizationName }}
     </mat-card-title>
-    <mat-card-subtitle>EDC Connector</mat-card-subtitle>
+    <mat-card-subtitle>{{ connector.participantId }}</mat-card-subtitle>
   </mat-card-header>
-  <mat-card-content class="flex flex-col space-y-[16px]">
+  <mat-card-content class="flex flex-col space-y-[16px] mt-auto">
     <div class="flex flex-row space-x-[10px] justify-between">
       <!-- Created At -->
       <div class="flex flex-col flex-grow">
@@ -52,5 +55,13 @@
         </div>
       </div>
     </div>
+
+    <!-- Endpoint URL -->
+    <div class="flex flex-col">
+      <div class="text-slate text-sm uppercase tracking-wider">Endpoint</div>
+      <div>
+        {{ connector.endpoint }}
+      </div>
+    </div>
   </mat-card-content>
 </mat-card>