Integrating @TasosY2K BGP monitor to base-code (#833)

* gsoc24 init (#798)

* Added basic ripe atlas API plugin

* Added v-network-graph and basic traceroute visualization

* added basic styling

* Added some position fixes for nodes

* Added Basic UI components

* Network Topology Basic UI Init

* Added RIS Live WebSocket Connection

* Filtering and Storing RIS Live Messages

* Added Iyp query and Basic visualization using Dagre

* Added BGP Graph Data

* added time range and probe selection

* Hover effect and More customization added

* Added AS Sankey Graph

* Bug fix and Prettier Code Refactored

* added tooltip

* Optimized and removed code redundancy

* Added Messages Table and Filter For Peer AS

* Added more customization to node

* Node size filter added

* Fix Metis deployment page (#816)

Missing import caused the page to not be displayed.
Probably a regression from c3eb1d1.

Fixes #815.

* Added BGP Communities

* Added Route Params and Sorted RRC input options

* added coloring modes

* Modified handleMessages and Communities

* Added Time range

* Removed Code Redundancy and Optimised handleFilterMessages function

* Replaced QRange with QSlider

* Bug fix and Added Reset Option

* Some customization button added

* Added Messages Stats Display Info

* Added "No data" message

* Added No of Messages Received Line Chart

* Prefix added

* Added BGP message type (Announce/Withdraw)

* Added Button Colors

* Added GenericCardController

* Changed Page Layout Order

* Code cleanup

* Added Router Link to Peer and AS Path in the Table

* Added AS Info

* Used utcString() from report plugin

* Props added and some customization

* changed deafult moreSpecific to false

* Chaged Sankey Hover Text

* Click and hover effect updated

* changed "timestampSlider" name and converted line chart to stacked line chart announcements and withdrawals

* fix router

* delete old file

* Added Live Status and Put QSlider inside the line chart

* Added bgp "Unknown" type check

* Added some code formatting

* Reduced sankey layout margin

* Added comments

* fixed rtt coloring

* added get param

* added request caching

* rtt dot

* added rtt legend

* added localstorage caching

* fixed asn container

* added line chart

* added view controls

* minor fix

* fixed duplicate probe issue

* Hide isLive button on init

* Fixed timestamp messages

* Added more BGP Monitor Info card text

* Added Fill Color in BGP Monitor line chart

* Added stackgroup property in line chart

* Grid Layout Added

* Url support added

* url format change

* added proper destination selection

* added search to destinations table

* bug fix on dest selection

* added some extra debounce

* typo

* Fit Screen Fix

* minor styling fixes

* Remove Consecutive Duplicate AS

* added localstorage cache clearing

* added default last 24h on time range

* Added description

* Added Nodes and Links Count in Sankey Graph

* Added ws disconnected dialog

* Replace cache function with IHR cache function

* Rename router url

* Add chart in separate component

* Add line chart in separate component

* Add probes table in separate component

* Add destinations table in separate component

* fix cd

* Create subcomponent

* fix url parameter

* fix css

* ui changes

* Fix router and add text

* Fix text in menu

* change router

* fix bugs

* reset cache on full storage

* add space in card

---------

Co-authored-by: lean <tmeletlidis@protonmail.com>
Co-authored-by: Arnab Ghosh <arnabsonu2@gmail.com>
Co-authored-by: 0xAnon <utkarshshail005@protonmail.com>
Co-authored-by: mtashiro <malte@iij.ad.jp>

package.json

@@ -16,6 +16,7 @@
     "@quasar/extras": "^1.16.8",
     "axios": "^1.6.2",
     "dagre": "^0.8.5",
+    "grid-layout-plus": "^1.0.5",
     "ip-address": "^9.0.5",
     "plotly.js-dist": "^2.27.1",
     "quasar": "^2.14.0",

src/components/Header.vue

@@ -87,6 +87,11 @@ const  SIMPLE_MENU = [
         routeName: 'bgp-monitor',
         summary: 'header.bgpMonitor.summary',
       },
+      {
+        entryName: 'header.tracerouteVisualization.name',
+        routeName: 'traceroute-monitor',
+        summary: 'header.tracerouteVisualization.summary',
+      },
     ],
   },
   {