Custom services setup

[stefa2k]

Right now it's only possible for the user to install a complete setup like Staking-Node or Blox SSV Operator. Users should be able to:

• Custom services setup: node from scratch #499
• Custom services setup: Add service #500
• Custom services setup: Modify service #501
• Custom services setup: Remove service #502

@daGscheid please provide some UI draft for this

[daGscheid]

I will try to cover as much as possible (in multiple edits)

Generally

So the basic logic of the pages is the following:
On the node page as well as the control page you are capable of using the services, edit their configuration, start and stop them and update them.

The "EDIT NODE PAGE" is used to setup the node itself. This where the custom services magic happens, so entering it, you are greeted with a way to customize the components your node is made out of. In my example this is empty and we are operating on the "Ethereum mainnet" (we aren't really, but ignore that haha)

There some basic rules when it comes to custom installation with this page. Making a change to the node is usually confirmed by pressing the giant confirm button on the right side, which will queue tasks into the task manager.

Every change to be confirmed is listed in the queue-like list on the right, I refer to as "custom installation task queue".
Having all changes I want to apply as user at once sorted is probably a smart idea!

I suggest this basic logic for the custom installation task queue (visually at least):

• REMOVING BEFORE ADDING

• WHEN ADDING:

Execution

before

Consensus

before

Validator Client

before

Services

---

#500 adding services

PATH 1# DRAG & DROP

2022-07-08.22-46-33_1.mp4

PATH 2# CHOOSE FROM LIST

The current display being changed in the Node Edit Tab to present all choices for the category to add to the Node

After having picked your selection out via 1# or 2#, you will have to confirm the selection by pressing the CONFIRM button in the red. In the list you can see the items you wanting to add.

After having picked and confirmed, Stereum will present with an overview with the plug-ins being sorted in the order (Exc > Csc > VC > Services) outlined in the beginning.

Here you are also able to define a standard path for all items in the queue (so you don't have to do it manually for every single one). Pressing next then leads you to the services, where you can define different attributes (specific data path, routing map, client connections, etc.)

f.e.:



![CUSTOM_INSTALLATION - 7 – 6](https://user-images.githubusercontent.com/82385103/178629784-c18413df-d97e-4c52-

At the end of defining the installation of plugins, you then will be greeted with the verification page (summing up all the choices you just made) and letting you start the installation

STYLING NOTES

• Selected to install items (but not yet installed) should have around 30% transparency in the edit node page
• To remove a selected item from the custom installation queue just drag it into the delete section / trash can or click the item on the custom installation task queue on the right. (To remove an installed service refer to Custom services setup: Remove service #502 discussion below)

---

#502 removing services

For reference
https://user-images.githubusercontent.com/82385103/178148597-d5f1b4a0-15cd-4123-a018-c1a6a2c96b3c.mp4

There is only one path currently to remove. It is by clicking the item in the middle and then clicking remove. While I would like to keep this way generally - clicking once selecting service - using double click for #501 a little below
We should build the custom installation up to be also capable of using drag and drop. Dropping the items from the middle onto the trash AREA, which....

...creates a task in the task queue, that when confirmed, starts a task in the task manager (bottom left) and removes the selected service.

---

#501 modify services

Currently I would like to tackle #501 in combination with a similar UI solution present in #407, however only accessible on the EDIT NODE PAGE.

Here is an example what this would look like with Nimbus Validator Client