From d581d172733664467f178bc0fc61c8687b25ae5f Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 15:41:47 -0500
Subject: [PATCH] Clean up styling and organize components

---
 .../src/components/general/NodeSelectBar.vue  |  35 +-
 .../src/components/general/VMSearchBar.vue    |   8 +-
 .../components/pages/nodes/NodeOverview.vue   | 469 +-----------------
 .../src/components/pages/nodes/NodeVMList.vue | 129 +++++
 .../src/components/pages/vms/VMOverview.vue   |   5 +-
 pvc-vue/src/views/Nodes.vue                   |   2 +-
 pvc-vue/src/views/VMs.vue                     |   1 -
 7 files changed, 180 insertions(+), 469 deletions(-)
 create mode 100644 pvc-vue/src/components/pages/nodes/NodeVMList.vue

diff --git a/pvc-vue/src/components/general/NodeSelectBar.vue b/pvc-vue/src/components/general/NodeSelectBar.vue
index 74aeb2e..d003f1e 100644
--- a/pvc-vue/src/components/general/NodeSelectBar.vue
+++ b/pvc-vue/src/components/general/NodeSelectBar.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="node-select-bar">
-    <button
-      v-for="node in nodes"
-      :key="node"
-      class="node-tab"
-      :class="{ 'active': modelValue === node }"
-      @click="selectNode(node)"
-    >
-      {{ node }}
-    </button>
+    <div class="node-select-row">
+      <button
+        v-for="node in nodes"
+        :key="node"
+        class="node-tab"
+        :class="{ 'active': modelValue === node }"
+        @click="selectNode(node)"
+      >
+        {{ node }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -38,13 +40,20 @@ const selectNode = (node) => {
 <style scoped>
 .node-select-bar {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.5rem;
+  flex-direction: column;
+  gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  overflow-x: auto;
+  padding: 1rem;
+  margin-top: -1.25rem !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  margin-bottom: 0.5rem;
+}
+
+.node-select-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
 }
 
 .node-tab {
diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index f1d206a..e44910e 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -619,12 +619,15 @@ const loadFiltersFromLocalStorage = () => {
   background-color: white;
   border-radius: 0.25rem;
   padding: 1rem;
+  margin-top: -1.25rem !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 .controls-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
 }
 
 .search-box {
@@ -700,6 +703,7 @@ const loadFiltersFromLocalStorage = () => {
   border-radius: 0.25rem;
   overflow: hidden;
   margin-top: 0.5rem;
+  padding-bottom: 0.25rem;
 }
 
 .vm-list {
@@ -708,6 +712,7 @@ const loadFiltersFromLocalStorage = () => {
   width: 100%;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
+  padding-bottom: 0.25rem;
 }
 
 .vm-list-item {
@@ -715,7 +720,6 @@ const loadFiltersFromLocalStorage = () => {
   align-items: center;
   padding: 0.75rem 1rem;
   border: none !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   background-color: white;
   text-align: left;
   cursor: pointer;
@@ -725,6 +729,7 @@ const loadFiltersFromLocalStorage = () => {
 
 .vm-list-item:last-child {
   border-bottom: none !important;
+  margin-bottom: 0.25rem;
 }
 
 .vm-list-item:hover {
@@ -849,7 +854,6 @@ const loadFiltersFromLocalStorage = () => {
   margin-bottom: 0.5rem;
   font-weight: 600;
   color: #495057;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding-bottom: 0.25rem;
 }
 
diff --git a/pvc-vue/src/components/pages/nodes/NodeOverview.vue b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
index 5040a58..e3a72fc 100644
--- a/pvc-vue/src/components/pages/nodes/NodeOverview.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
@@ -146,32 +146,12 @@
 
       <!-- Running VMs Section -->
       <CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
-        <div class="vms-container">
-          <div class="vms-card">
-            <div class="card-header">
-              <h6 class="card-title mb-0">
-                <span class="metric-label">Running VMs</span>
-              </h6>
-            </div>
-            <div class="card-body">
-              <div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
-                <p>No VMs running on this node</p>
-              </div>
-              <div v-else class="vm-list" :style="{ 
-                'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))` 
-              }">
-                <div
-                  v-for="vm in selectedNodeData.running_domains"
-                  :key="vm"
-                  class="vm-item"
-                  @click="handleVmClick(vm)"
-                  title="View VM details"
-                >
-                  {{ vm }}
-                </div>
-              </div>
-            </div>
-          </div>
+        <div class="vm-list-row">
+          <NodeVMList 
+            :vmData="props.vmData"
+            :nodeData="props.nodeData"
+            :nodeName="selectedNode"
+          />
         </div>
       </CollapsibleSection>
     </div>
@@ -193,6 +173,8 @@ import HealthChart from '../../charts/HealthChart.vue';
 import ValueCard from '../../general/ValueCard.vue';
 import CollapsibleSection from '../../general/CollapsibleSection.vue';
 import NodeSelectBar from '../../general/NodeSelectBar.vue';
+import NodeVMList from './NodeVMList.vue';
+import { useRouter, useRoute } from 'vue-router';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({
@@ -210,6 +192,11 @@ const props = defineProps({
     type: Object,
     required: true,
     default: () => ({})
+  },
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
   }
 });
 
@@ -430,28 +417,6 @@ const getDomainStateColor = (state) => {
   return 'gray';
 };
 
-// Handle VM click (placeholder until VMs page is implemented)
-const handleVmClick = (vmName) => {
-  console.log(`VM clicked: ${vmName}`);
-  alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
-};
-
-// Calculate the minimum width for VM items based on the longest VM name
-const calculateVmItemMinWidth = computed(() => {
-  if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
-    return 100; // Default minimum width
-  }
-  
-  // Find the longest VM name
-  const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
-    return current.length > longest.length ? current : longest;
-  }, '');
-  
-  // Calculate width based on character count (approx 8px per character plus padding)
-  const minWidth = Math.max(100, longestVmName.length * 8 + 32);
-  return minWidth;
-});
-
 // Initialize the component
 onMounted(() => {
   // Select the first node by default if available
@@ -499,165 +464,21 @@ const handleNodeSelect = (node) => {
   width: 100%;
 }
 
-/* Node tabs styling */
-.node-tabs-wrapper {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  margin-bottom: 1rem;
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  padding: 1rem;
 }
 
-.node-tabs {
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
-  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-  scroll-behavior: smooth;
-  padding: 0 40px; /* Make room for scroll buttons */
-}
-
-.node-tabs::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
-}
-
-.node-tab {
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-  color: #495057;
-}
-
-.node-tab:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.node-tab.active {
-  border-bottom: 2px solid #0d6efd;
-  color: #0d6efd;
-  font-weight: 600;
-}
-
-.tab-scroll-button {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 40px;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.tab-scroll-button.left {
-  left: 0;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.tab-scroll-button.right {
-  right: 0;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-/* Node details styling */
-.node-details {
+.loading-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.no-node-selected {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 0.25rem;
-  color: #666;
-}
-
-/* Section styling */
-.section-container {
-  position: relative;
-  margin-bottom: 0.5rem;
-}
-
-.section-content-wrapper {
-  display: flex;
-  position: relative;
-}
-
-.section-content {
-  flex: 1;
-  min-width: 0;
-  padding-right: 40px;
-}
-
-.toggle-column {
-  position: absolute;
-  top: 4px;
-  right: 0;
-  width: 40px;
-  height: 30px;
-  z-index: 10;
-  padding-left: 6px;
-}
-
-.section-toggle {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.2s;
-  width: 30px;
-  height: 30px;
-  display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
 }
 
-.section-toggle:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #333;
-}
-
-.section-toggle:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.collapsed-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  height: 38px;
-  width: 100%;
-}
-
-.collapsed-section-header .card-title {
-  margin: 0;
-  color: #495057;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
+.info-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .vm-list-row {
   display: grid;
   gap: 0.5rem;
   width: 100%;
@@ -665,10 +486,6 @@ const handleNodeSelect = (node) => {
 
 /* Responsive grid layouts */
 @media (min-width: 1201px) {
-  .metrics-row {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
   .info-row {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -687,10 +504,6 @@ const handleNodeSelect = (node) => {
 }
 
 @media (min-width: 801px) and (max-width: 1200px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .info-row {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -709,7 +522,6 @@ const handleNodeSelect = (node) => {
 }
 
 @media (max-width: 800px) {
-  .metrics-row,
   .info-row,
   .graphs-row,
   .resources-row-cpu,
@@ -718,245 +530,4 @@ const handleNodeSelect = (node) => {
   }
 }
 
-.metric-card {
-  min-width: 180px;
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.metric-card .card-header {
-  background-color: rgba(0, 0, 0, 0.03);
-  padding: 0.5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  height: 38px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-header h6 {
-  font-size: 0.95rem;
-  font-weight: 600;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0;
-}
-
-.metric-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-card .metric-value {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-/* Add back the VM-specific styles */
-.vms-container {
-  width: 100%;
-}
-
-.vms-card {
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
-}
-
-.vms-card .card-header {
-  background-color: rgba(0, 0, 0, 0.03);
-  padding: 0.5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  height: 38px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vms-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-}
-
-.no-vms {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100px;
-  color: #6c757d;
-  font-style: italic;
-}
-
-.vm-list {
-  display: grid;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.vm-item {
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.015);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 0.25rem;
-  cursor: pointer;
-  text-align: center;
-  font-weight: 500;
-  color: #333;
-  transition: all 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-}
-
-.vm-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Also add back these missing utility styles */
-.metric-percentage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.8);
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
-  z-index: 2;
-}
-
-.metric-percentage .metric-value {
-  font-size: 2.5rem;
-  font-weight: 500;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-.chart-wrapper {
-  position: relative;
-  width: 100%;
-  height: 160px;
-  min-height: 160px;
-  overflow: hidden;
-  border: none;
-  border-radius: 0;
-  background-color: white;
-  margin: 0;
-}
-
-/* Status colors */
-.status-healthy { color: #28a745; }
-.status-warning { color: #ffc107; }
-.status-error { color: #dc3545; }
-
-/* Chart colors */
-.chart-cpu {
-  background: white;
-  border: none;
-}
-
-.chart-memory {
-  background: white;
-  border: none;
-}
-
-.chart-storage, .chart-allocated {
-  background: white;
-  border: none;
-}
-
-.chart-health {
-  background: white;
-  border: none;
-}
-
-/* Toggle column styles */
-.toggle-column.expanded {
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  align-items: flex-start;
-  padding-top: 4px;
-}
-
-/* Section container styles */
-.section-container.collapsed {
-  margin-bottom: 0.5rem;
-}
-
-.section-container.collapsed .section-content-wrapper {
-  margin-bottom: 0;
-}
-
-/* Target the specific element causing the padding */
-ul.nav.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target Bootstrap's default tab styling */
-.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target any list items in the tabs */
-.nav-tabs > li {
-  margin-left: 0 !important;
-  padding-left: 0 !important;
-}
-
-/* Target the tab container */
-.tab-container {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target the content grid in nodes view */
-.nodes-view .content-grid {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target all direct children of content-grid in nodes view */
-.nodes-view .content-grid > * {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
 </style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/pages/nodes/NodeVMList.vue b/pvc-vue/src/components/pages/nodes/NodeVMList.vue
new file mode 100644
index 0000000..532bd1b
--- /dev/null
+++ b/pvc-vue/src/components/pages/nodes/NodeVMList.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="vms-container">
+    <div v-if="!runningDomains || runningDomains.length === 0" class="no-vms">
+      No VMs running on this node
+    </div>
+    <div v-else class="vm-list" :style="{ 
+      'grid-template-columns': `repeat(auto-fill, minmax(150px, 1fr))` 
+    }">
+      <div 
+        v-for="vmName in runningDomains" 
+        :key="vmName" 
+        class="vm-item"
+        @click="selectVM(vmName)"
+      >
+        {{ vmName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeName: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+
+// Get the selected node data
+const nodeData = computed(() => {
+  if (!props.nodeName || !props.nodeData || props.nodeData.length === 0) {
+    console.log('No node selected or no node data available');
+    return null;
+  }
+  
+  const node = props.nodeData.find(node => node.name === props.nodeName);
+  console.log(`Node data for ${props.nodeName}:`, node);
+  return node;
+});
+
+// Get running domains from the node data
+const runningDomains = computed(() => {
+  if (!nodeData.value || !nodeData.value.running_domains) {
+    console.log('No running domains found for node:', props.nodeName);
+    return [];
+  }
+  
+  console.log(`Found ${nodeData.value.running_domains.length} running domains on node ${props.nodeName}:`, nodeData.value.running_domains);
+  return nodeData.value.running_domains;
+});
+
+// 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 }
+  });
+};
+</script>
+
+<style scoped>
+.vms-container {
+  width: 100%;
+}
+
+.no-vms {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.vm-list {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.vm-item {
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.015);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.vm-node {
+  font-size: 0.7rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+</style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/pages/vms/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
index 03d435a..b6cfc42 100644
--- a/pvc-vue/src/components/pages/vms/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -19,7 +19,7 @@
     <!-- VM Details -->
     <div v-if="selectedVMData && !showVMList" class="content-container">
       <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
-        <div class="info-grid">
+        <div class="info-grid-general">
           <ValueCard 
             title="State" 
             :value="selectedVMData.state || 'Unknown'"
@@ -42,7 +42,7 @@
 
       <!-- Resources Section -->
       <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
-        <div class="info-grid-2">
+        <div class="info-grid-resources">
           <ValueCard 
             title="Disk Size" 
             :value="formatStorage(selectedVMData.disk_size)"
@@ -344,7 +344,6 @@ const formatStorage = (sizeGB) => {
   padding: 2rem;
 }
 
-/* Keep only the styles needed for VM details display */
 .info-grid {
   display: grid;
   gap: 1rem;
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index 6ae4d51..e5ad012 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -13,7 +13,7 @@
 import PageTitle from '../components/general/PageTitle.vue';
 import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
 
-defineProps({
+const props = defineProps({
   nodeData: {
     type: Array,
     required: true,
diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue
index 6b11bb3..56f70b0 100644
--- a/pvc-vue/src/views/VMs.vue
+++ b/pvc-vue/src/views/VMs.vue
@@ -14,7 +14,6 @@
 import PageTitle from '../components/general/PageTitle.vue';
 import VMOverview from '../components/pages/vms/VMOverview.vue';
 
-// Define props to receive data from App.vue
 const props = defineProps({
   vmData: {
     type: Array,