feat(logs): Add confidence footer for logs #96696
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import usePrevious from 'sentry/utils/usePrevious'; | ||
|
|
||
| export function usePreviouslyLoaded<T>(current: T, isLoading: boolean): T { | ||
| const previous = usePrevious(current, isLoading); | ||
| return isLoading ? previous : current; | ||
| } | ||
|
|
||
| export const Container = styled('span')` | ||
| color: ${p => p.theme.subText}; | ||
| font-size: ${p => p.theme.fontSize.sm}; | ||
| `; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import {Tooltip} from 'sentry/components/core/tooltip'; | ||
| import Count from 'sentry/components/count'; | ||
| import {t, tct} from 'sentry/locale'; | ||
| import type {Confidence} from 'sentry/types/organization'; | ||
| import {defined} from 'sentry/utils'; | ||
| import { | ||
| Container, | ||
| usePreviouslyLoaded, | ||
| } from 'sentry/views/explore/components/chart/chartFooter'; | ||
| import type {ChartInfo} from 'sentry/views/explore/components/chart/types'; | ||
|
|
||
| interface ConfidenceFooterProps { | ||
| chartInfo: ChartInfo; | ||
| isLoading: boolean; | ||
| } | ||
|
|
||
| export function ConfidenceFooter({ | ||
| chartInfo: currentChartInfo, | ||
| isLoading, | ||
| }: ConfidenceFooterProps) { | ||
| const chartInfo = usePreviouslyLoaded(currentChartInfo, isLoading); | ||
| return ( | ||
| <Container> | ||
| <ConfidenceMessage | ||
| confidence={chartInfo.confidence} | ||
| dataScanned={chartInfo.dataScanned} | ||
| isSampled={chartInfo.isSampled} | ||
| sampleCount={chartInfo.sampleCount} | ||
| topEvents={chartInfo.topEvents} | ||
| /> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| interface ConfidenceMessageProps { | ||
| confidence?: Confidence; | ||
| dataScanned?: 'full' | 'partial'; | ||
| isSampled?: boolean | null; | ||
| sampleCount?: number; | ||
| topEvents?: number; | ||
| } | ||
|
|
||
| export function ConfidenceMessage({ | ||
| sampleCount, | ||
| dataScanned, | ||
| confidence, | ||
| topEvents, | ||
| isSampled, | ||
| }: ConfidenceMessageProps) { | ||
| const isTopN = defined(topEvents) && topEvents > 1; | ||
|
|
||
| if (!defined(sampleCount)) { | ||
| return isTopN | ||
| ? t('* Top %s groups extrapolated based on \u2026', topEvents) | ||
| : t('* Extrapolated based on \u2026'); | ||
| } | ||
|
|
||
| const noSampling = defined(isSampled) && !isSampled; | ||
| const sampleCountComponent = <Count value={sampleCount} />; | ||
|
|
||
| if (dataScanned === 'full') { | ||
| // For logs, if the full data was scanned, we can assume that no | ||
| // extrapolation happened and we should remove mentions of extrapolation. | ||
| if (isTopN) { | ||
| return tct('Top [topEvents] groups based on [sampleCountComponent] logs', { | ||
| topEvents, | ||
| sampleCountComponent, | ||
| }); | ||
| } | ||
|
|
||
| return tct('Based on [sampleCountComponent] logs', { | ||
| sampleCountComponent, | ||
| }); | ||
| } | ||
|
|
||
| if (confidence === 'low') { | ||
| const lowAccuracyFullSampleCount = <LowAccuracyFullTooltip noSampling={noSampling} />; | ||
|
|
||
| if (isTopN) { | ||
| return tct( | ||
| 'Top [topEvents] groups extrapolated based on [tooltip:[sampleCountComponent] logs]', | ||
| { | ||
| topEvents, | ||
| tooltip: lowAccuracyFullSampleCount, | ||
| sampleCountComponent, | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| return tct('Extrapolated based on [tooltip:[sampleCountComponent] logs]', { | ||
| tooltip: lowAccuracyFullSampleCount, | ||
| sampleCountComponent, | ||
| }); | ||
| } | ||
|
|
||
| if (isTopN) { | ||
| return tct( | ||
| 'Top [topEvents] groups extrapolated based on [sampleCountComponent] logs', | ||
| { | ||
| topEvents, | ||
| sampleCountComponent, | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| return tct('Extrapolated based on [sampleCountComponent] logs', { | ||
| sampleCountComponent, | ||
| }); | ||
| } | ||
|
|
||
| function LowAccuracyFullTooltip({ | ||
| noSampling, | ||
| children, | ||
| }: { | ||
| noSampling: boolean; | ||
| children?: React.ReactNode; | ||
| }) { | ||
| return ( | ||
| <Tooltip | ||
| title={ | ||
| <div> | ||
| {t( | ||
| 'You may not have enough logs for a high accuracy extrapolation of your query.' | ||
| )} | ||
| <br /> | ||
| <br /> | ||
| {t( | ||
| "You can try adjusting your query by narrowing the date range, removing filters or increasing the chart's time interval." | ||
| )} | ||
| <br /> | ||
| <br /> | ||
| {t( | ||
| 'You can also increase your sampling rates to get more samples and accurate trends.' | ||
| )} | ||
| </div> | ||
| } | ||
| disabled={noSampling} | ||
| maxWidth={270} | ||
| showUnderline | ||
| > | ||
| {children} | ||
| </Tooltip> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Inconsistent Empty GroupBy Handling
An inconsistency exists in how an empty
groupBystring is handled.logsGraph.tsxincorrectly treats an emptygroupBystring as a valid grouping field (due todefined(groupBy)), enabling "Top X groups" mode and displaying misleading UI. This conflicts withlogsTab.tsx's logic (groupBy ? TOP_EVENTS_LIMIT : undefined), which correctly treats an empty string as no grouping, leading to potentially incorrect chart configurations.Locations (2)
static/app/views/explore/logs/logsTab.tsx#L174-L175static/app/views/explore/logs/logsGraph.tsx#L43-L56