sftp: added size and speed display

terminus-core/package.json

@@ -27,6 +27,7 @@
     "js-yaml": "^4.0.0",
     "mixpanel": "^0.13.0",
     "ng2-dnd": "^5.0.2",
+    "ngx-filesize": "^2.0.16",
     "ngx-perfect-scrollbar": "^10.1.0",
     "readable-stream": "3.6.0",
     "uuid": "^8.0.0"

terminus-core/src/api/platform.ts

@@ -24,6 +24,10 @@ export abstract class FileTransfer {
     abstract getSize (): number
     abstract close (): void
 
+    getSpeed (): number {
+        return this.lastChunkSpeed
+    }
+
     getCompletedBytes (): number {
         return this.completedBytes
     }
@@ -43,9 +47,13 @@ export abstract class FileTransfer {
 
     protected increaseProgress (bytes: number): void {
         this.completedBytes += bytes
+        this.lastChunkSpeed = bytes * 1000 / (Date.now() - this.lastChunkStartTime)
+        this.lastChunkStartTime = Date.now()
     }
 
     private completedBytes = 0
+    private lastChunkStartTime = Date.now()
+    private lastChunkSpeed = 0
     private cancelled = false
 }
 

terminus-core/src/components/transfersMenu.component.pug

@@ -1,5 +1,7 @@
-.dropdown-header File transfers
+.d-flex.align-items-center
-.dropdown-item.transfer(*ngFor='let transfer of transfers', (click)='showTransfer(transfer)')
+    .dropdown-header File transfers
+    button.btn.btn-link.ml-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
+.transfer(*ngFor='let transfer of transfers', (click)='showTransfer(transfer)')
     .icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
     .icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}
     .main
@@ -10,4 +12,8 @@
             ngb-progressbar(type='danger', [value]='100')
         .status(*ngIf='!transfer.isComplete() && !transfer.isCancelled()')
             ngb-progressbar(type='info', [value]='getProgress(transfer)')
+        .metadata
+            .size {{transfer.getSize()|filesize}}
+            .speed(*ngIf='transfer.getSpeed()') {{transfer.getSpeed()|filesize}}/s
+
     button.btn.btn-link((click)='removeTransfer(transfer); $event.stopPropagation()') !{require('../icons/times.svg')}

terminus-core/src/components/transfersMenu.component.scss

@@ -8,7 +8,7 @@
     padding: 5px 0 5px 25px;
 
     .icon {
-        padding: 4px 10px;
+        padding: 4px 7px;
         width: 36px;
         height: 32px;
         background: rgba(0,0,0,.25);
@@ -18,14 +18,29 @@
     .main {
         width: 100%;
         margin-right: auto;
-        margin-bottom: 7px;
+        margin-bottom: 3px;
 
         label {
             margin: 0;
         }
     }
 
+    .metadata {
+        font-size: 10px;
+        opacity: .5;
+        display: flex;
+        align-items: center;
+
+        .speed {
+            margin-left: auto;
+        }
+    }
+
     > i {
         margin-right: 10px;
     }
 }
+
+button {
+    flex: none;
+}

terminus-core/src/components/transfersMenu.component.ts

@@ -35,4 +35,19 @@ export class TransfersMenuComponent {
         this.transfers = this.transfers.filter(x => x !== transfer)
         this.transfersChange.emit(this.transfers)
     }
+
+    async removeAll (): Promise<void> {
+        if (this.transfers.some(x => !x.isComplete())) {
+            if ((await this.platform.showMessageBox({
+                type: 'warning',
+                message: 'There are active file transfers',
+                buttons: ['Abort all', 'Do not abort'],
+            })).response === 1) {
+                return
+            }
+        }
+        for (const t of this.transfers) {
+            this.removeTransfer(t)
+        }
+    }
 }

terminus-core/src/index.ts

@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'
+import { NgxFilesizeModule } from 'ngx-filesize'
 import { DndModule } from 'ng2-dnd'
 
 import { AppRootComponent } from './components/appRoot.component'
@@ -64,6 +65,7 @@ const PROVIDERS = [
         BrowserAnimationsModule,
         FormsModule,
         NgbModule,
+        NgxFilesizeModule,
         PerfectScrollbarModule,
         DndModule.forRoot(),
     ],

terminus-core/yarn.lock

@@ -170,6 +170,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+"filesize@>= 4.0.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.3.0.tgz#dff53cfb3f104c9e422f346d53be8dbcc971bf11"
+  integrity sha512-ytx0ruGpDHKWVoiui6+BY/QMNngtDQ/pJaFwfBpQif0J63+E8DLdFyqS3NkKQn7vIruUEpoGD9JUJSg7Kp+I0g==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -400,6 +405,14 @@ ng2-dnd@^5.0.2:
   resolved "https://registry.yarnpkg.com/ng2-dnd/-/ng2-dnd-5.0.2.tgz#862278ac7dedfa14f5783bbf34014d5d73dfefb4"
   integrity sha512-5mWWBePwvEPsNd/HkdbD543Q9mPyJofL6zkNydl8/Ah3qrrvZT2DaEPbknY08OgkXpI2qUGksc01OzzVlRQ9dQ==
 
+ngx-filesize@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/ngx-filesize/-/ngx-filesize-2.0.16.tgz#fdaba04170edb6cfcdf7be932783cf913b03f016"
+  integrity sha512-VdaCirE7hSyfQh8ZEmhzNEhbddiTYUHF4V6OX+KyTmnQSVx4hp9kmzDX5YlkIlmClI6wI+LZmH9/q7XS3fsMPA==
+  dependencies:
+    filesize ">= 4.0.0"
+    tslib "^2.0.0"
+
 ngx-perfect-scrollbar@^10.1.0:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-10.1.1.tgz#f89832b9109e89bb59d516184638accd028e9735"