FIX: CPU Issue

launcher/public/output.css

@@ -2571,11 +2571,6 @@ video {
           appearance: none;
 }
 
-.auto-cols-max{
-  grid-auto-columns: -webkit-max-content;
-  grid-auto-columns: max-content;
-}
-
 .grid-flow-row{
   grid-auto-flow: row;
 }
@@ -2862,6 +2857,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2886,12 +2887,6 @@ video {
   margin-bottom: calc(1px * var(--tw-space-y-reverse));
 }
 
-.space-y-3 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .divide-x > :not([hidden]) ~ :not([hidden]){
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));

launcher/src/components/UI/edit-page/EditScreen.vue

@@ -147,7 +147,7 @@ import { useServers } from "@/store/servers";
 import { useServices } from "@/store/services";
 import { useFooter } from "@/store/theFooter";
 import { useStakingStore } from "@/store/theStaking";
-import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
+import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { useRouter } from "vue-router";
 import { useMultiSetups } from "../../../composables/multiSetups";
 import { useSetups } from "../../../store/setups";
@@ -171,6 +171,7 @@ import SetupInfos from "./components/modals/setups/SetupInfos.vue";
 import ChangesSection from "./sections/ChangesSection.vue";
 import ServiceSection from "./sections/ServiceSection.vue";
 import SidebarSection from "./sections/SidebarSection.vue";
+import { useFrontendServices } from "@/composables/services";
 
 const setupStore = useSetups();
 const footerStore = useFooter();
@@ -200,7 +201,7 @@ const nukeModalComponent = ref();
 const selectedSetupNetwork = ref("");
 const changeAnime = ref("/animation/confirm-changes/modify.gif");
 const setupImportAnime = ref("/animation/setup/loader.gif");
-const { loadSetups, loadServices, getAllSetups, getServerView, updateDom } = useMultiSetups();
+const { loadSetups, getAllSetups, getServerView, updateDom } = useMultiSetups();
 
 // Computed & Watcher
 
@@ -226,13 +227,6 @@ const getAimationSrc = computed(() => {
 //   { deep: true }
 // );
 
-watch(
-  () => manageStore.newConfiguration.length,
-  () => {
-    updateDom();
-  }
-);
-
 watchEffect(() => {
   if (setupStore.isImportAnimeActive) {
     setTimeout(() => {
@@ -291,7 +285,6 @@ onUnmounted(() => {
 // Methods
 const fetchSetups = async () => {
   await loadSetups();
-  await loadServices();
   setupStore.editSetups = getAllSetups();
 };
 
@@ -818,6 +811,7 @@ const confirmHandler = async () => {
   } catch (error) {
     console.error("Error processing changes:", error);
   } finally {
+    await useFrontendServices();
     await resetState();
   }
 };
@@ -858,10 +852,10 @@ const resetState = async () => {
   setupStore.selectedSetupToRemove = [];
   manageStore.isLineHidden = false;
   await listKeys();
+  await updateDom();
   setTimeout(() => {
     manageStore.disableConfirmButton = false;
   }, 3000);
-  await updateDom();
 };
 
 const nukeConfirmation = () => {

launcher/src/components/UI/edit-page/components/edit/setups/RenameSetup.vue

@@ -47,6 +47,7 @@ const renameSetup = () => {
 };
 
 const confirmRename = () => {
+  if(setupStore.setupToRename.trim() === "" || setupStore.setupToRename.trim() === "commonServices") return;
   emit("confirmRename");
 };
 </script>

launcher/src/components/UI/edit-page/components/edit/setups/SetupMenu.vue

@@ -24,6 +24,7 @@
 
 <script setup>
 import { useFooter } from "@/store/theFooter";
+import { useNodeManage } from "../../../../../../store/nodeManage";
 
 // props & emits
 const props = defineProps({
@@ -37,6 +38,7 @@ const emit = defineEmits(["deleteSetup", "connectSetup", "infoModal", "openConfi
 
 // Store
 const footerStore = useFooter();
+const manageStore = useNodeManage();
 
 // Methods
 const deleteSetup = () => {
@@ -55,6 +57,7 @@ const infoModal = () => {
 };
 
 const openConfigs = () => {
+  manageStore.confirmChanges = [];
   emit("openConfigs", props.setup);
 };
 

launcher/src/components/UI/edit-page/components/edit/setups/SingleSetup.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-[130px] h-[120px] col-span-1 row-span-1 items-center border rounded-md mx-auto relative grid grid-cols-2 grid-rows-12"
+    class="w-[130px] h-[120px] col-span-1 row-span-1 items-center border rounded-md mx-auto relative grid grid-cols-2 grid-rows-12 cursor-pointer"
     :class="getDynamicClasses(props.setup)"
-    @mouseenter="props.setup.isActive = true"
+    @click="props.setup.isActive = true"
     @mouseleave="props.setup.isActive = false"
   >
     <div

launcher/src/components/UI/edit-page/components/modals/setups/CreateSetup.vue

@@ -181,7 +181,7 @@ watch(
       layoutMsg.value = "";
     } else {
       buttonDisabled.value = true;
-      if (setupName.value.trim() === "") {
+      if (setupName.value.trim() === "" || setupName.value.trim() === "commonServices") {
         nameMsg.value = "Please enter a name for your setup";
       }
       if (setupColor.value === "") {

launcher/src/components/UI/node-page/NodeScreen.vue

@@ -71,7 +71,6 @@ import { onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { useRouter } from "vue-router";
 import { useRefreshNodeStats } from "../../../composables/monitoring";
 import { useMultiSetups } from "../../../composables/multiSetups";
-import { usePingQuality } from "../../../composables/pingQuality";
 import { useListKeys } from "../../../composables/validators";
 import NetworkStatus from "../../layers/NetworkStatus.vue";
 import AlertSection from "./sections/AlertSection.vue";
@@ -90,12 +89,10 @@ const router = useRouter();
 const footerStore = useFooter();
 const setupStore = useSetups();
 const { updateDom } = useMultiSetups();
-const { checkConnectionQuality, startPolling, stopPolling } = usePingQuality();
 
 const expertModeClient = ref(null);
 const isExpertModeOpen = ref(false);
 const isLogsPageActive = ref(false);
-const refreshStats = ref(false);
 
 let polling = null;
 let pollingVitals = null;
@@ -125,28 +122,11 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (refreshStats.value) {
-    updateConnectionStats();
-    refreshStats.value = false;
-  }
-});
-
-watchEffect(() => {
-  if (serviceStore.installedServices.length) {
-    updateDom();
-  }
-});
-
 //*****************  Lifecycle Hooks *****************
 
 onMounted(async () => {
-  await fetchSetups();
-  checkConnectionQuality();
+  await updateDom();
   nodeSetupsPrepration();
-  setTimeout(() => {
-    refreshStats.value = true;
-  }, 2000);
 
   updateConnectionStats();
 
@@ -156,7 +136,6 @@ onMounted(async () => {
   pollingVitals = setInterval(updateServerVitals, 1000); // refresh server vitals
   pollingNodeStats = setInterval(updateNodeStats, 1000); // refresh server vitals
   pollingListingKeys = setInterval(checkForListingKeys, 1000); // check for validators which need validator listing
-  startPolling();
 });
 
 onUnmounted(() => {
@@ -166,22 +145,12 @@ onUnmounted(() => {
   clearInterval(pollingListingKeys);
   clearInterval(pollingPings);
   setupStore.isConfigViewActive = false;
-  stopPolling();
   setupStore.selectedSetup = null;
 });
 
 //*************  Methods *************
 
-const fetchSetups = async () => {
-  await updateDom();
-};
 
-// const checkConnection = async () => {
-//   let num = 1;
-//   console.log("checking connection", num++);
-//   let connection = await ControlService.checkConnectionQuality();
-//   console.log("connected", connection);
-// };
 
 //get all configs and services
 const nodeSetupsPrepration = () => {

launcher/src/components/UI/node-page/components/node/NodeBody.vue

@@ -226,15 +226,6 @@ const openSetup = (setup) => {
   setupStore.selectedSetup = setup;
   // setupStore.selectedSetup.isActive = true;
   setupStore.isConfigViewActive = true;
-
-  serviceStore.installedServices = serviceStore.installedServices.filter((service) => {
-    const isNotServerService = !setupStore.serverServices.includes(service.name);
-    const isServiceInSetup = setup.services.some(
-      (svc) => svc.id === service.config?.serviceID
-    );
-
-    return isNotServerService && isServiceInSetup;
-  });
 };
 
 const exportSetup = (setup) => {

launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue

@@ -63,13 +63,11 @@ const getConsensusServices = computed(() => {
     return [];
   }
 
-  const selectedServiceIds = setupStore.selectedSetup.services.map((s) => s.id);
   const services = serviceStore.installedServices
     .filter(
       (s) =>
         s.category === "consensus" &&
-        selectedServiceIds.includes(s.config.serviceID) &&
-        s.setupId === setupStore.selectedSetup.setupId
+        s.setupId === setupStore.selectedSetup?.setupId
     )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();

launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue

@@ -71,15 +71,11 @@ const getExecutionServices = computed(() => {
   if (!setupStore.selectedSetup || !setupStore.selectedSetup.services) {
     return [];
   }
-
-  const selectedServiceIds = setupStore.selectedSetup.services.map((s) => s.id);
-
   const services = serviceStore.installedServices
     .filter(
       (s) =>
         s.category === "execution" &&
-        selectedServiceIds.includes(s.config.serviceID) &&
-        s.setupId === setupStore.selectedSetup.setupId
+        s.setupId === setupStore.selectedSetup?.setupId
     )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();

launcher/src/components/UI/the-control/DataApi.vue

@@ -87,7 +87,7 @@ export default {
     },
     filteredDataApiItems() {
       if (this.selectedSetup && Array.isArray(this.selectedSetup.services)) {
-        const serviceIds = this.selectedSetup.services.map((service) => service.id);
+        const serviceIds = this.selectedSetup.services.map((service) => service?.config?.serviceID);
         return this.dataApiItems.filter((item) => serviceIds.includes(item.id));
       }
       return [];

launcher/src/components/UI/the-control/RpcEndpoint.vue

@@ -87,7 +87,7 @@ export default {
     }),
     filteredRpcItems() {
       if (this.selectedSetup && Array.isArray(this.selectedSetup.services)) {
-        const serviceIds = this.selectedSetup.services.map((service) => service.id);
+        const serviceIds = this.selectedSetup.services.map((service) => service?.config?.serviceID);
         return this.rpcItems.filter((item) => serviceIds.includes(item.id));
       }
       return [];

launcher/src/components/UI/the-control/WsEndpoint.vue

@@ -88,7 +88,7 @@ export default {
     },
     filteredWSItems() {
       if (this.selectedSetup && Array.isArray(this.selectedSetup.services)) {
-        const serviceIds = this.selectedSetup.services.map((service) => service.id);
+        const serviceIds = this.selectedSetup.services.map((service) => service?.config?.serviceID);
         return this.wsItems.filter((item) => serviceIds.includes(item.id));
       }
       return [];

launcher/src/components/layers/NetworkStatus.vue

@@ -32,15 +32,13 @@
 </template>
 
 <script setup>
-import { usePingQuality } from "../../composables/pingQuality";
-import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
+import { useRoute } from "vue-router";
 import { useNodeStore } from "../../store/theNode";
 import WiFiSign from "./WIFISign.vue";
-import { useRoute } from "vue-router";
 
 const nodeStore = useNodeStore();
 const route = useRoute();
-const { checkConnectionQuality, startPolling, stopPolling } = usePingQuality();
 
 const alertTimeout = ref(null);
 
@@ -93,13 +91,4 @@ watchEffect(() => {
     nodeStore.connectionStatusIsPoor = false;
   }
 });
-
-onMounted(() => {
-  checkConnectionQuality();
-  startPolling(); // Start polling for connection quality when the component is mounted
-});
-
-onUnmounted(() => {
-  stopPolling(); // Stop polling when the component is unmounted
-});
 </script>