From ac9428a41b2b496fcc8ec56e33ae3aa1a1d1752b Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 01:11:42 -0500
Subject: [PATCH] Refactor collapsable section into reusable component

---
 pvc-vue/src/components/ClusterOverview.vue    | 388 +++++++----------
 pvc-vue/src/components/CollapsibleSection.vue | 140 ++++++
 pvc-vue/src/components/NodeOverview.vue       | 411 +++++++-----------
 pvc-vue/src/components/VMOverview.vue         |  43 +-
 4 files changed, 463 insertions(+), 519 deletions(-)
 create mode 100644 pvc-vue/src/components/CollapsibleSection.vue

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 5929ff9..3381be1 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -1,269 +1,181 @@
 <template>
   <div class="overview-container">
     <!-- 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">Cluster Information</h6>
-          </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
+    <CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
+      <div class="metrics-row">
+        <!-- Card 1: PVC Version -->
+        <ValueCard 
+          title="PVC Version" 
+          :value="clusterData.pvc_version || 'Unknown'" 
+        />
+
+        <!-- Card 2: Primary Node -->
+        <ValueCard 
+          title="Primary Node" 
+          :value="clusterData.primary_node || 'N/A'" 
+        />
+
+        <!-- Card 3: Nodes -->
+        <ValueCard 
+          title="Nodes" 
+          :value="clusterData.nodes?.total || 0" 
+        />
+
+        <!-- Card 4: VMs -->
+        <ValueCard 
+          title="VMs" 
+          :value="clusterData.vms?.total || 0" 
+        />
+
+        <!-- Card 5: Networks -->
+        <ValueCard 
+          title="Networks" 
+          :value="clusterData.networks || 0" 
+        />
+
+        <!-- Card 6: OSDs -->
+        <ValueCard 
+          title="OSDs" 
+          :value="clusterData.osds?.total || 0" 
+        />
+
+        <!-- Card 7: Pools -->
+        <ValueCard 
+          title="Pools" 
+          :value="clusterData.pools || 0" 
+        />
+
+        <!-- Card 8: Volumes -->
+        <ValueCard 
+          title="Volumes" 
+          :value="clusterData.volumes || 0" 
+        />
       </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="metrics-row">
-            <!-- Card 1: PVC Version -->
-            <ValueCard 
-              title="PVC Version" 
-              :value="clusterData.pvc_version || 'Unknown'" 
-            />
-
-            <!-- Card 2: Primary Node -->
-            <ValueCard 
-              title="Primary Node" 
-              :value="clusterData.primary_node || 'N/A'" 
-            />
-
-            <!-- Card 3: Nodes -->
-            <ValueCard 
-              title="Nodes" 
-              :value="clusterData.nodes?.total || 0" 
-            />
-
-            <!-- Card 4: VMs -->
-            <ValueCard 
-              title="VMs" 
-              :value="clusterData.vms?.total || 0" 
-            />
-
-            <!-- Card 5: Networks -->
-            <ValueCard 
-              title="Networks" 
-              :value="clusterData.networks || 0" 
-            />
-
-            <!-- Card 6: OSDs -->
-            <ValueCard 
-              title="OSDs" 
-              :value="clusterData.osds?.total || 0" 
-            />
-
-            <!-- Card 7: Pools -->
-            <ValueCard 
-              title="Pools" 
-              :value="clusterData.pools || 0" 
-            />
-
-            <!-- Card 8: Volumes -->
-            <ValueCard 
-              title="Volumes" 
-              :value="clusterData.volumes || 0" 
-            />
-          </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>
+    </CollapsibleSection>
 
     <!-- Utilization Graphs Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.graphs" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
-          </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('graphs')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
+    <CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
+      <div class="graphs-row">
+        <!-- Health Chart -->
+        <HealthChart
+          title="Cluster Health"
+          :value="clusterHealth"
+          :chart-data="healthChartData"
+          :maintenance="isMaintenanceMode"
+        />
+
+        <!-- CPU Chart -->
+        <CPUChart
+          title="CPU Utilization"
+          :value="cpuUtilization"
+          :chart-data="cpuChartData"
+        />
+
+        <!-- Memory Chart -->
+        <MemoryChart
+          title="Memory Utilization"
+          :value="memoryUtilization"
+          :chart-data="memoryChartData"
+        />
+
+        <!-- Storage Chart -->
+        <StorageChart
+          title="Storage Utilization"
+          :value="storageUtilization"
+          :chart-data="storageChartData"
+        />
       </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.graphs" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="graphs-row">
-            <!-- Health Chart -->
-            <HealthChart
-              title="Cluster Health"
-              :value="clusterHealth"
-              :chart-data="healthChartData"
-              :maintenance="isMaintenanceMode"
-            />
-
-            <!-- CPU Chart -->
-            <CPUChart
-              title="CPU Utilization"
-              :value="cpuUtilization"
-              :chart-data="cpuChartData"
-            />
-
-            <!-- Memory Chart -->
-            <MemoryChart
-              title="Memory Utilization"
-              :value="memoryUtilization"
-              :chart-data="memoryChartData"
-            />
-
-            <!-- Storage Chart -->
-            <StorageChart
-              title="Storage Utilization"
-              :value="storageUtilization"
-              :chart-data="storageChartData"
-            />
-          </div>
-        </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('graphs')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
-      </div>
-    </div>
+    </CollapsibleSection>
 
     <!-- Health Messages Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.messages }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.messages" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
+    <CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
+      <div class="section-content">
+        <!-- Health messages card -->
+        <div class="metric-card">
+          <div class="card-header">
             <h6 class="card-title mb-0 metric-label">Health Messages</h6>
           </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('messages')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
-      </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.messages" class="section-content-wrapper">
-        <div class="section-content">
-          <!-- Health messages card -->
-          <div class="metric-card">
-            <div class="card-header">
-              <h6 class="card-title mb-0 metric-label">Health Messages</h6>
-            </div>
-            <div class="card-body">
-              <div class="messages-list">
-                <template v-if="displayMessages.length">
-                  <div
-                    v-for="(msg, idx) in displayMessages"
-                    :key="idx"
-                    :class="[
-                      'health-message',
-                      getDeltaClass(msg.health_delta, msg),
-                    ]"
-                  >
-                    <div class="message-header">
-                      <i class="fas" :class="getMessageIcon(msg)"></i>
-                      <span class="message-id">{{ getMessageId(msg) }}</span>
-                      <span v-if="showHealthDelta(msg)" class="health-delta">
-                        (-{{ msg.health_delta }}%)
-                      </span>
-                    </div>
-                    <div class="message-content">
-                      {{ getMessageText(msg) }}
-                    </div>
-                  </div>
-                </template>
-                <div v-else class="health-message healthy">
+          <div class="card-body">
+            <div class="messages-list">
+              <template v-if="displayMessages.length">
+                <div
+                  v-for="(msg, idx) in displayMessages"
+                  :key="idx"
+                  :class="[
+                    'health-message',
+                    getDeltaClass(msg.health_delta, msg),
+                  ]"
+                >
                   <div class="message-header">
-                    <i class="fas fa-circle-check me-1"></i>
-                    <span class="message-id">Cluster healthy</span>
+                    <i class="fas" :class="getMessageIcon(msg)"></i>
+                    <span class="message-id">{{ getMessageId(msg) }}</span>
+                    <span v-if="showHealthDelta(msg)" class="health-delta">
+                      (-{{ msg.health_delta }}%)
+                    </span>
                   </div>
                   <div class="message-content">
-                    Cluster is at full health with no faults
+                    {{ getMessageText(msg) }}
                   </div>
                 </div>
+              </template>
+              <div v-else class="health-message healthy">
+                <div class="message-header">
+                  <i class="fas fa-circle-check me-1"></i>
+                  <span class="message-id">Cluster healthy</span>
+                </div>
+                <div class="message-content">
+                  Cluster is at full health with no faults
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('messages')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
       </div>
-    </div>
+    </CollapsibleSection>
 
     <!-- States Graphs Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.states }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.states" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">State Graphs</h6>
+    <CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
+      <div class="section-content">
+        <!-- States Graphs Row -->
+        <div class="states-graphs-row">
+          <!-- Node States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Node States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="nodeStatesChartData" :options="statesChartOptions" />
+            </div>
           </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('states')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
-      </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.states" class="section-content-wrapper">
-        <div class="section-content">
-          <!-- States Graphs Row -->
-          <div class="states-graphs-row">
-            <!-- Node States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">Node States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="nodeStatesChartData" :options="statesChartOptions" />
-              </div>
-            </div>
 
-            <!-- VM States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">VM States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="vmStatesChartData" :options="statesChartOptions" />
-              </div>
+          <!-- VM States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">VM States</span>
+              </h6>
             </div>
+            <div class="card-body">
+              <Line :data="vmStatesChartData" :options="statesChartOptions" />
+            </div>
+          </div>
 
-            <!-- OSD States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">OSD States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="osdStatesChartData" :options="statesChartOptions" />
-              </div>
+          <!-- OSD States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">OSD States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="osdStatesChartData" :options="statesChartOptions" />
             </div>
           </div>
         </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('states')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
       </div>
-    </div>
+    </CollapsibleSection>
   </div>
 </template>
 
@@ -287,6 +199,7 @@ import MemoryChart from './charts/MemoryChart.vue';
 import StorageChart from './charts/StorageChart.vue';
 import HealthChart from './charts/HealthChart.vue';
 import ValueCard from './ValueCard.vue';
+import CollapsibleSection from './CollapsibleSection.vue';
 
 // Register Chart.js components
 ChartJS.register(
@@ -912,11 +825,6 @@ const sections = ref({
   states: true
 });
 
-// Toggle section visibility
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
 // Add a new function to determine if we should show the health delta
 const showHealthDelta = (msg) => {
   // Don't show delta for "No issues detected" or similar messages
diff --git a/pvc-vue/src/components/CollapsibleSection.vue b/pvc-vue/src/components/CollapsibleSection.vue
new file mode 100644
index 0000000..95f4411
--- /dev/null
+++ b/pvc-vue/src/components/CollapsibleSection.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="section-container" :class="{ 'collapsed': !isExpanded }">
+    <!-- Collapsed section indicator -->
+    <div v-if="!isExpanded" class="section-content-wrapper">
+      <div class="section-content">
+        <div class="collapsed-section-header">
+          <h6 class="card-title mb-0 metric-label">{{ title }}</h6>
+        </div>
+      </div>
+      <div class="toggle-column">
+        <button class="section-toggle" @click="toggleSection">
+          <i class="fas fa-chevron-down"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Toggle button for expanded section -->
+    <div v-show="isExpanded" class="section-content-wrapper">
+      <div class="section-content">
+        <slot></slot>
+      </div>
+      <div class="toggle-column expanded">
+        <button class="section-toggle" @click="toggleSection">
+          <i class="fas fa-chevron-up"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  initiallyExpanded: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const isExpanded = ref(props.initiallyExpanded);
+
+const toggleSection = () => {
+  isExpanded.value = !isExpanded.value;
+};
+</script>
+
+<style scoped>
+.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);
+}
+
+.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;
+}
+
+.toggle-column.expanded {
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
+}
+
+.section-container.collapsed {
+  margin-bottom: 0.5rem;
+}
+
+.section-container.collapsed .section-content-wrapper {
+  margin-bottom: 0;
+}
+</style> 
\ No newline at end of file
diff --git a/pvc-vue/src/components/NodeOverview.vue b/pvc-vue/src/components/NodeOverview.vue
index a9ae24b..fc1a34d 100644
--- a/pvc-vue/src/components/NodeOverview.vue
+++ b/pvc-vue/src/components/NodeOverview.vue
@@ -25,286 +25,171 @@
     <!-- Node Details -->
     <div v-if="selectedNodeData" class="node-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">Node Information</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('info')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
+      <CollapsibleSection title="Node Information" :initially-expanded="sections.info">
+        <div class="info-row">
+          <!-- Card 1: Daemon State -->
+          <ValueCard
+            title="Daemon State"
+            :value="selectedNodeData.daemon_state || 'Unknown'"
+            :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
+          />
+
+          <!-- Card 2: Coordinator State -->
+          <ValueCard
+            title="Coordinator State"
+            :value="selectedNodeData.coordinator_state || 'Unknown'"
+            :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
+          />
+
+          <!-- Card 3: Domain State -->
+          <ValueCard
+            title="Domain State"
+            :value="selectedNodeData.domain_state || 'Unknown'"
+            :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
+          />
+
+          <!-- Card 4: PVC Version -->
+          <ValueCard
+            title="PVC Version"
+            :value="selectedNodeData.pvc_version || 'Unknown'"
+          />
+
+          <!-- Card 5: Kernel Version -->
+          <ValueCard
+            title="Kernel Version"
+            :value="selectedNodeData.kernel || 'Unknown'"
+          />
+
+          <!-- Card 6: VM Count -->
+          <ValueCard
+            title="VM Count"
+            :value="selectedNodeData.domains_count || 0"
+          />
         </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.info" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="info-row">
-              <!-- Card 1: Daemon State -->
-              <ValueCard
-                title="Daemon State"
-                :value="selectedNodeData.daemon_state || 'Unknown'"
-                :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
-              />
-
-              <!-- Card 2: Coordinator State -->
-              <ValueCard
-                title="Coordinator State"
-                :value="selectedNodeData.coordinator_state || 'Unknown'"
-                :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
-              />
-
-              <!-- Card 3: Domain State -->
-              <ValueCard
-                title="Domain State"
-                :value="selectedNodeData.domain_state || 'Unknown'"
-                :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
-              />
-
-              <!-- Card 4: PVC Version -->
-              <ValueCard
-                title="PVC Version"
-                :value="selectedNodeData.pvc_version || 'Unknown'"
-              />
-
-              <!-- Card 5: Kernel Version -->
-              <ValueCard
-                title="Kernel Version"
-                :value="selectedNodeData.kernel || 'Unknown'"
-              />
-
-              <!-- Card 6: VM Count -->
-              <ValueCard
-                title="VM Count"
-                :value="selectedNodeData.domains_count || 0"
-              />
-            </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>
+      </CollapsibleSection>
 
       <!-- Utilization Graphs Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.graphs" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('graphs')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
+      <CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
+        <div class="graphs-row">
+          <!-- Health Chart -->
+          <HealthChart
+            title="Node Health"
+            :value="selectedNodeData.health || 0"
+            :chart-data="nodeHealthChartData"
+            :maintenance="isMaintenanceMode"
+          />
+
+          <!-- CPU Utilization Chart -->
+          <CPUChart
+            title="CPU Utilization"
+            :value="calculateCpuUtilization(selectedNodeData)"
+            :chart-data="nodeCpuChartData"
+          />
+
+          <!-- Memory Utilization Chart -->
+          <MemoryChart
+            title="Memory Utilization"
+            :value="calculateMemoryUtilization(selectedNodeData)"
+            :chart-data="nodeMemoryChartData"
+          />
+
+          <!-- Allocated Memory Chart -->
+          <StorageChart
+            title="Allocated Memory"
+            :value="calculateAllocatedMemory(selectedNodeData)"
+            :chart-data="nodeAllocatedMemoryChartData"
+          />
         </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.graphs" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="graphs-row">
-              <!-- Health Chart -->
-              <HealthChart
-                title="Node Health"
-                :value="selectedNodeData.health || 0"
-                :chart-data="nodeHealthChartData"
-                :maintenance="isMaintenanceMode"
-              />
-
-              <!-- CPU Utilization Chart -->
-              <CPUChart
-                title="CPU Utilization"
-                :value="calculateCpuUtilization(selectedNodeData)"
-                :chart-data="nodeCpuChartData"
-              />
-
-              <!-- Memory Utilization Chart -->
-              <MemoryChart
-                title="Memory Utilization"
-                :value="calculateMemoryUtilization(selectedNodeData)"
-                :chart-data="nodeMemoryChartData"
-              />
-
-              <!-- Allocated Memory Chart -->
-              <StorageChart
-                title="Allocated Memory"
-                :value="calculateAllocatedMemory(selectedNodeData)"
-                :chart-data="nodeAllocatedMemoryChartData"
-              />
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('graphs')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
+      </CollapsibleSection>
 
       <!-- CPU Resources Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.cpu }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.cpu" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">CPU Resources</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('cpu')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.cpu" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="resources-row-cpu">
-              <!-- Card 1: Host CPUs -->
-              <ValueCard
-                title="Host CPUs"
-                :value="selectedNodeData.cpu_count || 0"
-              />
+      <CollapsibleSection title="CPU Resources" :initially-expanded="sections.cpu">
+        <div class="resources-row-cpu">
+          <!-- Card 1: Host CPUs -->
+          <ValueCard
+            title="Host CPUs"
+            :value="selectedNodeData.cpu_count || 0"
+          />
 
-              <!-- Card 2: Guest CPUs -->
-              <ValueCard
-                title="Guest CPUs"
-                :value="selectedNodeData.vcpu?.allocated || 0"
-              />
+          <!-- Card 2: Guest CPUs -->
+          <ValueCard
+            title="Guest CPUs"
+            :value="selectedNodeData.vcpu?.allocated || 0"
+          />
 
-              <!-- Card 3: Load -->
-              <ValueCard
-                title="Load"
-                :value="selectedNodeData.load || 0"
-              />
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('cpu')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
+          <!-- Card 3: Load -->
+          <ValueCard
+            title="Load"
+            :value="selectedNodeData.load || 0"
+          />
         </div>
-      </div>
+      </CollapsibleSection>
 
       <!-- Memory Resources Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.resources }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Memory Resources</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
+      <CollapsibleSection title="Memory Resources" :initially-expanded="sections.resources">
+        <div class="resources-row-memory">
+          <!-- Total Memory -->
+          <ValueCard
+            title="Total Memory"
+            :value="formatMemory(selectedNodeData.memory?.total)"
+          />
+
+          <!-- Used Memory -->
+          <ValueCard
+            title="Used Memory"
+            :value="formatMemory(selectedNodeData.memory?.used)"
+          />
+
+          <!-- Free Memory -->
+          <ValueCard
+            title="Free Memory"
+            :value="formatMemory(selectedNodeData.memory?.free)"
+          />
+
+          <!-- Allocated Memory -->
+          <ValueCard
+            title="Allocated Memory"
+            :value="formatMemory(selectedNodeData.memory?.allocated)"
+          />
+
+          <!-- Provisioned Memory -->
+          <ValueCard
+            title="Provisioned Memory"
+            :value="formatMemory(selectedNodeData.memory?.provisioned)"
+          />
         </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="resources-row-memory">
-              <!-- Total Memory -->
-              <ValueCard
-                title="Total Memory"
-                :value="formatMemory(selectedNodeData.memory?.total)"
-              />
-
-              <!-- Used Memory -->
-              <ValueCard
-                title="Used Memory"
-                :value="formatMemory(selectedNodeData.memory?.used)"
-              />
-
-              <!-- Free Memory -->
-              <ValueCard
-                title="Free Memory"
-                :value="formatMemory(selectedNodeData.memory?.free)"
-              />
-
-              <!-- Allocated Memory -->
-              <ValueCard
-                title="Allocated Memory"
-                :value="formatMemory(selectedNodeData.memory?.allocated)"
-              />
-
-              <!-- Provisioned Memory -->
-              <ValueCard
-                title="Provisioned Memory"
-                :value="formatMemory(selectedNodeData.memory?.provisioned)"
-              />
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
+      </CollapsibleSection>
 
       <!-- Running VMs Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.vms }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.vms" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Running VMs</h6>
+      <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>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('vms')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.vms" class="section-content-wrapper">
-          <div class="section-content">
-            <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 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="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('vms')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
         </div>
-      </div>
+      </CollapsibleSection>
     </div>
 
     <!-- No node selected message -->
@@ -322,6 +207,7 @@ import MemoryChart from './charts/MemoryChart.vue';
 import StorageChart from './charts/StorageChart.vue';
 import HealthChart from './charts/HealthChart.vue';
 import ValueCard from './ValueCard.vue';
+import CollapsibleSection from './CollapsibleSection.vue';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({
@@ -351,11 +237,6 @@ const sections = ref({
   vms: true
 });
 
-// Toggle section visibility
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
 // State for selected node and tab scrolling
 const selectedNode = ref('');
 const tabsContainer = ref(null);
diff --git a/pvc-vue/src/components/VMOverview.vue b/pvc-vue/src/components/VMOverview.vue
index 750f027..8882494 100644
--- a/pvc-vue/src/components/VMOverview.vue
+++ b/pvc-vue/src/components/VMOverview.vue
@@ -110,7 +110,33 @@
 
   <!-- VM Details -->
   <div v-if="selectedVMData && !showVMList" class="vm-details">
-    <VMDetail :vm="selectedVMData" />
+    <!-- Information Section -->
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-row">
+        <!-- ... VM info cards ... -->
+      </div>
+    </CollapsibleSection>
+
+    <!-- Graphs Section -->
+    <CollapsibleSection title="Utilization Graphs" :initially-expanded="sections.graphs">
+      <div class="graphs-row">
+        <!-- ... VM graphs ... -->
+      </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="resources-row">
+        <!-- ... resource cards ... -->
+      </div>
+    </CollapsibleSection>
+
+    <!-- Network Section -->
+    <CollapsibleSection title="Network" :initially-expanded="sections.network">
+      <div class="network-row">
+        <!-- ... network info ... -->
+      </div>
+    </CollapsibleSection>
   </div>
 
   <!-- No VM Selected Message -->
@@ -126,6 +152,7 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import VMDetail from './VMDetail.vue';
+import CollapsibleSection from './CollapsibleSection.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -160,7 +187,7 @@ const appliedFilters = ref({
 });
 const selectedVMRef = ref(null);
 
-// Section visibility state
+// Section visibility state - simplified since expansion is handled by CollapsibleSection
 const sections = ref({
   info: true,
   graphs: true,
@@ -191,18 +218,6 @@ const toggleFilterMenu = () => {
   showFilterMenu.value = !showFilterMenu.value;
 };
 
-// Toggle section visibility
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
-// Clear search
-const clearSearch = () => {
-  searchQuery.value = '';
-  searchActive.value = false;
-  filterVMs();
-};
-
 // Toggle a filter on/off
 const toggleFilter = (type, value) => {
   appliedFilters.value[type][value] = !appliedFilters.value[type][value];