[#13] Added endpoints for prettify and original body in the admin

docs/quickstart.rst

@@ -22,6 +22,9 @@ Installation
 #.  Add ``log_outgoing_requests`` to ``INSTALLED_APPS`` in your Django 
     project's ``settings.py``.
 
+#.  Add ``path("admin/log_outgoing_requests/", include("log_outgoing_requests.urls")),`` 
+    in your Django project's ``urls.py``.
+
 #. Run ``python manage.py migrate`` to create the necessary database tables
 
 Configuration

log_outgoing_requests/admin.py

@@ -1,5 +1,7 @@
 from django import forms
 from django.contrib import admin
+from django.urls import reverse
+from django.utils.html import format_html
 from django.utils.translation import gettext as _
 
 from solo.admin import SingletonModelAdmin
@@ -51,6 +53,7 @@ class OutgoingRequestsLogAdmin(admin.ModelAdmin):
                     "res_content_type",
                     "res_body_encoding",
                     "response_body",
+                    "prettify_body_response",
                 )
             },
         ),
@@ -61,6 +64,7 @@ class OutgoingRequestsLogAdmin(admin.ModelAdmin):
         "timestamp",
         "method",
         "query_params",
+        "prettify_body_response",
         "params",
         "req_headers",
         "req_content_type",
@@ -77,6 +81,7 @@ class Media:
         css = {
             "all": ("log_outgoing_requests/css/admin.css",),
         }
+        js = ("log_outgoing_requests/js/admin.js",)
 
     def has_add_permission(self, request):
         return False
@@ -93,6 +98,21 @@ def request_body(self, obj) -> str:
     def response_body(self, obj) -> str:
         return obj.response_body_decoded or "-"
 
+    def prettify_body_response(self, obj):
+        prettify_url = reverse("prettify_view")
+        original_url = reverse("original_view")
+
+        return format_html(
+            '<a class="prettify-body-response" href="{}">{}</a> | <a class="original-body-response" href="{}">{}</a><br><div class="body-response-text">{}</div>',
+            prettify_url,
+            "Prettify",
+            original_url,
+            "Original",
+            obj.res_body_encoding,
+        )
+
+    prettify_body_response.allow_tags = True
+
 
 class ConfigAdminForm(forms.ModelForm):
     class Meta:

log_outgoing_requests/static/log_outgoing_requests/js/admin.js

@@ -0,0 +1,63 @@
+const getCsrfTokenFromDom = () => {
+    return document.querySelector("[name=csrfmiddlewaretoken]").value;
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+    const prettifyAnchors = document.querySelectorAll(
+        ".prettify-body-response"
+    );
+    const originalAnchors = document.querySelectorAll(
+        ".original-body-response"
+    );
+    const url = window.location.href;
+
+    prettifyAnchors.forEach(function (element) {
+        const responseBodyText = document.querySelector(".body-response-text");
+
+        element.addEventListener("click", function (event) {
+            event.preventDefault();
+
+            fetch(element.href, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: {
+                    "X-CSRFToken": getCsrfTokenFromDom(),
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ url: url, text: element.textContent }),
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                    responseBodyText.textContent = data.newValue;
+                })
+                .catch((error) => {
+                    console.error("Error:", error);
+                });
+        });
+    });
+
+    originalAnchors.forEach(function (element) {
+        const responseBodyText = document.querySelector(".body-response-text");
+
+        element.addEventListener("click", function (event) {
+            event.preventDefault();
+
+            fetch(element.href, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: {
+                    "X-CSRFToken": getCsrfTokenFromDom(),
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ url: url, text: element.textContent }),
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                    responseBodyText.textContent = data.newValue;
+                })
+                .catch((error) => {
+                    console.error("Error:", error);
+                });
+        });
+    });
+});

log_outgoing_requests/urls.py

@@ -0,0 +1,16 @@
+from django.urls import path
+
+from .views import OriginalResponseBodyView, PrettifyResponseBodyView
+
+urlpatterns = [
+    path(
+        "prettify/",
+        PrettifyResponseBodyView.as_view(),
+        name="prettify_view",
+    ),
+    path(
+        "original/",
+        OriginalResponseBodyView.as_view(),
+        name="original_view",
+    ),
+]

log_outgoing_requests/views.py

@@ -0,0 +1,16 @@
+import json
+
+from django.http import JsonResponse
+from django.views import View
+
+
+class PrettifyResponseBodyView(View):
+    def post(self, request):
+        received_data = json.loads(request.body)
+        return JsonResponse({"newValue": "Toggled to pretty"})
+
+
+class OriginalResponseBodyView(View):
+    def post(self, request):
+        received_data = json.loads(request.body)
+        return JsonResponse({"newValue": "Toggled to original"})