From 8f5dac1ca42d46d61274acefe1d4838e97ba12eb Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 10:41:34 -0500
Subject: [PATCH] Consolidate back to VMOverview.vue and disable

---
 .../vms/{VMDetail.vue => VMDetail.vue.bak}    |   0
 .../src/components/pages/vms/VMOverview.vue   | 145 +++++++++++++++++-
 2 files changed, 141 insertions(+), 4 deletions(-)
 rename pvc-vue/src/components/pages/vms/{VMDetail.vue => VMDetail.vue.bak} (100%)

diff --git a/pvc-vue/src/components/pages/vms/VMDetail.vue b/pvc-vue/src/components/pages/vms/VMDetail.vue.bak
similarity index 100%
rename from pvc-vue/src/components/pages/vms/VMDetail.vue
rename to pvc-vue/src/components/pages/vms/VMDetail.vue.bak
diff --git a/pvc-vue/src/components/pages/vms/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
index e6d2a47..6da0941 100644
--- a/pvc-vue/src/components/pages/vms/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -111,7 +111,80 @@
 
     <!-- VM Details -->
     <div v-if="selectedVMData && !showVMList" class="vm-details">
-      <VMDetail :vm="selectedVMData" />
+      <!-- Basic Info Section -->
+      <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+        <div class="info-grid">
+          <ValueCard 
+            title="State" 
+            :value="selectedVMData.state || 'Unknown'"
+            :status="getStateColor(selectedVMData.state)"
+          />
+          <ValueCard 
+            title="Node" 
+            :value="selectedVMData.node || 'N/A'"
+          />
+          <ValueCard 
+            title="CPUs" 
+            :value="selectedVMData.vcpus || 0"
+          />
+          <ValueCard 
+            title="Memory" 
+            :value="formatMemory(selectedVMData.memory)"
+          />
+        </div>
+      </CollapsibleSection>
+
+      <!-- Resources Section -->
+      <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+        <div class="info-grid-2">
+          <ValueCard 
+            title="Disk Size" 
+            :value="formatStorage(selectedVMData.disk_size)"
+          />
+          <ValueCard 
+            title="Network IPs" 
+            :value="selectedVMData.ips?.join(', ') || 'None'"
+          />
+        </div>
+      </CollapsibleSection>
+
+      <!-- Networks Section -->
+      <CollapsibleSection 
+        v-if="selectedVMData.networks?.length" 
+        title="Network Interfaces" 
+        :initially-expanded="sections.networks"
+      >
+        <div class="cards-stack">
+          <div v-for="network in selectedVMData.networks" 
+               :key="network.vni" 
+               class="detail-card"
+          >
+            <ValueCard title="Interface" :value="network.vni" />
+            <ValueCard title="Type" :value="network.type" />
+            <ValueCard title="MAC" :value="network.mac" />
+            <ValueCard title="Source" :value="network.source" />
+          </div>
+        </div>
+      </CollapsibleSection>
+
+      <!-- Storage Section -->
+      <CollapsibleSection 
+        v-if="selectedVMData.disks?.length" 
+        title="Storage" 
+        :initially-expanded="sections.storage"
+      >
+        <div class="cards-stack">
+          <div v-for="disk in selectedVMData.disks" 
+               :key="disk.dev" 
+               class="detail-card"
+          >
+            <ValueCard title="Device" :value="disk.dev" />
+            <ValueCard title="Type" :value="disk.type" />
+            <ValueCard title="Bus" :value="disk.bus" />
+            <ValueCard title="Source" :value="disk.name" />
+          </div>
+        </div>
+      </CollapsibleSection>
     </div>
 
     <!-- No VM Selected Message -->
@@ -127,8 +200,8 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import VMDetail from './VMDetail.vue';
 import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -168,7 +241,8 @@ const sections = ref({
   info: true,
   graphs: true,
   resources: true,
-  network: true
+  network: true,
+  storage: true
 });
 
 // Toggle VM list visibility
@@ -486,6 +560,28 @@ watch(() => showVMList.value, (isVisible) => {
 watch(() => props.vmData, (newData) => {
   console.log('VMOverview received vmData:', newData);
 }, { immediate: true });
+
+// Helper functions
+const getStateColor = (state) => {
+  if (!state) return '';
+  switch(state.toLowerCase()) {
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
+  }
+};
+
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
+};
 </script> 
 
 <style scoped>
@@ -670,10 +766,51 @@ watch(() => props.vmData, (newData) => {
 
 /* VM Details */
 .vm-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
-  padding: 0.5rem;
+}
+
+.info-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.info-grid-2 {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.cards-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.detail-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 0.25rem;
+}
+
+@media (max-width: 768px) {
+  .info-grid,
+  .info-grid-2 {
+    grid-template-columns: 1fr;
+  }
+  
+  .detail-card {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Filter menu styles */