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

Improve header bars for sections

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 01:38:01 -05:00
parent f66d095614
commit e2a65d9922
2 changed files with 64 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,12 @@
<template>
<div class="card">
<div class="card-header">
<h5 class="mb-0">Cluster Overview</h5>
</div>
<div class="card-body">
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
<div class="d-flex justify-content-between align-items-center w-100">
<h5 class="mb-0">Cluster Overview</h5>
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
</div>
</button>
<div class="card-body" v-show="!isCollapsed">
<div class="overview-container">
<div class="metrics-row">
<!-- Card 1: Cluster Name -->
@ -202,7 +205,7 @@
</template>
<script setup>
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { Line } from 'vue-chartjs';
import {
Chart as ChartJS,
@ -243,6 +246,8 @@ const props = defineProps({
}
});
const isCollapsed = ref(false);
const displayMessages = computed(() => {
const messages = [];
@ -286,7 +291,7 @@ const getHealthColors = (health) => {
}
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
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
};
const getDeltaClass = (delta) => {
@ -776,4 +781,25 @@ const chartOptions = {
background: rgba(13, 110, 253, 0.1);
color: #0d6efd;
}
.header-button {
width: 100%;
text-align: left;
border: none;
background-color: rgba(0, 0, 0, 0.03); /* Bootstrap card header background */
padding: 0.5rem;
color: #666;
transition: color 0.2s;
border-bottom: 1px solid rgba(0, 0, 0, 0.125); /* Bootstrap card header border */
}
.header-button:hover {
color: #333;
background-color: rgba(0, 0, 0, 0.04); /* Slightly darker on hover */
}
.header-button:focus {
outline: none;
box-shadow: none;
}
</style>

36
pvc-vue/src/components/NodeStatus.vue
View File

@ -1,9 +1,12 @@
<template>
<div class="card">
<div class="card-header">
<h5 class="mb-0">Node Overview</h5>
</div>
<div class="card-body">
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
<div class="d-flex justify-content-between align-items-center w-100">
<h5 class="mb-0">Node Overview</h5>
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
</div>
</button>
<div class="card-body" v-show="!isCollapsed">
<div class="row">
<template v-for="node in nodeData" :key="node.name">
<div class="col-md-4 node-wrapper">
@ -34,6 +37,8 @@
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
nodeData: {
type: Array,
@ -42,6 +47,8 @@ const props = defineProps({
}
});
const isCollapsed = ref(false);
const getHealthClass = (health) => {
if (!health) return 'status-error';
if (health > 90) return 'status-healthy';
@ -103,4 +110,25 @@ const formatMemory = (node) => {
font-size: 0.8rem;
word-break: break-all;
}
.header-button {
width: 100%;
text-align: left;
border: none;
background-color: rgba(0, 0, 0, 0.03); /* Bootstrap card header background */
padding: 0.5rem;
color: #666;
transition: color 0.2s;
border-bottom: 1px solid rgba(0, 0, 0, 0.125); /* Bootstrap card header border */
}
.header-button:hover {
color: #333;
background-color: rgba(0, 0, 0, 0.04); /* Slightly darker on hover */
}
.header-button:focus {
outline: none;
box-shadow: none;
}
</style>