Add VM list to nodes page and remove whitespace

pvc-vue/src/components/ClusterOverview.vue

@@ -19,101 +19,53 @@
       <div v-show="sections.info" class="section-content-wrapper">
         <div class="section-content">
           <div class="metrics-row">
-            <!-- Card 1: Cluster Name -->
+            <!-- Card 1: PVC Version -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="PVC Version" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.pvc_version || 'Unknown'" 
-                  <span class="metric-label">Cluster</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 2: Version -->
+            <!-- Card 2: Primary Node -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="Primary Node" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.primary_node || 'N/A'" 
-                  <span class="metric-label">Version</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 4: Nodes -->
+            <!-- Card 3: Nodes -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="Nodes" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.nodes?.total || 0" 
-                  <span class="metric-label">Nodes</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 5: Primary -->
+            <!-- Card 4: VMs -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="VMs" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.vms?.total || 0" 
-                  <span class="metric-label">Primary Node</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 6: VMs -->
+            <!-- Card 5: Networks -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="Networks" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.networks || 0" 
-                  <span class="metric-label">VMs</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 7: OSDs -->
+            <!-- Card 6: OSDs -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="OSDs" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.osds?.total || 0" 
-                  <span class="metric-label">OSDs</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 8: Pools -->
+            <!-- Card 7: Pools -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="Pools" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.pools || 0" 
-                  <span class="metric-label">Pools</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
-              </div>
-            </div>
 
-            <!-- Card 9: Volumes -->
+            <!-- Card 8: Volumes -->
-            <div class="metric-card">
+            <ValueCard 
-              <div class="card-header">
+              title="Volumes" 
-                <h6 class="card-title mb-0">
+              :value="clusterData.volumes || 0" 
-                  <span class="metric-label">Volumes</span>
+            />
-                </h6>
-              </div>
-              <div class="card-body">
-                <h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
-              </div>
-            </div>
           </div>
         </div>
         <div class="toggle-column expanded">
@@ -333,6 +285,7 @@ import CPUChart from './charts/CPUChart.vue';
 import MemoryChart from './charts/MemoryChart.vue';
 import StorageChart from './charts/StorageChart.vue';
 import HealthChart from './charts/HealthChart.vue';
+import ValueCard from './ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(

pvc-vue/src/components/ValueCard.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body" :class="bgColorClass">
+      <h4 class="metric-value" :class="valueClass">{{ value }}</h4>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  valueClass: {
+    type: String,
+    default: ''
+  },
+  bgColor: {
+    type: String,
+    default: ''
+  }
+});
+
+// Compute the background color class based on the bgColor prop
+const bgColorClass = computed(() => {
+  if (!props.bgColor) return '';
+  return `bg-${props.bgColor}`;
+});
+</script>
+
+<style scoped>
+.metric-card {
+  min-width: 180px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Background color classes */
+.bg-green {
+  background-color: rgba(40, 167, 69, 0.1);
+}
+
+.bg-yellow {
+  background-color: rgba(255, 193, 7, 0.1);
+}
+
+.bg-red {
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+.bg-blue {
+  background-color: rgba(13, 110, 253, 0.1);
+}
+
+.bg-gray {
+  background-color: rgba(108, 117, 125, 0.1);
+}
+
+.metric-card .card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: center;
+  align-items: center;
+}
+
+.metric-value {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style> 

pvc-vue/src/views/Nodes.vue

@@ -44,102 +44,45 @@
         <!-- Toggle button for expanded section -->
         <div v-show="sections.info" class="section-content-wrapper">
           <div class="section-content">
-            <div class="metrics-row">
+            <div class="info-row">
               <!-- Card 1: Daemon State -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Daemon State"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.daemon_state || 'Unknown'"
-                    <span class="metric-label">Daemon State</span>
+                :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
-                  </h6>
+              />
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.daemon_state || 'Unknown' }}</h4>
-                </div>
-              </div>
 
               <!-- Card 2: Coordinator State -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Coordinator State"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.coordinator_state || 'Unknown'"
-                    <span class="metric-label">Coordinator State</span>
+                :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
-                  </h6>
+              />
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.coordinator_state || 'Unknown' }}</h4>
-                </div>
-              </div>
 
               <!-- Card 3: Domain State -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Domain State"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.domain_state || 'Unknown'"
-                    <span class="metric-label">Domain State</span>
+                :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
-                  </h6>
+              />
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.domain_state || 'Unknown' }}</h4>
-                </div>
-              </div>
 
-              <!-- Card 4: Domains Count -->
+              <!-- Card 4: PVC Version -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="PVC Version"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.pvc_version || 'Unknown'"
-                    <span class="metric-label">Domains Count</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.domains_count || 0 }}</h4>
-                </div>
-              </div>
 
-              <!-- Card 5: PVC Version -->
+              <!-- Card 5: Kernel Version -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Kernel Version"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.kernel || 'Unknown'"
-                    <span class="metric-label">PVC Version</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.pvc_version || 'Unknown' }}</h4>
-                </div>
-              </div>
 
-              <!-- Card 6: Kernel Version -->
+              <!-- Card 6: VM Count -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="VM Count"
-                  <h6 class="card-title mb-0">
+                :value="selectedNodeData.domains_count || 0"
-                    <span class="metric-label">Kernel Version</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.kernel || 'Unknown' }}</h4>
-                </div>
-              </div>
-
-              <!-- Card 7: Host CPU Count -->
-              <div class="metric-card">
-                <div class="card-header">
-                  <h6 class="card-title mb-0">
-                    <span class="metric-label">Host CPU Count</span>
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.cpu_count || 0 }}</h4>
-                </div>
-              </div>
-
-              <!-- Card 8: Guest CPU Count -->
-              <div class="metric-card">
-                <div class="card-header">
-                  <h6 class="card-title mb-0">
-                    <span class="metric-label">Guest CPU Count</span>
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ selectedNodeData.vcpu?.allocated || 0 }}</h4>
-                </div>
-              </div>
             </div>
           </div>
           <div class="toggle-column expanded">
@@ -206,6 +149,52 @@
         </div>
       </div>
 
+      <!-- CPU Resources Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.cpu }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.cpu" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">CPU Resources</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('cpu')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.cpu" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="resources-row-cpu">
+              <!-- Card 1: Host CPUs -->
+              <ValueCard
+                title="Host CPUs"
+                :value="selectedNodeData.cpu_count || 0"
+              />
+
+              <!-- Card 2: Guest CPUs -->
+              <ValueCard
+                title="Guest CPUs"
+                :value="selectedNodeData.vcpu?.allocated || 0"
+              />
+
+              <!-- Card 3: Load -->
+              <ValueCard
+                title="Load"
+                :value="selectedNodeData.load || 0"
+              />
+            </div>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('cpu')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Memory Resources Section -->
       <div class="section-container" :class="{ 'collapsed': !sections.resources }">
         <!-- Collapsed section indicator -->
@@ -224,70 +213,94 @@
         <!-- Toggle button for expanded section -->
         <div v-show="sections.resources" class="section-content-wrapper">
           <div class="section-content">
-            <div class="resources-row">
+            <div class="resources-row-memory">
               <!-- Total Memory -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Total Memory"
-                  <h6 class="card-title mb-0">
+                :value="formatMemory(selectedNodeData.memory?.total)"
-                    <span class="metric-label">Total Memory</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.total) }}</h4>
-                </div>
-              </div>
 
               <!-- Used Memory -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Used Memory"
-                  <h6 class="card-title mb-0">
+                :value="formatMemory(selectedNodeData.memory?.used)"
-                    <span class="metric-label">Used Memory</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.used) }}</h4>
-                </div>
-              </div>
 
               <!-- Free Memory -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Free Memory"
-                  <h6 class="card-title mb-0">
+                :value="formatMemory(selectedNodeData.memory?.free)"
-                    <span class="metric-label">Free Memory</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.free) }}</h4>
-                </div>
-              </div>
 
               <!-- Allocated Memory -->
-              <div class="metric-card">
+              <ValueCard
-                <div class="card-header">
+                title="Allocated Memory"
-                  <h6 class="card-title mb-0">
+                :value="formatMemory(selectedNodeData.memory?.allocated)"
-                    <span class="metric-label">Allocated Memory</span>
+              />
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.allocated) }}</h4>
-                </div>
-              </div>
 
               <!-- Provisioned Memory -->
-              <div class="metric-card">
+              <ValueCard
+                title="Provisioned Memory"
+                :value="formatMemory(selectedNodeData.memory?.provisioned)"
+              />
+            </div>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('resources')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Running VMs Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.vms }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.vms" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Running VMs</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('vms')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.vms" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="vms-container">
+              <div class="vms-card">
                 <div class="card-header">
                   <h6 class="card-title mb-0">
-                    <span class="metric-label">Provisioned Memory</span>
+                    <span class="metric-label">Running VMs</span>
                   </h6>
                 </div>
                 <div class="card-body">
-                  <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.provisioned) }}</h4>
+                  <div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
+                    <p>No VMs running on this node</p>
+                  </div>
+                  <div v-else class="vm-list" :style="{ 
+                    'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))` 
+                  }">
+                    <div
+                      v-for="vm in selectedNodeData.running_domains"
+                      :key="vm"
+                      class="vm-item"
+                      @click="handleVmClick(vm)"
+                      title="View VM details"
+                    >
+                      {{ vm }}
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('resources')">
+            <button class="section-toggle" @click="toggleSection('vms')">
               <i class="fas fa-chevron-up"></i>
             </button>
           </div>
@@ -309,6 +322,7 @@ import CPUChart from '../components/charts/CPUChart.vue';
 import MemoryChart from '../components/charts/MemoryChart.vue';
 import StorageChart from '../components/charts/StorageChart.vue';
 import HealthChart from '../components/charts/HealthChart.vue';
+import ValueCard from '../components/ValueCard.vue';
 
 // Implement formatBytes function directly
 function formatBytes(bytes, decimals = 2) {
@@ -324,15 +338,12 @@ function formatBytes(bytes, decimals = 2) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
-// Format memory values (similar to formatBytes but with GB as default unit)
+// Format memory values
-function formatMemory(bytes) {
+const formatMemory = (memoryMB) => {
-  if (bytes === undefined || bytes === null) return 'N/A';
+  if (!memoryMB) return '0 GB';
-  if (bytes === 0) return '0 GB';
+  // The values are already in MB, so we just need to convert to GB
-
+  return Math.round(memoryMB / 1024) + ' GB';
-  // Convert to GB with 2 decimal places
+};
-  const gbValue = (bytes / (1024 * 1024 * 1024)).toFixed(2);
-  return `${gbValue} GB`;
-}
 
 const props = defineProps({
   nodeData: {
@@ -356,7 +367,9 @@ const props = defineProps({
 const sections = ref({
   info: true,
   graphs: true,
-  resources: true
+  cpu: true,
+  resources: true,
+  vms: true
 });
 
 // Toggle section visibility
@@ -436,20 +449,22 @@ const calculateCpuUtilization = (nodeData) => {
   return Math.round(utilization);
 };
 
-// Calculate memory utilization (memory.used / memory.total * 100)
+// Calculate memory utilization
-const calculateMemoryUtilization = (nodeData) => {
+const calculateMemoryUtilization = (node) => {
-  if (!nodeData || !nodeData.memory || !nodeData.memory.used || !nodeData.memory.total) return 0;
+  if (!node || !node.memory) return 0;
-
+  const used = node.memory.used || 0;
-  const utilization = (nodeData.memory.used / nodeData.memory.total) * 100;
+  const total = node.memory.total || 1; // Avoid division by zero
-  return Math.round(utilization);
+  if (total === 0) return 0;
+  return Math.round((used / total) * 100);
 };
 
-// Calculate allocated memory (memory.allocated / memory.total * 100)
+// Calculate allocated memory
-const calculateAllocatedMemory = (nodeData) => {
+const calculateAllocatedMemory = (node) => {
-  if (!nodeData || !nodeData.memory || !nodeData.memory.allocated || !nodeData.memory.total) return 0;
+  if (!node || !node.memory) return 0;
-
+  const allocated = node.memory.allocated || 0;
-  const utilization = (nodeData.memory.allocated / nodeData.memory.total) * 100;
+  const total = node.memory.total || 1; // Avoid division by zero
-  return Math.round(utilization);
+  if (total === 0) return 0;
+  return Math.round((allocated / total) * 100);
 };
 
 // Prepare chart data for the node
@@ -529,6 +544,59 @@ const nodeAllocatedMemoryChartData = computed(() => {
   };
 });
 
+// Helper functions for state colors
+// Determine color for daemon state
+const getDaemonStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'run') return 'green';
+  if (['init', 'shutdown'].includes(state)) return 'yellow';
+  if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
+  return 'blue';
+};
+
+// Determine color for coordinator state
+const getCoordinatorStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'primary') return 'green';
+  if (state === 'secondary') return 'blue';
+  if (state === 'hypervisor') return 'gray';
+  return '';
+};
+
+// Determine color for domain state
+const getDomainStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'ready') return 'green';
+  if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
+  return 'gray';
+};
+
+// Handle VM click (placeholder until VMs page is implemented)
+const handleVmClick = (vmName) => {
+  console.log(`VM clicked: ${vmName}`);
+  // You can show a toast notification or modal here
+  alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
+};
+
+// Calculate the minimum width for VM items based on the longest VM name
+const calculateVmItemMinWidth = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
+    return 100; // Default minimum width
+  }
+  
+  // Find the longest VM name
+  const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
+    return current.length > longest.length ? current : longest;
+  }, '');
+  
+  // Calculate width based on character count (approx 8px per character plus padding)
+  const minWidth = Math.max(100, longestVmName.length * 8 + 32);
+  return minWidth;
+});
+
 // Initialize the component
 onMounted(() => {
   // Select the first node by default if available
@@ -719,7 +787,7 @@ onUnmounted(() => {
   font-weight: 600;
 }
 
-.metrics-row, .graphs-row, .resources-row {
+.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
   display: grid;
   gap: 0.5rem;
   width: 100%;
@@ -731,11 +799,19 @@ onUnmounted(() => {
     grid-template-columns: repeat(4, 1fr);
   }
 
+  .info-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   .graphs-row {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  .resources-row {
+  .resources-row-cpu {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
     grid-template-columns: repeat(5, 1fr);
   }
 }
@@ -745,17 +821,29 @@ onUnmounted(() => {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .info-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .graphs-row {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .resources-row {
+  .resources-row-cpu {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media (max-width: 800px) {
-  .metrics-row, .graphs-row, .resources-row {
+  .metrics-row,
+  .info-row,
+  .graphs-row,
+  .resources-row-cpu,
+  .resources-row-memory {
     grid-template-columns: 1fr;
   }
 }
@@ -912,4 +1000,83 @@ onUnmounted(() => {
   background: white;
   border: none;
 }
+
+/* Running VMs section styles */
+.vms-container {
+  width: 100%;
+}
+
+.vms-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+}
+
+.vms-card .card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vms-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.vm-count {
+  font-size: 0.8rem;
+  color: #6c757d;
+  font-weight: normal;
+  margin-left: 0.5rem;
+}
+
+.no-vms {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.vm-list {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.vm-item {
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.015);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
 </style>