2020-09-20 17:28:09 +02:00
|
|
|
<script>
|
|
|
|
import { onMount } from 'svelte'
|
|
|
|
|
|
|
|
import Chart from '../components/Chart.svelte'
|
|
|
|
import RangeChooser from '../components/RangeChooser.svelte'
|
|
|
|
|
2020-09-20 22:24:57 +02:00
|
|
|
import { data, countInGroup } from '../../shared/lib'
|
2020-09-20 17:28:09 +02:00
|
|
|
|
|
|
|
let top = 15
|
2020-10-11 23:46:06 +02:00
|
|
|
let full = 100
|
2020-09-20 17:28:09 +02:00
|
|
|
|
|
|
|
let loading = true
|
|
|
|
let counted = []
|
2020-10-11 23:46:06 +02:00
|
|
|
let table = []
|
2020-09-20 18:24:22 +02:00
|
|
|
let timeout
|
2020-09-20 17:28:09 +02:00
|
|
|
|
|
|
|
let start
|
|
|
|
let end
|
|
|
|
|
|
|
|
async function calculate() {
|
|
|
|
try {
|
|
|
|
loading = true
|
|
|
|
const logs = await data({
|
|
|
|
start,
|
2020-09-20 18:24:22 +02:00
|
|
|
end,
|
2020-09-20 17:28:09 +02:00
|
|
|
})
|
|
|
|
counted = countInGroup(logs)
|
|
|
|
} finally {
|
|
|
|
loading = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-20 18:24:22 +02:00
|
|
|
$: topData = counted.slice(0, top).map(({ total, host, human }) => ({ value: total, name: host, human }))
|
|
|
|
|
|
|
|
$: {
|
2020-09-20 17:28:09 +02:00
|
|
|
start, end
|
2020-09-20 18:24:22 +02:00
|
|
|
clearTimeout(timeout)
|
|
|
|
timeout = setTimeout(calculate, 5)
|
2020-09-20 17:28:09 +02:00
|
|
|
}
|
|
|
|
|
2020-10-11 23:46:06 +02:00
|
|
|
$: {
|
|
|
|
let lastHuman = null
|
|
|
|
table = counted.map((entry) => {
|
|
|
|
const same = lastHuman === entry.human
|
|
|
|
if (!same) lastHuman = entry.human
|
|
|
|
return {
|
|
|
|
...entry,
|
|
|
|
same,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2020-09-20 18:24:22 +02:00
|
|
|
onMount(calculate)
|
2020-09-20 17:28:09 +02:00
|
|
|
</script>
|
|
|
|
|
2020-10-11 23:46:06 +02:00
|
|
|
<div class="flex justify-between items-center mb-8">
|
2020-09-20 17:28:09 +02:00
|
|
|
<h2 class="text-2xl">Dashboard</h2>
|
|
|
|
<RangeChooser bind:start bind:end />
|
|
|
|
</div>
|
|
|
|
{#if loading}
|
|
|
|
<div class="loading loading-lg" />
|
|
|
|
{:else if counted}
|
|
|
|
<h2 class="text-lg">Top {top}</h2>
|
|
|
|
<Chart data={topData} />
|
2020-10-11 23:46:06 +02:00
|
|
|
<h2 class="text-lg mt-4 mb-2">Top {full}</h2>
|
2020-09-20 17:28:09 +02:00
|
|
|
<table class="table">
|
|
|
|
<tr>
|
|
|
|
<th>Time Spent</th>
|
|
|
|
<th>Host</th>
|
|
|
|
</tr>
|
2020-10-11 23:46:06 +02:00
|
|
|
{#each table.slice(0, full) as { host, total, human, same }}
|
2020-09-20 17:28:09 +02:00
|
|
|
<tr>
|
2020-10-11 23:46:06 +02:00
|
|
|
<td class:same>{human}</td>
|
|
|
|
<td class="link"><a target="_blank" rel="noreferrer" href={'https://' + host}>{host}</a></td>
|
2020-09-20 17:28:09 +02:00
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
</table>
|
|
|
|
{/if}
|
2021-11-22 01:36:18 +01:00
|
|
|
|
|
|
|
<style>
|
|
|
|
table td,
|
|
|
|
table th {
|
|
|
|
padding: 0.25rem 0.06rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
table td.same {
|
|
|
|
opacity: 0.25;
|
|
|
|
}
|
|
|
|
|
|
|
|
table td :global(a:visited) {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
</style>
|