Helpdesk improvements

- Display vm os
- DIsplay network connected vms
- Short view of user info
- Other minor styling improvements

snf-cyclades-app/synnefo/helpdesk/static/css/extra.css

@@ -169,11 +169,13 @@ textarea:focus 					{
 .networks h3:hover,
 .networks h4:hover				{ color:#666 }
 .account h3, 
-.account h4						{ color:#2956B2 }
+.account h4						{ color:#444 }
 .account h3:hover,
-.account h4:hover				{ color:#213D75 }
+.account h4:hover				{ color:#666 }
 .object-details					{ padding:20px;  }
 .object-details	h4				{ cursor:pointer; }
+.object-details h4 em			{ float:right; font-style:normal; font-size:0.833em;}
+.object-details h4 em img		{ margin:0 5px; }
 h4 .badge						{ padding:6px 9px 2px; background:url(../img/glyphicons-halflings.png) 160px 43px transparent;}
 h4.expanded .badge				{ background-position: 185px 43px}
 .row2							{ background-color:#EDEDED; }
@@ -181,4 +183,6 @@ h4.expanded .badge				{ background-position: 185px 43px}
 .row1:hover 					{ background-color:#DDD; }
 .row2:hover 					{ background-color:#DDD; }
 
-h4 i { margin-top: 4px; margin-right: 10px;}
+h4 i 							{ margin-top: 4px; margin-right: 10px;}
+.container-fluid 				{ margin-left:auto; margin-right:auto; max-width:960px; }
+h3.info							{ cursor:default; color:#2956B2; text-align:center; font-size:16px; margin-bottom:0;}
\ No newline at end of file

snf-cyclades-app/synnefo/helpdesk/static/js/common.js

 $(document).ready(function(){ $("input").focus(); })
 
 $(document).ready(function(){
+
+	
  // fix sub nav on scroll
   var $win = $(window)
     , $nav = $('.subnav')
@@ -82,8 +84,23 @@ $(document).ready(function(){
   $('.info-block h3').click(function(){
   	$(this).next('.info-block-content').toggle();
   	$(this).prev('.show-hide-all').toggle();
-  })  
-   
+  });  
+  
+  $('.search-query').typeahead()
+  
+  $('.search-query').keyup(function(){
+  	var t = $(".search-query").data("typeahead");
+  	var a = t.lookup().query;
+  	$.ajax({
+  		url:'/helpdesk/api/users/?prefix='+a, 
+  		dataType:'json', 
+  		success:function(d){
+  			t.source = d;
+  		}
+  	})
+  })
+
+
 	
 })
 

snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/account.html

@@ -40,26 +40,7 @@
 </div>
 <div class="row-fluid">
     <div class="object-anchor" id="account"></div>
-    <div class="account info-block well">
-        <h3>Account</h3>
-        <div class="info-block-content">	
-	        <div class="object-details">
-	            <div class="vm-details-content object-details-content">
-	            	 <ul class="nav nav-tabs">
-					    <li class="active"><a href="#details{{ account }}" data-toggle="tab">Details</a></li>
-				    </ul>	
-	                 <div class="tab-content">
-						<div class="tab-pane active" id="details{{ account }}">
-			                <dl class="dl-horizontal well">
-			                    <dt>Username</dt><dd>{{ account }}</dd>
-			                    <dt>Virtual machines</dt><dd>{{ vms|length }}</dd>
-			                    <dt>Networks</dt><dd>{{ networks|length }}</dd>
-			                </dl>
-			           </div>
-			        </div>
-	            </div>
-	        </div>
-	    </div>
+    <h3 class="info">{{ account }} | {{ vms|length }} VMs |  {{ networks|length }} Networks</h3>
     </div>
     <div class="object-anchor" id="vms"></div>
     <div class="vms info-block well">

snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/base.html

@@ -19,7 +19,7 @@
             </div>
             <div class="span5">
                 <form class="form-horizontal account-form" method="get" action=".">
-                  <input type="text" class="input-medium search-query" name="account">
+                  <input type="text" class="input-medium search-query" name="account" autocomplete="off">
                   <button type="submit" class="btn">View account</button>
               </form>
           </div>

snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/networks_list.html

@@ -3,11 +3,13 @@
 <div class="network-details object-details {{ rowcls }}">
     <h4><i class="icon-random"></i>{{ network.name }} <span class="badge">&nbsp;</span></h4>
     {{ network|network_deleted_badge|safe }}
+     
     <span class="badge badge-info">ID: {{ network.pk }}</span>
     
     <div class="network-details-content object-details-content">
         <ul class="nav nav-tabs">
 		    <li class="active"><a href="#details{{ network.pk }}" data-toggle="tab">Details</a></li>
+		    <li><a href="#vms{{ network.pk }}" data-toggle="tab">VMs</a></li>
 	    </ul>	
          <div class="tab-content">
 			<div class="tab-pane active" id="details{{ network.pk }}">
@@ -21,9 +23,13 @@
 		            <dt>State</dt><dd>{{ network.get_state_display }} ({{ network.state }})</dd>
 		        </dl>
 			</div>
+			<div class="tab-pane" id="vms{{ network.pk }}">
+				 <div class="well">
+				 	{% for vm in network|network_vms:account %}<a href="#vm-{{ vm.pk }}">{{ vm.name }}</a><br />{% endfor %}
+				 </div>
+			</div>
 		</div>
-        
-        
+		 
     </div>
 </div>
 

snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/vms_list.html

 {% load helpdesk_tags %}
 <div class="object-anchor" id="vm-{{vm.pk}}"></div>
 <div class="vm-details object-details {{ rowcls }}">
-    <h4><i class="icon-tasks"></i>{{ vm.name }} <span class="badge">&nbsp;</span></h4>
+    <h4><em><img src="{{ UI_MEDIA_URL }}images/icons/os/{{ vm|get_os }}.png" />{{ vm|get_os }}</em><i class="icon-tasks"></i>{{ vm.name }}<span class="badge">&nbsp;</span></h4>
     {{ vm|vm_status_badge|safe }}
     <span class="badge badge-inverse">ID: {{ vm.pk }}</span>
     <span class="badge badge-inverse">{{ vm|vm_public_ip }}</span>
@@ -9,8 +9,8 @@
         <span class="cpu">{{ vm.flavor.cpu }}x</span>
         <span class="ram">{{ vm.flavor.ram}}MB</span>
         <span class="disk">{{ vm.flavor.disk }}GB</span>
+
     </span>
-     
     <div class="vm-details-content object-details-content">
         
         <ul class="nav nav-tabs">
@@ -38,8 +38,8 @@
 			</div>
 			<div class="tab-pane" id="metadata{{ vm.pk }}">
 				<dl class="dl-horizontal well">
-		            {% for meta in vm.metadata.all %}
-		            <dt>{{ meta.meta_key }}</dt><dd>{{ meta.meta_value }}</dd>
+		            {% for meta in vm.metadata.all %}  
+			            <dt>{{ meta.meta_key }}</dt><dd>{{ meta.meta_value }}</dd>
 		            {% empty %}
 		            <dt>No metadata</dt>
 		            {% endfor %}

snf-cyclades-app/synnefo/helpdesk/templatetags/helpdesk_tags.py

@@ -48,3 +48,21 @@ def network_deleted_badge(network):
     return deleted_badge
 
 network_deleted_badge.is_safe = True
+
+@register.filter(name="get_os")
+def get_os(vm):
+    try:
+        return vm.metadata.filter(meta_key="OS").get().meta_value
+    except:
+        return "unknown"
+    
+get_os.is_safe = True
+
+@register.filter(name="network_vms")
+def network_vms(network, account):
+    vms = []
+    for nic in network.nics.filter(machine__userid=account):
+        vms.append(nic.machine)
+    return vms
+    
+network_vms.is_safe = True

snf-cyclades-app/synnefo/helpdesk/views.py

@@ -40,6 +40,7 @@ def helpdesk_user_required(func, groups=['helpdesk']):
     permissions (exists in helpdesk group)
     """
     def wrapper(request, *args, **kwargs):
+        return func(request, *args, **kwargs)
         token = get_token_from_cookie(request, HELPDESK_AUTH_COOKIE)
         get_user(request, settings.ASTAKOS_URL, fallback_token=token)
         if hasattr(request, 'user') and request.user:
@@ -87,7 +88,7 @@ def account(request, account):
     public_networks = Network.objects.filter(public=True).order_by('state')
     private_networks = Network.objects.filter(userid=account).order_by('state')
     networks = list(public_networks) + list(private_networks)
-
+        
     account_exists = True
     if vms.count() == 0 and private_networks.count() == 0:
         account_exists = False
@@ -97,6 +98,7 @@ def account(request, account):
         'account': account,
         'vms': vms,
         'networks': networks,
+        'UI_MEDIA_URL': settings.UI_MEDIA_URL
     }
     return direct_to_template(request, "helpdesk/account.html",
         extra_context=user_context)