tidy up and move live metrics to top

files/web/html/index.php

@@ -22,7 +22,6 @@
     This dashboard shows the local Matt-Cloud system stats.<p>
   </div>
   <div class="card">
-    <h2>System Properties and Components</h2>
     <div id="host_components" class="column">
 
       <!-- PHP to render static components -->
@@ -51,20 +50,30 @@
       ?>
 
       <?php if (isset($data[0]['system_properties'])): ?>
-          <h3>System Properties</h3>
+          <h2>System Properties</h2>
+          <div class="system">
+          <table>
+            <tr><td>
               <ul class="system-list">
                   <?php foreach ($data[0]['system_properties'] as $prop): ?>
                       <li><?= h($prop['Property']); ?></li>
                   <?php endforeach; ?>
               </ul>
+            </td><td>
+              <!-- Javascript to render static components -->
+              <h2>Live System Metrics</h2>
+              <div id="host_metrics" class="column">Connecting...</div>
+            </td></tr>
+          </table>
+          </div>
       <?php endif; ?>
 
       <?php if (isset($data[0]['system_components'])): ?>
-          <h3>Components</h3>
+          <h2>Components</h2>
           <div class="components">
               <?php foreach ($data[0]['system_components'] as $comp): ?>
                   <div class="component">
-                      <h4><?= h($comp['component_name']); ?></h4>
+                      <h3><?= h($comp['component_name']); ?></h3>
                       <ul class="info-list">
                           <?php foreach ($comp['info_strings'] as $info): ?>
                               <li><?= h($info); ?></li>
@@ -80,12 +89,6 @@
     </div>
   </div>
 
-  <!-- Javascript to render static components -->
-  <div class="card">
-    <h2>Live System Metrics</h2>
-    <div id="host_metrics" class="column">Connecting...</div>
-  </div>
-
   <!-- Socket.IO client library -->
   <script src="socket.io/socket.io.js"></script>