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

Compare commits

base: parallelvirtualcluster:af00d1fe61da45b3326a3c1393e7c4e9d7ed4d3b
Branches Tags
parallelvirtualcluster:master
..
compare: parallelvirtualcluster:08f00d9c627368498fc32e1ce0900cd5251fd0c9
Branches Tags
parallelvirtualcluster:master

No commits in common. "af00d1fe61da45b3326a3c1393e7c4e9d7ed4d3b" and "08f00d9c627368498fc32e1ce0900cd5251fd0c9" have entirely different histories.
af00d1fe61 ... 08f00d9c62

3 changed files with 256 additions and 500 deletions
Show Stats Expand all files Collapse all files

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

@ -19,53 +19,101 @@
<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 1: Cluster Name -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Cluster</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 2: Primary Node -->
<ValueCard
title="Primary Node"
:value="clusterData.primary_node || 'N/A'"
/>
<!-- Card 2: Version -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Version</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 3: Nodes -->
<ValueCard
title="Nodes"
:value="clusterData.nodes?.total || 0"
/>
<!-- Card 4: Nodes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Nodes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
</div>
</div>
<!-- Card 4: VMs -->
<ValueCard
title="VMs"
:value="clusterData.vms?.total || 0"
/>
<!-- Card 5: Primary -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Primary Node</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
</div>
</div>
<!-- Card 5: Networks -->
<ValueCard
title="Networks"
:value="clusterData.networks || 0"
/>
<!-- Card 6: VMs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VMs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
</div>
</div>
<!-- Card 6: OSDs -->
<ValueCard
title="OSDs"
:value="clusterData.osds?.total || 0"
/>
<!-- Card 7: OSDs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSDs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
</div>
</div>
<!-- Card 7: Pools -->
<ValueCard
title="Pools"
:value="clusterData.pools || 0"
/>
<!-- Card 8: Pools -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Pools</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
</div>
</div>
<!-- Card 8: Volumes -->
<ValueCard
title="Volumes"
:value="clusterData.volumes || 0"
/>
<!-- Card 9: Volumes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Volumes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
@ -285,7 +333,6 @@ 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(

124
pvc-vue/src/components/ValueCard.vue
View File

@ -1,124 +0,0 @@
<template>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">{{ title }}</span>
</h6>
</div>
<div class="card-body" :class="bgColorClass">
<h4 class="metric-value" :class="valueClass">{{ value }}</h4>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
title: {
type: String,
required: true
},
value: {
type: [String, Number],
required: true
},
valueClass: {
type: String,
default: ''
},
bgColor: {
type: String,
default: ''
}
});
// Compute the background color class based on the bgColor prop
const bgColorClass = computed(() => {
if (!props.bgColor) return '';
return `bg-${props.bgColor}`;
});
</script>
<style scoped>
.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;
min-width: 0;
width: 100%;
overflow: hidden;
}
/* Background color classes */
.bg-green {
background-color: rgba(40, 167, 69, 0.1);
}
.bg-yellow {
background-color: rgba(255, 193, 7, 0.1);
}
.bg-red {
background-color: rgba(220, 53, 69, 0.1);
}
.bg-blue {
background-color: rgba(13, 110, 253, 0.1);
}
.bg-gray {
background-color: rgba(108, 117, 125, 0.1);
}
.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;
}
.card-header h6 {
font-size: 0.95rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}
.metric-card .card-body {
flex: 1;
padding: 0.5rem;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
overflow: visible;
justify-content: center;
align-items: center;
}
.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>

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

@ -44,45 +44,102 @@
<!-- Toggle button for expanded section -->
<div v-show="sections.info" class="section-content-wrapper">
<div class="section-content">
<div class="info-row">
<div class="metrics-row">
<!-- Card 1: Daemon State -->
<ValueCard
title="Daemon State"
:value="selectedNodeData.daemon_state || 'Unknown'"
:bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Daemon State</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.daemon_state || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 2: Coordinator State -->
<ValueCard
title="Coordinator State"
:value="selectedNodeData.coordinator_state || 'Unknown'"
:bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Coordinator State</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.coordinator_state || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 3: Domain State -->
<ValueCard
title="Domain State"
:value="selectedNodeData.domain_state || 'Unknown'"
:bg-color="getDomainStateColor(selectedNodeData.domain_state)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Domain State</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.domain_state || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 4: PVC Version -->
<ValueCard
title="PVC Version"
:value="selectedNodeData.pvc_version || 'Unknown'"
/>
<!-- Card 4: Domains Count -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Domains Count</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.domains_count || 0 }}</h4>
</div>
</div>
<!-- Card 5: Kernel Version -->
<ValueCard
title="Kernel Version"
:value="selectedNodeData.kernel || 'Unknown'"
/>
<!-- Card 5: PVC Version -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">PVC Version</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.pvc_version || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 6: VM Count -->
<ValueCard
title="VM Count"
:value="selectedNodeData.domains_count || 0"
/>
<!-- Card 6: Kernel Version -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Kernel Version</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.kernel || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 7: Host CPU Count -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Host CPU Count</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.cpu_count || 0 }}</h4>
</div>
</div>
<!-- Card 8: Guest CPU Count -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Guest CPU Count</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ selectedNodeData.vcpu?.allocated || 0 }}</h4>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
@ -149,52 +206,6 @@
</div>
</div>
<!-- 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"
/>
<!-- 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 -->
<div class="section-container" :class="{ 'collapsed': !sections.resources }">
<!-- Collapsed section indicator -->
@ -213,36 +224,66 @@
<!-- Toggle button for expanded section -->
<div v-show="sections.resources" class="section-content-wrapper">
<div class="section-content">
<div class="resources-row-memory">
<div class="resources-row">
<!-- Total Memory -->
<ValueCard
title="Total Memory"
:value="formatMemory(selectedNodeData.memory?.total)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Total Memory</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.total) }}</h4>
</div>
</div>
<!-- Used Memory -->
<ValueCard
title="Used Memory"
:value="formatMemory(selectedNodeData.memory?.used)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Used Memory</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.used) }}</h4>
</div>
</div>
<!-- Free Memory -->
<ValueCard
title="Free Memory"
:value="formatMemory(selectedNodeData.memory?.free)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Free Memory</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.free) }}</h4>
</div>
</div>
<!-- Allocated Memory -->
<ValueCard
title="Allocated Memory"
:value="formatMemory(selectedNodeData.memory?.allocated)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Allocated Memory</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.allocated) }}</h4>
</div>
</div>
<!-- Provisioned Memory -->
<ValueCard
title="Provisioned Memory"
:value="formatMemory(selectedNodeData.memory?.provisioned)"
/>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Provisioned Memory</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.provisioned) }}</h4>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
@ -252,60 +293,6 @@
</div>
</div>
</div>
<!-- Running VMs Section -->
<div class="section-container" :class="{ 'collapsed': !sections.vms }">
<!-- Collapsed section indicator -->
<div v-if="!sections.vms" class="section-content-wrapper">
<div class="section-content">
<div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Running VMs</h6>
</div>
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('vms')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Toggle button for expanded section -->
<div v-show="sections.vms" class="section-content-wrapper">
<div class="section-content">
<div class="vms-container">
<div class="vms-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Running VMs</span>
</h6>
</div>
<div class="card-body">
<div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
<p>No VMs running on this node</p>
</div>
<div v-else class="vm-list" :style="{
'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))`
}">
<div
v-for="vm in selectedNodeData.running_domains"
:key="vm"
class="vm-item"
@click="handleVmClick(vm)"
title="View VM details"
>
{{ vm }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('vms')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</div>
<!-- No node selected message -->
@ -322,7 +309,6 @@ import CPUChart from '../components/charts/CPUChart.vue';
import MemoryChart from '../components/charts/MemoryChart.vue';
import StorageChart from '../components/charts/StorageChart.vue';
import HealthChart from '../components/charts/HealthChart.vue';
import ValueCard from '../components/ValueCard.vue';
// Implement formatBytes function directly
function formatBytes(bytes, decimals = 2) {
@ -338,12 +324,15 @@ function formatBytes(bytes, decimals = 2) {
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
// Format memory values
const formatMemory = (memoryMB) => {
if (!memoryMB) return '0 GB';
// The values are already in MB, so we just need to convert to GB
return Math.round(memoryMB / 1024) + ' GB';
};
// Format memory values (similar to formatBytes but with GB as default unit)
function formatMemory(bytes) {
if (bytes === undefined || bytes === null) return 'N/A';
if (bytes === 0) return '0 GB';
// Convert to GB with 2 decimal places
const gbValue = (bytes / (1024 * 1024 * 1024)).toFixed(2);
return `${gbValue} GB`;
}
const props = defineProps({
nodeData: {
@ -367,9 +356,7 @@ const props = defineProps({
const sections = ref({
info: true,
graphs: true,
cpu: true,
resources: true,
vms: true
resources: true
});
// Toggle section visibility
@ -449,22 +436,20 @@ const calculateCpuUtilization = (nodeData) => {
return Math.round(utilization);
};
// Calculate memory utilization
const calculateMemoryUtilization = (node) => {
if (!node || !node.memory) return 0;
const used = node.memory.used || 0;
const total = node.memory.total || 1; // Avoid division by zero
if (total === 0) return 0;
return Math.round((used / total) * 100);
// Calculate memory utilization (memory.used / memory.total * 100)
const calculateMemoryUtilization = (nodeData) => {
if (!nodeData || !nodeData.memory || !nodeData.memory.used || !nodeData.memory.total) return 0;
const utilization = (nodeData.memory.used / nodeData.memory.total) * 100;
return Math.round(utilization);
};
// Calculate allocated memory
const calculateAllocatedMemory = (node) => {
if (!node || !node.memory) return 0;
const allocated = node.memory.allocated || 0;
const total = node.memory.total || 1; // Avoid division by zero
if (total === 0) return 0;
return Math.round((allocated / total) * 100);
// Calculate allocated memory (memory.allocated / memory.total * 100)
const calculateAllocatedMemory = (nodeData) => {
if (!nodeData || !nodeData.memory || !nodeData.memory.allocated || !nodeData.memory.total) return 0;
const utilization = (nodeData.memory.allocated / nodeData.memory.total) * 100;
return Math.round(utilization);
};
// Prepare chart data for the node
@ -544,59 +529,6 @@ const nodeAllocatedMemoryChartData = computed(() => {
};
});
// Helper functions for state colors
// Determine color for daemon state
const getDaemonStateColor = (state) => {
if (!state) return '';
if (state === 'run') return 'green';
if (['init', 'shutdown'].includes(state)) return 'yellow';
if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
return 'blue';
};
// Determine color for coordinator state
const getCoordinatorStateColor = (state) => {
if (!state) return '';
if (state === 'primary') return 'green';
if (state === 'secondary') return 'blue';
if (state === 'hypervisor') return 'gray';
return '';
};
// Determine color for domain state
const getDomainStateColor = (state) => {
if (!state) return '';
if (state === 'ready') return 'green';
if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
return 'gray';
};
// Handle VM click (placeholder until VMs page is implemented)
const handleVmClick = (vmName) => {
console.log(`VM clicked: ${vmName}`);
// You can show a toast notification or modal here
alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
};
// Calculate the minimum width for VM items based on the longest VM name
const calculateVmItemMinWidth = computed(() => {
if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
return 100; // Default minimum width
}
// Find the longest VM name
const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
return current.length > longest.length ? current : longest;
}, '');
// Calculate width based on character count (approx 8px per character plus padding)
const minWidth = Math.max(100, longestVmName.length * 8 + 32);
return minWidth;
});
// Initialize the component
onMounted(() => {
// Select the first node by default if available
@ -787,7 +719,7 @@ onUnmounted(() => {
font-weight: 600;
}
.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
.metrics-row, .graphs-row, .resources-row {
display: grid;
gap: 0.5rem;
width: 100%;
@ -799,19 +731,11 @@ onUnmounted(() => {
grid-template-columns: repeat(4, 1fr);
}
.info-row {
grid-template-columns: repeat(3, 1fr);
}
.graphs-row {
grid-template-columns: repeat(4, 1fr);
}
.resources-row-cpu {
grid-template-columns: repeat(3, 1fr);
}
.resources-row-memory {
.resources-row {
grid-template-columns: repeat(5, 1fr);
}
}
@ -821,29 +745,17 @@ onUnmounted(() => {
grid-template-columns: repeat(2, 1fr);
}
.info-row {
grid-template-columns: repeat(2, 1fr);
}
.graphs-row {
grid-template-columns: repeat(2, 1fr);
}
.resources-row-cpu {
grid-template-columns: repeat(3, 1fr);
}
.resources-row-memory {
grid-template-columns: repeat(3, 1fr);
.resources-row {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 800px) {
.metrics-row,
.info-row,
.graphs-row,
.resources-row-cpu,
.resources-row-memory {
.metrics-row, .graphs-row, .resources-row {
grid-template-columns: 1fr;
}
}
@ -1000,83 +912,4 @@ onUnmounted(() => {
background: white;
border: none;
}
/* Running VMs section styles */
.vms-container {
width: 100%;
}
.vms-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.vms-card .card-header {
background-color: rgba(0, 0, 0, 0.03);
padding: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
height: 38px;
display: flex;
justify-content: space-between;
align-items: center;
}
.vms-card .card-body {
flex: 1;
padding: 0.5rem;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
overflow: visible;
}
.vm-count {
font-size: 0.8rem;
color: #6c757d;
font-weight: normal;
margin-left: 0.5rem;
}
.no-vms {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
color: #6c757d;
font-style: italic;
}
.vm-list {
display: grid;
gap: 0.5rem;
width: 100%;
}
.vm-item {
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.015);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0.25rem;
cursor: pointer;
text-align: center;
font-weight: 500;
color: #333;
transition: all 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.vm-item:hover {
background-color: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
}
</style>