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",
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-chartjs": "^5.3.2",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-chartjs": "^5.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
@ -1377,25 +1376,6 @@
|
||||
"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,8 +15,7 @@
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-chartjs": "^5.3.2",
|
||||
"chartjs-plugin-annotation": "^3.0.1",
|
||||
"vue-router": "^4.2.5"
|
||||
"chartjs-plugin-annotation": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
||||
@ -10,14 +10,10 @@
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<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>
|
||||
<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">
|
||||
@ -33,11 +29,13 @@
|
||||
<div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
|
||||
{{ connectionStatusMessage }}
|
||||
</div>
|
||||
<router-view
|
||||
:clusterData="clusterData"
|
||||
:metricsData="metricsHistory"
|
||||
:nodeData="nodeData"
|
||||
/>
|
||||
<div class="content-grid">
|
||||
<ClusterOverview
|
||||
:clusterData="clusterData"
|
||||
:metricsData="metricsHistory"
|
||||
/>
|
||||
<NodeStatus :nodeData="nodeData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,6 +48,9 @@
|
||||
|
||||
<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';
|
||||
|
||||
@ -305,7 +306,6 @@ onUnmounted(() => {
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
@ -335,42 +335,15 @@ 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;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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 { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
// Create the app
|
||||
const app = createApp(App);
|
||||
@ -10,8 +9,5 @@ const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
app.use(pinia);
|
||||
|
||||
// Use the router
|
||||
app.use(router);
|
||||
|
||||
// Mount the 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