feat(alerts): toggle alert threshold lines

frontend/src/lib/components/Alerts/insightAlertsLogic.ts

@@ -35,6 +35,7 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
 
     connect((props: InsightAlertsLogicProps) => ({
         actions: [insightVizDataLogic(props.insightLogicProps), ['setQuery']],
+        values: [insightVizDataLogic(props.insightLogicProps), ['showAlertThresholdLines']],
     })),
 
     loaders(({ props }) => ({
@@ -62,10 +63,11 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
 
     selectors({
         alertThresholdLines: [
-            (s) => [s.alerts],
-            (alerts: AlertType[]): GoalLine[] =>
+            (s) => [s.alerts, s.showAlertThresholdLines],
+            (alerts: AlertType[], showAlertThresholdLines: boolean): GoalLine[] =>
                 alerts.flatMap((alert) => {
                     if (
+                        !showAlertThresholdLines ||
                         alert.threshold.configuration.type !== InsightThresholdType.ABSOLUTE ||
                         alert.condition.type !== AlertConditionType.ABSOLUTE_VALUE ||
                         !alert.threshold.configuration.bounds
@@ -76,14 +78,14 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
                     const bounds = alert.threshold.configuration.bounds
 
                     const thresholds = []
-                    if (bounds?.upper !== undefined) {
+                    if (bounds?.upper != null) {
                         thresholds.push({
                             label: `${alert.name} Upper Threshold`,
                             value: bounds?.upper,
                         })
                     }
 
-                    if (bounds?.lower !== undefined) {
+                    if (bounds?.lower != null) {
                         thresholds.push({
                             label: `${alert.name} Lower Threshold`,
                             value: bounds?.lower,

frontend/src/lib/components/Alerts/views/Alerts.tsx

@@ -3,6 +3,7 @@ import { IconCheck } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
+import { FeedbackNotice } from 'lib/components/FeedbackNotice'
 import { DetectiveHog } from 'lib/components/hedgehogs'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
@@ -104,6 +105,8 @@ export function Alerts({ alertId }: AlertsProps): JSX.Element {
     // TODO: add info here to sign up for alerts early access
     return (
         <>
+            <FeedbackNotice text="Alerts are in closed alpha. Thanks for taking part! We'd love to hear what you think." />
+
             {alertsSortedByState.length === 0 && !alertsLoading && (
                 <ProductIntroduction
                     productName="Alerts"

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts

@@ -392,6 +392,7 @@ export const trendsFilterToQuery = (filters: Partial<TrendsFilterType>): TrendsF
     return objectCleanWithEmpty({
         smoothingIntervals: filters.smoothing_intervals,
         showLegend: filters.show_legend,
+        showAlertThresholdLines: filters.show_alert_threshold_lines,
         hiddenLegendIndexes: hiddenLegendKeysToIndexes(filters.hidden_legend_keys),
         aggregationAxisFormat: filters.aggregation_axis_format,
         aggregationAxisPrefix: filters.aggregation_axis_prefix,

frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx

@@ -14,6 +14,7 @@ import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { axisLabel } from 'scenes/insights/aggregationAxisFormat'
 import { PercentStackViewFilter } from 'scenes/insights/EditorFilters/PercentStackViewFilter'
 import { ScalePicker } from 'scenes/insights/EditorFilters/ScalePicker'
+import { ShowAlertThresholdLinesFilter } from 'scenes/insights/EditorFilters/ShowAlertThresholdLinesFilter'
 import { ShowLegendFilter } from 'scenes/insights/EditorFilters/ShowLegendFilter'
 import { ValueOnSeriesFilter } from 'scenes/insights/EditorFilters/ValueOnSeriesFilter'
 import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter'
@@ -77,6 +78,7 @@ export function InsightDisplayConfig(): JSX.Element {
                           ...(supportsValueOnSeries ? [{ label: () => <ValueOnSeriesFilter /> }] : []),
                           ...(supportsPercentStackView ? [{ label: () => <PercentStackViewFilter /> }] : []),
                           ...(hasLegend ? [{ label: () => <ShowLegendFilter /> }] : []),
+                          { label: () => <ShowAlertThresholdLinesFilter /> },
                       ],
                   },
               ]

frontend/src/queries/schema.json

@@ -11468,6 +11468,10 @@
                     },
                     "type": "array"
                 },
+                "showAlertThresholdLines": {
+                    "default": false,
+                    "type": "boolean"
+                },
                 "showLabelsOnSeries": {
                     "type": "boolean"
                 },
@@ -11538,6 +11542,9 @@
                     },
                     "type": "object"
                 },
+                "show_alert_threshold_lines": {
+                    "type": "boolean"
+                },
                 "show_labels_on_series": {
                     "type": "boolean"
                 },

frontend/src/queries/schema.ts

@@ -834,6 +834,8 @@ export type TrendsFilter = {
     display?: TrendsFilterLegacy['display']
     /** @default false */
     showLegend?: TrendsFilterLegacy['show_legend']
+    /** @default false */
+    showAlertThresholdLines?: boolean
     breakdown_histogram_bin_count?: TrendsFilterLegacy['breakdown_histogram_bin_count'] // TODO: fully move into BreakdownFilter
     /** @default numeric */
     aggregationAxisFormat?: TrendsFilterLegacy['aggregation_axis_format']

frontend/src/queries/utils.ts

@@ -301,6 +301,13 @@ export const getShowLegend = (query: InsightQueryNode): boolean | undefined => {
     return undefined
 }
 
+export const getShowAlertThresholdLines = (query: InsightQueryNode): boolean | undefined => {
+    if (isTrendsQuery(query)) {
+        return query.trendsFilter?.showAlertThresholdLines
+    }
+    return undefined
+}
+
 export const getShowLabelsOnSeries = (query: InsightQueryNode): boolean | undefined => {
     if (isTrendsQuery(query)) {
         return query.trendsFilter?.showLabelsOnSeries

frontend/src/scenes/insights/EditorFilters/ShowAlertThresholdLinesFilter.tsx

@@ -0,0 +1,25 @@
+import { LemonCheckbox } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { insightVizDataLogic } from '../insightVizDataLogic'
+
+export function ShowAlertThresholdLinesFilter(): JSX.Element | null {
+    const { insightProps } = useValues(insightLogic)
+    const { showAlertThresholdLines } = useValues(insightVizDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
+
+    const toggleShowAlertThresholdLines = (): void => {
+        updateInsightFilter({ showAlertThresholdLines: !showAlertThresholdLines })
+    }
+
+    return (
+        <LemonCheckbox
+            className="p-1 px-2"
+            onChange={toggleShowAlertThresholdLines}
+            checked={!!showAlertThresholdLines}
+            label={<span className="font-normal">Show alert threshold lines</span>}
+            size="small"
+        />
+    )
+}

frontend/src/scenes/insights/insightVizDataLogic.ts

@@ -44,6 +44,7 @@ import {
     getFormula,
     getInterval,
     getSeries,
+    getShowAlertThresholdLines,
     getShowLabelsOnSeries,
     getShowLegend,
     getShowPercentStackView,
@@ -158,6 +159,7 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         interval: [(s) => [s.querySource], (q) => (q ? getInterval(q) : null)],
         properties: [(s) => [s.querySource], (q) => (q ? q.properties : null)],
         samplingFactor: [(s) => [s.querySource], (q) => (q ? q.samplingFactor : null)],
+        showAlertThresholdLines: [(s) => [s.querySource], (q) => (q ? getShowAlertThresholdLines(q) : null)],
         showLegend: [(s) => [s.querySource], (q) => (q ? getShowLegend(q) : null)],
         showValuesOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValuesOnSeries(q) : null)],
         showLabelOnSeries: [(s) => [s.querySource], (q) => (q ? getShowLabelsOnSeries(q) : null)],

frontend/src/types.ts

@@ -2242,6 +2242,7 @@ export interface TrendsFilterType extends FilterType {
     breakdown_histogram_bin_count?: number // trends breakdown histogram bin count
 
     // frontend only
+    show_alert_threshold_lines?: boolean // used to show/hide horizontal lines on insight representing alert thresholds set on the insight
     show_legend?: boolean // used to show/hide legend next to insights graph
     hidden_legend_keys?: Record<string, boolean | undefined> // used to toggle visibilities in table and legend
     aggregation_axis_format?: AggregationAxisFormat // a fixed format like duration that needs calculation

posthog/hogql_queries/legacy_compatibility/filter_to_query.py

@@ -400,6 +400,7 @@ def _insight_filter(filter: dict):
             "trendsFilter": TrendsFilter(
                 smoothingIntervals=filter.get("smoothing_intervals"),
                 showLegend=filter.get("show_legend"),
+                showAlertThresholdLines=filter.get("show_alert_threshold_lines"),
                 hiddenLegendIndexes=hidden_legend_keys_to_indexes(filter.get("hidden_legend_keys")),
                 aggregationAxisFormat=filter.get("aggregation_axis_format"),
                 aggregationAxisPrefix=filter.get("aggregation_axis_prefix"),

posthog/schema.py

@@ -1387,6 +1387,7 @@ class TrendsFilter(BaseModel):
     display: Optional[ChartDisplayType] = ChartDisplayType.ACTIONS_LINE_GRAPH
     formula: Optional[str] = None
     hiddenLegendIndexes: Optional[list[int]] = None
+    showAlertThresholdLines: Optional[bool] = False
     showLabelsOnSeries: Optional[bool] = None
     showLegend: Optional[bool] = False
     showPercentStackView: Optional[bool] = False
@@ -1409,6 +1410,7 @@ class TrendsFilterLegacy(BaseModel):
     display: Optional[ChartDisplayType] = None
     formula: Optional[str] = None
     hidden_legend_keys: Optional[dict[str, Union[bool, Any]]] = None
+    show_alert_threshold_lines: Optional[bool] = None
     show_labels_on_series: Optional[bool] = None
     show_legend: Optional[bool] = None
     show_percent_stack_view: Optional[bool] = None