Adjust layout of overview page
This commit is contained in:
Joshua Boniface
parent
f41c71608d
commit
763919f8c5
@ -1,242 +1,346 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
<div class="metrics-row">
|
<!-- Information Cards Section -->
|
||||||
<!-- Card 1: Cluster Name -->
|
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
||||||
<div class="metric-card">
|
<!-- Collapsed section indicator -->
|
||||||
<div class="card-header">
|
<div v-if="!sections.info" class="section-content-wrapper">
|
||||||
<h6 class="card-title mb-0">
|
<div class="section-content">
|
||||||
<span class="metric-label">Cluster</span>
|
<div class="collapsed-section-header">
|
||||||
</h6>
|
<h6 class="card-title mb-0 metric-label">Information</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" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="toggle-column">
|
||||||
<!-- CPU Chart -->
|
<button class="section-toggle" @click="toggleSection('info')">
|
||||||
<div class="metric-card">
|
<i class="fas fa-chevron-down"></i>
|
||||||
<div class="card-header">
|
</button>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Memory Chart -->
|
<!-- Toggle button for expanded section -->
|
||||||
<div class="metric-card">
|
<div v-show="sections.info" class="section-content-wrapper">
|
||||||
<div class="card-header">
|
<div class="section-content">
|
||||||
<h6 class="card-title mb-0">
|
<div class="metrics-row">
|
||||||
<span class="metric-label">Memory Utilization</span>
|
<!-- Card 1: Cluster Name -->
|
||||||
</h6>
|
<div class="metric-card">
|
||||||
</div>
|
<div class="card-header">
|
||||||
<div class="card-body">
|
<h6 class="card-title mb-0">
|
||||||
<div class="metric-percentage">
|
<span class="metric-label">Cluster</span>
|
||||||
<h4 class="metric-value">
|
</h6>
|
||||||
{{ 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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="message-content">
|
<div class="card-body">
|
||||||
{{ msg.text || 'No details available' }}
|
<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>
|
||||||
</template>
|
|
||||||
<div v-else class="no-messages">
|
|
||||||
No health messages to display
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- States Graphs Row -->
|
<!-- Utilization Graphs Section -->
|
||||||
<div class="states-graphs-row">
|
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
||||||
<!-- Node States Graph -->
|
<!-- Collapsed section indicator -->
|
||||||
<div class="metric-card">
|
<div v-if="!sections.graphs" class="section-content-wrapper">
|
||||||
<div class="card-header">
|
<div class="section-content">
|
||||||
<h6 class="card-title mb-0">
|
<div class="collapsed-section-header">
|
||||||
<span class="metric-label">Node States</span>
|
<h6 class="card-title mb-0 metric-label">Utilization</h6>
|
||||||
</h6>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="toggle-column">
|
||||||
<Line :data="nodeStatesChartData" :options="statesChartOptions" />
|
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Toggle button for expanded section -->
|
||||||
<!-- VM States Graph -->
|
<div v-show="sections.graphs" class="section-content-wrapper">
|
||||||
<div class="metric-card">
|
<div class="section-content">
|
||||||
<div class="card-header">
|
<div class="graphs-row">
|
||||||
<h6 class="card-title mb-0">
|
<!-- Health Card -->
|
||||||
<span class="metric-label">VM States</span>
|
<div class="metric-card">
|
||||||
</h6>
|
<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>
|
||||||
<div class="card-body">
|
<div class="toggle-column expanded">
|
||||||
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||||
|
<i class="fas fa-chevron-up"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- OSD States Graph -->
|
|
||||||
<div class="metric-card">
|
<!-- Health Messages Section -->
|
||||||
<div class="card-header">
|
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
|
||||||
<h6 class="card-title mb-0">
|
<!-- Collapsed section indicator -->
|
||||||
<span class="metric-label">OSD States</span>
|
<div v-if="!sections.messages" class="section-content-wrapper">
|
||||||
</h6>
|
<div class="section-content">
|
||||||
|
<div class="collapsed-section-header">
|
||||||
|
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="toggle-column">
|
||||||
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
<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>
|
</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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -1312,4 +1429,93 @@ onMounted(() => {
|
|||||||
color: #333 !important;
|
color: #333 !important;
|
||||||
font-weight: 500 !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>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user