Enhance the Networks component

[Mahmoud-Emad]

Which package/s are you suggesting this feature for?

No response

Is your feature request related to a problem? Please describe

N/A

Describe the solution you'd like

In the current implementation, the network configurations (e.g., IPv4, IPv6, Mycelium, Planetary, WireGuard) are managed individually within each parent component. This approach involves defining constants as references in the parent component and binding these values to the child Networks component. Here’s an example:

// Algorand.vue
<Networks
    v-model:mycelium="mycelium"
    v-model:planetary="planetary"
    v-model:ipv4="ipv4"
    v-model:ipv6="ipv6"
     v-model:wireguard="wireguard"
/>

const ipv4 = ref(false);
const ipv6 = ref(false);
const wireguard = ref(false);
const planetary = ref(false);
const mycelium = ref(true);

const vm = await deployVM(grid!, {
  machines: [
    {
      // ...
      publicIpv4: ipv4.value,
      publicIpv6: ipv6.value,
      mycelium: mycelium.value,
      planetary: planetary.value,
      //...
    },
  ],
});

So, imagine, if we want to enable only the mycelium to all of the solutions/applications, we need to go around all components change the value of all networks then enable only the mycelium network, so hard? No?

My proposal is to modify the Networks component and let it expose the values, e.g. defining a store to store the actual values of the networks, also setting the initial value in this store will reflect to all of the solutions

Define network settings as reactive properties in this store.

// networkStore.ts
import { reactive } from 'vue';

export const networkStore = reactive({
  ipv4: false,
  ipv6: false,
  wireguard: false,
  planetary: false,
  mycelium: true,
});

Update the Networks Component:

<!-- Networks.vue -->
<template>
  <!-- Bind the network settings to the appropriate UI elements -->
</template>

<script setup>
defineProps({
  networks: Object,
});
</script>

Bind the Centralized Configuration to Components:

<!-- Algorand.vue -->
<Networks :networks="networkStore" />

Access and Use the Configuration in VM Deployment:

const vm = await deployVM(grid!, {
  machines: [
    {
      // ...
      publicIpv4: networkStore.ipv4,
      publicIpv6: networkStore.ipv6,
      mycelium: networkStore.mycelium,
      planetary: networkStore.planetary,
      //...
    },
  ],
});

[MohamedElmdary]

We can keep these separated variables but make use of (for example) v-model:ipv4 this will pass ipv4 & onUpdate:ipv4 which can be checked in $attrs prop in any vue component

• if we didn't pass ipv4 at all so we remove that field
• if we pass only ipv4 without onUpdate:ipv4 so we mark that switch as readonly
• if we pass both ipv4 and onUpdate:ipv4 so we make that input interactive with user clicks

[0oM4R]

will move it to verification, please make sure to take the following notes in consideration while testing the requirements for the network component:

1. Public IPv4: An Internet Protocol version 4 address that is globally unique and accessible over the internet.
2. Public IPv6: Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices.
3. Planetary Network: The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity.
4. Mycelium: Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP.
5. Add wireguard access: `Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance.
6. Should be displayed as switches in the same mentioned order
7. Myceluim should be enabled by default
8. Should have tooltip icon with the mentioned descriptions; in some cases will it will be conditional, will be mentioned later.
9. the user must enable at least one network option, if the user enabled only one option, and tried to disable it should we show an error alert with message You must enable at least one of network options. Also the outer panel should have worining icon.
10. If the solution have gateway;
    • the wireguard option should be enabled and readonly.
    • If the user enabled IPv4 and custom domain, the wireguard option be optional not readonly .
11. if solution have enabled smtp: ipv4 should be enabled and readonly
12. caprover must have ipv4 enabled , readonly
13. node pilot: enabled ipv4,ipv6 readonly

some tooltips will bs changed based on conditions:

• ipv4 :
  • if smtp is enabled: An Internet Protocol version 4 address that is globally unique and accessible over the internet. Please note that this field will be read-only as SMTP is enabled.
• wireguard:
  • if domain required, without custom domain and without ipv4: Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections. Please note that this field will be read-only unless you use a custom domain with IPV4.

[A-Harby]

Verified, Devnet 96e183a.

All of the solutions (VMs and applications) have Mycelium as the default network option. Except for: Kuberenets. Nodepolit. Caprover. All these cases were already covered and defaulted and still exited as mentioned.