Added Prefix-level Hegemony to the UI

[roopeshsn]

Description

Implemented a new page for "Prefix Report" and added prefix-level hegemony to the UI. The components used for the "Network Report" are reused for the "Prefix Report" implementation.

Though the appropriate changes to identify prefix in the search box is not done. Testing needs to be done after the change.

Motivation and Context

#252

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[romain-fontugne]

Thanks, I have added a few comments. Actually you don't need to wait for the search bar to include prefixes, you can test with a handmade url like this:
http://localhost:8080/ihr/en-us/prefixes/8.8.8.0/24

[romain-fontugne]

For prefixes (e.g. 8.8.8.0/24) we gonna have two parameters the prefix (8.8.8.0) and its length (24).
so maybe the path could be ${routerBase}prefixes/:prefix/:prefix_length?

[roopeshsn]

Can we consider the path like this, ${routerBase}prefixes/:host/:prefix_length? or can we consider as a whole ${routerBase}prefixes/:prefix? At present, I am considering the path like this, ${routerBase}prefixes/:prefix?.

[romain-fontugne]

${routerBase}prefixes/:host/:prefix_length? is the best way I think

[roopeshsn]

Make sense.

[roopeshsn]

Hi, @romain-fontugne! We discussed this PR in one of the weekly meetings a long time back. What stopped us from merging this is that the PrefixDependenciesChart is not rendered properly. Here's the behavior right now:

As you see the chart shows no data. This is because the x and y arrays of every trace inside traces is empty.

After debugging I came to know this is because of this if and this if cases inside fetchHegemony method. The if conditions validate as false which means they are not executed. I assume those cases are written in order to construct the traces array (It's hard to understand the logic written to construct the traces without proper context and comments), which then passed to ReactiveChart component to construct a chart.

I think there should be an else case in order to construct traces even if these conditions validate as false, lastDate !== maxXIso and firstDate !== minXIso (the if conditions mentioned above). Whether my explanation is good enough to understand the problem? or correct me if I am wrong. I am also available to join in a call to discuss this (if needed)!

[romain-fontugne]

I think these 'if' were added to label graphs when there is missing data. This is important for the other AS Hegemony graph where we expect a datapoint every 15min but not really for this plot. Feel free to completely remove this.

[roopeshsn]

I think these 'if' were added to label graphs when there is missing data. This is important for the other AS Hegemony graph where we expect a datapoint every 15min but not really for this plot. Feel free to completely remove this.

But after removing that part of the code, the chart won't be constructed because the traces array is still empty.

[romain-fontugne]

can you make sure that the call to the API returns some results?

[roopeshsn]

can you make sure that the call to the API returns some results?

Yes

[romain-fontugne]

let's come back to this after the vue3 migration!

[roopeshsn]

let's come back to this after the vue3 migration!

Sure, I thought the same.

[dpgiakatos]

The migration has been successfully completed and merged into the master branch. Please familiarize yourself with the new code structure before returning to this pull request.

[dpgiakatos]

This PR is outdated (Vue2JS implementation) and requires a lot of changes. Also, it has been inactive for a long period. @romain-fontugne, should we address it instead and close this PR?

[dpgiakatos]

Closed by #719.