task/WG-259: use tapisv3 for systems listing and file listings (#214)

* Add tapis-typescript

* Add lock

* Use tapisv3 for files and systems listing

* Removed unused import

* Fix pretty mistakes and todo comments

* Use size of v3 response instead of length

* Add system to file response

* Fix back entry in file listing

* Changing file length to file size to resolve error

---------

Co-authored-by: Taylor Grafft <tgrafft@TACCs-MacBook-Pro.local>

angular/package.json

@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "~8.2.5",
     "@angular/router": "~8.2.5",
     "@bagage/leaflet.vectorgrid": "2.0.0",
+    "@tapis/tapis-typescript": "0.0.25",
     "@turf/turf": "^5.1.6",
     "@types/chai": "4.2",
     "@types/esri-leaflet": "^2.1.9",

angular/src/app/app.interceptors.ts

@@ -18,7 +18,10 @@ export class JwtInterceptor implements HttpInterceptor {
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     // TODO_TAPISV3 put the tapis url in envService
-    const isTargetUrl = request.url.includes('https://designsafe.tapis.io') || request.url.includes(this.envService.apiUrl);
+    const isTargetUrl =
+      request.url.includes(this.envService.tapisUrl) ||
+      request.url.includes(this.envService.apiUrl) ||
+      request.url.includes(this.envService.designSafeUrl);
     if (isTargetUrl && this.authSvc.isLoggedIn()) {
       // add tapis token to Geoapi or Tapis requests
       request = request.clone({

angular/src/app/components/file-browser/file-browser.component.html

@@ -36,7 +36,7 @@ <h4 *ngIf="heading">{{ heading }}</h4>
             <span> {{ file.name }} </span>
         </div>
         <div class="cell medium-3">
-            {{ file.length | filesize }}
+            {{ file.size | filesize }}
         </div>
     </div>
     <div class="grid-x" *ngIf="inProgress">

angular/src/app/components/file-browser/file-browser.component.ts

@@ -6,7 +6,6 @@ import { SystemSummary } from 'ng-tapis';
 import { TapisFilesService } from '../../services/tapis-files.service';
 import { BsModalRef } from 'ngx-foundation/modal/bs-modal-ref.service';
 import { AgaveSystemsService } from '../../services/agave-systems.service';
-import { max, take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-file-browser',
@@ -53,13 +52,10 @@ export class FileBrowserComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.agaveSystemsService.list();
-
-    // TODO: change those hard coded systemIds to environment vars or some sort of config
     // wait on the currentUser, systems and projects to resolve
     combineLatest([this.authService.currentUser, this.agaveSystemsService.systems, this.agaveSystemsService.projects]).subscribe(
       ([user, systems, projects]) => {
-        this.myDataSystem = systems.find((sys) => sys.id === 'designsafe.storage.default');
+        this.myDataSystem = systems.find((sys) => sys.id === 'frontera'); // TODO_TAPISV3 use designsafe.storage.default.
         this.communityDataSystem = systems.find((sys) => sys.id === 'designsafe.storage.community');
         this.publishedDataSystem = systems.find((sys) => sys.id === 'designsafe.storage.published');
         this.projects = projects;
@@ -69,8 +65,11 @@ export class FileBrowserComponent implements OnInit {
         const init = <RemoteFile>{
           system: this.myDataSystem.id,
           type: 'dir',
-          path: this.currentUser.username,
+          // path: this.currentUser.username,      // TODO_TAPISV3
+          path: `/home1/05724/nathanf/`,
         };
+
+        // TODO_TAPISV3 is this being called 3 times??
         this.browse(init);
       }
     );
@@ -114,17 +113,25 @@ export class FileBrowserComponent implements OnInit {
       .listFiles(this.currentDirectory.system, this.currentDirectory.path, this.offset, FileBrowserComponent.limit)
       .subscribe(
         (response) => {
-          const files = response.result;
-
-          if (files.length && files[0].name === '.') {
-            // This removes the first item in the listing, which in Agave
-            // is always a reference to self '.' and replaces with '..'
-            const current = files.shift();
-            this.currentPath.next(current.path);
-            current.path = this.tapisFilesService.getParentPath(current.path);
-            current.name = '..';
-            files.unshift(current);
-          }
+          // Add 'system' to results to match v2
+          const files = response.result.map((f) => ({
+            ...f,
+            system: this.currentDirectory.system,
+          }));
+
+          this.currentPath.next(this.currentDirectory.path);
+
+          // Add '..' entry for users to move to parent path
+          const backPath = {
+            name: '..',
+            format: 'folder',
+            type: 'dir',
+            mimeType: 'test/directory',
+            size: 8192,
+            path: this.tapisFilesService.getParentPath(this.currentDirectory.path),
+            system: this.currentDirectory.system,
+          };
+          files.unshift(backPath);
 
           this.inProgress = false;
           this.filesList = this.filesList.concat(files);

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

@@ -6,7 +6,7 @@ import { BehaviorSubject, Observable, ReplaySubject, combineLatest } from 'rxjs'
 import { map } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { EnvService } from '../services/env.service';
-import { DesignSafeProjectCollection, Project } from '../models/models';
+import { Project } from '../models/models';
 
 export interface AgaveProjectsData {
   projects: SystemSummary[];
@@ -30,7 +30,7 @@ export class AgaveSystemsService {
   public readonly projectsData: Observable<AgaveProjectsData>;
 
   constructor(
-    private tapis: ApiService,
+    private tapisV2: ApiService,
     private notificationsService: NotificationsService,
     private envService: EnvService,
     private http: HttpClient
@@ -45,7 +45,7 @@ export class AgaveSystemsService {
   }
 
   list() {
-    this.tapis.systemsList({ type: 'STORAGE' }).subscribe(
+    this.http.get<any>(this.envService.tapisUrl + `v3/systems/?listType=ALL`).subscribe(
       (resp) => {
         this._systems.next(resp.result);
       },

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

@@ -53,7 +53,7 @@ export class AuthService {
     const callback = location.origin + this.envService.baseHref + 'callback';
     const state = Math.random().toString(36);
     // tslint:disable-next-line:max-line-length
-    const AUTH_URL_V3 = `https://designsafe.tapis.io/v3/oauth2/authorize?client_id=${client_id}&response_type=token&redirect_uri=${callback}`;
+    const AUTH_URL_V3 = `${this.envService.tapisUrl}/v3/oauth2/authorize?client_id=${client_id}&response_type=token&redirect_uri=${callback}`;
 
     window.location.href = AUTH_URL_V3;
   }

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

@@ -27,6 +27,10 @@ export class EnvService {
     }
   }
 
+  get tapisUrl(): string {
+    return 'https://portals.tapis.io/'; // TODO_TAPISV3 'https://designsafe.tapis.io/`
+  }
+
   private getPortalUrl(backend: EnvironmentType): string {
     if (backend === EnvironmentType.Production) {
       return 'https://www.designsafe-ci.org/';
@@ -64,7 +68,7 @@ export class EnvService {
   }
 
   get designSafeUrl(): string {
-    // TODO_TAPISV3  just used for projects endpoint so shoud this be deisngsafe portal and not tapis tenant.
+    // TODO_TAPISV3  just used for projects endpoint so shoud this be designsafe portal and not tapis tenant.
     return 'https://designsafe.tapis.io/';
   }
 
@@ -134,7 +138,8 @@ export class EnvService {
       // local devevelopers can use localhost or hazmapper.local but
       // hazmapper.local is preferred as TAPIS supports it as a frame ancestor
       // (i.e. it allows for point cloud iframe preview)
-      this._clientId = /^localhost/.test(hostname) ? 'hazmapper.localhost2' : 'TODO_FOR_hazmapper.local';
+      // TODO_TAPISV3: use hazmapper.localhost2 on designsafe tenant
+      this._clientId = /^localhost/.test(hostname) ? 'hazmapper.localhost' : 'TODO_FOR_hazmapper.local';
     } else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/staging')) {
       this._env = EnvironmentType.Staging;
       this._apiUrl = this.getApiUrl(this.env);

angular/src/app/services/tapis-files.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
+import { EnvService } from '../services/env.service';
 import { ApiService, RemoteFile } from 'ng-tapis';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root',
@@ -11,19 +13,14 @@ export class TapisFilesService {
   public readonly IMPORTABLE_OVERLAY_TYPES: Array<string> = ['jpg', 'jpeg'];
   public readonly IMPORTABLE_TILE_TYPES: Array<string> = ['ini'];
 
-  constructor(private tapis: ApiService) {}
+  constructor(private tapis: ApiService, private envService: EnvService, private http: HttpClient) {}
 
   public getFileExtension(file: RemoteFile): string {
     return file.name.split('.').pop().toLowerCase();
   }
 
   listFiles(system: string, path: string, offset: number, limit: number) {
-    return this.tapis.filesList({
-      systemId: system,
-      filePath: path,
-      offset,
-      limit,
-    });
+    return this.http.get<any>(this.envService.tapisUrl + `v3/files/ops/${system}/${path}?offset=${offset}&limit=${limit}`);
   }
 
   public getParentPath(path: string): string {