dsh-usage-badge 0.1.4 → 0.1.5

package/lib/client.js

@@ -38,6 +38,7 @@ window.__ModuleLoader__.load({
     const TABS = [
       { id: 'usage', label: '用量' },
       { id: 'config', label: '单价配置' },
+      { id: 'sync', label: '同步' },
     ]
 
     /**
@@ -56,7 +57,7 @@ window.__ModuleLoader__.load({
      * and in it a write the host does not understand comes back 200 and does nothing. The
      * panel compares this number and says so rather than letting a button look broken.
      */
-    const REQUIRED_HOST_API = 6
+    const REQUIRED_HOST_API = 7
 
     const CSS = `
 .dub-pill{display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:36px;padding:0 8px;border:0;border-radius:12px;background:0 0;color:var(--dsw-alias-label-secondary,#666);font:inherit;font-size:14px;line-height:22px;cursor:pointer;text-align:left}
@@ -1255,6 +1256,12 @@ window.__ModuleLoader__.load({
      */
     let cachedConfig = null
     let cachedOfficial = null
+    /**
+     * The last `/sync` payload, kept for the page's lifetime so returning to the tab renders at once
+     * instead of flashing empty. The tab itself re-reads on every visit *only while a run is in
+     * flight* — a page left open makes no requests.
+     */
+    let cachedSync = null
 
     /** The numeric fields the row editor manages, and how to name them in an error. */
     const ROW_NUMBERS = [
@@ -2102,6 +2109,340 @@ window.__ModuleLoader__.load({
       )
     }
 
+    /**
+     * The 同步 panel.
+     *
+     * Cloud sync is **opt-in and manual**: this panel is the only place it is turned on, and it is the
+     * only place that triggers it (plus one push after the price table changes). There is no polling of
+     * the server — the plugin reaches the network when a person asks it to, which is why the state it
+     * shows is the last run's, verbatim.
+     *
+     * The credential is entered here as plaintext, hashed **by the host half** into the digest HA1 the
+     * server itself stores, and never written down in plaintext anywhere. That is also why the field
+     * comes back empty: the page can say a credential exists, never what it is.
+     */
+    function SyncPanel({ initialSync = null }) {
+      const [status, setStatus] = React.useState(initialSync ?? cachedSync)
+      const [url, setUrl] = React.useState(initialSync?.config?.url ?? '')
+      const [username, setUsername] = React.useState(initialSync?.config?.username ?? '')
+      const [password, setPassword] = React.useState('')
+      const [realm, setRealm] = React.useState(initialSync?.config?.realm ?? '')
+      const [deviceId, setDeviceId] = React.useState(initialSync?.config?.deviceId ?? '')
+      const [windowYears, setWindowYears] = React.useState(String(initialSync?.config?.windowYears ?? 5))
+      const [allowInsecureTls, setAllowInsecureTls] = React.useState(Boolean(initialSync?.config?.allowInsecureTls))
+      const [state, setState] = React.useState('idle')
+      const [note, setNote] = React.useState('')
+      const [devices, setDevices] = React.useState(null)
+      const [runNote, setRunNote] = React.useState('')
+      // The failure verbatim and shown as-is: a sliced string is what once turned a connection error into
+      // a blank line beside the word 失败. Kept beside the state so the state stays a name.
+      const [failNote, setFailNote] = React.useState('')
+
+      const load = React.useCallback(async () => {
+        try {
+          const response = await fetch('/usage-badge/sync', { cache: 'no-store' })
+          if (!response.ok) return null
+          cachedSync = await response.json()
+          setStatus(cachedSync)
+          return cachedSync
+        } catch {
+          return null
+        }
+      }, [])
+
+      React.useEffect(() => {
+        void load()
+      }, [load])
+
+      // While a run is in flight the panel shows what the host is doing, so it asks again. The condition
+      // includes the local `state` on purpose: the host's `running` flag only becomes true once *its* run
+      // has started, and a 立即同步 press would otherwise sit through the whole sync without a single
+      // refresh, looking like a button that did nothing.
+      const running = Boolean(status?.running) || state === 'running'
+      React.useEffect(() => {
+        if (!running) return undefined
+        const timer = setInterval(() => void load(), 2000)
+        return () => clearInterval(timer)
+      }, [running, load])
+
+      const save = async () => {
+        setState('saving')
+        setNote('')
+        setFailNote('')
+        try {
+          const sentPassword = password !== ''
+          const payload = { url, username, realm, deviceId, windowYears: Number(windowYears), allowInsecureTls }
+          if (sentPassword) payload.password = password
+          const response = await fetch('/usage-badge/sync', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(payload),
+          })
+          const body = await response.json()
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`)
+          cachedSync = body
+          setStatus(body)
+          setPassword('')
+          if (body.config?.realm) setRealm(body.config.realm)
+          setState('saved')
+          // Saving only proves the values were accepted, not that they work — so the note says what the
+          // next press is for instead of implying this one settled it.
+          setNote(
+            sentPassword
+              ? '已保存。点「测试连接」能确认地址、用户名、密码都对 —— 连不上时它会把原因说出来。'
+              : '已保存。',
+          )
+        } catch (error) {
+          setState('failed')
+          setFailNote(String(error?.message ?? error))
+        }
+      }
+
+      const test = async () => {
+        setState('testing')
+        setNote('')
+        setFailNote('')
+        try {
+          const response = await fetch('/usage-badge/sync/test', { method: 'POST' })
+          const body = await response.json()
+          if (!body.ok) throw new Error(body.error ?? '连接失败')
+          setDevices(body.devices ?? [])
+          setState('tested')
+          setNote(`连上了：realm ${body.realm ?? '未知'}，DAV ${body.dav || '未声明'}${body.devices?.length ? `，已有 ${body.devices.length} 台设备` : ''}${body.warning ? ` ⚠ ${body.warning}` : ''}`)
+          if (!realm && body.realm) setRealm(body.realm)
+        } catch (error) {
+          setDevices(null)
+          setState('failed')
+          setFailNote(String(error?.message ?? error))
+        }
+      }
+
+      const run = async () => {
+        setState('running')
+        setRunNote('')
+        setFailNote('')
+        try {
+          const response = await fetch('/usage-badge/sync/run', { method: 'POST' })
+          const body = await response.json()
+          // A 500 from the route carries `error`, not `message` — reading only `message` turned a total
+          // failure into a run that reported success with nothing to say.
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`)
+          if (body?.result === 'locked' || body?.result === 'failed') {
+            setRunNote(body.message ?? '')
+            setState('failed')
+            setFailNote(body.message ?? '同步没有进行')
+            return
+          }
+          setRunNote(body.message ?? '')
+          setState('ran')
+          await load()
+        } catch (error) {
+          setRunNote(String(error?.message ?? error))
+          setState('failed')
+          setFailNote(String(error?.message ?? error))
+        }
+      }
+
+      const toggleEnabled = async () => {
+        const next = !status?.config?.enabled
+        setState('saving')
+        setNote('')
+        setFailNote('')
+        try {
+          const response = await fetch('/usage-badge/sync', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ enabled: next }),
+          })
+          const body = await response.json()
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`)
+          cachedSync = body
+          setStatus(body)
+          setState('saved')
+          setNote(next ? '已开启同步。' : '已关闭同步 —— 远端上的东西不会被删掉。')
+        } catch (error) {
+          setState('failed')
+          setFailNote(String(error?.message ?? error))
+        }
+      }
+
+      const config = status?.config ?? {}
+      const remote = Object.entries(status?.remoteDevices ?? {})
+      const published = Object.keys(status?.published ?? {}).length
+      const conflicts = status?.conflictFiles ?? []
+      const last = status?.last ?? {}
+
+      const row = (label, control, hint) =>
+        h(
+          'div',
+          { className: 'dub-form-row', key: label },
+          h('span', { className: 'dub-stat-k' }, label),
+          control,
+          hint ? h('span', { className: 'dub-note' }, hint) : null,
+        )
+
+      return h(
+        'div',
+        { className: 'dub-body' },
+        h(
+          'div',
+          { className: 'dub-block' },
+          h(
+            'div',
+            { className: 'dub-block-head' },
+            h('div', { className: 'dub-block-title' }, '云同步'),
+            h(Info, {
+              text: '把每天的用量与价格表备份到一台 WebDAV 服务器，多台机器互相合并。拉取与合并都在本机完成：远端只存按月压缩的分片，每台机器只写自己那一份，远端从不会因为本机的删除而删除。认证只支持 Digest（bytemark/webdav 这类 Apache 服务端）。',
+            }),
+            h(
+              'button',
+              { className: `dub-btn${config.enabled ? ' dub-btn-primary' : ''}`, onClick: toggleEnabled, disabled: state === 'saving' },
+              config.enabled ? '已开启 · 点此关闭' : '已关闭 · 点此开启',
+            ),
+          ),
+          !status
+            ? h('div', { className: 'dub-note' }, '正在读取同步配置…')
+            : h(
+                'div',
+                { className: 'dub-form' },
+                row(
+                  'WebDAV 地址',
+                  h('input', {
+                    className: 'dub-op',
+                    style: { flex: '1 1 260px' },
+                    value: url,
+                    placeholder: 'http://nas:19347/',
+                    onChange: (event) => setUrl(event.target.value),
+                  }),
+                  '必须以 / 结尾，且指到集合（目录）',
+                ),
+                row('用户名', h('input', { className: 'dub-op', value: username, onChange: (event) => setUsername(event.target.value) })),
+                row(
+                  '密码',
+                  h('input', {
+                    className: 'dub-op',
+                    type: 'password',
+                    value: password,
+                    placeholder: config.hasCredential ? `已配置（${config.credentialPrefix}…），留空则不改` : '只用于当场算出 HA1',
+                    onChange: (event) => setPassword(event.target.value),
+                  }),
+                  '明文不会落盘：宿主半立刻算成服务端同款的 HA1',
+                ),
+                row(
+                  '设备',
+                  h('input', {
+                    className: 'dub-op',
+                    list: 'dub-sync-devices',
+                    value: deviceId,
+                    placeholder: '重装后填回原来的设备名即可接着同一台记',
+                    onChange: (event) => setDeviceId(event.target.value),
+                  }),
+                  devices ? `远端已有：${devices.join('、') || '（还没有）'}` : '点「测试连接」可以列出远端已有的设备',
+                ),
+                h('datalist', { id: 'dub-sync-devices' }, (devices ?? []).map((name) => h('option', { key: name, value: name }))),
+                row(
+                  '首次拉取',
+                  h('input', {
+                    className: 'dub-op',
+                    style: { width: '72px' },
+                    value: windowYears,
+                    onChange: (event) => setWindowYears(event.target.value),
+                  }),
+                  '年内（0 = 全都要）；只影响拉取，不影响保留',
+                ),
+                row(
+                  '自签名证书',
+                  h('input', {
+                    type: 'checkbox',
+                    checked: allowInsecureTls,
+                    onChange: (event) => setAllowInsecureTls(event.target.checked),
+                  }),
+                  'HTTPS 但证书不受信任时才勾',
+                ),
+                h(
+                  'div',
+                  { className: 'dub-form-actions' },
+                  h('button', { className: 'dub-btn dub-btn-primary', onClick: save, disabled: state === 'saving' }, '保存'),
+                  h('button', { className: 'dub-btn', onClick: test, disabled: state === 'testing' }, '测试连接'),
+                  h(
+                    'button',
+                    {
+                      className: 'dub-btn',
+                      onClick: run,
+                      disabled: state === 'running' || !config.hasCredential || !config.enabled,
+                      title: config.enabled ? '' : '先开启同步',
+                    },
+                    running ? '同步中…' : '立即同步',
+                  ),
+                ),
+              ),
+          state === 'failed' ? h('div', { className: 'dub-warn' }, `失败：${failNote || '未知错误'}`) : null,
+          // The device name is not a label, it is the directory the shards go in. Two installations
+          // using one name would overwrite each other's months with no error at all, so this says it in
+          // place, next to the field that has to change, rather than only in the log.
+          status?.collision
+            ? h(
+                'div',
+                { className: 'dub-warn' },
+                `设备名「${status.collision.device}」已经被另一台机器占用` +
+                  (status.collision.owner ? `（那台的标识是 ${status.collision.owner}）` : '') +
+                  ' —— 同名会互相覆盖分片，所以这台机器拒绝发布。要么把上面的「设备」改成一个没用过的名字，要么去服务器上删掉 ' +
+                  `usage-badge/${status.collision.device}/ 再来（删之前确认里面没有你还要的历史）。`,
+              )
+            : null,
+          // The note is shown for every outcome that has one — the test result included. (It used to be
+          // dropped for `tested`, so a successful connection check rendered an empty line, and a failure
+          // was sliced out of the state name, which rendered blank whenever the message was empty.)
+          state === 'ran' && runNote
+            ? h('div', { className: 'dub-note' }, runNote)
+            : (state === 'saved' || state === 'tested') && note
+              ? h('div', { className: 'dub-note' }, note)
+              : null,
+        ),
+        h(
+          'div',
+          { className: 'dub-block' },
+          h('div', { className: 'dub-block-head' }, h('div', { className: 'dub-block-title' }, '状态')),
+          status?.lock
+            ? h('div', { className: 'dub-warn' }, `这个数据目录正被另一个 DSH 实例使用（pid ${status.lock.owner?.pid ?? '?'}），本实例只读：${status.lock.reason ?? ''}`)
+            : null,
+          h(
+            'div',
+            { className: 'dub-stats' },
+            h('div', { className: 'dub-stat' }, h('div', { className: 'dub-stat-k' }, '上次同步'), h('div', { className: 'dub-stat-v' }, last.at ? new Date(last.at).toLocaleString() : '从未')),
+            h('div', { className: 'dub-stat' }, h('div', { className: 'dub-stat-k' }, '结果'), h('div', { className: 'dub-stat-v' }, last.result ?? '—')),
+            h('div', { className: 'dub-stat' }, h('div', { className: 'dub-stat-k' }, '已经发布的月份'), h('div', { className: 'dub-stat-v' }, String(published))),
+          ),
+          last.message ? h('div', { className: 'dub-note' }, last.message) : null,
+          h('div', { className: 'dub-note' }, `本机设备名：${config.deviceId || '（保存后生成）'}${config.hasCredential ? ' · 凭据已配置' : ' · 还没有凭据'}`),
+          // Two different counts, both useful and easy to confuse: what this device has actually read
+          // (which is what makes the numbers) and what the server holds (which says whether every other
+          // machine has managed to publish).
+          h('div', { className: 'dub-note' }, `本机已读到的远端月份：${remote.length ? remote.map(([name, count]) => `${name}（${count} 个月）`).join('、') : '（还没有读到）'}`),
+          h(
+            'div',
+            { className: 'dub-note' },
+            `服务器上的设备：${
+              status?.remoteDevicesOnServer?.length
+                ? status.remoteDevicesOnServer.join('、')
+                : status?.remoteError
+                  ? `（读不到：${status.remoteError}）`
+                  : '（还没有问过服务器）'
+            }`,
+          ),
+          conflicts.length
+            ? h('div', { className: 'dub-warn' }, `价格表冲突过：本目录留着 ${conflicts.join('、')} —— 两边的价格表都被保留，请自己挑一份合进 pricing.json`)
+            : null,
+          h(
+            'div',
+            { className: 'dub-note' },
+            '远端所有设备的历史都会合并，统计的是它们的合计；选「设备」只决定这台机器把新数据写进哪个分区。日粒度仍只显示最近 430 天，更早的在「按年」里。',
+          ),
+          h('div', { className: 'dub-note' }, `配置文件：${status?.paths?.sync ?? ''}`),
+        ),
+      )
+    }
+
     function UsageDialog({
       snapshot,
       onClose,
@@ -2114,6 +2455,7 @@ window.__ModuleLoader__.load({
       initialYear = null,
       initialYearData = null,
       initialEdit = null,
+      initialSync = null,
     }) {
       const [tab, setTab] = React.useState(initialTab)
       const [config, setConfig] = React.useState(initialConfig ?? cachedConfig)
@@ -2198,7 +2540,9 @@ window.__ModuleLoader__.load({
           // pressed (`cachedOfficial` doubles as the "has it been fetched" flag).
           tab === 'usage'
             ? h(UsagePanel, { snapshot, initialRange, initialHidden, initialYear, initialYearData })
-            : h(ConfigPanel, { snapshot, reload, initialConfig, initialOfficial, initialEdit }),
+            : tab === 'sync'
+              ? h(SyncPanel, { initialSync: initialSync ?? cachedSync })
+              : h(ConfigPanel, { snapshot, reload, initialConfig, initialOfficial, initialEdit }),
         ),
       )
     }
@@ -2230,6 +2574,7 @@ window.__ModuleLoader__.load({
       initialYear = null,
       initialYearData = null,
       initialEdit = null,
+      initialSync = null,
     } = {}) {
       const [snapshot, setSnapshot] = React.useState(initialSnapshot)
       const [failed, setFailed] = React.useState(false)
@@ -2280,7 +2625,7 @@ window.__ModuleLoader__.load({
           h('span', { className: 'dub-pill-amount' }, text),
         ),
         open && snapshot
-          ? h(UsageDialog, { snapshot, onClose: () => setOpen(false), reload: load, initialTab, initialConfig, initialOfficial, initialRange, initialHidden, initialYear, initialYearData, initialEdit })
+          ? h(UsageDialog, { snapshot, onClose: () => setOpen(false), reload: load, initialTab, initialConfig, initialOfficial, initialRange, initialHidden, initialYear, initialYearData, initialEdit, initialSync })
           : null,
       )
     }

package/lib/fold.js

@@ -22,7 +22,7 @@ import { homedir } from 'node:os'
 import { join, resolve } from 'node:path'
 import { zstdDecompressSync } from 'node:zlib'
 
-import { addBucket, emptyBucket, UNKNOWN } from './buckets.js'
+import { addBucket, emptyBucket, LOCAL_SOURCE, resolveRows, UNKNOWN } from './buckets.js'
 import { dayKey, localHour } from './pricing.js'
 
 export { UNKNOWN }
@@ -298,6 +298,10 @@ export function createAggregator({ sessionsRoot, store, log = () => {} }) {
    * show. Sessions whose days all fall outside the window still come back — with their
    * cursor, so their logs are never folded again — just without the buckets that no view
    * asks for. Their rows stay in the store.
+   *
+   * The store has already resolved the copies it may hold for a `(session, date)` down to the
+   * fuller log version; what arrives here is the merged view, with the raw `rows` alongside for
+   * anything that needs to know where a day came from.
    */
   function loadCache() {
     let loaded
@@ -367,7 +371,21 @@ export function createAggregator({ sessionsRoot, store, log = () => {} }) {
       // ones on the way past. Leaving the cursor untouched also means the next refresh retries the
       // fold, which is what a transient read failure wants.
       if (record && record !== previous) {
-        records.set(sessionId, record)
+        folded++
+        // Written back one session at a time, right here: a save costs the changed session's
+        // days, not the whole history, so there is nothing to batch and no timer to lose it in.
+        //
+        // What the store hands back is what this process must go on believing. It is normally
+        // the fold just produced, but when the log got shorter the store keeps the fuller copy
+        // it already had — and then *that* is the truth, because the whole point of the row
+        // model is that a shortened log cannot make history disappear.
+        let effective = record
+        try {
+          effective = store.put(record, { source: LOCAL_SOURCE }) ?? record
+        } catch (error) {
+          log(`cache write failed for ${sessionId}: ${error?.message ?? error}`)
+        }
+        records.set(sessionId, effective)
         cursors.set(sessionId, {
           seq: record.seq,
           provider: record.provider,
@@ -376,14 +394,6 @@ export function createAggregator({ sessionsRoot, store, log = () => {} }) {
           fileMtimeMs: record.fileMtimeMs,
           path: record.path,
         })
-        folded++
-        // Written back one session at a time, right here: a save costs the changed session's
-        // days, not the whole history, so there is nothing to batch and no timer to lose it in.
-        try {
-          store.put(record)
-        } catch (error) {
-          log(`cache write failed for ${sessionId}: ${error?.message ?? error}`)
-        }
       }
       if (++sinceYield >= YIELD_EVERY) {
         sinceYield = 0