Compare commits
No commits in common. "e52211e3262297dc77db9e80dd9f842b29933282" and "2a525c85f79a8aa9bcd8ad22e96abbc37f944067" have entirely different histories.
e52211e326
...
2a525c85f7
22
pvc-vue/package-lock.json
generated
22
pvc-vue/package-lock.json
generated
@ -14,8 +14,7 @@
|
|||||||
"chartjs-plugin-annotation": "^3.0.1",
|
"chartjs-plugin-annotation": "^3.0.1",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-chartjs": "^5.3.2",
|
"vue-chartjs": "^5.3.2"
|
||||||
"vue-router": "^4.2.5"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
@ -1377,25 +1376,6 @@
|
|||||||
"chart.js": "^4.1.1",
|
"chart.js": "^4.1.1",
|
||||||
"vue": "^3.0.0-0 || ^2.7.0"
|
"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,8 +15,7 @@
|
|||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-chartjs": "^5.3.2",
|
"vue-chartjs": "^5.3.2",
|
||||||
"chartjs-plugin-annotation": "^3.0.1",
|
"chartjs-plugin-annotation": "^3.0.1"
|
||||||
"vue-router": "^4.2.5"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
|||||||
@ -10,14 +10,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="sidebar-content">
|
<div class="sidebar-content">
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
<router-link to="/" class="nav-item" active-class="active" data-title="Overview">
|
<router-link to="/" class="nav-item active">
|
||||||
<i class="fas fa-home"></i>
|
<i class="fas fa-home"></i>
|
||||||
<span class="nav-text">Overview</span>
|
<span class="nav-text">Overview</span>
|
||||||
</router-link>
|
</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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
@ -33,11 +29,13 @@
|
|||||||
<div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
|
<div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
|
||||||
{{ connectionStatusMessage }}
|
{{ connectionStatusMessage }}
|
||||||
</div>
|
</div>
|
||||||
<router-view
|
<div class="content-grid">
|
||||||
|
<ClusterOverview
|
||||||
:clusterData="clusterData"
|
:clusterData="clusterData"
|
||||||
:metricsData="metricsHistory"
|
:metricsData="metricsHistory"
|
||||||
:nodeData="nodeData"
|
|
||||||
/>
|
/>
|
||||||
|
<NodeStatus :nodeData="nodeData" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -50,6 +48,9 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
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 ConfigPanel from './components/ConfigPanel.vue';
|
||||||
import { useApiStore } from './stores/api';
|
import { useApiStore } from './stores/api';
|
||||||
|
|
||||||
@ -305,7 +306,6 @@ onUnmounted(() => {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
border-left: 3px solid transparent;
|
border-left: 3px solid transparent;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item:hover {
|
.nav-item:hover {
|
||||||
@ -335,42 +335,15 @@ onUnmounted(() => {
|
|||||||
display: none;
|
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 {
|
.sidebar.collapsed .nav-item {
|
||||||
padding: 0.75rem 0.25rem;
|
padding: 0.75rem 0.25rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .nav-item i {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar.collapsed .sidebar-footer .btn {
|
.sidebar.collapsed .sidebar-footer .btn {
|
||||||
padding: 0.375rem 0.5rem;
|
padding: 0.375rem 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,23 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="card">
|
||||||
<!-- Information Cards Section -->
|
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
|
||||||
<div class="section-container" :class="{ 'collapsed': !sections.info }">
|
<div class="d-flex justify-content-between align-items-center w-100">
|
||||||
<!-- Collapsed section indicator -->
|
<h5 class="mb-0">Cluster Overview</h5>
|
||||||
<div v-if="!sections.info" class="section-content-wrapper">
|
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
|
||||||
<div class="section-content">
|
|
||||||
<div class="collapsed-section-header">
|
|
||||||
<h6 class="card-title mb-0 metric-label">Cluster Information</h6>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="toggle-column">
|
|
||||||
<button class="section-toggle" @click="toggleSection('info')">
|
|
||||||
<i class="fas fa-chevron-down"></i>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<div class="card-body" v-show="!isCollapsed">
|
||||||
</div>
|
<div class="overview-container">
|
||||||
<!-- Toggle button for expanded section -->
|
|
||||||
<div v-show="sections.info" class="section-content-wrapper">
|
|
||||||
<div class="section-content">
|
|
||||||
<div class="metrics-row">
|
<div class="metrics-row">
|
||||||
<!-- Card 1: Cluster Name -->
|
<!-- Card 1: Cluster Name -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
@ -115,33 +105,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<div class="graphs-row">
|
||||||
<!-- Health Card -->
|
<!-- Health Card -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
@ -210,100 +174,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 -->
|
<!-- Health messages card -->
|
||||||
<div class="metric-card">
|
<div class="metric-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="messages-list">
|
<div class="messages-grid">
|
||||||
<template v-if="displayMessages.length">
|
<template v-if="displayMessages.length">
|
||||||
<div
|
<div
|
||||||
v-for="(msg, idx) in displayMessages"
|
v-for="(msg, idx) in displayMessages"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
:class="[
|
:class="[
|
||||||
'health-message',
|
'health-message',
|
||||||
getDeltaClass(msg.health_delta, msg),
|
getDeltaClass(msg.health_delta),
|
||||||
|
{'full-width-message': isSpecialMessage(msg)}
|
||||||
]"
|
]"
|
||||||
|
:title="msg.text || 'No details available'"
|
||||||
>
|
>
|
||||||
<div class="message-header">
|
|
||||||
<i class="fas fa-circle-exclamation me-1"></i>
|
<i class="fas fa-circle-exclamation me-1"></i>
|
||||||
<span class="message-id">{{ getMessageId(msg) }}</span>
|
<span class="message-text">
|
||||||
<span v-if="showHealthDelta(msg)" class="health-delta">
|
{{ msg.id || 'Unknown Issue' }}
|
||||||
(-{{ msg.health_delta }}%)
|
<span v-if="msg.health_delta" class="health-delta">
|
||||||
|
({{ msg.health_delta }}%)
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-content">
|
|
||||||
{{ getMessageText(msg) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</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>
|
</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 -->
|
<!-- States Graphs Row -->
|
||||||
<div class="states-graphs-row">
|
<div class="states-graphs-row">
|
||||||
<!-- Node States Graph -->
|
<!-- Node States Graph -->
|
||||||
@ -343,12 +245,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -395,22 +291,37 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isCollapsed = ref(false);
|
||||||
|
|
||||||
const displayMessages = computed(() => {
|
const displayMessages = computed(() => {
|
||||||
const messages = [];
|
const messages = [];
|
||||||
|
|
||||||
// Check if there are any health messages
|
// Add maintenance message if maintenance is "true"
|
||||||
if (props.clusterData.cluster_health?.messages) {
|
if (props.clusterData.maintenance === "true") {
|
||||||
// Add all messages from the cluster health data
|
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) {
|
||||||
messages.push(...props.clusterData.cluster_health.messages);
|
messages.push(...props.clusterData.cluster_health.messages);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sort messages by health delta (highest impact first)
|
// If no messages and not in maintenance, show "No issues"
|
||||||
return messages.sort((a, b) => {
|
if (messages.length === 0) {
|
||||||
// If health_delta is not available, use 0
|
messages.push({
|
||||||
const deltaA = a.health_delta || 0;
|
id: "No issues detected",
|
||||||
const deltaB = b.health_delta || 0;
|
health_delta: null,
|
||||||
return deltaB - deltaA; // Sort descending
|
text: "System is healthy",
|
||||||
|
health_delta: 0 // This will trigger the delta-low class for green styling
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return messages;
|
||||||
});
|
});
|
||||||
|
|
||||||
const getHealthClass = (health) => {
|
const getHealthClass = (health) => {
|
||||||
@ -428,28 +339,12 @@ const getHealthColors = (health) => {
|
|||||||
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
|
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
|
||||||
};
|
};
|
||||||
|
|
||||||
const getDeltaClass = (delta, msg) => {
|
const getDeltaClass = (delta) => {
|
||||||
// Special case for maintenance mode message
|
if (delta === null) return 'delta-info'; // For maintenance and healthy messages
|
||||||
if (msg && msg.id === 'Cluster is in maintenance') {
|
const value = Math.abs(delta);
|
||||||
return 'delta-info';
|
if (value <= 5) return 'delta-low';
|
||||||
}
|
if (value <= 10) return 'delta-medium';
|
||||||
|
return 'delta-high';
|
||||||
// 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(() => {
|
const healthChartData = computed(() => {
|
||||||
@ -663,6 +558,12 @@ 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
|
// Helper function to group objects by state
|
||||||
const groupByState = (items, stateExtractor) => {
|
const groupByState = (items, stateExtractor) => {
|
||||||
const groups = {};
|
const groups = {};
|
||||||
@ -819,7 +720,13 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
|
|||||||
datasets.push({
|
datasets.push({
|
||||||
label: capitalizeState(state),
|
label: capitalizeState(state),
|
||||||
data: data,
|
data: data,
|
||||||
borderColor: ctx => ctx.p0.parsed.y === 0 && ctx.p1.parsed.y === 0 ? 'transparent' : undefined
|
borderColor: stateInfo.color,
|
||||||
|
borderWidth: 2,
|
||||||
|
fill: false,
|
||||||
|
tension: 0.1,
|
||||||
|
pointRadius: 0,
|
||||||
|
currentCount: stateInfo.currentCount,
|
||||||
|
hidden: true // Hide from chart but keep in legend
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
@ -1078,82 +985,129 @@ 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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.overview-container {
|
.overview-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphs-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr); /* Equal width columns */
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metrics-row {
|
.metrics-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, 1fr); /* Start with 8 equal columns */
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphs-row {
|
.health-messages {
|
||||||
display: grid;
|
padding: 0.5rem;
|
||||||
gap: 0.5rem;
|
background: rgba(0, 0, 0, 0.02);
|
||||||
width: 100%;
|
border-radius: 0.25rem;
|
||||||
}
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
.messages-list {
|
min-height: 2.5rem;
|
||||||
display: flex;
|
max-height: 30%;
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
margin-top: auto; /* Push to bottom of container */
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-messages {
|
.messages-grid {
|
||||||
text-align: center;
|
display: grid;
|
||||||
color: #666;
|
grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
|
||||||
padding: 1rem;
|
gap: 0.5rem;
|
||||||
font-style: italic;
|
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 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 0; /* Allow shrinking within grid cell */
|
||||||
|
flex: 1; /* Take up available space */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add specific handling for message text to prevent wrapping */
|
||||||
|
.message-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-message.healthy {
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card {
|
.metric-card {
|
||||||
@ -1166,13 +1120,10 @@ const getMessageText = (msg) => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%; /* Take full width of grid cell */
|
width: 100%; /* Take full width of grid cell */
|
||||||
overflow: hidden; /* Ensure content doesn't overflow */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card .card-header {
|
.metric-card .card-header {
|
||||||
background-color: rgba(0, 0, 0, 0.03);
|
text-align: left;
|
||||||
padding: 0.5rem;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header h6 {
|
.card-header h6 {
|
||||||
@ -1181,7 +1132,6 @@ const getMessageText = (msg) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card .card-body {
|
.metric-card .card-body {
|
||||||
@ -1233,137 +1183,64 @@ const getMessageText = (msg) => {
|
|||||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1201px) {
|
@media (max-width: 1500px) {
|
||||||
.metrics-row {
|
.metrics-row {
|
||||||
grid-template-columns: repeat(4, 1fr);
|
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 {
|
.graphs-row {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1x3 for state graphs in medium width (vertical stack) */
|
/* Match graphs: 2 across at this breakpoint */
|
||||||
.states-graphs-row {
|
.messages-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1148px) {
|
||||||
|
/* Match graphs: 1 across at this breakpoint */
|
||||||
|
.messages-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 740px) {
|
||||||
.metrics-row {
|
.metrics-row, .graphs-row {
|
||||||
grid-template-columns: 1fr; /* 1 column when <= 800px */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 1x4 for health/utilization graphs in narrow width */
|
|
||||||
.graphs-row {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1x3 for state graphs in narrow width */
|
/* Allow messages to be narrower on very small screens */
|
||||||
.states-graphs-row {
|
.messages-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Base styles for graphs-row and states-graphs-row */
|
/* Even on small screens, ensure messages have reasonable width */
|
||||||
.graphs-row, .states-graphs-row {
|
.health-message {
|
||||||
display: grid;
|
min-width: 0; /* Allow shrinking */
|
||||||
gap: 0.5rem;
|
white-space: normal; /* Allow text wrapping on small screens */
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
white-space: normal; /* Allow text wrapping on small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-maintenance {
|
.status-maintenance {
|
||||||
color: #0d6efd; /* Bootstrap blue */
|
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 {
|
.health-message.healthy {
|
||||||
background: rgba(40, 167, 69, 0.1);
|
background: rgba(40, 167, 69, 0.1);
|
||||||
color: #0d5524; /* Match the delta-low text color */
|
color: #28a745;
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.delta-info {
|
||||||
background: rgba(13, 110, 253, 0.15); /* Blue background */
|
background: rgba(13, 110, 253, 0.1);
|
||||||
color: #0d6efd;
|
color: #0d6efd;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1428,105 +1305,41 @@ const getMessageText = (msg) => {
|
|||||||
padding: 0.5rem; /* Consistent padding on all sides */
|
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 */
|
/* Darker legend text for better readability */
|
||||||
:deep(.chartjs-legend-item) {
|
:deep(.chartjs-legend-item) {
|
||||||
color: #333 !important;
|
color: #333 !important;
|
||||||
font-weight: 500 !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>
|
</style>
|
||||||
|
|||||||
@ -1,40 +0,0 @@
|
|||||||
<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,7 +1,6 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import { createPinia } from 'pinia';
|
import { createPinia } from 'pinia';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
|
||||||
|
|
||||||
// Create the app
|
// Create the app
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
@ -10,8 +9,5 @@ const app = createApp(App);
|
|||||||
const pinia = createPinia();
|
const pinia = createPinia();
|
||||||
app.use(pinia);
|
app.use(pinia);
|
||||||
|
|
||||||
// Use the router
|
|
||||||
app.use(router);
|
|
||||||
|
|
||||||
// Mount the app
|
// Mount the app
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<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