Reworked the /progress page

frontend/pages/progress.vue

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