FIX: all the widgets wired with the new condition

stereum-dev · Oct 26, 2024 · 884100b · 884100b
1 parent 3523628
commit 884100b
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 130 deletions.
diff --git a/launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue b/launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="amsterdam-parent">
-    <!-- ||
+    <no-data
+      v-if="
+        !setupsStore.selectedServicePairs ||
         isConsensusMissing ||
         !footerStore.isConsensusRunning ||
-        footerStore.prometheusIsOff -->
-    <no-data v-if="!setupsStore.selectedServicePairs" />
+        footerStore.prometheusIsOff
+      "
+    />
     <template v-else>
       <div
         class="icoTitle"
@@ -159,7 +162,7 @@ const isConsensusMissing = computed(() =>
 );
 
 const proposedBlock = computed(() => {
-  if (setupsStore.selectedSetup?.network === "gnosis") {
+  if (setupsStore.selectedServicePairs?.network === "gnosis") {
     return Array.from({ length: 16 }, () => ({
       slotNumber: 0,
       slotStatus: "pending",
@@ -198,6 +201,8 @@ const serviceStateController = (serviceName, stateProperty) => {
     servicesToCheck = servicesStore.installedServices;
   } else if (setupsStore.selectedSetup && setupsStore.selectedSetup.services) {
     servicesToCheck = setupsStore.selectedSetup.services;
+  } else {
+    servicesToCheck = setupsStore.allSetups.flatMap((setup) => setup.services || []);
   }
 
   for (let service of servicesToCheck) {
@@ -214,16 +219,22 @@ const serviceController = (args, setup) => {
   const foundCategories = new Set();
   let hasPrometheus = false;
 
-  for (let obj of args) {
-    if (obj.name.toLowerCase().includes("prometheus")) {
-      hasPrometheus = true;
+  if (Array.isArray(args)) {
+    for (let obj of args) {
+      if (obj?.name?.toLowerCase().includes("prometheus")) {
+        hasPrometheus = true;
+      }
     }
   }
 
-  if (setup && setup.services) {
-    for (let service of setup.services) {
-      if (service.category === "consensus" || service.category === "execution") {
-        foundCategories.add(service.category);
+  const setupsToCheck = Array.isArray(setup) ? setup : [setup];
+
+  for (const singleSetup of setupsToCheck) {
+    if (singleSetup?.services && Array.isArray(singleSetup.services)) {
+      for (let service of singleSetup.services) {
+        if (service.category === "consensus" || service.category === "execution") {
+          foundCategories.add(service.category);
+        }
       }
     }
   }
@@ -243,8 +254,10 @@ const serviceController = (args, setup) => {
 };
 
 watch(servicesStore.installedServices, (newVal) => {
-  const selectedSetup = setupsStore.selectedSetup ? setupsStore.selectedSetup : [];
-  serviceController(newVal, selectedSetup);
+  const setupToCheck = setupsStore.selectedSetup?.services?.length
+    ? setupsStore.selectedSetup
+    : setupsStore.allSetups;
+  serviceController(newVal, setupToCheck);
   const consensusServiceName =
     setupsStore?.selectedServicePairs?.consensusService?.name || null;
 
@@ -257,18 +270,6 @@ watch(servicesStore.installedServices, (newVal) => {
   );
 });
 
-watch(setupsStore.selectedSetup, (newVal, oldVal) => {
-  if (newVal?.network !== oldVal?.network) {
-    if (newVal?.network === "gnosis" || oldVal?.network === "gnosis") {
-      networkFlag.value = true;
-    }
-
-    currentEpochSlot(
-      setupsStore?.selectedServicePairs?.consensusService?.name?.toUpperCase()
-    );
-  }
-});
-
 const currentEpochSlot = async (consensusName) => {
   try {
     let res = await ControlService.getCurrentEpochSlot(consensusName);
@@ -282,7 +283,8 @@ const currentEpochSlot = async (consensusName) => {
 };
 
 const refreshTimer = () => {
-  const intervalTime = setupsStore.selectedSetup?.network === "gnosis" ? 5000 : 11000;
+  const intervalTime =
+    setupsStore.selectedServicePairs?.network === "gnosis" ? 5000 : 11000;
 
   polling.value = setInterval(() => {
     if (controlStore.currentSlotData && controlStore.currentEpochData) {
@@ -320,13 +322,13 @@ watch(
     if (networkFlag.value) {
       changeCounter.value++;
       if (
-        setupsStore.selectedSetup?.network === "gnosis" &&
+        setupsStore.selectedServicePairs?.network === "gnosis" &&
         controlStore.changeCounter === 4
       ) {
         networkFlag.value = false;
         changeCounter.value = 0;
       } else if (
-        setupsStore.selectedSetup?.network !== "gnosis" &&
+        setupsStore.selectedServicePairs?.network !== "gnosis" &&
         controlStore.changeCounter === 2
       ) {
         networkFlag.value = false;

diff --git a/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue b/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.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="!setupStore.selectedServicePairs" />
     <template v-else>
       <EndpointServiceLine
@@ -64,27 +62,21 @@ const extractPort = (url) => {
 const rpcToggle = async () => {
   nodeHeaderStore.rpcState = !nodeHeaderStore.rpcState;
   await (nodeHeaderStore.rpcState
-    ? ControlService.openRpcTunnel(
-        setupStore?.selectedServicePairs?.executionService?.config?.serviceID
-      )
+    ? ControlService.openRpcTunnel(setupStore?.selectedServicePairs?.executionService?.config?.serviceID)
     : ControlService.closeRpcTunnel());
 };
 
 const dataToggle = async () => {
   nodeHeaderStore.dataState = !nodeHeaderStore.dataState;
   await (nodeHeaderStore.dataState
-    ? ControlService.openBeaconTunnel(
-        setupStore?.selectedServicePairs?.consensusService?.id
-      )
+    ? ControlService.openBeaconTunnel(setupStore?.selectedServicePairs?.consensusService?.id)
     : ControlService.closeBeaconTunnel());
 };
 
 const wsToggle = async () => {
   nodeHeaderStore.wsState = !nodeHeaderStore.wsState;
   await (nodeHeaderStore.wsState
-    ? ControlService.openWsTunnel(
-        setupStore?.selectedServicePairs?.executionService?.config?.serviceID
-      )
+    ? ControlService.openWsTunnel(setupStore?.selectedServicePairs?.executionService?.config?.serviceID)
     : ControlService.closeWsTunnel());
 };
 
@@ -99,16 +91,13 @@ const changeService = async () => {
 
 const getServiceUrl = (serviceType, statusData) => {
   const serviceId =
-    setupStore?.selectedServicePairs?.[serviceType]?.config?.serviceID ||
-    setupStore?.selectedServicePairs?.[serviceType]?.id;
+    setupStore?.selectedServicePairs?.[serviceType]?.config?.serviceID || setupStore?.selectedServicePairs?.[serviceType]?.id;
   const matchedService = statusData?.find((service) => service.sid === serviceId);
   return matchedService ? matchedService.url : "";
 };
 
 const executionRpcUrl = computed(() => {
-  return controlStore.rpcstatus?.data
-    ? getServiceUrl("executionService", controlStore.rpcstatus.data)
-    : "";
+  return controlStore.rpcstatus?.data ? getServiceUrl("executionService", controlStore.rpcstatus.data) : "";
 });
 
 watch(executionRpcUrl, (newUrl) => {
@@ -117,26 +106,16 @@ watch(executionRpcUrl, (newUrl) => {
 });
 
 const beaconDataUrl = computed(() => {
-  return controlStore.beaconstatus?.data
-    ? getServiceUrl("consensusService", controlStore.beaconstatus.data)
-    : "";
+  return controlStore.beaconstatus?.data ? getServiceUrl("consensusService", controlStore.beaconstatus.data) : "";
 });
 
 const wsDataUrl = computed(() => {
-  return controlStore.wsstatus?.data
-    ? getServiceUrl("executionService", controlStore.wsstatus.data)
-    : "";
+  return controlStore.wsstatus?.data ? getServiceUrl("executionService", controlStore.wsstatus.data) : "";
 });
 
-const rpcIsLoading = computed(
-  () => controlStore.rpcstatus.info !== "success: rpcstatus successfully retrieved"
-);
-const beaconstatusIsLoading = computed(
-  () => controlStore.beaconstatus.info !== "success: beaconstatus successfully retrieved"
-);
-const wsIsLoading = computed(
-  () => controlStore.wsstatus.info !== "success: wsstatus successfully retrieved"
-);
+const rpcIsLoading = computed(() => controlStore.rpcstatus?.info !== "success: rpcstatus successfully retrieved");
+const beaconstatusIsLoading = computed(() => controlStore.beaconstatus?.info !== "success: beaconstatus successfully retrieved");
+const wsIsLoading = computed(() => controlStore.wsstatus?.info !== "success: wsstatus successfully retrieved");
 
 // Function to copy URL to clipboard
 const copied = ref(false);

diff --git a/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue b/launcher/src/components/UI/control-page/components/widgets/EpochSlot.vue
@@ -1,41 +1,43 @@
 <template>
   <!-- || !footerStore.isConsensusRunning || isConsensusMissing -->
-  <div
-    v-if="!setupStore?.selectedServicePairs"
-    class="NoDataParent flex w-full h-full justify-center items-center relative"
-    @mouseenter="cursorLocation = `${footerStore.nodataMessage}`"
-    @mouseleave="cursorLocation = ''"
-  >
-    <NoData />
-  </div>
 
   <div
-    v-else
-    class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1"
+    class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative"
   >
-    <ServiceLine
-      :label="t('controlPage.currentEpoch')"
-      :value="flag ? beaconControler : controlStore?.currentResult?.currentEpoch"
-      :hover-text="
-        t('controlPage.currentEpochIs', {
-          epoch: flag ? beaconControler : controlStore?.currentResult?.currentEpoch,
-        })
-      "
-    />
-    <ServiceLine label="INDEX" value="-----" />
-    <ServiceLine
-      :label="t('controlPage.currentSlot')"
-      :value="flag ? beaconControler : controlStore?.currentResult?.currentSlot"
-      :hover-text="
-        t('controlPage.currentSlotIs', {
-          slot: flag ? beaconControler : controlStore?.currentResult?.currentSlot,
-        })
+    <NoData
+      v-if="
+        !setupsStore?.selectedServicePairs ||
+        isConsensusMissing ||
+        !footerStore?.isConsensusRunning ||
+        footerStore?.prometheusIsOff
       "
     />
+    <template v-else>
+      <ServiceLine
+        :label="t('controlPage.currentEpoch')"
+        :value="flag ? beaconControler : controlStore?.currentResult?.currentEpoch"
+        :hover-text="
+          t('controlPage.currentEpochIs', {
+            epoch: flag ? beaconControler : controlStore?.currentResult?.currentEpoch,
+          })
+        "
+      />
+      <ServiceLine label="INDEX" value="-----" />
+      <ServiceLine
+        :label="t('controlPage.currentSlot')"
+        :value="flag ? beaconControler : controlStore?.currentResult?.currentSlot"
+        :hover-text="
+          t('controlPage.currentSlotIs', {
+            slot: flag ? beaconControler : controlStore?.currentResult?.currentSlot,
+          })
+        "
+      />
+    </template>
   </div>
 </template>
 
 <script setup>
+import { useSetups } from "@/store/setups";
 import { useControlStore } from "@/store/theControl";
 import { useFooter } from "@/store/theFooter";
 import { computed } from "vue";
@@ -46,6 +48,7 @@ import i18n from "@/includes/i18n";
 const t = i18n.global.t;
 const controlStore = useControlStore();
 const footerStore = useFooter();
+const setupsStore = useSetups();
 
 const beaconControler = computed(() => {
   if (
@@ -59,7 +62,11 @@ const beaconControler = computed(() => {
     : "Loading...";
 });
 
+const isConsensusMissing = computed(() =>
+  footerStore?.missingServices?.includes("consensus")
+);
+
 const flag = computed(
-  () => !controlStore.currentResult || controlStore.currentResult.beaconStatus !== 0
+  () => !controlStore?.currentResult || controlStore?.currentResult?.beaconStatus !== 0
 );
 </script>