Compare commits
7 Commits
2a525c85f7
...
e52211e326
| Author | SHA1 | Date | |
|---|---|---|---|
|
e52211e326 | ||
|
|
7d6c6ac627 | ||
|
|
763919f8c5 | ||
|
|
f41c71608d | ||
|
|
28b03222f0 | ||
|
|
e4e823db39 | ||
|
|
988437b3d0 |
22
pvc-vue/package-lock.json
generated
22
pvc-vue/package-lock.json
generated
@ -14,7 +14,8 @@
|
||||
"chartjs-plugin-annotation": "^3.0.1",
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-chartjs": "^5.3.2"
|
||||
"vue-chartjs": "^5.3.2",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
@ -1376,6 +1377,25 @@
|
||||
"chart.js": "^4.1.1",
|
||||
"vue": "^3.0.0-0 || ^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||
"integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router/node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-chartjs": "^5.3.2",
|
||||
"chartjs-plugin-annotation": "^3.0.1"
|
||||
"chartjs-plugin-annotation": "^3.0.1",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
||||
@ -10,10 +10,14 @@
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<nav class="nav-menu">
|
||||
<router-link to="/" class="nav-item active">
|
||||
<router-link to="/" class="nav-item" active-class="active" data-title="Overview">
|
||||
<i class="fas fa-home"></i>
|
||||
<span class="nav-text">Overview</span>
|
||||
</router-link>
|
||||
<router-link to="/nodes" class="nav-item" active-class="active" data-title="Nodes">
|
||||
<i class="fas fa-server"></i>
|
||||
<span class="nav-text">Nodes</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sidebar-footer">
|
||||
@ -29,13 +33,11 @@
|
||||
<div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
|
||||
{{ connectionStatusMessage }}
|
||||
</div>
|
||||
<div class="content-grid">
|
||||
<ClusterOverview
|
||||
<router-view
|
||||
:clusterData="clusterData"
|
||||
:metricsData="metricsHistory"
|
||||
:nodeData="nodeData"
|
||||
/>
|
||||
<NodeStatus :nodeData="nodeData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,9 +50,6 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import ClusterOverview from './components/ClusterOverview.vue';
|
||||
import MetricsCharts from './components/MetricsCharts.vue';
|
||||
import NodeStatus from './components/NodeStatus.vue';
|
||||
import ConfigPanel from './components/ConfigPanel.vue';
|
||||
import { useApiStore } from './stores/api';
|
||||
|
||||
@ -306,6 +305,7 @@ onUnmounted(() => {
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
@ -335,15 +335,42 @@ onUnmounted(() => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Add tooltip effect for collapsed sidebar */
|
||||
.sidebar.collapsed .nav-item: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;
|
||||
}
|
||||
|
||||
/* Add a small arrow to the tooltip */
|
||||
.sidebar.collapsed .nav-item: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;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-item {
|
||||
padding: 0.75rem 0.25rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-item i {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-footer .btn {
|
||||
padding: 0.375rem 0.5rem;
|
||||
display: flex;
|
||||
|
||||
@ -1,13 +1,23 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<h5 class="mb-0">Cluster Overview</h5>
|
||||
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div class="card-body" v-show="!isCollapsed">
|
||||
<div class="overview-container">
|
||||
<!-- 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">Cluster 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="metrics-row">
|
||||
<!-- Card 1: Cluster Name -->
|
||||
<div class="metric-card">
|
||||
@ -105,7 +115,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Utilization Graphs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.graphs }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.graphs" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="graphs-row">
|
||||
<!-- Health Card -->
|
||||
<div class="metric-card">
|
||||
@ -174,38 +210,100 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection('graphs')">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health Messages Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.messages }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.messages" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('messages')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.messages" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<!-- Health messages card -->
|
||||
<div class="metric-card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
|
||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="messages-grid">
|
||||
<div class="messages-list">
|
||||
<template v-if="displayMessages.length">
|
||||
<div
|
||||
v-for="(msg, idx) in displayMessages"
|
||||
:key="idx"
|
||||
:class="[
|
||||
'health-message',
|
||||
getDeltaClass(msg.health_delta),
|
||||
{'full-width-message': isSpecialMessage(msg)}
|
||||
getDeltaClass(msg.health_delta, msg),
|
||||
]"
|
||||
:title="msg.text || 'No details available'"
|
||||
>
|
||||
<div class="message-header">
|
||||
<i class="fas fa-circle-exclamation me-1"></i>
|
||||
<span class="message-text">
|
||||
{{ msg.id || 'Unknown Issue' }}
|
||||
<span v-if="msg.health_delta" class="health-delta">
|
||||
({{ msg.health_delta }}%)
|
||||
</span>
|
||||
<span class="message-id">{{ getMessageId(msg) }}</span>
|
||||
<span v-if="showHealthDelta(msg)" class="health-delta">
|
||||
(-{{ msg.health_delta }}%)
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
{{ getMessageText(msg) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="health-message healthy">
|
||||
<div class="message-header">
|
||||
<i class="fas fa-circle-check me-1"></i>
|
||||
<span class="message-id">Cluster healthy</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
Cluster is at full health with no faults
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection('messages')">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- States Graphs Section -->
|
||||
<div class="section-container" :class="{ 'collapsed': !sections.states }">
|
||||
<!-- Collapsed section indicator -->
|
||||
<div v-if="!sections.states" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<div class="collapsed-section-header">
|
||||
<h6 class="card-title mb-0 metric-label">State Graphs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column">
|
||||
<button class="section-toggle" @click="toggleSection('states')">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle button for expanded section -->
|
||||
<div v-show="sections.states" class="section-content-wrapper">
|
||||
<div class="section-content">
|
||||
<!-- States Graphs Row -->
|
||||
<div class="states-graphs-row">
|
||||
<!-- Node States Graph -->
|
||||
@ -245,6 +343,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-column expanded">
|
||||
<button class="section-toggle" @click="toggleSection('states')">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -291,37 +395,22 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
const displayMessages = computed(() => {
|
||||
const messages = [];
|
||||
|
||||
// Add maintenance message if maintenance is "true"
|
||||
if (props.clusterData.maintenance === "true") {
|
||||
messages.push({
|
||||
id: "Cluster is in maintenance",
|
||||
health_delta: null,
|
||||
text: "Cluster is currently in maintenance mode",
|
||||
maintenance: true
|
||||
});
|
||||
}
|
||||
|
||||
// Add other messages if they exist
|
||||
if (props.clusterData.cluster_health?.messages?.length) {
|
||||
// Check if there are any health messages
|
||||
if (props.clusterData.cluster_health?.messages) {
|
||||
// Add all messages from the cluster health data
|
||||
messages.push(...props.clusterData.cluster_health.messages);
|
||||
}
|
||||
|
||||
// If no messages and not in maintenance, show "No issues"
|
||||
if (messages.length === 0) {
|
||||
messages.push({
|
||||
id: "No issues detected",
|
||||
health_delta: null,
|
||||
text: "System is healthy",
|
||||
health_delta: 0 // This will trigger the delta-low class for green styling
|
||||
// Sort messages by health delta (highest impact first)
|
||||
return messages.sort((a, b) => {
|
||||
// If health_delta is not available, use 0
|
||||
const deltaA = a.health_delta || 0;
|
||||
const deltaB = b.health_delta || 0;
|
||||
return deltaB - deltaA; // Sort descending
|
||||
});
|
||||
}
|
||||
|
||||
return messages;
|
||||
});
|
||||
|
||||
const getHealthClass = (health) => {
|
||||
@ -339,12 +428,28 @@ const getHealthColors = (health) => {
|
||||
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
|
||||
};
|
||||
|
||||
const getDeltaClass = (delta) => {
|
||||
if (delta === null) return 'delta-info'; // For maintenance and healthy messages
|
||||
const value = Math.abs(delta);
|
||||
if (value <= 5) return 'delta-low';
|
||||
if (value <= 10) return 'delta-medium';
|
||||
return 'delta-high';
|
||||
const getDeltaClass = (delta, msg) => {
|
||||
// Special case for maintenance mode message
|
||||
if (msg && msg.id === 'Cluster is in maintenance') {
|
||||
return 'delta-info';
|
||||
}
|
||||
|
||||
// Special case for plugin error messages (the ones with 25%)
|
||||
if (msg && (msg.id === 'NODE_PLUGIN_PSQL_HV3' || msg.id === 'NODE_PLUGIN_ZKPR_HV3')) {
|
||||
return 'delta-high'; // These should be red
|
||||
}
|
||||
|
||||
// Special case for "No problems" message
|
||||
if (msg && msg.id === 'CLUSTER_HEALTHY') {
|
||||
return 'delta-low';
|
||||
}
|
||||
|
||||
// Handle numeric deltas
|
||||
if (delta === undefined || delta === null) return '';
|
||||
if (delta === 0) return 'delta-low'; // Zero delta - green like healthy messages
|
||||
if (Math.abs(delta) > 10) return 'delta-high'; // Large delta (>10%) - red
|
||||
if (Math.abs(delta) > 0) return 'delta-medium'; // Small delta (1-10%) - yellow
|
||||
return 'delta-info';
|
||||
};
|
||||
|
||||
const healthChartData = computed(() => {
|
||||
@ -558,12 +663,6 @@ const chartOptions = {
|
||||
}
|
||||
};
|
||||
|
||||
// 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 = {};
|
||||
@ -720,13 +819,7 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
|
||||
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
|
||||
borderColor: ctx => ctx.p0.parsed.y === 0 && ctx.p1.parsed.y === 0 ? 'transparent' : undefined
|
||||
});
|
||||
}
|
||||
return;
|
||||
@ -985,129 +1078,82 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Section visibility state
|
||||
const sections = ref({
|
||||
info: true,
|
||||
graphs: true,
|
||||
messages: true,
|
||||
states: true
|
||||
});
|
||||
|
||||
// Toggle section visibility
|
||||
const toggleSection = (section) => {
|
||||
sections.value[section] = !sections.value[section];
|
||||
};
|
||||
|
||||
// Add a new function to determine if we should show the health delta
|
||||
const showHealthDelta = (msg) => {
|
||||
// Don't show delta for "No issues detected" or similar messages
|
||||
if (msg.id === 'CLUSTER_HEALTHY') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Show delta for all other messages that have a delta value
|
||||
return msg.health_delta !== undefined && msg.health_delta !== null;
|
||||
};
|
||||
|
||||
// Function to customize message IDs
|
||||
const getMessageId = (msg) => {
|
||||
// Replace "System is healthy" with "Cluster is healthy with no faults"
|
||||
if (msg.id === 'CLUSTER_HEALTHY') {
|
||||
return 'Cluster is healthy with no faults';
|
||||
}
|
||||
|
||||
// Return the original ID for all other messages
|
||||
return msg.id || 'Unknown Issue';
|
||||
};
|
||||
|
||||
// Function to customize message text
|
||||
const getMessageText = (msg) => {
|
||||
return msg.text || 'No details available';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.overview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graphs-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* Equal width columns */
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr); /* Start with 8 equal columns */
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.health-messages {
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
min-height: 2.5rem;
|
||||
max-height: 30%;
|
||||
overflow-y: auto;
|
||||
margin-top: auto; /* Push to bottom of container */
|
||||
}
|
||||
|
||||
.messages-grid {
|
||||
.graphs-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.health-message {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 2.5em;
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
.messages-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0; /* Allow shrinking within grid cell */
|
||||
flex: 1; /* Take up available space */
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Add specific handling for message text to prevent wrapping */
|
||||
.message-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.health-message.healthy {
|
||||
background: rgba(40, 167, 69, 0.1);
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.health-message:hover::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
margin-left: 0.5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Adjust tooltip position if message is in the right half of the screen */
|
||||
@media (min-width: 768px) {
|
||||
.health-message:hover::after {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.health-delta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.delta-low {
|
||||
background: rgba(40, 167, 69, 0.15); /* Darker green background */
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-medium {
|
||||
background: rgba(255, 193, 7, 0.15); /* Darker yellow background */
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.delta-high {
|
||||
background: rgba(220, 53, 69, 0.15); /* Darker red background */
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.delta-info {
|
||||
background: rgba(13, 110, 253, 0.15); /* Darker blue background */
|
||||
color: #0d6efd;
|
||||
.no-messages {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
@ -1120,10 +1166,13 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 100%; /* Take full width of grid cell */
|
||||
overflow: hidden; /* Ensure content doesn't overflow */
|
||||
}
|
||||
|
||||
.metric-card .card-header {
|
||||
text-align: left;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.card-header h6 {
|
||||
@ -1132,6 +1181,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.metric-card .card-body {
|
||||
@ -1183,64 +1233,137 @@ onMounted(() => {
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 1201px) {
|
||||
.metrics-row {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* 4x1 for health/utilization graphs in full width */
|
||||
.graphs-row {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* 3x1 for state graphs in full width */
|
||||
.states-graphs-row {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1200px) {
|
||||
.metrics-row {
|
||||
grid-template-columns: repeat(2, 1fr); /* 2 columns when between 800px and 1200px */
|
||||
}
|
||||
|
||||
/* 2x2 for health/utilization graphs in medium width */
|
||||
.graphs-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
/* Match graphs: 2 across at this breakpoint */
|
||||
.messages-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1148px) {
|
||||
/* Match graphs: 1 across at this breakpoint */
|
||||
.messages-grid {
|
||||
/* 1x3 for state graphs in medium width (vertical stack) */
|
||||
.states-graphs-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.metrics-row, .graphs-row {
|
||||
@media (max-width: 800px) {
|
||||
.metrics-row {
|
||||
grid-template-columns: 1fr; /* 1 column when <= 800px */
|
||||
}
|
||||
|
||||
/* 1x4 for health/utilization graphs in narrow width */
|
||||
.graphs-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Allow messages to be narrower on very small screens */
|
||||
.messages-grid {
|
||||
grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
|
||||
/* 1x3 for state graphs in narrow width */
|
||||
.states-graphs-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
/* Base styles for graphs-row and states-graphs-row */
|
||||
.graphs-row, .states-graphs-row {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-maintenance {
|
||||
color: #0d6efd; /* Bootstrap blue */
|
||||
}
|
||||
|
||||
.health-message {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* Allow shrinking within grid cell */
|
||||
flex: 1; /* Take up available space */
|
||||
/* Default styling - will be overridden by delta classes */
|
||||
background: rgba(108, 117, 125, 0.15); /* Default gray background */
|
||||
color: #495057; /* Default gray text */
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.message-id {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
white-space: normal;
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.health-message.healthy {
|
||||
background: rgba(40, 167, 69, 0.1);
|
||||
color: #28a745;
|
||||
color: #0d5524; /* Match the delta-low text color */
|
||||
}
|
||||
|
||||
.health-message.healthy .message-id {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.health-message.healthy .message-content {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.health-delta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.delta-low {
|
||||
background: rgba(40, 167, 69, 0.15); /* Green background */
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-medium {
|
||||
background: rgba(255, 193, 7, 0.15); /* Yellow background */
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.delta-high {
|
||||
background: rgba(220, 53, 69, 0.15); /* Red background */
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.delta-info {
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
background: rgba(13, 110, 253, 0.15); /* Blue background */
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
@ -1305,41 +1428,105 @@ onMounted(() => {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Updated section styling */
|
||||
.section-container {
|
||||
position: relative;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* New content wrapper with toggle column */
|
||||
.section-content-wrapper {
|
||||
display: flex;
|
||||
position: relative; /* Add position relative to contain absolute positioned elements */
|
||||
}
|
||||
|
||||
.section-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* Allow content to shrink if needed */
|
||||
padding-right: 40px; /* Make room for the toggle button */
|
||||
}
|
||||
|
||||
.toggle-column {
|
||||
position: absolute;
|
||||
top: 4px; /* Position at exactly 4px from the top in both views */
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
z-index: 10;
|
||||
padding-left: 6px; /* Add left padding to the toggle column */
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-toggle:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Replace collapsed section indicator with header */
|
||||
.collapsed-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.03); /* Match card header background */
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
height: 38px; /* Match the height of card headers */
|
||||
width: 100%; /* Ensure it takes full width of its container */
|
||||
}
|
||||
|
||||
.collapsed-section-header .card-title {
|
||||
margin: 0;
|
||||
color: #495057; /* Match the exact color of expanded card titles */
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Ensure toggle column is properly aligned with card headers */
|
||||
.metric-card .card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
height: 38px; /* Ensure consistent height */
|
||||
}
|
||||
|
||||
/* Ensure the metric-label class is consistent */
|
||||
.metric-label {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Style for the "No issues detected" message */
|
||||
.no-messages {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
40
pvc-vue/src/components/PageTitle.vue
Normal file
40
pvc-vue/src/components/PageTitle.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="page-title-container">
|
||||
<h1 class="page-title">{{ title }}</h1>
|
||||
<div class="page-actions" v-if="$slots.actions">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
// Create the app
|
||||
const app = createApp(App);
|
||||
@ -9,5 +10,8 @@ const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
app.use(pinia);
|
||||
|
||||
// Use the router
|
||||
app.use(router);
|
||||
|
||||
// Mount the app
|
||||
app.mount('#app');
|
||||
|
||||
23
pvc-vue/src/router/index.js
Normal file
23
pvc-vue/src/router/index.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Overview from '../views/Overview.vue';
|
||||
import Nodes from '../views/Nodes.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Overview',
|
||||
component: Overview
|
||||
},
|
||||
{
|
||||
path: '/nodes',
|
||||
name: 'Nodes',
|
||||
component: Nodes
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
export default router;
|
||||
19
pvc-vue/src/views/Nodes.vue
Normal file
19
pvc-vue/src/views/Nodes.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="content-grid">
|
||||
<PageTitle title="Nodes" />
|
||||
<NodeStatus :nodeData="nodeData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NodeStatus from '../components/NodeStatus.vue';
|
||||
import PageTitle from '../components/PageTitle.vue';
|
||||
|
||||
defineProps({
|
||||
nodeData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
</script>
|
||||
27
pvc-vue/src/views/Overview.vue
Normal file
27
pvc-vue/src/views/Overview.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="content-grid">
|
||||
<PageTitle title="Cluster Overview" />
|
||||
<ClusterOverview
|
||||
:clusterData="clusterData"
|
||||
:metricsData="metricsData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ClusterOverview from '../components/ClusterOverview.vue';
|
||||
import PageTitle from '../components/PageTitle.vue';
|
||||
|
||||
defineProps({
|
||||
clusterData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
metricsData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user