Compare commits
No commits in common. "77adaea793c78a145b521ec6d7ccb9258a0c6f45" and "41d9ef40575b0ddbba6167b6df96cde00ef51a99" have entirely different histories.
77adaea793
...
41d9ef4057
@ -3,9 +3,10 @@
|
|||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
|
<div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<h5 class="text-white mb-0 text-center">
|
<h5 class="text-white mb-0">PVC Dashboard</h5>
|
||||||
{{ clusterData.cluster_name || 'Cluster' }}
|
<button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
|
||||||
</h5>
|
<i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-content">
|
<div class="sidebar-content">
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
@ -24,24 +25,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
<!-- Refresh interval display with tooltip -->
|
<button class="btn btn-outline-light w-100" @click="toggleConfig">
|
||||||
<div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
|
|
||||||
<i class="fas fa-sync-alt"></i>
|
|
||||||
<span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collapse/Expand button with tooltip -->
|
|
||||||
<button class="btn btn-outline-light w-100 mb-2"
|
|
||||||
@click="toggleSidebar"
|
|
||||||
data-title="Expand">
|
|
||||||
<i class="fas" :class="sidebarCollapsed ? 'fa-caret-right' : 'fa-caret-left'"></i>
|
|
||||||
<span class="action-text ms-2">{{ sidebarCollapsed ? 'Expand' : 'Collapse' }}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Configure button with tooltip -->
|
|
||||||
<button class="btn btn-outline-light w-100"
|
|
||||||
@click="toggleConfig"
|
|
||||||
data-title="Configure">
|
|
||||||
<i class="fas fa-cog"></i>
|
<i class="fas fa-cog"></i>
|
||||||
<span class="config-text ms-2">Configure</span>
|
<span class="config-text ms-2">Configure</span>
|
||||||
</button>
|
</button>
|
||||||
@ -55,9 +39,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<router-view
|
<router-view
|
||||||
:clusterData="clusterData"
|
:clusterData="clusterData"
|
||||||
:nodeData="nodeData"
|
|
||||||
:vmData="vmData"
|
|
||||||
:metricsData="metricsHistory"
|
:metricsData="metricsHistory"
|
||||||
|
:nodeData="nodeData"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -78,7 +61,6 @@ const api = useApiStore();
|
|||||||
const configPanelOpen = ref(false);
|
const configPanelOpen = ref(false);
|
||||||
const clusterData = ref({});
|
const clusterData = ref({});
|
||||||
const nodeData = ref([]);
|
const nodeData = ref([]);
|
||||||
const vmData = ref([]);
|
|
||||||
const metricsHistory = ref({
|
const metricsHistory = ref({
|
||||||
cpu: { labels: [], data: [] },
|
cpu: { labels: [], data: [] },
|
||||||
memory: { labels: [], data: [] },
|
memory: { labels: [], data: [] },
|
||||||
@ -115,20 +97,13 @@ const updateMetricsHistory = (timestamp, status) => {
|
|||||||
memory: status.resources?.memory?.utilization || 0,
|
memory: status.resources?.memory?.utilization || 0,
|
||||||
health: status.cluster_health?.health || 0,
|
health: status.cluster_health?.health || 0,
|
||||||
storage: status.resources?.disk?.utilization || 0,
|
storage: status.resources?.disk?.utilization || 0,
|
||||||
|
maintenance: status.maintenance === "true" ? true : false
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create maintenance array if it doesn't exist
|
|
||||||
if (!metricsHistory.value.maintenance) {
|
|
||||||
metricsHistory.value.maintenance = { labels: [], data: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Track maintenance status as a boolean for each data point
|
|
||||||
const isInMaintenance = status.maintenance === "true";
|
|
||||||
|
|
||||||
Object.keys(metrics).forEach(metric => {
|
Object.keys(metrics).forEach(metric => {
|
||||||
const labels = [...metricsHistory.value[metric].labels, timestamp];
|
const labels = [...metricsHistory.value[metric].labels, timestamp];
|
||||||
const data = [...metricsHistory.value[metric].data,
|
const data = [...metricsHistory.value[metric].data,
|
||||||
Math.round(metrics[metric])
|
typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric])
|
||||||
];
|
];
|
||||||
|
|
||||||
// Keep only last 180 points
|
// Keep only last 180 points
|
||||||
@ -143,21 +118,6 @@ const updateMetricsHistory = (timestamp, status) => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update maintenance history
|
|
||||||
const maintenanceLabels = [...metricsHistory.value.maintenance.labels, timestamp];
|
|
||||||
const maintenanceData = [...metricsHistory.value.maintenance.data, isInMaintenance];
|
|
||||||
|
|
||||||
// Keep only last 180 points for maintenance too
|
|
||||||
if (maintenanceLabels.length > 180) {
|
|
||||||
maintenanceLabels.shift();
|
|
||||||
maintenanceData.shift();
|
|
||||||
}
|
|
||||||
|
|
||||||
metricsHistory.value.maintenance = {
|
|
||||||
labels: maintenanceLabels,
|
|
||||||
data: maintenanceData
|
|
||||||
};
|
|
||||||
|
|
||||||
// Track node-specific metrics
|
// Track node-specific metrics
|
||||||
if (!metricsHistory.value.nodes) {
|
if (!metricsHistory.value.nodes) {
|
||||||
metricsHistory.value.nodes = {};
|
metricsHistory.value.nodes = {};
|
||||||
@ -212,20 +172,15 @@ const updateDashboard = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const [status, nodes, vms] = await Promise.all([
|
const status = await api.fetchStatus();
|
||||||
api.fetchStatus(),
|
const nodes = await api.fetchNodes();
|
||||||
api.fetchNodes(),
|
|
||||||
api.fetchVMs()
|
|
||||||
]);
|
|
||||||
|
|
||||||
console.log('[API] Status Response:', status);
|
console.log('[API] Status Response:', status);
|
||||||
console.log('[API] Nodes Response:', nodes);
|
console.log('[API] Nodes Response:', nodes);
|
||||||
console.log('[API] VMs Response:', vms);
|
|
||||||
|
|
||||||
// Update state with new objects
|
// Update state with new objects instead of mutating
|
||||||
clusterData.value = { ...status };
|
clusterData.value = { ...status };
|
||||||
nodeData.value = [...nodes];
|
nodeData.value = [...nodes];
|
||||||
vmData.value = [...vms];
|
|
||||||
|
|
||||||
const timestamp = new Date().toLocaleTimeString();
|
const timestamp = new Date().toLocaleTimeString();
|
||||||
updateMetricsHistory(timestamp, status);
|
updateMetricsHistory(timestamp, status);
|
||||||
@ -360,16 +315,16 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding: 0.75rem 0.25rem;
|
padding-left: 0.25rem;
|
||||||
|
padding-right: 0.25rem;
|
||||||
|
padding-top: 0.75rem;
|
||||||
border-top: 1px solid rgba(255,255,255,0.1);
|
border-top: 1px solid rgba(255,255,255,0.1);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed .sidebar-footer .btn {
|
.sidebar.collapsed .sidebar-footer .btn {
|
||||||
padding: 0.375rem;
|
padding: 0.375rem 0.5rem;
|
||||||
height: 38px;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-grid {
|
.content-grid {
|
||||||
@ -465,100 +420,8 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed .sidebar-footer .btn {
|
.sidebar.collapsed .sidebar-footer .btn {
|
||||||
padding: 0.375rem;
|
padding: 0.375rem 0.5rem;
|
||||||
height: 38px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add these styles for the sidebar header */
|
|
||||||
.sidebar-header h5 {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style for collapsed sidebar header */
|
|
||||||
.sidebar.collapsed .sidebar-header h5 {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
writing-mode: normal;
|
|
||||||
transform: none;
|
|
||||||
height: auto;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
white-space: normal;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style for refresh interval display */
|
|
||||||
.refresh-display {
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 0.75rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.collapsed .refresh-display {
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.collapsed .refresh-text {
|
|
||||||
display: inline;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style for action text in collapsed view */
|
|
||||||
.sidebar.collapsed .action-text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Standardize button heights and padding */
|
|
||||||
.sidebar-footer .btn {
|
|
||||||
position: relative;
|
|
||||||
height: 38px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Last button shouldn't have margin */
|
|
||||||
.sidebar-footer .btn:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add tooltip styles for footer elements in collapsed view */
|
|
||||||
.sidebar.collapsed .sidebar-footer .refresh-display:hover::after,
|
|
||||||
.sidebar.collapsed .sidebar-footer .btn:hover::after {
|
|
||||||
content: attr(data-title);
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: #343a40;
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1010;
|
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add arrow for the tooltips */
|
|
||||||
.sidebar.collapsed .sidebar-footer .refresh-display:hover::before,
|
|
||||||
.sidebar.collapsed .sidebar-footer .btn:hover::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-width: 5px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #343a40 transparent transparent;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
z-index: 1011;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -100,7 +100,6 @@
|
|||||||
title="Cluster Health"
|
title="Cluster Health"
|
||||||
:value="clusterHealth"
|
:value="clusterHealth"
|
||||||
:chart-data="healthChartData"
|
:chart-data="healthChartData"
|
||||||
:maintenance="isMaintenanceMode"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- CPU Chart -->
|
<!-- CPU Chart -->
|
||||||
@ -168,7 +167,7 @@
|
|||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
<i class="fas" :class="getMessageIcon(msg)"></i>
|
<i class="fas fa-circle-exclamation me-1"></i>
|
||||||
<span class="message-id">{{ getMessageId(msg) }}</span>
|
<span class="message-id">{{ getMessageId(msg) }}</span>
|
||||||
<span v-if="showHealthDelta(msg)" class="health-delta">
|
<span v-if="showHealthDelta(msg)" class="health-delta">
|
||||||
(-{{ msg.health_delta }}%)
|
(-{{ msg.health_delta }}%)
|
||||||
@ -323,22 +322,8 @@ const displayMessages = computed(() => {
|
|||||||
messages.push(...props.clusterData.cluster_health.messages);
|
messages.push(...props.clusterData.cluster_health.messages);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add maintenance mode message if the cluster is in maintenance mode
|
|
||||||
if (props.clusterData.maintenance === "true") {
|
|
||||||
messages.unshift({
|
|
||||||
id: 'Cluster is in maintenance',
|
|
||||||
text: 'Cluster is currently in maintenance mode - faults are not recorded and fencing is disabled',
|
|
||||||
health_delta: null, // Use null to indicate no delta should be shown
|
|
||||||
maintenance: true // Flag to identify this as a maintenance message
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort messages by health delta (highest impact first)
|
// Sort messages by health delta (highest impact first)
|
||||||
return messages.sort((a, b) => {
|
return messages.sort((a, b) => {
|
||||||
// Always keep maintenance message at the top
|
|
||||||
if (a.maintenance) return -1;
|
|
||||||
if (b.maintenance) return 1;
|
|
||||||
|
|
||||||
// If health_delta is not available, use 0
|
// If health_delta is not available, use 0
|
||||||
const deltaA = a.health_delta || 0;
|
const deltaA = a.health_delta || 0;
|
||||||
const deltaB = b.health_delta || 0;
|
const deltaB = b.health_delta || 0;
|
||||||
@ -388,8 +373,7 @@ const getDeltaClass = (delta, msg) => {
|
|||||||
// Simplified chart data for the new chart components
|
// Simplified chart data for the new chart components
|
||||||
const healthChartData = computed(() => ({
|
const healthChartData = computed(() => ({
|
||||||
labels: props.metricsData.health.labels,
|
labels: props.metricsData.health.labels,
|
||||||
data: props.metricsData.health.data,
|
data: props.metricsData.health.data
|
||||||
maintenance: props.metricsData.maintenance.data
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const cpuChartData = computed(() => ({
|
const cpuChartData = computed(() => ({
|
||||||
@ -943,22 +927,6 @@ const getMessageId = (msg) => {
|
|||||||
const getMessageText = (msg) => {
|
const getMessageText = (msg) => {
|
||||||
return msg.text || 'No details available';
|
return msg.text || 'No details available';
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add a function to determine which icon to show for a message
|
|
||||||
const getMessageIcon = (msg) => {
|
|
||||||
if (msg.maintenance) {
|
|
||||||
return 'fa-gear me-1'; // Use gear icon for maintenance with margin
|
|
||||||
} else if (msg.id === 'CLUSTER_HEALTHY') {
|
|
||||||
return 'fa-circle-check me-1'; // Use check icon for healthy with margin
|
|
||||||
} else {
|
|
||||||
return 'fa-circle-exclamation me-1'; // Default warning icon with margin
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add a computed property to check maintenance mode
|
|
||||||
const isMaintenanceMode = computed(() => {
|
|
||||||
return props.clusterData.maintenance === "true";
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -36,14 +36,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="updateInterval" class="form-label">Update Interval (seconds)</label>
|
<label for="updateInterval" class="form-label">Update Interval (ms)</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="updateInterval"
|
id="updateInterval"
|
||||||
v-model.number="formData.updateInterval"
|
v-model="formData.updateInterval"
|
||||||
min="1"
|
min="1000"
|
||||||
max="3600"
|
step="1000"
|
||||||
|
required
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -76,7 +77,7 @@ const emit = defineEmits(['update:modelValue', 'save']);
|
|||||||
const formData = ref({
|
const formData = ref({
|
||||||
apiUri: props.config.apiUri || '',
|
apiUri: props.config.apiUri || '',
|
||||||
apiKey: props.config.apiKey || '',
|
apiKey: props.config.apiKey || '',
|
||||||
updateInterval: props.config.updateInterval / 1000
|
updateInterval: props.config.updateInterval || 5000
|
||||||
});
|
});
|
||||||
|
|
||||||
const saveConfig = () => {
|
const saveConfig = () => {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,873 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- VM Selector Controls -->
|
|
||||||
<div class="vm-controls-container">
|
|
||||||
<div class="controls-row">
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-secondary list-toggle-btn"
|
|
||||||
@click="toggleVMList"
|
|
||||||
:class="{ 'active': showVMList }"
|
|
||||||
>
|
|
||||||
<i class="fas fa-list"></i> List VMs
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="search-box">
|
|
||||||
<i class="fas fa-search search-icon"></i>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search VMs..."
|
|
||||||
:value="showVMList ? searchQuery : (selectedVMData?.name || '')"
|
|
||||||
@input="handleSearch"
|
|
||||||
@focus="handleSearchFocus"
|
|
||||||
@blur="handleSearchBlur"
|
|
||||||
class="form-control search-input"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-if="searchQuery && showVMList"
|
|
||||||
class="btn-clear"
|
|
||||||
@click="clearSearch"
|
|
||||||
>
|
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-dropdown">
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-secondary dropdown-toggle"
|
|
||||||
:disabled="!showVMList"
|
|
||||||
@click="toggleFilterMenu"
|
|
||||||
>
|
|
||||||
<i class="fas fa-filter"></i> Filters
|
|
||||||
<span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
|
|
||||||
</button>
|
|
||||||
<div class="filter-menu" v-show="showFilterMenu">
|
|
||||||
<div class="filter-section">
|
|
||||||
<h6>Status</h6>
|
|
||||||
<div class="filter-options-dropdown">
|
|
||||||
<div class="filter-pills">
|
|
||||||
<button
|
|
||||||
v-for="state in availableStates"
|
|
||||||
:key="state"
|
|
||||||
class="filter-pill"
|
|
||||||
:class="{ 'active': appliedFilters.states[state] }"
|
|
||||||
@click="toggleFilter('states', state)"
|
|
||||||
>
|
|
||||||
{{ state }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-section">
|
|
||||||
<h6>Node</h6>
|
|
||||||
<div class="filter-options-dropdown">
|
|
||||||
<div class="filter-pills">
|
|
||||||
<button
|
|
||||||
v-for="node in availableNodes"
|
|
||||||
:key="node"
|
|
||||||
class="filter-pill"
|
|
||||||
:class="{ 'active': appliedFilters.nodes[node] }"
|
|
||||||
@click="toggleFilter('nodes', node)"
|
|
||||||
>
|
|
||||||
{{ node }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-actions">
|
|
||||||
<button class="btn btn-sm btn-outline-secondary" @click="resetFilters">Reset All</button>
|
|
||||||
<button class="btn btn-sm btn-primary" @click="toggleFilterMenu">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- VM List (Full Page) -->
|
|
||||||
<div v-if="showVMList" class="vm-list-fullpage">
|
|
||||||
<div v-if="filteredVMs.length === 0" class="no-vms-message">
|
|
||||||
<p>No VMs match your search criteria</p>
|
|
||||||
</div>
|
|
||||||
<div v-else class="vm-list">
|
|
||||||
<button
|
|
||||||
v-for="vm in filteredVMs"
|
|
||||||
:key="vm.name"
|
|
||||||
class="vm-list-item"
|
|
||||||
:class="{ 'active': selectedVM === vm.name }"
|
|
||||||
@click="selectVM(vm.name)"
|
|
||||||
:ref="el => { if (vm.name === selectedVM) selectedVMRef = el; }"
|
|
||||||
>
|
|
||||||
<div class="vm-item-content">
|
|
||||||
<div class="vm-name">{{ vm.name }}</div>
|
|
||||||
<div class="vm-status" :class="getStatusClass(vm.state)">
|
|
||||||
<i class="fas fa-circle status-indicator"></i>
|
|
||||||
<span>{{ vm.state }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- VM Details -->
|
|
||||||
<div v-if="selectedVMData && !showVMList" class="vm-details">
|
|
||||||
<!-- Information Cards Section -->
|
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
|
||||||
<!-- Collapsed section indicator -->
|
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="collapsed-section-header">
|
|
||||||
<h6 class="card-title mb-0 metric-label">VM Information</h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Toggle button for expanded section -->
|
|
||||||
<div v-show="sections.info" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="info-row">
|
|
||||||
<!-- Information cards will go here -->
|
|
||||||
<p>VM information cards will be populated here</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-column expanded">
|
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
|
||||||
<i class="fas fa-chevron-up"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Other sections... -->
|
|
||||||
<!-- (Utilization Graphs, Resources, Network sections follow the same pattern) -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- No VM Selected Message -->
|
|
||||||
<div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<i class="fas fa-info-circle me-2"></i>
|
|
||||||
Please select a VM from the list to view its details
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
vmData: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
metricsData: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
clusterData: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// State
|
|
||||||
const selectedVM = ref('');
|
|
||||||
const searchQuery = ref('');
|
|
||||||
const showVMList = ref(true);
|
|
||||||
const showFilterMenu = ref(false);
|
|
||||||
const searchActive = ref(false);
|
|
||||||
const appliedFilters = ref({
|
|
||||||
states: {},
|
|
||||||
nodes: {}
|
|
||||||
});
|
|
||||||
const selectedVMRef = ref(null);
|
|
||||||
|
|
||||||
// Section visibility state
|
|
||||||
const sections = ref({
|
|
||||||
info: true,
|
|
||||||
graphs: true,
|
|
||||||
resources: true,
|
|
||||||
network: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// Toggle VM list visibility
|
|
||||||
const toggleVMList = () => {
|
|
||||||
if (showVMList.value) {
|
|
||||||
showVMList.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
showVMList.value = true;
|
|
||||||
searchActive.value = false;
|
|
||||||
|
|
||||||
// Scroll to selected VM after the list is shown
|
|
||||||
if (selectedVM.value) {
|
|
||||||
nextTick(() => {
|
|
||||||
scrollToSelectedVM();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Toggle filter menu
|
|
||||||
const toggleFilterMenu = () => {
|
|
||||||
showFilterMenu.value = !showFilterMenu.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Toggle section visibility
|
|
||||||
const toggleSection = (section) => {
|
|
||||||
sections.value[section] = !sections.value[section];
|
|
||||||
};
|
|
||||||
|
|
||||||
// Clear search
|
|
||||||
const clearSearch = () => {
|
|
||||||
searchQuery.value = '';
|
|
||||||
searchActive.value = false;
|
|
||||||
filterVMs();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Toggle a filter on/off
|
|
||||||
const toggleFilter = (type, value) => {
|
|
||||||
appliedFilters.value[type][value] = !appliedFilters.value[type][value];
|
|
||||||
searchActive.value = true;
|
|
||||||
filterVMs();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Reset all filters
|
|
||||||
const resetFilters = () => {
|
|
||||||
Object.keys(appliedFilters.value.states).forEach(state => {
|
|
||||||
appliedFilters.value.states[state] = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(appliedFilters.value.nodes).forEach(node => {
|
|
||||||
appliedFilters.value.nodes[node] = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
searchActive.value = false;
|
|
||||||
filterVMs();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Count active filters
|
|
||||||
const activeFiltersCount = computed(() => {
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
Object.values(appliedFilters.value.states).forEach(isActive => {
|
|
||||||
if (isActive) count++;
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.values(appliedFilters.value.nodes).forEach(isActive => {
|
|
||||||
if (isActive) count++;
|
|
||||||
});
|
|
||||||
|
|
||||||
return count;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get available states from VM data
|
|
||||||
const availableStates = computed(() => {
|
|
||||||
const states = new Set();
|
|
||||||
props.vmData.forEach(vm => {
|
|
||||||
if (vm.state) states.add(vm.state);
|
|
||||||
});
|
|
||||||
// Get all states as an array
|
|
||||||
const statesArray = Array.from(states);
|
|
||||||
|
|
||||||
// Remove 'start' if it exists
|
|
||||||
const startIndex = statesArray.indexOf('start');
|
|
||||||
if (startIndex !== -1) {
|
|
||||||
statesArray.splice(startIndex, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort the remaining states
|
|
||||||
statesArray.sort();
|
|
||||||
|
|
||||||
// Add 'start' at the beginning if it was present
|
|
||||||
if (startIndex !== -1) {
|
|
||||||
statesArray.unshift('start');
|
|
||||||
}
|
|
||||||
|
|
||||||
return statesArray;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get available nodes from VM data
|
|
||||||
const availableNodes = computed(() => {
|
|
||||||
const nodes = new Set();
|
|
||||||
props.vmData.forEach(vm => {
|
|
||||||
if (vm.node) nodes.add(vm.node);
|
|
||||||
});
|
|
||||||
return Array.from(nodes).sort();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Filter VMs based on search query and active filter
|
|
||||||
const filteredVMs = computed(() => {
|
|
||||||
console.log('Computing filteredVMs with:', {
|
|
||||||
vmData: props.vmData,
|
|
||||||
searchActive: searchActive.value,
|
|
||||||
searchQuery: searchQuery.value,
|
|
||||||
appliedFilters: appliedFilters.value
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!props.vmData) return [];
|
|
||||||
|
|
||||||
let filtered = [...props.vmData];
|
|
||||||
|
|
||||||
if (searchActive.value && searchQuery.value) {
|
|
||||||
const query = searchQuery.value.toLowerCase();
|
|
||||||
filtered = filtered.filter(vm =>
|
|
||||||
vm.name.toLowerCase().includes(query)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchActive.value) {
|
|
||||||
// Apply state filters if any are active
|
|
||||||
const activeStates = Object.entries(appliedFilters.value.states)
|
|
||||||
.filter(([_, isActive]) => isActive)
|
|
||||||
.map(([state]) => state);
|
|
||||||
|
|
||||||
if (activeStates.length > 0) {
|
|
||||||
filtered = filtered.filter(vm => activeStates.includes(vm.state));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply node filters if any are active
|
|
||||||
const activeNodes = Object.entries(appliedFilters.value.nodes)
|
|
||||||
.filter(([_, isActive]) => isActive)
|
|
||||||
.map(([node]) => node);
|
|
||||||
|
|
||||||
if (activeNodes.length > 0) {
|
|
||||||
filtered = filtered.filter(vm => activeNodes.includes(vm.node));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Filtered VMs result:', filtered);
|
|
||||||
return filtered;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get the selected VM data
|
|
||||||
const selectedVMData = computed(() => {
|
|
||||||
if (!selectedVM.value || !props.vmData) return null;
|
|
||||||
return props.vmData.find(vm => vm.name === selectedVM.value) || null;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get status class based on VM state
|
|
||||||
const getStatusClass = (state) => {
|
|
||||||
if (!state) return '';
|
|
||||||
|
|
||||||
switch(state.toLowerCase()) {
|
|
||||||
case 'start':
|
|
||||||
return 'status-running';
|
|
||||||
case 'stop':
|
|
||||||
return 'status-stopped';
|
|
||||||
case 'disable':
|
|
||||||
return 'status-disabled';
|
|
||||||
default:
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle search input
|
|
||||||
const handleSearch = (event) => {
|
|
||||||
searchQuery.value = event.target.value;
|
|
||||||
searchActive.value = true;
|
|
||||||
filterVMs();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle search focus
|
|
||||||
const handleSearchFocus = () => {
|
|
||||||
// Show VM list when search is focused
|
|
||||||
if (!showVMList.value) {
|
|
||||||
showVMList.value = true;
|
|
||||||
// Scroll to selected VM after the list is shown
|
|
||||||
if (selectedVM.value) {
|
|
||||||
nextTick(() => {
|
|
||||||
scrollToSelectedVM();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
searchActive.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle search blur
|
|
||||||
const handleSearchBlur = (event) => {
|
|
||||||
// Don't close the list if clicking on another element within the list
|
|
||||||
const vmList = document.querySelector('.vm-list-fullpage');
|
|
||||||
if (vmList && vmList.contains(event.relatedTarget)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If a VM is selected and user clicks away from search, close the list
|
|
||||||
if (selectedVM.value && !event.relatedTarget) {
|
|
||||||
// Use setTimeout to allow click events to process first
|
|
||||||
setTimeout(() => {
|
|
||||||
// Only close if we're not clicking on a VM in the list
|
|
||||||
if (!document.activeElement || document.activeElement.tagName !== 'BUTTON' ||
|
|
||||||
!document.activeElement.classList.contains('vm-list-item')) {
|
|
||||||
showVMList.value = false;
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Filter VMs based on current search and filters
|
|
||||||
const filterVMs = () => {
|
|
||||||
// This is handled by the computed property
|
|
||||||
// But we need this function for event handlers
|
|
||||||
};
|
|
||||||
|
|
||||||
// Select a VM
|
|
||||||
const selectVM = (vmName) => {
|
|
||||||
selectedVM.value = vmName;
|
|
||||||
router.push({ query: { vm: vmName } });
|
|
||||||
showVMList.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Scroll to the selected VM in the list
|
|
||||||
const scrollToSelectedVM = () => {
|
|
||||||
if (selectedVMRef.value) {
|
|
||||||
// Get the VM list container
|
|
||||||
const vmList = document.querySelector('.vm-list');
|
|
||||||
if (!vmList) return;
|
|
||||||
|
|
||||||
// Calculate the scroll position
|
|
||||||
const vmElement = selectedVMRef.value;
|
|
||||||
const vmPosition = vmElement.offsetTop;
|
|
||||||
const listHeight = vmList.clientHeight;
|
|
||||||
const vmHeight = vmElement.clientHeight;
|
|
||||||
|
|
||||||
// Scroll to position the selected VM in the middle of the list if possible
|
|
||||||
const scrollPosition = vmPosition - (listHeight / 2) + (vmHeight / 2);
|
|
||||||
vmList.scrollTop = Math.max(0, scrollPosition);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Close filter menu when clicking outside
|
|
||||||
const closeFilterMenuOnClickOutside = (event) => {
|
|
||||||
const filterDropdown = document.querySelector('.filter-dropdown');
|
|
||||||
if (filterDropdown && !filterDropdown.contains(event.target)) {
|
|
||||||
showFilterMenu.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle clicks outside the VM list area
|
|
||||||
const handleClickOutside = (event) => {
|
|
||||||
// Only handle this if a VM is selected and the list is showing
|
|
||||||
if (selectedVM.value && showVMList.value) {
|
|
||||||
const vmControls = document.querySelector('.vm-controls-container');
|
|
||||||
const vmList = document.querySelector('.vm-list-fullpage');
|
|
||||||
|
|
||||||
// If click is outside both the controls and list, close the list
|
|
||||||
if ((!vmControls || !vmControls.contains(event.target)) &&
|
|
||||||
(!vmList || !vmList.contains(event.target))) {
|
|
||||||
showVMList.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Lifecycle hooks
|
|
||||||
onMounted(() => {
|
|
||||||
document.addEventListener('click', closeFilterMenuOnClickOutside);
|
|
||||||
document.addEventListener('click', handleClickOutside);
|
|
||||||
|
|
||||||
// Initialize with URL state if present
|
|
||||||
const vmFromQuery = route.query.vm;
|
|
||||||
if (vmFromQuery && props.vmData.some(vm => vm.name === vmFromQuery)) {
|
|
||||||
selectVM(vmFromQuery);
|
|
||||||
showVMList.value = false;
|
|
||||||
} else if (props.vmData.length > 0) {
|
|
||||||
showVMList.value = true;
|
|
||||||
selectedVM.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize filters with available states and nodes
|
|
||||||
availableStates.value.forEach(state => {
|
|
||||||
appliedFilters.value.states[state] = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
availableNodes.value.forEach(node => {
|
|
||||||
appliedFilters.value.nodes[node] = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener('click', closeFilterMenuOnClickOutside);
|
|
||||||
document.removeEventListener('click', handleClickOutside);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Watch for route changes to update selected VM
|
|
||||||
watch(() => route.query.vm, (newVm) => {
|
|
||||||
if (newVm && props.vmData.some(vm => vm.name === newVm)) {
|
|
||||||
selectVM(newVm);
|
|
||||||
// Hide VM list when navigating directly to a VM
|
|
||||||
showVMList.value = false;
|
|
||||||
} else if (props.vmData.length > 0) {
|
|
||||||
// If no VM specified in URL, show list and clear selection
|
|
||||||
selectedVM.value = '';
|
|
||||||
showVMList.value = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Watch for changes in the VM list visibility
|
|
||||||
watch(() => showVMList.value, (isVisible) => {
|
|
||||||
if (isVisible && selectedVM.value) {
|
|
||||||
// Scroll to selected VM when the list becomes visible
|
|
||||||
nextTick(() => {
|
|
||||||
scrollToSelectedVM();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add console logging to debug data flow
|
|
||||||
watch(() => props.vmData, (newData) => {
|
|
||||||
console.log('VMOverview received vmData:', newData);
|
|
||||||
}, { immediate: true });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* ... continuing from where we left off ... */
|
|
||||||
|
|
||||||
.collapsed-section-header .card-title {
|
|
||||||
margin: 0;
|
|
||||||
color: #495057;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-label {
|
|
||||||
color: #495057;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Styles */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.search-filter-container {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-buttons {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid layouts for details sections */
|
|
||||||
.info-row,
|
|
||||||
.graphs-row,
|
|
||||||
.resources-row,
|
|
||||||
.network-row {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1201px) {
|
|
||||||
.info-row {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphs-row {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.resources-row {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-row {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 801px) and (max-width: 1200px) {
|
|
||||||
.info-row {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphs-row {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.resources-row {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-row {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.info-row,
|
|
||||||
.graphs-row,
|
|
||||||
.resources-row,
|
|
||||||
.network-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* VM Controls */
|
|
||||||
.vm-controls-container {
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-toggle-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-toggle-btn.active {
|
|
||||||
background-color: #6c757d;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background-color: #0d6efd;
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search box styles */
|
|
||||||
.search-box {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #6c757d;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* VM List styles */
|
|
||||||
.vm-list-fullpage {
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
background-color: white;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-list-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-list-item:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-list-item.active {
|
|
||||||
background-color: rgba(13, 110, 253, 0.1);
|
|
||||||
border-left: 3px solid #0d6efd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-item-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-name {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vm-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator {
|
|
||||||
font-size: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Status colors */
|
|
||||||
.status-running {
|
|
||||||
color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-stopped {
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-paused {
|
|
||||||
color: #ffc107;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-error {
|
|
||||||
color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-unknown {
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-vms-message {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-vm-selected {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* VM Details */
|
|
||||||
.vm-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filter menu styles */
|
|
||||||
.filter-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
min-width: 250px;
|
|
||||||
padding: 0.75rem;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section h6 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #495057;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
padding-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-options-dropdown {
|
|
||||||
max-height: 150px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25rem;
|
|
||||||
padding-left: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-pills {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-pill {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-pill:hover {
|
|
||||||
background-color: #e9ecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-pill.active {
|
|
||||||
background-color: #0d6efd;
|
|
||||||
color: white;
|
|
||||||
border-color: #0d6efd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -50,11 +50,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({ labels: [], data: [], maintenance: [] })
|
default: () => ({ labels: [], data: [] })
|
||||||
},
|
|
||||||
maintenance: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -70,15 +66,7 @@ const chartOptions = {
|
|||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: (context) => {
|
label: (context) => `${context.parsed.y}%`
|
||||||
const dataPoint = context.dataIndex;
|
|
||||||
const maintenanceData = props.chartData.maintenance || [];
|
|
||||||
const isInMaintenance = maintenanceData[dataPoint];
|
|
||||||
|
|
||||||
return isInMaintenance
|
|
||||||
? `${context.parsed.y}% (Maintenance)`
|
|
||||||
: `${context.parsed.y}%`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
annotation: {
|
annotation: {
|
||||||
@ -129,14 +117,9 @@ const chartOptions = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Helper function to get health color based on value and maintenance status
|
// Helper function to get health color based on value
|
||||||
const getHealthColor = (value, isInMaintenance) => {
|
const getHealthColor = (value) => {
|
||||||
if (isInMaintenance) {
|
if (value > 90) {
|
||||||
return {
|
|
||||||
border: 'rgba(13, 110, 253, 0.8)', // Blue for maintenance
|
|
||||||
background: 'rgba(13, 110, 253, 0.1)'
|
|
||||||
};
|
|
||||||
} else if (value > 90) {
|
|
||||||
return {
|
return {
|
||||||
border: 'rgba(40, 167, 69, 0.8)', // Green
|
border: 'rgba(40, 167, 69, 0.8)', // Green
|
||||||
background: 'rgba(40, 167, 69, 0.1)'
|
background: 'rgba(40, 167, 69, 0.1)'
|
||||||
@ -157,13 +140,11 @@ const getHealthColor = (value, isInMaintenance) => {
|
|||||||
const formattedChartData = computed(() => {
|
const formattedChartData = computed(() => {
|
||||||
const labels = props.chartData.labels || [];
|
const labels = props.chartData.labels || [];
|
||||||
const data = props.chartData.data || [];
|
const data = props.chartData.data || [];
|
||||||
const maintenanceData = props.chartData.maintenance || [];
|
|
||||||
|
|
||||||
// For single value or empty data
|
// For single value or empty data
|
||||||
if (data.length <= 1) {
|
if (data.length <= 1) {
|
||||||
const value = data.length === 1 ? data[0] : props.value;
|
const value = data.length === 1 ? data[0] : props.value;
|
||||||
const isInMaintenance = props.maintenance;
|
const color = getHealthColor(value);
|
||||||
const color = getHealthColor(value, isInMaintenance);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: labels.length ? labels : ['Health'],
|
labels: labels.length ? labels : ['Health'],
|
||||||
@ -192,24 +173,16 @@ const formattedChartData = computed(() => {
|
|||||||
data,
|
data,
|
||||||
segment: {
|
segment: {
|
||||||
borderColor: ctx => {
|
borderColor: ctx => {
|
||||||
const index = ctx.p1DataIndex;
|
|
||||||
const value = ctx.p1.parsed.y;
|
const value = ctx.p1.parsed.y;
|
||||||
const isInMaintenance = maintenanceData[index];
|
|
||||||
|
|
||||||
if (isInMaintenance) return 'rgba(13, 110, 253, 0.8)'; // Blue for maintenance
|
|
||||||
if (value > 90) return 'rgba(40, 167, 69, 0.8)'; // Green
|
if (value > 90) return 'rgba(40, 167, 69, 0.8)'; // Green
|
||||||
if (value > 50) return 'rgba(255, 193, 7, 0.8)'; // Yellow
|
if (value > 50) return 'rgba(255, 193, 7, 0.8)'; // Yellow
|
||||||
return 'rgba(220, 53, 69, 0.8)'; // Red
|
return 'rgba(220, 53, 69, 0.8)'; // Red
|
||||||
},
|
},
|
||||||
backgroundColor: ctx => {
|
backgroundColor: ctx => {
|
||||||
const index = ctx.p1DataIndex;
|
|
||||||
const value = ctx.p1.parsed.y;
|
const value = ctx.p1.parsed.y;
|
||||||
const isInMaintenance = maintenanceData[index];
|
|
||||||
|
|
||||||
if (isInMaintenance) return 'rgba(13, 110, 253, 0.1)'; // Blue for maintenance
|
|
||||||
if (value > 90) return 'rgba(40, 167, 69, 0.1)'; // Green
|
if (value > 90) return 'rgba(40, 167, 69, 0.1)'; // Green
|
||||||
if (value > 50) return 'rgba(255, 193, 7, 0.1)'; // Yellow
|
if (value > 50) return 'rgba(255, 193, 7, 0.1)'; // Yellow
|
||||||
return 'rgba(220, 53, 69, 0.1)'; // Red
|
return 'rgba(220, 53, 69, 0.1)'; // Red
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fill: true,
|
fill: true,
|
||||||
@ -221,8 +194,7 @@ const formattedChartData = computed(() => {
|
|||||||
pointBorderColor: function(context) {
|
pointBorderColor: function(context) {
|
||||||
const index = context.dataIndex;
|
const index = context.dataIndex;
|
||||||
const value = context.dataset.data[index];
|
const value = context.dataset.data[index];
|
||||||
const isInMaintenance = maintenanceData[index];
|
return getHealthColor(value).border;
|
||||||
return getHealthColor(value, isInMaintenance).border;
|
|
||||||
},
|
},
|
||||||
pointBorderWidth: 1.5
|
pointBorderWidth: 1.5
|
||||||
}]
|
}]
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user