Merge pull request #724 from mohamedawnallah/ioda-alarms-countries-ne…

…twork-report-integration [feature]: Integrate IODA Charts in Country and Network Reports
InternetHealthReport · Jan 10, 2024 · 9e5fcdb · 9e5fcdb
2 parents 13d4f5c + d2fd33b
commit 9e5fcdb
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -120,6 +120,9 @@
         "apiTitle": "Displayed data is available at the following links:"
       }
     },
+    "iodaChart": {
+      "title": "IODA Overview"
+    },
     "countryHegemony": {
       "title": "Network Dependency",
       "table": {

diff --git a/src/i18n/locales/jp.json b/src/i18n/locales/jp.json
@@ -120,6 +120,9 @@
         "apiTitle": "Displayed data is available at the following links:"
       }
     },
+    "iodaChart": {
+      "title": "IODA Overview"
+    },
     "countryHegemony": {
       "title": "Network Dependency",
       "table": {

diff --git a/src/views/Countries.vue b/src/views/Countries.vue
@@ -14,6 +14,7 @@ import { isoCountries } from '@/plugins/countryName'
 import { DEFAULT_DISCO_AVG_LEVEL } from '@/plugins/disco'
 import { AS_FAMILY } from '@/plugins/IhrApi'
 import CountryHegemonyChart from '../components/charts/CountryHegemonyChart.vue'
+import IodaChart from '@/components/charts/IodaChart.vue'
 
 const { t } = useI18n()
 
@@ -50,6 +51,8 @@ const show = ref({
   disco_disable: false,
   hegemony: true,
   hegemony_disable: false,
+  ioda: true,
+  ioda_disable: false,
   net_delay: true,
   net_delay_disable: false
 })
@@ -181,7 +184,16 @@ onMounted(() => {
             </QCardSection>
           </QCard>
         </QExpansionItem>
-
+        <QExpansionItem :label="$t('charts.iodaChart.title')" caption="Country Internet Overview" header-class="IHR_charts-title"
+          icon="fas fa-globe" :disable="show.ioda_disable" v-model="show.ioda">
+          <QSeparator />
+          <QCard class="IHR_charts-body">
+            <QCardSection>
+              <IodaChart :entity-value="countryCode" :filter-by-country="true" :start-time="startTime"
+                :end-time="endTime" />
+            </QCardSection>
+          </QCard>
+        </QExpansionItem>
         <QExpansionItem
           :label="$t('charts.prefixHegemony.title')"
           caption="BGP / IRR / RPKI / delegated"

diff --git a/src/views/Networks.vue b/src/views/Networks.vue
@@ -14,6 +14,7 @@ import NetworkDelayChart from '@/components/charts/NetworkDelayChart.vue'
 import AsInterdependenciesChart from '@/components/charts/AsInterdependenciesChart.vue'
 import DelayAndForwardingChart from '@/components/charts/DelayAndForwardingChart.vue'
 import DiscoChart from '@/components/charts/DiscoChart.vue'
+import IodaChart from '@/components/charts/IodaChart.vue'
 
 const { t } = useI18n()
 
@@ -52,6 +53,8 @@ const show = ref({
   disco_disable: false,
   hegemony: true,
   hegemony_disable: false,
+  ioda: true,
+  ioda_disable: false,
   net_delay: true,
   net_delay_disable: false,
   measurementLab: true,
@@ -191,7 +194,17 @@ onMounted(() => {
               />
             </QCardSection>
           </QCard>
-        </qExpansionItem>
+        </QExpansionItem>
+        <QExpansionItem :label="$t('charts.iodaChart.title')" caption="AS Internet Overview" header-class="IHR_charts-title"
+          icon="fas fa-globe" :disable="show.ioda_disable" v-model="show.ioda">
+          <QSeparator />
+          <QCard class="IHR_charts-body">
+            <QCardSection>
+              <IodaChart :entity-value="String(asNumber)" :filter-by-country="false" :start-time="startTime"
+                :end-time="endTime" />
+            </QCardSection>
+          </QCard>
+        </QExpansionItem>
         <QExpansionItem
           :label="$t('charts.prefixHegemony.title')"
           caption="BGP / IRR / RPKI / delegated"