Merge branch 'dev' into #431/EditIpAndDns

README.md

@@ -10,8 +10,7 @@ dev    | [![Build Status](https://travis-ci.com/hpi-swt2/vm-portal.svg?branch=de
 ## Deployment
 
 The application requires access to internal resources, which are not directly available from the general internet.
-Therefore, the application is deployed on university servers. Both the 'dev' and 'master' branch are deployed:
-* master: http://hart.epic-hpi.de/ [![Uptime Robot status](https://img.shields.io/uptimerobot/status/m781547334-011e36636240414faf7c51e1.svg)](https://stats.uptimerobot.com/j8DADFQnv)
+Therefore, the application is deployed on university servers.
 * dev: http://hart-dev.epic-hpi.de/ [![Uptime Robot status](https://img.shields.io/uptimerobot/status/m781547337-b65c7b3660b7a0ddeee7c5c5.svg)](https://stats.uptimerobot.com/j8DADFQnv)
 
 An overview of the status of all involved systems is available here: https://stats.uptimerobot.com/j8DADFQnv

app/assets/javascripts/application.js

@@ -18,6 +18,7 @@
 //= require bootstrap
 //= require doughnut_chart
 //= require filter_table
+//= require sort_table
 //= require prevent_anchor_reload
 //= require_tree .
 //= require select2

app/assets/javascripts/filter_table.js

@@ -1,21 +1,19 @@
 function filter_table(input_id, table_id, doc) {
-  // Declare variables 
-  var input, filter, table, tr, td, i, j, txtValue;
-  input = doc.getElementById(input_id);
-  filter = input.value.toUpperCase();
-  table = doc.getElementById(table_id);
-  tr = table.getElementsByTagName("tr");
+  let input = doc.getElementById(input_id);
+  let filters = input.value.toUpperCase().split(/[ ,]+/);
+  let table = doc.getElementById(table_id);
+  let tableBody = table.getElementsByTagName("tbody")[0];
+  let tr = tableBody.getElementsByTagName("tr");
 
   // Loop through all table rows, and hide those who don't match the search query
-  for (i = 0; i < tr.length; i++) {
-    td = tr[i].getElementsByTagName("td");
-    for (j = 0; j < td.length; j++) {
-        txtValue = td[j].textContent || td[j].innerText;
-        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-            tr[i].style.display = "";
-            break;
-        }
-        tr[i].style.display = "none";
+  for (let rowIndex = 0; rowIndex < tr.length; rowIndex++) {
+    let td = tr[rowIndex].getElementsByTagName("td");
+    let remainingFilters = filters;
+    for (let columnIndex = 0; columnIndex < td.length; columnIndex++) {
+      let column = td[columnIndex];
+      let txtValue = (column.dataset && column.dataset.filterValue) || column.textContent || column.innerText;
+      remainingFilters = remainingFilters.filter((filter) => txtValue.toUpperCase().indexOf(filter) < 0);
     }
+    tr[rowIndex].style.display = remainingFilters.length > 0 ? "none" : "";
   }
 }

app/assets/javascripts/sort_table.js

@@ -0,0 +1,8 @@
+function sortWithoutHTML(a, b) {
+  function stripHTML(html) {
+    let tmp = document.createElement("DIV");
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || "";
+  }
+  return stripHTML(a).localeCompare(stripHTML(b))
+}

app/assets/stylesheets/application.scss

@@ -14,7 +14,8 @@
  *= require_self
  *= require_tree .
  */
-
+@import "application/filter-box";
+@import "application/table";
 
 .bulletless {
   list-style-type: none;
@@ -23,3 +24,4 @@
 #menu-profile-dropdown {
   padding-top: 3px;
 }
+

app/assets/stylesheets/application/custom_bootstrap.scss

@@ -0,0 +1,7 @@
+$primary: #0C415F;
+$danger: #a80833;
+$success: #d7e76f;
+$primary-active: #1f6993;
+$primary-hover: #1a5b82;
+
+@import "bootstrap";

app/assets/stylesheets/application/filter-box.scss

@@ -0,0 +1,27 @@
+@import "custom_bootstrap";
+
+$placeholder-color: Silver;
+
+.filter-box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: $placeholder-color;
+  opacity: 1; /* Firefox */
+}
+
+.filter-box:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: $placeholder-color;
+}
+
+.filter-box::-ms-input-placeholder { /* Microsoft Edge */
+  color: $placeholder-color;
+}
+
+.filter-box {
+  padding: 0.3rem 0.5rem;
+  width: 20%;
+
+  @extend .mb-3;
+  @extend .bg-secondary;
+  @extend .border-0;
+  @extend .rounded;
+  @extend .text-white;
+}

app/assets/stylesheets/application/table.scss

@@ -0,0 +1,6 @@
+@import "custom_bootstrap";
+
+th{
+  @extend .text-white;
+  @extend .bg-primary;
+}

app/assets/stylesheets/layout.scss

@@ -1,10 +1,4 @@
-$primary: #0C415F;
-$danger: #a80833;
-$success: #d7e76f;
-$primary-active: #1f6993;
-$primary-hover: #1a5b82;
-
-@import "bootstrap";
+@import "application/custom_bootstrap";
 
 html, body {
   height: 100%;

app/assets/stylesheets/vms.scss

@@ -95,10 +95,3 @@ h2{
   color: black;
   filter: drop-shadow(2px 2px 1px $secondary);
 }
-
-.filter-box {
-  padding: 0.3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  width: 20%;
-}

app/views/application/_footer.html.erb

@@ -15,3 +15,13 @@
     </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/hosts/index.html.erb

@@ -29,9 +29,4 @@
     </tr>
   <% end %>
   </tbody>
-</table>
-
-<!-- Minified script sources for sortable tables -->
-<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>
+</table>

app/views/requests/index.html.erb

@@ -18,19 +18,19 @@
 
 <h2 id="pending">Pending requests</h2>
 
-<input class="mb-3 bg-secondary border-0 rounded text-white filter-box" type="text" id="filter_pending" onkeyup="filter_table('filter_pending', 'requests_pending', document)" placeholder="Search">
+<input class="filter-box" type="text" id="filter_pending" onkeyup="filter_table('filter_pending', 'requests_pending', document)" placeholder="Search">
 
 <table data-toggle="table" class="table" id="requests_pending">
   <thead>
   <tr>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-left">VM Name</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">CPU Cores</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">RAM</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">HDD</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">OS</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Port</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Application Name</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-right">Comment</th>
+    <th scope="col" data-sortable="true" class="rounded-left">VM Name</th>
+    <th scope="col" data-sortable="true">CPU Cores</th>
+    <th scope="col" data-sortable="true">RAM</th>
+    <th scope="col" data-sortable="true">HDD</th>
+    <th scope="col" data-sortable="true">OS</th>
+    <th scope="col" data-sortable="true">Port</th>
+    <th scope="col" data-sortable="true">Application Name</th>
+    <th scope="col" data-sortable="true" class="rounded-right">Comment</th>
   </tr>
   </thead>
   <tbody>
@@ -53,20 +53,20 @@
 
 <h2 id="resolved">Resolved requests</h2>
 
-<input class="mb-3 bg-secondary border-0 rounded text-white filter-box" type="text" id="filter_resolved" onkeyup="filter_table('filter_resolved', 'requests_resolved', document)" placeholder="Search">
+<input class="filter-box" type="text" id="filter_resolved" onkeyup="filter_table('filter_resolved', 'requests_resolved', document)" placeholder="Search">
 
 <table data-toggle="table" class="table" id="requests_resolved">
   <thead>
   <tr>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-left">VM Name</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">CPU Cores</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">RAM</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">HDD</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">OS</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Port</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Application Name</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white">Comment</th>
-    <th scope="col" data-sortable="true" class="bg-primary text-white rounded-right">Status</th>
+    <th scope="col" data-sortable="true" class="rounded-left">VM Name</th>
+    <th scope="col" data-sortable="true">CPU Cores</th>
+    <th scope="col" data-sortable="true">RAM</th>
+    <th scope="col" data-sortable="true">HDD</th>
+    <th scope="col" data-sortable="true">OS</th>
+    <th scope="col" data-sortable="true">Port</th>
+    <th scope="col" data-sortable="true">Application Name</th>
+    <th scope="col" data-sortable="true">Comment</th>
+    <th scope="col" data-sortable="true" class="rounded-right">Status</th>
   </tr>
   </thead>
   <tbody>
@@ -116,9 +116,4 @@
       </tr>
     <% end %>
   </tbody>
-</table>
-
-<!-- Minified script sources for sortable tables -->
-<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>
+</table>

app/views/servers/index.html.erb

@@ -6,15 +6,15 @@
   <% end %>
 </div>
 
-<input class="mb-3 bg-secondary border-0 rounded text-white filter-box" type="text" id="filter" onkeyup="filter_table('filter', 'servers', document)" placeholder="Search">
+<input class="filter-box" type="text" id="filter" onkeyup="filter_table('filter', 'servers', document)" placeholder="Search">
 
 <table data-toggle="table" class="table" id="servers">
   <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">Responsible</th>
+    <th scope="col" data-sortable="true" class="rounded-left">Name</th>
+    <th scope="col" data-sortable="true">Vendor</th>
+    <th scope="col" data-sortable="true">Model</th>
+    <th scope="col" data-sortable="true" class="rounded-right">Responsible</th>
   </tr>
   </thead>
   <tbody>
@@ -27,9 +27,4 @@
     </tr>
   <% end %>
   </tbody>
-</table>
-
-<!-- Minified script sources for sortable tables -->
-<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>
+</table>

app/views/users/index.html.erb

@@ -1,30 +1,26 @@
 <h1>Users</h1>
-<small class="text-muted">This is the overview page for all currently existing users.</small><br /><br />
 
-<%= form_with url: users_path, method: :get, class: 'form-inline', local: true do |form|  %>
-  <%= form.text_field :search, value: params[:search] || '', placeholder: 'Name', class: 'form-control mb-2 mr-sm-2'%>
-  <%= form.select :role, options_for_select(User.roles.merge(all: ''), params[:role] || ''), {}, {class: 'form-control mb-2 mr-sm-2'} %>
-  <%= form.submit 'Search', class: 'btn btn-primary mb-2' %>
-<% end %>
+<input class="filter-box" type="text" id="filter_users" onkeyup="filter_table('filter_users', 'users', document)" placeholder="Search">
 
-
-<table class="table">
+<table data-toggle="table" class="table" id="users">
   <thead>
-    <th><%= User.human_attribute_name('name') %></th>
-    <th><%= User.human_attribute_name('email') %></th>
+    <th scope="col" data-sortable="true" class="rounded-left"><%= User.human_attribute_name('name') %></th>
+    <th scope="col" data-sortable="true"><%= User.human_attribute_name('email') %></th>
     <% if current_user.admin? %>
-      <th><%= User.human_attribute_name('role') %></th>
+      <th scope="col" data-sortable="true"><%= User.human_attribute_name('role') %></th>
     <% end %>
-    <th><%= User.human_attribute_name('last_sign_in_at') %></th>
-    <th></th>
+    <th scope="col" data-sortable="true" class="rounded-right"><%= User.human_attribute_name('last_sign_in_at') %></th>
   </thead>
   <tbody>
     <% @users.each do |user| %>
       <tr>
         <td><%= link_to user.name, user_path(user) %></td>
         <td><%= user.email %></td>
         <% if current_user.admin? %>
-          <td>
+          <td data-filter-value="<%= user.role %>">
+            <!-- add a hidden HTML element as the first element that will be used for sorting -->
+            <p class="d-none"><%= user.role %></p>
+
             <div class="btn-group
                         border
                         border-<%= if last_admin?(user) && current_user?(user) then 'secondary' else 'primary' end%>
@@ -35,8 +31,7 @@
                   <button class="btn
                                  btn-<%= if user.role == role then 'secondary' else 'light' end %>
                                  disabled"
-                          id= "btn-<%= role %>-<%= user.id %>",
-                  >
+                          id= "btn-<%= role %>-<%= user.id %>">
                     <%= role.capitalize %>
                   </button>
                 <% else %>
@@ -55,4 +50,4 @@
       </tr>
     <% end %>
   </tbody>
-</table>
+</table>