Compare commits
26 Commits
14e11a4772
...
804f049111
| Author | SHA1 | Date | |
|---|---|---|---|
|
804f049111 | ||
|
|
4a97f365b0 | ||
|
|
cb27e81b7c | ||
|
|
1d26e0338f | ||
|
|
c1ddbd1f3f | ||
|
|
99372fdfe8 | ||
|
|
a8e3488354 | ||
|
|
e588df9fca | ||
|
|
4e5274c6f0 | ||
|
|
adfc1d8269 | ||
|
|
bcf0e98b54 | ||
|
|
493dd94f21 | ||
|
|
f879fddd95 | ||
|
|
0107197b2b | ||
|
|
645eec5d0d | ||
|
|
e450c5dca3 | ||
|
|
c467b92384 | ||
|
|
037ea7fe8e | ||
|
|
4e0cd95b75 | ||
|
|
ef3e013f2d | ||
|
|
94d0ed544f | ||
|
|
8f5dac1ca4 | ||
|
|
8158f84eb7 | ||
|
|
26a2d23798 | ||
|
|
526e6f4a36 | ||
|
|
ac9428a41b |
@ -27,7 +27,7 @@
|
|||||||
<!-- Refresh interval display with tooltip -->
|
<!-- Refresh interval display with tooltip -->
|
||||||
<div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
|
<div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
|
||||||
<i class="fas fa-sync-alt"></i>
|
<i class="fas fa-sync-alt"></i>
|
||||||
<span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
|
<span class="refresh-text ms-2">{{ api.config.updateInterval }}s</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Collapse/Expand button with tooltip -->
|
<!-- Collapse/Expand button with tooltip -->
|
||||||
@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||||
import ConfigPanel from './components/ConfigPanel.vue';
|
import ConfigPanel from './components/general/ConfigPanel.vue';
|
||||||
import { useApiStore } from './stores/api';
|
import { useApiStore } from './stores/api';
|
||||||
|
|
||||||
const api = useApiStore();
|
const api = useApiStore();
|
||||||
@ -218,10 +218,22 @@ const updateDashboard = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
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([
|
const [status, nodes, vms] = await Promise.all([
|
||||||
api.fetchStatus(),
|
api.fetchStatus().then(res => {
|
||||||
api.fetchNodes(),
|
console.log(`${new Date().toISOString()} Status API call complete`);
|
||||||
api.fetchVMs()
|
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;
|
||||||
|
})
|
||||||
]);
|
]);
|
||||||
|
|
||||||
console.log('[API] Status Response:', status);
|
console.log('[API] Status Response:', status);
|
||||||
@ -250,7 +262,8 @@ const restartDashboard = () => {
|
|||||||
clearInterval(updateTimer);
|
clearInterval(updateTimer);
|
||||||
}
|
}
|
||||||
updateDashboard();
|
updateDashboard();
|
||||||
updateTimer = setInterval(updateDashboard, api.config.updateInterval);
|
const intervalMs = api.config.updateInterval * 1000;
|
||||||
|
updateTimer = setInterval(updateDashboard, intervalMs);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -1,318 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,842 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -25,6 +25,7 @@ import { computed } from 'vue';
|
|||||||
import { Line } from 'vue-chartjs';
|
import { Line } from 'vue-chartjs';
|
||||||
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
|
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
|
||||||
import annotationPlugin from 'chartjs-plugin-annotation';
|
import annotationPlugin from 'chartjs-plugin-annotation';
|
||||||
|
import ValueCard from '../general/ValueCard.vue';
|
||||||
|
|
||||||
// Register Chart.js components
|
// Register Chart.js components
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
|
|||||||
@ -82,6 +82,7 @@ import {
|
|||||||
Tooltip,
|
Tooltip,
|
||||||
Legend
|
Legend
|
||||||
} from 'chart.js';
|
} from 'chart.js';
|
||||||
|
import ValueCard from '../general/ValueCard.vue';
|
||||||
|
|
||||||
// Register Chart.js components
|
// Register Chart.js components
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
140
pvc-vue/src/components/general/CollapsibleSection.vue
Normal file
140
pvc-vue/src/components/general/CollapsibleSection.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<div class="section-container" :class="{ 'collapsed': !isExpanded }">
|
||||||
|
<!-- Collapsed section indicator -->
|
||||||
|
<div v-if="!isExpanded" class="section-content-wrapper">
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="collapsed-section-header">
|
||||||
|
<h6 class="card-title mb-0 metric-label">{{ title }}</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="toggle-column">
|
||||||
|
<button class="section-toggle" @click="toggleSection">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Toggle button for expanded section -->
|
||||||
|
<div v-show="isExpanded" class="section-content-wrapper">
|
||||||
|
<div class="section-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div class="toggle-column expanded">
|
||||||
|
<button class="section-toggle" @click="toggleSection">
|
||||||
|
<i class="fas fa-chevron-up"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
initiallyExpanded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const isExpanded = ref(props.initiallyExpanded);
|
||||||
|
|
||||||
|
const toggleSection = () => {
|
||||||
|
isExpanded.value = !isExpanded.value;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.section-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-column {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
z-index: 10;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-toggle:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-toggle:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed-section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
height: 38px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed-section-header .card-title {
|
||||||
|
margin: 0;
|
||||||
|
color: #495057;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-column.expanded {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container.collapsed {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container.collapsed .section-content-wrapper {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -42,9 +42,13 @@
|
|||||||
class="form-control"
|
class="form-control"
|
||||||
id="updateInterval"
|
id="updateInterval"
|
||||||
v-model.number="formData.updateInterval"
|
v-model.number="formData.updateInterval"
|
||||||
min="1"
|
min="5"
|
||||||
max="3600"
|
max="300"
|
||||||
|
required
|
||||||
>
|
>
|
||||||
|
<div class="form-text">
|
||||||
|
Enter value in seconds (5-300, default: 15)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-grid gap-2">
|
<div class="d-grid gap-2">
|
||||||
@ -73,14 +77,20 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'save']);
|
const emit = defineEmits(['update:modelValue', 'save']);
|
||||||
|
|
||||||
|
// Initialize form data with raw values from config
|
||||||
const formData = ref({
|
const formData = ref({
|
||||||
apiUri: props.config.apiUri || '',
|
apiUri: props.config.apiUri || '',
|
||||||
apiKey: props.config.apiKey || '',
|
apiKey: props.config.apiKey || '',
|
||||||
updateInterval: props.config.updateInterval / 1000
|
updateInterval: props.config.updateInterval || 15 // Default to 15 seconds
|
||||||
});
|
});
|
||||||
|
|
||||||
const saveConfig = () => {
|
const saveConfig = () => {
|
||||||
emit('save', { ...formData.value });
|
// Pass the raw values to parent
|
||||||
|
emit('save', {
|
||||||
|
apiUri: formData.value.apiUri,
|
||||||
|
apiKey: formData.value.apiKey,
|
||||||
|
updateInterval: formData.value.updateInterval // Pass seconds directly
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const closePanel = () => {
|
const closePanel = () => {
|
||||||
70
pvc-vue/src/components/general/NodeSelectBar.vue
Normal file
70
pvc-vue/src/components/general/NodeSelectBar.vue
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<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
Normal file
824
pvc-vue/src/components/general/VMSearchBar.vue
Normal file
@ -0,0 +1,824 @@
|
|||||||
|
<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>
|
||||||
@ -1,310 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
<!-- Node Tabs -->
|
<NodeSelectBar
|
||||||
<div class="node-tabs-wrapper">
|
v-model="selectedNode"
|
||||||
<div class="node-tabs" ref="tabsContainer">
|
:nodes="availableNodes"
|
||||||
<button
|
@select="handleNodeSelect"
|
||||||
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 -->
|
<!-- Node Details -->
|
||||||
<div v-if="selectedNodeData" class="node-details">
|
<div v-if="selectedNodeData" class="node-details">
|
||||||
<!-- Information Cards Section -->
|
<!-- Information Cards Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<CollapsibleSection title="Node Information" :initially-expanded="sections.info">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="info-row">
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<!-- Card 1: Daemon State -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Daemon State"
|
||||||
<h6 class="card-title mb-0 metric-label">Node Information</h6>
|
:value="selectedNodeData.daemon_state || 'Unknown'"
|
||||||
</div>
|
:bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
|
||||||
</div>
|
/>
|
||||||
<div class="toggle-column">
|
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
<!-- Card 2: Coordinator State -->
|
||||||
<i class="fas fa-chevron-down"></i>
|
<ValueCard
|
||||||
</button>
|
title="Coordinator State"
|
||||||
</div>
|
: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>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- Utilization Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="graphs-row">
|
||||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
<!-- Health Chart -->
|
||||||
<div class="section-content">
|
<HealthChart
|
||||||
<div class="collapsed-section-header">
|
title="Node Health"
|
||||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
:value="selectedNodeData.health || 0"
|
||||||
</div>
|
:chart-data="nodeHealthChartData"
|
||||||
</div>
|
:maintenance="isMaintenanceMode"
|
||||||
<div class="toggle-column">
|
/>
|
||||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
<!-- CPU Utilization Chart -->
|
||||||
</button>
|
<CPUChart
|
||||||
</div>
|
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>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- CPU Resources Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.cpu }">
|
<CollapsibleSection title="CPU Resources" :initially-expanded="sections.cpu">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="resources-row-cpu">
|
||||||
<div v-if="!sections.cpu" class="section-content-wrapper">
|
<!-- Card 1: Host CPUs -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Host CPUs"
|
||||||
<h6 class="card-title mb-0 metric-label">CPU Resources</h6>
|
:value="selectedNodeData.cpu_count || 0"
|
||||||
</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 -->
|
<!-- Card 2: Guest CPUs -->
|
||||||
<ValueCard
|
<ValueCard
|
||||||
title="Guest CPUs"
|
title="Guest CPUs"
|
||||||
:value="selectedNodeData.vcpu?.allocated || 0"
|
:value="selectedNodeData.vcpu?.allocated || 0"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Card 3: Load -->
|
<!-- Card 3: Load -->
|
||||||
<ValueCard
|
<ValueCard
|
||||||
title="Load"
|
title="Load"
|
||||||
:value="selectedNodeData.load || 0"
|
:value="selectedNodeData.load || 0"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-column expanded">
|
|
||||||
<button class="section-toggle" @click="toggleSection('cpu')">
|
|
||||||
<i class="fas fa-chevron-up"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<!-- Memory Resources Section -->
|
<!-- Memory Resources Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.resources }">
|
<CollapsibleSection title="Memory Resources" :initially-expanded="sections.resources">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="resources-row-memory">
|
||||||
<div v-if="!sections.resources" class="section-content-wrapper">
|
<!-- Total Memory -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Total Memory"
|
||||||
<h6 class="card-title mb-0 metric-label">Memory Resources</h6>
|
:value="formatMemory(selectedNodeData.memory?.total)"
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
<!-- Used Memory -->
|
||||||
<button class="section-toggle" @click="toggleSection('resources')">
|
<ValueCard
|
||||||
<i class="fas fa-chevron-down"></i>
|
title="Used Memory"
|
||||||
</button>
|
:value="formatMemory(selectedNodeData.memory?.used)"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- Running VMs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.vms }">
|
<CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="vms-container">
|
||||||
<div v-if="!sections.vms" class="section-content-wrapper">
|
<div class="vms-card">
|
||||||
<div class="section-content">
|
<div class="card-header">
|
||||||
<div class="collapsed-section-header">
|
<h6 class="card-title mb-0">
|
||||||
<h6 class="card-title mb-0 metric-label">Running VMs</h6>
|
<span class="metric-label">Running VMs</span>
|
||||||
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="toggle-column">
|
<div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
|
||||||
<button class="section-toggle" @click="toggleSection('vms')">
|
<p>No VMs running on this node</p>
|
||||||
<i class="fas fa-chevron-down"></i>
|
</div>
|
||||||
</button>
|
<div v-else class="vm-list" :style="{
|
||||||
</div>
|
'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))`
|
||||||
</div>
|
}">
|
||||||
<!-- Toggle button for expanded section -->
|
<div
|
||||||
<div v-show="sections.vms" class="section-content-wrapper">
|
v-for="vm in selectedNodeData.running_domains"
|
||||||
<div class="section-content">
|
:key="vm"
|
||||||
<div class="vms-container">
|
class="vm-item"
|
||||||
<div class="vms-card">
|
@click="handleVmClick(vm)"
|
||||||
<div class="card-header">
|
title="View VM details"
|
||||||
<h6 class="card-title mb-0">
|
>
|
||||||
<span class="metric-label">Running VMs</span>
|
{{ vm }}
|
||||||
</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>
|
</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>
|
</CollapsibleSection>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No node selected message -->
|
<!-- No node selected message -->
|
||||||
@ -317,11 +186,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
// Import all the same components and functions from the original Nodes.vue
|
// Import all the same components and functions from the original Nodes.vue
|
||||||
import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
|
import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
|
||||||
import CPUChart from './charts/CPUChart.vue';
|
import CPUChart from '../../charts/CPUChart.vue';
|
||||||
import MemoryChart from './charts/MemoryChart.vue';
|
import MemoryChart from '../../charts/MemoryChart.vue';
|
||||||
import StorageChart from './charts/StorageChart.vue';
|
import StorageChart from '../../charts/StorageChart.vue';
|
||||||
import HealthChart from './charts/HealthChart.vue';
|
import HealthChart from '../../charts/HealthChart.vue';
|
||||||
import ValueCard from './ValueCard.vue';
|
import ValueCard from '../../general/ValueCard.vue';
|
||||||
|
import CollapsibleSection from '../../general/CollapsibleSection.vue';
|
||||||
|
import NodeSelectBar from '../../general/NodeSelectBar.vue';
|
||||||
|
|
||||||
// Move all the props, refs, computed properties, and functions from Nodes.vue
|
// Move all the props, refs, computed properties, and functions from Nodes.vue
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -351,11 +222,6 @@ const sections = ref({
|
|||||||
vms: true
|
vms: true
|
||||||
});
|
});
|
||||||
|
|
||||||
// Toggle section visibility
|
|
||||||
const toggleSection = (section) => {
|
|
||||||
sections.value[section] = !sections.value[section];
|
|
||||||
};
|
|
||||||
|
|
||||||
// State for selected node and tab scrolling
|
// State for selected node and tab scrolling
|
||||||
const selectedNode = ref('');
|
const selectedNode = ref('');
|
||||||
const tabsContainer = ref(null);
|
const tabsContainer = ref(null);
|
||||||
@ -613,6 +479,15 @@ watch(() => props.nodeData, () => {
|
|||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', checkScrollButtons);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -38,6 +38,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import ValueCard from '../../general/ValueCard.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
nodeData: {
|
nodeData: {
|
||||||
@ -1,269 +1,181 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
<!-- Information Cards Section -->
|
<!-- Information Cards Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="metrics-row">
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<!-- Card 1: PVC Version -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="PVC Version"
|
||||||
<h6 class="card-title mb-0 metric-label">Cluster Information</h6>
|
:value="clusterData.pvc_version || 'Unknown'"
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
<!-- Card 2: Primary Node -->
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
<ValueCard
|
||||||
<i class="fas fa-chevron-down"></i>
|
title="Primary Node"
|
||||||
</button>
|
:value="clusterData.primary_node || 'N/A'"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- Utilization Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="graphs-row">
|
||||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
<!-- Health Chart -->
|
||||||
<div class="section-content">
|
<HealthChart
|
||||||
<div class="collapsed-section-header">
|
title="Cluster Health"
|
||||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
:value="clusterHealth"
|
||||||
</div>
|
:chart-data="healthChartData"
|
||||||
</div>
|
:maintenance="isMaintenanceMode"
|
||||||
<div class="toggle-column">
|
/>
|
||||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
<!-- CPU Chart -->
|
||||||
</button>
|
<CPUChart
|
||||||
</div>
|
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>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- Health Messages Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
|
<CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="section-content">
|
||||||
<div v-if="!sections.messages" class="section-content-wrapper">
|
<!-- Health messages card -->
|
||||||
<div class="section-content">
|
<div class="metric-card">
|
||||||
<div class="collapsed-section-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="toggle-column">
|
<div class="messages-list">
|
||||||
<button class="section-toggle" @click="toggleSection('messages')">
|
<template v-if="displayMessages.length">
|
||||||
<i class="fas fa-chevron-down"></i>
|
<div
|
||||||
</button>
|
v-for="(msg, idx) in displayMessages"
|
||||||
</div>
|
:key="idx"
|
||||||
</div>
|
:class="[
|
||||||
<!-- Toggle button for expanded section -->
|
'health-message',
|
||||||
<div v-show="sections.messages" class="section-content-wrapper">
|
getDeltaClass(msg.health_delta, msg),
|
||||||
<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">
|
<div class="message-header">
|
||||||
<i class="fas fa-circle-check me-1"></i>
|
<i class="fas" :class="getMessageIcon(msg)"></i>
|
||||||
<span class="message-id">Cluster healthy</span>
|
<span class="message-id">{{ getMessageId(msg) }}</span>
|
||||||
|
<span v-if="showHealthDelta(msg)" class="health-delta">
|
||||||
|
(-{{ msg.health_delta }}%)
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-content">
|
<div class="message-content">
|
||||||
Cluster is at full health with no faults
|
{{ getMessageText(msg) }}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toggle-column expanded">
|
|
||||||
<button class="section-toggle" @click="toggleSection('messages')">
|
|
||||||
<i class="fas fa-chevron-up"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<!-- States Graphs Section -->
|
<!-- States Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.states }">
|
<CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="section-content">
|
||||||
<div v-if="!sections.states" class="section-content-wrapper">
|
<!-- States Graphs Row -->
|
||||||
<div class="section-content">
|
<div class="states-graphs-row">
|
||||||
<div class="collapsed-section-header">
|
<!-- Node States Graph -->
|
||||||
<h6 class="card-title mb-0 metric-label">State Graphs</h6>
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Node States</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<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 -->
|
<!-- VM States Graph -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0">
|
<h6 class="card-title mb-0">
|
||||||
<span class="metric-label">VM States</span>
|
<span class="metric-label">VM States</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- OSD States Graph -->
|
<!-- OSD States Graph -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0">
|
<h6 class="card-title mb-0">
|
||||||
<span class="metric-label">OSD States</span>
|
<span class="metric-label">OSD States</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -282,11 +194,12 @@ import {
|
|||||||
Filler
|
Filler
|
||||||
} from 'chart.js';
|
} from 'chart.js';
|
||||||
import annotationPlugin from 'chartjs-plugin-annotation';
|
import annotationPlugin from 'chartjs-plugin-annotation';
|
||||||
import CPUChart from './charts/CPUChart.vue';
|
import CPUChart from '../../charts/CPUChart.vue';
|
||||||
import MemoryChart from './charts/MemoryChart.vue';
|
import MemoryChart from '../../charts/MemoryChart.vue';
|
||||||
import StorageChart from './charts/StorageChart.vue';
|
import StorageChart from '../../charts/StorageChart.vue';
|
||||||
import HealthChart from './charts/HealthChart.vue';
|
import HealthChart from '../../charts/HealthChart.vue';
|
||||||
import ValueCard from './ValueCard.vue';
|
import ValueCard from '../../general/ValueCard.vue';
|
||||||
|
import CollapsibleSection from '../../general/CollapsibleSection.vue';
|
||||||
|
|
||||||
// Register Chart.js components
|
// Register Chart.js components
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
@ -912,11 +825,6 @@ const sections = ref({
|
|||||||
states: true
|
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
|
// Add a new function to determine if we should show the health delta
|
||||||
const showHealthDelta = (msg) => {
|
const showHealthDelta = (msg) => {
|
||||||
// Don't show delta for "No issues detected" or similar messages
|
// Don't show delta for "No issues detected" or similar messages
|
||||||
157
pvc-vue/src/components/pages/vms/VMDetail.vue.bak
Normal file
157
pvc-vue/src/components/pages/vms/VMDetail.vue.bak
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
<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
Normal file
385
pvc-vue/src/components/pages/vms/VMOverview.vue
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
<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>
|
||||||
@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
|
|||||||
const config = ref({
|
const config = ref({
|
||||||
apiUri: localStorage.getItem('pvc_api_uri') || '',
|
apiUri: localStorage.getItem('pvc_api_uri') || '',
|
||||||
apiKey: localStorage.getItem('pvc_api_key') || '',
|
apiKey: localStorage.getItem('pvc_api_key') || '',
|
||||||
updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 5000
|
updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 15 // Default to 15s
|
||||||
});
|
});
|
||||||
|
|
||||||
// Computed
|
// Computed
|
||||||
@ -16,12 +16,18 @@ export const useApiStore = defineStore('api', () => {
|
|||||||
|
|
||||||
// Actions
|
// Actions
|
||||||
const updateConfig = (newConfig) => {
|
const updateConfig = (newConfig) => {
|
||||||
config.value = { ...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
|
||||||
|
};
|
||||||
|
|
||||||
// Save to localStorage
|
// Save to localStorage
|
||||||
localStorage.setItem('pvc_api_uri', newConfig.apiUri);
|
localStorage.setItem('pvc_api_uri', newConfig.apiUri);
|
||||||
localStorage.setItem('pvc_api_key', newConfig.apiKey);
|
localStorage.setItem('pvc_api_key', newConfig.apiKey);
|
||||||
localStorage.setItem('pvc_update_interval', newConfig.updateInterval.toString());
|
localStorage.setItem('pvc_update_interval', interval.toString());
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchStatus = async () => {
|
const fetchStatus = async () => {
|
||||||
|
|||||||
13
pvc-vue/src/stores/cluster.js
Normal file
13
pvc-vue/src/stores/cluster.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
export const useClusterStore = defineStore('cluster', {
|
||||||
|
state: () => ({
|
||||||
|
clusterData: {}
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
setClusterData(data) {
|
||||||
|
this.clusterData = data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
17
pvc-vue/src/stores/vm.js
Normal file
17
pvc-vue/src/stores/vm.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
export const useVMStore = defineStore('vm', {
|
||||||
|
state: () => ({
|
||||||
|
vmList: [],
|
||||||
|
metrics: {}
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
setVMList(vms) {
|
||||||
|
this.vmList = vms;
|
||||||
|
},
|
||||||
|
setMetrics(metrics) {
|
||||||
|
this.metrics = metrics;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -10,8 +10,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import PageTitle from '../components/PageTitle.vue';
|
import PageTitle from '../components/general/PageTitle.vue';
|
||||||
import NodeOverview from '../components/NodeOverview.vue';
|
import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
nodeData: {
|
nodeData: {
|
||||||
@ -39,4 +39,9 @@ defineProps({
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Remove top margin from first child (usually PageTitle) */
|
||||||
|
.content-grid > :first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -9,8 +9,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import ClusterOverview from '../components/ClusterOverview.vue';
|
import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
|
||||||
import PageTitle from '../components/PageTitle.vue';
|
import PageTitle from '../components/general/PageTitle.vue';
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
clusterData: {
|
clusterData: {
|
||||||
|
|||||||
@ -5,14 +5,16 @@
|
|||||||
:vmData="vmData"
|
:vmData="vmData"
|
||||||
:metricsData="metricsData"
|
:metricsData="metricsData"
|
||||||
:clusterData="clusterData"
|
:clusterData="clusterData"
|
||||||
|
:loading="isLoading"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import PageTitle from '../components/PageTitle.vue';
|
import PageTitle from '../components/general/PageTitle.vue';
|
||||||
import VMOverview from '../components/VMOverview.vue';
|
import VMOverview from '../components/pages/vms/VMOverview.vue';
|
||||||
|
|
||||||
|
// Define props to receive data from App.vue
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
vmData: {
|
vmData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@ -28,11 +30,12 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
|
},
|
||||||
|
isLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add debugging
|
|
||||||
console.log('VMs.vue received vmData:', props.vmData);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -42,4 +45,9 @@ console.log('VMs.vue received vmData:', props.vmData);
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Remove top margin from first child (usually PageTitle) */
|
||||||
|
.content-grid > :first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,6 +1,11 @@
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import vue from '@vitejs/plugin-vue';
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
|
function getTimestamp() {
|
||||||
|
const now = new Date();
|
||||||
|
return now.toISOString().replace('T', ' ').replace('Z', '');
|
||||||
|
}
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
server: {
|
server: {
|
||||||
@ -21,7 +26,7 @@ export default defineConfig({
|
|||||||
const requestPath = req.url.replace('/api', '');
|
const requestPath = req.url.replace('/api', '');
|
||||||
proxyReq.path = `${apiPath}${requestPath}`;
|
proxyReq.path = `${apiPath}${requestPath}`;
|
||||||
|
|
||||||
console.log(`Proxying to: ${options.target}${proxyReq.path}`);
|
console.log(`${getTimestamp()} Proxying to: ${options.target}${proxyReq.path}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (req.headers['x-api-key']) {
|
if (req.headers['x-api-key']) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user