From 3818d4df83bc7b2cbfa5f990a6059e0dd0fb29b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Thu, 2 Jun 2022 18:42:34 +0200
Subject: [PATCH] Web: add simple worker action bar

UI/UX needs improvements, but there now are some buttons to manage Workers.
They request forced status changes, so nothing lazy yet. Still have to
consider how to include that in the UI. Could probably follow the
Flamenco 2 Manager design.
---
 .../components/workers/WorkerActionsBar.vue   | 48 +++++++++++++++++++
 .../src/components/workers/WorkersTable.vue   |  6 +++
 web/app/src/stores/workers.js                 | 20 +++++++-
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 web/app/src/components/workers/WorkerActionsBar.vue

diff --git a/web/app/src/components/workers/WorkerActionsBar.vue b/web/app/src/components/workers/WorkerActionsBar.vue
new file mode 100644
index 00000000..620800b4
--- /dev/null
+++ b/web/app/src/components/workers/WorkerActionsBar.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="btn-bar workers">
+    <button class="btn wakeup" v-on:click="onButtonWakeup">Wake Up</button>
+    <button class="btn sleep" v-on:click="onButtonSleep">Sleep</button>
+    <button class="btn offline dangerous" v-on:click="onButtonOffline">Offline</button>
+  </div>
+</template>
+
+<script>
+import { useWorkers } from '@/stores/workers';
+import { useNotifs } from '@/stores/notifications';
+
+export default {
+  name: "WorkerActionsBar",
+  data: () => ({
+    workers: useWorkers(),
+    notifs: useNotifs(),
+  }),
+  computed: {
+  },
+  methods: {
+    onButtonWakeup() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAwake());
+    },
+    onButtonSleep() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAsleep());
+    },
+    onButtonOffline() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusOffline());
+    },
+
+    _handleWorkerActionPromise(promise) {
+      return promise
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
+          this.notifs.add(`Error: ${errorMsg}`);
+        })
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue
index 4ca09210..4033e750 100644
--- a/web/app/src/components/workers/WorkersTable.vue
+++ b/web/app/src/components/workers/WorkersTable.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2 class="column-title">Workers</h2>
+    <worker-actions-bar />
     <status-filter-bar
       :availableStatuses="availableStatuses"
       :activeStatuses="shownStatuses"
@@ -16,8 +17,10 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { WorkerMgtApi } from '@/manager-api'
 import { indicator, workerStatus } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
+import { useWorkers } from '@/stores/workers';
 
 import StatusFilterBar from '@/components/StatusFilterBar.vue'
+import WorkerActionsBar from '@/components/workers/WorkerActionsBar.vue'
 
 export default {
   name: 'WorkersTable',
@@ -25,9 +28,12 @@ export default {
   emits: ["tableRowClicked"],
   components: {
     StatusFilterBar,
+    WorkerActionsBar,
   },
   data: () => {
     return {
+      workers: useWorkers(),
+
       shownStatuses: [],
       availableStatuses: [], // Will be filled after data is loaded from the backend.
     };
diff --git a/web/app/src/stores/workers.js b/web/app/src/stores/workers.js
index e111fe32..315c09a0 100644
--- a/web/app/src/stores/workers.js
+++ b/web/app/src/stores/workers.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 
-import { WorkerMgtApi } from '@/manager-api';
+import { WorkerMgtApi, WorkerStatusChangeRequest } from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 
 
@@ -43,5 +43,23 @@ export const useWorkers = defineStore('workers', {
         activeWorkerID: "",
       });
     },
+
+    reqStatusAwake() { return this.requestStatus("awake"); },
+    reqStatusAsleep() { return this.requestStatus("asleep"); },
+    reqStatusOffline() { return this.requestStatus("offline"); },
+
+    /**
+     * Transition the active worker to the new status.
+     * @param {string} newStatus
+     * @returns a Promise for the API request.
+     */
+     requestStatus(newStatus) {
+      if (!this.activeWorkerID) {
+        console.warn(`requestStatus(${newStatus}) impossible, no active worker ID`);
+        return;
+      }
+      const statuschange = new WorkerStatusChangeRequest(newStatus, false);
+      return api.requestWorkerStatusChange(this.activeWorkerID, statuschange);
+    },
   },
 })