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 => { ]} /> - - setLogsPageSize(value)} - size="small" - type="secondary" - options={[ - { value: 100, label: '100' }, - { value: 200, label: '200' }, - { value: 500, label: '500' }, - { value: 1000, label: '1000' }, - ]} - /> - +
+ {!sparklineLoading && totalLogsMatchingFilters > 0 && ( + {humanFriendlyNumber(totalLogsMatchingFilters)} logs + )} + + setLogsPageSize(value)} + size="small" + type="secondary" + options={[ + { value: 100, label: '100' }, + { value: 200, label: '200' }, + { value: 500, label: '500' }, + { value: 1000, label: '1000' }, + ]} + /> + +
) } diff --git a/products/logs/frontend/logsLogic.tsx b/products/logs/frontend/logsLogic.tsx index 75dda734097b7..21baf71f57c8a 100644 --- a/products/logs/frontend/logsLogic.tsx +++ b/products/logs/frontend/logsLogic.tsx @@ -589,6 +589,14 @@ export const logsLogic = kea([ return newest }, ], + totalLogsMatchingFilters: [ + (s) => [s.sparkline], + (sparkline): number => sparkline.reduce((sum, item) => sum + item.count, 0), + ], + logsRemainingToLoad: [ + (s) => [s.totalLogsMatchingFilters, s.logs], + (totalLogsMatchingFilters, logs): number => Math.max(0, totalLogsMatchingFilters - logs.length), + ], })), listeners(({ values, actions }) => ({