Visualize Connector Status

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html

@@ -2,9 +2,11 @@
   <mat-icon *ngIf="data.type === 'asset-details'" class="mat-icon-[40px]">
     upload
   </mat-icon>
-  <mat-icon *ngIf="data.type === 'broker-data-offer'" class="mat-icon-[40px]">
-    sim_card
-  </mat-icon>
+  <icon-with-online-status
+    *ngIf="data.type === 'broker-data-offer'"
+    mainIcon="sim_card"
+    [onlineStatus]="data.brokerDataOffer!!.connectorOnlineStatus">
+  </icon-with-online-status>
   <mat-icon *ngIf="data.type === 'contract-agreement'" class="mat-icon-[40px]">
     {{
       data.contractAgreement!!.direction === 'PROVIDING' ? 'upload' : 'download'

src/app/component-library/catalog/catalog.module.ts

@@ -16,7 +16,7 @@ import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dia
 import {AssetPropertyGridGroupBuilder} from './asset-detail-dialog/asset-property-grid-group-builder';
 import {ContractOfferCardsComponent} from './contract-offer-cards/contract-offer-cards.component';
 import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-icon.component';
-import {IconWithOnlineStatusComponent} from './status-icon/status-icon.component';
+import {IconWithOnlineStatusComponent} from './icon-with-online-status/icon-with-online-status.component';
 import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component';
 
 @NgModule({

src/app/component-library/catalog/status-icon/status-icon.component.ts → src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, HostBinding, Input} from '@angular/core';
 import {
   CatalogDataOfferConnectorOnlineStatusEnum,
   ConnectorDetailPageResultOnlineStatusEnum,
@@ -7,33 +7,24 @@ import {
 } from '@sovity.de/broker-server-client';
 
 @Component({
-  selector: 'status-icon',
+  selector: 'icon-with-online-status',
   template: `
-    <div class="flex items-end justify-end w-10 h-10 mr-5">
-      <mat-icon
-        class="flex items-end justify-end w-[40px] h-[40px] mr-[20px]"
-        mat-card-avatar
-        >{{ mainIcon }}</mat-icon
-      >
+    <mat-icon
+      *ngIf="onlineStatus"
+      class="absolute mat-icon-[16px] mt-[26px] ml-[26px]"
+      [ngClass]="getStatusClass(onlineStatus)"
+      >{{ getSmallIcon(onlineStatus) }}</mat-icon
+    >
 
-      <div class="absolute w-4 h-4">
-        <mat-icon
-          *ngIf="onlineStatus"
-          class="mat-icon-[16px]"
-          [ngClass]="getStatusClass(onlineStatus)"
-          >{{ getSmallIcon(onlineStatus) }}</mat-icon
-        >
-      </div>
-    </div>
-    <!-- Main Icon -->
+    <mat-icon class="mat-icon-[40px]">{{ mainIcon }}</mat-icon>
   `,
 })
 export class IconWithOnlineStatusComponent {
-  @Input()
-  mainIcon!: string;
+  @HostBinding('class.mat-icon-[40px]')
+  cls = true;
 
   @Input()
-  smallIcon!: string;
+  mainIcon!: string;
 
   @Input()
   onlineStatus!:

src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html

@@ -1,24 +1,21 @@
 <mat-card *ngFor="let dataOffer of dataOffers" class="asset-card">
   <ng-container *ngIf="dataOffer.asset; let asset">
-    <mat-card-header class="header-content">
-      <status-icon
-        [mainIcon]="'sim_card'"
+    <mat-card-header>
+      <icon-with-online-status
+        mat-card-avatar
+        mainIcon="sim_card"
         [onlineStatus]="dataOffer.connectorOnlineStatus">
-      </status-icon>
-
-      <div class="title-wrapper">
-        <mat-card-title>
-          <a
-            class="link"
-            href="javascript:void(0)"
-            (click)="dataOfferClick.emit(dataOffer)">
-            {{ asset.name }}
-          </a>
-        </mat-card-title>
-        <mat-card-subtitle>{{
-          asset.originatorOrganization
-        }}</mat-card-subtitle>
-      </div>
+      </icon-with-online-status>
+      <mat-card-title>
+        <a
+          class="link"
+          s
+          href="javascript:void(0)"
+          (click)="dataOfferClick.emit(dataOffer)">
+          {{ asset.name }}
+        </a>
+      </mat-card-title>
+      <mat-card-subtitle>{{ asset.originatorOrganization }}</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content class="flex flex-col space-y-[16px]">
       <!-- Description -->

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

@@ -1,14 +1,15 @@
 <mat-card *ngFor="let connector of connectors" class="asset-card">
   <mat-card-header class="header-content">
-    <status-icon [mainIcon]="'link'" [onlineStatus]="connector.onlineStatus">
-    </status-icon>
+    <icon-with-online-status
+      mat-card-avatar
+      mainIcon="link"
+      [onlineStatus]="connector.onlineStatus">
+    </icon-with-online-status>
 
-    <div class="title-wrapper">
-      <mat-card-title>
-        {{ connector.endpoint }}
-      </mat-card-title>
-      <mat-card-subtitle>EDC Connector</mat-card-subtitle>
-    </div>
+    <mat-card-title>
+      {{ connector.endpoint }}
+    </mat-card-title>
+    <mat-card-subtitle>EDC Connector</mat-card-subtitle>
   </mat-card-header>
   <mat-card-content class="flex flex-col space-y-[16px]">
     <div class="flex flex-row space-x-[10px] justify-between">

src/styles.scss

@@ -9,19 +9,7 @@ body {
 body {
   margin: 0;
 }
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
 
-.title-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-}
 .broker-online-status-online {
   color: green;
 }
@@ -31,7 +19,7 @@ body {
 }
 
 .broker-online-status-dead {
-  color: red;
+  color: var(--warn-color);
 }
 
 .snackbar-info-style {