Added Prefix-level Hegemony to the UI

src/components/ReactiveChart.vue

@@ -48,17 +48,17 @@ export default {
     }
   },
   emits: {
-    'plotly-click': function(clickData) {
+    'plotly-click': function (clickData) {
       if (clickData !== null) {
-        return true;
+        return true
       } else {
-        console.warn('Click Data is missing!');
-        return false;
+        console.warn('Click Data is missing!')
+        return false
       }
     },
-    'loaded': function() {
-      return true;
-    }
+    loaded: function () {
+      return true
+    },
   },
   data() {
     return {

src/components/search_bar/NetworkSearchBar.vue

@@ -36,12 +36,16 @@
         <q-item-section side color="accent"> Country </q-item-section>
         <q-item-section class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-section>
       </q-item>
+      <q-item v-else-if="scope.opt.type == 'prefix'" v-bind="scope.itemProps" v-on="scope.itemEvents" @click="gotoPrefix(scope.opt.value)">
+        <q-item-section side color="accent">Prefix</q-item-section>
+        <q-item-section class="IHR_asn-element-name">{{ scope.opt.name }}</q-item-section>
+      </q-item>
     </template>
   </q-select>
 </template>
 
 <script>
-import { NetworkQuery, CountryQuery } from '@/plugins/IhrApi'
+import { NetworkQuery, CountryQuery, HegemonyPrefixQuery } from '@/plugins/IhrApi'
 
 const MIN_CHARACTERS = 3
 const MAX_RESULTS = 10
@@ -76,12 +80,37 @@ export default {
       always: false,
       networkQuery: new NetworkQuery().orderedByNumber(),
       countryQuery: new CountryQuery().orderedByCode(),
+      prefixQuery: new HegemonyPrefixQuery(),
     }
   },
   methods: {
     search(value, update) {
+      const prefixRegex = /^(?:(?:\d{1,3}\.){0,3}\d{0,3}(?:\/\d{1,2})?|(?:[0-9a-fA-F]{1,4}:){0,7}[0-9a-fA-F]{0,4}(?:\/\d{1,3})?)$/
+      const prefixMatch = prefixRegex.exec(value)
       this.loading = true
       this.options = []
+      if (prefixMatch) {
+        this.prefixQuery.prefix(value)
+        this.$ihr_api.hegemony_prefix(
+          this.prefixQuery,
+          result => {
+            result.results.some(element => {
+              this.options.push({
+                value: element.prefix,
+                name: element.prefix,
+                type: 'prefix',
+              })
+              update()
+              return this.options.length > MAX_RESULTS
+            })
+            this.loading = false
+          },
+          error => {
+            // eslint-disable-next-line no-console
+            console.error(error)
+          }
+        )
+      }
       this.countryQuery.containsName(value)
       this.$ihr_api.country(this.countryQuery, result => {
         result.results.some(element => {
@@ -110,11 +139,19 @@ export default {
             this.loading = false
           },
           error => {
+            // eslint-disable-next-line no-console
             console.error(error)
           }
         )
       }
     },
+    gotoPrefix(code) {
+      const [host, prefixLength] = code.split('/')
+      this.$router.push({
+        name: 'prefixes',
+        params: { host: host, prefix_length: prefixLength },
+      })
+    },
     gotoASN(number) {
       this.$router.push({
         name: 'networks',

src/locales/langs/en-us.json

@@ -14,6 +14,7 @@
     "globalReport": "Global",
     "countryReport": "Country",
     "networkReport": "Network",
+    "prefixReport": "Prefix",
     "rovReport": "Route Origin Validation",
     "covid19": "COVID19",
     "contact": "Contact",
@@ -98,6 +99,20 @@
         "apiTitle": "Displayed data is available at the following links:"
       }
     },
+    "prefixDependencies": {
+      "title": "Prefix dependency",
+      "defaultTrace": "Number of dependents",
+      "yaxis": "dependency",
+      "yaxis2": "Number of ASes<br> dependent on ",
+      "table": {
+        "dependencyTitle": "prefix dependency",
+        "dependentTitle": "dependent networks",
+        "increment": "increment",
+        "dependencies": "Dependency",
+        "dependent": "dependent",
+        "apiTitle": "Displayed data is available at the following links:"
+      }
+    },
     "countryHegemony": {
       "title": "Network Dependency",
       "table": {

src/router.js

@@ -8,6 +8,7 @@ import API from '@/views/Api'
 import Contact from '@/views/Contact'
 import Countries from '@/views/Countries'
 import Networks from '@/views/Networks'
+import Prefixes from '@/views/Prefixes'
 import Corona from '@/views/Corona'
 import ROV from '@/views/ROV'
 import MetisHome from '@/views/MetisHome'
@@ -104,6 +105,17 @@ export default new Router({
       },
       meta: { title: 'Network Report - IHR' },
     },
+    {
+      name: 'prefixes',
+      path: `${routerBase}prefixes/:host?/:prefix_length?`,
+      // path: `${routerBase}prefixes/:prefix?`,
+      components: {
+        header: Header,
+        footer: Footer,
+        default: Prefixes,
+      },
+      meta: { title: 'Prefix Report - IHR' },
+    },
     {
       name: 'rov',
       path: `${routerBase}rov`,

src/views/Header.vue

@@ -98,6 +98,11 @@ const simple_menu = [
         routeName: 'networks',
         summary: 'Details for a single network (AS or IXP)',
       },
+      {
+        entryName: 'header.prefixReport',
+        routeName: 'prefixes',
+        summary: 'Details for a prefix',
+      },
       {
         entryName: 'header.rovReport',
         routeName: 'rov',
@@ -273,7 +278,7 @@ menu-delinkify(val)
 
   &last-element
     height 50px;
-    
+
 @media screen and (max-width: 1024px)
   .col-12.row.no-wrap.items-center
     justify-content space-around

src/views/Networks.vue

@@ -229,8 +229,8 @@ import NetworkDelayChart from '@/views/charts/NetworkDelayChart'
 import { AS_FAMILY, NetworkQuery } from '@/plugins/IhrApi'
 import DateTimePicker from '@/components/DateTimePicker'
 import NetworkSearchBar from '@/components/search_bar/NetworkSearchBar'
-import MeasurementLab from '@/views/charts/MeasurementLab.vue'
-import IodaChart from './charts/IodaChart.vue'
+// import MeasurementLab from '@/views/charts/MeasurementLab.vue'
+// import IodaChart from './charts/IodaChart.vue'
 import html2pdf from 'html2pdf.js'
 
 const LOADING_STATUS = {