Adjust page layouts
This commit is contained in:
Joshua Boniface
parent
e4e823db39
commit
28b03222f0
@ -1,248 +1,238 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="overview-container">
|
||||||
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
|
<div class="metrics-row">
|
||||||
<div class="d-flex justify-content-between align-items-center w-100">
|
<!-- Card 1: Cluster Name -->
|
||||||
<h5 class="mb-0">Cluster Overview</h5>
|
<div class="metric-card">
|
||||||
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
|
<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>
|
</div>
|
||||||
</button>
|
|
||||||
<div class="card-body" v-show="!isCollapsed">
|
|
||||||
<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 -->
|
<!-- Card 2: Version -->
|
||||||
<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">Version</span>
|
<span class="metric-label">Version</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
|
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 4: Nodes -->
|
<!-- Card 4: Nodes -->
|
||||||
<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">Nodes</span>
|
<span class="metric-label">Nodes</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
|
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 5: Primary -->
|
<!-- Card 5: Primary -->
|
||||||
<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">Primary Node</span>
|
<span class="metric-label">Primary Node</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
|
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 6: VMs -->
|
<!-- Card 6: VMs -->
|
||||||
<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">VMs</span>
|
<span class="metric-label">VMs</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
|
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 7: OSDs -->
|
<!-- Card 7: OSDs -->
|
||||||
<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">OSDs</span>
|
<span class="metric-label">OSDs</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
|
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 8: Pools -->
|
<!-- Card 8: Pools -->
|
||||||
<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">Pools</span>
|
<span class="metric-label">Pools</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
|
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 9: Volumes -->
|
<!-- Card 9: Volumes -->
|
||||||
<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">Volumes</span>
|
<span class="metric-label">Volumes</span>
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
|
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
|
||||||
</div>
|
</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="graphs-row">
|
<!-- CPU Chart -->
|
||||||
<!-- Health Card -->
|
<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 metric-label">Cluster Health</h6>
|
<span class="metric-label">CPU Utilization</span>
|
||||||
</div>
|
</h6>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<div class="metric-percentage">
|
<div class="card-body">
|
||||||
<h4 class="metric-value">
|
<div class="metric-percentage">
|
||||||
{{ clusterData.cluster_health?.health || 0 }}%
|
<h4 class="metric-value">
|
||||||
</h4>
|
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
|
||||||
</div>
|
</h4>
|
||||||
<div class="chart-wrapper">
|
|
||||||
<Line :data="healthChartData" :options="healthChartOptions" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- CPU Chart -->
|
<div class="chart-wrapper">
|
||||||
<div class="metric-card">
|
<Line :data="cpuChartData" :options="chartOptions" />
|
||||||
<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>
|
||||||
<!-- Health messages card -->
|
<!-- Memory Chart -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
|
<h6 class="card-title mb-0">
|
||||||
</div>
|
<span class="metric-label">Memory Utilization</span>
|
||||||
<div class="card-body">
|
</h6>
|
||||||
<div class="messages-grid">
|
|
||||||
<template v-if="displayMessages.length">
|
|
||||||
<div
|
|
||||||
v-for="(msg, idx) in displayMessages"
|
|
||||||
:key="idx"
|
|
||||||
:class="[
|
|
||||||
'health-message',
|
|
||||||
getDeltaClass(msg.health_delta),
|
|
||||||
{'full-width-message': isSpecialMessage(msg)}
|
|
||||||
]"
|
|
||||||
:title="msg.text || 'No details available'"
|
|
||||||
>
|
|
||||||
<i class="fas fa-circle-exclamation me-1"></i>
|
|
||||||
<span class="message-text">
|
|
||||||
{{ msg.id || 'Unknown Issue' }}
|
|
||||||
<span v-if="msg.health_delta" class="health-delta">
|
|
||||||
({{ msg.health_delta }}%)
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
<!-- States Graphs Row -->
|
<div class="metric-percentage">
|
||||||
<div class="states-graphs-row">
|
<h4 class="metric-value">
|
||||||
<!-- Node States Graph -->
|
{{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
|
||||||
<div class="metric-card">
|
</h4>
|
||||||
<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>
|
||||||
|
<Line :data="memoryChartData" :options="chartOptions" />
|
||||||
<!-- VM States Graph -->
|
</div>
|
||||||
<div class="metric-card">
|
</div>
|
||||||
<div class="card-header">
|
<!-- Storage Chart -->
|
||||||
<h6 class="card-title mb-0">
|
<div class="metric-card">
|
||||||
<span class="metric-label">VM States</span>
|
<div class="card-header">
|
||||||
</h6>
|
<h6 class="card-title mb-0">
|
||||||
</div>
|
<span class="metric-label">Storage Utilization</span>
|
||||||
<div class="card-body">
|
</h6>
|
||||||
<Line :data="vmStatesChartData" :options="statesChartOptions" />
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
|
<div class="metric-percentage">
|
||||||
|
<h4 class="metric-value">
|
||||||
|
{{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
|
||||||
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
|
<Line :data="storageChartData" :options="chartOptions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- OSD States Graph -->
|
<!-- Health messages card -->
|
||||||
<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 metric-label">Cluster Health Messages</h6>
|
||||||
<span class="metric-label">OSD States</span>
|
</div>
|
||||||
</h6>
|
<div class="card-body">
|
||||||
|
<div class="messages-grid">
|
||||||
|
<template v-if="displayMessages.length">
|
||||||
|
<div
|
||||||
|
v-for="(msg, idx) in displayMessages"
|
||||||
|
:key="idx"
|
||||||
|
:class="[
|
||||||
|
'health-message',
|
||||||
|
getDeltaClass(msg.health_delta),
|
||||||
|
{'full-width-message': isSpecialMessage(msg)}
|
||||||
|
]"
|
||||||
|
:title="msg.text || 'No details available'"
|
||||||
|
>
|
||||||
|
<i class="fas fa-circle-exclamation me-1"></i>
|
||||||
|
<span class="message-text">
|
||||||
|
{{ msg.id || 'Unknown Issue' }}
|
||||||
|
<span v-if="msg.health_delta" class="health-delta">
|
||||||
|
({{ msg.health_delta }}%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
</template>
|
||||||
<Line :data="osdStatesChartData" :options="statesChartOptions" />
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
</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>
|
</div>
|
||||||
@ -291,8 +281,6 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const isCollapsed = ref(false);
|
|
||||||
|
|
||||||
const displayMessages = computed(() => {
|
const displayMessages = computed(() => {
|
||||||
const messages = [];
|
const messages = [];
|
||||||
|
|
||||||
@ -991,125 +979,31 @@ onMounted(() => {
|
|||||||
.overview-container {
|
.overview-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphs-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr); /* Equal width columns */
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metrics-row {
|
.metrics-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(8, 1fr); /* Start with 8 equal columns */
|
grid-template-columns: repeat(8, 1fr);
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.health-messages {
|
.graphs-row {
|
||||||
padding: 0.5rem;
|
display: grid;
|
||||||
background: rgba(0, 0, 0, 0.02);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
border-radius: 0.25rem;
|
gap: 0.5rem;
|
||||||
position: relative;
|
width: 100%;
|
||||||
bottom: 0;
|
|
||||||
min-height: 2.5rem;
|
|
||||||
max-height: 30%;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-top: auto; /* Push to bottom of container */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-grid {
|
.messages-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.health-message {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
position: relative;
|
|
||||||
height: auto;
|
|
||||||
min-height: 2.5em;
|
|
||||||
white-space: nowrap; /* Prevent text wrapping */
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 0; /* Allow shrinking within grid cell */
|
|
||||||
flex: 1; /* Take up available space */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add specific handling for message text to prevent wrapping */
|
|
||||||
.message-text {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.health-message.healthy {
|
|
||||||
background: rgba(40, 167, 69, 0.1);
|
|
||||||
color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
.health-message:hover::after {
|
|
||||||
content: attr(title);
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid rgba(0,0,0,0.1);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
z-index: 1000;
|
|
||||||
width: max-content;
|
|
||||||
max-width: 300px;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Adjust tooltip position if message is in the right half of the screen */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.health-message:hover::after {
|
|
||||||
left: auto;
|
|
||||||
right: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.health-delta {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-low {
|
|
||||||
background: rgba(40, 167, 69, 0.15); /* Darker green background */
|
|
||||||
color: #0d5524;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-medium {
|
|
||||||
background: rgba(255, 193, 7, 0.15); /* Darker yellow background */
|
|
||||||
color: #856404;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-high {
|
|
||||||
background: rgba(220, 53, 69, 0.15); /* Darker red background */
|
|
||||||
color: #721c24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-info {
|
|
||||||
background: rgba(13, 110, 253, 0.15); /* Darker blue background */
|
|
||||||
color: #0d6efd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card {
|
.metric-card {
|
||||||
min-width: 180px; /* Prevents cards from becoming too small */
|
min-width: 180px; /* Prevents cards from becoming too small */
|
||||||
background: white;
|
background: white;
|
||||||
@ -1120,10 +1014,13 @@ onMounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%; /* Take full width of grid cell */
|
width: 100%; /* Take full width of grid cell */
|
||||||
|
overflow: hidden; /* Ensure content doesn't overflow */
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card .card-header {
|
.metric-card .card-header {
|
||||||
text-align: left;
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header h6 {
|
.card-header h6 {
|
||||||
@ -1132,6 +1029,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card .card-body {
|
.metric-card .card-body {
|
||||||
@ -1234,13 +1132,85 @@ onMounted(() => {
|
|||||||
color: #0d6efd; /* Bootstrap blue */
|
color: #0d6efd; /* Bootstrap blue */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.health-message {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
min-height: 2.5em;
|
||||||
|
white-space: nowrap; /* Prevent text wrapping */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 0; /* Allow shrinking within grid cell */
|
||||||
|
flex: 1; /* Take up available space */
|
||||||
|
background: rgba(220, 53, 69, 0.15); /* Default red background */
|
||||||
|
color: #721c24; /* Default red text */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.health-message.healthy {
|
.health-message.healthy {
|
||||||
background: rgba(40, 167, 69, 0.1);
|
background: rgba(40, 167, 69, 0.1);
|
||||||
color: #28a745;
|
color: #28a745;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.health-message:hover::after {
|
||||||
|
content: attr(title);
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0,0,0,0.1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||||
|
z-index: 1000;
|
||||||
|
width: max-content;
|
||||||
|
max-width: 300px;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.health-message:hover::after {
|
||||||
|
left: auto;
|
||||||
|
right: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-delta {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-low {
|
||||||
|
background: rgba(40, 167, 69, 0.15); /* Darker green background */
|
||||||
|
color: #0d5524;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-medium {
|
||||||
|
background: rgba(255, 193, 7, 0.15); /* Darker yellow background */
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-high {
|
||||||
|
background: rgba(220, 53, 69, 0.15); /* Darker red background */
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
.delta-info {
|
.delta-info {
|
||||||
background: rgba(13, 110, 253, 0.1);
|
background: rgba(13, 110, 253, 0.15); /* Darker blue background */
|
||||||
color: #0d6efd;
|
color: #0d6efd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
40
pvc-vue/src/components/PageTitle.vue
Normal file
40
pvc-vue/src/components/PageTitle.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-title-container">
|
||||||
|
<h1 class="page-title">{{ title }}</h1>
|
||||||
|
<div class="page-actions" v-if="$slots.actions">
|
||||||
|
<slot name="actions"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-title-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,11 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-grid">
|
<div class="content-grid">
|
||||||
|
<PageTitle title="Nodes" />
|
||||||
<NodeStatus :nodeData="nodeData" />
|
<NodeStatus :nodeData="nodeData" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import NodeStatus from '../components/NodeStatus.vue';
|
import NodeStatus from '../components/NodeStatus.vue';
|
||||||
|
import PageTitle from '../components/PageTitle.vue';
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
nodeData: {
|
nodeData: {
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-grid">
|
<div class="content-grid">
|
||||||
|
<PageTitle title="Cluster Overview" />
|
||||||
<ClusterOverview
|
<ClusterOverview
|
||||||
:clusterData="clusterData"
|
:clusterData="clusterData"
|
||||||
:metricsData="metricsData"
|
:metricsData="metricsData"
|
||||||
@ -9,6 +10,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import ClusterOverview from '../components/ClusterOverview.vue';
|
import ClusterOverview from '../components/ClusterOverview.vue';
|
||||||
|
import PageTitle from '../components/PageTitle.vue';
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
clusterData: {
|
clusterData: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user