Display additionnal informations about VPS and instances (in modal)

Fix #4 Fix #5
jbelien · May 19, 2017 · 469c7e5 · 469c7e5
1 parent ffee152
commit 469c7e5
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 48 deletions.
diff --git a/public/cloud-xhr.php b/public/cloud-xhr.php
@@ -136,5 +136,43 @@
 
   echo json_encode($result);
 }
+/* ************************************************************************
+ *
+ */
+else if (isset($_REQUEST['info'], $_REQUEST['project'], $_REQUEST['instance'])) {
+  $json = json_decode(file_get_contents($cache));
+  $instance = NULL;
+  foreach ($json as $j) {
+    if ($j->project_id === $_REQUEST['project']) {
+      foreach ($j->instances as $i) {
+        if ($i->id === $_REQUEST['instance']) {
+          $instance = $i;
+          break;
+        }
+      }
+    }
+  }
+
+  if (!is_null($instance)) {
+?>
+  <table class="table table-sm table-striped">
+    <tbody>
+      <tr>
+        <th><i class="fa fa-calendar" aria-hidden="true"></i> <?= _('Creation') ?></th>
+        <td><?= date('Y-m-d', strtotime($instance->created)) ?></td>
+      </tr>
+      <tr>
+        <th><i class="fa fa-credit-card" aria-hidden="true"></i> <?= _('Monthly billing') ?></th>
+<?php if (is_null($instance->monthlyBilling)) { ?>
+        <td class="text-muted"><i class="fa fa-times" aria-hidden="true"></i> <?= _('Disabled') ?></td>
+<?php } else { ?>
+        <td><i class="fa fa-check" aria-hidden="true"></i> <?= sprintf(_('Since %s'), date('Y-m-d', strtotime($instance->monthlyBilling->since))) ?></td>
+<?php } ?>
+      </tr>
+    </tbody>
+  </table>
+<?php
+  }
+}
 
-exit();
+exit();
diff --git a/public/cloud.js b/public/cloud.js
@@ -5,6 +5,20 @@ $(document).ready(function() {
   /*var intervalCPU = window.setInterval(callBackCPU, (5*60)*1000);*/ callBackCPU();
   /*var intervalRAM = window.setInterval(callBackRAM, (5*60)*1000);*/ callBackRAM();
 
+  $("#modal-info").on("show.bs.modal", function (event) {
+    var project = $(event.relatedTarget).closest("tr").data("project");
+    var instance = $(event.relatedTarget).closest("tr").data("instance");
+    var params = {
+      "info": 1,
+      "instance": instance,
+      "project": project,
+      "time": Date.now()
+    };
+
+    $("#modal-info .modal-title").empty().html("<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> " + instance);
+    $("#modal-info .modal-body").empty().load("cloud-xhr.php", params);
+  });
+
   $("a[href='#disk-chart'], a[href='#cpu-chart'], a[href='#ram-chart']").on("click", function(event) {
     event.preventDefault();
 
@@ -81,7 +95,7 @@ $(document).ready(function() {
 
       $("body").css("opacity", "");
 
-      $("#modal").modal("show");
+      $("#modal-chart").modal("show");
     });
   });
 });
@@ -99,20 +113,20 @@ function callBackCPU() {
       var instance = $(this).data("instance");
 
       if (typeof json[project][instance] === "object") {
-        $(this).find("td:eq(6)").
+        $(this).find("td:eq(7)").
           html("<span title=\"" + Math.round(json[project][instance][0]) + " " + json[project][instance][1] + "\" class=\"" + (json[project][instance][2] < 50 ? "text-success" : (json[project][instance][2] < 75 ? "text-warning" : "text-danger")) + "\">" + json[project][instance][2] + "%</span>");
         if (json[project][instance][3] === -1) {
-          $(this).find("td:eq(6)").
+          $(this).find("td:eq(7)").
             append(" <i class=\"fa fa-angle-double-down fa-fw\" aria-hidden=\"true\"></i>");
         } else if (json[project][instance][3] === 1) {
-          $(this).find("td:eq(6)").
+          $(this).find("td:eq(7)").
             append(" <i class=\"fa fa-angle-double-up fa-fw\" aria-hidden=\"true\"></i>");
         } else {
-          $(this).find("td:eq(6)").
+          $(this).find("td:eq(7)").
             append(" <i class=\"fa fa-circle-thin fa-fw\" aria-hidden=\"true\" style=\"visibility: hidden;\"></i>");
         }
       } else {
-        $(this).find("td:eq(6)").
+        $(this).find("td:eq(7)").
           html("<span class=\"text-muted\">N/A</span><a href=\"#console-" + consoleId + "\"><sup>" + consoleId + "</sup></a>");
 
         $("#console > ol").append("<li id=\"console-" + consoleId + "\"><samp>" + json[project][instance] + "</samp></li>");
@@ -135,20 +149,20 @@ function callBackRAM() {
       var instance = $(this).data("instance");
 
       if (typeof json[project][instance] === "object") {
-        $(this).find("td:eq(9)").
+        $(this).find("td:eq(10)").
           html("<span title=\"" + Math.round(json[project][instance][0]) + " " + json[project][instance][1] + "\" class=\"" + (json[project][instance][2] < 50 ? "text-success" : (json[project][instance][2] < 75 ? "text-warning" : "text-danger")) + "\">" + json[project][instance][2] + "%</span>");
         if (json[project][instance][3] === -1) {
-          $(this).find("td:eq(9)").
+          $(this).find("td:eq(10)").
             append(" <i class=\"fa fa-angle-double-down fa-fw\" aria-hidden=\"true\"></i>");
         } else if (json[project][instance][3] === 1) {
-          $(this).find("td:eq(9)").
+          $(this).find("td:eq(10)").
             append(" <i class=\"fa fa-angle-double-up fa-fw\" aria-hidden=\"true\"></i>");
         } else {
-          $(this).find("td:eq(9)").
+          $(this).find("td:eq(10)").
             append(" <i class=\"fa fa-circle-thin fa-fw\" aria-hidden=\"true\" style=\"visibility: hidden;\"></i>");
         }
       } else {
-        $(this).find("td:eq(9)").
+        $(this).find("td:eq(10)").
           html("<span class=\"text-muted\">N/A</span><a href=\"#console-" + consoleId + "\"><sup>" + consoleId + "</sup></a>");
 
         $("#console > ol").append("<li id=\"console-" + consoleId + "\"><samp>" + json[project][instance] + "</samp></li>");

diff --git a/public/cloud.php b/public/cloud.php
@@ -73,11 +73,11 @@
       <table class="table table-bordered table-striped table-sm mt-3">
         <thead class="thead-inverse">
           <tr>
-            <th colspan="12">Instance</th>
+            <th colspan="13">Instance</th>
             <th colspan="5">Volume(s)</th>
           </tr>
           <tr>
-            <th></th>
+            <th colspan="2"></th>
             <th>IP</th>
             <th>Region</th>
             <th>Flavor</th>
@@ -103,7 +103,11 @@
   }
 ?>
           <tr data-project="<?= $p->project_id ?>" data-instance="<?= $i->id ?>" class="<?= ($index % 2 === 0 ? 'even' : 'odd') ?>">
-            <th <?= (count($instance_volumes) > 1 ? 'rowspan="'.count($instance_volumes).'"' : '') ?>"><?= $i->name ?><br><small><?= $i->id ?></small></th>
+            <th <?= (count($instance_volumes) > 1 ? 'rowspan="'.count($instance_volumes).'"' : '') ?>">
+              <?= $i->name ?><br>
+              <small><?= $i->id ?></small>
+            </th>
+            <td><a href="#modal-info" data-toggle="modal"><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
             <td <?= (count($instance_volumes) > 1 ? 'rowspan="'.count($instance_volumes).'"' : '') ?>">
               <ul class="list-unstyled mb-0">
 <?php foreach ($i->ipAddresses as $ip) { ?>
@@ -150,7 +154,7 @@
         </tbody>
         <tfoot>
           <tr>
-            <td colspan="17" class="text-right small text-muted">
+            <td colspan="18" class="text-right small text-muted">
               <?= _('Last update') ?> : <?= date('d.m.Y H:i', filemtime($cache)) ?>
               <a id="refresh" href="cloud.php?nocache"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</a>
             </td>
@@ -172,7 +176,7 @@
       </div>
     </div>
 
-    <div id="modal" class="modal fade">
+    <div id="modal-chart" class="modal fade">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-body">
@@ -185,6 +189,20 @@
       </div>
     </div>
 
+    <div id="modal-info" class="modal fade">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title"></h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body"></div>
+        </div>
+      </div>
+    </div>
+
     <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

diff --git a/public/vps-xhr.php b/public/vps-xhr.php
@@ -6,8 +6,6 @@
 
 $cache = '../cache/vps.json';
 
-header('Content-Type: application/json');
-
 /* ************************************************************************
  *
  */
@@ -21,6 +19,7 @@
     $result[$v->name] = $status;
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -50,6 +49,7 @@
     }
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -88,6 +88,7 @@
     }
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -121,6 +122,7 @@
     }
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -156,6 +158,7 @@
     $result[] = $e->getMessage();
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -189,6 +192,7 @@
     }
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
 /* ************************************************************************
@@ -224,7 +228,57 @@
     $result[] = $e->getMessage();
   }
 
+  header('Content-Type: application/json');
   echo json_encode($result);
 }
+/* ************************************************************************
+ *
+ */
+else if (isset($_REQUEST['info'], $_REQUEST['vps'])) {
+  $json = json_decode(file_get_contents($cache));
+  $vps = NULL;
+  foreach ($json as $j) {
+    if ($j->name === $_REQUEST['vps']) {
+      $vps = $j;
+      break;
+    }
+  }
+
+  if (!is_null($vps)) {
+    $d1 = new DateTime($vps->infos->expiration);
+    $d2 = new DateTime();
+    $diff = $d1->diff($d2);
+?>
+  <table class="table table-sm table-striped">
+    <tbody>
+      <tr>
+        <th><i class="fa fa-calendar" aria-hidden="true"></i> <?= _('Creation') ?></th>
+        <td><?= $vps->infos->creation ?></td>
+      </tr>
+      <tr<?= ($diff->days < 30 ? ' class="text-warning"' : '') ?>>
+        <th><i class="fa fa-calendar" aria-hidden="true"></i> <?= _('Expiration') ?></th>
+        <td><?= $vps->infos->expiration ?> (<?= sprintf(_('%d days'), $diff->days) ?>)</td>
+      </tr>
+      <tr>
+        <th><i class="fa fa-credit-card" aria-hidden="true"></i> <?= _('Renewal') ?></th>
+        <td><?= $vps->infos->renewalType ?></td>
+      </tr>
+      <tr>
+        <th><i class="fa fa-user" aria-hidden="true"></i> <?= _('Administration contact') ?></th>
+        <td><?= $vps->infos->contactAdmin ?></td>
+      </tr>
+      <tr>
+        <th><i class="fa fa-user" aria-hidden="true"></i> <?= _('Billing contact') ?></th>
+        <td><?= $vps->infos->contactBilling ?></td>
+      </tr>
+      <tr>
+        <th><i class="fa fa-user" aria-hidden="true"></i> <?= _('Technical contact') ?></th>
+        <td><?= $vps->infos->contactTech ?></td>
+      </tr>
+    </tbody>
+  </table>
+<?php
+  }
+}
 
-exit();
+exit();