re-add query help

hyperglass/render/html.py

@@ -105,26 +105,54 @@ ets/traceroute_nanog.pdf" target="_blank">click here</a>.
 }
 
 
-def generate_markdown(section, file_name):
+default_help = """
+---
+template: default_help
+---
+##### BGP Route
+Performs BGP table lookup based on IPv4/IPv6 prefix.
+<hr>
+##### BGP Community
+Performs BGP table lookup based on <a href="https://tools.ietf.org/html/rfc4360" target\
+="_blank">Extended</a> or <a href="https://tools.ietf.org/html/rfc8195" target=\
+"_blank">Large</a> community value.
+<hr>
+##### BGP AS Path
+Performs BGP table lookup based on `AS_PATH` regular expression.
+<hr>
+##### Ping
+Sends 5 ICMP echo requests to the target.
+<hr>
+##### Traceroute
+Performs UDP Based traceroute to the target.<br>For information about how to \
+interpret traceroute results, <a href="https://hyperglass.readthedocs.io/en/latest/ass\
+ets/traceroute_nanog.pdf" target="_blank">click here</a>.
+"""
+
+
+def generate_markdown(section, file_name=None):
     """
     Renders markdown as HTML. If file_name exists in appropriate
     directory, it will be imported and used. If not, the default values
     will be used. Also renders the Front Matter values within each
     template.
     """
-    if section == "info":
+    if section == "help":
-        file = working_directory.joinpath(f"templates/info/{file_name}.md")
+        file = working_directory.joinpath("templates/info/help.md")
-        defaults = default_info
+        if file.exists():
+            with file.open(mode="r") as file_raw:
+                yaml_raw = file_raw.read()
+        else:
+            yaml_raw = default_help
     elif section == "details":
         file = working_directory.joinpath(f"templates/info/details/{file_name}.md")
-        defaults = default_details
+        if file.exists():
-    if file.exists():
+            with file.open(mode="r") as file_raw:
-        with file.open(mode="r") as file_raw:
+                yaml_raw = file_raw.read()
-            yaml_raw = file_raw.read()
+        else:
-    else:
+            yaml_raw = default_details[file_name]
-        yaml_raw = defaults[file_name]
     _, frontmatter, content = yaml_raw.split("---", 2)
-    html_classes = {"table": "ui compact table"}
+    html_classes = {"table": "table"}
     markdown = Markdown(
         extras={
             "break-on-newline": True,
@@ -169,15 +197,17 @@ def render_html(template_name, **kwargs):
         details_data = generate_markdown("details", details_name)
         details_dict.update({details_name: details_data})
     info_list = ["bgp_route", "bgp_aspath", "bgp_community", "ping", "traceroute"]
-    info_dict = {}
+    rendered_help = generate_markdown("help")
-    for info_name in info_list:
+    logger.debug(rendered_help)
-        info_data = generate_markdown("info", info_name)
-        info_dict.update({info_name: info_data})
     try:
         template_file = f"templates/{template_name}.html.j2"
         template = env.get_template(template_file)
         return template.render(
-            params, info=info_dict, details=details_dict, networks=networks, **kwargs
+            params,
+            rendered_help=rendered_help,
+            details=details_dict,
+            networks=networks,
+            **kwargs,
         )
     except jinja2.TemplateNotFound as template_error:
         logger.error(

hyperglass/render/templates/base.html.j2

@@ -29,7 +29,7 @@
   {% block content %}
   {% endblock %}
   </main>
-  <button class="animsition btn btn-link text-primary hg-back" id="hg-back-btn" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-left">
+  <button class="animsition btn btn-link text-primary hg-back d-none" id="hg-back-btn" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-left">
     <i class="remixicon-arrow-left-s-line"></i>
   </button>
   {% include "templates/footer.html.j2" %}

hyperglass/render/templates/footer.html.j2

@@ -2,16 +2,27 @@
 <nav class="navbar fixed-bottom navbar-footer bg-footer">
   <div class="container-fluid text-center p-0">
     <div class="col-auto float-left">
-      <a class="btn btn-link hg-footer-item" href="#" data-toggle="popover" title="{{ branding.text.terms }}"
+      <div class="d-none" id="hg-footer-terms-html">{{ details.footer.content | safe }}</div>
-        data-content="{{ details.footer.content | safe }}"><small>{{ branding.text.terms }}</small></a>
+      <a class="btn btn-link hg-footer-item" id="hg-footer-terms-btn" href="#" data-toggle="popover"
+        title="{{ branding.text.terms }}"><small>{{ branding.text.terms }}</small></a>
     </div>
     <div class="col-auto float-left">
-      <a class="btn btn-link" href="#"><small>{{ branding.text.info }}</small></a>
+      <div class="d-none" id="hg-footer-help-html">{{ rendered_help.content | safe }}</div>
+      <a class="btn btn-link hg-footer-item" id="hg-footer-help-btn" href="#" data-toggle="popover"
+        title="{{ branding.text.info }}"><small>{{ branding.text.info }}</small></a>
     </div>
     <div class="col-auto mr-auto"></div>
     {% if branding.credit.enable %}
     <div class="col-auto float-right">
-      <a class="btn btn-link" href="#"><small><i class="remixicon-braces-line" id="hg-credit"></i></small></a>
+      <div class="d-none" id="hg-footer-credit-title">
+        Powered by <a href="https://github.com/checktheroads/hyperglass" target="_blank">hyperglass</a>.
+      </div>
+      <div class="d-none" id="hg-footer-credit-content">
+        Source code licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE"
+          target="_blank">BSD 3-Clause Clear.</a>
+      </div>
+      <a class="btn btn-link" id="hg-footer-credit-btn" href="#" data-toggle="popover"><small><i
+            class="remixicon-code-s-slash-line"></i></small></a>
     </div>
     {% endif %}
     {% if branding.peering_db.enable %}

hyperglass/static/hyperglass.es6

@@ -14,6 +14,10 @@ const resultsContainer = $('#hg-results');
 const formContainer = $('#hg-form');
 const resultsAccordion = $('#hg-accordion');
 const backButton = $('#hg-back-btn');
+const footerHelpBtn = $('#hg-footer-help-btn');
+const footerTermsBtn = $('#hg-footer-terms-btn');
+const footerCreditBtn = $('#hg-footer-credit-btn');
+const footerPopoverTemplate = '<div class="popover mw-sm-75 mw-md-50 mw-lg-25" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
 
 const resetResults = () => {
   queryLocation.selectpicker('deselectAll');
@@ -24,7 +28,7 @@ const resetResults = () => {
   resultsContainer.hide();
   formContainer.show();
   formContainer.animsition('in');
-  backButton.hide();
+  backButton.addClass('d-none');
   resultsAccordion.empty();
 };
 
@@ -52,11 +56,35 @@ queryType.selectpicker({
   tickIcon: 'remixicon-check-line',
 });
 
+footerTermsBtn.popover({
+  html: true,
+  trigger: 'click',
+  template: footerPopoverTemplate,
+  placement: 'top',
+  content: $('#hg-footer-terms-html').html(),
+});
+
+footerHelpBtn.popover({
+  html: true,
+  trigger: 'click',
+  placement: 'top',
+  template: footerPopoverTemplate,
+  content: $('#hg-footer-help-html').html(),
+});
+
+footerCreditBtn.popover({
+  html: true,
+  trigger: 'click',
+  placement: 'top',
+  title: $('#hg-footer-credit-title').html(),
+  content: $('#hg-footer-credit-content').html(),
+  template: footerPopoverTemplate,
+});
+
 $(document).ready(() => {
   reloadPage();
   resultsContainer.hide();
   $('#hg-ratelimit-query').modal('hide');
-  backButton.hide();
   $('.animsition').animsition({
     inClass: 'fade-in',
     outClass: 'fade-out',
@@ -198,7 +226,7 @@ $('#lgForm').submit((event) => {
   $('#hg-results').show();
   $('#hg-results').animsition('in');
   $('#hg-submit-spinner').remove();
-  $('#hg-back-btn').show();
+  $('#hg-back-btn').removeClass('d-none');
   $('#hg-back-btn').animsition('in');
 });
 

hyperglass/static/overrides.sass

@@ -284,7 +284,7 @@
     width: 3rem !important
     height: 3rem !important
     left: 2rem !important
-    bottom: 2rem !important
+    bottom: 5rem !important
     border-radius: 50rem !important
     border: 1px solid $card-border-color !important
     transition: all .3s !important
@@ -429,4 +429,6 @@
     padding-left: 0.3rem !important
 
 .modal-title
-    padding-bottom: 1rem !important
+    padding-bottom: 1rem !important
+
+.popover