Make Node selection persistent

This commit is contained in:
Joshua Boniface 2025-03-02 17:37:20 -05:00
parent 779dbe1632
commit 61dbe8eed1
4 changed files with 69 additions and 14 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>