From 61dbe8eed16372601c83e789728a9afce0b8b63f Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 17:37:20 -0500
Subject: [PATCH] Make Node selection persistent

---
 .../src/components/general/NodeSelectBar.vue  | 35 ++++++++++++++++++-
 .../components/pages/nodes/NodeOverview.vue   | 16 +++++++--
 .../src/components/pages/nodes/NodeVMList.vue | 12 ++-----
 pvc-vue/src/views/Nodes.vue                   | 20 +++++++++++
 4 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/pvc-vue/src/components/general/NodeSelectBar.vue b/pvc-vue/src/components/general/NodeSelectBar.vue
index 9dafb56..49d8346 100644
--- a/pvc-vue/src/components/general/NodeSelectBar.vue
+++ b/pvc-vue/src/components/general/NodeSelectBar.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -26,15 +26,48 @@ const props = defineProps({
     type: Array,
     required: true,
     default: () => []
+  },
+  value: {
+    type: String,
+    default: null
   }
 });
 
 const emit = defineEmits(['update:modelValue', 'select']);
 
+const selectedNode = ref(props.value || props.modelValue);
+
 const selectNode = (node) => {
+  selectedNode.value = node;
   emit('update:modelValue', node);
   emit('select', node);
+  
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
 };
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodes.includes(savedNodeId)) {
+    // Only select if the node exists in the available nodes
+    selectedNode.value = savedNodeId;
+    emit('update:modelValue', savedNodeId);
+    emit('select', savedNodeId);
+  }
+});
+
+watch(() => props.value, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
 </script>
 
 <style scoped>
diff --git a/pvc-vue/src/components/pages/nodes/NodeOverview.vue b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
index 4e17e03..190f13f 100644
--- a/pvc-vue/src/components/pages/nodes/NodeOverview.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
@@ -464,8 +464,12 @@ const getDomainStateColor = (state) => {
 
 // Initialize the component
 onMounted(() => {
-  // Select the first node by default if available
-  if (props.nodeData && props.nodeData.length > 0) {
+  // Check if there's a saved node selection
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodeData.some(node => node.name === savedNodeId)) {
+    selectNode(savedNodeId);
+  } else if (props.nodeData && props.nodeData.length > 0) {
+    // Fall back to selecting the first node
     selectNode(props.nodeData[0].name);
   }
 
@@ -496,7 +500,8 @@ const availableNodes = computed(() => {
 
 const handleNodeSelect = (node) => {
   selectedNode.value = node;
-  // Any other node selection handling logic
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
 };
 
 // Process node health messages
@@ -542,6 +547,11 @@ const getMessageIcon = (msg) => {
 const getMessageContent = (msg) => {
   return msg.message || 'No details available';
 };
+
+const selectVM = (vmId) => {
+  // Store the VM ID in localStorage so it will be selected when the VMs page loads
+  localStorage.setItem('selectedVMId', vmId);
+};
 </script>
 
 <style scoped>
diff --git a/pvc-vue/src/components/pages/nodes/NodeVMList.vue b/pvc-vue/src/components/pages/nodes/NodeVMList.vue
index 8cc23ee..9b11b45 100644
--- a/pvc-vue/src/components/pages/nodes/NodeVMList.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeVMList.vue
@@ -71,16 +71,8 @@ const runningDomains = computed(() => {
 
 // Navigate to VM details
 const selectVM = (vmName) => {
-  console.log('Navigating to VM:', vmName);
-  
-  // Find the full VM data if available
-  const vmData = props.vmData.find(vm => vm.name === vmName);
-  console.log('Found VM data:', vmData);
-  
-  router.push({ 
-    path: '/vms',
-    query: { vm: vmName }
-  });
+  // Store the VM ID in localStorage so it will be selected when the VMs page loads
+  localStorage.setItem('selectedVMId', vmName);
 };
 </script>
 
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index e2f2aec..5cf4aaf 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script setup>
+import { ref, onMounted, watch } from 'vue';
 import PageTitle from '../components/general/PageTitle.vue';
 import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
 
@@ -30,6 +31,25 @@ const props = defineProps({
     default: () => ({})
   }
 });
+
+const selectedNode = ref(null);
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId) {
+    selectedNode.value = savedNodeId;
+  }
+});
+
+watch(selectedNode, (newValue) => {
+  // Save selected node to localStorage whenever it changes
+  if (newValue) {
+    localStorage.setItem('selectedNodeId', newValue);
+  } else {
+    localStorage.removeItem('selectedNodeId');
+  }
+});
 </script>
 
 <style scoped>