Merge pull request #3422 from cloudfoundry-incubator/endpoint-list-cards

Add card view to endpoint list

package.json

@@ -22,6 +22,7 @@
     "test": "run-s test-frontend:* --continue-on-error",
     "test-frontend:core": "ng test core --code-coverage --watch=false",
     "test-frontend:store": "ng test store --code-coverage --watch=false",
+    "test-frontend:cloud-foundry": "ng test cloud-foundry --code-coverage --watch=false",
     "posttest": "istanbul report json && node build/combine-coverage.js",
     "codecov": "codecov -f coverage/coverage-final.json",
     "lint": "ng lint --format stylish",

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+
+import { StratosExtension } from '../../core/src/core/extension/extension-service';
+import { EndpointTypeConfig } from '../../core/src/core/extension/extension-types';
+import { urlValidationExpression } from '../../core/src/core/utils.service';
+import { CfEndpointDetailsComponent } from './shared/components/cf-endpoint-details/cf-endpoint-details.component';
+import { CloudFoundryComponentsModule } from './shared/components/components.module';
+
+const cloudFoundryEndpointTypes: EndpointTypeConfig[] = [{
+  value: 'cf',
+  label: 'Cloud Foundry',
+  urlValidation: urlValidationExpression,
+  icon: 'cloud_foundry',
+  iconFont: 'stratos-icons',
+  imagePath: '/core/assets/endpoint-icons/cloudfoundry.png',
+  homeLink: (guid) => ['/cloud-foundry', guid],
+  listDetailsComponent: CfEndpointDetailsComponent
+}];
+
+@StratosExtension({
+  endpointTypes: cloudFoundryEndpointTypes,
+})
+@NgModule({
+  imports: [
+    CloudFoundryComponentsModule
+  ],
+})
+export class CloudFoundryModule { }

src/frontend/packages/cloud-foundry/src/public_api.ts

@@ -2,6 +2,6 @@
  * Public API Surface of cloud-foundry
  */
 
-export * from './lib/cloud-foundry.service';
+// export * from './lib/cloud-foundry.service';
 export * from './lib/cloud-foundry.component';
 export * from './lib/cloud-foundry.module';

src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html

@@ -0,0 +1,9 @@
+<div class="cf-details" *ngIf="row?.user as user else noUser">
+  <div class="cf-details__line">
+    <span class="cf-details__icon">
+      <mat-icon matTooltip="Username">person</mat-icon>
+    </span>
+    {{ user.name}} <ng-container *ngIf="user.admin">(Administrator)</ng-container>
+  </div>
+</div>
+<ng-template #noUser>-</ng-template>

src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss

@@ -0,0 +1,16 @@
+.cf-details {
+  display: flex;
+  flex-direction: column;
+
+  &__line {
+    align-items: center;
+    display: flex;
+  }
+
+  &__icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: 32px;
+  }
+}

src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoreModule } from '../../../../../core/src/core/core.module';
+import { SharedModule } from '../../../../../core/src/shared/shared.module';
+import { CfEndpointDetailsComponent } from './cf-endpoint-details.component';
+
+describe('CfEndpointDetailsComponent', () => {
+  let component: CfEndpointDetailsComponent;
+  let fixture: ComponentFixture<CfEndpointDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CfEndpointDetailsComponent],
+      imports: [
+        CoreModule,
+        SharedModule
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CfEndpointDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import {
+  EndpointListDetailsComponent,
+} from '../../../../../core/src/shared/components/list/list-types/endpoint/endpoint-list.helpers';
+
+
+@Component({
+  selector: 'lib-cf-endpoint-details',
+  templateUrl: './cf-endpoint-details.component.html',
+  styleUrls: ['./cf-endpoint-details.component.scss']
+})
+export class CfEndpointDetailsComponent extends EndpointListDetailsComponent { }

src/frontend/packages/cloud-foundry/src/shared/components/components.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+
+import { CoreModule } from '../../../../core/src/core/core.module';
+import { CfEndpointDetailsComponent } from './cf-endpoint-details/cf-endpoint-details.component';
+
+@NgModule({
+  imports: [
+    CoreModule
+  ],
+  declarations: [
+    CfEndpointDetailsComponent
+  ],
+  exports: [
+    CfEndpointDetailsComponent
+  ],
+  entryComponents: [
+    CfEndpointDetailsComponent
+  ]
+})
+export class CloudFoundryComponentsModule { }

src/frontend/packages/cloud-foundry/src/test.ts

@@ -1,10 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
 
 import { APP_BASE_HREF } from '@angular/common';
 import { getTestBed } from '@angular/core/testing';

src/frontend/packages/cloud-foundry/tsconfig.spec.json

@@ -2,15 +2,16 @@
   "extends": "../../../tsconfig.spec.json",
   "compilerOptions": {
     "outDir": "../../../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
   },
   "files": [
     "src/test.ts"
   ],
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ],
-  "exclude": [
-    "**/node_modules/**"
   ]
 }

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

@@ -6,6 +6,7 @@ import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router
 import { Store } from '@ngrx/store';
 import { debounceTime, withLatestFrom } from 'rxjs/operators';
 
+import { CloudFoundryModule } from '../../cloud-foundry/src/cloud-foundry.module';
 import { GetAllEndpoints } from '../../store/src/actions/endpoint.actions';
 import { GetOrganization } from '../../store/src/actions/organization.actions';
 import { SetRecentlyVisitedEntityAction } from '../../store/src/actions/recently-visited.actions';
@@ -38,6 +39,7 @@ import { CurrentUserPermissionsService } from './core/current-user-permissions.s
 import { DynamicExtensionRoutes } from './core/extension/dynamic-extension-routes';
 import { ExtensionService } from './core/extension/extension-service';
 import { getGitHubAPIURL, GITHUB_API_URL } from './core/github.helpers';
+import { LoggerService } from './core/logger.service';
 import { UserFavoriteManager } from './core/user-favorite-manager';
 import { CustomImportModule } from './custom-import.module';
 import { AboutModule } from './features/about/about.module';
@@ -56,7 +58,6 @@ import { ApplicationStateService } from './shared/components/application-state/a
 import { favoritesConfigMapper } from './shared/components/favorites-meta-card/favorite-config-mapper';
 import { SharedModule } from './shared/shared.module';
 import { XSRFModule } from './xsrf.module';
-import { LoggerService } from './core/logger.service';
 
 // Create action for router navigation. See
 // - https://github.com/ngrx/platform/issues/68
@@ -113,6 +114,7 @@ export class CustomRouterStateSerializer
     AboutModule,
     CustomImportModule,
     XSRFModule,
+    CloudFoundryModule
   ],
   providers: [
     LoggedInService,
@@ -138,7 +140,7 @@ export class AppModule {
     initEndpointExtensions(ext);
     // Once the CF modules become an extension point, these should be moved to a CF specific module
     this.registerCfFavoriteMappers();
-    this.userFavoriteManager = new UserFavoriteManager(store,  logger);
+    this.userFavoriteManager = new UserFavoriteManager(store, logger);
     const allFavs$ = this.userFavoriteManager.getAllFavorites();
     const recents$ = this.store.select(recentlyVisitedSelector);
     const debouncedApiRequestData$ = this.store.select(getAPIRequestDataState).pipe(debounceTime(2000));

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

@@ -12,11 +12,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. Should be Type<EndpointListDetailsComponent>
+   */
+  listDetailsComponent?: any;
 }
 
 export interface EndpointAuthTypeConfig {