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

Add VM list to nodes page and remove whitespace

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-28 23:02:07 -05:00
parent 187e46ee6d
commit af00d1fe61
1 changed files with 207 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
pvc-vue/src/views/Nodes.vue
View File

@ -46,42 +46,42 @@
<div class="section-content"> <div class="section-content">
<div class="info-row"> <div class="info-row">
<!-- Card 1: Daemon State --> <!-- Card 1: Daemon State -->
<ValueCard <ValueCard
title="Daemon State" title="Daemon State"
:value="selectedNodeData.daemon_state || 'Unknown'" :value="selectedNodeData.daemon_state || 'Unknown'"
:bg-color="getDaemonStateColor(selectedNodeData.daemon_state)" :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
/> />
<!-- Card 2: Coordinator State --> <!-- Card 2: Coordinator State -->
<ValueCard <ValueCard
title="Coordinator State" title="Coordinator State"
:value="selectedNodeData.coordinator_state || 'Unknown'" :value="selectedNodeData.coordinator_state || 'Unknown'"
:bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)" :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
/> />
<!-- Card 3: Domain State --> <!-- Card 3: Domain State -->
<ValueCard <ValueCard
title="Domain State" title="Domain State"
:value="selectedNodeData.domain_state || 'Unknown'" :value="selectedNodeData.domain_state || 'Unknown'"
:bg-color="getDomainStateColor(selectedNodeData.domain_state)" :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
/> />
<!-- Card 4: PVC Version --> <!-- Card 4: PVC Version -->
<ValueCard <ValueCard
title="PVC Version" title="PVC Version"
:value="selectedNodeData.pvc_version || 'Unknown'" :value="selectedNodeData.pvc_version || 'Unknown'"
/> />
<!-- Card 5: Kernel Version --> <!-- Card 5: Kernel Version -->
<ValueCard <ValueCard
title="Kernel Version" title="Kernel Version"
:value="selectedNodeData.kernel || 'Unknown'" :value="selectedNodeData.kernel || 'Unknown'"
/> />
<!-- Card 6: VM Count --> <!-- Card 6: VM Count -->
<ValueCard <ValueCard
title="VM Count" title="VM Count"
:value="selectedNodeData.domains_count || 0" :value="selectedNodeData.domains_count || 0"
/> />
</div> </div>
</div> </div>
@ -169,21 +169,21 @@
<div class="section-content"> <div class="section-content">
<div class="resources-row-cpu"> <div class="resources-row-cpu">
<!-- Card 1: Host CPUs --> <!-- Card 1: Host CPUs -->
<ValueCard <ValueCard
title="Host CPUs" title="Host CPUs"
:value="selectedNodeData.cpu_count || 0" :value="selectedNodeData.cpu_count || 0"
/> />
<!-- Card 2: Guest CPUs --> <!-- Card 2: Guest CPUs -->
<ValueCard <ValueCard
title="Guest CPUs" title="Guest CPUs"
:value="selectedNodeData.vcpu?.allocated || 0" :value="selectedNodeData.vcpu?.allocated || 0"
/> />
<!-- Card 3: Load --> <!-- Card 3: Load -->
<ValueCard <ValueCard
title="Load" title="Load"
:value="selectedNodeData.load || 0" :value="selectedNodeData.load || 0"
/> />
</div> </div>
</div> </div>
@ -215,33 +215,33 @@
<div class="section-content"> <div class="section-content">
<div class="resources-row-memory"> <div class="resources-row-memory">
<!-- Total Memory --> <!-- Total Memory -->
<ValueCard <ValueCard
title="Total Memory" title="Total Memory"
:value="formatMemory(selectedNodeData.memory?.total)" :value="formatMemory(selectedNodeData.memory?.total)"
/> />
<!-- Used Memory --> <!-- Used Memory -->
<ValueCard <ValueCard
title="Used Memory" title="Used Memory"
:value="formatMemory(selectedNodeData.memory?.used)" :value="formatMemory(selectedNodeData.memory?.used)"
/> />
<!-- Free Memory --> <!-- Free Memory -->
<ValueCard <ValueCard
title="Free Memory" title="Free Memory"
:value="formatMemory(selectedNodeData.memory?.free)" :value="formatMemory(selectedNodeData.memory?.free)"
/> />
<!-- Allocated Memory --> <!-- Allocated Memory -->
<ValueCard <ValueCard
title="Allocated Memory" title="Allocated Memory"
:value="formatMemory(selectedNodeData.memory?.allocated)" :value="formatMemory(selectedNodeData.memory?.allocated)"
/> />
<!-- Provisioned Memory --> <!-- Provisioned Memory -->
<ValueCard <ValueCard
title="Provisioned Memory" title="Provisioned Memory"
:value="formatMemory(selectedNodeData.memory?.provisioned)" :value="formatMemory(selectedNodeData.memory?.provisioned)"
/> />
</div> </div>
</div> </div>
@ -252,6 +252,60 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Running VMs Section -->
<div class="section-container" :class="{ 'collapsed': !sections.vms }">
<!-- Collapsed section indicator -->
<div v-if="!sections.vms" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Running VMs</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('vms')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.vms" class="section-content-wrapper">
<div class="section-content">
<div class="vms-container">
<div class="vms-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Running VMs</span>
</h6>
</div>
<div class="card-body">
<div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
<p>No VMs running on this node</p>
</div>
<div v-else class="vm-list" :style="{
'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))`
}">
<div
v-for="vm in selectedNodeData.running_domains"
:key="vm"
class="vm-item"
@click="handleVmClick(vm)"
title="View VM details"
>
{{ vm }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('vms')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</div> </div>
<!-- No node selected message --> <!-- No node selected message -->
@ -314,7 +368,8 @@ const sections = ref({
info: true, info: true,
graphs: true, graphs: true,
cpu: true, cpu: true,
resources: true resources: true,
vms: true
}); });
// Toggle section visibility // Toggle section visibility
@ -493,7 +548,7 @@ const nodeAllocatedMemoryChartData = computed(() => {
// Determine color for daemon state // Determine color for daemon state
const getDaemonStateColor = (state) => { const getDaemonStateColor = (state) => {
if (!state) return ''; if (!state) return '';
if (state === 'run') return 'green'; if (state === 'run') return 'green';
if (['init', 'shutdown'].includes(state)) return 'yellow'; if (['init', 'shutdown'].includes(state)) return 'yellow';
if (['stop', 'dead', 'fenced'].includes(state)) return 'red'; if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
@ -503,7 +558,7 @@ const getDaemonStateColor = (state) => {
// Determine color for coordinator state // Determine color for coordinator state
const getCoordinatorStateColor = (state) => { const getCoordinatorStateColor = (state) => {
if (!state) return ''; if (!state) return '';
if (state === 'primary') return 'green'; if (state === 'primary') return 'green';
if (state === 'secondary') return 'blue'; if (state === 'secondary') return 'blue';
if (state === 'hypervisor') return 'gray'; if (state === 'hypervisor') return 'gray';
@ -513,12 +568,35 @@ const getCoordinatorStateColor = (state) => {
// Determine color for domain state // Determine color for domain state
const getDomainStateColor = (state) => { const getDomainStateColor = (state) => {
if (!state) return ''; if (!state) return '';
if (state === 'ready') return 'green'; if (state === 'ready') return 'green';
if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue'; if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
return 'gray'; return 'gray';
}; };
// Handle VM click (placeholder until VMs page is implemented)
const handleVmClick = (vmName) => {
console.log(`VM clicked: ${vmName}`);
// You can show a toast notification or modal here
alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
};
// Calculate the minimum width for VM items based on the longest VM name
const calculateVmItemMinWidth = computed(() => {
if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
return 100; // Default minimum width
}
// Find the longest VM name
const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
return current.length > longest.length ? current : longest;
}, '');
// Calculate width based on character count (approx 8px per character plus padding)
const minWidth = Math.max(100, longestVmName.length * 8 + 32);
return minWidth;
});
// Initialize the component // Initialize the component
onMounted(() => { onMounted(() => {
// Select the first node by default if available // Select the first node by default if available
@ -720,7 +798,7 @@ onUnmounted(() => {
.metrics-row { .metrics-row {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.info-row { .info-row {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@ -742,7 +820,7 @@ onUnmounted(() => {
.metrics-row { .metrics-row {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.info-row { .info-row {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -761,9 +839,9 @@ onUnmounted(() => {
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.metrics-row, .metrics-row,
.info-row, .info-row,
.graphs-row, .graphs-row,
.resources-row-cpu, .resources-row-cpu,
.resources-row-memory { .resources-row-memory {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -922,4 +1000,83 @@ onUnmounted(() => {
background: white; background: white;
border: none; border: none;
} }
/* Running VMs section styles */
.vms-container {
width: 100%;
}
.vms-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.vms-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;
}
.vms-card .card-body {
flex: 1;
padding: 0.5rem;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
overflow: visible;
}
.vm-count {
font-size: 0.8rem;
color: #6c757d;
font-weight: normal;
margin-left: 0.5rem;
}
.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%;
}
.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;
}
.vm-item:hover {
background-color: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
}
</style> </style>