From 26a2d23798bdea03307a329d88c3e425fbeb1678 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 01:30:59 -0500
Subject: [PATCH] Refactor component layouts

---
 pvc-vue/src/App.vue                                  |  2 +-
 pvc-vue/src/components/charts/HealthChart.vue        |  1 +
 .../src/components/{ => charts}/MetricsCharts.vue    |  1 +
 .../components/{ => general}/CollapsibleSection.vue  |  0
 pvc-vue/src/components/{ => general}/ConfigPanel.vue |  0
 pvc-vue/src/components/{ => general}/PageTitle.vue   |  0
 pvc-vue/src/components/{ => general}/ValueCard.vue   |  0
 .../components/{ => pages/nodes}/NodeOverview.vue    | 12 ++++++------
 .../src/components/{ => pages/nodes}/NodeStatus.vue  |  1 +
 .../{ => pages/overview}/ClusterOverview.vue         | 12 ++++++------
 pvc-vue/src/components/{ => pages/vms}/VMDetail.vue  |  4 ++--
 .../src/components/{ => pages/vms}/VMOverview.vue    |  2 +-
 pvc-vue/src/views/Nodes.vue                          |  4 ++--
 pvc-vue/src/views/Overview.vue                       |  4 ++--
 pvc-vue/src/views/VMs.vue                            |  4 ++--
 15 files changed, 25 insertions(+), 22 deletions(-)
 rename pvc-vue/src/components/{ => charts}/MetricsCharts.vue (99%)
 rename pvc-vue/src/components/{ => general}/CollapsibleSection.vue (100%)
 rename pvc-vue/src/components/{ => general}/ConfigPanel.vue (100%)
 rename pvc-vue/src/components/{ => general}/PageTitle.vue (100%)
 rename pvc-vue/src/components/{ => general}/ValueCard.vue (100%)
 rename pvc-vue/src/components/{ => pages/nodes}/NodeOverview.vue (98%)
 rename pvc-vue/src/components/{ => pages/nodes}/NodeStatus.vue (98%)
 rename pvc-vue/src/components/{ => pages/overview}/ClusterOverview.vue (98%)
 rename pvc-vue/src/components/{ => pages/vms}/VMDetail.vue (96%)
 rename pvc-vue/src/components/{ => pages/vms}/VMOverview.vue (99%)

diff --git a/pvc-vue/src/App.vue b/pvc-vue/src/App.vue
index 0d699a8..4d7e3c8 100644
--- a/pvc-vue/src/App.vue
+++ b/pvc-vue/src/App.vue
@@ -71,7 +71,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import ConfigPanel from './components/ConfigPanel.vue';
+import ConfigPanel from './components/general/ConfigPanel.vue';
 import { useApiStore } from './stores/api';
 
 const api = useApiStore();
diff --git a/pvc-vue/src/components/charts/HealthChart.vue b/pvc-vue/src/components/charts/HealthChart.vue
index 5c15000..5d96501 100644
--- a/pvc-vue/src/components/charts/HealthChart.vue
+++ b/pvc-vue/src/components/charts/HealthChart.vue
@@ -25,6 +25,7 @@ import { computed } from 'vue';
 import { Line } from 'vue-chartjs';
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import ValueCard from '../general/ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(
diff --git a/pvc-vue/src/components/MetricsCharts.vue b/pvc-vue/src/components/charts/MetricsCharts.vue
similarity index 99%
rename from pvc-vue/src/components/MetricsCharts.vue
rename to pvc-vue/src/components/charts/MetricsCharts.vue
index 0e85262..54bb74b 100644
--- a/pvc-vue/src/components/MetricsCharts.vue
+++ b/pvc-vue/src/components/charts/MetricsCharts.vue
@@ -82,6 +82,7 @@ import {
   Tooltip,
   Legend
 } from 'chart.js';
+import ValueCard from '../general/ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(
diff --git a/pvc-vue/src/components/CollapsibleSection.vue b/pvc-vue/src/components/general/CollapsibleSection.vue
similarity index 100%
rename from pvc-vue/src/components/CollapsibleSection.vue
rename to pvc-vue/src/components/general/CollapsibleSection.vue
diff --git a/pvc-vue/src/components/ConfigPanel.vue b/pvc-vue/src/components/general/ConfigPanel.vue
similarity index 100%
rename from pvc-vue/src/components/ConfigPanel.vue
rename to pvc-vue/src/components/general/ConfigPanel.vue
diff --git a/pvc-vue/src/components/PageTitle.vue b/pvc-vue/src/components/general/PageTitle.vue
similarity index 100%
rename from pvc-vue/src/components/PageTitle.vue
rename to pvc-vue/src/components/general/PageTitle.vue
diff --git a/pvc-vue/src/components/ValueCard.vue b/pvc-vue/src/components/general/ValueCard.vue
similarity index 100%
rename from pvc-vue/src/components/ValueCard.vue
rename to pvc-vue/src/components/general/ValueCard.vue
diff --git a/pvc-vue/src/components/NodeOverview.vue b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
similarity index 98%
rename from pvc-vue/src/components/NodeOverview.vue
rename to pvc-vue/src/components/pages/nodes/NodeOverview.vue
index fc1a34d..073c55f 100644
--- a/pvc-vue/src/components/NodeOverview.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeOverview.vue
@@ -202,12 +202,12 @@
 <script setup>
 // Import all the same components and functions from the original Nodes.vue
 import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
-import CPUChart from './charts/CPUChart.vue';
-import MemoryChart from './charts/MemoryChart.vue';
-import StorageChart from './charts/StorageChart.vue';
-import HealthChart from './charts/HealthChart.vue';
-import ValueCard from './ValueCard.vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CPUChart from '../../charts/CPUChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({
diff --git a/pvc-vue/src/components/NodeStatus.vue b/pvc-vue/src/components/pages/nodes/NodeStatus.vue
similarity index 98%
rename from pvc-vue/src/components/NodeStatus.vue
rename to pvc-vue/src/components/pages/nodes/NodeStatus.vue
index 58012fb..34fe105 100644
--- a/pvc-vue/src/components/NodeStatus.vue
+++ b/pvc-vue/src/components/pages/nodes/NodeStatus.vue
@@ -38,6 +38,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const props = defineProps({
   nodeData: {
diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/pages/overview/ClusterOverview.vue
similarity index 98%
rename from pvc-vue/src/components/ClusterOverview.vue
rename to pvc-vue/src/components/pages/overview/ClusterOverview.vue
index 3381be1..b0e6ee3 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/pages/overview/ClusterOverview.vue
@@ -194,12 +194,12 @@ import {
   Filler
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import CPUChart from './charts/CPUChart.vue';
-import MemoryChart from './charts/MemoryChart.vue';
-import StorageChart from './charts/StorageChart.vue';
-import HealthChart from './charts/HealthChart.vue';
-import ValueCard from './ValueCard.vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CPUChart from '../../charts/CPUChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 // Register Chart.js components
 ChartJS.register(
diff --git a/pvc-vue/src/components/VMDetail.vue b/pvc-vue/src/components/pages/vms/VMDetail.vue
similarity index 96%
rename from pvc-vue/src/components/VMDetail.vue
rename to pvc-vue/src/components/pages/vms/VMDetail.vue
index 2dced00..6a2e3e4 100644
--- a/pvc-vue/src/components/VMDetail.vue
+++ b/pvc-vue/src/components/pages/vms/VMDetail.vue
@@ -73,8 +73,8 @@
 
 <script setup>
 import { ref } from 'vue';
-import CollapsibleSection from './CollapsibleSection.vue';
-import ValueCard from './ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const props = defineProps({
   vm: {
diff --git a/pvc-vue/src/components/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
similarity index 99%
rename from pvc-vue/src/components/VMOverview.vue
rename to pvc-vue/src/components/pages/vms/VMOverview.vue
index f2ee0ad..e6d2a47 100644
--- a/pvc-vue/src/components/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -128,7 +128,7 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import VMDetail from './VMDetail.vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 const router = useRouter();
 const route = useRoute();
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index 5b804db..f2966e8 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script setup>
-import PageTitle from '../components/PageTitle.vue';
-import NodeOverview from '../components/NodeOverview.vue';
+import PageTitle from '../components/general/PageTitle.vue';
+import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
 
 defineProps({
   nodeData: {
diff --git a/pvc-vue/src/views/Overview.vue b/pvc-vue/src/views/Overview.vue
index 389e10d..aa32ac2 100644
--- a/pvc-vue/src/views/Overview.vue
+++ b/pvc-vue/src/views/Overview.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import ClusterOverview from '../components/ClusterOverview.vue';
-import PageTitle from '../components/PageTitle.vue';
+import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
+import PageTitle from '../components/general/PageTitle.vue';
 
 defineProps({
   clusterData: {
diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue
index 8a83db2..c56cab9 100644
--- a/pvc-vue/src/views/VMs.vue
+++ b/pvc-vue/src/views/VMs.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script setup>
-import PageTitle from '../components/PageTitle.vue';
-import VMOverview from '../components/VMOverview.vue';
+import PageTitle from '../components/general/PageTitle.vue';
+import VMOverview from '../components/pages/vms/VMOverview.vue';
 
 const props = defineProps({
   vmData: {