Add new graphs for states

pvc-vue/src/components/ClusterOverview.vue

@@ -119,7 +119,7 @@
                 </h4>
               </div>
               <div class="chart-wrapper">
-                <Line :data="healthChartData" :options="chartOptions" />
+                <Line :data="healthChartData" :options="healthChartOptions" />
               </div>
             </div>
           </div>
@@ -175,6 +175,7 @@
           </div>
         </div>
 
+        <!-- Health messages card -->
         <div class="metric-card">
           <div class="card-header">
             <h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
@@ -185,7 +186,11 @@
                 <div 
                   v-for="(msg, idx) in displayMessages" 
                   :key="idx"
-                  :class="['health-message', getDeltaClass(msg.health_delta)]"
+                  :class="[
+                    'health-message', 
+                    getDeltaClass(msg.health_delta),
+                    {'full-width-message': isSpecialMessage(msg)}
+                  ]"
                   :title="msg.text || 'No details available'"
                 >
                   <i class="fas fa-circle-exclamation me-1"></i>
@@ -200,13 +205,52 @@
             </div>
           </div>
         </div>
+
+        <!-- States Graphs Row -->
+        <div class="states-graphs-row">
+          <!-- Node States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Node States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="nodeStatesChartData" :options="statesChartOptions" />
+            </div>
+          </div>
+          
+          <!-- VM States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">VM States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="vmStatesChartData" :options="statesChartOptions" />
+            </div>
+          </div>
+          
+          <!-- OSD States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">OSD States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="osdStatesChartData" :options="statesChartOptions" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { Line } from 'vue-chartjs';
 import {
   Chart as ChartJS,
@@ -513,6 +557,434 @@ const chartOptions = {
     chart.resize();  /* Force resize on container change */
   }
 };
+
+// Add a new function to identify special messages
+const isSpecialMessage = (msg) => {
+  return msg.maintenance === true || 
+         msg.id === "No issues detected";
+};
+
+// Helper function to group objects by state
+const groupByState = (items, stateExtractor) => {
+  const groups = {};
+  if (!items || !Array.isArray(items)) return groups;
+  
+  items.forEach(item => {
+    const state = stateExtractor(item);
+    if (!groups[state]) {
+      groups[state] = [];
+    }
+    groups[state].push(item);
+  });
+  
+  return groups;
+};
+
+// Helper function to capitalize state strings
+const capitalizeState = (state) => {
+  return state.split(', ')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(', ');
+};
+
+// Add state history tracking
+const nodeStateHistory = ref([]);
+const vmStateHistory = ref([]);
+const osdStateHistory = ref([]);
+
+// Function to update state history when new data arrives
+const updateStateHistory = (newStates, historyArray, maxPoints = 20) => {
+  // Skip empty state objects or those with no items
+  if (!newStates || Object.keys(newStates).length === 0) {
+    return;
+  }
+  
+  // Check if there are any actual items in the states
+  const hasItems = Object.values(newStates).some(items => items && items.length > 0);
+  if (!hasItems) {
+    return;
+  }
+
+  // Add new data point to history
+  historyArray.push({
+    timestamp: Date.now(),
+    states: JSON.parse(JSON.stringify(newStates)) // Deep copy to prevent reference issues
+  });
+  
+  // Limit history length
+  if (historyArray.length > maxPoints) {
+    historyArray.shift();
+  }
+};
+
+// Helper function to process historical state data
+const processStateHistory = (currentStateGroups, historyArray, timeLabels, colorFunction) => {
+  // Create a map to track all states that have appeared
+  const allStates = new Map();
+  const datasets = [];
+  const stateData = {};
+  
+  // Skip processing if no history data yet
+  if (historyArray.length === 0) {
+    return [];
+  }
+  
+  // Skip processing if current state groups are empty
+  if (!currentStateGroups || Object.keys(currentStateGroups).length === 0) {
+    return [];
+  }
+  
+  // Initialize data structure for all time points
+  timeLabels.forEach((_, index) => {
+    stateData[index] = {};
+  });
+  
+  // Process historical data
+  if (historyArray.length > 0) {
+    // Map history entries to time points in the chart
+    const historyStep = historyArray.length / timeLabels.length;
+    
+    timeLabels.forEach((_, timeIndex) => {
+      // Find the corresponding history entry for this time point
+      const historyIndex = Math.min(
+        Math.floor(timeIndex * historyStep),
+        historyArray.length - 1
+      );
+      
+      const historyEntry = historyArray[historyIndex];
+      if (historyEntry && historyEntry.states) {
+        // Record states at this time point
+        Object.entries(historyEntry.states).forEach(([state, items]) => {
+          stateData[timeIndex][state] = items.length;
+          
+          // Track this state
+          if (!allStates.has(state)) {
+            allStates.set(state, {
+              color: colorFunction(state),
+              currentCount: (currentStateGroups[state] || []).length
+            });
+          }
+        });
+      }
+    });
+  }
+  
+  // Add current states that might not be in history yet
+  Object.entries(currentStateGroups).forEach(([state, items]) => {
+    const lastIndex = timeLabels.length - 1;
+    stateData[lastIndex][state] = items.length;
+    
+    if (!allStates.has(state)) {
+      allStates.set(state, {
+        color: colorFunction(state),
+        currentCount: items.length
+      });
+    } else {
+      // Update current count
+      allStates.get(state).currentCount = items.length;
+    }
+  });
+  
+  // Create datasets for Chart.js
+  const totalCount = Object.values(currentStateGroups)
+    .reduce((sum, items) => sum + items.length, 0);
+  
+  // Skip if total count is 0
+  if (totalCount === 0) {
+    return [];
+  }
+  
+  datasets.push({
+    label: 'Total',
+    data: Array(timeLabels.length).fill(totalCount),
+    borderColor: 'rgba(0, 0, 0, 0.3)',
+    borderWidth: 1,
+    fill: false,
+    tension: 0.1,
+    pointRadius: 0,
+    order: 999,
+    currentCount: totalCount
+  });
+  
+  // Add a line for each state
+  allStates.forEach((stateInfo, state) => {
+    // Create data array from historical state data
+    const data = timeLabels.map((_, index) => {
+      return stateData[index][state] || 0;
+    });
+    
+    // Skip drawing lines for states with all zero values
+    if (data.every(value => value === 0)) {
+      // Still add to legend if current count is not zero
+      if (stateInfo.currentCount > 0) {
+        datasets.push({
+          label: capitalizeState(state),
+          data: data,
+          borderColor: stateInfo.color,
+          borderWidth: 2,
+          fill: false,
+          tension: 0.1,
+          pointRadius: 0,
+          currentCount: stateInfo.currentCount,
+          hidden: true  // Hide from chart but keep in legend
+        });
+      }
+      return;
+    }
+    
+    datasets.push({
+      label: capitalizeState(state),
+      data: data,
+      borderColor: stateInfo.color,
+      borderWidth: 2,
+      fill: false,
+      tension: 0.1,
+      pointRadius: 0,
+      currentCount: stateInfo.currentCount,
+      // Hide line segments with zero values
+      segment: {
+        borderColor: ctx => ctx.p0.parsed.y === 0 && ctx.p1.parsed.y === 0 ? 'transparent' : undefined
+      }
+    });
+  });
+  
+  return datasets;
+};
+
+// Node states processing
+const nodeStateGroups = computed(() => {
+  return groupByState(props.clusterData.detail?.node, (node) => {
+    return `${node.daemon_state}, ${node.domain_state}`;
+  });
+});
+
+const nodeStateColors = (state) => {
+  if (state === 'run, ready') return '#28a745'; // Green
+  if (['run, flush', 'run, unflush', 'run, flushed'].includes(state)) return '#0d6efd'; // Blue
+  if (state.includes('dead') || state.includes('fenced') || state.includes('stop')) return '#dc3545'; // Red
+  return '#ffc107'; // Yellow for all others
+};
+
+// Node states processing
+const nodeStatesChartData = computed(() => {
+  const labels = props.metricsData.health.labels;
+  
+  // Only process if we have history data
+  if (nodeStateHistory.value.length === 0) {
+    return { labels, datasets: [] };
+  }
+  
+  // Process node states with history
+  const datasets = processStateHistory(
+    nodeStateGroups.value,
+    nodeStateHistory.value,
+    labels,
+    nodeStateColors
+  );
+  
+  return { labels, datasets };
+});
+
+// VM states processing
+const vmStateGroups = computed(() => {
+  return groupByState(props.clusterData.detail?.vm, (vm) => vm.state);
+});
+
+const vmStateColors = (state) => {
+  if (state === 'start') return '#28a745'; // Green
+  if (['migrate', 'disable', 'provision'].includes(state)) return '#0d6efd'; // Blue
+  if (state === 'mirror') return '#6f42c1'; // Purple
+  if (['stop', 'fail'].includes(state)) return '#dc3545'; // Red
+  return '#ffc107'; // Yellow for all others
+};
+
+// VM states processing
+const vmStatesChartData = computed(() => {
+  const labels = props.metricsData.health.labels;
+  
+  // Only process if we have history data
+  if (vmStateHistory.value.length === 0) {
+    return { labels, datasets: [] };
+  }
+  
+  // Process VM states with history
+  const datasets = processStateHistory(
+    vmStateGroups.value,
+    vmStateHistory.value,
+    labels,
+    vmStateColors
+  );
+  
+  return { labels, datasets };
+});
+
+// OSD states processing
+const osdStateGroups = computed(() => {
+  return groupByState(props.clusterData.detail?.osd, (osd) => {
+    return `${osd.up}, ${osd.in}`;
+  });
+});
+
+const osdStateColors = (state) => {
+  if (state === 'up, in') return '#28a745'; // Green
+  if (state === 'down, out') return '#dc3545'; // Red
+  return '#ffc107'; // Yellow for all others
+};
+
+// OSD states processing
+const osdStatesChartData = computed(() => {
+  const labels = props.metricsData.health.labels;
+  
+  // Only process if we have history data
+  if (osdStateHistory.value.length === 0) {
+    return { labels, datasets: [] };
+  }
+  
+  // Process OSD states with history
+  const datasets = processStateHistory(
+    osdStateGroups.value,
+    osdStateHistory.value,
+    labels,
+    osdStateColors
+  );
+  
+  return { labels, datasets };
+});
+
+// Chart options for state graphs
+const statesChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'bottom',
+      labels: {
+        boxWidth: 12,
+        padding: 10,
+        font: {
+          size: 11
+        },
+        generateLabels: (chart) => {
+          // Custom legend labels with counts
+          const datasets = chart.data.datasets;
+          return datasets.map(dataset => ({
+            text: dataset.currentCount !== undefined ? 
+              `${dataset.label}: ${dataset.currentCount}` : 
+              dataset.label,
+            fillStyle: dataset.borderColor,
+            strokeStyle: dataset.borderColor,
+            lineWidth: dataset.borderWidth,
+            hidden: !chart.isDatasetVisible(datasets.indexOf(dataset)),
+            index: datasets.indexOf(dataset),
+            // Darker text color for better readability
+            fontColor: '#333'
+          }));
+        }
+      }
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => {
+          // Just show the count without duplicating the state name
+          return `${context.dataset.label}: ${context.parsed.y}`;
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      beginAtZero: true,
+      grid: {
+        color: 'rgba(0, 0, 0, 0.05)'
+      },
+      ticks: {
+        precision: 0
+      }
+    }
+  },
+  animation: false,
+  interaction: {
+    mode: 'index',
+    intersect: false
+  }
+};
+
+// Watch for changes in cluster data to update history
+watch(() => props.clusterData, (newData) => {
+  if (newData) {
+    // Only update history if we have actual data
+    if (!newData.detail) {
+      return;
+    }
+    
+    // Update node state history
+    const nodeStates = groupByState(newData.detail?.node, (node) => {
+      return `${node.daemon_state}, ${node.domain_state}`;
+    });
+    
+    // Only update if we have actual node states
+    if (Object.keys(nodeStates).length > 0) {
+      updateStateHistory(nodeStates, nodeStateHistory.value);
+    }
+    
+    // Update VM state history
+    const vmStates = groupByState(newData.detail?.vm, (vm) => vm.state);
+    
+    // Only update if we have actual VM states
+    if (Object.keys(vmStates).length > 0) {
+      updateStateHistory(vmStates, vmStateHistory.value);
+    }
+    
+    // Update OSD state history
+    const osdStates = groupByState(newData.detail?.osd, (osd) => {
+      return `${osd.up}, ${osd.in}`;
+    });
+    
+    // Only update if we have actual OSD states
+    if (Object.keys(osdStates).length > 0) {
+      updateStateHistory(osdStates, osdStateHistory.value);
+    }
+  }
+}, { deep: true });
+
+// Initialize history on component mount
+onMounted(() => {
+  // Initialize with current state if available
+  if (props.clusterData && props.clusterData.detail) {
+    const nodeStates = groupByState(props.clusterData.detail?.node, (node) => {
+      return `${node.daemon_state}, ${node.domain_state}`;
+    });
+    
+    // Only initialize if we have actual node states
+    if (Object.keys(nodeStates).length > 0) {
+      updateStateHistory(nodeStates, nodeStateHistory.value);
+    }
+    
+    const vmStates = groupByState(props.clusterData.detail?.vm, (vm) => vm.state);
+    
+    // Only initialize if we have actual VM states
+    if (Object.keys(vmStates).length > 0) {
+      updateStateHistory(vmStates, vmStateHistory.value);
+    }
+    
+    const osdStates = groupByState(props.clusterData.detail?.osd, (osd) => {
+      return `${osd.up}, ${osd.in}`;
+    });
+    
+    // Only initialize if we have actual OSD states
+    if (Object.keys(osdStates).length > 0) {
+      updateStateHistory(osdStates, osdStateHistory.value);
+    }
+  }
+});
 </script>
 
 <style scoped>
@@ -551,7 +1023,7 @@ const chartOptions = {
 
 .messages-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
   gap: 0.5rem;
   width: 100%;
 }
@@ -561,13 +1033,23 @@ const chartOptions = {
   text-align: left;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
-  height: 2.5em;
+  height: auto;
+  min-height: 2.5em;
+  white-space: nowrap;  /* Prevent text wrapping */
   display: flex;
   align-items: center;
+  min-width: 0;  /* Allow shrinking within grid cell */
+  flex: 1;  /* Take up available space */
+}
+
+/* Add specific handling for message text to prevent wrapping */
+.message-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .health-message.healthy {
@@ -575,18 +1057,6 @@ const chartOptions = {
   color: #28a745;
 }
 
-.health-message:hover {
-  &.delta-low {
-    background: rgba(40, 167, 69, 0.15);
-  }
-  &.delta-medium {
-    background: rgba(255, 193, 7, 0.15);
-  }
-  &.delta-high {
-    background: rgba(220, 53, 69, 0.15);
-  }
-}
-
 .health-message:hover::after {
   content: attr(title);
   position: absolute;
@@ -621,22 +1091,22 @@ const chartOptions = {
 }
 
 .delta-low {
-  background: rgba(40, 167, 69, 0.1);
+  background: rgba(40, 167, 69, 0.15);  /* Darker green background */
-  color: #0d5524;  /* Darker green */
+  color: #0d5524;
 }
 
 .delta-medium {
-  background: rgba(255, 193, 7, 0.1);
+  background: rgba(255, 193, 7, 0.15);  /* Darker yellow background */
-  color: #856404;  /* Darker yellow */
+  color: #856404;
 }
 
 .delta-high {
-  background: rgba(220, 53, 69, 0.1);
+  background: rgba(220, 53, 69, 0.15);  /* Darker red background */
-  color: #721c24;  /* Darker red */
+  color: #721c24;
 }
 
 .delta-info {
-  background: rgba(13, 110, 253, 0.1);
+  background: rgba(13, 110, 253, 0.15);  /* Darker blue background */
   color: #0d6efd;
 }
 
@@ -715,40 +1185,48 @@ const chartOptions = {
 
 @media (max-width: 1500px) {
   .metrics-row {
-    grid-template-columns: repeat(4, 1fr);  /* 4 cards per row */
+    grid-template-columns: repeat(4, 1fr);
   }
   
   .graphs-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 graphs per row */
+    grid-template-columns: repeat(2, 1fr);
   }
   
+  /* Match graphs: 2 across at this breakpoint */
   .messages-grid {
-    grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 1148px) {
-  .metrics-row {
+  /* Match graphs: 1 across at this breakpoint */
-    grid-template-columns: repeat(2, 1fr);  /* 2 cards per row */
-  }
-  
-  .graphs-row {
-    grid-template-columns: 1fr;  /* 1 graph per row */
-  }
-  
   .messages-grid {
-    grid-template-columns: 1fr;  /* 1 message per row */
+    grid-template-columns: 1fr;
   }
 }
 
-/* Fine-tune for very small screens */
 @media (max-width: 740px) {
-  .metrics-row, .graphs-row, .messages-grid {
+  .metrics-row, .graphs-row {
-    grid-template-columns: 1fr;  /* Everything in single column */
+    grid-template-columns: 1fr;
+  }
+  
+  /* Allow messages to be narrower on very small screens */
+  .messages-grid {
+    grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
+  }
+  
+  /* Even on small screens, ensure messages have reasonable width */
+  .health-message {
+    min-width: 0; /* Allow shrinking */
+    white-space: normal; /* Allow text wrapping on small screens */
+  }
+  
+  .message-text {
+    white-space: normal; /* Allow text wrapping on small screens */
   }
   
   .metric-card {
-    min-width: 0;  /* Allow cards to shrink further on very small screens */
+    min-width: 0;
   }
 }
 
@@ -794,4 +1272,74 @@ const chartOptions = {
   height: 100%;
   min-width: 0;
 }
+
+/* Add new style for full-width messages */
+.full-width-message {
+  grid-column: 1 / -1;  /* Span all columns in the grid */
+  justify-content: center;  /* Center the text */
+  text-align: center;
+  font-weight: 500;  /* Make it slightly bolder */
+  font-size: 1rem;   /* Make it slightly larger */
+  background: rgba(13, 110, 253, 0.05);  /* Lighter background */
+  border: 1px solid rgba(13, 110, 253, 0.1);  /* Subtle border */
+  padding: 0.5rem 1rem;  /* More padding */
+  display: flex;  /* Ensure flex display */
+  align-items: center;  /* Center content vertically */
+}
+
+/* Specific colors for different message types */
+.full-width-message.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Match regular message background */
+  border: 1px solid rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.full-width-message.delta-info {
+  background: rgba(13, 110, 253, 0.15);  /* Match regular message background */
+  border: 1px solid rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
+
+/* Add some spacing for the legend */
+.metric-card .card-body {
+  padding: 0.5rem;  /* Consistent padding on all sides */
+}
+
+/* New row for the 3 state graphs with wider minimum width */
+.states-graphs-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Responsive behavior for state graphs */
+@media (max-width: 1500px) {
+  .states-graphs-row {
+    grid-template-columns: repeat(3, 1fr);  /* Keep 3 columns at this breakpoint */
+  }
+}
+
+@media (max-width: 1148px) {
+  .states-graphs-row {
+    grid-template-columns: repeat(2, 1fr);  /* 2 columns at medium size */
+  }
+  
+  /* Make state graphs have a wider minimum width */
+  .states-graphs-row .metric-card {
+    min-width: 216px;  /* 20% wider than the 180px for other cards */
+  }
+}
+
+@media (max-width: 740px) {
+  .states-graphs-row {
+    grid-template-columns: 1fr;  /* 1 column at small size */
+  }
+}
+
+/* Darker legend text for better readability */
+:deep(.chartjs-legend-item) {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
 </style>