Add node state colours

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;

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