Web: include metadata and settings in job details

web/app/src/App.vue

@@ -134,6 +134,12 @@ h2.column-title {
   border-bottom: 1px solid grey
 }
 
+h3.sub-title {
+  margin-bottom: 0;
+  font-size: 10pt;
+  border-bottom: 1px solid grey
+}
+
 .col-1 {
   grid-area: col-1;
 }

web/app/src/components/JobDetails.vue

@@ -37,8 +37,23 @@
         <td>{{ datetime.relativeTime(jobData.updated) }}</td>
       </tr>
     </table>
-    <dl class="metadata">
-    </dl>
+
+    <h3 class="sub-title">Meta-data</h3>
+    <table class="metadata">
+      <tr v-for="value, key in jobData.metadata" :class="`field-${key}`">
+        <th>{{ key }}</th>
+        <td>{{ value }}</td>
+      </tr>
+    </table>
+
+    <h3 class="sub-title">Settings</h3>
+    <table class="settings">
+      <tr v-for="value, key in jobData.settings" :class="`field-${key}`">
+        <th>{{ key }}</th>
+        <td>{{ value }}</td>
+      </tr>
+    </table>
+
   </div>
 </template>