From 14e11a4772ffeaf5caf7083509cd38de9fffe658 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 01:09:10 -0500
Subject: [PATCH] Add basic but broken VM page

---
 pvc-vue/src/components/VMDetail.vue   | 318 ++++++++++++++++++++++++++
 pvc-vue/src/components/VMOverview.vue |  35 +--
 2 files changed, 320 insertions(+), 33 deletions(-)
 create mode 100644 pvc-vue/src/components/VMDetail.vue

diff --git a/pvc-vue/src/components/VMDetail.vue b/pvc-vue/src/components/VMDetail.vue
new file mode 100644
index 0000000..8baefca
--- /dev/null
+++ b/pvc-vue/src/components/VMDetail.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="vm-detail">
+    <!-- Basic Info Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.info }">
+      <!-- Only show header when collapsed -->
+      <div v-if="!sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">VM Information</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Content when expanded -->
+      <div v-show="sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="info-cards">
+            <ValueCard title="Current State" :value="vm.state" :status="getStateColor(vm.state)" />
+            <ValueCard title="Virtual CPUs" :value="vm.vcpu" />
+            <ValueCard title="Memory (MB)" :value="vm.memory" />
+            <ValueCard title="Host Node" :value="vm.node" />
+            <ValueCard title="Migration Status" :value="vm.migrated || 'No'" />
+          </div>
+        </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Networks Section -->
+    <template v-if="vm.networks && vm.networks.length > 0">
+      <div v-for="network in vm.networks" :key="network.vni" class="section-container" :class="{ 'collapsed': !sections[`network_${network.vni}`] }">
+        <!-- Only show header when collapsed -->
+        <div v-if="!sections[`network_${network.vni}`]" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Network Interface {{ network.vni }}</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Content when expanded -->
+        <div v-show="sections[`network_${network.vni}`]" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="info-cards">
+              <ValueCard title="Interface Type" :value="network.type" />
+              <ValueCard title="MAC Address" :value="network.mac" />
+              <ValueCard title="Network Model" :value="network.model" />
+              <ValueCard title="Network Source" :value="network.source" />
+            </div>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Disks Section -->
+    <template v-if="vm.disks && vm.disks.length > 0">
+      <div v-for="disk in vm.disks" :key="disk.dev" class="section-container" :class="{ 'collapsed': !sections[`disk_${disk.dev}`] }">
+        <!-- Only show header when collapsed -->
+        <div v-if="!sections[`disk_${disk.dev}`]" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Disk {{ disk.dev }}</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Content when expanded -->
+        <div v-show="sections[`disk_${disk.dev}`]" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="info-cards">
+              <ValueCard title="Storage Type" :value="disk.type" />
+              <ValueCard title="Storage Pool" :value="getDiskPool(disk.name)" />
+              <ValueCard title="Volume Name" :value="getDiskVolume(disk.name)" />
+              <ValueCard title="Bus Interface" :value="disk.bus" />
+            </div>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ValueCard from './ValueCard.vue';
+
+const props = defineProps({
+  vm: {
+    type: Object,
+    required: true
+  }
+});
+
+// Dynamic sections state
+const sections = ref({
+  info: true
+});
+
+// Initialize sections for networks and disks
+onMounted(() => {
+  if (props.vm.networks) {
+    props.vm.networks.forEach(network => {
+      sections.value[`network_${network.vni}`] = true;
+    });
+  }
+  if (props.vm.disks) {
+    props.vm.disks.forEach(disk => {
+      sections.value[`disk_${disk.dev}`] = true;
+    });
+  }
+});
+
+const toggleSection = (section) => {
+  sections.value[section] = !sections.value[section];
+};
+
+const getStateColor = (state) => {
+  if (!state) return '';
+  
+  switch(state.toLowerCase()) {
+    case 'start':
+      return 'success';
+    case 'migrate':
+    case 'unmigrate':
+    case 'disable':
+    case 'provision':
+      return 'info';
+    case 'shutdown':
+    case 'restart':
+      return 'warning';
+    case 'stop':
+      return 'danger';
+    case 'mirror':
+      return 'purple';
+    default:
+      return '';
+  }
+};
+
+const getDiskPool = (name) => {
+  return name ? name.split('/')[0] : '';
+};
+
+const getDiskVolume = (name) => {
+  return name ? name.split('/')[1] : '';
+};
+</script>
+
+<style scoped>
+.vm-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Section styling - match Overview/Node pages exactly */
+.section-container {
+  position: relative;
+}
+
+.section-content-wrapper {
+  display: flex;
+  position: relative;
+}
+
+.section-content {
+  flex: 1;
+  min-width: 0;
+  padding-right: 40px;
+}
+
+/* Toggle button styling */
+.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);
+}
+
+.section-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.section-toggle:focus {
+  outline: none;
+}
+
+/* Collapsed section header */
+.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;
+}
+
+/* Card grid layout */
+.info-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Metric card styles */
+:deep(.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;
+}
+
+:deep(.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;
+}
+
+:deep(.card-header h6) {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+:deep(.metric-card .card-body) {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.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;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/VMOverview.vue b/pvc-vue/src/components/VMOverview.vue
index 4558eaf..750f027 100644
--- a/pvc-vue/src/components/VMOverview.vue
+++ b/pvc-vue/src/components/VMOverview.vue
@@ -110,39 +110,7 @@
 
   <!-- VM Details -->
   <div v-if="selectedVMData && !showVMList" class="vm-details">
-    <!-- Information Cards Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.info }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">VM Information</h6>
-          </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
-      </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="info-row">
-            <!-- Information cards will go here -->
-            <p>VM information cards will be populated here</p>
-          </div>
-        </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Other sections... -->
-    <!-- (Utilization Graphs, Resources, Network sections follow the same pattern) -->
+    <VMDetail :vm="selectedVMData" />
   </div>
 
   <!-- No VM Selected Message -->
@@ -157,6 +125,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import VMDetail from './VMDetail.vue';
 
 const router = useRouter();
 const route = useRoute();