code refactoried and structured

debomatic-webui/public/javascripts/page_history.js

@@ -10,6 +10,7 @@ function Page_History() {
 
     var distributions_counter = {};
     var days_counter = {};
+    var all_distributions = [];
     var all_days = {};
 
     function _get_short_day(timestamp) {
@@ -22,24 +23,8 @@ function Page_History() {
         return date.toLocaleDateString(locale, options);
     }
 
-    // init table and some objects
-    for (var i = 0; i < dom_history.length; i++) {
-        var p = dom_history[i];
-        var day = _get_short_day(p.start);
-        // count total packages by distributions
-        if (distributions_counter.hasOwnProperty(p.distribution))
-            distributions_counter[p.distribution]++;
-        else distributions_counter[p.distribution] = 1;
-        if (days_counter.hasOwnProperty(p.distribution)) {
-            if (days_counter[p.distribution].hasOwnProperty(day))
-                days_counter[p.distribution][day]++;
-            else
-                days_counter[p.distribution][day] = 1;
-        } else {
-            days_counter[p.distribution] = {};
-            days_counter[p.distribution][day] = 1;
-        }
-        all_days[day] = 0;
+    function _add_row(package_status) {
+        var p = package_status;
         var info = Utils.get_status_icon_and_class(p);
         var label = info.label || 'building';
         var distribution_url = Utils.get_url_to_package({
@@ -57,71 +42,113 @@ function Page_History() {
         $('table tbody').append(row);
     }
 
-    // create the theme for tablesorter
-    $.extend($.tablesorter.themes.bootstrap, {
-        table: 'table table-condensed table-bordered table-striped',
-        caption: 'caption',
-        header: 'bootstrap-header',
-        sortNone: 'bootstrap-icon-unsorted',
-        sortAsc: 'glyphicon glyphicon-chevron-up',
-        sortDesc: 'glyphicon glyphicon-chevron-down',
-    });
-
-    // call the tablesorter plugin and apply the uitheme widget
-    $("table").tablesorter({
-        theme: "bootstrap",
-        widthFixed: true,
-        headerTemplate: '{content} {icon}',
-        widgets: ["uitheme", "filter"],
-        sortList: [
-            [3, 1]
-        ]
-    });
-
-    // add some fancy class to input fields
-    $("table input").addClass('form-control');
-    $("table select").addClass('form-control');
-
-    // build the distribution Pie graph
-    var distributions_data = {
-        series: [],
-        labels: []
-    };
-    var all_distibutions = [];
-    for (var distro in distributions_counter) {
-        if (distributions_counter.hasOwnProperty(distro)) {
-            distributions_data.series.push(distributions_counter[distro]);
-            distributions_data.labels.push(distro + " (" + distributions_counter[distro] + ")");
-            all_distibutions.push(distro);
+    function _count_distributions(package_status) {
+        var p = package_status;
+        if (distributions_counter.hasOwnProperty(p.distribution))
+            distributions_counter[p.distribution]++;
+        else distributions_counter[p.distribution] = 1;
+    }
+
+    function _count_days(package_status) {
+        var p = package_status;
+        var day = _get_short_day(p.start);
+        if (days_counter.hasOwnProperty(p.distribution)) {
+            if (days_counter[p.distribution].hasOwnProperty(day))
+                days_counter[p.distribution][day]++;
+            else
+                days_counter[p.distribution][day] = 1;
+        } else {
+            days_counter[p.distribution] = {};
+            days_counter[p.distribution][day] = 1;
         }
+        all_days[day] = 0;
     }
 
-    Chartist.Pie('#distributions-chart', distributions_data, {
-        donut: true,
-        donutWidth: 15,
-    });
-
-    // build the days Line graph
-    var days_data = {
-        series: [],
-        labels: []
-    };
-    for (var day in all_days) {
-        if (all_days.hasOwnProperty(day))
-            days_data.labels.push(day);
+    function _sort_table() {
+        // create the theme for tablesorter
+        $.extend($.tablesorter.themes.bootstrap, {
+            table: 'table table-condensed table-bordered table-striped',
+            caption: 'caption',
+            header: 'bootstrap-header',
+            sortNone: 'bootstrap-icon-unsorted',
+            sortAsc: 'glyphicon glyphicon-chevron-up',
+            sortDesc: 'glyphicon glyphicon-chevron-down',
+        });
+
+        // call the tablesorter plugin and apply the uitheme widget
+        $("table").tablesorter({
+            theme: "bootstrap",
+            widthFixed: true,
+            headerTemplate: '{content} {icon}',
+            widgets: ["uitheme", "filter"],
+            sortList: [
+                [3, 1]
+            ]
+        });
+
+        // add some fancy class to input fields
+        $("table input").addClass('form-control');
+        $("table select").addClass('form-control');
+
     }
-    for (var i = 0; i < all_distibutions.length; i++) {
-        var info = [];
-        var distro = all_distibutions[i];
+
+    function _create_graph_distributions() {
+        // build the distribution Pie graph
+        var distributions_data = {
+            series: [],
+            labels: []
+        };
+        for (var distro in distributions_counter) {
+            if (distributions_counter.hasOwnProperty(distro)) {
+                distributions_data.series.push(distributions_counter[distro]);
+                distributions_data.labels.push(distro + " (" + distributions_counter[distro] + ")");
+                all_distributions.push(distro);
+            }
+        }
+
+        Chartist.Pie('#distributions-chart', distributions_data, {
+            donut: true,
+            donutWidth: 15,
+        });
+    }
+
+    function _create_graph_days() {
+        // build the days Line graph
+        var days_data = {
+            series: [],
+            labels: []
+        };
         for (var day in all_days) {
-            if (!all_days.hasOwnProperty(day))
-                continue;
-            if (days_counter[distro].hasOwnProperty(day))
-                info.push(days_counter[distro][day]);
-            else
-                info.push(0);
+            if (all_days.hasOwnProperty(day))
+                days_data.labels.push(day);
+        }
+        for (var i = 0; i < all_distributions.length; i++) {
+            var info = [];
+            var distro = all_distributions[i];
+            for (var day in all_days) {
+                if (!all_days.hasOwnProperty(day))
+                    continue;
+                if (days_counter[distro].hasOwnProperty(day))
+                    info.push(days_counter[distro][day]);
+                else
+                    info.push(0);
+            }
+            days_data.series.push(info);
         }
-        days_data.series.push(info);
+        Chartist.Line('#days-chart', days_data);
+    }
+
+
+
+    // init table and some objects
+    for (var i = 0; i < dom_history.length; i++) {
+        var p = dom_history[i];
+        _add_row(p);
+        // count stats
+        _count_distributions(p);
+        _count_days(p);
     }
-    Chartist.Line('#days-chart', days_data);
+    _sort_table();
+    _create_graph_distributions();
+    _create_graph_days();
 }