Add help button.

Add a help button to the parameter field to get more information
about the selected command and especially about the parameter needed
for the command to be properly executed.
The help appears in a modal dialog whose content is updated when a
command is selected.

5 files changed, 83 insertions, 1 deletions

diff --git a/config.php.example b/config.php.example
index d5ac948..fc093c1 100644
--- a/config.php.example
+++ b/config.php.example
@@ -30,6 +30,24 @@ $config['misc']['allow_private_asn'] = false;
 $config['filters'][] = '/(client1|client2)/';
 $config['filters'][] = '/^NotToShow/';
 
+// Documentation for commands (must be HTML)
+
+// Documentation for the 'show route' query
+$config['doc']['bgp']['query'] = 'Show the best routes to a given destination.';
+$config['doc']['bgp']['parameter'] = 'The parameter must be a valid destination. Destination means an IPv4/IPv6 address or a subnet. Masks are also accepted as part of a valid IPv4/IPv6 address.<br />Please note that some routers always need a mask to be given when looking for an IPv6 address.<br /><br />Example of valid arguments:<br /><ul><li>10.1.1.1</li><li>172.16.0.0/12</li><li>2001:db8:1337::42</li><li>2001:db8::/32</li>';
+// Documentation for the 'as-path-regex' query
+$config['doc']['as-path-regex']['query'] = 'Show the routes matching the given AS path regular expression.';
+$config['doc']['as-path-regex']['parameter'] = 'The parameter must be a valid AS path regular expression.<br />Please note that these expression can change depending on the router and its software.<br /><br />Here are some examples:<ul><li><strong>Juniper</strong> - ^AS1 AS2 .*$</li><li><strong>Cisco</strong> - ^AS1_</li><li><strong>BIRD</strong> - AS1 AS2 AS3 &hellip; ASZ</li></ul><br />You may find some help with the following link:<br /><ul><li><a href="http://www.juniper.net/techpubs/en_US/junos13.3/topics/reference/command-summary/show-route-aspath-regex.html" title="Juniper Documentation">Juniper Documentation</a></li><li><a href="http://www.cisco.com/c/en/us/support/docs/ip/border-gateway-protocol-bgp/26634-bgp-toc.html#asregexp" title="Cisco Documentation">Cisco Documentation</a></li><li><a href="http://bird.network.cz/?get_doc&f=bird-5.html" title="BIRD Documentation">BIRD Documentation</a> (search for bgpmask)</li></ul>';
+// Documentation for the 'as' query
+$config['doc']['as']['query'] = 'Show the routes received from a given AS number.';
+$config['doc']['as']['parameter'] = 'The parameter must be a valid 16-bit or 32-bit autonomous system number.<br />Be careful, 32-bit ASN are not handled by old routers or old router softwares.<br />Unless specified, private ASN will be considered as invalid.<br /><br />Example of valid argument:<br /><ul><li>15169</li><li>29467</li></ul>';
+// Documentation for the 'ping' query
+$config['doc']['ping']['query'] = 'Send 10 pings to the given destination.';
+$config['doc']['ping']['parameter'] = 'The parameter must be an IPv4/IPv6 address (without mask) or a fully qualified domain name.<br /><br />Example of valid arguments:<br /><ul><li>10.1.1.1</li><li>2001:db8:1337::42</li><li>example.com</li></ul>';
+// Documentation for the 'traceroute' query
+$config['doc']['traceroute']['query'] = 'Display the path to a given destination.';
+$config['doc']['traceroute']['parameter'] = 'The parameter must be an IPv4/IPv6 address (without mask) or a fully qualified domain name.<br /><br />Example of valid arguments:<br /><ul><li>10.1.1.1</li><li>2001:db8:1337::42</li><li>example.com</li></ul>';
+
 // Routers definitions
 
 // Authentication based on SSH or Telnet with password
diff --git a/css/style.css b/css/style.css
index 8b7333e..2cc53ba 100644
--- a/css/style.css
+++ b/css/style.css
@@ -62,6 +62,9 @@ body {
   margin-left:      auto;
   margin-right:     auto;
 }
+#command-help, #parameter-help {
+  font-size:        1.3em;
+}
 pre {
   color:            #FFFFFF;
   background-color: #000000;
diff --git a/execute.php b/execute.php
index 12d819e..cd94ae6 100644
--- a/execute.php
+++ b/execute.php
@@ -68,6 +68,12 @@ if (!isset($_POST['dontlook']) || !empty($_POST['dontlook'])) {
   die('Spam detected');
 }
 
+// Just asked for the documentation
+if (isset($_POST['doc']) && !empty($_POST['doc'])) {
+  $query = htmlspecialchars($_POST['doc']);
+  print json_encode($config['doc'][$query]);
+}
+
 if (isset($_POST['query']) && !empty($_POST['query']) &&
     isset($_POST['routers']) && !empty($_POST['routers']) &&
     isset($_POST['parameters']) && !empty($_POST['parameters'])) {
diff --git a/index.php b/index.php
index 78672a4..b78699d 100644
--- a/index.php
+++ b/index.php
@@ -71,8 +71,15 @@ final class LookingGlass {
 
   private function render_parameters() {
     print '<div class="form-group">';
-    print '<label for="input-params">Parameters</label>';
+    print '<label for="input-params">Parameter</label>';
+    print '<div class="input-group">';
     print '<input class="form-control" name="parameters" id="input-params" autofocus />';
+    print '<div class="input-group-btn">';
+    print '<button type="button" class="btn btn-info" data-toggle="modal" data-target="#help">';
+    print '<span class="glyphicon glyphicon-question-sign"></span> Help';
+    print '</button>';
+    print '</div>';
+    print '</div>';
     print '</div>';
   }
 
@@ -181,6 +188,28 @@ final class LookingGlass {
     print '</div>';
   }
 
+  private function render_help_modal() {
+    print '<div id="help" class="modal fade">';
+    print '<div class="modal-dialog">';
+    print '<div class="modal-content">';
+    print '<div class="modal-header">';
+    print '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';
+    print '<h4 class="modal-title">Help</h4>';
+    print '</div>';
+    print '<div class="modal-body">';
+    print '<h3>Command</h3>';
+    print '<p id="command-help"></p>';
+    print '<h3>Parameter</h3>';
+    print '<p id="parameter-help"></p>';
+    print '</div>';
+    print '<div class="modal-footer">';
+    print '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
+    print '</div>';
+    print '</div>';
+    print '</div>';
+    print '</div>';
+  }
+
   public function render() {
     print '<!DOCTYPE html>';
     print '<html lang="en">';
@@ -199,8 +228,10 @@ final class LookingGlass {
     $this->render_header();
     $this->render_content();
     $this->render_footer();
+    $this->render_help_modal();
     print '</body>';
     print '<script src="js/jquery-2.1.1.min.js"></script>';
+    print '<script src="bootstrap-3.2.0/js/bootstrap.min.js"></script>';
     print '<script src="js/looking-glass.js"></script>';
     print '</html>';
   }
diff --git a/js/looking-glass.js b/js/looking-glass.js
index d510ca0..ec26416 100644
--- a/js/looking-glass.js
+++ b/js/looking-glass.js
@@ -1,3 +1,18 @@
+function request_doc(query) {
+  $.ajax({
+    type: 'post',
+    url: 'execute.php',
+    data: { doc: query, dontlook: '' }
+  }).done(function(response) {
+    var response = $.parseJSON(response);
+
+    $('#command-help').html(response.query);
+    $('#parameter-help').html(response.parameter);
+  }).fail(function(xhr) {
+    $('#help-content').text('Cannot load documentation...');
+  });
+}
+
 $(document).ready(function() {
   // hide the optional parameters field
   $('.result').hide();
@@ -18,6 +33,15 @@ $(document).ready(function() {
     $('.result').slideUp();
   });
 
+  // initialize the help modal
+  request_doc($('#query').val());
+
+  // update help when a command is selected
+  $('#query').on('change', function(e) {
+    e.preventDefault();
+    request_doc($('#query').val());
+  });
+
   // send an ajax request that will get the info on the router
   $('form').on('submit', function(e) {
     e.preventDefault();