From 763919f8c5c9481ae531e75fea3af6bbc6c776ed Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Fri, 28 Feb 2025 02:30:40 -0500
Subject: [PATCH] Adjust layout of overview page

---
 pvc-vue/src/components/ClusterOverview.vue | 642 ++++++++++++++-------
 1 file changed, 424 insertions(+), 218 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 9b9c9f4..3e55afb 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -1,242 +1,346 @@
 <template>
   <div class="overview-container">
-    <div class="metrics-row">
-      <!-- Card 1: Cluster Name -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Cluster</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 2: Version -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Version</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 4: Nodes -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Nodes</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 5: Primary -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Primary Node</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 6: VMs -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">VMs</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 7: OSDs -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">OSDs</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 8: Pools -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Pools</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
-        </div>
-      </div>
-
-      <!-- Card 9: Volumes -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Volumes</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
-        </div>
-      </div>
-    </div>
-
-    <div class="graphs-row">
-      <!-- Health Card -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0 metric-label">Cluster Health</h6>
-        </div>
-        <div class="card-body">
-          <div class="metric-percentage">
-            <h4 class="metric-value">
-              {{ clusterData.cluster_health?.health || 0 }}%
-            </h4>
-          </div>
-          <div class="chart-wrapper">
-            <Line :data="healthChartData" :options="healthChartOptions" />
+    <!-- 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">Information</h6>
           </div>
         </div>
-      </div>
-      <!-- CPU Chart -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">CPU Utilization</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <div class="metric-percentage">
-            <h4 class="metric-value">
-              {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
-            </h4>
-          </div>
-          <div class="chart-wrapper">
-            <Line :data="cpuChartData" :options="chartOptions" />
-          </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
         </div>
       </div>
-      <!-- Memory Chart -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Memory Utilization</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <div class="metric-percentage">
-            <h4 class="metric-value">
-              {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
-            </h4>
-          </div>
-          <Line :data="memoryChartData" :options="chartOptions" />
-        </div>
-      </div>
-      <!-- Storage Chart -->
-      <div class="metric-card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">
-            <span class="metric-label">Storage Utilization</span>
-          </h6>
-        </div>
-        <div class="card-body">
-          <div class="metric-percentage">
-            <h4 class="metric-value">
-              {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
-            </h4>
-          </div>
-          <Line :data="storageChartData" :options="chartOptions" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Health messages card -->
-    <div class="metric-card">
-      <div class="card-header">
-        <h6 class="card-title mb-0 metric-label">Cluster 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 fa-circle-exclamation me-1"></i>
-                <span class="message-id">{{ msg.id || 'Unknown Issue' }}</span>
-                <span v-if="msg.health_delta" class="health-delta">
-                  ({{ msg.health_delta }}%)
-                </span>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="metrics-row">
+            <!-- Card 1: Cluster Name -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Cluster</span>
+                </h6>
               </div>
-              <div class="message-content">
-                {{ msg.text || 'No details available' }}
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 2: Version -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Version</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 4: Nodes -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Nodes</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 5: Primary -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Primary Node</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 6: VMs -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">VMs</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 7: OSDs -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">OSDs</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 8: Pools -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Pools</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
+              </div>
+            </div>
+
+            <!-- Card 9: Volumes -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Volumes</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
               </div>
             </div>
-          </template>
-          <div v-else class="no-messages">
-            No health messages to display
           </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>
 
-    <!-- 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>
+    <!-- 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">Utilization</h6>
+          </div>
         </div>
-        <div class="card-body">
-          <Line :data="nodeStatesChartData" :options="statesChartOptions" />
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('graphs')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
         </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>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.graphs" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="graphs-row">
+            <!-- Health Card -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0 metric-label">Cluster Health</h6>
+              </div>
+              <div class="card-body">
+                <div class="metric-percentage">
+                  <h4 class="metric-value">
+                    {{ clusterData.cluster_health?.health || 0 }}%
+                  </h4>
+                </div>
+                <div class="chart-wrapper">
+                  <Line :data="healthChartData" :options="healthChartOptions" />
+                </div>
+              </div>
+            </div>
+            <!-- CPU Chart -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">CPU Utilization</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <div class="metric-percentage">
+                  <h4 class="metric-value">
+                    {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
+                  </h4>
+                </div>
+                <div class="chart-wrapper">
+                  <Line :data="cpuChartData" :options="chartOptions" />
+                </div>
+              </div>
+            </div>
+            <!-- Memory Chart -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Memory Utilization</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <div class="metric-percentage">
+                  <h4 class="metric-value">
+                    {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
+                  </h4>
+                </div>
+                <Line :data="memoryChartData" :options="chartOptions" />
+              </div>
+            </div>
+            <!-- Storage Chart -->
+            <div class="metric-card">
+              <div class="card-header">
+                <h6 class="card-title mb-0">
+                  <span class="metric-label">Storage Utilization</span>
+                </h6>
+              </div>
+              <div class="card-body">
+                <div class="metric-percentage">
+                  <h4 class="metric-value">
+                    {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
+                  </h4>
+                </div>
+                <Line :data="storageChartData" :options="chartOptions" />
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="card-body">
-          <Line :data="vmStatesChartData" :options="statesChartOptions" />
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('graphs')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
         </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>
+
+    <!-- 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">
+            <h6 class="card-title mb-0 metric-label">Health Messages</h6>
+          </div>
         </div>
-        <div class="card-body">
-          <Line :data="osdStatesChartData" :options="statesChartOptions" />
+        <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">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 fa-circle-exclamation me-1"></i>
+                      <span class="message-id">{{ msg.id || 'Unknown Issue' }}</span>
+                      <span v-if="msg.health_delta" class="health-delta">
+                        ({{ msg.health_delta }}%)
+                      </span>
+                    </div>
+                    <div class="message-content">
+                      {{ msg.text || 'No details available' }}
+                    </div>
+                  </div>
+                </template>
+                <div v-else class="no-messages">
+                  No health messages to display
+                </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>
+
+    <!-- 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>
+          </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>
+            </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>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('states')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
         </div>
       </div>
     </div>
@@ -981,6 +1085,19 @@ onMounted(() => {
     }
   }
 });
+
+// Section visibility state
+const sections = ref({
+  info: true,
+  graphs: true,
+  messages: true,
+  states: true
+});
+
+// Toggle section visibility
+const toggleSection = (section) => {
+  sections.value[section] = !sections.value[section];
+};
 </script>
 
 <style scoped>
@@ -1312,4 +1429,93 @@ onMounted(() => {
   color: #333 !important;
   font-weight: 500 !important;
 }
+
+/* Updated section styling */
+.section-container {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+/* New content wrapper with toggle column */
+.section-content-wrapper {
+  display: flex;
+  position: relative; /* Add position relative to contain absolute positioned elements */
+}
+
+.section-content {
+  flex: 1;
+  min-width: 0; /* Allow content to shrink if needed */
+  padding-right: 40px; /* Make room for the toggle button */
+}
+
+.toggle-column {
+  position: absolute;
+  top: 4px; /* Position at exactly 4px from the top in both views */
+  right: 0;
+  width: 40px;
+  height: 30px;
+  z-index: 10;
+  padding-left: 6px; /* Add left padding to the toggle column */
+}
+
+.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;
+}
+
+/* Replace collapsed section indicator with header */
+.collapsed-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.03); /* Match card header background */
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  height: 38px; /* Match the height of card headers */
+  width: 100%; /* Ensure it takes full width of its container */
+}
+
+.collapsed-section-header .card-title {
+  margin: 0;
+  color: #495057; /* Match the exact color of expanded card titles */
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+/* Ensure toggle column is properly aligned with card headers */
+.metric-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  height: 38px; /* Ensure consistent height */
+}
+
+/* Ensure the metric-label class is consistent */
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
 </style>