v0.3

src/background/index.js

@@ -1,14 +1,15 @@
 import browser from 'webextension-polyfill'
+import dayjs from 'dayjs'
 
 import { dashboard } from '../shared/utils'
-import { insertLog, normalizeTimestamp, Limits } from '../shared/db'
+import { insertLog, normalizeTimestamp, Limits, DB } from '../shared/db'
 import { getUsageForHost, percentagesToBool } from '../shared/lib'
 
 browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true }))
 
 const frequency = 1000
 
-async function getAllTabs() {
+async function log() {
   try {
     const tabs = await browser.tabs.query({})
     const windows = await browser.windows.getAll()
@@ -35,9 +36,16 @@ async function getAllTabs() {
   } catch {}
 }
 
-setInterval(() => {
-  getAllTabs()
-}, frequency)
+async function deleteOldLogs() {
+  const { retention } = await browser.storage.local.get()
+  const maxAge = dayjs().startOf('day').subtract(retention, 'days').toDate()
+  const toDelete = await DB.logs.where('timestamp').below(maxAge).toArray()
+  const ids = toDelete.map((log) => log.id)
+  await DB.logs.bulkDelete(ids)
+}
+
+setInterval(deleteOldLogs, 5 * 60 * 1000) // Delete old logs every 5 minutes
+setInterval(log, frequency)
 
 browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
   return getUsageForHost(message).then((percentages) => percentagesToBool(percentages))

src/dashboard/App.svelte

@@ -5,6 +5,8 @@
   import Dashboard from './pages/Dashboard.svelte'
   import Limits from './pages/Limits.svelte'
 
+  import { isDev } from '../shared/utils'
+
   const routes = {
     '/': Dashboard,
 
@@ -21,7 +23,9 @@
   }
 </style>
 
-<Dev />
+{#if isDev}
+  <Dev />
+{/if}
 <main>
   <div class="mb-8">
     <a href="../options/index.html"><button class="btn">Options</button></a>

src/dashboard/components/Chart.svelte

@@ -1,38 +1,24 @@
 <script>
   import * as d3 from 'd3'
-  import { map, min, max } from 'lodash'
+  import { map, max } from 'lodash'
   import { onMount } from 'svelte'
 
   let wrapper
 
-  export let data = [
-    // { lang: 'ts', popularity: 10 },
-    // { lang: 'js', popularity: 7 },
-    // { lang: 'py', popularity: 9 },
-    // { lang: 'rs', popularity: 8 },
+  export let data = []
 
-    // { year: 2018, value: 8 },
-    // { year: 2019, value: 9 },
-    // { year: 2020, value: 3 },
+  function render() {
+    if (!wrapper) return
 
-    { cat: 'Phillip', value: 10 },
-    { cat: 'Rita', value: 12 },
-    { cat: 'Tom', value: 20 },
-    { cat: 'Oscar', value: 19 },
-    { cat: 'Lulu', value: 8 },
-    { cat: 'Keko', value: 14 },
-    { cat: 'Lena', value: 9 },
-  ]
-
-  onMount(async () => {
     // Dynamic left padding depending on the labels
     const longestKey = max(map(data, (d) => d.name.length))
-    const mt = Math.min(longestKey * 6, 120)
-    const margin = { left: mt, top: 50, bottom: 50, right: 50 }
+    const baseMargin = 35
+    const ml = Math.min(longestKey * 6.3, 120) + baseMargin
+    const margin = { left: ml, top: baseMargin, bottom: baseMargin, right: baseMargin }
     const styles = window.getComputedStyle(wrapper)
     const barHeight = 20
     const width = parseInt(styles.width)
-    const height = Math.ceil(data.length * 1.5 * barHeight)
+    const height = Math.ceil(data.length * 1.25 * barHeight + (margin.top + margin.bottom))
 
     const svg = d3.select(wrapper).attr('viewBox', [0, 0, width, height])
 
@@ -64,7 +50,7 @@
     // Bars
     svg
       .append('g')
-      .attr('fill', 'steelblue')
+      .attr('fill', '#17bbac')
       .selectAll('rect')
       .data(data)
       .join('rect')
@@ -89,7 +75,7 @@
       .text((d) => d.human)
       .call((text) =>
         text
-          .filter((d) => x(d.value) - x(0) < d.human.length * 7) // short bars
+          .filter((d) => x(d.value) - x(0) < d.human.length * 8) // short bars
           .attr('dx', +4)
           .attr('fill', 'black')
           .attr('text-anchor', 'start')
@@ -98,13 +84,18 @@
     svg.append('g').call(xAxis)
 
     svg.append('g').call(yAxis)
-  })
+  }
+
+  onMount(render)
 </script>
 
 <style>
   svg {
     width: 100%;
-    /* height: 25em; */
+  }
+
+  svg :global(*) {
+    font-family: monospace;
   }
 </style>
 

src/dashboard/components/Dev.svelte

@@ -3,14 +3,14 @@
   import day from 'dayjs'
   import { range, random } from 'lodash'
 
-  import { insertLog, normalizeTimestamp, DB } from '../../shared/db'
+  import { insertLog, normalizeTimestamp, DB, clear as clearDB } from '../../shared/db'
 
   let loading = false
 
   async function fill() {
     try {
       loading = true
-      const start = day().subtract('7', 'days').valueOf()
+      const start = day().subtract(2, 'weeks').valueOf()
       const end = Date.now()
       for (const n of range(20)) {
         const host = faker.internet.domainName()
@@ -29,8 +29,7 @@
   async function clear() {
     try {
       loading = true
-      await DB.limits.clear()
-      await DB.logs.clear()
+      await clearDB()
     } finally {
       loading = false
     }

src/dashboard/components/RangeChooser.svelte

@@ -29,7 +29,6 @@
   }
 </style>
 
-<!-- <div class="flex flex-col"> -->
 <div class="flex items-center">
   <div class="btn-group">
     <button class="btn btn-sm" on:click={all}>All</button>

src/dashboard/pages/Dashboard.svelte

@@ -7,10 +7,11 @@
   import { data, countInGroup } from '../../shared/lib'
 
   let top = 15
-  let full = 50
+  let full = 100
 
   let loading = true
   let counted = []
+  let table = []
   let timeout
 
   let start
@@ -37,13 +38,37 @@
     timeout = setTimeout(calculate, 5)
   }
 
+  $: {
+    let lastHuman = null
+    table = counted.map((entry) => {
+      const same = lastHuman === entry.human
+      if (!same) lastHuman = entry.human
+      return {
+        ...entry,
+        same,
+      }
+    })
+  }
+
   onMount(calculate)
 </script>
 
 <style>
+  table td,
+  table th {
+    padding: 0.25rem 0.06rem;
+  }
+
+  table td.same {
+    opacity: 0.25;
+  }
+
+  table td :global(a:visited) {
+    color: inherit;
+  }
 </style>
 
-<div class="flex justify-between items-center mb-4">
+<div class="flex justify-between items-center mb-8">
   <h2 class="text-2xl">Dashboard</h2>
   <RangeChooser bind:start bind:end />
 </div>
@@ -52,16 +77,16 @@
 {:else if counted}
   <h2 class="text-lg">Top {top}</h2>
   <Chart data={topData} />
-  <h2 class="text-lg mt-4">Top {full}</h2>
+  <h2 class="text-lg mt-4 mb-2">Top {full}</h2>
   <table class="table">
     <tr>
       <th>Time Spent</th>
       <th>Host</th>
     </tr>
-    {#each counted.slice(0, 100) as { host, total, human }}
+    {#each table.slice(0, full) as { host, total, human, same }}
       <tr>
-        <td>{human}</td>
-        <td class="link"><a href={'https://' + host}>{host}</a></td>
+        <td class:same>{human}</td>
+        <td class="link"><a target="_blank" rel="noreferrer" href={'https://' + host}>{host}</a></td>
       </tr>
     {/each}
   </table>

src/options/App.svelte

@@ -1,43 +1,85 @@
 <script>
   import { onMount } from 'svelte'
   import browser from 'webextension-polyfill'
+  import { saveAs } from 'file-saver'
+  import dj from 'dayjs'
 
-  import { dashboard } from '../shared/utils'
+  import FileUpload from './FileUpload.svelte'
+
+  import { dashboard, isDev } from '../shared/utils'
+  import { dump as dumpDB, load as loadDB, clear as clearDB, validate } from '../shared/db'
+  import { longPress } from '../shared/lib'
 
   const DEFAULT = {
     retention: 90,
   }
 
   let settings = DEFAULT
+  let uploaded
+  let disabled = true
 
-  onMount(async () => {
-    load()
-  })
-
-  async function load() {
+  async function read() {
     settings = {
       ...DEFAULT,
       ...(await browser.storage.local.get()),
     }
   }
 
-  function save() {
+  function write() {
     return browser.storage.local.set(settings)
   }
 
   async function reset() {
     await browser.storage.local.clear()
-    await load()
+    await read()
   }
+
+  async function dump() {
+    const data = await dumpDB()
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' })
+    const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
+    saveAs(blob, filename)
+  }
+
+  async function clear() {
+    await clearDB()
+    alert('Done')
+  }
+
+  async function load() {
+    try {
+      await loadDB(uploaded)
+      alert('Imported')
+    } catch {
+      alert('Error importing')
+    }
+  }
+
+  $: {
+    disabled = !validate(uploaded)
+  }
+
+  onMount(read)
 </script>
 
-<main class="p-4">
-  <a href={dashboard} target="_blank"><button class="btn btn-primary btn-lg">Dashboard</button></a>
+<style>
+  main {
+    padding: 1em;
+    margin: auto;
+    width: 100%;
+    max-width: 50em;
+  }
+</style>
 
-  <form class="max-w-sm mt-5" on:submit|preventDefault={save}>
+<main>
+  <a href={dashboard} target={isDev ? '' : '_blank'}><button class="btn">Dashboard</button></a>
+
+  <h2 class="mt-8 text-2xl">Settings</h2>
+  <form class="mt-2" on:submit|preventDefault={write}>
     <div class="form-group">
       <label class="form-label">
-        Retention <small>(Days)</small>
+        Retention
+        <small>(Days)</small>
         <input
           id="retention"
           class="form-input"
@@ -47,8 +89,18 @@
           step="1"
           bind:value={settings.retention} />
       </label>
-      <button type="reset" class="btn" on:click={reset}>Reset</button>
-      <button type="submit" class="btn btn-primary">Save</button>
+
+      <div class="mt-2">
+        <button type="reset" class="btn" on:click={reset}>Reset</button>
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
     </div>
   </form>
+  <h2 class="mt-8 text-2xl">Your Data</h2>
+  <div class="mt-2">
+    <FileUpload bind:value={uploaded} />
+    <button class="btn btn-primary" on:click={load} {disabled}>Import</button>
+    <button class="btn btn-primary" on:click={dump}>Export</button>
+    <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clear}>Delete all data</button>
+  </div>
 </main>

src/options/FileUpload.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { isEqual } from 'lodash'
+
+  let text = 'Select File'
+
+  export let value = undefined
+
+  let input
+  let error
+
+  function validate() {
+    if (!input || !input.files.length) return
+
+    const file = input.files[0]
+    text = file.name
+
+    const reader = new FileReader()
+    reader.onload = (data) => {
+      try {
+        error = false
+        const text = data.target.result
+        const parsed = JSON.parse(text)
+        value = parsed
+      } catch {
+        error = true
+        value = undefined
+      }
+    }
+    reader.readAsText(file)
+  }
+</script>
+
+<style>
+  label {
+    width: 18em;
+    max-width: 100%;
+    display: inline-block;
+  }
+  label input[type='file'] {
+    display: none;
+  }
+</style>
+
+<label class="btn">
+  {#if error}Invalid file{:else}{text}{/if}
+  <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
+</label>

src/shared/db.js

@@ -2,6 +2,7 @@ import dj from 'dayjs'
 import Dexie from 'dexie'
 import RelativeTime from 'dayjs/plugin/relativeTime'
 import Duration from 'dayjs/plugin/duration'
+import Joi from 'joi'
 
 dj.extend(Duration)
 dj.extend(RelativeTime)
@@ -29,3 +30,56 @@ export async function insertLog({ timestamp, host, seconds }) {
   data.seconds += seconds
   await DB.logs.put(data)
 }
+
+export async function clear() {
+  await DB.limits.clear()
+  await DB.logs.clear()
+}
+
+export async function dump() {
+  return {
+    limits: await DB.limits.toArray(),
+    logs: await DB.logs.toArray(),
+  }
+}
+
+export function validate(data) {
+  const schema = Joi.object({
+    limits: Joi.array().items(
+      Joi.object({
+        host: Joi.string(),
+        id: Joi.number(),
+        rules: Joi.array().items(
+          Joi.object({
+            limit: Joi.array().items(Joi.string(), Joi.number()),
+            every: Joi.array().items(Joi.string(), Joi.number()),
+          })
+        ),
+      })
+    ),
+    logs: Joi.array().items(
+      Joi.object({
+        host: Joi.string(),
+        id: Joi.number(),
+        seconds: Joi.number(),
+        timestamp: Joi.string(),
+      })
+    ),
+  })
+
+  const validated = schema.validate(data, { presence: 'required' })
+  return !validated.error
+}
+
+export async function load(data) {
+  if (!validate(data)) throw new Error('Invalid data')
+
+  await clear()
+  await DB.limits.bulkAdd(data.limits)
+  await DB.logs.bulkAdd(
+    data.logs.map((log) => ({
+      ...log,
+      timestamp: new Date(log.timestamp),
+    }))
+  )
+}

src/shared/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
-    <link href="../../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet" />
+    <link href="../../node_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
     <style>
       #root {
         width: 100vw;

src/shared/utils.js

@@ -1,3 +1,5 @@
 import browser from 'webextension-polyfill'
 
 export const dashboard = browser.runtime.getURL('./src/dashboard/index.html')
+
+export const isDev = process.env.NODE_ENV !== 'production'