commit 0936e4214eb72bf83f4d3ff972491afbd3570aa6
Author: Kostas Papadimitriou <kpap@grnet.gr>
Date:   Wed May 30 16:03:54 2012 +0300

    Display stats period selection in ui
    
    taking advantage of the urls for weekly graphs that stats service provide.
    Refs #1791

diff --git a/snf-cyclades-app/synnefo/ui/static/snf/css/main.css b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
index 847a0a2..ffff8b2 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
+++ b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
@@ -3621,6 +3621,21 @@ div.single div.column3 div.server-name:hover {
     width: 660px;
 }
 
+.single div.lower .stats-select .stats-select-option.selected {
+    background-color: #4085A5;
+    color: #fff;
+}
+
+.single div.lower .stats-select .stats-select-option {
+    cursor: pointer;
+    background-color: #DDF1FB;
+    color: #4085A5;
+    display: block;
+    float: left;
+    padding: 7px 10px;
+    font-size: 0.7em;
+}
+
 .single div.lower img.stats {
     margin-left: 82px;
 }
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js
index d071df1..2192442 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js
+++ b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js
@@ -476,6 +476,7 @@
             this.parent = view;
             this.sel = options.el || this.el_sel || ".lower";
             this.el = this.parent.vm(vm).find(this.sel);
+            this.selected_stats_period = 'hourly';
             
             // elements shortcuts
             this.cpu_loading = this.el.find(".cpu-graph .stat-busy");
@@ -488,6 +489,22 @@
             this.loading = this.el.find(".stat-busy");
             this.error = this.el.find(".stat-error");
             this.img = this.el.find(".stat-img");
+            this.stats_period_options = this.el.find(".stats-select-option");
+            
+
+            // handle stats period option select
+            var self = this;
+            this.stats_period_options.click(function(){
+                // skip if current selection is clicked
+                if ($(this).filter(".stats-" + self.selected_stats_period).length) {
+                    return
+                } else {
+                    // identify class
+                    var cls = $(this).attr("class");
+                    regex = /.*\sstats-(\w+)/;
+                    self.set_stats_period(cls.match(regex)[1]);
+                }
+            });
             
             // initial state paremeters
             this.stats = this.vm.get("stats");
@@ -506,9 +523,21 @@
 
             this.net_img.hide();
             this.cpu_img.hide();
+            
+            if (!window.t) {
+                window.t = [];
+            }
+            if (this.parent.menu) {
+                window.t[window.t.length] = this;
+            }
         },
 
         
+        set_stats_period: function(period) {
+            this.selected_stats_period = period;
+            this.update_layout();
+        },
+
         set_handlers: function() {
             // update view state when vm stats update gets triggered
             this.vm.bind("stats:update", _.bind(function(){
@@ -517,12 +546,24 @@
             }, this));
         },
         
-        get_images: function (type) {
-            if (type == "bar") {
-                return {'cpu': this.stats.cpuBar, 'net': this.stats.netBar };
+        get_images: function (type, period) {
+            var period = period || 'hourly';
+            var images;
+
+            if (type == 'bar') {
+                images = {'cpu': this.stats.cpuBar, 'net': this.stats.netBar };
             } else {
-                return {'cpu': this.stats.cpuTimeSeries, 'net': this.stats.netTimeSeries };
+                images = {'cpu': this.stats.cpuTimeSeries, 
+                          'net': this.stats.netTimeSeries };
             }
+
+            if (period == 'weekly' && type != 'bar') {
+                if (images.cpu)
+                    images.cpu = images.cpu.replace('.png', '-w.png')
+                if (images.net)
+                    images.net = images.net.replace('.png', '-w.png')
+            }
+            return images
         },
 
         update_layout: function() {
@@ -533,7 +574,8 @@
             } else {
                 this.loading.hide();
                 this.stats = this.vm.get("stats");
-                var images = this.get_images(this.stats_type);
+                var images = this.get_images(this.stats_type, 
+                                             this.selected_stats_period)
 
                 if (images.cpu) {
                     this.cpu_img.attr({src:images.cpu}).show();
@@ -551,6 +593,11 @@
                     this.net_error.show();
                 }
             }
+                
+            // update selected stats period
+            this.stats_period_options.removeClass("selected");
+            this.stats_period_options.filter(".stats-" + this.selected_stats_period).addClass("selected")
+
             $(window).trigger("resize");
         }
     });
diff --git a/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html b/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html
index d41a1d3..22dab09 100644
--- a/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html
+++ b/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html
@@ -108,6 +108,10 @@
             </div>
         </div>
         <div class="lower">
+            <div class="stats-select clearfix">
+                <span class="stats-select-option stats-hourly">{% trans "Hourly" %}</span>
+                <span class="stats-select-option stats-weekly selected">{% trans "Weekly" %}</span>
+            </div>
             <div class="single-cpu">
                 <div class="cpu-usage">
                     {% trans "CPU Utilization" %}
