From a4066c08208dc3ae5b07431618b3436120a663fe Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Tue, 4 Jul 2017 15:55:54 +0100
Subject: [PATCH] Improve the admin home view by using an adminlte box and
 table

---
 frontend/admin/vue-components/MainView.vue | 62 ++++++++++------------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/frontend/admin/vue-components/MainView.vue b/frontend/admin/vue-components/MainView.vue
index 883f3083b..3341d499f 100644
--- a/frontend/admin/vue-components/MainView.vue
+++ b/frontend/admin/vue-components/MainView.vue
@@ -1,39 +1,33 @@
 <template>
-  <div class="row">
-    <div class="col-md-12">
-      <div class="box">
-        <div class="box-header with-border">Statistics</div>
-        <div class="box-body">
-          <div class="alert alert-danger" v-if="communicationError">
-            <strong>Error:</strong> {{communicationError}}
-          </div>
-          <div class="container">
-            <div class="row">
-              <div class="col-lg-4">Realm</div>
-              <div class="col-lg-4">{{ realm }}</div>
-            </div>
-            <div class="row">
-              <div class="col-lg-4">Total users</div>
-              <div class="col-lg-8">{{ num_total_users }}</div>
-            </div>
-            <div class="row">
-              <div class="col-lg-4">Number of applications</div>
-              <div class="col-lg-8">{{ num_applications }}</div>
-            </div>
-            <hr />
-            <div class="row">
-              <div class="col-lg-4">Active users</div>
-              <div class="col-lg-8">{{ num_active_users }}</div>
-            </div>
-            <div class="row">
-              <div class="col-lg-4">Running containers</div>
-              <div class="col-lg-8">{{ num_running_containers }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
+  <adminlte-box title="Statistics">
+    <div class="alert alert-danger" v-if="communicationError">
+      <strong>Error:</strong> {{communicationError}}
     </div>
-  </div>
+    <table class="table table-bordered">
+      <tbody>
+        <tr>
+          <th>Realm</th>
+          <td>{{ realm }}</td>
+        </tr>
+        <tr>
+          <th>Total users</th>
+          <td>{{ num_total_users }}</td>
+        </tr>
+        <tr>
+          <th>Number of applications</th>
+          <td>{{ num_applications }}</td>
+        </tr>
+        <tr>
+          <th>Active users</th>
+          <td>{{ num_active_users }}</td>
+        </tr>
+        <tr>
+          <th>Running containers</th>
+          <td>{{ num_running_containers }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </adminlte-box>
 </template>
 
 <script>