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

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

@ -1,9 +1,12 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header"> <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> <h5 class="mb-0">Cluster Overview</h5>
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
</div> </div>
<div class="card-body"> </button>
<div class="card-body" v-show="!isCollapsed">
<div class="overview-container"> <div class="overview-container">
<div class="metrics-row"> <div class="metrics-row">
<!-- Card 1: Cluster Name --> <!-- Card 1: Cluster Name -->
@ -202,7 +205,7 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { Line } from 'vue-chartjs'; import { Line } from 'vue-chartjs';
import { import {
Chart as ChartJS, Chart as ChartJS,
@ -243,6 +246,8 @@ const props = defineProps({
} }
}); });
const isCollapsed = ref(false);
const displayMessages = computed(() => { const displayMessages = computed(() => {
const messages = []; const messages = [];
@ -776,4 +781,25 @@ const chartOptions = {
background: rgba(13, 110, 253, 0.1); background: rgba(13, 110, 253, 0.1);
color: #0d6efd; 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> </style>

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

@ -1,9 +1,12 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header"> <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> <h5 class="mb-0">Node Overview</h5>
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
</div> </div>
<div class="card-body"> </button>
<div class="card-body" v-show="!isCollapsed">
<div class="row"> <div class="row">
<template v-for="node in nodeData" :key="node.name"> <template v-for="node in nodeData" :key="node.name">
<div class="col-md-4 node-wrapper"> <div class="col-md-4 node-wrapper">
@ -34,6 +37,8 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
const props = defineProps({ const props = defineProps({
nodeData: { nodeData: {
type: Array, type: Array,
@ -42,6 +47,8 @@ const props = defineProps({
} }
}); });
const isCollapsed = ref(false);
const getHealthClass = (health) => { const getHealthClass = (health) => {
if (!health) return 'status-error'; if (!health) return 'status-error';
if (health > 90) return 'status-healthy'; if (health > 90) return 'status-healthy';
@ -103,4 +110,25 @@ const formatMemory = (node) => {
font-size: 0.8rem; font-size: 0.8rem;
word-break: break-all; 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> </style>