Showing detailed sync progress (fixes #476)

based on commit by Audrius Butkevicius <audrius.butkevicius@gmail.com>
2014-11-16 23:18:59 +00:00
parent b48d9a3a82
commit 90a31589bb
14 changed files with 570 additions and 188 deletions
--- a/gui/app.js
+++ b/gui/app.js
@@ -116,6 +116,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
    $scope.seenError = '';
    $scope.upgradeInfo = null;
    $scope.stats = {};
+    $scope.progress = {};

    $http.get(urlbase + "/lang").success(function (langs) {
        // Find the first language in the list provided by the user's browser
@@ -270,6 +271,55 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
        });
    });

+    $scope.$on('DownloadProgress', function (event, arg) {
+        var stats = arg.data;
+        var progress = {};
+        for(var folder in stats){
+            refreshFolder(folder);
+            progress[folder] = {};
+            for(var file in stats[folder]){
+                var s = stats[folder][file];
+                var reused = Math.floor(100 * s.Reused / s.Total);
+                var copiedFromOrigin = Math.floor(100 * s.CopiedFromOrigin / s.Total);
+                var copiedFromElsewhere = Math.floor(100 * s.CopiedFromElsewhere / s.Total);
+                var pulled = Math.floor(100 * s.Pulled / s.Total);
+                var pulling = Math.floor(100 * s.Pulling / s.Total);
+                // We can do the following, because if s.Pulling > 0, than reused + copied + pulled < 100 because off rounding them down.
+                // We do this to show which files are currently being pulled
+                if (s.Pulling && pulling == 0) {
+                    pulling = 1;
+                }
+                progress[folder][file] = {
+                    Reused:              reused,
+                    CopiedFromOrigin:    copiedFromOrigin,
+                    CopiedFromElsewhere: copiedFromElsewhere,
+                    Pulled:              pulled,
+                    Pulling:             pulling,
+                    BytesTotal:          s.BytesTotal,
+                    BytesDone:           s.BytesDone,
+                };
+            }
+        }
+        for(var folder in $scope.progress){
+            var refresh = false;
+            if (!(folder in progress)) {
+                refresh = true;
+                refreshFolder(folder);
+            } else {
+                for(file in $scope.progress[folder]){
+                    if (!(file in progress[folder])) {
+                        refresh = true;
+                    }
+                }
+            }
+            if (refresh) {
+                refreshNeed(folder);
+            }
+        }
+        $scope.progress = progress;
+        console.log("DownloadProgress", $scope.progress);
+    });
+
    var debouncedFuncs = {};

    function refreshFolder(folder) {
@@ -394,6 +444,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
        });
    }

+    function refreshNeed (folder) {
+        if ($scope.neededFolder == folder) {
+            $http.get(urlbase + "/need?folder=" + encodeURIComponent(folder)).success(function (data) {
+                if ($scope.neededFolder == folder) {
+                    console.log("refreshNeed", folder, data);
+                    $scope.needed = data;
+                }
+            });
+        }
+    }
+
    var refreshDeviceStats = debounce(function () {
        $http.get(urlbase + "/stats/device").success(function (data) {
            $scope.stats = data;
@@ -475,7 +536,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
        }

        var pct = 100 * $scope.model[folder].inSyncBytes / $scope.model[folder].globalBytes;
-        return Math.floor(pct);
+        return Math.min(Math.floor(pct), 100);
    };

    $scope.deviceIcon = function (deviceCfg) {
@@ -974,11 +1035,11 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
    };

    $scope.showNeed = function (folder) {
-        $scope.neededLoaded = false;
-        $('#needed').modal();
-        $http.get(urlbase + "/need?folder=" + encodeURIComponent(folder)).success(function (data) {
-            $scope.needed = data;
-            $scope.neededLoaded = true;
+        $scope.neededFolder = folder;
+        refreshNeed(folder);
+        $('#needed').modal().result.finally(function(){
+            $scope.neededFolder = undefined;
+            $scope.needed = undefined;
        });
    };

--- a/gui/index.html
+++ b/gui/index.html
@@ -765,9 +765,29 @@
      <tr ng-repeat="f in needed" ng-init="a = needAction(f)">
        <td class="small-data"><span class="glyphicon glyphicon-{{needIcons[a]}}"></span> {{needActions[a]}}</td>
        <td title="{{f.Name}}">{{f.Name | basename}}</td>
-        <td class="text-right small-data"><span ng-if="f.Size > 0">{{f.Size | binary}}B</span></td>
+        <td>
+          <span ng-if="a == 'sync' && progress[neededFolder] && progress[neededFolder][f.Name]">
+            <div class="progress progress-striped active">
+              <div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.Name].Reused}}%"></div>
+              <div class="progress-bar" style="width: {{progress[neededFolder][f.Name].CopiedFromOrigin}}%"></div>
+              <div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.Name].CopiedFromElsewhere}}%"></div>
+              <div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.Name].Pulled}}%"></div>
+              <div class="progress-bar progress-bar-danger" style="width: {{progress[neededFolder][f.Name].Pulling}}%"></div>
+              <span class="show frontal">{{progress[neededFolder][f.Name].BytesDone | binary}}B / {{progress[neededFolder][f.Name].BytesTotal | binary}}B</span>
+            </div>
+          </span>
+        </td>
      </tr>
    </table>
+    <span translate>Legend:</span>
+    <div class="progress progress-striped active">
+      <div class="progress-bar progress-bar-success" style="width: 20%"><span translate class="show">Reused</span></div>
+      <div class="progress-bar" style="width: 20%"><span translate class="show">Copied from original</span></div>
+      <div class="progress-bar progress-bar-info" style="width: 20%"><span translate class="show">Copied from elsewhere</span></div>
+      <div class="progress-bar progress-bar-warning" style="width: 20%"><span translate class="show">Downloaded</span></div>
+      <div class="progress-bar progress-bar-danger" style="width: 20%"><span translate class="show">Downloading</span></div>
+    </div>
+
  </modal>

  <!-- About modal -->
@@ -793,11 +813,11 @@
          <li>Emil Hessman</li>
          <li>Felix Ableitner</li>
          <li>Felix Unterpaintner</li>
+          <li>Gilli Sigurdsson</li>
        </ul>
      </div>
      <div class="col-md-6">
        <ul>
-          <li>Gilli Sigurdsson</li>
          <li>James Patterson</li>
          <li>Jens Diemer</li>
          <li>Jochen Voss</li>
@@ -806,6 +826,7 @@
          <li>Michael Tilli</li>
          <li>Philippe Schommers</li>
          <li>Phill Luby</li>
+          <li>Piotr Bejda</li>
          <li>Ryan Sullivan</li>
          <li>Tully Robinson</li>
          <li>Veeti Paananen</li>
--- a/gui/overrides.css
+++ b/gui/overrides.css
@@ -149,3 +149,19 @@ table.table-condensed td {
 .dl-horizontal.dl-narrow dd {
    margin-left: 60px;
 }
+
+/**
+ * Progress bars with centered text
+ */
+
+.progress {
+    margin-bottom: 0px;
+    position: relative;
+}
+
+.progress span.frontal {
+    text-align: center;
+    position: absolute;
+    display: block;
+    width: 100%;
+}