Progress bars reflect real state

Author: jrichter1

browser/directives/progressBar.js

@@ -27,7 +27,8 @@ function progressBar() {
               <div>{{productDesc}}</div>
             </div>
             <div class="progress progress-label-top-right">
-              <div class="progress-bar" role="progressbar" aria-valuenow="{{current}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}" style="width: {{current}}%;">
+              <div class="progress-bar" ng-class="{'progress-bar-striped active': status == 'Installing' || status == 'Setting up' || status.indexOf('Waiting') > -1}" role="progressbar" aria-valuenow="{{current}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"
+                style="width: {{current}}%; animation: progress-bar-stripes 2s infinite steps(15);">
                 <span>{{label}}</span>
               </div>
             </div>

browser/model/cdk.js

@@ -52,11 +52,9 @@ class CDKInstall extends InstallableItem {
   downloadInstaller(progress, success, failure) {
     progress.setStatus('Downloading');
 
-    let downloadSize = 869598013;
-
     let totalDownloads = 3;
 
-    this.downloader = new Downloader(progress, success, failure, downloadSize, totalDownloads);
+    this.downloader = new Downloader(progress, success, failure, totalDownloads);
     let username = this.installerDataSvc.getUsername(),
         password = this.installerDataSvc.getPassword();
 

browser/model/helpers/downloader.js

@@ -8,15 +8,17 @@ import Hash from './hash';
 const remote = require('electron').remote;
 
 class Downloader {
-  constructor(progress, success, failure, downloadSize = 0, totalDownloads = 1) {
-    this.downloadSize = downloadSize;
+  constructor(progress, success, failure, totalDownloads = 1) {
+    this.downloadSize = 0;
     this.totalDownloads = totalDownloads;
-    this.lastTime = 0;
+    this.currentSize = 0;
     this.progress = progress;
     this.success = success;
     this.failure = failure;
     this.downloads = new Map();
     this.userAgentString = '';
+    this.received = 0;
+    this.lastTime = 0;
     if(remote) {
       this.userAgentString = remote.getCurrentWindow().webContents.session.getUserAgent();
     }
@@ -36,20 +38,23 @@ class Downloader {
   }
 
   responseHandler(response) {
-    if (this.downloadSize == 0) {
-      let tempSize = response.headers['content-length'];
-      if (tempSize !== undefined && tempSize > 0) {
-        this.downloadSize = tempSize;
+    let tempSize = response.headers['content-length'];
+    if (tempSize !== undefined && parseInt(tempSize) > 0) {
+      this.downloadSize += parseInt(tempSize);
+
+      if (++this.received == this.totalDownloads && this.progress.totalSize == 0) {
+        this.progress.setTotalDownloadSize(this.downloadSize);
       }
     }
-    this.progress.setTotalDownloadSize(this.downloadSize);
-    this.lastTime = Date.now();
   }
 
   dataHandler(data) {
-    let current = Date.now();
-    this.progress.downloaded(data.length, current - this.lastTime);
-    this.lastTime = current;
+    this.currentSize += data.length;
+
+    if (Date.now() - this.lastTime > 500) {
+      this.progress.setCurrent(this.currentSize);
+      this.lastTime = Date.now();
+    }
   }
 
   endHandler(stream) {
@@ -112,6 +117,9 @@ class Downloader {
   }
 
   restartDownload() {
+    this.downloadSize = 0;
+    this.received = 0;
+    this.currentSize = 0;
     this.progress.setStatus('Downloading');
     for (var [key, value] of this.downloads.entries()) {
       if (value['failure'] && value.failure) {

browser/model/vagrant.js

@@ -114,8 +114,7 @@ class VagrantInstall extends InstallableItem {
     if(this.isDownloadRequired() && this.selectedOption === "install") {
       // Need to download the file
       let writeStream = fs.createWriteStream(this.downloadedFile);
-      let downloadSize = 199819264;
-      this.downloader = new Downloader(progress, success, failure, downloadSize);
+      this.downloader = new Downloader(progress, success, failure);
       this.downloader.setWriteStream(writeStream);
       this.downloader.download(this.downloadUrl,this.downloadedFile,this.sha256);
     } else {

browser/pages/install/controller.js

@@ -11,7 +11,7 @@ class InstallController {
 
     this.data = Object.create(null);
     for (var [key, value] of this.installerDataSvc.allInstallables().entries()) {
-      let itemProgress = new ProgressState(value.getProductName(), value.getProductVersion(), value.getProductDesc(), value.getInstallTime(), this.$scope, this.$timeout);
+      let itemProgress = new ProgressState(value.getProductName(), value.getProductVersion(), value.getProductDesc(), this.$scope, this.$timeout);
       Object.defineProperty(this.data, key, {
         enumerable: true,
         writable: true,
@@ -67,8 +67,6 @@ class InstallController {
   triggerInstall(installableKey, installableValue, progress) {
     this.installerDataSvc.startInstall(installableKey);
 
-    progress.installTrigger();
-
     installableValue.install(progress,
       () => {
         this.installerDataSvc.installDone(progress,installableKey);
@@ -109,67 +107,59 @@ class InstallController {
 }
 
 class ProgressState {
-  constructor(productName, productVersion, productDesc, installTime, $scope, $timeout) {
+  constructor(productName, productVersion, productDesc, $scope, $timeout) {
     this.productName = productName;
     this.productVersion = productVersion;
     this.productDesc = productDesc;
-    this.installTime = installTime;
-    this.$scope = $scope;
     this.$timeout = $timeout;
+    this.$scope = $scope;
     this.current = 0;
-    this.totalDownloadSize = 0;
-    this.downloadedSize = 0;
-    this.timeSpent = 0;
-    this.timeSpentInstall = 0;
-    this.lastInstallTime = 0;
     this.label = '';
     this.status = '';
-
-  }
-
-  setTotalDownloadSize(totalSize) {
-    this.totalDownloadSize = totalSize;
-  }
-
-  downloaded(amt, time) {
-    this.downloadedSize += amt;
-    this.timeSpent += time;
-    if (time == 0) return;
-    let rate = amt / time;
-    let remainingDownloadTime = (this.totalDownloadSize - this.downloadedSize) / rate;
-    this.setCurrent(Math.round((this.timeSpent / (this.timeSpent + (this.installTime * 1000) + remainingDownloadTime)) * 100));
-  }
-
-  installTrigger() {
-    this.lastInstallTime = Date.now();
-    this.$timeout(this.installUpdate.bind(this), 10000);
+    this.currentAmount = 0;
+    this.totalSize = 0;
   }
 
-  installUpdate() {
-    let now = Date.now();
-    this.timeSpentInstall += (now - this.lastInstallTime);
-    this.lastInstallTime = now;
-    this.setCurrent(Math.round(((this.timeSpent + this.timeSpentInstall) / (this.timeSpent + (this.installTime * 1000))) * 100));
-
-    this.$timeout(this.installUpdate.bind(this), 5000);
+  setTotalDownloadSize(size) {
+    this.totalSize = size;
   }
 
   setCurrent(newVal) {
-    if (newVal > this.current && newVal < 100) {
-    	this.current = newVal;
-    	this.label = newVal + '%';
+    if (newVal > this.currentAmount && newVal < this.totalSize) {
+    	this.currentAmount = newVal;
+      this.current = Math.round(this.currentAmount / this.totalSize * 100)
+    	this.label = this.sizeInKB(this.currentAmount) + ' / ' + this.sizeInKB(this.totalSize) + ' KB (' + this.current + '%)';
+
+      this.$timeout(this.setCurrent.bind(this), 0);
     }
   }
 
   setStatus(newStatus) {
+    if (newStatus !== 'Downloading') {
+      this.current = 100;
+      this.label = '';
+    } else {
+      this.current = 0;
+      this.label = 0 + '%';
+      this.currentAmount = 0;
+      this.totalSize = 0;
+    }
     this.status = newStatus;
+
+    this.$timeout(() => {
+      this.$scope.$apply();
+    });
   }
 
   setComplete() {
     this.current = 100;
     this.label = '100%';
     this.setStatus('Complete');
   }
+
+  sizeInKB(amount) {
+    return Math.round(amount / 1024);
+  }
 }
 
 InstallController.$inject = ['$scope', '$timeout', 'installerDataSvc'];

browser/services/data.js

@@ -158,7 +158,6 @@ class InstallerDataService {
     }
 
     this.startInstall(key);
-    progress.installTrigger();
 
     return item.install(progress,
       () => {

test/unit/model/helpers/downloader-test.js

@@ -17,7 +17,7 @@ describe('Downloader', function() {
     setLabel: function (label) {},
     setComplete: function() {},
     setTotalDownloadSize: function(size) {},
-    downloaded: function(amt, time) {}
+    downloaded: function(amt, time) {},
   };
   let sandbox;
   let succ = function() {};
@@ -39,24 +39,38 @@ describe('Downloader', function() {
   it('responseHandler should set the total download size', function() {
     downloader = new Downloader(fakeProgress, function() {}, function() {});
     let response = { headers: { 'content-length': 1024 } };
-    let spy = sandbox.spy(fakeProgress, 'setTotalDownloadSize');
 
     downloader.responseHandler(response);
 
     expect(downloader.downloadSize).to.equal(1024);
-    expect(spy).to.have.been.calledOnce;
-    expect(spy).to.have.been.calledWith(1024);
   });
 
-  it('dataHandler should update the progress', function() {
+  it('dataHandler should update the progress once time threshold is reached', function() {
     downloader = new Downloader(fakeProgress, function() {}, function() {});
-    let data = { length: 1024 };
-    let spy = sandbox.spy(fakeProgress, 'downloaded');
+    fakeProgress.totalSize = 1024;
+
+    let data = { length: 512 };
+    let spy = sandbox.spy(fakeProgress, 'setCurrent');
 
+    downloader.received = 1;
     downloader.dataHandler(data);
 
     expect(spy).to.have.been.calledOnce;
-    expect(spy).to.have.been.calledWith(1024);
+    expect(spy).to.have.been.calledWith(data.length);
+  });
+
+  it('dataHandler should not update the progress before time threshold is reached', function() {
+    downloader = new Downloader(fakeProgress, function() {}, function() {});
+    fakeProgress.totalSize = 1024;
+
+    let data = { length: 512 };
+    let spy = sandbox.spy(fakeProgress, 'setCurrent');
+
+    downloader.received = 1;
+    downloader.lastTime = Date.now() + 9999999999;
+    downloader.dataHandler(data);
+
+    expect(spy).not.called;
   });
 
   it('errorHandler should close the stream', function() {
@@ -213,7 +227,7 @@ describe('Downloader', function() {
       let error = new Error('something bad happened');
 
       let stream = new Writable();
-      downloader = new Downloader(fakeProgress, function() {}, function() {}, 1, 2);
+      downloader = new Downloader(fakeProgress, function() {}, function() {}, 2);
       downloader.setWriteStream(stream);
       let errorHandler = sandbox.stub(downloader, 'errorHandler');
       let successSpy = sandbox.spy(downloader, 'success');
@@ -232,7 +246,7 @@ describe('Downloader', function() {
       let error = new Error('something bad happened');
 
       let stream = new Writable();
-      downloader = new Downloader(fakeProgress, function() {}, function() {}, 1, 2);
+      downloader = new Downloader(fakeProgress, function() {}, function() {}, 2);
       downloader.setWriteStream(stream);
       let successHandler = sandbox.stub(downloader, 'success');
       downloader.download(options);