From e2a65d99222fbcb6e3ee54dba63dcb31c275ecf0 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 01:38:01 -0500
Subject: [PATCH] Improve header bars for sections

---
 pvc-vue/src/components/ClusterOverview.vue | 38 ++++++++++++++++++----
 pvc-vue/src/components/NodeStatus.vue      | 36 +++++++++++++++++---
 2 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 33c55b2..7b79754 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -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>
diff --git a/pvc-vue/src/components/NodeStatus.vue b/pvc-vue/src/components/NodeStatus.vue
index d7fde33..6f61e2c 100644
--- a/pvc-vue/src/components/NodeStatus.vue
+++ b/pvc-vue/src/components/NodeStatus.vue
@@ -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>