From 7bf121e93edd61a923c16f633873108249484362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Sat, 2 Mar 2024 22:32:02 +0100
Subject: [PATCH] Webapp: show explanation in farm status tooltip

---
 web/app/src/components/FarmStatus.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/web/app/src/components/FarmStatus.vue b/web/app/src/components/FarmStatus.vue
index 16411dcf..9ccf0eb4 100644
--- a/web/app/src/components/FarmStatus.vue
+++ b/web/app/src/components/FarmStatus.vue
@@ -1,16 +1,36 @@
 <template>
   <span id="farmstatus" v-if="status"
-    >Farm status: <span :class="'farm-status-' + status">{{ status }}</span></span
+    >Farm status:
+    <span :class="'farm-status-' + status" :title="explanation">{{ status }}</span></span
   >
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
 const props = defineProps(['status']);
+
+const expanations = {
+  active: 'Actively working on a job.',
+  idle: 'Workers are awake and ready for work.',
+  waiting: 'Work has been queued, but all workers are asleep.',
+  asleep: 'All workers are asleep, and no work has been queued.',
+  inoperative: 'Cannot work: there are no workers, or all are offline.',
+  starting: 'Farm is starting up.',
+};
+
+const explanation = computed(() => {
+  return expanations[props.status] || '';
+});
 </script>
 
 <style>
 span#farmstatus {
   margin: 0 auto;
+  cursor: default;
+}
+span#farmstatus span {
+  cursor: help;
 }
 .farm-status-starting {
   color: var(--color-farm-status-starting);