ADD: external services fn

stereum-dev · Sep 18, 2024 · 9b6752d · 9b6752d
1 parent 1061616
commit 9b6752d
Show file tree

Hide file tree

Showing 18 changed files with 911 additions and 131 deletions.
diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
diff --git a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
@@ -11,11 +11,20 @@
   >
     <div
       class="absolute top-0 w-full mx-auto grid grid-cols-3 h-6 border border-gray-950 rounded-t-[5px] text-xs font-[400] font-sans"
-      :class="[setupStore.getBGColor(setupStore.selectedSetup?.color), setupStore.getTextColor(setupStore.selectedSetup?.color)]"
+      :class="[
+        setupStore.getBGColor(setupStore.selectedSetup?.color),
+        setupStore.getTextColor(setupStore.selectedSetup?.color),
+      ]"
     >
-      <span class="col-start-1 justify-self-center self-center">{{ $t("editBody.executionClient") }}</span>
-      <span class="col-start-2 justify-self-center self-center">{{ $t("editBody.consensusClient") }}</span>
-      <span class="col-start-3 justify-self-center self-center">{{ $t("editBody.validator") }}</span>
+      <span class="col-start-1 justify-self-center self-center">{{
+        $t("editBody.executionClient")
+      }}</span>
+      <span class="col-start-2 justify-self-center self-center">{{
+        $t("editBody.consensusClient")
+      }}</span>
+      <span class="col-start-3 justify-self-center self-center">{{
+        $t("editBody.validator")
+      }}</span>
     </div>
     <div
       ref="dropZoneRef"
@@ -38,6 +47,7 @@
         @switch-client="switchClient"
         @confirm-consensus="confirmConsensus"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -49,6 +59,7 @@
         @switch-client="switchClient"
         @modify-service="modifyService"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -82,6 +93,7 @@ const emit = defineEmits([
   "deleteService",
   "confirmConsensus",
   "infoModal",
+  "externalModify",
   "modifyService",
   "removeLines",
   "lineDraw",
@@ -94,9 +106,15 @@ const { updateDom } = useMultiSetups();
 const isOverDropZone = ref(false);
 
 const activateScrollBar = computed(() => {
-  const validators = manageStore.newConfiguration.filter((service) => service.category === "validator");
-  const consensus = manageStore.newConfiguration.filter((service) => service.category === "consensus");
-  const execution = manageStore.newConfiguration.filter((service) => service.category === "execution");
+  const validators = manageStore.newConfiguration.filter(
+    (service) => service.category === "validator"
+  );
+  const consensus = manageStore.newConfiguration.filter(
+    (service) => service.category === "consensus"
+  );
+  const execution = manageStore.newConfiguration.filter(
+    (service) => service.category === "execution"
+  );
   return !!(validators.length > 3 || consensus.length > 3 || execution.length > 3);
 });
 
@@ -151,4 +169,8 @@ const infoModal = (service) => {
 const modifyService = (service) => {
   emit("modifyService", service);
 };
+
+const externalModify = (service) => {
+  emit("externalModify", service);
+};
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
@@ -10,9 +10,16 @@
       @confirm-consensus="confirmConsensus"
       @info-modal="infoModal"
       @modify-service="modifyService"
+      @external-modify="externalModify"
       @remove-lines="removeConnectionLines"
     />
-    <SetupBody v-else @delete-setup="deleteSetup" @connect-setup="connectSetup" @setup-infos="setupInfos" @open-configs="openConfigs" />
+    <SetupBody
+      v-else
+      @delete-setup="deleteSetup"
+      @connect-setup="connectSetup"
+      @setup-infos="setupInfos"
+      @open-configs="openConfigs"
+    />
   </div>
 </template>
 
@@ -37,7 +44,7 @@ const emit = defineEmits([
   "confirmConsensus",
   "infoModal",
   "modifyService",
-
+  "externalModify",
   "openConfigs",
   "deleteSetup",
 ]);
@@ -115,6 +122,11 @@ const infoModal = (item) => {
   emit("infoModal", item);
 };
 
+const externalModify = (item) => {
+  manageStore.isLineHidden = true;
+  emit("externalModify", item);
+};
+
 const selectRename = async (setup) => {
   setupStore.setupToRename = setup.setupName;
   setupStore.isRenameSetupActive = true;

diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative">
+  <div
+    class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative"
+  >
     <div
       v-for="item in getConsensus"
       :key="item.config.serviceID + item.id"
@@ -23,6 +25,7 @@
           @modify-service="modifyService"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -38,7 +41,15 @@ import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
 //Props & Emits
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "modifyService",
+  "externalModify",
+  "infoModal",
+  "mouseOver",
+  "mouseLeave",
+]);
 
 //Refs
 
@@ -48,7 +59,9 @@ const setupStore = useSetups();
 // computed & watchers properties
 const getConsensus = computed(() => {
   const services = manageStore.newConfiguration
-    .filter((s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus")
+    .filter(
+      (s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus"
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -114,6 +127,10 @@ const modifyService = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {

diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative">
+  <div
+    class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative"
+  >
     <div
       v-for="item in getExecutions"
       :key="item"
@@ -23,6 +25,7 @@
           @connect-client="connectClient"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -38,14 +41,23 @@ import GeneralMenu from "./GeneralMenu.vue";
 import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
-const emit = defineEmits(["deleteService", "switchClient", "connectClient", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "connectClient",
+  "infoModal",
+  "mouseOver",
+  "mouseLeave",
+]);
 const manageStore = useNodeManage();
 const serviceStore = useServices();
 const setupStore = useSetups();
 
 const getExecutions = computed(() => {
   const services = manageStore.newConfiguration
-    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId)
+    .filter(
+      (s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -73,7 +85,12 @@ const displayMenu = (item) => {
   serviceStore.installedServices.forEach((service) => {
     service.displayPluginMenu = false;
   });
-  if (!item.isNotConnectedToConsensus && !item.isNotConnectedToValidator && !item.isRemoveProcessing && !item.isNewClient) {
+  if (
+    !item.isNotConnectedToConsensus &&
+    !item.isNotConnectedToValidator &&
+    !item.isRemoveProcessing &&
+    !item.isNewClient
+  ) {
     item.displayPluginMenu = true;
   }
 };
@@ -108,6 +125,10 @@ const switchClient = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {

diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue b/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10" @mousedown.prevent>
-    <div class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1">
+  <div
+    class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10"
+    @mousedown.prevent
+  >
+    <div
+      class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1"
+    >
       <img
-        v-if="item.category !== 'execution' && item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
+        v-if="
+          item.category !== 'execution' &&
+          item.service !== 'ExternalExecutionService' &&
+          item.service !== 'ExternalConsensusService'
+        "
         class="w-7 bg-gray-900 hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200 border border-gray-700 rounded-md"
         src="/img/icon/edit-node-icons/service-connecting.png"
         alt="Trash Icon"
@@ -11,20 +20,37 @@
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
-        v-if="item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
+        v-if="
+          item.service !== 'ExternalExecutionService' &&
+          item.service !== 'ExternalConsensusService'
+        "
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/switch-client.png"
         alt="Trash Icon"
         @click="switchClient"
         @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
+      <img
+        v-if="
+          item.service === 'ExternalExecutionService' ||
+          item.service === 'ExternalConsensusService'
+        "
+        class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
+        src="/img/icon/edit-node-icons/service-connecting.png"
+        alt="Trash Icon"
+        @click="externalModify"
+        @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+      />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/service-delete.png"
         alt="Trash Icon"
         @click="deleteService"
-        @mouseenter="footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`"
+        @mouseenter="
+          footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`
+        "
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
@@ -60,7 +86,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "modifyService",
+  "infoModal",
+  "externalModify",
+]);
 
 const deleteService = () => {
   emit("deleteService", props.item);
@@ -81,4 +113,9 @@ const infoModal = () => {
   emit("infoModal", props.item);
   footerStore.cursorLocation = "";
 };
+
+const externalModify = () => {
+  emit("externalModify", props.item);
+  footerStore.cursorLocation = "";
+};
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
@@ -10,8 +10,17 @@
     @confirm-action="confirmInstall"
   >
     <template #content>
-      <AddPanel v-if="isAddPanelActivated" ref="addPanelComponent" :client="client" :properties="properties" />
-      <MevboostRelays v-if="isRelaysActivated" :client="client" :properties="properties" />
+      <AddPanel
+        v-if="isAddPanelActivated"
+        ref="addPanelComponent"
+        :client="client"
+        :properties="properties"
+      />
+      <MevboostRelays
+        v-if="isRelaysActivated"
+        :client="client"
+        :properties="properties"
+      />
       <AddConnection v-if="isModifyActivated" :client="client" :properties="properties" />
     </template>
   </custom-modal>
@@ -59,19 +68,32 @@ const properties = ref({
 const getConfirmText = computed(() => {
   let text = "";
   if (isAddPanelActivated.value) {
-    if (props.client.category === "consensus" && props.client.service === "ExternalConsensusService") {
+    if (
+      props.client.category === "consensus" &&
+      props.client.service === "ExternalConsensusService"
+    ) {
       text = "confirm";
-    } else if (props.client.category === "execution" && props.client.service === "ExternalExecutionService") {
+    } else if (
+      props.client.category === "execution" &&
+      props.client.service === "ExternalExecutionService"
+    ) {
       text = "confirm";
     } else if (
       props.client.category === "consensus" ||
-      (props.client.category === "validator" && !/Web3Signer/.test(props.client.service)) ||
+      (props.client.category === "validator" &&
+        !/Web3Signer/.test(props.client.service)) ||
       /LidoObolExit|ValidatorEjector/.test(props.client.service)
     ) {
       text = "next";
-    } else if (props.client.category === "service" && props.client.service !== "FlashbotsMevBoostService") {
+    } else if (
+      props.client.category === "service" &&
+      props.client.service !== "FlashbotsMevBoostService"
+    ) {
       text = "confirm";
-    } else if (props.client.category === "service" && props.client.service === "FlashbotsMevBoostService") {
+    } else if (
+      props.client.category === "service" &&
+      props.client.service === "FlashbotsMevBoostService"
+    ) {
       text = "next";
     }
   } else if (isRelaysActivated.value) {
@@ -96,11 +118,9 @@ const getSubTitles = computed(() => {
 
 const externalServiceConfirmBtn = computed(() => {
   if (props.client.service === "ExternalExecutionService") {
-    return props.client.config.source === "" || props.client.config.jwtToken === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService !== "prysm") {
+    return props.client.config.source === "" && props.client.config.jwtToken === "";
+  } else if (props.client.service === "ExternalConsensusService") {
     return props.client.config.source === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService === "prysm") {
-    return props.client.config.source === "" || props.client.config.gateway === "";
   }
   return false;
 });