First attempt at fixing broken VM page
This commit is contained in:
Joshua Boniface
parent
ac9428a41b
commit
526e6f4a36
@ -1,113 +1,79 @@
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</template>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</template>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import CollapsibleSection from './CollapsibleSection.vue';
|
||||
import ValueCard from './ValueCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
@ -117,58 +83,34 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
// Dynamic sections state
|
||||
// Section visibility state
|
||||
const sections = ref({
|
||||
info: true
|
||||
info: true,
|
||||
resources: true,
|
||||
networks: true,
|
||||
storage: 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];
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
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 '';
|
||||
case 'start': return 'success';
|
||||
case 'stop': return 'danger';
|
||||
case 'disable': return 'warning';
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
const getDiskPool = (name) => {
|
||||
return name ? name.split('/')[0] : '';
|
||||
const formatMemory = (memoryMB) => {
|
||||
if (!memoryMB) return '0 GB';
|
||||
return Math.round(memoryMB / 1024) + ' GB';
|
||||
};
|
||||
|
||||
const getDiskVolume = (name) => {
|
||||
return name ? name.split('/')[1] : '';
|
||||
const formatStorage = (sizeGB) => {
|
||||
if (!sizeGB) return '0 GB';
|
||||
if (sizeGB < 1024) return sizeGB + ' GB';
|
||||
return (sizeGB / 1024).toFixed(1) + ' TB';
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -177,142 +119,39 @@ const getDiskVolume = (name) => {
|
||||
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 {
|
||||
.info-row,
|
||||
.resources-row {
|
||||
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);
|
||||
.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;
|
||||
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;
|
||||
@media (min-width: 1201px) {
|
||||
.info-row { grid-template-columns: repeat(4, 1fr); }
|
||||
.resources-row { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
: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;
|
||||
@media (max-width: 1200px) {
|
||||
.info-row { grid-template-columns: repeat(2, 1fr); }
|
||||
.resources-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@ -1,149 +1,125 @@
|
||||
<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"
|
||||
>
|
||||
<div class="overview-container">
|
||||
<!-- VM Controls -->
|
||||
<div class="vm-controls-container">
|
||||
<div class="controls-row">
|
||||
<button
|
||||
v-if="searchQuery && showVMList"
|
||||
class="btn-clear"
|
||||
@click="clearSearch"
|
||||
class="btn btn-outline-secondary list-toggle-btn"
|
||||
@click="toggleVMList"
|
||||
:class="{ 'active': showVMList }"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
<i class="fas fa-list"></i> List VMs
|
||||
</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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
</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>
|
||||
<!-- VM List -->
|
||||
<div v-if="showVMList" 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">
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VM Details -->
|
||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
||||
<!-- Information Section -->
|
||||
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
|
||||
<div class="info-row">
|
||||
<!-- ... VM info cards ... -->
|
||||
<!-- 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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Graphs Section -->
|
||||
<CollapsibleSection title="Utilization Graphs" :initially-expanded="sections.graphs">
|
||||
<div class="graphs-row">
|
||||
<!-- ... VM graphs ... -->
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Resources Section -->
|
||||
<CollapsibleSection title="Resources" :initially-expanded="sections.resources">
|
||||
<div class="resources-row">
|
||||
<!-- ... resource cards ... -->
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Network Section -->
|
||||
<CollapsibleSection title="Network" :initially-expanded="sections.network">
|
||||
<div class="network-row">
|
||||
<!-- ... network info ... -->
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
|
||||
<!-- No VM Selected Message -->
|
||||
<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>
|
||||
@ -380,7 +356,7 @@ const handleSearchFocus = () => {
|
||||
// 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');
|
||||
const vmList = document.querySelector('.vm-list-container');
|
||||
if (vmList && vmList.contains(event.relatedTarget)) {
|
||||
return;
|
||||
}
|
||||
@ -443,7 +419,7 @@ 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');
|
||||
const vmList = document.querySelector('.vm-list-container');
|
||||
|
||||
// If click is outside both the controls and list, close the list
|
||||
if ((!vmControls || !vmControls.contains(event.target)) &&
|
||||
@ -513,98 +489,19 @@ watch(() => props.vmData, (newData) => {
|
||||
</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;
|
||||
.overview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
@ -675,24 +572,20 @@ watch(() => props.vmData, (newData) => {
|
||||
}
|
||||
|
||||
/* VM List styles */
|
||||
.vm-list-fullpage {
|
||||
.vm-list-container {
|
||||
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);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.vm-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.vm-list-item {
|
||||
@ -771,15 +664,16 @@ watch(() => props.vmData, (newData) => {
|
||||
}
|
||||
|
||||
.no-vm-selected {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* VM Details */
|
||||
.vm-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Filter menu styles */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user