From ba50d1da3abae446cf4ff18e513507c5bb9d699c Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 Jul 2020 17:02:11 +0100
Subject: [PATCH 1/6] Add service broker space scope information to service
 wall list

---
 .../src/shared/cf-shared.module.ts            |  4 ++
 .../cf-service-card.component.html            |  2 +-
 .../cf-service-card.component.ts              | 11 +---
 .../cf-services-list-config.service.ts        |  7 +--
 .../table-cell-service-broker.component.html  |  8 +++
 .../table-cell-service-broker.component.scss  |  7 +++
 ...able-cell-service-broker.component.spec.ts | 25 ++++++++
 .../table-cell-service-broker.component.ts    | 58 +++++++++++++++++++
 8 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
 create mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
 create mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.spec.ts
 create mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts

diff --git a/src/frontend/packages/cloud-foundry/src/shared/cf-shared.module.ts b/src/frontend/packages/cloud-foundry/src/shared/cf-shared.module.ts
index faca9700ab..206abb267a 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/cf-shared.module.ts
+++ b/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>>[] = [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
index 0268284b7c..5272398124 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
@@ -15,7 +15,7 @@
   <app-meta-card-item>
     <app-meta-card-key>Service Broker</app-meta-card-key>
     <app-meta-card-value>
-      {{ serviceBrokerName$ | async }}
+      <app-table-cell-service-broker [row]="serviceEntity"></app-table-cell-service-broker>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
index f3696b8c7a..0a6f7c5df3 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
+++ b/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,7 +8,7 @@ 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';
 
 export interface ServiceTag {
@@ -27,7 +26,6 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
   cfOrgSpace: CfOrgSpaceLabelService;
   extraInfo: IServiceExtra;
   tags: AppChip<ServiceTag>[] = [];
-  serviceBrokerName$: Observable<string>;
 
   @Input() disableCardClick = false;
 
@@ -45,13 +43,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,
-        );
-      }
     }
   }
 
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
index 90fdcad893..0bbd07b126 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
@@ -21,6 +21,7 @@ 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 } 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 +106,8 @@ export class CfServicesListConfigService implements IListConfig<APIResource> {
   }, {
     columnId: 'broker',
     headerCell: () => 'Broker',
-    cellDefinition: {
-      valuePath: 'entity.label',
-    },
-    cellFlex: '1'
+    cellComponent: TableCellServiceBrokerComponent,
+    cellFlex: '2'
   }, {
     columnId: 'plans',
     headerCell: () => 'Plans',
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
new file mode 100644
index 0000000000..a2956239e9
--- /dev/null
+++ b/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,8 @@
+<div *ngIf="row" class="service-broker">
+  <div>
+    {{row.entity.label}}
+  </div>
+  <div *ngIf="spaceLink$ | async as spaceLink">
+    Space Scoped: <a [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
new file mode 100644
index 0000000000..d7b7fed778
--- /dev/null
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
@@ -0,0 +1,7 @@
+.service-broker {
+  div {
+    &:first-of-type {
+      padding-bottom: 5px;
+    }
+  }
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.spec.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.spec.ts
new file mode 100644
index 0000000000..d7569ed286
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
new file mode 100644
index 0000000000..04159021b2
--- /dev/null
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+
+import { TableCellCustom } from '../../../../../../../../core/src/shared/components/list/list.types';
+import { APIResource } from '../../../../../../../../store/src/types/api.types';
+import { cfEntityCatalog } from '../../../../../../cf-entity-catalog';
+import { IService } from '../../../../../../public_api';
+
+@Component({
+  selector: 'app-table-cell-service-broker',
+  templateUrl: './table-cell-service-broker.component.html',
+  styleUrls: ['./table-cell-service-broker.component.scss']
+})
+export class TableCellServiceBrokerComponent extends TableCellCustom<APIResource<IService>> {
+
+  pRow: APIResource<IService>;
+  @Input()
+  set row(row: APIResource<IService>) {
+    this.pRow = row;
+    if (row && !this.spaceLink$) {
+      const broker$ = cfEntityCatalog.serviceBroker.store.getEntityService(this.row.entity.service_broker_guid, this.row.entity.cfGuid, {}).waitForEntity$
+        .pipe(
+          map(e => e.entity)
+        )
+      this.spaceLink$ = broker$.pipe(
+        filter(broker => !!broker.entity.space_guid),
+        switchMap(broker => cfEntityCatalog.space.store.getWithOrganization.getEntityService(broker.entity.space_guid, broker.entity.cfGuid).waitForEntity$),
+        map(e => e.entity),
+        map(space => ({
+          name: space.entity.name,
+          link: ['/cloud-foundry',
+            space.entity.cfGuid,
+            'organizations',
+            space.entity.organization_guid,
+            'spaces',
+            space.metadata.guid,
+            'summary'
+          ]
+        })
+        )
+      )
+    }
+  }
+  get row(): APIResource<IService> {
+    return this.pRow;
+  }
+
+  public spaceLink$: Observable<{
+    name: string,
+    link: string[]
+  }>;
+
+  constructor() {
+    super()
+  }
+
+}

From f9dee4ab59b4a0894e7956f142ad3ba4fb760538 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 Jul 2020 13:44:58 +0100
Subject: [PATCH 2/6] Split out `Space Scope` into it's own `Scope` row/column

---
 .../cf-service-card.component.html             |  8 +++++++-
 .../cf-service-card.component.ts               | 10 ++++++++++
 .../cf-services-list-config.service.ts         | 16 +++++++++++++++-
 .../table-cell-service-broker.component.html   | 16 ++++++++++------
 .../table-cell-service-broker.component.scss   |  7 -------
 .../table-cell-service-broker.component.ts     | 18 ++++++++++++++++--
 6 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
index 5272398124..bc7174f740 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
@@ -15,7 +15,13 @@
   <app-meta-card-item>
     <app-meta-card-key>Service Broker</app-meta-card-key>
     <app-meta-card-value>
-      <app-table-cell-service-broker [row]="serviceEntity"></app-table-cell-service-broker>
+      <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>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>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
index 0a6f7c5df3..cf73ba00b7 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
@@ -10,6 +10,10 @@ import { APIResource } from '../../../../../../../../store/src/types/api.types';
 import { IService, IServiceExtra } from '../../../../../../cf-api-svc.types';
 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;
@@ -26,6 +30,12 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
   cfOrgSpace: CfOrgSpaceLabelService;
   extraInfo: IServiceExtra;
   tags: AppChip<ServiceTag>[] = [];
+  brokerNameConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.NAME
+  }
+  brokerScopeConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.SCOPE
+  }
 
   @Input() disableCardClick = false;
 
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
index 0bbd07b126..7d547e6123 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
@@ -21,7 +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 } from './table-cell-service-broker/table-cell-service-broker.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';
@@ -107,6 +110,17 @@ export class CfServicesListConfigService implements IListConfig<APIResource> {
     columnId: 'broker',
     headerCell: () => 'Broker',
     cellComponent: TableCellServiceBrokerComponent,
+    cellConfig: {
+      mode: TableCellServiceBrokerComponentMode.NAME
+    },
+    cellFlex: '2'
+  }, , {
+    columnId: 'brokerScope',
+    headerCell: () => 'Scope',
+    cellComponent: TableCellServiceBrokerComponent,
+    cellConfig: {
+      mode: TableCellServiceBrokerComponentMode.SCOPE
+    },
     cellFlex: '2'
   }, {
     columnId: 'plans',
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
index a2956239e9..44b544cad5 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
@@ -1,8 +1,12 @@
-<div *ngIf="row" class="service-broker">
-  <div>
-    {{row.entity.label}}
-  </div>
-  <div *ngIf="spaceLink$ | async as spaceLink">
-    Space Scoped: <a [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
+<div *ngIf="broker$ | async" class="service-broker">
+  <ng-container *ngIf="config?.mode === 'NAME'">
+    {{(broker$ | async).entity.name}}
+  </ng-container>
+  <div *ngIf="config?.mode === 'SCOPE'">
+    <a *ngIf="spaceLink$ | async as spaceLink; else notSpaceScoped"
+      [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
+    <ng-template #notSpaceScoped>
+      All Spaces
+    </ng-template>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
index d7b7fed778..e69de29bb2 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.scss
@@ -1,7 +0,0 @@
-.service-broker {
-  div {
-    &:first-of-type {
-      padding-bottom: 5px;
-    }
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
index 04159021b2..aede27aca1 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
@@ -4,9 +4,19 @@ import { filter, map, switchMap } from 'rxjs/operators';
 
 import { TableCellCustom } from '../../../../../../../../core/src/shared/components/list/list.types';
 import { APIResource } from '../../../../../../../../store/src/types/api.types';
+import { IServiceBroker } from '../../../../../../cf-api-svc.types';
 import { cfEntityCatalog } from '../../../../../../cf-entity-catalog';
 import { IService } from '../../../../../../public_api';
 
+export enum TableCellServiceBrokerComponentMode {
+  NAME = 'NAME',
+  SCOPE = 'SCOPE'
+}
+
+export interface TableCellServiceBrokerComponentConfig {
+  mode: TableCellServiceBrokerComponentMode
+}
+
 @Component({
   selector: 'app-table-cell-service-broker',
   templateUrl: './table-cell-service-broker.component.html',
@@ -14,16 +24,19 @@ import { IService } from '../../../../../../public_api';
 })
 export class TableCellServiceBrokerComponent extends TableCellCustom<APIResource<IService>> {
 
+  @Input()
+  config: TableCellServiceBrokerComponentConfig;
+
   pRow: APIResource<IService>;
   @Input()
   set row(row: APIResource<IService>) {
     this.pRow = row;
     if (row && !this.spaceLink$) {
-      const broker$ = cfEntityCatalog.serviceBroker.store.getEntityService(this.row.entity.service_broker_guid, this.row.entity.cfGuid, {}).waitForEntity$
+      this.broker$ = cfEntityCatalog.serviceBroker.store.getEntityService(this.row.entity.service_broker_guid, this.row.entity.cfGuid, {}).waitForEntity$
         .pipe(
           map(e => e.entity)
         )
-      this.spaceLink$ = broker$.pipe(
+      this.spaceLink$ = this.broker$.pipe(
         filter(broker => !!broker.entity.space_guid),
         switchMap(broker => cfEntityCatalog.space.store.getWithOrganization.getEntityService(broker.entity.space_guid, broker.entity.cfGuid).waitForEntity$),
         map(e => e.entity),
@@ -50,6 +63,7 @@ export class TableCellServiceBrokerComponent extends TableCellCustom<APIResource
     name: string,
     link: string[]
   }>;
+  public broker$: Observable<APIResource<IServiceBroker>>
 
   constructor() {
     super()

From 9067b223c65638b75b21585804bf74a56b3e66eb Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 Jul 2020 14:18:16 +0100
Subject: [PATCH 3/6] Add service broker scope to service instance list (card
 and table) & app binding list (card)

---
 .../app-service-binding-card.component.ts     | 14 ++++++++
 .../cf-service-instances-list-config.base.ts  |  4 +--
 .../table-cell-service-broker.component.html  |  6 ++--
 .../table-cell-service-broker.component.ts    |  3 +-
 .../table-cell-service.component.html         |  9 ++++-
 .../table-cell-service.component.scss         |  7 ++++
 .../table-cell-service.component.ts           | 33 ++++++++++---------
 .../service-instance-card.component.html      | 12 ++++++-
 .../service-instance-card.component.ts        | 27 +++++++--------
 9 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts
index 50fb563f34..ec81454acc 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts
@@ -159,6 +159,20 @@ export class AppServiceBindingCardComponent extends CardCell<APIResource<IServic
         })
       )
     },
+    {
+      label: 'Scope',
+      data$: this.serviceInstance$.pipe(
+        switchMap(si => {
+          if (this.isUserProvidedServiceInstance) {
+            return null;
+          }
+          return this.service$.pipe(
+            switchMap(service => cfEntityCatalog.serviceBroker.store.getEntityService(service.entity.entity.service_broker_guid, service.entity.entity.cfGuid, {}).waitForEntity$),
+            map(serviceBroker => serviceBroker.entity.entity.space_guid ? 'Space Scoped' : 'All Spaces')
+          );
+        })
+      )
+    },
     ];
     this.envVarServicesSection$ = this.service$.pipe(map(s => s.entity.entity.label));
 
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-instances-list-config.base.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-instances-list-config.base.ts
index b1ecf9ef80..b2b33bed1e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-instances-list-config.base.ts
+++ b/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'
     },
   ];
 
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
index 44b544cad5..d9c753def3 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
@@ -3,8 +3,10 @@
     {{(broker$ | async).entity.name}}
   </ng-container>
   <div *ngIf="config?.mode === 'SCOPE'">
-    <a *ngIf="spaceLink$ | async as spaceLink; else notSpaceScoped"
-      [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
+    <ng-container *ngIf="spaceLink$ | async as spaceLink; else notSpaceScoped">
+      <a *ngIf="altScope; else normScope" [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
+      <ng-template #normScope>Space</ng-template>
+    </ng-container>
     <ng-template #notSpaceScoped>
       All Spaces
     </ng-template>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
index aede27aca1..eea29808c6 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.ts
@@ -14,7 +14,8 @@ export enum TableCellServiceBrokerComponentMode {
 }
 
 export interface TableCellServiceBrokerComponentConfig {
-  mode: TableCellServiceBrokerComponentMode
+  mode: TableCellServiceBrokerComponentMode;
+  altScope?: boolean;
 }
 
 @Component({
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
index 292f48f586..fd2aa9ce5b 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
@@ -4,5 +4,12 @@
 <div *ngIf="isUserProvidedServiceInstance === false">
   <div><a [routerLink]="serviceUrl$ | async">{{ serviceName$ | async }}</a></div>
   <div>Plan: {{ row.entity.service_plan?.entity.name }}</div>
-  <div>Broker: {{ serviceBrokerName$ | async }}</div>
+  <div class="broker">
+    Broker: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerNameConfig">
+    </app-table-cell-service-broker>
+  </div>
+  <div class="broker">
+    Scope: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerScopeConfig">
+    </app-table-cell-service-broker>
+  </div>
 </div>
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
index e3f51aafb5..d28afe7bc1 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
@@ -1,3 +1,10 @@
 div > div {
   padding-bottom: 5px;
 }
+
+.broker {
+  display: flex;
+  app-table-cell-service-broker {
+    padding-left: 5px;
+  }
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
index 80434fe3b8..b9cbab0fec 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { filter, first, map, switchMap } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
 import { cfEntityCatalog } from '../../../../../../../../cloud-foundry/src/cf-entity-catalog';
 import { userProvidedServiceInstanceEntityType } from '../../../../../../../../cloud-foundry/src/cf-entity-types';
@@ -9,7 +9,11 @@ import { getServiceName } from '../../../../../../../../cloud-foundry/src/featur
 import { TableCellCustom } from '../../../../../../../../core/src/shared/components/list/list.types';
 import { entityCatalog } from '../../../../../../../../store/src/entity-catalog/entity-catalog';
 import { APIResource } from '../../../../../../../../store/src/types/api.types';
-import { IServiceInstance } from '../../../../../../cf-api-svc.types';
+import { IService, IServiceInstance } from '../../../../../../cf-api-svc.types';
+import {
+  TableCellServiceBrokerComponentConfig,
+  TableCellServiceBrokerComponentMode,
+} from '../../cf-services/table-cell-service-broker/table-cell-service-broker.component';
 
 @Component({
   selector: 'app-table-cell-service',
@@ -20,13 +24,21 @@ export class TableCellServiceComponent extends TableCellCustom<APIResource<IServ
 
   serviceName$: Observable<string>;
   serviceUrl$: Observable<string>;
-  serviceBrokerName$: Observable<string>;
+  service$: Observable<APIResource<IService>>;
   // tslint:disable-next-line:ban-types
   isUserProvidedServiceInstance: Boolean;
 
   @Input() row: APIResource<IServiceInstance>;
   @Input() entityKey: string;
 
+  brokerNameConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.NAME
+  }
+  brokerScopeConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.SCOPE,
+    altScope: true
+  }
+
 
   ngOnInit() {
     this.isUserProvidedServiceInstance =
@@ -46,18 +58,9 @@ export class TableCellServiceComponent extends TableCellCustom<APIResource<IServ
         map(service => `/marketplace/${service.entity.entity.cfGuid}/${service.entity.metadata.guid}/summary`)
       );
 
-      this.serviceBrokerName$ = service$.pipe(
-        first(),
-        switchMap(service => {
-          const brokerGuid = service.entity.entity.service_broker_guid;
-          return cfEntityCatalog.serviceBroker.store.getEntityService(brokerGuid, service.entity.entity.cfGuid, {})
-            .waitForEntity$.pipe(
-              map(a => a.entity),
-              filter(res => !!res),
-              map(a => a.entity.name),
-              first()
-            );
-        })
+      this.service$ = service$.pipe(
+        filter(res => !!res),
+        map(a => a.entity),
       );
     }
   }
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
index c9fa1a25fe..e38ba3afd8 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
@@ -22,7 +22,17 @@
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>Service Broker</app-meta-card-key>
-    <app-meta-card-value>{{ serviceBrokerName$ | async }} </app-meta-card-value>
+    <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>
+    <app-meta-card-key>Service Broker 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>Applications Attached</app-meta-card-key>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.ts
index ffb0dd8ae5..8f8f8a5592 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { filter, map, switchMap } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../../../../cloud-foundry/src/cf-app-state';
 import { serviceInstancesEntityType } from '../../../../../../../../cloud-foundry/src/cf-entity-types';
@@ -17,7 +17,6 @@ import { IService, IServiceInstance } from '../../../../../../cf-api-svc.types';
 import { cfEntityCatalog } from '../../../../../../cf-entity-catalog';
 import { cfEntityFactory } from '../../../../../../cf-entity-factory';
 import {
-  getServiceBrokerName,
   getServiceName,
   getServicePlanName,
   getServiceSummaryUrl,
@@ -26,6 +25,10 @@ import { CfCurrentUserPermissions } from '../../../../../../user-permissions/cf-
 import { ServiceActionHelperService } from '../../../../../data-services/service-action-helper.service';
 import { CfOrgSpaceLabelService } from '../../../../../services/cf-org-space-label.service';
 import { CSI_CANCEL_URL } from '../../../../add-service-instance/csi-mode.service';
+import {
+  TableCellServiceBrokerComponentConfig,
+  TableCellServiceBrokerComponentMode,
+} from '../../cf-services/table-cell-service-broker/table-cell-service-broker.component';
 
 @Component({
   selector: 'app-service-instance-card',
@@ -97,15 +100,6 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
         );
       }
 
-      if (!this.serviceBrokerName$) {
-        // Note, here we just need the service's service broker. This should be available by
-        // `this.serviceInstanceEntity.entity.service_plan.entity.service.entity.service_broker_guid` however can be empty (see #4397).
-        // So fetch the service separately, as per the table way (this shouldn't start a http request if it's already in the store) 
-        this.serviceBrokerName$ = this.service$.pipe(
-          switchMap(service => getServiceBrokerName(service.entity.service_broker_guid, service.entity.cfGuid))
-        )
-      }
-
       if (!this.serviceName$) {
         // See note for this.serviceBrokerName$
         this.serviceName$ = this.service$.pipe(
@@ -142,12 +136,19 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
   entityConfig: ComponentEntityMonitorConfig;
 
   cfOrgSpace: CfOrgSpaceLabelService;
-  serviceBrokerName$: Observable<string>;
   serviceName$: Observable<string>;
   servicePlanName: string;
   serviceUrl: string;
 
-  private service$: Observable<APIResource<IService>>;
+  service$: Observable<APIResource<IService>>;
+
+  brokerNameConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.NAME
+  }
+  brokerScopeConfig: TableCellServiceBrokerComponentConfig = {
+    mode: TableCellServiceBrokerComponentMode.SCOPE,
+    altScope: true
+  }
 
   private detach = () => {
     this.serviceActionHelperService.detachServiceBinding(

From 729574ab583934301f595aca2b96ab6e468c03d4 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 Jul 2020 15:27:27 +0100
Subject: [PATCH 4/6] Fix e2e test

---
 .../marketplace/create-service-instances-bind-app-e2e.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test-e2e/marketplace/create-service-instances-bind-app-e2e.spec.ts b/src/test-e2e/marketplace/create-service-instances-bind-app-e2e.spec.ts
index 91eb24e945..0fe47fada5 100644
--- a/src/test-e2e/marketplace/create-service-instances-bind-app-e2e.spec.ts
+++ b/src/test-e2e/marketplace/create-service-instances-bind-app-e2e.spec.ts
@@ -50,7 +50,7 @@ describe('Create Service Instance with binding', () => {
         .then(metaCardRows => {
           expect(metaCardRows[1].value).toBe(servicesSecrets.publicService.name);
           expect(metaCardRows[2].value).toBe('shared');
-          expect(metaCardRows[4].value).toBe('1');
+          expect(metaCardRows[5].value).toBe('1');
         });
 
     });

From bad6a9870900211f606639e6a90f10a79761da13 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 Jul 2020 17:57:26 +0100
Subject: [PATCH 5/6] Fix services table, cater for brokers that return 403

---
 .../cf-services/cf-services-list-config.service.ts          | 2 +-
 .../table-cell-service-broker.component.html                | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
index 7d547e6123..0ef1c6bd70 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-services-list-config.service.ts
@@ -114,7 +114,7 @@ export class CfServicesListConfigService implements IListConfig<APIResource> {
       mode: TableCellServiceBrokerComponentMode.NAME
     },
     cellFlex: '2'
-  }, , {
+  }, {
     columnId: 'brokerScope',
     headerCell: () => 'Scope',
     cellComponent: TableCellServiceBrokerComponent,
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
index d9c753def3..ccf904791e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="broker$ | async" class="service-broker">
+<div *ngIf="(broker$ | async) else noBroker" class="service-broker">
   <ng-container *ngIf="config?.mode === 'NAME'">
     {{(broker$ | async).entity.name}}
   </ng-container>
@@ -11,4 +11,6 @@
       All Spaces
     </ng-template>
   </div>
-</div>
\ No newline at end of file
+</div>
+<!-- Some CFs will return 403 when requesting a service's broker -->
+<ng-template #noBroker>-</ng-template>
\ No newline at end of file

From 89703b8931d330db05006f1ba15f1a6f135c8f4d Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 23 Jul 2020 13:57:14 +0100
Subject: [PATCH 6/6] Changes following review - Show space scope link in app
 service list (quick access) - Harmonize names (Service, broker, scope, etc) -
 Fix space scope link in services wall

---
 .../app-service-binding-card.component.html   | 22 +++++-
 .../app-service-binding-card.component.ts     | 72 ++++++-------------
 .../cf-service-card.component.html            |  4 +-
 .../table-cell-service-broker.component.html  |  4 +-
 .../service-instance-card.component.html      |  2 +-
 5 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.html
index 6bfbddb4da..854f94676f 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.html
+++ b/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>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts
index ec81454acc..9336551f44 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-sevice-bindings/app-service-binding-card/app-service-binding-card.component.ts
+++ b/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,53 +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,
-              );
-            })
-          );
-        })
-      )
-    },
-    {
-      label: 'Scope',
-      data$: this.serviceInstance$.pipe(
-        switchMap(si => {
-          if (this.isUserProvidedServiceInstance) {
-            return null;
-          }
-          return this.service$.pipe(
-            switchMap(service => cfEntityCatalog.serviceBroker.store.getEntityService(service.entity.entity.service_broker_guid, service.entity.entity.cfGuid, {}).waitForEntity$),
-            map(serviceBroker => serviceBroker.entity.entity.space_guid ? 'Space Scoped' : 'All Spaces')
-          );
-        })
-      )
-    },
-    ];
-    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))
     );
 
   }
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
index bc7174f740..838f06bdb0 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
@@ -13,7 +13,7 @@
     </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>
       <app-table-cell-service-broker [row]="serviceEntity" [config]="brokerNameConfig"></app-table-cell-service-broker>
     </app-meta-card-value>
@@ -25,7 +25,7 @@
     </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>Plans</app-meta-card-key>
     <app-meta-card-value>
       {{ serviceEntity.entity.service_plans.length }}
     </app-meta-card-value>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
index ccf904791e..1465604a38 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/table-cell-service-broker/table-cell-service-broker.component.html
@@ -4,8 +4,8 @@
   </ng-container>
   <div *ngIf="config?.mode === 'SCOPE'">
     <ng-container *ngIf="spaceLink$ | async as spaceLink; else notSpaceScoped">
-      <a *ngIf="altScope; else normScope" [routerLink]="spaceLink.link">{{ spaceLink.name }}</a>
-      <ng-template #normScope>Space</ng-template>
+      <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
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
index e38ba3afd8..65a4475306 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html
@@ -28,7 +28,7 @@
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
-    <app-meta-card-key>Service Broker Scope</app-meta-card-key>
+    <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>