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

Refactor collapsable section into reusable component

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 01:11:42 -05:00
parent 14e11a4772
commit ac9428a41b
4 changed files with 463 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,269 +1,181 @@
<template>
<div class="overview-container">
<!-- Information Cards Section -->
<div class="section-container" :class="{ 'collapsed': !sections.info }">
<!-- Collapsed section indicator -->
<div v-if="!sections.info" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Cluster Information</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
<div class="metrics-row">
<!-- Card 1: PVC Version -->
<ValueCard
title="PVC Version"
:value="clusterData.pvc_version || 'Unknown'"
/>
<!-- Card 2: Primary Node -->
<ValueCard
title="Primary Node"
:value="clusterData.primary_node || 'N/A'"
/>
<!-- Card 3: Nodes -->
<ValueCard
title="Nodes"
:value="clusterData.nodes?.total || 0"
/>
<!-- Card 4: VMs -->
<ValueCard
title="VMs"
:value="clusterData.vms?.total || 0"
/>
<!-- Card 5: Networks -->
<ValueCard
title="Networks"
:value="clusterData.networks || 0"
/>
<!-- Card 6: OSDs -->
<ValueCard
title="OSDs"
:value="clusterData.osds?.total || 0"
/>
<!-- Card 7: Pools -->
<ValueCard
title="Pools"
:value="clusterData.pools || 0"
/>
<!-- Card 8: Volumes -->
<ValueCard
title="Volumes"
:value="clusterData.volumes || 0"
/>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.info" class="section-content-wrapper">
<div class="section-content">
<div class="metrics-row">
<!-- Card 1: PVC Version -->
<ValueCard
title="PVC Version"
:value="clusterData.pvc_version || 'Unknown'"
/>
<!-- Card 2: Primary Node -->
<ValueCard
title="Primary Node"
:value="clusterData.primary_node || 'N/A'"
/>
<!-- Card 3: Nodes -->
<ValueCard
title="Nodes"
:value="clusterData.nodes?.total || 0"
/>
<!-- Card 4: VMs -->
<ValueCard
title="VMs"
:value="clusterData.vms?.total || 0"
/>
<!-- Card 5: Networks -->
<ValueCard
title="Networks"
:value="clusterData.networks || 0"
/>
<!-- Card 6: OSDs -->
<ValueCard
title="OSDs"
:value="clusterData.osds?.total || 0"
/>
<!-- Card 7: Pools -->
<ValueCard
title="Pools"
:value="clusterData.pools || 0"
/>
<!-- Card 8: Volumes -->
<ValueCard
title="Volumes"
:value="clusterData.volumes || 0"
/>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- Utilization Graphs Section -->
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
<!-- Collapsed section indicator -->
<div v-if="!sections.graphs" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
<div class="graphs-row">
<!-- Health Chart -->
<HealthChart
title="Cluster Health"
:value="clusterHealth"
:chart-data="healthChartData"
:maintenance="isMaintenanceMode"
/>
<!-- CPU Chart -->
<CPUChart
title="CPU Utilization"
:value="cpuUtilization"
:chart-data="cpuChartData"
/>
<!-- Memory Chart -->
<MemoryChart
title="Memory Utilization"
:value="memoryUtilization"
:chart-data="memoryChartData"
/>
<!-- Storage Chart -->
<StorageChart
title="Storage Utilization"
:value="storageUtilization"
:chart-data="storageChartData"
/>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.graphs" class="section-content-wrapper">
<div class="section-content">
<div class="graphs-row">
<!-- Health Chart -->
<HealthChart
title="Cluster Health"
:value="clusterHealth"
:chart-data="healthChartData"
:maintenance="isMaintenanceMode"
/>
<!-- CPU Chart -->
<CPUChart
title="CPU Utilization"
:value="cpuUtilization"
:chart-data="cpuChartData"
/>
<!-- Memory Chart -->
<MemoryChart
title="Memory Utilization"
:value="memoryUtilization"
:chart-data="memoryChartData"
/>
<!-- Storage Chart -->
<StorageChart
title="Storage Utilization"
:value="storageUtilization"
:chart-data="storageChartData"
/>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- Health Messages Section -->
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
<!-- Collapsed section indicator -->
<div v-if="!sections.messages" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
<div class="section-content">
<!-- Health messages card -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('messages')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.messages" class="section-content-wrapper">
<div class="section-content">
<!-- 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="displayMessages.length">
<div
v-for="(msg, idx) in displayMessages"
:key="idx"
:class="[
'health-message',
getDeltaClass(msg.health_delta, msg),
]"
>
<div class="message-header">
<i class="fas" :class="getMessageIcon(msg)"></i>
<span class="message-id">{{ getMessageId(msg) }}</span>
<span v-if="showHealthDelta(msg)" class="health-delta">
(-{{ msg.health_delta }}%)
</span>
</div>
<div class="message-content">
{{ getMessageText(msg) }}
</div>
</div>
</template>
<div v-else class="health-message healthy">
<div class="card-body">
<div class="messages-list">
<template v-if="displayMessages.length">
<div
v-for="(msg, idx) in displayMessages"
:key="idx"
:class="[
'health-message',
getDeltaClass(msg.health_delta, msg),
]"
>
<div class="message-header">
<i class="fas fa-circle-check me-1"></i>
<span class="message-id">Cluster healthy</span>
<i class="fas" :class="getMessageIcon(msg)"></i>
<span class="message-id">{{ getMessageId(msg) }}</span>
<span v-if="showHealthDelta(msg)" class="health-delta">
(-{{ msg.health_delta }}%)
</span>
</div>
<div class="message-content">
Cluster is at full health with no faults
{{ getMessageText(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">Cluster healthy</span>
</div>
<div class="message-content">
Cluster is at full health with no faults
</div>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('messages')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- States Graphs Section -->
<div class="section-container" :class="{ 'collapsed': !sections.states }">
<!-- Collapsed section indicator -->
<div v-if="!sections.states" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">State Graphs</h6>
<CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
<div class="section-content">
<!-- States Graphs Row -->
<div class="states-graphs-row">
<!-- Node States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Node States</span>
</h6>
</div>
<div class="card-body">
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
</div>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('states')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.states" class="section-content-wrapper">
<div class="section-content">
<!-- States Graphs Row -->
<div class="states-graphs-row">
<!-- Node States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Node States</span>
</h6>
</div>
<div class="card-body">
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
</div>
</div>
<!-- VM States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VM States</span>
</h6>
</div>
<div class="card-body">
<Line :data="vmStatesChartData" :options="statesChartOptions" />
</div>
<!-- VM States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VM States</span>
</h6>
</div>
<div class="card-body">
<Line :data="vmStatesChartData" :options="statesChartOptions" />
</div>
</div>
<!-- OSD States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSD States</span>
</h6>
</div>
<div class="card-body">
<Line :data="osdStatesChartData" :options="statesChartOptions" />
</div>
<!-- OSD States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSD States</span>
</h6>
</div>
<div class="card-body">
<Line :data="osdStatesChartData" :options="statesChartOptions" />
</div>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('states')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
</div>
</template>
@ -287,6 +199,7 @@ import MemoryChart from './charts/MemoryChart.vue';
import StorageChart from './charts/StorageChart.vue';
import HealthChart from './charts/HealthChart.vue';
import ValueCard from './ValueCard.vue';
import CollapsibleSection from './CollapsibleSection.vue';
// Register Chart.js components
ChartJS.register(
@ -912,11 +825,6 @@ const sections = ref({
states: true
});
// Toggle section visibility
const toggleSection = (section) => {
sections.value[section] = !sections.value[section];
};
// Add a new function to determine if we should show the health delta
const showHealthDelta = (msg) => {
// Don't show delta for "No issues detected" or similar messages

140
pvc-vue/src/components/CollapsibleSection.vue Normal file
View File

@ -0,0 +1,140 @@
<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">
<h6 class="card-title mb-0 metric-label">{{ title }}</h6>
</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;
}
</style>

411
pvc-vue/src/components/NodeOverview.vue
View File

@ -25,286 +25,171 @@
<!-- Node Details -->
<div v-if="selectedNodeData" class="node-details">
<!-- Information Cards Section -->
<div class="section-container" :class="{ 'collapsed': !sections.info }">
<!-- Collapsed section indicator -->
<div v-if="!sections.info" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Node Information</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<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>
<!-- Toggle button for expanded section -->
<div v-show="sections.info" class="section-content-wrapper">
<div class="section-content">
<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>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- Utilization Graphs Section -->
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
<!-- Collapsed section indicator -->
<div v-if="!sections.graphs" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<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>
<!-- Toggle button for expanded section -->
<div v-show="sections.graphs" class="section-content-wrapper">
<div class="section-content">
<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>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- CPU Resources Section -->
<div class="section-container" :class="{ 'collapsed': !sections.cpu }">
<!-- Collapsed section indicator -->
<div v-if="!sections.cpu" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">CPU Resources</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('cpu')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.cpu" class="section-content-wrapper">
<div class="section-content">
<div class="resources-row-cpu">
<!-- Card 1: Host CPUs -->
<ValueCard
title="Host CPUs"
:value="selectedNodeData.cpu_count || 0"
/>
<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 2: Guest CPUs -->
<ValueCard
title="Guest CPUs"
:value="selectedNodeData.vcpu?.allocated || 0"
/>
<!-- Card 3: Load -->
<ValueCard
title="Load"
:value="selectedNodeData.load || 0"
/>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('cpu')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
<!-- Card 3: Load -->
<ValueCard
title="Load"
:value="selectedNodeData.load || 0"
/>
</div>
</div>
</CollapsibleSection>
<!-- Memory Resources Section -->
<div class="section-container" :class="{ 'collapsed': !sections.resources }">
<!-- Collapsed section indicator -->
<div v-if="!sections.resources" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Memory Resources</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('resources')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<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>
<!-- Toggle button for expanded section -->
<div v-show="sections.resources" class="section-content-wrapper">
<div class="section-content">
<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>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('resources')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
<!-- 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>
<CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
<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>
<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 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 class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('vms')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</CollapsibleSection>
</div>
<!-- No node selected message -->
@ -322,6 +207,7 @@ import MemoryChart from './charts/MemoryChart.vue';
import StorageChart from './charts/StorageChart.vue';
import HealthChart from './charts/HealthChart.vue';
import ValueCard from './ValueCard.vue';
import CollapsibleSection from './CollapsibleSection.vue';
// Move all the props, refs, computed properties, and functions from Nodes.vue
const props = defineProps({
@ -351,11 +237,6 @@ const sections = ref({
vms: true
});
// Toggle section visibility
const toggleSection = (section) => {
sections.value[section] = !sections.value[section];
};
// State for selected node and tab scrolling
const selectedNode = ref('');
const tabsContainer = ref(null);

43
pvc-vue/src/components/VMOverview.vue
View File

@ -110,7 +110,33 @@
<!-- VM Details -->
<div v-if="selectedVMData && !showVMList" class="vm-details">
<VMDetail :vm="selectedVMData" />
<!-- Information Section -->
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
<div class="info-row">
<!-- ... VM info cards ... -->
</div>
</CollapsibleSection>
<!-- Graphs Section -->
<CollapsibleSection title="Utilization Graphs" :initially-expanded="sections.graphs">
<div class="graphs-row">
<!-- ... VM graphs ... -->
</div>
</CollapsibleSection>
<!-- Resources Section -->
<CollapsibleSection title="Resources" :initially-expanded="sections.resources">
<div class="resources-row">
<!-- ... resource cards ... -->
</div>
</CollapsibleSection>
<!-- Network Section -->
<CollapsibleSection title="Network" :initially-expanded="sections.network">
<div class="network-row">
<!-- ... network info ... -->
</div>
</CollapsibleSection>
</div>
<!-- No VM Selected Message -->
@ -126,6 +152,7 @@
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import VMDetail from './VMDetail.vue';
import CollapsibleSection from './CollapsibleSection.vue';
const router = useRouter();
const route = useRoute();
@ -160,7 +187,7 @@ const appliedFilters = ref({
});
const selectedVMRef = ref(null);
// Section visibility state
// Section visibility state - simplified since expansion is handled by CollapsibleSection
const sections = ref({
info: true,
graphs: true,
@ -191,18 +218,6 @@ const toggleFilterMenu = () => {
showFilterMenu.value = !showFilterMenu.value;
};
// Toggle section visibility
const toggleSection = (section) => {
sections.value[section] = !sections.value[section];
};
// Clear search
const clearSearch = () => {
searchQuery.value = '';
searchActive.value = false;
filterVMs();
};
// Toggle a filter on/off
const toggleFilter = (type, value) => {
appliedFilters.value[type][value] = !appliedFilters.value[type][value];