From ef3e013f2da2f296956bc2f0b493e2e0352035a5 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 11:01:24 -0500
Subject: [PATCH] Fix seconds handling in sidebar

---
 pvc-vue/src/App.vue                           | 23 +++++++++++++++----
 .../src/components/general/ConfigPanel.vue    | 18 +++++++++++----
 pvc-vue/src/stores/api.js                     | 12 +++++++---
 pvc-vue/vite.config.js                        |  7 +++++-
 4 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/pvc-vue/src/App.vue b/pvc-vue/src/App.vue
index 4d7e3c8..106ebe4 100644
--- a/pvc-vue/src/App.vue
+++ b/pvc-vue/src/App.vue
@@ -27,7 +27,7 @@
         <!-- Refresh interval display with tooltip -->
         <div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
           <i class="fas fa-sync-alt"></i>
-          <span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
+          <span class="refresh-text ms-2">{{ api.config.updateInterval }}s</span>
         </div>
         
         <!-- Collapse/Expand button with tooltip -->
@@ -218,10 +218,22 @@ const updateDashboard = async () => {
   }
 
   try {
+    console.log(`${new Date().toISOString()} Starting API calls`);
+    
+    // Ensure all endpoints are called together in a single Promise.all
     const [status, nodes, vms] = await Promise.all([
-      api.fetchStatus(),
-      api.fetchNodes(),
-      api.fetchVMs()
+      api.fetchStatus().then(res => {
+        console.log(`${new Date().toISOString()} Status API call complete`);
+        return res;
+      }),
+      api.fetchNodes().then(res => {
+        console.log(`${new Date().toISOString()} Nodes API call complete`);
+        return res;
+      }),
+      api.fetchVMs().then(res => {
+        console.log(`${new Date().toISOString()} VMs API call complete`);
+        return res;
+      })
     ]);
 
     console.log('[API] Status Response:', status);
@@ -250,7 +262,8 @@ const restartDashboard = () => {
     clearInterval(updateTimer);
   }
   updateDashboard();
-  updateTimer = setInterval(updateDashboard, api.config.updateInterval);
+  const intervalMs = api.config.updateInterval * 1000;
+  updateTimer = setInterval(updateDashboard, intervalMs);
 };
 
 onMounted(() => {
diff --git a/pvc-vue/src/components/general/ConfigPanel.vue b/pvc-vue/src/components/general/ConfigPanel.vue
index 845656a..7aaa0c7 100644
--- a/pvc-vue/src/components/general/ConfigPanel.vue
+++ b/pvc-vue/src/components/general/ConfigPanel.vue
@@ -42,9 +42,13 @@
               class="form-control"
               id="updateInterval"
               v-model.number="formData.updateInterval"
-              min="1"
-              max="3600"
+              min="5"
+              max="300"
+              required
             >
+            <div class="form-text">
+              Enter value in seconds (5-300, default: 15)
+            </div>
           </div>
 
           <div class="d-grid gap-2">
@@ -73,14 +77,20 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'save']);
 
+// Initialize form data with raw values from config
 const formData = ref({
   apiUri: props.config.apiUri || '',
   apiKey: props.config.apiKey || '',
-  updateInterval: props.config.updateInterval / 1000
+  updateInterval: props.config.updateInterval || 15 // Default to 15 seconds
 });
 
 const saveConfig = () => {
-  emit('save', { ...formData.value });
+  // Pass the raw values to parent
+  emit('save', {
+    apiUri: formData.value.apiUri,
+    apiKey: formData.value.apiKey,
+    updateInterval: formData.value.updateInterval // Pass seconds directly
+  });
 };
 
 const closePanel = () => {
diff --git a/pvc-vue/src/stores/api.js b/pvc-vue/src/stores/api.js
index 113a196..c3e82b5 100644
--- a/pvc-vue/src/stores/api.js
+++ b/pvc-vue/src/stores/api.js
@@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
   const config = ref({
     apiUri: localStorage.getItem('pvc_api_uri') || '',
     apiKey: localStorage.getItem('pvc_api_key') || '',
-    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 5000
+    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 15 // Default to 15s
   });
 
   // Computed
@@ -16,12 +16,18 @@ export const useApiStore = defineStore('api', () => {
 
   // Actions
   const updateConfig = (newConfig) => {
-    config.value = { ...newConfig };
+    // Ensure interval is between 5 and 300 seconds
+    const interval = Math.min(300, Math.max(5, parseInt(newConfig.updateInterval) || 15));
+    
+    config.value = {
+      ...newConfig,
+      updateInterval: interval
+    };
     
     // Save to localStorage
     localStorage.setItem('pvc_api_uri', newConfig.apiUri);
     localStorage.setItem('pvc_api_key', newConfig.apiKey);
-    localStorage.setItem('pvc_update_interval', newConfig.updateInterval.toString());
+    localStorage.setItem('pvc_update_interval', interval.toString());
   };
 
   const fetchStatus = async () => {
diff --git a/pvc-vue/vite.config.js b/pvc-vue/vite.config.js
index ea5d409..b859e18 100644
--- a/pvc-vue/vite.config.js
+++ b/pvc-vue/vite.config.js
@@ -1,6 +1,11 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
+function getTimestamp() {
+  const now = new Date();
+  return now.toISOString().replace('T', ' ').replace('Z', '');
+}
+
 export default defineConfig({
   plugins: [vue()],
   server: {
@@ -21,7 +26,7 @@ export default defineConfig({
               const requestPath = req.url.replace('/api', '');
               proxyReq.path = `${apiPath}${requestPath}`;
 
-              console.log(`Proxying to: ${options.target}${proxyReq.path}`);
+              console.log(`${getTimestamp()} Proxying to: ${options.target}${proxyReq.path}`);
             }
 
             if (req.headers['x-api-key']) {