ADD cpu temp

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,

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);
 });

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>

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(() => {

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 =

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>

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>

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}`,
   }));

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>