show progress on limits

src/dashboard/components/Rules.svelte

@@ -1,10 +1,43 @@
 <script>
   import dj from 'dayjs'
-  import { Logs } from '../../shared/db.js'
+  import { sum } from 'lodash'
 
+  import { Logs } from '../../shared/db.js'
+  import { getLogsBetweenDates } from '../lib.js'
+
+  export let host = ''
   export let rules = []
+
+  $: percentages = rules.map(async ({ every }) => {
+    const durationAsSeconds = dj.duration(...every).asSeconds()
+    const start = dj().subtract(durationAsSeconds, 's').toDate()
+    console.log(start)
+    const logs = await getLogsBetweenDates({
+      start,
+      end: new Date(),
+      host,
+    })
+    console.log(logs)
+
+    const consumed = sum(logs.map((log) => log.seconds))
+    return (consumed / durationAsSeconds) * 100
+    console.log(total, dj.duration(total, 's').humanize())
+  })
 </script>
 
-{#each rules as rule}
+{#each rules as rule, i}
   <div>{dj.duration(...rule.limit).humanize()} / {dj.duration(...rule.every).humanize()}</div>
+  {#await percentages[i]}
+    loading
+  {:then percentage}
+    <div class="bar bar-sm mb-2">
+      <div
+        class="bar-item"
+        role="progressbar"
+        style={`width:${percentage}%;`}
+        aria-valuenow={percentage}
+        aria-valuemin="0"
+        aria-valuemax="100" />
+    </div>
+  {/await}
 {/each}

src/dashboard/pages/Limits.svelte

@@ -46,15 +46,15 @@
 {#if Array.isArray(limits)}
   <table class="table">
     <tr>
-      <th>Host</th>
+      <th class="w-32">Host</th>
       <th>Rules</th>
-      <th class="text-right">Actions</th>
+      <th class="text-right w-32">Actions</th>
     </tr>
     {#each limits as { host, rules, _id }}
       <tr>
         <td>{host}</td>
         <td>
-          <Rules {rules} />
+          <Rules {rules} {host} />
         </td>
         <td class="text-right">
           <div class="btn-group">