Add service status on the web admin

sources/controller.php

@@ -18,6 +18,18 @@ function start_service() {
   return $retcode;
 }
 
+function service_status() {
+  exec('sudo service ynh-vpnclient status', $output);
+
+  return $output;
+}
+
+function service_faststatus() {
+  exec('ip link show tun0', $output, $retcode);
+
+  return $retcode;
+}
+
 function ipv6_expanded($ip) {
   exec('ipv6_expanded '.escapeshellarg($ip), $output);
 
@@ -43,6 +55,7 @@ dispatch('/', function() {
   set('crt_client_exists', file_exists('/etc/openvpn/keys/user.crt'));
   set('crt_client_key_exists', file_exists('/etc/openvpn/keys/user.key'));
   set('crt_server_ca_exists', file_exists('/etc/openvpn/keys/ca-server.crt'));
+  set('faststatus', service_faststatus() == 0);
 
   return render('settings.html.php');
 });
@@ -149,6 +162,28 @@ dispatch_put('/settings', function() {
   redirect_to('/');
 });
 
+dispatch('/status', function() {
+  $status_lines = service_status();
+  $status_list = '';
+
+  foreach($status_lines AS $status_line) {
+    if(preg_match('/^\[INFO\]/', $status_line)) {
+      $status_list .= "<li class='status-info'>${status_line}</li>";
+    }
+    elseif(preg_match('/^\[OK\]/', $status_line)) {
+      $status_list .= "<li class='status-success'>${status_line}</li>";
+    }
+    elseif(preg_match('/^\[WARN\]/', $status_line)) {
+      $status_list .= "<li class='status-warning'>${status_line}</li>";
+    }
+    elseif(preg_match('/^\[ERR\]/', $status_line)) {
+      $status_list .= "<li class='status-danger'>${status_line}</li>";
+    }
+  }
+
+  echo $status_list;
+});
+
 dispatch('/lang/:locale', function($locale = 'en') {
   switch ($locale) {
     case 'fr':

sources/public/css/style.css

@@ -1,3 +1,40 @@
+li.status-info {
+  color: #5BC0DE;
+}
+
+li.status-warning {
+  color: #D9534F;
+}
+
+li.status-danger {
+  color: #D9534F;
+}
+
+li.status-success {
+  color: #5CB85C;
+}
+
+img#status-loading {
+  display: none;
+  margin-right: 5px;
+}
+
+img#save-loading {
+  display: none;
+  margin-left: 5px;
+}
+
+div#status {
+  display: none;
+  margin-top: 10px;
+}
+
+div#status ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
 a.btn-danger span {
   color: #eee;
 }

sources/public/js/custom.js

@@ -39,4 +39,25 @@ $(document).ready(function() {
 
     $(choosertxtid).val($(this).val());
   });
+
+  $('#save').click(function() {
+    $(this).prop('disabled', true);
+    $('#save-loading').show();
+  });
+
+  $('#status .close').click(function() {
+    $(this).parent().hide();
+  });
+
+  $('#statusbtn').click(function() {
+    $('#status-loading').show();
+
+    $.ajax({
+      url: '?/status',
+    }).done(function(data) {
+      $('#status-loading').hide();
+      $('#status-text').html('<ul>' + data + '</ul>');
+      $('#status').show('slow');
+    });
+  });
 });

sources/views/settings.html.php

@@ -1,4 +1,16 @@
 <h2><?= T_("VPN Client Configuration") ?></h2>
+<?php if($faststatus): ?>
+  <span class="label label-success" data-toggle="tooltip" data-title="<?= T_('This is a fast status. Click on More details to show the complete status.') ?>"><?= T_('Running') ?></span>
+<?php else: ?>
+  <span class="label label-danger" data-toggle="tooltip" data-title="<?= T_('This is a fast status. Click on More details to show the complete status.') ?>"><?= T_('Not Running') ?></span>
+<?php endif; ?>
+
+ &nbsp; <img src="public/img/loading.gif" id="status-loading" alt="Loading..." /><a href="#" id="statusbtn" data-toggle="tooltip" data-title="<?= T_('Loading complete status may take a few minutes. Be patient.') ?>"><?= T_('More details') ?></a>
+
+<div id="status" class="alert alert-dismissible alert-info fade in" style="margin-top: 10px" role="alert">
+  <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+  <div id="status-text"></div>
+</div>
 
 <hr />
 
@@ -142,7 +154,7 @@
 
       <div class="form-group">
         <div style="text-align: center">
-          <button type="submit" class="btn btn-default" data-toggle="tooltip" data-title="<?= T_('Reloading may take a few minutes. Be patient.') ?>"><?= T_('Save and reload') ?></button>
+          <button type="submit" class="btn btn-default" data-toggle="tooltip" id="save" data-title="<?= T_('Reloading may take a few minutes. Be patient.') ?>"><?= T_('Save and reload') ?></button> <img src="public/img/loading.gif" id="save-loading" alt="Loading..." />
         </div>
       </div>
     </form>