admin/monitor: download progress rejetto#273

mir355 · Jun 30, 2023 · 2305fd5 · 2305fd5
1 parent f908dac
commit 2305fd5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/admin/src/MonitorPage.ts b/admin/src/MonitorPage.ts
@@ -3,7 +3,7 @@
 import _ from "lodash"
 import { createElement as h, useMemo, Fragment, useState } from "react"
 import { apiCall, useApiEvents, useApiEx, useApiList } from "./api"
-import { PauseCircle, PlayCircle, Delete, Lock, Block, FolderZip, Upload } from '@mui/icons-material'
+import { PauseCircle, PlayCircle, Delete, Lock, Block, FolderZip, Upload, Download } from '@mui/icons-material'
 import { Alert, Box, Chip, ChipProps } from '@mui/material'
 import { DataGrid } from "@mui/x-data-grid"
 import { formatBytes, IconBtn, IconProgress, iconTooltip, manipulateConfig, useBreakpoint } from "./misc"
@@ -118,9 +118,10 @@ function Connections() {
                         h(Box, { ml: 2, color: 'text.secondary' }, value)
                     )
                 const i = value?.lastIndexOf('/')
+                const progress = row.uploadProgress ?? row.downloadProgress
                 return h(Fragment, {},
-                    row.uploadProgress !== undefined
-                        && h(IconProgress, { icon: Upload, progress: row.uploadProgress, sx: { mr: 1 } }),
+                    progress !== undefined
+                        && h(IconProgress, { icon: row.uploadProgress ? Upload : Download, progress, sx: { mr: 1 } }),
                     value.slice(i + 1),
                     i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i))
                 )
@@ -144,7 +145,7 @@ function Connections() {
         },
         {
             field: 'sent',
-            headerName: "Total",
+            headerName: "Sent",
             type: 'number',
             renderCell: ({ value, row}) => formatBytes(Math.max(value||0, row.got||0))
         },

diff --git a/src/api.monitor.ts b/src/api.monitor.ts
@@ -75,6 +75,7 @@ const apis: ApiHandlers = {
                 v: (socket.remoteFamily?.endsWith('6') ? 6 : 4),
                 got: socket.bytesRead,
                 sent: socket.bytesWritten,
+                downloadProgress: conn.downloadProgress,
                 started,
                 secure: (secure || undefined) as boolean|undefined, // undefined will save some space once json-ed
                 ...fromCtx(conn.ctx),

diff --git a/src/connections.ts b/src/connections.ts
@@ -7,10 +7,11 @@ import _ from 'lodash'
 
 export class Connection {
     readonly started = new Date()
-    sent = 0
+    sent = 0 // socket-scoped, not request-scoped
     got = 0
     outSpeed?: number
     inSpeed?: number
+    downloadProgress?: number
     uploadProgress?: number
     uploadPath?: string
     ctx?: Koa.Context

diff --git a/src/throttler.ts b/src/throttler.ts
@@ -49,13 +49,17 @@ export const throttler: Koa.Middleware = async (ctx, next) => {
     const update = _.debounce(() => {
         const ts = conn[SymThrStr] as ThrottledStream
         const outSpeed = roundSpeed(ts.getSpeed())
-        updateConnection(conn, { outSpeed, sent: ts.getBytesSent() })
+        updateConnection(conn, {
+            outSpeed,
+            sent: conn.socket.bytesWritten,
+            downloadProgress: ts.getBytesSent() / downloadTotal,
+        })
         /* in case this stream stands still for a while (before the end), we'll have neither 'sent' or 'close' events,
         * so who will take care to updateConnection? This artificial next-call will ensure just that */
         clearTimeout(conn[SymTimeout])
         if (outSpeed || !closed)
             conn[SymTimeout] = setTimeout(update, DELAY)
-    }, DELAY, { maxWait:DELAY })
+    }, DELAY, { leading: true, maxWait:DELAY })
     ts.on('sent', (n: number) => {
         totalSent += n
         update()
@@ -70,11 +74,11 @@ export const throttler: Koa.Middleware = async (ctx, next) => {
         delete ip2group[ctx.ip]
     })
 
-    const bak = ctx.response.length // preserve
+    const downloadTotal: number = ctx.response.length
     ctx.body = ctx.body.pipe(ts)
 
-    if (bak)
-        ctx.response.length = bak
+    if (downloadTotal)  // preserve this info
+        ctx.response.length = downloadTotal
     ts.once('end', () => // in case of compressed response, we offer calculation of real size
         ctx.state.length = ts.getBytesSent())
 }