Merge pull request #190 from Vafilor/feat/onepanelio.core.595-expande.node.details

feat: increase node info size and support multiple artifact file browsers

Author: rushtehrani

.github/workflows/push_tag.yaml

@@ -25,7 +25,7 @@ jobs:
       - name: Notify Slack Channels
         uses: rtCamp/[email protected]
         env:
-          SLACK_CHANNEL: dev
+          SLACK_CHANNEL: org
           SLACK_ICON: https://avatars1.githubusercontent.com/u/30390575?s=48&v=4
           SLACK_TITLE: New Core-UI Version
           SLACK_USERNAME: opBot

src/app/app.component.html

@@ -1,7 +1,6 @@
 <app-navbar
   *ngIf="!loggingIn && showNavigationBar"
   [activeUrl]="activeUrl"
-  [servicesVisible]="servicesVisible"
   (logout)="logout()"
   (namespaceClick)="onFormFieldClick()">
 </app-navbar>

src/app/app.component.ts

@@ -30,7 +30,6 @@ export class AppComponent implements OnInit {
     version = '1.0.0';
     showNamespaceManager = false;
     showNavigationBar = true;
-    servicesVisible?: boolean = undefined;
 
     constructor(public namespaceTracker: NamespaceTracker,
                 private appRouter: AppRouter,
@@ -39,16 +38,14 @@ export class AppComponent implements OnInit {
                 private activatedRoute: ActivatedRoute,
                 private router: Router,
                 private dialog: MatDialog,
-                private snackbar: MatSnackBar,
-                private servicesService: ServiceServiceService) {
+                private snackbar: MatSnackBar) {
         this.version = environment.version;
 
         this.namespaceTracker.namespacesChanged.subscribe(() => {
             const namespace = this.activatedRoute.snapshot.firstChild.paramMap.get('namespace');
 
             if (namespace) {
                 this.namespaceTracker.activeNamespace = namespace;
-                this.getServicesVisible(namespace);
             }
         });
 
@@ -117,37 +114,4 @@ export class AppComponent implements OnInit {
     onRouterOutletActivate(data) {
         this.showNavigationBar = !data.hideNavigationBar;
     }
-
-    /**
-     * Sets the servicesVisible variable to the input value.
-     * Further stores it in local storage.
-     */
-    private setServicesVisible(visible: boolean) {
-        this.servicesVisible = visible;
-        localStorage.setItem('services-visible', JSON.stringify(visible));
-    }
-
-    /**
-     * Sets the servicesVisible variable.
-     *
-     * If it is already set, use that.
-     * If we have it stored in local storage, use that.
-     * Otherwise, make a network request to check.
-     *
-     */
-    private getServicesVisible(namespace: string) {
-        if (this.servicesVisible !== undefined) {
-            return;
-        }
-
-        const localStorageValue = localStorage.getItem('services-visible');
-        if (localStorageValue !== null) {
-            this.servicesVisible = JSON.parse(localStorageValue);
-            return;
-        }
-
-        this.servicesService.listServices(namespace).subscribe(res => {
-            this.setServicesVisible(res.count !== undefined);
-        });
-    }
 }

src/app/auth/auth.guard.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
-import { AuthService } from "./auth.service";
+import { AuthService } from './auth.service';
 
 @Injectable({
   providedIn: 'root'
@@ -11,7 +11,7 @@ export class AuthGuard implements CanActivate {
   canActivate(
       next: ActivatedRouteSnapshot,
       state: RouterStateSnapshot): boolean {
-    let url: string = state.url;
+    const url: string = state.url;
 
     return this.checkLogin(url);
   }

src/app/files/file-browser/file-browser.component.html

@@ -1,10 +1,10 @@
 <div class="op-border hide-overflow">
-    <div class="bg-light-gray toolbar font-roboto font-size-regular">
-        <span class="font-weight-bold">Location: </span>
-        <span (click)="goToRoot()" class="pointer-hover">
+    <div class="bg-light-gray toolbar d-flex flex-wrap align-items-baseline font-roboto font-size-small">
+        <div class="font-weight-bold lh-36">Location: </div>
+        <div (click)="goToRoot()" class="pointer-hover ml-1">
             <span [class.active-link]="pathParts.length != 0">{{rootName}}</span>
             <span *ngIf="pathParts.length > 0" class="path-separator">/</span>
-        </span>
+        </div>
         <app-breadcrumbs [parts]="pathParts" (breadcrumbClick)="onBreadcrumbClicked($event)"></app-breadcrumbs>
         <mat-spinner *ngIf="loading"
                 color="primary"
@@ -24,7 +24,7 @@
             <span class="font-weight-bold ml-1">{{fileNavigator.file.value.name}}</span>
             <span class="ml-2">{{fileNavigator.file.value.size | fileSize}}</span>
         </div>
-        <div class="pointer-hover" (click)="onFileDownload(fileNavigator.file.value)">
+        <div *ngIf="canDownload(fileNavigator.file.value)" class="pointer-hover" (click)="onFileDownload(fileNavigator.file.value)">
             <i class="fas fa-download"></i> Download
         </div>
     </div>

src/app/files/file-browser/file-browser.component.scss

@@ -3,6 +3,9 @@
 .toolbar {
   padding: 5px 20px;
   min-height: 36px;
+}
+
+.lh-36 {
   line-height: 36px;
 }
 

src/app/files/file-browser/file-browser.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FileNavigator, LongRunningTaskState, SlowValueUpdate } from "../fileNavigator";
-import { BreadcrumbEvent } from "../../breadcrumbs/breadcrumbs.component";
-import { FileActionEvent } from "../file-navigator/file-navigator.component";
-import { ModelFile, WorkflowServiceService } from "../../../api";
+import { FileNavigator, LongRunningTaskState, SlowValueUpdate } from '../fileNavigator';
+import { BreadcrumbEvent } from '../../breadcrumbs/breadcrumbs.component';
+import { FileActionEvent } from '../file-navigator/file-navigator.component';
+import { ModelFile, WorkflowServiceService } from '../../../api';
+import { GenericFileViewComponent } from '../file-viewer/generic-file-view/generic-file-view.component';
 
 @Component({
   selector: 'app-file-browser',
@@ -12,47 +13,49 @@ import { ModelFile, WorkflowServiceService } from "../../../api";
 export class FileBrowserComponent implements OnInit, OnDestroy {
   private filePathChangedSubscriber;
   private fileChangedSubscriber;
+
+  // tslint:disable-next-line:variable-name
   private _fileNavigator: FileNavigator;
 
   @Input() displayedColumns = [];
 
   showingFile = false;
 
-  loading: boolean = false;
+  loading = false;
 
-  @Input() rootName: string = '';
+  @Input() rootName = '';
   @Input() set fileNavigator(value: FileNavigator) {
     this._fileNavigator = value;
 
-    if(this.filePathChangedSubscriber) {
+    if (this.filePathChangedSubscriber) {
       this.filePathChangedSubscriber.unsubscribe();
     }
 
     this.filePathChangedSubscriber = value.path.valueChanged.subscribe((change: SlowValueUpdate<string>)  => {
-      if(change.state === LongRunningTaskState.Succeeded) {
+      if (change.state === LongRunningTaskState.Succeeded) {
         this.updatePathParts(change.value);
       }
     });
 
-    if(this.fileChangedSubscriber) {
+    if (this.fileChangedSubscriber) {
       this.fileChangedSubscriber.unsubscribe();
     }
 
     this.fileChangedSubscriber = value.file.valueChanged.subscribe((change: SlowValueUpdate<ModelFile>) => {
-      if(!this.showingFile && change.state === LongRunningTaskState.Started) {
+      if (!this.showingFile && change.state === LongRunningTaskState.Started) {
         this.loading = true;
       }
 
-      if(change.state === LongRunningTaskState.Succeeded) {
+      if (change.state === LongRunningTaskState.Succeeded) {
         this.updateFile(change.value);
 
-        if(!this.showingFile) {
+        if (!this.showingFile) {
           this.loading = false;
         }
       }
 
-      if(change.state === LongRunningTaskState.Failed) {
-        if(!this.showingFile) {
+      if (change.state === LongRunningTaskState.Failed) {
+        if (!this.showingFile) {
           this.loading = false;
         }
       }
@@ -81,7 +84,7 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
   }
 
   updateFile(newFile: ModelFile) {
-    if(newFile.directory) {
+    if (newFile.directory) {
       this.showingFile = false;
       return;
     }
@@ -90,7 +93,7 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if(this.filePathChangedSubscriber) {
+    if (this.filePathChangedSubscriber) {
       this.filePathChangedSubscriber.unsubscribe();
       this.filePathChangedSubscriber = null;
     }
@@ -109,29 +112,29 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
     const path = this.fileNavigator.path.value;
     const subPath = path.substring(this.fileNavigator.rootPath.length);
 
-    let parts = subPath.split('/').filter(value => value.length != 0);
+    const parts = subPath.split('/').filter(value => value.length != 0);
 
     const partUntil = parts.slice(0, index + 1).join('/');
 
     return this.fileNavigator.rootPath + '/' + partUntil;
   }
 
   onFileEvent(e: FileActionEvent) {
-    if(e.action === 'download') {
+    if (e.action === 'download') {
       this.onFileDownload(e.file);
     }
   }
 
   onFileDownload(file: ModelFile) {
-    if(file.directory) {
-      throw 'Unable to download a directory';
+    if (file.directory) {
+      throw new Error('Unable to download a directory');
     }
 
     this.workflowService.getArtifact(this.namespace, this.name, file.path)
         .subscribe((res: any) => {
-          const link = <HTMLAnchorElement>document.createElement('a');
+          const link = document.createElement('a') as HTMLAnchorElement;
           let downloadName = `${this.namespace}-${this.name}-${file.name}`;
-          if(file.extension) {
+          if (file.extension) {
             downloadName += `.${file.extension}`;
           }
 
@@ -142,14 +145,20 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
-        })
+        });
   }
 
   onFileLoadingChange(value: boolean) {
-    if(this.showingFile) {
+    if (this.showingFile) {
       setTimeout(() => {
         this.loading = value;
       });
     }
   }
+
+  canDownload(file: ModelFile) {
+    return !file.directory &&
+            parseInt(file.size, 10) < GenericFileViewComponent.MAX_DOWNLOAD_SIZE
+    ;
+  }
 }

src/app/files/file-navigator/file-navigator.component.html

@@ -31,7 +31,7 @@
     <ng-container cdkColumnDef="actions">
         <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
         <cdk-cell *cdkCellDef="let file" class="color-primary">
-            <div *ngIf="!file.directory" (click)="onFileDownload(file)" class="pointer-hover"><i class="fas fa-download"></i></div>
+            <div (click)="onFileDownload(file)" [class.hidden]="!canDownload(file)" class="pointer-hover"><i class="fas fa-download"></i></div>
         </cdk-cell>
     </ng-container>
 

src/app/files/file-navigator/file-navigator.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FileNavigator } from "../fileNavigator";
 import { ModelFile } from "../../../api";
+import { GenericFileViewComponent } from '../file-viewer/generic-file-view/generic-file-view.component';
 
 export type FileAction = 'download';
 
@@ -17,24 +18,23 @@ export interface FileActionEvent {
 export class FileNavigatorComponent implements OnInit {
   @Input() displayedColumns = ['icon', 'name', 'last-modified', 'size', 'actions'];
 
+  // tslint:disable-next-line:variable-name
   private _fileNavigator: FileNavigator;
 
 
   @Input() set fileNavigator(fileNavigator: FileNavigator) {
-    if(!fileNavigator) {
+    if (!fileNavigator) {
       return;
     }
 
     this._fileNavigator = fileNavigator;
     this._fileNavigator.loadFiles();
   }
-
-  @Output() fileAction = new EventEmitter<FileActionEvent>();
-
   get fileNavigator(): FileNavigator {
     return this._fileNavigator;
   }
 
+  @Output() fileAction = new EventEmitter<FileActionEvent>();
   constructor() { }
 
   ngOnInit() {
@@ -47,7 +47,13 @@ export class FileNavigatorComponent implements OnInit {
   onFileDownload(file: ModelFile) {
     this.fileAction.emit({
       action: 'download',
-      file: file,
-    })
+      file,
+    });
+  }
+
+  canDownload(file: ModelFile) {
+    return !file.directory &&
+            parseInt(file.size, 10) < GenericFileViewComponent.MAX_DOWNLOAD_SIZE
+    ;
   }
 }

src/app/files/file-viewer/big-file-view/big-file-view.component.html

@@ -1,5 +1,5 @@
 <div class="big-file-view bg-lighter-white font-roboto">
-    <div class="text-center color-darker-gray" (click)="onFileDownload()">
+    <div *ngIf="displayDownload" class="text-center color-darker-gray" (click)="onFileDownload()">
         <i class="fa fa-download font-size-XL pointer-hover"></i>
         <div class="font-size-regular mt-1 pointer-hover">Download <span *ngIf="file.size">({{file.size | fileSize }})</span></div>
     </div>