Fix tables display issues

bower.json

@@ -16,8 +16,6 @@
     "font-awesome": "~4.5",
     "ionicons": "~2.0.1",
     "jquery": "components/jquery#~2.0",
-    "datatables.net": "~1.10.12",
-    "datatables.net-dt": "~1.10.12",
     "admin-lte": "~2.3.11",
     "html5shiv": "~3.7.3",
     "respond": "~1.4.2",

frontend/admin/vue-components/AccountingView.vue

@@ -1,35 +1,33 @@
 <template>
-  <adminlte-box>
-    <div slot="header">Accounting for user {{ $route.params.id }} </div>
-    <div>
-      <div class="alert alert-danger" v-if="communicationError">
-        <strong>Error:</strong> {{communicationError}}
-      </div>
-      <data-table
-      :headers.once="table.headers"
-      :rows="table.rows"
-      :globalActions="table.globalActions"
-      :rowActions="table.rowActions">
-      </data-table>
+  <adminlte-box :title="'Accounting for user ' + $route.params.id">
+    <div class="alert alert-danger" v-if="communicationError">
+      <strong>Error:</strong> {{communicationError}}
+    </div>
 
-      <new-accounting-dialog
-      v-if="newAccountingDialog.visible"
-      :visible="newAccountingDialog.visible"
-      :userId="newAccountingDialog.userId"
-      @created="newAccountingCreated"
-      @closed="newAccountingDialog.visible = false">
-      </new-accounting-dialog>
+    <data-table
+    :headers.once="table.headers"
+    :rows="table.rows"
+    :globalActions="table.globalActions"
+    :rowActions="table.rowActions">
+    </data-table>
 
-      <confirm-dialog
-      v-if="removeAccountingDialog.visible"
-      title="Remove Accounting"
-      :okCallback="removeAccounting"
-      :closeCallback="closeRemoveAccountingDialog">
-        <div>Do you want to remove accounting
-          {{ removeAccountingDialog.accountingToRemove }}?
-        </div>
-      </confirm-dialog>
-    </div>
+    <new-accounting-dialog
+    v-if="newAccountingDialog.visible"
+    :visible="newAccountingDialog.visible"
+    :userId="newAccountingDialog.userId"
+    @created="newAccountingCreated"
+    @closed="newAccountingDialog.visible = false">
+    </new-accounting-dialog>
+
+    <confirm-dialog
+    v-if="removeAccountingDialog.visible"
+    title="Remove Accounting"
+    :okCallback="removeAccounting"
+    :closeCallback="closeRemoveAccountingDialog">
+      <div>Do you want to remove accounting
+        {{ removeAccountingDialog.accountingToRemove }}?
+      </div>
+    </confirm-dialog>
   </adminlte-box>
 </template>
 
@@ -51,7 +49,7 @@
           rows: [],
           globalActions: [{
             label: "Create New Entry",
-            callback: () => { this.newAccountingDialog.visible = true; }
+            callback: () => {this.newAccountingDialog.visible = true;}
           }],
           rowActions: [{
             label: "Remove",

frontend/admin/vue-components/ApplicationsView.vue

@@ -1,32 +1,31 @@
 <template>
   <adminlte-box title="Applications">
-    <div>
-      <div class="alert alert-danger" v-if="communicationError">
-        <strong>Error:</strong> {{communicationError}}
-      </div>
-      <data-table
-      :headers.once="table.headers"
-      :rows="table.rows"
-      :globalActions="table.globalActions"
-      :rowActions="table.rowActions">
-      </data-table>
+    <div class="alert alert-danger" v-if="communicationError">
+      <strong>Error:</strong> {{communicationError}}
+    </div>
 
-      <new-application-dialog
-      v-if="newApplicationDialog.visible"
-      :visible="newApplicationDialog.visible"
-      @created="newApplicationCreated"
-      @closed="newApplicationDialogClosed"></new-application-dialog>
+    <data-table
+    :headers.once="table.headers"
+    :rows="table.rows"
+    :globalActions="table.globalActions"
+    :rowActions="table.rowActions">
+    </data-table>
 
-      <confirm-dialog
-      v-if="removeApplicationDialog.visible"
-      title="Remove Application"
-      :okCallback="removeApplication"
-      :closeCallback="closeRemoveApplicationDialog">
-        <div>Do you want to remove Application
-          {{removeApplicationDialog.applicationToRemove.name}}
-          ({{removeApplicationDialog.applicationToRemove.id}})</div>
-      </confirm-dialog>
-    </div>
+    <new-application-dialog
+    v-if="newApplicationDialog.visible"
+    :visible="newApplicationDialog.visible"
+    @created="newApplicationCreated"
+    @closed="newApplicationDialogClosed"></new-application-dialog>
+
+    <confirm-dialog
+    v-if="removeApplicationDialog.visible"
+    title="Remove Application"
+    :okCallback="removeApplication"
+    :closeCallback="closeRemoveApplicationDialog">
+      <div>Do you want to remove Application
+        {{removeApplicationDialog.applicationToRemove.name}}
+        ({{removeApplicationDialog.applicationToRemove.id}})</div>
+    </confirm-dialog>
   </adminlte-box>
 </template>
 
@@ -46,7 +45,7 @@
           rows: [],
           globalActions: [{
             label: "Create New Entry",
-            callback: () => { this.newApplicationDialog.visible = true; }
+            callback: () => {this.newApplicationDialog.visible = true;}
           }],
           rowActions: [{
             label: "Remove",

frontend/admin/vue-components/UsersView.vue

@@ -3,6 +3,7 @@
     <div class="alert alert-danger" v-if="communicationError">
       <strong>Error:</strong> {{communicationError}}
     </div>
+
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
@@ -40,7 +41,7 @@
           rows: [],
           globalActions: [{
             label: "Create New Entry",
-            callback: () => { this.newUserDialog.visible = true; }
+            callback: () => {this.newUserDialog.visible = true;}
           }],
           rowActions: [{
             label: "Policies",

frontend/vue/toolkit/AdminLTEBox.vue

@@ -2,7 +2,10 @@
   <div class="row">
     <div class="col-md-12">
       <div class="box">
-        <div class="box-header with-border"><slot name="header">{{title}}</slot></div>
+        <div class="box-header with-border">
+          <h3 class="box-title">{{title}}</h3>
+          <div class="box-tools"><slot name="tools"></slot></div>
+        </div>
         <div class="box-body"><slot></slot></div>
       </div>
     </div>

frontend/vue/toolkit/DataTable.vue

@@ -1,30 +1,32 @@
 <template>
-  <div>
-    <div class="pull-right">
+  <div class="column-container">
+    <div class="align-right">
       <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
     </div>
-    <table id="datatable" class="display dataTable">
-      <thead>
-        <tr>
-          <th v-for="header in headers">{{header}}</th>
-          <th v-if="rowActions.length > 0">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, row_index) in rows">
-          <template v-for="(value, col_index) in row">
-            <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-            <td v-else>{{value}}</td>
-          </template>
-          <td>
-            <button v-for="action in rowActions"
-            :class="buttonClassFromType(action.type)"
-            style="margin-right: 10px"
-            @click="action.callback(row)">{{action.label}}</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="table-responsive">
+      <table class="table table-hover no-margin">
+        <thead>
+          <tr>
+            <th v-for="header in headers">{{header}}</th>
+            <th v-if="rowActions.length > 0">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, row_index) in rows">
+            <template v-for="(value, col_index) in row">
+              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
+              <td v-else>{{value}}</td>
+            </template>
+            <td>
+              <button v-for="action in rowActions"
+              :class="buttonClassFromType(action.type)"
+              style="margin-right: 10px"
+              @click="action.callback(row)">{{action.label}}</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -45,3 +47,14 @@
     }
   };
 </script>
+
+<style scoped>
+  .column-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .align-right {
+    align-self: flex-end;
+  }
+</style>

remoteappmanager/handlers/admin/tests/test_admin_handlers.py

@@ -44,22 +44,22 @@ def test_failed_auth(self):
 
 class TestApplicationsHandler(TestBaseAccess):
     url = "/user/johndoe/#/applications/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestUsersHandler(TestBaseAccess):
     url = "/user/johndoe/#/users/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestContainersHandler(TestBaseAccess):
     url = "/user/johndoe/#/containers/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestAccountingHandler(TestBaseAccess):
     url = "/user/johndoe/#/users/0/accounting/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
     def test_unknown_id(self):
         self._app.db.unexistent_user_id = 123422

remoteappmanager/templates/admin/page.html

@@ -2,10 +2,6 @@
 
 {% set skin = "skin-red" %}
 
-{% block stylesheet %}
-  <link rel="stylesheet" href="{{ static_url("bower_components/datatables.net-dt/css/jquery.dataTables.css") }}" type="text/css"/>
-{% endblock %}
-
 {% block sidebar %}
   <section class="sidebar">
     <ul class="sidebar-menu" id="adminoptions">