You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/20 20:47:46 UTC

[streampipes] branch chore/formatting-linting-files created (now c868dbe92)

This is an automated email from the ASF dual-hosted git repository.

bossenti pushed a change to branch chore/formatting-linting-files
in repository https://gitbox.apache.org/repos/asf/streampipes.git


      at c868dbe92 [#877] apply formatting and linting to files module

This branch includes the following new commits:

     new c868dbe92 [#877] apply formatting and linting to files module

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[streampipes] 01/01: [#877] apply formatting and linting to files module

Posted by bo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

bossenti pushed a commit to branch chore/formatting-linting-files
in repository https://gitbox.apache.org/repos/asf/streampipes.git

commit c868dbe92e05ad407799a4467b05f3ab73f753e1
Author: bossenti <bo...@posteo.de>
AuthorDate: Fri Jan 20 21:47:23 2023 +0100

    [#877] apply formatting and linting to files module
---
 ui/.eslintignore                                   |   1 -
 ui/.prettierignore                                 |   1 -
 .../file-overview/file-overview.component.html     |  54 ++++++++---
 .../file-overview/file-overview.component.scss     |  18 ++--
 .../file-overview/file-overview.component.ts       |  95 +++++++++---------
 .../file-upload/file-upload-dialog.component.html  |  94 +++++++++++++-----
 .../file-upload/file-upload-dialog.component.scss  |   2 +-
 .../file-upload/file-upload-dialog.component.ts    | 108 ++++++++++-----------
 ui/src/app/files/files.component.html              |  34 +++++--
 ui/src/app/files/files.component.scss              |  12 +--
 ui/src/app/files/files.component.ts                |  56 ++++++-----
 ui/src/app/files/files.module.ts                   |  82 ++++++++--------
 ui/src/app/files/files.routes.ts                   |  10 +-
 13 files changed, 329 insertions(+), 238 deletions(-)

diff --git a/ui/.eslintignore b/ui/.eslintignore
index c980966c1..e14894a30 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -26,6 +26,5 @@ src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
 src/app/editor
-src/app/files
 src/app/info
 src/app/login
diff --git a/ui/.prettierignore b/ui/.prettierignore
index 3930e91ee..aafb087af 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -26,6 +26,5 @@ src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
 src/app/editor
-src/app/files
 src/app/info
 src/app/login
diff --git a/ui/src/app/files/components/file-overview/file-overview.component.html b/ui/src/app/files/components/file-overview/file-overview.component.html
index 051d7b97c..bc7d775cb 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.html
+++ b/ui/src/app/files/components/file-overview/file-overview.component.html
@@ -16,48 +16,70 @@
   ~
   -->
 
-<div fxFlex="100" fxLayout="column" style="margin:1px;">
+<div fxFlex="100" fxLayout="column" style="margin: 1px">
     <div fxLayout="column" fxFlex="100" *ngIf="filesAvailable">
-        <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;">
+        <table
+            fxFlex="100"
+            mat-table
+            [dataSource]="dataSource"
+            style="width: 100%"
+        >
             <ng-container matColumnDef="filename">
-                <th mat-header-cell *matHeaderCellDef> Filename</th>
+                <th mat-header-cell *matHeaderCellDef>Filename</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <h4>{{fileMetadata.originalFilename}}</h4>
+                    <h4>{{ fileMetadata.originalFilename }}</h4>
                 </td>
             </ng-container>
             <ng-container matColumnDef="filetype">
-                <th mat-header-cell *matHeaderCellDef> Filetype</th>
+                <th mat-header-cell *matHeaderCellDef>Filetype</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <span class="filetype-container">{{fileMetadata.filetype}}</span>
+                    <span class="filetype-container">{{
+                        fileMetadata.filetype
+                    }}</span>
                 </td>
             </ng-container>
             <ng-container matColumnDef="uploaded">
-                <th mat-header-cell *matHeaderCellDef> Uploaded</th>
+                <th mat-header-cell *matHeaderCellDef>Uploaded</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <h5>{{fileMetadata.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
+                    <h5>
+                        {{ fileMetadata.createdAt | date : 'dd.MM.yyyy HH:mm' }}
+                    </h5>
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="action">
-                <th mat-header-cell *matHeaderCellDef> Action</th>
+                <th mat-header-cell *matHeaderCellDef>Action</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <button color="accent" mat-button mat-icon-button matTooltip="Delete file"
-                            matTooltipPosition="above"
-                            (click)="deleteFile(fileMetadata)" data-cy="delete">
+                    <button
+                        color="accent"
+                        mat-button
+                        mat-icon-button
+                        matTooltip="Delete file"
+                        matTooltipPosition="above"
+                        (click)="deleteFile(fileMetadata)"
+                        data-cy="delete"
+                    >
                         <i class="material-icons">delete</i>
                     </button>
                 </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
         <div fxFlex="100" fxLayoutAlign="end end">
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="10"></mat-paginator>
+            <mat-paginator
+                [pageSizeOptions]="[5, 10, 25, 100]"
+                [pageSize]="10"
+            ></mat-paginator>
         </div>
     </div>
-    <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!filesAvailable">
+    <div
+        fxFlex="100"
+        fxLayout="column"
+        fxLayoutAlign="center center"
+        *ngIf="!filesAvailable"
+    >
         <h5>(no files available)</h5>
     </div>
 </div>
diff --git a/ui/src/app/files/components/file-overview/file-overview.component.scss b/ui/src/app/files/components/file-overview/file-overview.component.scss
index a1b130075..90097a5d1 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.scss
+++ b/ui/src/app/files/components/file-overview/file-overview.component.scss
@@ -17,24 +17,24 @@
  */
 
 .mat-table {
-  //background: #FAFAFA;
+    //background: #FAFAFA;
 }
 
 .mat-paginator {
-  border-top: 1px solid rgba(0,0,0,.12);
-  //background: #FAFAFA;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    //background: #FAFAFA;
 }
 
 .mat-row:nth-child(even) {
-  background-color: var(--color-bg-1);
+    background-color: var(--color-bg-1);
 }
 .mat-row:nth-child(odd) {
-  background-color: var(--color-bg-2);
+    background-color: var(--color-bg-2);
 }
 
 .filetype-container {
-  background: #00aeff;
-  color: white;
-  padding: 5px 15px;
-  border-radius: 5px;
+    background: #00aeff;
+    color: white;
+    padding: 5px 15px;
+    border-radius: 5px;
 }
diff --git a/ui/src/app/files/components/file-overview/file-overview.component.ts b/ui/src/app/files/components/file-overview/file-overview.component.ts
index dda5d580c..22865f21a 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.ts
+++ b/ui/src/app/files/components/file-overview/file-overview.component.ts
@@ -24,62 +24,63 @@ import { ConfirmDialogComponent } from '@streampipes/shared-ui';
 import { MatDialog } from '@angular/material/dialog';
 
 @Component({
-  selector: 'sp-file-overview',
-  templateUrl: './file-overview.component.html',
-  styleUrls: ['./file-overview.component.scss']
+    selector: 'sp-file-overview',
+    templateUrl: './file-overview.component.html',
+    styleUrls: ['./file-overview.component.scss'],
 })
 export class FileOverviewComponent implements OnInit {
+    displayedColumns: string[] = ['filename', 'filetype', 'uploaded', 'action'];
 
-  displayedColumns: string[] = ['filename', 'filetype', 'uploaded', 'action'];
+    dataSource: MatTableDataSource<FileMetadata>;
+    filesAvailable = false;
 
-  dataSource: MatTableDataSource<FileMetadata>;
-  filesAvailable = false;
+    paginator: MatPaginator;
+    pageSize = 1;
 
-  paginator: MatPaginator;
-  pageSize = 1;
+    constructor(
+        private filesService: FilesService,
+        private dialog: MatDialog,
+    ) {}
 
-  constructor(private filesService: FilesService,
-              private dialog: MatDialog) {
+    ngOnInit() {
+        this.dataSource = new MatTableDataSource<FileMetadata>([]);
+        this.refreshFiles();
+    }
 
-  }
-
-  ngOnInit() {
-    this.dataSource = new MatTableDataSource<FileMetadata>([]);
-    this.refreshFiles();
-  }
-
-  refreshFiles() {
-    this.filesService.getFileMetadata().subscribe(fm => {
-     this.dataSource.data = fm;
-      this.filesAvailable = fm && fm.length > 0;
-      setTimeout(() => {
-        this.dataSource.paginator = this.paginator;
-      });
-    });
-  }
+    refreshFiles() {
+        this.filesService.getFileMetadata().subscribe(fm => {
+            this.dataSource.data = fm;
+            this.filesAvailable = fm && fm.length > 0;
+            setTimeout(() => {
+                this.dataSource.paginator = this.paginator;
+            });
+        });
+    }
 
-  deleteFile(fileMetadata: FileMetadata) {
-    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '500px',
-      data: {
-        'title': 'Do you really want to delete this file?',
-        'subtitle': 'This cannot be undone.',
-        'cancelTitle': 'No',
-        'okTitle': 'Yes',
-        'confirmAndCancel': true
-      },
-    });
+    deleteFile(fileMetadata: FileMetadata) {
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '500px',
+            data: {
+                title: 'Do you really want to delete this file?',
+                subtitle: 'This cannot be undone.',
+                cancelTitle: 'No',
+                okTitle: 'Yes',
+                confirmAndCancel: true,
+            },
+        });
 
-    dialogRef.afterClosed().subscribe(ev => {
-      if (ev) {
-        this.filesService.deleteFile(fileMetadata.fileId).subscribe(response => {
-          this.refreshFiles();
+        dialogRef.afterClosed().subscribe(ev => {
+            if (ev) {
+                this.filesService
+                    .deleteFile(fileMetadata.fileId)
+                    .subscribe(response => {
+                        this.refreshFiles();
+                    });
+            }
         });
-      }
-    });
-  }
+    }
 
-  @ViewChild(MatPaginator) set content(paginator: MatPaginator) {
-    this.paginator = paginator;
-  }
+    @ViewChild(MatPaginator) set content(paginator: MatPaginator) {
+        this.paginator = paginator;
+    }
 }
diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
index ed88a66e4..7fc060395 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
@@ -16,45 +16,93 @@
 ~
 -->
 
-
 <div class="sp-dialog-container">
     <div class="sp-dialog-content p-15">
         <div fxFlex="100">
-            <div fxFlex="100" style="margin:5px;width:100%">
-                <mat-form-field style="width: 95%" (click)="fileInput.click();" color="accent">
-                    <input matInput placeholder="File" disabled (value)="fileNames">
-                    <input #fileInput type="file" style="display:none;"
-                           (change)="handleFileInput($event.target.files)"
-                           data-cy="sp-file-management-file-input" multiple>
+            <div fxFlex="100" style="margin: 5px; width: 100%">
+                <mat-form-field
+                    style="width: 95%"
+                    (click)="fileInput.click()"
+                    color="accent"
+                >
+                    <input
+                        matInput
+                        placeholder="File"
+                        disabled
+                        (value)="(fileNames)"
+                    />
+                    <input
+                        #fileInput
+                        type="file"
+                        style="display: none"
+                        (change)="handleFileInput($event.target.files)"
+                        data-cy="sp-file-management-file-input"
+                        multiple
+                    />
                     <div>
-                        <div fxLayout="column" *ngFor="let filename of fileNames">{{filename}}</div>
-                        <mat-progress-bar mode="determinate" value="{{uploadStatus}}" *ngIf="uploadStatus > 0" color="accent"></mat-progress-bar>
+                        <div
+                            fxLayout="column"
+                            *ngFor="let filename of fileNames"
+                        >
+                            {{ filename }}
+                        </div>
+                        <mat-progress-bar
+                            mode="determinate"
+                            value="{{ uploadStatus }}"
+                            *ngIf="uploadStatus > 0"
+                            color="accent"
+                        ></mat-progress-bar>
                     </div>
-                    <button color="accent" matSuffix
-                            mat-button style="min-width: 0px">
-                        <mat-icon *ngIf="uploadStatus < 99">insert_drive_file</mat-icon>
-                        <mat-icon *ngIf="uploadStatus == 100" class="green-icon">check_circle</mat-icon>
+                    <button
+                        color="accent"
+                        matSuffix
+                        mat-button
+                        style="min-width: 0px"
+                    >
+                        <mat-icon *ngIf="uploadStatus < 99"
+                            >insert_drive_file</mat-icon
+                        >
+                        <mat-icon
+                            *ngIf="uploadStatus === 100"
+                            class="green-icon"
+                            >check_circle</mat-icon
+                        >
                     </button>
                     <mat-error *ngIf="!hasInput">
-                        {{errorMessage}}
+                        {{ errorMessage }}
                     </mat-error>
                 </mat-form-field>
-                <button mat-button mat-raised-button class="mat-basic" (click)="removeFilesFromUpload()">Clear</button>
+                <button
+                    mat-button
+                    mat-raised-button
+                    class="mat-basic"
+                    (click)="removeFilesFromUpload()"
+                >
+                    Clear
+                </button>
             </div>
         </div>
     </div>
     <mat-divider></mat-divider>
     <div class="sp-dialog-actions">
-        <button mat-button
-                mat-raised-button
-                color="accent"
-                (click)="store()"
-                [disabled]="fileNames.length === 0"
-                data-cy="sp-file-management-store-file"
-                style="margin-right:10px;">
+        <button
+            mat-button
+            mat-raised-button
+            color="accent"
+            (click)="store()"
+            [disabled]="fileNames.length === 0"
+            data-cy="sp-file-management-store-file"
+            style="margin-right: 10px"
+        >
             Import files
         </button>
-        <button mat-button mat-raised-button class="mat-basic" (click)="cancel()" style="margin-right:10px;">
+        <button
+            mat-button
+            mat-raised-button
+            class="mat-basic"
+            (click)="cancel()"
+            style="margin-right: 10px"
+        >
             Cancel
         </button>
     </div>
diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss
index d25ee7413..704f843e4 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss
@@ -16,4 +16,4 @@
  *
  */
 
-@import 'src/scss/sp/sp-dialog';
\ No newline at end of file
+@import 'src/scss/sp/sp-dialog';
diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
index 0df31b1bf..d932dbab5 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
@@ -16,77 +16,75 @@
  *
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { DialogRef } from '@streampipes/shared-ui';
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import { FilesService } from '@streampipes/platform-services';
 
 @Component({
-  selector: 'sp-file-upload-dialog-component',
-  templateUrl: './file-upload-dialog.component.html',
-  styleUrls: ['./file-upload-dialog.component.scss']
+    selector: 'sp-file-upload-dialog-component',
+    templateUrl: './file-upload-dialog.component.html',
+    styleUrls: ['./file-upload-dialog.component.scss'],
 })
-export class FileUploadDialogComponent implements OnInit {
+export class FileUploadDialogComponent {
+    inputValue: string;
+    fileNames: string[] = [];
 
-  inputValue: string;
-  fileNames: string[] = [];
+    selectedUploadFiles: FileList;
 
-  selectedUploadFiles: FileList;
+    hasInput: boolean;
+    errorMessage = 'Please enter a value';
 
-  hasInput: boolean;
-  errorMessage = 'Please enter a value';
+    uploadStatus = 0;
 
-  uploadStatus = 0;
+    constructor(
+        private dialogRef: DialogRef<FileUploadDialogComponent>,
+        private filesService: FilesService,
+    ) {}
 
-  constructor(private dialogRef: DialogRef<FileUploadDialogComponent>,
-              private filesService: FilesService) {
-
-  }
-
-  ngOnInit(): void {
-  }
-
-  handleFileInput(files: FileList) {
-    this.selectedUploadFiles = files;
-    for (let i = 0; i < files.length; i++) {
-      this.fileNames.push(files.item(i).name);
+    handleFileInput(files: FileList) {
+        this.selectedUploadFiles = files;
+        for (let i = 0; i < files.length; i++) {
+            this.fileNames.push(files.item(i).name);
+        }
+        this.uploadStatus = 0;
     }
-    this.uploadStatus = 0;
-  }
 
-  removeFilesFromUpload(): void {
-    this.selectedUploadFiles = undefined;
-    this.fileNames = [];
-  }
-
-  store() {
-    this.uploadStatus = 0;
-    if (this.selectedUploadFiles.length > 0) {
-      this.uploadFile(0);
+    removeFilesFromUpload(): void {
+        this.selectedUploadFiles = undefined;
+        this.fileNames = [];
     }
-  }
 
-  uploadFile(index: number): void {
-    this.filesService.uploadFile(this.selectedUploadFiles.item(index)).subscribe(
-      event => {
-        if (event.type === HttpEventType.UploadProgress) {
-          this.uploadStatus = Math.round(100 * event.loaded / event.total);
-        } else if (event instanceof HttpResponse) {
-          index++;
-          if (index === (this.selectedUploadFiles.length)) {
-            this.dialogRef.close();
-          } else {
-            this.uploadFile(index);
-          }
+    store() {
+        this.uploadStatus = 0;
+        if (this.selectedUploadFiles.length > 0) {
+            this.uploadFile(0);
         }
-      },
-      error => {
-      },
-    );
-  }
+    }
 
-  cancel() {
-    this.dialogRef.close();
-  }
+    uploadFile(index: number): void {
+        this.filesService
+            .uploadFile(this.selectedUploadFiles.item(index))
+            .subscribe(
+                event => {
+                    if (event.type === HttpEventType.UploadProgress) {
+                        this.uploadStatus = Math.round(
+                            (100 * event.loaded) / event.total,
+                        );
+                    } else if (event instanceof HttpResponse) {
+                        index++;
+                        if (index === this.selectedUploadFiles.length) {
+                            this.dialogRef.close();
+                        } else {
+                            this.uploadFile(index);
+                        }
+                    }
+                },
+                error => {},
+            );
+    }
 
+    cancel() {
+        this.dialogRef.close();
+    }
 }
diff --git a/ui/src/app/files/files.component.html b/ui/src/app/files/files.component.html
index 10e701fe2..683266740 100644
--- a/ui/src/app/files/files.component.html
+++ b/ui/src/app/files/files.component.html
@@ -17,24 +17,40 @@
   -->
 
 <sp-basic-view [showBackLink]="false" [padding]="true">
-
-    <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
-        <button mat-button mat-raised-button color="accent"
-                (click)="openFileUploadDialog()"
-                data-cy="sp-open-file-upload-dialog"
-                class="mr-10">
+    <div
+        nav
+        fxFlex="100"
+        fxLayoutAlign="start center"
+        fxLayout="row"
+        class="pl-10"
+    >
+        <button
+            mat-button
+            mat-raised-button
+            color="accent"
+            (click)="openFileUploadDialog()"
+            data-cy="sp-open-file-upload-dialog"
+            class="mr-10"
+        >
             <i class="material-icons">cloud_upload</i>
             &nbsp;Upload new file
         </button>
     </div>
 
     <div fxFlex="100" fxLayout="column">
-        <sp-basic-header-title-component title="My Files"></sp-basic-header-title-component>
+        <sp-basic-header-title-component
+            title="My Files"
+        ></sp-basic-header-title-component>
         <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
-            <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90" [hideToolbar]="true">
+            <sp-basic-inner-panel
+                [showTitle]="false"
+                innerPadding="0"
+                outerMargin="0"
+                fxFlex="90"
+                [hideToolbar]="true"
+            >
                 <sp-file-overview #fileOverviewComponent></sp-file-overview>
             </sp-basic-inner-panel>
         </div>
     </div>
-
 </sp-basic-view>
diff --git a/ui/src/app/files/files.component.scss b/ui/src/app/files/files.component.scss
index 0d59f14e3..ba9f01dd2 100644
--- a/ui/src/app/files/files.component.scss
+++ b/ui/src/app/files/files.component.scss
@@ -17,16 +17,16 @@
  */
 
 .add-options {
-  border-bottom: 1px solid var(--color-bg-2);
-  padding-top:10px;
-  padding-bottom:10px;
+    border-bottom: 1px solid var(--color-bg-2);
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .page-container-padding-inner {
-  margin: 20px;
+    margin: 20px;
 }
 
 .add-options-item {
-  display: inline;
-  margin-right: 10px;
+    display: inline;
+    margin-right: 10px;
 }
diff --git a/ui/src/app/files/files.component.ts b/ui/src/app/files/files.component.ts
index 4c5afe015..3129ef489 100644
--- a/ui/src/app/files/files.component.ts
+++ b/ui/src/app/files/files.component.ts
@@ -17,35 +17,41 @@
  */
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
+import {
+    DialogService,
+    PanelType,
+    SpBreadcrumbService,
+} from '@streampipes/shared-ui';
 import { FileUploadDialogComponent } from './dialog/file-upload/file-upload-dialog.component';
 import { SpFilesRoutes } from './files.routes';
 
 @Component({
-  templateUrl: './files.component.html',
-  styleUrls: ['./files.component.scss']
+    templateUrl: './files.component.html',
+    styleUrls: ['./files.component.scss'],
 })
 export class FilesComponent implements OnInit {
-
-  @ViewChild('fileOverviewComponent') fileOverviewComponent;
-
-  constructor(private dialogService: DialogService,
-              private breadcrumbService: SpBreadcrumbService) {
-
-  }
-
-  ngOnInit() {
-    this.breadcrumbService.updateBreadcrumb(this.breadcrumbService.getRootLink(SpFilesRoutes.BASE));
-  }
-
-  openFileUploadDialog() {
-    const dialogRef = this.dialogService.open(FileUploadDialogComponent, {
-      panelType: PanelType.SLIDE_IN_PANEL,
-      title: 'Upload file',
-      width: '40vw',
-    });
-
-    dialogRef.afterClosed().subscribe(() => this.fileOverviewComponent.refreshFiles());
-  }
-
+    @ViewChild('fileOverviewComponent') fileOverviewComponent;
+
+    constructor(
+        private dialogService: DialogService,
+        private breadcrumbService: SpBreadcrumbService,
+    ) {}
+
+    ngOnInit() {
+        this.breadcrumbService.updateBreadcrumb(
+            this.breadcrumbService.getRootLink(SpFilesRoutes.BASE),
+        );
+    }
+
+    openFileUploadDialog() {
+        const dialogRef = this.dialogService.open(FileUploadDialogComponent, {
+            panelType: PanelType.SLIDE_IN_PANEL,
+            title: 'Upload file',
+            width: '40vw',
+        });
+
+        dialogRef
+            .afterClosed()
+            .subscribe(() => this.fileOverviewComponent.refreshFiles());
+    }
 }
diff --git a/ui/src/app/files/files.module.ts b/ui/src/app/files/files.module.ts
index 7eb7b8d46..f83d1ae24 100644
--- a/ui/src/app/files/files.module.ts
+++ b/ui/src/app/files/files.module.ts
@@ -43,45 +43,45 @@ import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    CoreUiModule,
-    FlexLayoutModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatButtonModule,
-    MatChipsModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatDividerModule,
-    MatListModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatTableModule,
-    MatTabsModule,
-    MatTooltipModule,
-    PlatformServicesModule,
-    ServicesModule,
-    SharedUiModule,
-    RouterModule.forChild([
-      {
-        path: 'files',
-        children: [
-          {
-            path: '',
-            component: FilesComponent
-          }]
-      }])
-
-  ],
-  declarations: [
-    FilesComponent,
-    FileOverviewComponent,
-    FileUploadDialogComponent
-  ],
-  providers: []
+    imports: [
+        CommonModule,
+        CoreUiModule,
+        FlexLayoutModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatDividerModule,
+        MatListModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatTableModule,
+        MatTabsModule,
+        MatTooltipModule,
+        PlatformServicesModule,
+        ServicesModule,
+        SharedUiModule,
+        RouterModule.forChild([
+            {
+                path: 'files',
+                children: [
+                    {
+                        path: '',
+                        component: FilesComponent,
+                    },
+                ],
+            },
+        ]),
+    ],
+    declarations: [
+        FilesComponent,
+        FileOverviewComponent,
+        FileUploadDialogComponent,
+    ],
+    providers: [],
 })
-export class FilesModule {
-}
+export class FilesModule {}
diff --git a/ui/src/app/files/files.routes.ts b/ui/src/app/files/files.routes.ts
index 10fb905ed..be69607a1 100644
--- a/ui/src/app/files/files.routes.ts
+++ b/ui/src/app/files/files.routes.ts
@@ -16,10 +16,12 @@
  *
  */
 
-import { SpBreadcrumbItem, } from '@streampipes/shared-ui';
+import { SpBreadcrumbItem } from '@streampipes/shared-ui';
 
 export class SpFilesRoutes {
-
-  static FILES_BASE_LINK = 'files';
-  static BASE: SpBreadcrumbItem = {label: 'File Management', link: [SpFilesRoutes.FILES_BASE_LINK]};
+    static FILES_BASE_LINK = 'files';
+    static BASE: SpBreadcrumbItem = {
+        label: 'File Management',
+        link: [SpFilesRoutes.FILES_BASE_LINK],
+    };
 }