Add a button in the "AS Dependency" widget to switch between IPv4 and IPv6

[dpgiakatos]

Is your feature request related to a problem? Please describe.

Currently, modifying the "af" parameter in the URL is an unofficial method to access graphs for IPv6 hegemony.

• The link for IPv6 hegemony is: https://ihr.iijlab.net/ihr/en/network/AS2497?af=6&last=3&date=2024-10-24&active=monitoring
• The default action displays the IPv4 hegemony: https://ihr.iijlab.net/ihr/en/network/AS2497?af=4&last=3&date=2024-10-24&active=monitoring

Describe the solution you'd like

We can add a button that allows users to easily switch between the two IP versions.

[ArnabBCA]

Hi @dpgiakatos I would like to work on this issue

[dpgiakatos]

Can you describe how you plan to address it?

[ArnabBCA]

Can you describe how you plan to address it?

We have to add the button inside the chart the file is AsInterdependenciesChart.vue Since this is a deeply nested component i will use inject in this child component and provide in the parent component which is AS.vue in the parent component we will write a function which will switch the Ip family in the af url param, the function will be called by clicking a button in the child component.

[ArnabBCA]

Also one thing i would like to point out is the AS Dependency is also used in the Global report page where we don't have the af url param so I think we should hide the button there and only show in the Netwoks report page?

[dpgiakatos]

Can you create and share a mockup of the propose change in the UI?

[ArnabBCA]

@dpgiakatos The button label will switch between SWITCH TO 'IPV4' and 'IPV6' and vice versa.

[dpgiakatos]

In the proposed solution, I would like to avoid using inject and provide. Instead, please use emits and props, as this is the architecture used throughout the entire website. Sticking to this approach helps us better manage dependencies between components.

Before proceeding, please familiarize yourself with how we utilize emits and props in our codebase by reviewing our existing code. After that, kindly update your current plan accordingly. Additionally, in the mockup, I prefer the button to be positioned on the right.

Thank you!

[romain-fontugne]

maybe let's try with a toggle button, instead of a simple button? https://quasar.dev/vue-components/button-toggle

[ArnabBCA]

@dpgiakatos This is Updated solution using Emits and Props: We will define and pass the emit in the AsInterdependenciesChart.vue which will be emited again in the ASMonitoring.vue a function will be called in the parent component AS.vue which will call a function toggleIpFamily() Below is the example. We will use a button toggle as stated by @romain-fontugne and will be positioned on the right side.

//child components
const emit = defineEmits(['toggle-ip-family']);

const toggleIpFamily = () => {
  emit('toggle-ip-family');
};

[ArnabBCA]

Also one thing i would like to point out is the AS Dependency is also used in the Global report page where we don't have the af url param so I think we should hide the button there and only show in the Netwoks report page?

@dpgiakatos What about this one?

[dpgiakatos]

Okay, that's fine. Before you start addressing this, please wait for the merge of https://github.com/InternetHealthReport/ihr-website/pull/866. By the end of this week, it will be merged! That said, I am assigning this to you. Thanks!

[dpgiakatos]

Hi @ArnabBCA the PR https://github.com/InternetHealthReport/ihr-website/pull/866 is merged. Thank you for waiting.