From 765532764701650d8ef9e04b224c184032616f3e Mon Sep 17 00:00:00 2001
From: Francis Charette Migneault <francis.charette.migneault@gmail.com>
Date: Sat, 1 Feb 2025 00:27:28 -0500
Subject: [PATCH] add HTML display/hide job logs buttons async fetch

---
 .../templates/responses/job_status.mako       | 31 +++++++++++++++++++
 .../wps_restapi/templates/responses/util.mako | 29 +++++++++--------
 weaver/wps_restapi/templates/static/style.css |  4 +--
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/weaver/wps_restapi/templates/responses/job_status.mako b/weaver/wps_restapi/templates/responses/job_status.mako
index 36a737bfb..0dccb7b2b 100644
--- a/weaver/wps_restapi/templates/responses/job_status.mako
+++ b/weaver/wps_restapi/templates/responses/job_status.mako
@@ -143,6 +143,37 @@
             <a href="#job-logs">Logs</a>
         </h3>
         <!-- fill data here -->
+        <div>
+            <script>
+                async function fetchJobLogs(format) {
+                    const url = "${util.get_job_link(job.id)}";
+                    const resp = await fetch(url + "/logs?f=" + format);
+                    const data = await resp.text();
+                    let log = document.getElementById("job-logs-content");
+                    toggleLogs(true);
+                    log.innerHTML = data;
+                    let btn_show = document.getElementById("job-logs-button-show");
+                    btn_show.onclick = toggleLogs;
+                }
+                function toggleLogs(show) {
+                    let log = document.getElementById("job-logs-content");
+                    let btn_show = document.getElementById("job-logs-button-show");
+                    let btn_hide = document.getElementById("job-logs-button-hide");
+                    log.parentElement.style.display = show ? "unset" : "none";
+                    btn_hide.style.display = show ? "unset" : "none";
+                    btn_show.style.display = show ? "none" : "unset";
+                }
+            </script>
+            <button type="button" id="job-logs-button-show" onclick="fetchJobLogs('text')">Display Logs</button>
+            <button
+                type="button"
+                id="job-logs-button-hide"
+                onclick="toggleLogs(false)"
+                style="display: none"
+            >Hide Logs
+            </button>
+            <pre style="display: none"><code id="job-logs-content"></code></pre>
+        </div>
     </div>
 
     <!-- fixme: if not success : error/exception -->
diff --git a/weaver/wps_restapi/templates/responses/util.mako b/weaver/wps_restapi/templates/responses/util.mako
index 372311f6b..2919092a8 100644
--- a/weaver/wps_restapi/templates/responses/util.mako
+++ b/weaver/wps_restapi/templates/responses/util.mako
@@ -3,32 +3,32 @@ Utilities for rendering elements in other pages.
 -->
 
 
-<%def name="get_provider_link(provider_id, query='')">
-    ${weaver.wps_restapi_url}/providers/${provider_id}${f"?{query}" if query else ""}
+<%def name="get_provider_link(provider_id, query='')">\
+${weaver.wps_restapi_url}/providers/${provider_id}${f"?{query}" if query else ""}\
 </%def>
 
 
-<%def name="get_processes_link(provider_id='', query='')">
-    <%
-        _prefix = get_provider_link(provider_id) if provider_id else weaver.wps_restapi_url
-    %>
-    ${_prefix}/processes${f"?{query}" if query else ""}
+<%def name="get_processes_link(provider_id='', query='')">\
+<%
+    _prefix = get_provider_link(provider_id) if provider_id else weaver.wps_restapi_url
+%>
+${_prefix}/processes${f"?{query}" if query else ""}\
 </%def>
 
 
-<%def name="get_process_link(process_id, provider_id='', query='')">
-    ${get_processes_link(provider_id=provider_id)}/${process_id}${f"?{query}" if query else ""}
+<%def name="get_process_link(process_id, provider_id='', query='')">\
+${get_processes_link(provider_id=provider_id)}/${process_id}${f"?{query}" if query else ""}\
 </%def>
 
 
 <!--always apply 'detail' query to populate the table in one request-->
-<%def name="get_jobs_link(query='')">
-    ${weaver.wps_restapi_url}/jobs${f"?{query}&detail=true" if query else "?detail=true"}
+<%def name="get_jobs_link(query='')">\
+${weaver.wps_restapi_url}/jobs${f"?{query}&detail=true" if query else "?detail=true"}\
 </%def>
 
 
-<%def name="get_job_link(job_id, query='')">
-    ${weaver.wps_restapi_url}/jobs/${job_id}${f"?{query}" if query else ""}
+<%def name="get_job_link(job_id, query='')">\
+${weaver.wps_restapi_url}/jobs/${job_id}${f"?{query}" if query else ""}\
 </%def>
 
 
@@ -89,6 +89,9 @@ NOTE: class 'language-json' used by the 'ajax/libs/highlight.js' library inserte
 <%def name="render_json(json_data, indent=2, **kwargs)">
     <pre><code class="language-json">${json.dumps(json_data, indent=indent, **kwargs)}</code></pre>
 </%def>
+<%def name="render_yaml(yaml_data, indent=2, **kwargs)">
+    <pre><code class="language-yaml">${yaml.safe_dumps(yaml_data, indent=indent, **kwargs)}</code></pre>
+</%def>
 
 
 <%def name="render_bool(value)">
diff --git a/weaver/wps_restapi/templates/static/style.css b/weaver/wps_restapi/templates/static/style.css
index a7f7bb1c2..aa54c1660 100644
--- a/weaver/wps_restapi/templates/static/style.css
+++ b/weaver/wps_restapi/templates/static/style.css
@@ -350,13 +350,13 @@ body {
 .status-success,
 .status-succeeded,
 .status-successful {
-    background-color: darkgreen;
+    background-color: forestgreen;
 }
 
 .progress-success,
 .progress-succeeded,
 .progress-successful {
-    accent-color: darkgreen;
+    accent-color: forestgreen;
 }
 
 /* --- Version Footer --- */