diff --git a/pvc-vue/src/App.vue b/pvc-vue/src/App.vue index bd6cd05..d33596f 100644 --- a/pvc-vue/src/App.vue +++ b/pvc-vue/src/App.vue @@ -18,6 +18,10 @@ Nodes + + + VMs +
@@ -101,28 +105,28 @@ const updateMetricsHistory = (timestamp, status) => { const data = [...metricsHistory.value[metric].data, typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric]) ]; - + // Keep only last 180 points if (labels.length > 180) { labels.shift(); data.shift(); } - + metricsHistory.value[metric] = { labels, data }; }); - + // 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: [] }, @@ -131,7 +135,7 @@ const updateMetricsHistory = (timestamp, status) => { allocated: { labels: [], data: [] } }; } - + // Calculate node metrics const nodeMetrics = { health: node.health || 0, @@ -139,18 +143,18 @@ const updateMetricsHistory = (timestamp, status) => { 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 @@ -170,10 +174,10 @@ const updateDashboard = async () => { try { const status = await api.fetchStatus(); const nodes = await api.fetchNodes(); - + console.log('[API] Status Response:', status); console.log('[API] Nodes Response:', nodes); - + // Update state with new objects instead of mutating clusterData.value = { ...status }; nodeData.value = [...nodes]; diff --git a/pvc-vue/src/router/index.js b/pvc-vue/src/router/index.js index 3a4956e..29b2678 100644 --- a/pvc-vue/src/router/index.js +++ b/pvc-vue/src/router/index.js @@ -1,6 +1,7 @@ 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 = [ { @@ -12,6 +13,11 @@ const routes = [ path: '/nodes', name: 'Nodes', component: Nodes + }, + { + path: '/vms', + name: 'VMs', + component: VMs } ]; diff --git a/pvc-vue/src/stores/api.js b/pvc-vue/src/stores/api.js index 64d48f9..113a196 100644 --- a/pvc-vue/src/stores/api.js +++ b/pvc-vue/src/stores/api.js @@ -70,11 +70,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 }; }); diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue new file mode 100644 index 0000000..064a281 --- /dev/null +++ b/pvc-vue/src/views/VMs.vue @@ -0,0 +1,874 @@ + + + + + \ No newline at end of file