Is your feature request related to a problem? Please describe.
When opening a report for a resource that does not exists, the page just show the loading message.

Describe the solution you'd like
It would be nice to have a default message saying that the queried network/AS doesn't exists

Additional context
An example is available here: https://ihr.iijlab.net/ihr/en-us/networks/AS74598

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. Progressive Web Apps (PWAs) allow developers to deliver an app-like experience to the user.

I would like to work on the issue, in case you don't want PWA support feel free to close the issue or the PR I am sending rn.

PS. I have also written a blog on why is PWA important @romain-fontugne sir you may give it a read here, although I am sure you know the importance of PWA way more than me, just wanted to share my viewpoint.

All alarms can be summarized in a single graph, maybe a sunburst or treemap (https://plot.ly/javascript/sunburst-charts/ https://plot.ly/javascript/treemaps/)

The granularity could go from AS/location -> alarm types -> alarms
On selection the below tables could show only the alarms for the selected AS/location

First-time contributors trying to create their first issue or send their first PR, it would be great if they can be greeted. Greeting everyone manually is impossible when running a big project. I propose to add a bot that greets contributors.

It would encourage first-time contributors to get started with contributing. It adds a professional and welcoming look into the repository and would encourage new users who are trying to get started with the project.

@romain-fontugne sir, I am sending the PR for this issue in case you don't want to feel free to close the issue and my PR.

let user choose a different date

In the special thanks section, I guess it would be good if we can hyperlink the branding logos with links to the corresponding websites.

@romain-fontugne sir, let me know if you want me to add this or there are some reasons due to which we should not hyperlink. The reason I personally feel hyperlinking will be beneficial becomes, while understanding IHR I searched about the corresponding organizations and work they do which was enhanced by understanding.

If you want the corresponding do assign me I will raise a PR immediately!

With the popularity of IHR and its infamous reports, I personally believe an upsurge in the number of contributors and increasing functionality in the web application. I propose to add a contributor's workflow and dependant bot.

Contributor's workflow

• Issue template: To generalize issue and parameters a contributor needs to add while creating an issue
• Bug Report: To generalize bug reporting and parameters a contributor needs to add while reporting a bug
• Pull Request template: To generalize PRs and parameters a contributor needs to add while sending a PR

Dependant bot

With the application using multiple packages, there is a need to keep track of all new versions of the package released. Implementing would help us reduce variabilities along with increasing uptime of the application in a process reducing the points of failure.

@romain-fontugne sir let me know, what you think about my basic proposal to add a generic workflow. If you want me to add the features I requested, will send a PR the same day then work on other issues I requested to work on to keep generalized PRs. If you don't want the feature feel free to close the issue else do assign me, sir.

Eslint and Prettier rules were added for the project but it is not consistent. Everyone has their own preferences(single/double quote, 2/4 space). If we don't force them to follow the same rule then the code style will be inconsistent. Also, .editorconfig rules and code styles are not the same. .editorconfig indent_size is 4 but in codes follows 2.

On my computer, I am getting lots of warnings for every file. Like this

@romain-fontugne Please assign it to me, I am working on it.

Is your feature request related to a problem? Please describe.
I often use IHR as-hegemony on slides. Some use-cases can be better:

** showing when a network disappears (ex. RIPE84 slide deck for Mariupol network)
In the graph show the timeline also for when there is no data (ie. if the query says 7 days before 2022-04-07 and there is no data 2022-04-02 and after, in that case still show the y-axis for 2022-04-02 up until 2022-04-07 but show that the network was not visible in the routing table.
** y-axis is percentage
Make it clear that the y-axis is a percentage (currently just says 100 ) for the hegemony scores.
The depending networks graph is NOT a percentage so should not be changed
** Different visual style for directly connected networks
Often you want to see if a network is directly connected to the network you are looking at or not. The difference between directly and indirectly connected networks could be visualised (for instnace the one type is a dotted line, the other not)

Describe the bug
When looking at graph for a ASN with a time specified, the time automatically turns back by one day.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://ihr.iijlab.net/ihr/en-us/networks/AS63346?rov_tb=routes&af=4&last=3&date=2022-07-09'
2. Refresh the page
3. The date goes back by one day.

Expected behavior
The date filter should not change on refresh.

Screenshots
The link for 2022-07-09 goes to 2022-07-08 on page load:
https://ihr.iijlab.net/ihr/en-us/networks/AS63346?rov_tb=routes&af=4&last=3&date=2022-07-09

Desktop (please complete the following information):

• OS: Mac
• Browser Safari and Firefox

Secure code is important. Writing secure code is hard. As developers, we all know this. Developers often use the OWASP TOP 10, a list of the 10 most critical security risks that you should think about when writing software. But of course, there are more than 10 security risks in the world. Keeping up with everything that’s happening in the world of security and applying that to all the code you write is a noble goal but very hard.

Code scanning works by running queries against one or more databases. Each database contains a representation of all of the code in a single language in your repository. For the compiled languages C/C++, C#, and Java, the process of populating this database involves building the code and extracting data. CodeQL also runs a build for Go projects to set up the project. However, in contrast to the other compiled languages, all Go files in the repository are extracted, not just those that are built. You can use custom build commands to skip extracting Go files that are not touched by the build.

CodeQL queries can be extremely powerful. Because CodeQL understands the code, it can figure out if a value that you return in your HTML comes from user input or if your locks in a multithreaded application are not in the same order in different locations leading to possible deadlocks in your application.

@romain-fontugne sir, I am sending the PR for CodeQL, incase you don't need it feel free to close it.

add colored overlays to show missing data and low visibility.
Also make the graph to 0 if a dependency disappear.

Describe the bug
For some countries, the median RTT values shown in the network delay graphs are in negative.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ihr.iijlab.net/ihr/en-us/countries/
2. Select the country as 'Netherlands'.
3. Scroll down to the 'Network delay' accordion.
4. Hover on the graph to see the median RTT values from AS33915 to Google (AS15169), for some timestamps values are in negative.

Expected behavior
The median RTT values displayed should be a non-negative number.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser: Chrome

Additional context
As discussed with @romain-fontugne, The estimate can be below 0 in some cases it's weird but mathematically it is correct. But in frontend, it should be displayed as a positive value.
e.g.
-0.56 should be displayed as abs(-0.56) = 0.56

On the home page, click on the banner it will redirect to Global report page.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Home page.
2. Click on the banner

Expected behavior
Should not redirect to Global Report page when clicking on the banner.

@romain-fontugne, I am working on this issue and soon raise a pull request.

Tracemon is currently not working for Forwarding anomalies

There is two possibilities for a network with no AS dependency:

• the network is super distributed and really has no dependency (e.g. Google)
• the network announce no IP space

distinguish both cases using results from the global graph, and print corresponding messages

bootstrap is only required to render nice tables (vue-tables2).

https://www.google.com/recaptcha/admin/create

Describe the bug
On the COVID19 report page, after selecting a country from the dropdown, the dropdown is not getting populated with the selected country.

To Reproduce

1. Go to 'https://ihr.iijlab.net/ihr/en-us/covid19'.
2. Click on the 'Select a Country' Dropdown and select any country.

Expected behavior
When we select any country from the dropdown, it should get populated with the selected value.

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser: Chrome

Describe the bug
There is no documentation for the Route Origin Validation report and corresponding widget in network report.

Expected behavior
We should have a section in the documentation that explain what ROV/RPKI/IRR/bogons are, and the data sources used to compute displayed data.

The global report links just go the corresponding network but the report date is not passed. Thus links for a past global report are not showing the right date.

• Link should point to the ASN page
• The dates should be passed as argument so one can view the same period of time in the other page

Add logo and mention IHR on all graphs so that people knows where screenshots come from.

Add probe report, including:

• Network delays
• Tag (noisy or not)

Describe the bug
We used to have a working version on BGPlay on IHR website. Somehow this is not working anymore.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ihr.iijlab.net/ihr/en-us/networks/AS2497
2. Click on the AS dependency graph
3. Scroll down to the table below the graph and click on 'AS GRAPH'
4. The message 'Reconstructing the history.' is shown indefinitely and no graph appear

Expected behavior
We are supposed to see the BGPlay graph: https://stat.ripe.net/widget/bgplay#w.resource=2497

Desktop (please complete the following information):

• OS: linux
• Browser: brave

Make reported links clickable and show a popup with the corresponding DNS name

CAIDA IX file has redundant entries, two IDs could map to the same IX and LAN just named differently in peeringdb and pch data (e.g. INEX). Plus the IX community is mainly using peeringdb or IX federation IDs.

But currently I don't see an easy way to map an IP address to an IX federation ID. IXP DB is the best effort so far (https://ixpdb.euro-ix.net/en/ixpdb/ixps/) But seems to miss a lot of IP prefixes?

We see only the first 1k entries in the table. We need to go through pages to get all ASNs values

Merge AS dependency for ASes in the same country.
Like it was done at the apricot hackathon: https://github.com/munhyunsu/APRICOT19

Currently, I am reading the AS dependency section in the document but it doesn't highlight the link in the left section. I propose to add a link in the left half so that readers understand what are they reading currently.

@romain-fontugne sir, this is just a minor UI fix, I am thus sending the PR, incase you don't want it just close the issue and the corresponding PR

see: http://localhost:8080/7922/asn/?af=4&date=2018-05-30&last=7

Contributing guidelines would provide potential project contributors with a short guide to how they can contribute to the particular application. It would help contributors understand how to open a PR or raise issues. Adding Contributing guidelines would help maintainers and contributors work in symphony and with ease. Ultimately, increase the productivity of both the stakeholders.

I am creating a PR, this being a basic issue won't take much time. @romain-fontugne sir in case you don't want a contributing guideline feel free to close this issue as well as the PR I am sending.

As of now, I am creating a branch and sending PRs, I would mention that in the contributing guideline as well.

Describe the bug
The regular expression used to extract the AS or IXP number from strings will accept an arbitrary prefix as long as the string ends with a number. This can lead to confusion, especially if an IXP link is mistyped.

To Reproduce

1. Go to https://ihr.iijlab.net/ihr/en-us/networks/IX208
2. The result is actually for AS208, instead of IXP208 (DE-CIX) since the P is missing from the URL. This is not directly obvious, especially sind the string IX208 is automatically inserted into the heading.

Expected behavior
At least, the arbitrary string should not be displayed in the header, but corrected to ASXXX instead. However, the best solution would probably be to only accept ^AS[0-9]+$ and ^IXP[0-9]+$ strings and show an error / redirect to 404 otherwise.

Screenshots
Report for IX208, which is actually AS208

Additional context
The problematic function is ihr_AsOrIxpToNumber in IhrApi.js

Describe the bug
Links to pages that use Vue Router's Params (currently the country and network reports) do not show a proper error page or message when called with invalid params.

To Reproduce
For country reports:

1. Go to https://ihr.iijlab.net/ihr/en-us/countries/HELLOTHERE
2. See an empty report page.

For network reports:

1. Go to https://ihr.iijlab.net/ihr/en-us/networks/HELLOTHERE
2. Get redirected to the network report start page.

Expected behavior
The behavior of the network reports is better than for country reports, since at least no empty report is shown. So either we do the same thing for the country reports, or display an error, or redirect to a 404 page.

Screenshots
Empty report without heading

Describe the bug
A click on the AS dependency graph shows a detailed table that include a column called 'Direct Neighbour'. These values are wrong if we click too quickly on the graph (e.g. when the page is still loading). The data for this column is fetch by an API call to RIPE stat, if the API call is not complete then all direct neighbor values are displayed as 'x'.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ihr.iijlab.net/ihr/en-us/networks/AS2497
2. Click as fast as possible on a line of the top graph (AS Dependency)
3. See the all the 'x' values in Direct neighbour. If we click again on the graph (after the page is fully loaded) some of these 'x' become 'v' which is the expected results.

Expected behavior
We should show spinning wheels in the direct neighbour column to let the user know that the data is still loading.

Desktop (please complete the following information):

• OS: linux
• Browser: brave

Describe the bug
In country report page, the 'network delay' accordion is not getting collapsed after clicking on the collapsed button. It is getting collapsed for a few milliseconds and then bounces back to its open state.

To Reproduce
Steps to reproduce the behavior:

1. Go to '(https://ihr.iijlab.net/ihr/en-us/countries)'
2. Select any country.
3. Scroll down to the 'Network Delay' accordion
4. Try to collapse the accordion

Expected behavior
After clicking on the collapse icon, the accordion should get collapsed, just like the other two accordions present ('Network Dependency' and 'Route Origin Validation') on the page are behaving.

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser: Chrome

Thank you for building this. There is a lot of interesting data and patterns.

I am trying to add a destination network AS24186 under Network delay and have been unable to add it. I am guessing it does a traceroute return path using atlas like,

ripe-atlas measure traceroute --from-asn 16509 --target "IPADDRESS"

where IP address is from one the of prefixes of AS24186, please correct me if I am wrong.

When I enter the ASN(AS24186) and click on add, nothing happens. FYI, I have a probe running on AS24186.

When clicking on dependent networks show the increase/decrease of hegemony value compared to previous timebin. That would help to identify which networks appear/disappear from the hegemony cone.

Currently, the website breaks in mobile view and there are accessibility issues with the change of device size. As discussed with @romain-fontugne sir, regarding the UI change I was talking about, I would work on the responsive after that is discussed properly and we arrive at a conclusion.

It would be great if @romain-fontugne sir can assign this issue to me and I can plan on the UI revamp or fix some of the points which can increase the accessibility.

Add country reports, including:

• AS Hegemony / rank by population (#11)
• network delay from cities
• network disconnections

I suggest at least 2 accounts:

• noreply
• admin

Is your feature request related to a problem? Please describe.
If our end-users want to see a file for future reference, it would be difficult for them to refer to.

Describe the solution you'd like
Adding a download button on every page which generates customizable reports will make the task easier for the end users to keep a track of the reports they are working for.

Describe alternatives you've considered
Currently, our users are using screenshots that have low picture quality, generating pdfs would increase the pixels and the quality of the graphs.

I propose to optimize the site with respect to SEO. Currently, in my setup IHR ranks at 3. Bringing it to the top would be my approach. I would love to work on this issue, I am creating a PR rn, @romain-fontugne sir, in case you don't want the particular feature rn feel free to close the issue and PR.

Cheers
Aniket

Is your feature request related to a problem? Please describe.
Whenever a user requests an URL that is not routed in our application a white page turns up.

Describe the solution you'd like
Building a custom 404 page which routes back to our home page after a time-lapse of 5 seconds. It should also have a button to navigate to the home page for an instant move route to the home page.

Additional context
The 404 page should have a soothing UI and must be responsive. A fancy yet interesting text that might give the end-user a laugh when they hit the page would make the application a bit interactive.

This is the basic skeleton of how I have planned to implement the 404 page, feel free to share your thoughts along with the UI. Once we have finalized the UI feel free to code.

PS. If you want to solve this issue comment on this issue. Please start working on the issue after you are assigned. Do note this issue is marked as first-timers-only, so if you have not contributed before we encourage you to work on this and get to know about IHR's workflow :)

Problem
I found that lots of time when we are working on a project, we tend to forget to fix linting warnings and errors. This mistake makes our coding style inconsistent. Also, finding and fixing lint errors manually is very tedious. If we make the process automatic there is no chance to make the mistake.

Solution
Using the git pre-commit hook, I want to run the lint command to prevent the mistake. I like to use husky to achieve this.

Is it okay if I include the feature @romain-fontugne? If that is the case, please assign it to me.

We want to know how far are dependencies, the list of ASN could be sorted by the number of hops

Currently, this codebase is not using any code formatting tool and linting but people tend to use separate tools for these two jobs i.e. ES Lint for code listing & managing errors & Prettier for code formatting.

Solution

Prettier is a tool that automatically makes your code more readable and consistent with your project's style guide. It integrates with your editor, so your code is tidied up every time you save your changes.

Why use Prettier? https://prettier.io/docs/en/why-prettier.html

@romain-fontugne sir, I am sending a PR for the issue, in case you don't want it feel free to close the issue and the linked PR. I also plan to add editor configuration file to keep the code structure and layout uniform throughout. Adding the code formatting tool will surely increase DX.

Hi. I was wondering is this a limitation of the API that there are no AS hegemony values fetched for dates older than 2015.

How to reproduce:

• click on AS dependency graph, then AS graph to show BGPlay widget
• try to go to another network report by typing an AS number in the top search field

Error message:
QMenu.js?4e73:161 Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.
at eval (QMenu.js?4e73:161)
eval @ QMenu.js?4e73:161
setTimeout (async)
__show @ QMenu.js?4e73:144
show @ model-toggle.js?7ee0:64
value @ model-toggle.js?7ee0:22
run @ vue.esm.js?a026:4571
flushSchedulerQueue @ vue.esm.js?a026:4313
eval @ vue.esm.js?a026:1989
flushCallbacks @ vue.esm.js?a026:1915
Promise.then (async)
timerFunc @ vue.esm.js?a026:1942
nextTick @ vue.esm.js?a026:1999
Vue.$nextTick @ vue.esm.js?a026:3524
render @ QField.js?8572:418
Vue._render @ vue.esm.js?a026:3551
updateComponent @ vue.esm.js?a026:4069
get @ vue.esm.js?a026:4482
run @ vue.esm.js?a026:4557
flushSchedulerQueue @ vue.esm.js?a026:4313
eval @ vue.esm.js?a026:1989
flushCallbacks @ vue.esm.js?a026:1915
Promise.then (async)
timerFunc @ vue.esm.js?a026:1942
nextTick @ vue.esm.js?a026:1999
queueWatcher @ vue.esm.js?a026:4405
update @ vue.esm.js?a026:4547
notify @ vue.esm.js?a026:739
mutator @ vue.esm.js?a026:891
eval @ NetworkSearchBar.vue?83ef:69
eval @ NetworkSearchBar.vue?83ef:68
eval @ IhrApi.js?90e9:190
Promise.then (async)
_resolveAxiosPromise @ IhrApi.js?90e9:187
_generic @ IhrApi.js?90e9:255
network @ IhrApi.js?90e9:350
search @ NetworkSearchBar.vue?83ef:65
filter @ NetworkSearchBar.vue?83ef:94
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
invokeWithErrorHandling @ vue.esm.js?a026:1863
Vue.$emit @ vue.esm.js?a026:3891
filter @ QSelect.js?ddd8:884
eval @ QSelect.js?ddd8:841
setTimeout (async)
__onInputValue @ QSelect.js?ddd8:840
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
original._wrapper @ vue.esm.js?a026:7559
vue.esm.js?a026:628 [Vue warn]: Error in callback for watcher "value": "TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'."

found in

--->

at src/components/search_bar/NetworkSearchBar.vue



at src/App.vue

warn @ vue.esm.js?a026:628
logError @ vue.esm.js?a026:1893
globalHandleError @ vue.esm.js?a026:1888
handleError @ vue.esm.js?a026:1848
run @ vue.esm.js?a026:4573
flushSchedulerQueue @ vue.esm.js?a026:4313
eval @ vue.esm.js?a026:1989
flushCallbacks @ vue.esm.js?a026:1915
Promise.then (async)
timerFunc @ vue.esm.js?a026:1942
nextTick @ vue.esm.js?a026:1999
queueWatcher @ vue.esm.js?a026:4405
update @ vue.esm.js?a026:4547
notify @ vue.esm.js?a026:739
reactiveSetter @ vue.esm.js?a026:1064
proxySetter @ vue.esm.js?a026:4634
eval @ QField.js?8572:402
setTimeout (async)
__onControlFocusout @ QField.js?8572:389
focusout @ QSelect.js?ddd8:914
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
original._wrapper @ vue.esm.js?a026:7559
vue.esm.js?a026:1897 TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.
at VueComponent.__hide (QMenu.js?4e73:184)
at VueComponent.hide (model-toggle.js?7ee0:83)
at VueComponent.value (model-toggle.js?7ee0:22)
at Watcher.run (vue.esm.js?a026:4571)
at flushSchedulerQueue (vue.esm.js?a026:4313)
at Array.eval (vue.esm.js?a026:1989)
at flushCallbacks (vue.esm.js?a026:1915)