Add a quick way to visualize a job environment (#4644)

With templates, it can sometimes be a bit difficult to know which
environment a given job has. This is a QoL changedisplaying the merged
environment:

![Screenshot from 2025-01-27
19-01-35](https://github.com/user-attachments/assets/3907d22e-203f-4af8-ba97-c6cccf35b276)

Author: ParisMeuleman

src/appengine/handlers/jobs.py

@@ -298,3 +298,22 @@ def post(self):
     """Get and render the jobs in JSON."""
     result, _ = get_results()
     return self.render_json(result)
+
+
+class GetEnvironmentHandler(base_handler.Handler):
+  """Handler that gets the computed environment for a job."""
+
+  @handler.get(handler.JSON)
+  @handler.check_user_access(need_privileged_access=True)
+  def get(self):
+    """Get and render the computed environment in JSON."""
+    name = request.args.get('name')
+    if not name:
+      raise helpers.EarlyExitError('No job name provided.', 400)
+
+    job = data_types.Job.query(data_types.Job.name == name).get()
+    if not job:
+      raise helpers.EarlyExitError('Job not found.', 404)
+
+    environment = job.get_environment()
+    return self.render_json({'environment': environment})

src/appengine/private/components/jobs/jobs.html

@@ -18,6 +18,8 @@
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
@@ -100,9 +102,30 @@
       on-response="handleResponse"
       debounce-duration="500"></iron-ajax>
 
+    <iron-ajax
+      id="environmentAjax"
+      url="/jobs/environment"
+      method="GET"
+      content-type="application/json"
+      loading="{{envLoading}}"
+      last-error="{{envError}}"
+      last-response="{{envResponse}}"
+      on-error="handleEnvError"
+      on-response="handleEnvResponse"></iron-ajax>
+
     <delete-job-dialog id="deleteJobDialog" field-values="[[fieldValues]]" job="[[toDelete]]">
     </delete-job-dialog>
 
+    <paper-dialog id="envDialog" with-backdrop>
+      <h2>Computed Environment</h2>
+      <paper-dialog-scrollable>
+        <pre id="envContent"></pre>
+      </paper-dialog-scrollable>
+      <div class="buttons">
+        <paper-button dialog-dismiss>Close</paper-button>
+      </div>
+    </paper-dialog>
+
     <h2>Templates</h2>
 
     <div class="section">
@@ -334,6 +357,7 @@ <h2>Jobs</h2>
 
                     <paper-button raised on-tap="submitForm" data-index$="[[index]]">Save</paper-button>
                     <paper-button class="info" job="[[item]]" raised on-tap="deleteJobTapped">Delete</paper-button>
+                    <paper-button raised on-tap="viewEnvironment" data-job-name$="[[item.name]]">View inherited environment</paper-button>
                   </div>
 
                   <div class="right">
@@ -368,6 +392,10 @@ <h2>Jobs</h2>
             type: Boolean,
             value: false
           },
+          envLoading: {
+            type: Boolean,
+            value: false
+          },
           submitId: {
             type: Number,
             value: 0
@@ -539,6 +567,30 @@ <h2>Jobs</h2>
       stopEventPropagation(ev) {
         ev.stopPropagation();
       }
+
+      handleEnvError(event) {
+        var response = event.detail.request.xhr.response;
+        if (response.error) {
+          this.$.envContent.textContent = 'Error: ' + response.error.message;
+        } else {
+          this.$.envContent.textContent = 'Error fetching environment';
+        }
+        this.$.envDialog.open();
+      }
+
+      handleEnvResponse(event) {
+        var response = event.detail.response;
+        this.$.envContent.textContent = Object.entries(response.environment)
+          .map(([key, value]) => `${key} = ${value}`)
+          .join('\n');
+        this.$.envDialog.open();
+      }
+
+      viewEnvironment(event) {
+        var jobName = event.target.dataset.jobName;
+        this.$.environmentAjax.params = {name: jobName};
+        this.$.environmentAjax.generateRequest();
+      }
     }
 
     customElements.define(JobsPage.is, JobsPage);

src/appengine/server.py

@@ -162,6 +162,7 @@ def register_routes(flask_app, routes):
     ('/jobs', jobs.Handler),
     ('/jobs/load', jobs.JsonHandler),
     ('/jobs/delete-job', jobs.DeleteJobHandler),
+    ('/jobs/environment', jobs.GetEnvironmentHandler),
     ('/login', login.Handler),
     ('/logout', login.LogoutHandler),
     ('/report-bug', help_redirector.ReportBugHandler),