Favourite Card: Add icon for endpoints. Improve UX

src/frontend/packages/core/sass/_all-theme.scss

@@ -51,6 +51,7 @@
 @import './fonts';
 @import './ansi-colors';
 @import '../src/shared/components/favorites-global-list/favorites-global-list.component.theme';
+@import '../src/shared/components/favorites-meta-card/favorites-meta-card.component.theme';
 
 @import '../../cloud-foundry/src/shared/components/schema-form/schema-form.component.theme';
 @import '../../cloud-foundry/src/features/services/services-wall/services-wall.component.theme';
@@ -148,6 +149,7 @@ $side-nav-light-active: #484848;
   @include app-simple-usage-chart($theme, $app-theme);
   @include home-page-theme($theme, $app-theme);
   @include favorites-global-list-theme($theme, $app-theme);
+  @include favorites-meta-card-theme($theme, $app-theme);
   @include page-side-nav-theme($theme, $app-theme);
   @include cf-admin-add-user-warning($theme, $app-theme);
   @include entity-summary-title-theme($theme, $app-theme);

src/frontend/packages/core/src/shared/components/favorites-meta-card/favorites-meta-card.component.html

@@ -2,15 +2,22 @@
   [actionMenu]="actions$ | async" [routerLink]="routerLink$ | async" class="fav-meta-card" *ngIf="config" [status$]="status$"
   [entityConfig]="entityConfig">
   <app-meta-card-title class="fav-meta-card__header">
-    <!--<div>ICON</div>-->
-    <div>
-    <h2 class="fav-meta-card__header-text" *ngIf="!compact">
-      <app-multiline-title>{{ name$ | async }}</app-multiline-title>
-    </h2>
-    <h3 class="fav-meta-card__header-text" *ngIf="compact">
-      <app-multiline-title>{{ name$ | async }}</app-multiline-title>
-    </h3>
-    <div class="fav-meta-card__type">{{ prettyName }}</div>
+    <div class="fav-meta-card__header">
+      <div *ngIf="!compact" class="fav-meta-card__icon-panel">
+        <img class="fav-meta-card__icon" *ngIf="iconUrl$ | async as imageUrl" [src]="imageUrl" />
+      </div>
+      <div class="fav-meta-card__header-text-panel">
+        <h2 class="fav-meta-card__header-text" *ngIf="!compact">
+          <div class="fav-meta-card__panel">
+            <app-multiline-title>{{ name$ | async }}</app-multiline-title>
+            <div *ngIf="!(endpointConnected$ | async)" class="fav-meta-card__disconnected">Disconnected</div>
+          </div>
+        </h2>
+        <h3 class="fav-meta-card__header-text" *ngIf="compact">
+          <app-multiline-title>{{ name$ | async }}</app-multiline-title>
+        </h3>
+      <div class="fav-meta-card__type">{{ prettyName }}</div>
+    </div>
   </div>
   </app-meta-card-title>
   <ng-container *ngFor="let line of config.lines">
@@ -47,6 +54,7 @@ <h3 class="fav-meta-card__header-text" *ngIf="compact">
     <div class="error-details__label subtle-text">ID</div>
     <div class="error-details__value">{{ favorite.endpointId }}</div>
   </div>
+  <div *ngIf="(endpointConnected$ | async)">Disconnected</div>
   <button mat-button color="warn" *ngIf="!endpointHasEntities" (click)="confirmFavoriteRemoval()">Unfavorite</button>
 </mat-card>
 

src/frontend/packages/core/src/shared/components/favorites-meta-card/favorites-meta-card.component.scss

@@ -30,10 +30,39 @@
   &__clickable {
     cursor: pointer;
   }
+  &__header-text-panel {
+    width: 100%;
+  }
   &__header {
     display: flex;
     white-space: nowrap;
   }
+  &__icon-panel {
+    display: flex;
+    justify-content: center;
+    width: 56px;
+  }
+  &__icon {
+    height: 48px;
+    margin-right: 8px;
+    width: auto;
+  }
+  &__panel {
+    display: flex;
+    :first-child {
+      flex: 1;
+    }
+  }
+  &__disconnected {
+    align-self: center;
+    border-radius: 2px;
+    display: flex;
+    font-size: 14px;
+    font-weight: normal;
+    margin-right: 8px;
+    margin-top: -2px;
+    padding: 2px 4px;
+  }
 }
 
 .error-details {
@@ -52,3 +81,5 @@
 .subtle-text {
   opacity: .6;
 }
+
+

src/frontend/packages/core/src/shared/components/favorites-meta-card/favorites-meta-card.component.theme.scss

@@ -0,0 +1,6 @@
+@mixin favorites-meta-card-theme($theme, $app-theme) {
+  $foreground: map-get($theme, foreground);
+  .fav-meta-card__disconnected {
+    border: 1px solid mat-color($foreground, divider);
+  }
+}

src/frontend/packages/core/src/shared/components/favorites-meta-card/favorites-meta-card.component.ts

@@ -1,3 +1,4 @@
+import { entityCatalog } from './../../../../../store/src/entity-catalog/entity-catalog.service';
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { isObservable, Observable, of as observableOf } from 'rxjs';
@@ -64,6 +65,9 @@ export class FavoritesMetaCardComponent {
   public routerLink$: Observable<string>;
   public actions$: Observable<MetaCardMenuItem[]>;
 
+  // Optional icon for the favorite
+  public iconUrl$: Observable<string>;
+
   @Input()
   set favoriteEntity(favoriteEntity: IFavoriteEntity) {
     if (!this.placeholder && favoriteEntity) {
@@ -80,12 +84,23 @@ export class FavoritesMetaCardComponent {
       this.prettyName = prettyName || 'Unknown';
       this.entityConfig = new ComponentEntityMonitorConfig(favorite.guid, userFavoritesEntitySchema);
 
+      // If this favorite is an endpoint, lookup the image for it from the entitiy catalog
+      if (this.favorite.entityType === 'endpoint') {
+        this.iconUrl$ = endpoint$.pipe(map(a => {
+          const entityDef = entityCatalog.getEndpoint(a.cnsi_type, a.sub_type);
+          return entityDef.definition.logoUrl;
+        }));
+      } else {
+        this.iconUrl$ = observableOf('');
+      }
+
       this.setConfirmation(this.prettyName, favorite);
 
       const config = cardMapper && favorite && favorite.metadata ? cardMapper(favorite.metadata) : null;
       if (config) {
         if (this.endpoint) {
-          this.name$ = endpoint$.pipe(map(endpoint => config.name + (endpoint.user ? '' : ' (Disconnected)')));
+          // this.name$ = endpoint$.pipe(map(endpoint => config.name + (endpoint.user ? '' : ' (Disconnected)')));
+          this.name$ = observableOf(config.name);
           this.routerLink$ = endpoint$.pipe(map(endpoint => endpoint.user ? config.routerLink : '/endpoints'));
         } else {
           this.name$ = observableOf(config.name);