From 187e46ee6d5902f121a715fa31523da2e00cd8c2 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Fri, 28 Feb 2025 21:56:09 -0500
Subject: [PATCH] Add node state colours

---
 pvc-vue/src/components/ValueCard.vue | 37 ++++++++++++++++++++++++++--
 pvc-vue/src/views/Nodes.vue          | 33 +++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/pvc-vue/src/components/ValueCard.vue b/pvc-vue/src/components/ValueCard.vue
index c3ec04f..1fdcac3 100644
--- a/pvc-vue/src/components/ValueCard.vue
+++ b/pvc-vue/src/components/ValueCard.vue
@@ -5,14 +5,16 @@
         <span class="metric-label">{{ title }}</span>
       </h6>
     </div>
-    <div class="card-body">
+    <div class="card-body" :class="bgColorClass">
       <h4 class="metric-value" :class="valueClass">{{ value }}</h4>
     </div>
   </div>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
   title: {
     type: String,
     required: true
@@ -24,8 +26,18 @@ defineProps({
   valueClass: {
     type: String,
     default: ''
+  },
+  bgColor: {
+    type: String,
+    default: ''
   }
 });
+
+// Compute the background color class based on the bgColor prop
+const bgColorClass = computed(() => {
+  if (!props.bgColor) return '';
+  return `bg-${props.bgColor}`;
+});
 </script>
 
 <style scoped>
@@ -42,6 +54,27 @@ defineProps({
   overflow: hidden;
 }
 
+/* Background color classes */
+.bg-green {
+  background-color: rgba(40, 167, 69, 0.1);
+}
+
+.bg-yellow {
+  background-color: rgba(255, 193, 7, 0.1);
+}
+
+.bg-red {
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+.bg-blue {
+  background-color: rgba(13, 110, 253, 0.1);
+}
+
+.bg-gray {
+  background-color: rgba(108, 117, 125, 0.1);
+}
+
 .metric-card .card-header {
   background-color: rgba(0, 0, 0, 0.03);
   padding: 0.5rem;
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index 671d69f..c831f5a 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -49,18 +49,21 @@
               <ValueCard 
                 title="Daemon State" 
                 :value="selectedNodeData.daemon_state || 'Unknown'" 
+                :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
               />
 
               <!-- Card 2: Coordinator State -->
               <ValueCard 
                 title="Coordinator State" 
                 :value="selectedNodeData.coordinator_state || 'Unknown'" 
+                :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
               />
 
               <!-- Card 3: Domain State -->
               <ValueCard 
                 title="Domain State" 
                 :value="selectedNodeData.domain_state || 'Unknown'" 
+                :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
               />
 
               <!-- Card 4: PVC Version -->
@@ -486,6 +489,36 @@ const nodeAllocatedMemoryChartData = computed(() => {
   };
 });
 
+// Helper functions for state colors
+// Determine color for daemon state
+const getDaemonStateColor = (state) => {
+  if (!state) return '';
+  
+  if (state === 'run') return 'green';
+  if (['init', 'shutdown'].includes(state)) return 'yellow';
+  if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
+  return 'blue';
+};
+
+// Determine color for coordinator state
+const getCoordinatorStateColor = (state) => {
+  if (!state) return '';
+  
+  if (state === 'primary') return 'green';
+  if (state === 'secondary') return 'blue';
+  if (state === 'hypervisor') return 'gray';
+  return '';
+};
+
+// Determine color for domain state
+const getDomainStateColor = (state) => {
+  if (!state) return '';
+  
+  if (state === 'ready') return 'green';
+  if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
+  return 'gray';
+};
+
 // Initialize the component
 onMounted(() => {
   // Select the first node by default if available