f4f: merging with current onelab protal templates
authorYasin <mohammed-yasin.rahman@lip6.fr>
Fri, 28 Nov 2014 14:05:17 +0000 (15:05 +0100)
committerYasin <mohammed-yasin.rahman@lip6.fr>
Fri, 28 Nov 2014 14:05:17 +0000 (15:05 +0100)
portal/templates/fed4fire/fed4fire_home-view.html
portal/templates/fed4fire/fed4fire_slice-resource-view.html [new file with mode: 0644]
portal/templates/fed4fire/fed4fire_slice-view.html [new file with mode: 0644]
portal/templates/fed4fire/fed4fire_slicerequest_view.html [new file with mode: 0644]
portal/templates/fed4fire/fed4fire_widget-slice-sections.html
portal/templates/fed4fire/fed4fire_widget-topmenu.html

index 4d844f3..f0d2387 100644 (file)
             </div>
 </div>
 <div class="container dashboard">
-          {%if 'no_creds'  in user_cred %}
-      <p class="command"><a href="#" style="color:red" data-toggle="modal" data-target="#myModal">NO CREDENTIALS</a> are delegated to the portal!</p>
-  {%endif%}
-        {%if 'creds_expired'  in user_cred %}
-    <p class="command"><a href="#" style="color:red" data-toggle="modal" data-target="#myModal">EXPIRED CREDENTIALS</a> Please delegate again your credentials to the portal!</p>
-    {%endif%}
-
        <div class="row">
+       {%if 'no_creds'  in user_cred %}
+       <p class="command"><a href="#" style="color:red" data-toggle="modal" data-target="#myModal">NO CREDENTIALS</a> are delegated to the portal!</p>
+       {%endif%}
+       {%if 'creds_expired'  in user_cred %}
+       <p class="command"><a href="#" style="color:red" data-toggle="modal" data-target="#myModal">EXPIRED CREDENTIALS</a> Please delegate again your credentials to the portal!</p>
+    {%endif%}
                {%if 'is_pi'  in pi %}
                <div class="col-md-3">
                        <h3>
                        <div>   
                                <div id="home-slice-list"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></div>
                        </div>
+                       <h3 title="Some tools do their own slice creation and management.">Experiment now</h3>
+                       <a class="btn btn-primary" style="width: 150px;" 
+                    href='http://jfed.iminds.be/releases/r1389/webstart/experimenter/jfed-experimenter.jnlp'
+                                       title="Click here to start your experiment with jFed" 
+                                       onclick="return  launchApplication('http://jfed.iminds.be/releases/r1389/webstart/experimenter/jfed-experimenter.jnlp');">
+                    <span class="glyphicon glyphicon-cloud"></span> jFed</a>
                </div>
                <div class="col-md-3">
                        <h3>MANAGEMENT</h3>
                        </ul>
                        </span>
                        </p>
-                       {%endif%}       
+                       {%endif%}
+                       <h3 title="Some tools do their own slice creation and management.">Experiment now</h3>
+                       <a class="btn btn-primary" style="width: 150px;" 
+                    href='http://jfed.iminds.be/releases/r1389/webstart/experimenter/jfed-experimenter.jnlp'
+                                       title="Click here to start your experiment with jFed" 
+                                       onclick="return  launchApplication('http://jfed.iminds.be/releases/r1389/webstart/experimenter/jfed-experimenter.jnlp');">
+                    <span class="glyphicon glyphicon-cloud"></span> jFed</a>   
                </div>
                <div class="col-md-4">
                        <h3>
         }
 });
 </script>
+
+<!--for jfed tool-->
+<script type="text/javascript" src="{{STATIC_URL}}js/fed4fire_dtjava_orig.js"></script>
+<script>
+       function launchApplication(jnlpfile) {
+       dtjava.launch(
+               { url : jnlpfile },
+            {
+               javafx : '2.2+',
+                toolkit: 'swing'
+               },
+                {}
+        );
+        return false;
+     }
+</script>
 {# widget "_widget-monitor.html" #}
 {# widget "_widget-stats-top-slices.html" #}
 
diff --git a/portal/templates/fed4fire/fed4fire_slice-resource-view.html b/portal/templates/fed4fire/fed4fire_slice-resource-view.html
new file mode 100644 (file)
index 0000000..3fefedf
--- /dev/null
@@ -0,0 +1,121 @@
+{% extends "layout_wide.html" %}
+{% load portal_filters %}
+
+{% block head %}
+<!-- <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 }}";
+
+$(document).ready(function() {
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+        // find the plugin object inside the tab content referenced by the current tabs
+        $('.plugin', $($(e.target).attr('href'))).trigger('shown.bs.tab');
+        $('.plugin', $($(e.target).attr('href'))).trigger('show');
+            });
+});
+</script>
+{% endblock %}
+
+{% block content %}
+{% widget '_widget-slice-sections.html' %}
+<div class="container-fluid container-resource">
+       <div class="row">
+       <div class="col-md-2">
+               <!-- <div id="select-platform" class="list-group"></div> -->
+               {{filter_testbeds}}
+       </div>
+       <div class="col-md-10" style="height:100%;">
+               <div class="row">
+                       {% if msg %}
+                       <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
+                       {% endif %}
+               </div>
+       
+               <div class="row">
+                       <div class="col-md-6">
+                               {{ filter_status }}
+                       </div>
+                       <div class="col-md-1">
+                               {{ apply }}
+                       </div>
+               </div>
+               <!--
+               <div class="list-group-item list-resources">
+                       <span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
+                       <a class="list-group-item active" data-panel="resources" href="#" style='display: inline-block !important;'>All</a>
+                       <a class="list-group-item" data-panel="reserved" href="#" style='display: inline-block !important;'>Reserved</a>
+                       <a class="list-group-item" data-panel="pending" href="#" style='display: inline-block !important;'>Pending <span class="badge" id="badge-pending" data-number="0"></span></a>
+               </div>
+               -->
+
+               <div class="row">
+                       <div class="col-md-12">
+                       <ul class="nav nav-tabs">
+                         <li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
+                         <li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
+                         <li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
+                       </ul>
+                       </div>
+               </div>
+               
+               <!-- Modal - columns selector -->
+               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+                       <div class="modal-dialog">
+                       <div class="modal-content">
+                               <div class="modal-header">
+                                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                                               <h4 class="modal-title" id="myModalLabel">Columns selector</h4>
+                               </div>
+                               <div class="modal-body">
+                                       {{columns_editor}}
+                               </div>
+                               <div class="modal-footer">
+                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                               </div>
+                       </div>
+                       </div>
+               </div>
+               
+               
+               <div class="row">
+                       <div class="col-md-12">
+                       <div class="tab-content" style="height:100%;">
+                               <div class="tab-pane active" id="resourcelist">
+                                        <!-- Button trigger modal - columns selector -->
+                                       <button class="btn btn-default btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
+                       {{list_resources}}
+                                       <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
+                               </div>
+                               <div class="tab-pane" id="resourcemap">
+                       {{map_resources}}
+                               </div>
+                               <div class="tab-pane" id="resourcescheduler">
+                       {{scheduler}}
+                               </div>
+       
+                               <!--
+                               <div id="reserved" class="tab-pane" style="height:370px;display:none;">
+                       <table width="80%">
+                           <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
+                           <tr>
+                               <td style="text-align:center">{{list_reserved_resources}}</td>
+                               <td style="text-align:center">{{list_reserved_leases}}</td>
+                           </tr>
+                       </table>
+                               </div>
+                               <div id="pending" class="tab-pane" style="height:370px;display:none;">
+                       {{pending_resources}}
+                               </div>
+                               <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
+                       {{sla_dialog}}
+                               </div>
+       -->
+       
+                       </div>
+               </div>
+       </div>
+       </div>
+       </div>
+</div>
+{% endblock %}
diff --git a/portal/templates/fed4fire/fed4fire_slice-view.html b/portal/templates/fed4fire/fed4fire_slice-view.html
new file mode 100644 (file)
index 0000000..c2d52c3
--- /dev/null
@@ -0,0 +1,18 @@
+{% extends "layout_wide.html" %}
+
+{% block head %}
+{% endblock %}
+
+{% block content %}
+{% include theme|add:"_widget-slice-sections.html" %}
+         
+<div class="container-fluid tab-content container-slice">
+  <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>         
+{% endblock %}
diff --git a/portal/templates/fed4fire/fed4fire_slicerequest_view.html b/portal/templates/fed4fire/fed4fire_slicerequest_view.html
new file mode 100644 (file)
index 0000000..211f35d
--- /dev/null
@@ -0,0 +1,108 @@
+{% extends "layout.html" %}
+{% load i18n %}
+
+{% block content %}
+       <div class="row">
+               <div class="col-md-12">
+                        <div class="breadcrumbs">
+                                Experiment &nbsp;>&nbsp; Request a new Slice
+                        </div>
+               </div>
+       </div>
+
+       {% if errors %}
+       <div class="row">
+               <div class="col-md-12">
+               <ul class="error">
+                 {% for error in errors %}
+                 <li>{{ error }}</li>
+                 {% endfor %}
+               </ul>
+               </div>
+       </div>
+       {% endif %}
+       
+       <div class="row">
+               <div class="col-md-8 el">
+                       <form role="form" method="post">
+                       {% csrf_token %}
+                         <div class="form-group" style="display:none">
+                           <input type="email" class="form-control" id="email" style="width:300px" value="{{ email }}" readonly="readonly">
+                         </div>
+                         <div class="form-group">
+                           <input type="text" class="form-control" name="slice_name" id="slice_name" style="width:300px" placeholder="Slice name" value="{{slice_name}}" 
+                               title="Please enter a name for your slice"required="required">
+                         </div>
+                         <div class="form-group">
+                               {%if 'is_pi'  in pi %}
+                               <input type="text" class="form-control" id="authority_hrn" name="org_name" style="width:300px" placeholder="Organization" 
+                               title="An authority responsible for vetting your slice" required="required">
+                               {%else%}
+                           <input type="text" class="form-control" id="authority_hrn" name="org_name" placeholder="Organization" style="width:300px;" 
+                               title="An authority responsible for vetting your slice" required="required" readonly>
+                               {%endif%}
+                         </div>
+                         <div class="form-group">
+                           <input type="text" class="form-control" name="url" id="url" style="width:300px" placeholder="Experiment URL (if one exists)"
+                               title="Please provide the url of your experiment if you have one." value="{{url}}">
+                         </div>
+                         <div class="form-group">
+                               <textarea id="purpose" name="purpose" class="form-control" rows="6" placeholder="Experiment purpose" style="width:300px" 
+                               title="Purpose of your experiment (informative)" required="required">{{ purpose }}</textarea>
+                         </div>
+                         {%if 'is_pi'  in pi %}        
+                         <button type="submit" id=submit_pi class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Create slice</button>
+                         {%else%}
+                         <button type="submit" class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Request slice</button>
+                         {%endif%}     
+                       </form>
+       
+               </div>
+       </div>
+               
+<script>
+jQuery(document).ready(function(){
+       
+       /*$("#authority_hrn").load("/rest/user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
+               var jsonData = JSON.parse(data);
+        $(this).attr("value", jsonData[0]['parent_authority']);
+    });*/
+       $("#authority_hrn").val("{{authority_name}}");
+       var availableTags = [
+    {% if authorities %}
+        {% for authority in authorities %}
+            {% if authority.name %}
+                {value:"{{ authority.name }}",label:"{{authority.name}}"},
+                       // to show only full name
+           // {% else %}
+           //     {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
+            {% endif %}
+        {% endfor %}    
+    {% else %}
+        {value:"",label:"No authority found !!!"}
+    {% endif %}
+    ];
+       // sorting the list
+       availableTags.sort(function(a,b){
+               var nameA=a.value.toLowerCase(), nameB=b.value.toLowerCase();
+               if (nameA < nameB) {
+               return -1;
+               }
+               if (nameA > nameB) {
+               return 1;
+               }
+       return 0;
+       }); 
+    $( "#authority_hrn" ).autocomplete({
+      source: availableTags,
+      minLength: 0,
+      select: function( event, ui ) {console.log(jQuery(this));}
+    });
+
+       $("#submit_pi").click(function() {
+               localStorage.clear();
+       });
+});
+</script>
+{% endblock %}
+
index 230a14d..40761b5 100644 (file)
@@ -1,29 +1,37 @@
+<div class="container">
+       <div class="row">
+               <div class="col-md-12">
+                        <div class="breadcrumbs">
+                                Experiment &nbsp;>&nbsp; Slice: {{ slice }}
+                        </div>
+               </div>
+       </div>
+</div>
+<div class="container-fluid container-slice">
+<div class="row">
+               <div class="col-md-12">
 {% if section == "resources" %}
 <ul class="nav nav-tabs nav-section">
-       <li><a href="/slice/{{ slice }}#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
-<!--   <li><a href="/slice/{{ slice }}#testbeds">Testbeds</a></li> -->
+       
+       <!-- <li><a href="/slice/{{ slice }}#testbeds">Testbeds</a></li> -->
        <li class="active"><a class="link" href="/resources/{{ slice }}">Resources</a></li>
        <li><a href="/slice/{{ slice }}#users">Users</a></li>
-       <li class="sla"><a href="/slice/{{ slice }}#sla">SLA</a></li>
-
-<!--   <li><a href="/slice/{{ slice }}#experiment">Statistics</a></li> 
-       <li><a href="/slice/{{ slice }}#measurements">Measurements</a></li>
-       <li><a href="/slice/{{ slice }}#experiment" data-toggle="tab">Experiment</a></li> -->
-
+       <li><a href="/slice/{{ slice }}#info">Information</a></li>
+       <!-- <li><a href="/slice/{{ slice }}#experiment">Statistics</a></li> -->
+       <!-- <li><a href="/slice/{{ slice }}#experiment">Measurements</a></li> -->
+       <li><a href="/slice/{{ slice }}#experiment">Tools</a></li>
 </ul>
 {% else %}
 <ul class="nav nav-tabs nav-section">
-       <li class="active"><a href="#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
-       <!--<li class="testbeds"><a href="#testbeds">Testbeds</a></li> -->
+       <!-- <li class="testbeds"><a href="#testbeds">Testbeds</a></li> -->
        <li><a class="link" href="/resources/{{ slice }}">Resources</a></li>
        <li class="users"><a href="#users">Users</a></li>
-
-       <!-- <li class="statistics"><a href="#experiment">Statistics</a></li>
-       <li class="measurements"><a href="#experiment">Measurements</a></li>
-       <li class="experiment"><a href="#experiment" data-toggle="tab">Experiment</a></li> -->
-       <li class="sla"><a href="#sla">SLA</a></li>
-
+       <li class="active"><a href="#info">Information</a></li>
+       <!-- <li class="statistics"><a href="#experiment">Statistics</a></li> -->
+       <!-- <li class="measurements"><a href="#experiment">Measurements</a></li> -->
+       <li class="experiment"><a href="#experiment">Tools</a></li>
 </ul>
+
 <script>
 $(document).ready(function() {
        $('.nav-tabs a').click(function (e) {
@@ -33,7 +41,16 @@ $(document).ready(function() {
        var id = $(this).attr('href').substr(1);        
        $("#" + id).load('/' + id + '/{{ slice }}/');
        });
-       $('div#info').load('/info/{{ slice }}/');
+       
+       var hash = window.location.hash;
+       if (hash) {
+               $('.nav-tabs a[href='+hash+']').click();
+       } else {
+               $('div#info').load('/info/{{ slice }}/');
+       }
 });
 </script>
 {% endif %}
+</div>
+</div>
+</div>
\ No newline at end of file
index 8bce7dd..ddb4518 100644 (file)
@@ -20,7 +20,7 @@
                <ul>
                        <li id="nav-account"><a href="/portal/account/">{{ username }}</a></li>
                        <li>|</li>
-                       <li id="nav-institution" class=""><a href="/portal/institution">AUTHORITY</a></li>
+                       <!--<li id="nav-institution" class=""><a href="/portal/institution">AUTHORITY</a></li>-->
                        <li class="slices">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                        SLICES <span class="caret"></span>