First attempt at fixing broken VM page
This commit is contained in:
Joshua Boniface
parent
ac9428a41b
commit
526e6f4a36
@ -1,113 +1,79 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vm-detail">
|
<div class="vm-detail">
|
||||||
<!-- Basic Info Section -->
|
<!-- Basic Info Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
|
||||||
<!-- Only show header when collapsed -->
|
<div class="info-row">
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<ValueCard
|
||||||
<div class="section-content">
|
title="State"
|
||||||
<div class="collapsed-section-header">
|
:value="vm.state || 'Unknown'"
|
||||||
<h6 class="card-title mb-0 metric-label">VM Information</h6>
|
:status="getStateColor(vm.state)"
|
||||||
</div>
|
/>
|
||||||
</div>
|
<ValueCard
|
||||||
<div class="toggle-column">
|
title="Node"
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
:value="vm.node || 'N/A'"
|
||||||
<i class="fas fa-chevron-down"></i>
|
/>
|
||||||
</button>
|
<ValueCard
|
||||||
</div>
|
title="CPUs"
|
||||||
</div>
|
:value="vm.vcpus || 0"
|
||||||
<!-- Content when expanded -->
|
/>
|
||||||
<div v-show="sections.info" class="section-content-wrapper">
|
<ValueCard
|
||||||
<div class="section-content">
|
title="Memory"
|
||||||
<div class="info-cards">
|
:value="formatMemory(vm.memory)"
|
||||||
<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>
|
||||||
|
</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 -->
|
<!-- Networks Section -->
|
||||||
<template v-if="vm.networks && vm.networks.length > 0">
|
<CollapsibleSection
|
||||||
<div v-for="network in vm.networks" :key="network.vni" class="section-container" :class="{ 'collapsed': !sections[`network_${network.vni}`] }">
|
v-if="vm.networks?.length"
|
||||||
<!-- Only show header when collapsed -->
|
title="Network Interfaces"
|
||||||
<div v-if="!sections[`network_${network.vni}`]" class="section-content-wrapper">
|
:initially-expanded="sections.networks"
|
||||||
<div class="section-content">
|
>
|
||||||
<div class="collapsed-section-header">
|
<div class="networks-row">
|
||||||
<h6 class="card-title mb-0 metric-label">Network Interface {{ network.vni }}</h6>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="toggle-column">
|
</CollapsibleSection>
|
||||||
<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 -->
|
<!-- Storage Section -->
|
||||||
<template v-if="vm.disks && vm.disks.length > 0">
|
<CollapsibleSection
|
||||||
<div v-for="disk in vm.disks" :key="disk.dev" class="section-container" :class="{ 'collapsed': !sections[`disk_${disk.dev}`] }">
|
v-if="vm.disks?.length"
|
||||||
<!-- Only show header when collapsed -->
|
title="Storage"
|
||||||
<div v-if="!sections[`disk_${disk.dev}`]" class="section-content-wrapper">
|
:initially-expanded="sections.storage"
|
||||||
<div class="section-content">
|
>
|
||||||
<div class="collapsed-section-header">
|
<div class="storage-row">
|
||||||
<h6 class="card-title mb-0 metric-label">Disk {{ disk.dev }}</h6>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="toggle-column">
|
</CollapsibleSection>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import CollapsibleSection from './CollapsibleSection.vue';
|
||||||
import ValueCard from './ValueCard.vue';
|
import ValueCard from './ValueCard.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -117,58 +83,34 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dynamic sections state
|
// Section visibility state
|
||||||
const sections = ref({
|
const sections = ref({
|
||||||
info: true
|
info: true,
|
||||||
|
resources: true,
|
||||||
|
networks: true,
|
||||||
|
storage: true
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize sections for networks and disks
|
// Helper functions
|
||||||
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) => {
|
const getStateColor = (state) => {
|
||||||
if (!state) return '';
|
if (!state) return '';
|
||||||
|
|
||||||
switch(state.toLowerCase()) {
|
switch(state.toLowerCase()) {
|
||||||
case 'start':
|
case 'start': return 'success';
|
||||||
return 'success';
|
case 'stop': return 'danger';
|
||||||
case 'migrate':
|
case 'disable': return 'warning';
|
||||||
case 'unmigrate':
|
default: return '';
|
||||||
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) => {
|
const formatMemory = (memoryMB) => {
|
||||||
return name ? name.split('/')[0] : '';
|
if (!memoryMB) return '0 GB';
|
||||||
|
return Math.round(memoryMB / 1024) + ' GB';
|
||||||
};
|
};
|
||||||
|
|
||||||
const getDiskVolume = (name) => {
|
const formatStorage = (sizeGB) => {
|
||||||
return name ? name.split('/')[1] : '';
|
if (!sizeGB) return '0 GB';
|
||||||
|
if (sizeGB < 1024) return sizeGB + ' GB';
|
||||||
|
return (sizeGB / 1024).toFixed(1) + ' TB';
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -177,142 +119,39 @@ const getDiskVolume = (name) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section styling - match Overview/Node pages exactly */
|
.info-row,
|
||||||
.section-container {
|
.resources-row {
|
||||||
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;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Metric card styles */
|
.networks-row,
|
||||||
:deep(.metric-card) {
|
.storage-row {
|
||||||
min-width: 180px;
|
display: flex;
|
||||||
background: white;
|
flex-direction: column;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
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;
|
border-radius: 0.25rem;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.metric-card .card-header) {
|
@media (min-width: 1201px) {
|
||||||
background-color: rgba(0, 0, 0, 0.03);
|
.info-row { grid-template-columns: repeat(4, 1fr); }
|
||||||
padding: 0.5rem;
|
.resources-row { grid-template-columns: repeat(2, 1fr); }
|
||||||
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) {
|
@media (max-width: 1200px) {
|
||||||
font-size: 0.95rem;
|
.info-row { grid-template-columns: repeat(2, 1fr); }
|
||||||
font-weight: 600;
|
.resources-row { grid-template-columns: 1fr; }
|
||||||
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>
|
</style>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- VM Selector Controls -->
|
<div class="overview-container">
|
||||||
|
<!-- VM Controls -->
|
||||||
<div class="vm-controls-container">
|
<div class="vm-controls-container">
|
||||||
<div class="controls-row">
|
<div class="controls-row">
|
||||||
<button
|
<button
|
||||||
@ -83,8 +84,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- VM List (Full Page) -->
|
<!-- VM List -->
|
||||||
<div v-if="showVMList" class="vm-list-fullpage">
|
<div v-if="showVMList" class="vm-list-container">
|
||||||
<div v-if="filteredVMs.length === 0" class="no-vms-message">
|
<div v-if="filteredVMs.length === 0" class="no-vms-message">
|
||||||
<p>No VMs match your search criteria</p>
|
<p>No VMs match your search criteria</p>
|
||||||
</div>
|
</div>
|
||||||
@ -110,33 +111,7 @@
|
|||||||
|
|
||||||
<!-- VM Details -->
|
<!-- VM Details -->
|
||||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
||||||
<!-- Information Section -->
|
<VMDetail :vm="selectedVMData" />
|
||||||
<CollapsibleSection title="VM Information" :initially-expanded="sections.info">
|
|
||||||
<div class="info-row">
|
|
||||||
<!-- ... VM info cards ... -->
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<!-- No VM Selected Message -->
|
<!-- No VM Selected Message -->
|
||||||
@ -146,6 +121,7 @@
|
|||||||
Please select a VM from the list to view its details
|
Please select a VM from the list to view its details
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -380,7 +356,7 @@ const handleSearchFocus = () => {
|
|||||||
// Handle search blur
|
// Handle search blur
|
||||||
const handleSearchBlur = (event) => {
|
const handleSearchBlur = (event) => {
|
||||||
// Don't close the list if clicking on another element within the list
|
// 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)) {
|
if (vmList && vmList.contains(event.relatedTarget)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -443,7 +419,7 @@ const handleClickOutside = (event) => {
|
|||||||
// Only handle this if a VM is selected and the list is showing
|
// Only handle this if a VM is selected and the list is showing
|
||||||
if (selectedVM.value && showVMList.value) {
|
if (selectedVM.value && showVMList.value) {
|
||||||
const vmControls = document.querySelector('.vm-controls-container');
|
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 click is outside both the controls and list, close the list
|
||||||
if ((!vmControls || !vmControls.contains(event.target)) &&
|
if ((!vmControls || !vmControls.contains(event.target)) &&
|
||||||
@ -513,98 +489,19 @@ watch(() => props.vmData, (newData) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* ... continuing from where we left off ... */
|
.overview-container {
|
||||||
|
display: flex;
|
||||||
.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;
|
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;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
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 {
|
.vm-controls-container {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls-row {
|
.controls-row {
|
||||||
@ -675,24 +572,20 @@ watch(() => props.vmData, (newData) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* VM List styles */
|
/* VM List styles */
|
||||||
.vm-list-fullpage {
|
.vm-list-container {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
margin-bottom: 1rem;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
margin-bottom: 0.5rem;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vm-list {
|
.vm-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
|
||||||
max-height: calc(100vh - 200px);
|
max-height: calc(100vh - 200px);
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vm-list-item {
|
.vm-list-item {
|
||||||
@ -771,15 +664,16 @@ watch(() => props.vmData, (newData) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.no-vm-selected {
|
.no-vm-selected {
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* VM Details */
|
/* VM Details */
|
||||||
.vm-details {
|
.vm-details {
|
||||||
display: flex;
|
background-color: white;
|
||||||
flex-direction: column;
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
gap: 0.5rem;
|
border-radius: 0.25rem;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filter menu styles */
|
/* Filter menu styles */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user