Web: add empty job & task detail column components

web/app/src/App.vue

@@ -3,8 +3,12 @@
   <div class="col-1">
     <jobs-table ref="jobsTable" :apiClient="apiClient" />
   </div>
-  <div class="col-2">Job Details</div>
-  <div class="col-3">Task Details</div>
+  <div class="col-2">
+    <job-details :apiClient="apiClient" />
+  </div>
+  <div class="col-3">
+    <task-details :apiClient="apiClient" />
+  </div>
   <footer>Footer
     <update-listener ref="updateListener" :websocketURL="websocketURL" @jobUpdate="onJobUpdate" @message="onChatMessage"
       @reconnected="onReconnected" />
@@ -15,12 +19,14 @@
 import * as urls from './urls'
 import { ApiClient } from './manager-api';
 import JobsTable from './components/JobsTable.vue'
+import JobDetails from './components/JobDetails.vue'
+import TaskDetails from './components/TaskDetails.vue'
 import UpdateListener from './components/UpdateListener.vue'
 
 export default {
   name: 'App',
   components: {
-    JobsTable, UpdateListener,
+    JobsTable, JobDetails, TaskDetails, UpdateListener,
   },
   data: () => {
     return {
@@ -86,6 +92,12 @@ header {
   color: #EEE;
 }
 
+h2.column-title {
+  margin-top: 0;
+  font-size: 12pt;
+  border-bottom: 1px solid grey
+}
+
 .col-1 {
   grid-area: col-1;
 }

web/app/src/components/JobDetails.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="job-details">
+    <h2 class="column-title">Job Details</h2>
+  </div>
+</template>
+
+<script lang="js">
+import { DateTime } from "luxon";
+
+import {
+  JobsApi,
+} from '../manager-api'
+
+export default {
+  props: ["apiClient"],
+  data: () => {
+    return {
+    };
+  },
+  mounted() {
+    // Allow testing from the JS console:
+    window.jobDetailsVue = this;
+  },
+  methods: {
+    onReconnected() {
+      // If the connection to the backend was lost, we have likely missed some
+      // updates. Just fetch the data and start from scratch.
+      this.fetchJob();
+    },
+    fetchAllJob() {
+      if (this.apiClient === undefined) {
+        throw "no apiClient set on JobsTable component";
+      }
+      const jobsApi = new JobsApi(this.apiClient);
+      const jobID = ""; // TODO: get from outer scope.
+      jobsApi.fetchJob(jobID).then(this.onJobFetched, function (error) {
+        // TODO: error handling.
+        console.error(error);
+      });
+    },
+    onJobFetched(data) {
+      console.log("Job fetched:", data);
+    },
+  }
+};
+</script>
+
+<style scoped>
+</style>

web/app/src/components/TaskDetails.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="task-details">
+    <h2 class="column-title">Task Details</h2>
+  </div>
+</template>
+
+<script lang="js">
+export default {
+  props: ["apiClient"],
+  data: () => {
+    return {
+    };
+  },
+  mounted() {
+    // Allow testing from the JS console:
+    window.taskDetailsVue = this;
+  },
+  methods: {
+  }
+};
+</script>
+
+<style scoped>
+</style>