Refactor collapsable section into reusable component
This commit is contained in:
Joshua Boniface
parent
14e11a4772
commit
ac9428a41b
@ -1,23 +1,7 @@
|
||||
<template>
|
||||
<div class="overview-container">
|
||||
<!-- 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">Cluster 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">
|
||||
<CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
|
||||
<div class="metrics-row">
|
||||
<!-- Card 1: PVC Version -->
|
||||
<ValueCard
|
||||
@ -67,33 +51,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Utilization Graphs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||
<div class="graphs-row">
|
||||
<!-- Health Chart -->
|
||||
<HealthChart
|
||||
@ -124,32 +85,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Health Messages Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.messages" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('messages')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.messages" class="section-content-wrapper">
|
||||
<CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
|
||||
<div class="section-content">
|
||||
<!-- Health messages card -->
|
||||
<div class="metric-card">
|
||||
@ -192,31 +131,10 @@
|
||||
</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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- States Graphs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.states }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.states" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">State Graphs</h6>
|
||||
</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">
|
||||
<CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
|
||||
<div class="section-content">
|
||||
<!-- States Graphs Row -->
|
||||
<div class="states-graphs-row">
|
||||
@ -257,13 +175,7 @@
|
||||
</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>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -287,6 +199,7 @@ import MemoryChart from './charts/MemoryChart.vue';
|
||||
import StorageChart from './charts/StorageChart.vue';
|
||||
import HealthChart from './charts/HealthChart.vue';
|
||||
import ValueCard from './ValueCard.vue';
|
||||
import CollapsibleSection from './CollapsibleSection.vue';
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
@ -912,11 +825,6 @@ const sections = ref({
|
||||
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
|
||||
const showHealthDelta = (msg) => {
|
||||
// Don't show delta for "No issues detected" or similar messages
|
||||
|
||||
140
pvc-vue/src/components/CollapsibleSection.vue
Normal file
140
pvc-vue/src/components/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>
|
||||
@ -25,23 +25,7 @@
|
||||
<!-- Node Details -->
|
||||
<div v-if="selectedNodeData" class="node-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">Node 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">
|
||||
<CollapsibleSection title="Node Information" :initially-expanded="sections.info">
|
||||
<div class="info-row">
|
||||
<!-- Card 1: Daemon State -->
|
||||
<ValueCard
|
||||
@ -82,33 +66,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Utilization Graphs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||
<div class="graphs-row">
|
||||
<!-- Health Chart -->
|
||||
<HealthChart
|
||||
@ -139,33 +100,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- CPU Resources Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.cpu }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.cpu" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">CPU Resources</h6>
|
||||
</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">
|
||||
<CollapsibleSection title="CPU Resources" :initially-expanded="sections.cpu">
|
||||
<div class="resources-row-cpu">
|
||||
<!-- Card 1: Host CPUs -->
|
||||
<ValueCard
|
||||
@ -185,33 +123,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Memory Resources Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.resources }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.resources" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Memory Resources</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('resources')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.resources" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<CollapsibleSection title="Memory Resources" :initially-expanded="sections.resources">
|
||||
<div class="resources-row-memory">
|
||||
<!-- Total Memory -->
|
||||
<ValueCard
|
||||
@ -243,33 +158,10 @@
|
||||
: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>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Running VMs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.vms }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.vms" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Running VMs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('vms')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.vms" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
|
||||
<div class="vms-container">
|
||||
<div class="vms-card">
|
||||
<div class="card-header">
|
||||
@ -297,14 +189,7 @@
|
||||
</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>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
|
||||
<!-- No node selected message -->
|
||||
@ -322,6 +207,7 @@ import MemoryChart from './charts/MemoryChart.vue';
|
||||
import StorageChart from './charts/StorageChart.vue';
|
||||
import HealthChart from './charts/HealthChart.vue';
|
||||
import ValueCard from './ValueCard.vue';
|
||||
import CollapsibleSection from './CollapsibleSection.vue';
|
||||
|
||||
// Move all the props, refs, computed properties, and functions from Nodes.vue
|
||||
const props = defineProps({
|
||||
@ -351,11 +237,6 @@ const sections = ref({
|
||||
vms: true
|
||||
});
|
||||
|
||||
// Toggle section visibility
|
||||
const toggleSection = (section) => {
|
||||
sections.value[section] = !sections.value[section];
|
||||
};
|
||||
|
||||
// State for selected node and tab scrolling
|
||||
const selectedNode = ref('');
|
||||
const tabsContainer = ref(null);
|
||||
|
||||
@ -110,7 +110,33 @@
|
||||
|
||||
<!-- VM Details -->
|
||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
||||
<VMDetail :vm="selectedVMData" />
|
||||
<!-- Information Section -->
|
||||
<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>
|
||||
|
||||
<!-- No VM Selected Message -->
|
||||
@ -126,6 +152,7 @@
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import VMDetail from './VMDetail.vue';
|
||||
import CollapsibleSection from './CollapsibleSection.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@ -160,7 +187,7 @@ const appliedFilters = ref({
|
||||
});
|
||||
const selectedVMRef = ref(null);
|
||||
|
||||
// Section visibility state
|
||||
// Section visibility state - simplified since expansion is handled by CollapsibleSection
|
||||
const sections = ref({
|
||||
info: true,
|
||||
graphs: true,
|
||||
@ -191,18 +218,6 @@ 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];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user