Add VM list to nodes page and remove whitespace
This commit is contained in:
Joshua Boniface
parent
187e46ee6d
commit
af00d1fe61
@ -46,42 +46,42 @@
|
||||
<div class="section-content">
|
||||
<div class="info-row">
|
||||
<!-- Card 1: Daemon State -->
|
||||
<ValueCard
|
||||
title="Daemon State"
|
||||
:value="selectedNodeData.daemon_state || 'Unknown'"
|
||||
<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'"
|
||||
<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'"
|
||||
<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'"
|
||||
<ValueCard
|
||||
title="PVC Version"
|
||||
:value="selectedNodeData.pvc_version || 'Unknown'"
|
||||
/>
|
||||
|
||||
<!-- Card 5: Kernel Version -->
|
||||
<ValueCard
|
||||
title="Kernel Version"
|
||||
:value="selectedNodeData.kernel || 'Unknown'"
|
||||
<ValueCard
|
||||
title="Kernel Version"
|
||||
:value="selectedNodeData.kernel || 'Unknown'"
|
||||
/>
|
||||
|
||||
<!-- Card 6: VM Count -->
|
||||
<ValueCard
|
||||
title="VM Count"
|
||||
:value="selectedNodeData.domains_count || 0"
|
||||
<ValueCard
|
||||
title="VM Count"
|
||||
:value="selectedNodeData.domains_count || 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,21 +169,21 @@
|
||||
<div class="section-content">
|
||||
<div class="resources-row-cpu">
|
||||
<!-- Card 1: Host CPUs -->
|
||||
<ValueCard
|
||||
title="Host CPUs"
|
||||
:value="selectedNodeData.cpu_count || 0"
|
||||
<ValueCard
|
||||
title="Host CPUs"
|
||||
:value="selectedNodeData.cpu_count || 0"
|
||||
/>
|
||||
|
||||
<!-- Card 2: Guest CPUs -->
|
||||
<ValueCard
|
||||
title="Guest CPUs"
|
||||
:value="selectedNodeData.vcpu?.allocated || 0"
|
||||
<ValueCard
|
||||
title="Guest CPUs"
|
||||
:value="selectedNodeData.vcpu?.allocated || 0"
|
||||
/>
|
||||
|
||||
<!-- Card 3: Load -->
|
||||
<ValueCard
|
||||
title="Load"
|
||||
:value="selectedNodeData.load || 0"
|
||||
<ValueCard
|
||||
title="Load"
|
||||
:value="selectedNodeData.load || 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -215,33 +215,33 @@
|
||||
<div class="section-content">
|
||||
<div class="resources-row-memory">
|
||||
<!-- Total Memory -->
|
||||
<ValueCard
|
||||
title="Total Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.total)"
|
||||
<ValueCard
|
||||
title="Total Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.total)"
|
||||
/>
|
||||
|
||||
<!-- Used Memory -->
|
||||
<ValueCard
|
||||
title="Used Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.used)"
|
||||
<ValueCard
|
||||
title="Used Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.used)"
|
||||
/>
|
||||
|
||||
<!-- Free Memory -->
|
||||
<ValueCard
|
||||
title="Free Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.free)"
|
||||
<ValueCard
|
||||
title="Free Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.free)"
|
||||
/>
|
||||
|
||||
<!-- Allocated Memory -->
|
||||
<ValueCard
|
||||
title="Allocated Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.allocated)"
|
||||
<ValueCard
|
||||
title="Allocated Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.allocated)"
|
||||
/>
|
||||
|
||||
<!-- Provisioned Memory -->
|
||||
<ValueCard
|
||||
title="Provisioned Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.provisioned)"
|
||||
<ValueCard
|
||||
title="Provisioned Memory"
|
||||
:value="formatMemory(selectedNodeData.memory?.provisioned)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,6 +252,60 @@
|
||||
</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>
|
||||
|
||||
<!-- No node selected message -->
|
||||
@ -314,7 +368,8 @@ const sections = ref({
|
||||
info: true,
|
||||
graphs: true,
|
||||
cpu: true,
|
||||
resources: true
|
||||
resources: true,
|
||||
vms: true
|
||||
});
|
||||
|
||||
// Toggle section visibility
|
||||
@ -493,7 +548,7 @@ const nodeAllocatedMemoryChartData = computed(() => {
|
||||
// Determine color for daemon state
|
||||
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';
|
||||
@ -503,7 +558,7 @@ const getDaemonStateColor = (state) => {
|
||||
// Determine color for coordinator state
|
||||
const getCoordinatorStateColor = (state) => {
|
||||
if (!state) return '';
|
||||
|
||||
|
||||
if (state === 'primary') return 'green';
|
||||
if (state === 'secondary') return 'blue';
|
||||
if (state === 'hypervisor') return 'gray';
|
||||
@ -513,12 +568,35 @@ const getCoordinatorStateColor = (state) => {
|
||||
// Determine color for domain state
|
||||
const getDomainStateColor = (state) => {
|
||||
if (!state) return '';
|
||||
|
||||
|
||||
if (state === 'ready') return 'green';
|
||||
if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
|
||||
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
|
||||
onMounted(() => {
|
||||
// Select the first node by default if available
|
||||
@ -720,7 +798,7 @@ onUnmounted(() => {
|
||||
.metrics-row {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.info-row {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@ -742,7 +820,7 @@ onUnmounted(() => {
|
||||
.metrics-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.info-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@ -761,9 +839,9 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.metrics-row,
|
||||
.metrics-row,
|
||||
.info-row,
|
||||
.graphs-row,
|
||||
.graphs-row,
|
||||
.resources-row-cpu,
|
||||
.resources-row-memory {
|
||||
grid-template-columns: 1fr;
|
||||
@ -922,4 +1000,83 @@ onUnmounted(() => {
|
||||
background: white;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user