Enhance networks Component #3344

MohamedElmdary · 2024-08-28T14:14:05Z

Description

Enhance networks Component

Changes

Make component more simpler
Add an easier way to tell if it's readonly or not

// by default all networks `false` but mycelium
// pass object to update any default like below
const { ipv4, ipv6, wireguard, planetary, mycelium } = useNetworks({ ipv4: true });

<Networks v-model:mycelium="mycelium" v-model:planetary="planetary" :ipv4="ipv4" v-model:ipv6="ipv6" />

Requirements

the requirements for the network component:

Public IPv4: An Internet Protocol version 4 address that is globally unique and accessible over the internet.
Public IPv6: Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices.
Planetary Network: The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity.
Mycelium: Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP.
Add wireguard access: `Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance.
Should be displayed as switches in the same mentioned order
Myceluim should be enabled by default
Should have tooltip icon with the mentioned descriptions; in some cases will it will be conditional, will be mentioned later.
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.
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 .

if solution have enabled smtp: ipv4 should be enabled and readonly
caprover must have ipv4 enabled , readonly
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.

Related Issues

Enhance the Networks component #3294

Documentation PR

For UI changes, Please provide the Documetation PR on info_grid

Checklist

feat: Refactor Networks component

Mahmoud-Emad

Good job ya MR-Rabeeee3

packages/playground/src/components/networks.vue

Mahmoud-Emad · 2024-08-29T06:02:36Z

@ALL
Please let's merge #3287 first

…nput

packages/playground/src/weblets/micro_vm.vue

packages/playground/src/components/networks.vue

…rks_output Enhance networks output

packages/playground/src/components/networks.vue

…nable ipv4

Mahmoud-Emad

Teslam edak ya Rabe3

zaelgohary · 2024-09-02T10:49:28Z

packages/playground/src/weblets/jenkins.vue

-const ipv6 = ref(false);
-const mycelium = ref(true);
-const planetary = ref(true);
+const { ipv4, ipv6, mycelium, planetary } = useNetworks({ planetary: true });


require-domain should be added to the Networks tag in template.

require-domain isn't a network so it shouldn't be used in useNetworks

require-domain won't change for specific solution (solution will need domain or not)

Indeed but it is only useful for the tooltip it shows here:

tfgrid-sdk-ts/packages/playground/src/components/networks.vue

Lines 143 to 147 in 30b685a

const wireguardTooltip = computed(() =>

props.requireDomain

? "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."

: "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",

);

it's also used as readonly for wireguard

0oM4R · 2024-09-02T11:27:49Z

Screencast.from.2024-09-02.14-26-43.webm

the only case we should have the wg not readonly is: when having ipv4 with customDomain enabled

…nable ipv4

packages/playground/src/weblets/freeflow.vue

0oM4R · 2024-09-03T08:37:48Z

packages/playground/src/components/networks.vue

-    );
-    expose({
-      error,
+    const error = computed(() => {


on k8s I was able to disable all networks and click on deploy without any errors

this is because it's not required but I checked early versions and it wasn't require too should I turn it into required?

0oM4R · 2024-09-03T08:39:09Z

packages/playground/src/components/networks.vue

+            tooltip-text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+            label="Public IPv4"
+            :value="$props.ipv4"
+            :emit-function="$attrs['onUpdate:ipv4']"


on caprover we need the ipv4 to be read only

should be fixed

0oM4R · 2024-09-11T14:38:20Z

In k8s worker and leader i still can disable all network options
as we decided in the BAM we have to change this behavior, not sure it was to force wg or mycelium

0oM4R · 2024-09-11T15:26:32Z

also I was able to deploy an algorand instance while disable all network options,

0oM4R · 2024-09-11T15:38:21Z

is this normal we don't have wg at all in Jenkins

add wireguard,

set wg value to false when readonlywireguard is false

…et it with optional false

co-author

MohamedElmdary added 2 commits August 28, 2024 17:11

feat: Add NetworkItem component to make it less complex

39cb05d

feat: Refactor Networks component

feat: Apply solution to all need solutions

ffa1dd1

MohamedElmdary self-assigned this Aug 28, 2024

MohamedElmdary requested review from AhmedHanafy725, zaelgohary, maayarosama, Mahmoud-Emad, amiraabouhadid, AlaaElattar, 0oM4R, mohamedamer453 and samaradel as code owners August 28, 2024 14:14

feat: Support has-custom-domain in Networks component

d2a40aa

Mahmoud-Emad requested changes Aug 29, 2024

View reviewed changes

packages/playground/src/components/networks.vue Outdated Show resolved Hide resolved

MohamedElmdary added 2 commits August 29, 2024 13:20

chore: update default value for hasCustomDomain to 'false'

b0e953e

chore: Merge branch 'development' into development_enhance_networks_i…

66c76e6

…nput

MohamedElmdary requested a review from Mahmoud-Emad August 29, 2024 10:58

Mahmoud-Emad requested changes Aug 29, 2024

View reviewed changes

packages/playground/src/weblets/micro_vm.vue Outdated Show resolved Hide resolved

packages/playground/src/components/networks.vue Outdated Show resolved Hide resolved

MohamedElmdary and others added 7 commits August 29, 2024 15:20

feat: Add createNetworks function

4b619af

chore: Refactor useNetworks method

7445413

feat: Use 'useNetworks' in freeflow solution

c2762cd

feat: Use 'useNetworks' in full_vm solution

954d979

feat: Use 'useNetworks' in jenkins solution

a9ff88f

feat: Use 'useNetworks' in all solutions

8c30abf

Merge pull request #3352 from threefoldtech/development_enhance_netwo…

921c8fd

…rks_output Enhance networks output

MohamedElmdary requested a review from Mahmoud-Emad September 1, 2024 10:02

0oM4R requested changes Sep 1, 2024

View reviewed changes

packages/playground/src/components/networks.vue Show resolved Hide resolved

fix: mark wg input as readonly if domain is needed while use didn't e…

30b685a

…nable ipv4

Mahmoud-Emad approved these changes Sep 2, 2024

View reviewed changes

zaelgohary reviewed Sep 2, 2024

View reviewed changes

fix: mark wg input as readonly if domain is needed while use didn't e…

ae76920

…nable ipv4

0oM4R previously requested changes Sep 3, 2024

View reviewed changes

MohamedElmdary added 3 commits September 4, 2024 13:13

Merge branch 'development' into development_enhance_networks_input

a61d2e0

chore: Remove has-custom-domain from TfSelectionDetails component

96851d8

chore: turn ipv4 into readonly in caprover

0f0f9c9

zaelgohary marked this pull request as draft September 19, 2024 05:52

0oM4R added 10 commits October 30, 2024 12:29

merge development

89d323e

chore: jenkins

a5e7957

add wireguard,

chore: wirguard

a2eae58

set wg value to false when readonlywireguard is false

feat: use network component in jitsi

c513777

feat: make one network option required by default

192c98f

feat: k8s set wireguard enabled readonly

b95ea2b

fix: set wireguard with enabled, readonly and if ipv4&custom domain s…

b8e0a86

…et it with optional false

fix: add required ipv4, support it in matermost

6a5c6e2

feat: add has smtp to enable the ipv4 with readonly

e7a8466

force ipv4 ipv6 in node pilot

76f0f16

0oM4R marked this pull request as ready for review October 31, 2024 12:59

0oM4R requested a review from zaelgohary October 31, 2024 13:12

AhmedHanafy725 merged commit 4ca9b58 into development Oct 31, 2024
10 checks passed

AhmedHanafy725 deleted the development_enhance_networks_input branch October 31, 2024 13:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance networks Component #3344

Enhance networks Component #3344

MohamedElmdary commented Aug 28, 2024 •

edited by 0oM4R

Loading

Mahmoud-Emad left a comment

Mahmoud-Emad commented Aug 29, 2024

Mahmoud-Emad left a comment

zaelgohary Sep 2, 2024

MohamedElmdary Sep 2, 2024

zaelgohary Sep 2, 2024

MohamedElmdary Sep 2, 2024

0oM4R commented Sep 2, 2024 •

edited

Loading

0oM4R Sep 3, 2024

MohamedElmdary Sep 4, 2024

0oM4R Sep 3, 2024

MohamedElmdary Sep 4, 2024

0oM4R commented Sep 11, 2024

0oM4R commented Sep 11, 2024 •

edited

Loading

0oM4R commented Sep 11, 2024

	const wireguardTooltip = computed(() =>
	props.requireDomain
	? "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."
	: "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",
	);

Enhance networks Component #3344

Enhance networks Component #3344

Conversation

MohamedElmdary commented Aug 28, 2024 • edited by 0oM4R Loading

Description

Changes

Requirements

Related Issues

Documentation PR

Checklist

Mahmoud-Emad left a comment

Choose a reason for hiding this comment

Mahmoud-Emad commented Aug 29, 2024

Mahmoud-Emad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0oM4R commented Sep 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0oM4R commented Sep 11, 2024

0oM4R commented Sep 11, 2024 • edited Loading

0oM4R commented Sep 11, 2024

MohamedElmdary commented Aug 28, 2024 •

edited by 0oM4R

Loading

0oM4R commented Sep 2, 2024 •

edited

Loading

0oM4R commented Sep 11, 2024 •

edited

Loading