Skip to content

Commit

Permalink
Add service broker space scope information to service wall list (#4463)
Browse files Browse the repository at this point in the history
* Add service broker space scope information to service wall list

* Split out `Space Scope` into it's own `Scope` row/column

* Add service broker scope to service instance list (card and table) & app binding list (card)

* Fix e2e test

* Fix services table, cater for brokers that return 403

* 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
  • Loading branch information
richard-cox authored Jul 23, 2020
1 parent 43b897a commit df4d956
Show file tree
Hide file tree
Showing 17 changed files with 256 additions and 88 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -248,6 +251,7 @@ const cfListTableCells: Type<TableCellCustom<any>>[] = [
TableCellServiceReferencesComponent,
TableCellServiceInstanceTagsComponent,
TableCellCommitAuthorComponent,
TableCellServiceBrokerComponent
];

const cfListCards: Type<CardCell<any>>[] = [
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -24,7 +23,6 @@ import { serviceBindingEntityType } from '../../../../../../cf-entity-types';
import { ApplicationService } from '../../../../../../features/applications/application.service';
import { isUserProvidedServiceInstance } from '../../../../../../features/cf/cf.helpers';
import {
getServiceBrokerName,
getServiceName,
getServicePlanName,
getServiceSummaryUrl,
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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 })))
Expand All @@ -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',
Expand All @@ -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))
);

}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -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;

Expand All @@ -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,
);
}
}
}

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading

0 comments on commit df4d956

Please sign in to comment.