pvc-vue/package-lock.json

@@ -14,8 +14,7 @@
         "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",
@@ -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=="
     }
   }
 }

pvc-vue/package.json

@@ -15,8 +15,7 @@
     "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",

pvc-vue/src/App.vue

@@ -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 
+      <div class="content-grid">
-        :clusterData="clusterData"
+        <ClusterOverview 
-        :metricsData="metricsHistory"
+          :clusterData="clusterData"
-        :nodeData="nodeData"
+          :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;

pvc-vue/src/components/PageTitle.vue

@@ -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> 

pvc-vue/src/main.js

@@ -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');

pvc-vue/src/router/index.js

@@ -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; 

pvc-vue/src/views/Nodes.vue

@@ -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> 

pvc-vue/src/views/Overview.vue

@@ -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>