Add routing and Nodes page

pvc-vue/package-lock.json

@@ -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=="
     }
   }
 }

pvc-vue/package.json

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

pvc-vue/src/App.vue

@@ -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">
+      <router-view 
-        <ClusterOverview 
+        :clusterData="clusterData"
-          :clusterData="clusterData"
+        :metricsData="metricsHistory"
-          :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;

pvc-vue/src/main.js

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

pvc-vue/src/router/index.js

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

pvc-vue/src/views/Nodes.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="content-grid">
+    <NodeStatus :nodeData="nodeData" />
+  </div>
+</template>
+
+<script setup>
+import NodeStatus from '../components/NodeStatus.vue';
+
+defineProps({
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+</script> 

pvc-vue/src/views/Overview.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="content-grid">
+    <ClusterOverview 
+      :clusterData="clusterData"
+      :metricsData="metricsData"
+    />
+    <NodeStatus :nodeData="nodeData" />
+  </div>
+</template>
+
+<script setup>
+import ClusterOverview from '../components/ClusterOverview.vue';
+import NodeStatus from '../components/NodeStatus.vue';
+
+defineProps({
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+</script>