job HTML - support logs & statistics via dynamic toggle button functi…

…ons + add language highlights
crim-ca · Feb 14, 2025 · adce43a · adce43a
1 parent 7655327
commit adce43a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 37 deletions.
diff --git a/weaver/wps_restapi/templates/responses/head.mako b/weaver/wps_restapi/templates/responses/head.mako
@@ -20,10 +20,11 @@
     <!--
     Requirements for rendering JSON contents.
     -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>
-    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/languages/json.min.js"></script>
-    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/languages/yaml.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/stackoverflow-light.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/accesslog.min.js"></script>
+    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/json.min.js"></script>
+    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/yaml.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
 </head>
 </%block>
diff --git a/weaver/wps_restapi/templates/responses/job_status.mako b/weaver/wps_restapi/templates/responses/job_status.mako
@@ -131,70 +131,60 @@
         </table>
     </div>
 
+    <div class="content-section">
+        <h3 id="inputs">
+            <a href="#inputs">Inputs</a>
+        </h3>
+        <p>Submitted request input values for the job execution.</p>
+        <!-- fill data here -->
+    </div>
+
+    <div class="content-section">
+        <h3 id="outputs">
+            <a href="#outputs">Outputs</a>
+        </h3>
+        <p>Submitted request output parametrization for the job execution.</p>
+        <!-- fill data here -->
+    </div>
+
     <div class="content-section">
         <h3 id="results">
             <a href="#results">Results</a>
         </h3>
+        <p>Results produced by the job execution.</p>
         <!-- fill data here -->
     </div>
 
     <div class="content-section">
         <h3 id="job-logs">
             <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>
+        <p>Logs captured during the job execution.</p>
+        ${util.build_job_toggle_button_code(job, type="logs", format="text", language="accesslog")}
     </div>
 
     <!-- fixme: if not success : error/exception -->
     <div class="content-section">
         <h3 id="errors">
             <a href="#errors">Errors</a>
         </h3>
+        <p>Errors that occurred during the job execution.</p>
         <!-- fill data here -->
     </div>
 
     <div class="content-section">
         <h3 id="statistics">
             <a href="#statistics">Statistics</a>
         </h3>
-        <!-- fill data here -->
+        <p>Statistics collected during the job execution.</p>
+        ${util.build_job_toggle_button_code(job, type="statistics", format="json", language="json")}
     </div>
 
     <div class="content-section">
         <h3 id="provenance">
             <a href="#provenance">Provenance</a>
         </h3>
+        <p>Provenance metadata collected during the job execution request.</p>
         <!-- fill data here -->
     </div>
 

diff --git a/weaver/wps_restapi/templates/responses/util.mako b/weaver/wps_restapi/templates/responses/util.mako
@@ -267,3 +267,54 @@ NOTE: class 'language-json' used by the 'ajax/libs/highlight.js' library inserte
 %endfor
 </dl>
 </%def>
+
+
+<!--
+    Defines a dynamic 'toggle' button that will show/hide a code block, using the response content of a job sub-path.
+    The code block and button display visibility and text are dynamically controlled and populated by state functions.
+    Once fetched, the job 'type' response contents are cached into to the code block element to avoid fetching again.
+    Classes are dynamically attributed with the corresponding 'type' parameter to allow different styling as needed.
+-->
+<%def name="build_job_toggle_button_code(job, type, format, language)">
+<div>
+    <script>
+        async function fetch_job_${type}(format) {
+            const url = "${get_job_link(job.id)}";
+            const resp = await fetch(url + "/${type}?f=" + format);
+            let data = "";
+            if ("${language}" == "json") {
+                data = await resp.json();
+                data = JSON.stringify(data, null, 4);
+            }
+            else {
+                data = await resp.text();
+            }
+            let code = hljs.highlight(data, {language: "${language}"}).value;
+            let code_block = document.getElementById("job-${type}-content");
+            toggle_job_${type}(true);
+            code_block.innerHTML = code;
+            let btn_show = document.getElementById("job-${type}-button-show");
+            btn_show.onclick = toggle_job_${type};
+        }
+        function toggle_job_${type}(show) {
+            let code_block = document.getElementById("job-${type}-content");
+            let btn_show = document.getElementById("job-${type}-button-show");
+            let btn_hide = document.getElementById("job-${type}-button-hide");
+            code_block.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-${type}-button-show"
+            onclick="fetch_job_${type}('${format}')">Display ${type.capitalize()}
+    </button>
+    <button
+        type="button"
+        id="job-${type}-button-hide"
+        onclick="toggle_job_${type}(false)"
+        style="display: none"
+    >Hide ${type.capitalize()}
+    </button>
+    <pre style="display: none"><code id="job-${type}-content" class="language-${language}">></code></pre>
+</div>
+</%def>