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

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

@ -1,242 +1,346 @@
<template>
<div class="overview-container">
<div class="metrics-row">
<!-- Card 1: Cluster Name -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Cluster</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 2: Version -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Version</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 4: Nodes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Nodes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
</div>
</div>
<!-- Card 5: Primary -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Primary Node</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
</div>
</div>
<!-- Card 6: VMs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VMs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
</div>
</div>
<!-- Card 7: OSDs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSDs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
</div>
</div>
<!-- Card 8: Pools -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Pools</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
</div>
</div>
<!-- Card 9: Volumes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Volumes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
</div>
</div>
</div>
<div class="graphs-row">
<!-- Health Card -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
</div>
<div class="chart-wrapper">
<Line :data="healthChartData" :options="healthChartOptions" />
<!-- 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>
<!-- CPU Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">CPU Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
</h4>
</div>
<div class="chart-wrapper">
<Line :data="cpuChartData" :options="chartOptions" />
</div>
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('info')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Memory Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Memory Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="memoryChartData" :options="chartOptions" />
</div>
</div>
<!-- Storage Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Storage Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="storageChartData" :options="chartOptions" />
</div>
</div>
</div>
<!-- Health messages card -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster 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 fa-circle-exclamation me-1"></i>
<span class="message-id">{{ msg.id || 'Unknown Issue' }}</span>
<span v-if="msg.health_delta" class="health-delta">
({{ msg.health_delta }}%)
</span>
<!-- 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">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Cluster</span>
</h6>
</div>
<div class="message-content">
{{ msg.text || 'No details available' }}
<div class="card-body">
<h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 2: Version -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Version</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
</div>
</div>
<!-- Card 4: Nodes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Nodes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
</div>
</div>
<!-- Card 5: Primary -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Primary Node</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
</div>
</div>
<!-- Card 6: VMs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VMs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
</div>
</div>
<!-- Card 7: OSDs -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSDs</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
</div>
</div>
<!-- Card 8: Pools -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Pools</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
</div>
</div>
<!-- Card 9: Volumes -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Volumes</span>
</h6>
</div>
<div class="card-body">
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
</div>
</div>
</template>
<div v-else class="no-messages">
No health messages to display
</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>
<!-- 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>
<!-- 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="card-body">
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
<div class="toggle-column">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- VM States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VM States</span>
</h6>
<!-- 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">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
</div>
<div class="chart-wrapper">
<Line :data="healthChartData" :options="healthChartOptions" />
</div>
</div>
</div>
<!-- CPU Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">CPU Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
</h4>
</div>
<div class="chart-wrapper">
<Line :data="cpuChartData" :options="chartOptions" />
</div>
</div>
</div>
<!-- Memory Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Memory Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="memoryChartData" :options="chartOptions" />
</div>
</div>
<!-- Storage Chart -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Storage Utilization</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="storageChartData" :options="chartOptions" />
</div>
</div>
</div>
</div>
<div class="card-body">
<Line :data="vmStatesChartData" :options="statesChartOptions" />
<div class="toggle-column expanded">
<button class="section-toggle" @click="toggleSection('graphs')">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
<!-- OSD States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSD States</span>
</h6>
<!-- 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="card-body">
<Line :data="osdStatesChartData" :options="statesChartOptions" />
<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">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 fa-circle-exclamation me-1"></i>
<span class="message-id">{{ msg.id || 'Unknown Issue' }}</span>
<span v-if="msg.health_delta" class="health-delta">
({{ msg.health_delta }}%)
</span>
</div>
<div class="message-content">
{{ msg.text || 'No details available' }}
</div>
</div>
</template>
<div v-else class="no-messages">
No health messages to display
</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>
<!-- 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 -->
<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 -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">VM States</span>
</h6>
</div>
<div class="card-body">
<Line :data="vmStatesChartData" :options="statesChartOptions" />
</div>
</div>
<!-- OSD States Graph -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">OSD States</span>
</h6>
</div>
<div class="card-body">
<Line :data="osdStatesChartData" :options="statesChartOptions" />
</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>
@ -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>