diff --git a/products/logs/frontend/LogsScene.tsx b/products/logs/frontend/LogsScene.tsx
index 82f3ee269d73f..0d027ed0bfd06 100644
--- a/products/logs/frontend/LogsScene.tsx
+++ b/products/logs/frontend/LogsScene.tsx
@@ -28,6 +28,7 @@ import { Sparkline } from 'lib/components/Sparkline'
import { TZLabel, TZLabelProps } from 'lib/components/TZLabel'
import { ListHog } from 'lib/components/hedgehogs'
import { LemonField } from 'lib/lemon-ui/LemonField'
+import { humanFriendlyNumber } from 'lib/utils'
import { cn } from 'lib/utils/css-classes'
import { Scene, SceneExport } from 'scenes/sceneTypes'
import { sceneConfigurations } from 'scenes/scenes'
@@ -67,6 +68,8 @@ export function LogsScene(): JSX.Element {
isPinned,
hasMoreLogsToLoad,
logsPageSize,
+ totalLogsMatchingFilters,
+ logsRemainingToLoad,
} = useValues(logsLogic)
const { runQuery, setDateRangeFromSparkline, loadMoreLogs } = useActions(logsLogic)
@@ -172,10 +175,10 @@ export function LogsScene(): JSX.Element {
disabled={!hasMoreLogsToLoad || logsLoading}
>
{logsLoading
- ? `Loading up to ${logsPageSize} more logs...`
+ ? 'Loading more logs...'
: hasMoreLogsToLoad
- ? `Showing first ${parsedLogs.length} ${parsedLogs.length === 1 ? 'entry' : 'entries'} – load up to ${logsPageSize} more`
- : `Showing all ${parsedLogs.length} ${parsedLogs.length === 1 ? 'entry' : 'entries'}`}
+ ? `Showing ${humanFriendlyNumber(parsedLogs.length)} of ${humanFriendlyNumber(totalLogsMatchingFilters)} logs – click to load ${humanFriendlyNumber(Math.min(logsPageSize, logsRemainingToLoad))} more`
+ : `Showing all ${humanFriendlyNumber(parsedLogs.length)} logs`}
)}
@@ -449,7 +452,15 @@ const Filters = (): JSX.Element => {
}
const DisplayOptions = (): JSX.Element => {
- const { orderBy, wrapBody, prettifyJson, timestampFormat, logsPageSize } = useValues(logsLogic)
+ const {
+ orderBy,
+ wrapBody,
+ prettifyJson,
+ timestampFormat,
+ logsPageSize,
+ totalLogsMatchingFilters,
+ sparklineLoading,
+ } = useValues(logsLogic)
const { setOrderBy, setWrapBody, setPrettifyJson, setTimestampFormat, setLogsPageSize } = useActions(logsLogic)
return (
@@ -490,20 +501,25 @@ const DisplayOptions = (): JSX.Element => {
]}
/>
-