Refactor collapsable section into reusable component
This commit is contained in:
Joshua Boniface
parent
14e11a4772
commit
ac9428a41b
@ -1,269 +1,181 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
<!-- Information Cards Section -->
|
<!-- Information Cards Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="metrics-row">
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<!-- Card 1: PVC Version -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="PVC Version"
|
||||||
<h6 class="card-title mb-0 metric-label">Cluster Information</h6>
|
:value="clusterData.pvc_version || 'Unknown'"
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
<!-- Card 2: Primary Node -->
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
<ValueCard
|
||||||
<i class="fas fa-chevron-down"></i>
|
title="Primary Node"
|
||||||
</button>
|
:value="clusterData.primary_node || 'N/A'"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
|
<!-- Card 3: Nodes -->
|
||||||
|
<ValueCard
|
||||||
|
title="Nodes"
|
||||||
|
:value="clusterData.nodes?.total || 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 4: VMs -->
|
||||||
|
<ValueCard
|
||||||
|
title="VMs"
|
||||||
|
:value="clusterData.vms?.total || 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 5: Networks -->
|
||||||
|
<ValueCard
|
||||||
|
title="Networks"
|
||||||
|
:value="clusterData.networks || 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 6: OSDs -->
|
||||||
|
<ValueCard
|
||||||
|
title="OSDs"
|
||||||
|
:value="clusterData.osds?.total || 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 7: Pools -->
|
||||||
|
<ValueCard
|
||||||
|
title="Pools"
|
||||||
|
:value="clusterData.pools || 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 8: Volumes -->
|
||||||
|
<ValueCard
|
||||||
|
title="Volumes"
|
||||||
|
:value="clusterData.volumes || 0"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<div v-show="sections.info" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="metrics-row">
|
|
||||||
<!-- Card 1: PVC Version -->
|
|
||||||
<ValueCard
|
|
||||||
title="PVC Version"
|
|
||||||
:value="clusterData.pvc_version || 'Unknown'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 2: Primary Node -->
|
|
||||||
<ValueCard
|
|
||||||
title="Primary Node"
|
|
||||||
:value="clusterData.primary_node || 'N/A'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 3: Nodes -->
|
|
||||||
<ValueCard
|
|
||||||
title="Nodes"
|
|
||||||
:value="clusterData.nodes?.total || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 4: VMs -->
|
|
||||||
<ValueCard
|
|
||||||
title="VMs"
|
|
||||||
:value="clusterData.vms?.total || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 5: Networks -->
|
|
||||||
<ValueCard
|
|
||||||
title="Networks"
|
|
||||||
:value="clusterData.networks || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 6: OSDs -->
|
|
||||||
<ValueCard
|
|
||||||
title="OSDs"
|
|
||||||
:value="clusterData.osds?.total || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 7: Pools -->
|
|
||||||
<ValueCard
|
|
||||||
title="Pools"
|
|
||||||
:value="clusterData.pools || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 8: Volumes -->
|
|
||||||
<ValueCard
|
|
||||||
title="Volumes"
|
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- Utilization Graphs Section -->
|
<!-- Utilization Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="graphs-row">
|
||||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
<!-- Health Chart -->
|
||||||
<div class="section-content">
|
<HealthChart
|
||||||
<div class="collapsed-section-header">
|
title="Cluster Health"
|
||||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
:value="clusterHealth"
|
||||||
</div>
|
:chart-data="healthChartData"
|
||||||
</div>
|
:maintenance="isMaintenanceMode"
|
||||||
<div class="toggle-column">
|
/>
|
||||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
<!-- CPU Chart -->
|
||||||
</button>
|
<CPUChart
|
||||||
</div>
|
title="CPU Utilization"
|
||||||
|
:value="cpuUtilization"
|
||||||
|
:chart-data="cpuChartData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Memory Chart -->
|
||||||
|
<MemoryChart
|
||||||
|
title="Memory Utilization"
|
||||||
|
:value="memoryUtilization"
|
||||||
|
:chart-data="memoryChartData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Storage Chart -->
|
||||||
|
<StorageChart
|
||||||
|
title="Storage Utilization"
|
||||||
|
:value="storageUtilization"
|
||||||
|
:chart-data="storageChartData"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<div v-show="sections.graphs" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="graphs-row">
|
|
||||||
<!-- Health Chart -->
|
|
||||||
<HealthChart
|
|
||||||
title="Cluster Health"
|
|
||||||
:value="clusterHealth"
|
|
||||||
:chart-data="healthChartData"
|
|
||||||
:maintenance="isMaintenanceMode"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- CPU Chart -->
|
|
||||||
<CPUChart
|
|
||||||
title="CPU Utilization"
|
|
||||||
:value="cpuUtilization"
|
|
||||||
:chart-data="cpuChartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Memory Chart -->
|
|
||||||
<MemoryChart
|
|
||||||
title="Memory Utilization"
|
|
||||||
:value="memoryUtilization"
|
|
||||||
:chart-data="memoryChartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Storage Chart -->
|
|
||||||
<StorageChart
|
|
||||||
title="Storage Utilization"
|
|
||||||
:value="storageUtilization"
|
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- Health Messages Section -->
|
<!-- Health Messages Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
|
<CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="section-content">
|
||||||
<div v-if="!sections.messages" class="section-content-wrapper">
|
<!-- Health messages card -->
|
||||||
<div class="section-content">
|
<div class="metric-card">
|
||||||
<div class="collapsed-section-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="toggle-column">
|
<div class="messages-list">
|
||||||
<button class="section-toggle" @click="toggleSection('messages')">
|
<template v-if="displayMessages.length">
|
||||||
<i class="fas fa-chevron-down"></i>
|
<div
|
||||||
</button>
|
v-for="(msg, idx) in displayMessages"
|
||||||
</div>
|
:key="idx"
|
||||||
</div>
|
:class="[
|
||||||
<!-- Toggle button for expanded section -->
|
'health-message',
|
||||||
<div v-show="sections.messages" class="section-content-wrapper">
|
getDeltaClass(msg.health_delta, msg),
|
||||||
<div class="section-content">
|
]"
|
||||||
<!-- Health messages card -->
|
>
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="messages-list">
|
|
||||||
<template v-if="displayMessages.length">
|
|
||||||
<div
|
|
||||||
v-for="(msg, idx) in displayMessages"
|
|
||||||
:key="idx"
|
|
||||||
:class="[
|
|
||||||
'health-message',
|
|
||||||
getDeltaClass(msg.health_delta, msg),
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<div class="message-header">
|
|
||||||
<i class="fas" :class="getMessageIcon(msg)"></i>
|
|
||||||
<span class="message-id">{{ getMessageId(msg) }}</span>
|
|
||||||
<span v-if="showHealthDelta(msg)" class="health-delta">
|
|
||||||
(-{{ msg.health_delta }}%)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="message-content">
|
|
||||||
{{ getMessageText(msg) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div v-else class="health-message healthy">
|
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
<i class="fas fa-circle-check me-1"></i>
|
<i class="fas" :class="getMessageIcon(msg)"></i>
|
||||||
<span class="message-id">Cluster healthy</span>
|
<span class="message-id">{{ getMessageId(msg) }}</span>
|
||||||
|
<span v-if="showHealthDelta(msg)" class="health-delta">
|
||||||
|
(-{{ msg.health_delta }}%)
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-content">
|
<div class="message-content">
|
||||||
Cluster is at full health with no faults
|
{{ getMessageText(msg) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-else class="health-message healthy">
|
||||||
|
<div class="message-header">
|
||||||
|
<i class="fas fa-circle-check me-1"></i>
|
||||||
|
<span class="message-id">Cluster healthy</span>
|
||||||
|
</div>
|
||||||
|
<div class="message-content">
|
||||||
|
Cluster is at full health with no faults
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<!-- States Graphs Section -->
|
<!-- States Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.states }">
|
<CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="section-content">
|
||||||
<div v-if="!sections.states" class="section-content-wrapper">
|
<!-- States Graphs Row -->
|
||||||
<div class="section-content">
|
<div class="states-graphs-row">
|
||||||
<div class="collapsed-section-header">
|
<!-- Node States Graph -->
|
||||||
<h6 class="card-title mb-0 metric-label">State Graphs</h6>
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Node States</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
|
||||||
|
</div>
|
||||||
</div>
|
</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">
|
|
||||||
<div class="section-content">
|
|
||||||
<!-- States Graphs Row -->
|
|
||||||
<div class="states-graphs-row">
|
|
||||||
<!-- Node States Graph -->
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h6 class="card-title mb-0">
|
|
||||||
<span class="metric-label">Node States</span>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- VM States Graph -->
|
<!-- VM States Graph -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0">
|
<h6 class="card-title mb-0">
|
||||||
<span class="metric-label">VM States</span>
|
<span class="metric-label">VM States</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- OSD States Graph -->
|
<!-- OSD States Graph -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0">
|
<h6 class="card-title mb-0">
|
||||||
<span class="metric-label">OSD States</span>
|
<span class="metric-label">OSD States</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -287,6 +199,7 @@ import MemoryChart from './charts/MemoryChart.vue';
|
|||||||
import StorageChart from './charts/StorageChart.vue';
|
import StorageChart from './charts/StorageChart.vue';
|
||||||
import HealthChart from './charts/HealthChart.vue';
|
import HealthChart from './charts/HealthChart.vue';
|
||||||
import ValueCard from './ValueCard.vue';
|
import ValueCard from './ValueCard.vue';
|
||||||
|
import CollapsibleSection from './CollapsibleSection.vue';
|
||||||
|
|
||||||
// Register Chart.js components
|
// Register Chart.js components
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
@ -912,11 +825,6 @@ const sections = ref({
|
|||||||
states: true
|
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
|
// Add a new function to determine if we should show the health delta
|
||||||
const showHealthDelta = (msg) => {
|
const showHealthDelta = (msg) => {
|
||||||
// Don't show delta for "No issues detected" or similar messages
|
// 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,286 +25,171 @@
|
|||||||
<!-- Node Details -->
|
<!-- Node Details -->
|
||||||
<div v-if="selectedNodeData" class="node-details">
|
<div v-if="selectedNodeData" class="node-details">
|
||||||
<!-- Information Cards Section -->
|
<!-- Information Cards Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<CollapsibleSection title="Node Information" :initially-expanded="sections.info">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="info-row">
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<!-- Card 1: Daemon State -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Daemon State"
|
||||||
<h6 class="card-title mb-0 metric-label">Node Information</h6>
|
:value="selectedNodeData.daemon_state || 'Unknown'"
|
||||||
</div>
|
:bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
|
||||||
</div>
|
/>
|
||||||
<div class="toggle-column">
|
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
<!-- Card 2: Coordinator State -->
|
||||||
<i class="fas fa-chevron-down"></i>
|
<ValueCard
|
||||||
</button>
|
title="Coordinator State"
|
||||||
</div>
|
:value="selectedNodeData.coordinator_state || 'Unknown'"
|
||||||
|
:bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 3: Domain State -->
|
||||||
|
<ValueCard
|
||||||
|
title="Domain State"
|
||||||
|
:value="selectedNodeData.domain_state || 'Unknown'"
|
||||||
|
:bg-color="getDomainStateColor(selectedNodeData.domain_state)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 4: PVC Version -->
|
||||||
|
<ValueCard
|
||||||
|
title="PVC Version"
|
||||||
|
:value="selectedNodeData.pvc_version || 'Unknown'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 5: Kernel Version -->
|
||||||
|
<ValueCard
|
||||||
|
title="Kernel Version"
|
||||||
|
:value="selectedNodeData.kernel || 'Unknown'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Card 6: VM Count -->
|
||||||
|
<ValueCard
|
||||||
|
title="VM Count"
|
||||||
|
:value="selectedNodeData.domains_count || 0"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<div v-show="sections.info" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="info-row">
|
|
||||||
<!-- Card 1: Daemon State -->
|
|
||||||
<ValueCard
|
|
||||||
title="Daemon State"
|
|
||||||
:value="selectedNodeData.daemon_state || 'Unknown'"
|
|
||||||
:bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 2: Coordinator State -->
|
|
||||||
<ValueCard
|
|
||||||
title="Coordinator State"
|
|
||||||
:value="selectedNodeData.coordinator_state || 'Unknown'"
|
|
||||||
:bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 3: Domain State -->
|
|
||||||
<ValueCard
|
|
||||||
title="Domain State"
|
|
||||||
:value="selectedNodeData.domain_state || 'Unknown'"
|
|
||||||
:bg-color="getDomainStateColor(selectedNodeData.domain_state)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 4: PVC Version -->
|
|
||||||
<ValueCard
|
|
||||||
title="PVC Version"
|
|
||||||
:value="selectedNodeData.pvc_version || 'Unknown'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 5: Kernel Version -->
|
|
||||||
<ValueCard
|
|
||||||
title="Kernel Version"
|
|
||||||
:value="selectedNodeData.kernel || 'Unknown'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 6: VM Count -->
|
|
||||||
<ValueCard
|
|
||||||
title="VM Count"
|
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- Utilization Graphs Section -->
|
<!-- Utilization Graphs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
<CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="graphs-row">
|
||||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
<!-- Health Chart -->
|
||||||
<div class="section-content">
|
<HealthChart
|
||||||
<div class="collapsed-section-header">
|
title="Node Health"
|
||||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
:value="selectedNodeData.health || 0"
|
||||||
</div>
|
:chart-data="nodeHealthChartData"
|
||||||
</div>
|
:maintenance="isMaintenanceMode"
|
||||||
<div class="toggle-column">
|
/>
|
||||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
<!-- CPU Utilization Chart -->
|
||||||
</button>
|
<CPUChart
|
||||||
</div>
|
title="CPU Utilization"
|
||||||
|
:value="calculateCpuUtilization(selectedNodeData)"
|
||||||
|
:chart-data="nodeCpuChartData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Memory Utilization Chart -->
|
||||||
|
<MemoryChart
|
||||||
|
title="Memory Utilization"
|
||||||
|
:value="calculateMemoryUtilization(selectedNodeData)"
|
||||||
|
:chart-data="nodeMemoryChartData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Allocated Memory Chart -->
|
||||||
|
<StorageChart
|
||||||
|
title="Allocated Memory"
|
||||||
|
:value="calculateAllocatedMemory(selectedNodeData)"
|
||||||
|
:chart-data="nodeAllocatedMemoryChartData"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<div v-show="sections.graphs" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="graphs-row">
|
|
||||||
<!-- Health Chart -->
|
|
||||||
<HealthChart
|
|
||||||
title="Node Health"
|
|
||||||
:value="selectedNodeData.health || 0"
|
|
||||||
:chart-data="nodeHealthChartData"
|
|
||||||
:maintenance="isMaintenanceMode"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- CPU Utilization Chart -->
|
|
||||||
<CPUChart
|
|
||||||
title="CPU Utilization"
|
|
||||||
:value="calculateCpuUtilization(selectedNodeData)"
|
|
||||||
:chart-data="nodeCpuChartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Memory Utilization Chart -->
|
|
||||||
<MemoryChart
|
|
||||||
title="Memory Utilization"
|
|
||||||
:value="calculateMemoryUtilization(selectedNodeData)"
|
|
||||||
:chart-data="nodeMemoryChartData"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Allocated Memory Chart -->
|
|
||||||
<StorageChart
|
|
||||||
title="Allocated Memory"
|
|
||||||
:value="calculateAllocatedMemory(selectedNodeData)"
|
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- CPU Resources Section -->
|
<!-- CPU Resources Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.cpu }">
|
<CollapsibleSection title="CPU Resources" :initially-expanded="sections.cpu">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="resources-row-cpu">
|
||||||
<div v-if="!sections.cpu" class="section-content-wrapper">
|
<!-- Card 1: Host CPUs -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Host CPUs"
|
||||||
<h6 class="card-title mb-0 metric-label">CPU Resources</h6>
|
:value="selectedNodeData.cpu_count || 0"
|
||||||
</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">
|
|
||||||
<div class="resources-row-cpu">
|
|
||||||
<!-- Card 1: Host CPUs -->
|
|
||||||
<ValueCard
|
|
||||||
title="Host CPUs"
|
|
||||||
:value="selectedNodeData.cpu_count || 0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Card 2: Guest CPUs -->
|
<!-- Card 2: Guest CPUs -->
|
||||||
<ValueCard
|
<ValueCard
|
||||||
title="Guest CPUs"
|
title="Guest CPUs"
|
||||||
:value="selectedNodeData.vcpu?.allocated || 0"
|
:value="selectedNodeData.vcpu?.allocated || 0"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Card 3: Load -->
|
<!-- Card 3: Load -->
|
||||||
<ValueCard
|
<ValueCard
|
||||||
title="Load"
|
title="Load"
|
||||||
:value="selectedNodeData.load || 0"
|
: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>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<!-- Memory Resources Section -->
|
<!-- Memory Resources Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.resources }">
|
<CollapsibleSection title="Memory Resources" :initially-expanded="sections.resources">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="resources-row-memory">
|
||||||
<div v-if="!sections.resources" class="section-content-wrapper">
|
<!-- Total Memory -->
|
||||||
<div class="section-content">
|
<ValueCard
|
||||||
<div class="collapsed-section-header">
|
title="Total Memory"
|
||||||
<h6 class="card-title mb-0 metric-label">Memory Resources</h6>
|
:value="formatMemory(selectedNodeData.memory?.total)"
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
<!-- Used Memory -->
|
||||||
<button class="section-toggle" @click="toggleSection('resources')">
|
<ValueCard
|
||||||
<i class="fas fa-chevron-down"></i>
|
title="Used Memory"
|
||||||
</button>
|
:value="formatMemory(selectedNodeData.memory?.used)"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
|
<!-- Free Memory -->
|
||||||
|
<ValueCard
|
||||||
|
title="Free Memory"
|
||||||
|
:value="formatMemory(selectedNodeData.memory?.free)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Allocated Memory -->
|
||||||
|
<ValueCard
|
||||||
|
title="Allocated Memory"
|
||||||
|
:value="formatMemory(selectedNodeData.memory?.allocated)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Provisioned Memory -->
|
||||||
|
<ValueCard
|
||||||
|
title="Provisioned Memory"
|
||||||
|
:value="formatMemory(selectedNodeData.memory?.provisioned)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- Toggle button for expanded section -->
|
</CollapsibleSection>
|
||||||
<div v-show="sections.resources" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="resources-row-memory">
|
|
||||||
<!-- Total Memory -->
|
|
||||||
<ValueCard
|
|
||||||
title="Total Memory"
|
|
||||||
:value="formatMemory(selectedNodeData.memory?.total)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Used Memory -->
|
|
||||||
<ValueCard
|
|
||||||
title="Used Memory"
|
|
||||||
:value="formatMemory(selectedNodeData.memory?.used)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Free Memory -->
|
|
||||||
<ValueCard
|
|
||||||
title="Free Memory"
|
|
||||||
:value="formatMemory(selectedNodeData.memory?.free)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Allocated Memory -->
|
|
||||||
<ValueCard
|
|
||||||
title="Allocated Memory"
|
|
||||||
:value="formatMemory(selectedNodeData.memory?.allocated)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Provisioned Memory -->
|
|
||||||
<ValueCard
|
|
||||||
title="Provisioned Memory"
|
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- Running VMs Section -->
|
<!-- Running VMs Section -->
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.vms }">
|
<CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
|
||||||
<!-- Collapsed section indicator -->
|
<div class="vms-container">
|
||||||
<div v-if="!sections.vms" class="section-content-wrapper">
|
<div class="vms-card">
|
||||||
<div class="section-content">
|
<div class="card-header">
|
||||||
<div class="collapsed-section-header">
|
<h6 class="card-title mb-0">
|
||||||
<h6 class="card-title mb-0 metric-label">Running VMs</h6>
|
<span class="metric-label">Running VMs</span>
|
||||||
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="toggle-column">
|
<div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
|
||||||
<button class="section-toggle" @click="toggleSection('vms')">
|
<p>No VMs running on this node</p>
|
||||||
<i class="fas fa-chevron-down"></i>
|
</div>
|
||||||
</button>
|
<div v-else class="vm-list" :style="{
|
||||||
</div>
|
'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))`
|
||||||
</div>
|
}">
|
||||||
<!-- Toggle button for expanded section -->
|
<div
|
||||||
<div v-show="sections.vms" class="section-content-wrapper">
|
v-for="vm in selectedNodeData.running_domains"
|
||||||
<div class="section-content">
|
:key="vm"
|
||||||
<div class="vms-container">
|
class="vm-item"
|
||||||
<div class="vms-card">
|
@click="handleVmClick(vm)"
|
||||||
<div class="card-header">
|
title="View VM details"
|
||||||
<h6 class="card-title mb-0">
|
>
|
||||||
<span class="metric-label">Running VMs</span>
|
{{ vm }}
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
|
|
||||||
<p>No VMs running on this node</p>
|
|
||||||
</div>
|
|
||||||
<div v-else class="vm-list" :style="{
|
|
||||||
'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))`
|
|
||||||
}">
|
|
||||||
<div
|
|
||||||
v-for="vm in selectedNodeData.running_domains"
|
|
||||||
:key="vm"
|
|
||||||
class="vm-item"
|
|
||||||
@click="handleVmClick(vm)"
|
|
||||||
title="View VM details"
|
|
||||||
>
|
|
||||||
{{ vm }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</CollapsibleSection>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No node selected message -->
|
<!-- No node selected message -->
|
||||||
@ -322,6 +207,7 @@ import MemoryChart from './charts/MemoryChart.vue';
|
|||||||
import StorageChart from './charts/StorageChart.vue';
|
import StorageChart from './charts/StorageChart.vue';
|
||||||
import HealthChart from './charts/HealthChart.vue';
|
import HealthChart from './charts/HealthChart.vue';
|
||||||
import ValueCard from './ValueCard.vue';
|
import ValueCard from './ValueCard.vue';
|
||||||
|
import CollapsibleSection from './CollapsibleSection.vue';
|
||||||
|
|
||||||
// Move all the props, refs, computed properties, and functions from Nodes.vue
|
// Move all the props, refs, computed properties, and functions from Nodes.vue
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -351,11 +237,6 @@ const sections = ref({
|
|||||||
vms: true
|
vms: true
|
||||||
});
|
});
|
||||||
|
|
||||||
// Toggle section visibility
|
|
||||||
const toggleSection = (section) => {
|
|
||||||
sections.value[section] = !sections.value[section];
|
|
||||||
};
|
|
||||||
|
|
||||||
// State for selected node and tab scrolling
|
// State for selected node and tab scrolling
|
||||||
const selectedNode = ref('');
|
const selectedNode = ref('');
|
||||||
const tabsContainer = ref(null);
|
const tabsContainer = ref(null);
|
||||||
|
|||||||
@ -110,7 +110,33 @@
|
|||||||
|
|
||||||
<!-- VM Details -->
|
<!-- VM Details -->
|
||||||
<div v-if="selectedVMData && !showVMList" class="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>
|
</div>
|
||||||
|
|
||||||
<!-- No VM Selected Message -->
|
<!-- No VM Selected Message -->
|
||||||
@ -126,6 +152,7 @@
|
|||||||
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';
|
import VMDetail from './VMDetail.vue';
|
||||||
|
import CollapsibleSection from './CollapsibleSection.vue';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -160,7 +187,7 @@ const appliedFilters = ref({
|
|||||||
});
|
});
|
||||||
const selectedVMRef = ref(null);
|
const selectedVMRef = ref(null);
|
||||||
|
|
||||||
// Section visibility state
|
// Section visibility state - simplified since expansion is handled by CollapsibleSection
|
||||||
const sections = ref({
|
const sections = ref({
|
||||||
info: true,
|
info: true,
|
||||||
graphs: true,
|
graphs: true,
|
||||||
@ -191,18 +218,6 @@ const toggleFilterMenu = () => {
|
|||||||
showFilterMenu.value = !showFilterMenu.value;
|
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
|
// Toggle a filter on/off
|
||||||
const toggleFilter = (type, value) => {
|
const toggleFilter = (type, value) => {
|
||||||
appliedFilters.value[type][value] = !appliedFilters.value[type][value];
|
appliedFilters.value[type][value] = !appliedFilters.value[type][value];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user