Merge branch 'refactorControl' of https://github.com/mabasian/ethereu…

…m-node into pr/2077

launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue

@@ -1,17 +1,17 @@
 <template>
-  <div
-    class="theCpuParent flex w-full h-full justify-center items-center"
-    @mouseenter="footerStore.cursorLocation = t('controlPage.cpuUsageIs', { usage: cpu })"
-    @mouseleave="footerStore.cursorLocation = ''"
-  >
+  <div class="theCpuParent flex w-full h-full justify-center items-center">
     <div class="cpuIco w-1/3 h-full flex flex-col justify-center items-center">
-      <div class="cpuIco-container flex justify-center items-center w-full h-4/5 relative p-2">
+      <div
+        class="cpuIco-container flex justify-center items-center w-full h-4/5 relative p-2"
+      >
         <img
           class="w-3/4"
           src="/img/icon/control-page-icons/cpuIcon.svg"
           :style="{
             filter:
-              controlStore.tempCPU === null || controlStore.tempCPU === undefined || controlStore.tempCPU === ''
+              controlStore.tempCPU === null ||
+              controlStore.tempCPU === undefined ||
+              controlStore.tempCPU === ''
                 ? ''
                 : tempCPU === 'green'
                 ? 'invert(40%) sepia(90%) saturate(500%) hue-rotate(90deg)'
@@ -28,10 +28,21 @@
           >{{ controlStore.tempCPU }}</span
         >
       </div>
-      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">cpu</span>
+      <span
+        class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase"
+        >cpu</span
+      >
     </div>
-    <div v-if="chartSeries && chartOptions" class="cpuCountPart w-2/3 h-full flex justify-start items-center pr-1">
-      <VueApexCharts v-if="chartSeries" :options="chartOptions" :series="chartSeries" class="full-size-chart" />
+    <div
+      v-if="chartSeries && chartOptions"
+      class="cpuCountPart w-2/3 h-full flex justify-start items-center pr-1"
+    >
+      <VueApexCharts
+        v-if="chartSeries"
+        :options="chartOptions"
+        :series="chartSeries"
+        class="full-size-chart"
+      />
     </div>
   </div>
 </template>
@@ -63,11 +74,12 @@ const chartOptions = {
     width: "100%",
     height: "100%",
     toolbar: { show: false },
+
     zoom: { enabled: false },
     animations: {
-      enabled: true,
+      enabled: false,
       easing: "linear",
-      dynamicAnimation: { speed: 1000 },
+      dynamicAnimation: { speed: 0 },
     },
   },
   xaxis: {
@@ -90,12 +102,30 @@ const chartOptions = {
     strokeDashArray: 5,
     xaxis: { lines: { show: true } },
     yaxis: { lines: { show: true } },
-    padding: { top: -5, bottom: -5, left: -5, right: -5 },
+    padding: { top: -8, bottom: -8, left: -5, right: -5 },
   },
   stroke: { width: 1, colors: ["#00ff00"] },
+  fill: {
+    type: "solid",
+    opacity: 0.1,
+    colors: ["#00ff00"],
+  },
   markers: { size: 0 },
+  tooltip: {
+    enabled: true,
+    custom: function ({ seriesIndex, dataPointIndex, w }) {
+      const hoveredData = w.config.series[seriesIndex].data[dataPointIndex];
+      const value = hoveredData[1];
+      const time = hoveredData[0];
+
+      footerStore.cursorLocation = `${t("controlPage.cpuUsageIs", {
+        usage: value,
+        time: new Date(time).toLocaleTimeString(),
+      })}`;
+      return ``;
+    },
+  },
   dataLabels: { enabled: false },
-  tooltip: { enabled: false },
 };
 
 const tempCPU = computed(() => {
@@ -111,7 +141,7 @@ const updateChartData = () => {
   const currentTime = Date.now();
   chartData.value.push([currentTime, cpu.value]);
 
-  if (chartData.value.length > 10) {
+  if (chartData.value.length > 200) {
     chartData.value.shift();
   }
 };

launcher/src/components/UI/control-page/components/widgets/ConnectedValidatorWidget.vue

@@ -1,23 +1,28 @@
 <template>
-  <div class="connected-val-parent flex w-full h-full flex-col p-1">
-    <div class="val-box flex w-full h-5/6 justify-start items-center gap-1">
-      <ValidatorItem
-        v-for="validator in relatedValidators"
-        :key="validator.config.serviceID"
-        :validator="validator"
-        :key-count="getKeyCount(validator)"
-        @mouseenter-name="setCursor(validator.name)"
-        @mouseleave-name="clearCursor"
-        @mouseenter-state="setCursor(validator.state)"
-        @mouseleave-state="clearCursor"
-        @mouseenter-key-count="setCursorKeyCount(validator)"
-        @mouseleave-key-count="clearCursor"
-      />
-    </div>
+  <div class="connected-val-parent flex w-full h-full flex-col p-1 relative">
+    <NoData v-if="!setupStore.selectedSetup" />
+    <template v-else>
+      <div class="val-box flex w-full h-5/6 justify-start items-center gap-1">
+        <ValidatorItem
+          v-for="validator in relatedValidators"
+          :key="validator.config.serviceID"
+          :validator="validator"
+          :key-count="getKeyCount(validator)"
+          @mouseenter-name="setCursor(validator.name)"
+          @mouseleave-name="clearCursor"
+          @mouseenter-state="setCursor(validator.state)"
+          @mouseleave-state="clearCursor"
+          @mouseenter-key-count="setCursorKeyCount(validator)"
+          @mouseleave-key-count="clearCursor"
+        />
+      </div>
 
-    <div class="widget-name flex w-full h-1/6 justify-center items-center uppercase text-gray-200 text-[50%] font-semibold">
-      {{ t("controlPage.connectValWidg") }}
-    </div>
+      <div
+        class="widget-name flex w-full h-1/6 justify-center items-center uppercase text-gray-200 text-[50%] font-semibold"
+      >
+        {{ t("controlPage.connectValWidg") }}
+      </div>
+    </template>
   </div>
 </template>
 
@@ -28,6 +33,7 @@ import { useStakingStore } from "@/store/theStaking";
 import { useFooter } from "@/store/theFooter";
 import i18n from "@/includes/i18n";
 import ValidatorItem from "../fragments/ValidatorItem.vue";
+import NoData from "./NoData.vue";
 
 const t = i18n.global.t;
 
@@ -41,7 +47,8 @@ const getKeyCount = (validator) => {
   if (!validator || stakingStore.keys.length === 0) {
     return 0;
   }
-  return stakingStore.keys.filter((key) => key.validatorID === validator.config.serviceID).length;
+  return stakingStore.keys.filter((key) => key.validatorID === validator.config.serviceID)
+    .length;
 };
 
 const setCursor = (info) => {

launcher/src/components/UI/control-page/components/widgets/EndpointWidget.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative">
+  <div
+    class="volume-Parent flex w-full h-full justify-center items-center flex-col p-1 gap-1 relative"
+  >
     <NoData v-if="!setupStore.selectedSetup" />
     <template v-else>
       <EndpointServiceLine
@@ -39,7 +41,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useControlStore } from "@/store/theControl";
 import { useSetups } from "@/store/setups";
 import { useNodeHeader } from "@/store/nodeHeader";
@@ -51,44 +53,75 @@ const controlStore = useControlStore();
 const setupStore = useSetups();
 const nodeHeaderStore = useNodeHeader();
 
+const portRegex = /http:\/\/(?:[0-9]{1,3}\.){3}[0-9]{1,3}:(\d+)/;
+
+const extractPort = (url) => {
+  const match = url.match(portRegex);
+  return match ? match[1] : null;
+};
+
 // Toggle functions for RPC, Data API, and WS
 const rpcToggle = async () => {
   nodeHeaderStore.rpcState = !nodeHeaderStore.rpcState;
-  await (nodeHeaderStore.rpcState ? ControlService.openRpcTunnel() : ControlService.closeRpcTunnel());
+  await (nodeHeaderStore.rpcState
+    ? ControlService.openRpcTunnel()
+    : ControlService.closeRpcTunnel());
 };
 
 const dataToggle = async () => {
   nodeHeaderStore.dataState = !nodeHeaderStore.dataState;
-  await (nodeHeaderStore.dataState ? ControlService.openBeaconTunnel() : ControlService.closeBeaconTunnel());
+  await (nodeHeaderStore.dataState
+    ? ControlService.openBeaconTunnel()
+    : ControlService.closeBeaconTunnel());
 };
 
 const wsToggle = async () => {
   nodeHeaderStore.wsState = !nodeHeaderStore.wsState;
-  await (nodeHeaderStore.wsState ? ControlService.openWsTunnel() : ControlService.closeWsTunnel());
+  await (nodeHeaderStore.wsState
+    ? ControlService.openWsTunnel()
+    : ControlService.closeWsTunnel());
+};
+
+const getServiceUrl = (serviceType, statusData) => {
+  const serviceId =
+    setupStore?.selectedServicePairs?.[serviceType]?.config?.serviceID ||
+    setupStore?.selectedServicePairs?.[serviceType]?.id;
+  const matchedService = statusData?.find((service) => service.sid === serviceId);
+  return matchedService ? matchedService.url : "";
 };
 
 const executionRpcUrl = computed(() => {
-  return controlStore.rpcstatus?.data ? getServiceUrl("executionService", controlStore.rpcstatus.data) : "";
+  return controlStore.rpcstatus?.data
+    ? getServiceUrl("executionService", controlStore.rpcstatus.data)
+    : "";
+});
+
+watch(executionRpcUrl, (newUrl) => {
+  const port = extractPort(newUrl); // Extract the port using your regex function
+  controlStore.rpcPort = port; // Set the extracted port in the store
 });
 
 const beaconDataUrl = computed(() => {
-  return controlStore.beaconstatus?.data ? getServiceUrl("consensusService", controlStore.beaconstatus.data) : "";
+  return controlStore.beaconstatus?.data
+    ? getServiceUrl("consensusService", controlStore.beaconstatus.data)
+    : "";
 });
 
 const wsDataUrl = computed(() => {
-  return controlStore.wsstatus?.data ? getServiceUrl("executionService", controlStore.wsstatus.data) : "";
+  return controlStore.wsstatus?.data
+    ? getServiceUrl("executionService", controlStore.wsstatus.data)
+    : "";
 });
 
-const getServiceUrl = (serviceType, statusData) => {
-  const serviceId =
-    setupStore?.selectedServicePairs?.[serviceType]?.config?.serviceID || setupStore?.selectedServicePairs?.[serviceType]?.id;
-  const matchedService = statusData?.find((service) => service.sid === serviceId);
-  return matchedService ? matchedService.url : "";
-};
-
-const rpcIsLoading = computed(() => controlStore.rpcstatus.info !== "success: rpcstatus successfully retrieved");
-const beaconstatusIsLoading = computed(() => controlStore.beaconstatus.info !== "success: beaconstatus successfully retrieved");
-const wsIsLoading = computed(() => controlStore.wsstatus.info !== "success: wsstatus successfully retrieved");
+const rpcIsLoading = computed(
+  () => controlStore.rpcstatus.info !== "success: rpcstatus successfully retrieved"
+);
+const beaconstatusIsLoading = computed(
+  () => controlStore.beaconstatus.info !== "success: beaconstatus successfully retrieved"
+);
+const wsIsLoading = computed(
+  () => controlStore.wsstatus.info !== "success: wsstatus successfully retrieved"
+);
 
 // Function to copy URL to clipboard
 const copied = ref(false);

launcher/src/components/UI/control-page/components/widgets/PairStatusWidget.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="pair-state-parent w-full h-full flex flex-col justify-center items-center">
-    <ServiceState
-      v-for="(service, type) in reactiveServiceStates"
-      :key="type"
-      :icon="service.icon"
-      :name="service.name"
-      :state="service.state"
-      @mouseenter="setCursor(service.name)"
-      @mouseleave="clearCursor"
-    />
+  <div
+    class="pair-state-parent w-full h-full flex flex-col justify-center items-center relative"
+  >
+    <NoData v-if="!setupStore?.selectedSetup" />
+    <template v-else>
+      <ServiceState
+        v-for="(service, type) in reactiveServiceStates"
+        :key="type"
+        :icon="service.icon"
+        :name="service.name"
+        :state="service.state"
+        @mouseenter="setCursor(service.name)"
+        @mouseleave="clearCursor"
+      />
+    </template>
   </div>
 </template>
 
@@ -17,6 +22,7 @@ import { computed } from "vue";
 import { useSetups } from "@/store/setups";
 import { useFooter } from "@/store/theFooter";
 import ServiceState from "../fragments/ServiceState.vue";
+import NoData from "./NoData.vue";
 
 const setupStore = useSetups();
 const footerStore = useFooter();