Task/wg 145 fix spinner error on project listing page

angular/src/app/components/main-welcome/main-welcome.component.html

@@ -24,7 +24,7 @@
                     </div>
                 </div>
 
-                <div *ngIf="spinner; else projectLoaded">
+                <div *ngIf="loading; else projectLoaded">
                     <div id="welcome-no-information">
                         <div>
                             Loading Projects
@@ -34,15 +34,21 @@
                 </div>
 
                 <ng-template #projectLoaded>
-                    <div *ngIf="notConnected; else projectConnected">
+                    <div *ngIf="projectsData.failedMessage || dsProjectsData.failedMessage; else projectConnected">
                         <div id="welcome-no-information">
                             <div>Failed to Connect to Server!</div>
+                            <div *ngIf="projectsData.failedMessage">
+                                <small>Unable to get maps: {{ projectsData.failedMessage }}</small>
+                            </div>
+                            <div *ngIf="dsProjectsData.failedMessage">
+                                <small>Unable to get projects: {{ dsProjectsData.failedMessage }}</small>
+                            </div>
                         </div>
                     </div>
 
                     <ng-template #projectConnected>
-                        <div *ngIf="projects.length > 0; else noProject" class="project-list-container">
-                            <div *ngFor="let p of projects; let indexOfElement = index">
+                        <div *ngIf="projectsData.projects.length > 0; else noProject" class="project-list-container">
+                            <div *ngFor="let p of projectsData.projects; let indexOfElement = index">
                                 <div
                                     (click)="routeToProject(p.uuid)"
                                     class="project-list-item"

angular/src/app/components/main-welcome/main-welcome.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../models/models';
 import { Streetview } from '../../models/streetview';
-import { ProjectsService } from '../../services/projects.service';
+import { ProjectsService, ProjectsData } from '../../services/projects.service';
 import { BsModalRef, BsModalService } from 'ngx-foundation';
-import { AgaveSystemsService } from '../../services/agave-systems.service';
+import { AgaveSystemsService, AgaveProjectsData } from '../../services/agave-systems.service';
 import { ModalCreateProjectComponent } from '../modal-create-project/modal-create-project.component';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ModalService } from 'src/app/services/modal.service';
@@ -21,11 +21,9 @@ export class MainWelcomeComponent implements OnInit {
   release_url = 'https://github.com/TACC-cloud/hazmapper';
   guide_url = 'https://www.designsafe-ci.org/rw/user-guides/tools-applications/visualization/hazmapper/';
 
-  spinner = true;
-  notConnected: boolean;
-
-  public projects = [];
-  public activeProject: Project;
+  private projectsData: ProjectsData;
+  private dsProjectsData: AgaveProjectsData;
+  private loading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -48,14 +46,19 @@ export class MainWelcomeComponent implements OnInit {
       }
     });
 
-    this.projectsService.loadingProjectsFailed.subscribe((notConnected) => {
-      this.notConnected = notConnected;
-    });
-
-    combineLatest([this.projectsService.projects, this.agaveSystemsService.projects]).subscribe(([projects, dsProjects]) => {
-      this.projects = this.agaveSystemsService.getProjectMetadata(projects, dsProjects);
-      this.spinner = false;
-    });
+    combineLatest([this.projectsService.projectsData, this.agaveSystemsService.projectsData]).subscribe(
+      ([projectsData, dsProjectsData]) => {
+        this.projectsData = projectsData;
+        this.dsProjectsData = dsProjectsData;
+        if (!this.projectsData.loading && !this.dsProjectsData.loading) {
+          if (this.projectsData.failedMessage && !this.dsProjectsData.failedMessage) {
+            // add extra info (i.e. DS project id/description) from related DS projects
+            this.projectsData.projects = this.agaveSystemsService.getProjectMetadata(projectsData.projects, dsProjectsData.projects);
+          }
+          this.loading = false;
+        }
+      }
+    );
   }
 
   routeToProject(projectUUID: string) {

angular/src/app/services/agave-systems.service.ts

@@ -2,25 +2,47 @@ import { Injectable } from '@angular/core';
 import { System, SystemSummary } from 'ng-tapis';
 import { ApiService } from 'ng-tapis';
 import { NotificationsService } from './notifications.service';
-import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Observable, ReplaySubject, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { EnvService } from '../services/env.service';
 import { DesignSafeProjectCollection, Project, AgaveFileOperations } from '../models/models';
 
+export interface AgaveProjectsData {
+  projects: SystemSummary[];
+  failedMessage: string | null;
+  loading: boolean;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class AgaveSystemsService {
   private _systems: ReplaySubject<SystemSummary[]> = new ReplaySubject<SystemSummary[]>(1);
   public readonly systems: Observable<SystemSummary[]> = this._systems.asObservable();
+
   private _projects: ReplaySubject<SystemSummary[]> = new ReplaySubject<SystemSummary[]>(1);
   public readonly projects: Observable<SystemSummary[]> = this._projects.asObservable();
+  private _loadingProjects: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  public loadingProjects: Observable<boolean> = this._loadingProjects.asObservable();
+  private _loadingProjectsFailedMessage: BehaviorSubject<string> = new BehaviorSubject('');
+  public loadingProjectsFailedMessage: Observable<string> = this._loadingProjectsFailedMessage.asObservable();
+  public readonly projectsData: Observable<AgaveProjectsData>;
+
   constructor(
     private tapis: ApiService,
     private notificationsService: NotificationsService,
     private envService: EnvService,
     private http: HttpClient
-  ) {}
+  ) {
+    this.projectsData = combineLatest([this.projects, this.loadingProjectsFailedMessage, this.loadingProjects]).pipe(
+      map(([projects, failedMessage, loading]) => ({
+        projects,
+        failedMessage,
+        loading,
+      }))
+    );
+  }
 
   list() {
     this.tapis.systemsList({ type: 'STORAGE' }).subscribe(
@@ -31,6 +53,11 @@ export class AgaveSystemsService {
         this._systems.next(null);
       }
     );
+
+    this._projects.next(null);
+    this._loadingProjects.next(true);
+    this._loadingProjectsFailedMessage.next(null);
+
     this.http.get<DesignSafeProjectCollection>(this.envService.designSafeUrl + `/projects/v2/`).subscribe(
       (resp) => {
         const projectSystems = resp.projects.map((project) => {
@@ -41,9 +68,12 @@ export class AgaveSystemsService {
           };
         });
         this._projects.next(projectSystems);
+        this._loadingProjects.next(false);
       },
       (error) => {
         this._projects.next(null);
+        this._loadingProjectsFailedMessage.next(error.message || 'An error occured.');
+        this._loadingProjects.next(false);
       }
     );
   }

angular/src/app/services/projects.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Observable, ReplaySubject, combineLatest } from 'rxjs';
 import { DesignSafeProjectCollection, Project, ProjectRequest, AgaveFileOperations } from '../models/models';
 import { RapidProjectRequest } from '../models/rapid-project-request';
 import { IpanelsDisplay, defaultPanelsDisplay } from '../models/ui';
@@ -14,6 +14,12 @@ import { MAIN, LOGIN } from '../constants/routes';
 import { AgaveSystemsService } from '../services/agave-systems.service';
 import { Router } from '@angular/router';
 
+export interface ProjectsData {
+  projects: Project[];
+  failedMessage: string | null;
+  loading: boolean;
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -29,8 +35,13 @@ export class ProjectsService {
   private _currentProjectUser: BehaviorSubject<IProjectUser> = new BehaviorSubject<IProjectUser>(null);
   public readonly currentProjectUser: Observable<IProjectUser> = this._currentProjectUser.asObservable();
 
-  private _loadingProjectsFailed: BehaviorSubject<boolean> = new BehaviorSubject(false);
-  public loadingProjectsFailed: Observable<boolean> = this._loadingProjectsFailed.asObservable();
+  private _loadingProjects: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  public loadingProjects: Observable<boolean> = this._loadingProjects.asObservable();
+
+  private _loadingProjectsFailedMessage: BehaviorSubject<string> = new BehaviorSubject('');
+  public loadingProjectsFailedMessage: Observable<string> = this._loadingProjectsFailedMessage.asObservable();
+
+  public readonly projectsData: Observable<ProjectsData>;
 
   private _loadingActiveProject: BehaviorSubject<boolean> = new BehaviorSubject(true);
   public loadingActiveProject: Observable<boolean> = this._loadingActiveProject.asObservable();
@@ -52,7 +63,15 @@ export class ProjectsService {
     private router: Router,
     private authService: AuthService,
     private envService: EnvService
-  ) {}
+  ) {
+    this.projectsData = combineLatest([this.projects, this.loadingProjectsFailedMessage, this.loadingProjects]).pipe(
+      map(([projects, failedMessage, loading]) => ({
+        projects,
+        failedMessage,
+        loading,
+      }))
+    );
+  }
 
   public getLastProjectKeyword() {
     return `${this.envService.env}LastProject`;
@@ -72,15 +91,17 @@ export class ProjectsService {
   }
 
   getProjects(): void {
-    this._loadingProjectsFailed.next(false);
+    this._loadingProjects.next(true);
+    this._loadingProjectsFailedMessage.next(null);
     this.http.get<Project[]>(this.envService.apiUrl + `/projects/`).subscribe(
       (resp) => {
         this.updateProjectsList(resp);
-        this._loadingProjectsFailed.next(false);
+        this._loadingProjects.next(false);
+        this._loadingProjectsFailedMessage.next(null);
       },
       (error) => {
-        this._loadingProjectsFailed.next(true);
-        this.notificationsService.showErrorToast('Failed to retrieve project data! Geoapi might be down.');
+        this._loadingProjects.next(false);
+        this._loadingProjectsFailedMessage.next(error.message || 'An error occured.');
       }
     );
   }