show progress on limits

This commit is contained in:
cupcakearmy 2020-09-20 18:10:33 +02:00
parent 2e4ec02aa7
commit 08984480b1
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
2 changed files with 38 additions and 5 deletions

View File

@ -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}

View File

@ -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">