From f97e3f22038fa3ed2d4c8255a9a5d8d62f0773aa Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Wed, 26 Feb 2025 23:10:10 -0500
Subject: [PATCH] Improve page layout

---
 pvc-vue/src/App.vue                        | 145 +++++++--
 pvc-vue/src/components/ClusterOverview.vue | 326 +++++++++++++++++++--
 pvc-vue/src/components/MetricsCharts.vue   |  51 ++--
 pvc-vue/src/components/NodeStatus.vue      |   7 +-
 4 files changed, 454 insertions(+), 75 deletions(-)

diff --git a/pvc-vue/src/App.vue b/pvc-vue/src/App.vue
index 0211e53..38026b2 100644
--- a/pvc-vue/src/App.vue
+++ b/pvc-vue/src/App.vue
@@ -1,21 +1,36 @@
 <template>
-  <nav class="navbar navbar-dark bg-dark">
-    <div class="container">
-      <span class="navbar-brand">PVC Cluster Dashboard</span>
-      <button class="btn btn-primary config-toggle" @click="toggleConfig">
-        <i class="fas fa-cog"></i> Configure
-      </button>
-    </div>
-  </nav>
-
-  <div class="container mt-4">
-    <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
-      {{ connectionStatusMessage }}
+  <div class="d-flex">
+    <!-- Sidebar -->
+    <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
+      <div class="sidebar-header">
+        <h5 class="text-white mb-0">PVC Dashboard</h5>
+        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
+          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
+        </button>
+      </div>
+      <div class="sidebar-content">
+        <!-- Future navigation items can go here -->
+      </div>
+      <div class="sidebar-footer">
+        <button class="btn btn-outline-light w-100" @click="toggleConfig">
+          <i class="fas fa-cog"></i> Configure
+        </button>
+      </div>
     </div>
 
-    <ClusterOverview :clusterData="clusterData" />
-    <MetricsCharts :metricsData="metricsHistory" />
-    <NodeStatus :nodeData="nodeData" />
+    <!-- Main Content -->
+    <div class="main-content" :class="{ 'expanded': sidebarCollapsed }">
+      <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
+        {{ connectionStatusMessage }}
+      </div>
+      <div class="content-grid">
+        <div class="overview-row">
+          <ClusterOverview :clusterData="clusterData" />
+          <NodeStatus :nodeData="nodeData" />
+        </div>
+        <MetricsCharts :metricsData="metricsHistory" class="metrics-section" />
+      </div>
+    </div>
   </div>
 
   <ConfigPanel 
@@ -50,6 +65,12 @@ const connectionStatusClass = ref('alert-warning');
 
 let updateTimer = null;
 
+const sidebarCollapsed = ref(false);
+
+const toggleSidebar = () => {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+};
+
 const toggleConfig = () => {
   configPanelOpen.value = !configPanelOpen.value;
 };
@@ -98,6 +119,9 @@ const updateDashboard = async () => {
     const status = await api.fetchStatus();
     const nodes = await api.fetchNodes();
     
+    console.log('[API] Status Response:', status);
+    console.log('[API] Nodes Response:', nodes);
+    
     // Update state with new objects instead of mutating
     clusterData.value = { ...status };
     nodeData.value = [...nodes];
@@ -143,13 +167,96 @@ onUnmounted(() => {
 @import 'bootstrap/dist/css/bootstrap.min.css';
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
-.metric-card {
+.sidebar {
+  width: 250px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 1rem;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.collapsed {
+  width: 60px;
+}
+
+.sidebar.collapsed .sidebar-header h5,
+.sidebar.collapsed .sidebar-content,
+.sidebar.collapsed .btn span {
+  display: none;
+}
+
+.sidebar-header {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.collapse-btn {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.collapse-btn:hover {
+  opacity: 1;
+}
+
+.sidebar-content {
+  flex-grow: 1;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.main-content {
+  margin-left: 250px;
+  padding: 1rem;
+  width: calc(100% - 250px);
+  min-height: 100vh;
   transition: all 0.3s ease;
 }
-.metric-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+
+.main-content.expanded {
+  margin-left: 60px;
+  width: calc(100% - 60px);
 }
+
+.content-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.overview-row {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 2fr 3fr;
+  min-height: 500px;
+}
+
+.overview-row > * {
+  height: 100%;
+}
+
+@media (max-width: 1200px) {
+  .overview-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.metric-card {
+  /* Remove transition and hover effect */
+}
+
 .status-healthy { color: #28a745; }
 .status-warning { color: #ffc107; }
 .status-error { color: #dc3545; }
diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 19f5b9b..8876b8d 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -1,28 +1,50 @@
 <template>
-  <div class="card mb-4">
+  <div class="card">
     <div class="card-header">
       <h5 class="mb-0">Cluster Overview</h5>
     </div>
     <div class="card-body">
-      <div class="row">
-        <!-- Card 1: Cluster Health -->
-        <div class="col-md">
-          <div class="card metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
-              <h4 :class="['card-title', getHealthClass(clusterData.cluster_health?.health)]">
-                {{ clusterData.cluster_health?.health || 0 }}%
-              </h4>
-              <small class="text-muted">
-                {{ clusterData.cluster_health?.messages?.join('<br>') || 'No issues' }}
-              </small>
+      <div class="overview-container">
+        <div class="health-card">
+          <div class="card-body">
+            <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
+            <div class="health-content">
+              <div class="health-graph">
+                <Line
+                  :data="healthChartData"
+                  :options="healthChartOptions"
+                />
+              </div>
+              <div class="health-overlay">
+                <div class="health-status">
+                  <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
+                    {{ clusterData.cluster_health?.health || 0 }}%
+                  </h4>
+                  <div class="health-messages">
+                    <template v-if="clusterData.cluster_health?.messages?.length">
+                      <div 
+                        v-for="(msg, idx) in clusterData.cluster_health.messages" 
+                        :key="idx"
+                        class="health-message"
+                        :title="msg.text || 'No details available'"
+                      >
+                        <i class="fas fa-circle-exclamation me-1"></i>
+                        <span class="message-text">{{ msg.id || 'Unknown Issue' }}</span>
+                      </div>
+                    </template>
+                    <div v-else class="health-message healthy">
+                      <i class="fas fa-check-circle me-1"></i>
+                      <span>No issues detected</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-
-        <!-- Card 2: PVC Version -->
-        <div class="col-md">
-          <div class="card metric-card">
+        <div class="metrics-row">
+          <!-- Card 2: PVC Version -->
+          <div class="metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
               <h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
@@ -31,11 +53,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 3: Nodes -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <!-- Card 3: Nodes -->
+          <div class="metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
               <h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
@@ -44,11 +64,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 4: VMs -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <!-- Card 4: VMs -->
+          <div class="metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">VMs</h6>
               <h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
@@ -64,11 +82,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 5: Storage -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <!-- Card 5: Storage -->
+          <div class="metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">Storage</h6>
               <div class="storage-metrics">
@@ -87,6 +103,32 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
 const props = defineProps({
   clusterData: {
     type: Object,
@@ -100,16 +142,240 @@ const getHealthClass = (health) => {
   if (health > 50) return 'status-warning';
   return 'status-error';
 };
+
+const getHealthColors = (health) => {
+  if (health > 90) return { bg: 'rgba(40, 167, 69, 0.1)', border: 'rgba(40, 167, 69, 0.2)' };  // Green
+  if (health > 50) return { bg: 'rgba(255, 193, 7, 0.1)', border: 'rgba(255, 193, 7, 0.2)' };  // Yellow
+  return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' };                    // Red
+};
+
+const healthChartData = computed(() => {
+  const health = props.clusterData.cluster_health?.health || 0;
+  const colors = getHealthColors(health);
+  
+  // Create sample data if health_history is not available
+  const now = Date.now();
+  const defaultData = Array.from({length: 20}, (_, i) => ({
+    time: now - (19 - i) * 1000,
+    value: health
+  }));
+
+  const dataPoints = props.clusterData.health_history || defaultData;
+
+  return {
+    labels: dataPoints.map(point => new Date(point.time).toLocaleTimeString()),
+    datasets: [{
+      data: dataPoints.map(point => point.value),
+      fill: true,
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: 1.5,
+      tension: 0.4,
+      pointRadius: 0
+    }]
+  };
+});
+
+const healthChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100,
+      beginAtZero: true
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: false
+  }
+};
 </script>
 
 <style scoped>
-.metric-card {
+.overview-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   height: 100%;
 }
 
+.health-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+}
+
+.health-content {
+  position: relative;
+  height: 250px;
+  width: 100%;
+}
+
+.health-graph {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.health-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.health-status {
+  text-align: center;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 300px;
+  max-width: 400px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+}
+
+.health-title {
+  font-size: 2.5rem;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.health-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 100px;
+  overflow-y: auto;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
+
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #28a745;
+}
+
+.health-message:hover {
+  background: rgba(220, 53, 69, 0.15);
+}
+
+.health-message:hover::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 1000;
+  width: max-content;
+  max-width: 300px;
+  margin-left: 0.5rem;
+  white-space: normal;
+}
+
+/* Adjust tooltip position if message is in the right half of the screen */
+@media (min-width: 768px) {
+  .health-message:hover::after {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
+}
+
+/* Custom scrollbar for the messages container */
+.health-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.health-messages::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+}
+
+.health-messages::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.health-messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+.metric-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+}
+
 .storage-metrics {
   min-height: 3.5rem;
   display: flex;
   align-items: center;
 }
+
+@media (max-width: 1400px) {
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 992px) {
+  .metrics-row {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/pvc-vue/src/components/MetricsCharts.vue b/pvc-vue/src/components/MetricsCharts.vue
index 3294903..e3371e7 100644
--- a/pvc-vue/src/components/MetricsCharts.vue
+++ b/pvc-vue/src/components/MetricsCharts.vue
@@ -1,27 +1,12 @@
 <template>
-  <div class="card mb-4">
+  <div class="card metrics-card">
     <div class="card-header">
       <h5 class="mb-0">Resource Utilization</h5>
     </div>
     <div class="card-body">
-      <div class="row">
-        <!-- Cluster Health Chart -->
-        <div class="col-md-3">
-          <div class="card">
-            <div class="card-header">
-              <h6 class="card-title mb-0">Health</h6>
-            </div>
-            <div class="card-body">
-              <Line
-                :data="healthChartData"
-                :options="chartOptions"
-              />
-            </div>
-          </div>
-        </div>
-
+      <div class="metrics-grid">
         <!-- CPU Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">CPU</h6>
@@ -36,7 +21,7 @@
         </div>
 
         <!-- Memory Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">Memory</h6>
@@ -51,7 +36,7 @@
         </div>
 
         <!-- Storage Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">Storage</h6>
@@ -187,6 +172,32 @@ const storageChartData = computed(() => ({
 </script>
 
 <style scoped>
+.metrics-card {
+  grid-column: 1 / -1;  /* Make metrics card span full width */
+}
+
+.metrics-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.metric-item {
+  min-height: 250px;
+}
+
+@media (max-width: 1400px) {
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .card-header h6 {
   font-size: 0.95rem;
   font-weight: 600;
diff --git a/pvc-vue/src/components/NodeStatus.vue b/pvc-vue/src/components/NodeStatus.vue
index 0fcc25b..0c1c682 100644
--- a/pvc-vue/src/components/NodeStatus.vue
+++ b/pvc-vue/src/components/NodeStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card mb-4">
     <div class="card-header">
-      <h5 class="mb-0">Node Status</h5>
+      <h5 class="mb-0">Node Overview</h5>
     </div>
     <div class="card-body">
       <div class="row">
@@ -50,8 +50,6 @@ const getHealthClass = (health) => {
 };
 
 const formatMemory = (node) => {
-  console.log('Memory data for node:', node.name, node.memory);
-  
   if (!node.memory || typeof node.memory !== 'object') {
     return { used: 'N/A', total: 'N/A', percent: 'N/A' };
   }
@@ -59,7 +57,6 @@ const formatMemory = (node) => {
   // Convert MB to GB with 2 decimal places
   const toGB = (mb) => {
     if (typeof mb !== 'number' || isNaN(mb)) {
-      console.log('Invalid MB value:', mb);
       return 'N/A';
     }
     return (mb / 1024).toFixed(2);
@@ -70,8 +67,6 @@ const formatMemory = (node) => {
   const used = toGB(memoryData.used);
   const total = toGB(memoryData.total);
   
-  console.log('Converted memory values:', { used, total });
-  
   let percent = 'N/A';
   if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) {
     percent = Math.round((parseFloat(used) / parseFloat(total)) * 100);