feat(alerts): Alert goal lines + product intro (#25391)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

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

@@ -14,7 +14,6 @@ export function AlertDeletionWarning(): JSX.Element | null {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { shouldShowAlertDeletionWarning } = useValues(
         insightAlertsLogic({
-            insightShortId: insight.short_id,
             insightId: insight.id as number,
             insightLogicProps: insightProps,
         })

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

@@ -1,10 +1,10 @@
-import { afterMount, connect, kea, path, selectors } from 'kea'
+import { afterMount, kea, path, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 
 import { AlertState } from '~/queries/schema'
 
-import { alertLogic, AlertLogicProps } from './alertLogic'
+import { AlertLogicProps } from './alertLogic'
 import type { alertsLogicType } from './alertsLogicType'
 import { AlertType } from './types'
 
@@ -13,10 +13,6 @@ export interface AlertsLogicProps extends AlertLogicProps {}
 export const alertsLogic = kea<alertsLogicType>([
     path(['lib', 'components', 'Alerts', 'alertsLogic']),
 
-    connect((props: AlertsLogicProps) => ({
-        values: [alertLogic(props), ['alert', 'alertLoading']],
-    })),
-
     loaders({
         alerts: {
             __default: [] as AlertType[],

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

@@ -1,17 +1,17 @@
-import { actions, afterMount, connect, kea, key, listeners, path, props, reducers } from 'kea'
+import { actions, afterMount, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
+import { GoalLine } from '~/queries/schema'
 import { getBreakdown, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
-import { InsightLogicProps, InsightShortId } from '~/types'
+import { InsightLogicProps } from '~/types'
 
 import type { insightAlertsLogicType } from './insightAlertsLogicType'
 import { AlertType } from './types'
 
 export interface InsightAlertsLogicProps {
     insightId: number
-    insightShortId: InsightShortId
     insightLogicProps: InsightLogicProps
 }
 
@@ -60,6 +60,34 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
         ],
     }),
 
+    selectors({
+        alertThresholdLines: [
+            (s) => [s.alerts],
+            (alerts: AlertType[]): GoalLine[] =>
+                alerts.flatMap((alert) => {
+                    const thresholds = []
+
+                    const absoluteThreshold = alert.threshold.configuration.absoluteThreshold
+
+                    if (absoluteThreshold?.upper !== undefined) {
+                        thresholds.push({
+                            label: `${alert.name} Upper Threshold`,
+                            value: absoluteThreshold?.upper,
+                        })
+                    }
+
+                    if (absoluteThreshold?.lower !== undefined) {
+                        thresholds.push({
+                            label: `${alert.name} Lower Threshold`,
+                            value: absoluteThreshold?.lower,
+                        })
+                    }
+
+                    return thresholds
+                }),
+        ],
+    }),
+
     listeners(({ actions, values }) => ({
         deleteAlert: async ({ alertId }) => {
             await api.alerts.delete(alertId)

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

@@ -3,11 +3,15 @@ import { IconCheck } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
+import { DetectiveHog } from 'lib/components/hedgehogs'
+import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 import { createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
 import { urls } from 'scenes/urls'
 
+import { ProductKey } from '~/types'
+
 import { AlertState } from '../../../../queries/schema'
 import { alertLogic } from '../alertLogic'
 import { alertsLogic } from '../alertsLogic'
@@ -23,11 +27,10 @@ export function Alerts({ alertId }: AlertsProps): JSX.Element {
     const { push } = useActions(router)
     const logic = alertsLogic()
     const { loadAlerts } = useActions(logic)
+    const { alertsSortedByState, alertsLoading } = useValues(logic)
 
     const { alert } = useValues(alertLogic({ alertId }))
 
-    const { alertsSortedByState, alertsLoading } = useValues(logic)
-
     const columns: LemonTableColumns<AlertType> = [
         {
             key: 'id',
@@ -101,6 +104,25 @@ export function Alerts({ alertId }: AlertsProps): JSX.Element {
     // TODO: add info here to sign up for alerts early access
     return (
         <>
+            {alertsSortedByState.length === 0 && !alertsLoading && (
+                <ProductIntroduction
+                    productName="Alerts"
+                    productKey={ProductKey.ALERTS}
+                    thingName="alert"
+                    description="Alerts enable you to monitor your insight and notify you when certain conditions are met. Please note that alerts are in alpha and may not be fully reliable."
+                    // TODO: update docs link when ready
+                    // docsURL="https://posthog.com/docs/data/annotations"
+                    isEmpty={alertsSortedByState.length === 0 && !alertsLoading}
+                    customHog={DetectiveHog}
+                    actionElementOverride={
+                        <span className="italic">
+                            To get started, visit a trends insight, expand options in the header and click 'Manage
+                            Alerts'
+                        </span>
+                    }
+                />
+            )}
+
             {alert && (
                 <EditAlertModal
                     onClose={() => push(urls.alerts())}

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

@@ -9,6 +9,7 @@ import { pluralize } from 'lib/utils'
 import { urls } from 'scenes/urls'
 
 import { AlertState } from '~/queries/schema'
+import { InsightShortId } from '~/types'
 
 import { insightAlertsLogic, InsightAlertsLogicProps } from '../insightAlertsLogic'
 import { AlertType } from '../types'
@@ -58,6 +59,7 @@ export function AlertListItem({ alert, onClick }: AlertListItemProps): JSX.Eleme
 
 interface ManageAlertsModalProps extends InsightAlertsLogicProps {
     isOpen: boolean
+    insightShortId: InsightShortId
     onClose?: () => void
 }
 
@@ -77,7 +79,7 @@ export function ManageAlertsModal(props: ManageAlertsModalProps): JSX.Element {
             <LemonModal.Content>
                 <div className="mb-4">
                     With alerts, PostHog will monitor your insight and notify you when certain conditions are met. We do
-                    not evaluate alerts in real-time, but rather on a schedule of once every hour. Please note that
+                    not evaluate alerts in real-time, but rather on a schedule (hourly, daily...). Please note that
                     alerts are in alpha and may not be fully reliable.
                 </div>
                 {alerts.length ? (

frontend/src/scenes/insights/InsightPageHeader.tsx

@@ -65,7 +65,6 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
         insightAlertsLogic({
             insightLogicProps,
             insightId: insight.id as number,
-            insightShortId: insight.short_id as InsightShortId,
         })
     )
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -2,6 +2,7 @@ import 'chartjs-adapter-dayjs-3'
 
 import { LegendOptions } from 'chart.js'
 import { DeepPartial } from 'chart.js/dist/types/utils'
+import annotationPlugin, { AnnotationPluginOptions } from 'chartjs-plugin-annotation'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
 import clsx from 'clsx'
@@ -40,7 +41,7 @@ import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { hexToRGBA, lightenDarkenColor } from '~/lib/utils'
 import { groupsModel } from '~/models/groupsModel'
-import { TrendsFilter } from '~/queries/schema'
+import { GoalLine, TrendsFilter } from '~/queries/schema'
 import { GraphDataset, GraphPoint, GraphPointPayload, GraphType } from '~/types'
 
 let tooltipRoot: Root
@@ -238,6 +239,7 @@ export interface LineGraphProps {
     hideYAxis?: boolean
     legend?: DeepPartial<LegendOptions<ChartType>>
     yAxisScaleType?: string | null
+    alertLines?: GoalLine[]
 }
 
 export const LineGraph = (props: LineGraphProps): JSX.Element => {
@@ -277,6 +279,7 @@ export function LineGraph_({
     hideYAxis,
     legend = { display: false },
     yAxisScaleType,
+    alertLines = [],
 }: LineGraphProps): JSX.Element {
     let datasets = _datasets
 
@@ -394,6 +397,19 @@ export function LineGraph_({
             }
         }
 
+        const annotations = alertLines.reduce((acc, { value }, idx) => {
+            acc[`${idx}`] = {
+                type: 'line',
+                yMin: value,
+                yMax: value,
+                borderColor: 'rgb(255, 99, 132)',
+                borderWidth: 1,
+                borderDash: [5, 8],
+            }
+
+            return acc
+        }, {} as AnnotationPluginOptions['annotations'])
+
         datasets = datasets.map(processDataset)
 
         const seriesNonZeroMax = Math.max(...datasets.flatMap((d) => d.data).filter((n) => !!n && n !== LOG_ZERO))
@@ -463,6 +479,7 @@ export function LineGraph_({
                     borderColor: 'white',
                 },
                 legend: legend,
+                annotation: { annotations },
                 tooltip: {
                     ...tooltipOptions,
                     external({ tooltip }: { chart: Chart; tooltip: TooltipModel<ChartType> }) {
@@ -767,6 +784,7 @@ export function LineGraph_({
             options.indexAxis = 'y'
         }
         Chart.register(ChartjsPluginStacked100)
+        Chart.register(annotationPlugin)
         const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
             type: (isBar ? GraphType.Bar : type) as ChartType,
             data: { labels, datasets },
@@ -775,7 +793,16 @@ export function LineGraph_({
         })
         setMyLineChart(newChart)
         return () => newChart.destroy()
-    }, [datasets, hiddenLegendIndexes, isDarkModeOn, trendsFilter, formula, showValuesOnSeries, showPercentStackView])
+    }, [
+        datasets,
+        hiddenLegendIndexes,
+        isDarkModeOn,
+        trendsFilter,
+        formula,
+        showValuesOnSeries,
+        showPercentStackView,
+        alertLines,
+    ])
 
     return (
         <div className={clsx('LineGraph w-full grow relative overflow-hidden')} data-attr={dataAttr}>

frontend/src/scenes/trends/viz/ActionsLineGraph.tsx

@@ -2,6 +2,7 @@ import { ChartType, defaults, LegendOptions } from 'chart.js'
 import { DeepPartial } from 'chart.js/dist/types/utils'
 import { useValues } from 'kea'
 import { Chart } from 'lib/Chart'
+import { insightAlertsLogic } from 'lib/components/Alerts/insightAlertsLogic'
 import { DateDisplay } from 'lib/components/DateDisplay'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { capitalizeFirstLetter, isMultiSeriesFormula } from 'lib/utils'
@@ -20,7 +21,8 @@ export function ActionsLineGraph({
     showPersonsModal = true,
     context,
 }: ChartParams): JSX.Element | null {
-    const { insightProps } = useValues(insightLogic)
+    const { insightProps, insight } = useValues(insightLogic)
+
     const {
         indexedResults,
         labelGroupType,
@@ -41,6 +43,10 @@ export function ActionsLineGraph({
         yAxisScaleType,
     } = useValues(trendsDataLogic(insightProps))
 
+    const { alertThresholdLines } = useValues(
+        insightAlertsLogic({ insightId: insight.id!, insightLogicProps: insightProps })
+    )
+
     const labels =
         (indexedResults.length === 2 &&
             indexedResults.every((x) => x.compare) &&
@@ -106,6 +112,7 @@ export function ActionsLineGraph({
             isArea={display === ChartDisplayType.ActionsAreaGraph}
             incompletenessOffsetFromEnd={incompletenessOffsetFromEnd}
             legend={legend}
+            alertLines={alertThresholdLines}
             onClick={
                 !showPersonsModal || isMultiSeriesFormula(formula) || isDataWarehouseSeries
                     ? undefined

frontend/src/types.ts

@@ -167,6 +167,7 @@ type AvailableFeatureUnion = `${AvailableFeature}`
 export enum ProductKey {
     COHORTS = 'cohorts',
     ACTIONS = 'actions',
+    ALERTS = 'alerts',
     EXPERIMENTS = 'experiments',
     FEATURE_FLAGS = 'feature_flags',
     ANNOTATIONS = 'annotations',