Show refresh button for latest modified application lists

src/frontend/app/features/cloud-foundry/services/cloud-foundry-endpoint.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, of as observableOf } from 'rxjs';
-import { filter, first, map, publishReplay, refCount, switchMap, tap } from 'rxjs/operators';
+import { filter, first, map, publishReplay, refCount, switchMap } from 'rxjs/operators';
 
 import { IApp, ICfV2Info, IOrganization, ISpace } from '../../../core/cf-api.types';
 import { EntityService } from '../../../core/entity-service';
@@ -15,7 +15,6 @@ import { GetAllEndpoints } from '../../../store/actions/endpoint.actions';
 import { DeleteOrganization, GetAllOrganizations } from '../../../store/actions/organization.actions';
 import { AppState } from '../../../store/app-state';
 import {
-  applicationSchemaKey,
   cfInfoSchemaKey,
   domainSchemaKey,
   endpointSchemaKey,
@@ -59,6 +58,7 @@ export class CloudFoundryEndpointService {
   paginationSubscription: any;
   allApps$: Observable<APIResource<IApp>[]>;
   hasAllApps$: Observable<boolean>;
+  loadingApps$: Observable<boolean>;
   totalApps$: Observable<number>;
   users$: Observable<APIResource<CfUser>[]>;
   orgs$: Observable<APIResource<IOrganization>[]>;
@@ -72,6 +72,8 @@ export class CloudFoundryEndpointService {
 
   getAllOrgsAction: GetAllOrganizations;
 
+  private getAllAppsAction: GetAllApplications;
+
   static createGetAllOrganizations(cfGuid: string) {
     const paginationKey = cfGuid ?
       createEntityRelationPaginationKey(endpointSchemaKey, cfGuid)
@@ -109,6 +111,7 @@ export class CloudFoundryEndpointService {
   ) {
     this.cfGuid = activeRouteCfOrgSpace.cfGuid;
     this.getAllOrgsAction = CloudFoundryEndpointService.createGetAllOrganizations(this.cfGuid);
+    this.getAllAppsAction = new GetAllApplications(createEntityRelationPaginationKey('cf', this.cfGuid), this.cfGuid);
 
     this.cfEndpointEntityService = this.entityServiceFactory.create(
       endpointSchemaKey,
@@ -152,12 +155,11 @@ export class CloudFoundryEndpointService {
   }
 
   constructAppObservables() {
-    const action = new GetAllApplications(createEntityRelationPaginationKey('cf', this.cfGuid), this.cfGuid);
 
     const pagObs = getPaginationObservables<APIResource<IApp>>({
       store: this.store,
-      action,
-      paginationMonitor: this.pmf.create(action.paginationKey, entityFactory(action.entityKey))
+      action: this.getAllAppsAction,
+      paginationMonitor: this.pmf.create(this.getAllAppsAction.paginationKey, entityFactory(this.getAllAppsAction.entityKey))
     });
 
     this.allApps$ = pagObs.entities$.pipe(// Ensure we sub to entities to kick off fetch process
@@ -166,6 +168,12 @@ export class CloudFoundryEndpointService {
       switchMap(pagination => pagination.maxedResults ? observableOf(null) : pagObs.entities$)
     );
 
+    this.loadingApps$ = pagObs.entities$.pipe(// Ensure we sub to entities to kick off fetch process
+      switchMap(() => pagObs.pagination$),
+      filter(pagination => !!pagination && !!pagination.pageRequests && !!pagination.pageRequests[pagination.currentPage]),
+      map(pagination => pagination.pageRequests[pagination.currentPage].busy)
+    );
+
     this.hasAllApps$ = this.allApps$.pipe(
       map((allApps: APIResource<IApp>[]) => !!allApps)
     );
@@ -252,4 +260,8 @@ export class CloudFoundryEndpointService {
   deleteOrg(orgGuid: string, endpointGuid: string) {
     this.store.dispatch(new DeleteOrganization(orgGuid, endpointGuid));
   }
+
+  fetchApps() {
+    this.store.dispatch(this.getAllAppsAction);
+  }
 }

src/frontend/app/features/cloud-foundry/services/cloud-foundry-organization.service.ts

@@ -3,7 +3,7 @@ import { Http } from '@angular/http';
 import { Route } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import { filter, map, publishReplay, refCount, switchMap } from 'rxjs/operators';
+import { filter, map, publishReplay, refCount, switchMap, startWith } from 'rxjs/operators';
 
 import { IServiceInstance } from '../../../core/cf-api-svc.types';
 import { IApp, IOrganization, IPrivateDomain, IQuotaDefinition, ISpace } from '../../../core/cf-api.types';
@@ -51,6 +51,7 @@ export class CloudFoundryOrganizationService {
   appInstances$: Observable<number>;
   apps$: Observable<APIResource<IApp>[]>;
   appCount$: Observable<number>;
+  loadingApps$: Observable<boolean>;
   org$: Observable<EntityInfo<APIResource<IOrganization>>>;
   allOrgUsers$: Observable<APIResource<CfUser>[]>;
   usersPaginationKey: string;
@@ -75,6 +76,10 @@ export class CloudFoundryOrganizationService {
     this.store.dispatch(new DeleteSpace(spaceGuid, orgGuid, endpointGuid));
   }
 
+  public fetchApps() {
+    this.cfEndpointService.fetchApps();
+  }
+
   private initialiseObservables() {
     this.org$ = this.cfUserService.isConnectedUserAdmin(this.cfGuid).pipe(
       switchMap(isAdmin => {
@@ -141,6 +146,8 @@ export class CloudFoundryOrganizationService {
     this.appCount$ = this.cfEndpointService.hasAllApps$.pipe(
       switchMap(hasAllApps => hasAllApps ? this.countExistingApps() : this.fetchAppCount()),
     );
+
+    this.loadingApps$ = this.cfEndpointService.loadingApps$;
   }
 
   private countExistingApps(): Observable<number> {

src/frontend/app/features/cloud-foundry/services/cloud-foundry-space.service.ts

@@ -62,6 +62,7 @@ export class CloudFoundrySpaceService {
   appInstances$: Observable<number>;
   apps$: Observable<APIResource<IApp>[]>;
   appCount$: Observable<number>;
+  loadingApps$: Observable<boolean>;
   space$: Observable<EntityInfo<APIResource<ISpace>>>;
   allSpaceUsers$: Observable<APIResource<CfUser>[]>;
   usersPaginationKey: string;
@@ -84,6 +85,10 @@ export class CloudFoundrySpaceService {
     this.initialiseObservables();
   }
 
+  public fetchApps() {
+    this.cfEndpointService.fetchApps();
+  }
+
   private initialiseObservables() {
     this.initialiseSpaceObservables();
     this.initialiseAppObservables();
@@ -172,10 +177,11 @@ export class CloudFoundrySpaceService {
       map(a => this.cfEndpointService.getMetricFromApps(a, 'memory'))
     );
 
-
     this.appCount$ = this.cfEndpointService.hasAllApps$.pipe(
       switchMap(hasAllApps => hasAllApps ? this.countExistingApps() : this.fetchAppCount()),
     );
+
+    this.loadingApps$ = this.cfEndpointService.loadingApps$;
   }
 
   private countExistingApps(): Observable<number> {

src/frontend/app/features/cloud-foundry/tabs/cloud-foundry-organizations/cloud-foundry-organization-spaces/tabs/cloud-foundry-space-summary/cloud-foundry-space-summary.component.html

@@ -33,7 +33,7 @@
 
       <app-tile-group>
         <app-tile>
-          <app-card-cf-recent-apps [allApps$]="cfSpaceService.apps$"></app-card-cf-recent-apps>
+          <app-card-cf-recent-apps [allApps$]="cfSpaceService.apps$" [loading$]="cfSpaceService.loadingApps$" (refresh)="cfSpaceService.fetchApps()"></app-card-cf-recent-apps>
         </app-tile>
       </app-tile-group>
     </app-loading-page>

src/frontend/app/features/cloud-foundry/tabs/cloud-foundry-organizations/cloud-foundry-organization-summary/cloud-foundry-organization-summary.component.html

@@ -38,7 +38,7 @@
 
       <app-tile-group>
         <app-tile>
-          <app-card-cf-recent-apps [allApps$]="cfOrgService.apps$"></app-card-cf-recent-apps>
+          <app-card-cf-recent-apps [allApps$]="cfOrgService.apps$" [loading$]="cfOrgService.loadingApps$" (refresh)="cfOrgService.fetchApps()"></app-card-cf-recent-apps>
         </app-tile>
       </app-tile-group>
     </app-loading-page>

src/frontend/app/features/cloud-foundry/tabs/cloud-foundry-summary-tab/cloud-foundry-summary-tab.component.html

@@ -22,7 +22,7 @@
       </app-tile-group>
       <app-tile-group>
         <app-tile>
-          <app-card-cf-recent-apps [allApps$]="cfEndpointService.allApps$"></app-card-cf-recent-apps>
+          <app-card-cf-recent-apps [allApps$]="cfEndpointService.allApps$" [loading$]="cfEndpointService.loadingApps$" (refresh)="cfEndpointService.fetchApps()"></app-card-cf-recent-apps>
         </app-tile>
       </app-tile-group>
     </app-loading-page>

src/frontend/app/shared/components/cards/card-cf-recent-apps/card-cf-recent-apps.component.html

@@ -2,7 +2,9 @@
   <mat-card class="recent-apps-card">
     <mat-card-header class="recent-apps-card__header">
       <mat-card-title>Recently updated applications</mat-card-title>
-      <app-stateful-icon *ngIf="!(apps$ | async)" [state]="'busy'"></app-stateful-icon>
+      <button mat-icon-button [disabled]="loading$ | async" (click)="refresh.emit()">
+        <mat-icon class="refresh-icon" [ngClass]="{refreshing: (loading$ | async)}" aria-label="Refresh list data">refresh</mat-icon>
+      </button>
     </mat-card-header>
     <mat-card-content class="recent-apps-card__content" *ngIf="apps$ | async as apps">
       <div *ngIf="apps.length === 0">

src/frontend/app/shared/components/cards/card-cf-recent-apps/card-cf-recent-apps.component.scss

@@ -3,19 +3,44 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  app-stateful-icon {
-    padding-left: 12px;
-  }
+
   &__content {
     display: flex;
     overflow-y: auto;
   }
+
   &__header {
-    flex: 0 0 auto;
+    display: flex;
+    flex: 1;
+    height: 40px;
+    justify-content: space-between;
+    padding-top: 0;
+
+    mat-card-title {
+      margin-bottom: 0;
+    }
+
+    .refresh-icon {
+      animation: spin .4s infinite linear;
+      animation-play-state: paused;
+      transform: rotate(0deg);
+      transition: transform 1s linear;
+    }
+
+    .refreshing {
+      animation-play-state: running;
+    }
+
+    button {
+      margin-top: -10px;
+      margin-right: -10px;
+    }
   }
+
   &__scroller {
     height: 100%;
     overflow-y: auto;
     width: 100%;
   }
+
 }

src/frontend/app/shared/components/cards/card-cf-recent-apps/card-cf-recent-apps.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
@@ -22,6 +22,8 @@ const RECENT_ITEMS_COUNT = 10;
 export class CardCfRecentAppsComponent implements OnInit {
 
   @Input() allApps$: Observable<APIResource<IApp>[]>;
+  @Input() loading$: Observable<boolean>;
+  @Output() refresh = new EventEmitter<any>();
 
   constructor(
     private store: Store<AppState>,