User Provided Service Instances

src/frontend/packages/core/sass/_all-theme.scss

@@ -39,6 +39,7 @@
 @import '../src/features/applications/application-wall/application-wall.component.theme';
 @import '../src/features/services/services-wall/services-wall.component.theme';
 @import '../src/features/service-catalog/service-catalog-page/service-catalog-page.component.theme';
+@import '../src/shared/components/tile-selector/tile-selector.component.theme';
 @import '../src/shared/components/multiline-title/multiline-title.component.theme';
 @import './components/mat-tabs.theme';
 @import './components/text-status.theme';
@@ -127,6 +128,7 @@ $side-nav-light-active: #484848;
   @include metrics-chart-theme($theme, $app-theme);
   @include metrics-range-selector-theme($theme, $app-theme);
   @include app-multiline-title-theme($theme, $app-theme);
+  @include tile-selector-theme($theme, $app-theme);
 }
 
 @function app-generate-nav-theme($theme, $nav-theme: null) {

src/frontend/packages/core/src/core/cf-api-svc.types.ts

@@ -1,5 +1,5 @@
 import { APIResource } from '../../../store/src/types/api.types';
-import { IApp, IOrganization, ISpace } from './cf-api.types';
+import { IApp, IOrganization, IRoute, ISpace } from './cf-api.types';
 
 export interface ILastOperation {
   type: string;
@@ -21,7 +21,7 @@ export interface IServiceBinding {
   app_url: string;
   app?: APIResource<IApp>;
   service_instance_url: string;
-  service_instance?: APIResource<IServiceInstance>;
+  service_instance?: APIResource<IServiceInstance> | APIResource<IUserProvidedServiceInstance>;
   guid?: string;
   cfGuid?: string;
 }
@@ -147,3 +147,20 @@ export interface IServiceBroker {
   guid?: string;
   cfGuid?: string;
 }
+
+export interface IUserProvidedServiceInstance {
+  name: string;
+  credentials: { [name: string]: string };
+  space_guid: string;
+  space: APIResource<ISpace>;
+  space_url: string;
+  type: string;
+  syslog_drain_url: string;
+  tags: string[];
+  service_bindings: APIResource<IServiceBinding>[];
+  service_bindings_url: string;
+  routes: APIResource<IRoute>[];
+  routes_url: string;
+  route_service_url: string;
+  cfGuid?: string;
+}

src/frontend/packages/core/src/features/applications/application-delete/application-delete.component.html

@@ -7,32 +7,50 @@ <h1>Delete application</h1>
       <app-step *ngIf="entities.routes && entities.routes.length" title="Routes">
         <div class="app-delete__monitors">
           <p>Please select any attached application routes you would like to delete.</p>
-          <app-delete-app-routes class="app-delete__step-table" (selected)="setSelectedRoutes($event)"></app-delete-app-routes>
+          <app-delete-app-routes class="app-delete__step-table" (selected)="setSelectedRoutes($event)">
+          </app-delete-app-routes>
         </div>
       </app-step>
       <app-step title="Service Instances" *ngIf="entities.instances && entities.instances.length">
         <div class="app-delete__monitors">
           <p>Please select any attached application service instances you would like to delete.</p>
-          <app-delete-app-instances class="app-delete__step-table" (selected)="setSelectedServiceInstances($event)"></app-delete-app-instances>
+          <app-delete-app-instances class="app-delete__step-table" (selected)="setSelectedServiceInstances($event)">
+          </app-delete-app-instances>
         </div>
       </app-step>
-      <app-step title="Confirm" class="app-delete__monitors" [canClose]="!deleteStarted" [disablePrevious]="deleteStarted" [destructiveStep]="!deleteStarted" [onNext]="startDelete" [finishButtonText]="deleteStarted ? 'Close' : 'Delete'">
+      <app-step title="Confirm" class="app-delete__monitors" [canClose]="!deleteStarted"
+        [disablePrevious]="deleteStarted" [destructiveStep]="!deleteStarted" [onNext]="startDelete"
+        [finishButtonText]="deleteStarted ? 'Close' : 'Delete'">
         <div class="app-delete__monitors">
-          <p>Please confirm that you would like to delete the following application<span *ngIf="(selectedRoutes && selectedRoutes.length) || (selectedServiceInstances && selectedServiceInstances.length) "> and related entities</span>:</p>
+          <p>Please confirm that you would like to delete the following application<span
+              *ngIf="(selectedRoutes && selectedRoutes.length) || (selectedServiceInstances && selectedServiceInstances.length) ">
+              and related entities</span>:</p>
           <h3>Application</h3>
-          <app-action-monitor [columns]="appDeleteColumns" [data$]="selectedApplication$" [entityKey]="applicationSchemaKey" [monitorState]="deletingState" [getId]="getId">
+          <app-action-monitor [columns]="appDeleteColumns" [data$]="selectedApplication$"
+            [entityKey]="applicationSchemaKey" [monitorState]="deletingState" [getId]="getId">
           </app-action-monitor>
           <ng-container *ngIf="selectedRoutes && selectedRoutes.length">
             <h3>Routes</h3>
-            <app-action-monitor [columns]="routeDeleteColumns" [data$]="selectedRoutes$" [entityKey]="routeSchemaKey" [monitorState]="deletingState" [getId]="getId">
+            <app-action-monitor [columns]="routeDeleteColumns" [data$]="selectedRoutes$" [entityKey]="routeSchemaKey"
+              [monitorState]="deletingState" [getId]="getId">
             </app-action-monitor>
           </ng-container>
           <ng-container *ngIf="selectedServiceInstances && selectedServiceInstances.length">
-            <h3>Services</h3>
-            <app-action-monitor [columns]="instanceDeleteColumns" [data$]="selectedServiceInstances$" [entityKey]="serviceInstancesSchemaKey" [monitorState]="deletingState" [getId]="getInstanceId"></app-action-monitor>
+            <ng-container *ngIf="(selectedServiceInstances$ | async).length">
+              <h3>Services</h3>
+              <app-action-monitor [columns]="instanceDeleteColumns" [data$]="selectedServiceInstances$"
+                [entityKey]="serviceInstancesSchemaKey" [monitorState]="deletingState" [getId]="getInstanceId">
+              </app-action-monitor>
+            </ng-container>
+            <ng-container *ngIf="(selectedUserServiceInstances$ | async).length">
+              <h3>User Provided Services</h3>
+              <app-action-monitor [columns]="instanceDeleteColumns" [data$]="selectedUserServiceInstances$"
+                [entityKey]="userProvidedServiceInstanceSchemaKey" [monitorState]="deletingState"
+                [getId]="getInstanceId"></app-action-monitor>
+            </ng-container>
           </ng-container>
         </div>
       </app-step>
     </app-steppers>
   </ng-container>
-</app-loading-page>
+</app-loading-page>

src/frontend/packages/core/src/features/applications/application-delete/application-delete.component.ts

@@ -4,6 +4,21 @@ import { Store } from '@ngrx/store';
 import { combineLatest, Observable, ReplaySubject } from 'rxjs';
 import { filter, first, map, pairwise, shareReplay, startWith, switchMap, tap } from 'rxjs/operators';
 
+import { GetAppRoutes } from '../../../../../store/src/actions/application-service-routes.actions';
+import { DeleteApplication, GetApplication } from '../../../../../store/src/actions/application.actions';
+import { DeleteRoute } from '../../../../../store/src/actions/route.actions';
+import { RouterNav } from '../../../../../store/src/actions/router.actions';
+import { DeleteServiceInstance } from '../../../../../store/src/actions/service-instances.actions';
+import { DeleteUserProvidedInstance } from '../../../../../store/src/actions/user-provided-service.actions';
+import { AppState } from '../../../../../store/src/app-state';
+import {
+  applicationSchemaKey,
+  entityFactory,
+  routeSchemaKey,
+  serviceInstancesSchemaKey,
+  userProvidedServiceInstanceSchemaKey,
+} from '../../../../../store/src/helpers/entity-factory';
+import { APIResource } from '../../../../../store/src/types/api.types';
 import { IServiceBinding } from '../../../core/cf-api-svc.types';
 import { IApp, IRoute } from '../../../core/cf-api.types';
 import {
@@ -14,12 +29,6 @@ import { ITableColumn } from '../../../shared/components/list/list-table/table.t
 import {
   CfAppRoutesListConfigService,
 } from '../../../shared/components/list/list-types/app-route/cf-app-routes-list-config.service';
-import {
-  TableCellRouteComponent,
-} from '../../../shared/components/list/list-types/cf-routes/table-cell-route/table-cell-route.component';
-import {
-  TableCellTCPRouteComponent,
-} from '../../../shared/components/list/list-types/cf-routes/table-cell-tcproute/table-cell-tcproute.component';
 import {
   AppServiceBindingDataSource,
 } from '../../../shared/components/list/list-types/app-sevice-bindings/app-service-binding-data-source';
@@ -32,24 +41,18 @@ import {
 import {
   TableCellAppStatusComponent,
 } from '../../../shared/components/list/list-types/app/table-cell-app-status/table-cell-app-status.component';
+import {
+  TableCellRouteComponent,
+} from '../../../shared/components/list/list-types/cf-routes/table-cell-route/table-cell-route.component';
+import {
+  TableCellTCPRouteComponent,
+} from '../../../shared/components/list/list-types/cf-routes/table-cell-tcproute/table-cell-tcproute.component';
 import { EntityMonitor } from '../../../shared/monitors/entity-monitor';
 import { EntityMonitorFactory } from '../../../shared/monitors/entity-monitor.factory.service';
 import { PaginationMonitor } from '../../../shared/monitors/pagination-monitor';
 import { PaginationMonitorFactory } from '../../../shared/monitors/pagination-monitor.factory';
+import { isServiceInstance, isUserProvidedServiceInstance } from '../../cloud-foundry/cf.helpers';
 import { ApplicationService } from '../application.service';
-import { GetApplication, DeleteApplication } from '../../../../../store/src/actions/application.actions';
-import { AppState } from '../../../../../store/src/app-state';
-import { RouterNav } from '../../../../../store/src/actions/router.actions';
-import { GetAppRoutes } from '../../../../../store/src/actions/application-service-routes.actions';
-import { DeleteRoute } from '../../../../../store/src/actions/route.actions';
-import { DeleteServiceInstance } from '../../../../../store/src/actions/service-instances.actions';
-import { APIResource } from '../../../../../store/src/types/api.types';
-import {
-  applicationSchemaKey,
-  entityFactory,
-  routeSchemaKey,
-  serviceInstancesSchemaKey,
-} from '../../../../../store/src/helpers/entity-factory';
 
 
 @Component({
@@ -77,7 +80,10 @@ export class ApplicationDeleteComponent<T> {
       columnId: 'service',
       headerCell: () => 'Service',
       cellDefinition: {
-        getValue: (row) => row.entity.service_instance.entity.service.entity.label
+        getValue: (row) => {
+          const si = isServiceInstance(row.entity.service_instance.entity);
+          return si ? si.service.entity.label : 'User Service';
+        }
       },
       cellFlex: '2'
     },
@@ -148,9 +154,11 @@ export class ApplicationDeleteComponent<T> {
   public selectedApplication$: Observable<APIResource<IApp>[]>;
   public selectedRoutes$ = new ReplaySubject<APIResource<IRoute>[]>(1);
   public selectedServiceInstances$ = new ReplaySubject<APIResource<IServiceBinding>[]>(1);
+  public selectedUserServiceInstances$ = new ReplaySubject<APIResource<IServiceBinding>[]>(1);
   public fetchingApplicationData$: Observable<boolean>;
 
   public serviceInstancesSchemaKey = serviceInstancesSchemaKey;
+  public userProvidedServiceInstanceSchemaKey = userProvidedServiceInstanceSchemaKey;
   public routeSchemaKey = routeSchemaKey;
   public applicationSchemaKey = applicationSchemaKey;
   public deletingState = AppMonitorComponentTypes.DELETE;
@@ -262,12 +270,21 @@ export class ApplicationDeleteComponent<T> {
     );
   }
 
-  private setSelectedServiceInstances(selected: APIResource<IServiceBinding>[]) {
+  public setSelectedServiceInstances(selected: APIResource<IServiceBinding>[]) {
     this.selectedServiceInstances = selected;
-    this.selectedServiceInstances$.next(selected);
+    const selectedServices = selected.reduce((res, binding) => {
+      if (isUserProvidedServiceInstance(binding.entity.service_instance.entity)) {
+        res.upsi.push(binding);
+      } else {
+        res.si.push(binding);
+      }
+      return res;
+    }, { si: [], upsi: [] });
+    this.selectedServiceInstances$.next(selectedServices.si);
+    this.selectedUserServiceInstances$.next(selectedServices.upsi);
   }
 
-  private setSelectedRoutes(selected: APIResource<IRoute>[]) {
+  public setSelectedRoutes(selected: APIResource<IRoute>[]) {
     this.selectedRoutes = selected;
     this.selectedRoutes$.next(selected);
   }
@@ -302,7 +319,11 @@ export class ApplicationDeleteComponent<T> {
           }
           if (this.selectedServiceInstances && this.selectedServiceInstances.length) {
             this.selectedServiceInstances.forEach(instance => {
-              this.store.dispatch(new DeleteServiceInstance(this.applicationService.cfGuid, instance.entity.service_instance_guid));
+              if (isUserProvidedServiceInstance(instance.entity.service_instance.entity)) {
+                this.store.dispatch(new DeleteUserProvidedInstance(this.applicationService.cfGuid, instance.entity.service_instance_guid));
+              } else {
+                this.store.dispatch(new DeleteServiceInstance(this.applicationService.cfGuid, instance.entity.service_instance_guid));
+              }
             });
           }
         }

src/frontend/packages/core/src/features/applications/application-delete/delete-app-instances/app-delete-instances-routes-list-config.service.ts

@@ -41,11 +41,12 @@ export class AppDeleteServiceInstancesListConfigService extends AppServiceBindin
     return action;
   }
 
-  constructor(store: Store<AppState>,
-              appService: ApplicationService,
-              datePipe: DatePipe,
-              currentUserPermissionService: CurrentUserPermissionsService,
-              private paginationMonitorFactory: PaginationMonitorFactory
+  constructor(
+    store: Store<AppState>,
+    appService: ApplicationService,
+    datePipe: DatePipe,
+    currentUserPermissionService: CurrentUserPermissionsService,
+    private paginationMonitorFactory: PaginationMonitorFactory
   ) {
     super(store, appService, datePipe, currentUserPermissionService);
 

src/frontend/packages/core/src/features/applications/application-wall/application-wall.component.ts

@@ -4,15 +4,14 @@ import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { AppState } from '../../../../../store/src/app-state';
+import { applicationSchemaKey } from '../../../../../store/src/helpers/entity-factory';
 import { CurrentUserPermissions } from '../../../core/current-user-permissions.config';
-import { CardAppComponent } from '../../../shared/components/list/list-types/app/card/card-app.component';
 import { CfAppConfigService } from '../../../shared/components/list/list-types/app/cf-app-config.service';
 import { CfAppsDataSource } from '../../../shared/components/list/list-types/app/cf-apps-data-source';
 import { ListConfig } from '../../../shared/components/list/list.component.types';
 import { CfOrgSpaceDataService, initCfOrgSpaceService } from '../../../shared/data-services/cf-org-space-service.service';
 import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
-import { AppState } from '../../../../../store/src/app-state';
-import { applicationSchemaKey } from '../../../../../store/src/helpers/entity-factory';
 
 @Component({
   selector: 'app-application-wall',
@@ -66,8 +65,6 @@ export class ApplicationWallComponent implements OnDestroy {
       CfAppsDataSource.paginationKey).subscribe();
   }
 
-  cardComponent = CardAppComponent;
-
   ngOnDestroy(): void {
     this.initCfOrgSpaceService.unsubscribe();
   }