parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust layout of overview page

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-28 02:30:40 -05:00
parent f41c71608d
commit 763919f8c5
1 changed files with 424 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
pvc-vue/src/components/ClusterOverview.vue
View File

@ -1,5 +1,23 @@
<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">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="metrics-row">
<!-- Card 1: Cluster Name -->
<div class="metric-card">
@ -97,7 +115,33 @@
</div>
</div>
</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 -->
<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">Utilization</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">
<div class="graphs-row">
<!-- Health Card -->
<div class="metric-card">
@ -166,11 +210,37 @@
</div>
</div>
</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 -->
<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">
<div class="section-content">
<!-- Health messages card -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
<h6 class="card-title mb-0 metric-label">Messages</h6>
</div>
<div class="card-body">
<div class="messages-list">
@ -201,7 +271,33 @@
</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>
<!-- 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">
<div class="section-content">
<!-- States Graphs Row -->
<div class="states-graphs-row">
<!-- Node States Graph -->
@ -241,6 +337,14 @@
</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>
</template>
<script setup>
@ -981,6 +1085,19 @@ onMounted(() => {
}
}
});
// Section visibility state
const sections = ref({
info: true,
graphs: true,
messages: true,
states: true
});
// Toggle section visibility
const toggleSection = (section) => {
sections.value[section] = !sections.value[section];
};
</script>
<style scoped>
@ -1312,4 +1429,93 @@ onMounted(() => {
color: #333 !important;
font-weight: 500 !important;
}
/* Updated section styling */
.section-container {
position: relative;
margin-bottom: 0.5rem;
}
/* New content wrapper with toggle column */
.section-content-wrapper {
display: flex;
position: relative; /* Add position relative to contain absolute positioned elements */
}
.section-content {
flex: 1;
min-width: 0; /* Allow content to shrink if needed */
padding-right: 40px; /* Make room for the toggle button */
}
.toggle-column {
position: absolute;
top: 4px; /* Position at exactly 4px from the top in both views */
right: 0;
width: 40px;
height: 30px;
z-index: 10;
padding-left: 6px; /* Add left padding to the toggle column */
}
.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;
}
/* Replace collapsed section indicator with header */
.collapsed-section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.03); /* Match card header background */
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
height: 38px; /* Match the height of card headers */
width: 100%; /* Ensure it takes full width of its container */
}
.collapsed-section-header .card-title {
margin: 0;
color: #495057; /* Match the exact color of expanded card titles */
font-size: 0.95rem;
font-weight: 600;
}
/* Ensure toggle column is properly aligned with card headers */
.metric-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
height: 38px; /* Ensure consistent height */
}
/* Ensure the metric-label class is consistent */
.metric-label {
color: #495057;
font-weight: 600;
}
</style>