commit e30babe314e0accddac7b47f241b69b108e38e35
Author: Markos Gogoulos <mgogoulos@unweb.me>
Date:   Tue Jun 14 18:47:22 2011 +0300

    ui colors and notifications
    
    For transition of states (running, rebooting, etc)
    
    Refs #443

diff --git a/ui/static/main.css b/ui/static/main.css
index bac37c3..2639a6e 100644
--- a/ui/static/main.css
+++ b/ui/static/main.css
@@ -819,27 +819,31 @@ div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
     min-height: 50px;
 }
 
-.rebooting .indicator1, .rebooting .indicator2, .rebooting .indicator3, .rebooting .indicator4 {
+.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
+    background-color: #447821; 
+}
+
+.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
     background-color: #d4aa00; 
 }
 
-.starting .indicator1, .starting .indicator3 {
+.starting-state .indicator1, .starting-state .indicator3 {
     background-color: #666666;
 }
 
-.starting .indicator2, .starting .indicator4 {
+.starting-state .indicator2, .starting-state .indicator4 {
     background-color: #d4aa00;
 }
 
-.shutting .indicator1, .shutting .indicator3 {
+.shutting-state .indicator1, .shutting-state .indicator3 {
     background-color: #447821;
 }
 
-.shutting .indicator2, .shutting .indicator4 {
+.shutting-state .indicator2, .shutting-state .indicator4 {
     background-color: #666666
 }
 
-.destroying .indicator1, .destroying .indicator2, .destroying .indicator3, .destroying .indicator4 {
+.destroying-state .indicator1, .destroying-state .indicator2, .destroying-state .indicator3, .destroying-state .indicator4 {
     background-color: #666666;
 }
 
diff --git a/ui/templates/machines_icon.html b/ui/templates/machines_icon.html
index 4ed4380..71a7062 100644
--- a/ui/templates/machines_icon.html
+++ b/ui/templates/machines_icon.html
@@ -290,19 +290,19 @@ $("#machinesview-icon.standard div.confirm_single .yes").live('click', function(
             // change the status text in cases where no api state exists
             if (action[0] == start) {
                 $(this).parent().parent().find('.status').text(TRANSITIONS['Starting']);
-                $(this).parent().parent().find('.state').removeClass().addClass('state starting');
+                $(this).parent().parent().find('.state').removeClass().addClass('state starting-state');
                 $(this).parent().parent().find('.spinner').show();
             } else if (action[0] == shutdown) {
                 $(this).parent().parent().find('.status').text(TRANSITIONS['Shutting down']);
-                $(this).parent().parent().find('.state').removeClass().addClass('state shutting');
+                $(this).parent().parent().find('.state').removeClass().addClass('state shutting-state');
                 $(this).parent().parent().find('.spinner').show();
             } else if (action[0] == reboot) {
                 $(this).parent().parent().find('.status').text(TRANSITIONS['Rebooting']);
-                $(this).parent().parent().find('.state').removeClass().addClass('state rebooting');
+                $(this).parent().parent().find('.state').removeClass().addClass('state rebooting-state');
                 $(this).parent().parent().find('.spinner').show();
             }  else if (action[0] == destroy) {
                 $(this).parent().parent().find('.status').text(TRANSITIONS['Destroying']);
-                $(this).parent().parent().find('.state').removeClass().addClass('state destroying');
+                $(this).parent().parent().find('.state').removeClass().addClass('state destroying-state');
                 $(this).parent().parent().find('.spinner').show();
             }
             action[0]([action[1]]); // execute action
@@ -410,6 +410,7 @@ function update_machines_view(data) {
                     existing.find(".status").text(STATUSES[server.status]);
                     existing.find('.spinner').hide();
                     existing.find(' .wave').attr('src','static/icons/indicators/medium/wave.gif').show();
+                    existing.find('.state').removeClass().addClass('state running-state');
                     setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
                 }
                 else {
@@ -424,11 +425,14 @@ function update_machines_view(data) {
                         existing.find(".status").text(STATUSES[server.status]);
                         existing.find('.spinner').hide();
                         existing.find(' .wave').attr('src','static/icons/indicators/medium/wave.gif').show();
+                        existing.find('.state').removeClass().addClass('state running-state');
                         setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
                     }
                     else {
                         // in any other case just change the status and ignore spinners/waves
                         existing.find(".status").text(STATUSES[server.status]);
+                        existing.appendTo("#machinesview-icon.standard .running");
+                        existing.find('.state').removeClass().addClass('state running-state');
                     }
                 }
             }
