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

Compare commits

base: parallelvirtualcluster:18a32315ea1a476f050745291a40a249babd54b2
Branches Tags
parallelvirtualcluster:master
...
compare: parallelvirtualcluster:f66d09561433d4aa732c8071412721f6887f5c28
Branches Tags
parallelvirtualcluster:master

6 Commits
18a32315ea ... f66d095614

Author SHA1 Message Date
Joshua Boniface
f66d095614 Adjust styling of utilization graphs 2025-02-27 01:27:25 -05:00
Joshua Boniface
f2652380fc Add maintenance colourization to health graph 2025-02-27 01:22:10 -05:00
Joshua Boniface
f8f1877925 Improve card layouts 2025-02-27 01:03:26 -05:00
Joshua Boniface
9375219fef Improve and unify graphs 2025-02-27 00:38:13 -05:00
Joshua Boniface
0103f34a62 Fix sidebar on collapse 2025-02-27 00:08:18 -05:00
Joshua Boniface
74110a94d7 Improve chart titles 2025-02-27 00:02:04 -05:00
3 changed files with 495 additions and 174 deletions
Show Stats Expand all files Collapse all files

52
pvc-vue/src/App.vue
View File

@ -13,7 +13,8 @@
</div>
<div class="sidebar-footer">
<button class="btn btn-outline-light w-100" @click="toggleConfig">
<i class="fas fa-cog"></i> Configure
<i class="fas fa-cog"></i>
<span class="config-text ms-2">Configure</span>
</button>
</div>
</div>
@ -24,14 +25,11 @@
{{ connectionStatusMessage }}
</div>
<div class="content-grid">
<div class="overview-row">
<ClusterOverview
:clusterData="clusterData"
:metricsHistory="metricsHistory.health"
/>
<NodeStatus :nodeData="nodeData" />
</div>
<MetricsCharts :metricsData="metricsHistory" class="metrics-section" />
<ClusterOverview
:clusterData="clusterData"
:metricsData="metricsHistory"
/>
<NodeStatus :nodeData="nodeData" />
</div>
</div>
</div>
@ -59,7 +57,8 @@ const metricsHistory = ref({
cpu: { labels: [], data: [] },
memory: { labels: [], data: [] },
health: { labels: [], data: [] },
storage: { labels: [], data: [] }
storage: { labels: [], data: [] },
maintenance: { labels: [], data: [] }
});
const showConnectionStatus = ref(false);
@ -85,17 +84,19 @@ const saveConfig = async (newConfig) => {
};
const updateMetricsHistory = (timestamp, status) => {
// Create new arrays instead of mutating
const metrics = {
cpu: status.resources?.cpu?.utilization || 0,
memory: status.resources?.memory?.utilization || 0,
health: status.cluster_health?.health || 0,
storage: status.resources?.disk?.utilization || 0
storage: status.resources?.disk?.utilization || 0,
maintenance: status.maintenance === "true" ? true : false
};
Object.keys(metrics).forEach(metric => {
const labels = [...metricsHistory.value[metric].labels, timestamp];
const data = [...metricsHistory.value[metric].data, Math.round(metrics[metric])];
const data = [...metricsHistory.value[metric].data,
typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric])
];
// Keep only last 180 points
if (labels.length > 180) {
@ -188,7 +189,7 @@ onUnmounted(() => {
.sidebar.collapsed .sidebar-header h5,
.sidebar.collapsed .sidebar-content,
.sidebar.collapsed .btn span {
.sidebar.collapsed .config-text {
display: none;
}
@ -220,6 +221,12 @@ onUnmounted(() => {
border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar.collapsed .sidebar-footer .btn {
padding: 0.375rem;
display: flex;
justify-content: center;
}
.main-content {
margin-left: 250px;
padding: 0.5rem;
@ -239,23 +246,6 @@ onUnmounted(() => {
gap: 0.5rem;
}
.overview-row {
display: grid;
gap: 0.5rem;
grid-template-columns: 2fr 3fr;
}
.overview-row > * {
height: 100%;
min-height: 400px;
}
@media (max-width: 1200px) {
.overview-row {
grid-template-columns: 1fr;
}
}
.metric-card {
/* Remove transition and hover effect */
}

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

@ -5,103 +5,194 @@
</div>
<div class="card-body">
<div class="overview-container">
<div class="health-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
<div class="health-content-wrapper">
<div class="health-graph">
<div class="health-percentage">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
<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">
<div class="health-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health</h6>
</div>
<div class="card-body">
<div class="health-content-wrapper">
<div class="health-graph">
<div class="health-percentage">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
</div>
<Line
:data="healthChartData"
:options="healthChartOptions"
/>
</div>
<Line
:data="healthChartData"
:options="healthChartOptions"
/>
</div>
<div class="health-messages">
<div class="messages-grid">
<template v-if="clusterData.cluster_health?.messages?.length">
<div
v-for="(msg, idx) in clusterData.cluster_health.messages"
:key="idx"
:class="['health-message', getDeltaClass(msg.health_delta)]"
: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 }}%)
<div class="health-messages">
<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)]"
: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>
</span>
</div>
</template>
<div v-else class="health-message healthy">
<i class="fas fa-check-circle me-1"></i>
<span>No issues detected</span>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="metrics-row">
<!-- Card 2: PVC Version -->
<!-- CPU Chart -->
<div class="metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
<h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
<small class="text-muted">
Cluster ID: {{ clusterData.cluster_id || 'N/A' }}
</small>
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">CPU Utilization</span>
</h6>
</div>
</div>
<!-- Card 3: Nodes -->
<div class="metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
<h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
<small class="text-muted">
Primary: {{ clusterData.primary_node || 'N/A' }}
</small>
</div>
</div>
<!-- Card 4: VMs -->
<div class="metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">VMs</h6>
<h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
<small class="text-muted">
<template v-if="clusterData.vms?.per_node">
<span v-for="(count, node) in clusterData.vms.per_node" :key="node">
{{ node }}: {{ count }}<br>
</span>
</template>
<template v-else>
Distribution: N/A
</template>
</small>
</div>
</div>
<!-- Card 5: Storage -->
<div class="metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Storage</h6>
<div class="storage-metrics">
<small class="text-muted">
OSDs: {{ clusterData.osds?.total || 0 }}<br>
Pools: {{ clusterData.pools || 0 }}<br>
Volumes: {{ clusterData.volumes?.total || 0 }}
</small>
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="cpuChartData" :options="chartOptions" />
</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>
@ -145,13 +236,44 @@ const props = defineProps({
required: true,
default: () => ({})
},
metricsHistory: {
metricsData: {
type: Object,
required: true,
default: () => ({ labels: [], data: [] })
default: () => ({})
}
});
const displayMessages = computed(() => {
const messages = [];
// Add maintenance message if maintenance is "true"
if (props.clusterData.maintenance === "true") {
messages.push({
id: "Cluster is in maintenance",
health_delta: null,
text: "Cluster is currently in maintenance mode",
maintenance: true
});
}
// Add other messages if they exist
if (props.clusterData.cluster_health?.messages?.length) {
messages.push(...props.clusterData.cluster_health.messages);
}
// If no messages and not in maintenance, show "No issues"
if (messages.length === 0) {
messages.push({
id: "No issues detected",
health_delta: null,
text: "System is healthy",
health_delta: 0 // This will trigger the delta-low class for green styling
});
}
return messages;
});
const getHealthClass = (health) => {
if (health > 90) return 'status-healthy';
if (health > 50) return 'status-warning';
@ -159,12 +281,16 @@ const getHealthClass = (health) => {
};
const getHealthColors = (health) => {
if (props.clusterData.maintenance === "true") {
return { bg: 'rgba(13, 110, 253, 0.1)', border: 'rgba(13, 110, 253, 0.2)' }; // Blue
}
if (health > 90) return { bg: 'rgba(40, 167, 69, 0.1)', border: 'rgba(40, 167, 69, 0.2)' }; // Green
if (health > 50) return { bg: 'rgba(255, 193, 7, 0.1)', border: 'rgba(255, 193, 7, 0.2)' }; // Yellow
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
};
const getDeltaClass = (delta) => {
if (delta === null) return 'delta-info'; // For maintenance and healthy messages
const value = Math.abs(delta);
if (value <= 5) return 'delta-low';
if (value <= 10) return 'delta-medium';
@ -173,18 +299,32 @@ const getDeltaClass = (delta) => {
const healthChartData = computed(() => {
return {
labels: props.metricsHistory.labels,
labels: props.metricsData.health.labels,
datasets: [{
data: props.metricsHistory.data,
data: props.metricsData.health.data,
fill: true,
segment: {
borderColor: (ctx) => {
console.log('Context:', ctx);
console.log('Maintenance data:', props.metricsData.maintenance?.data);
console.log('Available indices:', ctx.p0?.parsed?.x, ctx.p1?.parsed?.x);
const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
console.log('Point', ctx.p0.parsed.x, 'Maintenance:', maintenanceAtPoint);
if (maintenanceAtPoint === true) {
console.log('Using blue color for maintenance');
return 'rgba(13, 110, 253, 0.2)';
}
const value = ctx.p1.parsed.y;
console.log('Using health-based color:', value);
if (value > 90) return 'rgba(40, 167, 69, 0.2)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.2)'; // Yellow
return 'rgba(220, 53, 69, 0.2)'; // Red
},
backgroundColor: (ctx) => {
const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
if (maintenanceAtPoint === true) {
return 'rgba(13, 110, 253, 0.1)';
}
const value = ctx.p1.parsed.y;
if (value > 90) return 'rgba(40, 167, 69, 0.1)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.1)'; // Yellow
@ -197,6 +337,8 @@ const healthChartData = computed(() => {
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)', // Light background for all points
pointBorderColor: (ctx) => {
const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.dataIndex];
if (maintenanceAtPoint === true) return 'rgba(13, 110, 253, 0.5)'; // Blue for maintenance
if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
const value = ctx.raw;
if (value > 90) return 'rgba(40, 167, 69, 0.5)'; // Green
@ -263,6 +405,98 @@ const healthChartOptions = {
intersect: false
}
};
const cpuChartData = computed(() => ({
labels: props.metricsData.cpu.labels,
datasets: [{
label: 'CPU',
data: props.metricsData.cpu.data,
borderColor: 'rgb(75, 192, 192)',
fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(75, 192, 192, 0.5)',
pointBorderWidth: 1.5
}]
}));
const memoryChartData = computed(() => ({
labels: props.metricsData.memory.labels,
datasets: [{
label: 'Memory',
data: props.metricsData.memory.data,
borderColor: 'rgb(153, 102, 255)',
fill: true,
backgroundColor: 'rgba(153, 102, 255, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(153, 102, 255, 0.5)',
pointBorderWidth: 1.5
}]
}));
const storageChartData = computed(() => ({
labels: props.metricsData.storage?.labels || [],
datasets: [{
label: 'Storage',
data: props.metricsData.storage?.data || [],
borderColor: 'rgb(255, 159, 64)',
fill: true,
backgroundColor: 'rgba(255, 159, 64, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(255, 159, 64, 0.5)',
pointBorderWidth: 1.5
}]
}));
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
clip: false,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: (context) => `${context.parsed.y}%`
}
}
},
scales: {
x: {
display: false,
grid: {
display: false
}
},
y: {
display: false,
grid: {
display: false
},
min: 0,
max: 100
}
},
animation: false,
interaction: {
enabled: true,
mode: 'nearest',
intersect: false
}
};
</script>
<style scoped>
@ -270,7 +504,18 @@ const healthChartOptions = {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
}
.graphs-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.metrics-row {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem;
}
.health-card {
@ -284,7 +529,6 @@ const healthChartOptions = {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: calc(100% - 2rem); /* Account for header */
width: 100%;
position: relative;
}
@ -292,7 +536,7 @@ const healthChartOptions = {
.health-graph {
position: relative;
flex-grow: 1;
min-height: 0; /* Allow shrinking */
min-height: 0;
display: flex;
align-items: center;
}
@ -314,6 +558,7 @@ const healthChartOptions = {
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
line-height: 1;
color: #333;
}
.health-messages {
@ -323,8 +568,9 @@ const healthChartOptions = {
position: relative;
bottom: 0;
min-height: 2.5rem;
max-height: 30%; /* Reduce maximum height */
max-height: 30%;
overflow-y: auto;
margin-top: auto; /* Push to bottom of container */
}
.messages-grid {
@ -409,48 +655,6 @@ const healthChartOptions = {
background: rgba(0, 0, 0, 0.3);
}
.metrics-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.metric-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
}
.storage-metrics {
min-height: 3.5rem;
display: flex;
align-items: center;
}
@media (max-width: 1400px) {
.metrics-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.metrics-row {
grid-template-columns: 1fr;
}
}
.card-body {
padding: 0.5rem;
}
.card-subtitle {
margin-bottom: 0.5rem !important;
}
.metric-card .card-body {
padding: 0.5rem;
}
.health-delta {
margin-left: 0.5rem;
font-size: 0.8em;
@ -470,4 +674,106 @@ const healthChartOptions = {
background: rgba(220, 53, 69, 0.1);
color: #721c24; /* Darker red */
}
.delta-info {
background: rgba(13, 110, 253, 0.1);
color: #0d6efd;
}
.metric-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
display: flex;
flex-direction: column;
}
.metric-card .card-body {
flex: 1;
padding: 0.5rem;
display: flex;
flex-direction: column;
position: relative;
}
.metric-card .metric-value {
font-size: 1.25rem; /* Return to original size for metric cards */
font-weight: bold;
color: #333;
line-height: 1;
margin: 0;
}
.card-header h6 {
font-size: 0.95rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.metric-label {
color: #666;
}
.metric-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.5);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
z-index: 2;
}
/* Style for the percentage overlay in graphs */
.metric-percentage .metric-value {
font-size: 2.5rem;
font-weight: normal; /* Match health graph */
color: #333;
line-height: 1;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@media (max-width: 1400px) {
.graphs-row {
grid-template-columns: 1fr 1fr;
}
.metrics-row {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 992px) {
.metrics-row {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 576px) {
.graphs-row {
grid-template-columns: 1fr;
}
.metrics-row {
grid-template-columns: repeat(2, 1fr);
}
}
.status-maintenance {
color: #0d6efd; /* Bootstrap blue */
}
.health-message.healthy {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.delta-info {
background: rgba(13, 110, 253, 0.1);
color: #0d6efd;
}
</style>

39
pvc-vue/src/components/MetricsCharts.vue
View File

@ -9,7 +9,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">CPU</h6>
<h6 class="card-title mb-0">
CPU
<span class="current-value">
{{ props.metricsData.cpu.data[props.metricsData.cpu.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -24,7 +29,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Memory</h6>
<h6 class="card-title mb-0">
Memory
<span class="current-value">
{{ props.metricsData.memory.data[props.metricsData.memory.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -39,7 +49,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Storage</h6>
<h6 class="card-title mb-0">
Storage
<span class="current-value">
{{ props.metricsData.storage?.data[props.metricsData.storage?.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -123,7 +138,8 @@ const chartOptions = {
},
plugins: {
legend: {
position: 'top'
position: 'top',
display: false // Hide legend completely
}
},
animation: false,
@ -144,7 +160,7 @@ const healthChartData = computed(() => ({
const cpuChartData = computed(() => ({
labels: props.metricsData.cpu.labels,
datasets: [{
label: 'CPU %',
label: 'CPU',
data: props.metricsData.cpu.data,
borderColor: 'rgb(75, 192, 192)',
fill: false
@ -154,7 +170,7 @@ const cpuChartData = computed(() => ({
const memoryChartData = computed(() => ({
labels: props.metricsData.memory.labels,
datasets: [{
label: 'Memory %',
label: 'Memory',
data: props.metricsData.memory.data,
borderColor: 'rgb(153, 102, 255)',
fill: false
@ -164,7 +180,7 @@ const memoryChartData = computed(() => ({
const storageChartData = computed(() => ({
labels: props.metricsData.storage?.labels || [],
datasets: [{
label: 'Storage %',
label: 'Storage',
data: props.metricsData.storage?.data || [],
borderColor: 'rgb(255, 159, 64)',
fill: false
@ -216,5 +232,14 @@ const storageChartData = computed(() => ({
.card-header h6 {
font-size: 0.95rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.current-value {
font-size: 1.1rem;
font-weight: bold;
color: #333;
}
</style>