From a405a881da2895da1767452fe34108467dae5334 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Tue, 15 Oct 2024 14:12:04 +0200
Subject: [PATCH] ADD cpu temp

---
 launcher/src/backend/Monitoring.js            |   4 +
 launcher/src/background.js                    |   4 +
 .../components/cards/WidgetCard.vue           |   2 +-
 .../components/widgets/ChartCpu.vue           |  13 +-
 .../components/widgets/EndpointWidget.vue     |  14 +-
 .../components/widgets/PeersOverTime.vue      |   6 +-
 .../widgets/RPCRecievedOverTime.vue           |   2 +-
 .../components/widgets/ServicePort.vue        |  18 +-
 .../components/widgets/SubscribedSubnets.vue  |   2 +-
 .../components/widgets/SyncStatus.vue         | 367 ------------------
 .../control-page/sections/ControlHeader.vue   |   2 +-
 .../staking-page/components/list/ListBody.vue |   4 +-
 launcher/src/composables/monitoring.js        |   1 +
 launcher/src/store/ControlService.js          |   4 +
 launcher/src/store/theControl.js              |   1 +
 15 files changed, 56 insertions(+), 388 deletions(-)

diff --git a/launcher/src/backend/Monitoring.js b/launcher/src/backend/Monitoring.js
index 3102be30f..711f154eb 100755
--- a/launcher/src/backend/Monitoring.js
+++ b/launcher/src/backend/Monitoring.js
@@ -1357,8 +1357,12 @@ export class Monitoring {
       };
     }
 
+    // const tenMinutesAgo = Math.floor(Date.now() / 1000) - 10 * 60;
+
     // Query Prometehus for all possible labels
     const prometheus_result = await this.queryPrometheus('{__name__=~"' + serviceLabels.join("|") + '"}');
+
+    // console.log("prometheus_result ========>", prometheus_result.data.result);
     if (typeof prometheus_result !== "object" || !prometheus_result.hasOwnProperty("status") || prometheus_result.status != "success") {
       return {
         code: 223,
diff --git a/launcher/src/background.js b/launcher/src/background.js
index 00deefb3c..a1543a434 100755
--- a/launcher/src/background.js
+++ b/launcher/src/background.js
@@ -445,6 +445,10 @@ ipcMain.handle("writePrometheusConfig", async (event, args) => {
   return await nodeConnection.writePrometheusConfig(args.serviceID, args.config);
 });
 
+ipcMain.handle("getCPUTemperature", async () => {
+  return await monitoring.getCPUTemperature();
+});
+
 ipcMain.handle("getValidatorStats", async (event, args) => {
   return await monitoring.getValidatorStats(args);
 });
diff --git a/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue b/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
index 416915449..0342f7269 100644
--- a/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
+++ b/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full bg-[#0F1217] mx-h-[145px] border border-gray-500 rounded-lg">
+  <div class="w-full h-full bg-[#0F1217] mx-h-[145px] border border-gray-700 shadow-xl shadow-grey-800 rounded-lg">
     <slot></slot>
   </div>
 </template>
diff --git a/launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue b/launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue
index 08dedf4c9..3c9bff20c 100644
--- a/launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue
@@ -10,13 +10,13 @@
       </div>
       <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">CPU</span>
     </div>
-    <div class="cpuCountPart w-2/3 h-full flex justify-center items-center">
-      <VueApexCharts :options="chartOptions" :series="chartSeries" class="full-size-chart" />
+    <div v-if="chartSeries && chartOptions" class="cpuCountPart w-2/3 h-full flex justify-center items-center">
+      <VueApexCharts v-if="chartSeries" :options="chartOptions" :series="chartSeries" class="full-size-chart" />
     </div>
   </div>
 </template>
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import VueApexCharts from "vue3-apexcharts";
 import { useControlStore } from "@/store/theControl";
 import { useFooter } from "@/store/theFooter";
@@ -73,6 +73,12 @@ const chartOptions = {
   tooltip: { enabled: false },
 };
 
+const cpuTemp = computed(() => (controlStore.cpuTemp ? controlStore.cpuTemp.toFixed(2) : null));
+
+watch(cpuTemp, () => {
+  console.log(cpuTemp.value);
+});
+
 const updateChartData = () => {
   const currentTime = Date.now();
   chartData.value.push([currentTime, cpu.value]);
@@ -84,6 +90,7 @@ const updateChartData = () => {
 
 onMounted(() => {
   pollingInterval = setInterval(updateChartData, 1000);
+  console.log(cpuTemp.value);
 });
 
 onBeforeUnmount(() => {
diff --git a/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue b/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue
index 7b5d9442b..6711ab6ad 100644
--- a/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue
@@ -67,9 +67,17 @@ const wsToggle = async () => {
   await (nodeHeaderStore.wsState ? ControlService.openWsTunnel() : ControlService.closeWsTunnel());
 };
 
-const executionRpcUrl = computed(() => getServiceUrl("executionService", controlStore.rpcstatus.data));
-const beaconDataUrl = computed(() => getServiceUrl("consensusService", controlStore.beaconstatus.data));
-const wsDataUrl = computed(() => getServiceUrl("executionService", controlStore.wsstatus.data));
+const executionRpcUrl = computed(() => {
+  return controlStore.rpcstatus?.data ? getServiceUrl("executionService", controlStore.rpcstatus.data) : "";
+});
+
+const beaconDataUrl = computed(() => {
+  return controlStore.beaconstatus?.data ? getServiceUrl("consensusService", controlStore.beaconstatus.data) : "";
+});
+
+const wsDataUrl = computed(() => {
+  return controlStore.wsstatus?.data ? getServiceUrl("executionService", controlStore.wsstatus.data) : "";
+});
 
 const getServiceUrl = (serviceType, statusData) => {
   const serviceId =
diff --git a/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue b/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue
index 974d9d163..9000edbd9 100644
--- a/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/PeersOverTime.vue
@@ -9,7 +9,11 @@
       </span>
     </div>
 
-    <div class="peers-over-time_part w-3/4 h-full flex justify-start items-start relative" @mouseleave="footerStore.cursorLocation = ''">
+    <div
+      v-if="chartOptions && chartSeries"
+      class="peers-over-time_part w-3/4 h-full flex justify-start items-start relative"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
       <NoData v-if="setupStore.selectedServicePairs === null" class="ml-5" />
       <VueApexCharts v-else :options="chartOptions" :series="chartSeries" class="full-size-chart" />
     </div>
diff --git a/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue b/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue
index 02ae3ac58..8d958e5d4 100644
--- a/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/RPCRecievedOverTime.vue
@@ -3,7 +3,7 @@
     <div class="widget-name w-full h-1/5 flex justify-center items-center text-gray-200 uppercase font-semibold text-[55%]">
       RPC RECEIVED OVER TIME
     </div>
-    <div class="widget-box w-full h-4/5 justify-center items-center flex flex-col">
+    <div v-if="chartOptions && chartOptions.series" class="widget-box w-full h-4/5 justify-center items-center flex flex-col">
       <apex-chart :options="chartOptions" :series="chartOptions.series" class="fullSizeChart"></apex-chart>
     </div>
   </div>
diff --git a/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue b/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue
index 345ff4cf4..1e31859d8 100644
--- a/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/ServicePort.vue
@@ -39,24 +39,26 @@ const controlStore = useControlStore();
 const setupStore = useSetups();
 const footerStore = useFooter();
 
-const portStatus = ref(controlStore.portstatus.data);
+const portStatus = ref(controlStore.portstatus.data || []);
 
 const matchingPorts = computed(() => {
+  if (!Array.isArray(portStatus.value)) return [];
+
   const { consensusService, executionService } = setupStore.selectedServicePairs || {};
   if (!consensusService || !executionService) return [];
 
-  const consensusId = consensusService.id.trim();
-  const executionId = executionService.config.serviceID.trim();
-  const consensusName = consensusService.name.trim().toLowerCase();
-  const executionName = executionService.name.trim().toLowerCase();
+  const consensusId = consensusService.id?.trim();
+  const executionId = executionService.config?.serviceID?.trim();
+  const consensusName = consensusService.name?.trim().toLowerCase();
+  const executionName = executionService.name?.trim().toLowerCase();
 
   const filteredPorts = portStatus.value.filter((port) => {
-    const portId = port.id.trim();
-    const portName = port.name.trim().toLowerCase();
+    const portId = port.id?.trim();
+    const portName = port.name?.trim().toLowerCase();
     return (portId === consensusId || portId === executionId) && (portName === consensusName || portName === executionName);
   });
 
-  return [...filteredPorts].map((port, index) => ({
+  return filteredPorts.map((port, index) => ({
     ...port,
     uniqueKey: `${port.id}-${index}`,
   }));
diff --git a/launcher/src/components/UI/control-page/components/widgets/SubscribedSubnets.vue b/launcher/src/components/UI/control-page/components/widgets/SubscribedSubnets.vue
index 137998bce..158148187 100644
--- a/launcher/src/components/UI/control-page/components/widgets/SubscribedSubnets.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/SubscribedSubnets.vue
@@ -8,7 +8,7 @@
         {{ t("controlPage.subscribedSubnets") }}
       </span>
     </div>
-    <div class="peers-over-time_part w-2/3 h-full flex justify-start items-start relative">
+    <div v-if="chartOptions && chartSeries" class="peers-over-time_part w-2/3 h-full flex justify-start items-start relative">
       <NoData v-if="setupStore.selectedServicePairs === null" class="ml-5" />
       <VueApexCharts v-else :options="chartOptions" :series="chartSeries" class="fullSizeChart" />
     </div>
diff --git a/launcher/src/components/UI/control-page/components/widgets/SyncStatus.vue b/launcher/src/components/UI/control-page/components/widgets/SyncStatus.vue
index 18a5f14f5..6a601433d 100755
--- a/launcher/src/components/UI/control-page/components/widgets/SyncStatus.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/SyncStatus.vue
@@ -149,373 +149,6 @@ watch(
 );
 </script>
 
-<!--<script>
-import { mapState, mapWritableState } from "pinia";
-
-export default {
-  components: { NoData, SyncCircularProgress },
-  data() {
-    return {
-      isMultiService: false,
-      // pageNumber: 1,
-      clients: [],
-      syncItemsShow: false,
-      syncIcoUnknown: true,
-      syncIcoSituation: false,
-      syncIcoError: false,
-      noDataLayerShow: false,
-      executionName: "",
-      consensusFirstVal: 0,
-      consensusSecondVal: 0,
-      executionFirstVal: 0,
-      executionSecondVal: 0,
-      consensuColor: "",
-      executionColor: "",
-      consensusClass: "",
-      executionClass: "",
-      consensusText: "",
-      executionText: "",
-      clientInfo: {
-        clientred: {
-          text: "ERROR",
-          color: "#f84343",
-        },
-        clientorange: {
-          text: "INITIALIZING",
-          color: "#ff8c00",
-        },
-        clientgrey: {
-          text: "ON-HOLD",
-          color: "grey",
-        },
-        clientblue: {
-          text: "SYNCING",
-          color: "lightblue",
-        },
-        clientgreen: {
-          text: "SYNCED",
-          color: "#00be00",
-        },
-      },
-      syncIco: [
-        {
-          id: 1,
-          name: "error",
-          icon: "/animation/synchronisation/synchronisation-icon-error.gif",
-        },
-        {
-          id: 2,
-          name: "active",
-          icon: "/animation/synchronisation/synchronisation-icon-active.gif",
-        },
-        {
-          id: 3,
-          name: "synched",
-          icon: "/animation/synchronisation/synchronisation-icon-sucess.gif",
-        },
-        {
-          id: 4,
-          name: "unknown",
-          icon: "/animation/synchronisation/synchronisation-icon-unknown.gif",
-        },
-      ],
-    };
-  },
-
-  computed: {
-    ...mapWritableState(useFooter, {
-      cursorLocation: "cursorLocation",
-      dialog: "dialog",
-      epochType: "epochType",
-      epoch: "epoch",
-      slot: "slot",
-      status: "status",
-      title: "title",
-      first: "first",
-      second: "second",
-      installedServicesController: "installedServicesController",
-      missingServices: "missingServices",
-      prometheusIsOff: "prometheusIsOff",
-      isConsensusRunning: "isConsensusRunning",
-      nodataMessage: "nodataMessage",
-    }),
-    ...mapState(useControlStore, {
-      code: "code",
-      syncstatus: "syncstatus",
-      consensusClientsData: "consensusClientsData",
-      executionClientsData: "executionClientsData",
-      consensusName: "consensusName",
-    }),
-    ...mapWritableState(useControlStore, {
-      consensusName: "consensusName",
-      pageNumber: "pageNumber",
-      synchronizationErrorControl: "synchronizationErrorControl",
-      currentConsensusIcon: "currentConsensusIcon",
-      currentExecutionIcon: "currentExecutionIcon",
-    }),
-    ...mapState(useSetups, {
-      selectedSetup: "selectedSetup",
-    }),
-    isConsensusMissing() {
-      return this.missingServices?.includes("consensus");
-    },
-
-    errorIco() {
-      return this.syncIco[0].icon;
-    },
-    activeIco() {
-      return this.syncIco[1].icon;
-    },
-    synchedIco() {
-      return this.syncIco[2].icon;
-    },
-    unknownIco() {
-      return this.syncIco[3].icon;
-    },
-    executionPer() {
-      return this.getPer(this.executionFirstVal, this.executionSecondVal);
-    },
-    displayExecutionPer() {
-      return Math.floor(this.executionPer);
-    },
-    consensusPer() {
-      return this.getPer(this.consensusFirstVal, this.consensusSecondVal);
-    },
-    displayConsensusPer() {
-      return Math.floor(this.consensusPer);
-    },
-    filteredSyncStatus() {
-      if (!Array.isArray(this.syncstatus.data) || !this.selectedSetup) {
-        return [];
-      }
-
-      const serviceMapping = {
-        NIMBUS: "NimbusBeaconService",
-        LIGHTHOUSE: "LighthouseBeaconService",
-        PRYSM: "PrysmBeaconService",
-        GETH: "GethService",
-        RETH: "RethService",
-        BESU: "BesuService",
-        NETHERMIND: "NethermindService",
-        TEKU: "TekuBeaconService",
-        LODESTAR: "LodestarBeaconService",
-      };
-
-      const setupServices = this.selectedSetup.services.map((service) => service.service);
-
-      return this.syncstatus.data.filter((status) => {
-        if (status.length < 2) return false;
-
-        const consensusTitle = status[0]?.title.toUpperCase();
-        const executionTitle = status[1]?.title.toUpperCase();
-
-        const consensusService = serviceMapping[consensusTitle] || null;
-        const executionService = serviceMapping[executionTitle] || null;
-
-        if (!consensusService || !executionService) {
-          return false;
-        }
-
-        return setupServices.includes(consensusService) && setupServices.includes(executionService);
-      });
-    },
-  },
-
-  watch: {
-    selectedSetup() {
-      this.pageNumber = 1;
-      this.syncControler();
-    },
-    filteredSyncStatus() {
-      this.pageNumber = 1;
-      this.syncControler();
-    },
-    // syncstatus() {
-    //   console.log(this.syncstatus);
-    // },
-  },
-
-  mounted() {
-    this.syncControler();
-  },
-  unmounted() {
-    if (this.refresher) clearTimeout(this.refresher);
-  },
-  methods: {
-    clientImage(name) {
-      if (!name) {
-        return "";
-      }
-      const lowerCaseInputValue = name.toLowerCase();
-      const clientData = [...this.consensusClientsData, ...this.executionClientsData];
-      const matchingClient = clientData.find((client) => client.name.toLowerCase() === lowerCaseInputValue);
-
-      if (name === this.consensusName) {
-        this.currentConsensusIcon = matchingClient.img;
-      } else if (name === this.executionName) {
-        this.currentExecutionIcon = matchingClient.img;
-      }
-
-      return matchingClient ? matchingClient.img : "";
-    },
-    getPer(firstVal, secondVal) {
-      return ((firstVal / secondVal) * 100).toFixed(5);
-    },
-    formatValues(value) {
-      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-    },
-    nextPage() {
-      this.refresh(true, "next");
-    },
-    backPage() {
-      this.refresh(true, "prev");
-    },
-    syncItemSytle(item) {
-      item = JSON.parse(JSON.stringify(item)); // toRaw()
-      if (item && !item.hasOwnProperty("style")) {
-        return "";
-      }
-      return item.style;
-    },
-    syncSituation() {
-      if (this.syncIcoError) {
-        this.synchronizationErrorControl = true;
-        return this.errorIco;
-      }
-      if (this.syncIcoUnknown) {
-        this.synchronizationErrorControl = false;
-        return this.unknownIco;
-      }
-      if (this.syncIcoSituation) {
-        this.synchronizationErrorControl = false;
-        return this.activeIco;
-      }
-      this.synchronizationErrorControl = false;
-      return this.synchedIco;
-    },
-    refresh(instant = false, loadPage = "") {
-      if (this.refresher) clearTimeout(this.refresher);
-      if (instant) return this.syncControler(loadPage);
-      this.refresher = setTimeout(() => {
-        this.syncControler(loadPage);
-      }, 3000);
-    },
-    syncControler(loadPage = "") {
-      let pageNumber = this.pageNumber;
-      if (loadPage === "next") {
-        pageNumber++;
-        if (pageNumber > this.filteredSyncStatus.length) {
-          pageNumber = 1; // cycle to first page
-        }
-      } else if (loadPage === "prev") {
-        pageNumber--;
-        if (pageNumber < 1) {
-          pageNumber = this.filteredSyncStatus.length; // cycle to last page
-        }
-      }
-
-      let gid = pageNumber - 1;
-      let clients = this.filteredSyncStatus[gid] || false;
-
-      if (!clients) {
-        // console.log("No clients found for the current page.");
-        this.syncItemsShow = false;
-        return;
-      }
-
-      let isMultiService = this.filteredSyncStatus.length > 1;
-      let syncItemsShow = true;
-      let syncIcoUnknown = false;
-      let syncIcoError = false;
-      let syncIcoSituation = false;
-      let noDataLayerShow = false;
-      let fonts = {
-        red: [], // client error (for example docker container not running) - icon red
-        orange: [], // abnormal client data during init (for example: lowerslot > higherslot) - icon unknown
-        grey: [], // zero client data: lowerslot and higherslot are zero (usually the case while the EC waits for the CC to go in sync)
-        blue: [], // client not in-sync, thus currently synchronizing
-        green: [], // client in-sync, thus synchronized
-      };
-
-      clients.forEach((client, index) => {
-        let lo = parseInt(client.frstVal);
-        let hi = parseInt(client.scndVal);
-        let st = client.state;
-
-        if (st !== "running") {
-          fonts.red.push(index);
-          syncIcoError = true;
-        } else if (lo > hi) {
-          fonts.orange.push(index);
-          syncIcoUnknown = true;
-        } else if (lo < 1 && hi < 1) {
-          fonts.grey.push(index);
-          syncIcoSituation = true;
-        } else if (lo < hi) {
-          fonts.blue.push(index);
-          syncIcoSituation = true;
-        } else {
-          fonts.green.push(index);
-        }
-      });
-
-      if (fonts.grey.length && fonts.grey.length === clients.length) {
-        syncIcoUnknown = true; // all clients 0/0 -> show unknown icon
-      }
-
-      clients.forEach((client, index) => {
-        if (fonts.red.includes(index)) {
-          client.style = "clientred";
-        } else if (fonts.orange.includes(index)) {
-          client.style = "clientorange";
-        } else if (fonts.grey.includes(index)) {
-          client.style = "clientgrey";
-        } else if (fonts.blue.includes(index)) {
-          client.style = "clientblue";
-        } else if (fonts.green.includes(index)) {
-          client.style = "clientgreen";
-        }
-      });
-
-      this.syncItemsShow = syncItemsShow;
-      this.syncIcoUnknown = syncIcoUnknown;
-      this.syncIcoError = syncIcoError;
-      this.syncIcoSituation = syncIcoSituation;
-      this.pageNumber = pageNumber;
-      this.clients = clients;
-
-      clients.forEach((item) => {
-        if (item?.type === "consensus") {
-          this.consensusName = item?.title;
-          this.consensusFirstVal = item.frstVal;
-          this.consensusSecondVal = item.scndVal;
-          this.consensusClass = item.style;
-          this.consensuColor = this.clientInfo[item.style]?.color;
-          this.consensusText = this.clientInfo[item.style]?.text;
-          if (item.style === "clientblue") {
-            this.consensusText = this.displayConsensusPer + "% " + this.consensusText;
-          }
-        } else {
-          this.executionName = item?.title;
-          this.executionFirstVal = item.frstVal;
-          this.executionSecondVal = item.scndVal;
-          this.executionClass = item.style;
-          this.executionColor = this.clientInfo[item.style]?.color;
-          this.executionText = this.clientInfo[item.style]?.text;
-          if (item.style === "clientblue") {
-            this.executionText = this.displayExecutionPer + "% " + this.executionText;
-          }
-        }
-      });
-
-      this.isMultiService = isMultiService;
-      this.noDataLayerShow = noDataLayerShow;
-      this.refresh();
-    },
-  },
-};
-</script> -->
-
 <style scoped>
 .activeWidget {
   display: flex;
diff --git a/launcher/src/components/UI/control-page/sections/ControlHeader.vue b/launcher/src/components/UI/control-page/sections/ControlHeader.vue
index 6ffd46619..0524f906c 100644
--- a/launcher/src/components/UI/control-page/sections/ControlHeader.vue
+++ b/launcher/src/components/UI/control-page/sections/ControlHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="control-header col-start-2 col-end-25 row-start-1 row-span-1 grid h-full p-[.10rem] gap-1 bg-[#0F1217] mx-h-[145px] border border-gray-500 rounded-lg mt-2 mr-1"
+    class="control-header col-start-1 col-end-25 row-start-1 row-span-1 grid h-full p-[.10rem] gap-1 bg-[#0F1217] mx-h-[145px] border border-gray-500 rounded-lg mt-2 mr-1"
     style="grid-template-columns: repeat(22, 1fr)"
   >
     <ThinCard class="server-name col-start-1 col-span-6"><ServerName /></ThinCard>
diff --git a/launcher/src/components/UI/staking-page/components/list/ListBody.vue b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
index 4caee834b..4ee9b314a 100644
--- a/launcher/src/components/UI/staking-page/components/list/ListBody.vue
+++ b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
@@ -43,7 +43,7 @@ import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
           class="text-lg font-bold text-gray-300 text-center uppercase select-none"
           >{{ $t("stakingPage.noVal") }}</span
         >
-        <span v-if="searchNotFound && getFilteredValidators.length > 0" class="text-lg font-bold text-gray-300 text-center uppercase">{{
+        <span v-if="searchNotFound && getFilteredValidators?.length > 0" class="text-lg font-bold text-gray-300 text-center uppercase">{{
           $t("stakingPage.noMatch")
         }}</span>
         <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
@@ -147,7 +147,7 @@ const getFilteredValidators = computed(() => {
     // If selectedSetup is null, return all keys
     return stakingStore.filteredKeys;
   } else {
-    const serviceIds = setupStore.selectedSetup.services.map((service) => service.config.serviceID);
+    const serviceIds = setupStore.selectedSetup.services?.map((service) => service.config.serviceID);
     // Filter keys by checking if validatorID exists in serviceIds
     return stakingStore.filteredKeys.filter((key) => serviceIds.includes(key.validatorID));
   }
diff --git a/launcher/src/composables/monitoring.js b/launcher/src/composables/monitoring.js
index 545c0403e..7fd00c60b 100644
--- a/launcher/src/composables/monitoring.js
+++ b/launcher/src/composables/monitoring.js
@@ -117,6 +117,7 @@ export async function useRefreshMetrics() {
         controlStore.tx = response.tx;
         controlStore.readValue = response.readValue;
         controlStore.writeValue = response.writeValue;
+        controlStore.tempCPU = response.tempCPU;
       }
     });
   } catch (err) {
diff --git a/launcher/src/store/ControlService.js b/launcher/src/store/ControlService.js
index 1d89cc0ca..ffd13e70b 100755
--- a/launcher/src/store/ControlService.js
+++ b/launcher/src/store/ControlService.js
@@ -399,6 +399,10 @@ class ControlService extends EventEmitter {
     return await this.promiseIpc.send("getQRCode");
   }
 
+  async getCPUTemperature() {
+    return await this.promiseIpc.send("getCPUTemperature");
+  }
+
   async importRemoteKeys(args) {
     return await this.promiseIpc.send("importRemoteKeys", args);
   }
diff --git a/launcher/src/store/theControl.js b/launcher/src/store/theControl.js
index c401c85e0..13f2cc722 100755
--- a/launcher/src/store/theControl.js
+++ b/launcher/src/store/theControl.js
@@ -9,6 +9,7 @@ export const useControlStore = defineStore("theControl", {
       currentExecutionIcon: "",
       synchronizationError: false,
       synchronizationErrorControl: false,
+      tempCPU: null,
       pageNumber: 1,
       consensusName: "",
       request: [],