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

Compare commits

base: parallelvirtualcluster:804f04911176f016bd691c7dd2b3efa343151f0a
Branches Tags
parallelvirtualcluster:master
..
compare: parallelvirtualcluster:14e11a4772ffeaf5caf7083509cd38de9fffe658
Branches Tags
parallelvirtualcluster:master

No commits in common. "804f04911176f016bd691c7dd2b3efa343151f0a" and "14e11a4772ffeaf5caf7083509cd38de9fffe658" have entirely different histories.
804f049111 ... 14e11a4772

23 changed files with 1721 additions and 2000 deletions
Show Stats Expand all files Collapse all files

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

@ -27,7 +27,7 @@
<!-- Refresh interval display with tooltip -->
<div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
<i class="fas fa-sync-alt"></i>
<span class="refresh-text ms-2">{{ api.config.updateInterval }}s</span>
<span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
</div>
<!-- Collapse/Expand button with tooltip -->
@ -71,7 +71,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import ConfigPanel from './components/general/ConfigPanel.vue';
import ConfigPanel from './components/ConfigPanel.vue';
import { useApiStore } from './stores/api';
const api = useApiStore();
@ -218,22 +218,10 @@ const updateDashboard = async () => {
}
try {
console.log(`${new Date().toISOString()} Starting API calls`);
// Ensure all endpoints are called together in a single Promise.all
const [status, nodes, vms] = await Promise.all([
api.fetchStatus().then(res => {
console.log(`${new Date().toISOString()} Status API call complete`);
return res;
}),
api.fetchNodes().then(res => {
console.log(`${new Date().toISOString()} Nodes API call complete`);
return res;
}),
api.fetchVMs().then(res => {
console.log(`${new Date().toISOString()} VMs API call complete`);
return res;
})
api.fetchStatus(),
api.fetchNodes(),
api.fetchVMs()
]);
console.log('[API] Status Response:', status);
@ -262,8 +250,7 @@ const restartDashboard = () => {
clearInterval(updateTimer);
}
updateDashboard();
const intervalMs = api.config.updateInterval * 1000;
updateTimer = setInterval(updateDashboard, intervalMs);
updateTimer = setInterval(updateDashboard, api.config.updateInterval);
};
onMounted(() => {

398
pvc-vue/src/components/pages/overview/ClusterOverview.vue → pvc-vue/src/components/ClusterOverview.vue
View File

@ -1,181 +1,269 @@
<template>
<div class="overview-container">
<!-- Information Cards Section -->
<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 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>
</div>
</CollapsibleSection>
<!-- 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>
<!-- Utilization Graphs Section -->
<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 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>
</div>
</CollapsibleSection>
<!-- 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>
<!-- Health Messages Section -->
<CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
<div class="section-content">
<!-- Health messages card -->
<div class="metric-card">
<div class="card-header">
<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">
<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>
<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="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>
<i class="fas fa-circle-check me-1"></i>
<span class="message-id">Cluster healthy</span>
</div>
<div class="message-content">
{{ getMessageText(msg) }}
Cluster is at full health with no faults
</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>
</CollapsibleSection>
</div>
<!-- States Graphs Section -->
<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 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>
</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>
<!-- 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>
<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" />
<!-- 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>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('states')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</CollapsibleSection>
</div>
</div>
</template>
@ -194,12 +282,11 @@ import {
Filler
} from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import CPUChart from '../../charts/CPUChart.vue';
import MemoryChart from '../../charts/MemoryChart.vue';
import StorageChart from '../../charts/StorageChart.vue';
import HealthChart from '../../charts/HealthChart.vue';
import ValueCard from '../../general/ValueCard.vue';
import CollapsibleSection from '../../general/CollapsibleSection.vue';
import CPUChart from './charts/CPUChart.vue';
import MemoryChart from './charts/MemoryChart.vue';
import StorageChart from './charts/StorageChart.vue';
import HealthChart from './charts/HealthChart.vue';
import ValueCard from './ValueCard.vue';
// Register Chart.js components
ChartJS.register(
@ -825,6 +912,11 @@ 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

18
pvc-vue/src/components/general/ConfigPanel.vue → pvc-vue/src/components/ConfigPanel.vue
View File

@ -42,13 +42,9 @@
class="form-control"
id="updateInterval"
v-model.number="formData.updateInterval"
min="5"
max="300"
required
min="1"
max="3600"
>
<div class="form-text">
Enter value in seconds (5-300, default: 15)
</div>
</div>
<div class="d-grid gap-2">
@ -77,20 +73,14 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'save']);
// Initialize form data with raw values from config
const formData = ref({
apiUri: props.config.apiUri || '',
apiKey: props.config.apiKey || '',
updateInterval: props.config.updateInterval || 15 // Default to 15 seconds
updateInterval: props.config.updateInterval / 1000
});
const saveConfig = () => {
// Pass the raw values to parent
emit('save', {
apiUri: formData.value.apiUri,
apiKey: formData.value.apiKey,
updateInterval: formData.value.updateInterval // Pass seconds directly
});
emit('save', { ...formData.value });
};
const closePanel = () => {

1
pvc-vue/src/components/charts/MetricsCharts.vue → pvc-vue/src/components/MetricsCharts.vue
View File

@ -82,7 +82,6 @@ import {
Tooltip,
Legend
} from 'chart.js';
import ValueCard from '../general/ValueCard.vue';
// Register Chart.js components
ChartJS.register(

461
pvc-vue/src/components/pages/nodes/NodeOverview.vue → pvc-vue/src/components/NodeOverview.vue
View File

@ -1,179 +1,310 @@
<template>
<div class="overview-container">
<NodeSelectBar
v-model="selectedNode"
:nodes="availableNodes"
@select="handleNodeSelect"
/>
<!-- Node Tabs -->
<div class="node-tabs-wrapper">
<div class="node-tabs" ref="tabsContainer">
<button
v-for="node in nodeData"
:key="node.name"
class="node-tab"
:class="{ 'active': selectedNode === node.name }"
@click="selectNode(node.name)"
>
{{ node.name }}
</button>
</div>
<!-- Tab scroll buttons -->
<button class="tab-scroll-button left" @click="scrollTabs('left')" v-show="showLeftScroll">
<i class="fas fa-chevron-left"></i>
</button>
<button class="tab-scroll-button right" @click="scrollTabs('right')" v-show="showRightScroll">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- Node Details -->
<div v-if="selectedNodeData" class="node-details">
<!-- Information Cards Section -->
<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 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>
</div>
</CollapsibleSection>
<!-- 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>
<!-- Utilization Graphs Section -->
<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 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>
</div>
</CollapsibleSection>
<!-- 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>
<!-- CPU Resources Section -->
<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 3: Load -->
<ValueCard
title="Load"
:value="selectedNodeData.load || 0"
/>
<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>
</CollapsibleSection>
<!-- 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"
/>
<!-- 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>
</div>
</div>
<!-- Memory Resources Section -->
<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 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>
</div>
</CollapsibleSection>
<!-- 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>
<!-- Running VMs Section -->
<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 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 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 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>
</CollapsibleSection>
</div>
</div>
<!-- No node selected message -->
@ -186,13 +317,11 @@
<script setup>
// Import all the same components and functions from the original Nodes.vue
import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
import CPUChart from '../../charts/CPUChart.vue';
import MemoryChart from '../../charts/MemoryChart.vue';
import StorageChart from '../../charts/StorageChart.vue';
import HealthChart from '../../charts/HealthChart.vue';
import ValueCard from '../../general/ValueCard.vue';
import CollapsibleSection from '../../general/CollapsibleSection.vue';
import NodeSelectBar from '../../general/NodeSelectBar.vue';
import CPUChart from './charts/CPUChart.vue';
import MemoryChart from './charts/MemoryChart.vue';
import StorageChart from './charts/StorageChart.vue';
import HealthChart from './charts/HealthChart.vue';
import ValueCard from './ValueCard.vue';
// Move all the props, refs, computed properties, and functions from Nodes.vue
const props = defineProps({
@ -222,6 +351,11 @@ 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);
@ -479,15 +613,6 @@ watch(() => props.nodeData, () => {
onUnmounted(() => {
window.removeEventListener('resize', checkScrollButtons);
});
const availableNodes = computed(() => {
return props.nodeData.map(node => node.name).sort();
});
const handleNodeSelect = (node) => {
selectedNode.value = node;
// Any other node selection handling logic
};
</script>
<style scoped>

1
pvc-vue/src/components/pages/nodes/NodeStatus.vue.bak → pvc-vue/src/components/NodeStatus.vue
View File

@ -38,7 +38,6 @@
<script setup>
import { ref } from 'vue';
import ValueCard from '../../general/ValueCard.vue';
const props = defineProps({
nodeData: {

0
pvc-vue/src/components/general/PageTitle.vue → pvc-vue/src/components/PageTitle.vue
View File

318
pvc-vue/src/components/VMDetail.vue Normal file
View File

@ -0,0 +1,318 @@
<template>
<div class="vm-detail">
<!-- Basic Info Section -->
<div class="section-container" :class="{ 'collapsed': !sections.info }">
<!-- Only show header when collapsed -->
<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">VM Information</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Content when expanded -->
<div v-show="sections.info" class="section-content-wrapper">
<div class="section-content">
<div class="info-cards">
<ValueCard title="Current State" :value="vm.state" :status="getStateColor(vm.state)" />
<ValueCard title="Virtual CPUs" :value="vm.vcpu" />
<ValueCard title="Memory (MB)" :value="vm.memory" />
<ValueCard title="Host Node" :value="vm.node" />
<ValueCard title="Migration Status" :value="vm.migrated || 'No'" />
</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>
<!-- Networks Section -->
<template v-if="vm.networks && vm.networks.length > 0">
<div v-for="network in vm.networks" :key="network.vni" class="section-container" :class="{ 'collapsed': !sections[`network_${network.vni}`] }">
<!-- Only show header when collapsed -->
<div v-if="!sections[`network_${network.vni}`]" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Network Interface {{ network.vni }}</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Content when expanded -->
<div v-show="sections[`network_${network.vni}`]" class="section-content-wrapper">
<div class="section-content">
<div class="info-cards">
<ValueCard title="Interface Type" :value="network.type" />
<ValueCard title="MAC Address" :value="network.mac" />
<ValueCard title="Network Model" :value="network.model" />
<ValueCard title="Network Source" :value="network.source" />
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</template>
<!-- Disks Section -->
<template v-if="vm.disks && vm.disks.length > 0">
<div v-for="disk in vm.disks" :key="disk.dev" class="section-container" :class="{ 'collapsed': !sections[`disk_${disk.dev}`] }">
<!-- Only show header when collapsed -->
<div v-if="!sections[`disk_${disk.dev}`]" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Disk {{ disk.dev }}</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Content when expanded -->
<div v-show="sections[`disk_${disk.dev}`]" class="section-content-wrapper">
<div class="section-content">
<div class="info-cards">
<ValueCard title="Storage Type" :value="disk.type" />
<ValueCard title="Storage Pool" :value="getDiskPool(disk.name)" />
<ValueCard title="Volume Name" :value="getDiskVolume(disk.name)" />
<ValueCard title="Bus Interface" :value="disk.bus" />
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</template>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import ValueCard from './ValueCard.vue';
const props = defineProps({
vm: {
type: Object,
required: true
}
});
// Dynamic sections state
const sections = ref({
info: true
});
// Initialize sections for networks and disks
onMounted(() => {
if (props.vm.networks) {
props.vm.networks.forEach(network => {
sections.value[`network_${network.vni}`] = true;
});
}
if (props.vm.disks) {
props.vm.disks.forEach(disk => {
sections.value[`disk_${disk.dev}`] = true;
});
}
});
const toggleSection = (section) => {
sections.value[section] = !sections.value[section];
};
const getStateColor = (state) => {
if (!state) return '';
switch(state.toLowerCase()) {
case 'start':
return 'success';
case 'migrate':
case 'unmigrate':
case 'disable':
case 'provision':
return 'info';
case 'shutdown':
case 'restart':
return 'warning';
case 'stop':
return 'danger';
case 'mirror':
return 'purple';
default:
return '';
}
};
const getDiskPool = (name) => {
return name ? name.split('/')[0] : '';
};
const getDiskVolume = (name) => {
return name ? name.split('/')[1] : '';
};
</script>
<style scoped>
.vm-detail {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
/* Section styling - match Overview/Node pages exactly */
.section-container {
position: relative;
}
.section-content-wrapper {
display: flex;
position: relative;
}
.section-content {
flex: 1;
min-width: 0;
padding-right: 40px;
}
/* Toggle button styling */
.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;
}
/* Collapsed section header */
.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;
}
/* Card grid layout */
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.5rem;
width: 100%;
}
/* Metric card styles */
:deep(.metric-card) {
min-width: 180px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
height: 100%;
display: flex;
flex-direction: column;
}
:deep(.metric-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;
}
:deep(.card-header h6) {
font-size: 0.95rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}
:deep(.metric-card .card-body) {
flex: 1;
padding: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
:deep(.metric-card .metric-value) {
font-size: 1.25rem;
font-weight: bold;
color: #333;
line-height: 1;
margin: 0;
text-align: center;
white-space: nowrap;
min-width: fit-content;
}
.metric-label {
color: #495057;
font-weight: 600;
}
</style>

842
pvc-vue/src/components/VMOverview.vue Normal file
View File

@ -0,0 +1,842 @@
<template>
<!-- VM Selector Controls -->
<div class="vm-controls-container">
<div class="controls-row">
<button
class="btn btn-outline-secondary list-toggle-btn"
@click="toggleVMList"
:class="{ 'active': showVMList }"
>
<i class="fas fa-list"></i> List VMs
</button>
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input
type="text"
placeholder="Search VMs..."
:value="showVMList ? searchQuery : (selectedVMData?.name || '')"
@input="handleSearch"
@focus="handleSearchFocus"
@blur="handleSearchBlur"
class="form-control search-input"
>
<button
v-if="searchQuery && showVMList"
class="btn-clear"
@click="clearSearch"
>
<i class="fas fa-times"></i>
</button>
</div>
<div class="filter-dropdown">
<button
class="btn btn-outline-secondary dropdown-toggle"
:disabled="!showVMList"
@click="toggleFilterMenu"
>
<i class="fas fa-filter"></i> Filters
<span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
</button>
<div class="filter-menu" v-show="showFilterMenu">
<div class="filter-section">
<h6>Status</h6>
<div class="filter-options-dropdown">
<div class="filter-pills">
<button
v-for="state in availableStates"
:key="state"
class="filter-pill"
:class="{ 'active': appliedFilters.states[state] }"
@click="toggleFilter('states', state)"
>
{{ state }}
</button>
</div>
</div>
</div>
<div class="filter-section">
<h6>Node</h6>
<div class="filter-options-dropdown">
<div class="filter-pills">
<button
v-for="node in availableNodes"
:key="node"
class="filter-pill"
:class="{ 'active': appliedFilters.nodes[node] }"
@click="toggleFilter('nodes', node)"
>
{{ node }}
</button>
</div>
</div>
</div>
<div class="filter-actions">
<button class="btn btn-sm btn-outline-secondary" @click="resetFilters">Reset All</button>
<button class="btn btn-sm btn-primary" @click="toggleFilterMenu">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- VM List (Full Page) -->
<div v-if="showVMList" class="vm-list-fullpage">
<div v-if="filteredVMs.length === 0" class="no-vms-message">
<p>No VMs match your search criteria</p>
</div>
<div v-else class="vm-list">
<button
v-for="vm in filteredVMs"
:key="vm.name"
class="vm-list-item"
:class="{ 'active': selectedVM === vm.name }"
@click="selectVM(vm.name)"
:ref="el => { if (vm.name === selectedVM) selectedVMRef = el; }"
>
<div class="vm-item-content">
<div class="vm-name">{{ vm.name }}</div>
<div class="vm-status" :class="getStatusClass(vm.state)">
<i class="fas fa-circle status-indicator"></i>
<span>{{ vm.state }}</span>
</div>
</div>
</button>
</div>
</div>
<!-- VM Details -->
<div v-if="selectedVMData && !showVMList" class="vm-details">
<VMDetail :vm="selectedVMData" />
</div>
<!-- No VM Selected Message -->
<div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Please select a VM from the list to view its details
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import VMDetail from './VMDetail.vue';
const router = useRouter();
const route = useRoute();
const props = defineProps({
vmData: {
type: Array,
required: true,
default: () => []
},
metricsData: {
type: Object,
required: true,
default: () => ({})
},
clusterData: {
type: Object,
required: true,
default: () => ({})
}
});
// State
const selectedVM = ref('');
const searchQuery = ref('');
const showVMList = ref(true);
const showFilterMenu = ref(false);
const searchActive = ref(false);
const appliedFilters = ref({
states: {},
nodes: {}
});
const selectedVMRef = ref(null);
// Section visibility state
const sections = ref({
info: true,
graphs: true,
resources: true,
network: true
});
// Toggle VM list visibility
const toggleVMList = () => {
if (showVMList.value) {
showVMList.value = false;
return;
}
showVMList.value = true;
searchActive.value = false;
// Scroll to selected VM after the list is shown
if (selectedVM.value) {
nextTick(() => {
scrollToSelectedVM();
});
}
};
// Toggle filter menu
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];
searchActive.value = true;
filterVMs();
};
// Reset all filters
const resetFilters = () => {
Object.keys(appliedFilters.value.states).forEach(state => {
appliedFilters.value.states[state] = false;
});
Object.keys(appliedFilters.value.nodes).forEach(node => {
appliedFilters.value.nodes[node] = false;
});
searchActive.value = false;
filterVMs();
};
// Count active filters
const activeFiltersCount = computed(() => {
let count = 0;
Object.values(appliedFilters.value.states).forEach(isActive => {
if (isActive) count++;
});
Object.values(appliedFilters.value.nodes).forEach(isActive => {
if (isActive) count++;
});
return count;
});
// Get available states from VM data
const availableStates = computed(() => {
const states = new Set();
props.vmData.forEach(vm => {
if (vm.state) states.add(vm.state);
});
// Get all states as an array
const statesArray = Array.from(states);
// Remove 'start' if it exists
const startIndex = statesArray.indexOf('start');
if (startIndex !== -1) {
statesArray.splice(startIndex, 1);
}
// Sort the remaining states
statesArray.sort();
// Add 'start' at the beginning if it was present
if (startIndex !== -1) {
statesArray.unshift('start');
}
return statesArray;
});
// Get available nodes from VM data
const availableNodes = computed(() => {
const nodes = new Set();
props.vmData.forEach(vm => {
if (vm.node) nodes.add(vm.node);
});
return Array.from(nodes).sort();
});
// Filter VMs based on search query and active filter
const filteredVMs = computed(() => {
console.log('Computing filteredVMs with:', {
vmData: props.vmData,
searchActive: searchActive.value,
searchQuery: searchQuery.value,
appliedFilters: appliedFilters.value
});
if (!props.vmData) return [];
let filtered = [...props.vmData];
if (searchActive.value && searchQuery.value) {
const query = searchQuery.value.toLowerCase();
filtered = filtered.filter(vm =>
vm.name.toLowerCase().includes(query)
);
}
if (searchActive.value) {
// Apply state filters if any are active
const activeStates = Object.entries(appliedFilters.value.states)
.filter(([_, isActive]) => isActive)
.map(([state]) => state);
if (activeStates.length > 0) {
filtered = filtered.filter(vm => activeStates.includes(vm.state));
}
// Apply node filters if any are active
const activeNodes = Object.entries(appliedFilters.value.nodes)
.filter(([_, isActive]) => isActive)
.map(([node]) => node);
if (activeNodes.length > 0) {
filtered = filtered.filter(vm => activeNodes.includes(vm.node));
}
}
console.log('Filtered VMs result:', filtered);
return filtered;
});
// Get the selected VM data
const selectedVMData = computed(() => {
if (!selectedVM.value || !props.vmData) return null;
return props.vmData.find(vm => vm.name === selectedVM.value) || null;
});
// Get status class based on VM state
const getStatusClass = (state) => {
if (!state) return '';
switch(state.toLowerCase()) {
case 'start':
return 'status-running';
case 'stop':
return 'status-stopped';
case 'disable':
return 'status-disabled';
default:
return '';
}
};
// Handle search input
const handleSearch = (event) => {
searchQuery.value = event.target.value;
searchActive.value = true;
filterVMs();
};
// Handle search focus
const handleSearchFocus = () => {
// Show VM list when search is focused
if (!showVMList.value) {
showVMList.value = true;
// Scroll to selected VM after the list is shown
if (selectedVM.value) {
nextTick(() => {
scrollToSelectedVM();
});
}
}
searchActive.value = true;
};
// Handle search blur
const handleSearchBlur = (event) => {
// Don't close the list if clicking on another element within the list
const vmList = document.querySelector('.vm-list-fullpage');
if (vmList && vmList.contains(event.relatedTarget)) {
return;
}
// If a VM is selected and user clicks away from search, close the list
if (selectedVM.value && !event.relatedTarget) {
// Use setTimeout to allow click events to process first
setTimeout(() => {
// Only close if we're not clicking on a VM in the list
if (!document.activeElement || document.activeElement.tagName !== 'BUTTON' ||
!document.activeElement.classList.contains('vm-list-item')) {
showVMList.value = false;
}
}, 100);
}
};
// Filter VMs based on current search and filters
const filterVMs = () => {
// This is handled by the computed property
// But we need this function for event handlers
};
// Select a VM
const selectVM = (vmName) => {
selectedVM.value = vmName;
router.push({ query: { vm: vmName } });
showVMList.value = false;
};
// Scroll to the selected VM in the list
const scrollToSelectedVM = () => {
if (selectedVMRef.value) {
// Get the VM list container
const vmList = document.querySelector('.vm-list');
if (!vmList) return;
// Calculate the scroll position
const vmElement = selectedVMRef.value;
const vmPosition = vmElement.offsetTop;
const listHeight = vmList.clientHeight;
const vmHeight = vmElement.clientHeight;
// Scroll to position the selected VM in the middle of the list if possible
const scrollPosition = vmPosition - (listHeight / 2) + (vmHeight / 2);
vmList.scrollTop = Math.max(0, scrollPosition);
}
};
// Close filter menu when clicking outside
const closeFilterMenuOnClickOutside = (event) => {
const filterDropdown = document.querySelector('.filter-dropdown');
if (filterDropdown && !filterDropdown.contains(event.target)) {
showFilterMenu.value = false;
}
};
// Handle clicks outside the VM list area
const handleClickOutside = (event) => {
// Only handle this if a VM is selected and the list is showing
if (selectedVM.value && showVMList.value) {
const vmControls = document.querySelector('.vm-controls-container');
const vmList = document.querySelector('.vm-list-fullpage');
// If click is outside both the controls and list, close the list
if ((!vmControls || !vmControls.contains(event.target)) &&
(!vmList || !vmList.contains(event.target))) {
showVMList.value = false;
}
}
};
// Lifecycle hooks
onMounted(() => {
document.addEventListener('click', closeFilterMenuOnClickOutside);
document.addEventListener('click', handleClickOutside);
// Initialize with URL state if present
const vmFromQuery = route.query.vm;
if (vmFromQuery && props.vmData.some(vm => vm.name === vmFromQuery)) {
selectVM(vmFromQuery);
showVMList.value = false;
} else if (props.vmData.length > 0) {
showVMList.value = true;
selectedVM.value = '';
}
// Initialize filters with available states and nodes
availableStates.value.forEach(state => {
appliedFilters.value.states[state] = false;
});
availableNodes.value.forEach(node => {
appliedFilters.value.nodes[node] = false;
});
});
onUnmounted(() => {
document.removeEventListener('click', closeFilterMenuOnClickOutside);
document.removeEventListener('click', handleClickOutside);
});
// Watch for route changes to update selected VM
watch(() => route.query.vm, (newVm) => {
if (newVm && props.vmData.some(vm => vm.name === newVm)) {
selectVM(newVm);
// Hide VM list when navigating directly to a VM
showVMList.value = false;
} else if (props.vmData.length > 0) {
// If no VM specified in URL, show list and clear selection
selectedVM.value = '';
showVMList.value = true;
}
});
// Watch for changes in the VM list visibility
watch(() => showVMList.value, (isVisible) => {
if (isVisible && selectedVM.value) {
// Scroll to selected VM when the list becomes visible
nextTick(() => {
scrollToSelectedVM();
});
}
});
// Add console logging to debug data flow
watch(() => props.vmData, (newData) => {
console.log('VMOverview received vmData:', newData);
}, { immediate: true });
</script>
<style scoped>
/* ... continuing from where we left off ... */
.collapsed-section-header .card-title {
margin: 0;
color: #495057;
font-size: 0.95rem;
font-weight: 600;
}
.metric-label {
color: #495057;
font-weight: 600;
}
/* Responsive Styles */
@media (max-width: 768px) {
.search-filter-container {
flex-direction: column;
align-items: stretch;
}
.search-box {
width: 100%;
}
.filter-buttons {
width: 100%;
justify-content: space-between;
}
}
/* Grid layouts for details sections */
.info-row,
.graphs-row,
.resources-row,
.network-row {
display: grid;
gap: 0.5rem;
width: 100%;
}
@media (min-width: 1201px) {
.info-row {
grid-template-columns: repeat(3, 1fr);
}
.graphs-row {
grid-template-columns: repeat(4, 1fr);
}
.resources-row {
grid-template-columns: repeat(4, 1fr);
}
.network-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 801px) and (max-width: 1200px) {
.info-row {
grid-template-columns: repeat(2, 1fr);
}
.graphs-row {
grid-template-columns: repeat(2, 1fr);
}
.resources-row {
grid-template-columns: repeat(2, 1fr);
}
.network-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 800px) {
.info-row,
.graphs-row,
.resources-row,
.network-row {
grid-template-columns: 1fr;
}
}
/* VM Controls */
.vm-controls-container {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
padding: 0.5rem;
}
.controls-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.list-toggle-btn {
display: flex;
align-items: center;
gap: 0.5rem;
}
.list-toggle-btn.active {
background-color: #6c757d;
color: white;
}
.filter-dropdown {
position: relative;
}
.filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: #0d6efd;
color: white;
border-radius: 50%;
font-size: 0.7rem;
margin-left: 0.5rem;
}
/* Search box styles */
.search-box {
position: relative;
flex: 1;
min-width: 200px;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
.search-input {
padding-left: 30px;
padding-right: 30px;
}
.btn-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6c757d;
cursor: pointer;
padding: 0;
font-size: 0.875rem;
}
/* VM List styles */
.vm-list-fullpage {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
margin-bottom: 1rem;
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
max-height: calc(100vh - 200px);
}
.vm-list {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
max-height: calc(100vh - 200px);
}
.vm-list-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background-color: white;
text-align: left;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
}
.vm-list-item:last-child {
border-bottom: none;
}
.vm-list-item:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.vm-list-item.active {
background-color: rgba(13, 110, 253, 0.1);
border-left: 3px solid #0d6efd;
}
.vm-item-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.vm-name {
font-weight: 500;
}
.vm-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.status-indicator {
font-size: 0.625rem;
}
/* Status colors */
.status-running {
color: #28a745;
}
.status-stopped {
color: #6c757d;
}
.status-paused {
color: #ffc107;
}
.status-error {
color: #dc3545;
}
.status-unknown {
color: #6c757d;
}
.no-vms-message {
padding: 2rem;
text-align: center;
color: #6c757d;
}
.no-vm-selected {
padding: 2rem;
text-align: center;
}
/* VM Details */
.vm-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Filter menu styles */
.filter-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
min-width: 250px;
padding: 0.75rem;
margin-top: 0.25rem;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.filter-section {
margin-bottom: 1rem;
}
.filter-section h6 {
margin-bottom: 0.5rem;
font-weight: 600;
color: #495057;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 0.25rem;
}
.filter-options-dropdown {
max-height: 150px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-left: 0.25rem;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.25rem;
}
.filter-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 1rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.filter-pill:hover {
background-color: #e9ecef;
}
.filter-pill.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.filter-actions {
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 0.5rem;
margin-top: 0.5rem;
}
</style>

0
pvc-vue/src/components/general/ValueCard.vue → pvc-vue/src/components/ValueCard.vue
View File

1
pvc-vue/src/components/charts/HealthChart.vue
View File

@ -25,7 +25,6 @@ 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';
import ValueCard from '../general/ValueCard.vue';
// Register Chart.js components
ChartJS.register(

140
pvc-vue/src/components/general/CollapsibleSection.vue
View File

@ -1,140 +0,0 @@
<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>

70
pvc-vue/src/components/general/NodeSelectBar.vue
View File

@ -1,70 +0,0 @@
<template>
<div class="node-select-bar">
<button
v-for="node in nodes"
:key="node"
class="node-tab"
:class="{ 'active': modelValue === node }"
@click="selectNode(node)"
>
{{ node }}
</button>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
modelValue: {
type: String,
required: true
},
nodes: {
type: Array,
required: true,
default: () => []
}
});
const emit = defineEmits(['update:modelValue', 'select']);
const selectNode = (node) => {
emit('update:modelValue', node);
emit('select', node);
};
</script>
<style scoped>
.node-select-bar {
display: flex;
gap: 0.25rem;
padding: 0.5rem;
background-color: white;
border-radius: 0.25rem;
overflow-x: auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
margin-bottom: 0.5rem;
}
.node-tab {
padding: 0.375rem 0.75rem;
border: none;
background: none;
color: #495057;
font-weight: 500;
cursor: pointer;
border-radius: 0.25rem;
white-space: nowrap;
transition: all 0.2s;
}
.node-tab:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.node-tab.active {
color: #0d6efd;
background-color: rgba(13, 110, 253, 0.1);
}
</style>

824
pvc-vue/src/components/general/VMSearchBar.vue
View File

@ -1,824 +0,0 @@
<template>
<div class="controls-bar" ref="controlsBar">
<div class="controls-row">
<button
class="btn btn-outline-secondary list-toggle-btn"
@click="toggleList"
:class="{
'active': showList && !isFilterActive,
'filtering': showList && isFilterActive
}"
:title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'Show VM list'"
>
<i class="fas fa-list"></i> List VMs
</button>
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input
type="text"
placeholder="Search VMs..."
:value="inputValue"
@input="handleSearch"
@focus="handleFocus"
@blur="handleBlur"
@click="handleSearchClick"
:class="{ 'search-active': showList && isFilterActive }"
class="form-control search-input"
>
<button
v-if="modelValue && showList && showClearButton"
class="btn-clear"
@click.stop="clearSearch"
>
<i class="fas fa-times"></i>
</button>
</div>
<div class="filter-dropdown" ref="filterDropdown">
<button
class="btn btn-outline-secondary dropdown-toggle"
:disabled="!showList"
@click="toggleFilterMenu"
>
<i class="fas fa-filter"></i> Filters
<span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
</button>
<div class="filter-menu" v-show="showFilterMenu" ref="filterMenu">
<div class="filter-section">
<h6>Status</h6>
<div class="filter-options-dropdown">
<div class="filter-pills">
<button
v-for="state in availableStates"
:key="state"
class="filter-pill"
:class="{ 'active': appliedFilters.states[state] }"
@click="handleFilterToggle('states', state)"
>
{{ state }}
</button>
</div>
</div>
</div>
<div class="filter-section">
<h6>Node</h6>
<div class="filter-options-dropdown">
<div class="filter-pills">
<button
v-for="node in availableNodes"
:key="node"
class="filter-pill"
:class="{ 'active': appliedFilters.nodes[node] }"
@click="handleFilterToggle('nodes', node)"
>
{{ node }}
</button>
</div>
</div>
</div>
<div class="filter-actions">
<button class="btn btn-sm btn-outline-secondary" @click="handleResetFilters">Reset All</button>
<button class="btn btn-sm btn-primary" @click="showFilterMenu = false">Close</button>
</div>
</div>
</div>
</div>
<!-- VM List -->
<div v-if="showList" class="vm-list-container">
<div v-if="filteredVMs.length === 0" class="no-vms-message">
<p>No VMs match your search criteria</p>
</div>
<div v-else class="vm-list" ref="vmListContainer">
<button
v-for="vm in filteredVMs"
:key="vm.name"
:data-vm-name="vm.name"
class="vm-list-item"
:class="{ 'active': selectedVM === vm.name || vmFromUrl === vm.name }"
@click="handleVMSelect(vm)"
>
<div v-if="selectedVM === vm.name || vmFromUrl === vm.name" class="active-indicator"></div>
<div class="vm-item-content">
<div class="vm-name">{{ vm.name }}</div>
<div class="vm-status" :class="getStatusClass(vm.state)">
<i class="fas fa-circle status-indicator"></i>
<span>{{ vm.state }}</span>
</div>
</div>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
const props = defineProps({
modelValue: {
type: String,
required: true
},
showList: {
type: Boolean,
required: true
},
showClearButton: {
type: Boolean,
default: true
},
vmList: {
type: Array,
required: true
},
selectedVM: {
type: String,
default: ''
},
vmFromUrl: {
type: String,
default: ''
}
});
const emit = defineEmits([
'update:modelValue',
'search',
'focus',
'blur',
'clear',
'toggle-list',
'select-vm',
'toggle-filter',
'reset-filters'
]);
// UI state refs
const showFilterMenu = ref(false);
const filterDropdown = ref(null);
const filterMenu = ref(null);
const controlsBar = ref(null);
const vmListContainer = ref(null);
// Search state refs
const inputValue = ref('');
const searchText = ref('');
const isFilterActive = ref(false);
// Filter state
const appliedFilters = ref({
states: {},
nodes: {}
});
// Initialize the component
onMounted(() => {
// Set up click outside handler
document.addEventListener('click', handleClickOutside);
// Restore search text from localStorage if available
const savedSearchText = localStorage.getItem('vmSearchText');
if (savedSearchText) {
searchText.value = savedSearchText;
}
// Initialize input value based on selected VM
if (!props.showList && (props.selectedVM || props.vmFromUrl)) {
inputValue.value = props.selectedVM || props.vmFromUrl;
} else if (props.showList && props.modelValue) {
inputValue.value = props.modelValue;
searchText.value = props.modelValue;
// Save to localStorage
localStorage.setItem('vmSearchText', props.modelValue);
}
// If the list is visible on mount, scroll to selected VM
if (props.showList && (props.selectedVM || props.vmFromUrl)) {
scrollToSelectedVM();
}
});
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside);
});
// Handle search input
const handleSearch = (event) => {
const value = event.target.value;
inputValue.value = value;
searchText.value = value;
isFilterActive.value = true;
// Save search text to localStorage
localStorage.setItem('vmSearchText', value);
emit('update:modelValue', value);
emit('search', value);
};
// Handle focus on search input
const handleFocus = (event) => {
// If the list is not shown, show it
if (!props.showList) {
emit('toggle-list');
} else {
// If the list is already shown, activate filtering
isFilterActive.value = true;
// Restore search text if available
if (searchText.value) {
inputValue.value = searchText.value;
emit('update:modelValue', searchText.value);
}
}
emit('focus', event);
};
// Handle blur on search input
const handleBlur = (event) => {
emit('blur', event);
};
// Handle click on search input
const handleSearchClick = () => {
if (props.showList) {
// When clicking the search input while list is open, activate filtering
isFilterActive.value = true;
// Restore search text if available
if (searchText.value && searchText.value !== inputValue.value) {
inputValue.value = searchText.value;
emit('update:modelValue', searchText.value);
}
}
};
// Toggle the VM list
const toggleList = () => {
// If the list is already open, toggle filtering instead of closing
if (props.showList) {
// If we're in list mode (not filtering) and the button is clicked, close the drawer
if (!isFilterActive.value) {
// Save the current search text before closing
if (props.modelValue) {
searchText.value = props.modelValue;
// Save to localStorage
localStorage.setItem('vmSearchText', props.modelValue);
}
// Close the drawer
emit('toggle-list');
return;
}
// Toggle filtering mode
isFilterActive.value = !isFilterActive.value;
// If we're turning filtering on, make sure the search text is applied
if (isFilterActive.value && searchText.value) {
inputValue.value = searchText.value;
emit('update:modelValue', searchText.value);
}
// If we're turning filtering off (switching to list mode), scroll to selected VM
if (!isFilterActive.value) {
nextTick(() => {
scrollToSelectedVM();
});
}
// No need to emit toggle-list since we're not closing the list
return;
}
// If the list is closed, open it without filtering
if (!props.showList) {
// If we're opening the list, deactivate filtering
isFilterActive.value = false;
// Restore search text in the input, but don't apply filtering
if (searchText.value) {
inputValue.value = searchText.value;
emit('update:modelValue', searchText.value);
}
// Schedule scrolling to selected VM after the list opens
nextTick(() => {
scrollToSelectedVM();
});
}
emit('toggle-list');
};
// Clear search
const clearSearch = () => {
inputValue.value = '';
searchText.value = '';
isFilterActive.value = false;
// Clear search text from localStorage
localStorage.removeItem('vmSearchText');
emit('update:modelValue', '');
emit('clear');
// Focus the search input after clearing
nextTick(() => {
const searchInput = document.querySelector('.search-input');
if (searchInput) {
searchInput.focus();
}
});
};
// Select a VM
const handleVMSelect = (vm) => {
console.log('Selecting VM:', vm);
// Save the current search text before selecting a VM
if (props.modelValue) {
searchText.value = props.modelValue;
// Save to localStorage
localStorage.setItem('vmSearchText', props.modelValue);
}
emit('select-vm', vm);
};
// Handle click outside
const handleClickOutside = (event) => {
// Handle filter menu clicks
if (showFilterMenu.value &&
filterMenu.value &&
!filterMenu.value.contains(event.target) &&
!filterDropdown.value.contains(event.target)) {
showFilterMenu.value = false;
}
// Handle closing the VM list when clicking outside
if (props.showList &&
controlsBar.value &&
!controlsBar.value.contains(event.target)) {
emit('toggle-list');
}
};
// Toggle filter menu
const toggleFilterMenu = () => {
showFilterMenu.value = !showFilterMenu.value;
};
// Filter toggle
const handleFilterToggle = (type, value) => {
appliedFilters.value[type][value] = !appliedFilters.value[type][value];
};
// Reset filters
const handleResetFilters = () => {
Object.keys(appliedFilters.value.states).forEach(state => {
appliedFilters.value.states[state] = false;
});
Object.keys(appliedFilters.value.nodes).forEach(node => {
appliedFilters.value.nodes[node] = false;
});
showFilterMenu.value = false;
};
// Computed properties
const filteredVMs = computed(() => {
let filtered = [...props.vmList];
// Apply text filter only if filtering is active
if (isFilterActive.value && props.modelValue) {
const query = props.modelValue.toLowerCase();
filtered = filtered.filter(vm =>
vm.name.toLowerCase().includes(query)
);
}
// Apply state filters
const activeStates = Object.entries(appliedFilters.value.states)
.filter(([_, isActive]) => isActive)
.map(([state]) => state);
if (activeStates.length > 0) {
filtered = filtered.filter(vm => activeStates.includes(vm.state));
}
// Apply node filters
const activeNodes = Object.entries(appliedFilters.value.nodes)
.filter(([_, isActive]) => isActive)
.map(([node]) => node);
if (activeNodes.length > 0) {
filtered = filtered.filter(vm => activeNodes.includes(vm.node));
}
return filtered;
});
// Calculate available states from vmList
const availableStates = computed(() => {
const states = new Set();
props.vmList.forEach(vm => {
if (vm.state) states.add(vm.state);
});
return Array.from(states).sort();
});
// Calculate available nodes from vmList
const availableNodes = computed(() => {
const nodes = new Set();
props.vmList.forEach(vm => {
if (vm.node) nodes.add(vm.node);
});
return Array.from(nodes).sort();
});
// Initialize filters when states/nodes change
watch([availableStates, availableNodes], ([states, nodes]) => {
// Initialize any new states
states.forEach(state => {
if (!(state in appliedFilters.value.states)) {
appliedFilters.value.states[state] = false;
}
});
// Initialize any new nodes
nodes.forEach(node => {
if (!(node in appliedFilters.value.nodes)) {
appliedFilters.value.nodes[node] = false;
}
});
});
// Count active filters
const activeFiltersCount = computed(() => {
let count = 0;
Object.values(appliedFilters.value.states).forEach(isActive => {
if (isActive) count++;
});
Object.values(appliedFilters.value.nodes).forEach(isActive => {
if (isActive) count++;
});
return count;
});
// Status class helper
const getStatusClass = (state) => {
if (!state) return 'status-unknown';
switch(state.toLowerCase()) {
case 'start': return 'status-running';
case 'stop': return 'status-stopped';
case 'disable': return 'status-paused';
default: return 'status-unknown';
}
};
// Watch for changes in showList
watch(() => props.showList, (isVisible) => {
if (!isVisible) {
// When list is closed, show selected VM
const effectiveVM = props.selectedVM || props.vmFromUrl;
if (effectiveVM) {
inputValue.value = effectiveVM;
// Don't clear the model value when closing the list
// This ensures the search text is preserved
if (!props.modelValue && searchText.value) {
emit('update:modelValue', searchText.value);
}
}
} else {
// When list is opened, show search text if available
if (searchText.value) {
inputValue.value = searchText.value;
// Ensure the model value is updated to match the search text
if (props.modelValue !== searchText.value) {
emit('update:modelValue', searchText.value);
}
} else {
inputValue.value = '';
}
// Scroll to selected VM when list opens
scrollToSelectedVM();
}
});
// Watch for changes in selectedVM or vmFromUrl
watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl]) => {
if (!props.showList) {
const effectiveVM = selectedVM || vmFromUrl;
if (effectiveVM) {
inputValue.value = effectiveVM;
}
}
});
// Add a function to scroll to the selected VM
const scrollToSelectedVM = () => {
nextTick(() => {
const selectedVMName = props.selectedVM || props.vmFromUrl;
if (selectedVMName && vmListContainer.value) {
const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
if (activeElement) {
activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
}
});
};
</script>
<style scoped>
.controls-bar {
display: flex;
flex-direction: column;
gap: 0.5rem;
background-color: white;
border-radius: 0.25rem;
padding: 1rem;
}
.controls-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-box {
position: relative;
flex: 1;
min-width: 200px;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
.search-input {
padding-left: 30px;
padding-right: 30px;
}
.btn-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6c757d;
cursor: pointer;
padding: 0;
font-size: 0.875rem;
}
.list-toggle-btn {
display: flex;
align-items: center;
gap: 0.5rem;
}
.list-toggle-btn.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.list-toggle-btn.filtering {
background-color: white;
color: #212529;
border-color: #6c757d;
}
.filter-dropdown {
position: relative;
}
.filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: #0d6efd;
color: white;
border-radius: 50%;
font-size: 0.7rem;
margin-left: 0.5rem;
}
/* VM List styles */
.vm-list-container {
background-color: white;
border-radius: 0.25rem;
overflow: hidden;
margin-top: 0.5rem;
}
.vm-list {
display: flex;
flex-direction: column;
width: 100%;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.vm-list-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background-color: white;
text-align: left;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
}
.vm-list-item:last-child {
border-bottom: none !important;
}
.vm-list-item:hover {
background-color: rgba(0, 0, 0, 0.03) !important;
}
.vm-list-item.active {
background-color: rgba(13, 110, 253, 0.15) !important;
position: relative !important;
z-index: 1 !important;
}
.vm-list-item.active::before {
content: '';
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background-color: #0d6efd !important;
z-index: 2 !important;
}
.controls-bar .vm-list-container .vm-list .vm-list-item.active {
background-color: rgba(13, 110, 253, 0.15) !important;
position: relative !important;
}
.controls-bar .vm-list-container .vm-list .vm-list-item.active::before {
content: '';
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background-color: #0d6efd !important;
}
.vm-item-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.vm-name {
font-weight: 500;
}
.vm-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.status-indicator {
font-size: 0.625rem;
}
/* Status colors */
.status-running {
color: #28a745;
}
.status-stopped {
color: #6c757d;
}
.status-paused {
color: #ffc107;
}
.status-error {
color: #dc3545;
}
.status-unknown {
color: #6c757d;
}
.no-vms-message {
padding: 2rem;
text-align: center;
color: #6c757d;
}
/* Filter menu styles */
.filter-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
min-width: 250px;
padding: 1rem;
margin-top: 0.5rem;
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.filter-section {
margin-bottom: 1rem;
}
.filter-section h6 {
margin-bottom: 0.5rem;
font-weight: 600;
color: #495057;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 0.25rem;
}
.filter-options-dropdown {
max-height: 150px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-left: 0.25rem;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.25rem;
}
.filter-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 1rem;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.filter-pill:hover {
background-color: #e9ecef;
}
.filter-pill.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.filter-actions {
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 0.5rem;
margin-top: 0.5rem;
}
.active-indicator {
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background-color: #0d6efd !important;
z-index: 2 !important;
}
.search-input.search-active {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>

157
pvc-vue/src/components/pages/vms/VMDetail.vue.bak
View File

@ -1,157 +0,0 @@
<template>
<div class="vm-detail">
<!-- Basic Info Section -->
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
<div class="info-row">
<ValueCard
title="State"
:value="vm.state || 'Unknown'"
:status="getStateColor(vm.state)"
/>
<ValueCard
title="Node"
:value="vm.node || 'N/A'"
/>
<ValueCard
title="CPUs"
:value="vm.vcpus || 0"
/>
<ValueCard
title="Memory"
:value="formatMemory(vm.memory)"
/>
</div>
</CollapsibleSection>
<!-- Resources Section -->
<CollapsibleSection title="Resources" :initially-expanded="sections.resources">
<div class="resources-row">
<ValueCard
title="Disk Size"
:value="formatStorage(vm.disk_size)"
/>
<ValueCard
title="Network IPs"
:value="vm.ips?.join(', ') || 'None'"
/>
</div>
</CollapsibleSection>
<!-- Networks Section -->
<CollapsibleSection
v-if="vm.networks?.length"
title="Network Interfaces"
:initially-expanded="sections.networks"
>
<div class="networks-row">
<div v-for="network in vm.networks" :key="network.vni" class="network-card">
<ValueCard title="Interface" :value="network.vni" />
<ValueCard title="Type" :value="network.type" />
<ValueCard title="MAC" :value="network.mac" />
<ValueCard title="Source" :value="network.source" />
</div>
</div>
</CollapsibleSection>
<!-- Storage Section -->
<CollapsibleSection
v-if="vm.disks?.length"
title="Storage"
:initially-expanded="sections.storage"
>
<div class="storage-row">
<div v-for="disk in vm.disks" :key="disk.dev" class="storage-card">
<ValueCard title="Device" :value="disk.dev" />
<ValueCard title="Type" :value="disk.type" />
<ValueCard title="Bus" :value="disk.bus" />
<ValueCard title="Source" :value="disk.name" />
</div>
</div>
</CollapsibleSection>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CollapsibleSection from '../../general/CollapsibleSection.vue';
import ValueCard from '../../general/ValueCard.vue';
const props = defineProps({
vm: {
type: Object,
required: true
}
});
// Section visibility state
const sections = ref({
info: true,
resources: true,
networks: true,
storage: true
});
// Helper functions
const getStateColor = (state) => {
if (!state) return '';
switch(state.toLowerCase()) {
case 'start': return 'success';
case 'stop': return 'danger';
case 'disable': return 'warning';
default: return '';
}
};
const formatMemory = (memoryMB) => {
if (!memoryMB) return '0 GB';
return Math.round(memoryMB / 1024) + ' GB';
};
const formatStorage = (sizeGB) => {
if (!sizeGB) return '0 GB';
if (sizeGB < 1024) return sizeGB + ' GB';
return (sizeGB / 1024).toFixed(1) + ' TB';
};
</script>
<style scoped>
.vm-detail {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.info-row,
.resources-row {
display: grid;
gap: 0.5rem;
width: 100%;
}
.networks-row,
.storage-row {
display: flex;
flex-direction: column;
gap: 1rem;
}
.network-card,
.storage-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 0.25rem;
}
@media (min-width: 1201px) {
.info-row { grid-template-columns: repeat(4, 1fr); }
.resources-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1200px) {
.info-row { grid-template-columns: repeat(2, 1fr); }
.resources-row { grid-template-columns: 1fr; }
}
</style>

385
pvc-vue/src/components/pages/vms/VMOverview.vue
View File

@ -1,385 +0,0 @@
<template>
<div class="overview-container">
<VMSearchBar
:key="`vm-search-${selectedVM}`"
v-model="searchQuery"
:selected-vm="selectedVM"
:vm-from-url="route.query.vm"
:show-list="showVMList"
:show-clear-button="true"
:vm-list="props.vmData"
@search="handleSearch"
@focus="handleSearchFocus"
@blur="handleSearchBlur"
@clear="clearSearch"
@toggle-list="toggleVMList"
@select-vm="selectVM"
/>
<!-- VM Details -->
<div v-if="selectedVMData && !showVMList" class="content-container">
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
<div class="info-grid">
<ValueCard
title="State"
:value="selectedVMData.state || 'Unknown'"
:status="getStateColor(selectedVMData.state)"
/>
<ValueCard
title="Node"
:value="selectedVMData.node || 'N/A'"
/>
<ValueCard
title="CPUs"
:value="selectedVMData.vcpus || 0"
/>
<ValueCard
title="Memory"
:value="formatMemory(selectedVMData.memory)"
/>
</div>
</CollapsibleSection>
<!-- Resources Section -->
<CollapsibleSection title="Resources" :initially-expanded="sections.resources">
<div class="info-grid-2">
<ValueCard
title="Disk Size"
:value="formatStorage(selectedVMData.disk_size)"
/>
<ValueCard
title="Network IPs"
:value="selectedVMData.ips?.join(', ') || 'None'"
/>
</div>
</CollapsibleSection>
<!-- Networks Section -->
<CollapsibleSection
v-if="selectedVMData.networks?.length"
title="Network Interfaces"
:initially-expanded="sections.networks"
>
<div class="cards-stack">
<div v-for="network in selectedVMData.networks"
:key="network.vni"
class="detail-card"
>
<ValueCard title="Interface" :value="network.vni" />
<ValueCard title="Type" :value="network.type" />
<ValueCard title="MAC" :value="network.mac" />
<ValueCard title="Source" :value="network.source" />
</div>
</div>
</CollapsibleSection>
<!-- Storage Section -->
<CollapsibleSection
v-if="selectedVMData.disks?.length"
title="Storage"
:initially-expanded="sections.storage"
>
<div class="cards-stack">
<div v-for="disk in selectedVMData.disks"
:key="disk.dev"
class="detail-card"
>
<ValueCard title="Device" :value="disk.dev" />
<ValueCard title="Type" :value="disk.type" />
<ValueCard title="Bus" :value="disk.bus" />
<ValueCard title="Source" :value="disk.name" />
</div>
</div>
</CollapsibleSection>
</div>
<!-- Loading and no-selection states -->
<div v-if="!selectedVMData && !showVMList" class="content-container">
<div v-if="isLoading" class="loading-container">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">Loading VM details...</p>
</div>
<div v-else class="no-content-message">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
<span v-if="invalidVMSelected">
Selected VM does not exist
</span>
<span v-else>
Please select a VM from the list to view its details
</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import CollapsibleSection from '../../general/CollapsibleSection.vue';
import ValueCard from '../../general/ValueCard.vue';
import VMSearchBar from '../../general/VMSearchBar.vue';
const router = useRouter();
const route = useRoute();
const props = defineProps({
vmData: {
type: Array,
required: true,
default: () => []
},
metricsData: {
type: Object,
required: true,
default: () => ({})
},
clusterData: {
type: Object,
required: true,
default: () => ({})
},
loading: {
type: Boolean,
default: false
}
});
// Use ref and sync with route
const selectedVM = ref(route.query.vm || '');
const searchQuery = ref('');
const showVMList = ref(true);
const searchActive = ref(false);
const invalidVMSelected = ref(false);
const isLoading = ref(false);
const sections = ref({
info: true,
graphs: true,
resources: true,
network: true,
storage: true
});
// Get the selected VM data
const selectedVMData = computed(() => {
if (!selectedVM.value || !props.vmData) return null;
return props.vmData.find(vm => vm.name === selectedVM.value) || null;
});
// Handle search input
const handleSearch = (value) => {
searchQuery.value = value;
searchActive.value = true;
// Store the search query in localStorage for persistence
if (value) {
localStorage.setItem('vmSearchQuery', value);
}
};
// Handle search focus
const handleSearchFocus = () => {
if (!showVMList.value) {
showVMList.value = true;
}
searchActive.value = true;
};
// Handle search blur
const handleSearchBlur = (event) => {
// Keep blur logic for handling clicks outside
// ... existing blur logic ...
};
// Toggle VM list visibility
const toggleVMList = () => {
showVMList.value = !showVMList.value;
if (showVMList.value) {
searchActive.value = false;
invalidVMSelected.value = false;
}
};
// Select a VM
const selectVM = (vm) => {
console.log('VMOverview selectVM called with:', vm);
// Update the ref
selectedVM.value = vm.name;
invalidVMSelected.value = false;
// Close the VM list
showVMList.value = false;
// Update the URL
router.push({ query: { vm: vm.name } });
};
// Clear search
const clearSearch = () => {
searchQuery.value = '';
searchActive.value = false;
localStorage.removeItem('vmSearchQuery');
};
// Lifecycle hooks
onMounted(() => {
console.log('VMOverview mounted, route.query.vm:', route.query.vm);
const vmFromQuery = route.query.vm;
// Restore previous search query from localStorage if available
const savedSearch = localStorage.getItem('vmSearchQuery');
if (savedSearch) {
searchQuery.value = savedSearch;
}
if (vmFromQuery) {
console.log('Setting selectedVM to:', vmFromQuery);
selectedVM.value = vmFromQuery;
isLoading.value = true;
showVMList.value = false;
// If we have data, verify the VM exists
if (props.vmData.length) {
const vmExists = props.vmData.some(v => v.name === vmFromQuery);
invalidVMSelected.value = !vmExists;
}
isLoading.value = false;
} else if (props.vmData.length > 0) {
showVMList.value = true;
invalidVMSelected.value = false;
}
});
onUnmounted(() => {
// Remove event listeners and clean up resources
});
// Watch for route changes to update selectedVM
watch(() => route.query.vm, (newVm) => {
// Explicitly update the ref when route changes
selectedVM.value = newVm || '';
if (newVm) {
// Just update UI state, don't trigger another route change
invalidVMSelected.value = false;
showVMList.value = false;
} else if (props.vmData.length > 0) {
showVMList.value = true;
invalidVMSelected.value = false;
}
}, { immediate: true });
// Watch for changes in the VM list visibility
watch(() => showVMList.value, (isVisible) => {
if (isVisible && selectedVM.value) {
// Scroll to selected VM when the list becomes visible
nextTick(() => {
// Scroll to selected VM logic
});
}
});
// Add watcher for vmData to handle loading state
watch(() => props.vmData, (newData) => {
if (selectedVM.value && newData.length) {
const vmExists = newData.some(vm => vm.name === selectedVM.value);
invalidVMSelected.value = !vmExists;
}
}, { immediate: true });
// Add debug watcher
watch(() => selectedVM.value, (newVal) => {
console.log('VMOverview selectedVM changed:', newVal);
}, { immediate: true });
// Helper functions
const getStateColor = (state) => {
if (!state) return '';
switch(state.toLowerCase()) {
case 'start': return 'success';
case 'stop': return 'danger';
case 'disable': return 'warning';
default: return '';
}
};
const formatMemory = (memoryMB) => {
if (!memoryMB) return '0 GB';
return Math.round(memoryMB / 1024) + ' GB';
};
const formatStorage = (sizeGB) => {
if (!sizeGB) return '0 GB';
if (sizeGB < 1024) return sizeGB + ' GB';
return (sizeGB / 1024).toFixed(1) + ' TB';
};
</script>
<style scoped>
.overview-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.content-container {
background-color: white;
border-radius: 0.25rem;
padding: 1rem;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.no-content-message {
text-align: center;
padding: 2rem;
}
/* Keep only the styles needed for VM details display */
.info-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.info-grid-2 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cards-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.detail-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 0.25rem;
}
@media (max-width: 768px) {
.info-grid,
.info-grid-2 {
grid-template-columns: 1fr;
}
.detail-card {
grid-template-columns: 1fr;
}
}
</style>

12
pvc-vue/src/stores/api.js
View File

@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
const config = ref({
apiUri: localStorage.getItem('pvc_api_uri') || '',
apiKey: localStorage.getItem('pvc_api_key') || '',
updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 15 // Default to 15s
updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 5000
});
// Computed
@ -16,18 +16,12 @@ export const useApiStore = defineStore('api', () => {
// Actions
const updateConfig = (newConfig) => {
// Ensure interval is between 5 and 300 seconds
const interval = Math.min(300, Math.max(5, parseInt(newConfig.updateInterval) || 15));
config.value = {
...newConfig,
updateInterval: interval
};
config.value = { ...newConfig };
// Save to localStorage
localStorage.setItem('pvc_api_uri', newConfig.apiUri);
localStorage.setItem('pvc_api_key', newConfig.apiKey);
localStorage.setItem('pvc_update_interval', interval.toString());
localStorage.setItem('pvc_update_interval', newConfig.updateInterval.toString());
};
const fetchStatus = async () => {

13
pvc-vue/src/stores/cluster.js
View File

@ -1,13 +0,0 @@
import { defineStore } from 'pinia';
export const useClusterStore = defineStore('cluster', {
state: () => ({
clusterData: {}
}),
actions: {
setClusterData(data) {
this.clusterData = data;
}
}
});

17
pvc-vue/src/stores/vm.js
View File

@ -1,17 +0,0 @@
import { defineStore } from 'pinia';
export const useVMStore = defineStore('vm', {
state: () => ({
vmList: [],
metrics: {}
}),
actions: {
setVMList(vms) {
this.vmList = vms;
},
setMetrics(metrics) {
this.metrics = metrics;
}
}
});

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

@ -10,8 +10,8 @@
</template>
<script setup>
import PageTitle from '../components/general/PageTitle.vue';
import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
import PageTitle from '../components/PageTitle.vue';
import NodeOverview from '../components/NodeOverview.vue';
defineProps({
nodeData: {
@ -39,9 +39,4 @@ defineProps({
gap: 0.5rem;
width: 100%;
}
/* Remove top margin from first child (usually PageTitle) */
.content-grid > :first-child {
margin-top: 0 !important;
}
</style>

4
pvc-vue/src/views/Overview.vue
View File

@ -9,8 +9,8 @@
</template>
<script setup>
import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
import PageTitle from '../components/general/PageTitle.vue';
import ClusterOverview from '../components/ClusterOverview.vue';
import PageTitle from '../components/PageTitle.vue';
defineProps({
clusterData: {

18
pvc-vue/src/views/VMs.vue
View File

@ -5,16 +5,14 @@
:vmData="vmData"
:metricsData="metricsData"
:clusterData="clusterData"
:loading="isLoading"
/>
</div>
</template>
<script setup>
import PageTitle from '../components/general/PageTitle.vue';
import VMOverview from '../components/pages/vms/VMOverview.vue';
import PageTitle from '../components/PageTitle.vue';
import VMOverview from '../components/VMOverview.vue';
// Define props to receive data from App.vue
const props = defineProps({
vmData: {
type: Array,
@ -30,12 +28,11 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({})
},
isLoading: {
type: Boolean,
default: false
}
});
// Add debugging
console.log('VMs.vue received vmData:', props.vmData);
</script>
<style scoped>
@ -45,9 +42,4 @@ const props = defineProps({
gap: 0.5rem;
width: 100%;
}
/* Remove top margin from first child (usually PageTitle) */
.content-grid > :first-child {
margin-top: 0 !important;
}
</style>

7
pvc-vue/vite.config.js
View File

@ -1,11 +1,6 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
function getTimestamp() {
const now = new Date();
return now.toISOString().replace('T', ' ').replace('Z', '');
}
export default defineConfig({
plugins: [vue()],
server: {
@ -26,7 +21,7 @@ export default defineConfig({
const requestPath = req.url.replace('/api', '');
proxyReq.path = `${apiPath}${requestPath}`;
console.log(`${getTimestamp()} Proxying to: ${options.target}${proxyReq.path}`);
console.log(`Proxying to: ${options.target}${proxyReq.path}`);
}
if (req.headers['x-api-key']) {