From c2004df6c1adb9f8ca42a90d05e496772912e2b6 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:44:57 +0100
Subject: [PATCH 1/2] FIX: warnings in dev console in the control page

---
 .../components/widgets/EpochSlot.vue          | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue b/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
index b55109b52..5b7ccf709 100644
--- a/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative">
+  <div
+    class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative"
+  >
     <NoData
       v-if="
         !setupsStore?.selectedServicePairs ||
@@ -12,30 +14,36 @@
     <template v-else>
       <ServiceLine
         :label="t('controlPage.currentEpoch')"
-        :value="flag ? beaconControler : controlStore?.currentResult?.currentEpoch"
+        :value="
+          String(flag ? beaconControler : controlStore?.currentResult?.currentEpoch)
+        "
         :hover-text="
           t('controlPage.currentEpochIs', {
-            epoch: flag ? beaconControler : controlStore?.currentResult?.currentEpoch,
+            epoch: String(
+              flag ? beaconControler : controlStore?.currentResult?.currentEpoch
+            ),
           })
         "
       />
       <ServiceLine
         label="INDEX"
-        :value="flag ? beaconControler : controlStore?.slotIndex + 1"
+        :value="String(flag ? beaconControler : controlStore?.slotIndex + 1)"
         :hover-text="
           controlStore.slotIndex < 0
             ? ''
             : t('controlPage.currentSlotIs', {
-                slot: controlStore.slotIndex + 1,
+                slot: String(controlStore.slotIndex + 1),
               })
         "
       />
       <ServiceLine
         :label="t('controlPage.currentSlot')"
-        :value="flag ? beaconControler : controlStore?.currentResult?.currentSlot"
+        :value="String(flag ? beaconControler : controlStore?.currentResult?.currentSlot)"
         :hover-text="
           t('controlPage.currentSlotIs', {
-            slot: flag ? beaconControler : controlStore?.currentResult?.currentSlot,
+            slot: String(
+              flag ? beaconControler : controlStore?.currentResult?.currentSlot
+            ),
           })
         "
       />
@@ -58,13 +66,22 @@ const footerStore = useFooter();
 const setupsStore = useSetups();
 
 const beaconControler = computed(() => {
-  if (!controlStore.currentResult || controlStore.currentResult.beaconStatus === undefined) {
+  if (
+    !controlStore.currentResult ||
+    controlStore.currentResult.beaconStatus === undefined
+  ) {
     return "Checking Beacon Status...";
   }
-  return controlStore.currentResult.beaconStatus !== 0 ? "No Running Beacon Node!" : "Loading...";
+  return controlStore.currentResult.beaconStatus !== 0
+    ? "No Running Beacon Node!"
+    : "Loading...";
 });
 
-const isConsensusMissing = computed(() => footerStore?.missingServices?.includes("consensus"));
+const isConsensusMissing = computed(() =>
+  footerStore?.missingServices?.includes("consensus")
+);
 
-const flag = computed(() => !controlStore?.currentResult || controlStore?.currentResult?.beaconStatus !== 0);
+const flag = computed(
+  () => !controlStore?.currentResult || controlStore?.currentResult?.beaconStatus !== 0
+);
 </script>

From a77b3405ff86b78522f04bcccf7160d416030c46 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:45:53 +0100
Subject: [PATCH 2/2] UPDATE: format

---
 .../components/widgets/EpochSlot.vue          | 33 +++++--------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue b/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
index 5b7ccf709..bde883474 100644
--- a/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative"
-  >
+  <div class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative">
     <NoData
       v-if="
         !setupsStore?.selectedServicePairs ||
@@ -14,14 +12,10 @@
     <template v-else>
       <ServiceLine
         :label="t('controlPage.currentEpoch')"
-        :value="
-          String(flag ? beaconControler : controlStore?.currentResult?.currentEpoch)
-        "
+        :value="String(flag ? beaconControler : controlStore?.currentResult?.currentEpoch)"
         :hover-text="
           t('controlPage.currentEpochIs', {
-            epoch: String(
-              flag ? beaconControler : controlStore?.currentResult?.currentEpoch
-            ),
+            epoch: String(flag ? beaconControler : controlStore?.currentResult?.currentEpoch),
           })
         "
       />
@@ -41,9 +35,7 @@
         :value="String(flag ? beaconControler : controlStore?.currentResult?.currentSlot)"
         :hover-text="
           t('controlPage.currentSlotIs', {
-            slot: String(
-              flag ? beaconControler : controlStore?.currentResult?.currentSlot
-            ),
+            slot: String(flag ? beaconControler : controlStore?.currentResult?.currentSlot),
           })
         "
       />
@@ -66,22 +58,13 @@ const footerStore = useFooter();
 const setupsStore = useSetups();
 
 const beaconControler = computed(() => {
-  if (
-    !controlStore.currentResult ||
-    controlStore.currentResult.beaconStatus === undefined
-  ) {
+  if (!controlStore.currentResult || controlStore.currentResult.beaconStatus === undefined) {
     return "Checking Beacon Status...";
   }
-  return controlStore.currentResult.beaconStatus !== 0
-    ? "No Running Beacon Node!"
-    : "Loading...";
+  return controlStore.currentResult.beaconStatus !== 0 ? "No Running Beacon Node!" : "Loading...";
 });
 
-const isConsensusMissing = computed(() =>
-  footerStore?.missingServices?.includes("consensus")
-);
+const isConsensusMissing = computed(() => footerStore?.missingServices?.includes("consensus"));
 
-const flag = computed(
-  () => !controlStore?.currentResult || controlStore?.currentResult?.beaconStatus !== 0
-);
+const flag = computed(() => !controlStore?.currentResult || controlStore?.currentResult?.beaconStatus !== 0);
 </script>