From 76317b84297e117ec475486821878f72b600857a Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Fri, 20 Sep 2024 10:34:39 +0200
Subject: [PATCH] ADD: staking widget added to the new control

---
 .../UI/control-page/ControlScreen.vue         | 92 ++++++++++++++++++-
 .../widgets}/AmsterdamComponent.vue           | 73 ++++++++++-----
 .../components/widgets}/NoData.vue            |  0
 .../components/widgets}/TheStaking.vue        |  0
 .../control-page/sections/StakingSidebar.vue  | 18 +++-
 .../UI/the-control/ControlDashboard.vue       |  2 +-
 6 files changed, 155 insertions(+), 30 deletions(-)
 rename launcher/src/components/UI/{the-control => control-page/components/widgets}/AmsterdamComponent.vue (86%)
 rename launcher/src/components/UI/{the-control => control-page/components/widgets}/NoData.vue (100%)
 rename launcher/src/components/UI/{the-control => control-page/components/widgets}/TheStaking.vue (100%)

diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
index e0ecf50103..00cc807ebe 100644
--- a/launcher/src/components/UI/control-page/ControlScreen.vue
+++ b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -1,6 +1,8 @@
 <template>
   <base-layout>
-    <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
+    <div
+      class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]"
+    >
       <ControlHeader />
       <CommonSidebar />
       <AlertSection />
@@ -14,6 +16,94 @@ import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
 import AlertSection from "./sections/AlertSection.vue";
 import StakingSidebar from "./sections/StakingSidebar.vue";
+import { watch, computed } from "vue";
+
+import { useSetups } from "@/store/setups";
+import { useFooter } from "@/store/theFooter";
+import { useServices } from "@/store/services";
+
+const setupStore = useSetups();
+const footerStore = useFooter();
+const serviceStore = useServices();
+
+const selecteConfigServices = computed(() => {
+  let test = [];
+  const selectedSetup = setupStore.selectedSetup;
+  if (selectedSetup && selectedSetup.services) {
+    const selectedServiceIds = selectedSetup.services.map(
+      (service) => service.config.serviceID
+    );
+    serviceStore.installedServices.forEach((service) => {
+      if (
+        (["execution", "validator", "consensus"].includes(service.category) &&
+          selectedServiceIds.includes(service.config.serviceID)) ||
+        service.category === "service"
+      ) {
+        test.push({
+          isServicePending: false,
+          ...service,
+        });
+      }
+    });
+  }
+  return test;
+});
+
+const missingServices = computed(() => {
+  const selectedServices = selecteConfigServices.value;
+  const hasValidator = selectedServices.some(
+    (service) => service.category === "validator"
+  );
+  const hasConsensus = selectedServices.some(
+    (service) => service.category === "consensus"
+  );
+
+  let missing = [];
+  if (!hasValidator) missing.push("validator");
+  if (!hasConsensus) missing.push("consensus");
+
+  return missing;
+});
+
+watch(
+  missingServices,
+  (newValue) => {
+    footerStore.missingServices = newValue;
+  },
+  { immediate: true }
+);
+const isAnyConsensusRunning = computed(() => {
+  const consensusServices = selecteConfigServices.value.filter(
+    (service) => service.category === "consensus"
+  );
+  return (
+    consensusServices.length > 0 &&
+    consensusServices.some((service) => service.state === "running")
+  );
+});
+
+watch(
+  isAnyConsensusRunning,
+  (newValue) => {
+    footerStore.isConsensusRunning = newValue;
+  },
+  { immediate: true }
+);
+
+const isPrometheusOff = computed(() => {
+  const prometheusService = selecteConfigServices.value.find(
+    (service) => service.name === "Prometheus"
+  );
+  return prometheusService?.state === "running" ? false : true;
+});
+
+watch(
+  isPrometheusOff,
+  (newValue) => {
+    footerStore.prometheusIsOff = newValue;
+  },
+  { immediate: true }
+);
 </script>
 <style scoped>
 .Control-screen {
diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue
similarity index 86%
rename from launcher/src/components/UI/the-control/AmsterdamComponent.vue
rename to launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue
index 7a5af6f9e6..2ffae1ec32 100755
--- a/launcher/src/components/UI/the-control/AmsterdamComponent.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/AmsterdamComponent.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="amsterdam-parent">
-    <div class="icoTitle" @mouseenter="cursorLocation = `${footerInfo} ${getSetupNetwork?.name}`" @mouseleave="cursorLocation = ''">
+    <div
+      class="icoTitle"
+      @mouseenter="cursorLocation = `${footerInfo} ${getSetupNetwork?.name}`"
+      @mouseleave="cursorLocation = ''"
+    >
       <div class="icoContainer">
-        <img :src="getSetupNetwork?.icon" />
+        <img :src="!selectedSetup ? getSetupNetwork : getSetupNetwork?.icon" />
       </div>
       <span>{{ $t("controlPage.node") }}</span>
     </div>
@@ -15,7 +19,9 @@
         </div>
       </div>
       <no-data
-        v-else-if="isConsensusMissing || !isConsensusRunning || prometheusIsOff"
+        v-else-if="
+          !selectedSetup || isConsensusMissing || !isConsensusRunning || prometheusIsOff
+        "
         @mouseenter="cursorLocation = `${nodataMessage}`"
         @mouseleave="cursorLocation = ''"
       />
@@ -32,9 +38,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the current epoch: ${currentResult?.currentEpoch || 'N/A'} and the slot number is ${
-                  n.slotNumber === 0 ? 'N/A' : n.slotNumber
-                }`
+                cursorLocation = `the current epoch: ${
+                  currentResult?.currentEpoch || 'N/A'
+                } and the slot number is ${n.slotNumber === 0 ? 'N/A' : n.slotNumber}`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -52,9 +58,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the justified epoch: ${currentResult?.currentJustifiedEpoch || 'N/A'} and the slot number is ${
-                  n.slotNumber
-                }`
+                cursorLocation = `the justified epoch: ${
+                  currentResult?.currentJustifiedEpoch || 'N/A'
+                } and the slot number is ${n.slotNumber}`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -70,9 +76,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the previous justified epoch: ${currentResult?.previousJustifiedEpoch || 'N/A'} and the slot number is ${
-                  n.slotNumber
-                }`
+                cursorLocation = `the previous justified epoch: ${
+                  currentResult?.previousJustifiedEpoch || 'N/A'
+                } and the slot number is ${n.slotNumber}`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -90,7 +96,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the Finalized epoch: ${currentResult?.finalizedEpoch || 'N/A'} and the slot number is ${n.slotNumber}`
+                cursorLocation = `the Finalized epoch: ${
+                  currentResult?.finalizedEpoch || 'N/A'
+                } and the slot number is ${n.slotNumber}`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -183,9 +191,13 @@ export default {
     },
     getSetupNetwork() {
       let setupNet;
-      const net = this.selectedSetup?.network;
-      if (net && this.networkList) {
-        setupNet = this.networkList.find((network) => network.network === net);
+      if (!this.selectedSetup) {
+        setupNet = "/animation/loading/mushroom-spinner.gif";
+      } else {
+        const net = this.selectedSetup?.network;
+        if (net && this.networkList) {
+          setupNet = this.networkList.find((network) => network.network === net);
+        }
       }
       return setupNet;
     },
@@ -250,11 +262,17 @@ export default {
     },
     currentResult: {
       handler(newResult) {
-        if (newResult && newResult.currentEpochStatus && newResult?.currentEpochStatus[0]) {
-          const newArray = newResult?.currentEpochStatus[0].slice(0, this.proposedBlock.length).map((slot) => ({
-            slotNumber: slot.slotNumber,
-            slotStatus: slot.slotStatus,
-          }));
+        if (
+          newResult &&
+          newResult.currentEpochStatus &&
+          newResult?.currentEpochStatus[0]
+        ) {
+          const newArray = newResult?.currentEpochStatus[0]
+            .slice(0, this.proposedBlock.length)
+            .map((slot) => ({
+              slotNumber: slot.slotNumber,
+              slotStatus: slot.slotStatus,
+            }));
 
           while (newArray.length < this.proposedBlock.length) {
             newArray.push({ slotNumber: 0, slotStatus: "pending" });
@@ -268,7 +286,10 @@ export default {
           if (this.selectedSetup?.network === "gnosis" && this.changeCounter === 4) {
             this.networkFlag = false;
             this.changeCounter = 0;
-          } else if (this.selectedSetup?.network !== "gnosis" && this.changeCounter === 2) {
+          } else if (
+            this.selectedSetup?.network !== "gnosis" &&
+            this.changeCounter === 2
+          ) {
             this.networkFlag = false;
             this.changeCounter = 0;
           }
@@ -320,13 +341,17 @@ export default {
       }
 
       const categories = ["consensus", "execution"];
-      const missingCategories = categories.filter((category) => !foundCategories.has(category));
+      const missingCategories = categories.filter(
+        (category) => !foundCategories.has(category)
+      );
 
       if (!hasPrometheus) {
         missingCategories.push("Prometheus");
       }
 
-      this.installedServicesController = missingCategories.join(", ").replace(/, (?=[^,]*$)/, " and ");
+      this.installedServicesController = missingCategories
+        .join(", ")
+        .replace(/, (?=[^,]*$)/, " and ");
     },
 
     refreshTimer() {
diff --git a/launcher/src/components/UI/the-control/NoData.vue b/launcher/src/components/UI/control-page/components/widgets/NoData.vue
similarity index 100%
rename from launcher/src/components/UI/the-control/NoData.vue
rename to launcher/src/components/UI/control-page/components/widgets/NoData.vue
diff --git a/launcher/src/components/UI/the-control/TheStaking.vue b/launcher/src/components/UI/control-page/components/widgets/TheStaking.vue
similarity index 100%
rename from launcher/src/components/UI/the-control/TheStaking.vue
rename to launcher/src/components/UI/control-page/components/widgets/TheStaking.vue
diff --git a/launcher/src/components/UI/control-page/sections/StakingSidebar.vue b/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
index dc2ee17560..971460ad48 100644
--- a/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
+++ b/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
@@ -1,9 +1,15 @@
 <template>
   <div
-    class="stake-sidebar w-full h-full col-start-10 col-end-22 row-start-2 row-span-full grid grid-cols-12 grid-rows-15 items-center gap-1 pt-2 pb-1 pr-1 pl-1 bg-red-400"
+    class="stake-sidebar w-full h-full col-start-10 col-end-22 row-start-2 row-span-full grid grid-cols-12 grid-rows-15 items-center gap-1 pt-2 pb-1 pr-1 pl-1"
   >
-    <WidgetCard class="services-select-widget col-start-1 col-span-6 row-start-1 row-span-3"><SelectServiceWidget /></WidgetCard>
-    <WidgetCard class="amsterdam-widget col-start-1 col-span-6 row-start-4 row-span-3"></WidgetCard>
+    <WidgetCard
+      class="services-select-widget col-start-1 col-span-6 row-start-1 row-span-3"
+      ><SelectServiceWidget
+    /></WidgetCard>
+    <WidgetCard class="amsterdam-widget col-start-1 col-span-6 row-start-4 row-span-3">
+      <AmsterdamComponent v-if="controlStore.pickeedService === 'exeCons'" />
+      <TheStaking v-else />
+    </WidgetCard>
     <WidgetCard
       v-if="controlStore.pickeedService === 'exeCons'"
       class="endpoint-widget col-start-1 col-span-6 row-start-7 row-span-3"
@@ -16,7 +22,9 @@
       v-if="controlStore.pickeedService === 'exeCons'"
       class="p2p-widget col-start-1 col-span-6 row-start-13 row-span-3"
     ></WidgetCard>
-    <WidgetCard class="connected-validator-widget col-start-7 col-span-12 row-start-1 row-span-3"></WidgetCard>
+    <WidgetCard
+      class="connected-validator-widget col-start-7 col-span-12 row-start-1 row-span-3"
+    ></WidgetCard>
     <WidgetCard
       v-if="controlStore.pickeedService === 'exeCons'"
       class="sync-status-widget col-start-7 col-span-12 row-start-4 row-span-3"
@@ -39,6 +47,8 @@
 <script setup>
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import SelectServiceWidget from "../components/widgets/SelectServiceWidget.vue";
+import AmsterdamComponent from "../components/widgets/AmsterdamComponent.vue";
+import TheStaking from "../components/widgets/TheStaking.vue";
 
 import { useControlStore } from "@/store/theControl";
 
diff --git a/launcher/src/components/UI/the-control/ControlDashboard.vue b/launcher/src/components/UI/the-control/ControlDashboard.vue
index d431ac1f27..995ccb482d 100755
--- a/launcher/src/components/UI/the-control/ControlDashboard.vue
+++ b/launcher/src/components/UI/the-control/ControlDashboard.vue
@@ -76,7 +76,7 @@ import RpcEndpoint from "./RpcEndpoint.vue";
 import WsEndpoint from "./WsEndpoint.vue";
 import DiskSpeed from "./DiskSpeed.vue";
 import PortList from "./PortList.vue";
-import TheStaking from "./TheStaking.vue";
+import TheStaking from "../control-page/components/widgets/TheStaking.vue";
 
 // import NewPeerToPeer from "./NewPeerToPeer.vue";
 // import SubscribedSubnets from "./SubscribedSubnets.vue";