Enhance the Networks component

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,
      //...
    },
  ],
});

threefoldtech / tfgrid-sdk-ts