owner/RSE
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Reworked the /progress page

Browse Source
This commit is contained in:
Rasmus Rasmussen 2024-12-17 13:15:47 +01:00
parent 3822339dd9
commit 8b55cf7bb6
3 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/pages/progress.vue
View File

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { fetchWithCache } from '~/utils/cacheUtil'; import { fetchWithCache } from '~/utils/cacheUtil';
import { progressTypeToDictionary } from '~/utils/convertProgressTypeToDictionary';
const data = ref<ProgressType | null>(null); const data = ref<ProgressType | null>(null);
const loading = ref<boolean>(true); const loading = ref<boolean>(true);
const error = ref<string | null>(null); const error = ref<string | null>(null);
let dict = ref<ProgressDictionary[] | null>(null);
const fetchMyData = async () => { const fetchMyData = async () => {
try { try {
@ -23,6 +25,10 @@ const fetchMyData = async () => {
error.value = (err as Error).message; error.value = (err as Error).message;
} finally { } finally {
loading.value = false; loading.value = false;
if (data.value !== null) {
dict.value = progressTypeToDictionary(data.value);
}
} }
}; };
@ -32,44 +38,20 @@ fetchMyData();
<template> <template>
<div class="h-screen grid place-items-center"> <div class="h-screen grid place-items-center">
<div v-if="data"> <div v-if="dict">
<table class="table-auto border-gray-300"> <table class="table-auto border-gray-300">
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Metric</th> <th class="px-4 py-2">Metric</th>
<th class="px-4 py-2">Value</th> <th class="px-4 py-2">Value</th>
</tr> </tr>
</thead> </thead>
<tbody > <tbody>
<tr> <tr v-for="d in dict">
<td class="px-4 py-2">Percentage of Ipv4 scanned</td> <td class="px-4 py-2">{{d.description}}</td>
<td class="px-4 py-2">{{data.percentageOfIpv4Scanned}}</td> <td class="px-4 py-2">{{d.value}}</td>
</tr> </tr>
<tr>
<td class="px-4 py-2">Total filtered</td>
<td class="px-4 py-2">{{data.totalFiltered}}</td>
</tr>
<tr>
<td class="px-4 py-2">Total Discarded</td>
<td class="px-4 py-2">{{data.totalDiscarded}}</td>
</tr>
<tr>
<td class="px-4 py-2">Amount of Ipv4 left</td>
<td class="px-4 py-2">{{data.amountOfIpv4Left}}</td>
</tr>
<tr>
<td class="px-4 py-2">Discarded db size</td>
<td class="px-4 py-2">{{data.discardedDbSize}}</td>
</tr>
<tr>
<td class="px-4 py-2">Filtered db size</td>
<td class="px-4 py-2">{{data.filteredDbSize}}</td>
</tr>
<tr>
<td class="px-4 py-2">Unfiltered db size</td>
<td class="px-4 py-2">{{data.myDbSize}}</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

5
frontend/types/global.d.ts vendored
View File

@ -8,6 +8,11 @@ interface ProgressType {
myDbSize: bigint; myDbSize: bigint;
} }
interface ProgressDictionary {
description: string;
value: string;
}
type CacheEntry<T> = { type CacheEntry<T> = {
data: T; data: T;
timestamp: number; timestamp: number;

11
frontend/utils/convertProgressTypeToDictionary.ts Normal file
View File

@ -0,0 +1,11 @@
export function progressTypeToDictionary(progress: ProgressType) {
return [
{ description: "Percentage of Ipv4 scanned", value: progress.percentageOfIpv4Scanned.toString() },
{ description: "Total filtered", value: progress.totalFiltered.toString() },
{ description: "Total Discarded", value: progress.totalDiscarded.toString() },
{ description: "Amount of Ipv4 left", value: progress.amountOfIpv4Left.toString() },
{ description: "Discarded db size", value: progress.discardedDbSize.toString() },
{ description: "Filtered db size", value: progress.filteredDbSize.toString() },
{ description: "Unfiltered db size", value: progress.myDbSize.toString() },
]
}