changes to the sliceview
authorCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 12 Mar 2014 18:05:16 +0000 (19:05 +0100)
committerCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 12 Mar 2014 18:05:16 +0000 (19:05 +0100)
portal/slicetabexperiment.py
portal/slicetabinfo.py [new file with mode: 0644]
portal/slicetabtestbeds.py
portal/static/css/onelab.css
portal/static/js/myslice-ui.js
portal/templates/experimentview.html
portal/templates/onelab/onelab__widget-topmenu.html
portal/templates/onelab/onelab_slice-resource-view.html
portal/templates/onelab/onelab_slice-view.html
portal/templates/onelab/onelab_widget-slice-sections.html
portal/templates/slice-tab-testbeds.html

index 70d4267..f13c9d8 100644 (file)
@@ -16,36 +16,8 @@ from theme import ThemeView
 
 class ExperimentView (FreeAccessView, ThemeView):
     template_name = 'experimentview.html'
-        
-    # expose this so we can mention the backend URL on the welcome page
-    def default_env (self):
-        return { 
-                 'MANIFOLD_URL':ConfigEngine().manifold_url(),
-                 }
-
-    def post (self,request):
-        env = self.default_env()
-        env['theme'] = self.theme
-        return render_to_response(self.template, env, context_instance=RequestContext(request))
-
-    def get (self, request, state=None):
-        env = self.default_env()
 
-        if request.user.is_authenticated(): 
-            env['person'] = self.request.user
-        else: 
-            env['person'] = None
-    
-        env['theme'] = self.theme
-    
-
-        env['username']=the_user(request)
-        env['topmenu_items'] = topmenu_items(None, request)
-        if state: env['state'] = state
-        elif not env['username']: env['state'] = None
-        # use one or two columns for the layout - not logged in users will see the login prompt
-        env['layout_1_or_2']="layout-unfold2.html" if not env['username'] else "layout-unfold1.html"
-        
+    def get (self, request, slicename, state=None):
         
-        return render_to_response(self.template, env, context_instance=RequestContext(request))
+        return render_to_response(self.template, { 'theme' : self.theme }, context_instance=RequestContext(request))
 
diff --git a/portal/slicetabinfo.py b/portal/slicetabinfo.py
new file mode 100644 (file)
index 0000000..7e7b78e
--- /dev/null
@@ -0,0 +1,23 @@
+from django.template                 import RequestContext
+from django.shortcuts                import render_to_response
+
+from manifold.core.query             import Query, AnalyzedQuery
+from manifoldapi.manifoldapi         import execute_query
+
+from django.views.generic.base      import TemplateView
+
+from unfold.loginrequired           import LoginRequiredView
+from django.http import HttpResponse
+from django.shortcuts import render
+
+from unfold.page                     import Page
+from manifold.core.query             import Query, AnalyzedQuery
+from manifoldapi.manifoldapi         import execute_query
+
+from theme import ThemeView
+
+class SliceInfoView (LoginRequiredView, ThemeView):
+    template_name = "slice-tab-info.html"
+    
+    def get(self, request, slicename):
+        return render_to_response(self.template, {"slice": slicename, "theme": self.theme, "username": request.user, "section":"slice"}, context_instance=RequestContext(request))
index a545ec4..a93f678 100644 (file)
@@ -5,8 +5,8 @@ from unfold.loginrequired           import LoginRequiredView
 
 from theme import ThemeView
 
-class TestbedList (LoginRequiredView, ThemeView):
-    template_name = "testbed-list.html"
+class SliceTabTestbeds (LoginRequiredView, ThemeView):
+    template_name = "slice-tab-testbeds.html"
     
     def get(self, request, slicename):
         return render_to_response(self.template, {"theme": self.theme, "username": request.user, "slice" : slicename, "section":"testbeds"}, context_instance=RequestContext(request))
index a236d10..920e6fd 100644 (file)
@@ -150,6 +150,7 @@ div#menu-slice-list{
     background-color:black;
     padding:15px;
     left:-15px;
+    z-index:10;
 }
 div#menu-slice-list ul {
     margin:0;
@@ -350,7 +351,12 @@ ul.nav-sliceview li:first-child img {
     padding:0;
 }
 
-
+ul.nav-resources {
+    margin:15px 0;
+}
+ul.nav-resources a {
+    padding: 4px 10px 5px 10px;
+}
 
 
 
index 4aa83ce..747098a 100644 (file)
@@ -7,46 +7,7 @@ $(document).ready(function() {
                
        
        
-       /* Testbeds list */
-
-       $.post("/rest/network/", { "fields" : ["network_hrn", "network_longname", "description"]}, function(data) {
-                       var testbed_data = [];
-                       var testbed_row = "<thead>";
-                       testbed_row += "<tr>";
-                       testbed_row += "<th id=testbed_check><input type=\"checkbox\" name=\"network_hrn\" value=\"all\"/></th>";
-                       testbed_row += "<th id=testbed_icon></th>";
-                       testbed_row += "<th>network_hrn</th>";
-                       testbed_row += "<th>Full name</th>";
-                       testbed_row += "<th>Description</th>";
-                       testbed_row += "</tr>";
-                       testbed_row += "</thead>";
-                       testbed_data.push(testbed_row);
-                       $.each( data, function(key, val) {
-                               testbed_row = "<tr data-keys=\""+val.network_hrn+"\" class=\"odd\">"
-                               testbed_row += "<td><input type=\"checkbox\" name=\"network_hrn\" value=\""+val.network_hrn+"\"/></td>";
-                               testbed_row += "<td><img src='/static/img/testbeds/"+val.network_hrn+".png' alt='' /></td>";
-                               testbed_row += "<td>"+val.network_hrn+"</td>";
-                               testbed_row += "<td>"+val.network_longname+"</td>";
-                               testbed_row += "<td>"+val.description+"</td>";
-                               testbed_row += "</thead>";
        
-                               testbed_data.push(testbed_row);
-                       });
-               $("table#testbedList").html(testbed_data.join(''));
-               $("div#testbed-list-loaded").css("display","block");
-               $("div#testbed-list-loading").css("display","none");
-                       
-               $("input[type=checkbox]").click(function() {
-                       var cnt = 0;
-                       var id = $(this).val();
-                       var row = $(this).parent().parent()
-                       if (row.hasClass("active")) {
-                               row.removeClass("active");
-                       } else {
-                               row.addClass("active");
-                               }
-               });
-       });
        
        $("#objectList").load("/table/resource/", {"fields" : ["hostname","hrn","country","type"], "options": ["checkbox"] }, function(data) {
                $(this).dataTable( {
index 1c7ba2a..9056eb4 100644 (file)
@@ -1,12 +1,3 @@
-{% extends "layout.html" %}
-
-{% block content %}
-
-<div class="row">
-       <h1><img src="{{ STATIC_URL }}img/icon_slices_small.png" alt="Experiment Tools" /> Experiment Tools</h1>
-</div>
-<div class="row">
-
 <h2>Secure Shell (SSH)</h2>
 <p>
 Secure Shell (SSH) is a cryptographic network protocol for secure data communication, remote command-line login, remote command execution, and other secure network services between two networked computers that connects, via a secure channel over an insecure network, a server and a client (running SSH server and SSH client programs, respectively). The protocol specification distinguishes between two major versions that are referred to as SSH-1 and SSH-2.
@@ -27,7 +18,4 @@ OMF was originally developed for the ORBIT wireless testbed at Winlab, Rutgers U
 <p>In addition to the main OMF software, this site also hosts OMF sub-projects addressing various related aspects of a testbed's control, measurement, and management.</p>
 
 
-<p>More Info: <a href="http://mytestbed.net/projects/omf" target="_blank">http://mytestbed.net/projects/omf</a></p>
-
-</div>
-{% endblock %}
+<p>More Info: <a href="http://mytestbed.net/projects/omf" target="_blank">http://mytestbed.net/projects/omf</a></p>
\ No newline at end of file
index ec07303..3c30654 100644 (file)
@@ -54,8 +54,8 @@
                $('li.slices').mouseenter(function() {
                        $('div#menu-slice-list').fadeIn(100);
                });
-               $('li.slices').mouseleave(function() {
-                       $('div#menu-slice-list').fadeOut(100);
+               $('div#menu-slice-list').mouseleave(function() {
+                       $(this).fadeOut(100);
                });
                // var slices = localStorage.getItem('slices');
                // if (slices.length == 0) {
index e9bee5c..4051c62 100644 (file)
@@ -1,10 +1,10 @@
 {% extends "layout_wide.html" %}
 
 {% block head %}
-<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1RUj824JAiHRVqgc2CSIg4CpKHhh84Lw&sensor=false"></script>
+<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1RUj824JAiHRVqgc2CSIg4CpKHhh84Lw&sensor=false"></script> -->
 <script src="{{ STATIC_URL }}js/onelab_slice-resource-view.js"></script>
 <script>
-       myslice.slice = "{{ slice }}";
+       //myslice.slice = "{{ slice }}";
 </script>
 {% endblock %}
 
                <div id="select-platform" class="list-group">
                </div>
                        
-               <ul class="list-group">
+               <!-- <ul class="list-group">
                  <li class="list-group-item">Filter: CPU</li>
                  <li class="list-group-item">Filter: Interface</li>
                  <li class="list-group-item">...</li>
                  <li class="list-group-item">...</li>
                  <li class="list-group-item">...</li>
-               </ul>
+               </ul> -->
        
        </div>
        <div class="col-md-10" style="height:100%;">
                <div class="row">
                        {% include theme|add:"_widget-slice-sections.html" %}
                </div>
-               <div class="row slice-pending">
+               <!-- <div class="row slice-pending">
                        <ul class="nav nav-pills">
                                <li><a href="">Unreserved</a></li>
                                <li><a href="">Reserved</a></li>
                                        <div id="loading" style="display:none;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading" /></div>
                                </li>
                        </ul>
-               </div>
+               </div> -->
                <div class="row">
                        {% if msg %}
                        <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
                        {% endif %}
                </div>
                <div class="row">
-                       <ul class="nav nav-tabs nav-resources">
+                       <ul class="nav nav-pills nav-resources">
                          <li class="active"><a data-panel="resources" href="#">Resources</a></li>
                          <li><a data-panel="map" href="#">Map</a></li>
                          <li><a data-panel="pending" href="#">Pending</a></li>
@@ -56,7 +56,7 @@
                <div class="row" style="height:100%;">
                        <div id="resources" class="panel">
                 {{list_resources}}
-                               <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table>
+                               <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
                        </div>
                        <div id="map" class="panel" style="height:370px;display:none;">
                 {{map_resources}}
index b734564..48ba76f 100644 (file)
@@ -1,66 +1,32 @@
 {% extends "layout_wide.html" %}
 
+{% block head %}
+
+{% endblock %}
+
 {% block content %}
+
 <div class="wrapper">
        <div class="row">
                <div class="col-md-12">
-               {% include theme|add:"_widget-slice-sections.html" %}
+                       {% include theme|add:"_widget-slice-sections.html" %}
            </div>
        </div>
 </div>
+<div class="container-fluid tab-content">
+  <div class="tab-pane active row" id="info">...</div>
+  <div class="tab-pane row" id="testbeds">...</div>
+  <div class="tab-pane row" id="resources">...</div>
+  <div class="tab-pane row" id="users">...</div>
+  <div class="tab-pane row" id="statistics">...</div>
+  <div class="tab-pane row" id="measurements">...</div>
+  <div class="tab-pane row" id="experiment">...</div>
+</div>
 <div class="container-fluid">
        <div class="row">
                <div class="col-md-2">
-                       ll
                </div>
-               <div class="col-md-10">
-               <br>
-               <br>
-               <div id="slice-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></div>
-               <div id="slice-tab-loaded" style="display:none;">
-                   <table id="slice-tab">
-                   </table>
-               </div>
-               </div>
+               
        </div>
-</div>
-<script>
-    $(document).ready(function() {
-        $.post("/rest/slice/",{'filters':{'slice_hrn':'{{slice}}'}}, function( data ) {
-            var table_slices = [];
-            /* "slice_hrn", "slice_description", "slice_type", "parent_authority", "created", "nodes", "slice_url", "slice_last_updated", "user", "slice_urn", "slice_expires" */
-            $.each( data, function( key, val ) {
-                if(val.nodes=="undefined" || val.nodes==null){
-                    nodes_length=0;
-                }else{
-                    nodes_length=val.nodes.length;
-                }
-
-                if(val.user=="undefined" || val.user==null){
-                    user_length=0;
-                }else{
-                    user_length=val.user.length;
-                }
-
-                if(val.slice_url=="undefined" || val.slice_url==null){
-                    slice_url="";
-                }else{
-                    slice_url="<a href='"+val.slice_url+"' target='_blank'>"+val.slice_url+"</a>";
-                }
-                
-                slice_row = "<tr><td><b>Description:</b></td><td>"+val.slice_description+"</td></tr>";
-                slice_row += "<tr><td><b>url:</b></td><td><a href='"+val.slice_url+" target='_blank'>"+val.slice_url+"</a></td></tr>";
-                slice_row += "<tr><td><b>users:</b></td><td>"+user_length+"</td></tr>";
-                slice_row += "<tr><td><b>resources:</b></td><td>"+nodes_length+"</td></tr>";
-                slice_row += "<tr><td><b>created:</b></td><td>"+val.created+"</td></tr>";
-                slice_row += "<tr><td><b>last update:</b></td><td>"+val.last_updated+"</td></tr>";
-                slice_row += "<tr><td><b>expires:</b></td><td>"+val.slice_expires+"</td></tr>";
-                table_slices.push(slice_row);
-            });
-           $("table#slice-tab").html(table_slices.join( "" ));
-           $("div#slice-tab-loaded").css("display","block");
-           $("div#slice-tab-loading").css("display","none");
-        });
-    });
-</script>
+</div>         
 {% endblock %}
index 46d8656..052ab6b 100644 (file)
@@ -1,14 +1,21 @@
 <ul class="nav nav-tabs nav-sliceview">
-       <li class="active"><a href="/slice/{{ slice }}/"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
-       <li><a href="/testbeds/{{ slice }}/">Testbeds</a></li>
-       <li><a href="/resources/{{ slice }}/">Resources</a></li>
-       <li><a href="/users/{{ slice }}/">Users</a></li>
-       <li><a href="">Statistics</a></li>
-       <li><a href="">Measurements</a></li>
-       <li><a href="/portal/experiment">Experiment</a></li>
+       <li {% if section != "resources" %}class="active"{% endif %}><a href="#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
+       <li><a href="#testbeds">Testbeds</a></li>
+       <li {% if section == "resources" %}class="active"{% endif %}><a class="link" href="/resources/{{ slice }}">Resources</a></li>
+       <li><a href="#users">Users</a></li>
+       <li><a href="#experiment">Statistics</a></li>
+       <li><a href="#experiment">Measurements</a></li>
+       <li><a href="#experiment" data-toggle="tab">Experiment</a></li>
 </ul>
 <script>
-       $(document).ready(function() {
-               
+$(document).ready(function() {
+       $('.nav-sliceview a').click(function (e) {
+               if ($(this).hasClass('link')) return;
+               e.preventDefault();
+               $(this).tab('show');
+       var id = $(this).attr('href').substr(1);        
+       $("#" + id).load('/' + id + '/{{ slice }}/');
        });
+       $('div#info').load('/info/{{ slice }}/');
+});
 </script>
index b2f6835..f553758 100644 (file)
@@ -1,21 +1,46 @@
-{% extends "layout_wide.html" %}
-
-{% block content %}
-       <div class="col-md-2"></div>
-       <div class="col-md-10">
-               <div class="row">
-                       {% include theme|add:"_widget-slice-sections.html" %}
-               </div>
-               <div class="row">
-                       <ul class="nav nav-tabs">
-                         <li class="active"><a href="#">Testbeds</a></li>
-                         <li><a href="#"></a></li>
-                         <li><a href="#"></a></li>
-                       </ul>
-               </div>
-               <div id="testbed-list-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Testbeds" /></div>
-               <div id="testbed-list-loaded" style="display:none;">
-                       <table cellpadding="0" cellspacing="0" border="0" class="table" id="testbedList"></table>
-               </div>
-       </div>
-{% endblock %}
+<div id="testbed-list-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Testbeds" /></div>
+<div id="testbed-list-loaded" style="display:none;">
+       <table cellpadding="0" cellspacing="0" border="0" class="table" id="testbedList"></table>
+</div>
+<script>
+$(document).ready(function() {
+       $.post("/rest/network/", { "fields" : ["network_hrn", "network_longname", "description"]}, function(data) {
+                       var testbed_data = [];
+                       var testbed_row = "<thead>";
+                       testbed_row += "<tr>";
+                       testbed_row += "<th id=testbed_check><input type=\"checkbox\" name=\"network_hrn\" value=\"all\"/></th>";
+                       testbed_row += "<th id=testbed_icon></th>";
+                       testbed_row += "<th>network_hrn</th>";
+                       testbed_row += "<th>Full name</th>";
+                       testbed_row += "<th>Description</th>";
+                       testbed_row += "</tr>";
+                       testbed_row += "</thead>";
+                       testbed_data.push(testbed_row);
+                       $.each( data, function(key, val) {
+                               testbed_row = "<tr data-keys=\""+val.network_hrn+"\" class=\"odd\">"
+                               testbed_row += "<td><input type=\"checkbox\" name=\"network_hrn\" value=\""+val.network_hrn+"\"/></td>";
+                               testbed_row += "<td><img src='/static/img/testbeds/"+val.network_hrn+".png' alt='' /></td>";
+                               testbed_row += "<td>"+val.network_hrn+"</td>";
+                               testbed_row += "<td>"+val.network_longname+"</td>";
+                               testbed_row += "<td>"+val.description+"</td>";
+                               testbed_row += "</thead>";
+       
+                               testbed_data.push(testbed_row);
+                       });
+               $("table#testbedList").html(testbed_data.join(''));
+               $("div#testbed-list-loaded").css("display","block");
+               $("div#testbed-list-loading").css("display","none");
+                       
+               $("input[type=checkbox]").click(function() {
+                       var cnt = 0;
+                       var id = $(this).val();
+                       var row = $(this).parent().parent()
+                       if (row.hasClass("active")) {
+                               row.removeClass("active");
+                       } else {
+                               row.addClass("active");
+                       }
+               });
+       });
+});
+</script>