ADD: staking widget added to the new control

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 {

launcher/src/components/UI/the-control/AmsterdamComponent.vue → 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() {

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";
 

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";