Add basic but broken VM page
This commit is contained in:
Joshua Boniface
parent
78608da00a
commit
14e11a4772
318
pvc-vue/src/components/VMDetail.vue
Normal file
318
pvc-vue/src/components/VMDetail.vue
Normal file
@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="vm-detail">
|
||||
<!-- Basic Info Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
||||
<!-- Only show header when collapsed -->
|
||||
<div v-if="!sections.info" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">VM Information</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('info')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content when expanded -->
|
||||
<div v-show="sections.info" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="info-cards">
|
||||
<ValueCard title="Current State" :value="vm.state" :status="getStateColor(vm.state)" />
|
||||
<ValueCard title="Virtual CPUs" :value="vm.vcpu" />
|
||||
<ValueCard title="Memory (MB)" :value="vm.memory" />
|
||||
<ValueCard title="Host Node" :value="vm.node" />
|
||||
<ValueCard title="Migration Status" :value="vm.migrated || 'No'" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection('info')">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Networks Section -->
|
||||
<template v-if="vm.networks && vm.networks.length > 0">
|
||||
<div v-for="network in vm.networks" :key="network.vni" class="section-container" :class="{ 'collapsed': !sections[`network_${network.vni}`] }">
|
||||
<!-- Only show header when collapsed -->
|
||||
<div v-if="!sections[`network_${network.vni}`]" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Network Interface {{ network.vni }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content when expanded -->
|
||||
<div v-show="sections[`network_${network.vni}`]" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="info-cards">
|
||||
<ValueCard title="Interface Type" :value="network.type" />
|
||||
<ValueCard title="MAC Address" :value="network.mac" />
|
||||
<ValueCard title="Network Model" :value="network.model" />
|
||||
<ValueCard title="Network Source" :value="network.source" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection(`network_${network.vni}`)">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Disks Section -->
|
||||
<template v-if="vm.disks && vm.disks.length > 0">
|
||||
<div v-for="disk in vm.disks" :key="disk.dev" class="section-container" :class="{ 'collapsed': !sections[`disk_${disk.dev}`] }">
|
||||
<!-- Only show header when collapsed -->
|
||||
<div v-if="!sections[`disk_${disk.dev}`]" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Disk {{ disk.dev }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content when expanded -->
|
||||
<div v-show="sections[`disk_${disk.dev}`]" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="info-cards">
|
||||
<ValueCard title="Storage Type" :value="disk.type" />
|
||||
<ValueCard title="Storage Pool" :value="getDiskPool(disk.name)" />
|
||||
<ValueCard title="Volume Name" :value="getDiskVolume(disk.name)" />
|
||||
<ValueCard title="Bus Interface" :value="disk.bus" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection(`disk_${disk.dev}`)">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ValueCard from './ValueCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
vm: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// Dynamic sections state
|
||||
const sections = ref({
|
||||
info: true
|
||||
});
|
||||
|
||||
// Initialize sections for networks and disks
|
||||
onMounted(() => {
|
||||
if (props.vm.networks) {
|
||||
props.vm.networks.forEach(network => {
|
||||
sections.value[`network_${network.vni}`] = true;
|
||||
});
|
||||
}
|
||||
if (props.vm.disks) {
|
||||
props.vm.disks.forEach(disk => {
|
||||
sections.value[`disk_${disk.dev}`] = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const toggleSection = (section) => {
|
||||
sections.value[section] = !sections.value[section];
|
||||
};
|
||||
|
||||
const getStateColor = (state) => {
|
||||
if (!state) return '';
|
||||
|
||||
switch(state.toLowerCase()) {
|
||||
case 'start':
|
||||
return 'success';
|
||||
case 'migrate':
|
||||
case 'unmigrate':
|
||||
case 'disable':
|
||||
case 'provision':
|
||||
return 'info';
|
||||
case 'shutdown':
|
||||
case 'restart':
|
||||
return 'warning';
|
||||
case 'stop':
|
||||
return 'danger';
|
||||
case 'mirror':
|
||||
return 'purple';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const getDiskPool = (name) => {
|
||||
return name ? name.split('/')[0] : '';
|
||||
};
|
||||
|
||||
const getDiskVolume = (name) => {
|
||||
return name ? name.split('/')[1] : '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vm-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Section styling - match Overview/Node pages exactly */
|
||||
.section-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-content-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* Toggle button styling */
|
||||
.toggle-column {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
z-index: 10;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-toggle:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Collapsed section header */
|
||||
.collapsed-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.collapsed-section-header .card-title {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Card grid layout */
|
||||
.info-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Metric card styles */
|
||||
:deep(.metric-card) {
|
||||
min-width: 180px;
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.metric-card .card-header) {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.card-header h6) {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.metric-card .card-body) {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.metric-card .metric-value) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@ -110,39 +110,7 @@
|
||||
|
||||
<!-- VM Details -->
|
||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
||||
<!-- Information Cards Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.info" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">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>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.info" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="info-row">
|
||||
<!-- Information cards will go here -->
|
||||
<p>VM information cards will be populated here</p>
|
||||
</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>
|
||||
|
||||
<!-- Other sections... -->
|
||||
<!-- (Utilization Graphs, Resources, Network sections follow the same pattern) -->
|
||||
<VMDetail :vm="selectedVMData" />
|
||||
</div>
|
||||
|
||||
<!-- No VM Selected Message -->
|
||||
@ -157,6 +125,7 @@
|
||||
<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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user