Epoch / Slot View - Multi Client Support

launcher/src/backend/Monitoring.js

@@ -3027,9 +3027,10 @@ rm -rf diskoutput
     }
   }
 
-  async getCurrentEpochSlot() {
+  async getCurrentEpochSlot(currBeaconService) {
     try {
-      const beaconStatus = await this.getBeaconStatus();
+      let beaconStatus = await this.getBeaconStatus();
+      beaconStatus.data = beaconStatus.data.filter((obj) => obj.clt === currBeaconService);
       let currentEpochSlotStatus = {};
       if (beaconStatus.code === 0) {
         // retrive current network & define epoch length (ethereum -> 32 | gnosis -> 16)

launcher/src/background.js

@@ -446,8 +446,8 @@ ipcMain.handle("checkRemoteKeys", async (event, args) => {
   return await validatorAccountManager.checkRemoteKeys(args.url, args.serviceID);
 });
 
-ipcMain.handle("getCurrentEpochSlot", async () => {
-  return await monitoring.getCurrentEpochSlot();
+ipcMain.handle("getCurrentEpochSlot", async (event, args) => {
+  return await monitoring.getCurrentEpochSlot(args);
 });
 
 ipcMain.handle("changePassword", async (event, args) => {

launcher/src/components/UI/the-control/AmsterdamComponent.vue

@@ -128,6 +128,7 @@ export default {
       footerInfo: this.$t("controlPage.netSel"),
       proposed: [],
       polling: {},
+      loadingStrater: false,
     };
   },
   computed: {
@@ -148,6 +149,8 @@ export default {
       currentEpochData: "currentEpochData",
       currentResult: "currentResult",
       noDataFlag: "noDataFlag",
+      consensusName: "consensusName",
+      pageNumber: "pageNumber",
     }),
     proposedBlock() {
       if (this.currentNetwork.id === 4) {
@@ -175,6 +178,8 @@ export default {
         return true;
       } else if (this.currentResult.beaconStatus !== 0) {
         return false;
+      } else if (this.loadingStrater) {
+        return true;
       }
       return false;
     },
@@ -184,6 +189,14 @@ export default {
   },
 
   watch: {
+    pageNumber() {
+      clearInterval(this.polling);
+      this.loadingStrater = true;
+      setTimeout(() => {
+        this.refreshHandling(this.consensusName);
+        this.loadingStrater = false;
+      }, 3000);
+    },
     currentResult: {
       handler(newResult) {
         if (newResult && newResult.currentEpochStatus && newResult.currentEpochStatus[0]) {
@@ -203,24 +216,32 @@ export default {
     },
   },
   mounted() {
-    if (this.currentNetwork.id === 4) {
-      this.polling = setInterval(() => {
-        if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
-          this.currentEpochSlot();
-        }
-      }, 5000);
-    } else {
-      this.polling = setInterval(() => {
-        if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
-          this.currentEpochSlot();
-        }
-      }, 12000);
-    }
+    this.refreshTimer();
   },
   beforeUnmount() {
     clearInterval(this.polling);
   },
   methods: {
+    refreshTimer() {
+      if (this.currentNetwork.id === 4) {
+        this.polling = setInterval(() => {
+          if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
+            this.currentEpochSlot(this.consensusName);
+          }
+        }, 5000);
+      } else {
+        this.polling = setInterval(() => {
+          if (this.currentSlotData !== undefined && this.currentEpochData !== undefined) {
+            this.currentEpochSlot(this.consensusName);
+          }
+        }, 12000);
+      }
+    },
+    refreshHandling() {
+      this.currentResult = {};
+      clearInterval(this.polling);
+      this.currentEpochSlot(this.consensusName);
+    },
     flagController() {
       if (this.flag === false && this.currentResult.beaconStatus !== 0) {
         this.noDataFlag = true;
@@ -259,8 +280,7 @@ export default {
     },
     async currentEpochSlot() {
       try {
-        let res = await ControlService.getCurrentEpochSlot();
-
+        let res = await ControlService.getCurrentEpochSlot(this.consensusName);
         if (res && res.currentSlot !== undefined && res.currentEpoch !== undefined) {
           this.currentSlotData = res.currentSlot;
           this.currentEpochData = res.currentEpoch;

launcher/src/components/UI/the-control/SyncStatus.vue

@@ -83,14 +83,13 @@ export default {
   data() {
     return {
       isMultiService: false,
-      pageNumber: 1,
+      // pageNumber: 1,
       clients: [],
       syncItemsShow: false,
       syncIcoUnknown: true,
       syncIcoSituation: false,
       syncIcoError: false,
       noDataLayerShow: false,
-      consensusName: "",
       executionName: "",
       consensusFirstVal: 0,
       consensusSecondVal: 0,
@@ -166,6 +165,11 @@ export default {
       syncstatus: "syncstatus",
       consensusClientsData: "consensusClientsData",
       executionClientsData: "executionClientsData",
+      consensusName: "consensusName",
+    }),
+    ...mapWritableState(useControlStore, {
+      consensusName: "consensusName",
+      pageNumber: "pageNumber",
     }),
     errorIco() {
       return this.syncIco[0].icon;
@@ -315,7 +319,7 @@ export default {
               this.syncIcoError = false;
               this.syncIcoSituation = false;
               this.noDataLayerShow = true;
-              //this.pageNumber = 1;
+              this.pageNumber = 1;
               //this.clients = [];
               //this.isMultiService = false;
             }

launcher/src/store/ControlService.js

@@ -416,8 +416,8 @@ class ControlService extends EventEmitter {
     return await this.promiseIpc.send("importConfig", args);
   }
 
-  async getCurrentEpochSlot() {
-    return await this.promiseIpc.send("getCurrentEpochSlot");
+  async getCurrentEpochSlot(args) {
+    return await this.promiseIpc.send("getCurrentEpochSlot", args);
   }
 
   async changePassword(args) {

launcher/src/store/theControl.js

@@ -3,6 +3,8 @@ import { defineStore } from "pinia";
 export const useControlStore = defineStore("theControl", {
   state: () => {
     return {
+      pageNumber: 1,
+      consensusName: "",
       request: [],
       deleteKey: false,
       generateModalShow: false,