Add card view to endpoint list

src/frontend/packages/core/src/core/core.module.ts

@@ -10,6 +10,7 @@ import { BytesToHumanSize, MegaBytesToHumanSize } from './byte-formatters.pipe';
 import { ClickStopPropagationDirective } from './click-stop-propagation.directive';
 import { CurrentUserPermissionsService } from './current-user-permissions.service';
 import { Customizations } from './customizations.types';
+import { DisableRouterLinkDirective } from './disable-router-link.directive';
 import { DotContentComponent } from './dot-content/dot-content.component';
 import { EndpointsService } from './endpoints.service';
 import { EntityFavoriteStarComponent } from './entity-favorite-star/entity-favorite-star.component';
@@ -51,7 +52,8 @@ import { WindowRef } from './window-ref/window-ref.service';
     ButtonBlurOnClickDirective,
     PageNotFoundComponentComponent,
     EntityFavoriteStarComponent,
-    RecentEntitiesComponent
+    RecentEntitiesComponent,
+    DisableRouterLinkDirective
   ],
   providers: [
     AuthGuardService,
@@ -78,7 +80,8 @@ import { WindowRef } from './window-ref/window-ref.service';
     ButtonBlurOnClickDirective,
     PageNotFoundComponentComponent,
     EntityFavoriteStarComponent,
-    RecentEntitiesComponent
+    RecentEntitiesComponent,
+    DisableRouterLinkDirective
   ],
   entryComponents: [
     LogOutDialogComponent

src/frontend/packages/core/src/core/disable-router-link.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Input, Optional } from '@angular/core';
+import { RouterLink, RouterLinkWithHref } from '@angular/router';
+
+@Directive({
+  selector: '[routerLink][appDisableRouterLink]'
+})
+export class DisableRouterLinkDirective {
+
+  @Input() appDisableRouterLink: boolean;
+
+  constructor(
+    // Inject routerLink
+    @Optional() routerLink: RouterLink,
+    @Optional() routerLinkWithHref: RouterLinkWithHref
+  ) {
+
+    const link = routerLink || routerLinkWithHref;
+
+    // Save original method
+    const onClick = link.onClick;
+
+    // Replace method
+    link.onClick = (...args) => {
+      if (this.appDisableRouterLink) {
+        return routerLinkWithHref ? false : true;
+      } else {
+        return onClick.apply(link, args);
+      }
+    };
+  }
+
+}

src/frontend/packages/core/src/core/endpoints.service.ts

@@ -16,6 +16,7 @@ import { UserService } from './user.service';
 import { AuthState } from '../../../store/src/reducers/auth.reducer';
 import { RouterNav } from '../../../store/src/actions/router.actions';
 import { endpointHealthChecks, EndpointHealthCheck } from '../../endpoints-health-checks';
+import { getEndpointTypes } from '../features/endpoints/endpoint-helpers';
 
 
 @Injectable()
@@ -25,6 +26,17 @@ export class EndpointsService implements CanActivate {
   haveRegistered$: Observable<boolean>;
   haveConnected$: Observable<boolean>;
 
+  static getLinkForEndpoint(endpoint: EndpointModel): string {
+    if (!endpoint) {
+      return '';
+    }
+    const ext = getEndpointTypes().find(ep => ep.value === endpoint.cnsi_type);
+    if (ext && ext.homeLink) {
+      return ext.homeLink(endpoint.guid).join('/');
+    }
+    return '';
+  }
+
   constructor(
     private store: Store<AppState>,
     private userService: UserService
@@ -101,5 +113,4 @@ export class EndpointsService implements CanActivate {
     );
   }
 
-
 }

src/frontend/packages/core/src/core/extension/extension-types.ts

@@ -2,6 +2,9 @@ import { Type } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Schema, schema } from 'normalizr';
 
+import { EndpointModel } from '../../../../store/src/types/endpoint.types';
+import { TableCellCustom } from '../../shared/components/list/list.types';
+
 // Allowable endpoint types
 export type EndpointType = 'cf' | 'metrics' | string;
 
@@ -12,11 +15,20 @@ export interface EndpointTypeConfig {
   allowTokenSharing?: boolean;
   icon?: string;
   iconFont?: string;
+  imagePath?: string;
   authTypes?: string[];
-  // Get the link to the home page for the given endpoint GUID
-  homeLink?: (link: string) => string[];
-  // Schema keys associated with this endpoint type (used when clearing pagination)
+  /**
+   * Get the link to the home page for the given endpoint GUID
+   */
+  homeLink?: (s) => string[];
+  /**
+   * Schema keys associated with this endpoint type (used when clearing pagination)
+   */
   entitySchemaKeys?: string[];
+  /**
+   * Show custom content in the endpoints list
+   */
+  listDetailsComponent?: Type<TableCellCustom<EndpointModel>>;
 }
 
 export interface EndpointAuthTypeConfig {

src/frontend/packages/core/src/features/cloud-foundry/cloud-foundry.module.ts

@@ -8,6 +8,7 @@ import { CustomImportModule } from '../../custom-import.module';
 import {
   CFEndpointsListConfigService,
 } from '../../shared/components/list/list-types/cf-endpoints/cf-endpoints-list-config.service';
+import { EndpointListHelper } from '../../shared/components/list/list-types/endpoint/endpoint-list.helpers';
 import { EndpointsListConfigService } from '../../shared/components/list/list-types/endpoint/endpoints-list-config.service';
 import { SharedModule } from '../../shared/shared.module';
 import { AddOrganizationComponent } from './add-organization/add-organization.component';
@@ -162,6 +163,7 @@ import { UsersRolesComponent } from './users/manage-users/manage-users.component
     CfAdminAddUserWarningComponent,
   ],
   providers: [
+    EndpointListHelper,
     CFEndpointsListConfigService,
     EndpointsListConfigService,
     {
@@ -176,7 +178,7 @@ import { UsersRolesComponent } from './users/manage-users/manage-users.component
     CloudFoundryEndpointService,
     CfRolesService,
     CloudFoundryCellService,
-    UserInviteService,
+    UserInviteService
   ],
   entryComponents: [
     UserInviteConfigurationDialogComponent

src/frontend/packages/core/src/features/endpoints/endpoint-helpers.ts

@@ -1,19 +1,23 @@
+import { Type } from '@angular/core';
+import { Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
-import { Validators } from '@angular/forms';
-
-import { urlValidationExpression } from '../../core/utils.service';
-import { EndpointModel } from '../../../../store/src/types/endpoint.types';
-import { EndpointTypeConfig, EndpointAuthTypeConfig, EndpointType } from '../../core/extension/extension-types';
 
 import { AppState } from '../../../../store/src/app-state';
-import { selectEntities } from '../../../../store/src/selectors/api.selectors';
 import { endpointSchemaKey } from '../../../../store/src/helpers/entity-factory';
+import { selectEntities } from '../../../../store/src/selectors/api.selectors';
+import { EndpointModel } from '../../../../store/src/types/endpoint.types';
 import { ExtensionService } from '../../core/extension/extension-service';
+import { EndpointAuthTypeConfig, EndpointType, EndpointTypeConfig } from '../../core/extension/extension-types';
+import { urlValidationExpression } from '../../core/utils.service';
+import {
+  CfEndpointDetailsComponent,
+} from '../../shared/components/list/list-types/endpoint/cf-endpoint-details/cf-endpoint-details.component';
+import { TableCellCustom } from '../../shared/components/list/list.types';
 import { CredentialsAuthFormComponent } from './connect-endpoint-dialog/auth-forms/credentials-auth-form.component';
-import { SSOAuthFormComponent } from './connect-endpoint-dialog/auth-forms/sso-auth-form.component';
 import { NoneAuthFormComponent } from './connect-endpoint-dialog/auth-forms/none-auth-form.component';
+import { SSOAuthFormComponent } from './connect-endpoint-dialog/auth-forms/sso-auth-form.component';
 
 export function getFullEndpointApiUrl(endpoint: EndpointModel) {
   return endpoint && endpoint.api_endpoint ? `${endpoint.api_endpoint.Scheme}://${endpoint.api_endpoint.Host}` : 'Unknown';
@@ -37,12 +41,15 @@ const endpointTypes: EndpointTypeConfig[] = [
     urlValidation: urlValidationExpression,
     icon: 'cloud_foundry',
     iconFont: 'stratos-icons',
-    homeLink: (guid) => ['/cloud-foundry', guid]
+    imagePath: '/core/assets/endpoint-icons/cloudfoundry.png',
+    homeLink: (guid) => ['/cloud-foundry', guid],
+    listDetailsComponent: CfEndpointDetailsComponent
   },
   {
     value: 'metrics',
     label: 'Metrics',
     allowTokenSharing: true,
+    imagePath: '/core/assets/endpoint-icons/metrics.svg',
     homeLink: (guid) => ['/endpoints/metrics', guid]
   },
 ];
@@ -76,6 +83,8 @@ let endpointAuthTypes: EndpointAuthTypeConfig[] = [
 
 const endpointTypesMap = {};
 
+export const endpointListDetailsComponents: Type<TableCellCustom<EndpointModel>>[] = [CfEndpointDetailsComponent];
+
 export function initEndpointTypes(epTypes: EndpointTypeConfig[]) {
   epTypes.forEach(epType => {
     endpointTypes.push(epType);
@@ -89,6 +98,10 @@ export function initEndpointTypes(epTypes: EndpointTypeConfig[]) {
         }
       });
     }
+
+    if (epType.listDetailsComponent) {
+      endpointListDetailsComponents.push(epType.listDetailsComponent);
+    }
   });
 
   endpointTypes.forEach(ept => {
@@ -114,6 +127,10 @@ export function getEndpointTypes() {
   return endpointTypes;
 }
 
+export function getEndpointType(type: string): EndpointTypeConfig {
+  return getEndpointTypes().find(ep => ep.value === type);
+}
+
 export function getIconForEndpoint(type: string): EndpointIcon {
   const icon = {
     name: 'settings_ethernet',

src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts

@@ -17,6 +17,7 @@ import {
   EndpointsListConfigService,
 } from '../../../shared/components/list/list-types/endpoint/endpoints-list-config.service';
 import { ListConfig } from '../../../shared/components/list/list.component.types';
+import { EndpointListHelper } from '../../../shared/components/list/list-types/endpoint/endpoint-list.helpers';
 
 @Component({
   selector: 'app-endpoints-page',
@@ -25,7 +26,7 @@ import { ListConfig } from '../../../shared/components/list/list.component.types
   providers: [{
     provide: ListConfig,
     useClass: EndpointsListConfigService,
-  }]
+  }, EndpointListHelper]
 })
 
 export class EndpointsPageComponent implements OnDestroy, OnInit {

src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts

@@ -12,34 +12,35 @@ import {
 } from '@angular/core';
 
 import { IListDataSource } from '../../data-sources-controllers/list-data-source-types';
-
-import { CardCell } from '../../list.types';
+import {
+  AppServiceBindingCardComponent,
+} from '../../list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component';
 import { CardAppComponent } from '../../list-types/app/card/card-app.component';
-import { EndpointCardComponent } from '../../list-types/cf-endpoints/cf-endpoint-card/endpoint-card.component';
-import { CfOrgCardComponent } from '../../list-types/cf-orgs/cf-org-card/cf-org-card.component';
-import { CfSpaceCardComponent } from '../../list-types/cf-spaces/cf-space-card/cf-space-card.component';
 import { CfBuildpackCardComponent } from '../../list-types/cf-buildpacks/cf-buildpack-card/cf-buildpack-card.component';
+import { CfOrgCardComponent } from '../../list-types/cf-orgs/cf-org-card/cf-org-card.component';
 import {
-  CfSecurityGroupsCardComponent
+  CfSecurityGroupsCardComponent,
 } from '../../list-types/cf-security-groups/cf-security-groups-card/cf-security-groups-card.component';
-import { CfStacksCardComponent } from '../../list-types/cf-stacks/cf-stacks-card/cf-stacks-card.component';
 import { CfServiceCardComponent } from '../../list-types/cf-services/cf-service-card/cf-service-card.component';
+import { CfSpaceCardComponent } from '../../list-types/cf-spaces/cf-space-card/cf-space-card.component';
+import { CfStacksCardComponent } from '../../list-types/cf-stacks/cf-stacks-card/cf-stacks-card.component';
+import { EndpointCardComponent } from '../../list-types/endpoint/endpoint-card/endpoint-card.component';
 import {
-  AppServiceBindingCardComponent
-} from '../../list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component';
-import { ServiceInstanceCardComponent } from '../../list-types/services-wall/service-instance-card/service-instance-card.component';
+  ServiceInstanceCardComponent,
+} from '../../list-types/services-wall/service-instance-card/service-instance-card.component';
+import { CardCell } from '../../list.types';
 
 export const listCards = [
   CardAppComponent,
-  EndpointCardComponent,
   CfOrgCardComponent,
   CfSpaceCardComponent,
   CfBuildpackCardComponent,
   CfSecurityGroupsCardComponent,
   CfStacksCardComponent,
   CfServiceCardComponent,
   AppServiceBindingCardComponent,
-  ServiceInstanceCardComponent
+  ServiceInstanceCardComponent,
+  EndpointCardComponent
 ];
 @Component({
   selector: 'app-card',

src/frontend/packages/core/src/shared/components/list/list-cards/meta-card/meta-card-item/meta-card-item.component.html

@@ -9,4 +9,4 @@
       <ng-content *ngTemplateOutlet="value.content"></ng-content>
     </div>
   </div>
-</ng-template>
+</ng-template>

src/frontend/packages/core/src/shared/components/list/list-cards/meta-card/meta-card-item/meta-card-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ContentChild, OnInit, TemplateRef, ViewChild, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 import { MetaCardKeyComponent } from '../meta-card-key/meta-card-key.component';
 import { MetaCardValueComponent } from '../meta-card-value/meta-card-value.component';
@@ -29,9 +29,6 @@ export class MetaCardItemComponent implements OnInit {
 
   @Input() customStyle = 'row';
 
-  constructor() {
-  }
-
   ngOnInit() {
     this.itemStyle = this.styles[this.customStyle];
   }