Adjust padding and selector elements

pvc-vue/src/App.vue

@@ -169,7 +169,7 @@ const updateMetricsHistory = (timestamp, status) => {
 
     if (!metricsHistory.value.nodes[nodeName]) {
       metricsHistory.value.nodes[nodeName] = {
-        health: { labels: [], data: [] },
+        health: { labels: [], data: [], maintenance: [] },
         cpu: { labels: [], data: [] },
         memory: { labels: [], data: [] },
         allocated: { labels: [], data: [] }
@@ -197,8 +197,14 @@ const updateMetricsHistory = (timestamp, status) => {
 
       metricsHistory.value.nodes[nodeName][metric] = {
         labels: nodeLabels,
-        data: nodeData
+        data: nodeData,
+        ...(metric === 'health' ? { maintenance: [...(metricsHistory.value.nodes[nodeName][metric].maintenance || []), isInMaintenance] } : {})
       };
+      
+      // Trim maintenance array if needed
+      if (metric === 'health' && metricsHistory.value.nodes[nodeName][metric].maintenance.length > 180) {
+        metricsHistory.value.nodes[nodeName][metric].maintenance.shift();
+      }
     });
   });
 };

pvc-vue/src/assets/styles.css

@@ -0,0 +1,368 @@
+/* Global spacing adjustments */
+.content-grid {
+  gap: 0.25rem !important;
+}
+
+.main-content {
+  padding-top: 0.25rem;
+}
+
+/* Reduce space between page title and content */
+.content-grid > *:first-child + * {
+  margin-top: 0.375rem !important;
+}
+
+/* Target the specific space between title underline and first card */
+.content-grid > div:first-child {
+  margin-bottom: 0.375rem !important;
+}
+
+/* Reduce space after PageTitle component */
+.page-title {
+  margin-bottom: 0.25rem !important;
+}
+
+/* Remove left padding from node tabs */
+.nav-tabs {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Ensure node content aligns with left edge */
+.node-content, .tab-content {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Target the specific element causing the padding */
+div.node-tabs {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* More aggressive targeting for node tabs */
+.node-overview .nav,
+.node-overview .nav-tabs,
+.node-overview ul.nav,
+.node-overview ul.nav-tabs {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  border-left: 0 !important;
+}
+
+/* Target the first tab item specifically */
+.node-overview .nav-item:first-child,
+.node-overview .nav-link:first-child {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+}
+
+/* Target any container that might be wrapping the tabs */
+.node-overview > div,
+.node-overview > ul {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Style VM search bar section like node tabs */
+.vm-search-container,
+.vm-list-header,
+.vm-controls {
+  border: none !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+  padding: 0.5rem 0 !important;
+  margin-bottom: 1rem !important;
+}
+
+/* Remove any box shadow from VM search elements */
+.vm-search-container *,
+.vm-list-header *,
+.vm-controls * {
+  box-shadow: none !important;
+}
+
+/* Ensure search input has proper styling */
+.vm-search-input {
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+  border-radius: 0.25rem !important;
+}
+
+/* Target the specific VM list controls more directly */
+.vm-overview .list-vms-container,
+.vm-overview .vm-controls-container {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
+  border-radius: 0 !important;
+  padding-left: 0 !important;
+}
+
+/* Target the buttons and inputs directly */
+.vm-overview .btn-group,
+.vm-overview .input-group {
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+/* Target the List VMs button specifically */
+.vm-overview .btn-secondary,
+.vm-overview button[type="button"] {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
+}
+
+/* Super aggressive targeting for VM search container */
+.vm-list-container > div:first-child,
+.vm-overview > div:first-child,
+div[class*="vm-"] > div:first-child {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
+  padding: 0.5rem 0 !important;
+}
+
+/* Target the actual search box and buttons */
+.input-group,
+.btn-group {
+  margin-bottom: 0 !important;
+}
+
+/* Target any card or container in the VM list header */
+.card,
+.card-header,
+.card-body {
+  /* Target only VM list cards, not ValueCards */
+  .vm-list-container .card,
+  .vm-list-container .card-header,
+  .vm-list-container .card-body,
+  .vm-controls-container .card,
+  .vm-controls-container .card-header,
+  .vm-controls-container .card-body {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0.5rem 0 !important;
+  }
+}
+
+/* Target the specific vm-controls-container element */
+div.vm-controls-container {
+  background-color: transparent !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0.5rem 0 !important;
+}
+
+/* Target the light blue background */
+div.vm-controls-container[data-v-8e678963] {
+  background-color: transparent !important;
+}
+
+/* Adjust spacing after page title on VM page */
+.vm-overview .page-title,
+.vm-overview .page-title-container {
+  margin-bottom: 0.05rem !important;
+}
+
+/* Ensure consistent spacing between title and controls */
+.vm-overview .content-grid > *:first-child + * {
+  margin-top: 0.05rem !important;
+}
+
+/* Remove lines under VM names */
+.vm-list-item,
+.vm-item {
+  border-bottom: none !important;
+}
+
+/* Ensure only the controls container has the bottom border */
+.vm-list-container > div:not(:first-child),
+.vm-overview > div:not(:first-child) {
+  border-bottom: none !important;
+}
+
+/* Further reduce spacing between title and controls */
+.content-grid > div:first-child {
+  margin-bottom: 0.05rem !important;
+}
+
+/* Extremely aggressive spacing reduction */
+.page-title + *,
+.page-title-container + * {
+  margin-top: 0 !important;
+}
+
+/* Specifically target VM list items to remove bottom borders */
+.vm-list > div,
+.vm-list-item,
+.vm-item,
+div[class*="vm-list"] > div {
+  border-bottom: none !important;
+  border: none !important;
+}
+
+/* Target the VM list container to remove any borders from its children except the first */
+.vm-list-container > div:not(:first-child) *,
+.vm-overview > div:not(:first-child) * {
+  border-bottom: none !important;
+}
+
+/* Zero out all margins between title and controls */
+.page-title,
+.page-title-container,
+.content-grid > div:first-child {
+  margin-bottom: 0 !important;
+}
+
+/* Reduce padding above the VM controls container */
+div.vm-controls-container,
+.vm-list-container > div:first-child {
+  margin-top: 0.05rem !important;
+  padding-top: 0 !important;
+}
+
+/* Fix double border issue - ensure only one border appears below search */
+.vm-list-container > div:first-child,
+.vm-overview > div:first-child,
+div[class*="vm-"] > div:first-child {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
+}
+
+/* Remove ALL borders from VM list items - extremely aggressive */
+.vm-list-container .vm-list-item,
+.vm-list-container .vm-item,
+.vm-list-container li,
+.vm-list-container tr,
+.vm-list-container div[class*="vm-"],
+.vm-list > div,
+.vm-list > li,
+.vm-list > tr,
+.vm-list-item,
+.vm-item,
+div[class*="vm-list"] > div,
+div[class*="vm-list"] div {
+  border: none !important;
+  border-bottom: none !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+/* Ensure VM list container itself doesn't have a border */
+.vm-list-container {
+  border: none !important;
+}
+
+/* Target the actual VM list to remove borders */
+.vm-list {
+  border: none !important;
+}
+
+/* Override any hr elements that might be creating lines */
+.vm-list-container hr,
+.vm-list hr,
+.vm-item + hr,
+.vm-list-item + hr {
+  display: none !important;
+}
+
+/* Single border under search bar */
+.vm-controls-container {
+  border: none !important;
+  background: transparent !important;
+}
+
+/* Target VM list items specifically */
+.vm-list-container .vm-list-item {
+  border: none !important;
+  background: transparent !important;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+/* Target the VM item content to reduce spacing */
+.vm-item-content,
+.vm-list-item > div,
+button.vm-list-item {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+/* Also target any nested content */
+.vm-name,
+.vm-status {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+/* Remove any dividers between VM items */
+.vm-list-container .divider,
+.vm-list-container hr,
+.vm-list-item::after,
+.vm-list-item::before {
+  display: none !important;
+}
+
+/* Adjust spacing between title and search */
+.page-title + .vm-controls-container {
+  margin-top: 0 !important;
+}
+
+/* Let's also clean up any duplicate rules */
+.controls-row {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
+}
+
+/* Remove border from vm-name elements */
+.vm-name {
+  border: none !important;
+  border-bottom: none !important;
+}
+
+/* Target both instances of the border */
+div[class*="vm-"] > div:first-child div[class*="vm-"] > div:first-child,
+.vm-list-container > div:first-child div[class*="vm-"] > div:first-child {
+  border: none !important;
+  border-bottom: none !important;
+}
+
+/* Super specific targeting for the border issue */
+div[class*="vm-"] > div:first-child H {
+  border: none !important;
+  border-bottom: none !important;
+}
+
+/* Keep node tabs close to title but adjust content below tabs */
+.node-overview .node-tabs-wrapper {
+  margin-top: 0.25rem !important;
+}
+
+/* Adjust spacing below tabs to match overview spacing */
+.node-overview .node-tabs-wrapper + * {
+  margin-top: 0.375rem !important;
+}
+
+/* Ensure consistent spacing in overview page */
+.overview-container > *:first-child {
+  margin-top: 0.375rem !important;
+}
+
+/* Override spacing specifically for node tabs - keep tight to title */
+.node-overview .content-grid > *:first-child + * {
+  margin-top: 0.25rem !important;  /* Keep tabs close to title */
+}
+
+/* Adjust spacing between tabs and content below */
+.node-overview .node-tabs-wrapper {
+  margin-bottom: 0.375rem !important;  /* Match overview spacing */
+}
+
+/* Remove any extra spacing that might be added by other elements */
+.node-overview .node-details {
+  margin-top: 0 !important;
+}

pvc-vue/src/components/NodeOverview.vue

@@ -115,6 +115,7 @@
                 title="Node Health"
                 :value="selectedNodeData.health || 0"
                 :chart-data="nodeHealthChartData"
+                :maintenance="isMaintenanceMode"
               />
 
               <!-- CPU Utilization Chart -->
@@ -452,7 +453,12 @@ const formatMemory = (memoryMB) => {
   return Math.round(memoryMB / 1024) + ' GB';
 };
 
-// Prepare chart data for the node
+// Check if the cluster is in maintenance mode
+const isMaintenanceMode = computed(() => {
+  return props.clusterData.maintenance === "true";
+});
+
+// Update the nodeHealthChartData computed property to include maintenance data
 const nodeHealthChartData = computed(() => {
   // Get node metrics history if available
   const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value?.name];
@@ -460,14 +466,16 @@ const nodeHealthChartData = computed(() => {
   if (nodeMetrics && nodeMetrics.health && nodeMetrics.health.data.length > 0) {
     return {
       labels: nodeMetrics.health.labels,
-      data: nodeMetrics.health.data
+      data: nodeMetrics.health.data,
+      maintenance: nodeMetrics.health.maintenance || []
     };
   }
 
   // Fallback to current value only
   return {
     labels: ['Health'],
-    data: [selectedNodeData.value?.health || 0]
+    data: [selectedNodeData.value?.health || 0],
+    maintenance: [isMaintenanceMode.value]
   };
 });
 
@@ -1040,4 +1048,40 @@ onUnmounted(() => {
 .section-container.collapsed .section-content-wrapper {
   margin-bottom: 0;
 }
+
+/* Target the specific element causing the padding */
+ul.nav.nav-tabs {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Target Bootstrap's default tab styling */
+.nav-tabs {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Target any list items in the tabs */
+.nav-tabs > li {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+}
+
+/* Target the tab container */
+.tab-container {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Target the content grid in nodes view */
+.nodes-view .content-grid {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+
+/* Target all direct children of content-grid in nodes view */
+.nodes-view .content-grid > * {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
 </style> 

pvc-vue/src/main.js

@@ -3,6 +3,9 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 
+// Add global styles
+import './assets/styles.css';
+
 // Create the app
 const app = createApp(App);