Show task details for selected task

The task details are updated at real-time via SocketIO updates.

web/app/src/App.vue

@@ -9,10 +9,11 @@
   </div>
   <div class="col-2">
     <job-details :jobData="jobs.activeJob" />
-    <tasks-table ref="tasksTable" :jobID="jobs.activeJobID" @selectedTaskChange="onSelectedTaskChanged" />
+    <tasks-table v-if="jobs.activeJobID" ref="tasksTable" :jobID="jobs.activeJobID"
+      @selectedTaskChange="onSelectedTaskChanged" />
   </div>
   <div class="col-3">
-    <task-details />
+    <task-details :taskData="tasks.activeTask" />
   </div>
   <footer>
     <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
@@ -84,13 +85,14 @@ export default {
         return;
       }
       console.log("selected task changed:", taskSummary);
-      // const jobsAPI = new API.JobsApi(apiClient);
-      // jobsAPI.fetchTask(taskSummary.id)
-      //   .then((task) => {
-      //     this.tasks.setSelectedTask(task);
-      //     // Forward the full task to Tabulator, so that that gets updated too.
-      //     this.$refs.tasksTable.processTaskUpdate(task);
-      //   });
+      const jobsAPI = new API.JobsApi(apiClient);
+      jobsAPI.fetchTask(taskSummary.id)
+        .then((task) => {
+          this.tasks.setSelectedTask(task);
+          // Forward the full task to Tabulator, so that that gets updated too.
+          if (this.$refs.tasksTable)
+            this.$refs.tasksTable.processTaskUpdate(task);
+        });
     },
 
     sendMessage(message) {
@@ -131,11 +133,13 @@ export default {
      */
     onSioTaskUpdate(taskUpdate) {
       if (!this.$refs.tasksTable) {
-        console.warn("App: this.$refs.tasksTable is", this.$refs.tasksTable);
         return;
       }
 
       this.$refs.tasksTable.processTaskUpdate(taskUpdate);
+      if (this.tasks.activeTaskID == taskUpdate.id) {
+        this.onSelectedTaskChanged(taskUpdate);
+      }
     },
 
     onChatMessage(message) {
@@ -152,6 +156,7 @@ export default {
     onSIODisconnected(reason) {
       this.flamencoName = DEFAULT_FLAMENCO_NAME;
       this.flamencoVersion = DEFAULT_FLAMENCO_VERSION;
+      this.jobs.deselectAllJobs();
     },
     fetchManagerInfo() {
       const metaAPI = new API.MetaApi(apiClient);

web/app/src/components/JobDetails.vue

@@ -152,7 +152,9 @@ export default {
         jobTypeSettings[setting.key] = setting;
       this.jobTypeSettings = jobTypeSettings;
 
+      if (this.jobData) {
         this._setJobSettings(this.jobData.settings);
+      }
     },
 
     _setJobSettings(newJobSettings) {

web/app/src/components/TaskDetails.vue

@@ -1,23 +1,107 @@
 <template>
-  <div class="task-details">
   <h2 class="column-title">Task Details</h2>
+  <div v-if="hasTaskData" class="task-details">
+    <table class="details">
+      <tr class="field-id">
+        <th>ID</th>
+        <td>{{ taskData.id }}</td>
+      </tr>
+
+      <tr class="field-name">
+        <th>Name</th>
+        <td>{{ taskData.name }}</td>
+      </tr>
+
+      <tr class="field-status">
+        <th>Status</th>
+        <td>{{ taskData.status }}</td>
+      </tr>
+
+      <tr class="field-type">
+        <th>Type</th>
+        <td>{{ taskData.type }}</td>
+      </tr>
+
+      <tr class="field-priority">
+        <th>Prio</th>
+        <td>{{ taskData.priority }}</td>
+      </tr>
+
+      <tr class="field-created">
+        <th>Created</th>
+        <td>{{ datetime.relativeTime(taskData.created) }}</td>
+      </tr>
+      <tr class="field-updated">
+        <th>Updated</th>
+        <td>{{ datetime.relativeTime(taskData.updated) }}</td>
+      </tr>
+    </table>
+
+    <h3 class="sub-title">Commands</h3>
+    <table class="commands">
+      <tr v-for="cmd in taskData.commands" :class="`field-${cmd.name}`">
+        <th>{{ cmd.name }}</th>
+        <td>{{ cmd.parameters }}</td>
+      </tr>
+    </table>
+
+  </div>
+  <div v-else class="no-task-selected">
+    <p>No task selected, pick one from the list on the left.</p>
   </div>
 </template>
 
 <script lang="js">
+import * as datetime from "@/datetime";
+import * as API from '@/manager-api';
+import { apiClient } from '@/stores/api-query-count';
+
+function objectEmpty(o) {
+  if (!o) return true;
+  return Object.entries(o).length == 0;
+}
+
 export default {
-  data: () => {
+  props: [
+    "taskData", // Task data to show.
+  ],
+  data() {
     return {
+      datetime: datetime, // So that the template can access it.
+      jobsApi: new API.JobsApi(apiClient),
     };
   },
   mounted() {
     // Allow testing from the JS console:
     window.taskDetailsVue = this;
   },
-  methods: {
-  }
+  computed: {
+    hasTaskData() {
+      return !!this.taskData && !!this.taskData.id;
+    },
+  },
 };
 </script>
 
 <style scoped>
+.task-details {
+  font-size: smaller;
+  font-family: 'Noto Mono', monospace;
+}
+
+tr:hover {
+  background-color: #333333;
+}
+
+tr.field-id td {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+th {
+  font-weight: bold;
+  text-align: right;
+  vertical-align: top;
+}
 </style>

web/app/src/components/UpdateListener.vue

@@ -86,7 +86,7 @@ export default {
         console.log("socketIO reconnected after", attemptNumber, "attempts");
 
         // Resubscribe to whatever we want to be subscribed to:
-        if (this.subscribedJob) this._updateJobSubscription("subscribe", newJob);
+        if (this.subscribedJob) this._updateJobSubscription("subscribe", this.subscribedJob);
 
         this.$emit("sioReconnected", attemptNumber);
       });