feat(frontend): add IP subnet view

Displays only aggregated IP activity chart. As there's no support for subnet
aggregation in DP3 (it can't be precalculated generically), frontend makes one
request for master record of each IP address in subnet. This can potentially
cause DoS on huge subnets if not handled correctly. Thus, requests are split
into batches of 32 IPs which are fetched in parallel, while batches are
processed sequentially. This approach enables us to "animate" data being
"loaded" into the chart which seems user-friendly. I consider it a good
tradeoff between speed, resources requirements and user experience.

There's a new dependency for a small library `netmask` to simplify IP-subnet
calculations and bit manipulations.

Author: dbnk0

frontend/package-lock.json

@@ -18,6 +18,7 @@
     "dayjs": "^1.11.13",
     "floating-vue": "^5.2.2",
     "font-awesome": "^4.7.0",
+    "netmask": "^2.0.2",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-axios": "^3.5.2",

frontend/package.json

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import IPSubnetView from '../views/IPSubnetView.vue'
 import IPView from '../views/IPView.vue'
 
 const router = createRouter({
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'ip',
       component: IPView,
     },
+    {
+      path: '/ip_subnet/:address/:prefix',
+      name: 'ip_subnet',
+      component: IPSubnetView,
+    },
   ],
 })
 

frontend/src/router/index.js

@@ -0,0 +1,190 @@
+<script setup>
+import { computed, inject, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { Netmask } from 'netmask'
+
+import ActivityTimeline from '@/components/ActivityTimeline.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
+import SnapshotsTimePickerUrlSync from '@/components/SnapshotsTimePickerUrlSync.vue'
+
+const BATCH_SIZE = 32
+
+const getData = inject('getData')
+const route = useRoute()
+
+// Parse subnet
+const subnetInvalid = ref(false)
+let _subnet = null
+try {
+  _subnet = new Netmask(`${route.params.address}/${route.params.prefix}`)
+} catch {
+  subnetInvalid.value = true
+}
+const subnet = ref(_subnet)
+
+// Primitive mutex
+const loading = ref(false)
+
+const timePickerState = ref({
+  from: null,
+  to: null,
+  picked: null,
+  latest: null,
+  range: null,
+  resampleUnitCount: null,
+  resampleUnit: null,
+})
+const activity = ref([])
+const addressesLoaded = ref(0)
+
+/**
+ * Number of addresses in subnet
+ */
+const addressCount = computed(() => {
+  if (subnetInvalid.value) {
+    return 0
+  }
+  return subnet.value.size - 2
+})
+
+/**
+ * Load progress percentage
+ */
+const loadProgress = computed(() => {
+  if (subnetInvalid.value) {
+    return 0
+  }
+  return (addressesLoaded.value / addressCount.value) * 100
+})
+
+/**
+ * Loads data for single IP adress
+ * @param address IP address
+ */
+async function loadAddress(address) {
+  const data = await getData(`/entity/ip/${address}/master`, {
+    params: {
+      date_from: timePickerState.value.from,
+      date_to: timePickerState.value.to,
+    },
+  })
+
+  if (data?.activity) {
+    activity.value = activity.value.concat(data.activity)
+  }
+}
+
+/**
+ * Loads data for batch of IP addresses
+ *
+ * All data is loaded in parallel.
+ *
+ * @param addresses Array of addresses to load
+ */
+async function loadBatch(addresses) {
+  const dataPromises = []
+
+  // Iterate over all IPs in subnet
+  addresses.forEach((ip) => {
+    // Push promise
+    dataPromises.push(loadAddress(ip))
+  })
+
+  // Await all promises
+  await Promise.all(dataPromises)
+}
+
+/**
+ * Loads all data
+ *
+ * Subnet is divided into batches of `BATCH_SIZE` addresses. Batches are loaded
+ * sequentially, but all addresses in a batch are loaded in parallel.
+ */
+async function load() {
+  if (subnetInvalid.value) {
+    return
+  }
+
+  // Prevent multiple loadings at the same time
+  while (loading.value) {
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  loading.value = true
+
+  // Reset activity
+  activity.value = []
+  addressesLoaded.value = 0
+
+  // Generate list of all addresses in subnet
+  let addresses = []
+  subnet.value.forEach((ip) => {
+    addresses.push(ip)
+  })
+
+  // Load data in batches
+  for (let i = 0; i < addresses.length; i += BATCH_SIZE) {
+    const batch = addresses.slice(i, i + BATCH_SIZE)
+
+    // Load batch
+    await loadBatch(batch)
+
+    // Update addresses loaded
+    addressesLoaded.value += batch.length
+  }
+
+  loading.value = false
+}
+
+/**
+ * Hook to update `timePickerState` value and reload data
+ */
+async function updateTimePickerState(newTimePickerState) {
+  timePickerState.value = newTimePickerState
+  await load()
+}
+</script>
+
+<template>
+  <main class="py-4">
+    <div class="container">
+      <div v-if="subnetInvalid" class="alert alert-danger">
+        Invalid subnet <code>{{ $route.params.address }}/{{ $route.params.prefix }}</code>
+      </div>
+      <div v-else>
+        <div class="row mb-5">
+          <div class="col col-lg-7 title">
+            <h4>IP subnet</h4>
+            <h1 class="h2 fw-bold">{{ subnet.base }}/{{ subnet.bitmask }}</h1>
+            <div class="h5 text-muted">
+              <span
+                >{{ subnet.first }} &ndash; {{ subnet.last }} ({{ addressCount }}
+                {{ addressCount == 1 ? 'address' : 'addresses' }})</span
+              >
+            </div>
+          </div>
+          <div class="col col-lg-5">
+            <SnapshotsTimePickerUrlSync @update:timePickerState="updateTimePickerState" />
+          </div>
+        </div>
+
+        <div>
+          <h4 class="my-3">
+            <div class="d-flex align-items-center">
+              <span>Activity</span>
+              <ProgressBar v-if="loadProgress < 100" :progress="loadProgress" class="w-100 ms-3" />
+            </div>
+          </h4>
+          <ActivityTimeline
+            v-if="activity.length > 0"
+            :activity="activity"
+            :time-picker-state="timePickerState"
+            :picked-snapshot-ts="new Date(0)"
+            :resample-unit-count="timePickerState.resampleUnitCount"
+            :resample-unit="timePickerState.resampleUnit"
+          />
+          <div v-else class="alert alert-info">No data</div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>