parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: parallelvirtualcluster:18a32315ea1a476f050745291a40a249babd54b2
Branches Tags
parallelvirtualcluster:master
..
compare: parallelvirtualcluster:1c81b6cff9795aad49dede4029a59668d53d2483
Branches Tags
parallelvirtualcluster:master

No commits in common. "18a32315ea1a476f050745291a40a249babd54b2" and "1c81b6cff9795aad49dede4029a59668d53d2483" have entirely different histories.
18a32315ea ... 1c81b6cff9

6 changed files with 83 additions and 594 deletions
Show Stats Expand all files Collapse all files

11
pvc-vue/package-lock.json generated
View File

@ -10,8 +10,7 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-free": "^6.7.2",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"chart.js": "^4.4.1", "chart.js": "^4.4.8",
"chartjs-plugin-annotation": "^3.0.1",
"pinia": "^3.0.1", "pinia": "^3.0.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-chartjs": "^5.3.2" "vue-chartjs": "^5.3.2"
@ -984,14 +983,6 @@
"pnpm": ">=8" "pnpm": ">=8"
} }
}, },
"node_modules/chartjs-plugin-annotation": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
"integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
"peerDependencies": {
"chart.js": ">=4.0.0"
}
},
"node_modules/copy-anything": { "node_modules/copy-anything": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",

5
pvc-vue/package.json
View File

@ -11,11 +11,10 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-free": "^6.7.2",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"chart.js": "^4.4.1", "chart.js": "^4.4.8",
"pinia": "^3.0.1", "pinia": "^3.0.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-chartjs": "^5.3.2", "vue-chartjs": "^5.3.2"
"chartjs-plugin-annotation": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",

138
pvc-vue/src/App.vue
View File

@ -1,40 +1,22 @@
<template> <template>
<div class="d-flex"> <nav class="navbar navbar-dark bg-dark">
<!-- Sidebar --> <div class="container">
<div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }"> <span class="navbar-brand">PVC Cluster Dashboard</span>
<div class="sidebar-header"> <button class="btn btn-primary config-toggle" @click="toggleConfig">
<h5 class="text-white mb-0">PVC Dashboard</h5>
<button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
<i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
</button>
</div>
<div class="sidebar-content">
<!-- Future navigation items can go here -->
</div>
<div class="sidebar-footer">
<button class="btn btn-outline-light w-100" @click="toggleConfig">
<i class="fas fa-cog"></i> Configure <i class="fas fa-cog"></i> Configure
</button> </button>
</div> </div>
</div> </nav>
<!-- Main Content --> <div class="container mt-4">
<div class="main-content" :class="{ 'expanded': sidebarCollapsed }">
<div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]"> <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
{{ connectionStatusMessage }} {{ connectionStatusMessage }}
</div> </div>
<div class="content-grid">
<div class="overview-row"> <ClusterOverview :clusterData="clusterData" />
<ClusterOverview <MetricsCharts :metricsData="metricsHistory" />
:clusterData="clusterData"
:metricsHistory="metricsHistory.health"
/>
<NodeStatus :nodeData="nodeData" /> <NodeStatus :nodeData="nodeData" />
</div> </div>
<MetricsCharts :metricsData="metricsHistory" class="metrics-section" />
</div>
</div>
</div>
<ConfigPanel <ConfigPanel
v-model="configPanelOpen" v-model="configPanelOpen"
@ -68,12 +50,6 @@ const connectionStatusClass = ref('alert-warning');
let updateTimer = null; let updateTimer = null;
const sidebarCollapsed = ref(false);
const toggleSidebar = () => {
sidebarCollapsed.value = !sidebarCollapsed.value;
};
const toggleConfig = () => { const toggleConfig = () => {
configPanelOpen.value = !configPanelOpen.value; configPanelOpen.value = !configPanelOpen.value;
}; };
@ -122,9 +98,6 @@ const updateDashboard = async () => {
const status = await api.fetchStatus(); const status = await api.fetchStatus();
const nodes = await api.fetchNodes(); 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 // Update state with new objects instead of mutating
clusterData.value = { ...status }; clusterData.value = { ...status };
nodeData.value = [...nodes]; nodeData.value = [...nodes];
@ -170,96 +143,13 @@ onUnmounted(() => {
@import 'bootstrap/dist/css/bootstrap.min.css'; @import 'bootstrap/dist/css/bootstrap.min.css';
@import '@fortawesome/fontawesome-free/css/all.min.css'; @import '@fortawesome/fontawesome-free/css/all.min.css';
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
padding: 1rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .sidebar-header h5,
.sidebar.collapsed .sidebar-content,
.sidebar.collapsed .btn span {
display: none;
}
.sidebar-header {
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.collapse-btn {
opacity: 0.7;
transition: opacity 0.2s;
}
.collapse-btn:hover {
opacity: 1;
}
.sidebar-content {
flex-grow: 1;
}
.sidebar-footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.main-content {
margin-left: 250px;
padding: 0.5rem;
width: calc(100% - 250px);
min-height: 100vh;
transition: all 0.3s ease;
}
.main-content.expanded {
margin-left: 60px;
width: calc(100% - 60px);
}
.content-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.overview-row {
display: grid;
gap: 0.5rem;
grid-template-columns: 2fr 3fr;
}
.overview-row > * {
height: 100%;
min-height: 400px;
}
@media (max-width: 1200px) {
.overview-row {
grid-template-columns: 1fr;
}
}
.metric-card { .metric-card {
/* Remove transition and hover effect */ transition: all 0.3s ease;
}
.metric-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} }
.status-healthy { color: #28a745; } .status-healthy { color: #28a745; }
.status-warning { color: #ffc107; } .status-warning { color: #ffc107; }
.status-error { color: #dc3545; } .status-error { color: #dc3545; }

402
pvc-vue/src/components/ClusterOverview.vue
View File

@ -1,58 +1,28 @@
<template> <template>
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">Cluster Overview</h5> <h5 class="mb-0">Cluster Overview</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="overview-container"> <div class="row">
<div class="health-card"> <!-- Card 1: Cluster Health -->
<div class="col-md">
<div class="card metric-card">
<div class="card-body"> <div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6> <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
<div class="health-content-wrapper"> <h4 :class="['card-title', getHealthClass(clusterData.cluster_health?.health)]">
<div class="health-graph">
<div class="health-percentage">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
{{ clusterData.cluster_health?.health || 0 }}% {{ clusterData.cluster_health?.health || 0 }}%
</h4> </h4>
</div> <small class="text-muted">
<Line {{ clusterData.cluster_health?.messages?.join('<br>') || 'No issues' }}
:data="healthChartData" </small>
:options="healthChartOptions"
/>
</div>
<div class="health-messages">
<div class="messages-grid">
<template v-if="clusterData.cluster_health?.messages?.length">
<div
v-for="(msg, idx) in clusterData.cluster_health.messages"
: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 v-else class="health-message healthy">
<i class="fas fa-check-circle me-1"></i>
<span>No issues detected</span>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="metrics-row">
<!-- Card 2: PVC Version --> <!-- Card 2: PVC Version -->
<div class="metric-card"> <div class="col-md">
<div class="card metric-card">
<div class="card-body"> <div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">PVC Version</h6> <h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
<h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4> <h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
@ -61,9 +31,11 @@
</small> </small>
</div> </div>
</div> </div>
</div>
<!-- Card 3: Nodes --> <!-- Card 3: Nodes -->
<div class="metric-card"> <div class="col-md">
<div class="card metric-card">
<div class="card-body"> <div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Nodes</h6> <h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
<h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4> <h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
@ -72,9 +44,11 @@
</small> </small>
</div> </div>
</div> </div>
</div>
<!-- Card 4: VMs --> <!-- Card 4: VMs -->
<div class="metric-card"> <div class="col-md">
<div class="card metric-card">
<div class="card-body"> <div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">VMs</h6> <h6 class="card-subtitle mb-2 text-muted">VMs</h6>
<h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4> <h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
@ -90,9 +64,11 @@
</small> </small>
</div> </div>
</div> </div>
</div>
<!-- Card 5: Storage --> <!-- Card 5: Storage -->
<div class="metric-card"> <div class="col-md">
<div class="card metric-card">
<div class="card-body"> <div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Storage</h6> <h6 class="card-subtitle mb-2 text-muted">Storage</h6>
<div class="storage-metrics"> <div class="storage-metrics">
@ -111,44 +87,11 @@
</template> </template>
<script setup> <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';
// Register Chart.js components
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler,
annotationPlugin
);
const props = defineProps({ const props = defineProps({
clusterData: { clusterData: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}) default: () => ({})
},
metricsHistory: {
type: Object,
required: true,
default: () => ({ labels: [], data: [] })
} }
}); });
@ -157,268 +100,11 @@ const getHealthClass = (health) => {
if (health > 50) return 'status-warning'; if (health > 50) return 'status-warning';
return 'status-error'; return 'status-error';
}; };
const getHealthColors = (health) => {
if (health > 90) return { bg: 'rgba(40, 167, 69, 0.1)', border: 'rgba(40, 167, 69, 0.2)' }; // Green
if (health > 50) return { bg: 'rgba(255, 193, 7, 0.1)', border: 'rgba(255, 193, 7, 0.2)' }; // Yellow
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
};
const getDeltaClass = (delta) => {
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.metricsHistory.labels,
datasets: [{
data: props.metricsHistory.data,
fill: true,
segment: {
borderColor: (ctx) => {
const value = ctx.p1.parsed.y;
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 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) => {
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,
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
}
};
</script> </script>
<style scoped> <style scoped>
.overview-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
}
.health-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
}
.health-content-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: calc(100% - 2rem); /* Account for header */
width: 100%;
position: relative;
}
.health-graph {
position: relative;
flex-grow: 1;
min-height: 0; /* Allow shrinking */
display: flex;
align-items: center;
}
.health-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;
}
.health-title {
font-size: 2.5rem;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
line-height: 1;
}
.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%; /* Reduce maximum height */
overflow-y: auto;
}
.messages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.25rem;
}
.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: fit-content;
}
.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;
}
}
/* Custom scrollbar for the messages container */
.health-messages::-webkit-scrollbar {
width: 6px;
}
.health-messages::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.health-messages::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.health-messages::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.metrics-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.metric-card { .metric-card {
background: white; height: 100%;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
} }
.storage-metrics { .storage-metrics {
@ -426,48 +112,4 @@ const healthChartOptions = {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@media (max-width: 1400px) {
.metrics-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.metrics-row {
grid-template-columns: 1fr;
}
}
.card-body {
padding: 0.5rem;
}
.card-subtitle {
margin-bottom: 0.5rem !important;
}
.metric-card .card-body {
padding: 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 */
}
</style> </style>

68
pvc-vue/src/components/MetricsCharts.vue
View File

@ -1,12 +1,27 @@
<template> <template>
<div class="card metrics-card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">Resource Utilization</h5> <h5 class="mb-0">Resource Utilization</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="metrics-grid"> <div class="row">
<!-- Cluster Health Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Health</h6>
</div>
<div class="card-body">
<Line
:data="healthChartData"
:options="chartOptions"
/>
</div>
</div>
</div>
<!-- CPU Utilization Chart --> <!-- CPU Utilization Chart -->
<div class="metric-item"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h6 class="card-title mb-0">CPU</h6> <h6 class="card-title mb-0">CPU</h6>
@ -21,7 +36,7 @@
</div> </div>
<!-- Memory Utilization Chart --> <!-- Memory Utilization Chart -->
<div class="metric-item"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h6 class="card-title mb-0">Memory</h6> <h6 class="card-title mb-0">Memory</h6>
@ -36,7 +51,7 @@
</div> </div>
<!-- Storage Utilization Chart --> <!-- Storage Utilization Chart -->
<div class="metric-item"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h6 class="card-title mb-0">Storage</h6> <h6 class="card-title mb-0">Storage</h6>
@ -117,8 +132,7 @@ const chartOptions = {
tension: 0.2 tension: 0.2
}, },
point: { point: {
radius: 0, radius: 2
hoverRadius: 4
} }
}, },
plugins: { plugins: {
@ -173,46 +187,6 @@ const storageChartData = computed(() => ({
</script> </script>
<style scoped> <style scoped>
.metrics-card {
grid-column: 1 / -1; /* Make metrics card span full width */
}
.card-header {
padding: 0.5rem;
}
.card-body {
padding: 0.5rem;
}
.card-title {
margin-bottom: 0.5rem;
}
.metrics-grid {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(3, 1fr);
margin: 0; /* Remove any default margins */
}
.metric-item {
min-height: 250px;
padding: 0; /* Remove any default padding */
}
@media (max-width: 1400px) {
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.metrics-grid {
grid-template-columns: 1fr;
}
}
.card-header h6 { .card-header h6 {
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;

25
pvc-vue/src/components/NodeStatus.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">Node Overview</h5> <h5 class="mb-0">Node Status</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<template v-for="node in nodeData" :key="node.name"> <template v-for="node in nodeData" :key="node.name">
<div class="col-md-4 node-wrapper"> <div class="col-md-4 mb-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ node.name }}</h5> <h5 class="card-title">{{ node.name }}</h5>
@ -50,6 +50,8 @@ const getHealthClass = (health) => {
}; };
const formatMemory = (node) => { const formatMemory = (node) => {
console.log('Memory data for node:', node.name, node.memory);
if (!node.memory || typeof node.memory !== 'object') { if (!node.memory || typeof node.memory !== 'object') {
return { used: 'N/A', total: 'N/A', percent: 'N/A' }; return { used: 'N/A', total: 'N/A', percent: 'N/A' };
} }
@ -57,6 +59,7 @@ const formatMemory = (node) => {
// Convert MB to GB with 2 decimal places // Convert MB to GB with 2 decimal places
const toGB = (mb) => { const toGB = (mb) => {
if (typeof mb !== 'number' || isNaN(mb)) { if (typeof mb !== 'number' || isNaN(mb)) {
console.log('Invalid MB value:', mb);
return 'N/A'; return 'N/A';
} }
return (mb / 1024).toFixed(2); return (mb / 1024).toFixed(2);
@ -67,6 +70,8 @@ const formatMemory = (node) => {
const used = toGB(memoryData.used); const used = toGB(memoryData.used);
const total = toGB(memoryData.total); const total = toGB(memoryData.total);
console.log('Converted memory values:', { used, total });
let percent = 'N/A'; let percent = 'N/A';
if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) { if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) {
percent = Math.round((parseFloat(used) / parseFloat(total)) * 100); percent = Math.round((parseFloat(used) / parseFloat(total)) * 100);
@ -79,19 +84,7 @@ const formatMemory = (node) => {
<style scoped> <style scoped>
.card-title { .card-title {
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 0.5rem; margin-bottom: 0.75rem;
}
.card-body {
padding: 0.5rem;
}
.row {
margin: -0.25rem; /* Compensate for node-wrapper padding */
}
.node-wrapper {
padding: 0.25rem; /* Half of our standard gap to create 0.5rem between cards */
} }
.card-text { .card-text {