From 45e33ee184cb787b19549e23121efad559497007 Mon Sep 17 00:00:00 2001
From: lombardofr <lombardo@everyup.it>
Date: Wed, 18 Jul 2018 19:22:37 +0200
Subject: [PATCH] enhanced datatables

Change-Id: I06744028ce50c3683481a3a26c5c0c63561581d4
Signed-off-by: lombardofr <lombardo@everyup.it>
---
 instancehandler/template/instance_list.html   |  9 ++++++++
 .../template/instance_list_ns.html            |  6 ++---
 .../template/instance_list_vnf.html           |  2 +-
 .../osm/descriptor/descriptorlist.html        |  4 ++--
 .../project/osm/osm_project_descriptors.html  |  4 ++++
 .../template/project/projectlist.html         |  9 ++++++++
 sdnctrlhandler/template/sdn_list.html         | 16 +++++++++-----
 userhandler/templates/user_list.html          |  9 +++++++-
 vimhandler/template/vim_list.html             | 22 +++++++++----------
 9 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/instancehandler/template/instance_list.html b/instancehandler/template/instance_list.html
index 5471c19..3b8ffcf 100644
--- a/instancehandler/template/instance_list.html
+++ b/instancehandler/template/instance_list.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css">
     <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
     <link rel="stylesheet" href="/static/css/lwuitable.css">
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -70,6 +71,14 @@
     <script src="/static/bower_components/codemirror/keymap/sublime.js"></script>
     <script src="/static/src/instancehandler/instance_list.js"></script>
     <script src="/static/src/instancehandler/instance_create.js"></script>
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+
+    <script>
+    $(document).ready( function () {
+        $('#instances_table').DataTable();
+    } );
+    </script>
 
 {% endblock %}
 
diff --git a/instancehandler/template/instance_list_ns.html b/instancehandler/template/instance_list_ns.html
index 2481d87..48695cd 100644
--- a/instancehandler/template/instance_list_ns.html
+++ b/instancehandler/template/instance_list_ns.html
@@ -17,8 +17,8 @@
         <table id="instances_table" class="table table-bordered table-striped">
             <thead>
             <tr>
-                <th>Id</th>
                 <th>Name</th>
+                <th>Identifier</th>
                 <th>Nsd name</th>
                 <th style="width:5%">Operational Status</th>
                 <th style="width:5%">Config Status</th>
@@ -29,9 +29,9 @@
             <tbody>
             {% for i in instances %}
                 <tr>
-
-                    <td>{{ i|get:"_id" }}</td>
                     <td>{{ i|get:"short-name" }}</td>
+                    <td>{{ i|get:"_id" }}</td>
+
                     <td>{{ i|get:"nsd-name-ref" }}</td>
 
                     {% if i|get:"operational-status" == 'failed' %}
diff --git a/instancehandler/template/instance_list_vnf.html b/instancehandler/template/instance_list_vnf.html
index b8fd9cc..5f13f2b 100644
--- a/instancehandler/template/instance_list_vnf.html
+++ b/instancehandler/template/instance_list_vnf.html
@@ -16,7 +16,7 @@
         <table id="instances_table" class="table table-bordered table-striped">
             <thead>
             <tr>
-                <th>Id</th>
+                <th>Identifier</th>
                 <th>VNFD</th>
                 <th>Member Index</th>
                 <th>NS</th>
diff --git a/projecthandler/template/project/osm/descriptor/descriptorlist.html b/projecthandler/template/project/osm/descriptor/descriptorlist.html
index ee3eaa7..734259f 100644
--- a/projecthandler/template/project/osm/descriptor/descriptorlist.html
+++ b/projecthandler/template/project/osm/descriptor/descriptorlist.html
@@ -21,8 +21,8 @@
                    role="grid">
                 <thead>
                 <tr role="row">
-                    <th>Id</th>
                     <th>Name</th>
+                    <th>Identified</th>
                     <th>Description</th>
                     <th style="width:10%">Vendor</th>
                     <th style="width:5%">Version</th>
@@ -32,8 +32,8 @@
                 <tbody>
                 {% for k in descriptors %}
                     <tr role="row">
-                        <td>{{ k|get:"_id" }}</td>
                         <td>{{ k|get:"short-name" }} </td>
+                        <td>{{ k|get:"_id" }}</td>
                         <td>{{ k|get:"description" }} </td>
                         <td>{{ k|get:"vendor" }} </td>
                         <td>{{ k|get:"version" }} </td>
diff --git a/projecthandler/template/project/osm/osm_project_descriptors.html b/projecthandler/template/project/osm/osm_project_descriptors.html
index 10df788..f877ea8 100644
--- a/projecthandler/template/project/osm/osm_project_descriptors.html
+++ b/projecthandler/template/project/osm/osm_project_descriptors.html
@@ -49,6 +49,10 @@
     var csrf_token = '{{csrf_token}}';
     var descr_list_url = '{% url "projects:list_descriptors"   descriptor_type=descriptor_type%}';
     var new_desc_url ="{% url 'projects:new_descriptor'  descriptor_type=descriptor_type %}"
+    $(document).ready( function () {
+        $('#descriptors_table').DataTable();
+    } );
+
     </script>
     <script src="/static/bower_components/select2/dist/js/select2.js"></script>
     <script src="/static/src/instancehandler/instance_create.js"></script>
diff --git a/projecthandler/template/project/projectlist.html b/projecthandler/template/project/projectlist.html
index ed8b583..213c5b0 100644
--- a/projecthandler/template/project/projectlist.html
+++ b/projecthandler/template/project/projectlist.html
@@ -5,6 +5,7 @@
 
 {% block head_block %}
   	{{ block.super }}
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 
 {% endblock %}
 {% block title_header_big %}
@@ -92,6 +93,14 @@
 
 {% block resource_block %}
   	{{ block.super }}
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+
+    <script>
+    $(document).ready( function () {
+        $('#projects_table').DataTable();
+    } );
+    </script>
     <script>
     function showModalNewProject(){
         $('#modal_new_project').modal('show');
diff --git a/sdnctrlhandler/template/sdn_list.html b/sdnctrlhandler/template/sdn_list.html
index 627278c..423efcd 100644
--- a/sdnctrlhandler/template/sdn_list.html
+++ b/sdnctrlhandler/template/sdn_list.html
@@ -5,6 +5,7 @@
 
 {% block head_block %}
     {{ block.super }}
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 
 {% endblock %}
 {% block title_header_big %}
@@ -36,11 +37,11 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <table id="projects_table" class="table table-bordered table-striped">
+                    <table id="sdns_table" class="table table-bordered table-striped">
                         <thead>
                         <tr>
-                            <th>Id</th>
                             <th>Name</th>
+                            <th>Identifier</th>
                             <th>Type</th>
                             <th>Operational State</th>
                             <th>IP</th>
@@ -52,8 +53,8 @@
                         <tbody>
                         {% for s in sdns %}
                             <tr>
-                                <td>{{ s|get:"_id" }}</td>
                                 <td>{{ s|get:"name" }}</td>
+                                <td>{{ s|get:"_id" }}</td>
                                 <td>{{ s|get:"type" }}</td>
                                 <td>{{ s|get_sub:"_admin,operationalState"}}</td>
                                 <td>{{ s|get:"ip" }}</td>
@@ -84,10 +85,15 @@
     {{ block.super }}
     <!-- moment JS -->
     <script src="/static/bower_components/moment/moment.js"></script>
-
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
     <script src="/static/src/sdnctrlhandler/sdn_list.js"></script>
 
-
+     <script>
+    $(document).ready( function () {
+        $('#sdns_table').DataTable();
+    } );
+    </script>
 {% endblock %}
 
 {% block footer %}
diff --git a/userhandler/templates/user_list.html b/userhandler/templates/user_list.html
index f8fa6ac..8d7e84a 100644
--- a/userhandler/templates/user_list.html
+++ b/userhandler/templates/user_list.html
@@ -7,6 +7,7 @@
 {% block head_block %}
     {{ block.super }}
     <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -94,9 +95,15 @@
 
 {% block resource_block %}
     {{ block.super }}
-    <!-- moment JS -->
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
     <script src="/static/bower_components/select2/dist/js/select2.js"></script>
     <script src="/static/src/userhandler/user_list.js"></script>
+    <script>
+    $(document).ready( function () {
+    $('#users_table').DataTable();
+    } );
+    </script>
 
 
 {% endblock %}
diff --git a/vimhandler/template/vim_list.html b/vimhandler/template/vim_list.html
index d1b9545..6823c72 100644
--- a/vimhandler/template/vim_list.html
+++ b/vimhandler/template/vim_list.html
@@ -5,7 +5,7 @@
 
 {% block head_block %}
     {{ block.super }}
-
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -38,11 +38,11 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <table id="projects_table" class="table table-bordered table-striped">
+                    <table id="vims_table" class="table table-bordered table-striped">
                         <thead>
                         <tr>
-                            <th>Id</th>
                             <th>Name</th>
+                            <th>Identifier</th>
                             <th>Type</th>
                             <th>Operational State</th>
                             <th>Description</th>
@@ -53,9 +53,8 @@
                         {% for p in datacenters %}
 
                             <tr>
-
-                                <td>{{ p|get:"_id" }}</td>
                                 <td>{{ p|get:"name" }}</td>
+                                <td>{{ p|get:"_id" }}</td>
                                 <td>{{ p|get:"vim_type" }}</td>
                                 <td>{{ p|get_sub:"_admin,operationalState"}}</td>
                                 <td>{{ p|get_sub:"_admin,description" }}</td>
@@ -85,8 +84,13 @@
 
 {% block resource_block %}
     {{ block.super }}
-    <!-- Utility JS -->
-
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+    <script>
+    $(document).ready( function () {
+        $('#vims_table').DataTable();
+    } );
+    </script>
     <script>
 
         function deleteVim(url) {
@@ -99,7 +103,3 @@
     </script>
 
 {% endblock %}
-
-{% block footer %}
-    {% include "footer.html"  %}
-{% endblock %}
\ No newline at end of file
-- 
2.17.1