Add Yarn lock

pvc-vue/.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig helps maintain consistent coding styles across different editors
+# https://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Markdown files allow trailing whitespace for line breaks
+[*.md]
+trim_trailing_whitespace = false 

pvc-vue/package.json

@@ -15,7 +15,8 @@
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-chartjs": "^5.3.2",
-    "chartjs-plugin-annotation": "^3.0.1"
+    "chartjs-plugin-annotation": "^3.0.1",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

pvc-vue/src/App.vue

@@ -3,21 +3,45 @@
     <!-- Sidebar -->
     <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
       <div class="sidebar-header">
-        <h5 class="text-white mb-0">PVC Dashboard</h5>
+        <h5 class="text-white mb-0 text-center">
-        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
+          {{ clusterData.cluster_name || 'Cluster' }}
-          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
+        </h5>
-        </button>
       </div>
       <div class="sidebar-content">
         <nav class="nav-menu">
-          <router-link to="/" class="nav-item active">
+          <router-link to="/" class="nav-item" active-class="active" data-title="Overview">
             <i class="fas fa-home"></i>
             <span class="nav-text">Overview</span>
           </router-link>
+          <router-link to="/nodes" class="nav-item" active-class="active" data-title="Nodes">
+            <i class="fas fa-server"></i>
+            <span class="nav-text">Nodes</span>
+          </router-link>
+          <router-link to="/vms" class="nav-item" active-class="active" data-title="VMs">
+            <i class="fas fa-desktop"></i>
+            <span class="nav-text">VMs</span>
+          </router-link>
         </nav>
       </div>
       <div class="sidebar-footer">
-        <button class="btn btn-outline-light w-100" @click="toggleConfig">
+        <!-- Refresh interval display with tooltip -->
+        <div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
+          <i class="fas fa-sync-alt"></i>
+          <span class="refresh-text ms-2">{{ api.config.updateInterval }}s</span>
+        </div>
+        
+        <!-- Collapse/Expand button with tooltip -->
+        <button class="btn btn-outline-light w-100 mb-2" 
+                @click="toggleSidebar" 
+                data-title="Expand">
+          <i class="fas" :class="sidebarCollapsed ? 'fa-caret-right' : 'fa-caret-left'"></i>
+          <span class="action-text ms-2">{{ sidebarCollapsed ? 'Expand' : 'Collapse' }}</span>
+        </button>
+        
+        <!-- Configure button with tooltip -->
+        <button class="btn btn-outline-light w-100" 
+                @click="toggleConfig" 
+                data-title="Configure">
           <i class="fas fa-cog"></i>
           <span class="config-text ms-2">Configure</span>
         </button>
@@ -29,13 +53,12 @@
       <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
         {{ connectionStatusMessage }}
       </div>
-      <div class="content-grid">
+      <router-view 
-        <ClusterOverview 
+        :clusterData="clusterData"
-          :clusterData="clusterData"
+        :nodeData="nodeData"
-          :metricsData="metricsHistory"
+        :vmData="vmData"
-        />
+        :metricsData="metricsHistory"
-        <NodeStatus :nodeData="nodeData" />
+      />
-      </div>
     </div>
   </div>
 
@@ -48,16 +71,14 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import ClusterOverview from './components/ClusterOverview.vue';
+import ConfigPanel from './components/general/ConfigPanel.vue';
-import MetricsCharts from './components/MetricsCharts.vue';
-import NodeStatus from './components/NodeStatus.vue';
-import ConfigPanel from './components/ConfigPanel.vue';
 import { useApiStore } from './stores/api';
 
 const api = useApiStore();
 const configPanelOpen = ref(false);
 const clusterData = ref({});
 const nodeData = ref([]);
+const vmData = ref([]);
 const metricsHistory = ref({
   cpu: { labels: [], data: [] },
   memory: { labels: [], data: [] },
@@ -94,26 +115,98 @@ const updateMetricsHistory = (timestamp, status) => {
     memory: status.resources?.memory?.utilization || 0,
     health: status.cluster_health?.health || 0,
     storage: status.resources?.disk?.utilization || 0,
-    maintenance: status.maintenance === "true" ? true : false
   };
 
+  // Create maintenance array if it doesn't exist
+  if (!metricsHistory.value.maintenance) {
+    metricsHistory.value.maintenance = { labels: [], data: [] };
+  }
+
+  // Track maintenance status as a boolean for each data point
+  const isInMaintenance = status.maintenance === "true";
+
   Object.keys(metrics).forEach(metric => {
     const labels = [...metricsHistory.value[metric].labels, timestamp];
     const data = [...metricsHistory.value[metric].data, 
-      typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric])
+      Math.round(metrics[metric])
     ];
-    
+
     // Keep only last 180 points
     if (labels.length > 180) {
       labels.shift();
       data.shift();
     }
-    
+
     metricsHistory.value[metric] = {
       labels,
       data
     };
   });
+
+  // Update maintenance history
+  const maintenanceLabels = [...metricsHistory.value.maintenance.labels, timestamp];
+  const maintenanceData = [...metricsHistory.value.maintenance.data, isInMaintenance];
+
+  // Keep only last 180 points for maintenance too
+  if (maintenanceLabels.length > 180) {
+    maintenanceLabels.shift();
+    maintenanceData.shift();
+  }
+
+  metricsHistory.value.maintenance = {
+    labels: maintenanceLabels,
+    data: maintenanceData
+  };
+
+  // Track node-specific metrics
+  if (!metricsHistory.value.nodes) {
+    metricsHistory.value.nodes = {};
+  }
+
+  // Update metrics for each node
+  nodeData.value.forEach(node => {
+    const nodeName = node.name;
+
+    if (!metricsHistory.value.nodes[nodeName]) {
+      metricsHistory.value.nodes[nodeName] = {
+        health: { labels: [], data: [], maintenance: [] },
+        cpu: { labels: [], data: [] },
+        memory: { labels: [], data: [] },
+        allocated: { labels: [], data: [] }
+      };
+    }
+
+    // Calculate node metrics
+    const nodeMetrics = {
+      health: node.health || 0,
+      cpu: node.load && node.cpu_count ? Math.round((node.load / node.cpu_count) * 100) : 0,
+      memory: node.memory?.used && node.memory?.total ? Math.round((node.memory.used / node.memory.total) * 100) : 0,
+      allocated: node.memory?.allocated && node.memory?.total ? Math.round((node.memory.allocated / node.memory.total) * 100) : 0
+    };
+
+    // Update each metric for this node
+    Object.keys(nodeMetrics).forEach(metric => {
+      const nodeLabels = [...metricsHistory.value.nodes[nodeName][metric].labels, timestamp];
+      const nodeData = [...metricsHistory.value.nodes[nodeName][metric].data, nodeMetrics[metric]];
+
+      // Keep only last 180 points
+      if (nodeLabels.length > 180) {
+        nodeLabels.shift();
+        nodeData.shift();
+      }
+
+      metricsHistory.value.nodes[nodeName][metric] = {
+        labels: nodeLabels,
+        data: nodeData,
+        ...(metric === 'health' ? { maintenance: [...(metricsHistory.value.nodes[nodeName][metric].maintenance || []), isInMaintenance] } : {})
+      };
+      
+      // Trim maintenance array if needed
+      if (metric === 'health' && metricsHistory.value.nodes[nodeName][metric].maintenance.length > 180) {
+        metricsHistory.value.nodes[nodeName][metric].maintenance.shift();
+      }
+    });
+  });
 };
 
 const updateDashboard = async () => {
@@ -125,15 +218,32 @@ const updateDashboard = async () => {
   }
 
   try {
-    const status = await api.fetchStatus();
+    console.log(`${new Date().toISOString()} Starting API calls`);
-    const nodes = await api.fetchNodes();
     
+    // Ensure all endpoints are called together in a single Promise.all
+    const [status, nodes, vms] = await Promise.all([
+      api.fetchStatus().then(res => {
+        console.log(`${new Date().toISOString()} Status API call complete`);
+        return res;
+      }),
+      api.fetchNodes().then(res => {
+        console.log(`${new Date().toISOString()} Nodes API call complete`);
+        return res;
+      }),
+      api.fetchVMs().then(res => {
+        console.log(`${new Date().toISOString()} VMs API call complete`);
+        return res;
+      })
+    ]);
+
     console.log('[API] Status Response:', status);
     console.log('[API] Nodes Response:', nodes);
-    
+    console.log('[API] VMs Response:', vms);
-    // Update state with new objects instead of mutating
+
+    // Update state with new objects
     clusterData.value = { ...status };
     nodeData.value = [...nodes];
+    vmData.value = [...vms];
 
     const timestamp = new Date().toLocaleTimeString();
     updateMetricsHistory(timestamp, status);
@@ -152,7 +262,8 @@ const restartDashboard = () => {
     clearInterval(updateTimer);
   }
   updateDashboard();
-  updateTimer = setInterval(updateDashboard, api.config.updateInterval);
+  const intervalMs = api.config.updateInterval * 1000;
+  updateTimer = setInterval(updateDashboard, intervalMs);
 };
 
 onMounted(() => {
@@ -268,16 +379,16 @@ onUnmounted(() => {
 
 .sidebar-footer {
   margin-top: auto;
-  padding-left: 0.25rem;
+  padding: 0.75rem 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.75rem;
   border-top: 1px solid rgba(255,255,255,0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .sidebar.collapsed .sidebar-footer .btn {
-  padding: 0.375rem 0.5rem;
+  padding: 0.375rem;
-  display: flex;
+  height: 38px;
-  justify-content: center;
 }
 
 .content-grid {
@@ -306,6 +417,7 @@ onUnmounted(() => {
   text-decoration: none;
   transition: all 0.2s;
   border-left: 3px solid transparent;
+  position: relative;
 }
 
 .nav-item:hover {
@@ -335,18 +447,137 @@ onUnmounted(() => {
   display: none;
 }
 
+/* Add tooltip effect for collapsed sidebar */
+.sidebar.collapsed .nav-item:hover::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #343a40;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  z-index: 1010;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  margin-left: 0.5rem;
+}
+
+/* Add a small arrow to the tooltip */
+.sidebar.collapsed .nav-item:hover::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #343a40 transparent transparent;
+  margin-left: 0.25rem;
+  z-index: 1011;
+}
+
 .sidebar.collapsed .nav-item {
   padding: 0.75rem 0.25rem;
   justify-content: center;
 }
 
-.sidebar.collapsed .nav-item i {
+.sidebar.collapsed .sidebar-footer .btn {
-  margin-right: 0;
+  padding: 0.375rem;
+  height: 38px;
 }
 
-.sidebar.collapsed .sidebar-footer .btn {
+/* Add these styles for the sidebar header */
-  padding: 0.375rem 0.5rem;
+.sidebar-header h5 {
+  width: 100%;
+  text-align: center;
+}
+
+/* Style for collapsed sidebar header */
+.sidebar.collapsed .sidebar-header h5 {
+  display: block;
+  font-size: 0.95rem;
+  writing-mode: normal;
+  transform: none;
+  height: auto;
+  margin: 0.5rem 0;
+  white-space: normal;
+  text-align: center;
+}
+
+/* Style for refresh interval display */
+.refresh-display {
+  position: relative;
+  font-size: 0.9rem;
+  height: 24px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  margin-bottom: 0.75rem !important;
+}
+
+.sidebar.collapsed .refresh-display {
+  height: 24px;
+}
+
+.sidebar.collapsed .refresh-text {
+  display: inline;
+  font-size: 0.75rem;
+}
+
+/* Style for action text in collapsed view */
+.sidebar.collapsed .action-text {
+  display: none;
+}
+
+/* Standardize button heights and padding */
+.sidebar-footer .btn {
+  position: relative;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Last button shouldn't have margin */
+.sidebar-footer .btn:last-child {
+  margin-bottom: 0;
+}
+
+/* Add tooltip styles for footer elements in collapsed view */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::after,
+.sidebar.collapsed .sidebar-footer .btn:hover::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #343a40;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  z-index: 1010;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  margin-left: 0.5rem;
+  font-size: 0.875rem;
+}
+
+/* Add arrow for the tooltips */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::before,
+.sidebar.collapsed .sidebar-footer .btn:hover::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #343a40 transparent transparent;
+  margin-left: 0.25rem;
+  z-index: 1011;
 }
 </style>

pvc-vue/src/components/ClusterOverview.vue

@@ -1,797 +0,0 @@
-<template>
-  <div class="card">
-    <button class="card-header header-button" @click="isCollapsed = !isCollapsed">
-      <div class="d-flex justify-content-between align-items-center w-100">
-        <h5 class="mb-0">Cluster Overview</h5>
-        <i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
-      </div>
-    </button>
-    <div class="card-body" v-show="!isCollapsed">
-      <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="chartOptions" />
-              </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 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-grid">
-              <template v-if="displayMessages.length">
-                <div 
-                  v-for="(msg, idx) in displayMessages" 
-                  :key="idx"
-                  :class="['health-message', getDeltaClass(msg.health_delta)]"
-                  :title="msg.text || 'No details available'"
-                >
-                  <i class="fas fa-circle-exclamation me-1"></i>
-                  <span class="message-text">
-                    {{ msg.id || 'Unknown Issue' }}
-                    <span v-if="msg.health_delta" class="health-delta">
-                      ({{ msg.health_delta }}%)
-                    </span>
-                  </span>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue';
-import { Line } from 'vue-chartjs';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler
-} from 'chart.js';
-import annotationPlugin from 'chartjs-plugin-annotation';
-
-// Register Chart.js components
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-  annotationPlugin
-);
-
-const props = defineProps({
-  clusterData: {
-    type: Object,
-    required: true,
-    default: () => ({})
-  },
-  metricsData: {
-    type: Object,
-    required: true,
-    default: () => ({})
-  }
-});
-
-const isCollapsed = ref(false);
-
-const displayMessages = computed(() => {
-  const messages = [];
-  
-  // Add maintenance message if maintenance is "true"
-  if (props.clusterData.maintenance === "true") {
-    messages.push({
-      id: "Cluster is in maintenance",
-      health_delta: null,
-      text: "Cluster is currently in maintenance mode",
-      maintenance: true
-    });
-  }
-  
-  // Add other messages if they exist
-  if (props.clusterData.cluster_health?.messages?.length) {
-    messages.push(...props.clusterData.cluster_health.messages);
-  }
-  
-  // If no messages and not in maintenance, show "No issues"
-  if (messages.length === 0) {
-    messages.push({
-      id: "No issues detected",
-      health_delta: null,
-      text: "System is healthy",
-      health_delta: 0  // This will trigger the delta-low class for green styling
-    });
-  }
-  
-  return messages;
-});
-
-const getHealthClass = (health) => {
-  if (health > 90) return 'status-healthy';
-  if (health > 50) return 'status-warning';
-  return 'status-error';
-};
-
-const getHealthColors = (health) => {
-  if (props.clusterData.maintenance === "true") {
-    return { bg: 'rgba(13, 110, 253, 0.1)', border: 'rgba(13, 110, 253, 0.2)' };  // Blue
-  }
-  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 getDeltaClass = (delta) => {
-  if (delta === null) return 'delta-info';  // For maintenance and healthy messages
-  const value = Math.abs(delta);
-  if (value <= 5) return 'delta-low';
-  if (value <= 10) return 'delta-medium';
-  return 'delta-high';
-};
-
-const healthChartData = computed(() => {
-  return {
-    labels: props.metricsData.health.labels,
-    datasets: [{
-      data: props.metricsData.health.data,
-      fill: true,
-      segment: {
-        borderColor: (ctx) => {
-          console.log('Context:', ctx);
-          console.log('Maintenance data:', props.metricsData.maintenance?.data);
-          console.log('Available indices:', ctx.p0?.parsed?.x, ctx.p1?.parsed?.x);
-          const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
-          console.log('Point', ctx.p0.parsed.x, 'Maintenance:', maintenanceAtPoint);
-          if (maintenanceAtPoint === true) {
-            console.log('Using blue color for maintenance');
-            return 'rgba(13, 110, 253, 0.2)';
-          }
-          const value = ctx.p1.parsed.y;
-          console.log('Using health-based color:', value);
-          if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
-          if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
-          return 'rgba(220, 53, 69, 0.2)';                  // Red
-        },
-        backgroundColor: (ctx) => {
-          const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
-          if (maintenanceAtPoint === true) {
-            return 'rgba(13, 110, 253, 0.1)';
-          }
-          const value = ctx.p1.parsed.y;
-          if (value > 90) return 'rgba(40, 167, 69, 0.1)';  // Green
-          if (value > 50) return 'rgba(255, 193, 7, 0.1)';  // Yellow
-          return 'rgba(220, 53, 69, 0.1)';                  // Red
-        }
-      },
-      borderWidth: 1.5,
-      tension: 0.4,
-      pointRadius: 0,
-      pointHoverRadius: 4,
-      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',  // Light background for all points
-      pointBorderColor: (ctx) => {
-        const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.dataIndex];
-        if (maintenanceAtPoint === true) return 'rgba(13, 110, 253, 0.5)';  // Blue for maintenance
-        if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
-        const value = ctx.raw;
-        if (value > 90) return 'rgba(40, 167, 69, 0.5)';  // Green
-        if (value > 50) return 'rgba(255, 193, 7, 0.5)';  // Yellow
-        return 'rgba(220, 53, 69, 0.5)';                  // Red
-      },
-      pointBorderWidth: 1.5
-    }]
-  };
-});
-
-const healthChartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  clip: false,
-  resizeDelay: 0,
-  responsiveAnimationDuration: 0,  /* Disable resize animation */
-  plugins: {
-    legend: {
-      display: false
-    },
-    tooltip: {
-      callbacks: {
-        label: (context) => `${context.parsed.y}%`
-      }
-    },
-    annotation: {
-      annotations: {
-        warning: {
-          type: 'line',
-          yMin: 90,
-          yMax: 90,
-          borderColor: 'rgba(255, 193, 7, 0.2)',
-          borderWidth: 1,
-        },
-        danger: {
-          type: 'line',
-          yMin: 50,
-          yMax: 50,
-          borderColor: 'rgba(220, 53, 69, 0.2)',
-          borderWidth: 1,
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      display: false,
-      grid: {
-        display: false
-      }
-    },
-    y: {
-      display: false,
-      grid: {
-        display: false
-      },
-      min: 0,
-      max: 100
-    }
-  },
-  animation: false,
-  interaction: {
-    enabled: true,
-    mode: 'nearest',
-    intersect: false
-  },
-  onResize: (chart, size) => {
-    chart.resize();  /* Force resize on container change */
-  }
-};
-
-const cpuChartData = computed(() => ({
-  labels: props.metricsData.cpu.labels,
-  datasets: [{
-    label: 'CPU',
-    data: props.metricsData.cpu.data,
-    borderColor: 'rgb(75, 192, 192)',
-    fill: true,
-    backgroundColor: 'rgba(75, 192, 192, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(75, 192, 192, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const memoryChartData = computed(() => ({
-  labels: props.metricsData.memory.labels,
-  datasets: [{
-    label: 'Memory',
-    data: props.metricsData.memory.data,
-    borderColor: 'rgb(153, 102, 255)',
-    fill: true,
-    backgroundColor: 'rgba(153, 102, 255, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(153, 102, 255, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const storageChartData = computed(() => ({
-  labels: props.metricsData.storage?.labels || [],
-  datasets: [{
-    label: 'Storage',
-    data: props.metricsData.storage?.data || [],
-    borderColor: 'rgb(255, 159, 64)',
-    fill: true,
-    backgroundColor: 'rgba(255, 159, 64, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(255, 159, 64, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  clip: false,
-  resizeDelay: 0,
-  responsiveAnimationDuration: 0,  /* Disable resize animation */
-  plugins: {
-    legend: {
-      display: false
-    },
-    tooltip: {
-      callbacks: {
-        label: (context) => `${context.parsed.y}%`
-      }
-    }
-  },
-  scales: {
-    x: {
-      display: false,
-      grid: {
-        display: false
-      }
-    },
-    y: {
-      display: false,
-      grid: {
-        display: false
-      },
-      min: 0,
-      max: 100
-    }
-  },
-  animation: false,
-  interaction: {
-    enabled: true,
-    mode: 'nearest',
-    intersect: false
-  },
-  onResize: (chart, size) => {
-    chart.resize();  /* Force resize on container change */
-  }
-};
-</script>
-
-<style scoped>
-.overview-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.graphs-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);  /* Equal width columns */
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.metrics-row {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);  /* Start with 8 equal columns */
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.health-messages {
-  padding: 0.5rem;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 0.25rem;
-  position: relative;
-  bottom: 0;
-  min-height: 2.5rem;
-  max-height: 30%;
-  overflow-y: auto;
-  margin-top: auto;  /* Push to bottom of container */
-}
-
-.messages-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.health-message {
-  font-size: 0.875rem;
-  text-align: left;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  height: 2.5em;
-  display: flex;
-  align-items: center;
-}
-
-.health-message.healthy {
-  background: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-}
-
-.health-message:hover {
-  &.delta-low {
-    background: rgba(40, 167, 69, 0.15);
-  }
-  &.delta-medium {
-    background: rgba(255, 193, 7, 0.15);
-  }
-  &.delta-high {
-    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;
-  }
-}
-
-.health-delta {
-  margin-left: 0.5rem;
-  font-size: 0.8em;
-}
-
-.delta-low {
-  background: rgba(40, 167, 69, 0.1);
-  color: #0d5524;  /* Darker green */
-}
-
-.delta-medium {
-  background: rgba(255, 193, 7, 0.1);
-  color: #856404;  /* Darker yellow */
-}
-
-.delta-high {
-  background: rgba(220, 53, 69, 0.1);
-  color: #721c24;  /* Darker red */
-}
-
-.delta-info {
-  background: rgba(13, 110, 253, 0.1);
-  color: #0d6efd;
-}
-
-.metric-card {
-  min-width: 180px;  /* Prevents cards from becoming too small */
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  width: 100%;  /* Take full width of grid cell */
-}
-
-.metric-card .card-header {
-  text-align: left;
-}
-
-.card-header h6 {
-  font-size: 0.95rem;
-  font-weight: 600;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.metric-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-card .metric-value {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;  /* Prevent text wrapping */
-  min-width: fit-content;  /* Allow text to determine minimum width */
-}
-
-.metric-label {
-  color: #666;
-}
-
-.metric-percentage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.5);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0,0,0,0.05);
-  z-index: 2;
-}
-
-/* Style for the percentage overlay in graphs */
-.metric-percentage .metric-value {
-  font-size: 2.5rem;
-  font-weight: normal;  /* Match health graph */
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-@media (max-width: 1500px) {
-  .metrics-row {
-    grid-template-columns: repeat(4, 1fr);  /* 4 cards per row */
-  }
-  
-  .graphs-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 graphs per row */
-  }
-  
-  .messages-grid {
-    grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
-  }
-}
-
-@media (max-width: 1148px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
-  }
-  
-  .graphs-row {
-    grid-template-columns: 1fr;  /* 1 graph per row */
-  }
-  
-  .messages-grid {
-    grid-template-columns: 1fr;  /* 1 message per row */
-  }
-}
-
-/* Fine-tune for very small screens */
-@media (max-width: 740px) {
-  .metrics-row, .graphs-row, .messages-grid {
-    grid-template-columns: 1fr;  /* Everything in single column */
-  }
-  
-  .metric-card {
-    min-width: 0;  /* Allow cards to shrink further on very small screens */
-  }
-}
-
-.status-maintenance {
-  color: #0d6efd;  /* Bootstrap blue */
-}
-
-.health-message.healthy {
-  background: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-}
-
-.delta-info {
-  background: rgba(13, 110, 253, 0.1);
-  color: #0d6efd;
-}
-
-.header-button {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.03);  /* Bootstrap card header background */
-  padding: 0.5rem;
-  color: #666;
-  transition: color 0.2s;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);  /* Bootstrap card header border */
-}
-
-.header-button:hover {
-  color: #333;
-  background-color: rgba(0, 0, 0, 0.04);  /* Slightly darker on hover */
-}
-
-.header-button:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-/* Add a wrapper for the chart to ensure proper sizing */
-.chart-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-</style>

pvc-vue/src/components/charts/CPUChart.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-cpu"
+        />
+      </div>
+    </div>
+  </div>
+</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({
+  title: {
+    type: String,
+    default: 'CPU Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'CPU',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(75, 192, 192)',
+    fill: true,
+    backgroundColor: 'rgba(75, 192, 192, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(75, 192, 192, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.chart-cpu {
+  background: white;
+  border: none;
+}
+
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>

pvc-vue/src/components/charts/HealthChart.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-health"
+        />
+      </div>
+    </div>
+  </div>
+</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';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import ValueCard from '../general/ValueCard.vue';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  annotationPlugin
+);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Health'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [], maintenance: [] })
+  },
+  maintenance: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => {
+          const dataPoint = context.dataIndex;
+          const maintenanceData = props.chartData.maintenance || [];
+          const isInMaintenance = maintenanceData[dataPoint];
+          
+          return isInMaintenance 
+            ? `${context.parsed.y}% (Maintenance)` 
+            : `${context.parsed.y}%`;
+        }
+      }
+    },
+    annotation: {
+      annotations: {
+        criticalLine: {
+          type: 'line',
+          yMin: 50,
+          yMax: 50,
+          borderColor: 'rgba(220, 53, 69, 0.5)',
+          borderWidth: 1,
+          borderDash: [5, 5]
+        },
+        warningLine: {
+          type: 'line',
+          yMin: 90,
+          yMax: 90,
+          borderColor: 'rgba(255, 193, 7, 0.5)',
+          borderWidth: 1,
+          borderDash: [5, 5]
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+// Helper function to get health color based on value and maintenance status
+const getHealthColor = (value, isInMaintenance) => {
+  if (isInMaintenance) {
+    return {
+      border: 'rgba(13, 110, 253, 0.8)',  // Blue for maintenance
+      background: 'rgba(13, 110, 253, 0.1)'
+    };
+  } else if (value > 90) {
+    return {
+      border: 'rgba(40, 167, 69, 0.8)',  // Green
+      background: 'rgba(40, 167, 69, 0.1)'
+    };
+  } else if (value > 50) {
+    return {
+      border: 'rgba(255, 193, 7, 0.8)',  // Yellow
+      background: 'rgba(255, 193, 7, 0.1)'
+    };
+  } else {
+    return {
+      border: 'rgba(220, 53, 69, 0.8)',  // Red
+      background: 'rgba(220, 53, 69, 0.1)'
+    };
+  }
+};
+
+const formattedChartData = computed(() => {
+  const labels = props.chartData.labels || [];
+  const data = props.chartData.data || [];
+  const maintenanceData = props.chartData.maintenance || [];
+
+  // For single value or empty data
+  if (data.length <= 1) {
+    const value = data.length === 1 ? data[0] : props.value;
+    const isInMaintenance = props.maintenance;
+    const color = getHealthColor(value, isInMaintenance);
+
+    return {
+      labels: labels.length ? labels : ['Health'],
+      datasets: [{
+        label: 'Health',
+        data: data.length ? data : [value],
+        borderColor: color.border,
+        backgroundColor: color.background,
+        fill: true,
+        borderWidth: 1.5,
+        tension: 0.4,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+        pointBorderColor: color.border,
+        pointBorderWidth: 1.5
+      }]
+    };
+  }
+
+  // For historical data with multiple values
+  return {
+    labels,
+    datasets: [{
+      label: 'Health',
+      data,
+      segment: {
+        borderColor: ctx => {
+          const index = ctx.p1DataIndex;
+          const value = ctx.p1.parsed.y;
+          const isInMaintenance = maintenanceData[index];
+          
+          if (isInMaintenance) return 'rgba(13, 110, 253, 0.8)';  // Blue for maintenance
+          if (value > 90) return 'rgba(40, 167, 69, 0.8)';  // Green
+          if (value > 50) return 'rgba(255, 193, 7, 0.8)';  // Yellow
+          return 'rgba(220, 53, 69, 0.8)';  // Red
+        },
+        backgroundColor: ctx => {
+          const index = ctx.p1DataIndex;
+          const value = ctx.p1.parsed.y;
+          const isInMaintenance = maintenanceData[index];
+          
+          if (isInMaintenance) return 'rgba(13, 110, 253, 0.1)';  // Blue for maintenance
+          if (value > 90) return 'rgba(40, 167, 69, 0.1)';  // Green
+          if (value > 50) return 'rgba(255, 193, 7, 0.1)';  // Yellow
+          return 'rgba(220, 53, 69, 0.1)';  // Red
+        }
+      },
+      fill: true,
+      borderWidth: 1.5,
+      tension: 0.4,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+      pointBorderColor: function(context) {
+        const index = context.dataIndex;
+        const value = context.dataset.data[index];
+        const isInMaintenance = maintenanceData[index];
+        return getHealthColor(value, isInMaintenance).border;
+      },
+      pointBorderWidth: 1.5
+    }]
+  };
+});
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.chart-health {
+  background: white;
+  border: none;
+}
+
+/* Add these styles to match the original design */
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>

pvc-vue/src/components/charts/MemoryChart.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-memory"
+        />
+      </div>
+    </div>
+  </div>
+</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({
+  title: {
+    type: String,
+    default: 'Memory Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'Memory',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(153, 102, 255)',
+    fill: true,
+    backgroundColor: 'rgba(153, 102, 255, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(153, 102, 255, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.chart-memory {
+  background: white;
+  border: none;
+}
+
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>

pvc-vue/src/components/charts/MetricsCharts.vue

@@ -82,6 +82,7 @@ import {
   Tooltip,
   Legend
 } from 'chart.js';
+import ValueCard from '../general/ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(

pvc-vue/src/components/charts/StorageChart.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-storage"
+        />
+      </div>
+    </div>
+  </div>
+</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({
+  title: {
+    type: String,
+    default: 'Storage Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'Storage',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(255, 159, 64)',
+    fill: true,
+    backgroundColor: 'rgba(255, 159, 64, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(255, 159, 64, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.chart-storage {
+  background: white;
+  border: none;
+}
+
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>

pvc-vue/src/components/general/CollapsibleSection.vue

@@ -0,0 +1,155 @@
+<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">
+          <h5 class="section-title" v-if="title">{{ title }}</h5>
+        </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;
+}
+
+.section-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #495057;
+}
+</style> 

pvc-vue/src/components/general/ConfigPanel.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Overlay that captures clicks outside the panel -->
-    <div 
+    <div
-      v-if="modelValue" 
+      v-if="modelValue"
       class="config-overlay"
       @click="closePanel"
     ></div>
-    
+   
     <div class="config-panel" :class="{ 'open': modelValue }">
       <div class="config-content" @click.stop>
         <h3>Configuration</h3>
@@ -36,16 +36,19 @@
           </div>
 
           <div class="mb-3">
-            <label for="updateInterval" class="form-label">Update Interval (ms)</label>
+            <label for="updateInterval" class="form-label">Update Interval (seconds)</label>
             <input
               type="number"
               class="form-control"
               id="updateInterval"
-              v-model="formData.updateInterval"
+              v-model.number="formData.updateInterval"
-              min="1000"
+              min="5"
-              step="1000"
+              max="300"
               required
             >
+            <div class="form-text">
+              Enter value in seconds (5-300, default: 15)
+            </div>
           </div>
 
           <div class="d-grid gap-2">
@@ -74,14 +77,20 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'save']);
 
+// Initialize form data with raw values from config
 const formData = ref({
   apiUri: props.config.apiUri || '',
   apiKey: props.config.apiKey || '',
-  updateInterval: props.config.updateInterval || 5000
+  updateInterval: props.config.updateInterval || 15 // Default to 15 seconds
 });
 
 const saveConfig = () => {
-  emit('save', { ...formData.value });
+  // Pass the raw values to parent
+  emit('save', {
+    apiUri: formData.value.apiUri,
+    apiKey: formData.value.apiKey,
+    updateInterval: formData.value.updateInterval // Pass seconds directly
+  });
 };
 
 const closePanel = () => {

pvc-vue/src/components/general/NodeSelectBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="node-select-bar">
+    <div class="node-select-row">
+      <button
+        v-for="node in nodes"
+        :key="node"
+        class="node-tab"
+        :class="{ 'active': modelValue === node }"
+        @click="selectNode(node)"
+      >
+        {{ node }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  nodes: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  value: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const selectedNode = ref(props.value || props.modelValue);
+
+const selectNode = (node) => {
+  selectedNode.value = node;
+  emit('update:modelValue', node);
+  emit('select', node);
+  
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
+};
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodes.includes(savedNodeId)) {
+    // Only select if the node exists in the available nodes
+    selectedNode.value = savedNodeId;
+    emit('update:modelValue', savedNodeId);
+    emit('select', savedNodeId);
+  }
+});
+
+watch(() => props.value, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+</script>
+
+<style scoped>
+.node-select-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: white;
+  border-radius: 0.25rem;
+  padding-top: 0.25rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.node-select-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
+}
+
+.node-tab {
+  padding: 0.45rem 0.75rem;
+  border: none;
+  background: none;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.node-tab:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.node-tab.active {
+  color: #0d6efd;
+  background-color: rgba(13, 110, 253, 0.1);
+  border-bottom: 4px solid rgba(13, 110, 253, 0.25);
+  margin-bottom: -4px;
+}
+</style> 

pvc-vue/src/components/general/PageTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="page-title-container">
+    <h1 class="page-title">{{ title }}</h1>
+    <div class="page-actions" v-if="$slots.actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.page-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.page-title {
+  font-size: 1.75rem;
+  font-weight: 500;
+  margin: 0;
+  color: #333;
+}
+
+.page-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

pvc-vue/src/components/general/ValueCard.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body" :class="bgColorClass">
+      <h4 class="metric-value" :class="valueClass">{{ value }}</h4>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  valueClass: {
+    type: String,
+    default: ''
+  },
+  bgColor: {
+    type: String,
+    default: ''
+  }
+});
+
+// Compute the background color class based on the bgColor prop
+const bgColorClass = computed(() => {
+  if (!props.bgColor) return '';
+  return `bg-${props.bgColor}`;
+});
+</script>
+
+<style scoped>
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Background color classes */
+.bg-green {
+  background-color: rgba(40, 167, 69, 0.1);
+}
+
+.bg-yellow {
+  background-color: rgba(255, 193, 7, 0.1);
+}
+
+.bg-red {
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+.bg-blue {
+  background-color: rgba(13, 110, 253, 0.1);
+}
+
+.bg-gray {
+  background-color: rgba(108, 117, 125, 0.1);
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: center;
+  align-items: center;
+}
+
+.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> 

pvc-vue/src/components/pages/nodes/NodeOverview.vue

@@ -0,0 +1,760 @@
+<template>
+  <NodeSelectBar
+    v-model="selectedNode"
+    :nodes="availableNodes"
+    @select="handleNodeSelect"
+  />
+
+  <!-- Node Details -->
+  <div v-if="selectedNodeData" class="content-container">
+    <!-- Information Cards Section -->
+    <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>
+    </CollapsibleSection>
+
+    <!-- Utilization Graphs Section -->
+    <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>
+    </CollapsibleSection>
+
+    <!-- CPU Resources Section -->
+    <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 3: Load -->
+        <ValueCard
+          title="Load"
+          :value="selectedNodeData.load || 0"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Memory Resources Section -->
+    <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>
+    </CollapsibleSection>
+
+    <!-- Running VMs Section -->
+    <CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
+      <div class="vm-list-row">
+        <NodeVMList 
+          :vmData="props.vmData"
+          :nodeData="props.nodeData"
+          :nodeName="selectedNode"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Health Details Section -->
+    <CollapsibleSection title="Health Details" :initially-expanded="sections.health">
+      <div class="health-details-row">
+        <!-- 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="nodeHealthMessages.length">
+                <div
+                  v-for="(msg, idx) in nodeHealthMessages"
+                  :key="idx"
+                  :class="[
+                    'health-message',
+                    getHealthMessageClass(msg),
+                  ]"
+                >
+                  <div class="message-header">
+                    <i class="fas" :class="getMessageIcon(msg)"></i>
+                    <span class="message-id">{{ msg.name }}</span>
+                    <span v-if="msg.health_delta > 0" class="health-delta">
+                      (-{{ msg.health_delta }}%)
+                    </span>
+                  </div>
+                  <div class="message-content">
+                    {{ getMessageContent(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">Node healthy</span>
+                </div>
+                <div class="message-content">
+                  Node is at full health with no faults
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+
+  <!-- No node selected message -->
+  <div v-else class="no-node-selected">
+    <p>Select a node to view details</p>
+  </div>
+</template>
+
+<script setup>
+// Import all the same components and functions from the original Nodes.vue
+import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
+import CPUChart from '../../charts/CPUChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import NodeSelectBar from '../../general/NodeSelectBar.vue';
+import NodeVMList from './NodeVMList.vue';
+import { useRouter, useRoute } from 'vue-router';
+
+// Move all the props, refs, computed properties, and functions from Nodes.vue
+const props = defineProps({
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+// State for sections (expanded/collapsed)
+const sections = ref({
+  info: true,
+  graphs: true,
+  cpu: true,
+  resources: true,
+  vms: true,
+  health: true
+});
+
+// State for selected node and tab scrolling
+const selectedNode = ref('');
+const tabsContainer = ref(null);
+const showLeftScroll = ref(false);
+const showRightScroll = ref(false);
+
+// Get the selected node data
+const selectedNodeData = computed(() => {
+  if (!selectedNode.value || !props.nodeData) return null;
+  return props.nodeData.find(node => node.name === selectedNode.value) || null;
+});
+
+// Select a node
+const selectNode = (nodeName) => {
+  selectedNode.value = nodeName;
+
+  // Scroll the selected tab into view
+  nextTick(() => {
+    const activeTab = tabsContainer.value?.querySelector('.node-tab.active');
+    if (activeTab) {
+      activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+
+    // Check if scroll buttons should be shown
+    checkScrollButtons();
+  });
+};
+
+// Check if scroll buttons should be shown
+const checkScrollButtons = () => {
+  if (!tabsContainer.value) return;
+
+  const { scrollLeft, scrollWidth, clientWidth } = tabsContainer.value;
+
+  // Show left scroll button if not at the beginning
+  showLeftScroll.value = scrollLeft > 0;
+
+  // Show right scroll button if not at the end
+  showRightScroll.value = scrollLeft + clientWidth < scrollWidth - 1; // -1 for rounding errors
+};
+
+// Scroll tabs left or right
+const scrollTabs = (direction) => {
+  if (!tabsContainer.value) return;
+
+  const scrollAmount = tabsContainer.value.clientWidth / 2;
+  const currentScroll = tabsContainer.value.scrollLeft;
+
+  if (direction === 'left') {
+    tabsContainer.value.scrollTo({
+      left: Math.max(0, currentScroll - scrollAmount),
+      behavior: 'smooth'
+    });
+  } else {
+    tabsContainer.value.scrollTo({
+      left: currentScroll + scrollAmount,
+      behavior: 'smooth'
+    });
+  }
+
+  // Check scroll buttons after scrolling
+  setTimeout(checkScrollButtons, 300);
+};
+
+// Calculate CPU utilization (load / cpu_count * 100)
+const calculateCpuUtilization = (nodeData) => {
+  if (!nodeData || !nodeData.load || !nodeData.cpu_count) return 0;
+
+  const utilization = (nodeData.load / nodeData.cpu_count) * 100;
+  return Math.round(utilization);
+};
+
+// Calculate memory utilization
+const calculateMemoryUtilization = (node) => {
+  if (!node || !node.memory) return 0;
+  const used = node.memory.used || 0;
+  const total = node.memory.total || 1; // Avoid division by zero
+  if (total === 0) return 0;
+  return Math.round((used / total) * 100);
+};
+
+// Calculate allocated memory
+const calculateAllocatedMemory = (node) => {
+  if (!node || !node.memory) return 0;
+  const allocated = node.memory.allocated || 0;
+  const total = node.memory.total || 1; // Avoid division by zero
+  if (total === 0) return 0;
+  return Math.round((allocated / total) * 100);
+};
+
+// Format memory values
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  // The values are already in MB, so we just need to convert to GB
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+// Check if the cluster is in maintenance mode
+const isMaintenanceMode = computed(() => {
+  return props.clusterData.maintenance === "true";
+});
+
+// Update the nodeHealthChartData computed property to include maintenance data
+const nodeHealthChartData = computed(() => {
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value?.name];
+
+  if (nodeMetrics && nodeMetrics.health && nodeMetrics.health.data.length > 0) {
+    return {
+      labels: nodeMetrics.health.labels,
+      data: nodeMetrics.health.data,
+      maintenance: nodeMetrics.health.maintenance || []
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Health'],
+    data: [selectedNodeData.value?.health || 0],
+    maintenance: [isMaintenanceMode.value]
+  };
+});
+
+const nodeCpuChartData = computed(() => {
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value?.name];
+
+  if (nodeMetrics && nodeMetrics.cpu && nodeMetrics.cpu.data.length > 0) {
+    return {
+      labels: nodeMetrics.cpu.labels,
+      data: nodeMetrics.cpu.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['CPU'],
+    data: [calculateCpuUtilization(selectedNodeData.value)]
+  };
+});
+
+const nodeMemoryChartData = computed(() => {
+  if (!selectedNodeData.value) return { labels: [], data: [] };
+
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value.name];
+
+  if (nodeMetrics && nodeMetrics.memory && nodeMetrics.memory.data.length > 0) {
+    return {
+      labels: nodeMetrics.memory.labels,
+      data: nodeMetrics.memory.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Memory'],
+    data: [calculateMemoryUtilization(selectedNodeData.value)]
+  };
+});
+
+const nodeAllocatedMemoryChartData = computed(() => {
+  if (!selectedNodeData.value) return { labels: [], data: [] };
+
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value.name];
+
+  if (nodeMetrics && nodeMetrics.allocated && nodeMetrics.allocated.data.length > 0) {
+    return {
+      labels: nodeMetrics.allocated.labels,
+      data: nodeMetrics.allocated.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Allocated'],
+    data: [calculateAllocatedMemory(selectedNodeData.value)]
+  };
+});
+
+// Helper functions for state colors
+const getDaemonStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'run') return 'green';
+  if (['init', 'shutdown'].includes(state)) return 'yellow';
+  if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
+  return 'blue';
+};
+
+const getCoordinatorStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'primary') return 'green';
+  if (state === 'secondary') return 'blue';
+  if (state === 'hypervisor') return 'gray';
+  return '';
+};
+
+const getDomainStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'ready') return 'green';
+  if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
+  return 'gray';
+};
+
+// Initialize the component
+onMounted(() => {
+  // Check if there's a saved node selection
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodeData.some(node => node.name === savedNodeId)) {
+    selectNode(savedNodeId);
+  } else if (props.nodeData && props.nodeData.length > 0) {
+    // Fall back to selecting the first node
+    selectNode(props.nodeData[0].name);
+  }
+
+  // Check if scroll buttons should be shown
+  window.addEventListener('resize', checkScrollButtons);
+  nextTick(checkScrollButtons);
+});
+
+// Watch for changes in the nodes data
+watch(() => props.nodeData, () => {
+  // If the currently selected node no longer exists, select the first available node
+  if (props.nodeData && props.nodeData.length > 0 && !props.nodeData.find(node => node.name === selectedNode.value)) {
+    selectNode(props.nodeData[0].name);
+  }
+
+  // Check if scroll buttons should be shown
+  nextTick(checkScrollButtons);
+}, { deep: true });
+
+// Clean up event listeners
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScrollButtons);
+});
+
+const availableNodes = computed(() => {
+  return props.nodeData.map(node => node.name).sort();
+});
+
+const handleNodeSelect = (node) => {
+  selectedNode.value = node;
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
+};
+
+// Process node health messages
+const nodeHealthMessages = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.health_details) {
+    return [];
+  }
+
+  const healthDetails = selectedNodeData.value.health_details;
+  // Make sure we're getting an array of health details
+  if (Array.isArray(healthDetails)) {
+    return healthDetails;
+  } else if (typeof healthDetails === 'object') {
+    // If it's an object, convert to array
+    return Object.values(healthDetails);
+  }
+  return [];
+});
+
+// Helper function to determine message class based on health status
+const getHealthMessageClass = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'delta-high'; // Red for critical issues (>=25%)
+  }
+  if (msg.health_delta > 0) {
+    return 'delta-medium';
+  }
+  return 'delta-low'; // Green for healthy items
+};
+
+// Helper function to get appropriate icon for health message
+const getMessageIcon = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'fa-circle-exclamation me-1'; // Warning icon for significant issues
+  }
+  if (msg.health_delta > 0) {
+    return 'fa-info-circle me-1'; // Info icon for minor issues
+  }
+  return 'fa-circle-check me-1'; // Checkmark for healthy items
+};
+
+// Helper function to format message content
+const getMessageContent = (msg) => {
+  return msg.message || 'No details available';
+};
+
+const selectVM = (vmId) => {
+  // Store the VM ID in localStorage so it will be selected when the VMs page loads
+  localStorage.setItem('selectedVMId', vmId);
+};
+</script>
+
+<style scoped>
+/* Add these missing styles from the original Nodes.vue */
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.info-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .vm-list-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.health-details-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Responsive grid layouts */
+@media (min-width: 1201px) {
+  .info-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .graphs-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .resources-row-cpu {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .info-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .graphs-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .resources-row-cpu {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 800px) {
+  .info-row,
+  .graphs-row,
+  .resources-row-cpu,
+  .resources-row-memory {
+    grid-template-columns: 1fr;
+  }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  align-self: flex-start;
+}
+
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  position: relative;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  /* Default styling - will be overridden by delta classes */
+  background: rgba(108, 117, 125, 0.15);
+  color: #495057;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.message-id {
+  font-weight: 600;
+}
+
+.message-content {
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: pre-line; /* Allow line breaks in content */
+  color: inherit;
+  opacity: 0.9;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Green background */
+  color: #0d5524;
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.15);  /* Yellow background */
+  color: #856404;
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.15);  /* Red background */
+  color: #721c24;
+}
+
+.delta-info {
+  background: rgba(13, 110, 253, 0.15);  /* Blue background */
+  color: #0d6efd;
+}
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: flex-start;
+  align-items: center;
+}
+</style> 

pvc-vue/src/components/pages/nodes/NodeStatus.vue.bak

@@ -38,6 +38,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const props = defineProps({
   nodeData: {
@@ -60,7 +61,7 @@ const formatMemory = (node) => {
   if (!node.memory || typeof node.memory !== 'object') {
     return { used: 'N/A', total: 'N/A', percent: 'N/A' };
   }
-  
+ 
   // Convert MB to GB with 2 decimal places
   const toGB = (mb) => {
     if (typeof mb !== 'number' || isNaN(mb)) {
@@ -68,17 +69,17 @@ const formatMemory = (node) => {
     }
     return (mb / 1024).toFixed(2);
   };
-  
+ 
   // Extract values from the Proxy object
   const memoryData = Object.assign({}, node.memory);
   const used = toGB(memoryData.used);
   const total = toGB(memoryData.total);
-  
+ 
   let percent = 'N/A';
   if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) {
     percent = Math.round((parseFloat(used) / parseFloat(total)) * 100);
   }
-  
+ 
   return { used, total, percent };
 };
 </script>

pvc-vue/src/components/pages/nodes/NodeVMList.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="vms-container">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">Running VMs</span>
+      </h6>
+    </div>
+    <div v-if="!runningDomains || runningDomains.length === 0" class="no-vms">
+      No VMs running on this node
+    </div>
+    <div v-else class="vm-list" :style="{ 
+      'grid-template-columns': `repeat(auto-fill, minmax(150px, 1fr))` 
+    }">
+      <div 
+        v-for="vmName in runningDomains" 
+        :key="vmName" 
+        class="vm-item"
+        @click="selectVMAndNavigate(vmName)"
+      >
+        {{ vmName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { navigateToVM } from '../../../services/navigation';
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeName: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+
+// Get the selected node data
+const nodeData = computed(() => {
+  if (!props.nodeName || !props.nodeData || props.nodeData.length === 0) {
+    console.log('No node selected or no node data available');
+    return null;
+  }
+  
+  const node = props.nodeData.find(node => node.name === props.nodeName);
+  console.log(`Node data for ${props.nodeName}:`, node);
+  return node;
+});
+
+// Get running domains from the node data
+const runningDomains = computed(() => {
+  if (!nodeData.value || !nodeData.value.running_domains) {
+    console.log('No running domains found for node:', props.nodeName);
+    return [];
+  }
+  
+  console.log(`Found ${nodeData.value.running_domains.length} running domains on node ${props.nodeName}:`, nodeData.value.running_domains);
+  return nodeData.value.running_domains;
+});
+
+// Navigate to VM details using the navigation service
+const selectVMAndNavigate = (vmName) => {
+  navigateToVM(vmName, router);
+};
+</script>
+
+<style scoped>
+.vms-container {
+  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;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.no-vms {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.vm-list {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.vm-item {
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.015);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  display: block;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.vm-node {
+  font-size: 0.7rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+</style> 

pvc-vue/src/components/pages/vms/VMDetail.vue.bak

@@ -0,0 +1,157 @@
+<template>
+  <div class="vm-detail">
+    <!-- Basic Info Section -->
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-row">
+        <ValueCard 
+          title="State" 
+          :value="vm.state || 'Unknown'"
+          :status="getStateColor(vm.state)"
+        />
+        <ValueCard 
+          title="Node" 
+          :value="vm.node || 'N/A'"
+        />
+        <ValueCard 
+          title="CPUs" 
+          :value="vm.vcpus || 0"
+        />
+        <ValueCard 
+          title="Memory" 
+          :value="formatMemory(vm.memory)"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="resources-row">
+        <ValueCard 
+          title="Disk Size" 
+          :value="formatStorage(vm.disk_size)"
+        />
+        <ValueCard 
+          title="Network IPs" 
+          :value="vm.ips?.join(', ') || 'None'"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Networks Section -->
+    <CollapsibleSection 
+      v-if="vm.networks?.length" 
+      title="Network Interfaces" 
+      :initially-expanded="sections.networks"
+    >
+      <div class="networks-row">
+        <div v-for="network in vm.networks" :key="network.vni" class="network-card">
+          <ValueCard title="Interface" :value="network.vni" />
+          <ValueCard title="Type" :value="network.type" />
+          <ValueCard title="MAC" :value="network.mac" />
+          <ValueCard title="Source" :value="network.source" />
+        </div>
+      </div>
+    </CollapsibleSection>
+
+    <!-- Storage Section -->
+    <CollapsibleSection 
+      v-if="vm.disks?.length" 
+      title="Storage" 
+      :initially-expanded="sections.storage"
+    >
+      <div class="storage-row">
+        <div v-for="disk in vm.disks" :key="disk.dev" class="storage-card">
+          <ValueCard title="Device" :value="disk.dev" />
+          <ValueCard title="Type" :value="disk.type" />
+          <ValueCard title="Bus" :value="disk.bus" />
+          <ValueCard title="Source" :value="disk.name" />
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
+
+const props = defineProps({
+  vm: {
+    type: Object,
+    required: true
+  }
+});
+
+// Section visibility state
+const sections = ref({
+  info: true,
+  resources: true,
+  networks: true,
+  storage: true
+});
+
+// Helper functions
+const getStateColor = (state) => {
+  if (!state) return '';
+  switch(state.toLowerCase()) {
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
+  }
+};
+
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
+};
+</script>
+
+<style scoped>
+.vm-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.info-row,
+.resources-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.networks-row,
+.storage-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.network-card,
+.storage-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 0.25rem;
+}
+
+@media (min-width: 1201px) {
+  .info-row { grid-template-columns: repeat(4, 1fr); }
+  .resources-row { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 1200px) {
+  .info-row { grid-template-columns: repeat(2, 1fr); }
+  .resources-row { grid-template-columns: 1fr; }
+}
+</style> 

pvc-vue/src/components/pages/vms/VMOverview.vue

@@ -0,0 +1,440 @@
+<template>
+  <VMSearchBar
+    :key="`vm-search-${selectedVM}`"
+    v-model="searchQuery"
+    :selected-vm="selectedVM"
+    :vm-from-url="route.query.vm"
+    :show-list="showVMList"
+    :show-clear-button="true"
+    :vm-list="props.vmData"
+    @search="handleSearch"
+    @focus="handleSearchFocus"
+    @blur="handleSearchBlur"
+    @clear="clearSearch"
+    @toggle-list="toggleVMList"
+    @select-vm="selectVM"
+    @clear-vm="clearSelectedVM"
+  />
+
+  <!-- VM Details -->
+  <div v-if="selectedVMData && !showVMList" class="content-container">
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-grid-general">
+        <ValueCard 
+          title="State" 
+          :value="selectedVMData.state || 'Unknown'"
+          :status="getStateColor(selectedVMData.state)"
+        />
+        <ValueCard 
+          title="Node" 
+          :value="selectedVMData.node || 'N/A'"
+        />
+        <ValueCard 
+          title="CPUs" 
+          :value="selectedVMData.vcpus || 0"
+        />
+        <ValueCard 
+          title="Memory" 
+          :value="formatMemory(selectedVMData.memory)"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="info-grid-resources">
+        <ValueCard 
+          title="Disk Size" 
+          :value="formatStorage(selectedVMData.disk_size)"
+        />
+        <ValueCard 
+          title="Network IPs" 
+          :value="selectedVMData.ips?.join(', ') || 'None'"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Networks Section -->
+    <CollapsibleSection 
+      v-if="selectedVMData.networks?.length" 
+      title="Network Interfaces" 
+      :initially-expanded="sections.networks"
+    >
+      <div class="cards-stack">
+        <div v-for="network in selectedVMData.networks" 
+              :key="network.vni" 
+              class="detail-card"
+        >
+          <ValueCard title="Interface" :value="network.vni" />
+          <ValueCard title="Type" :value="network.type" />
+          <ValueCard title="MAC" :value="network.mac" />
+          <ValueCard title="Source" :value="network.source" />
+        </div>
+      </div>
+    </CollapsibleSection>
+
+    <!-- Storage Section -->
+    <CollapsibleSection 
+      v-if="selectedVMData.disks?.length" 
+      title="Storage" 
+      :initially-expanded="sections.storage"
+    >
+      <div class="cards-stack">
+        <div v-for="disk in selectedVMData.disks" 
+              :key="disk.dev" 
+              class="detail-card"
+        >
+          <ValueCard title="Device" :value="disk.dev" />
+          <ValueCard title="Type" :value="disk.type" />
+          <ValueCard title="Bus" :value="disk.bus" />
+          <ValueCard title="Source" :value="disk.name" />
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+
+  <!-- Loading and no-selection states -->
+  <div v-if="!selectedVMData && !showVMList" class="content-container">
+    <div v-if="isLoading" class="loading-container">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <p class="mt-2 text-muted">Loading VM details...</p>
+    </div>
+    <div v-else class="no-content-message">
+      <div class="alert alert-info">
+        <i class="fas fa-info-circle me-2"></i>
+        <span v-if="invalidVMSelected">
+          Selected VM does not exist
+        </span>
+        <span v-else>
+          Please select a VM from the list to view its details
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import VMSearchBar from '../../general/VMSearchBar.vue';
+
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Use ref and sync with route
+const selectedVM = ref('');
+const searchQuery = ref('');
+const showVMList = ref(true);
+const searchActive = ref(false);
+const invalidVMSelected = ref(false);
+const isLoading = ref(false);
+const sections = ref({
+  info: true,
+  graphs: true,
+  resources: true,
+  network: true,
+  storage: true
+});
+
+// Get the selected VM data
+const selectedVMData = computed(() => {
+  if (!selectedVM.value || !props.vmData) return null;
+  return props.vmData.find(vm => vm.name === selectedVM.value) || null;
+});
+
+// Handle search input
+const handleSearch = (value) => {
+  searchQuery.value = value;
+  searchActive.value = true;
+  
+  // Store the search query in localStorage for persistence
+  if (value) {
+    localStorage.setItem('vmSearchQuery', value);
+    // Also save to vmSearchText for consistency
+    localStorage.setItem('vmSearchText', value);
+  } else {
+    localStorage.removeItem('vmSearchQuery');
+    // Don't remove vmSearchText here - it's used for search history
+  }
+};
+
+// Handle search focus
+const handleSearchFocus = () => {
+  if (!showVMList.value) {
+    showVMList.value = true;
+  }
+  searchActive.value = true;
+};
+
+// Handle search blur
+const handleSearchBlur = (event) => {
+  // Keep blur logic for handling clicks outside
+  // ... existing blur logic ...
+};
+
+// Toggle VM list visibility
+const toggleVMList = () => {
+  showVMList.value = !showVMList.value;
+  
+  if (showVMList.value) {
+    // When opening the list
+    searchActive.value = false;
+    invalidVMSelected.value = false;
+    
+    // Restore search text if available
+    const savedSearchText = localStorage.getItem('vmSearchText');
+    if (savedSearchText && !searchQuery.value) {
+      searchQuery.value = savedSearchText;
+    }
+  }
+};
+
+// Select a VM
+const selectVM = (vm) => {
+  console.log('VMOverview selectVM called with:', vm);
+  
+  // Update the ref
+  selectedVM.value = vm.name;
+  invalidVMSelected.value = false;
+  
+  // Close the VM list
+  showVMList.value = false;
+  
+  // Save to localStorage
+  localStorage.setItem('selectedVMId', vm.name);
+  
+  // No URL parameter update
+};
+
+// Clear search
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchActive.value = false;
+  localStorage.removeItem('vmSearchQuery');
+};
+
+// Add a method to clear the selected VM
+const clearSelectedVM = () => {
+  // Clear the selected VM
+  selectedVM.value = '';
+  invalidVMSelected.value = false;
+  
+  // Clear the search query in this component
+  searchQuery.value = '';
+  
+  // Show the VM list
+  showVMList.value = true;
+  
+  // Clear VM selection from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Don't clear vmSearchText unless it matches the VM name
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  if (savedSearchText === savedVMId) {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Clear URL parameter if it exists
+  if (route.query.vm) {
+    router.replace({ path: '/vms' }, { replace: true });
+  }
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  console.log('VMOverview mounted');
+  isLoading.value = true;
+  
+  // Check sources in priority order:
+  // 1. localStorage (for returning to the page or navigating from other pages)
+  // 2. URL query parameter (for backward compatibility)
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const vmFromQuery = route.query.vm;
+  
+  // Restore previous search query from localStorage
+  const savedSearch = localStorage.getItem('vmSearchQuery');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  // If we have a VM to select
+  let vmToSelect = savedVMId || vmFromQuery;
+  
+  if (vmToSelect && props.vmData.length > 0) {
+    // Check if the VM exists
+    const vmExists = props.vmData.some(v => v.name === vmToSelect);
+    
+    if (vmExists) {
+      selectedVM.value = vmToSelect;
+      showVMList.value = false;
+      
+      // Set the search query to the VM name for display in the search bar
+      searchQuery.value = vmToSelect;
+      
+      // If from URL, save to localStorage for persistence
+      if (vmFromQuery && !savedVMId) {
+        localStorage.setItem('selectedVMId', vmFromQuery);
+        
+        // Remove the VM ID from the URL without reloading the page
+        router.replace({ path: '/vms' }, { replace: true });
+      }
+    } else {
+      console.log('Selected VM does not exist:', vmToSelect);
+      invalidVMSelected.value = true;
+      localStorage.removeItem('selectedVMId');
+      
+      // Only clear search text if it matches the VM name
+      if (savedSearchText === vmToSelect) {
+        localStorage.removeItem('vmSearchText');
+      }
+      
+      // Show the VM list with any saved search
+      showVMList.value = true;
+      if (savedSearch) {
+        searchQuery.value = savedSearch;
+      } else if (savedSearchText) {
+        searchQuery.value = savedSearchText;
+      }
+    }
+  } else {
+    // No VM selected, show the list with any saved search
+    showVMList.value = true;
+    if (savedSearch) {
+      searchQuery.value = savedSearch;
+    } else if (savedSearchText) {
+      searchQuery.value = savedSearchText;
+    }
+  }
+  
+  isLoading.value = false;
+});
+
+// Watch for changes in the selected VM
+watch(selectedVM, (newValue) => {
+  if (newValue) {
+    // Save to localStorage whenever it changes
+    localStorage.setItem('selectedVMId', newValue);
+  } else {
+    localStorage.removeItem('selectedVMId');
+  }
+});
+
+// Watch for changes in the VM data
+watch(() => props.vmData, (newData) => {
+  if (selectedVM.value && newData.length > 0) {
+    // Verify the VM still exists
+    const vmExists = newData.some(vm => vm.name === selectedVM.value);
+    invalidVMSelected.value = !vmExists;
+    
+    if (!vmExists) {
+      // If VM no longer exists, clear localStorage
+      localStorage.removeItem('selectedVMId');
+    }
+  }
+}, { deep: true });
+
+// Helper functions
+const getStateColor = (state) => {
+  if (!state) return '';
+  switch(state.toLowerCase()) {
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
+  }
+};
+
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
+};
+</script>
+
+<style scoped>
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.no-content-message {
+  text-align: center;
+  padding: 2rem;
+}
+
+.info-grid-general {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.info-grid-resources {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.cards-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .info-grid-general,
+  .info-grid-resources {
+    grid-template-columns: 1fr;
+  }
+  
+  .detail-card {
+    grid-template-columns: 1fr;
+  }
+}
+</style> 

pvc-vue/src/main.js

@@ -1,6 +1,10 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
+import router from './router';
+
+// Add global styles
+import './assets/styles.css';
 
 // Create the app
 const app = createApp(App);
@@ -9,5 +13,8 @@ const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
 
+// Use the router
+app.use(router);
+
 // Mount the app
 app.mount('#app');

pvc-vue/src/router/index.js

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Overview from '../views/Overview.vue';
+import Nodes from '../views/Nodes.vue';
+import VMs from '../views/VMs.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Overview',
+    component: Overview
+  },
+  {
+    path: '/nodes',
+    name: 'Nodes',
+    component: Nodes
+  },
+  {
+    path: '/vms',
+    name: 'VMs',
+    component: VMs
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router; 

pvc-vue/src/services/navigation.js

@@ -0,0 +1,39 @@
+import { useRouter } from 'vue-router';
+
+/**
+ * Navigate to a VM without using URL parameters
+ * @param {string} vmId - The ID of the VM to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToVM(vmId, router) {
+  // Save the VM ID to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Navigate to the VMs page
+  router.push('/vms');
+}
+
+/**
+ * Navigate to a node without using URL parameters
+ * @param {string} nodeId - The ID of the node to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToNode(nodeId, router) {
+  // Save the node ID to localStorage
+  localStorage.setItem('selectedNodeId', nodeId);
+  
+  // Navigate to the Nodes page
+  router.push('/nodes');
+}
+
+/**
+ * Clear the selected VM and return to the default VM page view
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function clearSelectedVM(router) {
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Navigate to the VMs page without query parameters
+  router.push('/vms');
+} 

pvc-vue/src/stores/api.js

@@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
   const config = ref({
     apiUri: localStorage.getItem('pvc_api_uri') || '',
     apiKey: localStorage.getItem('pvc_api_key') || '',
-    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 5000
+    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 15 // Default to 15s
   });
 
   // Computed
@@ -16,12 +16,18 @@ export const useApiStore = defineStore('api', () => {
 
   // Actions
   const updateConfig = (newConfig) => {
-    config.value = { ...newConfig };
+    // Ensure interval is between 5 and 300 seconds
+    const interval = Math.min(300, Math.max(5, parseInt(newConfig.updateInterval) || 15));
+    
+    config.value = {
+      ...newConfig,
+      updateInterval: interval
+    };
     
     // Save to localStorage
     localStorage.setItem('pvc_api_uri', newConfig.apiUri);
     localStorage.setItem('pvc_api_key', newConfig.apiKey);
-    localStorage.setItem('pvc_update_interval', newConfig.updateInterval.toString());
+    localStorage.setItem('pvc_update_interval', interval.toString());
   };
 
   const fetchStatus = async () => {
@@ -70,11 +76,36 @@ export const useApiStore = defineStore('api', () => {
     }
   };
 
+  const fetchVMs = async () => {
+    try {
+      const response = await fetch('/api/vm', {
+        headers: {
+          'X-API-URI': config.value.apiUri,
+          'X-API-Key': config.value.apiKey
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return Object.entries(data).map(([name, details]) => ({
+        name,
+        ...details
+      }));
+    } catch (error) {
+      console.error('Error fetching VM data:', error);
+      throw error;
+    }
+  };
+
   return {
     config,
     isConfigured,
     updateConfig,
     fetchStatus,
-    fetchNodes
+    fetchNodes,
+    fetchVMs
   };
 });

pvc-vue/src/stores/cluster.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useClusterStore = defineStore('cluster', {
+  state: () => ({
+    clusterData: {}
+  }),
+  
+  actions: {
+    setClusterData(data) {
+      this.clusterData = data;
+    }
+  }
+}); 

pvc-vue/src/stores/vm.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+
+export const useVMStore = defineStore('vm', {
+  state: () => ({
+    vmList: [],
+    metrics: {}
+  }),
+  
+  actions: {
+    setVMList(vms) {
+      this.vmList = vms;
+    },
+    setMetrics(metrics) {
+      this.metrics = metrics;
+    }
+  }
+}); 

pvc-vue/src/utils/vmSelection.js

@@ -0,0 +1,32 @@
+/**
+ * Selects a VM and saves the selection to localStorage
+ * @param {string} vmId - The ID of the VM to select
+ * @param {import('vue-router').Router} router - Vue Router instance (optional)
+ */
+export function selectVM(vmId, router = null) {
+  // Save to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Optionally update URL if router is provided
+  if (router) {
+    router.push({ 
+      path: '/vms',
+      query: { vm: vmId }
+    });
+  }
+}
+
+/**
+ * Gets the currently selected VM from localStorage
+ * @returns {string|null} The selected VM ID or null if none is selected
+ */
+export function getSelectedVM() {
+  return localStorage.getItem('selectedVMId');
+}
+
+/**
+ * Clears the selected VM from localStorage
+ */
+export function clearSelectedVM() {
+  localStorage.removeItem('selectedVMId');
+} 

pvc-vue/src/views/Nodes.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="content-grid">
+    <PageTitle title="Nodes" />
+    <NodeOverview
+      :nodeData="nodeData"
+      :metricsData="metricsData"
+      :clusterData="clusterData"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import PageTitle from '../components/general/PageTitle.vue';
+import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
+
+const props = defineProps({
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+
+const selectedNode = ref(null);
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId) {
+    selectedNode.value = savedNodeId;
+  }
+});
+
+watch(selectedNode, (newValue) => {
+  // Save selected node to localStorage whenever it changes
+  if (newValue) {
+    localStorage.setItem('selectedNodeId', newValue);
+  } else {
+    localStorage.removeItem('selectedNodeId');
+  }
+});
+</script>
+
+<style scoped>
+.content-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+</style>

pvc-vue/src/views/Overview.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content-grid">
+    <PageTitle title="Cluster Overview" />
+    <ClusterOverview
+      :clusterData="clusterData"
+      :metricsData="metricsData"
+    />
+  </div>
+</template>
+
+<script setup>
+import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
+import PageTitle from '../components/general/PageTitle.vue';
+
+defineProps({
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>

pvc-vue/src/views/VMs.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="content-grid">
+    <PageTitle title="Virtual Machines" />
+    <VMOverview
+      :vmData="vmData"
+      :metricsData="metricsData"
+      :clusterData="clusterData"
+      :loading="isLoading"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import PageTitle from '../components/general/PageTitle.vue';
+import VMOverview from '../components/pages/vms/VMOverview.vue';
+
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// We'll handle the VM selection in the VMOverview component
+// This parent component just needs to pass the data
+</script>
+
+<style scoped>
+.content-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+</style> 

pvc-vue/vite.config.js

@@ -1,6 +1,11 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
+function getTimestamp() {
+  const now = new Date();
+  return now.toISOString().replace('T', ' ').replace('Z', '');
+}
+
 export default defineConfig({
   plugins: [vue()],
   server: {
@@ -21,7 +26,7 @@ export default defineConfig({
               const requestPath = req.url.replace('/api', '');
               proxyReq.path = `${apiPath}${requestPath}`;
 
-              console.log(`Proxying to: ${options.target}${proxyReq.path}`);
+              console.log(`${getTimestamp()} Proxying to: ${options.target}${proxyReq.path}`);
             }
 
             if (req.headers['x-api-key']) {

pvc-vue/yarn.lock

@@ -0,0 +1,641 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/parser@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.3.tgz#d2d25b814621bca5fe9d172bc93792547e7a2a71"
+  integrity sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==
+  dependencies:
+    "@babel/types" "^7.28.2"
+
+"@babel/types@^7.28.2":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.2.tgz#da9db0856a9a88e0a13b019881d7513588cf712b"
+  integrity sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
+"@esbuild/aix-ppc64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz#bef96351f16520055c947aba28802eede3c9e9a9"
+  integrity sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==
+
+"@esbuild/android-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz#d2e70be7d51a529425422091e0dcb90374c1546c"
+  integrity sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==
+
+"@esbuild/android-arm@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.9.tgz#d2a753fe2a4c73b79437d0ba1480e2d760097419"
+  integrity sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==
+
+"@esbuild/android-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.9.tgz#5278836e3c7ae75761626962f902a0d55352e683"
+  integrity sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==
+
+"@esbuild/darwin-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz#f1513eaf9ec8fa15dcaf4c341b0f005d3e8b47ae"
+  integrity sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==
+
+"@esbuild/darwin-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz#e27dbc3b507b3a1cea3b9280a04b8b6b725f82be"
+  integrity sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==
+
+"@esbuild/freebsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz#364e3e5b7a1fd45d92be08c6cc5d890ca75908ca"
+  integrity sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==
+
+"@esbuild/freebsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz#7c869b45faeb3df668e19ace07335a0711ec56ab"
+  integrity sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==
+
+"@esbuild/linux-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz#48d42861758c940b61abea43ba9a29b186d6cb8b"
+  integrity sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==
+
+"@esbuild/linux-arm@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz#6ce4b9cabf148274101701d112b89dc67cc52f37"
+  integrity sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==
+
+"@esbuild/linux-ia32@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz#207e54899b79cac9c26c323fc1caa32e3143f1c4"
+  integrity sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==
+
+"@esbuild/linux-loong64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz#0ba48a127159a8f6abb5827f21198b999ffd1fc0"
+  integrity sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==
+
+"@esbuild/linux-mips64el@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz#a4d4cc693d185f66a6afde94f772b38ce5d64eb5"
+  integrity sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==
+
+"@esbuild/linux-ppc64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz#0f5805c1c6d6435a1dafdc043cb07a19050357db"
+  integrity sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==
+
+"@esbuild/linux-riscv64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz#6776edece0f8fca79f3386398b5183ff2a827547"
+  integrity sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==
+
+"@esbuild/linux-s390x@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz#3f6f29ef036938447c2218d309dc875225861830"
+  integrity sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==
+
+"@esbuild/linux-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz#831fe0b0e1a80a8b8391224ea2377d5520e1527f"
+  integrity sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==
+
+"@esbuild/netbsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz#06f99d7eebe035fbbe43de01c9d7e98d2a0aa548"
+  integrity sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==
+
+"@esbuild/netbsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz#db99858e6bed6e73911f92a88e4edd3a8c429a52"
+  integrity sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==
+
+"@esbuild/openbsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz#afb886c867e36f9d86bb21e878e1185f5d5a0935"
+  integrity sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==
+
+"@esbuild/openbsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz#30855c9f8381fac6a0ef5b5f31ac6e7108a66ecf"
+  integrity sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==
+
+"@esbuild/openharmony-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz#2f2144af31e67adc2a8e3705c20c2bd97bd88314"
+  integrity sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==
+
+"@esbuild/sunos-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz#69b99a9b5bd226c9eb9c6a73f990fddd497d732e"
+  integrity sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==
+
+"@esbuild/win32-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz#d789330a712af916c88325f4ffe465f885719c6b"
+  integrity sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==
+
+"@esbuild/win32-ia32@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz#52fc735406bd49688253e74e4e837ac2ba0789e3"
+  integrity sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==
+
+"@esbuild/win32-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz#585624dc829cfb6e7c0aa6c3ca7d7e6daa87e34f"
+  integrity sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==
+
+"@fortawesome/fontawesome-free@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz#8249de9b7e22fcb3ceb5e66090c30a1d5492b81a"
+  integrity sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==
+
+"@jridgewell/sourcemap-codec@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
+"@rollup/rollup-android-arm-eabi@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.0.tgz#939c1be9625d428d8513e4ab60d406fe8db23718"
+  integrity sha512-lVgpeQyy4fWN5QYebtW4buT/4kn4p4IJ+kDNB4uYNT5b8c8DLJDg6titg20NIg7E8RWwdWZORW6vUFfrLyG3KQ==
+
+"@rollup/rollup-android-arm64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.0.tgz#b74005775903f7a8f4e363d2840c1dcef3776ff3"
+  integrity sha512-2O73dR4Dc9bp+wSYhviP6sDziurB5/HCym7xILKifWdE9UsOe2FtNcM+I4xZjKrfLJnq5UR8k9riB87gauiQtw==
+
+"@rollup/rollup-darwin-arm64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.0.tgz#8c04603cdcf1ec0cd6b27152b3827e49295f2962"
+  integrity sha512-vwSXQN8T4sKf1RHr1F0s98Pf8UPz7pS6P3LG9NSmuw0TVh7EmaE+5Ny7hJOZ0M2yuTctEsHHRTMi2wuHkdS6Hg==
+
+"@rollup/rollup-darwin-x64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.0.tgz#19ec976f1cc663def2692cd7ffb32981f2b0b733"
+  integrity sha512-cQp/WG8HE7BCGyFVuzUg0FNmupxC+EPZEwWu2FCGGw5WDT1o2/YlENbm5e9SMvfDFR6FRhVCBePLqj0o8MN7Vw==
+
+"@rollup/rollup-freebsd-arm64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.0.tgz#a96b4ad8346229f6fcbd9d57f1c53040b037c2da"
+  integrity sha512-UR1uTJFU/p801DvvBbtDD7z9mQL8J80xB0bR7DqW7UGQHRm/OaKzp4is7sQSdbt2pjjSS72eAtRh43hNduTnnQ==
+
+"@rollup/rollup-freebsd-x64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.0.tgz#fa565a282bc57967ee6668607b181678bdd74e4a"
+  integrity sha512-G/DKyS6PK0dD0+VEzH/6n/hWDNPDZSMBmqsElWnCRGrYOb2jC0VSupp7UAHHQ4+QILwkxSMaYIbQ72dktp8pKA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.0.tgz#dfc88f7295e1f98d77f25296be787e8a5d6ced75"
+  integrity sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==
+
+"@rollup/rollup-linux-arm-musleabihf@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.0.tgz#32cd70c87455ca031f0361090cf17da5a2ef66d5"
+  integrity sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==
+
+"@rollup/rollup-linux-arm64-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.0.tgz#0e7e1fe7241e3384f6c6b4ccdbcfa8ad8c78b869"
+  integrity sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==
+
+"@rollup/rollup-linux-arm64-musl@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.0.tgz#5d421f2f3e4a84786c4dfd9ce97e595c9b59e7f4"
+  integrity sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.0.tgz#a0fb5c7d0e88319e18acfd9436f19ee39354b027"
+  integrity sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==
+
+"@rollup/rollup-linux-ppc64-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.0.tgz#a65b598af12f25210c3295da551a6e3616ea488d"
+  integrity sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==
+
+"@rollup/rollup-linux-riscv64-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.0.tgz#10ba776214ae2857c5bf4389690dabb2fbaf7d98"
+  integrity sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==
+
+"@rollup/rollup-linux-riscv64-musl@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.0.tgz#c2a46cbaa329d5f21e5808f5a66bb9c78cf68aac"
+  integrity sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==
+
+"@rollup/rollup-linux-s390x-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.0.tgz#a07447be069d64462e30c66611be20c4513963ed"
+  integrity sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==
+
+"@rollup/rollup-linux-x64-gnu@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.0.tgz#8887c58bd51242754ae9c56947d6e883332dcc74"
+  integrity sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==
+
+"@rollup/rollup-linux-x64-musl@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.0.tgz#6403fda72a2b3b9fbbeeff93d14f1c45ef9775f3"
+  integrity sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==
+
+"@rollup/rollup-openharmony-arm64@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.0.tgz#52809afccaff47e731b965a0c16e5686be819d5f"
+  integrity sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==
+
+"@rollup/rollup-win32-arm64-msvc@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.0.tgz#23fe00ddbb40b27a3889bc1e99e6310d97353ad5"
+  integrity sha512-q7cIIdFvWQoaCbLDUyUc8YfR3Jh2xx3unO8Dn6/TTogKjfwrax9SyfmGGK6cQhKtjePI7jRfd7iRYcxYs93esg==
+
+"@rollup/rollup-win32-ia32-msvc@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.0.tgz#520b588076b593413d919912d69dfd5728a1f305"
+  integrity sha512-XzNOVg/YnDOmFdDKcxxK410PrcbcqZkBmz+0FicpW5jtjKQxcW1BZJEQOF0NJa6JO7CZhett8GEtRN/wYLYJuw==
+
+"@rollup/rollup-win32-x64-msvc@4.50.0":
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.0.tgz#d81efe6a12060c7feddf9805e2a94c3ab0679f48"
+  integrity sha512-xMmiWRR8sp72Zqwjgtf3QbZfF1wdh8X2ABu3EaozvZcyHJeU0r+XAnXdKgs4cCAp6ORoYoCygipYP1mjmbjrsg==
+
+"@types/estree@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
+"@vitejs/plugin-vue@^5.2.1":
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
+  integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
+
+"@vue/compiler-core@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.20.tgz#ea100646460703c98117b88900aab4aa7e6f797e"
+  integrity sha512-8TWXUyiqFd3GmP4JTX9hbiTFRwYHgVL/vr3cqhr4YQ258+9FADwvj7golk2sWNGHR67QgmCZ8gz80nQcMokhwg==
+  dependencies:
+    "@babel/parser" "^7.28.3"
+    "@vue/shared" "3.5.20"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.1"
+
+"@vue/compiler-dom@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.20.tgz#7eb0d4b761a48b93723cf264d27c1385b90dae6d"
+  integrity sha512-whB44M59XKjqUEYOMPYU0ijUV0G+4fdrHVKDe32abNdX/kJe1NUEMqsi4cwzXa9kyM9w5S8WqFsrfo1ogtBZGQ==
+  dependencies:
+    "@vue/compiler-core" "3.5.20"
+    "@vue/shared" "3.5.20"
+
+"@vue/compiler-sfc@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.20.tgz#7bf92fc65951fd888076f1c71128dda4507a9328"
+  integrity sha512-SFcxapQc0/feWiSBfkGsa1v4DOrnMAQSYuvDMpEaxbpH5dKbnEM5KobSNSgU+1MbHCl+9ftm7oQWxvwDB6iBfw==
+  dependencies:
+    "@babel/parser" "^7.28.3"
+    "@vue/compiler-core" "3.5.20"
+    "@vue/compiler-dom" "3.5.20"
+    "@vue/compiler-ssr" "3.5.20"
+    "@vue/shared" "3.5.20"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.17"
+    postcss "^8.5.6"
+    source-map-js "^1.2.1"
+
+"@vue/compiler-ssr@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.20.tgz#6cdae8662bf36974ffb4fe894ba08192f89d5660"
+  integrity sha512-RSl5XAMc5YFUXpDQi+UQDdVjH9FnEpLDHIALg5J0ITHxkEzJ8uQLlo7CIbjPYqmZtt6w0TsIPbo1izYXwDG7JA==
+  dependencies:
+    "@vue/compiler-dom" "3.5.20"
+    "@vue/shared" "3.5.20"
+
+"@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
+"@vue/devtools-api@^7.7.2":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-7.7.7.tgz#5ef5f55f60396220725a273548c0d7ee983d5d34"
+  integrity sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==
+  dependencies:
+    "@vue/devtools-kit" "^7.7.7"
+
+"@vue/devtools-kit@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz#41a64f9526e9363331c72405544df020ce2e3641"
+  integrity sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==
+  dependencies:
+    "@vue/devtools-shared" "^7.7.7"
+    birpc "^2.3.0"
+    hookable "^5.5.3"
+    mitt "^3.0.1"
+    perfect-debounce "^1.0.0"
+    speakingurl "^14.0.1"
+    superjson "^2.2.2"
+
+"@vue/devtools-shared@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz#ff14aa8c1262ebac8c0397d3b09f767cd489750c"
+  integrity sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==
+  dependencies:
+    rfdc "^1.4.1"
+
+"@vue/reactivity@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.20.tgz#95b959380af1f49780247686467e8858641209bc"
+  integrity sha512-hS8l8x4cl1fmZpSQX/NXlqWKARqEsNmfkwOIYqtR2F616NGfsLUm0G6FQBK6uDKUCVyi1YOL8Xmt/RkZcd/jYQ==
+  dependencies:
+    "@vue/shared" "3.5.20"
+
+"@vue/runtime-core@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.20.tgz#298eb83fc08887e21adf098a8c6ffeaa9e24c867"
+  integrity sha512-vyQRiH5uSZlOa+4I/t4Qw/SsD/gbth0SW2J7oMeVlMFMAmsG1rwDD6ok0VMmjXY3eI0iHNSSOBilEDW98PLRKw==
+  dependencies:
+    "@vue/reactivity" "3.5.20"
+    "@vue/shared" "3.5.20"
+
+"@vue/runtime-dom@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.20.tgz#bbeb73b51745bf4065d3d42c9a2f18266c3269b7"
+  integrity sha512-KBHzPld/Djw3im0CQ7tGCpgRedryIn4CcAl047EhFTCCPT2xFf4e8j6WeKLgEEoqPSl9TYqShc3Q6tpWpz/Xgw==
+  dependencies:
+    "@vue/reactivity" "3.5.20"
+    "@vue/runtime-core" "3.5.20"
+    "@vue/shared" "3.5.20"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.20.tgz#6e075ef0386d099e8ec09c4662b6e8af1c1a086f"
+  integrity sha512-HthAS0lZJDH21HFJBVNTtx+ULcIbJQRpjSVomVjfyPkFSpCwvsPTA+jIzOaUm3Hrqx36ozBHePztQFg6pj5aKg==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.20"
+    "@vue/shared" "3.5.20"
+
+"@vue/shared@3.5.20":
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.20.tgz#8740b370738c8c7e29e02fa9051cfe6d20114cb4"
+  integrity sha512-SoRGP596KU/ig6TfgkCMbXkr4YJ91n/QSdMuqeP5r3hVIYA3CPHUBCc7Skak0EAKV+5lL4KyIh61VA/pK1CIAA==
+
+birpc@^2.3.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/birpc/-/birpc-2.5.0.tgz#3a014e54c17eceba0ce15738d484ea371dbf6527"
+  integrity sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==
+
+bootstrap@^5.3.3:
+  version "5.3.8"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.8.tgz#6401a10057a22752d21f4e19055508980656aeed"
+  integrity sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==
+
+chart.js@^4.4.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.5.0.tgz#11a1ef6c4befc514b1b0b613ebac226c4ad2740b"
+  integrity sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+chartjs-plugin-annotation@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz#0b3910862bde232344bbb6cf998633f71db7b093"
+  integrity sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==
+
+copy-anything@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
+  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
+  dependencies:
+    is-what "^4.1.8"
+
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+esbuild@^0.25.0:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.9.tgz#15ab8e39ae6cdc64c24ff8a2c0aef5b3fd9fa976"
+  integrity sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.25.9"
+    "@esbuild/android-arm" "0.25.9"
+    "@esbuild/android-arm64" "0.25.9"
+    "@esbuild/android-x64" "0.25.9"
+    "@esbuild/darwin-arm64" "0.25.9"
+    "@esbuild/darwin-x64" "0.25.9"
+    "@esbuild/freebsd-arm64" "0.25.9"
+    "@esbuild/freebsd-x64" "0.25.9"
+    "@esbuild/linux-arm" "0.25.9"
+    "@esbuild/linux-arm64" "0.25.9"
+    "@esbuild/linux-ia32" "0.25.9"
+    "@esbuild/linux-loong64" "0.25.9"
+    "@esbuild/linux-mips64el" "0.25.9"
+    "@esbuild/linux-ppc64" "0.25.9"
+    "@esbuild/linux-riscv64" "0.25.9"
+    "@esbuild/linux-s390x" "0.25.9"
+    "@esbuild/linux-x64" "0.25.9"
+    "@esbuild/netbsd-arm64" "0.25.9"
+    "@esbuild/netbsd-x64" "0.25.9"
+    "@esbuild/openbsd-arm64" "0.25.9"
+    "@esbuild/openbsd-x64" "0.25.9"
+    "@esbuild/openharmony-arm64" "0.25.9"
+    "@esbuild/sunos-x64" "0.25.9"
+    "@esbuild/win32-arm64" "0.25.9"
+    "@esbuild/win32-ia32" "0.25.9"
+    "@esbuild/win32-x64" "0.25.9"
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fdir@^6.4.4:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.5.0.tgz#ed2ab967a331ade62f18d077dae192684d50d350"
+  integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
+
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+hookable@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
+  integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
+
+is-what@^4.1.8:
+  version "4.1.16"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.16.tgz#1ad860a19da8b4895ad5495da3182ce2acdd7a6f"
+  integrity sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==
+
+magic-string@^0.30.17:
+  version "0.30.18"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.18.tgz#905bfbbc6aa5692703a93db26a9edcaa0007d2bb"
+  integrity sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
+nanoid@^3.3.11:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+perfect-debounce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz#9c2e8bc30b169cc984a58b7d5b28049839591d2a"
+  integrity sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
+  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
+
+pinia@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-3.0.3.tgz#f412019bdeb2f45e85927b432803190343e12d89"
+  integrity sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==
+  dependencies:
+    "@vue/devtools-api" "^7.7.2"
+
+postcss@^8.5.3, postcss@^8.5.6:
+  version "8.5.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
+  integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
+  dependencies:
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+rfdc@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
+  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
+
+rollup@^4.34.9:
+  version "4.50.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.50.0.tgz#6f237f598b7163ede33ce827af8534c929aaa186"
+  integrity sha512-/Zl4D8zPifNmyGzJS+3kVoyXeDeT/GrsJM94sACNg9RtUE0hrHa1bNPtRSrfHTMH5HjRzce6K7rlTh3Khiw+pw==
+  dependencies:
+    "@types/estree" "1.0.8"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.50.0"
+    "@rollup/rollup-android-arm64" "4.50.0"
+    "@rollup/rollup-darwin-arm64" "4.50.0"
+    "@rollup/rollup-darwin-x64" "4.50.0"
+    "@rollup/rollup-freebsd-arm64" "4.50.0"
+    "@rollup/rollup-freebsd-x64" "4.50.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.50.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.50.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.50.0"
+    "@rollup/rollup-linux-arm64-musl" "4.50.0"
+    "@rollup/rollup-linux-loongarch64-gnu" "4.50.0"
+    "@rollup/rollup-linux-ppc64-gnu" "4.50.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.50.0"
+    "@rollup/rollup-linux-riscv64-musl" "4.50.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.50.0"
+    "@rollup/rollup-linux-x64-gnu" "4.50.0"
+    "@rollup/rollup-linux-x64-musl" "4.50.0"
+    "@rollup/rollup-openharmony-arm64" "4.50.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.50.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.50.0"
+    "@rollup/rollup-win32-x64-msvc" "4.50.0"
+    fsevents "~2.3.2"
+
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+speakingurl@^14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/speakingurl/-/speakingurl-14.0.1.tgz#f37ec8ddc4ab98e9600c1c9ec324a8c48d772a53"
+  integrity sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==
+
+superjson@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-2.2.2.tgz#9d52bf0bf6b5751a3c3472f1292e714782ba3173"
+  integrity sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==
+  dependencies:
+    copy-anything "^3.0.2"
+
+tinyglobby@^0.2.13:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.14.tgz#5280b0cf3f972b050e74ae88406c0a6a58f4079d"
+  integrity sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==
+  dependencies:
+    fdir "^6.4.4"
+    picomatch "^4.0.2"
+
+vite@^6.2.0:
+  version "6.3.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-6.3.5.tgz#fec73879013c9c0128c8d284504c6d19410d12a3"
+  integrity sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==
+  dependencies:
+    esbuild "^0.25.0"
+    fdir "^6.4.4"
+    picomatch "^4.0.2"
+    postcss "^8.5.3"
+    rollup "^4.34.9"
+    tinyglobby "^0.2.13"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+vue-chartjs@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.3.2.tgz#c0f2009af6b08845af158ddee9d0a68d9dae631b"
+  integrity sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==
+
+vue-router@^4.2.5:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.1.tgz#47bffe2d3a5479d2886a9a244547a853aa0abf69"
+  integrity sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
+vue@^3.5.13:
+  version "3.5.20"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.20.tgz#855c3f4c0a1260abc894f729c3ffb6cb687d0d34"
+  integrity sha512-2sBz0x/wis5TkF1XZ2vH25zWq3G1bFEPOfkBcx2ikowmphoQsPH6X0V3mmPCXA2K1N/XGTnifVyDQP4GfDDeQw==
+  dependencies:
+    "@vue/compiler-dom" "3.5.20"
+    "@vue/compiler-sfc" "3.5.20"
+    "@vue/runtime-dom" "3.5.20"
+    "@vue/server-renderer" "3.5.20"
+    "@vue/shared" "3.5.20"