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 -->
|
<!-- VM Details -->
|
||||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
||||||
<!-- Information Cards Section -->
|
<VMDetail :vm="selectedVMData" />
|
||||||
<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) -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No VM Selected Message -->
|
<!-- No VM Selected Message -->
|
||||||
@ -157,6 +125,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
import VMDetail from './VMDetail.vue';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user