Add service broker space scope information to service wall list

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

@@ -136,6 +136,9 @@ import {
 import {
   TableCellServiceBindableComponent,
 } from './components/list/list-types/cf-services/table-cell-service-bindable/table-cell-service-bindable.component';
+import {
+  TableCellServiceBrokerComponent,
+} from './components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component';
 import {
   TableCellServiceCfBreadcrumbsComponent,
 } from './components/list/list-types/cf-services/table-cell-service-cf-breadcrumbs/table-cell-service-cf-breadcrumbs.component';
@@ -248,6 +251,7 @@ const cfListTableCells: Type<TableCellCustom<any>>[] = [
   TableCellServiceReferencesComponent,
   TableCellServiceInstanceTagsComponent,
   TableCellCommitAuthorComponent,
+  TableCellServiceBrokerComponent
 ];
 
 const cfListCards: Type<CardCell<any>>[] = [

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.html

@@ -1,7 +1,7 @@
 <app-meta-card class="app-service-card" [actionMenu]="cardMenu" [entityConfig]="entityConfig">
   <app-meta-card-title>
     <div class="app-service-card__title">
-      {{ (serviceInstance$ | async)?.entity.entity.name}}
+      {{ (serviceInstance$ | async)?.entity.name}}
       <app-service-icon [service]="service$ | async"></app-service-icon>
     </div>
   </app-meta-card-title>
@@ -18,7 +18,25 @@
     <app-meta-card-key>{{ data.label }}</app-meta-card-key>
     <app-meta-card-value>{{ data.data$ | async }} </app-meta-card-value>
   </app-meta-card-item>
-
+  <app-meta-card-item *ngIf="!isUserProvidedServiceInstance">
+    <app-meta-card-key>Service Broker</app-meta-card-key>
+    <app-meta-card-value>
+      <app-table-cell-service-broker [row]="service$ | async" [config]="brokerNameConfig">
+      </app-table-cell-service-broker>
+    </app-meta-card-value>
+  </app-meta-card-item>
+  <app-meta-card-item *ngIf="!isUserProvidedServiceInstance">
+    <app-meta-card-key>Service Scope</app-meta-card-key>
+    <app-meta-card-value>
+      <app-table-cell-service-broker [row]="service$ | async" [config]="brokerScopeConfig">
+      </app-table-cell-service-broker>
+    </app-meta-card-value>
+  </app-meta-card-item>
+  <app-meta-card-item>
+    <app-meta-card-key>Date Created On</app-meta-card-key>
+    <app-meta-card-value>{{ row.metadata.created_at | date:'medium'}}
+    </app-meta-card-value>
+  </app-meta-card-item>
   <app-meta-card-item *ngIf="envVarsAvailable$ | async as envVarData">
     <app-meta-card-key>Environment Variables</app-meta-card-key>
     <app-meta-card-value>

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts

@@ -1,7 +1,6 @@
-import { DatePipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { combineLatest as observableCombineLatest, Observable, of as observableOf, of } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable, of } from 'rxjs';
 import { filter, first, map, switchMap } from 'rxjs/operators';
 
 import {
@@ -24,7 +23,6 @@ import { serviceBindingEntityType } from '../../../../../../cf-entity-types';
 import { ApplicationService } from '../../../../../../features/applications/application.service';
 import { isUserProvidedServiceInstance } from '../../../../../../features/cloud-foundry/cf.helpers';
 import {
-  getServiceBrokerName,
   getServiceName,
   getServicePlanName,
   getServiceSummaryUrl,
@@ -34,6 +32,10 @@ import { CfCurrentUserPermissions } from '../../../../../../user-permissions/cf-
 import { ServiceActionHelperService } from '../../../../../data-services/service-action-helper.service';
 import { CSI_CANCEL_URL } from '../../../../add-service-instance/csi-mode.service';
 import { EnvVarViewComponent } from '../../../../env-var-view/env-var-view.component';
+import {
+  TableCellServiceBrokerComponentConfig,
+  TableCellServiceBrokerComponentMode,
+} from '../../cf-services/table-cell-service-broker/table-cell-service-broker.component';
 
 
 interface EnvVarData {
@@ -54,19 +56,25 @@ export class AppServiceBindingCardComponent extends CardCell<APIResource<IServic
     customStyle?: string;
   }[];
   cardMenu: MenuItem[];
-  service$: Observable<EntityInfo<APIResource<IService>> | null>;
+  service$: Observable<APIResource<IService> | null>;
   serviceInstance$: Observable<EntityInfo<APIResource<IServiceInstance | IUserProvidedServiceInstance>>>;
   tags$: Observable<AppChip<IServiceInstance | IUserProvidedServiceInstance>[]>;
   entityConfig: ComponentEntityMonitorConfig;
   private envVarServicesSection$: Observable<string>;
-  private isUserProvidedServiceInstance: boolean;
+  isUserProvidedServiceInstance: boolean;
   serviceDescription$: Observable<string>;
   serviceUrl$: Observable<string>;
   serviceName$: Observable<string>;
 
+  brokerNameConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.NAME
+  }
+  brokerScopeConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.SCOPE,
+  }
+
   constructor(
     private dialog: MatDialog,
-    private datePipe: DatePipe,
     private appService: ApplicationService,
     private serviceActionHelperService: ServiceActionHelperService,
     private currentUserPermissionsService: CurrentUserPermissionsService,
@@ -105,11 +113,6 @@ export class AppServiceBindingCardComponent extends CardCell<APIResource<IServic
       this.setupAsServiceInstance();
     }
 
-    this.listData.push({
-      label: 'Date Created On',
-      data$: observableOf(this.datePipe.transform(this.row.metadata.created_at, 'medium'))
-    });
-
     this.tags$ = this.serviceInstance$.pipe(
       filter(o => !!o.entity.entity.tags),
       map(o => o.entity.entity.tags.map(t => ({ value: t })))
@@ -126,7 +129,8 @@ export class AppServiceBindingCardComponent extends CardCell<APIResource<IServic
     this.service$ = serviceInstance$.pipe(
       switchMap(o => cfEntityCatalog.service.store.getEntityService(o.entity.entity.service_guid, this.appService.cfGuid, {})
         .waitForEntity$),
-      filter(service => !!service)
+      filter(service => !!service),
+      map(e => e.entity)
     );
     this.listData = [{
       label: 'Service Plan',
@@ -139,39 +143,19 @@ export class AppServiceBindingCardComponent extends CardCell<APIResource<IServic
           return getServicePlanName(serviceInstance.service_plan.entity);
         })
       )
-    },
-    {
-      label: 'Service Broker',
-      data$: this.serviceInstance$.pipe(
-        switchMap(si => {
-          if (this.isUserProvidedServiceInstance) {
-            return null;
-          }
-          const serviceInstance: IServiceInstance = si.entity.entity as IServiceInstance;
-          return this.service$.pipe(
-            switchMap(service => {
-              return getServiceBrokerName(
-                service.entity.entity.service_broker_guid,
-                serviceInstance.cfGuid,
-              );
-            })
-          );
-        })
-      )
-    },
-    ];
-    this.envVarServicesSection$ = this.service$.pipe(map(s => s.entity.entity.label));
+    }];
+    this.envVarServicesSection$ = this.service$.pipe(map(s => s.entity.label));
 
     this.serviceDescription$ = this.service$.pipe(
-      map(service => service.entity.entity.description)
+      map(service => service.entity.description)
     );
 
     this.serviceUrl$ = this.service$.pipe(
-      map(service => getServiceSummaryUrl(service.entity.entity.cfGuid, service.entity.metadata.guid))
+      map(service => getServiceSummaryUrl(service.entity.cfGuid, service.metadata.guid))
     );
 
     this.serviceName$ = this.service$.pipe(
-      map(service => getServiceName(service.entity))
+      map(service => getServiceName(service))
     );
 
   }

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html

@@ -13,13 +13,19 @@
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
-    <app-meta-card-key>Service Broker</app-meta-card-key>
+    <app-meta-card-key>Broker</app-meta-card-key>
     <app-meta-card-value>
-      {{ serviceBrokerName$ | async }}
+      <app-table-cell-service-broker [row]="serviceEntity" [config]="brokerNameConfig"></app-table-cell-service-broker>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
-    <app-meta-card-key>Service Plans</app-meta-card-key>
+    <app-meta-card-key>Scope</app-meta-card-key>
+    <app-meta-card-value>
+      <app-table-cell-service-broker [row]="serviceEntity" [config]="brokerScopeConfig"></app-table-cell-service-broker>
+    </app-meta-card-value>
+  </app-meta-card-item>
+  <app-meta-card-item>
+    <app-meta-card-key>Plans</app-meta-card-key>
     <app-meta-card-value>
       {{ serviceEntity.entity.service_plans.length }}
     </app-meta-card-value>

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
 
 import { CFAppState } from '../../../../../../../../cloud-foundry/src/cf-app-state';
 import { AppChip } from '../../../../../../../../core/src/shared/components/chips/chips.component';
@@ -9,8 +8,12 @@ import { RouterNav } from '../../../../../../../../store/src/actions/router.acti
 import { EntityServiceFactory } from '../../../../../../../../store/src/entity-service-factory.service';
 import { APIResource } from '../../../../../../../../store/src/types/api.types';
 import { IService, IServiceExtra } from '../../../../../../cf-api-svc.types';
-import { getServiceBrokerName, getServiceName } from '../../../../../../features/service-catalog/services-helper';
+import { getServiceName } from '../../../../../../features/service-catalog/services-helper';
 import { CfOrgSpaceLabelService } from '../../../../../services/cf-org-space-label.service';
+import {
+  TableCellServiceBrokerComponentConfig,
+  TableCellServiceBrokerComponentMode,
+} from '../table-cell-service-broker/table-cell-service-broker.component';
 
 export interface ServiceTag {
   value: string;
@@ -27,7 +30,12 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
   cfOrgSpace: CfOrgSpaceLabelService;
   extraInfo: IServiceExtra;
   tags: AppChip<ServiceTag>[] = [];
-  serviceBrokerName$: Observable<string>;
+  brokerNameConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.NAME
+  }
+  brokerScopeConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.SCOPE
+  }
 
   @Input() disableCardClick = false;
 
@@ -45,13 +53,6 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
       if (!this.cfOrgSpace) {
         this.cfOrgSpace = new CfOrgSpaceLabelService(this.store, this.serviceEntity.entity.cfGuid);
       }
-
-      if (!this.serviceBrokerName$) {
-        this.serviceBrokerName$ = getServiceBrokerName(
-          this.serviceEntity.entity.service_broker_guid,
-          this.serviceEntity.entity.cfGuid,
-        );
-      }
     }
   }
 

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-instances-list-config.base.ts

@@ -78,7 +78,7 @@ export class CfServiceInstancesListConfigBase implements IListConfig<APIResource
       columnId: 'service',
       headerCell: () => 'Service',
       cellComponent: TableCellServiceComponent,
-      cellFlex: '2'
+      cellFlex: '3'
     },
     {
       columnId: 'lastOp',
@@ -119,7 +119,7 @@ export class CfServiceInstancesListConfigBase implements IListConfig<APIResource
         orderKey: 'creation',
         field: 'metadata.created_at'
       },
-      cellFlex: '2'
+      cellFlex: '1'
     },
   ];
 

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts

@@ -21,6 +21,10 @@ import { CfServiceCardComponent } from './cf-service-card/cf-service-card.compon
 import { CfServicesDataSource } from './cf-services-data-source';
 import { TableCellServiceActiveComponent } from './table-cell-service-active/table-cell-service-active.component';
 import { TableCellServiceBindableComponent } from './table-cell-service-bindable/table-cell-service-bindable.component';
+import {
+  TableCellServiceBrokerComponent,
+  TableCellServiceBrokerComponentMode,
+} from './table-cell-service-broker/table-cell-service-broker.component';
 import {
   TableCellServiceCfBreadcrumbsComponent,
 } from './table-cell-service-cf-breadcrumbs/table-cell-service-cf-breadcrumbs.component';
@@ -105,10 +109,19 @@ export class CfServicesListConfigService implements IListConfig<APIResource> {
   }, {
     columnId: 'broker',
     headerCell: () => 'Broker',
-    cellDefinition: {
-      valuePath: 'entity.label',
+    cellComponent: TableCellServiceBrokerComponent,
+    cellConfig: {
+      mode: TableCellServiceBrokerComponentMode.NAME
     },
-    cellFlex: '1'
+    cellFlex: '2'
+  }, {
+    columnId: 'brokerScope',
+    headerCell: () => 'Scope',
+    cellComponent: TableCellServiceBrokerComponent,
+    cellConfig: {
+      mode: TableCellServiceBrokerComponentMode.SCOPE
+    },
+    cellFlex: '2'
   }, {
     columnId: 'plans',
     headerCell: () => 'Plans',

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="(broker$ | async) else noBroker" class="service-broker">
+  <ng-container *ngIf="config?.mode === 'NAME'">
+    {{(broker$ | async).entity.name}}
+  </ng-container>
+  <div *ngIf="config?.mode === 'SCOPE'">
+    <ng-container *ngIf="spaceLink$ | async as spaceLink; else notSpaceScoped">
+      <ng-container *ngIf="config?.altScope; else normScope">Space</ng-container>
+      <ng-template #normScope><a [routerLink]="spaceLink.link">{{ spaceLink.name }}</a></ng-template>
+    </ng-container>
+    <ng-template #notSpaceScoped>
+      All Spaces
+    </ng-template>
+  </div>
+</div>
+<!-- Some CFs will return 403 when requesting a service's broker -->
+<ng-template #noBroker>-</ng-template>

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableCellServiceBrokerComponent } from './table-cell-service-broker.component';
+
+describe('TableCellServiceBrokerComponent', () => {
+  let component: TableCellServiceBrokerComponent;
+  let fixture: ComponentFixture<TableCellServiceBrokerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TableCellServiceBrokerComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableCellServiceBrokerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});