render package stats, speedgraph

8 files changed, 71 insertions, 61 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index b1d8326d8..7f8627d98 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -263,7 +263,6 @@
     text-align: left;

     .gradient(top, @yellow, @yellowDark);

     color: @dark;

-    padding: 0px 5px;

   }

 

 }

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index baa8cc413..0f9b551b3 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -254,6 +254,7 @@ header .logo {
 

   .iconf-list {

     cursor: pointer;

+    margin-right: 5px; // same as globalprogress margin

 

     &:hover {

       color: @yellow;

diff --git a/module/web/static/js/helpers/fileHelper.js b/module/web/static/js/helpers/fileHelper.js
index ad7c44142..085c222aa 100644
--- a/module/web/static/js/helpers/fileHelper.js
+++ b/module/web/static/js/helpers/fileHelper.js
@@ -37,7 +37,7 @@ define('helpers/fileHelper', ['handlebars', 'utils/apitypes', 'helpers/formatTim
             } else if (file.finished)
                 s = "<i class='iconf-ok'></i>&nbsp;" + msg;
             else if (file.downloading)
-                s = "<div class='progress'><div class='bar' style='width: " + file.progress + "%'>" +
+                s = "<div class='progress'><div class='bar' style='width: " + file.progress + "%'>&nbsp;&nbsp;" +
                     formatTime(file.eta) + "</div></div>";
             else if (file.waiting)
                 s = "<i class='iconf-time'></i>&nbsp;" + formatTime(file.eta);
diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index 0b9efca10..1b050d735 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -32,6 +32,13 @@ define(['jquery', 'backbone', 'underscore', 'app', 'collections/FileList', 'requ
             initialize: function() {
             },
 
+            toJSON: function(options) {
+                var obj = Backbone.Model.prototype.toJSON.call(this, options);
+                obj.percent = Math.round(obj.stats.linksdone * 100 / obj.stats.linkstotal);
+
+                return obj;
+            },
+
             // Changes url + method and delegates call to super class
             fetch: function(options) {
                 options = App.apiRequest(
diff --git a/module/web/static/js/models/Progress.js b/module/web/static/js/models/Progress.js
index 87e7b350b..96beb0198 100644
--- a/module/web/static/js/models/Progress.js
+++ b/module/web/static/js/models/Progress.js
@@ -35,10 +35,7 @@ define(['jquery', 'backbone', 'underscore', 'utils/apitypes'], function($, Backb
         toJSON: function(options) {
             var obj = Backbone.Model.prototype.toJSON.call(this, options);
             obj.percent = this.getPercent();
-            if (this.isDownload() && this.get('download').status === Api.DownloadStatus.Downloading)
-                obj.downloading = true;
-            else
-                obj.downloading = false;
+            obj.downloading = this.isDownload() && this.get('download').status === Api.DownloadStatus.Downloading;
 
             return obj;
         },
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 2d5d844c8..b0d7ac9de 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView'],
-    function($, Backbone, _, App, Api, ItemView) {
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView', 'helpers/formatTime'],
+    function($, Backbone, _, App, Api, ItemView, formatTime) {
 
         // Renders single file item
         return ItemView.extend({
@@ -17,6 +17,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
                 this.listenTo(this.model, 'change', this.render);
                 // This will be triggered manually and changed before with silent=true
                 this.listenTo(this.model, 'change:visible', this.visibility_changed);
+                this.listenTo(this.model, 'change:progress', this.progress_changed);
                 this.listenTo(this.model, 'remove', this.unrender);
                 this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
             },
@@ -73,7 +74,20 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
                     this.$el.calculateHeight(true);
                     this.$el.slideIn(true);
                 }
-            }
+            },
+
+            progress_changed: function() {
+                if (this.model.isDownload() && this.model.get('download').status === Api.DownloadStatus.Downloading) {
+                    var bar = this.$('.progress .bar');
+                    if (!bar) { // ensure that the dl bar is rendered
+                        this.render();
+                        bar = this.$('.progress .bar');
+                    }
 
+                    bar.width(this.model.get('progress') + '%');
+                    bar.html('&nbsp;&nbsp;' + formatTime(this.model.get('eta')));
+                }
+
+            }
         });
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 49c3aa30e..2c4f8abb5 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,5 +1,6 @@
-define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList', 'views/progressView', 'flot'],
-    function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView) {
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList',
+    'views/progressView', 'helpers/formatSize', 'flot'],
+    function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView, formatSize) {
         // Renders the header with all information
         return Backbone.View.extend({
 
@@ -15,16 +16,18 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             templateStatus: _.compile($('#template-header-status').html()),
             templateHeader: _.compile($('#template-header').html()),
 
-            // Will hold the link grabber
+            // html elements
             grabber: null,
             notifications: null,
             header: null,
             progress: null,
-            ws: null,
+            speedgraph: null,
 
-            // Status model
+            // models and data
+            ws: null,
             status: null,
             progressList: null,
+            speeds: null,
 
             // save if last progress was empty
             wasEmpty: false,
@@ -49,6 +52,9 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                 };
                 // TODO compare with polling
                 ws.onmessage = _.bind(this.onData, this);
+                ws.onerror = function(error) {
+                    alert(error);
+                };
 
                 this.ws = ws;
 
@@ -56,41 +62,24 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             },
 
             initGraph: function() {
-                var totalPoints = 100;
+                var totalPoints = 120;
                 var data = [];
 
-                function getRandomData() {
-                    if (data.length > 0)
-                        data = data.slice(1);
-
-                    // do a random walk
-                    while (data.length < totalPoints) {
-                        var prev = data.length > 0 ? data[data.length - 1] : 50;
-                        var y = prev + Math.random() * 10 - 5;
-                        if (y < 0)
-                            y = 0;
-                        if (y > 100)
-                            y = 100;
-                        data.push(y);
-                    }
-
-                    // zip the generated y values with the x values
-                    var res = [];
-                    for (var i = 0; i < data.length; ++i)
-                        res.push([i, data[i]])
-                    return res;
-                }
-
-                var updateInterval = 1500;
+                // init with empty data
+                while (data.length < totalPoints)
+                    data.push([data.length, 0]);
 
-                var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], {
+                this.speeds = data;
+                this.speedgraph = $.plot(this.$el.find("#speedgraph"), [this.speeds], {
                     series: {
                         lines: { show: true, lineWidth: 2 },
                         shadowSize: 0,
                         color: "#fee247"
                     },
                     xaxis: { ticks: [], mode: "time" },
-                    yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+                    yaxis: { ticks: [], min: 1, autoscaleMargin: 0.1, tickFormatter: function(data) {
+                        return formatSize(data * 1024);
+                    }, position: "right" },
                     grid: {
                         show: true,
 //            borderColor: "#757575",
@@ -102,16 +91,6 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                     }
                 });
 
-                function update() {
-                    speedgraph.setData([ getRandomData() ]);
-                    // since the axes don't change, we don't need to call plot.setupGrid()
-                    speedgraph.draw();
-
-                    setTimeout(update, updateInterval);
-                }
-
-//            update();
-
             },
 
             render: function() {
@@ -157,6 +136,16 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
 
                 if (data['@class'] === "ServerStatus") {
                     this.status.set(data);
+
+                    this.speeds = this.speeds.slice(1);
+                    this.speeds.push([this.speeds[this.speeds.length - 1][0] + 1, Math.floor(data.speed / 1024)]);
+
+                    // TODO: if everything is 0 rerender is not needed
+                    this.speedgraph.setData([this.speeds]);
+                    // adjust the axis
+                    this.speedgraph.setupGrid();
+                    this.speedgraph.draw();
+
                 }
                 else if (_.isArray(data))
                     this.onProgressUpdate(data);
@@ -181,11 +170,14 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                 this.progressList.each(function(prog) {
                     if (prog.isDownload() && App.dashboard.files) {
                         var file = App.dashboard.files.get(prog.get('download').fid);
-                        if (file)
+                        if (file) {
                             file.set({
                                 progress: prog.getPercent(),
-                                eta: prog.get('eta')
-                            });
+                                eta: prog.get('eta'),
+                            }, {silent: true});
+
+                            file.trigger('change:progress');
+                        }
                     }
                 });
 
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index f0756cdfb..a67445f6b 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -53,13 +53,13 @@
                 </ul>

             </div>

             <div class="progress">

-                <div class="bar bar-info" style="width: 50%">

-                    <% stats.linksdone %>

-                </div>

-                <div class="bar bar-danger" style="width: 20%">

-                    <% stats.linkstotal %>

-                </div>

-                <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>

+                <span style="position: absolute; left: 5px">

+                    <% stats.linksdone %> / <% stats.linkstotal %>

+                </span>

+                <div class="bar bar-info" style="width: <% percent %>%"></div>

+                <span style="position: absolute; right: 5px">

+                        <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>

+                </span>

             </div>

         </div>

     </script>

@@ -177,7 +177,7 @@
         <div class="sidebar-header">

             <i class="iconf-hdd"></i> Local

             <div class="pull-right" style="font-size: medium; line-height: normal">

-{#                <input type="text" class="input">#}

+                {#                <input type="text" class="input">#}

                 <i class="iconf-chevron-down" style="font-size: 20px"></i>

             </div>

             <div class="clearfix"></div>