Merge 7510afa into b87e6dd

Gemfile

@@ -49,6 +49,9 @@ gem 'bootstrap', '~> 4.3.1'
 gem 'devise-bootstrap-views', '~> 1.0'
 gem 'devise-i18n'
 gem 'jquery-rails'
+# Jquery datatables ruby gems for assets pipeline, https://datatables.net/
+# https://github.com/mkhairi/jquery-datatables
+gem 'jquery-datatables'
 
 # Ruby interface to the VMware vSphere API
 # https://github.com/vmware/rbvmomi

Gemfile.lock

@@ -172,6 +172,7 @@ GEM
     jbuilder (2.8.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    jquery-datatables (1.10.19.1)
     jquery-rails (4.3.3)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
@@ -435,6 +436,7 @@ DEPENDENCIES
   git
   guard
   jbuilder (~> 2.5)
+  jquery-datatables
   jquery-rails
   listen (>= 3.0.5, < 3.2)
   mina

app/assets/javascripts/application.js

@@ -17,12 +17,13 @@
 //= require popper
 //= require bootstrap
 //= require doughnut_chart
-//= require filter_table
-//= require sort_table
 //= require prevent_anchor_reload
-//= require_tree .
 //= require select2
 //= require clipboard
+// Contains code for initializing and configuring datatables
+// app/assets/javascripts/datatables.js
+//= require datatables
+//= require_tree .
 
 // With Turbolinks, jQuery $(document).ready events fire only in response
 // to the initial page load, not after any subsequent page changes

app/assets/javascripts/datatables.js

@@ -0,0 +1,29 @@
+//= require datatables/jquery.dataTables
+//= require datatables/dataTables.bootstrap4
+
+// Global settings and initializer for all datatables
+$.extend( $.fn.dataTable.defaults, {
+  // https://datatables.net/reference/option/responsive
+  responsive: true,
+  // https://datatables.net/reference/option/pagingType
+  pagingType: 'simple_numbers'
+  // https://datatables.net/reference/option/dom
+  //dom:
+  //  "<'row'<'col-sm-4 text-left'f><'right-action col-sm-8 text-right'<'buttons'B> <'select-info'> >>" +
+  //  "<'row'<'dttb col-12 px-0'tr>>" +
+  //  "<'row'<'col-sm-12 table-footer'lip>>"
+});
+
+// Initialization on turbolinks load
+$(document).on('turbolinks:load', function() {
+  if (!$.fn.DataTable.isDataTable('table[data-toggle="datatable"]')) {
+    $('table[data-toggle="datatable"]').DataTable();
+  }
+});
+
+// Turbolinks cache fix
+// https://stackoverflow.com/questions/41070556
+$(document).on('turbolinks:before-cache', function() {
+  $($.fn.dataTable.tables(true)).DataTable().destroy();
+});
+

app/assets/stylesheets/application.scss

@@ -20,7 +20,24 @@ $danger: #a80833;
 $primary-active: #1f6993;
 $primary-hover: #1a5b82;
 
+// https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
+// Custom bootstrap variables must be set or imported *before* bootstrap.
 @import "bootstrap";
+// Bootstrap styling for datatables
+// https://github.com/mkhairi/jquery-datatables#stylesheets
+@import 'datatables/dataTables.bootstrap4';
+// optional datatables styles for extensions, include when used
+//@import 'datatables/extensions/AutoFill/autoFill.bootstrap4';
+//@import 'datatables/extensions/Buttons/buttons.bootstrap4';
+//@import 'datatables/extensions/ColReorder/colReorder.bootstrap4';
+//@import 'datatables/extensions/FixedColumns/fixedColumns.bootstrap4';
+//@import 'datatables/extensions/FixedHeader/fixedHeader.bootstrap4';
+//@import 'datatables/extensions/KeyTable/keyTable.bootstrap4';
+//@import 'datatables/extensions/Responsive/responsive.bootstrap4';
+//@import 'datatables/extensions/RowGroup/rowGroup.bootstrap4';
+//@import 'datatables/extensions/RowReorder/rowReorder.bootstrap4';
+//@import 'datatables/extensions/Scroller/scroller.bootstrap4';
+//@import 'datatables/extensions/Select/select.bootstrap4';
 
 th {
   @extend .text-white;
@@ -34,13 +51,12 @@ html, body {
 }
 
 .page-container {
-  margin: 50px 0 0 50px;
+  margin: 25px 0 0 50px;
   width: calc(100% - 100px);
 }
 
 h1 {
   color: $primary;
-  margin-bottom: .5em;
 }
 
 .dashboard-header-link {
@@ -83,33 +99,10 @@ body {
   width: auto;
 }
 
-.empty-table-label {
-  text-align: center;
-  padding-top: 1.2em;
-}
-
-.table-bar {
-  width: auto;
-  border: 0;
-  margin: 1.5em 0 1em;
-
-  td {
-    padding-right: 20px;
-  }
-}
-
-.table-flex-width {
-  width: auto;
-}
-
 .unread {
   background-color: #e6f3ff;
 }
 
-.bulletless {
-  list-style-type: none;
-}
-
 #menu-profile-dropdown {
   padding-top: 3px;
 }

app/assets/stylesheets/requests.scss

@@ -30,10 +30,6 @@ label {
   margin-right: 5px;
 }
 
-h1{
-  margin-bottom: 1em;
-}
-
 /* Selected items on top */
 .select2-selection__choice {
 	background-color: #0C415F !important;

app/assets/stylesheets/vms.scss

@@ -7,25 +7,6 @@
     flex: 1;
 }
 
-.table-bar {
-  width: auto;
-  border: 0;
-  margin: 1.5em 0 1em;
-
-  td {
-    padding-right: 20px;
-  }
-}
-
-.create-form {
-  width: auto;
-  padding-bottom: 1.5em;
-}
-
-.login-form-group {
-  padding-bottom: 1.5em;
-}
-
 .round {
   height: 1rem;
   width: 1rem;
@@ -34,7 +15,3 @@
   margin-right: 0.5rem;
   display: inline-block;
 }
-
-.script-doc::before {
-  content: "\1F4CE";
-}

app/views/application/_footer.html.erb

@@ -15,13 +15,3 @@
     </div>
   </div>
 </div>
-
-<!-- Minified script sources for sortable tables -->
-<!-- Included in the footer because it is used by almost every index page -->
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css"
-      xmlns="http://www.w3.org/1999/html">
-<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
-<script>
-  // by default we only want to sort plain text, not the html elements
-  jQuery.fn.bootstrapTable.columnDefaults.sorter = sortWithoutHTML;
-</script>

app/views/dashboard/_widget.erb

@@ -8,7 +8,8 @@
       </div>
     <% end %>
     <div class="card-body">
-      <%= render 'vms/table', {vms: vms, id: id, buttons: buttons} %>
+      <%= render 'vms/table', {vms: vms, id: id, buttons: buttons,
+        datatable_options: {searching: false, paging: false, info:false}} %>
     </div>
   </div>
 <% end %>

app/views/hosts/index.html.erb

@@ -1,31 +1,27 @@
-<h1 class="float-left">Hosts</h1>
+<h1>Hosts</h1>
 
-<input class="filter-box float-left ml-3 mt-2" type="text" id="filter" onkeyup="filterTable('filter', 'hosts')" placeholder="Search hosts">
-
-<table data-toggle="table" class="table" id="hosts">
+<table class="table" id="hosts" data-toggle="datatable">
   <thead>
-  <tr>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-left">Name</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Vendor</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Model</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-right">Status</th>
-  </tr>
+    <tr>
+      <th>Name</th>
+      <th>Vendor</th>
+      <th>Model</th>
+      <th>Status</th>
+    </tr>
   </thead>
   <tbody>
   <% @hosts.each do |host| %>
     <tr>
-      <td class="table-active">
-        <%= link_to host.name, {controller: :hosts, action: 'show', id: host.name}, method: :get %>
-      </td>
-      <td class="table-active"><%= host.vendor %></td>
-      <td class="table-active"><%= host.model %></td>
-      <td class="table-active align-middle">
-        <div class="round 
-          <%= host.connection_state == 'connected' ? 'bg-success' : 'bg-warning'  %>"
-          title="<%= host.connection_state %>">
-        </div>
+      <td><%= link_to host.name, host_path(host.name) %></td>
+      <td><%= host.vendor %></td>
+      <td><%= host.model %></td>
+      <td data-order="<%= host.connection_state %>" data-search="<%= host.connection_state %>">
+        <%= content_tag :div, nil,
+          title: host.connection_state,
+          :data => { toggle: 'tooltip', placement: 'right' },
+          class: "round #{host.connection_state == 'connected' ? 'bg-success' : 'bg-warning'}" %>
       </td>
     </tr>
-  <% end %>
+  <% end %> <%# @hosts.each %>
   </tbody>
 </table>

app/views/operating_systems/index.html.erb

@@ -1,29 +1,32 @@
 <h1>Operating Systems</h1>
 
-<table class="table-bar">
-  <tbody>
-    <tr>
-      <td>
-        <%=link_to(fa_icon('plus'),
-        {controller: :operating_systems, action: 'new'},
-        method: :get, class: 'btn btn-primary', id: 'createNewProjectButton') %>
-      </td>
-    </tr></tbody></table>
+<%= link_to fa_icon('plus'), new_operating_system_path,
+  title: 'Add new OS',
+  :data => { toggle: 'tooltip', placement: 'left' },
+  class: 'btn btn-primary float-right' %>
 
-<table class="table">
+
+<table class="table" data-toggle="datatable">
   <thead>
     <tr>
       <th>Name</th>
-      <th colspan="3"></th>
+      <%# https://datatables.net/reference/option/columns.orderable %>
+      <th data-orderable="false">Actions</th>
     </tr>
   </thead>
-
   <tbody>
-    <% @operating_systems.each do |operating_system| %>
+    <% @operating_systems.each do |os| %>
       <tr>
-        <td><%= operating_system.name %></td>
-        <td><%= link_to 'Edit', edit_operating_system_path(operating_system), class: "btn btn-primary" %></td>
-        <td><%= link_to 'Delete', operating_system, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %></td>
+        <td><%= os.name %></td>
+        <td>
+          <%= link_to fa_icon('pencil'), edit_operating_system_path(os),
+            title: 'Edit',
+            class: "btn btn-sm btn-primary" %>
+          <%= link_to fa_icon('trash'), os, method: :delete,
+            title: 'Delete',
+            data: { confirm: "Are you sure you want to delete '#{os.name}'?" },
+            class: "btn btn-sm btn-danger" %>
+        </td>
       </tr>
     <% end %>
   </tbody>