From 724d3b8894dde8e72402fb4e757899b5c05b90be Mon Sep 17 00:00:00 2001
From: Saria Hajjar <sariahajjar@gmail.com>
Date: Sat, 25 Jan 2020 15:56:24 +0000
Subject: [PATCH] Fixes #3313: YAML-format the config context in the GUI

---
 netbox/project-static/js/configcontext.js             | 11 +++++++++++
 netbox/templates/extras/configcontext.html            |  8 +++++++-
 netbox/templates/extras/inc/configcontext_data.html   |  8 ++++++++
 netbox/templates/extras/inc/configcontext_format.html |  6 ++++++
 netbox/templates/extras/object_configcontext.html     |  8 +++++++-
 netbox/utilities/templatetags/helpers.py              |  9 +++++++++
 6 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 netbox/project-static/js/configcontext.js
 create mode 100644 netbox/templates/extras/inc/configcontext_data.html
 create mode 100644 netbox/templates/extras/inc/configcontext_format.html

diff --git a/netbox/project-static/js/configcontext.js b/netbox/project-static/js/configcontext.js
new file mode 100644
index 000000000..1d731e696
--- /dev/null
+++ b/netbox/project-static/js/configcontext.js
@@ -0,0 +1,11 @@
+$('.rendered-context-format').on('click', function() {
+    if (!$(this).hasClass('active')) {
+        // Update selection in the button group
+        $('span.rendered-context-format').removeClass('active');
+        $('span.rendered-context-format[data-format=' + $(this).data('format') + ']').addClass('active');
+
+        // Hide all rendered contexts and only show the selected one
+        $('div.rendered-context-data').hide();
+        $('div.rendered-context-data[data-format=' + $(this).data('format') + ']').show();
+    }
+});
diff --git a/netbox/templates/extras/configcontext.html b/netbox/templates/extras/configcontext.html
index 7cec3f403..067bf1e96 100644
--- a/netbox/templates/extras/configcontext.html
+++ b/netbox/templates/extras/configcontext.html
@@ -1,5 +1,6 @@
 {% extends '_base.html' %}
 {% load helpers %}
+{% load static %}
 
 {% block header %}
     <div class="row noprint">
@@ -183,11 +184,16 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Data</strong>
+                    {% include 'extras/inc/configcontext_format.html' %}
                 </div>
                 <div class="panel-body">
-                    <pre>{{ configcontext.data|render_json }}</pre>
+                    {% include 'extras/inc/configcontext_data.html' with data=configcontext.data %}
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
+
+{% block javascript %}
+<script src="{% static 'js/configcontext.js' %}?v{{ settings.VERSION }}"></script>
+{% endblock %}
diff --git a/netbox/templates/extras/inc/configcontext_data.html b/netbox/templates/extras/inc/configcontext_data.html
new file mode 100644
index 000000000..d987b2acb
--- /dev/null
+++ b/netbox/templates/extras/inc/configcontext_data.html
@@ -0,0 +1,8 @@
+{% load helpers %}
+
+<div class="rendered-context-data" data-format="yaml">
+    <pre>{{ data|render_yaml }}</pre>
+</div>
+<div class="rendered-context-data" data-format="json" style="display: none;">
+    <pre>{{ data|render_json }}</pre>
+</div>
diff --git a/netbox/templates/extras/inc/configcontext_format.html b/netbox/templates/extras/inc/configcontext_format.html
new file mode 100644
index 000000000..eb34adfdf
--- /dev/null
+++ b/netbox/templates/extras/inc/configcontext_format.html
@@ -0,0 +1,6 @@
+<div class="pull-right">
+    <div class="btn-group btn-group-xs" role="group">
+        <span class="btn btn-default rendered-context-format active" data-format="yaml">YAML</span>
+        <span class="btn btn-default rendered-context-format" data-format="json">JSON</span>
+    </div>
+</div>
diff --git a/netbox/templates/extras/object_configcontext.html b/netbox/templates/extras/object_configcontext.html
index d23455c19..f8191936e 100644
--- a/netbox/templates/extras/object_configcontext.html
+++ b/netbox/templates/extras/object_configcontext.html
@@ -1,5 +1,6 @@
 {% extends base_template %}
 {% load helpers %}
+{% load static %}
 
 {% block title %}{{ block.super }} - Config Context{% endblock %}
 
@@ -9,9 +10,10 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Rendered Context</strong>
+                    {% include 'extras/inc/configcontext_format.html' %}
                 </div>
                 <div class="panel-body">
-                    <pre>{{ rendered_context|render_json }}</pre>
+                    {% include 'extras/inc/configcontext_data.html' with data=rendered_context %}
                 </div>
             </div>
         </div>
@@ -58,3 +60,7 @@
         </div>
     </div>
 {% endblock %}
+
+{% block javascript %}
+<script src="{% static 'js/configcontext.js' %}?v{{ settings.VERSION }}"></script>
+{% endblock %}
diff --git a/netbox/utilities/templatetags/helpers.py b/netbox/utilities/templatetags/helpers.py
index c4b3bb6ea..4278b3b95 100644
--- a/netbox/utilities/templatetags/helpers.py
+++ b/netbox/utilities/templatetags/helpers.py
@@ -1,6 +1,7 @@
 import datetime
 import json
 import re
+import yaml
 
 from django import template
 from django.utils.html import strip_tags
@@ -76,6 +77,14 @@ def render_json(value):
     return json.dumps(value, indent=4, sort_keys=True)
 
 
+@register.filter()
+def render_yaml(value):
+    """
+    Render a dictionary as formatted YAML.
+    """
+    return yaml.dump(dict(value))
+
+
 @register.filter()
 def model_name(obj):
     """