Refactor component layouts

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();

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(

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(

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 CPUChart from '../../charts/CPUChart.vue';
-import MemoryChart from './charts/MemoryChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
-import StorageChart from './charts/StorageChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
-import HealthChart from './charts/HealthChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
-import ValueCard from './ValueCard.vue';
+import ValueCard from '../../general/ValueCard.vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({

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: {

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 CPUChart from '../../charts/CPUChart.vue';
-import MemoryChart from './charts/MemoryChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
-import StorageChart from './charts/StorageChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
-import HealthChart from './charts/HealthChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
-import ValueCard from './ValueCard.vue';
+import ValueCard from '../../general/ValueCard.vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 // Register Chart.js components
 ChartJS.register(

pvc-vue/src/components/pages/vms/VMDetail.vue

@@ -73,8 +73,8 @@
 
 <script setup>
 import { ref } from 'vue';
-import CollapsibleSection from './CollapsibleSection.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
-import ValueCard from './ValueCard.vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const props = defineProps({
   vm: {

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();

pvc-vue/src/views/Nodes.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script setup>
-import PageTitle from '../components/PageTitle.vue';
+import PageTitle from '../components/general/PageTitle.vue';
-import NodeOverview from '../components/NodeOverview.vue';
+import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
 
 defineProps({
   nodeData: {

pvc-vue/src/views/Overview.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import ClusterOverview from '../components/ClusterOverview.vue';
+import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
-import PageTitle from '../components/PageTitle.vue';
+import PageTitle from '../components/general/PageTitle.vue';
 
 defineProps({
   clusterData: {

pvc-vue/src/views/VMs.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script setup>
-import PageTitle from '../components/PageTitle.vue';
+import PageTitle from '../components/general/PageTitle.vue';
-import VMOverview from '../components/VMOverview.vue';
+import VMOverview from '../components/pages/vms/VMOverview.vue';
 
 const props = defineProps({
   vmData: {