Web: add worker details component

web/app/src/components/workers/WorkerDetails.vue

@@ -0,0 +1,56 @@
+<template>
+  <h2 class="column-title">Worker Details</h2>
+
+  <template v-if="hasWorkerData">
+    <dl>
+      <dt class="field-id">ID</dt>
+      <dd>{{ workerData.id }}</dd>
+
+      <dt class="field-nickname">Nickname</dt>
+      <dd>{{ workerData.nickname }}</dd>
+
+      <dt class="field-status">Status</dt>
+      <dd>{{ workerData.status }}</dd>
+    </dl>
+  </template>
+
+  <div v-else class="details-no-item-selected">
+    <p>Select a worker to see its details.</p>
+  </div>
+</template>
+
+<script lang="js">
+import * as datetime from "@/datetime";
+import { WorkerMgtApi } from '@/manager-api';
+import { apiClient } from '@/stores/api-query-count';
+
+export default {
+  props: [
+    "workerData", // Worker data to show.
+  ],
+  data() {
+    return {
+      datetime: datetime, // So that the template can access it.
+      api: new WorkerMgtApi(apiClient),
+    };
+  },
+  mounted() {
+    // Allow testing from the JS console:
+    window.workerDetailsVue = this;
+  },
+  computed: {
+    hasWorkerData() {
+      return !!this.workerData && !!this.workerData.id;
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Prevent fields with long IDs from overflowing. */
+.field-id + dd {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

web/app/src/views/WorkersView.vue

@@ -3,7 +3,7 @@
     <workers-table ref="workersTable" :activeWorkerID="workerID" @tableRowClicked="onTableWorkerClicked" />
   </div>
   <div class="col col-workers-details">
-    Worker Details {{ workerID }}
+    <worker-details :workerData="workers.activeWorker" />
   </div>
   <footer>
     <notification-bar />
@@ -23,10 +23,13 @@
 </style>
 
 <script>
+import { WorkerMgtApi } from '@/manager-api';
 import { useWorkers } from '@/stores/workers';
+import { apiClient } from '@/stores/api-query-count';
 
 import NotificationBar from '@/components/footer/NotificationBar.vue'
 import UpdateListener from '@/components/UpdateListener.vue'
+import WorkerDetails from '@/components/workers/WorkerDetails.vue'
 import WorkersTable from '@/components/workers/WorkersTable.vue'
 
 export default {
@@ -35,13 +38,21 @@ export default {
   components: {
     NotificationBar,
     UpdateListener,
+    WorkerDetails,
     WorkersTable,
   },
   data: () => ({
     workers: useWorkers(),
+    api: new WorkerMgtApi(apiClient),
   }),
   mounted() {
     window.workersView = this;
+    this._fetchWorker(this.workerID);
+  },
+  watch: {
+    workerID(newWorkerID, oldWorkerID) {
+      this._fetchWorker(newWorkerID);
+    },
   },
   methods: {
     // SocketIO connection event handlers:
@@ -63,6 +74,20 @@ export default {
       console.log("routing to worker", route.params);
       this.$router.push(route);
     },
+
+    /**
+     * Fetch worker info and set the active worker once it's received.
+     * @param {string} workerID worker ID, can be empty string for "no worker".
+     */
+    _fetchWorker(workerID) {
+      if (!workerID) {
+        this.workers.deselectAllWorkers();
+        return;
+      }
+
+      return this.api.fetchWorker(workerID)
+        .then((worker) => this.workers.setActiveWorker(worker));
+    },
   },
 }
 </script>