Fix: connection error handling in the control page (#2164)

* Fix: connection error handling in the control page

* FIX: undefined values handling

* FIX:local translation missing

* FIX: format

---------

Co-authored-by: Max Behzadi <[email protected]>

launcher/public/output.css

@@ -163,9 +163,7 @@
 }
 
 /*
-
 ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
-
 */
 
 /*
@@ -633,7 +631,7 @@ video {
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
 
-[hidden] {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
@@ -4326,9 +4324,7 @@ video {
 
 .bg-zinc-700{
   --tw-bg-opacity: 1;
-
-  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
-
+  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
 }
 
 .bg-opacity-80{

launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue

@@ -202,15 +202,15 @@ const serviceStateController = (serviceName, stateProperty) => {
 
   if (serviceName.toLowerCase() === "prometheus") {
     servicesToCheck = servicesStore.installedServices;
-  } else if (setupsStore.selectedSetup && setupsStore.selectedSetup.services) {
-    servicesToCheck = setupsStore.selectedSetup.services;
+  } else if (setupsStore?.selectedSetup && setupsStore.selectedSetup?.services) {
+    servicesToCheck = setupsStore.selectedSetup?.services;
   } else {
-    servicesToCheck = setupsStore.allSetups.flatMap((setup) => setup.services || []);
+    servicesToCheck = setupsStore?.allSetups.flatMap((setup) => setup.services || []);
   }
 
   for (let service of servicesToCheck) {
     if (service.name.toLowerCase() === serviceName.toLowerCase()) {
-      isServiceOff = service.state === "exited";
+      isServiceOff = service?.state === "exited";
       break;
     }
   }
@@ -266,10 +266,10 @@ watch(servicesStore.installedServices, (newVal) => {
 
 const currentEpochSlot = async (consensusName) => {
   try {
-    let res = await ControlService.getCurrentEpochSlot(consensusName);
+    let res = await ControlService?.getCurrentEpochSlot(consensusName);
 
-    controlStore.currentSlotData = res.currentSlot;
-    controlStore.currentEpochData = res.currentEpoch;
+    controlStore.currentSlotData = res?.currentSlot;
+    controlStore.currentEpochData = res?.currentEpoch;
     controlStore.currentResult = res;
   } catch (error) {
     console.error("An error occurred while fetching currentEpochSlot:", error);

launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue

@@ -50,7 +50,7 @@ let pollingInterval;
 const chartSeries = computed(() => [
   {
     name: "CPU Usage",
-    data: chartData.value.length ? chartData.value : [[Date.now(), 0]],
+    data: chartData.value?.length ? chartData.value : [[Date.now(), 0]],
   },
 ]);
 
@@ -127,7 +127,7 @@ const updateChartData = () => {
   const currentTime = Date.now();
   chartData.value.push([currentTime, cpu.value]);
 
-  if (chartData.value.length > 200) {
+  if (chartData.value?.length > 200) {
     chartData.value.shift();
   }
 };

launcher/src/components/UI/control-page/components/widgets/SelectServiceWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="select-service-widget-parent flex flex-col w-full h-full justify-center items-center">
-    <div v-if="servicePairs.length === 0" class="wrapper flex w-full h-full justify-center items-center relative">
+    <div v-if="servicePairs?.length === 0" class="wrapper flex w-full h-full justify-center items-center relative">
       <NoData />
     </div>
 
@@ -36,7 +36,7 @@
       </div>
 
       <div v-if="controlStore.pickedService === 'vld'" class="h-1/2 w-full flex justify-center items-center">
-        <ServiceArrow v-if="filteredValidatorServices.length > 1" direction="prev" class="z-10" @prev="prevValidator" />
+        <ServiceArrow v-if="filteredValidatorServices?.length > 1" direction="prev" class="z-10" @prev="prevValidator" />
         <div class="validator-info w-4/5 h-full flex justify-center items-center">
           <ServiceIcon
             :icon="selectedValidatorService?.icon || '/img/icon/stereum-icons/stereum-logo.png'"
@@ -47,27 +47,27 @@
               {{ selectedValidatorService?.name || "" }}
             </div>
             <div class="id-val h-full w-2/6 flex justify-center items-center text-[60%] text-gray-200">
-              {{ selectedValidatorService?.config?.serviceID ? formatServiceId(selectedValidatorService.config.serviceID) : "" }}
+              {{ selectedValidatorService?.config?.serviceID ? formatServiceId(selectedValidatorService?.config?.serviceID) : "" }}
             </div>
           </div>
           <div class="vld-keys h-1/2 w-2/6 flex justify-center items-center text-gray-200 text-lg font-semibold uppercase">
             {{ formattedValidatorNo }}
           </div>
           <ServiceIcon icon="/img/icon/control-page-icons/key-eth.svg" alt-text="key" />
         </div>
-        <ServiceArrow v-if="filteredValidatorServices.length > 1" direction="next" class="z-10" @next="nextValidator" />
+        <ServiceArrow v-if="filteredValidatorServices?.length > 1" direction="next" class="z-10" @next="nextValidator" />
       </div>
 
       <div v-else-if="controlStore.pickedService === 'exeCons'" class="h-1/2 w-full flex justify-center items-center">
-        <ServiceArrow v-if="servicePairs.length > 1" direction="prev" class="z-10" @prev="prevPair" />
+        <ServiceArrow v-if="servicePairs?.length > 1" direction="prev" class="z-10" @prev="prevPair" />
         <div class="pairs-info w-4/5 h-full flex justify-center items-center">
           <ServiceDetails :service="selectedPair?.executionService" service-type="exec" />
           <ServiceDetails :service="selectedPair?.consensusService" service-type="cons" />
         </div>
-        <ServiceArrow v-if="servicePairs.length > 1" direction="next" class="z-10" @next="nextPair" />
+        <ServiceArrow v-if="servicePairs?.length > 1" direction="next" class="z-10" @next="nextPair" />
       </div>
       <div v-else class="h-1/2 w-full flex justify-center items-center">
-        <ServiceArrow v-if="filteredLCOMServices.length > 1" direction="prev" class="z-10" @prev="prevCSM" />
+        <ServiceArrow v-if="filteredLCOMServices?.length > 1" direction="prev" class="z-10" @prev="prevCSM" />
         <div class="icon-csm w-2/12 h-full flex justify-center items-center">
           <img class="w-3/4" :src="selectedLCOMService?.icon" :alt="selectedLCOMService?.name" />
         </div>
@@ -76,10 +76,10 @@
             {{ selectedLCOMService?.name }}
           </div>
           <div class="title w-full h-1/2 flex justify-center items-center text-xs text-gray-200 font-semibold">
-            {{ selectedLCOMService?.config?.serviceID ? formatServiceId(selectedLCOMService.config.serviceID) : "" }}
+            {{ selectedLCOMService?.config?.serviceID ? formatServiceId(selectedLCOMService.config?.serviceID) : "" }}
           </div>
         </div>
-        <ServiceArrow v-if="filteredLCOMServices.length > 1" direction="next" class="z-10" @next="nextCSM" />
+        <ServiceArrow v-if="filteredLCOMServices?.length > 1" direction="next" class="z-10" @next="nextCSM" />
       </div>
     </template>
   </div>
@@ -118,9 +118,9 @@ onMounted(() => {
 });
 
 const servicePairs = computed(() => {
-  if (!setupStore.selectedSetup || !setupStore.selectedSetup.services) {
+  if (!setupStore.selectedSetup || !setupStore.selectedSetup?.services) {
     return setupStore.allSetups
-      .filter((setup) => setup.services && setup.services.length > 0)
+      .filter((setup) => setup?.services && setup?.services?.length > 0)
       .flatMap((setup) =>
         setup.services
           .filter((service) => service.category === "consensus")
@@ -133,7 +133,7 @@ const servicePairs = computed(() => {
   }
 
   const setup = setupStore.selectedSetup;
-  if (!setup || !setup.services) return [];
+  if (!setup || !setup?.services) return [];
 
   return setup.services
     .filter((service) => service.category === "consensus")
@@ -146,12 +146,12 @@ const servicePairs = computed(() => {
 
 const createServicePair = (consensusService, executionClient, services, network) => {
   const executionDetails = services.find(
-    (service) => service.service === executionClient.service && service.config?.serviceID === executionClient.id
-  ) || { name: executionClient.service, config: { serviceID: executionClient.id } };
+    (service) => service?.service === executionClient?.service && service.config?.serviceID === executionClient?.id
+  ) || { name: executionClient.service, config: { serviceID: executionClient?.id } };
 
   const consensusDetails =
     services.find(
-      (service) => service.service === consensusService.service && service.config?.serviceID === consensusService.config?.serviceID
+      (service) => service?.service === consensusService?.service && service.config?.serviceID === consensusService.config?.serviceID
     ) || {};
 
   return {
@@ -246,11 +246,11 @@ const filteredValidatorServices = computed(() => {
     ? setupStore.selectedSetup.services
     : setupStore.allSetups.flatMap((setup) => setup.services || []);
 
-  return servicesToCheck.filter((service) => service.category === "validator");
+  return servicesToCheck?.filter((service) => service?.category === "validator");
 });
 
 const selectedValidatorService = computed(() => {
-  return filteredValidatorServices.value.length > 0 ? filteredValidatorServices.value[currentIndex.value] : null;
+  return filteredValidatorServices.value?.length > 0 ? filteredValidatorServices.value?.[currentIndex.value] : null;
 });
 
 const setupStoreRelatedValidatorPairs = computed(() => {
@@ -266,26 +266,26 @@ const filteredLCOMServices = computed(() => {
     ? setupStore.selectedSetup.services
     : setupStore.allSetups.flatMap((setup) => setup.services || []);
 
-  const filteredServices = servicesToCheck.filter((service) => service.service === "LCOMService");
+  const filteredServices = servicesToCheck?.filter((service) => service?.service === "LCOMService");
 
   updateRunningServicesCount(filteredServices);
 
   return filteredServices;
 });
 
 const updateRunningServicesCount = (services) => {
-  setupStore.runningServicesCount = services.filter((service) => service.state === "running").length;
+  setupStore.runningServicesCount = services?.filter((service) => service?.state === "running")?.length;
 };
 
 const selectedLCOMService = computed(() => {
-  return filteredLCOMServices.value.length > 0 ? filteredLCOMServices.value[currentCSMIndex.value] : null;
+  return filteredLCOMServices.value?.length > 0 ? filteredLCOMServices.value?.[currentCSMIndex.value] : null;
 });
 
 watch(
   () => currentCSMIndex.value,
   (newIndex, oldIndex) => {
     if (newIndex !== oldIndex) {
-      setupStore.selectedLCOMService = filteredLCOMServices.value[newIndex] || null;
+      setupStore.selectedLCOMService = filteredLCOMServices.value?.[newIndex] || null;
     }
   },
   { immediate: true }

launcher/src/components/UI/control-page/components/widgets/SyncStatus.vue

@@ -150,8 +150,8 @@ const getServiceSyncStatus = (serviceType, syncData) => {
   return syncData.flat().find((data) => data.serviceID === serviceId) || null;
 };
 
-const consensusSyncData = computed(() => getServiceSyncStatus("consensusService", controlStore.syncstatus.data));
-const executionSyncData = computed(() => getServiceSyncStatus("executionService", controlStore.syncstatus.data));
+const consensusSyncData = computed(() => getServiceSyncStatus("consensusService", controlStore?.syncstatus?.data));
+const executionSyncData = computed(() => getServiceSyncStatus("executionService", controlStore?.syncstatus?.data));
 
 watch(
   () => consensusSyncData.value,

launcher/src/languages/en.json

@@ -102,6 +102,7 @@
     "write": "WRITE",
     "read": "READ",
     "inclusionDistance": "INCLUSION DISTANCE",
+    "ipAddressIs": "IP ADDRESS IS",
     "rpc": "RPC-ENDPOINT",
     "ws": "WS-ENDPOINT",
     "syncStatus": "SYNC STATUS",